/* =============================================================================
   Make A Break — hero + lockup + links row. Layout = Olly's composition:
   the lockup CENTRED in the sky (logo → wordmark → strap → Coming soon), the
   kit in the bottom-left of the photograph. Every gap in the lockup is a
   multiple of ONE --step. The --lock-* values are dialled on the tuner and
   then frozen here. Photograph stays visible: a soft POCKET under the lockup
   (alpha only, smoothstepped), text-shadow finishes legibility.
   ========================================================================== */
:root {
  /* ---- LOCK VALUES — dialled by Fin on the tuner, 2026-09-16 16:06. Never re-derive. ---- */
  --lock-step: 12px;
  --lock-panel-x: 0vw;
  --lock-panel-y: 15vh;
  --lock-mark: 176px;
  --lock-word: clamp(1.8rem, 1.70rem + 2.4vw, 4.05rem);
  --lock-pocket-x: 50%;
  --lock-pocket-y: 48%;
  --lock-pocket-rx: 58%;
  --lock-pocket-ry: 44%;
  --lock-veil-alpha: 0.66; /* was .76 — Fin (17 Sep): "less dim in the centre" on desktop. Mobile keeps its own .55 (media block). Contrast re-measured at 1440 after the change. */
  --lock-plate-x: 62%;  /* nudged so the sun sits under "Coming soon" (Fin) */
  --lock-plate-y: 47%;
}

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; min-height: 100dvh; display: grid; align-items: start; justify-items: center;
  background: var(--c-bg); color: var(--c-ink);
}
/* height MUST be the LARGE viewport (100lvh), not dynamic (100dvh) — a fixed
   layer at 100dvh stops at the toolbar, leaving navy behind the iOS status bar
   + bottom bar. 100lvh reaches behind both bars so the photo bleeds edge to edge. */
/* Bleed the photo OUTWARD past the safe areas (behind the notch/status bar + the home
   indicator/toolbar) so real photo pixels sit under the translucent iOS chrome. env() is 0
   on desktop, so this is a no-op there. */
.hero__media {
  position: fixed; z-index: 0; left: 0; right: 0; width: 100%;
  top: calc(0px - env(safe-area-inset-top));
  height: 100vh;
  height: calc(100lvh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--lock-plate-x) var(--lock-plate-y);
}
/* The pocket: a radial veil under the lockup, smoothstepped (1 · .84 · .5 · .16 · 0), alpha only.
   Plus a light wash at the very top — the rest of the picture is untouched. */
