/* ---------------------------------------------------------------- fonts */
@font-face{
  font-family:'Archivo';
  src:url('assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Public Sans';
  src:url('assets/fonts/publicsans-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------------------------------------------------------------- tokens */
:root{
  --ink:#0B0F0A;         /* the logo's black ground */
  --ink-2:#141A12;
  --ink-3:#1F271C;
  --paper:#FFFFFF;
  --mist:#F4F7F2;
  --mist-2:#E7EFE2;
  --line:#DCE5D6;
  --line-2:#C0D0B8;

  --brand:#15803D;        /* text + primary action, 5.0:1 on white */
  --brand-deep:#166534;   /* hover, and the review band ground, 7.1:1 */
  --brand-bright:#75DD2D; /* HIS LIME. fills and dark grounds only - 1.7:1 on white */
  --accent:#15803D;       /* same green: his identity is two colours, not three */
  --accent-bright:#75DD2D;
  --amber:#B45309;

  --muted:#5A6657;       /* 5.5:1 on white */
  --muted-light:#A8BCA0; /* on dark grounds only */

  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(11,15,10,.05), 0 8px 24px -12px rgba(11,15,10,.18);
  --shadow-lg:0 2px 4px rgba(11,15,10,.06), 0 20px 48px -20px rgba(11,15,10,.28);
  --wrap:1180px;
  --header-h:76px;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--brand-deep)}
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif; line-height:1.12; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5vw,3.4rem); font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:750}
h3{font-size:1.24rem; font-weight:700; letter-spacing:-.01em}
h4{font-size:1.03rem; font-weight:700; letter-spacing:0}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em; padding-left:1.15em}
li{margin:.3em 0}
hr{border:0; border-top:1px solid var(--line); margin:2.6rem 0}
:focus-visible{outline:3px solid var(--brand-bright); outline-offset:2px; border-radius:3px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.narrow{max-width:760px}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:200}
.skip:focus{left:8px; top:8px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------------------------------------------------------------- ticker */
/* The scrolling trust bar carried over from their current site. Two identical
   tracks slide as one so the loop is seamless; motion is off for anyone who
   asked for reduced motion, and the bar pauses on hover or focus. */
.ticker{
  background:var(--ink); color:#fff; overflow:hidden; position:relative;
  font-size:.83rem; letter-spacing:.02em;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ticker-viewport{display:flex; width:max-content; will-change:transform}
.ticker:hover .ticker-viewport,
.ticker:focus-within .ticker-viewport{animation-play-state:paused}
.ticker-track{
  display:flex; align-items:center; flex:0 0 auto;
  padding:0; margin:0; list-style:none;
}
.ticker-track li{display:flex; align-items:center; margin:0; white-space:nowrap}
.ticker-track li::after{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--accent-bright); margin:0 22px; flex:0 0 auto;
}
.ticker-track a,.ticker-track span{
  color:#fff; padding:9px 0; text-decoration:none; font-weight:600;
}
.ticker-track a:hover{color:var(--accent-bright); text-decoration:underline}
@keyframes ticker-run{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.ticker-viewport{animation:ticker-run 42s linear infinite}
@media (prefers-reduced-motion:reduce){
  .ticker-viewport{animation:none}
  .ticker{overflow-x:auto}
}

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:90; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-in{
  display:flex; align-items:center; gap:26px;
  min-height:var(--header-h); max-width:var(--wrap); margin:0 auto; padding:10px 22px;
}
/* One logo file per ground; see _src/make-logo.py.
   Sized on height — the lockup is 5.6:1, so pinning width would let it drive
   the header's height instead. width:auto keeps the intrinsic ratio. */
.brand{display:flex; align-items:center; flex:0 0 auto; text-decoration:none}
.brand-logo{display:block; height:40px; width:auto}
.nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav > a,.nav-group > button{
  font-family:'Archivo',sans-serif; font-size:.94rem; font-weight:600;
  color:var(--ink); text-decoration:none; padding:9px 12px; border-radius:var(--radius-sm);
  background:none; border:0; cursor:pointer; letter-spacing:-.005em; white-space:nowrap;
}
.nav > a:hover,.nav-group > button:hover{background:var(--mist); color:var(--brand)}
.nav > a[aria-current="page"]{color:var(--brand); box-shadow:inset 0 -2px 0 var(--brand)}
.nav-group{position:relative}
.nav-group > button::after{
  content:''; display:inline-block; width:6px; height:6px; margin-left:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.nav-menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:250px; padding:7px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); display:none; z-index:95;
}
.nav-group[data-open="true"] .nav-menu{display:block}
.nav-menu a{
  display:block; padding:9px 12px; border-radius:var(--radius-sm);
  font-size:.92rem; font-weight:550; color:var(--ink); text-decoration:none;
}
.nav-menu a:hover{background:var(--mist); color:var(--brand)}
.header-cta{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.header-phone{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:.95rem;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:7px;
  padding:9px 12px; border-radius:var(--radius-sm); white-space:nowrap;
}
.header-phone:hover{background:var(--mist); color:var(--brand)}
.header-phone svg{width:16px; height:16px; fill:var(--brand); flex:0 0 auto}
/* Text sits beside the phone; both drop at 1080 so the nav never crowds. */
.header-text{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:.95rem;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:7px;
  padding:9px 12px; border-radius:var(--radius-sm); white-space:nowrap;
}
.header-text:hover{background:var(--mist); color:var(--accent)}
.header-text svg{width:16px; height:16px; fill:var(--accent); flex:0 0 auto}
.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--paper); cursor:pointer;
  padding:0; align-items:center; justify-content:center;
}
.burger span{display:block; width:19px; height:2px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:19px; height:2px; background:var(--ink);
}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:120; background:rgba(11,15,10,.55);
  opacity:0; visibility:hidden; transition:opacity .2s;
}
.drawer[data-open="true"]{opacity:1; visibility:visible}
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(360px,88vw);
  background:var(--paper); padding:18px; overflow-y:auto;
  transform:translateX(100%); transition:transform .24s ease;
  display:flex; flex-direction:column; gap:4px;
}
.drawer[data-open="true"] .drawer-panel{transform:none}
.drawer-close{
  align-self:flex-end; width:44px; height:44px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--paper); font-size:22px;
  line-height:1; cursor:pointer; color:var(--ink); margin-bottom:6px;
}
.drawer-panel a{
  padding:11px 12px; border-radius:var(--radius-sm); text-decoration:none;
  color:var(--ink); font-family:'Archivo',sans-serif; font-weight:650; font-size:1rem;
}
.drawer-panel a:hover{background:var(--mist)}
.drawer-panel .sub{padding-left:26px; font-weight:500; font-size:.93rem; color:var(--muted)}
.drawer-panel .drawer-head{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  font-family:'Archivo',sans-serif; font-weight:700; padding:14px 12px 4px;
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:1rem;
  padding:14px 24px; border-radius:var(--radius); border:2px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center; line-height:1.2;
  transition:background .15s, color .15s, border-color .15s;
}
.btn svg{width:17px; height:17px; fill:currentColor; flex:0 0 auto}
.btn.primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-deep); border-color:var(--brand-deep); color:#fff}
/* Lime fill with INK text, never white text: white on this green is 1.7:1.
   Dark-on-lime is 12.1:1 and is how the logo pairs them. */
