#scrollSection {
    overflow: hidden;
  }
 
  
:root{
--navy:#00102a;--navy2:#001232;--navy3:#001845;--navy-l:#002050;
--copper:rgb(196,127,59);--copper-l:rgb(218,165,92);--copper-b:rgb(232,184,108);--copper-d:rgb(158,98,38);
--copper-g:linear-gradient(135deg,#c47f3b,#daa55c,#e8b86c,#c47f3b);
--text:#e8e4dc;--text2:rgba(232,228,220,.6);--text3:rgba(232,228,220,.35);
--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--navy);color:var(--text);font-family:var(--sans);line-height:1.7;overflow-x:hidden}
::selection{background:var(--copper);color:var(--navy)}

/* ── SCROLL PROGRESS ── */
#scrollProgress{position:fixed;top:0;left:0;height:2px;background:var(--copper-g);z-index:200;width:0;transition:none}

/* ── DOT NAV ── */
.dot-nav{position:fixed;right:2rem;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;gap:1.2rem}
.dot-nav a{width:8px;height:8px;border-radius:50%;background:var(--text3);display:block;transition:all .4s;position:relative}
.dot-nav a.active{background:var(--copper);box-shadow:0 0 12px rgba(196,127,59,.4)}
.dot-nav a::after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-l);white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none}
.dot-nav a:hover::after{opacity:1}

/* ── CURSOR HALO ── */
.cursor-halo{position:fixed;width:28px;height:28px;border:1px solid rgba(196,127,59,.25);border-radius:50%;pointer-events:none;z-index:999;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s,opacity .25s;opacity:0}
.cursor-halo.visible{opacity:1}
.cursor-halo.active{width:44px;height:44px;border-color:rgba(196,127,59,.5)}

/* ── GLOBAL TYPOGRAPHY ── */
.section-label{font-family:var(--sans);font-size:.65rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:var(--copper);margin-bottom:2.5rem}
h2.headline{font-family:var(--serif);font-size:clamp(2.8rem,6vw,5rem);font-weight:300;line-height:1.1;color:var(--text);margin-bottom:1.5rem}
h2.headline em{font-style:italic;color:var(--copper-l)}
h2.headline .word{display:inline-block;opacity:0;transform:translateY(40px) rotateX(30deg);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
h2.headline.v .word{opacity:1;transform:translateY(0) rotateX(0)}
.body-text{font-size:clamp(1rem,1.2vw,1.1rem);color:var(--text2);line-height:1.8;max-width:600px}
.bold-close{font-weight:600;color:var(--text);margin-top:1.5rem;font-size:clamp(1.05rem,1.3vw,1.15rem)}

/* ── DEPTH-OF-FIELD BG LAYERS ── */
.depth-layer{position:absolute;pointer-events:none;border-radius:50%;will-change:transform}
.depth-layer--far{width:clamp(400px,60vw,900px);height:clamp(400px,60vw,900px);background:radial-gradient(circle,rgba(196,127,59,.02) 0%,transparent 65%);filter:blur(80px);opacity:.4}
.depth-layer--mid{width:clamp(200px,30vw,450px);height:clamp(200px,30vw,450px);background:radial-gradient(circle,rgba(196,127,59,.04) 0%,transparent 60%);filter:blur(40px);opacity:.5}
.depth-layer--near{width:clamp(60px,10vw,150px);height:clamp(60px,10vw,150px);background:radial-gradient(circle,rgba(196,127,59,.06) 0%,transparent 55%);filter:blur(12px);opacity:.6}
.depth-grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.03;background:url('data:image/svg+xml,<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence baseFrequency=".8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".5"/></svg>') repeat}

/* ── BUTTONS ── */
.cta-primary{display:inline-block;padding:.85rem 2.2rem;border:1px solid var(--copper);color:var(--copper-l);font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;position:relative;overflow:hidden;transition:color .4s}
.cta-primary::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:var(--copper);transition:height .5s cubic-bezier(.25,.46,.45,.94);z-index:0}
.cta-primary:hover::before{height:100%}
.cta-primary:hover{color:var(--navy)}
.cta-primary span{position:relative;z-index:1}
.cta-secondary{display:inline-block;color:var(--text3);font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent;transition:all .4s;margin-left:2rem}
.cta-secondary:hover{color:var(--copper-l);border-bottom-color:var(--copper)}

