/* ══════════════════════════════════════════════════════════════
   Eudaimonia by Ena
   Palette read off an atoll cross-section: deep water → reef →
   lagoon → shallow wash → dry sand. The page descends through it.
   ══════════════════════════════════════════════════════════════ */

:root{
  --abyss:#052B4A;
  --deep:#0A3F5C;
  --reef:#0E6E84;
  --lagoon:#7FD4DC;
  --shallow:#DFF4F2;
  --sand:#F3EBDD;
  --shell:#FCFAF6;
  --coral:#D9603B;

  --ink:var(--abyss);
  --ink-2:#3C6076;
  --line:rgba(5,43,74,.16);
  --line-light:rgba(255,255,255,.24);

  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --body:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --wrap:1160px;
  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --pad:clamp(4.5rem, 9vw, 9rem);
  --ease:cubic-bezier(.22,.7,.3,1);
  --shadow:0 30px 60px -34px rgba(5,43,74,.55);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .16vw,1.06rem);
  line-height:1.68;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}

:focus-visible{
  outline:2px solid var(--reef);
  outline-offset:3px;
  border-radius:2px;
}
.sec-dates :focus-visible,
.sec-gallery :focus-visible,
.cta :focus-visible,
.footer :focus-visible,
.lb :focus-visible{outline-color:var(--lagoon)}

.wrap{width:min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline:auto}
.sec{padding-block:var(--pad); position:relative}

.skip{position:absolute; left:-9999px; top:0; z-index:300; background:var(--abyss); color:#fff; padding:.8rem 1.3rem}
.skip:focus{left:1rem; top:1rem}

.mono{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:400;
}

/* ── type ───────────────────────────────────────────────── */
.h2{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-variation-settings:'SOFT' 34,'WONK' 1;
  font-weight:400;
  font-size:clamp(2.1rem,1.35rem + 3.2vw,3.9rem);
  line-height:1.05;
  letter-spacing:-.018em;
  margin:0;
  max-width:24ch;
  text-wrap:balance;
}
.h2 em{font-style:italic; color:var(--reef)}
.sec-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head-light .h2{color:var(--shell)}
.sec-head-light .h2 em{color:var(--lagoon)}
.sec-head-light .eyebrow{color:var(--lagoon)}
.sec-head-light .eyebrow-rule{background:currentColor}

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--reef); margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow-rule{display:block; width:34px; height:1px; background:currentColor; opacity:.6; flex:none}
.sec-note{margin:1.2rem 0 0; color:rgba(223,244,242,.72); font-size:.95rem; max-width:42ch}

/* ── buttons & links ────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:currentColor; --bd:currentColor;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-size:.82rem; font-weight:500; letter-spacing:.02em;
  padding:.95rem 1.9rem; border-radius:2px; text-decoration:none; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-light{--bg:var(--shell); --fg:var(--abyss); --bd:var(--shell)}
.btn-light:hover{--bg:var(--lagoon); --bd:var(--lagoon)}
.btn-dark{--bg:var(--abyss); --fg:var(--shell); --bd:var(--abyss)}
.btn-dark:hover{--bg:var(--reef); --bd:var(--reef)}
.btn-plain{
  --bd:transparent; --fg:var(--shell);
  padding-inline:.4rem; position:relative;
}
.btn-plain::after{
  content:''; position:absolute; left:.4rem; right:.4rem; bottom:.75rem; height:1px;
  background:currentColor; opacity:.5; transform-origin:left;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.btn-plain:hover::after{opacity:1; transform:scaleX(1.02)}

.arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--reef); text-decoration:none;
}
.arrow::after{
  content:''; width:22px; height:1px; background:currentColor;
  transition:width .35s var(--ease);
}
.arrow:hover::after{width:34px}

/* ══════════════════ depth rail ══════════════════ */
.depth-bar{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:transparent; pointer-events:none;
}
.depth-bar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--lagoon),var(--reef));
  transition:width .1s linear;
}

