/* Privatpraxis Schulz · page styles. The engine (scrollcraft.css) is untouched;
   everything here is this site's own markup and the theme tokens. */

@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/figtree-latin-italic.woff2") format("woff2");
}
/* The accent serif for the few big sentences. Self-hosted like Figtree (no Google request). */
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Kalkputz: the grey-white lime plaster of the real treatment room. */
  --sc-canvas:     #ECEFEE;
  --sc-surface:    #E0E5E4;
  --sc-ink:        #1B2327;
  --sc-ink-soft:   #4A565D;
  --sc-accent:     #C4232A;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Figtree", system-ui, sans-serif;
  --sc-font-text:    "Figtree", system-ui, sans-serif;

  /* The brand dot, and the slate ground of the peak and the close. */
  --dot:        #D8262D;
  --dot-dark:   #EC3D42;
  --slate:      #172025;
  --slate-2:    #1E292F;
  --slate-ink:  #E9EDEC;
  --slate-soft: #A6B3B8;

  /* Light canvas: halve the shadows, tint them to the plaster, flip the edge. */
  --sc-shadow-color: 190 18% 30%;
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.6);
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 26%, transparent);

  /* One type scale for the whole page: four sizes that carry everything. */
  --fs-display:   clamp(2.75rem, 1.45rem + 3.7vw, 5.25rem);   /* the two big statements */
  --fs-statement: clamp(2.1rem, 1.4rem + 2.2vw, 3.5rem);      /* section titles, complaint lines, the phone */
  --fs-title:     clamp(1.3rem, 1.12rem + 0.55vw, 1.7rem);    /* names and units */
  --fs-lede:      clamp(1.1rem, 1rem + 0.4vw, 1.32rem);       /* the sentence under a title */
  --fs-small:     0.92rem;
  --tr-display: -0.036em; --tr-statement: -0.032em; --tr-title: -0.018em;
  --w-display: 600; --w-statement: 580;
  /* The big sentences speak in a serif; everything that informs stays in Figtree. */
  --font-accent: "Newsreader", Georgia, serif;
  --w-accent: 430; --tr-accent: -0.02em; --accent-adjust: 0.5;

  /* Where content starts, clear of the axis. */
  --axis-w: clamp(118px, 9vw, 150px);
  --content-left: var(--axis-w);
  --content-right: clamp(1.25rem, 5vw, 5rem);
  --dock-h: 0px;
}
@media (max-width: 860px) {
  :root {
    --content-left: 1.25rem; --content-right: 1.25rem; --dock-h: calc(64px + env(safe-area-inset-bottom));
    --fs-display: clamp(2.2rem, 1.2rem + 5.2vw, 3rem); --fs-statement: 1.9rem; --fs-title: 1.3rem; --fs-lede: 1.05rem;
  }
}