/* ── SECTION BASE ── */
section{position:relative;overflow:hidden}
.section-inner{max-width:1200px;margin:0 auto;padding:0 3rem}

/* ── REVEAL SYSTEM ── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.v{opacity:1;transform:translateY(0)}
.reveal-line{opacity:0;transform:translateY(20px);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal-line.v{opacity:1;transform:translateY(0)}

/* ── PARALLAX ELEMENT ── */
.parallax-el{transition:transform .1s linear;will-change:transform}

/* ═══════════════════════════════════════ */
/* SECTION 1 — HERO                       */
/* ═══════════════════════════════════════ */
#hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
#hero::before{content:'';position:absolute;inset:-60px;background:url('nautilus-hero.png') center center/cover no-repeat;z-index:0;opacity:0;animation:heroBgReveal 2s .2s ease-out forwards;transform:scale(var(--hero-scale,1)) translateY(var(--hero-y,0px));will-change:transform;transition:none}
#hero::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,16,42,.82) 0%,rgba(0,16,42,.35) 35%,rgba(0,16,42,.15) 55%,rgba(0,16,42,.65) 100%);z-index:1}
@keyframes heroBgReveal{0%{opacity:0;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
#hero .section-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-text{max-width:720px;position:relative;z-index:2}
.hero-text h1{font-family:var(--serif);font-size:clamp(3.5rem,8.5vw,7rem);font-weight:400;line-height:1.05;color:#fff;margin-bottom:1.4rem;clip-path:inset(0 0 100% 0);animation:heroReveal .9s .6s cubic-bezier(.16,1,.3,1) forwards;text-shadow:0 4px 60px rgba(0,0,0,.4)}
@keyframes heroReveal{to{clip-path:inset(0)}}
.hero-sub{font-family:var(--sans);font-size:clamp(1rem,1.2vw,1.1rem);color:rgba(232,228,220,.8);line-height:1.8;max-width:520px;margin:0 auto .8rem;opacity:0;animation:fadeUp .7s 1.1s ease-out forwards}
.hero-micro{font-size:.75rem;color:var(--copper-l);letter-spacing:.12em;font-style:italic;margin-bottom:3rem;opacity:0;animation:fadeUp .7s 1.4s ease-out forwards}
.hero-ctas{opacity:0;animation:fadeUp .7s 1.6s ease-out forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}from{transform:translateY(12px)}}

/* ═══════════════════════════════════════ */
/* SECTION — MEET MAE (INTRO VIDEO)       */
/* ═══════════════════════════════════════ */
#meet-mae{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy);position:relative}
.meet-inner{text-align:center;position:relative;z-index:2}
.meet-label{font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--copper);margin-bottom:3rem;opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s}
.meet-label.v{opacity:1;transform:translateY(0)}
.meet-title{font-family:var(--serif);font-weight:300;line-height:1;margin-bottom:1rem}
.meet-title .meet-word{display:inline-block;font-size:clamp(5rem,14vw,11rem);font-weight:600;color:var(--text);opacity:0;transform:translateY(60px) scale(.9);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);text-shadow:0 4px 80px rgba(196,127,59,.15)}
.meet-title .meet-word.v{opacity:1;transform:translateY(0) scale(1)}
.meet-title .meet-dot{display:inline-block;font-size:clamp(4rem,10vw,8rem);color:var(--copper-l);margin:0 .08em;opacity:0;transform:scale(0) rotate(-20deg);transition:opacity .5s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.meet-title .meet-dot.v{opacity:1;transform:scale(1)}
.meet-sub{font-family:var(--serif);font-size:clamp(.95rem,1.2vw,1.1rem);font-style:italic;color:var(--text2);margin-top:1.5rem;opacity:0;transform:translateY(15px);transition:opacity .7s 1.2s,transform .7s 1.2s}
.meet-sub.v{opacity:1;transform:translateY(0)}
.meet-play{width:100px;height:100px;border-radius:50%;border:1.5px solid rgba(196,127,59,.3);display:flex;align-items:center;justify-content:center;margin:3.5rem auto 0;cursor:pointer;position:relative;transition:all .5s;opacity:0;transform:scale(.85);background:transparent}
.meet-play.v{opacity:1;transform:scale(1);transition:all .5s .8s}
.meet-play::after{content:'';width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:22px solid var(--copper-l);margin-left:5px;transition:border-left-color .3s}
.meet-play:hover{border-color:var(--copper);transform:scale(1.08);box-shadow:0 0 40px rgba(196,127,59,.15)}
.meet-play:hover::after{border-left-color:var(--copper-b)}
.meet-play-label{font-family:var(--sans);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text3);margin-top:1.2rem;opacity:0;transition:opacity .5s 1.4s}
.meet-play-label.v{opacity:1}
/* Ambient glow */
#meet-mae::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(300px,50vw,600px);height:clamp(300px,50vw,600px);border-radius:50%;background:radial-gradient(circle,rgba(196,127,59,.04) 0%,transparent 65%);pointer-events:none;animation:meetGlow 5s ease-in-out infinite alternate}
@keyframes meetGlow{0%{opacity:.5;transform:translate(-50%,-50%) scale(1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}

/* Video modal */
.video-modal-overlay{position:fixed;inset:0;background:rgba(0,8,20,.92);backdrop-filter:blur(16px);z-index:300;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .4s}
.video-modal-overlay.open{display:flex;opacity:1}
.video-modal{position:relative;width:90%;max-width:900px;aspect-ratio:16/9;background:#000}
.video-modal iframe,.video-modal video{width:100%;height:100%;border:none}
.video-modal-close{position:absolute;top:-2.5rem;right:0;background:none;border:none;color:var(--text3);font-size:1.2rem;cursor:pointer;transition:color .3s;padding:.5rem;font-family:var(--sans)}
.video-modal-close:hover{color:var(--copper-l)}

/* ═══════════════════════════════════════ */
/* SECTION 2 — THE REAL PROBLEM           */
/* ═══════════════════════════════════════ */
#problem{padding:12rem 0;position:relative}
.problem-lines{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.6rem);line-height:2.2;color:var(--text2);max-width:680px}
.problem-lines .line{display:block}
.problem-fingerprint{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:clamp(300px,35vw,500px);height:clamp(300px,35vw,500px);opacity:.07;pointer-events:none;transition:transform 8s ease-in-out}

/* ═══════════════════════════════════════ */
/* SECTION 3 — WHAT WE DO DIFFERENTLY     */
/* ═══════════════════════════════════════ */
#different{padding:10rem 0;background:var(--navy2)}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3rem}
.pillar{padding:2.5rem 2rem;border:1px solid rgba(196,127,59,.06);transition:all .6s;position:relative;cursor:default}
.pillar:hover{border-color:rgba(196,127,59,.2);background:rgba(196,127,59,.02)}
.pillar-icon{width:48px;height:48px;margin-bottom:1.5rem;opacity:.7;transition:opacity .4s}
.pillar:hover .pillar-icon{opacity:1}
.pillar-icon svg{width:100%;height:100%}
.pillar h3{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--text);margin-bottom:.8rem;transition:color .4s}
.pillar:hover h3 .kw{color:var(--copper-l)}
.pillar p{font-size:.85rem;color:var(--text3);line-height:1.7}

/* ═══════════════════════════════════════ */
/* SECTION — MIND · ART · EMOTION         */
/* ═══════════════════════════════════════ */
#mae-triad{padding:6rem 0 0;background:var(--navy2);position:relative;overflow:hidden}
#mae-triad::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:0;background:var(--copper-g);transition:height 1.2s ease-out}
#mae-triad.line-in::before{height:80px}
.triad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:3rem;position:relative}
.triad-grid::before{content:'';position:absolute;top:0;bottom:0;left:33.333%;width:1px;background:rgba(196,127,59,.08);z-index:2}
.triad-grid::after{content:'';position:absolute;top:0;bottom:0;left:66.666%;width:1px;background:rgba(196,127,59,.08);z-index:2}
.triad-col{position:relative;cursor:default;overflow:hidden}

