/* Dr. SalimiNezhad | rhinoplasty clinic site */

/* ============ Tokens ============ */
:root {
  /* Brand palette */
  --blush: #F4E7E6;   /* main */
  --sage: #8FA399;    /* secondary */
  --gold: #C1A673;    /* accent */

  /* Tones derived from the palette */
  --blush-50: #FBF6F5;
  --blush-200: #EDDCDA;
  --blush-line: #DDC8C5;
  --field-line: #A3918E;
  --sage-100: #E4EAE6;
  --sage-200: #C9D4CE;
  --sage-700: #53675D;
  --gold-hover: #CDB588;
  --ink: #26332D;
  --ink-2: #4A5A52;
  --ink-hover: #34443C;
  --ink-700: #2F3D37;
  --ink-600: #3E4D46;
  --on-ink: #F4E7E6;
  --on-ink-2: #C7BCB8;
  --danger: #A0443A;

  /* Type */
  --font-display: "Estedad", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Estedad", Tahoma, sans-serif;
  --font-latin: "Spectral", Georgia, serif;
  --font-latin-ui: "Rubik", system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem);
  --fs-h1: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);

  /* Space (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --shadow-float: 0 1px 2px rgb(22 30 26 / 0.12), 0 12px 32px -8px rgb(22 30 26 / 0.3);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;
  --section-y: clamp(64px, 8vw, 112px);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Multiplies every entrance distance; 0 under reduced motion, so entrances only fade */
  --travel: 1;

  /* Stacking: header < floating button < skip link */
  --z-header: 10;
  --z-quick: 20;
  --z-skip: 30;
}

@media (max-width: 719.98px) {
  :root { --header-h: 64px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

html.is-locked { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--blush);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
:where(ul[class], ol[class]) { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
address { font-style: normal; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.45;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.showcase :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold); }

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--flip { transform: scaleX(-1); }

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

.skip-link {
  position: fixed;
  top: var(--s-3);
  right: var(--s-3);
  z-index: var(--z-skip);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--on-ink);
  font: 600 var(--fs-sm)/1.6 var(--font-display);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 150ms var(--ease-out);
}

.skip-link:focus-visible { transform: none; }

/* ============ Layout ============ */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

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

/* Set by the server from the section order: a section that follows another one on the page
   background drops its top padding, and a boxed section sits directly on a following band. */
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.35;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font: 600 var(--fs-sm)/1.6 var(--font-display);
  color: var(--sage-700);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.eyebrow--on-dark { color: var(--gold); }

.latin {
  font-family: var(--font-latin);
  font-size: 1.1em;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

/* ============ Buttons & links ============ */
.btn {
  --btn-h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h);
  padding-inline: var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 var(--fs-sm)/1.2 var(--font-display);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms var(--ease-out),
    border-color 150ms var(--ease-out),
    color 150ms var(--ease-out),
    transform 150ms var(--ease-out);
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--lg {
  --btn-h: 56px;
  padding-inline: var(--s-6);
  font-size: 1rem;
}

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

.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: var(--ink-hover); }

.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--blush-200); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-hover); }

.btn--ghost-light { border-color: var(--on-ink-2); color: var(--on-ink); }
.btn--ghost-light:hover { border-color: var(--on-ink); background: var(--ink-700); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-1);
  border-bottom: 1px solid var(--gold);
  font: 600 var(--fs-sm)/1.6 var(--font-display);
  color: var(--ink);
  text-decoration: none;
}

.link-arrow .icon {
  width: 18px;
  height: 18px;
  transition: transform 150ms var(--ease-out);
}

.link-arrow:hover .icon { transform: translateX(-4px); }

.round-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-600);
  border-radius: 50%;
  background: transparent;
  color: var(--on-ink);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}

.round-btn:hover { background: var(--ink-700); border-color: var(--on-ink-2); }
.round-btn:active { transform: translateY(1px); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding-inline: var(--s-4);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 600 var(--fs-sm)/1 var(--font-display);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}

.chip:hover { background: var(--blush-200); border-color: var(--ink-2); }
.chip:active { transform: translateY(1px); }
.chip .icon { width: 18px; height: 18px; }
.chip[data-state="done"] { border-color: var(--sage-700); color: var(--sage-700); }

/* ============ Placeholder media ============ */
.ph {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-2);
  width: 100%;
  height: 100%;
  background: var(--blush-200);
  color: var(--ink-2);
  font: 500 var(--fs-xs)/1.6 var(--font-display);
  text-align: center;
}

.ph .icon { width: 28px; height: 28px; stroke-width: 1.3; }
.ph--dark { background: var(--ink-700); color: var(--on-ink-2); }

/* ============ Header ============ */
.site-header {
  --hdr-fg: var(--ink);
  --hdr-fg-2: var(--ink-2);
  --hdr-latin: var(--sage-700);
  --hdr-line: var(--blush-line);
  --hdr-wash: var(--blush-200);
  /* Leaving the hero, the background and every colour in the bar change together, on one timing */
  --hdr-swap: 400ms var(--ease-out);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: border-color var(--hdr-swap);
}

/* The background is its own layer so it can fade without repainting the bar */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blush);
  transition: opacity var(--hdr-swap);
}

.site-header.is-scrolled { border-bottom-color: var(--blush-line); }

/* Over the hero photo: transparent with light text until the page scrolls or the menu opens */
.site-header--overlay:not(.is-scrolled):not(.menu-open) {
  --hdr-fg: var(--on-ink);
  --hdr-fg-2: var(--on-ink-2);
  --hdr-latin: var(--gold);
  --hdr-line: var(--on-ink-2);
  --hdr-wash: var(--ink-700);
}

