/* ============================================================
   COUPLES AMSTERDAM — theme "couples"
   Cinematic full-height panels, one idea per viewport, type laid
   over the field, chrome nearly invisible until scrolled.

   The identity is a PAIR. Every surface belongs to one of two
   grounds cut from the same block and fired at different
   temperatures:

     GROUND A · CLAY  #26130F   warm, rose-earth, lamp-lit
     GROUND B · TEAL  #092528   cool, deep water, window-lit

   Where the two meet there is a SEAM — a hairline of the one
   accent both halves share, copper-rose #D98C6B.

   Type is a pair as well, and the two faces trade places when
   the ground changes:
     FRAUNCES      display serif on clay · italic labels on teal
     SPACE GROTESK labels on clay       · display sans on teal

   BUILD CONTRACT — the FIRST :root block below, and only that
   block, is substituted per site from sites/<id>.json
   (theme.palette / theme.fonts / theme.max / theme.reading).
   The second :root is derived and must NOT be substituted.
   Fonts arrive from the Google Fonts <link> in partials/head.mustache,
   so there is no @font-face run in this file.
   ============================================================ */

:root {
  /* ── GROUND A · CLAY ── */
  --clay-0: #180B09;
  --clay-1: #26130F;
  --clay-2: #361D17;
  --clay-3: #472720;
  --clay-4: #5A3329;

  /* ── GROUND B · TEAL ── */
  --teal-0: #051719;
  --teal-1: #092528;
  --teal-2: #0E3438;
  --teal-3: #14444A;
  --teal-4: #1B575E;

  /* the shared accent — the seam colour, legible on both halves */
  --acc: #D98C6B;
  --acc-lo: #B06848;
  --acc-hi: #F0BEA2;

  /* foreground + hairlines */
  --fg: #F4E7E0;
  --fg-2: #B69A90;
  --fg-3: rgba(255,255,255,0.68);
  --line: rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.17);

  /* shared-template tokens — the pages this theme inherits
     (prices, faq, about, contact, booking, guides, districts,
     legal, 404) write these into inline styles, so they have to
     exist here and mean something on a dark ground. */
  --ink: #F4E7E0;
  --muted: #B69A90;
  --cloud: #180B09;
  --sky-1: #2E1813;
  --sky-2: #26130F;
  --sky-3: #26130F;
  --rule: rgba(255,255,255,0.12);
  --faint: rgba(255,255,255,0.44);
  --gold: #D98C6B;
  --white: #fff;
  --white-rgb: 255,255,255;
  --header-bg: rgba(38,19,15,0.9);
  --wa: #25D366;
  --wa-dark: #1ea857;

  --serif: 'Fraunces', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --sans: 'Space Grotesk', 'DIN Alternate', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --max: 1220px;
  --reading: 680px;
}

/* === Tokens: derived + structural — NOT site-configurable === */
:root {
  --acc-grad: linear-gradient(135deg, var(--acc-lo), var(--acc), var(--acc-hi));

  /* the ground tokens every surface reads from. a section swaps
     these with .g-clay / .g-teal and its whole interior follows. */
  --ground: var(--clay-1);
  --recess: var(--clay-0);
  --raise: var(--clay-2);
  --raise-2: var(--clay-3);
  --raise-3: var(--clay-4);
  --wash: 38,19,15;          /* rgb of the ground, for the ND filters */

  --scrim-8: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.2), transparent);
  --scrim-9: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.4), transparent);
  --glow: radial-gradient(70% 50% at 50% 30%, rgba(217,140,107,.07), transparent 70%);
  --seam-h: linear-gradient(90deg, rgba(217,140,107,0) 0%, rgba(217,140,107,.5) 16%, rgba(240,190,162,.95) 50%, rgba(217,140,107,.5) 84%, rgba(217,140,107,0) 100%);
  --seam-v: linear-gradient(180deg, rgba(217,140,107,0) 0%, rgba(217,140,107,.5) 16%, rgba(240,190,162,.9) 50%, rgba(217,140,107,.5) 84%, rgba(217,140,107,0) 100%);

  --white-12: rgba(var(--white-rgb, 255,255,255), 0.12);
  --white-50: rgba(var(--white-rgb, 255,255,255), 0.5);
  --white-85: rgba(var(--white-rgb, 255,255,255), 0.85);

  --ease: cubic-bezier(.22,.61,.36,1);
  --gut: clamp(20px, 5.2vw, 72px);
  --bar: 60px;
}

/* the two grounds. anything carrying one of these repaints itself
   and everything inside it, including the ND wash and the plates. */
.g-clay {
  --ground: var(--clay-1); --recess: var(--clay-0); --raise: var(--clay-2);
  --raise-2: var(--clay-3); --raise-3: var(--clay-4); --wash: 38,19,15;
}
.g-teal {
  --ground: var(--teal-1); --recess: var(--teal-0); --raise: var(--teal-2);
  --raise-2: var(--teal-3); --raise-3: var(--teal-4); --wash: 9,37,40;
}
.g-seam {
  --ground: var(--clay-1); --recess: var(--clay-0); --raise: var(--clay-2);
  --raise-2: var(--clay-3); --raise-3: var(--clay-4); --wash: 24,17,16;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  background: var(--clay-1);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.64;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
/* markers are left alone globally: the shared templates this theme inherits
   set list-style/padding inline per list, and killing them here would strip
   the bullets off the legal and rate-note lists. */
.ledger, .foot ul, .journal-list { list-style: none; }
p { margin: 0 0 1.2em; }
em { font-style: italic; }
::selection { background: rgba(217,140,107,.3); color: #F4E7E0; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
[hidden] { display: none !important; }

/* every anchor target clears the fixed bar */
[id] { scroll-margin-top: calc(var(--bar) + 22px); }

/* keyboard focus is always visible, on either ground */
:focus-visible { outline: 2px solid var(--acc-hi); outline-offset: 3px; }
.btn:focus-visible, .tlink:focus-visible, .sheet__l:focus-visible { outline: 2px solid var(--acc-hi); outline-offset: 4px; }
summary:focus-visible { outline: 2px solid var(--acc-hi); outline-offset: -3px; }
.rail:focus-visible { outline: 2px solid var(--acc-hi); outline-offset: 6px; }

h1, h2, h3, h4, .pf {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 42, "WONK" 1;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--fg);
}
h1 { font-size: clamp(34px, 5.4vw, 60px); }
h2 { font-size: clamp(26px, 3.6vw, 42px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }
h4 { font-size: 19px; }

/* inside the theme's own pages the display type runs at panel scale */
main h1 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.06; }
main h2 { font-size: clamp(23px, 3vw, 32px); line-height: 1.18; }
main h3 { font-size: 16.5px; line-height: 1.3; }
main p { margin: 0; }

/* — the mirror — on the cool ground the sans takes the display role
   and the serif drops to the labels, italic. — */
.g-teal h1, .g-teal h2, .g-teal h3, .g-teal .pf {
  font-family: var(--sans);
  font-variation-settings: normal;
  font-weight: 500;
  letter-spacing: -.028em;
}
main .g-teal h1 { font-size: clamp(29px, 4.4vw, 48px); line-height: 1.04; }
main .g-teal h2 { font-size: clamp(22px, 2.85vw, 31px); line-height: 1.14; }
main .g-teal h3 { font-size: 16px; letter-spacing: -.02em; }
/* structural bolds follow the ground's lead face … */
.g-teal .rung__t b, .g-teal .ledger__h b, .g-teal .trust b, .g-teal .stat__k b {
  font-family: var(--sans); font-weight: 500; letter-spacing: -.026em;
  font-variation-settings: normal;
}
/* … while the whispered labels stay with the other one, which is
   what keeps both faces present on both grounds */
.g-teal .wire__who {
  font: italic 500 12px/1 var(--serif);
  letter-spacing: .08em; text-transform: none;
}

.lead { color: var(--fg); font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.72; max-width: 54ch; }
.dim { color: var(--fg-2); }
.small { font-size: 13px; line-height: 1.62; color: var(--fg-2); }

.micro {
  font: 500 10px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--acc);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.g-teal .micro {
  font: italic 500 12.5px/1 var(--serif);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  letter-spacing: .16em;
  text-transform: none;
}
.micro::after {
  content: "";
  height: 1px;
  flex: 0 0 auto;
  width: clamp(26px, 5vw, 58px);
  background: linear-gradient(90deg, rgba(217,140,107,.68), rgba(217,140,107,0));
}
.micro em { font-style: normal; color: rgba(255,255,255,.34); }
.g-teal .micro em { font-style: italic; }

.caps {
  font: 500 10px/1.5 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 24px; border-radius: 2px;
  border: 1px solid transparent;
  transition: transform .5s var(--ease), opacity .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
}
.btn--acc, .btn-primary {
  background: var(--acc-grad);
  color: #1E0C06;
  border-color: transparent;
}
.btn--acc:hover, .btn-primary:hover { transform: translateY(-1px); }
.btn--ghost, .btn-ghost {
  border-color: var(--line-2);
  color: var(--fg);
  background: transparent;
}
.btn--ghost:hover, .btn-ghost:hover { border-color: rgba(240,190,162,.55); background: transparent; color: var(--fg); }
.btn--sm { padding: 11px 17px; font-size: 10px; letter-spacing: .15em; }

.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg); padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.24);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.tlink:hover { border-color: var(--acc); color: #F0BEA2; }

/* ============================================================
   SHARED-TEMPLATE COMPATIBILITY LAYER
   Every page this theme does not override (prices, faq, about,
   contact, booking, guides, districts, hubs, journal, combos,
   nationalities, legal, 404 and the three index pages) renders
   the shared markup against THIS stylesheet. These rules carry
   that markup onto the clay ground.
   ============================================================ */
.container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 5.2vw, 44px); }
.reading { max-width: var(--reading); margin: 0 auto; }
section { padding: 84px 0; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.label { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--acc); font-weight: 500; }
.subtitle { font-size: 14px; color: var(--fg-2); letter-spacing: .08em; }
.lede { color: var(--fg-3); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.72; }
/* running prose on an inherited page. Element-level, so every classed block in
   the theme's own panels keeps the colour it sets for itself. */
