/* Case study: sage */
/* Layout: Decibel's night shell around Sage's world (near-black, warm gold, Josefin Sans), then the roofing division
   in its own navy. One 12-column grid, 1360px max. Centrepiece: the Berkshire Road parade home as a scroll-driven filmstrip. */
:root{
  --night:#071D23; --ink:#0F343C; --signal:#00C6E6; --coral:#F47F55; --paper:#F8F4EC;
  --on-night:#F8F4EC; --on-night-2:rgba(248,244,236,.66); --on-night-3:rgba(248,244,236,.42); --night-line:rgba(248,244,236,.12);
  --on-paper:#0F343C; --on-paper-2:rgba(15,52,60,.7); --on-paper-3:rgba(15,52,60,.5); --paper-line:rgba(15,52,60,.14);
  /* Sage Builders, from the shipped site */
  --s-black:#0D0D0D; --s-char:#161616; --s-gold:#C4A92E; --s-gold-deep:#958225; --s-white:#FFFFFF; --s-bone:#F4F1E8;
  --s-w2:rgba(255,255,255,.66); --s-w3:rgba(255,255,255,.42); --s-wline:rgba(255,255,255,.12);
  --s-k2:rgba(13,13,13,.68); --s-k3:rgba(13,13,13,.46); --s-kline:rgba(13,13,13,.12);
  /* Sage Roofers of Idaho */
  --r-navy:#0C1829; --r-navy-2:#13243B; --r-gold:#B8970E; --r-gold-2:#D4AF37; --r-cream:#F5F4EF;
  /* the shell's base styles read these */
  --f-black:var(--night); --f-off:var(--on-night); --f-orange:var(--s-gold); --f-off-2:var(--on-night-2); --f-off-3:var(--on-night-3); --f-off-line:var(--night-line);
  --f-blk-2:var(--s-k2); --f-blk-3:var(--s-k3); --f-blk-line:var(--s-kline);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-sage:"Josefin Sans","Futura","Century Gothic",Arial,sans-serif;

  --t-display:clamp(2.5rem,5.8vw,6.25rem); --t-h3:clamp(1.5rem,2.2vw,2rem);
  --t-lede:clamp(1.0625rem,1.35vw,1.3125rem); --t-body:1.0625rem; --t-ui:.9375rem; --t-label:.75rem;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --hdr:72px; --gutter:clamp(16px,4vw,48px); --max:1360px;
  color-scheme:dark;
}

body{background:var(--night);color:var(--on-night)}
::selection{background:var(--s-gold);color:var(--s-black)}
.bone{background:var(--s-bone);color:var(--s-black);color-scheme:light}
.bone :focus-visible{outline-color:var(--s-black)}
.bone .head p{color:var(--s-k2)}
.coal{background:var(--s-black);color:var(--s-white)}
.coal .head p{color:var(--s-w2)}
.gold{color:var(--s-gold)}
.kicker{font:600 .8125rem/1 var(--f-sage);letter-spacing:.22em;text-transform:uppercase;color:var(--s-gold);display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:36px;height:1px;background:currentColor}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--s-black);color:var(--s-white);isolation:isolate}
.hero-img,.hero-vid{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(calc(1.04 + var(--hz,0)));animation:settle 2600ms var(--ease-out) both}
/* The photo paints first; the video fades in over it once it is actually playing. */
.hero-vid{opacity:0;transition:opacity 900ms var(--ease-out)}
.hero-vid.is-on{opacity:1}
.hero .icon-btn{grid-column:12;justify-self:end;align-self:end}
.icon-btn{-webkit-tap-highlight-color:transparent;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:rgba(13,13,13,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition-property:scale,background-color,opacity;transition-duration:150ms;transition-timing-function:ease-out}
.icon-btn:active{scale:.96}
.icon-btn[hidden]{display:none}
.icon-btn svg{width:18px;height:18px}
.swap{display:grid}
.swap > *{grid-area:1 / 1;transition-property:opacity,scale,filter;transition-duration:300ms;transition-timing-function:cubic-bezier(.2,0,0,1)}
.swap .is-off{opacity:0;scale:.25;filter:blur(4px)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:rgba(13,13,13,.7)}}
@keyframes settle{from{transform:scale(1.16)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,13,13,.62) 0%,rgba(13,13,13,.18) 36%,rgba(13,13,13,.5) 64%,rgba(13,13,13,.96) 100%)}
.hero-in{width:100%;padding-top:calc(var(--hdr) + 40px);padding-bottom:clamp(40px,6vw,80px)}
.hero-logo{width:clamp(150px,16vw,230px);height:auto;color:var(--s-white);margin-bottom:clamp(20px,3vw,36px)}
.hero-logo svg{width:100%;height:auto;display:block}
.masthead{margin:0;font:700 clamp(3.6rem,12.4vw,12.5rem)/.86 var(--f-sage);letter-spacing:.02em;text-transform:uppercase}
.masthead .ln{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.masthead .ln > span{display:inline-block;animation:rise 1000ms var(--ease-out) both;animation-delay:var(--d)}
.masthead .ln:last-child > span{color:var(--s-gold)}
@keyframes rise{from{transform:translateY(105%)}}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-top:clamp(28px,4vw,56px);padding-top:24px;border-top:1px solid var(--s-wline)}
.hero h1{grid-column:1 / span 6;font:600 clamp(1.375rem,2vw,1.875rem)/1.2 var(--f-display);font-stretch:96%;letter-spacing:-.015em;max-width:28ch}
.meta{grid-column:7 / span 5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0}
.meta div{display:grid;gap:5px;min-width:0}
.meta dt{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--s-w3)}
.meta dd{margin:0;font-weight:500;line-height:1.4}
@media (prefers-reduced-motion:reduce){.masthead .ln > span{animation-name:in-fade;animation-duration:400ms}.hero-img,.hero-vid{animation:none}}

