/* Foundry site stylesheet.
 *
 * Hand-authored. No compiler, no build step, no Node — which is why Engine A's
 * "a computed Tailwind arbitrary value does not exist in the bundle" trap and
 * its mandatory `build css` step do not exist here.
 *
 * ONE stylesheet serves every look. Colour and type arrive as custom
 * properties from the theme; shape arrives as data-* attributes from the style
 * pack. Six themes x six packs is thirty-six distinct sites over these bytes.
 */

/* ========================================================================
   1. base
   ======================================================================== */
*,*::before,*::after{box-sizing:border-box}
/* Review/rating stars are always a warm gold, independent of the theme accent,
   so they read as stars on every palette (the inline :root from the template
   overrides this with the theme's own value when present). */
:root{--star:#f6b100}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;font-family:var(--font-body),system-ui,sans-serif;color:var(--ink);
  background:#fff;line-height:1.65;overflow-wrap:break-word;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:2px}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.6rem 1rem;z-index:99}

/* rhythm — the vertical scale the pack chooses */
body{--pad:3.4rem;--gap:1.2rem}
body[data-rhythm=tight]{--pad:2.4rem;--gap:.9rem}
body[data-rhythm=airy]{--pad:5rem;--gap:1.8rem}

/* ========================================================================
   2. typography variants
   ======================================================================== */
h1,h2,h3{font-family:var(--font-display),Georgia,serif;line-height:1.12;margin:0 0 .5em;
  letter-spacing:-.015em;font-weight:700}
h1{font-size:clamp(2rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem)}
h3{font-size:1.1rem;letter-spacing:-.005em}
.lede{font-size:1.08rem;color:var(--muted);max-width:62ch}

body[data-headline=condensed] h1,
body[data-headline=condensed] h2{text-transform:uppercase;letter-spacing:-.02em;font-weight:900}
body[data-headline=condensed] h1{font-size:clamp(2.1rem,6vw,4rem);line-height:1.02}
body[data-headline=display] h1{font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.05;letter-spacing:-.03em}
body[data-headline=display] .lede{font-size:1.16rem}
body[data-headline=grotesk] h1,
body[data-headline=grotesk] h2{letter-spacing:-.025em;font-weight:700}
body[data-headline=serif] h1 em{font-style:italic;color:var(--brand-dark)}
body[data-headline=display] h1 em{font-style:italic}
h1 em{font-style:normal}

/* section heads + accent variants */
.section-head{position:relative;margin-bottom:.9rem}
body[data-accent=underline] .section-head{padding-bottom:.55rem}
body[data-accent=underline] .section-head::after{content:"";position:absolute;left:0;bottom:0;
  width:3.6rem;height:3px;background:var(--brand)}
body[data-accent=bar] .section-head{padding-left:.9rem;border-left:5px solid var(--brand)}
body[data-accent=highlight] .section-head span,
body[data-accent=highlight] .section-head{display:inline-block}
body[data-accent=highlight] .section-head::after{content:"";display:block;height:.55em;
  margin-top:-.5em;background:var(--accent);opacity:.35;border-radius:2px}

/* ========================================================================
   3. buttons
   ======================================================================== */
/* Buttons carry a softer, rounder corner than the cards do — calc keeps them in
   step with each pack (a sharp 0px pack still gets a gentle 8px button, a
   rounded pack gets rounder still) while always reading friendlier than the
   surrounding boxes. */
.btn{display:inline-block;padding:.72rem 1.3rem;border-radius:calc(var(--radius) + 8px);
  font-weight:700;font-size:.94rem;border:1.5px solid transparent;max-width:100%;text-align:center;
  transition:transform .14s ease,box-shadow .18s ease,filter .14s ease;cursor:pointer}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-accent{background:var(--accent);color:var(--accent-text);
  box-shadow:0 8px 22px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-accent:hover{filter:brightness(.97);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-dark)}
.btn-lg{padding:.92rem 1.65rem;font-size:1.02rem}
@media(max-width:430px){.btn-lg{padding:.85rem 1rem;font-size:.95rem;width:100%}}
.more{color:var(--brand-dark);font-weight:700;font-size:.92rem}

/* ========================================================================
   4. header
   ======================================================================== */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
  transition:box-shadow .18s ease}
.hdr.is-stuck{box-shadow:0 10px 26px -22px rgba(15,23,42,.55)}
.hdr-in{display:flex;align-items:center;gap:1rem;min-height:70px}
.mark{font-family:var(--font-display),serif;font-size:1.16rem;font-weight:800;color:var(--ink);
  min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.02em}
.nav{display:none;gap:1.4rem;align-items:center}
.nav a{color:var(--muted);font-size:.94rem;font-weight:600}
.nav a:hover{color:var(--brand-dark)}
.nav-cta{display:none}
.hdr-cta{flex-shrink:0;white-space:nowrap;display:none}
.hdr-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--brand);
  transform:scaleX(0);transform-origin:0 50%}
.burger{display:grid;gap:4px;background:none;border:0;padding:.5rem;cursor:pointer;flex-shrink:0}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.nav-open .nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
  align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:.8rem 1.25rem 1.2rem;
  gap:.2rem;box-shadow:0 22px 30px -26px rgba(15,23,42,.6)}
body.nav-open .nav a{padding:.7rem 0;border-bottom:1px solid var(--line);font-size:1rem}
body.nav-open .nav-cta{display:block;margin-top:.7rem;border-bottom:0}
@media(min-width:980px){
  .burger{display:none}
  .nav{display:flex;flex:1;justify-content:center}
  .mark{flex:0 0 auto}
  .hdr-cta{display:inline-block}
  .nav .nav-cta{display:none}
}

/* ========================================================================
   5. hero variants
   ======================================================================== */
.hero{position:relative;padding:var(--pad) 0;background:linear-gradient(180deg,var(--brand-light),#fff);
  border-bottom:1px solid var(--line);overflow:hidden}
.hero-in{display:grid;gap:2.2rem;align-items:center;position:relative;z-index:2}
.hero-in>*{min-width:0}
.hero-copy{min-width:0}
.eyebrow,.hero-h1,.lede{overflow-wrap:anywhere}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;font-weight:800;
  color:var(--brand-dark);margin:0 0 .8rem}
.hero-zip{margin:.5rem 0 0;font-size:.92rem;font-weight:600;color:var(--muted);
  letter-spacing:.01em}
.ticks{list-style:none;padding:0;margin:1.4rem 0;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.7rem;font-weight:600;min-width:0}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:.72rem;height:.42rem;
  border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg)}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 .8rem}
.micro{font-size:.84rem;color:var(--muted);margin:0}
.hero-art{position:relative;min-width:0}
.hero-art img{border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:0 26px 50px -30px rgba(15,23,42,.5)}
.hero-chip{position:absolute;right:-.4rem;bottom:-1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:.7rem 1rem;box-shadow:0 16px 30px -20px rgba(15,23,42,.5);
  display:flex;flex-direction:column;line-height:1.15;max-width:60%}
.hero-chip strong{font-family:var(--font-display),serif;font-size:1.5rem;color:var(--brand-dark)}
.hero-chip span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}

