/* ============================================================
   ANNABEL PRIVATE MATCHMAKING
   Design tokens per the build brief, section 16.
   ============================================================ */

:root {
  --color-graphite: #121214;
  /* Noble graphite, chosen by the user. L* 14 against the original 9, with the
     chroma doubled so it reads as a colour rather than as a grey — a neutral
     grey at this darkness goes flat, and a warm one muddies against the wine.
     The violet cast is what lets it sit under burgundy.
     Checked before adopting: white type 14.8:1, the form's hairline 3.17:1
     against it, just clear of the 3.0 minimum for a component boundary. */
  --color-graphite-soft: #242329;
  --color-ivory: #F4F0E9;
  --color-soft-white: #FBF9F6;
  --color-burgundy: #800020;
  --color-wine: #5D1025;
  --color-cocoa: #292326;
  --color-dusty-rose: #D2B7BC;
  --color-champagne: #B39A70;
  --color-border: #D9D1C8;

  /* Supplied by the user on 2026-08-15 and adopted by role, not as a global
     repaint. The taupe is a page ground: graphite type reads 9.32:1 on it and
     burgundy 6.55:1, so the brand accent survives. The brown is a dark element
     only — as a page ground it drops burgundy to 1.17:1 and the accent dies. */
  /* A shade deeper than `--color-ivory`, for the form and legal pages. The white
     input panels only read as separate objects if the ground behind them is not
     also near-white: against #F4F0E9 they contrasted 1.08:1, against this 1.18:1.
     Going lighter is not an option — at #FBF9F6 the fields disappear entirely. */
  --color-ivory-deep: #EDE6DA;

  --color-taupe: #D8C6BA;
  --color-cocoa-warm: #54443B;

  /* Graphite carrying a wine undertone — the footer's gradient reduced to a
     button. Ivory on it reads 15.8:1, so the label is never in doubt. */
  --grad-graphite-wine: linear-gradient(135deg, #331520 0%, #1E1A20 62%);
  --grad-graphite-wine-hover: linear-gradient(135deg, #3E1927 0%, #16151A 62%);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* The brief suggests clamp(3.1rem, 6vw, 5.2rem). Tuned down so the hero
     copy and the primary CTA fit inside the first viewport at 1440 × 900
     and 1280 × 800, which CLAUDE.md treats as a hard requirement. */
  --font-h1: clamp(2.85rem, 4.4vw, 4.25rem);
  --font-h2: clamp(2.35rem, 4.5vw, 4.1rem);
  --font-h3: clamp(1.45rem, 2.2vw, 2rem);
  --font-body-large: clamp(1.05rem, 1.4vw, 1.25rem);
  --font-small: 0.78rem;

  --wrap: 1300px;
  --pad-x: clamp(1.25rem, 4vw, 4.5rem);
  --section-y: clamp(4.25rem, 9vw, 8.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Sized to the horizontal brand lockup: the 115px monogram stands 60px tall,
     plus 20px of air above and below. */
  --header-h: 100px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--color-soft-white);
  color: var(--color-cocoa);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--font-h1); line-height: 1.0; letter-spacing: -0.01em; }
h2 { font-size: var(--font-h2); line-height: 1.06; letter-spacing: -0.005em; }
h3 { font-size: var(--font-h3); line-height: 1.2; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section-y); }

/* ── Accessibility ─────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--color-burgundy);
  color: var(--color-soft-white);
  padding: 0.85rem 1.4rem;
  border-radius: 5px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-burgundy);
  outline-offset: 3px;
  border-radius: 2px;
}

.hero :where(a, button):focus-visible { outline-color: var(--color-champagne); }

/* ── Typographic utilities ─────────────────────────────────── */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-small);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0 0 1.4rem;
}
.eyebrow-dark { color: var(--color-burgundy); }

.lead { font-size: var(--font-body-large); }

/* ── Buttons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 2rem;
  border: 0;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}

.btn-primary { background: var(--color-burgundy); color: var(--color-soft-white); }
.btn-primary:hover { background: var(--color-wine); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-soft-white);
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 12px;
  width: 100%; height: 1px;
  background: var(--color-champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
.text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(1); }

/* `.text-link` is soft white because it was written for the hero, over the
   video. The one on the ivory memberships band inherited that and rendered
   white on cream at 1.08:1 — invisible at every width, desktop included, not
   just on a phone. Burgundy matches the `View details` control directly above
   it and the champagne underline still reads against it. */
.memberships-more { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; }
.memberships-more .text-link { color: var(--color-burgundy); }
.memberships-more .text-link::after { background: var(--color-burgundy); }

/* ── Header ────────────────────────────────────────────────── */

/* The header is not sticky: it sits over the top of the hero and scrolls away
   with it, so no bar follows the reader down the page. It carries no fill of
   its own — the video runs behind the logo and navigation, and readability
   comes from the hero's own top scrim. */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
}

/* Lockup on the left, on the same edge as the hero eyebrow and H1 below it;
   navigation right. Not centred: a centred mark made of a monogram plus a
   separate wordmark never reads as one logo. */
.header-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* Horizontal brand lockup: the approved AM monogram, then the wordmark.
   The monogram is the supplied artwork — no redraw, recolour or distortion. */
.logo {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}
.logo img { width: 115px; height: auto; }

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--color-champagne);
}
.logo-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.logo-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: 27px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-desktop a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-soft-white);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color 220ms var(--ease);
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 8px;
  width: 100%; height: 1px;
  background: var(--color-champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
.nav-desktop a:hover, .nav-desktop a:focus-visible { color: var(--color-champagne); }
.nav-desktop a:hover::after, .nav-desktop a:focus-visible::after { transform: scaleX(1); }

/* The one primary action in the navigation. */
.nav-apply {
  min-height: 48px !important;
  padding: 0 24px;
  background: var(--color-burgundy);
  border-radius: 5px;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}
.nav-apply::after { display: none; }
.nav-apply:hover, .nav-apply:focus-visible {
  background: var(--color-wine);
  color: var(--color-soft-white) !important;
  transform: translateY(-2px);
}

/* Messenger icons live in the footer only — the header carries no contact
   icons and no CTA button. */

.menu-toggle {
  display: none;
  /* min-width, not width: the bars inside are 24px and a plain `width` was
     being overridden down to them, leaving a 24x46 hit area on a phone. */
  min-width: 46px;
  width: 46px; height: 46px;
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.menu-bar {
  display: block;
  width: 24px; height: 1.5px;
  margin-inline: auto;
  background: var(--color-soft-white);
  transition: transform 280ms var(--ease), opacity 200ms var(--ease);
}
/* The cross applies to whichever control is on screen. It used to name only
   `.menu-toggle`, so a menu opened from the floating control left that control
   still drawn as two bars — the one visible control said "open" while the menu
   was open. It toggled correctly; it just did not say so. */
.menu-toggle[aria-expanded="true"] .menu-bar:first-child,
.floating-menu[aria-expanded="true"] .menu-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bar:last-child,
.floating-menu[aria-expanded="true"] .menu-bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* Compact floating control. Hidden until the hero header has scrolled away —
   it is not a bar, not full-width, and carries no CTA. */
.floating-menu {
  position: fixed;
  top: 18px; right: clamp(1.25rem, 4vw, 2.5rem);
  z-index: 101;
  width: 48px; height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  background: rgba(18, 18, 20, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(179, 154, 112, 0.28);
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.floating-menu.is-visible { opacity: 1; transform: translateY(0); }
.floating-menu[hidden] { display: none; }
.floating-menu .menu-bar { width: 20px; }

.mobile-menu {
  position: fixed;
  inset: 0 0 0 0;
  z-index: 99;
  /* The footer's gradient, not flat graphite — the user asked for it on
     2026-09-02, and it is the same wash: a faint wine bloom and a slow lift
     toward one edge. Here the bloom sits at the foot rather than the head, so
     the colour gathers under the Join button and behind the social row instead
     of behind the navigation, which needs a quiet ground to read against.
     The near-opaque graphite stays underneath, so the blur still has something
     to work with and no page content shows through. */
  background:
    radial-gradient(70% 120% at 50% 100%, rgba(128, 0, 32, 0.26) 0%, rgba(128, 0, 32, 0) 62%),
    linear-gradient(0deg, var(--color-graphite-soft) 0%, #292831 55%, #2E2C36 100%),
    rgba(36, 35, 41, 0.985);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  padding: calc(var(--header-h) + 2rem) var(--pad-x) 3rem;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); }

/* Everything inside the overlay lives in one measured column — dividers never
   run the full width of the viewport. */
.menu-shell {
  max-width: 940px;
  min-height: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
/* The overlay carried its own lockup, but the header lockup stays visible above
   the overlay — so an open menu showed the same mark twice, at two sizes. The
   user cut the duplicate on 2026-09-02: the header one is the one that stays.
   Hidden rather than deleted, so it is one line to bring back. */
.menu-top { display: none; }
.menu-top-keep { flex: 0 0 auto; }
.menu-top .logo img { width: 96px; }
.menu-top .logo-name { font-size: 23px; }
.menu-top .logo-sub { font-size: 9px; }
/* Kept for the day the overlay lockup comes back: white, to match the white
   monogram it sits beside there. The header lockup is deliberately NOT touched —
   its monogram is the champagne artwork, so a white wordmark next to it would
   split the mark in two the same way, only in reverse. */
.menu-top .logo-name,
.menu-top .logo-sub { color: var(--color-soft-white); }

/* the navigation group sits near the middle of the screen */
.menu-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 6vh, 4rem);
}
.menu-nav ul { list-style: none; margin: 0 0 2.25rem; padding: 0; }
.menu-nav li + li { border-top: 1px solid rgba(251, 249, 246, 0.16); }
.menu-nav a {
  display: flex;
  align-items: center;
  min-height: 62px;
  color: var(--color-soft-white);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: color 220ms var(--ease);
}
.menu-nav a:hover { color: var(--color-soft-white); }
.menu-cta { max-width: 340px; width: 100%; }

.menu-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(251, 249, 246, 0.16);
}
.menu-foot p {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 240, 233, 0.6);
}
.menu-socials {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0 -0.6rem 0 0;
  padding: 0;
}
.menu-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--color-soft-white);
  opacity: 0.8;
  transition: opacity 200ms var(--ease), color 200ms var(--ease);
}
.menu-socials a:hover { opacity: 1; color: var(--color-soft-white); }
.menu-socials svg { width: 20px; height: 20px; display: block; }
.menu-socials a[aria-disabled="true"] { display: none; }

/* Links rise gently into place, staggered 55 ms apart. Worst case is the last
   element: 300 ms delay + 190 ms duration = 490 ms, inside the 500 ms budget. */
.mobile-menu :is(.menu-nav li, .menu-cta, .menu-foot) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 190ms var(--ease), transform 190ms var(--ease);
}
.mobile-menu.is-open :is(.menu-nav li, .menu-cta, .menu-foot) {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu.is-open .menu-nav li:nth-child(1) { transition-delay: 40ms; }
.mobile-menu.is-open .menu-nav li:nth-child(2) { transition-delay: 95ms; }
.mobile-menu.is-open .menu-nav li:nth-child(3) { transition-delay: 150ms; }
.mobile-menu.is-open .menu-nav li:nth-child(4) { transition-delay: 205ms; }
.mobile-menu.is-open .menu-nav li:nth-child(5) { transition-delay: 260ms; }
.mobile-menu.is-open .menu-cta  { transition-delay: 300ms; }
.mobile-menu.is-open .menu-foot { transition-delay: 300ms; }

/* ── Hero ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(1rem, 2.5vw, 2.25rem));
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
  /* The page's graphite, not the near-black `--color-graphite`. Every other dark
     band on the site is #242329; at #121214 the hero read as a colder, different
     black sitting above them. */
  background: var(--color-graphite-soft);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; }

/* The approved footage is untouched; only its presentation is composed here.
   scale(1.035) enlarges the couple a little; translateX(0.9%) carries the frame
   right so the woman clears the headline and the man keeps his room at the
   right edge. The scale overflows 1.75% per side, so a 0.9% shift can never
   expose an empty edge, and .hero already clips the overflow. */