section p, section li { color: var(--fg-3); }
section li { margin-bottom: 8px; }
section li::marker { color: var(--acc); }
section p strong, section p b { color: var(--fg); }

/* the shared hero — a seam panel with the type centred on it */
.hero {
  position: relative;
  min-height: 460px;
  padding: calc(var(--bar) + 96px) clamp(20px, 5.2vw, 44px) 64px;
  background: linear-gradient(158deg, var(--clay-1) 0%, var(--clay-0) 44%, var(--teal-0) 56%, var(--teal-1) 100%);
  overflow: hidden;
  text-align: center;
}
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--seam-h); pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--glow);
}
.hero > * { position: relative; z-index: 1; }
.hero .label-top { margin-bottom: 22px; }
.hero .lede { max-width: 640px; margin: 22px auto 0; }
.hero-small { min-height: 300px; padding-top: calc(var(--bar) + 72px); padding-bottom: 44px; }

/* therapist / service grids used by the inherited index pages */
.t-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.t-card { display: block; position: relative; }
.t-card .photo { aspect-ratio: 3/4; background: var(--raise); overflow: hidden; border: 1px solid rgba(255,255,255,.07); }
.t-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.t-card:hover .photo img { transform: scale(1.04); }
.t-card:hover .photo { border-color: rgba(217,140,107,.4); }
.t-card .name { font-family: var(--serif); font-size: 20px; color: var(--fg); margin-top: 13px; }
.t-card .meta { font: 500 9.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); margin-top: 4px; }

.s-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.s-card { border-top: 1px solid var(--line-2); padding-top: 18px; display: block; }
.s-card .num { font: 500 9.5px/1 var(--sans); letter-spacing: .26em; color: var(--acc); }
.s-card .nm { font-family: var(--serif); font-size: 22px; color: var(--fg); margin: 8px 0 10px; }
.s-card .ds { font-size: 13.5px; line-height: 1.6; color: var(--fg-2); }
a.s-card:hover .nm { color: var(--acc-hi); }

.profile-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 280px); gap: 40px; align-items: start; }
.hero-photo { aspect-ratio: 3/4; background: var(--raise); overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.stats-table, .rates-table, .price-table { width: 100%; border-collapse: collapse; }
.stats-table td, .rates-table td, .price-table td { padding: 13px 0; border-bottom: 1px solid var(--line); }
.stats-table td:first-child, .rates-table td:first-child, .price-table td:first-child {
  color: var(--fg-2); font: 500 9.5px/1.6 var(--sans); letter-spacing: .17em; text-transform: uppercase;
}
.stats-table td:last-child, .rates-table td:last-child, .price-table td:last-child {
  text-align: right; color: var(--fg); font-family: var(--serif); font-size: 17px;
}
.price-table td:last-child, .rates-table td:last-child {
  color: var(--acc); font-size: 19px;
  background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stats-table tr:last-child td, .rates-table tr:last-child td { border-bottom: none; }

.service-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.service-tags .tag {
  display: inline-block; font: 500 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 13px; border: 1px solid var(--line-2); color: var(--fg-2); border-radius: 2px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
a.tag:hover { border-color: rgba(217,140,107,.6); color: var(--fg); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gallery-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 1px solid rgba(255,255,255,.06); }

.carousel { position: relative; overflow: hidden; background: var(--raise); }
.carousel-track { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 calc(25% - 5px); scroll-snap-align: start; aspect-ratio: 3/4; background: var(--raise); overflow: hidden; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-prev, .carousel-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(24,11,9,.82); color: var(--fg); border: 1px solid var(--line-2);
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.carousel-prev { left: 12px; } .carousel-next { right: 12px; }
.carousel-prev:hover, .carousel-next:hover { border-color: var(--acc); color: var(--acc-hi); }
.carousel-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; pointer-events: none; }
.carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); }
.carousel-dot.active { background: var(--acc); transform: scale(1.4); }

.tabs { max-width: 880px; margin: 0 auto; }
.tab-nav { display: flex; justify-content: center; border-bottom: 1px solid var(--line); margin-bottom: 34px; flex-wrap: wrap; }
.tab-btn {
  padding: 15px 24px; font: 500 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-2); border-bottom: 1px solid transparent; margin-bottom: -1px;
}
.tab-btn:hover { color: var(--fg); }
.tab-btn.active { color: var(--acc); border-bottom-color: var(--acc); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.book-banner { background: linear-gradient(96deg, var(--clay-2) 0%, var(--clay-1) 46%, var(--teal-2) 100%); padding: 34px 0; position: relative; }
.book-banner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--seam-h); }

.like-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.like-card { display: block; }
.like-photo { aspect-ratio: 3/4; background: var(--raise); overflow: hidden; border: 1px solid rgba(255,255,255,.07); }
.like-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.like-card:hover .like-photo img { transform: scale(1.05); }
.like-name { margin-top: 11px; font-family: var(--serif); font-size: 17px; color: var(--fg); }
.like-meta { font: 500 9px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); margin-top: 2px; }

.journal-list { display: grid; gap: 28px; }
.journal-item { border-top: 1px solid var(--line); padding-top: 22px; display: block; }
.journal-item .date { font: 500 9.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }
.journal-item h3 { margin: 10px 0; }
.journal-item .lede { font-size: 14.5px; color: var(--fg-2); }
a.journal-item:hover h3 { color: var(--acc-hi); }

.form-row { margin-top: 20px; }
.form-row label { display: block; font: 500 9.5px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }
.form-row select, .form-row input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line-2);
  background: var(--raise); font: inherit; color: var(--fg); border-radius: 2px; margin-top: 8px;
}
.form-row select option { background: var(--clay-1); color: var(--fg); }

.no-save, .no-save img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.no-save img { -webkit-user-drag: none; }