/* ── Image area ── */
.triad-img{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
.triad-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.25,.46,.45,.94),filter .6s;filter:brightness(.85) saturate(.9)}
.triad-col:hover .triad-img img{transform:scale(1.05);filter:brightness(1) saturate(1)}
.triad-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--navy2) 100%);pointer-events:none}

/* ── Text area ── */
.triad-content{padding:0 2.5rem 3rem;position:relative;z-index:1;margin-top:-2.5rem}
.triad-col .triad-word{font-family:var(--serif);font-size:clamp(3.5rem,6vw,5.5rem);font-weight:600;color:var(--text);line-height:.95;margin-bottom:1rem;letter-spacing:-.03em;transition:color .5s;background:linear-gradient(180deg,var(--text) 40%,var(--copper-l) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.triad-col:hover .triad-word{background:linear-gradient(180deg,var(--copper-l) 0%,var(--copper-b) 100%);-webkit-background-clip:text;background-clip:text}
.triad-col h3{font-family:var(--serif);font-size:clamp(1rem,1.2vw,1.15rem);font-weight:400;font-style:italic;color:var(--text);margin-bottom:1.2rem;line-height:1.4}
.triad-col .triad-body{font-family:var(--serif);font-size:clamp(.82rem,.9vw,.88rem);line-height:1.9;color:var(--text2)}
.triad-col .triad-body span{display:block}
.triad-col .emphasis{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--copper-l);margin-top:1.8rem;position:relative;display:inline-block}
.triad-col .emphasis::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--copper);transition:width 1s ease-out}
.triad-col .emphasis.v::after{width:100%}
.triad-col .pillar-cta{display:inline-block;margin-top:1.5rem;font-size:.65rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text3);text-decoration:none;transition:color .4s;border-bottom:1px solid transparent}
.triad-col .pillar-cta:hover{color:var(--copper-l);border-bottom-color:var(--copper)}

