/* ===========================================================================
   Dr Sultan - light theme, warm paper and brown
   Hand-authored, no build step. Token changes happen here and nowhere else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* LIGHT THEME.
       --ink-* is the surface scale and --bone-* is the text scale. The names
       are held over from the dark build so the 1,900 lines below did not all
       have to change; only the values flipped, plus the handful of rules that
       genuinely assume a direction (filters, blend modes, scrims).

       Warm paper, never pure white. */
    --ink-900: oklch(0.92 0.018 70);
    --ink-800: oklch(0.97 0.012 72);
    --ink-700: oklch(0.99 0.008 72);
    --ink-600: oklch(0.86 0.025 70);
    --ink-500: oklch(0.78 0.04 60);

    /* The old token names remain because every component reads them. Their
       values are now flat browns taken from the client's current site. */
    --brass-600: oklch(0.36 0.035 55);
    --brass-500: oklch(0.60 0.045 58);
    --brass-400: oklch(0.52 0.055 55);
    --brass-300: oklch(0.44 0.045 55);
    --brass-200: oklch(0.76 0.04 65);

    /* Solid button brown. Chloe chose the darkest of the four tones offered
       on 2026-08-11 (tone D), so buttons carry their own pair instead of
       reusing --brass-400/--brass-300. The accent browns above are unchanged:
       her feedback was about the buttons, not the underlines and dividers. */
    --btn-bg: oklch(0.37 0.05 55);
    --btn-bg-hover: oklch(0.31 0.042 55);

    /* Text. Warm near-black, never pure black. */
    --bone-100: oklch(0.28 0.024 55);
    --bone-200: oklch(0.36 0.027 55);
    --bone-300: oklch(0.48 0.026 60);
    --bone-400: oklch(0.60 0.022 60);

    /* Photography overlays. Text sitting on an image needs a dark scrim and
       light type whatever the page theme is, so these do NOT flip. */
    --overlay: oklch(0.24 0.028 55);
    --on-image: oklch(0.97 0.012 72);

    /* Type. Cormorant Garamond at 300 has the same fine, even stroke as the
       hand-drawn wordmark. Fraunces was chunky and high-contrast and fought
       the logo. Cormorant runs small for its point size, so the display end of
       the scale is pushed up to compensate. */
    --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Instrument Sans', 'Segoe UI', Helvetica, sans-serif;

    /* Modular scale */
    --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
    --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.55rem);
    --step-2: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
    --step-3: clamp(2.2rem, 1.75rem + 2.1vw, 3.6rem);
    --step-4: clamp(2.9rem, 2rem + 4vw, 5.4rem);
    --step-5: clamp(3.4rem, 2rem + 6.8vw, 8.25rem);

    /* Rhythm. Space is the cheapest luxury signal there is, and the most
       reliable. Sections breathe wider than a normal marketing page and the
       measure is short, so nothing ever looks like a wall of text. */
    --gutter: clamp(1.5rem, 5vw, 4.5rem);
    --section-y: clamp(6.5rem, 16vh, 15rem);
    --measure: 54ch;
    --shell: 82rem;

    /* Motion. Exponential only. Nothing bounces, and everything is slower than
       a normal site - hurry reads as cheap. */
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

    --header-h: 5.5rem;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    /* Belt and braces against a decorative element pushing the page sideways.
       Every absolutely positioned flourish is also clipped by its own
       section, so this should never actually fire. */
    overflow-x: hidden;
    background-color: var(--ink-800);
    color: var(--bone-200);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.7;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: var(--bone-100);
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

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

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

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

::selection {
    background: var(--brass-400);
    color: #fbf7ee;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.75rem 1.25rem;
    background: var(--brass-400);
    color: #fbf7ee;
    font-weight: 600;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

.shell--wide {
    width: min(100% - (var(--gutter) * 2), 96rem);
    margin-inline: auto;
}

.section {
    position: relative;
    padding-block: var(--section-y);
    /* Clips every decorative flourish inside. This is what actually keeps the
       page from scrolling sideways. */
    overflow: hidden;
}

.section--flush {
    padding-block: 0;
}

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

/* Film grain. Generated, not an image request. */
.grain::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.32;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/* Flat wash. The client asked for block colours rather than gradients. */
.mesh::before {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background: var(--ink-900);
    opacity: 0.45;
}

.rule {
    height: 1px;
    border: 0;
    margin: 0;
    background: color-mix(in oklch, var(--brass-400) 42%, transparent);
}

/* --------------------------------------------------------------------------
   4. Type utilities
   -------------------------------------------------------------------------- */

/* Deliberately NOT gold. Gold on the eyebrow, the heading, the button, the
   rules and the prices all at once is decoration. Reserving it for headings,
   figures and the one CTA is what makes it read as precious. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.eyebrow::before {
    content: '';
    width: clamp(2rem, 5vw, 4rem);
    height: 1px;
    background: var(--brass-500);
    opacity: 0.85;
}

.eyebrow--bare::before {
    display: none;
}

.display {
    font-size: var(--step-5);
    line-height: 0.98;
    letter-spacing: -0.012em;
}

.h2 {
    font-size: var(--step-4);
    line-height: 1;
    letter-spacing: -0.01em;
}

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

/* Lead paragraphs are set in the display serif, not the UI sans. It is the
   single biggest editorial-versus-marketing tell on a page like this. */
.lede {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-2);
    line-height: 1.32;
    letter-spacing: 0.002em;
    color: var(--bone-100);
}

.muted {
    color: var(--bone-300);
}

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

/* Flat brown emphasis. */
.gold {
    color: var(--brass-300);
}

/* An italic phrase used sparingly to soften a heading. */
.warm {
    font-style: italic;
    color: var(--brass-300);
}

/* Flat structural rule. */
.rule-gold {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--brass-500);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

/* Rounded, compact and close to the controls on Dr Sultan's current site. */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1rem 1.9rem;
    background-color: var(--btn-bg);
    color: var(--on-image);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 999px;
    transition:
        background-color 0.55s var(--ease-out-quint),
        box-shadow 0.8s var(--ease-out-expo);
}

.btn:hover {
    background-color: var(--btn-bg-hover);
    box-shadow: 0 0.75rem 2rem -0.9rem color-mix(in oklch, var(--brass-600) 32%, transparent);
}

.btn--ghost {
    background-color: transparent;
    background-image: none;
    color: var(--bone-100);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bone-100) 28%, transparent);
}

.btn--ghost:hover {
    background-color: color-mix(in srgb, var(--bone-100) 7%, transparent);
    background-image: none;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--brass-400) 60%, transparent),
        0 1rem 2rem -1rem rgb(23 20 15 / 18%);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

/* Text link with a brass rule that draws in from the left. */
.link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding-block: 0.4rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--brass-300);
}

.link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--ease-out-expo);
}

.link:hover::after,
.link:focus-visible::after {
    transform: scaleX(1);
}

.link .arw {
    transition: transform 0.7s var(--ease-out-expo);
}

.link:hover .arw {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: var(--ink-800);
    box-shadow: 0 1px 0 var(--ink-600);
    transition:
        background-color 0.7s var(--ease-out-quint),
        box-shadow 0.7s var(--ease-out-quint),
        backdrop-filter 0.7s var(--ease-out-quint);
}

.site-header.is-stuck {
    background: var(--ink-800);
    box-shadow: 0 1px 0 var(--ink-600);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: min(100% - (var(--gutter) * 2), 96rem);
    margin-inline: auto;
}

/* His wordmark is a dark script signature on transparent, which is invisible
   on this ground. Knock it out to bone rather than asking him for a reversed
   file before the pitch. Replace with a proper reversed asset if he signs. */
.brand img,
.footer__brand img {
    width: auto;
    opacity: 0.95;
}

.brand img {
    height: clamp(1.9rem, 3.6vw, 2.6rem);
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.4rem);
}

.nav a {
    position: relative;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bone-300);
    transition: color 0.6s var(--ease-out-quint);
}

.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.4rem;
    width: 100%;
    height: 1px;
    background: var(--brass-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-out-expo);
}

.nav a:hover {
    color: var(--bone-100);
}

.nav a:hover::after {
    transform: scaleX(1);
}

.header-cta {
    padding: 0.8rem 1.5rem;
}

/* Call button, phone only. The booking button is hidden at that size, so this
   is the one-tap way to reach him from any page. */
.header-call {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 999px;
    color: var(--bone-100);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bone-100) 24%, transparent);
    transition: color 0.4s var(--ease-out-quint), box-shadow 0.4s var(--ease-out-quint);
}

.header-call svg {
    width: 1.15rem;
    height: 1.15rem;
}

.header-call:hover,
.header-call:focus-visible {
    color: var(--brass-300);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass-400) 60%, transparent);
}

/* Burger */
.burger {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bone-100) 24%, transparent);
}

.burger span {
    position: relative;
    display: block;
    width: 1.1rem;
    height: 1px;
    background: var(--bone-100);
    transition: background-color 0.3s var(--ease-out-quint);
}

.burger span::before,
.burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--bone-100);
    transition: transform 0.6s var(--ease-out-expo);
}

.burger span::before {
    transform: translateY(-0.35rem);
}

.burger span::after {
    transform: translateY(0.35rem);
}

body.nav-open .burger span {
    background: transparent;
}

body.nav-open .burger span::before {
    transform: rotate(45deg);
}

body.nav-open .burger span::after {
    transform: rotate(-45deg);
}

/* Mobile drawer */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: var(--gutter) var(--gutter) 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ink-900);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.5rem);
    transition:
        opacity 0.6s var(--ease-out-quint),
        transform 0.7s var(--ease-out-expo),
        visibility 0s linear 0.7s;
}

body.nav-open .drawer {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* Deliberately not a blanket rule on every link in the drawer. Each block
   sets its own type, because the group links and the contact rows are not
   top-level navigation and should not look like it. */

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

/* The client's original treatment video is the whole opening, full bleed and
   unobstructed. The copy sits in a paper band directly below it; Chloe asked
   on 2026-08-11 for nothing to be laid over the footage. */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--ink-900);
}

.hero__video {
    display: block;
    width: 100%;
    height: clamp(20rem, 63vw, 44rem);
    object-fit: cover;
    object-position: center;
    max-width: none;
}

.hero__panel {
    display: grid;
    gap: clamp(1.1rem, 2.2vw, 1.75rem);
    padding: clamp(2.25rem, 6vw, 4.5rem) max(var(--gutter), calc(50vw - 24rem));
    background: var(--ink-900);
}

.hero h1 {
    max-width: 11ch;
    font-size: var(--step-5);
}

.hero__lede {
    max-width: 30ch;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-2);
    line-height: 1.25;
    color: var(--bone-100);
}

/* Numbers carry the offer, so they are set as display type rather than
   buried in a sentence. */
.stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: clamp(1.4rem, 3.5vw, 3rem);
    margin: 0;
    padding-top: clamp(1.1rem, 2.5vh, 1.6rem);
}

.stats::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--brass-500);
}

.stats dt {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.stats dd {
    margin: 0.3rem 0 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1;
    color: var(--brass-300);
    white-space: nowrap;
}

/* Figures use the same flat brown as the rest of the information system. */

/* Credential line under the H1. Wraps to a stack on small screens without
   ever setting a fixed width. */
.creds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem clamp(0.8rem, 1.8vw, 1.4rem);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.creds li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.creds li + li::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--brass-500);
}

