/* === SELF-HOSTED FONTS (generated by build/selfhost_fonts.py) === */
/* Fraunces and Inter served from this origin instead of Google.
   WHY: removes two third-party origins from the critical render path (two extra
   DNS lookups + TLS handshakes before text can paint), and stops every visitor's
   browser announcing itself to Google before the cookie banner is even answered.

   These are the VARIABLE files. Fraunces carries the opsz axis as well as wght,
   which is what Google was serving (family=Fraunces:opsz,wght@...). A weight-only
   file would silently lose optical sizing and change the headings.

   latin-ext faces are declared but only downloaded if a page actually uses those
   characters, unicode-range gates the fetch. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/fraunces-latin.woff2) format('woff2-variations');
  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: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/fraunces-latin-ext.woff2) format('woff2-variations');
  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-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/inter-latin.woff2) format('woff2-variations');
  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-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/inter-latin-ext.woff2) format('woff2-variations');
  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;
}
/* === END SELF-HOSTED FONTS === */

/* ==========================================================================
   Oceana Global Wealth Partners, Design System
   A single source of truth for color, type, spacing, and components.
   Theme: navigation / open water / legacy, restrained, professional.
   ========================================================================== */

:root {
  /* Brand palette, navy + gold, matching the Oceana logo/brand standard */
  --navy-900: #0a2038;   /* deepest navy */
  --navy-800: #123457;   /* primary brand navy (OCEANA wordmark) */
  --navy-700: #1d4a76;   /* interactive navy-blue */
  --navy-600: #2a5c8a;
  /* --teal-600/500 kept as variable NAMES for backward compat, repointed to brand navy-blue (links, interactive) */
  --teal-600: #1d4a76;
  --teal-500: #24557f;
  /* Gold accent family (GLOBAL WEALTH PARTNERS gold) */
  --gold: #c9a227;       /* primary gold accent / buttons */
  --gold-deep: #a97c1e;  /* gold hover / deep */
  --gold-bright: #e2c56b;/* gold on dark backgrounds */
  --gold-ink: #8a6a12;   /* accessible gold text on white (>=4.5:1) */
  /* --seaglass/-100 kept as names, repointed to gold + cream */
  --seaglass: #c9a227;
  --seaglass-100: #f4ecd7;
  --sky-50: #eef3f8;

  /* Neutrals */
  --ink: #16222c;
  --slate: #46586a;      /* body text on light */
  --muted: #61707e;      /* secondary text */
  --line: #e4e8ee;       /* hairline borders */
  --line-warm: #e7e2d6;
  --paper: #ffffff;
  --paper-soft: #f7f9fb; /* soft off-white sections */
  --paper-tint: #eef2f7;
  --error: #b3413a;
  --error-bg: #fbeeed;
  --success: #1f7a5c;
  --success-bg: #eaf6f0;

  /* Category accents (distinct identities within the navy+gold system) */
  --cat-debt: #1d4a76;       /* navy-blue */
  --cat-estate: #3a6ea5;     /* brighter blue */
  --cat-wealth: #b8860b;     /* gold, legacy */
  --cat-business: #123457;   /* deep navy */

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* Radii & shadows */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(14,42,63,.06), 0 2px 8px rgba(14,42,63,.05);
  --shadow-md: 0 6px 20px rgba(14,42,63,.08), 0 2px 6px rgba(14,42,63,.05);
  --shadow-lg: 0 18px 48px rgba(14,42,63,.14);

  --maxw: 1160px;
  --maxw-narrow: 820px;
  --header-h: 76px;
}

