/* ==========================================================================
   SJH PROSTHETICS
   Palette derived from the lab's own case photography: blue-grey model
   resin, dental stone, cervical dentine amber, and the true black the
   DSLR case shots are already photographed against.
   ========================================================================== */

/* Instrument Sans, self-hosted. SIL Open Font Licence — see fonts/OFL.txt.
   Served from our own domain rather than Google Fonts, so no visitor's IP
   address is sent to a third party just to draw the text. Variable weight
   400-700 covers every weight the site uses; latin-ext carries accented
   names such as Łukasz and Zoë. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* Opt out of browser auto-dark-theme.
     Chrome on Android and Samsung Internet will otherwise force-darken the
     page: they invert the background but mishandle text colours set via CSS
     variables, producing dark text on a dark background. "only light" is the
     reliable opt-out — plain "light" is treated as a hint and can be ignored. */
  color-scheme: only light;

  /* Colour */
  --paper:    #FBFAF8;   /* main page background */
  --stone:    #E8E6DF;   /* dental stone — alternate section background */
  --ink:      #1C2529;   /* slate ink, from model resin shadow */
  --slate:    #4E5F69;   /* mid slate — secondary text, structure */
  --hairline: #C9C6BC;   /* rules and dividers */
  --dentine:  #875E26;   /* cervical dentine amber — the single accent.
                            Darkened from #A9762F to pass AA at small text sizes
                            on both paper (5.50) and stone (4.60). */
  --black:    #000000;   /* photo bands. MUST match your image backgrounds. */
  --on-black: #EFEDE7;
  --on-black-quiet: #8A8C87;  /* secondary text on black */
  --on-black-muted: #B4B2A9;  /* body copy on black */
  --on-black-rule:  #33332F;  /* hairlines and outline buttons on black */
  --ink-rule:       #333A3E;  /* hairlines on the ink footer */

  /* Type */
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale */
  --step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.62rem + 1.6vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4.4rem);

  /* Layout */
  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --bleed-max: 1320px;
}

/* --------------------------------------------------------------------------
   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);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--dentine);
  outline-offset: 3px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -4rem;
  background: var(--ink); color: var(--on-black);
  padding: 0.75rem 1rem; z-index: 100; transition: top 0.15s;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--bleed-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: clamp(3.5rem, 9vw, 7rem);
  background: var(--paper);
  color: var(--ink);
}
.section--stone { background: var(--stone); color: var(--ink); }
.section--black { background: var(--black); color: var(--on-black); }

.section__head { max-width: var(--measure); margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__title {
  color: inherit;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.section__lede {
  margin-top: 0.75rem;
  color: var(--slate);
  max-width: 58ch;
}
.section--black .section__lede { color: var(--on-black-quiet); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  padding: 0.85em 1.5em;
  border-radius: 2px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--dentine); }
.btn--outline { border-color: var(--hairline); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); }
.btn--on-black { border-color: var(--on-black-rule); color: var(--on-black); }
.btn--on-black:hover { border-color: var(--on-black); }
.btn--light { background: var(--on-black); color: var(--black); }
.btn--light:hover { background: #FFF; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  padding-block: 1.35rem;
}
/* The hero banner has a pale model directly beneath the header, which swallows
   light text. A short gradient restores contrast without a solid bar. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: -1;
  display: none;
}
@media (min-width: 62rem) {
  .site-header::before { display: block; }
}
.brand, .nav { text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--on-black);
}
.brand__mark { width: 44px; height: 44px; flex: none; }
.brand__name {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
}
@media (max-width: 26rem) { .brand__name { display: none; } }

/* Footer seal */
.footer-mark { width: 76px; height: 76px; margin-bottom: 1.25rem; }
.nav { display: flex; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; }
.nav a {
  font-size: var(--step--1);
  color: var(--on-black);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.15s;
}
.nav a:hover,
.nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
/* Client login (Vevi): set apart from the page links as a quiet outline. */
.nav a.nav__portal {
  opacity: 1;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--on-black-rule);
  border-radius: 2px;
}
.nav a.nav__portal:hover { border-color: var(--on-black); }

