/* Evolve Roofing: light lead-generation layout with the brand's gold, the hero video kept dark. */
:root{
  --canvas:#FFFFFF;
  --cream:#F7F3EB;
  --band:#EEE9DF;
  --ink:#1C1916;
  --ink-2:#5B5449;
  --gold:#CCA300;
  --gold-hover:#B89300;
  --gold-deep:#8C7100;
  --gold-muted:rgba(204,163,0,.16);
  --line:rgba(28,25,22,.12);
  --line-strong:rgba(28,25,22,.32);
  --dark:#15120E;
  --dark-2:#1F1A14;
  --cream-text:#F4F0E8;
  --cream-text-2:#B9B1A3;
  --warn:#B5412A;
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --body:'Public Sans',system-ui,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --shadow:0 12px 40px rgba(28,25,22,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
html{overflow-x:hidden}
html,body{overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 1rem/1.6 var(--body);opacity:0;animation:pageIn 1s var(--ease) .05s forwards}
@keyframes pageIn{to{opacity:1}}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-deep)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.06;margin:0;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:22ch}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:700}
p{margin:0 0 1em}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.04em}
.small{font-size:.86rem}
.center{text-align:center}
.center h2{margin-left:auto;margin-right:auto}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 14px;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
body.menu-open{overflow:hidden}
main{position:relative;z-index:1}

/* ---------- Buttons: squared, uppercase, like the reference ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--gold);color:var(--ink);font:700 .82rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:1.05em 1.7em;border-radius:4px;border:2px solid var(--gold);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .4s var(--ease),background .3s,border-color .3s,color .3s,box-shadow .3s}
.btn:hover{background:var(--gold-hover);border-color:var(--gold-hover);transform:translateY(-2px);box-shadow:0 10px 26px rgba(204,163,0,.28)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;box-shadow:none}
.btn.ghost-dark{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost-dark:hover{border-color:var(--ink);background:none;box-shadow:none}
.btn.light{background:#fff;border-color:#fff;color:var(--ink)}
.btn.light:hover{background:var(--cream);border-color:var(--cream)}
.btn.big{font-size:.9rem;padding:1.15em 1.9em}
.btn.wide{width:100%}
.band .btn{text-shadow:none}
.link{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid rgba(140,113,0,.35);padding-bottom:2px;font-weight:600;transition:border-color .3s}
.link:hover{border-color:var(--gold-deep)}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- Nav: white text over the hero, white bar once scrolled ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;padding:12px 5vw;color:#fff;
  background:linear-gradient(rgba(21,18,14,.85),rgba(21,18,14,0));transition:background .4s,box-shadow .4s,color .4s}
.nav.solid{background:#fff;color:var(--ink);box-shadow:0 2px 18px rgba(28,25,22,.12)}
.brand{flex:none;display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{height:42px;width:auto;max-width:none}
.brand .logo-on-light,.nav.solid .brand .logo-on-dark{display:none}
.nav.solid .brand .logo-on-light{display:block}
.brand-name{font:800 1.12rem/1 var(--display);letter-spacing:.005em;color:inherit;white-space:nowrap}
.nav nav{display:flex;gap:22px;margin-left:auto}
.nav nav a{color:inherit;text-decoration:none;font:700 .78rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;opacity:.92;white-space:nowrap;transition:opacity .3s,color .3s}
.nav nav a:hover{opacity:1;color:var(--gold)}
.nav.solid nav a:hover{color:var(--gold-deep)}
.nav-cta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.nav-cta .btn{padding:.9em 1.3em}
.nav-phone{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;font:700 .9rem/1 var(--body)}
.nav-phone:hover{color:var(--gold)}
.nav.solid .nav-phone:hover{color:var(--gold-deep)}
@media (max-width:1180px){.nav nav{gap:14px}.nav nav a{font-size:.72rem}}
@media (max-width:1060px){.brand-name{display:none}}
.menu{display:none;margin-left:auto;width:44px;height:44px;background:none;border:1px solid currentColor;border-radius:8px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:none;color:inherit}
.menu span{display:block;width:20px;height:2px;background:currentColor;transition:transform .35s var(--ease)}
.menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-nav{position:fixed;top:66px;left:0;right:0;bottom:0;z-index:49;background:#fff;border-top:1px solid var(--line);padding:22px 6vw 32px;display:grid;gap:6px;align-content:start;overflow-y:auto;overscroll-behavior:contain}
.mobile-nav[hidden]{display:none}
.mobile-nav a:not(.btn){color:var(--ink);text-decoration:none;font:700 1.3rem/1.15 var(--display);min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:14px;justify-self:start}
.mobile-nav .btn.ghost-dark{margin-top:4px}
body.menu-open .nav{background:#fff;color:var(--ink)}
body.menu-open .brand .logo-on-dark{display:none}
body.menu-open .brand .logo-on-light{display:block}
@media (max-width:960px){.nav nav,.nav-cta{display:none}.menu{display:flex}.brand-name{display:inline}}
@media (min-width:961px){.mobile-nav{display:none!important}}
@media (max-width:480px){.brand-name{font-size:1rem}}

/* ---------- Hero (short scrub journey, kept dark) ---------- */
.hero{position:relative;height:260vh;background:var(--dark)}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--dark)}
.poster{position:absolute;inset:0;background:var(--dark) center/cover no-repeat}
#heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);transform:translateZ(0);will-change:transform;pointer-events:none}
.stage.video-ready #heroVideo{opacity:1}
.stage.video-failed #heroVideo{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}
.ring{position:absolute;right:30px;bottom:30px;width:44px;height:44px;color:var(--gold);transform:rotate(-90deg);opacity:.9;transition:opacity .5s;z-index:3}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.chev{position:absolute;right:30px;bottom:30px;width:44px;height:44px;z-index:3;color:var(--gold);display:flex;align-items:center;justify-content:center;animation:bob 2.4s ease-in-out -1.2s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.band{position:absolute;z-index:2;opacity:0;pointer-events:none;text-shadow:var(--tshadow);color:var(--cream-text);--sa:.78}
.band::before{content:"";position:absolute;inset:-46% -34%;pointer-events:none;z-index:-1;opacity:calc(.55 + .45*var(--k,1));
  background:radial-gradient(ellipse 62% 60% at 50% 50%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.82)) 40%,rgba(5,5,10,calc(var(--sa)*.4)) 62%,rgba(5,5,10,0) 80%)}
