/* ═══════════════════════════════════════
   HERO — intentionally separate.
   Hard cut at bottom. No gradients.
   Moderate heading. Left-aligned.
═══════════════════════════════════════ */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--char)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;animation:kbz 20s ease-out both}
@keyframes kbz{from{transform:scale(1.05)}to{transform:scale(1)}}
.hero-ov{position:absolute;inset:0;background:rgba(20,22,24,.52)}
.hero-c{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:64px var(--pad) clamp(44px,7vh,80px)}
.hero-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--fh);font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(201,164,108,.8);margin-bottom:18px}
.hero-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);animation:pd 2.5s ease-in-out infinite}
@keyframes pd{0%,100%{opacity:1}50%{opacity:.22}}
/* Moderate heading — not giant. Feels editorial. */
.hero-h1{font-family:var(--fh);font-weight:900;font-size:clamp(2.4rem,4.5vw,5.5rem);letter-spacing:-.02em;line-height:1.0;color:var(--white);margin-bottom:18px}
.hero-hl{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.hero-hw{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ex)}
.hero-hw.up{transform:translateY(0)}

.hero-hw-1{transition-delay:.04s}
.hero-hw-2{transition-delay:.16s}
.hero-hw-3{transition-delay:.28s}

.lbl-center{justify-content:center;margin-bottom:14px}
.lbl-rust{color:var(--rust)}
.lbl-gold{color:var(--gold)}

.lsc-ly-back{z-index:1}
.lsc-ly-mid{z-index:2;top:-100px}
.lsc-ly-front-right{z-index:3;left:50px;right:-50px;top:325px}
.lsc-ly-front-left{z-index:4;left:0;right:0;top:275px}

.btn-home-mt{margin-top:18px}
.proof-logo-img-tall{height:48px}
.btn-modal{font-size:.58rem;padding:9px 18px}

.hero-h1 em{font-style:italic;color:var(--gold)}
.hero-sub{font-family:var(--fb);font-size:clamp(.88rem,1.2vw,1.05rem);line-height:1.75;color:rgba(255,255,255,.88);max-width:52ch;margin-bottom:26px}
.hero-acts{display:flex;gap:10px;flex-wrap:wrap}
.hero-scroll{position:absolute;right:var(--pad);bottom:clamp(24px,4vh,40px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px}
.hero-scroll-bar{width:1px;height:36px;background:linear-gradient(180deg,transparent,var(--rust) 50%,transparent);animation:sb 2s ease-in-out infinite}
@keyframes sb{0%,100%{opacity:0;transform:translateY(-4px)}50%{opacity:1;transform:translateY(2px)}}
.hero-scroll-lbl{font-family:var(--fh);font-size:6.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.2);writing-mode:vertical-lr}
/* hero video background */
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* portfolio featured iframe */
.port-feat-ifr{position:absolute;top:50%;left:50%;border:0;pointer-events:none;transform:translate(-50%,-50%);transition:transform .6s var(--ex)}
.port-feat.card-mode:hover .port-feat-ifr{transform:translate(-50%,-50%) scale(1.04)}

/* ═══════════════════════════════════════
   STATS BAR — white background, clean
═══════════════════════════════════════ */
.stats{background:var(--white);padding:clamp(52px,7vw,90px) var(--pad) clamp(32px,4vw,52px)}
.stats-in{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(26,28,30,.08);padding-top:clamp(24px,3vw,38px)}
.s-st{padding:0 clamp(14px,2.5vw,32px);border-right:1px solid rgba(26,28,30,.07)}
.s-st:first-child{padding-left:0}.s-st:last-child{border-right:none}
.s-n{display:block;font-family:var(--fh);font-weight:900;font-size:clamp(2.4rem,5.5vw,7rem);letter-spacing:-.07em;line-height:1;color:var(--char);margin-bottom:5px}
.s-l{font-family:var(--fh);font-size:.58rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--stl)}

