/* ============================================================
   AnchorBuild — larger page components (Concrete & Ember)
   Loaded after anchor.css
   ============================================================ */

/* ============ HOMEPAGE SCRUB HERO ============ */
.hero{position:relative;height:233vh;background:var(--ink)}
.hero__stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:grid;place-items:center}
.hero__media{position:absolute;inset:0;z-index:1;will-change:transform}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(1.03) contrast(1.02);
  background:radial-gradient(120% 90% at 50% 0%,#2a231c 0%,#14110e 60%,#0d0b09 100%)}
/* video is the message — only a whisper of edge vignette so the fixed nav/phone stay legible */
.hero--reel .hero__stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,14,.42) 0%,rgba(20,17,14,0) 16%,rgba(20,17,14,0) 88%,rgba(20,17,14,.5) 100%)}
.hero__scrim{display:none}
.hero__content{position:relative;z-index:3;text-align:center;max-width:min(1100px,92vw);padding:0 1rem}
.hero__eyebrow{margin-bottom:1.6rem;opacity:0}
.hero__title{font-family:var(--font-display);font-weight:700;font-size:clamp(2.5rem,8vw,6.6rem);line-height:.96;letter-spacing:-.03em;color:#fff}
.hero__title .line{display:block}
.hero__title-accent{color:var(--flame)}
.hero__sub{max-width:640px;margin:1.8rem auto 0;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--bone-dim);font-weight:300;opacity:0}
.hero__actions{margin-top:2.4rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;opacity:0}
.hero__scrollcue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(231,226,217,.5)}
.hero__scrollcue i{width:1px;height:44px;background:linear-gradient(var(--flame),transparent);position:relative;overflow:hidden}
.hero__scrollcue i::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--flame);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{top:-50%}60%,100%{top:100%}}

/* ============ DIVE ============ */
.dive{position:relative;height:220vh;background:var(--ink)}
.dive__scene{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;perspective:900px;
  background:radial-gradient(120% 100% at 50% 120%,#2a231c 0%,#14110e 45%,#0d0b09 100%)}
/* full-width photo with 3D depth reveal */
.dive__photo{position:absolute;inset:0;z-index:1;overflow:hidden;will-change:transform;transform-style:preserve-3d}
.dive__photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.dive__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(20,17,14,.7) 0%,rgba(20,17,14,.25) 40%,transparent 70%),linear-gradient(0deg,rgba(20,17,14,.75) 0%,transparent 45%)}
.dive__label{position:absolute;left:clamp(1.25rem,5vw,4.5rem);bottom:clamp(1.6rem,7vh,3.5rem);z-index:3;max-width:min(520px,80vw)}
.dive__label .k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--flame);display:block;margin-bottom:.8rem}
.dive__label .t{font-family:var(--font-mono);font-size:clamp(.95rem,1.5vw,1.15rem);letter-spacing:.02em;color:var(--flame);font-weight:500}
.dive__label .s{display:block;margin-top:.6rem;font-family:var(--font-sans);font-size:.86rem;font-weight:300;color:var(--bone-dim);max-width:44ch}

/* ============ SECTION HEADS (shared) ============ */
.shead{max-width:var(--maxw);margin:0 auto 3rem}
.shead .eyebrow{margin-bottom:1.1rem}
.shead__row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.shead__note{margin-top:1rem;color:var(--bone-dim);font-weight:300;max-width:48ch}

/* ============ RECENT WORK ============ */
.work{background:linear-gradient(180deg,var(--ink-2),var(--ink));padding:clamp(5rem,12vh,9rem) var(--pad)}
.workgrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;perspective:1500px}
@media(max-width:760px){.workgrid{grid-template-columns:1fr}}
.wcard{position:relative;border-radius:20px;overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(232,135,63,.14);transform-style:preserve-3d;will-change:transform}
.wcard__img{position:absolute;inset:0;z-index:0}
.wcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);filter:saturate(.92) brightness(.8)}
.wcard:hover .wcard__img img{transform:scale(1.06)}
.wcard__grad{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,17,14,.1) 0%,rgba(20,17,14,.55) 50%,rgba(20,17,14,.95) 100%)}
.wcard__body{position:relative;z-index:2;padding:2rem;transform:translateZ(30px)}
.wcard__meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--flame)}
.wcard__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.02;margin-top:.6rem;color:#fff;letter-spacing:-.01em}
.work__cta{max-width:var(--maxw);margin:2.6rem auto 0;text-align:center}