html { scroll-padding-top: 72px; }
/* A menu jump focuses its section for screen readers; no ring around a whole screen. */
main > section:focus { outline: none; }
body { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); letter-spacing: 0; }
::selection { background: var(--dot); color: #fff; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 0.6rem 1rem; border-radius: 999px;
  background: var(--sc-ink); color: var(--sc-canvas); text-decoration: none;
  transform: translateY(-160%); transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* --------------------------------------------------------- shared type -- */
.h2 {
  font-size: var(--fs-statement);
  font-weight: var(--w-statement); line-height: 1.05; letter-spacing: var(--tr-statement);
  margin: 0; text-wrap: balance;
}
.lede {
  font-size: var(--fs-lede);
  line-height: 1.5; color: var(--sc-ink-soft);
  max-width: 34em; margin: 1.25rem 0 0; text-wrap: pretty;
}

/* --------------------------------------------------------------- button -- */
.cta {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 48px; padding: 0.8rem 1.45rem;
  border-radius: 999px; background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.18), 0 6px 16px -6px hsl(355 70% 30% / 0.45);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.cta::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; opacity: 0.85;
}
@media (hover: hover) and (pointer: fine) { .cta:hover { background: #A81C22; } }
.cta::before { transition: transform 180ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .cta:hover::before { transform: scale(1.5); } }
.cta:active { transform: translateY(1px) scale(0.98); }

/* ----------------------------------------------------------------- intro --
   The twelve vertebrae drop into the mark and the plumb line draws, then the
   veil lifts. About a second, once per visit. */
.intro {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; pointer-events: none;
  background: var(--sc-canvas); animation: intro-out 450ms var(--sc-ease-out) 880ms forwards;
}
.intro__mark { height: min(22vh, 170px); width: auto; overflow: visible; }
.intro__mark circle { fill: var(--dot); opacity: 0; transform: translateY(-24px); transform-box: fill-box; animation: intro-drop 420ms var(--sc-ease-out) calc(60ms + var(--i) * 30ms) forwards; }
.intro__plumb { fill: var(--dot); transform: scaleY(0); transform-origin: 50% 0; transform-box: fill-box; animation: intro-plumb 620ms var(--sc-ease-out) 120ms forwards; }
@keyframes intro-drop { to { opacity: 1; transform: none; } }
@keyframes intro-plumb { to { transform: none; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
html.has-intro .hero__title { animation-delay: 1.05s; }
html.has-intro .hero__lede { animation-delay: 1.2s; }
html.has-intro .hero__actions { animation-delay: 1.32s; }

/* ---------------------------------------------------------------- corners -- */
.corner { position: fixed; top: 0; z-index: var(--sc-z-chrome); padding: 18px 22px; color: var(--sc-ink); transition: color 240ms var(--sc-ease-out); }
.corner--brand { left: 0; }
.corner--tools { right: 0; display: flex; align-items: center; gap: 0.75rem; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.brand__mark { width: 15px; height: 56px; color: var(--dot); transition: opacity 320ms var(--sc-ease-out); }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-weight: 600; font-size: 1.14rem; letter-spacing: -0.015em; }
.brand__sub { font-size: 0.82rem; margin-top: 0.1rem; color: var(--sc-ink-soft); transition: color 240ms var(--sc-ease-out); }
body.is-docked .brand__mark { opacity: 0; }

.lang { display: flex; gap: 2px; font-size: 0.88rem; font-weight: 600; }
.lang a { padding: 0.45rem 0.55rem; border-radius: 999px; text-decoration: none; color: inherit; opacity: 0.55; min-width: 40px; text-align: center; }
.lang a[aria-current="true"] { opacity: 1; text-decoration: underline; text-decoration-color: var(--dot); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
@media (hover: hover) and (pointer: fine) { .lang a:hover { opacity: 1; } }
.menu-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 44px; padding: 0.5rem 1.15rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--sc-hairline-strong); background: color-mix(in oklab, var(--sc-canvas) 70%, transparent);
  font-weight: 600; font-size: 0.92rem; color: inherit;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { background: var(--sc-canvas); } }
/* Two fine lines: the menu, said in the page's own hairline. */
.menu-btn__icon { width: 15px; height: 6px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.menu-btn:active { transform: translateY(1px); }

/* Past the hero, a soft band of ground keeps the corners off the copy scrolling under them. */
.corner--brand::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 84px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 50%, transparent);
  opacity: 0; transition: opacity 240ms var(--sc-ease-out);
}
body.is-past-hero .corner--brand::before { opacity: 1; }
body.is-dark-top .corner--brand::before { background: linear-gradient(to bottom, color-mix(in oklab, var(--slate) 94%, transparent) 50%, transparent); }
body.is-dark-top .corner { color: var(--slate-ink); }
body.is-dark-top .brand__sub { color: var(--slate-soft); }
body.is-dark-top .menu-btn { background: color-mix(in oklab, var(--slate) 60%, transparent); border-color: color-mix(in oklab, var(--slate-ink) 30%, transparent); }

/* ------------------------------------------------- the spine (signature) -- */
.spine { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.spine__dot {
  position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--dot); opacity: 0;
  will-change: transform, opacity; transform: translate3d(-100px, -100px, 0);
}
/* A pain mark on the chart carries a soft halo, like a pen pressed into paper. */
.spine__dot.is-mark { box-shadow: 0 0 0 5px color-mix(in oklab, var(--dot) 16%, transparent); }
.spine__dot.is-current { box-shadow: 0 0 0 3px var(--sc-canvas), 0 0 0 4.5px var(--dot); }
.spine__plumb, .spine__axis {
  position: absolute; left: 0; top: 0; width: 2px; height: 100px; margin-left: -1px;
  transform-origin: 50% 0; will-change: transform, opacity; opacity: 0; background: var(--dot);
}
.spine__axis { background: currentColor; color: var(--sc-ink); width: 1px; margin-left: -0.5px; }
body.is-dark-top /* A pain mark on the chart carries a soft halo, like a pen pressed into paper. */
.spine__dot.is-mark { box-shadow: 0 0 0 5px color-mix(in oklab, var(--dot) 16%, transparent); }
.spine__dot.is-current { box-shadow: 0 0 0 3px var(--slate), 0 0 0 4.5px var(--dot-dark); }

.axis { position: fixed; inset: 0 auto 0 0; width: 0; z-index: 62; visibility: hidden; }
body.is-docked .axis { visibility: visible; }
.axis a {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; color: var(--sc-ink);
}
.axis a span {
  position: absolute; left: 40px; top: 50%; translate: 0 -50%;
  padding: 0.3rem 0.75rem; border-radius: 999px; white-space: nowrap;
  background: var(--sc-ink); color: var(--sc-canvas); font-size: 0.85rem; font-weight: 600;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
  pointer-events: none;
}
.axis a:hover span, .axis a:focus-visible span { opacity: 1; transform: none; }
.axis a:focus-visible { outline-offset: 0; }

/* ------------------------------------------------------------------ hero -- */
.hero .sc-stage__poster, .hero video { object-position: 62% 50%; }
/* One orchestrated arrival: the room settles, then the words come in. */
.hero__title { animation: hero-rise 1s var(--sc-ease-out) 0.25s both; }
.hero__lede { animation: hero-rise 1s var(--sc-ease-out) 0.45s both; }
.hero__actions { animation: hero-rise 1s var(--sc-ease-out) 0.6s both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(10px); } }
.hero__wash {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 24%,
    color-mix(in oklab, var(--sc-canvas) 36%, transparent) 40%,
    transparent 56%);
}
/* Atmosphere plane: morning light from the window, swelling and sliding as the camera moves in. */
.hero__light {
  position: absolute; z-index: 1; inset: -10% -20% -10% -30%; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 18%, rgb(255 255 255 / 0.30) 30%, rgb(255 255 255 / 0.06) 44%, transparent 52%),
    linear-gradient(112deg, transparent 40%, rgb(255 255 255 / 0.16) 50%, transparent 60%);
  mix-blend-mode: soft-light;
  opacity: calc(0.35 + var(--sc-p, 0) * 0.65);
  transform: translate3d(calc(var(--sc-p, 0) * -9vw), 0, 0);
  will-change: transform, opacity;
}
.hero__copy {
  position: absolute; z-index: 20; left: var(--content-left); top: 50%;
  translate: 0 -46%; width: min(44rem, 52vw);
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--w-display); line-height: 1.0; letter-spacing: var(--tr-display);
  margin: 0; max-width: 12.5ch; text-wrap: balance;
}
.hero__lede { margin: 1.5rem 0 0; max-width: 31em; color: var(--sc-ink-soft); font-size: var(--fs-lede); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.4rem; margin: 2rem 0 0; }
.hero__phone { font-weight: 600; font-variant-numeric: tabular-nums; text-decoration-color: color-mix(in oklab, var(--sc-ink) 30%, transparent); }
/* Second beat: takes over the plaster side as the headline leaves. */
.hero__beat {
  position: absolute; z-index: 20; left: var(--content-left); bottom: 15vh; margin: 0;
  font-size: var(--fs-statement); font-weight: var(--w-statement); letter-spacing: var(--tr-statement); line-height: 1.05;
  max-width: 11ch; color: var(--sc-ink);
}

/* ------------------------------------------------- the pain chart (lot) --
   One pinned scene. site.js drives the figure's camera, the marks, the list
   and the ground; the engine only owns the closing copy's cue. */
