/* Fineline Painting v8: "the line" system. Asphalt, stripe yellow, paint white, silver.
   Type: Barlow Condensed (headings), Atkinson Hyperlegible (body, built for low vision),
   Big Shoulders Stencil only for the wordmark and small accents. Sizes are in rem so the
   browser's default text size and the A-/A+ control both scale everything. */

/* Fallback faces tuned so headlines keep roughly the same width while web fonts load
   (approximate metrics; see SETUP.md to fine-tune). */
@font-face{font-family:"Barlow Condensed FB Narrow";font-weight:100 900;size-adjust:100%;ascent-override:98%;descent-override:26%;
  src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("AvenirNextCondensed-Bold"),local("Roboto Condensed Bold"),local("RobotoCondensed-Bold"),local("TeXGyreHerosCondensed-Bold")}
@font-face{font-family:"Barlow Condensed FB";font-weight:100 900;size-adjust:82%;ascent-override:104%;descent-override:28%;
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Roboto Bold"),local("Liberation Sans Bold"),local("DejaVu Sans Bold")}
@font-face{font-family:"Atkinson FB";font-weight:400;size-adjust:104%;ascent-override:91%;descent-override:26%;line-gap-override:0%;
  src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto"),local("Liberation Sans"),local("DejaVu Sans")}
@font-face{font-family:"Atkinson FB";font-weight:700;size-adjust:104%;ascent-override:91%;descent-override:26%;line-gap-override:0%;
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Roboto Bold"),local("Liberation Sans Bold"),local("DejaVu Sans Bold")}

:root{
  --tar:#0c0c0c;--asphalt:#171717;--deck:#232326;--stripe:#ffc20e;--paint:#f4f2ea;--silver:#c5c9cf;--slab:#dcdcd6;--mute:#b3b6bc;--ink-2:#34363a;--danger:#ffa094;
  --display:"Barlow Condensed","Barlow Condensed FB Narrow","Barlow Condensed FB","Arial Narrow",sans-serif;
  --body:"Atkinson Hyperlegible","Atkinson FB",Arial,Helvetica,sans-serif;
  --stencil:"Big Shoulders Stencil Display","Barlow Condensed","Barlow Condensed FB Narrow","Barlow Condensed FB",sans-serif;
  --wrap:1240px;--cut:14px;--bar:4.25rem;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hazard:repeating-linear-gradient(-45deg,var(--stripe) 0 16px,var(--tar) 16px 32px);
  --focus:var(--stripe);
}
/* text size control: honors the browser default (100%) and steps up from it */
html{font-size:100%}
html[data-ts="1"]{font-size:112.5%}html[data-ts="2"]{font-size:125%}html[data-ts="3"]{font-size:137.5%}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:6rem}
body{margin:0;background:var(--tar);color:var(--paint);font:400 1.125rem/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (min-width:1000px){body{font-size:1.1875rem}}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.skip-link{position:absolute;left:1rem;top:-5rem;background:var(--stripe);color:var(--tar);padding:.75rem 1.1rem;font-weight:700;z-index:2000}
.skip-link:focus{top:1rem;outline-color:var(--tar)}

/* light surfaces get a dark focus ring */
.s-svc,.s-why,.s-contact,.on-yellow,.on-slab,.mq-wrap,.s-detail,.band,.calc-out,.chip-top,.tile.t2,.tile.t3,.tile.t5,.board,.s-cases,.s-packet,.sheet,.s-sheet,.bundle{--focus:var(--tar)}
.card,.chip-body,.tile.t1,.tile.t4,.faq details,.calc-band,.calc-in,.tipbox{--focus:var(--stripe)}

h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.005em;line-height:1.02;text-wrap:balance}
h1{font-weight:800}
h2{font-size:clamp(2.1rem,1.3rem + 3vw,3.75rem)}
h3{font-size:1.6rem;line-height:1.1}
p{margin:0 0 1rem;max-width:36em}
.lede{font-size:1.25rem;line-height:1.55;max-width:32em}
.fine{font-size:1.05rem;max-width:34em;color:var(--silver)}
b,strong{font-weight:700}

/* buttons: stencil-cut corners, yellow like the logo plate. Focus ring is drawn inside (clip-path hides outlines). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3.1rem;background:var(--stripe);color:var(--tar);font:700 1.3rem/1.05 var(--display);letter-spacing:.01em;text-decoration:none;text-align:center;border:0;padding:.8rem 1.6rem;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));transition:background-color .15s,color .15s,transform .15s}
.btn:hover{background:var(--paint);transform:translateX(3px)}
.btn:active{transform:none}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 4px var(--tar),inset 0 0 0 7px var(--paint)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.alt{background:var(--tar);color:var(--stripe)}
.btn.alt:hover{background:var(--paint);color:var(--tar)}
.btn.alt:focus-visible{box-shadow:inset 0 0 0 4px var(--stripe),inset 0 0 0 7px var(--tar)}
.btn.line{background:var(--paint);color:var(--tar)}
.btn.line:hover{background:var(--stripe)}
.btn.sm{min-height:3rem;padding:.6rem 1.1rem;font-size:1.2rem;--cut:9px}
.btn svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;flex:none}
.link{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:.5rem 0;min-height:3rem}
.cta{display:flex;gap:1rem;flex-wrap:wrap;margin:1.8rem 0 1.2rem}

/* ---------------------------------------------------------------- nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem;padding:.45rem max(1.25rem,calc((100% - var(--wrap))/2));
  padding-top:max(.45rem,env(safe-area-inset-top));background:rgba(12,12,12,.97);border-bottom:5px solid var(--stripe)}
.brand{display:inline-flex;align-items:center;gap:.55rem;font:900 1.85rem/1 var(--stencil);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:var(--paint);min-height:3rem;white-space:nowrap}
.brand-mark{width:44px;height:auto;flex:none}
.brand small{font:800 .95rem/1 var(--stencil);letter-spacing:.2em;background:var(--stripe);color:var(--tar);padding:.3rem .5rem .24rem .7rem}
.brand.has-logo img{height:3rem;width:auto}
.nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.nav ul a{display:flex;align-items:center;min-height:3rem;padding:0 .7rem;font:600 1.25rem/1 var(--display);letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  background:linear-gradient(var(--stripe),var(--stripe)) .7rem calc(100% - .45rem)/0 4px no-repeat;transition:background-size .2s}
.nav ul a:hover,.nav ul a[aria-current]{background-size:calc(100% - 1.4rem) 4px}
.nav .menu-extra{display:none}
.nav-cta{display:flex;align-items:center;gap:.8rem}
.nav-cta .login{display:flex;align-items:center;min-height:3rem;font:600 1.2rem/1 var(--display);text-decoration:none;color:var(--silver);white-space:nowrap}
.nav-cta .login:hover{color:var(--stripe)}
.ts{display:flex;border:2px solid #7a7d83}
.ts button{min-width:2.9rem;min-height:2.9rem;background:none;border:0;color:var(--paint);font:700 1.2rem/1 var(--display);cursor:pointer;padding:0 .4rem}
.ts button+button{border-left:2px solid #7a7d83;font-size:1.45rem}
.ts button:hover{background:var(--stripe);color:var(--tar)}
.ts button[aria-disabled=true]{color:#8a8d93;cursor:not-allowed}
.ts button[aria-disabled=true]:hover{background:none;color:#8a8d93}
.menu-btn{display:none;min-height:3rem;background:none;border:2px solid var(--silver);color:var(--paint);padding:0 1rem;font:700 1.25rem/1 var(--display);cursor:pointer}
@media (max-width:1280px){
  .menu-btn{display:block}
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100svh - 5rem);overflow:auto;background:var(--tar);border-bottom:5px solid var(--stripe);flex-direction:column;gap:0;padding:.5rem 1.25rem 1.25rem}
  .nav ul.open{display:flex}
  .nav ul a{font-size:1.65rem;min-height:3.5rem;padding:0;border-bottom:2px dashed #4a4b50;background:none}
  .nav ul a[aria-current]{color:var(--stripe)}
  .nav .menu-extra{display:block}
  .nav-cta .login{display:none}
}
@media (max-width:640px){.nav-cta .btn{display:none}.brand small{display:none}.nav{gap:.5rem}.nav-cta{gap:.5rem}}
@media (max-width:380px){.brand-mark{display:none}.brand{font-size:1.6rem}.ts button{min-width:2.75rem}}

/* ---------------------------------------------------------------- paint trail */
.paint-host{position:relative;overflow:hidden;touch-action:pan-y pinch-zoom}
.paint-host>.wrap{position:relative;z-index:1}
.trail{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none}
.trail-man{position:absolute;left:0;top:0;z-index:0;width:var(--tw,120px);height:auto;pointer-events:none;opacity:0;will-change:transform;transition:opacity .3s}
.trail-man.on{opacity:.95}

/* ---------------------------------------------------------------- hero */
.s-hero{background:var(--asphalt) var(--grain);color:var(--paint);padding:clamp(7rem,12vw,9.5rem) 0 0;min-height:620px;display:flex;flex-direction:column;justify-content:flex-end}
@supports (height:100svh){.s-hero{min-height:min(100svh,1100px)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);gap:clamp(2rem,4vw,4rem);align-items:end}
.s-hero h1{font-size:clamp(3rem,1.6rem + 6vw,6.75rem);line-height:.95;letter-spacing:-.015em;margin:0 0 1.5rem;max-width:13ch}
.s-hero .lede{color:var(--silver)}
.hint{display:none;font-size:1rem;color:var(--mute);margin:1rem 0 0}
@media (hover:hover) and (pointer:fine){.hint-fine{display:block}}
@media (pointer:coarse){.hint-touch{display:block}.hint-fine{display:none}}
.emg{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:0 0 1rem}
.emg p{margin:0;font-size:1.05rem;color:var(--silver);max-width:22em}
.emg-btn{background:var(--tar);color:var(--paint);box-shadow:inset 0 0 0 3px var(--stripe);font-size:1.2rem;--cut:10px;position:relative;padding-left:1.6rem}
.emg-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:repeating-linear-gradient(-45deg,var(--stripe) 0 6px,var(--tar) 6px 12px)}
.emg-btn:hover{background:var(--stripe);color:var(--tar)}
.emg-btn:focus-visible{box-shadow:inset 0 0 0 3px var(--stripe),inset 0 0 0 7px var(--paint)}
.s-contact .emg p,.on-yellow .emg p{color:var(--ink-2)}
.hero-line{position:relative;container-type:inline-size;height:150px;margin-top:clamp(1rem,3vw,2.5rem);overflow:hidden;pointer-events:none}
.hero-line::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:11px;background:repeating-linear-gradient(90deg,var(--paint) 0 48px,transparent 48px 84px);opacity:.18}
.walker{--fw:220px;position:absolute;left:0;bottom:0;width:var(--fw);transform:translateX(-120%);animation:walk 6.5s cubic-bezier(.45,.05,.3,1) .5s forwards;will-change:transform}
.walker img{display:block;width:100%;height:auto;position:relative}
.walker::before{content:"";position:absolute;right:calc(100% - 52px);bottom:2px;width:100vw;height:11px;background:var(--stripe)}
@keyframes walk{to{transform:translateX(calc(100cqw - var(--fw)))}}
html.intro-on .walker{animation-play-state:paused}
@media (max-width:600px){.walker{--fw:150px}.hero-line{height:110px}.walker::before{right:calc(100% - 36px);height:9px}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1rem 2rem;padding:1.6rem 0 2.4rem;position:relative}
.stats b{display:block;font:800 clamp(2.8rem,2rem + 2.5vw,4.4rem)/.95 var(--display);white-space:nowrap;color:var(--stripe)}
.stats span{font-size:1.05rem;color:var(--silver)}
.board{position:relative;background:var(--slab);color:var(--tar);padding:2.2rem 1.5rem 1.4rem;transform:rotate(1.8deg);transform-origin:50% 100%;margin-bottom:1.2rem;box-shadow:10px 10px 0 var(--stripe)}
.board::before{content:"";position:absolute;top:0;left:0;right:0;height:16px;background:var(--hazard)}
.board-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem;border-bottom:3px solid var(--tar);padding-bottom:.7rem}
.board-head h2{font-size:2rem;line-height:1}
.board-head span{font-weight:700;color:var(--ink-2);white-space:nowrap}
.board ul{list-style:none;margin:0 0 .8rem;padding:0}
.board li{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.55rem 0;border-bottom:2px dashed rgba(12,12,12,.35)}
.board li b{font-weight:700;font-size:1.05rem;line-height:1.3}
.pill{flex:none;font:700 1.05rem/1 var(--display);padding:.35rem .6rem;border:2px solid var(--tar);color:var(--tar)}
.pill.done{background:var(--tar);color:var(--paint)}
.pill.now{background:var(--stripe)}
.board small{color:var(--ink-2);font-size:1rem}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.board{max-width:460px;transform:rotate(1deg)}}

