/* ==========================================================================
   modus marine — rebuilt 2026-09-21 from a clean slate.

   The idea: a cream page with paper cards taped down (scrapbook, but neat),
   and deep-blue water that rolls in under a breaking crest to start the big
   sections. Dark blues carry the site; orange is only ever a button.
   Desktop first. No rounded corners anywhere.
   ========================================================================== */

:root {
  --navy: #14294A;          /* the water, the nav when solid, the footer */
  --navy-deep: #0B1A33;     /* footer, deepest shadows */
  --ink: #10213A;           /* headings + body on cream */
  --ink-soft: #3E4C63;      /* secondary copy on cream */
  --cream: #F1EDE4;         /* the page */
  --cream-deep: #E6E0D3;    /* rules on cream */
  --paper: #FFFFFF;         /* the cards */
  --sky: #9CC3D8;           /* small accents: eyebrows on water, rules, icons */
  --sky-ink: #2E6A87;       /* sky as text on cream (4.6:1) */
  --orange: #F26B1D;        /* buttons. Only buttons. */
  --orange-dark: #D4560F;
  --tape: rgba(233, 222, 188, 0.78);
  --tape-edge: rgba(180, 160, 110, 0.35);

  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand: "Special Elite", "American Typewriter", "Courier New", monospace;   /* the typewriter for the hand-done bits */

  --container: 1180px;
  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* every photograph gets a thin black outline (drawn inside, so no layout shift) */
img[src*="assets/photos/"] { outline: 1px solid #000; outline-offset: -1px; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; background: var(--navy); color: var(--cream); padding: 10px 14px; z-index: 100; }
.skip-link:focus { top: 12px; }

/* ---------- type ---------- */
.eyebrow {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-ink);
  margin-bottom: 16px;
}
.eyebrow--centred { text-align: center; }
/* a navy tab running in from the edge of the page, the label inside it */
.eyebrow--tab {
  position: relative; display: inline-block;
  background: var(--navy); color: var(--cream);
  padding: 10px 26px 9px 22px; margin-bottom: 28px;
}
.eyebrow--tab::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: var(--navy); }
.eyebrow--tab-right { padding: 10px 22px 9px 26px; }
.eyebrow--tab-right::before { right: auto; left: 100%; }
.on-water .eyebrow--tab { color: var(--cream); }
.section, .tide, .page-head { overflow-x: clip; }
.features__head { text-align: left; }
.features__head--right { text-align: right; }
.on-water .eyebrow { color: var(--sky); }

.h-display {
  font-size: clamp(2.25rem, 3.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.h-title {
  font-size: clamp(1.625rem, 2.4vw, 2.05rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.h-card {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.hand { font-family: var(--hand); font-weight: 400; line-height: 1.35; }
.on-water .hand { color: var(--sky); }

/* ---------- buttons: square, small caps, orange ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.on-water .btn-ghost { color: var(--cream); border-color: var(--cream); }
.on-water .btn-ghost:hover { background: var(--orange); border-color: var(--orange); }
.btn-quiet { font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.btn-quiet:hover { color: var(--orange-dark); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ==========================================================================
   NAV — plain links, no chips, no burger on desktop. Transparent on the cream
   hero, navy once the page has scrolled.
   ========================================================================== */
.navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  color: var(--cream);           /* every bar is cream type: over the hero's water, or on navy */
  transition: background-color 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.navbar-inner { height: 100%; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand img { height: 40px; width: auto; }
.nav-wordmark { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; }
.navbar-right { display: flex; align-items: center; gap: 34px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links > a, .nav-item > a {
  text-decoration: none; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.nav-links > a:hover, .nav-item:hover > a, .nav-links a[aria-current="page"] { border-bottom-color: currentColor; }

/* Features drop-down (2026-09-22): a paper card with a pointer under the word, listing every card
   in the home page's Features band; each link targets that card (#feature-<name>). Shown on hover
   and on keyboard focus; the 14px padding-top is the hover bridge between the word and the card. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 60;
  padding-top: 14px;
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity 180ms var(--ease), translate 180ms var(--ease), visibility 0s linear 180ms;
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.nav-menu__paper {
  position: relative; width: max-content; padding: 21px 26px;   /* hugs the three columns: the same air on every side (links carry 5px top/bottom themselves) */
  background: var(--navy); color: var(--cream);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 18px 40px rgba(4,12,30,0.5);
}
.nav-menu__paper::before { content: ""; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; background: var(--navy); transform: translateX(-50%) rotate(45deg); }
.nav-menu ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto auto; gap: 4px 34px; }
.nav-menu a {
  display: inline-block; padding: 5px 0; border-bottom: 1px solid transparent;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--sky); border-bottom-color: currentColor; }
.nav-cta { padding: 11px 20px; }
.nav-toggle { display: none; }
.mobile-menu { display: none; }

body[data-scrolled="true"] .navbar,
.navbar--solid {
  /* the same strip of the hero poster the bar sits over at the top of the page, kept all the way down */
  background: var(--navy) url("assets/water-hero-poster2.jpg") center 7% / cover no-repeat;
  color: var(--cream);
  box-shadow: 0 2px 0 var(--navy-deep), 0 10px 30px rgba(11, 26, 51, 0.25);   /* the 2px navy rule along the bottom edge */
}

/* ==========================================================================
   WATER — the deep-blue bands, each opened by a breaking crest.
   .tide is the band; .crest is the cream "sky" above the crest line, drawn
   over the top of the band so the water appears to roll in under it.
   ========================================================================== */
.tide {
  position: relative;
  color: var(--cream);
  background: var(--navy) url("assets/water-foam.jpg") center / cover no-repeat;
  padding: 150px 0 110px;
  isolation: isolate;
}
.tide::before {
  /* keep the water dark enough for cream type wherever it's used directly */
  content: ""; position: absolute; inset: 0; background: rgba(12, 28, 58, 0.22); z-index: -1;
}
/* every band a vintage cyanotype, alternating (twelfth pass): */
.tide--cyanotype { background-image: url("assets/water-cyanotype.jpg"); background-position: center 72%; }
.tide--foam { background-image: url("assets/water-foam.jpg"); background-position: center 30%; }
.tide--ripple { background-image: url("assets/water-ripple.jpg"); background-position: center 60%; }

.crest {
  position: absolute; left: 0; right: 0; top: -1px;
  width: 100%; height: 96px;
  display: block;
  pointer-events: none;
}
.crest .crest__sky { fill: var(--cream); }
.crest .crest__foam { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2.5; }
.crest .crest__foam2 { fill: none; stroke: rgba(156, 195, 216, 0.35); stroke-width: 6; }
.tide > .container { position: relative; }
.demo--joined { padding-top: 96px; }
.paper .h-display, .paper .h-title { text-shadow: none; }
.on-water .h-display, .on-water .h-title { text-shadow: 0 2px 20px rgba(8, 20, 45, 0.55); }


/* ==========================================================================
   PAPER — the cards, and the tape that holds them down.
   ========================================================================== */
.paper {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: 44px 48px;
  box-shadow: 0 1px 2px rgba(11, 26, 51, 0.08), 0 18px 48px rgba(11, 26, 51, 0.14);
}
.on-water .paper, .tide .paper { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 30px 70px rgba(4, 12, 30, 0.55); }
.paper--tilt-l { transform: rotate(-1.2deg); }
.paper--tilt-r { transform: rotate(1deg); }

.tape {
  position: absolute;
  width: 118px; height: 30px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 7px),
    var(--tape);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 0 0 1px var(--tape-edge);
  clip-path: polygon(0 18%, 3% 0, 6% 22%, 9% 4%, 12% 20%, 15% 2%, 100% 0, 97% 24%, 94% 4%, 91% 26%, 88% 2%, 85% 20%, 100% 100%, 97% 80%, 94% 98%, 91% 78%, 88% 100%, 85% 82%, 0 100%, 3% 78%, 6% 100%, 9% 76%, 12% 98%, 15% 80%);
  z-index: 3;
  pointer-events: none;
}
.tape--tl { left: -34px; top: -13px; transform: rotate(-38deg); }
.tape--tr { right: -34px; top: -13px; transform: rotate(38deg); }
.tape--bl { left: -34px; bottom: -13px; transform: rotate(38deg); }
.tape--br { right: -34px; bottom: -13px; transform: rotate(-38deg); }
.tape--top { left: 50%; top: -14px; transform: translateX(-50%) rotate(-2deg); }
.tape--top-l { left: 12%; top: -14px; transform: rotate(-4deg); }
.tape--top-r { right: 12%; top: -14px; transform: rotate(3deg); }

/* a photo, printed and taped down */
.snap {
  position: relative;
  background: var(--paper);
  padding: 12px 12px 14px;
  box-shadow: 0 1px 2px rgba(11, 26, 51, 0.1), 0 16px 40px rgba(11, 26, 51, 0.18);
  transform: rotate(var(--tilt, 0deg));
}
.snap img { width: 100%; height: 100%; object-fit: cover; }
.snap figcaption { font-family: var(--hand); font-weight: 400; font-size: 1.0625rem;   /* = body text */ color: var(--ink-soft); padding: 10px 4px 0; line-height: 1.15; }
.snap figcaption small { display: block; font-family: var(--font); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky-ink); margin-top: 4px; }

/* ---------- sections ---------- */
.section { padding: 110px 0; }
.section--tight { padding: 90px 0; }
.section-more { margin-top: 44px; }
.section-more--centred { text-align: center; }
main { display: block; }

/* reveal on scroll (script adds .is-in; no-js shows everything) */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ==========================================================================
   HERO — cream, the wordmark and the fish on the left, three taped
   photographs on the right. The first tide rolls in beneath it.
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: flex-end;                /* the copy sits low, bottom-left */
  padding: calc(var(--nav-h) + 40px) 0 170px;
}
/* The water sweeps in from the top right, cut by an organic curve (#heroWater,
   in the markup, in objectBoundingBox units so it scales with the hero). */
.hero__water {
  position: absolute; inset: 0; z-index: 0;
  /* Two heroes exist: water-hero-ripple.jpg (the user's keeper, "center 30%") and
     water-hero-poster2.jpg, the folded cyanotype poster with its tiny printed text scrubbed out (2026-09-22). */
  background: var(--navy) url("assets/water-hero-poster2.jpg") center 55% / cover no-repeat;
  clip-path: url(#heroWater);
}
.hero__edge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.hero__edge path { fill: none; stroke-linejoin: round; }
.hero__foam { stroke: rgba(255, 255, 255, 0.55); stroke-width: 2.5; }
.hero__foam2 { stroke: rgba(156, 195, 216, 0.35); stroke-width: 6; }
.hero__grid { position: relative; z-index: 1; width: min(var(--container), calc(100% - 64px)); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero__copy { grid-column: 1 / -1; max-width: 760px; margin-left: -52px; }   /* a touch left of the content column, where the user marked it */
.hero__wordmark { white-space: nowrap; }
.hero__fish { width: 190px; margin-bottom: 8px; }
.hero__wordmark { font-size: clamp(3.4rem, 6.4vw, 5.6rem); font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; }
.hero__wordmark .brk { color: var(--sky-ink); }
/* "marine" sits between two brackets and breathes -- the tracking widens and
   narrows on a slow loop and the brackets ride along with it (after the
   BY[FORM] wordmark the user pointed at). Square-cornered brackets: no radii on this site. */
/* "marine" sits between two square brackets. On load the word flips through
   equipment / logbook / metrics / services / tasks and settles on marine
   (script.js); the brackets are inline-flex siblings so they hug whatever
   word is showing. Bracket bottoms sit on the baseline, tops at ascender
   height, so they line up with "modus". */
.brk { display: inline-flex; align-items: baseline; }
.brk::before, .brk::after {
  content: ""; display: block; width: 0.16em; height: 0.74em;
  border: 0.045em solid currentColor; flex: none; align-self: flex-end;
  margin-bottom: 0.07em;                                /* the word's descender space, so the bracket foot meets the baseline */
}
.brk::before { border-right: 0; margin-right: 0.08em; }
.brk::after { border-left: 0; margin-left: 0.08em; }
.brk__word { display: inline-block; }
.hero__tag { margin-top: 18px; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); }
.hero__line { margin-top: 26px; font-family: var(--hand); font-weight: 600; font-size: 1.85rem; line-height: 1.15; color: var(--ink-soft); max-width: 20ch; }
.hero__cta { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; }

.hero__snaps { position: relative; height: 560px; margin-top: 20px; }
.hero__snaps .snap { position: absolute; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 26px 60px rgba(4, 12, 30, 0.55); }
.hero__snaps .snap--a { left: 2%; top: 0; width: 56%; --tilt: -3deg; z-index: 1; }
.hero__snaps .snap--b { right: 0; top: 50px; width: 40%; --tilt: 2.5deg; z-index: 2; }
.hero__snaps .snap--c { left: 20%; bottom: 0; width: 52%; --tilt: -1.5deg; z-index: 3; }
.hero__snaps .snap img { aspect-ratio: 4 / 3; }
.hero__snaps .snap--b img { aspect-ratio: 3 / 4; }

/* ---------- mission (first tide) ---------- */
.mission-card { max-width: 860px; margin: 0 auto; text-align: center; padding: 60px 72px 56px; }
.mission-card .h-title { margin-bottom: 26px; }
.mission-card .mission { font-size: 1.375rem; line-height: 1.45; font-weight: 500; }
.mission-card .vision { margin-top: 18px; font-size: 1.0625rem; color: var(--ink-soft); max-width: 60ch; margin-inline: auto; }
.mission-card .rule { width: 56px; height: 2px; background: var(--sky); margin: 26px auto 0; }

/* ---------- who ---------- */
.who { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: center; }
.who__lead { font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; max-width: 30ch; }
/* the "family tree": three sketched labels joined by hand-drawn arrows */
.tree { position: relative; height: 470px; }
.tree__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tree__lines path { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The tree animates once, on arrival (2026-09-22): box 1 pops, arrow 1 draws itself into box 2 as it
   pops, arrow 2 into box 3, then the 30–80 ft figure fades in and counts. The tree carries
   data-stagger for the boxes; the svg is exempt. Script sets --len on each arrow (its length,
   arrowhead included — the head is part of the path, so it draws last). */
.tree[data-stagger].is-in > svg, .tree[data-stagger] > svg { opacity: 1; animation: none; }
.tree.is-in > .tree__node { animation-delay: calc((var(--n) - 1) * 650ms); }
.tree__lines #treeLine1, .tree__lines #treeLine2 { stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); }
.tree.is-in #treeLine1 { animation: tree-draw 460ms var(--ease) 320ms forwards; }
.tree.is-in #treeLine2 { animation: tree-draw 460ms var(--ease) 970ms forwards; }
@keyframes tree-draw { to { stroke-dashoffset: 0; } }
.tree[data-stagger] .tree__stat { opacity: 0; transition: opacity 500ms var(--ease) 1500ms; }
.tree.is-in .tree__stat { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tree__lines #treeLine1, .tree__lines #treeLine2 { stroke-dashoffset: 0; animation: none; }
  .tree[data-stagger] .tree__stat { opacity: 1; transition: none; }
}
.tree__lines #statArc { stroke: none; }
.tree__stat { fill: var(--ink); font-family: var(--font); }
.tree__stat-big { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; }
.tree__stat-unit { font-size: 18px; font-weight: 600; }
.tree__stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--sky-ink); }

.tree__node {
  position: absolute;
  color: var(--ink);
  border: 1px solid var(--navy);                       /* the outlined-frame style, like the cards */
  background: var(--cream);                            /* same as the page: just the outline */
  padding: 18px 22px 20px;
}
.tree__node .ecard__n { margin-bottom: 8px; }
.tree__node .tree__t { display: block; font-size: 1.0625rem; line-height: 1.5; }
.tree__node--1 { left: 0; top: 0; width: 60%; }
.tree__node--2 { right: 0; top: 36%; width: 56%; }
.tree__node--3 { left: 6%; top: 70%; width: 60%; }
.who__stat { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--navy); display: flex; align-items: baseline; gap: 22px; }
.who__big { font-size: clamp(3rem, 5vw, 4.25rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; }
.who__big small { font-size: 0.36em; font-weight: 600; letter-spacing: 0.06em; margin-left: 4px; }
.who__stat.who__stat--small { display: none; }          /* the plain figure only shows where the tree's svg is hidden */
.who__stat-label { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--sky-ink); }
.who .snap { --tilt: 2deg; margin-left: auto; width: min(100%, 460px); }
.who .snap img { aspect-ratio: 4 / 3; }

/* ---------- what we do: three outlined cards, the button sitting on the frame ---------- */
.three__head { max-width: 760px; margin-bottom: 56px; }
.three__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ecard {
  position: relative;
  border: 1px solid var(--navy);
  padding: 48px 34px 64px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.35);
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}
.ecard:hover { background: var(--paper); transform: translateY(-3px); }
.ecard__n { display: block; font-size: 0.75rem; letter-spacing: 0.3em; color: var(--sky-ink); font-weight: 700; margin-bottom: 18px; }
.ecard__t { display: block; margin-bottom: 18px; min-height: 2.6em; }
.ecard__d { display: block; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
.ecard__btn { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); white-space: nowrap; padding: 12px 22px; }
.ecard:hover .ecard__btn { background: var(--orange-dark); border-color: var(--orange-dark); }
/* a strip of the squared paper laid across a card, like a bit of grid tape */
.strip { position: relative; isolation: isolate; }
.strip::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: url("assets/grid-paper.jpg") center top / 280px auto repeat;
  box-shadow: inset 0 0 0 1px rgba(20, 41, 74, 0.08);
}
.strip--left::before { left: 22px; top: 0; bottom: 0; width: 30px; }
.strip--top::before { top: 26px; left: 0; right: 0; height: 28px; }
.strip--bottom::before { bottom: 14px; left: 0; right: 0; height: 28px; }
/* a second strip down the right-hand side, crossing the top one */
.strip--right::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; right: 16px; width: 30px;
  background: url("assets/grid-paper.jpg") center top / 280px auto repeat;
  box-shadow: inset 0 0 0 1px rgba(20, 41, 74, 0.08);
}
.ecard.strip--left::before { left: 18px; }
.mission-card.strip--left::before { left: 30px; width: 34px; }

