/* The Orange Boat : styles, v10 "Tide" (built on v6 "First light")
   Brand pack v1.0: Navy, Orange, Cloud, White. White carries the page; orange is ink only.
   Pills are actions (buttons, chips, tabs). Content is rounded: panels 16px, fields 10px, small 6px. */

/* Self-hosted fonts (SIL OFL): Montserrat for headings and numbers, Source Sans 3 for text.
   Each family's ₹ comes from a one-glyph subset of its own latin-ext file (unicode-range), so prices match the text. */
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-latin-700-normal.woff2) format("woff2"); font-weight: 700 800; font-display: swap; }
/* Each ₹ face repeats its latin face's exact weight descriptor, so the two combine into one face per weight. */
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-rupee-600.woff2) format("woff2"); font-weight: 500; unicode-range: U+20B9; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-rupee-600.woff2) format("woff2"); font-weight: 600; unicode-range: U+20B9; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(fonts/montserrat-rupee-700.woff2) format("woff2"); font-weight: 700 800; unicode-range: U+20B9; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-rupee-400.woff2) format("woff2"); font-weight: 400; unicode-range: U+20B9; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-rupee-600.woff2) format("woff2"); font-weight: 500 600; unicode-range: U+20B9; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-rupee-600.woff2) format("woff2"); font-weight: 700; unicode-range: U+20B9; font-display: swap; }

:root {
  /* Brand pack v1.0 */
  --navy: #071B38;       /* text, structure, the footer */
  --orange: #FF5A00;     /* ink only: the streak, the symbol, units, the primary button */
  --cloud: #F2F5F9;      /* quiet bands, the sky */
  --paper: #FFFFFF;      /* the page */
  /* Derived interface neutrals (all pass WCAG AA where used) */
  --slate: #5B6B80;      /* secondary text on white (5.4:1) and cloud (5.0:1) */
  --sky: #9FB0C8;        /* secondary text on navy (7.8:1) */
  --mist: #D9E0EA;       /* hairlines on white and cloud */
  --tide: #1D3355;       /* hairlines on navy */
  --foam: #E6ECF4;       /* long text on navy */
  --ember: #C2410C;      /* errors only (5.2:1 on white) */
  --ink: var(--navy); --fog: var(--slate); --ash: var(--sky); --shell: var(--cloud);
  /* One drawing line, one hairline, one radius family */
  --line: 1.5px;
  --hair: 1px solid var(--mist);
  --r-panel: 16px; --r-field: 10px; --r-small: 6px;

  --font-display: "Montserrat", Arial, sans-serif;
  --font-body: "Source Sans 3", Arial, sans-serif;

  --max: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --section: clamp(88px, 9vw, 136px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --fs-h2: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.3rem, 1.7vw, 1.5rem);
  --fs-lead: clamp(1.15rem, 1.4vw, 1.3rem);
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; max-width: 64ch; }
/* No word left alone on a last line */
p, li, dt, dd, a, label, legend, summary, figcaption, blockquote, h1, h2, h3 { text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--navy); color: var(--paper); }

.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.how :focus-visible, .roles :focus-visible, .audit :focus-visible, .svc-hero :focus-visible, .svc-lists :focus-visible { outline-color: var(--ink); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--section) 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s { display: block; }

/* ---------- Type ---------- */
.h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.022em; font-weight: 700; max-width: 18ch; text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 52ch; color: var(--slate); }
/* Figures: one language for every number on the page. Navy figure, small orange unit. */
.fig { margin: 0; display: block; line-height: .9; font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; }
.fig b { font-weight: 600; letter-spacing: -0.045em; line-height: .9; color: var(--navy); }
.unit { font-size: 1em; font-weight: 600; letter-spacing: -0.01em; color: var(--orange); }
.unit-sym { margin-left: .06em; }

/* Links: navy with an orange underline */
.link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-thickness .15s var(--ease); }
.link:hover { text-decoration-thickness: 3px; }
.link-plain { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: none; border: 0; padding: 10px 2px; font-weight: 600; text-decoration: none; cursor: pointer; }
.link-plain:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Buttons, chips ---------- */
.btn {
  --h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 26px; border-radius: 999px; border: var(--line) solid var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem; letter-spacing: -0.005em; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--paper); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-sm { --h: 44px; padding: 0 18px; font-size: .875rem; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; }
.btn-icon svg, .btn .i { width: 20px; height: 20px; flex: none; }
.btn[disabled] { opacity: .55; cursor: progress; }


/* ---------- Drawings ---------- */
/* One system: a 1.5 px navy line (stroke widths below are set per rendered size so the line stays 1.5 px),
   round joins, 16 px panel radius, and orange only ever as one thin line. */
.ic { display: block; flex: none; width: 24px; height: 24px; color: var(--ink); stroke-width: 1.5; }
.rule { display: inline-block; flex: none; width: 28px; height: var(--line); border-radius: 1px; background: var(--orange); }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.logo .lockup { display: block; height: 44px; width: auto; }
.footer .lockup { height: 52px; }
.done-mark { fill: var(--orange); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--mist); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.nav nav ul { display: flex; gap: 32px; }
.nav nav ul a { text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: .875rem; padding: 12px 0; background: linear-gradient(var(--orange), var(--orange)) 0 calc(100% - 6px) / 0 var(--line) no-repeat; transition: background-size .25s var(--ease); }
.nav nav ul a:hover { background-size: 100% var(--line); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
#nav-cta.is-hot { background: var(--orange); border-color: var(--orange); color: var(--ink); }
#nav-cta.is-hot:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.menu-btn { display: none; appearance: none; background: none; border: var(--line) solid var(--ink); width: 44px; height: 44px; border-radius: 999px; cursor: pointer; }
.menu-btn i { display: block; width: 16px; height: var(--line); background: var(--ink); margin: 4px auto; transition: transform .25s var(--ease); }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-2.75px) rotate(-45deg); }
.mobile-menu { display: none; }

/* ---------- Hero: still water, and a rising orange streak with the boat on it ---------- */
/* The sky is a Cloud-to-White tint set from the visitor's local hour (app.js). Day is the default. */
.hero { position: relative; }
.sky {
  position: relative; overflow: hidden; background-color: var(--paper);
  background-image: linear-gradient(180deg, var(--sky-top, color-mix(in srgb, var(--cloud) 80%, #fff)) 0%, var(--sky-bot, color-mix(in srgb, var(--cloud) 10%, #fff)) 100%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
.sky .hero-grid { min-height: clamp(600px, calc(100svh - 72px), 820px); }
.hero-copy { align-self: center; max-width: 640px; padding: clamp(40px, 7vh, 88px) 0 clamp(96px, 14vh, 140px); }
.kicker { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--slate); margin-bottom: clamp(20px, 3vh, 32px); text-wrap: balance; }
.hero-title { margin: 0; max-width: none; font-family: var(--font-display); }
.ht-big { display: block; font-weight: 700; font-size: clamp(3.4rem, min(8vw, 13.5vh), 7.25rem); line-height: .94; letter-spacing: -0.048em; }
.ht-big > span, .ht-sub > span { display: block; }
.ht-sub { display: block; margin-top: clamp(18px, 2.8vh, 28px); font-weight: 500; font-size: clamp(1.3rem, 2.05vw, 1.85rem); line-height: 1.22; letter-spacing: -0.016em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 4vh, 40px); }

/* ---------- Why ---------- */
.why .h2 { max-width: none; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 40px); margin-top: clamp(36px, 4.4vw, 56px); }
.why-grid li { padding-top: 24px; border-top: var(--hair); }
.why-grid .ic { width: 40px; height: 40px; margin-bottom: 18px; stroke-width: .9; }
.why-grid h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 10px; }
.why-grid p { margin: 0; color: var(--slate); }

