/* ============================================================
   Movement Psychotherapy Services — Direction: Seam v2.0
   "A lone boat on open water." Ivory canvas, harbor-blue
   immersive cover & footer, gold only where the light hits.
   Type: Spectral (display) + Karla (body).
   ============================================================ */

:root {
  --ivory:   #F5F1EA;
  --stone:   #E4DCCF;
  --ink:     #1E1B16;
  --harbor:  #31566C;
  --coastal: #6C8BA1;
  --mist:    #D7E2E7;
  --gold:    #B08D4F;
  --coastal-text: #44637A;

  --ink-80: rgba(30,27,22,.8);
  --ink-70: rgba(30,27,22,.7);
  --ink-60: rgba(30,27,22,.6);
  --ink-15: rgba(30,27,22,.15);
  --ink-10: rgba(30,27,22,.1);
  --mist-85: rgba(215,226,231,.85);
  /* AA floor: #D7E2E7 over --harbor only reaches 4.5:1 at alpha .82, so these
     two tiers were failing contrast wherever they carried text (footer meta,
     addresses, copyright). Kept as separate names because --mist-30/-18 below
     are decorative-only and may stay faint. */
  --mist-70: rgba(215,226,231,.86);
  --mist-50: rgba(215,226,231,.84);
  --mist-30: rgba(215,226,231,.3);
  --mist-18: rgba(215,226,231,.18);

  --ff-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --ff-body: 'Karla', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 48px);
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--coastal-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: rgba(176,141,79,.28); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .site-footer :focus-visible,
.site-header:not(.scrolled) :focus-visible, body.nav-open :focus-visible { outline-color: var(--ivory); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--ivory); padding: 10px 18px;
  border-radius: 0 0 8px 0; font-size: 14px;
}
.skip-link:focus { left: 0; }

h1, h2, h3 { font-family: var(--ff-display); font-weight: 300; }
h2 em, h1 em { font-style: italic; }

.eyebrow {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--coastal-text);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 14px var(--pad);
  color: var(--ivory);
  transition: background .4s ease, color .4s ease, box-shadow .4s ease;
}
/* split nav — links flank a centered wordmark (equal 1fr sides keep it
   perfectly centered); collapses back to flex for the mobile menu */
@media (min-width: 1101px) {
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav-left { justify-self: start; }
  .nav-right { justify-self: end; }
}
.site-header.scrolled {
  background: rgba(245,241,234,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--ink-10);
}

.brand { display: flex; align-items: center; color: inherit; }
.brand:hover { text-decoration: none; }

/* Script wordmark from the brand guide, colored via mask so it
   follows the header's current color on light or dark. */
.wordmark {
  display: block;
  width: 118px; height: 42px;
  background: currentColor;
  -webkit-mask: url('../images/brand/wordmark-ink.svg') center / contain no-repeat;
  mask: url('../images/brand/wordmark-ink.svg') center / contain no-repeat;
}
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); }
.site-nav a {
  /* 14px on real desktops, easing down toward the 1100px mobile-nav
     breakpoint where the split halves get tight; nowrap so a link can
     never fold mid-phrase in between */
  color: inherit; font-size: clamp(12.5px, 1.05vw, 14px);
  font-weight: 500; letter-spacing: .04em;
  white-space: nowrap;
  opacity: .88;
}
.site-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.nav-cta {
  border: 1px solid currentColor; border-radius: 999px;
  padding: 9px 18px; opacity: 1 !important;
}
.nav-cta:hover { text-decoration: none !important; background: rgba(245,241,234,.14); }
.scrolled .nav-cta:hover { background: rgba(30,27,22,.06); }

.nav-toggle { display: none; }

/* mobile nav — the two split halves stack into one full-screen menu
   (same solid background, so the seam at 50% is invisible) */
@media (max-width: 1100px) {
  .site-nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; gap: 30px;
    background: var(--harbor);
    opacity: 0; pointer-events: none;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .nav-left { inset: 0 0 50% 0; justify-content: flex-end; padding-bottom: 15px; }
  .nav-right { inset: 50% 0 0 0; justify-content: flex-start; padding-top: 15px; }
  .site-nav a {
    color: var(--ivory); font-family: var(--ff-display);
    font-size: 27px; font-weight: 300; letter-spacing: 0;
    text-transform: none;
  }
  .nav-cta { font-family: var(--ff-body); font-size: 15px; padding: 12px 26px; }
  body.nav-open .site-nav { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .35s ease; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { color: var(--ivory); background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  .nav-toggle {
    display: grid; place-content: center; gap: 6px; z-index: 10;
    width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer;
    color: inherit;
  }
  .nav-toggle span {
    display: block; width: 24px; height: 1.5px;
    background: currentColor;
    transition: transform .3s ease;
  }
  body.nav-open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
  body.nav-open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
}

/* ============================================================
   HERO — the cover
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--harbor);
  color: var(--ivory);
  padding: clamp(120px, 16vh, 170px) var(--pad) 90px;
  overflow: hidden;
}

.hero-sea {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* The poster doubles as the reduced-motion hero. The
   `.hero-video-bg { display: none; }` rule inside this file's
   `@media (prefers-reduced-motion: reduce)` block hides the
   <video> for those visitors and index.html's picker never gives it a src,
   so this background is all they see — before this rule existed they got a
   scrim over flat --harbor and no image at all (spec §3.2).
   url()s resolve against THIS FILE, hence ../media/.
   Two background-image declarations on purpose: the plain url() line is the
   fallback for engines without image-set() or without its type() function
   (Safari < 17 — they get the JPG), and it points at the SAME JPG as the
   <video poster> attr, so the normal path makes no second request. Engines
   that do support it override with the AVIF (22.7KB @1280px — the byte count
   Chunk 1's encode actually produced, per scripts/hero-manifest.txt). */
.hero-media {
  position: absolute; inset: 0; overflow: hidden;
  background-color: var(--harbor);
  background-image: url('../media/hero-poster.jpg');
  background-image: image-set(
    url('../media/hero-poster.avif') type('image/avif'),
    url('../media/hero-poster.webp') type('image/webp'),
    url('../media/hero-poster.jpg')  type('image/jpeg'));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-video-bg { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(102deg, rgba(20,39,51,.78), rgba(49,86,108,.42) 58%, rgba(49,86,108,.3));
}
.hero-boat { animation: bob 5.5s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translate(950px, 584px) rotate(0deg); }
  50% { transform: translate(950px, 581px) rotate(-1.4deg); }
}

.hero-inner {
  position: relative;
  width: 100%; max-width: var(--wrap);
  margin: 0 auto;
}

.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--mist-85);
  margin-bottom: 26px;
}
.eyebrow-rule { width: 34px; height: 1px; background: var(--mist-50); }

