/* ==========================================================================
   GLASSHOUR — a FirstPeak Studio CONCEPT BUILD (flagship showpiece).
   FRESH DNA, anti-clone: cold glass + a single first-light brass accent that
   appears ONLY on live / interactive surfaces. ~90% cool stillness, ~5% brass.
   (Nothing here reuses FirstPeak's own granite/ink/bone/gold folio identity.)

   This is the single coherent stylesheet for the page:
     1) :root tokens + base
     2) HERO (incl. ambient .hero__loop) + scroll cue
     3) THE CRAFT cards
     4) reduced-motion / no-JS guards for the hero
     5) the .reserve booking placeholder
     6) the 5 narrative sections appended below (window, reframe,
        onthewater, captains, afterglass), each authored against the same
        shared tokens (.kicker, .display) and container/padding spec.
   ========================================================================== */
:root{
  --glass:#0B1F26;   /* water / ink — the base */
  --slate:#2C4A5A;   /* dawn structure */
  --mist:#9BA8C4;    /* mist lilac */
  --foam:#F4F1EA;    /* foam / spray — type on dark */
  --brass:#E9B872;   /* FIRST-LIGHT BRASS — interactive / live surfaces ONLY */
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --grotesk:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--glass); color:var(--foam);
  font-family:var(--grotesk); font-feature-settings:"tnum" 1; /* tabular figures everywhere */
  -webkit-font-smoothing:antialiased;
}
/* GLASSHOUR's eyebrow: a leading hairline + lowercase grotesk, brass-free.
   Brass is reserved for live / interactive / selected surfaces ONLY — and this
   construction is deliberately NOT a caps-tracked FirstPeak eyebrow recolored. */
.kicker{ font-family:var(--grotesk); font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:lowercase; color:var(--mist); }
.kicker::before{ content:""; display:inline-block; vertical-align:middle; width:1.5rem; height:1px; margin-right:.7rem; margin-bottom:.14em; background:currentColor; opacity:.5; }
.display{ font-family:var(--serif); font-weight:300; text-transform:lowercase; letter-spacing:-.02em; line-height:.98; }

/* ---- HERO · THE BREAK -----------------------------------------------------
   LCP = hero-poster.jpg (glass lake at the instant the wake begins). The
   Three.js mirror-water + wake spectacle mounts into #break-canvas as
   progressive enhancement OVER the poster, so the poster stays the LCP and
   there is no layout shift. Reduced-motion / no-JS simply rest on the poster.
   Stack order: poster(0) < loop(1) < canvas(1) < scrim(2) < inner(3). The WebGL
   "break" canvas covers the poster/loop; the scrim darkens it for text
   legibility; the hero copy sits on top. The stylesheet owns this stack — the
   hero module does NOT set z-index inline. */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--glass); }
.hero__poster{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
/* ambient first-light loop: above the poster, below the scrim/canvas */
.hero__loop{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s var(--ease); pointer-events:none; }
.hero__loop.is-live{ opacity:1; }
.hero__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,31,38,.10) 0%, rgba(11,31,38,0) 38%, rgba(11,31,38,.58) 100%),
    linear-gradient(75deg, rgba(11,31,38,.55) 0%, rgba(11,31,38,0) 58%); }
.hero__canvas{ position:absolute; inset:0; z-index:1; } /* THE BREAK mounts here (below the scrim) */
.hero__inner{ position:relative; z-index:3; width:100%; max-width:1280px; margin-inline:auto;
  padding: clamp(2rem,6vw,5rem) clamp(1.25rem,4vw,3rem) clamp(3rem,9vh,6.5rem); }
.hero__kicker{ margin:0 0 1.15rem; }
.hero__headline{ margin:0; font-weight:380; font-size:clamp(2.9rem,9vw,6.75rem); max-width:14ch; text-shadow:0 2px 40px rgba(11,31,38,.45); }
.hero__sub{ margin:1.5rem 0 0; max-width:44ch; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.62; color:rgba(244,241,234,.84); }
.hero__cta{ display:inline-flex; align-items:center; margin-top:clamp(1.9rem,4vh,2.7rem);
  font-family:var(--grotesk); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  color:var(--glass); background:var(--brass); padding:1rem 2rem; border-radius:6px;
  text-decoration:none; transition:transform .2s var(--ease), box-shadow .3s var(--ease);
  box-shadow:0 10px 30px -12px rgba(233,184,114,.5); }
