/* ==========================================================================
   Ridgeline Orthopedics — Main stylesheet
   Draws with hairlines, not boxes and shadows.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--lead);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
/* WCAG 2.1 SC 1.4.11 wants >=3:1 for the focus indicator. Sky on paper is only
   2.14:1, so light rooms take navy (11.86:1) and dark rooms take sky (7.61:1). */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 1px; }
.room-deep :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.band :focus-visible,
.mobile-nav :focus-visible,
.site-header:not(.is-solid) :focus-visible { outline-color: var(--sky); }

.skip-link {
  position: absolute; left: var(--s2); top: -100vh; z-index: 200;
  background: var(--navy); color: #fff; padding: var(--s2) var(--s3);
  border-radius: var(--radius); text-decoration: none;
  font-family: var(--font-display); font-size: var(--label);
  text-transform: uppercase; letter-spacing: var(--track-label);
}
.skip-link:focus { top: var(--s2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout --------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }

/* Colour rooms — the page is a sequence of these */
.room-paper { background: var(--paper); color: var(--fg); }
.room-sky   { background: var(--sky-tint); color: var(--fg); }
/* The footer is a dark surface too — it must inherit every on-dark rule or its
   body copy renders navy-on-navy. */
.room-deep  { background: var(--deep); color: var(--on-deep); }
.room-deep h1, .room-deep h2, .room-deep h3, .room-deep h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: var(--on-deep); }
.room-deep .lede, .room-deep p,
.site-footer .lede, .site-footer p { color: var(--on-deep-muted); }
.room-deep .label { color: var(--sky); }
.room-deep .rule, .room-deep hr { border-color: var(--rule-deep); }
.site-footer a { color: inherit; }

/* --- Type ----------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; }

/* THE display treatment: light, huge, uppercase, tight tracking, sub-1 leading */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: var(--leading-display);
  font-size: var(--d2);
  color: var(--fg);
  text-wrap: balance;
}
.display--hero { font-size: var(--d1); }
.display--sm   { font-size: var(--d3); letter-spacing: var(--track-d3); line-height: 1.02; }

/* ---- SIGNATURE MOVE 1: The Ridge Stagger --------------------------------
   Each line is individually indented so the block traces a ridge profile:
   rise, peak, fall. Driven by --step per line, collapsing to 0 on mobile. */
.ridge { display: block; }
.ridge > span {
  display: block;
  margin-left: calc(var(--step, 0) * clamp(0px, 3.2vw, 3.5rem));
}
/* The stagger is the signature move; switching it off below 640px removed it
   for most traffic. Reduce the amplitude instead of deleting it. */
@media (max-width: 40rem) {
  .ridge > span { margin-left: calc(var(--step, 0) * 0.42rem); }
}

/* The mountain mark as terminal glyph, where the reference used a circled ®.
   Sized by HEIGHT relative to the type — the mark is 2.8:1, so width-based
   sizing left it 13px tall and it read as a smudge rather than a ridge. */
.ridge-mark {
  display: inline-block;
  height: 0.44em;
  width: auto;
  vertical-align: 0.06em;
  margin-left: 0.28em;
  color: var(--sage);
}
.room-deep .ridge-mark { color: var(--sky); }
.hero .ridge-mark, .band .ridge-mark { color: rgba(255, 255, 255, 0.92); }

/* ---- Micro-label: Cairo at the brand guide's own .2em tracking ----------- */
.label {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--sage-ink);
  line-height: 1.4;
}
.label--ink { color: var(--fg-muted); }

/* Elevation numerals — survey markers up a slope */
.num {
  font-family: var(--font-display);
  font-size: var(--label);
  letter-spacing: var(--track-label);
  color: var(--sage-ink);
  font-variant-numeric: tabular-nums;
}
/* On dark rooms the darkened sage inverts to a failure (3.50:1), so numerals
   and labels both take sky there, which measures 7.61:1. */
.room-deep .num, .site-footer .num { color: var(--sky); }

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 34em;
}
.prose { max-width: var(--maxw-text); color: var(--fg-muted); }
.prose > * + * { margin-top: var(--s3); }
.prose strong { color: var(--fg); font-weight: 400; }