/* ---------- Team ---------- */
.team-sec { padding-top: 0; }
.team-sec .h2 { padding-top: clamp(56px, 6vw, 88px); border-top: var(--hair); max-width: none; margin-bottom: clamp(32px, 4vw, 48px); }
.team-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.team-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.member img { width: 100%; height: auto; border-radius: var(--r-panel); }
.member figcaption { display: grid; margin-top: 12px; }
.member b { font-family: var(--font-display); font-weight: 600; }
.member span { font-size: var(--fs-small); color: var(--slate); }
.founder-quote blockquote p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.45rem, 2.6vw, 2.3rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 26ch; margin: 0; text-wrap: balance; }
.founder-quote figcaption { margin-top: 20px; color: var(--slate); }
.founder-quote figcaption b { font-weight: 600; color: var(--navy); }

/* ---------- Audit: a ticket, then the form ---------- */
.audit { background: var(--cloud); }
.audit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.audit .lead { margin-top: 18px; text-wrap: balance; }
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: 40px; max-width: 500px; background: var(--paper); border: var(--line) solid var(--navy); border-radius: var(--r-panel); overflow: hidden; }
.tk-main { padding: 26px 28px 28px; }
.tk-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.tk-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 22px 0 0; font-family: var(--font-display); }
.tk-price s { font-weight: 600; font-size: 1.375rem; color: var(--slate); text-decoration-color: var(--orange); text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; }
.tk-price b { font-weight: 700; font-size: clamp(3.25rem, 4.6vw, 4.25rem); line-height: .9; letter-spacing: -0.045em; }
.tk-stub { position: relative; display: grid; align-content: center; gap: 18px; padding: 26px 30px; background: linear-gradient(var(--navy) 50%, transparent 0) 0 0 / var(--line) 10px repeat-y; }
.tk-stub::before, .tk-stub::after { content: ""; position: absolute; left: calc(-15px + var(--line) / 2); width: 30px; height: 30px; border-radius: 50%; background: var(--cloud); border: var(--line) solid var(--navy); }
.tk-stub::before { top: -17px; }
.tk-stub::after { bottom: -17px; }
.tk-stub .fig b { font-size: 2.25rem; }
.tk-stub .fig { font-size: 1.5rem; }
.tk-stub dd { margin-top: 4px; font-size: var(--fs-small); line-height: 1.2; color: var(--slate); }
.offer-wa { margin: 28px 0 0; }

.form { border-radius: var(--r-panel); background: var(--paper); padding: clamp(24px, 3.5vw, 44px); border: var(--hair); position: relative; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.form-steps span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: var(--line) solid var(--ink); font-weight: 600; font-size: .875rem; }
.form-steps span.on { background: var(--ink); color: var(--paper); }
.form-steps i { width: 36px; height: var(--line); background: var(--mist); }
.step-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 1.85rem); letter-spacing: -0.015em; line-height: 1.1; margin-bottom: 24px; padding: 0; }
.step-title b { font-weight: inherit; }
.step-title span { display: block; font-family: var(--font-body); font-weight: 400; font-size: .9375rem; letter-spacing: 0; color: var(--fog); margin-top: 6px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full, .consent.full { grid-column: 1 / -1; }
.field > label, .field > legend { font-weight: 600; font-size: .9375rem; padding: 0; }
.field .opt { font-weight: 400; color: var(--fog); }
.field input, .field textarea {
  width: 100%; border: var(--line) solid var(--ink); border-radius: var(--r-field); background: var(--paper);
  padding: 11px 13px; font-size: 1.0625rem; min-height: 50px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.field input::placeholder, .field textarea::placeholder { color: var(--fog); }
.field .err { color: var(--ember); font-size: .875rem; margin: 0; font-weight: 500; }
.field .err:empty { display: none; }
.field .err:not(:empty)::before { content: "! "; font-weight: 700; }
.field.invalid input, .field.invalid textarea { border-color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); }
.hint { font-size: .875rem; color: var(--fog); margin: 2px 0 0; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.pick label { position: relative; font-weight: 500; font-size: .9375rem; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: var(--line) solid var(--ink); border-radius: 999px; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.pick label:hover span { background: var(--cloud); }
.pick input:checked + span { background: var(--ink); color: var(--paper); }
.pick input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.notice { font-size: .875rem; line-height: 1.5; color: var(--slate); margin: 22px 0 0; max-width: none; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; line-height: 1.45; color: var(--navy); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.form-status { margin: 14px 0 0; font-size: .9375rem; }
.form-status:empty { margin: 0; }
.form-status.error { color: var(--ember); font-weight: 500; }
.form-reassure { font-size: .875rem; color: var(--fog); margin: 18px 0 0; padding-top: 14px; border-top: var(--hair); max-width: none; }
.form-done { display: none; }
.form.is-done .form-body { display: none; }
.form.is-done .form-done { display: block; outline: none; }
.done-mark { width: 64px; height: 58px; margin-bottom: 20px; }
.form-done h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); letter-spacing: -0.015em; line-height: 1.08; margin-bottom: 14px; max-width: 18ch; }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- FAQ (service pages) ---------- */
.faq-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .h2 { font-size: clamp(1.8rem, 2.7vw, 2.5rem); position: sticky; top: 112px; }
.faq details { border-bottom: var(--hair); }
.faq details:first-child { border-top: var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -0.006em; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 26px; height: 26px; border: var(--line) solid var(--ink); border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 11px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 11px no-repeat; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 0 24px; }
.faq .ans p { margin: 0; max-width: 62ch; }

/* ---------- Final CTA + footer ---------- */
.final { padding: var(--section) 0 clamp(72px, 8vw, 112px); }
.final h2 { font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; max-width: 13ch; text-wrap: balance; }
.final .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 32px; margin-top: 32px; }
.final .lead { margin: 0; }
.final-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.final .row .final-ctas { margin-top: 0; }
/* The page ends where it began: the boat on the orange line, with the footer as deep water */
.foot-sea { border-bottom: var(--line) solid var(--orange); }
.foot-boat { fill: var(--orange); width: clamp(56px, 5vw, 76px); height: auto; margin-left: auto; margin-right: clamp(0px, 3vw, 48px); }
.footer { background: var(--ink); color: var(--paper); padding: 56px 0 32px; font-size: 1rem; }
.foot-tagline { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--paper); margin: 22px 0 6px; }
.footer .logo { color: var(--paper); }
.foot-grid { display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--tide); }
.foot-grid h2 { font-family: var(--font-body); font-weight: 600; font-size: .875rem; color: var(--ash); margin-bottom: 14px; }
.foot-grid ul { display: grid; gap: 6px; }
.foot-grid a { text-decoration: none; display: inline-block; padding: 6px 0; }
.foot-grid a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.foot-tag { color: var(--ash); margin: 0; max-width: 34ch; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 24px; color: var(--ash); font-size: .875rem; }
.foot-bottom p { margin: 0; }
.foot-bottom a { color: inherit; }