.site-header--overlay:not(.is-scrolled):not(.menu-open)::before { opacity: 0; }

.site-header .brand,
.site-header .brand__latin { transition: color var(--hdr-swap); }

.site-header .header-cta {
  transition:
    background-color var(--hdr-swap),
    color var(--hdr-swap),
    transform 150ms var(--ease-out);
}

.site-header--overlay:not(.is-scrolled):not(.menu-open) :focus-visible { outline-color: var(--gold); }

.site-header--overlay:not(.is-scrolled):not(.menu-open) .header-cta {
  background: var(--blush);
  color: var(--ink);
}

.site-header--overlay:not(.is-scrolled):not(.menu-open) .header-cta:hover { background: var(--blush-200); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-inline-end: auto;
  color: var(--hdr-fg, var(--ink));
  text-decoration: none;
}

.brand__mark {
  height: 46px;
  width: auto;
  aspect-ratio: 400 / 1048;
  fill: currentColor;
}

.brand__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand__name { font: 800 1.125rem/1.35 var(--font-display); }

.brand__latin {
  font: italic 400 0.9375rem/1.2 var(--font-latin);
  color: var(--hdr-latin, var(--sage-700));
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 32px);
}

.nav__list a {
  position: relative;
  display: block;
  padding-block: var(--s-2);
  font: 500 var(--fs-sm)/1.6 var(--font-display);
  color: var(--hdr-fg-2);
  text-decoration: none;
  transition: color var(--hdr-swap, 150ms var(--ease-out));
}

.nav__list a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 200ms var(--ease-out);
}

.nav__list a:hover,
.nav__list a[aria-current] { color: var(--hdr-fg); }

.nav__list a:hover::after,
.nav__list a[aria-current]::after { transform: scaleX(1); }

.nav__footer,
.menu-toggle { display: none; }

@media (max-width: 1099.98px) {
  .menu-toggle {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--hdr-line);
    border-radius: 50%;
    background: transparent;
    color: var(--hdr-fg);
    cursor: pointer;
    transition: background-color var(--hdr-swap), border-color var(--hdr-swap), color var(--hdr-swap);
  }

  .menu-toggle:hover { background: var(--hdr-wash); }
  .menu-toggle__close { display: none; }
  .site-header.menu-open .menu-toggle__open { display: none; }
  .site-header.menu-open .menu-toggle__close { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-7);
    padding: var(--s-4) var(--gutter) var(--s-6);
    overflow-y: auto;
    background: var(--blush);
    border-top: 1px solid var(--blush-line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity 150ms var(--ease-in),
      transform 150ms var(--ease-in),
      visibility 0s linear 150ms;
  }

  .site-header.menu-open .nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity 220ms var(--ease-out),
      transform 220ms var(--ease-out),
      visibility 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list a {
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--blush-line);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--ink);
  }

  .nav__list a::after { display: none; }

  /* Links arrive one after another as the menu opens; closing is one quick fade. */
  .site-header.menu-open .nav__list li {
    animation: rise-in 420ms var(--ease-out-expo) calc(60ms + min(var(--i, 0), 6) * 35ms) both;
  }

  .site-header.menu-open .nav__footer { animation: rise-in 420ms var(--ease-out-expo) 200ms both; }

  .nav__footer {
    display: grid;
    gap: var(--s-4);
  }

  .nav__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font: 600 1.125rem/1.6 var(--font-display);
    color: var(--ink);
    text-decoration: none;
  }
}

@media (max-width: 719.98px) {
  .site-header__inner { gap: var(--s-3); }
  .brand__mark { height: 38px; }
  .brand__name { font-size: 1rem; }
  .brand__latin { font-size: 0.8125rem; }
  .header-cta { display: none; }
}

/* ============ Hero ============ */
/* Full-screen photo that runs under the header.
   Wide screens: surgeon on the left, fade to ink on the right where the text sits.
   Stacked (phones, portrait tablets): photo on top, fade rising from the bottom. */