/* The toggle only exists on narrow screens. */
.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--on-black-rule);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 50%;
  width: 1.15rem;
  height: 1.5px;
  background: var(--on-black);
  transform: translateX(-50%);
  transition: transform 0.18s, opacity 0.18s;
}
.nav-toggle__bars { top: 50%; margin-top: -0.75px; }
.nav-toggle__bars::before { content: ""; top: -6px; }
.nav-toggle__bars::after { content: ""; top: 6px; }

@media (max-width: 52rem) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    right: var(--gutter);
    left: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--black);
    border: 1px solid var(--on-black-rule);
    border-radius: 2px;
    padding: 0.5rem 0;
    display: none;
  }
  .site-header.is-open .nav { display: flex; }
  .nav a {
    padding: 0.85rem 1.1rem;
    opacity: 1;
    font-size: var(--step-0);
    border-bottom: 1px solid var(--on-black-rule);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a.nav__portal {
    padding: 0.85rem 1.1rem;
    border: 0;
    border-radius: 0;
  }
  /* Turn the bars into a cross while open. */
  .site-header.is-open .nav-toggle__bars { background: transparent; }
  .site-header.is-open .nav-toggle__bars::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
  .site-header.is-open .nav-toggle__bars::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   Hero — composed banner with the headline over it
   -------------------------------------------------------------------------- */
/* The banner is 2:1. On a portrait phone, cropping it to fill would lose two
   thirds of the width and cut the denture off whichever focal point is chosen.
   So on narrow screens the hero stacks instead: the whole banner is shown at
   its own proportions, with the text beneath it. The image background and the
   hero background are both pure black, so there is no visible letterboxing. */
.hero {
  position: relative;
  background: var(--black);
  color: var(--on-black);
  overflow: hidden;
  padding-top: 4.5rem;          /* clears the fixed header */
  /* The stacked hero's height follows the image, which can land on a fractional
     pixel and let a sliver of the page background show beneath it. This paints
     a black line immediately below, with no effect on layout. */
  box-shadow: 0 1px 0 0 var(--black);
}
.hero__media { line-height: 0; }
.hero__media img { width: 100%; height: auto; display: block; }

@media (min-width: 62rem) {
  .hero {
    min-height: min(84svh, 720px);
    display: flex;
    align-items: flex-end;
    padding-top: 0;
  }
  .hero__media { position: absolute; inset: 0; }
  .hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 30% 50%;
  }
}
/* The banner has work in the top left and bottom right, with empty black
   through the lower left. The scrim darkens only that empty corner, so the
   headline stays legible without dulling the crown case above it. */
.hero__scrim { display: none; }
@media (min-width: 62rem) {
  .hero__scrim {
    display: block;
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 95% at 8% 108%,
        rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 38%, rgba(0,0,0,0) 72%),
      linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 38%);
  }
}
.hero__inner {
  position: relative;
  padding-block: clamp(1.75rem, 6vw, 3rem) clamp(2.5rem, 8vw, 4rem);
  width: 100%;
}
@media (min-width: 62rem) {
  .hero__inner { padding-block: clamp(3rem, 8vw, 5.5rem); }
}
/* The headline reaches up into the crown case at wide viewports. A shadow holds
   it at every size, where nudging it down would only fix one. Same treatment as
   the wordmark, so it reads as deliberate. */
