/* ==========================================================================
   Claire Portman PMU - main stylesheet
   One type scale, one spacing scale, one palette. Defined here and used
   everywhere. Do not redefine these further down.
   ========================================================================== */

/* ---------- Fonts (self-hosted, Latin subset, variable) ---------- */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-moda-latin-standard-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/bodoni-moda-latin-standard-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-latin-wght-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Size-matched fallbacks so the swap does not shift the layout.
   Jost values are its published metrics against Arial. The Bodoni values
   are a starting estimate - tune once the woff2 is in /assets/fonts/. */
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 93.97%;
  ascent-override: 113.86%;
  descent-override: 39.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Bodoni Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  size-adjust: 98%;
  ascent-override: 117%;
  descent-override: 36%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

:root {
  /* Palette (settled - see site guide) */
  --white: #ffffff;
  --cream: #f7f2ed;
  --sand: #d9c4b4;
  --taupe: #b89c88;
  --taupe-deep: #8a6d5a;
  --cocoa: #3e302a;
  --cocoa-soft: #5a4940;
  --line: #e4d8ce;

  /* Type families */
  --font-serif: "Bodoni Moda", "Bodoni Fallback", "Times New Roman", serif;
  --font-sans: "Jost", "Jost Fallback", Arial, sans-serif;

  /* Type scale - fluid, still growing up to about 1600px */
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
  --step-3: clamp(2rem, 1.4rem + 2.1vw, 3.375rem);
  --step-4: clamp(2.5rem, 1.6rem + 3.3vw, 4.875rem);

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: clamp(2.25rem, 1.75rem + 1.5vw, 3rem);
  --space-2xl: clamp(3rem, 2rem + 3vw, 4.5rem);
  --space-section: clamp(3.5rem, 2.25rem + 5.5vw, 9rem);

  /* Layout */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --container: min(100% - (var(--gutter) * 2), 90rem);
  --measure: 38rem;
  --header-h: 5rem;
  --radius: 2px;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------- Reset and base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-l);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--cocoa);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
}

p {
  margin: 0 0 var(--space-s);
  text-wrap: pretty;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

a:hover {
  text-decoration-color: var(--taupe);
}

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

.section--cocoa :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--cream);
}

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

.skip-link {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 100;
  padding: var(--space-xs) var(--space-m);
  background: var(--cocoa);
  color: var(--cream);
  font-size: var(--step--1);
  text-decoration: none;
  transform: translateY(-200%);
}

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

.container {
  width: var(--container);
  margin-inline: auto;
}

/* ---------- Section backgrounds ----------
   Every section carries exactly one of these. The adjacency audit maps
   these four classes to colours - two neighbours must never match. */

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

.section--white {
  background: var(--white);
}

.section--cream {
  background: var(--cream);
}

.section--sand {
  background: var(--sand);
}

.section--cocoa {
  background: var(--cocoa);
  color: var(--cream);
}

/* ---------- Shared text pieces ---------- */

.section-head {
  max-width: var(--measure);
  margin-bottom: var(--space-xl);
}

.section-head h2 + p {
  margin-top: var(--space-m);
}

.rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-block: var(--space-m);
  background: var(--taupe);
  border: 0;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-color: var(--taupe);
}

.text-link:hover {
  text-decoration-color: currentColor;
}

.text-link svg {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform 0.2s var(--ease);
}

.text-link:hover svg {
  transform: translateX(3px);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3.25rem;
  padding: var(--space-xs) var(--space-l);
  border: 1px solid var(--cocoa);
  border-radius: var(--radius);
  background: var(--cocoa);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.btn:hover {
  background: var(--cocoa-soft);
  border-color: var(--cocoa-soft);
}

.btn:active {
  background: var(--cocoa);
  transform: translateY(1px);
}

.btn--outline {
  background: transparent;
  color: var(--cocoa);
}

.btn--outline:hover {
  background: var(--cocoa);
  border-color: var(--cocoa);
  color: var(--cream);
}

.section--cocoa .btn {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--cocoa);
}

.section--cocoa .btn:hover {
  background: var(--sand);
  border-color: var(--sand);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}

/* ---------- Header and navigation ---------- */

.site-header {
  position: relative;
  z-index: 50;
  background: var(--cream);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  width: var(--container);
  min-height: var(--header-h);
  margin-inline: auto;
}

.site-logo {
  display: block;
  flex: none;
}

.site-logo img {
  /* 10rem minimum so logo and Menu button fit side by side at 320px */
  width: clamp(10rem, 7.5rem + 8vw, 15rem);
  height: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--cocoa);
  border-radius: var(--radius);
  background: transparent;
  color: var(--cocoa);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--cocoa);
  color: var(--cream);
}

.nav-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.site-nav.is-open {
  display: block;
}

.site-nav ul {
  width: var(--container);
  margin: 0 auto;
  padding: var(--space-s) 0 var(--space-l);
  list-style: none;
}

.site-nav li + li {
  border-top: 1px solid var(--line);
}

.site-nav a {
  display: block;
  padding: var(--space-s) 0;
  font-size: var(--step-1);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--taupe-deep);
}

.site-nav .nav-book {
  border-top: 0;
  padding-top: var(--space-m);
}

.site-nav .nav-book a {
  display: flex;
  font-size: var(--step--1);
  padding: var(--space-xs) var(--space-l);
}

.site-nav .nav-book a:hover {
  color: var(--cream);
}

