@font-face {
    font-family: 'Sackers Gothic';
    src: url('../../fonts/sackers-gothic-light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Biro Script';
    src: url('../../fonts/biro-script.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }



  :root {
    --bg: #F5F2EC;
    --surface: #EFEBE3;
    --border: #DDD8CF;
    --text-primary: #000000;
    --text-secondary: #6B6760;
    --accent: #2C2B28;
    --brown: #100A06;          /* near-black, warm-brown undertone */
    --brown-soft: #3A2A1F;     /* soft contrast on brown */
    --warm-tan: #B8A287;       /* bridges brown and cream */

    --font-display: 'Marcellus', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'Helvetica Neue', 'Inter', Arial, sans-serif;
    --font-editorial: 'Cormorant Garamond', Georgia, serif;
    --font-hero: 'Sackers Gothic', 'Marcellus', Georgia, serif;
  }

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

  /* =================================================================
     PREMIUM UX / UI LAYER
     ================================================================= */

  /* 1. Loading splash (deep brown with faint background photograph) */
  .splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--brown);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 700ms ease;
    pointer-events: none;
    overflow: hidden;
  }
  /* Background image, softly visible, slow pan/zoom for a "scrolling" feel */
  .splash__bg {
    position: absolute;
    inset: -8%;
    background-image: url('../../images/splash-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(1) brightness(0.7) contrast(1.05);
    opacity: 0.55;
    z-index: 1;
    will-change: transform;
    animation: splash-pan 14s ease-in-out infinite alternate;
  }
  @keyframes splash-pan {
    0%   { transform: scale(1.04) translate(-1%, 1.2%); }
    100% { transform: scale(1.12) translate(1.2%, -1.4%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .splash__bg { animation: none; }
  }

  /* Brand brown wash on top */
  .splash::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--brown);
    opacity: 0.55;
    z-index: 2;
    mix-blend-mode: multiply;
  }
  /* Vignette for centre focus */
  .splash::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 3;
  }

  .splash__monogram {
    position: relative;
    z-index: 5;
    width: 74px;
    height: auto;
    display: block;
    margin-bottom: 22px;
    opacity: 0;
    animation: splash-in 1100ms ease 120ms forwards;
  }

  .splash__mark {
    position: relative;
    z-index: 5;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 13px;
    font-weight: 400;
    color: #FFFFFF;
    white-space: nowrap;
    opacity: 0;
    animation: splash-in 1100ms ease forwards;
  }

  .splash__rule {
    position: relative;
    z-index: 5;
    width: 36px;
    height: 1px;
    background-color: rgba(245, 242, 236, 0.4);
    margin: 22px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    animation: splash-rule 900ms ease 320ms forwards;
  }

  .splash__sub {
    position: relative;
    z-index: 5;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 13px;
    color: #FFFFFF;
    margin-top: 18px;
    opacity: 0;
    animation: splash-sub 800ms ease 520ms forwards;
  }

  @keyframes splash-in {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes splash-rule {
    to { transform: scaleX(1); }
  }
  @keyframes splash-sub {
    to { opacity: 1; }
  }

  .splash.is-hidden { opacity: 0; }
  .splash.is-removed { display: none; }

  /* 2. Fade-up reveals */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: opacity, transform;
  }
  .reveal.is-revealed { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* 3. Hero Ken Burns */
  @keyframes ken-burns {
    0%   { transform: scale(1.00); }
    100% { transform: scale(1.08); }
  }
  .hero .ph__img {
    animation: ken-burns 24s ease-in-out infinite alternate;
    transform-origin: center center;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero .ph__img { animation: none; }
  }

  /* 4. Trio image hover (scale only, saturation is scroll-driven) */
  .trio-item__photo {
    transition: transform 600ms ease;
  }
  .trio-item__photo img {
    transition: transform 700ms ease;
  }
  .trio-item:hover .trio-item__photo img {
    transform: scale(1.04);
  }
  /* SPMU image: crop right (clipboard) + pull visible area up so the top of the head shows */
  #spmu .trio-item__photo img {
    transform: scale(1.55);
    transform-origin: 18% 18%;
  }
  #spmu:hover .trio-item__photo img {
    transform: scale(1.6);
    transform-origin: 18% 18%;
  }

  /* Hair + Laser images: pure B&W to match hero banner grading */
  #hair .trio-item__photo img.scroll-color,
  #laser .trio-item__photo img.scroll-color {
    filter: grayscale(1) brightness(0.96) contrast(1.02);
  }

  /* ---- Scroll-driven B&W → colour ---- */
  .scroll-color {
    --sat: 0; /* 0 = B&W, 1 = full colour. JS updates this. */
    filter:
      grayscale(calc((1 - var(--sat)) * 100%))
      brightness(calc(0.9 + var(--sat) * 0.1))
      sepia(calc((1 - var(--sat)) * 0.06));
    transition: filter 220ms linear;
    will-change: filter;
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-color { --sat: 1; transition: none; }
  }

  /* ---------- Closing full-width image (before footer) ---------- */
  .closing-image {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 520px;
    overflow: hidden;
    background-color: #1A1916;
  }
  .closing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* B&W grading to match the hero images */
    filter: grayscale(1) brightness(0.78) contrast(1.02);
    display: block;
  }
  .closing-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
  }
  .closing-image__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 32px;
    color: #FFFFFF;
  }
  .closing-image__eyebrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: #FFFFFF;
    margin-bottom: 24px;
  }
  .closing-image__line {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.25;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
  }
  @media (max-width: 700px) {
    .closing-image { height: 60vh; min-height: 420px; }
    .closing-image__line { white-space: normal; font-size: clamp(24px, 7vw, 32px); }
  }

  /* ---------- Diptych: split-screen full-width with overlay text ---------- */
  .diptych {
    position: relative;
    height: 86vh;
    height: 86svh;
    min-height: 620px;
    overflow: hidden;
    background-color: #1A1916;
  }
  @supports (height: 86dvh) { .diptych { height: 86dvh; } }

  .diptych__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
  }
  .diptych__pane {
    position: relative;
    overflow: hidden;
  }
  .diptych__pane img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Hero-matching B&W grading */
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    display: block;
  }
  /* Slight dim on both panes for overlay legibility (without losing the hero grading on the photos themselves) */
  .diptych__pane::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    z-index: 1;
  }
  .diptych__pane::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
  }
  .diptych__pane-tag {
    position: absolute;
    top: 32px;
    z-index: 2;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10.5px;
    color: #FFFFFF;
  }
  .diptych__pane--left .diptych__pane-tag { left: 32px; }
  .diptych__pane--right .diptych__pane-tag { right: 32px; }

  .diptych__overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 32px;
    color: #FFFFFF;
    pointer-events: none;
  }
  .diptych__overlay .eyebrow {
    color: #FFFFFF;
    margin-bottom: 28px;
  }
  .diptych__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 4vw, 54px);
    line-height: 1.15;
    color: #FFFFFF;
    max-width: 22ch;
    margin: 0 0 32px;
  }
  .diptych__sub {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.55;
    color: #FFFFFF;
    max-width: 44ch;
    margin: 0;
  }

  @media (max-width: 700px) {
    .diptych { height: auto; min-height: 0; }
    .diptych__grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: 80vh; min-height: 560px; }
    .diptych__title { font-size: clamp(26px, 8vw, 36px); }
  }

  /* ---- Cinematic full-bleed brand moment ---- */
  .cinematic {
    position: relative;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background-color: #1A1916;
  }
  @supports (height: 100dvh) { .cinematic { height: 100dvh; } }

  .cinematic__media {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .cinematic__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.55);
    transform: scale(1.04);
    will-change: transform, filter;
  }
  .cinematic__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.55) 100%);
    z-index: 2;
  }

  .cinematic__overlay {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFFFFF;
    padding: 0 32px;
  }

  .cinematic__eyebrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: #FFFFFF;
    margin-bottom: 36px;
  }

  .cinematic__quote {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 4.2vw, 60px);
    line-height: 1.15;
    color: #FFFFFF;
    max-width: 22ch;
    margin: 0 0 48px;
  }

  .cinematic__cta {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    color: #FFFFFF;
    padding: 16px 28px;
    border: 1px solid rgba(245, 242, 236, 0.7);
    transition: background-color 240ms ease, color 240ms ease;
  }
  .cinematic__cta:hover {
    background-color: #F5F2EC;
    color: var(--text-primary);
  }

  @media (max-width: 700px) {
    .cinematic__quote { font-size: clamp(26px, 8vw, 36px); }
  }

  /* Breather variant: slightly shorter and lighter than the brand cinematic */
  .cinematic--breather { height: 60vh; min-height: 460px; }
  @supports (height: 60dvh) { .cinematic--breather { height: 60dvh; } }
  .cinematic--breather .cinematic__media img { filter: grayscale(1) brightness(0.65) contrast(0.96); }

  /* Left-aligned variant (training band): copy on the left third, photograph breathes on the right */
  .cinematic--left .cinematic__overlay {
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
  }
  .cinematic--left .cinematic__overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right, rgba(16,10,6,0.62) 0%, rgba(16,10,6,0.28) 52%, rgba(16,10,6,0) 100%);
    pointer-events: none;
  }
  .cinematic--left .cinematic__eyebrow { margin-bottom: 26px; }
  .cinematic--left .cinematic__quote { font-size: clamp(22px, 2.15vw, 31px); max-width: 30ch; line-height: 1.14; margin-bottom: 20px; text-wrap: balance; }
  .cinematic__dek {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    color: #FFFFFF;
    max-width: 46ch;
    margin: 0 0 32px;
  }
  .cinematic--left .cinematic__cta span { display: inline-block; margin-left: 8px; transition: transform 300ms cubic-bezier(.22,.61,.36,1); }
  .cinematic--left .cinematic__cta:hover span { transform: translateX(4px); }
  @media (max-width: 700px) {
    .cinematic--left .cinematic__overlay { padding: 0 24px; }
    .cinematic--left .cinematic__overlay::before { background: linear-gradient(to top, rgba(16,10,6,0.7) 0%, rgba(16,10,6,0.3) 60%, rgba(16,10,6,0.1) 100%); }
  }
  .trio-item__link {
    transition: opacity 200ms ease;
  }
  .trio-item__link .arrow {
    display: inline-block;
    transition: transform 280ms ease;
    margin-left: 4px;
  }
  .trio-item:hover .trio-item__link .arrow {
    transform: translateX(6px);
  }

  /* 5. Sticky nav minimise */
  .nav.is-minimised {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .nav.is-minimised .nav__brand { font-size: 11px; }
  .nav.is-minimised .nav__cta { padding: 7px 14px; font-size: 9.5px; }


  /* 8. Letter-by-letter hero reveal */
  .hero__title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    animation: char-in 600ms ease forwards;
  }
  .hero__sub.is-revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 600ms ease 1200ms, transform 600ms ease 1200ms;
  }
  .hero__sub {
    opacity: 0;
    transform: translateY(8px);
  }
  @keyframes char-in {
    to { opacity: 1; transform: translateY(0); }
  }

  /* 9. Marquee strip */
  .marquee {
    background-color: #FFFFFF;
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,0.04);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    padding: 22px 0;
  }
  .marquee__track {
    display: flex;
    gap: 56px;
    width: max-content;
    animation: marquee 38s linear infinite;
  }
  .marquee__item {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 56px;
  }
  .marquee__item::after {
    content: '·';
    opacity: 1;
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
  }

  /* 10. Section indicator */
  .section-indicator {
    position: fixed;
    bottom: 28px;
    right: 32px;
    z-index: 40;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10.5px;
    color: var(--text-primary);
    opacity: 0;
    transition: opacity 300ms ease, color 300ms ease;
    pointer-events: none;
    mix-blend-mode: difference;
    color: #FFFFFF;
  }
  .section-indicator.is-visible { opacity: 1; }
  .section-indicator__current { color: inherit; }
  .section-indicator__total { opacity: 1; }

  /* Form labels: simple stacked layout (above input) */

  /* Submit success morph */
  .btn.is-success {
    background-color: transparent;
    border-color: #B8A287;
    color: var(--text-primary);
    pointer-events: none;
  }

  /* 12. Magnetic CTAs */
  .btn, .nav__cta, .trio-item__link, .journal-card__link, .journal__head-link {
    position: relative;
    will-change: transform;
  }

  /* Native browser scrolling, no smoothing */
  html { scroll-behavior: auto; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  html { overflow-x: hidden; }

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

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

  /* ---------- Typographic primitives ---------- */
  .eyebrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 400;
  }

  .display {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 400;
    line-height: 1.25;
    color: var(--text-primary);
  }

  .editorial {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
  }

  /* ---------- Primary Navigation ---------- */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 22px 48px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease, padding 280ms ease;
    color: #FFFFFF;
    border-bottom: 1px solid transparent;
    text-shadow: 0 1px 12px rgba(0,0,0,0.35);
  }

  .nav::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(16,10,6,0.55) 0%, rgba(16,10,6,0.25) 55%, rgba(16,10,6,0) 100%);
    pointer-events: none;
    transition: opacity 280ms ease;
    z-index: -1;
  }

  .nav.is-scrolled::before { opacity: 0; }
  .nav.is-scrolled { text-shadow: none; }

  .nav.is-scrolled {
    background-color: rgba(245, 242, 236, 0.96);
    color: var(--text-primary);
    border-bottom-color: var(--border);
    padding: 16px 48px;
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
  }

  .nav__links {
    display: flex;
    gap: 32px;
    align-items: center;
  }

  .nav__links--right { justify-content: flex-end; }

  /* Cookie banner */
  .cookie {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 65;
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    padding: 24px 28px;
    width: 360px;
    max-width: calc(100vw - 48px);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 360ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cookie.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .cookie__eyebrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: block;
  }
  .cookie__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    color: var(--text-primary);
    margin: 0 0 10px;
    line-height: 1.3;
  }
  .cookie__body {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 18px;
  }
  .cookie__body a {
    color: var(--text-primary);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
  }
  .cookie__actions {
    display: flex;
    gap: 10px;
  }
  .cookie__btn {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    padding: 12px 18px;
    border: 1px solid var(--text-primary);
    background: var(--text-primary);
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease;
    flex: 1;
  }
  .cookie__btn--secondary {
    background: transparent;
    color: var(--text-primary);
  }
  .cookie__btn:hover { opacity: 0.75; }

  @media (max-width: 700px) {
    .cookie { left: 12px; right: 12px; bottom: 12px; width: auto; }
  }

  /* Disabled nav items (unfinished pages) */
  .nav__link-soon {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: inherit;
    opacity: 1;
    cursor: default;
    pointer-events: none;
    user-select: none;
  }

  .nav__links a {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: inherit;
    opacity: 1;
    transition: opacity 200ms ease;
  }

  .nav__links a:hover { opacity: 0.72; }

  .nav__brand {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }

  .nav__brand .nav__brand-italic {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    margin-left: 6px;
    font-size: 15px;
  }

  .nav__cta {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    padding: 9px 18px;
    border: 1px solid currentColor;
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
    margin-left: 8px;
    line-height: 1;
  }

  .nav__cta:hover {
    background-color: #F5F2EC;
    color: var(--text-primary);
    border-color: #F5F2EC;
  }

  .nav.is-scrolled .nav__cta:hover {
    background-color: var(--accent);
    color: #FFFFFF;
    border-color: var(--accent);
  }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    min-height: 100svh;
  }
  @supports (height: 100dvh) { .hero { height: 100dvh; } }

  .hero--single {
    grid-template-columns: 1fr;
  }

  .hero__pane, .hero__single {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  .hero--single .ph,
  .hero--single .ph__img {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
  }

  .hero--single .ph__img {
    object-fit: cover;
    object-position: center;
  }

  .hero__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.36em;
    font-size: 10.5px;
    color: #FFFFFF;
    margin-bottom: 24px;
  }

  /* ---------- Image placeholder ---------- */
  .ph {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .ph--dark { background-color: #1A1916; color: #FFFFFF; }
  .ph--taupe { background-color: #B9AA97; color: var(--text-primary); }
  .ph--surface { background-color: #C8BFB1; color: var(--text-primary); }
  .ph--char { background-color: #2C2B28; color: #FFFFFF; }

  .ph__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.4) brightness(0.92) sepia(0.06);
    z-index: 1;
  }

  .ph--dark .ph__img { filter: grayscale(0.45) brightness(0.85) sepia(0.05); }

  /* Hero photos chosen on purpose. Let them speak */
  .hero .ph__img { filter: brightness(0.96); }

  /* Founder photo: pure B&W to match hero grading */
  .founder__images .ph__img { filter: grayscale(1) brightness(0.96) contrast(1.02); }

  .ph__inner, .ph__corner { z-index: 2; }
  .ph:has(.ph__img) .ph__inner,
  .ph:has(.ph__img) .ph__corner { display: none; }

  .ph__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: inherit;
  }

  .ph__icon {
    width: 32px;
    height: 32px;
    border: 1px solid currentColor;
    display: grid;
    place-items: center;
    opacity: 0.7;
  }

  .ph__icon svg {
    width: 14px; height: 14px; stroke: currentColor; stroke-width: 1; fill: none;
  }

  .ph__label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10.5px;
    opacity: 1;
  }

  .ph__caption {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13px;
    opacity: 1;
    margin-top: 2px;
  }

  .ph__corner {
    position: absolute;
    top: 24px; left: 24px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    opacity: 0.55;
  }

  .ph__corner--br {
    top: auto; left: auto; bottom: 24px; right: 24px;
  }

  .hero .ph__corner { top: 80px; left: 48px; }
  .hero .ph__corner--br { display: none; }

  .hero__pane--left {
    background-color: #1A1916;
  }

  .hero__pane--right {
    background-color: #B9AA97;
  }

  .hero__pane-tag {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10.5px;
    color: #FFFFFF;
  }

  .hero__pane--right .hero__pane-tag {
    color: var(--text-primary);
  }

  .hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFFFFF;
    padding: 0 24px;
    pointer-events: none;
    z-index: 3;
  }

  .hero__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: clamp(26px, 3.4vw, 46px);
    line-height: 1.14;
    margin: 0 auto 24px;
    white-space: normal;
    max-width: min(94vw, 38ch);
    width: 94vw;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
  }
  .hero__break { display: inline; }

  .hero__sub {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(16px, 1.7vw, 22px);
    line-height: 1.4;
    margin: 0 0 56px;
    color: #FFFFFF;
    opacity: 1;
    white-space: nowrap;
  }

  @media (max-width: 700px) {
    .hero__title {
      white-space: normal;
      letter-spacing: 0;
      font-size: 24px;
      max-width: 92vw;
      width: 92vw;
    }
    .hero__break { display: none; }
    .hero__sub {
      white-space: normal;
      font-size: 14px;
      max-width: 34ch;
    }
  }
  @media (max-width: 380px) {
    .hero__title { font-size: 20px; }
  }

  .hero__cta-row {
    position: absolute;
    bottom: 56px;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: #FFFFFF;
    pointer-events: auto;
    z-index: 3;
  }

  .hero__cta {
    text-align: center;
    padding: 0 24px;
  }

  .hero__cta-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    margin-bottom: 14px;
    color: #FFFFFF;
  }

  .hero__cta-link {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 15px;
    border-bottom: 1px solid rgba(245, 242, 236, 0.7);
    padding-bottom: 2px;
    transition: opacity 200ms ease;
  }

  .hero__cta-link:hover { opacity: 0.72; }

  /* ---------- Top navigation (under hero) ---------- */
  .topbar {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }

  .topbar__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 48px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
  }

  .topbar__nav {
    display: flex;
    gap: 36px;
  }

  .topbar__nav a {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: var(--text-primary);
    transition: color 200ms ease;
  }

  .topbar__nav a:hover { color: var(--text-primary); }

  .topbar__nav--right { justify-content: flex-end; }

  .brand {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
  }

  .brand .brand__italic {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    margin-left: 6px;
    font-size: 16px;
  }

  /* ---------- Sections ---------- */
  .section {
    padding: 140px 48px;
    max-width: 1240px;
    margin: 0 auto;
  }

  .section--tight { padding: 96px 48px; }

  /* ---------- Nav phone link ---------- */
  .nav__phone {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.005em;
    color: inherit;
    opacity: 1;
    text-transform: none;
    margin-right: 4px;
  }
  .nav__phone em { font-style: italic; }

  /* ---------- Nav WhatsApp link ---------- */
  .nav__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10.5px;
    color: inherit;
    opacity: 1;
    text-decoration: none;
    transition: opacity 200ms ease;
    margin-right: 8px;
  }
  .nav__whatsapp:hover { opacity: 1; }
  .nav__whatsapp svg { flex-shrink: 0; opacity: 0.95; }
  @media (max-width: 900px) {
    .nav__whatsapp span { display: none; }
    .nav__whatsapp { margin-right: 4px; }
  }

  /* ---------- Credibility strip ---------- */
  .credibility {
    background-color: #FFFFFF;
    border-top: 1px solid rgba(26, 25, 22, 0.06);
    border-bottom: 1px solid rgba(26, 25, 22, 0.06);
    padding: 28px 24px;
  }
  .credibility__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 44px;
    text-align: center;
  }
  .credibility__item {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10.5px;
    color: var(--text-primary);
    white-space: nowrap;
  }

  /* ---------- Trio pricing line ---------- */
  .trio-item__price {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: var(--text-primary);
    margin: 0 0 24px;
    opacity: 1;
  }
  .trio-item__price em {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 12px;
    opacity: 1;
    margin-left: 6px;
  }

  /* ---------- Process / What to expect (near-black brown band) ---------- */
  .process,
  .process .eyebrow,
  .process .process__head h2,
  .process .process__duration,
  .process .process-step h3,
  .process .process-step__duration,
  .process .process-step__body,
  .process .process-step__outcome,
  .process .process-step__outcome strong,
  .process .process-step__more summary,
  .process .process-step__more p,
  .process .process-step .process-step__index {
    color: #FFFFFF !important;
  }
  .process {
    background: var(--brown);
    padding: 0;
    position: relative;
  }
  /* Connector line + fill */
  .process .process__line { background-color: rgba(245, 242, 236, 0.25); }
  .process .process__line-fill { background-color: #F5F2EC; }
  .process .process-step .process-step__index { background-color: var(--brown); }
  .process .process-step.is-active .process-step__index,
  .process .process-step:hover .process-step__index { transform: scale(1.05); }
  .process .process-step__outcome { border-top-color: rgba(245, 242, 236, 0.22) !important; }
  .process .process-step__more summary:hover { opacity: 0.7; }
  .process__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 100px 32px 140px;
  }
  .process__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
  }
  .process__head .eyebrow { display: block; margin-bottom: 16px; }
  .process__head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 40px);
    margin: 0;
    line-height: 1.2;
  }
  .process__duration {
    margin-top: 20px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 14px;
    color: var(--text-primary);
    opacity: 1;
  }

  /* Pre-step: n.00 Before you arrive */
  .process__pre {
    max-width: 640px;
    margin: 0 auto 64px;
    padding: 28px 32px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.4);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
  }
  .process__pre-index {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 14px;
    color: var(--text-primary);
    opacity: 1;
  }
  .process__pre strong {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-primary);
    display: block;
    margin-bottom: 10px;
  }
  .process__pre p {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
  }

  /* Timeline with connected hairline */
  .process__timeline {
    position: relative;
  }
  .process__line {
    position: absolute;
    top: 20px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background-color: var(--border);
    z-index: 1;
  }
  .process__line-fill {
    position: absolute;
    inset: 0;
    width: var(--fill, 0%);
    background-color: var(--text-primary);
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: left;
  }

  .process__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    position: relative;
    z-index: 2;
  }
  .process-step {
    position: relative;
    transition: transform 280ms ease;
  }
  .process-step:hover { transform: translateY(-2px); }

  .process-step__node {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
  }
  .process-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg);
    padding: 0 14px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 16px;
    color: var(--text-primary);
    transition: color 320ms ease, transform 320ms ease;
  }
  .process-step.is-active .process-step__index,
  .process-step:hover .process-step__index {
    color: var(--text-primary);
    transform: scale(1.05);
  }

  .process-step h3 {
    text-align: center;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 8px;
    transition: opacity 280ms ease;
  }
  .process-step__duration {
    text-align: center;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13px;
    color: var(--text-primary);
    opacity: 1;
    margin: 0 0 18px;
  }
  .process-step__body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0 0 16px;
    text-align: center;
  }
  .process-step__outcome {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
  }
  .process-step__outcome strong {
    font-family: var(--font-display);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 10px;
    color: var(--text-primary);
    display: block;
    margin-bottom: 6px;
  }

  .process-step__more {
    margin-top: 4px;
    text-align: center;
  }
  .process-step__more summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
    padding: 4px 0;
    display: inline-block;
    border-bottom: 1px solid currentColor;
    transition: color 200ms ease;
  }
  .process-step__more summary::-webkit-details-marker { display: none; }
  .process-step__more summary:hover { color: var(--text-primary); }
  .process-step__more[open] summary { margin-bottom: 12px; }
  .process-step__more p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
  }

  /* ---------- Founder credentials ---------- */
  .founder__credentials {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-primary);
    max-width: 38ch;
  }
  .founder__credentials strong {
    font-family: var(--font-display);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
    display: block;
    margin-bottom: 8px;
  }

  /* ---------- Before & After gallery (featured landscape + vertical trio) ---------- */
  .gallery {
    background: var(--bg);
    padding: 120px 0 140px;
  }
  .gallery__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 72px;
    padding: 0 24px;
  }
  .gallery__head .eyebrow { display: block; margin-bottom: 16px; }
  .gallery__head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 40px);
    margin: 0;
    line-height: 1.2;
  }
  .gallery__head p {
    margin: 20px auto 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    max-width: 48ch;
  }

  /* ---- Swipe-to-compare (before/after slider) ---- */
  .ba-swipe {
    position: relative;
    overflow: hidden;
    background: #1A1916;
    --pos: 50;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    cursor: ew-resize;
  }
  .ba-swipe img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
  }
  .ba-swipe__before {
    z-index: 2;
    clip-path: inset(0 calc((100 - var(--pos)) * 1%) 0 0);
    transition: none;
  }
  .ba-swipe__after { z-index: 1; }

  /* Labels */
  .ba-swipe__label {
    position: absolute;
    top: 18px;
    z-index: 4;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 9.5px;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }
  .ba-swipe__label--before { left: 18px; }
  .ba-swipe__label--after { right: 18px; }

  /* Drag handle */
  .ba-swipe__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--pos) * 1%);
    width: 2px;
    background: #F5F2EC;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
  }
  .ba-swipe__button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #F5F2EC;
    border: none;
    cursor: ew-resize;
    pointer-events: auto;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: transform 220ms ease, background-color 220ms ease;
  }
  .ba-swipe__button:hover,
  .ba-swipe__button:focus-visible {
    transform: translate(-50%, -50%) scale(1.06);
    outline: none;
    background: #FFFFFF;
  }
  .ba-swipe__button-arrows {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
  }

  /* Small ON-IMAGE hint that fades after first interaction */
  .ba-swipe__hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 12px;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    animation: ba-hint-in 600ms ease 600ms forwards;
    transition: opacity 240ms ease;
    white-space: nowrap;
  }
  .ba-swipe.is-interacted .ba-swipe__hint { opacity: 0; }
  @keyframes ba-hint-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* ---- FEATURED landscape case (top) ---- */
  .gallery__featured {
    max-width: 1320px;
    margin: 0 auto 80px;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 64px;
    align-items: stretch;
  }
  .ba-featured__swipe {
    aspect-ratio: 3 / 2;
  }

  .ba-featured__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
  }
  .ba-featured__tag {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10.5px;
    color: var(--text-primary);
    margin-bottom: 18px;
  }
  .ba-featured__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0 0 24px;
    max-width: 16ch;
  }
  .ba-featured__meta {
    display: flex;
    gap: 32px;
    margin-bottom: 28px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .ba-featured__meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ba-featured__meta-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 9.5px;
    color: var(--text-primary);
    opacity: 1;
  }
  .ba-featured__meta-value {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 14px;
    color: var(--text-primary);
  }
  .ba-featured__quote {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--text-primary);
    margin: 0 0 28px;
  }
  .ba-featured__client {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: var(--text-primary);
  }
  .ba-featured__client em {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    font-size: 13px;
    margin-left: 8px;
  }

  /* ---- SUPPORTING TRIO (vertical rectangles below) ---- */
  .gallery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
  }

  .ba-card {
    display: flex;
    flex-direction: column;
  }

  /* Supporting card swipe (taller portrait) */
  .ba-card .ba-swipe {
    aspect-ratio: 4 / 5;
    margin-bottom: 28px;
  }

  /* Card body */
  .ba-card__index {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13.5px;
    color: var(--text-primary);
    opacity: 1;
    display: block;
    margin-bottom: 10px;
  }
  .ba-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
  }
  .ba-card__treatment {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: var(--text-primary);
  }
  .ba-card__duration {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 12.5px;
    color: var(--text-primary);
  }
  .ba-card__quote {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0 0 20px;
  }
  .ba-card__client {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: var(--text-primary);
  }
  .ba-card__client em {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    font-size: 12.5px;
    margin-left: 8px;
  }

  .gallery__footer {
    margin-top: 80px;
    text-align: center;
  }
  .gallery__footer a {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--text-primary);
    padding-bottom: 4px;
    transition: opacity 200ms ease;
  }
  .gallery__footer a:hover { opacity: 0.6; }

  @media (max-width: 900px) {
    .gallery { padding: 80px 0 96px; }
    .gallery__head { margin-bottom: 48px; }
    .gallery__featured { grid-template-columns: 1fr; gap: 32px; padding: 0 24px; margin-bottom: 56px; }
    .gallery__grid { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
  }

  /* ---------- Press strip ---------- */
  .press {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 32px 24px;
  }
  .press__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 40px;
    text-align: center;
  }
  .press__label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10.5px;
    color: var(--text-primary);
  }
  .press__items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 44px;
  }
  .press__item {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 16px;
    color: var(--text-primary);
    opacity: 1;
  }

  /* ---------- Reviews block above testimonial ---------- */
  .reviews-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 10px 22px;
    border: 1px solid rgba(26, 25, 22, 0.18);
    border-radius: 100px;
    background: rgba(255,255,255,0.5);
  }
  .reviews-pill__stars {
    color: var(--text-primary);
    letter-spacing: 0.18em;
    font-size: 11px;
  }
  .reviews-pill__text {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: var(--text-primary);
  }
  .reviews-pill__text em {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 12px;
    color: var(--text-primary);
    margin-left: 8px;
  }

  /* ---------- Philosophy / Mission ---------- */
  .philosophy {
    background-color: #FFFFFF;
  }

  .philosophy .section {
    padding: 140px 48px;
  }
  /* Subpage statements sit closer to the hero and the section beneath */
  .philosophy--tight .section { padding: 96px 48px 72px; }
  .philosophy--tight + .founder-letter { padding-top: 56px; }
  /* Section headings that must hold a single line on desktop */
  @media (min-width: 900px) { .trio__title--one-line { white-space: nowrap; max-width: none; } }
  /* Clinic hero (building at dusk): mono, lifted a touch so the facade reads; framed on the upper storeys */
  .hero--about.hero--clinic .ph__img { filter: grayscale(1) brightness(0.72) contrast(1.02) !important; object-position: 50% 28%; }
  /* Contact hero (the front door): mono, framed on the door and columns */
  .hero--about.hero--contact .ph__img { filter: grayscale(1) brightness(0.68) contrast(1.02) !important; object-position: 50% 44%; }

  /* Sub-nav items that are not ready yet (Awards & Press): greyed and inert, like the treatment links in the nav */
  .nav-subnav a.nav-subnav__soon { opacity: 1; cursor: default; pointer-events: none; }

  /* ---------- Principles index (About): large italic principles left, the active note settles in right ---------- */
  .principles { background: #FFFFFF; padding: 104px 0; }
  .principles__inner { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
  .principles__head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
  .principles__head .eyebrow { display: block; margin-bottom: 16px; }
  .principles__head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
    margin: 0;
  }
  /* Both columns stretch to the height of the tallest note; the three words are spaced across it, so top and bottom edges coincide */
  .principles__index { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: stretch; }
  .principles__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; } /* words cluster at the top so the visual weight sits high */
  .principles__list li { display: flex; }
  .principles__item {
    display: flex;
    align-items: baseline;
    gap: 22px;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    opacity: 1;
    transition: opacity 500ms cubic-bezier(.22,.61,.36,1), transform 650ms cubic-bezier(.22,.61,.36,1);
  }
  .principles__item em { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; }
  .principles__num { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.3em; color: var(--text-primary); min-width: 2.6em; }
  .principles__item:hover { opacity: 0.7; }
  .principles__item.is-active, .principles__item.is-active:hover { opacity: 1; transform: translateX(12px); }
  .principles__item:focus-visible { outline: 1px solid var(--text-primary); outline-offset: 6px; }
  .principles__panels { position: relative; display: grid; padding-top: 8px; } /* notes share one cell, so the box is as tall as the longest */
  .principles__panel p + p:not(.principles__lede) { margin-top: 12px; }
  .principles__panel {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
  }
  .principles__panel.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .principles__panel-title { display: none; }
  .principles__lede { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; margin: 0 0 14px; text-wrap: balance; }
  .principles__panel p:not(.principles__lede) { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.65; color: var(--text-primary); margin: 0; max-width: 48ch; }
  @media (max-width: 800px) {
    .principles { padding: 88px 0; }
    .principles__inner { padding: 0 24px; }
    .principles__head { margin-bottom: 48px; }
    .principles__index { grid-template-columns: 1fr; gap: 0; }
    .principles__list { display: none; }
    .principles__panels { display: block; padding-top: 0; }
    .principles__panel { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 40px; }
    .principles__panel-title { display: block; font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: 30px; line-height: 1.1; margin: 0 0 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .principles__item, .principles__panel { transition: none; }
  }

  /* ---------- Map band: full-bleed mono map, address as a cream overlay (shared with the homepage) ---------- */
  .map-band {
    position: relative;
    width: 100%;
    height: 62vh;
    min-height: 460px;
    overflow: hidden;
    background: var(--bg);
  }
  .map-band__media { position: absolute; inset: 0; }
  .map-band__media iframe {
    display: block;
    position: absolute;
    left: 0;
    top: -150px;
    width: 100%;
    height: calc(100% + 150px);
    border: 0;
    filter: grayscale(1) contrast(0.92) brightness(1.02);
    pointer-events: none;
  }
  .map-band__inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 48px;
    pointer-events: none;
  }
  .map-band__card {
    pointer-events: auto;
    background: rgba(245, 242, 236, 0.96);
    padding: 34px 38px 32px;
    max-width: 360px;
  }
  .map-band__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 14px;
  }
  .map-band__address {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0 0 14px;
  }
  .map-band__hours {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0 0 20px;
  }
  .map-band__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--text-primary);
    padding-bottom: 4px;
    text-decoration: none;
  }
  .map-band__link span { transition: transform 300ms cubic-bezier(.22,.61,.36,1); }
  .map-band__link:hover span { transform: translateX(4px); }
  @media (max-width: 700px) {
    .map-band { height: auto; min-height: 0; }
    .map-band__media { position: relative; height: 320px; }
    .map-band__inner { position: relative; padding: 0; }
    .map-band__card { max-width: none; width: 100%; padding: 28px 24px; }
  }


  .mission {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
  }

  .mission .eyebrow { display: block; margin-bottom: 36px; }

  .mission p {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
  }

  /* ---------- Trio (full-width 3-rectangle editorial) ---------- */
  .trio {
    background: var(--bg);
    padding: 0;
  }

  .trio__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 120px 24px 72px;
  }

  .trio__head .eyebrow { display: block; margin-bottom: 16px; }

  .trio__head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
    margin: 0;
  }

  .trio__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding: 0 32px 120px;
  }

  .trio-item { display: flex; flex-direction: column; }

  .trio-item__photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin: 0;
  }

  .trio-item__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* When .scroll-color is also on the img, it owns the filter */
  .trio-item__photo img:not(.scroll-color) {
    filter: grayscale(0.35) brightness(0.94) sepia(0.04);
  }

  .trio-item__body {
    padding: 32px 0 0;
  }

  .trio-item__index {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13.5px;
    color: var(--text-primary);
    opacity: 1;
    display: block;
    margin-bottom: 10px;
  }

  .trio-item .eyebrow { display: block; margin-bottom: 14px; }

  .trio-item__intro {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 20px;
  }

  .trio-item__tags {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10.5px;
    color: var(--text-primary);
    margin: 0 0 28px;
    line-height: 1.8;
  }

  .trio-item__tags span + span::before {
    content: '·';
    margin: 0 8px;
    opacity: 1;
  }

  @media (max-width: 900px) {
    .trio-item__intro { font-size: 17px; max-width: none; }
  }

  .trio-item__link {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    border-bottom: 1px solid var(--text-primary);
    padding-bottom: 4px;
    align-self: flex-start;
    transition: opacity 200ms ease;
  }

  .trio-item__link:hover { opacity: 0.6; }

  @media (max-width: 900px) {
    .trio__grid { grid-template-columns: 1fr; padding: 0 24px 64px; gap: 56px; }
    .trio__head { padding: 64px 24px 40px; }
    .trio-item__body { padding: 24px 0 0; }
    .trio-item__intro { font-size: 16px; max-width: 100%; }
    .trio-item__tags { font-size: 9.5px; line-height: 1.7; }
    .trio-item__link { font-size: 10px; letter-spacing: 0.18em; }
  }

  .service-row__index {
    font-family: var(--font-editorial);
    font-style: italic;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 18px;
    opacity: 1;
  }

  .service-row__copy h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 16px;
    font-weight: 400;
    margin: 14px 0 22px;
    line-height: 1.35;
  }

  .service-row__copy .eyebrow { display: block; margin-bottom: 4px; }

  .service-row__copy p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-primary);
    margin: 0 0 24px;
  }

  /* Dark band wrapping a service row (brown) */
  .service-band {
    background-color: var(--brown);
    color: #FFFFFF;
  }

  .service-band .service-row { padding-top: 96px; padding-bottom: 96px; }
  .service-band + .service-row { padding-top: 96px; }
  .service-row.service-row--in-band + .service-row { padding-top: 56px; }

  .service-band .eyebrow,
  .service-band .service-row__index { color: #FFFFFF; }
  .service-band .service-row__copy h3 { color: #FFFFFF; }
  .service-band .service-row__copy p { color: #FFFFFF; }
  .service-band .service-card__ideal { color: #FFFFFF; }
  .service-band .service-card__ideal strong { color: #FFFFFF; }
  .service-band .service-card__list li {
    color: #FFFFFF;
    border-top-color: rgba(245, 242, 236, 0.16);
  }
  .service-band .service-card__list li:last-child {
    border-bottom-color: rgba(245, 242, 236, 0.16);
  }
  .service-band .service-card__list li span { color: #FFFFFF; }
  .service-band .btn {
    background-color: transparent;
    color: #FFFFFF;
    border-color: rgba(245, 242, 236, 0.7);
  }
  .service-band .btn:hover {
    background-color: #F5F2EC;
    color: var(--text-primary);
    border-color: #F5F2EC;
  }

  /* legacy classes kept inert for any remaining markup */
  .service-card { position: relative; overflow: hidden; }
  .service-card--image { padding: 0; }

  .service-card--text {
    background: var(--surface);
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .service-card--dark {
    background: var(--accent);
    color: #FFFFFF;
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .service-card--dark .eyebrow { color: #FFFFFF; }
  .service-card--dark p { color: #FFFFFF; }

  .service-card h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 13px;
    font-weight: 400;
    margin: 28px 0 20px;
  }

  .service-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-primary);
    margin: 0 0 28px;
    max-width: 34ch;
  }

  .service-card__ideal {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13.5px;
    color: var(--text-primary);
    margin: 0 0 24px;
    max-width: 34ch;
    line-height: 1.5;
  }

  .service-card__ideal strong {
    font-weight: 400;
    color: var(--text-primary);
    margin-right: 6px;
  }

  .service-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    max-width: 34ch;
  }

  .service-card__list li {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary);
    padding: 10px 0;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .service-card__list li:last-child { border-bottom: 1px solid var(--border); }

  .service-card__list li span {
    font-family: var(--font-editorial);
    font-style: italic;
    color: var(--text-primary);
    opacity: 1;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .service-card__meta {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: var(--text-primary);
    margin: 0 0 20px;
    opacity: 1;
  }

  .service-card--dark .service-card__ideal,
  .service-card--dark .service-card__list li {
    color: #FFFFFF;
  }

  .service-card--dark .service-card__ideal strong,
  .service-card--dark .service-card__meta {
    color: #FFFFFF;
  }

  .service-card--dark .service-card__list li {
    border-top-color: rgba(245, 242, 236, 0.18);
  }
  .service-card--dark .service-card__list li:last-child {
    border-bottom-color: rgba(245, 242, 236, 0.18);
  }

  .service-card--dark .service-card__list li span {
    color: #FFFFFF;
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    padding: 16px 28px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #FFFFFF;
    transition: background 220ms ease, color 220ms ease;
    align-self: flex-start;
    cursor: pointer;
  }

  .btn:hover { background: transparent; color: var(--text-primary); }

  .btn--ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--text-primary);
  }
  .btn--ghost:hover { background: var(--text-primary); color: #FFFFFF; }

  .btn--inverse {
    background: transparent;
    border-color: rgba(245, 242, 236, 0.85);
    color: #FFFFFF;
  }
  .btn--inverse:hover { background: #F5F2EC; color: var(--text-primary); }

  /* ---------- Testimonials (richer editorial cards on white) ---------- */
  .testimonial-wrap {
    background-color: #FFFFFF;
    border-top: 1px solid rgba(26, 25, 22, 0.06);
    border-bottom: 1px solid rgba(26, 25, 22, 0.06);
  }

  .testimonial {
    max-width: 1240px;
    margin: 0 auto;
    padding: 120px 48px;
  }

  .testimonial__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 48px;
    margin-bottom: 64px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
  }
  .testimonial__head-left .eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--text-primary);
  }
  .testimonial__head-left h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 40px);
    margin: 0;
    line-height: 1.15;
    color: var(--text-primary);
    max-width: 22ch;
  }

  /* Google reviews trust block in the header */
  .testimonial__google {
    text-align: right;
    min-width: 220px;
  }
  .testimonial__google-stars {
    color: var(--text-primary);
    letter-spacing: 0.35em;
    font-size: 13px;
    margin-bottom: 6px;
  }
  .testimonial__google-meta {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10.5px;
    color: var(--text-primary);
    margin-bottom: 4px;
  }
  .testimonial__google-meta strong {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-primary);
    margin-right: 6px;
  }
  .testimonial__google-link {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--text-primary);
    padding-bottom: 2px;
  }

  .testimonial__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .testimonial-card {
    display: flex;
    flex-direction: column;
    padding: 40px 40px 36px;
    background: #FBFAF7;
    border: 1px solid rgba(26, 25, 22, 0.06);
    position: relative;
    transition: background 320ms ease;
  }
  .testimonial-card:hover { background: #FFFFFF; }

  .testimonial-card__head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }

  .testimonial-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--brown);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 13px;
    font-weight: 400;
  }

  .testimonial-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .testimonial-card__name {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: var(--text-primary);
  }
  .testimonial-card__location {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 12.5px;
    color: var(--text-primary);
  }

  .testimonial-card__stars {
    color: var(--text-primary);
    letter-spacing: 0.35em;
    font-size: 12px;
    margin-bottom: 14px;
    opacity: 1;
  }

  .testimonial-card__quote {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0 0 28px;
    flex-grow: 1;
  }

  .testimonial-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    gap: 12px;
  }
  .testimonial-card__treatment {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
  }
  .testimonial-card__verified {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .testimonial-card__verified::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8A6E47;
    flex: 0 0 auto;
  }

  .testimonial__footer {
    margin-top: 56px;
    text-align: center;
  }
  .testimonial__footer a {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: var(--text-primary);
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    transition: opacity 200ms ease;
  }
  .testimonial__footer a:hover { opacity: 0.6; }

  @media (max-width: 900px) {
    .testimonial { padding: 80px 24px; }
    .testimonial__head { grid-template-columns: 1fr; gap: 28px; }
    .testimonial__google { text-align: left; }
    .testimonial__grid { grid-template-columns: 1fr; gap: 16px; }
    .testimonial__head { margin-bottom: 48px; }
  }

  /* ---------- Founder (centered eyebrow + balanced 2-col, on white) ---------- */
  .founder {
    background: #FFFFFF;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid rgba(26, 25, 22, 0.06);
    border-bottom: 1px solid rgba(26, 25, 22, 0.06);
  }

  /* Section header (centered, generous breathing room above) */
  .founder__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 140px 32px 80px;
  }
  .founder__header .eyebrow {
    display: block;
    margin-bottom: 20px;
    color: var(--text-primary);
  }
  .founder__header h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.15;
    margin: 0;
    color: var(--text-primary);
  }

  /* Two-column body: photo + copy, balanced and inset from edges */
  .founder__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 64px 140px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
  }

  /* Left column: dominating B&W portrait */
  .founder__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
  }
  .founder__media-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    display: block;
  }
  .founder__media-tag {
    position: absolute;
    top: 28px;
    left: 28px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10.5px;
    color: #FFFFFF;
    z-index: 2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  }

  /* Right column: copy, properly centered horizontally within the column */
  .founder__copy {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .founder__pullquote {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0 0 36px;
    padding: 0 0 0 28px;
    border-left: 1px solid var(--border);
  }

  .founder__copy p {
    font-size: 15px;
    line-height: 1.85;
    color: var(--text-primary);
    margin: 0 0 36px;
  }

  /* Stats strip (full width of column) */
  .founder__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 36px;
    padding: 32px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .founder__stat-number {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(28px, 2.6vw, 38px);
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 10px;
  }
  .founder__stat-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
    line-height: 1.5;
  }

  .founder__credentials {
    margin: 0 0 36px;
    padding-top: 0;
    border-top: none;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-primary);
  }
  .founder__credentials strong {
    font-family: var(--font-display);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
    display: block;
    margin-bottom: 10px;
  }

  /* Signature block */
  .founder__signature {
    margin: 0 0 36px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 0;
    border-top: 1px solid var(--border);
  }
  .founder__signature-mark {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 32px;
    color: var(--text-primary);
    letter-spacing: 0.01em;
  }
  .founder__signature-meta {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
    line-height: 1.5;
  }
  .founder__signature-meta em {
    display: block;
    margin-top: 4px;
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    font-size: 12px;
  }

  .founder .btn--ghost {
    color: var(--text-primary);
    border-color: var(--text-primary);
    margin-top: 0;
    align-self: flex-start;
  }
  .founder .btn--ghost:hover {
    background: var(--text-primary);
    color: #FFFFFF;
  }

  @media (max-width: 900px) {
    .founder__header { padding: 80px 24px 48px; }
    .founder__inner {
      grid-template-columns: 1fr;
      padding: 0 24px 96px;
      gap: 48px;
    }
    .founder__stats { gap: 16px; }
  }

  .founder__images .img-large {
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
  }
  .founder__images .img-small {
    aspect-ratio: 1 / 1;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
  }

  /* ---------- Treatments strip ---------- */
  .treatments-strip {
    background: var(--accent);
    color: #FFFFFF;
  }

  .treatments-strip__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 120px 48px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 64px;
  }

  .treatments-strip h4 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 16px;
    color: #FFFFFF;
  }

  .treatments-strip ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .treatments-strip li {
    padding: 14px 0;
    border-top: 1px solid rgba(245, 242, 236, 0.18);
    font-size: 14.5px;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
  }

  .treatments-strip li:last-child { border-bottom: 1px solid rgba(245, 242, 236, 0.18); }

  .treatments-strip li .from {
    font-family: var(--font-editorial);
    font-style: italic;
    color: #FFFFFF;
    font-size: 13px;
    white-space: nowrap;
  }

  /* ---------- Journal (full-width editorial, matches triptych) ---------- */
  .journal {
    background: var(--bg);
    padding: 0;
  }

  .journal__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 120px 24px 56px;
  }

  .journal__head .eyebrow { display: block; margin-bottom: 16px; }
  .journal__head-lede {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    max-width: 52ch;
    margin: -6px auto 28px;
    text-wrap: balance;
  }

  .journal__head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
    margin: 0 0 24px;
  }

  .journal__head-link {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--text-primary);
    padding-bottom: 4px;
    transition: opacity 200ms ease;
  }
  .journal__head-link:hover { opacity: 0.6; }

  .journal__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    padding: 0 32px 120px;
  }

  .journal-card { display: flex; flex-direction: column; }

  .journal-card__media {
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    margin: 0 0 28px;
  }

  .journal-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* B&W grading to match the hero images */
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    transition: transform 700ms ease, filter 700ms ease;
  }
  .journal-card:hover .journal-card__media img {
    transform: scale(1.04);
  }

  .journal-card__body {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .journal-card__index {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13.5px;
    color: var(--text-primary);
    opacity: 1;
    display: block;
    margin-bottom: 10px;
  }

  .journal-card__meta {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: var(--text-primary);
    margin: 0 0 14px;
    display: block;
  }

  .journal-card h3 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.3;
    margin: 0 0 18px;
    color: var(--text-primary);
  }

  .journal-card__excerpt {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-primary);
    margin: 0 0 22px;
  }

  .journal-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    margin-top: auto;
    border-top: 1px solid var(--border);
  }

  .journal-card__author {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
  }
  .journal-card__author em {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    font-size: 12px;
    margin-left: 4px;
  }
  .journal-card__readtime {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 12px;
    color: var(--text-primary);
    opacity: 1;
  }
  .journal-card__readtime::before {
    content: '·';
    margin: 0 8px;
    opacity: 1;
  }

  .journal-card__link {
    margin-top: 18px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    border-bottom: 1px solid var(--text-primary);
    padding-bottom: 4px;
    align-self: flex-start;
    transition: opacity 200ms ease;
    color: var(--text-primary);
  }
  .journal-card__link:hover { opacity: 0.6; }
  .journal-card__link .arrow {
    display: inline-block;
    transition: transform 280ms ease;
    margin-left: 4px;
  }
  .journal-card:hover .journal-card__link .arrow { transform: translateX(6px); }

  /* ---------- FAQs (white background, restraint + numbering) ---------- */
  .faqs-wrap {
    background-color: #FFFFFF;
  }

  .faqs {
    max-width: 1240px;
    margin: 0 auto;
    padding: 140px 48px;
  }

  .faqs__head {
    text-align: center;
    margin-bottom: 80px;
  }

  /* Two-column layout: 3 on the left, 3 on the right, perfectly row-aligned */
  .faqs__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    column-gap: 64px;
    counter-reset: faq-counter;
  }

  /* Explicit row + column placement so the two columns share row heights */
  .faqs__list .faq:nth-child(1) { grid-column: 1; grid-row: 1; }
  .faqs__list .faq:nth-child(2) { grid-column: 1; grid-row: 2; }
  .faqs__list .faq:nth-child(3) { grid-column: 1; grid-row: 3; }
  .faqs__list .faq:nth-child(4) { grid-column: 2; grid-row: 1; }
  .faqs__list .faq:nth-child(5) { grid-column: 2; grid-row: 2; }
  .faqs__list .faq:nth-child(6) { grid-column: 2; grid-row: 3; }

  /* Each row sized to fit the tallest item, keeps both columns inline */
  .faqs__list .faq { align-self: stretch; }

  /* Both columns get a bottom border on the last item */
  /* Bottom-only dividers; the first row of each column draws the single top line */
  .faqs__list .faq:nth-child(1),
  .faqs__list .faq:nth-child(4) {
    border-top: 1px solid rgba(26, 25, 22, 0.12);
  }

  .faqs__head .eyebrow { display: block; margin-bottom: 18px; }

  .faqs__head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 40px);
    margin: 0;
    line-height: 1.2;
  }

  .faq {
    border-bottom: 1px solid rgba(26, 25, 22, 0.12);
    padding: 0;
    counter-increment: faq-counter;
  }

  .faqs__list { counter-reset: faq-counter; }

  .faq summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 32px 4px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.4;
    color: var(--text-primary);
    transition: opacity 200ms ease;
  }

  .faq summary::before {
    content: counter(faq-counter, decimal-leading-zero);
    font-family: var(--font-display);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: var(--text-primary);
    opacity: 1;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { opacity: 0.72; }

  .faq summary::after {
    content: '';
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-size: 100% 1px, 1px 100%;
    background-position: center, center;
    background-repeat: no-repeat;
    transition: transform 250ms ease;
    opacity: 1;
  }

  .faq[open] summary::after {
    transform: rotate(45deg);
    background-size: 100% 1px, 0 100%;
  }

  .faq__body {
    padding: 0 4px 36px 76px;
    max-width: 60ch;
  }

  .faq__body p {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--text-primary);
    margin: 0;
  }

  /* ---------- Contact / Booking ---------- */
  .booking-wrap {
    background-color: var(--brown);
    color: #FFFFFF;
  }

  .booking {
    padding: 120px 48px 140px;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 96px;
    align-items: start;
    text-align: left;
  }

  .booking__intro { padding-top: 8px; }
  .booking__intro .eyebrow { color: #FFFFFF; display: block; margin-bottom: 22px; }
  /* Contact: a quiet italic heading in place of the small-caps eyebrow */
  .booking__intro .booking__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 2.6vw, 34px);
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: #FFFFFF;
    margin: 0 0 22px;
  }

  /* Contact details block under the body */
  .booking__contacts {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid rgba(245, 242, 236, 0.18);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .booking__contact { display: flex; flex-direction: column; gap: 8px; }
  .booking__contact-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: #FFFFFF;
  }
  .booking__contact-value {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
    color: #FFFFFF;
    border-bottom: none;
  }
  a.booking__contact-value {
    transition: opacity 200ms ease;
  }
  a.booking__contact-value:hover { opacity: 0.72; }

  @media (max-width: 900px) {
    .booking__contacts { grid-template-columns: 1fr; gap: 24px; }
  }

  /* Contact form on dark background */
  .contact-form {
    margin-top: 0;
    text-align: left;
  }

  .contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 28px;
  }

  .contact-form label {
    display: block;
    margin-bottom: 28px;
  }
  .contact-form__row label { margin-bottom: 0; }

  .contact-form label > span {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: #FFFFFF;
    margin-bottom: 10px;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(245, 242, 236, 0.25);
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: #FFFFFF;
    outline: none;
    transition: border-color 200ms ease;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .contact-form select {
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(245, 242, 236, 0.65) 50%),
      linear-gradient(135deg, rgba(245, 242, 236, 0.65) 50%, transparent 50%);
    background-position:
      calc(100% - 12px) 16px,
      calc(100% - 6px) 16px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 24px;
  }

  .contact-form select option {
    color: var(--text-primary);
    background-color: #F5F2EC;
  }

  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus {
    border-bottom-color: #F5F2EC;
  }

  .contact-form ::placeholder { color: #FFFFFF; }

  .contact-form textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
  }

  .contact-form__submit {
    margin-top: 16px;
    text-align: left;
  }

  /* Required marker (small italic em next to label) */
  .contact-form label > span em {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 11px;
    color: #FFFFFF;
    margin-left: 8px;
  }
  /* Required marker: a plain asterisk in the label's own face, bright enough to read */
  .contact-form em[aria-label="required"] {
    font-family: var(--font-display);
    font-style: normal;
    font-size: inherit;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
    margin-left: 3px;
  }

  /* Consent (side-by-side, eyebrow + description with toggle below) */
  .contact-form__consents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin: 36px 0 24px;
    padding: 28px 0 0;
    border-top: 1px solid rgba(245, 242, 236, 0.15);
  }
  .contact-form__check {
    margin: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .contact-form__check-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: #FFFFFF;
  }
  .contact-form__check-label em {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
    margin-left: 6px;
    font-size: 11px;
    opacity: 1;
  }
  .contact-form__check-desc {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
    color: #FFFFFF;
    margin: 0;
  }
  .contact-form__check-desc em {
    font-family: var(--font-editorial);
    font-style: italic;
    color: #FFFFFF;
  }

  /* Custom toggle row */
  .contact-form__toggle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    user-select: none;
  }
  .contact-form__toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 22px;
    background: transparent;
    border: 1px solid rgba(245, 242, 236, 0.35);
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: background-color 240ms ease, border-color 240ms ease;
    flex-shrink: 0;
    margin: 0;
  }
  .contact-form__toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    background: rgba(245, 242, 236, 0.55);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: left 220ms ease, background-color 220ms ease;
  }
  .contact-form__toggle input[type="checkbox"]:checked {
    background-color: #F5F2EC;
    border-color: #F5F2EC;
  }
  .contact-form__toggle input[type="checkbox"]:checked::after {
    left: calc(100% - 17px);
    background-color: var(--brown);
  }
  .contact-form__toggle-state {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10.5px;
    color: #FFFFFF;
    min-width: 36px;
  }
  .contact-form__check input[type="checkbox"]:checked ~ .contact-form__toggle-state,
  .contact-form__toggle input[type="checkbox"]:checked + .contact-form__toggle-state {
    color: #FFFFFF;
  }

  .contact-form__trust {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 12.5px;
    line-height: 1.5;
    color: #FFFFFF;
    margin: 12px 0 24px;
  }

  /* ---------- Sticky enquiry tab (right edge) ---------- */
  .enquire-tab {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 60;
    background-color: var(--brown);
    color: #FFFFFF;
    padding: 22px 12px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: translateY(-50%);
    transition: background-color 240ms ease, padding-left 240ms ease;
    border: 1px solid rgba(245, 242, 236, 0.2);
    border-right: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }
  .enquire-tab:hover {
    background-color: var(--text-primary);
    padding-left: 16px;
  }
  .enquire-tab__arrow {
    font-style: italic;
    font-family: var(--font-editorial);
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 14px;
    writing-mode: horizontal-tb;
  }
  @media (max-width: 700px) {
    .enquire-tab { padding: 16px 8px; font-size: 9.5px; letter-spacing: 0.28em; }
  }

  /* ---------- Newsletter modal (centered on entry) ---------- */
  .nl-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 12, 8, 0.65);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity 480ms ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .nl-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .nl-widget {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    z-index: 75;
    background: var(--bg);
    padding: 56px 56px 48px;
    width: 480px;
    max-width: calc(100vw - 48px);
    opacity: 0;
    pointer-events: none;
    transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1), opacity 360ms ease, padding 0ms;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    text-align: center;
  }
  .nl-widget.is-visible {
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
  }

  .nl-widget__close {
    position: absolute;
    top: 16px;
    right: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
    color: var(--text-primary);
    padding: 4px 8px;
    transition: color 200ms ease;
  }
  .nl-widget__close:hover { color: var(--text-primary); }

  .nl-widget__eyebrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: var(--text-primary);
    display: block;
    margin-bottom: 18px;
  }
  .nl-widget__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0 0 18px;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
  }
  .nl-widget__body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0 auto 28px;
    max-width: 38ch;
  }
  .nl-widget__body strong { font-weight: 400; color: var(--text-primary); }

  .nl-widget__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 360px;
    margin: 0 auto 16px;
  }
  .nl-widget__field {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--text-primary);
    outline: none;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    padding: 8px 0;
  }
  .nl-widget__field::placeholder { color: var(--text-primary); opacity: 1; }
  .nl-widget__submit {
    margin-top: 12px;
    background-color: var(--text-primary);
    color: #FFFFFF;
    border: 1px solid var(--text-primary);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    padding: 14px 24px;
    cursor: pointer;
    transition: background-color 240ms ease, color 240ms ease;
  }
  .nl-widget__submit:hover {
    background-color: transparent;
    color: var(--text-primary);
  }

  .nl-widget__fineprint {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 12px;
    color: var(--text-primary);
    opacity: 1;
    margin: 12px 0 0;
  }

  /* ---------- Minimised state: floating cream pill, readable on any bg ---------- */
  .nl-widget.is-minimised {
    top: auto;
    left: 24px;
    bottom: 24px;
    transform: translate(0, 0);
    width: auto;
    max-width: none;
    padding: 12px 20px;
    background: rgba(245, 242, 236, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(26, 25, 22, 0.06);
    pointer-events: auto;
    opacity: 1;
    text-align: left;
  }
  /* The Letter tab stays out of the first frame on image-hero pages; slides in once the hero has been scrolled past */
  body:not(.past-hero) .nl-widget.is-minimised { opacity: 0; transform: translate(0, 16px); pointer-events: none; }
  .nl-widget.is-minimised .nl-widget__close,
  .nl-widget.is-minimised .nl-widget__eyebrow,
  .nl-widget.is-minimised .nl-widget__title,
  .nl-widget.is-minimised .nl-widget__body,
  .nl-widget.is-minimised .nl-widget__form,
  .nl-widget.is-minimised .nl-widget__fineprint { display: none; }

  .nl-widget__pill {
    display: none;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    color: var(--text-primary);
    background: transparent;
    border: none;
    padding: 6px 0;
    transition: opacity 200ms ease;
  }
  .nl-widget.is-minimised .nl-widget__pill { display: inline-flex; }
  .nl-widget__pill:hover { opacity: 0.6; }
  .nl-widget__pill svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
  }

  @media (max-width: 700px) {
    .nl-widget { padding: 40px 28px 36px; width: calc(100vw - 32px); }
    .nl-widget.is-minimised { left: 12px; bottom: 12px; }
    .enquire-tab { padding: 12px 8px; font-size: 9.5px; }
  }

  .booking .eyebrow { color: #FFFFFF; }

  .booking h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(32px, 3.6vw, 48px);
    margin: 28px 0 24px;
    line-height: 1.2;
    color: #FFFFFF;
  }

  .booking p {
    color: #FFFFFF;
    font-size: 15px;
    margin: 0 0 48px;
  }

  .booking .btn {
    background-color: transparent;
    color: #FFFFFF;
    border-color: rgba(245, 242, 236, 0.7);
  }

  .booking .btn:hover {
    background-color: #F5F2EC;
    color: var(--text-primary);
    border-color: #F5F2EC;
  }

  /* ---------- Footer ---------- */
  body > footer {
    border-top: 1px solid var(--border);
    background: var(--bg);
    padding: 64px 48px 40px;
  }

  .footer__mark-inline {
    display: block;
    width: 62px;
    height: auto;
    margin: 0 0 20px;
    opacity: 0.9;
  }

  .footer__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 48px;
  }

  .footer__inner h5 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    font-weight: 400;
    margin: 0 0 20px;
    color: var(--text-primary);
  }

  .footer__inner p, .footer__inner li {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text-primary);
  }

  .footer__inner ul { list-style: none; padding: 0; margin: 0; }
  .footer__inner li a { color: var(--text-primary); transition: color 200ms ease; }
  .footer__inner li a:hover { color: var(--text-primary); }

  .footer__newsletter form { margin-top: 18px; }

  .newsletter-form label {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--text-primary);
    padding: 4px 0;
    gap: 8px;
  }

  .newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    padding: 6px 0;
  }

  .newsletter-form input::placeholder {
    color: var(--text-primary);
    opacity: 1;
  }

  .newsletter-form button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-primary);
    padding: 4px 8px;
    line-height: 1;
    transition: transform 220ms ease;
  }

  .newsletter-form button:hover { transform: translateX(4px); }

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

  /* Centred footer: one axis, one rhythm. Mark, wordmark, an italic line for the practicalities, a row of small-caps links, The Letter as a single field */
  body > footer:has(.footer__centre) { padding: 72px 48px 32px; }
  .footer__centre {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__centre .footer__mark-inline { width: 52px; margin: 0 0 18px; }
  .footer__wordmark {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 14px;
  }
  .footer__address {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0 0 34px;
  }
  .footer__address a { color: var(--text-primary); transition: color 200ms ease; }
  .footer__address a:hover { color: var(--text-primary); }
  .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin: 0 0 40px; }
  .footer__nav a {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: var(--text-primary);
    opacity: 1;
    transition: opacity 200ms ease;
  }
  .footer__nav a:hover { opacity: 1; }
  .footer__letter { width: 100%; max-width: 400px; margin: 0; }
  .footer__letter-label {
    display: block;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 12px;
    text-wrap: balance;
  }
  .footer__centre + .footer__bottom { margin-top: 56px; padding-top: 24px; align-items: center; }
  .footer__legal-inline { display: flex; gap: 22px; }
  .footer__legal-inline a { color: inherit; opacity: 1; transition: opacity 200ms ease; }
  .footer__legal-inline a:hover { opacity: 1; }
  @media (max-width: 700px) {
    body > footer:has(.footer__centre) { padding: 56px 24px 28px; }
    .footer__address { font-size: 15px; }
    .footer__sep { display: none; }
    .footer__address a { display: block; }
    .footer__nav { gap: 10px 22px; }
    .footer__legal-inline { justify-content: center; }
  }

  .footer__bottom {
    max-width: 1240px;
    margin: 56px auto 0;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: var(--text-primary);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    .nav { grid-template-columns: 1fr auto; padding: 16px 24px; }
    .nav__links { display: none; }
    .nav__cta { margin-left: 0; }
    .hero { grid-template-columns: 1fr; height: auto; min-height: unset; }
    .hero__pane { aspect-ratio: 4/5; }
    .hero__pane--right { display: none; }
    .hero--single { height: 100vh; min-height: 100svh; }
    .hero--single .hero__single { aspect-ratio: auto; height: 100%; }
    .topbar__inner { grid-template-columns: 1fr; text-align: center; gap: 16px; }
    .topbar__nav { justify-content: center; flex-wrap: wrap; gap: 20px; }
    .section { padding: 88px 24px; }
    .service-row, .service-row--reverse {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 64px 24px;
    }
    .service-row--reverse .service-row__media { order: 1; }
    .service-row--reverse .service-row__copy { order: 2; }
    .service-row__media { aspect-ratio: 4/5; }
    .journal__head { padding: 64px 24px 40px; }
    .journal__grid {
      grid-template-columns: 1fr;
      gap: 56px;
      padding: 0 24px 64px;
    }
    .journal-card__media { aspect-ratio: 4 / 5; }
    .journal-card,
    .journal-card:nth-child(even) {
      grid-template-columns: 1fr;
      gap: 28px;
      padding: 36px 0;
    }
    .journal-card:nth-child(even) .journal-card__media { order: 0; }
    .journal-card:nth-child(even) .journal-card__body { order: 0; }
    .journal-card__media { aspect-ratio: 4/3; }
    .journal-card__footer { flex-direction: column; align-items: flex-start; gap: 18px; }
    .faqs { padding: 80px 24px 80px; }
    .faqs__list { grid-template-columns: 1fr; column-gap: 0; }
    .faqs__list .faq { grid-column: 1 !important; grid-row: auto !important; }
    .faqs__list .faq:nth-child(4) { border-top: 0; }
    .testimonial { padding: 80px 24px; }
    .faq summary { grid-template-columns: 36px 1fr auto; padding: 24px 4px; gap: 16px; }
    .faq__body { padding-left: 52px; }
    .booking { padding: 80px 24px 96px; grid-template-columns: 1fr; gap: 48px; }
    .contact-form__row { grid-template-columns: 1fr; gap: 28px; }
    .contact-form__row label { margin-bottom: 28px; }
    .contact-form__consents { grid-template-columns: 1fr; gap: 28px; }
    .nav__phone { display: none; }
    .credibility__inner { gap: 10px 24px; }
    .credibility__item { font-size: 9.5px; letter-spacing: 0.2em; }
    .process__head { position: static; padding: 0; }
    .process__pre { padding: 24px; grid-template-columns: 1fr; gap: 12px; }
    .process__line { display: none; }
    .process__grid { grid-template-columns: 1fr; gap: 36px; }
    .process-step__index { padding: 0; }
    .process-step__node { justify-content: flex-start; margin-bottom: 16px; }
    .process-step h3,
    .process-step__duration,
    .process-step__body,
    .process-step__outcome,
    .process-step__more { text-align: left; }
    .gallery-card { width: 260px; }
    .press__inner { grid-template-columns: 1fr; gap: 16px; }
    .press__items { gap: 10px 24px; }
    .press__item { font-size: 14px; }
    .testimonial { grid-template-columns: 1fr; gap: 40px; }
    .founder__inner { grid-template-columns: 1fr; padding: 80px 24px; gap: 48px; }
    .treatments-strip__inner { grid-template-columns: 1fr; padding: 80px 24px; gap: 40px; }
    .footer__inner { grid-template-columns: 1fr 1fr; }
    .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
  }

  /* =================================================================
     SUBPAGE SYSTEM (Tier 1 + 2: about, hubs, treatment, legal, etc.)
     ================================================================= */

  /* Page hero (used on every subpage) */
  .page-hero {
    padding: 200px 64px 96px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .page-hero--centered .page-hero__inner { text-align: center; max-width: 880px; margin: 0 auto; }
  .page-hero__inner { max-width: 1200px; margin: 0 auto; }
  .page-hero__inner .eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 28px;
  }
  .page-hero__title {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 300;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.08;
    color: var(--text-primary);
    margin: 0 0 28px;
    text-wrap: balance;
  }
  .page-hero__sub {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.6;
    color: var(--text-primary);
    max-width: 720px;
    margin: 0;
    text-wrap: balance;
  }
  .page-hero--centered .page-hero__sub { margin: 0 auto; }

  /* Generic content wrapper */
  .content-wrap {
    padding: 100px 64px;
    background: var(--bg);
  }
  .content {
    max-width: 820px;
    margin: 0 auto;
    color: var(--text-primary);
    font-weight: 300;
    font-size: 16.5px;
    line-height: 1.78;
  }
  .content p { margin: 0 0 24px; }
  .content h2 {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 15px;
    font-weight: 300;
    color: var(--text-primary);
    margin: 64px 0 24px;
  }
  .content h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-primary);
    margin: 36px 0 16px;
  }
  .content a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: border-color 200ms ease;
  }
  .content a:hover { border-color: var(--text-primary); }

  .content .lede {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 19px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0 0 40px;
  }

  /* Bulleted lists */
  .bullets, .ordered {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
  }
  .bullets li, .ordered li {
    position: relative;
    padding: 12px 0 12px 32px;
    border-bottom: 1px solid var(--border);
    font-weight: 300;
    line-height: 1.65;
  }
  .bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 23px;
    width: 16px;
    height: 1px;
    background: var(--text-secondary);
  }
  .ordered { counter-reset: ord; }
  .ordered li {
    counter-increment: ord;
  }
  .ordered li::before {
    content: counter(ord, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 12px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--text-primary);
  }
  .bullets li:last-child, .ordered li:last-child { border-bottom: none; }

  /* Legal content tightening */
  .content--legal h2 { font-size: 12px; letter-spacing: 0.22em; margin: 48px 0 12px; }
  .content--legal h3 { font-size: 11px; letter-spacing: 0.2em; margin: 28px 0 10px; }
  .content--legal p { font-size: 15.5px; }

  /* Service hub treatment cards (Hair, Laser, SPMU hubs) */
  .treatment-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .treatment-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 56px 48px 48px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 240ms ease, border-color 240ms ease;
    position: relative;
  }
  .treatment-card:hover {
    background: #EAE5DB;
    border-color: #C9C2B5;
  }
  .treatment-card__num {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--text-primary);
    text-transform: uppercase;
    margin-bottom: 36px;
  }
  .treatment-card__title {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 22px;
    font-weight: 300;
    margin: 0 0 16px;
    line-height: 1.2;
  }
  .treatment-card__sub {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 17px;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0 0 32px;
  }
  .treatment-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 32px;
  }
  .treatment-card__meta span { white-space: nowrap; }
  .treatment-card__link {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-primary);
    border-bottom: 1px solid var(--text-primary);
    padding-bottom: 4px;
    display: inline-block;
  }

  /* Individual treatment page: summary box */
  .treatment-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 0 0 56px;
  }
  .treatment-summary > div {
    background: var(--bg);
    padding: 28px 24px;
  }
  .treatment-summary dt {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 10px;
  }
  .treatment-summary dd {
    margin: 0;
    font-family: var(--font-hero);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    text-transform: uppercase;
    font-weight: 300;
  }

  /* CTA band (used at end of pages) */
  .cta-band {
    background: var(--brown);
    color: #FFFFFF;
    padding: 100px 64px;
    text-align: center;
  }
  .cta-band__inner { max-width: 720px; margin: 0 auto; }
  .cta-band .eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: #FFFFFF;
    margin-bottom: 24px;
  }
  .cta-band h2 {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 300;
    line-height: 1.15;
    margin: 0 0 24px;
    color: #FFFFFF;
    text-wrap: balance;
  }
  .cta-band p {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 18px;
    line-height: 1.65;
    color: #FFFFFF;
    margin: 0 0 40px;
  }
  .cta-band .btn {
    background: var(--bg);
    color: var(--text-primary);
    border-color: var(--bg);
    padding: 20px 40px;
  }
  .cta-band .btn:hover { background: transparent; color: #FFFFFF; }

  /* FAQ group blocks (for grouped FAQs page) */
  .faqs__group {
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 0 64px;
  }
  .faqs__group h2 {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 14px;
    font-weight: 300;
    color: var(--text-primary);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin: 0 0 8px;
  }

  /* Article (journal post) page */
  /* Article body: white ground, solid nav, tighter type */
  body.article-body { background: #FFFFFF; }
  body.article-body .nav {
    background-color: transparent;
    color: var(--text-primary);
    padding: 22px 48px;
    text-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.article-body .nav::before { display: none; }
  body.article-body .nav.is-scrolled {
    background-color: rgba(245, 242, 236, 0.96);
    color: var(--text-primary);
    padding: 16px 48px;
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
  }

  /* Every light-ground subpage (journal listing, about, contact, packages, etc.)
     needs a solid, dark-text nav from load. Only pages with a dark full-viewport
     hero (homepage + hub + treatment detail split-heroes) opt out. */
  body.solid-nav { background: #FFFFFF; }
  /* Pages with a dark image hero but a white page ground (About, Training): nav behaves exactly as the homepage */
  body.white-ground { background: #FFFFFF; }
  body.solid-nav .nav {
    background-color: transparent;
    color: var(--text-primary);
    padding: 22px 48px;
    text-shadow: none;
    transition: background-color 280ms ease, padding 280ms ease;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.solid-nav .nav::before { display: none; }
  body.solid-nav .nav.is-scrolled {
    background-color: rgba(245, 242, 236, 0.96);
    color: var(--text-primary);
    padding: 16px 48px;
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
  }
  body.article-body .nav.is-scrolled {
    background-color: rgba(245, 242, 236, 0.96);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
  }

  /* About group + slim horizontal sub-nav */
  .nav__group { position: relative; display: inline-flex; align-items: center; }
  .nav__group-trigger { display: inline-block; }

  /* About sub-nav: hidden until About is hovered; stays open while the cursor is on it */
  .nav-subnav {
    position: fixed;
    top: 74px; left: 0; right: 0;
    z-index: 49;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 300ms cubic-bezier(.22,.61,.36,1), visibility 220ms ease, top 280ms ease;
  }
  .nav-subnav.is-open,
  .nav:has([data-subnav-trigger]:hover) ~ .nav-subnav,
  .nav-subnav:hover,
  .nav-subnav:focus-within {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Invisible bridge up into the nav so the cursor never crosses a dead zone on the way down */
  .nav-subnav::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -28px;
    height: 28px;
  }
  .nav-subnav__inner { padding: 14px 48px !important; }
  .nav.is-scrolled ~ .nav-subnav { top: 62px; }
  body.solid-nav .nav-subnav { top: 74px; }
  body.solid-nav .nav.is-scrolled ~ .nav-subnav { top: 62px; }
  body.article-body .nav-subnav { top: 74px; }
  body.article-body .nav.is-scrolled ~ .nav-subnav { top: 62px; }
  .nav-subnav__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 18px 48px;
    display: flex;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .nav-subnav a {
    text-decoration: none;
    padding: 6px 0;
    transition: opacity 200ms ease;
  }
  /* Default state mirrors the transparent nav over a dark hero: light text, soft shadow for legibility */
  .nav-subnav a em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: #FFFFFF;
    text-shadow: none;
    transition: color 280ms ease;
  }
  .nav-subnav a:hover { opacity: 0.72; }

  @media (max-width: 720px) { .nav-subnav { display: none; } }

  .article-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 140px 40px 96px;
    background: #FFFFFF;
  }
  .article-page > * { max-width: 680px; margin-left: auto; margin-right: auto; }
  .article-page > .article-page__media,
  .article-page > .article-page__body > .article-page__figure--wide {
    max-width: 1160px;
  }
  .article-page__figure {
    margin: 64px auto;
    max-width: 680px;
  }
  .article-page__figure--wide { max-width: 1080px; }
  .article-page__figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: grayscale(1) brightness(0.97) contrast(1.02);
    display: block;
  }
  .article-page__figure figcaption {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-primary);
    margin-top: 16px;
    text-align: center;
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
  }
  .article-page__figure figcaption::before { display: none; }
  .article-page__figure--diagram {
    background: var(--bg);
    padding: 48px 40px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    max-width: 1080px;
  }
  .article-page__figure--diagram svg {
    width: 100%;
    height: auto;
    display: block;
    max-width: 900px;
    margin: 0 auto;
  }
  .article-page__figure--diagram figcaption {
    text-align: center;
    max-width: 52ch;
    margin: 24px auto 0;
    font-size: 13px;
  }

  /* Article footer: cleaner CTA */
  .article-page__footer {
    max-width: 680px !important;
    margin-top: 96px !important;
    padding-top: 40px !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 24px !important;
  }

  /* Author bio card at the very end of the article */
  .article-bio {
    max-width: 680px;
    margin: 72px auto 0;
    padding: 40px 0 0;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 28px;
    align-items: start;
  }
  .article-bio__photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface);
  }
  .article-bio__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.98) contrast(1.02);
  }
  .article-bio__kicker {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 9.5px;
    color: var(--text-primary);
    margin: 0 0 10px;
  }
  .article-bio__name {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 12px;
  }
  .article-bio__body {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0 0 16px;
  }
  .article-bio__link {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--text-primary);
  }

  @media (max-width: 700px) {
    .article-page { padding: 120px 24px 72px; }
    .article-page__title { font-size: 30px; }
    .article-page__media { aspect-ratio: 4 / 3; margin-bottom: 56px; }
    .article-page__body { font-size: 15.5px; }
    .article-page__body p:first-child { font-size: 18px; }
    .article-page__body p:first-child::first-letter { font-size: 56px; }
    .article-page__body h2 { font-size: 24px; margin: 56px 0 20px; padding-top: 32px; }
    .article-page__body blockquote { font-size: 22px !important; margin: 40px auto !important; }
    .article-page__figure--diagram { padding: 32px 20px; margin-left: -24px; margin-right: -24px; }
    .article-page__footer { flex-direction: column; align-items: flex-start !important; }
    .article-bio { grid-template-columns: 72px 1fr; gap: 20px; }
    .article-bio__photo { width: 72px; height: 72px; }
  }

  /* Related articles block at the end of a journal post */
  .article-related {
    max-width: 1180px;
    margin: 96px auto 0;
    padding: 64px 40px 0;
    border-top: 1px solid var(--border);
  }
  .article-related__head {
    text-align: center;
    margin-bottom: 48px;
  }
  .article-related__head .eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 16px;
  }
  .article-related__head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0;
  }
  .article-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .article-related__card {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .article-related__card-media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .article-related__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    transition: transform 500ms ease;
  }
  .article-related__card:hover .article-related__card-media img { transform: scale(1.04); }
  .article-related__card-meta {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  .article-related__card-title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0 0 12px;
  }
  .article-related__card-excerpt {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0;
  }
  @media (max-width: 900px) {
    .article-related__grid { grid-template-columns: 1fr; gap: 40px; }
    .article-related { padding: 48px 24px 0; }
  }
  .article-page__body ul, .article-page__body ol {
    padding-left: 0;
    list-style: none;
    margin: 24px 0 28px;
  }
  .article-page__body ul li, .article-page__body ol li {
    position: relative;
    padding: 6px 0 6px 24px;
    border: none;
  }
  .article-page__body ul li:before {
    content: '';
    position: absolute;
    left: 4px;
    top: 15px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--warm-tan);
  }
  .article-page__body ol { counter-reset: c; }
  .article-page__body ol li { counter-increment: c; padding-left: 34px; }
  .article-page__body ol li:before {
    content: counter(c, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 7px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 14px;
    color: var(--text-primary);
  }
  .article-page__header {
    text-align: center;
    margin: 0 auto 72px;
    max-width: 960px;
  }
  .article-page__kicker {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.36em;
    font-size: 9.5px;
    color: var(--text-primary);
    margin-bottom: 40px;
  }
  .article-page__kicker span { margin: 0 10px; opacity: 1; }
  .article-page__meta-line { display: none; }
  .article-page__header .eyebrow { display: none; }
  .article-page__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.08;
    color: var(--text-primary);
    margin: 0 auto 32px;
    text-wrap: balance;
    max-width: 30ch;
  }
  .article-page__dek {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(17px, 1.9vw, 22px);
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 auto 44px;
    max-width: 62ch;
    text-wrap: balance;
  }
  .article-page__byline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
  }
  .article-page__byline span { display: inline-flex; align-items: center; gap: 10px; }
  .article-page__byline em {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    color: var(--text-primary);
  }
  .article-page__byline .divider {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--border);
  }
  .article-page__sub { display: none; }
  .article-page__media {
    margin: 0 0 72px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .article-page__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
  }
  .article-page__body {
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-primary);
    max-width: 680px;
    margin: 0 auto;
  }
  .article-page__body p { margin: 0 0 20px; }
  .article-page__body p:first-child {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 19px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 32px;
  }
  .article-page__body p:first-child::first-letter {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 64px;
    line-height: 0.85;
    float: left;
    padding: 6px 10px 0 0;
    color: var(--text-primary);
  }
  .article-page__body h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.18;
    color: var(--text-primary);
    margin: 56px 0 20px;
    text-wrap: balance;
  }
  .article-page__body h2::before {
    content: "\00A7";
    display: inline-block;
    margin-right: 14px;
    font-family: var(--font-display);
    font-style: normal;
    font-size: 13px;
    color: var(--text-primary);
    vertical-align: middle;
    opacity: 1;
  }
  .article-page__body h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--text-primary);
    margin: 36px 0 14px;
  }
  .article-page__body strong {
    font-weight: 400;
    color: var(--text-primary);
  }
  .article-page__body a {
    color: var(--text-primary);
    text-decoration: none;
    background-image: linear-gradient(to top, var(--warm-tan) 1px, transparent 1px);
    background-repeat: repeat-x;
    background-position: 0 100%;
    padding-bottom: 2px;
    transition: color 200ms ease, background-image 200ms ease;
  }
  .article-page__body a:hover {
    color: var(--text-primary);
    background-image: linear-gradient(to top, var(--text-primary) 1px, transparent 1px);
  }
  .article-page__body a[target="_blank"]::after {
    content: "\2197";
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.75em;
    margin-left: 4px;
    color: var(--text-primary);
    vertical-align: super;
    line-height: 0;
  }

  /* Further reading pull-out box — the internal linking callout */
  .article-page__body .further-reading {
    background: var(--bg);
    border-top: 1px solid var(--warm-tan);
    border-bottom: 1px solid var(--warm-tan);
    padding: 32px 36px;
    margin: 48px 0;
  }
  .article-page__body .further-reading__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 20px;
  }
  .article-page__body .further-reading ul {
    margin: 0 !important;
    padding: 0;
    list-style: none;
  }
  .article-page__body .further-reading li {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
  }
  .article-page__body .further-reading li:before { display: none; }
  .article-page__body .further-reading li:last-child { border-bottom: none; }
  .article-page__body .further-reading li a {
    background-image: none;
    padding: 0;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 16px;
    color: var(--text-primary);
    flex: 1;
  }
  .article-page__body .further-reading li a:hover { color: var(--text-primary); }
  .article-page__body .further-reading li a::after { display: none !important; }
  .article-page__body .further-reading li .further-reading__arrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10px;
    color: var(--text-primary);
    white-space: nowrap;
  }
  .article-page__body blockquote {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(24px, 2.6vw, 32px) !important;
    line-height: 1.36 !important;
    color: var(--text-primary);
    text-align: center;
    margin: 56px auto !important;
    padding: 0 !important;
    max-width: 24ch;
    border: none;
    position: relative;
    text-wrap: balance;
  }
  .article-page__body blockquote::before,
  .article-page__body blockquote::after {
    display: block;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 42px;
    line-height: 1;
    color: var(--text-primary);
    opacity: 1;
  }
  .article-page__body blockquote::before { content: "\201C"; margin-bottom: 4px; }
  .article-page__body blockquote::after { content: "\201D"; margin-top: 4px; }
  .article-page__body .ordered, .article-page__body .bullets { margin: 20px 0 28px; }
  .article-page__body ul, .article-page__body ol { max-width: 100%; }
  .article-page__footer {
    margin-top: 96px;
    padding-top: 48px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
  }

  /* About / Meet Zara page-specific tweaks */
  .about-pull-quote {
    max-width: 880px;
    margin: 80px auto;
    padding: 0 32px;
    text-align: center;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.45;
    color: var(--text-primary);
    text-wrap: balance;
  }
  .about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    max-width: 1200px;
    margin: 80px auto;
  }
  .about-stats__cell {
    background: var(--bg);
    padding: 56px 32px;
    text-align: center;
  }
  .about-stats__num {
    font-family: var(--font-hero);
    font-size: 44px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0 0 12px;
    line-height: 1;
  }
  .about-stats__label {
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-primary);
  }

  /* Contact page */
  .contact-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 64px;
  }
  .contact-page__side h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 12px;
  }
  .contact-page__side p {
    font-weight: 300;
    line-height: 1.7;
    margin: 0 0 32px;
  }
  .contact-page__side a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
  }

  /* Press page */
  .press-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    max-width: 1200px;
    margin: 0 auto;
  }
  .press-feature-grid > div {
    background: var(--bg);
    padding: 64px 32px;
    text-align: center;
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 300;
  }

  /* Mobile breakpoints for new components */
  @media (max-width: 900px) {
    .page-hero { padding: 140px 24px 64px; }
    .content-wrap { padding: 64px 24px; }
    .treatment-cards { grid-template-columns: 1fr; gap: 16px; }
    .treatment-card { padding: 40px 28px 36px; }
    .treatment-summary { grid-template-columns: 1fr 1fr; }
    .cta-band { padding: 72px 24px; }
    .faqs__group { padding: 0 24px; margin-bottom: 56px; }
    .contact-page__grid { grid-template-columns: 1fr; gap: 56px; padding: 64px 24px; }
    .about-stats { grid-template-columns: 1fr; }
    .about-stats__cell { padding: 40px 24px; }
    .article-page { padding: 130px 24px 80px; }
    .article-page__media { margin-bottom: 40px; aspect-ratio: 4/3; }
    .press-feature-grid { grid-template-columns: 1fr 1fr; }
    .press-feature-grid > div { padding: 40px 16px; font-size: 13px; }
    .article-page__footer { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 600px) {
    .treatment-summary { grid-template-columns: 1fr; }
  }

  /* =================================================================
     EDITORIAL SUBPAGE SYSTEM (hubs + treatment details)
     ================================================================= */

  /* Sub-hero: title block + full-bleed image below */
  .sub-hero {
    padding: 200px 64px 0;
    background: var(--bg);
  }
  .sub-hero__inner {
    max-width: 1180px;
    margin: 0 auto 80px;
  }
  .sub-hero__inner .eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 32px;
  }
  .sub-hero__title {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 300;
    font-size: clamp(36px, 5.5vw, 72px);
    line-height: 1.05;
    color: var(--text-primary);
    margin: 0 0 32px;
    text-wrap: balance;
    max-width: 18ch;
  }
  .sub-hero__sub {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
    max-width: 56ch;
    text-wrap: balance;
  }
  .sub-hero__media {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
  }
  .sub-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
  }

  /* Sub-intro paragraphs (used between sections) */
  .sub-intro {
    padding: 96px 64px;
    background: var(--bg);
  }
  .sub-intro__inner {
    max-width: 820px;
    margin: 0 auto;
  }
  .sub-intro__lede {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 32px;
    text-wrap: balance;
  }
  .sub-intro__body {
    font-weight: 300;
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-primary);
    margin: 0;
  }

  /* Hub treatment grid (2-up cards with media on top) */
  .hub-grid {
    padding: 0 64px 120px;
    background: var(--bg);
  }
  .hub-grid__head {
    max-width: 1180px;
    margin: 0 auto 72px;
    text-align: center;
  }
  .hub-grid__head .eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .hub-grid__title {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 300;
    font-size: clamp(26px, 3.4vw, 42px);
    line-height: 1.12;
    color: var(--text-primary);
    margin: 0;
    text-wrap: balance;
  }
  .hub-grid__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px 48px;
    max-width: 1180px;
    margin: 0 auto;
  }

  .hub-card { background: var(--bg); }
  .hub-card__media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    margin-bottom: 32px;
  }
  .hub-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    transition: transform 600ms ease, filter 400ms ease;
  }
  .hub-card__media:hover img {
    transform: scale(1.03);
    filter: grayscale(0.6) brightness(1) contrast(1.04);
  }
  .hub-card__num {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 20px;
  }
  .hub-card__name {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 300;
    color: var(--text-primary);
    margin: 0 0 14px;
  }
  .hub-card__tagline {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 18px;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0 0 24px;
  }
  .hub-card__body-text {
    font-weight: 300;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--text-primary);
    margin: 0 0 28px;
  }
  .hub-card__meta {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hub-card__meta-divider {
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--border);
  }
  .hub-card__link {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--text-primary);
    padding-bottom: 4px;
    display: inline-block;
  }
  .hub-card__link .arrow { margin-left: 8px; transition: transform 240ms ease; display: inline-block; }
  .hub-card__link:hover .arrow { transform: translateX(4px); }

  /* Sub-cinematic image band (used mid-page on hubs and treatment details) */
  .sub-cinematic {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 480px;
    overflow: hidden;
  }
  .sub-cinematic--tall { height: 90vh; min-height: 640px; }
  .sub-cinematic__media,
  .sub-cinematic__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sub-cinematic__media img {
    filter: grayscale(1) brightness(0.78) contrast(1.02);
  }
  .sub-cinematic__overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px;
    color: #FFFFFF;
  }
  .sub-cinematic__eyebrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: #FFFFFF;
    margin-bottom: 24px;
  }
  .sub-cinematic__title {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 300;
    font-size: clamp(26px, 3.6vw, 46px);
    line-height: 1.18;
    color: #FFFFFF;
    margin: 0;
    max-width: 24ch;
    text-wrap: balance;
  }

  /* Treatment detail page: metrics strip + alternating sections */
  .treatment-meta {
    padding: 0 64px;
    background: var(--bg);
    margin-top: -1px;
  }
  .treatment-meta__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .treatment-meta__cell {
    padding: 40px 32px;
    text-align: center;
    border-right: 1px solid var(--border);
  }
  .treatment-meta__cell:last-child { border-right: none; }
  .treatment-meta__label {
    display: block;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 14px;
  }
  .treatment-meta__value {
    display: block;
    font-family: var(--font-hero);
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 300;
    color: var(--text-primary);
  }

  .treatment-section {
    padding: 100px 64px;
    background: var(--bg);
  }
  .treatment-section--alt { background: var(--surface); }
  .treatment-section__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 96px;
    align-items: start;
  }
  .treatment-section__head {
    position: sticky;
    top: 120px;
  }
  .treatment-section__head .eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 20px;
  }
  .treatment-section__title {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 300;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.18;
    color: var(--text-primary);
    margin: 0;
    text-wrap: balance;
  }
  .treatment-section__body {
    font-weight: 300;
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--text-primary);
  }
  .treatment-section__body p { margin: 0 0 22px; }
  .treatment-section__body p:last-child { margin-bottom: 0; }
  .treatment-section__body strong {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary);
    font-weight: 400;
    display: inline-block;
    margin-right: 8px;
  }

  /* Mobile breakpoints */
  @media (max-width: 900px) {
    .sub-hero { padding: 140px 24px 0; }
    .sub-hero__inner { margin-bottom: 56px; }
    .sub-hero__media { aspect-ratio: 4 / 3; }
    .sub-intro { padding: 64px 24px; }
    .hub-grid { padding: 0 24px 80px; }
    .hub-grid__head { margin-bottom: 48px; }
    .hub-grid__list { grid-template-columns: 1fr; gap: 56px; }
    .sub-cinematic { height: 60vh; min-height: 360px; }
    .sub-cinematic__overlay { padding: 32px 24px; }
    .treatment-meta { padding: 0 24px; }
    .treatment-meta__inner { grid-template-columns: 1fr 1fr; }
    .treatment-meta__cell {
      padding: 28px 16px;
      border-right: none;
      border-bottom: 1px solid var(--border);
    }
    .treatment-meta__cell:nth-child(odd) { border-right: 1px solid var(--border); }
    .treatment-meta__cell:nth-child(3),
    .treatment-meta__cell:nth-child(4) { border-bottom: none; }
    .treatment-section { padding: 72px 24px; }
    .treatment-section__inner { grid-template-columns: 1fr; gap: 36px; }
    .treatment-section__head { position: static; }
  }

  /* =================================================================
     SUBPAGE COMPONENT OVERRIDES — built on top of homepage classes
     ================================================================= */

  /* Split-pane hero overlay reuses .hero structure but with subpage-friendly typography */
  .sub-hero-split { min-height: 78vh; }
  .sub-hero-split__eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.36em;
    font-size: 11px;
    color: #FFFFFF;
    margin-bottom: 22px;
  }
  .sub-hero-split__title {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 300;
    font-size: clamp(28px, 4.8vw, 56px);
    line-height: 1.08;
    color: #FFFFFF;
    margin: 0 0 24px;
    text-wrap: balance;
    text-shadow: 0 2px 28px rgba(0,0,0,0.18);
  }
  .sub-hero-split__sub {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0 auto;
    max-width: 52ch;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0,0,0,0.22);
  }

  /* Subpage philosophy section spacing */
  .sub-philosophy { padding: 80px 24px; }

  /* Two-column trio variant for hub pages with 4 treatment cards */
  .sub-trio { padding-top: 40px; }
  .sub-trio__grid {
    display: grid;
    gap: 80px 56px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 64px 0;
  }
  .sub-trio--two .sub-trio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sub-trio--three .sub-trio__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Sub process timeline padding so it doesn't crash into the prior block */
  .sub-process { padding-top: 40px; padding-bottom: 60px; }

  /* Sub split: option to put image on the right of the founder layout */
  .sub-split { padding-top: 60px; padding-bottom: 60px; }
  .sub-split--media-right .founder__inner { direction: rtl; }
  .sub-split--media-right .founder__inner > * { direction: ltr; }

  /* Sub FAQs - title block above the existing grid */
  .sub-faqs .faqs__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
  }
  .sub-faqs .faqs__head .eyebrow {
    display: inline-block;
    margin-bottom: 18px;
  }
  .sub-faqs .faqs__head h2 {
    font-family: var(--font-hero);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 300;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.12;
    color: var(--text-primary);
    margin: 0;
    text-wrap: balance;
  }

  /* Treats list - one-column elegant list for treatment detail pages */
  .treats-grid {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 64px;
  }
  .treats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border);
  }
  .treats-list li {
    position: relative;
    padding: 24px 0 24px 48px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: var(--text-primary);
  }
  .treats-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 34px;
    width: 28px;
    height: 1px;
    background: var(--text-primary);
  }

  /* Suit cards (Ideal for / Not suitable if) */
  .suit-grid-wrap { padding-bottom: 80px; }
  .suit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 64px;
  }
  .suit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 56px 48px;
  }
  .suit-card__label {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .suit-card p {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
  }
  .suit-card--no { background: var(--bg); }

  /* FAQ icon + question wrapper (sub-faqs uses a richer summary structure) */
  .sub-faqs .faq summary { display: flex; align-items: center; gap: 20px; }
  .faq__icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    position: relative;
    margin-right: 4px;
  }
  .faq__icon::before, .faq__icon::after {
    content: '';
    position: absolute;
    background: var(--text-primary);
    transition: transform 240ms ease, opacity 200ms ease;
  }
  .faq__icon::before {
    top: 6.5px; left: 0; width: 14px; height: 1px;
  }
  .faq__icon::after {
    left: 6.5px; top: 0; width: 1px; height: 14px;
  }
  .sub-faqs .faq[open] .faq__icon::after { opacity: 0; transform: rotate(90deg); }
  .faq__q { flex: 1; }

  /* Mobile breakpoints for subpage overrides */
  @media (max-width: 900px) {
    .sub-hero-split { min-height: 72vh; }
    .sub-trio__grid { padding: 0 24px; gap: 56px; }
    .sub-trio--two .sub-trio__grid,
    .sub-trio--three .sub-trio__grid { grid-template-columns: 1fr; }
    .sub-split--media-right .founder__inner { direction: ltr; }
    .treats-grid { padding: 0 24px; }
    .treats-list li { font-size: 17px; padding: 20px 0 20px 40px; }
    .treats-list li::before { top: 30px; width: 22px; }
    .suit-grid { grid-template-columns: 1fr; padding: 0 24px; gap: 16px; }
    .suit-card { padding: 40px 28px; }
    .sub-philosophy { padding: 64px 24px; }
  }

  /* =================================================================
     SUBPAGE TYPOGRAPHY ALIGNMENT TO HOMEPAGE
     Section h2s on the homepage use italic Cormorant Garamond.
     Override the subpage classes I previously set to Sackers Gothic.
     ================================================================= */

  /* Treatment detail page section heads -> italic Cormorant */
  .treatment-section__title,
  .hub-grid__title,
  .sub-faqs .faqs__head h2,
  .cta-band h2,
  .sub-cinematic__title,
  .hub-card__name {
    font-family: var(--font-editorial) !important;
    font-style: italic !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.16 !important;
  }
  .hub-grid__title { font-size: clamp(28px, 3.4vw, 44px) !important; }
  .sub-cinematic__title { font-size: clamp(28px, 4vw, 52px) !important; max-width: 26ch !important; }
  .cta-band h2 { font-size: clamp(28px, 3.6vw, 44px) !important; }
  .sub-faqs .faqs__head h2 { font-size: clamp(28px, 3.2vw, 42px) !important; }
  .hub-card__name {
    font-size: clamp(24px, 2.4vw, 32px) !important;
    margin: 0 0 12px !important;
  }
  .treatment-section__title { font-size: clamp(22px, 2.4vw, 30px) !important; }

  /* Sub-hero split: page identity heading.
     Homepage hero title uses Sackers Gothic, so keep that for the title
     but tone down the letter-spacing so longer page titles fit comfortably. */
  .sub-hero-split__title {
    font-family: var(--font-hero) !important;
    text-transform: uppercase;
    letter-spacing: 0.14em !important;
    font-weight: 300;
    font-size: clamp(22px, 3.4vw, 44px) !important;
    line-height: 1.18;
    white-space: normal !important;
    max-width: 22ch;
    margin: 0 auto 26px;
  }

  /* Page hero title (legal pages) -> editorial italic */
  .page-hero__title {
    font-family: var(--font-editorial) !important;
    font-style: italic !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 300 !important;
    line-height: 1.16 !important;
    font-size: clamp(34px, 4.2vw, 56px) !important;
  }

  /* =================================================================
     SUBPAGE OVERLAP FIXES
     ================================================================= */

  /* Hero overlay sits above the CTA row. Give it more vertical space and
     stop the long sub copy colliding with the dual CTA strip at the bottom. */
  .sub-hero-split .hero__overlay {
    padding: 120px 32px 180px;
    justify-content: center;
  }
  .sub-hero-split__sub {
    max-width: 44ch;
    font-size: clamp(15px, 1.6vw, 19px) !important;
    margin-bottom: 0 !important;
  }
  .sub-hero-split .hero__cta-row { bottom: 40px; }

  /* On mobile the sub-hero title needs more room and the CTA row should stack */
  @media (max-width: 700px) {
    .sub-hero-split .hero__overlay { padding: 100px 24px 140px; }
    .sub-hero-split__title {
      font-size: 18px !important;
      letter-spacing: 0.16em !important;
    }
    .sub-hero-split__sub {
      font-size: 14px !important;
      max-width: 32ch;
    }
    .sub-hero-split .hero__cta-row {
      position: static;
      grid-template-columns: 1fr;
      padding: 32px 24px 24px;
      gap: 18px;
      background: rgba(0,0,0,0.18);
    }
  }

  /* Trio cards on subpages — bigger gap so they don't crash, and the photo
     keeps a healthier aspect ratio on a 2-col grid. */
  .sub-trio .trio-item__photo {
    aspect-ratio: 4 / 5;
    margin-bottom: 32px;
  }
  .sub-trio .trio__head {
    text-align: center;
    padding: 80px 24px 32px;
  }
  .sub-trio .trio__head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.18;
    margin: 0 auto;
    max-width: 28ch;
    text-wrap: balance;
  }

  /* Sub philosophy section padding consistency */
  .sub-philosophy { padding: 96px 24px; }
  .sub-philosophy .mission p {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.5;
    color: var(--text-primary);
    max-width: 56ch;
    margin: 0 auto;
    text-wrap: balance;
  }

  /* Subprocess section — give it a clear top divider so it doesn't run into
     the previous section's bottom */
  .sub-process { padding-top: 60px; padding-bottom: 80px; }

  /* Editorial split (used on sub-pages reusing .founder) - tighten so
     it doesn't have the full homepage founder padding which is huge */
  .sub-split { padding-top: 0; padding-bottom: 60px; }
  .sub-split .founder__header { padding: 80px 24px 48px; }
  .sub-split .founder__header h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.18;
  }
  .sub-split .founder__inner { padding-bottom: 80px; }

  /* =================================================================
     NEW EDITORIAL MOMENTS — explorative, homepage-adjacent vibe
     ================================================================= */

  /* "By the numbers" stats band — a high-contrast brown band with 3 stats.
     A different mood from the homepage but uses the same brown / cream palette. */
  .stats-band {
    background: var(--brown);
    color: #FFFFFF;
    padding: 120px 64px;
  }
  .stats-band__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 72px;
  }
  .stats-band__cell {
    border-top: 1px solid rgba(245,242,236,0.18);
    padding-top: 40px;
  }
  .stats-band__num {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(48px, 6vw, 84px);
    line-height: 1;
    color: #FFFFFF;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
  }
  .stats-band__label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    color: var(--text-primary);
    margin: 0 0 16px;
  }
  .stats-band__body {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #FFFFFF;
    margin: 0;
  }
  @media (max-width: 900px) {
    .stats-band { padding: 80px 24px; }
    .stats-band__inner { grid-template-columns: 1fr; gap: 48px; }
  }

  /* Quote pull-out — a single italic statement, big, on its own panel.
     Reuses .surface palette but with serious whitespace around it. */
  .pull-quote {
    padding: 160px 32px;
    background: var(--surface);
    text-align: center;
  }
  .pull-quote__inner {
    max-width: 880px;
    margin: 0 auto;
  }
  .pull-quote__mark {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 72px;
    line-height: 1;
    color: var(--text-primary);
    opacity: 1;
    margin: 0 0 16px;
    display: block;
  }
  .pull-quote__body {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.32;
    color: var(--text-primary);
    margin: 0 0 40px;
    text-wrap: balance;
  }
  .pull-quote__attribution {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 11px;
    color: var(--text-primary);
  }
  @media (max-width: 900px) {
    .pull-quote { padding: 96px 24px; }
  }

  /* Index list — beautiful numbered index, magazine-style.
     Used for "What it treats" or "What you'll leave with". */
  .index-list {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 64px;
  }
  .index-list__head {
    margin-bottom: 56px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 32px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
    align-items: baseline;
  }
  .index-list__head .eyebrow {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: var(--text-primary);
  }
  .index-list__head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.18;
    color: var(--text-primary);
    margin: 0;
    text-wrap: balance;
  }
  .index-list__items {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .index-list__items li {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 32px;
    align-items: baseline;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.5;
    color: var(--text-primary);
  }
  .index-list__items li::before {
    content: counter(idx, decimal-leading-zero);
    counter-increment: idx;
    font-family: var(--font-display);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-primary);
  }
  .index-list__items { counter-reset: idx; }
  @media (max-width: 900px) {
    .index-list { padding: 64px 24px; }
    .index-list__head { grid-template-columns: 1fr; gap: 16px; }
    .index-list__items li { grid-template-columns: 56px 1fr; gap: 20px; font-size: 17px; }
  }

  /* Overlap layered split: image on the left, a card-style text block
     overlapping its right edge. Editorial magazine spread feel. */
  .layered-split {
    position: relative;
    padding: 120px 64px;
    background: var(--bg);
  }
  .layered-split__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    align-items: center;
  }
  .layered-split__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }
  .layered-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
  }
  .layered-split__card {
    background: var(--surface);
    padding: 80px 64px;
    margin-left: -80px;
    position: relative;
    z-index: 2;
    border: 1px solid var(--border);
  }
  .layered-split__card .eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .layered-split__card h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.18;
    color: var(--text-primary);
    margin: 0 0 28px;
    text-wrap: balance;
  }
  .layered-split__card p {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-primary);
    margin: 0 0 18px;
  }
  .layered-split__card p:last-child { margin-bottom: 0; }
  .layered-split--reverse .layered-split__inner { direction: rtl; }
  .layered-split--reverse .layered-split__inner > * { direction: ltr; }
  .layered-split--reverse .layered-split__card { margin-left: 0; margin-right: -80px; }
  @media (max-width: 900px) {
    .layered-split { padding: 64px 0; }
    .layered-split__inner { grid-template-columns: 1fr; gap: 0; }
    .layered-split__card { margin: -40px 24px 0; padding: 48px 32px; }
    .layered-split--reverse .layered-split__card { margin: -40px 24px 0; }
  }

  /* ---------- Contact page WhatsApp link ---------- */
  .booking__contact-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10.5px;
    color: #FFFFFF;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    transition: border-color 200ms ease, color 200ms ease;
  }
  .booking__contact-whatsapp:hover { border-color: #FFFFFF; }

  /* =================================================================
     CASE STUDIES INDEX
     ================================================================= */
  .case-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0 0 64px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
  }
  .case-filter__btn {
    display: inline-block;
    padding: 12px 22px;
    background: transparent;
    border: 1px solid var(--border);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10.5px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  .case-filter__btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
  .case-filter__btn.is-active {
    background: var(--brown);
    color: #FFFFFF;
    border-color: var(--brown);
  }

  .case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
  }
  .case-card {
    background: transparent;
  }
  .case-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .case-card__media {
    aspect-ratio: 4 / 5;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 24px;
    transition: background-color 260ms ease;
  }
  .case-card__link:hover .case-card__media { background: #E5DFD3; }
  .case-card__placeholder {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    text-align: center;
    line-height: 2;
  }
  .case-card__placeholder em {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    color: var(--text-primary);
    opacity: 1;
  }
  .case-card__service {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 10px;
  }
  .case-card__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0 0 12px;
  }
  .case-card__excerpt {
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0 0 14px;
  }
  .case-card__meta {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
    opacity: 1;
  }
  @media (max-width: 900px) {
    .case-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
    .case-filter { margin-bottom: 40px; }
    .case-filter__btn { padding: 10px 16px; font-size: 9.5px; }
  }
  @media (max-width: 560px) {
    .case-grid { grid-template-columns: 1fr; }
  }

  /* =================================================================
     TRAINING HOLDING PAGE
     ================================================================= */
  /* Full-bleed teaching photograph (mono, darkened) with copy left and the waitlist as a cream overlay right */
  .training-feature {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    background: #100A06;
    color: #FFFFFF;
    overflow: hidden;
  }
  .training-feature__media { position: absolute; inset: 0; }
  .training-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    display: block;
    filter: grayscale(1) brightness(0.6) contrast(1.05);
    animation: training-settle 2600ms cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes training-settle { from { transform: scale(1.12); } to { transform: scale(1.05); } }
  .training-feature__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(16,10,6,0.6) 0%, rgba(16,10,6,0.12) 32%, rgba(16,10,6,0.42) 100%);
    pointer-events: none;
  }
  .training-feature__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 156px 48px 96px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 460px);
    gap: 72px;
    align-items: center;
  }
  .training-feature__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10.5px;
    color: #FFFFFF;
    margin-bottom: 26px;
  }
  .training-feature__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(40px, 5.2vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
    color: #FFFFFF;
    text-wrap: balance;
  }
  .training-feature__sub {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: #FFFFFF;
    max-width: 50ch;
    margin: 0;
  }
  .training-feature__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 30px 0 0;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: 10px;
    color: #FFFFFF;
  }

  .training-feature__form {
    background: rgba(245,242,236,0.96);
    color: var(--text-primary);
    padding: 40px 40px 36px;
  }
  .training-feature__trap { display: none; }
  .training-feature__form-eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 10px;
  }
  .training-feature__form-title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 25px;
    line-height: 1.2;
    margin: 0 0 26px;
    text-wrap: balance;
  }
  .training-feature__field { margin-bottom: 14px; }
  /* Floating labels: the label rests in the field as an italic prompt, then rises to small caps on focus or once filled */
  .training-feature__control label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 17px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
    pointer-events: none;
    white-space: nowrap;
    transition: top 340ms cubic-bezier(.22,.61,.36,1), transform 340ms cubic-bezier(.22,.61,.36,1), font-size 340ms cubic-bezier(.22,.61,.36,1), letter-spacing 340ms cubic-bezier(.22,.61,.36,1), color 220ms ease;
  }
  .training-feature__form input:focus + label,
  .training-feature__form input:not(:placeholder-shown) + label,
  .training-feature__control--select label {
    top: 2px;
    transform: none;
    font-family: var(--font-display);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10px;
  }
  .training-feature__req { color: var(--text-primary); margin-left: 1px; }
  .training-feature__opt { font-size: 0.85em; opacity: 1; margin-left: 4px; }
  /* Faint monogram in the corner of the panel */
  .training-feature__form { position: relative; overflow: hidden; }
  .training-feature__form::before {
    content: "";
    position: absolute;
    top: -14px;
    right: -10px;
    width: 140px;
    height: 148px;
    background: url("../../images/logo-mark.png") no-repeat center / contain;
    opacity: 0.05;
    pointer-events: none;
  }
  /* A line from Zara above the button, signed in her hand */
  .training-feature__note {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 16px;
  }
  .training-feature__note-text {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
    max-width: 30ch;
  }
  .training-feature__note-sig {
    font-family: 'Biro Script', 'Snell Roundhand', 'Apple Chancery', cursive;
    font-size: 26px;
    line-height: 1;
    color: var(--text-primary);
    white-space: nowrap;
    transform: rotate(-4deg);
    transform-origin: left center;
    padding-right: 8px;
  }
  .training-feature__note--done { justify-content: flex-start; margin: 20px 0 0; }
  /* Resting underline on the control itself; a second line draws in from the left on focus */
  .training-feature__control { position: relative; }
  .training-feature__control::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--text-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 460ms cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
  }
  .training-feature__control:focus-within::after { transform: scaleX(1); }
  .training-feature__form input,
  .training-feature__form select {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 22px 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(26,25,22,0.32);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 17px;
    line-height: 1.3;
    color: var(--text-primary);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 220ms ease;
  }
  .training-feature__form input::placeholder { color: var(--text-primary); opacity: 1; }
  .training-feature__form select {
    padding-right: 26px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1916' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
  }
  .training-feature__form select:invalid { color: var(--text-primary); opacity: 1; } /* placeholder option only */
  .training-feature__form select option { font-style: normal; color: var(--text-primary); }
  /* Validation: brand ink only, message drawn in beneath the field */
  .training-feature__error {
    display: block;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-primary);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 320ms cubic-bezier(.22,.61,.36,1), opacity 320ms ease, margin 320ms ease;
  }
  .training-feature__field.is-invalid .training-feature__error { max-height: 40px; opacity: 1; margin-top: 7px; }
  .training-feature__field.is-invalid label { color: var(--text-primary); }
  .training-feature__field.is-invalid input,
  .training-feature__field.is-invalid select { border-bottom-color: var(--text-primary); }
  .training-feature__form button {
    width: 100%;
    margin-top: 8px;
    padding: 17px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: var(--brown);
    color: #FFFFFF;
    border: 1px solid var(--brown);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease, opacity 220ms ease;
  }
  .training-feature__btn-arrow { transition: transform 300ms cubic-bezier(.22,.61,.36,1); }
  .training-feature__form button:hover { background: transparent; color: var(--text-primary); }
  .training-feature__form button:hover .training-feature__btn-arrow { transform: translateX(4px); }
  .training-feature__form.is-sending button { opacity: 0.55; cursor: default; }
  .training-feature__form.is-sending .training-feature__btn-arrow { animation: training-send 900ms cubic-bezier(.22,.61,.36,1) infinite; }
  @keyframes training-send { 0% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(8px); opacity: 0; } 61% { transform: translateX(-6px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
  /* Confirmation replaces the fields inside the same panel */
  .training-feature__done { opacity: 0; transform: translateY(10px); transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 800ms cubic-bezier(.22,.61,.36,1); }
  .training-feature__done.is-in { opacity: 1; transform: translateY(0); }
  .training-feature__done .training-feature__form-title { margin-bottom: 14px; }
  .training-feature__done-body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0;
    max-width: 38ch;
  }
  .training-feature__fine {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 16px 0 0;
  }

  /* Entrance: staggered rise on load (above the fold, so no observer) */
  .training-feature__eyebrow,
  .training-feature__title,
  .training-feature__sub,
  .training-feature__topics,
  .training-feature__form { animation: training-rise 1100ms cubic-bezier(.22,.61,.36,1) both; }
  .training-feature__eyebrow { animation-delay: 300ms; }
  .training-feature__title { animation-delay: 420ms; }
  .training-feature__sub { animation-delay: 540ms; }
  .training-feature__topics { animation-delay: 640ms; }
  .training-feature__form { animation-delay: 720ms; }
  @keyframes training-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

  @media (max-width: 900px) {
    .training-feature__inner { grid-template-columns: 1fr; gap: 44px; padding: 132px 24px 64px; }
    .training-feature__form { padding: 32px 28px 28px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .training-feature__media img,
    .training-feature__eyebrow,
    .training-feature__title,
    .training-feature__sub,
    .training-feature__topics,
    .training-feature__form { animation: none !important; }
  }

  /* =================================================================
     HOMEPAGE CASE STUDIES PREVIEW
     ================================================================= */
  .home-cases {
    padding: 120px 32px;
    background: var(--bg);
  }
  .home-cases__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 72px;
  }
  .home-cases__head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    color: var(--text-primary);
    margin: 20px 0 0;
  }
  .home-cases__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto 56px;
  }
  .home-cases__more {
    text-align: center;
  }
  @media (max-width: 900px) {
    .home-cases { padding: 80px 24px; }
    .home-cases__grid { grid-template-columns: 1fr; gap: 40px; }
  }

  /* =================================================================
     EDUCATION SECTION (Zara's cup analogy)
     ================================================================= */
  .education {
    padding: 120px 32px;
    background: var(--surface);
  }
  .education__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
  }
  .education__head {
    max-width: 42ch;
  }
  .education__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .education__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0 0 32px;
    text-wrap: balance;
  }
  .education__body p {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 22px;
  }
  .education__body p:last-child { margin-bottom: 0; }
  .education__pull {
    display: block;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--text-primary);
    padding-left: 28px;
    border-left: 1px solid var(--warm-tan);
    margin: 32px 0;
  }
  @media (max-width: 900px) {
    .education { padding: 80px 24px; }
    .education__inner { grid-template-columns: 1fr; gap: 48px; }
  }

  /* =================================================================
     PRICING PAGE — alternating menu / image grid, click to expand
     ================================================================= */

  /* Filter chips */
  .menu-filter {
    background: var(--bg);
    padding: 24px 24px 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
  }
  .menu-filter__chip {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10.5px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid rgba(26, 25, 22, 0.18);
    padding: 10px 18px;
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
  }
  .menu-filter__chip:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
  }
  .menu-filter__chip.is-active {
    background: var(--text-primary);
    color: #FFFFFF;
    border-color: var(--text-primary);
  }

  /* Category rows (wrap for filtering) */
  .menu-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    transition: opacity 300ms ease;
  }
  .menu-row.is-hidden { display: none; }

  /* ==================================================================
     ABOUT PAGE — reuses homepage patterns
     ================================================================== */
  .about-hero-full { color: #FFFFFF; }
  .about-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px 120px;
    text-align: left;
  }
  .about-principles-grid article { max-width: 34ch; }
  .about-principles__num {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 16px;
  }
  .about-principles-grid h3 {
    font-family: var(--font-editorial);
    font-weight: 300;
    font-size: 28px;
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0 0 12px;
  }
  .about-principles-grid h3 em { font-style: italic; }
  .about-principles-grid p {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0;
  }
  @media (max-width: 820px) {
    .about-principles-grid { grid-template-columns: 1fr; gap: 32px; }
  }

  /* ==================================================================
     ABOUT PAGE — legacy structured layout (unused now)
     ================================================================== */

  /* Hero */
  .about-hero { background: #FFFFFF; padding: 160px 32px 80px; text-align: center; }
  .about-hero__inner { max-width: 900px; margin: 0 auto; }
  .about-hero__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 28px;
  }
  .about-hero__title {
    font-family: var(--font-editorial);
    font-weight: 300;
    font-size: clamp(36px, 5vw, 68px);
    line-height: 1.05;
    color: var(--text-primary);
    margin: 0 0 32px;
    text-wrap: balance;
    letter-spacing: -0.01em;
  }
  .about-hero__title em { font-style: italic; }
  .about-hero__lede {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.45;
    color: var(--text-primary);
    max-width: 60ch;
    margin: 0 auto;
    text-wrap: balance;
  }

  /* Founder letter (portrait + letter) */
  .about-letter { background: #FFFFFF; padding: 80px 32px 100px; }
  .about-letter__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .about-letter__portrait { margin: 0; position: sticky; top: 120px; }
  .about-letter__portrait img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    filter: grayscale(0.35) brightness(0.98);
  }
  .about-letter__portrait figcaption {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-primary);
    margin-top: 14px;
  }
  .about-letter__body { max-width: 56ch; }
  .about-letter__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .about-letter__lede {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0 0 22px;
  }
  .about-letter__body p {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0 0 16px;
  }
  .about-letter__signoff {
    font-family: var(--font-editorial) !important;
    font-style: italic;
    font-size: 14.5px !important;
    margin: 28px 0 6px !important;
  }
  .about-letter__signature {
    font-family: 'Biro Script', 'Snell Roundhand', cursive !important;
    font-size: 34px !important;
    line-height: 1.05 !important;
    color: var(--text-primary) !important;
    margin: 0 0 14px !important;
    display: block;
    width: max-content;
    max-width: none;
    padding: 4px 36px 4px 6px;
    transform: rotate(-3.5deg);
    transform-origin: left center;
  }
  .about-letter__credit {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 9.5px !important;
    color: var(--text-primary) !important;
    margin: 4px 0 0 !important;
  }

  /* Principles */
  .about-principles { background: var(--bg); padding: 100px 32px; }
  .about-principles__inner { max-width: 1140px; margin: 0 auto; text-align: center; }
  .about-principles__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .about-principles__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    color: var(--text-primary);
    max-width: 30ch;
    margin: 0 auto 64px;
    text-wrap: balance;
  }
  .about-principles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    text-align: left;
  }
  .about-principles__num {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 18px;
  }
  .about-principles__grid h3 {
    font-family: var(--font-editorial);
    font-weight: 300;
    font-size: 28px;
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0 0 12px;
  }
  .about-principles__grid h3 em { font-style: italic; }
  .about-principles__grid p {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0;
  }

  /* Stats strip (walnut band) */
  .about-stats { background: var(--brown); padding: 60px 32px; }
  .about-stats__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
  }
  .about-stats__number {
    display: block;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
    color: #FFFFFF;
    margin-bottom: 12px;
  }
  .about-stats__label {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 9.5px;
    color: #FFFFFF;
  }

  /* Specialisms */
  .about-specialisms { background: #FFFFFF; padding: 100px 32px; }
  .about-specialisms__inner { max-width: 1140px; margin: 0 auto; text-align: center; }
  .about-specialisms__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .about-specialisms__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    color: var(--text-primary);
    max-width: 30ch;
    margin: 0 auto 56px;
    text-wrap: balance;
  }
  .about-specialisms__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: left;
  }
  .about-specialisms__card h3 {
    font-family: var(--font-editorial);
    font-weight: 300;
    font-size: 26px;
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0 0 14px;
  }
  .about-specialisms__card h3 em { font-style: italic; }
  .about-specialisms__card p {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0 0 20px;
  }
  .about-specialisms__link {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--text-primary);
    padding-bottom: 2px;
  }
  .about-specialisms__link:hover { color: var(--text-primary); border-color: var(--text-secondary); }

  /* Credentials + Awards */
  .about-credentials { background: var(--bg); padding: 100px 32px; }
  .about-credentials__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  .about-credentials__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .about-credentials__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .about-credentials__list li {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 17px;
    line-height: 1.4;
    color: var(--text-primary);
    padding: 12px 0;
  }

  /* Training teaser */
  .about-training { background: #FFFFFF; padding: 100px 32px; text-align: center; }
  .about-training__inner { max-width: 720px; margin: 0 auto; }
  .about-training__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .about-training__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0 0 20px;
    text-wrap: balance;
  }
  .about-training__body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
    max-width: 56ch;
    margin: 0 auto 28px;
  }
  .about-training__link {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10.5px;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--text-primary);
    padding-bottom: 4px;
  }

  /* Closing CTA (walnut band) */
  .about-close { background: var(--brown); padding: 120px 32px; text-align: center; }
  .about-close__inner { max-width: 720px; margin: 0 auto; }
  .about-close__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10px;
    color: #FFFFFF;
    margin-bottom: 20px;
  }
  .about-close__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    color: #FFFFFF;
    margin: 0 0 20px;
    text-wrap: balance;
  }
  .about-close__body {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0 0 36px;
  }
  .about-close__cta {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    background: #FFFFFF;
    color: var(--text-primary);
    border: 1px solid #FFFFFF;
    padding: 18px 32px;
    cursor: pointer;
    transition: background 240ms ease, color 240ms ease;
  }
  .about-close__cta:hover { background: transparent; color: #FFFFFF; }

  @media (max-width: 900px) {
    .about-letter__inner,
    .about-principles__grid,
    .about-specialisms__grid,
    .about-credentials__inner,
    .about-stats__inner { grid-template-columns: 1fr; gap: 40px; }
    .about-letter__portrait { position: static; }
  }

  /* ---------- Results Gallery ---------- */
  .results-gallery {
    background: #FFFFFF;
    padding: 120px 40px 96px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .results-gallery__masthead {
    text-align: center;
    margin: 0 0 40px;
  }
  .results-gallery__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  .results-gallery__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1;
    color: var(--text-primary);
    margin: 0 0 10px;
    letter-spacing: -0.005em;
  }
  .results-gallery__meta {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 9.5px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .results-gallery__intro {
    max-width: 620px;
    margin: 0 auto;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    text-wrap: balance;
  }

  .results-gallery__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 48px;
  }
  .results-gallery__chip {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid rgba(26, 25, 22, 0.18);
    padding: 10px 18px;
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
  }
  .results-gallery__chip:hover { color: var(--text-primary); border-color: var(--text-primary); }
  .results-gallery__chip.is-active {
    background: var(--text-primary);
    color: #FFFFFF;
    border-color: var(--text-primary);
  }

  .results-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  @media (max-width: 900px) { .results-gallery__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .results-gallery__grid { grid-template-columns: 1fr; } }

  .results-gallery__tile {
    margin: 0;
    display: block;
  }
  .results-gallery__media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--surface);
  }
  .results-gallery__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    transform: scale(1);
    transition: filter 500ms cubic-bezier(.22,.61,.36,1), transform 900ms cubic-bezier(.22,.61,.36,1);
  }
  .results-gallery__tile:hover .results-gallery__media img {
    filter: grayscale(0) brightness(1) contrast(1);
    transform: scale(1.03);
  }
  .results-gallery__caption {
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .results-gallery__caption span {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 9.5px;
    color: var(--text-primary);
  }
  .results-gallery__caption em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.2;
    color: var(--text-primary);
  }

  .results-gallery__empty {
    text-align: center;
    padding: 40px 24px;
    font-family: var(--font-editorial);
    font-style: italic;
    color: var(--text-primary);
  }

  .results-gallery__cta {
    text-align: center;
    padding: 96px 24px 0;
  }
  .results-gallery__cta p {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 18px;
    color: var(--text-primary);
    margin: 0 0 24px;
  }
  .results-gallery__book {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10.5px;
    background: var(--brown);
    color: #FFFFFF;
    border: 0;
    padding: 14px 28px;
    cursor: pointer;
    transition: background 240ms ease, color 240ms ease, box-shadow 240ms ease;
  }
  .results-gallery__book:hover {
    background: #FFFFFF;
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--brown);
  }

  /* Text-based pricing hero (mirrors journal masthead) */
  .pricing-hero-text {
    background: #FFFFFF;
    text-align: center;
    padding: 120px 40px 32px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .pricing-hero-text__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  .pricing-hero-text__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1;
    color: var(--text-primary);
    margin: 0 0 10px;
    letter-spacing: -0.005em;
  }
  .pricing-hero-text__meta {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 9.5px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .pricing-hero-text__intro {
    max-width: 620px;
    margin: 0 auto 32px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    text-wrap: balance;
  }
  .pricing-hero-text__cta {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10.5px;
    background: var(--brown);
    color: #FFFFFF;
    border: 0;
    padding: 14px 28px;
    cursor: pointer;
    transition: background 240ms ease, color 240ms ease;
  }
  .pricing-hero-text__cta:hover { background: #FFFFFF; color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--brown); }

  .menu-grid {
    display: block;
    background: #FFFFFF;
  }
  .menu-block {
    display: block;
  }
  .menu-row {
    align-items: stretch;
  }
  .menu-block--menu {
    background: #FFFFFF;
    padding: 72px 64px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .menu-block--menu:nth-of-type(4n+3) { background: #FFFFFF; }
  .menu-filter { background: #FFFFFF !important; border-bottom: 0 !important; }
  .menu-block--image {
    background: var(--surface);
    overflow: hidden;
    position: relative;
    min-height: 100%;
  }
  .menu-block--image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    transition: filter 500ms cubic-bezier(.22,.61,.36,1);
  }
  /* Image blooms to full colour when hovering a price row in the same category row */
  .menu-row:has(.menu-col__row:hover) .menu-block--image img {
    filter: grayscale(0) brightness(1) contrast(1);
  }

  .menu-col {
    width: 100%;
    max-width: 460px;
  }
  .menu-col__head {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 400;
    font-size: 15px;
    color: var(--text-primary);
    margin: 0 0 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .menu-col__head em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 18px;
    color: var(--text-primary);
  }

  .menu-col__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .menu-col__row {
    border-bottom: 1px solid rgba(26, 25, 22, 0.15);
    padding: 22px 0;
    position: relative;
    cursor: default;
  }
  .menu-col__row:last-child { border-bottom: none; }

  /* Compact hover reveal (no click) */
  .menu-col__hover {
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms cubic-bezier(.22,.61,.36,1), opacity 260ms ease, margin-top 260ms ease;
    opacity: 0;
    margin-top: 0;
  }
  .menu-col__row:hover .menu-col__hover,
  .menu-col__row:focus-within .menu-col__hover {
    max-height: 240px;
    opacity: 1;
    margin-top: 12px;
  }
  .menu-col__hover-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    background: rgba(26, 25, 22, 0.04);
    border-left: 2px solid var(--text-primary);
  }
  .menu-col__hover-row {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 14px;
    align-items: baseline;
  }
  .menu-col__hover-row dt {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 9.5px;
    color: var(--text-primary);
    margin: 0;
  }
  .menu-col__hover-row dd {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
  }
  @media (max-width: 720px) {
    .menu-col__hover { max-height: none; opacity: 1; margin-top: 12px; }
  }

  .menu-col__toggle {
    width: 100%;
    background: transparent;
    border: none;
    padding: 24px 2px 22px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    color: var(--text-primary);
    transition: color 220ms ease;
  }

  .menu-col__row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
  }
  .menu-col__name {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
  }
  .menu-col__price-line {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
  }
  .menu-col__price {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    color: var(--text-primary);
  }
  .menu-col__dot { color: var(--text-primary); font-size: 12px; }
  .menu-col__duration {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 9.5px;
    color: var(--text-primary);
  }

  .menu-col__desc {
    font-weight: 300;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0 0 14px;
  }
  .menu-col__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 9.5px;
    color: var(--text-primary);
    align-self: flex-start;
  }
  .menu-col__more-label {}
  .menu-col__arrow {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 18px;
    line-height: 1;
    color: var(--text-primary);
    transition: transform 260ms ease;
    display: inline-block;
  }
  .menu-col__row.is-open .menu-col__arrow { transform: rotate(45deg); }
  .menu-col__toggle:hover .menu-col__more,
  .menu-col__toggle:hover .menu-col__arrow { color: var(--text-primary); }
  .menu-col__row.is-open .menu-col__more,
  .menu-col__row.is-open .menu-col__arrow { color: var(--text-primary); }

  .menu-col__details {
    overflow: hidden;
    max-height: 0;
    transition: max-height 380ms ease;
  }
  .menu-col__row.is-open .menu-col__details { padding-bottom: 24px; }

  .menu-col__detail-list {
    margin: 8px 0 20px;
    padding: 20px 0 0;
    border-top: 1px solid rgba(26, 25, 22, 0.12);
  }
  .menu-col__detail-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(26, 25, 22, 0.08);
  }
  .menu-col__detail-row:last-child { border-bottom: none; }
  .menu-col__detail-row dt {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 9.5px;
    color: var(--text-primary);
    margin: 3px 0 0;
  }
  .menu-col__detail-row dd {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
  }

  .menu-col__book {
    background: var(--text-primary);
    color: #FFFFFF;
    border: 1px solid var(--text-primary);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 10px;
    padding: 14px 24px;
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease;
  }
  .menu-col__book:hover { background: var(--warm-tan); color: var(--text-primary); border-color: var(--warm-tan); }

  /* Fine print strip on the brand surface tone */
  .price-fine {
    background: #FFFFFF;
    padding: 40px 40px;
  }
  .price-fine__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .price-fine__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 10px;
  }
  .price-fine__item p {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
  }

  /* Closing CTA on walnut brown */
  .price-close {
    background: var(--brown);
    color: #FFFFFF;
    padding: 96px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  /* The house on the diagonal behind the closing band: mono, deep, the facade rising from the right as on the homepage close */
  .price-close__media { position: absolute; inset: 0; z-index: 0; }
  .price-close__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 62%;
    display: block;
    filter: grayscale(1) brightness(0.42) contrast(1.05);
  }
  .price-close__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(16,10,6,0.72) 0%, rgba(16,10,6,0.5) 50%, rgba(16,10,6,0.18) 100%);
  }
  .price-close--house .price-close__inner { position: relative; z-index: 1; }
  .price-close__inner {
    max-width: 720px;
    margin: 0 auto;
  }
  .price-close .eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.36em;
    font-size: 11px;
    margin-bottom: 20px;
    color: #FFFFFF !important;
  }
  .price-close__cta {
    background: #FFFFFF !important;
    color: var(--text-primary) !important;
    border: 1px solid #FFFFFF !important;
    padding: 18px 32px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    cursor: pointer;
    transition: background 240ms ease, color 240ms ease;
  }
  .price-close__cta:hover {
    background: transparent !important;
    color: #FFFFFF !important;
  }
  .price-close h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.15;
    color: #FFFFFF;
    margin: 0 0 24px;
    text-wrap: balance;
  }
  .price-close p {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: #FFFFFF;
    margin: 0 auto 40px;
    max-width: 52ch;
  }
  .btn--gold {
    background: var(--warm-tan);
    color: var(--text-primary);
    border-color: var(--warm-tan);
    padding: 18px 32px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 11px;
    border: 1px solid var(--warm-tan);
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease;
  }
  .btn--gold:hover { background: transparent; color: var(--text-primary); }

  @media (max-width: 900px) {
    .menu-grid { grid-template-columns: 1fr; }
    .menu-block { min-height: auto; }
    .menu-block--menu { padding: 56px 32px; }
    .menu-block--image { aspect-ratio: 4 / 5; }
    .price-fine { padding: 32px 24px; }
    .price-fine__inner { grid-template-columns: 1fr 1fr; gap: 24px; }
    .price-close { padding: 72px 24px; }
  }

  /* =================================================================
     BOOKING MODAL — Timely iframe overlay
     ================================================================= */
  .nav__book {
    display: inline-block;
    background: var(--brown);
    color: #FFFFFF;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10.5px;
    padding: 10px 22px;
    border: 1px solid var(--brown);
    cursor: pointer;
    margin-left: 12px;
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
  }
  .nav__book:hover {
    background: transparent;
    color: var(--text-primary);
  }
  body.solid-nav .nav__book,
  body.article-body .nav__book {
    background: var(--brown);
    color: #FFFFFF;
    border-color: var(--brown);
  }
  body.solid-nav .nav__book:hover,
  body.article-body .nav__book:hover {
    background: transparent;
    color: var(--text-primary);
  }
  .nav:not(.is-scrolled):not(body.solid-nav .nav):not(body.article-body .nav) .nav__book {
    background: rgba(245,242,236,0.14);
    color: #FFFFFF;
    border-color: rgba(245,242,236,0.35);
  }

  .booking-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
  }
  .booking-modal.is-open { display: flex; }
  .booking-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 10, 6, 0.72);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    cursor: pointer;
  }
  .booking-modal__panel {
    position: relative;
    background: var(--bg);
    width: min(1080px, 100%);
    height: min(760px, calc(100vh - 64px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(16, 10, 6, 0.32);
  }
  .booking-modal__close {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 10;
    background: transparent;
    border: none;
    font-family: var(--font-editorial);
    font-size: 32px;
    line-height: 1;
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 12px;
    transition: color 200ms ease;
  }
  .booking-modal__close:hover { color: var(--text-primary); }
  .booking-modal__header {
    padding: 32px 40px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .booking-modal__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10.5px;
    color: var(--text-primary);
    margin-bottom: 10px;
  }
  .booking-modal__sub {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
  }
  .booking-modal__frame {
    flex: 1;
    width: 100%;
    border: none;
    background: #FCFBF7;
  }
  body.booking-open { overflow: hidden; }

  @media (max-width: 700px) {
    .booking-modal { padding: 0; }
    .booking-modal__panel { height: 100vh; }
    .booking-modal__header { padding: 24px 24px 16px; }
    .booking-modal__eyebrow { font-size: 9.5px; }
    .booking-modal__sub { font-size: 13px; }
    .nav__book { padding: 8px 14px; font-size: 9.5px; margin-left: 8px; }
  }

  /* =================================================================
     FLOATING WHATSAPP BUTTON
     ================================================================= */
  .wa-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 90;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--brown);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid var(--brown);
    box-shadow: 0 6px 18px rgba(16, 10, 6, 0.18);
    transition: background-color 240ms ease, color 240ms ease, transform 260ms ease, box-shadow 260ms ease, border-color 240ms ease;
  }
  .wa-fab:hover {
    background: var(--warm-tan);
    color: var(--text-primary);
    border-color: var(--warm-tan);
    transform: translateY(-2px);
  }
  .wa-fab svg { display: block; width: 20px; height: 20px; }
  @media (max-width: 700px) {
    .wa-fab { bottom: 20px; right: 20px; width: 48px; height: 48px; }
    .wa-fab svg { width: 18px; height: 18px; }
  }

  /* =================================================================
     PRICING HERO — single image, centered overlay
     ================================================================= */
  .pricing-hero {
    position: relative;
    height: 70vh;
    min-height: 480px;
    overflow: hidden;
  }
  .pricing-hero__media,
  .pricing-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pricing-hero__media img {
    filter: grayscale(1) brightness(0.72) contrast(1.02);
  }
  .pricing-hero__overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFFFFF;
    padding: 40px;
  }
  .pricing-hero__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 32px;
  }
  .pricing-hero__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 1.06;
    color: #FFFFFF;
    margin: 0 auto 24px;
    max-width: 20ch;
    text-wrap: balance;
  }
  .pricing-hero__sub {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.55;
    color: #FFFFFF;
    margin: 0 auto;
    max-width: 56ch;
    text-wrap: balance;
  }
  @media (max-width: 700px) {
    .pricing-hero { height: 60vh; min-height: 420px; }
    .pricing-hero__overlay { padding: 24px; }
  }

  /* =================================================================
     AWARDS
     ================================================================= */
  .awards-ticker {
    background: var(--brown);
    color: #FFFFFF;
    border-top: 1px solid var(--brown);
    border-bottom: 1px solid var(--brown);
    padding: 18px 24px;
  }
  .awards-ticker__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
  }
  .awards-ticker__label {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 15px;
    color: var(--text-primary);
    letter-spacing: 0.02em;
  }
  .awards-ticker__item {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 9.5px;
    color: #FFFFFF;
    position: relative;
  }
  .awards-ticker__item::before {
    content: '';
    position: absolute;
    left: -14px; top: 50%;
    width: 4px; height: 4px;
    background: var(--warm-tan);
    border-radius: 50%;
    transform: translateY(-50%);
  }
  .awards-ticker__item:first-of-type::before { display: none; }
  .awards-ticker__link {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--warm-tan);
    transition: color 200ms ease, border-color 200ms ease;
    margin-left: 20px;
  }
  .awards-ticker__link:hover { color: #FFFFFF; border-color: var(--bg); }
  @media (max-width: 900px) {
    .awards-ticker__inner { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
    .awards-ticker__inner { -webkit-overflow-scrolling: touch; }
  }

  /* Awards list on the about page */
  .awards-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 32px;
  }
  .awards-list li {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .awards-list__badge {
    font-family: var(--font-display);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 9.5px;
    color: var(--text-primary);
  }
  @media (max-width: 700px) {
    .awards-list { grid-template-columns: 1fr; }
  }

  /* =================================================================
     JOURNAL PAGE — editorial listing (featured + 2-col grid)
     ================================================================= */
  body.article-body,
  body.solid-nav main:has(.journal-issue) { background: #FFFFFF; }
  .journal-issue {
    padding: 120px 40px 64px;
    background: #FFFFFF;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Filter + search controls */
  .journal-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    margin: 8px 0 32px;
  }
  .journal-controls__search {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex: 1 1 260px;
    min-width: 220px;
  }
  .journal-controls__search-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 10px;
    color: var(--text-primary);
    flex-shrink: 0;
  }
  .journal-controls__search input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 200ms ease;
  }
  .journal-controls__search input::placeholder {
    color: var(--text-primary);
    opacity: 1;
    font-style: italic;
  }
  .journal-controls__search input:focus { border-bottom-color: var(--text-primary); }
  .journal-controls__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .journal-controls__chip {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid rgba(26, 25, 22, 0.18);
    padding: 9px 16px;
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
  }
  .journal-controls__chip:hover { color: var(--text-primary); border-color: var(--text-primary); }
  .journal-controls__chip.is-active {
    background: var(--text-primary);
    color: #FFFFFF;
    border-color: var(--text-primary);
  }

  .journal-empty {
    text-align: center;
    padding: 40px 24px;
    font-family: var(--font-editorial);
    font-style: italic;
    color: var(--text-primary);
  }
  .journal-issue__masthead {
    display: block;
    text-align: center;
    padding: 20px 0 20px;
    margin: 0 0 20px;
  }
  .journal-issue__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  .journal-issue__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1;
    color: var(--text-primary);
    margin: 0 0 10px;
    text-align: center;
    letter-spacing: -0.005em;
    display: block;
  }
  .journal-issue__meta {
    display: block;
    text-align: center;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 9.5px;
    color: var(--text-primary);
  }

  .journal-issue__intro {
    max-width: 620px;
    margin: 0 auto 32px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    text-align: center;
    text-wrap: balance;
  }

  /* Featured article */
  .journal-feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    margin-bottom: 80px;
    padding-bottom: 80px;
    border-bottom: 1px solid var(--border);
    align-items: center;
  }
  .journal-feature__media {
    aspect-ratio: 5 / 6;
    overflow: hidden;
    display: block;
  }
  .journal-feature__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    transition: transform 700ms ease;
  }
  .journal-feature__media:hover img { transform: scale(1.04); }
  .journal-feature__body {}
  .journal-feature__kicker {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.36em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .journal-feature__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.08;
    color: var(--text-primary);
    margin: 0 0 20px;
    text-wrap: balance;
  }
  .journal-feature__title a { color: inherit; text-decoration: none; }
  .journal-feature__title a:hover { color: var(--text-primary); }
  .journal-feature__meta {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin: 0 0 24px;
  }
  .journal-feature__excerpt {
    font-weight: 300;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--text-primary);
    margin: 0 0 32px;
    max-width: 46ch;
  }
  .journal-feature__link {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10.5px;
    color: var(--text-primary);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--text-primary);
    transition: color 200ms ease, border-color 200ms ease;
  }
  .journal-feature__link:hover { color: var(--text-primary); border-color: var(--warm-tan); }

  /* Rest grid */
  .journal-rest-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 40px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .journal-rest-head h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1;
    color: var(--text-primary);
    margin: 0;
  }
  .journal-rest-head span {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 10px;
    color: var(--text-primary);
  }
  .journal-rest {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 40px;
  }
  @media (max-width: 900px) { .journal-rest { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .journal-rest { grid-template-columns: 1fr; } }
  .journal-rest__item { display: block; text-decoration: none; color: inherit; }
  .journal-rest__media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: 24px;
    display: block;
  }
  .journal-rest__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    transition: transform 600ms ease;
  }
  .journal-rest__item:hover .journal-rest__media img { transform: scale(1.04); }
  .journal-rest__kicker,
  .journal-rest__category {
    display: inline-block;
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.24em !important;
    font-size: 10px !important;
    color: var(--text-primary) !important;
    margin: 0 0 12px !important;
  }
  .journal-rest__byline {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    font-size: 9.5px !important;
    color: var(--text-primary) !important;
    margin: 14px 0 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    line-height: 1.5;
  }
  .journal-rest__byline-dot { opacity: 1; }
  .journal-rest__title {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0 0 14px;
    text-wrap: balance;
    transition: color 200ms ease;
  }
  .journal-rest__item:hover .journal-rest__title { color: var(--text-primary); }
  .journal-rest__excerpt {
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
  }

  @media (max-width: 900px) {
    .journal-issue { padding: 72px 24px 48px; }
    .journal-issue__masthead { grid-template-columns: 1fr; text-align: center; gap: 16px; }
    .journal-issue__meta { text-align: center; }
    .journal-feature { grid-template-columns: 1fr; gap: 32px; padding-bottom: 56px; margin-bottom: 56px; }
    .journal-rest { grid-template-columns: 1fr; gap: 48px; }
  }

  /* Mission CTAs on homepage */
  .mission__ctas {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
  }
  .mission__cta {
    display: inline-block;
    padding: 16px 32px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 11px;
    text-decoration: none;
    border: 1px solid var(--brown);
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease;
  }
  .mission__cta--primary {
    background: var(--brown);
    color: #FFFFFF;
  }
  .mission__cta--primary:hover {
    background: transparent;
    color: var(--text-primary);
  }
  .mission__cta--ghost {
    background: transparent;
    color: var(--text-primary);
  }
  .mission__cta--ghost:hover {
    background: var(--brown);
    color: #FFFFFF;
  }

  /* ==================================================================
     SHARED HOMEPAGE PATTERNS (ported from index.html for subpages)
     ================================================================== */
  .trio__dek {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 24px auto 0;
    max-width: 82ch;
    text-wrap: balance;
  }

  /* ---------- Awards strip (logo version, dark band) ---------- */
  .awards-strip {
    background: var(--brown);
    padding: 60px 32px;
    border-top: 0; /* the base .press rule carries a hairline; none here */
  }
  .awards-strip .press__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-template-columns: none;
    gap: 0;
  }
  .awards-strip .press__label {
    color: #FFFFFF !important;
    display: block;
    margin-bottom: 32px;
  }
  .awards-strip__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 5vw, 72px);
    flex-wrap: wrap;
    padding: 8px 0;
  }
  /* Logo marquee: while the set is small it repeats and drifts slowly across the band (assembled by main.js) */
  .awards-strip__logos.is-marquee {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }
  .awards-strip__track {
    display: flex;
    align-items: center;
    flex: none;
    animation: awards-marquee var(--awards-duration, 48s) linear infinite;
    will-change: transform;
  }
  .awards-strip__set {
    display: flex;
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    padding-right: clamp(28px, 5vw, 72px);
    flex: none;
  }
  .awards-strip__logos.is-marquee:hover .awards-strip__track { animation-play-state: paused; }
  @keyframes awards-marquee { from { transform: translateX(0); } to { transform: translateX(var(--awards-shift, -25%)); } }
  @media (prefers-reduced-motion: reduce) { .awards-strip__track { animation: none; } }
  .awards-strip__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    width: 110px;
    flex-shrink: 0;
    transition: opacity 240ms ease;
    opacity: 0.85;
  }
  .awards-strip__logo:hover { opacity: 1; }
  .awards-strip__logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    filter: invert(1) grayscale(1) brightness(1.05) contrast(1.02);
    mix-blend-mode: screen;
  }
  /* England Business logo is a dark tile; force it to fit the box height cleanly */
  .awards-strip__logo--england img { height: 96%; }
  /* UK PMU logo is naturally wider; give it a shorter height so it doesn't dominate */
  .awards-strip__logo--ukpmu { width: 90px; height: 44px; }
  @media (max-width: 720px) {
    .awards-strip__logos { gap: 20px; }
    .awards-strip__logo { height: 46px; width: 84px; }
    .awards-strip__logo--ukpmu { width: 68px; height: 34px; }
  }

  /* ---------- Full-bleed 3-column tile with hover reveal ---------- */
  .trio__bleed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
    margin-bottom: 0;
    background: #100A06; /* walnut behind the tiles so sub-pixel seams between columns never show light */
  }

  .trio-tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    text-decoration: none;
    color: #FFFFFF;
    background: #100A06;
  }

  .trio-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Mono at rest: one shared grade so the three read as a set */
    filter: grayscale(1) brightness(0.9) contrast(1.02);
    transition: transform 1200ms cubic-bezier(.22,.61,.36,1), filter 800ms ease, opacity 500ms ease;
  }
  /* Landscape source: frame on Zara (left of centre) rather than the middle of the photograph */
  .trio-tile__img--restoration { object-position: 28% 50%; }

  .trio-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(16,10,6,0) 40%, rgba(16,10,6,0.75) 100%);
    transition: opacity 500ms ease;
    pointer-events: none;
  }

  .trio-tile__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    z-index: 2;
    text-align: center;
    pointer-events: none;
    transition: opacity 400ms ease, transform 500ms cubic-bezier(.22,.61,.36,1);
  }

  .trio-tile__label em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1;
    color: #FFFFFF;
    letter-spacing: 0.01em;
  }

  .trio-tile__reveal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 40px 36px 44px;
    text-align: center;
    background: linear-gradient(to bottom, rgba(16,10,6,0) 0%, rgba(16,10,6,0.85) 40%, rgba(16,10,6,0.92) 100%);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms ease, transform 600ms cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
  }

  .trio-tile__reveal-eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: #FFFFFF;
    margin-bottom: 16px;
  }

  .trio-tile__reveal-copy {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.65;
    color: #FFFFFF;
    max-width: 42ch;
    margin: 0 auto 22px;
    text-wrap: balance;
  }

  .trio-tile__reveal-link {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: #FFFFFF;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(245,242,236,0.5);
  }

  .trio-tile__reveal-link .arrow { margin-left: 6px; display: inline-block; transition: transform 300ms ease; }

  @media (hover: hover) {
    /* Colour on hover, graded like the clinic photography: muted saturation, softened contrast, darkened under the reveal copy */
    .trio-tile:hover .trio-tile__img { transform: scale(1.04); filter: grayscale(0) saturate(0.68) contrast(0.94) brightness(0.72); }
    .trio-tile:hover .trio-tile__label { opacity: 0; transform: translateY(-16px); }
    .trio-tile:hover .trio-tile__reveal { opacity: 1; transform: translateY(0); }
    .trio-tile:hover .trio-tile__reveal-link .arrow { transform: translateX(4px); }
  }

  /* Touch devices: always show reveal at reduced opacity */
  @media (hover: none) {
    .trio-tile__label { bottom: auto; top: 32px; }
    .trio-tile__reveal { opacity: 1; transform: none; background: linear-gradient(to bottom, rgba(16,10,6,0) 0%, rgba(16,10,6,0.9) 60%); }
  }

  @media (max-width: 820px) {
    .trio__bleed {
      grid-template-columns: 1fr;
    }
    .trio-tile { aspect-ratio: 4 / 3; }
  }

  /* ---------- Founder Letter ---------- */
  .founder-letter {
    background: #FFFFFF;
    padding: clamp(80px, 10vw, 140px) 32px;
  }
  .founder-letter__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .founder-letter__portrait { margin: 0; position: sticky; top: 100px; }
  /* About story: shorter copy than the letter, so centre it on the photograph rather than hanging it from the top */
  .about-story .founder-letter__inner { align-items: center; }
  .about-story .founder-letter__portrait { position: static; }
  .about-story .founder-letter__body { padding-bottom: 34px; } /* offsets the caption below the photo so the copy centres on the image itself */
  /* Contact: near-square treatment-room photograph, framed to keep Zara at the bed on the right */
  .about-story--contact .founder-letter__portrait img { object-position: 100% 50%; }

  /* ---------- Clinic portraits (About): three 3:4 photographs beneath the principles, mono at rest, colour on hover ---------- */
  .clinic-trio { background: #FFFFFF; padding: 0 48px 104px; }
  .clinic-trio__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .clinic-trio__tile { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: #100A06; }
  .clinic-trio__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) brightness(0.92) contrast(1.02);
    transition: filter 800ms ease, transform 1200ms cubic-bezier(.22,.61,.36,1);
  }
  .clinic-trio__tile--teaching img { object-position: 38% 50%; } /* landscape source: keep the cohort in frame */
  .clinic-trio__tile--facade img { object-position: 50% 30%; filter: grayscale(1) brightness(0.8) contrast(1.02); } /* dusk facade: framed on the upper storeys, lifted a touch */
  @media (hover: hover) {
    .clinic-trio__tile:hover img { filter: grayscale(0) saturate(0.68) contrast(0.95); transform: scale(1.03); }
  }
  @media (max-width: 800px) {
    .clinic-trio { padding: 0 24px 72px; }
    .clinic-trio__grid { grid-template-columns: 1fr; gap: 12px; }
  }
  .founder-letter__portrait img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    filter: grayscale(0.35) brightness(0.98);
  }
  .founder-letter__portrait figcaption {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-primary);
    margin-top: 14px;
    white-space: nowrap;
  }
  .founder-letter__body { max-width: 56ch; overflow: visible; }
  .founder-letter__eyebrow {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 24px;
  }
  .founder-letter__lede {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0 0 22px;
    text-wrap: balance;
  }
  .founder-letter__body p:not(.founder-letter__lede):not(.founder-letter__signoff):not(.founder-letter__signature):not(.founder-letter__credit) {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 16px;
  }
  .founder-letter__signoff {
    font-family: var(--font-editorial) !important;
    font-style: italic;
    font-size: 14.5px !important;
    color: var(--text-primary) !important;
    margin: 28px 0 6px !important;
    line-height: 1.3 !important;
  }
  .founder-letter__signature {
    font-family: 'Biro Script', 'Snell Roundhand', 'Apple Chancery', cursive !important;
    font-size: 34px !important;
    line-height: 1.05 !important;
    color: var(--text-primary) !important;
    margin: 0 0 18px !important;
    letter-spacing: 0;
    display: block;
    white-space: nowrap;
    width: max-content;
    max-width: none;
    padding: 4px 36px 4px 6px;
    transform: rotate(-3.5deg);
    transform-origin: left center;
    /* Handwriting reveal via clip-path (leaves colour intact if JS fails) */
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    transition: clip-path 1450ms cubic-bezier(.55,.05,.35,1), -webkit-clip-path 1450ms cubic-bezier(.55,.05,.35,1);
  }
  .founder-letter__signature.is-in {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
  @media (prefers-reduced-motion: reduce) {
    .founder-letter__signature { clip-path: none !important; -webkit-clip-path: none !important; transition: none !important; }
  }
  .founder-letter__credit {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 9.5px !important;
    color: var(--text-primary) !important;
    margin: 4px 0 32px !important;
    line-height: 1.4 !important;
  }
  .founder-letter__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    color: var(--text-primary);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--text-primary);
    text-decoration: none;
    transition: gap 240ms ease;
  }
  .founder-letter__link:hover { gap: 16px; }
  @media (max-width: 820px) {
    .founder-letter__inner { grid-template-columns: 1fr; gap: 40px; }
    .founder-letter__portrait { position: static; }
    .founder-letter__signature { font-size: 40px !important; }
  }

  /* About page hero: founder portrait is high-key, so darken it enough for cream text to read */
  .hero--about .ph__img { filter: grayscale(0.35) brightness(0.62) contrast(1.04) !important; }
  .hero--about .hero__overlay { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45); }
  .hero--about .hero__eyebrow { opacity: 1; }

  /* White monogram above the hero eyebrow (transparent PNG, no blend tricks) */
  .hero__mark {
    display: block;
    width: 44px;
    height: auto;
    margin: 0 auto 34px;
    opacity: 0.92;
    filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.25));
    animation: m-eyebrow 1300ms cubic-bezier(.22,.61,.36,1) 80ms both;
  }
  .hero__mark--left { margin: 0 0 30px; }
  @media (max-width: 720px) { .hero__mark { width: 38px; margin-bottom: 26px; } .hero__mark--left { margin-bottom: 22px; } }
  @media (prefers-reduced-motion: reduce) { .hero__mark { animation: none; } }

  /* FAQ rows: integer line-height so item heights are whole pixels and all dividers render at identical weight */
  .faqs__list .faq summary { line-height: 30px; }

  /* Sub-nav follows the nav's state. Subpages (transparent nav over white): dark text, no shadow. */
  body.solid-nav .nav-subnav a em,
  body.article-body .nav-subnav a em {
    color: var(--text-primary);
    text-shadow: none;
  }
  /* Once the nav has gone cream on scroll (any page), the sub-nav goes cream with it */
  .nav.is-scrolled ~ .nav-subnav {
    background: rgba(245, 242, 236, 0.96);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    transition: opacity 220ms ease, transform 300ms cubic-bezier(.22,.61,.36,1), visibility 220ms ease, top 280ms ease, background-color 280ms ease;
  }
  .nav.is-scrolled ~ .nav-subnav a em {
    color: var(--text-primary);
    text-shadow: none;
  }

  /* On white subpages the open sub-nav takes a white ground: invisible against the page, but lifts the links off any content beneath */
  body.solid-nav .nav:not(.is-scrolled) ~ .nav-subnav,
  body.article-body .nav:not(.is-scrolled) ~ .nav-subnav { background: #FFFFFF; }

  /* ==================================================================
     MOTION LAYER (namespaced m-*). Applied by main.js. Honours reduced motion.
     Easing and durations per house system: cubic-bezier(.22,.61,.36,1).
     ================================================================== */
  :root { --m-ease: cubic-bezier(.22,.61,.36,1); }

  /* Fade-up with optional stagger via --m-i */
  .m-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 800ms var(--m-ease), transform 900ms var(--m-ease);
    transition-delay: calc(var(--m-i, 0) * 90ms);
    will-change: opacity, transform;
  }
  .m-up.is-in { opacity: 1; transform: translateY(0); }

  /* Headline: blur-to-sharp drift */
  .m-head {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
    transition: opacity 900ms var(--m-ease), transform 1000ms var(--m-ease), filter 900ms var(--m-ease);
  }
  .m-head.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }

  /* Imagery: editorial curtain reveal (clip rises from the bottom) + settle from a soft zoom */
  .m-media {
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transform: scale(1.04);
    transition: clip-path 1100ms var(--m-ease), -webkit-clip-path 1100ms var(--m-ease), transform 1500ms var(--m-ease);
    transition-delay: calc(var(--m-i, 0) * 110ms);
    will-change: clip-path, transform;
  }
  .m-media.is-in {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
  /* Sticky portrait must keep its own transform-free box once revealed */
  .founder-letter__portrait.m-media.is-in { will-change: auto; }
  /* Tiles drop their compositing layer once revealed, so column edges stop snapping to whole pixels (no seams) */
  .trio-tile.m-media.is-in { will-change: auto; }

  /* Parallax on cinematic bands: media is taller than its band so translation never shows an edge */
  .cinematic__media.m-parallax { top: -9%; bottom: -9%; will-change: transform; }

  /* Underline draw on quiet text links */
  .nav__links a,
  .footer__inner li a,
  .about-specialisms__link,
  .journal-rest__item .journal-rest__title {
    position: relative;
  }
  .nav__links a::after,
  .footer__inner li a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 360ms var(--m-ease);
  }
  .nav__links a:hover::after,
  .footer__inner li a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  /* Fill-wipe on solid CTAs: the hover colour slides in from the left */
  .nav__book,
  .mission__cta--primary,
  .pricing-hero-text__cta,
  .results-gallery__book {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .nav__book::before,
  .mission__cta--primary::before,
  .pricing-hero-text__cta::before,
  .results-gallery__book::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 420ms var(--m-ease);
    z-index: -1;
  }
  .nav__book:hover::before,
  .mission__cta--primary:hover::before,
  .pricing-hero-text__cta:hover::before,
  .results-gallery__book:hover::before { transform: scaleX(1); }
  .pricing-hero-text__cta:hover,
  .results-gallery__book:hover { background: var(--brown); box-shadow: none; color: var(--text-primary); }
  .mission__cta--primary:hover { background: var(--brown); color: var(--text-primary); }
  .nav__book:hover { color: var(--text-primary); }
  /* Transparent nav (image heroes): the cream-text rule above outranks the plain hover, so restate it at matching specificity.
     The wipe fills white, the label must go to ink or it vanishes. */
  .nav:not(.is-scrolled):not(body.solid-nav .nav):not(body.article-body .nav) .nav__book:hover {
    color: var(--text-primary);
    border-color: rgba(245, 242, 236, 0.9);
  }

  /* Hero eyebrow eases in after the splash */
  .hero__eyebrow { animation: m-eyebrow 1300ms var(--m-ease) 200ms both; }
  @keyframes m-eyebrow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  @media (prefers-reduced-motion: reduce) {
    .m-up, .m-head, .m-media { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; -webkit-clip-path: none !important; transition: none !important; }
    .cinematic__media.m-parallax { transform: none !important; }
    .hero__eyebrow { animation: none !important; }
    .nav__links a::after, .footer__inner li a::after { transition: none; }
  }

  /* =====================================================================
     SERVICE PAGES: Hair Loss, Restoration, Laser (added 2026-10-05)
     Built from the approved homepage and About vocabulary: italic Cormorant,
     Marcellus caps, mono photography that warms on hover, ground changes
     instead of dividing lines, and slow, quiet motion.
     ===================================================================== */
  .hero--service .ph__img { filter: grayscale(1) brightness(0.56) contrast(1.06) !important; object-position: var(--hero-pos, 50% 50%); }

  .svc-sec { padding: clamp(88px, 9vw, 136px) 0; }
  .svc-sec--white { background: #FFFFFF; }
  .svc-sec--cream { background: var(--bg); }
  .svc-wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; }
  .svc-head { text-align: center; max-width: 760px; margin: 0 auto clamp(52px, 5.5vw, 80px); }
  .svc-head .eyebrow { display: block; margin-bottom: 18px; }
  .svc-head h2, .svc-for__head h2, .svc-care__head h2, .svc-reel__top h2 {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.18;
    color: var(--text-primary);
    margin: 0;
    text-wrap: balance;
  }
  .svc-head__dek, .svc-for__head p, .svc-care__head > p {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 22px auto 0;
    max-width: 60ch;
    text-wrap: pretty;
  }

  /* Quiet text action, shared by the service sections */
  .svc-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(26, 25, 22, 0.4);
    padding: 0 0 6px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: 10.5px;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 260ms ease;
  }
  .svc-link span { transition: transform 300ms var(--m-ease); }
  .svc-link:hover { border-bottom-color: var(--text-primary); }
  .svc-link:hover span { transform: translateX(4px); }
  .svc-link--quiet { border-bottom-color: transparent; color: var(--text-primary); }

  /* Statement sits a touch closer to the treatments below */
  .svc-statement .mission p { text-wrap: pretty; }

  /* ---------- The treatment index ---------- */
  .svc-index__body {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.82fr) minmax(0, 1.1fr);
    gap: clamp(36px, 4vw, 64px);
    align-items: start;
  }
  .svc-index__nav { position: sticky; top: 120px; }
  .svc-index__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .svc-index__list li { display: flex; }
  .svc-index__item {
    display: flex;
    align-items: baseline;
    gap: 18px;
    width: 100%;
    background: none;
    border: 0;
    padding: 9px 0;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    opacity: 1;
    transition: opacity 500ms var(--m-ease), transform 650ms var(--m-ease);
  }
  .svc-index__item em { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(25px, 2.25vw, 36px); line-height: 1.08; }
  .svc-index__num { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.3em; color: var(--text-primary); min-width: 2.4em; flex-shrink: 0; }
  .svc-index__item:hover { opacity: 0.7; }
  .svc-index__item.is-active, .svc-index__item.is-active:hover { opacity: 1; transform: translateX(10px); }
  .svc-index__item:focus-visible { outline: 1px solid var(--text-primary); outline-offset: 6px; }
  .svc-index__hint {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: 9.5px;
    color: var(--text-primary);
    opacity: 1;
    margin: 30px 0 0 calc(2.4em + 18px);
  }

  .svc-index__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--brown); }
  .svc-index__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.94) contrast(1.03);
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 900ms var(--m-ease), transform 1800ms var(--m-ease), filter 900ms ease;
  }
  .svc-index__media img.is-active { opacity: 1; transform: scale(1); }
  .svc-index__media:hover img.is-active { filter: grayscale(0) saturate(0.68) contrast(0.94) brightness(0.94); }

  .svc-index__panels { display: grid; padding-top: 6px; }
  .svc-index__panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 600ms var(--m-ease), transform 700ms var(--m-ease), visibility 0s linear 700ms;
  }
  .svc-index__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 120ms, 120ms, 0s; }
  .svc-index__panel-media { display: none; margin: 0; }
  .svc-index__kicker {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: 10px;
    color: var(--text-primary);
    margin: 0 0 18px;
  }
  /* The name is already large in the index on wider screens; it stays in the page for readers and search */
  .svc-index__name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .svc-index__lede {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(21px, 1.75vw, 26px);
    line-height: 1.28;
    color: var(--text-primary);
    margin: 0 0 20px;
    text-wrap: balance;
  }
  .svc-index__text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-primary);
    margin: 0 0 16px;
    max-width: 54ch;
  }
  .svc-index__meta {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 22px 0 30px;
    max-width: 44ch;
    text-wrap: pretty;
  }
  .svc-index__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }

  @media (max-width: 1180px) {
    .svc-index__body {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      grid-template-areas: "nav media" "nav panels";
      row-gap: 40px;
    }
    .svc-index__nav { grid-area: nav; }
    .svc-index__media { grid-area: media; aspect-ratio: 3 / 2; }
    .svc-index__panels { grid-area: panels; }
  }

  /* ---------- Who comes to us ---------- */
  .svc-for__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
  .svc-for__head { position: sticky; top: 140px; }
  .svc-for__head .eyebrow { display: block; margin-bottom: 18px; }
  .svc-for__head p { margin-left: 0; max-width: 40ch; }
  .svc-for__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(34px, 3.4vw, 50px); }
  .svc-for__line { transition: opacity 500ms ease; }
  @media (hover: hover) {
    .svc-for__lines:hover .svc-for__line { opacity: 0.32; }
    .svc-for__lines .svc-for__line:hover { opacity: 1; }
  }
  .svc-for__lead {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(30px, 3.4vw, 50px);
    line-height: 1.06;
    color: var(--text-primary);
    margin: 0 0 12px;
    text-wrap: balance;
  }
  .svc-for__note {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
    max-width: 50ch;
  }

  /* ---------- The journey: four steps, a slow line beneath the one in focus ---------- */
  .svc-journey__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); margin: 0 0 clamp(44px, 4.4vw, 64px); }
  .svc-journey__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    background: none;
    border: 0;
    padding: 0 0 22px;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    opacity: 1;
    transition: opacity 450ms ease;
  }
  .svc-journey__step:hover { opacity: 0.72; }
  .svc-journey__step.is-active { opacity: 1; }
  .svc-journey__step:focus-visible { outline: 1px solid var(--text-primary); outline-offset: 8px; }
  .svc-journey__num { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(46px, 4.8vw, 76px); line-height: 0.9; }
  .svc-journey__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.24em; font-size: 10.5px; line-height: 1.6; }
  .svc-journey__bar { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; overflow: hidden; }
  .svc-journey__bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--text-primary); }
  .svc-journey__step.is-active .svc-journey__bar::after { width: 100%; transition: width var(--svc-cycle, 7000ms) linear; }
  .svc-journey.is-held .svc-journey__step.is-active .svc-journey__bar::after { transition: width 420ms var(--m-ease); }
  .svc-journey__panels { display: grid; max-width: 720px; margin: 0 auto; text-align: center; }
  .svc-journey__panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 600ms var(--m-ease), transform 700ms var(--m-ease), visibility 0s linear 700ms;
  }
  .svc-journey__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 100ms, 100ms, 0s; }
  .svc-journey__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .svc-journey__when { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.26em; font-size: 10px; color: var(--text-primary); margin: 0 0 18px; }
  .svc-journey__body { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.8; color: var(--text-primary); margin: 0 auto 20px; max-width: 62ch; text-wrap: pretty; }
  .svc-journey__outcome { font-family: var(--font-editorial); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--text-primary); margin: 0; }

  /* ---------- Results reel ---------- */
  .svc-reel { background: var(--bg); padding: clamp(88px, 9vw, 136px) 0; overflow: hidden; }
  .svc-reel__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; max-width: 1320px; margin: 0 auto clamp(40px, 4vw, 56px); padding: 0 48px; box-sizing: border-box; }
  .svc-reel__top .eyebrow { display: block; margin-bottom: 18px; }
  .svc-reel__top h2 { max-width: 22ch; text-align: left; }
  .svc-reel__controls { display: flex; gap: 6px; flex-shrink: 0; }
  .svc-reel__btn {
    width: 48px;
    height: 48px;
    background: none;
    border: 0;
    font-family: var(--font-editorial);
    font-size: 26px;
    line-height: 1;
    color: var(--text-primary);
    cursor: pointer;
    opacity: 1;
    transition: opacity 240ms ease, transform 300ms var(--m-ease);
  }
  .svc-reel__btn:hover { opacity: 1; }
  .svc-reel__btn[data-reel-prev]:hover { transform: translateX(-3px); }
  .svc-reel__btn[data-reel-next]:hover { transform: translateX(3px); }
  .svc-reel__btn:disabled { opacity: 0.2; cursor: default; transform: none; }
  .svc-reel__track {
    display: flex;
    gap: clamp(12px, 1.4vw, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: max(48px, calc((100vw - 1320px) / 2 + 48px));
    padding: 0 max(48px, calc((100vw - 1320px) / 2 + 48px));
    scrollbar-width: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
  }
  .svc-reel__track::-webkit-scrollbar { display: none; }
  .svc-reel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .svc-reel__track:focus-visible { outline: 1px solid var(--text-primary); outline-offset: 4px; }
  .svc-reel__item { flex: 0 0 clamp(250px, 24vw, 350px); margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; overflow: hidden; background: var(--brown); }
  .svc-reel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.03);
    transition: filter 700ms ease, transform 1400ms var(--m-ease);
    user-select: none;
    -webkit-user-drag: none;
  }
  .svc-reel__item:hover img { filter: grayscale(0) saturate(0.72) contrast(0.95); transform: scale(1.03); }
  .svc-reel__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; max-width: 1320px; margin: 36px auto 0; padding: 0 48px; box-sizing: border-box; }
  .svc-reel__caption { font-family: 'Biro Script', var(--font-editorial); font-size: 22px; line-height: 1.2; color: var(--text-primary); margin: 0; transform: rotate(-1.5deg); transform-origin: left center; }

  /* ---------- A note from Zara (founder letter layout) ---------- */
  .svc-note--cream { background: var(--bg); }
  .svc-note .founder-letter__portrait img { aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: filter 700ms ease; }
  .svc-note .founder-letter__portrait:hover img { filter: grayscale(0) saturate(0.7) contrast(0.95); }

  /* ---------- Before and after care ---------- */
  .svc-care__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
  .svc-care__head { position: sticky; top: 140px; }
  .svc-care__head .eyebrow { display: block; margin-bottom: 18px; }
  .svc-care__head > p { margin-left: 0; max-width: 42ch; }
  .svc-care__toggle { display: flex; gap: 32px; margin-top: 36px; }
  .svc-care__tab {
    position: relative;
    background: none;
    border: 0;
    padding: 0 0 8px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    color: var(--text-primary);
    cursor: pointer;
    transition: color 260ms ease;
  }
  .svc-care__tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--text-primary); transition: width 460ms var(--m-ease); }
  .svc-care__tab:hover { color: var(--text-primary); }
  .svc-care__tab.is-active { color: var(--text-primary); }
  .svc-care__tab.is-active::after { width: 100%; }
  .svc-care__lists { display: grid; }
  .svc-care__list {
    grid-area: 1 / 1;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 600ms var(--m-ease), transform 700ms var(--m-ease), visibility 0s linear 700ms;
  }
  .svc-care__list.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 80ms, 80ms, 0s; }
  .svc-care__row { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr); gap: 32px; padding: 0 0 34px; }
  .svc-care__row:last-child { padding-bottom: 0; }
  .svc-care__when { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: 22px; line-height: 1.25; color: var(--text-primary); }
  .svc-care__what { font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.7; color: var(--text-primary); margin: 2px 0 0; }

  /* ---------- FAQs on service pages: the homepage accordion, a touch closer to the care section ---------- */
  .svc-faqs { padding-top: clamp(96px, 9vw, 130px); }
  .svc-faqs .faq__body a, .svc-index__text a { border-bottom: 1px solid currentColor; }

  /* ---------- Phones and small tablets ---------- */
  @media (max-width: 820px) {
    .svc-wrap { padding: 0 24px; }
    .svc-sec { padding: 80px 0; }
    .svc-head { text-align: left; margin-bottom: 44px; }
    .svc-head__dek { margin-left: 0; }

    /* The index becomes a calm sequence: photograph, name, note */
    .svc-index__body { display: block; }
    .svc-index__nav, .svc-index__media { display: none; }
    .svc-index__panels { display: block; padding-top: 0; }
    .svc-index__panel { opacity: 1; visibility: visible; transform: none; transition: none; margin: 0 0 72px; }
    .svc-index__panel:last-child { margin-bottom: 0; }
    .svc-index__panel-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--brown); margin: 0 0 26px; }
    .svc-index__panel-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); }
    .svc-index__kicker { margin-bottom: 10px; }
    .svc-index__name {
      position: static; width: auto; height: auto; margin: 0 0 14px; overflow: visible; clip: auto; white-space: normal;
      font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: 34px; line-height: 1.05; color: var(--text-primary);
    }
    .svc-index__lede { font-size: 21px; }
    .svc-index__meta { font-size: 17px; margin: 18px 0 24px; }

    .svc-for__grid, .svc-care__grid { grid-template-columns: 1fr; gap: 44px; }
    .svc-for__head, .svc-care__head { position: static; }
    .svc-for__lines { gap: 32px; }
    .svc-for__lead { font-size: 30px; }

    .svc-journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .svc-journey__num { font-size: 44px; }
    .svc-journey__panels { text-align: left; }
    .svc-journey__body { font-size: 14.5px; }
    .svc-journey__outcome { font-size: 19px; }

    .svc-reel__top { padding: 0 24px; align-items: flex-end; }
    .svc-reel__top h2 { font-size: 28px; }
    .svc-reel__controls { display: none; }
    .svc-reel__track { padding: 0 24px; scroll-padding-left: 24px; }
    .svc-reel__item { flex-basis: 74vw; }
    .svc-reel__foot { padding: 0 24px; flex-direction: column; gap: 18px; }

    .svc-care__toggle { margin-top: 28px; }
    .svc-care__row { grid-template-columns: 1fr; gap: 6px; padding-bottom: 26px; }
    .svc-care__when { font-size: 21px; }

    .svc-faqs { padding-left: 24px; padding-right: 24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .svc-index__item, .svc-index__media img, .svc-index__panel, .svc-journey__panel, .svc-journey__step, .svc-care__list, .svc-reel__item img, .svc-for__line { transition: none !important; }
    .svc-journey__step.is-active .svc-journey__bar::after { transition: none; }
  }

  /* ---------- Service panels: one full-screen split per treatment, each settling over the last ---------- */
  .svc-panels { position: relative; background: #FFFFFF; }
  .svc-panels__intro { text-align: center; max-width: 760px; margin: 0 auto; padding: clamp(88px, 9vw, 132px) 48px clamp(56px, 5vw, 84px); box-sizing: border-box; }
  .svc-panels__intro .eyebrow { display: block; margin-bottom: 18px; }
  .svc-panels__intro h2 { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(28px, 3vw, 42px); line-height: 1.18; margin: 0; text-wrap: balance; }
  .svc-panel {
    position: sticky;
    top: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: #FFFFFF;
  }
  .svc-panel__media { position: relative; margin: 0; overflow: hidden; background: var(--brown); min-height: 100%; }
  .svc-panel__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.04) brightness(0.96);
    transform: scale(1.07);
    transition: transform 1800ms var(--m-ease), filter 900ms ease;
  }
  .svc-panel.is-in .svc-panel__media img { transform: scale(1); }
  .svc-panel__media:hover img { filter: grayscale(0) saturate(0.68) contrast(0.95) brightness(0.96); }
  .svc-panel__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 132px clamp(48px, 7vw, 128px) 88px;
    background: #FFFFFF;
    box-sizing: border-box;
  }
  .svc-panel--flip .svc-panel__media { order: 2; }
  .svc-panel--flip .svc-panel__copy { background: var(--bg); }
  .svc-panel__kicker {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 10.5px;
    color: var(--text-primary);
    margin: 0 0 28px;
  }
  .svc-panel__kicker em { font-family: var(--font-editorial); font-style: italic; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
  .svc-panel__name { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(44px, 5.2vw, 82px); line-height: 1; color: var(--text-primary); margin: 0 0 26px; text-wrap: balance; }
  .svc-panel__lede { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(20px, 1.65vw, 25px); line-height: 1.32; color: var(--text-primary); margin: 0 0 26px; max-width: 30ch; text-wrap: balance; }
  .svc-panel__meta { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; line-height: 2.1; color: var(--text-primary); margin: 0 0 36px; max-width: 46ch; }
  .svc-panel__actions { margin: 0 0 34px; }
  .svc-panel__more { max-width: 50ch; }
  .svc-panel__more summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 17px;
    color: var(--text-primary);
    transition: color 240ms ease;
  }
  .svc-panel__more summary::-webkit-details-marker { display: none; }
  .svc-panel__more summary::after { content: "+"; font-family: var(--font-body); font-style: normal; font-weight: 300; font-size: 18px; line-height: 1; transition: transform 400ms var(--m-ease); }
  .svc-panel__more[open] summary::after { transform: rotate(45deg); }
  .svc-panel__more summary:hover { color: var(--text-primary); }
  .svc-panel__more p { font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.75; color: var(--text-primary); margin: 14px 0 0; animation: svcFade 500ms var(--m-ease); }
  @keyframes svcFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* ---------- Causes: one photograph, the reasons people come drifting in one at a time ---------- */
  .svc-causes { position: relative; height: 92vh; height: 92svh; min-height: 620px; overflow: hidden; background: #1A1916; color: #FFFFFF; }
  .svc-causes__media { position: absolute; inset: 0; }
  .svc-causes__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.52) contrast(1.06); }
  .svc-causes__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(16,10,6,0.74) 0%, rgba(16,10,6,0.38) 55%, rgba(16,10,6,0.16) 100%); }
  .svc-causes__inner { position: relative; z-index: 2; height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 48px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  .svc-causes__eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.32em; font-size: 11px; color: #FFFFFF; margin: 0 0 36px; }
  .svc-causes__lines { list-style: none; margin: 0; padding: 0; display: grid; }
  .svc-causes__line {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(18px);
    filter: blur(5px);
    transition: opacity 900ms var(--m-ease), transform 1100ms var(--m-ease), filter 900ms var(--m-ease);
  }
  .svc-causes__line.is-active { opacity: 1; transform: none; filter: blur(0); }
  .svc-causes__lead { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(40px, 5.2vw, 80px); line-height: 1.04; color: #FFFFFF; margin: 0 0 22px; max-width: 13ch; text-wrap: balance; }
  .svc-causes__note { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.7; color: #FFFFFF; margin: 0; max-width: 42ch; }
  .svc-causes__dots { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 60px; }
  .svc-causes__dot { position: relative; background: none; border: 0; padding: 0 0 9px; font-family: var(--font-display); letter-spacing: 0.2em; font-size: 10px; color: #FFFFFF; cursor: pointer; transition: color 300ms ease; }
  .svc-causes__dot:hover, .svc-causes__dot.is-active { color: #FFFFFF; }
  .svc-causes__dot::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: #F5F2EC; }
  .svc-causes__dot.is-active::after { width: 100%; transition: width var(--svc-causes-cycle, 4200ms) linear; }
  .svc-causes.is-held .svc-causes__dot.is-active::after { transition: width 400ms var(--m-ease); }

  /* ---------- Signed diptych ---------- */
  .svc-diptych__sign { font-family: 'Biro Script', var(--font-editorial); font-size: 34px; line-height: 1; color: #FFFFFF; margin: 22px 0 0; transform: rotate(-3deg); }

  @media (max-width: 820px) {
    .svc-panels__intro { padding: 80px 24px 44px; text-align: left; }
    .svc-panel { position: relative; min-height: 0; grid-template-columns: 1fr; }
    .svc-panel__media { aspect-ratio: 4 / 5; min-height: 0; }
    .svc-panel--flip .svc-panel__media { order: 0; }
    .svc-panel__copy { padding: 40px 24px 72px; }
    .svc-panel__name { font-size: 42px; }
    .svc-panel__kicker { margin-bottom: 18px; }

    .svc-causes { height: 86svh; min-height: 560px; }
    .svc-causes__inner { padding: 0 24px; justify-content: flex-end; padding-bottom: 72px; }
    .svc-causes__media::after { background: linear-gradient(to top, rgba(16,10,6,0.82) 0%, rgba(16,10,6,0.4) 60%, rgba(16,10,6,0.2) 100%); }
    .svc-causes__lead { font-size: 40px; }
    .svc-causes__dots { gap: 18px; margin-top: 40px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .svc-panel__media img, .svc-causes__line { transition: none !important; transform: none !important; filter: none; }
    .svc-causes__dot.is-active::after { transition: none; }
  }

  /* Service pages: clip sideways overflow without turning the body into its own scroll box,
     so the sticky treatment panels and headings can hold their place against the viewport */
  @supports (overflow-x: clip) {
    html:has(body.svc-page), body.svc-page { overflow-x: clip; }
  }
  @media (max-width: 820px) {
    /* Signed diptych on phones: one photograph, the quote and signature over it */
    .svc-diptych { height: 82svh; min-height: 560px; }
    .svc-diptych .diptych__grid { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 100%; min-height: 0; }
    .svc-diptych .diptych__pane--right, .svc-diptych .diptych__pane-tag { display: none; }
  }
  .svc-panel__lede { max-width: 34ch; }
  @media (max-width: 820px) {
    .svc-diptych .diptych__overlay { justify-content: flex-end; padding-bottom: 64px; }
    .svc-diptych .diptych__pane::after { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(16,10,6,0.78) 100%); }
    .svc-diptych .diptych__pane--left img { object-position: 50% 18% !important; }
  }

  /* Service pages: quieter type scale (2026-10-06), closer to the homepage section headings */
  .svc-panel__name { font-size: clamp(34px, 3.3vw, 50px); line-height: 1.04; margin-bottom: 20px; }
  .svc-panel__lede { font-size: clamp(18px, 1.35vw, 21px); margin-bottom: 22px; }
  .svc-panel__kicker { margin-bottom: 22px; }
  .svc-panel__kicker em { font-size: 17px; }
  .svc-causes__lead { font-size: clamp(32px, 3.4vw, 52px); max-width: 15ch; margin-bottom: 18px; }
  .svc-causes__note { font-size: 14.5px; }
  .svc-journey__num { font-size: clamp(34px, 3.2vw, 50px); }
  .svc-journey__outcome { font-size: 18px; }
  .svc-index__item em { font-size: clamp(22px, 1.9vw, 30px); }
  .svc-index__lede { font-size: clamp(19px, 1.5vw, 23px); }
  .svc-for__lead { font-size: clamp(26px, 2.6vw, 38px); }
  .svc-diptych__sign { font-size: 30px; }
  @media (max-width: 820px) {
    .svc-panel__name { font-size: 32px; }
    .svc-panel__lede { font-size: 18px; }
    .svc-causes__lead { font-size: 30px; }
    .svc-journey__num { font-size: 34px; }
    .svc-index__name { font-size: 28px; }
    .svc-for__lead { font-size: 26px; }
  }

  /* Restored split heroes on the service pages: a soft shade behind the centre text so the
     subtitle reads over bright photographs, and walnut beneath the links on phones */
  .svc-hero-split .hero__overlay { z-index: 3; }
  .svc-hero-split .hero__overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 46% 40% at 50% 48%, rgba(16,10,6,0.5) 0%, rgba(16,10,6,0.22) 55%, rgba(16,10,6,0) 100%),
      linear-gradient(180deg, rgba(16,10,6,0.32) 0%, rgba(16,10,6,0) 22%, rgba(16,10,6,0) 70%, rgba(16,10,6,0.42) 100%);
  }
  .svc-hero-split .sub-hero-split__sub { color: #FFFFFF !important; text-shadow: 0 1px 14px rgba(16,10,6,0.45); }
  @media (max-width: 700px) {
    .svc-hero-split .hero__cta-row { background: var(--brown); }
    .svc-hero-split .hero__overlay::before {
      background: linear-gradient(180deg, rgba(16,10,6,0.35) 0%, rgba(16,10,6,0.25) 40%, rgba(16,10,6,0.55) 100%);
    }
  }

  /* Service heroes: Sackers title a touch smaller (2026-10-06), and the single-photograph variant */
  .svc-hero-split .sub-hero-split__title { font-size: clamp(20px, 2.7vw, 37px) !important; }
  .svc-hero-split--single .hero__pane--left { grid-column: 1 / -1; }
  @media (max-width: 700px) {
    .svc-hero-split .sub-hero-split__title { font-size: 16px !important; }
  }
  /* Service hero subtitle: wider, two even lines on desktop */
  .svc-hero-split .sub-hero-split__sub { max-width: 66ch; text-wrap: balance; }
  /* Statement with a supporting paragraph in the body font and a booking button */
  .svc-statement__body {
    font-family: var(--font-body) !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: var(--text-primary) !important;
    max-width: 62ch;
    margin: 28px auto 0 !important;
    text-wrap: pretty;
  }
  .svc-statement--full .mission__ctas { justify-content: center; margin-top: 40px; }

  /* Treatment panels, revised (2026-10-06): the detail always on show, the italic line on two
     wider lines, and the essentials as a quiet row of three facts */
  .svc-panel__copy { padding-top: 120px; padding-bottom: 80px; }
  .svc-panel__lede { max-width: 25em; text-wrap: balance; margin-bottom: 18px; }
  .svc-panel__text { font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.75; color: var(--text-primary); margin: 0 0 30px; max-width: 54ch; text-wrap: pretty; }
  .svc-panel__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(28px, 3vw, 48px); row-gap: 18px; margin: 0 0 34px; padding: 0; }
  .svc-panel__facts div { margin: 0; }
  .svc-panel__facts dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.24em; font-size: 9.5px; color: var(--text-primary); margin: 0 0 8px; }
  .svc-panel__facts dd { font-family: var(--font-editorial); font-style: italic; font-size: 18px; line-height: 1.25; color: var(--text-primary); margin: 0; white-space: nowrap; }
  .svc-panel__actions { margin-bottom: 0; }
  /* On shorter screens a panel may be taller than the window, so let it scroll normally rather than hold */
  @media (max-height: 760px) { .svc-panel { position: relative; } }
  @media (max-width: 820px) {
    .svc-panel__copy { padding: 40px 24px 72px; }
    .svc-panel__facts { grid-template-columns: repeat(3, minmax(0, auto)); column-gap: 22px; }
    .svc-panel__facts dd { font-size: 16px; white-space: normal; }
  }

  /* ---------- Who comes to us, as a split screen (2026-10-06) ---------- */
  .svc-causes--split { height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--brown); }
  .svc-causes--split .svc-causes__copy {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px clamp(48px, 7vw, 128px) 96px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .svc-causes--split .svc-causes__eyebrow { margin-bottom: 40px; }
  .svc-causes--split .svc-causes__line { position: relative; padding-top: 26px; }
  .svc-causes__numeral {
    position: absolute;
    left: -6px;
    top: -58px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(130px, 13vw, 210px);
    line-height: 1;
    color: rgba(245, 242, 236, 0.07);
    pointer-events: none;
    user-select: none;
    display: none;
  }
  .svc-causes--split .svc-causes__lead {
    position: relative;
    font-family: var(--font-editorial);
    font-style: normal;
    font-weight: 300;
    font-size: clamp(32px, 3.1vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.005em;
    max-width: 14ch;
    margin: 0 0 22px;
  }
  .svc-causes--split .svc-causes__lead em { font-style: italic; color: #FFFFFF; }
  .svc-causes--split .svc-causes__note { position: relative; font-size: 15px; line-height: 1.7; max-width: 38ch; color: #FFFFFF; }
  .svc-causes--split .svc-causes__dots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    column-gap: clamp(28px, 3vw, 44px);
    row-gap: 18px;
    margin-top: 64px;
  }
  .svc-causes--split .svc-causes__dot {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    color: #FFFFFF;
    padding: 0 0 8px;
    text-align: left;
  }
  .svc-causes--split .svc-causes__dot em { font-family: var(--font-editorial); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; }
  .svc-causes--split .svc-causes__dot:hover, .svc-causes--split .svc-causes__dot.is-active { color: #FFFFFF; }
  .svc-causes--split .svc-causes__media { position: relative; margin: 0; overflow: hidden; min-height: 100%; }
  .svc-causes--split .svc-causes__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.9) contrast(1.05); transition: filter 900ms ease, transform 1800ms var(--m-ease); }
  .svc-causes--split .svc-causes__media:hover img { filter: grayscale(0) saturate(0.68) contrast(0.95) brightness(0.92); }
  .svc-causes--split .svc-causes__media::after { content: none; }

  @media (max-width: 820px) {
    .svc-causes--split { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .svc-causes--split .svc-causes__media { order: -1; aspect-ratio: 4 / 5; min-height: 0; }
    .svc-causes--split .svc-causes__copy { min-height: 0; padding: 56px 24px 64px; }
    .svc-causes--split .svc-causes__eyebrow { margin-bottom: 28px; }
    .svc-causes__numeral { font-size: 120px; top: -40px;
    display: none;
  }
    .svc-causes--split .svc-causes__lead { font-size: 32px; }
    .svc-causes--split .svc-causes__dots { grid-template-columns: repeat(2, minmax(0, max-content)); margin-top: 44px; }
  }
  .svc-causes--split .svc-causes__lead { max-width: 18ch; text-wrap: balance; }

  /* ---------- Staggered pair (Restoration: lashes and colour boost) ---------- */
  .svc-pair__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 112px); align-items: start; max-width: 1180px; margin: 0 auto; }
  .svc-pair__item:nth-child(2) { margin-top: clamp(96px, 11vw, 176px); }
  .svc-pair__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--brown); margin: 0 0 36px; }
  .svc-pair__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: filter 900ms ease, transform 1600ms var(--m-ease); }
  .svc-pair__media:hover img { filter: grayscale(0) saturate(0.68) contrast(0.95); transform: scale(1.03); }
  .svc-pair .svc-panel__name { font-size: clamp(30px, 2.8vw, 42px); }
  .svc-pair .svc-panel__facts { grid-template-columns: repeat(3, minmax(0, auto)); }
  .svc-pair .svc-panel__facts dd { white-space: normal; }

  /* Who comes to us, photograph on the left */
  .svc-causes--flip .svc-causes__media { order: -1; }

  @media (max-width: 820px) {
    .svc-pair__grid { grid-template-columns: 1fr; gap: 0; }
    .svc-pair__item + .svc-pair__item { margin-top: 72px; }
    .svc-pair__item:nth-child(2) { margin-top: 72px; }
    .svc-pair__media { margin-bottom: 26px; }
  }

  /* =====================================================================
     LLC MONOGRAM: switched OFF on 6 October 2026 at Carly's request.
     Hides the mark in the footer, above the hero headlines (homepage, About,
     Meet Zara, Training, Contact) and on the loading splash. The images and
     markup are all still in place: delete this block to bring them back.
     ===================================================================== */
  .footer__mark-inline,
  .hero__mark,
  .splash__monogram { display: none !important; }

  /* ---------- Feature: one treatment over a full-bleed photograph (Laser: hair removal) ---------- */
  .svc-feature { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--brown); color: #FFFFFF; overflow: hidden; }
  .svc-feature__media { position: absolute; inset: 0; margin: 0; }
  .svc-feature__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.62) contrast(1.06); }
  .svc-feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(16,10,6,0.82) 0%, rgba(16,10,6,0.55) 42%, rgba(16,10,6,0.08) 78%); }
  .svc-feature__copy { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 120px 48px 96px; box-sizing: border-box; }
  .svc-feature__copy > * { max-width: 540px; }
  .svc-feature .svc-panel__kicker { color: #FFFFFF; }
  .svc-feature .svc-panel__name, .svc-feature .svc-panel__lede { color: #FFFFFF; }
  .svc-feature .svc-panel__text { color: #FFFFFF; }
  .svc-feature .svc-panel__facts dt { color: #FFFFFF; }
  .svc-feature .svc-panel__facts dd { color: #FFFFFF; }
  .svc-link--light { color: #FFFFFF; border-bottom-color: rgba(245, 242, 236, 0.5); }
  .svc-link--light:hover { border-bottom-color: #F5F2EC; }
  @media (max-width: 820px) {
    .svc-feature { min-height: 0; align-items: flex-end; }
    .svc-feature__media::after { background: linear-gradient(to top, rgba(16,10,6,0.9) 0%, rgba(16,10,6,0.6) 55%, rgba(16,10,6,0.2) 100%); }
    .svc-feature__copy { padding: 320px 24px 64px; }
  }

  /* Journey, revised (2026-10-06): no numerals, a closer row, and optional appointment groupings above */
  .svc-journey__track { max-width: 960px; margin: 0 auto; }
  .svc-journey__steps { gap: 28px; }
  .svc-journey__step { gap: 0; padding-bottom: 18px; justify-content: flex-end; }
  .svc-journey__label {
    font-family: var(--font-editorial);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(19px, 1.6vw, 23px);
    line-height: 1.2;
  }
  .svc-journey__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0 0 18px; }
  .svc-journey__group {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 9.5px;
    color: var(--text-primary);
    padding: 11px 14px;
    background: var(--bg);
    text-align: center;
  }
  .svc-sec--cream .svc-journey__group { background: #FFFFFF; }
  @media (max-width: 820px) {
    .svc-journey__groups { display: none; }
    .svc-journey__label { font-size: 18px; }
  }

  /* ---------- Aftercare pop-up, opened from the footer (2026-10-07) ---------- */
  .footer__nav-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.22em; font-size: 10.5px;
    color: var(--text-primary); opacity: 1; transition: opacity 200ms ease;
  }
  .footer__nav-btn:hover { opacity: 1; }
  /* Aftercare pop-up: a photograph per guide on the left, the guide on the right.
     Tabs are grouped into aftercare and pre-care; the call/WhatsApp note stays
     pinned to the foot of the guide while it scrolls. */
  .aftercare-modal { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 32px; visibility: hidden; pointer-events: none; }
  .aftercare-modal.is-open { visibility: visible; pointer-events: auto; }
  .aftercare-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 10, 6, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 400ms ease; cursor: pointer; }
  .aftercare-modal.is-open .aftercare-modal__backdrop { opacity: 1; }
  .aftercare-modal__panel {
    position: relative; width: min(1080px, 100%); height: min(760px, calc(100vh - 64px));
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    background: #FFFFFF; color: var(--text-primary); overflow: hidden;
    opacity: 0; transform: translateY(16px); transition: opacity 450ms var(--m-ease), transform 550ms var(--m-ease);
  }
  .aftercare-modal.is-open .aftercare-modal__panel { opacity: 1; transform: none; }
  .aftercare-modal__close {
    position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center;
    background: #FFFFFF; border: 0; padding: 0 0 4px; cursor: pointer;
    font-family: var(--font-editorial); font-size: 30px; line-height: 1; color: var(--text-primary); transition: opacity 200ms ease;
  }
  .aftercare-modal__close:hover { opacity: 0.6; }
  .aftercare-modal__close:focus { outline: none; }
  .aftercare-modal__close:focus-visible { outline: 1px solid var(--text-primary); outline-offset: -4px; }

  .aftercare-modal__media { position: relative; overflow: hidden; background: var(--surface); }
  .aftercare-modal__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) brightness(0.96) contrast(1.02);
    opacity: 0; transform: scale(1.05); transition: opacity 700ms var(--m-ease), transform 1400ms var(--m-ease);
  }
  .aftercare-modal__media img.is-active { opacity: 1; transform: none; }

  .aftercare-modal__body { position: relative; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 60px clamp(28px, 4.4vw, 60px) 0; }
  .aftercare-modal__eyebrow { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em; font-size: 10.5px; color: var(--text-primary); margin: 0 0 14px; }
  .aftercare-modal__title { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.12; margin: 0 0 34px; text-wrap: balance; }

  .aftercare-modal__nav { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 14px 30px; margin: 0 0 44px; }
  .aftercare-modal__group { display: contents; }
  .aftercare-modal__group-label { white-space: nowrap; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.28em; font-size: 9.5px; color: var(--text-primary); }
  .aftercare-modal__tabs { display: flex; flex-wrap: wrap; gap: 8px 26px; }
  .aftercare-modal__tab {
    position: relative; background: none; border: 0; padding: 0 0 7px; cursor: pointer; white-space: nowrap;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.24em; font-size: 10.5px; color: var(--text-primary);
    transition: color 240ms ease;
  }
  .aftercare-modal__tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--text-primary); transition: width 420ms var(--m-ease); }
  .aftercare-modal__tab:hover, .aftercare-modal__tab.is-active { color: var(--text-primary); }
  .aftercare-modal__tab.is-active::after { width: 100%; }
  .aftercare-modal__tab:focus { outline: none; }
  .aftercare-modal__tab:focus-visible { outline: 1px solid var(--text-primary); outline-offset: 4px; }

  .aftercare-modal__panes { display: grid; }
  .aftercare-modal__pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 420ms ease, transform 520ms var(--m-ease), visibility 0s linear 420ms; }
  .aftercare-modal__pane.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .aftercare-modal__pane-title { font-family: var(--font-editorial); font-weight: 400; font-size: clamp(23px, 2vw, 28px); line-height: 1.2; margin: 0 0 10px; }
  .aftercare-modal__intro { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--text-primary); max-width: 46ch; margin: 0 0 34px; text-wrap: pretty; }
  .aftercare-modal__steps { list-style: none; margin: 0; padding: 0; }
  .aftercare-modal__steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 0 0 26px; }
  .aftercare-modal__num { font-family: var(--font-editorial); font-size: 18px; line-height: 1.35; color: var(--text-primary); font-variant-numeric: oldstyle-nums; }
  .aftercare-modal__when { display: block; font-family: var(--font-editorial); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--text-primary); margin: 0 0 4px; }
  .aftercare-modal__steps p { font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.7; color: var(--text-primary); margin: 0; }

  .aftercare-modal__note {
    position: sticky; bottom: 0; z-index: 2; margin: auto calc(-1 * clamp(28px, 4.4vw, 60px)) 0; padding: 20px clamp(28px, 4.4vw, 60px) 22px;
    background: var(--bg); font-family: var(--font-editorial); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--text-primary);
  }
  .aftercare-modal__panes + .aftercare-modal__note { margin-top: 18px; }
  .aftercare-modal__note a { color: var(--text-primary); border-bottom: 1px solid currentColor; white-space: nowrap; }
  body.aftercare-open { overflow: hidden; }

  @media (max-width: 760px) {
    .aftercare-modal { padding: 0; align-items: stretch; }
    .aftercare-modal__panel { display: block; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
    .aftercare-modal__close { position: fixed; }
    .aftercare-modal__media { height: 32vh; min-height: 200px; }
    .aftercare-modal__body { display: block; overflow: visible; padding: 34px 24px 0; }
    .aftercare-modal__title { margin-bottom: 28px; }
    .aftercare-modal__nav { display: block; margin-bottom: 36px; }
    .aftercare-modal__group { display: block; }
    .aftercare-modal__group + .aftercare-modal__group { margin-top: 20px; }
    .aftercare-modal__group-label { display: block; margin: 0 0 10px; }
    .aftercare-modal__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 0 24px; gap: 24px; }
    .aftercare-modal__tabs::-webkit-scrollbar { display: none; }
    .aftercare-modal__steps li { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding-bottom: 22px; }
    .aftercare-modal__note { margin: 18px -24px 0; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); font-size: 15px; line-height: 1.45; }
  }
  @media (prefers-reduced-motion: reduce) {
    .aftercare-modal__panel, .aftercare-modal__media img, .aftercare-modal__pane { transition: none; transform: none; }
  }

  /* =================================================================
     CREAM VARIANT OF THE CAUSES SPLIT (Meet Zara: qualifications, October 2026)
     Same one-line-at-a-time split as "Who comes to us", on the cream ground so it
     sits between the white letter and the dark teaching breather.
     ================================================================= */
  .svc-causes--light.svc-causes--split { background: var(--bg); color: var(--text-primary); }
  .svc-causes--light .svc-causes__eyebrow { color: var(--text-primary); }
  .svc-causes--light .svc-causes__numeral { color: rgba(26, 25, 22, 0.06);
    display: none;
  }
  .svc-causes--light.svc-causes--split .svc-causes__lead,
  .svc-causes--light.svc-causes--split .svc-causes__lead em { color: var(--text-primary); }
  .svc-causes--light.svc-causes--split .svc-causes__note { color: var(--text-primary); }
  .svc-causes--light.svc-causes--split .svc-causes__dot { color: var(--text-primary); }
  .svc-causes--light.svc-causes--split .svc-causes__dot:hover,
  .svc-causes--light.svc-causes--split .svc-causes__dot.is-active { color: var(--text-primary); }
  .svc-causes--light .svc-causes__dot::after { background: var(--text-primary); }
  .svc-causes--light.svc-causes--split .svc-causes__media img { filter: grayscale(1) contrast(1.04); }
  .svc-causes--light.svc-causes--split .svc-causes__media:hover img { filter: grayscale(0.2) contrast(1); }

  /* =================================================================
     LASER BROW RESET (Laser page, October 2026)
     Intro reuses the founder-letter split; packages are an editorial price list
     beside their terms, in the Prices page voice. No cards, no hairlines.
     ================================================================= */
  .svc-reset .founder-letter__portrait img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
  .svc-packs { background: #FFFFFF; padding: clamp(88px, 10vw, 140px) 48px; }
  .svc-packs__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
  .svc-packs__head h2 { font-family: var(--font-editorial); font-weight: 300; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; margin: 14px 0 20px; color: var(--text-primary); text-wrap: balance; }
  .svc-packs__dek { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--text-primary); max-width: 44ch; margin: 0 0 40px; }
  .svc-packs__note h3 { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: 21px; line-height: 1.3; margin: 0 0 6px; color: var(--text-primary); }
  .svc-packs__note p { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.7; color: var(--text-primary); max-width: 42ch; margin: 0 0 26px; }
  .svc-packs__list { list-style: none; margin: 0 0 28px; padding: 0; }
  .svc-packs__item { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding: 26px 0; }
  .svc-packs__name h3 { font-family: var(--font-editorial); font-weight: 300; font-size: clamp(30px, 3vw, 44px); line-height: 1.05; margin: 0 0 10px; color: var(--text-primary); transition: transform 380ms cubic-bezier(.22,.61,.36,1); }
  .svc-packs__name p { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; line-height: 1.6; color: var(--text-primary); margin: 0; }
  .svc-packs__price { text-align: right; white-space: nowrap; }
  .svc-packs__price span { display: block; font-family: var(--font-editorial); font-weight: 300; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; color: var(--text-primary); }
  .svc-packs__price em { display: block; margin-top: 6px; font-style: normal; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; color: var(--text-primary); }
  .svc-packs__item:hover .svc-packs__name h3 { transform: translateX(8px); }
  .svc-packs__fine { font-family: var(--font-body); font-weight: 300; font-size: 12.5px; line-height: 1.7; color: var(--text-primary); max-width: 60ch; margin: 0 0 32px; }
  @media (max-width: 900px) {
    .svc-packs { padding: 72px 24px 80px; }
    .svc-packs__inner { grid-template-columns: 1fr; gap: 24px; }
    .svc-packs__item { padding: 20px 0; gap: 20px; }
  }
  @media (prefers-reduced-motion: reduce) { .svc-packs__name h3 { transition: none; } }

  /* Footer: social links and the Google review link (October 2026) */
  .footer__social { display: flex; justify-content: center; align-items: center; gap: 28px; margin: -12px 0 18px; }
  .footer__social a { display: inline-flex; width: 19px; height: 19px; color: var(--text-primary); transition: opacity 200ms ease, transform 320ms var(--m-ease); }
  .footer__social a:hover { opacity: 0.6; transform: translateY(-2px); }
  .footer__social svg { width: 100%; height: 100%; display: block; }
  .footer__review { margin: 0 0 36px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; line-height: 2; }
  .footer__review a { color: var(--text-primary); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity 200ms ease; }
  .footer__review a:hover { opacity: 0.6; }
  .footer__credit { display: inline-flex; align-items: center; gap: 12px; }
  .footer__jude { display: inline-flex; color: var(--text-primary); transition: opacity 200ms ease; }
  .footer__jude:hover { opacity: 0.6; }
  .footer__jude svg { display: block; width: 23px; height: 31px; fill: currentColor; }
  @media (max-width: 700px) { .footer__social { margin-top: -6px; } }
  @media (prefers-reduced-motion: reduce) { .footer__social a { transition: opacity 200ms ease; } .footer__social a:hover { transform: none; } }


  /* =================================================================
     BLACK FRIDAY OFFER (November 2026). Black card, stark white type,
     centred on every screen with equal space above and below; staggered
     entrance, a count-up on the 20, and a small "20% off" tab once seen.
     ================================================================= */
  .bf-offer[hidden], .bf-tab[hidden] { display: none; }
  .bf-offer { position: fixed; inset: 0; z-index: 230; display: flex; align-items: center; justify-content: center; padding: 16px; visibility: hidden; pointer-events: none; }
  .bf-offer.is-open { visibility: visible; pointer-events: auto; }
  .bf-offer__backdrop { position: absolute; inset: 0; background: rgba(16, 10, 6, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 420ms ease; cursor: pointer; }
  .bf-offer.is-open .bf-offer__backdrop { opacity: 1; }
  .bf-offer__card {
    position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain;
    background: #000000; color: #FFFFFF; text-align: center; padding: 56px 52px;
    opacity: 0; transform: translateY(18px); transition: opacity 420ms var(--m-ease), transform 560ms var(--m-ease);
  }
  .bf-offer.is-open .bf-offer__card { opacity: 1; transform: none; }
  .bf-offer.is-open .bf-offer__in { animation: bfOfferIn 700ms var(--m-ease) both; animation-delay: calc(140ms + var(--i, 0) * 70ms); }
  @keyframes bfOfferIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  .bf-offer__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0 0 4px; background: none; border: 0; cursor: pointer; font-family: var(--font-editorial); font-size: 30px; line-height: 1; color: #FFFFFF; transition: opacity 200ms ease; }
  .bf-offer__close:hover { opacity: 0.6; }
  .bf-offer__close:focus { outline: none; }
  .bf-offer__close:focus-visible { outline: 1px solid #FFFFFF; outline-offset: -6px; }

  /* The offer: label, figure, line and countdown read as one block */
  .bf-offer__eyebrow { display: block; margin: 0 0 22px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.42em; padding-left: 0.42em; font-size: 11px; color: #FFFFFF; }
  .bf-offer__title { margin: 0; font-weight: 300; color: #FFFFFF; }
  .bf-offer__big { display: block; font-family: var(--font-editorial); font-weight: 300; font-size: clamp(68px, 8vw, 96px); line-height: 0.92; letter-spacing: -0.01em; white-space: nowrap; }
  .bf-offer__count { display: inline-block; min-width: 1em; text-align: right; }
  .bf-offer__sub { display: block; margin-top: 4px; font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; text-wrap: balance; }
  .bf-offer__when { margin: 16px 0 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em; padding-left: 0.3em; font-size: 10px; color: #FFFFFF; }

  /* Then the code, the detail and the action, on an even rhythm */
  .bf-offer__code { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; max-width: 100%; margin: 30px 0 0; padding: 15px 32px 13px; background: transparent; border: 1px solid #FFFFFF; color: #FFFFFF; cursor: pointer; transition: background-color 240ms ease, color 240ms ease; }
  .bf-offer__code:hover, .bf-offer__code:focus-visible { background: #FFFFFF; color: #000000; outline: none; }
  .bf-offer__code-value { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.28em; padding-left: 0.28em; font-size: 20px; line-height: 1.15; white-space: nowrap; }
  .bf-offer__code-hint { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em; padding-left: 0.3em; font-size: 9px; line-height: 1; }
  .bf-offer__body { max-width: none; margin: 24px auto 0; font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.5; color: #FFFFFF; text-wrap: balance; }
  .bf-offer__book { display: inline-block; margin-top: 26px; padding: 16px 32px; white-space: nowrap; background: #FFFFFF; color: #000000; border: 1px solid #FFFFFF; cursor: pointer; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px; transition: background-color 240ms ease, color 240ms ease; }
  .bf-offer__book:hover, .bf-offer__book:focus-visible { background: transparent; color: #FFFFFF; outline: none; }

  .bf-offer__terms { max-width: 54ch; margin: 30px auto 0; font-family: var(--font-body); font-weight: 300; font-size: 11px; line-height: 1.55; color: #FFFFFF; text-wrap: pretty; }
  .bf-offer__terms-title { display: block; margin-bottom: 6px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em; padding-left: 0.3em; font-size: 9px; }
  .bf-offer__terms a { color: #FFFFFF; border-bottom: 1px solid currentColor; }

  .bf-tab {
    position: fixed; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60;
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; cursor: pointer;
    background: #000000; color: #FFFFFF; border: 1px solid #FFFFFF;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.28em; font-size: 10.5px;
    opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 360ms ease, transform 420ms var(--m-ease), background-color 220ms ease, color 220ms ease;
  }
  .bf-tab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  body:not(.past-hero) .bf-tab, body.booking-open .bf-tab, body.aftercare-open .bf-tab, .cookie.is-visible ~ .bf-tab { opacity: 0; transform: translateY(12px); pointer-events: none; }
  .bf-tab:hover, .bf-tab:focus-visible { background: #FFFFFF; color: #000000; outline: none; }
  .bf-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }

  @media (max-width: 560px) {
    .bf-offer__card { padding: 46px 22px; }
    .bf-offer__big { font-size: clamp(56px, 18vw, 72px); }
    .bf-offer__sub { font-size: 22px; }
    .bf-offer__code { margin-top: 26px; padding: 13px 20px 11px; }
    .bf-offer__code-value { font-size: clamp(15px, 4.8vw, 19px); letter-spacing: 0.22em; padding-left: 0.22em; }
    .bf-offer__body { margin-top: 22px; font-size: 13.5px; }
    .bf-offer__book { margin-top: 22px; padding: 15px 22px; letter-spacing: 0.22em; }
    .bf-offer__terms { margin-top: 24px; font-size: 10.5px; }
    .bf-tab { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 11px 15px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bf-offer__card, .bf-offer__backdrop, .bf-tab { transition: none; }
    .bf-offer.is-open .bf-offer__in { animation: none; }
  }