/* ==========================================================================
   Vertical Blue — shared stylesheet
   Brand: navy #3C5890, accent cyan #00B1EB, Roboto (wide tracking)
   ========================================================================== */

:root{
  --navy:#3C5890; --cyan:#00B1EB;
  --abyss:#050D1A; --deep:#0B1A2E; --mid:#122744;
  --ink:#fff; --muted:rgba(255,255,255,.55); --faint:rgba(255,255,255,.32);
  --rule:rgba(255,255,255,.12);
  --f:'Roboto',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--abyss);color:var(--ink);font-family:var(--f);font-weight:300;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
/* inline links inside body copy — subtle, cyan on hover */
.inlink{color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(0,177,235,.45);transition:color .2s,border-color .2s}
.inlink:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.mark{display:block;color:currentColor}

/* ---------------- nav (hairline) ---------------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:58px;
    display:flex;justify-content:space-between;align-items:center;padding:0 38px;
    background:linear-gradient(180deg,rgba(5,13,26,.72),rgba(5,13,26,.30) 70%,transparent);
    backdrop-filter:saturate(150%) blur(10px)}
nav.solid{background:rgba(5,13,26,.92);border-bottom:1px solid var(--rule)}
.navmark{display:flex;align-items:center;gap:14px;text-decoration:none}
/* The mark is 1.93:1 (wide). Both dimensions are set explicitly — `width:auto`
   is unreliable for an inline <svg> inside a flex row. */
.navmark .mark{height:30px;width:58px;flex:none}
.navmark span{font-size:10.5px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
              opacity:.95;white-space:nowrap}
.navlinks{display:flex;gap:32px;list-style:none}
.navlinks a{color:rgba(255,255,255,.78);text-decoration:none;font-size:10px;font-weight:500;
            letter-spacing:.22em;text-transform:uppercase;transition:color .3s}
.navlinks a:hover,.navlinks a.on{color:var(--cyan)}
/* Book stands apart from the nav items — it is the only action in the bar */
.navlinks a.booknav{background:var(--cyan);color:#02141f;padding:8px 18px;
                    border-radius:2px;transition:.3s}
.navlinks a.booknav:hover{background:#fff;color:#02141f}
/* Base state for the mobile menu button. This MUST come before the media
   query that switches it on — same specificity, so whichever is later wins. */
.navburger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 9px;background:none;border:none;cursor:pointer;
  margin-right:-9px}
.navburger span{display:block;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s}
.navburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navburger.open span:nth-child(2){opacity:0}
.navburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.navburger:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* seven items on one row need ~1070px; tighten the row before it collides */
@media(max-width:1150px){.navlinks{gap:20px}nav{padding:0 24px}}
@media(max-width:1040px){.navlinks{gap:15px}.navlinks a{font-size:9.5px;letter-spacing:.16em}}
/* seven items no longer fit below ~960px, so the row collapses there */
@media(max-width:960px){.navlinks{display:none}nav{padding:0 20px;height:52px}
  .navmark .mark{height:26px;width:50px}
  .navburger{display:flex}}

/* ---------------- mobile menu ----------------
   The nav row collapses at 860px; without this there is no navigation and no
   booking route on a phone at all. */

.mobilemenu{position:fixed;inset:52px 0 0;z-index:99;
  background:rgba(5,13,26,.98);backdrop-filter:saturate(150%) blur(12px);
  padding:clamp(28px,6vh,54px) 24px 40px;overflow-y:auto;
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .28s,transform .28s}
.mobilemenu.open{opacity:1;transform:none;pointer-events:auto}
.mobilemenu ul{list-style:none}
.mobilemenu li{border-bottom:1px solid var(--rule)}
.mobilemenu a{display:block;padding:20px 2px;text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.82);transition:color .2s}
.mobilemenu a:hover,.mobilemenu a.on{color:var(--cyan)}
.mobilemenu .mobilebook{margin-top:32px;text-align:center;color:#02141f;
  font-size:11px;letter-spacing:.24em;border-bottom:none}