/* ---------------------------------------------------------------- marquee */
.mq-wrap{position:relative;background:var(--stripe)}
.mq{background:var(--stripe);color:var(--tar);overflow:hidden;padding:1.2rem 0 1.1rem;position:relative}
.mq::before,.mq::after{content:"";position:absolute;left:0;right:0;height:12px;background:var(--hazard);z-index:1}
.mq::before{top:0}.mq::after{bottom:0}
.mq>div{display:flex;width:max-content;animation:mq 110s linear infinite;padding:.4rem 0}
.mq-wrap:hover .mq>div,.mq-wrap.paused .mq>div{animation-play-state:paused}
.mq span{font:800 clamp(1.9rem,1.4rem + 1.6vw,2.8rem)/1 var(--display);text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center}
.mq span::after{content:"";width:.28em;height:.9em;background:var(--tar);transform:skewX(-24deg);margin:0 1.8rem}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-pause{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);z-index:2;min-height:2.9rem;padding:0 1rem;background:var(--tar);color:var(--stripe);border:0;font:700 1.1rem/1 var(--display);cursor:pointer}

/* ---------------------------------------------------------------- sections */
.sec{padding:clamp(4rem,9vw,8rem) 0}
.sec.tight{padding-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:2.4rem}
.sec-head h2{max-width:20ch}
.sec-head .lede{margin:0 0 1.2rem;color:var(--ink-2)}
.more{margin:2rem 0 0;font-weight:700}
.more a{display:inline-flex;align-items:center;min-height:3rem}
.mt{margin-top:3.5rem}
.s-svc{background:var(--slab);color:var(--tar)}
.s-svc .lede{color:var(--ink-2)}
.s-svc h2{margin-bottom:1rem}
.tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2rem}
.tabs button,.tabs a{min-height:3rem;display:inline-flex;align-items:center;font:700 1.25rem/1 var(--display);background:transparent;color:var(--tar);border:3px solid var(--tar);padding:0 1.1rem;cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s}
.tabs button:hover,.tabs a:hover{background:var(--paint)}
.tabs button[aria-selected=true]{background:var(--tar);color:var(--stripe)}
.chips{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),1fr))}
.chip{--c:var(--stripe);display:flex;flex-direction:column;background:var(--tar);color:var(--paint);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.chip[hidden]{display:none}
.chip-top{background:var(--c);color:var(--tar);padding:1.1rem 1.6rem 1.8rem 1.2rem;min-height:7.6rem;position:relative}
.chip-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:repeating-linear-gradient(90deg,var(--tar) 0 22px,transparent 22px 40px)}
.chip-top h3{font-size:1.75rem;line-height:1.05}
.chip-top h3 a{text-decoration:none}
.chip-top h3 a:hover{text-decoration:underline;text-decoration-thickness:3px}
.chip-top h3 a:focus-visible{outline-offset:1px}
.chip-body{padding:1rem 1.2rem 1.25rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.chip-body p{margin:0;color:var(--silver);font-size:1.05rem;line-height:1.5}
.chip-body small{color:var(--mute);font-size:1rem;line-height:1.45}
.chip-go{margin-top:auto;display:inline-flex;align-items:center;min-height:3rem;font:700 1.3rem/1 var(--display);color:var(--stripe);text-decoration:none;align-self:flex-start;border-bottom:3px solid var(--stripe)}
.chip-go:hover{color:var(--paint);border-color:var(--paint)}
.g0{--c:#ffc20e}.g1{--c:#f4f2ea}.g2{--c:#c5c9cf}.g3{--c:#ffd95a}.g4{--c:#aeb3ba}
.grp-title{font-size:clamp(2rem,1.5rem + 2vw,3rem);margin:3.4rem 0 1.2rem;display:flex;align-items:center;gap:.9rem;scroll-margin-top:7rem}
.grp-title[hidden]{display:none}
.grp-title::before{content:"";width:.5em;height:.9em;background:var(--tar);border-left:.28em solid var(--c);flex:none}
.finder{display:grid;gap:.4rem;max-width:34rem;margin:0 0 1.6rem}
.finder label{font:700 1.45rem/1.1 var(--display)}
.finder input{background:var(--paint);color:var(--tar);border-color:var(--tar)}
.finder input:focus{outline-color:var(--tar);border-color:var(--tar)}
.finder p{margin:0;min-height:1.5em;color:var(--ink-2)}

/* repaint demo */
.s-paint{background:var(--asphalt) var(--grain);color:var(--paint)}
.paint-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.paint-grid h2{max-width:15ch;margin-bottom:1.4rem}
.seg{display:inline-flex;border:3px solid var(--stripe);margin:0 0 1.6rem}
.seg button{min-height:3rem;font:700 1.3rem/1 var(--display);border:0;background:none;color:var(--stripe);padding:0 1.3rem;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--stripe);color:var(--tar)}
.sw-group{margin:0 0 1.3rem}
.sw-group h3{font:700 1.35rem/1 var(--display);margin-bottom:.7rem;color:var(--silver)}
.sw-row{display:flex;flex-wrap:wrap;gap:.6rem}
.sw{width:3rem;height:3rem;background:var(--c);border:2px solid var(--paint);cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s}
.sw:hover{transform:translateY(-3px)}
.sw[aria-pressed=true]{box-shadow:0 0 0 3px var(--asphalt),0 0 0 6px var(--stripe)}
.pname{margin:.2rem 0 1.2rem;font-weight:700;color:var(--paint)}
.pnote{font-size:1.05rem;color:var(--mute);max-width:30em}
.stage{background:var(--stripe);padding:12px;overflow:hidden;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%)}
.bld{display:block;width:100%;height:auto}
.bld .wall{fill:var(--wall);transition:fill .55s}
.bld .door{fill:var(--door);transition:fill .55s}
.bld .trim{fill:var(--trim);transition:fill .55s}
.bld .flaw{opacity:0;transition:opacity .55s}
.bld.is-before .flaw{opacity:1}
@media (max-width:860px){.paint-grid{grid-template-columns:1fr}}