/* Three-word reassurance strip. It used to be three paragraphs. Sits directly
   above the certifications rail, so it carries no bottom border of its own. */
.promise-band {
    background: var(--ink-800);
}

.promise {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(2rem, 5vh, 3.25rem);
}

.promise div {
    display: grid;
    gap: 0.3rem;
}

.promise dt {
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--bone-100);
}

.promise dd {
    margin: 0;
    font-size: var(--step--1);
    color: var(--bone-300);
}

/* --------------------------------------------------------------------------
   8. Accreditation rail
   -------------------------------------------------------------------------- */

.rail {
    padding-block: clamp(2.5rem, 6vh, 4rem);
    background: var(--ink-900);
    border-top: 1px solid var(--ink-600);
    border-bottom: 1px solid var(--ink-600);
}

.rail__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 4.5rem);
}

.rail__label {
    flex: 0 0 auto;
    font-size: var(--step--1);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.rail img {
    height: clamp(1.35rem, 2.6vw, 1.9rem);
    width: auto;
    /* His badge PNGs are dark-on-transparent. Inverted and brass-tinted they
       read as one set instead of six mismatched logos. Kept quiet: badges
       shouting for attention is the opposite of the register here. */
    /* Dark artwork on transparent, so it reads as-is on paper. Kept quiet:
       badges shouting for attention is the opposite of the register here. */
    filter: grayscale(1);
    opacity: 0.42;
    transition: opacity 0.8s var(--ease-out-quint);
}

.rail a:hover img,
.rail li:hover img {
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   9. Flagship treatment
   -------------------------------------------------------------------------- */

.flagship {
    background: var(--ink-800);
}

.flagship__grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0;
    min-height: clamp(42rem, 84svh, 60rem);
    align-items: stretch;
}

@media (min-width: 62rem) {
    .flagship__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.flagship__copy {
    display: grid;
    gap: 1.5rem;
    align-content: start;
    padding: clamp(3.5rem, 9vw, 8rem) var(--gutter);
}

.flagship__media {
    position: relative;
    min-height: 28rem;
}

.flagship__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

.flagship__media::before {
    display: none;
}

/* The key-information grid. Price and downtime on the homepage, on purpose. */
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1px;
    margin-top: 0.5rem;
    background: var(--ink-600);
    border: 1px solid var(--ink-600);
    border-radius: 1px;
    overflow: hidden;
}

.facts div {
    display: grid;
    gap: 0.35rem;
    padding: 1.15rem 1.25rem;
    background: var(--ink-700);
}

.facts dt {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.facts dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.15;
    color: var(--brass-300);
}

.facts dd small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--bone-400);
}

/* --------------------------------------------------------------------------
   10. The doctor
   -------------------------------------------------------------------------- */

.doctor {
    position: relative;
    background: var(--ink-900);
}

.doctor__grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0;
    min-height: clamp(42rem, 84svh, 60rem);
    align-items: stretch;
}

@media (min-width: 62rem) {
    .doctor__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* His only portrait was shot on a light grey wall, which would sit on this
   page like a lightbox. Greyscale plus a brass `color` blend turns it into a
   duotone that belongs here, and the gradient sinks the top of the frame back
   into the section. */
.doctor__media {
    position: relative;
    isolation: isolate;
    min-height: 28rem;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

/* Left in natural colour. The hero portrait carries the gold duotone; doing it
   twice on one page turns the whole site sepia. */
.doctor__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 26%;
    filter: none;
}

.doctor__media::after {
    display: none;
}

.doctor__copy {
    display: grid;
    gap: 1.4rem;
    align-content: start;
    padding: clamp(3.5rem, 9vw, 8rem) var(--gutter);
}

@media (max-width: 61.99rem) {
    .doctor__grid,
    .flagship__grid {
        min-height: 0;
    }

    .doctor__copy,
    .flagship__copy {
        padding-block: clamp(3.5rem, 12vw, 6rem);
    }
}

/* Pull-quote of his own stated philosophy. */
.philosophy {
    margin: 0.5rem 0 0;
    padding-left: clamp(1rem, 2.5vw, 1.75rem);
    border-left: 1px solid color-mix(in srgb, var(--brass-400) 55%, transparent);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-2);
    line-height: 1.28;
    color: var(--bone-100);
}

.philosophy cite {
    display: block;
    margin-top: 0.85rem;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--step--1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.credentials {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.credentials li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: baseline;
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--bone-200);
}

.credentials li::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    background: var(--brass-400);
    transform: translateY(-0.35em);
}

/* --------------------------------------------------------------------------
   11. Treatments
   -------------------------------------------------------------------------- */

.treatments {
    background: var(--ink-800);
}

.section-head {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1.25rem;
    max-width: 54ch;
    margin-bottom: clamp(3rem, 7vh, 5rem);
}

.section-head--split {
    max-width: none;
}

@media (min-width: 62rem) {
    .section-head--split {
        grid-template-columns: 1fr 0.8fr;
        gap: clamp(2rem, 5vw, 4rem);
        align-items: end;
    }
}

/* A treatment menu rather than a wall of photo tiles. His usable photography
   ran to seven frames, and a typographic index is the stronger answer anyway:
   it shows the whole range at once, which is what actually sells a clinic. */
.menu {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 52rem) {
    .menu {
        grid-template-columns: repeat(3, 1fr);
    }
}

.menu__group h3 {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    font-size: var(--step-3);
}

.menu__group h3::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: var(--brass-500);
}

.menu__list li {
    border-bottom: 1px solid var(--ink-600);
}

.menu__list span,
.menu__list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.95rem;
    font-size: var(--step-0);
    color: var(--bone-200);
    transition:
        color 0.45s var(--ease-out-quint),
        padding-left 0.6s var(--ease-out-expo);
}

.menu__list a:hover {
    color: var(--brass-300);
    padding-left: 0.5rem;
}

.menu__tag {
    flex: 0 0 auto;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-400);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12. Concerns
   -------------------------------------------------------------------------- */

.concerns {
    background: var(--ink-900);
}

.concerns__grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 52rem) {
    .concerns__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Diagonal drop. Reads as considered rather than as a row of three.
       Uses margin, not translateY: these cards are also `.reveal`, and
       `.reveal.is-in` sets `transform: none`, which silently ate the offset
       the moment the entrance animation finished. */
    .concerns__grid > :nth-child(2) {
        margin-top: clamp(1.5rem, 4vw, 3.5rem);
    }

    .concerns__grid > :nth-child(3) {
        margin-top: clamp(3rem, 8vw, 7rem);
    }
}

.concern {
    position: relative;
    display: grid;
    align-content: end;
    gap: 0.5rem;
    min-height: clamp(18rem, 34vw, 26rem);
    padding: clamp(1.4rem, 3vw, 2rem);
    overflow: hidden;
    border-radius: 1px;
    isolation: isolate;
}

.concern img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.5);
    transition:
        transform 1.3s var(--ease-out-expo),
        filter 0.9s var(--ease-out-quint);
}

.concern::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklch, var(--overlay) 58%, transparent);
}

.concern:hover img {
    transform: scale(1.025);
    filter: grayscale(0.15);
}

.concern h3 {
    font-size: var(--step-3);
}

.concern p {
    font-size: var(--step--1);
    color: var(--bone-300);
}

/* Hair has no usable photograph, so it becomes the type card. Breaking one of
   three on purpose reads as composition; faking it with a stock image would
   read as stock. */
.concern--type {
    background: var(--ink-700);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass-400) 32%, transparent);
}

.concern--type::before {
    display: none;
}

/* Extra bottom room so the dropped third card never collides with the next
   section. */
@media (min-width: 52rem) {
    .concerns {
        padding-bottom: calc(var(--section-y) + clamp(3rem, 8vw, 7rem));
    }
}

/* --------------------------------------------------------------------------
   13. Press
   -------------------------------------------------------------------------- */

.press {
    padding-block: clamp(3rem, 7vh, 5rem);
    background: var(--ink-800);
    border-top: 1px solid var(--ink-600);
}

.press__inner {
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
}

.press__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.75rem, 5vw, 4.5rem);
}

.press img {
    height: clamp(1.2rem, 2.6vw, 1.9rem);
    width: auto;
    filter: grayscale(1);
    opacity: 0.5;
    transition: opacity 0.5s var(--ease-out-quint);
}

.press li:hover img {
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   14. Consultation + location
   -------------------------------------------------------------------------- */

.consult {
    position: relative;
    background: var(--ink-900);
}

.consult__grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 62rem) {
    .consult__grid {
        grid-template-columns: 1fr 0.85fr;
        align-items: start;
    }
}

.consult__copy {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

.steps {
    display: grid;
    gap: 1.5rem;
    margin-top: 0.75rem;
    counter-reset: step;
}

.steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: start;
    counter-increment: step;
}

.steps li::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1;
    color: var(--brass-400);
}

.steps h3 {
    margin-bottom: 0.25rem;
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--bone-100);
}

.steps p {
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--bone-300);
}

.contact-card {
    display: grid;
    gap: 1.75rem;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: var(--ink-700);
    border: 1px solid var(--ink-600);
    border-radius: 1px;
    box-shadow: 0 2rem 4rem -3rem rgb(23 20 15 / 24%);
}

.contact-card dl {
    display: grid;
    gap: 1.25rem;
    margin: 0;
}

.contact-card dt {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.contact-card dd {
    margin: 0.3rem 0 0;
    font-size: var(--step-0);
    line-height: 1.5;
    color: var(--bone-100);
}

.contact-card dd a {
    border-bottom: 1px solid color-mix(in srgb, var(--brass-400) 45%, transparent);
    transition: border-color 0.4s var(--ease-out-quint), color 0.4s var(--ease-out-quint);
}

.contact-card dd a:hover {
    color: var(--brass-300);
    border-color: var(--brass-300);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    padding-block: clamp(3.5rem, 8vh, 6rem) 2.5rem;
    background: var(--ink-900);
    border-top: 1px solid var(--ink-600);
    overflow: hidden;
}

/* Top band. One line saying the thing that matters, and the two ways to act
   on it, before the link tables begin. */
.footer__top {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1.5rem;
    align-items: center;
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
    margin-bottom: clamp(2.5rem, 6vh, 4rem);
    border-bottom: 1px solid var(--ink-600);
}

@media (min-width: 52rem) {
    .footer__top {
        grid-template-columns: 1fr auto;
        gap: 3rem;
    }
}

.footer__cta-line {
    margin-top: 0.6rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.15;
    color: var(--bone-100);
    max-width: 22ch;
}

.footer__cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
}

.footer__grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
}

/* Brand column, then the three treatment groups, then the clinic column.
   Five tracks on a wide screen, because the treatment lists are what the
   footer is for. */
@media (min-width: 46rem) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 68rem) {
    .footer__grid {
        grid-template-columns: 1.5fr repeat(4, 1fr);
        gap: clamp(2rem, 3vw, 3.25rem);
    }
}

.footer__brand img {
    height: 2.2rem;
    width: auto;
    margin-bottom: 1.25rem;
}