.hero__cta:hover{ transform:translateY(-1px); box-shadow:0 16px 40px -14px rgba(233,184,114,.6); }
.hero__scrollcue{ position:absolute; left:50%; bottom:1.4rem; z-index:3; width:1px; height:38px; background:linear-gradient(var(--mist), transparent); opacity:.6; }

/* ---- THE CRAFT · choose your craft (Omni clips: jet-ski / boat / wake) ---- */
.craft{ background:var(--glass); padding: clamp(4rem,10vh,8rem) 0; }
.craft__inner{ max-width:1280px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }
.craft__head{ margin:.6rem 0 0; font-size:clamp(2rem,5vw,3.4rem); color:var(--foam); }
.craft__grid{ margin-top:clamp(2rem,5vh,3.5rem); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.card{ display:flex; flex-direction:column; }
.card__frame{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:#06141a; box-shadow:0 24px 60px -34px rgba(0,0,0,.75); }
.card__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card__frame::after{ content:""; position:absolute; inset:0; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(244,241,234,.08); pointer-events:none; transition:box-shadow .3s var(--ease); }
.card:hover .card__frame::after{ box-shadow:inset 0 0 0 1px rgba(233,184,114,.55); }
.card__body{ padding:1.05rem .15rem 0; }
.card__name{ margin:0; font-family:var(--serif); font-weight:400; font-size:1.5rem; text-transform:lowercase; color:var(--foam); }
.card__meta{ margin:.55rem 0 0; display:flex; align-items:baseline; gap:1rem; font-size:.8rem; letter-spacing:.02em; color:var(--mist); font-variant-numeric:tabular-nums; }
.card__price{ margin-left:auto; color:var(--brass); font-weight:600; }
.card__desc{ margin:.7rem 0 0; font-size:.92rem; line-height:1.55; color:rgba(244,241,234,.7); }
@media (max-width:820px){ .craft__grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

/* ---- RESERVE · booking-engine mount point (co-captain appends the engine) -- */
.reserve{ min-height:60vh; display:flex; align-items:center; justify-content:center; background:var(--glass); }

@media (prefers-reduced-motion: reduce){ .hero__canvas, .hero__scrollcue, .hero__loop{ display:none; } }

/* ==========================================================================
   NARRATIVE SECTIONS (appended verbatim from the crew, in page order):
   window → reframe → onthewater → captains → afterglass
   ========================================================================== */

/* ----- section: window ----- */
/* ===== window — "The Window" ===== */
.window {
  position: relative;
  overflow: clip;
  background: var(--glass);
  isolation: isolate;
}

/* very-slow parallax / ken-burns still */
.window__bg {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
  pointer-events: none;
}
.window__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* settle to a calm, dark, slightly cool grade so foam text floats */
  filter: saturate(0.82) brightness(0.5) contrast(1.04);
  transform: scale(1.08);
  will-change: transform;
}
/* deep cool veil — ~90% cool darkness, lets a single brass note breathe */
.window__bg-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--glass) 0%, rgba(11,31,38,0.55) 30%, rgba(11,31,38,0.6) 70%, var(--glass) 100%),
    radial-gradient(120% 90% at 78% 22%, rgba(233,184,114,0.10) 0%, rgba(233,184,114,0) 46%),
    linear-gradient(90deg, rgba(11,31,38,0.78) 0%, rgba(11,31,38,0.28) 50%, rgba(11,31,38,0.55) 100%);
}

.window__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-block: clamp(4rem, 10vh, 8rem);
}

/* enormous negative space: pull the passage to a narrow editorial column */
.window__head { margin-bottom: clamp(2.5rem, 8vh, 6rem); }
.window__kicker { display: inline-block; }

.window__body {
  max-width: 56ch;
  margin-inline: auto;
  /* offset slightly off-center for editorial tension */
  margin-left: clamp(0rem, 8vw, 9rem);
}

.window__lead {
  color: var(--foam);
  font-weight: 370;
  font-size: clamp(2.4rem, 6.2vw, 5.25rem);
  margin: 0;
}
.window__line {
  display: block;
}
.window__line + .window__line {
  color: var(--mist);
}