/* bento */
.s-why{background:var(--stripe);color:var(--tar)}
.s-why h2{max-width:22ch;margin-bottom:2.4rem}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{position:relative;overflow:hidden;color:var(--tar);padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem;min-height:13rem}
.tile h3{font-size:clamp(1.9rem,1.5rem + 1.2vw,2.6rem)}
.tile p{margin:0;max-width:30em}
@media (hover:hover) and (pointer:fine){
  .tile::after{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,-50%),rgba(255,194,14,.28),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
  .tile:hover::after{opacity:1}
}
.t1{grid-column:span 7;grid-row:span 2;background:var(--tar);color:var(--paint);clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%)}
.t1 h3{font-size:clamp(2.8rem,1.8rem + 3.6vw,5.2rem);line-height:.95;color:var(--stripe)}
.t1 p{font-size:1.25rem;color:var(--silver)}
.t2{grid-column:span 5;background:var(--paint)}
.t3{grid-column:span 5;background:linear-gradient(180deg,#fff 0%,#d3d6db 60%,#b9bdc3 100%)}
.t4{grid-column:span 6;background:var(--tar);color:var(--paint)}
.t4 h3{color:var(--stripe)}
.t5{grid-column:span 6;background:var(--paint)}
.bento.even .tile{grid-column:span 6;grid-row:auto;min-height:12rem}
@media (max-width:900px){.t1,.t2,.t3,.t4,.t5,.bento.even .tile{grid-column:span 12;grid-row:auto}}

/* process: parking bays */
.s-proc{background:var(--deck) var(--grain);color:var(--paint)}
.s-proc h2{margin-bottom:3rem;max-width:14ch}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(.8rem,2vw,1.6rem)}
.steps li{position:relative;border:6px solid var(--paint);border-bottom:0;padding:1.2rem 1.2rem 1.6rem;min-height:18rem}
.steps li:nth-child(2n){border-color:var(--silver)}
.steps .n{display:block;font:900 clamp(5rem,4rem + 4vw,8.5rem)/.8 var(--stencil);color:var(--stripe);margin-bottom:1.2rem}
.steps h3{margin-bottom:.6rem;font-size:clamp(1.6rem,1.4rem + .6vw,2.1rem)}
.steps p{color:var(--silver)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:1.6rem}.steps li{min-height:0}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.band{margin-top:clamp(3rem,6vw,5rem);background:var(--stripe);color:var(--tar);padding:clamp(1.8rem,4vw,3.2rem) clamp(1.8rem,4vw,3.2rem) clamp(1.8rem,4vw,3.2rem) calc(16px + clamp(1.4rem,3vw,2.6rem));display:flex;justify-content:space-between;align-items:center;gap:1.6rem;flex-wrap:wrap;position:relative;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%)}
.band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:repeating-linear-gradient(-45deg,var(--tar) 0 12px,var(--stripe) 12px 24px)}
.band h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.5rem);max-width:18ch}
.band p{margin:.8rem 0 0;max-width:30em}
.band .cta{margin:0}
.band.tang{background:var(--paint)}
.band .btn.line{background:transparent;color:var(--tar);box-shadow:inset 0 0 0 3px var(--tar)}
.band .btn.line:hover{background:var(--tar);color:var(--stripe)}
.band .btn.line:focus-visible{box-shadow:inset 0 0 0 3px var(--tar),inset 0 0 0 7px var(--stripe)}
.calc-band{background:var(--tar);color:var(--paint)}
.calc-band::before{background:var(--hazard)}
.calc-band .btn.alt{background:var(--stripe);color:var(--tar)}