.mobilemenu .mobilebook:hover{color:#02141f}
.msocials{display:flex;justify-content:center;gap:26px;margin-top:34px}
.msocials a{padding:8px;border-bottom:none;display:block}
.msocials svg{width:24px;height:24px;fill:rgba(255,255,255,.7);transition:fill .25s}
.msocials a:hover svg{fill:var(--cyan)}
body.menuopen{overflow:hidden}
@media(min-width:961px){.mobilemenu{display:none}}

/* ---------------- hero (home) ---------------- */
.hero{min-height:100vh;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:-3;
          background:url('diver-descent.jpg') 62% 40%/cover no-repeat}
.hero .scrim{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(100deg,rgba(4,10,20,.90) 0%,rgba(4,10,20,.60) 34%,rgba(4,10,20,.10) 62%,transparent 100%),
             linear-gradient(180deg,rgba(4,10,20,.55) 0%,transparent 26%,transparent 62%,rgba(4,10,20,.80) 100%)}
.heroinner{width:100%;max-width:1280px;margin:0 auto;
           padding:0 clamp(24px,5vw,64px) clamp(72px,11vh,124px)}
.herotext{max-width:660px}
h1{font-size:clamp(2rem,6.4vw,5.2rem);line-height:1;font-weight:100;letter-spacing:.17em;
   text-transform:uppercase;transform:scaleY(.86);transform-origin:left center}
h1 b{font-weight:300}
.rule{width:46px;height:1px;background:var(--cyan);margin:26px 0 24px}
.sub{font-size:clamp(.9rem,1.35vw,1.06rem);font-weight:300;color:rgba(255,255,255,.80);
     max-width:34ch;line-height:1.75;letter-spacing:.03em}
.herolinks{margin-top:38px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:700px){
  .hero .bg{background-position:68% 38%}
  .hero .scrim{background:linear-gradient(180deg,rgba(4,10,20,.55) 0%,transparent 30%,rgba(4,10,20,.88) 72%,rgba(4,10,20,.96) 100%)}
}

/* page header (interior pages) */
.pagehead{padding:clamp(120px,18vh,190px) 24px clamp(50px,8vh,80px);
          background:linear-gradient(180deg,#0d1f38,#050D1A)}
.pagehead .wrap{max-width:1120px;margin:0 auto}
.pagehead h1{font-size:clamp(1.8rem,5vw,3.6rem);transform:scaleY(.88)}

/* ---- method page opening frame -------------------------------------
   The divers sit in the right 45–82% of method-divers.jpg; the left of the
   frame is open water, so the copy goes there and the scrim only darkens
   that side. Bottom fade joins the band that follows.                  */
.pagehead.imghead{position:relative;overflow:hidden;background:var(--abyss);
  min-height:86vh;display:flex;align-items:center;
  padding:clamp(130px,17vh,180px) 24px clamp(70px,10vh,110px)}
.pagehead.imghead .bg{position:absolute;inset:0;z-index:0;
  background:url('method-divers.jpg') 18% center/cover no-repeat}
.pagehead.imghead .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg,rgba(3,9,20,.90) 0%,rgba(3,9,20,.72) 30%,
                                   rgba(3,9,20,.28) 52%,transparent 70%),
             linear-gradient(180deg,rgba(3,9,20,.70) 0%,transparent 24%,
                                   transparent 66%,rgba(5,13,26,.96) 100%)}
.pagehead.imghead .wrap{position:relative;z-index:2;width:100%}
.pagehead.imghead .headtext{max-width:470px}
.pagehead.imghead p{color:rgba(255,255,255,.80)}
/* credential strip — substantiates the "AIDA Instructor Trainer" claim on the courses page */
.creds{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:2.2}
.pagehead.imghead p.creds{color:rgba(255,255,255,.52)}
.pagehead.imghead .credit{position:absolute;right:20px;bottom:14px;z-index:2;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42)}
@media(max-width:820px){
  .pagehead.imghead{min-height:0;align-items:flex-start}
  .pagehead.imghead .bg{background-position:72% center}
  .pagehead.imghead .scrim{
    background:linear-gradient(180deg,rgba(3,9,20,.72) 0%,rgba(3,9,20,.58) 30%,
                                      rgba(3,9,20,.86) 62%,rgba(5,13,26,.97) 100%)}
  .pagehead.imghead .headtext{max-width:none}
}

/* ---------------- buttons ---------------- */
.lnk{display:inline-block;padding:13px 32px;border:1px solid rgba(255,255,255,.30);
     color:var(--ink);text-decoration:none;font-size:10.5px;font-weight:500;letter-spacing:.26em;
     text-transform:uppercase;transition:.35s}
.lnk:hover{border-color:var(--cyan);color:var(--cyan)}
.lnk.solid{background:var(--cyan);border-color:var(--cyan);color:#02141f}
.lnk.solid:hover{background:transparent;color:var(--cyan)}

/* ---------------- sections ---------------- */
section{padding:clamp(80px,12vh,150px) 24px;position:relative}
.wrap{max-width:1120px;margin:0 auto}
.narrow{max-width:820px}
.kicker{font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
        color:var(--cyan);margin-bottom:34px}
h2{font-size:clamp(1.45rem,3.8vw,2.7rem);line-height:1.2;font-weight:100;letter-spacing:.13em;
   text-transform:uppercase;max-width:20ch}
h2 b{font-weight:300}
h3{font-size:clamp(1rem,1.8vw,1.2rem);font-weight:400;letter-spacing:.16em;text-transform:uppercase;
   margin-bottom:14px}
p{font-size:clamp(.94rem,1.35vw,1.04rem);line-height:1.9;font-weight:300;color:var(--muted);
  max-width:62ch;margin-bottom:20px}
p strong{color:var(--ink);font-weight:400}
.lede{margin-top:30px}
.center{text-align:center}.center h2,.center p{margin-left:auto;margin-right:auto}
.band{background:linear-gradient(180deg,#050D1A 0%,#0d1f38 50%,#050D1A 100%)}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);
       border-bottom:1px solid var(--rule);max-width:1120px;margin:0 auto}
.stat{padding:50px 16px;text-align:center;border-right:1px solid var(--rule)}
.stat:last-child{border-right:none}
.stat .n{font-size:clamp(1.6rem,3.7vw,2.7rem);font-weight:100;letter-spacing:.05em;display:block}
.stat .n u{text-decoration:none;font-size:.38em;font-weight:300;letter-spacing:.12em}
.stat .l{margin-top:14px;font-size:10px;font-weight:500;letter-spacing:.30em;
         text-transform:uppercase;color:var(--faint)}
@media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--rule)}.stat:nth-child(2n){border-right:none}}

