/* ==========================================================================
   The One · by The Facemaker
   Design system — editorial quiet-luxury.

   Ivory base, one champagne accent used sparingly, warm espresso ink.
   Typography (Bodoni Moda + Jost) does the "premium" work; decoration is
   near-zero. Two hairline weights and generous space create all structure.

   Contents
     01  Fonts
     02  Tokens
     03  Reset + base
     04  Primitives
     05  Buttons
     06  Header + navigation
     07  Footer
     08  Home
     09  Inner page header
     10  Services
     11  About
     12  Locations
     13  Contact + forms
     14  Motion
     15  Responsive
     16  Reduced motion
   ========================================================================== */

/* ==========================================================================
   01  Fonts — self-hosted woff2 subsets (latin + latin-ext).
       Re-download with: node tools/fetch-fonts.mjs
   ========================================================================== */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/bodoni-moda-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/bodoni-moda-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/bodoni-moda-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/bodoni-moda-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/jost-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/jost-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   02  Tokens
   ========================================================================== */

:root {
  /* —— Surfaces — warm ivory, tinted toward the accent hue. No pure white. —— */
  --ivory: oklch(97.4% 0.008 84);
  --ivory-deep: oklch(95% 0.013 82);
  --ivory-sink: oklch(92.6% 0.014 80);
  --paper: oklch(99.2% 0.004 90);

  /* —— Ink — warm espresso. No pure black. —— */
  --ink: oklch(23.5% 0.013 62);
  --ink-soft: oklch(40% 0.013 66);
  --ink-mute: oklch(47% 0.012 70);

  /* —— Hairlines — these carry the structure. —— */
  --line: oklch(88.5% 0.014 82);
  --line-soft: oklch(92.5% 0.01 84);
  --line-strong: oklch(78% 0.018 80);

  /* —— The one accent: champagne. Fills, hairlines and small labels only. —— */
  --champagne: oklch(77% 0.085 84);
  --champagne-deep: oklch(48% 0.08 76);
  --champagne-pale: oklch(93% 0.03 86);
  --on-champagne: oklch(22% 0.02 60);

  /* —— Semantic — warm-shifted so they sit inside the palette —— */
  --danger: oklch(48% 0.14 30);
  --success: oklch(44% 0.09 152);

  /* —— Typefaces —— */
  --font-display: 'Bodoni Moda', Didot, 'Bodoni MT', Georgia, 'Times New Roman',
    serif;
  --font-body: 'Jost', Futura, 'Century Gothic', 'Avenir Next', 'Segoe UI',
    system-ui, sans-serif;

  /* —— Fluid type scale —— */
  --t-display: clamp(3.25rem, 1.4rem + 8.4vw, 7.5rem);
  --t-h1: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);
  --t-h2: clamp(1.75rem, 1.42rem + 1.6vw, 2.5rem);
  --t-h3: clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
  --t-lead: clamp(1.0625rem, 0.99rem + 0.36vw, 1.3125rem);
  --t-body: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  /* 15px and 13px, not 14px and 12px. --t-sm carries most of the reading text
     on the site — service blurbs, location hours and addresses, captions, form
     hints, footer copy — and 14px was the first thing people called too small.
     --t-label is only ever an uppercase tracked label, so it stays a step
     below body text, but 13px keeps it legible as a form label. */
  --t-sm: 0.9375rem;
  --t-label: 0.8125rem;

  /* —— Space —— */
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --maxw: 76rem;
  --maxw-text: 60ch;
  --section-y: clamp(3.75rem, 8vw, 7rem);
  --section-y-tight: clamp(2.25rem, 4.5vw, 3.5rem);
  --section-y-loose: clamp(5rem, 11vw, 9.5rem);
  --header-h: 4.25rem;

  /* —— Motion —— */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 150ms;
  --dur: 260ms;
  --dur-slow: 560ms;

  /* Per-element stagger offset. Overridden inline where a sequence is wanted. */
  --reveal-delay: 0ms;
}

/* ==========================================================================
   03  Reset + base
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* Light-only design: keeps native widgets and scrollbars from going dark. */
  color-scheme: light;
  /* Intentional, warm tap feedback rather than a default grey flash. */
  -webkit-tap-highlight-color: rgba(206, 176, 116, 0.28);
}