.hero__veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  height: 100vh; height: 100lvh;
  --a: var(--lock-veil-alpha);
  background:
    radial-gradient(ellipse var(--lock-pocket-rx) var(--lock-pocket-ry) at var(--lock-pocket-x) var(--lock-pocket-y),
      rgb(var(--navy-rgb) / var(--a)) 0,
      rgb(var(--navy-rgb) / calc(var(--a) * .84)) 30%,
      rgb(var(--navy-rgb) / calc(var(--a) * .50)) 55%,
      rgb(var(--navy-rgb) / calc(var(--a) * .16)) 80%,
      rgb(var(--navy-rgb) / 0) 100%),
    linear-gradient(to bottom, rgb(var(--navy-rgb) / var(--lock-top-alpha, .35)) 0, rgb(var(--navy-rgb) / 0) 22%);
}
.hero__panel {
  position: relative; z-index: 2;
  --step: var(--lock-step);
  width: min(100%, 880px); text-align: center;  /* wide enough for BREAK's column at 1440 (measured: 301px per side was 10px short) */
  padding: var(--lock-panel-y) var(--gutter) calc(var(--step) * 4);
  left: var(--lock-panel-x);  /* NOT transform — a transform traps the fixed modal inside this panel */
  display: flex; flex-direction: column; align-items: center;
}
.hero__mark {
  width: var(--lock-mark); height: auto;
  margin: 0 0 calc(var(--step) * 1.6);
  filter: drop-shadow(0 10px 24px rgb(0 0 0 / .45));
}
.hero__word {
  /* Centred on the A, not on the block: MAKE right-aligned in the left column, BREAK left-aligned in
     the right column, the A in the middle. The line is uneven in length by design (Fin: "ik its
     uneven but it doesnt look right how the A is off centre"). */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: .26em; align-items: baseline;  /* minmax(0,…) — plain 1fr can't shrink below the word's min-content, so BREAK's column would start wider and pull the A left */
  width: 100%;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--lock-word); line-height: .94; letter-spacing: .035em;
  color: #fff; margin: 0 0 calc(var(--step) * 1.1);
  text-shadow: 0 2px 6px rgb(0 0 0 / .35), 0 12px 40px rgb(0 0 0 / .35);
  white-space: nowrap;  /* the wordmark never breaks — size is set so it fits every width */
}
.hero__word-l { text-align: right; margin-inline-end: var(--wm-balance, .16em); }  /* MAKE is shorter than BREAK; widen the MAKE|A gap so the WORD reads centred with the A still under the logo */
.hero__word-r { text-align: left; }
.hero__word b { font-weight: inherit; color: #fff; }  /* the A is white like the rest of the wordmark (Fin: gold tried, then "make it white") */
.hero__strap {
  font-family: var(--font-body); font-weight: 700;
  font-size: .84rem; letter-spacing: .32em; text-transform: uppercase; text-indent: .32em;
  color: #fff; margin: 0 0 calc(var(--step) * 1.8);
  text-shadow: 0 1px 2px rgb(0 0 0 / .55), 0 3px 14px rgb(0 0 0 / .5);
}
.hero__strap i { font-style: normal; color: var(--c-gold); margin: 0 .35em; text-shadow: 0 0 10px rgb(239 183 53 / .5); }
/* Strap centred on its MIDDLE phrase (Fin, 20 Sep: "its the Choose it, make it, live it line that we need to change").
   As one inline run it was centred as a block, but CHOOSE IT is longer than LIVE IT, so MAKE IT and the two gold dots sat
   ~17px right of the logo / A / Coming soon axis. Same cure as the wordmark: 1fr auto 1fr — MAKE IT dead centre, the dots
   mirror each other, the outer phrases grow outward. Each phrase cancels its trailing letter-space so boxes = ink. */
.hero__strap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; line-height: 1; width: 100%; text-indent: 0; white-space: nowrap; --strap-ls: .32em; width: min(100%, 36em); }
/* OPTICAL BALANCE (Fin: "if we are really clever and have some slight gaps between certain letters and marks we can make
   it up"). CHOOSE IT is two letters longer than LIVE IT (~2.5em). Rather than let the strap hang left, the difference is
   spread thin across many small places so none of them reads: CHOOSE IT a hair tighter, LIVE IT a hair looser, their word
   spaces nudged, and the outer gaps to the dots uneven. MAKE IT and both dots stay exactly mirrored on the centre line.
   All in em of the strap → the balance holds at every size. --strap-fix is the measured residual per breakpoint. */
.hero__strap span { margin-inline-end: calc(var(--strap-ls) * -1); }
/* v3 (Fin: "we can be much cleverer, atm it is still noticeable"): stop hiding 2.5em in the TYPE — any channel strong
   enough to absorb it shows. Instead the ENDS are dissolved: each outer phrase carries a 1px gold hairline that runs from
   the text out to the strap's edge and FADES to nothing, so the eye has no hard end to compare left against right. The
   type keeps only whisper-level help (tracking ∓.025/.04em, size 98% / 103%). MAKE IT + both dots stay mirrored by the
   grid; the hairlines simply fill whatever is left, so nothing needs calibrating at any width. */