.lot__anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
.lot__shade { position: absolute; inset: 0; z-index: 0; background: var(--slate); opacity: 0; }
.lot__figure {
  position: absolute; left: 0; top: 0; z-index: 1; width: 760px; height: 1140px; max-width: none;
  transform-origin: 0 0; overflow: visible; color: var(--sc-ink); will-change: transform, opacity;
}
/* The room, softly out of focus, so the chart hangs in the practice rather than on white. */
.lot__room {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0.7; pointer-events: none;
  /* Masked away from the text column: the room shows behind the board, the words sit on plaster. */
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.16) 0%, rgb(0 0 0 / 0.22) 36%, rgb(0 0 0 / 0.85) 56%, #000 100%);
          mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.16) 0%, rgb(0 0 0 / 0.22) 36%, rgb(0 0 0 / 0.85) 56%, #000 100%);
}
/* A clinical board: header, cm ruler, fine and coarse grid, floor and plumb mark. */
/* Not a sheet of paper: a veil of the section's own plaster over the room, marked only at its corners. */
.lot__lightbox { fill: var(--board, #ECEFEE); fill-opacity: 0.38; stroke: none; }
.lot__corners path { fill: none; stroke: currentColor; stroke-opacity: 0.45; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lot__boardtitle { fill: currentColor; font-family: var(--sc-font-text); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.lot__boardmeta { fill: currentColor; fill-opacity: 0.55; font-family: var(--sc-font-text); font-size: 15px; font-weight: 500; }
.lot__boardrule, .lot__divider { fill: none; stroke: currentColor; stroke-opacity: 0.16; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lot__grid path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lot__grid--minor path { stroke-opacity: 0.045; }
.lot__grid--major path { stroke-opacity: 0.11; }
.lot__ruler path { stroke: currentColor; stroke-opacity: 0.45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lot__ruler text { fill: currentColor; fill-opacity: 0.55; font-family: var(--sc-font-text); font-size: 13px; font-weight: 500; }
.lot__floor { stroke: currentColor; stroke-opacity: 0.4; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lot__plumbtick { stroke: var(--dot); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.lot__plumblabel { fill: var(--dot); font-family: var(--sc-font-text); font-size: 14px; font-weight: 600; }
.lot__body, .lot__arm {
  fill: currentColor; fill-opacity: 0.05; stroke: currentColor; stroke-width: 1.4;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.lot__arm { fill-opacity: 0.065; }
.lot__ear { fill: none; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.lot__marks { opacity: 0; fill: var(--dot); }
.lot__label { opacity: 0; }
.lot__label path { fill: none; stroke: currentColor; stroke-opacity: 0.45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lot__label circle { fill: currentColor; }
.lot__label text { fill: currentColor; font-family: var(--sc-font-text); font-size: 22px; font-weight: 560; letter-spacing: -0.005em; }

.lot__copy {
  position: absolute; z-index: 20; left: var(--content-left); top: 50%; translate: 0 -50%;
  width: min(36rem, 40vw);
}
.lot__intro { margin: 0 0 1.75rem; font-size: var(--fs-lede); font-weight: 500; color: var(--sc-ink-soft); }
.lot__stack {
  position: relative; height: 3.75em;
  font-size: var(--fs-statement);
}
.lot__list { list-style: none; margin: 0; padding: 0; }
.lot__list li, .lot__turn {
  position: absolute; left: 0; top: 0; margin: 0; max-width: 13.5ch;
  font-size: 1em; font-weight: var(--w-statement); line-height: 1.05; letter-spacing: var(--tr-statement); text-wrap: balance;
  opacity: 0; will-change: opacity, transform;
}
.lot__turn { max-width: 14ch; }
/* The region a statement belongs to, in the accent, over the statement. */
.lot__region {
  display: flex; align-items: center; gap: 0.55em; margin-bottom: 0.55em;
  font-family: var(--sc-font-text); font-size-adjust: none;
  font-size: max(0.82rem, 0.27em); font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; color: #AE1C23;
}
.lot__region::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--dot); }
.lot__line { display: block; }
/* The chart's legend: what the red points and the red line mean. */
.lot__legend {
  position: absolute; z-index: 20; left: var(--content-left); bottom: 9vh; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; padding-top: 1rem; width: min(30rem, 36vw);
  border-top: 1px solid var(--sc-hairline-strong); font-size: 0.92rem; color: var(--sc-ink);
}
.lot__key { display: inline-flex; align-items: center; gap: 0.6rem; }
.lot__key--dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px color-mix(in oklab, var(--dot) 16%, transparent); }
.lot__key--line::before { content: ""; width: 1.5px; height: 18px; background: var(--dot); }
/* The newest marks breathe, so the eye finds them on the board. */
.spine__dot.is-new::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--dot);
  animation: mark-pulse 2.2s var(--sc-ease-out) infinite;
}
@keyframes mark-pulse { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3); opacity: 0; } }

/* ------------------------------------------------------------------ peak -- */
.peak__copy {
  position: absolute; z-index: 20; left: var(--content-left); top: 50%;
  translate: 0 -50%; width: min(32rem, 40vw); color: var(--slate-ink);
}
.peak__title { margin: 0; font-size: var(--fs-display); font-weight: var(--w-display); line-height: 1; letter-spacing: var(--tr-display); text-wrap: balance; }
.peak__body { margin: 1.4rem 0 0; color: var(--slate-soft); font-size: var(--fs-lede); line-height: 1.5; max-width: 28em; }
.peak__static { display: none; }
/* A soft light behind the logo, so the slate has depth. Positioned by site.js. */
.peak__glow {
  position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 70%) var(--gy, 50%), rgb(102 128 140 / 0.42) 0%, rgb(64 84 95 / 0.2) 22%, transparent 48%);
}
/* The four sections of the spine, bracketed beside the plumb line as the logo settles. */
.peak__segments { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.peak__segments li {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; box-sizing: border-box;
  padding-left: 16px; border-left: 1px solid rgb(233 237 236 / 0.38); opacity: 0;
  color: var(--slate-soft); font-size: 0.92rem; font-weight: 500; white-space: nowrap; will-change: opacity;
}
.peak__segments li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 1px; background: rgb(233 237 236 / 0.38); }
/* The closing statement is played in by site.js with the transformation, not scrubbed. */
.peak__copy { opacity: 0; will-change: opacity, transform; }
/* Touch: while a movement plays the page holds; this also stops momentum. */
html.is-held, html.is-held body { overflow: hidden; }

/* -------------------------------------------------- shared: corner marks --
   Registration marks around a media frame, the same gesture as the chart's board. */
.marks { position: relative; --mark: color-mix(in oklab, var(--sc-ink) 42%, transparent); }
.marks::after {
  content: ""; position: absolute; inset: -12px; pointer-events: none; z-index: 3;
  background:
    linear-gradient(var(--mark), var(--mark)) 0 0 / 16px 1px, linear-gradient(var(--mark), var(--mark)) 0 0 / 1px 16px,
    linear-gradient(var(--mark), var(--mark)) 100% 0 / 16px 1px, linear-gradient(var(--mark), var(--mark)) 100% 0 / 1px 16px,
    linear-gradient(var(--mark), var(--mark)) 0 100% / 16px 1px, linear-gradient(var(--mark), var(--mark)) 0 100% / 1px 16px,
    linear-gradient(var(--mark), var(--mark)) 100% 100% / 16px 1px, linear-gradient(var(--mark), var(--mark)) 100% 100% / 1px 16px;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ ways --
   One screen: heading, the three paths and the photograph all in view at once.
   Sizes lean on vh so a short laptop still gets the whole composition. */
.ways {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 6rem);
  align-items: center; box-sizing: border-box; min-height: 100vh; min-height: 100svh;
  padding: clamp(4.5rem, 10vh, 6.5rem) var(--content-right) clamp(2rem, 6vh, 4rem) var(--content-left);
}
/* The room again, soft, behind the photograph; the text keeps its plaster. */
.ways__room {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0.6; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.1) 0%, rgb(0 0 0 / 0.18) 42%, rgb(0 0 0 / 0.9) 64%, #000 100%), linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.1) 0%, rgb(0 0 0 / 0.18) 42%, rgb(0 0 0 / 0.9) 64%, #000 100%), linear-gradient(180deg, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ways > :not(.ways__room) { position: relative; z-index: 1; }
.ways .h2 { font-size: min(var(--fs-statement), 6.4vh); }
.ways .lede { margin-top: min(1.25rem, 2vh); font-size: min(var(--fs-lede), 2.6vh); }
.ways__list { margin: min(2.5rem, 3.6vh) 0 0; }
.ways__list > div { padding: min(1.15rem, 1.7vh) 0; border-top: 1px solid var(--sc-hairline); }
.ways__list > div:last-child { border-bottom: 1px solid var(--sc-hairline); }
.ways__list dt { font-weight: 600; font-size: min(1.2rem, 2.4vh); letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.6rem; }
.ways__list dt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.ways__list dd { margin: 0.3rem 0 0; color: var(--sc-ink-soft); max-width: 38em; font-size: min(1.05rem, 2.1vh); line-height: 1.5; }
.ways__mediawrap { align-self: center; }
.ways__media { margin: 0; }
.ways__frame { position: relative; height: min(76vh, 820px); overflow: hidden; background: var(--sc-surface); }
.ways__frame img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; max-width: none; object-fit: cover; }

/* ----------------------------------------------------------------- index --
   One screen as well: the index on the left, a preview on the right. */
.index {
  /* A soft light from the upper right instead of a flat grey. */
  background:
    linear-gradient(180deg, var(--sc-canvas) 0, transparent 120px, transparent calc(100% - 120px), var(--sc-canvas) 100%),
    radial-gradient(110% 90% at 88% 8%, rgb(246 248 247 / 0.9) 0%, transparent 58%),
    linear-gradient(180deg, #E3E8E7 0%, #D8DEDD 100%); box-sizing: border-box; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(4.5rem, 9.5vh, 6.5rem) var(--content-right) clamp(1.5rem, 5vh, 3.5rem) var(--content-left);
}
.index__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.index .h2 { font-size: min(var(--fs-statement), 6.4vh); }
.index .lede { margin-top: min(1rem, 1.6vh); font-size: min(var(--fs-lede), 2.4vh); }
.index__head { margin-bottom: min(2rem, 3vh); }
/* Three groups, each named in the margin: an index, not a list. */
.index__groups { position: relative; border-bottom: 1px solid var(--sc-hairline); }
.index__group { display: grid; grid-template-columns: clamp(6rem, 8vw, 8.5rem) minmax(0, 1fr); border-top: 1px solid var(--sc-hairline-strong); }
.index__grouplabel {
  margin: 0; padding: calc(min(0.5rem, 0.8vh) + 0.3em) 1rem 0 0;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; color: var(--sc-ink-soft);
}
.index__tabs { display: flex; flex-direction: column; }
.index__tabs .index__tab:first-child { border-top: 0; }
.index__tab {
  display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; cursor: pointer;
  padding: min(0.5rem, 0.8vh) 0; min-height: min(40px, 5vh); border: 0; border-top: 1px solid var(--sc-hairline); background: none;
  font-size: min(clamp(1.08rem, 0.95rem + 0.45vw, 1.4rem), 2.6vh); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2;
  padding-left: 1.1rem; color: var(--tab-soft); transition: color 200ms var(--sc-ease-out);
}
/* Names at rest step back; the chosen one is in full ink with the red line beside it. */
.index { --tab-soft: color-mix(in oklab, var(--sc-ink) 66%, var(--sc-canvas)); }
.index__tab span { transition: transform 300ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .index__tab:hover { color: var(--sc-ink); }
  .index__tab:hover span { transform: translateX(3px); }
}
.index__tab[aria-selected="true"] { color: var(--sc-ink); }
.index__tab[aria-selected="true"] span { transform: translateX(4px); }
/* One red line travels down the list to the chosen treatment. */
.index__marker {
  position: absolute; z-index: 1; top: 0; left: var(--mx, 0); width: 2px; height: var(--mh, 0); border-radius: 2px;
  background: var(--dot); translate: 0 var(--my, 0); pointer-events: none;
  transition: translate 460ms var(--sc-ease-out), height 460ms var(--sc-ease-out);
}
.index__tab:focus-visible { outline-offset: 2px; }
.index__courses { margin: min(1.75rem, 2.6vh) 0 0; max-width: 40rem; color: var(--sc-ink-soft); font-size: min(1rem, 2vh); }
.index__courses span:first-child { color: var(--sc-ink); font-weight: 600; }
/* Short desktop windows: the lede gives way so the whole index still fits. */
@media (min-width: 861px) and (max-height: 820px) { .index .lede { display: none; } }

.index__preview { display: grid; gap: min(1.5rem, 2.4vh); }
.index__frame { position: relative; margin: 0; height: min(54vh, 600px); }
.index__imgs { position: absolute; inset: 0; overflow: hidden; background: var(--sc-canvas); }
.index__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 650ms var(--sc-ease-out);
  /* A very slow push in while a treatment is looked at; paused (not reset) as it fades out. */
  animation: index-drift 18s cubic-bezier(0.3, 0, 0.6, 1) both paused;
}
.index__frame img.is-active { opacity: 1; animation-play-state: running; }
@keyframes index-drift { from { transform: scale(1.01); } to { transform: scale(1.08); } }
/* All panels share one grid cell, so the block is as tall as the longest text and never overlaps or jumps. */
.index__panels { display: grid; }
.index__panel { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); }
.index__panel[hidden] { display: block; visibility: hidden; }
.index__panel.is-active { opacity: 1; transform: none; visibility: visible; }
.index__title { margin: 0 0 min(0.75rem, 1.2vh); font-size: min(var(--fs-title), 3vh); font-weight: 600; letter-spacing: var(--tr-title); line-height: 1.15; }
.label {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.35rem 1rem; margin: 0; max-width: 40rem;
  font-size: min(1.02rem, 2vh); line-height: 1.5;
}
.label dt { font-size: 0.85em; font-weight: 600; color: var(--sc-ink-soft); padding-top: 0.15em; }
.label dd { margin: 0; }