body {
  min-height: 100svh;
  background-color: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  /* 400, not 300. Jost Light holds its colour at 17px but goes thin and
     grey-looking at the 15px and 13px sizes a lot of this site is set in —
     service descriptions, hours, captions, form labels. Contrast was never the
     problem (8.56:1); stroke weight was. Display type keeps its own 400 via the
     h1-h4 rule, so the editorial feel is unchanged. */
  font-weight: 400;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Paper grain — 3.5% warm noise, so the ivory reads as stock rather than as
   flat screen white. Atmospheric only; above content, below chrome. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

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

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Any element toggled with the `hidden` attribute must actually hide, even
   where a component sets its own display value. */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--champagne-deep);
  outline-offset: 3px;
  border-radius: 1px;
}

/* The sticky header must never sit on top of a focused element, and interactive
   elements should not incur the 300ms double-tap-zoom delay. */
a,
button,
input,
select,
textarea,
summary,
[tabindex] {
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
  touch-action: manipulation;
}

::selection {
  background-color: var(--champagne);
  color: var(--on-champagne);
}

/* ==========================================================================
   04  Primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline-start: max(var(--pad-x), env(safe-area-inset-left));
  padding-inline-end: max(var(--pad-x), env(safe-area-inset-right));
}

.section {
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: var(--section-y-tight);
}
.section--loose {
  padding-block: var(--section-y-loose);
}
.section--band {
  background-color: var(--ivory-deep);
  border-block: 1px solid var(--line);
}
.section--ink {
  background-color: var(--ink);
  color: var(--ivory);
}

.rule {
  height: 1px;
  border: 0;
  background-color: var(--line);
}

/* Small uppercase tracked label — the accent's quietest appearance. */
.eyebrow {
  display: block;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne-deep);
}
.eyebrow--ink {
  color: var(--ink-mute);
}
.eyebrow--light {
  color: var(--champagne);
}

/* Section heading block. */
.head {
  display: grid;
  gap: 0.75rem;
  padding-block-start: 1.5rem;
  border-top: 1px solid var(--line);
}
.head__title {
  font-size: var(--t-h2);
  max-width: 24ch;
}
.head__note {
  color: var(--ink-soft);
  max-width: var(--maxw-text);
}

.lede {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--maxw-text);
}

/* Prose block for About / long copy. */
.prose > * + * {
  margin-block-start: 1.15em;
}
.prose p {
  max-width: 66ch;
  color: var(--ink-soft);
}
.prose strong {
  font-weight: 500;
  color: var(--ink);
}

/* Inline text link, hairline underline that changes colour on hover.
   500 so links read as links against 400 body text without going heavy — the
   underline alone was carrying the affordance, and at 1.86:1 the hairline is
   too faint to do that on its own. */
.tlink {
  display: inline-block;
  position: relative;
  padding-block-end: 2px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart);
}
.tlink:hover {
  color: var(--champagne-deep);
  border-bottom-color: var(--champagne-deep);
}

/* Click-to-call / click-to-email — 44px minimum touch target on mobile. */
.contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart);
}
.contact-link:hover {
  color: var(--champagne-deep);
  border-bottom-color: var(--champagne-deep);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 100;
  translate: -50% -140%;
  padding: 0.75rem 1.25rem;
  background-color: var(--ink);
  color: var(--ivory);
  font-size: var(--t-sm);
  transition: translate var(--dur) var(--ease-out-quart);
}
.skip-link:focus {
  translate: -50% 0;
}

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

/* Single-element spacing helpers, for the few places that need one nudge. */
.hint {
  font-size: var(--t-sm);
  color: var(--ink-mute);
}
.mt-md {
  margin-block-start: 1.75rem;
}
.mt-lg {
  margin-block-start: 2.5rem;
}

/* ==========================================================================
   05  Buttons — one button style. Book Now. That is the only CTA.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out-quart),
    color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart),
    translate var(--dur-fast) var(--ease-out-quart);
}
.btn:active {
  translate: 0 1px;
}

/* The accent's one loud appearance: the primary action. */
.btn--accent {
  background-color: var(--champagne);
  color: var(--on-champagne);
}
.btn--accent:hover {
  background-color: color-mix(in oklch, var(--champagne) 82%, var(--ink));
  translate: 0 -1px;
}