/* the outlined frame — the "What we do" card style, for photos and the price */
.frame {
  position: relative;
  border: 1px solid var(--navy);
  background: var(--cream) url("assets/grid-paper.jpg") center top / 280px auto repeat;
  padding: 22px 22px 26px;
  text-align: center;
  width: min(100%, 520px);
}
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frame figcaption { padding-top: 20px; }
.frame__t { display: block; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.frame__t.hand { font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 1.0625rem; }   /* = body text */
.frame--wide img { aspect-ratio: 3 / 2; }
.frame__s { display: block; margin-top: 6px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky-ink); }
.on-water .frame__s { color: var(--sky); }   /* sky-ink is for cream; on the water the caption sub-line needs the lighter sky */
.frame--price { padding: 52px 34px 60px; margin-left: 0; }
/* the squared paper runs on from the frame to the edge of the page */
.frame--bleed-right::after, .frame--bleed-left::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; width: 100vw; z-index: -1;
  background: var(--cream) url("assets/grid-paper.jpg") center top / 280px auto repeat;
  border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy);
}
.frame--bleed-right::after { left: 100%; }
.frame--bleed-left::after { right: 100%; }
.frame--bleed-right, .frame--bleed-left { isolation: isolate; }
.download, #pricing { overflow-x: clip; }
.frame--plain { padding: 22px; }
.frame__btn { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); white-space: nowrap; padding: 12px 22px; }
.who .frame, .download .frame { margin-left: auto; }
.quicklinks { margin-top: 72px; display: flex; gap: 40px; justify-content: center; }
.quicklinks a { text-decoration: none; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.quicklinks a:hover { color: var(--orange-dark); border-color: var(--orange-dark); }

/* ---------- features (second tide): fourteen labels taped to the water ---------- */
.features__head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.flabels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 34px 22px; }
.flabel {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 18px 40px rgba(4,12,30,0.5);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.flabel:hover, .flabel:target { transform: rotate(0deg) translateY(-4px); background: var(--orange); color: #fff; }   /* :target — arrived from the nav drop-down */
.flabel:hover svg, .flabel:target svg { stroke: #fff; }
.flabel { scroll-margin-top: calc(var(--nav-h) + 300px); }   /* land with the Features tab still in view, even for the second row */
.flabel .tape { width: 78px; height: 20px; left: 50%; top: -9px; transform: translateX(-50%) rotate(var(--tape-tilt, -3deg)); }
.flabel > a, .flabel > .flabel__inner { display: block; padding: 26px 10px 18px; color: inherit; text-decoration: none; }   /* the padding lives on the link so the whole tile is clickable */
.flabel svg { width: 30px; height: 30px; stroke: var(--navy); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 10px; display: block; }
.flabel span { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* Staggered pop-in: a container with data-stagger (also data-reveal) pops its children in one by
   one, 75ms apart, once it scrolls into view; script sets --n on each child. The container itself
   no longer fades as a block. opacity/translate/scale are animated as their own properties so the
   children's own transforms (tilt, hover lift) are untouched. Used by .flabels, .three__grid, .tcards. */
[data-stagger] { opacity: 1; transform: none; transition: none; }
[data-stagger] > * { opacity: 0; }
[data-stagger].is-in > * { animation: pop-in 520ms cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(var(--n, 0) * var(--stagger, 75ms)); }
@keyframes pop-in {
  from { opacity: 0; translate: 0 26px; scale: 0.86; }
  60%  { opacity: 1; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
.three__grid, .tcards { --stagger: 140ms; }   /* three bigger cards: a slower beat reads better */
.mission-card__body { --stagger: 110ms; }        /* the Overview card's lines, while the card itself fades up */
.no-js [data-stagger] > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) { [data-stagger] > * { opacity: 1; animation: none; } }
.flabel:nth-child(3n) { --tilt: 1.4deg; --tape-tilt: 4deg; }
.flabel:nth-child(3n+1) { --tilt: -1.2deg; }
.flabel:nth-child(5n+2) { --tilt: 0.8deg; --tape-tilt: -6deg; }
.flabel:nth-child(7n+4) { --tilt: -2deg; }

/* ---------- download ---------- */
.download__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; }
.download__copy p + p { margin-top: 16px; }
.download__copy .h-title { margin-bottom: 22px; }
.download .snap { --tilt: -2deg; width: min(100%, 520px); margin-left: auto; }
.download .snap img { aspect-ratio: 16 / 10; }

/* ---------- pricing ---------- */
.price { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.price .paper { padding: 48px 52px; }
.price__t { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--sky-ink); }
.price__big { font-size: clamp(4.5rem, 7vw, 6.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin: 12px 0 6px; }
.price__big sup { font-size: 0.4em; vertical-align: top; margin-top: 0.35em; display: inline-block; letter-spacing: 0; font-weight: 600; }
.price__big small { font-size: 0.25em; font-weight: 500; letter-spacing: 0.04em; margin-left: 8px; }
.price__copy p + p { margin-top: 16px; }
.price__copy .h-title { margin-bottom: 22px; }

/* ---------- testimonials (third tide) ---------- */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 56px; align-items: start; }
.tcard { padding: 38px 32px 32px; }
.tcard:nth-child(1) { transform: rotate(-1deg); }
.tcard:nth-child(2) { transform: rotate(0.6deg) translateY(18px); }
.tcard:nth-child(3) { transform: rotate(-0.4deg); }
.tcard__q { font-size: 1.0625rem; line-height: 1.55; }
.tcard__q p::before { content: "\201C"; } .tcard__q p::after { content: "\201D"; }
.tcard__who { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--cream-deep); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.875rem; }
.tcard__who dt { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky-ink); font-weight: 700; padding-top: 3px; }
.tcard__who dd { margin: 0; border-bottom: 1px solid var(--cream-deep); padding-bottom: 2px; }
.tcard__who dd.hand { font-size: 1rem; line-height: 1.2; }
.todo { margin: 60px auto 0; max-width: 620px; text-align: center; font-size: 0.875rem; color: var(--sky); }
.todo strong { color: var(--cream); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; margin-right: 8px; }

/* ==========================================================================
   FEATURE PAGES (2026-09-22) — one page per feature, generated by
   tools/make-feature-pages.py.
   ========================================================================== */

/* A drawing of an iPhone, empty, waiting for a screenshot of the feature: drop an
   <img> into .phone__screen. The rounded corners are the one exception to the
   site's square-corner rule — it is a drawing of an object, not a box on the page. */
.phone { display: flex; justify-content: center; }
.phone__body {
  position: relative;
  width: min(300px, 78vw); aspect-ratio: 9 / 19.5;
  padding: 11px;
  border: 2px solid var(--navy); border-radius: 44px;
  background: var(--paper);
  box-shadow: 0 2px 4px rgba(11, 26, 51, 0.12), 0 28px 60px rgba(11, 26, 51, 0.22);
}
.phone__body::before, .phone__body::after { content: ""; position: absolute; width: 2px; background: var(--navy); }
.phone__body::before { left: -3px; top: 23%; height: 15%; }     /* volume */
.phone__body::after { right: -3px; top: 27%; height: 11%; }     /* side button */
.phone__island { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; background: var(--navy); border-radius: 999px; z-index: 2; }
.phone__screen {
  height: 100%; overflow: hidden; border-radius: 33px;
  border: 1px solid rgba(20, 41, 74, 0.3);
  background: var(--cream) url("assets/grid-paper.jpg") center top / 130px auto repeat;   /* squared paper until the screenshot goes in */
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; }

.halfcol { max-width: 560px; }
.prose p { color: var(--ink-soft); }
.prose p + p { margin-top: 16px; }
.plain-list { --stagger: 60ms; }
.taglist { display: flex; flex-wrap: wrap; gap: 10px; }
.taglist li { border: 1px solid var(--navy); padding: 8px 14px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.spec-card { padding: 36px 36px 32px; }
.spec-card .h-card { margin-bottom: 4px; }
.spec { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin-top: 22px; font-size: 0.9375rem; }
.spec dt { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky-ink); font-weight: 700; padding-top: 4px; }
.spec dd { margin: 0; border-bottom: 1px solid var(--cream-deep); padding-bottom: 3px; }
.spec-card .prose { margin-top: 24px; }

/* ---------- about / media / pricing (2026-09-22) ---------- */
.prose--lede p { font-size: 1.0625rem; }
.prose--lede { margin-top: 20px; }
.tagline { margin-top: 26px; font-size: 1.5rem; color: var(--sky-ink); }

/* the media page: a masonry of taped photographs, portraits and landscapes mixed */
.gallery { columns: 3; column-gap: 34px; }
.gallery .snap { break-inside: avoid; margin: 0 0 46px; width: 100%; }
.gallery .snap:nth-child(3n) { --tilt: 1.1deg; }
.gallery .snap:nth-child(3n+1) { --tilt: -1deg; }
.gallery .snap:nth-child(4n+2) { --tilt: 0.7deg; }
.gallery .snap img { aspect-ratio: auto; height: auto; }

/* pricing: every feature, each a link to its page */
.incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.incl {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border: 1px solid var(--navy); background: var(--paper); color: var(--ink);
  padding: 20px 22px; text-decoration: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.incl__more { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky-ink); white-space: nowrap; }
a.incl:hover { background: var(--orange); color: #fff; }
a.incl:hover .incl__more { color: #fff; }
.incl--plain { background: transparent; }
.users-card { margin-top: 40px; max-width: 720px; padding: 34px 36px; }
.users-card p { color: var(--ink-soft); }
.frame--price-page { margin-left: auto; padding: 52px 34px 44px; }
.price__sub { margin-top: 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky-ink); text-align: center; }

/* pricing: the cost-per-boat calculator (script.js §7) */
.calc { padding: 32px 34px 30px; }
.calc.strip--top { padding: 82px 76px 34px 34px; }
.calc__row { display: grid; gap: 10px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.calc__row input { padding: 14px 16px; border: 1px solid var(--navy); background: #fff; font-weight: 400; letter-spacing: 0; width: 140px; }
.calc__row input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.calc__out { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; margin: 26px 0 0; padding-top: 20px; border-top: 1px dashed var(--cream-deep); align-items: baseline; }
.calc__out dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky-ink); }
.calc__out dd { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; text-align: right; }
.calc__note { margin-top: 18px; font-size: 0.875rem; color: var(--ink-soft); }

/* pricing: questions */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; margin: 0; }
.faq__item { padding: 24px 0; border-bottom: 1px solid var(--cream-deep); }
.faq__item:first-child, .faq__item:nth-child(2) { border-top: 1px solid var(--cream-deep); }
.faq dt { margin-bottom: 10px; }
.faq dd { margin: 0; color: var(--ink-soft); }

.contact-section { padding-top: 20px; }

/* ---------- demo strip (on water) ---------- */
.demo {
  text-align: center;
  padding: 110px 0;
  background: var(--cream) url("assets/grid-paper.jpg") center top / 280px auto repeat;   /* the user's scanned squared paper, tiled on its lines; 280px = 8 cells of 35px */
  border-top: 1px solid rgba(20, 41, 74, 0.12);
}
.demo .paper { max-width: 760px; margin: 0 auto; padding: 52px 56px 48px; text-align: left; box-shadow: 0 1px 2px rgba(11, 26, 51, 0.1), 0 24px 60px rgba(11, 26, 51, 0.22); }
.demo .eyebrow { color: var(--sky-ink); }
.demo__h { margin: 10px 0 14px; }
.demo__sub { margin: 0 0 26px; font-size: 1.0625rem; color: var(--ink-soft); }
.demo-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 14px; align-items: stretch; }
.demo-form input { padding: 14px 16px; border: 1px solid var(--navy); background: #fff; min-width: 0; }
.demo-form input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }

/* ---------- get in touch ---------- */
.touch { padding: 40px 0; background: var(--orange); color: #fff; }
.touch__row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.touch__row .eyebrow { margin-bottom: 0; color: #fff; }
.touch__line { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.touch__line a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-bottom: 2px; }
.touch__line a:hover { border-color: #fff; }

/* ---------- footer ---------- */
.footer { background: var(--navy-deep); color: var(--cream); padding: 56px 0 40px; }
.footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 20px 60px; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; grid-column: 2; grid-row: 1; justify-self: end; }
.footer__brand img { height: 44px; }
.footer__wordmark { font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-self: start; grid-column: 1; grid-row: 1; }
.footer__links a { text-decoration: none; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--sky); }
.footer__links a:hover { color: var(--cream); }
.footer__legal { grid-column: 1 / -1; font-size: 0.8125rem; color: rgba(241, 237, 228, 0.6); border-top: 1px solid rgba(241, 237, 228, 0.15); padding-top: 20px; }

/* ==========================================================================
   SUB-PAGES
   ========================================================================== */
.page-head { padding: calc(var(--nav-h) + 72px) 0 72px; }
.page-head__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: center; }
.page-head h1 { margin-bottom: 20px; }
.page-head .snap { --tilt: 2deg; width: min(100%, 480px); margin-left: auto; }
.page-head .snap img { aspect-ratio: 4 / 3; }
.page-head--narrow { padding-bottom: 40px; }
.page-back { margin-top: 32px; }
/* contact: the photo and form sit on the home Features water */
.contact-water { padding-top: 56px; padding-bottom: 130px; }   /* pulled up so the photo and the form both fit above the fold */
.page-head:has(+ .contact-water) { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 12px; }
.page-head:has(+ .contact-water) .lede { max-width: 520px; }   /* keep the copy clear of the form that rises beside it */
/* the photo frame is see-through on the water: only its lines and caption show */
.contact-water .frame, .contact-water .frame.frame--bleed-left::after { background: transparent; border-color: rgba(241, 237, 228, 0.7); }
.contact-water .frame .hand { color: var(--cream); }
.contact-water .frame--bleed-left { border-left: 0; }   /* open to the page edge: no line down the left of the photo */
.contact-water .frame img { outline-color: #fff; }   /* white, not the site-wide black, on the water */
/* the form's bottom lines up with the frame's; the extra height rises up
   toward the crest instead of pushing the section taller (the -600px margin
   takes the form out of the row's height), and it sits further right, clear of the lede */
.contact-water .contact--flip { align-items: end; column-gap: 150px; }
.contact-water .contact-aside .frame { margin-bottom: 0; }
.contact-water .contact--flip > .paper { margin-top: -600px; }

.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.step { padding: 40px 40px 36px; }
.step:nth-child(odd) { transform: rotate(-0.6deg); }
.step:nth-child(even) { transform: rotate(0.5deg); }
.step__n { font-size: 0.75rem; letter-spacing: 0.3em; color: var(--sky-ink); font-weight: 700; display: block; margin-bottom: 14px; }
.step h2 { margin-bottom: 14px; }
.step p { color: var(--ink-soft); }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.plain-list li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--cream-deep); position: relative; }
.plain-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); border: 2px solid var(--navy); }
.plain-list li:first-child { border-top: 1px solid var(--cream-deep); }
.paper .plain-list li { border-color: var(--cream-deep); }