.rail{position:fixed; left:36px; top:0; height:100vh; z-index:110; display:none}
.rail-line{
  position:absolute; left:8px; top:14vh; bottom:14vh; width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}
.rail.on-dark .rail-line{background:linear-gradient(180deg,transparent,rgba(255,255,255,.28) 12%,rgba(255,255,255,.28) 88%,transparent)}
.rail ul{
  list-style:none; margin:0; padding:0;
  position:absolute; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:1.4rem;
}
.rail a{
  display:flex; align-items:center; gap:.7rem; text-decoration:none;
  color:var(--ink-2); opacity:.6; transition:opacity .3s var(--ease), color .3s var(--ease);
}
.rail.on-dark a{color:rgba(255,255,255,.8)}
.rail-tick{width:17px; height:1px; background:currentColor; flex:none; transition:width .35s var(--ease)}
.rail-d{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
  min-width:1.6em; opacity:.8;
}
.rail-label{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; opacity:0; transform:translateX(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.rail a:hover{opacity:1}
.rail a:hover .rail-label{opacity:.75; transform:none}
.rail a.is-here{opacity:1; color:var(--reef)}
.rail.on-dark a.is-here{color:var(--lagoon)}
.rail a.is-here .rail-tick{width:30px}
.rail a.is-here .rail-label{opacity:1; transform:none}

/* ══════════════════ header ══════════════════ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:130;
  padding-block:1.1rem;
  transition:background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
.header.is-stuck{
  background:rgba(252,250,246,.9);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 var(--line);
  padding-block:.7rem;
}
.header-in{
  width:min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--shell)}
.header.is-stuck .brand{color:var(--abyss)}
.brand-glyph{width:26px; height:26px; flex:none}
.brand-name{
  font-family:var(--display); font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:1.22rem; letter-spacing:.01em; line-height:1;
  display:flex; align-items:baseline; gap:.5rem;
}
.brand-by{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7}

.nav{display:flex; align-items:center; gap:1.75rem}
.nav > a{
  text-decoration:none; color:var(--shell);
  font-size:.85rem; position:relative; padding-block:.3rem;
  transition:color .35s var(--ease);
}
.header.is-stuck .nav > a{color:var(--ink)}
.nav > a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav > a:not(.nav-cta):hover::after,
.nav > a.is-here::after{transform:scaleX(1); transform-origin:left}
.nav .nav-cta{
  border:1px solid currentColor; border-radius:2px; padding:.6rem 1.15rem;
  font-size:.8rem; transition:background .3s var(--ease), color .3s var(--ease);
}
.nav .nav-cta:hover{background:var(--shell); color:var(--abyss); border-color:var(--shell)}
.header.is-stuck .nav .nav-cta:hover{background:var(--abyss); color:var(--shell); border-color:var(--abyss)}
.nav-foot{display:none}

.burger{display:none; background:none; border:0; padding:.6rem .2rem; cursor:pointer}
.burger span{display:block; width:26px; height:1.5px; background:var(--shell); transition:.35s var(--ease)}
.burger span + span{margin-top:7px}
.header.is-stuck .burger span{background:var(--abyss)}
.burger[aria-expanded="true"] span{background:var(--abyss)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}

/* ══════════════════ hero ══════════════════ */
.hero{
  position:relative; min-height:100svh; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(3rem,6vw,5rem); overflow:hidden;
}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-video,.hero-still{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-still{background:url('assets/img/hero-poster.jpg') center/cover no-repeat}
/* the still stays put underneath — the video only ever fades in over it,
   so a slow or unsupported video can never leave the hero blank */
.hero-video{opacity:0; transition:opacity 1.4s var(--ease)}
.hero.video-on .hero-video{opacity:1}
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,rgba(5,43,74,.5) 0%,rgba(5,43,74,.14) 24%,rgba(5,43,74,.42) 58%,rgba(5,43,74,.85) 100%),
    linear-gradient(100deg,rgba(5,43,74,.72) 0%,rgba(5,43,74,.34) 42%,rgba(5,43,74,0) 72%);
}
.hero-in{color:var(--shell); padding-top:8rem}
.hero-eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 1.4rem; color:var(--lagoon);
}
.hero-title{
  font-family:var(--display);
  font-variation-settings:'SOFT' 34,'WONK' 1;
  font-weight:300;
  font-size:clamp(3.2rem,1.4rem + 8.2vw,7.4rem);
  line-height:.92; letter-spacing:-.03em;
  margin:0 0 1.8rem; max-width:14ch;
}
.hero-title span{display:block}
.hero-copy{max-width:46ch; font-size:clamp(1rem,.95rem + .3vw,1.13rem)}
.hero-copy p{margin:0 0 .9rem; color:rgba(252,250,246,.9)}
.hero-line{
  font-family:var(--display); font-style:italic; font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:1.35em; line-height:1.3; color:var(--shell) !important; margin-top:1.4rem !important;
}
.hero-actions{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:2.4rem}