/* --- Buttons: 2px radius hairline, mono-ish label, trailing arrow --------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.85em;
  padding: 0.9em 1.35em;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;            /* touch target — 0.9em on an 11px font gave 39px */
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn .arw { transition: transform var(--dur-fast) var(--ease); }
.btn:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.btn:hover .arw { transform: translateX(4px); }

.btn--solid { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.btn--solid:hover { background: var(--deep); border-color: var(--deep); }

.room-deep .btn { border-color: var(--rule-deep-strong); color: var(--on-deep); }
.room-deep .btn:hover { background: var(--on-deep); color: var(--deep); border-color: var(--on-deep); }
.room-deep .btn--solid { background: var(--sky); color: var(--deep); border-color: var(--sky); }
.room-deep .btn--solid:hover { background: var(--on-deep); border-color: var(--on-deep); }

/* Hairline chip — the reference's "7 MIN" device */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.45em 0.75em;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  white-space: nowrap;
}
.room-deep .chip { border-color: var(--rule-deep-strong); }

/* ---- SIGNATURE MOVE 2: The Contour Rule ---------------------------------
   Section dividers break into a small ridge silhouette instead of running flat. */
.contour { display: flex; align-items: center; gap: 0; color: var(--rule); }
.contour::before, .contour::after {
  content: ''; flex: 1; height: var(--hair); background: currentColor;
}
.contour svg { width: 66px; height: 18px; flex: none; color: var(--sage-ink); }
.room-deep .contour { color: var(--rule-deep); }
.room-deep .contour svg { color: var(--sky); }

