/* ==========================================================================
   Rai Permanent Makeup
   Design system, then components in build order.
   Custom properties are declared once here and never redefined elsewhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Prata";
  src: url("/assets/fonts/prata-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Colour.
     gold is decorative only on paper, where it measures 2.29:1. On espresso
     it measures 6.47:1 and may carry text. */
  --paper: #faf7f2;
  --paper-warm: #f3ece1;
  --ink: #1b1714;
  --ink-soft: #4a4038;
  --espresso: #2a211b;
  --espresso-deep: #120f0d;
  --gold-ink: #7d6234;
  --gold: #c2a15f;
  --hairline: #e2d9cb;
  --hairline-dark: rgba(194, 161, 95, 0.28);

  /* Type */
  --font-display: "Prata", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Fluid type scale. Ratio 1.2 at 375px widening to 1.25 at 1440px.
     Maxima sit above the design width so nothing stalls at 1920. */
  --step--1: clamp(0.833rem, 0.806rem + 0.115vw, 0.9rem);
  --step-0:  clamp(1rem, 0.957rem + 0.183vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.128rem + 0.307vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.305rem + 0.575vw, 2rem);
  --step-3:  clamp(1.728rem, 1.494rem + 0.998vw, 2.75rem);
  --step-4:  clamp(2.074rem, 1.688rem + 1.643vw, 3.75rem);
  --step-5:  clamp(2.488rem, 1.936rem + 2.355vw, 5rem);

  /* Spacing scale, same fluid approach */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.313rem);
  --space-2xs: clamp(0.5rem, 0.478rem + 0.092vw, 0.563rem);
  --space-xs:  clamp(0.75rem, 0.717rem + 0.138vw, 0.844rem);
  --space-s:   clamp(1rem, 0.957rem + 0.183vw, 1.125rem);
  --space-m:   clamp(1.5rem, 1.435rem + 0.275vw, 1.688rem);
  --space-l:   clamp(2rem, 1.914rem + 0.367vw, 2.25rem);
  --space-xl:  clamp(3rem, 2.871rem + 0.55vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.485rem + 2.202vw, 5.5rem);
  --space-3xl: clamp(6rem, 5.227rem + 3.303vw, 8.25rem);

  /* Layout */
  --shell: 1560px;
  --measure: 62ch;
  /* Shared by the header and the hero, so the logo and the h1 stay on the
     same vertical line. Changing it moves both, which is the point. */
  --gutter: clamp(1.25rem, 0.5rem + 3.9vw, 5rem);
  --header-height: 5rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 220ms;
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Set by main.js while the panel is open, so the page behind does not scroll
   under it. */
body.nav-open {
  overflow: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  /* Evens the line lengths so a heading never drops a single word onto a
     line of its own. Handled here rather than with non-breaking spaces in
     the markup, which would need redoing every time the copy changes. */
  text-wrap: balance;
}

p {
  margin: 0;
  /* Same idea for prose, but only the last line is adjusted, so long
     paragraphs are not re-flowed. Ignored by browsers that do not support
     it, which is a cosmetic loss and nothing more. */
  text-wrap: pretty;
}

/* ol as well as ul. Missing the ol here leaves the browser default
   padding-inline-start of 40px, which knocks breadcrumbs and step lists out of
   alignment with everything above them. */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

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

/* On dark ground the focus ring switches to gold, which reads at 6.47:1
   against espresso where gold-ink would disappear. */
.site-header :focus-visible,
.hero :focus-visible {
  outline-color: var(--gold);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: var(--space-xs) var(--space-m);
  background: var(--espresso);
  color: var(--paper);
  font-size: var(--step--1);
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--speed) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: -4px;
}

.eyebrow {
  margin-bottom: var(--space-s);
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow--light {
  color: var(--gold);
}

/* Available to screen readers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-l);
  border: 1px solid transparent;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

/* On paper */

.button--primary {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--paper);
}

.button--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.button--primary:active {
  background: var(--espresso-deep);
}

.button--ghost {
  background: transparent;
  border-color: var(--gold-ink);
  color: var(--gold-ink);
}

.button--ghost:hover {
  background: var(--gold-ink);
  color: var(--paper);
}

.button--ghost:active {
  background: #634e29;
  border-color: #634e29;
}

/* On dark ground */

.button--light {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--espresso);
}

.button--light:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--espresso);
}

.button--light:active {
  background: #b08f4d;
  border-color: #b08f4d;
}