/* the shared header/footer classes are not emitted by this theme —
   partials/header.mustache and partials/footer.mustache replace them —
   but the age bar hook in app.js is kept harmless either way. */
.age-bar { display: none !important; }

/* ============================================================
   THE SEAM — where one ground meets the other.
   ============================================================ */
.seam {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  z-index: 7; pointer-events: none;
  background: var(--seam-h);
}
.seam::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(60px, 9vh, 110px);
  background: radial-gradient(58% 100% at 50% 0%, rgba(217,140,107,.13), transparent 72%);
}
.seam--v {
  left: 50%; right: auto; top: 0; bottom: 0; height: auto; width: 1px;
  background: var(--seam-v);
}
.seam--v::after {
  left: -70px; right: -70px; top: 0; bottom: 0; height: auto;
  background: radial-gradient(50% 42% at 50% 50%, rgba(217,140,107,.1), transparent 74%);
}

/* ============================================================
   FIELDS — the art-directed grounds a panel's type is laid over,
   and the frames that hold an actual photograph.
   ============================================================ */
.field { position: absolute; inset: 0; overflow: hidden; background: var(--ground); isolation: isolate; }
.field > span,
.field > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }

.field > .field__base {
  position: absolute; top: -3.5%; left: -3.5%; right: auto; bottom: auto; width: 107%; height: 107%;
  transform: scale(1); transform-origin: 52% 44%;
  transition: transform 18s linear;
}
.field__base::before,
.field__base::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.field__arch { opacity: .9; mix-blend-mode: screen; }
.field__fig { mix-blend-mode: screen; opacity: .92; }
.field__rim { mix-blend-mode: screen; }
.field__vig { background: radial-gradient(122% 92% at 50% 40%, rgba(0,0,0,0) 32%, rgba(0,0,0,.5) 76%, rgba(0,0,0,.9) 100%); }
.field__grain { opacity: .36; mix-blend-mode: overlay; }
.field__grain--fine { opacity: .3; }
.field__scrim { background: var(--scrim-8); }
.field__scrim--deep { background: var(--scrim-9); }

/* a photographic slot: the frame holds a real image and the same
   grade (rim, vignette, grain, scrim) is laid over it. */
.field > .field__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transition: transform .8s var(--ease);
}

/* ── THE PAIR PLATE ──────────────────────────────────────────
   Two grounds in a single frame. Clay holds the left of the
   image, teal the right, and the seam runs down the middle of
   the plate before it ever runs down the page. */
.f-pair .field__base {
  background:
    radial-gradient(36% 32% at 19% 31%, rgba(255,214,190,.22), rgba(217,140,107,.05) 50%, transparent 74%),
    radial-gradient(34% 30% at 81% 40%, rgba(150,222,226,.14), transparent 72%),
    linear-gradient(90deg,#180B09 0%,#26130F 19%,#3D221B 41%,#123033 59%,#092528 81%,#051719 100%),
    var(--clay-1);
}
.f-pair .field__base::before {
  background: linear-gradient(90deg,
    transparent 45.5%,
    rgba(240,190,162,.09) 48%,
    rgba(255,228,208,.36) 50%,
    rgba(240,190,162,.09) 52%,
    transparent 54.5%);
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, rgba(0,0,0,.95) 17%, rgba(0,0,0,.82) 74%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent 2%, rgba(0,0,0,.95) 17%, rgba(0,0,0,.82) 74%, transparent 98%);
}
.f-pair .field__base::after {
  background:
    radial-gradient(22% 15% at 21% 25%, rgba(255,226,198,.24), transparent 72%),
    radial-gradient(19% 13% at 80% 33%, rgba(176,238,238,.17), transparent 72%),
    radial-gradient(17% 4% at 50% 95%, rgba(240,190,162,.15), transparent 76%);
}
.f-pair .field__arch {
  background:
    linear-gradient(90deg,transparent 0 27%, rgba(255,226,206,.04) 27% 27.35%, transparent 27.35% 100%),
    linear-gradient(90deg,transparent 0 73%, rgba(196,238,240,.035) 73% 73.3%, transparent 73.3% 100%),
    linear-gradient(180deg,transparent 0 8%, rgba(240,190,162,.06) 30%, transparent 62%);
}
.f-pair .field__rim {
  background:
    linear-gradient(96deg,transparent 12%, rgba(255,214,190,.15) 30%, transparent 44%),
    linear-gradient(262deg,transparent 14%, rgba(198,238,240,.11) 32%, transparent 46%);
}

/* ── THE SECOND PAIR PLATE — closer focal length ───────────── */
.f-two .field__base {
  background:
    radial-gradient(40% 38% at 26% 34%, rgba(255,216,194,.2), transparent 72%),
    radial-gradient(32% 30% at 84% 46%, rgba(150,222,226,.13), transparent 72%),
    linear-gradient(97deg,#180B09 0%,#2C1712 22%,#43271F 44%,#14383C 62%,#092528 84%,#051719 100%),
    var(--clay-1);
}
.f-two .field__base::before {
  background: linear-gradient(97deg,
    transparent 51%,
    rgba(240,190,162,.1) 53.5%,
    rgba(255,228,208,.3) 55.5%,
    rgba(240,190,162,.1) 57.5%,
    transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.92) 22%, rgba(0,0,0,.72) 70%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.92) 22%, rgba(0,0,0,.72) 70%, transparent 96%);
}
.f-two .field__base::after {
  background:
    radial-gradient(15% 11% at 28% 26%, rgba(255,228,200,.24), transparent 72%),
    radial-gradient(13% 10% at 83% 41%, rgba(180,240,240,.17), transparent 72%);
}
.f-two .field__rim {
  background:
    linear-gradient(112deg,transparent 18%, rgba(255,216,194,.14) 36%, transparent 50%),
    linear-gradient(250deg,transparent 20%, rgba(198,238,240,.1) 36%, transparent 50%);
}

/* ── COOL · corridor, lamps receding ─────────────────────── */
.f-corridor .field__base {
  background:
    radial-gradient(34% 30% at 64% 40%, rgba(168,226,228,.15), transparent 68%),
    radial-gradient(18% 16% at 40% 46%, rgba(120,190,196,.1), transparent 74%),
    linear-gradient(97deg,#051719 0%,#092528 26%,#0E3438 46%,#14444A 58%,#062023 78%,#051719 100%),
    var(--teal-1);
}
.f-corridor .field__base::before {
  background: linear-gradient(90deg,
    transparent 43%,
    rgba(186,232,234,.13) 46%,
    rgba(214,246,246,.32) 49.5%,
    rgba(186,232,234,.12) 53%,
    transparent 56.5%);
  -webkit-mask-image: linear-gradient(180deg, transparent 24%, rgba(0,0,0,.95) 40%, rgba(0,0,0,.85) 62%, transparent 80%);
  mask-image: linear-gradient(180deg, transparent 24%, rgba(0,0,0,.95) 40%, rgba(0,0,0,.85) 62%, transparent 80%);
}
.f-corridor .field__base::after {
  background:
    radial-gradient(9% 3.4% at 26% 19%, rgba(222,248,248,.32), transparent 72%),
    radial-gradient(6.5% 2.6% at 38% 24%, rgba(222,248,248,.25), transparent 72%),
    radial-gradient(4.5% 1.8% at 45.5% 27.5%, rgba(222,248,248,.19), transparent 74%),
    radial-gradient(22% 7% at 26% 88%, rgba(217,140,107,.1), transparent 74%);
}
.f-corridor .field__arch {
  background:
    repeating-linear-gradient(90deg, transparent 0 132px, rgba(214,246,246,.04) 132px 133px, transparent 133px 268px),
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 26%, transparent 72%, rgba(0,0,0,.76) 100%);
}
.f-corridor .field__rim {
  background: linear-gradient(255deg,transparent 58%, rgba(150,220,224,.11) 76%, rgba(244,231,224,.12) 85%, transparent 94%);
}