/* ---------- Mobile sticky bar ---------- */
.sticky-bar { display: none; }

/* ---------- Service, legal and 404 pages ---------- */
.sprite { position: absolute; }
.ts-slot:empty { display: none; }
.ts-slot { margin-top: 16px; max-width: 100%; }
.crumbs { padding-top: 16px; font-size: var(--fs-small); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--slate); }
.crumbs a { color: var(--slate); }
.svc-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 88px); background: linear-gradient(180deg, var(--cloud), var(--paper)); border-bottom: var(--line) solid var(--orange); }
.svc-hero .kicker .rule { display: none; }
.svc-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 18ch; text-wrap: balance; }
.svc-hero .lead { margin: 20px 0 28px; }
.svc-hero.notfound { min-height: 52vh; }
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.svc-body .h2 { text-wrap: balance; }
.svc-lists { background: var(--cloud); }
.h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 16px; }
.list li { padding: 12px 0; border-bottom: var(--hair); display: flex; gap: 12px; align-items: baseline; }
.list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1.5px; background: var(--navy); transform: translateY(-2px); }
.list.out li::before { width: 14px; height: var(--line); border-radius: 1px; background: var(--orange); transform: translateY(-5px); }
.svc-stages .lead { margin-top: 16px; }
.svc-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.svc-links a { display: grid; gap: 4px; height: 100%; padding: 22px 24px; border: var(--hair); border-radius: var(--r-panel); text-decoration: none; transition: border-color .2s var(--ease); }
.svc-links a:hover { border-color: var(--navy); }
.svc-links b { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.svc-links span { color: var(--slate); }
.svc-links a[aria-current="page"] { border: var(--line) solid var(--navy); }
.svc-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); margin-top: 32px; }
.svc-hub article { padding-top: 22px; border-top: var(--hair); }
.svc-hub h3 { font-size: var(--fs-h3); line-height: 1.12; margin-bottom: 12px; }
.legal { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); }
.legal .wrap > * { max-width: 72ch; }
.legal h1 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; }
.legal h2 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.01em; margin: 40px 0 12px; scroll-margin-top: 96px; }
.legal-date { color: var(--slate); margin: 12px 0 28px; }
.legal .list { margin: 0 0 1em; }
.legal .list li { margin-bottom: 8px; }
.legal .wrap > .legal-table { max-width: 100%; }
.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0 20px; font-size: 1rem; line-height: 1.4; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: var(--hair); }
.legal-table thead th { font-weight: 600; border-top: 0; color: var(--slate); }
.legal-table tbody th { font-weight: 600; }
.legal-address { font-style: normal; padding: 18px 20px; background: var(--cloud); border-radius: var(--r-panel); margin-bottom: 1em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .nav nav ul { gap: 22px; } }
@media (max-width: 900px) {
  .nav nav ul, .nav-cta .btn-icon { display: none; }
  .menu-btn { display: block; }
  .mobile-menu { display: block; position: fixed; inset: 72px 0 0 0; z-index: 49; background: var(--paper); padding: 24px var(--pad); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; }
  .mobile-menu.open { transform: none; opacity: 1; visibility: visible; transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .mobile-menu ul { border-top: var(--hair); }
  .mobile-menu li a { display: block; padding: 18px 0; border-bottom: var(--hair); font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; text-decoration: none; letter-spacing: -0.015em; }
  .mobile-menu .btn { margin-top: 24px; width: 100%; }
  .mobile-menu .btn + .btn { margin-top: 10px; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .sky .hero-grid { min-height: 0; }
  .hero-copy { max-width: none; padding: 36px 0 var(--scene); }

  .why-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .audit-grid { grid-template-columns: 1fr; }
  .audit .form { margin-top: 40px; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq .h2 { position: static; }
  .svc-grid, .svc-links, .svc-hub { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }

  .sticky-bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: var(--hair); visibility: visible; transition: transform .25s var(--ease), visibility 0s 0s; }
  .sticky-bar .btn-primary { flex: 1; }
  .sticky-bar .btn-icon { width: 54px; min-height: 54px; }
  .sticky-bar.is-hidden, .menu-open .sticky-bar { transform: translateY(110%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s; }
  html { scroll-padding-bottom: 96px; }
  .footer { padding-bottom: 104px; }
}
@media (max-width: 900px) and (max-height: 500px) { .sticky-bar { display: none; } }
@media (max-width: 640px) {
  :root { --fs-body: 1rem; }
  .nav .btn-sm { display: none; }
  .hero-ctas .btn, .final-ctas .btn { width: 100%; }
  .ht-big { font-size: clamp(3rem, 15.5vw, 4.5rem); }
  .ht-sub { font-size: clamp(1.2rem, 5.6vw, 1.45rem); }
  .kicker { font-size: .875rem; }
  .fields, .why-grid { grid-template-columns: 1fr; }
  .tk-main { padding: 22px 20px 24px; }
  .tk-stub { padding: 20px 18px; gap: 14px; }
  .tk-price b { font-size: 3rem; }
  .tk-stub .fig b { font-size: 1.875rem; }
  .tk-stub .fig { font-size: 1.5rem; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: 100%; }
  .legal-table tr { padding: 12px 0; border-top: var(--hair); }
  .legal-table th, .legal-table td { border: 0; padding: 2px 0; }
}
@media (max-width: 360px) {
  .record li { grid-template-columns: 7.25rem minmax(0, 1fr); }
  .tk-price s { font-size: 1.125rem; }
  .tk-price b { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (min-width: 641px) and (max-width: 1180px) { .why-grid { grid-template-columns: 1fr 1fr; row-gap: 48px; } }
/* Footer links are comfortable tap targets on phones */
@media (max-width: 900px) {
  .foot-grid ul { gap: 0; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-grid a { padding: 0; }
}
@media (max-width: 900px) { .foot-grid li, .foot-grid a { text-wrap: balance; } }
@media (max-width: 380px) { .foot-grid { grid-template-columns: 1fr; } }
.tk-name { white-space: nowrap; }
h1, h2, h3, summary, th, td, .tags li, .list li { text-wrap: balance; }
@media (max-width: 640px) {
  .svc-hero h1 { font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .faq .h2 { font-size: 1.75rem; }
}

/* ==========================================================================
   v6 "First light": night meets day.
   The hero is a starry night; the swell's White body is the light page itself. The page closes under stars again.
   One drawing system: a 1.5 px line, round ends, 16 px panels. Navy line on White/Cloud, Mist for faint lines,
   Sky/Tide on Navy. Orange is one thin line or one small lit point per drawing, plus the boat.
   ========================================================================== */
:root {
  --stars: radial-gradient(circle at 54.3% 59.9%, rgba(230, 236, 244, 0.54) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 69.8% 1.9%, rgba(230, 236, 244, 0.56) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 92.2% 74.9%, rgba(230, 236, 244, 0.28) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 92.3% 60.4%, rgba(230, 236, 244, 0.54) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 91.2% 87.8%, rgba(230, 236, 244, 0.41) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 83.7% 22.6%, rgba(230, 236, 244, 0.30) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 42.8% 19.2%, rgba(230, 236, 244, 0.50) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 87.8% 2.2%, rgba(230, 236, 244, 0.36) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 50.9% 31.1%, rgba(230, 236, 244, 0.32) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 66.4% 89.9%, rgba(230, 236, 244, 0.48) 0 1.3px, rgba(230, 236, 244, 0) 2.2px), radial-gradient(circle at 61.4% 14.0%, rgba(230, 236, 244, 0.67) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 86.3% 54.2%, rgba(230, 236, 244, 0.54) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 50.5% 60.5%, rgba(230, 236, 244, 0.69) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 70.8% 15.5%, rgba(230, 236, 244, 0.51) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 87.8% 5.1%, rgba(230, 236, 244, 0.63) 0 1.3px, rgba(230, 236, 244, 0) 2.2px), radial-gradient(circle at 40.7% 8.0%, rgba(230, 236, 244, 0.26) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 92.2% 84.7%, rgba(230, 236, 244, 0.67) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 90.8% 69.2%, rgba(230, 236, 244, 0.36) 0 1.3px, rgba(230, 236, 244, 0) 2.2px), radial-gradient(circle at 24.8% 3.1%, rgba(230, 236, 244, 0.22) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 68.8% 14.4%, rgba(230, 236, 244, 0.66) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 48.9% 0.0%, rgba(230, 236, 244, 0.68) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 92.2% 0.5%, rgba(230, 236, 244, 0.67) 0 1.3px, rgba(230, 236, 244, 0) 2.2px), radial-gradient(circle at 96.9% 46.3%, rgba(230, 236, 244, 0.56) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 22.3% 12.1%, rgba(230, 236, 244, 0.50) 0 1.3px, rgba(230, 236, 244, 0) 2.2px), radial-gradient(circle at 76.9% 61.9%, rgba(230, 236, 244, 0.58) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 3.3% 5.1%, rgba(230, 236, 244, 0.68) 0 1.3px, rgba(230, 236, 244, 0) 2.2px), radial-gradient(circle at 68.8% 85.8%, rgba(230, 236, 244, 0.24) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 86.1% 99.0%, rgba(230, 236, 244, 0.70) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 88.2% 28.9%, rgba(230, 236, 244, 0.34) 0 0.9px, rgba(230, 236, 244, 0) 1.8px), radial-gradient(circle at 88.7% 45.6%, rgba(230, 236, 244, 0.40) 0 0.9px, rgba(230, 236, 244, 0) 1.8px);
  --swell-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 44C540 44 830 4 1180 4C1320 4 1400 9 1440 12V48H0Z'/%3E%3C/svg%3E");
  --swell-h: clamp(18px, 2.6vw, 40px);
}

/* ---------- Night surfaces: navy, a sparse still sky, a few stars breathing slowly ---------- */
.night { position: relative; isolation: isolate; background-color: var(--navy); background-image: var(--stars); color: var(--paper); }
.night::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 71% 9%, rgba(230, 236, 244, .9) 0 1.3px, rgba(230, 236, 244, 0) 2.4px), radial-gradient(circle at 88% 22%, rgba(230, 236, 244, .9) 0 1.3px, rgba(230, 236, 244, 0) 2.4px), radial-gradient(circle at 56% 31%, rgba(230, 236, 244, .8) 0 1.1px, rgba(230, 236, 244, 0) 2.2px), radial-gradient(circle at 95% 6%, rgba(230, 236, 244, .8) 0 1.1px, rgba(230, 236, 244, 0) 2.2px);
  opacity: .7; }
.hero .night::after { opacity: .35; animation: twinkle 7s ease-in-out 2.6s 6 alternate; }
@keyframes twinkle { to { opacity: 1; } }
.still .night::after, .still .hero .night::after { animation: none; opacity: .7; }

/* ---------- Sections rise in on one long, low swell (same curve as the hero, rising left to right) ---------- */
.swell-top { position: relative; }
.swell-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--swell-h); background: var(--surface, var(--paper)); -webkit-mask: var(--swell-mask) 0 0 / 100% 100% no-repeat; mask: var(--swell-mask) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.final { --swell-h: clamp(36px, 5.4vw, 84px); }
main:has(> .final:last-child) + .foot-sea::before { display: none; }

/* ---------- Header: night over the hero, day once the light page reaches it ---------- */
.logo .lockup-night { display: none; }
.nav { transition: border-color .2s var(--ease), background-color .3s var(--ease); }
body:has(.hero .night):not(.menu-open) .nav:not(.is-day) { background: var(--navy); border-bottom-color: transparent; color: var(--paper); }
body:has(.hero .night):not(.menu-open) .nav:not(.is-day) .logo .lockup-day { display: none; }
body:has(.hero .night):not(.menu-open) .nav:not(.is-day) .logo .lockup-night { display: block; }
body:has(.hero .night):not(.menu-open) .nav:not(.is-day) .btn-secondary { color: var(--paper); border-color: var(--paper); }
body:has(.hero .night):not(.menu-open) .nav:not(.is-day) .btn-secondary:hover { background: var(--paper); color: var(--ink); }
body:has(.hero .night):not(.menu-open) .nav:not(.is-day) #nav-cta { background: var(--paper); border-color: var(--paper); color: var(--ink); }
body:has(.hero .night):not(.menu-open) .nav:not(.is-day) #nav-cta:hover { background: transparent; color: var(--paper); }
body:has(.hero .night):not(.menu-open) .nav:not(.is-day) .menu-btn { border-color: var(--paper); }
body:has(.hero .night):not(.menu-open) .nav:not(.is-day) .menu-btn i { background: var(--paper); }


/* ==========================================================================
   v10 "Tide": night hero, then a calm rhythm of light and navy bands.
   White services, navy values under stars, Cloud benefits, White why us, a navy results band,
   White team, Cloud audit, night close. Each change of surface rises in on the same long, low swell.
   ========================================================================== */
.how { --surface: var(--paper); }
.value, .results, .final, .foot-sea { --surface: var(--navy); }
.roles, .audit { --surface: var(--cloud); }
.why, .team-sec { --surface: var(--paper); }
.how :focus-visible, .roles :focus-visible, .why :focus-visible, .team-sec :focus-visible { outline-color: var(--ink); }
.value :focus-visible, .results :focus-visible { outline-color: var(--orange); }

/* ---------- Hero ---------- */
.hero .sky.night { background-color: var(--navy); background-image: var(--stars); }
@media (min-width: 901px) {
  .hero .sky.night { background-image: linear-gradient(90deg, var(--navy) 0 50%, rgba(7, 27, 56, 0) 64%), var(--stars); background-size: 100% 84%, auto; background-position: 0 100%, 0 0; background-repeat: no-repeat, repeat; }
  .hero .night::after { background-position: 0 0; -webkit-mask: linear-gradient(90deg, transparent 0 50%, #000 64%); mask: linear-gradient(90deg, transparent 0 50%, #000 64%); }
}
.hero-title { color: var(--paper); }
.ht-sub { color: var(--foam); }
.hero .ht-sub { margin-top: clamp(20px, 3.2vh, 32px); }
.hero-copy { max-width: 780px; }
.hero .btn-secondary, .final .btn-secondary { color: var(--paper); border-color: var(--paper); }
.hero .btn-secondary:hover, .final .btn-secondary:hover { background: var(--paper); color: var(--ink); }
.hero .btn-primary:hover, .final .btn-primary:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* What we do: three stations joined by a thin line. Each lights in turn as the crest draws, and each jumps to its card. */
.hero-svc { position: relative; display: flex; flex-wrap: nowrap; align-items: center; margin-top: clamp(20px, 3.2vh, 32px); }
.hero-svc li { display: flex; align-items: center; }
.hero-svc li + li::before { content: ""; flex: none; width: clamp(18px, 2.2vw, 32px); height: 1px; margin: 0 14px; background: rgba(159, 176, 200, .5); }
.hero-svc a { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.1875rem); letter-spacing: -0.012em; line-height: 1.2; color: var(--paper); text-decoration: none; white-space: nowrap; animation: svc-on .6s var(--ease) both; }
.hero-svc a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hero-svc i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 90, 0, .2), 0 0 14px 2px rgba(255, 90, 0, .35); animation: dot-on .6s var(--ease) both; }
.hero-svc li:nth-child(1) a, .hero-svc li:nth-child(1) i { animation-delay: .7s; }
.hero-svc li:nth-child(2) a, .hero-svc li:nth-child(2) i { animation-delay: 1.05s; }
.hero-svc li:nth-child(3) a, .hero-svc li:nth-child(3) i { animation-delay: 1.4s; }
@keyframes svc-on { from { color: var(--sky); } }
@keyframes dot-on { from { background: var(--tide); box-shadow: 0 0 0 0 rgba(255, 90, 0, 0), 0 0 0 0 rgba(255, 90, 0, 0); transform: scale(.7); } }

/* The swell, in three layers: two Tide swells behind that drift very slowly, and the front swell whose body is the
   White page. Drawn in pixels by app.js; without JS these stretched curves are the final frame.
   One orchestrated moment: everything rises from a flat line (--lift), the crest lights from the left, the boat rides up. */
@property --lift { syntax: "<number>"; inherits: true; initial-value: 1; }
.hero { --scene: 0px; }
.scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; --lift: 1; animation: lift 2s var(--ease) .1s both; }
@keyframes lift { from { --lift: 0; } to { --lift: 1; } }
.hero-grid { z-index: 1; }
.swell, .sw-layer { position: absolute; top: 0; height: 100%; overflow: visible; transform-origin: 50% 100%; transform: scaleY(max(var(--lift), .004)); }
.swell { left: 0; width: 100%; }
.sw-layer { left: -48px; width: calc(100% + 96px); }
.sw-back2 .sw-fill { fill: url(#sw-b2g); }
.sw-back1 .sw-fill { fill: url(#sw-b1g); }
.sw-b2g0 { stop-color: #2E4C78; } .sw-b2g1 { stop-color: #142D52; }
.sw-b1g0 { stop-color: #4A6A96; } .sw-b1g1 { stop-color: #1D3355; }
.sw-hl { fill: none; stroke: var(--mist); stroke-width: 1.25px; stroke-opacity: .45; stroke-linecap: round; }
.sw-back1 .sw-hl { stroke-opacity: .7; }
.sw-hlg { fill: none; stroke: var(--mist); stroke-width: 8px; stroke-opacity: .12; }
.sw-back1 { animation: drift 16s ease-in-out 2.2s infinite alternate; }
.sw-back2 { animation: drift-b 21s ease-in-out 2.2s infinite alternate; }
@keyframes drift { to { translate: 44px 0; } }
@keyframes drift-b { to { translate: -36px 0; } }
.hero.is-off .sw-layer { animation-play-state: paused; }
.sw-g0 { stop-color: #FFFFFF; } .sw-g1 { stop-color: #DCE5F0; } .sw-g2 { stop-color: #EEF2F8; } .sw-g3 { stop-color: var(--paper); }
.sw-body { fill: url(#sw-grad); }
.sw-sheen { fill: url(#sw-shine); }
.sw-s0 { stop-color: #FFFFFF; stop-opacity: 0; } .sw-s1 { stop-color: #FFFFFF; stop-opacity: .85; } .sw-s2 { stop-color: #FFFFFF; stop-opacity: 0; }
.sw-face { fill: none; stroke: #C9D5E4; stroke-width: 1px; stroke-opacity: .8; }
.sw-face2 { fill: none; stroke: #FFFFFF; stroke-width: 2px; stroke-opacity: .9; }
.sw-crest, .sw-glow { fill: none; stroke: var(--orange); stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; animation: crest 1.6s var(--ease) .3s both; }
.sw-crest { stroke-width: 1.5px; }
.sw-glow { stroke-width: 7px; stroke-opacity: .32; }
@keyframes crest { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
.hero-boat-wrap { position: absolute; left: var(--bx, 82%); top: var(--by, 45%); width: clamp(116px, 11vw, 170px); transform-origin: 3.8% 100%;
  --drop: calc(clamp(600px, calc(100svh - 72px), 820px) * .55);
  transform: translate(-3.8%, -100%) translateY(calc((1 - var(--lift)) * var(--drop))) rotate(calc(var(--tilt, -6deg) * var(--lift)));
  animation: boat-in .5s var(--ease) .1s both; }
@keyframes boat-in { from { opacity: 0; } }
.hero-boat { display: block; width: 100%; height: auto; overflow: visible; fill: var(--orange); }
.hero-boat g { will-change: transform; }
.still .scene, .still .sw-crest, .still .sw-glow, .still .hero-boat-wrap, .still .sw-layer, .still .hero-svc a, .still .hero-svc i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .scene, .sw-crest, .sw-glow, .hero-boat-wrap, .sw-layer, .hero-svc a, .hero-svc i, .night::after { animation: none !important; }
}
@media (max-width: 900px) {
  .hero { --scene: 240px; }
  .scene { top: auto; height: var(--scene); }
  .hero-boat-wrap { width: clamp(80px, 20vw, 120px); --bx: 79%; --by: 46.5%; --tilt: -10deg; --drop: 130px; }
}
@media (max-width: 640px) {
  .hero-copy { padding-top: 28px; }
  .hero .ht-sub { margin-top: 18px; }
  .hero-svc { flex-direction: column; align-items: flex-start; margin-top: 16px; }
  .hero-svc li + li::before { display: none; }
  .hero-svc::before { content: ""; position: absolute; left: 4.5px; top: 22px; bottom: 22px; width: 1px; background: rgba(159, 176, 200, .5); }
  .hero-svc a { position: relative; font-size: 1.0625rem; }
  .hero-ctas { margin-top: 22px; }
}

/* ---------- Services: a journey along the swell ---------- */
.how { position: relative; overflow-x: clip; padding-top: clamp(48px, 5vw, 80px); }
.how-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; }
.how .h2 { max-width: none; }
.how-line { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.0625rem, 1.5vw, 1.3rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
@media (min-width: 901px) { .how-line .s { display: inline; } }
.tour { position: relative; margin-top: clamp(20px, 2.6vw, 36px); }
/* The line runs edge to edge of the section, so it starts and ends past the cards */
.tour-track { position: relative; height: 120px; margin-left: calc(50% - 50vw); width: 100vw; }
.tour-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tour-base { fill: none; stroke: var(--mist); stroke-width: 1.5px; stroke-linecap: round; }
.tour-line { fill: none; stroke: var(--navy); stroke-width: 1.5px; stroke-linecap: round; }
.tour-boat.is-home { animation: dock .9s var(--ease); }
@keyframes dock { 40% { translate: 0 -5px; } }
.tour-stop { position: absolute; display: none; left: var(--sx); top: var(--sy); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--paper); border: var(--line) solid var(--navy); transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.tour-stop::after { content: ""; position: absolute; left: 50%; top: calc(100% + 4px); width: 1px; height: var(--drop, 0px); margin-left: -.5px; background: repeating-linear-gradient(var(--mist) 0 3px, transparent 3px 6px); }
.tour.is-laid .tour-stop { display: block; }
.tour-stop.is-lit { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 5px rgba(255, 90, 0, .16); }
.tour-boat { position: absolute; left: 0; top: 0; width: 46px; transform-origin: 50% 92%; transform: translate(var(--x, 88vw), var(--y, 22px)) translate(-50%, -92%) rotate(var(--r, 0deg)); }
.tour-boat svg { display: block; width: 100%; height: auto; fill: var(--orange); }
.stations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.station { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--r-panel); background: var(--paper); border: var(--line) solid rgba(7, 27, 56, .18); box-shadow: 0 22px 44px -28px rgba(7, 27, 56, .4); scroll-margin-top: 8px; transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.tour.is-armed .station:not(.is-lit) { background: var(--cloud); border-color: var(--cloud); box-shadow: none; }
.st-name { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.012em; }
.st-promise { margin: 10px 0 0; font-size: 1.0625rem; line-height: 1.45; color: var(--navy); max-width: 34ch; text-wrap: balance; }
.st-label { margin: 22px 0 4px; font-weight: 600; font-size: var(--fs-small); color: var(--slate); }
.st-list li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-top: var(--hair); font-size: 1.0625rem; line-height: 1.35; text-wrap: balance; }
.st-list .ic { width: 22px; height: 22px; margin-top: -1px; stroke-width: 1.5; }
.st-more { margin: auto 0 0; padding-top: 20px; font-size: var(--fs-small); }
.st-more .link { display: inline-block; padding-block: 12px; margin-block: -12px; }
@media (min-width: 901px) { .station { scroll-margin-top: 250px; } }
.station:target { animation: target-ring 1.8s var(--ease) .4s both; }
@keyframes target-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 0, 0); } 25% { box-shadow: 0 0 0 4px rgba(255, 90, 0, .55); } 100% { box-shadow: 0 0 0 4px rgba(255, 90, 0, 0), 0 22px 44px -28px rgba(7, 27, 56, .4); } }
@media (max-width: 900px) {
  .tour { margin-top: 28px; }
  .tour-track { position: absolute; left: 0; top: 0; bottom: 0; width: 28px; height: auto; margin: 0; }
  .tour:not(.is-laid) .tour-track { border-left: var(--line) solid var(--mist); left: 13px; width: 0; }
  .tour:not(.is-laid) .tour-svg, .tour:not(.is-laid) .tour-boat { display: none; }
  .tour-stop::after { display: none; }
  .tour-boat { width: 30px; }
  .stations { grid-template-columns: minmax(0, 1fr); padding-left: 40px; }
  .st-promise { max-width: none; }
}
@media (max-width: 640px) {
  .stations { padding-left: 36px; }
  .station { padding: 22px 18px 20px; }
  .st-list li { font-size: 1rem; gap: 10px; }
  .st-list .ic { width: 20px; height: 20px; }
}
@media (max-width: 360px) { .st-name { font-size: 1.25rem; letter-spacing: -0.02em; } .station { padding-inline: 16px; } }

/* ---------- Values: ten small boats on a horizon; two stay and light their lanterns ---------- */
.value { padding: clamp(80px, 8vw, 120px) 0; overflow-x: clip; }
.value-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); }
.value .h2 { max-width: none; color: var(--paper); font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.03em; }
.value .h2 .s { white-space: nowrap; }
.fleet { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; height: clamp(44px, 6vw, 84px); }
.fleet::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(159, 176, 200, 0), rgba(159, 176, 200, .6) 10%, rgba(159, 176, 200, .6) 90%, rgba(159, 176, 200, 0)); }
.fb { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.fb::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 1px; height: 10px; background: var(--sky); opacity: .75; }
.fb:not(.yes)::after { opacity: .18; }
.fleet.is-armed .fb::after { opacity: .75; }
.fleet.is-played .fb::after { transition: opacity .8s var(--ease) 1.4s; }
.fb .boat { position: relative; display: block; width: min(92%, 64px); margin-bottom: 3px; }
.fb svg { display: block; width: 100%; height: auto; fill: var(--orange); }
.fb:not(.yes) .boat { opacity: 0; transform: translateX(-60px); }
.lantern { position: absolute; left: 96%; top: 58%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #FFB27A; box-shadow: 0 0 0 2px rgba(255, 90, 0, .9), 0 0 14px 5px rgba(255, 90, 0, .55), 0 0 36px 14px rgba(255, 90, 0, .22); }
.lantern::after { content: ""; position: absolute; left: 2px; top: calc(100% + 18px); width: 4px; height: 30px; border-radius: 2px; background: linear-gradient(rgba(255, 90, 0, .6), rgba(255, 90, 0, 0)); }
.fleet.is-armed .fb .boat { opacity: 1; transform: none; }
.fleet.is-armed .lantern { opacity: 0; transform: scale(.3); }
.fleet.is-played .fb .boat { transition: opacity .8s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
.fleet.is-played .lantern { transition: opacity .6s var(--ease) 1.55s, transform .6s var(--ease) 1.55s; }
.fb:nth-child(10) { --d: 0s; } .fb:nth-child(9) { --d: .1s; } .fb:nth-child(7) { --d: .2s; } .fb:nth-child(6) { --d: .3s; }
.fb:nth-child(5) { --d: .4s; } .fb:nth-child(4) { --d: .5s; } .fb:nth-child(2) { --d: .6s; } .fb:nth-child(1) { --d: .7s; }
.fleet-fig figcaption { margin-top: 34px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.6vw, 1.375rem); line-height: 1.35; color: var(--foam); text-wrap: balance; }
@media (max-width: 640px) { .lantern { width: 6px; height: 6px; margin: -3px 0 0 -3px; } .lantern::after { left: 1px; top: calc(100% + 12px); height: 20px; } }
@media (max-width: 640px) { .value .h2 { font-size: 7.4vw; } }

/* ---------- Benefits: pick a role; each pair turns once from the headache to our answer ---------- */
.roles { background: var(--cloud); }
.roles-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 40px; margin-bottom: clamp(28px, 3.6vw, 48px); }
.roles .h2 { max-width: none; }
.role-seg { display: inline-grid; grid-template-columns: repeat(3, auto); margin: 0; padding: 4px; min-width: 0; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--paper); }
.role-seg label { position: relative; display: block; }
.role-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.role-seg label > span { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: .9375rem; line-height: 1.1; white-space: nowrap; pointer-events: none; transition: background-color .25s var(--ease), color .25s var(--ease); }
.role-seg label:hover input:not(:checked) + span { background: var(--cloud); }
.role-seg input:checked + span { background: var(--ink); color: var(--paper); }
.role-seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.role-seg .short { display: none; }
.pairs { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(14px, 1.8vw, 22px); }
.pairs[data-role="owner"] { display: grid; }
.roles:has(input[value="growth"]:checked) .pairs[data-role="owner"], .roles:has(input[value="marketing"]:checked) .pairs[data-role="owner"] { display: none; }
.roles:has(input[value="growth"]:checked) .pairs[data-role="growth"], .roles:has(input[value="marketing"]:checked) .pairs[data-role="marketing"] { display: grid; }
.pair { perspective: 900px; }
.pair-in { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, .6, .2, 1) var(--d, 0s); }
.pair:nth-child(2) { --d: .2s; }
.pair:nth-child(3) { --d: .4s; }
.face-a, .face-b { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-panel); background: var(--paper); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face-b { border: var(--line) solid rgba(7, 27, 56, .18); box-shadow: 0 16px 32px -26px rgba(7, 27, 56, .35); }
.face-a { margin: 0; max-width: none; transform: rotateX(180deg); border: var(--line) solid var(--mist); justify-content: center; }
.face-a::before { content: ""; display: block; width: 44px; height: 10px; margin-bottom: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 10'%3E%3Cpath d='M1 5l4-3.5 4.5 7 4.5-7 4.5 7 4.5-7 4.5 7 4.5-7 4.5 7 4.5-6' fill='none' stroke='%239FB0C8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 44px 10px no-repeat; }
.face-a::after { content: attr(data-ache); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.125rem, 1.4vw, 1.3rem); line-height: 1.28; letter-spacing: -0.01em; color: var(--slate); text-wrap: balance; }
.pairs.from-ache .pair-in { transform: rotateX(-180deg); transition: none; }
.ache { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--slate); text-wrap: balance; }
.fix { margin: 14px 0 0; padding-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); line-height: 1.28; letter-spacing: -0.01em; background: linear-gradient(var(--orange), var(--orange)) 0 0 / 28px 2px no-repeat; text-wrap: balance; }
@media (max-width: 900px) {
  .roles-head { display: block; }
  .role-seg { margin-top: 22px; }
  .pairs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .role-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .role-seg label > span { padding: 0 6px; font-size: .875rem; }
}
@media (max-width: 379px) {
  .role-seg .full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .role-seg .short { display: inline; }
}

/* ---------- Why us: the four icons in orange line ---------- */
.why-grid .ic { color: var(--orange); stroke-width: 1; }

/* ---------- Results: a navy band, two identical cards; a rising line through the three tiers, then the number ---------- */
.results { padding: clamp(80px, 7.4vw, 112px) 0 clamp(64px, 6vw, 88px); }
.results .h2 { max-width: none; color: var(--paper); font-size: clamp(1.9rem, 3vw, 2.75rem); }
.wins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(28px, 3vw, 40px); }
.win { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--tide); border-radius: var(--r-panel); background: rgba(29, 51, 85, .32); }
.win p { margin: 0; max-width: none; }
.win-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@container (min-width: 520px) { .win-top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 22px; } }
.run { position: relative; height: 92px; margin-top: 4px; }
.run-svg { position: absolute; left: 0; top: 0; width: 100%; height: 80px; overflow: visible; }
.run-base { fill: none; stroke: var(--tide); stroke-width: 1.5px; }
.run-line { fill: none; stroke: var(--orange); stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.run-pt { position: absolute; font-style: normal; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 90, 0, .2); }
.run-pt.p1 { left: 15%; top: 62px; }
.run-pt.p2 { left: 50%; top: 42px; }
.run-pt.p3 { left: 85%; top: 20px; }
.run-pt b { position: absolute; left: 50%; top: 17px; transform: translateX(-50%); font-family: var(--font-body); font-weight: 600; font-size: .8125rem; line-height: 1; color: var(--sky); white-space: nowrap; }
.run-pt.p1 b { left: 0; transform: none; }
.win-fig { min-width: 0; }
.win .fig b { font-size: clamp(3.5rem, 5.4vw, 4.5rem); color: var(--paper); }
.win .fig .unit { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.win .when { margin-top: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--foam); }
.win-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: auto !important; padding-top: 14px; font-size: var(--fs-small); line-height: 1.4; color: var(--sky); }
.win-top + .win-meta { margin-top: 18px !important; border-top: 1px solid var(--tide); }
.win-meta .who { font-weight: 600; color: var(--paper); }
.wins.is-armed .run-line { stroke-dashoffset: 1.02; }
.wins.is-armed .run-pt { background: var(--navy); box-shadow: 0 0 0 1.5px var(--sky); }
.wins.is-armed .win-fig { clip-path: inset(0 0 100% 0); transform: translateY(14px); }
.wins.is-played .run-line { transition: stroke-dashoffset 1.2s cubic-bezier(.4, .1, .5, 1); }
.wins.is-played .run-pt { transition: background-color .3s var(--ease) var(--d), box-shadow .3s var(--ease) var(--d); }
.wins.is-played .win-fig { transition: clip-path .55s var(--ease) 1.15s, transform .55s var(--ease) 1.15s; }
.run-pt.p1 { --d: .2s; } .run-pt.p2 { --d: .62s; } .run-pt.p3 { --d: 1.02s; }
/* Narrow cards (phones): the line becomes a thin strip above the number, so the band stays a bird's-eye view */
@container (max-width: 519px) {
  .win-top { gap: 8px; }
  .run { height: 52px; margin-top: 0; }
  .run-svg { height: 34px; }
  .run-pt { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .run-pt.p1 { top: 26px; } .run-pt.p2 { top: 18px; } .run-pt.p3 { top: 9px; }
  .run-pt b { top: 11px; left: 3px; transform: none; font-size: .75rem; }
  .win .fig b { font-size: 2.75rem; }
  .win .fig .unit { font-size: 1.3rem; }
  .win .when { margin-top: 8px; font-size: 1rem; }
  .win-top + .win-meta { margin-top: 14px !important; padding-top: 12px; }
}
@media (max-width: 640px) {
  .results { padding: 56px 0 44px; }
  .results .h2 { font-size: 1.75rem; }
  .wins { gap: 12px; margin-top: 20px; }
  .win { padding: 16px 18px 14px; }
}
@media (max-width: 900px) { .wins { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Team: portraits in portholes, and the team's earlier record, kept apart ---------- */
.team-sec { padding-top: var(--section); }
.team-sec .h2 { padding-top: 0; border-top: 0; background: none; }
.porthole { position: relative; display: block; aspect-ratio: 1; padding: 11%; }
.member .porthole img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 32%; border-radius: 50%; }
.porthole-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.member figcaption { text-align: center; }
.record-block { margin-top: clamp(48px, 6vw, 80px); }
.record-label { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--slate); }
.record-label::after { content: ""; flex: 1; height: 1px; background: var(--mist); }
.record { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.record li { padding: 2px 20px 4px; border-left: var(--hair); }
.record .fig b { font-size: clamp(2.1rem, 3vw, 2.75rem); }
.record .fig { font-size: 1.5rem; }
.record .lbl { margin: 8px 0 0; font-size: var(--fs-small); line-height: 1.3; color: var(--slate); text-wrap: balance; }
@media (max-width: 1100px) { .record li { padding-inline: 14px; } }
/* In the navy results band: the team's record sits under a Tide hairline, with its own label and smaller figures */
.results .record-block { margin-top: clamp(32px, 3.6vw, 44px); padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--tide); }
.results .record-label { margin-bottom: 16px; color: var(--sky); }
.results .record-label::after { display: none; }
.results .record li { border-left: 1px solid var(--tide); }
.results .record .fig b { color: var(--paper); font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.results .record .fig { font-size: 1.25rem; }
.results .record .lbl { margin-top: 6px; color: var(--sky); }
@media (max-width: 900px) and (min-width: 641px) { .record li { padding-inline: 10px; } .record .fig b { font-size: 2rem; } }
/* Phones: one compact row that scrolls sideways, so no figure is left alone on a row */
@media (max-width: 640px) {
  .record-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--pad)); padding: 4px var(--pad) 10px; scrollbar-width: thin; scroll-padding-inline: var(--pad); }
  .record { display: flex; gap: 0; width: max-content; }
  .record li { flex: 0 0 10rem; padding: 2px 14px 4px; scroll-snap-align: start; }
  .record li:first-child { border-left: 0; padding-left: 0; }
  .record .fig { white-space: nowrap; }
  .record .fig b { font-size: 2rem; }
  .record .lbl { margin-top: 6px; }
}

