/* ==========================================================================
   Junk Era — design system
   Black + green. Dark brand surfaces (header, hero, bands, footer), light
   reading surfaces (services, pricing, forms) so the page never gets gloomy.
   NOTE: every clamp()/calc() keeps spaces around + and - . Without them the
   browser silently drops the whole rule.
   ========================================================================== */

:root{
  /* brand */
  --ink:        #0A0B0A;   /* near-black, the brand ground */
  --ink-2:      #141815;   /* raised dark surface */
  --ink-3:      #1E241F;   /* dark borders / hairlines */
  --green:      #35E07F;   /* primary green, for use on dark only */
  --green-mid:  #19B763;   /* mid green, buttons on light */
  --green-deep: #0A6B35;   /* green text on light surfaces. Darkened from
                              #0B7A3D, which measured 4.39:1 over the hero sky
                              at wide viewports. This clears 5:1 there. */
  --green-wash: #EAFBF1;   /* pale green section tint */

  /* light surfaces */
  --paper:      #FFFFFF;
  --paper-2:    #F5F7F5;
  --line:       #E3E8E4;

  /* text */
  --text:       #10140F;   /* on light */
  --text-soft:  #5A635C;   /* muted on light */
  --on-dark:    #F3F6F3;   /* on dark */
  --on-dark-soft:#A3AEA6;  /* muted on dark */

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1140px;
  --r:    14px;
  --r-sm: 9px;
  --shadow: 0 18px 40px -22px rgba(8,16,10,.55);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--green-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ line-height:1.14; letter-spacing:-.022em; margin:0 0 .5em; font-weight:800; }
h1{ font-size:clamp(2.1rem, 1.35rem + 3.1vw, 3.75rem); }
h2{ font-size:clamp(1.65rem, 1.2rem + 1.7vw, 2.5rem); }
h3{ font-size:clamp(1.12rem, 1rem + .45vw, 1.35rem); }
p{ margin:0 0 1.05em; }
ul{ margin:0 0 1.05em; padding-left:1.15em; }
li{ margin-bottom:.4em; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.sec{ padding-block:clamp(52px, 6vw, 86px); }
.sec--tight{ padding-block:clamp(36px, 4vw, 56px); }
.sec--dark{ background:var(--ink); color:var(--on-dark); }
:is(.sec--dark, .hero, .callbar, .site-head) h1,:is(.sec--dark, .hero, .callbar, .site-head) h2,:is(.sec--dark, .hero, .callbar, .site-head) h3{ color:#fff; }
:is(.sec--dark, .hero, .callbar, .site-head) p{ color:var(--on-dark-soft); }
.sec--wash{ background:var(--green-wash); }
.sec--paper2{ background:var(--paper-2); }

.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--green-deep); margin:0 0 .85em;
}
:is(.sec--dark, .hero, .callbar, .site-head) .eyebrow{ color:var(--green); }
.lede{ font-size:clamp(1.02rem, .97rem + .3vw, 1.2rem); color:var(--text-soft); max-width:62ch; }
:is(.sec--dark, .hero, .callbar, .site-head) .lede{ color:var(--on-dark-soft); }
.center{ text-align:center; } .center .lede{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:800; font-size:1.02rem; line-height:1; padding:16px 26px;
  border-radius:100px; border:2px solid transparent; cursor:pointer;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
  text-align:center;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn--primary{ background:var(--green); color:var(--ink); }
.btn--primary:hover{ background:#4DE98E; }


.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--text); }
:is(.sec--dark, .hero, .callbar, .site-head) .btn--ghost{ color:#fff; border-color:#3A443C; }
:is(.sec--dark, .hero, .callbar, .site-head) .btn--ghost:hover{ border-color:var(--green); color:var(--green); }
.btns{ display:flex; gap:12px; flex-wrap:wrap; }
.center .btns{ justify-content:center; }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60; background:var(--ink);
  border-bottom:1px solid var(--ink-3);
}
.site-head .wrap{ display:flex; align-items:center; gap:18px; min-height:74px; }
.brand{ display:flex; align-items:center; flex:none; }
.brand{ min-width:0; }
.brand svg,.brand img{ height:50px; width:auto; max-width:100%; }
@media (max-width:420px){ .brand svg,.brand img{ height:40px; } }
.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(12px, 1.6vw, 26px); }
.nav a{ color:var(--on-dark); font-weight:650; font-size:.95rem; }
.nav a:hover{ color:var(--green); text-decoration:none; }
.nav .btn{ padding:12px 20px; font-size:.95rem; }
/* `.nav a` (0,1,1) out-specifies `.btn--primary` (0,1,0) and was repainting the
   header CTA near-white on green: 1.59:1. Pin it explicitly. */