/* ---------------- photo band ---------------- */
.photoband{min-height:92vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;
           padding:0 0 clamp(64px,9vh,110px)}
.photoband .bg{position:absolute;inset:0;z-index:-2;
               background:url('blue-hole-up.jpg') 42% center/cover no-repeat}
/* ---- text on the bright (lagoon) side -------------------------------
   Measured contrast on that part of the aerial: white text 2.1:1 (fails),
   dark text 9.8:1. So this variant flips the type to dark and keeps the
   scrim off the middle of the frame so the lagoon stays bright.        */
.photoband.textright{align-items:center}
.photoband.textright .scrim{
  background:linear-gradient(180deg,rgba(5,13,26,.18) 0%,transparent 18%,
                                     transparent 66%,rgba(5,13,26,.93) 97%)}
.photoband.textright .wrap{display:flex;justify-content:flex-end}
.photoband.textright .textblock{max-width:470px}
.photoband.textright .kicker{color:var(--navy)}
.photoband.textright h2{color:var(--abyss)}
.photoband.textright p{color:rgba(5,13,26,.84)}
.photoband.textright .lnk{border-color:rgba(5,13,26,.45);color:var(--abyss)}
.photoband.textright .lnk:hover{border-color:var(--navy);color:var(--navy);
                                background:rgba(255,255,255,.35)}
@media(max-width:820px){
  .photoband.textright{align-items:flex-end}
  .photoband.textright .wrap{justify-content:flex-start}
  .photoband.textright .textblock{max-width:none}
  /* on narrow screens the lagoon is cropped out, so revert to light type */
  .photoband.textright .scrim{
    background:linear-gradient(180deg,rgba(4,10,20,.45) 0%,transparent 28%,
                                       rgba(4,10,20,.88) 70%,rgba(4,10,20,.97) 100%)}
  .photoband.textright .kicker{color:var(--cyan)}
  .photoband.textright h2{color:var(--ink)}
  .photoband.textright p{color:rgba(255,255,255,.78)}
  .photoband.textright .lnk{border-color:rgba(255,255,255,.30);color:var(--ink)}
}

/* image variants */
.photoband.aerial .bg{background-image:url('deans-aerial.jpg');background-position:center 42%}
.photoband.aerial-wide .bg{background-image:url('deans-aerial-wide.jpg');background-position:center 55%}
.photoband.aerial-top .bg{background-image:url('deans-aerial-top.jpg');background-position:center}
.photoband.below .bg{background-image:url('blue-hole-up.jpg')}
/* The diver hangs around 60-75% down the frame, where the shared scrim had
   already reached 60-72%. Hold the fade back through that band so the torso
   still reads, then close to near-solid for the copy at the foot. */
.photoband.below .scrim{
  background:linear-gradient(180deg,rgba(5,13,26,.30) 0%,transparent 24%,
                                    rgba(5,13,26,.30) 64%,rgba(5,13,26,.72) 84%,
                                    rgba(5,13,26,.95) 96%)}
/* ---- Students band ---------------------------------------------------
   Every part of this frame is bright — the darkest region still sits at
   p95 (152,170,166) — so the copy goes in the weighted bottom strip. The
   source is only 1024px, so it is held to a modest band height. */
/* The band is 2.5:1 against a 1.33:1 source, so `cover` leaves no horizontal
   freedom — the students sit where they sit and cannot be panned aside. At
   background-position 72% the dark water fills the top-left (luminance 22),
   so the copy goes up there and the students stay clear below it. */
.photoband.students{min-height:clamp(560px,74vh,720px);align-items:flex-start;
  padding:clamp(112px,15vh,168px) 0 clamp(40px,6vh,70px)}
.photoband.students .bg{background-image:url('students-band.jpg');
  background-position:center 72%}
.photoband.students .scrim{
  background:linear-gradient(180deg,rgba(5,13,26,.60) 0%,rgba(5,13,26,.46) 34%,
                                    rgba(5,13,26,.14) 58%,rgba(5,13,26,.06) 72%,
                                    rgba(5,13,26,.42) 92%,rgba(5,13,26,.92) 100%),
             linear-gradient(90deg,rgba(5,13,26,.42) 0%,rgba(5,13,26,.22) 40%,
                                   transparent 62%)}
