/* ══════════════════════════════════════════════════════════════════════════
   PARAMOUNT — the shared kit. Every page links this. One place for the six
   tokens, the house button, the dark chrome and the motion rules, so a page
   can never quietly drift away from the others.

   See BRAND-LOCK.md, notes/PAGE-DESIGN-STANDARD.md §2e and §2f, and
   ~/.claude/skills/catch-page/SKILL.md "Button design".
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#022451; --surface:#FFFFFF; --card:#F4F6F9;
  --accent:#CF1C20; --muted:#5A6B85; --line:rgba(2,36,81,.14);
  /* accent shades exist ONLY to build the button's edge and shine, and the
     lifted red for dark grounds. They are not new brand colors. */
  --accent-lit:#E23A2E; --accent-deep:#A81317; --accent-edge:#820F13;
  --accent-onDark:#FF6A5E;          /* 6.5:1 on --ink-deep */
  --ink-deep:#01162F; --ink-mid:#04306B;
  --display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* the ladder: 4 8 12 16 24 32 48 64 96 128 160 192 — nothing off it */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px; --s12:192px;
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700}
h1{font-size:clamp(2.125rem,5.6vw,4rem);line-height:1.04;letter-spacing:-.025em}
h2{font-size:clamp(1.625rem,3vw,2.5rem);line-height:1.14;letter-spacing:-.015em}
h3{font-size:1.1875rem;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--s5);padding-right:var(--s5)}
.lead{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;color:var(--muted)}
.micro{font-size:.6875rem;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--muted)}
section{padding-top:var(--s7);padding-bottom:var(--s7)}
@media(min-width:900px){section{padding-top:var(--s9);padding-bottom:var(--s9)}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s5);top:var(--s5);position:absolute;z-index:100;background:#fff;
  color:var(--ink);padding:var(--s3) var(--s5);border-radius:8px;
  display:inline-flex;align-items:center;min-height:44px}

/* ══ THE BUTTON — house rule, every button, every client ══
   Lifted off the page, a little shine, reacts to the cursor, presses down,
   and it carries its own subtext. A flat rectangle reads as unclickable.
   The ban is on neon glows, colored halos, shimmer sweeps and loops. It was
   never a ban on depth: a layered shadow and a top highlight is craft. */
.cta-wrap{position:relative;display:inline-block;max-width:100%}
.btn{
  position:relative;z-index:1;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:64px;padding:var(--s3) var(--s6);border:0;border-radius:999px;
  cursor:pointer;text-decoration:none;font-family:var(--sans);
  /* solid color FIRST so the button is never white-on-white if the gradient
     fails to paint; the gradient is the enhancement, not the ground */
  background-color:var(--accent);
  background-image:linear-gradient(180deg,var(--accent-lit) 0%,var(--accent) 52%,var(--accent-deep) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),      /* the shine, top edge */
    0 2px 0 var(--accent-edge),               /* the solid edge = a real object */
    0 6px 14px rgba(2,36,81,.20),
    0 16px 32px rgba(2,36,81,.16);
  transition:transform .13s ease, box-shadow .13s ease, filter .13s ease}