.button--outline-light {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.button--outline-light:hover {
  background: var(--gold);
  color: var(--espresso);
}

.button--outline-light:active {
  background: #b08f4d;
  border-color: #b08f4d;
  color: var(--espresso);
}

/* --------------------------------------------------------------------------
   Header
   Espresso, so it reads as the top of the dark hero rather than a pale band
   sitting on it. Uses the metallic mark, which needs a dark ground.
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--paper);
  transition: transform 320ms var(--ease),
              background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

/* Solid only once the page has moved, or while the panel is open. Every page
   opens on a dark band or a dark hero, so the transparent state is always
   legible. */
.site-header.is-stuck {
  background: var(--espresso);
  border-bottom-color: var(--hairline-dark);
}

/* Driven by main.js. Only applied after a sustained downward scroll, never
   on a small movement, and cleared by any upward scroll. */
.site-header.is-hidden {
  transform: translateY(-100%);
}

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

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand__mark {
  width: 72px;
  height: auto;
}

/* Mobile navigation toggle */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--hairline-dark);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--paper);
  transition: transform var(--speed) var(--ease),
              opacity var(--speed) var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: relative;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 5px;
}

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

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Primary navigation, phone and tablet panel first
   -------------------------------------------------------------------------- */

.primary-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: calc(100svh - var(--header-height));
  display: flex;
  flex-direction: column;
  padding: var(--space-s) var(--gutter) var(--space-2xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--espresso);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: opacity var(--speed) var(--ease),
              transform var(--speed) var(--ease),
              visibility var(--speed);
}

.primary-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.primary-nav__list {
  display: flex;
  flex-direction: column;
}

.nav-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--hairline-dark);
}

.nav-item__link {
  padding-block: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--paper);
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}

.nav-item__link:hover {
  color: var(--gold);
}

.nav-item__link[aria-current="page"] {
  color: var(--gold);
}

/* Disclosure button sits beside the link rather than replacing it, so the
   hub page stays reachable in one tap. */
.nav-item__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gold);
  cursor: pointer;
}

.nav-item__chevron {
  width: 12px;
  height: 8px;
  transition: transform var(--speed) var(--ease);
}

.nav-item__toggle[aria-expanded="true"] .nav-item__chevron {
  transform: rotate(180deg);
}

.submenu {
  grid-column: 1 / -1;
  display: none;
  padding-block: var(--space-2xs) var(--space-s);
}

.nav-item.is-open .submenu {
  display: grid;
}

.submenu a {
  display: block;
  padding-block: var(--space-2xs);
  padding-inline-start: var(--space-s);
  border-inline-start: 1px solid var(--hairline-dark);
  color: rgba(250, 247, 242, 0.86);
  font-size: var(--step-0);
  text-decoration: none;
  transition: color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.submenu a:hover {
  color: var(--gold);
  border-inline-start-color: var(--gold);
}

.primary-nav__cta {
  margin-top: var(--space-l);
}

/* Contact details at the foot of the phone and tablet panel. Someone who
   opens the menu is often looking for a way to get in touch, and on those
   sizes the footer is a long scroll away. */
.nav-contact {
  margin-top: auto;
  padding-top: var(--space-l);
  border-top: 1px solid var(--hairline-dark);
}

.nav-contact__links {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--step-0);
}

.nav-contact__links a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.nav-contact__links a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.nav-contact__address {
  margin-top: var(--space-s);
  color: rgba(250, 247, 242, 0.62);
  font-size: var(--step--1);
  font-style: normal;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Primary navigation, desktop
   -------------------------------------------------------------------------- */

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

  .primary-nav {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-l);
    padding: 0;
    overflow: visible;
    background: transparent;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-l);
  }

  .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    border-bottom: 0;
  }

  .nav-item__link {
    padding-block: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    transition: border-color var(--speed) var(--ease),
                color var(--speed) var(--ease);
  }

  .nav-item__link:hover,
  .nav-item__link[aria-current="page"] {
    border-bottom-color: var(--gold);
  }

  .nav-item__toggle {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Click driven rather than hover driven, so aria-expanded always matches
     what is on screen. */
  .submenu {
    position: absolute;
    top: calc(100% + var(--space-s));
    left: calc(var(--space-s) * -1);
    z-index: 60;
    min-width: 17rem;
    padding: var(--space-xs) 0;
    background: var(--espresso);
    border: 1px solid var(--hairline-dark);
  }

  .submenu a {
    padding: var(--space-2xs) var(--space-m);
    border-inline-start: 0;
    font-size: var(--step--1);
  }

  .submenu a:hover {
    color: var(--gold);
    background: rgba(194, 161, 95, 0.08);
  }

  .primary-nav__cta {
    margin-top: 0;
  }

  /* The footer carries all of this at desktop widths. */
  .nav-contact {
    display: none;
  }

  .brand__mark {
    width: 88px;
  }
}