.band.on{pointer-events:auto}
.b1{left:6vw;top:34vh;max-width:min(54vw,780px);--sa:.82}
.b1 .hook{font:800 clamp(2.2rem,5vw,4.9rem)/1.04 var(--display);letter-spacing:-.01em;max-width:12ch;color:var(--cream-text);margin:0;text-wrap:balance}
.b4.settle{left:50%;top:52%;transform:translate(-50%,-50%);text-align:center;width:min(86vw,940px);--sa:.84}
.b4.settle::before{inset:-42% -22%;background:radial-gradient(ellipse 62% 60% at 50% 50%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.9)) 48%,rgba(5,5,10,calc(var(--sa)*.45)) 68%,rgba(5,5,10,0) 84%)}
.b4 h1{font-size:clamp(2.4rem,6vw,5.7rem);max-width:none;color:var(--cream-text)}
.b4 .sub{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--cream-text);max-width:54ch;margin:1.1em auto 1.4em;text-wrap:pretty;--ks:clamp(0,(var(--k,0) - .55)*3,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;--kb:clamp(0,(var(--k,0) - .72)*4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.split .w{display:inline-block;white-space:nowrap}
.band[data-fx="rise"] .w,.band[data-fx="settle"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*24px))}
.band[data-fx="blur"] .split{position:relative}
.band[data-fx="blur"] .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0));pointer-events:none}
.band[data-fx="blur"] .sharp{opacity:var(--k,0);transform:translateY(calc((1 - var(--k,0))*8px))}
.cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--cream-text-2);font:500 .72rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:1;transition:opacity .6s}
.cue i{width:22px;height:34px;border:1px solid rgba(244,240,232,.4);border-radius:12px;position:relative}
.cue i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:cueDot 2.2s ease-in-out -.8s infinite}
@keyframes cueDot{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
.stage.scrolled .cue{opacity:0}
@media (max-height:560px){.cue,.ring,.chev{display:none}}

/* The static hero: five gates, identical in site.js */
.hero-static{display:none}
@media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse),(orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;overflow:visible}
  .scrub-only{display:none!important}
  .hero-static{display:block;position:relative;min-height:100vh;min-height:100svh;background:var(--dark) url("hero-static.jpg") center 30%/cover no-repeat;color:var(--cream-text)}
  .hero-static::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,18,14,.55) 0%,rgba(21,18,14,.25) 40%,rgba(21,18,14,.92) 100%)}
  .static-copy{position:relative;z-index:1;padding:min(26vh,200px) 6vw 12vh;max-width:760px;text-shadow:var(--tshadow)}
  .static-copy h1{font-size:clamp(2.3rem,10vw,4.4rem);margin:.2em 0 .3em;color:var(--cream-text)}
  .static-copy .sub{font-size:1.05rem;color:var(--cream-text);max-width:40ch;text-wrap:pretty}
  .static-copy .cta-row{justify-content:flex-start;opacity:1;transform:none}
  .static-copy .btn{text-shadow:none}
  .static-copy .kicker{margin-bottom:.4em;color:var(--gold)}
}
@media (max-width: 720px) and (orientation: portrait){.hero-static{background-image:url("hero-static-portrait.jpg");background-position:center 40%}}
@media (max-width:480px){.static-copy .kicker{letter-spacing:.1em;font-size:.7rem}}

