/* Cloudbreak Metal Roofing, in the owner's own livery: truck black, silver white and the light blue of his badge ring
   and pinstripes. Montserrat (the closest free match to the bold geometric lettering on his badge and truck) over Instrument Sans. Light blue never carries white text: blue buttons
   take black text, and blue text on light grounds uses the deeper --blue-text. */
@font-face{font-family:"Montserrat";src:url(/assets/fonts/montserrat-display.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Instrument";src:url(/assets/fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Montserrat Fallback";src:local("Arial");size-adjust:112%;ascent-override:86%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Instrument Fallback";src:local("Arial");size-adjust:97%;ascent-override:96%;descent-override:25%;line-gap-override:0%}

:root{
  --paper:#F3F4F2; --paper-2:#E6E8E9; --card:#FFFFFF; --white:#fff;
  --ink:#0B0C0F; --ink-2:#26292E; --mute:#585D64; --line:rgba(11,12,15,.13); --line-2:rgba(11,12,15,.07);
  --sky:#5AAAD8; --sky-hover:#7BBDE4; --sky-ink:#0B0C0F; --sky-deep:#16181C; --sky-light:#7DBFE6; --sky-wash:#E3F0F8;
  --blue-text:#1C6A93; --blue-text-2:#145273; --silver:#C9CED3;
  --display:"Montserrat","Montserrat Fallback",ui-sans-serif,system-ui,sans-serif;
  --text:"Instrument","Instrument Fallback",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"Instrument","Instrument Fallback",ui-sans-serif,system-ui,sans-serif; /* labels and figures: the text face, tabular figures */
  --r:14px; --r-s:9px; --nav:84px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.3,.5,1);
  --sh-1:0 1px 2px rgba(12,24,34,.06),0 2px 8px -2px rgba(12,24,34,.08);
  --sh-2:0 1px 2px rgba(12,24,34,.06),0 10px 30px -10px rgba(12,24,34,.22),0 24px 60px -30px rgba(12,24,34,.25);
  --gutter:16px;
}
@media (min-width:768px){:root{--gutter:32px}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.65;font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.028em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,1.3rem + 3.8vw,4.9rem)}
h2{font-size:clamp(1.7rem,1.2rem + 1.9vw,3rem)}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.012em;line-height:1.2}
sup{font-size:.55em;vertical-align:.7em;line-height:0;letter-spacing:0}
.mono{font-family:var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gutter),1240px);margin-inline:auto}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none;transition:transform .25s var(--ease)}
.skip:focus{transform:translateY(72px)}
:focus-visible{outline:3px solid var(--blue-text);outline-offset:3px;border-radius:6px}
.eyebrow{font-family:var(--mono);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 16px}
.eyebrow-light{color:rgba(255,255,255,.82)}
.lede{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.55;color:var(--ink-2);max-width:40em}
.fine{font-size:.82rem;line-height:1.55;color:var(--mute)}