.hero__headline {
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 17ch;
  text-wrap: balance;
  text-shadow: none;
}
@media (min-width: 62rem) {
  .hero__headline { text-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.9); }
}
.hero__standfirst {
  margin-top: 1.25rem;
  max-width: 44ch;
  color: var(--on-black-muted);
  font-size: var(--step-0);
}
@media (min-width: 62rem) {
  .hero__standfirst { text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
}
.hero__actions {
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.hero__badge {
  display: inline-block;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--on-black);
  border: 1px solid var(--on-black-rule);
  padding: 0.4em 0.85em;
  border-radius: 2px;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Services — laid out like a lab docket
   -------------------------------------------------------------------------- */
.docket { border-top: 1px solid var(--hairline); }
.service {
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(2rem, 4vw, 2.75rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
}
@media (min-width: 58rem) {
  .service { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.service__name {
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.service__lede {
  margin-top: 0.6rem;
  color: var(--slate);
  max-width: 46ch;
}
.spec { display: grid; gap: 0; align-content: start; }
.spec__row {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--step--1);
}
.spec__row:first-child { border-top: 1px solid var(--hairline); }
.spec__label { color: var(--slate); }
.spec__value { color: var(--ink); }
.spec__value--todo { color: var(--dentine); }

/* --------------------------------------------------------------------------
   Reasons
   -------------------------------------------------------------------------- */
.reasons {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 40rem) { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .reasons { grid-template-columns: repeat(4, 1fr); } }
.reason {
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
  background: var(--paper);
  color: var(--ink);
}
.reason__title { font-size: var(--step-0); font-weight: 600; color: var(--ink); }
.reason__body { margin-top: 0.5rem; color: var(--slate); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   Gallery — full-bleed black so photo backgrounds disappear
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filter {
  font: inherit;
  font-size: var(--step--1);
  background: none;
  border: 1px solid var(--on-black-rule);
  color: var(--on-black-quiet);
  padding: 0.45em 1em;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.filter:hover { color: var(--on-black); }
.filter[aria-pressed="true"] { color: var(--black); background: var(--on-black); border-color: var(--on-black); }

.grid {
  display: grid;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.case { margin: 0; }
.case img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--black);
}
.case figcaption {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  color: var(--on-black-quiet);
  line-height: 1.5;
}
.gallery__empty {
  border: 1px dashed var(--on-black-rule);
  padding: 2.5rem;
  color: var(--on-black-quiet);
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.quotes { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 52rem) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { border-top: 1px solid var(--hairline); padding-top: 1.25rem; }
.quote p { font-size: var(--step-0); }
.quote footer { margin-top: 0.9rem; font-size: var(--step--1); color: var(--slate); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 58rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: var(--step--1); color: var(--slate); }
.field input, .field textarea {
  font: inherit;
  font-size: var(--step-0);
  padding: 0.7em 0.85em;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
}
.field textarea { min-height: 7rem; resize: vertical; }
.consent {
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-size: var(--step--1); color: var(--slate);
  margin-bottom: 1.25rem;
}
.consent input { margin-top: 0.25rem; }
.form-note { margin-top: 1rem; font-size: var(--step--1); color: var(--slate); }

.contact-line { font-size: var(--step-1); font-weight: 500; letter-spacing: -0.01em; }
.contact-line a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--on-black);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--step--1);
}
.site-footer a { color: var(--on-black); }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-grid h2 { font-size: var(--step--1); font-weight: 600; margin-bottom: 0.6rem; }
.footer-grid li, .footer-grid p { color: var(--on-black-quiet); margin-bottom: 0.3rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--ink-rule); color: var(--on-black-quiet);
}

/* --------------------------------------------------------------------------
   Editorial flag for unfinished content (remove before launch — see README)
   -------------------------------------------------------------------------- */
.todo {
  color: var(--dentine);
  font-style: italic;
}

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

/* --------------------------------------------------------------------------
   Gallery case cards and lightbox
   -------------------------------------------------------------------------- */
.case__open {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--black);
  cursor: zoom-in;
  line-height: 0;
}
/* Frame holds the image button and its step controls. The controls sit as
   siblings, not children, because nested buttons are invalid markup. */
.case__frame { position: relative; line-height: 0; }

.case__step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--on-black);
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--on-black-rule);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.case__step--prev { left: 0.5rem; }
.case__step--next { right: 0.5rem; }
.case__step:hover { background: rgba(0,0,0,0.85); border-color: var(--on-black); }

/* The controls are always visible. They are the only signal that a case has
   more than one view, so hiding them until hover defeats the point. */
.case__title { display: block; color: var(--on-black); margin-bottom: 0.25rem; }

/* Before / After tag, top left of a view. */
.case__tag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.3rem 0.55rem;
  font-size: var(--step--1);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-black);
  background: rgba(0,0,0,0.65);
  border-radius: 2px;
  pointer-events: none;
}
.case__tag[hidden] { display: none; }
.lightbox__frame { position: relative; line-height: 0; width: fit-content; max-width: 100%; margin-inline: auto; }

/* In-situ clinical photographs have no black backdrop, so they land as a bright
   rectangle on the gallery band. A hairline makes that edge read as intentional. */
