/* ==========================================================================
   Reef by Bangai Labs — marketing site design system
   Implements spec sections 6 (design), 23 (accessibility), 24 (responsive),
   25 (motion). Single stylesheet, no build step, no external requests.

   Brand gradient values were sampled from the approved source artwork
   (assets/source/reef-approved-logo.png) on 2026-07-29:
     bottom-left #00298A · top-left #0054BF · top-right #06CCCA
   Text colours are contrast-verified against WCAG 2.2 AA; the measured ratio
   is noted beside each token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted — no third-party requests, per spec section 26)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand field — sampled from approved artwork. Decorative use only. */
  --brand-blue-deep: #00298a;
  --brand-blue: #0054bf;
  --brand-teal: #06ccca;

  /* Navy surfaces */
  --navy-950: #061627;
  --navy-900: #0b2748;
  --navy-800: #123a68;
  --navy-700: #0a4e8f;

  /* Interactive blues */
  --blue-700: #0054bf; /* 6.9:1 on white — links, primary actions */
  --blue-600: #0d6bd6;
  --blue-500: #1586c4;

  /* Teals */
  --teal-700: #0e7c79; /* 5.0:1 on white — accent text, positive states */
  --teal-500: #19b5b1;
  --teal-300: #65d9d0;

  /* Neutrals */
  --foam-50: #f5fbfc;
  --foam-100: #eaf4f7;
  --white: #ffffff;
  --ink-950: #0a1724;  /* 16.9:1 on white — body text */
  --slate-700: #3d5365; /* 7.9:1 on white — secondary text */
  /* Darkened from #5d7386 (4.9:1) when sections became translucent over the
     reef world: the composite behind muted text is no longer pure white, and
     4.9:1 fell under AA once the water showed through. 5.7:1 on white, and
     still 5.0:1 over the darkest point of the reef. */
  --slate-500: #52697b; /* 5.7:1 on white — muted text */
  --slate-400: #8aa0af; /* decorative / non-text only */
  --border: #dce7ec;
  --border-strong: #c3d6de;

  /* Status — all AA on white */
  --success: #147a55; /* 5.3:1 */
  --warning: #8a5a0c; /* 5.9:1 */
  --error: #b93a46;   /* 5.6:1 */

  /* Role accents (perspective colouring, spec section 6) */
  --role-owner: #0054bf;
  --role-coach: #0e7c79;
  --role-staff: #6d4bb8;
  --role-guardian: #b1560f;
  --role-athlete: #0d6bd6;

  /* Gradients. --grad-hero keeps white text at 8:1 or better everywhere.
     --grad-brand is the sampled artwork field: decorative surfaces only,
     never behind body copy. */
  --grad-hero: linear-gradient(135deg, #061627 0%, #0b2e5c 46%, #0a4e8f 100%);
  --grad-brand: linear-gradient(45deg, #00298a 0%, #0054bf 55%, #06ccca 100%);
  --grad-band: linear-gradient(135deg, #071b33 0%, #0d4f8a 58%, #0e6f8f 100%);

  /* Spacing — 4px base */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s7: 32px;  --s8: 40px;  --s9: 48px;  --s10: 56px;
  --s11: 64px; --s12: 80px; --s13: 104px; --s14: 144px;

  /* Layout */
  --w-content: 1200px;
  --w-wide: 1360px;
  --w-text: 760px;
  --gutter: 20px;
  --section-y: 64px;

  /* Radii */
  --r-card: 18px;
  --r-btn: 12px;
  --r-input: 10px;
  --r-chip: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(7, 27, 51, 0.06), 0 1px 3px rgba(7, 27, 51, 0.04);
  --sh-2: 0 4px 12px rgba(7, 27, 51, 0.07), 0 1px 3px rgba(7, 27, 51, 0.05);
  --sh-3: 0 12px 32px rgba(7, 27, 51, 0.10), 0 2px 8px rgba(7, 27, 51, 0.05);
  --sh-4: 0 24px 64px rgba(6, 22, 39, 0.18), 0 4px 12px rgba(6, 22, 39, 0.08);

  /* Motion (spec section 25) */
  --e-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --d-micro: 180ms;
  --d-enter: 380ms;

  /* Type */
  --f-display: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --header-h: 64px;
  color-scheme: light;
}

@media (min-width: 640px) {
  :root { --gutter: 28px; --section-y: 80px; }
}
@media (min-width: 900px) {
  :root { --gutter: 32px; --section-y: 104px; --header-h: 76px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 48px; --section-y: 120px; }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-950);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* `hidden` makes body a scroll container, which stops position:sticky working
   against the viewport (the pinned stage in section 22). `clip` does the same
   job without establishing one. */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  color: var(--ink-950);
  margin: 0 0 var(--s4);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.35rem + 3.4vw, 3rem); line-height: 1.1; font-weight: 750; }
h2 { font-size: clamp(1.875rem, 1.45rem + 1.9vw, 2.25rem); line-height: 1.15; font-weight: 700; }
h3 { font-size: clamp(1.4375rem, 1.32rem + 0.55vw, 1.625rem); line-height: 1.2; font-weight: 700; }
h4 { font-size: clamp(1.1875rem, 1.16rem + 0.12vw, 1.25rem); line-height: 1.3; font-weight: 650; }

p { margin: 0 0 var(--s5); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-900); }

img, svg, video { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 650; }
ul, ol { margin: 0 0 var(--s5); padding-left: 1.25em; }
li { margin-bottom: var(--s2); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s9) 0; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

:focus-visible {
  outline: 3px solid var(--blue-700);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-dark :focus-visible, .site-footer :focus-visible,
.hero :focus-visible, .page-hero :focus-visible, .band :focus-visible,
.section--dark :focus-visible {
  outline-color: var(--teal-300);
}

::selection { background: #cfe6ff; color: var(--ink-950); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--white);
  color: var(--ink-950);
  font-weight: 650;
  border-radius: 0 0 var(--r-btn) var(--r-btn);
  box-shadow: var(--sh-3);
  transition: top var(--d-micro) var(--e-out);
}
.skip-link:focus { top: 0; }

.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;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--w-wide); }
.wrap--text { max-width: calc(var(--w-text) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--foam { background: var(--foam-50); }
.section--foam-100 { background: var(--foam-100); }
.section--line { border-top: 1px solid var(--border); }

.section--dark {
  background: var(--navy-950);
  color: #e8f1f7;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }

.stack > * + * { margin-top: var(--s5); }
.grid { display: grid; gap: var(--s6); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.split {
  display: grid;
  gap: var(--s9);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s12); }
  .split--wide-visual { grid-template-columns: 5fr 7fr; }
  .split--wide-copy { grid-template-columns: 7fr 5fr; }
  .split--reverse .split__visual { order: -1; }
}

.section-head { max-width: 760px; margin-bottom: var(--s9); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: var(--s4);
}
.section--dark .eyebrow, .on-dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .band .eyebrow { color: var(--teal-300); }

.display {
  font-family: var(--f-display);
  font-size: clamp(2.4375rem, 1.5rem + 4.2vw, 3.75rem);
  line-height: 1.04;
  font-weight: 750;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s5);
  text-wrap: balance;
}
.lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--slate-700);
  max-width: 62ch;
}
.section--dark .lead, .on-dark .lead, .page-hero .lead, .band .lead { color: #c6dcea; }
.small { font-size: 0.875rem; line-height: 1.5; }
.muted { color: var(--slate-500); }
.section--dark .muted, .on-dark .muted, .hero .muted, .page-hero .muted, .band .muted { color: #a9c4d6; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--d-micro) var(--e-out),
              border-color var(--d-micro) var(--e-out),
              color var(--d-micro) var(--e-out),
              box-shadow var(--d-micro) var(--e-out),
              transform var(--d-micro) var(--e-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

.btn--primary {
  background: var(--blue-700);
  color: var(--white);
  box-shadow: var(--sh-2);
}
.btn--primary:hover { background: #00429b; color: var(--white); }

.btn--secondary {
  background: var(--white);
  color: var(--navy-900);
  border-color: var(--border-strong);
  box-shadow: var(--sh-1);
}
.btn--secondary:hover { background: var(--foam-50); border-color: var(--slate-400); color: var(--navy-900); }

.btn--ghost { background: transparent; color: var(--blue-700); padding-inline: 4px; }
.btn--ghost:hover { color: var(--navy-900); text-decoration: underline; }

.on-dark .btn--secondary,
.section--dark .btn--secondary,
.hero .btn--secondary,
.page-hero .btn--secondary,
.band .btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: none;
  backdrop-filter: blur(2px);
}
.on-dark .btn--secondary:hover,
.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover,
.page-hero .btn--secondary:hover,
.band .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--white);
  color: var(--white);
}
.on-dark .btn--ghost, .section--dark .btn--ghost, .hero .btn--ghost, .page-hero .btn--ghost, .band .btn--ghost { color: var(--teal-300); }
.on-dark .btn--ghost:hover, .section--dark .btn--ghost:hover, .hero .btn--ghost:hover, .page-hero .btn--ghost:hover, .band .btn--ghost:hover { color: var(--white); }

.btn--lg { min-height: 54px; padding: 16px 30px; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s7);
}
@media (max-width: 479px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* Text link with arrow — descriptive, never bare "learn more" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  text-decoration: none;
  color: var(--blue-700);
}
.link-arrow::after {
  content: '→';
  transition: transform var(--d-micro) var(--e-out);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .link-arrow:hover::after { transform: none; } }
.on-dark .link-arrow, .section--dark .link-arrow, .hero .link-arrow, .page-hero .link-arrow, .band .link-arrow { color: var(--teal-300); }

/* --------------------------------------------------------------------------
   7. Header + navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background var(--d-micro) var(--e-out),
              border-color var(--d-micro) var(--e-out);
}
/* Transparent over a dark hero until scrolled (spec section 10) */
.site-header--over-dark:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.site-header--over-dark:not(.is-scrolled) .brand-name { color: var(--white); }
.site-header--over-dark:not(.is-scrolled) .nav-link { color: #dbe9f3; }
.site-header--over-dark:not(.is-scrolled) .nav-link:hover { color: var(--white); }
.site-header--over-dark:not(.is-scrolled) .nav-signin { color: var(--white); }
.site-header--over-dark:not(.is-scrolled) .nav-toggle { color: var(--white); border-color: rgba(255,255,255,0.4); }
.site-header--over-dark:not(.is-scrolled) .brand-mark--light { display: block; }
.site-header--over-dark:not(.is-scrolled) .brand-mark--dark { display: none; }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand img { width: 38px; height: 38px; }
.brand-mark--light { display: none; }
.brand-name {
  font-family: var(--f-display);
  font-size: 1.3125rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--navy-900);
  line-height: 1;
}
.brand-endorse {
  display: block;
  font-family: var(--f-body);
  font-size: 0.625rem;
  font-weight: 550;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-top: 2px;
}
.site-header--over-dark:not(.is-scrolled) .brand-endorse { color: #a9c4d6; }

.nav-desktop { display: none; }
@media (min-width: 980px) {
  .nav-desktop { display: flex; align-items: center; gap: var(--s2); margin-inline: auto; }
  .nav-mobile-only { display: none !important; }
}

.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--slate-700);
  text-decoration: none;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav-link:hover { color: var(--navy-900); background: rgba(11, 39, 72, 0.05); }
.nav-link[aria-current='page'] { color: var(--blue-700); font-weight: 650; }
.nav-link .chev {
  width: 9px; height: 9px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--d-micro) var(--e-out);
}
.nav-link[aria-expanded='true'] .chev { transform: rotate(-135deg) translateY(-1px); }

.nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  min-width: 300px;
  padding: var(--s3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--sh-4);
  display: none;
}
.nav-panel[data-open='true'] { display: block; }
.nav-panel--two { min-width: 560px; display: none; }
.nav-panel--two[data-open='true'] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.nav-panel__title {
  font-family: var(--f-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
  padding: var(--s2) var(--s3) var(--s1);
  margin: 0;
}
.nav-panel a {
  display: block;
  padding: 9px var(--s3);
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--ink-950);
  text-decoration: none;
}
.nav-panel a:hover { background: var(--foam-100); color: var(--blue-700); }
.nav-panel a small {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--slate-500);
  margin-top: 1px;
}

.header-actions { display: flex; align-items: center; gap: var(--s3); margin-left: auto; flex: 0 0 auto; }
.nav-signin {
  display: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--slate-700);
  text-decoration: none;
  padding: 8px 4px;
}
.nav-signin:hover { color: var(--blue-700); }
@media (min-width: 640px) { .nav-signin { display: inline-block; } }
.header-actions .btn { min-height: 42px; padding: 10px 18px; font-size: 0.9375rem; }
@media (max-width: 979px) { .header-cta-desktop { display: none; } }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 11px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--navy-900);
  cursor: pointer;
}
@media (min-width: 980px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--d-micro) var(--e-out), opacity var(--d-micro) var(--e-out);
}
.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); }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--white);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s6) 0 var(--s12);
  display: none;
}
.nav-drawer[data-open='true'] { display: block; }
@media (min-width: 980px) { .nav-drawer { display: none !important; } }
body.nav-open { overflow: hidden; }

.nav-drawer details {
  border-bottom: 1px solid var(--border);
}
.nav-drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy-900);
  cursor: pointer;
  list-style: none;
  min-height: 48px;
}
.nav-drawer summary::-webkit-details-marker { display: none; }
.nav-drawer summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--slate-500);
  border-bottom: 2px solid var(--slate-500);
  transform: rotate(45deg);
  transition: transform var(--d-micro) var(--e-out);
}
.nav-drawer details[open] summary::after { transform: rotate(-135deg); }
.nav-drawer details > div { padding-bottom: var(--s4); }
.nav-drawer details a,
.nav-drawer > .wrap > a {
  display: block;
  padding: 11px 0 11px var(--s4);
  font-size: 0.9375rem;
  color: var(--slate-700);
  text-decoration: none;
  border-left: 2px solid var(--border);
  min-height: 44px;
}
.nav-drawer details a:hover { color: var(--blue-700); border-left-color: var(--blue-700); }
.nav-drawer > .wrap > a {
  padding-left: 0;
  border-left: 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy-900);
  padding-block: 16px;
}
.nav-drawer__cta { margin-top: var(--s7); display: grid; gap: var(--s3); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--grad-hero);
  color: #dbe9f3;
  overflow: hidden;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--s10));
  padding-bottom: var(--s12);
}
.hero__glow {
  position: absolute;
  z-index: -1;
  width: 780px; height: 780px;
  right: -18%; top: -34%;
  background: radial-gradient(circle, rgba(6, 204, 202, 0.24) 0%, rgba(6, 204, 202, 0) 66%);
  pointer-events: none;
}
.hero h1 { color: var(--white); }
.hero__body {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: #c6dcea;
  max-width: 56ch;
}
.hero__support {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.875rem;
  color: #a9c4d6;
  max-width: 52ch;
}
.hero--compact { padding-bottom: var(--s10); }
.hero--compact .display { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3rem); }