/* --------------------------------------------------------------------------
   Hero
   Full bleed photograph with the type over it.

   Contrast is carried by the scrim, not by the photograph, so the type stays
   legible whatever image is swapped in later. Measured against the brightest
   area of the current image, paper text sits at about 9:1 and gold at about
   4.6:1 in the text zone. Both clear 4.5:1.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* The header is fixed and overlays this, so the type clears it here. */
  padding-top: var(--header-height);
  display: grid;
  /* One explicit row, and the text is pinned to it below. Without this, any
     stray element that ends up as a grid item creates a second row, the free
     space is split between them, and align-items has nothing left to do. */
  grid-template-rows: minmax(0, 1fr);
  align-items: end;
  /* Exactly one screen. The type below is sized to fit inside it, so nothing
     is cut off and nothing has to be scrolled for. */
  min-height: 100svh;
  isolation: isolate;
  background: var(--espresso);
  overflow: hidden;
}

/* picture is an inline element and would otherwise become a grid item of the
   hero. display: contents removes it from layout so the img behaves exactly
   as it did before art direction was added. */
.hero picture {
  display: contents;
}

.hero__image {
  position: absolute;
  /* Inset from the padding box would leave a strip of espresso under the
     fixed header. The image runs to the very top of the viewport. */
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The phone crop is cut to the box ratio and already framed, so it only
     needs centring. The tablet and desktop crops are repositioned below. */
  object-position: center center;
}

/* The scrim. Deepest at the bottom where the type sits, lifting towards the
   top so the photograph is still legible as a photograph. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(18, 15, 13, 0.94) 0%, rgba(18, 15, 13, 0.7) 34%, rgba(18, 15, 13, 0.28) 68%, rgba(18, 15, 13, 0.34) 100%);
  pointer-events: none;
}

.hero__text {
  grid-row: 1;
  grid-column: 1;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  /* The block is bottom aligned, so any slack in the hero collects above it.
     A deeper bottom padding pulls the block up and evens the two gaps out. */
  padding-block: var(--space-l) var(--space-3xl);
  color: var(--paper);
}

.hero__heading {
  margin-top: var(--space-2xs);
  max-width: 20ch;
  color: var(--paper);
  font-size: var(--step-3);
}

.hero__lede {
  margin-top: var(--space-s);
  max-width: 38ch;
  color: rgba(250, 247, 242, 0.86);
  font-size: var(--step-0);
  line-height: 1.55;
}

/* Buttons stack full width on a phone. Two part-width buttons of different
   lengths read as a mistake, and a full width target is easier to hit. */
.hero__actions {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: rgba(250, 247, 242, 0.86);
}

.hero__rating {
  color: var(--gold);
  font-weight: 600;
}

.hero__divider {
  width: 1px;
  height: 1rem;
  background: var(--hairline-dark);
}

.hero__phone {
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.25em;
}

/* Tablet portrait. Not a stretched phone: the buttons go back to sitting side
   by side, the display type steps up, and the measures are pulled in so the
   lines do not run the full width of an 820px screen. */
@media (min-width: 37.5em) {
  /* Centred rather than bottom anchored. On a tall tablet a bottom aligned
     block leaves a large void above it and reads as having fallen down. */
  /* padding-top clears the fixed header, so without a matching bottom the
     centred block lands half the header height too low. */
  .hero {
    align-items: center;
    padding-bottom: var(--header-height);
  }

  /* The tablet box is usually a little wider in ratio than the crop, so cover
     trims top and bottom. Anchoring low spends that trim on the forehead
     rather than splitting it evenly. Where there is no slack this has no
     effect, so it cannot zoom in. */
  .hero__image {
    object-position: center 50%;
  }

  /* The shared type scale is set for body copy and leaves the hero block
     small and tucked into the left of a 740px container. Everything here is
     scaled up to fill the frame, which is left at its full height. */
  .hero__heading {
    max-width: 20ch;
    font-size: clamp(2.9rem, 2.2rem + 1.8vw, 3.6rem);
  }

  .hero__lede {
    max-width: 42ch;
    margin-top: var(--space-m);
    font-size: var(--step-2);
  }

  .hero__actions .button {
    min-height: 3.5rem;
    padding-inline: var(--space-xl);
    font-size: var(--step-0);
  }

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

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--space-xl);
  }

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

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

