/* =====================================================================
   PRUMO · Physiotherapy & Movement, Lisbon  (fictional brand)
   Direction "Azulejo" · concept "The Line"
   Concept design by Formschwung
   ---------------------------------------------------------------------
   Contents
   01 Font
   02 Tokens
   03 Base + utilities
   04 Bands (cobalt / tile-white), axis grid, type scale
   05 Buttons, links, flag, sample notes
   06 Header + mobile menu
   07 The line (stage, plumb bob, frame)
   08 0 · Opening
   09 1 · What we look at
   10 2 · Your first visit
   11 3 · Range, drawn. (joint diagram)
   12 4 · Services + prices / What we don't promise / Team
   13 5 · FAQ + appointment form
   14 Footer + mobile appointment bar
   15 Entrance states (motion on only)
   16 Mobile (< 800 px)
   17 Reduced motion
   ===================================================================== */

/* ---------- 01 Font (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-standard-normal.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- 02 Tokens (from the Azulejo spec, contrast-checked) ---------- */
:root {
  --cobalt: #1C3F94;      /* background            */
  --glaze: #F3F5FA;       /* foreground · 8.80:1   */
  --yellow: #F2C14E;      /* accent · on cobalt or as fill only */
  --muted: #DAE1F8;       /* muted on cobalt · 7.36:1 (the glaze texture lightens parts of the tile, so the margin is deliberate) */
  --border: #4665BA;      /* decorative on cobalt  */
  --ink: #1C3F94;         /* text on tile-white · 8.80:1 */
  --ink-2: #42568F;       /* secondary on tile-white · 6.51:1 on #F3F5FA (v2b: was #4A5F99, 5.68:1; the tile grooves under small text need the headroom) */
  --paper: #FFFFFF;       /* form card on tile-white */
  --rule-w: #C9D2EC;      /* hairlines on tile-white (decorative) */
  --field: #5D70A8;       /* field underline on white */
  --tick: #A3B3E0;        /* inactive ticks (decorative) */
  --error: #A3261A;       /* form errors on white · 7.0:1 */

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut: clamp(20px, 4vw, 64px);
  --axis: 168px;          /* the gap the line runs through */
  --col: 34rem;           /* max column width either side of the axis */
  --tl: max(var(--gut), calc(50% - var(--axis) / 2 - var(--col)));   /* v2b: where the text columns start; the tile glaze is thin outside it and quiet under it (contrast.js) */
  --lw: 4px;              /* line weight */
  --rail: 30px;           /* mobile: rail distance from the right edge */
  --hd-h: 80px;
  --studio-h: 28px;       /* studio layer above the header ("← Formschwung"); 44 px on touch screens and below 800 px */
  --top-h: calc(var(--hd-h) + var(--studio-h));  /* everything that must clear the header uses this */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --sec-y: clamp(112px, 15vh, 176px);
  color-scheme: light;
}

/* ---------- 03 Base + utilities ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--cobalt);
  color: var(--glaze);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-stretch: 100%;
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 720; font-stretch: 125%; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
:focus-visible { outline: 2px solid var(--focus, var(--yellow)); outline-offset: 3px; }
::selection { background: var(--yellow); color: var(--cobalt); }
[id] { scroll-margin-top: calc(var(--top-h) + 8px); }
main:focus { outline: none; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 16px; background: var(--yellow); color: var(--cobalt); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform .18s var(--ease);
}
.skip-link:focus { transform: none; outline: 2px solid var(--glaze); outline-offset: 2px; }

/* ---------- 04 Bands, axis grid, type scale ---------- */
.flow { position: relative; display: block; }
.band-cobalt { --bg: var(--cobalt); --fg: var(--glaze); --fg-2: var(--muted); --rule: var(--border); --focus: var(--yellow); background: var(--cobalt); color: var(--glaze); }
.band-white  { --bg: var(--glaze);  --fg: var(--ink);   --fg-2: var(--ink-2); --rule: var(--rule-w); --focus: var(--ink); background: var(--glaze); color: var(--ink); }
.band { position: relative; }  /* no z-index: bands must not form stacking contexts (the line paints above them) */

/* Content sits above the line; backgrounds and tiles sit below it. */
.sec > *, .hero-main, .hero-foot, .joint-row > *, .range-head > * { position: relative; z-index: 3; }

.sec { padding: var(--sec-y) var(--gut); }
.axis-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--axis) minmax(0, 1fr); align-items: start; }
.col-l { grid-column: 1; justify-self: end; width: 100%; max-width: var(--col); text-align: right; }
.col-r { grid-column: 3; justify-self: start; width: 100%; max-width: var(--col); }

.h2 { font-size: clamp(36px, 3.9vw, 60px); line-height: .98; letter-spacing: -0.03em; font-weight: 720; text-wrap: balance; }
.h2-sm { font-size: clamp(28px, 2.6vw, 40px); }
.h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.005em; font-weight: 720; font-stretch: 125%; }
.body { margin-top: 22px; font-size: 18.5px; line-height: 1.6; color: var(--fg); text-wrap: pretty; }
.col-l .body { margin-left: auto; max-width: 48ch; }