.footer__strap {
    max-width: 24ch;
    margin-bottom: 1.5rem;
    font-size: var(--step--1);
    color: var(--bone-300);
}

.footer__addr {
    margin-bottom: 1.5rem;
    font-style: normal;
    font-size: var(--step--1);
    line-height: 1.7;
}

.footer__addr a {
    color: var(--bone-200);
    transition: color 0.4s var(--ease-out-quint);
}

.footer__addr a:hover,
.footer__addr a:focus-visible {
    color: var(--brass-300);
}

.footer__contact {
    padding-top: 1.25rem;
    border-top: 1px solid var(--ink-600);
}

/* A group heading that is also the link to that group's hub. */
.footer h3 a {
    color: inherit;
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s var(--ease-out-quint);
}

.footer h3 a:hover,
.footer h3 a:focus-visible {
    border-bottom-color: currentColor;
}

.footer__col .footer__list {
    gap: 0.5rem;
}

/* On a phone the grid is a single column, so 25 treatment links stacked one
   per row ran the footer to 2,924px, about three and a half screens of it.
   Two columns halves that without hiding anything behind an accordion, so
   every link stays visible to a reader and to a crawler. */
@media (max-width: 45.999rem) {
    .footer__col .footer__list {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem 1.25rem;
    }
}

.footer h3 {
    margin-bottom: 1.1rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brass-400);
}

.footer__list {
    display: grid;
    gap: 0.65rem;
}

.footer__list a,
.footer__list span {
    font-size: var(--step--1);
    color: var(--bone-300);
    transition: color 0.4s var(--ease-out-quint);
}

.footer__list a:hover {
    color: var(--brass-300);
}

/* Areas. A full-width row rather than a sixth column: the labels are long and
   there are eight of them, so they read better wrapping across the width. */
.footer__areas {
    position: relative;
    z-index: 2;
    margin-top: clamp(2.5rem, 6vh, 4rem);
    padding-top: clamp(2rem, 4vh, 2.75rem);
    border-top: 1px solid var(--ink-600);
}

/* Fixed columns, not auto-fit. On a wide screen auto-fit chose seven tracks
   for eight areas, so one sat alone on a second row with six empty cells
   beside it. Four columns takes the same eight and lands two full rows. */
.footer__areas ul {
    display: grid;
    gap: 0 clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 52rem) {
    .footer__areas ul {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* align-items: start, not baseline. "South Kensington" wraps onto two lines,
   and with baseline alignment its distance stayed up on the first line while
   the rule beneath it sat lower than every neighbour's. A minimum height keeps
   every cell the same depth whether its name wraps or not. */
.footer__areas a {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.4rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid transparent;
    font-size: var(--step--1);
    line-height: 1.3;
    transition: color 0.4s var(--ease-out-quint), border-color 0.4s var(--ease-out-quint);
}

/* The measured distance, which is the useful part of this row. */
.footer__areas a span {
    flex: 0 0 auto;
    padding-top: 0.15rem;
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0;
    opacity: 0.72;
    font-variant-numeric: lining-nums tabular-nums;
}

.footer__areas a:hover,
.footer__areas a:focus-visible {
    color: var(--brass-300);
}

.footer__base {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(2.5rem, 6vh, 4rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--ink-600);
    font-size: 0.78rem;
    color: var(--bone-400);
}

.footer__reg {
    flex: 1 1 20rem;
    text-align: center;
}

@media (max-width: 52rem) {
    .footer__reg {
        text-align: left;
    }
}

/* The limits of what a website can say, on every page. */
.footer__note {
    position: relative;
    z-index: 2;
    max-width: 76ch;
    margin-top: 1.75rem;
    font-size: 0.74rem;
    line-height: 1.7;
    color: var(--bone-400);
}

/* --------------------------------------------------------------------------
   Area pages and the glossary
   -------------------------------------------------------------------------- */

/* Map beside the written directions. The map is the bigger of the two because
   it is the thing someone scans first. */
.area__map-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .area__map-grid {
        grid-template-columns: 1.35fr 1fr;
    }
}

.area__stations {
    display: grid;
    margin: 1.5rem 0;
}

.area__stations-head {
    margin-bottom: 0.4rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.area__stations div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--ink-600);
}

.area__stations dt {
    font-size: 0.88rem;
    color: var(--bone-200);
}

.area__stations dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-0);
    color: var(--brass-300);
}

/* Every treatment, grouped, on every area page. */
.area__treatments {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(2rem, 4vh, 3rem);
}

@media (min-width: 52rem) {
    .area__treatments {
        grid-template-columns: repeat(3, 1fr);
    }
}

.area__treatments h3 {
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--brass-400);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-400);
}

.area__treatments h3 a {
    color: inherit;
}

.area__treatments ul {
    display: grid;
    gap: 0.15rem;
}

/* The price list. The first version set both the name and the figure at
   0.9rem, with the figure in --brass-400 on pale paper, and the rows 0.5rem
   apart. It was a wall of small type and the prices were the hardest part of
   it to read, which is the wrong way round on a page where the price is what
   someone came for. */
.area__treatments li a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.85rem 0.75rem;
    margin-inline: -0.75rem;
    border-bottom: 1px solid var(--ink-600);
    border-radius: 1px;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--bone-100);
    transition: background-color 0.35s var(--ease-out-quint), color 0.35s var(--ease-out-quint);
}

.area__treatments li a:hover,
.area__treatments li a:focus-visible {
    background: color-mix(in srgb, var(--brass-400) 9%, transparent);
    color: var(--brass-300);
}

/* The figure is the thing being scanned, so it is the largest type in the row
   and it sits in the darker brass, which carries far more contrast on paper
   than --brass-400 did. */
.area__treatments li a span {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--brass-300);
    /* Cormorant's default figures are old style, so 5,000 sits with the 5 and
       the 0s at different heights. Lining, tabular figures are uniform and
       line up down the column, which is what a price list needs. */
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* A dotted leader between the name and the figure, so the eye tracks across a
   long row without losing the line. */
.area__treatments li a::after {
    content: '';
    order: 1;
    flex: 1 1 auto;
    height: 0;
    margin-bottom: 0.3rem;
    border-bottom: 1px dotted var(--ink-500);
    opacity: 0.7;
}

.area__treatments li a span {
    order: 2;
}

/* Treatments he prices only at consultation. Without this the row ran a dotted
   leader out to nothing, which reads as a missing price rather than a
   deliberate one. */
.area__treatments li a span.on-plan {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone-400);
}

/* The other seven areas, so every area page reaches every other. */
.area__others {
    display: grid;
    gap: 0.75rem clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
}

.area__others a {
    display: grid;
    gap: 0.2rem;
    padding-block: 0.85rem;
    border-top: 1px solid var(--ink-600);
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--bone-100);
    transition: color 0.4s var(--ease-out-quint);
}

.area__others a:hover,
.area__others a:focus-visible {
    color: var(--brass-300);
}

.area__others a span {
    font-family: var(--font-body);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: var(--bone-400);
}

.area__head {
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
}

.area__head .lede {
    margin-top: 1.25rem;
}

.area__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    border: 1px solid var(--ink-600);
    background: var(--ink-700);
    margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
}

.area__facts div {
    padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
    border-right: 1px solid var(--ink-600);
}

.area__facts div:last-child {
    border-right: 0;
}

.area__facts dt {
    margin-bottom: 0.4rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.area__facts dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.1;
    color: var(--brass-300);
}

.area__facts small {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-body);
    font-size: 0.74rem;
    letter-spacing: 0;
    color: var(--bone-400);
}

.area__cols {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 52rem) {
    .area__cols {
        grid-template-columns: 1.2fr 1fr;
    }
}

.area__addr {
    font-style: normal;
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--bone-100);
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Locator map

   Leaflet with OpenStreetMap tiles. The tiles are the only third-party request
   on the page and they carry no cookie, so there is nothing to consent to.
   Markers are drawn by Leaflet in the brand colours read off these tokens, so
   changing a token changes the map too.
   -------------------------------------------------------------------------- */

.locmap {
    margin: 0;
}

.locmap__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ink-600);
    border-radius: 1px;
    background: var(--ink-800);
    box-shadow: 0 1.75rem 3.5rem -3rem rgb(23 20 15 / 26%);
}

.locmap__canvas {
    width: 100%;
    height: clamp(20rem, 46vh, 30rem);
    background: var(--ink-800);
}

/* Everything the map says, in words. Visible until the map is built, so a
   reader with no JavaScript and a crawler both get the facts. */
.locmap__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    max-width: 44ch;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--bone-200);
    pointer-events: none;
}

.locmap__canvas.is-ready + .locmap__fallback {
    display: none;
}

.locmap__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: 1.5rem;
}

.locmap figcaption {
    margin-top: 1.25rem;
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--bone-400);
}

/* Leaflet's own furniture, brought into the brand. */
.locmap .leaflet-container {
    font-family: var(--font-body);
    background: var(--ink-900);
}

.locmap .leaflet-control-attribution {
    background: color-mix(in srgb, var(--ink-700) 88%, transparent);
    font-size: 10px;
    color: var(--bone-300);
}

.locmap .leaflet-control-attribution a {
    color: var(--brass-300);
}

.locmap .leaflet-control-zoom a {
    background: var(--ink-700);
    border-color: var(--ink-600);
    color: var(--bone-100);
}

.locmap .leaflet-control-zoom a:hover {
    background: var(--ink-800);
    color: var(--brass-300);
}

.locmap .leaflet-popup-content-wrapper {
    border-radius: 1px;
    background: var(--ink-700);
    color: var(--bone-200);
    box-shadow: 0 1rem 2.5rem -1rem rgb(23 20 15 / 34%);
}

.locmap .leaflet-popup-content {
    margin: 0.85rem 1.1rem;
    font-size: 0.84rem;
    line-height: 1.55;
}

.locmap .leaflet-popup-content strong {
    font-family: var(--font-display);
    font-size: var(--step-0);
    color: var(--bone-100);
}

.locmap .leaflet-popup-content a {
    color: var(--brass-300);
    border-bottom: 1px solid color-mix(in srgb, var(--brass-400) 45%, transparent);
}

.locmap .leaflet-popup-tip {
    background: var(--ink-700);
}

.areas__list {
    display: grid;
}

.areas__list > div {
    display: grid;
    gap: 0.3rem 2rem;
    padding-block: 1.4rem;
    border-top: 1px solid var(--ink-600);
}

.areas__list > div:last-child {
    border-bottom: 1px solid var(--ink-600);
}

@media (min-width: 52rem) {
    .areas__list > div {
        grid-template-columns: 14rem 7rem 1fr;
        align-items: baseline;
    }
}

.areas__list dt a {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--bone-100);
    transition: color 0.4s var(--ease-out-quint);
}

.areas__list dt a:hover,
.areas__list dt a:focus-visible {
    color: var(--brass-300);
}

.areas__list dd {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--bone-300);
}

.areas__dist {
    font-family: var(--font-display);
    font-size: var(--step-0);
    color: var(--brass-300);
}

/* A to Z jump strip. */
.atoz {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--ink-600);
}