@media (min-width: 75em) {
  .nav-toggle {
    display: none;
  }

  .site-nav,
  .site-nav.is-open {
    display: block;
    position: static;
    background: none;
    border: 0;
  }

  .site-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 0.5rem + 1.2vw, 2.25rem);
    width: auto;
    padding: 0;
  }

  .site-nav li + li {
    border-top: 0;
  }

  .site-nav a {
    position: relative;
    padding: var(--space-2xs) 0;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .site-nav li:not(.nav-book) a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--taupe);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
  }

  .site-nav li:not(.nav-book) a:hover::after,
  .site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    color: var(--cocoa);
  }

  .site-nav .nav-book {
    padding-top: 0;
    margin-left: var(--space-2xs);
  }

  .site-nav .nav-book a {
    padding: var(--space-xs) var(--space-m);
  }
}

/* ==========================================================================
   Page sections - written mobile first. Base rules are the phone layout;
   each min-width query only adds to it.
   Breakpoints: 40em (640px) large phone, 48em (768px) tablet,
   56.25em (900px) small laptop, 75em (1200px) desktop nav.
   ========================================================================== */

/* ---------- Swipe row ----------
   Phones get a horizontal, snap-scrolling row instead of a tall stack.
   The next card peeks in so it is obvious there is more. */

.swipe-row {
  display: flex;
  gap: var(--space-s);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--space-s);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  list-style: none;
}

.swipe-row::-webkit-scrollbar {
  display: none;
}

.swipe-row > * {
  flex: 0 0 min(84%, 22rem);
  scroll-snap-align: start;
}

.swipe-row:focus-visible {
  outline-offset: -2px;
}

.swipe-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: var(--space-xs) 0 0;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.swipe-hint svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ---------- Hero (home) ----------
   Phone: the photo fills the screen and fades into cream at the bottom,
   with the copy sitting on the fade.
   Tablet up: the photo is full-bleed and the cream wash comes in from the
   left. Height follows the width but never overruns the window. */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Phone: the whole hero fills the visible window under the header */
  min-height: calc(100svh - var(--header-h));
  background: var(--cream);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 18%;
}

/* Phone: the copy carries its own cream wash, so it always covers the
   text whatever its length. It stays light behind the heading so the
   photo shows through, and builds to near solid behind the smaller text.
   A soft cream halo lifts the heading off the photo. */
.hero__copy {
  width: 100%;
  padding: 4rem var(--gutter) var(--space-l);
  background: linear-gradient(180deg,
    rgba(247, 242, 237, 0) 0,
    rgba(247, 242, 237, 0.55) 4rem,
    rgba(247, 242, 237, 0.72) 40%,
    rgba(247, 242, 237, 0.9) 62%,
    rgba(247, 242, 237, 0.94) 100%);
}

.hero__copy h1 {
  font-size: clamp(2.125rem, 1.4rem + 3.4vw, 2.75rem);
  text-shadow:
    0 0 0.35rem rgba(247, 242, 237, 0.9),
    0 0 1.5rem rgba(247, 242, 237, 0.85);
}

.hero__intro {
  max-width: 32rem;
  margin-block: var(--space-xs) var(--space-m);
  font-size: var(--step-0);
  line-height: 1.55;
}

.hero .btn-row .btn {
  flex: 1 1 100%;
}

/* Phone: Book only, and two trust points, so the hero fits one screen */
.hero__call,
.trust-line .trust-line__extra {
  display: none;
}

.trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  margin: var(--space-m) 0 0;
  padding: var(--space-s) 0 0;
  border-top: 1px solid var(--taupe);
  list-style: none;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

.trust-line li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

@media (min-width: 40em) {
  .hero .btn-row .btn {
    flex: 0 0 auto;
  }

  .hero__call,
  .trust-line .trust-line__extra {
    display: inline-flex;
  }
}

/* Portrait tablets (768-1199 upright): the hero fills the screen, the
   copy is centred vertically over the plainer wall and window on the
   left, with a left-to-right wash, and the photo is shifted so Claire and
   her client sit on the right, clear of the text. */
@media (min-width: 48em) and (orientation: portrait) and (max-width: 74.99em) {
  .hero {
    justify-content: center;
  }

  .hero__media {
    z-index: -2;
  }

  .hero__media img {
    object-position: 85% 50%;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
      rgba(247, 242, 237, 0.95) 0%,
      rgba(247, 242, 237, 0.9) 58%,
      rgba(247, 242, 237, 0.6) 72%,
      rgba(247, 242, 237, 0) 88%);
  }

  .hero__copy {
    width: var(--container);
    margin-inline: auto;
    padding: var(--space-2xl) 0;
    background: none;
  }

  .hero__copy > :not(h1) {
    max-width: 30rem;
  }

  .hero__copy h1 {
    max-width: 16ch;
    font-size: var(--step-4);
    text-shadow: none;
  }

  .hero__intro {
    font-size: var(--step-1);
    line-height: 1.5;
  }
}

@media (min-width: 48em) and (orientation: landscape), (min-width: 75em) {
  .hero {
    justify-content: center;
    /* Fills the window under the header on every screen, so it is never
       short on a tall monitor or taller than a laptop window */
    min-height: max(34rem, calc(100svh - var(--header-h)));
  }

  .hero__media {
    z-index: -2;
  }

  .hero__media img {
    object-position: 62% 45%;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
      rgba(247, 242, 237, 0.97) 0%,
      rgba(247, 242, 237, 0.93) 55%,
      rgba(247, 242, 237, 0.7) 72%,
      rgba(247, 242, 237, 0) 96%);
  }

  .hero__copy {
    width: var(--container);
    margin-inline: auto;
    /* Scales with window height so the hero never overruns a laptop screen */
    padding: clamp(2rem, 7svh, 4.5rem) 0;
    background: none;
  }

  .hero__copy h1 {
    font-size: min(var(--step-4), 8.5svh);
    text-shadow: none;
  }

  .hero__copy > :not(h1) {
    max-width: 28rem;
  }

  .hero__copy h1 {
    max-width: 15ch;
  }

  .hero__intro {
    font-size: var(--step-1);
    line-height: 1.5;
  }
}

