/* ==========================================================================
   Azul Diving Club — tokens
   ========================================================================== */

:root {
  /* colour */
  --ink: #071826;
  --azul-deep: #0d2c46;
  --azul-mid: #1c4e73;
  --azul-mid-soft: #2c5f85;
  --foam: #f4f1e8;
  --foam-dim: #cbd3d6;
  --coral: #c8351f;
  --coral-dark: #a92a1c;
  --coral-light: #ee5136;
  --current: #4fc7d6;

  /* type */
  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* rhythm */
  --edge: clamp(1.5rem, 5vw, 4.5rem);
  --radius: 4px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  /* things rise fast and settle slow, the way they do in water */
  --ease-rise: cubic-bezier(.16, 1, .3, 1);
  --ease-settle: cubic-bezier(.33, .7, .45, 1);

  /* --------------------------------------------------------------------
     Depth attenuation.
     Water absorbs red first — it is gone by roughly 10m, orange by 20m.
     --depth is driven from scroll (0 at the surface, 1 at the captains,
     back to 0 on the ascent) and bleeds the coral accent toward cyan on
     the way down. Decorative accents only: the coral CTA stays coral so
     the booking action never gets harder to find.
     -------------------------------------------------------------------- */
  --depth: 0;
  --accent: var(--coral-light);
}

@supports (color: color-mix(in oklab, red, blue)) {
  :root {
    --accent: color-mix(in oklab, var(--coral-light), var(--current) calc(var(--depth) * 82%));
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--foam);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, blockquote, p { margin: 0; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
address { font-style: normal; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--foam); color: var(--ink);
  padding: .75rem 1.25rem; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .85rem;
  z-index: 1000; transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--current);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Type
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--foam);
  text-wrap: balance;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.08;
  max-width: 16ch;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.2;
}

/* pretty prevents a single orphaned word on the last line of body copy;
   balance is reserved for headings and the short pull-quote. */
p { color: var(--foam-dim); text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
}
.eyebrow--light { color: var(--current); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: .9rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  min-height: 44px;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--coral { background: var(--coral); color: var(--foam); }
.btn--coral:hover { background: var(--coral-dark); }
.btn--ghost { background: transparent; color: var(--foam); border-color: rgba(244,241,232,.35); }
.btn--ghost:hover { border-color: var(--foam); }

/* Pressed feedback. Declared after :hover so it wins while held. Touch devices
   have no hover at all, so without this a tap gives no response whatsoever. */
.btn:active {
  transform: translateY(0) scale(.985);
  transition-duration: .07s;
}
.btn--coral:active { background: var(--coral-dark); }
.btn--ghost:active { background: rgba(244,241,232,.06); }
.btn--lg { padding: 1.1rem 2.25rem; font-size: 1rem; }
.btn--sm { padding: .6rem 1.25rem; font-size: .85rem; }

/* ==========================================================================
   Depth rail (signature scroll device)
   ========================================================================== */

.depth-rail {
  position: fixed;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 46vh;
  max-height: 420px;
  pointer-events: none;
}
.depth-rail__track {
  position: relative;
  width: 2px;
  height: 100%;
  background: rgba(244,241,232,.15);
  border-radius: 2px;
}
.depth-rail__fill {
  position: absolute;
  top: 0; left: 0; width: 100%;
  height: 0%;
  background: var(--current);
  border-radius: 2px;
  transition: height .25s linear;
}
.depth-rail__marks {
  position: absolute;
  right: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}
.depth-rail__marks li {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  opacity: .35;
  transition: opacity .25s var(--ease);
}
.depth-rail__marks li.is-active { opacity: 1; }
.depth-rail__num {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--current);
}
.depth-rail__label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--foam-dim);
}

@media (max-width: 1024px) {
  .depth-rail { display: none; }
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(7,24,38,.75), rgba(7,24,38,0));
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(7,24,38,.92);
  border-bottom-color: rgba(244,241,232,.08);
  backdrop-filter: none;
}
.site-header__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--edge);
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand img { height: 42px; width: auto; }