.hero-foot{
  width:min(100% - (var(--gutter) * 2), var(--wrap)); margin:3.5rem auto 0;
  display:flex; gap:1.6rem; flex-wrap:wrap; align-items:center;
  padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.22);
  color:rgba(252,250,246,.72);
}
.hero-foot .mono{font-size:.68rem}
.hero-foot-end{margin-left:auto; color:var(--lagoon)}

/* ══════════════════ story ══════════════════ */
.sec-story{background:var(--shell)}
.story-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  column-gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.sec-story .sec-head{grid-column:1; margin-bottom:2.5rem}
.story-fig{grid-column:2; grid-row:1 / span 2; margin:0; position:sticky; top:110px}
.story-fig img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px}
.story-fig figcaption{
  margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.35rem;
}
.sig{
  font-family:var(--display); font-style:italic; font-variation-settings:'SOFT' 60,'WONK' 1;
  font-size:1.5rem; line-height:1;
}
.story-fig .mono{color:var(--ink-2); font-size:.64rem}

.story-body{grid-column:1}
.story-body p{margin:0 0 1.15rem; max-width:60ch; color:#264A63}
.story-body b{font-weight:600; color:var(--ink)}
.story-lead{
  font-family:var(--display); font-variation-settings:'SOFT' 34,'WONK' 1;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); line-height:1.35;
  color:var(--ink) !important; margin-bottom:1.8rem !important;
}
.term{
  font-family:var(--display); font-style:italic; font-size:1.1em;
  border-bottom:1px solid var(--lagoon); padding-bottom:1px;
}
.story-pull{
  margin:2.4rem 0 0; padding:1.6rem 0 0; border-top:1px solid var(--line);
  font-family:var(--display); font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem); line-height:1.3; letter-spacing:-.01em;
  max-width:24ch;
}

/* ══════════════════ trips ══════════════════ */
.sec-trips{background:var(--sand)}
.trips-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(1.4rem,3vw,2.2rem)}
.trip{display:flex; flex-direction:column; background:var(--shell); border-radius:2px; overflow:hidden}
.trip-media{position:relative; overflow:hidden; aspect-ratio:4/5}
.trip-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.trip:hover .trip-media img{transform:scale(1.05)}
.trip-tag{
  position:absolute; left:1rem; top:1rem;
  background:rgba(5,43,74,.72); color:var(--shell);
  padding:.4rem .7rem; border-radius:2px; backdrop-filter:blur(6px);
  font-size:.62rem;
}
.trip-body{padding:1.7rem 1.6rem 1.8rem; display:flex; flex-direction:column; gap:1rem; flex:1}
.trip-body h3{
  font-family:var(--display); font-variation-settings:'SOFT' 34,'WONK' 1;
  font-weight:400; font-size:1.75rem; line-height:1.1; letter-spacing:-.015em; margin:0;
}
.trip-body p{margin:0; font-size:.94rem; color:#26495F}
.trip-meta{display:flex; gap:2rem; margin:.2rem 0 0; padding-top:1rem; border-top:1px solid var(--line)}
.trip-meta dt{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.trip-meta dd{margin:.25rem 0 0; font-size:.92rem; font-weight:500}
.trip .arrow{margin-top:auto}

/* ══════════════════ dates ══════════════════ */
.sec-dates{isolation:isolate; overflow:hidden}
.dates-bg{
  position:absolute; inset:0; z-index:-2;
  background:var(--deep) center/cover no-repeat;
}
.dates-bg.bg-on{background-image:url('assets/img/dates-bg.jpg')}
.sec-dates::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(5,43,74,.9),rgba(5,43,74,.74) 40%,rgba(5,43,74,.92));
}
.dates-in{color:var(--shell)}