/* ---------- 05 Buttons, links, flag, sample notes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 0;
  font-size: 15.5px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-light { background: var(--glaze); color: var(--cobalt); }
.btn-dark  { background: var(--cobalt); color: var(--glaze); }
.btn-light:hover, .btn-dark:hover { background: var(--yellow); color: var(--cobalt); }
.btn-block { width: 100%; }
.link-quiet {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  color: var(--glaze); font-weight: 600; font-size: 15.5px; text-decoration: none;
  background: linear-gradient(var(--yellow), var(--yellow)) left calc(100% - 9px) / 100% 2px no-repeat;
  transition: color .18s ease, background-size .25s var(--ease);
}
.link-quiet:hover { color: var(--yellow); }
.link-quiet:active { transform: translateY(1px); }

.flag {
  position: fixed; z-index: 60; right: max(4px, calc(var(--gut) / 2 - 11px)); top: 50%;
  margin: 0; padding: 12px 5px; pointer-events: none;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  color: var(--glaze); background: var(--cobalt); border: 1px solid var(--border);
}

@media (pointer: coarse) { :root { --studio-h: 44px; } }  /* touch target = the strip itself */
/* Studio layer: a fixed strip above the header. "← Formschwung" returns to the studio's own site.
   Neutral, same type as the concept flag; sits in its own row, so it never covers the (hiding) header, the flag or the bottom bar. */
.studio-bar {
  position: fixed; z-index: 52; top: 0; left: 0; right: 0; height: var(--studio-h);
  display: flex; align-items: flex-start; padding: 0 var(--gut);
  background: #102A68; border-bottom: 1px solid var(--border);
}
.studio-bar-link {
  display: inline-flex; align-items: center; box-sizing: border-box;
  height: var(--studio-h); padding: 0 12px; margin-left: -12px;
  color: var(--glaze); text-decoration: none; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  transition: color .18s ease;
}
.studio-bar-t { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; }
.studio-bar-arrow { display: inline-block; font-size: 14px; transition: transform .18s var(--ease); }
.studio-bar-link:hover { color: var(--yellow); }
.studio-bar-link:hover .studio-bar-arrow { transform: translateX(-2px); }
.studio-bar-link:active { transform: translateY(1px); }
.studio-bar-link:focus-visible { outline: none; }
.studio-bar-link:focus-visible .studio-bar-t { outline: 2px solid var(--yellow); outline-offset: 1px; }
.sample { margin-top: 18px; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); }
.sample::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; border: 1.5px solid currentColor; }

/* ---------- 06 Header + mobile menu ---------- */
.site-header {
  position: fixed; z-index: 50; top: var(--studio-h); left: 0; right: 0;
  color: var(--glaze); --focus: var(--yellow);
  transition: transform .4s var(--ease), background-color .18s ease, box-shadow .18s ease;
  background: var(--cobalt); box-shadow: 0 1px 0 var(--border);   /* v2b (Ö8): solid by default, so without JS the nav is readable on every band */
}
.js .site-header:not(.is-solid) { background: transparent; box-shadow: none; }   /* transparent only at rest on the opening: site.js adds .is-solid as soon as the page moves (y > 8 px), before any hero text can pass under it */
.site-header.is-solid { background: var(--cobalt); box-shadow: 0 1px 0 var(--border); }
.site-header.is-hidden { transform: translateY(calc(-101% - var(--studio-h))); transition-timing-function: cubic-bezier(.55, 0, .9, .45); }
.hd-in { display: flex; align-items: center; gap: 32px; height: var(--hd-h); padding: 0 var(--gut); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.brand-mark { width: 12px; height: 23px; flex: none; }
.bm-line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.bm-bob { fill: var(--yellow); }
.brand .brand-word, .brand .brand-desc { transition: color .18s ease; }
.brand .brand-mark { transition: transform .18s ease; }
.brand:hover .brand-word { color: var(--yellow); }
.brand:hover .brand-mark { transform: translateY(2px); }
.brand-desc { padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--border); font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--glaze); }
.brand-word { font-stretch: 125%; font-weight: 760; font-size: 21px; letter-spacing: .04em; line-height: 1; }
.hd-nav { margin-left: auto; }
.hd-nav ul { display: flex; gap: 6px; list-style: none; }
.hd-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: 15px; color: var(--muted); text-decoration: none; transition: color .18s ease;
}
.hd-nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); }
.hd-nav a:active { transform: translateY(1px); }
.hd-nav a:hover, .hd-nav a[aria-current="true"] { color: var(--glaze); }
.hd-nav a:hover::after, .hd-nav a[aria-current="true"]::after { transform: scaleX(1); }
.hd-cta { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.menu-btn, .hd-prices { display: none; }

.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--cobalt); color: var(--glaze); --focus: var(--yellow);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--top-h) + 24px) 56px calc(28px + env(safe-area-inset-bottom)) var(--gut);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu-tiles { position: absolute; inset: 0; pointer-events: none; background: url("../img/tiles-cobalt-1152.webp") right top / 432px repeat; opacity: .9;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%); mask-image: linear-gradient(200deg, #000 0%, transparent 55%); }
.menu-nav, .menu-foot { position: relative; }
.menu-nav ul { list-style: none; }
.menu-nav a { display: block; padding: 6px 0; font-stretch: 125%; font-weight: 720; font-size: clamp(30px, 9vw, 40px); line-height: 1.12; letter-spacing: -0.03em; text-decoration: none; }
.menu-nav a { transition: color .18s ease; }
.menu-nav a:hover { color: var(--yellow); }
.menu-foot p { margin-top: 16px; font-size: 14px; color: var(--muted); }
.menu-foot .sample { margin: 0; font-size: inherit; }
.menu-foot .sample::before { display: none; }

/* ---------- 07 The line ---------- */
.line-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.ln { fill: none; stroke-width: var(--lw); stroke-linecap: round; stroke-linejoin: round; }
.ln-cobalt .ln { stroke: var(--glaze); }   /* the copy visible over cobalt bands */
.ln-white .ln  { stroke: var(--ink); }     /* the copy visible over tile-white bands */
.frame { fill: none; stroke: var(--ink); stroke-width: var(--lw); stroke-linecap: square; stroke-linejoin: miter; }
.bob { --bob-stroke: var(--ink); visibility: hidden; }
.bob.on-cobalt { --bob-stroke: var(--glaze); }
.line-on .bob { visibility: visible; }
.line-static .bob { display: none; }  /* reduced motion: line fully drawn, no bob */
.bob-body { fill: var(--yellow); stroke: var(--bob-stroke); stroke-width: 1.6; stroke-linejoin: round; }
.bob-shine { fill: none; stroke: #FFF6DC; stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.marks circle { fill: var(--glaze); stroke: var(--ink); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease, fill .25s ease; }
.marks circle.is-on { transform: scale(1); opacity: 1; fill: var(--yellow); }

/* ---------- 08 · 0 Opening ---------- */
/* Full-bleed render (spine model on glazed cobalt tiles). With motion on, a cobalt cover sits over
   the photo from the first frame and the canvas turns the picture in tile by tile; the <img> itself
   is painted immediately (LCP) and is never faded. */
.hero { min-height: max(640px, 100svh); display: grid; grid-template-rows: 1fr auto; padding-top: var(--top-h); overflow: clip; background: var(--cobalt); }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media picture { display: block; position: absolute; inset: 0; }
.hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transform-origin: 0 100%; }
@media (min-width: 800px) and (min-aspect-ratio: 4/5) { .hero-img { transform: scale(1.1); } }   /* the model sits clear of the headline */
/* v2b: 1100-1239 px (iPad landscape, small laptops): the headline is already 120 px, so "Movement," reaches the spine and the "t," disappeared into the white vertebrae
   (contrast 1.07:1). A larger crop, anchored at the bottom left, moves the model right, clear of the comma. */
@media (min-width: 1100px) and (max-width: 1239.98px) and (min-aspect-ratio: 4/5) { .hero-img { transform: scale(1.26); } }
.hero-cover { display: none; position: absolute; inset: 0; background: rgba(28, 63, 148, .6); }   /* a veil, not a curtain: the render is visible from the first frame */
.js-motion .hero-cover { display: block; }
.js-motion .hero-media { transform: scale(1.06); }
@media (min-width: 800px) { .js-motion .hero-media, .js-motion .hero-main { will-change: transform; } }   /* the scroll drift runs on its own layers from the first pixel (no raster hitch when the scroll starts) */   /* the opening settles it to 1 (no jump when the script starts) */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.hero-canvas.is-on { display: block; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 28, 72, .86) 0%, rgba(12, 28, 72, .62) 30%, rgba(12, 28, 72, .12) 56%, rgba(12, 28, 72, 0) 66%),
    linear-gradient(0deg, rgba(12, 28, 72, .7) 0%, rgba(12, 28, 72, 0) 30%),
    linear-gradient(180deg, rgba(6, 16, 46, .95) 0%, rgba(6, 16, 46, .78) 78px, rgba(6, 16, 46, 0) 190px); }   /* keeps the header links legible over the bright vertebrae */