.atoz a {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--ink-600);
    border-radius: 1px;
    font-family: var(--font-display);
    font-size: var(--step-0);
    color: var(--bone-200);
    transition: color 0.4s var(--ease-out-quint), border-color 0.4s var(--ease-out-quint);
}

.atoz a:hover,
.atoz a:focus-visible {
    color: var(--brass-300);
    border-color: var(--brass-400);
}

.gloss {
    margin-bottom: clamp(2rem, 4vh, 3rem);
    scroll-margin-top: calc(var(--header-h) + 2rem);
}

.gloss__letter {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1;
    color: var(--brass-400);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ink-600);
}

.gloss__item {
    display: grid;
    gap: 0.5rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--ink-600);
    scroll-margin-top: calc(var(--header-h) + 2rem);
}

@media (min-width: 52rem) {
    .gloss__item {
        grid-template-columns: 16rem 1fr;
        gap: 0.5rem 2.5rem;
    }

    .gloss__item h3 {
        grid-row: span 2;
    }
}

.gloss__item h3 {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--bone-100);
}

.gloss__item p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--bone-200);
}

.gloss__see {
    font-size: 0.8rem;
    color: var(--bone-400);
}

.gloss__see a {
    color: var(--brass-300);
    transition: color 0.4s var(--ease-out-quint);
}

.gloss__see a:hover,
.gloss__see a:focus-visible {
    color: var(--bone-100);
}

/* --------------------------------------------------------------------------
   16. Reveal choreography
   One orchestrated entrance per section, staggered. transform + opacity only.
   -------------------------------------------------------------------------- */

/* Slower and shorter travel than a normal site. Content should settle, not
   arrive. */
.reveal {
    opacity: 0;
    transform: translateY(1.15rem);
    transition:
        opacity 1.4s var(--ease-out-quint),
        transform 1.5s var(--ease-out-expo);
    transition-delay: var(--d, 0ms);
}

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

/* Without JS nothing should ever stay invisible. */
.no-js .reveal {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

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

    .concerns__grid > :nth-child(2),
    .concerns__grid > :nth-child(3) {
        margin-top: 0;
    }
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 61.99rem) {
    :root {
        --header-h: 4.5rem;
    }

    .nav,
    .header-cta {
        display: none;
    }

    .burger,
    .header-call {
        display: grid;
    }

    /* The two buttons belong together on the right. With space-between and the
       navigation hidden, the call button floated into the middle of the bar. */
    .header-call {
        margin-left: auto;
    }

    .site-header__inner {
        gap: 0.6rem;
    }

    .flagship__media::before {
        display: none;
    }
}

@media (min-width: 62rem) {
    .drawer {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   18. Mega menu
   -------------------------------------------------------------------------- */

.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.4rem);
}

.nav__item {
    position: static;
}

/* The panel spans the viewport, so it is anchored to the header rather than to
   the list item. `position: static` on the item is what lets that work. */
.mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 90;
    padding-block: clamp(2rem, 4vh, 3rem) clamp(2.5rem, 5vh, 3.5rem);
    background: color-mix(in srgb, var(--ink-900) 97%, transparent);
    backdrop-filter: blur(18px) saturate(130%);
    border-top: 1px solid color-mix(in srgb, var(--brass-400) 20%, transparent);
    box-shadow: 0 1.5rem 3rem -1.5rem rgb(23 20 15 / 20%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.6rem);
    transition:
        opacity 0.5s var(--ease-out-quint),
        transform 0.7s var(--ease-out-expo),
        visibility 0s linear 0.7s;
}

/* Hover for pointers, focus-within so a keyboard can tab straight in. */
.nav__item--mega:hover .mega,
.nav__item--mega:focus-within .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.mega__inner {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 78rem) {
    .mega__inner {
        grid-template-columns: repeat(3, 1fr) 15rem;
    }
}

.mega__head {
    display: block;
    padding-bottom: 0.75rem;
    margin-bottom: 0.9rem;
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--bone-100);
    border-bottom: 1px solid color-mix(in srgb, var(--brass-400) 30%, transparent);
    transition: color 0.5s var(--ease-out-quint);
}

.mega__head:hover {
    color: var(--brass-300);
}

.mega__col ul {
    display: grid;
    gap: 0.1rem;
}

.mega__col li a {
    display: block;
    padding-block: 0.3rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--bone-300);
    transition:
        color 0.45s var(--ease-out-quint),
        padding-left 0.6s var(--ease-out-expo);
}

.mega__col li a:hover {
    color: var(--brass-300);
    padding-left: 0.35rem;
}

.mega__feature {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 13rem;
    padding: 1.1rem;
    overflow: hidden;
    border-radius: 1px;
    isolation: isolate;
    box-shadow: inset 0 0 0 1px var(--ink-600);
}

.mega__feature img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.5);
    transition: transform 1.2s var(--ease-out-expo);
}

.mega__feature::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklch, var(--overlay) 56%, transparent);
}

.mega__feature:hover img {
    transform: scale(1.05);
}

.mega__feature-body {
    display: grid;
    gap: 0.3rem;
}

.mega__feature-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--brass-400);
}

.mega__feature-title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1;
    color: var(--bone-100);
}

.mega__feature-note {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--bone-300);
}

/* --------------------------------------------------------------------------
   19. Breadcrumbs and inner pages
   -------------------------------------------------------------------------- */

.crumbs {
    padding-top: calc(var(--header-h) + 1.75rem);
    padding-bottom: 0.25rem;
    background: var(--ink-800);
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.8rem;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.crumbs li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.crumbs li + li::before {
    content: '';
    width: 1rem;
    height: 1px;
    background: color-mix(in srgb, var(--brass-500) 60%, transparent);
}

.crumbs a {
    transition: color 0.5s var(--ease-out-quint);
}

.crumbs a:hover {
    color: var(--brass-300);
}

.crumbs [aria-current='page'] {
    color: var(--bone-200);
}

/* An inner page has no hero, so its first section clears the fixed header
   itself. Where a breadcrumb precedes it, that clearance is already spent. */
.page-head {
    padding-top: calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem));
    background: var(--ink-800);
}

.crumbs + .page-head {
    padding-top: clamp(2rem, 5vh, 3.5rem);
}

.page-head__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .page-head__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.page-head__body {
    display: grid;
    gap: 1.35rem;
    align-content: start;
}

.section--tight {
    padding-top: clamp(2rem, 5vh, 3.5rem);
}

.related {
    background: var(--ink-900);
}

.related__list {
    columns: 2;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

@media (min-width: 62rem) {
    .related__list {
        columns: 3;
    }
}

.related__list li {
    break-inside: avoid;
}

/* Sibling treatments as cards. A word list told someone weighing up a £5,000
   procedure nothing about the alternative sat next to it. */
/* Explicit columns, not auto-fit. Auto-fit picked five tracks for six cards
   and left the sixth alone on its own row with four empty slots beside it.
   Three columns takes the same six and lands two tidy rows. */
.sibs {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    margin-top: clamp(2rem, 4vh, 3rem);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 62rem) {
    .sibs {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sibs a {
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

/* Every photograph in a card or band gets the same flat scrim and signature. */
.sibs__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1px;
    background: var(--ink-600);
}

.sibs__media::before,
.area__band-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: color-mix(in oklch, var(--overlay) 16%, transparent);
    transition: opacity 0.7s var(--ease-out-quint);
}

.sibs__media::after,
.area__band-media::after {
    content: '';
    position: absolute;
    right: clamp(0.7rem, 2vw, 1.15rem);
    bottom: clamp(0.55rem, 1.6vw, 0.9rem);
    z-index: 2;
    width: clamp(3.6rem, 8vw, 5.25rem);
    aspect-ratio: 224 / 91;
    pointer-events: none;
    background: url('/sites/drsultan/img/logo.webp?v=3') no-repeat center / contain;
    filter: brightness(0) invert(1);
    opacity: 0.82;
}

/* The scrim lifts a little on hover, so the picture comes forward. */
.sibs a:hover .sibs__media::before,
.sibs a:focus-visible .sibs__media::before {
    opacity: 0.72;
}

.sibs__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: saturate(0.82) contrast(1.03);
    transition: transform 1.1s var(--ease-out-quint), filter 0.7s var(--ease-out-quint);
}

.sibs a:hover .sibs__media img,
.sibs a:focus-visible .sibs__media img {
    transform: scale(1.045);
    filter: saturate(0.95) contrast(1.05);
}

.sibs__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--bone-100);
    transition: color 0.4s var(--ease-out-quint);
}

.sibs a:hover .sibs__name,
.sibs a:focus-visible .sibs__name {
    color: var(--brass-300);
}

.sibs__note {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--bone-300);
}

/* --------------------------------------------------------------------------
   20. Drawer additions for the mega menu
   -------------------------------------------------------------------------- */

.drawer__inner {
    display: grid;
    align-content: start;
    gap: 2rem;
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
    padding-top: calc(var(--header-h) + 1rem);
}

.drawer__nav {
    display: grid;
}

/* Every row gets the same treatment, with the arrow only appearing on the one
   being touched. */
.drawer__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.95rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.15;
    color: var(--bone-100);
    border-bottom: 1px solid var(--ink-600);
}

.drawer__arw {
    font-size: 0.9rem;
    color: var(--brass-400);
    opacity: 0;
    transform: translateX(-0.4rem);
    transition: opacity 0.4s var(--ease-out-quint), transform 0.4s var(--ease-out-quint);
}

.drawer__link:hover .drawer__arw,
.drawer__link:focus-visible .drawer__arw,
.drawer__link:active .drawer__arw {
    opacity: 1;
    transform: none;
}

/* The treatment groups. They were 0.7rem uppercase chips with stub underlines
   that read as an afterthought; they are now proper rows with a count, inset
   so they clearly belong to Treatments above them. */
.drawer__subs {
    display: grid;
    margin: 0 0 0.5rem 1rem;
    padding-left: 1rem;
    border-left: 1px solid color-mix(in srgb, var(--brass-400) 34%, transparent);
}

.drawer__subs a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bone-200);
    border-bottom: 0;
}

.drawer__count {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--brass-400);
    font-variant-numeric: lining-nums;
}

.drawer__foot {
    display: grid;
    gap: 1.5rem;
}

/* The button was 26rem wide inside a 24.4rem panel on a 390px screen, so it
   was clipped at the right edge. */
.drawer .btn {
    margin: 0;
    justify-self: stretch;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.drawer__contact {
    display: grid;
    gap: 0.25rem;
}

.drawer__contact a {
    display: grid;
    gap: 0.15rem;
    padding-block: 0.75rem;
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--bone-100);
    border-bottom: 1px solid var(--ink-600);
}

.drawer__contact-label {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brass-400);
}

.drawer__where {
    font-style: normal;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--bone-300);
}

/* Onward links added when the treatments and concerns sections stopped being
   dead text and became entry points into the treatment tree. */
.menu__all {
    margin-top: 1.25rem;
}

.menu__group h3 a:hover,
.menu__group h2 a:hover {
    color: var(--brass-300);
}

.concern__link {
    margin-top: 0.75rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brass-300);
}

/* Whole-card target, so the heading and the copy are clickable too. */
.concern__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* The mega panel sits inside .nav, so it inherits the uppercase and the 0.28em
   tracking meant for five top-level items. A list of 25 treatment names must
   not be set that way. Reset it here rather than loosening .nav a. */