@media (min-width: 64em) and (orientation: landscape), (min-width: 75em) {
  .hero::before {
    background: linear-gradient(90deg,
      rgba(247, 242, 237, 0.96) 0%,
      rgba(247, 242, 237, 0.9) 36%,
      rgba(247, 242, 237, 0.55) 54%,
      rgba(247, 242, 237, 0) 72%);
  }

  .hero__copy > :not(h1) {
    max-width: 34rem;
  }

  .hero__copy h1 {
    max-width: 17ch;
  }
}

@media (min-width: 75em) {
  .hero::before {
    background: linear-gradient(90deg,
      rgba(247, 242, 237, 0.95) 0%,
      rgba(247, 242, 237, 0.88) 30%,
      rgba(247, 242, 237, 0.5) 48%,
      rgba(247, 242, 237, 0) 64%);
  }
}

/* ---------- Feature (photo bleeding to the left edge, copy beside) ---------- */

.feature {
  display: grid;
}

.feature__media {
  margin: 0;
}

.feature__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.feature__copy {
  width: var(--container);
  margin-inline: auto;
  padding-block: var(--space-xl) var(--space-section);
}

.feature__copy h2 {
  margin-bottom: var(--space-s);
}

@media (min-width: 48em) {
  .feature__media img {
    aspect-ratio: 2 / 1;
  }

  .feature__copy > * {
    max-width: 40rem;
  }
}

/* Split only from 1024 - on tablets each half was too narrow */
@media (min-width: 64em) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(32rem, 42vw, 52rem);
  }

  .feature__media img {
    height: 100%;
    aspect-ratio: auto;
  }

  .feature__copy {
    width: auto;
    margin: 0;
    align-self: center;
    max-width: calc(36rem + clamp(2rem, 6vw, 8rem));
    padding: var(--space-section) var(--gutter) var(--space-section) clamp(2rem, 6vw, 8rem);
  }
}

/* ---------- Split layout (consultation) ---------- */

.split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.split__copy {
  max-width: var(--measure);
}

.split__copy h2 {
  margin-bottom: var(--space-s);
}

.split__copy .btn-row {
  margin-top: var(--space-l);
}

/* Stays stacked on tablet so the copy keeps a comfortable line length */
@media (min-width: 56.25em) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 8rem);
  }

  .split--media-right .split__media {
    order: 2;
  }
}

/* Consultation: landscape photo with a portrait detail overlapping it */
.layered {
  position: relative;
  padding-bottom: 16%;
}

.layered__main {
  width: 84%;
}

.layered__detail {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36%;
  border: clamp(0.375rem, 0.8vw, 0.75rem) solid var(--white);
}

/* ---------- Treatments ---------- */

.treatments__intro {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

.treatment-list {
  margin-top: 0;
  margin-bottom: 0;
}

.treatment {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.treatment__media {
  margin: 0;
  overflow: hidden;
  background: var(--sand);
}

.treatment__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.treatment__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-m);
  border-top: 2px solid var(--taupe);
}

.treatment h3 {
  margin-bottom: var(--space-2xs);
}

/* The heading link covers the whole card */
.treatment h3 a {
  text-decoration: none;
}

.treatment h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.treatment h3 a:focus-visible {
  outline: none;
}

.treatment:has(h3 a:focus-visible) {
  outline: 2px solid var(--cocoa);
  outline-offset: 4px;
}

.treatment p {
  font-size: var(--step--1);
  line-height: 1.6;
}

.treatment .text-link {
  margin-top: auto;
  padding-top: var(--space-s);
  font-size: var(--step--1);
}

@media (hover: hover) {
  .treatment:hover {
    box-shadow: 0 18px 40px -24px rgba(62, 48, 42, 0.45);
    transform: translateY(-3px);
  }

  .treatment:hover .treatment__media img {
    transform: scale(1.03);
  }
}

/* Large phone and tablet: image beside text, one card per row */
@media (min-width: 40em) {
  .treatment-list.swipe-row {
    display: grid;
    gap: var(--space-m);
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .treatment-list + .swipe-hint {
    display: none;
  }

  .treatment {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .treatment__media img {
    height: 100%;
  }

  .treatment__body {
    justify-content: center;
    padding: var(--space-l);
    border-top: 0;
    border-left: 2px solid var(--taupe);
  }

  .treatment p {
    font-size: var(--step-0);
  }

  .treatment .text-link {
    margin-top: 0;
  }
}

@media (min-width: 56.25em) {
  .treatments__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 8rem);
    align-items: end;
    margin-bottom: var(--space-xl);
  }

  .treatment-list.swipe-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 2.5vw, 3rem);
  }

  .treatment {
    display: flex;
  }

  .treatment__media img {
    height: auto;
  }

  .treatment__body {
    justify-content: flex-start;
    border-left: 0;
    border-top: 2px solid var(--taupe);
  }

  .treatment .text-link {
    margin-top: auto;
  }
}