.hero__strap span { margin-inline-end: calc(var(--strap-ls) * -1); }
.hero__strap-l, .hero__strap-r { display: flex; align-items: center; justify-self: stretch; }
.hero__strap-l { justify-content: flex-end; font-size: 98%; letter-spacing: calc(var(--strap-ls) - .025em); margin-inline-end: calc((var(--strap-ls) - .025em) * -1); padding-inline-end: .85em; }
.hero__strap-r { justify-content: flex-start; font-size: 103%; letter-spacing: calc(var(--strap-ls) + .04em); margin-inline-end: 0; padding-inline-start: .85em; }
.hero__strap-l::before, .hero__strap-r::after { content: ''; flex: 1 1 0; height: 1px; min-width: 0; }
.hero__strap-l::before { margin-inline-end: .7em; background: linear-gradient(to left, rgb(239 183 53 / .85), rgb(239 183 53 / 0)); }
.hero__strap-r::after { margin-inline-start: calc(.7em - var(--strap-ls)); background: linear-gradient(to right, rgb(239 183 53 / .85), rgb(239 183 53 / 0)); }
.hero__strap i { letter-spacing: 0; margin: 0; }
.hero__strap i:first-of-type { margin-inline-end: .9em; }
.hero__strap i:last-of-type { margin-inline-start: .9em; }
.hero__soon {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.8rem); line-height: 1;
  color: var(--c-gold); margin: 0 0 calc(var(--step) * 1.6);
  text-shadow: 0 2px 10px rgb(0 0 0 / .45);
}
/* ---- "See more" — a crafted pill that opens a centred panel over a dimmed hero.
   Base is a native <details> (works with no JS, copy indexed); JS adds Esc / tap-outside / scroll-lock. ---- */
.more { text-align: center; margin: 0 0 calc(var(--step) * 2.2); }
.more__summary {
  list-style: none; cursor: pointer; position: relative; display: inline-block;
  -webkit-tap-highlight-color: transparent; outline: none;
  font-family: var(--font-body); font-weight: 700; font-size: .82rem; letter-spacing: .26em; text-transform: uppercase;
  color: #fff; padding: .3em .1em; background: none; border: 0;
  text-shadow: 0 1px 2px rgb(0 0 0 / .55), 0 3px 14px rgb(0 0 0 / .5);
  transition: color var(--dur) var(--ease);
}
.more__summary::-webkit-details-marker { display: none; }
/* the "box"-less standout: a gold underline under the words only */
.more__summary span {
  display: inline-block; text-indent: .26em;  /* compensate the trailing letter-spacing so the glyphs centre */
  padding-bottom: 5px; border-bottom: 2px solid var(--c-gold);
  transition: border-color var(--dur) var(--ease);
}
.more__summary svg { position: absolute; left: 100%; top: 50%; margin-left: .45em; transform: translateY(-50%); width: 1em; height: 1em; fill: var(--c-gold); transition: transform var(--dur-slow) var(--ease), fill var(--dur) var(--ease); }
.more[open] .more__summary svg { transform: translateY(-50%) rotate(180deg); }
.more__summary:focus, .more__summary:focus-visible { outline: none; }
.more__summary:hover, .more__summary:focus-visible { color: var(--c-gold); }
.more__summary:hover span, .more__summary:focus-visible span { border-color: #fff; }

/* The panel: a fixed, centred overlay with a dimmed backdrop. Details hides it until open. */
.more__overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: clamp(16px, 5vw, 48px);
  background: rgb(3 10 24 / .66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* While open, hero.js moves the overlay to <body> (iOS clips a fixed child to .hero__panel's layer) — so it carries its own
   --step / colour instead of inheriting them from the lockup, and the open animation keys off .is-open. */
.more__overlay { --step: var(--lock-step); color: var(--c-ink); overscroll-behavior: contain; }
.js .more[open] .more__overlay, .js .more__overlay.is-open { animation: moreFade .28s var(--ease-out) both; }
@keyframes moreFade { from { opacity: 0; } to { opacity: 1; } }
.more__card {
  position: relative; width: min(100%, 548px); max-height: min(94svh, 820px); overflow: auto;
  margin: auto; text-align: left; padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 38px);
  border-radius: 20px;
  background:
    linear-gradient(168deg, rgb(16 46 88 / .97), rgb(5 20 42 / .98)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--c-gold) 70%, transparent), rgb(236 234 231 / .10) 40%, color-mix(in srgb, var(--c-accent) 45%, transparent)) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 40px 90px -30px rgb(0 0 0 / .85);
  -webkit-overflow-scrolling: touch;
}
.js .more[open] .more__card, .js .more__overlay.is-open .more__card { animation: moreIn .34s var(--ease-out) both; }
@keyframes moreIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.more__close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; z-index: 2;
  border: 1px solid rgb(236 234 231 / .18); border-radius: 999px; cursor: pointer;
  background: rgb(255 255 255 / .06); color: var(--c-ink); font-size: 1rem; line-height: 1;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.more__close:hover, .more__close:focus-visible { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }

/* Header: roundel, kicker, title, a short gold rule */
.more__head { text-align: center; margin: 0 0 calc(var(--step) * 1.4); }
.more__mark { width: 48px; height: auto; margin: 0 auto calc(var(--step) * 1); filter: drop-shadow(0 6px 16px rgb(0 0 0 / .5)); }
.more__kicker {
  font-family: var(--font-body); font-weight: 700; font-size: .62rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--c-gold); margin: 0 0 calc(var(--step) * .8);
}
.more__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  letter-spacing: .01em; color: #fff; margin: 0 auto; line-height: 1.04; text-wrap: balance;
}
.more__rule { display: block; width: 50px; height: 2px; margin: calc(var(--step) * 1.3) auto 0;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent); }

/* Editorial numbered list */
.more__list { list-style: none; margin: 0; padding: 0; }
.more__list li {
  display: grid; grid-template-columns: auto 1fr; gap: calc(var(--step) * 1.5);
  padding: calc(var(--step) * 1.4) 0; border-top: 1px solid rgb(236 234 231 / .12); align-items: start;
}
.more__list li:first-child { border-top: 0; padding-top: 0; }
.more__num {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--c-accent) 70%, var(--c-gold));
  opacity: .9; font-variant-numeric: tabular-nums; min-width: 1.6em;
}
.more__body h2 {
  font-family: var(--font-body); font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  color: #fff; margin: .05em 0 calc(var(--step) * .5); text-transform: none;
}
.more__body p { margin: 0; color: var(--c-ink); font-size: .9rem; line-height: 1.55; }
.more__body em { font-style: italic; color: #fff; }

/* Footer slogan */
.more__slogan {
  margin: calc(var(--step) * 1.4) 0 0; padding-top: calc(var(--step) * 1.5);
  border-top: 1px solid rgb(236 234 231 / .16);
  font-family: var(--font-body); font-weight: 700; font-size: .78rem;
  letter-spacing: .26em; text-transform: uppercase; text-align: center; color: #fff;
}
.more__slogan i { font-style: normal; color: var(--c-gold); margin: 0 .45em; }
html.modal-open, body.modal-open { overflow: hidden; overscroll-behavior: none; }

/* ---- Links row: one hover system, ONE solid primary (Instagram) ---- */
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--step) * 1.2); margin: 0; padding: 0; list-style: none; }
.links .btn { display: inline-flex; align-items: center; gap: .6em; text-indent: 0; padding: .9rem 1.7rem; }
.links .btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; fill: currentColor; }
/* The kit's primary builds its body from --c-ink (assumes a light page). This page is dark,
   so the crafted object is rebuilt here: navy body lit at the top, cyan gradient keyline,
   inset highlight, grounded shadow — material at rest before any hover. */