.filters{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.8rem}
.chip{
  background:transparent; border:1px solid rgba(255,255,255,.3); color:rgba(252,250,246,.82);
  border-radius:999px; padding:.5rem 1.05rem; cursor:pointer; font-size:.85rem;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover{border-color:var(--lagoon); color:var(--shell)}
.chip.is-on{background:var(--shell); border-color:var(--shell); color:var(--abyss)}
.chip-n{font-family:var(--mono); font-size:.64rem; opacity:.6}

.dates-list{list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.18)}
.drow{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center; gap:clamp(1rem,3vw,2.4rem);
  padding:1.15rem .4rem;
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.drow:hover{background:rgba(255,255,255,.06); padding-left:1rem}
.drow.is-out{display:none}
.drow-cal{display:flex; align-items:baseline; gap:.6rem; min-width:9.5rem}
.drow-cal b{font-size:.7rem; color:var(--lagoon); font-weight:400}
.drow-cal i{
  font-family:var(--display); font-style:normal; font-variation-settings:'SOFT' 34,'WONK' 1;
  font-size:1.7rem; letter-spacing:-.02em; line-height:1;
}
.drow-cal u{font-size:.64rem; text-decoration:none; opacity:.55}
.drow-main{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.drow-name{font-size:1.05rem; font-weight:500}
.drow-sub{font-size:.64rem; color:rgba(252,250,246,.6)}
.state{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:2px; white-space:nowrap;
}
.state.ok{border:1px solid rgba(255,255,255,.3); color:rgba(252,250,246,.8)}
.state.low{background:var(--coral); color:#fff}
.state.out{border:1px solid rgba(255,255,255,.22); color:rgba(252,250,246,.5)}
.drow.is-out .drow-cal i,.drow.is-out .drow-name{opacity:.55}
.drow.is-out .drow-cal{text-decoration:line-through; text-decoration-thickness:1px; text-underline-offset:2px}
.drow-go{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:.2rem;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.drow-go:hover{color:var(--lagoon); border-color:var(--lagoon)}
.dates-note{margin:1.8rem 0 0; color:rgba(252,250,246,.72); font-size:.95rem}
.dates-note a{color:var(--lagoon); text-underline-offset:4px}

/* ══════════════════ gallery ══════════════════ */
.sec-gallery{background:var(--abyss); padding-bottom:calc(var(--pad) * .8)}
/* A mosaic that still ends flush. 36 tiles: 2 at 2×2, 6 at 2×1, 28 at 1×1
   — 48 cells in total, and 48 divides by 8, 6 and 4, the column counts used
   above 520px. Below that the spans are dropped and 36 ÷ 3 works out on its
   own. Change any of those numbers and the last row goes ragged again. */
.grid-photos{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  /* an explicit row height is what keeps every row the same: a tile that spans
     two rows has nothing of its own to be measured by */
  grid-auto-rows:min(12vw,240px);
  grid-auto-flow:dense;
  gap:4px;
  padding-inline:4px;
}
.shot{
  margin:0; position:relative; overflow:hidden; cursor:zoom-in;
  background:var(--deep);
}
.shot.is-wide{grid-column:span 2}
.shot.is-big{grid-column:span 2; grid-row:span 2}
.shot img,.shot video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease), opacity .5s var(--ease);
  opacity:.92;
}
.shot::after{
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(127,212,220,0);
  transition:box-shadow .35s var(--ease);
  pointer-events:none;
}
.shot:hover img,.shot:focus-visible img{transform:scale(1.06); opacity:1}
/* a clip tile stacks its still under the video; the video fades in when it
   starts, so a tile is never blank and works with scripting off */
.is-clip .clip-still{position:absolute; inset:0; opacity:1}
.is-clip video{position:absolute; inset:0; opacity:0; transition:opacity .55s var(--ease)}
.is-clip video.is-live{opacity:1}
.shot:hover .clip-still,.shot:focus-visible .clip-still{transform:scale(1.06)}
.shot:hover::after{box-shadow:inset 0 0 0 2px var(--lagoon)}

/* ══════════════════ reviews ══════════════════ */
.sec-reviews{background:var(--shallow)}
.rev-shell{position:relative}
.rev-shell{--rev-gap:clamp(1rem,2.5vw,1.8rem)}
.rev-track{
  display:flex; gap:var(--rev-gap);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:.4rem;
}
.rev-track::-webkit-scrollbar{display:none}
.rev{
  flex:0 0 100%; scroll-snap-align:start;
  background:var(--shell); border-radius:2px;
  padding:clamp(1.8rem,4vw,2.8rem);
  display:flex; flex-direction:column;
}
.rev.just{animation:revIn .5s var(--ease)}
@keyframes revIn{from{opacity:.2; transform:translateY(10px)} to{opacity:1; transform:none}}
.rev-hook{
  font-family:var(--display); font-variation-settings:'SOFT' 40,'WONK' 1;
  font-weight:400; font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem);
  line-height:1.22; letter-spacing:-.015em; margin:0 0 1.4rem; text-wrap:balance;
}
.rev-text{color:#2A4E65; font-size:.95rem}
.rev-text p{margin:0 0 .9rem}
.rev-by{
  margin:auto 0 0; padding-top:1.3rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--reef);
}
.rev-bar{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:1.6rem}
.rev-dots{display:flex; gap:.5rem}
.rev-dots button{
  width:26px; height:3px; border:0; padding:0; border-radius:2px; cursor:pointer;
  background:rgba(5,43,74,.2); transition:background .3s var(--ease), width .3s var(--ease);
}
.rev-dots button.is-on{background:var(--reef); width:44px}
.rev-arrows{display:flex; gap:.5rem}
.rev-btn{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line);
  display:grid; place-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.rev-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.rev-btn:hover{background:var(--abyss); border-color:var(--abyss); color:var(--shell)}
.rev-btn[disabled]{opacity:.3; cursor:default}
.rev-btn[disabled]:hover{background:transparent; border-color:var(--line); color:inherit}

/* ══════════════════ CTA ══════════════════ */
.cta{position:relative; isolation:isolate; display:grid; align-items:center; min-height:min(72vh,620px); overflow:hidden}
.cta-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.cta-veil{position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,43,74,.82),rgba(5,43,74,.34) 70%)}
.cta-in{color:var(--shell); padding-block:clamp(4rem,8vw,6rem)}
.cta-in .h2{margin-bottom:2.2rem; max-width:16ch}
.cta-in .h2 em{color:var(--lagoon); font-style:italic}