/* ═══════════════════════════════════════
   POSITIONING / "WHAT WE DO"
   White background. Editorial. Breathing room.
   This creates the buffer before portfolio.
═══════════════════════════════════════ */
.pos{background:var(--white);padding:clamp(48px,7vw,100px) var(--pad) clamp(64px,9vw,130px)}
.pos-in{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.pos-hed{font-family:var(--fb);font-style:italic;font-size:clamp(1.7rem,3.5vw,4.5rem);line-height:1.14;letter-spacing:-.01em;color:var(--char)}
.pos-hed em{font-style:normal;color:var(--rust)}
.pos-rhs{padding-top:clamp(8px,1.5vw,20px)}
.pos-body{font-family:var(--fb);font-size:clamp(.88rem,1.15vw,1rem);line-height:1.9;color:var(--stone)}
.pos-body+.pos-body{margin-top:14px}
.pos-loc{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(18px,2.5vw,28px);font-family:var(--fh);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--stl)}
.pos-loc::before{content:'';display:block;width:18px;height:1px;background:var(--rust);flex-shrink:0}

/* ═══════════════════════════════════════
   PORTFOLIO — grow to fullscreen, then grid
   White background. Clean.
   Phase 1: video/photo starts at ~65% and grows to 100%
   Phase 2: holds fullscreen briefly
   Phase 3: fades out, reveals 4 equal thumbnails
═══════════════════════════════════════ */
.port{background:var(--white)}
.port-track{height:300vh;position:relative}
.port-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--white)}

