/* State 28 Safety — shared design system
   Design direction: rebuild/design/DESIGN-DIRECTION.md. No em-dashes in copy. */

/* ---- self-hosted fonts ---- */
@font-face{font-family:'Geist';src:url('fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist';src:url('fonts/Geist-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Geist';src:url('fonts/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/ClashDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Graduate';src:url('fonts/Graduate-Regular.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --ink:#10151B; --paper:#F6F4EF; --white:#fff;
  --petrol:#0B4A4F; --petrol-600:#0C5C63; --petrol-400:#21A199;
  --amber:#F4A81D; --amber-600:#DB9110; --amber-700:#B4740A;
  --steel:#495260; --muted:#737B87;
  --hair:#E6E1D7; --hair-dark:#1E2C2E; --pos:#2E9E6B;
  --shadow:0 12px 40px -12px rgba(16,21,27,.18);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Geist',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:'Clash Display','Geist',sans-serif;font-weight:600;line-height:1.02;letter-spacing:-.02em}
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-feature-settings:"tnum"}
.num{font-family:'Clash Display',sans-serif;font-feature-settings:"tnum";font-weight:600}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.eyebrow{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-700)}
section{padding:104px 0}
@media(max-width:720px){section{padding:56px 0}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:500;font-size:16px;border-radius:8px;padding:14px 22px;transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--amber);color:var(--ink)}
.btn-primary:hover{background:var(--amber-600);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{border-color:var(--hair);background:transparent;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-ondark{background:var(--amber);color:var(--ink)}
.btn-ondark:hover{background:var(--amber-600);transform:translateY(-2px)}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(246,244,239,.82);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.nav.scrolled{border-color:var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-family:'Clash Display';font-weight:700;font-size:21px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.brand .mark{height:38px;width:auto;display:block;flex:none}
.nav-links{display:flex;gap:28px;align-items:center;font-size:15px;font-weight:500}
.nav-links a{color:var(--steel)}.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;gap:16px;align-items:center}
.nav-phone{font-size:14px;color:var(--steel)}
@media(max-width:1200px){.nav-links{display:none}.nav-phone{display:none}}

/* hero */
.hero{padding:70px 0 96px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,80px);margin:18px 0 22px}
.hero .sub{font-size:19px;color:var(--steel);max-width:60ch;margin-bottom:28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-trust{font-size:14px;color:var(--muted);margin-top:16px}
.ghost28{position:absolute;right:-4%;top:-14%;font-family:'Clash Display';font-weight:700;font-size:44vw;line-height:1;color:rgba(11,74,79,.04);z-index:0;pointer-events:none;user-select:none}
.hero-wrap{position:relative;overflow:hidden}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}.ghost28{top:-3%;right:-18%;font-size:86vw}}

/* inner-page sub-hero */
.subhero{padding:56px 0 20px;position:relative}
.subhero h1{font-size:clamp(32px,4.4vw,58px);margin:14px 0 18px;max-width:20ch}
.subhero .lede{font-size:19px;color:var(--steel);max-width:66ch}
.crumbs{font-family:'Geist Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.04em}
.crumbs a:hover{color:var(--amber-700)}

/* calculator */
.calc{background:var(--white);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow);padding:26px;position:relative;z-index:1}
.calc h2,.calc h3{font-family:'Geist';font-weight:600;font-size:15px;letter-spacing:.01em;line-height:1.3}
.calc .cap{font-size:13px;color:var(--muted);margin-bottom:20px}
.field{margin-bottom:16px}
.field label{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:var(--steel);margin-bottom:7px}
.field label .v{font-family:'Geist Mono',monospace;color:var(--ink)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%;font-family:'Geist',sans-serif;font-size:16px;padding:12px;border:1px solid var(--hair);border-radius:8px;background:var(--white);color:var(--ink)}
.field input.mono{font-family:'Geist Mono',monospace}
.field input[type=range]{width:100%;accent-color:var(--amber);height:4px}
.result{margin-top:20px;padding:20px;border-radius:12px;background:linear-gradient(180deg,#fff,#FBF9F4);border:1px solid var(--hair)}
.result .rl{font-size:12px;font-family:'Geist Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.result .rn{font-family:'Clash Display';font-weight:700;font-size:52px;color:var(--amber-700);line-height:1.05;font-feature-settings:"tnum"}
.result .rr{font-size:13px;color:var(--steel);margin-top:2px}
.result .rc{font-size:11.5px;color:var(--muted);margin-top:12px;line-height:1.45}
.gate{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.gate input{flex:1;min-width:120px;font-size:14px;padding:11px;border:1px solid var(--hair);border-radius:8px;background:var(--paper)}

/* proof / credential bar */
.proof{background:var(--petrol);color:#EAF3F2}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.proof .stat .n{font-family:'Clash Display';font-weight:600;font-size:34px;color:#fff;font-feature-settings:"tnum"}
.proof .stat .l{font-size:13.5px;color:#9FC4C2;margin-top:4px}
.proof .stat .n .amb{color:var(--amber)}
@media(max-width:760px){.proof .wrap{grid-template-columns:1fr 1fr;gap:22px}}

/* kicker + moves */
.kicker{max-width:62ch}
.kicker h2{font-size:clamp(30px,3.6vw,44px);margin:12px 0 14px}
.kicker p{color:var(--steel);font-size:18px}
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.move{background:var(--white);border:1px solid var(--hair);border-radius:12px;padding:26px}
.move .step{font-family:'Geist Mono',monospace;font-size:12px;color:var(--amber-700);letter-spacing:.1em}
.move h3{font-family:'Clash Display';font-weight:600;font-size:22px;margin:14px 0 8px}
.move p{font-size:15.5px;color:var(--steel)}
@media(max-width:820px){.moves{grid-template-columns:1fr}}

/* meet dustin */
.dustin{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.dustin .photo{border-radius:16px;overflow:hidden;border:1px solid var(--hair);aspect-ratio:3/4;background:var(--petrol)}
.dustin .photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.dustin h2{font-size:clamp(28px,3.4vw,40px);margin:12px 0 16px}
.dustin .q{font-family:'Fraunces',serif;font-size:22px;line-height:1.4;color:var(--ink);margin-bottom:18px}
.dustin p{color:var(--steel);margin-bottom:14px}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.cred{font-family:'Geist Mono',monospace;font-size:12px;padding:6px 11px;border:1px solid var(--hair);border-radius:100px;background:var(--white);color:var(--ink)}
.cred.verified::before{content:"✓ ";color:var(--pos)}
@media(max-width:820px){.dustin{grid-template-columns:1fr}}

/* app showcase */
.app{background:var(--ink);color:#EAF3F2}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.app h2{font-size:clamp(28px,3.4vw,42px);color:#fff;margin:12px 0 16px}
.app p{color:#A9B4BC;margin-bottom:20px;max-width:52ch}
.app ul{list-style:none;display:grid;gap:12px}
.app li{display:flex;gap:11px;font-size:15.5px;color:#D6DEE3}
.app li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--amber);margin-top:8px;flex:none}
.app .frame{border-radius:24px;overflow:hidden;border:1px solid var(--hair-dark);background:var(--petrol);aspect-ratio:16/11}
.app .frame img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.app-grid{grid-template-columns:1fr;gap:32px}}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.svc{background:var(--white);border:1px solid var(--hair);border-radius:12px;padding:24px;transition:transform .16s var(--ease),border-color .16s;display:block}
.svc:hover{transform:translateY(-3px);border-color:var(--amber)}
.svc .ic{width:34px;height:34px;color:var(--petrol);margin-bottom:14px}
.svc h3{font-family:'Clash Display';font-weight:600;font-size:19px;margin-bottom:7px}
.svc p{font-size:14.5px;color:var(--steel)}
.svc .more{font-size:13.5px;color:var(--amber-700);font-weight:500;margin-top:12px;display:inline-block}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr}}

/* industries */
.inds{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.ind{font-size:15px;padding:10px 18px;border:1px solid var(--hair);border-radius:100px;background:var(--white);color:var(--steel)}

/* real worksite proof band */
.worksites{margin-top:44px}
.ws-hero{border-radius:14px;overflow:hidden;aspect-ratio:16/7;border:1px solid var(--hair);position:relative}
.ws-hero img{width:100%;height:100%;object-fit:cover;display:block}
.ws-hero figcaption{position:absolute;left:20px;bottom:16px;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.06em;color:#fff;background:rgba(16,21,27,.55);padding:6px 12px;border-radius:100px;backdrop-filter:blur(4px)}
.ws-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.ws-row figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--hair)}
.ws-row img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){.ws-row{grid-template-columns:1fr 1fr}.ws-hero{aspect-ratio:16/10}}

/* prose (article/content pages) */
.prose{max-width:70ch}
.prose h2{font-size:clamp(24px,2.6vw,32px);margin:44px 0 14px}
.prose h3{font-family:'Clash Display';font-weight:600;font-size:21px;margin:30px 0 10px}
.prose p{color:var(--steel);margin-bottom:16px}
.prose ul,.prose ol{color:var(--steel);margin:0 0 18px 22px}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink);font-weight:600}
.prose .lead{font-size:19px;color:var(--ink)}
.answerbox{background:var(--white);border:1px solid var(--hair);border-left:3px solid var(--amber);border-radius:12px;padding:22px 24px;margin:8px 0 8px}
.answerbox p{color:var(--ink);margin:0;font-size:18px;line-height:1.55}
.byline{font-family:'Geist Mono',monospace;font-size:12.5px;color:var(--muted);margin-top:36px;padding-top:16px;border-top:1px solid var(--hair)}
.byline .v::before{content:"✓ ";color:var(--pos)}

/* faq */
.faq{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;padding:22px 0;font-family:'Clash Display';font-weight:600;font-size:19px;display:flex;justify-content:space-between;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--amber-700);font-size:24px;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 0 22px;color:var(--steel);max-width:68ch}

/* cta band */
.cta{background:var(--petrol);color:#fff;text-align:center}
.cta h2{font-size:clamp(30px,4vw,48px);color:#fff;margin-bottom:14px;max-width:20ch;margin-left:auto;margin-right:auto}
.cta p{color:#B6D3D1;margin-bottom:26px}
.cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* form card */
.formcard{background:var(--white);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow);padding:30px}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.formrow{grid-template-columns:1fr}}
.formcard label{font-size:13px;font-weight:500;color:var(--steel);margin-bottom:6px;display:block}
.formcard .field{margin-bottom:16px}

/* slot note */
.slot{border:1px dashed var(--amber-700);background:rgba(244,168,29,.06);border-radius:12px;padding:20px 24px;color:var(--amber-700);font-size:14px;text-align:center;margin-top:40px}

/* footer (MOBILE-FIRST: base = phone; enhanced up at >=821px) */
footer{background:var(--ink);color:#9FABB4;padding:38px 0 22px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "contact contact" "services company";gap:22px 18px;margin-bottom:22px}
.f-brand{grid-area:brand;max-width:46ch}
.f-contact{grid-area:contact}
.f-services{grid-area:services}
.f-company{grid-area:company}
footer h4{color:#fff;font-family:'Geist';font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:11px}
footer a{color:#9FABB4;display:block;margin-bottom:7px}footer a:hover{color:#fff}
.f-brand p{font-size:14px;line-height:1.5}
.f-brand .license{margin-top:12px}
.license{font-family:'Geist Mono',monospace;font-size:12px}
.f-contact h4{margin-bottom:12px}
.f-contact a[href^="tel:"]{display:inline-flex;align-items:center;gap:9px;min-height:46px;background:rgba(200,151,64,.13);border:1px solid rgba(200,151,64,.4);color:#F4A81D;font-weight:600;padding:11px 18px;border-radius:var(--r-md,12px);margin-bottom:10px}
.f-contact a[href^="tel:"]::before{content:"";width:16px;height:16px;flex:none;background:#F4A81D;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1L8.1 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.6 2.6.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1L8.1 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.6 2.6.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.foot-bottom{border-top:1px solid var(--hair-dark);padding-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:11px;font-size:13px;color:#808E98}
.foot-bottom .mono{font-size:11.5px;letter-spacing:.02em;color:#7C8A93}

/* footer DESKTOP enhancement (mobile-first: min-width) */
@media(min-width:821px){
  footer{padding:64px 0 34px}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;grid-template-areas:none;gap:32px;margin-bottom:40px}
  .f-brand,.f-services,.f-company,.f-contact{grid-area:auto}
  .f-brand{max-width:none}
  footer h4{font-size:13px;margin-bottom:14px}
  footer a{margin-bottom:8px}
  .f-contact h4{margin-bottom:14px}
  .f-contact a[href^="tel:"]{display:block;min-height:0;background:none;border:0;color:#9FABB4;font-weight:400;padding:0;margin-bottom:8px}
  .f-contact a[href^="tel:"]:hover{color:#fff}
  .f-contact a[href^="tel:"]::before{display:none}
  .foot-bottom{flex-direction:row;justify-content:space-between;align-items:center;gap:12px;padding-top:22px}
}

/* sticky mobile cta */
.mcta{display:none}
@media(max-width:720px){.mcta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;gap:8px;padding:10px;background:rgba(16,21,27,.94);backdrop-filter:blur(8px)}
.mcta .btn{flex:1;justify-content:center;padding:13px}
body{padding-bottom:66px}}


/* ============================================================
   MOBILE 2026 PASS (appended; overrides earlier rules)
   ============================================================ */
:root{color-scheme:light;--gutter:clamp(20px,5.5vw,24px)}
html{overflow-x:hidden}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
/* metric-matched fallback locks CLS on cold mobile */
@font-face{font-family:'Geist-fallback';src:local('Arial');size-adjust:97%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
body{font-family:'Geist','Geist-fallback',system-ui,sans-serif}
/* drop Fraunces: pull-quote uses the display face */
.dustin .q{font-family:'Clash Display','Geist',sans-serif;font-weight:600;font-style:normal;letter-spacing:-.01em}

/* ----- form inputs (touch) ----- */
.field input,.field select,.field textarea{-webkit-appearance:none;appearance:none;min-height:48px;font-size:16px;border-radius:8px}
.field textarea{min-height:120px;line-height:1.5;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.gate input:focus-visible{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(244,168,29,.28)}
.gate input{font-size:16px;min-height:48px;min-width:160px;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2310151B' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--white) inset;caret-color:var(--ink);transition:background-color 9999s ease-out 0s}
*{-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ----- range slider (touch, cross-browser) ----- */
.field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;min-height:44px;background:transparent;cursor:pointer;margin:0;padding:0}
.field input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(var(--amber),var(--amber)) 0/var(--_fill,50%) 100% no-repeat,var(--hair)}
.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-12px;border-radius:50%;background:var(--white);border:2px solid var(--amber);box-shadow:0 2px 6px rgba(16,21,27,.25)}
.field input[type=range]:active::-webkit-slider-thumb{transform:scale(1.08)}
.field input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(244,168,29,.35)}
.field input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--hair)}
.field input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--amber)}
.field input[type=range]::-moz-range-thumb{width:30px;height:30px;border:2px solid var(--amber);border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(16,21,27,.25)}
.field input[type=range]:focus{outline:none}

/* ----- contact split grid + overflow guards ----- */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:34px}}
footer a,.foot-bottom .mono,.split a{overflow-wrap:anywhere}

/* ----- mobile nav / header ----- */
header.nav{padding-top:env(safe-area-inset-top)}
header.nav.scrolled{background:rgba(246,244,239,.94);box-shadow:0 1px 0 rgba(16,21,27,.06)}
body.menu-open header.nav{background:var(--paper)}
.nav-toggle{display:none;appearance:none;border:0;background:transparent;cursor:pointer;width:44px;height:44px;margin-right:-8px;align-items:center;justify-content:center;color:var(--ink);border-radius:8px}
.nav-toggle:focus-visible{outline:2px solid var(--amber-700);outline-offset:2px}
.nav-toggle .bars{position:relative;width:22px;height:16px;display:block}
.nav-toggle .bars span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s var(--ease),top .3s var(--ease)}
.nav-toggle .bars span:nth-child(1){top:0}.nav-toggle .bars span:nth-child(2){top:7px}.nav-toggle .bars span:nth-child(3){top:14px}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){top:7px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){top:7px;transform:rotate(-45deg)}
@media(max-width:1200px){.nav-toggle{display:inline-flex}.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}}
@media(max-width:720px){.nav-cta>.btn-primary{display:none}}
@media(max-width:380px){.brand{font-size:18px;gap:7px}}

.mobile-menu{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;height:100dvh;padding-top:calc(env(safe-area-inset-top) + 16px);padding-bottom:calc(env(safe-area-inset-bottom) + 24px);padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));background:rgba(11,74,79,.98);backdrop-filter:blur(18px) saturate(140%);color:#EAF3F2;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .32s var(--ease),transform .32s var(--ease),visibility 0s linear .32s;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mobile-menu.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.mm-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.mm-top .brand{font-family:'Clash Display';font-weight:700;font-size:19px;color:#fff;display:flex;align-items:center;gap:9px}
.mm-top .brand .mark{height:34px;width:auto;flex:none}
.mm-close{appearance:none;border:0;background:transparent;color:#EAF3F2;cursor:pointer;width:44px;height:44px;margin-right:-8px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.mm-close:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mm-links{display:flex;flex-direction:column;margin-top:18px}
.mm-links a{font-family:'Clash Display',sans-serif;font-weight:600;font-size:clamp(24px,7vw,32px);letter-spacing:-.02em;color:#fff;min-height:56px;display:flex;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.mm-links a:active{color:var(--amber)}
.mm-links a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mm-foot{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:14px}
.mm-phone{display:inline-flex;align-items:center;gap:.55em;color:#EAF3F2;font-size:20px;min-height:48px}
.mm-phone:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mm-cta{justify-content:center;font-size:17px;min-height:52px}
.mobile-menu.is-open .mm-links a{opacity:0;transform:translateY(6px);animation:mmIn .4s var(--ease) forwards}
.mobile-menu.is-open .mm-links a:nth-child(1){animation-delay:.05s}
.mobile-menu.is-open .mm-links a:nth-child(2){animation-delay:.09s}
.mobile-menu.is-open .mm-links a:nth-child(3){animation-delay:.13s}
.mobile-menu.is-open .mm-links a:nth-child(4){animation-delay:.17s}
.mobile-menu.is-open .mm-links a:nth-child(5){animation-delay:.21s}
.mobile-menu.is-open .mm-links a:nth-child(6){animation-delay:.25s}
.mobile-menu.is-open .mm-links a:nth-child(7){animation-delay:.29s}
@keyframes mmIn{to{opacity:1;transform:none}}
html.menu-open,body.menu-open{overflow:hidden;touch-action:none}

/* ----- sticky bottom CTA (supersedes earlier .mcta) ----- */
.mcta{display:none}
@media(max-width:720px){.mcta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;gap:8px;align-items:center;padding:10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:rgba(16,21,27,.94);backdrop-filter:blur(8px)}.mcta .btn{min-height:48px;white-space:nowrap}.mcta .btn-ghost{flex:0 0 auto;padding:14px 20px}.mcta .btn-primary{flex:1;justify-content:center}body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}}
body.menu-open .mcta{opacity:0;pointer-events:none;transition:opacity .2s}

/* footer mobile styles now live in the mobile-first base above */

/* ----- typography mobile ----- */
.proof .stat .n{line-height:1.05}
@media(max-width:720px){
h1,h2{line-height:1.06;letter-spacing:-.015em}
.hero h1{font-size:clamp(36px,9vw,80px);line-height:1.05}
.subhero h1{font-size:clamp(29px,7.6vw,58px);line-height:1.06}
.eyebrow{letter-spacing:.1em}
.hero{padding:28px 0 40px}
}
@media(max-width:820px){.dustin .photo{aspect-ratio:4/5;max-width:420px;margin:0 auto}}

/* ----- signature: amber stat ticks ----- */
@media(max-width:760px){
.proof .wrap{gap:30px 20px}
.proof .stat{position:relative;padding-left:14px}
.proof .stat::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;border-radius:2px;background:var(--amber);opacity:.55}
}