/* ══════════════════ contact ══════════════════ */
.sec-contact{background:var(--shell)}
.sec-contact .h2{font-size:clamp(2rem,1.4rem + 2.1vw,3.1rem)}
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2.5rem,6vw,5rem); align-items:start}
.contact-lead{max-width:38ch; color:#26495F; margin:0 0 2.4rem}
.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.5rem}
.contact-list li{display:flex; flex-direction:column; gap:.45rem}
.ci-k{color:var(--ink-2); font-size:.64rem}
.ci-row{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
.ci-row > a{
  font-family:var(--display); font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:1.35rem; text-decoration:none; letter-spacing:-.01em;
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease)
}
.ci-row > a:hover{border-color:var(--reef)}
.copy{
  background:none; border:1px solid var(--line); border-radius:2px; cursor:pointer;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.32rem .6rem; color:var(--ink-2);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.copy:hover{background:var(--abyss); border-color:var(--abyss); color:var(--shell)}
.socials{gap:1.4rem}
.soc{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-size:.92rem; border-bottom:1px solid var(--line); padding-bottom:.3rem;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.soc svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4}
.soc:hover{color:var(--reef); border-color:var(--reef)}

.form-card{background:var(--sand); border-radius:2px; padding:clamp(1.6rem,3.5vw,2.4rem)}
.form-title{
  font-family:var(--display); font-variation-settings:'SOFT' 34,'WONK' 1;
  font-size:1.4rem; margin:0 0 1.5rem; letter-spacing:-.01em;
}
.f{display:flex; flex-direction:column; margin-bottom:1.1rem}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.f label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:.5rem; display:flex; gap:.4rem; align-items:baseline;
}
.f label i{color:var(--coral); font-style:normal}
.opt{text-transform:none; letter-spacing:0; opacity:.6; font-size:.66rem}
.f input,.f textarea,.sel select{
  font-family:var(--body); font-size:.95rem; color:var(--ink);
  background:var(--shell); border:1px solid var(--line); border-radius:2px;
  padding:.8rem .9rem; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.f textarea{resize:vertical; min-height:118px}
.f input::placeholder,.f textarea::placeholder{color:#8AA3B3}
.f input:focus,.f textarea:focus,.sel select:focus{
  outline:none; border-color:var(--reef); box-shadow:0 0 0 3px rgba(14,110,132,.14);
}
.f input[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:var(--coral); background:#FFF6F2}
.err{
  color:var(--coral); font-size:.76rem; margin-top:.4rem; min-height:0;
  opacity:0; transition:opacity .2s var(--ease);
}
.err.on{opacity:1}
.sel{position:relative}
.sel select{appearance:none; padding-right:2.4rem; cursor:pointer}
.sel svg{
  position:absolute; right:.85rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; fill:none; stroke:var(--ink-2); stroke-width:1.5; pointer-events:none;
}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-card .btn{width:100%; margin-top:.4rem}
.form-note{font-size:.76rem; color:var(--ink-2); margin:.9rem 0 0; text-align:center}

.form-alert{
  margin:0 0 1.4rem; padding:.85rem 1rem; border-radius:2px;
  background:#FDEDE7; border-left:3px solid var(--coral); color:#8C3A1C; font-size:.88rem;
}
.form-alert a{color:inherit}
.form-done{text-align:center; padding:1.5rem 0}
.form-done .arrow{justify-content:center}
.form-done svg{
  width:44px; height:44px; margin:0 auto 1.2rem;
  fill:none; stroke:var(--reef); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.form-done p{margin:0 0 1rem; color:#26495F}
.form-done .form-title{margin-bottom:.8rem}
.form-done .arrow{margin-top:.6rem}

/* ══════════════════ footer ══════════════════ */
.footer{position:relative; isolation:isolate; color:var(--shell); overflow:hidden}
.footer-bg{
  position:absolute; inset:0; z-index:-2;
  background:var(--deep) center 35%/cover no-repeat;
}
.footer-bg.bg-on{background-image:url('assets/img/footer-bg.jpg')}
.footer::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(5,43,74,.72),rgba(5,43,74,.9));
}
.footer-in{padding-block:clamp(4rem,8vw,7rem) 2.5rem}
.footer-line{
  font-family:var(--display); font-style:italic; font-variation-settings:'SOFT' 60,'WONK' 1;
  font-size:clamp(2rem,1.3rem + 3vw,3.4rem); line-height:1.05; letter-spacing:-.02em;
  margin:0 0 3rem; max-width:16ch;
}
.footer-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2.2rem;
  padding-top:2.2rem; border-top:1px solid var(--line-light);
}
.footer-cols p{margin:0 0 .5rem; font-size:.92rem; color:rgba(252,250,246,.82)}
.footer-cols .ci-k{color:var(--lagoon)}
.footer-cols a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28)}
.footer-cols a:hover{border-color:var(--lagoon); color:var(--lagoon)}
.footer-nav{display:flex; flex-direction:column; gap:.5rem; align-items:flex-start}
.footer-nav a{font-size:.92rem; border-bottom-color:transparent}
.footer-meta{margin:2.5rem 0 0; color:rgba(252,250,246,.5); font-size:.62rem}

