/* Skinglow Clinic, site styles.
   Regine's original, rebuilt: centred compositions, hairlines, pills, one tracked label
   system, her name in script, and the cell-mesh lattice spilling over every hero edge.
   Layers: reset < base < layout < components < pages < utilities. */

@layer reset, base, layout, components, pages, utilities;

/* Cross-document view transitions: a short crossfade between pages, header pinned. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 160ms var(--ease-out) both vt-out;
}

::view-transition-new(root) {
  animation: 240ms var(--ease-out) both vt-in;
}

@keyframes vt-out {
  to { opacity: 0; }
}

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

/* Reset ----------------------------------------------------------------- */

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

  html {
    -webkit-text-size-adjust: 100%;
    /* `only` is what opts out of Chrome's auto-dark; the logo's dark strokes vanish on a dark ground. */
    color-scheme: only light;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    interpolate-size: allow-keywords;
  }

  body {
    margin: 0;
    min-width: 20rem;
    overflow-x: hidden;
  }

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

  button,
  input,
  textarea {
    font: inherit;
  }

  button,
  a,
  summary {
    touch-action: manipulation;
    /* The tap flash takes the surface's own ink instead of Android's blue. */
    -webkit-tap-highlight-color: color-mix(in oklab, var(--ink-local) 18%, transparent);
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }
}

/* Base ------------------------------------------------------------------ */

@layer base {
  body {
    background: var(--paper);
    color: var(--ink-body);
    font-family: var(--f);
    font-size: var(--fs-body);
    font-weight: var(--w-light);
    font-synthesis: none;
    /* Lufga's default g is clipped short; stylistic set 2 gives it a full descender. */
    font-feature-settings: 'ss02' 1;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  main {
    overflow: clip;
  }

  section,
  footer {
    position: relative;
    background: var(--bg-local);
    color: var(--text-local);
    /* Secondary text that still clears 4.5:1 at small sizes, which --ink-muted does not. */
    --text-quiet: color-mix(in oklab, var(--text-local) 80%, transparent);
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    color: var(--ink-local);
    font-weight: var(--w-light);
    letter-spacing: 0;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-display);
    letter-spacing: var(--track-display);
    line-height: var(--lh-display);
  }

  h2 {
    font-size: var(--fs-h2);
    letter-spacing: var(--track-section);
    line-height: var(--lh-section);
  }

  h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-sub);
  }

  h4 {
    font-size: var(--fs-lead);
    line-height: var(--lh-sub);
  }

  p {
    max-width: var(--measure-body);
    margin: 0;
    text-wrap: pretty;
  }

  a {
    color: inherit;
  }

  strong {
    font-weight: var(--w-med);
  }

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

  /* Selection inverts the surface it sits on, so it reads on white and on petrol alike. */
  ::selection {
    background: var(--ink-local);
    color: var(--bg-local);
  }
}

/* Layout ---------------------------------------------------------------- */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

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

  .section--tight {
    padding-block: clamp(3rem, 5vw, 4rem);
  }

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

  .stack > * {
    margin-block: 0;
  }

  .stack > * + * {
    margin-block-start: var(--s3);
  }

  .stack > .label + * {
    margin-block-start: var(--s2);
  }

  .grid {
    display: grid;
    gap: var(--s4);
  }

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

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

  .grid--split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--col-gap);
    align-items: center;
  }

  .grid--split:has(> .card__media:first-child) {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  /* Centred section opener: label, heading, lead, in the original's 750px measure. */
  .section-head {
    display: grid;
    justify-items: center;
    gap: var(--s2);
    max-width: var(--measure);
    margin-inline: auto;
    margin-block-end: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
  }

  .section-head .stack {
    display: contents;
  }

  .section-head .lead {
    margin-block-start: var(--s1);
  }

  /* Any stack asked to sit centred. */
  .centre {
    text-align: center;
  }

  .centre > * {
    margin-inline: auto;
  }

  .centre .lead,
  .centre p {
    max-width: var(--measure);
  }

  .divider {
    width: 100%;
    margin: 0;
    border: 0;
    border-block-start: 1px solid var(--line-local);
  }

  .section-tail {
    max-width: none;
    margin-block-start: var(--s5);
    text-align: center;
  }
}

/* Components ------------------------------------------------------------ */