.hero {
  position: relative;
  isolation: isolate;
  /* Stops short of the window so the top of the next section shows: there is more below. */
  --hero-peek: calc(var(--section-y) + 40px);
  display: flex;
  align-items: center;
  min-height: min(calc(100vh - var(--hero-peek)), 1000px);
  min-height: min(calc(100svh - var(--hero-peek)), 1000px);
  /* header height plus its 1px bottom border */
  margin-top: calc(-1 * var(--header-h) - 1px);
  padding-block: calc(var(--header-h) + 1px + var(--s-7)) var(--s-8);
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 35%;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* The surgeon, cut out of the same photo, sits above the shade (::before) and below
   the header darkening (::after), so the shade never falls on him. It shares the photo's
   size, crop, entrance and parallax, so the two always line up. */
.hero__bg--subject { z-index: -1; }

/* Many stops so the fade eases out instead of ending in a visible edge */
.hero::before {
  inset: 0;
  background: linear-gradient(to left,
    var(--ink) 0%,
    var(--ink) 34%,
    rgb(38 51 45 / 0.94) 42%,
    rgb(38 51 45 / 0.8) 50%,
    rgb(38 51 45 / 0.56) 58%,
    rgb(38 51 45 / 0.3) 66%,
    rgb(38 51 45 / 0.1) 74%,
    rgb(38 51 45 / 0) 82%);
}

/* Darkens the top edge so the transparent header stays readable over the lamp */
.hero::after {
  inset: 0 0 auto;
  height: calc(var(--header-h) * 2.2);
  background: linear-gradient(to bottom, rgb(38 51 45 / 0.7), rgb(38 51 45 / 0));
}

.hero__inner { position: relative; }

.hero__content { max-width: min(560px, 46%); }

.hero .eyebrow { color: var(--gold); }
.hero .latin { color: var(--on-ink-2); }
.hero :focus-visible { outline-color: var(--gold); }

.hero__title {
  margin-bottom: var(--s-5);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.3;
}

.hero__title-soft {
  display: block;
  font-weight: 300;
  color: var(--sage);
}

.hero__lead {
  max-width: 34rem;
  margin-bottom: var(--s-6);
  font-size: 1.125rem;
  color: var(--on-ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.hero__call {
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--on-ink-2);
}

.hero__call a {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--on-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}

/* Keep in sync with the <source media> on the hero <picture> */
@media (max-width: 899.98px), (orientation: portrait) and (max-width: 1199.98px) {
  .hero {
    align-items: flex-end;
    padding-bottom: var(--s-7);
  }

  .hero__bg {
    inset: 0 0 auto;
    height: 72%;
  }

  .hero__bg img { object-position: 50% 20%; }

  /* Head and shoulders stay clear; the body fades into the shade where the text begins */
  .hero__bg--subject {
    -webkit-mask-image: linear-gradient(to bottom, #000 54%, transparent 72%);
    mask-image: linear-gradient(to bottom, #000 54%, transparent 72%);
  }

  .hero__bg--wide-only { display: none; }

  .hero::before {
    background: linear-gradient(to top,
      var(--ink) 0%,
      var(--ink) 36%,
      rgb(38 51 45 / 0.94) 42%,
      rgb(38 51 45 / 0.8) 48%,
      rgb(38 51 45 / 0.56) 55%,
      rgb(38 51 45 / 0.3) 62%,
      rgb(38 51 45 / 0.1) 68%,
      rgb(38 51 45 / 0) 74%);
  }

  .hero__content { max-width: 560px; }
}

@media (min-width: 900px) and (orientation: landscape), (min-width: 1200px) {
  .hero__bg--stacked-only { display: none; }
}

/* Phones: the text sits low, under the surgeon's face. The floating button
   lands on the peek of the next section, so the hero needs no extra room for it. */
@media (max-width: 719.98px) {
  .hero { padding-bottom: var(--s-6); }
}

/* Arrival: the theatre photo comes up out of the ink, the gold rule draws in,
   and the headline is revealed right to left, the way it is read.
   Only on the opening hero, and not in the admin preview, which reloads on every edit. */
:root:not([data-preview]) .hero:not(.hero--inline) {
  .hero__bg img { animation: hero-photo 1600ms var(--ease-out-expo) both; }

  .eyebrow::before {
    transform-origin: right;
    animation: draw-in 600ms var(--ease-out-expo) 100ms both;
  }

  .eyebrow { animation: fade-in 300ms var(--ease-out) 60ms both; }

  .hero__title { animation: write-in 900ms var(--ease-out-expo) 160ms both; }
  .hero__title-soft { animation: write-in 900ms var(--ease-out-expo) 300ms both; }
  .hero__lead { animation: rise-in 700ms var(--ease-out-expo) 420ms both; }
  .hero__actions { animation: rise-in 700ms var(--ease-out-expo) 500ms both; }
  .hero__call { animation: rise-in 700ms var(--ease-out-expo) 580ms both; }
}

/* Parallax: while the page scrolls the first screen away, the photo drifts down by
   30% of the distance, so it moves at 70% of the page's speed and sits behind the text.
   The gap this opens above the photo stays above the top of the window.
   Browsers without scroll-linked animation (Firefox for now) keep the photo still. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero:not(.hero--inline) .hero__bg {
      animation: hero-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }
}

@keyframes hero-drift {
  to { translate: 0 30vh; }
}

@keyframes hero-photo {
  from {
    opacity: 0;
    scale: calc(1 + 0.05 * var(--travel));
  }
}

@keyframes write-in {
  from {
    opacity: 0;
    clip-path: inset(-0.4em -0.4em -0.4em calc(var(--travel) * 100%));
  }
  to {
    opacity: 1;
    clip-path: inset(-0.4em);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    translate: 0 calc(var(--travel) * 12px);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes draw-in {
  from { scale: 0 1; }
}

/* Hero moved below another section: no longer runs under the header */
.hero--inline {
  min-height: min(88vh, 860px);
  margin-top: 0;
  padding-top: var(--s-8);
}

.hero--inline::after { display: none; }

/* ============ About ============ */
.about__grid {
  display: grid;
  gap: var(--s-6);
}

.about__media {
  aspect-ratio: 4 / 5;
  max-width: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about__media img,
.post__media img,
.insta__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__media picture,
.post__media picture,
.insta__grid picture { display: contents; }

.about__role {
  margin-top: var(--s-1);
  font: 500 var(--fs-lg)/1.6 var(--font-display);
  color: var(--sage-700);
}

.prose {
  display: grid;
  gap: var(--s-4);
  max-width: 62ch;
  color: var(--ink-2);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-6);
  margin-block: var(--s-6);
  border-top: 1px solid var(--blush-line);
}

.facts__item {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--blush-line);
}

.facts dt {
  font: 500 var(--fs-xs)/1.6 var(--font-display);
  color: var(--sage-700);
}

.facts dd {
  margin-top: var(--s-1);
  font: 600 var(--fs-sm)/1.7 var(--font-display);
  color: var(--ink);
}

/* A fact that links out, e.g. the council number to its registry page */
.facts__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  transition: color 150ms var(--ease-out);
}

.facts__link .icon {
  width: 16px;
  height: 16px;
  color: var(--sage-700);
  transition: translate 150ms var(--ease-out), color 150ms var(--ease-out);
}

.facts__link:hover { color: var(--sage-700); }
.facts__link:hover .icon { translate: -2px -2px; color: var(--ink); }

/* Wide: photo beside the text. Narrow: name first, then photo, then bio. */
@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "media head"
      "media body";
    align-content: center;
    column-gap: clamp(48px, 7vw, 112px);
    row-gap: var(--s-5);
  }

  .about__head { grid-area: head; align-self: end; }
  .about__media { grid-area: media; align-self: center; }
  .about__body { grid-area: body; align-self: start; }
}