.hero-title {
  font-size: clamp(2.7rem, 6.4vw, 4.3rem);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.hero-title .line { display: block; }

.hero-lede {
  max-width: 560px;
  margin-top: 28px;
  font-size: 18.5px;
  color: var(--mist-85);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 27px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--ff-body); font-size: 14px; font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-light { background: var(--ivory); color: var(--ink); }
.btn-ghost { border-color: var(--mist-50); color: var(--ivory); }
.btn-ghost:hover { border-color: var(--mist); background: rgba(215,226,231,.08); }

.video-shell {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--ink-15);
  cursor: pointer;
  background: var(--harbor);
}
.video-shell img, .video-shell iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0;
}
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(245,241,234,.94); color: var(--ink);
  display: grid; place-items: center;
  transition: transform .25s ease, background .25s ease;
}
.video-play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.video-shell:hover .video-play { transform: translate(-50%, -50%) scale(1.07); }
.scroll-hint {
  position: absolute; left: 0; right: 0; bottom: 20px;
  text-align: center;
  font-size: 11px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--mist-70);
}
.hint-arrow { display: inline-block; animation: drift 2.6s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ============================================================
   THE VOYAGE — background route layer
   ============================================================ */
.voyage {
  position: relative;
  background:
    radial-gradient(52vw 38vh at 12% 6%, rgba(108,139,161,.26), transparent 64%),
    radial-gradient(46vw 34vh at 88% 13%, rgba(176,141,79,.24), transparent 64%),
    radial-gradient(56vw 40vh at 80% 42%, rgba(108,139,161,.22), transparent 64%),
    radial-gradient(50vw 34vh at 12% 66%, rgba(176,141,79,.21), transparent 64%),
    radial-gradient(54vw 38vh at 85% 88%, rgba(108,139,161,.25), transparent 64%),
    var(--ivory);
}

.boat-rail {
  position: fixed; top: 0; right: 272px;
  width: 46px; height: 54px;
  z-index: 90;
  pointer-events: none;
  will-change: transform;
}
.boat-rail-track {
  position: fixed;
  top: calc(10vh + 40px);
  right: 294px;
  width: 1px;
  height: 0;
  z-index: 89;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(108,139,161,.45) 0 3px,
    transparent 3px 9px
  );
}
@media (max-width: 1279px) { .boat-rail, .boat-rail-track { display: none; } }
/* The junk is an HTML element now, not an SVG <g> (design §4.1), so it
   carries its own class: `.voyage-boat` still belongs to the dormant rail
   boat and must not pick up the junk's layer rules. The LOOK is shared by
   selector — every declaration here applies to both, nothing is copied. */
.voyage-boat,
.junk-el { transition: opacity .9s ease; }
.voyage-boat.awaiting,
.junk-el.awaiting { opacity: 0; }
.voyage-boat.under-text,
.junk-el.under-text { opacity: .35; }
.voyage-boat .boat-hull,
.junk-el .boat-hull { fill: var(--ink); transition: fill .6s ease; }
.voyage-boat .boat-house,
.junk-el .boat-house { fill: var(--ink); opacity: .85; transition: fill .6s ease, opacity .6s ease; }
.voyage-boat .boat-batten,
.junk-el .boat-batten { stroke: rgba(30,27,22,.42); stroke-width: .5; transition: stroke .6s ease, opacity .6s ease; }
.voyage-boat.on-dark .boat-house,
.junk-el.on-dark .boat-house { fill: var(--ivory); }
.voyage-boat.on-dark .boat-batten,
.junk-el.on-dark .boat-batten { stroke: rgba(245,241,234,.55); }
.voyage-boat.is-moored .boat-batten,
.junk-el.is-moored .boat-batten { opacity: 0; }
.voyage-boat .boat-mast,
.junk-el .boat-mast { stroke: var(--ink); transition: stroke .6s ease, opacity .6s ease; }
.voyage-boat .boat-sail,
.junk-el .boat-sail { fill: var(--gold); transition: opacity .6s ease; }
.voyage-boat.on-dark .boat-hull,
.junk-el.on-dark .boat-hull { fill: var(--ivory); }
.voyage-boat.on-dark .boat-mast,
.junk-el.on-dark .boat-mast { stroke: var(--ivory); }
.voyage-boat.is-moored .boat-mast,
.voyage-boat.is-moored .boat-sail,
.junk-el.is-moored .boat-mast,
.junk-el.is-moored .boat-sail { opacity: 0; }

/* ---- the junk's own layer (design §4.1) ---------------------------------
   Three wrappers, one job each, so no two moving things ever share a
   transform:
     .junk-el        position — `offset-path` + `offset-distance` under the CSS
                     scroll-driven engine, `translate3d` under the rAF spring
                     engine, never both. The only EXPLICITLY promoted layer
                     (`will-change`); .junk-bob gets a layer of its own from
                     the running junkBob animation.
     .junk-attitude  tilt + grow + face, from the same sampled math the old
                     single SVG transform used.
     .junk-bob       the idle bob — a CSS keyframe, so it costs no JS frames
                     and RUNS ON PHONES (the old JS bob was switched off
                     below 760px to save frames).
   Nesting applies them in the same order the old SVG transform did:
   translate -> scale -> rotate.

   Every box is the junk's own 55x41 artwork box, laid out at the layer origin
   (left/top 0) so that 1 course unit = 1 CSS px and a path() coordinate means
   the same thing to both engines: `.voyage` is position:relative with no
   padding, so its padding box is its border box and the SVG's (0,0) is this
   box's (0,0) too. The junk's own (0,0) — its waterline centre, 27px in and
   30px down — is therefore an OFFSET INSIDE the box, and it is pinned once, in
   JS: voyage.js pinAnchor() derives it from the junk's viewBox and writes
   `offset-anchor` + `transform-origin` here, while placeBoat() subtracts the
   same anchor from its translate3d. Unpinned, the boat would ride at a constant
   offset from the course (the geometry spans x -24..25 / y -27..7.5 around its
   origin); pinned in only one of the two engines, the two would disagree by it. */
.junk-el {
  position: absolute;
  left: 0;
  top: 0;
  width: 55px;
  height: 41px;
  z-index: 1;                 /* same band as .voyage-svg: under content (z 2) */
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: 27px 30px;
  /* The POSITION channel, and nothing else, writes this box: `offset-path` +
     `offset-distance` when the CSS scroll-driven engine is installed,
     `transform: translate3d()` when the rAF spring engine is. Both are
     engine-written; these are the resting values.
     `offset-rotate` is NEVER auto: tangent rotation would fight the clamped
     ±13° tilt the attitude wrapper owns (spec §4.2.1). The path point rides the
     junk's own (0,0) — x -24..25 / y -27..7.5 around it — not the box centre,
     where `offset-anchor` would otherwise put it; voyage.js pinAnchor() writes
     `offset-anchor` AND `transform-origin` (the value `offset-anchor: auto`
     resolves to, for engines without offset-anchor) from the junk's viewBox, so
     the anchor has ONE owner at runtime: pinAnchor() overwrites the `27px 30px`
     resting values — here, and on `.junk-attitude` below — which exist only so
     the junk is anchored for the frame before it runs. Change the viewBox
     (`-27 -30 55 41`, js/voyage.js) and JS follows; these are a fallback, not a
     second source of truth. (`.junk-bob`'s copy is never overwritten and never
     matters: the bob is a pure translate, which transform-origin cannot move.) */
  offset-anchor: 27px 30px;
  offset-distance: 0%;
  offset-rotate: 0deg;
  will-change: transform;
}
/* Shared box only — the promotion story differs per wrapper.
   .junk-attitude is deliberately NOT promoted: a composited layer under the
   .5 -> .95 grow ramp can rasterise once and scale, softening the artwork
   mid-crossing. .junk-bob is the opposite — design §4.1 specifies the bob as
   composited, and Blink auto-promotes any element running a transform
   animation, which the always-on junkBob below does unconditionally. */