/* Feature video/photo wrapper — grows from center */
.port-feat{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:65%;height:65%;overflow:hidden;border-radius:10px;will-change:width,height,left,top;transition:none;z-index:5;cursor:none}
.port-feat img{width:100%;height:100%;object-fit:cover;display:block}
.port-feat-ifr{position:absolute;top:50%;left:50%;border:0;pointer-events:none;transform:translate(-50%,-50%);transition:transform .6s var(--ex)}
.port-feat.card-mode:hover .port-feat-ifr{transform:translate(-50%,-50%) scale(1.04)}
.port-feat-ov{position:absolute;inset:0;background:linear-gradient(168deg,rgba(26,28,30,.04) 30%,rgba(26,28,30,.55) 100%);pointer-events:none}
/* Invisible click overlay — mute toggle, keeps custom cursor working */
.port-click-ov{position:absolute;inset:0;z-index:8;cursor:none}
/* Mute indicator pill */
.port-mute-ind{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:7px;font-family:var(--fh);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white);background:rgba(26,28,30,.6);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);padding:8px 16px;border-radius:100px;pointer-events:none;opacity:0;transition:opacity .4s}
.port-mute-ind.show{opacity:1}
/* Hover play ring — only in card-mode */
.port-feat-hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;pointer-events:none;z-index:6}
.port-feat.card-mode:hover .port-feat-hover{opacity:1}
.port-feat-play-ring{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold);background:rgba(201,164,108,.1);display:flex;align-items:center;justify-content:center;color:var(--white);transition:transform .3s var(--ex)}
.port-feat.card-mode:hover .port-feat-play-ring{transform:scale(1.12)}
.port-feat-txt{position:absolute;bottom:clamp(24px,4vh,44px);left:clamp(18px,3vw,40px);z-index:2;opacity:0;transition:opacity .4s}
.port-feat-txt.vis{opacity:1}
.port-feat-card-lbl{position:absolute;bottom:0;left:0;right:0;padding:clamp(12px,2vw,22px);background:linear-gradient(0deg,rgba(26,28,30,.86) 0%,rgba(26,28,30,.3) 38%,transparent 62%);z-index:2;opacity:0;transition:opacity .3s}
.port-feat-card-lbl.vis{opacity:1}
.port-feat-eye{font-family:var(--fh);font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.port-feat-eye::before{content:'';display:block;width:18px;height:1px;background:var(--gold)}
.port-feat-title{font-family:var(--fh);font-size:clamp(1.6rem,3.5vw,4rem);font-weight:900;letter-spacing:-.04em;color:var(--white);line-height:.95}
.port-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
.port-play.vis{opacity:1}
.port-play-ring{width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:var(--white)}

/* Film strip — 4 taller-than-wide cards in a horizontal row */
.port-strip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,16px);padding:0 clamp(16px,3vw,52px);pointer-events:none}
.port-strip.vis{pointer-events:all}
/* Cards 2-4 slide in from right. Card 1 stays in place (feat video covers it). */
.ps-card{opacity:0;transform:translateX(110%)}
.ps-card:first-child{transform:none}
.ps-card{flex:1;min-width:0;height:68vh;position:relative;overflow:hidden;border-radius:8px;cursor:none;background:var(--char);box-shadow:0 12px 48px rgba(26,28,30,.22);transition:box-shadow .4s,transform .4s var(--ex)}
.ps-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 24px 72px rgba(26,28,30,.35)}
.ps-card img{width:100%;height:100%;object-fit:cover;filter:brightness(.92);transition:filter .4s,transform .6s var(--ex);display:block}
.ps-card:hover img{filter:brightness(.72);transform:scale(1.04)}
.ps-info{position:absolute;bottom:0;left:0;right:0;padding:clamp(12px,2vw,22px);background:linear-gradient(0deg,rgba(26,28,30,.92) 0%,rgba(26,28,30,.5) 45%,transparent 72%);z-index:2}
.ps-cat{font-family:var(--fh);font-size:.52rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:4px}
.ps-name{font-family:var(--fh);font-weight:800;letter-spacing:-.025em;color:var(--white);font-size:clamp(.85rem,1.4vw,1.3rem);line-height:1.1}
.ps-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold);background:rgba(201,164,108,.1);display:flex;align-items:center;justify-content:center;color:var(--white);opacity:0;transition:opacity .3s,transform .3s var(--ex)}
.ps-card:hover .ps-play{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
/* view all link below strip */
.port-strip-foot{position:absolute;bottom:clamp(12px,2vh,20px);left:0;right:0;text-align:center;opacity:0;transition:opacity .3s}
.port-strip-foot.vis{opacity:1}
.port-strip-foot a{font-family:var(--fh);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);display:inline-flex;align-items:center;gap:7px;transition:color .25s,gap .3s var(--ex)}
.port-strip-foot a:hover{color:var(--char);gap:13px}

/* Label under portfolio while in fullscreen */
.port-cue{position:absolute;bottom:clamp(14px,2vh,22px);right:var(--pad);z-index:5;opacity:0;transition:opacity .4s}
.port-cue.vis{opacity:1}
.port-cue a{font-family:var(--fh);font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:7px;transition:color .25s,gap .3s var(--ex)}
.port-cue a:hover{color:var(--white);gap:12px}

