/* =========================================================================
   faintOBJECT site, version 2 (from the Figma designs saved Fri 6th November
   2026 in context/figma-site-design/). One stylesheet for every page.

   The designs are drawn on a 1728px-wide frame. --u is one Figma pixel at
   the current screen width (capped at 1728), so "200px in Figma" is written
   calc(200 * var(--u)) and the layout keeps its proportions on any screen.
   Small text has a floor so it stays readable on a phone.
   ========================================================================= */

:root {
  --ink: #3c3c3d;
  --bg: #ccc8bd;                 /* home; each page sets its own below */
  --u: calc(min(100vw, 1728px) / 1728);
  --font: "Hina Mincho", "Times New Roman", serif;
  --t-display: calc(200 * var(--u));
  --t-body: clamp(18px, calc(36 * var(--u)), 36px);
  --t-title: clamp(17px, calc(24 * var(--u)), 24px);
  --t-small: clamp(13px, calc(16 * var(--u)), 16px);
  --t-nav: clamp(11px, calc(16 * var(--u)), 16px);
  --pad: max(16px, calc(50 * var(--u)));
  --gap-section: clamp(110px, calc(400 * var(--u)), 400px);
}
/* One background colour per page. Home, service and case study are from the
   designs; method and work have no design yet, so they take two more tints at
   the same lightness. */