/* double-yellow divider */
.dbl{height:2.25rem;background:linear-gradient(var(--stripe),var(--stripe)) 0 calc(50% - 6px)/100% 6px no-repeat,linear-gradient(var(--stripe),var(--stripe)) 0 calc(50% + 6px)/100% 6px no-repeat,var(--asphalt)}

/* areas: parking bays */
.s-areas{background:var(--tar) var(--grain);color:var(--paint)}
.s-areas .lede{color:var(--silver);margin-top:1rem}
.bays{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9.5rem,100%),1fr));gap:0}
.bays li{border-left:5px solid var(--paint);border-top:5px solid var(--paint)}
.bays li:nth-child(odd){border-left-color:var(--stripe)}
.bays a{display:flex;flex-direction:column;justify-content:center;min-height:4.25rem;padding:.7rem 1rem;font:700 1.45rem/1.1 var(--display);text-decoration:none}
.bays a span{font:400 1rem/1.4 var(--body);color:var(--mute)}
.bays a:hover{background:var(--stripe);color:var(--tar)}
.bays a:hover span{color:var(--ink-2)}
.bays a:focus-visible{outline-offset:-5px}
.bays.big a{min-height:6rem;font-size:1.8rem}
.two-lists{display:grid;grid-template-columns:1fr 1fr;gap:2rem 4rem}
.two-lists h2{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);margin-bottom:1rem}
.links{list-style:none;margin:0;padding:0}
.links a{display:flex;align-items:center;min-height:3rem;border-bottom:2px dashed #4a4b50;text-decoration:none;font-weight:700}
.links a:hover{color:var(--stripe)}
@media (max-width:760px){.two-lists{grid-template-columns:1fr}}
.allsvc{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));gap:1.5rem 2rem}
.allsvc h3{font-size:1.5rem;border-bottom:4px solid var(--tar);padding-bottom:.3rem;margin-bottom:.4rem}
.allsvc ul{list-style:none;margin:0;padding:0}
.allsvc a{display:flex;align-items:center;min-height:2.75rem;line-height:1.3}