/* ═══════════════════════════════════════ */
/* SECTION 4 — THE MAE METHOD             */
/* ═══════════════════════════════════════ */
#method{padding:10rem 0;position:relative}
.method-timeline{position:relative;padding-left:3rem;margin-top:3rem}
.method-line{position:absolute;left:0;top:0;width:2px;height:100%;background:rgba(196,127,59,.1)}
.method-line-fill{position:absolute;left:0;top:0;width:2px;height:0;background:var(--copper-g);transition:height .1s linear}
.method-step{position:relative;padding:2.5rem 0;padding-left:2rem}
.method-step::before{content:'';position:absolute;left:-3rem;top:2.8rem;width:8px;height:8px;border-radius:50%;background:var(--text3);border:2px solid var(--navy);transition:all .5s;z-index:1}
.method-step.active::before{background:var(--copper);box-shadow:0 0 20px rgba(196,127,59,.4)}
.method-step h3{font-family:var(--serif);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:400;color:var(--text3);transition:all .6s;filter:blur(3px)}
.method-step.active h3{color:var(--text);filter:blur(0)}
.method-step p{font-size:.9rem;color:var(--text3);max-width:480px;line-height:1.7;opacity:0;transform:translateY(8px);transition:all .6s .15s}
.method-step.active p{opacity:1;transform:translateY(0)}
.method-close{font-family:var(--serif);font-size:1.1rem;font-style:italic;color:var(--copper-l);margin-top:3rem;opacity:.7}

/* ═══════════════════════════════════════ */
/* SECTION 5 — CROSS-INDUSTRY             */
/* ═══════════════════════════════════════ */
#industries{padding:10rem 0;background:var(--navy2)}
.pattern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(196,127,59,.06);margin-top:3rem}
.pattern-tile{background:var(--navy2);padding:2.5rem;cursor:default;transition:all .5s;position:relative}
.pattern-tile:hover{background:rgba(0,18,50,.8)}
.pattern-tile h4{font-family:var(--serif);font-size:1.15rem;font-weight:400;color:var(--text);margin-bottom:.6rem}
.pattern-tile .pattern{font-size:.8rem;color:var(--text3);line-height:1.6;transition:color .4s}
.pattern-tile:hover .pattern{color:var(--copper-l)}
.pattern-tile .cause{font-size:.8rem;color:var(--text3);margin-top:.5rem;opacity:0;transform:translateY(6px);transition:all .4s}
.pattern-tile:hover .cause{opacity:1;transform:translateY(0)}
.pattern-tile .arrow{color:var(--copper);font-size:.7rem;margin:0 .3rem}