.btn--ink {
  background-color: var(--ink);
  color: var(--ivory);
}
.btn--ink:hover {
  background-color: color-mix(in oklch, var(--ink) 88%, var(--champagne));
  translate: 0 -1px;
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--ink);
  translate: 0 -1px;
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0.5rem 1.125rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active {
    translate: none;
  }
}

/* ==========================================================================
   06  Header + navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--ivory);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out-quart);
}
.site-header.is-stuck {
  border-block-end-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* —— Wordmark —— */
.wordmark {
  display: grid;
  gap: 0.15rem;
  line-height: 1;
}
.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark__by {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* —— Navigation ——
   One <nav>, two presentations: a full-screen panel on mobile, a flat inline
   list from 62rem up. No duplicated links, and only one nav is ever exposed
   to assistive technology at a time. */
.nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem max(var(--pad-x), env(safe-area-inset-right))
    calc(2rem + env(safe-area-inset-bottom))
    max(var(--pad-x), env(safe-area-inset-left));
  background-color: var(--ivory);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out-quart),
    visibility 0s linear var(--dur);
}
.nav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out-quart), visibility 0s;
}

.nav__list {
  display: grid;
  border-top: 1px solid var(--line);
}
.nav__list > li {
  border-bottom: 1px solid var(--line);
}

.nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color var(--dur) var(--ease-out-quart);
}
.nav__link::after {
  content: none;
}
.nav__link[aria-current='page'] {
  color: var(--champagne-deep);
}

.nav__meta {
  display: grid;
  gap: 0.5rem;
  margin-block-start: auto;
}
.nav__meta .eyebrow {
  margin-block-end: 0.75rem;
}
.nav__meta .contact-link {
  justify-self: start;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* —— Mobile menu toggle —— */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-inline-end: -0.5rem;
}
.menu-toggle__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--ink);
  transition: transform var(--dur) var(--ease-out-quart),
    opacity var(--dur-fast) linear;
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Social icon row, used in the mobile nav panel and the footer. */
.nav__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
}

body.is-locked {
  overflow: hidden;
}

/* ==========================================================================
   07  Footer — a single confident ink block to close the page.
   ========================================================================== */

.footer {
  --on-ink: oklch(96% 0.008 84);
  --on-ink-soft: color-mix(in oklch, var(--on-ink) 68%, transparent);
  --line-ink: color-mix(in oklch, var(--on-ink) 16%, transparent);

  background-color: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
}

.footer__brand .wordmark__name {
  color: var(--on-ink);
}
.footer__brand .wordmark__by {
  color: var(--on-ink-soft);
}
.footer__blurb {
  margin-block-start: 1.25rem;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--on-ink-soft);
  max-width: 34ch;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-block-end: 1rem;
}

.footer__list {
  display: grid;
  gap: 0.25rem;
}
.footer__list a {
  display: inline-block;
  padding-block: 0.45rem;
  font-size: var(--t-sm);
  color: var(--on-ink-soft);
  transition: color var(--dur) var(--ease-out-quart);
}
.footer__list a:hover {
  color: var(--champagne);
}
.footer__list span {
  display: inline-block;
  padding-block: 0.45rem;
  font-size: var(--t-sm);
  color: var(--on-ink-soft);
}

.footer__venue {
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--on-ink-soft);
}
.footer__venue + .footer__venue {
  margin-block-start: 1.25rem;
}
.footer__venue strong {
  display: block;
  font-weight: 500;
  color: var(--on-ink);
  letter-spacing: 0.02em;
}

/* —— Social icons —— */
.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink-mute);
  transition: color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart);
}
.social-link:hover {
  color: var(--champagne-deep);
  border-color: var(--champagne-deep);
}
.social-link svg {
  width: 18px;
  height: 18px;
}

/* The same icons invert over the ink footer. */
.footer .social-link {
  border-color: var(--line-ink);
  color: var(--on-ink-soft);
}
.footer .social-link:hover {
  color: var(--champagne);
  border-color: var(--champagne);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  padding-block-start: 1.5rem;
  border-top: 1px solid var(--line-ink);
  font-size: var(--t-sm);
  color: var(--on-ink-soft);
}
.footer__bottom p {
  max-width: 60ch;
}

/* ==========================================================================
   08  Home
   ========================================================================== */