/* ── WARM · the room, low lamp, bed plane ─────────────────── */
.f-room .field__base {
  background:
    radial-gradient(38% 30% at 21% 27%, rgba(255,214,190,.23), transparent 70%),
    radial-gradient(60% 40% at 62% 84%, rgba(255,240,232,.045), transparent 72%),
    linear-gradient(172deg,#180B09 0%,#26130F 38%,#3A201A 60%,#523024 74%,#1C0E0B 100%),
    var(--clay-1);
}
.f-room .field__base::before {
  background: linear-gradient(90deg,
    rgba(176,222,226,.05) 0%,
    rgba(176,222,226,.24) 4%,
    rgba(176,222,226,.18) 12%,
    rgba(130,186,192,.05) 17%,
    transparent 22%);
  -webkit-mask-image: linear-gradient(180deg, transparent 1%, rgba(0,0,0,.92) 13%, rgba(0,0,0,.5) 56%, transparent 78%);
  mask-image: linear-gradient(180deg, transparent 1%, rgba(0,0,0,.92) 13%, rgba(0,0,0,.5) 56%, transparent 78%);
}
.f-room .field__base::after {
  background:
    radial-gradient(13% 9% at 24% 24%, rgba(255,222,196,.31), transparent 70%),
    radial-gradient(46% 16% at 54% 92%, rgba(244,231,224,.055), transparent 74%);
}
.f-room .field__arch { background: linear-gradient(6deg, rgba(255,226,206,.05) 0 26%, transparent 27% 100%); }
.f-room .field__rim { background: linear-gradient(96deg,rgba(255,214,190,.16) 0%, rgba(244,231,224,.08) 9%, transparent 26%); }

/* ── WARM · oil, close skin ──────────────────────────────── */
.f-oil .field__base {
  background:
    radial-gradient(46% 52% at 66% 36%, rgba(255,206,182,.19), transparent 66%),
    radial-gradient(40% 44% at 22% 78%, rgba(176,104,72,.16), transparent 70%),
    linear-gradient(136deg,#180B09 0%,#2E1813 40%,#4B2A22 58%,#26130F 76%,#180B09 100%),
    var(--clay-1);
}
.f-oil .field__base::before {
  background: linear-gradient(118deg,
    transparent 38%,
    rgba(255,224,202,.1) 46%,
    rgba(255,230,210,.26) 54%,
    rgba(240,190,162,.06) 62%,
    transparent 70%);
  -webkit-mask-image: radial-gradient(62% 70% at 62% 42%, rgba(0,0,0,.95), transparent 76%);
  mask-image: radial-gradient(62% 70% at 62% 42%, rgba(0,0,0,.95), transparent 76%);
}
.f-oil .field__base::after { background: radial-gradient(9% 7% at 78% 20%, rgba(255,222,196,.2), transparent 74%); }
.f-oil .field__rim { background: linear-gradient(126deg,transparent 44%, rgba(244,231,224,.11) 66%, rgba(240,190,162,.09) 74%, transparent 88%); }

/* ── WARM · roster backdrop, empty and low ───────────────── */
.f-roster .field__base {
  background:
    radial-gradient(56% 40% at 50% 12%, rgba(217,140,107,.12), transparent 68%),
    linear-gradient(180deg,#180B09 0%,#2A1611 44%,#1E0F0C 72%,#180B09 100%),
    var(--clay-1);
}
.f-roster .field__base::before { background: radial-gradient(42% 20% at 50% -2%, rgba(255,214,190,.17), transparent 74%); }
.f-roster .field__base::after { background: linear-gradient(90deg, transparent 74%, rgba(168,226,228,.06) 90%, transparent 100%); }

/* ── COOL · night city, water ────────────────────────────── */
.f-night .field__base {
  background:
    radial-gradient(40% 26% at 28% 76%, rgba(120,196,204,.14), transparent 72%),
    radial-gradient(24% 20% at 72% 30%, rgba(240,190,162,.1), transparent 74%),
    linear-gradient(180deg,#051719 0%,#092528 42%,#0E3438 62%,#051719 100%),
    var(--teal-1);
}
.f-night .field__base::before { background: linear-gradient(180deg, transparent 62%, rgba(160,224,230,.14) 67%, rgba(160,224,230,.04) 71%, transparent 76%); }
.f-night .field__base::after {
  background:
    radial-gradient(2.4% 1.6% at 69% 38%, rgba(255,222,190,.42), transparent 70%),
    radial-gradient(2% 1.4% at 76% 44%, rgba(255,222,190,.3), transparent 70%),
    radial-gradient(1.8% 1.2% at 62% 47%, rgba(255,222,190,.26), transparent 70%),
    radial-gradient(26% 6% at 30% 80%, rgba(217,140,107,.13), transparent 74%);
}
.f-night .field__arch {
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(150,210,216,.045) 46px 47px, transparent 47px 96px),
    repeating-linear-gradient(0deg, transparent 0 60px, rgba(150,210,216,.035) 60px 61px, transparent 61px 132px);
  -webkit-mask-image: linear-gradient(180deg,transparent 32%, rgba(0,0,0,.9) 70%, transparent 96%);
  mask-image: linear-gradient(180deg,transparent 32%, rgba(0,0,0,.9) 70%, transparent 96%);
}

/* ── COOL · deep water, the price ladder ─────────────────── */
.f-velvet .field__base {
  background:
    radial-gradient(52% 38% at 50% 8%, rgba(150,220,226,.12), transparent 70%),
    linear-gradient(180deg,#051719 0%,#0A2B2E 40%,#11393E 58%,#051719 100%),
    var(--teal-1);
}
.f-velvet .field__base::before { background: radial-gradient(34% 18% at 50% 2%, rgba(212,246,246,.19), transparent 74%); }
.f-velvet .field__base::after {
  background: linear-gradient(96deg, transparent 4%, rgba(240,190,162,.07) 22%, transparent 46%);
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.9) 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.9) 70%, transparent 100%);
}
.f-velvet .field__rim { background: linear-gradient(180deg, rgba(150,220,226,.1) 0%, transparent 14%); }

/* ── COOL · the ring, from the water ─────────────────────── */
.f-map .field__base {
  background:
    radial-gradient(46% 34% at 50% 110%, rgba(140,214,222,.14), transparent 66%),
    linear-gradient(180deg,#051719 0%,#082224 46%,#0E3438 68%,#051719 100%),
    var(--teal-1);
}
.f-map .field__base::before {
  background: linear-gradient(180deg, transparent 48%, rgba(170,230,234,.12) 58%, rgba(140,214,222,.03) 64%, transparent 72%);
  -webkit-mask-image: radial-gradient(62% 70% at 50% 96%, rgba(0,0,0,.95), transparent 78%);
  mask-image: radial-gradient(62% 70% at 50% 96%, rgba(0,0,0,.95), transparent 78%);
}
.f-map .field__base::after {
  background:
    radial-gradient(2% 1.4% at 34% 54%, rgba(255,222,190,.3), transparent 72%),
    radial-gradient(1.8% 1.2% at 58% 50%, rgba(255,222,190,.24), transparent 72%),
    radial-gradient(1.6% 1.1% at 72% 58%, rgba(255,222,190,.2), transparent 72%);
}
.f-map .field__arch {
  background: repeating-radial-gradient(circle at 50% 116%, transparent 0 74px, rgba(196,238,242,.05) 74px 75px, transparent 75px 152px);
  -webkit-mask-image: radial-gradient(70% 66% at 50% 106%, rgba(0,0,0,.95), transparent 74%);
  mask-image: radial-gradient(70% 66% at 50% 106%, rgba(0,0,0,.95), transparent 74%);
}

/* ── WARM · quiet, the questions ─────────────────────────── */
.f-quiet .field__base {
  background:
    radial-gradient(60% 44% at 78% 24%, rgba(217,140,107,.11), transparent 70%),
    linear-gradient(200deg,#180B09 0%,#2C1712 46%,#1E0F0C 72%,#180B09 100%),
    var(--clay-1);
}
.f-quiet .field__base::before {
  background: linear-gradient(214deg, rgba(255,220,198,.17) 0%, rgba(217,140,107,.04) 26%, transparent 48%);
  -webkit-mask-image: radial-gradient(70% 60% at 82% 18%, rgba(0,0,0,.95), transparent 80%);
  mask-image: radial-gradient(70% 60% at 82% 18%, rgba(0,0,0,.95), transparent 80%);
}

/* crops — the silhouette is scaled past the frame so a plate reads
   as a fragment rather than a diagram */
.f-pair     .field__fig { transform: scale(1.62) translate(-2%,6%); transform-origin: 58% 100%; }
.f-two      .field__fig { transform: scale(1.78) translate(2%,7%);  transform-origin: 50% 100%; }
.f-corridor .field__fig { transform: scale(2.00) translate(-6%,9%); transform-origin: 56% 100%; }
.f-room     .field__fig { transform: scale(1.72) translate(5%,8%);  transform-origin: 42% 100%; }
.f-oil      .field__fig { transform: scale(1.50) translate(-2%,5%); transform-origin: 52% 100%; }
.f-night    .field__fig { transform: scale(1.86) translate(-2%,10%);transform-origin: 50% 100%; }
.f-velvet   .field__fig { transform: scale(1.64) translate(3%,7%);  transform-origin: 46% 100%; }
.f-quiet    .field__fig { transform: scale(1.58) translate(4%,5%);  transform-origin: 56% 100%; }

/* ============================================================
   CHROME — almost nothing until scrolled
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .8s var(--ease), border-color .8s var(--ease), backdrop-filter .8s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.is-stuck {
  background: rgba(var(--wash),.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--seam-h); opacity: 0;
  transition: opacity .8s var(--ease);
  pointer-events: none;
}
.topbar.is-stuck::after { opacity: .9; }

.util {
  display: flex; align-items: center; gap: 16px;
  height: 34px; overflow: hidden;
  padding: 0 var(--gut);
  background: var(--recess);
  border-bottom: 1px solid var(--line);
  font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-2);
  transition: height .7s var(--ease), opacity .5s var(--ease);
}
.topbar.is-stuck .util { height: 0; opacity: 0; border-bottom-color: transparent; }
.util__sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(217,140,107,.7); flex: 0 0 auto; }
.util__r { margin-left: auto; color: rgba(255,255,255,.4); }

.bar { display: flex; align-items: center; gap: 22px; height: var(--bar); padding: 0 var(--gut); }
/* the wordmark is the pair in miniature: the serif says the name,
   a hairline of the accent closes it, the sans says the rest. */
.mark { font-size: 15px; line-height: 1; color: var(--fg); display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.mark svg { flex: 0 0 auto; }
.mark .wm-a {
  font-family: var(--serif); font-weight: 400;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  letter-spacing: -.01em; white-space: nowrap;
}
.mark .wm-seam { width: 1px; height: 15px; flex: 0 0 auto; background: linear-gradient(180deg,transparent,var(--acc-hi) 50%,transparent); }
.mark i {
  font-style: normal; font-family: var(--sans);
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--acc);
}

.navlinks { display: flex; align-items: center; gap: 24px; margin-left: auto; }
/* without JS the bar never becomes "stuck", so the links stay visible */
.js .navlinks { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .topbar.is-stuck .navlinks { opacity: 1; transform: none; pointer-events: auto; }
.navlinks a { font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); transition: color .35s var(--ease); }
.navlinks a:hover { color: var(--fg); }

.burger {
  display: none; margin-left: auto; padding: 10px 0 10px 14px;
  font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fg);
}

/* menu sheet */
.sheet {
  position: fixed; inset: 0; z-index: 80;
  background: linear-gradient(168deg,var(--clay-1) 0%,var(--clay-0) 46%,var(--teal-0) 56%,var(--teal-1) 100%);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: var(--gut);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.sheet.on { opacity: 1; visibility: visible; transform: none; }
.sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--seam-h); pointer-events: none; }
.sheet__glow { position: absolute; inset: 0; background: var(--glow); pointer-events: none; }
.sheet a.sheet__l {
  position: relative; display: block;
  font-family: var(--serif); font-size: clamp(20px,5.4vw,26px); line-height: 1.1;
  padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--fg);
  transition: color .35s var(--ease), padding-left .45s var(--ease);
}
.sheet a.sheet__l:hover { color: #F0BEA2; padding-left: 8px; }
.sheet__close {
  position: absolute; top: calc(var(--gut) - 4px); right: var(--gut);
  color: var(--fg-2);
  font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.sheet__foot { position: relative; margin-top: 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* the booking action sits at the foot of the frame */
.dock {
  position: fixed; left: var(--gut); bottom: 20px; z-index: 58;
  display: flex; align-items: center; gap: 16px;
  max-width: calc(100% - 28px);
}
.js .dock { opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .dock.on { opacity: 1; transform: none; pointer-events: auto; }
.dock .btn { box-shadow: 0 12px 36px rgba(0,0,0,.6); }
.counter { font: 500 10px/1 var(--sans); letter-spacing: .22em; color: rgba(255,255,255,.32); white-space: nowrap; }
.counter b { font-weight: 500; color: var(--acc); }

/* ============================================================
   21+ GATE — ships hidden, in the markup and in the CSS
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 120;
  display: none; place-items: center;
  background: linear-gradient(104deg,var(--clay-1) 0%,var(--clay-0) 44%,var(--teal-0) 56%,var(--teal-1) 100%);
  padding: 24px;
  overflow-y: auto;
}
.gate[hidden] { display: none; }
.gate.on { display: grid; }
.gate__seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--seam-v); opacity: .8; pointer-events: none; }
.gate__glow { position: absolute; inset: 0; background: var(--glow); }
.gate__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; mix-blend-mode: overlay; }
.gate__card {
  position: relative; width: min(460px,100%);
  text-align: center;
  padding: clamp(30px,5vw,46px) clamp(22px,4vw,40px);
  border: 1px solid var(--line-2);
  background: linear-gradient(104deg,rgba(54,29,23,.92),rgba(14,52,56,.92));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gate__card::before, .gate__card::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; }
.gate__card::before { top: -1px; left: -1px; border-top: 1px solid rgba(217,140,107,.6); border-left: 1px solid rgba(217,140,107,.6); }
.gate__card::after { bottom: -1px; right: -1px; border-bottom: 1px solid rgba(217,140,107,.6); border-right: 1px solid rgba(217,140,107,.6); }
.gate__mark { font: 500 10px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--acc); margin-bottom: 22px; }
.gate h2 { font-size: clamp(22px,3.4vw,30px); margin-bottom: 14px; }
.gate p { color: var(--fg-2); font-size: 13.5px; line-height: 1.7; max-width: 36ch; margin: 0 auto; }
.gate .btn { margin-top: 26px; width: 100%; }
.gate__fine { margin-top: 18px; font-size: 11px; letter-spacing: .02em; color: rgba(255,255,255,.3); }

/* no-JS notice — the gate is raised by script, so without JS this stands in */
.nogate {
  position: relative; z-index: 70;
  background: var(--clay-2);
  border-bottom: 1px solid var(--line);
  padding: calc(var(--bar) + 56px) var(--gut) 20px;
}
.nogate p { max-width: var(--max); margin: 0 auto; font-size: 13px; color: var(--fg-3); line-height: 1.7; }
.nogate b {
  font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--acc); border: 1px solid rgba(217,140,107,.55);
  padding: 4px 8px; margin-right: 12px; display: inline-block;
}
.nogate a, .caps a { border-bottom: 1px solid rgba(217,140,107,.55); color: var(--fg); }
.nogate a:hover, .caps a:hover { border-bottom-color: var(--acc-hi); }

/* ============================================================
   PANELS — one idea per viewport
   ============================================================ */
main { background: var(--ground); }

.panel {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--bar) + 56px) var(--gut) 72px;
  overflow: hidden;
  background: var(--ground);
  scroll-margin-top: calc(var(--bar) + 22px);
}
.panel--auto { min-height: 0; }
.panel.g-seam, .closer.g-seam, .stage.g-seam {
  background: linear-gradient(96deg,var(--clay-1) 0%,var(--clay-0) 46%,var(--teal-0) 54%,var(--teal-1) 100%);
}
/* graded ND filters — heaviest where the type sits, open where the frame should read */
.panel__wash {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(92deg, rgba(var(--wash),.96) 0%, rgba(var(--wash),.88) 34%, rgba(var(--wash),.55) 62%, rgba(var(--wash),.12) 88%, rgba(var(--wash),0) 100%);
}
.panel__wash--v {
  background: linear-gradient(180deg, rgba(var(--wash),.22) 0%, rgba(var(--wash),.74) 17%, rgba(var(--wash),.93) 38%, rgba(var(--wash),.93) 72%, rgba(var(--wash),.6) 92%, rgba(var(--wash),.3) 100%);
}
.panel__wash--c {
  background: radial-gradient(92% 76% at 50% 50%, rgba(var(--wash),.88) 0%, rgba(var(--wash),.74) 50%, rgba(var(--wash),.34) 84%, rgba(var(--wash),.1) 100%);
}
.panel__wash--seam {
  background:
    linear-gradient(90deg, rgba(38,19,15,.95) 0%, rgba(38,19,15,.8) 26%, rgba(38,19,15,.3) 44%, rgba(38,19,15,0) 54%),
    linear-gradient(270deg, rgba(9,37,40,.9) 0%, rgba(9,37,40,.7) 26%, rgba(9,37,40,.26) 44%, rgba(9,37,40,0) 54%);
}
.panel__in { position: relative; width: 100%; max-width: var(--max); margin: 0 auto; z-index: 2; }

/* viewfinder corner ticks */
.vf { position: absolute; inset: clamp(14px,2.2vw,28px); pointer-events: none; z-index: 3; }
.vf span { position: absolute; width: 16px; height: 16px; }
.vf span:nth-child(1) { top: 0; left: 0; border-top: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2); }
.vf span:nth-child(2) { top: 0; right: 0; border-top: 1px solid rgba(255,255,255,.2); border-right: 1px solid rgba(255,255,255,.2); }
.vf span:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2); }
.vf span:nth-child(4) { bottom: 0; right: 0; border-bottom: 1px solid rgba(255,255,255,.2); border-right: 1px solid rgba(255,255,255,.2); }