@media (min-width: 56em) {
  .hero {
    /* Back to bottom aligned on desktop, where the block sits in the lower
       left of a wide frame, so the padding balance is not needed. */
    align-items: end;
    padding-bottom: 0;
    /* Capped as well as floored, so a short laptop cannot push the block
       past the fold. */
    min-height: clamp(34rem, 82svh, 50rem);
    max-height: 100svh;
  }

  .hero__image {
    /* Mapping lines and both brows held in frame as the band gets wider and
       shallower. Tested against a hero ratio of about 2.26 at 1920. */
    object-position: center 45%;
  }

  .hero::after {    background:
      linear-gradient(to top, rgba(18, 15, 13, 0.92) 0%, rgba(18, 15, 13, 0.55) 38%, rgba(18, 15, 13, 0.18) 72%, rgba(18, 15, 13, 0.28) 100%),
      linear-gradient(to right, rgba(42, 33, 27, 0.62) 0%, rgba(42, 33, 27, 0.12) 62%);
  }

  /* Padding is capped at the spacing token but also tracks viewport height,
     so a short laptop does not inherit the padding a 1080 monitor can
     afford. At 1080 tall this resolves to the token and nothing moves. */
  .hero__text {
    padding-block: min(var(--space-3xl), 13svh);
  }

  .hero__heading {
    max-width: 15ch;
    font-size: var(--step-4);
  }

  .hero__lede {
    max-width: 48ch;
    margin-top: var(--space-m);
    font-size: var(--step-1);
  }

  .hero__actions .button {
    min-height: 3rem;
    padding-inline: var(--space-l);
    font-size: var(--step--1);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--space-xl);
  }

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

/* Safety net for genuinely short viewports: a laptop in a small window, a
   tablet in landscape, or a phone turned sideways. Starts at the tablet
   breakpoint because a landscape phone is wider than 37.5em. */
@media (min-width: 37.5em) and (max-height: 700px) {
  .hero__heading {
    font-size: var(--step-3);
  }

  .hero__lede {
    margin-top: var(--space-s);
    font-size: var(--step-0);
  }

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

  .hero__trust {
    margin-top: var(--space-m);
  }
}

/* The heading steps up again above the design width so it does not stall on
   a 1920 or 2560 monitor. */
@media (min-width: 100em) {
  .hero__heading {
    font-size: var(--step-5);
  }
}

/* --------------------------------------------------------------------------
   Page header

   Inner pages carry no hero image. The band runs straight on from the espresso
   nav so the two read as one masthead, and LCP is the h1 rather than a photo.
   -------------------------------------------------------------------------- */

/* The nav has no background until you scroll, so this band is the masthead
   and the nav floats on it. No seam, and no two stacked bars. */
.page-header {
  background: var(--espresso);
  color: var(--paper);
}

.page-header__inner {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  /* The header is fixed and out of flow, so the band clears it itself. */
  padding-block: calc(var(--header-height) + var(--space-l)) clamp(2.5rem, 1.6rem + 4vw, 5rem);
}

/* No eyebrow above this. On an inner page the breadcrumb already names the
   page, and an eyebrow repeating it says the same word twice in two lines. */
.page-header__heading {
  max-width: 20ch;
  color: var(--paper);
  font-size: var(--step-3);
}

.page-header__lede {
  max-width: 58ch;
  margin-top: var(--space-m);
  color: rgba(250, 247, 242, 0.82);
  font-size: var(--step-0);
  line-height: 1.6;
}

.page-header :focus-visible {
  outline-color: var(--gold);
}

@media (min-width: 56em) {
  .page-header__heading {
    font-size: var(--step-4);
  }

  .page-header__lede {
    font-size: var(--step-1);
  }
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.breadcrumb {
  margin-bottom: var(--space-xl);
  font-size: var(--step--1);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: rgba(250, 247, 242, 0.62);
}

.breadcrumb li + li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transform: rotate(45deg);
}

.breadcrumb a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.breadcrumb a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* --------------------------------------------------------------------------
   Treatment groups
   -------------------------------------------------------------------------- */