@media(min-width:960px){
  body[data-hero=split] .hero-in{grid-template-columns:1.05fr .95fr;gap:3.2rem}
  body[data-hero=stacked] .hero-in{grid-template-columns:1fr;gap:2.6rem;text-align:center;
    justify-items:center}
  body[data-hero=stacked] .ticks{justify-content:center;grid-template-columns:repeat(2,auto)}
  body[data-hero=stacked] .cta-row{justify-content:center}
  body[data-hero=stacked] .hero-art{width:min(880px,100%)}
}
body[data-hero=stacked] .lede{margin-inline:auto}
body[data-hero=banner] .hero{background:var(--brand-dark)}
body[data-hero=banner] .hero-bg{opacity:.16}
body[data-hero=banner] .hero .hero-copy{color:#fff;max-width:56rem}
body[data-hero=banner] .hero h1,body[data-hero=banner] .hero .hero-chip strong{color:#fff}
body[data-hero=banner] .hero .lede{color:rgba(255,255,255,.86)}
body[data-hero=banner] .hero .eyebrow{color:var(--accent)}
body[data-hero=banner] .hero .micro,body[data-hero=banner] .hero .hero-zip{color:rgba(255,255,255,.7)}
body[data-hero=banner] .hero .ticks li::before{border-color:#ffce85}
body[data-hero=banner] .hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
body[data-hero=overlay] .hero{background:#0d1420;padding:calc(var(--pad) * 1.3) 0}
body[data-hero=overlay] .hero-bg{opacity:.4}
body[data-hero=overlay] .hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(10,16,26,.94) 32%,rgba(10,16,26,.35))}
body[data-hero=overlay] .hero .hero-copy{color:#fff;max-width:44rem}
body[data-hero=overlay] .hero h1{color:#fff}
body[data-hero=overlay] .hero .lede{color:rgba(255,255,255,.85)}
body[data-hero=overlay] .hero .eyebrow{color:var(--accent)}
body[data-hero=overlay] .hero .micro,body[data-hero=overlay] .hero .hero-zip{color:rgba(255,255,255,.68)}
body[data-hero=overlay] .hero .ticks li::before{border-color:#ffce85}
body[data-hero=overlay] .hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

/* ========================================================================
   6. sections + cards
   ======================================================================== */
.sec{padding:var(--pad) 0}
.sec-alt{background:var(--surface)}
.page-head{padding:2.6rem 0 1.2rem;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:var(--gap)}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:700px){.grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.tile{min-width:0}
.prose{max-width:74ch}
.prose h3{margin-top:1.8rem}
.bullets{padding-left:1.15rem;margin:0 0 1em}
.bullets li{margin-bottom:.45rem;min-width:0}
.two-col{columns:1}
@media(min-width:720px){.two-col{columns:2;column-gap:2rem}}

.card{display:block;background:#fff;padding:1.35rem;color:inherit;min-width:0;
  border-radius:var(--radius);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card p{color:var(--muted);font-size:.94rem}
body[data-cards=outline] .card{border:1px solid var(--line)}
body[data-cards=outline] .card:hover{border-color:var(--brand);transform:translateY(-3px)}
body[data-cards=raised] .card{border:1px solid transparent;box-shadow:0 14px 32px -24px rgba(15,23,42,.7)}
body[data-cards=raised] .card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(15,23,42,.7)}
body[data-cards=flat] .card{background:var(--surface);border:0}
body[data-cards=flat] .card:hover{background:var(--brand-light)}
body[data-cards=edge] .card{border:1px solid var(--line);border-left:5px solid var(--brand)}
body[data-cards=edge] .card:hover{border-left-width:9px}
.card:hover{text-decoration:none}

/* band + trust */
.band{background:var(--brand-dark);color:#fff;padding:2.2rem 0}
.band h3{color:#fff;margin-bottom:.25rem;font-size:1rem}
.band p{color:rgba(255,255,255,.88);font-size:.9rem;margin:0}

/* ========================================================================
   7. new sections
   ======================================================================== */

/* logos / marquee strip */
.strip{background:var(--ink);color:#fff;padding:.85rem 0;overflow:hidden}
.strip-in{display:flex;align-items:center;gap:1.6rem;min-width:0;overflow:hidden}
.strip-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.78);
  flex-shrink:0;font-weight:700}
.strip-track{display:flex;gap:2.4rem;padding-left:.4rem;white-space:nowrap;animation:slide 42s linear infinite;min-width:0}
.strip-item{font-size:.86rem;color:rgba(255,255,255,.9);font-weight:600}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip-track{animation:none;overflow:hidden}}

/* stats */
.stats{padding:2.4rem 0;background:var(--brand-dark);color:#fff}
.stats-in{display:grid;gap:1.4rem;grid-template-columns:repeat(2,1fr);text-align:center}
.stats-in>*{min-width:0}
.stat b{overflow-wrap:anywhere}
@media(min-width:820px){.stats-in{grid-template-columns:repeat(4,1fr)}}
.stat{min-width:0}
.stat b{display:block;font-family:var(--font-display),serif;font-size:clamp(1.8rem,4vw,2.9rem);
  line-height:1;color:#fff;font-weight:800}
.stat span{display:block;margin-top:.35rem;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.09em;color:#fff}

/* badges */
.badges{padding:1.8rem 0;border-bottom:1px solid var(--line)}
.badge-row{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:640px){.badge-row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.badge-row{grid-template-columns:repeat(4,1fr)}}
.badge{display:flex;gap:.7rem;align-items:flex-start;min-width:0}
.badge .ico{flex:0 0 1.6rem;height:1.6rem;border-radius:50%;background:var(--brand-light);
  color:var(--brand-dark);display:grid;place-items:center;font-size:.85rem;font-weight:800}
.badge strong{display:block;font-size:.94rem}
.badge em{font-style:normal;font-size:.82rem;color:var(--muted)}

/* showcase rows */
.show-list{display:grid;gap:1.6rem}
.show-row{display:grid;gap:1rem;align-items:start;padding-top:1.6rem;border-top:1px solid var(--line);
  min-width:0}
.show-row>*{min-width:0}
.show-row:first-child{border-top:0;padding-top:0}
@media(min-width:760px){.show-row{grid-template-columns:6rem 1fr;gap:2rem}}
.show-num{font-family:var(--font-display),serif;font-size:2.6rem;line-height:1;color:var(--brand);
  opacity:.35;font-weight:800}
.show-copy{min-width:0}
.show-copy h3{font-size:1.35rem}
.show-copy p{color:var(--muted);max-width:60ch}

/* tabs */
.tab-strip{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1.2rem;
  scrollbar-width:thin}
.tab{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.45rem 1rem;font:inherit;font-size:.88rem;font-weight:650;cursor:pointer;color:var(--muted)}
.tab[aria-selected=true]{background:var(--brand);border-color:var(--brand);color:#fff}
/* Two-column panel: the pitch + CTA on the left, a check-list of benefits on
   the right, so the card is filled and balanced instead of a sparse box. */
.tab-panel{background:#fff;border:1px solid var(--line);border-radius:calc(var(--radius) + 12px);
  padding:clamp(1.5rem,3.5vw,2.5rem);gap:1.8rem;grid-template-columns:1fr;align-items:start;
  box-shadow:0 18px 44px -34px rgba(8,20,55,.42)}
/* Only the visible panel becomes a grid — a plain display:grid would override
   the [hidden] attribute and show every service panel stacked at once. */
.tab-panel:not([hidden]){display:grid}
.tab-panel[hidden]{display:none}
@media(min-width:820px){.tab-panel:not([hidden]){grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,4vw,3.2rem)}}
.tab-panel h3{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:0 0 .5rem;line-height:1.2}
.tp-sum{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0 0 1.5rem;max-width:42ch}
.tp-main .btn{margin-top:.2rem}
.tp-points{list-style:none;margin:0;padding:0;display:grid;gap:.95rem;align-content:start}
@media(min-width:560px){.tp-points{grid-template-columns:1fr 1fr;gap:1.05rem 1.8rem}}
.tp-points li{display:flex;gap:.7rem;align-items:flex-start;font-weight:650;color:var(--ink);
  font-size:.97rem;line-height:1.4;min-width:0}
.tp-check{flex:none;width:1.55rem;height:1.55rem;border-radius:50%;margin-top:.02rem;
  display:inline-flex;align-items:center;justify-content:center;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 13%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent)}

/* timeline */
.tl{list-style:none;padding:0;margin:0;position:relative}
.tl::before{content:"";position:absolute;left:1.05rem;top:.6rem;bottom:.6rem;width:2px;
  background:var(--line)}
.tl-item{position:relative;display:flex;gap:1rem;padding-bottom:1.5rem;min-width:0}
.tl-dot{flex:0 0 2.2rem;height:2.2rem;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.92rem;position:relative;z-index:1;
  box-shadow:0 0 0 5px #fff}
.sec-alt .tl-dot{box-shadow:0 0 0 5px var(--surface)}
.tl-body{min-width:0;padding-top:.15rem}
.tl-body h3{margin-bottom:.15rem}
.tl-body p{color:var(--muted);margin:0;font-size:.95rem}

/* signs */
.signs{display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:1.4rem}
@media(min-width:700px){.signs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.signs{grid-template-columns:repeat(3,1fr)}}
.sign{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;
  min-width:0;border-top:4px solid var(--accent)}
.sign h3{font-size:1.02rem}
.sign p{color:var(--muted);font-size:.92rem;margin:0}

/* comparison */
.cmp{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  margin-top:1.4rem}
.cmp-head,.cmp-row{display:grid;grid-template-columns:1fr;gap:.2rem;padding:.9rem 1.1rem;min-width:0}
.cmp-head>*,.cmp-row>*{min-width:0}
.cmp-head{background:var(--ink);color:#fff;font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.07em;display:none}
.cmp-row{border-top:1px solid var(--line)}
.cmp-row:first-of-type{border-top:0}
.cmp-f{font-weight:750;color:var(--ink)}
.cmp-row span:not(.cmp-f){color:var(--muted);font-size:.93rem}
.cmp-row span[data-l]::before{content:attr(data-l) " · ";font-weight:800;color:var(--ink);
  font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}
@media(min-width:820px){
  .cmp-head,.cmp-row{grid-template-columns:1.1fr 1.4fr 1.4fr;gap:1.4rem;align-items:start}
  .cmp-head{display:grid}
  .cmp-row span[data-l]::before{content:none}
}

/* costs */
.cost-grid{display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:1.4rem}
@media(min-width:700px){.cost-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cost-grid{grid-template-columns:repeat(3,1fr)}}
.cost{min-width:0;padding-left:1rem;border-left:3px solid var(--brand-light)}
.cost-n{font-family:var(--font-display),serif;font-size:.86rem;color:var(--brand);font-weight:800;
  letter-spacing:.08em}
.cost h3{margin:.2rem 0 .3rem;font-size:1.02rem}
.cost p{color:var(--muted);font-size:.92rem;margin:0}

/* coverage columns */
.cov{display:grid;gap:1.6rem;grid-template-columns:1fr;margin-top:1.2rem}
@media(min-width:640px){.cov{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cov{grid-template-columns:repeat(3,1fr)}}
.cov-col{min-width:0}
.cov-col h3{font-size:1rem;padding-bottom:.45rem;border-bottom:2px solid var(--brand-light)}
.cov-col ul{list-style:none;padding:0;margin:.6rem 0 .4rem;display:grid;gap:.22rem}
.cov-col li a{font-size:.9rem;color:var(--muted)}
.cov-col li a:hover{color:var(--brand-dark)}

/* alert bar */
.alert{background:var(--accent);color:var(--accent-text)}
.alert-in{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.55rem 0;font-size:.9rem}
.alert-in>*{min-width:0}
.alert p{margin:0;font-weight:600;min-width:0}
.alert a{color:inherit;font-weight:800;text-decoration:underline}
.alert-dot{width:.55rem;height:.55rem;border-radius:50%;background:currentColor;flex-shrink:0;
  animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* quote band */
.qband{background:var(--ink);color:#fff;padding:var(--pad) 0}
.qband h2{color:#fff}
.qband p{color:rgba(255,255,255,.88)}
.qband-in{display:grid;gap:2rem}
.qband-in>*{min-width:0}
@media(min-width:900px){.qband-in{grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}}
.qband-phone a{font-family:var(--font-display),serif;font-size:clamp(1.5rem,3.6vw,2.2rem);color:#fff;
  font-weight:800}
.qform{background:#fff;border-radius:var(--radius);padding:1.4rem;display:grid;gap:.75rem;min-width:0}
.qform-row{display:grid;gap:.75rem}
@media(min-width:520px){.qform-row{grid-template-columns:1fr 1fr}}
.qform label{display:grid;gap:.28rem;font-size:.85rem;font-weight:700;color:var(--ink);min-width:0}
.qform input,.qform textarea{font:inherit;padding:.62rem .7rem;border:1px solid var(--line);
  border-radius:calc(var(--radius) * .6);background:#fff;width:100%;font-weight:400}
.qform textarea{resize:vertical}

/* carousel */
.carousel{margin-top:1.2rem}
.car-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.6rem;scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 min(30rem,86%);scroll-snap-align:start;margin:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;min-width:0}
.car-slide blockquote{margin:0 0 .9rem;font-size:1.02rem;line-height:1.6}
.car-slide figcaption{font-size:.86rem;color:var(--muted);font-weight:700}
.car-nav{display:flex;align-items:center;gap:.7rem;margin-top:.9rem}
.car-btn{background:#fff;border:1px solid var(--line);border-radius:50%;width:2.3rem;height:2.3rem;
  cursor:pointer;font-size:1rem;color:var(--ink);flex-shrink:0}
.car-btn:hover{border-color:var(--brand);color:var(--brand-dark)}
.car-dots{display:flex;gap:.35rem;flex:1;flex-wrap:wrap}
.car-dot{width:.5rem;height:.5rem;padding:0;border:0;border-radius:50%;background:var(--line);
  cursor:pointer}
.car-dot.on{background:var(--brand);width:1.4rem;border-radius:99px}

/* sticky call bar */
.sticky-call{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:.5rem;
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -12px 26px -22px rgba(15,23,42,.7)}
.sticky-call[hidden]{display:none}
.sc-call{flex:1;background:var(--accent);color:var(--accent-text);text-align:center;
  padding:.75rem .8rem;border-radius:var(--radius);font-weight:800;min-width:0}
.sc-alt{flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius);padding:.75rem 1rem;
  color:var(--ink);font-weight:700}
@media(min-width:900px){.sticky-call{display:none!important}}

/* ========================================================================
   8. existing components
   ======================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 1.6rem}
.chip{border:1px solid var(--line);border-radius:999px;padding:.34rem .85rem;font-size:.87rem;
  background:#fff;color:var(--ink);max-width:100%}
.chip:hover{border-color:var(--brand);color:var(--brand-dark);text-decoration:none}
.county{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:1.4rem}
.county:first-child{border-top:0;margin-top:0;padding-top:0}
.county h2{font-size:1.2rem}
.factbar{display:grid;gap:.9rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem;margin:1.6rem 0}
@media(min-width:720px){.factbar{grid-template-columns:repeat(2,1fr)}}
.factbar span{display:block;font-size:.73rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:800}
.factbar strong{font-weight:650;min-width:0}
.quote{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem}
.quote blockquote{margin:0 0 .8rem;font-size:.97rem}
.quote figcaption{font-size:.85rem;color:var(--muted);font-weight:700}
.faq details{border-bottom:1px solid var(--line);padding:1rem 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;
  gap:1rem;min-width:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-weight:800;flex:0 0 auto;font-size:1.2rem;
  line-height:1;transition:transform .18s ease}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.75rem 0 0;color:var(--muted)}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1.2rem}
@media(min-width:820px){.steps{grid-template-columns:repeat(2,1fr);gap:1.7rem}}
.steps li{display:flex;gap:.9rem;min-width:0}
.num{flex:0 0 2.2rem;height:2.2rem;border-radius:50%;background:var(--brand);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:.95rem}
.steps h3{margin-bottom:.2rem}
.steps p{color:var(--muted);margin:0;font-size:.94rem}
.contact-grid{display:grid;gap:2rem}
@media(min-width:880px){.contact-grid{grid-template-columns:1fr 1fr;gap:3.2rem}}
.big-phone{font-family:var(--font-display),serif;font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800}
.form{display:grid;gap:.85rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem;min-width:0}
.form label{display:grid;gap:.3rem;font-size:.87rem;font-weight:700}
.form input,.form textarea{font:inherit;padding:.62rem .7rem;border:1px solid var(--line);
  border-radius:calc(var(--radius) * .6);background:#fff;width:100%;font-weight:400}
.cta{background:var(--brand-dark);color:#fff;padding:2.6rem 0}
.cta h2{color:#fff;margin-bottom:.3rem}
.cta p{color:rgba(255,255,255,.9);margin:0}
.cta-in{display:flex;flex-wrap:wrap;gap:1.3rem;align-items:center;justify-content:space-between}
.ftr{background:#0e1520;color:rgba(255,255,255,.72);padding:0 0 1.8rem}
.ftr a{color:#fff}
.ftr .mark{color:#fff;font-size:1.1rem;margin-bottom:.35rem;display:block}
.ftr-in{display:grid;gap:1.8rem}
@media(min-width:820px){.ftr-in{grid-template-columns:1fr 1.2fr}}
.ftr-nav{display:flex;flex-wrap:wrap;gap:.55rem 1.3rem;align-content:start;font-size:.9rem}
.ftr-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:1.8rem;padding-top:1.3rem;
  font-size:.83rem}
.ftr .micro,.ftr p{color:rgba(255,255,255,.78)}
body:has(.sticky-call:not([hidden])) .ftr{padding-bottom:5rem}

/* ========================================================================
   9. reveal
   ======================================================================== */
.reveal,.show-row,.sign,.cost,.tl-item,.cov-col{opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s ease}
.reveal.in,.show-row.in,.sign.in,.cost.in,.tl-item.in,.cov-col.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.show-row,.sign,.cost,.tl-item,.cov-col{opacity:1;transform:none}}
.show-row:nth-child(2){transition-delay:.05s}
.show-row:nth-child(3){transition-delay:.1s}
.sign:nth-child(2),.cost:nth-child(2){transition-delay:.05s}
.sign:nth-child(3),.cost:nth-child(3){transition-delay:.1s}

.dimcount{font-size:.7rem;color:var(--muted);font-weight:600;vertical-align:middle;
  background:var(--surface);border-radius:99px;padding:.1rem .5rem;margin-left:.4rem}
.more-chip{border-style:dashed;color:var(--brand-dark);font-weight:700}

.zips .zip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  letter-spacing:.02em;background:#fff}
.zips .zip.more{font-family:inherit;letter-spacing:0;color:var(--muted);border-style:dashed}

/* image pool sections */
.show-row.has-art{grid-template-columns:1fr}
@media(min-width:760px){.show-row.has-art{grid-template-columns:16rem 1fr;gap:2rem}}
.show-pic img{width:100%;border-radius:var(--radius);border:1px solid var(--line);
  aspect-ratio:4/3;object-fit:cover}
.gal{display:grid;gap:var(--gap);grid-template-columns:repeat(2,1fr)}
@media(min-width:840px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal-item{margin:0;min-width:0}
.gal-item img{width:100%;border-radius:var(--radius);border:1px solid var(--line);
  aspect-ratio:4/3;object-fit:cover;transition:transform .3s ease}
.gal-item:hover img{transform:scale(1.02)}
.about-split{display:grid;gap:2rem}
@media(min-width:900px){.about-split{grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}}
.about-split>*{min-width:0}
.about-pic img{width:100%;border-radius:var(--radius);border:1px solid var(--line);
  aspect-ratio:4/3;object-fit:cover}
.qband{position:relative;overflow:hidden}
.qband-bg{position:absolute;inset:0;z-index:0}
.qband-bg img{width:100%;height:100%;object-fit:cover;opacity:.18}
.qband-in{position:relative;z-index:1}

/* ========================================================================
   10. new style-pack variants
   ======================================================================== */

/* -- hero: minimal ------------------------------------------------------- */
body[data-hero=minimal] .hero{background:#fff;padding:calc(var(--pad) * .85) 0}
body[data-hero=minimal] .hero-art{display:none}
body[data-hero=minimal] .hero-in{grid-template-columns:1fr;max-width:52rem}
body[data-hero=minimal] .hero-h1{max-width:20ch}

/* -- hero: slab ---------------------------------------------------------- */
body[data-hero=slab] .hero{background:var(--ink);border-bottom:0;padding:calc(var(--pad) * 1.1) 0}
body[data-hero=slab] .hero .hero-copy{color:#fff}
body[data-hero=slab] .hero h1{color:#fff}
body[data-hero=slab] .hero .lede{color:rgba(255,255,255,.86)}
body[data-hero=slab] .hero .eyebrow{color:var(--accent)}
body[data-hero=slab] .hero .micro,body[data-hero=slab] .hero .hero-zip{color:rgba(255,255,255,.7)}
body[data-hero=slab] .hero .ticks li::before{border-color:#ffce85}
body[data-hero=slab] .hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
body[data-hero=slab] .hero-art img{border-color:rgba(255,255,255,.18)}
body[data-hero=slab] .hero-chip{background:var(--brand);border-color:transparent}
body[data-hero=slab] .hero-chip strong,body[data-hero=slab] .hero-chip span{color:#fff}

/* -- hero: card ---------------------------------------------------------- */
body[data-hero=card] .hero{background:var(--surface);padding:calc(var(--pad) * .7) 0}
body[data-hero=card] .hero-in{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,4vw,3rem);box-shadow:0 30px 60px -40px rgba(15,23,42,.45)}
@media(min-width:960px){body[data-hero=card] .hero-in{grid-template-columns:1.05fr .95fr;gap:2.6rem}}

/* -- hero: frame --------------------------------------------------------- */
body[data-hero=frame] .hero{background:var(--brand-light);padding:calc(var(--pad) * .8) 0}
body[data-hero=frame] .hero-in{border:3px solid var(--ink);padding:clamp(1.4rem,4vw,2.6rem);
  background:#fff}
@media(min-width:960px){body[data-hero=frame] .hero-in{grid-template-columns:1.1fr .9fr;gap:2.6rem}}
body[data-hero=frame] .hero-art img{border-radius:0;border:2px solid var(--ink);box-shadow:none}
body[data-hero=frame] .hero-chip{border:2px solid var(--ink);box-shadow:none;border-radius:0}

/* -- cards: line --------------------------------------------------------- */
body[data-cards=line] .card{border:0;border-top:2px solid var(--ink);border-radius:0;
  padding:1.1rem 0 1.3rem;background:transparent}
body[data-cards=line] .card:hover{border-top-color:var(--brand);transform:none;background:transparent}
body[data-cards=line] .card .more{text-decoration:underline}

/* -- cards: tint --------------------------------------------------------- */
body[data-cards=tint] .card{background:var(--brand-light);border:0}
body[data-cards=tint] .card:hover{background:var(--surface);transform:translateY(-3px)}

/* -- cards: soft --------------------------------------------------------- */
body[data-cards=soft] .card{border:0;background:#fff;
  box-shadow:0 2px 4px -2px rgba(15,23,42,.1),0 20px 40px -28px rgba(15,23,42,.55)}
body[data-cards=soft] .card:hover{transform:translateY(-4px);
  box-shadow:0 4px 8px -2px rgba(15,23,42,.12),0 30px 56px -30px rgba(15,23,42,.6)}

/* -- cards: plate -------------------------------------------------------- */
body[data-cards=plate] .card{border:2px solid var(--ink);border-radius:0;background:#fff;
  box-shadow:6px 6px 0 0 var(--brand-light)}
body[data-cards=plate] .card:hover{transform:translate(-2px,-2px);
  box-shadow:9px 9px 0 0 var(--brand-light)}

/* -- headline: mono ------------------------------------------------------ */
body[data-headline=mono] h1,body[data-headline=mono] h2,body[data-headline=mono] h3{
  letter-spacing:-.03em;font-weight:600}
body[data-headline=mono] h1{font-size:clamp(1.7rem,4.4vw,2.9rem)}
body[data-headline=mono] .eyebrow{font-family:var(--font-display),monospace;letter-spacing:.04em}

/* -- headline: slab ------------------------------------------------------ */
body[data-headline=slab] h1,body[data-headline=slab] h2{letter-spacing:-.01em;font-weight:700}
body[data-headline=slab] h1{font-size:clamp(2rem,5vw,3.2rem)}

/* -- headline: light ----------------------------------------------------- */
body[data-headline=light] h1,body[data-headline=light] h2{font-weight:500;letter-spacing:-.02em}
body[data-headline=light] h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.16}
body[data-headline=light] h1 em{font-style:italic;color:var(--brand-dark)}
body[data-headline=light] .lede{font-size:1.14rem}

/* -- headline: wide ------------------------------------------------------ */
body[data-headline=wide] h1,body[data-headline=wide] h2{letter-spacing:.01em;font-weight:700}
body[data-headline=wide] .eyebrow{letter-spacing:.2em}
body[data-headline=wide] h1{font-size:clamp(1.9rem,5vw,3.2rem)}

/* -- accent: dot --------------------------------------------------------- */
body[data-accent=dot] .section-head{padding-left:1.1rem}
body[data-accent=dot] .section-head::before{content:"";position:absolute;left:0;top:.55em;
  width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)}

/* -- accent: slash ------------------------------------------------------- */
body[data-accent=slash] .section-head::before{content:"// ";color:var(--brand);
  font-family:var(--font-display),monospace;opacity:.7}

/* -- accent: box --------------------------------------------------------- */
body[data-accent=box] .section-head{display:inline-block;border:2px solid var(--ink);
  padding:.25rem .7rem;font-size:clamp(1.1rem,2.4vw,1.6rem)}

/* ========================================================================
   11. skeleton shells
   ======================================================================== */
body[data-shell=reading] .wrap{width:min(980px,100% - 2.5rem)}
body[data-shell=reading] .prose{max-width:68ch;font-size:1.04rem}
body[data-shell=reading] .sec{padding:calc(var(--pad) * 1.15) 0}
body[data-shell=directory] .sec{padding:calc(var(--pad) * .8) 0}
body[data-shell=directory] .lede{max-width:70ch}

/* ========================================================================
   12. directory components
   ======================================================================== */
.hero-compact{padding:calc(var(--pad) * .7) 0}
.hero-compact .hero-h1{max-width:22ch}
.hero-compact .lede{max-width:64ch}

.dir-search{background:var(--brand-dark);padding:1.3rem 0}
.dir-field{display:block;max-width:34rem}
.dir-field span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.82);font-weight:800;margin-bottom:.35rem}
.dir-field input{width:100%;font:inherit;font-size:1rem;padding:.72rem .9rem;border:0;
  border-radius:var(--radius);background:#fff;color:var(--ink)}
.dir-search .micro{color:rgba(255,255,255,.78);margin:.55rem 0 0}

.matrix-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff}
.matrix{border-collapse:collapse;width:100%;font-size:.88rem;min-width:38rem}
.matrix th,.matrix td{border-bottom:1px solid var(--line);padding:.55rem .7rem;text-align:left}
.matrix thead th{background:var(--surface);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);position:sticky;top:0}
.matrix tbody th{font-weight:650;white-space:nowrap}
.matrix td{text-align:center}
.matrix td a{display:block;color:var(--brand);font-weight:800;border-radius:4px;padding:.1rem 0}
.matrix td a:hover{background:var(--brand-light);text-decoration:none}

.dir-index{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:640px){.dir-index{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.dir-index{grid-template-columns:repeat(4,1fr)}}
.dir-col{min-width:0}
.dir-col h3{font-size:.94rem;padding-bottom:.4rem;border-bottom:2px solid var(--brand-light)}
.dir-col ul{list-style:none;padding:0;margin:.55rem 0 .3rem;display:grid;gap:.18rem}
.dir-col li a{font-size:.88rem;color:var(--muted)}
.dir-col li a:hover{color:var(--brand-dark)}
.dir-empty{margin-top:1rem;color:var(--muted)}

.dir-tiles{display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:1.2rem}
@media(min-width:700px){.dir-tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.dir-tiles{grid-template-columns:repeat(3,1fr)}}
.dir-tile{display:flex;flex-direction:column;gap:.35rem;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;color:inherit}
.dir-tile:hover{border-color:var(--brand);text-decoration:none}
.dir-tile strong{font-size:1.02rem}
.dir-tile span{color:var(--muted);font-size:.9rem}
.dir-tile em{font-style:normal;color:var(--brand-dark);font-weight:700;font-size:.86rem;
  margin-top:auto;padding-top:.4rem}

/* AEO answer-first block — quotable summary directly under the hero */
.answer{background:var(--surface);border-bottom:1px solid var(--line)}
.answer .wrap{padding:1.1rem 0}
.answer-lead{margin:0;font-size:1.12rem;line-height:1.6;font-weight:500;color:var(--ink);max-width:60ch}
@media (min-width:768px){.answer-lead{font-size:1.2rem}}

/* ========================================================================
   13. SLATE REVAMP LAYER  (premium baseline — appended so it wins)
   Colour still comes from the theme vars; this upgrades the treatment.
   ======================================================================== */
:root{--deep:color-mix(in srgb,var(--brand-dark) 74%,#000)}

/* --- premium hero: split / stacked become a blue-gradient hero + card --- */
body[data-hero=split] .hero,
body[data-hero=stacked] .hero{
  background:radial-gradient(125% 135% at 88% -15%,
    color-mix(in srgb,var(--brand) 80%,#fff) 0%, var(--brand) 34%,
    var(--brand-dark) 72%, var(--deep) 100%);
  border-bottom:0;overflow:hidden;color:#fff}
body[data-hero=split] .hero::before,
body[data-hero=stacked] .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 55% at 92% 12%, color-mix(in srgb,var(--accent) 32%,transparent), transparent 70%)}
body[data-hero=split] .hero .hero-in,
body[data-hero=stacked] .hero .hero-in{position:relative;z-index:2}
body[data-hero=split] .hero h1,body[data-hero=stacked] .hero h1{color:#fff}
body[data-hero=split] .hero h1 em,body[data-hero=stacked] .hero h1 em{color:#ffce85;font-style:normal}
body[data-hero=split] .hero .lede,body[data-hero=stacked] .hero .lede{color:rgba(255,255,255,.9)}
body[data-hero=split] .hero .micro,body[data-hero=split] .hero .hero-zip,
body[data-hero=stacked] .hero .micro,body[data-hero=stacked] .hero .hero-zip{color:rgba(255,255,255,.72)}
body[data-hero=split] .hero .eyebrow,body[data-hero=stacked] .hero .eyebrow{
  color:var(--accent);display:inline-flex;align-items:center;gap:.55rem}
body[data-hero=split] .hero .eyebrow::before,body[data-hero=stacked] .hero .eyebrow::before{
  content:"";width:24px;height:2px;background:var(--accent);border-radius:2px}
body[data-hero=split] .hero .ticks,body[data-hero=stacked] .hero .ticks{
  grid-template-columns:1fr 1fr;gap:.6rem 1.4rem;margin:1.6rem 0}
@media(max-width:560px){body[data-hero=split] .hero .ticks{grid-template-columns:1fr}}
body[data-hero=split] .hero .ticks li,body[data-hero=stacked] .hero .ticks li{color:#eaf1ff}
body[data-hero=split] .hero .ticks li::before,body[data-hero=stacked] .hero .ticks li::before{border-color:#ffce85}
body[data-hero=split] .hero .btn-ghost,body[data-hero=stacked] .hero .btn-ghost{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff}
body[data-hero=split] .hero .btn-ghost:hover,body[data-hero=stacked] .hero .btn-ghost:hover{
  background:rgba(255,255,255,.16);color:#fff}

/* hero trust card */
.hero-card{background:#fff;color:var(--ink);border-radius:18px;padding:1.6rem;
  box-shadow:0 34px 70px -30px rgba(8,20,55,.55)}
.hero-card .hc-rate{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);font-weight:600;margin:0}
.hc-stars{color:var(--star);letter-spacing:2px}
.hero-card .hc-h{font-size:1.3rem;margin:.55rem 0 .2rem;color:var(--ink)}
.hero-card .hc-sub{font-size:.92rem;color:var(--muted);margin:0 0 1rem}
.hc-proof{list-style:none;padding:0;margin:0 0 1.1rem;display:grid;gap:.6rem}
.hc-proof li{position:relative;padding-left:1.7rem;font-size:.93rem;font-weight:500;color:var(--ink)}
.hc-proof li::before{content:"";position:absolute;left:.2rem;top:.42em;width:.6rem;height:.34rem;
  border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg)}
.hero-card .btn-accent{width:100%}
.hc-assure{margin:.85rem 0 0;font-size:.8rem;color:var(--muted);text-align:center}

/* hero map embed (local pages) */
.mapembed{border-radius:16px;overflow:hidden;border:4px solid rgba(255,255,255,.22);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.45);line-height:0;background:#dbe7ff}
.mapembed iframe{width:100%;height:340px;border:0;display:block}
.maptag{margin:.6rem 0 0;font-size:.82rem;color:rgba(255,255,255,.75)}

/* --- plain section headings (those WITHOUT a style-pack .section-head accent)
   get one small brand bar, so every heading is marked exactly once. Headings
   that carry .section-head already get the pack's own accent (underline / bar /
   dot …), so they are deliberately excluded here to avoid a doubled mark. --- */
.sec .wrap>h2:not(.section-head){position:relative;padding-top:1rem}
.sec .wrap>h2:not(.section-head)::before{content:"";position:absolute;top:0;left:0;
  width:2.4rem;height:3px;border-radius:3px;background:var(--brand)}

/* --- stat band as a floating white card --- */
.stats{background:var(--surface);color:inherit;padding:2.4rem 0}
.stats-in{background:#fff;border:1px solid var(--line);border-radius:16px;gap:0;
  box-shadow:0 24px 50px -34px rgba(8,20,55,.4);overflow:hidden}
.stats .stat{padding:1.5rem 1rem;border-right:1px solid var(--line)}
.stats .stat:last-child{border-right:0}
.stats .stat b{color:var(--brand);font-size:clamp(1.7rem,3.6vw,2.2rem)}
.stats .stat span{color:var(--muted)}
@media(max-width:819px){.stats .stat:nth-child(2){border-right:0}
  .stats .stat:nth-child(1),.stats .stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* --- CTA / quote bands go blue gradient --- */
.cta,.qband{background:radial-gradient(125% 145% at 90% 0%,
  color-mix(in srgb,var(--brand) 80%,#fff), var(--brand) 42%, var(--brand-dark) 82%, var(--deep))}

/* --- fuller footer columns --- */
.ftr-grid{display:grid;gap:1.8rem;grid-template-columns:1fr;padding-top:2.6rem}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem}}
.ftr-brand .mark{font-size:1.24rem}
.ftr-blurb{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.7);margin:.5rem 0 .8rem;max-width:34ch}
.ftr-phone a{color:#fff;font-weight:700;font-family:var(--font-display),serif}
.ftr-col h3{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;margin:0 0 .85rem}
.ftr-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;font-size:.9rem}
.ftr-col a{color:rgba(255,255,255,.76)}.ftr-col a:hover{color:#fff}
.ftr-more{color:var(--star)!important;font-weight:700}
.ftr-more:hover{filter:brightness(1.1)}

/* --- newsletter band at the top of the footer --- */
.ftr-news{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.1)}
.ftr-news-in{display:grid;gap:1.4rem 3rem;align-items:center;padding:2.1rem 0}
@media(min-width:820px){.ftr-news-in{grid-template-columns:1.1fr .9fr}}
.ftr-news-copy h3{color:#fff;font-size:1.16rem;margin:0 0 .3rem;font-family:var(--font-display),serif}
.ftr-news-copy p{color:rgba(255,255,255,.68);font-size:.9rem;line-height:1.6;margin:0;max-width:46ch}
.ftr-news-form{display:flex;gap:.6rem;flex-wrap:wrap}
.ftr-news-form input{flex:1 1 12rem;min-width:0;font:inherit;font-size:.94rem;padding:.7rem .9rem;
  border-radius:calc(var(--radius) + 8px);border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:#fff}
.ftr-news-form input::placeholder{color:rgba(255,255,255,.5)}
.ftr-news-form input:focus{outline:2px solid var(--accent);outline-offset:1px;background:rgba(255,255,255,.1)}
.ftr-news-form .btn{flex:0 0 auto}

/* --- social icon row --- */
.ftr-social{display:flex;gap:.6rem;margin-top:1.15rem}
.ftr-social a{display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;
  border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);
  transition:background .15s ease,color .15s ease,transform .15s ease}
.ftr-social a:hover{background:var(--accent);color:var(--accent-text);transform:translateY(-2px)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- service icon cards (What we do) --- */
.svc-grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:640px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc-card{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.6rem;
  color:inherit;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -34px rgba(8,20,55,.45);
  border-color:color-mix(in srgb,var(--brand) 35%,var(--line));text-decoration:none}
.svc-card .svg-ic{width:38px;height:38px;display:block;margin-bottom:1rem}
.svc-card h3{font-size:1.16rem;margin-bottom:.4rem}
.svc-card p{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.svc-card .more{color:var(--brand);display:inline-flex;gap:.3rem;align-items:center}
.svc-card:hover .more{gap:.55rem}
.io-b{stroke:var(--brand);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.io-a{stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ========================================================================
   14. anti-empty: content always visible + width-filling layouts
   ======================================================================== */
/* Reveal is now a no-op for visibility — content is ALWAYS shown, so a page
   never looks empty without JS, and crawlers always see the copy. (The fade
   was a nice-to-have that caused blank-looking sections.) */
.reveal,.show-row,.sign,.cost,.tl-item,.cov-col{opacity:1!important;transform:none!important}

/* Timeline becomes a filling grid of step cards instead of one narrow column */
.tl{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.3rem}
.tl::before{display:none}
.tl-item{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.4rem;gap:0}
.tl-dot{box-shadow:none;margin-bottom:.8rem}
.tl-body{padding-top:0}
@media(min-width:640px){.tl{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tl{grid-template-columns:repeat(4,1fr)}}

/* Prose sections read better centered than left-aligned with a big empty side */
.sec .wrap>.prose{margin-inline:auto}

/* ========================================================================
   15. premium page header (about / contact / services / areas) + contact cards
   ======================================================================== */
.page-head{position:relative;overflow:hidden;border-bottom:0;color:#fff;padding:3rem 0 3.3rem;
  background:radial-gradient(125% 140% at 88% -20%,
    color-mix(in srgb,var(--brand) 80%,#fff), var(--brand) 34%, var(--brand-dark) 72%, var(--deep))}
.page-head::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 60% at 92% 10%, color-mix(in srgb,var(--accent) 28%,transparent), transparent 70%)}
.page-head .wrap{position:relative}
.page-head h1{color:#fff}
.page-head .lede{color:rgba(255,255,255,.9);max-width:46rem}
.page-head .ph-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.page-head .btn-ghost-light{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.5);color:#fff}
.page-head .btn-ghost-light:hover{background:rgba(255,255,255,.16);color:#fff}

/* contact detail cards + light map */
.form-sub{color:var(--muted);font-size:.92rem;margin:-.3rem 0 1rem}
.form .opt{color:var(--muted);font-weight:400}
.cdetails{display:grid;gap:1rem;align-content:start}
.crow{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:1.05rem}
.crow .ci{flex:none;width:40px;height:40px;border-radius:11px;background:var(--surface);display:grid;place-items:center}
.crow .ci svg{width:20px;height:20px}
.crow b{display:block;font-family:var(--font-display),serif;font-size:.98rem}
.crow b a{color:inherit}
.crow span{font-size:.9rem;color:var(--muted)}
.mapembed.light{border:1px solid var(--line);box-shadow:0 20px 40px -30px rgba(8,20,55,.4)}
.mapembed.light iframe{height:240px}

/* 16. Intro split — business story + trust checklist on the left, photo and a
   call card on the right. Sits right after the hero on the home page. */
.intro-split{padding-top:clamp(2.2rem,5vw,3.6rem)}
.isplit{display:grid;gap:2rem}
.isplit>*{min-width:0}
@media(min-width:900px){.isplit{grid-template-columns:1.06fr .94fr;gap:clamp(2.2rem,4vw,3.4rem);align-items:start}}
.isplit-copy h2{margin:.15rem 0 1rem;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.12}
.isplit-copy .prose{max-width:none;margin:0}
.isplit-copy .prose p{color:var(--muted);margin:0 0 1rem}

.tick-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.15rem}
.tick{display:flex;gap:.85rem;align-items:flex-start}
.tick-b{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;margin-top:.1rem;
  box-shadow:0 6px 14px -6px color-mix(in srgb,var(--brand) 60%,transparent)}
.tick-t b{display:block;font-family:var(--font-display),serif;font-size:1.02rem;color:var(--ink);line-height:1.25}
.tick-t span{display:block;color:var(--muted);font-size:.93rem;margin-top:.15rem;line-height:1.5}

.isplit-side{display:flex;flex-direction:column;gap:1.4rem}
/* On desktop the side follows the eye as the (often longer) story scrolls, so
   the call card never leaves a dead void beneath it when there is no photo. */
@media(min-width:900px){.isplit-side{position:sticky;top:88px;align-self:start}}
.isplit-rate{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.9);
  font-size:.82rem;font-weight:700;margin:0 0 .9rem}
.isplit-stars{color:var(--star);letter-spacing:1px;font-size:.95rem}
.isplit-note{color:rgba(255,255,255,.85);font-size:.92rem;line-height:1.6;margin:0 0 1.2rem}
.isplit-pic img{width:100%;height:auto;object-fit:cover;border-radius:calc(var(--radius) + 10px);
  border:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(8,20,55,.5)}
.isplit-cta{background:linear-gradient(150deg,var(--brand),var(--brand-dark));color:#fff;
  border-radius:calc(var(--radius) + 10px);padding:clamp(1.4rem,2.5vw,2rem);
  box-shadow:0 26px 50px -30px color-mix(in srgb,var(--brand) 70%,transparent)}
.isplit-cta h3{color:#fff;margin:0 0 .9rem;font-size:1.3rem}
.isplit-phone{display:inline-flex;align-items:center;gap:.55rem;color:#fff;font-family:var(--font-display),serif;
  font-size:clamp(1.35rem,3vw,1.7rem);font-weight:700;text-decoration:none;margin-bottom:1.1rem}
.isplit-phone:hover{text-decoration:none;opacity:.92}
.isplit-phone svg{opacity:.85}
.btn-light{background:#fff;color:var(--brand-dark);border-color:#fff}
.btn-light:hover{background:#fff;filter:brightness(.97);box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}

/* 17. Professional pass — process/step cards and the reviews carousel.
   Fixes the stretched number badge (it lost its width when the step became a
   card) and gives both sections real depth, hover life and styled controls. */

/* --- step cards (timeline + process share the look) --- */
.tl{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:1.7rem;list-style:none;padding:0}
.tl::before{display:none}
@media(min-width:640px){.tl{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.tl{grid-template-columns:repeat(4,1fr)}}
.tl-item{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:2.6rem 1.45rem 1.55rem;box-shadow:0 18px 40px -30px rgba(8,20,55,.42);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tl-item::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--accent))}
.tl-item:hover{transform:translateY(-4px);box-shadow:0 28px 52px -28px rgba(8,20,55,.5);
  border-color:color-mix(in srgb,var(--brand) 32%,var(--line))}
/* the number badge — a real circle again, with a soft brand halo */
.tl-dot,.num{display:inline-flex;align-items:center;justify-content:center;
  width:2.9rem;height:2.9rem;min-width:2.9rem;flex:0 0 2.9rem;border-radius:50%;
  background:linear-gradient(150deg,var(--brand),var(--brand-dark));color:#fff;
  font-family:var(--font-display),serif;font-weight:800;font-size:1.15rem;line-height:1;
  box-shadow:0 10px 20px -8px color-mix(in srgb,var(--brand) 60%,transparent),
             0 0 0 5px color-mix(in srgb,var(--brand) 12%,transparent)}
.tl-dot{margin:0 0 1.1rem}
.sec-alt .tl-dot{box-shadow:0 10px 20px -8px color-mix(in srgb,var(--brand) 60%,transparent),
             0 0 0 5px #fff}
.tl-body{padding-top:0}
.tl-body h3{margin:0 0 .45rem;font-size:1.06rem;line-height:1.25}
.tl-body p{color:var(--muted);margin:0;font-size:.94rem;line-height:1.6}

/* --- reviews carousel — brought to life --- */
.reviews-sec{background:var(--surface)}
.carousel{margin-top:1.7rem;position:relative}
.car-track{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.5rem .2rem 1.1rem;scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 min(33rem,88%);scroll-snap-align:center;margin:0;background:#fff;
  border:1px solid var(--line);border-radius:20px;padding:2.9rem 1.9rem 1.7rem;position:relative;
  display:flex;flex-direction:column;
  box-shadow:0 20px 46px -32px rgba(8,20,55,.45);transition:transform .2s ease,box-shadow .2s ease}
/* pin the author row to the bottom so cards of different quote lengths align */
.car-slide figcaption{margin-top:auto}
.car-slide:hover{transform:translateY(-3px);box-shadow:0 30px 58px -30px rgba(8,20,55,.55)}
.car-mark{position:absolute;top:.55rem;left:1.3rem;font-family:Georgia,serif;font-size:4.6rem;
  line-height:1;color:color-mix(in srgb,var(--brand) 20%,transparent);pointer-events:none}
.car-slide blockquote{margin:.5rem 0 1.4rem;font-size:1.08rem;line-height:1.66;color:var(--ink);
  position:relative;font-family:var(--font-display),serif;font-style:italic}
.car-slide figcaption{display:flex;align-items:center;gap:.8rem}
.car-av{flex:none;width:2.7rem;height:2.7rem;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:linear-gradient(150deg,var(--brand),var(--brand-dark));color:#fff;
  font-family:var(--font-display),serif;font-weight:800;font-size:.92rem;letter-spacing:.02em;
  box-shadow:0 8px 16px -8px color-mix(in srgb,var(--brand) 60%,transparent)}
.car-who{display:flex;flex-direction:column;line-height:1.3}
.car-name{color:var(--ink);font-weight:800;font-size:.98rem}
.car-sub{color:var(--muted);font-weight:600;font-size:.82rem}

.car-nav{display:flex;align-items:center;gap:.9rem;margin-top:1.2rem}
.car-btn{background:#fff;border:1.5px solid var(--line);border-radius:50%;width:2.7rem;height:2.7rem;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  font-size:1.1rem;line-height:1;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.car-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-1px);
  box-shadow:0 12px 24px -12px color-mix(in srgb,var(--brand) 70%,transparent)}
.car-dots{display:flex;gap:.42rem;flex:1;flex-wrap:wrap;justify-content:center;align-items:center}
.car-dot{width:.58rem;height:.58rem;border-radius:50%;border:none;padding:0;background:var(--line);
  cursor:pointer;transition:width .2s ease,background .2s ease,border-radius .2s ease}
.car-dot:hover{background:color-mix(in srgb,var(--brand) 45%,var(--line))}
.car-dot.on{width:1.6rem;border-radius:.4rem;background:var(--brand)}

/* 17b. Review star row + quote-mark repositioned as a corner watermark. */
.car-stars{display:flex;gap:.16rem;color:var(--star);margin:.1rem 0 .95rem}
.car-mark{top:.3rem;left:auto;right:1.4rem;font-size:4rem;
  color:color-mix(in srgb,var(--brand) 14%,transparent)}

/* 17c. Reviews as a static grid (fallback layout) reuses the carousel card. */
.rev-grid{display:grid;gap:1.5rem;margin-top:1.7rem;grid-template-columns:1fr}
@media(min-width:680px){.rev-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev-grid .car-slide{flex:none;width:auto}

/* 18. Hero no-photo fallback — a theme-coloured illustration, not a phone pitch. */
.hero-visual{display:block}
.hv-scene{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 30px 60px -34px rgba(8,20,55,.5)}
.hv-foot{display:flex;align-items:center;gap:.6rem;justify-content:center;margin-top:1.1rem;flex-wrap:wrap}
.hv-stars{color:var(--star);letter-spacing:2px;font-size:1.02rem}
.hv-cap{font-size:.9rem;color:var(--muted);font-weight:700}

/* 19. Full-width service-area map band (above the footer on the home page). */
.map-band{position:relative;line-height:0;margin-top:0}
.map-band iframe{width:100%;height:400px;border:0;display:block}
.map-band-tag{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;
  background:#fff;color:var(--ink);padding:.62rem 1.15rem;border-radius:999px;line-height:1.2;
  box-shadow:0 14px 34px -12px rgba(8,20,55,.45);font-weight:700;font-size:.9rem;
  display:inline-flex;align-items:center;gap:.55rem;max-width:92vw}
.mb-dot{flex:none;width:.62rem;height:.62rem;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 20%,transparent)}
@media(max-width:600px){.map-band iframe{height:300px}.map-band-tag{font-size:.82rem}}

/* 20. Why-us as clean, even cards. Long pool entries are capped so no card
   becomes a wall of text; short ones still read well inside the card. */
.why-grid{display:grid;gap:1.35rem;margin-top:1.7rem;grid-template-columns:1fr}
@media(min-width:680px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.55rem 1.4rem;
  box-shadow:0 16px 38px -30px rgba(8,20,55,.42);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.why-card:hover{transform:translateY(-3px);box-shadow:0 26px 48px -28px rgba(8,20,55,.52);
  border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.why-ico{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;
  border-radius:13px;background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand);
  margin-bottom:1rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 20%,transparent)}
.why-card h3{margin:0 0 .5rem;font-size:1.07rem;line-height:1.25}
.why-card p{color:var(--muted);margin:0;font-size:.95rem;line-height:1.62;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sec-alt .why-ico{background:#fff}

/* ========================================================================
   21. CONVERSION — fancier hero + header (scoped to data-skeleton=conversion)
   Only the CTA-dense conversion pages get this richer treatment; every other
   skeleton keeps the standard header and hero.
   ======================================================================== */

/* --- utility top bar (rating · hours · phone) --- */
.util-bar{background:var(--ink);color:rgba(255,255,255,.82);font-size:.82rem}
.util-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;flex-wrap:wrap}
.util-rate{display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
.us-stars{color:var(--star);letter-spacing:1px}
.util-right{display:inline-flex;align-items:center;gap:1.3rem}
.util-hours,.util-phone{display:inline-flex;align-items:center;gap:.4rem}
.util-phone{color:#fff;font-weight:700}
.util-phone:hover{color:var(--star);text-decoration:none}
@media(max-width:600px){.util-hours{display:none}.util-in{justify-content:center;gap:1rem}}

/* --- richer hero background: soft warm glow + faint dot texture --- */
body[data-skeleton=conversion] .hero{position:relative}
body[data-skeleton=conversion] .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 52% at 6% 94%, color-mix(in srgb,var(--star) 16%,transparent), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 0);
  background-size:auto, 22px 22px}
body[data-skeleton=conversion] .hero .hero-in{position:relative;z-index:2}

/* --- eyebrow becomes a glass pill with a glowing dot --- */
body[data-skeleton=conversion] .hero .eyebrow{display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  padding:.42rem .95rem;border-radius:999px;color:#fff;letter-spacing:.1em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body[data-skeleton=conversion] .hero .eyebrow::before{content:"";width:.5rem;height:.5rem;border-radius:50%;
  background:var(--star);box-shadow:0 0 0 4px color-mix(in srgb,var(--star) 30%,transparent);
  flex:none;border:0;transform:none;position:static;margin:0}

/* --- fancier CTAs --- */
body[data-skeleton=conversion] .hero .btn-accent{
  box-shadow:0 16px 34px -14px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn-ic{vertical-align:-3px;margin-right:.5rem}
.btn-arrow{display:inline-block;transition:transform .15s ease}
.btn-ghost:hover .btn-arrow{transform:translateX(3px)}
.hdr-cta .btn-ic,.util-phone svg,.util-hours svg{flex:none}

/* --- hero trust strip under the buttons --- */
.hero-trust{display:flex;align-items:center;gap:.7rem 1rem;flex-wrap:wrap;margin:1.5rem 0 .2rem;
  color:rgba(255,255,255,.92);font-size:.87rem;font-weight:600}
.hero-trust .ht-item{display:inline-flex;align-items:center;gap:.42rem}
.hero-trust .ht-item svg{color:var(--star)}
.hero-trust .ht-stars{color:var(--star);letter-spacing:1px}
.hero-trust strong{color:#fff}
.ht-sep{width:1px;height:1rem;background:rgba(255,255,255,.28)}
body[data-hero=stacked] .hero-trust{justify-content:center}
@media(max-width:560px){.ht-sep{display:none}.hero-trust{gap:.5rem 1rem}}

/* --- nav links: animated underline on hover --- */
body[data-skeleton=conversion] .nav a:not(.btn){position:relative}
body[data-skeleton=conversion] .nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;
  height:2px;background:var(--brand);border-radius:2px;transition:right .2s ease}
body[data-skeleton=conversion] .nav a:not(.btn):hover::after{right:0}

/* A generated wordmark replaces the text mark when a site has one. Height is
   capped so a tall PNG cannot push the header open; width follows. */
.mark.has-logo{display:inline-flex;align-items:center;padding:0;min-width:0}
/* Capped on BOTH sides, with auto on both dimensions: a tall logo is limited
   by height, a wide one by width, and neither is ever stretched. The caps
   scale with the viewport, so the header holds its shape from phone to
   desktop without a separate rule per size. */
.mark.has-logo img{height:auto;width:auto;display:block;
  max-height:clamp(26px,4.2vw,44px);max-width:min(240px,42vw);object-fit:contain}