/* detail: what we ask for */
.s-detail{background:var(--paint);color:var(--tar)}
.asks{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem 4rem;align-items:start}
.asks h2{font-size:clamp(2rem,1.5rem + 2vw,3rem);margin-bottom:1rem}
.asklist{list-style:none;margin:1.4rem 0 0;padding:0;max-width:40em}
.asklist li{padding:.75rem 0 .75rem 1.6rem;border-top:2px dashed rgba(12,12,12,.3);position:relative}
.asklist li::before{content:"";position:absolute;left:0;top:1.25rem;width:.8rem;height:.8rem;background:var(--stripe);box-shadow:0 0 0 2px var(--tar)}
.req{display:inline-block;font:700 .95rem/1.2 var(--display);background:var(--tar);color:var(--stripe);padding:.1rem .45rem;margin-left:.3rem;vertical-align:.1em}
.opt{font-weight:400}
.tipbox{background:var(--tar);color:var(--paint);padding:1.6rem;border-left:12px solid var(--stripe)}
.tipbox h3{color:var(--stripe);margin-bottom:.6rem}
.tipbox p{margin:0}
@media (max-width:860px){.asks{grid-template-columns:1fr}}

/* inner page heads */
.s-page{background:var(--asphalt) var(--grain);color:var(--paint);padding:clamp(8rem,13vw,10.5rem) 0 clamp(3.6rem,7vw,6rem);position:relative}
.s-page::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:var(--hazard);z-index:2}
.s-page h1{font-size:clamp(2.9rem,1.6rem + 5.4vw,6.5rem);line-height:.96;max-width:14ch;margin-bottom:1.4rem}
.s-page .lede{color:var(--silver)}
.on-yellow{background:var(--stripe);color:var(--tar)}
.on-yellow .lede{color:var(--tar)}
.on-yellow::after,.on-slab::after{background:repeating-linear-gradient(-45deg,var(--tar) 0 16px,var(--stripe) 16px 32px)}
.on-tar{background:var(--tar) var(--grain)}
.on-slab{background:var(--slab);color:var(--tar)}
.on-slab .lede{color:var(--ink-2)}
.crumbs ol{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.2rem;font-size:1.05rem}
.crumbs li{display:flex;align-items:center;color:var(--silver)}
.crumbs li+li::before{content:"/";margin:0 .5rem;color:var(--stripe)}
.crumbs a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--paint)}
.on-yellow .crumbs li,.on-slab .crumbs li{color:var(--ink-2)}.on-yellow .crumbs a,.on-slab .crumbs a{color:var(--tar)}.on-yellow .crumbs li+li::before{color:var(--tar)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem 2rem;margin:2rem 0 0;padding:1.2rem 0 0;border-top:3px dashed #5a5b60}
.facts dt{font:700 1.15rem/1.2 var(--display);color:var(--stripe)}
.facts dd{margin:.2rem 0 0;color:var(--paint)}

/* contact + forms */
.s-contact{background:var(--slab);color:var(--tar)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.contact-grid h2{margin-bottom:1.2rem;max-width:16ch}
.s-contact .lede{color:var(--ink-2)}
.reach{margin:2rem 0;display:grid;gap:1.1rem}
.reach dt{font-weight:700;color:var(--ink-2)}
.reach dd{margin:0;font:800 clamp(1.6rem,1.2rem + 1.6vw,2.6rem)/1.1 var(--display);overflow-wrap:anywhere}
.reach a{text-decoration:none;background:linear-gradient(var(--stripe),var(--stripe)) 0 100%/100% 8px no-repeat;padding-bottom:.05em}
.reach a:hover{background-size:100% 100%}
.card{background:var(--tar);color:var(--paint);padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:1.1rem;border-top:14px solid var(--stripe);clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%)}
.row2{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
@media (max-width:600px){.row2{grid-template-columns:1fr}}
.f{display:grid;gap:.35rem;align-content:start}
.f>label,.f>legend{font-weight:700;font-size:1.05rem;color:var(--paint)}
.form-note{margin:0;font-size:1rem;color:var(--silver)}
.card .req{background:var(--stripe);color:var(--tar)}
input,select,textarea{font:inherit;font-size:1.125rem;font-weight:400;width:100%;min-height:3.1rem;padding:.7rem .9rem;background:var(--asphalt);color:var(--paint);border:2px solid #7a7d83;border-radius:0}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--stripe) 50%),linear-gradient(135deg,var(--stripe) 50%,transparent 50%);background-position:calc(100% - 22px) 55%,calc(100% - 15px) 55%;background-size:7px 7px;background-repeat:no-repeat;padding-right:2.6rem}
input:focus,select:focus,textarea:focus{outline:3px solid var(--stripe);outline-offset:0;border-color:var(--stripe)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger);box-shadow:inset 6px 0 0 var(--danger)}
::placeholder{color:#a3a6ac;opacity:1}
textarea{resize:vertical;min-height:7rem}
.f-err{margin:0;color:var(--danger);font-weight:700;font-size:1rem}
.f-err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-err{margin:0;color:var(--danger);font-weight:700}
.form-err:empty{display:none}
.sent{display:grid;gap:1rem}
.sent h3{font-size:2.2rem;color:var(--stripe)}
.sent ol{margin:0;padding-left:1.4rem;display:grid;gap:.6rem}
.sent .emg-note{border-left:8px solid var(--stripe);padding-left:1rem;margin:0}
.sent a{color:var(--stripe);font-weight:700}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:.8rem;max-width:62rem}
.faq details{background:var(--tar);color:var(--paint);border-left:10px solid var(--stripe)}
.faq details[open]{background:var(--asphalt)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.5rem;min-height:3.5rem;font:700 clamp(1.4rem,1.2rem + .8vw,1.9rem)/1.15 var(--display);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:2.4rem;height:2.4rem;background:var(--stripe);color:var(--tar);display:grid;place-items:center;font:800 1.8rem/1 var(--display);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline-offset:-4px}
.faq details p{padding:0 1.5rem 1.4rem;margin:0;max-width:46em;color:var(--silver)}

/* Preferred Vendor Program */
.bundles{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));margin-top:2rem}
.bundle{background:var(--paint);border-top:10px solid var(--tar);padding:1.4rem 1.4rem 1rem}
.bundle h3{font-size:2rem}
.bundle>p{color:var(--ink-2);margin:.3rem 0 .8rem}
.bundle ul{list-style:none;margin:0;padding:0}
.bundle li{border-top:2px dashed rgba(12,12,12,.3)}
.bundle a{display:flex;align-items:center;min-height:2.9rem;font-weight:700;text-decoration:none;line-height:1.3}
.bundle a:hover{text-decoration:underline}