/* Phones and tablets: a compact profile that fits on one screen. The portrait shrinks
   to sit beside the name, the bio opens on request, and the facts pair up. */
@media (max-width: 899.98px) {
  .about__grid {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "media head"
      "body body";
    align-items: center;
    column-gap: var(--s-5);
    row-gap: var(--s-5);
  }

  .about__media {
    grid-area: media;
    border-radius: var(--radius-md);
  }

  .about__head { grid-area: head; }
  .about__body { grid-area: body; }

  .about__head .eyebrow { margin-bottom: var(--s-2); }
  .about__head .h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem); }

  .about__role {
    margin-top: 0;
    font-size: var(--fs-base);
  }

  /* main.js closes the bio to three lines when it runs longer */
  .prose.is-closed {
    max-height: calc(3 * 1.9em);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
    mask-image: linear-gradient(to bottom, #000 40%, transparent);
  }

  .facts {
    column-gap: var(--s-4);
    margin-block: var(--s-5);
  }

  .facts__item { padding-block: var(--s-3); }
}

.more-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 var(--fs-sm)/1.6 var(--font-display);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  cursor: pointer;
  transition: color 150ms var(--ease-out);
}

.more-toggle:hover { color: var(--sage-700); }

.more-toggle[hidden] { display: none; }

@media (min-width: 900px) {
  .more-toggle { display: none; }
}

/* ============ Gallery + reviews + Instagram box ============ */
.showcase {
  padding: clamp(24px, 5vw, 64px);
  border-radius: var(--radius-xl);
  background: var(--ink);
  color: var(--on-ink);
}

.showcase__head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.showcase__lead {
  max-width: 40ch;
  color: var(--on-ink-2);
}

.showcase__grid {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 900px) {
  .showcase__head {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--s-7);
  }
}

@media (min-width: 1024px) {
  .showcase__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 5vw, 72px);
  }

  .showcase__grid--single { grid-template-columns: minmax(0, 1fr); }
}

/* Only the viewer or only the reviews */
.showcase__grid--single .compare-block {
  width: 100%;
  max-width: 760px;
}

.showcase__grid--single .reviews {
  padding: 0;
  border: 0;
}

/* Before / after viewer */
.compare {
  --pos: 50%;
  position: relative;
  isolation: isolate;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.compare__case,
.compare__layer {
  position: absolute;
  inset: 0;
}

.compare__case[hidden] { display: none; }

.compare__layer {
  display: grid;
  place-items: center;
}

.compare__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.compare__layer--before {
  background: var(--ink-700);
  color: var(--ink-600);
}

.compare__layer--after {
  background: var(--ink-600);
  color: var(--sage);
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.compare__art {
  height: 78%;
  width: auto;
  aspect-ratio: 400 / 1048;
  fill: currentColor;
}

.compare__tag {
  position: absolute;
  top: var(--s-4);
  z-index: 2;
  padding: 0 var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-ink);
  font: 600 var(--fs-xs)/1.9 var(--font-display);
  pointer-events: none;
}

.compare__tag--before { right: var(--s-4); }
.compare__tag--after { left: var(--s-4); }

.compare__divider {
  position: absolute;
  inset-block: 0;
  left: var(--pos);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: var(--blush);
  pointer-events: none;
}

.compare__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  translate: -50% -50%;
  transition: scale 150ms var(--ease-out);
}

.compare.is-dragging .compare__knob { scale: 1.08; }

/* "Drag" label beside the knob, shown once the first-view glide has parked the divider */
.compare__hint {
  position: absolute;
  top: 50%;
  left: calc(50% + 24px + var(--s-2));
  padding: 0 var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--blush);
  color: var(--ink);
  font: 600 var(--fs-xs)/2 var(--font-display);
  white-space: nowrap;
  box-shadow: var(--shadow-float);
  translate: calc(var(--travel) * -8px) -50%;
  opacity: 0;
  transition:
    opacity 150ms var(--ease-in),
    translate 150ms var(--ease-in);
}

.compare.is-hinting .compare__hint {
  translate: 0 -50%;
  opacity: 1;
  transition:
    opacity 300ms var(--ease-out),
    translate 450ms var(--ease-out-expo);
}

.compare__range {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.compare:has(.compare__range:focus-visible) .compare__knob {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.cases {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-4);
}

.cases__caption {
  font: 500 var(--fs-sm)/1.6 var(--font-display);
  color: var(--on-ink-2);
}

.cases__list {
  display: flex;
  gap: var(--s-2);
}

.cases__btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-600);
  border-radius: 50%;
  background: transparent;
  color: var(--on-ink-2);
  font: 600 var(--fs-xs)/1 var(--font-display);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}

.cases__btn:hover { border-color: var(--on-ink-2); color: var(--on-ink); }
.cases__btn:active { transform: translateY(1px); }

.cases__btn[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

/* Reviews */
.reviews {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--ink-600);
}