.case--in-situ .case__open { outline: 1px solid var(--on-black-rule); outline-offset: -1px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox__figure {
  margin: 0;
  max-width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.lightbox__img {
  max-height: 72svh;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
}
.lightbox__caption {
  color: var(--on-black-quiet);
  font-size: var(--step--1);
  line-height: 1.55;
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.lightbox__counter { display: block; margin-top: 0.5rem; color: var(--on-black-quiet); }
.lightbox__close,
.lightbox__nav {
  background: none;
  border: 1px solid var(--on-black-rule);
  color: var(--on-black);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  flex: none;
}
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 2.5rem; height: 2.5rem;
  font-size: 1.5rem;
}
.lightbox__nav { width: 2.75rem; height: 4rem; font-size: 1.75rem; }
.lightbox__nav[hidden] { display: none; }
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--on-black); }
@media (max-width: 34rem) {
  .lightbox__nav { width: 2.25rem; height: 3rem; font-size: 1.4rem; }
}

/* --------------------------------------------------------------------------
   Sticky CTA — one persistent action per page
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  transform: translateY(100%);
  transition: transform 0.22s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}
.sticky-cta__line {
  font-size: var(--step--1);
  color: var(--slate);
  margin: 0;
}
@media (max-width: 34rem) {
  .sticky-cta__line { display: none; }
  .sticky-cta__inner { justify-content: stretch; }
  .sticky-cta .btn { flex: 1; text-align: center; }
}
/* Keep the footer clear of the bar */
.site-footer { padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) + 4rem); }

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* --------------------------------------------------------------------------
   Interior page headers (no hero photograph)
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--black);
  color: var(--on-black);
  padding-block: clamp(6rem, 13vw, 9rem) clamp(2.5rem, 5vw, 4rem);
}
.page-head__title {
  font-size: var(--step-3);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 20ch;
}
.page-head__lede {
  margin-top: 1rem;
  max-width: 52ch;
  color: var(--on-black-muted);
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.team { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 40rem) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .team { grid-template-columns: repeat(3, 1fr); } }
.person__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--stone);
  margin-bottom: 1rem;
}
.person__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--stone);
  color: var(--slate);
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.person__name { font-size: var(--step-1); font-weight: 500; letter-spacing: -0.015em; }
.person__creds {
  color: var(--slate);
  font-size: var(--step--1);
  margin-top: 0.2rem;
  line-height: 1.4;
}
.person__role { color: var(--dentine); font-size: var(--step--1); margin-top: 0.2rem; }
.person__bio { color: var(--slate); margin-top: 0.7rem; font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   Section link-through (homepage excerpts)
   -------------------------------------------------------------------------- */
.section__more { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* Testimonials: full quotes on the dedicated page run to several paragraphs */
.quote p + p { margin-top: 0.85rem; }
.quote__creds {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--step--1);
  color: var(--slate);
  line-height: 1.45;
}
/* The testimonials page shows fewer, longer quotes — give them room */
body[data-cta] #testimonials .quotes { max-width: 62rem; }


/* --------------------------------------------------------------------------
   Re-assert the light palette under a dark system preference.
   Belt and braces alongside `color-scheme: only light`: some in-app browsers
   and webviews inject their own dark styling based on prefers-color-scheme
   and ignore the colour-scheme declaration entirely. This site has no dark
   mode — if one is ever built, delete this block rather than fighting it.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  html, body { background: var(--paper) !important; color: var(--ink) !important; }
  .section, .reason { background: var(--paper) !important; color: var(--ink) !important; }
  .section--stone { background: var(--stone) !important; color: var(--ink) !important; }
  .section__title, .reason__title, .service__name, .person__name, .quote p {
    color: var(--ink) !important;
  }
  .section__lede, .reason__body, .service__lede, .spec__label,
  .quote footer, .quote__creds, .person__bio, .field label {
    color: var(--slate) !important;
  }
  .spec__value { color: var(--ink) !important; }
  .person__role { color: var(--dentine) !important; }

  /* Sections that are black by design stay black. */
  .section--black, .hero, .page-head {
    background: var(--black) !important;
    color: var(--on-black) !important;
  }
  .section--black .section__title, .hero__headline, .page-head__title {
    color: var(--on-black) !important;
  }
  .section--black .section__lede, .hero__standfirst, .page-head__lede,
  .case figcaption {
    color: var(--on-black-muted) !important;
  }
  .site-footer { background: var(--ink) !important; color: var(--on-black) !important; }
  .field input, .field textarea {
    background: var(--paper) !important; color: var(--ink) !important;
  }
  .sticky-cta { background: var(--paper) !important; }
  .sticky-cta__line { color: var(--slate) !important; }
  .btn--solid { background: var(--ink) !important; color: var(--paper) !important; }
}