/* ---------- Sections ---------- */
.section{position:relative;z-index:1;padding:clamp(56px,7vw,96px) 0}
.wrap{width:min(1200px,90vw);margin:0 auto;position:relative;z-index:1}
.wrap.narrow{width:min(860px,90vw)}
.kicker{color:var(--gold-deep);letter-spacing:.16em;text-transform:uppercase;font-size:.76rem;margin:0 0 1em}
.kicker.on-dark,.on-dark .kicker{color:var(--gold)}
.lede{font-size:1.12rem;color:var(--ink-2);max-width:60ch;margin:1em 0 1.2em;text-wrap:pretty}
.note{color:var(--ink-2);font-size:.95rem;max-width:60ch;text-wrap:pretty}
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.checks{list-style:none;padding:0;margin:0 0 1.4em}
.checks li{position:relative;padding:.35em 0 .35em 30px}
.checks li::before{content:"";position:absolute;left:0;top:.72em;width:16px;height:9px;border-left:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:rotate(-45deg)}
.sec-head{text-align:center;max-width:720px;margin:0 auto clamp(28px,4vw,44px);display:flex;flex-direction:column;align-items:center;gap:10px}
.sec-head h2{margin:0 auto}
.sec-head .lede{margin:.2em auto 0}
.sec-icon{width:44px;height:44px;color:var(--gold-deep)}
.sec-icon.left{margin-bottom:12px}
.on-dark,.on-dark h2,.on-dark h3,.on-dark p{color:var(--cream-text)}
.on-dark .lede,.on-dark .note{color:var(--cream-text-2)}