.junk-attitude,
.junk-bob {
  position: absolute;
  inset: 0;
  transform-origin: 27px 30px;
}
.junk-svg { display: block; width: 55px; height: 41px; overflow: visible; }
.junk-bob { animation: junkBob 3.74s ease-in-out infinite; }
/* Period and keyframe amplitude come from the old JS bob: sin(t) * 2.2px with
   t += .028 per 60Hz frame — a ±2.2px sway with a 3.74s period.

   ON-SCREEN AMPLITUDE IS SMALLER THAN ±2.2px, deliberately. Design §4.1 nests
   .junk-bob INSIDE .junk-attitude, whose transform is
   `scale(face*grow, grow) rotate(tilt)`, so the child's translate is measured
   in the already-scaled-and-rotated space: the vertical sway is
   2.2px * grow * cos(tilt) and it picks up a 2.2px * face*grow * -sin(tilt)
   horizontal component. The old bob was added to y INSIDE
   `translate(x, y+bob) scale(...) rotate(...)`, i.e. in the SVG parent space
   ahead of the scale, so it was a flat ±2.2px whatever grow was doing.
   Measured peak-to-peak on .junk-svg in Chromium at 1440x900 (matches
   4.4 * grow * cos(tilt) to four decimals):
     team.html, grow .95 ......... 4.170px  (was 4.4px — ~5% smaller)
     index.html, grow .5 ......... 2.200px  (was 4.4px — 50% smaller)
   The 50% figure is crossing ENTRY only, where the junk is half-size and far
   away, and it climbs back as grow ramps .5 -> .95. This is the spec's nesting
   order, so the smaller bob is intended, NOT a parity bug — and §4.4's parity
   screenshots exclude bob phase, so nothing downstream reports it. If Bo ever
   wants the old flat sway back, the fix is a taller keyframe here, not a
   re-order of the wrappers: 2.2px / .95 = 2.32px restores steady state.

   0%/100% are flat so that the global `@media (prefers-reduced-motion: reduce)`
   kill — `*, *::before, *::after { animation-duration: .01ms !important;
   animation-iteration-count: 1 !important }` — parks the junk at bob 0,
   which is exactly where today's reduced-motion path leaves it. */
@keyframes junkBob {          /* `bob` is taken by .hero-boat */
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(0, 2.2px, 0); }
  75%      { transform: translate3d(0, -2.2px, 0); }
}

/* sub-page hero band */
.page-hero {
  position: relative;
  /* above the voyage layer (boat + svg ride at z 1): on pages without the
     crossing motif the course starts at negative wrap-y, so the junk slides
     out from BEHIND this band instead of painting over it */
  z-index: 2;
  background: var(--harbor);
  color: var(--ivory);
  padding: clamp(150px, 22vh, 210px) var(--pad) clamp(64px, 9vh, 90px);
  text-align: center;
  overflow: hidden;
}
.page-hero .eyebrow { color: var(--mist-85); margin-bottom: 14px; }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.1; }
.page-hero h1 em { font-style: italic; }
/* min-height 2lh: a one-line lede (team) reserves the same two lines every
   other page's lede wraps to, so the blue band is the same height sitewide */
.page-hero .lede { color: var(--mist-85); max-width: 620px; margin: 18px auto 0; min-height: 2lh; }
.page-hero .horizon-line {
  position: absolute; left: 0; right: 0; bottom: 46px;
  height: 1px; background: rgba(176,141,79,.55);
}

.site-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

/* the voyage sails on mobile too — the junk bob is a composited CSS
   keyframe (.junk-bob) rather than JS frames, and the MOBILE BUDGET block
   (max-width: 900px) near the end of this file caps the glass blur.
   voyage.js no longer carries any phone-specific budget: its rAF loop is
   idle-gated instead, at full rate on every device. */

.voyage-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.wake-word {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity 1.6s ease .25s;
}
.wake-word.passed { opacity: 1; }
.wake-word.dim.passed { opacity: .18; }

/* ============================================================
   SECTIONS — shared
   ============================================================ */
.section {
  position: relative;
  padding: clamp(76px, 11vw, 128px) var(--pad);
}
/* content rides above the voyage layer (z 0 bg < z 1 svg < z 2 content) */
.section > * { position: relative; z-index: 2; }

.video-band { padding-top: clamp(64px, 9vw, 96px); padding-bottom: 0; }
.video-wrap { max-width: 760px; margin: 0 auto; }
.video-caption-line {
  margin-top: 14px; text-align: center;
  font-size: 11px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--coastal-text);
}

/* stone bands paint below the voyage layer (z 0 < svg z 1 < content z 2) */
.section-stone::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(46vw 66% at 15% 22%, rgba(176,141,79,.27), transparent 66%),
    radial-gradient(52vw 78% at 85% 74%, rgba(108,139,161,.28), transparent 66%),
    var(--stone);
  z-index: 0;
}

.section-head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 {
  font-size: clamp(2rem, 3.8vw, 2.7rem);
  line-height: 1.15;
}

.lede {
  font-size: 19px;
  color: var(--ink-70);
  max-width: 640px;
}
.lede.center { margin-left: auto; margin-right: auto; text-align: center; }

.card-link { font-size: 13.5px; letter-spacing: .02em; overflow-wrap: anywhere; }
.cred { font-family: var(--ff-body); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--coastal-text); vertical-align: 2px; }
.card-role { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-70); }

/* reveals */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease var(--d, 0s), transform .7s ease var(--d, 0s); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-load { opacity: 0; animation: fadeUp .9s ease both; animation-delay: var(--d, 0s); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   01 · PHILOSOPHY
   ============================================================ */
.philosophy-grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.founder-quote {
  margin-top: 36px;
  border-left: 2px solid var(--gold);
  padding-left: 26px;
}
.founder-quote p {
  font-family: var(--ff-display); font-style: italic;
  font-size: 21.5px; line-height: 1.55; color: var(--ink-80);
}
.founder-quote cite {
  display: block; margin-top: 14px; font-style: normal;
  font-size: 11px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--coastal-text);
}

.pillars { list-style: none; display: grid; gap: 34px; }
.pillar-glyph { width: 64px; height: 40px; margin-bottom: 10px; }
.pillar-glyph line, .pillar-glyph .glyph-stroke { stroke: var(--coastal); }
.pillar-glyph circle { stroke: var(--coastal); fill: none; }
.pillar-glyph .glyph-fill { fill: var(--ink); }
.pillar-glyph .glyph-gold { fill: var(--coastal); }
.pillar h3 { font-size: 20px; font-weight: 400; margin-bottom: 4px; }
.pillar p { font-size: 15.5px; color: var(--ink-70); max-width: 300px; }

/* ============================================================
   02 · APPROACH
   ============================================================ */
.approach .lede { margin-bottom: clamp(44px, 6vw, 64px); }

.journey {
  list-style: none;
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
}
.journey-step { border-top: 1px solid var(--ink-15); padding-top: 22px; }
.step-num {
  font-family: var(--ff-display); font-size: 26px; font-weight: 300;
  color: var(--coastal); display: block; margin-bottom: 10px;
}
.journey-step h3 { font-size: 20px; font-weight: 400; margin-bottom: 8px; }
.journey-step p { font-size: 15.5px; color: var(--ink-70); }

/* ============================================================
   03 · TEAM
   ============================================================ */
.team .lede { margin-bottom: clamp(44px, 6vw, 60px); }

.founder-card {
  max-width: var(--wrap); margin: 0 auto clamp(40px, 6vw, 56px);
  display: grid; grid-template-columns: 300px 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  background: #FBF8F2;
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  padding: clamp(24px, 3.5vw, 40px);
}
.founder-photo img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; width: 100%; }
.founder-body h3 { font-size: 27px; margin: 6px 0 12px; }
.founder-bio { font-size: 15.5px; color: var(--ink-70); margin-bottom: 14px; }

.team-grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 40px) clamp(20px, 3vw, 32px);
}
/* team cards are real cards — warm paper, near-opaque, so the junk's
   course sails BEHIND them instead of crossing the copy */
.team-card {
  min-width: 0;
  position: relative;
  background: #FBF8F2;
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  overflow: hidden;
  padding: 0 16px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 40px -28px rgba(30,27,22,.28);
  transition: box-shadow .35s ease;
}
/* the photo runs full-bleed to the card edge (clipped by the radius);
   max-width:none defeats the global img { max-width: 100% } cap */
.team-card .headshot {
  width: calc(100% + 32px); max-width: none;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 0; margin: 0 -16px 14px;
}
/* an opened card lifts above its neighbours */
.team-card:has(.tm-more[open]) {
  z-index: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 30px 62px -26px rgba(30,27,22,.34);
}
.team-card h3 { font-size: 19px; font-weight: 400; }
.team-card .card-role { margin: 3px 0 6px; }