.nav a.btn--primary,.nav a.btn--primary:hover{ color:var(--ink); }
.navtoggle{
  margin-left:auto; display:none; background:transparent; border:1px solid #3A443C;
  border-radius:9px; padding:9px 11px; cursor:pointer;
}
.navtoggle span{ display:block; width:20px; height:2px; background:#fff; margin:4px 0; border-radius:2px; }
@media (max-width:900px){
  .nav{
    position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    background:var(--ink); border-bottom:1px solid var(--ink-3); padding:14px 20px 20px; gap:4px;
  }
  .nav a{ padding:11px 2px; border-bottom:1px solid var(--ink-3); }
  .nav .btn{ margin-top:10px; border-bottom:0; }
  .navtoggle{ display:block; }
  .nav[hidden]{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  color:var(--text); padding-block:clamp(54px, 7vw, 104px);
  position:relative; overflow:hidden; background-color:#E8F0F2;
  /* Light scrim: the artwork is a bright daytime scene, so the text side is
     lifted toward white rather than darkened. Lives here, not in the artwork,
     so a real photo of his rig drops in with no re-tuning. */
  background-image:
    linear-gradient(100deg,
      rgba(252,253,251,.97) 0%,
      rgba(252,253,251,.94) 33%,
      rgba(252,253,251,.60) 45%,
      rgba(252,253,251,.10) 58%,
      rgba(252,253,251,0) 100%),
    var(--hero-bg, url("../img/hero-bg.svg"));
  background-size:cover, cover;
  background-position:center, center right;
  background-repeat:no-repeat, no-repeat;
}
/* 861-1130px: desktop scrim applies but the text column is proportionally
   wider, so it reached into the truck. Push the falloff further right. */
@media (min-width:861px) and (max-width:1130px){
  .hero{
    background-image:
      linear-gradient(100deg,
        rgba(252,253,251,.98) 0%,
        rgba(252,253,251,.96) 48%,
        rgba(252,253,251,.80) 64%,
        rgba(252,253,251,.28) 82%,
        rgba(252,253,251,0) 100%),
      var(--hero-bg, url("../img/hero-bg.svg"));
  }
}
@media (max-width:860px){
  .hero{
    background-image:
      linear-gradient(180deg, rgba(252,253,251,.96), rgba(252,253,251,.93) 62%, rgba(252,253,251,.97)),
      var(--hero-bg, url("../img/hero-bg.svg"));
    background-position:center, center bottom;
  }
}
.hero .eyebrow{ color:var(--green-deep); }
.hero h1{ color:var(--ink); max-width:15ch; text-transform:uppercase; letter-spacing:-.03em; }
.hero h1 em{ font-style:normal; color:var(--green-deep); }
.hero .lede{ color:var(--text-soft); margin-bottom:1.6em; max-width:48ch; }
.hero .btns{ margin-bottom:30px; }
.hero .btn--ghost{ color:var(--text); border-color:#C4CEC6; }
.hero .btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }

/* arrow on the primary CTA, like the reference */
.btn--arrow::after{
  content:""; width:17px; height:11px; flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8h20M15 2l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8h20M15 2l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .14s ease;
}
.btn--arrow:hover::after{ transform:translateX(3px); }

/* hero trust row */
.herotrust{ display:flex; flex-wrap:wrap; gap:12px 22px; list-style:none; padding:0; margin:0; }
/* Where the truck sits beside the text (>=861px), a one-line row ran onto the
   truck and measured 2.4:1. Stacked, it stays narrow and on the light side at
   every desktop width. Below 861px the fade is even, so one line is safe. */
@media (min-width:861px){
  .herotrust{ flex-direction:column; flex-wrap:nowrap; gap:12px; }
}
.herotrust li{ display:flex; align-items:center; gap:9px; margin:0; }
.herotrust strong{ display:block; font-size:.9rem; color:var(--ink); line-height:1.25; }
.herotrust span span{ font-size:.82rem; color:var(--text-soft); }
.hero .ico--sm{ background:rgba(25,183,99,.14); width:32px; height:32px; }
.hero .ico--sm svg{ stroke:var(--green-deep); width:18px; height:18px; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0; }
.chips li{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  font-weight:700; color:var(--on-dark-soft); border:1px solid var(--ink-3);
  border-radius:100px; padding:7px 13px; margin:0;
}
.chips li::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--green); margin-right:8px; vertical-align:middle; }