/* —— Hero ——
   Deliberately typographic. No full-bleed photo, no script overlay. The only
   graphic is one hairline circle bleeding off the right edge — "The One" — with
   a single champagne point on its rim. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(86svh, 44rem);
  padding-block: clamp(2.5rem, 8vw, 5rem);
  /* Clips the decorative circle at the section edge, so nothing overflows the
     page horizontally and no global overflow hack is needed. */
  overflow: hidden;
}

.hero__mark {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  width: clamp(17rem, 44vw, 38rem);
  aspect-ratio: 1;
  translate: 38% -50%;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}
.hero__mark::after {
  content: '';
  position: absolute;
  top: -3.5px;
  left: 50%;
  width: 7px;
  height: 7px;
  translate: -50% 0;
  border-radius: 50%;
  background-color: var(--champagne);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.35rem;
  width: 100%;
}

.hero__title {
  font-size: var(--t-display);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.hero__lede {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 40ch;
}

/* Reveal hook for the hero's CTA block, and — below the 62rem breakpoint — the
   containing block for the icon row, so the row centres on the hero column.
   That is the screen's centre too: the shell is centred and evenly padded. */
.hero__actions {
  position: relative;
  margin-block-start: 0.5rem;
}

/* The CTA block — Book Now plus the "or call" link. It hugs its two children, so
   its box is exactly button + gap + call link. From the 62rem breakpoint it is
   also the containing block for the icon row, which stays out of flow so a wider
   row of icons can never nudge the block off the hero's text edge; the centring is
   then computed, not hard-coded — `left: 50%` in `.hero__socials` is half of the
   block, whatever the phone number's text happens to measure.
   Below 62rem that rule has no room: the block is ~300px of a ~350px column, so
   its centre sits ~25px left of the screen and a row centred on it reads as
   off-centre. There the row is anchored to `.hero__actions` instead, i.e. to the
   hero column, whose centre is the screen's centre.
   Two knobs, both declared here so the whole arrangement is tuned in one place:
     --hero-social-gap  clearance between the CTA block and the icon row
     --hero-icon-gap    the even space between the icons themselves
   `top` is the button's min-height (3rem) plus the clearance, and the bottom
   padding reserves the clearance plus the 44px icon row, so the icon row can
   never collide with the block above it. The icon gap tracks the viewport (3vw),
   clamped to 0.75–2.5rem: three 44px icons plus two 40px gaps is 212px, so on a
   320px screen a flat 2.5rem gap would centre the row outside the text edge. */
.hero__book {
  --hero-social-gap: 2.5rem;
  --hero-icon-gap: clamp(0.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem 1.5rem;
  width: fit-content;
  max-width: 100%;
  padding-block-end: calc(var(--hero-social-gap) + 2.75rem);
}

.hero__socials {
  position: absolute;
  top: calc(3rem + var(--hero-social-gap));
  left: 50%;
  width: max-content;
  gap: var(--hero-icon-gap);
  translate: -50% 0;
}

/* —— Curated service index ——
   A typographic index, not a card grid. Whole rows are links. */
.index {
  margin-block-start: 2.5rem;
  border-top: 1px solid var(--line);
}
.index__item {
  border-bottom: 1px solid var(--line);
}

.index__link {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: 0.35rem;
  padding-block: 1.35rem;
  transition: transform var(--dur) var(--ease-out-quart);
}

.index__num {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--champagne-deep);
}

.index__name {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.12rem + 0.75vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  transition: color var(--dur) var(--ease-out-quart);
}

.index__desc {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}

.index__mark {
  display: none;
  font-size: 1rem;
  color: var(--ink-mute);
  transition: color var(--dur) var(--ease-out-quart),
    translate var(--dur) var(--ease-out-quart);
}

.index__link:hover {
  transform: translateX(6px);
}
.index__link:hover .index__name {
  color: var(--champagne-deep);
}

@media (prefers-reduced-motion: reduce) {
  .index__link:hover {
    transform: none;
  }
}

/* —— Two-location strip —— */
.locstrip {
  display: grid;
  border-top: 1px solid var(--line);
}
.locstrip__item {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.locstrip__city {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
  letter-spacing: -0.02em;
}
.locstrip__addr {
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--ink-soft);
  font-style: normal;
}
.locstrip__hours {
  font-size: var(--t-sm);
  color: var(--ink-mute);
}
.locstrip__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-block-start: 0.35rem;
}
/* One row on one baseline. The three actions arrive at three different heights —
   the directions chip is 44px, the phone link 48px, and a plain .tlink is just
   its line box — so centring them left each bottom border on a different line
   and the row read as crooked. Forcing every child to the same 44px and
   centring its own content puts all three rules on one line. The 44px also
   keeps every action at the touch-target minimum. Specificity beats both
   .contact-link's 3rem and .maplink's own min-height. */