.hero-video,
.hero-media::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 0% keeps the source's left edge flush, hiding only background beyond the
     man on the right — that alone carries the couple right without cropping
     him. The transform then adds the rest of the shift and the drop. */
  object-position: 0% center;
  transform: translate(1.3%, 1.3%) scale(1.03);
  transform-origin: center center;
}
/* poster stands in whenever the video is absent, blocked or paused */
.hero-media::before {
  content: "";
  background: url("assets/annabel-hero-poster.webp?v=20260902j") center/cover no-repeat;
  background-position: 62% center;
}
.hero-video { z-index: 1; }

/* The footage fades down over its last three seconds and ends near black. That
   is handled in script.js, which loops only the bright part of the clip — the
   fade is never reached, so nothing here has to correct for it.

   A graphite floor in `mix-blend-mode: lighten` was tried here first and
   rejected: flooring the blacks flattened the whole picture, and the cure was
   more visible than the illness. Do not reintroduce a blend layer over the
   video. */

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* full-width top scrim: carries the header type, fades into the video */
    linear-gradient(
      to bottom,
      rgba(36, 35, 41, 0.48) 0%,
      rgba(36, 35, 41, 0.20) 55%,
      rgba(36, 35, 41, 0) 100%) top / 100% 180px no-repeat,
    /* Deepened through the middle on 2026-08-16, at the user's suggestion, so the
       darkness that sweeps in from the left over the clip's second half reads as
       the page's graphite rather than as a shadow crossing the picture. It also
       buys back the contrast the switch from near-black to graphite cost. The
       right of the frame, where the couple is, is left alone. */
    linear-gradient(90deg,
      rgba(36,35,41,0.92) 0%,
      rgba(36,35,41,0.78) 25%,
      rgba(36,35,41,0.46) 50%,
      rgba(36,35,41,0.16) 68%,
      rgba(36,35,41,0.00) 82%);
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  color: var(--color-soft-white);
}

.hero-content > * { max-width: 648px; }
/* White rather than champagne, and lifted off the footage with a soft shadow
   rather than a panel: the hero brief rules out hard rectangles behind the copy,
   and a pill here would read as a badge. The shadow has no shape of its own — it
   only stops the letters dissolving into a light frame of the video. */
.hero-content .eyebrow {
  color: var(--color-soft-white);
  margin-bottom: 1.15rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 0 26px rgba(0, 0, 0, 0.35);
}

.hero h1 { margin-bottom: 1.25rem; color: var(--color-soft-white); line-height: 1.04; }

.hero-body {
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  line-height: 1.66;
  color: rgba(251, 249, 246, 0.9);
  max-width: 552px;
}
.hero-body p { margin-bottom: 0.85em; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1.85rem;
}

.hero-micro {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: rgba(210, 183, 188, 0.85);
}

/* ── Positioning: asymmetric two-column ────────────────────── */

.positioning { background: var(--color-ivory); }
.positioning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.positioning-head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
.positioning-body { max-width: 60ch; }
.criteria-intro { margin-top: 2.5rem; font-weight: 600; }

.criteria { list-style: none; margin: 1.25rem 0 2.5rem; padding: 0; }
.criteria li {
  position: relative;
  padding: 0.85rem 0 0.85rem 2.25rem;
  border-top: 1px solid var(--color-border);
}
.criteria li:last-child { border-bottom: 1px solid var(--color-border); }
.criteria li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.65rem;
  width: 14px; height: 1px;
  background: var(--color-burgundy);
}
.closing { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.45; }

/* ── Founder: portrait + text, different skeleton ──────────── */

/* Tightened so the whole block clears a 13-inch screen: the portrait is a fifth
   smaller, the crop is less tall, and the section breathes less vertically. */
.founder {
  background: var(--color-soft-white);
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
}
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.25rem);
  align-items: center;
}

.founder-portrait {
  position: relative;
  margin: 0;
  padding: 0 0 14px 14px;      /* room for the offset rule behind the image */
}
/* A thin champagne rule offset behind the portrait — editorial, no frame,
   no shadow, nothing that reads as a badge. */
.founder-portrait::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border-left: 1px solid var(--color-champagne);
  border-bottom: 1px solid var(--color-champagne);
  opacity: 0.55;
}
.founder-portrait picture { display: block; overflow: hidden; }
/* The whole photograph, in its own 2:3 proportions — only the displayed size
   was reduced. Never crop Anna's portrait to fit a layout. */
.founder-portrait img {
  position: relative;
  width: 100%;
  height: auto;
  transition: transform 620ms var(--ease);
}
.founder-portrait:hover img { transform: scale(1.02); }

.founder-text h2 { margin-bottom: 1.3rem; }
.founder-text p { font-size: 0.97rem; }
.founder-quote {
  margin: 1.8rem 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--color-burgundy);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.44;
  color: var(--color-graphite);
}
.signature { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.3; }
.signature span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-top: 0.35rem;
}

/* ── Process: graphite band, horizontal timeline ───────────── */

/* The softer graphite, matching the international-network block. On the near
   black `--color-graphite` this section read as a dead hole in the page. */
.process { background: var(--color-graphite-soft); color: var(--color-ivory); }
/* On the graphite blocks the accents are white, not champagne — gold on dark
   reads as a second brand rather than as one. Warmth on these sections comes
   from the photographs and the burgundy CTA. */
.process .eyebrow { color: var(--color-soft-white); }
.process-head {
  display: grid;
  /* The copy here is short and capped at 46ch, so its column was carrying dead
     space while the photograph sat small beside it. At 1.15fr the picture comes
     out exactly as tall as the text block — the two finish on the same line at
     the top as well as the bottom — without taking a single character off the
     measure. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.process-intro-text { max-width: 46ch; }

.process-figure { margin: 0; }
.process-figure img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(251, 249, 246, 0.35);
}
.process h2 { color: var(--color-soft-white); margin-bottom: 1.25rem; }
.process-intro { font-size: var(--font-body-large); color: rgba(244, 240, 233, 0.78); }

/* Three columns, each opening on a numbered circle and separated by a fine
   vertical rule — the layout device from the reference the user supplied,
   kept in this page's graphite palette rather than the reference's ivory. */
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Three shared rows — circle, title, paragraph — so the columns line up even
     when one title wraps and another does not. `Personal Search, Screening &
     Introduction` runs to two lines while its neighbours run to one, which
     pushed its paragraph 25px below theirs and left the row visibly ragged.
     Same device as `.tiers` on the services page. */
  grid-template-rows: auto auto auto;
  gap: 0;
  position: relative;
}

.step {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 0 clamp(1.5rem, 3vw, 2.75rem);
  border-left: 1px solid rgba(251, 249, 246, 0.22);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.step:first-child { padding-left: 0; border-left: 0; }
.steps.is-drawn .step { opacity: 1; transform: translateY(0); }
.steps.is-drawn .step:nth-child(1) { transition-delay: 180ms; }
.steps.is-drawn .step:nth-child(2) { transition-delay: 340ms; }
.steps.is-drawn .step:nth-child(3) { transition-delay: 500ms; }

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(251, 249, 246, 0.45);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-soft-white);
}
.step h3 { color: var(--color-soft-white); margin-bottom: 0.7rem; font-size: 1.28rem; }
.step p { font-size: 0.95rem; color: rgba(244, 240, 233, 0.74); }

/* ── Application page ──────────────────────────────────────── */

/* The header now mirrors the footer: the same graphite-and-wine gradient, only
   inverted so the wine sits at the bottom edge where the ivory page begins.
   Dark header, light form, dark footer — the page is held between two bands. */
/* `position: static` means the base header's z-index does not apply, so on the
   two form pages the open menu covered the close control the same way. The
   header is given a stacking context of its own rather than a position, which
   would change where it sits. */
.site-header--solid {
  position: relative;
  z-index: 100;
  background:
    radial-gradient(72% 130% at 50% 100%, rgba(128, 0, 32, 0.26) 0%, rgba(128, 0, 32, 0) 62%),
    linear-gradient(0deg, var(--color-graphite-soft) 0%, #292831 55%, #2E2C36 100%);
}
.page-apply { background: var(--color-ivory-deep); }
.page-apply .apply-main { background: transparent; }

/* The warm taupe ground was tried on 2026-08-15 and rejected by the user — too
   heavy behind a form. The pages stay on the light ivory above. `--color-taupe`
   is kept defined but unused; do not reapply it as a page background. */

/* The form pages carry the whole supplied lockup as one image instead of the
   monogram-plus-wordmark pair, so the header needs a little more height for it
   to breathe. Everything else — edges, alignment, navigation — is unchanged. */
/* Smaller than the home page's lockup: on a pale page with a form as the only
   subject, a full-size mark reads as heavy. Monogram, then wordmark, one line. */
.site-header--solid .header-inner { min-height: 104px; }
.logo-inline { gap: 14px; }
.logo-inline img { width: 62px; height: auto; }
.logo-inline .logo-name { font-size: 20px; letter-spacing: 0.07em; }
.logo-inline .logo-sub { font-size: 8.5px; letter-spacing: 0.26em; }

/* Light ink on the dark band. The wordmark is white rather than champagne: with
   the form, the footer and the marks all monochrome, a single warm lockup read
   as a leftover rather than as the brand. Warmth on these pages now comes from
   the wine glow above the form and the burgundy button below it. */
.site-header--solid .logo-text { color: var(--color-soft-white); }
/* The overlay is the same surface as these pages, so its lockup is white too.
   The home page keeps the champagne mark in its own overlay. */
.page-dark .mobile-menu .logo-text { color: var(--color-soft-white); }
.site-header--solid .nav-desktop a { color: var(--color-soft-white); }
.site-header--solid .nav-desktop a::after { background: var(--color-champagne); }
.site-header--solid .nav-desktop a:hover,
.site-header--solid .nav-desktop a:focus-visible { color: var(--color-champagne); }
/* The one CTA. Graphite rather than burgundy on these pages, so it matches the
   submit button at the foot of the form. Needs the extra class to outrank the
   `.site-header--solid .nav-desktop a` rule above. */
/* Burgundy, the same button the home page carries. */
.site-header--solid .nav-desktop .nav-apply {
  background: var(--color-burgundy);
  color: var(--color-soft-white);
}

/* Messenger links in the header, filling the space the short navigation left.
   NOTE: `CLAUDE.md` bans these from the home page's hero header. They are here
   on the two form pages only, at the user's request on 2026-08-15. */
/* Beside the lockup, not after the menu: `margin-right: auto` keeps them
   grouped with the mark on the left and still pushes the navigation right. */
.header-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 0 26px;
  padding-left: 26px;
  border-left: 1px solid rgba(179, 154, 112, 0.28);
  list-style: none;
}
.header-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--color-champagne);
  opacity: 0.85;
  transition: opacity 200ms var(--ease), color 200ms var(--ease);
}
.header-socials a:hover, .header-socials a:focus-visible {
  opacity: 1;
  color: var(--color-soft-white);
}
.header-socials svg { width: 19px; height: 19px; display: block; }
.site-header--solid .nav-desktop .nav-apply:hover,
.site-header--solid .nav-desktop .nav-apply:focus-visible {
  background: var(--color-wine);
  color: var(--color-soft-white) !important;
}
.site-header--solid .nav-desktop .nav-apply::after { display: none; }
.site-header--solid .menu-bar { background: var(--color-soft-white); }
.apply-main {
  background: var(--color-ivory);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
/* Two columns rather than one long run down the page: the invitation sits in a
   quiet panel on the left, the fields to the right of it. The form stops being
   a full-width wall and the page reads at a glance. */
.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.apply-intro {
  background: rgba(41, 35, 38, 0.045);
  border-radius: 16px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  position: sticky;
  top: clamp(1.5rem, 4vw, 3rem);
}
.apply-intro .lead { font-size: 1.02rem; }

/* ── Application page: compact treatment ───────────────────────
   Everything below is scoped to `.page-application`, which only apply.html
   carries, so contact.html keeps the layout it already had. */

/* The page opened with a large gap under the header; the panel and the first
   field now start on the same line, close to it. */
.page-apply.page-application .apply-main { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.page-apply.page-application .apply-grid {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
}

/* Smaller panel, warm taupe rather than a grey wash. */
.page-apply.page-application .apply-intro {
  background: rgba(120, 96, 74, 0.07);
  border: 1px solid rgba(179, 154, 112, 0.28);
  border-radius: 10px;
  padding: clamp(1.35rem, 2vw, 1.85rem);
}
.page-apply.page-application .apply-intro h1 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); margin-bottom: 0.9rem; }
.page-apply.page-application .apply-intro .eyebrow { margin-bottom: 0.9rem; }
.page-apply.page-application .apply-intro p { font-size: 0.95rem; line-height: 1.62; }
.page-apply.page-application .apply-intro .lead { font-size: 1rem; }
.page-apply.page-application .apply-note {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(179, 154, 112, 0.35);
  font-size: 0.88rem;
  color: rgba(41, 35, 38, 0.72);
}