.photoband.students .textblock{max-width:620px}
/* same reason as the dolphins band: cyan cannot carry over this much brightness */
.photoband.students .kicker{color:#fff}
.photoband.students p{color:rgba(255,255,255,.88)}
@media(max-width:820px){
  .photoband.students{min-height:clamp(480px,66vh,620px)}
  .photoband.students .textblock{max-width:none}
  .photoband.students .scrim{
    background:linear-gradient(180deg,rgba(5,13,26,.34) 0%,rgba(5,13,26,.16) 16%,
                                      rgba(5,13,26,.56) 40%,rgba(5,13,26,.90) 66%,
                                      rgba(5,13,26,.97) 100%)}
}

/* ---- Portrait band ---------------------------------------------------
   pool1.jpg mirrored so the gaze runs left into the copy, then 650px of its
   own near-black water added on the left to push the head off centre. The
   left of the frame is already very dark, so the scrim is barely needed. */
/* capped height: on a tall window a 92vh band goes narrow enough that
   `cover` crops the sides and eats the face */
.photoband.portrait{min-height:clamp(560px,92vh,800px);align-items:center}
.photoband.portrait .bg{background-image:url('portrait-wt.jpg');background-position:center}
.photoband.portrait .scrim{
  background:linear-gradient(90deg,rgba(4,10,20,.70) 0%,rgba(4,10,20,.52) 32%,
                                   rgba(4,10,20,.16) 50%,transparent 64%),
             linear-gradient(180deg,rgba(4,10,20,.62) 0%,transparent 20%,
                                    transparent 80%,rgba(5,13,26,.88) 100%)}
.photoband.portrait .textblock{max-width:560px}
.photoband.portrait p{color:rgba(255,255,255,.84)}
/* the default table greys are tuned for a flat background; over the photo the
   header at --faint drops to 2.9:1, so both rows are lifted here */
.photoband.portrait table{margin-top:30px}
.photoband.portrait th{color:rgba(255,255,255,.52)}
.photoband.portrait td{color:rgba(255,255,255,.80)}
.photoband.portrait th,.photoband.portrait td{border-bottom-color:rgba(255,255,255,.16)}
@media(max-width:900px){
  .photoband.portrait{min-height:0;align-items:flex-end;
    padding-top:clamp(280px,42vh,420px)}
  .photoband.portrait .bg{background-position:72% center}
  .photoband.portrait .textblock{max-width:none}
  .photoband.portrait .scrim{
    background:linear-gradient(180deg,rgba(4,10,20,.30) 0%,rgba(4,10,20,.20) 24%,
                                      rgba(4,10,20,.86) 46%,rgba(5,13,26,.96) 70%,
                                      rgba(5,13,26,.98) 100%)}
}

/* ---- Dolphins band ---------------------------------------------------
   The source frame has the swimmers across its middle, so 370px of water
   was mirrored in above them (approach-dolphins.jpg) to open up a text
   zone. The band runs taller than the viewport: at 86vh, `cover` crops so
   hard on a wide screen that the copy and the dolphins cannot both fit.
   That top water is bright — 4.7:1 raw against white — so the scrim only
   needs to be light, and the colour survives.                          */
/* The px floor matters: on a short window 115vh alone leaves the band so wide
   relative to its height that `cover` crops the subjects up into the copy. */
.photoband.dolphins{min-height:max(115vh,980px);align-items:flex-start;
  padding:clamp(120px,15vh,168px) 0 clamp(50px,7vh,80px)}
.photoband.dolphins .bg{background-image:url('approach-dolphins.jpg');
  background-position:center 42%}
.photoband.dolphins .scrim{
  background:linear-gradient(180deg,rgba(5,13,26,.56) 0%,rgba(5,13,26,.38) 20%,
                                    rgba(5,13,26,.36) 50%,rgba(5,13,26,.08) 66%,
                                    rgba(5,13,26,.30) 88%,rgba(5,13,26,.95) 100%)}
.photoband.dolphins .textblock{max-width:640px}
/* This water is bright. A scrim heavy enough to carry a cyan kicker (60%) would
   flatten it, so the kicker goes white here and the scrim stays light. */
.photoband.dolphins .kicker{color:#fff}
.photoband.dolphins h2{margin-bottom:26px}
.photoband.dolphins p{color:rgba(255,255,255,.90)}
@media(max-width:820px){
  .photoband.dolphins{min-height:96vh;padding-top:clamp(96px,13vh,130px)}
  .photoband.dolphins .textblock{max-width:none}
  .photoband.dolphins .scrim{
    background:linear-gradient(180deg,rgba(5,13,26,.76) 0%,rgba(5,13,26,.62) 34%,
                                      rgba(5,13,26,.22) 56%,rgba(5,13,26,.40) 82%,
                                      rgba(5,13,26,.96) 100%)}
}

/* ---------------- split (text + capped-width photo) -------------------
   Student photos are 1024px originals, so they are never allowed to run
   full-bleed — the column caps display width and keeps them sharp.        */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.split.flip .splittext{order:2}
.split img{width:100%;max-width:620px;height:auto;display:block}
.splittext h2{margin-bottom:24px}
.splittext p{margin-bottom:16px}
.photocap{margin-top:12px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
          color:rgba(255,255,255,.30)}
@media(max-width:820px){
  .split{grid-template-columns:1fr;gap:34px}
  .split.flip .splittext{order:0}
}
.photoband .scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(5,13,26,.30) 0%,transparent 22%,rgba(5,13,26,.55) 58%,rgba(5,13,26,.96) 92%)}
.photoband .wrap{padding:0 clamp(24px,5vw,64px);width:100%;max-width:1280px}
.photoband p{color:rgba(255,255,255,.78)}
.credit{position:absolute;right:14px;bottom:10px;font-size:9px;letter-spacing:.22em;
        text-transform:uppercase;color:rgba(255,255,255,.34)}

