/* Editorial layer (B2): restraint, big imagery, asymmetric layout, scroll reveals. Loads after site.css. */
:root{--paper:#F6F3EC}
.ed .sec{padding:140px 0}
.ed main h2{font-size:clamp(40px,5vw,68px);line-height:1.02}
.ed .lede{font:600 clamp(30px,3.4vw,46px)/1.18 var(--serif);letter-spacing:-.005em;margin:0 0 28px}
/* header: quieter */
.ed .top.over .nav{display:none}.ed .top.over .call{margin-left:auto}.ed .top.over .menu-btn{display:inline-flex;align-items:center;margin-left:0}
@media (min-width:981px){.ed .top.over .topin{gap:28px}}
/* hero */
.ed .hero{min-height:100vh;align-items:flex-end}.ed .hero .wrap{padding:0 0 12vh}.ed .hero h1{font-size:clamp(52px,7.4vw,112px);line-height:.96;max-width:11.5em}
.ed .hero-pic img{will-change:transform;transform:translateY(var(--py,0)) scale(1.06)}
.ed .scroll-cue{position:absolute;right:32px;bottom:34px;color:#fff;font-size:13px;letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl;display:flex;align-items:center;gap:12px;opacity:.85}.ed .scroll-cue::after{content:"";width:1px;height:56px;background:currentColor}
/* statement */
.statement{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;background:var(--paper)}
.statement .txt{padding:140px 8vw 140px max(20px,calc((100vw - 1180px)/2))}.statement .pic{height:100%;min-height:640px;position:relative}.statement .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proofline{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--green)}
/* slider */
.feature{position:relative;background:var(--deep);color:#fff}.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;position:relative;min-height:88vh;display:flex;align-items:flex-end}.slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,12,0) 45%,rgba(8,16,12,.78))}
.slide .cap{position:relative;z-index:1;padding:0 0 70px}.slide .cap p{margin:0 0 6px;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}.slide h3{font-size:clamp(34px,4.4vw,60px);margin:0 0 14px}
.slider-ui{position:absolute;right:max(20px,calc((100vw - 1180px)/2));bottom:70px;z-index:2;display:flex;align-items:center;gap:14px}.slider-ui button{width:52px;height:52px;border-radius:50%;border:1.5px solid #fff;background:rgba(0,0,0,.2);color:#fff;font-size:22px;cursor:pointer}.slider-ui .count{font-size:15px;letter-spacing:.1em;min-width:56px;text-align:center}
/* plan */
.plan{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.plan-art{position:relative;padding:0 0 90px 0}.plan-art svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line)}
.plan-art img{position:absolute;right:-30px;bottom:0;width:58%;aspect-ratio:4/3;object-fit:cover;border:10px solid #fff;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.plan ol{list-style:none;padding:0;margin:26px 0 34px;display:grid;gap:18px}.plan li{display:grid;grid-template-columns:52px 1fr;gap:6px 16px;align-items:baseline}.plan li b{font:600 30px var(--serif);color:var(--green)}.plan li span{font-size:17px}
/* filmstrip */
.film{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(20px,calc((100vw - 1180px)/2)) 20px;scrollbar-width:thin}
.film figure{flex:0 0 min(420px,78vw);margin:0;scroll-snap-align:start}.film img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}.film figcaption{padding:14px 2px 0;font-size:16px}.film b{display:block;font:600 26px var(--serif);margin-bottom:4px}
.film-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.film-hint{font-size:14px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
/* breather */
.breather{position:relative;min-height:90vh;display:flex;align-items:center;color:#fff;overflow:hidden}.breather>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.breather::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(5,10,14,.62),rgba(5,10,14,.5))}
.breather blockquote{position:relative;z-index:1;text-shadow:0 2px 18px rgba(0,0,0,.6);margin:0 auto;max-width:900px;text-align:center;font-size:clamp(34px,4.6vw,62px);line-height:1.12;padding:0 20px}.breather cite{display:block;margin-top:22px;font:600 15px var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--mint)}
/* family collage */
.family2{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}.collage{position:relative;height:560px}.collage figure{position:absolute;margin:0;background:#fff;padding:10px 10px 30px;box-shadow:0 14px 34px rgba(0,0,0,.18)}.collage img{width:100%;height:100%;object-fit:cover}
.collage .c1{width:52%;height:46%;left:0;top:4%;transform:rotate(-3deg)}.collage .c2{width:46%;height:40%;right:2%;top:0;transform:rotate(2.5deg)}.collage .c3{width:50%;height:44%;left:10%;bottom:0;transform:rotate(1.5deg)}.collage .c4{width:44%;height:42%;right:0;bottom:6%;transform:rotate(-2deg)}
/* reveal (only when JS runs) */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}.ed .hero-pic img{transform:none}}
@media (max-width:980px){.ed .top.over .call{display:none}.statement,.plan,.family2{grid-template-columns:1fr}.statement .txt{padding:90px 20px}.statement .pic{min-height:420px}.plan-art img{right:0}.collage{height:440px}}
@media (max-width:760px){.ed .sec{padding:86px 0}.ed .hero .wrap{padding-bottom:110px}.ed .hero h1{font-size:clamp(44px,12vw,60px)}.ed .scroll-cue{display:none}.slide{min-height:78vh}.slide .cap{padding-bottom:100px}.slider-ui{left:20px;right:auto;bottom:28px}.collage{height:360px}.plan-art{padding-bottom:70px}.breather{min-height:70vh}}
/* hero v2: let the photo breathe — shade only where the text sits; phones stack photo over text */
.ed .hero .shade{background:linear-gradient(0deg,rgba(8,16,12,.86) 0%,rgba(8,16,12,.42) 34%,rgba(8,16,12,0) 62%),linear-gradient(90deg,rgba(8,16,12,.5) 0%,rgba(8,16,12,0) 55%)}
.ed .hero-pic img{object-position:var(--hero-pos,center 40%);filter:saturate(1.08) contrast(1.04)}
.ed .hero h1,.ed .hero .eyebrow{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.cta-note{margin:16px 0 0;font-size:15px;opacity:.9}
@media (max-width:760px){
  .ed .hero{display:block;min-height:0;background:var(--deep)}
  .ed .hero-pic img{transform:none;filter:saturate(1.1) contrast(1.05)}
  .ed .hero .shade{display:none}
  .ed .hero .wrap{padding:30px 0 44px}
  .ed .hero h1{font-size:clamp(40px,11vw,54px);text-shadow:none}
  .ed .top.over{background:linear-gradient(rgba(8,16,12,.6),rgba(8,16,12,0))}
}

.hero-pic{position:absolute;inset:0}.hero-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.ed .hero-pic{position:relative;display:block;height:58svh;min-height:300px}.ed .hero-pic img{position:absolute;height:100%}}
/* hero v3: the photo is the hero, the words caption it (smaller headline in the corner, pool kept clear) */
@media (min-width:761px){
  .ed .hero h1{font-size:clamp(34px,3.3vw,54px);line-height:1.05;max-width:13em;margin-bottom:16px}
  .ed .hero .eyebrow{font-size:12px;margin-bottom:12px}
  .ed .hero .wrap{padding-bottom:7vh}
  .ed .hero .ctas{margin-top:18px}.ed .hero .btn{min-height:46px;padding:0 20px;font-size:13px}
  .ed .hero .cta-note{font-size:13px;margin-top:12px}
  .ed .hero .shade{background:linear-gradient(0deg,rgba(8,16,12,.78) 0%,rgba(8,16,12,.3) 26%,rgba(8,16,12,0) 44%),linear-gradient(90deg,rgba(8,16,12,.42) 0%,rgba(8,16,12,0) 40%)}
  .ed .hero-pic img{object-position:center 78%}
}
/* ---- pass 2 (UX + design reviews) ---- */
/* form: titles, per-field messages, invalid state */
.lead-form .form-title{font:600 28px/1.15 var(--serif);margin:0 0 18px}.lead-form .big-title{font-size:34px}
.lead-form .fmsg{display:block;color:#B42318;font-weight:500;font-size:15px}
.lead-form [aria-invalid=true]{border-color:#B42318!important;box-shadow:0 0 0 2px rgba(180,35,24,.18)}
.lead-form .done:focus{outline:none}
/* closing band: deep green with faint plan linework instead of the night photo */
.cta-green{background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='360' viewBox='0 0 520 360'%3E%3Cg fill='none' stroke='%23A9D9B4' stroke-opacity='.10' stroke-width='1.4'%3E%3Cpath d='M70 170c0-60 50-88 110-76 44 9 62 40 104 38 52-2 84-31 124-5 36 24 26 86-18 112-44 26-74 9-118 26-50 18-66 50-126 48-60-2-76-63-76-143z'/%3E%3Ccircle cx='400' cy='78' r='40'/%3E%3Cpath d='M30 30h460v300H30z' stroke-dasharray='6 6'/%3E%3C/g%3E%3C/svg%3E") right -40px center/620px no-repeat}
.cta-green .eyebrow{color:var(--mint)}
/* sticky bar on the estimate page: Call only */
.pg-estimate .sticky a.s{display:none}
/* phone menu: proper buttons, scrolls at large text */
.drawer .panel{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.drawer .panel .btn{width:100%;margin-top:12px;color:var(--ink)}.drawer .panel .btn.solid{color:#fff}
/* gallery: case-study rhythm, captions never hidden */
.gal{grid-template-columns:repeat(3,1fr);gap:18px}.gal .wide{grid-column:1/-1;grid-row:auto}.gal .wide img{aspect-ratio:16/9;height:auto}
.gal figure{display:flex;flex-direction:column}.gal img{cursor:zoom-in}
@media (max-width:760px){.gal{grid-template-columns:1fr 1fr}.gal .wide img{aspect-ratio:4/3}}
.heritage-grid img{cursor:zoom-in}
/* lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:min(1200px,96vw);max-height:94vh;overflow:visible}.lightbox::backdrop{background:rgba(5,10,8,.88)}
.lightbox figure{margin:0}.lightbox img{max-width:min(1200px,96vw);max-height:84vh;width:auto;margin:0 auto;object-fit:contain;border-radius:2px}.lightbox figcaption{color:#fff;text-align:center;padding:12px;font-size:16px}
.lightbox button{position:fixed;width:52px;height:52px;border-radius:50%;border:1.5px solid #fff;background:rgba(0,0,0,.4);color:#fff;font-size:24px;cursor:pointer}.lb-close{top:16px;right:16px}.lb-prev{left:16px;top:50%}.lb-next{right:16px;top:50%}
/* inner page heroes: the photo leads, smaller title in the corner */
.ed .page-hero{min-height:62vh;display:flex;align-items:flex-end}.ed .page-hero>img{opacity:1}
.ed .page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,16,12,.82) 0%,rgba(8,16,12,.35) 40%,rgba(8,16,12,.15) 100%)}
.ed .page-hero .wrap{z-index:1;padding:140px 0 56px}.ed .page-hero h1{font-size:clamp(38px,4.4vw,64px);text-shadow:0 2px 20px rgba(0,0,0,.4)}
.ed .page-hero .eyebrow{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* large text / zoom safety */
.topin{flex-wrap:wrap}.brand span{min-width:0}.brand b{white-space:nowrap}
h1,h2,h3,p,li,a{overflow-wrap:anywhere}
@media (max-width:420px){.ed .page-hero{min-height:52vh}.brand b{font-size:17px}}
/* ---- curtain reveal: the section you're on rises away; the next one waits underneath ---- */
.stack{position:relative}
.stack>.slot{position:relative;z-index:var(--z,1)}
.stack>.slot>section{position:sticky;top:0;min-height:100svh;transform-origin:50% 50%}
.stack>.slot>.sec,.stack>.slot>.statement{display:flex;flex-direction:column;justify-content:center}
.stack>.slot>.statement{display:grid}
.stack>.slot>section::after{content:'';position:absolute;left:0;right:0;bottom:-40px;height:40px;background:linear-gradient(rgba(0,0,0,.22),transparent);pointer-events:none}
.stack>.slot:last-child>section::after{display:none}
.stack>.slot>.statement,.stack>.slot>.sec{background:#fff}.stack>.slot>.sec.paper{background:var(--paper)}
@media (prefers-reduced-motion:no-preference){.stack>.slot>section{transform:scale(calc(.975 + var(--reveal,1)*.025))}}
.no-curtain .stack>.slot{margin-top:0!important;padding-bottom:0!important}.no-curtain .stack>.slot>section{position:relative}
.stack{background:#0F1E16}
.stack>.slot{pointer-events:none}.stack>.slot>section{pointer-events:auto}
/* hero text size (Von, 2026-11-07): medium — bigger than the caption, pool still clear */
@media (min-width:761px){.ed .hero h1{font-size:clamp(44px,4.45vw,64px);line-height:1.02;max-width:12em}.ed .hero .eyebrow{font-size:13px}.ed .hero .btn{min-height:50px;font-size:14px;padding:0 24px}}
@media (max-width:760px){.ed .hero h1{font-size:clamp(38px,11.7vw,46px);line-height:1.02}}
/* hero text size v2 (Von: "too big" over the video) */
@media (min-width:761px){.ed .hero h1{font-size:clamp(38px,3.6vw,52px);line-height:1.04;max-width:13em}.ed .hero .btn{min-height:46px;font-size:13px;padding:0 20px}}
@media (max-width:760px){.ed .hero h1{font-size:clamp(34px,10.2vw,40px)}}

/* Phone hero: less crowded (2026-11-07). Same words on desktop; on phones the location drops (headline says Georgia) and the note splits cleanly. */
@media (max-width:760px){
.ed .hero .wrap{padding:30px 0 40px}
.ed .hero .eyebrow{margin-bottom:14px}
.ed .hero .eb-loc,.ed .hero .cn-sep{display:none}
.ed .hero .cn-2{display:block;margin-top:2px}
.ed .hero h1{font-size:clamp(30px,8.6vw,36px);line-height:1.08;margin-bottom:0}
.ed .hero .ctas{margin-top:26px;gap:12px}
.ed .hero .cta-note{margin-top:16px;line-height:1.5;opacity:.85}
}
.ed .hero .eb-loc{margin-left:-12px;white-space:pre}

/* Video hero (2026-11-07): still image underneath, intro video, then the held shot with moving water. Never shows controls. */
.ed .hero-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;transition:opacity .6s;pointer-events:none}
.ed .hero-pic video.hv2{transition:opacity .4s}
.ed .hero-pic video.on{opacity:1}
.ed .hero-pic .hero-still{object-position:center center}
/* Show the whole frame on desktop (no side crop); hero height follows the video's 16:9 shape */
@media (min-width:761px){.stack>.slot>section.hero,.ed .hero{min-height:min(100svh,56.25vw)}}
/* Phones: normal scrolling (no curtain), wider view of the scene, no empty space under the hero */
@media (max-width:760px){
.stack.flat>.slot{z-index:auto}
.stack.flat>.slot>section{position:relative;min-height:0;transform:none}
.ed .hero-pic{height:78vw;min-height:0}
.ed .hero-pic .hero-still,.ed .hero-pic video{object-position:center 60%}
.sticky a{font-size:15px;padding:0 6px;text-align:center}
}
/* Phones: readable photo captions and quote (2026-11-07) */
@media (max-width:760px){
.slide::after{background:linear-gradient(180deg,rgba(8,16,12,0) 28%,rgba(8,16,12,.55) 55%,rgba(8,16,12,.9))}
.slide .cap p{color:#fff;opacity:.9;font-size:13px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.slide h3{text-shadow:0 2px 16px rgba(0,0,0,.5)}
.stack.flat>.slot>section.breather{min-height:72svh}
.breather::after{background:linear-gradient(rgba(5,10,14,.74),rgba(5,10,14,.66))}
.breather blockquote{font-size:clamp(28px,8vw,34px);line-height:1.18}
.breather cite{font-size:13px;margin-top:18px}
}
@media (max-width:760px){.breather{align-items:flex-start}.breather blockquote{padding-top:56px}.breather>img{object-position:center 75%}}
@media (max-width:760px){.ed .page-hero::after{background:linear-gradient(0deg,rgba(8,16,12,.9) 0%,rgba(8,16,12,.72) 55%,rgba(8,16,12,.35) 100%)}.ed .page-hero em{color:#BFEBD2}.ed .page-hero h1{text-shadow:0 2px 14px rgba(0,0,0,.6)}}
@media (min-width:761px){.stack>.slot>section.feature .slide{min-height:min(100svh,900px)}.stack>.slot>section.feature{min-height:0}.slide::after{background:linear-gradient(180deg,rgba(8,16,12,0) 35%,rgba(8,16,12,.5) 62%,rgba(8,16,12,.86))}.slide .cap p{color:#fff;opacity:.9;text-shadow:0 1px 10px rgba(0,0,0,.6)}}
/* Honest label on the AI-generated hero video (playbook: AI visuals are never presented as the client's work) */
.ed .hero-tag{position:absolute;z-index:2;right:24px;top:96px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.72;background:rgba(8,16,12,.35);padding:6px 9px;border-radius:2px;pointer-events:none}
@media (max-width:760px){.ed .hero-tag{top:auto;bottom:10px;right:10px;font-size:10px;padding:5px 7px}}
/* Phones: curtain reveal back on (2026-11-07). Sections keep their natural height (no empty space under the hero); the quote keeps its photo height. */
@media (max-width:760px){.stack>.slot>section{min-height:0}.stack>.slot>section.breather{min-height:72svh}}
@media (max-width:760px){.slide{min-height:78svh}}
/* Phones: every curtain section fills the screen so the next one stays hidden until the curtain lifts (2026-11-07).
   The hero gives the extra height to the video, not empty space. Reduced motion (.flat) keeps natural heights. */
@media (max-width:760px){
.stack>.slot>section{min-height:100svh}
.stack>.slot>section.hero{display:flex;flex-direction:column}
.ed .hero-pic{flex:1 1 auto;height:auto;min-height:78vw}
.slide{min-height:100svh}
}
@media (max-width:760px){.stack>.slot>section.breather{min-height:100svh}}
@media (max-width:760px){.stack>.slot>section.hero{align-items:stretch}.ed .hero-pic{width:100%}.slide .cap{padding-bottom:164px}.slider-ui{bottom:96px}}