/* ---------- About (cocoa band) ----------
   Phone and tablet: a small portrait sits beside the heading, the text
   runs full width underneath. Laptop up: portrait column beside the copy. */

.section--snug {
  padding-block: clamp(3.5rem, 2rem + 4vw, 6.5rem);
}

.about-band__grid {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  grid-template-areas:
    "photo head"
    "photo role"
    "text text";
  column-gap: var(--space-m);
  align-items: end;
}

.about-band__portrait {
  grid-area: photo;
  width: 100%;
  margin: 0 0 var(--space-m);
  align-self: start;
}

.about-band__portrait img {
  width: 100%;
  outline: 1px solid var(--taupe);
  outline-offset: 0.375rem;
}

/* The copy's children join the grid directly on smaller screens */
.about-band__copy {
  display: contents;
}

.about-band__copy h2 {
  grid-area: head;
  margin-bottom: var(--space-2xs);
  font-size: var(--step-2);
}

.about-band__role {
  grid-area: role;
  align-self: start;
  margin-bottom: var(--space-m);
  color: var(--taupe);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.about-band__copy > p:not(.about-band__role),
.about-band__copy > .text-link {
  grid-column: 1 / -1;
}

.about-band__copy > .text-link {
  justify-self: start;
  margin-top: var(--space-s);
}

@media (min-width: 40em) {
  .about-band__grid {
    grid-template-columns: 10rem minmax(0, 1fr);
    column-gap: var(--space-l);
  }

  .about-band__portrait img {
    outline-offset: 0.5rem;
  }
}

@media (min-width: 48em) {
  .about-band__grid {
    grid-template-columns: clamp(13rem, 22vw, 20rem) minmax(0, 1fr);
    grid-template-areas: none;
    gap: clamp(3rem, 6vw, 6.5rem);
    align-items: center;
    max-width: 68rem;
    margin-inline: auto;
  }

  /* Padding keeps the offset frame inside the page gutter */
  .about-band__portrait {
    grid-area: auto;
    margin: 0;
    padding: 0.625rem;
    align-self: center;
  }

  .about-band__portrait img {
    outline-offset: 0.625rem;
  }

  .about-band__copy {
    display: block;
  }

  .about-band__copy h2 {
    font-size: var(--step-3);
  }

  .about-band__role {
    font-size: var(--step--1);
  }
}

/* ---------- Reviews ----------
   One featured quote, then three equal-height cards. On phones and tablets
   the three cards swipe; from 900px they stack beside the feature.
   The shared block takes reviews--sand or reviews--white. */

.reviews__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-s) var(--space-m);
  margin-bottom: var(--space-l);
}

.reviews__head .section-head {
  margin-bottom: 0;
}

.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  margin: 0;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

.rating strong {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1;
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--taupe-deep);
}

.stars svg {
  width: 1rem;
  height: 1rem;
}

.reviews__grid {
  display: grid;
  gap: var(--space-m);
}

.review-feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: var(--space-l) var(--space-m);
  background: var(--cocoa);
  color: var(--cream);
}

.review-feature__mark {
  width: 2.5rem;
  height: auto;
  margin-bottom: var(--space-s);
  color: var(--taupe);
}

.review-feature blockquote {
  margin: 0;
}

.review-feature blockquote p {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--step-1);
  line-height: 1.4;
}

.review-feature figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid rgba(184, 156, 136, 0.5);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.review-feature .stars {
  color: var(--sand);
}

.review-list {
  margin-top: 0;
  margin-bottom: 0;
}

.review {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: var(--space-m);
  background: var(--white);
}

.reviews--white .review {
  background: var(--cream);
}

.review .stars {
  margin-bottom: var(--space-xs);
}

.review blockquote {
  flex: 1;
  margin: 0;
}

.review blockquote p {
  font-size: var(--step--1);
  line-height: 1.65;
}

.review figcaption {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
}

@media (min-width: 48em) {
  .review-feature {
    padding: var(--space-xl);
  }

  .review-feature__mark {
    width: 3.5rem;
  }

  .review-feature blockquote p {
    font-size: var(--step-2);
    line-height: 1.3;
  }

  .review-list.swipe-row > * {
    flex-basis: min(46%, 22rem);
  }

  .review blockquote p {
    font-size: var(--step-0);
    line-height: 1.6;
  }
}

@media (min-width: 56.25em) {
  .reviews__head {
    margin-bottom: var(--space-xl);
  }

  .reviews__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 2.5vw, 3rem);
  }

  .review-feature {
    padding: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
  }

  .review-feature__mark {
    width: clamp(3.5rem, 2rem + 3vw, 5rem);
  }

  .review-list.swipe-row {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: var(--space-m);
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .review-list + .swipe-hint {
    display: none;
  }

  .review {
    padding: var(--space-l);
  }
}

/* ---------- FAQ ---------- */

.faq__grid {
  display: grid;
  gap: var(--space-l);
}

.faq__grid .section-head {
  margin-bottom: 0;
}

.faq-list {
  border-top: 1px solid var(--taupe);
}

.faq-item {
  border-bottom: 1px solid var(--taupe);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  min-height: 3.5rem;
  padding: var(--space-s) 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--taupe-deep);
}

.faq-item summary svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  transition: transform 0.25s var(--ease);
}

.faq-item[open] summary svg {
  transform: rotate(45deg);
}

.faq-item__answer {
  max-width: var(--measure);
  padding-bottom: var(--space-m);
}

@media (min-width: 56.25em) {
  .faq__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 6vw, 8rem);
    align-items: start;
  }

  .faq-item summary {
    padding: var(--space-m) 0;
  }
}