/* ===== Brief ===== */
.brief{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.brief-q{grid-column:1 / span 9;font:600 clamp(1.75rem,3.4vw,3.125rem)/1.12 var(--f-display);font-stretch:96%;letter-spacing:-.02em}
.brief-q span{color:var(--s-k3)}
.brief-cols{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(32px,4vw,56px);padding-top:24px;border-top:1px solid var(--s-kline)}
.brief-cols h3{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--s-k3);margin-bottom:10px}
.brief-cols p{color:var(--s-k2)}
.stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(40px,5vw,72px)}
.stat{display:grid;gap:8px;padding-top:18px;border-top:2px solid var(--s-black)}
.stat b{font:700 clamp(2.75rem,5.4vw,5rem)/.9 var(--f-sage);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat span{font:600 .75rem/1.3 var(--f-sage);letter-spacing:.18em;text-transform:uppercase;color:var(--s-k2)}

/* ===== Filmstrip: Berkshire Road ===== */
.reel{position:relative;height:420vh;background:var(--s-black);color:var(--s-white)}
.reel-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;padding-top:calc(var(--hdr) + clamp(16px,3vw,36px));padding-bottom:clamp(20px,3vw,40px)}
.reel-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.reel-head h2{font:700 clamp(2.25rem,5vw,4.75rem)/.92 var(--f-sage);text-transform:uppercase;letter-spacing:.01em}
.reel-head h2 span{display:block;font-weight:300;color:var(--s-gold);letter-spacing:.05em}
.reel-head p{max-width:36ch;color:var(--s-w2)}
.track-wrap{position:relative;min-height:0;min-width:0;display:flex;align-items:center}
.track{display:flex;gap:clamp(12px,1.6vw,24px);padding-inline:var(--gutter);will-change:transform;transform:translate3d(var(--tx,0px),0,0)}
.frame{position:relative;flex:none;height:min(56vh,620px);aspect-ratio:4 / 3;margin:0;border-radius:6px;overflow:hidden;background:var(--s-char)}
.frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.12) translateX(var(--px,0px))}
.frame figcaption{position:absolute;left:14px;bottom:14px;font:600 .75rem/1 var(--f-sage);letter-spacing:.18em;text-transform:uppercase;color:#fff;padding:8px 10px;background:rgba(13,13,13,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:3px}
.frame.title-card{aspect-ratio:3 / 4;background:var(--s-gold);color:var(--s-black);display:grid;align-content:space-between;padding:clamp(20px,2.4vw,32px)}
.title-card b{font:700 clamp(2rem,3.4vw,3.25rem)/.95 var(--f-sage);text-transform:uppercase}
.title-card dl{margin:0;display:grid;gap:12px}
.title-card dt{font:600 .6875rem/1 var(--f-sage);letter-spacing:.2em;text-transform:uppercase;opacity:.65}
.title-card dd{margin:4px 0 0;font:600 1.125rem/1.2 var(--f-sage)}
.reel-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--s-w3)}
.reel-bar{position:relative;flex:1;max-width:320px;height:2px;background:var(--s-wline);overflow:hidden}
.reel-bar i{position:absolute;inset:0;background:var(--s-gold);transform-origin:left;transform:scaleX(var(--rp,0))}
@media (prefers-reduced-motion:reduce){.reel{height:auto}.reel-stage{position:relative;height:auto;gap:28px}.track-wrap{overflow-x:auto;scroll-snap-type:x mandatory}.frame{scroll-snap-align:start}.frame img{transform:none}}