/* ------------------------- Reset & base ------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--teal-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy-800); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.35rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
strong { color: var(--ink); }

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--navy-800); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* Visible focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid var(--seaglass);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------- Layout ------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: var(--maxw-narrow); }
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section.tight { padding: clamp(36px, 5vw, 64px) 0; }
.section-soft { background: var(--paper-soft); }
.section-tint { background: var(--paper-tint); }
.section-navy { background: var(--navy-800); color: #cfe0e6; }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }

.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight: 700; color: var(--gold-ink); margin-bottom: 14px;
}
.section-navy .eyebrow { color: var(--gold-bright); }
.lede { font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.6; color: var(--muted); max-width: 62ch; }
.section-navy .lede { color: #b9cdd6; }
.center { text-align: center; }
.center .lede, .center .eyebrow { margin-left: auto; margin-right: auto; }
.measure { max-width: 65ch; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 32px; }

/* ------------------------- Buttons ------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1;
  padding: 15px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--gold); color: var(--navy-900); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-deep); color: var(--navy-900); box-shadow: var(--shadow-md); }
.btn-blue { background: var(--navy-700); color: #fff; }
.btn-blue:hover { background: var(--navy-600); color: #fff; }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy-800); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal-600); color: var(--teal-600); background: var(--seaglass-100); }
.btn-light { background: #fff; color: var(--navy-800); }
.btn-light:hover { background: var(--sky-50); color: var(--navy-800); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color:#fff; }
.btn-lg { padding: 17px 32px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-arrow::after { content: "\2192"; font-size: 1.1em; transition: transform .15s ease; }
.btn:hover .btn-arrow, .btn-arrow:hover::after { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }

.textlink { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.textlink::after { content: "\2192"; transition: transform .15s ease; }
.textlink:hover::after { transform: translateX(3px); }

/* ------------------------- Header / Nav ------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line);
}
.nav {
  height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 42px; width: auto; display: block; }
.nav-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-menu a {
  color: var(--navy-700); font-weight: 600; font-size: .95rem; padding: 10px 13px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 5px;
}
.nav-menu a:hover { color: var(--teal-600); background: var(--seaglass-100); text-decoration: none; }
.nav-menu a[aria-current="page"] { color: var(--teal-600); }
.nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-phone { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .95rem; color: var(--navy-800); white-space: nowrap; }
.nav-phone svg { width: 17px; height: 17px; color: var(--gold-600, #c9a227); flex-shrink: 0; }
.nav-phone:hover { color: var(--gold-600, #c9a227); }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 264px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 8px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 10px 12px; border-radius: var(--r-sm); font-weight: 600; color: var(--navy-800); }
.dropdown a span { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.dropdown a:hover { background: var(--seaglass-100); }
.caret { width: 10px; height: 10px; }

/* Mobile nav */
.nav-toggle {
  display: none; -webkit-appearance: none; appearance: none;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  width: 46px; height: 44px; align-items: center; justify-content: center; cursor: pointer;
  /* iOS Safari paints an unstyled button's text in its system blue, and the bars
     are stroke="currentColor", so colour and appearance must both be set here. */
  color: var(--navy-800); -webkit-tap-highlight-color: transparent;
}
.nav-toggle svg { width: 22px; height: 22px; stroke: var(--navy-800); color: var(--navy-800); }
.nav-toggle svg path { stroke: var(--navy-800); }
.nav-toggle[aria-expanded="true"] { background: var(--seaglass-100); border-color: var(--gold); }
.mobile-drawer {
  position: fixed; inset: var(--header-h) 0 0 0; background: #fff; z-index: 99;
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; padding: 12px 24px 48px;
  visibility: hidden;
}
.mobile-drawer.open { transform: translateX(0); visibility: visible; }
.mobile-drawer ul { list-style: none; margin: 0; padding: 0; }
.mobile-drawer > ul > li { border-bottom: 1px solid var(--line); }
.mobile-drawer a { display: block; padding: 15px 4px; font-weight: 600; font-size: 1.05rem; color: var(--navy-800); }
.mobile-drawer .m-sub a { padding: 11px 4px 11px 18px; font-weight: 500; font-size: .98rem; color: var(--slate); }
.mobile-drawer .m-group-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--teal-600); padding: 16px 4px 4px; font-weight: 700; }
.mobile-cta { margin-top: 24px; display: grid; gap: 12px; }
/* the drawer's generic `a` rule (display:block, left pad) was flattening the CTA
   buttons, restore proper centered button styling with higher specificity. */
.mobile-cta .btn { display: flex; justify-content: center; padding: 15px 26px; }
body.nav-open { overflow: hidden; }