.locstrip__actions > * {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* —— Credibility —— */
.facts {
  display: grid;
  margin-block-start: 2.5rem;
  border-top: 1px solid var(--line);
}
.fact {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.fact__k {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.06rem + 0.34vw, 1.375rem);
  letter-spacing: -0.015em;
}
.fact__v {
  margin-block-start: 0.35rem;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40ch;
}

/* —— Testimonial —— */
.quote {
  display: grid;
  justify-items: center;
  text-align: center;
}
.quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 1.08rem + 1.5vw, 2.125rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 30ch;
  text-wrap: balance;
}
.quote__cite {
  margin-block-start: 1.75rem;
  font-size: var(--t-label);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.quote__nav {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 2rem;
}
.quote__dot {
  width: 32px;
  height: 24px;
  padding: 0;
}
.quote__dot::after {
  content: '';
  display: block;
  height: 1px;
  margin-block-start: 11px;
  background-color: var(--line-strong);
  transition: background-color var(--dur) var(--ease-out-quart);
}
.quote__dot:hover::after,
.quote__dot[aria-current='true']::after {
  background-color: var(--champagne-deep);
}

/* —— Closing CTA — the single repeat of Book Now, near the page bottom. —— */
.cta {
  display: grid;
  justify-items: center;
  text-align: center;
}
.cta__title {
  font-size: var(--t-h1);
  max-width: 24ch;
}
.cta__note {
  margin-block-start: 1rem;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  max-width: 44ch;
}
.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-block-start: 2.25rem;
  width: 100%;
}

/* ==========================================================================
   09  Inner page header (shared by Services / About / Locations / Contact)
   ========================================================================== */

.page-head {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 2.75rem);
}
.page-head__inner {
  display: grid;
  gap: 1.15rem;
}
.page-head__title {
  font-size: var(--t-h1);
  max-width: 26ch;
}
.page-head__lede {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ==========================================================================
   10  Services
   ========================================================================== */

.svc-group {
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}
.svc-group + .svc-group {
  border-top: 1px solid var(--line);
}
.svc-group:first-child {
  padding-block-start: 0;
}

.svc-group__head {
  display: grid;
  gap: 0.6rem;
}
.svc-group__title {
  font-size: var(--t-h2);
}
.svc-group__note {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54ch;
}

.svc-list {
  margin-block-start: 1.75rem;
  border-top: 1px solid var(--line);
}
.svc {
  display: grid;
  gap: 0.3rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}
.svc__name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.07rem + 0.34vw, 1.375rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.svc__desc {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* A quiet footnote strip for insurance / consultation notes. */
.note-strip {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  background-color: var(--champagne-pale);
  border-left: 2px solid var(--champagne);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--ink-soft);
}
.note-strip strong {
  font-weight: 500;
  color: var(--ink);
}

/* ==========================================================================
   11  About
   ========================================================================== */

.about-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.about-body {
  display: grid;
  gap: 2.5rem;
  align-content: start;
}

/* Image frame. Works as a deliberate empty frame before photography arrives,
   and as a plain image container once a real file is dropped in.
   3/5 matches the portrait's own 626x1024 (0.611) closely enough that
   object-fit: cover trims under 2% — the previous 4/5 would have shaved ~24%
   off the height, clipping into the subject's hair and the hem of the coat. */
.frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 5;
  padding: 1.75rem;
  background-color: var(--ivory-sink);
  border: 1px solid var(--line);
}
.frame::before {
  content: '';
  position: absolute;
  inset: 0.75rem;
  /* Above the <img>, which is also absolutely positioned and would otherwise
     paint over it. Keeps the hairline reading as a mat around the print. */
  z-index: 1;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame__label {
  position: relative;
  z-index: 1;
  max-width: 22ch;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-mute);
}
.frame__caption {
  margin-block-start: 0.75rem;
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

/* —— Credentials —— */
.creds {
  display: grid;
  margin-block-start: 0.5rem;
  border-top: 1px solid var(--line);
}
.creds li {
  display: flex;
  gap: 0.9rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}
.creds li::before {
  content: '—';
  flex: none;
  color: var(--champagne-deep);
}

/* Small block heading used inside the About / Contact columns. */
.subhead {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-block-end: 0.5rem;
}

/* ==========================================================================
   12  Locations
   ========================================================================== */

.venue {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.venue:last-of-type {
  border-bottom: 1px solid var(--line);
}

.venue__info {
  display: grid;
  align-content: start;
  gap: 1.5rem;
}
.venue__head {
  display: grid;
  gap: 0.6rem;
}
.venue__city {
  font-size: var(--t-h2);
}
.venue__tagline {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

.venue__meta {
  display: grid;
  gap: 1.4rem;
}
.venue__block {
  display: grid;
  gap: 0.2rem;
}
.venue__addr {
  font-style: normal;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-soft);
}
.venue__hours {
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-soft);
}
.venue__hours span {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 22rem;
  padding-block: 0.15rem;
}
.venue__hours b {
  font-weight: 400;
  color: var(--ink-mute);
}

.venue__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* —— Map —— */
.map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--ivory-sink);
  border: 1px solid var(--line);
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* Desaturate slightly so the map reads as part of a warm ivory page. */
  filter: grayscale(0.25) sepia(0.06);
}
.map__link {
  margin-block-start: 0.75rem;
}
/* The map actions — "Get directions" and "Open in Google Maps" — read as plain
   underlined text and were being missed, which is the worst failure mode for
   the link a visitor actually needs when they are on their way. Given a bordered
   chip instead: a full box rather than a 1.86:1 underline, an arrow to mark it
   as leaving the site, and a 44px target. The arrow is decorative, so it stays
   out of the accessibility tree — the link text already carries the meaning.
   Used on locations.html and on the home page location strip, so the affordance
   is learned once. Declared after .tlink, so its `border` and `padding` win. */