.btn.go{background:var(--brand-bright); color:var(--ink); border-color:var(--brand-bright)}
.btn.go:hover{background:#63C424; border-color:#63C424; color:var(--ink)}
.btn.outline{background:transparent; color:var(--brand); border-color:var(--line-2)}
.btn.outline:hover{border-color:var(--brand); background:var(--mist); color:var(--brand-deep)}
/* on dark grounds only */
.btn.on-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn.on-dark:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff}
.btn.sm{padding:10px 17px; font-size:.9rem}
.btn.block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}

/* ---------------------------------------------------------------- sections */
.section{padding:clamp(52px,7vw,86px) 0}
.section.tight{padding:clamp(38px,5vw,58px) 0}
.section.mist{background:var(--mist)}
.section.dark{background:var(--ink); color:#fff}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark p{color:#E0D6C6}
.section.dark a{color:#8FD5FF}
.eyebrow{
  font-family:'Archivo',sans-serif; font-size:.74rem; font-weight:750;
  letter-spacing:.13em; text-transform:uppercase; color:var(--brand);
  margin:0 0 .7em; display:block;
}
.section.dark .eyebrow{color:var(--accent-bright)}
.section-head{max-width:720px; margin-bottom:2.4rem}
.section-head p{color:var(--muted); font-size:1.06rem; margin-bottom:0}
.section.dark .section-head p{color:#E0D6C6}
.lead{font-size:1.12rem; color:var(--muted)}

/* ---------------------------------------------------------------- hero */
.hero{
  background:var(--mist);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-in{
  max-width:var(--wrap); margin:0 auto; padding:clamp(38px,5.5vw,66px) 22px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center;
}
.hero h1{margin-bottom:.42em}
.hero-sub{font-size:1.1rem; color:var(--muted); max-width:34em; margin-bottom:1.5rem}
.hero-art{position:relative}
.hero-art img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
/* Must out-specify .hero-art img (0,1,1) or the badge inherits width:100%
   and the 16/10 aspect-ratio, and covers the whole hero photo. */
.hero-art img.hero-badge{
  position:absolute; right:-8px; bottom:-14px;
  width:104px; height:auto; aspect-ratio:auto; object-fit:contain;
  background:#fff; border-radius:50%; padding:9px;
  box-shadow:var(--shadow-lg);
}
.hero-points{
  list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-wrap:wrap; gap:9px 20px;
}
.hero-points li{
  display:flex; align-items:center; gap:8px; font-size:.94rem; font-weight:600;
  color:var(--ink-2); margin:0;
}
.hero-points li::before{
  content:''; width:17px; height:17px; flex:0 0 auto; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.4 11.2 3.6 8.4l1.1-1.1 1.7 1.7 4.9-4.9 1.1 1.1z'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* page head (interior pages) */
.page-head{background:var(--mist); border-bottom:1px solid var(--line); padding:clamp(34px,4.4vw,58px) 0}
.page-head h1{margin-bottom:.3em}
.page-head p{color:var(--muted); font-size:1.08rem; max-width:60ch; margin-bottom:0}
.crumbs{
  font-size:.83rem; color:var(--muted); margin-bottom:1.1rem;
  display:flex; flex-wrap:wrap; gap:7px; align-items:center;
}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--brand); text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}

/* ---------------------------------------------------------------- cards */
.card-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.card-grid.two{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover{border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-2px)}
.card img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.card-body{padding:19px 20px 21px; display:flex; flex-direction:column; flex:1}
.card-body h3{margin-bottom:.4em}
.card-body h3 a{color:var(--ink); text-decoration:none}
.card-body h3 a:hover{color:var(--brand)}
.card-body p{color:var(--muted); font-size:.95rem; margin-bottom:1em}
.card-link{
  margin-top:auto; font-family:'Archivo',sans-serif; font-weight:700; font-size:.9rem;
  color:var(--brand); text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.card-link::after{content:'\2192'; transition:transform .15s}
.card:hover .card-link::after{transform:translateX(3px)}
.card-tag{
  display:inline-block; font-family:'Archivo',sans-serif; font-size:.68rem; font-weight:750;
  letter-spacing:.09em; text-transform:uppercase; padding:4px 9px; border-radius:99px;
  background:var(--mist-2); color:var(--brand-deep); margin-bottom:.8em; align-self:flex-start;
}
/* Modifier is 'quoted', NOT 'quote': .quote is the testimonial component
   below, and at equal specificity the later rule won — which handed this
   chip the testimonial card's 26px padding, border and column flex. */
.card-tag.quoted{background:#FBF0DC; color:#8A5806}

/* ---------------------------------------------------------------- steps */
.steps{list-style:none; padding:0; margin:0; display:grid; gap:2px}
.steps li{
  display:grid; grid-template-columns:66px 1fr; gap:22px; align-items:start;
  padding:22px 0; border-top:1px solid var(--line); margin:0;
}
.steps li:last-child{border-bottom:1px solid var(--line)}
/* --brand, not --brand-bright: the bright orange is only 2.8:1 on white and
   these numerals are large text, which still needs 3:1. Caught by shoot.mjs
   against the real painted background. */
.step-n{
  font-family:'Archivo',sans-serif; font-size:1.6rem; font-weight:800;
  color:var(--brand); line-height:1; letter-spacing:-.03em;
}
.steps h3{margin-bottom:.32em}
.steps p{color:var(--muted); margin:0; font-size:.98rem}
.section.dark .steps li{border-color:rgba(255,255,255,.14)}
.section.dark .step-n{color:var(--accent-bright)}

/* ---------------------------------------------------------------- split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,54px); align-items:center}
.split.art-first .split-art{order:-1}
.split-art img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}
.split-art img.tall{height:auto; aspect-ratio:4/5; object-fit:cover}
.split-art img.wide{height:auto; aspect-ratio:16/10; object-fit:cover}

/* two-column choice panels (curbside vs full service) */
.choice{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.choice-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
  background:var(--paper);
}
.choice-card.accent{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
.choice-card h3{display:flex; align-items:center; gap:10px; margin-bottom:.5em}
.choice-card .pill{
  font-family:'Archivo',sans-serif; font-size:.68rem; font-weight:750; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 9px; border-radius:99px;
  background:var(--accent); color:#fff;
}
.choice-card ul{list-style:none; padding:0; margin:1em 0 0}
.choice-card li{
  padding-left:24px; position:relative; font-size:.95rem; color:var(--muted); margin:.45em 0;
}
.choice-card li::before{
  content:''; position:absolute; left:0; top:.55em; width:11px; height:2px; background:var(--brand-bright);
}

/* ---------------------------------------------------------------- pricing */
.price-cards{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.price-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
  background:var(--paper); display:flex; flex-direction:column; text-align:center;
}
.price-card.feature{border-color:var(--brand); box-shadow:var(--shadow)}
.price-card h3{margin-bottom:.15em}
.price-big{
  font-family:'Archivo',sans-serif; font-size:2.5rem; font-weight:800; color:var(--ink);
  line-height:1; margin:.25em 0 .1em; letter-spacing:-.03em;
}
.price-was{font-size:.9rem; color:var(--muted); text-decoration:line-through; margin-bottom:1em}
.price-card ul{list-style:none; padding:0; margin:0 0 1.4em; text-align:left}
.price-card li{
  font-size:.94rem; color:var(--muted); padding-left:20px; position:relative; margin:.4em 0;
}
.price-card li::before{
  content:''; position:absolute; left:0; top:.62em; width:9px; height:2px; background:var(--accent-bright);
}
.price-card .btn{margin-top:auto}

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper)}
table.price{width:100%; border-collapse:collapse; min-width:560px; font-size:.96rem}
table.price th,table.price td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line)}
table.price thead th{
  background:var(--mist); font-family:'Archivo',sans-serif; font-size:.78rem; font-weight:750;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
}
table.price tbody tr:last-child td{border-bottom:0}
table.price td.num{font-family:'Archivo',sans-serif; font-weight:750; white-space:nowrap}
table.price td.num .cur{color:var(--accent)}
table.price td.num .fs{color:var(--brand)}
table.price td .note{display:block; font-size:.85rem; color:var(--muted); font-weight:400}
table.price .grouphead td{
  background:var(--mist); font-family:'Archivo',sans-serif; font-weight:750;
  font-size:.82rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2);
}
table.price td.act{text-align:right; white-space:nowrap}

.note-card{
  border:1px solid var(--line); border-left:3px solid var(--brand-bright);
  border-radius:var(--radius-sm); padding:18px 20px; background:var(--mist);
  font-size:.95rem; color:var(--ink-2);
}
.note-card strong{color:var(--ink)}
.note-card p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- areas */
.region-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.region-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px;
  background:var(--paper); display:flex; flex-direction:column;
}
.region-card h3{margin-bottom:.3em}
.region-card h3 a{color:var(--ink); text-decoration:none}
.region-card h3 a:hover{color:var(--brand)}
.region-card .state{
  font-family:'Archivo',sans-serif; font-size:.7rem; font-weight:750; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.7em; display:block;
}
.region-card p{color:var(--muted); font-size:.94rem; flex:1}
.city-list{
  display:grid; gap:2px 18px; grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  list-style:none; padding:0; margin:0;
}
.city-list li{margin:0}
.city-list a{
  display:block; padding:7px 2px; font-size:.94rem; color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--line);
}
.city-list a:hover{color:var(--brand); border-color:var(--brand-bright)}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0}
.chip-row li{margin:0}
.chip-row a{
  display:inline-block; padding:7px 13px; border:1px solid var(--line); border-radius:99px;
  font-size:.88rem; color:var(--ink-2); text-decoration:none; background:var(--paper);
}
.chip-row a:hover{border-color:var(--brand); color:var(--brand); background:var(--mist)}