.support-row { max-width: var(--wrap); margin: clamp(44px, 6vw, 60px) auto 0; border-top: 1px solid var(--ink-15); padding-top: 34px; }
.support-row h4 {
  font-family: var(--ff-body); font-size: 11px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--coastal-text);
  margin-bottom: 22px;
}
.support-list { list-style: none; display: flex; flex-wrap: wrap; gap: 22px 40px; }
.support-list li { display: flex; align-items: center; gap: 13px; }
.support-list img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.support-meta { display: flex; flex-direction: column; line-height: 1.35; }
.support-meta strong { font-size: 15px; font-weight: 500; }
.support-meta span { font-size: 13px; color: var(--ink-70); }

/* ============================================================
   04 · FEES
   ============================================================ */
.fees-grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(22px, 3vw, 36px);
  align-items: stretch;
}
.fee-card {
  background: var(--ivory);
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  padding: clamp(26px, 3.5vw, 40px);
}
.fee-label {
  font-size: 11px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--coastal-text);
  margin-bottom: 14px;
}
/* fee cards read on a centre axis (scoped here — .bullet-list is shared
   with the founder's education list, .plain-list with the portal page) */
.fee-card .fee-label { text-align: center; }
.fee-card .bullet-list li { justify-content: center; text-align: center; }
.fee-card .plain-list li { text-align: center; }
.fee-amount { font-family: var(--ff-display); font-weight: 300; font-size: clamp(3rem, 5vw, 3.6rem); line-height: 1; margin-bottom: 16px; }
.fee-note { font-size: 15px; color: var(--ink-70); margin-top: 10px; }

.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.chip-list li {
  font-size: 13.5px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--ink-15);
  background: rgba(228,220,207,.4);
}

/* ============================================================
   05 · LOCATIONS
   ============================================================ */
.visit-grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 3vw, 36px);
}
.visit-card {
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  overflow: hidden;
  background: #FBF8F2;
}
.visit-art { width: 100%; height: auto; display: block; background: #EDF1F1; }
.visit-art line, .visit-waves path { vector-effect: non-scaling-stroke; }
.visit-horizon { stroke: var(--gold); stroke-opacity: .6; stroke-width: 1; }
.visit-art .glyph-fill { fill: var(--ink); }
.visit-art .glyph-stroke { stroke: var(--ink); }
.visit-art .glyph-gold { fill: var(--gold); }
.visit-waves path { fill: none; stroke: var(--coastal); stroke-opacity: .4; stroke-width: 1; }
.visit-card h3 { font-size: 23px; font-weight: 400; margin: 22px 28px 8px; }
.visit-card address { font-style: normal; font-size: 15.5px; color: var(--ink-70); margin: 0 28px 14px; }
.visit-card .card-link { display: inline-block; margin: 0 28px 26px; }

/* ============================================================
   CONTACT — the harbor
   ============================================================ */
.contact {
  position: relative;
  padding: clamp(80px, 11vw, 130px) var(--pad);
  color: var(--ink-70);
}
.contact::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--ivory);
  z-index: 0;
}
.contact > * { position: relative; z-index: 2; }

/* the form is its own symmetric panel: paired fields either side of a
   center axis, tags and the button on the axis itself */
.contact-panel {
  max-width: 720px;
  margin: 0 auto;
  background: #FBF8F2;
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  padding: clamp(28px, 4.5vw, 46px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 26px 52px -26px rgba(30,27,22,.22);
}
.field-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tags-field { text-align: center; }
.tags-field legend { margin-left: auto; margin-right: auto; }
.tag-row { justify-content: center; }
.form-error, .form-success { justify-content: center; text-align: left; }

/* below the panel: details and the two offices, mirrored */
.contact-meet {
  max-width: 900px;
  margin: clamp(44px, 6vw, 68px) auto 0;
  text-align: center;
}
/* reach tiles — call / email / portal, matching the office cards below */
.reach-row {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 1.6vw, 20px);
  max-width: 860px; margin: 0 auto clamp(40px, 5vw, 62px);
}
.reach {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: clamp(20px, 2.6vw, 28px) 14px;
  background: #FBF8F2;
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  color: var(--ink); text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 18px 40px -30px rgba(30,27,22,.26);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.reach:hover {
  text-decoration: none; transform: translateY(-3px);
  border-color: rgba(176,141,79,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 26px 52px -28px rgba(30,27,22,.32);
}
.reach-icon {
  width: 26px; height: 26px; margin-bottom: 2px;
  fill: none; stroke: var(--coastal-text); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.reach:hover .reach-icon { stroke: var(--gold); }
.reach-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--coastal-text);
}
.reach-value {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.3;
  overflow-wrap: anywhere;
}
.meet-eyebrow { margin-bottom: clamp(18px, 2.5vw, 26px); }
@media (max-width: 700px) { .reach-row { grid-template-columns: 1fr; } }

/* twin office cards — mirrored, equal height, maps on a shared waterline
   (the address area flexes, so uneven addresses can't misalign the maps) */
.contact-meet .office-blocks { margin-top: 0; gap: clamp(22px, 3vw, 34px); align-items: stretch; }
.contact-meet .office {
  display: flex; flex-direction: column;
  background: #FBF8F2;
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 26px 52px -26px rgba(30,27,22,.22);
}
.contact-meet .office h3 { color: var(--ink); font-size: 21px; margin-bottom: 12px; }
.contact-meet .office h3::after {
  content: '';
  display: block;
  width: 28px; height: 1px;
  margin: 12px auto 0;
  background: var(--gold); opacity: .75;
}
.contact-meet .office address { flex: 1; margin-bottom: 16px; color: var(--ink-70); }
.contact-meet .office-map {
  aspect-ratio: auto; height: 230px;
  border-radius: 12px;
  border-color: var(--ink-15);
  filter: saturate(.72) contrast(.96);
}

.contact-form { display: grid; gap: 22px; align-content: start; }
.field { display: grid; gap: 8px; }
/* an author `display` beats the UA sheet's [hidden] { display: none }, so the
   attribute silently stopped working on .field — the insurance picker was
   visible even before a payment option was chosen */
.field[hidden], .tags-field[hidden] { display: none; }
.field label, .tags-field legend {
  font-size: 11px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--coastal-text);
}
.optional { text-transform: none; letter-spacing: .02em; font-weight: 400; opacity: .8; }
.field input, .field textarea, .field select {
  width: 100%;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--ink-15);
  border-radius: 8px;
  padding: 13px 15px;
  color: var(--ink);
  font-family: var(--ff-body); font-weight: 300; font-size: 16px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176,141,79,.2);
}
.field-insurance { max-width: 420px; margin: 0 auto; width: 100%; text-align: center; }

/* careers form — the contact panel component, moored on the join page */
.careers-form {
  display: grid; gap: 22px;
  margin-top: clamp(44px, 6vw, 68px);
}
.careers-form .btn { justify-self: center; }
.careers-head { text-align: center; margin-bottom: 6px; }
.careers-head h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 400; margin-bottom: 10px; }
.careers-head h3 em { font-style: italic; }
.careers-head p { color: var(--ink-70); font-size: 15.5px; max-width: 460px; margin: 0 auto; }
.gfe-note { margin-top: clamp(28px, 4vw, 44px); max-width: 640px; font-size: 16px; }
.field input[aria-invalid="true"] { border-color: var(--ink); }