/* ── Application hero ──────────────────────────────────────────
   Photograph on the left, invitation and the one CTA on the right; the form
   follows underneath. Deliberately not the reference site's panel-and-form
   two-column skeleton. */
/* The portrait is a supporting note, not the subject of the page — the form is.
   Text on the left so its edge continues straight down into the first field
   below it, portrait on the right as a quiet anchor. Reversing this left a dead
   third of the page on the right, which is what made the layout feel stretched. */
/* Wine light over the right half. Hung on the band rather than on the small
   text box: sized as a share of the band it can never reach past the content
   edge, which is what made the first attempt widen the page to 1592px.
   Deliberately far larger than the words and blurred an order of magnitude
   harder than the first try, so it reads as light in the room, not as a stain.

   A white wash with wine ink was tried here on 2026-08-16, at the user's
   suggestion, and rejected on sight — the light had to be strong enough to lift
   #800020 to a readable contrast, and at that strength it stopped reading as
   light and started reading as a pale panel behind the words. The white hand on
   the wine light stands. */
.apply-hero { position: relative; }
.apply-hero::after {
  content: "";
  position: absolute;
  right: 0;
  /* Centred on the written line, not on the band. The line is aligned to the
     top of the row, so a wash centred on the band pooled below the words. */
  top: 28%;
  transform: translateY(-50%);
  width: 52%;
  height: 165%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(128, 0, 32, 0.30) 0%,
    rgba(128, 0, 32, 0.12) 44%,
    rgba(128, 0, 32, 0) 73%
  );
  filter: blur(110px);
  pointer-events: none;
}

/* The light rises with the writing instead of being there from the first frame.
   Present from the start it read as background texture; arriving with the words
   it reads as authored. Held slightly behind the pen so the glow lands as the
   second line finishes. */
@media (prefers-reduced-motion: no-preference) {
  .apply-hero::after {
    opacity: 0;
    animation: light-rises 2400ms ease-out both;
    animation-delay: 500ms;
  }
}
@keyframes light-rises { to { opacity: 1; } }

/* Content above the light. `::after` is generated as the last child, so without
   an explicit layer the wash paints over the words and tints them — the white
   line was coming out wine-coloured. */
.apply-hero > * { position: relative; z-index: 1; }


.apply-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* two equal halves */
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: center;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* A container, so the line on the board scales with the photograph rather than
   with the viewport — the two must never drift apart. */
.apply-hero-figure {
  position: relative;
  container-type: inline-size;
  margin: 0;
}
.apply-hero-figure img { width: 100%; height: auto; border-radius: 3px; display: block; }

/* Laid exactly over the empty board. Edges measured off the cropped photograph:
   the board spans 27.1–73.0% across and 46.2–96.8% down. Sized in `cqw`, so the
   line keeps its proportion on the card whatever width the figure is given. */
.apply-hero-line {
  position: absolute;
  left: 28.6%;
  right: 28.5%;
  top: 46.2%;
  bottom: 3.2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.28em;
  font-family: var(--font-display);
  font-size: 5.7cqw;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-soft-white);
  text-align: center;
}
/* Each line is a window; the text inside slides up into it. */
.apply-hero-mask { display: block; overflow: hidden; }
.apply-hero-mask > span {
  display: block;
  font-weight: 600;
  color: var(--color-soft-white);
}

/* Decoration was explored here on 2026-08-16 and dropped. Two converging arcs
   read as a stray flourish; two halves of an outline closing with a flash of
   light read as a dating-app badge however finely it was drawn. The written line
   carries this half of the band on its own. Do not add ornament back without a
   reason beyond filling the space — the brief rules out decorative clutter. */

/* ── The written line ──────────────────────────────────────────
   Where the placard photograph used to be. A hand, set against nothing — it
   reads as the applicant's own note rather than as a staged photograph.

   Aligned to the top of the row, not its middle: the jump link sits at the foot
   of the left column and drags the geometric centre down, which is what made
   the line look like it was sagging even when the two centres matched exactly. */
.apply-hand {
  align-self: start;
  margin: clamp(0.5rem, 2.5vw, 2.25rem) 0 0;
  position: relative;
  /* Caveat, as before, but at 400 instead of 600 — the weight was what made it
     look heavy, not the face. Monotype Corsiva was considered and rejected: it
     is a licensed Monotype face, absent from Google Fonts, so half the visitors
     would fall back to something else. */
  font-family: "Caveat", "Segoe Script", cursive;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.1;
  color: var(--color-soft-white);
  text-align: center;
}

.apply-hand-line {
  display: block;
  /* The phrase is two deliberate lines; it must never rewrap into three. */
  white-space: nowrap;
  /* `fit-content` with auto margins centres each line in the half AND keeps the
     box tight to the glyphs, so the reveal below starts at the first letter
     rather than somewhere out in the empty margin. */
  width: fit-content;
  margin-inline: auto;
  /* Written out from its left edge. `inset` is animated rather than a width, so
     the glyphs never reflow while the reveal runs. */
  clip-path: inset(0 100% -0.35em 0);
}

@media (prefers-reduced-motion: no-preference) {
  .apply-hand-line { animation: write 1250ms cubic-bezier(0.62, 0.02, 0.4, 1) both; }
  .apply-hand-line:nth-child(1) { animation-delay: 380ms; }
  .apply-hand-line:nth-child(2) { animation-delay: 1420ms; }
}
/* Not a constant sweep: the pen runs, checks at the comma of the phrase, then
   finishes. The uneven pacing is what makes it read as a hand. */
@keyframes write {
  0%   { clip-path: inset(0 100% -0.35em 0); }
  38%  { clip-path: inset(0 46% -0.35em 0); }
  52%  { clip-path: inset(0 38% -0.35em 0); }
  100% { clip-path: inset(0 -3% -0.35em 0); }
}

.apply-hero-text { max-width: 56ch; }
.apply-hero-text .lead { font-size: 1.02rem; line-height: 1.62; }
.apply-hero-text p { font-size: 0.95rem; line-height: 1.62; }

/* A line of type and an arrow, not a button. */
.apply-hero-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(1.5rem, 2.8vw, 2.1rem);
  min-height: 48px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  color: var(--color-cocoa);
  text-decoration: none;
}
.apply-hero-jump > span {
  border-bottom: 1px solid rgba(41, 35, 38, 0.28);
  padding-bottom: 2px;
  transition: border-color 220ms var(--ease);
}
.apply-hero-jump:hover > span,
.apply-hero-jump:focus-visible > span { border-bottom-color: var(--color-cocoa); }
.apply-hero-arrow { width: 27px; height: 27px; flex: none; }

/* Motion. The entrance plays once; the sheen then keeps the card alive without
   ever asking for attention — a slow highlight crossing the letters roughly
   every eight seconds, like light catching print. Every declaration lives
   inside `no-preference`, so a reader who asks for less motion gets plain ivory
   type with no gradient, no transform and no animation at all. */
@media (prefers-reduced-motion: no-preference) {
  .apply-hero-figure {
    animation: board-settle 900ms var(--ease) both;
  }

  /* The glow is a text-shadow, deliberately not a clipped gradient. A gradient
     fill can slide off the glyphs and leave letters unpainted — the line was
     losing its ending mid-sweep. A shadow only ever adds light, so the type
     stays solid ivory at every moment of the cycle. */
  .apply-hero-mask > span {
    transform: translateY(110%);
    animation: line-open 720ms var(--ease) both, glow 5.5s ease-in-out infinite;
  }
  .apply-hero-mask:nth-child(1) > span { animation-delay: 620ms, 1.9s; }
  .apply-hero-mask:nth-child(2) > span { animation-delay: 780ms, 2.2s; }

  /* The arrow breathes downward, pointing at the form. */
  .apply-hero-arrow { animation: arrow-nudge 2.4s var(--ease) infinite; }
}
@keyframes board-settle {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes line-open {
  to { transform: translateY(0); }
}
/* A warm halo that swells and fades. The letters keep their solid ivory fill
   throughout — light is only ever added, never taken away. */
@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 0 rgba(255, 236, 199, 0);
  }
  50% {
    text-shadow:
      0 0 12px rgba(255, 240, 214, 0.75),
      0 0 26px rgba(255, 222, 168, 0.4);
  }
}
@keyframes arrow-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* Tighter field rhythm: 22px between rows, 8px between label and control.
   Capped so two columns of inputs stay a comfortable width on a wide screen
   instead of stretching the full 1300px content measure. */
.page-apply.page-application .apply-form { margin-top: 0; gap: 22px 20px; }
/* Full content width on the dark pages, at the user's request. The rules run
   the whole measure, which suits the underline treatment; short fields are kept
   from becoming absurdly long by the third-width spans below. */