/* ------------------------- Hero ------------------------- */
.hero { position: relative; overflow: hidden; background: var(--navy-800); color: #d6e6ec; --wave-h: clamp(44px, 4.8vw, 78px); }
/* Vertical padding via longhands + higher specificity (.hero .hero-inner) so it
   beats the .container rule the element also carries, otherwise the mobile
   `.container{padding:0 20px}` rule wipes the bottom padding and the stat card
   drops under the wave. Bottom padding always exceeds the wave height (max 78px). */
.hero-inner { position: relative; z-index: 2; }
.hero .hero-inner { padding-top: clamp(64px, 10vw, 120px); padding-bottom: clamp(116px, 15vw, 172px); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .lede { color: #b9cdd6; margin-top: 18px; }
.hero .btn-row { margin-top: 34px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-media { position: relative; }
.hero-media .img-ph { aspect-ratio: 4/5; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.hero-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; pointer-events: none; opacity: .5;
}
.hero-topo { position: absolute; inset: 0; z-index: 0; opacity: .12; pointer-events: none;
  background-image: url("../assets/img/topo.svg"); background-size: 760px; }

/* Stat row */
.stat-row { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.14); }
.stat { min-width: 120px; }
.stat .num { font-family: var(--font-display); font-size: 2.2rem; color: #fff; font-weight: 600; line-height: 1; }
.stat .num span { color: var(--seaglass); }
.stat .label { font-size: .86rem; color: #9fb8c2; margin-top: 6px; }

/* Page hero (interior pages) */
.page-hero { background: var(--navy-800); color: #d6e6ec; position: relative; overflow: hidden; --wave-h: clamp(44px, 4.8vw, 78px); }
.page-hero .hero-inner { padding-top: clamp(52px,7vw,84px); padding-bottom: clamp(104px, 12vw, 140px); max-width: 780px; }
.page-hero h1 { color: #fff; }
.page-hero .lede { color: #b9cdd6; margin-top: 14px; }
.breadcrumb { font-size: .84rem; color: #8faeba; margin-bottom: 18px; }
.breadcrumb a { color: #b9cdd6; }
.breadcrumb span { margin: 0 8px; opacity: .6; }

/* ------------------------- Cards & grids ------------------------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card p:last-child { margin-bottom: 0; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-warm); }

/* Service pathway cards */
.svc-card { position: relative; display: flex; flex-direction: column; border-top: 4px solid var(--teal-600); }
.svc-card .svc-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--seaglass-100); }
.svc-card .svc-icon svg { width: 28px; height: 28px; }
.svc-card .kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.svc-card h3 { margin-bottom: 10px; }
.svc-card ul { list-style: none; margin: 4px 0 20px; padding: 0; }
.svc-card ul li { font-size: .92rem; color: var(--muted); padding: 3px 0 3px 20px; position: relative; }
.svc-card ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-600); }
.svc-card .textlink { margin-top: auto; }
/* per-category accent */
.svc-card.debt { border-top-color: var(--cat-debt); } .svc-card.debt .svc-icon { background: #e7eef7; } .svc-card.debt li::before, .svc-card.debt .textlink { color: var(--cat-debt); } .svc-card.debt li::before{background:var(--cat-debt);}
.svc-card.estate { border-top-color: var(--cat-estate); } .svc-card.estate .svc-icon { background: #e8f0f9; } .svc-card.estate li::before{background:var(--cat-estate);} .svc-card.estate .textlink { color: var(--cat-estate); }
.svc-card.wealth { border-top-color: var(--cat-wealth); } .svc-card.wealth .svc-icon { background: #f6eed6; } .svc-card.wealth li::before{background:var(--cat-wealth);} .svc-card.wealth .textlink { color: var(--gold-ink); }
.svc-card.business { border-top-color: var(--cat-business); } .svc-card.business .svc-icon { background: #e7ecf4; } .svc-card.business li::before{background:var(--cat-business);} .svc-card.business .textlink { color: var(--cat-business); }
.svc-icon.debt svg { color: var(--cat-debt); } .svc-icon.estate svg { color: var(--cat-estate); }
.svc-icon.wealth svg { color: var(--cat-wealth); } .svc-icon.business svg { color: var(--cat-business); }

/* Feature list with check icons */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feature-list.two-col { grid-template-columns: 1fr 1fr; }
.feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .98rem; color: var(--slate); }
.feature-list .ck { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; }

/* Included / what's-included rows */
.included { display: grid; gap: 16px; }
.included .item { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; }
.included .item .dot { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: var(--seaglass-100); display: flex; align-items: center; justify-content: center; }
.included .item .dot svg { width: 22px; height: 22px; color: var(--teal-600); }
.included .item h4 { margin: 0 0 4px; font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; color: var(--navy-800); }
.included .item p { margin: 0; font-size: .94rem; color: var(--muted); }

/* Process steps */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 24px; }
/* Circular number badge, works in .step AND .card contexts (Legacy Voyage cards
   use it inside .card, where it was rendering as a full-width bar). */
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-800); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 16px; flex: 0 0 auto; }
.step h4 { margin: 0 0 8px; font-size: 1.08rem; color: var(--navy-800); }
.step p { margin: 0; font-size: .93rem; color: var(--muted); }

/* Pull quote */
.pullquote { border-left: 4px solid var(--seaglass); padding: 6px 0 6px 26px; font-family: var(--font-display); font-size: clamp(1.25rem,2.4vw,1.65rem); color: var(--navy-800); line-height: 1.4; margin: 8px 0; font-weight: 500; }
.section-navy .pullquote { color: #eaf4f2; border-color: var(--seaglass); }

/* Split content */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.narrow-media { grid-template-columns: 1.1fr .9fr; }

/* Tag chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 16px; font-size: .9rem; font-weight: 600; color: var(--navy-700); }
.section-navy .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #dcecf1; }

/* Real scene illustrations */
.scene { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.section-navy .scene { box-shadow: 0 18px 48px rgba(0,0,0,.3); }

/* Image placeholder */
.img-ph {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(135deg, #143a54, #0e2a3f); color: #9fc4cf; border-radius: var(--r-lg);
  overflow: hidden; min-height: 220px; padding: 24px;
}
.img-ph::after { content: ""; position: absolute; inset: 0; background-image: url("../assets/img/topo.svg"); background-size: 480px; opacity: .18; }
.img-ph .ph-inner { position: relative; z-index: 1; font-size: .82rem; line-height: 1.5; max-width: 30ch; }
.img-ph .ph-inner .ph-label { display: inline-block; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; color: var(--seaglass); margin-bottom: 8px; }
.img-ph.light { background: var(--paper-tint); color: var(--muted); }
.img-ph.light::after { opacity: .5; }
.img-ph.light .ph-label { color: var(--teal-600); }

/* ------------------------- Forms ------------------------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm); }
/* Spam-protection honeypot: kept in the DOM for bots, hidden from people and
   assistive tech. Uses off-screen positioning (not display:none) so bots that
   skip hidden fields still fill it. */
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Cookie-consent banner */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  background: var(--navy-900); color: #e7eef4;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md);
  padding: 16px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease;
}
.cookie-bar.show { opacity: 1; transform: translateY(0); }
.cookie-bar .cookie-text { margin: 0; font-size: .9rem; line-height: 1.5; flex: 1 1 300px; }
.cookie-bar .cookie-text a { color: var(--gold-bright); }
.cookie-bar .cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.cookie-bar .btn { padding: 10px 20px; font-size: .92rem; }
@media (max-width: 520px) { .cookie-bar .cookie-actions { width: 100%; } .cookie-bar .cookie-actions .btn { flex: 1; } }
/* Team / leadership profiles */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 44px; }
@media (max-width: 720px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.team-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.team-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 3px solid var(--seaglass-100); background: var(--seaglass-100); }
.team-head h3 { margin: 0 0 4px; font-size: 1.2rem; }
.team-title { color: var(--gold-ink); font-size: .8rem; font-weight: 600; line-height: 1.35; }
.team-bio { color: var(--muted); font-size: .95rem; margin: 0; }
.team-more { margin-top: 12px; }
.team-more > summary { cursor: pointer; color: var(--teal-600); font-weight: 600; font-size: .9rem; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.team-more > summary::-webkit-details-marker { display: none; }
.team-more > summary::after { content: "›"; font-size: 1.1rem; line-height: 1; transition: transform .2s ease; }
.team-more[open] > summary::after { transform: rotate(90deg); }
.team-more > summary:hover { text-decoration: underline; }
.team-more-body { margin-top: 12px; }
.team-more-body p { color: var(--muted); font-size: .95rem; margin: 0 0 12px; }
.team-lic { font-size: .82rem; color: var(--navy-800); font-weight: 600; letter-spacing: .01em; }
/* Price / value callout */
.price-callout { margin: 16px 0 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, #fbfaf5, #f6f1e4); }
.price-was { font-size: .9rem; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.28); }
.price-now { margin-top: 2px; font-size: 1.05rem; color: var(--navy-800); font-weight: 600; }
.price-now .price-amt { font-family: var(--font-serif, 'Fraunces', serif); font-size: 2.1rem; font-weight: 700; color: var(--gold-600, #c9a227); vertical-align: -2px; margin-right: 4px; }
.price-note { margin-top: 8px; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.value-band { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); padding: clamp(22px, 3vw, 32px); }
.value-rows { list-style: none; margin: 0; padding: 0; }
.value-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 1rem; }
.value-rows li:last-child { border-bottom: 0; }
.value-rows .v-label { color: var(--navy-800); font-weight: 600; }
.value-rows .v-amt { color: var(--muted); white-space: nowrap; }
.value-total { margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--navy-800); text-align: center; }
.value-total .vt-line { font-size: 1.05rem; color: var(--ink, #1a2b3c); }
.value-total .vt-price { font-family: var(--font-serif, 'Fraunces', serif); font-size: 2.4rem; font-weight: 700; color: var(--gold-600, #c9a227); display: block; margin-top: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { margin-bottom: 4px; display: flex; flex-direction: column; }
.field.col-2 { grid-column: 1 / -1; }
.field label { font-size: .9rem; font-weight: 600; color: var(--navy-800); margin-bottom: 7px; }
.field .req { color: var(--error); margin-left: 2px; }
.field .hint { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; font-size: 1rem; font-family: var(--font-body); color: var(--ink);
  border: 1.5px solid #cdd8dc; border-radius: var(--r-sm); background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(29,74,118,.18); }
.field .error-text { color: var(--error); font-size: .84rem; margin-top: 6px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); background: var(--error-bg); }
.field.invalid .error-text { display: block; }
.check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; font-size: .92rem; color: var(--slate); margin-bottom: 4px; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--teal-600); }
/* The label must SHRINK to fit beside the checkbox, not wrap below it. With
   flex-wrap:wrap (added so .error-text can take its own line) a default
   flex:0 1 auto label prefers wrapping over shrinking, which pushed the
   consent text under the box on every form. flex:1 1 0 makes it share the row. */
.check label { flex: 1 1 0; min-width: 0; }
.check.invalid { color: var(--error); }
/* The consent checkbox is a .check, not a .field, so it never picked up the
   .field .error-text hide rule -- its message sat visible beside the label on
   every form on the site. Hide it until the field is actually invalid, and let
   it wrap onto its own line rather than becoming a third flex column. */
.check .error-text { flex-basis: 100%; color: var(--error); font-size: .84rem; margin-top: 2px; display: none; }
.check.invalid .error-text { display: block; }
.form-status { margin-top: 8px; font-size: .95rem; padding: 12px 16px; border-radius: var(--r-sm); display: none; }
.form-status.show { display: block; }
.form-status.error { color: var(--error); background: var(--error-bg); }
.form-status.info { color: var(--navy-700); background: var(--sky-50); }

/* Success / confirmation state */
.form-success { display: none; text-align: center; padding: 20px 10px; }
.form-success.show { display: block; }
.form-success .tick { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--success-bg); display: flex; align-items: center; justify-content: center; }
.form-success .tick svg { width: 34px; height: 34px; color: var(--success); }
.form-success h3 { color: var(--navy-800); }

/* Disclosure box */
.disclosure { font-size: .82rem; color: var(--muted); line-height: 1.55; }
.disclosure-box { background: var(--paper-soft); border: 1px solid var(--line); border-left: 3px solid var(--seaglass); border-radius: var(--r-sm); padding: 16px 18px; font-size: .84rem; color: var(--muted); line-height: 1.55; }
.compliance-flag { background: #fff8e6; border: 1px dashed #d8b24a; border-radius: var(--r-sm); padding: 14px 16px; font-size: .82rem; color: #7a5a12; line-height: 1.5; }
.compliance-flag strong { color: #6b4e0d; }

/* ------------------------- FAQ accordion ------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 4px; font-weight: 600; color: var(--navy-800); font-size: 1.06rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--teal-600); font-weight: 400; transition: transform .2s ease; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-body { padding: 0 44px 22px 4px; color: var(--slate); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ------------------------- CTA band ------------------------- */
.cta-band { background: linear-gradient(120deg, var(--navy-800), var(--navy-700)); color: #d6e6ec; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 68px); position: relative; overflow: hidden; text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: url("../assets/img/topo.svg"); background-size: 620px; opacity: .12; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band .lede { color: #b9cdd6; margin: 0 auto; }

/* ------------------------- Footer ------------------------- */
.site-footer { background: var(--navy-900); color: #9db6c0; padding: 64px 0 28px; font-size: .93rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
.site-footer img.foot-logo { height: 44px; margin-bottom: 16px; }
.footer-blurb { max-width: 34ch; color: #8fa9b4; }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: #9db6c0; }
.footer-col a:hover { color: #fff; }
.footer-contact div { margin-bottom: 10px; }
.footer-contact a { color: #cfe0e6; }
.footer-bottom { padding-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: flex-start; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-disclaimer { color: #6f8b96; font-size: .8rem; line-height: 1.6; max-width: 100%; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }

/* Utility */
.divider { height: 1px; background: var(--line); border: 0; margin: 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; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: var(--seaglass-100); color: var(--teal-600); font-weight: 600; font-size: .82rem; padding: 7px 14px; border-radius: var(--r-pill); }

/* ------------------------- Responsive ------------------------- */
@media (max-width: 960px) {
  .nav-menu, .nav-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-phone { font-size: .9rem; }
}
@media (max-width: 460px) {
  .nav-phone span { display: none; }
  .nav-phone svg { width: 20px; height: 20px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-media { order: -1; max-width: 460px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split .img-ph { min-height: 260px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .feature-list.two-col { grid-template-columns: 1fr; }
}
/* Content+form / content+image splits stack to one column on phones & small
   tablets. Targets .narrow-media too (equal specificity, later in source) so the
   signup forms don't stay cramped in two columns. */
@media (max-width: 860px) {
  .split, .split.narrow-media { grid-template-columns: 1fr; align-items: stretch; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid-4, .grid-3, .grid-2, .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .stat-row { gap: 18px 28px; }
  .container { padding: 0 20px; }
}

/* ==========================================================================
   Premium polish, gradients, glassmorphism, gradient accent & subtle motion
   (all motion gated behind prefers-reduced-motion: no-preference)
   ========================================================================== */

/* Layered mesh gradients over the navy sections for depth */
.hero, .page-hero {
  background-color: var(--navy-800);
  background-image:
    radial-gradient(1000px 520px at 12% -15%, rgba(47,125,122,.22), transparent 60%),
    radial-gradient(760px 440px at 106% -8%, rgba(226,197,107,.16), transparent 55%),
    radial-gradient(1000px 760px at 50% 135%, rgba(8,24,44,.65), transparent 62%);
}
.section-navy {
  background-image:
    radial-gradient(900px 520px at 92% -20%, rgba(226,197,107,.10), transparent 55%),
    radial-gradient(760px 520px at -5% 120%, rgba(47,125,122,.18), transparent 60%);
}
.cta-band {
  background-image:
    radial-gradient(700px 380px at 8% -30%, rgba(47,125,122,.28), transparent 60%),
    radial-gradient(620px 360px at 100% 130%, rgba(226,197,107,.18), transparent 58%),
    linear-gradient(120deg, var(--navy-800), var(--navy-700));
}

/* Signature gold gradient accent bar under hero headings */
.hero h1::after, .page-hero h1::after {
  content: ""; display: block; width: 92px; height: 4px; margin-top: 22px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-bright), var(--seaglass), var(--gold-bright));
  background-size: 200% 100%;
}
.section-navy h2::after {
  content: ""; display: block; width: 72px; height: 3px; margin-top: 16px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--seaglass));
}

/* Soft curved edge at the bottom of hero sections (the actual wave is defined
   in the "Wave transition" rule further down, kept single to avoid conflicts). */
.hero, .page-hero { position: relative; }

/* Glassmorphism stat panel in the hero */
.stat-row {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  backdrop-filter: blur(9px) saturate(140%);
  -webkit-backdrop-filter: blur(9px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.glass {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Buttons: gradient primary + gloss sweep on hover */
.btn { position: relative; overflow: hidden; }
.btn-primary { background: linear-gradient(120deg, #d8b23f, var(--gold) 55%, var(--gold-deep)); }
.btn-primary:hover { background: linear-gradient(120deg, var(--gold), var(--gold-deep)); }
.btn-navy { background: linear-gradient(120deg, var(--navy-700), var(--navy-800)); }
.btn-primary::before, .btn-navy::before, .btn-blue::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -140%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); pointer-events: none;
}

/* Card hover: lift + soft gold ring glow */
.card-hover:hover { box-shadow: 0 18px 44px rgba(14,42,63,.14), 0 0 0 1px rgba(201,162,39,.28); }

/* Animated nav underline */
.nav-menu a { position: relative; }
.nav-menu a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--seaglass)); transform: scaleX(0); transform-origin: left;
}
.nav-menu a:hover::after, .nav-menu a[aria-current="page"]::after { transform: scaleX(1); }

/* Gradient text utility (used sparingly) */
.grad-gold { background: linear-gradient(90deg, var(--gold-bright), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Motion (only when the user hasn't asked to reduce it) ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
  .reveal.in { opacity: 1; transform: none; }

  .hero h1::after, .page-hero h1::after { animation: oc-shimmer 4.5s linear infinite; }
  @keyframes oc-shimmer { to { background-position: 200% 0; } }

  .nav-menu a::after { transition: transform .28s cubic-bezier(.2,.7,.2,1); }

  .btn-primary:hover::before, .btn-navy:hover::before, .btn-blue:hover::before { animation: oc-sweep .85s ease; }
  @keyframes oc-sweep { from { left: -140%; } to { left: 150%; } }

  .card-hover, .btn, .scene, .textlink::after, .stat .num { transition: transform .18s ease, box-shadow .18s ease; }
  .hero-media .scene:hover, .split .scene:hover { transform: translateY(-4px); }

  /* gentle float on hero decorative topo */
  .hero-topo { animation: oc-drift 18s ease-in-out infinite alternate; }
  @keyframes oc-drift { from { transform: translateY(0); } to { transform: translateY(-14px); } }
}

/* ==========================================================================
   Ocean & orca motifs, currents, wave transitions, orca ghost watermarks
   ========================================================================== */

/* keep hero decorative motifs behind content */
.hero, .page-hero { position: relative; overflow: hidden; }
.hero-inner, .page-hero .hero-inner { position: relative; z-index: 2; }

/* Sections that host orca motifs own their stacking context */
.cta-band, .section-navy { position: relative; overflow: hidden; isolation: isolate; }
.cta-band > :not(.orca-swim),
.section-navy > :not(.orca-mark) { position: relative; z-index: 2; }

/* Orca decorative elements (inline SVG), crisp, real orca coloring */
.orca-mark, .orca-swim {
  position: absolute; display: block; pointer-events: none; z-index: 0;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.28));
}
.orca-mark { opacity: 0.62; }
.orca-mark svg, .orca-swim svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orca-mark .orca-black,  .orca-swim .orca-black  { fill: #07131e; }
.orca-mark .orca-white,  .orca-swim .orca-white  { fill: #ffffff; }
.orca-mark .orca-saddle, .orca-swim .orca-saddle { fill: #aabecd; }
.orca-swim { opacity: 0; transform-origin: center; }

/* Articulated rig: the orca is drawn as three overlaid, clipped copies of the
   same art, a rigid front, a tail that bends at the peduncle, and a fluke that
   flexes a beat behind, so it bends like a real animal instead of a flat cutout. */
.orca-rig { position: absolute; inset: 0; }
.orca-seg { position: absolute; inset: 0; }
.orca-seg > .orca-svg { position: absolute; inset: 0; }
/* Lengthwise slices (head -> fluke). Each hinge sits on the slice's leading
   edge so the shear keeps that seam locked to the segment ahead of it. */
.orca-s0 > .orca-svg { clip-path: inset(0 60% 0 0); }    /* head + front body (anchor) */
.orca-s1 { transform-origin: 38% 50%; }
.orca-s1 > .orca-svg { clip-path: inset(0 44% 0 38%); }  /* forward body */
.orca-s2 { transform-origin: 54% 50%; }
.orca-s2 > .orca-svg { clip-path: inset(0 30% 0 54%); }  /* mid body */
.orca-s3 { transform-origin: 68% 50%; }
.orca-s3 > .orca-svg { clip-path: inset(0 18% 0 68%); }  /* rear body */
.orca-s4 { transform-origin: 80% 50%; }
.orca-s4 > .orca-svg { clip-path: inset(0 14% 0 80%); }  /* peduncle */
.orca-s5 { transform-origin: 84% 50%; }
.orca-s5 > .orca-svg { clip-path: inset(0 0 0 84%); }    /* fluke */

/* Orientation layer: per pass, the orca rotates + mirrors to face its travel
   direction (set from JS). Source art faces left; --face-flip -1 faces right. */
.orca-orient { position: absolute; inset: 0; }
.orca-swim .orca-orient {
  transform: rotate(var(--face-rot, 0deg)) scaleX(var(--face-flip, -1));
  transform-origin: center;
}
/* centred in its band so it can slide in from any edge and rotate about itself */
.orca-swim { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Wave transition at the bottom of hero sections, single clean white curve,
   no gold tint, and its height scales with the viewport so it stays a visible
   wave on wide screens instead of flattening out. */
.hero::after, .page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--wave-h, 72px); z-index: 4; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L0 48 C 240 20 480 20 720 46 C 940 70 1040 68 1200 44 L1200 100 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

/* Flowing current lines in the hero (gentle horizontal drift) */
.hero-topo { background-repeat: repeat; }

/* Wave transition into the footer */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; top: -30px; left: 0; right: 0; height: 31px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 31' preserveAspectRatio='none'%3E%3Cpath d='M0 31 L0 14 C300 -2 560 -1 900 12 C1050 18 1140 16 1200 10 L1200 31 Z' fill='%230a2038'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

/* Motion for currents & gliding orca (reduced-motion users see them static) */
@media (prefers-reduced-motion: no-preference) {
  .hero-topo { animation: oc-current 26s linear infinite, oc-drift 18s ease-in-out infinite alternate; }
  @keyframes oc-current { from { background-position: 0 0; } to { background-position: 760px 0; } }

  /* CTA band current lines drift slowly (tile is 620px, so it loops seamlessly) */
  .cta-band::before { animation: cta-current 38s linear infinite, oc-drift 22s ease-in-out infinite alternate; }
  @keyframes cta-current { from { background-position: 0 0; } to { background-position: 620px 0; } }

  /* Each pass travels a straight diagonal from fully off-screen to fully
     off-screen, so the orca always slides in from an edge/corner and out the
     other, never appears mid-frame. Start/end points + facing are randomized
     in JS per pass (re-rolled while off-screen at each loop). */
  .orca-swim { animation: orca-swim-path var(--swim-dur, 22s) linear infinite; }
  @keyframes orca-swim-path {
    0%   { transform: translate(calc(-50% + var(--x0, -95vw)), calc(-50% + var(--y0, 0vw))); opacity: 0; }
    2%   { opacity: var(--peak, 0.92); }
    98%  { opacity: var(--peak, 0.92); }
    100% { transform: translate(calc(-50% + var(--x1,  95vw)), calc(-50% + var(--y1, 0vw))); opacity: 0; }
  }

  /* Body wave, each joint shears on the same period, phase-delayed and growing
     in amplitude toward the tail, so a ripple travels head -> fluke. Because the
     joints are nested, each seam stays locked to the segment ahead of it. */
  /* Gentle whole-body rock at the swim cadence, gives the head and body a little
     life so it doesn't look pinned at the nose (flip stays baked into the keyframes). */
  .orca-swim .orca-rig { animation: orca-rock var(--tail-dur, 0.95s) ease-in-out infinite; transform-origin: 55% 50%; }
  @keyframes orca-rock {
    0%, 100% { transform: rotate(var(--rock, 1.2deg)); }
    50%      { transform: rotate(calc(var(--rock, 1.2deg) * -1)); }
  }

  .orca-swim .orca-seg { animation: orca-wave var(--tail-dur, 0.95s) ease-in-out infinite; }
  .orca-swim .orca-s0 { animation: none; }                                   /* head follows the whole-body rock only */
  /* Gentle rest bias bends the rear + tail up to level (the art draws it angled
     down). Spread across the segments so the back curves up as one smooth line;
     sign follows travel direction via --bias-dir so "up" is always up. */
  .orca-swim .orca-s1 { --amp: calc(var(--wave, 5deg) * 0.14);                                            animation-delay: calc(var(--tail-dur, 0.85s) *  0);    }
  /* No rest bias, back stays straight (as drawn); the beat just swings the tail. */
  .orca-swim .orca-s2 { --amp: calc(var(--wave, 5deg) * 0.30); animation-delay: calc(var(--tail-dur, 0.85s) * -0.05); }
  .orca-swim .orca-s3 { --amp: calc(var(--wave, 5deg) * 0.58); animation-delay: calc(var(--tail-dur, 0.85s) * -0.11); }
  .orca-swim .orca-s4 { --amp: calc(var(--wave, 5deg) * 1.05); animation-delay: calc(var(--tail-dur, 0.85s) * -0.17); }
  .orca-swim .orca-s5 { --amp: calc(var(--wave, 5deg) * 1.55); animation-delay: calc(var(--tail-dur, 0.85s) * -0.23); }
  @keyframes orca-wave {
    0%, 100% { transform: skewY(calc(var(--bias, 0deg) + var(--amp, 1.5deg) * -1)); }
    50%      { transform: skewY(calc(var(--bias, 0deg) + var(--amp, 1.5deg))); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .orca-swim { opacity: 0.9; }
}

/* ==========================================================================
   Post-audit fixes, added 2026-08-20
   ========================================================================== */

/* Reserve the header's height before js/site.js injects it.
   Without this the mount div starts at 0px and every page shoves its content
   down once the script runs, a Cumulative Layout Shift regression on load. */
#site-header { min-height: calc(var(--header-h) + 1px); }

/* Pause/play control for autoplaying background video.
   WCAG 2.2.2 (Pause, Stop, Hide) requires a way to stop anything that moves
   for more than five seconds. Injected by initMedia() in js/site.js. */
.media-toggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; line-height: 1; cursor: pointer;
  color: #fff; background: rgba(10,32,49,.72);
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(4px);
}
.media-toggle:hover { background: rgba(10,32,49,.9); }
.media-toggle:focus-visible { outline: 3px solid var(--gold-bright, #e2b93b); outline-offset: 2px; }
@media (max-width: 620px) { .media-toggle { right: 8px; bottom: 8px; } }

/* Footer social links */
.footer-social{margin-top:22px}
.footer-social .fs-label{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.footer-social ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.footer-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid rgba(157,182,192,.28);color:#9db6c0;transition:color .18s ease,border-color .18s ease,background-color .18s ease}
.footer-social a:hover,.footer-social a:focus-visible{color:#c9a227;border-color:#c9a227;background:rgba(201,162,39,.1)}
.footer-social svg{width:20px;height:20px;fill:currentColor;display:block}
@media (prefers-reduced-motion:reduce){.footer-social a{transition:none}}