/* Foyer & Co. — "drafting table" look.
   Layout concept: the site reads like a marked-up floor plan. Rooms are drawn in
   blueprint blue, the walkthrough route is the amber line, and every call to action
   is that same amber, so the eye always knows where to go next.
   One committed light look (by choice), with one ink band for contrast. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-var.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/hanken-grotesk-var.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format('woff2')}

:root{
  /* Color: drafting paper, ink, blueprint line, route amber */
  --paper:#f2f4f3;        /* page ground */
  --sheet:#ffffff;        /* cards, form surfaces */
  --ink:#14212b;          /* text (15.0:1 on paper), dark band ground */
  --ink-soft:#4a5862;     /* secondary text (7.0:1 on paper) */
  --rule:#d4dbdf;         /* hairlines */
  --rule-strong:#9fb0ba;  /* input borders (3.1:1 non-text) */
  --plan:#245a8c;         /* blueprint blue: plan lines, links (6.8:1 on paper) */
  --plan-wash:#e4edf4;
  --signal:#f6a91c;       /* route + primary actions, always with ink text (9.3:1) */
  --signal-wash:#fff3dc;
  --ok:#1d7349;
  --bad:#b3261e;
  /* Ink band */
  --band-text:#eef2f4;
  --band-soft:#b4c2ca;
  --band-rule:rgba(238,242,244,.16);
  /* Type */
  --display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --step--1:clamp(.8rem,.78rem + .1vw,.86rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --step-1:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --step-2:clamp(1.45rem,1.25rem + .9vw,1.95rem);
  --step-3:clamp(1.9rem,1.5rem + 1.9vw,2.9rem);
  --step-4:clamp(2.5rem,1.7rem + 3.6vw,4.6rem);
  --gutter:clamp(16px,4vw,40px);
  --maxw:1200px;
  --radius:8px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
a{color:var(--plan);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ink);text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;font-stretch:108%;line-height:1.04;letter-spacing:-.02em;text-wrap:balance;margin:0;color:var(--ink)}
h1{font-size:var(--step-4);font-weight:800;font-stretch:112%;letter-spacing:-.035em}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-stretch:100%;letter-spacing:-.01em;line-height:1.25}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:3px solid var(--plan);outline-offset:3px;border-radius:3px}
::selection{background:var(--signal);color:var(--ink)}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--sheet);padding:10px 16px;font-weight:700;border-radius:var(--radius);text-decoration:none}
.skip:focus{top:12px;color:var(--sheet)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:var(--step--1);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--plan);display:flex;gap:.6em;align-items:center}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--signal);flex:none}
.lede{font-size:var(--step-1);color:var(--ink-soft);max-width:44ch;line-height:1.5}
.muted{color:var(--ink-soft)}
.mono{font-family:var(--mono)}
.tabnum{font-variant-numeric:tabular-nums}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(242,244,243,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:baseline;gap:.18em;font-family:var(--display);font-weight:800;font-stretch:118%;letter-spacing:-.03em;font-size:1.35rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .amp{color:var(--plan);font-weight:500;font-stretch:90%}
.brand:hover{color:var(--ink)}
.nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}
.nav ul{display:flex;gap:clamp(12px,2vw,26px);list-style:none;margin:0;padding:0}
.nav a:not(.btn){color:var(--ink-soft);text-decoration:none;font-size:.95rem;font-weight:500}
.nav a:not(.btn):hover,.nav a[aria-current="page"]{color:var(--ink)}
.menu-btn{display:none;background:var(--sheet);border:1px solid var(--rule-strong);color:var(--ink);border-radius:var(--radius);padding:8px 14px;font:600 .9rem var(--body);cursor:pointer;min-height:42px}
@media (max-width:960px){
  .menu-btn{display:inline-flex;align-items:center}
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--sheet);border-bottom:1px solid var(--rule);padding:8px var(--gutter) 16px;box-shadow:0 18px 30px -20px rgba(20,33,43,.35)}
  .nav ul.open{display:flex}
  .nav ul a{display:block;padding:12px 0;font-size:1.05rem;border-bottom:1px solid var(--rule)}
  .nav .btn-sm{display:none}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:.8em 1.4em;border-radius:var(--radius);font:700 1rem/1.2 var(--body);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn-primary{background:var(--signal);color:var(--ink);box-shadow:0 1px 0 rgba(20,33,43,.25),0 8px 20px -10px rgba(246,169,28,.9)}