/* ═══════════════════════════════════════ */
/* SECTION — TESTIMONIALS                 */
/* ═══════════════════════════════════════ */
#testimonials{padding:10rem 0;overflow:visible}
.testimonial-wrap{position:relative;margin-top:3rem}
.testimonial-track{display:flex;gap:2.5rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:1rem 0 2rem;scrollbar-width:none;cursor:grab}
.testimonial-track:active{cursor:grabbing}
.testimonial-track::-webkit-scrollbar{display:none}
.testimonial-card{min-width:360px;max-width:400px;scroll-snap-align:start;padding:2.5rem;border:1px solid rgba(196,127,59,.06);transition:border-color .6s,background .6s,filter .6s;flex-shrink:0;position:relative}
.testimonial-card:hover{border-color:rgba(196,127,59,.15);background:rgba(196,127,59,.015)}
.testimonial-card blockquote{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--text2);line-height:1.7;margin-bottom:1.5rem;filter:blur(.5px);transition:filter .5s}
.testimonial-card:hover blockquote{filter:blur(0)}
.testimonial-card .tc-person{display:flex;align-items:center;gap:1rem}
.testimonial-card .tc-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;filter:grayscale(1) brightness(.7);transition:all .5s;border:2px solid transparent}
.testimonial-card:hover .tc-photo{filter:grayscale(0) brightness(1);border-color:var(--copper)}
.testimonial-card .tc-name{font-size:.8rem;font-weight:600;color:var(--text);letter-spacing:.03em}
.testimonial-card .tc-title{font-size:.7rem;color:var(--text3);margin-top:.15rem}
/* Arrows */
.tc-nav{display:flex;gap:1rem;margin-top:1.5rem}
.tc-arrow{width:40px;height:40px;border:1px solid rgba(196,127,59,.2);background:transparent;color:var(--copper-l);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.tc-arrow:hover{border-color:var(--copper);background:rgba(196,127,59,.05)}
/* Scroll indicators */
.tc-dots{display:flex;gap:.5rem;margin-top:1.5rem}
.tc-dots span{width:24px;height:2px;background:var(--text3);transition:all .4s}
.tc-dots span.active{background:var(--copper);width:36px}

/* ═══════════════════════════════════════ */
/* SECTION — CLIENT LOGOS                 */
/* ═══════════════════════════════════════ */
#clients{padding:8rem 0;background:var(--navy2)}
#clients .section-inner{text-align:center}
.client-caption{font-size:.8rem;color:var(--text3);margin-top:.5rem;font-style:italic}
.logo-row{display:flex;justify-content:center;align-items:center;gap:clamp(2.5rem,5vw,5rem);margin-top:3.5rem;flex-wrap:wrap}
.logo-row .client-logo{opacity:.25;transition:all .6s;cursor:default;font-family:var(--sans);font-size:clamp(.7rem,.85vw,.8rem);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);padding:1rem 0}
.logo-row .client-logo:hover{opacity:1;text-shadow:0 0 20px rgba(196,127,59,.3)}

/* ═══════════════════════════════════════ */
/* SECTION — WHY WORK WITH MAE            */
/* ═══════════════════════════════════════ */
#why-mae{padding:10rem 0}
.why-reasons{margin-top:3rem;max-width:700px}
.why-reason{padding:1.8rem 0;border-bottom:1px solid rgba(196,127,59,.06);position:relative;padding-left:1.5rem}
.why-reason::before{content:'';position:absolute;left:0;top:2.2rem;width:0;height:1px;background:var(--copper);transition:width .8s ease-out}
.why-reason.v::before{width:3rem}
.why-reason h4{font-family:var(--serif);font-size:1.15rem;font-weight:400;color:var(--text);margin-bottom:.4rem}
.why-reason h4 .kw{color:var(--copper-l)}
.why-reason p{font-size:.85rem;color:var(--text3);line-height:1.7;max-width:500px}

/* ═══════════════════════════════════════ */
/* SECTION 6 — PROOF                      */
/* ═══════════════════════════════════════ */
#proof{padding:10rem 0;background:var(--navy2)}
.narratives{margin-top:3rem;position:relative}
.narrative{padding:3rem 0;border-bottom:1px solid rgba(196,127,59,.06);display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.narrative:last-child{border-bottom:none}
.nar-block label{font-size:.6rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--text3);display:block;margin-bottom:.6rem;transition:color .4s}
.narrative:hover .nar-block label{color:var(--copper)}
.nar-block p{font-family:var(--serif);font-size:1.05rem;color:var(--text2);font-style:italic;line-height:1.6}