.tags-field { border: 0; }
.tags-field legend { margin-bottom: 10px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  font-family: var(--ff-body); font-size: 13.5px;
  color: var(--ink-70);
  background: none;
  border: 1px solid var(--ink-15);
  border-radius: 999px;
  padding: 8px 17px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.tag:hover { border-color: rgba(30,27,22,.4); }
.tag[aria-pressed="true"] {
  background: var(--ink); color: var(--ivory); border-color: var(--ink);
}

.contact .btn { justify-self: center; }

.form-error { color: var(--ink); font-size: 14.5px; }
.form-success { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-70); }
.form-success[hidden], .form-error[hidden] { display: none; }
.form-success svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   FOOTER — safe harbor
   ============================================================ */
.site-footer {
  background: var(--harbor);
  border-top: 1px solid var(--mist-18);
  color: var(--mist-70);
  padding: clamp(46px, 6vw, 64px) var(--pad) 40px;
}
/* dedication — sits directly above the junk, which is its memorial */
.footer-dedication {
  max-width: 660px;
  margin: 0 auto clamp(24px, 3.5vw, 36px);
  text-align: center;
  font-family: var(--ff-display);
  font-weight: 300; font-style: italic;
  font-size: clamp(14px, 1.35vw, 16.5px);
  line-height: 1.9;
  color: var(--mist-85);
  text-wrap: pretty;
}
.footer-crest { max-width: 240px; margin: 0 auto clamp(26px, 3.5vw, 38px); }
.footer-crest svg { width: 100%; height: auto; display: block; }
.fc-rule { stroke: var(--mist-30); stroke-width: 1; }
.fc-mast { stroke: var(--mist-70); stroke-width: 1; }
.fc-sail { fill: var(--gold); opacity: .9; }
.fc-hull { fill: var(--ivory); }

.footer-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
}
.footer-h {
  font-family: var(--ff-body);
  font-size: 10.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mist-50);
  margin-bottom: 16px;
}

.wordmark-ivory {
  -webkit-mask-image: url('../images/brand/wordmark-ivory.svg');
  mask-image: url('../images/brand/wordmark-ivory.svg');
  background: var(--ivory);
  width: 128px; height: 48px;
  margin-bottom: 18px;
}
.footer-motto {
  font-family: var(--ff-display); font-style: italic; font-weight: 300;
  font-size: 17px; color: var(--ivory); line-height: 1.5;
}
.footer-where { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--mist-70); }

.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.footer-nav a { color: var(--mist-85); font-size: 13.5px; }
.footer-nav a:hover { color: var(--ivory); }

.footer-contact { list-style: none; display: grid; gap: 13px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.6; }
.footer-contact address { font-style: normal; color: var(--mist-70); }
.footer-contact a { color: var(--mist-85); }
.footer-contact a:hover { color: var(--ivory); }
.fi {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px;
  fill: none; stroke: var(--gold); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}

.footer-base {
  max-width: var(--wrap); margin: clamp(38px, 5vw, 56px) auto 0;
  padding-top: 22px; border-top: 1px solid var(--mist-18);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.footer-crisis { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mist-85); }
.footer-crisis strong { color: var(--ivory); }
.footer-crisis .fi { margin-top: 0; }
.footer-copy { font-size: 12.5px; color: var(--mist-50); }
@media (max-width: 760px) {
  .footer-base { flex-direction: column; text-align: center; }
  .footer-crisis { justify-content: center; }
}
.footer-meta .fine strong { color: var(--ivory); }

/* ============================================================
   SERVICES · TEAM GROUPS · PATHS · JOIN · PORTAL · CLOSING
   ============================================================ */
.head-lede { margin-top: 14px; }
.anchor-alias { position: absolute; top: 0; }

/* --- the crossing motif: an empty, fixed-aspect mooring — the voyage
   layer measures this box and draws both crossing lines (and sails the
   junk along the lower one) in page coordinates, tied to scroll --- */
.cross-motif {
  display: block;
  width: min(600px, 88%);
  margin: 0 auto clamp(26px, 4vw, 44px);
}

/* the meeting point — a gold still-point that blooms as the junk
   arrives, then keeps breathing (the same 8s breath as the cards) */
.x-meet { fill: var(--gold); opacity: 0; transition: opacity 1.4s ease; }
.x-meet.lit { opacity: .95; }
.x-meet-halo {
  stroke: var(--gold); stroke-width: 1; fill: none; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.x-meet-halo.lit { animation: meetBreath 8s ease-in-out infinite; }
@keyframes meetBreath {
  0%, 100% { opacity: 0; transform: scale(.5); }
  50% { opacity: .55; transform: scale(1); }
}

/* rail mode: the crossing lines stay (they're content), the sailing
   layer yields to the rail boat */
.voyage-svg.rail-active .voyage-boat,
.voyage-svg.rail-active .voyage-wake,
.voyage-svg.rail-active .wake-word { display: none; }

/* --- service cards: charted paper, not plain boxes --- */
.service-card { position: relative; overflow: hidden; }
.service-card > * { position: relative; }
.card-sea {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 26px;
  pointer-events: none;
}
.card-sea path { stroke: var(--coastal); stroke-opacity: .3; stroke-width: 1; }
.service-card-beyond .card-sea path { stroke: var(--mist); stroke-opacity: .22; }

/* --- the still point: rings widening on resting water at a slow
   breath (4s in, 4s out) — motion quiet enough to breathe along with --- */
.card-breath {
  width: 92px; height: 92px;
  pointer-events: none;
  color: var(--coastal);
}
.service-card .card-breath, .fee-card .card-breath {
  position: absolute; top: 16px; right: 16px;
}
.service-card-beyond .card-breath { color: var(--mist); }
.cb-ring {
  fill: none; stroke: currentColor; stroke-width: 1;
  opacity: .2;
  transform-box: fill-box; transform-origin: center;
  animation: cardBreath 8s ease-in-out infinite;
}
.cb-r2 { opacity: .13; animation-delay: 1.2s; }
.cb-r3 { opacity: .08; animation-delay: 2.4s; }
.cb-core { fill: var(--gold); opacity: .5; animation: coreBreath 8s ease-in-out infinite; }
@keyframes cardBreath {
  0%, 100% { transform: scale(.93); }
  50% { transform: scale(1.06); }
}
@keyframes coreBreath {
  0%, 100% { opacity: .35; }
  50% { opacity: .8; }
}

.fee-card { overflow: hidden; }
.fee-card > * { position: relative; }
.fee-card > .card-sea { position: absolute; }

@media (max-width: 640px) {
  .card-breath { display: none; }
}

/* --- per-item glyphs: draw in on reveal, stir on hover --- */
.service-list li {
  display: flex; align-items: center; justify-content: center; gap: 15px;
  padding: 11px 8px;
  border-radius: 10px;
  transition: background .3s ease, transform .3s ease;
}
.service-list li:hover { background: rgba(228,220,207,.45); transform: translateX(5px); }
.service-card-beyond .service-list li:hover { background: rgba(215,226,231,.09); }

.s-glyph {
  width: 38px; height: 31px; flex-shrink: 0;
  color: var(--coastal-text);
  overflow: visible;
}
.service-card-beyond .s-glyph { color: var(--mist); }
.s-glyph .draw {
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.s-glyph circle.draw { fill: none; }
.service-card.in-view .s-glyph .draw {
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: glyphDraw 1.1s ease both;
  animation-delay: calc(.35s + var(--gd, 0s));
}
@keyframes glyphDraw { to { stroke-dashoffset: 0; } }
.service-list li:nth-child(1) { --gd: 0s; }
.service-list li:nth-child(2) { --gd: .12s; }
.service-list li:nth-child(3) { --gd: .24s; }
.service-list li:nth-child(4) { --gd: .36s; }
.service-list li:nth-child(5) { --gd: .48s; }
.service-list li:nth-child(6) { --gd: .6s; }

.g-gold { fill: var(--gold); opacity: 0; }
.g-gold-dot { fill: var(--gold); opacity: 0; }
.g-dot { fill: currentColor; }
.service-card.in-view .g-gold,
.service-card.in-view .g-gold-dot {
  animation: goldIn .7s ease both;
  animation-delay: calc(1.2s + var(--gd, 0s));
}
@keyframes goldIn { to { opacity: 1; } }

/* hover micro-motions */
.g-boat, .g-needle, .g-flag, .g-beam { transform-box: fill-box; }
.service-list li:hover .g-boat { animation: glyphBob 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes glyphBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1.6px) rotate(-2.5deg); }
}
.g-boat-late { animation-delay: .4s !important; }
.service-list li:hover .g-needle { animation: needleSwing 1.2s ease-in-out infinite; transform-origin: 16px 13px; }
@keyframes needleSwing {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(16deg); }
  65% { transform: rotate(-10deg); }
}
.service-list li:hover .g-flag { animation: flagWave 1s ease-in-out infinite; transform-origin: left center; }
@keyframes flagWave {
  0%, 100% { transform: skewY(0deg); }
  50% { transform: skewY(-6deg); }
}
.g-flag-late { animation-delay: .25s !important; }
.service-list li:hover .g-beam { animation: beamPulse 1.4s ease-in-out infinite; }
@keyframes beamPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
.g-beam-late { animation-delay: .5s !important; }
.service-list li:hover .g-route { stroke-dasharray: 2 3; animation: routeMarch 1.2s linear infinite; }
@keyframes routeMarch { to { stroke-dashoffset: -10; } }