@layer components {
  /* Type ---------------------------------------------------------------- */

  .display {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
  }

  .display-accent {
    display: block;
    margin-block-start: 0.45em;
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    font-weight: var(--w-light);
    letter-spacing: 0.02em;
    line-height: 1.4;
  }

  .brand-script {
    font-family: var(--f-script);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  .lead {
    max-width: var(--measure-lead);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  .small {
    color: var(--text-local);
    font-size: var(--fs-small);
    line-height: 1.6;
  }

  .label,
  .meta {
    display: block;
    font-size: var(--fs-label);
    line-height: 1.4;
    text-transform: uppercase;
  }

  .label {
    color: var(--label-local);
    font-weight: var(--w-med);
    letter-spacing: var(--track-label);
  }

  .meta {
    color: var(--text-local);
    font-weight: var(--w-med);
    letter-spacing: var(--track-meta);
  }

  /* The "Love notes" role: a label rendered as the signature script. */
  .label--script {
    font-family: var(--f-script);
    font-size: var(--fs-mark-xl);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.9;
    text-transform: none;
  }

  .link {
    position: relative;
    color: var(--ink-local);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color var(--dur) var(--ease-out), background-size var(--dur-2) var(--ease-out);
  }

  .link:hover {
    color: var(--ink-hover);
    background-size: 0% 1px;
  }

  .s-petrol .link:hover,
  .s-inverse .link:hover {
    color: var(--paper);
  }

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

  .prose > * + * {
    margin-block-start: var(--s3);
  }

  .prose .divider {
    margin-block: var(--s5);
  }

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

  /* The plain pill is the primary action and ships filled; .btn--ghost is the quiet one.
     Tinted glass: the surface's button colour over a blurred view of what is behind it, with a
     bright top rim, a highlight on the upper half, light pooled along the base and a soft
     shadow. The petrol pill is 94% colour so its label keeps its contrast; the light pill on
     petrol and on the cookie bar is 84%, which lets the band behind it show through. Hover
     sends one band of light across the face and nothing else moves; press squeezes the pill to
     97% and it eases back. Every colour is mixed from tokens. */
  .btn {
    --btn-rim: color-mix(in oklab, var(--paper) 60%, transparent);
    --btn-pool: color-mix(in oklab, var(--paper) 24%, transparent);
    --btn-drop: color-mix(in oklab, var(--inverse) 24%, transparent);
    --btn-glint: color-mix(in oklab, var(--paper) 70%, transparent);
    --btn-glint-edge: color-mix(in oklab, var(--btn-contrast) 14%, transparent);
    --btn-depth:
      inset 0 1px 0 var(--btn-rim),
      inset 0 -8px 12px -8px var(--btn-pool),
      0 1px 2px var(--btn-drop),
      0 8px 20px -8px var(--btn-drop);
    --btn-depth-press:
      inset 0 1px 0 var(--btn-rim),
      inset 0 -8px 12px -8px var(--btn-pool),
      0 1px 1px var(--btn-drop),
      0 2px 6px -3px var(--btn-drop);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: var(--s1);
    padding: 0.9rem 2rem;
    border: 1px solid color-mix(in oklab, var(--btn-local) 72%, var(--paper));
    border-radius: var(--radius-pill);
    background-color: color-mix(in oklab, var(--btn-local) var(--btn-glass, 94%), transparent);
    background-image: linear-gradient(180deg, color-mix(in oklab, var(--paper) var(--btn-sheen, 16%), transparent), transparent 52%);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
    box-shadow: var(--btn-depth);
    color: var(--btn-contrast);
    cursor: pointer;
    font-size: var(--fs-label);
    font-weight: var(--w-med);
    letter-spacing: var(--track-label);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition:
      box-shadow var(--dur-2) var(--ease-out),
      scale var(--dur-2) var(--ease-out);
  }

  /* The shine: a diagonal band with a bright core, parked off the left edge. Its shoulders are
     tinted with the label colour, so it still reads on the near-white pill of the petrol bands. */
  .btn:not(.btn--text)::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 20%,
        var(--btn-glint-edge) 38%,
        var(--btn-glint) 50%,
        var(--btn-glint-edge) 62%,
        transparent 80%
      )
      no-repeat;
    background-position: -150% 0;
    background-size: 60% 100%;
    content: '';
    pointer-events: none;
  }

  /* Starts with the bright core already on the left edge and at a constant speed, so the shine is
     there the instant the pointer arrives rather than a beat later. */
  .btn:not(.btn--text):hover::after {
    animation: btn-shine 750ms linear both;
  }

  @keyframes btn-shine {
    from { background-position: -75% 0; }
    to { background-position: 250% 0; }
  }

  .btn:not(.btn--text):active {
    box-shadow: var(--btn-depth-press);
    scale: 0.97;
    transition-duration: 90ms;
    transition-timing-function: var(--ease-out);
  }

  :is(.s-petrol, .s-inverse, .hero--petrol, .cookie) .btn {
    --btn-glass: 84%;
    --btn-sheen: 26%;
  }

  .btn[disabled],
  .btn.is-disabled {
    border-color: var(--line-local);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: var(--ink-muted);
    cursor: not-allowed;
    scale: 1;
  }

  .btn[disabled]::after,
  .btn.is-disabled::after {
    content: none;
  }

  /* The quiet pill is clear glass: a faint tint of the surface's button colour over the blur,
     and a shine in that same colour so it shows on white and on petrol. */
  .btn--ghost {
    --btn-glint: color-mix(in oklab, var(--btn-local) 26%, transparent);
    --btn-glint-edge: transparent;
    border-color: color-mix(in oklab, var(--btn-local) 45%, transparent);
    background-color: color-mix(in oklab, var(--btn-local) 8%, transparent);
    color: var(--btn-local);
  }

  /* The header pill stays compact so the centred nav keeps its room. */
  .header .btn {
    min-height: 2.75rem;
    padding: 0.75rem 1.25rem;
    white-space: nowrap;
  }

  /* The original's READ MORE: an underline that grows from the left. */
  .btn--text {
    position: relative;
    min-height: 0;
    padding: 0.35rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: var(--ink-local);
  }

  .btn--text::before {
    position: absolute;
    right: 100%;
    bottom: 0;
    left: 0;
    border-block-end: 1px solid currentColor;
    content: '';
    transition: right var(--dur-2) var(--ease-out);
  }

  .btn--text:hover::before {
    right: 0;
  }

  /* Header -------------------------------------------------------------- */

  .header {
    position: sticky;
    z-index: var(--z-header);
    top: 0;
    border-block-end: 1px solid var(--line);
    background: var(--paper);
    view-transition-name: site-header;
  }

  .header__in {
    display: grid;
    min-height: var(--header-h);
    grid-template-columns: auto 1fr repeat(4, auto) 1fr auto;
    align-items: center;
    column-gap: clamp(1rem, 5vw - 1.6rem, 3.25rem);
  }

  .header__in > *,
  .nav > * {
    grid-row: 1;
  }

  /* The lockup, rebuilt: the original's vector cell mesh beside the wordmark set live in
     Georgia Script, crisp at any size and matching the hero signature. */
  .logo {
    display: inline-flex;
    grid-column: 1;
    align-items: center;
    position: relative;
    gap: 0.65rem;
    color: var(--ink);
    text-decoration: none;
  }

  .logo__mark {
    width: 3.3rem;
    height: 3.3rem;
    flex: none;
  }

  /* Hover only: one pass of silver light, left to right. The band is painted in the surface's
     own colour, so it cannot be seen over the background and turns the petrol lines silver as
     it crosses them. Nothing is drawn on the lockup itself. The award marks borrow the band. */
  .logo::after,
  .awards__mark::after,
  .awards__mark--wide::before {
    position: absolute;
    inset: -0.5rem -0.75rem;
    --shine: var(--bg-local);
    background: linear-gradient(
        105deg,
        transparent 0%,
        color-mix(in oklab, var(--shine) 40%, transparent) 28%,
        color-mix(in oklab, var(--shine) 74%, transparent) 44%,
        color-mix(in oklab, var(--shine) 40%, transparent) 56%,
        transparent 66%,
        transparent 76%,
        color-mix(in oklab, var(--shine) 46%, transparent) 84%,
        transparent 92%
      )
      no-repeat;
    background-position: -70% 0;
    background-size: 38% 100%;
    content: '';
    pointer-events: none;
  }

  .logo:hover::after,
  .logo:focus-visible::after {
    animation: logo-shine 900ms linear both;
  }

  /* As on the buttons: the band begins on the mark, not off to its left. */
  @keyframes logo-shine {
    from { background-position: -25% 0; }
    to { background-position: 170% 0; }
  }

  .logo__word {
    font-family: var(--f-script);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    translate: 0 0.1em;
  }

  /* Social channels: the original's "Follow us" row, now four channels with visible icons. */
  .social {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
  }

  .social__a {
    display: inline-flex;
    width: 2.6rem;
    height: 2.6rem;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--ink);
    transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
  }

  .social__a svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
  }

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

  .social__a:hover {
    border-color: var(--ink);
    color: var(--ink);
  }

  .footer .social__a {
    border-color: var(--line);
  }

  .footer .social__a:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
  }

  /* The links become header grid items so they centre on the page, as the original's
     absolutely centred navbar does, with the pill pinned to the far right. */
  .nav {
    display: contents;
  }

  .nav > a:nth-child(1) { grid-column: 3; }
  .nav > a:nth-child(2) { grid-column: 4; }
  .nav > a:nth-child(3) { grid-column: 5; }
  .nav > a:nth-child(4) { grid-column: 6; }

  .nav > .btn {
    grid-column: 8;
    justify-self: end;
  }

  .nav-a {
    position: relative;
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--ink-body);
    font-size: var(--fs-label);
    font-weight: var(--w-med);
    letter-spacing: 0.2em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur) var(--ease-out);
  }

  .nav-a::before {
    position: absolute;
    right: 100%;
    bottom: 0.6rem;
    left: 0;
    border-block-end: 1px solid currentColor;
    content: '';
    transition: right var(--dur-2) var(--ease-out);
  }

  .nav-a:hover,
  .nav-a.is-active {
    color: var(--ink);
  }

  .nav-a:hover::before,
  .nav-a.is-active::before {
    right: 0;
  }

  .nav-toggle {
    display: none;
    min-width: 3rem;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    display: block;
    width: 1.35rem;
    height: 1px;
    background: currentColor;
    content: '';
    transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
  }

  .nav-toggle__icon::before {
    transform: translateY(-0.38rem);
  }

  .nav-toggle__icon::after {
    transform: translateY(0.32rem);
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__icon {
    background: transparent;
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__icon::before {
    transform: translateY(0) rotate(45deg);
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__icon::after {
    transform: translateY(-1px) rotate(-45deg);
  }

  /* The lattice --------------------------------------------------------- */

  /* Regine's cell mesh, masked so it takes the surface's own tint, half off the edge
     and spilling over the band below, exactly as the original positions its PNG. */
  [data-lattice] {
    position: relative;
    z-index: var(--z-content);
    isolation: isolate;
  }

  [data-lattice] > * {
    position: relative;
    z-index: var(--z-content);
  }

  [data-lattice] + section,
  [data-lattice] + footer {
    z-index: var(--z-lattice);
  }

  [data-lattice]::before,
  [data-lattice]::after {
    position: absolute;
    z-index: var(--z-lattice);
    /* 38.75rem = the 620px the original renders sg-pattern-1 at; above that the cells
       read as a giant crop rather than a texture. */
    width: clamp(28rem, 50vw, 38.75rem);
    aspect-ratio: 1000 / 967;
    background: var(--lattice-local);
    content: '';
    pointer-events: none;
    -webkit-mask: url('/assets/img/sg-lattice.png') center / contain no-repeat;
    mask: url('/assets/img/sg-lattice.png') center / contain no-repeat;
  }

  [data-lattice='left']::before,
  [data-lattice='both']::before {
    inset-inline-start: -24%;
    inset-block-end: -42%;
  }

  [data-lattice='right']::after,
  [data-lattice='both']::after {
    inset-inline-end: -20%;
    inset-block-start: -30%;
  }

  [data-lattice='left']::after,
  [data-lattice='right']::before,
  [data-lattice='edge']::before {
    content: none;
  }

  [data-lattice='edge']::after {
    inset-inline-end: -22%;
    inset-block-end: -24%;
  }

  @supports (animation-timeline: view()) {
    [data-lattice]::before,
    [data-lattice]::after {
      animation: lattice-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }

  @keyframes lattice-drift {
    from { translate: 0 3%; }
    to { translate: 0 -3%; }
  }

  /* Heroes -------------------------------------------------------------- */

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

  .hero--petrol {
    --bg-local: var(--ink);
    --ink-local: var(--bg);
    --text-local: var(--bg);
    --label-local: var(--bg);
    --line-local: var(--line-on-dark);
    --lattice-local: var(--lattice-on-dark);
    --btn-local: var(--bg);
    --btn-contrast: var(--ink);
    --focus-ring: var(--bg);
  }

  /* Petrol bands take a soft light from above so the field is not flat. Tokens only. */
  .hero--petrol,
  section.s-petrol {
    background-image: radial-gradient(90% 120% at 50% -10%, color-mix(in oklab, var(--paper) 13%, transparent), transparent 65%);
  }

  .hero--quiet {
    --bg-local: var(--bg);
    --btn-contrast: var(--bg);
  }

  .hero--grey {
    --bg-local: var(--bg-alt);
    --btn-contrast: var(--bg-alt);
  }

  /* Wider than the 750px measure so the larger headline keeps its line count; the label
     and lead hold their own narrower measures below. */
  .hero__in {
    display: grid;
    justify-items: center;
    gap: var(--s3);
    max-width: 58rem;
    margin-inline: auto;
    text-align: center;
  }

  .hero__in > * {
    margin: 0;
  }

  /* Her name, the original's signature; the label sits just clear of its descenders. */
  .hero__mark {
    max-width: none;
    margin-block-end: -0.1em;
    color: var(--ink-local);
    font-family: var(--f-script);
    font-size: var(--fs-mark);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.05;
    text-wrap: balance;
  }

  .hero__in .label {
    max-width: 30ch;
    text-wrap: balance;
  }

  .hero__in .lead {
    max-width: var(--measure);
    margin-block-start: var(--s1);
  }

  .hero__in h1 {
    max-width: 26ch;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s2);
    margin-block-start: var(--s3);
  }

  .hero-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-block-start: var(--s5);
    list-style: none;
  }

  .hero-facts li {
    display: grid;
    gap: 0.2rem;
    padding: 0.25rem clamp(1rem, 3vw, 2.5rem);
    border-inline-start: 1px solid var(--line-local);
  }

  .hero-facts li:first-child {
    border-inline-start: 0;
  }

  .hero-facts strong {
    color: var(--ink-local);
    font-size: var(--fs-body);
    font-weight: var(--w-med);
  }

  .hero-facts span {
    color: var(--text-local);
    font-size: var(--fs-small);
  }

  /* The four channels, pinned to the band's bottom-right corner. */
  .hero > .hero__social {
    position: absolute;
    z-index: var(--z-content);
    right: var(--gutter);
    bottom: var(--s3);
  }

  .hero--petrol .social__a {
    color: var(--bg);
  }

  .hero--petrol .social__a:hover {
    border-color: var(--bg);
    color: var(--bg);
  }

  /* Treatment pages: the page image as a medallion straddling the band's bottom edge. */
  .hero--medallion {
    padding-block-end: 0;
  }

  .hero--medallion .hero__in {
    padding-block-end: 0;
  }

  .medallion.medallion--hero {
    --medallion: clamp(12rem, 30vw, 20rem);
    width: var(--medallion);
    margin-block-start: var(--s5);
    margin-block-end: calc(var(--medallion) / -2);
  }

  .hero--medallion + section {
    padding-block-start: calc(var(--section-y) + clamp(6rem, 15vw, 10rem));
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero__in > * {
      animation: rise var(--dur-3) var(--ease-out) both;
      animation-delay: calc(var(--i, 0) * 80ms);
    }
  }

  @keyframes rise {
    from {
      opacity: 0;
      translate: 0 0.75rem;
    }
  }

  /* Medallions ---------------------------------------------------------- */

  .medallion {
    width: min(72%, 15rem);
    aspect-ratio: 1;
    margin-inline: auto;
    overflow: clip;
    border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
    border-radius: var(--radius-circle);
    outline: 1px solid transparent;
    outline-offset: 0;
    background: var(--bg-alt);
    transition: outline-color var(--dur-2) var(--ease-out), outline-offset var(--dur-2) var(--ease-out);
  }

  /* A second hairline ring opens around the medallion as its card is hovered. */
  .card:hover .medallion,
  .medallion--hero:hover {
    outline-color: color-mix(in oklab, var(--ink) 30%, transparent);
    outline-offset: 0.5rem;
  }

  .medallion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    scale: 1;
    transition: scale var(--dur-3) var(--ease-out);
  }

  .card:hover .medallion img,
  .medallion--hero:hover img {
    scale: 1.05;
  }

  /* Cards and media ----------------------------------------------------- */

  .card {
    position: relative;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }

  a.card {
    display: block;
  }

  /* A treatment family: centred column, rows aligned across the grid with subgrid. */
  .card:has(> .medallion) {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    justify-items: center;
    row-gap: var(--s2);
    margin-block-end: var(--s5);
    text-align: center;
  }

  .card:has(> .medallion) h3 {
    max-width: 18ch;
  }

  .card:has(> .medallion) .small {
    max-width: 30ch;
  }

  .card:has(> .medallion) .card__foot {
    align-self: end;
    margin-block-start: var(--s1);
  }

  /* Journal entries: hairline rows, not boxes. */
  .card:not(:has(> .medallion)) {
    display: grid;
    gap: var(--s2);
    padding-block: var(--s4);
    border-block-start: 1px solid var(--line-local);
  }

  .card:not(:has(> .medallion)) h3 {
    transition: color var(--dur) var(--ease-out);
  }

  .card:not(:has(> .medallion)):hover h3 {
    color: var(--ink-hover);
  }

  .card__media {
    width: 100%;
    overflow: clip;
    background: var(--bg-alt);
  }

  .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .grid--split > .card__media {
    aspect-ratio: 4 / 5;
    max-height: clamp(30rem, 54vw, 43rem);
  }

  .card__media--short {
    aspect-ratio: 4 / 5;
  }

  /* Product cut-outs sit on white, unrounded, unshadowed, as the original shows them. */
  .media-figure {
    margin: 0;
    text-align: center;
  }

  .media-figure .card__media {
    aspect-ratio: 1;
    background: var(--paper);
  }

  .media-figure .card__media img {
    object-fit: contain;
    object-position: center;
  }

  .media-figure figcaption {
    margin-block-start: var(--s2);
  }

  .rail,
  .grid--2:has(> .card > .medallion) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    /* The row gap matches the cards' own, or the shared subgrid tracks inflate. The cards
       carry the space between wrapped rows; the negative margin takes back the last one. */
    gap: var(--s2) clamp(1.25rem, 3vw, 2.5rem);
    margin-block-end: calc(var(--s5) * -1);
  }

  .card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--s1) var(--s3);
  }

  .card__price {
    color: var(--ink-local);
    font-weight: var(--w-med);
  }

  .card__cta {
    position: relative;
    padding-block-end: 0.15rem;
    color: var(--ink-local);
    font-size: var(--fs-label);
    font-weight: var(--w-med);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .card__cta::before {
    position: absolute;
    right: 100%;
    bottom: 0;
    left: 0;
    border-block-end: 1px solid currentColor;
    content: '';
    transition: right var(--dur-2) var(--ease-out);
  }

  .card:hover .card__cta::before {
    right: 0;
  }

  .badge {
    width: 6rem;
  }

  .award {
    padding-block-start: var(--s3);
    border-block-start: 1px solid var(--line-local);
  }

  .award__badge {
    width: 8rem;
    margin-block-end: var(--s3);
  }

  /* Concerns, steps, facts ---------------------------------------------- */

  .concerns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--col-gap);
    border-block-start: 1px solid var(--line-local);
  }

  .concerns--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .concern {
    position: relative;
    display: grid;
    gap: 0.35rem;
    padding: var(--s3) 2.5rem var(--s3) 0;
    border-block-end: 1px solid var(--line-local);
    text-decoration: none;
    transition: color var(--dur) var(--ease-out);
  }

  .concern::after {
    position: absolute;
    top: var(--s3);
    right: 0;
    color: var(--ink-local);
    content: '\2192';
    font-size: 1.1rem;
    line-height: 1.6;
    transition: translate var(--dur) var(--ease-out);
  }

  .concern:hover::after {
    translate: 4px 0;
  }

  /* The row's hairline inks in from the left, the same grow the nav and READ MORE use. */
  .concern::before {
    position: absolute;
    right: 100%;
    bottom: -1px;
    left: 0;
    border-block-end: 1px solid var(--ink-local);
    content: '';
    transition: right var(--dur-3) var(--ease-out);
  }

  .concern:hover::before,
  .concern:focus-visible::before {
    right: 0;
  }

  .concern__k {
    color: var(--ink-local);
    font-size: var(--fs-h3);
    line-height: var(--lh-sub);
    text-wrap: balance;
  }

  .concern__v {
    color: var(--label-local);
    font-size: var(--fs-label);
    font-weight: var(--w-med);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  /* By-concern blocks: same rhythm as .concern, but a static list rather than a link. */
  .concern-group {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: var(--s3) 2.5rem var(--s3) 0;
    border-block-end: 1px solid var(--line-local);
    text-align: start;
  }

  .concern-group__list {
    display: grid;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
  }

  /* Treatments read as hairline rows, the rhythm .price-list and .hours already use,
     so the rule does the work an underline was doing. */
  .concern-group__list > li {
    border-block-end: 1px solid var(--line-local);
  }

  .concern-group__list > li > .link {
    position: relative;
    display: block;
    padding-block: 0.55rem;
    padding-inline-end: 1.5rem;
    /* .link underlines with a background gradient; the row hairline does that job here. */
    background-image: none;
  }

  .concern-group__list > li > .link::after {
    position: absolute;
    top: 0.55rem;
    right: 0;
    color: var(--label-local);
    content: '→';
    opacity: 0;
    transition:
      opacity var(--dur) var(--ease-out),
      translate var(--dur) var(--ease-out);
  }

  .concern-group__list > li > .link:hover::after,
  .concern-group__list > li > .link:focus-visible::after {
    opacity: 1;
    translate: 4px 0;
  }

  .concern-group__add {
    margin-block-start: var(--s3);
  }

  /* Add-ons are secondary: one quiet wrapped line, not a second full-height list.
     That is what evens the column heights when one concern carries seven treatments
     and another carries three. */
  .concern-group__list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    margin-block-start: 0.35rem;
    font-size: var(--fs-label);
  }

  .concern-group__list--inline > li {
    border-block-end: 0;
  }

  .concern-group__list--inline > li:not(:last-child)::after {
    color: color-mix(in oklab, var(--text-local) 45%, transparent);
    content: '·';
    padding-inline-start: 0.5rem;
  }

  .concern-group__list--inline > li > .link {
    display: inline;
    padding-block: 0;
    padding-inline-end: 0;
    color: color-mix(in oklab, var(--text-local) 76%, transparent);
    background-size: 0% 1px;
  }

  .concern-group__list--inline > li > .link:hover,
  .concern-group__list--inline > li > .link:focus-visible {
    color: var(--ink-local);
    background-size: 100% 1px;
  }

  .concern-group__list--inline > li > .link::after {
    content: none;
  }

  .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    counter-reset: step;
  }

  .step {
    display: grid;
    gap: var(--s2);
    padding: var(--s2) clamp(1rem, 3vw, 2.5rem);
    counter-increment: step;
    text-align: center;
  }

  .step + .step {
    border-inline-start: 1px solid var(--line-local);
  }

  .step::before {
    color: var(--label-local);
    content: '0' counter(step);
    font-size: var(--fs-label);
    font-weight: var(--w-med);
    letter-spacing: var(--track-label);
  }

  .step p {
    margin-inline: auto;
    max-width: 34ch;
  }

  .facts,
  .hours,
  .price-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .facts li {
    padding: var(--s2) 0;
    border-block-end: 1px solid var(--line-local);
  }

  .facts li:first-child {
    border-block-start: 1px solid var(--line-local);
  }

  .hours {
    max-width: 30rem;
  }

  .hours li {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    padding: 0.55rem 0;
  }

  /* Dotted leader between day and time, the original's price-row device. */
  .hours li::after {
    order: 2;
    flex: 1;
    min-width: 2rem;
    border-block-end: 1px dotted var(--line);
    content: '';
    translate: 0 -0.35em;
  }

  .hours li > :last-child {
    order: 3;
    white-space: nowrap;
  }

  .hours__day {
    color: var(--ink-local);
    font-weight: var(--w-med);
  }

  .is-closed {
    color: var(--text-quiet);
  }

  .is-closed .hours__day {
    color: var(--ink-body);
  }

  /* Prices -------------------------------------------------------------- */

  .price-list {
    display: grid;
    gap: var(--s2);
  }

  .price-list > li {
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid var(--bg-alt);
    background: var(--paper);
  }

  .s-base .price-list > li {
    padding-inline: 0;
    border: 0;
    border-block-end: 1px solid var(--line-local);
  }

  .s-base .price-list > li:first-child {
    border-block-start: 1px solid var(--line-local);
  }

  /* A bookable treatment: the whole card is the link to its calendar on /book/. */
  .price-list > li:has(> .price-row__book) {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color var(--dur-2) var(--ease-out);
  }

  .price-list > li:has(> .price-row__book):hover,
  .price-list > li:has(> .price-row__book:focus-visible) {
    border-color: color-mix(in oklab, var(--ink) 30%, transparent);
  }

  .price-row__book {
    position: static;
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    gap: 0.4rem;
    margin-block-start: var(--s2);
    color: var(--ink-local);
    font-size: var(--fs-label);
    font-weight: var(--w-med);
    letter-spacing: var(--track-label);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .price-row__book::after {
    position: absolute;
    inset: 0;
    content: '';
  }

  .price-row__book:focus-visible {
    outline: none;
  }

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

  .price-row__book svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    transition: transform var(--dur) var(--ease-out);
  }

  .price-list > li:hover .price-row__book svg {
    transform: translateX(0.2rem);
  }

  .price-row {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
  }

  .price-row__name {
    color: var(--ink-local);
    font-size: var(--fs-h3);
    line-height: var(--lh-sub);
  }

  .price-row__dur {
    display: inline-block;
    margin-inline-start: var(--s1);
    color: var(--text-local);
    font-size: var(--fs-label);
    font-weight: var(--w-med);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    vertical-align: 0.2em;
  }

  .leader {
    flex: 1;
    min-width: 2rem;
    border-block-end: 1px dotted var(--line);
    translate: 0 -0.35em;
  }

  .price-row__val {
    color: var(--ink-local);
    font-size: var(--fs-lead);
    font-weight: var(--w-med);
    white-space: nowrap;
  }

  .price-row__body {
    max-width: var(--measure-prose);
    margin-block-start: var(--s2);
  }

  .price-row__body .label {
    display: inline;
    margin-inline-end: var(--s1);
  }

  .spec-row {
    display: grid;
    grid-template-columns: minmax(10rem, 0.6fr) 1fr;
    gap: var(--s3);
    align-items: baseline;
    padding: var(--s2) 0;
    border-block-end: 1px solid var(--line-local);
  }

  .spec-row__k {
    color: var(--ink-local);
    font-weight: var(--w-med);
  }

  .protocol {
    margin-block-start: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--line-local);
  }

  /* Reviews ------------------------------------------------------------- */

  .quote {
    margin: 0;
    padding: 0 clamp(0rem, 2vw, 1.5rem);
  }

  .quote p {
    max-width: var(--measure-quote);
    color: var(--ink-local);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }

  .quote figcaption {
    margin-block-start: var(--s3);
  }

  .grid--3:has(> .quote) {
    gap: var(--s5) 0;
  }

  .grid--3 > .quote + .quote {
    border-inline-start: 1px solid var(--line-local);
  }

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

  .faq-list {
    border-block-start: 1px solid var(--line-local);
  }

  .faq-item {
    border-block-end: 1px solid var(--line-local);
  }

  .faq-item summary {
    position: relative;
    min-height: 4.25rem;
    padding: var(--s3) 3rem var(--s3) 0;
    color: var(--ink-local);
    cursor: pointer;
    font-size: var(--fs-h3);
    line-height: var(--lh-sub);
    list-style: none;
    transition: color var(--dur) var(--ease-out);
  }

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

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

  .faq-item summary::after {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    content: '+';
    font-size: 1.5rem;
    font-weight: var(--w-light);
    line-height: 1;
    translate: 0 -50%;
    transition: rotate var(--dur-2) var(--ease-out);
  }

  .faq-item[open] summary::after {
    rotate: 45deg;
  }

  .faq-item::details-content,
  .booking-category::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size var(--dur-2) var(--ease-out),
      content-visibility var(--dur-2) allow-discrete;
  }

  .faq-item[open]::details-content,
  .booking-category[open]::details-content {
    block-size: auto;
  }

  .faq-item p {
    padding: 0 3rem var(--s3) 0;
  }

  /* Forms --------------------------------------------------------------- */

  .field {
    display: block;
    margin-block-end: var(--s3);
  }

  .field > .label {
    margin-block-end: var(--s1);
  }

  .input,
  .textarea {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink-body);
    caret-color: var(--ink);
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
  }

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

  /* The focus ring is the one indicator; darkening the border too drew a second line under it. */
  .input:focus,
  .textarea:focus {
    border-color: var(--line);
    background: var(--paper);
  }

  .textarea {
    min-height: 10rem;
    resize: vertical;
  }

  .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form-note {
    margin-block-start: var(--s2);
  }

  /* The form outgrows the address column; centring left that column floating mid-page. */
  .grid--split:has(.form-card) {
    align-items: start;
  }

  /* Enquiry panel: an off-white card holding white fields, so it reads as one form on a white band. */
  .form-card {
    padding: var(--s5);
    border: 1px solid var(--line);
    border-block-start: 3px solid var(--ink);
    background: var(--bg);
  }

  .form-card .input,
  .form-card .textarea {
    background: var(--paper);
  }

  /* Fields carry their own bottom margin, so the grid only spaces columns. */
  .form-card .grid {
    gap: 0 var(--s3);
  }

  .form-card__req {
    margin: 0 0 var(--s4);
  }

  .form-group {
    min-width: 0;
    margin: 0 0 var(--s3);
    padding: 0;
    border: 0;
  }

  .form-group + .form-group {
    padding-block-start: var(--s4);
    border-block-start: 1px solid var(--line);
  }

  /* Floated so the legend leaves the fieldset border instead of sitting on top of it. */
  .form-group__title {
    float: left;
    width: 100%;
    margin-block-end: var(--s3);
    padding: 0;
    color: var(--ink);
    font-size: var(--fs-h3);
    font-weight: var(--w-light);
    line-height: 1.2;
  }

  .form-group__title + * {
    clear: both;
  }

  .req {
    color: var(--ink);
  }

  .select {
    appearance: none;
    font: inherit;
    color: var(--ink-body);
    padding-inline-end: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232e435c' stroke-width='1.5'/%3E%3C/svg%3E");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .select:invalid {
    color: var(--ink-muted);
  }

  .select option {
    color: var(--ink-body);
  }

  .checks {
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    border: 0;
  }

  .checks > .label {
    margin-block-end: var(--s1);
    padding: 0;
  }

  .checks__hint {
    display: inline-block;
    margin-inline-start: var(--s1);
    color: var(--ink-body);
    font-weight: var(--w-light);
    letter-spacing: var(--track-meta);
    text-transform: none;
  }

  .checks__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s1) var(--s3);
  }

  .check {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
  }

  .check > input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 1px solid var(--ink-muted);
    background: var(--paper);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  }

  .check > input:hover {
    border-color: var(--ink);
  }

  .check > input:checked {
    border-color: var(--ink);
    background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
  }

  .check--consent {
    align-items: flex-start;
    margin-block: var(--s1) var(--s4);
    font-size: var(--fs-small);
    line-height: 1.6;
  }

  .check--consent > input {
    margin-block-start: 0.15rem;
  }

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

  .footer {
    padding-block: clamp(3.5rem, 7vw, 5rem) 0;
  }

  .footer__statement {
    display: grid;
    justify-items: center;
    gap: var(--s2);
    max-width: var(--measure);
    margin-inline: auto;
    padding-block-end: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
  }

  .footer__statement .stack {
    display: contents;
  }

  .footer__statement h2 {
    font-size: var(--fs-h2);
  }

  .footer__statement h2 .brand-script,
  .hero h1 .brand-script {
    display: inline-block;
    padding-inline-start: 0.1em;
    font-size: 1.4em;
    line-height: 0.8;
    vertical-align: -0.1em;
  }

  .footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--s5);
    padding-block: var(--s6);
    border-block-start: 1px solid var(--line-local);
  }

  .footer .logo__mark {
    width: 4.1rem;
    height: 4.1rem;
  }

  .footer .logo__word {
    font-size: 2.5rem;
  }

  .footer .social {
    gap: 0.5rem;
  }

  .footer__links {
    list-style: none;
  }

  .footer__links li + li {
    margin-block-start: var(--s1);
  }

  .footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s1) var(--s3);
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--s3) var(--gutter);
    background: var(--paper);
    text-align: center;
  }

  .footer__legal p {
    max-width: none;
  }
}