/* ---- buttons: one primary (sky), quieter partners */
.btn{--bg:var(--sky);--fg:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;background:var(--bg);color:var(--fg);font:600 1rem/1 var(--text);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--spring),background-color .2s var(--ease),box-shadow .3s var(--ease),border-color .2s var(--ease);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 18px -8px rgba(12,24,34,.55)}
.btn:active{transform:translateY(1px) scale(.98)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}.btn-sky:hover{--bg:var(--sky-hover)}}
.btn-white{--bg:#fff;--fg:var(--sky-ink)}
@media (hover:hover){.btn-white:hover{--bg:var(--sky-wash)}}
.btn-ink{--bg:var(--ink);--fg:#fff}
@media (hover:hover){.btn-ink:hover{--bg:var(--ink-2)}}
.btn-glass{--bg:rgba(255,255,255,.14);--fg:#fff;border-color:rgba(255,255,255,.42);box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media (hover:hover){.btn-glass:hover{--bg:rgba(255,255,255,.24)}}
.btn-line{--bg:transparent;--fg:var(--ink);border-color:var(--line);box-shadow:none}
@media (hover:hover){.btn-line:hover{border-color:var(--ink)}}
.btn-line-light{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.4);box-shadow:none}
@media (hover:hover){.btn-line-light:hover{border-color:#fff}}
.btn-white:focus-visible,.btn-glass:focus-visible,.btn-line-light:focus-visible{outline-color:#fff}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--blue-text);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:gap .25s var(--ease),color .2s}
.link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s var(--spring)}
@media (hover:hover){.link:hover{color:var(--blue-text-2)}.link:hover svg{transform:translateX(3px)}}
.link:active svg{transform:translateX(5px)}

/* ---- the island: a floating black pill (his truck black, a hairline of his blue) with every option in it. It opens
   into the menu below the pill on phones and tablets, and collapses into a small pill while scrolling down. */
.island-wrap{position:fixed;top:calc(10px + env(safe-area-inset-top));left:0;right:0;z-index:60;display:flex;justify-content:center;pointer-events:none;padding:0 10px}
.island{pointer-events:auto;position:relative;width:min(100%,1180px);border-radius:32px;color:#fff}
.island-bg{position:absolute;inset:0;border-radius:inherit;background:#101216;box-shadow:0 0 0 1px rgba(90,170,216,.32) inset,0 18px 40px -18px rgba(0,0,0,.55);clip-path:inset(0 0 calc(100% - 64px) 0 round 32px);transition:clip-path .55s var(--ease)}
.island.open .island-bg{clip-path:inset(0 0 0 0 round 28px)}
.island.mini .island-bg{clip-path:inset(6px calc(50% - 92px) calc(100% - 58px) calc(50% - 92px) round 26px)}
.island-bar{position:relative;height:64px;display:flex;align-items:center;gap:6px;padding:0 10px 0 12px}
.island-bar>*{transition:opacity .3s var(--ease),transform .4s var(--ease)}
.island.mini .island-bar>*{opacity:0;transform:scale(.94);pointer-events:none;visibility:hidden;transition:opacity .2s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.island.mini,.island.mini .island-bar{pointer-events:none}
.island-mini{position:absolute;top:6px;left:50%;width:184px;height:52px;margin-left:-92px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:24px;background:transparent;color:#fff;cursor:pointer;opacity:0;visibility:hidden;transform:scale(.9);transition:opacity .2s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.island-mini .mark{width:30px;height:30px;border-radius:50%}
.island-mini-word{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.01em}
.island-mini svg:last-child{width:14px;height:14px;fill:none;stroke:var(--sky);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.island.mini .island-mini{pointer-events:auto;opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease) .1s,transform .45s var(--spring) .05s,visibility 0s}
.island-mini:active{transform:scale(.96)}
.island-mini:focus-visible{outline-color:var(--sky-light)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;border-radius:10px;padding:4px}
.brand .mark{width:40px;height:40px;flex:none;border-radius:50%}
.brand-text{display:grid;justify-items:center;line-height:1}
.brand-word{font-family:var(--display);font-weight:800;font-size:1.22rem;letter-spacing:.01em;line-height:1}
.brand-word sup{font-size:.4em;vertical-align:1.3em;margin-left:1px;font-weight:600}
.brand-sub{font-family:var(--text);font-size:.56rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.8;margin-top:3px}
.island :focus-visible{outline-color:var(--sky-light)}
.island-links{display:none;list-style:none;margin:0 auto 0 0;padding:0;gap:2px}
.island-links a{display:block;white-space:nowrap;padding:9px 14px;border-radius:999px;font-size:.94rem;font-weight:600;color:rgba(255,255,255,.72);text-decoration:none;transition:color .2s var(--ease),background-color .2s var(--ease)}
@media (hover:hover){.island-links a:hover{color:#fff;background:rgba(255,255,255,.08)}}
.island-links a:active{background:rgba(255,255,255,.14)}
.island-links a[aria-current="page"]{color:#fff;background:rgba(90,170,216,.18)}
.i-call{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:999px;color:#fff;text-decoration:none;font-weight:600;font-size:.94rem;border:1px solid rgba(255,255,255,.22);transition:background-color .2s,border-color .2s,transform .25s var(--spring)}
.i-call svg{width:18px;height:18px;fill:var(--sky)}
@media (hover:hover){.i-call:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}}
.i-call:active{transform:scale(.96)}
.i-call-num{display:none}
.i-cta{min-height:44px;padding:0 18px;font-size:.94rem}
.i-menu{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 16px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:#fff;font:600 .9rem/1 var(--text);cursor:pointer;transition:background-color .2s var(--ease)}
@media (hover:hover){.i-menu:hover{background:rgba(255,255,255,.16)}}
.i-menu:active{background:rgba(255,255,255,.22)}
.i-menu .bars{width:16px;height:10px;position:relative}
.i-menu .bars::before,.i-menu .bars::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .45s var(--ease),top .45s var(--ease)}
.i-menu .bars::before{top:0}.i-menu .bars::after{top:8px}
.island.open .i-menu .bars::before{top:4px;transform:rotate(45deg)}
.island.open .i-menu .bars::after{top:4px;transform:rotate(-45deg)}
.island-panel{position:relative;display:grid;padding:2px 16px 18px}
.island-panel[hidden]{display:none}
.island-panel a:not(.btn){display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 6px;border-top:1px solid rgba(255,255,255,.1);color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.08rem;transition:color .2s var(--ease)}
.island-panel a small{font-family:var(--text);font-weight:500;color:rgba(255,255,255,.6);font-size:.84rem;text-align:right}
.island-panel a span{white-space:nowrap}
@media (max-width:479px){.island-panel a small{display:none}.island-panel a:not(.btn){font-size:1.18rem;padding:15px 6px}}
.island-panel a[aria-current="page"] span{color:var(--sky)}
@media (hover:hover){.island-panel a:not(.btn):hover{color:var(--sky)}}
.island-panel a:not(.btn):active{color:var(--sky)}
.island-panel .btn{margin-top:12px;width:100%}
.island.open .island-panel>*{animation:panel-in .5s var(--ease) both}
.island.open .island-panel>*:nth-child(2){animation-delay:.04s}.island.open .island-panel>*:nth-child(3){animation-delay:.08s}
.island.open .island-panel>*:nth-child(4){animation-delay:.12s}.island.open .island-panel>*:nth-child(5){animation-delay:.16s}
.island.open .island-panel>*:nth-child(6){animation-delay:.2s}.island.open .island-panel>*:nth-child(7){animation-delay:.24s}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:599px){
  .island-bar{padding:0 8px 0 8px;gap:5px}.brand{gap:7px}.brand .mark{width:34px;height:34px}.brand-word{font-size:1rem}.brand-sub{font-size:.48rem;letter-spacing:.15em}
  .i-cta{padding:0 13px;min-height:40px;font-size:.86rem}.i-call{width:40px;height:40px;padding:0;justify-content:center}
  .i-menu{width:40px;height:40px;padding:0;justify-content:center}.i-menu .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:374px){.brand-word{font-size:.86rem}.brand-sub{font-size:.42rem}.i-cta{padding:0 10px;font-size:.8rem}}
@media (max-width:339px){.brand-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (min-width:1100px){.i-call-num{display:inline}.i-call{padding:0 16px 0 13px}}
@media (min-width:1000px){.island-links{display:flex}.i-menu{display:none}.island-panel{display:none!important}.island-bar{padding:0 10px 0 16px}}
.wide-only{display:none}
@media (min-width:768px){.wide-only{display:inline}.phone-only{display:none}}

/* ---- hero: his video full screen. Landscape screens play the landscape cut, phones and portrait tablets the portrait
   cut. The poster (each video's first frame) paints first and stays for reduced motion, data saver and no JS. */
.hero{position:relative;background:var(--ink);color:#fff;isolation:isolate;min-height:100vh;min-height:100lvh;display:flex}
.hero-stage{position:relative;overflow:hidden;flex:1;display:flex}
.hero-photo{position:absolute;inset:0;overflow:hidden}
.hero-img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-video{opacity:0}
.hero-video.on{opacity:1}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,10,14,.42) 0,rgba(8,10,14,0) 18%,rgba(8,10,14,0) 50%,rgba(8,10,14,.5) 78%,rgba(8,10,14,.72) 100%)}
.hero-copy{position:relative;z-index:1;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;padding:calc(var(--nav) + 24px) 0 calc(24px + env(safe-area-inset-bottom));min-height:100%}
/* where the browser's toolbars overlap the large viewport, lift the copy by exactly that much */
@supports (height:100lvh){.hero-copy{padding-bottom:calc(24px + (100lvh - 100svh) + env(safe-area-inset-bottom))}}
/* the glass tile: an iPhone folder, frosted. Heavy blur and a lift in saturation and brightness of the video behind,
   a pale fill, a light top edge and a soft shadow, with large continuous corners */
.hero-glass{width:min(100%,500px);padding:clamp(18px,2.4vw,28px) clamp(18px,2.4vw,30px);border-radius:clamp(22px,2.6vw,30px);background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero-glass{background:rgba(20,24,30,.72)}}
@media (prefers-reduced-transparency:reduce){.hero-glass{background:rgba(20,24,30,.86);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (max-width:599px){.hero-glass{padding:18px 16px}.hero-ctas{flex-wrap:nowrap;gap:8px}.hero-ctas .btn{padding:0 14px;font-size:.88rem;min-height:44px}}
@media (max-width:359px){.hero-ctas{flex-wrap:wrap}}
.hero-glass .eyebrow{margin-bottom:12px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero-glass h1,.hero-glass .hero-sub{margin-inline:0}
.hero-glass .hl{display:inline}
.hero h1{font-size:clamp(1.75rem,1.1rem + 2vw,2.6rem);font-weight:800;line-height:1.08;max-width:20ch;text-shadow:0 2px 16px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.45)}
.hl{display:inline}
@media (min-width:768px){.hl{display:inline-block}}
.hero-sub{font-size:clamp(.95rem,.9rem + .2vw,1.05rem);line-height:1.5;max-width:34em;margin:10px 0 18px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
@media (hover:hover){}
@media (prefers-reduced-motion:no-preference){
  /* movement only, never a fade from invisible: the headline is the page's largest paint and must count at first frame */
  .hl{animation:lift .95s var(--ease) both}
  .hl:nth-child(2){animation-delay:.06s}.hl:nth-child(3){animation-delay:.12s}
  .hero-sub,.hero-ctas{animation:lift .9s var(--ease) .18s both}
}
@keyframes lift{from{transform:translateY(.35em)}to{transform:none}}
@media (min-aspect-ratio:1/1) and (min-width:900px){
  .hero{max-height:1100px;height:100vh;height:100svh;min-height:620px}
  .hero-shade{background:radial-gradient(75% 70% at 10% 100%,rgba(8,10,14,.8),rgba(8,10,14,.35) 55%,rgba(8,10,14,0) 80%),linear-gradient(180deg,rgba(8,10,14,.42) 0,rgba(8,10,14,0) 18%)}
  .hero-copy{padding-bottom:clamp(32px,6vh,64px)}
  }

/* ---- sections */
section{position:relative}
.work{padding:clamp(44px,6vw,80px) 0 clamp(36px,5vw,64px)}
.work-head{margin-bottom:20px}
.work-head h2{max-width:16ch}
.work-head .eyebrow{margin-bottom:10px}
/* recent work: the photos slide past constantly. The list is there twice so the loop is seamless; touching or hovering
   a photo holds it (the card, not the whole band), and reduced motion gets a plain swipeable row instead */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:12px;width:max-content;animation:marquee 46s linear infinite}
.marquee-track:has(li:hover),.marquee-track:has(li:active){animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 6px))}}
.marquee-track li{flex:0 0 auto;width:44vw;max-width:300px}
@media (min-width:768px){.marquee-track{gap:16px}.marquee-track li{width:280px}@keyframes marquee{to{transform:translateX(calc(-50% - 8px))}}}
.marquee figure{margin:0}
.marquee img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-s);background:var(--paper-2);box-shadow:var(--sh-1)}
.marquee figcaption{font-size:.86rem;line-height:1.4;color:var(--ink-2);margin-top:10px}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory;padding:0 var(--gutter)}
  .marquee-track{animation:none}.marquee-track li[aria-hidden="true"]{display:none}.marquee-track li{scroll-snap-align:start}
}
.tag{display:block;font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-text);margin-bottom:4px}

.intro{background:var(--paper-2);padding:clamp(44px,7vw,104px) 0}
.intro-in{display:grid;gap:20px}
.statement{font-size:clamp(1.55rem,1.1rem + 1.8vw,2.7rem);font-weight:700;line-height:1.15;max-width:24ch}
.statement-s{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.2rem)}
.intro-body{max-width:34em;color:var(--ink-2)}
@media (min-width:1024px){.intro-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px}.intro-in .eyebrow{grid-column:1/-1;margin:0}.intro-body{padding-top:10px}}

.disc{padding:clamp(72px,9vw,128px) 0}
.disc-ranges{padding:clamp(40px,6vw,80px) 0 clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.disc-link{display:grid;gap:6px;text-decoration:none;color:inherit;border-radius:var(--r-s);transition:transform .35s var(--spring)}
.disc-link .link{margin-top:10px;justify-self:start}
@media (hover:hover){.disc-link:hover{transform:translateY(-3px)}.disc-link:hover .link svg{transform:translateX(3px)}}
.disc-link:active{transform:scale(.99)}
.disc-head{margin-bottom:40px}
.disc-head h2{max-width:16ch}
.disc-list{list-style:none;margin:0 0 36px;padding:0;display:grid;gap:0}
.disc-list li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:24px 0;border-top:1px solid var(--line)}
.disc-draw{max-width:340px;margin-bottom:6px}
.disc-list p{color:var(--ink-2);max-width:32em;margin:0}
@media (min-width:900px){.disc-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.disc-list li{padding-top:28px}}

.swatch{padding:clamp(44px,6vw,88px) 0;overflow-x:clip}
.swatch-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:24px}
.swatch-head h2{max-width:15ch}
.strip{display:flex;height:clamp(130px,20vw,250px);padding:0 max(var(--gutter),calc((100% - 1240px)/2))}
.strip span{position:relative;flex:1;background:var(--c);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,rgba(255,255,255,0) 2px 6px,rgba(0,0,0,.14) 7px 8px,rgba(0,0,0,0) 9px 10px),linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.12));
  transition:transform .45s var(--spring)}