.main-nav {
  display: flex;
  gap: 2.25rem;
  font-size: .92rem;
  font-weight: 500;
}
.main-nav a { position: relative; padding: .25rem 0; }
.main-nav a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .28s var(--ease-rise);
}
.main-nav a:hover::after { width: 100%; }

/* Current section: rule stays lit in cyan, matching the depth-rail's colour so
   the two position indicators read as the same system. Hover still wins. */
.main-nav a.is-current::after { width: 100%; background: var(--current); }
.main-nav a.is-current:hover::after { background: var(--accent); }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--foam);
  margin: 0 auto;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:active span { opacity: .6; }

.mobile-nav {
  position: fixed;
  inset: 84px 0 0 0;
  background: var(--ink);
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  z-index: 99;
  overflow-y: auto;
}
.mobile-nav[data-state="open"] { transform: translateX(0); }
.mobile-nav nav { display: flex; flex-direction: column; padding: 2.5rem var(--edge); gap: 1.75rem; }
.mobile-nav a { font-family: var(--font-display); font-size: 1.6rem; }
.mobile-nav .btn { align-self: flex-start; margin-top: 1rem; }

@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header__inner { height: 72px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__photo, .hero__caustics {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The hero photo now carries real god-rays, so the canvas only needs to add
   drifting bubbles and a little movement — at .55 it doubled the light. */
.hero__caustics { mix-blend-mode: screen; opacity: .3; }

/* Retuned for the 4K frame: heavier at the very top, where the sunlit surface
   would otherwise leave the header nav sitting on blown-out white, and lighter
   through the middle so the light shafts survive. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      var(--ink) 1%,
      rgba(7,24,38,.60) 20%,
      rgba(7,24,38,.20) 48%,
      rgba(7,24,38,.34) 74%,
      rgba(7,24,38,.88) 100%),
    linear-gradient(to right,
      rgba(7,24,38,.50) 0%,
      rgba(7,24,38,.12) 40%,
      rgba(7,24,38,0) 64%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--edge) 9rem;
  width: 100%;
}
.hero__headline {
  font-size: clamp(2.4rem, 6.4vw, 5rem);
  line-height: 1.04;
  max-width: 14ch;
  color: var(--foam);
}
.hero__headline span { color: var(--foam-dim); font-style: italic; }
.hero__sub {
  margin-top: 1.75rem;
  max-width: 46ch;
  font-size: 1.08rem;
  color: rgba(244,241,232,.82);
}
.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Page-load sequence — one orchestrated entrance, then the hero is still.
   Gated on html.js so the content is never hidden if the script fails. */
.js .hero__content > *,
.js .scroll-cue {
  opacity: 0;
  transform: translateY(20px);
}
.js .scroll-cue { transform: translate(-50%, 20px); }

.js.is-loaded .hero__content > *,
.js.is-loaded .scroll-cue {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .95s var(--ease-rise), transform .95s var(--ease-rise);
}
.js.is-loaded .scroll-cue { transform: translate(-50%, 0); }

.js.is-loaded .hero__content > .eyebrow    { transition-delay: .10s; }
.js.is-loaded .hero__content > .hero__headline { transition-delay: .22s; }
.js.is-loaded .hero__content > .hero__sub  { transition-delay: .42s; }
.js.is-loaded .hero__content > .hero__actions { transition-delay: .56s; }
.js.is-loaded .scroll-cue { transition-delay: .82s; }

@media (prefers-reduced-motion: reduce) {
  .js .hero__content > *,
  .js .scroll-cue { opacity: 1; transform: none; }
  .js .scroll-cue { transform: translateX(-50%); }
}

.scroll-cue {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px; height: 42px;
  border: 1px solid rgba(244,241,232,.45);
  border-radius: 20px;
}
.scroll-cue span {
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--current);
  animation: scrollcue 1.8s infinite var(--ease);
}
@keyframes scrollcue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(16px); opacity: 0; }
  100% { opacity: 0; }
}