/* a single brass hairline */
.window__rule {
  border: 0;
  height: 1px;
  width: clamp(3rem, 7vw, 6rem);
  margin: clamp(2.25rem, 5vh, 3.5rem) 0;
  background: linear-gradient(90deg, var(--brass), rgba(233,184,114,0));
  opacity: 0.85;
}

.window__prose {
  max-width: 44ch;
}
.window__p {
  font-family: var(--grotesk);
  color: var(--foam);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.62;
  font-weight: 350;
  margin: 0;
  letter-spacing: 0.002em;
}
.window__p + .window__p { margin-top: 1.35em; }
.window__p--mist { color: var(--mist); }

/* the one-hour fact, stated plainly */
.window__seal {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: clamp(2.75rem, 6vh, 4.5rem);
}
.window__seal-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  color: var(--foam);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.window__seal-label {
  font-family: var(--grotesk);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--mist);
  max-width: 16ch;
}

/* reveal-from state only when motion is allowed AND js runs */
.window.is-armed .window__line,
.window.is-armed .window__p,
.window.is-armed .window__rule,
.window.is-armed .window__seal { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .window.is-armed .window__line,
  .window.is-armed .window__p,
  .window.is-armed .window__rule,
  .window.is-armed .window__seal { opacity: 1; }
  .window__bg-img { transform: scale(1.04); }
}

/* ----- section: reframe ----- */
.reframe {
  position: relative;
  background: var(--glass);
  color: var(--foam);
  overflow: hidden;
}
.reframe__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-block: clamp(4rem, 10vh, 8rem);
}

.reframe__kicker {
  margin: 0 0 clamp(2rem, 5vh, 3.5rem);
}

/* ---- monumental headline ---- */
.reframe__heading {
  margin: 0;
  font-weight: 370;
  font-size: clamp(2.4rem, 8.2vw, 7rem);
  color: var(--foam);
  max-width: 16ch;
}
.reframe__line {
  display: block;
}
.reframe__line--strike {
  color: var(--mist);
  margin-bottom: .12em;
}
.reframe__strike-text {
  position: relative;
  display: inline;
  opacity: .62;
}
/* the negation: a quiet desaturated line struck through the false idea —
   brass is saved for the TRUTH (.reframe__accent), not the wrong idea. */
.reframe__strike-text::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.04em;
  top: 52%;
  height: 2px;
  background: rgba(155,168,196,.5);
  transform: scaleX(var(--reframe-strike, 1));
  transform-origin: left center;
  border-radius: 2px;
}
.reframe__line--truth {
  color: var(--foam);
}
.reframe__accent {
  color: var(--brass);
}

/* ---- two-state contrast ---- */
.reframe__contrast {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(3rem, 7vh, 5.5rem);
  align-items: start;
}
.reframe__divide {
  align-self: stretch;
  width: 1px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--slate) 70%, transparent), transparent);
}
.reframe__col {
  min-width: 0;
}
.reframe__col-label {
  display: inline-block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--mist);
  margin-bottom: 1.4rem;
}
.reframe__col-label--live {
  color: var(--brass);
  position: relative;
  padding-left: 1rem;
}
.reframe__col-label--live::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brass) 60%, transparent);
}
.reframe__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: -.01em;
  line-height: 1.28;
  font-size: clamp(1.25rem, 2.7vw, 2rem);
}
.reframe__list li {
  padding: .55em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--slate) 45%, transparent);
}
.reframe__list li:last-child {
  border-bottom: 0;
}
.reframe__col--noise .reframe__list {
  color: var(--mist);
}
.reframe__col--calm .reframe__list {
  color: var(--foam);
}

/* ---- close + cta ---- */
.reframe__close {
  margin: clamp(3rem, 7vh, 5rem) 0 0;
  font-family: var(--serif);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: -.01em;
  font-size: clamp(1.35rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  color: var(--foam);
  max-width: 22ch;
}
.reframe__cta {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--brass);
  text-decoration: none;
  padding: .35rem .1rem;
  border-radius: 4px;
}
.reframe__cta-label {
  position: relative;
}
.reframe__cta-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
.reframe__cta-arrow {
  transition: transform .5s var(--ease);
}
.reframe__cta:hover .reframe__cta-label::after,
.reframe__cta:focus-visible .reframe__cta-label::after {
  transform: scaleX(1);
}
.reframe__cta:hover .reframe__cta-arrow,
.reframe__cta:focus-visible .reframe__cta-arrow {
  transform: translateX(5px);
}
.reframe__cta:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .reframe__contrast {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .reframe__divide {
    width: auto;
    height: 1px;
    margin: 1.75rem 0;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--slate) 70%, transparent), transparent);
  }
}