/* ===== The site ===== */
.site{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.browser{grid-column:1 / span 8;border-radius:14px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(13,13,13,.1),0 60px 120px -60px rgba(13,13,13,.75)}
.browser-bar{display:flex;align-items:center;gap:6px;height:34px;padding-inline:14px;background:#1C1C1C;border-bottom:1px solid rgba(255,255,255,.06)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.browser-bar span{margin-left:10px;font:500 .75rem/1 var(--f-mono);color:rgba(255,255,255,.45)}
/* Rebuilt hero of sagebuildersofidaho.com */
.mini{position:relative;aspect-ratio:16 / 10;overflow:hidden;color:#fff;font-family:var(--f-sage);isolation:isolate;container-type:inline-size}
.mini > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.mini::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,13,13,.86) 0%,rgba(13,13,13,.55) 55%,rgba(13,13,13,.25) 100%)}
.mini-nav{display:flex;justify-content:space-between;align-items:center;padding:3.2cqi 4.4cqi}
.mini-nav .lg{width:13cqi;color:#fff}
.mini-nav .lg svg{width:100%;height:auto;display:block}
.mini-nav ul{display:flex;gap:2.6cqi;list-style:none;margin:0;padding:0;font-size:1.25cqi;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.mini-nav b{font-size:1.2cqi;letter-spacing:.14em;padding:1.2cqi 1.8cqi;background:var(--s-gold-deep);border-radius:.4cqi}
.mini-copy{position:absolute;left:4.4cqi;bottom:9cqi;max-width:58cqi}
.mini-copy small{display:block;font-size:1.2cqi;letter-spacing:.2em;color:var(--s-gold);margin-bottom:2cqi}
.mini-copy .mini-title{margin:0;font-size:8.4cqi;line-height:.92;font-weight:700;text-transform:uppercase}
.mini-copy .mini-title span{display:block;color:var(--s-gold)}
.mini-copy p{margin:2.2cqi 0 0;font-size:1.55cqi;line-height:1.5;color:rgba(255,255,255,.82);max-width:46cqi}
.mini-copy .cta{display:flex;gap:1.4cqi;margin-top:2.8cqi}
.mini-copy .cta span{font-size:1.2cqi;font-weight:600;letter-spacing:.16em;padding:1.5cqi 2.2cqi;border-radius:.4cqi}
.mini-copy .cta span:first-child{background:var(--s-gold-deep)}
.mini-copy .cta span:last-child{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.site-notes{grid-column:10 / span 3;list-style:none;margin:0;padding:0;border-top:1px solid var(--s-kline)}
.site-notes li{display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:10px;padding-block:18px;border-bottom:1px solid var(--s-kline)}
.site-notes span{font:500 var(--t-label)/1.7 var(--f-mono);color:var(--s-gold-deep)}
.site-notes b{display:block;font:700 1.125rem/1.2 var(--f-display);font-stretch:95%;letter-spacing:-.01em;margin-bottom:4px}
.site-notes p{color:var(--s-k2);font-size:.9375rem}

/* Trades */
.trades{list-style:none;margin:clamp(56px,7vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--s-kline);border-left:1px solid var(--s-kline)}
.trades li{position:relative;padding:22px 18px 20px;border-right:1px solid var(--s-kline);border-bottom:1px solid var(--s-kline);display:grid;gap:26px;min-height:132px;transition:background-color 200ms ease}
.trades li span{font:500 .6875rem/1 var(--f-mono);color:var(--s-k3)}
.trades li b{font:600 1.125rem/1.1 var(--f-sage);letter-spacing:.06em;text-transform:uppercase;align-self:end}
.trades li.is-roof{background:var(--r-navy);color:#fff}
.trades li.is-roof span{color:var(--r-gold-2)}
.trades li.is-roof a{position:absolute;inset:0;border-radius:0}
.trades li.is-roof em{position:absolute;right:16px;top:18px;font:500 .6875rem/1 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--r-gold-2);display:flex;gap:6px;align-items:center}
@media (hover:hover) and (pointer:fine){.trades li:not(.is-roof):hover{background:#fff}.trades li.is-roof:hover{background:var(--r-navy-2)}}

/* ===== Roofing division ===== */
.roof{background:var(--r-navy);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.roof .head p{color:rgba(255,255,255,.66)}
.roof-mark{position:absolute;right:-6vw;top:clamp(40px,6vw,80px);width:min(48vw,640px);z-index:-1;opacity:.06;color:#fff}
.roof-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.roof-browser{grid-column:1 / span 7;border-radius:14px;overflow:hidden;box-shadow:0 60px 120px -60px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.roof-browser .browser-bar{background:#0A1322}
.rmini{position:relative;aspect-ratio:16 / 10;overflow:hidden;font-family:var(--f-sage);color:#fff;isolation:isolate;container-type:inline-size}
.rmini > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.rmini::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,24,41,.9) 0%,rgba(12,24,41,.55) 52%,rgba(12,24,41,.05) 100%)}
.rmini .mini-nav .lg{width:17cqi}
.rmini .mini-nav .lg svg{width:100%;height:auto;display:block}
.rmini .mini-nav b{background:var(--r-gold)}
.rmini .mini-copy small{color:var(--r-gold-2)}
.rmini .mini-copy .mini-title{font-size:7.6cqi}
.rmini .mini-copy .mini-title span{color:var(--r-gold-2)}
.rmini .mini-copy .cta span:first-child{background:var(--r-gold)}
.roof-side{grid-column:9 / span 4;display:grid;gap:28px}
.roof-side h3{font:700 clamp(1.5rem,2.2vw,2rem)/1.1 var(--f-display);font-stretch:95%;letter-spacing:-.02em}
.roof-side p{color:rgba(255,255,255,.7)}
.why{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.why li{display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:10px;padding-block:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.why span{font:500 var(--t-label)/1.7 var(--f-mono);color:var(--r-gold-2)}
.why b{display:block;font-weight:600;margin-bottom:3px}
.why p{font-size:.9375rem}
/* Climate strip */
.climate{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(48px,6vw,88px)}
.cl{position:relative;border-radius:18px;padding:clamp(18px,2vw,26px);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);display:grid;gap:10px;overflow:hidden;min-height:180px;align-content:space-between}
.cl b{font:700 clamp(2.25rem,4vw,3.75rem)/.9 var(--f-sage);color:#fff;font-variant-numeric:tabular-nums}
.cl b small{font-size:.42em;font-weight:600;letter-spacing:.08em;margin-left:4px;color:var(--r-gold-2)}
.cl > span{font:600 .75rem/1.35 var(--f-sage);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cl i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--r-gold);transform-origin:left;transform:scaleX(var(--fill,0));transition:transform 1400ms var(--ease-out)}
.cl-note{margin-top:16px;font:500 var(--t-label)/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4)}
/* Family */
.family{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:clamp(48px,6vw,88px)}
.fam{border-radius:18px;padding:clamp(22px,3vw,40px);display:grid;gap:26px;align-content:space-between;min-height:260px}
.fam-b{background:var(--s-black);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fam-r{background:var(--r-cream);color:var(--r-navy)}
.fam .lg{width:min(240px,70%);color:#fff}
.fam-r .lg{color:var(--r-navy)}
.fam .lg svg{width:100%;height:auto;display:block}
.sw{display:flex;gap:8px;flex-wrap:wrap}
.sw span{display:inline-flex;align-items:center;gap:8px;font:500 .75rem/1 var(--f-mono);padding:6px 10px 6px 6px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.25)}
.sw i{background:var(--sw);width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(127,127,127,.3)}
.fam p{font-size:.9375rem;opacity:.75;max-width:40ch}

/* Delivered */
.shipped{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.shipped h2{grid-column:1 / span 5;font-size:var(--t-display);font-weight:800;font-stretch:90%;letter-spacing:-.03em;line-height:.94}
.shipped ul{grid-column:7 / span 6;list-style:none;margin:0;padding:0;border-top:1px solid var(--night-line)}
.shipped li{display:grid;grid-template-columns:3em minmax(0,1fr);gap:16px;padding-block:22px;border-bottom:1px solid var(--night-line)}
.shipped li span{font:500 var(--t-label)/1.7 var(--f-mono);color:var(--signal)}
.shipped li b{display:block;font:700 1.25rem/1.2 var(--f-display);font-stretch:95%;letter-spacing:-.01em;margin-bottom:4px}
.shipped li p{color:var(--on-night-2);font-size:var(--t-ui)}

/* Responsive */
@media (max-width:1080px){
  .hero h1,.meta{grid-column:1 / -1}
  .hero .icon-btn{grid-column:1 / -1;justify-self:center}
  .brief-q{grid-column:1 / -1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .browser,.site-notes{grid-column:1 / -1}
  .trades{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roof-browser,.roof-side{grid-column:1 / -1}
  .climate{grid-template-columns:repeat(2,minmax(0,1fr))}
  .head h2,.head p{grid-column:1 / -1}
  .shipped h2,.shipped ul{grid-column:1 / -1}
  .next h2,.next-side{grid-column:1 / -1}
}
@media (max-width:760px){
  :root{--hdr:64px}
  .crumb{display:none}
  .brand svg{height:31px}
  .nav .btn{padding-block:11px;padding-inline:16px 14px}
  .hero-in{text-align:center}
  .hero-logo{margin-inline:auto}
  .hero h1{margin-inline:auto}
  .meta{text-align:left}
  .brief-cols{grid-template-columns:minmax(0,1fr)}
  .reel{height:360vh}
  .reel-head p{display:none}
  .frame{height:48vh}
  .family{grid-template-columns:minmax(0,1fr)}
  .mini-nav ul{display:none}
}