.maplink {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  font-weight: 500;
  color: var(--ink);
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  transition: color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart),
    background-color var(--dur) var(--ease-out-quart);
}
.maplink::after {
  content: '\2197';
  margin-inline-start: 0.45rem;
  font-size: 0.9em;
  line-height: 1;
  color: var(--champagne-deep);
  transition: translate var(--dur-fast) var(--ease-out-quart);
}
.maplink:hover {
  color: var(--champagne-deep);
  border-color: var(--champagne-deep);
  background-color: var(--champagne-pale);
}
.maplink:hover::after {
  translate: 2px -2px;
}

/* ==========================================================================
   13  Contact + forms
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.contact-panel {
  display: grid;
  align-content: start;
  gap: 2rem;
}

.contact-list {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}
.contact-row {
  display: grid;
  gap: 0.2rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
.contact-row dt {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact-row dd {
  margin: 0;
}

/* —— Form —— */
.form {
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background-color: var(--ivory-deep);
  border: 1px solid var(--line);
}
.form__intro {
  display: grid;
  gap: 0.5rem;
}
.form__title {
  font-size: var(--t-h3);
}

.field {
  display: grid;
  gap: 0.4rem;
}
.field__label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field__req {
  color: var(--champagne-deep);
}
.field__control {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease-out-quart),
    background-color var(--dur) var(--ease-out-quart);
}
.field__control:hover {
  border-color: var(--line-strong);
}
.field__control:focus-visible {
  outline: 2px solid var(--champagne-deep);
  outline-offset: 0;
  border-color: var(--champagne-deep);
}
textarea.field__control {
  min-height: 8rem;
  padding-block: 0.9rem;
  resize: vertical;
}
select.field__control {
  appearance: none;
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e665b' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.field__hint {
  font-size: var(--t-sm);
  color: var(--ink-mute);
}
.field__error {
  font-size: var(--t-sm);
  color: var(--danger);
}
.field__error:empty {
  display: none;
}
.field__control[aria-invalid='true'] {
  border-color: var(--danger);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-block-start: 0.25rem;
}

.form__status {
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--success);
  background-color: var(--paper);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.form__status[hidden] {
  display: none;
}
.form__status--error {
  border-left-color: var(--danger);
}