.treatment-group + .treatment-group {
  margin-top: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  padding-top: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  border-top: 1px solid var(--hairline);
}

.treatment-group .section__head {
  margin-bottom: var(--space-l);
}

.treatment-group .section__heading {
  font-size: var(--step-2);
}

/* --------------------------------------------------------------------------
   Sections

   Background rotation for this page, checked for adjacent matches:
   hero espresso, treatments paper, about paper-warm, then reviews espresso,
   what to expect paper, CTA paper-warm, footer espresso.
   -------------------------------------------------------------------------- */

.section {
  /* Deliberately tighter than the spacing scale's top end. The 3xl token is
     sized for a full bleed hero, not for stacked content sections. */
  padding-block: clamp(2.5rem, 1.6rem + 4vw, 5rem);
}

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

.section--warm {
  background: var(--paper-warm);
}

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

.section__head {
  max-width: 52ch;
  margin-bottom: var(--space-xl);
}

.section__heading {
  font-size: var(--step-2);
  max-width: 22ch;
}

.section__lede {
  margin-top: var(--space-s);
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.6;
}

.section__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-xl);
}

.section__note {
  max-width: 44ch;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* A footer strip under a full width block. Left aligned text against a right
   aligned action, with a rule across the whole width so it reads as the end
   of the section rather than as something left over. */
.section__foot--split {
  gap: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hairline);
}

.section__foot--split .section__note {
  max-width: 52ch;
}

@media (min-width: 37.5em) {
  .section__foot--split {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Treatment cards
   -------------------------------------------------------------------------- */

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

/* Stacked, so the rule separates one card from the next rather than sitting
   inside a card. Removed once the cards sit side by side. */
.treatments li + li {
  padding-top: var(--space-l);
  border-top: 1px solid var(--hairline);
}

.treatment {
  /* Name, media, then body. Body takes the 1fr row so it fills whatever is
     left, which is what keeps the Read more line aligned across a row.

     DOM order is name first. In a single column that is the order it reads
     in, so a photograph sits under its own heading rather than under the
     card above it. At 37.5em and up the media is lifted to the first row. */
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.treatment__media {
  display: block;
  overflow: hidden;
  /* A fixed ratio on the box rather than on the file, so the grid cannot
     shift whatever shape the source images turn out to be. */
  aspect-ratio: 4 / 3;
  background: var(--paper-warm);
}

.treatment__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transition: transform 480ms var(--ease);
}

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

.treatment__body {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-s);
}

.treatment__name {
  /* Stacked, the name sits directly above its own image, so it needs enough
     air to read as a heading rather than as a caption. Reset to zero at
     37.5em where the image moves back above it. */
  margin: 0 0 var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.2;
}

.treatment__desc {
  display: block;
  margin-top: var(--space-2xs);
  max-width: 40ch;
  color: var(--ink-soft);
  font-size: var(--step-0);
}

.treatment__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2xs);
  /* Pushed to the bottom of the card rather than sitting under the text, so
     a two line and a three line description still end on the same line. */
  margin-top: auto;
  padding-top: var(--space-s);
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.treatment__arrow {
  width: 16px;
  height: 10px;
  transition: transform var(--speed) var(--ease);
}

.treatment:hover .treatment__arrow {
  transform: translateX(4px);
}

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

  .treatments li + li {
    padding-top: 0;
    border-top: 0;
  }

  /* Cards sit side by side from here, so the image goes back on top and the
     rule moves with it, from above the description to above the name. */
  .treatment__media {
    grid-row: 1;
  }

  .treatment__name {
    grid-row: 2;
    /* Once cards are in a row, a one line name and a two line name would
       start their descriptions at different heights. Reserving two lines
       keeps the whole row on the same baselines. */
    min-height: 2.4em;
    margin-bottom: 0;
    padding-top: var(--space-s);
    margin-top: var(--space-s);
    border-top: 1px solid var(--hairline);
    transition: border-color var(--speed) var(--ease);
  }

  .treatment:hover .treatment__name {
    border-top-color: var(--gold);
  }

  .treatment__body {
    grid-row: 3;
    margin-top: 0;
  }
}

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

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

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

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

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

.step {
  padding-top: var(--space-s);
  border-top: 1px solid var(--hairline);
}

.step__number {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--gold-ink);
}

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