.mega a {
    text-transform: none;
    letter-spacing: 0;
}

.mega__head {
    font-weight: 300;
    letter-spacing: -0.005em;
}

.mega__feature-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

.mega__feature-title {
    text-transform: none;
    letter-spacing: -0.01em;
}

/* Underline the open trigger so it is obvious which item the panel belongs to. */
.nav__item--mega:hover > a,
.nav__item--mega:focus-within > a {
    color: var(--bone-100);
}

.nav__item--mega:hover > a::after,
.nav__item--mega:focus-within > a::after {
    transform: scaleX(1);
}

/* `.nav a` is 0,1,1 and `.mega__head` is 0,1,0, so the nav's 0.68rem was
   winning and the column headings rendered tiny. Raise the specificity rather
   than reach for !important. */
.mega .mega__head {
    font-size: var(--step-1);
}

.mega .mega__feature-title {
    font-size: var(--step-2);
}

.mega .mega__feature-eyebrow {
    font-size: 0.62rem;
}

.mega .mega__feature-note {
    font-size: 0.76rem;
}

/* --------------------------------------------------------------------------
   21. Treatment page
   -------------------------------------------------------------------------- */

.treat__intro {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

@media (min-width: 62rem) {
    .treat__intro {
        grid-template-columns: 1fr 1fr;
    }
}

/* His treatment photographs are wide bands cropped out of video posters, so
   they are framed as a band rather than forced into a portrait slot. */
.treat__figure {
    margin: 0;
    overflow: hidden;
    border-radius: 1px;
    box-shadow: 0 1.5rem 3rem -2rem rgb(23 20 15 / 22%);
}

.treat__figure img {
    width: 100%;
    height: 100%;
    min-height: 14rem;
    object-fit: cover;
    filter: saturate(0.85) contrast(1.04);
}

.treat__cols {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .treat__cols {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }
}

/* The column fills its grid track. It used to be capped at 60ch, which left
   about 190px of its own track unused on top of the grid gap, and that is what
   turned the space beside the rail into a canyon. The reading measure is now
   applied to the prose itself, so paragraphs stay comfortable while the tabs,
   the suitability grid, the comparison and the photograph use the full width
   they were designed for. */
.treat__main {
    display: grid;
    gap: clamp(2.5rem, 5vh, 3.75rem);
    min-width: 0;
}

.treat__block > p {
    max-width: 62ch;
}

.treat__block {
    display: grid;
    gap: 1rem;
}

.treat__block h2 {
    margin-bottom: 0.35rem;
}

/* `.section` sets `overflow: hidden` to stop decorative elements scrolling the
   page sideways. That also makes the section a scroll container, and a scroll
   container ends `position: sticky` for everything inside it, so the rail sat
   still and the right-hand side of the page was blank from roughly the
   suitability block to the footer.

   `overflow: clip` clips exactly the same way without creating a scroll
   container, so the rail sticks and nothing can scroll sideways. */
.treat__detail {
    overflow: clip;
}

/* The header is fixed, so a jump link would otherwise drop its target
   underneath it. */
.treat__block[id],
#book {
    scroll-margin-top: calc(var(--header-h) + 2rem);
}

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

@media (min-width: 62rem) {
    .treat__rail {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
        /* A short laptop viewport would otherwise cut the booking button off
           the bottom of a rail taller than the screen. */
        max-height: calc(100vh - var(--header-h) - 3rem);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* Named `side`, not `rail`. `.rail` is the homepage accreditation strip a
   thousand lines above: it paints --ink-900 and sets `.rail img` to 1.9rem tall
   at 42% opacity, which is what greyed this block out and faded his portrait
   the first time round. */
/* --------------------------------------------------------------------------
   Journal
   -------------------------------------------------------------------------- */

.jrnl {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-block: clamp(2rem, 4vh, 3rem);
    border-bottom: 1px solid var(--ink-600);
}

@media (min-width: 46rem) {
    .jrnl {
        grid-template-columns: 20rem 1fr;
        align-items: start;
    }
}

.jrnl__media {
    display: block;
    overflow: hidden;
    border-radius: 1px;
}

.jrnl__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: saturate(0.85) contrast(1.03);
    transition: transform 1.1s var(--ease-out-quint);
}

.jrnl__media:hover img {
    transform: scale(1.04);
}

.jrnl__body h2 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.15;
    margin-bottom: 0.6rem;
}

.jrnl__body h2 a {
    color: var(--bone-100);
    transition: color 0.4s var(--ease-out-quint);
}

.jrnl__body h2 a:hover,
.jrnl__body h2 a:focus-visible {
    color: var(--brass-300);
}

.jrnl__date {
    margin-top: 0.9rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.jrnl__none {
    display: grid;
    gap: 1.75rem;
    justify-items: start;
    max-width: 52ch;
    padding-block: clamp(1rem, 3vh, 2rem);
}

.jrnl__pages {
    margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   Byline and medical note

   Both exist because these are health pages about procedures costing
   thousands of pounds. Google's helpful-content guidance asks whether a page
   carries a byline where a reader would expect one; on this kind of page they
   do.
   -------------------------------------------------------------------------- */

.byline {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ink-600);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--bone-300);
}

.byline img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.byline a {
    color: var(--bone-100);
    border-bottom: 1px solid color-mix(in srgb, var(--brass-400) 55%, transparent);
    transition: color 0.4s var(--ease-out-quint);
}

.byline a:hover,
.byline a:focus-visible {
    color: var(--brass-300);
}

.byline__date {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--bone-400);
}

/* Sits at the foot of the detail column. Quiet, but present. */
.medical-note {
    margin-top: 0.5rem;
    padding: 1.1rem 1.25rem;
    border-left: 2px solid var(--brass-400);
    background: color-mix(in srgb, var(--brass-400) 7%, transparent);
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--bone-200);
}

.medical-note strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brass-400);
}

.side {
    display: grid;
    gap: 1.6rem;
    align-content: start;
}

/* On a phone the single-column grid dropped the whole sidebar 6,138px down a
   10,218px page, where a contents list is no use to anybody and the booking
   card just repeated the block underneath it. The contents move to the top and
   work as a jump menu; the booking card goes, because the visit block at the
   foot of the page already carries it. */
@media (max-width: 61.999rem) {
    .treat__rail {
        order: -1;
        margin-bottom: 0.5rem;
    }

    .side__book {
        display: none;
    }

    .side__toc a {
        padding: 0.55rem 0;
    }
}

/* ---- Contents ---- */

.side__head {
    margin-bottom: 0.8rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.side__toc ul {
    display: grid;
    border-top: 1px solid var(--ink-600);
}

.side__toc li {
    border-bottom: 1px solid var(--ink-600);
}

.side__toc a {
    display: block;
    padding: 0.6rem 0;
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--bone-300);
    transition: color 0.4s var(--ease-out-quint);
}

.side__toc a:hover,
.side__toc a:focus-visible {
    color: var(--bone-100);
}

/* Set by the scroll observer in site.js. */
.side__toc a.is-here {
    color: var(--brass-300);
}

/* ---- Booking card ---- */

.side__book {
    display: grid;
    justify-items: start;
    gap: 0.9rem;
    padding: clamp(1.25rem, 2.5vw, 1.6rem);
    background: var(--ink-700);
    border: 1px solid var(--ink-600);
    border-radius: 1px;
    box-shadow: 0 1.75rem 3.5rem -3rem rgb(23 20 15 / 24%);
}

/* Face and name on one line. Stacked, the card ran taller than a laptop
   screen and the booking button fell off the bottom of the sticky area. */
.side__who {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
}

.side__face {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    object-fit: cover;
    filter: saturate(0.9);
}

.side__name {
    font-family: var(--font-display);
    font-size: var(--step-0);
    line-height: 1.2;
    color: var(--bone-100);
}

.side__name span {
    display: block;
    font-family: var(--font-body);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--brass-400);
}

.side__note {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--bone-300);
}

/* Flex, not a float. Floating the figure clipped the top of the pound sign
   against the row's border. */
.side__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0;
    border-top: 1px solid var(--ink-600);
    border-bottom: 1px solid var(--ink-600);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.side__price strong {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brass-300);
}

.side__where {
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.6;
    color: var(--bone-400);
}

/* At 20rem the standard button's tracking pushed "Book a consultation" onto
   two lines. Full width, tighter tracking, one line. */
.btn--full {
    justify-self: stretch;
    width: 100%;
    padding-inline: 1rem;
    text-align: center;
    letter-spacing: 0.14em;
    white-space: nowrap;
}

/* Stacked variant of the facts grid for the narrow rail. */
.facts--stack {
    grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   22. FAQ
   -------------------------------------------------------------------------- */

.faq {
    display: grid;
}

.faq details {
    border-top: 1px solid var(--ink-600);
}

.faq details:last-child {
    border-bottom: 1px solid var(--ink-600);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.1rem;
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--bone-100);
    cursor: pointer;
    list-style: none;
    transition: color 0.45s var(--ease-out-quint);
}

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

.faq summary::after {
    content: '';
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    border-right: 1px solid var(--brass-400);
    border-bottom: 1px solid var(--brass-400);
    transform: rotate(45deg) translate(-0.15rem, -0.15rem);
    transition: transform 0.6s var(--ease-out-expo);
}

.faq details[open] summary::after {
    transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

.faq summary:hover {
    color: var(--brass-300);
}

.faq details p {
    padding-bottom: 1.25rem;
    max-width: 58ch;
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--bone-300);
}


/* --------------------------------------------------------------------------
   23. Type that sits on photography
   These deliberately do not follow the page theme. A concern card and the mega
   feature card put text over an image, so they keep a dark scrim and light
   type on a light page exactly as they did on a dark one.
   -------------------------------------------------------------------------- */

.concern h3,
.mega__feature-title {
    color: var(--on-image);
}

.concern p,
.mega__feature-note {
    color: color-mix(in srgb, var(--on-image) 78%, transparent);
}

.concern__link,
.mega__feature-eyebrow {
    color: var(--brass-200);
}

/* The type card has no photograph behind it, so it follows the page. */
.concern--type h3 {
    color: var(--bone-100);
}

.concern--type p {
    color: var(--bone-300);
}

.concern--type .concern__link {
    color: var(--brass-300);
}

.concern--type {
    background: var(--ink-900);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass-400) 26%, transparent);
}

/* Photographs on paper want less grading than they did on near-black. */
.concern img,
.mega__feature img {
    filter: grayscale(0.15) contrast(1.02);
}

.concern:hover img {
    filter: grayscale(0) contrast(1.03);
}

/* The decorative layer stays flat on paper. */
.mesh::before {
    background: var(--ink-900);
}

/* Footer inverts back to ink and anchors the foot of a long pale page. */
.site-footer {
    background: var(--overlay);
    border-top: 0;
}

/* Keep the footer block colour flat too. */
.site-footer.mesh::before {
    background: var(--overlay);
}

.site-footer .footer__brand img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.site-footer h3 {
    color: var(--brass-200);
}

.site-footer .footer__list a,
.site-footer .footer__list span,
.site-footer .small {
    color: color-mix(in srgb, var(--on-image) 66%, transparent);
}