/* ---------- Closing CTA band ---------- */

.cta-band {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.cta-band__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 72% 50%;
}

.cta-band__copy {
  width: var(--container);
  margin-inline: auto;
  padding-block: var(--space-l) var(--space-section);
}

.cta-band__copy h2 {
  max-width: 14ch;
  margin-bottom: var(--space-s);
}

.cta-band__copy p {
  max-width: 30rem;
}

.cta-band__copy .btn-row {
  margin-top: var(--space-m);
}

.cta-band__copy .btn {
  flex: 1 1 100%;
}

.cta-band__copy .trust-line {
  border-top-color: var(--taupe);
}

@media (min-width: 40em) {
  .cta-band__copy .btn {
    flex: 0 0 auto;
  }
}

@media (min-width: 48em) {
  .cta-band {
    display: flex;
    align-items: center;
    min-height: clamp(32rem, 44vw, 50rem);
  }

  .cta-band__media {
    position: absolute;
    inset: 0;
  }

  .cta-band__media img {
    height: 100%;
    aspect-ratio: auto;
    object-position: center;
  }

  .cta-band__copy {
    position: relative;
    padding-block: var(--space-section);
  }

  /* Solid sand panel keeps the copy legible over the photo */
  .cta-band__panel {
    max-width: 30rem;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: var(--sand);
  }
}

@media (min-width: 56.25em) {
  .cta-band__panel {
    max-width: 34rem;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--cocoa);
  color: var(--cream);
  padding-block: var(--space-2xl) calc(var(--space-l) + env(safe-area-inset-bottom));
  font-size: var(--step--1);
}

.site-footer a {
  text-decoration-color: rgba(247, 242, 237, 0.35);
}

.site-footer a:hover {
  color: var(--sand);
  text-decoration-color: currentColor;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "brand brand"
    "treatments studio"
    "hours hours";
  gap: var(--space-xl) var(--space-m);
}

.footer__col--brand {
  grid-area: brand;
}

.footer__col--treatments {
  grid-area: treatments;
}

.footer__col--studio {
  grid-area: studio;
}

.footer__col--hours {
  grid-area: hours;
}

.footer__brand img {
  width: 9rem;
  height: auto;
  margin-bottom: var(--space-m);
}

.footer__brand address {
  font-style: normal;
  line-height: 1.7;
}

.footer__contact {
  margin: var(--space-s) 0 0;
  padding: 0;
  list-style: none;
}

.footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.footer__heading {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
}

.footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 44px rows so the links are easy to tap */
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.footer__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3xs) var(--space-m);
  max-width: 18rem;
  margin: 0;
}

.footer__hours dt,
.footer__hours dd {
  margin: 0;
}

.footer__note {
  margin-top: var(--space-s);
  color: var(--sand);
}

.footer__social {
  display: flex;
  gap: var(--space-m);
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
}

.footer__social svg {
  width: 1.25rem;
  height: 1.25rem;
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(184, 156, 136, 0.4);
}

.footer__base p {
  margin: 0;
}

/* Tablet: the brand block runs across the top in three columns, with
   Treatments, Studio and Opening hours lined up underneath it */
@media (min-width: 48em) {
  .footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "brand brand brand"
      "treatments studio hours";
    gap: var(--space-xl) var(--space-l);
  }

  .footer__brand {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-l);
    align-items: start;
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid rgba(184, 156, 136, 0.4);
  }

  .footer__brand img {
    grid-row: span 2;
    margin: 0;
  }

  .footer__brand address {
    grid-column: 2;
    grid-row: 1;
  }

  .footer__contact {
    grid-column: 3;
    grid-row: 1;
    margin: -0.6rem 0 0;
  }

  .footer__social {
    grid-column: 3;
    grid-row: 2;
  }
}