.btn .lbl{display:flex;align-items:center;gap:var(--s2);
  font-size:1.0625rem;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.btn .lbl svg{width:18px;height:18px;flex:none;transition:transform .13s ease}
.btn .btn-sub{font-size:.75rem;font-weight:500;line-height:1.3;margin-top:3px;
  color:rgba(255,255,255,.90);max-width:100%;display:block}
/* keep subtexts SHORT. A wrapping subtext turns the pill into a 127px blob and
   the drawn circle no longer fits around it. Roughly 34 characters at 390px. */
.btn:hover{transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 3px 0 var(--accent-edge),
    0 10px 20px rgba(2,36,81,.24),
    0 22px 44px rgba(2,36,81,.18)}
.btn:hover .lbl svg{transform:translateX(3px)}
.btn:active{transform:translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.20),
    0 1px 0 var(--accent-edge),
    0 3px 8px rgba(2,36,81,.20)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark .btn:focus-visible{outline-color:#fff}
.btn[disabled]{opacity:.55;cursor:default;transform:none;filter:none}

/* the pointer — exact spec, measured off the house reference. A small emoji
   centered under a button is NOT this: big, off the corner, tilted, bobbing.
   The one sanctioned emoji on a client page. */
.tap-finger{position:absolute;bottom:-14px;right:-24px;font-size:40px;
  animation:tapMe 1.3s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes tapMe{
  0%,100%{transform:translateY(8px)  rotate(-12deg)}
  50%    {transform:translateY(-14px) rotate(-12deg)}
}
/* the architect's circle — stroked ONCE on entry, never looped */
.cta-ring{position:absolute;left:-14px;top:-12px;width:calc(100% + 28px);
  height:calc(100% + 24px);pointer-events:none;overflow:visible;z-index:0}
.cta-ring ellipse{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;
  opacity:.5;stroke-dasharray:var(--ring-len,760);stroke-dashoffset:var(--ring-len,760)}
.cta-ring.drawn ellipse{transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1) .2s;
  stroke-dashoffset:0}
.on-dark .cta-ring ellipse{stroke:#fff;opacity:.45}

/* live dot for the phone pill */
.dot{width:8px;height:8px;border-radius:50%;background:#3BD16F;flex:none;
  animation:live 2s ease-out infinite}
@keyframes live{
  0%{box-shadow:0 0 0 0 rgba(59,209,111,.6)}
  70%{box-shadow:0 0 0 9px rgba(59,209,111,0)}
  100%{box-shadow:0 0 0 0 rgba(59,209,111,0)}
}
.telpill{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;
  padding:0 var(--s5);border-radius:999px;border:1px solid rgba(255,255,255,.42);
  color:#fff;text-decoration:none;font-weight:600;font-size:.9375rem;
  background:rgba(255,255,255,.06);transition:background .15s ease,border-color .15s ease}
.telpill:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* ══ dark chrome: the strip and the header. The menu is never a plain white
   bar — it is the client's ink, and the mark on it is the reversed asset. ══ */
.strip{background:var(--ink-deep);color:rgba(255,255,255,.70);font-size:.8125rem;
  position:relative;z-index:60}
.strip-in{display:flex;align-items:center;justify-content:space-between;
  min-height:38px;max-width:var(--wrap);margin:0 auto;
  padding-left:var(--s5);padding-right:var(--s5)}
.strip a{text-decoration:none;color:rgba(255,255,255,.70);font-weight:500}
.strip a:hover{color:#fff}
.strip-left,.strip-right{display:flex;align-items:center;gap:var(--s5)}
.strip .tab{padding:var(--s1) 0;border-bottom:2px solid transparent}
.strip .tab.on{border-bottom-color:var(--accent-onDark);color:#fff}
.strip-phone{color:#fff;font-weight:600}
@media(max-width:767px){
  /* the strip's targets are under 44px, so it does not run on phones. The
     phone is repeated at full size in the header. */
  .strip{display:none}
}
/* The header is ALWAYS solid ink. It does not overlay the hero — a sticky
   header still occupies flow, so "transparent" meant the white body showed
   through and the reversed white mark vanished into it. Solid ink also gives
   the page continuous dark chrome from the strip through the hero. */
.hdr{background:var(--ink-deep);border-bottom:1px solid rgba(255,255,255,.10)}
@media(min-width:768px){
  .hdr{position:sticky;top:0;z-index:50;
    transition:background .25s ease, box-shadow .25s ease, border-color .25s ease}
  /* solid, NOT backdrop-filter: blurring a sticky bar over three animating
     full-bleed layers repaints the viewport every frame and the hero tore
     badly when you scrolled back up to it. */
  .hdr.scrolled{background:var(--ink-deep);
    border-bottom-color:rgba(255,255,255,.12);
    box-shadow:0 1px 2px rgba(0,0,0,.10),0 10px 30px rgba(0,0,0,.14)}
}
.hdr-in{display:flex;align-items:center;gap:var(--s5);min-height:72px;
  max-width:var(--wrap);margin:0 auto;padding:var(--s3) var(--s5)}
@media(min-width:900px){.hdr-in{min-height:88px}}
.mark{display:block;flex:none}
/* tightened 18 Aug: 186px was dominating an 88px header. The mark is a
   signature, not the headline. */
.mark img{width:154px;height:auto}
@media(min-width:1000px){.mark img{width:166px}}
@media(max-width:480px){.mark img{width:134px}}
/* nowrap + a tighter gap: adding the Free Home Score pill pushed the row over
   and "How it works" started breaking to two lines */
.nav{display:none;margin-left:auto;align-items:center;gap:var(--s5)}
.nav a{white-space:nowrap}
@media(min-width:1060px){.nav{display:flex}}
@media(min-width:1240px){.nav{gap:var(--s6)}}
.nav a{text-decoration:none;font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.82);
  padding:var(--s2) 0;border-bottom:2px solid transparent;transition:color .15s ease}
.nav a:hover{color:#fff;border-bottom-color:var(--accent-onDark)}
/* The free tool is the one thing a stranger will actually do on a first visit,
   so it gets picked out of the nav rather than sitting in the queue — outlined,
   at the right-hand end, next to the filled CTA. Filled = book. Outlined =
   the free thing. Two ranks of the same accent, not two accents. */
.nav a.nav-star{margin-left:var(--s3);padding:var(--s2) var(--s4);border:1px solid
  var(--accent-onDark);border-radius:999px;color:var(--accent-onDark);font-weight:600;
  display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap;
  transition:background .15s ease,color .15s ease}
.nav a.nav-star:hover{background:var(--accent-onDark);color:var(--ink-deep);
  border-bottom-color:var(--accent-onDark)}
.nav a.nav-star .fdot{width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none}
.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
@media(min-width:1000px){.hdr-cta{margin-left:0}}
.hdr-tel{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
  padding:0 var(--s3);text-decoration:none;font-weight:700;white-space:nowrap;color:#fff}
@media(min-width:768px){.hdr-tel{display:none}}
.hdr .btn{min-height:48px;padding:var(--s2) var(--s5)}
.hdr .btn .lbl{font-size:.9375rem;white-space:nowrap}
.hdr .btn .btn-sub{display:none}
@media(max-width:600px){.hdr .cta-wrap{display:none}}

/* ══ moving backgrounds. The hero is never naked. Ken Burns over a still is
   the house technique — zero bandwidth, frame accurate, and it does not ship
   a 20MB MP4 (START-HERE §12). ══ */
.stage{position:relative;overflow:hidden;background:var(--ink);isolation:isolate;
  contain:paint}
.stage-bg{position:absolute;inset:-6%;z-index:0;background-size:cover;
  background-position:center 45%;background-repeat:no-repeat;
  backface-visibility:hidden}
.stage-bg.drift-a{animation:driftA 34s ease-in-out infinite alternate}
.stage-bg.drift-b{animation:driftB 42s ease-in-out infinite alternate}
@keyframes driftA{
  0%  {transform:scale(1.06) translate3d(0,0,0)}
  100%{transform:scale(1.15) translate3d(-2.2%,-1.4%,0)}
}
@keyframes driftB{
  0%  {transform:scale(1.11) translate3d(1.6%,0,0)}
  100%{transform:scale(1.04) translate3d(-1.6%,-1%,0)}
}
/* ── the film hero: several stills cross-fading, each with its own Ken Burns
   move. This is what "animated" means here — no MP4, no bandwidth, and it
   reads as motion rather than as a slideshow because the fade and the drift
   overlap. 3 frames x 9s = a 27s cycle.
   Frame 1 is opaque by default so the hero is never blank if animations are
   off, disabled, or still parsing. ── */
.stage-film .frame{position:absolute;inset:-6%;z-index:0;background-size:cover;
  background-position:center 45%;background-repeat:no-repeat;opacity:0;
  animation:filmFade 27s ease-in-out infinite, filmDrift 27s ease-in-out infinite;
  /* no will-change: three promoted full-bleed layers is more GPU memory than
     this earns, and it was part of the tearing on scroll-up. transform and
     opacity animations are composited anyway. */
  backface-visibility:hidden}
.stage-film .frame:nth-of-type(1){opacity:1;animation-delay:0s,0s}
.stage-film .frame:nth-of-type(2){animation-delay:9s,9s}
.stage-film .frame:nth-of-type(3){animation-delay:18s,18s}
@keyframes filmFade{
  0%{opacity:0} 4%{opacity:1} 30%{opacity:1} 34%{opacity:0} 100%{opacity:0}
}
@keyframes filmDrift{
  0%  {transform:scale(1.05) translate3d(0,0,0)}
  34% {transform:scale(1.14) translate3d(-1.8%,-1.2%,0)}
  100%{transform:scale(1.05) translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .stage-film .frame{animation:none;opacity:0}
  .stage-film .frame:nth-of-type(1){opacity:1}
}

/* the scrim is a gradient in the client's ink, never flat black */
/* lightened once the hero carried people: the workers have to be readable,
   not a texture. Contrast is measured under the actual text after any change
   to these numbers — see the check in the build notes. */
.stage-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(1,22,47,.80) 0%, rgba(2,36,81,.62) 42%,
                            rgba(2,36,81,.70) 72%, rgba(1,22,47,.90) 100%),
    radial-gradient(120% 78% at 50% 38%, rgba(2,36,81,0) 0%, rgba(1,22,47,.42) 100%)}
.stage-scrim.heavy{background:linear-gradient(180deg, rgba(1,22,47,.94) 0%,
  rgba(2,36,81,.88) 50%, rgba(1,22,47,.96) 100%)}
.stage > .wrap, .stage-in{position:relative;z-index:2}

/* scroll reveal — 380ms, fires once, never loops. Content is visible without
   JS; the class only adds motion and is never the source of the content. */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .38s ease, transform .38s ease}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .tap-finger{animation:none}
  .dot{animation:none}
  .stage-bg{animation:none !important}
  .cta-ring ellipse{stroke-dashoffset:0;transition:none}
  .reveal{opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
}

/* ══ dark trust band — centered, with a drawn icon on each cell.
   Four numbers in a row with nothing but text under them reads as a table and
   the eye does not know what it is looking at. The icon says which kind of
   claim it is before the words do. Icons are drawn SVG, never emoji. ══ */
.trustband{background:var(--ink-deep);color:#fff;padding:var(--s7) 0}
.trustband .tgrid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s6) var(--s5);text-align:center}
@media(min-width:820px){.trustband .tgrid{grid-template-columns:repeat(4,1fr)}}
.trustband .tgrid > div{display:flex;flex-direction:column;align-items:center}
.trustband .ico{width:30px;height:30px;margin-bottom:var(--s3);color:var(--accent-onDark);
  flex:none}
.trustband .n{font-family:var(--display);font-size:clamp(1.375rem,2.4vw,1.875rem);
  line-height:1.05;display:block;margin-bottom:var(--s2);color:#fff}
.trustband .t{font-size:.9375rem;color:rgba(255,255,255,.66);line-height:1.45;
  max-width:16em}
.position-line{margin-top:var(--s7);padding-top:var(--s6);
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;gap:var(--s4);align-items:stretch;max-width:56em}
.position-line .bar{flex:none;width:3px;background:var(--accent-onDark);border-radius:2px}
.position-line p{font-family:var(--display);font-weight:700;
  font-size:clamp(1.125rem,1.9vw,1.375rem);line-height:1.35;color:#fff}
.position-line span{display:block;font-family:var(--sans);font-weight:400;
  font-size:.9375rem;color:rgba(255,255,255,.66);margin-top:var(--s3);line-height:1.6}

/* ══ cards, steps, pills ══ */
.band{background:var(--card)}
.head{max-width:44rem;margin-bottom:var(--s7)}
.head .micro{margin-bottom:var(--s3)}
.head h2{margin-bottom:var(--s4)}
.grid{display:grid;gap:var(--s5)}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(2,36,81,.22);
  box-shadow:0 2px 4px rgba(2,36,81,.04),0 12px 28px rgba(2,36,81,.07)}
.card h3{margin-bottom:var(--s1)}
.card p{color:var(--muted);font-size:.9375rem;line-height:1.6}
.card .more{margin-top:auto;padding-top:var(--s3);font-weight:600;font-size:.9375rem;
  text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;
  min-height:44px}
.card .more:hover{color:var(--accent)}
.rule{width:28px;height:2px;background:var(--ink);border-radius:2px}
.card-dark{background:linear-gradient(160deg,var(--ink-mid) 0%,var(--ink) 60%,var(--ink-deep) 100%);
  border-color:transparent}
.card-dark h3{color:#fff}
.card-dark p{color:rgba(255,255,255,.74)}
.card-dark .more{color:#fff}
.card-dark .rule{background:var(--accent-onDark)}
.step{display:flex;gap:var(--s5);align-items:flex-start}
.step .num{flex:none;width:44px;height:44px;border-radius:999px;
  background:linear-gradient(180deg,var(--ink-mid),var(--ink));color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-size:1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(2,36,81,.16)}
.step h3{margin-bottom:var(--s2)}
.step p{color:var(--muted);font-size:.9375rem}
.areas{display:flex;flex-wrap:wrap;gap:var(--s2)}
.areas span{border:1px solid var(--line);border-radius:999px;padding:var(--s2) var(--s4);
  font-size:.9375rem;font-weight:500;background:var(--surface);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.areas span:hover{border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(2,36,81,.08)}

/* ══ reviews ══
   These MUST default to the light ground and only go white inside .stage.
   Unscoped white here is what put invisible review text on the landing pages:
   the page's own rule set font-size but not color, so the kit's white won and
   the copy vanished onto a white card. Dark styles get scoped. Always. */
.rev{background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.rev p{font-size:.9375rem;line-height:1.6;color:var(--ink)}
.rev .who{font-size:.875rem;color:var(--muted);margin-top:auto;padding-top:var(--s2)}
.stars{color:var(--accent);letter-spacing:.1em;font-size:.875rem}
.stage .rev{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.stage .rev p{color:rgba(255,255,255,.92)}
.stage .rev .who{color:rgba(255,255,255,.62)}
.stage .stars{color:#FFC53D}
.stage .micro{color:rgba(255,255,255,.66)}
.stage h2,.stage h1{color:#fff}
.stage .lead{color:rgba(255,255,255,.80)}

/* ══ faq ══ */
details{border-bottom:1px solid var(--line);padding:var(--s5) 0}
details summary{cursor:pointer;font-family:var(--display);font-size:1.0625rem;
  line-height:1.4;list-style:none;display:flex;justify-content:space-between;
  align-items:flex-start;gap:var(--s4);min-height:44px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";flex:none;font-size:1.25rem;color:var(--muted);line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin-top:var(--s3);color:var(--muted);font-size:.9375rem;max-width:56em}

/* ══ close + footer ══ */
/* the closing CTA gets the same weight as the hero's — it is the same action,
   and a small pill floating next to a mail link is not a close */
.close{text-align:center}
.close p{color:rgba(255,255,255,.76);max-width:38em;margin:0 auto var(--s7)}
.close .close-actions{display:flex;flex-direction:column;align-items:center;
  gap:var(--s4)}
.close .cta-wrap{width:min(100%,420px)}
.close .btn{width:100%}
.close .tel2{display:inline-block;padding:var(--s3) var(--s4);
  color:rgba(255,255,255,.72);font-size:.9375rem;text-decoration:none;line-height:20px}
.close .tel2 strong{color:#fff}
.ftr{background:var(--ink-deep);color:rgba(255,255,255,.72);padding:var(--s8) 0 var(--s7)}
.ftr-grid{display:grid;gap:var(--s7)}
@media(min-width:800px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr-mark{width:196px;margin-bottom:var(--s5)}
/* the full lockup carries the palms, the skyline and the bridge — it is the
   only place on the page the whole mark gets to be itself, and it sits on a
   white plate because that is the ground it was drawn for */
.ftr-plate{display:inline-block;background:#fff;border-radius:10px;
  padding:var(--s5) var(--s6);margin-bottom:var(--s6);
  box-shadow:0 2px 6px rgba(0,0,0,.14),0 14px 34px rgba(0,0,0,.16)}
.ftr-plate img{width:190px;height:auto}
@media(min-width:800px){.ftr-plate img{width:214px}}
.ftr-tag{font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:var(--s4)}
.ftr h4{margin:0 0 var(--s4);font-family:var(--sans);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.ftr a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.9375rem;
  display:inline-flex;align-items:center;min-height:44px}
.ftr a:hover{color:#fff}
.ftr .legal{margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.14);font-size:.8125rem;
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between}

/* ══ landing-page pieces ══
   The catch-page law says "no logo on a landing page" because a logo bar costs
   ~100px of the only space that converts. OWNER OVERRIDE 18 Aug 2026: a small
   centered mark above the headline, because a naked top reads as unfinished.
   It is small and it sits INSIDE the hero, so it costs no fold. */
.lp-mark{display:block;width:132px;height:auto;margin:0 auto var(--s5)}
@media(min-width:700px){.lp-mark{width:152px}}

/* sections below the hero sit in a narrower column — full-width body copy on a
   landing page reads as an unstyled document */
.narrow{max-width:min(80%,880px);margin-left:auto;margin-right:auto}
@media(max-width:760px){.narrow{max-width:100%}}

/* the landing-page footer is the same dark chrome as the home page, with the
   logo on its white plate */
.ftr-lp{background:var(--ink-deep);color:rgba(255,255,255,.68);
  padding:var(--s8) 0 var(--s7);text-align:center;font-size:.875rem}
.ftr-lp .ftr-plate{margin-bottom:var(--s5)}
.ftr-lp .ftr-plate img{width:180px}
.ftr-lp a.tel{border-color:rgba(255,255,255,.42);color:#fff;
  background:rgba(255,255,255,.06)}
.ftr-lp a.tel:hover{background:rgba(255,255,255,.14);border-color:#fff}
.ftr-lp .disc{max-width:44em;margin:var(--s6) auto 0;line-height:1.6;
  color:rgba(255,255,255,.52);font-size:.8125rem}

/* ══ the catch-tool band — the free thing gets its own room on the page,
   above the service list, because it is the only thing here a stranger will
   do on a first visit ══ */
.scoreband{background:linear-gradient(160deg,var(--ink-mid) 0%,var(--ink) 55%,var(--ink-deep) 100%);
  color:#fff;padding:var(--s8) 0}
.scoreband-in{display:grid;gap:var(--s6);align-items:center}
@media(min-width:900px){.scoreband-in{grid-template-columns:1.25fr .75fr;gap:var(--s8)}}
.scoreband .micro{color:var(--accent-onDark);margin-bottom:var(--s3)}
.scoreband h2{color:#fff;margin-bottom:var(--s4)}
.scoreband p{color:rgba(255,255,255,.78);max-width:38em}
.scoreband-cta{display:flex;justify-content:flex-start}
@media(min-width:900px){.scoreband-cta{justify-content:flex-end}}
.scoreband-cta .cta-wrap{width:min(100%,360px)}
.scoreband-cta .btn{width:100%}

/* ══ the staging demo banner — catch-page SKILL.md non-negotiable #1.
   It keeps its acid highlight: that is a house mark and it does not get
   neutralised into grey text. It sits ABOVE the strip so nobody mistakes a
   working demo for the client's live site. ══ */
.demobar{background:#D1FF1A;color:#1a1a00;position:relative;z-index:70;
  font-size:.8125rem;line-height:1.4;font-weight:600}
.demobar .in{max-width:var(--wrap);margin:0 auto;padding:var(--s2) var(--s5);
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  text-align:center;flex-wrap:wrap;min-height:34px}
.demobar b{font-weight:700}
.demobar a{color:#1a1a00;text-decoration:underline;font-weight:700}
.demobar .blip{width:7px;height:7px;border-radius:50%;background:#1a1a00;flex:none;
  animation:demoBlip 1.8s ease-in-out infinite}
@keyframes demoBlip{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.demobar .blip{animation:none}}