/* ============ WHY PILLARS ============ */
.why{background:var(--ink);padding:clamp(5rem,12vh,9rem) var(--pad)}
.why__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;perspective:1400px}
@media(max-width:820px){.why__grid{grid-template-columns:1fr}}
.pillar{position:relative;border-radius:20px;padding:2.4rem 2rem;background:linear-gradient(160deg,var(--surface),var(--ink-2));border:1px solid rgba(232,135,63,.16);overflow:hidden;transform-style:preserve-3d;will-change:transform}
.pillar__num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;color:var(--flame);transform:translateZ(30px);display:inline-block}
.pillar__icon{width:46px;height:46px;color:var(--flame);margin:1rem 0 1.2rem;transform:translateZ(40px)}
.pillar h3{font-family:var(--font-display);font-weight:600;font-size:1.45rem;line-height:1.05;margin-bottom:.7rem;color:#fff;transform:translateZ(30px)}
.pillar p{color:var(--bone-dim);font-weight:300;font-size:.96rem;transform:translateZ(20px)}

/* ============ ESTIMATE FORM ============ */
.estimate{position:relative;background:linear-gradient(180deg,var(--ink),var(--ink-2));padding:clamp(5rem,12vh,9rem) var(--pad);overflow:hidden}
.estimate__wrap{max-width:1080px;margin:0 auto;position:relative;z-index:2}
.estimate__panel{margin-top:2.6rem;background:linear-gradient(160deg,rgba(42,35,28,.7),rgba(20,17,14,.9));border:1px solid rgba(232,135,63,.2);border-radius:24px;padding:clamp(1.6rem,4vw,3rem);box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.estimate__tabs{display:inline-flex;padding:.35rem;background:var(--ink);border:1px solid var(--line);border-radius:100px;margin-bottom:2rem}
.estimate__tabs button{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete);padding:.7rem 1.5rem;border-radius:100px;background:transparent;border:0;cursor:pointer;transition:all .4s var(--ease)}
.estimate__tabs button.is-on{background:linear-gradient(180deg,var(--flame),var(--ember));color:#fff}
.estimate__fields{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:640px){.estimate__fields{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field.full{grid-column:1/-1}
.field label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete)}
.field input,.field select,.field textarea{background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;color:var(--bone);font-family:var(--font-sans);font-size:.95rem;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--flame)}
.field textarea{resize:vertical;min-height:110px}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23e8873f' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.upload{position:relative;border:1px dashed rgba(232,135,63,.4);border-radius:12px;padding:1rem;display:flex;align-items:center;gap:.7rem;color:var(--bone-dim);font-size:.9rem;cursor:pointer;transition:border-color .3s,background .3s}
.upload:hover{border-color:var(--flame);background:rgba(232,135,63,.05)}
.upload svg{width:20px;height:20px;color:var(--flame);flex:none}
.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.estimate__submit{margin-top:1.6rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.estimate__status{font-size:.9rem;font-weight:300}
.estimate__status.is-ok{color:var(--flame)}
.estimate__status.is-err{color:#e5735a}
.estimate__status.is-sending{color:var(--concrete)}

/* ============ PORTFOLIO CATEGORY CARDS ============ */
.catgrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;perspective:1500px}
@media(max-width:900px){.catgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.catgrid{grid-template-columns:1fr}}
.catcard{position:relative;border-radius:20px;overflow:hidden;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(232,135,63,.14);transform-style:preserve-3d;will-change:transform}
.catcard__img{position:absolute;inset:0;z-index:0}
.catcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);filter:saturate(.9) brightness(.72)}
.catcard:hover .catcard__img img{transform:scale(1.07)}
.catcard__grad{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,17,14,.15),rgba(20,17,14,.6) 55%,rgba(20,17,14,.96))}
.catcard__body{position:relative;z-index:2;padding:1.9rem;transform:translateZ(30px)}
.catcard__count{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--flame)}
.catcard__title{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.02;margin-top:.5rem;color:#fff;letter-spacing:-.01em}

/* ============ PROJECT (portfolio detail) ============ */
.project{max-width:var(--maxw);margin:0 auto;padding-bottom:clamp(3rem,7vh,5rem)}
.project__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.4rem}
.project__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;color:#fff;letter-spacing:-.01em}
.project__meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--flame)}
.project__desc{max-width:60ch;color:var(--bone-dim);font-weight:300;margin-bottom:1.4rem}
.pgrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:760px){.pgrid{grid-template-columns:1fr 1fr}}
.pgrid figure{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--surface)}
.pgrid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pgrid figure:hover img{transform:scale(1.06)}

