/* B&G Solutions — v4. Editorial build after the owner's reference. Brand navy/blue/gold from DESIGN.md. */
:root{
  --navy:#001f3f; --navy-deep:#00152a; --navy-ink:#0b1b33; --blue:#0074d9; --gold:#d4a843;
  --paper:#ffffff; --mist:#f4f6f9; --line:#e3e7ee; --ink:#0b1b33; --mute:#5b6779; --soft:#9aa5b5;
  --sans:"Inter Tight",Inter,system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --m:clamp(20px,2.6vw,40px);
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1);
}
*{box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:2px;font:500 15px/1 var(--sans);cursor:pointer;border:0;transition:background-color .3s var(--ease),color .3s var(--ease),transform .2s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--blue)}
.btn-white{background:#fff;color:var(--navy)}.btn-white:hover{background:var(--gold)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.btn-ghost:hover{background:var(--ink);color:#fff}
.arrow{width:14px;height:14px;transition:transform .35s var(--ease)}
a:hover .arrow,button:hover .arrow{transform:translateX(4px)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px var(--m);color:#fff;transition:background-color .5s var(--ease),color .5s var(--ease),transform .6s var(--ease),padding .5s var(--ease)}
.nav.solid{background:rgba(255,255,255,.96);color:var(--ink);padding:14px var(--m);box-shadow:0 1px 0 var(--line)}
.nav.hide{transform:translateY(-100%)}
.logo{font-size:22px;font-weight:600;letter-spacing:-.02em}
.logo em{font-size:25px;margin-left:2px}
.links{display:flex;gap:34px;font-size:14px;font-weight:500}
.links a{position:relative;opacity:.9}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-r{justify-self:end;display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.nav .btn{height:40px;padding:0 18px;font-size:14px}
.nav:not(.solid) .btn{background:#fff;color:var(--navy)}
.menu{display:none;background:none;border:0;color:inherit;font:500 14px var(--sans);cursor:pointer}

/* hero */
.hero{position:relative;height:100svh;min-height:680px;overflow:hidden;color:#fff;background:var(--navy-deep)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2.4s var(--ease)}
.loaded .hero-media img{transform:scale(1.02)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,15,32,.62) 0%,rgba(0,15,32,.18) 55%,rgba(0,15,32,0) 100%),linear-gradient(0deg,rgba(0,15,32,.55) 0%,rgba(0,15,32,0) 45%)}
.hero-copy{position:absolute;z-index:2;left:var(--m);bottom:clamp(36px,6vh,64px);max-width:min(780px,70vw)}
.hero h1{font-size:clamp(52px,7.4vw,118px);font-weight:500;letter-spacing:-.045em;line-height:.94}
.hero h1 em{font-size:1.08em;letter-spacing:-.02em}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line > span{display:block;transform:translateY(105%);transition:transform 1.3s var(--ease)}
.loaded .line > span{transform:none}
.loaded .line:nth-child(2) > span{transition-delay:.1s}.loaded .line:nth-child(3) > span{transition-delay:.2s}
.hero-sub{margin-top:26px;max-width:40ch;font-size:16px;color:rgba(255,255,255,.86);transform:translateY(12px);transition:transform 1s var(--ease) .55s}
.loaded .hero-sub{opacity:1;transform:none}
.hero-card{position:absolute;z-index:2;right:var(--m);bottom:clamp(36px,6vh,64px);width:300px;background:rgba(0,21,42,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px;color:#fff;opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease) .8s,transform 1s var(--ease) .8s}
.loaded .hero-card{opacity:1;transform:none}
.hero-card .row{display:flex;gap:14px;align-items:center}
.hero-card img{width:96px;height:72px;object-fit:cover}
.hero-card small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:4px}
.hero-card p{font-size:14px;line-height:1.35}
.hero-card .btn{width:100%;margin-top:14px;height:42px}
.scroll-cue{position:absolute;z-index:2;left:50%;bottom:22px;width:1px;height:46px;background:rgba(255,255,255,.25);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:#fff;animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{to{top:100%}}

/* statement */
.what{padding:clamp(120px,18vh,200px) var(--m);text-align:center}
.what .kicker{margin-bottom:34px}
.what p.big{max-width:1080px;margin:0 auto;font-size:clamp(30px,3.7vw,58px);font-weight:400;letter-spacing:-.035em;line-height:1.16}
.what p.big .w{color:#c9d0da;transition:color .4s ease}
.what p.big .w.on{color:var(--ink)}
.what p.big em .w,.what p.big .w em{font-size:1.06em}
.chip{display:inline-block;width:1.9em;height:1.12em;vertical-align:-.16em;margin:0 .1em;border-radius:3px;overflow:hidden;clip-path:inset(0 50% 0 50% round 3px);transition:clip-path 1.1s var(--ease)}
.chip.on{clip-path:inset(0 0 0 0 round 3px)}
.chip img{width:100%;height:100%;object-fit:cover}

/* who we answer for */
.serve{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,90px);padding:0 var(--m) clamp(120px,16vh,180px);align-items:start}
.serve h2{font-size:clamp(40px,4.4vw,68px);font-weight:400;letter-spacing:-.04em;line-height:1}
.serve-list{margin-top:48px;border-top:1px solid var(--line)}
.serve-list a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:500;transition:color .3s ease,padding .45s var(--ease)}
.serve-list a span:last-child{display:flex;gap:18px;align-items:center;font-size:14px;color:var(--mute);font-weight:400}
.serve-list a:hover,.serve-list a.on{padding-left:12px}
.serve-list a.on{color:var(--ink)}
.serve-list:hover a:not(:hover){color:var(--soft)}
.serve-note{margin-top:34px;font-size:15px;color:var(--mute);max-width:36ch}
.serve-note + .btn{margin-top:22px}
.serve-media{position:sticky;top:110px;aspect-ratio:4/5;max-height:80vh;overflow:hidden;background:var(--mist)}
.serve-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.serve-media img.on{opacity:1;transform:scale(1)}
.serve-media .tag{position:absolute;left:16px;bottom:16px;background:#fff;padding:8px 12px;font-size:13px;font-weight:500;z-index:2}

/* promises band */
.band{background:var(--navy);color:#fff;padding:clamp(110px,15vh,170px) var(--m) clamp(90px,12vh,140px);text-align:center}
.band .kicker{color:rgba(255,255,255,.6)}
.band h2{margin:22px auto 0;max-width:820px;font-size:clamp(36px,3.8vw,58px);font-weight:400;letter-spacing:-.035em;line-height:1.08}
.figs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(64px,9vh,100px)}
.fig{padding:44px 20px;border-left:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.fig:nth-child(3n+1){border-left:0}
.fig:nth-child(n+4){border-bottom:0}
.fig b{display:block;font-size:clamp(44px,4.6vw,72px);font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fig span{display:block;margin-top:14px;font-size:14px;color:rgba(255,255,255,.66)}

/* night slider */
.night{position:relative;height:110svh;min-height:760px;overflow:hidden;color:var(--ink)}
.night-bg{position:absolute;inset:-6% 0;}
.night-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.1s var(--ease),transform 2.2s var(--ease)}
.night-bg img.on{opacity:1;transform:scale(1)}
.night-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 40px));background:#fff;padding:34px 30px 26px;text-align:center}
.night-card h2{margin-top:12px;font-size:40px;font-weight:400;letter-spacing:-.035em;line-height:1}
.night-card .trade{margin-top:8px;font-size:15px;color:var(--mute)}
.night-card .thumb{margin:20px auto 0;width:100%;aspect-ratio:16/9;overflow:hidden}
.night-card .thumb img{width:100%;height:100%;object-fit:cover}
.calls{margin-top:18px;text-align:left}
.calls div{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.calls div:last-child{border-bottom:1px solid var(--line)}
.calls i{font-style:normal;color:var(--mute);font-variant-numeric:tabular-nums;font-size:13px}
.calls b{font-weight:500}
.calls u{text-decoration:none;font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap}
.calls u.urgent{color:#b45309}
.slide-ctl{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:20px;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.slide-ctl button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .3s,border-color .3s}
.slide-ctl button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.slide-ctl span b{color:var(--ink);font-weight:600}
.fadeswap{animation:fs .7s var(--ease) both}
@keyframes fs{from{opacity:0;transform:translateY(10px)}}

/* prices */
.prices{padding:clamp(120px,16vh,180px) var(--m)}
.prices-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.prices-head h2{font-size:clamp(40px,4.4vw,68px);font-weight:400;letter-spacing:-.04em;line-height:1}
.prices-head p{max-width:40ch;color:var(--mute);font-size:15px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px}
.tabs button{height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 14px var(--sans);color:var(--mute);cursor:pointer;transition:all .3s var(--ease)}
.tabs button:hover{border-color:var(--ink);color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.plans{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plan{padding:34px 34px 38px;display:flex;flex-direction:column;gap:12px}
.plan:first-child{padding-left:0}.plan:last-child{padding-right:0}
.plan + .plan{border-left:1px solid var(--line)}
.plan .pn{font-size:14px;font-weight:600;display:flex;justify-content:space-between}
.plan .pn em{font-size:16px;color:var(--gold)}
.plan .pp{font-size:clamp(46px,4.4vw,66px);font-weight:300;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.plan .pp small{font-size:14px;font-weight:400;letter-spacing:0;color:var(--mute);margin-left:6px}
.plan .pnote{font-size:14px;color:var(--mute);min-height:44px}
.plan ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1;font-size:15px}
.plan li{display:flex;gap:10px;line-height:1.4}
.plan li::before{content:"";flex:none;width:5px;height:5px;margin-top:.55em;border-radius:50%;background:var(--ink)}
.plan .btn{align-self:flex-start;margin-top:22px}
.quote{grid-column:1/-1;padding:44px 0;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.quote p{max-width:30ch;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;line-height:1.15}
.extras{display:grid;grid-template-columns:5fr 7fr;gap:40px;margin-top:70px}
.extras h3{font-size:14px;font-weight:600}
.extras ul{list-style:none;margin:0;padding:0}
.extras li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.extras li:first-child{border-top:1px solid var(--line)}
.extras li b{font-weight:500;text-align:right}

/* about */
.about{text-align:center;padding:clamp(100px,14vh,160px) var(--m) clamp(70px,10vh,110px)}
.about h2{margin:22px auto 0;max-width:980px;font-size:clamp(32px,3.6vw,56px);font-weight:400;letter-spacing:-.035em;line-height:1.1}
.about p.sub{margin:26px auto 0;max-width:52ch;color:var(--mute);font-size:15px}
.about .btn{margin-top:30px}
.portrait{position:relative;height:96svh;overflow:hidden}
.portrait img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;will-change:transform}

/* steps */
.steps{padding:clamp(120px,16vh,180px) 0 clamp(120px,16vh,180px) var(--m)}
.steps-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding-right:var(--m);flex-wrap:wrap}
.steps-head h2{font-size:clamp(40px,4.4vw,68px);font-weight:400;letter-spacing:-.04em;line-height:1}
.steps-head p{max-width:34ch;color:var(--mute);font-size:15px}
.steps-row{display:flex;gap:14px;margin-top:56px;overflow-x:auto;scroll-snap-type:x mandatory;padding-right:var(--m);scrollbar-width:none}
.steps-row::-webkit-scrollbar{display:none}
.step{flex:0 0 min(30vw,440px);scroll-snap-align:start}
.step .ph{aspect-ratio:3/4;overflow:hidden;background:var(--mist)}
.step img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.step:hover img{transform:scale(1.05)}
.step h3{margin-top:18px;font-size:18px;font-weight:500;letter-spacing:-.01em}
.step p{margin-top:6px;font-size:14px;color:var(--mute);max-width:36ch}
.step .n{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--soft);margin-right:8px}

/* questions */
.faq{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,90px);padding:0 var(--m) clamp(120px,16vh,180px)}
.faq h2{font-size:clamp(40px,4.4vw,68px);font-weight:400;letter-spacing:-.04em;line-height:1}
.faq .q{border-bottom:1px solid var(--line)}
.faq .q:first-child{border-top:1px solid var(--line)}
.faq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;background:none;border:0;font:500 18px var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.faq .pm{flex:none;position:relative;width:14px;height:14px}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:0;right:0;top:6px;height:1.5px;background:var(--ink);transition:transform .45s var(--ease)}
.faq .pm::after{transform:rotate(90deg)}
.faq .open .pm::after{transform:rotate(0)}
.faq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq .open .a{grid-template-rows:1fr}
.faq .a > div{overflow:hidden}
.faq .a p{padding:0 0 22px;color:var(--mute);max-width:60ch;font-size:16px}

/* let's talk */
.talk{position:relative;display:grid;grid-template-columns:1fr minmax(0,620px) 1fr;min-height:100svh;background:#eef3f8}
.talk .side{position:relative;overflow:hidden}
.talk .side img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.talk .side.r img{transform:scaleX(-1)}
.talk .mid{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:80px 28px}
.talk h2{font-size:clamp(56px,6.6vw,104px);font-weight:400;letter-spacing:-.05em;line-height:.95}
.talk p{margin-top:24px;max-width:40ch;color:var(--mute);font-size:16px}
.talk .btn{margin-top:30px}

/* footer */
footer{background:var(--navy);color:rgba(255,255,255,.72);padding:80px var(--m) 0;overflow:hidden}
.f-top{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:30px;font-size:14px}
.f-top b{display:block;color:#fff;font-weight:500;margin-bottom:14px}
.f-top a,.f-top span{display:block;margin-bottom:8px}
.f-top a:hover{color:#fff}
.f-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:70px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.5)}
.f-mark{font-family:var(--serif);font-style:italic;color:#fff;font-size:31vw;line-height:.72;letter-spacing:-.04em;text-align:center;margin:40px 0 -.04em;white-space:nowrap}

/* dialog */
dialog{border:0;padding:0;width:min(520px,calc(100% - 32px));box-shadow:0 40px 100px rgba(0,15,32,.45)}
dialog::backdrop{background:rgba(0,15,32,.6);backdrop-filter:blur(4px)}
dialog[open]{animation:dlg .5s var(--ease)}
@keyframes dlg{from{opacity:0;transform:translateY(16px)}}
.dlg{padding:40px}
.dlg h3{font-size:36px;font-weight:400;letter-spacing:-.035em;line-height:1}
.dlg p{margin-top:12px;color:var(--mute);font-size:15px}
.dlg label{display:block;margin-top:20px;font-size:13px;color:var(--mute)}
.dlg input,.dlg select{width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);font:400 17px var(--sans);color:var(--ink);background:transparent;border-radius:0}
.dlg input:focus,.dlg select:focus{outline:0;border-color:var(--ink)}
.dlg .btn{width:100%;margin-top:30px}
.dlg .x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;background:var(--mist);border-radius:50%;font-size:20px;cursor:pointer}
.dlg-done{display:none}
.sent .dlg-form{display:none}.sent .dlg-done{display:block}

/* reveals */
.js [data-r]{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-r].in{opacity:1;transform:none}
.js [data-mask]{clip-path:inset(12% 0 0 0);transition:clip-path 1.4s var(--ease)}
.js [data-mask].in{clip-path:inset(0 0 0 0)}

/* responsive */
@media (max-width:1000px){
  .links{display:none}.menu{display:block}
  .nav{grid-template-columns:1fr auto}
  .serve,.faq{grid-template-columns:1fr}
  .serve-media{position:relative;top:0;order:-1;aspect-ratio:4/3}
  .figs{grid-template-columns:1fr 1fr}
  .fig:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.16)}
  .fig:nth-child(odd){border-left:0}
  .fig:nth-child(n+4){border-bottom:1px solid rgba(255,255,255,.16)}
  .fig:nth-child(n+5){border-bottom:0}
  .plans{grid-template-columns:1fr}
  .plan,.plan:first-child,.plan:last-child{padding:30px 0}
  .plan + .plan{border-left:0;border-top:1px solid var(--line)}
  .extras{grid-template-columns:1fr}
  .step{flex-basis:70vw}
  .talk{grid-template-columns:1fr}
  .talk .side{display:none}
  .f-top{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .nav-r .tel{display:none}
  .hero-copy{max-width:none;right:var(--m);bottom:200px}
  .hero-card{left:var(--m);right:var(--m);width:auto;bottom:24px}
  .hero-card img{width:72px;height:56px}
  .scroll-cue{display:none}
  .night-card{padding:26px 20px 20px}
  .night-card h2{font-size:32px}
  .calls div{grid-template-columns:54px 1fr;}
  .calls u{grid-column:2}
  .step{flex-basis:82vw}
  .portrait{height:70svh}
}
@media (prefers-reduced-motion:reduce){
  /* keep fades and text reveals; drop the long travel and the looping cue */
  .scroll-cue::after{animation:none}
  .hero-media img{transition-duration:.01ms}
}

/* Face-safe framing: one focus point per photo, applied wherever it is used
   (cards, chips, tiles, phone crops). Values place the face inside the narrowest crop. */
img[src$="v4/hero.jpg"]{object-position:84% 30%}
img[src$="v4/barber.jpg"]{object-position:72% 0%}
img[src$="v4/auto.jpg"]{object-position:45% 0%}
img[src$="v4/jewel.jpg"]{object-position:45% 0%}
img[src$="v4/hvac.jpg"]{object-position:45% 17%}
img[src$="v4/law.jpg"]{object-position:38% 0%}
img[src$="v4/clean.jpg"]{object-position:50% 0%}
img[src$="v4/owner.jpg"]{object-position:50% 12%}
img[src$="step-talk.jpg"]{object-position:62% 0%}
img[src$="step-live.jpg"]{object-position:35% 10%}
/* the owner portrait holds still so his head never leaves the frame */
.portrait img{top:0;height:100%}
/* owner 2026-11-01: in the Tonight's calls card, only the attorney is reframed; the HVAC and barber shots keep their original centred crop */
.night-card .thumb img[src$="v4/hvac.jpg"],.night-card .thumb img[src$="v4/barber.jpg"]{object-position:50% 50%}
/* owner 2026-11-01: taller picture in the Tonight's calls card */
.night-card .thumb{aspect-ratio:4/3}
/* owner 2026-11-01: the attorney sits higher in the card, showing more of her */
.night-card .thumb img[src$="v4/law.jpg"]{object-position:38% 28%}

/* ---- navigation: current section, phone menu ---- */
.links a.active{opacity:1}
.links a.active::after{transform:scaleX(1);transform-origin:left}
.menu{display:none;align-items:center;gap:10px;height:40px;padding:0 4px;background:none;border:0;color:inherit;font:500 14px var(--sans);cursor:pointer;position:relative;z-index:61}
.menu span{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.menu span + span{margin-top:-6px}
.menu{flex-direction:row}
.menu span{position:absolute;left:4px}
.menu span:first-child{top:16px}.menu span:nth-child(2){top:22px;margin:0}
.menu b{font-weight:500;margin-left:28px}
.sheet-open .menu span:first-child{transform:translateY(3px) rotate(45deg)}
.sheet-open .menu span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:49;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:110px var(--m) 36px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);visibility:hidden}
.sheet.open{clip-path:inset(0 0 0 0);visibility:visible}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{font-size:clamp(34px,9vw,52px);letter-spacing:-.04em;line-height:1.1;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.sheet.open nav a{opacity:1;transform:none}
.sheet.open nav a:nth-child(2){transition-delay:.05s}.sheet.open nav a:nth-child(3){transition-delay:.1s}.sheet.open nav a:nth-child(4){transition-delay:.15s}.sheet.open nav a:nth-child(5){transition-delay:.2s}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:15px}
.sheet-foot .btn{background:#fff;color:var(--navy)}
.sheet-open .nav{background:transparent!important;color:#fff!important;box-shadow:none!important}
.sheet-open .nav .nav-r > .btn,.sheet-open .nav .tel{visibility:hidden}
@media (max-width:1000px){.menu{display:inline-flex}.nav-r > .btn{display:none}}

/* ---- built around you ---- */
.tailor{padding:clamp(110px,15vh,170px) var(--m);background:var(--mist)}
.tailor-head{max-width:900px}
.tailor-head h2{margin-top:20px;font-size:clamp(36px,4vw,62px);font-weight:400;letter-spacing:-.04em;line-height:1.04}
.tailor-intro{margin-top:24px;max-width:56ch;color:var(--mute);font-size:16px}
.tailor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(56px,8vh,90px);border-top:1px solid var(--line)}
.tp{padding:30px 28px 10px 0}
.tp + .tp{padding-left:28px;border-left:1px solid var(--line)}
.tn{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--soft)}
.tp h3{margin-top:14px;font-size:19px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.tp p{margin-top:10px;font-size:15px;color:var(--mute)}

/* ---- one system ---- */
.flow{padding:clamp(110px,15vh,170px) var(--m)}
.flow-head{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:end}
.flow-head .kicker{grid-column:1/-1}
.flow-head h2{grid-column:1/8;font-size:clamp(40px,4.4vw,68px);font-weight:400;letter-spacing:-.04em;line-height:1}
.flow-head p:last-child{grid-column:9/13;color:var(--mute);font-size:15px}
.flow-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:clamp(60px,9vh,100px)}
.flow-line{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line)}
.flow-line i{position:absolute;inset:0;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform 2.2s var(--ease)}
.flow-track.in .flow-line i{transform:scaleX(1)}
.fs{position:relative;padding-top:34px}
.fs .dot{position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;background:#fff;border:1px solid var(--navy);transition:background-color .5s ease}
.flow-track.in .fs .dot{background:var(--navy)}
.flow-track.in .fs:nth-of-type(2) .dot{transition-delay:.55s}.flow-track.in .fs:nth-of-type(3) .dot{transition-delay:1.1s}.flow-track.in .fs:nth-of-type(4) .dot{transition-delay:1.65s}
.fk{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.fs h3{margin-top:12px;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.fs p{margin-top:10px;font-size:15px;color:var(--mute)}

/* ---- we answer you, too ---- */
.fast{background:var(--navy);color:#fff;padding:clamp(100px,14vh,160px) var(--m)}
.fast-in{max-width:1100px;margin:0 auto;text-align:center}
.fast .kicker{color:rgba(255,255,255,.6)}
.fast h2{margin:20px auto 0;max-width:820px;font-size:clamp(36px,4vw,62px);font-weight:400;letter-spacing:-.04em;line-height:1.05}
.fast-row{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(50px,7vh,80px) 0 50px;text-align:left}
.fast-row div{padding:0 28px;border-left:1px solid rgba(255,255,255,.16)}
.fast-row div:first-child{border-left:0;padding-left:0}
.fast-row b{display:block;font-size:19px;font-weight:500}
.fast-row span{display:block;margin-top:10px;font-size:15px;color:rgba(255,255,255,.7)}

@media (max-width:1000px){
  .tailor-grid{grid-template-columns:1fr 1fr}
  .tp:nth-child(3){padding-left:0;border-left:0}
  .tp:nth-child(n+3){border-top:1px solid var(--line)}
  .flow-head h2,.flow-head p:last-child{grid-column:1/-1}
  .flow-track{grid-template-columns:1fr 1fr;row-gap:44px}
  .flow-line{display:none}
  .fast-row{grid-template-columns:1fr;gap:28px}
  .fast-row div,.fast-row div:first-child{border-left:0;padding:0 0 24px;border-bottom:1px solid rgba(255,255,255,.16)}
}
@media (max-width:600px){
  .tailor-grid{grid-template-columns:1fr}
  .tp,.tp + .tp{padding:24px 0;border-left:0;border-top:1px solid var(--line)}
  .flow-track{grid-template-columns:1fr}
}

/* ---- how pricing works (curated: one starting price, plans described) ---- */
.from{display:flex;align-items:baseline;gap:14px;margin-top:48px;color:var(--mute);font-size:16px}
.from b{font-size:clamp(64px,7vw,110px);font-weight:300;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.pdesc{font-size:16px;color:var(--ink);line-height:1.45;min-height:48px}
.prices .plan{gap:16px}
.prices .plans{margin-top:44px}
.price-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:44px;padding:28px 32px;background:var(--mist)}
.price-cta p{font-size:18px;letter-spacing:-.01em}

/* ---- notes for owners (blog) ---- */
.field-notes{padding:clamp(110px,15vh,170px) var(--m) clamp(40px,6vh,70px)}
.fn-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.fn-head h2{margin-top:18px;font-size:clamp(40px,4.4vw,68px);font-weight:400;letter-spacing:-.04em;line-height:1}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px);margin-top:clamp(40px,6vh,64px)}
.post-grid.two{grid-template-columns:repeat(2,1fr)}
.post-card{display:block}
.pc-img{aspect-ratio:3/2;overflow:hidden;background:var(--mist)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post-card:hover .pc-img img{transform:scale(1.05)}
.pc-meta{display:block;margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.post-card h3{margin-top:10px;font-size:clamp(22px,1.9vw,28px);font-weight:400;letter-spacing:-.03em;line-height:1.15;transition:color .3s ease}
.post-card:hover h3{color:var(--blue)}
.post-card p{margin-top:10px;font-size:15px;color:var(--mute)}
/* blog pages: solid bar from the start */
.page .nav{background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 1px 0 var(--line);padding:14px var(--m)}
.page .nav .btn{background:var(--navy);color:#fff}
.blog-head{padding:clamp(150px,20vh,200px) var(--m) 0;max-width:1100px}
.blog-head h1,.post-head h1{margin-top:18px;font-size:clamp(46px,6vw,96px);font-weight:400;letter-spacing:-.045em;line-height:.98}
.blog-sub{margin-top:24px;max-width:56ch;color:var(--mute);font-size:17px}
.page .post-grid{padding:0 var(--m) clamp(110px,15vh,160px)}
.post-head{max-width:900px;margin:0 auto;padding:clamp(140px,18vh,180px) var(--m) 0}
.back{font-size:14px;color:var(--mute)}.back:hover{color:var(--ink)}
.post-dek{margin-top:22px;font-size:clamp(19px,1.6vw,23px);line-height:1.45;color:var(--ink);max-width:40em}
.post-meta{margin-top:18px;font-size:13px;color:var(--mute)}
.post-hero{margin:clamp(40px,6vh,64px) var(--m) 0;aspect-ratio:21/9;overflow:hidden}
.post-hero img{width:100%;height:100%;object-fit:cover}
.post-body{max-width:700px;margin:0 auto;padding:clamp(50px,7vh,80px) var(--m) clamp(80px,10vh,120px);font-size:18px;line-height:1.7;color:#1f2a3c}
.post-body h2{margin:48px 0 14px;font-size:28px;font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.post-body p{margin:0 0 18px}
.post-body ul{margin:0 0 22px;padding-left:22px}.post-body li{margin-bottom:8px}
.post-cta{margin-top:50px;padding:30px;background:var(--mist);display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.post-cta p{margin:0;font-size:17px;line-height:1.5}
.post-more{padding:clamp(70px,10vh,110px) 0 0;background:#fff;border-top:1px solid var(--line)}
.post-more h2{padding:0 var(--m);font-size:clamp(34px,3.6vw,52px);font-weight:400;letter-spacing:-.04em}
@media (max-width:1000px){.post-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.post-grid,.post-grid.two{grid-template-columns:1fr}.post-hero{aspect-ratio:4/3;margin:32px 0 0}.post-body{font-size:17px}}
/* article: answer-first box, Q&A, sources */
.answer{margin:0 0 34px;padding:24px 26px;background:var(--mist);border-left:3px solid var(--navy)}
.answer span{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.answer p{margin:0;font-size:19px;line-height:1.55;color:var(--ink)}
.post-body sup a{color:var(--blue);font-size:.75em;text-decoration:none;padding:0 1px}
.post-faq{margin-top:46px}
.qa-item{padding:18px 0;border-top:1px solid var(--line)}
.qa-item h3{font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
.qa-item p{margin:0;font-size:16px}
.post-sources{margin-top:46px;font-size:14px;color:var(--mute)}
.post-sources h2{font-size:18px!important;margin:0 0 10px!important}
.post-sources ol{padding-left:20px}.post-sources li{margin-bottom:6px;line-height:1.45}
.post-sources a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}

/* ---- everything we handle (home) ---- */
.handle{padding:clamp(100px,14vh,160px) var(--m) 0}
.handle-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.handle-head h2{margin-top:18px;font-size:clamp(40px,4.4vw,68px);font-weight:400;letter-spacing:-.04em;line-height:1}
.handle-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,6vh,64px);border-top:1px solid var(--line)}
.hd{display:flex;flex-direction:column;padding:30px 30px 34px 0;border-bottom:1px solid var(--line);transition:background-color .35s ease}
.hd:nth-child(3n+2),.hd:nth-child(3n+3){padding-left:30px;border-left:1px solid var(--line)}
.hd:hover{background:var(--mist)}
.hd-n{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--soft)}
.hd h3{margin-top:12px;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.hd p{margin-top:8px;font-size:15px;color:var(--mute);flex:1}
.hd-p{margin-top:18px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
a.ul{text-decoration:underline;text-underline-offset:3px}

/* ---- services and prices page ---- */
.svc-head{max-width:1200px}
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;max-width:1100px}
.legend p{margin-top:10px;font-size:14px;color:var(--mute);line-height:1.5}
.tag{display:inline-block;padding:5px 10px;font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.tag-fixed{background:#e8f1fb;color:var(--blue-deep,#0056a3)}
.tag-biz{background:#f6efdc;color:#7a5a12}
.tag-bespoke{background:var(--navy);color:#fff}
.svc-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.svc-jump a{padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;transition:all .3s var(--ease)}
.svc-jump a:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.svc-group{display:grid;grid-template-columns:4fr 8fr;gap:clamp(30px,5vw,80px);padding:clamp(80px,11vh,120px) var(--m) 0;scroll-margin-top:90px}
.svc-side h2{font-size:clamp(32px,3vw,46px);font-weight:400;letter-spacing:-.035em;line-height:1.05}
.svc-side p{margin-top:14px;font-size:15px;color:var(--mute);max-width:40ch}
.svc-img{margin-top:26px;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.svc-img img{width:100%;height:100%;object-fit:cover}
.svc-rows{border-top:1px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:1fr minmax(220px,auto);gap:30px;padding:24px 0;border-bottom:1px solid var(--line)}
.svc-name h3{font-size:20px;font-weight:500;letter-spacing:-.015em}
.svc-name p{margin-top:6px;font-size:15px;color:var(--mute);max-width:52ch}
.svc-price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.svc-price b{font-size:20px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.svc-bundle{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;margin:clamp(90px,12vh,130px) var(--m) clamp(90px,12vh,130px);padding:clamp(36px,5vw,60px);background:var(--navy);color:#fff}
.svc-bundle h2{font-size:clamp(34px,3.4vw,52px);font-weight:400;letter-spacing:-.04em}
.svc-bundle p{margin-top:14px;max-width:58ch;color:rgba(255,255,255,.75);font-size:16px}
@media (max-width:1000px){
  .handle-grid{grid-template-columns:1fr 1fr}
  .hd:nth-child(n){padding:26px 22px 28px 0;border-left:0}
  .hd:nth-child(even){padding-left:22px;border-left:1px solid var(--line)}
  .legend{grid-template-columns:1fr}
  .svc-group{grid-template-columns:1fr}
}
@media (max-width:600px){
  .handle-grid{grid-template-columns:1fr}
  .hd:nth-child(n){padding:24px 0;border-left:0}
  .svc-row{grid-template-columns:1fr;gap:12px}
  .svc-price{text-align:left;align-items:flex-start}
}
.f-top{grid-template-columns:2fr repeat(4,1fr)}@media (max-width:1000px){.f-top{grid-template-columns:1fr 1fr}}
.fast-lead{margin:18px auto 0;max-width:46ch;color:rgba(255,255,255,.75);font-size:16px}
/* new photos: right storefront is its own shot (no mirror); step iii face-safe */
.talk .side.r img{transform:none}
img[src$="v5/step-test.jpg"]{object-position:50% 15%}
/* blog sales parts: mid-article offer, sticky phone bar */
.mid-cta{margin:40px 0;padding:26px 28px;background:var(--navy);color:#fff}
.mid-cta p{margin:0 0 16px;font-size:18px;line-height:1.5;color:#fff}
.mid-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.mid-cta .btn{background:#fff;color:var(--navy)}.mid-cta .btn:hover{background:var(--gold)}
.mid-cta a.ul{color:rgba(255,255,255,.85);font-size:15px}
.post-cta .mid-cta-row a.ul{font-size:15px;color:var(--ink)}
.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;box-shadow:0 -1px 0 var(--line),0 -10px 30px rgba(0,15,32,.08);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px}
  .sticky-cta a,.sticky-cta button{flex:1;height:46px;display:flex;align-items:center;justify-content:center;font:600 15px var(--sans);border:0;cursor:pointer}
  .sticky-cta a{background:var(--mist);color:var(--ink)}
  .sticky-cta button{background:var(--navy);color:#fff}
  .page footer{padding-bottom:80px}
}
.topics{padding:0 var(--m) clamp(110px,15vh,160px)}
.topic-jump{margin-top:40px}
.topic{padding-top:clamp(60px,8vh,90px);scroll-margin-top:90px}
.topic > h2{font-size:clamp(28px,2.6vw,40px);font-weight:400;letter-spacing:-.035em;padding-bottom:16px;border-bottom:1px solid var(--line)}
.page .topics .post-grid{padding:0;margin-top:30px}
/* client login link in the bar */
.login-link{position:relative;font-size:14px;font-weight:500}
.login-link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.login-link:hover::after{transform:scaleX(1);transform-origin:left}
.sheet-foot{flex-wrap:wrap}
@media (max-width:600px){.nav-r .login-link{display:none}}
/* readability (WCAG AA contrast): small numerals and the gold label on white */
.hd-n,.step .n{color:#6b7686}
.plan .pn em{color:#8a6516}

/* ---- one spacing rhythm for the whole homepage (owner 2026-11-01: "make sure everything is flawless") ----
   G = the space between one section's content and the next heading. Sections on the same white
   background only pad their top, so neighbours never double up; navy bands pad top and bottom so
   their content sits G from each edge. Measured, not eyeballed: see the spacing check in the build log. */
:root{--G:clamp(100px,15vh,140px)}
.what{padding-top:var(--G);padding-bottom:0}
.serve{padding-top:var(--G);padding-bottom:0}
.handle{padding-top:var(--G);padding-bottom:0}
.flow{padding-top:var(--G);padding-bottom:var(--G)}
.steps{padding-top:var(--G);padding-bottom:var(--G)}
.band{padding-top:var(--G);padding-bottom:var(--G)}
.prices{padding-top:var(--G);padding-bottom:var(--G)}
.fast{padding-top:var(--G);padding-bottom:var(--G)}
.field-notes{padding-top:var(--G);padding-bottom:0}
.faq{padding-top:var(--G);padding-bottom:var(--G)}
@media (max-width:600px){:root{--G:100px}}
/* Phone hero (owner 2026-11-01, iPhone screenshot: "looks cutoff"). The hero is 100svh = the screen with
   Safari's bars EXPANDED; once Safari shrinks its address bar the screen is taller than the hero and a strip
   of the next section shows. That strip was the first ~100px of .what's empty top padding, so the page read
   as ending under the demo card. Two fixes: the hero no longer overshoots the small viewport (min-height
   680 > a 664px screen put the card 8px from the photo's edge), and the first section's kicker sits close
   enough to the hero that the strip shows the next section beginning instead of blank white. */
@media (max-width:600px){
  .hero{min-height:560px}
  .hero-card{bottom:max(20px,env(safe-area-inset-bottom,0px))}
  .what{padding-top:44px}
}
/* same rhythm on the inner pages */
.svc-group{padding-top:var(--G)}
.svc-bundle{margin-top:var(--G);margin-bottom:var(--G)}
.post-body{padding-bottom:calc(var(--G) / 2)}
.post-more{padding-top:calc(var(--G) / 2)}
/* merged services + prices section */
.prices .prices-head .kicker{margin-bottom:18px}
.prices .handle-grid{margin-top:clamp(40px,6vh,64px)}
.prices .sub-head{margin-top:clamp(70px,10vh,110px);font-size:clamp(26px,2.4vw,36px);font-weight:400;letter-spacing:-.03em}
.prices .from{margin-top:24px}
/* merged section sits between two white sections: pad the top only so the rhythm stays one G */
.prices{padding-bottom:0}
.prices .prices-head{align-items:flex-end}
.prices .prices-head > p{max-width:44ch}
.prices .prices-head > .btn{flex:none}
/* Steps: never depend on sideways scrolling with a mouse wheel.
   Wide screens show all four cards at once; when the row does scroll, arrows sit on its sides. */
.steps-wrap{position:relative;--mid:40%}
.steps-wrap .steps-row{position:relative;z-index:1}
.steps-btn{position:absolute;top:var(--mid);transform:translateY(-50%);z-index:5;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--navy,#0f1f3a);box-shadow:0 2px 14px rgba(8,16,30,.18);cursor:pointer;display:none;align-items:center;justify-content:center;transition:opacity .3s,background .25s,color .25s}
.steps-btn svg{width:20px;height:20px}
.steps-btn.prev{left:12px}
.steps-btn.next{right:calc(var(--m) + 12px)}
.steps-btn:hover{background:var(--navy,#0f1f3a);color:#fff}
.steps-btn:active{transform:translateY(-50%) scale(.94)}
.steps-wrap.scrolls .steps-btn{display:flex}
.steps-wrap.at-start .prev,.steps-wrap.at-end .next{opacity:0;pointer-events:none}
@media (min-width:900px){
  .steps{padding-right:var(--m)}
  .steps-row{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;padding-right:0;scroll-snap-type:none}
  .step{flex:none}
  .steps-btn.next{right:12px}
}
@media (max-width:600px){.steps-btn{width:42px;height:42px}}
/* ---------- trade pages (/hvac, /barbershops ...) ---------- */
/* hero: the copy sits on solid navy beside the photo, so it reads on every trade's picture */
.t-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);min-height:min(92svh,880px);padding-top:68px;background:var(--navy-deep);color:#fff}
.t-hero-copy{display:flex;flex-direction:column;justify-content:center;position:relative;padding:calc(56px + 3vh) var(--m) clamp(36px,6vh,64px)}
.t-hero .kicker{color:rgba(255,255,255,.74)}
.t-live{position:absolute;top:28px;left:var(--m);display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.82)}
.t-live .atl{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.t-live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#4ade80}
.t-live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#4ade80;animation:tpulse 2.2s var(--ease) infinite}
@keyframes tpulse{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
.t-hero h1{margin-top:18px;font-size:clamp(40px,5.3vw,88px);font-weight:400;letter-spacing:-.045em;line-height:1}
.t-hero h1 em{font-size:1.06em}
/* (AI-search B1) the search phrase is the H1; the old slogan sits under it as the display line */
.t-hero h1:has(+.t-subline){font-size:clamp(30px,3.1vw,50px);letter-spacing:-.03em;line-height:1.08}
.t-subline{margin-top:16px;font-size:clamp(24px,2.5vw,40px);letter-spacing:-.035em;line-height:1.08;color:rgba(255,255,255,.86)}
.t-subline em{font-size:1.06em}
.t-intro{margin-top:24px;max-width:46ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:rgba(255,255,255,.9)}
.t-strip{list-style:none;margin:clamp(36px,6vh,60px) 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px;font-size:15px;color:rgba(255,255,255,.8)}
.t-strip b{color:#fff;font-weight:600}
.t-strip li:first-child{font-size:17px}
.t-strip li:first-child b{font-size:30px;font-weight:400;letter-spacing:-.03em;margin-right:2px}
.t-hero-media{position:relative;margin:0;overflow:hidden;background:var(--navy)}
.t-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:tzoom 14s var(--ease) both}
@keyframes tzoom{from{transform:scale(1.1)}to{transform:scale(1)}}
.btn-line-w{border:1px solid rgba(255,255,255,.55);color:#fff;background:transparent}.btn-line-w:hover{background:#fff;color:var(--navy)}
/* the short answer, as a statement whose words fill in as it scrolls by */
.t-state{padding:var(--G) var(--m) 0;text-align:center}
.t-state-p{margin:26px auto 0;max-width:32ch;font-size:clamp(26px,2.6vw,38px);line-height:1.24;letter-spacing:-.03em;color:var(--ink)}
.js .t-state-p .w{color:#b9c1cc;transition:color .5s ease}
.js .t-state-p .w.on{color:var(--ink)}
.t-state-sub{margin:28px auto 0;max-width:56ch;font-size:17px;color:var(--mute)}
/* a day of calls: the photo and the clock hold still while the day scrolls by */
.t-day{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,110px);padding:var(--G) var(--m) 0;align-items:start}
.t-day-media{position:sticky;top:96px}
.t-day-media figure{margin:0;aspect-ratio:3/4;max-height:calc(100vh - 130px);width:100%;overflow:hidden;background:var(--mist)}
.t-day-media img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.t-clock{position:absolute;left:16px;bottom:16px;background:#fff;padding:16px 22px 16px;min-width:230px}
.t-clock-l{display:block;font-size:14px;color:var(--mute)}
.t-clock-row{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.t-clock-t{font-size:56px;font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.t-clock-ap{font-family:var(--serif);font-style:italic;font-size:28px}
.t-clock-n{display:block;margin-top:8px;font-size:13px;color:var(--mute)}
.t-clock .swap{animation:fs .6s var(--ease) both}
.t-day-copy h2,.t-calc h2,.t-svc h2,.t-how h2,.t-related h2,.t-faq h2{font-size:clamp(36px,3.8vw,60px);font-weight:400;letter-spacing:-.04em;line-height:1.02}
.t-day .t-sub{margin-top:18px;font-size:17px;max-width:46ch}
.tl{list-style:none;margin:52px 0 0;padding:0;position:relative;--p:0}
.tl::before,.tl::after{content:"";position:absolute;left:5px;top:12px;bottom:40px;width:2px;background:var(--line)}
.tl::after{background:var(--navy);transform-origin:top;transform:scaleY(var(--p))}
.tl-i{position:relative;padding:0 0 clamp(40px,6vh,64px) 44px}
.tl-i::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #c6cdd8;transition:background-color .4s ease,box-shadow .4s ease;z-index:1}
.tl-i.on::before{background:var(--navy);box-shadow:inset 0 0 0 2px var(--navy),0 0 0 6px rgba(0,31,63,.12)}
.tl.has-t .tl-i{display:grid;grid-template-columns:118px minmax(0,1fr);gap:20px}
.tl-t{padding-top:3px;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--mute);transition:color .4s ease}
.tl-i.on .tl-t{color:var(--ink)}
.tl-c q{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.3vw,36px);line-height:1.14;letter-spacing:-.01em;color:var(--ink)}
.tl-c p{margin-top:12px;font-size:17px;color:var(--ink);max-width:50ch}
/* why it matters: the homepage's white card over a photo, one reason at a time */
.t-why{position:relative;margin-top:var(--G);min-height:min(100svh,880px);display:flex;align-items:flex-end;padding:clamp(40px,8vh,80px) var(--m);overflow:hidden;background:var(--navy-deep)}
.t-why-bg{position:absolute;inset:0}
.t-why-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.1s var(--ease),transform 2.2s var(--ease)}
.t-why-bg img.on{opacity:1;transform:scale(1)}
.t-why-card{position:relative;z-index:1;background:#fff;padding:34px 34px 26px;width:min(540px,100%)}
.t-why-card h2{margin-top:12px;font-size:clamp(30px,2.8vw,42px);font-weight:400;letter-spacing:-.035em;line-height:1.04}
.t-why-slides{display:grid;margin-top:26px}
.t-why-s + .t-why-s{margin-top:22px}
.js .t-why-s{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.js .t-why-s.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.t-why-s h3{font-size:21px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.t-why-s p{margin-top:10px;font-size:16px;color:var(--ink)}
.t-why-ctl{justify-content:flex-start;margin-top:24px}
html:not(.js) .t-why-ctl{display:none}
/* the calculator: their numbers, worked out as they type */
.t-calc{background:var(--mist);padding:var(--G) var(--m)}
.t-calc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.t-calc-head p{max-width:42ch;font-size:17px;color:var(--ink)}
.t-calc-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,2vw,32px);margin-top:clamp(40px,6vh,64px)}
.t-calc-in{background:#fff;padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:34px}
.cf label{display:block;font-size:18px;font-weight:500;letter-spacing:-.01em}
.cf-row{display:flex;align-items:center;gap:22px;margin-top:12px}
.cf-row input[type=range]{flex:1;min-width:0;height:36px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.cf-row input[type=range]::-webkit-slider-runnable-track{height:4px;background:#cfd6e0;border-radius:2px}
.cf-row input[type=range]::-moz-range-track{height:4px;background:#cfd6e0;border-radius:2px}
.cf-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:var(--navy);border:4px solid #fff;box-shadow:0 0 0 1px var(--navy);transition:transform .2s var(--ease)}
.cf-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--navy);border:4px solid #fff;box-shadow:0 0 0 1px var(--navy)}
.cf-row input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.cf-box{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:4px;width:150px;height:54px;padding:0 14px;background:var(--mist);font-size:22px;font-variant-numeric:tabular-nums}
.cf-box:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.cf-box input{flex:1;min-width:0;width:6ch;border:0;padding:0;background:transparent;font:400 22px var(--sans);color:var(--ink);text-align:right;-moz-appearance:textfield;appearance:textfield}
.cf-box input:focus{outline:0}
.cf-box input::-webkit-inner-spin-button,.cf-box input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cf small{display:block;margin-top:8px;font-size:14px;color:var(--mute)}
.t-calc-out{background:var(--navy);color:#fff;padding:clamp(28px,3vw,48px);display:flex;flex-direction:column}
.co-k{font-size:16px;color:rgba(255,255,255,.76)}
.co-y{margin-top:10px}
.co-y b{font-size:clamp(56px,6vw,100px);font-weight:300;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.co-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.co-grid b{display:block;font-size:clamp(24px,2.2vw,32px);font-weight:300;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.co-grid p > span{display:block;margin-top:6px;font-size:14px;color:rgba(255,255,255,.76)}
.co-f{margin-top:auto;padding-top:30px;font-size:14px;color:rgba(255,255,255,.74)}
.co-ns{margin-top:14px;font-size:14px;color:rgba(255,255,255,.85)}
.t-calc-out .btn{margin-top:22px;align-self:flex-start}
/* services: rows that swap the picture, like "who we answer for" */
.t-svc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,90px);padding:var(--G) var(--m) 0;align-items:start}
.t-svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 30px;flex-wrap:wrap}
.sv-list{margin-top:44px;border-top:1px solid var(--line)}
.sv{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .45s var(--ease)}
.sv-t b{display:block;font-size:clamp(22px,2vw,30px);font-weight:400;letter-spacing:-.03em;line-height:1.15;transition:color .3s ease}
.sv-t span{display:block;margin-top:6px;font-size:16px;color:var(--mute);max-width:54ch}
.sv-p{flex:none;display:flex;gap:10px;align-items:center;font-size:14px;color:var(--mute);white-space:nowrap}
.sv:hover,.sv:focus-visible,.sv.on{padding-left:14px}
.sv-list:hover .sv:not(:hover) .sv-t b{color:var(--soft)}
.sv-media{position:sticky;top:96px;aspect-ratio:4/5;max-height:calc(100vh - 130px);width:100%;overflow:hidden;background:var(--mist)}
.sv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.sv-media img.on{opacity:1;transform:scale(1)}
.sv-media .tag{position:absolute;left:16px;bottom:16px;z-index:2;background:#fff;padding:8px 12px;font-size:13px;font-weight:500}
/* promises: this trade's three, then the price facts that count up */
.t-prom{margin-top:var(--G);background:var(--navy);color:#fff;padding:var(--G) var(--m)}
.t-prom .kicker{color:rgba(255,255,255,.72)}
.t-prom-head h2{margin-top:20px;max-width:20ch;font-size:clamp(36px,4vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1.02}
.t-prom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px);margin-top:clamp(56px,8vh,90px)}
.pr{border-top:1px solid rgba(255,255,255,.24);padding-top:26px}
.pr h3{font-size:clamp(24px,2.2vw,34px);font-weight:400;letter-spacing:-.03em;line-height:1.1}
.pr p{margin-top:12px;font-size:17px;color:rgba(255,255,255,.84);max-width:36ch}
.t-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(64px,9vh,100px);padding:40px;background:rgba(255,255,255,.06)}
.tf b{display:block;font-size:clamp(40px,4vw,64px);font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.tf span{display:block;margin-top:12px;font-size:14px;color:rgba(255,255,255,.76)}
/* how it starts, with pictures */
.t-how{padding:var(--G) var(--m) 0}
.t-how-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 30px;flex-wrap:wrap}
.t-how-head p{max-width:38ch;font-size:16px;color:var(--mute)}
.th-row{list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px);counter-reset:th}
.th{counter-increment:th;border-top:2px solid var(--navy);padding-top:24px}
.th::before{content:counter(th);display:block;font-family:var(--serif);font-style:italic;font-size:clamp(56px,5vw,84px);line-height:.9;color:var(--navy)}
.th h3{margin-top:22px;font-size:21px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.th p{margin-top:10px;font-size:16px;color:var(--ink);max-width:36ch}
/* questions, related reading, sources */
.t-faq{padding:var(--G) var(--m) 0}
html:not(.js) .t-faq .a{grid-template-rows:1fr}
.t-related{padding:var(--G) var(--m) 0}
.t-sources{padding:calc(var(--G) / 2) var(--m) 0}
.t-related .post-grid{padding:0;margin-top:40px}
.t-related .post-card h3{overflow-wrap:break-word}
.t-sources h2{font-size:15px;font-weight:600;letter-spacing:0}
.t-sources ol{margin-top:12px;padding-left:20px;font-size:14px;color:var(--mute);line-height:1.7}
.t-sources a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* roster pages (answers/, build_roster_pages.py) and the roster Guides link block on trade pages (AI-search B2) */
.rp-head .t-subline{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,30px);color:var(--ink)}
.rp-sec{max-width:780px;padding:0 var(--m);margin-top:clamp(52px,7vh,76px)}
.rp-sec h2{font-size:clamp(26px,2.4vw,34px);font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.rp-sec p{margin-top:16px;font-size:18px;line-height:1.7;color:#1f2a3c;max-width:68ch}
.rp-sec + .t-faq{margin-top:clamp(20px,4vh,40px)}
.t-guides{padding:calc(var(--G) / 2) var(--m) 0}
.t-guides h2{font-size:15px;font-weight:600;letter-spacing:0}
.t-guides ul{margin-top:12px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:16px}
.t-guides a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
/* closing call to action, on a light ground so it doesn't run into the navy footer */
.t-end{margin-top:var(--G);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:#eef3f8}
.t-end-in{align-self:center;padding:clamp(80px,12vh,140px) var(--m)}
.t-end h2{margin-top:20px;max-width:15ch;font-size:clamp(44px,5vw,80px);font-weight:400;letter-spacing:-.045em;line-height:.98}
.t-end-in > p:not(.kicker){margin-top:24px;max-width:50ch;font-size:17px;color:var(--ink)}
.t-end-media{margin:0;min-height:520px;overflow:hidden}
.t-end-media img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
@media (max-width:1000px){
  .t-hero{grid-template-columns:1fr;min-height:0}
  .t-hero-media{order:-1;aspect-ratio:4/3}
  .t-hero-copy{padding-top:36px}
  .t-live{position:static;margin-bottom:22px}
  .t-day,.t-svc,.t-calc-body,.t-end{grid-template-columns:1fr}
  .t-day-media{position:relative;top:0}
  .t-day-media figure{aspect-ratio:4/3;max-height:none}
  .t-clock{display:none}
  .sv-media{display:none}
  .t-prom-grid{grid-template-columns:1fr}
  .t-figs{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .th-row{grid-template-columns:repeat(2,1fr)}
  .t-end-media{min-height:0;aspect-ratio:4/3;order:-1}
}
@media (max-width:700px){
  .t-hero h1{font-size:clamp(34px,9.6vw,46px)}
  .t-hero h1:has(+.t-subline){font-size:clamp(28px,7.6vw,36px)}
  .t-subline{font-size:clamp(23px,6.6vw,30px)}
  .t-strip{gap:8px 20px}
  .t-strip li:first-child{flex-basis:100%}
  .tl.has-t .tl-i{grid-template-columns:1fr;gap:6px}
  .tl-i{padding-left:34px}
  .tl-c q{font-size:25px}
  .t-why{display:block;min-height:0;padding:0;background:var(--mist)}
  .t-why-bg{position:relative;aspect-ratio:4/3}
  .t-why-card{width:100%;padding:30px var(--m) 34px;background:var(--mist)}
  .t-calc-in{gap:28px}
  .cf-row{gap:14px}
  .cf-row input[type=range]{height:44px}
  .cf-box{width:118px;height:50px;font-size:20px;padding:0 10px}
  .t-hero .btn{padding:0 18px}
  .cf-box input{font-size:20px;width:5ch}
  .sv{padding:22px 0}
  .sv-p{font-size:0;gap:0}
  .t-figs{padding:28px 20px}
  .th-row{grid-template-columns:1fr;gap:28px}
  .th h3{font-size:19px}
}
@media (max-width:420px){
  .t-day-copy h2,.t-calc h2,.t-svc h2,.t-how h2,.t-related h2,.t-faq h2{font-size:31px}
  .t-end h2{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  /* keep the fades; drop the zoom and the travel */
  .t-hero-media img,.t-live-dot::after{animation:none}
  .js :is(.t-hero,.t-state,.t-day,.t-why,.t-calc,.t-svc,.t-prom,.t-how,.t-faq,.t-related,.t-end) :is([data-r],[data-mask]),.js .t-why-card[data-r]{opacity:1;transform:none;clip-path:none;transition:none}
  .t-why-bg img,.sv-media img{transform:none}
  .js .t-why-s{transform:none}
}
/* shared with /pilot-start and the 404 page (pages/*.html): keep as they were */
.t-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:30px}
.t-sub{margin-top:16px;color:var(--mute);font-size:16px;max-width:44ch}
.t-steps{padding:var(--G) var(--m) 0}
.t-steps h2{margin-top:16px;font-size:clamp(34px,3.6vw,56px);font-weight:400;letter-spacing:-.04em;line-height:1.02}
.ts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px);margin-top:clamp(40px,6vh,64px)}
.ts{border-top:2px solid var(--navy);padding-top:22px}
.ts-n{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1;color:var(--navy)}
.ts h3{margin-top:18px;font-size:19px;font-weight:500;letter-spacing:-.015em}
.ts p{margin-top:8px;font-size:15px;color:var(--mute)}
.t-close{margin-top:var(--G);background:var(--navy);color:#fff;text-align:center;padding:clamp(110px,15vh,170px) var(--m)}
.t-close .kicker{color:rgba(255,255,255,.7)}
.t-close h2{margin:20px auto 0;max-width:16ch;font-size:clamp(44px,5.4vw,86px);font-weight:400;letter-spacing:-.045em;line-height:.98}
.t-close > p{margin:24px auto 0;max-width:52ch;color:rgba(255,255,255,.82);font-size:17px}
.t-close .t-actions{justify-content:center;margin-top:34px}
@media (max-width:900px){.ts-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ts-row{grid-template-columns:1fr}}
.tn{color:#5d6878}
.serve-more{margin-top:22px;font-size:14px;line-height:2;color:var(--mute);max-width:60ch}
.serve-more a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line,#d9dee5);text-underline-offset:4px;margin-right:10px;white-space:nowrap;transition:text-decoration-color .25s}
.serve-more a:hover{text-decoration-color:currentColor}
.serve-lede{margin-top:34px;font-size:clamp(19px,2.1vw,23px);line-height:1.45;color:var(--ink);max-width:34ch;letter-spacing:-.01em}
.serve-lede em{font-family:var(--serif,"Instrument Serif",serif);font-style:italic;font-size:1.08em}
.serve-etc{white-space:nowrap}
/* ---------- simple pages: enterprise, 404, legal ---------- */
.pg-head{padding:calc(var(--G) + 70px) var(--m) 0;max-width:1100px}
.pg-head h1{margin-top:16px;font-size:clamp(44px,5.6vw,86px);font-weight:400;letter-spacing:-.045em;line-height:.98}
.pg-lead{margin-top:22px;max-width:56ch;font-size:clamp(17px,1.4vw,20px);color:var(--mute)}
.ent{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,110px);padding:var(--G) var(--m);align-items:start}
.ent-copy{border-top:1px solid var(--line)}
.ent-pt{padding:28px 0;border-bottom:1px solid var(--line)}
.ent-pt h3{margin-top:10px;font-size:20px;font-weight:500;letter-spacing:-.015em}
.ent-pt p{margin-top:8px;color:var(--mute);font-size:15px;max-width:48ch}
.ent-form.dlg{position:relative;background:var(--mist);padding:clamp(28px,3.4vw,48px);max-width:none;width:auto}
.ent-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.ent-grid .full{grid-column:1/-1}
.dlg textarea{width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);font:400 17px var(--sans);color:var(--ink);background:transparent;resize:vertical}
.dlg textarea:focus{outline:0;border-color:var(--ink)}
.nf{min-height:calc(100vh - 120px);padding-bottom:var(--G)}
.nf-links{margin-top:26px;font-size:16px}
.nf-act{margin-top:34px}
.legal-head{padding-bottom:0}
.legal-head h1{font-size:clamp(40px,4.6vw,68px)}
.legal-nav{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px}
.legal-nav a{color:var(--mute);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px}
.legal-nav a[aria-current]{color:var(--ink);border-color:var(--ink)}
.legal-body{padding:56px var(--m) var(--G);max-width:calc(760px + 2*var(--m))}
.legal-body h2{margin-top:44px;font-size:24px}
.legal-body h3{margin-top:28px;font-size:18px}
.legal-body p,.legal-body li{font-size:16px;line-height:1.7}
.legal-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.legal-body th,.legal-body td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
@media (max-width:900px){.ent{grid-template-columns:1fr}.ent-grid{grid-template-columns:1fr}}
/* getting started (/pilot-start) */
.ps-steps .ts-n{font-size:26px}
.ps-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);padding:var(--G) var(--m) 0}
.ps-cols h2{margin-top:16px;font-size:clamp(32px,3.2vw,50px);font-weight:400;letter-spacing:-.04em;line-height:1.04}
.ps-list{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line)}
.ps-list li{padding:20px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.ps-list b{font-weight:500;font-size:17px}
.ps-list span{color:var(--mute);font-size:15px}
.ps-look{padding:var(--G) var(--m) 0}
.ps-look-in{background:var(--mist);padding:clamp(32px,4vw,64px)}
.ps-look h2{margin-top:14px;font-size:clamp(30px,3vw,46px);font-weight:400;letter-spacing:-.035em}
.ps-look ul{margin:24px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.ps-look li{padding-left:26px;position:relative;font-size:16px}
.ps-look li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:2px;background:var(--navy)}
.ps-look p{margin-top:26px;color:var(--mute);font-size:14px;max-width:60ch}
@media (max-width:900px){.ps-cols{grid-template-columns:1fr}.ps-look ul{grid-template-columns:1fr}}
/* ---------- roster answer pages (build_roster_pages.py): guide body, tables, Guides links ---------- */
.rp-head{padding-bottom:0}
.rp-head h1{font-size:clamp(40px,5vw,76px)}
.rp-head .pg-lead{max-width:62ch;color:var(--ink)}
.rp-body{max-width:820px;margin:0;padding-left:var(--m);padding-right:var(--m);padding-top:clamp(40px,6vh,64px)}
.rp-sec + .rp-sec{margin-top:8px}
.rp-body .rp-sec:first-child h2{margin-top:0}
.rp-table{margin:6px 0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--navy)}
.rp-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;min-width:560px}
.rp-table th,.rp-table td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--line)}
.rp-table thead th{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--mute)}
.rp-table tbody th{font-weight:500;color:var(--ink)}
.t-guides{padding:calc(var(--G) / 2) var(--m) calc(var(--G) / 2)}
.t-guides h2{font-size:15px;font-weight:600;letter-spacing:0}
.t-guides ul{margin:12px 0 0;padding-left:20px;line-height:1.9}
.t-guides a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.t-guides a:hover{text-decoration-color:currentColor}
@media (max-width:600px){.rp-table table{font-size:13px;min-width:0}.rp-table th,.rp-table td{padding-right:10px}.rp-table thead th{font-size:11px}}
/* (B4) guide layout: reading column + sticky "On this page" list on the right; one column with the list on top on
   phone. Byline, breadcrumb, "Related guides", the split-page link and the /guides hub. Colours are the brand tokens. */
.rp-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none;font-size:14px;color:var(--mute)}
.rp-crumbs li + li::before{content:"/";margin:0 10px;color:var(--soft)}
.rp-crumbs a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.rp-crumbs a:hover{text-decoration-color:currentColor}
.rp-crumbs [aria-current]{color:var(--mute)}
.rp-head h1{margin-top:20px}
.rp-byline{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:16px;font-size:14px;color:var(--mute)}
.rp-byline .rp-dot{color:var(--soft)}
.rp-layout{display:grid;grid-template-columns:minmax(0,760px) 260px;column-gap:clamp(48px,6vw,112px);align-items:start;padding:0 var(--m)}
.rp-layout .rp-main{grid-column:1;grid-row:1;min-width:0}
.rp-layout .rp-toc{grid-column:2;grid-row:1;position:sticky;top:96px;margin-top:clamp(40px,6vh,64px);padding-left:20px;border-left:1px solid var(--line)}
.rp-layout .rp-body,.rp-layout .rp-sec{max-width:none;padding-left:0;padding-right:0}
.rp-layout .rp-body{padding-bottom:0}
.rp-layout .rp-main{padding-bottom:calc(var(--G) / 2)}
.rp-layout [id]{scroll-margin-top:96px}
.rp-toc-h{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.rp-toc ol{margin:14px 0 0;padding:0;list-style:none;font-size:14px;line-height:1.4}
.rp-toc li + li{margin-top:12px}
.rp-toc a{display:block;color:var(--mute);transition:color .25s var(--ease)}
.rp-toc a:hover,.rp-toc a[aria-current]{color:var(--navy)}
.rp-toc a[aria-current]{font-weight:500;box-shadow:-21px 0 0 -19px var(--navy)}
.rp-more{margin-top:18px}
.rp-more a{font-weight:500;color:var(--blue);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:4px}
.rp-more a::after{content:" \2192"}
.rp-sec ul.rp-links{margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.rp-links li{margin:0;border-bottom:1px solid var(--line)}
.rp-links a{display:flex;align-items:center;min-height:48px;font-size:17px;color:var(--blue)}
.rp-links a::after{content:"\2192";margin-left:auto;padding-left:12px}
.rp-main .t-faq{display:block;padding:0;margin-top:clamp(52px,7vh,76px)}
.rp-main .t-faq h2{font-size:clamp(26px,2.4vw,34px);font-weight:500;letter-spacing:-.025em;line-height:1.2;margin-bottom:18px}
.rp-related{margin-top:clamp(52px,7vh,76px);padding:28px 0 0;border-top:2px solid var(--navy)}
.rp-related h2{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.02em}
.rp-related ul{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.rp-related li{border-bottom:1px solid var(--line)}
.rp-related a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;font-size:17px;color:var(--ink)}
.rp-related a::after{content:"\2192";color:var(--blue);transition:transform .35s var(--ease)}
.rp-related a:hover::after{transform:translateX(4px)}
.rp-main .t-sources{padding:calc(var(--G) / 2) 0 calc(var(--G) / 2)}
.rp-layout-hub{grid-template-columns:minmax(0,1100px)}
.rp-sec ul.rp-hub-list{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.rp-hub-list li{border-bottom:1px solid var(--line)}
.rp-hub-list a{display:block;padding:14px 0;font-size:17px;color:var(--ink)}
.rp-hub-list a:hover{color:var(--blue)}
.rp-hub-group + .rp-hub-group{margin-top:clamp(40px,6vh,64px)}
.rp-layout-hub .rp-body{padding-bottom:calc(var(--G) / 2)}
@media (max-width:1000px){
  .rp-layout{display:block}
  .rp-layout .rp-toc{position:static;margin-top:32px;padding:16px 0;border-left:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .rp-toc ol{columns:2;column-gap:24px}
  .rp-toc li{break-inside:avoid;margin:0 0 10px}
  .rp-toc li + li{margin-top:0}
  .rp-sec ul.rp-hub-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .rp-toc ol{columns:1}
  .rp-toc a{padding:4px 0}
  .rp-related ul,.rp-sec ul.rp-hub-list,.rp-sec ul.rp-links{grid-template-columns:1fr}
  .rp-layout .rp-body{padding-top:32px}
}