/* Soma Sanctuary: earthy, airy and quietly luxurious */

:root {
  /* Palette */
  --paper:      #F7F5F0;  /* warm off-white, main background */
  --sand:       #EEE9DF;  /* pale stone surface */
  --stone:      #C8BCA7;  /* pale stone: rules, marks */
  --olive-grey: #857B65;  /* large text and decoration only (3.8:1 on paper) */
  --olive:      #463F22;  /* deep olive: headings, buttons */
  --olive-hi:   #5A5230;  /* button hover */
  --mud:        #4C2F25;  /* mud brown: body text, grounding section */
  --mud-text:   #EDE6DA;  /* text on mud */
  --mud-soft:   #CDBFAE;  /* secondary text on mud */
  --night:      #17150D;  /* hero shade behind light text */

  /* Hand-drawn divider lines, each slightly different */
  --line-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4.6C60 3.9 118 4.9 180 4.2S300 3.1 362 4.1 470 5.4 540 4.4 650 3.2 720 3.9 840 5.1 905 4.3 970 3.6 999 4.2' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' opacity='1'/%3E%3Cpath d='M40 4.9C140 4.6 230 5.3 330 4.8' fill='none' stroke='black' stroke-width='0.6' stroke-linecap='round' opacity='0.6'/%3E%3Cpath d='M610 3.6C700 3.4 780 3.9 880 3.5' fill='none' stroke='black' stroke-width='0.6' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E");
  --line-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 8' preserveAspectRatio='none'%3E%3Cpath d='M2 3.8C90 4.6 160 4.1 250 4.9S390 4.2 470 3.6 600 3.9 680 4.7 800 4.1 880 3.5 960 4.3 998 4.9' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' opacity='1'/%3E%3Cpath d='M150 3.5C260 3.9 350 3.3 450 3.7' fill='none' stroke='black' stroke-width='0.6' stroke-linecap='round' opacity='0.55'/%3E%3Cpath d='M720 4.8C800 5.1 890 4.6 980 4.9' fill='none' stroke='black' stroke-width='0.5' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
  --line-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 8' preserveAspectRatio='none'%3E%3Cpath d='M3 4.2C110 4.8 200 3.6 310 4.1S500 5 610 4.4 790 3.5 880 4 960 4.6 997 4.1' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' opacity='1'/%3E%3Cpath d='M420 4.9C520 4.6 610 5.1 700 4.7' fill='none' stroke='black' stroke-width='0.6' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");

  --line-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 8' preserveAspectRatio='none'%3E%3Cpath d='M2 4.5C80 3.8 150 4.4 240 3.9S400 4.8 500 4.5 640 3.4 730 3.9 870 4.9 940 4.3 985 3.9 998 4' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' opacity='1'/%3E%3Cpath d='M260 4.6C350 4.9 430 4.3 520 4.7' fill='none' stroke='black' stroke-width='0.6' stroke-linecap='round' opacity='0.55'/%3E%3Cpath d='M800 3.6C860 3.3 920 3.8 975 3.5' fill='none' stroke='black' stroke-width='0.5' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");

  /* Type */
  --display: "arsenica-variable", Georgia, "Iowan Old Style", serif; /* Georgia is the closest width match */
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --step-0: 1.0625rem;                                        /* 17px body */
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);           /* lede */
  --step-2: clamp(1.45rem, 1.2rem + 1vw, 1.95rem);            /* pull lines */
  --step-3: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);            /* section headings */
  --step-4: clamp(2.75rem, 1.7rem + 4.6vw, 5.6rem);           /* hero */

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(5rem, 11vw, 10rem);
  --section-tight: clamp(4rem, 8vw, 6.5rem);
  --measure: 34rem;
  --max: 84rem;
  --header-h: 4.5rem;

  /* Layout grid (desktop): 12 columns inside the page margins.
     Left content starts at column 1, right-hand content at column 7. */
  --grid-gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--mud);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p { margin: 0; }
