/* RoofZilla: Zilla Slab over Archivo, self hosted latin subsets (20 Oct 2026; was Big Shoulders Display). A slab for the
   headlines reads like stamped steel and hardware store signage, and shares the brand's name; its bold italic carries
   the orange words, the same lean as the logo. Zilla Slab is SIL Open Font Licence (Mozilla). */
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/zilla-slab-700.woff2") format("woff2")}
@font-face{font-family:"Zilla Slab";font-style:italic;font-weight:700;font-display:swap;src:url("/assets/fonts/zilla-slab-700-italic.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/archivo.woff2") format("woff2")}
/* fallback faces sized so a line breaks where the web font breaks it, each measured against the real headlines
   (Zilla Slab bold 5358 against Rockwell bold 6375 and Georgia bold 6342; Archivo 1404 against Helvetica Neue 1454).
   One shared face over two locals once put a headline on one line in the fallback and two in the web font: a 30 px
   shift Lighthouse scored 0.11. */
@font-face{font-family:"Archivo Fallback";src:local("Helvetica Neue"),local("Arial"),local("Roboto");size-adjust:97%}
@font-face{font-family:"ZS Fallback";font-weight:700;src:local("Rockwell Bold"),local("Rockwell-Bold");size-adjust:84%}
@font-face{font-family:"ZS Fallback Georgia";font-weight:700;src:local("Georgia Bold"),local("Georgia-Bold");size-adjust:84.5%}
@font-face{font-family:"ZS Fallback";font-weight:700;font-style:italic;src:local("Rockwell Bold Italic"),local("Rockwell-BoldItalic");size-adjust:80.1%}
@font-face{font-family:"ZS Fallback Georgia";font-weight:700;font-style:italic;src:local("Georgia Bold Italic"),local("Georgia-BoldItalic");size-adjust:77.3%}
:root{
  --ink:#0A0A0B;--ink-2:#131416;--mon:#2B2F35;--steel:#C9CED6;--steel-2:#8E96A3;--white:#FFFFFF;
  --ember:#FF6A00;--ember-2:#E65C00;--ember-3:#FF8A3D;--text-2:#4B515B;
  --line:rgba(255,255,255,.14);--line-d:rgba(10,10,11,.14);
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.4,.64,1);
  --font:"Archivo","Archivo Fallback",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--font-display:"Zilla Slab","ZS Fallback","ZS Fallback Georgia",Georgia,serif;
  --paper:#F4F2ED;
  --wrap:1180px;--gut:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
/* the page canvas is ink at both ends (what a phone shows past the top and bottom of the page, and behind a collapsing
   toolbar); the pages themselves paint white through <main> */
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
main{display:block;background:var(--white)}
@view-transition{navigation:auto}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.sec{padding:clamp(64px,9vw,128px) 0;position:relative}
.sec-tight{padding:clamp(48px,6vw,88px) 0}
.dark{background:var(--ink);color:#fff}
.kicker{font-size:.95rem;font-weight:700;color:var(--ember-2);margin-bottom:14px}
.dark .kicker{color:var(--ember)}
h1,.h1{font-family:var(--font-display);font-size:clamp(3rem,9vw,6.5rem);line-height:.98;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
h2,.h2{font-family:var(--font-display);font-size:clamp(2.3rem,5.3vw,4.3rem);line-height:1;letter-spacing:-.02em;font-weight:700;max-width:20ch;text-wrap:balance}
/* the orange words in a headline lean like the logo */
h1 em,h2 em,.big-line em{font-style:italic}
h3,.h3{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.2;letter-spacing:-.015em;font-weight:700}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;max-width:44ch}
.sub{color:var(--text-2);max-width:58ch}
.dark .lede,.dark .sub{color:var(--steel)}
.hd{display:grid;gap:18px;margin-bottom:clamp(32px,4vw,56px)}
.hd .sub{font-size:1.1rem}
@media (min-width:900px){.hd{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:48px}}
em{font-style:normal;color:var(--ember)}
.stack{display:grid;gap:16px}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-ember{background:var(--ember);color:var(--ink)}
.btn-ember:hover{background:var(--ember-2)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--mon)}
.btn-line{border-color:var(--line-d);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.6;cursor:default}
.link{font-weight:700;text-decoration:none;background:linear-gradient(var(--ember),var(--ember)) no-repeat 0 100%/0 2px;transition:background-size .3s var(--ease);padding-bottom:2px}
.link:hover,.link:focus-visible{background-size:100% 2px}
.dark .link{color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* the island: a floating black pill that collapses as you scroll down */
.island-wrap{position:fixed;top:12px;left:0;right:0;z-index:100;display:flex;justify-content:center;pointer-events:none;padding:0 12px}
.island{pointer-events:auto;position:relative;width:min(100%,1180px);border-radius:32px}
.island-bg{position:absolute;inset:0;border-radius:inherit;background:var(--ink);border:1px solid rgba(255,255,255,.12);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% - 96px) calc(100% - 58px) calc(50% - 96px) round 26px)}
.island-bar{position:relative;height:64px;display:flex;align-items:center;gap:6px;padding:0 10px 0 18px}
.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{position:absolute;top:6px;left:50%;width:192px;height:52px;margin-left:-96px;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:24px;background:transparent;cursor:pointer;opacity:0;visibility:hidden;transform:scale(.9);z-index:2;transition:opacity .3s var(--ease),transform .45s var(--spring),visibility 0s .3s}
.island-mini img{height:24px;width:auto}
.island-mini svg{width:14px;height:14px;color:var(--ember);flex:none}
.island.mini,.island.mini .island-bar{pointer-events:none}
.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-logo{display:block;flex:none;margin-right:auto;border-radius:6px}
.island-logo img{height:30px;width:auto}
.island-links{display:none;margin:0 auto 0 0;gap:2px}
.island-links a{display:block;white-space:nowrap;padding:8px 14px;border-radius:999px;font-size:.95rem;font-weight:600;color:var(--steel);text-decoration:none;transition:color .2s var(--ease),background-color .2s var(--ease)}
.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(255,255,255,.1)}
.i-cta{min-height:44px;padding:0 18px;font-size:.95rem}
.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-size:.9rem;font-weight:600;cursor:pointer;transition:background-color .2s var(--ease)}
.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:4px 18px 20px;color:#fff}
.island-panel[hidden]{display:none}
.island-panel a:not(.btn){display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 8px;border-top:1px solid var(--line);text-decoration:none;font-weight:700;font-size:1.15rem;transition:color .2s var(--ease)}
.island-panel a small{font-weight:500;color:var(--steel-2);font-size:.9rem;text-align:right}
.island-panel a:not(.btn):hover{color:var(--ember)}
.island-panel .btn{margin-top:14px}
.island.open .island-panel>*{animation:panel-in .5s var(--ease) both}
.island.open .island-panel>*:nth-child(2){animation-delay:.05s}
.island.open .island-panel>*:nth-child(3){animation-delay:.1s}
.island.open .island-panel>*:nth-child(4){animation-delay:.15s}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:599px){.island-bar{padding:0 8px 0 14px}.island-logo img{height:24px}.i-cta{padding:0 14px;min-height:40px;font-size:.9rem}.i-menu .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.i-menu{width:44px;padding:0;justify-content:center}}
@media (min-width:900px){.island-links{display:flex}.i-menu{display:none}.island-panel{display:none !important}}