/* ---------------------------------------------------------------- faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:19px 40px 19px 0; position:relative; list-style:none;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:1.04rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .answer{padding:0 0 20px; color:var(--muted); max-width:74ch}
.faq .answer p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- quotes */
.quote-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.quote{
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
  background:var(--paper); display:flex; flex-direction:column;
}
.quote blockquote{margin:0 0 1.1em; font-size:1.02rem; color:var(--ink-2); line-height:1.6}
.quote cite{
  font-style:normal; font-family:'Archivo',sans-serif; font-weight:700; font-size:.9rem;
  color:var(--ink); margin-top:auto;
}
.quote .mark{
  font-family:'Archivo',sans-serif; font-size:2.4rem; font-weight:800; color:var(--line-2);
  line-height:.7; margin-bottom:.1em;
}

/* ---------------------------------------------------------------- cta */
.cta-band{
  background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:clamp(30px,4vw,46px) clamp(24px,4vw,46px);
  display:grid; grid-template-columns:1.4fr auto; gap:26px; align-items:center;
}
.cta-band h2{color:#fff; margin-bottom:.35em}
.cta-band p{color:#E0D6C6; margin-bottom:0; max-width:52ch}
.cta-band .btn-row{justify-content:flex-end}
/* The review CTA. Same shape as .cta-band but on the brand orange rather
   than ink, so the one ask that actually matters right now — he has zero
   reviews — reads as a different kind of block and does not get skimmed past
   as "another call us" band. White on --brand-deep is 7.4:1. */
.review-cta{
  background:var(--brand-deep); color:#fff; border-radius:var(--radius);
  padding:clamp(30px,4vw,46px) clamp(24px,4vw,46px);
  display:grid; grid-template-columns:1.4fr auto; gap:26px; align-items:center;
}
.review-cta h2{color:#fff; margin-bottom:.35em}
.review-cta p{color:#FCE9DC; margin-bottom:0; max-width:56ch}
.review-cta .btn-row{justify-content:flex-end}
.review-cta .btn.go{background:#fff; color:var(--brand-deep); border-color:#fff}
.review-cta .btn.go:hover{background:#FCE9DC; color:var(--brand-deep); border-color:#FCE9DC}

.cta-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--mist); padding:22px 0;
}
.cta-strip-in{display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between}
.cta-strip strong{font-family:'Archivo',sans-serif; font-size:1.08rem}

/* trust row */
.trust-row{
  display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center;
  padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.trust-row .item{display:flex; align-items:center; gap:10px; font-size:.93rem; font-weight:600; color:var(--ink-2)}
.trust-row svg{width:19px; height:19px; fill:var(--brand); flex:0 0 auto}
.trust-row img.badge{width:46px; height:auto}

/* ---------------------------------------------------------------- contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,48px); align-items:start}
.contact-list{list-style:none; padding:0; margin:0 0 1.6rem}
.contact-list li{
  display:grid; grid-template-columns:38px 1fr; gap:14px; align-items:start;
  padding:15px 0; border-bottom:1px solid var(--line); margin:0;
}
.contact-list li:first-child{border-top:1px solid var(--line)}
.contact-list .ico{
  width:38px; height:38px; border-radius:var(--radius-sm); background:var(--mist);
  display:flex; align-items:center; justify-content:center;
}
.contact-list .ico svg{width:18px; height:18px; fill:var(--brand)}
.contact-list .k{
  display:block; font-family:'Archivo',sans-serif; font-size:.74rem; font-weight:750;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px;
}
.contact-list .v{font-size:1.04rem; font-weight:600; color:var(--ink)}
.contact-list .v a{color:var(--ink); text-decoration:none}
.contact-list .v a:hover{color:var(--brand); text-decoration:underline}
.form-panel{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  padding:26px 24px; box-shadow:var(--shadow);
}
.form-panel h2{font-size:1.5rem}
/* His GoHighLevel form. The vendor snippet ships height:100%, which against
   an auto-height parent computes to roughly nothing — the form is then a
   sliver, or invisible, until form_embed.js loads and posts a height back.
   So the height is pinned here in PIXELS and the vendor's inline style is not
   used at all. The values are measured from the rendered form at the width
   this panel actually gives it, not at viewport width, plus headroom for the
   validation messages that appear under a field once someone submits. */
.lead-form{margin:0 0 1.1rem}
/* HEIGHT, not min-height. form_embed.js sets an inline style.height once it
   loads, and an inline style beats a stylesheet rule -- so these values are a
   FALLBACK that disappears the moment the script works, and overshooting one
   costs nothing. With min-height the larger value would have won instead and
   left dead space under the form on every load.
   Measured on the built page, at the width this panel actually gives the
   iframe. The curve is NOT monotonic in viewport width: above 960 the grid
   goes two-column, the iframe NARROWS from 866px to ~420px, and the form gets
   TALLER again (1352 -> 1552). One value cannot cover that. Measured heights:
     vw 360/278px wide -> 1841   vw 640/558 -> 1432   vw 1024/420 -> 1512
     vw 390/308        -> 1712   vw 900/806 -> 1352   vw 1440/494 -> 1472 */
.lead-form iframe{
  display:block; width:100%; border:0; border-radius:var(--radius-sm);
  height:1580px;
}
.form-alt{font-size:.92rem; color:var(--muted); margin:0 0 1rem}
.form-placeholder{
  border:1px dashed var(--line-2); border-radius:var(--radius-sm); background:var(--mist);
  padding:34px 22px; text-align:center; color:var(--muted); font-size:.95rem;
}
.book-embed{width:100%; min-height:760px; border:0; border-radius:var(--radius-sm)}
.lead-embed{width:100%; min-height:1253px; border:0; border-radius:var(--radius-sm); display:block}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--ink); color:#E0D6C6; padding:56px 0 0; font-size:.95rem}
.footer-grid{
  display:grid; gap:34px; grid-template-columns:1.5fr 1fr 1fr 1.2fr; padding-bottom:38px;
}
.site-footer h4{
  color:#fff; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:1.1em; font-weight:750;
}
.site-footer a{color:#E0D6C6; text-decoration:none}
.site-footer a:hover{color:#fff; text-decoration:underline}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin:.5em 0}
.footer-brand .brand{margin-bottom:1.1em}
.footer-brand .brand-logo{height:48px}
/* His tagline, in his lime — legible here because the footer ground is the
   logo's own black. */
.footer-tagline{
  color:var(--brand-bright); font-family:'Archivo',sans-serif; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; font-size:.82rem;
  margin:-.4em 0 1em;
}
.footer-brand p{color:var(--muted-light); max-width:38ch; font-size:.93rem}
.footer-contact li{display:flex; gap:10px; align-items:flex-start}
.footer-contact svg{width:16px; height:16px; fill:var(--accent-bright); flex:0 0 auto; margin-top:4px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:20px 0 26px;
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  color:var(--muted-light); font-size:.88rem;
}
.footer-bottom nav{display:flex; flex-wrap:wrap; gap:20px}

/* ---------------------------------------------------------------- sticky */
.mobile-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:100; display:none;
  background:var(--paper); border-top:1px solid var(--line);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  gap:9px; box-shadow:0 -4px 18px rgba(11,15,10,.1);
}
.mobile-sticky .btn{flex:1; padding:13px 10px; font-size:.95rem}

/* ---------------------------------------------------------------- reveal */
/* Hidden only when JS is confirmed present, so content never disappears. */
html.js .reveal{opacity:0; transform:translateY(14px)}
html.js .reveal.in{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1; transform:none}
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .brand-logo{height:34px}
  .nav > a,.nav-group > button{padding:9px 9px; font-size:.9rem}
  .header-phone,.header-text{display:none}
}
@media (max-width:960px){
  /* one column: the iframe is at its widest, so the form is at its shortest */
  .lead-form iframe{height:1460px}
  .nav{display:none}
  /* .nav carries the margin-left:auto that pushes the right-hand group to the
     edge. Hiding it takes that margin with it, which left the burger stranded
     beside the logo — so the header-cta has to claim the free space itself. */
  .header-cta{margin-left:auto}
  .burger{display:flex}
  .header-cta .btn{display:none}
  .hero-in{grid-template-columns:1fr; gap:30px}
  .hero-art{order:-1}
  .hero-badge{width:84px; right:8px; bottom:-10px}
  .split,.choice,.contact-grid{grid-template-columns:1fr}
  .split.art-first .split-art{order:0}
  .cta-band,.review-cta{grid-template-columns:1fr}
  .cta-band .btn-row{justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
  .mobile-sticky{display:flex}
  body{padding-bottom:70px}
}
@media (max-width:640px){
  .lead-form iframe{height:1620px}
  body{font-size:16px}
  .wrap{padding:0 16px}
  .header-in{padding:8px 16px}
  .brand-logo{height:32px}
  .footer-grid{grid-template-columns:1fr; gap:28px}
  .steps li{grid-template-columns:44px 1fr; gap:14px}
  .card-grid{grid-template-columns:1fr}
  .city-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .btn{width:100%}
  .btn-row .btn{width:100%}
  .cta-strip-in{flex-direction:column; align-items:flex-start}
}

/* Narrow phones: the form grows fast as the iframe gets thinner, and these are
   the widths where a clipped fallback would cut off the consent boxes and the
   submit button rather than just some padding. */
@media (max-width:420px){
  .lead-form iframe{height:1780px}
}
@media (max-width:370px){
  .lead-form iframe{height:2000px}
}