p + p { margin-top: 1em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
.location :focus-visible { outline-color: var(--mud-text); }

.skip-link {
  position: absolute; top: -5rem; left: var(--gutter); z-index: 100;
  background: var(--olive); color: var(--paper);
  padding: 0.7rem 1.1rem; text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Type ---------- */
.display, .display-2, .pull, .wordmark, .footer-name {
  font-family: var(--display);
  font-weight: 380;
  color: var(--olive);
  text-wrap: balance;
}
.display { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.015em; }
.display-2 { font-size: var(--step-3); line-height: 1.06; letter-spacing: -0.01em; }
.pull { font-size: var(--step-2); line-height: 1.3; }
.br-lg { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--body); font-weight: 500; font-size: 1rem; line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-solid { background: var(--olive); color: var(--paper); }
.btn-solid:hover { background: var(--olive-hi); }
.btn-outline { border-color: var(--olive); color: var(--olive); }
.btn-outline:hover { background: var(--olive); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--mud); }
.btn-light:hover { background: var(--sand); }
.btn-small { min-height: 2.75rem; padding: 0.5rem 0.95rem; font-size: 0.9375rem; white-space: nowrap; }


/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Hairline drawn as a shadow so it doesn't add to the header's height */
  box-shadow: 0 1px 0 transparent;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 color-mix(in srgb, var(--stone) 60%, transparent); }

/* At the top of the page the header sits clear over the hero photo */
.site-header:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header:not(.is-scrolled) .wordmark,
.site-header:not(.is-scrolled) .site-nav a { color: var(--paper); }
.site-header:not(.is-scrolled) .btn-solid { background: var(--paper); color: var(--mud); }
.site-header:not(.is-scrolled) .btn-solid:hover { background: var(--sand); }
.site-header:not(.is-scrolled) :focus-visible { outline-color: var(--paper); }
.wordmark, .site-nav a { transition: color 0.35s ease; }
.header-inner {
  max-width: var(--max); margin-inline: auto;
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.wordmark {
  display: inline-block;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.45rem); line-height: 1; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
}
.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.site-nav a { font-size: 0.9375rem; text-decoration: none; color: var(--mud); }
.site-nav a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
/* Full-screen photo behind the text. Pulled up under the sticky header. */
.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 100vh; min-height: 100svh;
  margin-top: calc(-1 * var(--header-h));
  background: var(--night);
  color: var(--paper);
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
  filter: saturate(0.72) brightness(0.96); /* calm the yellow-green towards olive */
}
/* Shade so the text reads: from the bottom on small screens, from the left on wide ones */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--night) 45%, transparent), transparent 22%),
    linear-gradient(to top, color-mix(in srgb, var(--night) 82%, transparent) 25%, color-mix(in srgb, var(--night) 25%, transparent) 75%);
}
.hero-text {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: calc(var(--header-h) + 3rem) var(--gutter) clamp(3rem, 9vw, 5.5rem);
}
.hero h1 { max-width: 7.2em; color: var(--paper); } /* em, not ch: ch changes with the fallback font and caused a layout shift */
.hero-lede {
  margin-top: 2.25rem; max-width: 38rem; text-wrap: pretty; /* same gap as above the button */
  font-size: var(--step-1); line-height: 1.55;
}
.hero .btn { margin-top: 2.25rem; }
.hero :focus-visible { outline-color: var(--paper); }