/* Page hero (interior pages) */
.page-hero {
  background: var(--grad-hero);
  color: #dbe9f3;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--s9));
  padding-bottom: var(--s10);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-hero h1 { color: var(--white); }

/* --------------------------------------------------------------------------
   9. Chips, badges, pills
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-chip);
  background: var(--foam-100);
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-700);
  white-space: nowrap;
}
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); flex: 0 0 auto; }
.on-dark .chip, .section--dark .chip, .hero .chip, .page-hero .chip, .band .chip {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  color: #dbe9f3;
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip--role-owner .chip__dot { background: var(--role-owner); }
.chip--role-coach .chip__dot { background: var(--role-coach); }
.chip--role-staff .chip__dot { background: var(--role-staff); }
.chip--role-guardian .chip__dot { background: var(--role-guardian); }
.chip--role-athlete .chip__dot { background: var(--role-athlete); }

/* Horizontally scrollable chip rail with a visible affordance */
.chip-rail {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding-bottom: var(--s3);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.chip-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s7);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--d-micro) var(--e-out),
              border-color var(--d-micro) var(--e-out),
              transform var(--d-micro) var(--e-out);
}
.card h2, .card h3, .card h4 { margin-bottom: var(--s3); }
/* A card keeps card-scale headings whatever semantic level the page needs,
   so heading order can stay correct without the type jumping. */
.card h2 { font-size: clamp(1.25rem, 1.16rem + 0.4vw, 1.4375rem); line-height: 1.25; }
.card p { font-size: 0.9375rem; color: var(--slate-700); }
.card--link:hover { box-shadow: var(--sh-3); border-color: var(--border-strong); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } }
.card--flat { box-shadow: none; background: var(--foam-50); }
.card--pad-sm { padding: var(--s6); }
.card__foot { margin-top: var(--s5); }

.section--dark .card, .on-dark .card, .hero .card, .page-hero .card, .band .card {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  color: #dbe9f3;
}
.section--dark .card p, .on-dark .card p, .hero .card p, .page-hero .card p, .band .card p { color: #c6dcea; }

/* Capability card with a gradient-field icon */
.cap-card { display: flex; flex-direction: column; height: 100%; }
.cap-card__icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--grad-brand);
  display: grid;
  place-items: center;
  margin-bottom: var(--s5);
  flex: 0 0 auto;
  box-shadow: 0 4px 10px rgba(0, 41, 138, 0.22);
}
.cap-card__icon svg { width: 24px; height: 24px; stroke: var(--white); fill: none; stroke-width: 1.75; }
.cap-card__foot { margin-top: auto; padding-top: var(--s5); }

/* Hero category badge — carries the literal product category so the headline
   is free to express the outcome. Dark ink on the Teal-300 field is 9.0:1. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--f-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #062a2a;
  background: var(--teal-300);
  padding: 6px 13px;
  border-radius: var(--r-chip);
  margin-bottom: var(--s4);
}
/* The brand line, demoted from headline to kicker now that the h1 names the
   category. Teal-300 measures 10.8:1 over the dark end of --grad-hero where
   the copy actually sits, falling to 4.96:1 at the gradient's lightest point —
   still AA for normal text, but do not lighten this token further. */
.hero__brandline {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--teal-300);
  margin: 0 0 var(--s4);
}

/* Scan rail — the eight platform areas compressed into one scannable row.
   It sits directly under the hero and continues the hero's dark field, so the
   page still breaks to Foam exactly once rather than stacking two dark bands.
   Text colours here are checked against --navy-900: white 15.0:1, the sub
   label 8.6:1, the icon teal 8.9:1. Below 1100px it becomes a scrolling rail
   on the same terms as .chip-rail. */
.scan-rail { background: var(--navy-900); }
.scan-rail__list {
  list-style: none;
  margin: 0;
  padding: var(--s7) 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--s2);
}
.scan-rail__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s4);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  text-decoration: none;
  transition: background var(--d-micro) var(--e-out),
              border-color var(--d-micro) var(--e-out),
              transform var(--d-micro) var(--e-out);
}
.scan-rail__link:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}
.scan-rail__link:focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 2px;
}
.scan-rail__icon {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  margin-bottom: var(--s3);
  stroke: var(--teal-300);
  fill: none;
  stroke-width: 1.7;
}
.scan-rail__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.25;
}
.scan-rail__sub {
  margin-top: var(--s1);
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #a9c9dc;
}

@media (max-width: 1099px) {
  .scan-rail__list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .scan-rail__list > li { flex: 0 0 168px; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-rail__link { transition: none; }
  .scan-rail__link:hover { transform: none; }
}

/* Numbered step card */
.step { position: relative; padding-left: 56px; }
.step__num {
  position: absolute;
  left: 0; top: 0;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.9375rem;
  display: grid;
  place-items: center;
}
.section--dark .step__num, .on-dark .step__num, .hero .step__num, .page-hero .step__num, .band .step__num { background: var(--teal-500); color: var(--navy-950); }
.step h3, .step h4 { margin-bottom: var(--s2); }
.step p { font-size: 0.9375rem; color: var(--slate-700); }
.section--dark .step p, .on-dark .step p, .hero .step p, .page-hero .step p, .band .step p { color: #c6dcea; }

/* --------------------------------------------------------------------------
   11. Proof lists and callouts
   -------------------------------------------------------------------------- */

.proof-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.proof-list--2 { gap: var(--s3) var(--s6); }
@media (min-width: 640px) { .proof-list--2 { grid-template-columns: 1fr 1fr; } }
.proof-list li {
  position: relative;
  padding-left: 30px;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--slate-700);
}
.proof-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--foam-100);
  border: 1px solid var(--border-strong);
}
.proof-list li::after {
  content: '';
  position: absolute;
  left: 5px; top: 9px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--teal-700);
  border-bottom: 2px solid var(--teal-700);
  transform: rotate(-45deg);
}
.section--dark .proof-list li, .on-dark .proof-list li, .hero .proof-list li, .page-hero .proof-list li, .band .proof-list li { color: #c6dcea; }
.section--dark .proof-list li::before, .on-dark .proof-list li::before, .hero .proof-list li::before, .page-hero .proof-list li::before, .band .proof-list li::before {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}
.section--dark .proof-list li::after, .on-dark .proof-list li::after, .hero .proof-list li::after, .page-hero .proof-list li::after, .band .proof-list li::after {
  border-color: var(--teal-300);
}

.proof-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.proof-grid li {
  margin: 0;
  padding: var(--s4) var(--s5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy-900);
  display: flex;
  /* Top-aligned so the marker sits on the first line when an entry wraps. */
  align-items: flex-start;
  gap: var(--s3);
}
.proof-grid li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--teal-500);
  flex: 0 0 auto;
}
.section--foam .proof-grid li { background: var(--white); }
.section--dark .proof-grid li, .on-dark .proof-grid li, .hero .proof-grid li, .page-hero .proof-grid li, .band .proof-grid li {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.callout {
  border-left: 4px solid var(--teal-500);
  background: var(--foam-50);
  border-radius: 0 14px 14px 0;
  padding: var(--s6) var(--s7);
}
.callout__claim {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-900);
  margin: 0 0 var(--s3);
  letter-spacing: -0.02em;
}
.callout p { font-size: 0.9375rem; color: var(--slate-700); margin: 0; }
.section--dark .callout, .on-dark .callout, .hero .callout, .page-hero .callout, .band .callout {
  background: rgba(255, 255, 255, 0.055);
  border-left-color: var(--teal-300);
}
.section--dark .callout__claim, .on-dark .callout__claim, .hero .callout__claim, .page-hero .callout__claim, .band .callout__claim { color: var(--white); }
.section--dark .callout p, .on-dark .callout p, .hero .callout p, .page-hero .callout p, .band .callout p { color: #c6dcea; }

.note {
  font-size: 0.875rem;
  color: var(--slate-500);
  border-left: 2px solid var(--border-strong);
  padding-left: var(--s4);
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   12. Role perspective tabs (WAI-ARIA tabs; stacks on small screens)
   -------------------------------------------------------------------------- */

.tabs__list {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding: var(--s1) var(--s1) var(--s5);
  margin: 0 calc(var(--gutter) * -1) 0;
  padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) {
  .tabs__list { margin-inline: 0; padding-inline: var(--s1); overflow: visible; }
}
.tabs__tab {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-chip);
  background: var(--white);
  font-family: var(--f-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--slate-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--d-micro) var(--e-out), color var(--d-micro) var(--e-out),
              border-color var(--d-micro) var(--e-out);
}
.tabs__tab:hover { border-color: var(--slate-400); color: var(--navy-900); }
.tabs__tab[aria-selected='true'] {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
}
.tabs__tab[aria-selected='true'] .chip__dot { background: var(--teal-300); }
.tabs__panel[hidden] { display: none; }

/* Accordion fallback used on narrow screens for the same content */
.accordion { border-top: 1px solid var(--border); }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) 0;
  min-height: 48px;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy-900);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--slate-500);
  border-bottom: 2px solid var(--slate-500);
  transform: rotate(45deg);
  transition: transform var(--d-micro) var(--e-out);
}
.accordion details[open] summary::after { transform: rotate(-135deg); }
.accordion__body { padding-bottom: var(--s6); }
.accordion__body p { font-size: 0.9375rem; color: var(--slate-700); }

/* --------------------------------------------------------------------------
   13. Product frame (UI mockups built from markup — no fake screenshots)
   -------------------------------------------------------------------------- */

.frame {
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--sh-4);
  overflow: hidden;
}
.frame--dark-context { box-shadow: 0 30px 70px rgba(3, 12, 24, 0.45); border-color: rgba(255,255,255,0.14); }
.frame__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 11px var(--s5);
  background: var(--foam-50);
  border-bottom: 1px solid var(--border);
}
.frame__dots { display: flex; gap: 5px; }
.frame__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); display: block; }
.frame__title {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--slate-500);
  letter-spacing: 0.02em;
}
.frame__body { padding: var(--s5); }
.frame__caption {
  font-size: 0.8125rem;
  color: var(--slate-500);
  padding: 0 var(--s5) var(--s5);
  margin: 0;
}

/* Stat / metric tiles used inside frames. Values are illustrative only. */
.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.tile {
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
}
.tile__label {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 0 0 6px;
}
.tile__value {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.1;
  margin: 0;
}
.tile__meta { font-size: 0.75rem; color: var(--slate-500); margin: 4px 0 0; }

.rows { display: grid; gap: var(--s2); }
.row-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 11px var(--s4);
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--white);
  font-size: 0.8125rem;
}
.row-item__main { flex: 1 1 auto; min-width: 0; }
.row-item__title { font-weight: 650; color: var(--navy-900); display: block; }
.row-item__sub { color: var(--slate-500); font-size: 0.75rem; }
.row-item__icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--foam-100);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy-800);
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-chip);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Status never relies on colour alone — each carries a glyph and a word. */
.state--ok { background: #e7f5ee; color: var(--success); border-color: #c3e6d5; }
.state--warn { background: #fdf3e0; color: var(--warning); border-color: #f0dcb8; }
.state--err { background: #fceceb; color: var(--error); border-color: #f2ccd0; }
.state--info { background: #e8f1fd; color: var(--blue-700); border-color: #c9dcf7; }
.state--draft { background: var(--foam-100); color: var(--slate-700); border-color: var(--border-strong); }

.bar-track { height: 7px; border-radius: 4px; background: var(--foam-100); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--grad-brand); }

/* Connector diagram (role → platform) */
.connect {
  position: relative;
  display: grid;
  gap: var(--s4);
}
.connect__hub {
  border-radius: 16px;
  padding: var(--s6);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-align: center;
}
.connect__ring { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* --------------------------------------------------------------------------
   14. Integration + logo-free trust strip
   -------------------------------------------------------------------------- */

.int-card { display: flex; flex-direction: column; gap: var(--s3); height: 100%; }
.int-card__name {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0;
}
.int-card__tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-700);
}

/* --------------------------------------------------------------------------
   15. Conversion band
   -------------------------------------------------------------------------- */

.band {
  background: var(--grad-band);
  color: #dbe9f3;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.band__net { position: absolute; inset: 0; z-index: -1; opacity: 0.4; pointer-events: none; }
.band h2 { color: var(--white); }
.band .lead { color: #c6dcea; }
.band__inner { padding-block: var(--s12); max-width: 720px; }
@media (min-width: 900px) { .band__inner { padding-block: var(--s13); } }

/* Sticky mobile CTA — appears after hero, stops above footer */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform 260ms var(--e-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }
@media (min-width: 980px) { .sticky-cta { display: none; } }

/* --------------------------------------------------------------------------
   16. Breadcrumbs + sticky page nav
   -------------------------------------------------------------------------- */

.crumbs { font-size: 0.8125rem; margin-bottom: var(--s5); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: 6px; color: #a9c4d6; }
.crumbs li + li::before { content: '/'; color: rgba(255, 255, 255, 0.34); }
.crumbs a { color: #c6dcea; text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs [aria-current='page'] { color: var(--white); font-weight: 600; }

.page-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 80;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.page-nav ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: var(--s5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-nav li { margin: 0; flex: 0 0 auto; }
.page-nav a {
  display: block;
  padding: 15px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-700);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.page-nav a:hover { color: var(--navy-900); }
.page-nav a.is-active { color: var(--blue-700); border-bottom-color: var(--blue-700); }

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */

.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s7);
  box-shadow: var(--sh-3);
}
@media (min-width: 640px) { .form-card { padding: var(--s9); } }

.field { margin-bottom: var(--s5); }
.field > label,
.fieldset > legend {
  display: block;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--navy-900);
  margin-bottom: 6px;
}
.field .req { color: var(--error); margin-left: 2px; }
.field .hint { display: block; font-size: 0.8125rem; color: var(--slate-500); font-weight: 400; margin-top: 3px; }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink-950);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  transition: border-color var(--d-micro) var(--e-out), box-shadow var(--d-micro) var(--e-out);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-400); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(0, 84, 191, 0.16);
  outline: 2px solid transparent;
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233D5365' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(185, 58, 70, 0.14);
}
.field__error {
  display: none;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--error);
}
.field__error::before { content: '⚠ '; }
.field.has-error .field__error { display: block; }

.field-row { display: grid; gap: var(--s5); }
@media (min-width: 560px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.check {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--slate-700);
}
.check input[type='checkbox'] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--blue-700);
}

.form-error-summary {
  display: none;
  margin-bottom: var(--s6);
  padding: var(--s5);
  border: 1px solid #f2ccd0;
  border-left: 4px solid var(--error);
  border-radius: 0 12px 12px 0;
  background: #fceceb;
}
.form-error-summary[data-visible='true'] { display: block; }
.form-error-summary h2, .form-error-summary p:first-child {
  font-size: 1rem;
  font-weight: 700;
  color: var(--error);
  margin: 0 0 var(--s2);
  font-family: var(--f-display);
}
.form-error-summary ul { margin: 0; padding-left: 1.1em; font-size: 0.875rem; }
.form-error-summary a { color: var(--error); font-weight: 600; }

.form-success {
  display: none;
  padding: var(--s7);
  border: 1px solid #c3e6d5;
  border-radius: var(--r-card);
  background: #e7f5ee;
}
.form-success[data-visible='true'] { display: block; }
.form-success h2 { color: var(--navy-900); margin-bottom: var(--s3); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-950);
  color: #a9c4d6;
  padding-block: var(--s12) var(--s7);
  font-size: 0.9375rem;
}
.site-footer h2, .site-footer h3 {
  font-family: var(--f-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fb0c6;
  margin: 0 0 var(--s4);
}
.footer-grid { display: grid; gap: var(--s9); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s7); } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: #cfe2ee; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-brand { max-width: 34ch; }
.footer-brand .brand-name { color: var(--white); }
.footer-brand p { font-size: 0.875rem; color: #8fb0c6; margin-top: var(--s4); }
.footer-bottom {
  margin-top: var(--s11);
  padding-top: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s7);
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #8fb0c6;
}
.footer-bottom p { margin: 0; max-width: none; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s5); }