.strip span:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}.strip span:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
@media (hover:hover){
  .strip span:hover{transform:translateY(-14px)}
  .strip span::after{content:attr(data-n);position:absolute;left:50%;bottom:calc(100% + 22px);transform:translateX(-50%) translateY(6px);white-space:nowrap;font:600 .8rem/1 var(--text);color:var(--ink);background:var(--card);padding:7px 10px;border-radius:999px;box-shadow:var(--sh-1);opacity:0;transition:opacity .2s,transform .3s var(--ease);pointer-events:none}
  .strip span:hover::after{opacity:1;transform:translateX(-50%)}
  /* the labels on the outer sheets open inward so they never hang past the page edge */
  .strip span:nth-child(-n+3)::after{left:0;transform:translateY(6px)}
  .strip span:nth-last-child(-n+3)::after{left:auto;right:0;transform:translateY(6px)}
  .strip span:nth-child(-n+3):hover::after,.strip span:nth-last-child(-n+3):hover::after{transform:none}
}
.strip-note{margin-top:16px;font-size:.86rem;color:var(--mute)}

.band{background:var(--ink);color:#fff;padding:clamp(48px,7vw,96px) 0 clamp(96px,11vw,150px);overflow:hidden;
  background-repeat:no-repeat,no-repeat,repeat;background-position:left bottom,0 0,0 0;background-size:100% clamp(96px,11vw,150px),auto,auto;
  /* the livery: a silver swoosh and a blue pinstripe along the bottom edge, below every line of text */
  background-image:linear-gradient(176deg,transparent 0 30%,rgba(201,206,211,.13) 30% 64%,transparent 64% 70%,rgba(90,170,216,.75) 70% 72.5%,transparent 72.5%),radial-gradient(70% 110% at 90% 0%,rgba(90,170,216,.22),rgba(90,170,216,0) 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' 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 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.band-in{display:grid;gap:28px}
.band h2{max-width:12ch;margin-bottom:18px}
.band-copy>p:not(.eyebrow){color:rgba(255,255,255,.86);max-width:30em}
.band-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.band-proof{margin:0;display:grid;gap:0;align-content:end}
.band-proof div{padding:18px 0;border-top:1px solid rgba(255,255,255,.18)}
.band-proof div:first-child{border-top-color:var(--sky)}
.band-proof dt{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;line-height:1.1}
.band-proof dd{margin:4px 0 0;color:rgba(255,255,255,.78);font-size:.95rem}
@media (min-width:1024px){.band-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px}}

.foot{background:var(--ink);color:rgba(255,255,255,.78);padding:44px 0 24px;font-size:.93rem}
.foot-in{display:grid;gap:24px}
.foot-logo{display:inline-block;border-radius:50%;margin-bottom:14px}
.foot-logo-img{width:120px;height:120px;display:block}
.foot-links{display:grid;gap:4px;align-content:start}
.foot-links a,.foot-facts a{color:#fff;text-decoration:none;padding:6px 0;width:max-content;border-bottom:1px solid transparent;transition:border-color .2s}
.foot-links a:hover,.foot-facts a:hover{border-color:currentColor}
.foot-links a:active{color:var(--sky-light)}
.foot :focus-visible{outline-color:var(--sky-light)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;color:rgba(255,255,255,.6)}
.foot-base p{margin:0}
.foot-credit a{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;margin:-6px -10px;border-radius:999px;color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s,background-color .2s}
.foot-credit b{font-family:var(--display);font-weight:800;letter-spacing:.06em;color:#fff}
@media (hover:hover){.foot-credit a:hover{color:#fff;background:rgba(255,255,255,.08)}}
.foot-credit a:active{background:rgba(255,255,255,.14)}
@media (min-width:900px){.foot-in{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr)}}

/* ---- inner pages */
.page-head{padding:calc(var(--nav) + clamp(20px,4vw,64px)) 0 clamp(28px,5vw,72px)}
.page-head h1{max-width:13ch;margin-bottom:16px}
/* about: the opening is a dark panel in his truck black, with the livery stripe along its foot */
.about-head{background:var(--ink);color:#fff;padding-bottom:clamp(64px,8vw,104px);
  background-image:linear-gradient(176deg,transparent 0 62%,rgba(201,206,211,.12) 62% 84%,transparent 84% 88%,rgba(90,170,216,.75) 88% 89.4%,transparent 89.4%),radial-gradient(70% 90% at 95% 0%,rgba(90,170,216,.2),rgba(90,170,216,0) 60%)}
.about-head .lede{color:rgba(255,255,255,.84)}
.about-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:620px}
.about-facts li{display:grid;gap:2px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-s);background:rgba(255,255,255,.04)}
.about-facts li:first-child{border-color:rgba(90,170,216,.55)}
.about-facts b{font-family:var(--display);font-weight:800;font-size:clamp(1rem,.9rem + .6vw,1.35rem);letter-spacing:-.01em;line-height:1.1}
.about-facts span{font-size:.78rem;line-height:1.3;color:rgba(255,255,255,.66)}
/* the story: one outlined card with a blue edge, so it reads as a block, not loose text on paper */
.story{padding:clamp(28px,5vw,64px) 0;background:var(--paper-2)}
.story-card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--sky);border-radius:var(--r);box-shadow:var(--sh-2);padding:clamp(22px,4vw,48px);display:grid;gap:20px}
.story-top{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.story-top .eyebrow{margin:0 0 6px}
.story-top h2{font-size:clamp(1.45rem,1.1rem + 1.5vw,2.3rem)}
.story-logo{width:84px;height:84px;display:block;flex:none}
.story-body{color:var(--ink-2);font-size:1.02rem;max-width:62em}
.story-body p:last-child{margin-bottom:0}
.story-lead{font-size:1.12rem;color:var(--ink);font-weight:500;padding-left:14px;border-left:3px solid var(--sky)}
@media (min-width:900px){.story-body{columns:2;column-gap:44px}.story-lead{column-span:all;margin-bottom:1.2em}.story-body p{break-inside:avoid}}
.about-photo{margin:0}
.about-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh-2)}
figcaption{font-size:.82rem;color:var(--mute);margin-top:10px}

