/* Modern reset. Structural only: no colours, fonts or visual identity. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
  Frontstudio design tokens: Cinematic Glass Studio (design/cinematic-glass/DIRECTION.md).
  A lit porcelain room; the work stands in it as panes at different depths. No hue accent: the accent is light.
*/
:root {
  /* Typography: one family for display and interface, an italic serif for the annotation voice only. */
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-note: 'Newsreader', Georgia, serif;

  /* Colour */
  --porcelain: #f5f5f3;
  --silver: #e9eae8;
  --silver-2: #dcdedb;
  --graphite: #0f1013;
  --graphite-2: #16171b;
  --ink: #121316;
  --ink-soft: #5a5d64; /* 6.2:1 on porcelain */
  --bone: #f2f1ec;
  --bone-soft: #a6a8ad; /* 6.6:1 on graphite */
  --line: rgba(18, 19, 22, 0.1);
  --line-strong: rgba(18, 19, 22, 0.18);
  --line-dark: rgba(242, 241, 236, 0.12);
  --edge: rgba(255, 255, 255, 0.75);
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-dark: rgba(22, 23, 27, 0.62);
  --mark: #121316;

  /* Ambient light, derived from the work. Set per project on the stage (see .work [data-tint]). */
  --ambient-a: rgba(58, 74, 112, 0.55);
  --ambient-b: rgba(214, 168, 96, 0.35);

  /* Starter aliases (primitives.css and the form partial read these) */
  --color-bg: var(--porcelain);
  --color-text: var(--ink);
  --color-accent: var(--ink);
  --color-focus: var(--ink);
  --color-soft: var(--ink-soft);
  --color-rule: var(--line);
  --color-ink: var(--ink);
  --color-paper: var(--porcelain);

  /* Depth: three elevations, offset and tinted to graphite */
  --shadow-1: 0 1px 2px rgba(15, 16, 19, 0.06), 0 10px 24px -12px rgba(15, 16, 19, 0.16);
  --shadow-2: 0 2px 4px rgba(15, 16, 19, 0.06), 0 30px 60px -24px rgba(15, 16, 19, 0.28);
  --shadow-3: 0 4px 10px rgba(15, 16, 19, 0.08), 0 60px 110px -40px rgba(15, 16, 19, 0.45);
  --blur: 18px;

  /* Shape: a radius hierarchy, so not everything reads as one kit.
     CTA pill > large surfaces > panes/screens > inputs > tabs > small controls. Architectural surfaces (pricing, the
     enquiry form region) are square-cornered and carry frame marks instead. */
  --r-cta: 999px;
  --r-surface: 24px;
  --r-pane: 14px;
  --r-input: 10px;
  --r-tab: 9px;
  --r-control: 7px;
  --r-phone: 34px;
  --r-pill: var(--r-cta); /* alias kept for shared styles */
  --r-canvas: var(--r-surface);

  /* Layout */
  --container: 88rem;
  --container-max: var(--container); /* starter alias (primitives.css) */
  --gutter: clamp(20px, 4.2vw, 72px);
  --section: clamp(88px, 12vw, 168px);
  --section-space: var(--section); /* starter alias (primitives.css) */
  --space-s: 0.75rem;
  --space-m: 1.5rem;
  --space-l: 3rem;

  /* Interaction */
  --touch-target: 44px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 720ms;
}

/*
  Layout primitives and accessibility utilities. Composition-neutral building blocks (l- = layout, u- = utility).
  Client designs are free to ignore these for bespoke layouts.
*/
body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); }

/* Layout */
.l-container { width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; }
.l-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-m)); }
.l-cluster { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.l-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); }
.l-split { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 60rem) { .l-split { grid-template-columns: 1fr 1fr; } .is-image-end .l-split > :first-child { order: 2; } }
.l-prose { max-width: 68ch; }
.l-prose > * + * { margin-top: 1em; }

/* Section spacing options chosen in the Studio */
.c-section { padding-block: var(--section-space); }
.c-section.is-spacing-compact { padding-block: calc(var(--section-space) * 0.5); }
.c-section.is-spacing-spacious { padding-block: calc(var(--section-space) * 1.6); }
.c-section.is-centered { text-align: center; }

/* Accessibility utilities */
.u-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;
}
.u-skip-link { position: absolute; left: 0.5rem; top: -100%; z-index: 100; padding: 0.75rem 1rem; background: var(--color-bg); color: var(--color-text); }
.u-skip-link:focus { top: 0.5rem; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
main:focus { outline: none; }
.u-todo { background: #ffe58a; color: #000; }

/* Interactive minimums */
a, button, input, select, textarea { touch-action: manipulation; }
.c-button, .c-nav a, .c-mobile-actions a { min-height: var(--touch-target); display: inline-flex; align-items: center; }

/* Small-screen action bar: visible on phones only (client CSS decides the look) */
.c-mobile-actions { display: none; }
@media (max-width: 47.99rem) {
  .c-mobile-actions { display: flex; position: sticky; bottom: 0; gap: var(--space-s); justify-content: space-around; padding: 0.5rem; background: var(--color-bg); }
}

/* Form states (structure only) */
.c-field { display: grid; gap: 0.35rem; }
.c-field__error { font-weight: 600; }
[aria-invalid='true'] { outline: 2px solid; }

/*
  Frontstudio: Cinematic Glass Studio (design/cinematic-glass/DIRECTION.md).
  A lit porcelain room; the work stands in it as panes at different depths. Glass is used where something floats over
  the work (header, captions, notes, controls), never as decoration. Two motifs belong to Frontstudio and recur on every
  page: the form line (a hairline that is lit, with a ring at its head) and frame marks (viewfinder corners on the surface
  that matters). Enhanced states live under `.js` (set in the base layout); without scripts every project is stacked and
  readable and the page is complete.
*/

/* ---------- Fonts (self-hosted, SIL Open Font License, latin subset) ---------- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin-var.woff2') format('woff2');
}

/* ---------- Base ---------- */
html { scroll-padding-top: 96px; }
body { display: flex; flex-direction: column; min-height: 100vh; font: 400 1rem/1.55 var(--font-body); background: var(--porcelain); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
main { flex: 1 0 auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--ink); color: var(--porcelain); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
[data-dark] :focus-visible { outline-color: var(--bone); }
.u-skip-link { display: inline-flex; align-items: center; min-height: 44px; background: var(--ink); color: var(--porcelain); border-radius: var(--r-input); }
.u-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared type roles */
.t-section, .work__title, .process__title, .pricing__title, .faq__title { margin: 0; font-size: clamp(2rem, 1.15rem + 2.7vw, 3.6rem); line-height: 1.02; letter-spacing: -0.032em; font-stretch: 88%; font-weight: 600; }
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ---------- Frontstudio motifs ---------- */
/* The marker: a short form line with the ring at its head, above every section title (bone on dark sections). */
.marker { position: relative; display: block; width: 56px; height: 1px; margin: 0 0 26px; background: var(--line-strong); }
.marker::before { content: ''; position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: var(--ink); }
.marker::after { content: ''; position: absolute; left: 22px; top: 50%; width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 14px 4px rgba(255, 255, 255, 0.95); }
[data-dark] .marker { background: var(--line-dark); }
[data-dark] .marker::before { background: var(--bone); }
[data-dark] .marker::after { border-color: var(--bone); background: var(--bone); box-shadow: 0 0 0 3px rgba(242, 241, 236, 0.16), 0 0 16px 5px rgba(242, 241, 236, 0.28); }
/* Frame marks: hairline corners drawn just outside a square surface. --fm colour, --fl length, --fo offset. */
.frame { position: relative; }
.frame::before { content: ''; position: absolute; inset: calc(-1 * var(--fo, 7px)); z-index: 1; pointer-events: none; opacity: var(--fa, 1); transition: opacity 0.5s var(--ease);
  --g: linear-gradient(var(--fm, var(--ink)), var(--fm, var(--ink)));
  background: var(--g) 0 0 / var(--fl, 16px) 1px no-repeat, var(--g) 0 0 / 1px var(--fl, 16px) no-repeat,
    var(--g) 100% 0 / var(--fl, 16px) 1px no-repeat, var(--g) 100% 0 / 1px var(--fl, 16px) no-repeat,
    var(--g) 0 100% / var(--fl, 16px) 1px no-repeat, var(--g) 0 100% / 1px var(--fl, 16px) no-repeat,
    var(--g) 100% 100% / var(--fl, 16px) 1px no-repeat, var(--g) 100% 100% / 1px var(--fl, 16px) no-repeat; }
/* The ring node used by the form lines */
.ring { position: absolute; width: 11px; height: 11px; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 20px 6px rgba(255, 255, 255, 0.9); pointer-events: none; }

/* ---------- Buttons and links ---------- */
.c-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--r-cta); border: 1px solid transparent; background: var(--ink); color: var(--porcelain); font: 600 1rem/1 var(--font-body); letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(15, 16, 19, 0.2), 0 10px 24px -12px rgba(15, 16, 19, 0.55);
  transition: transform 0.25s var(--ease-out), box-shadow var(--t-fast), background-color var(--t-fast); }
.c-button:hover { background: #1e2026; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(15, 16, 19, 0.2), 0 16px 32px -14px rgba(15, 16, 19, 0.6); }
.c-button:active { transform: scale(0.97); transition-duration: 80ms; }
.c-button--small { min-height: 42px; padding: 0 18px; font-size: 0.92rem; }
.c-button--light { background: var(--bone); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.35), 0 24px 60px -20px rgba(242, 241, 236, 0.55); }
.c-button--light:hover { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.5), 0 30px 70px -20px rgba(242, 241, 236, 0.7); }
.c-link { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; text-decoration: none; }
.c-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; opacity: 0.45; transform: scaleX(0.4); transform-origin: left; transition: transform 0.32s var(--ease-out), opacity var(--t-fast); }
.c-link:hover::after, .c-link:focus-visible::after { transform: scaleX(1); opacity: 1; }
.c-link--light { color: var(--bone); }