.btn-primary:hover{background:#ffb935;color:var(--ink);box-shadow:0 1px 0 rgba(20,33,43,.25),0 12px 26px -10px rgba(246,169,28,1)}
.btn-ghost{background:var(--sheet);color:var(--ink);border-color:var(--rule-strong)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:42px;padding:.55em 1.05em;font-size:.92rem}
.btn svg{width:18px;height:18px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Offer bar */
.offer-bar{background:var(--ink);color:var(--band-text);font-size:.92rem}
.offer-bar .wrap{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center;align-items:center;padding-block:9px;text-align:center}
.offer-bar strong{color:var(--signal)}
.offer-bar a{color:var(--band-text);font-weight:700}
.offer-bar a:hover{color:var(--signal)}

/* Hero */
.hero{padding-block:clamp(36px,6vw,84px) clamp(48px,7vw,96px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy{display:grid;gap:22px;min-width:0}
.hero h1 em{font-style:normal;color:var(--plan);text-decoration:underline dashed var(--signal);text-decoration-thickness:.09em;text-underline-offset:.14em}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:var(--step--1);color:var(--ink-soft)}
.hero-facts li{display:flex;align-items:center;gap:8px}
.hero-facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px var(--signal-wash)}
@media (max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr)}}

/* Quick start: listing link */
.quick{display:grid;gap:10px;background:var(--sheet);border:1px solid var(--rule);border-radius:calc(var(--radius) + 4px);padding:16px;box-shadow:0 20px 40px -28px rgba(20,33,43,.45)}
.quick label{font-weight:700}
.quick-row{display:flex;gap:10px;flex-wrap:wrap}
.quick-row input{flex:1 1 240px;min-width:0}
.quick-row .btn{flex:0 0 auto}
.quick-alt{font-size:var(--step--1);color:var(--ink-soft)}

/* Plan board (hero visual) */
.viewfinder{position:relative;min-width:0;display:grid;gap:14px}
.plan-board{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:clamp(12px,2vw,20px);box-shadow:0 30px 60px -40px rgba(20,33,43,.55)}
.plan{width:100%;height:auto}
.plan-grid path{stroke:var(--plan-wash);stroke-width:1;fill:none}
.plan-walls path{fill:none;stroke:var(--plan);stroke-width:6;stroke-linecap:square}
.plan-walls .door{stroke-width:1.5;stroke-dasharray:4 4}
.plan-walls .win{stroke:#9cc0de;stroke-width:6}
.plan-walls .fixture{fill:var(--plan-wash);stroke:var(--plan);stroke-width:1.5}
.plan-labels text{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em;fill:var(--ink)}
.plan-labels .dim{font-weight:400;letter-spacing:.02em;fill:var(--ink-soft);font-size:12px}
.route{fill:none;stroke:var(--signal);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.012 .012}
.cams circle{fill:var(--ink);stroke:var(--signal);stroke-width:3}
.cams text{fill:#fff;font-family:var(--mono);font-size:14px;font-weight:500;text-anchor:middle}
@media (prefers-reduced-motion:no-preference){
  .route{animation:walk 2.4s linear infinite}
  .cam{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * .18s + .2s);transform-box:fill-box;transform-origin:center}
}
@keyframes walk{to{stroke-dashoffset:-.048}}
@keyframes pop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.plan-board .vf-player{margin:-5% 0 0 30%;position:relative;z-index:2;border:4px solid var(--sheet);box-shadow:0 24px 48px -24px rgba(20,33,43,.7)}
@media (max-width:560px){.plan-board .vf-player{margin:-4% 0 0 10%}}
.vf-caption{font-size:var(--step--1);color:var(--ink-soft)}
.vf-caption span{font-weight:700;color:var(--ink)}

/* Video player (example video) */
.player{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--ink);border-radius:10px;overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-facade{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:12px;background:var(--ink);color:#fff;border:0;cursor:pointer;font:inherit;padding:16px;text-align:center}
.player-facade .vf-scene{position:absolute;inset:0;width:100%;height:100%}
.player-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player-facade .yt-poster{opacity:0;transition:opacity .4s}
.player-facade .yt-poster.loaded{opacity:1}
.player-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,33,43,0) 40%,rgba(20,33,43,.75) 100%);pointer-events:none}
.player-facade .play{position:relative;z-index:2;width:72px;height:72px;border-radius:50%;background:var(--signal);display:grid;place-items:center;transition:transform .2s;box-shadow:0 0 0 8px rgba(246,169,28,.25)}
.player-facade:hover .play{transform:scale(1.07)}
.player-facade .play svg{width:28px;height:28px;margin-left:4px;color:var(--ink)}
.player-facade .label{position:relative;z-index:2;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.player-facade .note{position:relative;z-index:2;font-size:var(--step--1);max-width:44ch}

/* Proof strip */
.proof{border-block:1px solid var(--rule);background:var(--sheet)}
.proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-block:26px}
.proof-grid .eyebrow::before{display:none}
.proof-grid p{font-weight:700;margin-top:4px}
@media (max-width:760px){.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Uses strip */
.uses{padding-block:clamp(28px,4vw,44px)}
.uses .wrap{display:grid;gap:16px}
.uses h2{font-size:var(--step--1);font-weight:500}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:.5em 1.05em;border:1px solid var(--rule-strong);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;background:var(--sheet);transition:border-color .15s ease,background-color .15s ease}
.chips a:hover{border-color:var(--signal);background:var(--signal-wash)}