/* --- Header --------------------------------------------------------------- */
/* The header is ALWAYS fixed — never in normal flow. It previously toggled
   absolute -> sticky, which inserted its own height (93px) into the document
   the instant .is-solid was added, shifting all content down. That shift pushed
   the hero back across the IntersectionObserver threshold, which removed
   .is-solid, which shifted content up... a layout feedback loop = the scroll
   jump. Fixed reserves no space, so toggling .is-solid now changes only paint,
   never layout. Pages without a full-bleed hero add --nav-h padding to <main>. */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  padding-block: var(--s3);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.site-header.is-solid {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--hair) solid var(--rule);
}
/* Clears the fixed header on every page that doesn't open with the hero. */
.has-nav-offset { padding-top: var(--nav-h); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.brand__mark { width: 44px; color: var(--sage); flex: none; }
.brand__type { display: grid; gap: 1px; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.brand__sub {
  font-family: var(--font-display); font-size: 0.5625rem;
  letter-spacing: var(--track-label); color: var(--sage);
}
/* Over the hero photo the lockup goes light */
.site-header:not(.is-solid) .brand { color: #fff; }
.site-header:not(.is-solid) .brand__mark,
.site-header:not(.is-solid) .brand__sub { color: rgba(255,255,255,0.82); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  font-family: var(--font-display); font-size: var(--label);
  text-transform: uppercase; letter-spacing: var(--track-label);
  text-decoration: none; padding-block: 0.4rem; position: relative;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--hair); background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header:not(.is-solid) .nav a { color: #fff; }
/* The link group is its own flex row — without this the anchors butt together
   and read as one run-on string ("SPECIALTIESSERVICESABOUT"). */
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.75rem); }
.nav__cta { margin-left: 0.5rem; }
@media (max-width: 60rem) { .nav__links { display: none; } }

.nav-toggle {
  display: none; background: none; border: var(--hair) solid currentColor;
  border-radius: var(--radius); padding: 0.7em 0.95em; cursor: pointer;
  font-family: var(--font-display); font-size: var(--label);
  text-transform: uppercase; letter-spacing: var(--track-label);
  min-height: 44px; /* touch target */
}
/* Over the hero photo the toggle must go light with the rest of the header */
.site-header:not(.is-solid) .nav-toggle { color: #fff; border-color: rgba(255,255,255,0.6); }
@media (max-width: 60rem) { .nav-toggle { display: inline-block; } .nav__cta { display: none; } }

/* Fixed and pinned below the fixed header, so it no longer hides behind it and
   opening it causes no layout shift. Scrolls internally if the list is tall. */
.mobile-nav {
  display: none; position: fixed; inset-inline: 0; inset-block-start: var(--nav-h);
  z-index: 55; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  background: var(--deep); color: var(--on-deep); padding: var(--s4) 0 var(--s5);
  border-top: var(--hair) solid var(--rule-deep);
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s3) 0; border-bottom: var(--hair) solid var(--rule-deep);
  text-decoration: none; font-family: var(--font-display);
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.06em;
}

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; min-height: min(92svh, 900px); display: flex; align-items: flex-end; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Top stop is heavier than the reference's: this hero photo is a pale dawn sky
   and the white nav sat at ~2:1 against it. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(21,21,47,0.72) 0%, rgba(21,21,47,0.42) 22%, rgba(21,21,47,0.26) 48%, rgba(21,21,47,0.66) 100%);
}
.hero__inner { width: 100%; padding-block: clamp(7rem, 14vh, 10rem) 0; }
.hero .display--hero, .hero .lede, .hero .label { color: #fff; }
.hero .lede { color: rgba(255,255,255,0.86); max-width: 30em; }
.hero__label { margin-bottom: var(--s3); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hero .btn { border-color: rgba(255,255,255,0.5); color: #fff; }
.hero .btn:hover { background: #fff; color: var(--navy); border-color: #fff; }
.hero .btn--solid { background: #fff; color: var(--navy); border-color: #fff; }
.hero .btn--solid:hover { background: var(--sky); border-color: var(--sky); color: var(--deep); }

/* ---- The specialty rail, docked to the hero's bottom edge ---------------- */
.rail {
  margin-top: clamp(3rem, 8vh, 6rem);
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: var(--hair) solid rgba(255,255,255,0.28);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
}
.rail a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 1.15rem 1rem;
  min-height: 56px;
  text-decoration: none; color: var(--fg);
  border-right: var(--hair) solid var(--rule);
  font-family: var(--font-display); font-size: var(--label);
  text-transform: uppercase; letter-spacing: var(--track-label);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail a:last-child { border-right: 0; }
.rail a .arw { color: var(--sage-ink); transition: transform var(--dur-fast) var(--ease); }
.rail a:hover { background: var(--navy); color: var(--paper); }
.rail a:hover .arw { color: var(--sky); transform: translateX(3px); }
@media (max-width: 68rem) { .rail { grid-template-columns: repeat(3, 1fr); } .rail a:nth-child(3n) { border-right: 0; } }
@media (max-width: 40rem) { .rail { grid-template-columns: repeat(2, 1fr); } .rail a:nth-child(3n) { border-right: var(--hair) solid var(--rule); } .rail a:nth-child(2n) { border-right: 0; } }

/* --- Section heading block ------------------------------------------------ */
.sec-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.sec-head__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }

/* ---- Ruled index — specialties as a table, not cards --------------------- */
.index { border-top: var(--hair) solid var(--rule); }
.index__row {
  display: grid;
  grid-template-columns: 5rem minmax(9rem, 1fr) minmax(0, 2.1fr) auto;
  gap: var(--s3);
  align-items: center;
  padding: clamp(1.25rem, 2.4vw, 2rem) 0;
  border-bottom: var(--hair) solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease), padding-inline var(--dur-fast) var(--ease);
}
.index__row:hover { background: color-mix(in srgb, var(--sky) 16%, transparent); padding-inline: var(--s2); }
.index__name {
  font-family: var(--font-display); font-size: var(--d4);
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1;
}
.index__desc { color: var(--fg-muted); font-size: var(--body-sm); line-height: 1.5; }
.index__go { color: var(--sage-ink); transition: transform var(--dur-fast) var(--ease); }
.index__row:hover .index__go { transform: translateX(5px); }
@media (max-width: 54rem) {
  .index__row { grid-template-columns: 3.5rem 1fr auto; gap: var(--s2) var(--s3); }
  .index__name { grid-column: 2; }
  .index__go   { grid-column: 3; grid-row: 1; }   /* keep it on the title row */
  .index__desc { grid-column: 2 / -1; grid-row: 2; }
}
.room-deep .index { border-color: var(--rule-deep); }
.room-deep .index__row { border-color: var(--rule-deep); }
.room-deep .index__desc { color: var(--on-deep-muted); }
.room-deep .index__row:hover { background: var(--deep-soft); }

/* ---- Numbered columns split by vertical hairlines ------------------------ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0; }
.steps__item { padding: 0 var(--s4); border-left: var(--hair) solid var(--rule); }
.steps__item:first-child { padding-left: 0; border-left: 0; }
.room-deep .steps__item { border-color: var(--rule-deep); }
.steps__num { margin-bottom: var(--s3); }
.steps__title {
  font-family: var(--font-display); font-size: var(--d4); font-weight: 400;
  line-height: 1.15; margin-bottom: var(--s2); letter-spacing: 0.01em;
  text-transform: uppercase;   /* every other heading is uppercase — keep the system */
}
.steps__body { color: var(--fg-muted); font-size: var(--body-sm); line-height: 1.55; }
.room-deep .steps__body { color: var(--on-deep-muted); }
@media (max-width: 52rem) {
  .steps { gap: var(--s4); }
  .steps__item { padding: var(--s4) 0 0; border-left: 0; border-top: var(--hair) solid var(--rule); }
  .steps__item:first-child { padding-top: var(--s4); border-top: var(--hair) solid var(--rule); }
  .room-deep .steps__item { border-color: var(--rule-deep); }
}

/* ---- Services index: numbered rows with detail + chips, ruled ----------- */
.svc-list { border-top: var(--hair) solid var(--rule); }
.room-deep .svc-list { border-color: var(--rule-deep); }
.svc {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--s3);
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-bottom: var(--hair) solid var(--rule);
}
.room-deep .svc { border-color: var(--rule-deep); }
.svc__name {
  font-family: var(--font-display); font-size: var(--d3); font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--track-d3); line-height: 1.02;
}
.svc__detail { max-width: 46em; color: var(--fg-muted); margin-top: var(--s2); }
.room-deep .svc__detail { color: var(--on-deep-muted); }
.mt-3 { margin-top: var(--s3); }
@media (max-width: 46rem) {
  .svc { grid-template-columns: 1fr; gap: var(--s2); }
}