/* ---------- Header: floating glass bar ---------- */
.c-header { position: fixed; inset: 0 0 auto 0; z-index: 60; padding: 14px var(--gutter) 0; pointer-events: none; }
.c-header__bar { pointer-events: auto; position: relative; max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: 20px; min-height: 60px; padding: 6px 8px 6px 20px; border-radius: var(--r-pane); border: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease); }
.c-header.is-scrolled .c-header__bar, .c-header.is-open .c-header__bar { background: var(--glass); border-color: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 var(--edge), 0 1px 2px rgba(15, 16, 19, 0.05), 0 14px 36px -18px rgba(15, 16, 19, 0.25); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4); backdrop-filter: blur(var(--blur)) saturate(1.4); }
.c-header.is-over-dark .c-header__bar { background: var(--glass-dark); border-color: rgba(255, 255, 255, 0.14); color: var(--bone); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 36px -18px rgba(0, 0, 0, 0.5); }
.c-brand { display: inline-flex; align-items: center; min-height: var(--touch-target); font-weight: 650; font-size: 1.12rem; font-stretch: 90%; letter-spacing: -0.02em; text-decoration: none; }
.c-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.c-nav__list { display: flex; gap: 2px; }
.c-nav__list a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: var(--r-control); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: background-color var(--t-fast), color var(--t-fast); }
.c-nav__list a:hover { background: rgba(18, 19, 22, 0.06); }
.c-header.is-over-dark .c-nav__list a:hover { background: rgba(255, 255, 255, 0.1); }
.c-header.is-over-dark .c-nav__cta { background: var(--bone); color: var(--ink); }
/* Over the hero's sky (the homepage at rest, motion.js): white type with a breath of shadow, the CTA a light glass pill. */
.c-header.is-over-hero:not(.is-open) .c-header__bar { color: #fff; text-shadow: 0 1px 2px rgba(8, 20, 44, 0.4); }
/* The brand sits in the top-left corner, which is where the sun enters the plate: the brightest point on the page and
   the one place white type cannot hold 4.5:1 on the shade alone. It carries its own halo rather than the sky being
   darkened for it, so the light stays in the photograph and only the site's name is protected. */
.c-header.is-over-hero:not(.is-open) .c-brand { text-shadow: 0 1px 2px rgba(6, 16, 38, 0.62), 0 0 4px rgba(6, 16, 38, 0.9), 0 0 9px rgba(6, 16, 38, 0.82), 0 0 20px rgba(6, 16, 38, 0.7), 0 0 38px rgba(6, 16, 38, 0.52); }
.c-header.is-over-hero:not(.is-open) .c-nav__list a:hover { background: rgba(255, 255, 255, 0.12); }
.c-header.is-over-hero:not(.is-open) .c-nav__cta { background: rgba(255, 255, 255, 0.86); color: var(--ink); text-shadow: none; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 28px -12px rgba(8, 20, 44, 0.5); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
.c-header.is-over-hero:not(.is-open) .c-nav-toggle { border-color: rgba(255, 255, 255, 0.55); }
.c-nav-toggle { display: none; }

/* ---------- Hero: FRONTSTUDIO over the mountains ---------- */
/* Planes, back to front: the photographic plate, a shade across the top for the white navigation, two bands of mist the
   scroll choreography raises (invisible at rest), a light lift under the copy, the paper wash, the foot; then the wordmark
   in glass, the copy and the devices standing on the rock. The poster colours (plates.json) hold the plate's tone until
   it loads, and hold the hero on a pale sky when there is no plate at all. The photograph is held back rather than
   dressed up: colour pulled to --plate-saturation and --plate-veil of paper lifted into the sky and the mountains,
   clear of both the header band and the foreground rock. Readability still comes from local lifts only. */
.hero { position: relative; isolation: isolate; overflow: clip; min-height: 100svh; padding: clamp(104px, 12.8vh, 140px) 0 clamp(28px, 4vh, 48px); padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto auto auto auto auto 1fr; column-gap: clamp(24px, 4vw, 64px); align-content: start;
  background: linear-gradient(180deg, var(--poster-top, #e4e9ef), var(--poster-bottom, var(--porcelain)));
  /* How far the photograph sits back. Colour pulled to 80% and 16% of the page's own paper lifted into the air:
     the mountains read as background rather than as a poster. Tune here; the wordmark's glass is matched in
     scripts/hero-plates.mjs (saturation 0.69 = 0.86 frost x this 0.8), so change the two together. */
  --plate-saturation: 0.8; --plate-veil: 0.16; }
.hero__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__plate { position: absolute; inset: 0; display: block; }
/* The plate opens at a slight push-in and settles back as --p runs: the camera coming to rest, not a zoom.
   Pinned to the left edge: the plate is wider than the hero at every width below 1920, and the sun's core lives in the
   leftmost 6% of the photograph, so a centred crop threw the light away. The vertical half is inert below 1920 (the
   plate is wider than 16:9, so cover fits its full height into the hero and leaves no vertical slack to move); 58%
   only takes effect on viewports wider than 1.77:1. */
.hero__plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 58%; transform-origin: 50% 62%; transform: scale(calc(1.06 - 0.06 * var(--p))) translateY(calc(var(--p) * -1.2%)); will-change: transform; filter: saturate(var(--plate-saturation, 0.8)); }
/* Paper in the air. The veil starts below the header band, so the navigation keeps the sky its contrast was measured
   against, and it is gone by 82%, so the rock the devices stand on keeps its depth and the contact shadows still have
   something dark to read against. Inside .hero__plate, so every scene plane above it (mist, wash, foot) still lands on top. */
.hero__plate::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(245, 245, 243, 0) 7%, rgba(245, 245, 243, var(--plate-veil, 0.16)) 26%, rgba(245, 245, 243, calc(var(--plate-veil, 0.16) * 0.86)) 56%, rgba(245, 245, 243, 0) 82%); }
/* A shade across the top of the sky so the white navigation holds its contrast over any plate; gone by 15% down. */
.hero__scene::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16%; z-index: 1; background: linear-gradient(180deg, rgba(10, 24, 52, 0.36), rgba(10, 24, 52, 0.12) 55%, rgba(10, 24, 52, 0)); }
/* Mist: two soft bands over the valley. Invisible at rest; they rise and thicken with --p, which is how the scene begins
   to give way to the page. */
.hero__mist { position: absolute; left: -8%; right: -8%; will-change: transform, opacity; }
.hero__mist--far { top: 40%; height: 30%; opacity: calc(0.9 * var(--p)); transform: translateY(calc(var(--p) * -6%)); background: radial-gradient(70% 60% at 45% 55%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%); }
.hero__mist--near { top: 56%; height: 44%; opacity: var(--p); transform: translateY(calc(var(--p) * -9%)); background: radial-gradient(80% 70% at 30% 60%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%); }
/* The lift under the copy: a soft brightening only where the copy sits (the valley haze in the plate does most of it). */
.hero__scrim { position: absolute; left: -8%; top: 30%; width: 58%; height: 52%; background: radial-gradient(50% 48% at 42% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%); }
/* The wash: paper rising from the foot as --p runs, so the hold releases onto the page's own ground; the top stays clear
   for the wordmark. The foot is the last 9% of the hero, always paper, so the photograph dissolves into the page instead
   of ending on a seam, with or without scripts or motion. */
.hero__wash { position: absolute; inset: 0; opacity: var(--p); will-change: opacity; background: linear-gradient(180deg, rgba(245, 245, 243, 0) 22%, rgba(245, 245, 243, 0.62) 52%, var(--porcelain) 88%); }
.hero__foot { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(180deg, rgba(245, 245, 243, 0), rgba(245, 245, 243, 0.55) 48%, var(--porcelain)); }
.hero__copy { display: contents; }
/* The name, set across the room in glass. On wide screens the two lines flatten into one row that spans the measure:
   motion.js sizes the type so the word runs edge to edge at its natural tracking (--mark-size); without scripts the
   letters are spread across the measure instead. z-index 2 keeps it under the devices, which stand in front of everything. */
.hero__title { position: relative; z-index: 2; grid-column: 1 / -1; grid-row: 1; margin: 0; transform: translateY(calc(var(--p) * -14px)); will-change: transform; }
.hero__mark { display: flex; justify-content: space-between; font-size: var(--mark-size, clamp(2.4rem, 16vw, 15rem)); line-height: 0.8; letter-spacing: -0.015em; font-stretch: 82%; font-weight: 700; text-transform: uppercase; color: #fff;
  /* The material's edges, drawn on the silhouette: a bright rim on the top-left edges (the sun), a cool shade on the
     bottom-right edges (the thickness of the ice), a hairline of light, a soft bloom, and the mark's own shadow. */
  filter: drop-shadow(-2px -2.5px 0 rgba(255, 255, 255, 0.95)) drop-shadow(1.5px 2px 0 rgba(36, 62, 108, 0.32)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 28px rgba(255, 255, 255, 0.42)) drop-shadow(0 22px 40px rgba(20, 40, 76, 0.22)); }
.hero__line { display: contents; }
.hero__ltr { display: block; flex: 0 0 auto; overflow: hidden; padding: 0.08em 0.03em 0.12em; margin: -0.08em -0.03em -0.12em; }
.hero__ltr-in { display: block; transform: translateY(110%); animation: word-up 1.05s var(--ease-out) forwards; animation-delay: calc(90ms + var(--i, 0) * 52ms); }
/* Glass: each letter is filled with the plate itself, aligned with the photograph behind it (motion.js sets the plate's
   rendered size and offsets; without scripts each glyph shows the top of the plate), under a frost that is lighter at the
   top and bottom edges than in the middle, the sunlight coming in from the left across the whole word, two refractions
   (diagonal streaks of light, placed differently in every letter by --i) and one specular glint near the top left. The
   letters are never a flat white: they are brighter than the sky where the light enters and clearer where it does not. */