/* hero: the photo whole on phones, fading into the copy; full bleed on desktop */
.hero{position:relative;background:var(--ink);color:#fff;overflow:clip}
.hero-media{position:relative;overflow:clip}
.hero-media picture{display:block}
.hero-media img{width:100%;height:auto}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,11,0) 22%,rgba(10,10,11,.55) 55%,rgba(10,10,11,.92) 82%,var(--ink) 100%)}
.hero-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;background-size:240px 240px}
.hero-media::after{z-index:2}
.hero-copy{position:relative;margin-top:-42%;padding-bottom:56px;z-index:3}
.hero-copy h1{max-width:15ch}
.hero .lede{margin-top:18px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-note{margin-top:14px;font-size:.92rem;font-weight:600;color:var(--steel)}
/* questions: native details, a hairline list, a plus that turns into a minus */
.faq-list{display:grid;border-top:1px solid var(--line-d)}
.faq-item{border-bottom:1px solid var(--line-d)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;font-weight:600;font-size:1.05rem;line-height:1.35;cursor:pointer;list-style:none;transition:color .2s var(--ease)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--ember-2)}
.faq-item summary:focus-visible{outline:3px solid var(--ember);outline-offset:4px;border-radius:4px}
.faq-x{position:relative;flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-d)}
.faq-x::before,.faq-x::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform .25s var(--ease)}
.faq-x::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-x::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-item[open] summary{color:var(--ember-2)}
.faq-a{padding:0 0 20px;color:var(--text-2);max-width:62ch}
.faq-a p{margin:0}
@media (min-width:900px){.faq-list{max-width:820px}}

/* two ways in: build the roof in the configurator, or just write */
.ways{display:grid;gap:10px;margin-top:24px}
.ways-h{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-2);margin:0}
.way{display:grid;gap:5px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;background:rgba(255,255,255,.02);transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .15s var(--ease)}
.way b{font-family:var(--font-display);font-size:1.3rem;font-weight:700;line-height:1.05;color:var(--ember)}
.way span{color:var(--steel);font-size:.95rem;line-height:1.4}
.way:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.way:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.way:active{transform:translateY(1px)}
@media (min-width:600px){.ways{grid-template-columns:1fr 1fr}.ways-h{grid-column:1/-1}}
.hero-page .hero-copy{margin-top:-46%}
/* the 404 page: one dark band, a full screen tall less the footer */
.nf{min-height:72svh;display:grid;align-items:center;padding-top:clamp(120px,16vw,180px)}
/* home on phones: the crew shot. The logo on the shirt sits between 37% and 60% of the frame, so the fade starts below
   it (64%) and the copy starts at about 75% of the photo's height (-0.31 x width on a 4:5 frame) */
/* the home hero clip (build/video.mjs): phones only (Jared, 22 Oct 2026). It fills the hero over its own first frame
   and only shows once it plays; from 768 px it does not exist and the hero is the roof photo as before. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;opacity:0;transition:opacity .35s var(--ease);pointer-events:none;background:transparent}
.hero-video.on{opacity:1}
@media (max-width:767px){
  .hero-reel .hero-media::after{background:linear-gradient(to bottom,rgba(10,10,11,0) 58%,rgba(10,10,11,.55) 74%,rgba(10,10,11,.92) 89%,var(--ink) 100%)}
  .hero-reel .hero-copy{margin-top:-30%}
}
@media (min-width:768px){.hero-video{display:none}}
@media (max-width:767px){
  .hero-crew .hero-media::after{background:linear-gradient(to bottom,rgba(10,10,11,0) 64%,rgba(10,10,11,.55) 76%,rgba(10,10,11,.92) 90%,var(--ink) 100%)}
  .hero-crew .hero-copy{margin-top:-31%}
}
@media (min-width:768px){
  .hero{min-height:100svh;display:grid;align-items:end}
  .hero-page{min-height:min(82svh,820px)}
  .hero-media{position:absolute;inset:0}
  .hero-media picture,.hero-media img{height:100%}
  .hero-media img{object-fit:cover;object-position:center 58%}
  .hero-media::after{background:linear-gradient(to top,rgba(10,10,11,.94) 0%,rgba(10,10,11,.5) 38%,rgba(10,10,11,.06) 72%),linear-gradient(to right,rgba(10,10,11,.55),rgba(10,10,11,0) 60%)}
  .hero-copy,.hero-page .hero-copy{margin-top:0;padding:170px 0 110px}
  .hero-copy h1{max-width:16ch}
}
html.js .hero-media picture{transform-origin:50% 60%;animation:drift 28s var(--ease) both}
html.js .hero-media img{transform:translate3d(0,var(--py,0px),0);will-change:transform}
/* the home hero from 768 px (23 Oct 2026, Jared: "not just a dead image"): a slow cinematic drift across the photo,
   transform only, alternating so it never jumps, and a lighter overlay that darkens only behind the copy. */
@keyframes heroDrift{0%{transform:scale(1.015) translate3d(0,0,0)}100%{transform:scale(1.085) translate3d(-1.6%,-1.1%,0)}}
@media (min-width:768px){
  html.js .hero .hero-media picture{transform-origin:62% 46%;animation:heroDrift 22s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform}
  .hero-reel .hero-media img{object-position:center 50%}
  .hero-reel .hero-media::after{background:linear-gradient(to right,rgba(10,10,11,.74) 0%,rgba(10,10,11,.46) 34%,rgba(10,10,11,0) 62%),linear-gradient(to top,rgba(10,10,11,.88) 0%,rgba(10,10,11,.3) 28%,rgba(10,10,11,0) 54%)}
}
@media (prefers-reduced-motion:reduce){html.js .hero .hero-media picture{animation:none}}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.035)}}