.site-footer .footer__list a:hover {
    color: var(--brass-200);
}

/* The footer stayed dark when the rest of the site flipped to a light theme,
   so anything inside it has to use --on-image rather than the --bone-* scale.
   Those tokens are now dark text for a pale page: --bone-200 is #3b352c, which
   on this ground is all but invisible. Everything below was written against
   the light scale by mistake and read as a smudge. */

.site-footer .footer__strap,
.site-footer .footer__addr a,
.site-footer .footer__areas a {
    color: color-mix(in srgb, var(--on-image) 66%, transparent);
}

.site-footer .footer__areas a {
    border-bottom-color: color-mix(in srgb, var(--on-image) 12%, transparent);
}

.site-footer .footer__addr a:hover,
.site-footer .footer__addr a:focus-visible,
.site-footer .footer__areas a:hover,
.site-footer .footer__areas a:focus-visible {
    color: var(--brass-200);
    border-bottom-color: color-mix(in srgb, var(--brass-200) 55%, transparent);
}

.site-footer .footer__cta-line {
    color: var(--on-image);
}

.site-footer .footer__note,
.site-footer .footer__reg {
    color: color-mix(in srgb, var(--on-image) 42%, transparent);
}

.site-footer .footer__contact,
.site-footer .footer__areas,
.site-footer .footer__top {
    border-color: color-mix(in srgb, var(--on-image) 16%, transparent);
}

/* The areas row sits outside .footer__grid, so it never picked up the heading
   style the other five columns share and rendered as display serif. */
.site-footer .footer__areas h3 {
    margin-bottom: 1.25rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brass-200);
}

.footer__base {
    border-top-color: color-mix(in srgb, var(--on-image) 16%, transparent);
    color: color-mix(in srgb, var(--on-image) 45%, transparent);
}

/* --------------------------------------------------------------------------
   24. Treatment opener
   The image runs the full width of the viewport under the fixed header, and
   the heading sits beneath it in the paper. Nothing overlays the photograph,
   so there is no scrim to fight and no legibility problem on a light page.
   -------------------------------------------------------------------------- */

.treat__hero {
    position: relative;
    margin: 0;
    background: var(--ink-900);
    overflow: hidden;
}

.treat__hero img {
    width: 100%;
    height: clamp(13rem, 34vh, 24rem);
    object-fit: cover;
    /* Favours the upper part of the frame, which is where the subject sits in
       both the cropped bands and the one full portrait. */
    object-position: 50% 28%;
    filter: saturate(0.9) contrast(1.03);
}

/* Hairline along the bottom edge. */
.treat__hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: var(--brass-500);
}

/* The breadcrumb above already clears the fixed header, so neither the image
   nor the opener beneath it repeats that clearance. */
.treat__hero + .section {
    padding-top: clamp(2rem, 5vh, 3.25rem);
}

.crumbs + .treat__hero {
    margin-top: 1.25rem;
}

.treat__opener .shell {
    max-width: 52rem;
}

.treat__lede {
    margin-top: 1.5rem;
    max-width: 34ch;
}

/* --------------------------------------------------------------------------
   25. Treatment opener, second pass
   Heading came down a step, and the price, the practical facts and the
   registrations all moved above the fold. They were in a rail two screens
   down, which is the wrong place for the first thing anyone wants to know.
   -------------------------------------------------------------------------- */

/* An inner-page H1 does not need homepage-hero scale. */
.treat__h1 {
    margin-top: 1.1rem;
    font-size: var(--step-3);
    max-width: 18ch;
}

.treat__lede {
    margin-top: 1.25rem;
    max-width: 46ch;
    font-size: var(--step-1);
    line-height: 1.45;
}

.treat__quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    margin: 2.25rem 0 0;
    max-width: 46rem;
    background: var(--ink-600);
    border: 1px solid var(--ink-600);
    border-radius: 1px;
    overflow: hidden;
}

.treat__quick div {
    display: grid;
    gap: 0.3rem;
    padding: 1rem 1.15rem;
    background: var(--ink-700);
}

.treat__quick dt {
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.treat__quick dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.1;
    color: var(--brass-300);
}

.treat__quick dd small {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--bone-400);
}

.treat__opener .btn-row {
    margin-top: 1.75rem;
}

.treat__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ink-600);
}

.treat__badges img {
    height: clamp(1.1rem, 2vw, 1.5rem);
    width: auto;
    filter: grayscale(1);
    opacity: 0.4;
    transition: opacity 0.6s var(--ease-out-quint);
}

.treat__badges li:hover img {
    opacity: 0.7;
}

/* The rail keeps the full fact set for treatments that have more than four,
   but it is no longer the only place the price appears. */
.treat__card-head {
    color: var(--brass-400);
}

/* --------------------------------------------------------------------------
   26. Treatment opener, split
   Image on the left, bleeding off the edge of the viewport; heading, price and
   registrations on the right. Same shape as the homepage hero, so a treatment
   page and the homepage read as one site.
   -------------------------------------------------------------------------- */

.treat__split {
    position: relative;
    display: grid;
    background: var(--ink-800);
}

@media (min-width: 62rem) {
    .treat__split {
        grid-template-columns: 0.82fr 1fr;
        align-items: stretch;
    }
}

.treat__split-media {
    position: relative;
    margin: 0;
    min-height: 22rem;
    overflow: hidden;
    background: var(--ink-900);
}

.treat__split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    filter: saturate(0.9) contrast(1.04);
}

/* Hairline down the inside edge so the photograph resolves into the paper
   rather than just stopping. */
@media (min-width: 62rem) {
    .treat__split-media::after {
        content: '';
        position: absolute;
        inset: 0 0 0 auto;
        width: 1px;
        background: var(--brass-500);
    }
}

.treat__split-body {
    display: grid;
    align-content: center;
    gap: 0;
    padding: clamp(2.5rem, 7vh, 4.5rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}

@media (min-width: 62rem) {
    .treat__split-body {
        padding: clamp(3.5rem, 8vh, 6rem) clamp(2.5rem, 6vw, 6rem) clamp(3.5rem, 8vh, 6rem) clamp(2.5rem, 5vw, 4.5rem);
    }
}

/* The split provides its own rhythm, so the shared opener spacing is reset. */
.treat__split-body .treat__h1 {
    max-width: 16ch;
}

.treat__split-body .treat__lede {
    max-width: 40ch;
}

.treat__split-body .treat__quick {
    max-width: none;
}

/* The breadcrumb sits above the split and already clears the fixed header. */
.crumbs + .treat__split {
    margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   27. Split opener, spacing and the block set
   The button was flush against the facts strip because the spacing rule was
   still keyed to .treat__opener after the section was renamed .treat__split.
   -------------------------------------------------------------------------- */

.treat__split-body .treat__quick {
    margin-top: 2.5rem;
}

.treat__split-body .btn-row {
    align-items: center;
    gap: 1.75rem;
    margin-top: 2.25rem;
}

/* Three blocks that fill the column against a tall photograph and answer what
   comes straight after the price. */
.treat__points {
    display: grid;
    gap: 1px;
    margin: 2.75rem 0 0;
    background: var(--ink-600);
    border-top: 1px solid var(--ink-600);
    border-bottom: 1px solid var(--ink-600);
}

@media (min-width: 46rem) {
    .treat__points {
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid var(--ink-600);
        border-radius: 1px;
        overflow: hidden;
    }
}

.treat__points div {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    padding: 1.25rem 1.25rem 1.4rem;
    background: var(--ink-800);
}

.treat__points dt {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.15;
    color: var(--bone-100);
}

.treat__points dd {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--bone-300);
}

/* Registrations carry more weight than a watermark. They were 1.1rem tall at
   40% opacity, which is close to invisible on paper. */
.treat__badges {
    gap: 1.5rem clamp(2rem, 3.5vw, 3.25rem);
    margin-top: 2.5rem;
    padding-top: 2rem;
}

.treat__badges img {
    height: clamp(1.7rem, 3vw, 2.4rem);
    filter: grayscale(1);
    opacity: 0.62;
}

.treat__badges li:hover img {
    opacity: 0.95;
}

/* With three blocks and larger marks in the column, the photograph no longer
   runs away from the content. */
.treat__split-media {
    min-height: 26rem;
}

/* --------------------------------------------------------------------------
   28. Registration marks, evened out
   His five marks range from near-square (GMC, 499x422) to a long banner
   (BCAM, 499x97). A single height makes BCAM enormous and orphans it onto a
   second line. Give each an equal cell and let it fit inside, so they carry
   the same visual weight regardless of their own proportions.
   -------------------------------------------------------------------------- */

.treat__badges {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
    align-items: center;
}

@media (max-width: 34rem) {
    .treat__badges {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 1.5rem;
    }
}

.treat__badges li {
    display: grid;
    place-items: center;
    min-width: 0;
}

.treat__badges img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 2.5rem;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   29. Authority band
   Full-width ink between the opener and the detail. On a pale page a dark band
   is what gives the scroll a rhythm, and it carries the credentials onto every
   treatment page instead of leaving them on the homepage.
   -------------------------------------------------------------------------- */

.authority {
    position: relative;
    padding-block: clamp(3.5rem, 9vh, 6rem);
    background: var(--overlay);
    overflow: hidden;
}

/* Hairline top and bottom. */
.authority::before,
.authority::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--brass-500);
}

.authority::after {
    inset: auto 0 0;
}

.authority__inner {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .authority__inner {
        grid-template-columns: 0.72fr 1fr;
    }
}

.authority__lead {
    display: grid;
    gap: 0.9rem;
    justify-items: start;
}

.authority__lead .eyebrow {
    color: var(--brass-200);
}

.authority__lead h2 {
    color: var(--on-image);
}

.authority__lead p {
    max-width: 34ch;
    font-size: var(--step--1);
    line-height: 1.65;
    color: color-mix(in srgb, var(--on-image) 70%, transparent);
}

.authority__lead .link {
    color: var(--brass-200);
    margin-top: 0.35rem;
}

.authority__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
    margin: 0;
}

@media (min-width: 78rem) {
    .authority__stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.authority__stats div {
    display: grid;
    gap: 0.55rem;
    align-content: start;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--brass-200) 34%, transparent);
}

.authority__stats dt {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    line-height: 1;
    color: var(--brass-200);
}

.authority__stats dt span {
    font-size: 0.55em;
    vertical-align: super;
}

.authority__stats dd {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--on-image) 62%, transparent);
}

/* --------------------------------------------------------------------------
   30. Authority band, softened
   Near-black against warm paper was a hard jump. A deeper shade of the same
   paper still reads as a distinct band, held by the gold hairlines top and
   bottom, without dropping a slab of ink into a pale page.
   -------------------------------------------------------------------------- */

.authority {
    background: #ece4d5;
}

.authority__lead .eyebrow,
.authority__lead .link {
    color: var(--brass-300);
}

.authority__lead h2 {
    color: var(--bone-100);
}

.authority__lead p {
    color: var(--bone-200);
}

.authority__stats div {
    border-top-color: color-mix(in srgb, var(--brass-400) 40%, transparent);
}

.authority__stats dt {
    color: var(--brass-300);
}

.authority__stats dd {
    color: var(--bone-300);
}