.wave-divider {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 3;
  line-height: 0;
}
.wave-divider svg { width: 100%; height: 70px; display: block; }
.wave-divider path { fill: var(--ink); }
.wave-divider.alt path { fill: var(--azul-deep); }

@media (max-width: 640px) {
  .hero__content { padding-bottom: 6rem; }
  .hero__actions .btn { width: 100%; }
  .hero__actions { flex-direction: column; }
}

/* ==========================================================================
   Section shell
   ========================================================================== */

section { position: relative; }
.section-head {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--edge);
}
.section-head__sub { margin-top: 1rem; max-width: 42ch; font-size: 1.05rem; }

/* ==========================================================================
   Club
   ========================================================================== */

.club {
  background: var(--ink);
  padding: 7rem 0 8rem;
}
.club__grid {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.club__figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(244,241,232,.08);
}
.club__figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

.club__copy h2 { margin-bottom: 1.5rem; }
.club__copy p { margin-bottom: 1.1rem; max-width: 48ch; }
.club__facts {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.5rem;
}
.club__facts li {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--current);
  padding-left: 1.1rem;
  position: relative;
}
.club__facts li::before {
  content: '';
  position: absolute; left: 0; top: .45em;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

@media (max-width: 860px) {
  .club__grid { grid-template-columns: 1fr; }
  .club__figure { order: -1; }
  .club__figure img { aspect-ratio: 16/10; }
}

/* ==========================================================================
   Benefits
   ========================================================================== */

.benefits {
  position: relative;
  overflow: hidden;
  background: var(--azul-deep);
  padding: 8rem 0;
}
.benefits__inner {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--edge);
}
.benefits__head { max-width: 640px; margin-bottom: 4rem; }
.benefits__head h2 { margin-bottom: 1.1rem; }
.benefits__head p { max-width: 46ch; font-size: 1.05rem; }

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.benefit {
  background: var(--ink);
  border: 1px solid rgba(244,241,232,.08);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .5s var(--ease-settle), border-color .5s var(--ease),
              box-shadow .5s var(--ease-settle);
}
.benefit:hover {
  transform: translateY(-6px);
  border-color: rgba(79,199,214,.4);
  box-shadow: 0 20px 44px -22px rgba(3,12,20,.9);
  transition-timing-function: var(--ease-rise);
}
/* ---------- animated icons ----------
   Each icon draws itself on once when its card enters view, then carries one
   characteristic motion on hover. Six ambient loops in a row would read as
   noise; one motion each, on demand, reads as intent. */

.benefit__icon {
  width: 34px; height: 34px;
  color: var(--current);
  transition: transform .5s var(--ease-settle);
}
.benefit:hover .benefit__icon {
  transform: translateY(-3px);
  transition-timing-function: var(--ease-rise);
}

.benefit__icon :is(path, circle, rect) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Draw-on. Every stroke that should draw carries pathLength="1", so one
   dasharray works for all of them regardless of real path length.
   The drawn state is a declaration, not animation-fill — otherwise a hover
   animation replacing `animation` would snap the stroke back to hidden. */