/* ═══════════════════════════════════════ */
/* SECTION — PORTFOLIO (GATED)            */
/* ═══════════════════════════════════════ */
#portfolio{padding:10rem 0}
.portfolio-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;position:relative}
.portfolio-preview::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 10%,var(--navy) 85%);pointer-events:none;z-index:1}
.port-item{aspect-ratio:4/3;background:var(--navy2);border:1px solid rgba(196,127,59,.06);overflow:hidden;position:relative}
.port-item img{width:100%;height:100%;object-fit:cover;filter:blur(8px) brightness(.5) saturate(.4);transform:scale(1.1);transition:filter .6s,transform .6s}
.port-item .port-label{position:absolute;bottom:1rem;left:1rem;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text3);opacity:.5}
.portfolio-gate{position:relative;z-index:2;text-align:center;margin-top:-6rem;padding-top:0}
.portfolio-gate p{font-family:var(--serif);font-size:clamp(1rem,1.2vw,1.1rem);color:var(--text2);font-style:italic;margin-bottom:2rem;max-width:420px;margin-left:auto;margin-right:auto}
.port-unlock-btn{display:inline-block;padding:.85rem 2.5rem;border:1px solid var(--copper);color:var(--copper-l);font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;background:transparent;position:relative;overflow:hidden;transition:color .4s}
.port-unlock-btn::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:var(--copper);transition:height .5s cubic-bezier(.25,.46,.45,.94);z-index:0}
.port-unlock-btn:hover::before{height:100%}
.port-unlock-btn:hover{color:var(--navy)}
.port-unlock-btn span{position:relative;z-index:1}

/* Portfolio Modal */
.port-modal-overlay{position:fixed;inset:0;background:rgba(0,16,42,.85);backdrop-filter:blur(12px);z-index:300;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .4s}
.port-modal-overlay.open{display:flex;opacity:1}
.port-modal{background:var(--navy2);border:1px solid rgba(196,127,59,.1);padding:3rem;max-width:440px;width:90%;position:relative}
.port-modal-close{position:absolute;top:1rem;right:1.2rem;background:none;border:none;color:var(--text3);font-size:1.2rem;cursor:pointer;transition:color .3s;padding:.5rem}
.port-modal-close:hover{color:var(--copper-l)}
.port-modal h3{font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--text);margin-bottom:.5rem}
.port-modal .pm-sub{font-size:.85rem;color:var(--text2);margin-bottom:2rem;line-height:1.6}
.port-modal .form-group{margin-bottom:1.5rem}
.port-modal .form-group label{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);display:block;margin-bottom:.4rem}
.port-modal .form-group input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(196,127,59,.15);padding:.7rem 0;font-family:var(--sans);font-size:.9rem;color:var(--text);outline:none;transition:border-color .3s}
.port-modal .form-group input:focus{border-bottom-color:var(--copper)}
.port-modal .form-group input::placeholder{color:var(--text3)}
.pm-consent{display:flex;align-items:flex-start;gap:.6rem;margin:1.5rem 0}
.pm-consent input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid rgba(196,127,59,.3);background:transparent;cursor:pointer;flex-shrink:0;margin-top:.15rem;position:relative;transition:all .3s}
.pm-consent input[type="checkbox"]:checked{background:var(--copper);border-color:var(--copper)}
.pm-consent input[type="checkbox"]:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.65rem;color:var(--navy);font-weight:700}
.pm-consent label{font-size:.75rem;color:var(--text3);line-height:1.5;cursor:pointer}
.pm-submit{width:100%;padding:.85rem;background:transparent;border:1px solid var(--copper);color:var(--copper-l);font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;transition:color .4s;opacity:.4;pointer-events:none}
.pm-submit.enabled{opacity:1;pointer-events:auto}
.pm-submit::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:var(--copper);transition:height .5s cubic-bezier(.25,.46,.45,.94);z-index:0}
.pm-submit:hover::before{height:100%}
.pm-submit:hover{color:var(--navy)}
.pm-submit span{position:relative;z-index:1}
.pm-success{display:none;text-align:center;padding:2rem 0}
.pm-success h3{font-family:var(--serif);font-size:1.3rem;color:var(--text);margin-bottom:.8rem}
.pm-success p{font-size:.85rem;color:var(--text2);line-height:1.6}