/* Pages ----------------------------------------------------------------- */

@layer pages {
  /* Home: trust bar, practitioner, awards. */
  .trust-bar {
    border-block-end: 1px solid var(--line-local);
  }

  .proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proof-stat {
    display: grid;
    gap: 0.3rem;
    padding: var(--s2) clamp(1rem, 3vw, 2.5rem);
    text-align: center;
  }

  .proof-stat + .proof-stat {
    border-inline-start: 1px solid var(--line-local);
  }

  .proof-stat strong {
    color: var(--ink-local);
    font-size: var(--fs-lead);
    font-weight: var(--w-light);
  }

  .proof-stat span {
    margin-inline: auto;
    max-width: 30ch;
    color: var(--text-local);
    font-size: var(--fs-small);
  }

  .portrait-frame {
    position: relative;
  }

  .portrait-frame .card__media {
    aspect-ratio: 4 / 5;
    max-height: clamp(26rem, 60vw, 40rem);
  }

  @media (max-width: 59.99rem) {
    .portrait-frame {
      max-width: 30rem;
      margin-inline: auto;
    }
  }

  .portrait-note {
    display: grid;
    gap: 0.2rem;
    padding-block: var(--s2);
    border-block-end: 1px solid var(--line-local);
  }

  .portrait-note strong {
    color: var(--ink-local);
    font-weight: var(--w-light);
    font-size: var(--fs-lead);
  }

  .portrait-note span {
    color: var(--text-local);
    font-size: var(--fs-small);
  }

  .award-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    align-items: center;
    padding-block-start: var(--s4);
    border-block-start: 1px solid var(--line-local);
  }

  /* Awards: the latest award leads, large and centred; the earlier three sit beneath in a
     divided row with their marks at a size that reads. */
  .awards.section--tight {
    padding-block: clamp(3rem, 6vw, 5rem);
  }

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

  .awards__head {
    max-width: var(--measure);
    margin-inline: auto;
    text-align: center;
  }

  .awards__head h2 {
    font-size: var(--fs-h2);
  }

  .awards__head p {
    max-width: 44ch;
    margin: var(--s2) auto 0;
  }

  .awards__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    border-block-start: 1px solid var(--line-local);
  }

  .awards__item {
    display: grid;
    position: relative;
    justify-items: center;
    align-content: start;
    gap: var(--s2);
    padding: var(--s4) clamp(1rem, 3vw, 2.5rem);
    text-align: center;
  }

  .awards__item + .awards__item {
    border-inline-start: 1px solid var(--line-local);
  }

  /* The newest award takes a stage of its own, built from what the hero already has: light
     from above, here in the petrol wash, and Regine's cell mesh at both sides. */
  .awards__item:first-child {
    grid-column: 1 / -1;
    gap: var(--s3);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    overflow: clip;
    isolation: isolate;
    border-block-end: 1px solid var(--line-local);
    background: radial-gradient(70% 130% at 50% 0%, color-mix(in oklab, var(--ink-local) 8%, transparent), transparent 70%);
  }

  /* The mesh fades out towards the award, so nothing runs behind the logo or the title. */
  .awards__item:first-child::before,
  .awards__item:first-child::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: -5rem;
    z-index: -1;
    width: clamp(15rem, 30vw, 24rem);
    aspect-ratio: 1000 / 967;
    translate: 0 -50%;
    background: color-mix(in oklab, var(--ink-local) 15%, transparent);
    clip-path: inset(0);
    content: '';
    pointer-events: none;
    -webkit-mask: url('/assets/img/sg-lattice.png') center / contain no-repeat, linear-gradient(to right, black 20%, transparent 85%);
    -webkit-mask-composite: source-in;
    mask: url('/assets/img/sg-lattice.png') center / contain no-repeat, linear-gradient(to right, black 20%, transparent 85%);
    mask-composite: intersect;
  }

  .awards__item:first-child::after {
    inset-inline: auto -5rem;
    scale: -1 1;
  }

  /* Arrival, once: the mesh opens outwards from the award, then the logo's band of light
     crosses the mark. site.js adds .is-in when the award scrolls into view. */
  html.js .awards__item:first-child[data-reveal]::before,
  html.js .awards__item:first-child[data-reveal]::after {
    transition: clip-path var(--dur-3) var(--ease-out) 150ms;
  }

  html.js .awards__item:first-child[data-reveal]:not(.is-in)::before,
  html.js .awards__item:first-child[data-reveal]:not(.is-in)::after {
    clip-path: inset(0 0 0 100%);
  }

  .awards__item:first-child.is-in .awards__mark::before {
    animation: logo-shine 900ms linear 500ms forwards;
  }

  .awards__item:nth-child(2) {
    border-inline-start: 0;
  }

  .awards__year {
    color: var(--label-local);
    font-size: var(--fs-label);
    font-weight: var(--w-med);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  /* The newest year is the one filled pill in the band. The extra leading pad balances the
     tracking that trails the last digit. */
  .awards__item:first-child .awards__year {
    padding: 0.5rem 0.9rem 0.5rem calc(0.9rem + var(--track-label));
    border-radius: var(--radius-pill);
    background: var(--ink-local);
    color: var(--bg-local);
    line-height: 1;
  }

  .awards__body {
    display: block;
    min-width: 0;
  }

  .awards__body strong {
    display: block;
    color: var(--ink-local);
    font-size: var(--fs-h3);
    font-weight: var(--w-light);
    line-height: 1.3;
    text-wrap: balance;
  }

  .awards__item:first-child .awards__body strong {
    font-size: var(--fs-h2);
    line-height: var(--lh-section);
  }

  .awards__link {
    color: var(--ink-local);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    transition: background-size var(--dur-2) var(--ease-out), color var(--dur) var(--ease-out);
  }

  .awards__link:hover {
    color: var(--ink-hover);
    background-size: 100% 1px;
  }

  /* The whole cell opens the winners page, so the mark is a target too. */
  .awards__link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: '';
  }

  .awards__by {
    display: block;
    max-width: 30ch;
    margin: var(--s1) auto 0;
    color: var(--text-local);
    font-size: var(--fs-small);
    line-height: 1.45;
  }

  .awards__item:first-child .awards__by {
    max-width: 44ch;
    font-size: var(--fs-body);
  }

  /* The mark leads each item. */
  .awards__mark {
    --plinth: var(--bg-local);
    display: flex;
    position: relative;
    order: -1;
    max-width: 100%;
    align-items: center;
    justify-content: center;
  }

  /* The earlier three sit on a plinth, the medallion the treatment cards use, so three
     differently drawn marks read as one set. The wide lead logo stands on the page itself. */
  .awards__mark:not(.awards__mark--wide) {
    --plinth: var(--petrol-wash);
    width: min(100%, 12.5rem);
    aspect-ratio: 1;
    overflow: clip;
    border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
    border-radius: var(--radius-circle);
    outline: 1px solid transparent;
    outline-offset: 0;
    background: var(--plinth);
    transition: outline-color var(--dur-2) var(--ease-out), outline-offset var(--dur-2) var(--ease-out);
  }

  .awards__mark::before,
  .awards__mark::after {
    inset: 0;
    --shine: var(--plinth);
  }

  /* Explicit heights: an SVG mark with only a viewBox has no intrinsic width, and in a
     shrink-to-fit cell an auto width collapses it to nothing. `contain` keeps the wide logo
     in proportion when a narrow phone caps its width. */
  .awards__mark img {
    width: auto;
    height: 7.5rem;
    max-width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: scale var(--dur-3) var(--ease-out);
  }

  .awards__mark--wide img {
    height: 3.4rem;
  }

  .awards__item:first-child .awards__mark--wide img {
    height: 5rem;
  }

  /* Hover or focus on an award's link: the card medallion's second ring opens, the mark
     grows a touch and the header logo's band of light crosses it once. */
  .awards__item:has(.awards__link:is(:hover, :focus-visible)) .awards__mark {
    outline-color: color-mix(in oklab, var(--ink) 30%, transparent);
    outline-offset: 0.5rem;
  }

  .awards__item:has(.awards__link:is(:hover, :focus-visible)) .awards__mark img {
    scale: 1.05;
  }

  .awards__item:has(.awards__link:is(:hover, :focus-visible)) .awards__mark::after {
    animation: logo-shine 900ms linear both;
  }

  /* Client words: the petrol "Love notes" band. */
  .s-petrol .section-head .label--script {
    margin-block-end: var(--s1);
  }

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

  .booking-categories {
    border-top: 1px solid var(--ink);
  }

  .booking-category {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }

  .booking-category__summary {
    display: grid;
    min-height: 8.5rem;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto 1.5rem;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
  }

  .booking-category__summary::-webkit-details-marker {
    display: none;
  }

  .booking-category__summary:hover {
    background: var(--paper);
  }

  .booking-category__summary:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
  }

  .booking-category__number,
  .booking-category__count {
    color: var(--text-quiet);
    font-size: var(--fs-small);
  }

  .booking-category__count {
    min-width: 8rem;
    text-align: right;
  }

  .booking-category__copy,
  .booking-category__copy > * {
    display: block;
  }

  .booking-category__copy strong {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: var(--w-med);
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  .booking-category__copy span {
    max-width: 58ch;
    margin-top: var(--s1);
    color: var(--ink-body);
  }

  .booking-category__chevron {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    transition: transform var(--dur) var(--ease-out);
  }

  .booking-category[open] .booking-category__chevron {
    transform: rotate(180deg);
  }

  .booking-category__panel {
    padding: 0 0 clamp(2rem, 4vw, 3.5rem) 4.5rem;
  }

  .booking-treatment-list {
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    list-style: none;
  }

  .booking-treatment-list > li + li {
    border-top: 1px solid var(--line);
  }

  .booking-treatment {
    display: grid;
    min-height: 8rem;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, auto);
    gap: var(--s4);
    align-items: center;
    padding: clamp(1.25rem, 2.6vw, 2rem);
    background: var(--paper);
    color: var(--ink-body);
    text-decoration: none;
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  }

  a.booking-treatment:hover,
  a.booking-treatment.is-selected {
    background: var(--bg);
  }

  a.booking-treatment:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--focus-ring);
    outline-offset: -4px;
  }

  .booking-treatment__copy,
  .booking-treatment__copy > * {
    display: block;
  }

  .booking-treatment__copy .label {
    margin-bottom: var(--s1);
  }

  .booking-treatment__copy strong {
    color: var(--ink);
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-weight: var(--w-med);
    line-height: 1.25;
  }

  .booking-treatment__copy strong + span {
    max-width: 68ch;
    margin-top: var(--s1);
    line-height: 1.55;
  }

  .booking-treatment__facts {
    display: grid;
    grid-template-columns: minmax(4.5rem, auto) minmax(4.5rem, auto) minmax(5.5rem, auto);
    gap: var(--s2);
    align-items: center;
    color: var(--text-quiet);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }

  .booking-treatment__price {
    color: var(--ink);
  }

  .booking-treatment__action {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    color: var(--ink);
    font-weight: var(--w-med);
  }

  .booking-treatment__action svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    transition: transform var(--dur) var(--ease-out);
  }

  a.booking-treatment:hover .booking-treatment__action svg {
    transform: translateX(0.2rem);
  }

  .booking-treatment--addon {
    background: var(--paper);
  }

  .booking-treatment--addon .booking-treatment__facts {
    grid-template-columns: repeat(2, minmax(5rem, auto));
  }

  .booking-addons__action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: clamp(1.25rem, 2.6vw, 2rem);
    background: var(--bg);
  }

  .booking-addons__action p {
    max-width: 52ch;
    margin: 0;
  }

  .booking-stage {
    scroll-margin-top: 7rem;
  }

  .booking-stage__head {
    margin-bottom: var(--s4);
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--line);
    background: var(--paper);
  }

  .booking-back {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--s1);
    margin: 0 0 var(--s4);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.35em;
  }

  .booking-back:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  .booking-stage__summary {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(26rem, 0.9fr);
    gap: var(--col-gap);
    align-items: end;
  }

  .booking-stage__summary h2 {
    max-width: 19ch;
    font-size: clamp(2rem, 4vw, 3.5rem);
  }

  .booking-stage__summary h2:focus {
    outline: 0;
  }

  .booking-stage__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
    margin: 0;
  }

  .booking-stage__facts div {
    padding-top: var(--s2);
    border-top: 1px solid var(--line);
  }

  .booking-stage__facts dt {
    color: var(--text-quiet);
    font-size: var(--fs-small);
  }

  .booking-stage__facts dd {
    margin: var(--s1) 0 0;
    color: var(--ink);
    line-height: 1.4;
  }

  .booking-frame {
    position: relative;
    min-height: 52rem;
    padding: clamp(0.5rem, 2vw, 2rem);
    border: 1px solid var(--line);
    background: var(--paper);
  }

  .booking-frame iframe {
    display: block;
    width: 100%;
    min-height: 48rem;
    border: 0;
    background: var(--paper);
  }

  .booking-loading {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    background: var(--paper);
    color: var(--ink);
  }

  .booking-stage__deposit-note {
    grid-column: 1 / -1;
    margin: var(--s4) 0 0;
    padding: var(--s3) var(--s4);
    background: var(--surface, #f6f7f8);
    border-left: 3px solid var(--petrol, #2e435c);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .booking-stage__deposit-note[hidden] {
    display: none;
  }

  .booking-stage__facts div[hidden] {
    display: none;
  }

  .booking-loading[hidden] {
    display: none;
  }

  .booking-loading__mark {
    width: 3rem;
    height: 1px;
    background: var(--ink);
    animation: booking-pulse 900ms var(--ease-out) infinite alternate;
    transform-origin: left center;
  }

  @keyframes booking-pulse {
    from { transform: scaleX(0.25); opacity: 0.45; }
    to { transform: scaleX(1); opacity: 1; }
  }

  .booking-frame__note {
    max-width: 72ch;
    margin: var(--s3) 0 0;
  }

  .booking-details__grid {
    display: grid;
    grid-template-columns: minmax(15rem, 1.2fr) repeat(3, minmax(0, 1fr));
    gap: var(--s4);
    align-items: start;
  }

  .booking-details__grid > * {
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
  }

  .booking-detail__number {
    display: block;
    margin-bottom: var(--s5);
    color: var(--text-quiet);
    font-size: var(--fs-small);
  }

  .booking-detail h3 + p {
    margin-bottom: 0;
  }
}

/* Utilities and responsive --------------------------------------------- */

@layer utilities {
  .skip {
    position: fixed;
    z-index: var(--z-skip);
    top: var(--s2);
    left: -9999px;
    padding: var(--s2) var(--s3);
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--paper);
  }

  .skip:focus {
    left: var(--s2);
  }

  .cookie {
    position: fixed;
    z-index: var(--z-cookie);
    right: var(--s3);
    bottom: var(--s3);
    width: min(30rem, calc(100% - 3rem));
    padding: var(--s3);
    background: var(--inverse);
    color: var(--paper);
    --btn-local: var(--paper);
    --btn-contrast: var(--inverse);
    --focus-ring: var(--paper);
    --text-local: var(--paper);
  }

  .cookie[hidden] {
    display: none;
  }

  .cookie__in {
    display: grid;
    gap: var(--s3);
  }

  .cookie__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
  }

  /* Scroll reveal: the original's slide-up on every section, rebuilt. Each section's
     blocks rise, sharpen and fade in with a short stagger, once, when they enter the
     viewport. Without JavaScript nothing is hidden; under reduced motion nothing moves. */
  @media (prefers-reduced-motion: no-preference) {
    html.js [data-reveal] > .container > *,
    html.js [data-reveal] > .container > :is(.rail, .grid, .concerns, .steps, .faq-list, .price-list, .awards__list, .proof-grid, .grid--split, .footer__grid) > * {
      transition:
        opacity var(--dur-3) var(--ease-out),
        translate var(--dur-3) var(--ease-out),
        filter var(--dur-3) var(--ease-out);
      transition-delay: calc((var(--n, 0) + var(--m, 0)) * 90ms);
    }

    html.js [data-reveal]:not(.is-in) > .container > *,
    html.js [data-reveal]:not(.is-in) > .container > :is(.rail, .grid, .concerns, .steps, .faq-list, .price-list, .awards__list, .proof-grid, .grid--split, .footer__grid) > * {
      opacity: 0;
      translate: 0 1rem;
      filter: blur(3px);
    }

    html.js [data-reveal] > .container > :nth-child(2) { --n: 1; }
    html.js [data-reveal] > .container > :nth-child(3) { --n: 2; }
    html.js [data-reveal] > .container > :nth-child(4) { --n: 3; }
    html.js [data-reveal] > .container > :nth-child(5) { --n: 4; }
    html.js [data-reveal] > .container > :nth-child(n + 6) { --n: 5; }

    html.js [data-reveal] > .container > * > :nth-child(2) { --m: 1; }
    html.js [data-reveal] > .container > * > :nth-child(3) { --m: 2; }
    html.js [data-reveal] > .container > * > :nth-child(4) { --m: 3; }
    html.js [data-reveal] > .container > * > :nth-child(5) { --m: 4; }
    html.js [data-reveal] > .container > * > :nth-child(6) { --m: 5; }
    html.js [data-reveal] > .container > * > :nth-child(n + 7) { --m: 6; }
  }

  /* Touch: 44px targets, and the affordances hover would have revealed are simply shown. */
  @media (pointer: coarse) {
    .social__a {
      width: 2.75rem;
      height: 2.75rem;
    }

    .nav-a,
    .faq-item summary {
      min-height: 2.75rem;
    }
  }

  @media (hover: none) {
    .card__cta::before,
    .btn--text::before {
      right: 0;
    }

    .concern-group__list > li > .link::after {
      opacity: 1;
    }

    .card .medallion img,
    .medallion--hero img,
    .awards__mark img {
      scale: 1;
    }
  }

  /* Scroll-driven header hairline: hidden at the top, drawn after 80px of scroll. */
  @supports (animation-timeline: scroll()) {
    .header {
      border-block-end-color: transparent;
      animation: header-line linear both;
      animation-timeline: scroll(root);
      animation-range: 0 5rem;
    }

    @keyframes header-line {
      to { border-block-end-color: var(--line); }
    }
  }
}