/* --------------------------------------------------------------------------
   19. Motion — reveal on scroll, always safe without JS
   -------------------------------------------------------------------------- */

.reveal { opacity: 1; }
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-enter) var(--e-out), transform var(--d-enter) var(--e-out);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal[data-delay='1'] { transition-delay: 70ms; }
html.js .reveal[data-delay='2'] { transition-delay: 140ms; }
html.js .reveal[data-delay='3'] { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Connector line draw-in used in hero/section visuals */
.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .draw.is-in path {
  animation: draw 1.5s var(--e-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .draw path { stroke-dasharray: none; stroke-dashoffset: 0; }
  html.js .draw.is-in path { animation: none; }
}

/* --------------------------------------------------------------------------
   20. Utilities
   A deliberately small set, so that no page needs an inline style attribute
   and the site can ship a strict Content-Security-Policy.
   -------------------------------------------------------------------------- */

.mt-0 { margin-top: 0; }
.mt-8 { margin-top: var(--s2); }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-12 { margin-top: var(--s3); }
.mt-16 { margin-top: var(--s4); }
.mt-20 { margin-top: var(--s5); }
.mt-24 { margin-top: var(--s6); }
.mt-32 { margin-top: var(--s7); }
.mt-40 { margin-top: var(--s8); }
.mt-48 { margin-top: var(--s9); }
.mt-56 { margin-top: var(--s10); }
.mt-64 { margin-top: var(--s11); }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: var(--s2); }
.mb-12 { margin-bottom: var(--s3); }
.mb-16 { margin-bottom: var(--s4); }
.mb-20 { margin-bottom: var(--s5); }
.mb-24 { margin-bottom: var(--s6); }
.mb-32 { margin-bottom: var(--s7); }
.mb-40 { margin-bottom: var(--s8); }
.mb-48 { margin-bottom: var(--s9); }
.my-8 { margin-block: var(--s2); }

/* Progress-bar fills in illustrative product frames (complete 0-100 range,
   so an illustration never needs an inline style attribute) */
.bar-fill--0 { width: 0%; }
.bar-fill--1 { width: 1%; }
.bar-fill--2 { width: 2%; }
.bar-fill--3 { width: 3%; }
.bar-fill--4 { width: 4%; }
.bar-fill--5 { width: 5%; }
.bar-fill--6 { width: 6%; }
.bar-fill--7 { width: 7%; }
.bar-fill--8 { width: 8%; }
.bar-fill--9 { width: 9%; }
.bar-fill--10 { width: 10%; }
.bar-fill--11 { width: 11%; }
.bar-fill--12 { width: 12%; }
.bar-fill--13 { width: 13%; }
.bar-fill--14 { width: 14%; }
.bar-fill--15 { width: 15%; }
.bar-fill--16 { width: 16%; }
.bar-fill--17 { width: 17%; }
.bar-fill--18 { width: 18%; }
.bar-fill--19 { width: 19%; }
.bar-fill--20 { width: 20%; }
.bar-fill--21 { width: 21%; }
.bar-fill--22 { width: 22%; }
.bar-fill--23 { width: 23%; }
.bar-fill--24 { width: 24%; }
.bar-fill--25 { width: 25%; }
.bar-fill--26 { width: 26%; }
.bar-fill--27 { width: 27%; }
.bar-fill--28 { width: 28%; }
.bar-fill--29 { width: 29%; }
.bar-fill--30 { width: 30%; }
.bar-fill--31 { width: 31%; }
.bar-fill--32 { width: 32%; }
.bar-fill--33 { width: 33%; }
.bar-fill--34 { width: 34%; }
.bar-fill--35 { width: 35%; }
.bar-fill--36 { width: 36%; }
.bar-fill--37 { width: 37%; }
.bar-fill--38 { width: 38%; }
.bar-fill--39 { width: 39%; }
.bar-fill--40 { width: 40%; }
.bar-fill--41 { width: 41%; }
.bar-fill--42 { width: 42%; }
.bar-fill--43 { width: 43%; }
.bar-fill--44 { width: 44%; }
.bar-fill--45 { width: 45%; }
.bar-fill--46 { width: 46%; }
.bar-fill--47 { width: 47%; }
.bar-fill--48 { width: 48%; }
.bar-fill--49 { width: 49%; }
.bar-fill--50 { width: 50%; }
.bar-fill--51 { width: 51%; }
.bar-fill--52 { width: 52%; }
.bar-fill--53 { width: 53%; }
.bar-fill--54 { width: 54%; }
.bar-fill--55 { width: 55%; }
.bar-fill--56 { width: 56%; }
.bar-fill--57 { width: 57%; }
.bar-fill--58 { width: 58%; }
.bar-fill--59 { width: 59%; }
.bar-fill--60 { width: 60%; }
.bar-fill--61 { width: 61%; }
.bar-fill--62 { width: 62%; }
.bar-fill--63 { width: 63%; }
.bar-fill--64 { width: 64%; }
.bar-fill--65 { width: 65%; }
.bar-fill--66 { width: 66%; }
.bar-fill--67 { width: 67%; }
.bar-fill--68 { width: 68%; }
.bar-fill--69 { width: 69%; }
.bar-fill--70 { width: 70%; }
.bar-fill--71 { width: 71%; }
.bar-fill--72 { width: 72%; }
.bar-fill--73 { width: 73%; }
.bar-fill--74 { width: 74%; }
.bar-fill--75 { width: 75%; }
.bar-fill--76 { width: 76%; }
.bar-fill--77 { width: 77%; }
.bar-fill--78 { width: 78%; }
.bar-fill--79 { width: 79%; }
.bar-fill--80 { width: 80%; }
.bar-fill--81 { width: 81%; }
.bar-fill--82 { width: 82%; }
.bar-fill--83 { width: 83%; }
.bar-fill--84 { width: 84%; }
.bar-fill--85 { width: 85%; }
.bar-fill--86 { width: 86%; }
.bar-fill--87 { width: 87%; }
.bar-fill--88 { width: 88%; }
.bar-fill--89 { width: 89%; }
.bar-fill--90 { width: 90%; }
.bar-fill--91 { width: 91%; }
.bar-fill--92 { width: 92%; }
.bar-fill--93 { width: 93%; }
.bar-fill--94 { width: 94%; }
.bar-fill--95 { width: 95%; }
.bar-fill--96 { width: 96%; }
.bar-fill--97 { width: 97%; }
.bar-fill--98 { width: 98%; }
.bar-fill--99 { width: 99%; }
.bar-fill--100 { width: 100%; }

/* Role-dot colouring without inline styles */
.dot--owner { background: var(--role-owner); }
.dot--coach { background: var(--role-coach); }
.dot--staff { background: var(--role-staff); }
.dot--guardian { background: var(--role-guardian); }
.dot--athlete { background: var(--role-athlete); }

/* --------------------------------------------------------------------------
   21. Schedule grid — the signature illustration

   The weekly resource grid is the artifact every one of these organizations
   actually runs on, so the homepage shows one rather than a generic dashboard.
   Lanes are coaches, because a double-booked coach is the conflict an owner
   recognises instantly. Built from markup, never a screenshot.

   Placement uses utility classes (.sc-c*, .sc-r*, .sc-h*) because
   tools/check_site.py forbids inline style attributes.
   -------------------------------------------------------------------------- */

.sched {
  margin: 0;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--sh-4);
  overflow: hidden;
}
.hero .sched, .section--dark .sched, .on-dark .sched {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px rgba(3, 12, 24, 0.45);
}

.sched__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 11px var(--s5);
  background: var(--foam-50);
  border-bottom: 1px solid var(--border);
}
.sched__ttl {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--slate-500);
}

/* The grid keeps its shape on small screens and scrolls inside its own
   container, rather than crushing four lanes into a phone width. */
.sched__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sched__grid {
  display: grid;
  grid-template-columns: 52px repeat(4, minmax(96px, 1fr));
  grid-template-rows: 26px;
  grid-auto-rows: 42px;
  gap: 0 6px;
  padding: var(--s4) var(--s5) var(--s5);
  min-width: 440px;
  position: relative;
}
@media (min-width: 480px) {
  .sched__grid { grid-template-columns: 58px repeat(4, minmax(96px, 1fr)); grid-auto-rows: 46px; }
}

/* Column headings — the coaches */
.sched__cap {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
  min-width: 0;
}
.sched__cap i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  flex: 0 0 auto;
}

/* Time gutter */
.sched__time {
  grid-column: 1;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--slate-400);
  padding-top: 2px;
}

/* Hairline per half-hour, drawn behind the blocks */
.sched__rule {
  grid-column: 2 / -1;
  border-top: 1px dashed var(--border);
  pointer-events: none;
}

/* A placed class */
.sched__block {
  border-radius: 9px;
  padding: 6px 9px;
  margin: 1px 0;
  min-width: 0;
  overflow: hidden;
  background: #e8f4f8;
  border: 1px solid #bfdde6;
  border-left: 3px solid var(--teal-700);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--navy-900);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sched__block em {
  display: block;
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--slate-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched__block--alt { background: #eaf1fd; border-color: #c9dcf7; border-left-color: var(--blue-700); }

/* Staged edit: held as a draft until the schedule is published */
.sched__block--draft {
  background: var(--foam-50);
  border: 1px dashed var(--border-strong);
  border-left: 3px solid var(--slate-400);
  color: var(--slate-700);
}

/* The overlap Reef catches before the save is accepted */
.sched__block--clash {
  background: #fdf3e0;
  border-color: #f0dcb8;
  border-left-color: var(--warning);
}
.sched__flag {
  align-self: start;
  justify-self: start;
  margin-top: 2px;
  z-index: 2;
  box-shadow: var(--sh-2);
}

.sched__caption {
  font-size: 0.8125rem;
  color: var(--slate-500);
  padding: 0 var(--s5) var(--s5);
  margin: 0;
}

/* Placement utilities */
.sc-c1 { grid-column: 1; } .sc-c2 { grid-column: 2; } .sc-c3 { grid-column: 3; }
.sc-c4 { grid-column: 4; } .sc-c5 { grid-column: 5; }
.sc-r1 { grid-row-start: 1; } .sc-r2 { grid-row-start: 2; } .sc-r3 { grid-row-start: 3; }
.sc-r4 { grid-row-start: 4; } .sc-r5 { grid-row-start: 5; } .sc-r6 { grid-row-start: 6; }
.sc-r7 { grid-row-start: 7; } .sc-r8 { grid-row-start: 8; }
.sc-h1 { grid-row-end: span 1; } .sc-h2 { grid-row-end: span 2; } .sc-h3 { grid-row-end: span 3; }

/* One orchestrated moment: the staged block settles, then the clash is flagged.
   Everything is already in its final position without JS or with motion off. */
html.js .sched__block--draft { opacity: 1; }
html.js .reveal .sched__block--draft {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--d-enter) var(--e-out), transform var(--d-enter) var(--e-out);
  transition-delay: 260ms;
}
html.js .reveal.is-in .sched__block--draft { opacity: 1; transform: none; }
html.js .reveal .sched__flag {
  opacity: 0;
  transition: opacity var(--d-enter) var(--e-out);
  transition-delay: 620ms;
}
html.js .reveal.is-in .sched__flag { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal .sched__block--draft,
  html.js .reveal .sched__flag { opacity: 1; transform: none; transition: none; }
}
/* --------------------------------------------------------------------------
   22. Role morph — the hero's autoplaying glass window

   Frosted glass over the reef: the water blurs and saturates behind it, a lit
   rim catches the surface light along the top edge, and a slow shine drifts
   across the whole pane. The previous version failed because its cards were
   5% white on dark water — technically glass, visually mud. Here the glass is
   properly opaque, every layer carries its own rim, and the type sits at full
   strength.

   The same four cards travel between three layouts rather than being swapped
   out, so the window reshapes itself — the tagline, made literal. Geometry is
   per-role custom properties (--x/--y/--w/--h, percentages of the screen) so
   it scales with its container.

   The change is a physical turn: site.js rotates the pane edge-on, swaps the
   layout while it is invisible, then turns it back and drops the cards in.
   -------------------------------------------------------------------------- */

.rm { display: grid; gap: var(--s4); perspective: 1500px; }

.rm__panel {
  position: relative;
  width: 100%;
  aspect-ratio: 380 / 300;
  min-height: 400px;
  border-radius: 18px;
  overflow: hidden;
  transform-origin: 50% 50%;
  background: linear-gradient(158deg,
    rgba(18, 52, 82, 0.62) 0%,
    rgba(8, 30, 52, 0.68) 52%,
    rgba(6, 24, 44, 0.72) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  /* Lit rim along the top edge, plus depth beneath the pane */
  box-shadow:
    0 34px 74px rgba(2, 12, 24, 0.55),
    0 6px 18px rgba(2, 12, 24, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 600ms var(--e-out), box-shadow 600ms var(--e-out);
}
@supports (backdrop-filter: blur(2px)) {
  .rm__panel { backdrop-filter: blur(20px) saturate(155%); }
}

/* The role's accent lifts the rim and the outer glow */
.rm[data-role='owner']    .rm__panel { box-shadow: 0 34px 74px rgba(2,12,24,.55), 0 0 44px rgba(13,107,214,.26), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.06); }
.rm[data-role='coach']    .rm__panel { box-shadow: 0 34px 74px rgba(2,12,24,.55), 0 0 44px rgba(25,181,177,.26), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.06); }
.rm[data-role='guardian'] .rm__panel { box-shadow: 0 34px 74px rgba(2,12,24,.55), 0 0 44px rgba(224,150,80,.24), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.06); }

/* Ambient shine drifting across the pane, always running */
.rm__panel::before {
  content: '';
  position: absolute;
  inset: -30% -60%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(200, 245, 255, 0.09) 47%,
    rgba(235, 252, 255, 0.16) 50%,
    rgba(200, 245, 255, 0.09) 53%,
    transparent 62%);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .rm__panel::before { animation: rm-shine 9s var(--e-out) infinite; }
}
@keyframes rm-shine {
  0%, 100% { transform: translateX(-46%); }
  50%      { transform: translateX(46%); }
}

/* --- title bar ----------------------------------------------------------- */