/* ---------------------------------------------------- section transitions --
   Grounds meet softly; the dark scene leaves like a blind lifting off the page;
   each chapter boundary leaves a small red tick as it crosses the axis. */
.index, .close { position: relative; }
.lot::before {          /* the hero photograph fades into the chart's plaster */
  content: ""; position: absolute; left: 0; right: 0; top: -14vh; height: 14vh; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sc-canvas));
}
.ways::before {         /* the shadow of the slate panel that just lifted away */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 110px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(23 32 37 / 0.2), transparent);
}
@media (min-width: 861px) {
  main > section::after {
    content: ""; position: absolute; top: 0; left: calc(var(--axis-x, 80px) - 1px); z-index: 6;
    width: 13px; height: 1.5px; background: var(--dot); pointer-events: none;
  }
}

/* -------------------------------------------------------------- colophon -- */
.colophon__stage {
  /* Stays sticky (the engine pins it); sticky is positioned, so the room image can sit inside. */
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 6rem);
  align-content: center; align-items: start; padding: 84px var(--content-right) 24px var(--content-left);   /* clear of the header */
  /* Clean plaster with window light from the upper left, as on the chart. */
  background: radial-gradient(90% 75% at 14% 8%, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 62%), var(--sc-canvas);
}
.colophon__stage > * { position: relative; z-index: 1; }
.colophon__num {
  margin: 0; display: flex; align-items: flex-start;
  font-size: clamp(9rem, 3rem + 16vw, 20rem); font-weight: 500; line-height: 0.84; letter-spacing: -0.055em;
  margin-top: -0.035em;    /* the figure's cap height starts where the team's first line does */
}
.colophon__plus { color: var(--dot); font-size: 0.42em; line-height: 1; margin: 0.08em 0 0 0.06em; }
.colophon__unit { margin: 1rem 0 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--tr-title); }
.colophon__team { margin: 0; font-size: var(--fs-lede); line-height: 1.5; max-width: 32em; }
.colophon__docs { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--sc-hairline); }
.colophon__docs-lead { margin: 0 0 0.9rem; color: var(--sc-ink-soft); }
/* The physicians as a small network: the practice, a branch, two people. */
.network { display: grid; grid-template-rows: auto 2.2rem auto; }
.network__hub { margin: 0; position: relative; padding-left: 1.1rem; font-weight: 600; font-size: 0.95rem; }
.network__hub::before {
  content: ""; position: absolute; left: -6px; top: 50%; translate: 0 -50%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--dot); box-shadow: 0 0 0 4px color-mix(in oklab, var(--dot) 18%, transparent);
}
/* The links to the physicians draw themselves as the people arrive: trunk first, then the branch.
   --sc-p is the scene's progress, published by the engine on the section. */