/* Opening: the hero photo settles, then the text rises in one line after another */
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: settle 2.4s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .hero-text > * { animation: rise 1.1s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .hero-text > :nth-child(1) { animation-delay: 0.35s; }
  /* --title-done is set by site.js to when the last letter of the title is sharp */
  .hero-text > :nth-child(2) { animation-delay: var(--title-done, 1s); }
  .hero-text > :nth-child(3) { animation-delay: calc(var(--title-done, 1s) + 0.15s); }
  @keyframes settle {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- Approach ---------- */
.approach {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section) var(--gutter);
  display: grid; gap: 3rem;
  /* Sand runs the full width of the screen while the content keeps the page width */
  border-image: conic-gradient(var(--sand) 0 0) fill 0 / / 0 100vmax;
}
.approach-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
.approach-text h2 { margin-bottom: 2rem; }
.approach-text p { max-width: var(--measure); }

/* ---------- Treatments ---------- */
.treatments-inner {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-tight) var(--gutter);
  display: grid; gap: 2.5rem;
}
.treatments-intro { display: grid; gap: 1.25rem; align-content: start; }
.treatments-intro p { text-wrap: pretty; }
.treatments .btn { justify-self: start; }
/* A treatment menu: one row per treatment, a pencil line above each */
.treatment-list {
  list-style: none; margin: 0; padding: 0;
  position: relative;
}
.treatment-list li { position: relative; padding-block: 1.4rem; }
.treatment-name {
  margin: 0; font: inherit; font-family: var(--display); font-weight: 380;
  /* One size that grows steadily with the screen: ~22px on phones to ~26px on desktop */
  font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.65rem); line-height: 1.2; color: var(--olive);
}
.treatment-list p {
  margin-top: 0.4rem; max-width: 34rem;
  font-family: var(--body); font-size: var(--step-0); line-height: 1.6; color: var(--mud);
  text-wrap: pretty;
}
/* Pencil lines, drawn with different wobbles */
.treatment-list li::before, .treatment-list::after,
.about-chapter::before, .footer-meta::before {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background: var(--olive-grey); opacity: 0.6;
  -webkit-mask: var(--line-a) center / 100% 100% no-repeat;
          mask: var(--line-a) center / 100% 100% no-repeat;
}
.treatment-list li::before { top: -4px; }
.treatment-list li:nth-child(4n+2)::before { -webkit-mask-image: var(--line-b); mask-image: var(--line-b); }
.treatment-list li:nth-child(4n+3)::before { -webkit-mask-image: var(--line-c); mask-image: var(--line-c); }
.treatment-list li:nth-child(4n+4)::before { -webkit-mask-image: var(--line-d); mask-image: var(--line-d); }
.about-chapter::before {
  top: -4px;
  -webkit-mask-image: var(--line-c); mask-image: var(--line-c);
}
.footer-meta::before {
  top: -4px;
  -webkit-mask-image: var(--line-d); mask-image: var(--line-d);
}
.treatment-list::after {
  bottom: -4px;
  -webkit-mask-image: var(--line-b); mask-image: var(--line-b);
}

/* ---------- About ---------- */
.about {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section) var(--gutter);
  display: grid; gap: 2.5rem;
}
.about-media { max-width: 18rem; }
.about-media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.about-text h2 { margin-bottom: 2rem; }
.about-text p { max-width: var(--measure); }
.about-chapter {
  margin-top: 2rem !important; padding-top: 1.5rem;
  position: relative;
  font-size: 0.9375rem; line-height: 1.6; color: var(--olive);
}

/* ---------- Location ---------- */
.location { background: var(--mud); color: var(--mud-text); }
.location-inner {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-tight) var(--gutter);
  display: grid; gap: 3rem; align-items: center;
}
.location .display-2, .location .pull { color: var(--mud-text); }
.location-body { margin-top: 1.5rem; max-width: 30rem; color: var(--mud-soft); text-wrap: pretty; }
.location-details { display: grid; gap: 2rem; color: var(--mud-soft); }
.location-group h3 {
  margin: 0 0 0.6rem; font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mud-text);
}
.location-group address { font-style: normal; }
.location-group p + p { margin-top: 0.35rem; }
.location-group dl { margin: 0; display: grid; gap: 0.3rem; }
.location-group dl div { display: flex; gap: 1rem; }
.location-group dt { min-width: 11.5rem; }
.location-group dd { margin: 0; }
.location .btn { margin-top: 2.25rem; }

/* ---------- Scroll reveals ----------
   Only active once site.js adds .motion to <html> (never with reduced motion),
   so content is always visible if the script doesn't run. */