.rm__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 0.6875rem;
  color: #a9c8da;
}
.rm__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--slate-400);
  transition: background 400ms var(--e-out), box-shadow 400ms var(--e-out);
}
.rm[data-role='owner']    .rm__dot { background: #6fa8f0; box-shadow: 0 0 10px rgba(111,168,240,.8); }
.rm[data-role='coach']    .rm__dot { background: var(--teal-300); box-shadow: 0 0 10px rgba(101,217,208,.8); }
.rm[data-role='guardian'] .rm__dot { background: #f0b784; box-shadow: 0 0 10px rgba(240,183,132,.75); }

.rm__who { font-weight: 650; color: #eaf5fa; letter-spacing: 0.01em; }
.rm__role { display: none; }
.rm[data-role='owner']    .rm__role--owner,
.rm[data-role='coach']    .rm__role--coach,
.rm[data-role='guardian'] .rm__role--guardian { display: inline; }
.rm__when { margin-left: auto; font-variant-numeric: tabular-nums; color: #8fb2c6; }

/* --- the screen the cards live on ---------------------------------------- */

/* Inset from the pane, not padded: the cards are absolutely positioned, so
   padding here would be ignored and they would sit flush against the glass
   edge. The inset is the margin you actually see around the stack. */
.rm__screen {
  position: absolute;
  left: 18px; right: 18px;
  top: 58px; bottom: 18px;
  z-index: 2;
}

.rm-card {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
  border-radius: 15px;
  padding: 15px 17px;
  overflow: hidden;
  /* Each pane of glass gets its own rim, or the stack reads as one flat blur */
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07));
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(2, 12, 24, 0.28);
  /* Slight overshoot so the cards arrive with weight instead of easing flat */
  transition: left 720ms cubic-bezier(0.34, 1.16, 0.44, 1),
              top 720ms cubic-bezier(0.34, 1.16, 0.44, 1),
              width 720ms cubic-bezier(0.34, 1.16, 0.44, 1),
              height 720ms cubic-bezier(0.34, 1.16, 0.44, 1),
              border-color 500ms var(--e-out), background 500ms var(--e-out);
}
.rm-card--2 { transition-delay: 60ms; }
.rm-card--3 { transition-delay: 120ms; }

/* The headline card carries the role's accent */
.rm[data-role='owner'] .rm-card--1 {
  background: linear-gradient(158deg, rgba(80, 150, 240, 0.24), rgba(20, 70, 140, 0.1));
  border-color: rgba(130, 185, 250, 0.55);
}
.rm[data-role='coach'] .rm-card--1 {
  background: linear-gradient(158deg, rgba(60, 205, 200, 0.22), rgba(14, 110, 108, 0.1));
  border-color: rgba(101, 217, 208, 0.55);
}
.rm[data-role='guardian'] .rm-card--1 {
  background: linear-gradient(158deg, rgba(240, 170, 105, 0.22), rgba(150, 85, 25, 0.1));
  border-color: rgba(240, 183, 132, 0.55);
}

/* Owner — the headline number, one companion, one full-width strip */
.rm[data-role='owner'] .rm-card--1 { --x: 0%; --y: 0%; --w: 55%; --h: 46%; }
.rm[data-role='owner'] .rm-card--2 { --x: 62%; --y: 0%; --w: 38%; --h: 46%; }
.rm[data-role='owner'] .rm-card--3 { --x: 0%; --y: 55%; --w: 100%; --h: 45%; }

/* Coach — a class banner, then the roster beside the detail */
.rm[data-role='coach'] .rm-card--1 { --x: 0%; --y: 0%; --w: 100%; --h: 24%; }
.rm[data-role='coach'] .rm-card--2 { --x: 0%; --y: 32%; --w: 53%; --h: 68%; }
.rm[data-role='coach'] .rm-card--3 { --x: 60%; --y: 32%; --w: 40%; --h: 68%; }

/* Guardian — today, what is owed, then the feed */
.rm[data-role='guardian'] .rm-card--1 { --x: 0%; --y: 0%; --w: 55%; --h: 43%; }
.rm[data-role='guardian'] .rm-card--2 { --x: 62%; --y: 0%; --w: 38%; --h: 43%; }
.rm[data-role='guardian'] .rm-card--3 { --x: 0%; --y: 52%; --w: 100%; --h: 48%; }

/* --- the faces ----------------------------------------------------------- */

/* Each card carries all three role faces stacked; only the active one shows.
   The swap runs mid-travel so the content changes while the card is moving. */
.rm-face {
  position: absolute;
  inset: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);
  transition: opacity 300ms var(--e-out) 160ms,
              transform 300ms var(--e-out) 160ms,
              visibility 0s linear 460ms;
  pointer-events: none;
}
/* Nothing in a face may grow past its share of the card */
.rm-face > * { flex: 0 0 auto; min-height: 0; }
.rm[data-role='owner']    .rm-face--owner,
.rm[data-role='coach']    .rm-face--coach,
.rm[data-role='guardian'] .rm-face--guardian {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 300ms var(--e-out) 160ms,
              transform 300ms var(--e-out) 160ms,
              visibility 0s;
}

.rm-face__tag {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93b7cc;
}
.rm[data-role='owner']    .rm-card--1 .rm-face__tag { color: #a8ccfa; }
.rm[data-role='coach']    .rm-card--1 .rm-face__tag { color: var(--teal-300); }
.rm[data-role='guardian'] .rm-card--1 .rm-face__tag { color: #f5cba5; }

.rm-face__big {
  font-family: var(--f-display);
  font-size: clamp(1rem, 0.78rem + 0.8vw, 1.3125rem);
  font-weight: 750;
  line-height: 1.05;
  color: #ffffff;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(2, 12, 24, 0.4);
}
.rm-face__ttl { font-family: var(--f-display); font-size: 0.875rem; font-weight: 700; color: #f2f9fc; line-height: 1.2; }
.rm-face__sub { font-size: 0.6875rem; color: #b4d2e2; line-height: 1.35; }
.rm-face__foot { margin-top: auto; font-size: 0.625rem; color: #cfe4ee; font-variant-numeric: tabular-nums; }

/* A roster, for the coach's view */
.rm-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; align-content: start; }
.rm-list li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.6875rem;
  color: #cfe4ee;
}
.rm-list li::before {
  content: '';
  width: 13px; height: 13px;
  border-radius: 4px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.rm-list li.is-checked::before {
  background: var(--teal-500);
  border-color: var(--teal-300);
  box-shadow: 0 0 8px rgba(25, 181, 177, 0.55);
}

.rm-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; margin-top: 5px; }
.rm-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--teal-500), var(--teal-300)); }


/* --- flare ---------------------------------------------------------------- */

/* The title-bar dot breathes, so the window reads as live */
@media (prefers-reduced-motion: no-preference) {
  html.js .rm__dot { animation: rm-pulse 2.6s var(--e-out) infinite; }
}
@keyframes rm-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.72; }
}

/* An accent rule under the title bar, sliding to the active role */
.rm__bar::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 33.33%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  color: var(--slate-400);
  transition: transform 620ms cubic-bezier(0.34, 1.1, 0.44, 1), color 500ms var(--e-out);
}
.rm[data-role='owner']    .rm__bar::after { transform: translateX(0);    color: #6fa8f0; }
.rm[data-role='coach']    .rm__bar::after { transform: translateX(100%); color: var(--teal-300); }
.rm[data-role='guardian'] .rm__bar::after { transform: translateX(200%); color: #f0b784; }

/* The headline number sits in a soft pool of its role's colour */
.rm-card--1 { position: absolute; }
.rm-card--1::before {
  content: '';
  position: absolute;
  left: -10%; top: -30%;
  width: 70%; height: 130%;
  border-radius: 50%;
  filter: blur(26px);
  opacity: 0.55;
  pointer-events: none;
  transition: background 600ms var(--e-out);
}
.rm[data-role='owner']    .rm-card--1::before { background: rgba(90, 160, 245, 0.5); }
.rm[data-role='coach']    .rm-card--1::before { background: rgba(60, 210, 205, 0.45); }
.rm[data-role='guardian'] .rm-card--1::before { background: rgba(240, 175, 110, 0.42); }

/* Barely-there idle drift, staggered, so the stack is never fully static */
@media (prefers-reduced-motion: no-preference) {
  html.js .rm-card { animation: rm-float 7s ease-in-out infinite alternate; }
  html.js .rm-card--2 { animation-duration: 8.5s; animation-delay: -2s; }
  html.js .rm-card--3 { animation-duration: 6.4s; animation-delay: -4s; }
  /* Only during the flip. Naming it here for .is-settling too would outrank
     the rm-drop rule and cancel the card entrance entirely. */
  html.js .rm.is-flipping .rm-card { animation-name: none; }
}
@keyframes rm-float {
  from { translate: 0 -2px; }
  to   { translate: 0 2px; }
}

/* --- the turn ------------------------------------------------------------

   The role change is a physical turn of the pane, not a crossfade. It rotates
   edge-on, the layout is swapped while it is side-on and invisible, then it
   rotates back and the cards drop into place in sequence. site.js drives it in
   two phases: .is-flipping out, then .is-settling back.
   -------------------------------------------------------------------------- */

.rm.is-flipping .rm__panel {
  transform: rotateY(-90deg) scale(0.88);
  transition: transform 380ms cubic-bezier(0.55, 0, 0.85, 0.3);
}
/* Side-on the cards must jump, not glide, or the old layout slides visibly
   through the turn */
.rm.is-flipping .rm-card,
.rm.is-flipping .rm-face { transition: none; }

.rm.is-settling .rm__panel {
  transform: rotateY(0deg) scale(1);
  transition: transform 440ms cubic-bezier(0.2, 0.9, 0.3, 1.08);
}
.rm.is-settling .rm-card { animation: rm-drop 560ms cubic-bezier(0.22, 1.1, 0.36, 1) backwards; }
.rm.is-settling .rm-card--1 { animation-delay: 90ms;  }
.rm.is-settling .rm-card--2 { animation-delay: 170ms; }
.rm.is-settling .rm-card--3 { animation-delay: 250ms; }
@keyframes rm-drop {
  from { opacity: 0; transform: translate3d(0, -14px, 60px) rotateX(14deg); }
  to   { opacity: 1; transform: none; }
}

/* A brighter sweep fires on top of the ambient shine as the role lands */
.rm__panel::after {
  content: '';
  position: absolute;
  inset: -30% -60%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg,
    transparent 40%,
    rgba(255, 255, 255, 0.34) 50%,
    transparent 60%);
}
.rm.is-settling .rm__panel::after { animation: rm-flare 700ms var(--e-out); }
@keyframes rm-flare {
  0%   { opacity: 0;   transform: translateX(-46%); }
  30%  { opacity: 1; }
  100% { opacity: 0;   transform: translateX(46%); }
}

@media (prefers-reduced-motion: reduce) {
  .rm.is-flipping .rm__panel,
  .rm.is-settling .rm__panel { transform: none; transition: none; }
  .rm.is-settling .rm-card { animation: none; }
  .rm.is-settling .rm__panel::after,
  html.js .rm__panel::before { animation: none; }
  .rm-card, .rm-face { transition: none; }
}

/* --- the controls, beneath the window ------------------------------------ */

.rm__controls { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.rm__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #cfe4ee;
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
  transition: color var(--d-micro) var(--e-out), border-color var(--d-micro) var(--e-out),
              background-color var(--d-micro) var(--e-out);
}
.rm__btn:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.rm__btn i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex: 0 0 auto;
}
.rm__btn[aria-pressed='true'] {
  color: var(--white);
  background: rgba(255, 255, 255, 0.17);
  border-color: rgba(255, 255, 255, 0.55);
}
.rm__btn[aria-pressed='true'] i { opacity: 1; }
.rm__btn[data-role='owner'][aria-pressed='true'] i    { background: #7fb4f5; }
.rm__btn[data-role='coach'][aria-pressed='true'] i    { background: var(--teal-300); }
.rm__btn[data-role='guardian'][aria-pressed='true'] i { background: #f0b784; }

/* Progress line showing time to the next role */
.rm__timer {
  flex: 1 1 60px;
  min-width: 46px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.rm__timer i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
  transform: scaleX(var(--rm-progress, 0));
  transform-origin: left center;
}
html:not(.js) .rm__timer { display: none; }
@media (prefers-reduced-motion: reduce) { .rm__timer { display: none; } }

/* --------------------------------------------------------------------------
   23. Skill ladder — progression, shown as a progression

   Used instead of a fourth identical row-list. Levels are ordered, so the
   numbering here carries real information.
   -------------------------------------------------------------------------- */

.ladder { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.ladder li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  padding: 10px var(--s4) 10px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--white);
  font-size: 0.8125rem;
}
.ladder__lvl {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--foam-100);
  color: var(--navy-800);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.ladder__name { font-weight: 650; color: var(--navy-900); min-width: 0; }
.ladder__name span { display: block; font-weight: 400; font-size: 0.75rem; color: var(--slate-500); }
.ladder li.is-done .ladder__lvl { background: var(--teal-700); color: var(--white); }
.ladder li.is-current { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(25, 181, 177, 0.12); }
.ladder li.is-next { opacity: 0.62; }

/* Numerals line up in data contexts */
.tile__value, .sched__time, .ladder__lvl { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   24. Motion system — page-wide

   An attribute API rather than per-component animation, so every section of
   the page moves without each one needing bespoke CSS:

     data-anim="rise|left|right|scale|wipe|blur"   how an element enters
     data-stagger                                  children enter in sequence
     data-parallax="-0.4 … 0.4"                    drifts against the scroll
     data-tilt                                     leans toward the cursor
     data-count="128"                              counts up when it arrives
     data-split                                    headline rises word by word

   site.js adds .is-in when an element reaches the viewport and writes --py,
   --rx/--ry and --sp for the scroll-linked pieces. Everything is transform and
   opacity only, so it stays on the compositor.

   Nothing here is load-bearing: with no JS, or with reduced motion, every
   element renders in its final state.
   -------------------------------------------------------------------------- */

/* Page scroll progress */
.scroll-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  background: linear-gradient(90deg, var(--brand-blue), var(--teal-500), var(--teal-300));
  transform: scaleX(var(--sp, 0));
  transform-origin: left center;
  pointer-events: none;
}
html:not(.js) .scroll-bar { display: none; }

/* --- entrances ----------------------------------------------------------- */

html.js [data-anim] {
  opacity: 0;
  transition: opacity 760ms var(--e-out), transform 760ms var(--e-out),
              clip-path 760ms var(--e-out), filter 760ms var(--e-out);
  transition-delay: calc(var(--d, 0) * 80ms);
}
html.js [data-anim='rise']  { transform: translate3d(0, 34px, 0); }
html.js [data-anim='left']  { transform: translate3d(-44px, 0, 0); }
html.js [data-anim='right'] { transform: translate3d(44px, 0, 0); }
html.js [data-anim='scale'] { transform: scale(0.92); }
html.js [data-anim='blur']  { filter: blur(9px); transform: translate3d(0, 16px, 0); }
html.js [data-anim='wipe']  { clip-path: inset(0 100% 0 0); opacity: 1; }

html.js [data-anim].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* --- headline word rise --------------------------------------------------- */

.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--w, 0) * 55ms);
}
html.js [data-split].is-in .word > i,
html:not(.js) .word > i { transform: none; }

/* --- scroll-linked drift -------------------------------------------------- */

html.js [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* --- cursor tilt ---------------------------------------------------------- */

html.js [data-tilt] {
  transform: perspective(900px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateZ(0);
  transition: transform 420ms var(--e-out), box-shadow 420ms var(--e-out);
}
html.js [data-tilt].is-tilting { transition: transform 90ms linear, box-shadow 420ms var(--e-out); }
/* Tilt owns the transform, so its entrance is opacity-and-filter only. */
html.js [data-tilt][data-anim] { transform: perspective(900px); }
html.js [data-tilt][data-anim].is-in { transform: perspective(900px); }

/* --- ambient life --------------------------------------------------------- */

.drift { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.drift span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}
.drift span:nth-child(1) {
  width: 520px; height: 520px; top: -14%; right: -6%;
  background: radial-gradient(circle, rgba(25, 181, 177, 0.55), transparent 68%);
}
.drift span:nth-child(2) {
  width: 460px; height: 460px; bottom: -18%; left: -8%;
  background: radial-gradient(circle, rgba(13, 107, 214, 0.5), transparent 68%);
}
.drift span:nth-child(3) {
  width: 360px; height: 360px; top: 34%; left: 42%;
  background: radial-gradient(circle, rgba(0, 41, 138, 0.45), transparent 68%);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .drift span:nth-child(1) { animation: drift-a 19s var(--e-out) infinite alternate; }
  html.js .drift span:nth-child(2) { animation: drift-b 24s var(--e-out) infinite alternate; }
  html.js .drift span:nth-child(3) { animation: drift-a 31s var(--e-out) infinite alternate-reverse; }
}
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-70px, 50px, 0) scale(1.2); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(60px, -44px, 0) scale(0.9); }
}