.js .benefit__icon [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .benefit.is-visible .benefit__icon [pathLength] {
  stroke-dashoffset: 0;
  animation: icon-draw .9s var(--ease-rise);
}
@keyframes icon-draw { from { stroke-dashoffset: 1; } }

/* Stagger only the strokes that draw — the glint and bubble groups carry
   their own hover timing and must not inherit a draw delay. */
.js .benefit.is-visible .benefit__icon > [pathLength]:nth-child(2),
.js .benefit.is-visible .benefit__icon .i-bob > [pathLength]:nth-child(2),
.js .benefit.is-visible .benefit__icon .i-drift > [pathLength]:nth-child(2) { animation-delay: .09s; }
.js .benefit.is-visible .benefit__icon > [pathLength]:nth-child(3),
.js .benefit.is-visible .benefit__icon .i-bob > [pathLength]:nth-child(3) { animation-delay: .18s; }
.js .benefit.is-visible .benefit__icon > [pathLength]:nth-child(4) { animation-delay: .27s; }
.js .benefit.is-visible .benefit__icon > [pathLength]:nth-child(5) { animation-delay: .36s; }

/* 1 — the pool surface drifts */
.i-drift { animation: icon-drift 3.4s linear infinite; animation-play-state: paused; }
.benefit:hover .i-drift { animation-play-state: running; }
.i-wave--b { transform: translateX(8px); opacity: .55; }
@keyframes icon-drift { to { transform: translateX(-16px); } }

/* 2 — the flag flutters, the water laps the shore */
.i-flag { transform-box: fill-box; transform-origin: left center; }
.benefit:hover .i-flag { animation: icon-flag 1.2s var(--ease) infinite; }
@keyframes icon-flag {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  35%      { transform: skewY(-4deg) scaleX(.93); }
  70%      { transform: skewY(3deg) scaleX(1.02); }
}
.benefit:hover .i-lap { animation: icon-lap 1.8s var(--ease) infinite; }
@keyframes icon-lap {
  0%, 100% { transform: translateX(0); opacity: .8; }
  50%      { transform: translateX(-3px); opacity: 1; }
}

/* 3 — the hands sweep round. Transition, not animation, so the draw survives. */
.i-hand {
  transform-box: view-box;
  transform-origin: 24px 27px;
  transition: transform 1.1s var(--ease-rise);
}
.benefit:hover .i-hand--m { transform: rotate(360deg); }
.benefit:hover .i-hand--h { transform: rotate(30deg); }

/* 4 — light glints across the lens */
.i-glint path { stroke: var(--foam); stroke-width: 5; }
.i-glint { transform-box: view-box; opacity: 0; }
.benefit:hover .i-glint { animation: icon-glint 1.2s var(--ease); }
@keyframes icon-glint {
  0%   { transform: translateX(-26px); opacity: 0; }
  30%  { opacity: .45; }
  100% { transform: translateX(44px); opacity: 0; }
}

/* 5 — bubbles leave the valves */
.i-bubble {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.benefit:hover .i-bubble { animation: icon-bubble 1.6s var(--ease) infinite; }
.benefit:hover .i-bubble:nth-child(2) { animation-delay: .4s; }
.benefit:hover .i-bubble:nth-child(3) { animation-delay: .8s; }
@keyframes icon-bubble {
  0%   { opacity: 0; transform: translateY(3px) scale(.6); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-9px) scale(1.05); }
}

/* 6 — the captain bobs, the way you do treading water */
.i-bob { transform-box: view-box; }
.benefit:hover .i-bob { animation: icon-bob 2.4s var(--ease) infinite; }
@keyframes icon-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
.benefit h3 {
  font-family: var(--font-body);
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foam);
  margin: 0;
}

@media (max-width: 1024px) {
  .benefits__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* ==========================================================================
   On Site — services list
   ========================================================================== */

.services {
  background: var(--ink);
  padding: 8rem 0;
}
.services__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--edge);
}
.services__head { max-width: 660px; margin-bottom: 3.5rem; }
.services__head h2 { margin-bottom: 1.1rem; }
.services__lead { max-width: 50ch; font-size: 1.05rem; }

.services__list { border-top: 1px solid rgba(244,241,232,.14); }
.service {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 1.7fr;
  gap: 1.5rem 3rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(244,241,232,.14);
  align-items: start;
}
.service__title { display: flex; flex-direction: column; gap: .5rem; }
.service h3 {
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--foam);
  margin: 0;
}
.service__meta {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--foam-dim);
  margin: 0;
}
.service__meta span { color: var(--current); font-weight: 500; }
.service__desc { margin: 0; font-size: .98rem; max-width: 58ch; }

@media (max-width: 760px) {
  .service {
    grid-template-columns: 1fr;
    gap: .7rem;
    padding: 1.85rem 0;
  }
  .service h3 { font-size: 1.25rem; }
}

/* ==========================================================================
   Courses — dive log table
   ========================================================================== */

.courses {
  background: var(--ink);
  padding: 8rem 0 9rem;
}
.courses .section-head { margin-bottom: 3rem; }

