/* freakyturtle.com — the home page, set underwater.
 *
 * Two layouts share this file:
 *   .plain (also .no-js): an ordinary scrolling page over the footage's
 *          opening frame (dive/poster.jpg).
 *   .dive: the underwater footage fills the screen and moves with the scroll
 *          (js/ocean.js); each .stop is a tall spacer and its .card is
 *          position: fixed, placed beside its pearl on the trail by js/site.js.
 * Brand: docs/freakyturtle/. One gradient moment per view; ink, paper, mint,
 * cyan and teal from the brand guide; display type always tight. */

/* ---------- fonts (self-hosted, SIL OFL 1.1) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../fonts/spline-sans-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Michroma";
  src: url("../fonts/michroma-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --ink: #0A1F1D;
  --ink-soft: #3D5450;
  --paper: #FBFFFD;
  --mint: #B0FFAC;
  --cyan: #13FFF7;
  --teal: #0B8F88;
  --coral: #FF4E50;
  --gold: #F9D323;
  --deep: #04191d;
  --sea: #0b5560;
  --text: #f2fffb;
  --text-soft: rgba(226, 246, 241, 0.8);
  --text-faint: rgba(226, 246, 241, 0.58);
  --line: rgba(176, 255, 172, 0.16);
  --grad-aqua: linear-gradient(100deg, var(--mint), var(--cyan));
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Albert Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --gutter: clamp(1rem, 5vw, 5rem);
  --nav-h: 4rem;
  /* A band of kapa-style triangles over a rule, used as a mask. */
  --kapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Crect width='16' height='1.2'/%3E%3Cpath d='M1 3h14L8 9.4z'/%3E%3Ccircle cx='0' cy='10.8' r='1.1'/%3E%3Ccircle cx='16' cy='10.8' r='1.1'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--deep);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--mint); color: var(--ink); }
a { color: inherit; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.stop:focus { outline: none; }

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 30;
  background: var(--paper); color: var(--ink); padding: 0.6rem 1rem; border-radius: 999px;
  font: 500 0.85rem var(--mono); text-decoration: none;
}
.skip:focus { top: 1rem; }

/* Until site.js has chosen a layout, keep the page hidden so it doesn't flash
   the plain layout first. If it hasn't after 2.5s, show it anyway (and the
   inline script in baseof.html switches to the no-JS layout). */