@media (min-width: 64em) {
  .footer__brand {
    display: block;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .footer__brand img {
    margin-bottom: var(--space-m);
  }

  .footer__contact {
    margin: var(--space-s) 0 0;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    grid-template-areas: "brand treatments studio hours";
    gap: clamp(2rem, 4vw, 5rem);
  }
}

/* ==========================================================================
   Treatment pages
   ========================================================================== */

/* ---------- Page hero ----------
   Phone: photo above the copy. From 900px: copy on cream to the left,
   photo bleeding to the right edge. */

.page-hero {
  display: grid;
}

.page-hero__media {
  overflow: hidden;
}

.page-hero__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-hero__copy {
  width: var(--container);
  margin-inline: auto;
  padding-block: var(--space-l) var(--space-xl);
}

.page-hero__copy h1 {
  max-width: 18ch;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
}

@media (min-width: 56.25em) {
  /* No ch cap from 900: short headings stay on one line, longer ones
     wrap into balanced lines */
  .page-hero__copy h1 {
    max-width: none;
    font-size: min(clamp(2.25rem, 1.5rem + 3vw, 4.25rem), 8svh);
  }
}

.page-hero__copy .hero__intro {
  max-width: 34rem;
}

.page-hero .btn-row .btn {
  flex: 1 1 100%;
}

@media (min-width: 40em) {
  .page-hero .btn-row .btn {
    flex: 0 0 auto;
  }
}

@media (min-width: 48em) {
  .page-hero__media img {
    aspect-ratio: 2 / 1;
  }

  .page-hero__copy .hero__intro {
    font-size: var(--step-1);
    line-height: 1.5;
  }
}

@media (min-width: 56.25em) {
  /* The copy column is sized from its content rather than split 50/50:
     left padding lines the text up with the logo, the text block has a
     set width, and the space between text and photo grows with the screen
     (capped at 10rem). On wide monitors this stops the text sitting hard
     against the photo with a large empty margin on its left. */
  .page-hero {
    --pad-l: max(var(--gutter), (100vw - 90rem) / 2);
    --pad-r: clamp(clamp(2rem, 4vw, 5rem), var(--pad-l), 10rem);
    --copy-w: clamp(28rem, 42vw, 40rem);
    grid-template-columns: calc(var(--pad-l) + var(--copy-w) + var(--pad-r)) minmax(0, 1fr);
    min-height: max(32rem, calc(100svh - var(--header-h)));
  }

  .page-hero__media {
    order: 2;
  }

  .page-hero__media img {
    height: 100%;
    aspect-ratio: auto;
  }

  .page-hero__copy {
    width: auto;
    margin: 0;
    align-self: center;
    /* Left edge lines up with the header container */
    padding: clamp(2rem, 7svh, 4.5rem) var(--pad-r) clamp(2rem, 7svh, 4.5rem) var(--pad-l);
  }

  /* Intro also scales with window height, so short laptop windows fit */
  .page-hero__copy .hero__intro {
    max-width: none;
    font-size: min(var(--step-1), 2.6svh);
  }
}

/* Wide monitors (1600+, Dan 2 Nov): the cream panel gets slightly more
   than half the width and the copy sits centred in it, both ways, at a
   larger size. Text inside the block stays left-aligned. 1440 and below
   keep the logo-aligned layout above. */
@media (min-width: 100em) {
  .page-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .page-hero__copy {
    justify-self: center;
    width: min(48rem, 100% - 8rem);
    padding: clamp(2rem, 7svh, 4.5rem) 0;
  }

  .page-hero__copy h1 {
    font-size: min(5.25rem, 9svh, 5vw);
  }

  .page-hero__copy .hero__intro {
    font-size: min(1.625rem, 2.9svh);
  }

  .page-hero .crumbs,
  .page-hero .trust-line {
    font-size: var(--step-0);
  }

  .page-hero .btn {
    min-height: 3.5rem;
    padding-inline: var(--space-xl);
  }
}

/* ---------- Breadcrumbs ---------- */

.crumbs {
  margin-bottom: var(--space-m);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li + li::before {
  content: "/" / "";
  margin: 0 var(--space-2xs);
  color: var(--taupe-deep);
}

.crumbs a {
  text-decoration-color: var(--taupe);
}

.crumbs a[aria-current="page"] {
  text-decoration: none;
}

/* ---------- Who it suits ---------- */

.suits {
  display: grid;
  gap: var(--space-m);
}

.suits__col {
  padding: var(--space-l) var(--space-m);
  background: var(--white);
  border-top: 2px solid var(--taupe);
}

.suits__col--alt {
  background: transparent;
  border: 1px solid var(--taupe);
}

.suits__col h3 {
  margin-bottom: var(--space-m);
  font-size: var(--step-1);
}

.suits__col > p {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}

.check-list {
  display: grid;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
}

.check-list svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2em;
  color: var(--taupe-deep);
}

@media (min-width: 48em) {
  .suits {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-l);
  }

  .suits__col {
    padding: var(--space-xl) var(--space-l);
  }
}

/* ---------- Gallery and lightbox ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cream);
  cursor: zoom-in;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}

@media (hover: hover) {
  .gallery__item:hover img {
    transform: scale(1.03);
  }
}

@media (min-width: 40em) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s);
  }
}

@media (min-width: 64em) {
  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

/* Six-photo sets sit in two even rows of three */
@media (min-width: 64em) {
  .gallery--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Long galleries show the first 12 photos with a button for the rest.
   Without JavaScript every photo shows and the button stays hidden. */
.js .gallery--collapsible:not(.is-expanded) .gallery__extra {
  display: none;
}

.gallery__more {
  margin-top: var(--space-l);
  text-align: center;
}

.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(62, 48, 42, 0.96);
  color: var(--cream);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: rgba(62, 48, 42, 0.96);
}

.lightbox__figure {
  margin: 0;
  padding: 4rem var(--gutter) 5.5rem;
  text-align: center;
}

.lightbox__img {
  width: auto;
  max-width: min(100%, 52rem);
  max-height: calc(100svh - 11rem);
  margin-inline: auto;
}

.lightbox__caption {
  max-width: 40rem;
  margin: var(--space-s) auto 0;
  font-size: var(--step--1);
  color: var(--sand);
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(217, 196, 180, 0.6);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.lightbox__btn:hover {
  background: rgba(247, 242, 237, 0.12);
}

.lightbox__btn:focus-visible {
  outline-color: var(--cream);
}

.lightbox__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lightbox__close {
  top: var(--space-s);
  right: var(--space-s);
}

.lightbox__prev,
.lightbox__next {
  bottom: var(--space-m);
}

.lightbox__prev {
  left: calc(50% - 3.5rem);
}

.lightbox__next {
  right: calc(50% - 3.5rem);
}

@media (min-width: 56.25em) {
  .lightbox__figure {
    padding: 4rem 6rem;
  }

  .lightbox__img {
    max-height: calc(100svh - 9rem);
  }

  .lightbox__prev,
  .lightbox__next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .lightbox__prev {
    left: var(--space-l);
  }

  .lightbox__next {
    right: var(--space-l);
  }
}

/* ---------- Steps (cocoa band) ---------- */

.steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding: 0 0 var(--space-l) var(--space-l);
  border-left: 1px solid rgba(184, 156, 136, 0.6);
}