body.p-home     { --bg: #ccc8bd; }
body.p-service  { --bg: #c4bdcc; }
body.p-case     { --bg: #ccbdbd; }
body.p-method   { --bg: #bdc5cc; }
body.p-work     { --bg: #bfccc2; }
body.p-demo     { --bg: #ccc8bd; }   /* demo pages take the homepage colour */

*, *::before, *::after { box-sizing: border-box; }
/* No scroll bars anywhere on the site; the pages and carousels still
   scroll as normal (you, Mon 9th November 2026). */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
html { overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
/* Every piece of text on every page has the menu's hairline outline, the
   same 0.35px at every size, so it shows more on small text than on big
   titles (you, Sat 7th November 2026). */
html, input, textarea, button, select { -webkit-text-stroke: 0.35px currentColor; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Text boxes hug the capital letters, as in Figma (text-box-trim). Browsers
   without it simply keep their normal line box. */
.trim { text-box: trim-both cap alphabetic; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 400; background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; }
.skip-link:focus { top: 1rem; }

/* Gentle fade-in as things scroll into view (form.js adds .is-visible). */
/* A fade only, no slide: a slide moved sections 14px while the scroll snap
   measured them, so they landed off centre. */
.reveal { opacity: 0; transition: opacity 0.9s ease; }
.reveal.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Nav: five items spread edge to edge. Dark on a plain page, light
   (the page colour) over a hero photo. ---- */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  /* Two equal halves either side of the star, so the star sits exactly in
     the middle of the page (you, Sat 7th November 2026). In each half the
     words are spread evenly: HOME on the edge, SERVICE halfway between HOME
     and the star (the empty ::after/::before stands in for the star's edge). */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: var(--pad);
  max-width: 1728px; margin: 0 auto;
}
.nav-half { display: flex; align-items: center; justify-content: space-between; }
.nav-half:first-child::after, .nav-half:last-child::before { content: ""; width: 0; }
/* Menu text drawn at full weight (you, Fri 6th November 2026: "the menu
   buttons look like their stroke/outline has been removed"). */
.nav a {
  -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;
  font-size: var(--t-nav); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); position: relative; padding: 0;
  /* The words' box hugs their capitals, so the gap above HOME and ENQUIRE is
     exactly the same as the gap beside them (you, Fri 6th November 2026). */
  text-box: trim-both cap alphabetic;
}
.nav-half:last-child a:last-child { margin-right: -0.1em; }   /* ENQUIRE's trailing letter-space would add to its right gap */
.nav a::before { content: ""; position: absolute; inset: -12px -8px; }   /* keeps a comfortable click area */
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: currentColor;
  transition: right 0.35s cubic-bezier(.2,.6,.2,1);
}
.nav a:hover::after { right: 0; }   /* hover only, not for the current page (you, Fri 6th November 2026) */
.nav .nav-star { padding: 0; margin: -10px 0; text-box: normal; }   /* the star never pushes the row taller than the words */
.nav .nav-star::after { display: none; }
/* The menu star turns clockwise, one full turn a minute, slow enough to
   barely notice (you, Fri 6th November 2026). */
.nav .nav-star svg { display: block; width: clamp(11px, calc(13 * var(--u)), 13px); height: auto; animation: star-turn 60s linear infinite; }
@keyframes star-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nav .nav-star svg { animation: none; } }
.nav--light a { color: var(--bg); }

/* ---- The top bar and full-screen menu, on every page (your mock-up, Mon 9th November
   2026): the star on the left, VISUALS FOR THE UNBUILT in the middle, a
   three-line menu button on the right. The menu is the ink colour, with the
   same bar (the button turned into one line, to close it) and the four pages
   spread along the bottom. ---- */
.nav--bar { color: var(--ink); }
.nav--bar.nav--light, .menu .nav--bar { color: var(--bg); }
.nav--bar .nav-star { justify-self: start; }
.nav-line {
  font-size: var(--t-nav); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  text-box: trim-both cap alphabetic; -webkit-font-smoothing: auto; white-space: nowrap;
}
.nav-toggle {
  justify-self: end; width: 44px; height: 44px; margin: -15px -15px -15px 0; padding: 0;
  border: 0; background: none; cursor: pointer; color: inherit;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px;
  padding-right: 15px;
}
.nav-toggle span {
  /* Thicker lines with rounded ends (you, Mon 9th November 2026). */
  display: block; width: clamp(11px, calc(13 * var(--u)), 13px); height: 2px; border-radius: 1px; background: currentColor;
  transition: transform 0.35s cubic-bezier(.2,.6,.2,1), opacity 0.35s ease;
}
/* Open: the top and bottom lines slide into the middle one. */
.nav-toggle.is-open span:first-child { transform: translateY(5px); opacity: 0; }
.nav-toggle.is-open span:last-child { transform: translateY(-5px); opacity: 0; }
.menu {
  position: fixed; inset: 0; z-index: 200; background: var(--ink); color: var(--bg);
  opacity: 0; transition: opacity 0.35s ease;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu .nav a { color: var(--bg); }
.menu .menu-links { padding: var(--pad); }   /* the same distance from the edges as the bar at the top */
html.menu-open { overflow: hidden; }
/* Phones: the four menu words stacked in a centred column in the middle of the screen (you, Mon 9th November 2026). */
@media (max-width: 640px) {
  .menu .menu-links { top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; justify-content: center; gap: 32px; }
  .menu .menu-links a { margin-right: -0.1em; }   /* each word's trailing letter-space would pull it off centre */
}

/* ---- Hero photo with a 50% black overlay (home, case study) ---- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 520px; max-height: 1400px;
  color: var(--bg); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }   /* 30% black over the hero film (you, Fri 6th November 2026) */
.hero > *:not(picture):not(.hero-img) { position: relative; z-index: 1; }
.hero video.hero-img { pointer-events: none; }
/* The down arrow, centred at the bottom of the hero (you, Mon 9th November 2026). */
.hero > .hero-arrow:not(.hero-img) { position: absolute; left: 50%; bottom: var(--pad); margin: 0 0 -2px; transform: translateX(-50%); }
.hero-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  padding: var(--pad);
}
.hero-tagline {
  /* The same size as the three paragraphs further down (you, Mon 9th November 2026). */
  font-size: var(--t-body); line-height: 1.2; letter-spacing: 0.1em; text-align: center;
  /* Sized so the line wraps after "for" (you, Mon 9th November 2026). */
  max-width: 17em;
}
.hero-arrow {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -12px -12px -2px 0;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
/* The down arrow bobs slowly (you, Fri 6th November 2026). */
/* Arrows: 0.5px heavier, 1px rounded corners on the head (you, Tue 10th November 2026). */
.hero-arrow svg, .drag-hint svg { overflow: visible; }
.hero-arrow svg { width: 6px; height: 43px; animation: arrow-bob 3.2s ease-in-out infinite; }
/* Lifts up from its resting place and settles back, never dropping below it (you, Fri 6th November 2026). */
@keyframes arrow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .hero-arrow svg { animation: none; } }
.hero--title { justify-content: center; align-items: center; text-align: center; }
.hero--title .hero-title { color: var(--bg); }
/* Bottom centre (you, Fri 6th November 2026). */
.hero.hero--title > .hero-arrow { position: absolute; left: 50%; bottom: var(--pad); margin: 0 0 -2px; transform: translateX(-50%); color: #fff6e9; }

/* ---- Big display type ---- */
.display {
  font-size: var(--t-display); line-height: 0.8; letter-spacing: 0; text-transform: uppercase;
  text-align: center; white-space: nowrap;
}

/* ---- Page body column ---- */
.main {
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-section);
  padding: max(110px, calc(236 * var(--u))) 0 0;
}
/* A page title has the same gap above it (from the menu words) as below it,
   200px on the design, as the Figma Service frame has (you, Fri 6th November
   2026: "vertical padding should always be consistent ... unless told/shown
   otherwise"). The title's box hugs its capitals so the gaps are true. */
:root { --title-gap: max(36px, calc(200 * var(--u))); }
.main:has(> h1.display) { padding-top: calc(var(--pad) + 0.7 * var(--t-nav) + var(--title-gap)); }
.main > h1.display { text-box: trim-both cap alphabetic; }
.main > h1.display + * { margin-top: calc(var(--title-gap) - var(--gap-section)); }
.main--after-hero { padding-top: clamp(90px, calc(150 * var(--u)), 150px); }
.block { width: 100%; display: flex; flex-direction: column; align-items: center; }
.prose {
  width: min(calc(100% - 32px), max(calc(887 * var(--u)), 30em));
  font-size: var(--t-body); line-height: 1.2; letter-spacing: 0.1em; text-align: center;
}
.prose p + p { margin-top: 1.2em; }
/* A short section that gets a whole screen to itself on a computer, so when
   the page snaps to it nothing above or below peeks in (you, Fri 6th November
   2026, on the Full Kit text under the gallery). Phones keep the normal gap. */
@media (hover: hover) and (pointer: fine) {
  .main > .solo { min-height: 100vh; justify-content: center; margin-block: calc(-1 * var(--gap-section)); }
  /* Straight under a hero photo or film: start right at its bottom edge, so the hero is out of sight when the page stops here (you, Fri 6th November 2026, case study). */
  .main--after-hero > .solo:first-child { margin-top: calc(-1 * clamp(90px, calc(150 * var(--u)), 150px)); }
  /* Home: the one sentence under the hero gets the first screen after it to itself. */
  .main--home > .tagline-block:first-child { margin-top: 0; }
}
/* iPad and other touch screens wider than a phone: the sentence under the
   hero gets the same gap above it as below it, down to ALL YOU (you, Tue
   10th November 2026: "there should be padding above this text on ipad"). */
@media (min-width: 641px) and (pointer: coarse), (min-width: 641px) and (hover: none) {
  .main--home { padding-top: calc(var(--gap-section) + 200 * var(--u)); }
}
/* Home's three paragraphs: a narrower column that scales with the text, with
   the lines evened out, so each paragraph sits on about three lines (you,
   Fri 6th November 2026). */
#what-we-do .prose { width: min(calc(100% - 32px), 31em); text-wrap: balance; }
.small {
  width: min(calc(100% - 32px), max(calc(887 * var(--u)), 26em));
  font-size: var(--t-small); line-height: 1.4; letter-spacing: 0.1em; text-align: center;
}
.label { font-size: var(--t-body); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.stack { display: flex; flex-direction: column; align-items: center; gap: clamp(40px, calc(100 * var(--u)), 100px); width: 100%; }
.stack--tight { gap: clamp(28px, calc(50 * var(--u)), 50px); }

/* ---- Home: "All you need to know in 60 seconds" with the intro video in a
   circle. Four rows, each pushed to the edges. ---- */
.sixty {
  position: relative; width: 100%; max-width: 1728px;
  padding: calc(200 * var(--u)) calc(100 * var(--u));
  display: flex; flex-direction: column; gap: calc(10 * var(--u));
}
/* Desktop: the "All you need to know" block sits straight under the hero
   with its own 200px padding, as in the design. */
.main--home { padding-top: 0; }
/* In the design the text starts 117px under this block, not the usual 400. */
.sixty + .block { margin-top: calc(-283 * var(--u)); }
.sixty-row { display: flex; justify-content: space-between; }
.sixty-line { display: none; }
/* Words tucked in towards the circle, measured off your mock-up (Fri 6th
   November 2026): NEED 100px in from the left, TO 75px and IN 182px in from
   the right; ALL, KNOW, 60, YOU and SECONDS stay on the edges. */
.sixty .w-need { transform: translateX(calc(100 * var(--u))); }
.sixty .w-to { transform: translateX(calc(-75 * var(--u))); }
.sixty .w-in { transform: translateX(calc(-182 * var(--u))); }
.sixty-row span { display: block; text-box: trim-both cap alphabetic; }   /* rows 10px apart measured on the capitals, as in Figma (you, Fri 6th November 2026: less line height) */
/* Who is talking in the video, just under the words (you, Sat 7th November 2026). */
/* Computers: on the 60 SECONDS row, centred in the gap between the two words and sitting on their baseline,
   so the block keeps its height and the circle stays put (you, Sat 7th
   November 2026). Phones: its own line under the words. */
.sixty-by { font-size: var(--t-small); line-height: 1; letter-spacing: 0.1em; text-transform: none; white-space: nowrap; text-box: trim-both cap alphabetic; }
.sixty-row .sixty-by { align-self: flex-end; }   /* on the baseline of 60 and SECONDS (you, Sat 7th November 2026) */
.sixty-by--line { display: none; }
/* Tablets and narrow computer windows: no room between 60 and SECONDS, so it
   sits centred under the words, as on phones. Placed outside the flow so
   the circle doesn't move. */
@media (min-width: 641px) and (max-width: 1023px) {
  .sixty-row .sixty-by { display: none; }
  .sixty-by--line { display: block; position: absolute; left: 0; right: 0; text-align: center; top: calc(100% - 200 * var(--u) + max(16px, calc(50 * var(--u)))); }
}
.intro-circle {
  position: absolute; left: calc(50% + 121 * var(--u)); top: calc(50% - 75 * var(--u));
  width: calc(440 * var(--u)); height: calc(440 * var(--u)); transform: translate(-50%, -50%);
}
.intro-circle img, .intro-circle video {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: max(2px, calc(6 * var(--u))) solid var(--ink); background: var(--ink); cursor: pointer;
}
.intro-btn {
  position: absolute; left: calc(10 * var(--u)); top: calc(10 * var(--u));
  --btn: max(40px, calc(100 * var(--u)));
  width: var(--btn); height: var(--btn);
  border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(60, 60, 61, 0.92); color: var(--bg);
  -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
  transition: transform 0.25s ease;
}
.intro-btn:hover { transform: scale(1.06); }
/* Sized from the button itself (percentages misbehaved in Safari on iPhone),
   and nudged right a touch so the triangle looks centred, not just its box
   (you, Fri 6th November 2026). */
.intro-btn .i-play { display: block; width: calc(var(--btn) * 0.22); height: calc(var(--btn) * 0.22 * 15 / 13); margin: 0; transform: translateX(10%); }
/* The full-screen player. */
.intro-player { position: fixed; inset: 0; z-index: 500; background: #000; display: grid; place-items: center; }
.intro-player[hidden] { display: none; }
.fs-player { position: fixed; inset: 0; z-index: 500; background: #000; display: grid; place-items: center; }
.fs-player[hidden] { display: none; }
/* Our own simple bar on the full-screen film: play, progress, time, sound. */
.fs-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 16px; padding: 18px max(16px, var(--pad)) max(18px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); color: #fff;
  font-size: 12px; letter-spacing: 0.08em;
}
.fs-bar[hidden] { display: none; }
.fs-bar button { flex: none; width: 36px; height: 36px; padding: 9px; border: 0; background: none; color: inherit; cursor: pointer; }
.fs-bar svg { display: block; width: 100%; height: 100%; }
.fs-track { flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; }
.fs-track::before { content: ""; position: absolute; }
.fs-track { position: relative; }
.fs-track > .fs-fill { height: 2px; width: 0; background: #fff; position: relative; z-index: 1; }
.fs-track::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 255, 255, 0.3); }
.fs-time { flex: none; font-variant-numeric: tabular-nums; }
.fs-bar .fs-cc { width: auto; padding: 0 6px; font: inherit; font-size: 11px; letter-spacing: 0.1em; }
.fs-bar .fs-cc[hidden] { display: none; }
.fs-bar .fs-cc span { border: 1px solid currentColor; border-radius: 3px; padding: 3px 5px 2px; }
.fs-player.cc-off .fs-cc { opacity: 0.45; }
/* Subtitles in the site's typeface, white on a soft dark band. */
.fs-player video::cue { font-family: var(--font); font-size: clamp(16px, 1.9vw, 26px); line-height: 1.3; color: #fff; background: rgba(0, 0, 0, 0.55); }
.fs-player .i-play, .fs-player .i-on { display: none; }
.fs-player.is-paused .i-play, .fs-player:not(.is-muted) .i-on { display: block; }
.fs-player.is-paused .i-pause, .fs-player:not(.is-muted) .i-off { display: none; }
.fs-player .intro-close { z-index: 3; top: max(12px, env(safe-area-inset-top)); }
/* Pinned to the window, so a tall still is shown whole, never cropped or enlarged past the screen. */
.fs-player video, .fs-player img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.flip[data-full] { cursor: pointer; }
.intro-player video { width: 100%; height: 100%; object-fit: contain; }
.intro-close, .fs-player .intro-close {
  position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border: 0; padding: 0;
  background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: 0.8;
}
.intro-close:hover { opacity: 1; }

/* ---- Sideways gallery that you drag (mouse) or swipe (touch) ---- */
.drag-hint {
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, calc(30 * var(--u)), 30px);
  font-size: var(--t-small); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
}
.drag-hint svg { width: clamp(30px, calc(43 * var(--u)), 43px); height: 6px; }
.drag-hint + .strip { margin-top: calc(100 * var(--u)); }   /* 200 in all, as in the design */
/* Service top, copied from the Figma frame (56:484 / 56:634): the column
   starts 150px under the nav (265px from the top of the page), then the
   title, the drag hint and the gallery sit 200px apart, with the text boxes
   trimmed to the capital letters as Figma does. */
.p-service .main { padding-top: calc(var(--pad) + 0.7 * var(--t-nav) + var(--title-gap)); }
.p-service .top-stack { gap: var(--title-gap); }
.p-service .top-stack .drag-hint + .strip { margin-top: 0; }
.p-service .top-stack .display, .p-service .top-stack .drag-hint span { text-box: trim-both cap alphabetic; }
.strip {
  width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  cursor: grab; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.strip::-webkit-scrollbar { display: none; }
.strip.is-dragging { cursor: grabbing; }
/* Every carousel comes to rest with an item in the middle (you, Fri 6th
   November 2026). Swipes snap natively; a mouse drag turns it off while
   dragging and v2.js glides to the nearest item when you let go. */
.strip { scroll-snap-type: x mandatory; }
.strip-track > * { scroll-snap-align: center; }
.strip.is-dragging, .strip.no-snap { scroll-snap-type: none; }
.strip-track {
  display: flex; width: max-content;
  gap: calc(200 * var(--u)); padding: 0 calc(200 * var(--u));
}
.strip-track > * {
  flex: none; width: calc(324 * var(--u)); height: calc(500 * var(--u));
  object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none;
}
@media (max-width: 900px) {
  .strip-track { gap: 6vw; padding: 0 14vw; }
  .strip-track > * { width: 52vw; height: 80vw; }
}
/* A carousel of cards (method stages): cards sit as far apart as the photos in the other carousels (you, Fri 6th November 2026), all as tall as
   the tallest, and stay readable rather than cropped like the photos. */
.strip-track.strip-track--cards { margin: 0; padding: 0 calc(200 * var(--u)); align-items: stretch; user-select: none; }
@media (max-width: 900px) { .strip-track.strip-track--cards { padding: 0 14vw; } }
.strip-track.strip-track--cards > .card { width: max(280px, calc(340 * var(--u))); height: auto; min-height: max(360px, calc(460 * var(--u))); pointer-events: auto; }

/* ---- Dark cards: title at the top, text at the bottom, in the page colour.
   300 x 400 in the design; they grow when the text needs more room. ---- */
.cards {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  width: 100%; padding: 0 max(16px, calc(100 * var(--u)));
}
.card {
  background: var(--ink); color: var(--bg);
  width: max(240px, calc(300 * var(--u))); min-height: max(320px, calc(400 * var(--u)));
  padding: clamp(24px, calc(50 * var(--u)), 50px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
.card h2, .card h3 { font-size: var(--t-title); line-height: 0.9; letter-spacing: 0.1em; text-transform: uppercase; }
.card p { font-size: var(--t-small); line-height: 1.2; letter-spacing: 0.1em; }
.card .card-num { font-size: var(--t-small); letter-spacing: 0.1em; margin-bottom: 0.9em; opacity: 0.75; }
/* Service: the six kit cards as two rows of three (you, Fri 6th November 2026). */
.cards--three { display: grid; grid-template-columns: repeat(3, max(240px, calc(300 * var(--u)))); justify-content: center; }
@media (max-width: 820px) { .cards--three { grid-template-columns: repeat(2, max(240px, calc(300 * var(--u)))); } }
@media (max-width: 640px) { .cards--three { grid-template-columns: 1fr; } }
.cards--three > .card { width: auto; }
/* Home: on hover (a tap on touch screens) the black card and its words
   dissolve away to reveal an example underneath (you, Fri 6th November
   2026: dissolve instead of flipping). */
.flip { outline: none; }
.flip-inner { position: relative; }
.flip-front { position: relative; z-index: 1; transition: opacity 0.9s ease; }
.flip-back { position: absolute; inset: 0; z-index: 0; background: var(--ink); overflow: hidden; }
@media (hover: hover) { .flip:hover .flip-front { opacity: 0; } }
.flip.is-flipped .flip-front, .flip:focus-visible .flip-front { opacity: 0; }
.flip-media { width: 100%; height: 100%; object-fit: cover; }
/* On every card: what hovering and clicking do (you, Fri 6th November 2026).
   Both on one line, the type shrinking to fit the card (you, Sat 7th
   November 2026). Every size is in em so the line scales as one piece. */
.flip-front { container-type: inline-size; }
.card .card-hint { display: flex; flex-wrap: nowrap; gap: 1.5em; margin-top: 1.4rem; font-size: min(11px, 4.75cqi); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; white-space: nowrap; }
.card-hint span { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.6em; }
.card-hint svg { width: 1.18em; height: 1.55em; flex: none; }
/* The full-screen hand carries a small "x2" at its top right: tap twice (you, Sat 7th November 2026). */
.card-hint svg.hint-x2 { width: 2.06em; overflow: visible; }
.card-hint svg text { text-transform: none; letter-spacing: 0; }
/* The body copy sits just under the title, and the hint line at the bottom
   (you, Sat 7th November 2026). */
.card.flip-front { justify-content: flex-start; row-gap: 16px; }
.flip-front > p:not(.card-hint) { margin-top: 0; }
.flip-front .card-hint { margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .flip-front { transition: none; } }
/* Home: three cards 200px apart (you, Fri 6th November 2026). */
.cards--spread { gap: calc(200 * var(--u)); }
@media (max-width: 640px) { .cards--spread { gap: 5px; } }
.card--wide { width: max(240px, calc(400 * var(--u))); }
@media (max-width: 640px) {
  .card, .card--wide { width: 100%; min-height: 0; gap: 2.5rem; }
  .cards > .flip { width: 100%; }
}

/* Black squares in a carousel, sized like Method's. */
.strip-track--cards > .flip { flex: none; width: max(280px, calc(340 * var(--u))); height: auto; pointer-events: auto; display: flex; }
.strip-track--cards > .flip > .flip-inner { flex: 1; display: flex; }
.strip-track--cards > .flip .flip-front { width: 100%; min-height: max(360px, calc(460 * var(--u))); }
/* Work: the three squares in a row when three fit (3 x 240 + 2 gaps + the
   side margins needs 1103px), otherwise the carousel v2.js builds (you,
   Wed 11th November 2026). */
@media (min-width: 1104px) { .work-carousel > .drag-hint, .work-carousel > .strip { display: none; } }
@media (max-width: 1103.98px) { .work-carousel > .cards { display: none; } }

/* Chips: small outlined tags. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span {
  display: inline-block; border: 1px solid currentColor; border-radius: 1000px;
  padding: 0.45em 0.9em 0.4em; font-size: 12px; line-height: 1.15; letter-spacing: 0.06em;
}
.chips--center { justify-content: center; }
.card .chips span { opacity: 0.85; }

/* ---- Price pill with the currency switch, copied from the Figma frame
   (56:579): an invisible copy of the payment line on top, the row, then the
   payment line, 100px apart, 50px top and bottom and 200px each side, every
   text box trimmed to its capital letters so the number and the symbols sit
   exactly centred. ---- */
.price {
  border: 1px solid var(--ink); border-radius: 1000px;
  /* The same padding on all four sides, so the currency circles sit exactly
     inside the pill's rounded ends (you, Fri 6th November 2026). */
  padding: clamp(16px, calc(50 * var(--u)), 50px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(20px, calc(100 * var(--u)), 100px);
  max-width: calc(100% - 32px);
}
.price-row { display: flex; align-items: center; gap: 5px; }
/* The same layout, symbols and sliding number on a phone as on a computer, just smaller (you, Fri 6th November 2026). */
.price-amount { font-size: max(44px, var(--t-display)); line-height: 0.8; white-space: nowrap; font-variant-numeric: lining-nums; text-box: trim-both cap alphabetic; }
.cur {
  width: clamp(40px, calc(150 * var(--u)), 150px); height: clamp(40px, calc(150 * var(--u)), 150px);
  border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-size: clamp(18px, calc(36 * var(--u)), 36px); line-height: 1; letter-spacing: 0.1em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color 0.25s ease, color 0.25s ease;
}
/* No focus ring or tap flash when a currency is clicked (you, Fri 6th November 2026). */
.cur, .cur:focus, .cur:focus-visible { outline: none; -webkit-tap-highlight-color: transparent; }
.cur span { display: block; text-box: trim-both cap alphabetic; }
.cur[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.cur:not([aria-pressed="true"]):hover { background: rgba(60, 60, 61, 0.08); }
.price-sub { font-size: var(--t-small); line-height: 1.2; letter-spacing: 0.1em; text-align: center; text-box: trim-both cap alphabetic; }
.price-spacer { visibility: hidden; }

/* ---- Films and images ---- */
.film { width: min(calc(100% - 32px), max(calc(1328 * var(--u)), 600px)); }
/* Method's board picture spans from HOME to ENQUIRE in the menu (you, Fri 6th November 2026). */
.film--nav { width: calc(min(100vw, 1728px) - 2 * var(--pad)); }
.film video, .film img { width: 100%; height: auto; background: var(--ink); }
.film figcaption, .cap { margin-top: 14px; font-size: var(--t-small); letter-spacing: 0.1em; line-height: 1.4; text-align: center; }

/* Work: three films side by side, portrait, landscape, portrait. */
.films {
  width: 100%; padding: 0 max(16px, calc(100 * var(--u)));
  display: grid; grid-template-columns: 0.56fr 1.79fr 0.56fr; gap: clamp(12px, calc(40 * var(--u)), 40px); align-items: start;
}
.films figure video { width: 100%; height: auto; background: var(--ink); }
.films .chips { justify-content: center; margin-top: 14px; }
@media (max-width: 900px) {
  .films { grid-template-columns: 1fr 1fr; }
  .films .f-land { grid-column: 1 / -1; order: -1; }
}

/* ---- Method and case study: the seven stages ---- */
.stages { list-style: none; margin: 0; padding: 0; }
.cards.stages { padding: 0 max(16px, calc(100 * var(--u))); }
.stage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(28px, calc(60 * var(--u)), 60px); }
.stage-num { font-size: var(--t-small); letter-spacing: 0.1em; }
.stage-name { font-size: max(40px, calc(120 * var(--u))); line-height: 0.85; text-transform: uppercase; text-align: center; white-space: normal; }
.stage .chips { justify-content: center; max-width: min(calc(100% - 32px), 54rem); }
.case-stages { display: flex; flex-direction: column; gap: var(--gap-section); width: 100%; }

/* Case study picture grids (same markup as before, new spacing). */
.vg-media { width: 100%; padding: 0 max(16px, calc(100 * var(--u))); display: flex; flex-direction: column; gap: 12px; }
.vg-grid { display: grid; gap: 12px; }
.vg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vg-grid img, .vg-grid video, .vg-pair img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: rgba(60, 60, 61, 0.12);
}
.vg-plans img { aspect-ratio: 1 / 1; }
.vg-plan { object-fit: contain !important; background: transparent !important; }
.vg-media figcaption { margin-top: 8px; font-size: 12px; line-height: 1.35; letter-spacing: 0.06em; }
.vg-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.vg-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; }
.vg-pair img { aspect-ratio: 4 / 3; }
.vg-arrow { align-self: center; font-size: 18px; line-height: 1; }
@media (max-width: 900px) {
  .vg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-pairs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .vg-3 { grid-template-columns: 1fr; } }

/* ---- Case study stages: stacked and full width, the same width as the
   "All you need to know" block (ALL to SECONDS), with smaller body text and
   every picture of a stage packed into one compact grid, no carousel (you,
   Fri 6th November 2026). ---- */
/* The tags span the same full width as the text and pictures (you, Fri 6th November 2026). */
.case-stages .stage > .chips { width: min(calc(100% - 32px), calc(min(100vw, 1728px) - 200 * var(--u))); max-width: none; }
.case-stages .stage > .prose { width: min(calc(100% - 32px), calc(min(100vw, 1728px) - 200 * var(--u))); font-size: clamp(17px, calc(30 * var(--u)), 30px); line-height: 1.3; }
/* The step number sits at the top left of the step's name (you, Fri 6th November 2026). */
.stage-head { position: relative; display: inline-block; }
.stage-head .stage-num { position: absolute; right: 100%; top: 0; margin-right: clamp(8px, calc(16 * var(--u)), 16px); line-height: 1; }
/* Both boxes hug their capitals, so the number's top edge lines up with the title's (you, Fri 6th November 2026). */
.stage-head .stage-num, .stage-head .stage-name { text-box: trim-both cap alphabetic; }
.case-stages .stage { gap: clamp(20px, calc(44 * var(--u)), 44px); }
/* Pictures flow in rows that are always centred, so a short last row (or
   the four animation clips) sits in the middle (you, Fri 6th November 2026). */
.case-stages .vg-media {
  width: min(100%, 1728px); padding: 0 max(16px, calc(100 * var(--u)));
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px;
}
.case-stages .vg-grid > figure { flex: none; width: calc((100% - (var(--cols, 6) - 1) * 10px) / var(--cols, 6)); }
.case-stages .vg-pairs { flex: 0 0 100%; }
.case-stages .vg-grid { display: contents; }
.case-stages .vg-grid img, .case-stages .vg-grid video { aspect-ratio: 16 / 9; }
.case-stages .vg-plans img { aspect-ratio: 16 / 9; }
.case-stages .vg-pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.case-stages .vg-pair { flex: none; width: calc((100% - (var(--pcols, 3) - 1) * 24px) / var(--pcols, 3)); }
.case-stages .vg-pair img { aspect-ratio: 16 / 9; }
@media (max-width: 900px) {
  .case-stages .vg-media { --cols: 2; }
  .case-stages .vg-pairs { --pcols: 1; }
}

/* ---- Demo pages: the logo at the top in ink, the "Prepared for" line small. ---- */
.demo-top { display: flex; justify-content: center; padding: var(--pad); }
.demo-top .foot-logo { width: clamp(120px, calc(190 * var(--u)), 190px); background: var(--ink); }
.demo-eyebrow { font-size: var(--t-nav); text-transform: none; -webkit-font-smoothing: auto; }   /* "Prepared for", as written (you, Fri 6th November 2026), in the menu's font settings (you, Wed 11th November 2026: "prepared for, visuals for the unbuilt, click to unmute, menu items all need to be same font") */
/* The title block spaces like a page title (same gap above and below), so
   the film starts half on the first screen, as on Method; the film is as
   wide as the menu (you, Fri 6th November 2026). */
.main:has(> .demo-titlebox) { padding-top: calc(var(--pad) + 0.7 * var(--t-nav) + var(--title-gap)); }
.demo-titlebox > * { text-box: trim-both cap alphabetic; }
.main > .demo-titlebox + * { margin-top: calc(var(--title-gap) - var(--gap-section)); }
.demo-res { margin-top: 14px; font-size: var(--t-small); letter-spacing: 0.1em; text-align: center; opacity: 0.7; }
.footer a { color: inherit; }

/* ---- Footer: black, filling the whole window, with the logo and the
   copyright line in the page colour (you, Fri 6th November 2026). The logo
   is drawn through its own outline so it can take any page's colour. ---- */
.footer {
  /* The largest window height, so the footer still fills the screen once a
     phone's toolbars slide away (you, Fri 6th November 2026). */
  min-height: 100vh; min-height: 100lvh; margin-top: var(--gap-section);
  background: var(--ink); color: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, calc(50 * var(--u)), 50px); padding: 40px 10px;
  /* The page can stop a fraction of a pixel short of the footer's top edge,
     which showed as a thin light line above it; a sliver of the same black
     above the footer covers it (you, Fri 6th November 2026). */
  box-shadow: 0 -3px 0 var(--ink);
}
.foot-logo {
  display: block; width: clamp(180px, calc(318 * var(--u)), 318px); aspect-ratio: 318 / 150;
  background: var(--bg);
  -webkit-mask: url("/assets/v2/logo-1d40cee5.svg") center / contain no-repeat; mask: url("/assets/v2/logo-1d40cee5.svg") center / contain no-repeat;
}
/* The menu, without the star, along the bottom of the footer, spread edge
   to edge like the menu at the top (you, Fri 6th November 2026). */
.footer { position: relative; }
.foot-nav {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 1728px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; padding: var(--pad);
}
.foot-nav a {
  font-size: var(--t-nav); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bg); position: relative; text-box: trim-both cap alphabetic;
  -webkit-font-smoothing: auto;
}
.foot-nav a:last-child { margin-right: -0.1em; }
.foot-nav a::before { content: ""; position: absolute; inset: -12px -8px; }
.foot-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: currentColor;
  transition: right 0.35s cubic-bezier(.2,.6,.2,1);
}
.foot-nav a:hover::after { right: 0; }
/* "Back to top" at the top of the footer, centred, styled like the menu (you, Fri 6th November 2026). */
.foot-top {
  position: absolute; top: var(--pad); left: 50%; transform: translateX(-50%);
  font-size: var(--t-nav); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bg); text-box: trim-both cap alphabetic; -webkit-font-smoothing: auto;
}
.foot-top::before { content: ""; position: absolute; inset: -12px -8px; }
.foot-top::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: currentColor;
  transition: right 0.35s cubic-bezier(.2,.6,.2,1);
}
.foot-top:hover::after { right: 0; }
.footer p { font-size: var(--t-small); letter-spacing: 0.1em; text-align: center; }

/* =========================================================================
   ENQUIRY: full-screen, in the page colour. form.js drives it; the markup
   and field names are unchanged, so the backend (Code.gs) is untouched.
   ========================================================================= */
.enquire-overlay {
  position: fixed; top: 0; left: 0; right: 0; height: 100dvh; z-index: 300;
  display: flex; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--bg); color: var(--ink);
  padding: clamp(64px, 10vh, 120px) 16px 32px;
}
#enquire[hidden] { display: none; }
html.enq-boot #enquire[hidden] { display: flex; }
html.enq-boot .nav, html.enq-boot main > :not(#enquire), html.enq-boot footer { visibility: hidden; }
html.enq-tinted #enquire, html.enq-tinted.enq-boot body { --bg: var(--enq-bg); }
html.enq-boot body { background: var(--bg); }
#enquire.kb-open { align-items: flex-start; }
#enquire.kb-open .container { margin-block: 0; }
/* Wider, so every question and the line under the heading sit on one line;
   on a narrow screen they shrink to fit rather than wrap (you, Fri 6th
   November 2026). The question and the line size themselves to this box. */
.enquire-overlay .container { margin: auto; width: min(100%, 72rem); container-type: inline-size; }
.enquire-overlay .lede, .quiz-step legend { white-space: nowrap; }
.enquire-overlay #enq-h { font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.enquire-overlay .lede { margin-top: 14px; font-size: min(var(--t-small), calc(100cqi / 37)); letter-spacing: 0.1em; line-height: 1.4; text-align: center; opacity: 0.8; }
.enquire-close {
  position: fixed; top: var(--pad); right: var(--pad); z-index: 310;
  width: 44px; height: 44px; margin: -14px -14px 0 0; padding: 0; border: 0; background: none;
  font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink);
}
body.enquiry-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quiz { margin-top: clamp(28px, 5vh, 56px); }
.quiz__progress { margin-bottom: clamp(28px, 5vh, 56px); }
.quiz__bar { height: 1px; background: rgba(60, 60, 61, 0.2); }
.quiz__bar span { display: block; height: 100%; width: 10%; background: var(--ink); transition: width 0.35s cubic-bezier(.2,.6,.2,1); }
.quiz-step { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.quiz-step legend {
  display: block; width: 100%; padding: 0; margin-bottom: clamp(24px, 4vh, 40px);
  font-size: min(clamp(24px, calc(48 * var(--u)), 48px), calc(100cqi / 22)); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; text-align: center;
}
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 640px) { .options { grid-template-columns: 1fr; } }
.option {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--ink); border-radius: 30px; padding: 14px 22px 13px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.option:hover { background: rgba(60, 60, 61, 0.07); }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option__t { display: block; font-size: 15px; letter-spacing: 0.06em; line-height: 1.25; }
.option__d { display: block; margin-top: 3px; font-size: 12px; letter-spacing: 0.05em; line-height: 1.3; opacity: 0.7; }
.option.is-selected { background: var(--ink); color: var(--bg); }
.option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.field { display: flex; flex-direction: column; }
.field input {
  width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent;
  padding: 10px 0; font-family: var(--font); font-size: clamp(22px, calc(36 * var(--u)), 36px); letter-spacing: 0.06em;
  color: var(--ink); text-align: center; outline: none;
}
.field input::placeholder { color: rgba(60, 60, 61, 0.45); }
/* The browser's own tint on an autofilled field is hidden: the field keeps
   the page colour and the ink text (you, Fri 6th November 2026). */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; box-shadow: 0 0 0 1000px var(--bg) inset;
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  transition: background-color 99999s ease-out 0s;
  /* iPhones ignore the shadow trick and paint the pale blue anyway, so the
     browser's fill is also clipped to the letters, where the ink covers it
     (you, Sat 7th November 2026). */
  -webkit-background-clip: text; background-clip: text;
}
.field input:autofill { background: transparent; -webkit-background-clip: text; background-clip: text; }
.field.invalid input { border-bottom-color: #a33a2b; }
.field-error, .quiz-error, .form-status.is-error { color: #a33a2b; font-size: 13px; letter-spacing: 0.05em; text-align: center; }
.field-error { margin-top: 10px; }
.quiz-error { margin-top: 16px; min-height: 1.2em; }
.quiz__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(28px, 5vh, 48px); }
.btn-submit, .btn-back {
  font-family: var(--font); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--ink); border-radius: 1000px; padding: 14px 28px 13px; cursor: pointer;
  background: transparent; color: var(--ink); transition: background-color 0.2s ease, color 0.2s ease;
}
/* Same hairline outline as the menu text, so button words are not thinner (you, Fri 6th November 2026). */
.btn-submit { background: var(--ink); color: var(--bg); }
.btn-submit:hover { background: transparent; color: var(--ink); }
.btn-back:hover { background: rgba(60, 60, 61, 0.08); }
.btn-submit:disabled { opacity: 0.5; cursor: default; }
/* A link styled as the dark button (the error page's "Back to home"). */
.btn-link { display: inline-block; margin-top: max(24px, calc(40 * var(--u))); text-decoration: none; }
.form-status { margin-top: 16px; font-size: 13px; letter-spacing: 0.05em; text-align: center; min-height: 1.2em; }
.form-success p { font-size: var(--t-body); line-height: 1.2; letter-spacing: 0.1em; text-align: center; }