/* ---------- the stage (opening panel) ---------- */
.stage {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--bar) + 40px) var(--gut) clamp(66px,10vh,104px);
  overflow: hidden;
  background: var(--ground);
}
.stage--short { min-height: 76svh; }
.stage__wash {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--wash),.94) 0%, rgba(var(--wash),.62) 30%, rgba(var(--wash),.12) 62%, transparent 86%);
}
.stage__in { position: relative; z-index: 4; width: 100%; max-width: var(--max); margin: 0 auto; display: flex; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.stage__title { flex: 1 1 560px; min-width: 0; }
.stage h1 { max-width: min(100%,760px); }
/* the headline is the pairing stated once, plainly: one line in each face.
   The second line is a sibling rather than a span inside the h1, so an
   overridden h1 from content/<site>/pages.json replaces the serif line and
   leaves the sans answer standing. */
.stage__second {
  max-width: min(100%,760px);
  margin: 0 0 22px;
  font-family: var(--sans); font-weight: 500;
  font-variation-settings: normal;
  letter-spacing: -.035em;
  line-height: 1.06;
  font-size: clamp(28px, 4.3vw, 47px);
  color: #F0E4DC;
}
.stage--short .stage__second { font-size: clamp(17px, 1.7vw, 22px); letter-spacing: -.02em; color: var(--fg-2); margin-bottom: 18px; }
.stage__lead { max-width: 46ch; color: var(--fg-3); font-size: clamp(14.5px,1.15vw,16.5px); line-height: 1.72; }
.stage__acts { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 34px; }
.stage__side { flex: 0 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.stage__stat { border-top: 1px solid var(--line); padding-top: 12px; }
.stage__stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--fg); }
.stage__stat span { font: 500 9.5px/1.5 var(--sans); letter-spacing: .19em; text-transform: uppercase; color: var(--fg-2); }

.cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 11px;
  font: 500 9px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.34);
}
.cue i { display: block; width: 1px; height: 46px; background: linear-gradient(180deg,rgba(255,255,255,.34),transparent); transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
  .cue i { animation: cue 3.4s var(--ease) infinite; }
}
@keyframes cue { 0% { transform: scaleY(.2); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- the reel: signature scroll sequence ---------- */
.reel { position: relative; height: 420vh; background: var(--ground); }
.reel__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--ground);
  transition: background 1.5s var(--ease);
}
.reel__fields { position: absolute; inset: 0; }
.js .reel__fields .field { opacity: 0; transition: opacity 1.5s var(--ease); }
.js .reel__fields .field.on { opacity: 1; }
.reel__copy { position: relative; z-index: 4; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) clamp(74px,11vh,122px); }
.reel__frames { position: relative; min-height: clamp(240px,31vh,300px); }
.js .reel__frame {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 660px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  pointer-events: none;
}
.js .reel__frame.on { opacity: 1; transform: none; pointer-events: auto; }
.reel__frame h2 { margin-bottom: 16px; }
.reel__frame p { color: var(--fg-3); max-width: 48ch; font-size: 15px; }
.reel__hud { position: absolute; left: var(--gut); right: var(--gut); bottom: 34px; z-index: 5; display: flex; align-items: center; gap: 16px; }
.reel__track { position: relative; flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.13); }
.reel__track::after { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: var(--seam-v); }
.reel__fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--acc-grad); }
.reel__idx { font: 500 9.5px/1 var(--sans); letter-spacing: .22em; color: rgba(255,255,255,.36); flex: 0 0 auto; }
.reel__idx b { font-weight: 500; color: var(--fg); }

/* ---------- the pair: two grounds, seam between ---------- */
.two { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.24fr); gap: clamp(30px,5vw,80px); align-items: start; }
.pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); }
.pair > div { padding: clamp(20px,2.6vw,32px); }
.pair__a { background: rgba(54,29,23,.78); }
.pair__b { background: rgba(14,52,56,.78); }
.pair__a h3 { font-family: var(--serif); font-variation-settings: "SOFT" 42,"WONK" 1; font-size: 17.5px; margin-bottom: 9px; }
.pair__b h3 { font-family: var(--sans); font-variation-settings: normal; font-weight: 500; letter-spacing: -.024em; font-size: 17px; margin-bottom: 9px; }
.pair p { font-size: 13.5px; line-height: 1.68; color: var(--fg-3); }
.pair__tag { display: block; margin-bottom: 13px; font: 500 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.36); }
.pair__b .pair__tag { font: italic 500 12px/1 var(--serif); letter-spacing: .1em; text-transform: none; color: rgba(240,190,162,.72); }
.pair::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--seam-v); pointer-events: none; }