/* turn calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}
.calc-in{background:var(--tar);padding:clamp(1.4rem,3vw,2.4rem);display:grid;gap:1.1rem;align-content:start;border-top:14px solid var(--stripe)}
.calc-in h2{font-size:clamp(2rem,1.5rem + 1.6vw,2.8rem)}
.help{margin:0;font-size:1rem;color:var(--mute)}
.rent-row{display:grid;grid-template-columns:1fr auto;gap:.5rem}
.rent-row select{width:auto}
.calc-out{background:var(--paint);color:var(--tar);padding:clamp(1.4rem,3vw,2.4rem);border-top:14px solid var(--tar)}
.calc-out h2{font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem);max-width:16ch}
.calc-out .big{font:800 clamp(3.4rem,2.4rem + 4vw,5.8rem)/1 var(--display);margin:1rem 0 .2rem;overflow-wrap:anywhere}
.calc-out .sub{margin:0 0 1.2rem;color:var(--ink-2)}
.calc-dl{margin:0 0 1.2rem;display:grid}
.calc-dl div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:2px dashed rgba(12,12,12,.3)}
.calc-dl dt{color:var(--ink-2)}
.calc-dl dd{margin:0;font:700 1.35rem/1.2 var(--display);text-align:right}
.calc-dl .hl{background:var(--stripe);padding:.6rem .8rem;border-top:0;margin-top:.2rem}
.calc-dl .hl dt{color:var(--tar);font-weight:700}
.assume{margin:0 0 1.4rem;border:2px solid var(--tar);padding:0 1rem}
.assume summary{cursor:pointer;min-height:3rem;display:flex;align-items:center;font:700 1.25rem/1.1 var(--display)}
.assume ul{margin:0 0 .8rem;padding-left:1.2rem}
.assume li{margin:.3rem 0}
.yours{font-weight:700;border-left:8px solid var(--stripe);padding-left:.8rem}
@media (max-width:900px){.calc{grid-template-columns:1fr}}

/* proof: recent work, before/after, cases, quotes, packet (all hidden until /data/proof.json has entries) */
[data-proof][hidden]{display:none!important}
.s-work{background:var(--asphalt);color:var(--paint)}
.s-work .lede{color:var(--silver)}
.work-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(18rem,100%),1fr));margin-top:2rem}
.work-grid figure{margin:0;background:var(--tar);border-bottom:6px solid var(--stripe)}
.work-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.work-grid figcaption{padding:.8rem 1rem 1rem}
.work-grid figcaption b{display:block;font:700 1.35rem/1.15 var(--display)}
.work-grid figcaption span{color:var(--silver);font-size:1rem}
.s-ba{background:var(--tar);color:var(--paint)}
.s-ba .lede{color:var(--silver)}
.ba-list{display:grid;gap:2.5rem;margin-top:2rem;grid-template-columns:repeat(auto-fill,minmax(min(30rem,100%),1fr))}
.ba{margin:0;--pos:50%}
.ba-frame{position:relative;overflow:hidden;background:var(--asphalt);touch-action:pan-y pinch-zoom;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.ba-frame img{display:block;width:100%;height:auto;pointer-events:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-before img{width:100%;height:100%;object-fit:cover}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:6px;margin-left:-3px;background:var(--stripe);box-shadow:0 0 0 2px var(--tar)}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;background:var(--stripe);border-radius:50%;box-shadow:0 0 0 3px var(--tar)}
.ba-tag{position:absolute;top:.8rem;padding:.3rem .7rem;font:700 1.1rem/1 var(--display);background:var(--tar);color:var(--paint)}
.ba-tag.b{left:.8rem}.ba-tag.a{right:.8rem;background:var(--stripe);color:var(--tar)}
.ba-range{width:100%;margin:.8rem 0 0;min-height:3rem;padding:0;border:0;background:none;accent-color:var(--stripe)}
.ba-range:focus{outline:3px solid var(--stripe);outline-offset:2px}
.ba figcaption{margin-top:.4rem;color:var(--silver)}
.s-cases{background:var(--slab);color:var(--tar)}
.cases{display:grid;gap:2rem;margin-top:2rem}
.case{background:var(--paint);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-left:12px solid var(--stripe)}
.case-body{padding:clamp(1.4rem,3vw,2.2rem)}
.case h3{font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem);margin-bottom:1rem}
.case dl{margin:0;display:grid;gap:1rem}
.case dt{font:700 1.2rem/1.1 var(--display)}
.case dd{margin:.2rem 0 0}
.case .days{font:800 2.6rem/1 var(--display)}
.case-photos{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--tar);align-content:start}
.case-photos img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.case{grid-template-columns:1fr}}
.s-quotes{background:var(--tar) var(--grain);color:var(--paint)}
.quotes{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));margin-top:2rem}
.quotes figure{margin:0;padding:1.6rem;border-left:8px solid var(--stripe);background:var(--asphalt)}
.quotes blockquote{margin:0 0 1rem;font-size:1.25rem;line-height:1.55}
.quotes figcaption b{display:block;font:700 1.3rem/1.2 var(--display);color:var(--stripe)}
.quotes figcaption span{color:var(--silver)}
.s-packet{background:var(--slab);color:var(--tar)}
.s-packet .lede{color:var(--ink-2)}
.packet{list-style:none;margin:2rem 0 0;padding:0;max-width:44rem}
.packet li{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 0;border-top:3px solid var(--tar)}
.packet li[hidden]{display:none}
.doc-name{font:700 1.45rem/1.2 var(--display)}
.doc-act a{display:inline-flex;align-items:center;min-height:3rem;font-weight:700}