/* ---------------- course list ---------------- */
.course{display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:baseline;
        padding:29px 0;border-top:1px solid var(--rule);transition:.4s;text-decoration:none}
.course:last-of-type{border-bottom:1px solid var(--rule)}
.course:hover{padding-left:16px;border-color:var(--cyan)}
.course .nm{font-size:clamp(1rem,2.1vw,1.45rem);font-weight:300;letter-spacing:.18em;
            text-transform:uppercase}
.course .dur{font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
             color:var(--faint);white-space:nowrap}
.course .pr{font-size:clamp(.95rem,1.6vw,1.24rem);font-weight:100;letter-spacing:.07em;
            white-space:nowrap}
.course:hover .pr{color:var(--cyan)}
/* ---------------- course sub-lines: dates + transfer price ---------------- */
.course .cdates{display:block;margin-top:7px;font-size:10.5px;font-weight:500;letter-spacing:.22em;
                text-transform:uppercase;color:var(--cyan)}
.course .ptf{display:block;margin-top:7px;font-size:10px;font-weight:500;letter-spacing:.18em;
             text-transform:uppercase;color:var(--faint);white-space:nowrap}
.course .pr{text-align:right}
.course.extra .cdates{color:var(--faint)}

/* ---------------- 2027 season calendar ---------------- */
.cal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,34px);margin-top:6px}
.calmonth{min-width:0}
.calname{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
         color:rgba(255,255,255,.62);margin-bottom:12px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.calwd{font-size:10px;font-weight:500;letter-spacing:.08em;text-align:center;
       color:rgba(255,255,255,.26);padding-bottom:4px}
.calday{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
        font-size:clamp(9px,.85vw,11px);font-weight:300;color:rgba(255,255,255,.42);
        border-radius:2px;background:rgba(255,255,255,.035)}
.calday.out{background:none}
.c-beg {background:rgba(0,177,235,.85);  color:#02141f;font-weight:500}
.c-int {background:rgba(152,104,208,.88);color:#0d0418;font-weight:500}
.c-rest{background:rgba(255,255,255,.24);color:rgba(255,255,255,.62);font-weight:300}
.c-tc  {background:rgba(46,217,195,.85); color:#02141f;font-weight:500}
.c-inst{background:rgba(232,163,61,.88); color:#2a1a05;font-weight:500}
.callegend{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px}
.callegend .lg{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:500;
               letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.callegend .sw{width:22px;height:9px;border-radius:2px;display:inline-block}
.calnote{margin-top:18px;font-size:10px;font-weight:500;letter-spacing:.22em;
         text-transform:uppercase;color:var(--faint);max-width:none}
/* course days are links — make that discoverable */
a.calday{text-decoration:none;cursor:pointer;transition:.2s}
a.calday:hover{filter:brightness(1.18);transform:scale(1.12)}

/* book button under each course description */
.bookrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px;max-width:none}
.bookhint{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
          color:var(--faint)}
@media(max-width:900px){.cal{grid-template-columns:repeat(2,1fr);gap:26px}}
@media(max-width:460px){.cal{grid-template-columns:1fr}}

/* non-priced enquiry row at the foot of the course list */
.course.extra .nm{color:rgba(255,255,255,.80)}
.course.extra .pr{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
                  color:var(--cyan)}
@media(max-width:620px){.course{grid-template-columns:1fr auto;gap:5px}
  .course .dur{grid-column:1/-1;order:3}}

/* ---------------- dive-line motif beside the course detail ----------------
   A sticky SVG column: wavy surface, the dive line, the bottom plate, and a
   freediver whose position is driven by scroll progress (see site.js).      */
.dive{position:relative}
.divebody{position:relative;z-index:1}
/* sits between the body text (max 62ch) and the right-aligned price */
.divetrack{position:absolute;top:0;bottom:0;right:17%;width:120px;pointer-events:none;z-index:0}
.diveline{position:sticky;top:80px;height:min(82vh,880px);opacity:.42}
.diveline svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.diveline .surface{fill:none;stroke:rgba(0,177,235,.75);stroke-width:2.2;stroke-linecap:round;
                   vector-effect:non-scaling-stroke}
.diveline .surface2{fill:none;stroke:rgba(0,177,235,.35);stroke-width:1.6;stroke-linecap:round;
                    vector-effect:non-scaling-stroke}
.diveline .dline{stroke:rgba(255,255,255,.42);stroke-width:1.2;vector-effect:non-scaling-stroke}
.diveline .plate{fill:none;stroke:rgba(0,177,235,.7);stroke-width:2;vector-effect:non-scaling-stroke}
.diveline img{position:absolute;left:50%;top:0;width:70px;height:auto;
              transform:translate(-50%,26px);will-change:transform}
@media(max-width:1080px){.divetrack{right:10%}}
@media(max-width:900px){.divetrack{display:none}}
@media(prefers-reduced-motion:reduce){.diveline img{transition:none}}

/* course detail blocks */
.detail{padding:44px 0;border-top:1px solid var(--rule)}
.detail .top{display:flex;justify-content:space-between;align-items:baseline;
             flex-wrap:wrap;gap:12px;margin-bottom:18px}
.detail .price{font-size:1.3rem;font-weight:100;letter-spacing:.06em;color:var(--cyan)}
.detail .addon{border-left:1px solid rgba(0,177,235,.45);padding-left:20px;margin-top:22px;
               font-size:.92rem;color:rgba(255,255,255,.62)}

/* ---------------- SEAS ---------------- */
/* Four tiles, each with its own hue stepping from surface teal to depth violet.
   Hovering (or tapping / tabbing to) a tile swaps the panel beneath it. The panel
   is in normal flow with a reserved min-height, so nothing on the page jumps. */
.seas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);margin-top:50px}
.seastile{background:var(--deep);padding:40px 18px 34px;text-align:center;cursor:pointer;
          border:none;border-top:2px solid transparent;font-family:var(--f);display:block;width:100%;
          transition:background .3s,border-color .3s}
.seastile .k{display:block;font-size:clamp(1.7rem,4vw,2.8rem);font-weight:100;letter-spacing:.07em;
             color:var(--sc);transition:color .3s;line-height:1}
.seastile .v{display:block;margin-top:12px;font-size:clamp(.72rem,1.05vw,.82rem);font-weight:400;
             letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.seastile:hover,.seastile.on{background:var(--mid);border-top-color:var(--sc)}
.seastile:hover .v,.seastile.on .v{color:var(--ink)}
.seastile:focus-visible{outline:2px solid var(--sc);outline-offset:-2px}

/* the popout */
.seaspop{position:relative;margin-top:60px}
/* The marker is the courses-page diver, turned horizontal so he swims to the
   active tile. A plain <img> — a mask-over-fill needs an @supports guard that
   is easy to get wrong, and the art is already the pale silhouette we want. */
.seasarrow{position:absolute;top:-50px;left:0;width:116px;height:40px;
  object-fit:contain;pointer-events:none;opacity:.92;
  transform:translateX(-50%);
  transition:left .6s cubic-bezier(.32,.9,.28,1);
  animation:seasbob 3.2s ease-in-out infinite}
@keyframes seasbob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%    {transform:translateX(-50%) translateY(-4px)}}
.seascard{background:var(--mid);border:1px solid var(--rule);border-left:3px solid var(--cyan);
          padding:30px 34px;min-height:232px;opacity:1;
          transition:opacity .28s,border-left-color .3s}
.seascard.fade{opacity:0;transition:opacity .12s}
.seascard h3{margin-bottom:12px;color:var(--ink);letter-spacing:.2em}
.seascard em{font-style:italic;color:rgba(255,255,255,.92)}
.seascard p{max-width:none;color:rgba(255,255,255,.72);margin-bottom:16px}
.seascard p:last-child{margin-bottom:0}
@media(max-width:780px){
  .seas{grid-template-columns:repeat(2,1fr)}
  .seastile{padding:30px 12px 26px}
  .seascard{padding:24px 22px;min-height:0}
  .seasarrow{display:none}
}
@media(prefers-reduced-motion:reduce){.seasarrow,.seascard{transition:none}
  .seasarrow{animation:none}}

/* ---------------- framed statement ----------------
   A lone paragraph in its own section reads as an orphan. The frame and the
   label make it deliberate; the type stays exactly the site's body copy. */
.statement{position:relative;border:1px solid var(--rule);background:rgba(255,255,255,.02);
  padding:clamp(38px,4.6vw,54px) clamp(28px,4.4vw,58px)}
.statement::before{content:"";position:absolute;top:-1px;left:clamp(28px,4.4vw,58px);
  width:56px;height:2px;background:var(--cyan)}
.statement .kicker{margin-bottom:20px}
.statement p{margin:0;max-width:62ch}
/* .italic sets the body only — the kicker keeps its upright label styling */
.statement.italic p{font-style:italic}
@media(max-width:600px){.statement{padding:32px 22px}
  .statement::before{left:22px}}

/* ---------------- conditions grid ("Never current. Never waves.") -------
   Same hairline language as the stats bar: a small tracked qualifier over a
   large thin noun, so the six read as one block rather than a list. */
.nevers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.nevers div{background:var(--abyss);padding:clamp(24px,3vw,34px) clamp(16px,2.2vw,26px);
  transition:background .35s}
.nevers div:hover{background:var(--deep)}
/* two lines per cell: the qualifier, then the motif inline with the noun */
.nevers .q{display:block;font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:100;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.1;
  transform:scaleY(.92);transform-origin:left center;margin-bottom:11px}
.nevers .row{display:flex;align-items:center;gap:10px}
/* supporting, not decoration to be read first — small and dim */
.nevers .ico{width:26px;height:auto;flex:none;
  fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  opacity:.45;transition:opacity .35s}
.nevers div:hover .ico{opacity:.9}
.nevers .w{font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cyan);min-width:0}
@media(max-width:760px){
  .nevers{grid-template-columns:repeat(2,1fr)}
  .nevers div{padding:20px 14px}
  .nevers .ico{width:22px}
  .nevers .w{letter-spacing:.18em}
}

/* short-quote grid */
.quotegrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,46px);margin-top:8px}
.quotegrid .quote{margin-bottom:0}
@media(max-width:820px){.quotegrid{grid-template-columns:1fr}}