/* ============ SERVICE DETAIL ============ */
.svcdetail{background:var(--ink);padding:clamp(4rem,9vh,7rem) var(--pad)}
.svcdetail__wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 320px;gap:3rem;align-items:start}
@media(max-width:900px){.svcdetail__wrap{grid-template-columns:1fr}}
.svcdetail__body h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.02;letter-spacing:-.01em;color:#fff;margin:0 0 1.2rem}
.svcdetail__body h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:var(--flame);margin:2rem 0 1rem}
.svcdetail__body p{color:var(--bone-dim);font-weight:300;margin-bottom:1.1rem;max-width:62ch}
.svclist{list-style:none;display:grid;gap:.9rem;margin:1.4rem 0}
.svclist li{position:relative;padding-left:1.8rem;color:var(--bone-dim);font-size:.98rem}
.svclist li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border:1.5px solid var(--ember);transform:rotate(45deg)}
.sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:1.4rem}
.sidebar__nav{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.4rem}
.sidebar__nav h4{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--concrete);margin-bottom:1rem}
.sidebar__nav a{display:flex;align-items:center;gap:.6rem;padding:.7rem .4rem;color:var(--bone-dim);font-size:.9rem;border-radius:8px;transition:color .3s,background .3s}
.sidebar__nav a:hover{color:var(--flame)}
.sidebar__nav a[aria-current]{color:var(--flame);background:rgba(232,135,63,.08)}
.sidebar__nav a span{font-family:var(--font-mono);font-size:.7rem;color:var(--concrete-dim)}
.sidebar__cta{background:linear-gradient(160deg,var(--ember),var(--ember-deep));border-radius:18px;padding:1.8rem;color:#fff}
.sidebar__cta h4{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin-bottom:.5rem}
.sidebar__cta p{font-size:.88rem;opacity:.9;margin-bottom:1.2rem}

/* ============ ABOUT ============ */
.about-meet{background:var(--ink);padding:clamp(5rem,12vh,9rem) var(--pad)}
.about-meet__wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:860px){.about-meet__wrap{grid-template-columns:1fr}}
.about-meet__media{border-radius:22px;overflow:hidden;aspect-ratio:4/5;min-height:520px;background:var(--surface);border:1px solid rgba(232,135,63,.18);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.about-meet__media img{object-position:center}
.about-meet__media img{width:100%;height:100%;object-fit:cover}
.about-meet h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:-.02em;color:#fff;margin-bottom:1.4rem}
.about-meet p{color:var(--bone-dim);font-weight:300;font-size:1.05rem;margin-bottom:1.1rem;max-width:52ch}
.about-build{background:linear-gradient(180deg,var(--ink),var(--ink-2));padding:clamp(4rem,10vh,7rem) var(--pad)}
.about-build__grid{max-width:var(--maxw);margin:2.4rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem 2.5rem}
@media(max-width:700px){.about-build__grid{grid-template-columns:1fr}}
.about-build__grid li{list-style:none;display:flex;align-items:center;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--line);color:var(--bone);font-size:1.02rem}
.about-build__grid li::before{content:"";width:8px;height:8px;background:var(--ember);transform:rotate(45deg);flex:none}
.trustbar{background:var(--ember);color:#fff;padding:clamp(2.5rem,6vh,4rem) var(--pad);text-align:center}
.trustbar__row{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:2.5rem;flex-wrap:wrap;font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,2.4vw,1.8rem)}
.trustbar__row span{display:inline-flex;align-items:center;gap:.7rem}
.trustbar__row i{width:8px;height:8px;background:#fff;border-radius:50%;opacity:.6}

/* ============ CONTACT PAGE CARDS ============ */
.infocards{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:900px){.infocards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.infocards{grid-template-columns:1fr}}
.infocard{background:var(--surface);border:1px solid rgba(232,135,63,.16);border-radius:18px;padding:1.8rem}
.infocard__icon{width:42px;height:42px;color:var(--flame);margin-bottom:1.1rem}
.infocard h3{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--concrete);margin-bottom:.6rem}
.infocard p{color:var(--bone);font-size:1rem;font-weight:300}
.infocard a{color:var(--bone)}
.infocard a:hover{color:var(--flame)}