.network__lines { position: relative; --t1: clamp(0, calc((var(--sc-p, 1) - 0.29) / 0.08), 1); --t2: clamp(0, calc((var(--sc-p, 1) - 0.33) / 0.07), 1); --t3: clamp(0, calc((var(--sc-p, 1) - 0.37) / 0.05), 1); }
.network__lines span { position: absolute; background: color-mix(in oklab, var(--sc-ink) 35%, transparent); }
.network__trunk  { left: 0; top: 0; width: 1px; height: 100%; transform-origin: top; scale: 1 var(--t1); }
.network__branch { left: 0; top: 50%; width: 52%; height: 1px; transform-origin: left; scale: var(--t2) 1; }
.network__drop   { left: 52%; top: 50%; width: 1px; height: 50%; transform-origin: top; scale: 1 var(--t3); }
.network__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 4%; }
.network__list li { position: relative; padding: 0.6rem 0 0 1.1rem; }
.network__list li::before {
  content: ""; position: absolute; left: -4.5px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--sc-ink);
}
.colophon__docs li strong { display: block; font-weight: 600; font-size: 1.05rem; }
.colophon__docs li span { color: var(--sc-ink-soft); }
/* The closing line in the page's own voice: the serif, with the language's quotation marks. */
.colophon__quote {
  margin: 2.25rem 0 0; max-width: 24em; color: var(--sc-ink);
  font-family: var(--font-accent); font-weight: var(--w-accent); font-size-adjust: var(--accent-adjust); font-synthesis: none;
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty;
  quotes: "„" "“";
}
:lang(en) .colophon__quote { quotes: "“" "”"; }
.colophon__quote::before { content: open-quote; }
.colophon__quote::after { content: close-quote; }
/* Short desktop windows: everything in Praxis stays in one screen. */
@media (min-width: 861px) and (max-height: 820px) {
  .colophon__num { font-size: min(clamp(9rem, 3rem + 16vw, 20rem), 30vh); }
  .colophon__docs { margin-top: 1.4rem; padding-top: 1.1rem; }
  .colophon__quote { margin-top: 1.5rem; font-size: 1.2rem; }
}

/* ----------------------------------------------------------------- close --
   The arrival. The room you will walk into, wide, with the invitation set on it;
   under it what you came for, in three columns; then the way there; then the footer. */
.close {
  --sc-ink: var(--slate-ink); --sc-ink-soft: var(--slate-soft);
  --sc-hairline: color-mix(in oklab, var(--slate-ink) 16%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--slate-ink) 28%, transparent);
  --sc-accent: #D02930;
  color: var(--slate-ink); background: linear-gradient(180deg, var(--sc-canvas) 0, var(--slate) 9vh) var(--slate);
  display: grid; gap: clamp(2.75rem, 7vh, 5rem);
  padding: clamp(5rem, 11vh, 7.5rem) var(--content-right) calc(1.5rem + var(--dock-h)) var(--content-left);
}
.close ::selection { background: var(--dot-dark); }
.close .marks { --mark: color-mix(in oklab, var(--slate-ink) 45%, transparent); }

/* The last frame: bleeds to the right edge, the axis side keeps its margin. */
.close__still { position: relative; margin: 0 calc(-1 * var(--content-right)) 0 0; height: clamp(320px, 58vh, 660px); overflow: hidden; background: var(--slate-2); }
.close__still img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; object-position: 50% 62%; }
.close__still::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgb(23 32 37 / 0.94) 0%, rgb(23 32 37 / 0.62) 30%, rgb(23 32 37 / 0) 62%),
    linear-gradient(to right, rgb(23 32 37 / 0.4) 0%, rgb(23 32 37 / 0) 42%);
}
.close__title {
  position: absolute; z-index: 2; left: clamp(1.5rem, 3.2vw, 3rem); bottom: clamp(1.5rem, 4.5vh, 3rem); margin: 0; max-width: 11ch;
  font-size: var(--fs-display); font-weight: var(--w-display); line-height: 1; letter-spacing: var(--tr-display); text-wrap: balance;
}
.close__caption { position: absolute; z-index: 2; right: clamp(1.5rem, 3.2vw, 3rem); bottom: clamp(1.5rem, 4.5vh, 3rem); margin: 0; font-size: var(--fs-small); color: var(--slate-soft); }