.dive-log {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--edge);
}
.dive-log__row {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1.3fr 1.3fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(244,241,232,.12);
  align-items: center;
}
.dive-log__row--head {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--current);
  border-bottom-color: rgba(79,199,214,.35);
  padding-top: 0;
}
/* Hover reads as a depth marker being set against the row, not a highlight */
.dive-log__row:not(.dive-log__row--head) { transition: background .4s var(--ease); }
.dive-log__row:not(.dive-log__row--head) > span { transition: transform .45s var(--ease-settle); }
.dive-log__row:not(.dive-log__row--head)::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--accent);
  border-radius: 3px;
  transform: translateY(-50%);
  transition: height .45s var(--ease-settle);
}
.dive-log__row:not(.dive-log__row--head):hover { background: rgba(244,241,232,.03); }
.dive-log__row:not(.dive-log__row--head):hover > span {
  transform: translateX(10px);
  transition-timing-function: var(--ease-rise);
}
.dive-log__row:not(.dive-log__row--head):hover::before {
  height: 58%;
  transition-timing-function: var(--ease-rise);
}
.dive-log__row strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--foam); }
.dive-log__row small { display: block; margin-top: .25rem; color: var(--foam-dim); font-size: .85rem; }
.dive-log__row span[data-label]:not([data-label="Course"]) { font-family: var(--font-mono); font-size: .88rem; color: var(--foam-dim); }

@media (max-width: 760px) {
  .dive-log__row--head { display: none; }
  .dive-log__row {
    grid-template-columns: 1fr;
    gap: .4rem;
    padding: 1.75rem 0;
  }
  .dive-log__row span[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--current);
    margin-bottom: .25rem;
  }
  .dive-log__row span[data-label="Course"]::before { display: none; }
}

/* ==========================================================================
   Captains
   ========================================================================== */

.captains {
  position: relative;
  overflow: hidden;
  background: var(--azul-deep);
  padding: 9rem 0;
}
.captains__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.captains__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(13,44,70,.94) 0%, rgba(7,24,38,.93) 100%);
}
.captains__inner {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--edge);
  text-align: left;
}
.captains__lead {
  max-width: 900px;
  border-left: 2px solid var(--current);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.captains__lead blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--foam);
  line-height: 1.25;
  margin: 0 0 1.75rem;
  padding-left: 1.5rem;
  text-wrap: balance;
}
.captains__lead .eyebrow { padding-left: 1.5rem; }
.captains__body { padding-left: 1.5rem; max-width: 56ch; font-size: 1.05rem; }

/* ---------- crew roster ---------- */

.crew {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.crew__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(244,241,232,.1);
  border-radius: 16px;
  background: rgba(7,24,38,.55);
  transition: transform .55s var(--ease-settle), border-color .55s var(--ease),
              background .55s var(--ease), box-shadow .55s var(--ease-settle);
}

/* surface light catching the card as it rises */
.crew__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, rgba(79,199,214,.16) 0%, rgba(79,199,214,0) 58%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--ease);
}

.crew__card:hover {
  transform: translateY(-7px);
  border-color: rgba(79,199,214,.45);
  background: rgba(7,24,38,.72);
  box-shadow: 0 26px 56px -24px rgba(3,12,20,.95);
  transition-timing-function: var(--ease-rise);
}
.crew__card:hover::before { opacity: 1; }

.crew__card--lead {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: flex-start;
  padding: 2.25rem 2rem;
}
.crew__card--lead .crew__head { flex: 0 0 30%; }

.crew__head,
.crew__detail { position: relative; z-index: 1; }
.crew__detail { display: flex; flex-direction: column; flex: 1; }

.crew__role {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .65rem;
}
.crew__name {
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: .45rem;
}
.crew__card--lead .crew__name { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.crew__rank {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--current);
}

.crew__bio { font-size: .95rem; max-width: 56ch; margin-bottom: 1.15rem; }