/* Sections that sit above a drift layer need their content lifted */
.section, .hero, .band { position: relative; }
.wrap { position: relative; z-index: 1; }

/* --- counters ------------------------------------------------------------- */

[data-count] { font-variant-numeric: tabular-nums; }

/* --- everything off ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.js [data-anim],
  html.js [data-anim].is-in {
    opacity: 1; transform: none; filter: none; clip-path: none; transition: none;
  }
  html.js [data-parallax] { transform: none; }
  html.js [data-tilt] { transform: none; transition: none; }
  .word > i { transform: none; transition: none; }
  .drift span { animation: none; }
  .scroll-bar { display: none; }
}

/* --------------------------------------------------------------------------
   25. The reef world — one scene spanning the whole document

   Absolutely positioned across the full height of the page rather than fixed
   to the viewport, so the water scrolls with the reader instead of sitting
   still behind them. Because the layer is as tall as the document, a single
   gradient does the depth work: bright teal at the top of the page, near-black
   at the bottom. No JavaScript is involved in the darkening.

   Everything inside is placed by percentage of the document, so fish, bubbles
   and plankton are distributed the whole way down — wherever the water is
   visible, something is moving in it.

   Decorative throughout: aria-hidden, no requests, and completely still under
   prefers-reduced-motion.
   -------------------------------------------------------------------------- */