.hero-main { align-self: center; padding: 24px var(--gut) 32px; text-align: left; }
.hero-kicker { margin: 0 0 22px; font-stretch: 112%; font-weight: 640; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -0.01em; color: var(--glaze); }
.hero-title { font-size: clamp(48px, 8.8vw, 150px); line-height: .92; letter-spacing: -0.035em; font-weight: 760; }
@media (min-width: 1100px) { .hero-title { font-size: clamp(120px, 8.8vw, 150px); } }  /* studio bar: ≥ 120 px on desktop */
.hero-title .l { display: block; }
.stop { position: relative; }
.stop-pin { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 0 var(--gut) 34px; }
@media (min-width: 800px) { .hero .hero-foot > * { max-width: min(42rem, calc(50vw - var(--gut) - 44px)); } }   /* text stays left of the axis line */
.hero-lede { max-width: 40ch; font-size: clamp(17px, 1.25vw, 19.5px); line-height: 1.55; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hero-concept { font-size: 13px; color: var(--muted); }

/* ---------- 09 · 1 What we look at ---------- */
.sec-look { padding-top: calc(var(--sec-y) + 24px); }
.look-list { display: grid; gap: 30px; padding-top: 10px; }
.look-list li p { margin-top: 6px; max-width: 52ch; color: var(--fg-2); }

/* ---------- 10 · 2 Your first visit ---------- */
.visit-facts { padding-top: 14px; }
.visit-facts dl { display: grid; gap: 22px; }
.visit-facts dt { font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.visit-facts dd { margin-top: 3px; font-size: 17px; line-height: 1.45; max-width: 34ch; margin-left: auto; }
.steps { margin-top: 40px; display: grid; gap: 26px; list-style: none; padding: 0; }
.step { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; }
.step-n { font-stretch: 125%; font-weight: 760; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.step .h3 { font-size: 19px; }
.step p { margin-top: 4px; color: var(--fg-2); max-width: 52ch; }

/* ---------- 11 · 3 Range, drawn. + the scene ---------- */
/* The heading sits on the tile-white band. Below it, a rendered frame sequence of a ceramic model leg
   (canvas) with the measuring drawing laid exactly over the real knee (pivot position exported from
   Blender). Desktop with motion: the scene is a tall block whose inner box sticks to the viewport
   while the scroll bends the knee (ScrollTrigger scrub, no pin spacer: plain position: sticky).
   Phones, reduced motion, no JS: an ordinary plate with buttons under it. */
.sec-range { padding-bottom: clamp(64px, 9vh, 104px); }
.range-notes { display: grid; gap: 22px; padding-top: 12px; }
.range-notes dt { font-weight: 720; font-stretch: 125%; font-size: 16px; }
.range-notes dd { margin-top: 4px; color: var(--fg-2); max-width: 50ch; }

.scene { position: relative; z-index: 3; padding: 0 var(--gut) var(--sec-y); color: var(--ink); --focus: var(--ink); }
.scene-stick { position: relative; }
.plate { position: relative; z-index: 1; width: min(1100px, 100%); margin: 0 auto; aspect-ratio: 3 / 2; background: #08163D; overflow: hidden; }
.plate-media, .plate-media picture { position: absolute; inset: 0; display: block; }
.plate-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate.is-live .plate-img { visibility: hidden; }   /* the canvas has drawn a frame */
.js-motion .plate:not(.is-live):not(.no-frames) .plate-img { opacity: 0; }   /* never flash the wrong pose while the first frames arrive */
.plate-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.j-track { fill: none; stroke: rgba(243, 245, 250, .5); stroke-width: 2; stroke-dasharray: 1 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.j-sector { fill: rgba(242, 193, 78, .13); }
.j-arc { fill: none; stroke: var(--yellow); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.j-tick { stroke: rgba(243, 245, 250, .32); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .2s ease; }
.j-tick.is-on { stroke: var(--glaze); }
.j-pivot { fill: var(--yellow); stroke: var(--cobalt); stroke-width: 3; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.plate.has-line:not(.is-hit) .j-pivot { transform: scale(.4); }
.joint { position: absolute; inset: 0; cursor: crosshair; touch-action: pan-y; -webkit-tap-highlight-color: transparent; outline: none; }
.joint:focus-visible { outline: 3px solid var(--yellow); outline-offset: -6px; }

.scene-ui { position: relative; z-index: 4; width: min(1100px, 100%); margin: 24px auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.plate-deg { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.plate-deg .j-deg { font-stretch: 125%; font-weight: 760; font-size: clamp(40px, 11vw, 56px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; min-width: 3.4ch; }
.plate-note { font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; }
.phase button {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: 100%; min-height: 60px; padding: 8px 14px;
  background: transparent; border: 1.5px solid var(--field); border-radius: 0; cursor: pointer; text-align: left; color: var(--ink);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.phase button:hover { border-color: var(--ink); background: #fff; }
.phase button:active { transform: translateY(1px); }
.phase button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ph-n { font-stretch: 125%; font-weight: 760; font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ph-t { font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.phase.is-near button { background: var(--ink); border-color: var(--ink); color: var(--glaze); }
.phase.is-near .ph-t { color: var(--muted); }
.joint-legend, .joint-hint { max-width: 44ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.hint-touch, .hint-still { display: none; }
@media (pointer: coarse), (pointer: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }

/* Desktop with motion: the pinned scene (sticky; the scroll bends the knee). Dark, full-bleed. */
@media (min-width: 800px) {
  .js-motion .scene { height: 340vh; padding: 0; background: #02050F; color: var(--glaze); --focus: var(--yellow); }
  .js-motion .scene-stick { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; }
  .js-motion .plate { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, 1680px); height: auto; aspect-ratio: auto; margin: 0; background: transparent; transform: translateX(-50%); }
  .js-motion .joint { cursor: grab; }
  .js-motion .joint:active { cursor: grabbing; }
  .js-motion .scene-ui { position: absolute; z-index: 4; left: var(--gut); top: 0; bottom: 0; width: min(340px, 30vw); margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 0; }
  .js-motion .plate-deg { display: block; }
  .js-motion .plate-deg .j-deg { display: block; font-size: clamp(56px, 6vw, 92px); }
  .js-motion .plate-note { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
  .js-motion .phases { display: block; margin-top: clamp(20px, 4vh, 40px); }
  .js-motion .phase button {
    flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 16px; min-height: 52px; padding: 10px 0 10px 14px; border: 0; border-top: 1px solid rgba(195, 206, 240, .22); color: #93A3D8; background: transparent; position: relative;
  }
  .js-motion .phase:last-child button { border-bottom: 1px solid rgba(195, 206, 240, .22); }
  .js-motion .phase button::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--yellow); transform: scaleY(0); transform-origin: center; transition: transform .25s var(--ease); }
  .js-motion .phase button:hover { background: rgba(243, 245, 250, .06); color: var(--glaze); border-color: rgba(195, 206, 240, .22); }
  .js-motion .phase button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
  .js-motion .phase.is-near button { background: transparent; color: var(--glaze); }
  .js-motion .phase.is-near button::before { transform: scaleY(1); }
  .js-motion .ph-n { flex: none; width: 4.2ch; font-size: 21px; }
  .js-motion .ph-t, .js-motion .phase.is-near .ph-t { color: inherit; font-size: 15px; }
  .js-motion .joint-legend, .js-motion .joint-hint { max-width: 32ch; color: var(--muted); }
  .js-motion .joint-legend { margin-top: clamp(20px, 3.5vh, 32px); }
  .js-motion .joint-hint { margin-top: 12px; }
}
@media (min-width: 1700px) {
  .js-motion .plate { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
}
@media (min-width: 800px) {
  .phases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* K16 (v2b): portrait and square screens from 800 px (iPad upright). The full-height `cover` crop blew the 3:2 frames up ~1.5x,
   cut the shin off at the right edge and ran the steel pole through the text column. Here the picture keeps its own 3:2 frame
   (no crop, no enlargement) and the controls sit under it. Landscape tablets and desktops are unchanged. */
@media (min-width: 800px) and (max-aspect-ratio: 11/10) {
  .js-motion .scene-stick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.4vh, 28px); padding: calc(var(--top-h) + 8px) 0 28px; }
  .js-motion .plate {
    position: relative; top: auto; bottom: auto; left: auto; flex: none; margin: 0; transform: none; aspect-ratio: 3 / 2; height: auto;
    width: min(100%, 1200px, calc((100vh - var(--top-h) - 340px) * 1.5));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect;
  }
  .js-motion .scene-ui { position: relative; left: auto; top: auto; bottom: auto; flex: none; width: min(calc(100% - 2 * var(--gut)), 720px); margin: 0; display: block; }
  .js-motion .plate-deg { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 16px; }
  .js-motion .plate-deg .j-deg { display: inline-block; font-size: clamp(48px, 6vw, 72px); }
  .js-motion .plate-note { margin-top: 0; }
  .js-motion .phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
  .js-motion .phase button { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 60px; padding: 10px 0 10px 14px; border-bottom: 1px solid rgba(195, 206, 240, .22); }
  .js-motion .ph-n { width: auto; }
  .js-motion .joint-legend, .js-motion .joint-hint { max-width: none; }
  .js-motion .joint-legend { margin-top: 18px; }
  .js-motion .joint-hint { margin-top: 8px; }
}

/* ---------- 12 · 4 Services + prices / What we don't promise / Team ---------- */
/* the glaze shows fully at the edges and quietly under the text columns */
.band-tiles.tex-on { background-image: linear-gradient(90deg, rgba(28, 63, 148, .25) 0%, rgba(28, 63, 148, .74) var(--tl), rgba(28, 63, 148, .74) calc(100% - var(--tl)), rgba(28, 63, 148, .25) 100%), url("../img/tiles-cobalt-1152.webp");
  background-size: auto, 576px; background-position: 0 0, center top; }
.tex-white.tex-on { background-image: linear-gradient(90deg, rgba(243, 245, 250, .15) 0%, rgba(243, 245, 250, .62) var(--tl), rgba(243, 245, 250, .62) calc(100% - var(--tl)), rgba(243, 245, 250, .15) 100%), url("../img/tiles-white-1152.webp"); background-size: auto, 576px; background-position: 0 0, center top; }
/* a sheen of light that crosses the glazed band with the scroll (transform only, kept away from the text columns) */
.glint { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.1) var(--tl), rgba(0,0,0,.1) calc(100% - var(--tl)), #000 100%);
          mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.1) var(--tl), rgba(0,0,0,.1) calc(100% - var(--tl)), #000 100%); }   /* v2b: the sheen stays out of the text columns */
.glint i { position: absolute; top: -10%; bottom: -10%; left: -45%; width: 45%;
  background: linear-gradient(100deg, rgba(200, 215, 255, 0) 0%, rgba(200, 215, 255, .07) 42%, rgba(255, 255, 255, .13) 50%, rgba(200, 215, 255, .07) 58%, rgba(200, 215, 255, 0) 100%);
  transform: skewX(-14deg); mix-blend-mode: screen; }
.sec-offer { row-gap: clamp(88px, 12vh, 136px); }
.prices { width: 100%; margin-top: 40px; border-collapse: collapse; font-variant-numeric: tabular-nums; text-align: left; }
.prices thead th { padding: 0 0 12px; font-size: 13.5px; font-weight: 500; color: var(--fg-2); border-bottom: 1px solid var(--rule); }
.prices th, .prices td { vertical-align: baseline; }
.prices tbody th { padding: 18px 16px 18px 0; font-weight: 400; border-bottom: 1px solid var(--rule); }
.prices tbody td { padding: 18px 0 18px 16px; white-space: nowrap; border-bottom: 1px solid var(--rule); color: var(--fg-2); font-size: 15.5px; }
.prices thead th:nth-child(n+2), .prices tbody td { text-align: right; }
.prices tbody td:last-child { color: var(--fg); font-stretch: 125%; font-weight: 720; font-size: 19px; }
.svc { display: block; font-stretch: 125%; font-weight: 720; font-size: 17px; line-height: 1.3; }
.svc-note { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }
.offer-prices .sample { text-align: left; }
.offer-prices { text-align: left; }
.offer-prices .h2 { text-align: right; }
.limits { margin-top: 40px; display: grid; gap: 0; }
.limits li { padding: 20px 0; border-top: 1px solid var(--rule); }
.limits li:last-child { border-bottom: 1px solid var(--rule); }
.limits h3 { position: relative; display: inline-block; font-size: 19px; isolation: isolate; }
.limits h3::after { /* the line strikes through each promise we won't make */
  content: ""; position: absolute; z-index: -1; left: -3px; right: -3px; top: 0.71em; height: 2px; margin-top: -1px;  /* x-height middle, painted behind the glyphs (Ö1) */
  background: var(--yellow); transform-origin: left center; pointer-events: none;
}
.js-motion .limits h3::after { transition: transform .6s var(--ease) .08s; }
.js-motion .limits li:not(.is-in) h3::after { transform: scaleX(0); }
.limits p { margin-top: 6px; color: var(--fg-2); max-width: 52ch; }
.offer-team-h { align-self: start; }
.offer-team-h .sample { margin-top: 12px; }
.offer-team { display: grid; gap: 14px; padding-top: 4px; font-size: 18px; }
.offer-team p { max-width: 52ch; }

/* ---------- 13 · 5 FAQ + appointment ---------- */
.sec-faq { padding-bottom: clamp(96px, 12vh, 140px); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item { border-top: 1px solid var(--rule); }
.faq-q button {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 68px; padding: 18px 0;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink);
  font-size: 18px; line-height: 1.35; font-weight: 600; font-stretch: 100%;
}
.faq-icon { position: relative; flex: none; width: 32px; height: 32px; border: 1.5px solid var(--ink); transition: background-color .18s ease; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); transition: transform .35s var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item.is-open .faq-icon::after { transform: rotate(0deg); }
.faq-q button:hover .faq-icon { background: var(--yellow); }
.faq-q button:active .faq-icon { transform: translateY(1px); }
.faq-a p { padding: 0 64px 24px 0; color: var(--ink-2); max-width: 60ch; }
.js .faq-item:not(.is-open) .faq-a { display: none; }

.sec-book { padding-top: 0; padding-bottom: calc(var(--sec-y) + 16px); }
.sec-book > .book-grid { z-index: auto; }  /* the line must paint over the form card edge */
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; }
.book-side { max-width: 17rem; font-size: 15.5px; line-height: 1.55; }
.book-side .h3 { margin-bottom: 8px; }
.book-side .sample { margin-top: 10px; }
.book-form { grid-column: 2; grid-row: 1; }
.book-side-l { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.book-side-r { grid-column: 3; grid-row: 1; justify-self: start; }
.book-form { position: relative; z-index: 1; background: var(--paper); padding: clamp(32px, 3.4vw, 48px); --focus: var(--ink); }
html:not(.line-on) .book-form { box-shadow: inset 0 0 0 var(--lw) var(--ink); }
.h2-form { font-size: clamp(30px, 2.6vw, 40px); }
.form-lede { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.field { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; margin-bottom: 4px; padding: 0; font-size: 14.5px; font-weight: 600; }
.field legend { margin-bottom: 12px; }
.field input[type="text"], .field input[type="email"] {
  width: 100%; height: 50px; padding: 0 2px; border: 0; border-bottom: 2px solid var(--field); border-radius: 0;
  background: transparent; color: var(--ink); font-size: 17px; transition: border-color .18s ease, background-color .18s ease;
}
.field input:hover { border-bottom-color: var(--ink); }
.field input:focus-visible { outline: none; border-bottom-color: var(--ink); background: linear-gradient(var(--glaze), var(--glaze)); box-shadow: 0 2px 0 var(--ink); }
.field input[aria-invalid="true"] { border-bottom-color: var(--error); }
.field-error { margin-top: 8px; font-size: 14px; color: var(--error); font-weight: 500; }
.field-error[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--field); font-size: 15px; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.chip:hover span { border-color: var(--ink); }
.chip:active span { transform: translateY(1px); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--glaze); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.form-note { margin: 26px 0 18px; font-size: 14px; color: var(--ink-2); }
.form-demo { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); text-align: center; }
.form-status { min-height: 1.5em; margin-top: 6px; font-size: 15px; font-weight: 600; text-align: center; color: var(--ink); }

/* ---------- 14 Footer + mobile appointment bar ---------- */
.site-footer { position: relative; overflow: hidden; padding: clamp(80px, 11vh, 120px) var(--gut) 30px; }
.ft-top { position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.ft-name { display: flex; align-items: center; gap: 10px; font-stretch: 125%; font-weight: 760; font-size: 22px; letter-spacing: .04em; line-height: 1; }
.ft-brand p + p { margin-top: 12px; color: var(--muted); }
.ft-h { margin-bottom: 12px; font-size: 14px; font-weight: 720; color: var(--muted); }
.ft-col p, .ft-col li { font-size: 15.5px; line-height: 1.5; }
.ft-col ul { list-style: none; }
.ft-col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-right: 6px; text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(var(--yellow), var(--yellow)) left calc(100% - 10px) / 0 2px no-repeat; transition: background-size .2s var(--ease), color .18s ease; }
.ft-col a:active, .ft-credit:active, .menu-nav a:active, .brand:active { transform: translateY(1px); }
.ft-col a:hover { background-size: 100% 2px; }
.ft-word { position: relative; margin: clamp(56px, 8vh, 96px) 0 0; font-stretch: 125%; font-weight: 760; font-size: calc((100vw - 2 * var(--gut)) / 4.68); line-height: .78; letter-spacing: -0.045em; color: #90A4DE; white-space: nowrap; user-select: none; transform: translateX(-.04em); }
.ft-bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.ft-credit { display: inline-flex; align-items: center; min-height: 44px; color: var(--glaze); text-decoration: none; }
.ft-credit { transition: color .18s ease; }
/* K14 (v2b): the permanent underline is a real per-line text-decoration, not a box background that struck through line 2 */
.ft-credit-t { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-skip-ink: none; }
.ft-credit:hover { color: var(--yellow); }
.ft-bottom p { display: flex; align-items: center; min-height: 44px; }
/* studio links in the footer: back to the studio site, legal notice, privacy (all on formschwung.com).
   K14 (v2b): the "·" separators belong to the links (::before in the margin before every link but the first); the row clips them, so a
   link that starts a new line never shows a leading "·" and a line never ends with one. The 6 px padding keeps the focus ring inside the clip. */
.ft-bottom .ft-studio { display: block; overflow: hidden; min-height: 56px; margin: -6px; padding: 6px; }
.ft-studio-in { display: flex; flex-wrap: wrap; margin-left: -24px; }
.ft-studio-in > a { position: relative; margin-left: 24px; }
.ft-studio-in > a + a::before { content: "·"; position: absolute; left: -14px; top: 50%; width: 4px; margin-top: -.8em; line-height: 1.6; color: var(--muted); text-decoration: none; }
.ft-bottom .ft-studio a { display: inline-flex; align-items: center; min-height: 44px; color: var(--glaze); text-decoration: none; background: linear-gradient(var(--yellow), var(--yellow)) left calc(100% - 10px) / 0 2px no-repeat; transition: color .18s ease, background-size .2s var(--ease); }
.ft-bottom .ft-studio a:hover { color: var(--yellow); background-size: 100% 2px; }
.ft-bottom .ft-studio a:active { transform: translateY(1px); }
.ft-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 28px; }
.m-bar { display: none; }

/* ---------- 15 Entrance states (only while motion is on) ---------- */
.js-motion .intro-hide { opacity: 0; }
.js-motion [data-reveal] { transition: opacity .5s ease, transform .5s var(--ease); }
.js-motion [data-reveal]:not(.is-in) { opacity: 0; }
.js-motion [data-reveal="l"]:not(.is-in) { transform: translateX(24px); }
.js-motion [data-reveal="r"]:not(.is-in) { transform: translateX(-24px); }
.js-motion .step { transition: opacity .45s ease, transform .45s var(--ease); }
.js-motion .step:not(.is-on) { opacity: 0; transform: translateX(-18px); }

/* ---------- Tablet tuning ---------- */
@media (max-width: 1180px) {
  :root { --axis: 128px; --col: 30rem; }
  .hd-in { gap: 18px; }
  .hd-nav a { padding: 0 7px; font-size: 14.5px; }
}
/* compact header below 1000 px: menu button + one-tap "Prices" (Ö5) */
@media (max-width: 999.98px) {
  .hd-nav { display: none; }
  .hd-prices {
    display: inline-flex; align-items: center; flex: none; min-height: 44px; margin-left: auto; padding: 0 10px;
    font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--glaze); transition: color .18s ease;
  }
  .hd-prices:hover { color: var(--yellow); }
  .hd-prices:active { transform: translateY(1px); }
  .menu-btn {
    display: inline-flex; align-items: center; flex: none; gap: 10px; margin-right: 26px; min-height: 44px; min-width: 44px; padding: 0 12px; white-space: nowrap;   /* v2b (K13): never squeezed by the row */
    background: transparent; border: 1.5px solid var(--border); border-radius: 0; cursor: pointer; font-size: 14.5px; font-weight: 600;
    transition: background-color .18s ease, color .18s ease;
  }
  .menu-btn:hover { background: var(--yellow); color: var(--cobalt); border-color: var(--yellow); }
  .menu-btn:active { transform: translateY(1px); }
  .menu-btn-lines { position: relative; width: 16px; height: 10px; }
  .menu-btn-lines::before, .menu-btn-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
  .menu-btn-lines::before { top: 0; }
  .menu-btn-lines::after { top: 8px; }
  .menu-open .menu-btn-lines::before { top: 4px; transform: rotate(45deg); }
  .menu-open .menu-btn-lines::after { top: 4px; transform: rotate(-45deg); }
  .menu-open .site-header { background: transparent; box-shadow: none; transform: none; }
}
@media (max-width: 999.98px) and (min-width: 800px) {
  .hd-in { gap: 14px; }
  .hd-cta { margin-left: auto; }
  .hd-prices { margin-left: 0; }
  .menu-btn { margin-right: 0; }
}
/* Ö10 (v2b): the three-column booking row needs ~1240 px (hours note inside the gutter, notes ≥ 12 px clear of the flag); below that the
   side notes (nowrap hours) ran out of the left edge. Under 1240 px the form stands alone in the middle and the two notes sit under it. */
@media (max-width: 1239.98px) and (min-width: 800px) {
  .book-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 44px; align-items: start; }
  .book-form { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 560px); }
  .book-side { max-width: 22rem; }
  .book-side-l { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; }
  .book-side-r { grid-column: 2; grid-row: 2; justify-self: start; }
}
/* portrait tablets use the portrait render and the phone-style opening */
@media (min-width: 800px) and (max-aspect-ratio: 4/5) {
  .hero { grid-template-rows: auto 1fr auto; }
  .hero-media { bottom: 18%; left: 30%; }   /* a panel on the right, so the line passes left of the model */
  .hero-img { object-position: 50% 42%; }
  .hero-scrim { background:
      linear-gradient(90deg, #1C3F94 0%, rgba(28, 63, 148, .6) 18%, rgba(28, 63, 148, 0) 42%),
      linear-gradient(180deg, rgba(12, 28, 72, .7) 0%, rgba(12, 28, 72, 0) 30%),
      linear-gradient(0deg, #1C3F94 0%, rgba(28, 63, 148, .85) 12%, rgba(28, 63, 148, 0) 40%); }
  .hero-main { align-self: start; padding-top: 40px; }
  .hero-foot { grid-row: 3; }
}
/* K2: at ≥ 800 px the gutter always leaves room for the fixed flag */
@media (min-width: 800px) { :root { --gut: clamp(40px, 4vw, 64px); } }

/* ---------- 16 Mobile (< 800 px): the line becomes a rail on the right edge ---------- */
@media (max-width: 799.98px) {
  :root { --hd-h: 64px; --studio-h: 44px; --lw: 3px; --sec-y: 96px; --pad-r: 64px; --rail: 48px; }  /* rail and bob stay ≥ 12 px clear of the flag (Ö2) */
  html { scroll-padding-bottom: 88px; }  /* keyboard focus never hides under the fixed bar (Ö6) */
  body { font-size: 16.5px; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .flag { right: 3px; padding: 10px 3px; font-size: 11px; }
  .hd-in { gap: 12px; }
  .hd-cta { display: none; }
  .hd-prices { margin-left: auto; }
  .brand-desc { display: none; }   /* the 22 px kicker right below carries the sector on phones */
  .brand-word { font-size: 19px; }

  .sec { padding: var(--sec-y) var(--pad-r) var(--sec-y) var(--gut); }
  .axis-grid { display: block; }
  .col-l, .col-r { max-width: none; text-align: left; }
  /* Chrome applies justify-self in block layout too: reset the desktop axis alignment */
  .col-l, .col-r, .joint-legend, .joint-hint, .book-side, .offer-team-h { justify-self: stretch; }
  .col-l .body { margin-left: 0; max-width: 34ch; }
  .h2 { font-size: clamp(32px, 9.2vw, 40px); }
  .body { font-size: 17px; }

  .hero { min-height: max(600px, 100svh); grid-template-rows: auto 1fr auto; }
  .hero { background: linear-gradient(180deg, #07123A 0, #07123A 230px, #1C3F94 calc(100% - 160px)); }
  .hero-media { top: 170px; bottom: 21%; }   /* the render starts under the headline, so the model is never covered by it, and fades into cobalt before the first line of text */
  .hero-img { object-position: 50% 38%; }
  .hero-scrim { background:
      linear-gradient(180deg, #07123A 0%, rgba(7, 18, 58, .7) 14%, rgba(7, 18, 58, 0) 34%),
      linear-gradient(0deg, #1C3F94 0%, rgba(28, 63, 148, .94) 16%, rgba(28, 63, 148, .7) 30%, rgba(28, 63, 148, 0) 54%); }
  .hero-main { grid-row: 1; grid-column: 1; align-self: start; padding: 22px 24px 24px var(--gut); text-align: left; }  /* the rail starts below the full stop */
  .hero-kicker { font-size: 22px; margin-bottom: 14px; }
  .hero-title { font-size: clamp(40px, calc((100vw - 46px) / 6.6), 96px); }  /* ≥ 48 px from 363 px wide; "Movement," = 6.57 em */
  .hero-foot { display: block; grid-row: 3; grid-column: 1; padding: 0 var(--pad-r) 26px var(--gut); }   /* explicit column: the backing pseudo-element below shares this cell */
  .hero-ctas { justify-content: flex-start; margin-top: 24px; }
  .hero-concept { margin-top: 20px; }
  .hero-media { top: max(170px, calc(170px + (100vw - 600px) * .5)); }   /* v2b: from 600 px the headline is bigger, the render starts lower so the spine does not run through it */
  /* Ö9 (v2b): the lede never sits on the render, whatever the phone's height. A cobalt backing lives in the hero grid under the whole
     foot (above the picture, below the line and the text) and fades in over the 56 px above the first line. */
  .hero::after { content: ""; position: relative; grid-row: 3; grid-column: 1; align-self: stretch; margin-top: -56px; pointer-events: none;
    background: linear-gradient(180deg, rgba(28, 63, 148, 0) 0, rgba(28, 63, 148, .84) 34px, #1C3F94 56px); }

  .look-list { margin-top: 40px; gap: 26px; }
  .visit-facts { padding-top: 0; margin-bottom: 64px; }
  .visit-facts dd { margin-left: 0; }
  .sec-visit { display: flex; flex-direction: column-reverse; }
  .sec-visit .visit-facts { margin: 64px 0 0; }
  .steps { margin-top: 32px; }
  .range-notes { margin-top: 36px; }
  .scene { padding: 0 var(--pad-r) 88px var(--gut); }
  .plate { width: 100%; aspect-ratio: 1 / 1; }   /* square crop of the 3:2 frames: the leg reads larger */
  .scene-ui { margin-top: 20px; gap: 16px; }
  .joint-legend, .joint-hint { max-width: 34ch; }

  .band-tiles.tex-on { background-size: auto, 432px; }
  .tex-white.tex-on { background-size: auto, 432px; }
  .glint { display: none; }
  .sec-offer > * + * { margin-top: 88px; }
  .offer-prices .h2 { text-align: left; }
  .prices tbody th { padding-right: 10px; }
  .prices tbody td { padding-left: 10px; font-size: 14.5px; }
  .prices tbody td:last-child { font-size: 17px; }
  .offer-team-h + .offer-team { margin-top: 20px; }

  .sec-book { padding-bottom: 88px; }
  .book-grid { display: block; }
  .book-form { margin-right: calc((var(--pad-r) - var(--rail) + var(--lw) / 2) * -1); padding: 28px 22px 26px; }
  .book-side { max-width: none; text-align: left; margin-top: 40px; }
  .book-side-l { margin-top: 48px; }
  .book-side + .book-side { margin-top: 28px; }
  .chip span { padding: 0 14px; font-size: 14.5px; }

  .site-footer { padding: 72px var(--pad-r) 24px var(--gut); }
  .ft-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-word { font-size: calc((100vw - var(--gut) - var(--pad-r)) / 4.68); margin-top: 56px; }
  .ft-bottom { display: block; }
  .ft-col a { display: inline-flex; align-items: center; min-height: 44px; background-position: left calc(100% - 10px); }
  .ft-col li, .ft-col p { line-height: 1.5; }
  .limits h3 { font-size: 17px; }
  .ft-bottom p + p { margin-top: 4px; }
  .ft-bottom .ft-studio { margin-top: -2px; }

  .m-bar {
    display: block; position: fixed; z-index: 44; left: 0; right: 0; bottom: 0;
    padding: 10px var(--pad-r) calc(10px + env(safe-area-inset-bottom)) var(--gut);
    background: var(--cobalt); border-top: 1px solid var(--border);
    transition: transform .3s var(--ease), visibility .3s;
  }
  .m-bar.is-off { transform: translateY(110%); visibility: hidden; }

  .js-motion [data-reveal="l"]:not(.is-in), .js-motion [data-reveal="r"]:not(.is-in) { transform: translateY(14px); }
  .js-motion .step:not(.is-on) { transform: translateY(12px); }
}

@media (max-width: 359.98px) {
  .ft-top { grid-template-columns: 1fr; }
}
/* K13 (v2b): 320-339 px: brand + Prices + Menu fit the 280 px row without squeezing the Menu button */
@media (max-width: 339.98px) {
  .hd-in { gap: 8px; }
  .brand { flex: none; }
  .menu-btn { margin-right: 6px; padding: 0 10px; gap: 8px; }
  .hd-prices { padding: 0 8px; }
}

/* ---------- 17 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .hint-fine, .hint-touch { display: none !important; }
  .hint-still { display: inline; }
}
@media (prefers-reduced-motion: reduce) and (pointer: coarse) { .hint-still { display: none !important; } }