.contact { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: start; }
.contact--flip { grid-template-columns: 0.85fr 1.15fr; }
.paper--grid { background: var(--cream) url("assets/grid-paper.jpg") center top / 280px auto repeat; }
.frame--clear { background: var(--cream); }
.frame--clear.frame--bleed-left::after, .frame--clear.frame--bleed-right::after { background: var(--cream); }   /* plain frame: only the lines run on */
.form { display: grid; gap: 22px; }
.form label { display: grid; gap: 8px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.form label small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-soft); font-size: 0.875rem; margin-left: 8px; }
.form input, .form select, .form textarea { padding: 14px 16px; border: 1px solid var(--navy); background: #fff; font-weight: 400; letter-spacing: 0; text-transform: none; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.form textarea { min-height: 130px; resize: vertical; }
.form ::placeholder { color: #6B7688; opacity: 1; }   /* example text, lighter than typed text */
.form .btn { justify-self: start; }
.contact-aside .frame { width: 100%; margin-bottom: 40px; }
.contact-section { overflow-x: clip; }
.contact-aside p + .eyebrow { margin-top: 28px; }

/* ==========================================================================
   Smaller screens — kept working, not tuned. Desktop is the target.
   ========================================================================== */
@media (max-width: 1080px) {
  .flabels { grid-template-columns: repeat(4, 1fr); }
  .incl-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { columns: 2; }
  .page-head .phone__body { width: min(260px, 78vw); }
  .three__grid { gap: 24px; }
  .ecard { padding: 40px 22px 60px; }
}
@media (max-width: 900px) {
  .container { width: min(var(--container), calc(100% - 40px)); }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: 1px solid currentColor; cursor: pointer;
  }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .mobile-menu {
    position: fixed; inset: var(--nav-h) 0 0 0; background: var(--navy); color: var(--cream);
    padding: 40px 32px; display: none; flex-direction: column; gap: 22px; z-index: 40;
  }
  body[data-menu-open="true"] .mobile-menu { display: flex; }
  body[data-menu-open="true"] .navbar { color: var(--cream); }
  .navbar { background: var(--navy) url("assets/water-hero-poster2.jpg") center 7% / cover no-repeat; }
  .mobile-menu a { text-decoration: none; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .mobile-menu .btn { align-self: flex-start; margin-top: 12px; }

  .hero__grid, .who, .download__grid, .price, .page-head__grid, .twocol, .contact { grid-template-columns: 1fr; gap: 48px; }
  .incl-grid, .faq { grid-template-columns: 1fr; }
  .faq__item:nth-child(2) { border-top: 0; }
  .gallery { columns: 1; }
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 48px); padding-bottom: 96px; }
  .hero__copy { margin-left: 0; }
  .hero__water, .hero__edge { display: none; }
  .contact-water .contact--flip > .paper { margin-top: 0; }   /* stacked: no rising form */
  .hero__snaps { height: 460px; }
  .hero__snaps .snap { box-shadow: 0 1px 2px rgba(11, 26, 51, 0.1), 0 16px 40px rgba(11, 26, 51, 0.18); }
  .three__grid, .tcards, .steps { grid-template-columns: 1fr; }
  .tcard:nth-child(2) { transform: rotate(0.6deg); }
  .flabels { grid-template-columns: repeat(3, 1fr); }
  .demo-form { grid-template-columns: 1fr; }
  .paper { padding: 32px 26px; }
  .mission-card { padding: 44px 30px; }
  .tide { padding: 120px 0 80px; }
  .crest { height: 64px; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__links { justify-self: start; grid-column: 1; grid-row: 2; }
  .footer__brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .who .snap, .download .snap, .page-head .snap, .who .frame, .download .frame { margin-left: 0; }
  .tree { height: auto; display: grid; gap: 18px; }
  .tree__lines { display: none; }
  .who__stat.who__stat--small { display: flex; }
  .tree__node { position: static; width: auto; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__wordmark { white-space: normal; }
}
@media (max-width: 560px) {
  .flabels { grid-template-columns: repeat(2, 1fr); }
  .hero__fish { width: 140px; }
  .hero__snaps { height: auto; display: grid; gap: 28px; }
  .hero__snaps .snap { position: static; }
  .hero__snaps .snap--a { width: 92%; }
  .hero__snaps .snap--b { width: 64%; justify-self: end; }
  .hero__snaps .snap--c { width: 88%; }
  .tape { width: 84px; height: 22px; }
  .tape--tl, .tape--tr, .tape--bl, .tape--br { top: auto; }
  .tape--tl, .tape--tr { top: -9px; } .tape--bl, .tape--br { bottom: -9px; }
  .tape--tl, .tape--bl { left: -26px; } .tape--tr, .tape--br { right: -26px; }
  .tape--top, .tape--top-l, .tape--top-r { top: -10px; }
}

/* ---------- logo assets ---------- */
.nav-wordmark-img { height: 44px; width: auto; display: block; }
.footer__wordmark-img { height: 52px; width: auto; display: block; }
.mission-card { position: relative; }
.mission-card__crab { position: absolute; right: -78px; bottom: -34px; width: 190px; height: auto; transform: rotate(-4deg); pointer-events: none; }
@media (max-width: 900px) { .mission-card__crab { width: 110px; right: -12px; bottom: -40px; } .nav-wordmark-img { height: 36px; } }

/* ---------- the navy crab walks the "get in touch" band into view ----------
   --tp runs 0 -> 1 as the crab crosses from off the left edge to off the right.
   The band is masked up to the crab's middle, so it is revealed from under the shell. */
@property --tp { syntax: "<number>"; inherits: true; initial-value: 0; }
.touch-walk { --crab: 210px; position: relative; overflow-x: clip; overflow-y: visible; z-index: 2; --cx: calc(var(--tp) * (100% + var(--crab)) - var(--crab) / 2); }
.touch-walk .touch { min-height: 68px; padding: 0; display: flex; align-items: center; }
.touch-crab { display: none; }
.touch-walk.is-armed .touch {
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--cx) - 14px), transparent calc(var(--cx) + 4px));
          mask-image: linear-gradient(to right, #000 calc(var(--cx) - 14px), transparent calc(var(--cx) + 4px));
}
.touch-walk.is-armed .touch-crab {
  display: block; position: absolute; bottom: -52px; height: var(--crab); width: var(--crab);
  left: calc(var(--tp) * (100% + var(--crab)) - var(--crab)); pointer-events: none;
}
.touch-walk.is-walking { animation: touch-walk 5.5s cubic-bezier(.4,.1,.4,.95) forwards; }
.touch-walk.is-walking .touch-crab { animation: touch-bob .45s ease-in-out 0s 12; }
@keyframes touch-walk { to { --tp: 1; } }
@keyframes touch-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-3deg); } }

/* The squared paper runs behind the demo form AND the "get in touch" band, so the
   band's pre-reveal state is just more paper (one continuous background, no seam). */
.grid-field { background: var(--cream) url("assets/grid-paper.jpg") center top / 280px auto repeat; }
.grid-field .demo { background: none; }

/* request-a-demo: tucked up so the form and the photo both show on opening, like contact */
.page-head:has(+ .contact-section) { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 12px; }
.contact-section { padding-top: 26px; }
.contact-section .paper { padding: 34px 44px; }
.contact-section .form { gap: 18px; }
.contact-section .form textarea { min-height: 104px; }

/* features water: Unsplash photo (Ivan Bandura), toned to the site's cyanotype blue.
   Credit shows only while the pointer is over the water. */