html { background: #04182b; }
body { background: transparent; position: relative; }

/* Layered parallax.

   site.js writes --sp (0 → 1 across the document). Each layer takes a bounded
   offset in vh rather than a multiple of scrollY: a true speed multiplier
   would drift metres off-screen on a long page, whereas a fixed budget gives
   the same relative motion between layers and can never run out.

   Far layers lag most, near layers lead slightly, so the water reads as deep
   instead of as one picture sliding past. */
.reef-world {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg,
    #0e7f9e 0%,
    #0a6389 9%,
    #084a70 22%,
    #063553 40%,
    #052740 58%,
    #041c30 76%,
    #030f1d 90%,
    #02090f 100%);
}

/* --- light from the surface: only near the top of the page ---------------- */

.rw__rays {
  position: absolute;
  top: 0; left: -20%; right: -20%;
  height: 130vh;
  transform: translate3d(0, calc(var(--sp, 0) * 14vh), 0);   /* furthest away */
}
.rw__rays i {
  position: absolute;
  top: -20%;
  width: 90px;
  height: 130%;
  background: linear-gradient(180deg, rgba(200, 252, 255, 0.4), rgba(200, 252, 255, 0));
  transform-origin: top center;
  filter: blur(7px);
}
.rw__rays i:nth-child(1) { left: 10%; transform: rotate(9deg);  }
.rw__rays i:nth-child(2) { left: 31%; transform: rotate(5deg);  width: 58px;  }
.rw__rays i:nth-child(3) { left: 55%; transform: rotate(12deg); width: 124px; }
.rw__rays i:nth-child(4) { left: 77%; transform: rotate(7deg);  width: 70px;  }
.rw__rays i:nth-child(5) { left: 92%; transform: rotate(3deg);  width: 46px;  }
@media (prefers-reduced-motion: no-preference) {
  html.js .rw__rays i { animation: ray-sway 13s ease-in-out infinite alternate; }
  html.js .rw__rays i:nth-child(2) { animation-duration: 17s;   animation-delay: -4s;  }
  html.js .rw__rays i:nth-child(3) { animation-duration: 21s;   animation-delay: -9s;  }
  html.js .rw__rays i:nth-child(4) { animation-duration: 15s;   animation-delay: -2s;  }
  html.js .rw__rays i:nth-child(5) { animation-duration: 19.5s; animation-delay: -12s; }
}
@keyframes ray-sway {
  from { opacity: 0.45; transform: rotate(4deg)  scaleY(1); }
  to   { opacity: 1;    transform: rotate(13deg) scaleY(1.08); }
}

.rw__caustics {
  position: absolute;
  top: 0; left: -20%; right: -20%;
  height: 120vh;
  transform: translate3d(0, calc(var(--sp, 0) * 12vh), 0);
  background:
    radial-gradient(closest-side, rgba(140, 235, 240, 0.14), transparent 70%) 10% 16% / 38% 40% no-repeat,
    radial-gradient(closest-side, rgba(140, 235, 240, 0.1),  transparent 70%) 70% 10% / 46% 34% no-repeat,
    radial-gradient(closest-side, rgba(100, 200, 240, 0.11), transparent 70%) 42% 38% / 34% 44% no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .rw__caustics { animation: caustics 26s ease-in-out infinite alternate; }
}
@keyframes caustics {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* --- coral: a shallow bed below the hero, another on the sea floor -------- */

.rw__bed {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  /* Emerge from the water rather than cutting a hard line across whatever
     pane sits above them */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
}
/* Sits on the floor of the first screen, inside the hero, where the water is
   open enough to see it — at 56vh it was hidden behind the first content pane. */
.rw__bed--shallow {
  top: calc(var(--hero-h, 100vh) - 300px);
  height: 300px;
  opacity: 1;
  transform: translate3d(0, calc(var(--sp, 0) * -3vh), 0);
}
/* Mirrored so the floor never reads as the shallow bed scaled up. No vertical
   parallax at all: this one has to sit on the true bottom of the document. */
.rw__bed--deep {
  bottom: 0;
  height: 300px;
  opacity: 0.75;
  transform: scaleX(-1);
}

/* fill-box keeps each shape rotating about its own base rather than the SVG
   viewport origin, which would swing it across the whole scene. */
.rw__bed g { transform-box: fill-box; transform-origin: bottom center; }
@media (prefers-reduced-motion: no-preference) {
  html.js .rw__bed g { animation: sway 9s ease-in-out infinite alternate; }
  html.js .rw__bed g:nth-of-type(2) { animation-duration: 11s;   animation-delay: -3s;   }
  html.js .rw__bed g:nth-of-type(3) { animation-duration: 7.5s;  animation-delay: -5s;   }
  html.js .rw__bed g:nth-of-type(4) { animation-duration: 12.5s; animation-delay: -1.5s; }
  html.js .rw__bed g:nth-of-type(5) { animation-duration: 10s;   animation-delay: -7s;   }
  html.js .rw__bed g:nth-of-type(6) { animation-duration: 8.5s;  animation-delay: -4.5s; }
  html.js .rw__bed g.kelp { animation-name: kelp-sway; animation-duration: 6.5s; }
  html.js .rw__bed g.kelp:nth-of-type(8) { animation-duration: 8s;   animation-delay: -3s; }
  html.js .rw__bed g.kelp:nth-of-type(9) { animation-duration: 5.5s; animation-delay: -1s; }
}
@keyframes sway {
  from { transform: rotate(-1.6deg) scaleY(0.985); }
  to   { transform: rotate(1.6deg)  scaleY(1.015); }
}
@keyframes kelp-sway {
  from { transform: rotate(-5deg) skewX(2deg); }
  to   { transform: rotate(5deg)  skewX(-2deg); }
}

/* --- fish, spread the whole way down the page ---------------------------- */

/* The artwork faces right and .swim travels right — the two must agree or the
   fish swims backwards. .rtl mirrors the artwork AND reverses the travel.

   Per-fish timing lives inside the media query at html.js specificity so it
   beats the `animation:` shorthand on the base rule; a shorthand resets
   duration and delay, which would sync every fish together. */
.rw__fish { position: absolute; inset: 0; transform: translate3d(0, calc(var(--sp, 0) * 3vh), 0); }
.rw__fish i { position: absolute; left: 0; display: block; }
.rw__fish b {
  display: block;
}
.rw__fish svg { display: block; width: 100%; height: auto; }
.rw__fish i.rtl { transform: scaleX(-1); }

/* Three silhouettes are drawn once into a hidden <defs> and each fish is a
   <use> of one of them, so the school costs one copy of the artwork instead of
   forty. Their fills are attributes on the shapes themselves: <use> builds a
   shadow tree, and stylesheet selectors do not reach inside one. Depth is the
   opacity on each <i>, which does still apply. */
.rw__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Placed down the whole document, smaller and dimmer with depth. Four of the
   groups below are schools: same silhouette, same speed, a beat apart, so they
   travel together instead of reading as evenly spaced traffic. */
.rw__fish i:nth-child(1) { top: 16.5%; width: 25px; opacity: 0.83; }
.rw__fish i:nth-child(2) { top: 79.2%; width: 22px; opacity: 0.6; }
.rw__fish i:nth-child(3) { top: 38.5%; width: 24px; opacity: 0.75; }
.rw__fish i:nth-child(4) { top: 83.0%; width: 17px; opacity: 0.62; }
.rw__fish i:nth-child(5) { top: 34.2%; width: 55px; opacity: 0.77; }
.rw__fish i:nth-child(6) { top: 30.7%; width: 46px; opacity: 0.79; }
.rw__fish i:nth-child(7) { top: 50.8%; width: 42px; opacity: 0.68; }
.rw__fish i:nth-child(8) { top: 26.9%; width: 46px; opacity: 0.77; }
.rw__fish i:nth-child(9) { top: 92.6%; width: 34px; opacity: 0.57; }
.rw__fish i:nth-child(10) { top: 78.7%; width: 41px; opacity: 0.61; }
.rw__fish i:nth-child(11) { top: 79.9%; width: 19px; opacity: 0.62; }
.rw__fish i:nth-child(12) { top: 28.1%; width: 22px; opacity: 0.8; }
.rw__fish i:nth-child(13) { top: 58.0%; width: 20px; opacity: 0.67; }
.rw__fish i:nth-child(14) { top: 37.7%; width: 23px; opacity: 0.73; }
.rw__fish i:nth-child(15) { top: 58.6%; width: 19px; opacity: 0.68; }
.rw__fish i:nth-child(16) { top: 35.8%; width: 32px; opacity: 0.73; }
.rw__fish i:nth-child(17) { top: 33.6%; width: 51px; opacity: 0.75; }
.rw__fish i:nth-child(18) { top: 92.3%; width: 25px; opacity: 0.56; }
.rw__fish i:nth-child(19) { top: 78.2%; width: 19px; opacity: 0.62; }
.rw__fish i:nth-child(20) { top: 69.6%; width: 22px; opacity: 0.62; }
.rw__fish i:nth-child(21) { top: 78.6%; width: 21px; opacity: 0.59; }
.rw__fish i:nth-child(22) { top: 82.4%; width: 27px; opacity: 0.58; }
.rw__fish i:nth-child(23) { top: 38.4%; width: 25px; opacity: 0.75; }
.rw__fish i:nth-child(24) { top: 30.0%; width: 56px; opacity: 0.79; }
.rw__fish i:nth-child(25) { top: 83.9%; width: 22px; opacity: 0.59; }
.rw__fish i:nth-child(26) { top: 9.9%; width: 60px; opacity: 0.86; }
.rw__fish i:nth-child(27) { top: 17.2%; width: 25px; opacity: 0.81; }
.rw__fish i:nth-child(28) { top: 48.5%; width: 43px; opacity: 0.72; }
.rw__fish i:nth-child(29) { top: 90.9%; width: 28px; opacity: 0.59; }
.rw__fish i:nth-child(30) { top: 85.5%; width: 33px; opacity: 0.61; }
.rw__fish i:nth-child(31) { top: 53.4%; width: 44px; opacity: 0.72; }
.rw__fish i:nth-child(32) { top: 17.0%; width: 24px; opacity: 0.84; }
.rw__fish i:nth-child(33) { top: 68.3%; width: 33px; opacity: 0.65; }
.rw__fish i:nth-child(34) { top: 54.8%; width: 35px; opacity: 0.7; }
.rw__fish i:nth-child(35) { top: 38.1%; width: 22px; opacity: 0.76; }
.rw__fish i:nth-child(36) { top: 38.5%; width: 25px; opacity: 0.77; }
.rw__fish i:nth-child(37) { top: 57.6%; width: 22px; opacity: 0.7; }
.rw__fish i:nth-child(38) { top: 58.0%; width: 23px; opacity: 0.66; }
.rw__fish i:nth-child(39) { top: 91.7%; width: 40px; opacity: 0.57; }
.rw__fish i:nth-child(40) { top: 58.8%; width: 21px; opacity: 0.67; }
.rw__fish i:nth-child(41) { top: 17.1%; width: 28px; opacity: 0.83; }
.rw__fish i:nth-child(42) { top: 96.7%; width: 36px; opacity: 0.54; }
.rw__fish i:nth-child(43) { top: 98.1%; width: 19px; opacity: 0.52; }
.rw__fish i:nth-child(44) { top: 87.9%; width: 18px; opacity: 0.59; }
.rw__fish i:nth-child(45) { top: 72.2%; width: 39px; opacity: 0.61; }
.rw__fish i:nth-child(46) { top: 16.8%; width: 27px; opacity: 0.8; }
.rw__fish i:nth-child(47) { top: 10.6%; width: 27px; opacity: 0.85; }
.rw__fish i:nth-child(48) { top: 15.8%; width: 24px; opacity: 0.8; }
.rw__fish i:nth-child(49) { top: 74.7%; width: 28px; opacity: 0.64; }
.rw__fish i:nth-child(50) { top: 24.3%; width: 48px; opacity: 0.81; }
.rw__fish i:nth-child(51) { top: 34.0%; width: 44px; opacity: 0.78; }
.rw__fish i:nth-child(52) { top: 9.4%; width: 42px; opacity: 0.86; }
.rw__fish i:nth-child(53) { top: 61.2%; width: 18px; opacity: 0.66; }
.rw__fish i:nth-child(54) { top: 58.2%; width: 19px; opacity: 0.65; }
.rw__fish i:nth-child(55) { top: 79.9%; width: 18px; opacity: 0.6; }
.rw__fish i:nth-child(56) { top: 80.9%; width: 16px; opacity: 0.59; }
.rw__fish i:nth-child(57) { top: 38.8%; width: 22px; opacity: 0.74; }
.rw__fish i:nth-child(58) { top: 78.2%; width: 22px; opacity: 0.59; }

@media (prefers-reduced-motion: no-preference) {
  html.js .rw__fish i { animation: swim 52s linear infinite, bob 5s ease-in-out infinite alternate; }
  html.js .rw__fish i:nth-child(1) { animation-duration: 50.6s, 8.2s; animation-delay: -21.1s, -7.8s; }
  html.js .rw__fish i:nth-child(2) { animation-duration: 49.2s, 7.5s; animation-delay: -5.9s, -2.5s; }
  html.js .rw__fish i:nth-child(3) { animation-duration: 55.1s, 6.9s; animation-delay: -21.9s, -0.4s; }
  html.js .rw__fish i:nth-child(4) { animation-duration: 51.9s, 3.9s; animation-delay: -32.5s, -2.3s; }
  html.js .rw__fish i:nth-child(5) { animation-duration: 49.9s, 3.8s; animation-delay: -21.2s, -4.0s; }
  html.js .rw__fish i:nth-child(6) { animation-duration: 38.2s, 4.8s; animation-delay: -38.1s, -3.8s; }
  html.js .rw__fish i:nth-child(7) { animation-duration: 63.9s, 7.3s; animation-delay: -19.9s, -6.6s; }
  html.js .rw__fish i:nth-child(8) { animation-duration: 46.9s, 5.0s; animation-delay: -31.5s, -7.7s; }
  html.js .rw__fish i:nth-child(9) { animation-duration: 72.0s, 5.3s; animation-delay: -40.6s, -4.5s; }
  html.js .rw__fish i:nth-child(10) { animation-duration: 67.0s, 5.5s; animation-delay: -54.5s, -3.7s; }
  html.js .rw__fish i:nth-child(11) { animation-duration: 74.2s, 6.6s; animation-delay: -52.7s, -0.6s; }
  html.js .rw__fish i:nth-child(12) { animation-duration: 69.2s, 5.0s; animation-delay: -43.9s, -0.9s; }
  html.js .rw__fish i:nth-child(13) { animation-duration: 48.8s, 4.2s; animation-delay: -15.0s, -3.5s; }
  html.js .rw__fish i:nth-child(14) { animation-duration: 55.1s, 8.1s; animation-delay: -26.4s, -0.1s; }
  html.js .rw__fish i:nth-child(15) { animation-duration: 48.8s, 5.2s; animation-delay: -13.7s, -4.6s; }
  html.js .rw__fish i:nth-child(16) { animation-duration: 73.9s, 4.6s; animation-delay: -30.3s, -1.4s; }
  html.js .rw__fish i:nth-child(17) { animation-duration: 50.0s, 7.3s; animation-delay: -26.8s, -3.8s; }
  html.js .rw__fish i:nth-child(18) { animation-duration: 55.1s, 5.3s; animation-delay: -0.6s, -4.4s; }
  html.js .rw__fish i:nth-child(19) { animation-duration: 49.2s, 7.3s; animation-delay: -2.9s, -5.2s; }
  html.js .rw__fish i:nth-child(20) { animation-duration: 44.9s, 4.0s; animation-delay: -16.1s, -2.7s; }
  html.js .rw__fish i:nth-child(21) { animation-duration: 49.2s, 8.0s; animation-delay: -4.0s, -5.4s; }
  html.js .rw__fish i:nth-child(22) { animation-duration: 53.5s, 7.0s; animation-delay: -11.0s, -7.9s; }
  html.js .rw__fish i:nth-child(23) { animation-duration: 55.1s, 5.9s; animation-delay: -23.8s, -7.6s; }
  html.js .rw__fish i:nth-child(24) { animation-duration: 34.7s, 8.3s; animation-delay: -20.6s, -5.1s; }
  html.js .rw__fish i:nth-child(25) { animation-duration: 41.3s, 6.2s; animation-delay: -39.1s, -1.9s; }
  html.js .rw__fish i:nth-child(26) { animation-duration: 65.9s, 5.3s; animation-delay: -41.6s, -3.7s; }
  html.js .rw__fish i:nth-child(27) { animation-duration: 50.6s, 7.0s; animation-delay: -27.4s, -5.6s; }
  html.js .rw__fish i:nth-child(28) { animation-duration: 35.0s, 6.8s; animation-delay: -19.0s, -5.5s; }
  html.js .rw__fish i:nth-child(29) { animation-duration: 77.9s, 3.7s; animation-delay: -25.0s, -2.3s; }
  html.js .rw__fish i:nth-child(30) { animation-duration: 37.9s, 8.4s; animation-delay: -31.7s, -5.8s; }
  html.js .rw__fish i:nth-child(31) { animation-duration: 71.4s, 7.8s; animation-delay: -12.9s, -6.1s; }
  html.js .rw__fish i:nth-child(32) { animation-duration: 50.6s, 3.8s; animation-delay: -24.3s, -2.2s; }
  html.js .rw__fish i:nth-child(33) { animation-duration: 53.9s, 6.4s; animation-delay: -44.3s, -3.2s; }
  html.js .rw__fish i:nth-child(34) { animation-duration: 87.0s, 5.0s; animation-delay: -63.9s, -0.6s; }
  html.js .rw__fish i:nth-child(35) { animation-duration: 55.1s, 5.0s; animation-delay: -25.6s, -6.0s; }
  html.js .rw__fish i:nth-child(36) { animation-duration: 55.1s, 4.4s; animation-delay: -20.2s, -3.7s; }
  html.js .rw__fish i:nth-child(37) { animation-duration: 48.8s, 6.2s; animation-delay: -11.3s, -2.8s; }
  html.js .rw__fish i:nth-child(38) { animation-duration: 48.8s, 5.7s; animation-delay: -12.5s, -7.1s; }
  html.js .rw__fish i:nth-child(39) { animation-duration: 68.2s, 3.7s; animation-delay: -44.4s, -6.4s; }
  html.js .rw__fish i:nth-child(40) { animation-duration: 48.8s, 6.7s; animation-delay: -9.2s, -7.2s; }
  html.js .rw__fish i:nth-child(41) { animation-duration: 50.6s, 4.7s; animation-delay: -26.5s, -1.8s; }
  html.js .rw__fish i:nth-child(42) { animation-duration: 57.1s, 4.2s; animation-delay: -45.8s, -5.8s; }
  html.js .rw__fish i:nth-child(43) { animation-duration: 56.1s, 3.8s; animation-delay: -24.0s, -4.7s; }
  html.js .rw__fish i:nth-child(44) { animation-duration: 68.8s, 4.5s; animation-delay: -11.3s, -1.2s; }
  html.js .rw__fish i:nth-child(45) { animation-duration: 87.4s, 4.9s; animation-delay: -28.1s, -5.7s; }
  html.js .rw__fish i:nth-child(46) { animation-duration: 50.6s, 3.8s; animation-delay: -23.8s, -6.8s; }
  html.js .rw__fish i:nth-child(47) { animation-duration: 78.5s, 8.2s; animation-delay: -42.6s, -0.6s; }
  html.js .rw__fish i:nth-child(48) { animation-duration: 50.6s, 8.2s; animation-delay: -23.4s, -3.5s; }
  html.js .rw__fish i:nth-child(49) { animation-duration: 50.0s, 5.6s; animation-delay: -47.6s, -1.5s; }
  html.js .rw__fish i:nth-child(50) { animation-duration: 69.6s, 4.5s; animation-delay: -28.5s, -7.3s; }
  html.js .rw__fish i:nth-child(51) { animation-duration: 75.2s, 6.2s; animation-delay: -15.7s, -3.4s; }
  html.js .rw__fish i:nth-child(52) { animation-duration: 41.1s, 8.2s; animation-delay: -34.7s, -5.8s; }
  html.js .rw__fish i:nth-child(53) { animation-duration: 37.6s, 5.4s; animation-delay: -23.0s, -4.0s; }
  html.js .rw__fish i:nth-child(54) { animation-duration: 48.8s, 7.3s; animation-delay: -10.9s, -1.0s; }
  html.js .rw__fish i:nth-child(55) { animation-duration: 49.2s, 6.6s; animation-delay: -4.7s, -7.4s; }
  html.js .rw__fish i:nth-child(56) { animation-duration: 85.2s, 5.2s; animation-delay: -4.0s, -6.8s; }
  html.js .rw__fish i:nth-child(57) { animation-duration: 55.1s, 7.7s; animation-delay: -21.8s, -3.3s; }
  html.js .rw__fish i:nth-child(58) { animation-duration: 49.2s, 7.8s; animation-delay: -48.8s, -4.7s; }
  html.js .rw__fish i.rtl { animation-name: swim-rtl, bob; }
}
html:not(.js) .rw__fish i:nth-child(n+5) { display: none; }
html:not(.js) .rw__fish i { transform: translateX(30vw); }

@keyframes swim {
  from { transform: translateX(-14vw) scaleX(1); }
  to   { transform: translateX(114vw) scaleX(1); }
}
/* Mirrored artwork travelling the other way, so it still swims nose-first */
@keyframes swim-rtl {
  from { transform: translateX(114vw) scaleX(-1); }
  to   { transform: translateX(-14vw) scaleX(-1); }
}
@keyframes bob {
  from { translate: 0 -7px; }
  to   { translate: 0 7px; }
}

/* --- plankton ------------------------------------------------------------ */

.rw__motes { position: absolute; inset: 0; transform: translate3d(0, calc(var(--sp, 0) * 7vh), 0); }
.rw__motes i {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(215, 250, 255, 0.95);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .rw__motes i { animation: mote 19s ease-in-out infinite alternate; }
  html.js .rw__motes i:nth-child(even) { animation-duration: 26s; animation-delay: -8s;  }
  html.js .rw__motes i:nth-child(3n)   { animation-duration: 31s; animation-delay: -14s; }
  html.js .rw__motes i:nth-child(4n)   { animation-duration: 22s; animation-delay: -4s;  }
}
/* Spread down the full document so plankton is present at any scroll position */


.rw__motes i:nth-child(1) { top: 0.5%; left: 27.8%; }
.rw__motes i:nth-child(2) { top: 3.1%; left: 14.2%; }
.rw__motes i:nth-child(3) { top: 6.0%; left: 13.1%; }
.rw__motes i:nth-child(4) { top: 7.9%; left: 15.1%; }
.rw__motes i:nth-child(5) { top: 9.9%; left: 44.7%; }
.rw__motes i:nth-child(6) { top: 12.5%; left: 24.8%; }
.rw__motes i:nth-child(7) { top: 15.1%; left: 16.3%; }
.rw__motes i:nth-child(8) { top: 16.8%; left: 10.2%; }
.rw__motes i:nth-child(9) { top: 18.8%; left: 71.7%; }
.rw__motes i:nth-child(10) { top: 20.8%; left: 69.8%; }
.rw__motes i:nth-child(11) { top: 23.4%; left: 69.5%; }
.rw__motes i:nth-child(12) { top: 26.7%; left: 21.0%; }
.rw__motes i:nth-child(13) { top: 27.2%; left: 21.6%; }
.rw__motes i:nth-child(14) { top: 31.0%; left: 12.5%; }
.rw__motes i:nth-child(15) { top: 32.7%; left: 51.8%; }
.rw__motes i:nth-child(16) { top: 35.0%; left: 90.8%; }
.rw__motes i:nth-child(17) { top: 37.3%; left: 49.9%; }
.rw__motes i:nth-child(18) { top: 39.4%; left: 95.0%; }
.rw__motes i:nth-child(19) { top: 41.0%; left: 30.7%; }
.rw__motes i:nth-child(20) { top: 44.2%; left: 87.3%; }
.rw__motes i:nth-child(21) { top: 46.2%; left: 8.8%; }
.rw__motes i:nth-child(22) { top: 48.2%; left: 78.2%; }
.rw__motes i:nth-child(23) { top: 51.4%; left: 39.3%; }
.rw__motes i:nth-child(24) { top: 52.2%; left: 51.9%; }
.rw__motes i:nth-child(25) { top: 55.6%; left: 45.2%; }
.rw__motes i:nth-child(26) { top: 56.5%; left: 83.0%; }
.rw__motes i:nth-child(27) { top: 59.5%; left: 26.2%; }
.rw__motes i:nth-child(28) { top: 62.5%; left: 85.9%; }
.rw__motes i:nth-child(29) { top: 63.3%; left: 81.2%; }
.rw__motes i:nth-child(30) { top: 65.9%; left: 7.4%; }
.rw__motes i:nth-child(31) { top: 68.9%; left: 11.2%; }
.rw__motes i:nth-child(32) { top: 70.6%; left: 29.7%; }
.rw__motes i:nth-child(33) { top: 73.1%; left: 43.3%; }
.rw__motes i:nth-child(34) { top: 76.0%; left: 32.1%; }
.rw__motes i:nth-child(35) { top: 78.5%; left: 29.0%; }
.rw__motes i:nth-child(36) { top: 79.6%; left: 66.4%; }
.rw__motes i:nth-child(37) { top: 81.8%; left: 31.0%; }
.rw__motes i:nth-child(38) { top: 84.7%; left: 36.0%; }
.rw__motes i:nth-child(39) { top: 87.6%; left: 90.8%; }
.rw__motes i:nth-child(40) { top: 89.2%; left: 3.8%; }
.rw__motes i:nth-child(41) { top: 91.2%; left: 13.6%; }
.rw__motes i:nth-child(42) { top: 94.1%; left: 84.3%; }
.rw__motes i:nth-child(43) { top: 96.5%; left: 89.1%; }
.rw__motes i:nth-child(44) { top: 97.2%; left: 72.5%; }

@keyframes mote {
  from { transform: translate3d(-14px, 10px, 0); opacity: 0.18; }
  to   { transform: translate3d(18px, -14px, 0); opacity: 0.8; }
}

/* --- bubbles, the whole way down ----------------------------------------- */

/* Placed by percentage of the document and rising a short distance, so there
   are bubbles in view at every scroll position rather than only at the foot
   of the page. */
.rw__bubbles { position: absolute; inset: 0; transform: translate3d(0, calc(var(--sp, 0) * -2vh), 0); }
.rw__bubbles i {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(205, 250, 255, 0.8);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.6), rgba(190, 245, 250, 0.1));
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .rw__bubbles i                 { animation: bubble-a 15s ease-in infinite; }
  html.js .rw__bubbles i:nth-child(4n+2) { animation-name: bubble-b; }
  html.js .rw__bubbles i:nth-child(4n+3) { animation-name: bubble-c; }
  html.js .rw__bubbles i:nth-child(4n)   { animation-name: bubble-d; }
  html.js .rw__bubbles i:nth-child(1) { animation-duration: 14.7s; animation-delay: -3.8s; }
  html.js .rw__bubbles i:nth-child(2) { animation-duration: 16.3s; animation-delay: -8.4s; }
  html.js .rw__bubbles i:nth-child(3) { animation-duration: 15.2s; animation-delay: -10.3s; }
  html.js .rw__bubbles i:nth-child(4) { animation-duration: 15.2s; animation-delay: -0.2s; }
  html.js .rw__bubbles i:nth-child(5) { animation-duration: 17.4s; animation-delay: -1.4s; }
  html.js .rw__bubbles i:nth-child(6) { animation-duration: 12.0s; animation-delay: -7.7s; }
  html.js .rw__bubbles i:nth-child(7) { animation-duration: 14.0s; animation-delay: -4.5s; }
  html.js .rw__bubbles i:nth-child(8) { animation-duration: 11.1s; animation-delay: -2.3s; }
  html.js .rw__bubbles i:nth-child(9) { animation-duration: 15.2s; animation-delay: -12.9s; }
  html.js .rw__bubbles i:nth-child(10) { animation-duration: 9.9s; animation-delay: -7.1s; }
  html.js .rw__bubbles i:nth-child(11) { animation-duration: 14.0s; animation-delay: -10.9s; }
  html.js .rw__bubbles i:nth-child(12) { animation-duration: 15.2s; animation-delay: -7.3s; }
  html.js .rw__bubbles i:nth-child(13) { animation-duration: 12.8s; animation-delay: -11.2s; }
  html.js .rw__bubbles i:nth-child(14) { animation-duration: 15.5s; animation-delay: -13.0s; }
  html.js .rw__bubbles i:nth-child(15) { animation-duration: 12.4s; animation-delay: -10.3s; }
  html.js .rw__bubbles i:nth-child(16) { animation-duration: 21.2s; animation-delay: -3.4s; }
  html.js .rw__bubbles i:nth-child(17) { animation-duration: 9.1s; animation-delay: -1.4s; }
  html.js .rw__bubbles i:nth-child(18) { animation-duration: 19.2s; animation-delay: -12.5s; }
  html.js .rw__bubbles i:nth-child(19) { animation-duration: 14.0s; animation-delay: -8.7s; }
  html.js .rw__bubbles i:nth-child(20) { animation-duration: 18.7s; animation-delay: -14.1s; }
  html.js .rw__bubbles i:nth-child(21) { animation-duration: 20.8s; animation-delay: -15.5s; }
  html.js .rw__bubbles i:nth-child(22) { animation-duration: 13.7s; animation-delay: -1.4s; }
  html.js .rw__bubbles i:nth-child(23) { animation-duration: 21.0s; animation-delay: -14.3s; }
  html.js .rw__bubbles i:nth-child(24) { animation-duration: 13.7s; animation-delay: -4.9s; }
  html.js .rw__bubbles i:nth-child(25) { animation-duration: 11.5s; animation-delay: -4.5s; }
  html.js .rw__bubbles i:nth-child(26) { animation-duration: 12.6s; animation-delay: -10.0s; }
  html.js .rw__bubbles i:nth-child(27) { animation-duration: 14.0s; animation-delay: -3.1s; }
  html.js .rw__bubbles i:nth-child(28) { animation-duration: 13.7s; animation-delay: -6.6s; }
  html.js .rw__bubbles i:nth-child(29) { animation-duration: 14.6s; animation-delay: -13.3s; }
  html.js .rw__bubbles i:nth-child(30) { animation-duration: 9.6s; animation-delay: -1.8s; }
  html.js .rw__bubbles i:nth-child(31) { animation-duration: 10.1s; animation-delay: -9.8s; }
  html.js .rw__bubbles i:nth-child(32) { animation-duration: 21.3s; animation-delay: -14.6s; }
  html.js .rw__bubbles i:nth-child(33) { animation-duration: 18.9s; animation-delay: -11.3s; }
  html.js .rw__bubbles i:nth-child(34) { animation-duration: 10.3s; animation-delay: -7.8s; }
  html.js .rw__bubbles i:nth-child(35) { animation-duration: 14.0s; animation-delay: -0.1s; }
  html.js .rw__bubbles i:nth-child(36) { animation-duration: 21.4s; animation-delay: -6.2s; }
  html.js .rw__bubbles i:nth-child(37) { animation-duration: 15.9s; animation-delay: -3.7s; }
  html.js .rw__bubbles i:nth-child(38) { animation-duration: 10.1s; animation-delay: -5.5s; }
  html.js .rw__bubbles i:nth-child(39) { animation-duration: 13.0s; animation-delay: -9.2s; }
  html.js .rw__bubbles i:nth-child(40) { animation-duration: 14.7s; animation-delay: -7.2s; }
  html.js .rw__bubbles i:nth-child(41) { animation-duration: 15.5s; animation-delay: -2.6s; }
  html.js .rw__bubbles i:nth-child(42) { animation-duration: 20.1s; animation-delay: -13.3s; }
  html.js .rw__bubbles i:nth-child(43) { animation-duration: 12.0s; animation-delay: -2.4s; }
  html.js .rw__bubbles i:nth-child(44) { animation-duration: 13.5s; animation-delay: -12.7s; }
  html.js .rw__bubbles i:nth-child(45) { animation-duration: 13.1s; animation-delay: -5.0s; }
  html.js .rw__bubbles i:nth-child(46) { animation-duration: 9.9s; animation-delay: -2.4s; }
  html.js .rw__bubbles i:nth-child(47) { animation-duration: 11.7s; animation-delay: -5.9s; }
  html.js .rw__bubbles i:nth-child(48) { animation-duration: 14.0s; animation-delay: -5.9s; }
  html.js .rw__bubbles i:nth-child(49) { animation-duration: 20.3s; animation-delay: -7.3s; }
  html.js .rw__bubbles i:nth-child(50) { animation-duration: 12.1s; animation-delay: -11.8s; }
  html.js .rw__bubbles i:nth-child(51) { animation-duration: 12.2s; animation-delay: -1.8s; }
  html.js .rw__bubbles i:nth-child(52) { animation-duration: 12.5s; animation-delay: -2.4s; }
  html.js .rw__bubbles i:nth-child(53) { animation-duration: 13.7s; animation-delay: -0.3s; }
  html.js .rw__bubbles i:nth-child(54) { animation-duration: 19.7s; animation-delay: -11.4s; }
  html.js .rw__bubbles i:nth-child(55) { animation-duration: 18.5s; animation-delay: -9.4s; }
  html.js .rw__bubbles i:nth-child(56) { animation-duration: 13.7s; animation-delay: -9.1s; }
  html.js .rw__bubbles i:nth-child(57) { animation-duration: 10.1s; animation-delay: -5.2s; }
  html.js .rw__bubbles i:nth-child(58) { animation-duration: 15.2s; animation-delay: -3.2s; }
  html.js .rw__bubbles i:nth-child(59) { animation-duration: 21.1s; animation-delay: -4.9s; }
  html.js .rw__bubbles i:nth-child(60) { animation-duration: 19.4s; animation-delay: -13.7s; }
  html.js .rw__bubbles i:nth-child(61) { animation-duration: 11.6s; animation-delay: -11.1s; }
  html.js .rw__bubbles i:nth-child(62) { animation-duration: 11.6s; animation-delay: -6.0s; }
  html.js .rw__bubbles i:nth-child(63) { animation-duration: 12.4s; animation-delay: -7.8s; }
  html.js .rw__bubbles i:nth-child(64) { animation-duration: 13.7s; animation-delay: -11.3s; }
  html.js .rw__bubbles i:nth-child(65) { animation-duration: 12.4s; animation-delay: -0.2s; }
  html.js .rw__bubbles i:nth-child(66) { animation-duration: 12.5s; animation-delay: -8.0s; }
  html.js .rw__bubbles i:nth-child(67) { animation-duration: 16.1s; animation-delay: -10.6s; }
  html.js .rw__bubbles i:nth-child(68) { animation-duration: 18.6s; animation-delay: -8.4s; }
  html.js .rw__bubbles i:nth-child(69) { animation-duration: 9.2s; animation-delay: -3.4s; }
  html.js .rw__bubbles i:nth-child(70) { animation-duration: 12.6s; animation-delay: -2.6s; }
  html.js .rw__bubbles i:nth-child(71) { animation-duration: 10.2s; animation-delay: -0.7s; }
  html.js .rw__bubbles i:nth-child(72) { animation-duration: 12.0s; animation-delay: -10.1s; }
  html.js .rw__bubbles i:nth-child(73) { animation-duration: 16.6s; animation-delay: -14.4s; }
  html.js .rw__bubbles i:nth-child(74) { animation-duration: 12.0s; animation-delay: -3.7s; }
  html.js .rw__bubbles i:nth-child(75) { animation-duration: 20.2s; animation-delay: -16.9s; }
  html.js .rw__bubbles i:nth-child(76) { animation-duration: 20.5s; animation-delay: -5.9s; }
  html.js .rw__bubbles i:nth-child(77) { animation-duration: 9.4s; animation-delay: -4.5s; }
  html.js .rw__bubbles i:nth-child(78) { animation-duration: 15.5s; animation-delay: -5.5s; }
  html.js .rw__bubbles i:nth-child(79) { animation-duration: 19.6s; animation-delay: -13.0s; }
  html.js .rw__bubbles i:nth-child(80) { animation-duration: 9.6s; animation-delay: -1.1s; }
  html.js .rw__bubbles i:nth-child(81) { animation-duration: 15.5s; animation-delay: -15.1s; }
  html.js .rw__bubbles i:nth-child(82) { animation-duration: 15.0s; animation-delay: -7.4s; }
  html.js .rw__bubbles i:nth-child(83) { animation-duration: 21.7s; animation-delay: -14.2s; }
  html.js .rw__bubbles i:nth-child(84) { animation-duration: 12.5s; animation-delay: -0.3s; }
  html.js .rw__bubbles i:nth-child(85) { animation-duration: 17.1s; animation-delay: -17.0s; }
  html.js .rw__bubbles i:nth-child(86) { animation-duration: 14.5s; animation-delay: -7.6s; }
  html.js .rw__bubbles i:nth-child(87) { animation-duration: 12.0s; animation-delay: -6.3s; }
  html.js .rw__bubbles i:nth-child(88) { animation-duration: 10.7s; animation-delay: -4.3s; }
  html.js .rw__bubbles i:nth-child(89) { animation-duration: 9.6s; animation-delay: -5.2s; }
  html.js .rw__bubbles i:nth-child(90) { animation-duration: 15.2s; animation-delay: -9.4s; }
  html.js .rw__bubbles i:nth-child(91) { animation-duration: 14.7s; animation-delay: -0.1s; }
  html.js .rw__bubbles i:nth-child(92) { animation-duration: 17.6s; animation-delay: -10.8s; }
  html.js .rw__bubbles i:nth-child(93) { animation-duration: 18.9s; animation-delay: -14.7s; }
  html.js .rw__bubbles i:nth-child(94) { animation-duration: 13.3s; animation-delay: -7.1s; }
  html.js .rw__bubbles i:nth-child(95) { animation-duration: 12.7s; animation-delay: -3.8s; }
  html.js .rw__bubbles i:nth-child(96) { animation-duration: 11.4s; animation-delay: -2.3s; }
  html.js .rw__bubbles i:nth-child(97) { animation-duration: 12.5s; animation-delay: -6.3s; }
  html.js .rw__bubbles i:nth-child(98) { animation-duration: 9.9s; animation-delay: -8.8s; }
  html.js .rw__bubbles i:nth-child(99) { animation-duration: 19.3s; animation-delay: -13.4s; }
  html.js .rw__bubbles i:nth-child(100) { animation-duration: 14.6s; animation-delay: -11.8s; }
  html.js .rw__bubbles i:nth-child(101) { animation-duration: 18.3s; animation-delay: -14.8s; }
  html.js .rw__bubbles i:nth-child(102) { animation-duration: 10.8s; animation-delay: -9.8s; }
  html.js .rw__bubbles i:nth-child(103) { animation-duration: 19.2s; animation-delay: -5.5s; }
  html.js .rw__bubbles i:nth-child(104) { animation-duration: 15.5s; animation-delay: -7.4s; }
  html.js .rw__bubbles i:nth-child(105) { animation-duration: 9.9s; animation-delay: -9.0s; }
  html.js .rw__bubbles i:nth-child(106) { animation-duration: 9.5s; animation-delay: -2.4s; }
  html.js .rw__bubbles i:nth-child(107) { animation-duration: 9.4s; animation-delay: -4.5s; }
  html.js .rw__bubbles i:nth-child(108) { animation-duration: 21.1s; animation-delay: -20.9s; }
  html.js .rw__bubbles i:nth-child(109) { animation-duration: 9.8s; animation-delay: -7.3s; }
  html.js .rw__bubbles i:nth-child(110) { animation-duration: 15.2s; animation-delay: -15.0s; }
  html.js .rw__bubbles i:nth-child(111) { animation-duration: 19.5s; animation-delay: -12.1s; }
  html.js .rw__bubbles i:nth-child(112) { animation-duration: 15.2s; animation-delay: -12.3s; }
  html.js .rw__bubbles i:nth-child(113) { animation-duration: 15.5s; animation-delay: -10.2s; }
  html.js .rw__bubbles i:nth-child(114) { animation-duration: 18.4s; animation-delay: -2.0s; }
  html.js .rw__bubbles i:nth-child(115) { animation-duration: 12.4s; animation-delay: -2.1s; }
  html.js .rw__bubbles i:nth-child(116) { animation-duration: 11.6s; animation-delay: -8.3s; }
  html.js .rw__bubbles i:nth-child(117) { animation-duration: 13.6s; animation-delay: -0.6s; }
  html.js .rw__bubbles i:nth-child(118) { animation-duration: 14.7s; animation-delay: -11.4s; }
  html.js .rw__bubbles i:nth-child(119) { animation-duration: 11.3s; animation-delay: -5.5s; }
  html.js .rw__bubbles i:nth-child(120) { animation-duration: 21.3s; animation-delay: -6.9s; }
  html.js .rw__bubbles i:nth-child(121) { animation-duration: 21.2s; animation-delay: -13.5s; }
  html.js .rw__bubbles i:nth-child(122) { animation-duration: 12.5s; animation-delay: -3.9s; }
  html.js .rw__bubbles i:nth-child(123) { animation-duration: 20.5s; animation-delay: -9.7s; }
  html.js .rw__bubbles i:nth-child(124) { animation-duration: 13.7s; animation-delay: -1.9s; }
  html.js .rw__bubbles i:nth-child(125) { animation-duration: 10.9s; animation-delay: -6.3s; }
  html.js .rw__bubbles i:nth-child(126) { animation-duration: 9.0s; animation-delay: -7.5s; }
  html.js .rw__bubbles i:nth-child(127) { animation-duration: 15.2s; animation-delay: -5.0s; }
  html.js .rw__bubbles i:nth-child(128) { animation-duration: 11.6s; animation-delay: -0.0s; }
  html.js .rw__bubbles i:nth-child(129) { animation-duration: 11.6s; animation-delay: -2.9s; }
  html.js .rw__bubbles i:nth-child(130) { animation-duration: 15.2s; animation-delay: -6.5s; }
  html.js .rw__bubbles i:nth-child(131) { animation-duration: 12.7s; animation-delay: -10.5s; }
  html.js .rw__bubbles i:nth-child(132) { animation-duration: 16.3s; animation-delay: -1.1s; }
  html.js .rw__bubbles i:nth-child(133) { animation-duration: 15.2s; animation-delay: -2.7s; }
  html.js .rw__bubbles i:nth-child(134) { animation-duration: 10.3s; animation-delay: -7.6s; }
  html.js .rw__bubbles i:nth-child(135) { animation-duration: 10.5s; animation-delay: -2.4s; }
  html.js .rw__bubbles i:nth-child(136) { animation-duration: 12.0s; animation-delay: -11.7s; }
  html.js .rw__bubbles i:nth-child(137) { animation-duration: 20.2s; animation-delay: -3.2s; }
  html.js .rw__bubbles i:nth-child(138) { animation-duration: 12.4s; animation-delay: -5.2s; }
  html.js .rw__bubbles i:nth-child(139) { animation-duration: 12.5s; animation-delay: -10.6s; }
  html.js .rw__bubbles i:nth-child(140) { animation-duration: 14.9s; animation-delay: -7.6s; }
}
/* Geometry only — timing lives in the media query above, where it can outrank
   the `animation:` shorthand. Most bubbles are scattered; ten small groups
   share a position and split one cycle between them, so those read as a vent
   streaming up out of the reef. */