/* corrugation edge between a dark section and the next */
.edge{position:absolute;left:0;right:0;bottom:-1px;height:10px;z-index:3;background:var(--edge,#fff);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10'%3E%3Cpath d='M0 0C8 0 10 10 18 10S28 0 36 0V10H0Z'/%3E%3C/svg%3E") repeat-x bottom/36px 10px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10'%3E%3Cpath d='M0 0C8 0 10 10 18 10S28 0 36 0V10H0Z'/%3E%3C/svg%3E") repeat-x bottom/36px 10px}
.edge-ink{--edge:var(--ink)}

/* fact strip */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.facts li{background:var(--ink);padding:22px 18px}
.facts b{display:block;font-size:1.1rem;letter-spacing:-.015em;line-height:1.25;margin-bottom:4px}
.facts span{color:var(--steel-2);font-size:.95rem;line-height:1.45;display:block}
@media (min-width:900px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}.facts li{padding:30px 28px}}

/* the two doors */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.door{position:relative;display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;color:#fff;text-decoration:none;background:var(--ink);isolation:isolate;outline-offset:4px}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,10,11,.94) 0,rgba(10,10,11,.35) 55%,rgba(10,10,11,0) 100%)}
.door::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid transparent;transition:border-color .25s var(--ease);pointer-events:none}
.door:hover::before{border-color:var(--ember)}
.door-body{position:absolute;left:0;right:0;bottom:0;padding:16px}
.door h3{font-family:var(--font-display);font-size:clamp(1.4rem,4vw,2.75rem);letter-spacing:-.015em;line-height:1}
.door p{display:none;color:var(--steel);margin-top:10px;max-width:36ch}
.door .go{display:inline-block;margin-top:12px;font-weight:700;color:var(--ember);background:linear-gradient(var(--ember),var(--ember)) no-repeat 0 100%/0 2px;transition:background-size .3s var(--ease);padding-bottom:2px}
.door:hover .go{background-size:100% 2px}
@media (min-width:768px){.doors{gap:20px}.door{aspect-ratio:4/3}.door-body{padding:32px}.door p{display:block}}

/* the whole job: photo beside the list */
.scope{display:grid;gap:36px}
@media (min-width:900px){.scope{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}}
.scope-fig{border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--mon);max-width:440px}
.scope-fig img{width:100%;height:100%;object-fit:cover}
.ticks.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.ticks.two li{grid-template-columns:20px minmax(0,1fr);gap:8px}
.ticks.two svg{width:20px;height:20px;margin-top:2px}
.ticks.two span{font-size:.93rem;line-height:1.4}