.page-application :is(#apply-form, #inquiry) { max-width: 760px; }
.page-dark.page-application :is(#apply-form, #inquiry) { max-width: none; }

/* Six columns rather than two. At full width a half-width field is 580px, which
   is absurd for a two-digit age; the short answers take a third each instead, so
   every rule is roughly as long as the answer it expects. */
.page-dark.page-application :is(#apply-form, #inquiry) { grid-template-columns: repeat(6, 1fr); }
.page-dark.page-application .field { grid-column: span 3; }
.page-dark.page-application .field-wide { grid-column: 1 / -1; }
.page-dark.page-application .field:has(#a-phone),
.page-dark.page-application .field:has(#a-age),
.page-dark.page-application .field:has(#a-location),
.page-dark.page-application .field:has(#a-occupation),
.page-dark.page-application .field:has(#a-status),
.page-dark.page-application .field:has(#a-children) { grid-column: span 2; }
.page-apply.page-application .field { gap: 8px; }

/* Graphite sentence-case labels. The burgundy uppercase treatment stays on
   contact.html; here burgundy is reserved for the eyebrow, focus and submit. */
.page-apply.page-application .field label {
  color: var(--color-cocoa);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.page-apply.page-application .field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
  min-height: 54px;
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  border-color: rgba(179, 154, 112, 0.5);
  font-size: 0.97rem;
}
.page-apply.page-application .field textarea { min-height: 108px; }
.page-apply.page-application .field-msg { font-size: 0.78rem; min-height: 0; }

.page-apply.page-application .upload { border-radius: 4px; border-color: rgba(179, 154, 112, 0.5); }
.page-apply.page-application .upload-face { padding: 1.15rem 1rem; gap: 0.35rem; }
.page-apply.page-application .upload-face svg { width: 21px; height: 21px; }
.page-apply.page-application .upload-text { font-size: 0.9rem; }
.page-apply.page-application .upload-hint { font-size: 0.76rem; }

.page-apply.page-application .consent label { font-size: 0.88rem; line-height: 1.55; }
.page-apply.page-application .final-micro { margin-top: 0.7rem; }

/* The submit action, without the burgundy fill. Graphite reads as considered
   rather than loud, and it is the only heavy element on an otherwise pale
   page. Burgundy is left to the eyebrow and the focus ring. */
.page-apply.page-application .apply-form .btn-primary {
  background: var(--color-burgundy);
  color: var(--color-soft-white);
  border-radius: 4px;
  min-height: 54px;
  padding: 0 2.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.page-apply.page-application .apply-form .btn-primary:hover {
  background: var(--color-wine);
  transform: translateY(-1px);
}

/* ── Contact: graphite from the header to the footer ───────────
   One continuous soft graphite — the same tone as the international-network
   block on the home page, not the near-black `--color-graphite`. The header
   loses its gradient band here: on a dark page it would only draw a seam. */
.page-apply.page-dark { background: var(--color-graphite-soft); }
.page-apply.page-dark .site-header--solid { background: none; }
.page-apply.page-dark .apply-main { background: transparent; }

.page-apply.page-dark :is(h1, h2, h3) { color: var(--color-soft-white); }
.page-apply.page-dark .apply-hero-text p { color: rgba(244, 240, 233, 0.78); }
.page-apply.page-dark .apply-hero-text .lead { color: rgba(244, 240, 233, 0.88); }
/* Burgundy reads 1.6:1 on graphite, so the eyebrow cannot keep the light theme's
   colour. Champagne was tried and then dropped with the rest of the gold: the
   page now carries its warmth in the wine glow above and the burgundy button
   below, and the label belongs with the other white type. Needs to outrank the
   paragraph colour above, which also matches this element. */
.page-apply.page-dark .apply-hero-text p.eyebrow-dark { color: var(--color-soft-white); }

/* `.eyebrow-dark` means burgundy, for an eyebrow standing on a light ground.
   Both legal pages carry it while sitting on graphite, which put burgundy on
   near-black at 1.44:1 — the heading above the effective date was barely
   visible. Champagne is what every other eyebrow on a dark ground already uses,
   and it measures 5.77:1 there. The selector matches the weight of the
   `.eyebrow-dark` rule it has to beat, which a bare class would not. */
.page-apply.page-dark .legal-wrap p.eyebrow-dark { color: var(--color-champagne); }

.page-apply.page-dark .apply-hero-jump { color: var(--color-soft-white); }
.page-apply.page-dark .apply-note { border-top-color: rgba(251, 249, 246, 0.2); }
.page-apply.page-dark .apply-hero-jump > span { border-bottom-color: rgba(251, 249, 246, 0.45); }
.page-apply.page-dark .apply-hero-jump:hover > span,
.page-apply.page-dark .apply-hero-jump:focus-visible > span { border-bottom-color: var(--color-soft-white); }

/* No boxes. A dark rectangle inside a dark page has no reason to exist, and a
   light one reads as a patch cut out of it — four of them in a row was what
   made this form feel bolted on. So the field is just a line: label above, the
   value on it, a champagne rule beneath. Nothing competes with the photograph.

   The rule is `--color-champagne` at low opacity, which is also the warm tone
   the photograph itself is built on (its dominant midtone measures #A89078). */
.page-apply.page-dark .field label {
  color: rgba(244, 240, 233, 0.72);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.page-apply.page-dark .field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(251, 249, 246, 0.36);
  border-radius: 0;
  padding: 0.55rem 0 0.6rem;
  min-height: 46px;
  font-size: 1.02rem;
  color: var(--color-soft-white);
  transition: border-color 220ms var(--ease);
}
.page-apply.page-dark .field :is(input, select, textarea)::placeholder { color: rgba(244, 240, 233, 0.34); }
.page-apply.page-dark .field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea):focus {
  border-bottom-color: var(--color-soft-white);
  outline: none;
}
/* The browser draws its own increment arrows on a number field, and paints them
   from the system palette — dark chevrons on a dark page. Age is typed, not
   nudged, so the spinner is removed on both engines. */
.page-apply.page-dark .field input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.page-apply.page-dark .field input[type="number"]::-webkit-outer-spin-button,
.page-apply.page-dark .field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* The outline ring would draw a rectangle again, so focus is shown by the rule
   thickening and brightening instead — still a visible, non-colour-only cue. */
.page-apply.page-dark .field :is(input, select, textarea):focus-visible {
  border-bottom-width: 2px;
  padding-bottom: calc(0.6rem - 1px);
}
.page-apply.page-dark .field textarea { min-height: 84px; resize: vertical; }

/* The upload panel was a soft-white block — the last light rectangle left on a
   dark page. Same language as the fields now: no fill, a champagne hairline. */
.page-apply.page-dark .upload {
  background: transparent;
  border: 1px dashed rgba(251, 249, 246, 0.34);
}
.page-apply.page-dark .upload:hover,
.page-apply.page-dark .upload:focus-within {
  background: rgba(251, 249, 246, 0.06);
  border-color: rgba(251, 249, 246, 0.7);
}
.page-apply.page-dark .upload:focus-within { outline-color: var(--color-soft-white); }
.page-apply.page-dark .upload-face svg { color: var(--color-soft-white); }
.page-apply.page-dark .upload-text { color: rgba(251, 249, 246, 0.9); }
.page-apply.page-dark .upload-hint { color: rgba(244, 240, 233, 0.5); }
.page-apply.page-dark .upload-preview { color: rgba(244, 240, 233, 0.7); }
.page-apply.page-dark .upload-preview img { border-color: rgba(251, 249, 246, 0.35); }
/* Several thumbnails now, so the row wraps rather than pushing the note out. */
.upload-preview { flex-wrap: wrap; }
.page-apply.page-dark .inquiry .field select {
  background-position: right 2px center;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5' fill='none' stroke='%23FBF9F6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page-apply.page-dark .field select option { color: var(--color-cocoa); }
.page-apply.page-dark :where(a, button, input, select, textarea):focus-visible { outline-color: var(--color-soft-white); }

.page-apply.page-dark .consent label { color: rgba(244, 240, 233, 0.82); }
/* The default control paints a solid white square — the one hard rectangle left
   on the page once the field boxes went. Drawn by hand instead, in the same
   champagne hairline as the field rules. */
.page-apply.page-dark .consent input[type="checkbox"] {
  appearance: none;
  border: 1px solid rgba(251, 249, 246, 0.55);
  border-radius: 2px;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.page-apply.page-dark .consent input[type="checkbox"]::before {
  content: "";
  width: 10px; height: 6px;
  border-left: 1.5px solid var(--color-graphite);
  border-bottom: 1.5px solid var(--color-graphite);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity 140ms var(--ease);
}
.page-apply.page-dark .consent input[type="checkbox"]:checked {
  background: var(--color-soft-white);
  border-color: var(--color-soft-white);
}
.page-apply.page-dark .consent input[type="checkbox"]:checked::before { opacity: 1; }
.page-apply.page-dark .consent input[type="checkbox"]:hover { border-color: var(--color-soft-white); }
.page-apply.page-dark .field-msg { color: var(--color-dusty-rose); }
.page-apply.page-dark .form-error {
  border-color: rgba(210, 183, 188, 0.5);
  background: rgba(128, 0, 32, 0.18);
  color: var(--color-ivory);
}
.page-apply.page-dark .form-error a { color: var(--color-dusty-rose); }

/* The site's burgundy button, exactly as the home page uses it on this same
   graphite. Its fill separates from the ground by only 1.6:1 by luminance, but
   that measure ignores hue, and the label on it reads 10.3:1. Consistency with
   the home page decides it. */
.page-apply.page-dark.page-application .apply-form .btn-primary {
  background: var(--color-burgundy);
  color: var(--color-soft-white);
  border: 0;
}
.page-apply.page-dark.page-application .apply-form .btn-primary:hover {
  background: var(--color-wine);
  color: var(--color-soft-white);
}

/* Contact's photograph is landscape, so it takes the wider column. apply.html
   keeps the narrow portrait column defined further up. */
.page-apply.page-contact .apply-hero {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
}
.page-apply.page-contact .apply-hero-figure { width: 100%; }

/* Footer: flat graphite, everything on it white. No wine glow, no champagne —
   the page is one tone from the header down. */
.page-apply.page-dark .site-footer {
  background: var(--color-graphite-soft);
  border-top: 1px solid rgba(251, 249, 246, 0.1);
}
/* The white artwork is the whole lockup, wordmark included, so it needs more
   width than the gold monogram to keep "Matchmaking Service" legible. The extra
   class outranks the compact-footer rule that sets 88px. */
.page-apply.page-dark.page-application .footer-brand img { width: 138px; }
.page-apply.page-dark .footer-nav {
  border-top-color: rgba(251, 249, 246, 0.12);
}
.page-apply.page-dark .footer-nav a { color: rgba(251, 249, 246, 0.8); }
.page-apply.page-dark .footer-nav a:hover { color: var(--color-soft-white); }
.page-apply.page-dark .footer-base { border-top-color: rgba(251, 249, 246, 0.12); }
.page-apply.page-dark .footer-base p { color: rgba(251, 249, 246, 0.55); }
.page-apply.page-dark .socials a { color: rgba(251, 249, 246, 0.75); }
.page-apply.page-dark .socials a:hover { color: var(--color-soft-white); }
.page-apply.page-dark .header-socials { border-left-color: rgba(251, 249, 246, 0.18); }
.page-apply.page-dark .header-socials a { color: rgba(251, 249, 246, 0.8); }
.page-apply.page-dark .header-socials a:hover { color: var(--color-soft-white); }

/* ── Legal pages ───────────────────────────────────────────────
   A single readable column. The supplied documents came with their own
   Georgia-on-white styling; only the presentation was replaced. */
.legal-wrap { max-width: 780px; }
.page-legal h1 { font-size: clamp(2.1rem, 3.4vw, 3rem); margin-bottom: 0.5rem; }
.legal-effective {
  font-size: 0.85rem;
  color: rgba(41, 35, 38, 0.6);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.legal-section { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.legal-section h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.25;
  margin-bottom: 0.6rem;
}
/* The numeral is decorative — the heading text alone carries the meaning. */
.legal-num {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-burgundy);
}
.legal-section p {
  font-size: 0.97rem;
  line-height: 1.72;
  color: rgba(41, 35, 38, 0.86);
  margin-bottom: 0.9rem;
}
.legal-section a, .legal-contact a { color: var(--color-burgundy); }
.legal-contact {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--color-border);
  font-size: 0.94rem;
}

/* Legal pages on graphite. The light theme set the numerals and the links in
   burgundy, which measures 1.6:1 here — unreadable, not merely quiet. Numerals
   go white at low opacity so they stay subordinate to the headings; links keep
   an underline so they are never signalled by colour alone. */
.page-apply.page-dark .legal-effective { color: rgba(244, 240, 233, 0.6); }
.page-apply.page-dark .legal-num { color: rgba(251, 249, 246, 0.55); }
.page-apply.page-dark .legal-section p { color: rgba(244, 240, 233, 0.82); }
.page-apply.page-dark :is(.legal-section, .legal-contact) a {
  color: var(--color-soft-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(251, 249, 246, 0.45);
}
.page-apply.page-dark :is(.legal-section, .legal-contact) a:hover {
  text-decoration-color: var(--color-soft-white);
}
.page-apply.page-dark .legal-contact {
  color: rgba(244, 240, 233, 0.82);
  border-top-color: rgba(251, 249, 246, 0.16);
}

/* ── Form pages: compact footer ────────────────────────────────
   The shared footer is built for the home page, where the top row holds three
   things. With only a mark and a menu it left an empty third column, which is
   what pushed the logo hard left and scattered the links. Here it collapses to
   one centred stack. */
/* The graphite-and-wine gradient from the home page, kept whole — flattening it
   to a single dark tone was my error and left the footer looking dead. Only the
   top padding is tightened, since this footer carries less than the home one. */
.page-apply.page-application .site-footer {
  padding-top: clamp(2.25rem, 4vw, 3rem);
}
/* Mark and menu share one line. The rule that used to sit between them is gone
   — with the two on the same row there is nothing to divide. */
.page-apply.page-application .footer-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.page-apply.page-application .footer-brand { flex: 0 0 auto; }
.page-apply.page-application .footer-brand img { width: 88px; }
.page-apply.page-application .footer-nav {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  flex: 1 1 auto;
}
.page-apply.page-application .footer-nav ul {
  justify-content: flex-end;
  gap: 0.2rem clamp(0.9rem, 2vw, 1.7rem);
}
.page-apply.page-application .footer-nav a { font-size: 0.82rem; min-height: 32px; }
.page-apply.page-application .footer-base {
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-block: 0.9rem 1.1rem;
  text-align: center;
}
.page-apply.page-application .socials { margin-right: 0; }
.apply-main h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 1.25rem;
}
.apply-main .lead { max-width: 62ch; color: rgba(41, 35, 38, 0.86); }

/* ── Form: shared layout ───────────────────────────────────────
   Structure only — sizing, rhythm and states. Colour is left to the page
   block below, so the two form pages stay a single set of components.
   Two columns on desktop; `.field-wide` spans both. Controls are 54px to
   match `.btn`, comfortably over the 44px touch minimum. */

.inquiry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.75rem;
  align-items: start;
}

.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field-wide { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

.field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
  width: 100%;
  min-height: 54px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-soft-white);
  color: var(--color-cocoa);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 200ms var(--ease);
}
.field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea):focus {
  outline-offset: 2px;
}
.field textarea { min-height: 148px; resize: vertical; }

/* The dropdown needs an arrow, and the native one cannot be styled to match.
   It is replaced with the same chevron the FAQ and membership toggles use.
   Selector carries `.inquiry` so it ties the shared rule above on specificity
   and wins on order — otherwise that rule's `padding` shorthand would put the
   text back under the arrow. */
.inquiry .field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5' fill='none' stroke='%23292326' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px 18px;
  padding-right: 2.75rem;
}

.field-msg {
  font-size: 0.82rem;
  line-height: 1.5;
  min-height: 1.2em;
}

/* Checkbox on its own baseline with the label, message underneath both. */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.35rem 0.75rem;
}
.consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0.28rem 0 0;
  accent-color: var(--color-burgundy);
  flex: none;
}
.consent label {
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
}
.consent .field-msg { grid-column: 2; }

.form-error {
  grid-column: 1 / -1;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-size: 0.94rem;
  line-height: 1.6;
}
.form-error ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.form-error li { margin-bottom: 0.3rem; }
.form-error li:last-child { margin-bottom: 0; }
.form-error code {
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: rgba(41, 35, 38, 0.07);
}

/* `.field` is a stretching column, so the submit button would otherwise run
   the full width of the form. */
.field > .btn { align-self: flex-start; }

/* ── Photo upload ──────────────────────────────────────────────
   The real input is stretched invisibly across the panel so the whole
   area is the control: one tap target, native file picker, keyboard and
   screen reader behaviour all unchanged. */
.upload {
  position: relative;
  border: 1px dashed var(--color-border);
  border-radius: 5px;
  background: var(--color-soft-white);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1.25rem;
  text-align: center;
  pointer-events: none;
}
.upload-face svg { width: 26px; height: 26px; color: var(--color-burgundy); }
.upload-text { font-size: 0.94rem; font-weight: 600; }
.upload-hint { font-size: 0.8rem; color: rgba(41, 35, 38, 0.6); }

.upload:hover, .upload:focus-within {
  border-color: var(--color-champagne);
  background: #fff;
}
/* The invisible input cannot show a focus ring, so the panel wears it. */
.upload:focus-within {
  outline: 2px solid var(--color-burgundy);
  outline-offset: 3px;
}

.upload-preview {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: rgba(41, 35, 38, 0.7);
}
.upload-preview img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

/* Honeypot: off-screen for people, still in the DOM for bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.final-micro {
  margin: 0.9rem 0 0;
  font-size: var(--font-small);
  letter-spacing: 0.06em;
}

/* The shared form styling is light-on-graphite. On this ivory page it has to
   be inverted, and the override needs to outrank `.field input[type="text"]`
   — hence the page class in front of every selector. */
.page-apply .apply-form { margin-top: clamp(2rem, 4vw, 3rem); }
.page-apply .field label { color: var(--color-burgundy); }
/* `background-color`, never the `background` shorthand: the shorthand would
   reset the select's chevron image along with the fill. */
.page-apply .field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
  background-color: var(--color-soft-white);
  border: 1px solid var(--color-border);
  color: var(--color-cocoa);
}
.page-apply .field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea):focus {
  border-color: var(--color-champagne);
}
.page-apply .field select option { color: var(--color-cocoa); }
.page-apply .consent label { color: rgba(41, 35, 38, 0.86); }
.page-apply .field-msg { color: var(--color-wine); }
.page-apply .form-error {
  border-color: var(--color-wine);
  background: rgba(128, 0, 32, 0.06);
  color: var(--color-cocoa);
}
.page-apply .form-error a { color: var(--color-burgundy); }
.page-apply .final-micro { color: rgba(41, 35, 38, 0.6); }

/* ── Memberships: editorial three-column, no pricing table ─── */

.memberships { background: var(--color-ivory); }
/* The old cap was 40ch, which sounds generous but is measured in the *body*
   font — about 390px — while the heading is set at ~65px display type. The
   three-word heading broke across three lines in it. Sized in rem instead, so
   the limit means the same thing as the type it is limiting. */
/* Same treatment as the services page: centred over the symmetric row. */
.memberships-head {
  max-width: 52rem;
  margin: 0 auto clamp(2.75rem, 5vw, 4.25rem);
  text-align: center;
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* Three shared rows — name, positioning line, and the foot that carries the
     toggle and its panel — so every card's parts line up across the row however
     long the copy above them runs. That is the user's instruction that the row
     aligns along its bottom, done properly.

     A flex column with `margin-top: auto` was tried first and broke the
     accordion: `.tier-details` became a flex item, and its `grid-template-rows:
     0fr → 1fr` has no definite height to resolve against there, so every panel
     opened to zero height. Subgrid leaves the panel in ordinary block flow.

     Without subgrid support the cards simply stop aligning; nothing breaks. */
  /* Four shared rows: name, price and duration, the one-line description, and
     the foot that carries the toggle and its panel. */
  grid-template-rows: auto auto auto auto;
  align-items: start;
}

.tier {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  padding: 0 clamp(1.25rem, 2.4vw, 2.25rem);
  border-left: 1px solid rgba(179, 154, 112, 0.42);
}
/* The single card stands alone, so it has no row to share. */
.tiers--single .tier { display: block; grid-row: auto; }
.tier:first-child { padding-left: 0; border-left: 0; }
.tier:last-child { padding-right: 0; }

.tier-name {
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  line-height: 1.15;
  color: var(--color-graphite);
  margin-bottom: 0.85rem;
}
.tier-line {
  font-size: 0.95rem;
  line-height: 1.68;
  color: rgba(41, 35, 38, 0.82);
  margin-bottom: 1.5rem;
}

.tier-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-burgundy);
  transition: color 200ms var(--ease);
}
.tier-toggle:hover { color: var(--color-wine); }
.tier-toggle .chev {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-left: auto;
  color: var(--color-champagne);
  transition: transform 240ms var(--ease);
}
.tier-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.tier-details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 330ms var(--ease), opacity 330ms var(--ease);
}
.tier-details.is-open { grid-template-rows: 1fr; opacity: 1; }
.tier-details-inner { overflow: hidden; }