/* ---------- cards / grids ---------- */
.grid{ display:grid; gap:16px; }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(286px, 1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; display:flex; flex-direction:column;
}
.card h3{ margin-bottom:.35em; }
.card p{ color:var(--text-soft); font-size:.97rem; margin-bottom:1em; }
.card .more{ margin-top:auto; font-weight:750; font-size:.94rem; color:var(--green-deep); }
.card a.cardlink{ position:absolute; inset:0; }
.card--link{ position:relative; transition:border-color .13s ease, transform .13s ease; }
.card--link:hover{ border-color:var(--green-mid); transform:translateY(-2px); }

.ico{
  width:46px; height:46px; border-radius:11px; background:var(--ink);
  display:grid; place-items:center; margin-bottom:16px; flex:none;
}
.ico svg{ width:24px; height:24px; stroke:var(--green); stroke-width:1.9; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }

/* numbered steps */
.steps{ counter-reset:s; list-style:none; padding:0; }
.steps li{ counter-increment:s; position:relative; padding-left:62px; margin-bottom:28px; }
.steps li::before{
  content:counter(s); position:absolute; left:0; top:-2px; width:42px; height:42px;
  border-radius:50%; background:var(--green); color:var(--ink);
  display:grid; place-items:center; font-weight:900; font-size:1.05rem;
}
:is(.sec--dark, .hero, .callbar, .site-head) .steps li::before{ background:var(--green); color:var(--ink); }
.steps h3{ margin-bottom:.2em; }
.steps p{ margin:0; color:var(--text-soft); }
:is(.sec--dark, .hero, .callbar, .site-head) .steps p{ color:var(--on-dark-soft); }

/* ---------- pricing ---------- */
/* 5 tiers never divide evenly, so auto-fit always left a blank cell beside the
   last card. Explicit ladder instead: 1 col on phones, 2 cols with the last
   tier spanning both, then all 5 across once there is room. No empty cells. */
.ptable{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:620px){
  .ptable{ grid-template-columns:repeat(2, 1fr); }
  .ptable > :last-child{ grid-column:1 / -1; }
}
@media (min-width:1000px){
  .ptable{ grid-template-columns:repeat(5, 1fr); }
  .ptable > :last-child{ grid-column:auto; }
}
.ptier{
  border:1px solid var(--line); border-radius:var(--r); padding:24px 20px; background:var(--paper);
  text-align:center; display:flex; flex-direction:column;
}
.ptier--hero{ border-color:var(--green-mid); border-width:2px; position:relative; }
.ptier--hero::after{
  content:"MOST BOOKED"; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--green-mid); color:#fff; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.14em; font-weight:700; padding:4px 11px; border-radius:100px; white-space:nowrap;
}
.ptier .amt{ font-size:2.2rem; font-weight:900; letter-spacing:-.03em; margin:.1em 0 .05em; }
.ptier .frac{ font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-soft); font-weight:700; }
.ptier .desc{ font-size:.92rem; color:var(--text-soft); margin-top:.5em; }
.taxnote{ font-size:.92rem; color:var(--text-soft); }