/* ═══════════════════════════════════════
   SERVICES — light sky blue background
   Floating white cards. Generous spacing.
   Color bleeds from white toward blue gradually.
   Blue at bottom blends into sunset parallax sky.
═══════════════════════════════════════ */
.svcs{position:relative;padding:clamp(80px,10vw,140px) var(--pad) clamp(180px,22vw,320px)}
/* Background: white→sky blue. Very gradual. The zone is tall. */
.svcs::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--white) 0%,var(--white) 35%,rgba(44,76,99,.06) 50%,rgba(71,104,133,.35) 68%,rgba(71,104,133,.65) 82%,#476885 100%);pointer-events:none}
.svcs-in{position:relative;z-index:1;max-width:1300px;margin:0 auto}
.svcs-top{text-align:center;margin-bottom:clamp(44px,6vw,72px)}
.svcs-hed{font-family:var(--fh);font-weight:900;font-size:clamp(2rem,4vw,5rem);letter-spacing:-.04em;line-height:1;color:var(--char);margin-bottom:14px}
.svcs-hed em{font-style:italic;color:var(--rust)}
.svcs-sub{font-family:var(--fb);font-size:clamp(.88rem,1.15vw,1.05rem);line-height:1.8;color:var(--stone);max-width:52ch;margin:0 auto}
/* 3-column card grid */
.svcs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.svc-card{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);border-radius:10px;padding:clamp(22px,3vw,38px) clamp(20px,2.5vw,32px);box-shadow:0 2px 32px rgba(44,76,99,.07);cursor:none;transition:transform .4s var(--ex),box-shadow .4s,background .3s}
.svc-card:hover{transform:translateY(-7px);box-shadow:0 16px 56px rgba(44,76,99,.13);background:rgba(255,255,255,.98)}
.svc-n{font-family:var(--fh);font-size:.55rem;font-weight:800;letter-spacing:.14em;color:var(--gold);margin-bottom:14px}
.svc-name{font-family:var(--fh);font-weight:800;font-size:clamp(1.05rem,1.8vw,1.5rem);letter-spacing:-.025em;color:var(--char);margin-bottom:10px;line-height:1.15}
.svc-desc{font-family:var(--fb);font-size:clamp(.82rem,.98vw,.94rem);line-height:1.8;color:var(--stone);margin-bottom:18px}
.svc-lnk{display:inline-flex;align-items:center;gap:6px;font-family:var(--fh);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rust);transition:gap .25s var(--ex)}
.svc-lnk:hover{gap:12px}
.svcs-foot{text-align:center;margin-top:clamp(40px,5vw,60px)}
.svcs-foot p{font-family:var(--fb);font-style:italic;font-size:clamp(.88rem,1.1vw,1.02rem);color:var(--stone);margin-bottom:20px}