@media (min-width: 1024px) {
  .reviews {
    padding-top: 0;
    padding-inline-start: clamp(32px, 4vw, 56px);
    border-top: 0;
    border-inline-start: 1px solid var(--ink-600);
  }
}

.reviews__title { font-size: var(--fs-lg); font-weight: 700; }

.reviews__viewport {
  display: grid;
  flex: 1;
}

.review {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms var(--ease-in), visibility 0s linear 150ms;
}

.review.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms var(--ease-out) 60ms, visibility 0s;
}

.review__text {
  font: 300 clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem)/1.9 var(--font-display);
  color: var(--on-ink);
}

.review__text::before {
  content: "«";
  display: block;
  height: 0.9em;
  font: 400 3.5rem/1 var(--font-latin);
  color: var(--gold);
}

.review__by {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.review__name { font: 600 var(--fs-sm)/1.6 var(--font-display); }

.review__meta {
  font-size: var(--fs-xs);
  color: var(--on-ink-2);
}

.reviews__nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.reviews__count {
  min-width: 4.5em;
  font: 500 var(--fs-sm)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--on-ink-2);
  text-align: center;
}

/* Instagram */
.insta {
  display: grid;
  gap: var(--s-5);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--ink-600);
}

.insta__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

.insta__badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
}

.insta__badge .icon { width: 24px; height: 24px; }

/* Icon and text are one link to the profile */
.insta__link {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: inherit;
  text-decoration: none;
}

.insta__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.insta__note,
.insta__title { font: 700 var(--fs-lg)/1.45 var(--font-display); }

a.insta__link .insta__badge { transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); }
a.insta__link:hover .insta__badge { background: var(--gold); color: var(--ink); }
a.insta__link:hover .insta__handle { color: var(--gold); }

.insta__handle {
  font: 400 var(--fs-sm)/1.6 var(--font-latin-ui);
  color: var(--on-ink-2);
  transition: color 150ms var(--ease-out);
}

.insta__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.insta__grid a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.insta__grid .ph { transition: background-color 150ms var(--ease-out); }
.insta__grid a:hover .ph { background: var(--ink-600); }
.insta__grid img { transition: opacity 150ms var(--ease-out); }
.insta__grid a:hover img { opacity: 0.85; }

@media (min-width: 600px) {
  .insta__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .insta {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-8);
  }

  .insta__cta { margin-inline-start: var(--s-2); }
}

/* ============ Process ============ */
.process { background: var(--sage-100); }

.process__head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(40px, 5vw, 72px);
}

.process__lead {
  max-width: 48ch;
  color: var(--ink-2);
}

.phases { display: none; }

.steps {
  display: grid;
  gap: var(--s-6);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
}

.step::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}

.step__num {
  margin-bottom: var(--s-4);
  font: 200 2.75rem/1 var(--font-display);
  color: var(--ink);
}

.step__phase {
  font: 600 var(--fs-xs)/1.6 var(--font-display);
  color: var(--sage-700);
}

.step__title {
  margin-bottom: var(--s-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.5;
}

.step__text {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .process__head {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--s-7);
  }
}

@media (min-width: 1024px) {
  .phases {
    display: grid;
    grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr));
    column-gap: var(--s-5);
    margin-bottom: var(--s-5);
  }

  .phases__item {
    grid-column: span var(--span);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font: 600 var(--fs-xs)/1.6 var(--font-display);
    color: var(--sage-700);
  }

  .phases__item::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sage-200);
  }

  .steps {
    grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr));
    column-gap: var(--s-5);
  }

  .step {
    --dot-delay: calc(var(--i, 0) * 120ms);
    --line-delay: calc(var(--i, 0) * 120ms + 60ms);
    padding-top: var(--s-6);
  }

  .step::before {
    top: -4px;
    inset-inline-start: 0;
  }

  /* This step's stretch of the timeline */
  .step::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 1px;
    background: var(--ink);
    transform-origin: right;
  }

  .step { --content-delay: calc(var(--i, 0) * 120ms + 120ms); }

  .process.is-armed .step:not(.is-in)::after { scale: 0 1; }

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

@media (max-width: 1023.98px) {
  .process__head { margin-bottom: var(--s-6); }

  .steps {
    --rail: var(--s-6);
    gap: var(--s-5);
    padding-inline-start: var(--rail);
  }

  /* Compact: the number and the phase share the first line */
  .step {
    --line-delay: 200ms;
    --content-delay: 120ms;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--s-3);
  }

  .step > :not(.step__num, .step__phase) { grid-column: 1 / -1; }

  .step::before {
    top: 10px;
    inset-inline-start: calc(-1 * var(--rail) + 3px);
  }

  /* line from this step's dot to the next one */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    bottom: calc(-1 * var(--s-5) - 14px);
    inset-inline-start: calc(-1 * var(--rail) + 7px);
    width: 1px;
    background: var(--sage-200);
    transform-origin: top;
  }

  .process.is-armed .step:not(.is-in)::after { scale: 1 0; }

  .step__num {
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .step__title {
    margin-block: var(--s-1) 0;
    font-size: 1.125rem;
  }

  .step__text {
    margin-top: var(--s-1);
    line-height: 1.8;
  }
}

/* The section arrives as it comes into view: the heading rises in, then each step's dot
   appears, its stretch of timeline draws, and its text settles in just after.
   main.js arms this only when motion is allowed; without the script everything is simply there. */
.process.is-armed :is(.process__head, .phases) > *,
.process.is-armed .step > * {
  transition:
    opacity 500ms var(--ease-out) var(--content-delay, 0ms),
    translate 700ms var(--ease-out-expo) var(--content-delay, 0ms);
}