/* the arithmetic, published rather than described */
.maths {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  margin-top: clamp(20px,2.6vw,30px);
  border-top: 1px solid var(--line-2);
  background: var(--line); gap: 1px;
}
.maths div { background: rgba(var(--wash),.72); padding: clamp(15px,1.9vw,22px) clamp(12px,1.5vw,18px); }
.maths b {
  display: block;
  font-family: var(--serif); font-weight: 400;
  font-variation-settings: "SOFT" 30,"WONK" 0;
  font-size: clamp(22px,2.9vw,34px); line-height: 1; letter-spacing: -.015em;
  color: var(--acc);
  background: var(--acc-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.maths .ask {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(14px,1.5vw,17px); letter-spacing: -.01em;
  background: none; -webkit-text-fill-color: var(--fg); color: var(--fg);
  padding-top: clamp(6px,.9vw,12px);
}
.maths span { display: block; margin-top: 9px; font: 500 9px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.38); }
.two__note { margin-top: 22px; display: flex; gap: 22px; flex-wrap: wrap; }
.two__note p { font-size: 12.5px; color: var(--fg-3); max-width: 36ch; line-height: 1.64; }

/* ---------- hours / price ladder ---------- */
.ladder { border-top: 1px solid var(--line-2); }
.rung {
  display: flex; align-items: baseline; gap: clamp(14px,2.4vw,34px);
  padding: clamp(16px,2vw,24px) clamp(14px,1.8vw,24px);
  border-bottom: 1px solid var(--line);
  background: var(--raise);
  transition: background .6s var(--ease);
}
.rung:hover { background: var(--raise-2); }
.rung__t { flex: 0 0 auto; min-width: clamp(110px,15vw,190px); }
.rung__t b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(17px,1.6vw,20px); color: var(--fg); line-height: 1.25; }
.rung__t span { font: 500 9px/1.6 var(--sans); letter-spacing: .19em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.rung__d { flex: 1 1 auto; font-size: 13.5px; color: var(--fg-3); line-height: 1.6; min-width: 0; }
.rung__p {
  flex: 0 0 auto; margin-left: auto; text-align: right;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px,2.9vw,33px); line-height: 1;
  letter-spacing: -.01em;
  color: var(--acc);
  background: var(--acc-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rung__p i {
  font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: .1em;
  -webkit-text-fill-color: rgba(255,255,255,.34); color: rgba(255,255,255,.34);
  display: block; margin-top: 6px; text-transform: uppercase;
}
.rung--night { background: var(--raise-2); padding-top: clamp(22px,2.6vw,34px); padding-bottom: clamp(22px,2.6vw,34px); }
.rung--night:hover { background: var(--raise-3); }
.rung--night .rung__t b { font-size: clamp(19px,2vw,24px); font-weight: 600; letter-spacing: -.005em; }
/* the two-therapist rung is the one place on the cool ladder where the
   warm ground shows through — the seam, used as emphasis */
.rung--two {
  position: relative;
  background: linear-gradient(96deg, rgba(71,39,32,.9) 0%, rgba(54,29,23,.86) 46%, rgba(20,68,74,.86) 100%);
  padding-top: clamp(22px,2.6vw,34px); padding-bottom: clamp(22px,2.6vw,34px);
}
.rung--two:hover { background: linear-gradient(96deg, rgba(90,51,41,.92) 0%, rgba(71,39,32,.88) 46%, rgba(27,87,94,.88) 100%); }
.rung--two::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--seam-h); }
.rung--two .rung__t b { font-size: clamp(19px,2vw,24px); font-weight: 600; letter-spacing: -.005em; }
.ladder__note { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 24px; }
.ladder__note p { font-size: 12.5px; color: var(--fg-3); max-width: 34ch; line-height: 1.6; }

/* ---------- repertoire ---------- */
.rep { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.28fr); gap: clamp(32px,5vw,84px); align-items: start; }
.rep__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,3.4vw,52px); }
.ledger { border-top: 1px solid var(--line-2); }
.ledger li { display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 11px 0; border-top: 1px solid var(--line); }
.ledger li.ledger__h { justify-content: space-between; gap: 12px; padding: 12px 0 14px; border-top: 0; }
.ledger__h b { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--fg); }
.ledger__h span { font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.ledger li b { font-weight: 400; font-size: 14.5px; color: var(--fg); flex: 0 0 auto; }
.ledger li span { font-size: 12.5px; color: var(--fg-2); line-height: 1.4; text-align: right; margin-left: auto; }
.ledger a { display: flex; align-items: baseline; gap: 14px; width: 100%; transition: color .3s var(--ease); }
.ledger a:hover b { color: var(--acc-hi); }

/* ---------- coverage ---------- */
.cov { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.35fr); gap: clamp(30px,5vw,80px); align-items: start; }
.grid-d { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px,3.4vw,56px); border-top: 1px solid var(--line-2); }
.grid-d > * { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.grid-d b { font-weight: 400; font-size: 14.5px; color: var(--fg); }
.grid-d span { font: 500 9.5px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
a.grid-d__l:hover b { color: var(--acc-hi); }

/* ---------- the roster rail ---------- */
.roster__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; margin-bottom: 30px; }
.rail {
  display: flex; gap: clamp(12px,1.3vw,20px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.rail.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.railnav { display: flex; gap: 8px; flex: 0 0 auto; }
.railnav button {
  width: 40px; height: 40px; padding: 0; border-radius: 2px;
  border: 1px solid var(--line-2); background: var(--raise); color: var(--fg);
  display: grid; place-items: center;
  transition: border-color .4s var(--ease), background .4s var(--ease), opacity .4s var(--ease);
}
.railnav button:hover { border-color: rgba(217,140,107,.55); background: var(--raise-2); }
.railnav button[disabled] { opacity: .28; cursor: default; }
.railnav i { display: block; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.railnav .prev i { transform: rotate(-135deg); margin-left: 3px; }
.railnav .next i { transform: rotate(45deg); margin-right: 3px; }
.rail::-webkit-scrollbar { height: 2px; }
.rail::-webkit-scrollbar-track { background: rgba(255,255,255,.07); }
.rail::-webkit-scrollbar-thumb { background: rgba(217,140,107,.5); }
.card { position: relative; flex: 0 0 clamp(178px,20vw,244px); scroll-snap-align: start; }
.card__l { display: block; }
.card__slot { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--raise); }
/* the two grounds survive onto real photographs as a soft alternating
   tint — clay, teal, clay, teal — so the rail still reads two at a time */
.field__tint { mix-blend-mode: soft-light; opacity: .5; }
.rail .card:nth-child(odd) .field__tint { background: linear-gradient(202deg, rgba(217,140,107,.7), rgba(90,51,41,.25)); }
.rail .card:nth-child(even) .field__tint { background: linear-gradient(202deg, rgba(150,220,226,.6), rgba(20,68,74,.25)); }
.card__slot .field__vig { background: radial-gradient(128% 100% at 50% 40%, rgba(0,0,0,0) 46%, rgba(0,0,0,.24) 80%, rgba(0,0,0,.56) 100%); }
.card__slot .field__scrim { background: var(--scrim-8); }
.card__slot .field__grain--fine { opacity: .2; }
.card__slot .field__rim { opacity: 1; }
.card__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 13px; }
.card__cap h3 { font-size: 16px; margin-bottom: 3px; color: var(--fg); }
.card__cap p { font: 500 9.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .6s var(--ease);
}
.card:hover::after { border-color: rgba(217,140,107,.4); }
.card:hover .field__photo { transform: scale(1.04); }
.rail__note { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }

/* ---------- booking: the exchange ---------- */
.wire { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.3fr); gap: clamp(32px,5vw,84px); align-items: start; }
.wire__thread { display: flex; flex-direction: column; gap: 10px; }
.wire__row { position: relative; max-width: 31rem; background: var(--raise); border: 1px solid var(--line); padding: 15px 18px 16px; }
.wire__row--us { align-self: flex-end; background: var(--raise-2); border-color: rgba(217,140,107,.22); }
.wire__who { display: block; margin-bottom: 6px; font: 500 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.34); }
.wire__row--us .wire__who { color: var(--acc); text-align: right; }
.wire__row--us p { text-align: right; }
.wire__row p { font-size: 13.5px; color: var(--fg); line-height: 1.66; }
.wire__foot { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-2); line-height: 1.66; }