/* Hidden instantly; only the reveal is animated (and delayed) */
.motion [data-reveal="text"] > *,
.motion [data-reveal="self"] { opacity: 0; transform: translateY(16px); }
.motion [data-reveal="text"].is-in > *,
.motion [data-reveal="text"] > .is-in,
.motion [data-reveal="self"].is-in {
  --delay: calc(var(--i, 0) * var(--stagger, 120ms) + var(--after, 0s));
  opacity: 1; transform: none;
  transition:
    opacity 1s ease-out var(--delay),
    transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) var(--delay),
    background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.motion [data-reveal="self"].is-in { --i: 0; }
/* Items revealed one by one as they scroll into view (phones) */
.motion [data-reveal="text"] > .is-in { --delay: var(--item-delay, 0s); }
/* The closing pencil line arrives with the list (row lines arrive with their rows) */
.motion .treatment-list::after { opacity: 0; }
.motion .treatment-list.is-in::after, .motion .treatment-list.is-done::after {
  opacity: 0.6; transition: opacity 1.2s ease-out var(--after, 0s);
}

/* Headings come into focus letter by letter, as if being written.
   site.js wraps each letter in .c with its position in --c. */
.split .c { display: inline-block; }
.split .word { display: inline-block; white-space: nowrap; }
.motion .split .c { opacity: 0; filter: blur(8px); }
.motion .hero h1.split { animation: none; }
.motion .hero .split .c { animation: write 0.9s ease-out both; animation-delay: calc(var(--c) * 32ms + 0.35s); }
.motion [data-reveal="text"] > .split { opacity: 1; transform: none; }
.motion [data-reveal].is-in .split .c { animation: write 0.9s ease-out both; animation-delay: calc(var(--c) * var(--step, 32ms)); }
@keyframes write {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Images are uncovered from the bottom edge while settling from a slight zoom.
   The clip sits on the img so the observed wrapper keeps a normal visible box. */
.motion [data-reveal="image"] { overflow: clip; }
.motion [data-reveal="image"] img { clip-path: inset(100% 0 0 0); transform: scale(1.08); }
.motion [data-reveal="image"].is-in img {
  clip-path: inset(0); transform: none;
  transition:
    clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1),
    transform 2.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------- Parallax ----------
   Photos drift slightly slower than the page inside their frames. Uses
   scroll-driven animations on `translate`, so it doesn't clash with the
   reveal (clip-path + transform). Browsers without support see still images. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* clip, not hidden: hidden would make the frame its own scroller and freeze the timeline */
    .about-media, .approach-media { overflow: clip; }
    .about-media img, .approach-media img {
      scale: 1.14;
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes drift {
      from { translate: 0 -6%; }
      to   { translate: 0 6%; }
    }
    /* Hero: the photo sinks as the page scrolls away */
    .hero-media img {
      animation: settle 2.4s cubic-bezier(0.2, 0.6, 0.2, 1) both, sink linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    @keyframes sink {
      from { translate: 0 0; }
      to   { translate: 0 22%; }
    }
  }
}

/* ---------- Policy pages ---------- */
.legal {
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--section-tight) var(--gutter);
  min-height: 60vh;
}
.legal h1 { margin-bottom: 2rem; }

/* ---------- Footer ---------- */
.footer-inner {
  max-width: var(--max); margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter);
  display: grid; gap: 0.25rem;
  font-size: 0.9375rem; line-height: 1.4;
}
.footer-name {
  font-size: 1.6rem; line-height: 1; margin-bottom: 0.4rem;
}
.site-footer p + p { margin-top: 0; }
.footer-fht { width: 6.5rem; height: auto; margin-top: 1.5rem; }
/* Studio credit: "Made by" with the Odyssey wordmark, drawn in the text colour.
   The wordmark sits on the text baseline at the height of the capitals. */