/* JS-enhanced initial states — only applied when motion will run.
   Set the VARIABLE (not the transform) so the tween that animates
   --reframe-strike actually drives the ::after scaleX. Hardcoding the
   transform here would override the var and leave the line un-struck. */
.reframe.is-animated .reframe__strike-text { --reframe-strike: 0; }
.reframe.is-animated .reframe__list li { opacity: 0; transform: translateY(14px); }
.reframe.is-animated .reframe__close,
.reframe.is-animated .reframe__close + .reframe__cta { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  .reframe__cta-arrow,
  .reframe__cta-label::after { transition: none; }
}

/* ----- section: onthewater ----- */
/* ===== On the Water — namespaced to .otw ===== */
.otw{position:relative;background:var(--glass);color:var(--foam)}

/* Intro */
.otw__intro{padding-block:clamp(4rem,10vh,8rem) clamp(2rem,5vh,3.5rem)}
.otw__intro-inner{max-width:1280px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem);max-width:min(1280px,720px)}
.otw .kicker{display:block;margin-bottom:1.1rem}
.otw__title{font-size:clamp(2.4rem,6vw,4.5rem);margin:0 0 1.4rem;color:var(--foam)}
.otw__lead{font-family:var(--grotesk);font-weight:300;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.6;color:var(--mist);max-width:46ch;margin:0}
.otw__hint{display:flex;align-items:center;gap:.7rem;margin:2.2rem 0 0;font-family:var(--grotesk);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);opacity:.7}
.otw__hint-line{display:inline-block;width:2.4rem;height:1px;background:var(--mist);opacity:.5}

/* Strip — default (no-JS / reduced-motion): clean vertical stack */
.otw__strip{padding-inline:clamp(1.25rem,4vw,3rem);padding-bottom:clamp(4rem,10vh,8rem)}
.otw__track{display:flex;flex-direction:column;gap:clamp(2rem,5vh,4rem);max-width:1280px;margin-inline:auto;will-change:transform}

.otw__frame{margin:0;display:grid;gap:1.1rem}
.otw__media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#08161b;box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.otw__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* cinematic cold-glass grade + brass kiss from the east edge */
.otw__grade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(105deg,rgba(11,31,38,.55) 0%,rgba(11,31,38,.12) 38%,rgba(11,31,38,0) 60%),
    radial-gradient(120% 90% at 100% 18%,rgba(233,184,114,.18) 0%,rgba(233,184,114,0) 55%);
  mix-blend-mode:normal}