/* ---------------- quotes ---------------- */
.quote{border-left:1px solid var(--cyan);padding:6px 0 6px 30px;margin:0 0 44px}
.quote p{font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(255,255,255,.82);font-weight:300;
         line-height:1.85;font-style:italic}
.quote cite{display:block;margin-top:14px;font-size:10px;font-weight:500;letter-spacing:.26em;
            text-transform:uppercase;color:var(--faint);font-style:normal}

/* ---------------- tools ---------------- */
.tool{border:1px solid var(--rule);padding:clamp(26px,4vw,42px);margin-bottom:28px;background:var(--deep)}
.tool h3{color:var(--cyan)}
.timer{font-size:clamp(2.6rem,10vw,5rem);font-weight:100;letter-spacing:.06em;
       font-variant-numeric:tabular-nums;margin:18px 0 24px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
button{font-family:var(--f);cursor:pointer;padding:12px 26px;border:1px solid rgba(255,255,255,.30);
       background:transparent;color:var(--ink);font-size:10.5px;font-weight:500;letter-spacing:.24em;
       text-transform:uppercase;transition:.3s}
button:hover{border-color:var(--cyan);color:var(--cyan)}
button.primary{background:var(--cyan);border-color:var(--cyan);color:#02141f}
button.primary:hover{background:transparent;color:var(--cyan)}
.conv{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-bottom:16px}
.conv input{width:100%;padding:12px 14px;background:rgba(255,255,255,.05);border:1px solid var(--rule);
            color:var(--ink);font-family:var(--f);font-size:1rem;font-weight:300}
.conv input:focus{outline:none;border-color:var(--cyan)}
.conv span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.warn{border:1px solid rgba(255,180,0,.4);background:rgba(255,180,0,.06);padding:22px 26px;
      margin-bottom:28px}
.warn p{color:rgba(255,255,255,.8);margin:0;max-width:none;font-size:.94rem}
table{width:100%;border-collapse:collapse;margin-top:20px}
th,td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--rule);font-size:.92rem;
      font-weight:300}