#features.tide--foam { background-image: url("assets/water-features.jpg"); }
.photo-credit {
  position: absolute; right: 16px; bottom: 14px; z-index: 3; pointer-events: none;
  padding: 5px 9px; background: rgba(8, 18, 38, 0.82); color: var(--cream);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1.3;
  opacity: 0; transform: translateY(4px); transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
#features:hover .photo-credit { opacity: 1; transform: none; }

/* testimonials water: Unsplash photo (Jorge Vasconez), toned the same way */
#said.tide--ripple { background-image: url("assets/water-said.jpg"); }
#said:hover .photo-credit { opacity: 1; transform: none; }

/* contact water: same Unsplash photo and credit as the testimonials */
.contact-water.tide--ripple { background-image: url("assets/water-said.jpg"); }
.contact-water:hover .photo-credit { opacity: 1; transform: none; }

/* overview water: Unsplash photo (Conor Sexton), toned the same way */
#overview.tide--cyanotype { background-image: url("assets/water-overview.jpg"); }
#overview:hover .photo-credit { opacity: 1; transform: none; }

/* 13 features: centre the short last row of tiles under the full rows above */
@media (min-width: 1081px) {
  .flabels > .flabel:nth-child(11) { grid-column: 2; }
  .incl-grid > :nth-child(13):last-child { grid-column: 2; }
}

/* request-a-demo: the photo rises to the first line of the intro copy (it sits clear of the text,
   to its right) and is a touch wider and shorter, so "What happens next" ends level with the form */
@media (min-width: 901px) {
  .contact-section .contact-aside { margin-top: -97px; }
  .contact-section .contact-aside .frame img { aspect-ratio: 16 / 10; }
}

/* contact + request-a-demo: close up the space under the form so the orange "Get in touch" strip
   is in view when the page opens */
.contact-section { padding-bottom: 28px; }
.contact-water { padding-bottom: 44px; }
.contact-section + .touch, .contact-water + .touch { padding: 22px 0; }

/* contact + request-a-demo: the orange "Get in touch" strip is the lowest thing on screen when the
   page opens (flush with the bottom edge); the footer only appears on scrolling. The form band
   stretches to fill whatever room there is, so there's no gap above the strip. */
main:has(> .contact-section + .touch), main:has(> .contact-water + .touch) {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
}
main:has(> .contact-section + .touch) > .contact-section,
main:has(> .contact-water + .touch) > .contact-water { flex: 1 0 auto; }

/* ---------- media: chequerboard mosaic (photos + single-ink stamps) ---------- */
.mosaic-wrap { padding: 28px 0 56px; }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: min(var(--container), calc(100% - 160px)); margin-inline: auto; }   /* a generous margin to the page edge */
.mosaic .tile { margin: 0; aspect-ratio: 3 / 4; position: relative; overflow: hidden; }
.mosaic .tile--photo img { width: 100%; height: 100%; object-fit: cover; display: block; outline: 0; }
.mosaic .tile--stamp { --ground: #FBF9F3; --ink: #243F78; background: var(--ground); }
.mosaic .tile--blue { --ground: #243F78; --ink: #F6F1E6; }
.mosaic .stamp {
  position: absolute; inset: 0; display: block; background: var(--ink);
  -webkit-mask: var(--stamp) center / cover no-repeat; mask: var(--stamp) center / cover no-repeat;
}
@media (max-width: 900px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; width: calc(100% - 48px); }
  /* keep the chequerboard in two columns: swap the pair in every second row */
  .mosaic > :nth-child(4n + 3) { grid-column: 2; }
  .mosaic > :nth-child(4n + 4) { grid-column: 1; }
}

/* media: the mosaic sits on the squared paper, which shows all the way round it as a border */
.mosaic-wrap { background: var(--cream) url("assets/grid-paper.jpg") center top / 280px auto repeat; padding: 64px 0; margin-top: 8px; }
.mosaic { box-shadow: 0 1px 2px rgba(11, 26, 51, 0.12), 0 18px 48px rgba(11, 26, 51, 0.18); }
@media (max-width: 900px) { .mosaic-wrap { padding: 32px 0; } }

/* media: "Our Gallery" with a small Instagram box at the right */
.media-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.media-head .h-display { margin-bottom: 0; }
.page-head--media { padding-bottom: 28px; }
.insta {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid rgba(20, 41, 74, 0.18);
  box-shadow: 0 1px 2px rgba(11, 26, 51, 0.1), 0 10px 26px rgba(11, 26, 51, 0.14);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.insta:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(11, 26, 51, 0.12), 0 14px 30px rgba(11, 26, 51, 0.2); }
.insta__icon { display: block; width: 30px; height: 30px; flex: none; }
.insta__icon svg { width: 100%; height: 100%; display: block; }
.insta__t { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; }
@media (max-width: 560px) { .media-head { flex-direction: column; align-items: flex-start; } }

/* media: one-row carousel, edge to edge, drifting slowly (script.js); arrows sit on a shaded fade at each end */
.mosaic-wrap { padding: 56px 0; }
.carousel { position: relative; width: 100%; box-shadow: none; }
.mosaic {
  display: flex; width: 100%; margin: 0; box-shadow: none; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mosaic::-webkit-scrollbar { display: none; }
.mosaic:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }
.mosaic .tile { flex: 0 0 25vw; }
.carousel__btn {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: min(190px, 20vw); margin: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; border: 0; color: var(--cream); box-shadow: none;
  transition: opacity 200ms var(--ease);
}
.carousel__btn--prev { left: 0; justify-content: flex-start; padding-left: 26px; background: linear-gradient(to right, rgba(16, 33, 58, 0.92), rgba(16, 33, 58, 0.55) 45%, rgba(16, 33, 58, 0)); }
.carousel__btn--next { right: 0; justify-content: flex-end; padding-right: 26px; background: linear-gradient(to left, rgba(16, 33, 58, 0.92), rgba(16, 33, 58, 0.55) 45%, rgba(16, 33, 58, 0)); }
.carousel__btn svg { width: 36px; height: 36px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); transition: transform 160ms var(--ease); }
.carousel__btn--prev:hover svg { transform: translateX(-4px); }
.carousel__btn--next:hover svg { transform: translateX(4px); }
.carousel__btn:hover { background-color: transparent; }
.carousel__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }
@media (max-width: 900px) {
  .mosaic .tile { flex-basis: 50vw; }
  .carousel__btn { width: 84px; }
  .carousel__btn--prev { padding-left: 12px; }
  .carousel__btn--next { padding-right: 12px; }
  .carousel__btn svg { width: 30px; height: 30px; }
}

/* the carousel casts a soft shadow onto the squared paper above and below it */
.carousel { box-shadow: 0 -4px 16px rgba(11, 26, 51, 0.16), 0 12px 28px rgba(11, 26, 51, 0.3); }

/* a shorter row: seven tiles across on a desktop screen, three on a phone */
.mosaic .tile { flex: 0 0 calc(100vw / 7); }
@media (max-width: 900px) { .mosaic .tile { flex-basis: calc(100vw / 3); } }

/* media: the demo form follows the carousel closely */
.mosaic-wrap { padding: 40px 0 8px; }
.mosaic-wrap + .demo { padding-top: 28px; padding-bottom: 80px; }

/* overview tagline: the two key words are bold and larger */
.mission-card .vision--tag strong { font-weight: 700; font-size: 1.3em; color: var(--ink); letter-spacing: -0.005em; }

/* overview card, new typographic layout: left-aligned, an editorial headline, a tagline with big key
   words, and the mission set as a typed note with its label picked out */
.mission-card { text-align: left; padding: 56px 72px 60px 112px; }
.mission-card .eyebrow--centred { text-align: left; justify-content: flex-start; margin-bottom: 22px; }
.mission-card .mission { font-size: 2.05rem; line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; max-width: 21em; text-wrap: balance; }
.mission-card .mission .hl { font-style: normal; color: var(--sky-ink); }
.mission-card .vision { max-width: none; margin-inline: 0; }
.mission-card .vision--tag { margin-top: 26px; font-size: 1.1875rem; color: var(--ink-soft); }
.mission-card .vision--tag strong { font-size: 1.5em; }
.mission-card .rule { margin: 30px 0 0; width: 72px; }
.mission-card .vision--mission { margin-top: 26px; max-width: 46em; font-family: var(--hand); font-size: 1rem; line-height: 1.75; color: var(--ink); }
.mission-card .vision--mission .lead { font-family: var(--font); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sky-ink); margin-right: 4px; }
@media (max-width: 900px) { .mission-card { padding: 40px 28px 44px 72px; } .mission-card .mission { font-size: 1.5rem; } }

/* overview: the big note slides in from the left; a smaller note (the tagline) follows from the right and
   settles half over the big note's right edge */