/* ══════════════════ dock (mobile) ══════════════════ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:125;
  display:none; gap:.6rem; padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(252,250,246,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.dock.on{transform:none}
.dock .btn{flex:1}
.dock-call{
  width:48px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:2px; color:var(--ink);
}
.dock-call svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round}

/* ══════════════════ lightbox ══════════════════ */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(4,26,44,.96); backdrop-filter:blur(10px);
  display:grid; grid-template-rows:auto 1fr auto;
  opacity:0; transition:opacity .28s var(--ease);
}
.lb.on{opacity:1}
.lb[hidden]{display:none}
.lb-top{
  grid-row:1; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1rem,3vw,2rem); color:var(--shell);
}
.lb-count{color:rgba(252,250,246,.6)}
.lb-x,.lb-arrow{
  background:none; border:1px solid rgba(255,255,255,.22); border-radius:50%;
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer; color:var(--shell);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lb-x:hover,.lb-arrow:hover{background:rgba(255,255,255,.14); border-color:var(--lagoon)}
.lb-x svg,.lb-arrow svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.lb-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2}
.lb-prev{left:clamp(.6rem,2vw,1.6rem)}
.lb-next{right:clamp(.6rem,2vw,1.6rem)}
.lb-stage{
  grid-row:2; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:0 clamp(3.6rem,8vw,6rem); min-height:0;
}
.lb-stage img,.lb-stage video{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:2px;
  box-shadow:0 40px 90px -40px #000;
}
.lb-stage [hidden]{display:none}
.lb-stage figcaption{
  color:rgba(252,250,246,.72); font-size:.86rem; text-align:center; max-width:56ch;
}
.lb-rail{
  grid-row:3; display:flex; gap:6px; overflow-x:auto; padding:1rem clamp(1rem,3vw,2rem);
  scrollbar-width:none;
}
.lb-rail::-webkit-scrollbar{display:none}
.lb-rail img{
  width:56px; height:56px; object-fit:cover; flex:none; cursor:pointer; border-radius:2px;
  opacity:.42; transition:opacity .25s var(--ease), outline-color .25s var(--ease);
  outline:1px solid transparent; outline-offset:2px;
}
.lb-rail img:hover{opacity:.8}
.lb-rail img.is-on{opacity:1; outline-color:var(--lagoon)}
.lb-rail img.clip{border:2px solid rgba(127,212,220,.65)}