.steps li:last-child {
  padding-bottom: 0;
}

/* Small taupe marker on the line for each stage */
.steps li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: -0.3125rem;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--taupe);
}

.steps h3 {
  margin-bottom: var(--space-2xs);
  font-size: var(--step-1);
}

.steps p {
  max-width: 32rem;
  color: var(--cream);
}

@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-l);
  }

  .steps li,
  .steps li:last-child {
    padding: var(--space-m) 0 0;
    border-left: 0;
    border-top: 1px solid rgba(184, 156, 136, 0.6);
  }

  .steps li::before {
    top: -0.3125rem;
    left: 0;
  }
}

@media (min-width: 64em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2xl) clamp(2rem, 4vw, 4rem);
  }
}

/* ---------- Pair of treatment cards (other treatments) ---------- */

@media (min-width: 56.25em) {
  .treatment-list--pair.swipe-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* From 1024 each card in the pair lays its image beside the text */
@media (min-width: 64em) {
  .treatment-list--pair .treatment {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .treatment-list--pair .treatment__media img {
    height: 100%;
  }

  .treatment-list--pair .treatment__body {
    justify-content: center;
    border-top: 0;
    border-left: 2px solid var(--taupe);
  }

  .treatment-list--pair .treatment .text-link {
    margin-top: 0;
  }
}

/* ---------- Compare table (services hub) ----------
   Phone: each treatment becomes its own block, with the column name shown
   beside each value. From 768: a normal table. */

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: 1.55;
}

.compare thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.compare tr {
  display: block;
  margin-bottom: var(--space-m);
  padding: var(--space-m);
  background: var(--cream);
  border-top: 2px solid var(--taupe);
}

.compare th[scope="row"] {
  display: block;
  margin-bottom: var(--space-s);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 400;
  text-align: left;
}

.compare th[scope="row"] a {
  text-decoration-color: var(--taupe);
}

.compare td {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-s);
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--line);
}

/* Cocoa, not taupe-deep: these small labels sit on cream */
.compare td::before {
  content: attr(data-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cocoa);
}

.compare__note {
  max-width: var(--measure);
  margin-top: var(--space-l);
}

@media (min-width: 48em) {
  .compare {
    display: table;
    font-size: var(--step-0);
  }

  .compare thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .compare tr {
    display: table-row;
    margin: 0;
    padding: 0;
    background: none;
    border-top: 0;
  }

  .compare thead th {
    padding: 0 var(--space-m) var(--space-s) 0;
    border-bottom: 2px solid var(--taupe);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    color: var(--taupe-deep);
  }

  .compare th[scope="row"],
  .compare td {
    display: table-cell;
    padding: var(--space-m) var(--space-m) var(--space-m) 0;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }

  .compare th[scope="row"] {
    width: 18%;
    margin: 0;
  }

  .compare td::before {
    content: none;
  }
}

/* ==========================================================================
   About page
   ========================================================================== */

/* ---------- Principles (natural results) ---------- */

.principles__intro {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}

.principles__intro h2 {
  max-width: 14ch;
}

.principles__intro > div {
  max-width: var(--measure);
}

.principles {
  display: grid;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.principles li {
  padding-top: var(--space-m);
  border-top: 2px solid var(--taupe);
}

.principles h3 {
  margin-bottom: var(--space-2xs);
  font-size: var(--step-1);
}

@media (min-width: 48em) {
  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3.5rem);
  }
}

@media (min-width: 56.25em) {
  .principles__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 8rem);
    align-items: start;
  }
}

/* ---------- The studio ----------
   One wide photo with two smaller ones beneath it. */

.studio {
  display: grid;
  gap: var(--space-xl);
}

.studio__copy {
  max-width: var(--measure);
}

.studio__copy h2 {
  margin-bottom: 0;
}

.studio__copy .text-link {
  margin-top: var(--space-m);
}

.studio__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.studio__photos img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.studio__photos .studio__main {
  grid-column: 1 / -1;
}

@media (min-width: 40em) {
  .studio__photos {
    gap: var(--space-s);
  }
}

@media (min-width: 56.25em) {
  .studio {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: center;
  }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* WhatsApp button: cocoa like the main button, with the icon */
.btn--whatsapp svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

/* ---------- Ways to get in touch ----------
   Each card is one link. One column on phones, two from 768, four from
   1440 (below that the email address would wrap in a quarter column). */

.contact-methods {
  display: grid;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas:
    "icon name"
    "icon value"
    "icon note";
  column-gap: var(--space-s);
  height: 100%;
  padding: var(--space-m);
  /* The card is a size container so the value can scale to fit it */
  container-type: inline-size;
  background: var(--cream);
  border-top: 2px solid var(--taupe);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.contact-card:hover {
  background: var(--sand);
}

.contact-card__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--taupe);
  border-radius: 50%;
}

