:root{
    --bg:        #04100c;
    --bg-2:      #081f18;
    --ink:       #eef4ef;
    --ink-dim:   rgba(238,244,239,.62);
    --ink-faint: rgba(238,244,239,.34);
    --green:     #6fbf73;
    --green-deep:#1f5b34;
    --gold:      #c9a545;
    --line:      rgba(238,244,239,.16);

    --f-display: 'Fraunces', 'Iowan Old Style', serif;
    --f-body:    'Inter', -apple-system, sans-serif;
    --f-mono:    'JetBrains Mono', ui-monospace, monospace;

    --ease: cubic-bezier(.22,.7,.2,1);
  }

  *{ box-sizing: border-box; }
  html{ background: var(--bg); scroll-behavior: auto; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    cursor: default;
  }
  img, video{ -webkit-user-drag:none; user-select:none; }

  a{ color: inherit; }

  ::selection{ background: var(--green-deep); color: var(--ink); }

  /* ---------- utility ---------- */
  .eyebrow{
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .visually-hidden{
    position:absolute; width:1px;height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* ---------- grain overlay ---------- */
  .grain{
    position: fixed; inset:0; z-index: 60; pointer-events:none;
    opacity: .05; mix-blend-mode: overlay;
  }

  /* ---------- nav ---------- */
  .nav{
    position: fixed; top:0; left:0; right:0; z-index: 50;
    display:flex; align-items:center; justify-content:space-between;
    padding: 26px clamp(20px,4vw,48px);
    mix-blend-mode: difference;
    pointer-events: none;
  }
  .nav *{ pointer-events: auto; }
  .nav-mark{
    font-family: var(--f-display);
    font-weight: 560;
    font-size: 20px;
    letter-spacing: .06em;
    color: var(--ink);
    text-decoration: none;
  }
  .nav-menu{
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--ink);
    background: none; border: none;
    display:flex; align-items:center; gap:10px;
    cursor:pointer;
    padding: 6px 2px;
  }
  .nav-menu .dot{
    width:5px; height:5px; border-radius:50%;
    background: currentColor;
  }

  /* progress rail */
  .rail{
    position: fixed; top:0; left:0; height:2px; width:100%;
    z-index: 51; transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--green), var(--gold));
    transform: scaleX(0);
    mix-blend-mode: difference;
  }

  /* ---------- reels (pinned cinematic sections) ---------- */
  .reel{ position:relative; }
  .reel-stage{
    position: sticky; top:0; height:100svh; height:100vh;
    overflow:hidden; background: var(--bg);
    display:flex; align-items:center; justify-content:center;
  }

  .stage-bg{
    position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(120% 90% at 50% 18%, var(--bg-2), var(--bg) 68%);
  }

  .stage-media{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit: cover; object-position: center; z-index:2;
    opacity: .92;
  }

  .stage-vignette{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(4,16,12,.55) 0%, rgba(4,16,12,0) 22%, rgba(4,16,12,0) 70%, rgba(4,16,12,.75) 100%),
      radial-gradient(120% 70% at 50% 50%, rgba(4,16,12,0) 40%, rgba(4,16,12,.5) 100%);
  }

  .shot-eyebrow{
    position:absolute; z-index:5;
    left: clamp(20px,4vw,48px); bottom: clamp(20px,4vw,40px);
    font-family: var(--f-mono); font-size:11px; letter-spacing:.22em;
    color: var(--ink-dim); text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
    opacity:0; transform: translateY(8px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .shot-eyebrow .num{ color: var(--green); }
  .shot-eyebrow.on{ opacity:1; transform:none; }
  .shot-eyebrow .rule{ width:26px; height:1px; background: var(--line); }

  .phase{
    position:absolute; inset:0; z-index:6;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding: 0 20px;
    opacity:0; pointer-events:none;
    will-change: opacity, transform;
  }
  .phase-inner{ transform: translateY(28px); transition: none; }
  .phase h2{
    font-family: var(--f-display);
    font-weight: 420;
    font-size: clamp(42px, 9vw, 118px);
    line-height: .96;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--ink);
  }
  .phase h2 em{
    font-style: normal; color: var(--green);
  }
  .phase p{
    font-family: var(--f-body);
    font-weight: 400;
    font-size: clamp(13px,1.4vw,15px);
    color: var(--ink-dim);
    letter-spacing: .01em;
    margin: 18px 0 0;
    max-width: 30ch;
  }
  .phase .tags{
    display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
    margin-top: 22px;
  }
  .tag{
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing:.14em;
    text-transform: uppercase; color: var(--ink);
    border: 1px solid var(--line); border-radius: 100px;
    padding: 7px 14px; background: rgba(238,244,239,.04);
    backdrop-filter: blur(6px);
  }
  .phase.align-left{ align-items:flex-start; text-align:left; padding-left: clamp(24px,7vw,110px); }
  .phase.align-left .phase-inner{ max-width: 640px; }
  .phase.align-right{ align-items:flex-end; text-align:right; padding-right: clamp(24px,7vw,110px); }
  .phase.align-right .phase-inner{ max-width: 640px; }
  .phase.anchor-bottom{ justify-content:flex-end; padding-bottom: clamp(60px,11vh,120px); }

  /* ---------- reel 2 : water / glass ---------- */
  .glass-wrap{
    position:absolute; inset:0; z-index:4;
    display:flex; align-items:center; justify-content:center;
  }
  .glass-img{
    height: min(72vh, 620px);
    width:auto;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  }
  .fill-word{
    position:absolute; z-index:3; left:50%; top:50%;
    transform: translate(-50%,-50%);
    font-family: var(--f-display);
    font-weight: 560;
    font-size: clamp(90px, 20vw, 320px);
    line-height: .8;
    letter-spacing: -.02em;
    white-space: nowrap;
    pointer-events:none;
  }
  .fill-word .outline{
    color: transparent;
    -webkit-text-stroke: 1px rgba(238,244,239,.14);
  }
  .fill-word .fill{
    position:absolute; inset:0;
    color: var(--green);
    -webkit-mask-image: linear-gradient(to top, #000 var(--fill,0%), transparent var(--fill,0%));
            mask-image: linear-gradient(to top, #000 var(--fill,0%), transparent var(--fill,0%));
  }

  /* ---------- CTA / final ---------- */
  .cta{
    position:relative; min-height:100svh; min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    text-align:center; overflow:hidden;
    background: var(--bg);
  }
  .cta-bg{
    position:absolute; inset:0; object-fit:cover; object-position:center;
    opacity:.5;
  }
  .cta-vignette{
    position:absolute; inset:0;
    background: radial-gradient(90% 70% at 50% 45%, rgba(4,16,12,.35) 0%, rgba(4,16,12,.92) 100%);
  }
  .cta-inner{ position:relative; z-index:2; padding: 0 20px; }
  .cta h2{
    font-family: var(--f-display); font-weight:400;
    font-size: clamp(44px, 8vw, 104px); line-height: .98; margin:0;
    letter-spacing: -.01em;
  }
  .cta h2 em{ font-style:normal; color: var(--green); }
  .cta-btn{
    margin-top: 40px;
    display:inline-flex; align-items:center; gap:14px;
    font-family: var(--f-mono); font-size:12px; letter-spacing:.2em;
    text-transform:uppercase; color: var(--bg);
    background: var(--ink); border:none; border-radius:100px;
    padding: 17px 30px; cursor:pointer;
    transition: transform .35s var(--ease), background .35s var(--ease);
    text-decoration:none;
  }
  .cta-btn:hover{ transform: translateY(-2px); background: var(--green); }
  .cta-btn:focus-visible, .nav-menu:focus-visible, .nav-mark:focus-visible{
    outline: 2px solid var(--green); outline-offset: 4px;
  }
  .cta-note{
    margin-top: 22px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing:.14em;
    color: var(--ink-faint); text-transform: uppercase;
  }

  footer{
    position:relative; z-index:2;
    padding: 28px clamp(20px,4vw,48px) 34px;
    display:flex; justify-content:space-between; align-items:center;
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing:.14em;
    color: var(--ink-faint); text-transform:uppercase;
    background: var(--bg);
  }

  /* scroll cue on very first frame */
  .scroll-cue{
    position:absolute; z-index:6; bottom: clamp(20px,4vw,40px); right: clamp(20px,4vw,48px);
    display:flex; align-items:center; gap:10px;
    font-family: var(--f-mono); font-size:10.5px; letter-spacing:.2em; color: var(--ink-dim);
    opacity:0; transition: opacity .6s var(--ease) .3s;
  }
  .scroll-cue.on{ opacity:1; }
  .scroll-cue .bar{
    width:1px; height:26px; background: var(--line); position:relative; overflow:hidden;
  }
  .scroll-cue .bar::after{
    content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
    background: var(--green);
    animation: cue 1.8s ease-in-out infinite;
  }
  @keyframes cue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

  @media (prefers-reduced-motion: reduce){
    .scroll-cue .bar::after{ animation:none; }
    .cta-btn{ transition:none; }
  }

  @media (max-width: 720px){
    .phase{ justify-content:flex-end; padding-bottom: clamp(64px,13vh,120px); }
    .phase.align-left, .phase.align-right{ padding-left: 22px; padding-right:22px; align-items:center; text-align:center; }
    .phase p{ max-width: 34ch; }
    .glass-img{ height:min(58vh,520px); }
    .stage-vignette{
      background:
        linear-gradient(180deg, rgba(4,16,12,.6) 0%, rgba(4,16,12,0) 20%, rgba(4,16,12,.2) 55%, rgba(4,16,12,.88) 100%),
        radial-gradient(120% 70% at 50% 50%, rgba(4,16,12,0) 40%, rgba(4,16,12,.5) 100%);
    }
  }