/* ============ SCREENSHOT MODE (?shot) ============ */
html.shot .scroll-progress,html.shot .callbar,html.shot .hero__scrollcue{display:none!important}
html.shot .hero{height:auto!important}
html.shot .hero__stage{position:relative!important;top:auto!important;height:820px!important}
html.shot .dive{height:auto!important}
html.shot .dive__scene{position:relative!important;top:auto!important;height:680px!important}
html.shot .pagehero{min-height:600px}
html.shot [data-reveal]{opacity:1!important;transform:none!important}
html.shot [data-fade]{opacity:1!important;transform:none!important}
html.shot .reveal-word>span{transform:none!important}
html.shot .hero__eyebrow,html.shot .hero__sub,html.shot .hero__actions{opacity:1!important}

/* ============ "WE TAKE IT FROM HERE" — blueprint hero ============ */
.pmhero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(120% 100% at 70% 10%,#221b14,#14110e 55%,#0c0a08)}
.pmhero__grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(232,135,63,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(232,135,63,.09) 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(circle at 62% 45%,#000,transparent 78%);-webkit-mask-image:radial-gradient(circle at 62% 45%,#000,transparent 78%);animation:gridDrift 22s linear infinite}
@keyframes gridDrift{to{background-position:50px 50px}}
.pmhero__bp{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:min(48%,640px);z-index:1;opacity:.7;pointer-events:none}
@media(max-width:900px){.pmhero__bp{opacity:.22;right:-6%}}
.pmhero__bp [data-draw]{fill:none;stroke:var(--flame);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:2000;stroke-dashoffset:2000;animation:bpDraw 3.4s cubic-bezier(.6,0,.2,1) forwards}
.pmhero__bp .d2{animation-delay:.5s;stroke:var(--blueprint,#5d96be)}
.pmhero__bp .d3{animation-delay:1s}
.pmhero__bp .d4{animation-delay:1.5s;stroke:var(--blueprint,#5d96be)}
.pmhero__bp .dim{stroke:rgba(232,135,63,.5);stroke-width:.8;animation-delay:2s}
@keyframes bpDraw{to{stroke-dashoffset:0}}
.pmhero__bp .node{fill:var(--flame);stroke:none;opacity:0;animation:nodeIn .5s ease forwards;animation-delay:2.6s}
@keyframes nodeIn{to{opacity:1}}
.pmhero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
.pmhero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,7.5vw,6rem);line-height:.98;letter-spacing:-.03em;color:#fff;max-width:14ch}
.pmhero h1 em{font-style:normal;color:var(--flame)}
.pmhero__sub{margin-top:1.6rem;max-width:48ch;color:var(--bone-dim);font-weight:300;font-size:clamp(1rem,1.6vw,1.2rem)}
@media(prefers-reduced-motion:reduce){.pmhero__grid,.pmhero__bp [data-draw],.pmhero__bp .node{animation:none}.pmhero__bp [data-draw]{stroke-dashoffset:0}.pmhero__bp .node{opacity:1}}

/* scenario cards */
.scenario{position:relative;border-radius:20px;padding:2.4rem 2rem;background:linear-gradient(160deg,var(--surface),var(--ink-2));border:1px solid rgba(232,135,63,.16);overflow:hidden;transform-style:preserve-3d;will-change:transform;height:100%}
.scenario__q{font-family:var(--font-display);font-weight:600;font-size:1.35rem;line-height:1.1;color:var(--flame);margin-bottom:1rem;transform:translateZ(30px)}
.scenario p{color:var(--bone-dim);font-weight:300;font-size:.98rem;transform:translateZ(20px)}
/* Chris feature */
.chris{background:linear-gradient(180deg,var(--ink),var(--ink-2));padding:clamp(5rem,13vh,10rem) var(--pad)}
.chris__wrap{max-width:920px;margin:0 auto}
.chris h2{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,9vw,6rem);line-height:1;letter-spacing:-.03em;color:#fff;margin:1rem 0 1.6rem}
.chris h2 em{font-style:normal;color:var(--flame)}
.chris p{color:var(--bone-dim);font-weight:300;font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.5;margin-bottom:1.3rem;max-width:60ch}
.chris p strong{color:var(--bone);font-weight:500}

/* ===== Side-by-side before/after pair (custom-additions portfolio) ===== */
.bapair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0 0 1.4rem}
.bapair figure{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--surface)}
.bapair img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bapair figure:hover img{transform:scale(1.04)}
.bapair figcaption{position:absolute;bottom:1rem;left:1rem;z-index:3;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);padding:.38rem .76rem;border-radius:100px;background:rgba(20,17,14,.6);backdrop-filter:blur(6px);border:1px solid rgba(231,226,217,.16)}
@media(max-width:640px){.bapair{grid-template-columns:1fr}}

/* ===== Taller before/after frame (load-bearing portrait shots) ===== */
.ba--tall{max-width:960px}
.ba--tall .ba__frame{aspect-ratio:4/5}
.bapair--wide figure{aspect-ratio:16/9}

/* ===== Hero — captioned build-reel (film): desktop full-bleed, mobile whole 16:9 frame ===== */
.hero--film{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--ink)}
.hero--film .hero__media{position:absolute;inset:0;z-index:0}
.hero--film .hero__poster,.hero--film .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero--film .hero__poster{z-index:0}
.hero--film .hero__video{z-index:1;opacity:0;transition:opacity .7s ease}
.hero--film .hero__video.is-playing{opacity:1}
.hero--film .hero__overlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(20,17,14,.20) 0%,rgba(20,17,14,0) 20%,rgba(20,17,14,0) 58%,rgba(20,17,14,.92) 100%)}
.hero--film .hero__scrollcue{z-index:3}
@media (prefers-reduced-motion:reduce){.hero--film .hero__video{display:none}}
@media (max-width:820px){
  .hero--film{height:auto;min-height:0}
  .hero--film .hero__media{position:relative;inset:auto;aspect-ratio:2/1;width:100%}
  .hero--film .hero__scrollcue{display:none}
  .hero--film .hero__overlay{background:linear-gradient(180deg,rgba(20,17,14,.12) 0%,rgba(20,17,14,0) 26%,rgba(20,17,14,0) 76%,var(--ink) 100%)}
}
@media (max-width:820px){.hero--film + .statement{padding-top:clamp(2.2rem,6vh,3.4rem)}}