/* --------------------------------------------------------------------------
   31. Long-form patient content
   Someone spending five thousand pounds on a medical procedure reads the
   suitability, the day and the recovery more carefully than anything else on
   the page. These are set to be scanned, not admired.
   -------------------------------------------------------------------------- */

/* A second photograph part way down a long page. */
.treat__band {
    margin: 0;
    background: var(--ink-900);
}

.treat__band img {
    width: 100%;
    height: clamp(11rem, 26vh, 18rem);
    object-fit: cover;
    object-position: 50% 34%;
    filter: saturate(0.9) contrast(1.03);
}

.treat__band figcaption {
    padding: 0.9rem var(--gutter) 1.1rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone-400);
    text-align: center;
}

/* Suits / does not suit, side by side. */
.fit {
    display: grid;
    gap: 1px;
    margin-top: 0.5rem;
    background: var(--ink-600);
    border: 1px solid var(--ink-600);
    border-radius: 1px;
    overflow: hidden;
}

@media (min-width: 46rem) {
    .fit {
        grid-template-columns: 1fr 1fr;
    }
}

.fit__col {
    padding: 1.35rem 1.5rem 1.6rem;
    background: var(--ink-700);
}

.fit__col h3 {
    margin-bottom: 0.9rem;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.fit__col--yes h3 {
    color: var(--brass-300);
}

.fit__col--no h3 {
    color: var(--bone-400);
}

.fit__col ul {
    display: grid;
    gap: 0.7rem;
}

.fit__col li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--bone-200);
}

.fit__col li::before {
    content: '';
    width: 0.85rem;
    height: 1px;
    background: var(--brass-400);
    transform: translateY(-0.35em);
}

.fit__col--no li::before {
    background: var(--ink-500);
}

/* This or surgery. */
.compare {
    display: grid;
    gap: 1.25rem;
    margin: 0.5rem 0 0;
}

@media (min-width: 46rem) {
    .compare {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem;
    }
}

.compare div {
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--brass-400) 45%, transparent);
}

.compare dt {
    margin-bottom: 0.45rem;
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--bone-100);
}

.compare dd {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--bone-300);
}

/* What happens on the day. */
.daylist {
    display: grid;
    gap: 1.6rem;
    margin-top: 0.5rem;
    counter-reset: day;
}

.daylist li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    counter-increment: day;
}

.daylist li::before {
    content: counter(day, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--brass-300);
}

.daylist h3 {
    margin-bottom: 0.3rem;
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--bone-100);
}

.daylist p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--bone-300);
}

/* Aftercare. */
.ticks {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.ticks li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: baseline;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--bone-200);
}

.ticks li::before {
    content: '';
    width: 1rem;
    height: 1px;
    background: var(--brass-400);
    transform: translateY(-0.35em);
}

/* Treatments that work alongside this one. Same two-column shape as the
   recovery timeline, so a treatment page has one table style rather than
   three. */
.pairs {
    display: grid;
    margin: 0.5rem 0 0;
}

.pairs div {
    display: grid;
    gap: 0.2rem 1.5rem;
    padding-block: 0.95rem;
    border-top: 1px solid var(--ink-600);
}

.pairs div:last-child {
    border-bottom: 1px solid var(--ink-600);
}

@media (min-width: 40rem) {
    .pairs div {
        grid-template-columns: 14rem 1fr;
        align-items: baseline;
    }
}

.pairs dt a {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--brass-300);
    transition: color 0.4s var(--ease-out-quint);
}

.pairs dt a:hover,
.pairs dt a:focus-visible {
    color: var(--bone-100);
}

.pairs dd {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--bone-300);
}

/* Recovery, week by week. */
.timeline {
    display: grid;
    margin: 0.5rem 0 0;
}

.timeline div {
    display: grid;
    gap: 0.2rem 1.5rem;
    padding-block: 0.95rem;
    border-top: 1px solid var(--ink-600);
}

.timeline div:last-child {
    border-bottom: 1px solid var(--ink-600);
}

@media (min-width: 40rem) {
    .timeline div {
        grid-template-columns: 9rem 1fr;
        align-items: baseline;
    }
}

.timeline dt {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--brass-300);
}

.timeline dd {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--bone-300);
}

/* --------------------------------------------------------------------------
   32. In-page figure
   Contained, not full-bleed, and at a ratio the source can take. The earlier
   version dropped a portrait into a 6:1 band, which cropped to an ear.
   -------------------------------------------------------------------------- */

.treat__main .treat__figure {
    margin: 0;
    border-radius: 1px;
    overflow: visible;
    box-shadow: none;
}

.treat__main .treat__figure img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 50% 38%;
    border-radius: 1px;
    filter: saturate(0.9) contrast(1.03);
    box-shadow: 0 1.5rem 3rem -2rem rgb(23 20 15 / 30%);
}

.treat__main .treat__figure figcaption {
    padding-top: 0.9rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone-400);
}

/* --------------------------------------------------------------------------
   33. Tabs
   On the day, aftercare and recovery ran to three screens as stacked lists.
   One tabbed panel takes a third of that and lets someone go straight to the
   part they came for.

   Panels default to visible. The script hides all but the active one, so
   without JavaScript the content is all still there.
   -------------------------------------------------------------------------- */

.tabs {
    margin-top: 0.75rem;
}

.tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    border-bottom: 1px solid var(--ink-600);
}

.tabs__list button {
    position: relative;
    padding: 0 0 0.9rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone-400);
    transition: color 0.5s var(--ease-out-quint);
}

.tabs__list button::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px;
    height: 1px;
    background: var(--brass-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--ease-out-expo);
}

.tabs__list button:hover {
    color: var(--bone-200);
}

.tabs__list button[aria-selected='true'] {
    color: var(--bone-100);
}

.tabs__list button[aria-selected='true']::after {
    transform: scaleX(1);
}

.tabs__panel {
    padding-top: 1.75rem;
}

/* Panels stack when the script has not run. Once it has, only one shows and
   the heading of each is redundant. */
.tabs--ready .tabs__panel[hidden] {
    display: none;
}

/* Step list, set as a two-column table rather than a tall stack. */
.steplist {
    display: grid;
    margin: 0;
}

.steplist div {
    display: grid;
    gap: 0.3rem 1.5rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--ink-600);
}

@media (min-width: 46rem) {
    .steplist div {
        grid-template-columns: 14rem 1fr;
        align-items: baseline;
    }
}

.steplist dt {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--bone-100);
}

.steplist__n {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--brass-300);
}

.steplist dd {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--bone-300);
}

.tabs__panel .ticks {
    margin-top: 0;
}

.tabs__panel .timeline div:first-child {
    border-top: 0;
}

.tabs__panel .link {
    margin-top: 1.25rem;
}

/* Full-width photograph on the area pages, between the directions and the
   treatment list. The page was one picture at the top and then all text. */
.area__band {
    margin: 0;
    position: relative;
    overflow: hidden;
}

.area__band-media {
    position: relative;
    display: block;
    overflow: hidden;
}

/* The source is cut at 3:1 for exactly this slot, so the crop here only has
   to trim the last few percent rather than take a band out of the middle. */
.area__band img {
    display: block;
    width: 100%;
    height: clamp(14rem, 34vh, 22rem);
    object-fit: cover;
    object-position: 50% 50%;
    filter: saturate(0.9) contrast(1.03);
}

.area__band figcaption {
    position: relative;
    z-index: 3;
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin: 1rem auto 0;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone-400);
}

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

   The old page was three columns of plain text links, a price on FaceTite and
   nothing on the other 24, above a screen and a half of empty space. Nobody
   choosing between 25 treatments can work from that.
   -------------------------------------------------------------------------- */

/* The three groups, as a way in for somebody who does not know the product
   names. */
.groups {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Only where the next section supplies its own top padding, which is the
   treatments page. Applied globally it pulled the homepage's next heading up
   against the cards. */
.groups--pull {
    margin-bottom: calc(var(--section-y) * -0.45);
}

.groups a {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.groups__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1px;
    background: var(--ink-600);
}

.groups__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(0.85) contrast(1.03);
    transition: transform 1.1s var(--ease-out-quint);
}

.groups a:hover .groups__media img,
.groups a:focus-visible .groups__media img {
    transform: scale(1.045);
}

/* Same scrim and signature as every other photograph on the site. */
.groups__media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: color-mix(in oklch, var(--overlay) 16%, transparent);
}

.groups__media::after {
    content: '';
    position: absolute;
    right: clamp(0.7rem, 2vw, 1.15rem);
    bottom: clamp(0.55rem, 1.6vw, 0.9rem);
    z-index: 2;
    width: clamp(3.6rem, 8vw, 5.25rem);
    aspect-ratio: 224 / 91;
    pointer-events: none;
    background: url('/sites/drsultan/img/logo.webp?v=3') no-repeat center / contain;
    filter: brightness(0) invert(1);
    opacity: 0.82;
}

.groups__body {
    display: grid;
    gap: 0.3rem;
}

.groups__name {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.1;
    color: var(--bone-100);
    transition: color 0.4s var(--ease-out-quint);
}

.groups a:hover .groups__name,
.groups a:focus-visible .groups__name {
    color: var(--brass-300);
}