.step__desc {
  margin-top: var(--space-2xs);
  color: var(--ink-soft);
  font-size: var(--step-0);
}

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

  /* Five items in a two column grid leaves a lone card on the last row.
     Letting the fifth run full width reads as deliberate rather than short. */
  .step:last-child {
    grid-column: 1 / -1;
  }

  .step:last-child .step__desc {
    max-width: 60ch;
  }
}

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

  .step:last-child {
    grid-column: auto;
  }

  .step:last-child .step__desc {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Contact cards

   Bordered boxes with one button each, deliberately unlike the borderless
   labelled rows used for the studio details further down the same page.
   -------------------------------------------------------------------------- */

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

.contact-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-l);
  border: 1px solid var(--hairline);
  transition: border-color var(--speed) var(--ease);
}

.contact-card:hover {
  border-color: var(--gold);
}

.contact-card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.2;
}

.contact-card__desc {
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-l);
  color: var(--ink-soft);
  font-size: var(--step-0);
}

/* Pinned to the base so all three sit on one line whatever the description
   length, and stretched to the card so three different labels do not produce
   three different button widths. */
.contact-card .button {
  align-self: stretch;
  margin-top: auto;
}

/* Three across only from the desktop breakpoint. At 600px a third of the
   shell is about 163px, which leaves under 100px of text once the card
   padding is removed, and no button label survives that. */
@media (min-width: 56em) {
  .contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
  }

  /* Reserving two lines keeps the descriptions on the same baseline across
     the row. */
  .contact-card__title {
    min-height: 2.4em;
  }
}

/* --------------------------------------------------------------------------
   Price list

   Name left, figure right, hairline between. Prices live on the treatment
   page they belong to rather than on a single prices page, so a change
   touches one page rather than a table everyone has to scroll.
   -------------------------------------------------------------------------- */

.prices {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.prices__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--hairline);
}

.prices dt {
  flex: 1 1 14rem;
}

.prices__note {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.prices dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  white-space: nowrap;
}

/* The decision point. Someone has just read what the treatment is and what it
   costs, so the action belongs here rather than three sections further down. */
.prices__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.prices__foot {
  margin-top: var(--space-m);
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   Info list

   Labelled rows rather than a grid of prose boxes. Follows the same two
   column shape as the FAQ, so the two read as one family.
   -------------------------------------------------------------------------- */

.info-list {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.info-list__row {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--hairline);
}

.info-list dt {
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.info-list dd {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-soft);
}

/* An action inside a row drops to its own line rather than running on from
   the sentence, so the eye can find it. */
.info-list dd > .inline-link {
  display: inline-block;
  margin-top: var(--space-2xs);
  margin-right: var(--space-m);
}

.contact-address {
  font-style: normal;
}

.inline-link {
  color: var(--gold-ink);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.25em;
}

@media (min-width: 37.5em) {
  .info-list__row {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--space-m);
    align-items: baseline;
  }
}

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

   No Review or AggregateRating schema anywhere near this. These were left on
   Google, and marking up third party reviews as your own breaches Google's
   structured data guidelines. The link out is the attribution.
   -------------------------------------------------------------------------- */

.section--dark {
  background: var(--espresso);
  color: var(--paper);
}

.section--dark .section__heading {
  color: var(--paper);
}

.section--dark .section__lede,
.section--dark .section__note {
  color: rgba(250, 247, 242, 0.78);
}

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

.review {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: var(--space-m);
  border: 1px solid var(--hairline-dark);
}

.review__stars {
  color: var(--gold);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
}

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

.review__quote p {
  color: rgba(250, 247, 242, 0.88);
  font-size: var(--step-0);
  line-height: 1.6;
}

.review__by {
  /* Pinned to the base so names line up across a row whatever the quote
     length, the same rule the treatment cards follow. */
  margin-top: auto;
  padding-top: var(--space-m);
  display: grid;
  gap: var(--space-3xs);
}

.review__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--paper);
}