/* ===== Hero — desktop scroll-scrub / mobile autoplay-loop (v8 clip) ===== */
.hero--scrub{position:relative;height:240vh;background:var(--ink)}
.hero--scrub .hero__stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden}
.hero--scrub .hero__media{position:absolute;inset:0;z-index:0}
.hero--scrub .hero__poster,.hero--scrub .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero--scrub .hero__poster{z-index:0}
.hero--scrub .hero__video{z-index:1;opacity:0;filter:none;background:none;transition:opacity .7s ease}
.hero--scrub .hero__video.is-playing{opacity:1}
.hero--scrub .hero__poster{filter:none}
.hero--scrub .hero__overlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(20,17,14,.20) 0%,rgba(20,17,14,0) 20%,rgba(20,17,14,0) 58%,rgba(20,17,14,.92) 100%)}
.hero--scrub .hero__scrollcue{z-index:3}
/* reduced-motion: collapse tall section, show poster only (no scrub) */
@media (prefers-reduced-motion:reduce){
  .hero--scrub{height:100vh}
  .hero--scrub .hero__stage{position:relative;height:100vh}
  .hero--scrub .hero__video{display:none}
}
/* mobile: NO scrub — whole 2:1 frame, autoplay loop; welcome copy sits right below */
@media (max-width:820px){
  .hero--scrub{height:auto}
  .hero--scrub .hero__stage{position:relative;top:auto;height:auto}
  .hero--scrub .hero__media{position:relative;inset:auto;aspect-ratio:2/1;width:100%}
  .hero--scrub .hero__scrollcue{display:none}
  .hero--scrub .hero__overlay{background:linear-gradient(180deg,rgba(20,17,14,.12) 0%,rgba(20,17,14,0) 26%,rgba(20,17,14,0) 76%,var(--ink) 100%)}
  .hero--scrub + .statement{padding-top:clamp(2.2rem,6vh,3.4rem)}
}