/* Entrances */
.reveal .part{opacity:0;transform:translateY(24px)}
.reveal.in .part{opacity:1;transform:none;transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.reveal.in.done .part{transition-delay:0s!important}
.reveal.in.done .scard.part,.reveal.in.done .icard.part,.reveal.in.done .wcard.part,.reveal.in.done .rev.part{transition:transform .6s var(--ease),box-shadow .4s}
.reveal.in.done .scard.part:hover,.reveal.in.done .icard.part:hover,.reveal.in.done .wcard.part:hover,.reveal.in.done .rev.part:hover{transform:translateY(-4px)}
.reveal.in.done .btn.part{transition:transform .4s var(--ease),background .3s,border-color .3s,color .3s,box-shadow .3s}
.reveal.in.done .btn.part:hover{transform:translateY(-2px)}

/* Lead form band (right after the hero) */
.lead{background:var(--cream);padding-top:clamp(56px,7vw,88px)}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.lead-copy h2{margin-bottom:.6em}
.form-card{background:#fff;color:var(--ink);border-radius:8px;box-shadow:var(--shadow);padding:0 28px 26px;position:relative}
.ribbon{margin:0 -28px 22px;background:var(--gold);color:var(--ink);font:700 .78rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:16px 20px;border-radius:8px 8px 0 0;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.ribbon i{font-style:normal;opacity:.6}
.form-card h3{text-align:center;font-size:clamp(1.4rem,2vw,1.8rem);margin-bottom:18px}
.lead-form{display:grid;gap:12px}
.lead-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:4px;position:relative}
.field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.field input,.field select{width:100%;background:#fff;border:1px solid var(--line-strong);border-radius:4px;padding:13px 14px;color:var(--ink);font:inherit;transition:border-color .3s,box-shadow .3s}
.field input::placeholder{color:#6E675C}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-muted)}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px;color:#3A342C}
.field select:has(option:checked:not([disabled])){color:var(--ink)}
.field.invalid input,.field.invalid select{border-color:var(--warn)}
.field .err,.err{display:none;color:var(--warn);font-size:.82rem}
.field.invalid .err,.err.show{display:block}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--ink-2);line-height:1.4}
.consent input{margin-top:3px;accent-color:var(--gold-deep);flex:none;width:16px;height:16px}
.consent.invalid span{color:var(--warn)}
.form-note{color:var(--ink-2);font-size:.82rem;text-align:center;margin:8px 0 0;font-style:italic}
.form-msg{margin:6px 0 0;font-weight:600;min-height:1.2em;text-align:center}
.form-msg.ok{color:var(--gold-deep)}
.form-msg.err{color:var(--warn)}

/* Problem / solution: centered over a washed-out photo */
.problem{background:#fff url("real-bg-problem-1200.jpg") center/cover no-repeat}
.problem::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.88)}
.problem h2{margin:0 0 .8em}
.problem p{font-size:1.08rem;color:var(--ink-2);text-wrap:pretty;max-width:58ch}
.problem .btn{margin-top:.6em}
.problem .two-col{grid-template-columns:1.25fr .75fr;align-items:center}
.vid-col{display:flex;justify-content:center}
.vid-card{margin:0;width:min(100%,300px)}
.vid-card video{display:block;width:100%;aspect-ratio:9/16;height:auto;background:var(--dark);border-radius:22px;box-shadow:0 18px 50px rgba(28,25,22,.28);border:6px solid var(--dark)}
.vid-card figcaption{margin-top:14px;font-size:.92rem;color:var(--ink-2);text-align:center;text-wrap:pretty}
.vid-card figcaption strong{color:var(--ink);font-weight:700}

/* Services: four image cards */
.services{background:var(--canvas)}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:clamp(28px,4vw,44px)}
.scard{background:#fff;border-radius:6px;overflow:hidden;box-shadow:var(--shadow);transition:transform .6s var(--ease)}
.scard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.scard h3{padding:18px 20px 6px;font-size:1.3rem}
.scard p{padding:0 20px 20px;margin:0;color:var(--ink-2);font-size:.95rem;text-wrap:pretty}

/* Feature band: dark, photo behind, text left, the hold module right */
.feature{background:var(--dark);color:var(--cream-text);overflow:hidden}
.feature-bg{position:absolute;inset:0;background:url("real-bg-inspection-1200.jpg") center/cover no-repeat;opacity:.42}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,18,14,.82),rgba(21,18,14,.4))}
.feature .wrap{z-index:2}
.feature h2{color:var(--cream-text)}
.feature p{color:var(--cream-text);max-width:56ch;text-wrap:pretty}

/* The five-layer module: exploded cross-section (judge-panel winner, integrated 2026-09-15) */
.xr{position:relative;background:rgba(31,26,20,.92);border:1px solid rgba(244,240,232,.16);border-radius:16px;padding:22px 22px 20px;color:var(--cream-text);
  display:grid;grid-template-columns:minmax(240px,60%) minmax(0,1fr);grid-template-areas:"head head" "svg notes" "ctl ctl";column-gap:10px;row-gap:14px;align-items:start}