.process.is-armed .process__head > :nth-child(2) { --content-delay: 90ms; }
.process.is-armed .phases { --content-delay: 150ms; }
.process.is-armed .step > .step__text { transition-delay: calc(var(--content-delay, 0ms) + 70ms); }

.process.is-armed :is(.process__head, .phases, .step):not(.is-in) > * {
  opacity: 0;
  translate: 0 14px;
}

.process.is-armed .step::before { transition: scale 450ms var(--ease-out-expo) var(--dot-delay, 0ms); }
.process.is-armed .step::after { transition: scale 800ms var(--ease-out-expo) var(--line-delay, 0ms); }
.process.is-armed .step:not(.is-in)::before { scale: 0; }

/* ============ FAQ ============ */
.faq__grid {
  display: grid;
  gap: var(--s-7);
}

.faq__lead {
  max-width: 36ch;
  margin-top: var(--s-4);
  color: var(--ink-2);
}

.faq__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--blush-line);
}

.faq__help p { font: 600 var(--fs-sm)/1.6 var(--font-display); }

.faq__item { border-bottom: 1px solid var(--blush-line); }
.faq__item:first-child { border-top: 1px solid var(--blush-line); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  font: 600 1.125rem/1.7 var(--font-display);
  list-style: none;
  cursor: pointer;
  transition: color 150ms var(--ease-out);
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--sage-700); }

.faq__icon {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--blush-line);
  border-radius: 50%;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--ink);
  translate: -50% -50%;
  transition: rotate 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

.faq__icon::after { rotate: 90deg; }

.faq__item[open] .faq__icon { border-color: var(--ink); background: var(--ink); }
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after { background: var(--on-ink); }
.faq__item[open] .faq__icon::after { rotate: 0deg; }

.faq__answer {
  max-width: 62ch;
  padding-bottom: var(--s-5);
  color: var(--ink-2);
}

/* The answer settles in while the row opens */
.faq__item[open] .faq__answer { animation: fade-in 380ms var(--ease-out) 60ms both; }

@media (min-width: 720px) {
  .faq__answer { padding-inline-end: calc(36px + var(--s-5)); }
}

@supports (interpolate-size: allow-keywords) {
  .faq__list { interpolate-size: allow-keywords; }

  .faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 250ms var(--ease-out), content-visibility 250ms allow-discrete;
  }

  .faq__item[open]::details-content { block-size: auto; }
}

@media (min-width: 960px) {
  .faq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(48px, 7vw, 112px);
  }

  .faq__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
}

/* ============ Magazine ============ */
.magazine__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.magazine__grid {
  display: grid;
  gap: var(--s-7);
}

.post { position: relative; }

.post__media {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.post--featured .post__media {
  aspect-ratio: 16 / 10;
  margin-bottom: var(--s-5);
}

.post__cat {
  margin-bottom: var(--s-1);
  font: 600 var(--fs-xs)/1.6 var(--font-display);
  color: var(--sage-700);
}

.post__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.6;
}

.post--featured .post__title {
  font-size: var(--fs-xl);
  line-height: 1.5;
}

.post__link {
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.4em;
}

.post__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.post__link:focus-visible { outline: none; }

.post__link:focus-visible::after {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.post:hover .post__link { text-decoration-line: underline; }

.post__excerpt {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.post__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font: 600 var(--fs-sm)/1.6 var(--font-display);
}

.post__more .icon {
  width: 18px;
  height: 18px;
  transition: transform 150ms var(--ease-out);
}

.post:hover .post__more .icon { transform: translateX(-4px); }

.post--row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--blush-line);
}

.post--row:first-child { padding-top: 0; }
.post--row:last-child { border-bottom: 0; }

.post--row .post__media {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
}

.post--row .post__title { font-size: 1.0625rem; }

.post--row .post__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 960px) {
  .magazine__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 5vw, 72px);
  }

  /* A single post: photo beside the text */
  .magazine__grid--single { grid-template-columns: minmax(0, 1fr); }

  .magazine__grid--single .post--featured {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(32px, 4vw, 56px);
  }

  .magazine__grid--single .post--featured .post__media { margin-bottom: 0; }
}

@media (max-width: 519.98px) {
  .post--row { grid-template-columns: 80px minmax(0, 1fr); gap: var(--s-4); }
}

/* ============ Reserve ============ */
.reserve-box {
  padding: clamp(16px, 5vw, 64px);
  border-radius: var(--radius-xl);
  background: var(--sage);
  color: var(--ink);
}

.reserve__head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.reserve__head p { max-width: 46ch; }

.reserve__grid {
  display: grid;
  gap: var(--s-4);
}

.tile {
  padding: clamp(16px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--blush);
}

.tile__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.tile__title .icon { color: var(--sage-700); }

@media (min-width: 1024px) {
  .reserve__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    /* --areas is set by the server when the form, map or hours tile is turned off */
    grid-template-areas: var(--areas, "phone form" "hours form" "address map");
  }

  .tile--phone { grid-area: phone; }
  .tile--hours { grid-area: hours; }
  .tile--address { grid-area: address; }
  .tile--map { grid-area: map; }

  /* The form spans two rows; let the message box take the spare height. */
  .tile--form {
    grid-area: form;
    display: flex;
    flex-direction: column;
  }

  .tile--form .form {
    flex: 1;
    grid-template-rows: auto 1fr auto;
  }

  .tile--form .field--full { grid-template-rows: auto 1fr; }
  .tile--form textarea { height: 100%; }
}

/* Phone */
.phones {
  display: grid;
  gap: var(--s-4);
}

.phones li {
  display: flex;
  flex-direction: column;
}