/* ---------- checklist ---------- */
.checks{ list-style:none; padding:0; }
.checks li{ position:relative; padding-left:32px; margin-bottom:.75em; }
.checks li::before{
  content:""; position:absolute; left:0; top:.42em; width:18px; height:18px; border-radius:50%;
  background:var(--green-wash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6B35' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px 12px; background-position:center; background-repeat:no-repeat;
}
:is(.sec--dark, .hero, .callbar, .site-head) .checks li::before{ background-color:rgba(53,224,127,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335E07F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* tag pills */
.tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; }
.tags li{ background:var(--paper-2); border:1px solid var(--line); border-radius:100px;
  padding:6px 13px; font-size:.86rem; color:var(--text-soft); margin:0; }

/* ---------- forms ---------- */
.form{ display:grid; gap:14px; }
.field label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--text); background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 14px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green-mid); box-shadow:0 0 0 3px rgba(25,183,99,.16);
}
.field textarea{ min-height:124px; resize:vertical; }
.row2{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width:620px){ .row2{ grid-template-columns:1fr; } }
.formnote{ font-size:.87rem; color:var(--text-soft); }
.formmsg{ padding:13px 15px; border-radius:var(--r-sm); font-weight:650; font-size:.95rem; }
.formmsg--ok{ background:var(--green-wash); color:#0A5F31; border:1px solid #BFE9D1; }
.formmsg--err{ background:#FDECEC; color:#9B1C1C; border:1px solid #F5C9C9; }

/* ---------- faq ---------- */
.faq details{ border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary{ cursor:pointer; font-weight:750; padding:16px 34px 16px 0; position:relative; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:4px; top:50%; width:10px; height:10px;
  border-right:2.4px solid var(--text-soft); border-bottom:2.4px solid var(--text-soft);
  transform:translateY(-70%) rotate(45deg); transition:transform .16s ease;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.faq details p{ color:var(--text-soft); padding-bottom:12px; margin:0; }

/* ---------- footer ---------- */
.site-foot{ background:var(--ink); color:var(--on-dark-soft); padding-block:54px 108px; font-size:.94rem; }
.site-foot a{ color:var(--on-dark-soft); }
.site-foot a:hover{ color:var(--green); text-decoration:none; }
.foot-grid{ display:grid; gap:30px; grid-template-columns:1.4fr 1fr 1fr; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.site-foot h4{ color:#fff; font-size:.78rem; font-family:var(--mono); letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:1em; }
.site-foot ul{ list-style:none; padding:0; margin:0; }
.site-foot li{ margin-bottom:.5em; }
.legal{ border-top:1px solid var(--ink-3); margin-top:34px; padding-top:22px; font-size:.86rem; }

/* ---------- sticky mobile call bar ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:var(--ink); border-top:1px solid var(--ink-3); padding:10px 14px;
  gap:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.callbar .btn{ flex:1; padding:14px 10px; font-size:.97rem; }
@media (max-width:760px){ .callbar{ display:flex; } }

/* ---------- misc ---------- */
.breadcrumb{ font-size:.86rem; color:var(--on-dark-soft); margin-bottom:1em; }
.breadcrumb a{ color:var(--on-dark-soft); }
.split{ display:grid; gap:clamp(26px, 4vw, 54px); grid-template-columns:1.05fr .95fr; align-items:start; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.statline{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
.stat .n{ font-size:2.1rem; font-weight:900; color:var(--green); letter-spacing:-.03em; line-height:1.1; }
.stat .l{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-soft); font-weight:700; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:200; background:var(--green); color:var(--ink);
  padding:10px 16px; border-radius:8px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

.footlogo{ margin-bottom:16px; }
.footlogo svg{ height:56px; width:auto; max-width:100%; }

/* ---------- preview banner (draft builds only) ---------- */
.preview{ background:#FFE9A8; color:#4A3708; border-bottom:1px solid #E8CE74;
  font-size:.9rem; line-height:1.5; padding-block:11px; }
.preview strong{ color:#2F2204; }

/* ==========================================================================
   Homepage sections (reference build)
   ========================================================================== */

.hl{ color:var(--green-deep); }
:is(.sec--dark, .hero) .hl{ color:var(--green); }

/* ---------- category strip, overlapping the hero ---------- */
.catstrip{ background:linear-gradient(#E8F0F2 50%, var(--paper) 50%); }
.cats{
  display:grid; gap:0; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
}
.cat{ display:flex; gap:14px; align-items:flex-start; padding:22px 20px; }
.cat + .cat{ border-left:1px solid var(--line); }
@media (max-width:980px){ .cat + .cat{ border-left:0; border-top:1px solid var(--line); } }
.cat h3{ font-size:1rem; margin:0 0 .25em; }
.cat p{ margin:0; font-size:.9rem; color:var(--text-soft); }
.cat .ico{ margin:0; width:42px; height:42px; }

/* ---------- how it works ---------- */
.hsteps{
  list-style:none; padding:0; margin:34px 0 0; text-align:left;
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  counter-reset:none;
}
.hstep{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 22px 22px; margin:0;
}
.hnum{
  position:absolute; top:-14px; left:22px; width:32px; height:32px; border-radius:50%;
  background:var(--ink); color:var(--green); display:grid; place-items:center;
  font-weight:900; font-size:.95rem;
}
.hstep h3{ font-size:1.02rem; margin:.2em 0 .3em; }
.hstep p{ margin:0; font-size:.93rem; color:var(--text-soft); }

/* ---------- before / after ---------- */
.bagrid{
  display:grid; gap:16px; margin-top:34px; text-align:left;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}
.ba{ margin:0; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; }
.ba figcaption{
  display:flex; align-items:center; gap:9px; font-weight:750; font-size:.93rem;
  margin-bottom:12px;
}
.bapair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.baslot{
  position:relative; aspect-ratio:4 / 3; border-radius:var(--r-sm);
  background:repeating-linear-gradient(45deg, var(--paper-2) 0 10px, #EDF1EE 10px 20px);
  border:1px dashed var(--line); display:grid; place-items:end start; padding:9px;
}
.batag{
  background:var(--ink); color:#fff; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.12em; font-weight:700; padding:4px 9px; border-radius:100px;
}
.batag--after{ background:var(--green); color:var(--ink); }
.phnote{ margin-top:22px; font-size:.92rem; color:var(--text-soft); }

/* ---------- photo CTA bar ---------- */
.photobar{ background:var(--ink); color:var(--on-dark); padding-block:22px; }
.photobar .wrap{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.pb-left{ display:flex; align-items:center; gap:14px; font-size:.95rem;
  color:var(--on-dark-soft); }
.pb-left strong{ color:#fff; }
.photobar .btn{ flex:none; }
.photobar .btn svg{ width:19px; height:19px; stroke:currentColor; stroke-width:1.9;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }
.pb-trust{ display:flex; gap:18px; margin-left:auto; flex-wrap:wrap; }
.tbadge{ display:flex; align-items:center; gap:9px; font-size:.84rem;
  color:var(--on-dark-soft); font-weight:650; }
@media (max-width:860px){ .pb-trust{ margin-left:0; } }

/* ---------- small icon chip ---------- */
.ico--sm{ width:30px; height:30px; border-radius:8px; margin:0; flex:none; }
.ico--sm svg{ width:16px; height:16px; }
:is(.sec--wash, .sec--paper2, .sec) .ico--sm{ background:var(--green-wash); }
:is(.sec--wash, .sec--paper2, .sec) .ico--sm svg{ stroke:var(--green-deep); }

/* ---------- pricing with drawn trailers ---------- */
.ptable{ margin-top:34px; }
/* capped, or a full-width single-column card makes the trailer enormous */
.trailer{ width:100%; max-width:230px; height:auto; color:var(--ink);
  margin:6px auto 10px; display:block; }
.ptier--hero .trailer{ color:var(--ink); }

/* ---------- reviews empty state ---------- */
.revempty{
  max-width:620px; margin:30px auto 0; background:var(--ink-2);
  border:1px solid var(--ink-3); border-radius:var(--r); padding:30px 26px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.revempty .ico{ background:rgba(53,224,127,.14); margin:0; }
.revempty .ico svg{ stroke:var(--green); }
.revempty p{ margin:0; color:var(--on-dark-soft); }
.revempty strong{ color:#fff; }

/* ---------- service area ---------- */
/* ---------- service area: interactive map card (Junkluggers-style) ---------- */
.areacard-outer{
  margin-top:34px; background:var(--paper); border-radius:20px;
  box-shadow:0 22px 50px -28px rgba(8,30,16,.42); overflow:hidden;
}
.areamapwrap{ position:relative; height:clamp(380px, 46vw, 520px); background:#E8EFEA; }
.areamap-live{ position:absolute; inset:0; z-index:1; }
/* static SVG map sits on top until Leaflet is ready, so there is never a blank
   box, and it simply stays put if the CDN or the tiles cannot load */
.areamap-fallback{ position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  background:#F4F7F4; padding:12px; transition:opacity .35s ease; }
.areamap-fallback svg{ width:100%; height:100%; }
.areamapwrap.is-live .areamap-fallback{ opacity:0; pointer-events:none; }
/* mute the busy OSM palette so the green territory is what you see first */
.areamapwrap .leaflet-tile-pane{ filter:saturate(.42) brightness(1.04) contrast(.95); }
.areamapwrap .leaflet-container{ font-family:var(--sans); background:#E8EFEA; }
.areamapwrap .leaflet-tooltip{ font-weight:700; font-size:.82rem; border-radius:7px;
  border:0; box-shadow:0 6px 16px -6px rgba(0,0,0,.35); }

.areainfo{
  position:absolute; z-index:500; top:20px; left:20px; max-width:330px;
  background:#fff; border-radius:12px; padding:20px 20px 18px;
  box-shadow:0 14px 30px -14px rgba(8,30,16,.45);
}
.areainfo h3{ font-size:1.12rem; margin:0 0 .55em; line-height:1.25; }
.areaphone{ display:flex; align-items:center; gap:9px; font-weight:750; color:var(--ink);
  margin-bottom:14px; }
.areaphone:hover{ color:var(--green-deep); text-decoration:none; }
.areainfo .ico--sm{ background:var(--green-wash); }
.areainfo .ico--sm svg{ stroke:var(--green-deep); }
.areainfo .btn{ width:100%; padding:13px 18px; font-size:.95rem; }

.areabar{ height:7px; background:var(--green-mid); }

.citygrid{
  list-style:none; margin:0; padding:30px clamp(20px, 3vw, 44px) 10px;
  display:grid; gap:14px 22px; grid-template-columns:repeat(4, minmax(0, 1fr));
}
.citygrid li{ position:relative; padding-left:28px; margin:0; font-size:.98rem; }
.citygrid li::before{
  content:""; position:absolute; left:0; top:.2em; width:18px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319B763' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.areacard-outer .citynote{ padding:6px clamp(20px, 3vw, 44px) 28px; }

@media (max-width:900px){ .citygrid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:640px){
  .citygrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* on a phone the card would cover half the map: drop it below instead */
  .areamapwrap{ height:auto; display:flex; flex-direction:column; }
  .areamap-live, .areamap-fallback{ position:relative; inset:auto; height:340px; }
  .areamap-fallback{ position:absolute; top:0; left:0; right:0; }
  .areainfo{ position:static; max-width:none; border-radius:0; box-shadow:none;
    border-top:1px solid var(--line); }
}

.dfwmap{ width:100%; height:auto; display:block; border-radius:var(--r-sm); }
.dfwmap .mbg{ fill:#F4F7F4; }
.dfwmap .mctx{ fill:#E6EBE7; stroke:#F4F7F4; stroke-width:1.4; }
/* stroked copy sits under the filled copy, so only the outer rim shows and the
   four counties read as a single service region */
.dfwmap .mrim{ fill:none; stroke:var(--green-mid); stroke-width:7; stroke-linejoin:round; }
.dfwmap .mfill{ fill:#8FEBB8; stroke:none; }
.dfwmap .mcounty{
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.14em;
  fill:#3E7A58; text-anchor:middle; opacity:.65; pointer-events:none;
}
.dfwmap .mdot{ fill:#1B2B21; }
.dfwmap .mp--major .mdot,.dfwmap .mp--core .mdot{ fill:var(--ink); stroke:#fff; stroke-width:2.4; }
.dfwmap .mlabel{
  font-size:15px; font-weight:700; fill:var(--ink);
  stroke:#F4F7F4; stroke-width:3.4; stroke-linejoin:round;
}
.dfwmap .mp--major .mlabel{ font-size:21px; font-weight:800; }
.dfwmap .mp--core .mlabel{ font-size:19px; font-weight:800; fill:#0C6B3C; }
.citylist{
  list-style:none; padding:0; margin:0 0 16px; columns:2; column-gap:18px;
  text-align:left;
}
.citylist li{ margin-bottom:.46em; font-size:.93rem; break-inside:avoid;
  position:relative; padding-left:24px; }
.citylist li::before{
  content:""; position:absolute; left:0; top:.3em; width:16px; height:16px; border-radius:50%;
  background-color:var(--green-wash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6B35' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px 11px; background-position:center; background-repeat:no-repeat;
}
.citynote{ display:flex; gap:10px; align-items:flex-start; text-align:left;
  font-size:.92rem; color:var(--text-soft); margin:0; }

/* ---------- faq ---------- */
.faqwrap{ max-width:820px; margin-top:30px; }
.fq{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:10px; padding:2px 18px; }
.fq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:13px;
  padding:16px 34px 16px 0; position:relative; font-weight:750; font-size:1rem;
}
.fq summary::-webkit-details-marker{ display:none; }
.fq summary::after{
  content:""; position:absolute; right:2px; top:50%; width:15px; height:15px;
  transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A635C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s ease;
}
.fq[open] summary::after{ transform:translateY(-50%) rotate(135deg); }
.fq p{ margin:0; padding:0 0 18px 43px; color:var(--text-soft); font-size:.97rem; }
@media (max-width:560px){ .fq p{ padding-left:0; } }

/* ---------- demolition grid ---------- */
.dgrid{
  display:grid; gap:14px; margin-top:32px; text-align:left;
  grid-template-columns:repeat(auto-fit, minmax(248px, 1fr));
}
.dcard{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px; }
.sec--paper2 .dcard{ background:var(--paper); }
.dcard h3{ font-size:1.02rem; margin:0 0 .3em; }
.dcard p{ margin:0; font-size:.93rem; color:var(--text-soft); }