/* Sections */
section{scroll-margin-top:84px}
.band{padding-block:clamp(64px,9vw,120px)}
.band + .band{border-top:1px solid var(--rule)}
.band-alt{background:var(--sheet)}
.band-ink{background:var(--ink);color:var(--band-text);border-top:0!important}
.band-ink + .band{border-top:0}
.band-ink h2,.band-ink h3{color:var(--band-text)}
.band-ink .eyebrow{color:var(--signal)}
.band-ink .section-head p:not(.eyebrow){color:var(--band-soft)}
.section-head{display:grid;gap:16px;margin-bottom:clamp(32px,5vw,56px);max-width:760px}
.section-head p:not(.eyebrow){color:var(--ink-soft);font-size:var(--step-1);line-height:1.5}
.story-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:760px){.story-grid{grid-template-columns:minmax(0,1fr)}}
.story{max-width:62ch;font-size:var(--step-1);line-height:1.55}

/* Steps: a real sequence, so numbering is information */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,28px);counter-reset:step;list-style:none;margin:0;padding:0}
.steps li{display:grid;gap:12px;align-content:start;padding:clamp(20px,3vw,28px);background:var(--sheet);border:1px solid var(--rule);border-radius:12px;min-width:0;position:relative}
.steps li::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font:500 1rem var(--mono);box-shadow:0 0 0 4px var(--signal)}
.steps p{color:var(--ink-soft)}
.steps-cta{margin-top:clamp(24px,3vw,36px)}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Feature list */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,20px)}
.feature{padding:clamp(20px,3vw,28px);display:grid;gap:10px;align-content:start;min-width:0;border-top:2px solid var(--ink)}
.feature svg{width:30px;height:30px;color:var(--plan)}
.feature p{color:var(--ink-soft)}
@media (max-width:900px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.features{grid-template-columns:minmax(0,1fr)}}

/* Compare (on the ink band) */
.compare-wrap{overflow-x:auto}
.compare{width:100%;min-width:560px;border-collapse:collapse}
.compare th,.compare td{padding:16px 14px;text-align:left;border-bottom:1px solid var(--band-rule);vertical-align:top}
.compare thead th{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--band-soft);font-weight:500}
.compare thead th:last-child{color:var(--signal)}
.compare tbody th{font-weight:700;color:var(--band-text)}
.compare td{color:var(--band-soft)}
.compare td:last-child{color:var(--band-text);font-weight:600}
.band-ink .compare-wrap:focus-visible{outline-color:var(--signal)}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:900px){.pricing-grid{grid-template-columns:minmax(0,1fr)}}
.calc{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:clamp(20px,3vw,36px);display:grid;gap:22px;box-shadow:0 30px 60px -44px rgba(20,33,43,.6)}
.band-alt .calc{background:var(--paper)}
.calc label,.calc legend{font-weight:700}
.calc-out{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.calc-price{font-family:var(--display);font-weight:800;font-stretch:112%;letter-spacing:-.04em;font-size:clamp(3rem,2rem + 4vw,4.6rem);line-height:1;color:var(--ink)}
.calc-sqft{font-family:var(--mono);font-size:1.05rem;color:var(--plan)}
input[type="range"]{width:100%;accent-color:var(--signal);height:32px;cursor:pointer}
.range-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--step--1);color:var(--ink-soft);margin-top:-6px}
.sqft-input{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sqft-input label{flex-basis:100%}
.calc .sqft-input input{width:11ch}
.addons{border:0;margin:0;padding:0;display:grid;gap:10px}
.addons legend{margin-bottom:6px}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:400}
.field .check{font-weight:400}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--plan);flex:none}
.calc-note{font-size:var(--step--1);color:var(--ink-soft)}
.offer{display:grid;gap:10px;border:1.5px dashed var(--signal);background:var(--signal-wash);border-radius:var(--radius);padding:18px 20px}
.offer strong{color:var(--ink)}
.price-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.price-table th,.price-table td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--rule)}
.price-table th{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.price-table td:last-child,.price-table th:last-child{text-align:right;font-weight:700}

/* Audience tabs */
.tabs{display:grid;gap:24px}
.tablist{display:flex;flex-wrap:wrap;gap:8px}
.tablist [role="tab"]{background:var(--sheet);color:var(--ink-soft);border:1px solid var(--rule-strong);border-radius:999px;padding:10px 18px;font:600 .95rem var(--body);cursor:pointer;min-height:44px}
.tablist [role="tab"]:hover{color:var(--ink);border-color:var(--ink)}
.tablist [role="tab"][aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabpanel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start;background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:clamp(20px,3.5vw,40px)}
.tabpanel h3{font-size:var(--step-2);font-stretch:108%}
.tabpanel ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;color:var(--ink-soft)}
.tabpanel li{display:flex;gap:10px}
.tabpanel li::before{content:"";flex:none;width:8px;height:8px;margin-top:.6em;border-radius:50%;background:var(--signal)}
.tabpanel p a{display:inline-block;padding-block:6px;font-weight:700}
@media (max-width:760px){.tabpanel{grid-template-columns:minmax(0,1fr)}}

/* FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--rule);max-width:860px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-weight:700;font-size:var(--step-1);position:relative;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:15px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--plan-wash);color:var(--plan);font:500 1.3rem/1 var(--mono);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--ink-soft);max-width:68ch}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.contact-aside{display:grid;gap:24px}
.contact-card{display:grid;gap:8px;padding:20px;border:1px solid var(--rule);border-radius:12px;background:var(--paper)}
.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.email-text{font-family:var(--mono);font-size:1.05rem;color:var(--ink);user-select:all;word-break:break-all}
.copy-btn{background:var(--sheet);border:1px solid var(--rule-strong);color:var(--ink);border-radius:var(--radius);padding:6px 12px;font:500 .85rem var(--mono);cursor:pointer;min-height:36px}
.copy-btn:hover{border-color:var(--ink)}

/* Forms */
form.inquiry{display:grid;gap:18px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:clamp(20px,3vw,36px)}
.field{display:grid;gap:6px;min-width:0}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:560px){.field-row{grid-template-columns:minmax(0,1fr)}}
.field label{font-weight:700}
.hint{font-size:var(--step--1);color:var(--ink-soft);font-weight:400}
.req{color:var(--bad)}
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="url"],select,textarea{width:100%;background:var(--sheet);color:var(--ink);border:1.5px solid var(--rule-strong);border-radius:var(--radius);padding:12px 14px;font:inherit;min-height:50px}
textarea{min-height:130px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(36,90,140,.35);outline-offset:0;border-color:var(--plan)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--bad)}
::placeholder{color:#6c7a83;opacity:1}
.error{color:var(--bad);font-size:var(--step--1);font-weight:600}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{border-radius:var(--radius);padding:14px 16px;font-weight:600}
.form-status.ok{background:#e5f3ea;border:1px solid #9ccbb0;color:var(--ink)}
.form-status.bad{background:#fbe9e7;border:1px solid #e4a59f;color:var(--ink)}
.fine{font-size:var(--step--1);color:var(--ink-soft)}

/* Order page */
.order-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,370px);gap:clamp(24px,4vw,56px);align-items:start;padding-block:clamp(32px,5vw,56px)}
@media (max-width:900px){.order-wrap{grid-template-columns:minmax(0,1fr)}}
form.order{display:grid;gap:20px;min-width:0}
.step{border:1px solid var(--rule);border-radius:14px;background:var(--sheet);margin:0;padding:clamp(18px,3vw,30px);display:grid;gap:18px;min-width:0}
.step > legend{float:left;width:100%;padding:0;margin:0 0 4px;font-family:var(--display);font-weight:700;font-stretch:106%;letter-spacing:-.015em;font-size:var(--step-1);display:flex;align-items:center;gap:12px}
.step > legend + *{clear:both}
.step-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font:500 .95rem var(--mono);flex:none;box-shadow:0 0 0 3px var(--signal)}
.sub{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.sub > legend{font-weight:700;padding:0;margin-bottom:8px}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.choices-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.choices-3{grid-template-columns:minmax(0,1fr)}}
.choice{position:relative;display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--rule);border-radius:var(--radius);background:var(--paper);cursor:pointer;font-weight:600;line-height:1.35;transition:border-color .15s ease,background-color .15s ease}
.choice input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--plan);flex:none}
.choice small{display:block;color:var(--ink-soft);font-weight:400;font-size:var(--step--1);margin-top:2px}
.choice:hover{border-color:var(--rule-strong)}
.choice:has(input:checked){border-color:var(--plan);background:var(--plan-wash)}
.choice:has(input:focus-visible){outline:3px solid rgba(36,90,140,.35);outline-offset:2px}
.choice input:focus-visible{outline:none}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-soft);font:var(--step--1)/1 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}
.field.lead input{border-color:var(--plan);background:var(--sheet)}
.summary{position:sticky;top:96px}
@media (max-width:900px){.summary{position:static}}
.summary-card{background:var(--sheet);border:1px solid var(--rule);border-top:4px solid var(--signal);border-radius:14px;padding:clamp(20px,3vw,28px);display:grid;gap:16px;box-shadow:0 30px 60px -44px rgba(20,33,43,.6)}
.summary-card .eyebrow::before{display:none}
.sum-lines{margin:0;display:grid;gap:8px}
.sum-lines div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--rule);padding-bottom:8px}
.sum-lines dt{color:var(--ink-soft)}
.sum-lines dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sum-total span{font-weight:700}
.sum-total output{font-family:var(--display);font-weight:800;font-stretch:112%;letter-spacing:-.04em;font-size:clamp(2.4rem,2rem + 2vw,3.2rem);line-height:1;color:var(--ink)}
.summary .btn{width:100%}
.assure{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--rule);display:grid;gap:8px;font-size:var(--step--1);color:var(--ink-soft)}
.assure li{display:flex;gap:8px}
.assure li::before{content:"✓";color:var(--ok);font-weight:700}