.services-grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 3vw, 36px);
  align-items: stretch;
}
.service-card {
  background: #FBF8F2;
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  padding: clamp(26px, 3.5vw, 40px);
}
.service-card h3 { font-size: 23px; font-weight: 400; margin-bottom: 16px; text-align: center; }
.service-card .service-list { padding-bottom: 18px; }
.service-list { list-style: none; }
.service-list li { font-size: 16px; color: var(--ink-80); }
.service-card-beyond { background: var(--harbor); border-color: transparent; color: var(--mist-85); }
.service-card-beyond h3 { color: var(--ivory); }
.service-card-beyond .service-list li { color: var(--mist-85); }

.team-group {
  max-width: var(--wrap); margin: clamp(36px, 5vw, 52px) auto 22px;
  font-size: 22px; font-weight: 400;
}
.team .team-group:first-of-type { margin-top: 0; }
.team-group-note {
  max-width: var(--wrap); margin: -14px auto 24px;
  font-size: 14.5px; color: var(--ink-70);
}
.team-card h3 { font-family: var(--ff-display); font-size: 19px; font-weight: 400; }
.help-line { font-size: 15px; color: var(--ink-70); margin: 7px 0 10px; }
.headshot-placeholder {
  width: 100%; aspect-ratio: 4 / 5;
  background: var(--stone);
  border-radius: 10px; margin-bottom: 14px;
  display: grid; place-items: center;
}
.headshot-placeholder span {
  font-family: var(--ff-display); font-style: italic; font-weight: 300;
  font-size: 44px; color: var(--coastal-text); opacity: .7;
}
.tm-more summary {
  list-style: none; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--coastal-text);
}
.tm-more summary::-webkit-details-marker { display: none; }
.tm-more summary::after { content: ' +'; }
.tm-more[open] summary::after { content: ' –'; }
.tm-more summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.tm-body { padding: 10px 0 4px; font-size: 14px; color: var(--ink-70); text-align: left; }
.tm-body p { margin-bottom: 4px; }
.tm-role { font-size: 13px; }
.tm-meta { font-size: 12px; color: var(--ink-60); }
.tm-avail { font-size: 12.5px; color: var(--coastal-text); font-weight: 500; margin-top: 6px; }
.tm-sec { margin-top: 12px; }
.tm-label {
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--coastal-text); margin-bottom: 6px;
}
.tm-list { list-style: none; display: grid; gap: 5px; margin: 0; }
.tm-list li {
  position: relative; padding-left: 15px;
  font-size: 12.5px; color: var(--ink-70); line-height: 1.45;
}
.tm-list li::before {
  content: ''; position: absolute; left: 2px; top: .5em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
}
.tm-note { font-size: 12.5px; color: var(--ink-70); font-style: italic; margin-top: 6px; }
.tm-fine { font-size: 10.5px; color: var(--ink-60); line-height: 1.4; margin-top: 12px; }
.tm-body .card-link { display: inline-block; margin-top: 12px; }

.support-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.support-placeholder {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--stone);
  display: grid; place-items: center;
  font-family: var(--ff-display); font-style: italic;
  font-size: 18px; color: var(--coastal-text);
}

.plain-list { list-style: none; }
.plain-list li { padding: 10px 0; border-top: 1px solid var(--ink-15); font-size: 15.5px; color: var(--ink-80); }
.plain-list li:first-child { border-top: 0; }
/* Private Pay — each line carries a small chart-instrument icon in the gilded
   line-work of the voyage (coin, slider, superbill, compass) */
.fee-icon-list li { display: flex; align-items: center; justify-content: center; gap: 9px; }
.fee-icon-list svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
.fee-icon-list svg circle, .fee-icon-list svg path {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* reads as the Good Faith Estimates bullet's own description — it hangs
   directly under that (last) list item, so no divider of its own */
.fee-gfe-note {
  margin-top: 2px;
  font-size: 13px; line-height: 1.7; color: var(--ink-60); text-align: center;
}

/* ---- "we're hiring" — a card in the join section's own language, with a
   gold top rule as its one flourish ---- */
.hiring-card {
  /* same outer edges as the join-grid below — the card's left and right
     borders line up with the grid's first and last columns */
  max-width: var(--wrap); margin: 0 auto clamp(18px, 2.6vw, 28px);
  text-align: center;
  border-top: 2px solid var(--gold);
}
.hiring-eyebrow {
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--coastal-text); margin: 0 0 10px; font-weight: 700;
}
.hiring-card h3 {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 26px); margin-bottom: 8px;
}
.hiring-card h3 em { color: var(--gold); }
.hiring-card > p { max-width: 620px; margin: 0 auto; }
/* the benefits outline: names only, no numbers — the real schedule is tiered
   by role and still rolling out, so the card promises nothing it shouldn't */
.hiring-card > .hiring-benefits {
  max-width: 680px; margin-top: 12px;
  font-size: 13.5px; line-height: 1.75; color: var(--coastal-text);
}
.hiring-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 20px; }
.hiring-roles span {
  border: 1px solid var(--ink-15); border-radius: 999px; padding: 5px 13px;
  font-size: 12.5px; color: var(--ink-70);
}

/* visually hidden, still read by screen readers */
.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;
}

/* ---- cookie consent banner (non-modal; injected by js/consent.js) ---- */
.consent-banner {
  position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px;
  margin: 0 auto; max-width: 680px;
  background: var(--ivory); color: var(--ink);
  border: 1px solid var(--ink-15); border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(30,27,22,.45);
  padding: 20px 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
}
.consent-text { flex: 1 1 320px; margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-80); }
.consent-text a { color: var(--coastal-text); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-actions .btn { min-height: 44px; font-size: 14px; padding: 11px 20px; }

/* footer legal row — privacy link + the reopen-consent control */
.footer-legal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.linklike {
  color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.footer-legal a, .footer-legal .linklike { color: inherit; font-size: 13px; opacity: 1; }
.footer-legal a:hover, .footer-legal .linklike:hover { text-decoration-thickness: 2px; }
.legal-prose .linklike { color: var(--coastal-text); }
.footer-legal .dotsep { opacity: .5; }

/* privacy page prose */
.legal-prose { max-width: 760px; margin: 0 auto; padding: 0 24px clamp(56px, 8vw, 96px); }
.legal-prose h2 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 27px); margin: clamp(36px, 5vw, 52px) 0 14px; }
.legal-prose p, .legal-prose li { font-size: 15.5px; line-height: 1.8; color: var(--ink-80); }
/* WCAG 1.4.1: a link inside a paragraph cannot be signalled by colour alone */
.legal-prose a { text-decoration: underline; text-underline-offset: 3px; }
.legal-prose p { margin: 0 0 14px; }
.legal-prose ul { margin: 0 0 14px; padding-left: 22px; }
.legal-prose li { margin: 6px 0; }
.legal-prose table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14.5px; }
.legal-prose th, .legal-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ink-15); vertical-align: top; line-height: 1.6; }
/* --ink-60 on ivory is 4.0:1 — under the 4.5 AA floor for this size */
.legal-prose th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-70); }
.legal-updated { font-size: 13.5px; color: var(--ink-60); }