@media (max-width: 74.99rem) {
  .rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .header__in {
    grid-template-columns: 3rem 1fr 3rem;
  }

  .nav-toggle {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .logo {
    grid-column: 2;
    justify-self: center;
  }

  .logo__mark {
    width: 2.6rem;
    height: 2.6rem;
  }

  .logo__word {
    font-size: 1.6rem;
  }

  .nav {
    position: fixed;
    z-index: var(--z-nav);
    inset: var(--header-h) 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s4) var(--gutter) max(var(--s6), env(safe-area-inset-bottom, 0px) + var(--s4));
    overflow-y: auto;
    background: var(--paper);
    translate: 100% 0;
    visibility: hidden;
    transition: translate var(--dur-2) var(--ease-out), visibility 0s var(--dur-2);
  }

  .nav[hidden] {
    display: flex;
  }

  body.nav-open .nav {
    translate: 0;
    visibility: visible;
    transition: translate var(--dur-2) var(--ease-out), visibility 0s;
  }

  .nav-a {
    min-height: 3.75rem;
    padding-block: var(--s2);
    border-block-end: 1px solid var(--line);
    color: var(--ink);
    font-size: var(--fs-h3);
    font-weight: var(--w-light);
    letter-spacing: 0;
    text-transform: none;
  }

  .nav-a::before {
    display: none;
  }

  .nav .btn {
    align-self: flex-start;
    margin-block-start: var(--s4);
  }

  body.nav-open {
    overflow: hidden;
  }

  .grid--2:not(:has(> .card > .medallion)),
  .grid--3:not(:has(> .quote)),
  .grid--split,
  .grid--split:has(> .card__media:first-child),
  .booking-stage__summary,
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .grid--3:has(> .quote) {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  .grid--3 > .quote + .quote {
    padding-block-start: var(--s4);
    border-inline-start: 0;
    border-block-start: 1px solid var(--line-local);
  }

  .booking-details__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .concerns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__grid {
    gap: var(--s4);
    justify-items: center;
    text-align: center;
  }

  .footer__grid .logo,
  .footer .social {
    justify-content: center;
  }

}

@media (max-width: 47.99rem) {
  html {
    scroll-padding-top: 5.5rem;
  }

  .hero > .hero__social {
    position: static;
    justify-content: center;
    margin-block-start: var(--s4);
  }

  .hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
    margin-block-start: var(--s4);
  }

  .hero-facts li {
    padding: var(--s2) 0 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--line-local);
  }

  .hero-facts li:last-child {
    grid-column: 1 / -1;
  }

  .booking-details__grid {
    grid-template-columns: 1fr;
  }

  .booking-stage__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
  }

  .booking-category__summary {
    min-height: 4.75rem;
    grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
    gap: var(--s2);
    padding: var(--s3) 0;
  }

  .booking-category__copy strong {
    font-size: 1.25rem;
  }

  .booking-category__copy span {
    display: none;
  }

  .booking-category__count {
    grid-column: 2;
    min-width: 0;
    text-align: left;
  }

  .booking-category__chevron {
    grid-column: 3;
    grid-row: 1;
  }

  .booking-category__panel {
    padding-left: 0;
  }

  .booking-treatment,
  .booking-treatment--addon {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: var(--s2);
    padding: var(--s3);
  }

  .booking-treatment__copy strong + span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .booking-treatment__facts,
  .booking-treatment--addon .booking-treatment__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
    white-space: normal;
  }

  a.booking-treatment .booking-treatment__facts {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .booking-treatment__action {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  a.booking-treatment .booking-treatment__action {
    grid-column: auto;
    justify-content: flex-end;
  }

  .booking-addons__action {
    align-items: flex-start;
    flex-direction: column;
  }

  .booking-stage__facts div {
    display: block;
  }

  .booking-stage__facts dd {
    margin-top: var(--s1);
  }

  .booking-stage__head {
    margin-bottom: var(--s2);
    padding: var(--s3);
  }

  .booking-back {
    margin-bottom: var(--s3);
  }

  .booking-stage__summary h2 {
    font-size: 1.8rem;
  }

  .booking-frame {
    min-height: 62rem;
    padding: 0;
  }

  .booking-frame iframe {
    min-height: 62rem;
  }

  .proof-grid,
  .steps,
  .concerns,
  .concerns--2 {
    grid-template-columns: 1fr;
  }

  .proof-stat + .proof-stat,
  .step + .step {
    padding-block-start: var(--s3);
    border-inline-start: 0;
    border-block-start: 1px solid var(--line-local);
  }

  .grid--split > .card__media {
    max-height: min(34rem, 122vw);
  }

  .price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s2);
  }

  .leader {
    display: none;
  }

  .price-row__dur {
    display: block;
    margin: 0.35rem 0 0;
  }

  .spec-row {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }

  .awards__list {
    grid-template-columns: 1fr;
  }

  .awards__item + .awards__item {
    border-inline-start: 0;
    border-block-start: 1px solid var(--line-local);
  }

  .awards__item:first-child {
    border-block-end: 0;
  }

  .awards__mark:not(.awards__mark--wide) {
    width: 10rem;
  }

  .awards__mark img {
    height: 6rem;
  }

  .awards__mark--wide img {
    height: 3rem;
  }

  /* On a phone the consent bar is a compact strip, not a third of the screen. */
  .cookie {
    right: var(--s2);
    bottom: max(var(--s2), env(safe-area-inset-bottom, 0px));
    width: calc(100% - 2rem);
    padding: var(--s2);
  }

  .cookie__in {
    gap: var(--s2);
  }

  .cookie .small {
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .cookie .btn {
    min-height: 2.75rem;
    padding: 0.7rem 1.5rem;
  }

  .footer__legal {
    padding-block-end: max(var(--s3), env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 39.99rem) {
  :root {
    --fs-mark: clamp(3rem, 1.8rem + 6vw, 6rem);
  }

  .form-card {
    padding: var(--s4) var(--s3);
  }

  .checks__list {
    grid-template-columns: 1fr;
  }

  [data-lattice]::before,
  [data-lattice='edge']::after {
    content: none;
  }

  [data-lattice='both']::after,
  [data-lattice='right']::after,
  [data-lattice='left']::after {
    content: '';
    width: 19rem;
    inset-inline-end: -38%;
    inset-inline-start: auto;
    inset-block-start: -14%;
    inset-block-end: auto;
  }

  .hero {
    padding-block: clamp(4rem, 12vw, 5.5rem) clamp(3rem, 9vw, 4rem);
  }

  .hero__in {
    gap: var(--s2);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 20rem);
  }

  /* Treatment families read as a list on a phone: round thumbnail left, words right. */
  .rail,
  .grid--2:has(> .card > .medallion) {
    grid-template-columns: 1fr;
    gap: 0;
    margin-block-end: 0;
  }

  .card:has(> .medallion) {
    margin-block-end: 0;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-template-rows: auto;
    grid-row: auto;
    justify-items: start;
    column-gap: var(--s3);
    row-gap: 0.3rem;
    padding-block: var(--s3);
    border-block-end: 1px solid var(--line-local);
    text-align: left;
  }

  .card:has(> .medallion):first-child {
    border-block-start: 1px solid var(--line-local);
  }

  .card:has(> .medallion) > .medallion {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 6.5rem;
    align-self: start;
  }

  .card:has(> .medallion) > :not(.medallion) {
    grid-column: 2;
  }

  .card:has(> .medallion) h3 {
    font-size: 1.2rem;
    max-width: none;
  }

  .card:has(> .medallion) .small {
    max-width: none;
  }

  .card:has(> .medallion) .card__foot {
    justify-content: flex-start;
    margin-block-start: var(--s1);
  }

  .section-tail {
    margin-block-start: var(--s4);
  }

  .steps,
  .proof-grid,
  .concerns {
    gap: 0;
  }

  .step,
  .proof-stat {
    padding-inline: 0;
    text-align: left;
  }

  .step p,
  .proof-stat span {
    margin-inline: 0;
  }

  .awards__item {
    padding-inline: 0;
  }

  /* As with every lattice: no mesh on a phone, where it would run behind the logo. */
  .awards__item:first-child::before,
  .awards__item:first-child::after {
    content: none;
  }

  .awards__mark:not(.awards__mark--wide) {
    width: 8.5rem;
  }

  .awards__mark img {
    height: 5rem;
  }

  .awards__item:first-child .awards__mark--wide img {
    height: 4rem;
  }

  .footer__grid {
    gap: var(--s5);
    padding-block: var(--s5);
  }

  .footer__legal {
    font-size: var(--fs-small);
  }
}

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

  /* Press still reads through the shadow change; the squeeze is motion, so it goes. */
  .btn:active {
    scale: 1;
  }

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

  .header {
    animation: none;
    border-block-end-color: var(--line);
  }

  [data-lattice]::before,
  [data-lattice]::after {
    animation: none;
    translate: 0;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .booking-loading__mark {
    animation: none;
  }
}

@media (prefers-contrast: more) {
  .concern,
  .concern-group,
  .quote,
  .input,
  .textarea,
  .form-card,
  .check > input,
  .price-list > li {
    border-color: var(--ink);
  }
}

/* Forced colours repaint every background as Canvas, which erases a mark drawn with one. */
@media (forced-colors: active) {
  .nav-toggle:not([aria-expanded='true']) .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after,
  .booking-loading__mark {
    background: CanvasText;
  }

  /* A custom tick is drawn with a background, which forced colours erase; use the native box. */
  .check > input {
    appearance: auto;
  }
}

/* Booking: "Two doors" (2026-10-19) ------------------------------------------
   One heading, the consultation as a petrol door, then the menus as plain rows
   that drop open in place. Kept after every media query so it is the last word
   on the booking chooser at every width. */
.booking-app {
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem);
}