.xr-glow{position:absolute;inset:auto -20% -40% -20%;height:60%;background:radial-gradient(ellipse at 50% 100%,rgba(204,163,0,.18),transparent 65%);opacity:0;pointer-events:none;border-radius:16px}
.xr-head{grid-area:head;display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:22px;padding-right:100px}
.xr-kicker{color:var(--gold);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.xr-count{color:var(--cream-text-2);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.xr-count b{color:var(--gold);font-weight:500}
.xr-wrap{grid-area:svg;position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.xr-svg{display:block;width:100%;height:auto;cursor:grab;overflow:visible}
.xr.dragging .xr-svg{cursor:grabbing}
.xr-intro{position:absolute;left:4px;right:8px;top:0;pointer-events:none;transition:opacity .25s}
.xr-intro-t{font:700 clamp(1.15rem,1.6vw,1.45rem)/1.15 var(--display);color:var(--cream-text);margin:0 0 .35em;text-wrap:balance}
.xr-intro-d{font-size:.86rem;line-height:1.4;color:var(--cream-text-2);margin:0;max-width:30ch;text-wrap:pretty}
.xr .dot{transition:opacity .2s}
.xr .dot .glow{transition:opacity .35s}
.xr .dot.lit .glow{opacity:.28!important}
.xr.idle .dot[data-i="0"] .glow{animation:xrPulse 2.4s ease-in-out infinite}
@keyframes xrPulse{0%,100%{opacity:0}50%{opacity:.32}}
.xr.idle .xr-range::-webkit-slider-thumb{animation:xrNudge 2.4s ease-in-out infinite}
.xr.idle .xr-range::-moz-range-thumb{animation:xrNudge 2.4s ease-in-out infinite}
@keyframes xrNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
/* callouts */
.xr-notes{grid-area:notes;position:relative;list-style:none;margin:0;padding:0;min-height:10px}
.xr-notes li{position:absolute;left:0;right:0}
.xr-notes li::before{content:"";position:absolute;left:-10px;top:9.5px;width:10px;height:1.3px;background:var(--gold);opacity:.42;transition:opacity .3s}
.xr-notes li.on::before{opacity:1}
.xr-notes li[data-i="1"]{top:70px}.xr-notes li[data-i="2"]{top:140px}.xr-notes li[data-i="3"]{top:210px}.xr-notes li[data-i="4"]{top:280px}
.xr-btn{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:8px;align-items:start;width:100%;text-align:left;background:none;border:0;padding:0 4px 0 0;margin:0;color:inherit;font:inherit;cursor:pointer;border-radius:8px;transition:background .25s}
.xr-btn:hover .xr-t{color:var(--cream-text)}
.xr-btn:active{background:rgba(204,163,0,.14)}
.xr-chk{width:20px;height:20px;display:block}
.xr-chk circle{fill:transparent;stroke:rgba(244,240,232,.4);stroke-width:1.6;transition:fill .35s var(--ease),stroke .35s var(--ease)}
.xr-chk path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .45s var(--ease) .12s}
.xr-notes li.on .xr-chk circle{fill:var(--gold);stroke:var(--gold)}
.xr-notes li.on .xr-chk path{stroke-dashoffset:0}
.xr-notes li.on .xr-chk{animation:xrPop .55s var(--ease)}
@keyframes xrPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.xr-t{font:500 .76rem/20px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-text-2);transition:color .3s;white-space:nowrap}
.xr-d{grid-column:1/3;font-size:.88rem;line-height:1.3;color:var(--cream-text-2);transition:color .3s;margin-top:2px}
.xr-notes li.on .xr-t{color:var(--cream-text)}
.xr-notes li.on .xr-d{color:var(--cream-text)}
/* control */
.xr-ctl{grid-area:ctl;padding-top:2px}
.xr-status{font-size:.85rem;letter-spacing:.04em;color:var(--cream-text-2);margin:0 0 6px;min-height:2.6em;line-height:1.3;transition:color .3s;text-wrap:pretty}
.xr.done .xr-status{color:var(--cream-text)}
.xr-track{position:relative;padding-bottom:18px}
.xr-range{-webkit-appearance:none;appearance:none;width:100%;height:36px;margin:0;background:transparent;cursor:pointer;display:block;--p:0%}
.xr-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gold) var(--p),rgba(244,240,232,.22) var(--p))}
.xr-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-13px;border-radius:50%;border:2px solid var(--ink);background:linear-gradient(90deg,transparent 10px,var(--ink) 10px 12px,transparent 12px 16px,var(--ink) 16px 18px,transparent 18px) var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.45);transition:transform .2s}
.xr-range:hover::-webkit-slider-thumb,.xr-range:active::-webkit-slider-thumb{transform:scale(1.08)}
.xr-range::-moz-range-track{height:4px;border-radius:2px;background:rgba(244,240,232,.22)}
.xr-range::-moz-range-progress{height:4px;border-radius:2px;background:var(--gold)}
.xr-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);background:linear-gradient(90deg,transparent 8px,var(--ink) 8px 10px,transparent 10px 14px,var(--ink) 14px 16px,transparent 16px) var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.xr-range:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
@media (pointer:coarse){.xr-range{height:44px}.xr-range::-webkit-slider-thumb{width:34px;height:34px;margin-top:-15px}.xr-range::-moz-range-thumb{width:30px;height:30px}.xr-ticks{top:30px}}
.xr-ticks{position:absolute;left:15px;right:15px;top:26px;height:14px;pointer-events:none}
.xr-ticks i{position:absolute;top:0;transform:translateX(-50%);font:500 .7rem/1 var(--mono);font-style:normal;color:var(--cream-text-2);letter-spacing:.04em;opacity:.85;transition:color .3s,opacity .3s}
.xr-ticks i::before{content:"";position:absolute;left:50%;top:-8px;width:1px;height:5px;background:currentColor}
.xr-ticks i.on{color:var(--gold);opacity:1}
/* seal */
.xr-seal{position:absolute;top:4px;right:8px;width:92px;height:92px;opacity:0;pointer-events:none;transform:scale(1.5) rotate(-14deg);z-index:3}
.xr-seal svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.xr.done .xr-seal{opacity:1;transform:scale(1) rotate(-6deg);animation:xrStamp .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes xrStamp{0%{opacity:0;transform:scale(1.6) rotate(-14deg)}55%{opacity:1;transform:scale(.94) rotate(-5deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
/* stacked layout (module narrower than 500px): drawing on top, control under it, callouts as a list */
.xr.stack{grid-template-columns:1fr;grid-template-areas:"head" "svg" "ctl" "notes";padding:16px 14px 16px;row-gap:12px}
.xr.stack .xr-head{padding-right:76px}
.xr.stack .xr-kx{display:none}
.xr.stack .xr-seal{width:68px;height:68px;top:6px;right:8px}
.xr.stack .xr-notes li{position:static;margin:0 0 10px;border:1px solid rgba(244,240,232,.1);border-radius:10px;background:rgba(21,18,14,.5);transition:border-color .3s}
.xr.stack .xr-btn{padding:10px 10px 10px 8px;min-height:44px}
.xr.stack .xr-notes li.on{border-color:rgba(204,163,0,.45)}
.xr.stack .xr-notes li:last-child{margin-bottom:0}
.xr.stack .xr-notes li::before{display:none}
.xr.stack #leaders{display:none}
.xr.stack .xr-t{white-space:normal}
.xr.stack .xr-d{grid-column:2/3;font-size:.86rem;margin-top:0}
@media (max-width:960px){.xr{max-width:600px;margin:0 auto}}
@media (max-width:560px){.xr-svg{aspect-ratio:357/459}}
@media (max-width:360px){.xr-t{font-size:.7rem}}

/* Why rejuvenation: washed photo, six white icon cards */
.why-rejuv{background:var(--cream)}
.wash{position:absolute;inset:0;background:url("real-rejuvenation-1200.jpg") center/cover no-repeat;opacity:.12}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:clamp(28px,4vw,44px)}
.icard{background:#fff;border-radius:6px;padding:30px 26px;box-shadow:var(--shadow);text-align:center;transition:transform .6s var(--ease)}
.icard svg{width:48px;height:48px;color:var(--gold-deep);margin:0 auto 14px}
.icard h3{font-size:1.25rem;margin-bottom:.5em}
.icard p{margin:0;color:var(--ink-2);font-size:.95rem;text-wrap:pretty}

/* Why Evolve: tinted photo band, four white cards */
.why-evolve{background:var(--dark);color:var(--cream-text)}
.tint{position:absolute;inset:0;background:url("real-bg-evolve-1200.jpg") center/cover no-repeat;opacity:.35}
.why-evolve::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,18,14,.55),rgba(21,18,14,.75))}
.why-evolve .wrap{z-index:2}
.cards4.tall .wcard{background:#fff;color:var(--ink);border-radius:6px;padding:34px 26px;box-shadow:var(--shadow);min-height:250px;transition:transform .6s var(--ease)}
.wcard h3{font-size:1.3rem;margin-bottom:.5em;color:var(--ink)}
.wcard p{margin:0;color:var(--ink-2);font-size:.95rem;text-wrap:pretty}

/* Recent roofs: real drone photos */
.work{background:var(--cream)}
.jobs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:clamp(28px,4vw,44px)}
.job{margin:0;background:#fff;border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.job img{width:100%;aspect-ratio:4/3;object-fit:cover}
.job figcaption{padding:10px 14px 12px;font-size:.84rem;color:var(--ink-2);line-height:1.35}
/* Homeowner photos under the reviews */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.person{margin:0;background:var(--cream);border-radius:8px;overflow:hidden}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover}
.person figcaption{padding:10px 14px 12px;font:500 .78rem/1.3 var(--mono);letter-spacing:.04em;color:var(--ink-2)}

/* Process: photo band with dark overlay, three steps */
.process{background:var(--dark);color:var(--cream-text)}
.process-bg{position:absolute;inset:0;background:url("real-bg-process-1200.jpg") center/cover no-repeat;opacity:.5}
.process::after{content:"";position:absolute;inset:0;background:rgba(21,18,14,.62)}
.process .wrap{z-index:2}
.process h2{margin-bottom:clamp(28px,4vw,44px);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.steps3{list-style:none;padding:0;margin:0 0 clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center}
.steps3 li{display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.steps3 svg{width:52px;height:52px;color:var(--gold);margin-bottom:14px}
.steps3 h3{color:var(--cream-text);font-size:1.4rem;margin-bottom:.4em}
.steps3 p{color:var(--cream-text);margin:0;max-width:34ch;text-wrap:pretty}

@media (min-width:1201px){.feature-bg{background-image:url("real-bg-inspection-1600.jpg")}.process-bg{background-image:url("real-bg-process-1600.jpg")}.tint{background-image:url("real-bg-evolve-1600.jpg")}.problem{background-image:url("real-bg-problem-1600.jpg")}.lead2-bg{background-image:url("real-bg-contact-1600.jpg")}}

/* Cost of waiting: light band, text left, photo right */
.waiting{background:var(--band)}
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.split-copy p{color:var(--ink-2);font-size:1.05rem;text-wrap:pretty;max-width:58ch}
.split-copy h2{margin-bottom:.7em}
.split-fig{margin:0;border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.split-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* Reviews */
.reviews{background:#fff}
.stars{color:var(--gold);letter-spacing:.08em}
.stars.big{font-size:1.6rem}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.rev{background:var(--cream);border-radius:8px;padding:26px;margin:0;position:relative;transition:transform .6s var(--ease)}
.rev p{font-size:1rem;color:var(--ink);margin:0 0 1em;text-wrap:pretty}
.rev p::before{content:"\201C";color:var(--gold);font-family:var(--display);font-size:2.2em;line-height:0;vertical-align:-.35em;margin-right:.08em}
.rev footer{font:500 .8rem/1 var(--mono);letter-spacing:.06em;color:var(--ink-2);display:flex;gap:10px;align-items:center}

/* FAQ */
.faq{background:var(--cream)}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;position:relative;font:700 1.12rem/1.3 var(--display);letter-spacing:0;transition:color .3s}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--gold-deep),var(--gold-deep)) center/14px 2px no-repeat,linear-gradient(var(--gold-deep),var(--gold-deep)) center/2px 14px no-repeat;transition:transform .4s var(--ease)}
.acc details[open] summary{color:var(--gold-deep)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc summary:hover{color:var(--gold-deep)}
.acc details>div{padding:0 0 20px;color:var(--ink-2);max-width:66ch}
.acc details>div p{margin:0}

/* Second form: over a photo */
.lead2{background:var(--dark);color:var(--cream-text)}
.lead2-bg{position:absolute;inset:0;background:url("real-bg-contact-1200.jpg") center/cover no-repeat;opacity:.4}
.lead2::after{content:"";position:absolute;inset:0;background:rgba(21,18,14,.6)}
.lead2 .wrap{z-index:2}
.lead2 .lead-copy h2{color:var(--cream-text);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.lead2 .lead-copy p{text-shadow:0 1px 8px rgba(0,0,0,.5)}
.lead2 .tel{color:var(--gold);text-decoration:none;font-weight:700;white-space:nowrap}

/* Footer */
.foot{position:relative;z-index:1;background:var(--dark);color:var(--cream-text-2);padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr .9fr 1fr 1.1fr;gap:36px;align-items:start}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:var(--cream-text)}
.foot-logo{height:44px;width:auto}
.foot-h{font:700 1.05rem/1.2 var(--display);color:var(--cream-text);margin:0 0 14px}
.foot-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot-list a{color:var(--cream-text);text-decoration:none;transition:color .3s}
.foot-list a:hover{color:var(--gold)}
.foot-list.pins li{position:relative;padding-left:22px;color:var(--cream-text)}
.foot-list.pins li::before{content:"";position:absolute;left:0;top:.35em;width:10px;height:10px;border:2px solid var(--gold);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.foot .small{color:var(--cream-text-2)}
.foot-bottom{margin-top:44px;padding:18px 0;background:#100E0B}
.foot-bottom .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-bottom a{color:var(--cream-text);text-decoration:none}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.cards4,.jobs{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1.3fr 1fr 1fr;row-gap:32px}}
@media (max-width:960px){
  .lead-grid,.two-col,.duo,.problem .two-col{grid-template-columns:1fr}
  .people{grid-template-columns:repeat(3,1fr);gap:12px}
  .cards3{grid-template-columns:repeat(2,1fr)}
  .rev-grid{grid-template-columns:1fr 1fr}
  .steps3{grid-template-columns:1fr;gap:26px}
  .b1{max-width:70vw}
}
@media (max-width:640px){
  .cards4,.cards3,.rev-grid,.lead-form .two,.jobs,.people{grid-template-columns:1fr}
  .wrap,.wrap.narrow{width:min(1200px,92vw)}
  .section{padding:52px 0}
  .form-card{padding:0 18px 20px}
  .ribbon{margin:0 -18px 18px;font-size:.7rem;letter-spacing:.1em}
  .cta-row .btn{width:100%}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom .wrap{flex-direction:column}
}
@media (max-height:480px){.mobile-nav{padding-top:10px;gap:0}.mobile-nav a:not(.btn){min-height:40px}}

/* ---------- Print ---------- */
@media print{
  body{background:#fff;color:#111;opacity:1;animation:none;font-size:11pt}
  .nav,.mobile-nav,.cue,.ring,.chev,.skip,.form-note,.feature-bg,.wash,.tint,.process-bg,.lead2-bg,.vid-card{display:none!important}
  .reveal .part{opacity:1;transform:none}
  .hero{height:auto}
  .scrub-only{display:none!important}
  .hero-static{display:block;min-height:0;background-image:none!important;text-shadow:none;color:#111}
  .hero-static::before{display:none}
  .static-copy{padding:0 0 24px;color:#111}
  .static-copy h1,.section h2,.section h3,.on-dark,.on-dark h2,.on-dark h3,.on-dark p,.feature p,.steps3 p,.steps3 h3,.lead2 .lead-copy p{color:#111;text-shadow:none}
  .section{padding:18px 0;break-inside:avoid;background:none!important}
  .section::before,.section::after{display:none}
  .form-card,.scard,.icard,.wcard,.rev,.split-fig{box-shadow:none;border:1px solid #999;background:none;color:#111}
  .xr{display:block;background:none;border:1px solid #999;color:#111}
  .xr-ctl,.xr-seal,.xr-glow,.xr-intro{display:none!important}
  .xr-notes li{position:static!important;margin-bottom:6px}
  .xr-t,.xr-d,.xr-count,.xr-kicker{color:#111}
  .xr-svg{max-width:60%;height:auto!important}
  .btn{background:none;color:#000;border:1px solid #000;box-shadow:none}
  .acc details>div{display:block;color:#333}
  .foot{background:none;color:#333;padding:12px 0}
  .foot-list a,.foot-h,.foot-brand{color:#111}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
  body{opacity:1}
  .reveal .part{opacity:1;transform:none}
  .xr *,.xr *::before,.xr *::after{animation:none!important;transition:none!important}
  .cta-row,.b4 .sub{opacity:1;transform:none}
  .b4.settle{transform:translate(-50%,-50%)}
}