/* --------------------------------------------------------------------------
   Homepage service summary cards (full spec docket lives on services.html)
   -------------------------------------------------------------------------- */
.service-cards {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 44rem) { .service-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .service-cards { grid-template-columns: repeat(3, 1fr); } }
.service-card { border-top: 2px solid var(--ink); padding-top: 1rem; }
.service-card__name {
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.service-card__lede {
  margin-top: 0.5rem;
  color: var(--slate);
  font-size: var(--step--1);
}
.service-card__link {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: var(--step--1);
  color: var(--dentine);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Horizontal rails — show more items without lengthening the page
   -------------------------------------------------------------------------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(78vw, 20rem), 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  /* The rail used to bleed to the screen edge, which took the scrollbar with
     it and left it sitting hard against the left of the display. It now stays
     within the page gutter, so the scrollbar lines up with the content. */
  scroll-padding-inline: 0;
}
.rail > * { scroll-snap-align: start; }
/* Fixed card width on wider screens. This was minmax(0, 24rem), which let the
   columns shrink to fit every card on screen: with 8 cases the cards got so
   narrow the step arrows covered the photos. A fixed width keeps the cards
   readable and lets the rail scroll. */
@media (min-width: 60rem) {
  .rail { grid-auto-columns: 21rem; }
}

/* Previous / next controls for rails. Added by site.js, and only shown when
   the rail actually overflows. Mouse users on desktop have no easy way to
   scroll sideways, so these stand in for a swipe. */
.rail-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.rail-nav[hidden] { display: none; }
.rail-nav button {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--on-black);
  background: transparent;
  border: 1px solid var(--on-black-rule);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s;
}
.rail-nav button:hover { border-color: var(--on-black); }
.rail-nav button:disabled { opacity: 0.35; cursor: default; border-color: var(--on-black-rule); }
.section--stone .rail-nav button { color: var(--ink); border-color: var(--hairline); }
.section--stone .rail-nav button:hover { border-color: currentColor; }
/* Scrollbar colours. Setting scrollbar-width makes current Chrome and Edge
   ignore the ::-webkit-scrollbar rules below and draw their default bar,
   which on Windows is a white track with arrow buttons. scrollbar-color is
   what those browsers read, so the bar is themed here: a hairline thumb on a
   transparent track. The webkit rules stay for older Safari. */
.rail { scrollbar-color: var(--on-black-rule) transparent; }
.section--stone .rail { scrollbar-color: var(--hairline) transparent; }
.rail::-webkit-scrollbar { height: 6px; background: transparent; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-button { display: none; }
.rail::-webkit-scrollbar-thumb { background: var(--on-black-rule); border-radius: 3px; }
.section--stone .rail::-webkit-scrollbar-thumb { background: var(--hairline); }

.rail-hint {
  font-size: var(--step--1);
  color: var(--on-black-quiet);
  margin-top: 0.25rem;
}
.section--stone .rail-hint { color: var(--slate); }
@media (min-width: 72rem) { .rail-hint { display: none; } }

/* Quotes inside a rail need a fixed-ish height so cards align */
.rail .quote {
  background: transparent;
  padding-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Forms: thank-you state and spam honeypot
   -------------------------------------------------------------------------- */
.form-thanks {
  background: var(--stone);
  border-left: 2px solid var(--dentine);
  padding: 1.25rem 1.5rem;
  color: var(--ink);
  max-width: 32rem;
  margin-top: 1.75rem;
}

/* Hidden from people, visible to bots. Not display:none — some bots skip those. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn[disabled] { opacity: 0.6; cursor: default; }

/* --------------------------------------------------------------------------
   Form fields: pairs, optional markers, interest chips
   -------------------------------------------------------------------------- */
.field-pair { display: grid; gap: 0 1rem; }
@media (min-width: 30rem) { .field-pair { grid-template-columns: 1fr 1fr; } }

.field__opt {
  color: var(--slate);
  font-weight: 400;
  opacity: 0.75;
}

.interests {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}
.interests legend {
  padding: 0;
  font-size: var(--step--1);
  color: var(--slate);
  margin-bottom: 0.6rem;
}
.interests__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  font: inherit;
  font-size: var(--step--1);
  line-height: 1.2;
  padding: 0.55em 0.9em;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--slate); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.section--stone .chip { background: var(--paper); }


/* Legal links sit quietly in the footer bottom line */
.footer-bottom a { color: var(--on-black); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Long-form prose pages (privacy policy, and anything similar later)
   -------------------------------------------------------------------------- */
.prose { max-width: 42rem; }
.prose__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--slate);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.prose__section { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.prose__heading {
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  margin-bottom: 0.75rem;
}
.prose p { margin-bottom: 0.85rem; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 0.85rem; padding-left: 1.1rem; list-style: disc; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose p, .prose li { color: var(--slate); }
.prose__updated {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--slate);
}

/* How work reaches us and gets back — sits under the send-a-case lede */
.postage-note {
  margin-top: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--dentine);
  color: var(--slate);
  font-size: var(--step--1);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Service thumbnails — circular, so a text-heavy page has something to look at
   -------------------------------------------------------------------------- */
.service__intro { display: flex; gap: 1.25rem; align-items: flex-start; }
.service__thumb {
  width: 76px; height: 76px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--black);
}
@media (min-width: 58rem) {
  .service__thumb { width: 92px; height: 92px; }
}
.service-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.service-card__thumb {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--black);
}

