/* Inspex Gurus — design system.
   Brand sampled from the logo: navy #021B44, green #027C33.
   Display: Archivo. Body: Public Sans. One theme (light), locked. */

/* ── fonts ── */
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/assets/fonts/public-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/assets/fonts/public-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/assets/fonts/public-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/assets/fonts/public-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ── tokens ── */
:root{
  --navy:#021B44;          /* sampled from the hard hat */
  --navy-2:#0A2A5C;        /* lifted navy for hovers/surfaces */
  --navy-deep:#01123008;
  --green:#027C33;         /* sampled from the tick — THE accent */
  --green-dark:#03662C;
  --green-tint:#E9F4EC;
  --paper:#FFFFFF;
  --mist:#F4F6F8;          /* cool section ground */
  --line:#DFE5EA;
  --ink:#152238;           /* body text, navy-leaning near-black */
  --mut:#51607A;           /* secondary text */
  --amber:#B95E12;         /* honesty marker only: the "cannot do" moments */
  --r:10px;
  --ease:cubic-bezier(.23,1,.32,1);
  --disp:'Archivo',system-ui,sans-serif;
  --body:'Public Sans',system-ui,sans-serif;
}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 16.5px/1.65 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-dark);text-underline-offset:3px}
a:hover{color:var(--green)}
h1,h2,h3,h4{font-family:var(--disp);color:var(--navy);letter-spacing:-.015em;line-height:1.12;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2rem,5.2vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.55rem,3.4vw,2.3rem);font-weight:700}
h3{font-size:1.17rem;font-weight:700;line-height:1.3}
h4{font-size:1.17rem;font-weight:700;line-height:1.3}
/* a track heading above a .steps grid — has to outrank the .step h4s beneath it */
.track-h{font-size:1.42rem;font-weight:800;margin-bottom:2px}
p{margin:0 0 1em;max-width:65ch}
.wrap{max-width:1160px;margin:0 auto;padding:0 max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left))}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:0}
section{padding:72px 0}
@media (max-width:700px){section{padding:52px 0}}
.lead{font-size:1.14rem;color:var(--mut)}
.center{text-align:center}
.center p{margin-inline:auto}

/* ── buttons ── */
.btn{display:inline-block;font:600 1rem/1 var(--body);padding:15px 26px;border-radius:var(--r);text-decoration:none;
  transition:transform .16s var(--ease),background-color .16s var(--ease),box-shadow .16s var(--ease);border:0;cursor:pointer}
.btn:active{transform:scale(.97)}
.btn-g{background:var(--green);color:#fff}
.btn-g:hover{background:var(--green-dark);color:#fff}
.btn-o{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--line)}
.btn-o:hover{box-shadow:inset 0 0 0 2px var(--navy);color:var(--navy)}
.btn-w{background:#fff;color:var(--navy)}
.btn-w:hover{background:var(--mist);color:var(--navy)}

/* ── header ── */
.hd{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line)}
/* the bar's own background lives on a pseudo-element so it paints OVER the slide-up nav panel
   while the panel is animating closed (the panel is a child of .hd and travels through here) */
.hd::before{content:'';position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.94);backdrop-filter:blur(8px)}
.hd-in{display:flex;align-items:center;gap:26px;height:68px;position:relative;z-index:2;
  padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.hd-logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;flex:0 0 auto}