/* ═══════════════════════════════════════ */
/* SECTION 7 — FIT                        */
/* ═══════════════════════════════════════ */
#fit{padding:10rem 0}
.fit-columns{display:grid;grid-template-columns:1fr 1fr;gap:6rem;margin-top:3rem}
.fit-col h4{font-family:var(--serif);font-size:1.1rem;color:var(--text);margin-bottom:1.5rem}
.fit-col ul{list-style:none}
.fit-col li{font-size:.9rem;color:var(--text2);padding:.6rem 0;padding-left:1.2rem;position:relative;transition:color .3s}
.fit-col li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--text3);transition:all .3s}
.fit-col li:hover::before{background:var(--copper);transform:translateY(-50%) scale(1.4)}
.fit-col li:hover{color:var(--text)}
.fit-col.not li{color:var(--text3)}
.fit-close{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--text2);margin-top:4rem}

/* ═══════════════════════════════════════ */
/* SECTION — VLOG                         */
/* ═══════════════════════════════════════ */
#vlog{padding:10rem 0;background:var(--navy2)}
.vlog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.vlog-card{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer;border:1px solid rgba(196,127,59,.08);transition:border-color .4s}
.vlog-card:hover{border-color:rgba(196,127,59,.3)}
.vlog-card .vlog-thumb{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.8);transition:all .6s}
.vlog-card:hover .vlog-thumb{filter:brightness(.4) saturate(.6)}
.vlog-card .vlog-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border:1.5px solid var(--copper-l);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.6;transition:all .4s}
.vlog-card:hover .vlog-play{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
.vlog-card .vlog-play::after{content:'';width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:14px solid var(--copper-l);margin-left:3px}
.vlog-card .vlog-title{position:absolute;bottom:0;left:0;right:0;padding:1.2rem;font-size:.78rem;color:var(--text);letter-spacing:.03em;opacity:0;transform:translateY(8px);transition:all .4s;background:linear-gradient(transparent,rgba(0,16,42,.8))}
.vlog-card:hover .vlog-title{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════ */
/* SECTION 8 — AI                         */
/* ═══════════════════════════════════════ */
#ai{padding:10rem 0}
.ai-principles{display:flex;gap:3rem;margin-top:3rem}
.ai-principle{flex:1;position:relative;padding-left:1.5rem;border-left:1px solid rgba(196,127,59,.15)}
.ai-principle h4{font-family:var(--serif);font-size:1.1rem;color:var(--text);margin-bottom:.4rem}
.ai-principle .underline{display:block;width:0;height:1px;background:var(--copper);transition:width .8s ease-out;margin-top:.3rem}
.ai-principle.v .underline{width:100%}
.ai-principle p{font-size:.85rem;color:var(--text3);line-height:1.6;margin-top:.6rem}

/* ═══════════════════════════════════════ */
/* SECTION — NEWSLETTER                   */
/* ═══════════════════════════════════════ */
#newsletter{padding:8rem 0;background:var(--navy2)}
#newsletter .section-inner{max-width:600px;text-align:center}
#newsletter h2.headline{margin-bottom:1rem}
.newsletter-desc{font-size:.9rem;color:var(--text2);line-height:1.7;margin-bottom:2.5rem}
.newsletter-form{display:flex;gap:0;max-width:460px;margin:0 auto}
.newsletter-form input{flex:1;background:transparent;border:none;border-bottom:1px solid rgba(196,127,59,.2);padding:.8rem 0;font-family:var(--sans);font-size:.9rem;color:var(--text);outline:none;transition:border-color .3s}
.newsletter-form input:focus{border-bottom-color:var(--copper)}
.newsletter-form input::placeholder{color:var(--text3)}
.newsletter-form button{background:transparent;border:1px solid var(--copper);color:var(--copper-l);font-family:var(--sans);font-size:.65rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:.8rem 2rem;cursor:pointer;position:relative;overflow:hidden;transition:color .5s;margin-left:1rem;white-space:nowrap}
.newsletter-form button::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:var(--copper);transition:height .5s cubic-bezier(.25,.46,.45,.94);z-index:0}
.newsletter-form button:hover::before{height:100%}
.newsletter-form button:hover{color:var(--navy)}
.newsletter-form button span{position:relative;z-index:1}
.newsletter-success{display:none;font-family:var(--serif);font-size:1rem;color:var(--copper-l);font-style:italic;margin-top:1.5rem}

/* ═══════════════════════════════════════ */
/* SECTION 9 — CONVERSION                 */
/* ═══════════════════════════════════════ */
#contact{padding:10rem 0}
.contact-form{max-width:560px;margin-top:3rem}
.form-group{position:relative;margin-bottom:2rem}
.form-group label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);display:block;margin-bottom:.5rem}
.form-group input,.form-group textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(196,127,59,.15);padding:.8rem 0;font-family:var(--sans);font-size:.95rem;color:var(--text);outline:none;resize:none;transition:border-color .3s}
.form-group input:focus,.form-group textarea:focus{border-bottom-color:var(--copper)}
.form-group .focus-line{position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--copper);transition:width .4s ease-out}
.form-group input:focus~.focus-line,.form-group textarea:focus~.focus-line{width:100%}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text3)}
.submit-btn{padding:1rem 3rem;background:transparent;border:1px solid var(--copper);color:var(--copper-l);font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;transition:color .5s}
.submit-btn::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:var(--copper);transition:height .6s cubic-bezier(.25,.46,.45,.94);z-index:0}
.submit-btn:hover::before{height:100%}
.submit-btn:hover{color:var(--navy)}
.submit-btn span{position:relative;z-index:1}
.trust-line{font-size:.75rem;color:var(--text3);margin-top:1.5rem;font-style:italic}