/* the pier the voyage ends at — timber strokes, a bollard, a lit lamp */
.voyage-dock line { stroke: rgba(30,27,22,.55); stroke-linecap: round; }
.voyage-dock .dock-ripple { stroke: rgba(108,139,161,.5); }
.voyage-dock .dock-lamp { fill: var(--gold); opacity: .92; }
.voyage-dock.in-dark line { stroke: rgba(215,226,231,.6); }
.voyage-dock.in-dark .dock-ripple { stroke: rgba(215,226,231,.35); }
.soft { color: var(--ink-60); font-size: .9em; }

/* custom-bullet lists: a tiny boat on its waterline marks each item */
.bullet-list { list-style: none; }
.bullet-list li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 8px 0;
  font-size: 15.5px; color: var(--ink-80);
}
.bullet-list li::before {
  content: '';
  flex-shrink: 0;
  width: 19px; height: 15px;
  margin-top: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 15'%3E%3Cline x1='1.5' y1='11' x2='17.5' y2='11' stroke='%2344637A' stroke-width='1.1' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M5.5 11 Q9.5 14 13.5 11 Z' fill='%2344637A'/%3E%3Cline x1='9.5' y1='11' x2='9.5' y2='2.5' stroke='%2344637A' stroke-width='1.1'/%3E%3Cpath d='M10.3 3.5 L10.3 9.5 L14.8 9.5 Z' fill='%23B08D4F'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cred-list { margin: 14px 0 16px; }
.cred-list li { font-size: 14.5px; color: var(--ink-70); padding: 6px 0; }

.section-cta { text-align: center; margin-top: clamp(30px, 5vw, 46px); }
.btn-solid { background: var(--ink); color: var(--ivory); }
.btn-solid:hover { background: #33302A; }

.paths .video-wrap { max-width: 760px; margin: 0 auto; }

/* two features, side by side (stacked on narrow screens) */
.video-duo {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(26px, 3.5vw, 46px);
  align-items: start;
}
.paths .video-duo .video-wrap { max-width: none; margin: 0; }
.video-title {
  font-family: var(--ff-display); font-size: 19px; font-weight: 400;
  line-height: 1.3; text-align: center; margin-top: 15px;
}
.video-duo .video-caption-line { margin-top: 6px; }
@media (max-width: 760px) { .video-duo { grid-template-columns: 1fr; } }
.paths-chips {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 720px; margin: clamp(30px, 5vw, 44px) auto 0;
}
.paths-chips li {
  font-size: 13.5px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--ink-15); background: rgba(228,220,207,.4);
}

/* ---------- expanded service cards (services.html) ---------- */
.service-list-detailed li {
  justify-content: flex-start; align-items: flex-start; text-align: left;
  gap: 14px; padding: 13px 6px;
}
.service-list-detailed li:hover { transform: none; background: rgba(228,220,207,.4); }
.service-card-beyond .service-list-detailed li:hover { background: rgba(215,226,231,.09); }
.service-list-detailed .s-glyph { margin-top: 3px; }
.sl-text { display: flex; flex-direction: column; gap: 3px; }
.sl-title { font-weight: 500; font-size: 15.5px; color: var(--ink); line-height: 1.35; }
.sl-desc { font-size: 13.5px; color: var(--ink-70); line-height: 1.5; }
.service-card-beyond .sl-title { color: var(--ivory); }
.service-card-beyond .sl-desc { color: var(--mist-85); }

/* ---------- FAQ (services.html) ---------- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--ink-10);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px;
  font-family: var(--ff-display); font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 400; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex-shrink: 0;
  font-family: var(--ff-body); font-weight: 300; font-size: 26px; line-height: 1;
  color: var(--coastal-text);
  transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--coastal-text); }
.faq-a { padding: 0 4px 24px; max-width: 680px; }
.faq-a p { color: var(--ink-70); font-size: 16px; }
.faq-a a { color: var(--coastal-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the logbook: journal entries + photo collages ---------- */
.log-entry {
  max-width: var(--wrap); margin: 0 auto;
  background: #FBF8F2;
  border: 1px solid var(--ink-10);
  border-radius: 18px;
  padding: clamp(26px, 4vw, 48px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 30px 60px -34px rgba(30,27,22,.28);
}
.log-meta {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 14px;
}
.log-date {
  font-family: var(--ff-body); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--coastal-text);
}
.log-cat {
  font-family: var(--ff-body); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  padding: 4px 12px; border-radius: 999px; background: rgba(176,141,79,.16);
}
.log-title {
  text-align: center; font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2; margin-bottom: 16px;
}
.log-title em { font-style: italic; }
.log-body { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 40px); text-align: center; }
.log-body p { color: var(--ink-70); font-size: 16.5px; }

.log-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 15vw, 190px);
  grid-template-areas:
    "a a b c"
    "a a b d"
    "e e f f";
  gap: clamp(8px, 1vw, 14px);
}
.lc { position: relative; overflow: hidden; border-radius: 12px; margin: 0; }
.lc img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s ease; }
.lc:hover img { transform: scale(1.045); }
.lc-a { grid-area: a; } .lc-b { grid-area: b; } .lc-c { grid-area: c; }
.lc-d { grid-area: d; } .lc-e { grid-area: e; } .lc-f { grid-area: f; }

@media (max-width: 680px) {
  .log-collage {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 42vw;
    grid-template-areas: "a a" "b c" "d e" "f f";
  }
}