.tier-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  margin: 1.4rem 0 1.6rem;
}
.tier-facts dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 0.2rem;
}
.tier-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--color-graphite);
}

.tier-details h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0 0 0.75rem;
}
.tier-details ul {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.tier-details li {
  position: relative;
  padding: 0 0 0.8rem 1.35rem;
  font-size: 0.92rem;
  line-height: 1.62;
  color: rgba(41, 35, 38, 0.86);
}
.tier-details li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 1px;
  background: var(--color-burgundy);
}
.tier-details > .tier-details-inner > p {
  font-size: 0.92rem;
  line-height: 1.66;
  color: rgba(41, 35, 38, 0.86);
  margin-bottom: 1.75rem;
}
.tier-cta { width: 100%; margin-bottom: 0.5rem; }

/* ── Network: text-led, no photo wall ──────────────────────── */

.network { background: var(--color-graphite-soft); color: var(--color-ivory); }
.network-grid {
  display: grid;
  /* Two invisible blocks, and the picture gets the slightly larger one.

     The photograph is 16:9 and the copy beside it runs to a button, so at equal
     halves the frame stood only 60% as tall as the text and the pair read as
     unequal. At 1.2fr it reaches 66% and the two blocks balance by eye. The text
     lands at roughly 52 characters a line — still a comfortable measure, and it
     holds the same height as before, so nothing below it moves.

     `align-items: center` is what actually centres the picture: its vertical
     midpoint sits on the text block's midpoint, while the two outer edges stay
     on the page grid — copy starting at the content edge, photograph ending on
     it, exactly like every other band. Do not inset the picture from that right
     edge to "centre" it: the alignment with the sections above and below is what
     makes it read as deliberate. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  /* Tighter than the row gap: the width it releases goes to the photograph. */
  column-gap: clamp(2.5rem, 4.5vw, 4rem);
  align-items: center;
}
.network-text { max-width: 58ch; }
.network h2 { color: var(--color-soft-white); margin-bottom: 1.5rem; }
.network p { color: rgba(244, 240, 233, 0.8); }
.network .btn { margin-top: 1.25rem; }

/* While the editorial image is not yet generated the section runs as one
   confident text column rather than a half-empty two-column grid. */
.network-single { grid-template-columns: minmax(0, 1fr); }
.network-single .network-text { max-width: 64ch; }

/* Contained, and it stays contained. A full bleed off the right edge was tried
   on 2026-08-16 and rejected on sight: the corner ran past the screen and the
   frame stopped reading as a photograph. The size comes from the equal grid
   split above, not from breaking the grid. */
.network-figure { margin: 0; overflow: hidden; }
.network-figure img {
  width: 100%;
  height: auto;
  /* 16:9, matching the photograph's own proportions, so nothing is cropped.
     At the earlier 3/2 the frame was narrower than the picture and `cover` ate
     the sides — which is where the street, the lamp and the parked car live. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 620ms var(--ease);
}
.network-figure:hover img { transform: scale(1.025); }

/* ── Services page ──────────────────────────────────────────
   The memberships moved off the home page on 2026-08-17 at the user's written
   instruction. The page keeps the locked design of the cards — editorial
   columns on warm ivory, graphite type, fine champagne rules, burgundy only on
   the CTA — and sits between the graphite header and the graphite footer, the
   same bookends the home page already has around its ivory bands. */
/* ── Services banner ────────────────────────────────────────
   The photograph runs from the top of the page to the first band, with the
   header and the headline over it.

   Two earlier attempts failed here, and the reason both times was the same: a
   contrast ratio averages luminance and is blind to pattern, so a frame can
   measure 10:1 and still swallow the words. What actually governs legibility is
   how busy the field is under the type. Measured on this picture, luminance
   spread in the navigation zone is 0.95 — very busy — against 0.24 under the
   headline.

   So the scrim is shaped rather than uniform: heavy across the top strip where
   the navigation sits, heavy at the bottom left under the headline, and nearly
   absent through the middle right, where the couple and the sunset are. Swap the
   picture and both zones must be measured again. */
.services-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Nearly the full screen, as specified, with a floor so a laptop in landscape
     still shows the band below it. */
  min-height: clamp(560px, 94vh, 940px);
  padding: var(--header-h) 0 0;
  overflow: hidden;
  background: var(--color-graphite-soft);
}
.services-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
}
/* Not an even wash. Heavy on the left under the words, a little along the foot,
   and gone by the time it reaches the couple — their faces keep the warm light
   the picture was chosen for. */