th{font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
td{color:var(--muted)}

/* ---------------- deposit rows ---------------- */
.deps{margin-top:44px;border-top:1px solid var(--rule)}
.dep{display:grid;grid-template-columns:1fr auto;gap:20px 30px;align-items:center;
     padding:26px 0;border-bottom:1px solid var(--rule)}
.depname{display:block;font-size:clamp(1rem,2vw,1.3rem);font-weight:300;letter-spacing:.16em;
         text-transform:uppercase}
.depbal{display:block;margin-top:8px;font-size:10px;font-weight:500;letter-spacing:.22em;
        text-transform:uppercase;color:var(--faint)}
.depbtns{display:flex;gap:10px;flex-wrap:wrap}
.depbtns .lnk{padding:11px 22px;font-size:10px;letter-spacing:.2em;white-space:nowrap}
@media(max-width:700px){
  .dep{grid-template-columns:1fr;gap:16px}
  .depbtns .lnk{flex:1 1 auto;text-align:center}
}

/* ---------------- form ---------------- */
form{max-width:640px}
.field{margin-bottom:22px}
label{display:block;font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
      color:var(--faint);margin-bottom:9px}
input[type=text],input[type=email],select,textarea{
  width:100%;padding:13px 15px;background:rgba(255,255,255,.05);border:1px solid var(--rule);
  color:var(--ink);font-family:var(--f);font-size:1rem;font-weight:300}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan)}
textarea{min-height:150px;resize:vertical}
select option{background:var(--deep)}

/* ---------------- footer ---------------- */
footer{padding:70px 24px 46px;border-top:1px solid var(--rule);background:var(--abyss)}
.frow{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;
      flex-wrap:wrap;gap:30px}