/* ---- Asymmetric split: sticky type column + ruled list ------------------- */
.split { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 60rem) { .split { grid-template-columns: 1fr; } }
.split__sticky { position: sticky; top: 7rem; }
@media (max-width: 60rem) { .split__sticky { position: static; } }

/* ---- Left-ruled list items (services, conditions) ------------------------ */
.ruled { list-style: none; padding: 0; }
.ruled > li {
  border-top: var(--hair) solid var(--rule);
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--s2) var(--s3);
}
.ruled > li:last-child { border-bottom: var(--hair) solid var(--rule); }
.ruled__title {
  font-family: var(--font-display); font-size: var(--d4); font-weight: 400;
  text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.15;
}
.ruled__body { grid-column: 2; color: var(--fg-muted); font-size: var(--body-sm); line-height: 1.55; }
.room-deep .ruled > li { border-color: var(--rule-deep); }
.room-deep .ruled__body { color: var(--on-deep-muted); }

/* Tag cloud of conditions — hairline chips, no pills */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s2); }
.tags .chip { color: var(--fg-muted); }   /* was 0.625rem — too small at 0.2em tracking */
.room-deep .tags .chip { color: var(--on-deep-muted); }

/* ---- Image band with overlaid spec chips -------------------------------- */
.band { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(22rem, 52vh, 34rem); display: flex; align-items: flex-end; }
.band__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.band__media picture { display: block; width: 100%; height: 100%; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(21,21,47,0.30) 0%, rgba(21,21,47,0.72) 100%);
}
.band__inner { width: 100%; padding-block: var(--s6); color: #fff; }
.band .display, .band .label { color: #fff; }
.band .chip { border-color: rgba(255,255,255,0.5); color: #fff; }
.band__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s3); }

/* ---- Quotes: left hairline rule, no cards ------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s5) var(--s4); }
.quote { border-left: var(--hair) solid var(--rule-strong); padding-left: var(--s3);
  display: flex; flex-direction: column; }   /* so attributions align on one baseline */
.quote blockquote { flex: 1; }
.room-deep .quote { border-color: var(--rule-deep-strong); }
.quote p { color: var(--fg-muted); font-size: var(--body-sm); line-height: 1.55; }
.room-deep .quote p { color: var(--on-deep-muted); }
.quote__meta { margin-top: var(--s2); display: grid; gap: 2px; }
.quote__who { font-family: var(--font-display); font-size: 0.9rem; }

/* ---- Stat row ------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; }
.stats__item { padding: var(--s4) var(--s3); border-left: var(--hair) solid var(--rule); }
.stats__item:first-child { padding-left: 0; border-left: 0; }
.room-deep .stats__item { border-color: var(--rule-deep); }
.stats__fig {
  font-family: var(--font-display); font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  line-height: 1; letter-spacing: -0.045em; margin-bottom: var(--s2);
}
@media (max-width: 46rem) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item { border-left: 0; border-top: var(--hair) solid var(--rule); padding-inline: 0 var(--s3); }
  .stats__item:first-child { border-top: var(--hair) solid var(--rule); }
}

/* --- Form ----------------------------------------------------------------- */
.form { display: grid; gap: var(--s3); }
.field { display: grid; gap: 0.5rem; }
.field label { font-family: var(--font-display); font-size: var(--label); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 0.85em 0.25em;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--navy);   /* hairline system, not boxes; 11.86:1 border */
  border-radius: 0;
  font-family: var(--font-body); font-size: var(--body-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.field select {
  appearance: none; padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%),
                    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: right 0.9rem center, right 0.55rem center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--sky); }