.phones__label {
  font: 500 var(--fs-xs)/1.6 var(--font-display);
  color: var(--sage-700);
}

.phones__num {
  align-self: flex-start;
  font: 700 clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem)/1.4 var(--font-display);
  color: var(--ink);
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}

.phones__num:hover { color: var(--sage-700); }

/* Form */
.form {
  display: grid;
  gap: var(--s-4);
}

.field {
  display: grid;
  gap: var(--s-2);
}

.field label { font: 600 var(--fs-sm)/1.6 var(--font-display); }

.field__optional {
  font-weight: 400;
  color: var(--ink-2);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--blush-50);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
  transition: border-color 150ms var(--ease-out);
}

.field input[dir="ltr"] { text-align: right; }

.field textarea {
  min-height: 128px;
  resize: vertical;
}

.field input:hover,
.field textarea:hover { border-color: var(--ink-2); }

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--ink);
  outline-offset: 0;
}

.field input[aria-invalid="true"] { border-color: var(--danger); }

.field__error {
  font: 500 var(--fs-xs)/1.6 var(--font-display);
  color: var(--danger);
}

.field__error:empty { display: none; }

/* Spam trap: hidden from people, filled in by bots */
.form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-2);
}

.form__status { font: 500 var(--fs-sm)/1.7 var(--font-display); }
.form__status:empty { display: none; }
.form__status[data-tone="success"] { color: var(--sage-700); }
.form__status[data-tone="error"] { color: var(--danger); }
.form__status[data-tone="info"] { color: var(--ink-2); }

@media (min-width: 640px) {
  .form { grid-template-columns: 1fr 1fr; }
  .field--full,
  .form__footer { grid-column: 1 / -1; }
}

/* Address */
.address {
  margin-bottom: var(--s-4);
  text-wrap: pretty;
}

.route__label {
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
  font: 500 var(--fs-xs)/1.6 var(--font-display);
  color: var(--sage-700);
}

.route__apps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Map */
.tile--map {
  min-height: 280px;
  padding: 0;
  overflow: hidden;
}

.map {
  position: relative;
  height: 100%;
  min-height: inherit;
  background: var(--sage-100);
}

.map__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--blush-50);
  stroke-width: 14;
  stroke-linecap: round;
}

.map__art .map__minor { stroke-width: 6; }

.map__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  box-shadow: var(--shadow-float);
  translate: -50% -50%;
}

.map__pin .icon { width: 26px; height: 26px; }

.map--image {
  display: block;
  overflow: hidden;
}

.map--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a.map--image:hover img { opacity: 0.92; }

.tile--map-embed { min-height: 320px; }

.map__frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
}

.map__note {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  padding: 0 var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--blush-50);
  color: var(--ink-2);
  font: 500 var(--fs-xs)/1.9 var(--font-display);
}

/* Hours */
.hours { display: grid; }

.hours__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--blush-line);
  color: var(--ink-2);
}

.hours__row:last-child { border-bottom: 0; }

.hours dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  font: 500 var(--fs-sm)/1.6 var(--font-display);
}

.hours dd {
  font: 600 var(--fs-sm)/1.6 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hours__row.is-today { color: var(--ink); }

.today-badge {
  padding: 0 var(--s-2);
  border-radius: var(--radius-pill);
  background: var(--sage);
  color: var(--ink);
  font: 600 var(--fs-xs)/1.8 var(--font-display);
}

/* ============ Free text section ============ */
.textblock--band { background: var(--sage-100); }

.textblock__grid {
  display: grid;
  gap: var(--s-6);
}

.textblock__body { max-width: 68ch; }
.textblock__body > .h2 { margin-bottom: var(--s-5); }

.textblock__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.textblock__media img {
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .textblock--media .textblock__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    column-gap: clamp(48px, 7vw, 112px);
  }

  .textblock--media-end .textblock__media { order: 2; }
}

/* ============ Long-form text (markdown) ============ */
.richtext {
  color: var(--ink-2);
  line-height: 2;
}

.richtext > * + * { margin-top: var(--s-4); }
.richtext > :first-child { margin-top: 0; }

.richtext h2,
.richtext h3,
.richtext h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.5;
}

.richtext h2 { margin-top: var(--s-7); font-size: var(--fs-xl); }
.richtext h3 { margin-top: var(--s-6); font-size: var(--fs-lg); }
.richtext h4 { margin-top: var(--s-5); margin-bottom: 0; font-size: 1.0625rem; }
.richtext :is(h2, h3, h4) + * { margin-top: var(--s-3); }

.richtext strong { color: var(--ink); font-weight: 700; }

.richtext a {
  color: var(--ink);
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: color 150ms var(--ease-out);
}

.richtext a:hover { color: var(--sage-700); }

.richtext ul,
.richtext ol { padding-inline-start: 1.4em; }

.richtext li + li { margin-top: var(--s-2); }
.richtext li::marker { color: var(--sage-700); }

.richtext blockquote {
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--gold);
  font: 400 var(--fs-lg)/1.9 var(--font-display);
  color: var(--ink);
}

.richtext figure { margin-block: var(--s-6); }

.richtext img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.richtext figcaption {
  margin-top: var(--s-2);
  font: 500 var(--fs-xs)/1.7 var(--font-display);
  color: var(--ink-2);
  text-align: center;
}

.richtext hr {
  height: 1px;
  margin-block: var(--s-7);
  border: 0;
  background: var(--blush-line);
}

.richtext code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--blush-200);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.richtext pre {
  overflow-x: auto;
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--on-ink);
  direction: ltr;
  text-align: left;
}