.join-grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 28px);
}
.join-card {
  background: var(--ivory);
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  padding: clamp(22px, 3vw, 32px);
}
.join-card h3 { font-size: 20px; font-weight: 400; margin-bottom: 8px; }
.join-card p { font-size: 14.5px; color: var(--ink-70); }
.join-list {
  list-style: none; margin-top: 14px;
  display: grid; gap: 8px;
}
.join-list li {
  position: relative; padding-left: 24px;
  font-size: 13px; color: var(--coastal-text); line-height: 1.5;
}
.join-list li::before {
  content: ''; position: absolute; left: 0; top: .12em;
  width: 15px; height: 15px;
  background: var(--gold);
  -webkit-mask: var(--jicon) center / contain no-repeat;
  mask: var(--jicon) center / contain no-repeat;
}
.join-grid .join-card:nth-child(1) .join-list { --jicon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M7.6%202%20L7.6%208.6%20L12.2%208.6%20Z%20M2.4%2010%20Q8%2012.9%2013.6%2010%20L12%2012.1%20Q8%2013.5%204%2012.1%20Z%27%2F%3E%3C%2Fsvg%3E"); }
.join-grid .join-card:nth-child(2) .join-list { --jicon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M1.5%208a6.5%206.5%200%201%200%2013%200a6.5%206.5%200%201%200%20-13%200%20Z%20M5%208a3%203%200%201%200%206%200a3%203%200%201%200%20-6%200%20Z%27%2F%3E%3Cpath%20d%3D%27M7.2%201.6h1.6v2.2h-1.6z%20M7.2%2012.2h1.6v2.2h-1.6z%20M1.6%207.2h2.2v1.6h-2.2z%20M12.2%207.2h2.2v1.6h-2.2z%27%2F%3E%3C%2Fsvg%3E"); }
.join-grid .join-card:nth-child(3) .join-list { --jicon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M1.3%208a6.7%206.7%200%201%200%2013.4%200a6.7%206.7%200%201%200%20-13.4%200%20Z%20M2.7%208a5.3%205.3%200%201%200%2010.6%200a5.3%205.3%200%201%200%20-10.6%200%20Z%27%2F%3E%3Cpath%20d%3D%27M8%203.8%20L9.4%208%20L8%2012.2%20L6.6%208%20Z%27%2F%3E%3C%2Fsvg%3E"); }
.join-grid .join-card:nth-child(4) .join-list { --jicon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M5%201.8h1.2v12.4h-1.2z%20M6.2%202.8%20L13.4%205.4%20L6.2%208%20Z%27%2F%3E%3C%2Fsvg%3E"); }
.join-grid .join-card:nth-child(5) .join-list { --jicon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M8%201%20L9.15%206.85%20L15%208%20L9.15%209.15%20L8%2015%20L6.85%209.15%20L1%208%20L6.85%206.85%20Z%27%2F%3E%3C%2Fsvg%3E"); }

.office-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.office h3 { font-size: 19px; font-weight: 400; color: var(--ivory); margin-bottom: 6px; }
.office address { font-style: normal; font-size: 14px; color: var(--mist-85); margin-bottom: 12px; line-height: 1.6; }
.office-map {
  width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--mist-18);
  border-radius: 10px; display: block;
}
/* Click-to-load map. The Google embed sets Google cookies the moment it
   renders, so shipping it inline made "no cookies unless you say yes" untrue
   for every visitor who scrolled this far. The stub costs one click and keeps
   the promise; main.js swaps in the real iframe on activation. */
.office-map-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 0; cursor: pointer; font-family: inherit;
  background: var(--stone); color: var(--ink-70);
}
.office-map-stub svg { width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.4; }
.office-map-stub span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.office-map-stub small { font-size: 11.5px; color: var(--ink-60); }
.office-map-stub:hover { background: var(--mist); }

.portal-card {
  max-width: 640px; margin: 0 auto;
  background: #FBF8F2;
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  padding: clamp(26px, 3.5vw, 40px);
}
.portal-card .btn { margin-top: 24px; }

.closing {
  position: relative;
  padding: clamp(64px, 8vw, 96px) var(--pad);
  text-align: center;
  color: var(--ivory);
  overflow: hidden;
}
.closing::before { content: ''; position: absolute; inset: 0; background: var(--harbor); z-index: 0; }
.closing-sea { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.closing-inner { position: relative; z-index: 2; }
.closing-line { font-family: var(--ff-display); font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.35; }
.closing-em em { font-style: italic; }
.closing .btn { margin-top: 34px; }

/* ============================================================
   LIQUID GLASS — translucent tinted material, specular rim,
   corner sheen, layered depth (solid colors remain the fallback)
   ============================================================ */
.service-card, .founder-card, .fee-card, .join-card, .portal-card {
  position: relative;
  border: 1px solid rgba(255,253,247,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 26px 52px -26px rgba(30,27,22,.3),
    0 2px 10px -4px rgba(30,27,22,.12);
  transition: transform .35s ease, box-shadow .35s ease;
}
.service-card::after, .founder-card::after, .fee-card::after,
.join-card::after, .portal-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.42), rgba(255,255,255,0) 34%);
  pointer-events: none;
}
.service-card:hover, .founder-card:hover, .fee-card:hover,
.join-card:hover, .portal-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 34px 64px -28px rgba(30,27,22,.36),
    0 3px 12px -4px rgba(30,27,22,.14);
}
.service-card-beyond {
  border-color: rgba(215,226,231,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 26px 52px -26px rgba(20,40,54,.5);
}
.service-card-beyond::after {
  background: linear-gradient(118deg, rgba(255,255,255,.16), rgba(255,255,255,0) 34%);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .service-card, .founder-card, .fee-card, .join-card, .portal-card {
    background: linear-gradient(135deg, rgba(255,252,246,.38), rgba(255,252,246,.14));
    /* plain blur+saturate only — the liquid-lens displacement filter was
       re-rendered every scrolled frame and made the whole page lag */
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
  }
  .service-card-beyond {
    background: linear-gradient(135deg, rgba(49,86,108,.9), rgba(49,86,108,.78));
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
  }
  .chip-list li, .paths-chips li {
    background: rgba(255,252,246,.4);
    border-color: rgba(255,253,247,.75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px -3px rgba(30,27,22,.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .philosophy-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .join-grid { grid-template-columns: 1fr 1fr; }
  .support-row { grid-template-columns: 1fr; }
  .journey { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .founder-card { grid-template-columns: 1fr; }
  .founder-photo { max-width: 320px; }
  .fees-grid { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; }
  .field-duo { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 560px) {
  .hero-title .line { display: inline; }
  .wake-word { font-size: 12.5px; }
  .join-grid { grid-template-columns: 1fr; }
  .office-blocks { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .team-card h3 { font-size: 16px; }
  .team-card { padding: 0 12px 14px; }
  .team-card .headshot { width: calc(100% + 24px); margin: 0 -12px 12px; }
  .hero { padding-top: 130px; }
  .scroll-hint { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-load { opacity: 1; transform: none; animation: none; }
  .wake-word { opacity: 1; }
  .hero-video-bg { display: none; }
  /* The boat installs NEITHER engine under reduced motion — js/voyage.js bails before the feature test and keeps today's one-shot
     placement at 33% of the course. It CANNOT be done here: the animation-duration kill above has zero effect on scroll-progress
     timelines (spec §4.1) and no effect at all on WAAPI animations. The bob IS a time-based CSS animation, so the kill above does
     stop it. */
  .x-meet-halo.lit { animation: none; opacity: .4; transform: none; }
}

/* ============================================================
   MOBILE BUDGET
   Keep the liquid glass AND the boat on phones — just make the
   glass cheap. backdrop-filter cost scales with blur radius, so
   a 9px blur rasterises a fraction of what 22px does while
   reading the same at phone size.
   ============================================================ */
@media (max-width: 900px) {
  .service-card, .founder-card, .fee-card, .join-card, .portal-card {
    -webkit-backdrop-filter: blur(9px) saturate(1.3);
    backdrop-filter: blur(9px) saturate(1.3);
  }
  .service-card-beyond {
    -webkit-backdrop-filter: blur(8px) saturate(1.25);
    backdrop-filter: blur(8px) saturate(1.25);
  }
  .chip-list li, .paths-chips li {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .site-header.scrolled {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}


/* privacy note on every form — the message box was removed so health
   details never land in a web form; this says so plainly */
.form-privacy {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 480px; margin: 4px auto 0;
  text-align: left;
  font-size: 12.5px; line-height: 1.65; color: var(--ink-60);
}
.form-privacy svg {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px;
  fill: none; stroke: var(--gold); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- language switcher (EN / ES / VI) ---- */
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch a {
  font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
  /* full opacity: dimming to .7 over the harbor header dropped these below
     4.5:1. The current language is marked by weight + underline instead. */
  padding: 4px 6px; opacity: 1; text-decoration: none;
}
.lang-switch a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.lang-switch a[aria-current="true"] {
  font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
}
@media (max-width: 1100px) {
  /* inside the full-screen mobile menu the links are display type, so the
     switcher needs to read as one row rather than three stacked words */
  .lang-switch { gap: 10px; }
  .lang-switch a { font-family: var(--ff-body); font-size: 15px; padding: 6px 10px; color: var(--ivory); }
}