/* ══════════════════ toast ══════════════════ */
.toast{
  position:fixed; left:50%; bottom:2rem; z-index:250;
  transform:translate(-50%,1.5rem); opacity:0; visibility:hidden; pointer-events:none;
  background:var(--abyss); color:var(--shell); padding:.75rem 1.3rem; border-radius:2px;
  font-size:.85rem; box-shadow:var(--shadow);
  transition:transform .35s var(--ease), opacity .35s var(--ease), visibility .35s;
}
.toast.on{transform:translate(-50%,0); opacity:1; visibility:visible}

/* ══════════════════ motion ══════════════════ */
/* pure CSS so the hero can never get stuck invisible waiting on a frame */
.anim{
  animation:rise .9s var(--ease) both;
  animation-delay:calc(var(--i,0) * 110ms);
}
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* scoped to .js so the page still reads with scripting off */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.js .reveal.in{opacity:1; transform:none}

/* ══════════════════ responsive ══════════════════ */
@media (min-width:900px){
  .rev{flex-basis:calc((100% - var(--rev-gap)) / 2)}
}

@media (min-width:1360px){
  .rail{display:block}
  .grid-photos{padding-left:118px}   /* clear of the depth rail */
}

/* 48 cells: 8 × 6, 6 × 8, 4 × 12 — every step lands on a whole row.
   The row height tracks the column width at each step so tiles stay near square. */