.contact-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.contact-card__name {
  grid-area: name;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-card__value {
  grid-area: value;
  margin-top: var(--space-3xs);
  font-family: var(--font-serif);
  /* Body size, stepped down only when the card is too narrow for the
     email address (about 14em wide in Bodoni Moda at this size) to sit on one line.
     Every card in a row is the same width, so all four values share
     the same size. */
  font-size: var(--step-0);
  font-size: min(var(--step-0), (100cqi - 2.75rem - var(--space-s)) / 15.5);
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--taupe);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.contact-card__note {
  grid-area: note;
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* WhatsApp is the main route, so it is the dark card */
.contact-card--primary {
  background: var(--cocoa);
  border-top-color: var(--cocoa);
  color: var(--cream);
}

.contact-card--primary:hover {
  background: var(--cocoa-soft);
}

.contact-card--primary .contact-card__icon {
  border-color: var(--sand);
}

.contact-card--primary:focus-visible {
  outline-color: var(--cocoa);
}

@media (min-width: 48em) {
  .contact-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

@media (min-width: 90em) {
  .contact-methods {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .contact-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "icon"
      "name"
      "value"
      "note";
    padding: var(--space-l);
  }

  .contact-card__icon {
    margin-bottom: var(--space-m);
  }

  .contact-card__value {
    font-size: min(var(--step-0), 100cqi / 15.5);
  }
}

@media (hover: hover) {
  .contact-card:hover {
    box-shadow: 0 18px 40px -24px rgba(62, 48, 42, 0.45);
    transform: translateY(-3px);
  }
}

.contact-book {
  margin-top: var(--space-l);
}

/* ---------- Find the studio ---------- */

.visit {
  display: grid;
  gap: var(--space-xl);
}

.visit__copy {
  max-width: var(--measure);
}

.visit__copy h2 {
  margin-bottom: 0;
}

.visit__address {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-xs);
  margin: var(--space-m) 0 var(--space-l);
  font-style: normal;
  line-height: 1.6;
}

.visit__address svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--taupe-deep);
}

.visit__hours {
  padding: var(--space-l) var(--space-m);
  background: var(--cream);
  border-top: 2px solid var(--taupe);
}

.visit__hours h3 {
  margin-bottom: var(--space-s);
  font-size: var(--step-1);
}

.hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs) var(--space-l);
  margin: 0;
}

.hours dt,
.hours dd {
  margin: 0;
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--line);
}

.hours dt {
  font-weight: 500;
}

.visit__note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
}

.visit__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin: var(--space-s) 0 0;
  padding: 0;
  list-style: none;
}

.visit__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
}

.visit__social svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 48em) {
  .visit__hours {
    padding: var(--space-xl) var(--space-l);
  }
}

@media (min-width: 56.25em) {
  .visit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(3rem, 6vw, 8rem);
    align-items: center;
  }
}

/* ==========================================================================
   Legal, 404 and thank-you pages
   ========================================================================== */

/* ---------- Page head (short cream header for text pages) ---------- */

.page-head {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.page-head h1 {
  max-width: 20ch;
  font-size: var(--step-4);
}

.page-head__intro {
  max-width: var(--measure);
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: 1.5;
}

.page-head__meta {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

/* ---------- Legal layout: contents list beside the text from 1024 ---------- */

.legal {
  display: grid;
  gap: var(--space-xl);
}

.legal__toc {
  padding: var(--space-m);
  background: var(--cream);
  border-top: 2px solid var(--taupe);
  font-size: var(--step--1);
}

.legal__toc h2 {
  margin-bottom: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal__toc ol {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
  padding-left: 1.25rem;
}

.legal__toc a {
  display: inline-block;
  padding: var(--space-3xs) 0;
  text-decoration-color: var(--taupe);
}

@media (min-width: 64em) {
  .legal {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }

  .legal__toc {
    position: sticky;
    top: var(--space-l);
  }
}

/* ---------- Prose ---------- */

.prose {
  max-width: 44rem;
}

.prose section + section {
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}

.prose h2 {
  margin-bottom: var(--space-s);
  font-size: var(--step-2);
  scroll-margin-top: var(--space-l);
}

.prose h3 {
  margin: var(--space-m) 0 var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
}

.prose p,
.prose ul {
  margin: 0 0 var(--space-s);
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: var(--space-2xs);
}

.prose li::marker {
  color: var(--taupe-deep);
}

.prose a {
  text-decoration-color: var(--taupe);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

/* ---------- Message pages (404, thank you) ---------- */

.message-page {
  display: flex;
  align-items: center;
  min-height: max(32rem, calc(100svh - var(--header-h)));
  padding-block: var(--space-2xl);
}

.message-page__inner {
  max-width: 48rem;
}

.message-page h1 {
  font-size: var(--step-4);
}

.message-page .lede {
  margin-top: var(--space-m);
}

.message-page .btn-row {
  margin-top: var(--space-l);
}

.message-page__sub {
  margin: var(--space-xl) 0 var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quick-links {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--taupe);
}

.quick-links li {
  border-bottom: 1px solid var(--taupe);
}

.quick-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  min-height: 3.25rem;
  padding: var(--space-xs) 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  text-decoration: none;
}

.quick-links a:hover span {
  text-decoration: underline;
  text-decoration-color: var(--taupe);
}

.quick-links svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  transition: transform 0.2s var(--ease);
}

.quick-links a:hover svg {
  transform: translateX(3px);
}

@media (min-width: 40em) {
  .quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-l);
  }
}

/* ---------- Scroll reveal ----------
   Only hides content once main.js has added .js to the html element,
   so nothing is lost without JavaScript. The hero is never revealed. */

.js .reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Motion ---------- */

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

  .treatment:hover,
  .treatment:hover .treatment__media img {
    transform: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Small laptop (900-1199px) tightening ----------
   The longest card heading (Ombré powder brows) must stay on one line,
   so every card heading steps down together. */

@media (min-width: 56.25em) and (max-width: 74.99em) {
  .treatment h3 {
    font-size: var(--step-1);
  }
}