/* Thank-you pages */
.done{display:grid;gap:22px;max-width:720px;padding-block:clamp(48px,8vw,96px)}
.done ol{margin:0;padding-left:1.3em;display:grid;gap:10px;color:var(--ink-soft)}

/* CTA box */
.cta-box{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:28px;align-items:center;padding:clamp(28px,5vw,56px);border-radius:16px;background:var(--ink);color:var(--band-text)}
.cta-box h2{color:var(--band-text)}
.cta-box .muted{color:var(--band-soft)}
.cta-box .btn-ghost{background:transparent;color:var(--band-text);border-color:var(--band-rule)}
.cta-box .btn-ghost:hover{border-color:var(--band-text)}
@media (max-width:760px){.cta-box{grid-template-columns:minmax(0,1fr)}}

/* Footer */
.site-footer{background:var(--sheet);border-top:1px solid var(--rule);padding-block:48px 96px;color:var(--ink-soft);font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
.footer-grid h2{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;font-weight:500;font-stretch:100%}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-grid a{color:var(--ink-soft);text-decoration:none}
.footer-grid a:hover{color:var(--ink);text-decoration:underline}
.footer-base{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:var(--step--1)}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.footer-grid{grid-template-columns:minmax(0,1fr)}}

/* Mobile sticky CTA */
.mobile-cta{display:none}
@media (max-width:760px){
  .mobile-cta{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);border-top:1px solid var(--rule);backdrop-filter:blur(8px);box-shadow:0 -10px 30px -20px rgba(20,33,43,.5)}
  .mobile-cta .btn{flex:1;min-height:46px;padding-inline:.6em;font-size:.95rem}
}

/* Long-form pages (legal, service) */
.page-hero{padding-block:clamp(44px,7vw,84px) clamp(28px,4vw,48px);border-bottom:1px solid var(--rule);background:var(--sheet)}
.page-hero .wrap{display:grid;gap:18px}
.prose{max-width:72ch;padding-block:clamp(36px,5vw,64px)}
.prose h2{font-size:var(--step-2);margin:2.2em 0 .6em}
.prose h3{margin:1.6em 0 .4em}
.prose p,.prose ul,.prose ol{margin:0 0 1em;color:#2b3a45}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:.4em}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.95rem}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:10px 8px;text-align:left;vertical-align:top}
.prose th{color:var(--ink)}
.prose .table-wrap{overflow-x:auto}
.prose .notice{border-left:4px solid var(--signal);background:var(--sheet);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;color:var(--ink)}
.updated{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-soft)}
.crumbs{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .site-header,.mobile-cta,.site-footer,.viewfinder{display:none}
  body{background:#fff;color:#000}
}
.h3,h2.h3{font-size:var(--step-1);font-stretch:100%;letter-spacing:-.01em;line-height:1.25}
.hero h1{font-size:clamp(2.5rem,1.2rem + 3.6vw,4.25rem)}