@media (max-width:1500px){ .grid-photos{grid-template-columns:repeat(6,1fr); grid-auto-rows:16vw} }
@media (max-width:820px) { .grid-photos{grid-template-columns:repeat(4,1fr); grid-auto-rows:24vw} }
/* on a phone a double tile eats most of the width, so everything goes square:
   36 plain tiles ÷ 3 columns = 12 rows */
@media (max-width:520px){
  .grid-photos{grid-template-columns:repeat(3,1fr); grid-auto-rows:32vw}
  .shot.is-wide,.shot.is-big{grid-column:auto; grid-row:auto}
}

@media (max-width:1000px){
  .story-grid{grid-template-columns:1fr}
  .story-fig{grid-column:1; grid-row:auto; position:static; max-width:360px; margin-bottom:2.5rem}
  .contact-grid{grid-template-columns:1fr}
  .cta-veil{background:linear-gradient(180deg,rgba(5,43,74,.5),rgba(5,43,74,.82))}
}

@media (max-width:860px){
  .burger{display:block; position:relative; z-index:2}
  .nav{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.4rem; padding:5rem var(--gutter) 3rem;
    background:var(--shell);
    opacity:0; visibility:hidden; transform:translateY(-1.5rem);
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  }
  .nav.on{opacity:1; visibility:visible; transform:none}
  .nav > a,.header.is-stuck .nav > a{
    color:var(--ink);
    font-family:var(--display); font-variation-settings:'SOFT' 34,'WONK' 1;
    font-size:2rem; letter-spacing:-.02em; padding-block:.35rem;
  }
  .nav .nav-cta,.header.is-stuck .nav .nav-cta{
    font-family:var(--body); font-size:.85rem; margin-top:1.4rem;
    background:var(--abyss); color:var(--shell); border-color:var(--abyss); padding:.85rem 1.6rem;
  }
  .nav-foot{
    display:flex; flex-direction:column; gap:.4rem; margin-top:auto;
    font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  }
  .nav-foot a{text-decoration:none; color:var(--ink-2)}
  .dock{display:flex}
  body{padding-bottom:0}

  .hero-in{padding-top:6rem}
  .hero-foot{gap:1rem}
  .hero-foot-end{margin-left:0; width:100%}

  .drow{grid-template-columns:auto minmax(0,1fr); row-gap:.7rem}
  .drow-cal{min-width:8rem}
  .state{grid-column:1}
  .drow-go{grid-column:2; justify-self:end}

  .f-row{grid-template-columns:1fr}
  .lb-arrow{width:38px; height:38px}
  .lb-stage{padding-inline:clamp(1rem,4vw,2rem)}
}

@media (max-width:560px){
  .hero{min-height:92svh}
  .hero-title{font-size:clamp(2.9rem,10vw,4rem)}
  .rev{flex-basis:100%}
  .footer-nav{flex-direction:row; flex-wrap:wrap; gap:.4rem 1.1rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .anim,.js .reveal{opacity:1 !important; transform:none !important}
}