/* ==========================================================================
   14  Motion
   Reveals are gated behind a `.js` class set before first paint, so with
   JavaScript disabled every element is simply visible.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out-quint),
    transform var(--dur-slow) var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   15  Responsive — mobile-first, enhanced upward
   ========================================================================== */

@media (min-width: 40rem) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 48rem) {
  /* Two-location strip reads as a bordered two-cell table. */
  .locstrip {
    grid-template-columns: 1fr 1fr;
  }
  .locstrip__item {
    padding-inline: clamp(1.5rem, 3vw, 2.5rem);
  }
  .locstrip__item:first-child {
    padding-inline-start: 0;
  }
  .locstrip__item:last-child {
    border-inline-start: 1px solid var(--line);
  }
  /* Once the cards sit side by side, their shorter address was throwing the
     hours and the whole action row a full line above the other card's, so
     nothing lined up across the divider. Chicago's address is three lines and
     Northbrook's two; holding the block at three puts hours and buttons on one
     line across both. 4.95em = 3 x the 1.65 line-height, in em so it tracks the
     font size. Only a floor, so a longer address would still grow the box.
     Scoped to this breakpoint on purpose — stacked in one column the cards are
     sequential and there is nothing to align against, so the gap would only
     read as a stray hole. */
  .locstrip__addr {
    min-height: 4.95em;
  }

  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
  }
  .fact {
    padding: 1.75rem clamp(1.25rem, 2.5vw, 2rem);
    border-bottom: 0;
  }
  .fact:first-child {
    padding-inline-start: 0;
  }
  .fact + .fact {
    border-inline-start: 1px solid var(--line);
  }

  /* Service index: number / name / description / arrow on one line. */
  .index__link {
    grid-template-columns: 3rem minmax(0, 17rem) minmax(0, 1fr) 1.5rem;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .index__num {
    grid-column: 1;
    grid-row: 1;
  }
  .index__name {
    grid-column: 2;
    grid-row: 1;
  }
  .index__desc {
    grid-column: 3;
    grid-row: 1;
  }
  .index__mark {
    display: block;
    grid-column: 4;
    grid-row: 1;
    text-align: right;
  }
  .index__link:hover .index__mark {
    color: var(--champagne-deep);
    translate: 4px 0;
  }

  .svc {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: baseline;
  }
  .svc__desc {
    max-width: none;
  }
}

@media (min-width: 62rem) {
  /* Wide enough that the CTA block reads as its own group, so the social row
     goes back to being centred on the block rather than on the whole column. */
  .hero__book {
    position: relative;
  }

  /* The single <nav> flips from full-screen panel to inline link row. */
  .nav {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    padding: 0;
    background: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
    border-top: 0;
  }
  .nav__list > li {
    border-bottom: 0;
  }
  .nav__link {
    position: relative;
    display: inline-block;
    min-height: 0;
    padding-block: 0.4rem;
    font-family: var(--font-body);
    font-size: var(--t-sm);
    letter-spacing: 0;
    color: var(--ink-soft);
  }
  .nav__link::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--champagne-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out-quart);
  }
  .nav__link:hover {
    color: var(--ink);
  }
  .nav__link:hover::after,
  .nav__link[aria-current='page']::after {
    transform: scaleX(1);
  }
  .nav__link[aria-current='page'] {
    color: var(--ink);
  }
  .nav__meta {
    display: none;
  }
  .menu-toggle {
    display: none;
  }

  /* The hero deliberately has no max-width here. It sits inside .shell, so its
     left edge is the shell's content edge — the same axis the wordmark, every
     section eyebrow, every hairline rule and the footer all start from. An
     earlier `max-width: 46rem` on .hero__inner indented the hero ~240px to the
     right of that axis from 62rem up, which broke the one vertical line the
     whole design is built on. The lede keeps its own `max-width: 40ch`, so the
     measure is still controlled without moving the block. */
  .hero__inner {
    width: 100%;
  }

  .about-grid {
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    column-gap: clamp(2.5rem, 6vw, 5rem);
  }

  .venue {
    grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }

  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr;
    gap: 3rem;
  }
  .footer__brand {
    grid-column: auto;
  }

  .cta__actions {
    flex-direction: row;
    justify-content: center;
    width: auto;
  }
}

/* ==========================================================================
   16  Reduced motion
   ========================================================================== */

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