:root{
    --surface:#EAF5F7;
    --shallow:#79C1D2;
    --mid:#12587A;
    --deep:#052539;
    --abyss:#020912;
    --sun:#F4D68F;
    --ink:#04151F;
    --bg:var(--surface);
    --fg:var(--ink);
    --p:0; /* scroll progress 0..1 */
    font-family:"Bricolage Grotesque",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--fg);
    transition:background-color .35s linear,color .35s linear;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  ::selection{background:var(--sun);color:var(--ink)}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--sun);outline-offset:4px}

  /* ---------- light caustics on the surface ---------- */
  .caustics{
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(60% 40% at 30% 0%,rgba(255,255,255,.7),transparent 70%),
      radial-gradient(40% 30% at 75% 10%,rgba(255,255,255,.45),transparent 70%);
    opacity:calc(1 - var(--p) * 2.2);
  }
  .rays{
    position:fixed;inset:-20% 0 0 0;pointer-events:none;z-index:0;
    background:repeating-linear-gradient(100deg,transparent 0 60px,rgba(255,255,255,.06) 60px 90px);
    opacity:calc(0.9 - var(--p) * 1.4);
    transform:translateY(calc(var(--p) * -40vh));
  }
  .particles{
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:
      radial-gradient(1px 1px at 12% 20%,rgba(255,255,255,.5),transparent),
      radial-gradient(1.5px 1.5px at 68% 35%,rgba(255,255,255,.4),transparent),
      radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.5),transparent),
      radial-gradient(1px 1px at 85% 80%,rgba(255,255,255,.35),transparent),
      radial-gradient(1.5px 1.5px at 25% 90%,rgba(255,255,255,.4),transparent),
      radial-gradient(1px 1px at 55% 10%,rgba(255,255,255,.45),transparent);
    background-size:100% 100%;
    opacity:calc(var(--p) * 1.6 - .3);
    transform:translateY(calc(var(--p) * -120px));
  }

  /* ---------- fixed chrome ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:20;
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 32px;font-size:14px;letter-spacing:.01em;
  }
  header .brand{font-weight:600;font-variation-settings:"wdth" 90}
  header nav a{text-decoration:none;opacity:.7;margin-left:26px}
  header nav a:hover{opacity:1}

  .gauge{
    position:fixed;right:32px;top:50%;transform:translateY(-50%);z-index:20;
    display:flex;flex-direction:column;align-items:flex-end;gap:10px;
    font-variant-numeric:tabular-nums;
  }
  .gauge .track{width:2px;height:180px;background:currentColor;opacity:.2;position:relative}
  .gauge .track i{
    position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;
    background:var(--sun);top:calc(var(--p) * 172px);
    box-shadow:0 0 0 4px rgba(244,214,143,.25);
  }
  .gauge .num{font-size:28px;font-weight:300;letter-spacing:-.02em;line-height:1}
  .gauge .num small{font-size:12px;opacity:.6;margin-left:2px;font-weight:500}

  /* ---------- photo backgrounds ---------- */
  section{position:relative;isolation:isolate;overflow:hidden}
  .bg{
    position:absolute;inset:-12% 0;z-index:-2;
    background-size:cover;background-position:center;
    will-change:transform;
    transform:translateY(var(--y,0));
  }
  .bg::after{ /* tint photo into the current depth colour */
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(to bottom,var(--bg) 0%,transparent 18%,transparent 82%,var(--bg) 100%),
      var(--bg);
    background-blend-mode:normal;
    opacity:var(--tint,.55);
    transition:background-color .35s linear;
  }
  .bg.left::after{
    background:
      linear-gradient(to right,var(--bg) 0%,var(--bg) 35%,transparent 100%),
      linear-gradient(to bottom,var(--bg) 0%,transparent 20%,transparent 80%,var(--bg) 100%);
    opacity:1;
  }
  .bg.left{opacity:.85}
  .grain{ /* keeps photos from looking flat under the tint */
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(80% 60% at 50% 50%,transparent,var(--bg));
    opacity:.35;
  }

  /* ---------- layout ---------- */
  .wrap{position:relative;z-index:1}
  section{padding:0 clamp(24px,7vw,120px)}
  .measure{max-width:38ch}
  h1,h2,h3{font-weight:300;letter-spacing:-.03em;line-height:1}
  h2{font-size:clamp(40px,7vw,104px);font-variation-settings:"opsz" 96}
  h3{font-size:clamp(26px,3.4vw,44px)}
  p{font-size:clamp(17px,1.35vw,21px);font-weight:350;opacity:.85;max-width:52ch}
  .lede{font-size:clamp(19px,1.7vw,26px);opacity:.9}

  /* ---------- hero ---------- */
  .hero{
    min-height:100vh;display:grid;align-content:center;
    grid-template-columns:1fr;gap:28px;padding-top:120px;padding-bottom:80px;
  }
  .hero h1{
    font-size:clamp(72px,16vw,240px);
    font-variation-settings:"opsz" 96,"wdth" 78;
    letter-spacing:-.05em;
    display:flex;flex-wrap:wrap;gap:0 .18em;
  }
  .hero h1 span{
    display:inline-block;
    animation:surface 1.6s cubic-bezier(.2,.8,.2,1) both;
    animation-delay:calc(var(--i) * 140ms);
  }
  @keyframes surface{
    from{transform:translateY(40%);opacity:0;filter:blur(8px)}
    to{transform:none;opacity:1;filter:none}
  }
  .hero .bg{--tint:.5;filter:saturate(.9)}
  .hero .bg::after{
    background:linear-gradient(to right,rgba(234,245,247,.92) 0%,rgba(234,245,247,.55) 55%,rgba(234,245,247,.15) 100%);
    opacity:1;
  }
  .hero .row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px}
  .breath{
    display:flex;align-items:center;gap:16px;font-size:14px;opacity:.75;
    animation:surface 1.2s .9s both;
  }
  .breath .ring{
    width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;
    position:relative;
  }
  .breath .ring::after{
    content:"";position:absolute;inset:6px;border-radius:50%;background:currentColor;opacity:.25;
    animation:inhale 8s ease-in-out infinite;
  }
  @keyframes inhale{0%,100%{transform:scale(.4)}50%{transform:scale(1)}}
  .scroll-hint{font-size:13px;opacity:.55;animation:surface 1.2s 1.2s both}

  /* ---------- pinned descent ---------- */
  .descent{height:420vh;position:relative;padding:0}
  .descent .stage{
    position:sticky;top:0;height:100vh;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    align-items:center;padding:0 clamp(24px,7vw,120px);gap:40px;
  }
  .descent{overflow:visible}
  .descent .stage{overflow:hidden;isolation:isolate}
  .descent .stage .bg{
    inset:0;
    transform:scale(calc(1 + var(--d) * .18));
    filter:brightness(calc(1 - var(--d) * .7)) saturate(calc(1 - var(--d) * .5));
    transition:none;
  }
  .descent .stage .bg::after{opacity:calc(.3 + var(--d) * .45)}
  .descent .big{
    font-size:clamp(90px,20vw,300px);font-weight:200;letter-spacing:-.06em;line-height:.9;
    font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 96,"wdth" 80;
  }
  .descent .big small{font-size:.28em;font-weight:400;letter-spacing:0;margin-left:.1em;opacity:.6}
  .descent .cap{margin-top:20px;font-size:15px;opacity:.6}
  .steps{position:relative;min-height:260px}
  .step{
    position:absolute;inset:0;
    opacity:0;transform:translateY(24px);
    transition:opacity .6s ease,transform .6s ease;
  }
  .step.on{opacity:1;transform:none}
  .step h3{margin-bottom:14px}

  /* the diver line */
  .line{position:absolute;left:50%;top:12vh;bottom:12vh;width:1px;background:currentColor;opacity:.15}
  .diver{
    position:absolute;left:50%;top:12vh;width:10px;height:10px;margin-left:-5px;border-radius:50%;
    background:var(--sun);box-shadow:0 0 30px 6px rgba(244,214,143,.35);
    transform:translateY(calc(var(--d) * (76vh)));
  }
  .diver::after{
    content:"";position:absolute;left:50%;bottom:100%;width:1px;height:60px;margin-left:-.5px;
    background:linear-gradient(to top,var(--sun),transparent);opacity:.7;
  }

  /* ---------- disciplines ---------- */
  .disciplines{padding-top:20vh;padding-bottom:20vh}
  .disciplines h2{margin-bottom:12px}
  .disciplines .lede{margin-bottom:64px}
  .disc{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 40px;
    padding:30px 0;border-top:1px solid rgba(255,255,255,.14);align-items:baseline;
  }
  .disc:last-of-type{border-bottom:1px solid rgba(255,255,255,.14)}
  .disc .name{font-size:clamp(22px,2.4vw,32px);font-weight:400;letter-spacing:-.02em}
  .disc .name em{font-style:normal;font-weight:200;opacity:.55;margin-left:.5em;font-size:.8em}
  .disc p{font-size:16px;opacity:.8}
  .disc .bar{grid-column:1/-1;height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
  .disc .bar i{display:block;height:100%;width:var(--w);background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
  .disc.seen .bar i{transform:none}
  .disc .depth{font-variant-numeric:tabular-nums;font-size:14px;opacity:.6;justify-self:end}
  .note{font-size:13px;opacity:.5;margin-top:20px}

  /* ---------- body / reflex ---------- */
  .reflex{min-height:100vh;display:grid;align-content:center;padding-top:16vh;padding-bottom:16vh}
  .reflex h2{max-width:14ch;margin-bottom:24px}
  .reflex .lede{margin-bottom:80px}
  .organs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:56px 40px}
  .organ h3{font-size:22px;font-weight:500;letter-spacing:-.01em;margin-bottom:10px}
  .organ p{font-size:16px}
  .organ .fig{
    font-size:clamp(44px,5vw,72px);font-weight:200;letter-spacing:-.04em;line-height:1;margin-bottom:14px;
    font-variant-numeric:tabular-nums;color:var(--sun);
  }
  .organ .fig small{font-size:.35em;opacity:.7;letter-spacing:0;font-weight:400}
  .reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.2,.8,.2,1)}
  .reveal.seen{clip-path:inset(0 0 0 0)}
  .organ:nth-child(2) .reveal{transition-delay:.12s}
  .organ:nth-child(3) .reveal{transition-delay:.24s}
  .organ:nth-child(4) .reveal{transition-delay:.36s}

  /* ---------- safety ---------- */
  .safety{min-height:100vh;display:grid;align-content:center;text-align:center;justify-items:center;padding-top:10vh;padding-bottom:10vh}
  .safety h2{font-size:clamp(48px,9vw,150px);letter-spacing:-.05em;font-variation-settings:"opsz" 96,"wdth" 82;margin-bottom:28px}
  .safety p{text-align:center;margin-inline:auto}
  .rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:64px;max-width:900px;width:100%;text-align:left}
  .rule{padding:22px 0;border-top:1px solid rgba(255,255,255,.18)}
  .rule strong{display:block;font-weight:500;margin-bottom:6px;font-size:17px}
  .rule span{font-size:15px;opacity:.7}

  /* ---------- ascent / footer ---------- */
  .ascent{min-height:80vh;display:grid;align-content:center;padding-top:12vh;padding-bottom:12vh}
  .ascent h2{margin-bottom:20px}
  .ascent p{margin-bottom:36px}
  .btn{
    display:inline-flex;align-items:center;gap:12px;
    padding:16px 26px;border-radius:999px;text-decoration:none;font-weight:500;font-size:16px;
    background:var(--sun);color:var(--ink);border:1.5px solid var(--sun);
  }
  .btn.ghost{background:transparent;color:inherit;border-color:rgba(255,255,255,.35);margin-left:12px}
  .btn:hover{filter:brightness(1.06)}
  footer{padding:40px clamp(24px,7vw,120px) 56px;font-size:13px;opacity:.55;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

  @media (max-width:820px){
    header nav{display:none}
    .gauge{right:18px}
    .gauge .track{height:120px}
    .gauge .track i{top:calc(var(--p) * 112px)}
    .gauge .num{font-size:20px}
    .descent .stage{grid-template-columns:1fr;align-content:center;gap:24px}
    .line,.diver{display:none}
    .steps{min-height:220px}
    .disc{grid-template-columns:1fr}
    .disc .depth{justify-self:start}
    .btn.ghost{margin-left:0;margin-top:12px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .step{opacity:1;position:static;transform:none;margin-bottom:32px}
    .steps{min-height:0}
    .descent{height:auto}
    .descent .stage{position:static;height:auto;padding-top:20vh;padding-bottom:20vh;align-items:start}
    .reveal{clip-path:none}
    .disc .bar i{transform:none}
  }

  .hero .enter{animation:surface 1.2s .6s both}