.review__treatment {
  color: var(--gold);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

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

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

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

/* --------------------------------------------------------------------------
   Split section

   DOM order is always text first. The media only moves to the left column
   visually, and only at 56em and above, so the stacked view never opens on
   an image.
   -------------------------------------------------------------------------- */

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

.split__text > p + p {
  margin-top: var(--space-m);
}

.split__text > p {
  max-width: 54ch;
  color: var(--ink-soft);
}

.split__text .section__heading {
  margin-bottom: var(--space-m);
}

.split__signature {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
}

.split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.split__media {
  /* Capped as well as ratioed. Half of a 1560px shell at 4:5 would be over
     900px tall, which is a poster rather than a portrait. */
  aspect-ratio: 4 / 5;
  max-width: 26rem;
  overflow: hidden;
  background: var(--paper);
}

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

/* A taller portrait for pages where the person is the subject rather than a
   supporting image. */
.split--wide-media .split__media {
  max-width: 34rem;
}

@media (min-width: 56em) {
  .split {
    /* The shell is sized for a six card grid. A two column split of the same
       width leaves the text column far wider than its measure, which reads as
       the pair having drifted left. Cap and centre it instead. */
    max-width: 68rem;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xl);
  }

  .split--wide-media {
    max-width: 76rem;
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  }

  .split__media--first {
    grid-column: 1;
    grid-row: 1;
  }

  .split__media--first + .split__text,
  .split__text {
    grid-column: 2;
    grid-row: 1;
  }
}

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

   Native details and summary rather than a scripted accordion. There is no
   aria-expanded to fall out of sync, and keyboard operation comes for free.
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  border-top: 1px solid var(--hairline);
}

.faq__item {
  border-bottom: 1px solid var(--hairline);
}

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-s);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  list-style: none;
  transition: color var(--speed) var(--ease);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover {
  color: var(--gold-ink);
}

.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.25rem;
  border-right: 1px solid var(--gold-ink);
  border-bottom: 1px solid var(--gold-ink);
  transform: rotate(45deg);
  transition: transform var(--speed) var(--ease);
}

.faq__item[open] .faq__q::after {
  transform: rotate(-135deg);
}

.faq__a {
  padding-bottom: var(--space-m);
}

.faq__a p {
  max-width: 68ch;
  color: var(--ink-soft);
}

@media (min-width: 56em) {
  .faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .faq__inner .section__head {
    margin-bottom: 0;
  }

  .faq__inner .section__foot {
    grid-column: 2;
  }
}

/* --------------------------------------------------------------------------
   Guide cards

   Text led, since there is no photography for these and a stock image on top
   of an article would be decoration rather than information.
   -------------------------------------------------------------------------- */

.guides {
  display: grid;
  border-top: 1px solid var(--hairline);
}

.guides li {
  border-bottom: 1px solid var(--hairline);
}

.guide {
  display: grid;
  padding-block: var(--space-l);
  color: inherit;
  text-decoration: none;
}

.guide__meta {
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.guide__title {
  margin-top: var(--space-2xs);
  max-width: 24ch;
  font-size: var(--step-2);
  transition: color var(--speed) var(--ease);
}

.guide:hover .guide__title {
  color: var(--gold-ink);
}

.guide__standfirst {
  display: block;
  margin-top: var(--space-2xs);
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--ink-soft);
}

.guide__desc {
  display: block;
  margin-top: var(--space-s);
  max-width: 62ch;
  color: var(--ink-soft);
}

.guide__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide:hover .treatment__arrow {
  transform: translateX(4px);
}

@media (min-width: 56em) {
  .guide {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    padding-block: var(--space-xl);
  }

  .guide__meta {
    grid-column: 1;
    grid-row: 1;
  }

  .guide__title {
    grid-column: 1;
    grid-row: 2;
    margin-top: var(--space-2xs);
  }

  .guide__standfirst {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .guide__desc {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--space-s);
  }

  .guide__more {
    grid-column: 2;
    grid-row: 4;
  }
}

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

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

.gallery__item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--paper-warm);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 480ms var(--ease);
}

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

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

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

/* Eight images. Two rows of four at desktop rather than five and three, which
   leaves a ragged last row. */
.gallery--quad {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 56em) {
  .gallery--quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* A pair rather than a grid. Two images in a five column layout would sit as
   two thumbnails and a gap, so they take a column each and get more room. */
.gallery--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}

.gallery--pair .gallery__item {
  aspect-ratio: 4 / 3;
}

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

@media (min-width: 56em) {
  .gallery--pair {
    max-width: 68rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l);
  }
}

/* Native dialog, so focus trapping, Escape and inert-ing the page behind are
   handled by the browser rather than by script. */
.lightbox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100% - (var(--gutter) * 2), 62rem);
  max-height: 92svh;
  padding: var(--space-m);
  border: 0;
  background: var(--espresso);
  color: var(--paper);
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(18, 15, 13, 0.86);
}

.lightbox__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72svh;
  object-fit: contain;
  margin-inline: auto;
}