.mission-card .vision--mission { margin-top: 30px; }
.mission-card .rule { margin-top: 34px; }
.note-pop {
  position: absolute; left: 520px; top: 84px; width: 224px; padding: 22px 22px 24px; text-align: center; z-index: 3;
  transform: rotate(2.2deg); box-shadow: 0 1px 2px rgba(11, 26, 51, 0.12), 0 14px 34px rgba(11, 26, 51, 0.32);
}
.note-pop p { margin: 0; font-size: 1.0625rem; line-height: 1.3; font-weight: 500; color: var(--ink-soft); }
.note-pop strong { display: block; font-size: 1.55rem; line-height: 1.12; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.note-pop .tape { left: 50%; margin-left: -34px; top: -12px; }
html:not(.no-js) .mission-card[data-slide] { opacity: 0; transform: translateX(-115vw) rotate(-3deg); transition: transform 1100ms cubic-bezier(.2, .75, .2, 1), opacity 500ms ease; }
html:not(.no-js) .note-pop[data-slide] { opacity: 0; transform: translateX(70vw) rotate(9deg); transition: transform 1000ms cubic-bezier(.2, .75, .2, 1) 650ms, opacity 500ms ease 650ms; }
html:not(.no-js) .mission-card[data-slide].in-view { opacity: 1; transform: none; }
html:not(.no-js) .note-pop[data-slide].in-view { opacity: 1; transform: rotate(2.2deg); }
@media (max-width: 1000px) {
  .note-pop { position: relative; left: auto; top: auto; width: auto; max-width: 300px; margin: 26px 0 0 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) .mission-card[data-slide], html:not(.no-js) .note-pop[data-slide] { opacity: 1; transition: none; }
  html:not(.no-js) .mission-card[data-slide] { transform: none; }
  html:not(.no-js) .note-pop[data-slide] { transform: rotate(2.2deg); }
}

/* small note: sits over the right edge of the big one (where the owner marked it), 300px wide */
.note-pop { left: auto; right: calc(-1 * min(179px, (100vw - 860px) / 2 - 16px)); top: 118px; width: 300px; padding: 26px 26px 28px; }
.note-pop p { font-size: 1.25rem; }
.note-pop strong { font-size: 2.05rem; }
.mission-card .mission { max-width: 17.5em; }
@media (max-width: 1000px) { .note-pop { right: auto; width: auto; max-width: 320px; } }

/* overview: one typeface throughout (no typewriter), smaller type, a lighter shadow on the small note */
.mission-card .mission { font-size: 1.6rem; max-width: 18em; }
.mission-card .vision--mission { font-family: var(--font); font-size: 0.9375rem; line-height: 1.7; font-weight: 400; max-width: 44em; }
.mission-card .vision--mission .lead { font-size: 0.75rem; }
.note-pop { width: 262px; padding: 22px 22px 24px; box-shadow: 0 1px 2px rgba(11, 26, 51, 0.08), 0 6px 14px rgba(11, 26, 51, 0.14); }
.note-pop p { font-size: 1rem; }
.note-pop strong { font-size: 1.6rem; }
.note-pop { right: calc(-1 * min(150px, (100vw - 860px) / 2 - 16px)); }
@media (max-width: 900px) { .mission-card .mission { font-size: 1.3rem; } }
@media (max-width: 1000px) { .note-pop { right: auto; width: auto; max-width: 280px; } }

/* the big overview note is static now; only the small note travels */
html:not(.no-js) .mission-card[data-slide] { opacity: 1; transform: none; transition: none; }
html:not(.no-js) .note-pop[data-slide] { transition: transform 1000ms cubic-bezier(.2, .75, .2, 1) 150ms, opacity 500ms ease 150ms; }

/* big overview note: regular weight throughout, only "part of the adventure" is bold */
.mission-card .mission { font-weight: 400; letter-spacing: -0.01em; }
.mission-card .mission .hl { font-weight: 700; }
.mission-card .vision--mission .lead { font-weight: 500; }

/* the small note's bold words share the headline highlight's blue */
.note-pop strong { color: var(--sky-ink); }

/* small overview note: only the faintest shadow */
.note-pop { box-shadow: 0 1px 2px rgba(11, 26, 51, 0.07), 0 2px 6px rgba(11, 26, 51, 0.05); }

/* (the water's generic ".tide .paper" shadow was winning over the rules above; this one is more specific) */
.tide .paper.note-pop, .on-water .paper.note-pop { box-shadow: 0 1px 2px rgba(11, 26, 51, 0.07), 0 2px 6px rgba(11, 26, 51, 0.05); }

/* small overview note: a thin black line floating just outside its edge */
.note-pop { outline: 1px solid #111; outline-offset: 5px; }

/* the black line sits inside the note instead, just within its edge */
.note-pop { outline: 0; }
.note-pop::after { content: ""; position: absolute; inset: 6px; border: 1px solid #111; pointer-events: none; }

/* small overview note: shadow nudged up a little */
.tide .paper.note-pop, .on-water .paper.note-pop { box-shadow: 0 1px 2px rgba(11, 26, 51, 0.1), 0 4px 10px rgba(11, 26, 51, 0.11); }

/* who it's for, four boxes: the 30ft – 80ft figure now lives in box 2 (and still counts up) */
.tree { height: 660px; }
.tree__node--1 { left: 0; top: 0; width: 62%; }
.tree__node--2 { right: 0; top: 27%; width: 52%; }
.tree__node--3 { left: 6%; top: 54%; width: 56%; }
.tree__node--4 { right: 0; top: 78%; width: 56%; }
.tree__fig { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.tree__lines #treeLine1, .tree__lines #treeLine2, .tree__lines #treeLine3 { stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); }
.tree.is-in #treeLine3 { animation: tree-draw 460ms var(--ease) 1620ms forwards; }
@media (prefers-reduced-motion: reduce) { .tree__lines #treeLine3 { stroke-dashoffset: 0; animation: none; } }
@media (max-width: 900px) { .tree { height: auto; } .tree__node--4 { position: static; width: auto; } }

/* back to three boxes */
.tree { height: 560px; }
.tree__node--1 { left: 0; top: 0; width: 62%; }
.tree__node--2 { right: 0; top: 32%; width: 52%; }
.tree__node--3 { left: 6%; top: 66%; width: 60%; }

/* what-we-do cards: the orange button no longer jumps on hover.
   1) .btn-primary:hover set transform: translateY(-1px), which replaced the button's translateX(-50%)
      centring and threw it half its width to the right while the pointer was on it; keep the centring.
   2) the card lifts 3px on hover, which could slide the button out from under a pointer resting on its
      lower edge (hover lost, card drops, hover regained... a flicker); an invisible skirt under the
      button keeps the pointer on it through the lift. */
.ecard .ecard__btn, .ecard .ecard__btn:hover { transform: translateX(-50%); }
.ecard__btn::after { content: ""; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -14px; }

/* who it's for, box 1 as a bulleted list */
.tree__list { margin: 0; padding: 0 0 0 1.15em; list-style: disc; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }
.tree__list li { padding-left: 2px; }
.tree__list li + li { margin-top: 2px; }
.tree__list li::marker { color: var(--sky-ink); }
.tree { height: 620px; }
.tree__node--2 { top: 35%; }
.tree__node--3 { top: 70%; }

/* box 1: the four bullets in two columns, so the box is shorter */
.tree__list { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 2.2em; row-gap: 2px; padding-left: 1.15em; list-style: disc; }
.tree__list li + li { margin-top: 0; }
.tree { height: 560px; }
.tree__node--2 { top: 32%; }
.tree__node--3 { top: 66%; }
.tree__node--1 { width: 52%; }

/* box 3: a single-column bulleted list */
.tree__list.tree__list--one { display: block; }
.tree__list.tree__list--one li + li { margin-top: 2px; }

.tree__lead { display: block; margin-bottom: 4px; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.tree { height: 610px; }
.tree__node--3 { top: 67%; }
.tree { height: 650px; }

/* box 3 in two columns as well */
.tree__node--3 { width: 80%; }
.tree__list.tree__list--one { display: grid; grid-template-columns: repeat(2, auto); grid-auto-flow: column; grid-template-rows: repeat(3, auto); justify-content: start; column-gap: 2em; row-gap: 2px; }
.tree { height: 590px; }
.tree__node--3 { top: 68%; }

/* box 3: flowing columns, so each column keeps its own natural row heights */
.tree__node--3 { width: 92%; left: 0; }
.tree__list.tree__list--one { display: block; columns: 2; column-gap: 2em; }
.tree__list.tree__list--one li { break-inside: avoid; }
.tree { height: 560px; }
.tree__node--3 { top: 68%; }

/* fly-in sections: [data-fly] pieces enter from the left or right edge of the screen (see the script in index.html) */
html:not(.no-js) [data-fly] { opacity: 0; transition: transform 1000ms cubic-bezier(.2, .75, .2, 1), opacity 500ms ease; }
html:not(.no-js) [data-fly="left"] { transform: translateX(-110vw); }
html:not(.no-js) [data-fly="right"] { transform: translateX(110vw); transition-delay: 200ms; }
html:not(.no-js) [data-fly].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html:not(.no-js) [data-fly] { opacity: 1; transform: none; transition: none; } }

/* left and right partners start and stop together: same duration, same easing, no stagger */
html:not(.no-js) [data-fly="right"], html:not(.no-js) [data-fly="left"] { transition: transform 1000ms cubic-bezier(.2, .75, .2, 1), opacity 500ms ease; transition-delay: 0ms; }

/* who it's for: box 1 flies in with the heading; the arrows draw and boxes 2 and 3 simply appear, in turn, once
   the tree is switched on (700ms after the heading and box 1 start) */
.tree[data-stagger].is-in > .tree__node--1 { animation: none; }
@keyframes tree-appear { from { opacity: 0; } to { opacity: 1; } }
.tree.is-in > .tree__node--2 { animation: tree-appear 320ms ease both; animation-delay: 480ms; }
.tree.is-in > .tree__node--3 { animation: tree-appear 320ms ease both; animation-delay: 1500ms; }
.tree.is-in #treeLine1 { animation-delay: 0ms; }
.tree.is-in #treeLine2 { animation-delay: 1000ms; }

/* download the app: the two stores as a short list, and the two buttons */
.store-list { margin: 14px 0 0; padding-left: 1.2em; list-style: disc; line-height: 1.7; }
.store-list li::marker { color: var(--sky-ink); }
.store-list a { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.store-list a:hover { color: var(--orange-dark); }
.download__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }

/* "See pricing" button: .btn-primary:hover used to replace its translateX(-50%) centring and threw it sideways
   (the same fault the What-we-do buttons had); the centring is kept on hover now */
.frame .frame__btn, .frame .frame__btn:hover { transform: translateX(-50%); }
.frame__btn::after { content: ""; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -12px; }
/* pricing copy: the "Includes:" list */
.price__incl-h { margin-top: 26px; font-weight: 700; }
.price__list { margin: 8px 0 0; padding-left: 1.2em; list-style: disc; line-height: 1.7; }
.price__list li::marker { color: var(--sky-ink); }
.price__big small { font-size: 0.22em; }

/* pricing copy order: Includes list first, the subscription note beneath it */
.price__copy .price__incl-h { margin-top: 0; }
.price__copy .price__note { margin-top: 22px; }

/* the demo band flies its box in from the right, so it needs to clip sideways like the other sections */
.demo { overflow-x: clip; }

/* feature pages: a short list under the lede; a navy box whose left end runs off the page (like the eyebrow tab) */
.head-list { margin-top: 28px; }
.navy-box { position: relative; background: var(--navy); color: var(--cream); padding: 44px 56px 44px 0; max-width: 62%; }
.navy-box::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: var(--navy); }
.navy-box .eyebrow { color: var(--cream); opacity: .75; }
.navy-box p + p { margin-top: 14px; }
.navy-box p:not(.eyebrow) { font-size: 1.125rem; line-height: 1.6; max-width: 56ch; }
@media (max-width: 900px) { .navy-box { max-width: none; padding-right: 24px; } }
.head-list + .navy-box { margin-top: 32px; max-width: none; padding: 32px 40px 32px 0; }
.head-list + .navy-box + .section-more { margin-top: 32px; }
.page-head .lede + .lede { margin-top: 16px; }
.lede + .navy-box--head { margin-top: 32px; max-width: none; padding: 32px 40px 32px 0; }
.navy-box--head + .section-more { margin-top: 32px; }

/* nav: "Download the App" outline button beside Request a Demo (nav is navy, so a cream outline) */
.nav-cta--download { color: var(--cream); border-color: var(--cream); margin-right: -14px; }
.nav-cta--download:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.head-list--prose p:not(.eyebrow) { margin-top: 10px; color: var(--ink-soft); }
.head-list + .head-list--prose { margin-top: 24px; }
.head-list--prose + .section-more { margin-top: 28px; }

/* pricing: "What this includes" groups, two columns */
.incl-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; margin-top: 32px; }
.incl-groups .h-card { margin-bottom: 12px; }
.incl-groups .plain-list li strong { font-weight: 600; }
@media (max-width: 900px) { .incl-groups { grid-template-columns: 1fr; } }
.incl-box { margin-top: 28px; padding: 48px 56px 52px; }
.incl-box .lede { margin: 0 0 8px; }
.incl-box .incl-groups { margin-top: 28px; }
@media (max-width: 900px) { .incl-box { padding: 32px 24px 36px; } }

/* pricing: centred price box with the "What this includes" panel attached beneath it */
.page-head--stack .price-stack { width: min(100%, 760px); margin: 48px auto 0; }
.page-head--stack .frame--price-page { width: 100%; margin: 0; }
.incl-box { margin: 0; padding: 36px 44px 40px; border-top: 0; }
.incl-box .lede { margin: 6px 0 18px; }
.incl-group { border-top: 1px solid var(--cream-deep); }
.incl-group:last-child { border-bottom: 1px solid var(--cream-deep); }
.incl-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.incl-group summary::-webkit-details-marker { display: none; }
.incl-group summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--orange); }
.incl-group[open] summary::after { content: "\2212"; }
.incl-group .plain-list { padding-bottom: 12px; }
.incl-group .plain-list li:first-child { border-top: 0; }
@media (max-width: 900px) { .incl-box { padding: 28px 20px 32px; } }

/* pricing: navy "What this includes" panel */
.incl-box { background: var(--navy); color: var(--cream); box-shadow: 0 18px 40px rgba(11, 26, 51, 0.28); }
.incl-box .eyebrow { color: #fff; font-size: 1.125rem; font-weight: 700; letter-spacing: 0.18em; }
.incl-box .lede { color: var(--cream); }
.incl-box .h-card, .incl-box summary { color: #fff; }
.incl-group { border-top-color: rgba(241, 237, 228, 0.28); }
.incl-group:last-child { border-bottom-color: rgba(241, 237, 228, 0.28); }
.incl-box .plain-list li { border-color: rgba(241, 237, 228, 0.2); color: var(--cream); }
.incl-box .plain-list li::before { border-color: var(--cream); }
.incl-box .plain-list li strong { color: #fff; }
.page-head--stack .price-stack { margin-top: 36px; }
/* pricing: collapsible rows use a downward chevron instead of a plus */
.incl-group summary::after { content: ""; width: 9px; height: 9px; margin: -4px 6px 0 0; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(45deg); transition: transform 200ms ease; flex: none; }
.incl-group[open] summary::after { content: ""; margin-top: 4px; transform: rotate(-135deg); }
/* pricing panel: no divider lines between the points inside an open group */
.incl-box .plain-list li, .incl-box .plain-list li:first-child { border: 0; }
.incl-box .plain-list li strong { display: block; }
.incl-box .incl-desc { display: block; margin-top: 2px; opacity: .85; }
.page-head--stack .cancel-card { margin-top: 28px; padding: 32px 44px 34px; }
.cancel-card .h-card { margin-bottom: 10px; }
.cancel-card p { margin: 0; }
.cancel-card { background: var(--orange); color: #fff; }
.cancel-card .h-card, .cancel-card p { color: #fff; }

/* pricing: the hermit crab sits on the price box's top-right corner, its shell saying what is included */
.page-head--stack .frame--price-page { overflow: visible; }
.price-crab { position: absolute; right: -64px; top: -78px; width: 290px; transform: rotate(-4deg); pointer-events: none; text-align: left; }
.price-crab img { display: block; width: 100%; height: auto; }
.price-crab__t { position: absolute; left: 49%; top: 24%; width: 30%; color: var(--cream); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; text-align: center; }
@media (max-width: 900px) { .price-crab { width: 170px; right: -16px; top: -52px; } .price-crab__t { font-size: 0.45rem; } }
.price-crab { right: -120px; top: -165px; width: 460px; }
.price-crab__t { left: 50%; top: 26%; width: 27%; font-size: 0.8rem; }
.price-crab__t { left: 48%; top: 25%; width: 31%; font-size: 0.92rem; line-height: 1.25; }

/* pricing crab: smaller, lettering follows the shell's curve (inline SVG textPath) */
.price-crab { right: -84px; top: -112px; width: 380px; }
.price-crab svg { display: block; width: 100%; height: auto; overflow: visible; }
.price-crab__t { fill: var(--cream); font: 700 19px/1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 1.6px; }
/* pricing page: tighter stack so the price box, panel and Cancellation card sit together on one screen */
.page-head--stack { padding-top: 104px; padding-bottom: 40px; }
.page-head--stack .price-stack { margin-top: 18px; }
.page-head--stack .frame--price-page { padding: 26px 34px 20px; }
.page-head--stack .price__big { font-size: 3.75rem; margin: 4px 0 2px; }
.incl-box { padding: 22px 40px 20px; }
.incl-box .eyebrow { margin-bottom: 4px; }
.incl-box .lede { margin: 2px 0 12px; font-size: 1rem; }
.incl-group summary { padding: 11px 0; }
.page-head--stack .cancel-card { margin-top: 14px; padding: 20px 40px 22px; }
.cancel-card .h-card { margin-bottom: 6px; }
.price-crab__t { font-size: 17px; letter-spacing: 1.3px; }

/* pricing: single curved line of lettering on the shell; Download App button; Cancellation on the page background */
.price-crab__t { font-size: 12px; letter-spacing: 0.7px; }
.price-download { display: flex; justify-content: center; width: 100%; margin-top: 18px; }
.cancel-card, .page-head--stack .cancel-card { background: transparent; box-shadow: none; color: var(--ink); margin-top: 8px; }
.cancel-card .h-card { color: var(--navy); }
.cancel-card p { color: var(--ink-soft); }
/* pricing panel: compact points so an open group fits on screen */
.incl-box .plain-list li { padding: 6px 0 6px 26px; line-height: 1.35; }
.incl-box .plain-list li::before { top: 12px; }
.incl-box .incl-desc { margin-top: 0; font-size: 0.95rem; }
.incl-group .plain-list { padding-bottom: 8px; }
.page-head--stack .price__sub { margin-top: 8px; font-size: 1.125rem; font-weight: 700; letter-spacing: 0.14em; color: var(--navy); }
.price-crab__w { fill: var(--cream); font: 700 12px/1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0.8px; }
.price-crab__w { font-size: 10px; letter-spacing: 0.6px; }
.price-crab__w { font-size: 9.5px; letter-spacing: 0.5px; }
.price-crab__w { font-size: 9px; letter-spacing: 0.5px; }
.price-crab__w { font-size: 12.5px; letter-spacing: 0.5px; }

/* pricing: the whole price stack, one step larger (width, type, spacing, crab) */
.page-head--stack .price-stack { width: min(100%, 940px); margin-top: 28px; }
.page-head--stack .frame--price-page { padding: 34px 40px 28px; }
.page-head--stack .price__big { font-size: 5rem; }
.page-head--stack .price__sub { font-size: 1.45rem; margin-top: 10px; }
.price-crab { width: 470px; right: -104px; top: -140px; }
.incl-box { padding: 30px 52px 28px; }
.incl-box .eyebrow { font-size: 1.4rem; margin-bottom: 6px; }
.incl-box .lede { font-size: 1.25rem; margin: 4px 0 16px; }
.incl-group summary { padding: 15px 0; font-size: 1.3rem; }
.incl-group summary::after { width: 11px; height: 11px; }
.incl-box .plain-list li { padding: 8px 0 8px 30px; }
.incl-box .plain-list li::before { top: 16px; width: 13px; height: 13px; }
.incl-box .plain-list li strong { font-size: 1.15rem; }
.incl-box .incl-desc { font-size: 1.05rem; }
.price-download { margin-top: 22px; padding: 22px 30px; font-size: 1.1rem; }
.page-head--stack .cancel-card { margin-top: 18px; padding: 22px 52px 26px; }
.cancel-card .h-card { font-size: 1.4rem; margin-bottom: 8px; }
.cancel-card p { font-size: 1.2rem; line-height: 1.55; }
@media (max-width: 900px) { .price-crab { width: 230px; right: -16px; top: -70px; } .incl-box, .page-head--stack .cancel-card { padding-left: 22px; padding-right: 22px; } .page-head--stack .price__big { font-size: 3.75rem; } }
/* pricing: the crab keeps its earlier size */
.price-crab { width: 380px; right: -84px; top: -112px; }
@media (max-width: 900px) { .price-crab { width: 230px; right: -16px; top: -70px; } }

/* set-up page: five steps down the page, then the sign-off in a navy box */
.setup-steps { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.setup-step { padding: 34px 0 32px; border-top: 1px solid var(--cream-deep); }
.setup-step:last-child { border-bottom: 1px solid var(--cream-deep); }
.setup-step__tag { margin: 0 0 10px; }
.setup-step__h { margin: 0 0 14px; font-size: 1.5rem; line-height: 1.25; }
.setup-step p:not(.eyebrow) { font-size: 1.125rem; line-height: 1.65; color: var(--ink-soft); }
.setup-step p + p { margin-top: 14px; }
.setup-close { margin-top: 48px; max-width: 760px; padding: 36px 56px 36px 0; }
.setup-close__t { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.35; color: #fff; margin: 0; }
@media (max-width: 900px) { .setup-close { padding-right: 24px; max-width: none; } }

/* set-up page: each step is an outlined box with a strip of squared paper, like the home page's three core areas */
.setup-steps { max-width: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; }
.setup-step { grid-column: span 2; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); padding: 52px 34px 40px; text-align: left; }
.setup-step:last-child { border-bottom: 1px solid var(--navy); }
.setup-step:nth-child(4) { grid-column: 2 / span 2; }
.setup-step:nth-child(5) { grid-column: 4 / span 2; }
.setup-step.strip--left { padding-left: 74px; }
.setup-step:hover { transform: none; background: rgba(255, 255, 255, 0.35); }
.setup-step__tag { margin-bottom: 14px; }
.setup-step__h { font-size: 1.125rem; }
.setup-step p:not(.eyebrow):not(.ecard__n) { font-size: 1rem; line-height: 1.6; }
@media (max-width: 900px) { .setup-steps { grid-template-columns: 1fr; } .setup-step, .setup-step:nth-child(4), .setup-step:nth-child(5) { grid-column: auto; } .setup-step.strip--left { padding-left: 64px; } }
.setup-step__tag { letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; }

/* set-up page: boxes in one column on the left, a phone on the right (sticks while you read) */
.setup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: start; }
.setup-steps { display: flex; flex-direction: column; gap: 32px; max-width: none; }
.setup-step, .setup-step:nth-child(4), .setup-step:nth-child(5) { grid-column: auto; }
.setup-step.strip--left { padding-left: 82px; }
.setup-step__sub { font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.setup-step__h { text-transform: uppercase; }
.setup-phone { position: sticky; top: 120px; justify-self: center; }
@media (max-width: 1000px) { .setup-layout { grid-template-columns: 1fr; gap: 48px; } .setup-phone { position: static; } }

/* feature pages: a small arrow at the right edge flicks to the next feature */
.feature-flick { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 40; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--navy); border-radius: 50%; background: var(--cream); color: var(--navy); box-shadow: 0 6px 18px rgba(11, 26, 51, 0.18); transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease); }
.feature-flick svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature-flick:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-50%) translateX(3px); }
@media (max-width: 900px) { .feature-flick { right: 12px; top: auto; bottom: 18px; transform: none; } .feature-flick:hover { transform: none; } }
.feature-flick { right: 58px; }
@media (max-width: 900px) { .feature-flick { right: 12px; } }

/* feature pages: the next-feature arrow lives inside the phone, so it flies in with it and never floats up or down */
.phone { position: relative; }
.phone .feature-flick { position: absolute; right: auto; left: calc(100% + 36px); top: 50%; margin-top: -24px; transform: none; bottom: auto; }
.phone .feature-flick:hover { transform: translateX(3px); }
@media (max-width: 900px) { .phone .feature-flick { left: 50%; top: auto; bottom: -70px; margin: 0 0 0 -24px; } .phone .feature-flick:hover { transform: none; } }
/* the Next feature button carries the same soft shade as the arrow */
.section-more .btn-ghost { background: var(--cream); box-shadow: 0 6px 18px rgba(11, 26, 51, 0.18); }
.section-more .btn-ghost:hover { background: var(--orange); }
.phone__body .feature-flick { position: absolute; right: auto; bottom: auto; left: calc(100% + 36px); top: 50%; margin-top: -24px; transform: none; z-index: 3; }
.phone__body .feature-flick:hover { transform: translateX(3px); }
@media (max-width: 900px) { .phone__body .feature-flick { left: 50%; top: auto; bottom: -70px; margin: 0 0 0 -24px; } .phone__body .feature-flick:hover { transform: none; } }
.footer__addr { display: block; margin-top: 6px; }

/* set-up page: Support section, four boxes in two columns */
.support__h { margin-top: 0; }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.support-grid .setup-step.strip--left { padding-left: 74px; }
.support-list { list-style: none; margin: 0; padding: 0; }
.support-list li { padding: 5px 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.support-list strong { color: var(--ink); }
.setup-step a { text-decoration: underline; }
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } }

/* support: three boxes in a row */
.support-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.support-grid .setup-step { padding-top: 56px; }
.support-grid .setup-step.strip--left { padding-left: 64px; }
@media (max-width: 1000px) { .support-grid { grid-template-columns: 1fr; } }
/* set-up page: all the writing starts at the same left edge, whichever side the strip is on */
.setup-step, .setup-step.strip--left, .setup-step.strip--top, .setup-step.strip--bottom { padding-left: 82px; }
.support-grid .setup-step, .support-grid .setup-step.strip--left, .support-grid .setup-step.strip--top, .support-grid .setup-step.strip--bottom { padding-left: 64px; }
@media (max-width: 900px) { .setup-step, .setup-step.strip--left, .setup-step.strip--top, .setup-step.strip--bottom { padding-left: 64px; } }
/* set-up page: the phone follows you down beside the steps (was overridden by the plain .phone rule) */
.setup-layout .setup-phone { position: sticky; top: 110px; align-self: start; }
@media (max-width: 1000px) { .setup-layout .setup-phone { position: static; } }
/* the cream "Next feature" button style belongs to the feature pages' heads only; on the water (home page) the ghost button keeps its own look */
.on-water .section-more .btn-ghost, .section-more--centred .btn-ghost { background: transparent; box-shadow: none; }
.on-water .section-more .btn-ghost:hover, .section-more--centred .btn-ghost:hover { background: var(--orange); }
.incl-group summary { font-size: 1.05rem; }
/* phone width: the crab perches on the box's top edge instead of covering the price */
@media (max-width: 900px) { .price-crab { width: 150px; right: 6px; top: -78px; } .page-head--stack .price-stack { margin-top: 70px; } }

/* ---------- phone-width polish (home page) ---------- */
@media (max-width: 600px) {
  /* 1. "modus [marine]" stays on one line, whichever word is showing */
  .hero__wordmark { white-space: nowrap; font-size: clamp(1.7rem, 8.2vw, 2.8rem); letter-spacing: -0.03em; }
  .hero__tag { font-size: 0.8125rem; letter-spacing: 0.24em; }
  /* 2. the two hero buttons share one line */
  .hero__cta { flex-wrap: nowrap; gap: 10px; }
  .hero__cta .btn { flex: 1 1 0; min-width: 0; padding: 14px 10px; font-size: 0.7rem; letter-spacing: 0.1em; text-align: center; white-space: nowrap; }
  /* 3. no small note, and a snugger Overview box */
  .note-pop { display: none; }
  .mission-card { padding: 44px 22px 40px 22px; }
  .mission-card.strip--left { padding-left: 58px; }
  .mission-card.strip--left::before { left: 14px; width: 26px; }
  .mission-card .mission { font-size: 1.1rem; line-height: 1.4; }
  .mission-card .vision { font-size: 0.9375rem; }
  .mission-card__crab { width: 84px; right: -8px; bottom: -30px; }
}

/* ---------- phone-width polish, round 2 (home page) ---------- */
@media (max-width: 900px) {
  /* the torn water edge keeps its natural proportions (a wide drawing centred behind the phone), so it reads as smooth as on the laptop */
  .crest { left: 50%; right: auto; width: 1200px; transform: translateX(-50%); height: 70px; }
  /* the "At anchor" box carries its squared paper on to the edge of the screen */
  .who .frame--wide { position: relative; isolation: isolate; }
  .who .frame--wide::after { content: ""; position: absolute; top: -1px; bottom: -1px; left: 100%; width: 100vw; z-index: -1; background: var(--cream) url("assets/grid-paper.jpg") center top / 280px auto repeat; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }
}
@media (max-width: 600px) {
  /* no mission paragraph on the phone */
  .mission-card .rule, .mission-card .vision { display: none; }
  /* Who it's for: smaller type, and the three boxes staggered as on the laptop */
  .tree { gap: 16px; }
  .tree__node { padding: 14px 16px 16px; }
  .tree__node--1 { width: 84%; margin-right: auto; }
  .tree__node--2 { width: 78%; margin-left: auto; }
  .tree__node--3 { width: 90%; margin-left: 5%; left: auto; }
  .tree__node .tree__t, .tree__list, .tree__lead { font-size: 0.875rem; line-height: 1.45; }
  .tree__node .tree__fig { font-size: 1.5rem; }
  .tree__list { column-gap: 1.2em; }
  .tree__list.tree__list--one { columns: 1; display: block; }
}
@media (max-width: 900px) { .tree { height: auto; } .tree__node { height: auto; } }

/* phone: "Who it's for" boxes shrink to fit their words */
@media (max-width: 600px) {
  .tree__node { padding: 12px 16px 14px; }
  .tree__node--1 { width: fit-content; margin-right: auto; }
  .tree__node--2 { width: fit-content; margin-left: auto; }
  .tree__node--3 { width: fit-content; margin-left: 5%; }
  .tree__node--3 .tree__list li:nth-child(3) { display: none; }   /* "An aim to understand their boats" is left off the phone */
}

/* phone: the connecting arrows come back (drawn between the staggered boxes by script.js) */
@media (max-width: 600px) {
  .tree__lines { display: block; }
  .tree__lines .tree__stat, .tree__lines #statArc { display: none; }
  .tree__node--2 { min-width: 11.4rem; }
}

/* phone: the first screen is the hero alone, with only the first wave of the ocean showing at its foot; the Overview card waits on the water below */
@media (max-width: 600px) {
  .hero { min-height: calc(100svh - 64px); display: flex; align-items: center; padding-bottom: 72px; }
  .hero__grid { width: calc(100% - 40px); }
}

/* phone: the hero keeps the laptop's shape: the ocean photo sweeping in from the top, cut by the same flowing curve */
@media (max-width: 600px) {
  .hero__water, .hero__edge { display: block; }
  .hero { align-items: flex-end; padding-bottom: 110px; }
}

/* phone: the hero's curve is drawn on a box twice the phone's width (centred), so its bumps stretch out flat instead of being squeezed tall */
@media (max-width: 600px) {
  .hero__water, .hero__edge { inset: 0 auto 0 -50%; width: 200%; height: 100%; }
}

/* phone: the pale outline traced along every cut edge (hero shape and the water crests) is left off */
@media (max-width: 600px) {
  .hero__edge { display: none; }
  .crest .crest__foam, .crest .crest__foam2 { display: none; }
}

/* ---------- phone-width polish, round 3 (home page + every page's demo form and contact strip) ---------- */
.tcards__next { display: none; }
@media (max-width: 600px) {
  /* Overview: a quieter paragraph */
  .mission-card .mission { font-size: 0.95rem; line-height: 1.5; }

  /* What we do: smaller heading and three compact boxes that nearly fit one screen */
  .three__head { margin-bottom: 26px; }
  .three__head .h-display { font-size: 1.4rem; line-height: 1.15; }
  .three__grid { gap: 30px; }
  .ecard { padding: 20px 16px 32px; }
  .ecard.strip--left { padding-left: 54px; }
  .ecard__n { margin-bottom: 6px; font-size: 0.68rem; }
  .ecard__t { margin-bottom: 6px; min-height: 0; font-size: 0.9375rem; line-height: 1.3; }
  .ecard__d { font-size: 0.78rem; line-height: 1.45; }
  .ecard__btn { padding: 8px 14px; font-size: 0.66rem; bottom: -15px; }
  .quicklinks { display: none; }

  /* Features: little tiles, three across */
  .flabels { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
  .flabel > a, .flabel > .flabel__inner { padding: 14px 3px 10px; }
  .flabel svg { width: 20px; height: 20px; margin-bottom: 6px; }
  .flabel span { font-size: 0.58rem; letter-spacing: 0.06em; }
  .flabel .tape { width: 50px; height: 14px; top: -6px; }

  /* Testimonials: smaller cards you slide sideways, with an arrow */
  .tcards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 26px -20px 0; padding: 14px 20px 10px; }
  .tcards::-webkit-scrollbar { display: none; }
  .tcards .tcard { flex: 0 0 76%; scroll-snap-align: start; padding: 24px 18px 18px; transform: none; }
  .tcard__q { font-size: 0.875rem; line-height: 1.5; }
  .tcard__who { margin-top: 16px; padding-top: 12px; font-size: 0.75rem; }
  .tcard__who dd.hand { font-size: 0.875rem; }
  .tcards__next { display: grid; place-items: center; width: 42px; height: 42px; margin: 6px 0 0 auto; border: 1px solid var(--cream); border-radius: 50%; background: rgba(241, 237, 228, 0.12); color: var(--cream); cursor: pointer; }
  .tcards__next svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease; }
  .tcards__next.is-end svg { transform: rotate(180deg); }

  /* the Request a demo box, snugger */
  .demo { padding-top: 56px; padding-bottom: 56px; }
  .demo .paper { padding: 24px 18px 22px; }
  .demo__h { font-size: 1.05rem; line-height: 1.25; margin: 6px 0 12px; }
  .demo .eyebrow { font-size: 0.66rem; }
  .demo-form { gap: 9px; }
  .demo-form input { padding: 10px 12px; font-size: 0.875rem; }
  .demo-form .btn { padding: 12px 14px; font-size: 0.72rem; }

  /* Get in touch strip: one line */
  .touch { padding: 24px 0; }
  .touch__row { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .touch__row .eyebrow { font-size: 0.62rem; letter-spacing: 0.14em; white-space: nowrap; }
  .touch__line { font-size: 0.6rem; letter-spacing: 0.04em; white-space: nowrap; }
}
@media (max-width: 600px) {
  .three__head { margin-bottom: 18px; }
  .three__head .h-display { font-size: 1.25rem; }
  .three__grid { gap: 24px; }
  .ecard { padding: 14px 14px 26px; }
  .ecard.strip--left { padding-left: 50px; }
  .ecard__d { font-size: 0.74rem; line-height: 1.4; }
  .ecard__t { font-size: 0.875rem; }
  #what-we-do { padding-top: 56px; padding-bottom: 36px; }
}

/* testimonials: three dots instead of an arrow (phone only) */
.tcards__dots { display: none; }
@media (max-width: 600px) {
  .tcards__next { display: none; }
  .tcards__dots { display: flex; justify-content: center; gap: 10px; margin-top: 6px; }
  .tcards__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(241, 237, 228, 0.28); cursor: pointer; transition: background-color 250ms ease, transform 250ms ease; }
  .tcards__dots button.is-on { background: #F1EDE4; transform: scale(1.25); }
}

/* phone: a smaller crab for the Get in touch walk, and a one-line, centred footer */
@media (max-width: 600px) {
  .touch-walk { --crab: 150px; }
  .touch-walk.is-armed .touch-crab { bottom: -36px; }
  .footer__inner { justify-items: center; text-align: center; gap: 16px; }
  .footer__brand { grid-column: 1; grid-row: 1; justify-self: center; }
  .footer__links { grid-column: 1; grid-row: 2; justify-self: center; flex-wrap: nowrap; justify-content: center; gap: 0; }
  .footer__links a { font-size: 0.56rem; letter-spacing: 0.05em; white-space: nowrap; display: inline-flex; align-items: center; }
  .footer__links a + a::before { content: "|"; margin: 0 6px; color: rgba(241, 237, 228, 0.45); font-weight: 400; }
  .footer__legal { text-align: center; }
}

/* phone: every paragraph on the home page is the same size (13px) */
@media (max-width: 600px) {
  .mission-card .mission,
  .ecard__d,
  .tree__node .tree__t, .tree__list, .tree__lead,
  .tcard__q, .tcard__q p,
  .demo__sub,
  .download__copy > p:not(.eyebrow):not(.section-more), .store-list, .store-list li,
  .price__list, .price__list li, .price__copy p:not(.eyebrow),
  .todo { font-size: 0.8125rem; line-height: 1.5; }
}

/* ---------- phone: menu button, Request a demo and Contact pages ---------- */
@media (max-width: 600px) {
  /* the menu's Download App button was dark on navy */
  .mobile-menu .btn-ghost { color: var(--cream); border-color: var(--cream); background: transparent; }
  .mobile-menu .btn-ghost:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

  /* quieter paragraphs, and the form in view first */
  .page-head--narrow .lede { font-size: 0.875rem; line-height: 1.5; }
  .page-head--narrow .h-display { font-size: 1.6rem; }
  .h1-dup { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the tab already says it, so the big repeat is left to screen readers */
  .contact-aside p, .contact-aside .eyebrow { font-size: 0.8125rem; line-height: 1.5; }
  .form label { font-size: 0.72rem; }
  .form input, .form textarea { font-size: 0.875rem; }

  /* Request a demo: "What happens next" sits above the photo */
  .contact-aside { display: flex; flex-direction: column; }
  .contact-aside .frame { order: 2; margin: 22px 0 0; }
  /* Contact: the form comes first, the photo underneath */
  .contact--flip > .paper { order: -1; }
  .contact-water { padding-top: 70px; }
  .contact-water .contact { gap: 28px; }
}
@media (max-width: 600px) { .page-head--narrow { padding: calc(var(--nav-h) + 22px) 0 24px; } .page-head--narrow .eyebrow--tab { margin-bottom: 16px; } }

/* phone: Download App is the orange one in the menu; Request a Demo the outline. No photos on the Contact and Request a demo pages (they live in the Media gallery) */
@media (max-width: 600px) {
  .contact-aside .frame { display: none; }
}

/* phone: the last Features tile (Services) sits in the middle column, under Documents */
@media (max-width: 600px) { .flabels > .flabel:last-child { grid-column: 2; } }

/* phone: Services takes Documents' place in the grid and Documents goes to the centred last spot */
@media (max-width: 600px) {
  .flabels > .flabel:last-child { grid-column: auto; }
  .flabels > .flabel:nth-child(1) { order: 1; }
  .flabels > .flabel:nth-child(2) { order: 2; }
  .flabels > .flabel:nth-child(3) { order: 3; }
  .flabels > .flabel:nth-child(4) { order: 4; }
  .flabels > .flabel:nth-child(5) { order: 13; }
  .flabels > .flabel:nth-child(6) { order: 6; }
  .flabels > .flabel:nth-child(7) { order: 7; }
  .flabels > .flabel:nth-child(8) { order: 8; }
  .flabels > .flabel:nth-child(9) { order: 9; }
  .flabels > .flabel:nth-child(10) { order: 10; }
  .flabels > .flabel:nth-child(11) { order: 11; }
  .flabels > .flabel:nth-child(12) { order: 12; }
  .flabels > .flabel:nth-child(13) { order: 5; }
  .flabels > .flabel:nth-child(5) { grid-column: 2; }
}

/* ---------- phone: the Request a demo form sits on the ocean, like the Contact page; the Contact form sits higher ---------- */
.contact-section .crest, .contact-section .photo-credit { display: none; }
@media (max-width: 600px) {
  .contact-section--water { position: relative; isolation: isolate; color: var(--cream); background: var(--navy) url("assets/water-ripple.jpg") center 60% / cover no-repeat; padding: 56px 0 40px; }
  .contact-section--water::before { content: ""; position: absolute; inset: 0; background: rgba(12, 28, 58, 0.22); z-index: -1; }
  .contact-section--water .crest, .contact-section--water .photo-credit { display: block; }
  .contact-section--water .crest { height: 40px; }
  .contact-section--water .photo-credit { opacity: 0; }
  .contact-section--water:hover .photo-credit { opacity: 1; transform: none; }
  .contact-section--water .contact-aside .eyebrow, .contact-section--water .contact-aside p { color: var(--cream); }
  .contact-section--water .contact-aside a { color: #fff; }
  /* Contact: tighter above the form so all of it shows */
  .contact-water { padding-top: 46px; }
  .contact-water .crest { height: 40px; }
  .page-head--narrow { padding-bottom: 10px; }
}
@media (max-width: 600px) { .contact-water .form { gap: 14px; } .contact-water .form textarea { min-height: 78px; } .contact-water .paper { padding-top: 26px; padding-bottom: 24px; } }

/* ---------- phone: one paragraph size across the whole site (13px) ---------- */
@media (max-width: 600px) {
  main p:not(.eyebrow):not(.ecard__n):not(.setup-step__tag):not(.setup-step__sub):not(.hero__tag):not(.price__big):not(.price__sub):not(.touch__line):not(.display),
  main li, main dd, main blockquote, .incl-desc { font-size: 0.8125rem; line-height: 1.5; }
  .page-head .lede, .page-head--narrow .lede, .lede { font-size: 0.8125rem; line-height: 1.5; }
  .incl-box .plain-list li strong { font-size: 0.875rem; }
  .incl-box .incl-desc { font-size: 0.8125rem; }
  .setup-step__sub { font-size: 0.8125rem; }
  .plain-list li, .tree__list li, .price__list li, .store-list li { font-size: 0.8125rem; }

  /* Request a demo: "What happens next" rides higher */
  .contact-section--water { padding-top: 44px; }
  .contact-section--water .contact { gap: 14px; }
  .contact-section--water .paper { padding: 24px 18px 20px; }
  .contact-section--water .form { gap: 12px; }
  .contact-section--water .form textarea { min-height: 70px; }
  .contact-section--water .contact-aside .eyebrow { margin-top: 0; }

  /* Set-up & Support: smaller boxes that fit the screen */
  .setup-steps { gap: 16px; }
  .setup-step, .setup-step.strip--left, .setup-step.strip--top, .setup-step.strip--bottom { padding: 34px 14px 16px 46px; }
  .setup-step__tag { margin-bottom: 4px; font-size: 0.64rem; }
  .setup-step__h { font-size: 0.9375rem; margin-bottom: 6px; }
  .support-grid { gap: 16px; margin-top: 24px; }
  .support-grid .setup-step, .support-grid .setup-step.strip--left, .support-grid .setup-step.strip--top, .support-grid .setup-step.strip--bottom { padding: 30px 14px 16px 46px; }
  .setup-layout { gap: 24px; }
}
@media (max-width: 600px) { .section:has(> .setup-layout) { padding-top: 6px; padding-bottom: 36px; } #support { padding-top: 40px; } }

.setup-download { margin: 40px 0 0; text-align: center; }

/* phone: a slimmer Instagram box and bigger gallery photographs */
@media (max-width: 600px) {
  .insta { padding: 9px 14px; gap: 9px; }
  .insta__icon { width: 20px; height: 20px; }
  .insta__t { font-size: 0.62rem; letter-spacing: 0.1em; }
  .mosaic .tile { flex-basis: 64vw; }
  .setup-download { margin-top: 28px; }
}

/* phone, Request a demo: the heading and intro come in from the left; the form and "What happens next" from the right */
@media (max-width: 600px) {
  html:not(.no-js) .contact-section .contact > .paper[data-fly="left"] { transform: translateX(110vw); }
  html:not(.no-js) .contact-section .contact > .paper[data-fly="left"].in-view { transform: none; }
}

/* phone only: a strip of every feature across the top of each feature page, to flick between them */
.feature-strip { display: none; }
@media (max-width: 600px) {
  .feature-strip { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin: 0 0 18px; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); background: rgba(255, 255, 255, 0.35); }
  .feature-strip::-webkit-scrollbar { display: none; }
  .feature-strip a { flex: none; scroll-snap-align: center; padding: 11px 15px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--ink); border-right: 1px solid rgba(20, 41, 74, 0.35); white-space: nowrap; }
  .feature-strip a:last-child { border-right: 0; }
  .feature-strip a[aria-current="page"] { background: var(--navy); color: var(--cream); }
}
@media (max-width: 600px) { .page-head__grid > * { min-width: 0; } .feature-strip { max-width: 100%; width: 100%; } }

/* feature strip: soft shadows at the edges that still have more to swipe to */
.feature-strip-wrap { position: relative; }
@media (max-width: 600px) {
  .feature-strip-wrap { margin: 0 0 18px; }
  .feature-strip-wrap .feature-strip { margin-bottom: 0; }
  .feature-strip-wrap::before, .feature-strip-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 200ms ease; }
  .feature-strip-wrap::before { left: 0; background: linear-gradient(to right, rgba(11, 26, 51, 0.38), rgba(11, 26, 51, 0)); }
  .feature-strip-wrap::after { right: 0; background: linear-gradient(to left, rgba(11, 26, 51, 0.38), rgba(11, 26, 51, 0)); }
  .feature-strip-wrap.can-left::before, .feature-strip-wrap.can-right::after { opacity: 1; }
  .swap-in { animation: swap-in 320ms ease both; }
}
@keyframes swap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* feature strip: a faint arrow on each edge that has more to swipe to */
@media (max-width: 600px) {
  .feature-strip-wrap::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314294A' stroke-opacity='.7' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") no-repeat 6px center / 14px 14px, linear-gradient(to right, rgba(11, 26, 51, 0.38), rgba(11, 26, 51, 0)); }
  .feature-strip-wrap::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314294A' stroke-opacity='.7' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat calc(100% - 6px) center / 14px 14px, linear-gradient(to left, rgba(11, 26, 51, 0.38), rgba(11, 26, 51, 0)); }
}

/* phone: the feature pages' lists sit closer together */
@media (max-width: 600px) {
  .head-list .plain-list li { padding: 7px 0 7px 26px; line-height: 1.4; }
  .head-list .plain-list li::before { top: 12px; width: 10px; height: 10px; }
}

/* phone: a bigger crab on the price box, with larger lettering in its shell */
@media (max-width: 600px) {
  .price-crab { width: 240px; right: 2px; top: -152px; }
  .page-head--stack .price-stack { margin-top: 158px; }
  .price-crab__w { font-size: 13.5px; }
}
@media (max-width: 600px) { .price-crab { top: -134px; } .page-head--stack .price-stack { margin-top: 140px; } }

/* phone, Pricing: the price box and the navy panel fit the first screen */
@media (max-width: 600px) {
  .page-head--stack { padding-top: calc(var(--nav-h) + 6px); }
  .page-head--stack .frame--price-page { padding: 14px 16px 12px; }
  .page-head--stack .price__big { font-size: 3rem; margin: 0; }
  .page-head--stack .price__sub { font-size: 0.95rem; letter-spacing: 0.1em; margin-top: 4px; }
  .incl-box { padding: 16px 20px 12px; }
  .incl-box .eyebrow { font-size: 1.05rem; letter-spacing: 0.12em; margin-bottom: 4px; }
  .incl-group summary { padding: 11px 0; font-size: 0.9rem; }
  .page-head--stack .price-download { margin-top: 12px; padding: 16px 20px; }
}

/* the line under the Pricing tab */
.price-intro { margin: 8px 0 0; max-width: 34em; }
@media (max-width: 600px) { .price-intro { margin-top: 2px; } .page-head--stack .price-stack { margin-top: 118px; } }
@media (max-width: 600px) { .price-intro { white-space: nowrap; } }

/* laptop: keep the hero words on screen on narrower laptops (the -52px nudge only applies when there is room for it) */
@media (min-width: 901px) {
  .hero__copy { margin-left: max(-52px, calc(24px - (100vw - min(var(--container), 100vw - 64px)) / 2)); }
}

/* overview: both paragraphs the same size */
.mission-card .mission, .mission-card .vision--mission { font-size: 1.375rem; line-height: 1.4; max-width: 24em; }
@media (max-width: 600px) { .mission-card .mission, .mission-card .vision--mission { font-size: 1.125rem; } }

/* what we do: two intro paragraphs in place of the heading */
.wwd-intro { max-width: 46em; margin: 26px 0 0; font-size: 1.375rem; line-height: 1.45; color: var(--ink); }
.wwd-intro strong { font-weight: 700; color: var(--navy); }
.wwd-intro--2 { margin-top: 16px; color: var(--ink-soft); }
@media (max-width: 600px) { .wwd-intro { font-size: 1.0625rem; margin-top: 18px; } }
.wwd-intro__rest { color: var(--ink-soft); }

/* overview + what we do: paragraphs centred */
.mission-card .mission, .mission-card .vision--mission { text-align: center; margin-inline: auto; }
.mission-card .rule { margin-inline: auto; }
.wwd-intro { text-align: center; margin-inline: auto; }

/* overview label centred; what-we-do paragraph centred on the page, all bold */
.mission-card .eyebrow--centred { text-align: center; justify-content: center; }
.three__head { max-width: none; width: 100%; }
.wwd-intro { max-width: 46em; margin-inline: auto; font-weight: 700; }
.wwd-intro__rest { font-weight: 700; color: var(--navy); }

/* the "Download App" note */
.app-note { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(11, 26, 51, 0.45); opacity: 0; transition: opacity .2s; }
.app-note[hidden] { display: none; }
.app-note.is-open { opacity: 1; }
.app-note__card { position: relative; max-width: 400px; background: var(--cream); border: 1px solid var(--navy); padding: 34px 30px 28px; box-shadow: 0 14px 34px rgba(11, 26, 51, 0.32); }
.app-note__card p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); text-align: center; }
.app-note__x { position: absolute; top: 4px; right: 8px; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--navy); cursor: pointer; padding: 4px 8px; }
.app-note__card p + p { margin-top: 14px; }
.app-note__link { display: block; width: fit-content; margin: 20px auto 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--navy); padding-bottom: 3px; }
.app-note__card { background: var(--orange); border-color: var(--orange); }
.app-note__card p, .app-note__x { color: #fff; }
.app-note__link { color: #fff; border-bottom-color: #fff; }

/* testimonials: "Upcoming" placeholder, centred and without quote marks */
.tcard__q p::before, .tcard__q p::after { content: none; }
.tcard__q, .tcard__q p { text-align: center; }
.tcard__q p { font-family: inherit; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky-ink); font-weight: 700; line-height: 1.5; }

/* two phones side by side (the Service page): the second sits a little lower, the next-feature arrow follows it */
.phone-pair { display: flex; justify-content: center; align-items: flex-start; gap: 28px; }
.phone-pair .phone__body { width: min(232px, 44vw); border-radius: 36px; padding: 9px; }
.phone-pair .phone__island { top: 20px; width: 72px; height: 19px; }
.phone-pair .phone--second { margin-top: 56px; }
@media (max-width: 900px) { .phone-pair { flex-direction: column; align-items: center; gap: 36px; } .phone-pair .phone__body { width: min(260px, 78vw); } .phone-pair .phone--second { margin-top: 0; } }
.phone-pair .phone__body .feature-flick { left: 50%; top: auto; bottom: -66px; margin: 0 0 0 -24px; }
.phone-pair .phone__body .feature-flick:hover { transform: translateY(3px); }
.phone-pair { padding-bottom: 70px; }

/* the next-feature arrow: the same spot on every feature page — fixed to the window, bottom right */
.phone .feature-flick, .phone__body .feature-flick, .phone-pair .phone__body .feature-flick {
  position: fixed; left: auto; top: auto; right: 22px; bottom: 26px; margin: 0; transform: none; z-index: 40;
}
.phone .feature-flick:hover, .phone__body .feature-flick:hover, .phone-pair .phone__body .feature-flick:hover { transform: translateX(3px); }
.phone-pair { padding-bottom: 0; }
@media (max-width: 900px) { .phone .feature-flick, .phone__body .feature-flick, .phone-pair .phone__body .feature-flick { right: 14px; bottom: 18px; } .phone .feature-flick:hover, .phone__body .feature-flick:hover { transform: none; } }

/* the next-feature arrow: right of the phone, a little below the middle of the window — same spot on every feature page */
@media (min-width: 901px) {
  .phone .feature-flick, .phone__body .feature-flick, .phone-pair .phone__body .feature-flick {
    right: auto; bottom: auto; left: calc(88.8vw - 24px); top: calc(54vh - 24px);
  }
  .phone .feature-flick:hover, .phone__body .feature-flick:hover, .phone-pair .phone__body .feature-flick:hover { transform: translateX(3px); }
  /* the two Service phones stop short of it */
  .phone-pair { justify-content: flex-end; gap: 14px; margin-right: max(0px, calc(13.5vw - (100vw - min(var(--container), 100vw - 64px)) / 2)); }
  .phone-pair .phone__body { width: min(205px, 44vw); border-radius: 32px; padding: 8px; }
  .phone-pair .phone--second { margin-top: 48px; }
}

/* the arrow once it has been lifted out of the phone: same spot on every page, flies in from the right with the phone */
@keyframes flick-in { from { transform: translateX(110vw); opacity: 0; } to { transform: none; opacity: 1; } }
.feature-flick[data-flick] { position: fixed; right: auto; bottom: auto; margin: 0; left: calc(88.8vw - 24px); top: calc(54vh - 24px); opacity: 0; transform: translateX(110vw); }
.feature-flick[data-flick].in-view { opacity: 1; transform: none; animation: flick-in 1000ms cubic-bezier(.2, .75, .2, 1) backwards; }
.feature-flick[data-flick].in-view:hover { transform: translateX(3px); }
@media (max-width: 900px) { .feature-flick[data-flick] { left: auto; top: auto; right: 14px; bottom: 18px; } .feature-flick[data-flick].in-view:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .feature-flick[data-flick].in-view { animation: none; } }

/* home page feature labels: the Modus Marine icon set */
.flabel svg.ico { color: var(--navy); width: 34px; height: 34px; stroke: none; fill: currentColor; }
.flabel svg.ico--line { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.flabel:hover svg.ico, .flabel:target svg.ico { color: #fff; stroke: none; }
.flabel:hover svg.ico--line, .flabel:target svg.ico--line { stroke: currentColor; }

/* next-feature arrow: never on top of the phone. It sits at 88.8vw on wide windows and is pushed right of the phone on narrower ones;
   under 1000px it drops to the bottom-right corner. The Service phone pair stops short of it. */
:root { --fc: min(var(--container), calc(100vw - 64px)); --flick-left: max(calc(88.8vw - 24px), calc(50vw + var(--fc) / 2 - (var(--fc) - 72px) * 0.225 + 164px)); }
@media (min-width: 1001px) {
  .feature-flick[data-flick] { left: var(--flick-left); right: auto; top: calc(54vh - 24px); bottom: auto; }
  .phone-pair { margin-right: max(0px, calc((100vw + var(--fc)) / 2 - var(--flick-left) + 14px)); }
}
@media (max-width: 1000px) {
  .feature-flick[data-flick] { left: auto; top: auto; right: 14px; bottom: 18px; }
  .phone-pair { margin-right: 0; }
}

/* What we do: the grid strip down the first box no longer runs under its words */
@media (min-width: 901px) { .ecard.strip--left { padding-left: 64px; padding-right: 26px; } }
/* boxes with a grid strip along the top or bottom edge: keep the words clear of the strip */
@media (min-width: 601px) {
  .setup-step.strip--top { padding-top: 66px; }
  .setup-step.strip--bottom { padding-bottom: 60px; }
}
/* phone / tablet: the strips along the top and bottom of the What we do boxes no longer run under the headings and last lines */
@media (max-width: 900px) {
  .ecard.strip--top { padding-top: 62px; }
  .ecard.strip--bottom { padding-bottom: 52px; }
}
/* phone: the Request a demo message box is tall enough for its whole three-line example, so the words aren't cut off */
@media (max-width: 600px) { .contact-section--water .form textarea { min-height: 94px; } }

/* phone feature strip: the little edge arrow sits on a soft patch of the page colour, so it never lies across the half-hidden word beside it */
@media (max-width: 600px) {
  .feature-strip-wrap::before, .feature-strip-wrap::after { width: 40px; }
  .feature-strip-wrap::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314294A' stroke-opacity='.8' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") no-repeat 6px center / 14px 14px, linear-gradient(to right, #F1EDE4 0, #F1EDE4 24px, rgba(241, 237, 228, 0) 100%); }
  .feature-strip-wrap::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314294A' stroke-opacity='.8' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat calc(100% - 6px) center / 14px 14px, linear-gradient(to left, #F1EDE4 0, #F1EDE4 24px, rgba(241, 237, 228, 0) 100%); }
}

/* the next-feature arrow steps aside once the demo form / footer reach it; and it is a little smaller on a phone so it clears the phone frame */
.feature-flick[data-flick] { transition: opacity 250ms ease, background-color 200ms ease, color 200ms ease; }
.feature-flick[data-flick].in-view.flick-away { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .feature-flick[data-flick] { width: 40px; height: 40px; right: 8px; bottom: 14px; } .feature-flick[data-flick] svg { width: 19px; height: 19px; } }

/* The three legal pages (privacy.html, terms.html, subprocessors.html, 2026-10-19): readable column, headed sections. */
.legal .prose { max-width: 68ch; }
.legal .prose h2 { margin: 36px 0 10px; }
.legal .prose h2:first-child { margin-top: 0; }
.legal .prose ul { margin: 12px 0 16px 1.2em; color: var(--ink-soft); }
.legal .prose li + li { margin-top: 10px; }
.legal .prose a { text-decoration: underline; text-underline-offset: 3px; }
.legal.section--tight { padding-top: 8px; }