/* ═══════════════════════════════════════ */
/* FOOTER                                 */
/* ═══════════════════════════════════════ */
footer{padding:4rem 0;border-top:1px solid rgba(196,127,59,.06)}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-end}
.footer-talent{font-family:var(--serif);font-size:.95rem;color:var(--text3);font-style:italic;max-width:400px;line-height:1.6}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:1rem}
.footer-links{display:flex;gap:2rem}
.footer-links a{color:var(--text3);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:color .3s}
.footer-links a:hover{color:var(--copper-l)}
.footer-mark{font-weight:800;font-size:.85rem;letter-spacing:.35em;background:var(--copper-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.footer-copy{font-size:.6rem;color:var(--text3);letter-spacing:.05em}

/* ── RESPONSIVE ── */
@media(max-width:900px){
.dot-nav{display:none}
.cursor-halo{display:none}
#hero .section-inner{display:flex}
.hero-text{max-width:100%}
.meet-title .meet-word{font-size:clamp(3.5rem,15vw,5rem)}
.meet-title .meet-dot{font-size:clamp(2.5rem,10vw,4rem)}
.meet-play{width:80px;height:80px}
#hero::after{background:linear-gradient(180deg,rgba(0,16,42,.75) 0%,rgba(0,16,42,.55) 50%,rgba(0,16,42,.8) 100%)}
.pillars{grid-template-columns:1fr 1fr}
.triad-grid{grid-template-columns:1fr}
.triad-grid::before,.triad-grid::after{display:none}
.triad-col{border-bottom:1px solid rgba(196,127,59,.08)}
.triad-col:last-child{border-bottom:none}
.triad-img{aspect-ratio:16/9}
.triad-content{padding:0 1.5rem 2.5rem}
.triad-col .triad-word{font-size:clamp(3rem,12vw,4.5rem)}
.pattern-grid{grid-template-columns:1fr}
.narrative{grid-template-columns:1fr;gap:1rem}
.fit-columns{grid-template-columns:1fr;gap:3rem}
.ai-principles{flex-direction:column}
.vlog-grid{grid-template-columns:1fr}
.why-reasons{max-width:100%}
.testimonial-card{min-width:280px;max-width:320px}
.portfolio-preview{grid-template-columns:1fr 1fr}
.newsletter-form{flex-direction:column;gap:1rem}
.newsletter-form button{margin-left:0}
.footer-inner{flex-direction:column;gap:2rem;align-items:flex-start}
.section-inner{padding:0 1.5rem}
}
@media(max-width:600px){
.pillars{grid-template-columns:1fr}
}