.crew__creds {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.crew__creds li {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .03em;
  color: var(--foam-dim);
  border: 1px solid rgba(244,241,232,.16);
  border-radius: 999px;
  padding: .3rem .7rem;
  transition: border-color .55s var(--ease), color .55s var(--ease);
}
.crew__card:hover .crew__creds li {
  border-color: rgba(79,199,214,.38);
  color: var(--foam);
}

.crew__note {
  margin-top: 1.1rem;
  font-size: .84rem;
  color: var(--foam-dim);
  opacity: .72;
  max-width: 58ch;
}
/* margin-top:auto pins the creed to the card floor so the three cards align
   on it regardless of how long each bio runs. The gap comes from padding, not
   margin, so the accent rule stays tight to the text. */
.crew__creed {
  margin-top: auto;
  padding-top: 1.35rem;
  padding-left: 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.4;
  color: rgba(244,241,232,.74);
  border-left: 1px solid var(--accent);
}

@media (max-width: 1024px) {
  .crew { grid-template-columns: repeat(2, 1fr); }
  .crew__card--lead { flex-direction: column; gap: 1.5rem; }
  .crew__card--lead .crew__head { flex: 1 1 auto; }
}
@media (max-width: 700px) {
  .crew { grid-template-columns: 1fr; }
  .captains { padding: 6rem 0; }
}

/* ==========================================================================
   CTA / Ascent
   ========================================================================== */

.cta {
  background: var(--ink);
  padding: 8rem 0 9rem;
  text-align: center;
}
.cta__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--edge);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta h2 { max-width: none; margin-bottom: 1rem; }
.cta p { margin-bottom: 2.25rem; font-size: 1.05rem; }
.cta .eyebrow { text-align: center; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--azul-deep);
  border-top: 1px solid rgba(244,241,232,.08);
  padding: 5rem 0 2rem;
}
.site-footer__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.site-footer__brand img { height: 34px; width: auto; margin-bottom: .85rem; }
.site-footer__brand p { font-family: var(--font-mono); font-size: .8rem; color: var(--current); }
.site-footer h3 {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--foam);
  font-weight: 500;
  margin-bottom: 1rem;
}
.site-footer p, .site-footer address { font-size: .92rem; margin-bottom: .5rem; }
.site-footer a { transition: color .2s var(--ease); }
.site-footer a:hover { color: var(--current); }
.site-footer a:active { color: var(--foam); }
.site-footer__social { display: flex; flex-direction: column; gap: .6rem; }

.site-footer__bottom {
  max-width: 1360px;
  margin: 3.5rem auto 0;
  padding: 1.75rem var(--edge) 0;
  border-top: 1px solid rgba(244,241,232,.08);
}
.site-footer__bottom p { font-size: .8rem; color: var(--foam-dim); }

@media (max-width: 860px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   404
   ========================================================================== */

.notfound {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 6rem var(--edge);
}
.notfound h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.06;
  margin-bottom: 1.25rem;
}
.notfound__body { font-size: 1.08rem; max-width: 48ch; margin-bottom: 2.5rem; }
.notfound__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.notfound__depth {
  margin-top: 4rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--foam-dim);
  opacity: .55;
}