.services-banner-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(30, 29, 34, 0.72) 0%,
      rgba(30, 29, 34, 0.46) 10%,
      rgba(30, 29, 34, 0.10) 24%,
      rgba(30, 29, 34, 0) 36%) top / 100% 100% no-repeat,
    linear-gradient(to top,
      rgba(30, 29, 34, 0.58) 0%,
      rgba(30, 29, 34, 0.30) 18%,
      rgba(30, 29, 34, 0) 40%) bottom / 100% 100% no-repeat,
    linear-gradient(90deg,
      rgba(30, 29, 34, 0.70) 0%,
      rgba(30, 29, 34, 0.52) 26%,
      rgba(30, 29, 34, 0.20) 46%,
      rgba(30, 29, 34, 0) 62%);
}
/* 8% in from the left, 10-12% up from the foot. */
.services-banner-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  padding: 0 8vw 11vh;
}
.services-banner .services-banner-inner h1 {
  color: #F7F2EA;
  /* Back to the original setting on 2026-08-18: the user prefers it larger, and
     the first half breaking across two lines. `Finding the Right Person Starts
     With` needs about 1155px at this size and gets 1020, so it wraps — that wrap
     is wanted, not a fault. Do not "fix" it to two lines again. */
  font-size: clamp(54px, 5vw, 92px);
  font-weight: 500;
  font-style: normal;
  line-height: 0.98;
  letter-spacing: -0.01em;
  max-width: 1020px;
  margin: 0;
  text-align: left;
}
/* Its own line, so the sentence always breaks in two. */
.services-banner h1 .hero-em { display: block; }
.services-banner h1 em { font-style: italic; font-weight: 500; }
.services-banner-sub {
  /* Lifted from 0.85 to 0.92 — a touch brighter, because at 0.85 it sank into
     the scrim without ever being unreadable. Still a step under the headline, so
     the hierarchy holds. */
  color: rgba(247, 242, 234, 0.92);
  font-size: clamp(19px, 1.4vw, 21px);
  line-height: 1.55;
  max-width: 660px;
  margin: 30px 0 0;
}

/* One arrow, centred at the foot, no label beside it. */
.banner-arrow {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  border: 1px solid rgba(247, 242, 234, 0.55);
  border-radius: 50%;
  color: rgba(247, 242, 234, 0.9);
  transition: border-color 240ms var(--ease), color 240ms var(--ease);
}
.banner-arrow svg { width: 20px; height: 20px; display: block; }
.banner-arrow:hover, .banner-arrow:focus-visible {
  border-color: rgba(247, 242, 234, 0.9);
  color: #F7F2EA;
}
@media (prefers-reduced-motion: no-preference) {
  /* Two seconds, seven pixels, eased at both ends — a breath rather than a
     bounce. */
  .banner-arrow { animation: arrow-breathe 2s ease-in-out infinite; }
}
@keyframes arrow-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* White lockup and white icons over the banner. Champagne on a photograph reads
   as a stray warm accent, and every other dark-ground page already uses white.

   These were added once and then lost when a neighbouring block was rewritten
   wholesale — hence the belt and braces here: the colour is set on `.logo-text`
   and on both of its children, because `.logo-name` and `.logo-sub` carry their
   own colour and a rule on the parent never reaches them. */
.site-header--over .logo-text,
.site-header--over .logo-name,
.site-header--over .logo-sub { color: var(--color-soft-white); }
.site-header--over .header-socials a { color: rgba(251, 249, 246, 0.85); }
.site-header--over .header-socials a:hover,
.site-header--over .header-socials a:focus-visible { color: var(--color-soft-white); opacity: 1; }
.site-header--over .header-socials { border-left-color: rgba(251, 249, 246, 0.22); }

/* Over the banner, not on a band of its own.

   z-index 100, matching the base header, not the 20 it carried before: the menu
   overlay sits at 99, so at 20 the header went under it and took the close
   control with it. On a phone that left no visible way out of the menu — the
   pixels where the cross should be measured a flat 35-36 in brightness with no
   variation at all, against 35-249 on the home page, where the header stacks
   above. Escape still worked, which a phone does not have. */
.site-header--over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: none;
}

/* The page runs as alternating bands, like the home page, rather than one long
   ivory sheet. Light carries the welcome and the offer; the single introduction
   and the closing argument sit on graphite. The last band is graphite too, so it
   meets the graphite footer with no seam — the same principle the home page
   closes on. */
.services-main { background: var(--color-ivory); }
.services-band { padding-block: clamp(3rem, 6vw, 5.5rem); }
.services-band--light { background: var(--color-ivory); }
/* A warmer light than the offer band, so `How We See Matchmaking` reads as its
   own page rather than as a continuation of anything. */
.services-band--warm { background: var(--color-ivory-deep); }
.services-band--dark {
  background: var(--color-graphite-soft);
  color: var(--color-ivory);
}
/* Flows into the footer: no bottom padding of its own beyond the footer's top. */
.services-band--close { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

/* Ink on the graphite bands. Measured against #242329: headings 14.8:1, body
   copy 9.7:1, small print 5.5:1 — all well clear of the 4.5 threshold. */
.services-band--dark :is(h2, h3) { color: var(--color-soft-white); }
.services-band--dark p,
.services-band--dark li { color: rgba(244, 240, 233, 0.86); }
.services-band--dark .services-quote-body { color: var(--color-soft-white); }
.services-band--dark .services-legal h2.services-legal-h { color: var(--color-champagne); }
.services-band--dark .services-quote { border-left-color: rgba(179, 154, 112, 0.5); }
.services-band--dark .single-intro-meta { color: var(--color-soft-white); }
.services-band--dark .single-intro-list li::before { background: rgba(179, 154, 112, 0.85); }
/* The rules that separate blocks are drawn for ivory; on graphite they need to
   be lighter than the ground rather than darker. */

.services-band--dark .services-legal p { color: rgba(244, 240, 233, 0.62); }

/* A dark band opening a page section needs no rule above its first block — the
   colour change is the divider. */
.services-band--dark > .wrap > .single-intro { border-top: 0; padding-top: 0; margin-top: 0; }
.services-band--close > .wrap > .services-approach { border-top: 0; padding-top: 0; margin-top: 0; }
.services-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.services-main h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  margin: 0;
  color: var(--color-graphite);
}

/* Opens the page. Held to a readable measure and set slightly larger than body
   copy — it is the welcome, not a caption to the cards. Two columns are ready
   here for a photograph; with none present the text simply runs in the first. */
.services-welcome {
  max-width: 66ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* The welcome line became the page's h1 on 2026-08-17: two headings stacked at
   the top said the same thing twice, and `Private Matchmaking Services` moved
   down to label the cards it actually names. `.services-welcome-h` is kept
   defined in case the greeting is ever demoted again. */
.services-welcome-h {
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  line-height: 1.2;
  color: var(--color-graphite);
  margin: 0 0 0.85rem;
}

/* Anna's question, set on the user's instruction: the words that announce it in
   the body weight, the question itself in italic. Nothing is reworded — only the
   emphasis is added. The italic is the display face, which carries a true italic
   rather than a slanted roman, so a long passage of it stays readable. */
/* The one sentence in `How We See Matchmaking` that carries the argument, set
   apart from the run. Size and face do the work, not colour: colouring phrases
   was tried and rejected — the separation this block needed was a section of its
   own, not a highlighter. */
/* Prefixed with its section: `.services-approach p` is class+type and outranks
   a bare class, so the plain selector lost and the statement kept body size. */
.services-approach p.services-statement {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  line-height: 1.3;
  color: var(--color-graphite);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  max-width: 22ch;
}

/* The small print keeps a visible label now. Unlabelled, it read as one more
   paragraph of the argument above it rather than as the legal note it is. */
/* Same reason: `.services-band--dark :is(h2, h3)` paints headings white and
   outranks a bare class, so the label came out white instead of champagne. */
.services-legal h2.services-legal-h {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0 0 0.9rem;
}

/* The question, lifted out of the paragraph run and set as a statement. It
   carries the display italic; the line that introduces it stays in the body face
   and small. A hairline on the left marks the passage without boxing it. */
.services-quote {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid rgba(179, 154, 112, 0.55);
}
.services-quote-lead {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin: 0 0 0.85rem;
}
.services-quote-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.36;
  margin: 0;
  /* Even line lengths instead of a short tail on the last line. Hard <br> tags
     were the other way to do this and were rejected: they hold only at one
     width, and this quote is read at every width from 375 up. Browsers without
     it simply fall back to normal wrapping, which is what shipped before. */
  text-wrap: balance;
}
/* Space around the practical note so the three parts read as three, not as one
   block of text. */
/* ── One type scale for the whole page ─────────────────────
   The blocks were built one at a time and each ended up with its own sizes:
   section headings at 34 and 64, running prose at 16 and 20, small print at 14
   and 14.7. The rule for `How our support works` had been lost in a stylesheet
   clean-up, so its heading fell back to the global h2 and came out nearly as
   large as the page title.

   The ladder now, and nothing on this page should sit outside it:

     72   banner headline
     44   Private Matchmaking Services — the offer's own heading
     34   section headings — support, approach, one introduction
     29   package names
     20   lead paragraphs, the first line of a section
     17   running prose
     15   card lines and step descriptions
     14   small print                                             */
/* `How Our Support Works` runs wide, which is how it read before its rule was
   lost and what the user asked to have back. The measure is wider than the 60-75
   characters prose normally wants, so the type is held at 17px and the line
   height opened up to keep the return sweep findable.
   `How We See Matchmaking` keeps a measure because it sits beside a portrait. */
/* Two columns since 2026-08-18: the matchmaker's portrait on the left, the
   passage on the right. The user asked for a photograph here, and it does two
   things at once — it mirrors `How We See Matchmaking` below, where the picture
   sits on the right, so the two dark-to-warm bands alternate instead of
   repeating; and it takes the prose down to about 90 characters a line, which
   is the measure it wanted and which 1100px could not give.

   Four explicit rows, so the figure can span the whole column with `1 / -1`.
   The children of column two are exactly h2, p, blockquote, p — if a fifth is
   ever added, add a row here too. */
.services-support {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.services-support > :not(.services-support-figure) { grid-column: 2; }
.services-support-figure {
  grid-column: 1;
  grid-row: 1 / -1;
  margin: 0;
  align-self: center;
}
.services-support-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
/* The column now sets the measure, so the 1100px cap has nothing left to do. */
/* `pretty` because the first paragraph ended on a 10-character last line once
   the column narrowed. It only touches the last few lines, so the rest of the
   rag is unchanged; browsers without it wrap as before. */
.services-support > p { max-width: none; text-wrap: pretty; }

/* One column below the tablet break, and the photograph follows the text
   because that is its order in the markup. */
@media (max-width: 900px) {
  .services-support {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 0;
  }
  .services-support > :not(.services-support-figure) { grid-column: 1; }
  .services-support-figure {
    grid-row: auto;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    max-width: 460px;
  }
}
.services-approach { max-width: 62ch; }
.services-support > p { line-height: 1.75; }

.services-support h2,
.services-approach h2,
.single-intro h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.14;
  margin: 0 0 0.9rem;
}

.services-support > p,
.services-approach p:not(.services-statement) {
  font-size: 1.0625rem;
  line-height: 1.66;
}
.single-intro-lead,
.services-banner-sub { line-height: 1.6; }
.tier-line,
.single-step p { font-size: 0.95rem; }
/* Written out at full length on purpose. `.tier-details > .tier-details-inner >
   p` is two classes plus a type and beats anything shorter, so the notes inside
   a membership kept 0.92rem while the note under the cards took 0.875 and the
   one in the foot fell back to 16. Matching its shape is the only way to hold
   the whole ladder. */
.tier-details > .tier-details-inner > p.tier-note,
.single-intro-foot p.tier-note,
.services-note { font-size: 0.875rem; }

/* Heading over the row of cards. Sized under the h1 so the page reads greeting
   first, offer second. */
/* Centred, unlike every other section head on the site, and deliberately: the
   three cards below it are a symmetric row, and a left-aligned heading over a
   symmetric block leaves the eye hanging. The asymmetric bands elsewhere — text
   beside a photograph — keep their left-aligned heads. */
.services-offer-head {
  margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 52rem;
  text-align: center;
}
.services-offer-head h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  margin: 0.35rem 0 0;
  color: var(--color-graphite);
}
/* Set a step above the paragraphs that follow, so the eye enters here. The
   first setting landed at the same 20px as the body copy below it and the step
   did not exist; measured again, this holds a real gap at every width. */