/* What you came for: call, Gräfelfing, München. One schema, one rule above each. */
.close__info { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); }
.close__call, .close__place { margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--sc-hairline-strong); font-style: normal; }
.close__label { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.1rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em; color: var(--slate-soft); }
.close__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-dark); }
.close__phone { margin: 0; font-size: var(--fs-statement); font-weight: var(--w-display); letter-spacing: var(--tr-statement); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.close__phone a { text-decoration-thickness: 2px; text-decoration-color: var(--dot-dark); text-underline-offset: 0.16em; }
.close__lede { margin: 1.1rem 0 0; max-width: 30em; color: var(--slate-soft); font-size: var(--fs-lede); line-height: 1.5; }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: 1.75rem 0 0; }
.close__actions a:not(.cta) { color: var(--slate-ink); text-underline-offset: 0.22em; }
.close__place { transition: border-color 220ms var(--sc-ease-out); }
.close__place:hover, .close__place:focus-within { border-top-color: var(--dot-dark); }
.close__place p:not(.close__label) { margin: 0; color: var(--slate-soft); font-size: var(--fs-lede); line-height: 1.6; }
.close__street { color: var(--slate-ink); font-weight: 500; }
.close__place a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.5rem; color: var(--slate-ink); text-underline-offset: 0.22em; }

/* The way there: a drawn map, nothing embedded, nothing loaded from Google. */
.close__mapfig { margin: 0; }
.close__mapfig figcaption { margin-top: 0.85rem; font-size: 0.9rem; color: var(--slate-soft); text-align: right; }
/* A shade lighter than the slate, so it reads as a sheet: a map, not more background. */
.close__map { display: block; width: 100%; height: auto; color: var(--slate-ink); background: var(--slate-2); border-radius: 2px; }
.map__grid path { stroke: currentColor; stroke-opacity: 0.06; stroke-width: 1; vector-effect: non-scaling-stroke; }
.map__city { fill: color-mix(in oklab, var(--slate-ink) 5%, transparent); stroke: currentColor; stroke-opacity: 0.28; stroke-width: 1; vector-effect: non-scaling-stroke; }
.map__river { fill: none; stroke: #7FA3B8; stroke-opacity: 0.7; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.map__road { fill: none; stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.map__pin { fill: var(--dot-dark); }
.map__halo { fill: color-mix(in oklab, var(--dot-dark) 20%, transparent); transition: transform 220ms var(--sc-ease-out); transform-box: fill-box; transform-origin: center; }
.map__place:hover .map__halo, .map__place:focus-visible .map__halo, .map__place.is-hot .map__halo { transform: scale(1.7); }
.close__map text { font-family: var(--sc-font-text); fill: currentColor; }
.map__name { font-size: 14px; fill-opacity: 0.6; letter-spacing: 0.04em; }
.map__label { font-size: 15px; font-weight: 600; }
.map__sub { font-size: 12px; fill-opacity: 0.7; }
.map__river-name { font-size: 12px; font-style: italic; fill: #9DB8C8; }
.map__north path { fill: currentColor; fill-opacity: 0.7; }
.map__north text { font-size: 12px; font-weight: 600; fill-opacity: 0.7; }
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem;
  padding-top: 1.25rem; border-top: 1px solid var(--sc-hairline);
  font-size: 0.9rem; color: var(--slate-soft);
}
.foot p { margin: 0; }
.foot__brand { display: flex; align-items: center; gap: 1rem; }
.foot__mark { width: 12px; height: 44px; color: var(--dot-dark); flex: none; }
.foot__brand strong { color: var(--slate-ink); font-weight: 600; }
.foot__links a { color: var(--slate-ink); text-underline-offset: 0.22em; display: inline-flex; align-items: center; min-height: 44px; }
.foot__links { display: flex; gap: 1.25rem; }
.foot button { background: none; border: 0; padding: 0.25rem 0; cursor: pointer; color: var(--slate-ink); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; min-height: 44px; }

/* ----------------------------------------------------------------- sheet -- */
.sheet {
  border: 0; padding: 0; margin: 0 0 0 auto; height: 100%; max-height: none; max-width: none;
  width: min(440px, 100vw); background: var(--sc-canvas); color: var(--sc-ink);
  box-shadow: -10px 0 40px -12px hsl(var(--sc-shadow-color) / 0.35);
}
.sheet[open] { animation: sheet-in 320ms var(--sc-ease-drawer); }
.sheet::backdrop { background: color-mix(in oklab, var(--slate) 46%, transparent); }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } }
.sheet__inner { padding: 22px 28px 40px; display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.sheet__title { margin: 0; font-weight: 600; font-size: 1.05rem; }
.sheet__close { min-height: 44px; padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); background: none; cursor: pointer; font-weight: 600; }
.sheet__label { margin: 0; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em; color: var(--sc-ink-soft); }
.sheet--doc .sheet__title { font-size: 2rem; }