@media (max-width: 520px) {
  .notfound__actions { flex-direction: column; }
  .notfound__actions .btn { width: 100%; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Language switch
   ========================================================================== */

.lang-switch {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--foam-dim);
  padding: .5rem .25rem;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.lang-switch:hover { color: var(--foam); border-bottom-color: var(--current); }
.lang-switch:active { color: var(--current); }
/* The Arabic label is set in Arabic, so it must not be letter-spaced or
   uppercased — both break the script's joining. */
.lang-switch[lang="ar"] {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  letter-spacing: normal;
  font-size: .86rem;
}
.mobile-nav .lang-switch { font-size: 1.1rem; padding: 0; border-bottom: 0; }

@media (max-width: 380px) {
  .site-header__actions .lang-switch { display: none; }
}

/* ==========================================================================
   Arabic typography

   Fraunces and Inter Tight have no Arabic coverage, so the Arabic page runs
   on IBM Plex Sans Arabic — the Arabic companion to the IBM Plex Mono already
   in the system, which keeps both languages in one type family rather than
   two unrelated voices.

   Two rules matter more than the rest:
   - letter-spacing must be normal. Arabic is cursive; tracking pulls the
     joins apart and renders the word broken.
   - font-style must be normal. Arabic has no italic, so an italic request is
     synthesised as a mechanical slant that reads as a rendering fault.
   ========================================================================== */

[lang="ar"] {
  --font-display: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  /* Latin digits still resolve to Plex Mono; Arabic glyphs fall through to
     Plex Sans Arabic, so depth readings keep their instrument feel. */
  --font-mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', 'Segoe UI', monospace;
}

[lang="ar"] body,
[lang="ar"] p { line-height: 1.75; }

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3 {
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.35;
}
/* ch is measured off the "0" glyph, so a measure tuned for English clamps
   Arabic far too early and strands single words on their own line. */
[lang="ar"] .hero__headline { line-height: 1.25; max-width: 20ch; }
[lang="ar"] h2 { max-width: 24ch; }

/* every tracked or slanted run on the page, reset for Arabic */
[lang="ar"] .eyebrow,
[lang="ar"] .crew__role,
[lang="ar"] .crew__rank,
[lang="ar"] .crew__creds li,
[lang="ar"] .depth-rail__label,
[lang="ar"] .depth-rail__num,
[lang="ar"] .dive-log__row--head,
[lang="ar"] .dive-log__row span[data-label]::before,
[lang="ar"] .service__meta,
[lang="ar"] .site-footer h3,
[lang="ar"] .site-footer__brand p,
[lang="ar"] .skip-link,
[lang="ar"] .club__facts li { letter-spacing: normal; }

[lang="ar"] .hero__headline span,
[lang="ar"] blockquote p,
[lang="ar"] .crew__creed { font-style: normal; }
/* the pull-quote loses italic, so weight carries the emphasis instead */
[lang="ar"] blockquote p { font-weight: 500; }

/* ==========================================================================
   RTL layout

   Scoped overrides rather than a rewrite to logical properties: the same
   result, but it leaves every existing LTR rule untouched.
   ========================================================================== */

[dir="rtl"] .skip-link { left: auto; right: 1rem; }

/* depth rail moves to the left edge and reads outward from it */
[dir="rtl"] .depth-rail { right: auto; left: 1.75rem; }
[dir="rtl"] .depth-rail__marks { right: auto; left: 1.25rem; text-align: left; }

/* the mobile drawer now flies in from the left */
[dir="rtl"] .mobile-nav { transform: translateX(-100%); }
[dir="rtl"] .mobile-nav[data-state="open"] { transform: translateX(0); }

/* hero scrim darkens the side the type actually sits on */
[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(to top,
      var(--ink) 1%,
      rgba(7,24,38,.60) 20%,
      rgba(7,24,38,.20) 48%,
      rgba(7,24,38,.34) 74%,
      rgba(7,24,38,.88) 100%),
    linear-gradient(to left,
      rgba(7,24,38,.50) 0%,
      rgba(7,24,38,.12) 40%,
      rgba(7,24,38,0) 64%);
}

[dir="rtl"] .club__facts li { padding-left: 0; padding-right: 1.1rem; }
[dir="rtl"] .club__facts li::before { left: auto; right: 0; }

[dir="rtl"] .captains__inner { border-left: 0; border-right: 2px solid var(--current); }
[dir="rtl"] .captains__lead .eyebrow,
[dir="rtl"] .captains__body,
[dir="rtl"] .captains__lead blockquote p { padding-left: 0; padding-right: 1.5rem; }

[dir="rtl"] .crew__creed {
  padding-left: 0;
  padding-right: 1rem;
  border-left: 0;
  border-right: 1px solid var(--accent);
}

/* the dive-log depth marker sets against the row from the trailing edge */
[dir="rtl"] .dive-log__row:not(.dive-log__row--head)::before { left: auto; right: -12px; }
[dir="rtl"] .dive-log__row:not(.dive-log__row--head):hover > span { transform: translateX(-10px); }