.otw__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;font-family:var(--grotesk);padding-left:.2rem}
.otw__time{color:var(--brass);font-weight:600;font-size:.92rem;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.otw__dot{color:var(--mist);opacity:.55}
.otw__tag{color:var(--mist);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.otw__note{flex-basis:100%;color:var(--foam);font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.05rem,1.8vw,1.45rem);letter-spacing:-.01em;opacity:.9;margin-top:.15rem}

/* End card */
.otw__end{align-self:center;text-align:center;max-width:30ch;padding:2rem 0}
.otw__end-time{font-family:var(--serif);font-weight:300;text-transform:lowercase;font-size:clamp(2rem,4vw,3rem);color:var(--mist);margin:0 0 .8rem;font-variant-numeric:tabular-nums}
.otw__end-copy{font-family:var(--grotesk);font-weight:300;color:var(--mist);line-height:1.55;font-size:1rem;margin:0}

/* ===== Horizontal filmstrip mode — only when JS opts in ===== */
@media (min-width:860px){
  .otw[data-otw="pinned"] .otw__strip{padding:0;overflow:hidden}
  .otw[data-otw="pinned"] .otw__track{
    flex-direction:row;flex-wrap:nowrap;align-items:center;
    height:100vh;width:max-content;max-width:none;margin:0;
    gap:clamp(2.5rem,5vw,5rem);
    padding-inline:clamp(1.25rem,4vw,3rem)}
  .otw[data-otw="pinned"] .otw__frame{
    flex:0 0 auto;width:min(72vw,78vh*1.777);align-content:center;gap:1.3rem}
  .otw[data-otw="pinned"] .otw__end{
    flex:0 0 auto;width:34vw;max-width:34ch;align-self:center;padding:0}
}

@media (prefers-reduced-motion:reduce){
  .otw[data-otw]{}
  .otw[data-otw="pinned"] .otw__strip,
  .otw[data-otw="pinned"] .otw__track{height:auto;width:auto;flex-direction:column;overflow:visible}
}

.otw__frame :focus-visible,
.otw a:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ----- section: captains ----- */
.captains {
  background: var(--glass);
  color: var(--foam);
  position: relative;
}
.captains__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-block: clamp(4rem, 10vh, 8rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .captains__inner {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

/* Portrait — hero of the section */
.captains__portrait {
  margin: 0;
  position: relative;
}
@media (min-width: 64rem) {
  .captains__portrait {
    position: sticky;
    top: clamp(2rem, 12vh, 6rem);
  }
}
.captains__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
  /* cold, expensive grade: deepen shadows, let the brass dawn sit in the frame */
  filter: saturate(0.92) contrast(1.04) brightness(0.96);
  box-shadow:
    0 1px 0 rgba(244, 241, 234, 0.04) inset,
    0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
.captains__portrait::after {
  /* soft vignette to seat the figure into the cold dark */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(11, 31, 38, 0.55) 0%, rgba(11, 31, 38, 0) 42%),
    radial-gradient(120% 80% at 50% 20%, rgba(11, 31, 38, 0) 55%, rgba(11, 31, 38, 0.4) 100%);
}
.captains__sig {
  position: absolute;
  left: clamp(0.9rem, 3%, 1.5rem);
  bottom: clamp(0.9rem, 3%, 1.5rem);
  right: clamp(0.9rem, 3%, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  z-index: 1;
}
.captains__sig-line {
  flex: 0 0 auto;
  width: clamp(28px, 8vw, 46px);
  height: 1px;
  background: var(--brass);
  opacity: 0.9;
}
.captains__sig-text {
  font-family: var(--serif);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--foam);
  line-height: 1.1;
}

/* Copy column */
.captains__copy {
  display: flex;
  flex-direction: column;
}
.captains__heading {
  margin: 0.9rem 0 0;
  color: var(--foam);
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  max-width: 18ch;
}
.captains__lead {
  margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
  font-family: var(--grotesk);
  color: var(--mist);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  max-width: 52ch;
  font-weight: 350;
}

.captains__assure {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.captains__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  padding: clamp(1.25rem, 2.6vw, 1.75rem) 0;
  border-top: 1px solid rgba(155, 168, 196, 0.16);
}
.captains__item:last-child {
  border-bottom: 1px solid rgba(155, 168, 196, 0.16);
}
.captains__num {
  font-family: var(--grotesk);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--mist);
  padding-top: 0.35rem;
  line-height: 1;
}
.captains__item-title {
  margin: 0;
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  color: var(--foam);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.captains__item-text {
  margin: 0.5rem 0 0;
  font-family: var(--grotesk);
  color: var(--mist);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.65;
  font-weight: 350;
  max-width: 48ch;
}
.captains__avail {
  color: var(--brass);
  display: inline;
}

.captains__close {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-family: var(--serif);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  color: var(--foam);
  line-height: 1.3;
  max-width: 24ch;
}

/* Reveal scaffold — only applied when JS opts in (so no-JS stays fully visible) */
.captains[data-gh-anim="on"] .captains__copy > *,
.captains[data-gh-anim="on"] .captains__portrait {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .captains__img { will-change: auto; }
}

/* ----- section: afterglass ----- */
/* ===== afterglass : reassure + footer ===== */
.afterglass{
  background:var(--glass);
  color:var(--foam);
  position:relative;
}
.afterglass__inner{
  max-width:1280px;
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3rem);
}
.afterglass > .afterglass__inner{
  padding-block:clamp(4rem,10vh,8rem);
}

/* head */
.afterglass__head{
  max-width:48rem;
}
.afterglass__title{
  margin:.9rem 0 0;
  color:var(--foam);
  font-size:clamp(2.1rem,5.4vw,3.9rem);
}
.afterglass__lead{
  margin:1.5rem 0 0;
  max-width:38rem;
  color:var(--mist);
  font-family:var(--grotesk);
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.6;
}

/* rituals */
.afterglass__rituals{
  list-style:none;
  margin:clamp(3rem,7vh,5.5rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(2rem,4vw,3.25rem);
}
.afterglass__ritual{
  position:relative;
  padding-top:1.75rem;
  border-top:1px solid color-mix(in srgb, var(--slate) 60%, transparent);
}
.afterglass__num{
  display:block;
  font-family:var(--grotesk);
  font-variant-numeric:tabular-nums;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--mist);
}
.afterglass__ritual-title{
  margin:1rem 0 .65rem;
  font-family:var(--serif);
  font-weight:300;
  text-transform:lowercase;
  letter-spacing:-.01em;
  font-size:clamp(1.28rem,2.2vw,1.55rem);
  line-height:1.05;
  color:var(--foam);
}
.afterglass__ritual-body{
  margin:0;
  color:var(--mist);
  font-family:var(--grotesk);
  font-size:.98rem;
  line-height:1.62;
}

/* footer */
.afterglass__footer{
  border-top:1px solid color-mix(in srgb, var(--slate) 55%, transparent);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--slate) 22%, transparent) 0%, transparent 60%),
    var(--glass);
}
.afterglass__footer-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:2.5rem;
  padding-block:clamp(3.5rem,8vh,6rem) clamp(2rem,4vh,2.75rem);
}
.afterglass__brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.afterglass__logomark{
  display:block;
  width:56px;
  height:56px;
  opacity:.92;
}
.afterglass__wordmark{
  margin:1.1rem 0 0;
  font-size:clamp(2.4rem,5vw,3.4rem);
  color:var(--foam);
  line-height:.9;
}
.afterglass__closer{
  margin:.85rem 0 0;
  font-family:var(--serif);
  font-style:italic;
  text-transform:lowercase;
  font-weight:300;
  font-size:clamp(1.05rem,1.7vw,1.25rem);
  letter-spacing:-.01em;
  color:var(--mist);
}