/* Phones: one gap between every section, the same everywhere, including
   under the hero and around "All you need to know" (you, Fri 6th November
   2026: "the vertical padding between each section on mobile needs to be
   more consistent"). */
@media (max-width: 640px) {
  :root { --gap-section: 96px; }
  .main--after-hero, .main--home { padding-top: var(--gap-section); }
  /* "All you need to know" on a phone, as in your mock-up (Frame 99, Fri 6th
     November 2026): a whole screen to itself, five centred lines (ALL YOU /
     NEED TO / KNOW / IN 60 / SECONDS), the circle between NEED TO and KNOW
     overlapping both, and the play button on the circle's right edge. */
  .sixty {
    /* The tallest window height, so once a phone's toolbars slide away the
       film above and the text below still stay out of sight. */
    min-height: 100vh; min-height: 100lvh; margin-block: calc(-1 * var(--gap-section));
    padding: 24px 0; justify-content: center; align-items: center; gap: 1.3vw;
  }
  .sixty + .block { margin-top: 0; }
  .sixty-row { display: none; }
  .sixty-line { display: flex; justify-content: center; gap: 0.12em; font-size: 17.3vw; }
  /* Every page title is the same size as "All you need to know", except on
     the demo pages (you, Sat 7th November 2026). A title too long for one
     line wraps rather than shrinks. */
  /* Two-line titles keep the same line spacing as those words: 1.3vw between
     the capitals, 0.775 of the type size from one line to the next (you,
     Sat 7th November 2026). */
  body:not(.p-demo) h1.display { font-size: 17.3vw; white-space: normal; line-height: 0.775; text-box: trim-both cap alphabetic; }
  .sixty-line span { text-box: trim-both cap alphabetic; }
  .sixty-line:nth-of-type(5), .sixty-line:nth-of-type(6) { order: 1; }
  .intro-circle { order: 2; }
  .sixty-line:nth-of-type(7), .sixty-line:nth-of-type(8), .sixty-line:nth-of-type(9) { order: 3; }
  .sixty-by--line { display: block; position: static; align-self: center; order: 4; margin-top: 16px; }
  .intro-circle {
    position: relative; left: auto; top: auto; transform: none; z-index: 1;
    width: 58.3vw; height: 58.3vw; margin: -4.8vw auto -4.1vw;
  }
  .intro-circle video { border-width: 2px; }
  .intro-btn { --btn: 15.5vw; left: auto; top: 50%; right: calc(var(--btn) / -2); margin-top: calc(var(--btn) / -2); }
  /* Home's three cards and the Full Kit's kit and terms as carousels (you,
     Sat 7th November 2026). v2.js builds them; cards sized like Method's. */
  .phone-strip { gap: var(--title-gap); }
  .phone-strip .drag-hint + .strip { margin-top: 0; }
  .phone-strip .drag-hint span { text-box: trim-both cap alphabetic; }
  /* Full Kit: the price pill is as wide as the cards above it, everything in
     it scaled up together so it keeps its shape (you, Sat 7th November 2026).
     290 is the pill's natural width on a phone; every size is its share of that. */
  .price {
    --pw: calc(100vw - 2 * max(16px, calc(100 * var(--u))));
    width: var(--pw); max-width: none;
    padding: calc(var(--pw) * 16 / 290); gap: calc(var(--pw) * 20 / 290);
  }
  .price-row { gap: calc(var(--pw) * 5 / 290); }
  .price-amount { font-size: calc(var(--pw) * 44 / 290); }
  .cur { width: calc(var(--pw) * 40 / 290); height: calc(var(--pw) * 40 / 290); font-size: calc(var(--pw) * 18 / 290); }
  .footer { margin-top: var(--gap-section); }
  /* More room above and below the footer's links on a phone (you, Fri 6th November 2026). */
  .foot-nav { padding-top: 36px; padding-bottom: 36px; }
  .foot-top { top: 36px; }
}

/* ---- While a picture or film loads, its space shows a soft rectangle that
   gently fades in and out (you, Fri 6th November 2026). v2.js adds and
   removes .is-loading. ---- */
@keyframes fo-pulse { 0%, 100% { background-color: rgba(60, 60, 61, 0.07); } 50% { background-color: rgba(60, 60, 61, 0.2); } }
img.is-loading, video.is-loading { animation: fo-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { img.is-loading, video.is-loading { animation: none; background-color: rgba(60, 60, 61, 0.12); } }