/* The menu: a sheet of the chart's plaster and grid; the chapters hang on the logo's curve. */
.sheet--menu {
  width: min(560px, 100vw); overflow-y: auto;
  background:
    linear-gradient(color-mix(in oklab, var(--sc-ink) 5%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, color-mix(in oklab, var(--sc-ink) 5%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--sc-canvas);
}
.sheet--menu .sheet__inner { padding: 22px clamp(24px, 4vw, 44px) 32px; }
.menu__nav { position: relative; list-style: none; margin: 0.5rem 0 0; padding: 0; }
/* The plumb line beside the vertebrae, as in the mark. */
.menu__nav::before { content: ""; position: absolute; left: 52px; top: 0.4rem; bottom: 0.4rem; width: 1px; background: var(--dot); opacity: 0.7; }
.menu__nav a {
  position: relative; display: grid; grid-template-columns: 70px 2.6rem 1fr; align-items: baseline;
  padding: 0.62rem 0; text-decoration: none; color: var(--sc-ink);
}
.menu__nav a::before {
  content: ""; position: absolute; top: 50%; left: calc(var(--x) * 1.5px);
  width: calc(var(--d) * 1px); height: calc(var(--d) * 1px); translate: -50% -50%;
  border-radius: 50%; background: var(--dot); transition: scale 220ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out);
}
.menu__no { grid-column: 2; font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); }
.menu__name {
  grid-column: 3; font-family: var(--font-accent); font-weight: var(--w-accent); font-size-adjust: var(--accent-adjust);
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.45rem); line-height: 1.1; letter-spacing: var(--tr-accent);
  transition: translate 260ms var(--sc-ease-out);
}
.menu__nav a[aria-current] .menu__no { color: #AE1C23; }
.menu__nav a[aria-current]::before { box-shadow: 0 0 0 5px color-mix(in oklab, var(--dot) 22%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .menu__nav a:hover .menu__name { translate: 6px 0; }
  .menu__nav a:hover::before { scale: 1.45; }
}
.menu__nav a:focus-visible { outline-offset: 0; }
.sheet--menu[open] .menu__nav li { animation: menu-row 520ms var(--sc-ease-out) both; animation-delay: calc(90ms + var(--i) * 40ms); }
@keyframes menu-row { from { opacity: 0; translate: 0 10px; } }

.menu__foot { margin-top: auto; padding-top: 2rem; }
.menu__call { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--sc-hairline-strong); }
.menu__phone { font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-decoration-color: var(--dot); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.menu__places { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.menu__places p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--sc-ink-soft); }
.menu__place { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; font-weight: 600; color: var(--sc-ink); }
.menu__place::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
@media (min-width: 861px) and (max-height: 820px) {
  .menu__nav a { padding: 0.36rem 0; }
  .menu__name { font-size: 2rem; }
  .menu__foot { padding-top: 1.25rem; }
  .menu__places { margin-top: 1rem; }
}
.sheet--doc .sheet__inner p { max-width: 34em; }
.sheet__note { color: var(--sc-ink-soft); font-size: 0.92rem; }

/* ------------------------------------------------------------------ dock -- */
.dock { display: none; }

/* ------------------------------------------------------- narrow desktop -- */
@media (max-width: 1100px) and (min-width: 861px) {
  .hero__copy { width: min(40rem, 60vw); }
}

/* ---------------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  html { scroll-padding-top: 64px; }
  .corner--brand { padding: 12px 16px; }
  .corner--tools { padding: 12px 12px; }
  .corner--tools .menu-btn { display: none; }
  .brand__mark { height: 40px; width: 11px; }
  .brand__sub { display: none; }
  .corner::before {
    content: ""; position: fixed; left: 0; right: 0; top: 0; height: 64px; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 55%, transparent);
    transition: opacity 240ms var(--sc-ease-out);
  }
  .corner--tools::before { display: none; }
  body.is-dark-top .corner::before { background: linear-gradient(to bottom, color-mix(in oklab, var(--slate) 92%, transparent) 55%, transparent); }
  .axis { display: none; }

  .hero .sc-stage__poster, .hero video { object-position: 50% 50%; }
  .hero__wash {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 36%,
      color-mix(in oklab, var(--sc-canvas) 40%, transparent) 56%,
      transparent 66%);
  }
  .hero__copy { left: 1.25rem; right: 1.25rem; width: auto; top: auto; bottom: calc(var(--dock-h) + 1.5rem); translate: none; }
  .hero__lede { margin-top: 1rem; }
  .hero__actions { margin-top: 1.4rem; }
  .hero__beat { left: 1.25rem; bottom: calc(var(--dock-h) + 8vh); }

  .lot__labels, .lot__divider, .lot__legend { display: none; }
  .lot__lightbox { width: 480px; }
  .lot__room { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.8) 45%, rgb(0 0 0 / 0.14) 66%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.8) 45%, rgb(0 0 0 / 0.14) 66%); }
  .lot__copy { left: 1.25rem; right: 1.25rem; top: auto; bottom: calc(var(--dock-h) + 5vh); translate: none; width: auto; }
  .lot__intro { margin-bottom: 0.9rem; font-size: 1rem; }
  .lot__list li, .lot__turn { max-width: 16ch; }

  .peak__copy { left: 1.25rem; right: 1.25rem; top: auto; bottom: calc(var(--dock-h) + 6vh); translate: none; width: auto; }

  .ways { grid-template-columns: 1fr; gap: 1.1rem; align-content: start; padding-top: 4.75rem; padding-bottom: calc(var(--dock-h) + 1.25rem); }
  .ways__mediawrap { order: -1; }
  .ways__frame { height: 24svh; }
  .ways .lede { display: none; }
  .ways__list { margin-top: 0.9rem; }
  .ways__list > div { padding: 0.7rem 0; }
  .ways__list dt { font-size: 1.05rem; }
  .ways__list dd { font-size: 0.92rem; line-height: 1.45; }
  .ways__room { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.5) 30%, rgb(0 0 0 / 0.1) 45%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.5) 30%, rgb(0 0 0 / 0.1) 45%); }
  .marks::after { inset: -8px; }
  .index__frame.marks::after, .ways__mediawrap.marks::after { display: none; }

  /* Phones: preview on top, the treatments as a row of tabs you swipe through. */
  .index { align-items: stretch; padding-top: 4.75rem; padding-bottom: calc(var(--dock-h) + 1rem); }
  .index__grid { grid-template-columns: 1fr; gap: 1rem; align-content: start; }
  .index__nav { display: contents; }
  .index__head { order: 1; margin-bottom: 0; }
  .index .lede { display: none; }
  .index__preview { order: 2; gap: 0.9rem; }
  .index__frame { height: 27svh; margin: 0 -1.25rem; }
  .index__groups {
    order: 3; position: relative; display: flex; gap: 0.5rem; overflow-x: auto; border: 0;
    margin: 0 -1.25rem; padding: 0.25rem 1.25rem 0.5rem; scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .index__groups::-webkit-scrollbar { display: none; }
  .index__group { display: flex; align-items: center; gap: 0.5rem; flex: none; border: 0; }
  .index__grouplabel { padding: 0 0.25rem 0 0.75rem; border-left: 1px solid var(--sc-hairline-strong); white-space: nowrap; font-size: 0.75rem; }
  .index__group:first-child .index__grouplabel { padding-left: 0; border-left: 0; }
  .index__tabs { flex-direction: row; gap: 0.5rem; }
  .index__tabs .index__tab:first-child { border-top: 1px solid var(--sc-hairline-strong); }
  .index__tab {
    flex: none; width: auto; min-height: 44px; padding: 0.55rem 1rem; border: 1px solid var(--sc-hairline-strong);
    border-radius: 999px; font-size: 0.95rem; white-space: nowrap; scroll-snap-align: start;
  }
  .index__marker { display: none; }
  .index__tab { color: var(--sc-ink-soft); }
  .index__tab[aria-selected="true"] span { transform: none; }
  .index__tab[aria-selected="true"] { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
  .index__title { font-size: 1.3rem; }
  .label { grid-template-columns: 1fr; gap: 0.1rem; font-size: 0.95rem; }
  .label dd + dt { margin-top: 0.5rem; }
  .index__courses { order: 4; margin-top: 0; font-size: 0.9rem; }

  .colophon__stage { grid-template-columns: 1fr; align-content: center; gap: 1.75rem; padding-top: 64px; padding-bottom: var(--dock-h); }
  .colophon__num { font-size: 6.5rem; }
  .network { grid-template-rows: auto 1.4rem auto; }
  .network__list { grid-template-columns: 1fr; row-gap: 0.6rem; }
  .network__branch, .network__drop { display: none; }
  .network__list li { padding-top: 0; }
  .network__list li::before { top: 0.45em; }
  .peak__segments li { font-size: 0.74rem; padding-left: 10px; }
  .foot__brand { align-items: flex-start; }
  .colophon__team { font-size: 1.05rem; }
  .colophon__docs { margin-top: 1.25rem; padding-top: 1rem; }
  .colophon__docs li strong { font-size: 1rem; }
  .colophon__docs li span { font-size: 0.92rem; }
  .colophon__quote { margin-top: 1.25rem; font-size: 0.98rem; }

  .close { gap: 2.25rem; padding-top: 4.5rem; }
  .close__still { margin: 0 -1.25rem; height: 46svh; }
  .close__title { max-width: 9ch; }
  .close__caption { display: none; }
  .close__info { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .close__call { grid-column: 1 / -1; }
  .close__phone { font-size: 2.05rem; }
  .close__place p:not(.close__label) { font-size: 0.98rem; }
  .close__mapfig figcaption { text-align: left; }
  .map__name { font-size: 19px; } .map__label { font-size: 20px; } .map__sub { font-size: 16px; transform: translateY(6px); } .map__river-name { font-size: 16px; }
  .foot { flex-direction: column; }

  .sheet { width: 100vw; height: auto; max-height: 92svh; margin: auto 0 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px -12px hsl(var(--sc-shadow-color) / 0.35); }
  .sheet[open] { animation-name: sheet-up; }
  .sheet__inner { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .sheet--menu { height: 100%; max-height: none; margin: 0; border-radius: 0; }
  .sheet--menu[open] { animation-name: sheet-in; }
  .menu__nav a { padding: 0.45rem 0; grid-template-columns: 64px 2.3rem 1fr; }
  .menu__name { font-size: 1.85rem; }
  .menu__call .cta { flex: 1 1 100%; justify-content: center; }
  @keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }

  .dock {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--sc-z-chrome);
    height: var(--dock-h); padding: 0 12px env(safe-area-inset-bottom);
    background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
    border-top: 1px solid var(--sc-hairline);
    transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out);
  }
  body.is-dark-bottom .dock { background: color-mix(in oklab, var(--slate) 94%, transparent); color: var(--slate-ink); border-top-color: color-mix(in oklab, var(--slate-ink) 14%, transparent); }
  .dock__menu { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); background: none; font-weight: 600; cursor: pointer; color: inherit; }
  body.is-dark-bottom .dock__menu { border-color: color-mix(in oklab, var(--slate-ink) 30%, transparent); }
  .dock__track { flex: 1; align-self: stretch; }
  .dock__call { min-height: 44px; display: inline-flex; align-items: center; padding: 0.5rem 1.1rem; border-radius: 999px; background: var(--sc-accent); color: #fff; font-weight: 600; text-decoration: none; }
  /* Behind the complaint lines while scattered, above the dock once it lies down in it. */
  body.is-docked .spine { z-index: 61; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .network__lines span { scale: 1; }
  .index__frame img { animation: none; }
  .index__marker { transition: none; }
  .sheet[open], .sheet--menu[open] .menu__nav li { animation: none; }
  .hero__light { transform: none; opacity: 0.6; }
  .hero__title, .hero__lede, .hero__actions { animation: none; }
  .close__still img { top: 0; height: 100%; }
  .hero__beat { display: none; }
  .lot__marks { opacity: 1; }
  .spine__dot.is-new::after { animation: none; display: none; }
  .lot__stack { height: auto; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); }
  .lot__list li, .lot__turn { position: static; opacity: 1; transform: none !important; max-width: 30ch; margin-bottom: 0.45em; }
  .lot__turn { margin-top: 1em; font-weight: 600; }
  .lot__shade, .lot__figure, .lot__copy, .peak__copy, .peak__static { transition: opacity 360ms linear; }
  .peak__static {
    display: block; position: absolute; z-index: 10; color: var(--dot-dark); opacity: 0;
    height: 70vh; width: auto; right: 18vw; top: 15vh;
  }
  .ways__frame img { top: 0; height: 100%; }
  .index__frame img { transition: opacity 200ms linear; transform: none; }
  .index__panel { transition: opacity 160ms linear; transform: none; }
  @media (max-width: 860px) { .peak__static { height: 40vh; top: 9vh; right: auto; left: 50%; translate: -50% 0; } }
}

/* ------------------------------------------------------ compact phones --
   The colophon and the peak are pinned, so their content must fit 100svh. */
@media (max-width: 860px) and (max-height: 760px) {
  .menu__nav a { padding: 0.28rem 0; }
  .menu__name { font-size: 1.6rem; }
  .menu__foot { padding-top: 1rem; }
  .menu__places { margin-top: 1rem; }
  .colophon__stage { gap: 0.9rem; }
  .colophon__num { font-size: 4.4rem; }
  .colophon__unit { margin-top: 0.4rem; font-size: 1.05rem; }
  .colophon__team { font-size: 0.95rem; line-height: 1.45; }
  .colophon__docs { margin-top: 0.8rem; padding-top: 0.8rem; }
  .colophon__docs-lead { font-size: 0.9rem; margin-bottom: 0.5rem; }
  .colophon__docs ul { gap: 0.5rem; }
  .colophon__quote { display: none; }
  :root { --fs-display: 2.05rem; --fs-lede: 0.98rem; }
  .peak__body { margin-top: 0.9rem; }
}

/* ---------------------------------------------------------- accent serif --
   Last in the file so it wins over each element's own weight and tracking. */
/* The voice of the page: statements, titles, the reader's complaints, the invitation.
   font-size-adjust brings the serif's small x-height up to Figtree's, so sizes keep their tokens. */
.hero__title, .hero__beat, .peak__title, .h2, .close__title, .sheet__title, .lot__list li, .lot__turn {
  font-family: var(--font-accent); font-weight: var(--w-accent); letter-spacing: var(--tr-accent);
  font-size-adjust: var(--accent-adjust); font-synthesis: none; line-height: 1.06;
}