@media (min-width:1024px){.story-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px}}
.why{background:var(--paper);padding:clamp(40px,6vw,88px) 0}
.why h2{max-width:14ch;margin-bottom:20px}
.why-list{margin:0;display:grid;gap:0}
.why-list div{display:grid;gap:4px;padding:18px 0;border-top:1px solid var(--line)}
.why-list dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text)}
.why-list dd{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
@media (min-width:768px){.why-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}.why-list div{grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:16px;align-items:baseline}}
.licence{padding:clamp(36px,6vw,88px) 0}
.licence-in{display:grid;gap:20px;align-items:center}
.licence-card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(24px,4vw,44px);box-shadow:var(--sh-2)}
.licence-no{display:block;font-family:var(--display);font-size:clamp(2.6rem,1.8rem + 3.6vw,4.8rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--sky-ink);margin:4px 0 18px}
.licence-card p:last-child{margin:0;color:var(--ink-2)}
.licence-photo{margin:0}
.licence-photo img{width:100%;height:auto;border-radius:var(--r);aspect-ratio:1320/742;object-fit:cover}
@media (min-width:1024px){.licence-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px}}
.close{padding:0 0 clamp(44px,6vw,96px)}
.close-in{display:grid;gap:20px;align-items:center}
.close figure{margin:0}
.close img{width:100%;height:auto;border-radius:var(--r);aspect-ratio:4/3;object-fit:cover}
.sig{font-family:var(--mono);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:24px}
@media (min-width:1024px){.close-in{grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:64px}}