.rw__bubbles i:nth-child(1) { top: 6.1%; left: 81.4%; width: 7px; height: 7px; }
.rw__bubbles i:nth-child(2) { top: 31.5%; left: 30.7%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(3) { top: 10.8%; left: 17.5%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(4) { top: 10.7%; left: 19.8%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(5) { top: 84.2%; left: 61.5%; width: 12px; height: 12px; }
.rw__bubbles i:nth-child(6) { top: 78.8%; left: 27.3%; width: 7px; height: 7px; }
.rw__bubbles i:nth-child(7) { top: 90.9%; left: 14.6%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(8) { top: 88.1%; left: 92.4%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(9) { top: 11.3%; left: 17.0%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(10) { top: 96.6%; left: 30.6%; width: 7px; height: 7px; }
.rw__bubbles i:nth-child(11) { top: 44.5%; left: 57.3%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(12) { top: 11.0%; left: 17.9%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(13) { top: 93.3%; left: 73.6%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(14) { top: 95.5%; left: 11.5%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(15) { top: 96.5%; left: 19.7%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(16) { top: 85.5%; left: 12.6%; width: 16px; height: 16px; }
.rw__bubbles i:nth-child(17) { top: 3.8%; left: 29.0%; width: 14px; height: 14px; }
.rw__bubbles i:nth-child(18) { top: 73.0%; left: 89.0%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(19) { top: 44.5%; left: 56.6%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(20) { top: 7.5%; left: 12.1%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(21) { top: 30.9%; left: 89.0%; width: 16px; height: 16px; }
.rw__bubbles i:nth-child(22) { top: 61.2%; left: 47.1%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(23) { top: 6.3%; left: 37.0%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(24) { top: 84.4%; left: 74.6%; width: 6px; height: 6px; }
.rw__bubbles i:nth-child(25) { top: 68.4%; left: 94.4%; width: 17px; height: 17px; }
.rw__bubbles i:nth-child(26) { top: 45.6%; left: 83.8%; width: 12px; height: 12px; }
.rw__bubbles i:nth-child(27) { top: 45.1%; left: 56.2%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(28) { top: 84.2%; left: 73.1%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(29) { top: 52.2%; left: 24.5%; width: 14px; height: 14px; }
.rw__bubbles i:nth-child(30) { top: 87.5%; left: 79.9%; width: 7px; height: 7px; }
.rw__bubbles i:nth-child(31) { top: 95.8%; left: 88.3%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(32) { top: 2.0%; left: 55.9%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(33) { top: 31.0%; left: 93.9%; width: 13px; height: 13px; }
.rw__bubbles i:nth-child(34) { top: 92.6%; left: 92.8%; width: 7px; height: 7px; }
.rw__bubbles i:nth-child(35) { top: 44.4%; left: 57.8%; width: 7px; height: 7px; }
.rw__bubbles i:nth-child(36) { top: 47.3%; left: 45.4%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(37) { top: 23.3%; left: 58.3%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(38) { top: 84.1%; left: 34.8%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(39) { top: 81.3%; left: 86.4%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(40) { top: 6.8%; left: 80.0%; width: 7px; height: 7px; }
.rw__bubbles i:nth-child(41) { top: 94.7%; left: 12.9%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(42) { top: 76.2%; left: 74.5%; width: 13px; height: 13px; }
.rw__bubbles i:nth-child(43) { top: 78.4%; left: 28.0%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(44) { top: 39.6%; left: 63.3%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(45) { top: 16.4%; left: 11.3%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(46) { top: 47.4%; left: 33.2%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(47) { top: 54.1%; left: 48.8%; width: 13px; height: 13px; }
.rw__bubbles i:nth-child(48) { top: 44.5%; left: 58.6%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(49) { top: 67.5%; left: 48.6%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(50) { top: 35.4%; left: 57.7%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(51) { top: 94.6%; left: 31.0%; width: 7px; height: 7px; }
.rw__bubbles i:nth-child(52) { top: 18.2%; left: 52.1%; width: 7px; height: 7px; }
.rw__bubbles i:nth-child(53) { top: 84.7%; left: 74.0%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(54) { top: 19.9%; left: 85.5%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(55) { top: 13.0%; left: 33.3%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(56) { top: 84.5%; left: 74.1%; width: 6px; height: 6px; }
.rw__bubbles i:nth-child(57) { top: 97.0%; left: 67.6%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(58) { top: 34.7%; left: 81.2%; width: 12px; height: 12px; }
.rw__bubbles i:nth-child(59) { top: 91.6%; left: 30.7%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(60) { top: 43.5%; left: 83.3%; width: 13px; height: 13px; }
.rw__bubbles i:nth-child(61) { top: 48.6%; left: 45.6%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(62) { top: 87.9%; left: 37.6%; width: 7px; height: 7px; }
.rw__bubbles i:nth-child(63) { top: 95.5%; left: 19.1%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(64) { top: 84.5%; left: 74.6%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(65) { top: 95.7%; left: 18.0%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(66) { top: 17.6%; left: 53.9%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(67) { top: 89.1%; left: 71.4%; width: 17px; height: 17px; }
.rw__bubbles i:nth-child(68) { top: 39.4%; left: 75.0%; width: 14px; height: 14px; }
.rw__bubbles i:nth-child(69) { top: 74.9%; left: 32.3%; width: 13px; height: 13px; }
.rw__bubbles i:nth-child(70) { top: 8.5%; left: 66.2%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(71) { top: 46.8%; left: 32.4%; width: 12px; height: 12px; }
.rw__bubbles i:nth-child(72) { top: 79.2%; left: 29.3%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(73) { top: 72.4%; left: 67.4%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(74) { top: 78.8%; left: 28.8%; width: 6px; height: 6px; }
.rw__bubbles i:nth-child(75) { top: 93.9%; left: 63.5%; width: 12px; height: 12px; }
.rw__bubbles i:nth-child(76) { top: 63.3%; left: 43.0%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(77) { top: 1.9%; left: 77.1%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(78) { top: 94.7%; left: 10.9%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(79) { top: 27.5%; left: 53.5%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(80) { top: 20.7%; left: 17.3%; width: 16px; height: 16px; }
.rw__bubbles i:nth-child(81) { top: 94.6%; left: 10.3%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(82) { top: 31.1%; left: 43.9%; width: 14px; height: 14px; }
.rw__bubbles i:nth-child(83) { top: 39.0%; left: 87.4%; width: 12px; height: 12px; }
.rw__bubbles i:nth-child(84) { top: 17.7%; left: 52.4%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(85) { top: 37.5%; left: 92.8%; width: 12px; height: 12px; }
.rw__bubbles i:nth-child(86) { top: 49.2%; left: 46.5%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(87) { top: 78.1%; left: 28.4%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(88) { top: 26.8%; left: 89.1%; width: 13px; height: 13px; }
.rw__bubbles i:nth-child(89) { top: 66.1%; left: 61.9%; width: 17px; height: 17px; }
.rw__bubbles i:nth-child(90) { top: 34.1%; left: 81.5%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(91) { top: 6.4%; left: 81.6%; width: 6px; height: 6px; }
.rw__bubbles i:nth-child(92) { top: 84.0%; left: 4.7%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(93) { top: 64.1%; left: 10.3%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(94) { top: 95.3%; left: 90.9%; width: 16px; height: 16px; }
.rw__bubbles i:nth-child(95) { top: 21.0%; left: 26.6%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(96) { top: 41.0%; left: 30.9%; width: 14px; height: 14px; }
.rw__bubbles i:nth-child(97) { top: 18.6%; left: 52.8%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(98) { top: 48.3%; left: 84.5%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(99) { top: 1.9%; left: 22.8%; width: 16px; height: 16px; }
.rw__bubbles i:nth-child(100) { top: 79.6%; left: 27.5%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(101) { top: 70.2%; left: 6.7%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(102) { top: 86.1%; left: 87.2%; width: 16px; height: 16px; }
.rw__bubbles i:nth-child(103) { top: 3.3%; left: 88.9%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(104) { top: 95.0%; left: 13.3%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(105) { top: 48.9%; left: 18.9%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(106) { top: 94.1%; left: 18.2%; width: 14px; height: 14px; }
.rw__bubbles i:nth-child(107) { top: 63.4%; left: 49.9%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(108) { top: 49.4%; left: 43.5%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(109) { top: 90.0%; left: 71.7%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(110) { top: 33.8%; left: 80.1%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(111) { top: 69.6%; left: 92.9%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(112) { top: 34.4%; left: 80.4%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(113) { top: 95.4%; left: 12.0%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(114) { top: 3.8%; left: 23.2%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(115) { top: 95.7%; left: 19.2%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(116) { top: 87.5%; left: 37.5%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(117) { top: 31.1%; left: 42.5%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(118) { top: 6.1%; left: 79.3%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(119) { top: 3.3%; left: 46.9%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(120) { top: 25.9%; left: 30.8%; width: 14px; height: 14px; }
.rw__bubbles i:nth-child(121) { top: 76.5%; left: 12.4%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(122) { top: 18.3%; left: 53.8%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(123) { top: 50.0%; left: 42.0%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(124) { top: 84.8%; left: 75.4%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(125) { top: 31.4%; left: 47.6%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(126) { top: 50.1%; left: 61.9%; width: 13px; height: 13px; }
.rw__bubbles i:nth-child(127) { top: 10.9%; left: 17.3%; width: 8px; height: 8px; }
.rw__bubbles i:nth-child(128) { top: 87.4%; left: 38.6%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(129) { top: 86.9%; left: 38.5%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(130) { top: 33.8%; left: 82.6%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(131) { top: 20.8%; left: 86.0%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(132) { top: 95.6%; left: 54.9%; width: 14px; height: 14px; }
.rw__bubbles i:nth-child(133) { top: 10.7%; left: 19.3%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(134) { top: 81.7%; left: 75.2%; width: 10px; height: 10px; }
.rw__bubbles i:nth-child(135) { top: 64.1%; left: 8.4%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(136) { top: 78.6%; left: 27.8%; width: 6px; height: 6px; }
.rw__bubbles i:nth-child(137) { top: 36.3%; left: 19.0%; width: 15px; height: 15px; }
.rw__bubbles i:nth-child(138) { top: 96.3%; left: 18.2%; width: 11px; height: 11px; }
.rw__bubbles i:nth-child(139) { top: 18.4%; left: 54.3%; width: 9px; height: 9px; }
.rw__bubbles i:nth-child(140) { top: 73.5%; left: 21.4%; width: 7px; height: 7px; }

@keyframes bubble-a {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(0.6); }
  10%  { opacity: 0.8; }
  40%  { transform: translate3d(20px, -9vh, 0) scale(0.9); }
  75%  { transform: translate3d(-12px, -19vh, 0) scale(1.05); }
  90%  { opacity: 0.3; }
  100% { opacity: 0;   transform: translate3d(6px, -26vh, 0) scale(1.15); }
}
@keyframes bubble-b {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0) scale(0.5); }
  12%  { opacity: 0.65; }
  38%  { transform: translate3d(-22px, -8vh, 0) scale(0.82); }
  72%  { transform: translate3d(10px, -18vh, 0) scale(1); }
  92%  { opacity: 0.25; }
  100% { opacity: 0;    transform: translate3d(-16px, -27vh, 0) scale(1.1); }
}
@keyframes bubble-c {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0) scale(0.7); }
  8%   { opacity: 0.85; }
  35%  { transform: translate3d(9px, -7vh, 0) scale(0.92); }
  62%  { transform: translate3d(30px, -16vh, 0) scale(1.02); }
  88%  { opacity: 0.3;  transform: translate3d(-4px, -22vh, 0) scale(1.1); }
  100% { opacity: 0;    transform: translate3d(21px, -29vh, 0) scale(1.2); }
}
@keyframes bubble-d {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0) scale(0.55); }
  14%  { opacity: 0.7; }
  42%  { transform: translate3d(-16px, -10vh, 0) scale(0.88); }
  74%  { transform: translate3d(-28px, -20vh, 0) scale(1.02); }
  93%  { opacity: 0.22; }
  100% { opacity: 0;    transform: translate3d(-9px, -28vh, 0) scale(1.18); }
}

/* --------------------------------------------------------------------------
   Sections in the water. Full-bleed and flat — floating rounded panels and
   faded edges both read as awkward over a moving background, so surfaces are
   simple translucent planes tinted into the water's own hue.
   -------------------------------------------------------------------------- */

/* Sections in the water. Full-bleed and flat — simple translucent planes
   tinted into the water's own hue. Rounded floating panels, faded edges and
   elliptical light pools were all tried and all read as awkward over a moving
   background; a plain plane does not. */

.section            { background: rgba(237, 246, 249, 0.96); }
.section--foam      { background: rgba(228, 242, 246, 0.96); }
.section--foam-100  { background: rgba(224, 240, 247, 0.96); }
.section--dark      { background: rgba(5, 22, 40, 0.55); }
.hero               { background: linear-gradient(140deg, rgba(4, 18, 34, 0.6) 0%, rgba(5, 34, 62, 0.38) 48%, rgba(4, 44, 74, 0.24) 100%); }
.band               { background: linear-gradient(140deg, rgba(5, 22, 42, 0.62) 0%, rgba(8, 56, 96, 0.4) 58%, rgba(10, 82, 106, 0.3) 100%); }
.page-hero          { background: linear-gradient(140deg, rgba(4, 18, 34, 0.64) 0%, rgba(6, 38, 70, 0.44) 100%); }
.site-footer        { background: rgba(3, 14, 26, 0.86); }

/* Raised surfaces join the water's palette; pure white read as paper cut-outs
   pasted over the reef. The dark-context rules further up are two classes
   deep, so they still win where they should. */
.card, .frame, .form-card, .sched {
  background: #f7fcfd;
  border-color: rgba(163, 213, 224, 0.55);
}
.tile, .row-item, .proof-grid li, .ladder li, .sched__block {
  background: #f2f9fb;
  border-color: rgba(163, 213, 224, 0.5);
}
.frame__bar, .sched__bar { background: #e8f4f7; border-bottom-color: rgba(163, 213, 224, 0.5); }
.card--flat { background: #eef7fa; }
.callout { background: rgba(232, 245, 249, 0.75); }
.tabs__tab { background: #f7fcfd; border-color: rgba(163, 213, 224, 0.55); }
.proof-list li::before { background: #e4f2f6; border-color: rgba(150, 205, 218, 0.8); }
.sched__rule { border-top-color: rgba(163, 213, 224, 0.55); }
.section--foam .proof-grid li { background: #f7fcfd; }

.site-header { background: rgba(240, 249, 251, 0.93); border-bottom-color: rgba(163, 213, 224, 0.5); }
.nav-panel, .nav-drawer { background: #f7fcfd; border-color: rgba(163, 213, 224, 0.55); }
.nav-panel a:hover { background: #e4f2f6; }
.sticky-cta { background: rgba(240, 249, 251, 0.96); border-top-color: rgba(163, 213, 224, 0.5); }
.page-nav { background: rgba(240, 249, 251, 0.95); border-bottom-color: rgba(163, 213, 224, 0.5); }
.btn--secondary { background: #f2f9fb; border-color: rgba(150, 205, 218, 0.85); }
.btn--secondary:hover { background: #e4f2f6; border-color: rgba(120, 185, 202, 0.95); }
.input, .select, .textarea { background: #f7fcfd; border-color: rgba(150, 205, 218, 0.9); }
.bar-track { background: #dcedf2; }

@media (prefers-reduced-motion: reduce) {
  .rw__rays i, .rw__caustics, .rw__bed g, .rw__fish i,
  .rw__bubbles i, .rw__motes i { animation: none; }
  .rw__bubbles i { opacity: 0.32; }
}

/* --------------------------------------------------------------------------
   26. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .nav-drawer, .sticky-cta, .page-nav, .band { display: none !important; }
  body { color: #000; background: #fff; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}