.field textarea { min-height: 8rem; padding-top: 0.6em; resize: vertical; }
.field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 40rem) { .field--pair { grid-template-columns: 1fr; } }
.form__note { font-size: 0.8125rem; color: var(--fg-faint); line-height: 1.5; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--deep); color: var(--on-deep); overflow: hidden; }
/* A deep CTA room immediately above the deep footer read as one slab. */
.room-deep + .site-footer { border-top: var(--hair) solid var(--rule-deep-strong); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  padding-block: var(--s7) var(--s5);
}
@media (max-width: 56rem) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 34rem) { .footer-grid { grid-template-columns: 1fr; } }

/* Ruled link lists — each link sits on its own full-width rule */
.footer-links { list-style: none; padding: 0; }
.footer-links a {
  display: block; padding: 0.75rem 0;
  border-bottom: var(--hair) solid var(--rule-deep);
  text-decoration: none;
  font-family: var(--font-display); font-size: var(--label);
  text-transform: uppercase; letter-spacing: var(--track-label);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.footer-links a:hover { color: var(--sky); padding-left: 0.4rem; }
.footer-links li:first-child a { border-top: var(--hair) solid var(--rule-deep); }

.footer-meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  padding-block: var(--s3);
  border-top: var(--hair) solid var(--rule-deep);
  font-family: var(--font-display); font-size: var(--label);
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--on-deep-faint);
}
.footer-meta a { text-decoration: none; }
.footer-meta a:hover { color: var(--sky); }

/* Oversized wordmark cropped by the bottom edge */
.footer-wordmark {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(4.5rem, 20.5vw, 19rem);
  line-height: 0.78;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: var(--on-deep);
  opacity: 0.12;
  margin-bottom: -0.20em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* --- Reveal: progressive enhancement -------------------------------------
   Content is visible by default. Only once JS has added `js-anim` to <html>
   do the hidden states apply, so a JS failure can never blank the page. */
html.js-anim .reveal { opacity: 0; transform: translateY(14px); }
html.js-anim .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  html.js-anim .reveal { opacity: 1; transform: none; }
}

/* --- Utilities ------------------------------------------------------------ */
.stack-1 > * + * { margin-top: var(--s1); }
.stack-2 > * + * { margin-top: var(--s2); }
.stack-3 > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }
.stack-5 > * + * { margin-top: var(--s5); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.media { border-radius: var(--radius-media); overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.ratio-32 { aspect-ratio: 3 / 2; }
.ratio-11 { aspect-ratio: 1 / 1; }
.ratio-45 { aspect-ratio: 4 / 5; }