.booking-app__container {
  max-width: 52rem;
}

.booking-chooser {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
}

.booking-chooser[hidden] {
  display: none;
}

.booking-title {
  margin-bottom: var(--s3);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.booking-treatment__action svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.booking-subhead {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: var(--w-med);
  letter-spacing: 0;
}

.booking-categories {
  border-top: 1px solid var(--ink);
}

.booking-category {
  background: transparent;
}

.booking-category__summary {
  display: grid;
  min-height: 5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: center;
  padding: var(--s3) 0;
}

.booking-category__summary:hover {
  background: transparent;
}

.booking-category__copy {
  display: grid;
  gap: 0.2rem;
}

.booking-category__copy strong {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  font-weight: var(--w-light);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.booking-category__copy .booking-category__count {
  display: block;
  grid-column: auto;
  min-width: 0;
  margin: 0;
  color: var(--text-quiet);
  font-size: var(--fs-small);
  text-align: left;
}

.booking-category__copy .booking-category__intro {
  max-width: 58ch;
  margin: var(--s1) 0 0;
  color: var(--ink-body);
}

.booking-category__toggle {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.booking-category__summary:hover .booking-category__toggle,
.booking-category[open] .booking-category__toggle {
  background: var(--ink);
  color: var(--paper);
}

.booking-category__chevron {
  grid-column: auto;
  grid-row: auto;
}

.booking-category__panel {
  padding: 0 0 var(--s4);
}

.booking-treatment-list {
  border: 0;
  border-top: 1px solid var(--line);
}

a.booking-treatment {
  min-height: 4.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2);
  padding: var(--s2) var(--s2);
}

.booking-treatment__copy strong {
  font-size: 1.0625rem;
  font-weight: var(--w-med);
  line-height: 1.35;
}

a.booking-treatment .booking-treatment__facts {
  grid-template-columns: auto auto auto;
  gap: var(--s3);
  text-align: right;
}

.booking-treatment__action {
  min-height: 2.75rem;
}

/* The stage: one line of what was chosen, then the diary. */
.booking-stage__head {
  display: grid;
  gap: var(--s1);
  margin-bottom: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--line);
  background: var(--paper);
}

.booking-stage__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: center;
}