.links[data-links="glass"] .btn--primary,
.links .btn--keyline {
  /* glass with a soft GOLD keyline (distinct from the silver "See more" pill) */
  color: #fff; border-color: rgb(239 183 53 / .55);
  background: rgb(var(--navy-rgb) / .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1);
}
.links[data-links="glass"] .btn--primary::before, .links[data-links="glass"] .btn--primary::after { display: none; }
.links[data-links="glass"] .btn--primary:hover, .links[data-links="glass"] .btn--primary:focus-visible,
.links .btn--keyline:hover, .links .btn--keyline:focus-visible {
  /* fills gold on hover, navy text for contrast */
  border-color: var(--c-gold); color: var(--c-bg); backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-gold) 92%, white 10%), var(--c-gold) 45%, var(--c-gold-deep));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 10px 26px -8px color-mix(in srgb, var(--c-gold) 60%, transparent);
}
.links[data-links="navy"] .btn--keyline,
.links .btn--primary {
  color: #fff;
  background:
    linear-gradient(#1B3F73, #0B2650 55%, #051C3A) padding-box,
    linear-gradient(120deg, var(--c-accent-2), var(--c-accent) 45%, var(--c-gold) 100%) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 10px 26px -10px rgb(0 0 0 / .7);
}
.links[data-links="navy"] .btn--keyline::before, .links .btn--primary::before {
  content: ''; position: absolute; inset: 0; z-index: 1; transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease); background: linear-gradient(120deg, var(--c-accent-2), var(--c-accent));
}
.links[data-links="navy"] .btn--keyline:hover::before, .links[data-links="navy"] .btn--keyline:focus-visible::before,
.links .btn--primary:hover::before, .links .btn--primary:focus-visible::before { transform: scaleX(1); }
.links[data-links="navy"] .btn--keyline:hover, .links[data-links="navy"] .btn--keyline:focus-visible,
.links .btn--primary:hover, .links .btn--primary:focus-visible { color: var(--c-bg); background-color: transparent; }

/* Legal line — the Companies Act disclosure route (company details live on legal.html), kept to a
   whisper under the buttons so it never competes with the hero. */