/* --------------------------------------------------------------------------
   Testimonial headshots — same circular treatment as the service thumbnails
   -------------------------------------------------------------------------- */
.quote footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.quote__photo {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--stone);
}
.quote__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--slate);
}
.section--stone .quote__photo { background: var(--paper); }
.quote__by { display: block; }

/* Spacing that used to sit in style="" attributes in the generated markup.
   Moved here so the content security policy can forbid inline styles outright. */
.lead-form--guide      { margin-top: 1.75rem; max-width: 32rem; }
.form-note--consent    { margin: -0.5rem 0 1.25rem; }
.contact-line--first   { margin-top: 1.75rem; }
.contact-line--next    { margin-top: 0.4rem; }

/* --------------------------------------------------------------------------
   Testimonials page — person beside quote, alternating sides.
   The homepage rail keeps the compact .quote layout above.
   -------------------------------------------------------------------------- */
.testimonials { display: grid; }

.testimonial {
  display: grid;
  gap: 1.25rem;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--hairline);
}
.testimonial:first-child { border-top: 0; padding-top: 0; }

/* Mobile: photo and name side by side, quote beneath. */
.testimonial__person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.testimonial__photo {
  width: 84px; height: 84px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--stone);
}
.testimonial__photo--initials {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--step-1); font-weight: 600; color: var(--slate);
}
.testimonial__name { font-weight: 600; color: var(--ink); }
.testimonial__where { color: var(--slate); font-size: var(--step--1); margin-top: 0.15rem; }
.testimonial__creds {
  color: var(--slate); font-size: var(--step--1); opacity: 0.8;
  margin-top: 0.35rem; line-height: 1.45;
}

.testimonial__quote { margin: 0; position: relative; }
.testimonial__quote p { color: var(--slate); }
.testimonial__quote p + p { margin-top: 0.85rem; }
/* The opening paragraph is the way in: larger, darker. */
.testimonial__quote .testimonial__lead {
  font-size: var(--step-1);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.testimonial__quote::before {
  content: "\201C";
  display: block;
  font-size: 3.25rem;
  line-height: 0.6;
  height: 1.4rem;
  color: var(--dentine);
}

/* Desktop: two columns, and every second one mirrored. */
@media (min-width: 52rem) {
  .testimonial {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .testimonial__person {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    position: sticky;
    top: 6rem;
  }
  .testimonial__photo { width: 140px; height: 140px; }
  .testimonial__quote { max-width: 40rem; }

  .testimonial--flip { grid-template-columns: minmax(0, 1fr) 15rem; }
  .testimonial--flip .testimonial__person { order: 2; align-items: flex-end; text-align: right; }
  .testimonial--flip .testimonial__quote { order: 1; justify-self: end; }
}