.booking-stage__summary h2 {
  max-width: none;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1.2;
}

.booking-stage__line {
  margin: 0.25rem 0 0;
  color: var(--ink-body);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.booking-stage__line [hidden] {
  display: none;
}

.booking-back {
  margin: 0;
  font-weight: var(--w-med);
}

.booking-stage__more summary {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.booking-stage__more p {
  max-width: 68ch;
  margin: 0 0 var(--s2);
  font-size: var(--fs-small);
}

.booking-stage__more p[hidden] {
  display: none;
}

/* The booking system's screen reads as part of the page, not a box inside it. */
.booking-frame,
.booking-frame iframe {
  border: 0;
  background: transparent;
}

.booking-frame {
  padding: 0;
}

.booking-guide {
  max-width: 60ch;
  margin: var(--s2) 0;
  color: var(--ink);
}

.booking-guide strong {
  font-weight: var(--w-med);
}

.booking-frame__end {
  display: block;
  height: 1px;
}

/* Phones only: a pinned shortcut down to the booking system's Next button. */
.booking-jump {
  display: none;
}

@media (max-width: 47.99rem) {
  .booking-jump:not([hidden]) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    justify-content: center;
    padding: var(--s2) max(1rem, env(safe-area-inset-right, 0px)) calc(var(--s2) + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--line);
    background: var(--paper);
  }

  /* The cookie banner shares the bottom edge; let consent be answered first. */
  body:has(.cookie:not([hidden])) .booking-jump {
    display: none;
  }

  .booking-jump .btn {
    width: 100%;
    max-width: 24rem;
  }

  .booking-category__copy .booking-category__intro,
  .booking-treatment__action > span {
    display: none;
  }

  a.booking-treatment {
    padding: var(--s2) 0;
  }

  /* Price over duration on the right, the chevron beside both. */
  a.booking-treatment .booking-treatment__facts {
    grid-template-columns: auto 2rem;
    column-gap: var(--s1);
    row-gap: 0;
  }

  a.booking-treatment .booking-treatment__facts > span:first-child {
    grid-row: 2;
    grid-column: 1;
  }

  a.booking-treatment .booking-treatment__price {
    grid-row: 1;
    grid-column: 1;
  }

  a.booking-treatment .booking-treatment__action {
    grid-row: 1 / 3;
    grid-column: 2;
    justify-content: flex-end;
  }

  .booking-treatment__copy strong {
    font-weight: var(--w-light);
  }

  .booking-treatment__copy strong + .booking-treatment__facts,
  a.booking-treatment .booking-treatment__facts > span:first-child {
    color: var(--text-quiet);
  }

  .booking-treatment--addon {
    padding: var(--s2) 0;
  }

  .booking-stage__head {
    padding: var(--s2);
  }

  .booking-frame {
    padding: 0;
  }
}

/* Treatment descriptions: one line, "Read more" opens the rest in place. */
.booking-treatment-row {
  background: var(--paper);
}

.booking-treatment-row + .booking-treatment-row,
.booking-treatment-row + li,
li + .booking-treatment-row {
  border-top: 1px solid var(--line);
}

.booking-treatment-row a.booking-treatment {
  min-height: 0;
  padding-bottom: 0;
}

.booking-treatment__desc {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s2);
  align-items: baseline;
  padding: 0 var(--s2) var(--s2);
}

.booking-treatment__desc p {
  flex: 1 1 20rem;
  min-width: 0;
  max-width: 68ch;
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Without JavaScript the full text shows; with it, one line until "Read more". */
.is-more-ready .booking-treatment__desc:not(.is-open) p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-more {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--w-med);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

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

.booking-more:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (max-width: 47.99rem) {
  .booking-treatment__desc {
    padding-inline: 0;
  }
}

/* Desktop booking: site width, so the booking system has room to show its own cart
   ("Booking details": treatment, ticked add-ons, total, Next) beside the add-ons. */
@media (min-width: 60rem) {
  .booking-app__container {
    max-width: 76rem;
  }
}

/* Booking redesign deployed 2026-10-19 (fingerprint bump after a stale edge-cache entry). */