/* Prefixed: `.services-welcome p` below is class+type and outranks a bare class,
   so the plain selector lost and the lead kept the body size. */
.services-welcome p.services-welcome-lead {
  font-size: clamp(1.2rem, 1.85vw, 1.5rem);
  line-height: 1.5;
  color: var(--color-graphite);
}
.services-welcome p {
  font-size: var(--font-body-large);
  line-height: 1.62;
  margin-bottom: 1.1rem;
}
.services-welcome p:last-child { margin-bottom: 0; }

/* It has a band of its own now, so it needs no rule above it — the change of
   ground is the divider. Anna's portrait sits beside the passage, which is her
   own view of the work; the text keeps its readable measure and the picture
   takes the rest. */
.services-approach-grid { display: grid; }
.services-approach-grid .services-approach { margin-inline: 0; }
.services-approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.services-approach { max-width: 62ch; }
.services-portrait { margin: 0; }
.services-portrait img { width: 100%; height: auto; display: block; border-radius: 2px; }

/* It sits after the note about one woman's decision — the same subject at a
   larger scale — rather than above the rule that opens the block, where it read
   as a preface to something it does not preface.

   Left-aligned, and the label runs in on the same line as the sentence rather
   than sitting centred above it: the paragraph directly above it is a left-set
   note of the same size, and two notes in a row cannot be aligned two ways. */
.services-note {
  max-width: none;
  /* One line-height, not a section gap: the note above it is the same size and
     the same subject, so 28px read as a break between two unrelated blocks. */
  margin: clamp(0.7rem, 1.2vw, 1rem) 0 0;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(26, 25, 28, 0.68);
}
.services-note-label {
  display: inline;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-champagne);
  /* A real word space follows in the markup; this only widens it, because a
     tracked-out uppercase label needs a little more air than one space gives. */
  margin-right: 0.3em;
}
.services-approach h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  margin-bottom: 0.9rem;
}
.services-approach p {
  font-size: var(--font-body-large);
  line-height: 1.62;
  margin-bottom: 1.1rem;
}
.services-approach p:last-child { margin-bottom: 0; }

/* Under the three memberships, on the same light ground, and deliberately not a
   box. It was a bordered card for one afternoon and read as dated — it was the
   only boxed element on a site built from hairlines and open space.

   The four items are a sequence, not a list of features, so they use the same
   numbered-step device as How It Works on the home page: a numeral, a name, a
   sentence, and a fine rule between the columns. Reusing the page's own language
   is what makes it look current, not a new ornament. */
.single-intro {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(179, 154, 112, 0.42);
}
/* Text and photograph side by side above the steps. The picture is the offer's
   third step made visible — a private video introduction — so it belongs to this
   block rather than decorating it. */
.single-intro-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.single-intro-head { max-width: 46ch; }
/* The photograph was pulled once as a duplicate of the call in `How We See
   Matchmaking` and restored the same day on the user's instruction: two calls on
   one page is a smaller problem than a step described only in words. The solo
   variant is kept in case the block is ever run without a picture. */
.single-intro-top--solo { grid-template-columns: minmax(0, 1fr); }
.single-intro-top--solo .single-intro-head { max-width: 62ch; }
.single-intro-figure { margin: 0; }
.single-intro-figure img { width: 100%; height: auto; display: block; border-radius: 2px; }
.single-intro h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  margin: 0.35rem 0 0.4rem;
}
.single-intro-meta {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--color-graphite);
  margin-bottom: 0.9rem;
}
.single-intro-lead { font-size: var(--font-body-large); line-height: 1.6; margin: 0; }

.single-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.single-step {
  padding: 0 clamp(1rem, 2.2vw, 2rem);
  border-left: 1px solid rgba(179, 154, 112, 0.42);
}
.single-step:first-child { padding-left: 0; border-left: 0; }
.single-step:last-child { padding-right: 0; }
.single-step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-champagne);
  margin-bottom: 0.9rem;
}
.single-step h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-graphite);
  margin: 0 0 0.5rem;
}
.single-step p { font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* Four columns hold to 900px, then two, then one. Left unguarded they stayed
   four at every width: on a 375px phone each step was 96px wide, the sentences
   broke to one or two words a line, and step 04 sat entirely outside the
   viewport — it was the reason the page scrolled sideways. The rule moves from
   between the columns to above each step once they stack, the same way `.steps`
   on the home page already behaves. */
/* Both two-column blocks on this page stack on a phone. Left alone they held
   their columns all the way down: at 375 the €300 block ran a 157px text column
   beside a 150px photograph, and `How We See Matchmaking` ran 189px of text
   beside a 114px portrait. Text first, picture under it, matching how
   `.stories-grid` already behaves on the home page. */
@media (max-width: 860px) {
  .single-intro-top,
  .services-approach-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 2.25rem);
  }
  .single-intro-head,
  .services-approach { max-width: none; }
  .single-intro-figure img,
  .services-portrait img { max-height: 62vh; object-fit: cover; }
}

@media (max-width: 900px) {
  .single-steps { grid-template-columns: repeat(2, 1fr); row-gap: clamp(1.75rem, 4vw, 2.5rem); }
  .single-step:nth-child(3) { padding-left: 0; border-left: 0; }
  .single-step:nth-child(2) { padding-right: 0; }
}
@media (max-width: 600px) {
  .single-steps { grid-template-columns: 1fr; row-gap: 0; }
  .single-step {
    padding: 1.5rem 0 0;
    border-left: 0;
    border-top: 1px solid rgba(179, 154, 112, 0.42);
  }
  .single-step:first-child { padding-top: 0; border-top: 0; }
  .single-step-num { margin-bottom: 0.5rem; }
}

/* Only the note lives here now — the button was removed on 2026-08-18: the
   block already sits under three memberships that each carry their own, and a
   fourth one made the cheapest option shout. */
/* No measure cap: the note is one sentence and reads better on a single line
   than broken into three inside a narrow column. */
.single-intro-foot { margin-top: clamp(2rem, 4vw, 3rem); }
.single-intro-foot .tier-note { margin-top: 0; }
/* The rules that separate blocks are drawn for ivory; on graphite they need to
   be lighter than the ground rather than darker. */
.services-band--dark :is(.single-intro, .services-approach, .services-legal) {
  border-top-color: rgba(179, 154, 112, 0.32);
}
.services-band--dark .services-legal p { color: rgba(244, 240, 233, 0.62); }

/* A dark band opening a page section needs no rule above its first block — the
   colour change is the divider. */
.services-band--dark > .wrap > .single-intro { border-top: 0; padding-top: 0; margin-top: 0; }
.services-band--close > .wrap > .services-approach { border-top: 0; padding-top: 0; margin-top: 0; }
.services-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.services-main h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  margin: 0;
  color: var(--color-graphite);
}

/* Opens the page. Held to a readable measure and set slightly larger than body
   copy — it is the welcome, not a caption to the cards. Two columns are ready
   here for a photograph; with none present the text simply runs in the first. */
.services-welcome {
  max-width: 66ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* The welcome line became the page's h1 on 2026-08-17: two headings stacked at
   the top said the same thing twice, and `Private Matchmaking Services` moved
   down to label the cards it actually names. `.services-welcome-h` is kept
   defined in case the greeting is ever demoted again. */
.services-welcome-h {
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  line-height: 1.2;
  color: var(--color-graphite);
  margin: 0 0 0.85rem;
}

/* Anna's question, set on the user's instruction: the words that announce it in
   the body weight, the question itself in italic. Nothing is reworded — only the
   emphasis is added. The italic is the display face, which carries a true italic
   rather than a slanted roman, so a long passage of it stays readable. */
.services-support strong { font-weight: 600; }
.services-support em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08em;
  line-height: 1.5;
}

/* ── Love stories ──────────────────────────────────────────── */

.stories { background: var(--color-ivory); }

.stories-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.stories-text { max-width: 52ch; }
.stories h2 { margin-bottom: 1.4rem; }
.stories-text p { color: rgba(41, 35, 38, 0.86); }
.stories-close {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.4;
  color: var(--color-graphite);
  margin-top: 1.5rem;
}
.stories-cta {
  margin-top: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.86rem;
}

/* The photograph stands on its own: whole frame, native proportions, nothing
   laid over it and nothing behind it. */
.stories-photo {
  width: 100%;
  height: auto;
}

/* The staggered photograph series was removed on the user's instruction, and
   its layout rules went with it. Restoring the markup means restoring the
   `.story-series` / `.story-item` / `.story-note` block from version control. */

/* ── FAQ ───────────────────────────────────────────────────── */

.faq {
  background: var(--color-soft-white);
  padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
}
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.faq-head { position: sticky; top: calc(var(--header-h) + 2.5rem); }

.faq-item { border-top: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: 1px solid var(--color-border); }
.faq-item h3 { margin: 0; font-size: inherit; font-family: inherit; }

.faq-q {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.3;
  color: var(--color-graphite);
  transition: color 200ms var(--ease);
}
.faq-q:hover { color: var(--color-burgundy); }
.chev {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  color: var(--color-champagne);
  transition: transform 240ms var(--ease);
}
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 330ms var(--ease), opacity 330ms var(--ease);
}
.faq-a.is-open { grid-template-rows: 1fr; opacity: 1; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
  padding-bottom: 1.6rem;
  max-width: 62ch;
  color: rgba(41, 35, 38, 0.85);
}

/* ── Final CTA + form ──────────────────────────────────────── */

/* ── Combined CTA + footer ─────────────────────────────────── */

/* One centred column of decreasing weight: message, mark, contact, navigation.
   No side columns — the third column of links was doing nothing the row of
   links below the logo could not do better. */
.site-footer {
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(128, 0, 32, 0.26) 0%, rgba(128, 0, 32, 0) 62%),
    linear-gradient(180deg, var(--color-graphite-soft) 0%, #292831 55%, #2E2C36 100%);
  color: var(--color-ivory);
  padding-top: clamp(3.25rem, 6vw, 5rem);
  text-align: center;
}

/* Top row: mark on the left, the message centred between them, contact on the
   right. The message keeps a narrow measure so it reads as a statement rather
   than a paragraph stretched across the page. */
.footer-top {
  display: grid;
  /* equal side columns, so the centred message sits on the page's true axis */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.footer-message { max-width: 560px; margin-inline: auto; }
.footer-message h2 {
  color: var(--color-soft-white);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.08;
  margin-bottom: 1.1rem;
  max-width: 18ch;
  margin-inline: auto;
}
.footer-message p { font-size: 0.96rem; color: rgba(244, 240, 233, 0.78); }

.footer-brand { text-align: left; }
.footer-brand img { width: 176px; height: auto; }

/* On the form pages the mark stands alone, with no tagline beside it, so it
   centres in its column rather than hugging the left edge. */
.footer-brand--centred { text-align: center; }
.footer-brand--centred img { margin-inline: auto; }

/* contact, in one horizontal line under the mark */
/* contact hugs the right edge, mirroring the mark on the left */
.footer-side { text-align: left; display: flex; justify-content: flex-end; }
.footer-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-contacts a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon name" "icon desc";
  column-gap: 0.6rem;
  text-align: left;
  color: rgba(244, 240, 233, 0.86);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.footer-contacts a:hover { color: var(--color-champagne); }
.contact-icon { grid-area: icon; align-self: center; width: 20px; height: 20px; }
.contact-icon svg { width: 20px; height: 20px; display: block; }
.contact-name { grid-area: name; font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.contact-desc {
  grid-area: desc;
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(244, 240, 233, 0.58);
  white-space: nowrap;
}
.footer-contacts a[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.footer-contacts a[aria-disabled="true"]:hover { color: rgba(244, 240, 233, 0.86); }

/* navigation as a single quiet line, not a column */
.footer-nav {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(251, 249, 246, 0.14);
}
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(1.25rem, 2.6vw, 2.25rem);
  list-style: none;
  margin: 0; padding: 0;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 0.86rem;
  text-decoration: none;
  color: rgba(244, 240, 233, 0.75);
  transition: color 200ms var(--ease);
}
.footer-nav a:hover { color: var(--color-champagne); }

/* bottom row */
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid rgba(251, 249, 246, 0.14);
  padding-block: 1rem 1.25rem;
  text-align: left;
}
.footer-base p { font-size: 0.78rem; color: rgba(244, 240, 233, 0.5); margin: 0; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  list-style: none;
  margin: 0; padding: 0;
}
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 0.78rem;
  text-decoration: none;
  color: rgba(244, 240, 233, 0.5);
  transition: color 200ms var(--ease);
}
.footer-legal a:hover { color: var(--color-champagne); }