.groups__count {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.groups__from {
    font-family: var(--font-display);
    font-size: var(--step-0);
    color: var(--brass-300);
    font-variant-numeric: lining-nums;
}

/* The full list. Same card as everywhere else, with a price beside the name so
   25 treatments can actually be compared. */
.sibs--hub {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* A fixed three, for rows that hold exactly six. auto-fit chose four at 1440
   and left two orphans on a second row. */
@media (min-width: 62rem) {
    .sibs--three {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sibs__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.sibs__price {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: var(--step-0);
    color: var(--brass-300);
    font-variant-numeric: lining-nums tabular-nums;
}

.sibs__price--plan {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bone-400);
}


/* --------------------------------------------------------------------------
   Concern pages

   Why it happens beside how you know, because people read those two together
   and reading them stacked makes the page feel longer than it is.
   -------------------------------------------------------------------------- */

.concern__cols {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

@media (min-width: 58rem) {
    .concern__cols {
        grid-template-columns: 1.15fr 1fr;
    }
}

.concern__cols .ticks {
    margin-top: 0;
}


/* ============================================================
   CONTACT
   The form and the direct-contact panel beside it.

   The inputs are deliberately quiet: a hairline underline rather than a boxed
   field, so a page of them does not turn into a stack of grey rectangles on a
   site whose whole character is space and thin rules. The focus state is the
   only place a field gains weight, and it gains it in brass.
   ============================================================ */

.contact {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    margin-top: clamp(2.5rem, 5vh, 4rem);
    align-items: start;
}

@media (min-width: 60rem) {
    .contact {
        grid-template-columns: 1.35fr 0.85fr;
    }
}

/* --- the form ------------------------------------------------ */

.form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__grid {
    display: grid;
    gap: clamp(1.6rem, 3vw, 2.2rem);
}

@media (min-width: 40rem) {
    .form__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.form__field {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

@media (min-width: 40rem) {
    .form__field--wide {
        grid-column: 1 / -1;
    }
}

.form__field label {
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone-300);
}

.form__field label span {
    color: var(--brass-300);
}

.form input[type='text'],
.form input[type='email'],
.form input[type='tel'],
.form select,
.form textarea {
    width: 100%;
    padding: 0.85rem 0.1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--bone-100);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ink-500);
    border-radius: 0;
    transition:
        border-color 0.5s var(--ease-out-expo),
        box-shadow 0.5s var(--ease-out-expo);
    /* Safari rounds inputs and paints its own inner shadow. */
    -webkit-appearance: none;
    appearance: none;
}

.form textarea {
    resize: vertical;
    min-height: 8rem;
    line-height: 1.6;
}

/* A bare select loses its arrow once appearance is stripped. */
.form select {
    padding-right: 1.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%236a6154' stroke-width='1.5'/%3E%3C/svg%3E");
    background-position: right 0.45rem center;
    background-size: 0.75rem 0.5rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
    outline: none;
    border-bottom-color: var(--brass-400);
    box-shadow: 0 1px 0 0 var(--brass-400);
}

.form input::placeholder,
.form textarea::placeholder {
    color: var(--bone-400);
}

.form__hint {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--bone-300);
}

.form__hint a {
    color: var(--brass-300);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.form__err {
    font-size: 0.82rem;
    font-weight: 600;
    color: #8c2f1d;
}

.form__actions {
    gap: 1rem;
    margin-top: 0.5rem;
}

.form__actions .btn {
    justify-self: start;
}

.contact__error a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.contact__error {
    padding: 1rem 1.2rem;
    margin-bottom: 1.8rem;
    font-size: 0.92rem;
    color: #8c2f1d;
    background: color-mix(in srgb, #8c2f1d 8%, var(--ink-800));
    border-left: 2px solid #8c2f1d;
}

.contact__sent {
    padding: clamp(1.8rem, 4vw, 2.6rem);
    background: var(--ink-900);
    border-left: 2px solid var(--brass-400);
}

.contact__sent p {
    margin-bottom: 0.9rem;
}

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

.contact__sent a {
    color: var(--brass-300);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* --- the panel beside it ------------------------------------- */

.contact__aside {
    padding: clamp(1.8rem, 4vw, 2.4rem);
    background: var(--ink-900);
}

.contact__aside .h3 {
    margin-bottom: 1.6rem;
}

.contact__list {
    display: grid;
    gap: 1.35rem;
    margin: 0 0 1.8rem;
}

.contact__list dt {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bone-400);
    margin-bottom: 0.3rem;
}

.contact__list dd {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--bone-100);
}

.contact__list dd a {
    color: var(--bone-100);
    border-bottom: 1px solid var(--brass-500);
    padding-bottom: 0.06em;
    transition: color 0.4s var(--ease-out-expo);
}

.contact__list dd a:hover {
    color: var(--brass-300);
}

.contact__list dd small {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--bone-300);
}

.contact__list dd small a {
    border-bottom-color: var(--brass-500);
    color: var(--bone-300);
}

.contact__note {
    padding-top: 1.4rem;
    border-top: 1px solid var(--ink-600);
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--bone-300);
}


/* ============================================================
   PROSE
   Long-form running text: the privacy notice and anything else that is
   genuinely a document rather than a designed page. Measured column, headings
   that separate rather than shout.
   ============================================================ */

.prose {
    max-width: 44rem;
    margin-top: clamp(2rem, 4vh, 3rem);
}

.prose h2 {
    margin-top: clamp(2.4rem, 5vh, 3.4rem);
    margin-bottom: 0.9rem;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 300;
    line-height: 1.25;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose p {
    margin-bottom: 1.15rem;
    line-height: 1.75;
}

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

.prose a {
    color: var(--bone-100);
    border-bottom: 1px solid var(--brass-500);
    padding-bottom: 0.06em;
    transition: color 0.4s var(--ease-out-expo);
}

.prose a:hover {
    color: var(--brass-300);
}

.prose .ticks,
.prose .pairs {
    margin-top: 1.3rem;
    margin-bottom: 1.6rem;
}

.nowrap {
    white-space: nowrap;
}

/* Pages with no breadcrumb still have to clear the fixed header. Every other
   page gets that from .crumbs; the 404 has no trail to show. */
.section--clears-header {
    padding-top: calc(var(--header-h) + clamp(2rem, 5vh, 3.5rem));
}


/* ============================================================
   FOOTER: CONCERNS ROW
   Sixteen links, grouped face / body / hair, in the same full-width band
   shape as the areas row above it.

   Three columns rather than one list of sixteen: a single column would run
   the height of the whole footer, and a flat sixteen-item grid reads as a
   wall. The groups are the ones Dr Sultan uses himself.
   ============================================================ */

.footer__concerns {
    position: relative;
    z-index: 2;
    margin-top: clamp(2.5rem, 6vh, 4rem);
    padding-top: clamp(2rem, 4vh, 2.75rem);
    border-top: 1px solid var(--ink-600);
}

.footer__concerns-cols {
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.5rem);
    grid-template-columns: 1fr;
    margin-top: 1.4rem;
}

@media (min-width: 40rem) {
    .footer__concerns-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer__concerns-head {
    margin-bottom: 0.7rem;
    font-family: var(--font-body);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--on-image) 46%, transparent);
}


/* ============================================================
   THE FULL-WIDTH MAP ON /areas
   Same partial as the area pages, different frame. On the hub the map is not
   an illustration beside the text, it is the way into the eight area pages, so
   it runs the whole width of the viewport and is tall enough to read.
   ============================================================ */

/* Break out of whatever column this sits in and fill the viewport.

   100vw includes the scrollbar on Windows, which is what makes a naive
   full-bleed rule scroll the page sideways. 100dvw does not, and the fallback
   above it uses the parent's own width so a browser without dvw simply gets a
   contained map rather than a broken page. */
.locmap--full {
    width: 100%;
    margin-inline: 0;
}

@supports (width: 100dvw) {
    .locmap--full {
        width: 100dvw;
        margin-inline: calc(50% - 50dvw);
    }
}

.locmap--full .locmap__frame {
    border-inline: 0;
    border-radius: 0;
}

/* Tall enough for the fit to land on the right zoom. At 68vh the frame was
   612px, and the eight areas need 617px at the zoom that suits them, so
   Leaflet dropped a level and opened on 17km of London instead of 8km. */
.locmap--full .locmap__canvas {
    height: clamp(26rem, 76vh, 48rem);
}

.locmap--full .locmap__actions,
.locmap--full figcaption {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
}

.locmap--full .locmap__fallback {
    max-width: min(52ch, calc(100% - 3rem));
    margin-inline: auto;
}

.locmap--full .locmap__fallback ul {
    margin-top: 0.9rem;
    padding-left: 1.1rem;
}

.locmap--full .locmap__fallback li {
    margin-bottom: 0.35rem;
}

/* --- the key ------------------------------------------------- */

/* Sits on the map rather than under it, because three sizes of dot explained
   two screens away is not an explanation. Top left, which is the one corner
   Leaflet leaves empty: zoom controls take the top left of the CONTROL layer
   but sit inside a 10px inset, and the attribution owns the bottom right. */
.locmap__key {
    position: absolute;
    z-index: 500;
    right: clamp(0.75rem, 2vw, 1.5rem);
    top: clamp(0.75rem, 2vw, 1.5rem);
    padding: 0.9rem 1.1rem;
    background: color-mix(in srgb, var(--ink-700) 94%, transparent);
    border: 1px solid var(--ink-600);
    box-shadow: 0 0.75rem 2rem -1rem rgb(23 20 15 / 34%);
    pointer-events: none;
}

.locmap__key-head {
    margin-bottom: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bone-400);
}

.locmap__key ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.locmap__key li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--bone-200);
}

.locmap__swatch {
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 2px solid var(--ink-700);
}

/* The same three fills the markers use, so the key cannot drift from the map. */
.locmap__swatch--clinic {
    width: 0.95rem;
    height: 0.95rem;
    background: var(--brass-300);
}

.locmap__swatch--area {
    background: var(--brass-400);
}

.locmap__swatch--tube {
    background: var(--ink-800);
    border-color: var(--bone-100);
}

@media (max-width: 32rem) {
    .locmap__key {
        display: none;
    }
}

/* --- hover labels -------------------------------------------- */

.locmap .leaflet-tooltip {
    padding: 0.5rem 0.7rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--bone-100);
    background: var(--ink-700);
    border: 1px solid var(--ink-600);
    border-radius: 1px;
    box-shadow: 0 0.6rem 1.6rem -0.8rem rgb(23 20 15 / 40%);
}

.locmap .leaflet-tooltip strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.2;
}

.locmap .leaflet-tooltip-top::before {
    border-top-color: var(--ink-600);
}

/* The wrapper around the full-width map on /areas. Vertical rhythm only; it
   deliberately sets no overflow, because a .section's overflow: hidden would
   clip Leaflet's zoom controls and popups at the frame edge. */
.areas__map {
    padding-block: clamp(1rem, 3vh, 2rem) clamp(2rem, 5vh, 3.5rem);
}

/* --------------------------------------------------------------------------
   Before and after
   Result images are already assembled comparisons. Never crop them or cover
   them with decorative marks because that can hide the comparison itself.
   -------------------------------------------------------------------------- */

.inner-head {
    padding-block: clamp(4rem, 11vh, 8rem);
    background: var(--ink-900);
}

.inner-head .shell {
    display: grid;
    gap: 1.4rem;
}

.inner-head h1 {
    max-width: 11ch;
}

.inner-head .lede {
    max-width: 42ch;
}

.result-jump {
    position: relative;
    z-index: 4;
    background: var(--ink-700);
    border-block: 1px solid var(--ink-600);
}

.result-jump .shell {
    display: flex;
    flex-wrap: wrap;
}

.result-jump a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--ink-600);
    font-size: 0.74rem;
    color: var(--bone-200);
    transition: background-color 0.45s var(--ease-out-quint), color 0.45s var(--ease-out-quint);
}

.result-jump a:first-child {
    border-left: 1px solid var(--ink-600);
}

.result-jump a span:last-child {
    color: var(--brass-300);
    font-variant-numeric: tabular-nums;
}

.result-jump a:hover,
.result-jump a:focus-visible {
    background: var(--ink-900);
    color: var(--bone-100);
}

.result-group:nth-of-type(even) {
    background: var(--ink-900);
}

.result-group__head,
.treat__results-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.treat__results-head > div {
    display: grid;
    gap: 0.8rem;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
}

.result-grid--treatment {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.result-card {
    display: grid;
    gap: 0.8rem;
    margin: 0;
}

.result-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background: var(--ink-700);
    border: 1px solid var(--ink-600);
}

.result-card figcaption {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--bone-100);
}

.treat__results {
    padding-block: clamp(2rem, 5vh, 3.5rem);
    border-block: 1px solid var(--ink-600);
}

.treat__results > .small {
    margin-top: 1.25rem;
}

@media (max-width: 42rem) {
    .result-group__head,
    .treat__results-head {
        display: grid;
        align-items: start;
    }

    .result-jump .shell {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .result-jump a,
    .result-jump a:first-child {
        justify-content: space-between;
        border-left: 0;
        border-right: 1px solid var(--ink-600);
        border-bottom: 1px solid var(--ink-600);
    }
}