.hero--plate { --glass: var(--glass-wide); }
.hero--plate .hero__ltr-in { color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat;
  background-image:
    radial-gradient(22% 26% at calc(20% + var(--i, 0) * 5%) 16%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 100%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) calc(26% + var(--i, 0) * 3.5%), rgba(255, 255, 255, 0.5) calc(36% + var(--i, 0) * 3.5%), rgba(255, 255, 255, 0) calc(45% + var(--i, 0) * 3.5%)),
    linear-gradient(62deg, rgba(255, 255, 255, 0) calc(58% - var(--i, 0) * 2.5%), rgba(255, 255, 255, 0.3) calc(66% - var(--i, 0) * 2.5%), rgba(255, 255, 255, 0) calc(73% - var(--i, 0) * 2.5%)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.34) 32%, rgba(255, 255, 255, 0.32) 64%, rgba(255, 255, 255, 0.44)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26) 28%, rgba(255, 255, 255, 0.2) 58%, rgba(255, 255, 255, 0.28)),
    var(--glass);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, var(--glass-size, 100% 100%), var(--plate-size, 100vw auto);
  background-position: 0 0, 0 0, 0 0, 0 0, calc(var(--x, 0) * -1px) 0, calc((var(--px, 0) - var(--mx, 0) - var(--x, 0)) * 1px) calc((var(--py, 0) - var(--my, 0) - var(--y, 0)) * 1px); }
.hero__marker { grid-column: 1; grid-row: 2; align-self: start; margin: clamp(20px, 3vh, 36px) 0 0; }
/* The claim is set light and large, as in the render: a quiet line under a loud one. */
.hero__claim { grid-column: 1; grid-row: 3; align-self: start; margin: 14px 0 0; font-size: clamp(1.7rem, 1.05rem + 2.05vw, 3.1rem); line-height: 1.06; letter-spacing: -0.035em; font-weight: 460; max-width: 14ch; text-wrap: balance; color: var(--ink); }
.hero__lede { grid-column: 1; grid-row: 4; align-self: start; margin: 18px 0 0; font-size: clamp(1.02rem, 0.94rem + 0.36vw, 1.2rem); line-height: 1.5; max-width: 35ch; color: #3b3f48; }
.hero__actions { grid-column: 1; grid-row: 5; align-self: start; display: flex; align-items: center; gap: 28px; margin: 28px 0 0; flex-wrap: wrap; }
.hero__actions .c-button { padding-right: 22px; }
.hero__actions .c-button svg { flex: 0 0 auto; }
.seq { opacity: 0; transform: translateY(14px); filter: blur(5px); animation: seq-in 0.9s var(--ease-out) forwards; animation-delay: calc(140ms + var(--i, 0) * 85ms); }
@keyframes word-up { to { transform: none; } }
@keyframes seq-in { to { opacity: 1; transform: none; filter: none; } }

/* The stage: the two devices standing on the foreground rock, in the second column under the wordmark. It runs to the
   hero's bottom edge, so the devices are placed by their feet: the laptop's base stands at 21% of the viewport from the
   bottom and the phone's foot at 17%, which is where the render sets them on the rock. Panes may overflow the cell. */
.hero__stage { position: relative; z-index: 3; grid-column: 2; grid-row: 2 / -1; align-self: stretch; min-height: clamp(340px, 52vh, 600px); margin: clamp(6px, 2vh, 24px) 0 calc(-1 * clamp(28px, 4vh, 48px)); }
/* Sunlight on the shelf the devices stand on. The photograph puts them on a shaded fold of the rock, where a contact
   shadow has nothing to read against; this is the low warm light of the rest of the scene, brought onto that one
   surface so the feet have something to sit on. It fades with the scene, like the shadows, and never reaches the copy. */
.hero__stage::before { content: ''; position: absolute; left: -6%; right: -14%; bottom: 2%; height: 34%; z-index: 0; pointer-events: none; opacity: calc(1 - var(--p)); filter: blur(18px);
  background: radial-gradient(58% 50% at 46% 62%, rgba(255, 236, 202, 0.46), rgba(255, 232, 198, 0.2) 52%, rgba(255, 230, 195, 0) 78%); }
.pane { position: absolute; margin: 0; will-change: transform; }
/* The ground: a pool of shadow under each device where it meets the rock, wider than the device itself so it reads as
   occlusion on the surface rather than a smudge hidden behind the object. It fades with the scene, like the shadows. */
.pane::before { content: ''; position: absolute; left: -12%; right: -12%; bottom: -7%; height: 14%; z-index: -1; border-radius: 50%; opacity: calc(1 - var(--p)); filter: blur(9px);
  background: radial-gradient(50% 50% at 50% 50%, rgba(6, 10, 18, 0.72), rgba(6, 10, 18, 0.38) 45%, rgba(6, 10, 18, 0) 74%); }
.pane__screen { position: relative; overflow: hidden; background: var(--graphite); }
.pane__screen img { display: block; width: 100%; height: auto; }
/* A trace of sky on the glass of each screen, top left where the light comes from. Faint: the work stays faithful. */
.pane__screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0) 48%); }
/* The laptop: a black bezel inside a thin aluminium edge, and a slim base whose top catches the sky. Two shadows: a
   tight one where it meets the rock and a longer one cast down and to the right, away from the sun; both fade as the
   scene washes out, so no shadow is left lying on paper. */