.footer-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem;
  margin-top: 1.75rem; padding-top: 1.25rem;
  position: relative;
  font-size: 0.875rem; line-height: 1;
}
.footer-meta a { text-decoration: none; }
.footer-social, .footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; }
.credit-logo {
  display: inline-block; vertical-align: baseline;
  height: 0.7em; width: calc(0.7em * 72.888 / 11);
  background: currentColor;
  -webkit-mask: url("/assets/images/odyssey.svg") center / contain no-repeat;
          mask: url("/assets/images/odyssey.svg") center / contain no-repeat;
}
/* Footer links fade on hover (links elsewhere get a thicker underline) */
.footer-meta a { transition: opacity 0.2s ease; }
.footer-meta a:hover { opacity: 0.7; }

/* Very narrow phones: header button shows "Book", full label stays for screen readers */
@media (max-width: 24.99em) {
  .narrow-hide {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- Tablet ---------- */
@media (min-width: 40em) {
  /* Name and description side by side */
  /* Name and description line up at the top of their capitals, not their baselines:
     with the name much larger, matching baselines looks uneven to the eye. */
  .treatment-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--grid-gap); align-items: start; }
  .treatment-name, .treatment-list p { text-box: trim-both cap alphabetic; }
  .treatment-list p { margin-top: 0; }
  .approach-media img { aspect-ratio: 3 / 2; }
}

/* ---------- Desktop ---------- */
@media (min-width: 60em) {
  .site-nav { display: block; }
  .br-lg { display: inline; }
  .nowrap-lg { white-space: nowrap; }

  .hero { align-items: center; }
  .hero-text { padding-block: calc(var(--header-h) + 4rem) 4rem; }
  .hero h1 { max-width: none; }
  .hero-media img { object-position: 50% 50%; }
  .hero-media::after {
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--night) 40%, transparent), transparent 18%),
      linear-gradient(to right, color-mix(in srgb, var(--night) 78%, transparent) 15%, color-mix(in srgb, var(--night) 35%, transparent) 55%, transparent 80%);
  }

  /* Every section sits on the same 12-column grid */
  .approach, .about, .treatments-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  /* About: photo on the left, text from column 7 */
  .about { align-items: center; padding-top: var(--section); }
  .about-media { grid-column: 1 / span 4; }
  .about-media { max-width: none; }
  .about-text { grid-column: 7 / -1; }

  /* Approach: mirrors the row above, text on the left and photo on the right */
  .approach { align-items: center; }
  .approach-text { grid-column: 1 / span 6; }
  .approach-media { grid-column: 8 / -1; }
  .approach-media img { aspect-ratio: 4 / 5; }

  /* Shorter sections fill the screen like the image sections, content centred */
  .treatments-inner { min-height: min(100svh, 60rem); align-content: center; }
  /* Intro on top, then a full-width menu: name in columns 1–5, description from 7 */
  .treatments-inner { row-gap: 3rem; }
  .treatments-intro { grid-column: 1 / -1; }
  .treatment-list { grid-column: 1 / -1; }
  .treatment-list li { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: 1.6rem; }
  .treatment-name { grid-column: 1 / span 5; }
  .treatment-list p { grid-column: 7 / -1; }
  .treatments .btn { grid-column: 1 / -1; }

  /* Heading, intro and button on the left; details from column 7 */
  .location-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
  .location-inner { align-items: start; }
  .location-text { grid-column: 1 / span 5; }
  .location-details { grid-column: 7 / -1; padding-top: 0.6rem; }

  /* Details stacked in one column on the left, FHT logo on the right */
  .footer-inner { grid-template-columns: 1fr auto; column-gap: 3rem; }
  /* Name and descriptor centred beside the logo; links on their own row below */
  .footer-name { grid-column: 1; grid-row: 1; align-self: end; }
  .footer-name + p { grid-column: 1; grid-row: 2; align-self: start; }
  .footer-meta { grid-column: 1 / -1; grid-row: 3; }
  .footer-legal { margin-left: auto; }
  /* The logo is exactly as tall as the stacked details beside it */
  .footer-fht { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 5.3rem; width: auto; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}