.hd-word{font:700 1.22rem/1 var(--disp);color:var(--navy);letter-spacing:-.01em;white-space:nowrap}
.hd-word em{font-style:normal;color:var(--green)}
.hd-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.hd-nav a{font:600 .93rem/1 var(--body);color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.hd-nav a:hover{color:var(--navy)}
.hd-nav a[aria-current]{color:var(--navy);border-bottom-color:var(--green)}
.hd-nav .hd-cta{background:var(--green);color:#fff;padding:11px 18px;border-radius:var(--r);border-bottom:0;
  transition:transform .16s var(--ease),background-color .16s var(--ease)}
.hd-nav .hd-cta:hover{background:var(--green-dark);color:#fff}
.hd-nav .hd-cta:active{transform:scale(.97)}
.hd-nav .hd-cta[aria-current]{background:var(--green-dark);color:#fff;border-bottom:0}
.hd-burger{display:none;background:0;border:0;padding:11px;cursor:pointer;
  min-width:44px;min-height:44px;align-items:center;justify-content:center;flex-direction:column}
.hd-burger span{display:block;width:22px;height:2px;background:var(--navy);margin:5px 0;transition:transform .2s var(--ease),opacity .2s}
@media (max-width:540px){
  /* logo + burger have to share ~276px at 320, so the cluster tightens here */
  .hd-in{gap:12px}
  .hd-word{font-size:clamp(.95rem,4.2vw,1.22rem)}
  .hd-logo img{width:38px;height:29px}
}
@media (max-width:980px){
  /* anchored to the header itself, so the offset can never desync from .hd-in's height
     (a hardcoded 68px drifts against the sticky header while iOS animates its URL bar) */
  .hd-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px max(22px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
    margin:0;max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;
    box-shadow:0 18px 40px rgba(2,27,68,.14);
    transform:translateY(-100%);visibility:hidden;
    transition:transform .22s var(--ease),visibility 0s .25s;z-index:0}
  .hd-nav.open{transform:translateY(0);visibility:visible;transition:transform .22s var(--ease)}
  .hd-nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:1.02rem;min-height:44px;display:flex;align-items:center}
  .hd-nav a[aria-current]{border-bottom-color:var(--line);color:var(--green-dark)}
  .hd-nav .hd-cta{margin-top:14px;text-align:center;justify-content:center}
  .hd-burger{display:flex;margin-left:auto}
  .hd-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hd-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hd-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ── hero (split) ── */
.hero{background:var(--navy);color:#fff;padding:0;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:0;align-items:stretch}
.hero-copy{padding:84px 48px 84px 22px;max-width:640px;margin-left:auto}
.hero h1{color:#fff;margin-bottom:18px}
.hero h1 em{font-style:normal;color:#7CC98F}
.hero .lead{color:#B9C4D6;font-size:1.16rem;margin-bottom:30px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-img{position:relative;min-height:420px}
.hero-img > img,.hero-img > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,transparent 22%)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:56px 22px 40px;margin:0}
  .hero-img{min-height:300px}
  .hero-img::after{background:linear-gradient(180deg,var(--navy) 0%,transparent 22%)}
}

/* ── quotable definition block ── */
.define{border-left:4px solid var(--green);background:var(--mist);padding:26px 30px;border-radius:0 var(--r) var(--r) 0;margin:0 0 1em}
.define p{margin:0;font-size:1.13rem;max-width:none}
.define strong{color:var(--navy)}

/* ── steps ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;counter-reset:step;margin:38px 0 0}
.step{position:relative;padding-top:14px;border-top:3px solid var(--line)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font:800 .95rem/1 var(--disp);color:var(--green);letter-spacing:.02em;display:block;margin-bottom:10px}
.step h3,.step h4{margin-bottom:6px}
.step p{margin:0;color:var(--mut);font-size:.98rem}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:22px}}
/* variants — declared min-width so the mobile single column above is never overridden.
   ⚠ These exist because inline style="grid-template-columns:…" beats every media query.
   Never put a grid-template-columns in a style attribute; add a class here instead. */
.steps-1{grid-template-columns:1fr;gap:18px;margin-top:20px}
@media (min-width:761px){.steps-2{grid-template-columns:repeat(2,1fr);max-width:900px}}
@media (min-width:761px){.steps-4{grid-template-columns:repeat(2,1fr);gap:26px}}
@media (min-width:1040px){.steps-4{grid-template-columns:repeat(4,1fr);gap:26px}}

/* ── split rows ── */
.row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.row.rev>.row-img{order:2}
.row-img img{border-radius:var(--r);box-shadow:0 18px 44px rgba(2,27,68,.13)}
@media (max-width:860px){.row{grid-template-columns:1fr;gap:28px}.row.rev>.row-img{order:0}}
/* contact: form + "what happens next" — see the warning above */
.row-form{align-items:start}
@media (min-width:861px){.row-form{grid-template-columns:1.1fr .9fr}}

/* ── audience band ── */
.aud{background:var(--mist)}
.aud-list{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:12px}
.aud-item{display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.aud-item svg{flex:0 0 auto;margin-top:3px}
.aud-item h3{margin-bottom:4px}
.aud-item p{margin:0;color:var(--mut);font-size:.97rem}
@media (max-width:760px){.aud-list{grid-template-columns:1fr}}

/* ── honesty band ── */
.honest{background:var(--navy);color:#fff}
.honest h2{color:#fff}
.honest .lead{color:#B9C4D6}
.honest-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:34px}
.hlist{list-style:none;margin:0;padding:0}
.hlist li{display:flex;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.14);font-size:1rem;line-height:1.5}
.hlist svg{flex:0 0 auto;margin-top:4px}
.hlist .h-can{color:#DCE5F0}
.hlist .h-cant{color:#DCE5F0}
.h-tag{font:700 .8rem/1 var(--disp);letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px;display:block}
.h-tag.can{color:#7CC98F}
.h-tag.cant{color:#E8A365}
@media (max-width:760px){.honest-cols{grid-template-columns:1fr;gap:30px}}

/* ── stat / proof strip ── */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:8px}
.strip>div{border-top:3px solid var(--green);padding-top:16px}
.strip strong{display:block;font:800 2rem/1.1 var(--disp);color:var(--navy);margin-bottom:6px}
.strip p{margin:0;color:var(--mut);font-size:.95rem}
.strip .src{font-size:.82rem;color:#7C8AA0;margin-top:6px;display:block}
@media (max-width:760px){.strip{grid-template-columns:1fr;gap:22px}}

/* ── cert wall ── */
.certs{columns:3;gap:40px;margin-top:26px}
.certs ul{list-style:none;margin:0 0 26px;padding:0;break-inside:avoid}
.certs .c-h{font:700 .8rem/1 var(--disp);letter-spacing:.09em;text-transform:uppercase;color:var(--green-dark);
  padding-bottom:8px;margin-bottom:6px;border-bottom:2px solid var(--green-tint)}
.certs li{padding:7px 0;border-bottom:1px solid var(--line);font-size:.94rem;color:var(--ink)}
@media (max-width:900px){.certs{columns:2}}
@media (max-width:600px){.certs{columns:1}}

/* ── FAQ ── */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  font:600 1.06rem/1.4 var(--body);color:var(--navy);padding:18px 2px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:600 1.3rem/1 var(--disp);color:var(--green);flex:0 0 auto}
.faq details[open] summary::after{content:'\2212'}
.faq .fa{padding:0 2px 20px;color:var(--mut)}
.faq .fa p{margin-bottom:.7em}

/* ── CTA band ── */
.cta-band{background:var(--green);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{margin:0 auto 26px;color:#E3F2E8}
.cta-band .btn-w:hover{transform:translateY(-1px)}

/* ── page header (interior) ── */
.ph{background:var(--mist);border-bottom:1px solid var(--line);padding:60px 0 48px}
.ph .lead{margin:0}
.ph h1{margin-bottom:10px}

/* ── legislation cards ── */
.laws{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.law{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:#fff}
.law .l-state{font:700 .8rem/1 var(--disp);letter-spacing:.09em;text-transform:uppercase;color:var(--green-dark);display:block;margin-bottom:10px}
.law h3{margin-bottom:8px}
.law p{margin:0;font-size:.95rem;color:var(--mut)}
.law .src{font-size:.82rem;color:#7C8AA0;margin-top:10px;display:block}
@media (max-width:860px){.laws{grid-template-columns:1fr}}

/* ── checklist rows ── */
.need{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:30px}
.need>div{padding-top:16px;border-top:3px solid var(--line)}
.need h3{font-size:1.05rem;margin-bottom:6px}
.need p{margin:0;color:var(--mut);font-size:.95rem}
@media (max-width:760px){.need{grid-template-columns:1fr;gap:20px}}

/* ── forms ── */
.form{max-width:560px}
.form label{display:block;font:600 .92rem/1 var(--body);color:var(--navy);margin:0 0 7px}
.form .req{color:var(--amber)}
.form input,.form select,.form textarea{width:100%;font:400 1rem/1.5 var(--body);color:var(--ink);
  background:#fff;border:1.5px solid #B8C2CE;border-radius:8px;padding:12px 14px;margin-bottom:4px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
.form .fld{margin-bottom:18px}
.form .hint{font-size:.85rem;color:var(--mut);margin:4px 0 0}
.form .err{display:none;font-size:.88rem;color:#A33A1E;margin:5px 0 0;font-weight:600}
.form .fld.bad input,.form .fld.bad textarea,.form .fld.bad select{border-color:#C4562B}
.form .fld.bad .err{display:block}
.form button{width:100%;margin-top:6px}
.form .form-privacy{margin-top:12px}
.form-status{display:none;margin:0 0 18px;padding:12px 14px;border-radius:8px;font-weight:600;
  font-size:.95rem;background:#FBEAE4;color:#A33A1E;border:1.5px solid #E4BBAB}
.form-status.show{display:block}
/* honeypot — off-screen rather than display:none, and never focusable */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── footer ── */
.ft{background:var(--navy);color:#B9C4D6;font-size:.95rem}
.ft a{color:#DCE5F0}
.ft a:hover{color:#fff}
.ft-grid{display:grid;grid-template-columns:1.3fr .7fr .9fr 1.1fr;gap:44px;padding-top:58px;padding-bottom:44px}
.ft-name{font:700 1.3rem/1 var(--disp);color:#fff;margin:14px 0 10px}
.ft-name em{font-style:normal;color:#7CC98F}
.ft-line{margin:0 0 8px;font-size:.92rem;color:#8FA0B8}
.ft-h{font:700 .78rem/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:#7CC98F;margin:0 0 14px}
.ft-nav{display:flex;flex-direction:column;gap:9px}
.ft-nav a{text-decoration:none}
.ft-link{display:inline-block;margin-bottom:10px}
.ft-base{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;padding-bottom:26px;font-size:.88rem;color:#8FA0B8}
.ft-base p{margin:0}
.ft-legal{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* Telos credit — the logo link is the backlink, the line under it is plain text */
.ft-credit{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.ft-credit img{display:block;width:118px;height:auto;opacity:.72;transition:opacity .18s ease}
.ft-credit a:hover img,.ft-credit a:focus-visible img{opacity:1}
.ft-credit-line{font-size:.78rem;line-height:1.45;color:#7A8BA4;max-width:24ch}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:560px){
  .ft-grid{grid-template-columns:1fr}
  .ft-base{flex-direction:column;align-items:flex-start;gap:18px}
  .ft-legal{gap:8px;flex-direction:column;align-items:flex-start}
  .ft-credit{align-items:flex-start;text-align:left}
  .ft-credit-line{max-width:34ch}
}

/* ── gate (preview only) ── */
.gate-lock{overflow:hidden}
.gate{position:fixed;inset:0;z-index:200;background:var(--navy);display:flex;align-items:center;justify-content:center;padding:22px}
.gate-card{background:#fff;border-radius:14px;padding:40px 36px;max-width:420px;width:100%;text-align:center}
.gate-card img{margin:0 auto 18px;width:180px}
.gate-card h2{font-size:1.3rem;margin-bottom:6px}
.gate-card p{color:var(--mut);font-size:.95rem;margin-bottom:20px}
.gate-card input{width:100%;font:400 1.05rem/1.4 var(--body);text-align:center;letter-spacing:.04em;
  border:1.5px solid #B8C2CE;border-radius:8px;padding:12px;margin-bottom:12px}
.gate-card input:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
.gate-card .g-err{display:none;color:#A33A1E;font-size:.88rem;font-weight:600;margin:-4px 0 10px}
.gate-card button{width:100%}
.gate-note{color:#8FA0B8;font-size:.82rem;margin:16px 0 0}

/* ── icon system (Tabler outline, one family) ── */
.ico{width:26px;height:26px;flex:0 0 auto;color:var(--green)}
.step > .ico{display:block;margin-bottom:12px;width:28px;height:28px}
.aud-item .ico{margin-top:3px}
.need > div > .ico{display:block;margin-bottom:10px;width:28px;height:28px}
.hlist .ico{margin-top:3px}
.honest .hlist .ico{color:#E8A365}

/* ── full-bleed image band ── */
.img-band{position:relative;min-height:540px;overflow:hidden;padding:0}
.img-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.img-band .band-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 0 26px;
  background:linear-gradient(0deg,rgba(2,27,68,.82) 0%,transparent 100%)}
.img-band .band-cap p{margin:0;color:#fff;font:600 1rem/1.4 var(--body);max-width:none}
@media (max-width:700px){.img-band{min-height:300px}}

/* ── photographic CTA band ── */
.cta-band.photo{position:relative;overflow:hidden;padding:110px 0}
.cta-band.photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta-band.photo::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(2,27,68,.78) 0%,rgba(2,27,68,.9) 100%)}
.cta-band.photo .wrap{position:relative;z-index:2}
@media (max-width:700px){.cta-band.photo{padding:72px 0}}

/* ── CTA band brand watermark + secondary action ── */
.cta-band{position:relative;overflow:hidden}
.cta-band .cta-mark{position:absolute;right:-40px;bottom:-60px;width:340px;height:auto;
  opacity:.1;pointer-events:none;transform:rotate(-8deg);z-index:1}
.cta-band .wrap{position:relative;z-index:2}
.cta-alt{margin-top:22px;font-size:.95rem;color:rgba(255,255,255,.85)}
.cta-alt a{color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.4)}
.cta-alt a:hover{border-bottom-color:#fff;color:#fff}
@media (max-width:700px){.cta-band .cta-mark{width:220px;right:-30px;bottom:-40px}}

/* ── live-call hero treatments ── */
/* chip anchored on the phone in the photo; anchor set per image via --ax/--ay on .hero-img */
.call-chip{position:absolute;left:var(--ax,60%);top:var(--ay,40%);transform:translate(-50%,-130%);
  display:flex;align-items:center;gap:8px;background:rgba(2,27,68,.82);backdrop-filter:blur(4px);
  color:#fff;font:600 .8rem/1 var(--body);padding:9px 14px;border-radius:100px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.22);z-index:3}
.call-dot{width:8px;height:8px;border-radius:50%;background:#35C46A;flex:0 0 auto;position:relative}
/* pill under the CTAs, the other end of the call */
.cta-chip{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:100px;
  color:#DCE5F0;font:500 .86rem/1.3 var(--body);padding:9px 16px}
.cta-chip strong{color:#fff;font-weight:600}
/* the connection line */
.call-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.call-line path{fill:none;stroke:#7CC98F;stroke-width:2;stroke-dasharray:7 7;opacity:.85}
/* the call-window vignette */
.call-card{position:absolute;left:22px;bottom:22px;z-index:3;background:rgba(2,27,68,.86);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);border-radius:12px;
  padding:14px 16px;color:#fff;min-width:230px;max-width:76%}
.call-card .cc-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  font:600 .74rem/1 var(--body);color:#B9C4D6;letter-spacing:.04em;margin-bottom:11px}
.call-card .cc-rec{display:flex;align-items:center;gap:6px}
.call-card .cc-rec i{width:7px;height:7px;border-radius:50%;background:#E8604C;display:inline-block}
.call-card .cc-main{display:flex;align-items:center;gap:11px}
.call-card .cc-main img{width:34px;height:26px;flex:0 0 auto}
.call-card .cc-name{font:600 .88rem/1.25 var(--body);color:#fff}
.call-card .cc-sub{font:400 .76rem/1.35 var(--body);color:#9DACC4;margin-top:2px}
.call-card .cc-status{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.14);font:500 .76rem/1.3 var(--body);color:#7CC98F}
@media (max-width:900px){
  .call-line{display:none}
  .call-card{left:14px;bottom:14px;padding:12px 14px;min-width:0}
  .call-chip{font-size:.74rem;padding:8px 12px}
}
@media (prefers-reduced-motion:no-preference){
  .call-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:#35C46A;
    animation:callpulse 1.8s ease-out infinite}
  .call-card .cc-rec i{animation:recblink 1.6s steps(2,start) infinite}
  html.js .call-line path{stroke-dashoffset:var(--linelen,600);animation:linedraw 1.4s var(--ease) .5s forwards}
  .kenburns img{animation:kenburns 22s ease-in-out infinite alternate}
}
@keyframes callpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@keyframes recblink{50%{opacity:.25}}
@keyframes linedraw{to{stroke-dashoffset:0}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ── reveal on scroll (subtle, honors reduced motion) ── */
@media (prefers-reduced-motion:no-preference){
  html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  html.js .rv.in{opacity:1;transform:none}
}

/* ── mobile ergonomics ──
   Touch targets, a readable type floor, and the platform hooks. Kept in one block so the
   mobile contract is auditable in one place rather than scattered through the components. */
html{color-scheme:light}
body{-webkit-tap-highlight-color:rgba(2,27,68,.10)}

/* contact page: "rather talk it through?" card (was an inline style attribute) */
.talk-box{margin-top:34px;padding:24px;background:var(--mist);border-radius:var(--r)}
.talk-box p{margin:0 0 4px;font-weight:600;color:var(--navy)}

/* The inbox is one unbreakable 34-character token. Inside the talk-box, which adds
   24px of padding to the page gutter, it pushed the whole contact page sideways at
   320px the moment CONTACT.email was filled in. It has to be allowed to break, and
   the 44px-target rule below turns some of these links into inline-flex, whose
   anonymous text item will not wrap without an explicit max-width. */
a[href^="mailto:"]{overflow-wrap:anywhere;max-width:100%;flex-wrap:wrap}

/* "see the full picture…" link under the honesty band (was two inline style attributes) */
.band-more{margin-top:30px}
.band-more a{color:#7CC98F}
.band-more a:hover{color:#fff}

/* touch targets — 44px minimum on anything tappable that is not a link inside prose */
@media (max-width:980px){
  .ft-nav{gap:0}
  .ft-nav a,.ft-base a{display:flex;align-items:center;min-height:44px}
  .ft-base a{display:inline-flex}
  .ft-link{display:inline-flex;align-items:center;min-height:44px;margin-bottom:4px}
  .faq summary{min-height:44px}
  /* the demo/email line under the CTA button is a conversion action, not a footnote */
  .cta-alt a,.band-more a{display:inline-flex;align-items:center;min-height:44px}
}

/* type floor — nothing under 14px, except uppercase tracked labels and the photo-overlay
   status chips, which hold at 13px (they are labels, not reading copy).
   Runs to 768px so iPad portrait gets the same floor as a phone. */
@media (max-width:768px){
  .form .hint,.strip .src,.law .src,.cta-chip{font-size:14px}
  .ft-h,.h-tag,.certs .c-h,.law .l-state{font-size:13px}
  .call-chip{font-size:13px}
  .call-card .cc-top,.call-card .cc-sub,.call-card .cc-status{font-size:13px}
}

/* footer respects the home indicator / notch */
.ft-base{padding-bottom:max(26px,env(safe-area-inset-bottom))}