/* ---------- assurances / faq ---------- */
.assure { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.35fr); gap: clamp(30px,5vw,80px); align-items: start; }
.trust { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); margin-bottom: 34px; }
.trust > div { background: var(--raise); padding: 20px 18px; }
.trust b { display: block; font-family: var(--serif); font-weight: 400; font-size: 16px; margin-bottom: 6px; color: var(--fg); }
.trust span { font-size: 12.5px; color: var(--fg-3); line-height: 1.62; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); background: var(--recess); }
.faq details[open] { background: var(--raise); }
.faq summary {
  list-style: none; cursor: pointer; padding: 17px 44px 17px 18px; position: relative;
  font-family: var(--serif); font-size: 16px; color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px;
  border-right: 1px solid rgba(217,140,107,.8); border-bottom: 1px solid rgba(217,140,107,.8);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .45s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq p { padding: 0 44px 20px 18px; font-size: 13.5px; color: var(--fg); line-height: 1.74; max-width: 62ch; }

/* ---------- profile / service detail blocks ---------- */
.detail { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr); gap: clamp(30px,5vw,80px); align-items: start; }
.prose p { font-size: 15px; line-height: 1.76; color: var(--fg-3); margin-bottom: 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { margin: 42px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--fg); border-bottom: 1px solid rgba(217,140,107,.55); }
.prose a:hover { border-bottom-color: var(--acc-hi); }
.stat { border-top: 1px solid var(--line-2); }
.stat > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stat dt, .stat__k { font: 500 9.5px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }
.stat dd, .stat__v { font-size: 14.5px; color: var(--fg); text-align: right; margin: 0; }
.stat a { color: var(--fg); border-bottom: 1px solid rgba(217,140,107,.45); }
.plates { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(8px,1vw,14px); }
.plate { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--raise); border: 1px solid rgba(255,255,255,.06); }
.plate img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.plate:hover img { transform: scale(1.04); }
.portrait { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--raise); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.08); }
.stage__plate { flex: 0 1 300px; min-width: 0; }
@media (max-width: 760px) { .stage__plate { flex: 1 1 100%; max-width: 300px; } }

/* ---------- closing ---------- */
.closer {
  position: relative; min-height: 78svh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: clamp(70px,12vh,130px) var(--gut); overflow: hidden;
  background: var(--ground);
}
.closer__in { position: relative; z-index: 4; max-width: 620px; }
.closer h2 { margin-bottom: 18px; }
.closer .lead { margin: 0 auto 32px; }
.closer__acts { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
.site-foot {
  position: relative; border-top: 1px solid transparent;
  background: linear-gradient(96deg,var(--clay-0) 0%,var(--clay-0) 44%,var(--teal-0) 56%,var(--teal-0) 100%);
  padding: clamp(46px,6vw,72px) var(--gut) 0;
}
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--seam-h); }
.foot { position: relative; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.5fr) repeat(4, minmax(0,1fr)); gap: clamp(24px,3vw,44px); }
.foot__mark { font-size: 22px; line-height: 1.2; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot__mark .wm-a { font-family: var(--serif); font-weight: 500; font-variation-settings: "SOFT" 50,"WONK" 1; letter-spacing: -.012em; }
.foot__mark .wm-seam { width: 1px; height: 20px; background: linear-gradient(180deg,transparent,var(--acc-hi) 50%,transparent); }
.foot__tag { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--acc); margin: 0 0 14px; }
.foot p { font-size: 13px; color: var(--fg-3); line-height: 1.7; max-width: 38ch; margin: 0; }
.foot h5 { margin: 0 0 15px; font: 500 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.36); }
.foot li { padding: 5px 0; font-size: 13px; color: var(--fg-2); }
.foot li a { font-size: 13px; color: var(--fg-2); transition: color .35s var(--ease); }
.foot li a:hover { color: var(--fg); }
.foot__contact b { display: block; font-family: var(--serif); font-weight: 500; font-variation-settings: "SOFT" 42,"WONK" 1; font-size: 16px; color: var(--fg); margin-bottom: 3px; }
.foot__contact b a { font-size: 16px; color: var(--fg); border-bottom: 1px solid rgba(217,140,107,.5); }
.foot__contact b a:hover { border-bottom-color: var(--acc-hi); }
.footbar {
  max-width: var(--max); margin: clamp(40px,5vw,64px) auto 0;
  border-top: 1px solid var(--line);
  padding: 20px 0 26px;
  display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap;
  font: 500 9.5px/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.3);
}
.footbar .age { border: 1px solid rgba(217,140,107,.55); color: var(--acc); padding: 4px 8px; letter-spacing: .14em; }
.footbar nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.footbar a:hover { color: var(--fg-2); }

/* ---------- reveals ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-2 { transition-delay: .12s; }
.js .rv-3 { transition-delay: .24s; }

/* slow ken-burns on the active field */
@media (prefers-reduced-motion: no-preference) {
  .field.on .field__base,
  .panel.in .field__base,
  .stage .field__base { transform: scale(1.055); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .rep, .cov, .assure, .wire, .two, .detail { grid-template-columns: 1fr; gap: 34px; }
  .foot { grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
  .profile-grid { grid-template-columns: 1fr; }
  /* single-column panels run long, so keep the floating action clear of
     the last line of every one of them */
  .panel { padding-bottom: 112px; }
  .closer { padding-bottom: 120px; }
  .panel__wash { background: linear-gradient(180deg, rgba(var(--wash),.3) 0%, rgba(var(--wash),.8) 18%, rgba(var(--wash),.94) 42%, rgba(var(--wash),.94) 76%, rgba(var(--wash),.55) 96%, rgba(var(--wash),.3) 100%); }
  .like-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1024px) {
  .navlinks { gap: 18px; }
  .navlinks a { font-size: 9.5px; letter-spacing: .14em; }
  .t-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .navlinks { display: none; }
  .burger { display: block; }
  .counter { display: none; }
  .dock { left: 14px; bottom: 14px; }
  /* one floating action on a phone, so the dock covers as little of the
     panel it is sitting over as possible — Telegram stays in the footer */
  .dock .btn--ghost { display: none; }
  .panel { padding-bottom: 104px; }
  .closer { padding-bottom: 120px; }
  .footbar { padding-bottom: 74px; }
  .util span:nth-child(3), .util__sep:nth-of-type(2) { display: none; }
}
@media (max-width: 880px) {
  .t-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s-grid { grid-template-columns: 1fr; }
  .like-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  section { padding: 60px 0; }
}
@media (max-width: 760px) {
  :root { --bar: 56px; }
  .reel { height: 340vh; }
  .stage__in { gap: 30px; }
  .stage__side { flex: 1 1 100%; flex-direction: row; gap: 20px; flex-wrap: wrap; }
  .stage__stat { flex: 1 1 40%; min-width: 130px; }
  .rep__cols { grid-template-columns: 1fr; gap: 30px; }
  .trust { grid-template-columns: 1fr; }
  .grid-d { grid-template-columns: 1fr; }
  /* stacked, the two halves still meet at a seam — it simply turns */
  .pair { grid-template-columns: 1fr; }
  .pair::after { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; background: var(--seam-h); }
  .maths { grid-template-columns: 1fr 1fr; }
  .panel.g-seam, .closer.g-seam, .stage.g-seam { background: linear-gradient(178deg,var(--clay-1) 0%,var(--clay-0) 46%,var(--teal-0) 54%,var(--teal-1) 100%); }
  .stage .seam--v, .closer .seam--v { display: none; }
  .plates { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .foot { grid-template-columns: 1fr; }
  .wire__row, .wire__row--us { max-width: 100%; align-self: stretch; }
  .rung { flex-wrap: wrap; gap: 6px 16px; }
  .rung__t { flex: 1 1 auto; min-width: 0; }
  .rung__p { flex: 0 0 auto; text-align: right; }
  .rung__d { flex: 1 1 100%; order: 3; margin-top: 4px; }
  .util { font-size: 9px; letter-spacing: .12em; gap: 10px; }
  .util__r { display: none; }
  .ledger li { flex-wrap: wrap; gap: 2px 12px; }
  .ledger li span { text-align: left; margin-left: 0; flex: 1 1 100%; }
  .ledger a { flex-wrap: wrap; gap: 2px 12px; }
  .closer__acts { flex-direction: column; align-items: stretch; }
  .stage__acts .btn, .closer .btn { width: 100%; }
  .like-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .carousel-slide { flex: 0 0 calc(50% - 3px); }
}
@media (max-width: 400px) {
  .card { flex: 0 0 72vw; }
  .t-grid { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .rv { opacity: 1; transform: none; }
}