/* vendor sheet */
.s-sheet{background:var(--slab);color:var(--tar);padding:7.5rem 0 4rem}
.sheet-tools{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.5rem}
.sheet-tools p{margin:0;color:var(--ink-2)}
.sheet{background:#fff;color:#000;max-width:60rem;padding:clamp(1.4rem,4vw,3rem);border-top:12px solid var(--stripe);box-shadow:0 0 0 2px var(--tar)}
.sheet-head{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;border-bottom:4px solid #000;padding-bottom:1rem}
.sheet-head p{margin:0}
.sheet .sheet-brand{font:900 2.3rem/1 var(--stencil);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.4rem}
.sheet-brand span{background:var(--stripe);padding:0 .3rem;font-size:.6em;vertical-align:.25em;letter-spacing:.15em}
.sheet-head dl{margin:0;display:grid;gap:.3rem}
.sheet-head dt{font-weight:700;display:inline}
.sheet-head dt::after{content:": "}
.sheet-head dd{display:inline;margin:0}
.sheet h1{font-size:2.6rem;margin:1.2rem 0 1rem}
.sheet h2{font-size:1.55rem;margin:1.2rem 0 .4rem;border-bottom:2px solid #000}
.sheet-cols{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem}
.sheet-list{margin:0;padding-left:1.2rem}
.sheet-list li{margin:.25rem 0}
.vs-groups{columns:2;column-gap:1.5rem}
.vs-grp{break-inside:avoid;margin-bottom:.8rem}
.vs-grp h3{font-size:1.2rem}
.vs-grp ul{margin:0;padding-left:1rem;font-size:1rem;line-height:1.4}
@media (max-width:760px){.sheet-cols{grid-template-columns:1fr}.vs-groups{columns:1}}

/* 404 */
.s-404{min-height:80svh;display:flex;align-items:center}
.lot{display:flex;margin-bottom:2rem}
.lot span{width:5.5rem;height:7.5rem;border:5px solid var(--paint);border-bottom:0;margin-left:-5px}
.lot .empty{border-color:var(--stripe);background:repeating-linear-gradient(-45deg,rgba(255,194,14,.25) 0 10px,transparent 10px 20px)}
.s-404 .fine a{color:var(--stripe);font-weight:700}

/* footer */
.foot{background:var(--tar);color:var(--silver);padding:clamp(3rem,6vw,4.5rem) 0 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:2rem}
.foot h2{font-size:1.45rem;color:var(--stripe);margin-bottom:.6rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none}
.foot a{color:var(--paint)}
.foot a:hover{color:var(--stripe);text-decoration:underline}
.foot p{margin:0 0 .7rem}
.foot .foot-name{font:800 1.6rem/1.1 var(--display);color:var(--paint)}
.foot-reach a{font-weight:700;display:inline-block;padding:.3rem 0}
.cols2{columns:2;column-gap:1rem}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2.5rem;padding-top:1rem;border-top:2px dashed #3d3e42}
.foot-base a{display:inline-block;padding:.5rem 0}
.mega{font:900 clamp(5rem,23vw,21rem)/.8 var(--stencil);text-transform:uppercase;background:linear-gradient(180deg,#fff 0%,#c5c9cf 46%,#6f747c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;margin:2rem 0 -.08em;user-select:none}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* sticky mobile action bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;position:fixed;left:0;right:0;bottom:0;z-index:700;background:var(--tar);border-top:4px solid var(--stripe);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);transition:transform .2s}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:var(--bar);font:700 1.2rem/1 var(--display);color:var(--paint);text-decoration:none;border-right:2px solid #333}
  .mbar a.q{background:var(--stripe);color:var(--tar);border:0;--focus:var(--tar)}
  .mbar a:focus-visible{outline-offset:-5px}
  .mbar svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
  body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
  body.typing .mbar,html.intro-on .mbar{transform:translateY(110%)}
}

/* intro: the striper walks the first line across a black screen */
.fx{display:none;position:fixed;inset:0;z-index:1000;background:var(--tar) var(--grain);overflow:hidden;transition:opacity .8s;--mx:50%;--my:50%}
html.intro-on .fx{display:grid;place-items:center}
html.intro-on body{overflow:hidden}
.fx.out{opacity:0;pointer-events:none}
.fx-glow{position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,194,14,.16),transparent 66%)}
.fx-center{position:relative;text-align:center;padding:0 1.2rem;width:100%}
.fx-cap{margin:0 auto;max-width:none;min-height:1.6em;font:700 clamp(1.5rem,1.2rem + 1.4vw,2.3rem)/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--silver);opacity:0;transition:opacity .7s}
.fx-cap.show{opacity:1}
.fx-lane{position:relative;width:min(640px,80vw);height:12px;margin:7.2rem auto 1.8rem}
.fx-beam{position:absolute;inset:0;background:var(--stripe);transform:scaleX(0);transform-origin:0 50%;transition:transform 2.2s cubic-bezier(.45,.05,.3,1)}
.fx.beam .fx-beam{transform:scaleX(1)}
.fx-man{position:absolute;left:0;bottom:-2px;width:150px;margin-left:-35px;height:auto;transform:translateX(0);transition:transform 2.2s cubic-bezier(.45,.05,.3,1)}
.fx.beam .fx-man{transform:translateX(min(640px,80vw))}
.fx-mark{margin:0;line-height:.86}
.fx-word,.fx-sub{display:block;font:900 clamp(4.6rem,19vw,14rem)/.86 var(--stencil);letter-spacing:.01em;text-transform:uppercase;background:linear-gradient(180deg,#fff 0%,#c9cdd3 46%,#7b8088 100%);-webkit-background-clip:text;background-clip:text;color:transparent;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);padding:.02em 0}
.fx-sub{transition-delay:.35s}
.fx.mark .fx-word,.fx.mark .fx-sub{clip-path:inset(0 0 0 0)}
.fx-tag{display:inline-block;margin:1.2rem auto 0;max-width:none;background:var(--stripe);color:var(--tar);font:800 clamp(1rem,2.4vw,1.5rem)/1 var(--stencil);letter-spacing:.3em;padding:.5rem .9rem .45rem 1.2rem;text-transform:uppercase;opacity:0;transition:opacity .7s .9s}
.fx.mark .fx-tag{opacity:1}
.fx-enter{margin-top:2rem;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .8s,transform .8s}
.fx.ready .fx-enter{opacity:1;transform:none;pointer-events:auto}
.fx-skip{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:5;min-height:3rem;background:var(--tar);border:2px solid var(--silver);color:var(--paint);font:700 1.25rem/1 var(--display);padding:0 1rem;cursor:pointer}
.fx-skip:hover{border-color:var(--stripe);color:var(--stripe)}
.fx-snd{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:5;width:48px;height:48px;padding:0;border:2px solid var(--paint);background:rgba(255,255,255,.06);display:flex;gap:3px;align-items:center;justify-content:center;cursor:pointer}
.fx-snd i{width:3px;height:15px;background:var(--stripe);animation:fxeq 1.1s ease-in-out infinite}
.fx-snd i:nth-child(2){animation-delay:-.35s}.fx-snd i:nth-child(3){animation-delay:-.7s}.fx-snd i:nth-child(4){animation-delay:-.2s}
.fx-snd.off i{animation:none;height:3px;opacity:.5}
@keyframes fxeq{50%{transform:scaleY(.25)}}
@media (max-width:520px){.fx-man{width:110px;margin-left:-26px}.fx-lane{margin-top:5.5rem}}

/* robustness */
h1,h2,h3{overflow-wrap:break-word;hyphens:manual}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mq>div{animation:none;flex-wrap:wrap;width:auto}
  .mq-pause{display:none}
  .walker{animation:none;transform:translateX(calc(100cqw - var(--fw)))}
  .btn:hover,.sw:hover{transform:none}
  .fx-beam,.fx-man,.fx-word,.fx-sub{transition:none}
  .trail-man{display:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-iteration-count:1!important}
}

/* print: every page prints clean; the vendor sheet prints as one page */
@media print{
  @page{margin:12mm}
  html,body{background:#fff!important;color:#000!important;font-size:11pt}
  .nav,.mbar,.foot,.dbl,.fx,.skip-link,.trail,.trail-man,.mq-wrap,.hero-line,.sheet-tools,.btn,.cta,[data-print],.s-paint .stage{display:none!important}
  section,.s-page,.s-hero,.sec{background:#fff!important;color:#000!important;padding:0 0 1rem!important;min-height:0!important}
  .s-page::after{display:none}
  a{color:#000;text-decoration:none}
  .print-page .s-sheet{padding:0!important;background:#fff}
  .print-page .wrap{width:100%}
  .sheet{box-shadow:none;border-top:6px solid #000;padding:0;max-width:none}
  .sheet .sheet-brand span{background:none;border:1px solid #000}
  .sheet h1{font-size:20pt;margin:.4rem 0}
  .sheet h2{font-size:13pt;margin:.6rem 0 .2rem}
  .vs-grp ul{font-size:9.5pt;line-height:1.3}
  .sheet-list{font-size:10pt}
}