.js:not(.plain):not(.dive) main,
.js:not(.plain):not(.dive) .footer {
  visibility: hidden;
  animation: show-anyway 0s 2.5s forwards;
}
@keyframes show-anyway { to { visibility: visible; } }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: linear-gradient(to bottom, rgba(3, 22, 26, 0.7), rgba(3, 22, 26, 0));
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand img { width: 2rem; height: auto; }
.brand span { font: 700 1.12rem var(--display); letter-spacing: -0.02em; }
.nav ul { display: flex; gap: clamp(1rem, 3vw, 2rem); }
.nav ul a {
  font: 400 0.8rem var(--mono); letter-spacing: 0.06em; text-transform: lowercase;
  text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.nav ul a:hover { border-color: var(--cyan); }

/* ---------- the ocean ---------- */
/* As tall as the screen with the browser's bars hidden, so it doesn't
   resize (and the dive isn't rebuilt) as they slide in and out on a phone. */
.ocean {
  position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; z-index: 0;
  /* The footage's opening frame, shown from the first paint until the dive
     takes over (and as the plain page's background). */
  background:
    url("../dive/poster.jpg") center / cover,
    linear-gradient(180deg, #2a8fc0 0%, #0d5f8a 40%, #0a4a6b 70%, #083a52 100%);
}
.ocean__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.plain .ocean, .no-js .ocean {
  background:
    linear-gradient(180deg, rgba(3, 20, 34, 0.2), rgba(3, 20, 34, 0.6)),
    url("../dive/poster.jpg") center / cover,
    linear-gradient(180deg, #2a8fc0 0%, #0d5f8a 40%, #0a4a6b 70%, #083a52 100%);
}
.plain .ocean__canvas, .no-js .ocean__canvas { display: none; }
.dive-ready .ocean__canvas { opacity: 1; transition: opacity 1.2s ease; }

main { position: relative; z-index: 1; }

/* ---------- shared type ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 0.7rem;
  font: 500 0.76rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mint); margin-bottom: 1.3rem;
}
.kapa-mark {
  display: inline-block; width: 2.2em; height: 0.85em; flex: none;
  background: currentColor; opacity: 0.8;
  -webkit-mask: var(--kapa) left center / auto 100% repeat-x; mask: var(--kapa) left center / auto 100% repeat-x;
}
.grad {
  background: var(--grad-aqua);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 0.35em rgba(19, 255, 247, 0.22));
}
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--text-soft); max-width: 36rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 500 0.85rem var(--mono); letter-spacing: 0.04em; text-transform: lowercase;
  text-decoration: none; padding: 0.85rem 1.45rem; border-radius: 999px;
  border: 1.5px solid rgba(242, 255, 251, 0.7); color: var(--text);
  background: rgba(3, 25, 29, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 -2px var(--mint); }
.btn--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--solid:hover { box-shadow: 0 6px 0 -2px var(--cyan); }
.btn--accent { border-color: color-mix(in srgb, var(--a1) 75%, transparent); }
.btn--accent:hover { box-shadow: 0 6px 0 -2px var(--a1); }

.kapa {
  height: 10px; background: var(--mint); opacity: 0.32;
  -webkit-mask: var(--kapa) left center / auto 100% repeat-x; mask: var(--kapa) left center / auto 100% repeat-x;
}

/* ---------- cards ---------- */
.card { position: relative; isolation: isolate; }
/* A soft pool of shade behind floating text, so it reads over the reef. */
.card--hero::before, .card--belief::before, .card--intro::before, .card--contact::before, .card--how::before {
  content: ""; position: absolute; inset: -24% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(2, 24, 40, 0.66), rgba(2, 24, 40, 0.38) 55%, transparent);
}
.card--hero::before { inset: -30% -40% -30% -30%; background: radial-gradient(closest-side, rgba(2, 24, 28, 0.7), rgba(2, 24, 28, 0.4) 55%, transparent); }
.card--hero h1, .belief, .card--intro h2, .card--contact h2 { text-shadow: 0 2px 28px rgba(1, 18, 22, 0.45); }
.card .note, .card .lede, .card--contact p { text-shadow: 0 1px 12px rgba(1, 18, 22, 0.7), 0 0 2px rgba(1, 18, 22, 0.5); }

/* hero */
.card--hero { width: min(48rem, calc(100vw - 2 * var(--gutter))); }
h1 {
  font: 800 clamp(3rem, 8.4vw, 7.4rem)/0.96 var(--display);
  letter-spacing: -0.035em; max-width: 12ch;
}
.card--hero .lede { margin-top: 1.8rem; }
.actions { margin-top: 2.4rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.dive-hint {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 0.7rem;
  font: 500 0.7rem var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-soft);
  pointer-events: none;
}
.dive-hint::after {
  content: ""; width: 1.5px; height: 2.6rem;
  background: linear-gradient(to bottom, var(--mint), transparent);
  transform-origin: top; animation: hint 2.2s ease-in-out infinite;
}
@keyframes hint { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* beliefs */
.group__label {
  font: 500 0.78rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint);
  padding: 0 var(--gutter);
}
.card--belief { width: min(42rem, 100%); }
.belief {
  font: 700 clamp(2rem, 4.1vw, 4rem)/1.04 var(--display);
  letter-spacing: -0.03em;
}
.note { margin-top: 1.1rem; font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--text-soft); max-width: 32rem; }
/* Text on the left of its pearl is set flush right, so it hugs the pearl. */
.dive [data-side="left"] > .card--belief, .dive [data-side="left"] > .card--intro { text-align: right; }
.dive [data-side="left"] > .card--belief .eyebrow, .dive [data-side="left"] > .card--intro .eyebrow { justify-content: flex-end; }
.dive [data-side="left"] > .card--belief .note, .dive [data-side="left"] > .card--intro .lede { margin-left: auto; }
.plain [data-side="right"] > .card--belief, .no-js [data-side="right"] > .card--belief { text-align: right; }
.plain [data-side="right"] > .card--belief .eyebrow, .no-js [data-side="right"] > .card--belief .eyebrow { justify-content: flex-end; }
.plain [data-side="right"] > .card--belief .note, .no-js [data-side="right"] > .card--belief .note { margin-left: auto; }

/* the work: intro and index */
.card--intro { width: min(36rem, 100%); }
.card--intro h2 { font: 800 clamp(2.4rem, 5vw, 4.6rem)/1 var(--display); letter-spacing: -0.035em; }
.card--intro .lede { margin-top: 1.1rem; }
.product-index {
  margin-top: 1.8rem; padding: 0.4rem 1.2rem; text-align: left;
  border-radius: 1rem; background: rgba(4, 26, 30, 0.62); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.product-index li + li { border-top: 1px solid var(--line); }
.product-index a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.75rem 0; text-decoration: none;
}
.product-index__name { font: 700 1.25rem var(--display); letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.65rem; }
.product-index__name::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--a1); flex: none; }
.product-index__kind { font: 400 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); text-align: right; }
.product-index a:hover .product-index__name { color: var(--a1); }