.lightbox__caption {
  margin-top: var(--space-s);
  max-width: 62ch;
  color: rgba(250, 247, 242, 0.82);
  font-size: var(--step--1);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--espresso);
  border: 1px solid var(--hairline-dark);
  color: var(--paper);
  cursor: pointer;
  transition: color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.lightbox__close {
  top: calc(var(--space-m) * -1 - 2.75rem);
  right: 0;
}

.lightbox__close svg {
  width: 16px;
  height: 16px;
}

.lightbox__nav svg {
  width: 10px;
  height: 16px;
}

.lightbox__nav--prev {
  left: 0;
  bottom: calc(var(--space-m) * -1 - 2.75rem);
}

.lightbox__nav--next {
  left: 3.25rem;
  bottom: calc(var(--space-m) * -1 - 2.75rem);
}

.lightbox :focus-visible {
  outline-color: var(--gold);
}

@media (min-width: 56em) {
  .lightbox__nav--prev,
  .lightbox__nav--next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .lightbox__nav--prev {
    left: calc(var(--space-m) * -1 - 3.25rem);
  }

  .lightbox__nav--next {
    left: auto;
    right: calc(var(--space-m) * -1 - 3.25rem);
  }
}

/* --------------------------------------------------------------------------
   Long form prose

   For the legal pages. Bullets are re-enabled here, since the global reset
   strips them and a policy needs real lists.
   -------------------------------------------------------------------------- */

.prose {
  max-width: 70ch;
}

.prose__meta {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

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

/* Only the very first element loses its top margin. Keyed to first-child
   rather than first-of-type, because a heading that follows two paragraphs is
   still the first of its type and was having its spacing stripped. */
.prose > *:first-child {
  margin-top: 0;
}

/* A subheading straight after its parent heading does not need the full gap. */
.prose h2 + h3 {
  margin-top: var(--space-m);
}

.prose p {
  color: var(--ink-soft);
}

.prose p + p {
  margin-top: var(--space-s);
}

.prose ul,
.prose ol {
  margin-top: var(--space-s);
  padding-inline-start: 1.4rem;
  color: var(--ink-soft);
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

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

.prose a {
  color: var(--gold-ink);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.25em;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

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

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

.cta__text .section__lede {
  margin-top: var(--space-2xs);
}

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

.cta__phone {
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.cta__phone a {
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.25em;
}

@media (min-width: 56em) {
  .cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2xl);
  }

  .cta__actions {
    justify-content: flex-end;
  }
}

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

   Carries the complete link set. Every treatment page, every top level page
   and every insights post, on every page of the site. Never a featured subset
   with a "view all", because that pushes everything below the hub to depth 2.
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--espresso);
  color: rgba(250, 247, 242, 0.82);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-xl);
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 1.6rem + 4vw, 5rem);
}

.site-footer__logo {
  width: 132px;
  height: auto;
}

.site-footer__blurb {
  max-width: 34ch;
  margin-top: var(--space-s);
  font-size: var(--step--1);
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-top: var(--space-m);
  font-size: var(--step--1);
}

.site-footer__title {
  margin-bottom: var(--space-s);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer__links {
  display: grid;
  /* Row spacing rather than columns. Splitting a quarter width footer column
     in two leaves about 74px per sub-column and every label wraps. */
  gap: var(--space-2xs);
  font-size: var(--step--1);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.site-footer a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.site-footer a[aria-current="page"] {
  color: var(--gold);
}

.site-footer :focus-visible {
  outline-color: var(--gold);
}

.site-footer__address {
  font-style: normal;
  font-size: var(--step--1);
  line-height: 1.7;
}

.site-footer__note {
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-s);
  color: rgba(250, 247, 242, 0.62);
  font-size: var(--step--1);
}

.site-footer__hours {
  margin: var(--space-m) 0 0;
  font-size: var(--step--1);
}

.site-footer__hours > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  max-width: 15rem;
  padding-block: var(--space-3xs);
}

.site-footer__hours dt {
  color: rgba(250, 247, 242, 0.62);
}

.site-footer__hours dd {
  margin: 0;
}

.site-footer__legal {
  border-top: 1px solid var(--hairline-dark);
}

.site-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  padding-block: var(--space-m);
  color: rgba(250, 247, 242, 0.62);
  font-size: var(--step--1);
}

.site-footer__legal-inner ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

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

@media (min-width: 56em) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl) var(--space-l);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

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