/* ----- reduced motion ----- */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.mobile-menu{transition:opacity .001s linear,visibility 0s;transform:none}
.mobile-menu.is-open .mm-links a{animation:none;opacity:1;transform:none}
}

/* ----- offscreen perf ----- */
#work,#services,#industries,#faq{content-visibility:auto;contain-intrinsic-size:auto 700px}

/* hero/subhero add class .wrap but their padding shorthand zeroes horizontal gutter — restore it */
.hero,.subhero{padding-left:var(--gutter);padding-right:var(--gutter)}

/* ===== verifiable credentials (about) ===== */
#credentials{background:var(--paper)}
.cred-head{max-width:62ch;margin-bottom:34px}
.cred-head h2{margin-top:8px}
.cred-sub{color:var(--steel);margin-top:12px;font-size:17px;line-height:1.5;max-width:56ch}
.cred-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.credcard{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:11px;box-shadow:0 1px 2px rgba(16,21,27,.03)}
.credcard-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.seal{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:52px;padding:0 13px;border-radius:12px;background:var(--petrol);color:#fff;font-family:'Clash Display',sans-serif;font-weight:700;font-size:19px;letter-spacing:.005em;line-height:1}
.seal-degree{background:var(--ink)}
.cred-id{font-family:'Geist Mono',monospace;font-size:12.5px;letter-spacing:.03em;color:#9A7526;background:rgba(200,151,64,.12);border:1px solid rgba(200,151,64,.32);padding:5px 11px;border-radius:999px;white-space:nowrap}
.credcard h3{font-family:'Clash Display',sans-serif;font-weight:600;font-size:18.5px;line-height:1.16;color:var(--ink);margin:0}
.credcard .issuer{color:var(--steel);font-size:14px;margin:0}
.credcard-scan{border-radius:10px;overflow:hidden;border:1px solid var(--hair);margin-top:2px}
.credcard-scan img{width:100%;display:block}
.credcard-scan[hidden]{display:none}
.cred-verify{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:7px;color:var(--petrol);font-weight:600;font-size:14px}
.cred-verify svg{flex:none;transition:transform .15s ease}
.cred-verify:hover{color:var(--amber)}
.cred-verify:hover svg{transform:translate(2px,-2px)}
.credcard-degree{background:#FBFAF7}
.cred-foot{margin-top:22px;color:var(--steel);font-size:14px;max-width:62ch;line-height:1.5}
.cred-foot a{color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.cred-foot a:hover{color:var(--amber)}
@media(max-width:820px){.cred-grid{grid-template-columns:1fr 1fr;gap:14px}.cred-sub{font-size:16px}}
@media(max-width:560px){.cred-grid{grid-template-columns:1fr;gap:12px}.credcard{padding:20px}.seal{min-width:52px;height:48px;font-size:18px}}

/* ============================================================
   JAW-DROP POLISH (2026-07-26) — craft + motion + AA contrast.
   Reversible: delete this whole block (+ enhance.js + its <script> tags).
   Audited by design, motion, conversion, and accessibility passes.
   ============================================================ */

/* --- token upgrades: layered elevation, AA-safe gold + grey, radius scale --- */
:root{
  --amber-800:#8A5A08;              /* 5.4:1 on paper — small gold labels/links */
  --muted:#656D79;                  /* was #737B87 (3.89:1) -> 4.76:1 as body text */
  --field-bd:#94907F;               /* 3.2:1 input border (was hair 1.3:1) */
  --shadow-sm:0 1px 2px rgba(16,21,27,.05),0 2px 6px -2px rgba(16,21,27,.08);
  --shadow:0 1px 2px rgba(16,21,27,.05),0 6px 16px -6px rgba(16,21,27,.12),0 18px 44px -16px rgba(16,21,27,.16);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  scroll-padding-top:84px;          /* focused/anchored targets clear the sticky header */
}

/* --- layered elevation: resting cards soft, hero calc + form get full depth --- */
.move,.svc,.credcard{box-shadow:var(--shadow-sm)}
.calc,.formcard{box-shadow:var(--shadow)}
.btn-primary:hover,.btn-ondark:hover{box-shadow:0 4px 12px -2px rgba(180,116,10,.35)}

/* --- AA contrast: small gold labels/links on paper --- */
.eyebrow,.move .step,.svc .more,.slot,.crumbs a:hover{color:var(--amber-800)}
.cred-id{color:#6F520F}                                   /* 6.6:1 on the amber tint */
.foot-bottom{color:#808E98}                               /* 5.4:1 on ink */

/* --- estimator payoff: crisp petrol authority, amber carried by the label --- */
.result .rn{color:var(--petrol)}
.result .rl{color:var(--amber-800)}

/* --- form/calculator field borders to 3:1 + readable placeholders --- */
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea,.gate input{border-color:var(--field-bd)}
::placeholder{color:#5C6470;opacity:1}

/* --- focus-visible on every interactive element (keyboard + AA 2.4.7) --- */
a:focus-visible,.svc:focus-visible,summary:focus-visible{outline:2px solid var(--amber-800);outline-offset:2px;border-radius:6px}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--amber-800)}
.btn-ondark:focus-visible,.mcta .btn:focus-visible{box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--amber)}

/* --- skip link (revealed on focus) --- */
.skip{position:absolute;left:-999px;top:0;z-index:200}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--shadow)}
main:focus{outline:none}

/* --- button press: physical commit --- */
.btn:active{transform:translateY(0) scale(.985);transition-duration:.12s}

/* --- radius harmony (normalize the 14/11 strays) --- */
.ws-hero{border-radius:var(--r-lg)}
.f-contact a[href^="tel:"]{border-radius:var(--r-md)}

/* --- proof bar: amber tick ledger + hairline on desktop too --- */
.proof .stat{position:relative;padding-left:16px}
.proof .stat::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:2px;background:var(--amber);opacity:.6}
.proof .stat + .stat{border-left:1px solid rgba(255,255,255,.08)}

/* --- card hover parity: linked cards lift; credcards get a quiet petrol response --- */
.move{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.move:hover{transform:translateY(-3px);border-color:var(--amber);box-shadow:var(--shadow)}
.credcard{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.credcard:hover{transform:translateY(-3px);border-color:var(--petrol);box-shadow:var(--shadow)}
.qa summary{transition:color .15s var(--ease)}
.qa summary:hover{color:var(--petrol)}
.svc .more{transition:color .15s var(--ease)}

/* --- ambient image life: slow zoom on hover (containers already clip) --- */
.ws-row figure img,.ws-hero img,.app .frame img,.dustin .photo img{transition:transform .5s var(--ease)}
.ws-row figure:hover img,.ws-hero:hover img,.app .frame:hover img,.dustin .photo:hover img{transform:scale(1.04)}

/* --- signature: the "28" becomes a deliberate outline numeral in the logo face --- */
.ghost28{font-family:'Graduate',serif;color:transparent;-webkit-text-stroke:2px rgba(11,74,79,.09)}

/* --- scroll reveal + ghost arrival (JS-gated via html.enh, reduced-motion safe) --- */
@media(prefers-reduced-motion:no-preference){
  html.enh [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:var(--d,0ms)}
  html.enh [data-reveal].in{opacity:1;transform:none}
  html.enh .ghost28{animation:ghostIn .9s var(--ease) both}
  @keyframes ghostIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
}

/* --- signature: EMR track (visualizes the mod dropping below 1.0) --- */
.emrtrack{margin:22px 0 2px}
.emrtrack-bar{position:relative;height:6px;border-radius:4px;background:linear-gradient(90deg,#2E9E6B,#E6E1D7 42%,#F4A81D)}
.emrtrack-zone{position:absolute;top:0;bottom:0;left:20%;width:0;background:rgba(46,158,107,.32);border-radius:4px;transition:left .45s var(--ease),width .45s var(--ease)}
.emrtrack-avg{position:absolute;top:-4px;bottom:-4px;left:20%;width:2px;background:var(--ink);opacity:.45;border-radius:2px}
.emrtrack-avg span{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.emrtrack-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 1px 3px rgba(16,21,27,.35);transition:left .45s var(--ease)}
.emrtrack-dot.cur{left:32%;background:var(--amber);z-index:2}
.emrtrack-dot.tgt{left:20%;background:var(--pos);z-index:2}
.emrtrack-scale{display:flex;justify-content:space-between;margin-top:14px;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.02em;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.emrtrack-zone,.emrtrack-dot{transition:none}}

/* --- homepage "verify it yourself" credential line --- */
.verifyline{font-size:13.5px;color:var(--steel);margin:14px 0 22px;max-width:62ch;line-height:1.6}
.verifyline b{font-family:'Geist Mono',monospace;font-weight:500;color:var(--ink);font-size:12.5px}
.verifyline a{color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.verifyline a:hover{color:var(--amber-800)}

/* --- footer: branded closing moment (28 watermark + structure) --- */
footer{position:relative;overflow:hidden;border-top:1px solid var(--hair-dark)}
footer .wrap{position:relative;z-index:1}
.foot-mark{position:absolute;right:-1.5%;bottom:-24%;margin:0;font-family:'Graduate',serif;font-size:clamp(200px,31vw,500px);line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.045);pointer-events:none;user-select:none;z-index:0}
@media(max-width:640px){.foot-mark{bottom:-8%;right:-6%;font-size:190px;-webkit-text-stroke-width:1.5px}}

/* footer mark -> brand shield silhouette (override text watermark) */
.foot-mark{right:-24px;bottom:-46px;top:auto;left:auto;height:150%;width:auto;font-size:0;-webkit-text-stroke:0}
.foot-mark path{fill:none;stroke:rgba(255,255,255,.05);stroke-width:1.3}
.foot-mark path:last-child{stroke:rgba(200,151,64,.06)}
@media(max-width:640px){.foot-mark{height:auto;width:190px;right:-26px;bottom:6%}}

/* --- custom-safety-apps: live Muster demo block --- */
.live-demo{background:var(--ink);color:#EAF3F2}
.demo-grid{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center}
.demo-phone{justify-self:center}
.demo-phone img{width:270px;max-width:100%;border-radius:26px;border:1px solid var(--hair-dark);box-shadow:0 30px 60px -22px rgba(0,0,0,.55)}
.demo-copy h2{color:#fff;font-size:clamp(28px,3.4vw,40px);margin:12px 0 14px}
.demo-copy p{color:#A9B4BC;max-width:56ch}
.demo-creds{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0}
.demo-creds>div{background:rgba(255,255,255,.04);border:1px solid var(--hair-dark);border-radius:10px;padding:10px 14px}
.demo-creds span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7C8A93;margin-bottom:3px;font-family:'Geist Mono',monospace}
.demo-creds code{font-family:'Geist Mono',monospace;font-size:14px;color:#EAF3F2}
.demo-note{font-size:13px;color:#7C8A93;margin-top:14px}
@media(max-width:820px){.demo-grid{grid-template-columns:1fr;gap:30px}.demo-phone{order:-1}}

/* --- live demo section: request-a-demo layout (matches muster's DemoSection) --- */
.demo-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.demo-copy h2{max-width:16ch}
.demo-phone{justify-self:start;margin-top:30px}
.demo-phone img{width:230px}
.demo-formwrap .formcard{margin:0}
.demo-formnote{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}
@media(max-width:820px){.demo-grid{grid-template-columns:1fr;gap:30px}.demo-copy{order:0}.demo-phone{justify-self:center;margin-top:24px}}

/* --- calculator gate button: never shrink/truncate (Dustin caught "breakd") --- */
.gate .btn{white-space:nowrap;flex:0 0 auto}
@media(max-width:560px){.gate input{flex:1 1 100%}.gate .btn{flex:1 1 100%;justify-content:center}}

/* ============================================================
   RIZZ v2 (2026-07-26) — signature micro-interactions.
   All reduced-motion safe; CSS-first. Reversible: delete this block.
   ============================================================ */
/* FAQ: ease the disclosure open at the same rate its marker turns */
@media(prefers-reduced-motion:no-preference){
  html.enh{interpolate-size:allow-keywords}
  html.enh .qa::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .32s var(--ease),opacity .26s var(--ease),content-visibility .32s allow-discrete}
  html.enh .qa[open]::details-content{block-size:auto;opacity:1}
}
.qa summary::after,.qa summary::marker{transition:transform .32s var(--ease)}
/* service-card arrow nudge (arrow is now a pseudo-element) */
.svc .more{display:inline-flex;align-items:center;gap:.35em}
.svc .more::after{content:"→";transition:transform .18s var(--ease)}
.svc:hover .more::after,.svc:focus-visible .more::after{transform:translateX(3px)}
/* nav-link underline sweeps in from the left */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
/* hero: choreograph the supporting cast in on load, never the h1 (LCP) */
@media(prefers-reduced-motion:no-preference){
  html.enh .hero .hero-creds,html.enh .hero .sub,html.enh .hero .hero-cta,html.enh .hero .hero-trust,html.enh .hero .calc{opacity:0;transform:translateY(12px);animation:heroIn .55s var(--ease) forwards}
  html.enh .hero .sub{animation-delay:.07s}
  html.enh .hero .calc{animation-delay:.13s}
  html.enh .hero .hero-cta{animation-delay:.16s}
  html.enh .hero .hero-trust{animation-delay:.22s}
  @keyframes heroIn{to{opacity:1;transform:none}}
}
/* proof: amber ticks draw down as the stat reveals + the number counts */
@media(prefers-reduced-motion:no-preference){
  html.enh .proof .stat::before{transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease) .1s}
  html.enh .proof .stat.in::before{transform:scaleY(1)}
}
/* the interactive cards acknowledge focus */
.calc,.formcard{transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.calc:focus-within,.formcard:focus-within{border-color:var(--amber);box-shadow:0 1px 2px rgba(16,21,27,.05),0 12px 32px -12px rgba(180,116,10,.2)}
/* quiet hover on the otherwise-inert pills */
.ind{transition:transform .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.ind:hover{transform:translateY(-2px);border-color:var(--petrol-400);color:var(--ink)}
.cred{transition:border-color .16s var(--ease)}
.cred:hover{border-color:var(--petrol-400)}
/* slider thumb grab-halo */
.field input[type=range]::-webkit-slider-thumb{transition:box-shadow .16s var(--ease),transform .12s var(--ease)}
.field input[type=range]:active::-webkit-slider-thumb{box-shadow:0 2px 6px rgba(16,21,27,.25),0 0 0 8px rgba(244,168,29,.16)}
.field input[type=range]:active::-moz-range-thumb{box-shadow:0 2px 6px rgba(16,21,27,.25),0 0 0 8px rgba(244,168,29,.16)}
/* sticky-nav condenses slightly once you scroll into content */
.nav-in{transition:height .28s var(--ease)}
header.nav.scrolled .nav-in{height:60px}

/* ============================================================
   RIZZ v2b (2026-07-26) — premium detail polish (CSS only).
   ============================================================ */
/* amber CTA gets real dimensionality (lit top edge, grounded border) */
.btn-primary,.btn-ondark{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(16,21,27,.12);border-color:var(--amber-600)}
.btn-primary:hover,.btn-ondark:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -4px rgba(180,116,10,.4)}
/* branded selection + caret */
::selection{background:var(--petrol);color:#F6F4EF}
::-moz-selection{background:var(--petrol);color:#F6F4EF}
.app ::selection,.cta ::selection,.live-demo ::selection,footer ::selection,.proof ::selection{background:var(--amber);color:var(--ink)}
.field input,.field textarea,.gate input,.formcard input,.formcard textarea{caret-color:var(--amber-700)}
/* calculator readouts become amber value chips that light while dragging */
.field label .v{font-feature-settings:"tnum";background:rgba(244,168,29,.12);border:1px solid rgba(244,168,29,.28);border-radius:6px;padding:2px 8px;line-height:1.5;transition:background .18s var(--ease),border-color .18s var(--ease)}
.field:focus-within label .v{background:rgba(244,168,29,.2);border-color:var(--amber-600)}
/* slider feels like an instrument: grab cursor + hover halo */
.field input[type=range]{cursor:grab}
.field input[type=range]:active{cursor:grabbing}
.field input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 2px 6px rgba(16,21,27,.25),0 0 0 6px rgba(244,168,29,.14)}
.field input[type=range]:hover::-moz-range-thumb{box-shadow:0 2px 6px rgba(16,21,27,.25),0 0 0 6px rgba(244,168,29,.14)}
/* valid-email affirmation (only after interaction, never scolds early) */
.field input:user-valid[type=email],.gate input:user-valid{border-color:var(--pos);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E9E6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.field input:not(:placeholder-shown):not(:focus){border-color:var(--petrol-400)}
/* on-brand scrollbar */
html{scrollbar-width:thin;scrollbar-color:rgba(11,74,79,.5) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:rgba(11,74,79,.45);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--petrol)}
::-webkit-scrollbar-track{background:transparent}
/* embossed credential seals + tabular credential numbers */
.seal{background:linear-gradient(160deg,var(--petrol-600),var(--petrol));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.18)}
.seal-degree{background:linear-gradient(160deg,#232B34,var(--ink))}
.cred-id,.verifyline b{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
/* reduced-motion: neutralize slider-thumb transitions (not covered by the * reset) */
@media(prefers-reduced-motion:reduce){.field input[type=range]::-webkit-slider-thumb,.field input[type=range]::-moz-range-thumb{transition:none}}

/* --- hero credential chips (replaces the dotted eyebrow line) --- */
.hero-creds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.hero-creds span{font-family:'Geist Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-800);background:rgba(244,168,29,.09);border:1px solid rgba(244,168,29,.3);border-radius:999px;padding:6px 12px;line-height:1;transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease)}
.hero-creds span:hover{border-color:var(--amber-600);background:rgba(244,168,29,.15);transform:translateY(-1px)}

/* --- longer wordmark ("State 28 Insurance & Safety"): fit the brand lockup on small screens --- */
@media(max-width:560px){
  .brand{font-size:15px;letter-spacing:-.012em;gap:7px}
  .brand .mark{height:30px}
}
@media(max-width:360px){
  .brand{font-size:13.5px}
  .brand .mark{height:27px}
}

/* --- desktop nav fit with longer wordmark --- */
.brand{white-space:nowrap}
.nav-phone,.nav-cta .btn{white-space:nowrap}
@media(min-width:1201px) and (max-width:1360px){.nav-links{gap:20px}}
.nav-links a{white-space:nowrap}