/* products */
.card--product {
  width: min(70rem, 100%);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  border-radius: 1.5rem; overflow: hidden;
  background: linear-gradient(155deg, rgba(9, 38, 41, 0.9), rgba(4, 22, 26, 0.86));
  border: 1px solid rgba(176, 255, 172, 0.14);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
}
[data-side="right"] > .card--product { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
[data-side="right"] > .card--product .product__visual { order: 2; }
.product__visual {
  position: relative; overflow: hidden; min-height: 25rem;
  background:
    radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--a1) 32%, transparent), transparent 62%),
    #061b1f;
}
.product__visual > img {
  position: absolute; left: 2.2rem; top: 2.2rem;
  width: 160%; max-width: none; height: auto;
  border-radius: 10px;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.product__body { padding: clamp(1.5rem, 2.6vw, 2.6rem); display: flex; flex-direction: column; gap: 0.95rem; }
.product__body .kapa { background: var(--a1); opacity: 0.55; margin-bottom: 0.3rem; }
.product__body .eyebrow { margin: 0; color: var(--text-faint); }
.product__name {
  font: 800 clamp(2.1rem, 3.5vw, 3.3rem)/1 var(--display); letter-spacing: -0.035em;
  background: linear-gradient(100deg, var(--a1), var(--a2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em;
}
.product__summary p { color: var(--text-soft); }
.product__facts { display: grid; gap: 0.4rem; font-size: 0.95rem; }
.product__facts li { position: relative; padding-left: 1.35rem; }
.product__facts li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 0.7rem; height: 2px; background: var(--a1);
}
.product__foot {
  margin-top: auto; padding-top: 0.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: 500 0.72rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft);
}
.status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--a1); flex: none; }
.status--live::before { background: #73ff95; animation: live 2.4s ease-out infinite; }
.status--dev::before { background: transparent; border: 1.5px solid var(--a1); }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(115, 255, 149, 0.55); } 100% { box-shadow: 0 0 0 0.6rem rgba(115, 255, 149, 0); } }