/* ═══════════════════════════════════════
   PARALLAX BREAK
   Sky blue at top (from services) → photo sky
   Bottom of photo → dark pine green → process green
   Text floats in the scene.
═══════════════════════════════════════ */
.lsc{position:relative;z-index:1;margin-top:0}
.lsc-in{position:relative;height:calc(100vh + 100px);overflow:hidden}
.lsc-ly{position:absolute;inset:0;width:100%;height:120%;will-change:transform}
.lsc-ly img{width:100%;height:100%;object-fit:cover;object-position:center bottom;pointer-events:none}
.lsc-ly img.lsc-fg{width:100%;height:auto;object-fit:unset;position:absolute;bottom:0;left:0}
.lsc-ft{position:absolute;top:0;left:0;right:0;height:12%;z-index:20;background:linear-gradient(180deg,#476885 0%,transparent 100%);pointer-events:none}
.lsc-ft{position:absolute;top:0;left:0;right:0;height:12%;z-index:20;background:linear-gradient(180deg,#476885 0%,transparent 100%);pointer-events:none}
/* Bottom layer 1: darkens the lower portion of the photo — trees go near-black */
.lsc-fb1{position:absolute;bottom:0;left:0;right:0;height:18%;z-index:20;background:linear-gradient(0deg,var(--green) 0%,transparent 100%);pointer-events:none}
/* Bottom layer 2: black fades into process green — the scene transitions below */
.lsc-fb2{display:none}
.lsc-txt{position:absolute;z-index:2;left:50%;top:calc(50% - 100px);transform:translate(-50%,-50%);text-align:center;width:90%;max-width:900px;pointer-events:none;will-change:transform}
.lsc-txt .lsc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-shadow:none;margin-bottom:16px}
.lsc-txt .lsc-eyebrow::before,.lsc-txt .lsc-eyebrow::after{content:'';display:block;width:24px;height:1px;background:var(--gold)}
.lsc-txt .lsc-line1{display:block;font-family:var(--fh);font-weight:900;font-size:clamp(1.6rem,3.8vw,5rem);letter-spacing:-.04em;line-height:1;color:var(--white);text-shadow:0 2px 40px rgba(0,0,0,.45);margin-bottom:10px}
.lsc-txt .lsc-line2{display:block;font-family:var(--fb);font-style:italic;font-size:clamp(1rem,2.2vw,2.8rem);letter-spacing:-.01em;line-height:1.2;color:var(--gold);text-shadow:0 2px 32px rgba(0,0,0,.4)}


/* ═══════════════════════════════════════
   PROCESS — forest green
   Picks up seamlessly from parallax bottom
═══════════════════════════════════════ */
.proc{background:var(--green);position:relative;z-index:1;margin-top:0}/* -4px removes any gap */
.proc-track{height:310vh;position:relative}
.proc-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;padding-top:clamp(40px,6vh,80px)}
.proc-sticky::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 25% 50%,rgba(61,84,69,.5) 0%,transparent 58%);pointer-events:none}
.proc-in{position:relative;z-index:1;width:100%;max-width:1300px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:280px 1fr;gap:clamp(28px,4vw,64px)}
.proc-lhs-eye{font-family:var(--fh);font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.proc-lhs-eye::before{content:'';display:block;width:18px;height:1px;background:var(--gold)}
.proc-hed{font-family:var(--fh);font-weight:900;font-size:clamp(1.4rem,2.4vw,2.4rem);letter-spacing:-.04em;line-height:1.06;color:var(--white);margin-bottom:11px}
.proc-sub{font-family:var(--fb);font-size:clamp(.8rem,.95vw,.9rem);line-height:1.85;color:rgba(239,231,220,.4);margin-bottom:18px}
.proc-lnk{display:inline-flex;align-items:center;gap:7px;font-family:var(--fh);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid rgba(201,164,108,.2);padding-bottom:2px;transition:gap .25s var(--ex),border-color .25s}
.proc-lnk:hover{gap:13px;border-color:var(--gold)}
.proc-rhs{position:relative}
.proc-spine{position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08)}
.proc-fill{position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,var(--gold),var(--rust));height:0%;transition:height .5s var(--ex)}
.proc-steps{padding-left:22px}
.proc-step{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.04);opacity:.1;transform:translateX(14px);transition:opacity .55s,transform .55s var(--ex)}
.proc-step:last-child{border-bottom:none}
.proc-step.on{opacity:1;transform:none}
.proc-sn{font-family:var(--fh);font-size:.55rem;font-weight:800;letter-spacing:.14em;color:var(--gold);margin-bottom:6px}
.proc-st{font-family:var(--fh);font-weight:800;letter-spacing:-.03em;font-size:clamp(1rem,1.7vw,1.8rem);color:var(--white);margin-bottom:5px}
.proc-sb{font-family:var(--fb);font-size:clamp(.78rem,.9vw,.88rem);line-height:1.85;color:rgba(239,231,220,.44)}
.proc[data-v="1"] .proc-fill{height:25%}
.proc[data-v="2"] .proc-fill{height:50%}
.proc[data-v="3"] .proc-fill{height:75%}
.proc[data-v="4"] .proc-fill{height:100%}