.hero__legal {
  /* Pinned to the very bottom of the screen (Fin: "put the legal and privacy at the bottom").
     Fixed = out of flow, so it can never push the hero into a scroll. Sits above the iPhone home
     indicator via the safe-area inset; on iOS the layout viewport already ends above Safari's bar. */
  position: fixed; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3;
  margin: 0; padding-inline: var(--gutter); pointer-events: none;
  font-family: var(--font-body); font-size: .62rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; text-align: center;
  /* sits over the bright bay: near-solid ink + a real shadow so it clears AA, still a whisper in size */
  color: rgb(236 234 231 / .92); text-shadow: 0 1px 3px rgb(0 0 0 / .7), 0 2px 14px rgb(0 0 0 / .55);
}
.hero__legal a {
  pointer-events: auto; /* the strip passes clicks through; the link itself stays tappable */
  color: inherit; text-decoration: none; padding-bottom: .1em;
  border-bottom: 1px solid rgb(239 183 53 / .45);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__legal a:hover, .hero__legal a:focus-visible { color: #fff; border-color: var(--c-gold); }
/* Desktop: Fin (17 Sep) "make it a little bit more visible" — larger, full white, firmer gold rule. Mobile untouched. */
@media (min-width: 768px) {
  .hero__legal { font-size: .74rem; letter-spacing: .24em; color: #fff; bottom: 20px; }
  .hero__legal a { border-bottom-color: rgb(239 183 53 / .7); padding-bottom: .15em; }
  /* A soft navy shelf behind the bottom line — it sits on bright sand with no pocket under it,
     so it needs its own contrast (measured 1.8:1 bare). Fades to nothing 120px up; kit untouched. */
  .hero__legal::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: -24px; height: 130px; z-index: -1;
    background: linear-gradient(to top, rgb(var(--navy-rgb) / .7), rgb(var(--navy-rgb) / 0));
    pointer-events: none;
  }
  /* Lighter centre pocket (.66) leaves the gold script + "See more" marginal on the brightest
     patches; a tight navy halo restores legibility without re-dimming the whole centre. */
  .hero__soon, .more__summary span { text-shadow: 0 1px 2px rgb(var(--navy-rgb) / .55), 0 2px 16px rgb(var(--navy-rgb) / .6); }
}

/* ---- Mobile: the See more panel must fit ONE screen (Safari's toolbar shrinks svh) ---- */
@media (max-width: 767px) {
  /* Float the panel as a CARD over the hero — the photo stays visible (dimmed + blurred) around it,
     instead of a full-screen navy sheet that hides it. Height wraps the content, so it never fills
     the screen; the rounded gold-edged card + shadow come from the base .more__card rule. */
  /* iOS Safari (Fin's screen recording, 20 Sep): with the panel open, a TILE of the sharp un-dimmed photo flashed over the
     bottom third of the card. Cause = stacked backdrop-filters (blurred overlay above three blurred glass buttons) over a
     fixed, animated photo layer — WebKit mis-orders the tiles. Cure: no backdrop-filter on the phone overlay (a deeper dim
     instead), the overlay promoted to its own layer, and the buttons' blur switched off while the panel is open. */
  .more__overlay { padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgb(3 10 24 / .74); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.modal-open .links .btn { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* BREATHING ROOM (Fin, 20 Sep, big iPhone: "this section makes all the descriptions look crammed"). The panel was set
     once, tight enough for the smallest phone, and every phone got it — his had ~200px of height unused. --room is the
     spare space this screen really has (0 on a 600px-tall or 320px-wide view → 180px on a big phone); every size and gap
     is its compact minimum PLUS a share of --room. Small phones stay as compact as before; big ones open up. */
  /* × .62: the card grows ~1.5px per 1px of --room, so --room may only take ~⅔ of each extra pixel of height or the card outruns the screen (measured: unscaled it overflowed 25px at 430×772). */
  .more__overlay { --room: clamp(0px, min((100vh - 600px) * .62, (100vw - 320px) * 1.6), 180px); --room: clamp(0px, min((100svh - 600px) * .62, (100vw - 320px) * 1.6), 180px); }
  .more__card {
    width: 100%; max-width: 400px; max-height: calc(100dvh - 32px); margin: auto;
    display: flex; flex-direction: column; justify-content: center;
  }
  .more__close { top: 12px; right: 12px; width: 34px; height: 34px; }
  .more__head { margin: 0 0 calc(10px + var(--room) * .06); }
  .more__mark { display: none; }  /* the hero already shows the logo; drop it in the panel on mobile to guarantee no scroll */
  .more__kicker { font-size: calc(.58rem + var(--room) * .006); letter-spacing: .28em; margin: 0 0 calc(4.8px + var(--room) * .03); }
  .more__title { font-size: calc(1.18rem + var(--room) * .022); }
  .more__rule { margin-top: calc(10.8px + var(--room) * .03); }
  .more__list li { padding: calc(7.8px + var(--room) * .06) 0; gap: calc(10.8px + var(--room) * .025); }
  .more__num { font-size: calc(1.3rem + var(--room) * .02); }
  .more__body h2 { font-size: calc(.9rem + var(--room) * .009); margin: 0 0 calc(3.6px + var(--room) * .022); }
  .more__body p { font-size: calc(.8rem + var(--room) * .0125); line-height: calc(1.36em + var(--room) * .026); }
  .more__slogan { margin: calc(8.4px + var(--room) * .05) 0 0; padding-top: calc(9.6px + var(--room) * .045); font-size: calc(.66rem + var(--room) * .008); letter-spacing: .2em; }
}

/* ---- Mobile: same centred stack at the top; the 9:16 plate keeps the kit bottom-left ---- */
@media (max-width: 767px) {
  :root { --lock-mark: 120px; --lock-panel-x: 0vw; --lock-panel-y: max(9vh, env(safe-area-inset-top)); --lock-pocket-rx: 80%; --lock-pocket-ry: 40%; --lock-pocket-y: 30%; --lock-veil-alpha: .33; --lock-top-alpha: .49; /* LOCKED by Fin on the phone tuner 19 Sep ("sky 33 · top 49") — brighter sky. Was .55/.35. Never re-derive. */ --lock-plate-x: 50%; --lock-plate-y: 100%; /* 9:16 plate: centre horizontally + anchor to the bottom so the kit is never cropped (desktop plate-x pan does not leak in) */ }
  /* Fin locked --lock-word on the DESKTOP tuner; its slope overflows a phone. Scoped mobile size only. */
  :root { --lock-word: clamp(1.5rem, 0.95rem + 3.05vw, 2.4rem); }
  .hero__panel { transform: none; padding-inline: var(--gutter); }
  .more { width: 100%; }
  .more__card { padding: calc(16.8px + var(--room) * .062) calc(16.8px + var(--room) * .04); }
  /* Strap: fluid so it NEVER wraps (it broke to two lines at 360) and sits inside the wordmark's width
     instead of running edge to edge. */
  /* Fin (20 Sep): "centralise the choose it make it live it to the rest of the text". Root cause was the WORDMARK: it is
     centred on its A, and MAKE is shorter than BREAK, so its ink sat ~7px right of the logo / Coming soon / See more.
     LOCKED by Fin from four mock-ups: "go with D even though its not perfect" — the A stays under the logo and MAKE's
     letters are tracked wider (.17em vs .035em) until MAKE is as wide as BREAK, so the ink centres on the screen too.
     The strap is sized from --lock-word so its edges land flush with M…K at every width. Never re-derive. */
  .hero__word-l { letter-spacing: .17em; }
  .hero__strap { font-size: calc(var(--lock-word) * .405); letter-spacing: .26em; --strap-ls: .26em; width: calc(var(--lock-word) * 10.95); max-width: 100%; }  /* width = the wordmark's ink (M…K), so the hairlines fade out exactly at its edges */
  /* "Coming soon" — LOCKED by Fin 20 Sep ("go with your suggestion"): 22% bigger on phones (28.8 → 35px), nudged left by
     .043em because a script font's BOX is centred but its INK isn't (measured by text-on/text-off diff: ink ran ~3px
     right), and a touch more air above/below so it sits as the headline of the lockup. `left`, not transform (load-in
     animation ends on transform:none). Never re-derive. */
  .hero__soon { font-size: clamp(2.2rem, 1.34rem + 2.93vw, 3.4rem); position: relative; left: -.043em; margin-top: calc(var(--step) * .17); margin-bottom: calc(var(--step) * 1.93); }
  /* Roundel shadow: iOS Safari clips filter:drop-shadow to the image box, so the shadow showed as a SQUARE behind the
     logo once the sky went blue. The roundel is a true circle touching its bounds → a round box-shadow is the same look
     with no filter layer to clip. */
  .hero__mark { filter: none; border-radius: 50%; box-shadow: 0 10px 24px rgb(0 0 0 / .45); }
  /* Brighter sky = less veil under the lockup, so each text run carries its own tight navy halo (what Fin saw on the tuner). */
  .hero__word  { text-shadow: 0 0 2px rgb(var(--navy-rgb) / .55), 0 2px 4px rgb(var(--navy-rgb) / .6), 0 4px 22px rgb(var(--navy-rgb) / .6); }
  .hero__strap { text-shadow: 0 0 3px rgb(var(--navy-rgb) / .85), 0 1px 2px rgb(var(--navy-rgb) / .85), 0 2px 12px rgb(var(--navy-rgb) / .75); }
  .hero__soon, .more__summary span { text-shadow: 0 0 3px rgb(var(--navy-rgb) / .8), 0 1px 2px rgb(var(--navy-rgb) / .8), 0 2px 14px rgb(var(--navy-rgb) / .7); }
  /* Measured 19 Sep on the BLUE-SKY plate (v10) at sky .33, background alone: wordmark 4.0:1, strap 3.6, See more 2.1,
     gold "Coming soon" 1.6 (it sits on the paler lower sky) — the halos above finish the job. On the old white-sky plate
     these were 1.0–1.8. Do not soften the halos without re-measuring. */
  /* Links — LOCKED by Fin on the phone tuner 19 Sep: "B equal stack · glass 31". Three stacked pills, all the SAME
     width, slim. (He rejected the Instagram-wide + two-halves regroup.) Never re-derive. */
  .links { flex-direction: column; align-items: stretch; gap: 9px; width: 100%; max-width: 232px; }
  .links .btn { display: flex; justify-content: center; min-height: 44px; padding: .6rem 1rem; font-size: .72rem; letter-spacing: .18em; }
  .links[data-links="glass"] .btn--primary, .links .btn--keyline { background: rgb(var(--navy-rgb) / .31); text-shadow: 0 1px 3px rgb(var(--navy-rgb) / .6); }
}
/* Short / narrow phones: tighter overlay gutters so the card gets every pixel. (Type + gaps are handled by --room above.) */
@media (max-width: 767px) and (max-height: 700px), (max-width: 374px) {
  .more__overlay { padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); }
  .more__card { max-height: calc(100dvh - 20px); }
}
/* Short LAPTOP screens: the longer copy made the panel scroll 28px at 1280x720. Height-scoped only —
   a normal desktop (>=800 tall) is untouched. */
@media (min-width: 768px) and (max-height: 800px) {
  .more__mark { display: none; }
  .more__list li { padding: calc(var(--step) * 1.1) 0; }
}
@media (min-width: 768px) and (max-height: 680px) {
  .more__card { width: min(100%, 660px); max-height: 96svh; padding-block: 20px; }
  .more__slogan { display: none; }
  .more__body p { font-size: .86rem; line-height: 1.45; }
}
@media (max-width: 340px) {  /* 320-wide handsets: last notch so the panel still fits */
  .more__slogan { display: none; }
  .hero__panel { padding-bottom: calc(var(--step) * 2); }  /* the 3-pill stack made the page scroll 5px at 320x568 */
  .hero__soon { margin-bottom: calc(var(--step) * 1.2); }  /* bigger Coming soon left the buttons only 5px above the legal line at 320x568 */
  .more { margin-bottom: calc(var(--step) * 1.7); }
  .more__head { margin-bottom: calc(var(--step) * .6); }
  .more__rule { display: none; }
  .more__body p { font-size: .77rem; line-height: 1.33; }
}

/* ---- Load-in choreography (Fin, 17 Sep: "make the things load in order to make it look cool") ----
   CSS-only, armed ONLY under html.js (head.js adds the class before first paint, so nothing flashes);
   with JS off everything is simply visible. The photo settles from a slow 1.06 → 1 push-in while the
   lockup arrives top-to-bottom: roundel → wordmark → strap → Coming soon → See more → buttons (staggered)
   → legal line. transform + opacity only (GPU-cheap), plays once, reduced-motion gets nothing at all.
   NEVER animate .hero__panel or .more — the See more overlay is position:fixed inside them and a
   transform on an ancestor would trap it. */
@keyframes mabPlate { from { transform: scale(1.06); } to { transform: none; } }
@keyframes mabRise  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mabMark  { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mabFade  { from { opacity: 0; } to { opacity: 1; } }
.js .hero__media img { animation: mabPlate 2.2s var(--ease-out) both; }
.js .hero__mark      { animation: mabMark .9s var(--ease-out) .12s both; }
.js .hero__word      { animation: mabRise .8s var(--ease-out) .34s both; }
.js .hero__strap     { animation: mabRise .7s var(--ease-out) .50s both; }
.js .hero__soon      { animation: mabRise .8s var(--ease-out) .64s both; }
.js .more__summary   { animation: mabRise .7s var(--ease-out) .78s both; }
.js .links li        { animation: mabRise .7s var(--ease-out) both; }
.js .links li:nth-child(1) { animation-delay: .90s; }
.js .links li:nth-child(2) { animation-delay: .98s; }
.js .links li:nth-child(3) { animation-delay: 1.06s; }
.js .hero__legal     { animation: mabFade .9s var(--ease-out) 1.25s both; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__media img, .js .hero__mark, .js .hero__word, .js .hero__strap, .js .hero__soon,
  .js .more__summary, .js .links li, .js .hero__legal { animation: none; }
}