/* drawn visuals */
.visual { position: absolute; inset: 0; overflow: hidden; }
.visual svg { width: 100%; height: 100%; display: block; }
.visual--orbit { background: radial-gradient(140% 100% at 50% 100%, #0b1a33 0%, #03060d 70%); }
.orbit__stars {
  position: absolute; inset: 0; opacity: 0.8;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #dfefff, transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent), radial-gradient(1px 1px at 63% 28%, #fff, transparent),
    radial-gradient(1px 1px at 78% 9%, #cfe6ff, transparent), radial-gradient(1.5px 1.5px at 88% 36%, #fff, transparent),
    radial-gradient(1px 1px at 7% 52%, #fff, transparent), radial-gradient(1px 1px at 55% 47%, #e6f4ff, transparent),
    radial-gradient(1px 1px at 35% 24%, #fff, transparent), radial-gradient(1px 1px at 92% 58%, #fff, transparent);
}
.orbit__earth {
  position: absolute; left: -45%; right: -45%; top: 64%; height: 200%; border-radius: 50%;
  background:
    radial-gradient(60% 18% at 30% 6%, rgba(255, 255, 255, 0.35), transparent 70%),
    radial-gradient(40% 12% at 62% 9%, rgba(255, 255, 255, 0.22), transparent 70%),
    radial-gradient(ellipse at 50% 0%, #3b86c4 0%, #1b5a92 16%, #0c3561 34%, #04152b 60%);
  box-shadow:
    0 -1px 0 rgba(200, 235, 255, 0.95),
    0 -6px 18px rgba(110, 190, 255, 0.75),
    0 -26px 70px rgba(50, 130, 230, 0.45);
}
.orbit__sun {
  position: absolute; left: 14%; top: 64%; width: 34%; aspect-ratio: 3 / 1; transform: translate(-30%, -55%);
  background: radial-gradient(closest-side, #fff8ea, rgba(255, 201, 140, 0.85) 25%, rgba(255, 120, 50, 0.35) 55%, transparent);
  filter: blur(2px); mix-blend-mode: screen;
}
.orbit__debris i {
  position: absolute; display: block; background: linear-gradient(135deg, #c9d3dc, #4c5866); border-radius: 2px;
  box-shadow: 0 0 6px rgba(255, 200, 150, 0.3);
}
.orbit__debris i:nth-child(1) { left: 70%; top: 40%; width: 14px; height: 5px; transform: rotate(-24deg); }
.orbit__debris i:nth-child(2) { left: 80%; top: 50%; width: 6px; height: 6px; transform: rotate(12deg); }
.orbit__debris i:nth-child(3) { left: 62%; top: 52%; width: 9px; height: 3px; transform: rotate(40deg); }
.orbit__logo {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  display: inline-flex; flex-direction: column; align-items: stretch;
  font: 400 clamp(1.6rem, 3.2vw, 2.6rem)/1.1 "Michroma", var(--mono); white-space: nowrap; color: #dbf0ff;
}
.orbit__main { letter-spacing: 0.22em; margin-right: -0.22em; filter: drop-shadow(0 0.1em 0.32em rgba(255, 110, 40, 0.38)); }
.orbit__main span {
  display: inline-block; --h: calc(18% + var(--i) * 7%);
  background: linear-gradient(180deg, #e6f4ff 0%, #dbf0ff calc(100% - var(--h) - 22%), #ffd9b0 calc(100% - var(--h)), #ff9a52 calc(100% - var(--h) * 0.45), #ff5a1f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.orbit__sub {
  display: flex; align-items: center; gap: 1.1em; margin-top: 1em;
  font-size: 0.24em; letter-spacing: 0.55em; opacity: 0.92; text-shadow: 0 0 0.8em rgba(150, 205, 255, 0.35);
}
.orbit__sub::before, .orbit__sub::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(219, 240, 255, 0.6)); }
.orbit__sub::after { transform: scaleX(-1); }
.orbit__sub span { margin-right: -0.55em; }

/* how we work */
.card--how {
  width: min(62rem, 100%);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border-radius: 1.5rem;
  background: linear-gradient(155deg, rgba(9, 38, 41, 0.78), rgba(4, 22, 26, 0.7));
  border: 1px solid rgba(176, 255, 172, 0.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.card--how::before { display: none; }
.card--how .eyebrow { margin-bottom: 1.8rem; }
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.how-grid h3 { font: 700 1.45rem/1.1 var(--display); letter-spacing: -0.02em; margin-bottom: 0.55rem; }
.how-grid p { color: var(--text-soft); font-size: 0.98rem; }

/* contact */
.card--contact { width: min(40rem, calc(100vw - 2rem)); text-align: center; }
.card--contact h2 { font: 800 clamp(2.8rem, 7vw, 6rem)/1 var(--display); letter-spacing: -0.035em; }
.card--contact p { margin: 1.3rem auto 2.2rem; max-width: 30rem; color: var(--text-soft); }

/* footer */
.footer {
  position: relative; z-index: 2;
  padding: 0 var(--gutter) 2.4rem;
  background: linear-gradient(to bottom, rgba(3, 20, 24, 0), rgba(3, 20, 24, 0.92) 4rem);
}
.footer .kapa { margin-bottom: 2rem; }
.footer__inner { display: grid; gap: 1.4rem; padding-top: 4rem; }
.footer__brand { display: flex; align-items: center; gap: 0.6rem; font: 700 1.1rem var(--display); letter-spacing: -0.02em; }
.footer__brand img { width: 1.8rem; height: auto; }
.footer__products { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font: 400 0.82rem var(--mono); }
.footer__products a { text-decoration: none; border-bottom: 1px solid var(--line); }
.footer__products a:hover { border-color: var(--cyan); }
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  font: 400 0.78rem var(--mono); color: var(--text-faint);
}

/* wayfinder (dive only) */
.wayfinder { display: none; }

/* ---------- plain layout ---------- */
/* The shade behind the hero reaches well past its card; on a phone that
   widened the page, pushing the nav off the side. */
.plain main, .no-js main { overflow-x: clip; }
.plain .stop, .no-js .stop { padding: 12vh var(--gutter); }
.plain .stop--hero, .no-js .stop--hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-top: calc(var(--nav-h) + 4vh); }
.plain .group__label, .no-js .group__label { padding-top: 8vh; }
.plain [data-side="right"] > .card, .no-js [data-side="right"] > .card { margin-left: auto; }
.plain .stop--product > .card, .no-js .stop--product > .card { margin: 0 auto; }
.plain .stop--contact, .no-js .stop--contact { min-height: 70vh; display: grid; place-items: center; }

/* ---------- dive layout ---------- */
.dive .stop { position: relative; height: var(--h, 120vh); }
.dive .stop--hero { --h: 100vh; }
.dive .stop--belief { --h: 115vh; }
.dive .stop--intro { --h: 115vh; }
.dive .stop--product { --h: 145vh; }
.dive .stop--how { --h: 120vh; }
.dive .stop--contact { --h: 110vh; }
/* The last leg, the rise to the surface, covers twice the ground of the
   others (and three times the footage), so it gets twice the scroll. */
.ascent { display: none; }
.dive .ascent { display: block; height: 115vh; }
.dive .group__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.dive .card {
  position: fixed; left: 0; top: 0; margin: 0;
  opacity: 0; pointer-events: none;
}
/* Only cards on screen get their own layer: Firefox ignores will-change past
   three screens' worth of area, and the cards together are more. */
.dive .card.is-live { will-change: transform, opacity; }
.dive .card.is-on { pointer-events: auto; }
.dive .card--belief { width: min(42rem, 44vw); }
.dive .card--intro { width: min(36rem, 42vw); }
.dive .card--product { width: min(70rem, 76vw); }
.dive .card--how { width: min(62rem, 72vw); }
.dive .dive-hint { display: flex; position: fixed; }
.dive-ready .card--hero, .dive-ready .nav { animation: arrive 1.1s ease backwards; }
@keyframes arrive { from { opacity: 0; } }
.dive .footer { margin-top: -20vh; }
.still .nav, .still main, .still .footer, .still .wayfinder, .still .dive-hint { display: none !important; }

@media (min-width: 1000px) {
  .dive .wayfinder {
    display: flex; flex-direction: column; gap: 0.5rem;
    position: fixed; right: 1.3rem; top: 50%; transform: translateY(-50%); z-index: 15;
  }
  .wayfinder li[data-kind="belief"]:first-child,
  .wayfinder li[data-kind="hero"] + li,
  .wayfinder li[data-kind="intro"],
  .wayfinder li[data-kind="how"] { margin-top: 0.7rem; }
  .wayfinder button {
    position: relative; display: block; width: 0.6rem; height: 0.6rem; padding: 0;
    border-radius: 50%; border: 1.5px solid rgba(242, 255, 251, 0.55); background: transparent; cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .wayfinder button::before { content: ""; position: absolute; inset: -0.45rem; }
  .wayfinder button:hover, .wayfinder button:focus-visible { border-color: var(--mint); }
  .wayfinder button[aria-current] { background: var(--mint); border-color: var(--mint); transform: scale(1.3); }
  .wayfinder__label {
    position: absolute; right: 1.4rem; top: 50%; transform: translate(0.4rem, -50%);
    font: 500 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
    color: var(--text); background: rgba(3, 25, 29, 0.75); padding: 0.3rem 0.6rem; border-radius: 999px;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .wayfinder button:hover .wayfinder__label, .wayfinder button:focus-visible .wayfinder__label { opacity: 1; transform: translate(0, -50%); }
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  :root { --nav-h: 3.5rem; }
  .brand span { display: none; }
  .eyebrow__long { display: none; }
  .card--product, [data-side="right"] > .card--product { grid-template-columns: minmax(0, 1fr); }
  [data-side="right"] > .card--product .product__visual { order: 0; }
  .product__visual { min-height: 11rem; }
  .product__visual > img { left: 1.2rem; top: 1.2rem; width: 175%; }
  .product__body { gap: 0.7rem; }
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .how-grid h3 { font-size: 1.2rem; margin-bottom: 0.25rem; }
  .stop > .card--belief, .stop > .card--intro { text-align: left !important; }
  .stop > .card--belief .eyebrow, .stop > .card--intro .eyebrow { justify-content: flex-start !important; }
  .stop > .card--belief .note, .stop > .card--intro .lede { margin-left: 0 !important; }
  /* On narrow screens the trail can pass behind text: give it a pane. */
  .dive .card--belief, .dive .card--intro {
    padding: 1.3rem 1.25rem; border-radius: 1.25rem;
    background: rgba(4, 26, 30, 0.6); border: 1px solid rgba(176, 255, 172, 0.12);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .dive .card--belief::before, .dive .card--intro::before { display: none; }
  .dive .card--belief, .dive .card--intro, .dive .card--product, .dive .card--how { width: calc(100vw - 2rem); }
  .dive .stop--product { --h: 160vh; }
  /* A compact footer: brand and products on one line, the legal lines small.
     In the dive it starts at the foot of the screen at the last stop, so the
     end of the footage (the honu turning away under the canoe) is clear. */
  .dive .footer { margin-top: -5vh; }
  .footer {
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(3, 20, 24, 0), rgba(3, 20, 24, 0.92) 2.6rem);
  }
  .footer .kapa { margin-bottom: 1rem; }
  .footer__inner { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.9rem 1rem; padding-top: 1.6rem; }
  .footer__products { justify-content: flex-end; gap: 0.3rem 1.1rem; }
  .footer__legal { grid-column: 1 / -1; flex-direction: column; gap: 0.15rem; font-size: 0.68rem; line-height: 1.45; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .dive .product__facts { display: none; }
  .dive .product__visual { min-height: 9rem; }
}
/* Short screens (a phone on its side): cards are fixed, so they must fit. */
@media (max-height: 520px) {
  .dive h1 { font-size: min(clamp(3rem, 8.4vw, 7.4rem), 15vh); }
  .dive .card--hero .lede { margin-top: 1rem; }
  .dive .actions { margin-top: 1.2rem; }
  .dive .card--product, .dive [data-side="right"] > .card--product { grid-template-columns: minmax(0, 1fr); }
  .dive .product__visual, .dive .product__facts { display: none; }
  .dive .card--intro .lede { display: none; }
  .dive .product-index { margin-top: 1rem; }
  .dive .product-index a { padding: 0.4rem 0; }
  .dive .card--how .eyebrow { margin-bottom: 1rem; }
  .dive .dive-hint { display: none; }
}
@media (max-aspect-ratio: 21/20) and (min-width: 761px) {
  .dive .card--belief, .dive .card--intro { width: min(40rem, 84vw); }
  .dive .card--product, .dive .card--how { width: min(46rem, 88vw); }
  .dive .card--product, .dive [data-side="right"] > .card--product { grid-template-columns: minmax(0, 1fr); }
  .dive [data-side="right"] > .card--product .product__visual { order: 0; }
  .dive .product__visual { min-height: 15rem; }
  .dive .stop > .card--belief, .dive .stop > .card--intro { text-align: left; }
  .dive .stop > .card--belief .eyebrow, .dive .stop > .card--intro .eyebrow { justify-content: flex-start; }
  .dive .stop > .card--belief .note, .dive .stop > .card--intro .lede { margin-left: 0; }
  .dive .card--belief, .dive .card--intro {
    padding: 1.6rem 1.6rem; border-radius: 1.4rem;
    background: rgba(4, 26, 30, 0.58); border: 1px solid rgba(176, 255, 172, 0.12);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .dive .card--belief::before, .dive .card--intro::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .status--live::before, .dive-hint::after { animation: none; }
  .btn { transition: none; }
}

/* ---------- dive performance ----------
   The footage behind the cards changes every frame, so a backdrop blur would
   be recomputed every frame over a large area: costly on laptops and phones.
   In the dive the panels are simply more solid instead. */
.dive .card, .dive .product-index {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.dive .card--product { background: linear-gradient(155deg, rgba(8, 34, 40, 0.95), rgba(4, 20, 26, 0.93)); }
.dive .card--how { background: linear-gradient(155deg, rgba(8, 34, 40, 0.9), rgba(4, 20, 26, 0.86)); }
.dive .product-index { background: rgba(4, 22, 30, 0.82); }
@media (max-width: 760px), (max-aspect-ratio: 21/20) {
  .dive .card--belief, .dive .card--intro { background: rgba(4, 22, 30, 0.8); }
}