.frow .mark{height:46px;width:89px;flex:none;opacity:.95}
.flinks{display:flex;gap:28px;flex-wrap:wrap;list-style:none}
.flinks a{color:rgba(255,255,255,.66);text-decoration:none;font-size:10px;font-weight:500;
          letter-spacing:.22em;text-transform:uppercase}
.flinks a:hover{color:var(--cyan)}
.archive{max-width:1120px;margin:40px auto 0;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.archive .alabel{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
                 color:rgba(255,255,255,.32)}
.archive a{color:rgba(255,255,255,.46);text-decoration:none;font-size:10px;letter-spacing:.16em}
.archive a:hover{color:var(--cyan)}
.copy{max-width:1120px;margin:36px auto 0;font-size:10px;letter-spacing:.14em;
      color:rgba(255,255,255,.38);text-transform:uppercase;line-height:2.1}

.reveal{opacity:0;transform:translateY(20px);
        transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------------- social icons (footer) ---------------- */
.fsocials{display:flex;gap:18px;align-items:center;margin-left:auto}
.fsocials a{display:block;padding:4px}
.fsocials svg{width:19px;height:19px;fill:rgba(255,255,255,.55);transition:fill .25s;display:block}
.fsocials a:hover svg{fill:var(--cyan)}
@media(max-width:820px){.fsocials{margin:22px auto 0}}

/* ---------------- VB Event page ----------------
   The diver silhouette occupies x 38-52%. Both outer thirds are dark rock and
   water (luminance 13-31), so the lockup goes hard left and the quote hard
   right, and nothing lands on top of him. */
.eventwrap{min-height:100vh;position:relative;display:flex;align-items:flex-end;
  overflow:hidden;padding:0 0 clamp(46px,7vh,86px)}
.eventwrap .bg{position:absolute;inset:0;z-index:0;
  background:url('event-2027.jpg') center 30%/cover no-repeat}
.eventwrap .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(5,13,26,.42) 0%,rgba(5,13,26,.08) 20%,
                                    rgba(5,13,26,.22) 48%,rgba(5,13,26,.72) 72%,
                                    rgba(5,13,26,.95) 100%)}
.eventwrap .wrap{position:relative;z-index:2;width:100%;max-width:1440px;
  margin:0 auto;padding:0 clamp(20px,3.4vw,46px)}

/* One stacked block against the right edge. The diver silhouette sits at
   x 38-52% and the right of the frame is dark rock (luminance 10-21), so the
   whole lockup clears him and reads white without extra scrim. */
.eventrow{display:flex;justify-content:flex-end}
.eventside{flex:none;text-align:center}
.eventlock{display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.2vw,28px)}
/* mark sized so its height matches the cap height of 2027, not the full em */
.eventlock .mark{width:clamp(46px,6.9vw,104px);height:auto;color:#fff;flex:none}
.eventyear{font-size:clamp(2rem,6vw,4.6rem);font-weight:100;letter-spacing:.1em;
  line-height:1;transform:scaleY(.88)}
/* same face and weight as 2027, italic and much smaller */
.eventquote{margin:clamp(18px,2.6vh,28px) auto 0;max-width:min(430px,80vw);
  font-style:italic;font-weight:300;font-size:clamp(.85rem,1.3vw,1.08rem);
  line-height:1.5;letter-spacing:.07em;color:rgba(255,255,255,.92)}
.eventload{margin:clamp(20px,3vh,32px) 0 0;text-align:center;font-size:11px;
  font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--cyan)}

.eventarchive{margin-top:clamp(38px,5.5vh,66px);padding-top:26px;
  border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 22px;align-items:center}
.eventarchive .alabel{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);width:100%;margin-bottom:4px;text-align:center}
.eventarchive a{color:rgba(255,255,255,.62);text-decoration:none;font-size:11px;
  font-weight:500;letter-spacing:.16em;transition:color .25s}
.eventarchive a:hover{color:var(--cyan)}

/* Phones: the frame is 1.33:1 against a ~0.46:1 viewport, so it scales to fit
   the height and the diver fills the screen top to bottom — there is no dark
   band left to put the lockup on. So the photo becomes a fixed top panel and
   the text runs underneath it on solid abyss. No overlap at any height. */
@media(max-width:820px){
  .eventwrap{display:block;min-height:100vh;background:var(--abyss);
    padding:calc(54vh + clamp(26px,4vh,40px)) 0 clamp(34px,5vh,54px)}
  .eventwrap .bg{bottom:auto;height:54vh;background-position:center center}
  .eventwrap .scrim{bottom:auto;height:54vh;
    background:linear-gradient(180deg,rgba(5,13,26,.34) 0%,transparent 22%,
                                      transparent 62%,rgba(5,13,26,.72) 88%,
                                      var(--abyss) 100%)}
  .eventrow{justify-content:center}
  .eventlock{flex-direction:column;gap:12px}
  .eventarchive{margin-top:clamp(28px,4vh,40px)}
}