.richtext pre code { padding: 0; background: none; }

.table-wrap { overflow-x: auto; }

.richtext table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.richtext th,
.richtext td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--blush-line);
  text-align: start;
}

.richtext th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

/* ============ Magazine pages ============ */
.page-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.page-head .eyebrow { margin-bottom: 0; }

.page-head__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.35;
}

.page-head__lead {
  max-width: 52ch;
  color: var(--ink-2);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.chip[aria-current] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.post-grid {
  display: grid;
  gap: var(--s-7) var(--s-6);
}

@media (min-width: 640px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.post--card .post__media {
  aspect-ratio: 16 / 10;
  margin-bottom: var(--s-4);
}

.post--card .post__title { font-size: 1.125rem; }

.post--card .post__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post__date {
  margin-top: var(--s-3);
  font: 500 var(--fs-xs)/1.6 var(--font-display);
  color: var(--sage-700);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: clamp(40px, 5vw, 64px);
}

.pager__count {
  font: 500 var(--fs-sm)/1.6 var(--font-display);
  color: var(--ink-2);
}

/* Single article: a narrower column for reading */
.article {
  --container: 760px;
  padding-block: clamp(40px, 6vw, 80px) var(--section-y);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font: 600 var(--fs-sm)/1.6 var(--font-display);
  color: var(--sage-700);
}

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

.crumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.35em;
}

.article__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.4;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font: 500 var(--fs-sm)/1.6 var(--font-display);
  color: var(--ink-2);
}

.article__cover {
  --container: 1040px;
  margin-top: clamp(32px, 4vw, 48px);
}

.article__cover img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.article__body {
  margin-top: clamp(32px, 4vw, 56px);
  font-size: 1.125rem;
}

.article__foot {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--blush-line);
}

.article-cta { --container: 760px; }

.cta-box {
  display: grid;
  gap: var(--s-5);
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background: var(--sage);
  color: var(--ink);
}

.cta-box__title {
  margin-bottom: var(--s-2);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.cta-box__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
}

.cta-box__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: 700 1.125rem/1.4 var(--font-display);
  color: var(--ink);
  text-decoration: none;
}

.cta-box__phone:hover { color: var(--ink-hover); text-decoration: underline; text-decoration-color: var(--gold); }

.related__title {
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: var(--fs-xl);
}

.notfound .container {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: var(--s-3);
  min-height: 40vh;
}

.notfound .eyebrow { margin-bottom: 0; }

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

/* ============ Footer ============ */
.site-footer {
  padding-block: var(--s-8) calc(var(--s-8) + 72px);
  background: var(--ink);
  color: var(--on-ink-2);
}

.site-footer__inner {
  display: grid;
  gap: var(--s-6);
}

.brand--on-dark { color: var(--on-ink); }
.brand--on-dark .brand__latin { color: var(--gold); }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}

.site-footer__links a {
  font: 500 var(--fs-sm)/1.8 var(--font-display);
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}

.site-footer__links a:hover { color: var(--on-ink); }

.site-footer__copy {
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-600);
  font-size: var(--fs-xs);
}

@media (min-width: 900px) {
  .site-footer { padding-bottom: var(--s-7); }

  .site-footer__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .site-footer__links { justify-content: flex-end; }
  .site-footer__copy { grid-column: 1 / -1; }
}

/* ============ Floating contact button ============ */
.quick {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: var(--z-quick);
}

html.is-locked .quick { display: none; }

.quick__fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 56px;
  height: 56px;
  padding-inline: var(--s-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-ink);
  font: 600 var(--fs-sm)/1 var(--font-display);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.quick__fab:hover { background: var(--ink-hover); }
.quick__fab:active { transform: scale(0.97); }
.quick__icon { width: 22px; height: 22px; }
.quick__icon--close { display: none; }
.quick.is-open .quick__icon--open { display: none; }
.quick.is-open .quick__icon--close { display: block; }

.quick__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--s-3));
  width: min(320px, calc(100vw - 2 * var(--s-4)));
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  background: var(--blush-50);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--blush-line), var(--shadow-float);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 150ms var(--ease-in),
    transform 150ms var(--ease-in),
    visibility 0s linear 150ms;
}

.quick.is-open .quick__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s;
}

.quick__title {
  margin-bottom: var(--s-3);
  font: 700 var(--fs-lg)/1.5 var(--font-display);
}

.quick__list {
  display: grid;
  gap: var(--s-1);
  margin-bottom: var(--s-4);
}

.quick__phone {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color 150ms var(--ease-out);
}

.quick__phone:hover { background: var(--blush-200); }

.quick__phone-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sage-100);
  color: var(--sage-700);
}

.quick__phone-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.quick__label {
  font: 500 var(--fs-xs)/1.6 var(--font-display);
  color: var(--sage-700);
}

.quick__num { font: 700 1.125rem/1.4 var(--font-display); }

@media (max-width: 719.98px) {
  .quick__fab {
    width: 56px;
    padding-inline: 0;
  }

  .quick__fab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 720px) {
  .quick {
    right: var(--s-6);
    bottom: var(--s-6);
  }
}

/* ============ Reduced motion ============ */
/* Nothing travels, grows or slides; fades and colour changes stay, so every state
   change is still visible. main.js also skips the viewer sweep and the timeline. */
@media (prefers-reduced-motion: reduce) {
  :root { --travel: 0; }

  html { scroll-behavior: auto; }

  .nav,
  .quick__panel { transform: none !important; }

  .hero .eyebrow::before { animation: none !important; }

  .faq__item::details-content { transition: none !important; }

  .compare__knob { transition: none; }
}