.laptop { position: relative; will-change: transform, filter; filter: drop-shadow(0 5px 5px rgba(6, 10, 18, calc(0.62 - 0.5 * var(--p)))) drop-shadow(26px 34px 32px rgba(8, 14, 26, calc(0.5 - 0.4 * var(--p)))); }
.laptop__lid { position: relative; padding: 7px 7px 8px; border-radius: 12px 12px 3px 3px; background: linear-gradient(175deg, #232429, #0b0c0f 45%, #141519);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1.5px #b3b7bf, 0 0 0 2.5px rgba(255, 255, 255, 0.4); }
.laptop__lid .pane__screen { border-radius: 6px; }
/* Light along the lid's top edge, warm and strongest at the left, and a thread of it down the left edge. */
.laptop__lid::before { content: ''; position: absolute; left: 6%; right: 18%; top: 0; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255, 250, 240, 0.95), rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0)); }
.laptop__lid::after { content: ''; position: absolute; left: 0; top: 6%; bottom: 20%; width: 1px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 250, 240, 0.7), rgba(255, 255, 255, 0)); }
.laptop__base { position: relative; height: 12px; margin: 0 -3%; border-radius: 2px 2px 10px 10px; background: linear-gradient(180deg, #e6e8ec, #c5c9d0 32%, #9ca1aa 70%, #6b7079); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.3); }
.laptop__base::before { content: ''; position: absolute; left: 0; top: 0; width: 42%; height: 1px; background: linear-gradient(90deg, rgba(255, 250, 240, 0.95), rgba(255, 255, 255, 0)); }
.laptop__base::after { content: ''; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 15%; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #80858e, #5b6068); }
.pane--desktop { z-index: 3; left: auto; right: 0; bottom: 21svh; width: min(100%, 37vw); }
/* The angles are the composition at --p: 0, a slight turn and a view from just above. As --p runs to 1 (the scroll
   choreography below) the laptop squares up and comes forward, and the phone steps forward. */
.pane--desktop .laptop { transform: perspective(1600px) rotateY(calc(5deg * (1 - var(--p)))) rotateX(calc(3deg * (1 - var(--p)))) scale(calc(1 + 0.04 * var(--p))); transform-origin: 50% 100%; }
.pane--phone { z-index: 4; left: -1%; bottom: 17svh; width: clamp(128px, 10.8vw, 176px); }
.pane--phone .phone { transform: perspective(1600px) rotate(calc(-4deg * (1 - var(--p)))) rotateY(calc(9deg * (1 - var(--p)))) translate(calc(14% * var(--p)), calc(-4% * var(--p))) scale(calc(1 + 0.06 * var(--p))); transform-origin: 50% 100%; }
.phone { position: relative; will-change: transform, filter; border-radius: var(--r-phone); padding: 7px; background: linear-gradient(160deg, #2b2c31, #0d0e11 58%, #1a1b1f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1.5px #45474d, 0 0 0 2.5px rgba(255, 255, 255, 0.24);
  filter: drop-shadow(0 4px 4px rgba(6, 10, 18, calc(0.62 - 0.5 * var(--p)))) drop-shadow(19px 26px 24px rgba(8, 14, 26, calc(0.5 - 0.4 * var(--p)))); }
.phone img { display: block; width: 100%; height: auto; border-radius: calc(var(--r-phone) - 7px); background: var(--graphite); }
.phone::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 14%; width: 1px; z-index: 1; border-radius: 1px; background: linear-gradient(180deg, rgba(255, 250, 240, 0.8), rgba(255, 255, 255, 0.2)); }
.phone::after { content: ''; position: absolute; inset: 7px; border-radius: calc(var(--r-phone) - 7px); pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 36%); }
.chip { position: absolute; z-index: 5; display: inline-flex; align-items: baseline; gap: 10px; margin: 0; padding: 9px 14px; border-radius: var(--r-control); white-space: nowrap; font-size: 0.82rem; line-height: 1.2; color: var(--ink);
  background: var(--glass-strong); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 0 #fff, var(--shadow-1); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.chip__name { font-weight: 600; }
.chip__kind { color: var(--ink-soft); }
.pane--desktop .chip { right: 4px; bottom: -44px; }
.hero__caption { display: none; }

/* Scroll choreography: as the first screen scrolls, the scene gives way to the page. On wide screens the hero holds
   (position: sticky inside .hero-frame, whose height motion.js sets once it knows the hero fits the viewport) while --p
   runs from 0 to 1: the plate settles, the mist rises, the paper wash climbs from the foot, the wordmark lifts and the
   devices square up. Phones skip the hold and run the same choreography over the first half-screen of scroll. Reduced
   motion and no scripts: no hold, --p stays 0, the opening composition as a still, dissolving into paper at its foot. */
.hero { --p: 0; }
.hero-frame { position: relative; }
.js .hero-frame.is-pinned .hero { position: sticky; top: 0; }

/* ---------- Inset canvas (the room) ---------- */
.canvas { position: relative; isolation: isolate; border-radius: var(--r-surface); background: linear-gradient(180deg, var(--silver), var(--silver-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.35), var(--shadow-1); overflow: hidden; }
.canvas__light { position: absolute; inset: -12%; z-index: 0; pointer-events: none; opacity: 0.9; transition: opacity 0.6s var(--ease);
  background: radial-gradient(42% 44% at 50% 58%, var(--ambient-a), rgba(0, 0, 0, 0) 70%), radial-gradient(26% 30% at 86% 18%, var(--ambient-b), rgba(0, 0, 0, 0) 70%); }
/* The ambient light is derived from each project's own palette, never a generic tint for its trade. */
.work__canvas[data-tint='aphelion'] { --ambient-a: rgba(50, 64, 104, 0.6); --ambient-b: rgba(214, 168, 96, 0.3); }      /* deep slate and a gold spark */
.work__canvas[data-tint='salon'] { --ambient-a: rgba(78, 40, 66, 0.62); --ambient-b: rgba(198, 150, 72, 0.4); }        /* aubergine and gold */
.work__canvas[data-tint='electrician'] { --ambient-a: rgba(180, 69, 26, 0.34); --ambient-b: rgba(47, 94, 168, 0.2); }  /* the concept's copper on paper, a trace of cable-core blue */
.work__canvas[data-tint='dental'] { --ambient-a: rgba(150, 122, 96, 0.42); --ambient-b: rgba(255, 250, 240, 0.6); }    /* the live site's warm cream and ink */
.work__canvas[data-tint='kaza'] { --ambient-a: rgba(16, 18, 22, 0.58); --ambient-b: rgba(36, 86, 201, 0.2); }         /* the workshop's ink and the unit's blue trim */

/* ---------- Selected work: the stage ---------- */
.work { max-width: var(--container); margin: 0 auto; padding: var(--section) var(--gutter) 0; }
.work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 28px; }
.work__legend { margin: 0 0 0.35em; font: italic 500 1.12rem/1.4 var(--font-note); color: var(--ink-soft); max-width: 30ch; }
.work__canvas { padding: 22px 0 26px; }
.work__bar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 24px 16px; }
/* Level one: the project index. One glass surface holding a numbered strip of projects. Where the names do not fit
   (tablets, phones) the strip scrolls sideways natively and the edge that has more fades (.has-more-*, showcase.js).
   Level two, the views inside a project, is the rail below with its own controls and counter. */
.projects { position: relative; flex: 0 1 auto; min-width: 0; padding: 4px; border-radius: var(--r-tab); background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 #fff, var(--shadow-1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.projects__strip { position: relative; display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; border-radius: calc(var(--r-tab) - 3px); }
.projects__strip::-webkit-scrollbar { display: none; }
.projects.has-more-right .projects__strip { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.projects.has-more-left .projects__strip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.projects.has-more-left.has-more-right .projects__strip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.project-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; min-height: 40px; white-space: nowrap; padding: 0 15px 0 12px; border: 0; border-radius: calc(var(--r-tab) - 3px); background: transparent; color: var(--ink-soft); font: 500 0.95rem/1 var(--font-body); cursor: pointer; scroll-snap-align: center; transition: color var(--t-fast), background-color 0.22s var(--ease-out), box-shadow 0.22s; }
.project-tab__num { font-size: 0.68rem; letter-spacing: 0.04em; opacity: 0.7; transition: opacity var(--t-fast); }
.project-tab:hover { color: var(--ink); }
.project-tab:hover .project-tab__num { opacity: 1; }
.project-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.project-tab[aria-selected='true'] { background: var(--ink); color: var(--porcelain); box-shadow: 0 3px 8px -3px rgba(15, 16, 19, 0.5); }
.project-tab[aria-selected='true']:focus-visible { outline-color: var(--porcelain); }
.project-tab[aria-selected='true'] .project-tab__num { opacity: 0.6; }
.project-tab__short { display: none; }
.preview-tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-control); background: #ffe58a; color: #3b2f00; font-size: 0.72rem; font-weight: 600; }
.controls { display: flex; align-items: center; gap: 6px; }
.control { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-tab); border: 1px solid rgba(255, 255, 255, 0.72); background: var(--glass); color: var(--ink); cursor: pointer; box-shadow: inset 0 1px 0 #fff, var(--shadow-1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast), opacity var(--t-fast); }
.control svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.control:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
.control:active:not(:disabled) { transform: scale(0.95); }
.control:disabled { opacity: 0.35; cursor: default; }
.counter { display: flex; gap: 6px; justify-content: center; min-width: 64px; margin: 0; font-size: 0.9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.work__stage { position: relative; z-index: 1; }
/* With scripts, only the current project is laid out from the first paint (the first panel carries .is-current from the
   server), so the other projects' lazy images are not fetched until their project is chosen. Without scripts every
   project is stacked. showcase.js keeps `hidden` and .is-current in step. */
.panel[hidden], .js .panel:not(.is-current) { display: none; }
.panel__head { padding: 0 24px 12px; }
.panel__name { margin: 0; font-size: 1.3rem; letter-spacing: -0.02em; }
.panel__status { margin: 4px 0 0; color: var(--ink-soft); }
ol.rail { --frame-h: clamp(380px, 60vh, 660px); --pane-w: calc(var(--frame-h) * 1.6); --gap: clamp(20px, 3vw, 40px); display: flex; align-items: flex-start; gap: var(--gap); margin: 0; padding: 10px var(--pad-end, calc((100% - var(--pane-w)) / 2)) 22px var(--pad-start, calc((100% - var(--pane-w)) / 2)); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail:focus-visible { outline: none; }
.rail:focus-visible .moment.is-active .shot { outline: 2px solid var(--ink); outline-offset: 5px; }
.moment { flex: 0 0 auto; width: calc(var(--frame-h) * var(--r, 1.6)); scroll-snap-align: center; transition: opacity 0.55s var(--ease-out); }
/* The peek: the views either side of the active one show as a sliver at the canvas's edges, which is what says the rail
   can be swiped (on phones the arrows are hidden, so it is the only thing that says so). The views are capped against
   the stage's own width rather than the viewport's, so at least --peek of each neighbour is always inside the canvas;
   above 900px the natural width is usually narrower than the cap and the neighbours show more. A neighbour steps back
   from the edge it shares with the active view, so the gap between them holds and the sliver is not eaten by the scale.
   That scale is on the figure, never on the .moment: snap positions are taken from the transformed box, and a view
   scaled off-centre would snap off-centre, then grow into the wrong place. It is a picture only: its caption, mark and enlarge button wait until it is the active view, so nothing half-cut
   leaks in at the edge and the enlarge buttons of views that are not showing are not tab stops. A click or tap on a
   neighbour brings it to the centre (showcase.js). Without container units this whole block is skipped. */
@supports (width: 1cqi) {
  .work__stage { container-type: inline-size; }
  ol.rail { --peek: clamp(20px, 6.5cqi, 56px); --pane-max: calc(100cqi - 2 * (var(--peek) + var(--gap))); }
  .moment { max-width: var(--pane-max); }
}
.js .moment { opacity: 0.55; }
.js .moment figure { transform: scale(0.94); transform-origin: 100% 50%; }
.js .moment.is-active ~ .moment figure { transform-origin: 0 50%; }
.js .moment.is-active { opacity: 1; }
.js .moment.is-active figure { transform: none; }
.js .rail:not(.is-dragging) .moment:not(.is-active) { cursor: pointer; }
.moment figcaption, .moment .mark { transition: opacity 0.35s var(--ease-out); }
.js .moment:not(.is-active) figcaption, .js .moment:not(.is-active) .mark { opacity: 0; }
.js .moment:not(.is-active) .enlarge { visibility: hidden; }
.js .moment:not(.is-active) .shot { max-height: var(--active-h, none); } /* showcase.js: never taller than the active frame */
.moment figure { margin: 0; transition: transform 0.55s var(--ease-out), transform-origin 0.55s var(--ease-out); }
.shot { position: relative; border-radius: var(--r-pane); overflow: hidden; background: var(--graphite); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.14); outline: 1px solid rgba(255, 255, 255, 0.36); outline-offset: -1px; }
.shot img { display: block; width: 100%; height: auto; }
.moment--phone .shot { border-radius: 32px; padding: 8px; background: linear-gradient(160deg, #2c2d33, #0f1013 58%, #1c1d22); }
.moment--phone .shot img { border-radius: 24px; }
.mark { position: absolute; left: var(--x); top: var(--y); z-index: 2; translate: -50% -50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: italic 500 0.98rem/1 var(--font-note); color: var(--ink); background: var(--glass-strong); border: 1px solid rgba(255, 255, 255, 0.92); box-shadow: 0 3px 10px rgba(15, 16, 19, 0.28), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mark--static { position: static; translate: none; flex: 0 0 auto; }
.moment.is-active .mark::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.85); opacity: 0; }
.enlarge { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.85); background: var(--glass-strong); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-1), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.2s, transform var(--t-fast) var(--ease-out); }
.enlarge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shot:hover .enlarge, .enlarge:focus-visible, .moment.is-active .enlarge { opacity: 1; }
.enlarge:hover { transform: scale(1.06); }
.moment figcaption { display: flex; gap: 10px; align-items: baseline; padding: 14px 6px 0; font-size: 0.9rem; }
.cap-title { font-weight: 600; }
.cap-view { color: var(--ink-soft); }
.cap-note { display: block; width: 100%; font: italic 500 1rem/1.45 var(--font-note); color: var(--ink-soft); }
.js .cap-note { display: none; }
/* The foot: one band under the rail rather than two boxes standing on it. A hairline divides it from the views, the
   note hangs off its own numeral, and the wall label's three facts are separated by lighter rules on the same surface.
   Nothing here is a card: the canvas is already the surface, and a second radius inside it reads as packaging. Two
   weights of rule on purpose — --line-strong for the divide that matters, --line for the ones inside it. */
.panel__foot { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 clamp(28px, 3.4vw, 56px); align-items: start; margin: 20px 24px 0; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.note { display: flex; gap: 16px; align-items: flex-start; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.note__mark { flex: 0 0 auto; margin-top: 0.12em; }
.note__text { margin: 0; max-width: 46ch; font: italic 500 clamp(1.1rem, 1rem + 0.42vw, 1.42rem)/1.36 var(--font-note); transition: opacity var(--t-fast), transform var(--t-fast); }
.note.is-changing .note__text { opacity: 0; transform: translateY(4px); }
.wall-label { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; font-size: 0.86rem; }
.wall-label > div { padding-left: clamp(14px, 1.4vw, 22px); border-left: 1px solid var(--line); }
.wall-label > div:first-child { padding-left: 0; border-left: 0; }
.wall-label dt { margin-bottom: 7px; color: #44474e; /* --ink-soft was 4.47:1 at worst on the tinted canvas, at 10.9px */ font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.wall-label dd { margin: 0; font-weight: 500; line-height: 1.42; }
.js .panel__head { display: none; }
.js .panel.is-entering { animation: panel-in 0.6s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: scale(0.985); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
html:not(.js) .projects, html:not(.js) .controls, html:not(.js) .note, html:not(.js) .enlarge { display: none; }
html:not(.js) .panel + .panel { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-strong); }

/* Enlarged view */
.viewer { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 94vh; overflow: visible; }
.viewer::backdrop { background: rgba(15, 16, 19, 0.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.viewer form { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.viewer__close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--r-control); background: var(--glass-strong); color: var(--ink); font: 600 0.95rem/1 var(--font-body); cursor: pointer; box-shadow: inset 0 1px 0 #fff; }
.viewer__scroll { max-height: calc(94vh - 60px); overflow: auto; border-radius: var(--r-pane); box-shadow: var(--shadow-3); }
.viewer__img { display: block; width: 100%; height: auto; }
.viewer--phone .viewer__scroll { max-width: 420px; margin: 0 auto; }

/* ---------- How it works: four stages down one lit line ---------- */
.process { max-width: var(--container); margin: 0 auto; padding: var(--section) var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px clamp(40px, 5vw, 80px); align-items: start; }
.process__head { position: sticky; top: 112px; }
.process__title { max-width: 14ch; }
.process__journey { position: relative; padding-left: clamp(26px, 3vw, 44px); }
.process__line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.process__fill { position: absolute; inset: 0; background: var(--ink); transform-origin: top; transform: scaleY(var(--progress, 0)); transition: transform 0.15s linear; }
.process__node { position: absolute; left: 50%; top: calc(var(--progress, 0) * 100%); width: 11px; height: 11px; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 20px 6px rgba(255, 255, 255, 0.9); transition: top 0.15s linear; }
.process__steps { margin: 0; padding: 0; list-style: none; }
.step { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.48fr) minmax(0, 1fr); gap: 8px clamp(20px, 3vw, 40px); align-items: start; padding: clamp(26px, 3vw, 40px) clamp(18px, 2.4vw, 32px); border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
/* The active stage: a glass plate rises behind the row and the frame marks lock on to it */
.step::after { content: ''; position: absolute; inset: 8px 0; z-index: -1; background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: inset 0 1px 0 #fff, var(--shadow-1); opacity: 0; transition: opacity 0.5s var(--ease); }
.step.frame::before { inset: 8px 0; --fo: 0px; --fl: 14px; opacity: 0; }
.step.is-active::after, .step.is-active.frame::before { opacity: 1; }
.step__num { margin: -0.06em 0 0; font-size: clamp(4.2rem, 6.8vw, 7.2rem); line-height: 0.86; font-weight: 500; letter-spacing: -0.06em; font-stretch: 82%; color: var(--silver-2); font-variant-numeric: tabular-nums; transition: color 0.5s var(--ease); }
.step.is-done .step__num { color: rgba(18, 19, 22, 0.28); }
.step.is-active .step__num { color: var(--ink); }
.step__title { margin: 0.28em 0 8px; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2rem); line-height: 1.05; letter-spacing: -0.025em; font-stretch: 92%; }
.step__text { margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }
html:not(.js) .process__fill { transform: none; }
html:not(.js) .process__node { display: none; }
html:not(.js) .step__num { color: var(--ink); }

/* ---------- Pricing: one architectural surface, four offers ---------- */
.pricing { max-width: var(--container); margin: 0 auto; padding: var(--section) var(--gutter) 0; }
.pricing__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; margin-bottom: 44px; }
.pricing__intro { margin: 0 0 0.4em; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }
/* The surface: square-cornered, translucent, one hairline, frame marks just outside its corners. Offers are regions of it,
   divided by shared rules; only Business has its own material. */
.surface { position: relative; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(18, 19, 22, 0.16); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.7), var(--shadow-2); }
.tiers { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); grid-template-areas: 'hero starter' 'hero plus' 'shop shop'; margin: 0; padding: 0; list-style: none; }
.tier { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head price' 'for for' 'scope scope'; gap: 4px 24px; align-content: start; padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.8vw, 40px); }
.tier--starter { grid-area: starter; }
.tier--business-plus { grid-area: plus; border-top: 1px solid var(--line-strong); }
.tier--shop { grid-area: shop; border-top: 1px solid var(--line-strong); grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.4fr) auto; grid-template-areas: 'head for price' 'scope scope scope'; gap: 6px clamp(24px, 3vw, 48px); }
.tier--shop .tier__for { margin-top: 0; max-width: 52ch; }
.tier--shop ul.tier__scope { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.tier--shop ul.tier__scope li { border-bottom: 0; }
.tier__head { grid-area: head; }
.tier__name { margin: 0; font-size: 1.22rem; letter-spacing: -0.02em; }
.tier__size { margin: 3px 0 0; color: var(--ink-soft); font-size: 0.92rem; }
/* The delivery time sits under the page count as a second line, quieter than it: it is a promise, so it belongs
   beside the price where someone comparing quotes will see it, not only in the FAQ. Owner decision 2026-09-20. */
.tier__timing { display: block; margin-top: 2px; font-size: 0.86rem; color: #5a5d64; }
.tier--hero .tier__timing { color: var(--bone-soft); }
.tier__price { grid-area: price; margin: 0; font-size: clamp(2rem, 2.5vw, 2.7rem); font-weight: 500; line-height: 1; letter-spacing: -0.045em; font-stretch: 86%; font-variant-numeric: tabular-nums; }
.tier__for { grid-area: for; margin: 8px 0 0; color: var(--ink-soft); max-width: 42ch; font-size: 0.98rem; }
.tier__more { grid-area: scope; }
.tier__more > summary { display: none; }
.tier > ul.tier__scope { grid-area: scope; }
ul.tier__scope { display: grid; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; font-size: 0.94rem; line-height: 1.4; }
.tier__scope li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.tier__scope li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Business, £999: the graphite plane */
.tier--hero { grid-area: hero; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto auto; grid-template-areas: 'head' 'price' 'for' 'scope' 'note' 'cta'; padding: clamp(36px, 3.6vw, 52px) clamp(32px, 3.4vw, 52px) clamp(34px, 3.4vw, 48px); overflow: hidden; color: var(--bone); background: linear-gradient(168deg, #1b1c21, var(--graphite) 58%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset -1px 0 0 rgba(255, 255, 255, 0.06); }
.tier--hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(64% 56% at 84% -8%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 62%), radial-gradient(30% 24% at 8% 100%, rgba(214, 168, 96, 0.14), rgba(214, 168, 96, 0) 70%); }
.tier--hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.045; background-image: var(--grain); background-size: 220px; }
.tier--hero > * { position: relative; }
.tier--hero .tier__name { font-size: 1.5rem; }
.tier--hero .tier__size { color: var(--bone-soft); }
.tier--hero .tier__price { margin: 24px 0 4px; font-size: clamp(5rem, 8.8vw, 8.6rem); color: #fff; letter-spacing: -0.06em; font-stretch: 80%; }
.tier--hero .tier__for { margin-top: 10px; font-size: 1.12rem; line-height: 1.5; color: var(--bone-soft); max-width: 36ch; }
.tier--hero ul.tier__scope { margin-top: 24px; border-color: var(--line-dark); font-size: 1.02rem; }
.tier--hero .tier__scope li { padding: 11px 0; border-color: var(--line-dark); }
.tier__note { grid-area: note; margin: 26px 0 0; font: italic 500 1.18rem/1.45 var(--font-note); color: var(--bone); max-width: 34ch; }
.tier__cta { grid-area: cta; margin: 30px 0 0; }
.pricing__terms { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px clamp(40px, 5vw, 80px); margin-top: 60px; padding-top: 36px; border-top: 1px solid var(--line-strong); }
.includes__head h3, .after h3 { margin: 0 0 6px; font-size: 1.3rem; letter-spacing: -0.02em; }
.includes__head p { margin: 0 0 18px; color: var(--ink-soft); max-width: 40ch; }
.includes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; font-size: 0.98rem; }
.includes__list li { padding: 11px 0; border-top: 1px solid var(--line); }
.includes__list li:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
.after__list { margin: 0; }
.after__list div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.after__list div:first-child { border-top: 0; padding-top: 0; }
.after__list dt { font-weight: 600; }
.after__list dd { margin: 0; color: var(--ink-soft); }
.pricing__cta { display: flex; align-items: baseline; gap: 6px 22px; flex-wrap: wrap; margin: 36px 0 0; }
.pricing__aside { font: italic 500 1.05rem/1.4 var(--font-note); color: var(--ink-soft); }

/* ---------- Questions: oversized disclosures ---------- */
.faq { max-width: var(--container); margin: 0 auto; padding: var(--section) var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 32px clamp(40px, 5vw, 80px); align-items: start; }
.faq__head { position: sticky; top: 112px; }
.faq__title { max-width: 12ch; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq__item { position: relative; isolation: isolate; border-bottom: 1px solid var(--line-strong); }
.faq__item::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.8); opacity: 0; transition: opacity 0.35s var(--ease); }
.faq__item[open]::before { opacity: 1; }
.faq__q { display: grid; grid-template-columns: 3.2ch minmax(0, 1fr) 24px; align-items: start; gap: 20px; padding: 26px 0; cursor: pointer; list-style: none; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); font-weight: 500; letter-spacing: -0.022em; line-height: 1.22; color: var(--ink); }
.faq__q::-webkit-details-marker { display: none; }
.faq__num { padding-top: 0.4em; font-size: 0.84rem; font-weight: 500; line-height: 1; color: var(--ink-soft); font-variant-numeric: tabular-nums; transition: color 0.25s; }
.faq__item[open] .faq__num { color: var(--ink); }
.faq__icon { position: relative; width: 24px; height: 24px; margin-top: 0.22em; justify-self: end; color: var(--ink); }
.faq__icon i { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: currentColor; translate: -50% -50%; transition: transform 0.32s var(--ease-out), opacity 0.25s; }
.faq__icon i:last-child { transform: rotate(90deg); }
.faq__q:hover .faq__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(18, 19, 22, 0.35); }
.faq__item[open] .faq__icon i:last-child { transform: rotate(0); }
.faq__a-inner { padding: 0 0 30px calc(3.2ch + 20px); max-width: 58ch; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }
.faq__a-inner > :first-child { margin-top: 0; }
.faq__a-inner > :last-child { margin-bottom: 0; }
.js .faq__a-inner { opacity: 0; transform: translateY(-4px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease-out); }
.js .faq__item[open] .faq__a-inner { opacity: 1; transform: none; }

/* ---------- Start: the destination (graphite) ---------- */
.start { position: relative; isolation: isolate; margin-top: var(--section); background: var(--graphite); color: var(--bone); overflow: hidden; }
.start::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; background-image: var(--grain); background-size: 220px; }
.start__light { position: absolute; z-index: 0; left: 34%; top: -36%; width: min(76vw, 960px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(128, 138, 168, 0.38), rgba(128, 138, 168, 0) 72%); will-change: transform; animation: drift 28s ease-in-out infinite alternate; }
.start__light::after { content: ''; position: absolute; left: -30%; top: 60%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 168, 96, 0.22), rgba(214, 168, 96, 0) 72%); }
.start__light.is-paused { animation-play-state: paused; }
@keyframes drift { from { transform: translate3d(-8%, 0, 0) scale(1); } to { transform: translate3d(10%, 9%, 0) scale(1.08); } }
/* The horizon continues into the dark room as a lit hairline */
.start__horizon { position: absolute; z-index: 0; left: 0; right: 0; top: 50%; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(242, 241, 236, 0), rgba(242, 241, 236, 0.22) 20%, rgba(242, 241, 236, 0.22) 55%, rgba(242, 241, 236, 0)); }
.start__inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: clamp(96px, 12vw, 168px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: 78vh; }
.start__title { margin: 0; font-size: clamp(2.6rem, 1.3rem + 4.8vw, 5.8rem); line-height: 0.98; letter-spacing: -0.035em; font-stretch: 88%; color: #fff; max-width: 12ch; }
.start__text { margin: 26px 0 0; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--bone-soft); max-width: 42ch; }
.start__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin: 36px 0 0; }
.start__preview { justify-self: end; width: min(250px, 60%); margin: 0; }
.phone--tilt { transform: perspective(1200px) rotateY(-16deg) rotateX(6deg) rotateZ(-3deg); }
.founder { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-dark); max-width: 44ch; }
.founder__photo { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.founder__name { margin: 0; font-weight: 600; }
.founder__intro { margin: 0; color: var(--bone-soft); }

/* ---------- Footer (continues the graphite) ---------- */
.c-footer { background: var(--graphite); color: var(--bone-soft); }
.c-footer__inner { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 30px; border-top: 1px solid var(--line-dark); }
.c-footer__main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto; gap: 32px; align-items: start; }
.c-footer__brand { margin: 0; }
.c-footer__brand a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 650; font-size: 1.15rem; font-stretch: 90%; letter-spacing: -0.02em; text-decoration: none; }
.c-footer__tag { display: block; margin-top: 6px; font-size: 0.92rem; }
.c-footer__links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: -10px 0; padding: 0; list-style: none; }
.c-footer__links a, .c-footer__legal-links a, .c-footer__contact a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; margin: 0 -4px; color: var(--bone); text-decoration: none; opacity: 0.86; transition: opacity var(--t-fast); }
.c-footer__links a:hover, .c-footer__legal-links a:hover, .c-footer__contact a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.c-footer__contact { margin: 0; }
.c-footer__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 10px; border-top: 1px solid var(--line-dark); font-size: 0.85rem; }
.c-footer__legal { margin: 0; }
.c-footer__legal-links { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }

/* ---------- /start/: the enquiry page (environment left, the form right) ---------- */
.start-page { position: relative; isolation: isolate; max-width: var(--container); margin: 0 auto; padding: clamp(128px, 18vh, 200px) var(--gutter) var(--section); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 40px clamp(40px, 6vw, 104px); align-items: start; }
.start-page__light { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(48% 36% at 18% 12%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%), radial-gradient(30% 24% at 78% 30%, rgba(58, 74, 112, 0.1), rgba(58, 74, 112, 0) 70%); }
.start-page__env { position: sticky; top: 104px; }
.start-page__title { margin: 0; font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.2rem); line-height: 0.98; letter-spacing: -0.035em; font-stretch: 88%; }
.start-page__intro { margin: 18px 0 0; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); max-width: 40ch; }
/* The stage rail: a vertical form line whose lit part follows the stage the visitor is on */
.rail-index { position: relative; display: grid; margin: 44px 0 0; padding: 0 0 0 30px; list-style: none; }
.rail-index::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--line-strong); }
.rail-index__fill { position: absolute; left: 0; top: 10px; width: 1px; height: calc(var(--p, 0) * (100% - 20px)); background: var(--ink); transition: height 0.4s var(--ease); }
.rail-index__ring { position: absolute; left: 0; top: calc(10px + var(--p, 0) * (100% - 20px)); width: 11px; height: 11px; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 20px 6px rgba(255, 255, 255, 0.9); transition: top 0.4s var(--ease); }
.rail-index a { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 14px; align-items: baseline; min-height: 48px; padding: 11px 0; text-decoration: none; color: var(--ink-soft); font-size: 1.08rem; font-weight: 500; letter-spacing: -0.01em; transition: color 0.3s var(--ease); }
.rail-index__num { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.rail-index__item.is-active a, html:not(.js) .rail-index a, .rail-index a:hover { color: var(--ink); }
html:not(.js) .rail-index__fill, html:not(.js) .rail-index__ring { display: none; }
.next { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.next__title { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -0.015em; }
.next__steps { display: grid; margin: 0; padding: 0; list-style: none; }
.next__steps li { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.98rem; }
.next__steps li:first-child { border-top: 0; }
.next__num { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.next__email { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.98rem; color: var(--ink-soft); }
/* The form region: no card. Frame marks hold the region; the fields are the surfaces. */
.start-page__form { --fo: 0px; --fl: 18px; --fm: rgba(18, 19, 22, 0.5); padding: clamp(18px, 2.4vw, 34px) clamp(18px, 2.6vw, 36px) clamp(22px, 2.8vw, 40px); }

/* Form (structure from primitives.css) */
.c-form { display: grid; gap: 20px; counter-reset: stage; }
.c-form__section { counter-increment: stage; display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 16px; align-items: baseline; margin: 28px 0 2px; padding-top: 28px; border-top: 1px solid var(--line-strong); font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; font-stretch: 92%; }
.c-form__section::before { content: counter(stage, decimal-leading-zero); font-size: 0.82rem; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-stretch: 100%; }
.c-form__section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.c-field label, .c-field legend { font-weight: 500; font-size: 0.98rem; }
.c-field--choice { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.c-field__optional { color: var(--ink-soft); font-weight: 400; }
.c-field input:not([type='radio']), .c-field textarea, .c-field select { width: 100%; min-height: 54px; padding: 12px 16px; border-radius: var(--r-input); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.72); color: var(--ink); font: inherit; box-shadow: inset 0 1px 0 #fff; transition: border-color var(--t-fast), box-shadow 0.2s var(--ease), background-color var(--t-fast); }
.c-field textarea { min-height: 132px; resize: vertical; }
.c-field input:not([type='radio']):hover, .c-field textarea:hover { border-color: rgba(18, 19, 22, 0.34); }
.c-field input:not([type='radio']):focus-visible, .c-field textarea:focus-visible, .c-field select:focus-visible { outline: none; border-color: var(--ink); background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(18, 19, 22, 0.09); }
.c-field [aria-invalid='true'] { border-color: #b3261e; box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.12); }
.c-field__hint { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.c-field__error { margin: 0; color: #9f2019; font-size: 0.9rem; }
/* Choices: cells of one surface divided by hairlines, the chosen cell graphite with a lit ring. Not pills. */
.c-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: var(--r-input); overflow: hidden; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 #fff; }
.c-choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; margin: -1px 0 0 -1px; border: 1px solid var(--line); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); }
.c-choice::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(18, 19, 22, 0.35); background: transparent; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.c-choice:last-child:nth-child(3n + 2) { grid-column: span 2; }
.c-choice:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.c-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.c-choice:hover { background: rgba(255, 255, 255, 0.95); }
.c-choice:hover::before { border-color: var(--ink); }
.c-choice:has(input:checked) { background: var(--ink); color: var(--porcelain); }
.c-choice:has(input:checked)::before { border-color: #fff; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 0 10px 2px rgba(255, 255, 255, 0.55); }
.c-choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -4px; }
.c-choice:has(input:checked):has(input:focus-visible) { outline-color: var(--porcelain); }
.c-form__privacy { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.c-form__status { margin: 0; font-weight: 500; }
.c-form__status:empty { display: none; }
.c-form__unconnected { margin: 0; }
.u-todo { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #ffe58a; color: #3b2f00; font-size: 0.85rem; }
.c-form .c-button { justify-self: start; }

/* ---------- Thank-you, 404 and generic pages ---------- */
.thanks { max-width: var(--container); margin: 0 auto; padding: clamp(150px, 22vh, 240px) var(--gutter) var(--section); min-height: 72vh; }
.thanks__title { margin: 0; font-size: clamp(2.6rem, 1.3rem + 4.8vw, 5.8rem); line-height: 0.98; letter-spacing: -0.035em; font-stretch: 88%; max-width: 14ch; }
.thanks__text { margin: 18px 0 0; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); max-width: 44ch; }
.thanks__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin: 34px 0 0; }
/* Starter section pages (legal, generic pages, 404): the same type and spacing, below the fixed header */
main > .l-container:first-child, main > .l-stack:first-child, main > .c-section:first-child, main > .c-page-header:first-child { padding-top: clamp(120px, 16vh, 180px); }
.c-page-header { padding-bottom: 32px; }
.c-page-header h1 { margin: 0; font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1; letter-spacing: -0.035em; font-stretch: 88%; }
.c-lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 48ch; }
.c-eyebrow { font-size: 0.85rem; color: var(--ink-soft); }
.l-prose { padding-bottom: var(--section); }
.c-field [aria-invalid='true'] { outline: none; }

/* Preview builds (PREVIEW_UNPUBLISHED=true, local only): loud, so the output is never mistaken for a deployable one */
.c-preview { position: fixed; left: 50%; bottom: 14px; z-index: 70; translate: -50%; margin: 0; padding: 10px 16px; border-radius: var(--r-control); background: #ffe58a; color: #3b2f00; font-weight: 600; font-size: 0.9rem; box-shadow: var(--shadow-2); }

/* ---------- Reveals (motion.js adds .is-in once; static without scripts or with reduced motion) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out), filter 0.85s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
.js .reveal .tier, .js .reveal .step { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: calc(120ms + var(--i, 0) * 90ms); }
.js .reveal.is-in .tier, .js .reveal.is-in .step { opacity: 1; transform: none; }

/* Grain texture, shared by the dark surfaces */
:root { --grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Motion (only when welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .moment.is-active .mark::after { animation: ring 2.6s var(--ease-out) infinite; }
  @keyframes ring { 0% { transform: scale(0.6); opacity: 0.9; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .hero__ltr-in, .seq { animation: none; opacity: 1; transform: none; filter: none; }
  .start__light { animation: none; }
  .js .reveal, .js .reveal .tier, .js .reveal .step { opacity: 1; transform: none; filter: none; transition: none; }
  .js .moment, .moment figure, .moment figcaption, .moment .mark { transition: none; }
  .js .panel.is-entering { animation: none; }
  .process__fill, .process__node, .rail-index__fill, .rail-index__ring, .step::after, .step.frame::before { transition: none; }
  .process__node { display: none; }
  .c-button, .c-link::after, .faq__icon i { transition: none; }
  .js .hero-frame.is-pinned { height: auto !important; }
  .js .hero-frame.is-pinned .hero { position: static; }
  .hero { --p: 0 !important; }
  .hero__foot { opacity: 1; }
}

/* ---------- Wide screens ---------- */
@media (min-width: 1600px) {
  /* The hero keeps the render's proportions on wide screens: a wider measure of its own, so the word still runs across
     most of the screen and the devices keep their scale, capped where its left edge still meets the header's wordmark.
     The sections below stay on the site's container. */
  .hero { --container: 96rem; }
  .pane--desktop { width: min(100%, 36vw); }
  .pane--phone { left: -11%; } /* was -4%, which covered the first letter on the laptop's screen from 1600px up */
}

/* ---------- Small laptop / tablet landscape ---------- */
@media (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .hero__claim { max-width: 13ch; }
  .hero__lede { max-width: 30ch; }
  .hero__stage { min-height: clamp(320px, 48vh, 540px); }
  .pane--desktop { width: min(100%, 41vw); }
  .pane--phone { left: -2%; width: clamp(116px, 11.5vw, 150px); }
  .pane--desktop { left: 2%; right: -6%; }
  /* Further left and a little smaller than it was (-10%, 15vw): at these widths the phone stood over the first letter of
     the featured site's name on the laptop, so APHELION read "PHELION". Its foot still lands on the rock. Audit, 2026-09-20. */
  .pane--phone { left: -18%; width: clamp(120px, 13vw, 150px); }
  .chip { display: none; }
  .hero__caption { display: flex; align-items: baseline; align-self: start; gap: 12px; grid-column: 1 / -1; grid-row: 6; margin: 14px 0 0; font-size: 0.86rem; line-height: 1.4; color: #2f333a; } /* --ink-soft was too pale over the photograph */
  .hero__caption::before { content: ''; width: 22px; height: 1px; background: var(--ink); align-self: center; }
  .hero__caption-name { font-weight: 600; color: var(--ink); }
  /* Five project names no longer fit beside the view controls: the strip uses the short names from here down */
  .project-tab__full { display: none; }
  .project-tab__short { display: inline; }
  .tier--hero .tier__price { font-size: clamp(4rem, 7vw, 6rem); }
  .process { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); }
  .c-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-choice:last-child:nth-child(3n + 2), .c-choice:last-child:nth-child(3n + 1) { grid-column: auto; }
  .c-choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Tablet portrait and phones: recomposed, not shrunk ---------- */
/* ---------- The floating Start-a-project pill (phones and small tablets) ---------- */
/* The homepage is long, and between the hero's own button and the Start section a phone visitor has no CTA within
   reach: the header's button scrolls away with the bar. This is a pill rather than a full-width sticky bar because a
   bar eats a strip of every screen and reads as a template; the pill matches the buttons the site already uses.
   It is shown and hidden by motion.js: out while the hero's own button is still on screen, and out again over the
   Start section, so it never covers the CTA it duplicates. Off entirely above 900px, where the header stays in reach. */
.c-sticky-cta { display: none; }

@media (max-width: 900px) {
  .js .c-sticky-cta {
    position: fixed; z-index: 40; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: var(--touch-target); padding: 0 24px; border-radius: var(--r-cta);
    background: var(--ink); color: var(--porcelain); font-size: 0.96rem; font-weight: 500; text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 6px rgba(15, 16, 19, 0.28), 0 14px 34px -12px rgba(15, 16, 19, 0.6);
    /* Hidden state: translate carries the movement so opacity and transform animate on the compositor. */
    opacity: 0; transform: translate(-50%, 14px); pointer-events: none;
    transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
  }
  .js .c-sticky-cta.is-in { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .js .c-sticky-cta svg { flex: 0 0 auto; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .js .c-sticky-cta { transition: opacity 0.01s; transform: translate(-50%, 0); }
}

@media (max-width: 900px) {
  :root { --gutter: clamp(16px, 5vw, 32px); }
  html { scroll-padding-top: 84px; }
  /* Header: bar + full glass sheet */
  .c-header { padding-top: 10px; }
  .c-header__bar { min-height: 56px; padding: 5px 6px 5px 16px; gap: 10px; }
  .c-nav-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-left: auto; padding: 0 12px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: transparent; color: inherit; font: 500 0.92rem/1 var(--font-body); cursor: pointer; }
  .c-nav-toggle__bars { position: relative; width: 16px; height: 10px; }
  .c-nav-toggle__bars i { position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out); }
  .c-nav-toggle__bars i:first-child { top: 0; }
  .c-nav-toggle__bars i:last-child { top: 8.5px; }
  .c-nav-toggle[aria-expanded='true'] .c-nav-toggle__bars i:first-child { top: 4.25px; transform: rotate(45deg); }
  .c-nav-toggle[aria-expanded='true'] .c-nav-toggle__bars i:last-child { top: 4.25px; transform: rotate(-45deg); }
  .c-nav { display: none; }
  /* The open menu: a glass sheet over a dimmed, blurred page. The page stays perceptible behind it; its type does not
     stay readable. The scrim catches taps (site.js closes the menu on one) so nothing behind the sheet can be pressed. */
  .c-header.is-open::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: auto; background: rgba(245, 245, 243, 0.56); -webkit-backdrop-filter: blur(12px) saturate(0.65); backdrop-filter: blur(12px) saturate(0.65); animation: scrim-in 0.35s var(--ease) both; }
  @keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
  .c-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 8px; position: fixed; left: var(--gutter); right: var(--gutter); top: 78px; z-index: 61; margin: 0; padding: 22px 22px 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.92); box-shadow: inset 0 1px 0 #fff, var(--shadow-3); -webkit-backdrop-filter: blur(32px) saturate(0.9); backdrop-filter: blur(32px) saturate(0.9); color: var(--ink); }
  .c-nav.is-open .c-nav__list { flex-direction: column; gap: 0; }
  .c-nav.is-open .c-nav__list a { min-height: 56px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.025em; font-stretch: 90%; }
  .c-nav.is-open .c-nav__list a:hover { background: none; }
  .c-nav.is-open .c-nav__cta { margin-top: 12px; min-height: 52px; font-size: 1rem; justify-content: center; background: var(--ink); color: var(--porcelain); }
  .c-nav.is-open .c-nav__list li { animation: seq-in 0.5s var(--ease-out) both; animation-delay: calc(40ms + var(--i, 0) * 50ms); }
  html.menu-open { overflow: hidden; }

  /* Hero: the portrait composition. The wordmark, the copy, one line naming the work, then the devices on the rock at
     the foot of one full screen, over the tall plate (hero.njk), whose blurred copy also fills the letters. */
  /* The whole composition belongs on one screen here, devices' feet and a strip of rock included, as it does in the
     reference render. Two things buy the room: the wordmark is set at its natural width rather than condensed (the
     condensed cut had to be scaled far taller to span the measure, which cost a third of the screen), and every gap
     down the column is tightened. */
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr; min-height: 100svh; padding-top: 76px; padding-bottom: 28px; column-gap: 0; }
  .hero--plate { --glass: var(--glass-tall); }
  .hero__plate img { object-position: 50% 50%; }
  .hero__scene::before { height: 14%; }
  .hero__mist--far { top: 34%; height: 26%; }
  .hero__mist--near { top: 52%; height: 40%; }
  /* On phones the plate's own height matches the hero almost exactly, so there is no vertical crop to tune: the peaks
     always land behind the claim and the lede. The local lift therefore carries the legibility here — wider, taller and
     stronger than on desktop, reaching from the marker down past the caption, but still a soft radial with no edge, so
     it reads as light coming off the snow rather than a panel laid over the photograph. */
  .hero__scrim { left: -16%; top: 27%; width: 104%; height: 54%; background: radial-gradient(74% 52% at 46% 48%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.48) 56%, rgba(255, 255, 255, 0) 80%); }
  /* The lede and the caption are the two lines that still cross the lit snow on the right, where the lift has faded out,
     so on phones they carry more of their own contrast than on desktop. */
  .hero__lede { color: #23272d; }
  .hero__caption { color: #2f333a; }
  .hero__caption .hero__caption-name + span { color: #2f333a; } /* #4a4f57 was about 4.0:1 over the photograph; this is about 6:1 (audit, 2026-09-20) */
  .hero__wash { background: linear-gradient(180deg, rgba(245, 245, 243, 0) 30%, rgba(245, 245, 243, 0.6) 62%, var(--porcelain) 92%); }
  .hero__foot { height: 8%; }
  .hero__mark { filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(1px 1px 0 rgba(36, 62, 108, 0.32)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.42)) drop-shadow(0 14px 26px rgba(20, 40, 76, 0.22)); }
  .hero__mark { font-stretch: 100%; line-height: 0.76; }
  .hero__marker { grid-row: 2; margin-top: clamp(10px, 1.8vh, 18px); }
  .hero__claim { grid-row: 3; margin-top: 8px; max-width: 16ch; font-size: clamp(1.5rem, 1rem + 3.2vw, 2.1rem); }
  .hero__lede { grid-row: 4; margin-top: 8px; max-width: 40ch; font-size: 0.98rem; }
  .hero__actions { grid-row: 5; gap: 12px; margin-top: 14px; }
  .chip { display: none; }
  .hero__caption { grid-column: 1; grid-row: 6; margin: 10px 0 0; color: #3f434b; }
  /* The devices on the rock at the foot of the screen: the laptop right, the phone leaning in front of it on the left,
     both placed by their feet in the stage, which runs to the hero's bottom edge. */
  .hero__stage { grid-column: 1; grid-row: 7; align-self: end; min-height: 0; height: auto; aspect-ratio: 1 / 0.55; margin: 6px calc(-1 * var(--gutter)) -28px; }
  .hero__stage::before { left: -2%; right: -6%; bottom: 4%; height: 40%; filter: blur(14px); }
  .pane--desktop { left: 33%; right: 3%; width: auto; bottom: 17svh; }
  .pane--desktop .laptop { transform: perspective(1200px) rotateY(calc(5deg * (1 - var(--p)))) rotateX(calc(2deg * (1 - var(--p)))) scale(calc(1 + 0.03 * var(--p))); }
  .pane--phone { left: 10%; bottom: 14svh; width: clamp(96px, 26vw, 136px); }
  .pane--phone .phone { transform: perspective(1200px) rotate(calc(-4deg * (1 - var(--p)))) rotateY(calc(8deg * (1 - var(--p)))) translate(calc(8% * var(--p)), 0) scale(calc(1 + 0.04 * var(--p))); }
  /* Shorter cast shadows on phones: the devices stand near the foot of the hero, and a long shadow would be cut by its edge */
  .laptop { filter: drop-shadow(0 3px 4px rgba(6, 10, 18, calc(0.62 - 0.5 * var(--p)))) drop-shadow(13px 18px 17px rgba(8, 14, 26, calc(0.48 - 0.38 * var(--p)))); }
  .phone { filter: drop-shadow(0 3px 4px rgba(6, 10, 18, calc(0.62 - 0.5 * var(--p)))) drop-shadow(11px 16px 15px rgba(8, 14, 26, calc(0.48 - 0.38 * var(--p)))); }

  /* Work */
  .work__head { margin-bottom: 20px; }
  .work__legend { font-size: 1.02rem; }
  .work__canvas { padding: 14px 0 18px; border-radius: 18px; }
  .work__bar { padding: 0 14px 12px; gap: 14px; }
  .project-tab { padding: 0 12px 0 10px; min-height: 44px; font-size: 0.9rem; gap: 7px; }
  .control { width: 40px; height: 40px; }
  .counter { min-width: 52px; font-size: 0.85rem; }
  ol.rail { --pane-w: 86vw; --gap: clamp(10px, 2.6vw, 18px); padding-top: 6px; padding-bottom: 16px; }
  /* 86vw is wider than the cap in .moment's max-width, so here a desktop view is exactly the cap: the stage less a peek
     and a gap each side (about 75vw, which is what `sizes` in selected-work.njk says). Phone views are under it. */
  @supports (width: 1cqi) { ol.rail { --pane-w: var(--pane-max); } }
  .moment { width: 86vw; }
  .moment--phone { width: 60vw; }
  .moment figcaption { padding: 10px 2px 0; font-size: 0.86rem; flex-wrap: wrap; }
  .enlarge { opacity: 0.9; width: 48px; height: 48px; right: 10px; bottom: 10px; }
  /* On phones the band keeps its shape and only turns: the rules between the facts run across instead of down. */
  .panel__foot { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 16px 14px 0; padding-top: 16px; }
  .note__text { font-size: 1.06rem; }
  .wall-label { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wall-label > div { padding: 11px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .wall-label > div:first-child { padding-top: 0; border-top: 0; }

  /* Process: the same line, tighter */
  .process { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .process__head { position: static; }
  .process__journey { padding-left: 22px; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 22px 14px 24px; }
  .step::after, .step.frame::before { inset: 4px 0; }
  .step__num { font-size: 2.6rem; margin: 0 0 4px; }
  .step__title { font-size: 1.35rem; margin-top: 0; }
  .step__text { font-size: 1rem; }

  /* Pricing: Business first and whole; the other three as compact rows of the same surface */
  .pricing__head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 26px; }
  .tiers { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .tier { grid-area: auto; padding: 20px 18px 20px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head price' 'for for' 'scope scope'; gap: 4px 18px; }
  .tier--hero { order: -1; padding: 30px 22px 30px; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'price' 'for' 'scope' 'note' 'cta'; }
  .tier--hero .tier__price { font-size: clamp(4.2rem, 19vw, 5.8rem); margin: 14px 0 2px; }
  .tier--business-plus, .tier--shop, .tier--starter { border-top: 1px solid var(--line-strong); }
  .tier--shop { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head price' 'for for' 'scope scope'; }
  .tier--shop .tier__for { margin-top: 8px; }
  .tier--shop ul.tier__scope { grid-template-columns: minmax(0, 1fr); }
  .tier--shop ul.tier__scope li { border-bottom: 1px solid var(--line); }
  .tier--shop ul.tier__scope li:last-child { border-bottom: 0; }
  .tier__for { font-size: 0.95rem; }
  /* With scripts, the secondary rows fold their scope behind "What's included" (a native disclosure; open without scripts) */
  .js .tier__more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 10px; padding: 0; border-top: 1px solid var(--line); list-style: none; font-size: 0.9rem; font-weight: 500; color: var(--ink); cursor: pointer; }
  .js .tier__more > summary::-webkit-details-marker { display: none; }
  .js .tier__more > summary::after { content: '+'; font-size: 1.2rem; font-weight: 400; line-height: 1; color: var(--ink-soft); }
  .js .tier__more[open] > summary::after { content: '−'; }
  .js .tier__more ul.tier__scope { margin-top: 0; border-top: 0; }
  .pricing__terms { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 44px; padding-top: 30px; }
  .includes__list { grid-template-columns: minmax(0, 1fr); }
  .includes__list li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 11px; }
  .after__list div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  /* Questions */
  .faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .faq__head { position: static; }
  .faq__q { grid-template-columns: 2.6ch minmax(0, 1fr) 20px; gap: 12px; padding: 20px 0; }
  .faq__a-inner { padding-left: calc(2.6ch + 12px); font-size: 1rem; }

  /* Start */
  .start__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; min-height: 0; padding: 80px var(--gutter) 88px; }
  .start__title { max-width: 10ch; }
  .start__preview { justify-self: end; width: min(180px, 46%); margin-right: -6%; }
  .start__horizon { top: 62%; }

  /* Footer */
  .c-footer__main { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .c-footer__meta { flex-direction: column; gap: 10px; }

  /* /start/: heading, a compact stage index, the form, then what happens next */
  .start-page { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 112px; }
  .start-page__env { display: contents; }
  .start-page__intro { margin-bottom: 26px; }
  .rail-index { display: flex; gap: 0; margin: 0 0 24px; padding: 0; border-bottom: 1px solid var(--line-strong); }
  .rail-index::before, .rail-index__fill, .rail-index__ring { display: none; }
  .rail-index__item { flex: 1 1 0; margin-bottom: -1px; border-bottom: 1px solid transparent; transition: border-color 0.3s; }
  .rail-index__item.is-active { border-bottom-color: var(--ink); }
  .rail-index a { grid-template-columns: auto minmax(0, 1fr); gap: 8px; min-height: 46px; padding: 8px 0; font-size: 0.86rem; }
  .start-page__form { padding: 0; }
  .start-page__form.frame::before { display: none; }
  .next { order: 10; margin-top: 44px; }
  .c-form { gap: 18px; }
  .c-form__section { margin-top: 22px; padding-top: 22px; }
  .c-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-choice:last-child:nth-child(3n + 2), .c-choice:last-child:nth-child(3n + 1) { grid-column: auto; }
  .c-choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .thanks { padding-top: 120px; min-height: 0; }
}

@media (max-width: 600px) {
  .hero__mark { flex-direction: column; align-items: flex-start; font-size: var(--mark-size, clamp(3.2rem, 25vw, 6.4rem)); line-height: 0.82; }
  .hero__line { display: flex; justify-content: flex-start; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* Phones: the devices' feet sit lower (12svh and 9svh above the hero's foot) so the hero stays close to one screen tall
     with both devices standing in the first screen; the stage is just tall enough to hold them. */
  .hero__stage { aspect-ratio: 1 / 0.72; }
  .pane--desktop { bottom: 12svh; }
  .pane--phone { bottom: 9svh; }
  .js .control { display: none; }
  .counter { min-width: 0; padding-right: 6px; }
}

/* The lede's last sentence (where Frontstudio is based) costs a line the smallest phones do not have: at 360px it took
   the 16px between the caption and the devices to nothing and pushed the hero past one screen. Measured 2026-09-20. */
@media (max-width: 380px) { .hero__lede-tail { display: none; } }

@media (max-width: 480px) {
  .hero__actions .c-button { min-height: 50px; padding: 0 22px; }
  .work__title, .process__title, .pricing__title, .faq__title { font-size: clamp(1.9rem, 1rem + 5.6vw, 2.4rem); }
  .tier--hero .tier__price { font-size: clamp(3.8rem, 18vw, 5rem); }
  .c-choices { grid-template-columns: minmax(0, 1fr); }
  .c-choice:last-child:nth-child(odd) { grid-column: auto; }
}