/* ═══════════════════════════════════════
   WHO IT'S FOR — green fading to charcoal
   Very gradual transition. Luxury dark.
═══════════════════════════════════════ */
.fit{position:relative;padding:clamp(80px,10vw,140px) var(--pad) clamp(80px,10vw,140px)}
/* The bg transitions from green (top) to charcoal (bottom) over the full height */
.fit::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--green) 0%,var(--green) 30%,rgba(38,52,44,.9) 55%,var(--char) 100%);pointer-events:none}
.fit-in{position:relative;z-index:1;max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(36px,5vw,80px);align-items:start}
.fit-lbl{color:var(--gold);margin-bottom:18px}
.fit-hed{font-family:var(--fh);font-weight:900;font-size:clamp(1.8rem,3.5vw,4.2rem);letter-spacing:-.045em;line-height:.98;color:var(--white);margin-bottom:14px}
.fit-sub{font-family:var(--fb);font-size:clamp(.86rem,1.08vw,.98rem);line-height:1.85;color:rgba(239,231,220,.92);margin-bottom:22px}
.fit-items{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,14px)}
.fi{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:clamp(16px,2vw,22px);transition:background .3s,border-color .3s}
.fi:hover{background:rgba(255,255,255,.1);border-color:rgba(201,164,108,.3)}
.fi-dot{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:rgba(201,164,108,.15);border:1px solid rgba(201,164,108,.3);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-top:1px}
.fi-txt{font-family:var(--fb);font-size:clamp(.85rem,1.05vw,.96rem);line-height:1.8;color:rgba(239,231,220,.95)}
.fi-txt strong{font-family:var(--fh);font-weight:700;font-size:clamp(.88rem,1.1vw,1rem);color:var(--white);display:block;margin-bottom:4px;letter-spacing:-.01em}

/* ═══════════════════════════════════════
   TESTIMONIALS — charcoal bg → transitioning
   Floating cards. Brand logos. Luxury feel.
   Gradient at bottom heads toward CTA color.
═══════════════════════════════════════ */
.proof{position:relative;padding:clamp(72px,9vw,120px) var(--pad) clamp(160px,22vw,280px)}
/* bg: charcoal top → warm sand/rust-adjacent at bottom → blends with CTA photo */
.proof::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--char) 0%,rgba(26,28,30,.98) 30%,rgba(28,24,22,.95) 58%,rgba(42,28,20,.9) 75%,rgba(80,38,18,.95) 88%,rgb(100,44,20) 100%);pointer-events:none}
.proof-in{position:relative;z-index:1;max-width:1300px;margin:0 auto}
.proof-top{text-align:center;margin-bottom:clamp(40px,5.5vw,64px)}
.proof-hed{font-family:var(--fh);font-weight:900;font-size:clamp(1.8rem,3.5vw,4rem);letter-spacing:-.04em;color:var(--white);margin-bottom:10px}
.proof-sub{font-family:var(--fb);font-style:italic;font-size:clamp(.88rem,1.1vw,1rem);color:rgba(239,231,220,.92)}
/* Floating quote cards */
.proof-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.8vw,18px);margin-bottom:clamp(44px,5.5vw,64px)}
.proof-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:clamp(22px,3vw,34px);cursor:none;transition:background .35s,border-color .35s,transform .4s var(--ex),box-shadow .4s}
.proof-card:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15);transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.proof-stars{color:var(--gold);font-size:11px;letter-spacing:2.5px;display:block;margin-bottom:14px}
.proof-q{font-family:var(--fb);font-style:italic;font-size:clamp(.88rem,1.1vw,1.02rem);line-height:1.72;color:rgba(255,255,255,.95);margin-bottom:16px}
.proof-name{font-family:var(--fh);font-size:.6rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.9)}
.proof-role{font-family:var(--fh);font-size:.54rem;letter-spacing:.06em;color:rgba(255,255,255,.72);margin-top:1px}
/* Brand logos */
.proof-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(14px,2.5vw,28px)}
.proof-logos-lbl{width:100%;text-align:center;font-family:var(--fh);font-size:.54rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:clamp(12px,1.8vw,20px)}
.proof-logo-img{height:34px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.78;transition:opacity .3s;cursor:none}
.proof-logo-screen{filter:none;mix-blend-mode:screen;opacity:.75}
.proof-logo-img:hover{opacity:.85}
.proof-logo:hover{color:rgba(255,255,255,.65);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}