/* footer cta */
.afterglass__cta-wrap{
  padding-bottom:.5rem;
}
.afterglass__cta{
  --pad:1.05rem;
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  padding:.95rem 1.6rem;
  border:1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  border-radius:999px;
  color:var(--brass);
  font-family:var(--grotesk);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.afterglass__cta-line{
  flex:none;
  transition:transform .5s var(--ease);
}
.afterglass__cta:hover,
.afterglass__cta:focus-visible{
  background:color-mix(in srgb, var(--brass) 14%, transparent);
  border-color:var(--brass);
}
.afterglass__cta:hover .afterglass__cta-line{
  transform:translateX(4px);
}
.afterglass__cta:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

/* footer base */
.afterglass__footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
  padding-block:1.75rem clamp(2.25rem,5vh,3.25rem);
  border-top:1px solid color-mix(in srgb, var(--slate) 38%, transparent);
}
.afterglass__disclosure{
  margin:0;
  font-family:var(--grotesk);
  font-size:.8rem;
  letter-spacing:.02em;
  color:color-mix(in srgb, var(--mist) 80%, transparent);
}
.afterglass__copyright{
  margin:0;
  font-family:var(--grotesk);
  font-size:.8rem;
  color:color-mix(in srgb, var(--mist) 62%, transparent);
}
.afterglass__nums{
  font-variant-numeric:tabular-nums;
}

/* reveal initial state — only when motion is allowed AND js runs */
.afterglass[data-ag-ready] [data-ag-reveal]{
  opacity:0;
  transform:translateY(18px);
}
@media (prefers-reduced-motion: reduce){
  .afterglass[data-ag-ready] [data-ag-reveal]{
    opacity:1;
    transform:none;
  }
}

@media (max-width:640px){
  .afterglass__footer-inner{
    align-items:flex-start;
  }
  .afterglass__cta-wrap{
    padding-bottom:0;
  }
}