/* the maintenance pitch on the home page */
.pitch{display:grid;gap:36px}
@media (min-width:900px){.pitch{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:center}}
.pitch-fig{background:var(--ink);border-radius:16px;padding:18px;color:#fff}
.pitch-fig svg{width:100%;height:auto}
.pitch-fig figcaption{margin-top:12px;font-size:.92rem;color:var(--steel-2)}
.pitch-photo{border-radius:14px;overflow:hidden;background:var(--mon)}
.pitch-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.pcap{margin-top:12px;font-size:.92rem;color:var(--text-2);line-height:1.45}
.dark .pcap{color:var(--steel-2)}
.big-line{font-family:var(--font-display);font-size:clamp(1.75rem,3.5vw,2.75rem);line-height:1.05;letter-spacing:-.015em;font-weight:700;max-width:22ch}
.big-line em{display:block}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gal figure{position:relative;border-radius:10px;overflow:hidden;background:var(--mon);aspect-ratio:1/1}
.gal img{width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:.85rem;font-weight:600;color:#fff;background:linear-gradient(to top,rgba(10,10,11,.85),rgba(10,10,11,0))}
.gal .wide{grid-column:span 2;aspect-ratio:2/1}
@media (min-width:768px){.gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.gal .wide{aspect-ratio:auto}.gal .tall{grid-row:span 2}.gal figcaption{padding:28px 16px 14px;font-size:.95rem}}

/* previous work: jobs, tiles, lightbox */
.job{padding-top:clamp(28px,4vw,48px)}
.job:first-child{padding-top:0}
.job-hd{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;margin-bottom:16px;padding-top:18px;border-top:1px solid var(--line-d)}
.job-hd h2{font-family:var(--font-display);font-size:clamp(1.55rem,2.9vw,2.25rem);line-height:1.05;letter-spacing:-.015em;max-width:none}
.job-hd span{color:var(--text-2)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.work-grid a{position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--mon);aspect-ratio:1/1;color:#fff;text-decoration:none;isolation:isolate}
.work-grid a img{width:100%;height:100%;object-fit:cover}
.work-grid a::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid transparent;transition:border-color .25s var(--ease);pointer-events:none}
.work-grid a:hover::after{border-color:var(--ember)}
.work-grid .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:.85rem;font-weight:600;background:linear-gradient(to top,rgba(10,10,11,.85),rgba(10,10,11,0))}
.work-grid .wide{grid-column:span 2;aspect-ratio:2/1}
@media (min-width:768px){.work-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.work-grid.pair{grid-template-columns:repeat(2,minmax(0,1fr))}.work-grid.pair a{aspect-ratio:3/2}.work-grid .wide{aspect-ratio:auto}.work-grid .tall{grid-row:span 2;aspect-ratio:auto}.work-grid .cap{padding:28px 16px 14px;font-size:.95rem}}
.lb{border:0;padding:0;margin:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.lb::backdrop{background:rgba(10,10,11,.96)}
.lb-inner{position:fixed;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-items:center;padding:64px 16px 20px}
.lb img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:8px;background:var(--mon)}
.lb-cap{color:var(--steel);font-weight:600;padding:14px 0 0;text-align:center}
.lb-close,.lb-nav{position:fixed;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:2;transition:background-color .2s var(--ease)}
.lb-close{top:14px;right:14px}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-close:active,.lb-nav:active{background:rgba(255,255,255,.3)}
.lb-close svg,.lb-nav svg{width:20px;height:20px}
.lb-count{position:fixed;top:26px;left:18px;color:var(--steel-2);font-weight:600;font-size:.9rem}
html.lb-open{overflow:hidden}

/* service blocks on the roofing page */
.svc{display:grid;gap:28px}
.svc figure{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--mon)}
.svc figure img{width:100%;height:100%;object-fit:cover}
.svc figure.tall{aspect-ratio:4/5;max-width:480px}
.svc h2{max-width:16ch}
.svc .sub{margin-top:14px}
.ticks{display:grid;gap:10px;margin-top:22px}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.ticks svg{width:22px;height:22px;color:var(--ember);margin-top:3px}
.ticks b{display:block}
.ticks span{color:var(--text-2);font-size:.97rem}
.dark .ticks span{color:var(--steel)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.duo li{border:1px solid var(--line-d);border-radius:12px;padding:16px 14px}
.dark .duo li{border-color:var(--line)}
.duo b{display:block;font-size:1.05rem;line-height:1.2;margin-bottom:6px}
.duo p{font-size:.95rem;color:var(--text-2)}
.dark .duo p{color:var(--steel)}
@media (min-width:900px){.svc{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}.svc.flip figure{order:2}.duo{gap:16px}.duo li{padding:22px 20px}}

/* the process: a real sequence, so it is numbered */
.proc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:step}
.proc li{position:relative;padding:18px 16px;border:1px solid var(--line-d);border-radius:12px;counter-increment:step;background:#fff}
.proc li::before{content:counter(step);display:block;font-family:var(--font-display);font-weight:700;font-size:2.1rem;letter-spacing:0;color:var(--ember-2);line-height:.95;margin-bottom:10px}
.proc b{display:block;font-size:1.05rem;margin-bottom:4px;line-height:1.25}
.proc p{color:var(--text-2);font-size:.95rem;line-height:1.45}
@media (min-width:900px){.proc{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.proc li{padding:24px 22px 26px}}

/* the maintenance tool */
.tool{background:var(--ink);color:#fff;border-radius:18px;padding:20px;display:grid;gap:24px;border:1px solid var(--line)}
@media (min-width:900px){.tool{grid-template-columns:minmax(0,6fr) minmax(0,6fr);padding:36px;gap:44px;align-items:start}}
.tool-fig{background:var(--ink-2);border-radius:12px;padding:10px;border:1px solid var(--line)}
.tool-fig svg{width:100%;height:auto}
.ctl{display:grid;gap:20px}
.range label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;margin-bottom:6px}
.range output{font-weight:800;color:var(--ember);font-variant-numeric:tabular-nums;font-size:1.25rem}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ember) var(--pct,0%),rgba(255,255,255,.16) var(--pct,0%))}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--ember)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--ember);margin-top:-11px;cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--ember);cursor:pointer}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.seg .chip span{text-align:center}
.verdict{border-left:4px solid var(--ember);padding:2px 0 2px 16px;min-height:5.2em}
.verdict b{display:block;font-family:var(--font-display);font-size:1.65rem;font-weight:700;letter-spacing:-.01em;line-height:1.05}
.verdict p{color:var(--steel);margin-top:6px}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.path{border:1px solid var(--line);border-radius:12px;padding:14px;transition:border-color .3s var(--ease)}
.path b{display:block;font-size:.9rem;color:var(--steel-2);margin-bottom:4px}
.path strong{display:block;font-size:1.1rem;letter-spacing:-.02em;line-height:1.2;min-height:2.4em}
.path p{font-size:.9rem;color:var(--steel);margin-top:8px;line-height:1.4}
.path.now{border-color:var(--ember)}
.bar{height:8px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:var(--ember);transform-origin:0 50%;transform:scaleX(var(--w,0));transition:transform .5s var(--ease)}
.path.wait .bar i{background:var(--steel-2)}
.screw .washer-ok,.screw .washer-mid,.screw .washer-bad,.screw .rust,.screw .halo,.screw .drip,.screw .hole{transition:opacity .4s var(--ease)}
.screw .washer-mid,.screw .washer-bad,.screw .rust,.screw .halo,.screw .drip,.screw .hole{opacity:0}
.screw[data-w="mid"] .washer-ok,.screw[data-w="bad"] .washer-ok{opacity:0}
.screw[data-w="mid"] .washer-mid{opacity:1}
.screw[data-w="bad"] .washer-bad{opacity:1}
.screw text{font-family:var(--font);font-weight:600;fill:var(--steel-2);font-size:11px}
html.js .screw[data-leak="1"] .drip{animation:drip 1.6s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(28px);opacity:0}}
.tool-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.note{font-size:.88rem;color:var(--steel-2);line-height:1.45}

/* when maintenance makes sense */
.cond{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cond li{border:1px solid var(--line-d);border-radius:12px;padding:16px 14px}
.cond b{display:block;margin-bottom:4px;line-height:1.25}
.cond span{color:var(--text-2);font-size:.95rem;line-height:1.4;display:block}
@media (min-width:900px){.cond{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.cond li{padding:22px 20px}}

/* quote */
.quote{display:grid;gap:36px}
@media (min-width:900px){.quote{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}}
.qcard{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:22px;min-height:460px}
@media (min-width:768px){.qcard{padding:32px}}
.steps-bar{display:flex;gap:6px;margin:0 0 14px}
.steps-bar li{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);transition:background-color .3s var(--ease)}
.steps-bar li.on{background:var(--ember)}
.steps-bar li.now{background:var(--ember-3)}
.fcount{color:var(--steel-2);font-size:.9rem;font-weight:600}
.step[hidden]{display:none}
.step h3{margin:6px 0 16px;font-size:1.4rem}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chip{position:relative;display:block;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.chip span{display:block;padding:13px 14px;border:1px solid var(--line);border-radius:12px;font-weight:600;line-height:1.3;transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.chip:hover span{border-color:rgba(255,255,255,.5)}
.chip input:checked+span{border-color:var(--ember);background:var(--ember);color:var(--ink)}
.chip input:focus-visible+span{outline:3px solid var(--ember);outline-offset:3px}
.field{display:grid;gap:6px;margin-bottom:14px}
.hint{margin:0;font-size:.85rem;line-height:1.4;color:var(--steel-2)}
.hint:empty{display:none}
.tool .field{margin-bottom:0}
.field label{font-weight:600;font-size:.95rem}
.field label small{font-weight:500;color:var(--steel-2)}
.field input,.field textarea{width:100%;min-height:50px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:1.05rem}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--ember);outline-offset:2px;border-color:var(--ember)}
.field input[aria-invalid="true"]{border-color:#FF5A5A}
.field textarea{min-height:92px;padding:12px 14px;line-height:1.45;resize:vertical}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.field h4{margin:4px 0 10px;font-size:1rem;font-weight:600}
.fnav{display:flex;align-items:center;gap:12px;margin-top:18px}
.fnav .btn-ember{flex:1}
.fnav .btn-ghost{min-height:48px}
.ferr{min-height:1.5em;margin-top:12px;color:var(--ember-3);font-weight:600;line-height:1.4}
.fdone,.ffail{display:grid;gap:14px}
.fdone[hidden],.ffail[hidden]{display:none}
.fdone h3,.ffail h3{font-family:var(--font-display);font-size:1.9rem;font-weight:700;line-height:1.05}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(10,10,11,.3);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.next-list{display:grid;gap:14px;margin-top:24px}
.next-list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start}
.next-list i{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ember)}
.next-list b{display:block}
.next-list span{color:var(--steel);font-size:.97rem}