/* ═══════════════════════════════════════
   CTA — large photo, minimal darkening
   The sunset sky at top matches the warm
   gradient transitioning from testimonials.
   Text above the photo feeling.
═══════════════════════════════════════ */
.cta{position:relative;min-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.cta-photo{position:absolute;inset:0;z-index:0}
.cta-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
/* Very light overlay — let the photo breathe */
.cta-photo-ov{position:absolute;inset:0;background:linear-gradient(160deg,rgba(52,32,22,.22) 0%,rgba(26,28,30,.18) 40%,rgba(26,28,30,.38) 100%)}
.cta-top-fade{position:absolute;top:0;left:0;right:0;height:35%;z-index:1;background:linear-gradient(180deg,rgb(100,44,20) 0%,transparent 100%);pointer-events:none}
.cta-c{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(60px,9vw,110px) var(--pad);flex:1;max-width:1300px;margin:0 auto;width:100%}
.cta-eye{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.cta-eye::before{content:'';display:block;width:20px;height:1px;background:var(--gold)}
.cta-hed{font-family:var(--fh);font-weight:900;font-size:clamp(3rem,8vw,11rem);letter-spacing:-.06em;line-height:.88;color:var(--white);margin-bottom:40px}
.cta-hed em{font-style:italic;color:var(--gold)}
.cta-sub{font-family:var(--fb);font-size:clamp(.9rem,1.2vw,1.06rem);line-height:1.8;color:rgba(255,255,255,.88);max-width:46ch;margin-bottom:28px}
.cta-acts{display:flex;gap:10px;flex-wrap:wrap}



/* ─── MODAL ─────────────────────────── */
.modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .4s var(--ex),visibility .4s}
.modal.open{opacity:1;visibility:visible}
.modal-bd{position:absolute;inset:0;background:rgba(26,28,30,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.modal-box{position:relative;z-index:1;width:100%;max-width:860px;background:#111315;border-radius:7px;overflow:hidden;transform:translateY(20px) scale(.98);transition:transform .5s var(--ex);box-shadow:0 40px 100px rgba(0,0,0,.5)}
.modal.open .modal-box{transform:translateY(0) scale(1)}
.modal-cls{position:absolute;top:11px;right:11px;z-index:10;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);cursor:none;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:var(--white);transition:background .2s}
.modal-cls:hover{background:rgba(255,255,255,.16)}
.modal-vid{position:relative;width:100%;aspect-ratio:16/9;background:var(--char)}
.modal-ifr{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal-meta{padding:16px 22px 22px;display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.08)}
.modal-cat{font-family:var(--fh);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.modal-title{font-family:var(--fh);font-size:clamp(1.2rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-.03em;color:var(--white)}
.modal-desc{font-family:var(--fb);font-size:.9rem;line-height:1.72;color:rgba(239,231,220,.75)}
.modal-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}



/* ─── RESPONSIVE ─────────────────────── */
@media(max-width:1100px){.svcs-grid{grid-template-columns:1fr 1fr}.pos-in,.fit-in{grid-template-columns:1fr}}
@media(max-width:900px){
  .stats-in{grid-template-columns:1fr 1fr}.s-st{border-right:none;padding:0 0 18px;border-bottom:1px solid rgba(26,28,30,.07)}.s-st:last-child{border-bottom:none;padding-bottom:0}.s-st:first-child{padding-left:0}
  .proof-cards{grid-template-columns:1fr}
  .port-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .proc-in{grid-template-columns:1fr}
}
@media(max-width:600px){
  .svcs-grid{grid-template-columns:1fr}
  .port-track{height:320vh}.cta-hed{font-size:clamp(2.5rem,9vw,5rem)}
}


/* Mobile only: remove sticky process section and let all steps display normally */
@media(max-width:900px){
  .proc-track{height:auto}
  .proc-sticky{
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    overflow:visible;
    display:block;
    padding-top:clamp(36px,6vw,56px);
    padding-bottom:clamp(36px,6vw,56px);
  }
  .proc-in{grid-template-columns:1fr}
  .proc-rhs{margin-top:18px}
  .proc-spine{display:block}
  .proc-fill{height:100%}
  .proc-step{
    opacity:1;
    transform:none;
  }
}