/* ── Social icons ──────────────────────────────────────────── */

.socials {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-right: -0.6rem;   /* optically align the last icon to the edge */
}
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--color-soft-white);
  opacity: 0.78;
  transition: opacity 200ms var(--ease), color 200ms var(--ease);
}
.socials a:hover,
.socials a:focus-visible { opacity: 1; color: var(--color-champagne); }
.socials svg {
  width: 20px; height: 20px;
  display: block;
  transition: transform 240ms var(--ease);
}
.socials a:not([aria-disabled]):hover svg,
.socials a:not([aria-disabled]):focus-visible svg { transform: translateY(-2px) scale(1.09); }

/* No verified destination yet: visible, but deliberately not clickable. */
.socials a[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.socials a[aria-disabled="true"]:hover { opacity: 0.3; color: var(--color-soft-white); }

/* ── Motion ────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-hero { opacity: 0; transform: translateY(16px); }
.hero.is-ready .reveal-hero {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.hero.is-ready [data-delay="0"] { transition-delay: 60ms; }
.hero.is-ready [data-delay="1"] { transition-delay: 170ms; }
.hero.is-ready [data-delay="2"] { transition-delay: 280ms; }
.hero.is-ready [data-delay="3"] { transition-delay: 390ms; }
.hero.is-ready [data-delay="4"] { transition-delay: 490ms; }

/* ── Responsive ────────────────────────────────────────────── */

/* The navigation never wraps and never shrinks below 15px to survive. Once the
   full set stops sitting comfortably beside the lockup, the compact Menu
   control takes over instead.

   The threshold was 1400px until 2026-09-02, which was far too early: measured,
   the set needs 1048px of the 1300px content strip, and it survives down to
   about 1180 before the lockup and the links collide. At 1400 every 1280 and
   1366 laptop — most laptops — was shown a burger while the real menu would have
   fitted with 38px to spare. 1200 keeps a margin over the 1152 failure point and
   the type stays at 16px throughout. */
@media (max-width: 1200px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; margin-left: auto; }
}

@media (max-width: 1080px) {
  .positioning-grid,
  .founder-grid,
  .network-grid,
  .stories-grid,
  .process-head,
  .faq-grid { grid-template-columns: 1fr; }


  .process-intro-text { max-width: none; }

  /* image below the text */
  .stories-text { max-width: none; order: 1; }
  .stories-photo { order: 2; }

  .positioning-head, .faq-head { position: static; }
  .founder-grid { gap: 2.5rem; }
  .founder-portrait { max-width: 460px; }

  .tiers { grid-template-columns: 1fr; }
  .tier {
    padding: 1.75rem 0 0;
    border-left: 0;
    border-top: 1px solid rgba(179, 154, 112, 0.42);
  }
  .tier:first-child { padding-top: 0; border-top: 0; }
  .tier-line { max-width: 62ch; }
  .tier-details-inner { max-width: 62ch; }
  .tier-cta { width: auto; }

  /* Stacked: the rule moves from between the columns to above each step, so
     the three stay visibly separated once they sit one under another. */
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .step {
    padding: 2.5rem 0 0;
    border-left: 0;
    border-top: 1px solid rgba(251, 249, 246, 0.22);
  }
  .step:first-child { padding-top: 0; border-top: 0; }
  .step-num { width: 54px; height: 54px; font-size: 1.4rem; margin-bottom: 1.25rem; }
}

/* The lockup, the three social icons and the menu control together need about
   390px of a 335px line at 375, and it was the menu control that got pushed off
   the right edge — on a phone the menu was unreachable. The icons go; nothing is
   lost, because the menu overlay carries Instagram, WhatsApp and Telegram, and
   so does the footer. They return above 700px, where they fit. */
@media (max-width: 700px) {
  .header-socials { display: none; }

  /* The champagne rule behind the portrait needs 14px of left padding to show,
     and on a phone that padding is what pushes the photograph off centre: 34px
     of margin on the left against 20px on the right. At 460px the offset reads
     as an editorial device; at 335px it reads as a mistake. The rule goes and
     the portrait lines up with every other image on the page. */
  .founder-portrait { padding: 0; }
  .founder-portrait::before { display: none; }

  /* 44px targets on a touch screen. The footer links stood at 32-36px and the
     header lockup at 26px; the footer set stacks in a single centred column
     there, so the taller rows cost nothing and stop the mis-taps. Each link
     fills its row, otherwise a short label like `FAQ` leaves a 25px-wide target
     however tall the row is.

     The compact footer's own rule is `.page-apply.page-application .footer-nav a`
     and outranks a bare `.footer-nav a`, media query or not — so it is repeated
     here at matching weight rather than left to lose the cascade. */
  /* Two columns, not one. Seven links stacked singly ran the footer to 1140px on
     an 812px screen — nearly a screen and a half, and the menu alone was 333px
     of it. Paired, the same seven fit four rows and keep the 44px touch height. */
  .footer-nav ul,
  .page-apply.page-application .footer-nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0;
    align-items: stretch;
  }
  .footer-nav li { width: 100%; }
  .footer-nav a,
  .footer-legal a,
  .page-apply.page-application .footer-nav a {
    min-height: 44px;
    display: flex;
    justify-content: center;
  }
  .logo { min-height: 44px; }
}

@media (max-width: 860px) {
  :root { --header-h: 76px; }

  .logo { gap: 12px; }
  .logo img { width: 62px; }
  .site-header--solid .header-inner { min-height: 84px; }
  .logo-inline img { width: 46px; }
  .logo-inline .logo-name { font-size: 16px; }
  .logo-inline .logo-sub { font-size: 7px; letter-spacing: 0.2em; }
  .logo-text { gap: 3px; }
  .logo-name { font-size: 17px; letter-spacing: 0.05em; }
  .logo-sub { font-size: 8px; letter-spacing: 0.28em; }

  /* Stacked footer: mark above a centred menu, since one row will not fit. */
  .page-apply.page-application .footer-top { flex-direction: column; gap: 1.5rem; }
  .page-apply.page-application .footer-nav ul { justify-content: center; }
  .menu-toggle { margin-left: auto; }

  /* Smaller display type so the whole hero block, the CTA and the microcopy
     clear the fold on 375 × 812 and 375 × 667. */
  :root { --font-h1: clamp(2.05rem, 8vw, 2.75rem); }

  .hero { min-height: 96svh; align-items: flex-end; }
  /* Keep the couple's faces in the upper third, clear of the copy below.
     No extra zoom on mobile — the approved crop stands as it is. */
  .hero-video, .hero-media::before {
    object-position: 66% 16%;
    transform: none;
  }
  .hero-scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(36, 35, 41, 0.48) 0%,
        rgba(36, 35, 41, 0.20) 55%,
        rgba(36, 35, 41, 0) 100%) top / 100% 170px no-repeat,
      linear-gradient(180deg, rgba(36,35,41,0.30) 0%, rgba(36,35,41,0.06) 26%, rgba(36,35,41,0.00) 40%),
      linear-gradient(0deg, rgba(36,35,41,0.96) 0%, rgba(36,35,41,0.90) 34%, rgba(36,35,41,0.55) 60%, rgba(36,35,41,0.00) 88%);
  }
  .hero-content { padding-bottom: 0.5rem; }
  .hero-content > * { max-width: none; }
  .hero .eyebrow { font-size: 0.68rem; letter-spacing: 0.13em; margin-bottom: 0.85rem; }
  .hero h1 { margin-bottom: 0.95rem; }
  .hero-body { font-size: 1rem; line-height: 1.56; max-width: none; }
  .hero-body p { margin-bottom: 0.65em; }
  .hero-actions { margin-top: 1.35rem; gap: 0.85rem 1.5rem; }
  .hero-actions .btn { width: 100%; }
  .hero-micro { margin-top: 0.8rem; }

  .apply-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Media queries add no specificity, so the application page's two-column
     rule has to be answered at its own weight or it survives into mobile. */
  .page-apply.page-application .apply-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  /* Portrait leads on a phone, then the invitation and the button.
     An explicit width, not `max-width` with auto margins: the figure carries
     `container-type: inline-size`, and a shrink-to-fit container measured under
     inline-size containment collapses to zero. */
  .apply-hero { grid-template-columns: 1fr; gap: 1.75rem; }
  /* In one column the wash sits behind far less text, so it is widened and
     weakened — at the desktop setting it reads as a stain on a phone. */
  .apply-hero::after { width: 82%; height: 120%; top: 50%; opacity: 0.55; filter: blur(80px); }
  .page-apply.page-contact .apply-hero { grid-template-columns: 1fr; }
  .page-apply.page-contact .apply-hero-figure { width: 100%; max-width: none; }
  .apply-hero-figure {
    order: -1;
    width: min(300px, 100%);
    justify-self: center;
  }
  .apply-hero-jump { margin-top: 1.1rem; }
  .apply-intro { position: static; }
  .inquiry { grid-template-columns: 1fr; gap: 1.35rem; }
  .page-dark.page-application :is(#apply-form, #inquiry) { grid-template-columns: 1fr; }
  .page-dark.page-application .field,
  .page-dark.page-application .field:has(#a-phone),
  .page-dark.page-application .field:has(#a-age),
  .page-dark.page-application .field:has(#a-location),
  .page-dark.page-application .field:has(#a-occupation),
  .page-dark.page-application .field:has(#a-status),
  .page-dark.page-application .field:has(#a-children) { grid-column: 1 / -1; }
  .field > .btn { align-self: stretch; }
  .tier-cta { width: 100%; }

  .footer-top { grid-template-columns: 1fr; gap: 2.25rem; justify-items: center; }
  .footer-brand, .footer-side { text-align: center; }
  .footer-side { justify-content: center; }
  /* Everything in the mobile footer sits on one centre line. Stretching these
     to a shared width would align the icons but leave the shorter labels
     hanging left of that line, out of step with the centred nav below — so
     each row is centred whole instead, icon and label together. */
  .footer-contacts { align-items: center; }
  .footer-contacts a {
    grid-template-columns: auto auto;
    justify-content: center;
    text-align: center;
    /* two lines of type came to 35px; a thumb needs 44 */
    min-height: 44px;
    align-content: center;
  }
  .footer-nav ul { flex-direction: column; gap: 0; }
  .footer-base { justify-content: center; text-align: center; }
  .footer-legal { justify-content: center; }
  .socials { margin-right: 0; }
}

/* 375 × 667 is the tightest supported viewport: shave the last few pixels. */
@media (max-width: 420px) and (max-height: 700px) {
  .hero-body { font-size: 0.97rem; line-height: 1.5; }
  .hero-body p { margin-bottom: 0.55em; }
  .hero h1 { margin-bottom: 0.75rem; }
  .hero-actions { margin-top: 1.1rem; }
  .hero-micro { margin-top: 0.65rem; }
}

/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .reveal, .reveal-hero, .step { opacity: 1 !important; transform: none !important; }
  .mobile-menu :is(.menu-nav li, .menu-cta, .menu-foot) {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-video { display: none; }
  .faq-a { transition: none; }
  .btn-primary:hover, .founder-portrait:hover img { transform: none; }
  .socials a:hover svg { transform: none; }
  .tier-details { transition: none; }
  .floating-menu { transition: none; }
}

/* ── Calendly badge ────────────────────────────────────────── */
/* The widget injects its own markup; keep it inside the design system. */
.calendly-badge-widget .calendly-badge-content {
  font-family: var(--font-body) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: 5px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
}