/* ---------- The form: a short notice, the full text one tap away ---------- */
.notice-short { margin: 24px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--navy); max-width: none; }
.notice-more { margin-top: 2px; }
.notice-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; font-size: .875rem; color: var(--slate); }
.notice-more summary::-webkit-details-marker { display: none; }
.notice-more summary::after { content: ""; flex: none; width: 16px; height: 16px; border: var(--line) solid var(--slate); border-radius: 50%; background: linear-gradient(var(--slate), var(--slate)) center / 7px 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) center / 1.5px 7px no-repeat; transition: transform .25s var(--ease); }
.notice-more[open] summary::after { transform: rotate(45deg); }
.notice-more .notice { margin: 2px 0 0; }
.notice-more + .form-foot { margin-top: 14px; }

/* ---------- Close: back under stars, the boat small on the horizon ---------- */
.final.night { padding: calc(var(--section) * .8) 0 clamp(16px, 2vw, 28px); }
.final.night h2 { color: var(--paper); }
.final.night .lead { color: var(--sky); }
/* The story closes: a small swell on the right, the boat home on its crest */
.final > .wrap { position: relative; z-index: 1; }
.final-sea { position: absolute; right: 0; bottom: 0; width: min(50%, 700px); height: clamp(150px, 17vw, 240px); pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%); }
.final-sea > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-back { fill: #1D3355; fill-opacity: .75; }
.fs-front { fill: url(#fs-grad); }
.fs-g0 { stop-color: #2B4872; } .fs-g1 { stop-color: var(--navy); }
.fs-crest { fill: none; stroke: var(--orange); stroke-width: 1.5px; stroke-linecap: round; }
.fs-boat { position: absolute; left: 75%; top: 33%; width: clamp(54px, 5vw, 76px); transform: translate(-58%, -94%) rotate(-3deg); }
.fs-boat svg { display: block; width: 100%; height: auto; fill: var(--orange); }
main:has(> .final:last-child .final-sea) + .foot-sea .foot-boat { display: none; }
@media (max-width: 640px) {
  .final.night { padding-bottom: 150px; }
  .final-sea { width: 100%; height: 130px; }
  .fs-boat { width: 48px; }
}
@media (max-width: 900px) {
  .foot-grid li { padding-block: 4px; line-height: 1.4; }
  .foot-grid li > a { padding-block: 6px; }
}
.final :focus-visible, .foot-sea :focus-visible { outline-color: var(--orange); }
.foot-sea { border-bottom: 0; }
.foot-sea .wrap { position: relative; height: clamp(84px, 9vw, 128px); }
.foot-sea { background-image: linear-gradient(90deg, rgba(159, 176, 200, 0), rgba(159, 176, 200, .45) 25%, rgba(159, 176, 200, .45) 75%, rgba(159, 176, 200, 0)), var(--stars); background-size: 100% 1px, auto; background-position: 0 calc(100% - 30px), 0 0; background-repeat: no-repeat; }
.foot-boat { position: absolute; right: clamp(16px, 9vw, 160px); bottom: 26px; width: clamp(36px, 3.2vw, 50px); height: auto; margin: 0; fill: var(--orange); z-index: 1; }
.footer { border-top: 0; }
.foot-desc { margin: 20px 0 0; color: var(--foam); font-weight: 600; max-width: 34ch; }
.foot-desc + .foot-tagline { margin-top: 6px; color: var(--sky); font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .pair-in, .station, .tour-stop, .fb .boat, .lantern, .run-line, .run-pt, .win-fig { transition: none !important; }
}