/* footer */
.foot{background:var(--ink);color:var(--steel);padding:64px 0 36px;border-top:1px solid var(--line)}
.foot-grid{display:grid;gap:32px}
.foot-logo img{width:min(100%,300px);height:auto}
.foot-logo p{margin-top:14px;max-width:34ch;color:var(--steel-2)}
.foot h3{color:#fff;font-size:1rem;margin-bottom:10px}
.foot ul{display:grid;gap:8px}
.foot a{text-decoration:none;transition:color .2s var(--ease)}
.foot a:hover{color:var(--ember)}
.foot-bottom{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:.9rem;color:var(--steel-2);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.foot-bottom .built{color:var(--steel);font-weight:600}
.foot-bottom .built:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}
@media (min-width:768px){.foot-grid{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:48px}}


/* reveals: a class is added by a scroll pass, CSS does the rest, never stuck */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* the roof configurator: a light stage (the sky) beside a dark rail. The stage sticks while the rail scrolls,
   so a swatch tapped at the bottom of a phone still changes a house that is in view. */
/* phones: the stage first and pinned, then the headline, the options, and the summary with the booking button.
   The head is display:contents here so its children order among the section's flex items; on desktop it is a
   glass card over the stage holding the headline and the summary. */
.cfg{--sky:#CDD5DC;background:var(--ink);color:#fff;display:flex;flex-direction:column}
/* phones: the house gets most of the screen and stays pinned while the options scroll under it (Jared, 19 Oct) */
.stage{order:1;position:sticky;top:0;z-index:5;height:60svh;min-height:380px;max-height:calc(100svh - 280px);background:var(--sky);overflow:clip;isolation:isolate}
.stage picture{display:contents}
.cfg-head{display:contents}
.cfg-head .kicker{order:2;padding:26px var(--gut) 0}
.cfg-head h1{order:3;padding:0 var(--gut)}
.cfg-head .lede{order:4;padding:0 var(--gut)}
.cfg-head .sum{order:6;margin:0 var(--gut) 36px}
.stage .poster,.stage canvas{position:absolute;left:0;right:0;top:72px;bottom:0;width:100%;height:calc(100% - 72px);display:block}
.stage .poster{object-fit:cover;object-position:50% 50%;z-index:1}   /* the live posters share the 3D camera's centre */
.stage.flat .poster{object-position:50% 55%}                          /* the Blender renders, framed a touch low */
/* the first paint: the poster shrunk to 32 px, inlined in the page and blurred, until the real poster arrives */
.stage::before{content:"";position:absolute;left:0;right:0;top:72px;bottom:0;z-index:0;background:var(--lqip-m) 50% 50%/cover no-repeat;filter:blur(14px);transform:scale(1.08)}
@media (min-width:768px) and (max-width:1023px){.stage::before{background-image:var(--lqip-t)}}
.stage:focus{outline:none}
.stage:focus-visible{outline:3px solid var(--ember);outline-offset:-3px}
.stage canvas{z-index:2;opacity:0;transition:opacity .3s var(--ease);touch-action:none;cursor:grab}   /* the poster is the same frame, so a short fade is enough */
.stage canvas:active{cursor:grabbing}
.stage.live canvas{opacity:1}
.stage.flat canvas{display:none}
/* phones: the hint sits top right under the island, clear of the view buttons; desktop: bottom right */
.stage-status{position:absolute;right:12px;top:84px;z-index:4;max-width:min(62%,440px);margin:0;padding:6px 10px;border-radius:8px;background:rgba(10,10,11,.76);color:#fff;font-size:.8rem;font-weight:600;line-height:1.35;transition:opacity .4s var(--ease)}
.stage.touched .stage-status{opacity:0}
.stage.loading .stage-status{opacity:1}
.stage-status:empty{display:none}   /* nothing to say while the house comes up: no empty chip either */
.views{position:absolute;left:12px;bottom:18px;z-index:4;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(10,10,11,.76)}
.views button{border:0;border-radius:999px;padding:6px 10px;background:transparent;color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.views button:hover:hover{background:rgba(255,255,255,.14)}
.views button:active:active{background:rgba(255,255,255,.24)}
.views button[aria-pressed="true"][aria-pressed="true"]{background:#fff;color:var(--ink)}
.views button[disabled][disabled]{opacity:.45;cursor:default}
.views button:focus-visible:focus-visible{outline-offset:1px}
.zoom{position:absolute;left:12px;bottom:18px;z-index:4;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(10,10,11,.76)}
/* under 1024 the view pills go: fingers turn the house */
@media (max-width:1023px){.views,.zoom{display:none}}
.zoom button{width:38px;height:34px;border:0;border-radius:999px;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .2s var(--ease),opacity .2s var(--ease)}
.zoom svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.zoom button:hover{background:rgba(255,255,255,.14)}
.zoom button:active{background:rgba(255,255,255,.24)}
.zoom button[disabled]{opacity:.35;cursor:default;background:transparent}
.zoom button:focus-visible{outline-offset:1px}
.tray{order:5;padding:22px var(--gut) 24px;display:grid;gap:22px;align-content:start}
.colour-row{display:grid;gap:10px}
.seg3 .short{display:none}
.sel{appearance:none;-webkit-appearance:none;width:100%;height:44px;padding:0 38px 0 14px;border:1px solid var(--line);border-radius:10px;background:var(--ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23FF6A00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;color:#fff;font:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:border-color .2s var(--ease)}
.sel:hover{border-color:rgba(255,255,255,.5)}
.sel option{color:#111;background:#fff}
/* phones: a two line headline and a short lede, so the first control is one thumb-scroll from the house */
.cfg .kicker{margin-bottom:0}
.cfg h1{font-size:clamp(1.8rem,6.2vw,3.8rem);max-width:none;margin-top:4px}
.cfg .lede{font-size:1rem;color:var(--steel);margin-top:8px;max-width:40ch}
.cfg-head .sum{order:6;margin:0 var(--gut) 36px}
.grp{display:grid;gap:10px}
.lbl{color:var(--steel-2);font-size:.9rem;font-weight:600;margin:0}
.seg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.seg3 button{display:grid;justify-items:center;gap:7px;padding:12px 6px 10px;border:1px solid var(--line);border-radius:12px;background:transparent;color:#fff;font-weight:600;font-size:.9rem;line-height:1.2;cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}
.seg3 svg{width:34px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.seg3 button:hover{border-color:rgba(255,255,255,.5)}
.seg3 button:active{transform:scale(.98)}
.seg3 button[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:var(--ink)}
.pick{font-weight:700;margin:2px 0 0}
.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
@media (max-width:419px){#wallswatches{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* the roof colours: the 22 classic Colorbond colours, then the six matt ones under their own small label */
#swatches{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
#swatches .sw-set{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
@media (max-width:419px){#swatches .sw-set{grid-template-columns:repeat(6,minmax(0,1fr))}}
.sw-h{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-2);margin:4px 0 -2px}
.pick-note{margin-top:2px;min-height:2.6em}
.swatches button{aspect-ratio:1;border-radius:9px;border:1px solid rgba(255,255,255,.2);cursor:pointer;padding:0;transition:transform .2s var(--spring),box-shadow .2s var(--ease)}
.swatches button:hover{transform:scale(1.08)}
.swatches button:active{transform:scale(.96)}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--ember)}
.sum{border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:12px;background:var(--ink-2)}
.sum-text{font-family:var(--font-display);font-size:clamp(1.45rem,4.3vw,1.9rem);line-height:1.08;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.sum .btn-ember{width:100%}
.sum-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sum-row .btn-ghost{min-height:44px;padding:0 18px;font-size:.95rem}
.link-btn{border:0;padding:4px 0;color:var(--steel);font-weight:700;cursor:pointer;background:linear-gradient(var(--ember),var(--ember)) no-repeat 0 100%/0 2px;transition:background-size .3s var(--ease),color .2s var(--ease)}
.link-btn:hover{color:#fff;background-size:100% 2px}
.share-out{margin:0;font-size:.9rem;color:var(--steel);line-height:1.4;word-break:break-all}
.share-out:empty{display:none}
.share-out .url{user-select:all;-webkit-user-select:all;color:#fff}
.roof-line{display:grid;gap:4px;margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--ember);border-radius:10px;font-size:.95rem;line-height:1.4}
.roof-line b{font-size:.8rem;color:var(--steel-2)}
.island.open .island-panel>*:nth-child(5){animation-delay:.2s}
@media (min-width:1024px){
  /* one screen: the house fills a wide stage; the headline, the live summary and the booking button sit in a
     glass card over its top left; every option is visible at once in a compact two row strip underneath */
  .cfg{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:100svh;position:relative}
  .cfg-head{display:grid;position:absolute;z-index:6;top:92px;left:max(20px,calc((100% - 1800px)/2 + 20px));width:min(400px,31%);padding:14px 18px 16px;border-radius:14px;background:rgba(10,10,11,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);gap:4px}
  .cfg-head .kicker,.cfg-head h1,.cfg-head .lede{order:0;padding:0}
  .cfg .kicker{font-size:.82rem}
  .cfg h1{font-size:clamp(1.45rem,1.75vw,1.85rem);max-width:none;margin:0}
  .cfg .lede{display:none}
  .cfg-head .sum{order:0;margin:8px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:10px 0 0;display:grid;gap:8px}
  .cfg-head .sum .lbl{font-size:.74rem}
  .cfg-head .sum .sum-text{font-family:var(--font);font-size:.86rem;font-weight:600;line-height:1.35;text-transform:none;letter-spacing:0;color:#fff;text-wrap:pretty}
  .cfg-head .sum .btn-ember{width:100%;min-height:42px;font-size:.92rem}
  .cfg-head .sum .sum-row{gap:12px}
  .cfg-head .sum .sum-row .btn-ghost{min-height:34px;padding:0 12px;font-size:.84rem}
  .cfg-head .sum .link-btn{font-size:.88rem}
  .cfg-head .sum .share-out{font-size:.8rem}
  .stage{order:1;position:relative;height:auto;min-height:480px;max-height:none}
  .stage .poster,.stage canvas{top:0;height:100%}
  .stage::before{top:0;background-image:var(--lqip-w)}
  /* the strip: one row of four cells, the same 36 px control everywhere, a hairline between cells */
  .tray{order:2;width:min(100% - 2*var(--gut),1800px);margin-inline:auto;padding:14px 20px 16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:start;gap:12px 0}
  .tray .grp{display:grid;gap:8px;align-content:start;padding:0 22px;flex:1 1 0;min-width:max-content}
  .tray .grp:first-child{padding-left:0}
  .tray .grp + .grp{border-left:1px solid var(--line)}
  .tray .lbl{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-2);margin:0;white-space:nowrap}
  .tray .pick{display:none}
  .tray .seg3{display:inline-flex;width:max-content;padding:3px;gap:2px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03)}
  .tray .seg3 button{display:flex;align-items:center;height:30px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--steel);font-size:.84rem;font-weight:600;line-height:1;transition:background-color .2s var(--ease),color .2s var(--ease)}
  .tray .seg3 button .short{display:inline}
  .tray .seg3 button .short + .full,.tray .seg3 button:has(.short) .full{display:none}
  .tray .seg3 button:hover{color:#fff;background:rgba(255,255,255,.06)}
  .tray .seg3 button[aria-pressed="true"]{background:var(--ember);color:var(--ink)}
  .tray .seg3 svg{display:none}
  .tray #wallswatches{display:flex;gap:4px}
  .tray .swatches button{width:26px;height:26px;aspect-ratio:auto;border-radius:6px}
  .tray .swatches button[hidden]{display:none}
  .tray .colour-row{display:grid;gap:8px;justify-items:start}
  .tray .sel{width:auto;height:36px;padding:0 34px 0 12px;font-size:.84rem;background-color:transparent}
  .tray #swatches{display:flex;gap:10px;align-items:start}
  .tray #swatches .sw-set{gap:4px}
  .tray #swatches .sw-classic{grid-template-columns:repeat(11,26px)}
  .tray #swatches .sw-matt{grid-template-columns:repeat(3,26px);padding-left:10px;border-left:1px solid var(--line)}
  .tray .sw-h,.tray .pick-note{display:none}
  .views{left:20px;bottom:20px}
  .zoom{left:auto;right:20px;bottom:20px}
  .stage-status{right:20px;top:auto;bottom:66px}
}
@media (min-width:1024px) and (max-width:1699px){
  /* up to 1700 wide the five way switches need the room: two cells per row, the hairline only between the two */
  .tray{gap:12px 0;padding:12px 20px 12px}
  .tray .grp{padding:0 18px;flex-basis:45%;gap:6px}
  .tray .colour-row{gap:6px}
  .tray .grp:nth-child(2n+1){border-left:0;padding-left:0}
  .tray .seg3 button{padding:0 10px;font-size:.8rem}
}
@media (min-width:1024px) and (max-width:1279px){
  .tray .swatches button{width:24px;height:24px}
  .tray #swatches .sw-classic{grid-template-columns:repeat(11,24px)}
  .tray #swatches .sw-matt{grid-template-columns:repeat(3,24px)}
}
@media (min-width:1440px){.cfg-head{top:96px;width:min(440px,30%)}.tray{gap:8px 32px}}
/* the home page's pitch for it: the render at the hero's own proportions */
.svc figure.wide{aspect-ratio:16/10}
.svc figure a{display:block;height:100%}

/* touch: bigger targets on the stage's own controls, and the hint reads as a tip, not a label */
@media (hover:none){
  .views{padding:4px}
  .views button{padding:10px 13px;font-size:.86rem}
  .zoom{padding:3px;bottom:18px}
  .zoom button{width:34px;height:32px}
  .zoom svg{width:14px;height:14px}
  .stage-status{font-size:.82rem;padding:8px 11px}
  .swatches{gap:8px}
  .swatches button{border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage canvas,.stage-status,.seg3 button,.sel,.swatches button,.views button,.zoom button,.link-btn{transition:none}
  html.js .rv{opacity:1;transform:none;transition:none}
  html.js .hero-media picture{animation:none}
  html.js .hero-media img{transform:none}
  .island-bg,.bar i,.btn{transition:none}
  html.js .screw[data-leak="1"] .drip{animation:none;opacity:1}
}


/* phones: text, photos and buttons centred; inputs, menu and numbered steps keep their left edge (Jared, 19 Oct) */
/* proof: badges and a pulled review beside the form, the reviews row, before and after, project pills, the legal line
   (build/src/proof.mjs; none of it exists on the page until the owner's material is in) */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px}
.trust li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.trust svg{width:24px;height:24px;color:var(--ember);margin-top:1px}
.trust b{display:block;font-size:.98rem;line-height:1.25}
.trust span{display:block;color:var(--steel-2);font-size:.86rem;line-height:1.35;margin-top:2px}
.stars{display:inline-flex;gap:2px;color:var(--ember)}
.stars svg{width:16px;height:16px;fill:currentColor}
.pull{margin-top:26px;padding:18px 20px 18px 22px;border-left:3px solid var(--ember);background:rgba(255,255,255,.04);border-radius:0 12px 12px 0}
.pull .stars{margin-bottom:8px}
.pull blockquote,.rev blockquote{margin:0}
.pull blockquote p{font-size:1.02rem;line-height:1.55;color:#fff}
.pull figcaption{margin-top:10px;font-size:.88rem;color:var(--steel-2);font-weight:600}
.rev-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(74%,340px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:4px var(--gut) 14px;margin:0 calc(-1*var(--gut));-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rev-row::-webkit-scrollbar{display:none}
.rev{scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;padding:22px 20px;border:1px solid var(--line-d);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(10,10,11,.04),0 14px 32px -20px rgba(10,10,11,.28)}
.rev blockquote{flex:1}
.rev blockquote p{line-height:1.55;color:#1D1F23}
.rev footer{display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--line-d)}
.rev footer b{font-size:.98rem}
.rev footer span{font-size:.88rem;color:var(--text-2)}
.rev footer small{font-size:.8rem;color:var(--steel-2)}
@media (min-width:900px){.rev-row{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;overflow:visible;padding:0;margin:0}.rev{padding:26px 24px}}
.ba-grid{display:grid;gap:24px}
@media (min-width:900px){.ba-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.ba-grid.one{grid-template-columns:minmax(0,1fr);max-width:960px;margin-inline:auto}}
.ba{margin:0}
.ba-frame{position:relative;border-radius:14px;overflow:hidden;background:var(--mon);aspect-ratio:16/10;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;isolation:isolate}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba-tag{position:absolute;top:12px;padding:5px 10px;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(10,10,11,.62);pointer-events:none}
.ba-tag-b{left:12px}
.ba-tag-a{right:12px;background:var(--ember);color:var(--ink)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,11,.25);pointer-events:none}
.ba-handle i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 2px 6px rgba(10,10,11,.3),0 10px 24px -8px rgba(10,10,11,.5);transition:transform .2s var(--spring)}
.ba-handle svg{width:22px;height:22px}
.ba-frame:hover .ba-handle i,.ba-frame.dragging .ba-handle i{transform:scale(1.08)}
.ba-range{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.ba-frame:has(.ba-range:focus-visible) .ba-handle i{outline:3px solid var(--ember);outline-offset:3px}
.ba figcaption{margin-top:12px}
.ba figcaption b{display:block}
.ba figcaption span{display:block;color:var(--text-2);font-size:.95rem;margin-top:2px;max-width:60ch}
.job-meta{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:0;list-style:none}
.job-meta li{font-size:.82rem;font-weight:600;padding:5px 10px;border:1px solid var(--line-d);border-radius:999px;color:var(--text-2)}
.foot-legal{margin-top:40px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.86rem;color:var(--steel-2)}

@media (max-width:767px){
  .hero-copy,.hd,.hd>div,.sec .wrap,.door-body,.pitch,.svc,.tool,.ways,.way,.foot,.foot-logo,.fdone,.ffail,.qcard,.sum,.roof-line,.cfg-head>*,.pick,.lbl,.colour-row,.lb-cap,.pitch-fig figcaption{text-align:center}
  .proc li,.duo li,.field,.field label,.field input,.field textarea,.sel,.island-panel{text-align:left}
  .lede,.sub,.hero-note,.note,.foot-logo p,.kicker,.pick{margin-left:auto;margin-right:auto}
  .hero-cta,.cta-row,.tool-cta,.fnav,.steps-bar,.foot-bottom{justify-content:center}
  .foot-logo img,.svc figure,.pitch-photo,.pitch-fig,.tool-fig{display:block;margin-left:auto;margin-right:auto}
  .foot ul,.way{justify-items:center}
  #swatches,#wallswatches{width:100%;justify-self:stretch}   /* the swatch grids keep their full width; centring the row shrank them to nothing */
  .next-list{justify-items:center}
  .next-list li{text-align:left;max-width:36ch}
  .roof-line{border-left:1px solid var(--line);border-top:4px solid var(--ember)}
  .foot-bottom{text-align:center}
  .facts li{text-align:center}
  .faq-item{text-align:left}
  .trust li,.pull,.rev{text-align:left}
  .trust{text-align:left}
  .foot-legal,.job-meta{justify-content:center}
  .ba figcaption span{margin-inline:auto}
}

/* slight motion through the site (23 Oct 2026, Jared). Transform and opacity only, 0.3 to 1.2 s, all of it off under
   reduced motion. Photos settle from 106% as their section reveals; under a pointer, photo cards zoom a touch and
   cards lift 3 px; a section label draws a short ember rule as it comes in. The image scale is two custom properties
   multiplied, so the reveal and the hover never fight over one transform. */
html.js .rv img:not(.ba-before):not(.ba-after),.door img,.gal figure img,.work-grid a img{transform:scale(calc(var(--rv,1) * var(--hz,1)));transition:transform 1.1s var(--ease)}
html.js .rv:not(.in) img:not(.ba-before):not(.ba-after),html.js .rv:not(.in) .door img,html.js .rv:not(.in) .work-grid a img{--rv:1.06}
.kicker::before{content:"";display:inline-block;width:22px;height:2px;margin-right:10px;vertical-align:.32em;background:currentColor;border-radius:2px;transform-origin:left center;transition:transform .7s var(--ease) .2s}
html.js .rv:not(.in) .kicker::before,html.js .rv:not(.in).kicker::before{transform:scaleX(0)}
@media (hover:hover){
  .door:hover img,.gal figure:hover img,.work-grid a:hover img,.svc figure:hover img,.pitch-photo:hover img{--hz:1.045}
  .proc li,.cond li,.way,.rev,.duo li{transition:translate .35s var(--ease),box-shadow .35s var(--ease),border-color .25s var(--ease),opacity .7s var(--ease),transform .8s var(--ease)}
  .proc li:hover,.cond li:hover,.way:hover,.rev:hover,.duo li:hover{translate:0 -3px;box-shadow:0 2px 4px rgba(10,10,11,.06),0 18px 34px -18px rgba(10,10,11,.35)}
  .dark .duo li:hover,.dark .way:hover{box-shadow:0 18px 34px -18px rgba(0,0,0,.7)}
  .btn-ember,.btn-ink{transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease),translate .25s var(--ease)}
  .btn-ember:hover,.btn-ink:hover{translate:0 -1px}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv img:not(.ba-before):not(.ba-after),html.js .rv:not(.in) img:not(.ba-before):not(.ba-after),.door img,.gal figure img,.work-grid a img{transform:none!important;transition:none!important}   /* as specific as the rules it turns off */
  .kicker::before{transform:none!important;transition:none}
  .proc li,.cond li,.way,.rev,.duo li,.btn-ember,.btn-ink{translate:none!important;transition:none}
}

/* the hero opening (23 Oct 2026): the headline's words rise one after another into their own clip boxes, then the
   label, the paragraph and the buttons fade up behind them. The clip box reaches past the glyphs (italic overhang,
   descenders) so nothing is cut once the words are in. html.js gates it: without script the text is simply there. */
.w{display:inline-block;clip-path:inset(-.35em -.5em -.22em -.5em);vertical-align:top}
.w>span{display:inline-block}
@keyframes wordIn{from{transform:translateY(135%)}to{transform:none}}
@keyframes heroUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.js .w>span{animation:wordIn .95s var(--ease) both;animation-delay:calc(var(--i) * 75ms + 150ms)}
html.js .hero-copy .kicker,html.js .cfg-head .kicker{animation:heroUp .7s var(--ease) .05s both}
html.js .hero-copy .lede,html.js .cfg-head .lede{animation:heroUp .8s var(--ease) .6s both}
html.js .hero-copy .hero-cta,html.js .cfg-head .sum{animation:heroUp .8s var(--ease) .75s both}
html.js .hero-copy .hero-note{animation:heroUp .8s var(--ease) .9s both}
@media (prefers-reduced-motion:reduce){
  html.js .w>span,html.js .hero-copy .kicker,html.js .cfg-head .kicker,html.js .hero-copy .lede,html.js .cfg-head .lede,html.js .hero-copy .hero-cta,html.js .cfg-head .sum,html.js .hero-copy .hero-note{animation:none}
}

/* the configurator panel's minimise button (desktop only): minimised, the panel is a slim pill with the quote button */
.cfg-min{display:none}
@media (min-width:1024px){
  .cfg-head{view-transition-name:cfg-head}
  .cfg-head .kicker{padding-right:40px}
  .cfg-min{display:grid;place-items:center;position:absolute;top:10px;right:10px;z-index:3;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:background-color .2s var(--ease),transform .15s var(--ease)}
  .cfg-min:hover{background:rgba(255,255,255,.16)}
  .cfg-min:active{transform:scale(.92)}
  .cfg-min:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
  .cfg-min svg{width:16px;height:16px;transition:transform .3s var(--ease)}
  .cfg-head.min{width:auto;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 8px}
  .cfg-head.min .kicker,.cfg-head.min .lede,.cfg-head.min .sum .lbl,.cfg-head.min .sum-text,.cfg-head.min .sum-row,.cfg-head.min .share-out{display:none}
  .cfg-head.min h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cfg-head.min .sum{margin:0;padding:0;border:0;display:flex}
  .cfg-head.min .sum .btn-ember{width:auto;padding:0 20px;min-height:38px}
  .cfg-head.min .cfg-min{position:static;order:9}
  .cfg-head.min .cfg-min svg{transform:rotate(180deg)}
}

/* the island's call button: the number from 600 px, a round phone icon under it */
.i-call svg{display:none;width:18px;height:18px}
@media (max-width:599px){
  .i-call{flex:none;width:40px;min-height:40px;padding:0;gap:0}
  .i-call svg{display:block}
  .i-call .i-call-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* the smallest phones (320 to 359 px): a smaller logo and tighter buttons so the menu button stays on the bar */
@media (max-width:359px){
  .island-bar{gap:6px;padding:0 6px 0 10px}
  .island-logo img{height:19px}
  .i-cta:not(.i-call){padding:0 11px;font-size:.84rem}
  .i-call{width:36px;min-height:36px}
  .i-menu{width:38px}
}