/* ranges */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.jump a{padding:9px 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-weight:550;font-size:.93rem;background:var(--card);transition:border-color .2s,background-color .2s,transform .3s var(--spring)}
@media (hover:hover){.jump a:hover{border-color:var(--ink);transform:translateY(-2px)}}
.jump a:active{background:var(--paper-2)}
.sec-head{display:grid;gap:10px;margin-bottom:22px}
.sec-head h2{max-width:16ch}
.sec-head p{margin:0;max-width:36em;color:var(--ink-2)}
@media (min-width:1024px){.sec-head{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:end;column-gap:56px}}
.try{padding:clamp(36px,5vw,80px) 0;background:var(--paper-2)}
.try-grid{display:grid;gap:20px}
.try-stage-wrap{position:sticky;top:var(--nav);z-index:3;background:var(--paper-2);padding:8px 0 10px;margin:0 calc(-1*var(--gutter));padding-inline:var(--gutter)}
.try-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-s);overflow:hidden;background:#cfd1cc;box-shadow:var(--sh-2)}
.try-stage img,.try-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.try-paint{opacity:0;transition:opacity .45s var(--ease)}
.try-paint.on{opacity:1}
.try-now{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:.95rem;color:var(--ink-2)}
.try-chip{width:22px;height:22px;border-radius:6px;background:var(--c,transparent);border:1px solid var(--line);flex:none}
.try-pick{min-width:0}
.sw{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
@media (min-width:600px){.sw{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1024px){.sw{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sw-item{position:relative;display:grid;gap:5px;cursor:pointer;font-size:.74rem;line-height:1.2;color:var(--ink-2)}
.sw-item input{position:absolute;opacity:0;width:1px;height:1px}
.sw-chip{aspect-ratio:1.25;border-radius:8px;background:var(--c);border:1px solid rgba(0,0,0,.1);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,rgba(255,255,255,0) 2px 5px,rgba(0,0,0,.13) 6px 7px,rgba(0,0,0,0) 8px 9px);
  transition:transform .3s var(--spring),box-shadow .2s var(--ease)}
.sw-asbuilt .sw-chip{background:url(/assets/img/try-base-1000.webp) 45% 30%/400% auto;border-style:dashed}
@media (hover:hover){.sw-item:hover .sw-chip{transform:translateY(-3px);box-shadow:var(--sh-1)}}
.sw-item:active .sw-chip{transform:scale(.95)}
.sw-item input:checked~.sw-chip{box-shadow:0 0 0 2px var(--paper-2),0 0 0 4px var(--blue-text)}
.sw-item input:checked~.sw-name{color:var(--ink);font-weight:650}
.sw-item input:focus-visible~.sw-chip{outline:3px solid var(--blue-text);outline-offset:3px}
.sw-tags{position:absolute;top:4px;right:4px;display:flex;gap:2px}
.sw-tags abbr,.sw-key abbr{font-family:var(--mono);font-size:.58rem;text-decoration:none;background:rgba(255,255,255,.88);color:var(--ink);border-radius:4px;padding:1px 4px;line-height:1.4}
.sw-key{font-size:.8rem;color:var(--mute);margin:16px 0}
.sw-key abbr{border:1px solid var(--line);margin-right:3px}
.sw-key abbr+abbr,.sw-key abbr:nth-of-type(2){margin-left:10px}
.try-cta{margin:4px 0 14px}
.coast{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:12px}
.coast p{margin:0;color:var(--ink-2);max-width:34em}
.coast-list{margin:0;display:grid;gap:8px}
.coast-list div{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;background:var(--card);border-radius:var(--r-s);border:1px solid var(--line-2)}
.coast-list dd{margin:0;font-weight:600}
@media (min-width:900px){.coast{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:start}.coast h3,.coast>p{grid-column:1}.coast-list{grid-column:2;grid-row:1/span 2}}
@media (min-width:1024px){.try-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:40px;align-items:start}.try-stage-wrap{margin:0;padding:0;top:calc(var(--nav) + 20px)}}

.range{padding:clamp(36px,5vw,80px) 0}
.range-alt{background:var(--paper-2)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:768px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1200px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.cards-3,.cards-gut{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:16px 14px 16px;box-shadow:var(--sh-1);display:flex;flex-direction:column;min-width:0;transition:transform .35s var(--spring),box-shadow .35s var(--ease)}
@media (hover:hover){.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}}
.card-draw{background:var(--paper);border-radius:var(--r-s);padding:14px 10px 8px;margin-bottom:12px}
.card h3{font-size:clamp(1rem,.9rem + .5vw,1.25rem);overflow-wrap:anywhere}
.card-style{font-size:.8rem;color:var(--mute);margin:4px 0 10px}
.card-note{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin:10px 0 0;display:none}
@media (min-width:600px){.card{padding:16px 16px 18px}.card-note{display:block}}
.spec{margin:auto 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;font-size:.76rem;line-height:1.3}
.spec div{min-width:0}
.spec dt{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.spec dd{margin:1px 0 0;font-weight:600;color:var(--ink)}
.spec div:nth-child(n+5){display:none}
@media (min-width:600px){.spec{font-size:.84rem}.spec div:nth-child(n+5){display:block}}
.prof{width:100%;height:auto;overflow:visible}
.prof-sheet{fill:none;stroke:var(--ink);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.prof-dim{fill:none;stroke:var(--blue-text);stroke-width:1.2;vector-effect:non-scaling-stroke}
.prof-t{font-family:var(--mono);font-size:26px;fill:var(--mute)}
.disc-draw .prof-t,.disc-draw .prof-dim{display:none}
.gut{width:100%;height:auto;max-height:120px}
.gut path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.gut .gut-faint{stroke:var(--mute);stroke-width:2;stroke-dasharray:5 5}
.card-gut .card-draw{padding:16px 24px}
.draw-key{margin-top:20px;max-width:46em}
.fascia-in{display:grid;gap:24px;align-items:center;max-width:48em}
.fascia-draw{max-width:220px;background:var(--card);margin:0}
.fascia-in h3{margin:16px 0 10px}
.fascia-in p{max-width:36em;color:var(--ink-2);margin:0}

.src{padding:20px 0 36px}

/* contact */
.contact-in{display:grid;gap:28px}
.contact-copy h1{max-width:11ch}
.next{list-style:none;counter-reset:n;margin:22px 0;padding:0;display:grid;gap:0}
.next li{counter-increment:n;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.next li::before{content:counter(n);grid-row:span 2;width:28px;height:28px;border-radius:999px;background:var(--sky-ink);color:#fff;font:600 .8rem/28px var(--mono);text-align:center}
.next b{font-weight:650}
.next span{color:var(--mute);font-size:.95rem}
.contact-facts{margin:0;display:grid;gap:14px;font-size:.95rem}
.contact-facts dt{font-family:var(--mono);font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.contact-facts dd{margin:2px 0 0}
.q-wrap{position:relative}
.q,.q-state{background:var(--card);border:1px solid var(--line-2);border-radius:calc(var(--r) + 4px);padding:clamp(20px,3.4vw,36px);box-shadow:var(--sh-2)}
.q-state:focus{outline:none}
.q-state h2{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem);margin-bottom:14px}
.q-fail .eyebrow{color:#9B2C2C}
.q-state:not(.q-fail){border-top:3px solid var(--sky)}
.q-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.q-count{margin:0;font-family:var(--mono);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.q-prog{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.q-prog li{width:26px;height:4px;border-radius:4px;background:var(--line);transition:background-color .3s}
.q-prog li.on{background:var(--sky)}
.q fieldset{border:0;margin:0;padding:0;min-width:0}
.q legend{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem);letter-spacing:-.02em;line-height:1.15;margin-bottom:18px;padding:0}
.q-hint{color:var(--mute);font-size:.93rem;margin:-6px 0 14px}
.q-sub{font-weight:600;font-size:.95rem;margin:18px 0 8px}
.q i{font-style:normal;color:var(--mute);font-weight:400;font-size:.88em;margin-left:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);font-weight:550;font-size:.97rem;transition:background-color .2s,border-color .2s,color .2s,transform .3s var(--spring)}
@media (hover:hover){.chip:hover span{border-color:var(--ink);transform:translateY(-1px)}}
.chip:active span{transform:scale(.97)}
.chip input:checked+span{background:var(--sky);border-color:var(--sky);color:var(--ink);font-weight:650}
.chip input:focus-visible+span{outline:3px solid var(--blue-text);outline-offset:3px}
.field{display:grid;gap:6px;margin-top:14px;font-weight:600;font-size:.95rem}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--white);color:var(--ink);font:400 1rem/1.4 var(--text);transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:96px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(26,28,31,.35)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-text);box-shadow:0 0 0 3px rgba(90,170,216,.38)}
.field [aria-invalid="true"]{border-color:#B42318;box-shadow:0 0 0 3px rgba(180,35,24,.14)}
/* building plans: a drop zone that is the file input, and a list of the PDFs with size, progress and remove */
.plans{position:relative}
.plans-drop{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px dashed rgba(11,12,15,.28);border-radius:12px;background:var(--paper);cursor:pointer;transition:border-color .2s,background-color .2s}
.plans-drop svg{width:28px;height:28px;flex:none;fill:none;stroke:var(--blue-text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.plans-drop b{display:block;font-weight:650;font-size:.98rem}
.plans-drop small{display:block;font-weight:400;font-size:.84rem;color:var(--mute)}
.plans-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
@media (hover:hover){.plans-drop:hover{border-color:var(--blue-text);background:var(--sky-wash)}}
.plans-drop:active,.plans-drop.over{border-color:var(--blue-text);background:var(--sky-wash)}
.plans-drop:focus-within{outline:3px solid var(--blue-text);outline-offset:3px}
.plans-drop.full{opacity:.55;pointer-events:none}
.plans-help{margin:6px 0 0;font-weight:400;font-size:.82rem;color:var(--mute)}
.plans-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.plan{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto 36px;align-items:center;gap:10px;padding:8px 6px 8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white);overflow:hidden;font-weight:500}
.plan>svg{width:20px;height:20px;fill:none;stroke:#B42318;stroke-width:1.8;stroke-linejoin:round}
.plan-name{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-size{font-size:.8rem;color:var(--mute);font-variant-numeric:tabular-nums}
.plan-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.plan-bar i{display:block;height:100%;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.plan.up .plan-bar i{background:#2E7D4F}
.plan-x{width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--mute);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s}
.plan-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (hover:hover){.plan-x:hover{background:var(--paper-2);color:var(--ink)}}
.plan-x:active{background:var(--paper-2)}
.plans-err{margin:6px 0 0;color:#B42318;font-weight:600;font-size:.88rem}
.plans-err:empty{display:none}
.plans-done{font-weight:600;color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q-err{min-height:1.5em;margin:16px 0 0;color:#B42318;font-weight:600;font-size:.93rem}
.q-err:empty{margin-top:8px}
.q-nav{display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.q-nav #q-next{margin-left:auto;min-width:150px}
.q-nav .btn[aria-busy="true"]{opacity:.75;cursor:progress}
@media (min-width:1024px){.contact-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}.q-wrap{position:sticky;top:calc(var(--nav) + 24px)}}

/* ---- pitch guide on the ranges page */
.pitch{display:grid;gap:24px;margin:0 0 40px;padding:clamp(20px,3vw,32px);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-1)}
.pitch-copy h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin-bottom:8px}
.pitch-copy>p{color:var(--ink-2);margin:0 0 16px;max-width:30em}
.pitch-tool{display:none}
.js .pitch-tool{display:grid;gap:10px;max-width:420px}
.pitch-svg{width:100%;height:auto;background:var(--paper);border-radius:var(--r-s)}
.pitch-base{stroke:var(--line);stroke-width:2;fill:none}
.pitch-roof{stroke:var(--ink);stroke-width:6;stroke-linecap:round;fill:none;transition:transform .3s var(--ease);transform-origin:16px 104px}
.pitch-deg{font-family:var(--mono);font-size:15px;fill:var(--blue-text);font-weight:600}
.pitch-label{display:flex;justify-content:space-between;font-weight:600;font-size:.95rem}
.pitch-label output{font-family:var(--mono);color:var(--blue-text)}
.pitch-tool input[type=range]{width:100%;accent-color:var(--blue-text);min-height:44px;cursor:pointer}
.pitch-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start}
.pitch-list li{display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--paper);transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .35s var(--spring)}
.pitch-range{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.pitch-list b{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.015em}
.pitch-why{font-size:.9rem;color:var(--ink-2)}
.pitch-list li.on{background:var(--sky-wash);border-color:var(--sky);transform:translateX(4px)}
.pitch-list li.on .pitch-range{color:var(--blue-text)}
.pitch-note{margin:0}
@media (min-width:900px){.pitch{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px}.pitch-note{grid-column:1/-1}}

/* reveal on entry: JS adds .rv only when motion is allowed, so content is never hidden without it */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}