/* ============================================================
   LAVA STREET DENTAL: homepage concept
   Palette drawn from the shopfront: deep matte steel-blue
   cladding against warm off-white render.
   Neue Haas Grotesk throughout, Acumin Condensed for supporting labels.
   Mobile-first. All CSS and JS embedded.
   ============================================================ */

:root {
  /* --------------------------------------------------------------------
     Approved brand palette. Lava Street Dental brand guidelines, page 03
     "Colour Palette". These seven values are the only colours on the site.
     Everything below is expressed in terms of them.
     -------------------------------------------------------------------- */
  --color-mine-shaft:   #292826;  /* text, dark sections, footer          */
  --color-fuscous-gray: #575A4D;  /* olive: primary buttons, dark panels  */
  --color-santa-fe:     #B4684B;  /* clay: accent only                    */
  --color-lemon-grass:  #959C8A;  /* sage: secondary panels, shapes       */
  --color-malta:        #BDB4A3;  /* warm neutral: borders, dividers      */
  --color-pearl-bush:   #EAE2D6;  /* soft neutral: cards, light surfaces  */
  --color-bg:           #F4F1EA;  /* page background, a light tint of
                                     Pearl Bush, sampled from the PDF     */

  /* Channel triplets, so translucent fills stay on palette instead of
     carrying their own hard-coded rgb values. Used as
     rgb(var(--rgb-mine-shaft) / 0.6). */
  --rgb-mine-shaft:   41 40 38;
  --rgb-fuscous-gray: 87 90 77;
  --rgb-santa-fe:     180 104 75;
  --rgb-lemon-grass:  149 156 138;
  --rgb-malta:        189 180 163;
  --rgb-pearl-bush:   234 226 214;
  --rgb-bg:           244 241 234;

  /* --------------------------------------------------------------------
     Semantic layer. Every rule in this stylesheet references these, never
     a raw colour. Renamed from the previous blue and cream names, which
     no longer describe what they hold.
     -------------------------------------------------------------------- */
  --ink:          var(--color-mine-shaft);    /* body copy and headings   */
  --ink-soft:     var(--color-fuscous-gray);  /* fine print, small caps   */
  --olive:        var(--color-fuscous-gray);  /* primary buttons, panels  */
  --olive-deep:   var(--color-mine-shaft);    /* button hover, darkest    */
  --clay:         var(--color-santa-fe);      /* accent, large text only  */
  --sage:         var(--color-lemon-grass);   /* secondary panels, shapes */
  --surface:      var(--color-bg);            /* page background          */
  --surface-soft: var(--color-pearl-bush);    /* cards, light sections    */
  --surface-dark: var(--color-mine-shaft);    /* footer, dark sections    */
  --line:         var(--color-malta);         /* borders, dividers, inputs*/
  --on-dark:      var(--color-pearl-bush);    /* text and fills on dark   */

  /* Brand typefaces, guidelines page 04. Neue Haas Grotesk and Acumin
     Condensed are Adobe Fonts families; the Adobe slugs lead each stack so
     they take over the moment the kit is linked in the <head>. Until then the
     closest open faces render: Inter for the grotesk, Roboto Condensed for the
     condensed secondary. */
  --font-body:    "neue-haas-grotesk-text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "neue-haas-grotesk-display", "neue-haas-grotesk-text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-accent:  "acumin-pro-condensed", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

  /* The guidelines name two weights, Medium and Roman. */
  --w-roman:  400;
  --w-medium: 500;

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;

  --shadow: 0 10px 30px -22px rgb(var(--rgb-mine-shaft) / 0.28);
  --shadow-lift: 0 18px 44px -30px rgb(var(--rgb-mine-shaft) / 0.35);

  --band: clamp(4rem, 11vw, 7.5rem);
  --wrap: 1180px;
}

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

html {
  color: var(--ink);
  background: var(--surface);

  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: var(--w-roman);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.nav-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: var(--olive); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  color: var(--ink);
  line-height: 1.1;
  /* A grotesk at display size wants slightly tighter tracking than the serif did. */
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 em, h2 em, h3 em, .accent {
  font-style: italic;
  color: var(--olive);
}

p { max-width: 62ch; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.band { padding-block: var(--band); }

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

.skip-link {
  position: absolute;
  top: -120px; left: 1rem;
  z-index: 200;
  background: var(--surface);
  color: var(--olive-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.75rem 1.15rem;
  font-weight: var(--w-medium);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* --- Wordmark (text only, no icon) ------------------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-roman);
  color: var(--olive);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.15;
  font-size: 0.875rem;
  white-space: nowrap;
}
.wordmark span { display: block; letter-spacing: 0.34em; font-size: 0.72em; color: var(--olive); }

/* --- Logo ---------------------------------------------------------------- */
/* Vector mark. The supplied artwork had its keyline flush with the file edge and
   a 4px stroke that fell below one device pixel once scaled to header size, which
   read as a clipped box. Tracing it to SVG and giving the viewBox its own padding
   fixes both: the keyline is now crisp at any size and can never be cropped. */
.wordmark img {
  display: block;
  width: auto;
  height: 46px;
  aspect-ratio: 1000 / 414;   /* reserves the right space before the SVG paints */
}
@media (min-width: 860px) { .wordmark img { height: 56px; } }
.foot .wordmark img { height: 52px; }

/* Large lock-up in the homepage closing band, reversed out of the photograph. */
.closer .big-logo { display: flex; justify-content: center; }
.closer .big-logo img {
  display: block;
  width: min(100%, 27rem);
  height: auto;
}

/* --- Eyebrow ------------------------------------------------------------ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--line);
  flex: none;
}
.eyebrow.centred { justify-content: center; }
.on-dark .eyebrow { color: var(--on-dark); }
.on-dark .eyebrow::before { background: rgb(var(--rgb-pearl-bush) / 0.45); }

/* --- Type scale --------------------------------------------------------- */
.d1 { font-size: clamp(2.25rem, 10vw, 4.6rem); }
.d2 { font-size: clamp(2rem, 7vw, 3.25rem); }
.d3 { font-size: clamp(1.35rem, 4.2vw, 1.6rem); line-height: 1.25; }
.lead {
  font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
  max-width: 44ch;
}
.small { font-size: 0.9375rem; line-height: 1.7; }
.fine { font-size: 0.8125rem; line-height: 1.65; color: var(--ink-soft); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.9rem 1.6rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-primary { background: var(--olive); color: var(--on-dark); }
.btn-primary:hover { background: var(--olive-deep); }
.btn-outline { border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--olive); color: var(--olive); }
.btn-cream { background: var(--on-dark); color: var(--olive-deep); }
.btn-cream:hover { background: var(--line); }
.btn-ghost-light { border-color: rgb(var(--rgb-pearl-bush) / 0.5); color: var(--surface); }
.btn-ghost-light:hover { background: rgb(var(--rgb-pearl-bush) / 0.12); }

.textlink {
  font-weight: var(--w-medium);
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.textlink:hover { border-color: var(--olive); }

/* --- Header ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  transition: border-color 0.3s ease, background-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.masthead.stuck { border-bottom-color: var(--line); background: rgb(var(--rgb-pearl-bush) / 0.94); backdrop-filter: blur(10px); }
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}
.mast-nav { display: none; }
.mast-actions { display: flex; align-items: center; gap: 0.75rem; }
.mast-actions .btn { min-height: 44px; padding: 0.7rem 1.15rem; font-size: 0.875rem; }
.mast-phone { display: none; }

.burger {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
.burger i {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.burger i + i { margin-top: 4px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 72px 0 0 0;
  z-index: 55;
  background: var(--surface);
  padding: 2rem 1.25rem 3rem;
  overflow-y: auto;
  display: none;
}
.drawer.open { display: block; }
.drawer a.dnav {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--ink);
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.drawer a.dnav em { font-style: normal; }
.drawer .btn { width: 100%; margin-top: 1.75rem; }
.drawer .drawer-foot { margin-top: 1.5rem; text-align: center; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-soft);
  padding-block: clamp(2.75rem, 8vw, 6rem);
}

/* the practice room, behind everything */
.hero-bg { position: absolute; inset: 0; z-index: -3; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 48%;
  animation: slowZoom 16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* warm wash, lighter towards the right where the card sits */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(86% 72% at 20% 52%, rgb(var(--rgb-bg) / 0.82), rgb(var(--rgb-bg) / 0) 74%),
    radial-gradient(120% 100% at 84% 42%, rgb(var(--rgb-bg) / 0.5), rgb(var(--rgb-bg) / 0) 64%),
    linear-gradient(97deg, rgb(var(--rgb-bg) / 0.9) 0%, rgb(var(--rgb-bg) / 0.82) 32%, rgb(var(--rgb-bg) / 0.55) 54%, rgb(var(--rgb-pearl-bush) / 0.28) 76%, rgb(var(--rgb-pearl-bush) / 0.44) 100%);
}

@media (max-width: 899px) {
  .hero::before {
    background:
      radial-gradient(130% 62% at 50% 26%, rgb(var(--rgb-bg) / 0.88), rgb(var(--rgb-bg) / 0) 78%),
      linear-gradient(180deg, rgb(var(--rgb-bg) / 0.88) 0%, rgb(var(--rgb-bg) / 0.72) 48%, rgb(var(--rgb-pearl-bush) / 0.5) 100%);
  }
}

/* barely-there diagonal crosshatch: texture, not pattern */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgb(var(--rgb-fuscous-gray) / 0.03) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgb(var(--rgb-fuscous-gray) / 0.03) 0 1px, transparent 1px 22px);
}

.hero .wrap { width: min(100% - clamp(1.5rem, 5vw, 4.5rem), 1280px); }
.hero-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }

/* --- Left column: glass panel ------------------------------------------- */
.hero-copy { padding-right: clamp(0rem, 3vw, 2rem); }

.rule-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.rule-eyebrow::before {
  content: "";
  width: 40px; height: 1px;
  background: var(--clay);
  flex: none;
}

.hero h1 {
  font-size: clamp(2.5rem, 4vw, 5.5rem);
  line-height: 1.05;
  margin-bottom: 1.4rem;
}
.hero h1 em { color: var(--clay); }
.hero .lead { max-width: 46ch; line-height: 1.8; margin-bottom: 2.25rem; color: var(--ink); }

/* trust chips */
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 0.85rem 1.5rem; }
.trust li { display: inline-flex; align-items: center; gap: 0.55rem; }
.trust svg { width: 16px; height: 16px; color: var(--olive); flex: none; }
.trust span {
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- Right column: capture card ----------------------------------------- */
.capture {
  border-radius: 20px;
  background: var(--surface-soft);
  border: 1px solid rgb(var(--rgb-fuscous-gray) / 0.10);
  box-shadow: 0 28px 72px -42px rgb(var(--rgb-fuscous-gray) / 0.32);
  padding: clamp(1.5rem, 4.5vw, 2.5rem);
}
.badge {
  display: inline-block;
  border: 1px solid var(--clay);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  background: transparent;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.capture-h { font-size: clamp(1.75rem, 5vw, 2.25rem); margin-bottom: 0.75rem; }
.capture-h em { color: var(--clay); }
.capture > * > .small { max-width: 42ch; }

.hero-form { margin-top: 1.75rem; display: grid; gap: 0.35rem; }
.row2 { display: grid; gap: 0 0.75rem; }
.field { display: grid; }
.field input {
  width: 100%;
  min-height: 52px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--olive);
  border-radius: 10px;
  padding: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input::placeholder,
.enquiry textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.field input:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 2px var(--olive); }
.field input[aria-invalid="true"] { border-color: var(--clay); }
.field .msg {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 0.35rem;
  min-height: 1.1rem;   /* reserved: validation must never reflow the form */
}

.btn-submit {
  width: 100%;
  margin-top: 0.75rem;
  min-height: 54px;
  background: var(--olive);
  color: var(--on-dark);
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 0.25s ease;
}
.btn-submit:hover { background: var(--olive-deep); }
.reassure { font-size: 0.8125rem; color: var(--ink); text-align: center; margin-top: 0.35rem; }

.capture-done { text-align: center; padding-block: 1.5rem; }
.capture-done .capture-h { margin-bottom: 0.75rem; }
.capture-done p { margin-inline: auto; }

/* --- Minimal entrance --------------------------------------------------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes slowZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.anim { animation: riseIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both; }
.a1 { animation-delay: 0.05s; }
.a2 { animation-delay: 0.15s; }
.a3 { animation-delay: 0.25s; }
.a4 { animation-delay: 0.35s; }
.a5 { animation-delay: 0.30s; }

/* --- Image frames ------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
.frame img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  /* keeps alt text from printing over the placeholder if a file is missing */
  color: transparent;
  font-size: 0;
}
.frame.r-tall { aspect-ratio: 4 / 5; }
/* stacked layouts: keep the portrait frames from towering */
@media (max-width: 859px) { .why-media .frame.r-tall { aspect-ratio: 4 / 3.2; } }

/* Warm placeholder that sits BEHIND the image, so it shows through only while
   assets/images/ is empty. Purely decorative, no JavaScript required. */
.frame[data-placeholder]::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive);
  background:
    repeating-linear-gradient(135deg, rgb(var(--rgb-malta) / 0.18) 0 14px, transparent 14px 28px),
    var(--surface-soft);
}

/* --- Welcome ------------------------------------------------------------ */
.welcome-grid { display: grid; gap: clamp(2rem, 6vw, 3.75rem); align-items: start; }
.welcome-copy p + p { margin-top: 1.15rem; }
.welcome-copy h2 { margin-bottom: 1.5rem; }

.meg {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.meg h3 { margin-bottom: 1rem; }
/* a person stays 4:5 at every width, unlike the scene-setting frames */
.welcome-media .frame { aspect-ratio: 4 / 5; }
.welcome-media figcaption {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.35;
}
.welcome-media figcaption span {
  display: block;
  font-weight: var(--w-roman);
  letter-spacing: 0.16em;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}
.meg p + p { margin-top: 1.15rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.chips li {
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  color: var(--ink);
  background: var(--sage);
  border-radius: var(--r-xs);
  padding: 0.45rem 0.8rem;
}
.meg .fine { margin-top: 1.5rem; max-width: 58ch; }
.meg .textlink { display: inline-block; margin-top: 1.75rem; }

/* --- Section heads ------------------------------------------------------ */
.head { margin-bottom: clamp(2.25rem, 5.5vw, 3.25rem); }
.head h2 { margin-bottom: 1.1rem; }
.head .lead { margin-bottom: 0; }

/* --- Services ----------------------------------------------------------- */
.services { background: var(--surface-soft); }
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.card {
  background: var(--surface);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.card .num {
  font-family: var(--font-accent);
  font-weight: var(--w-medium);
  letter-spacing: 0.06em;
  font-size: 0.9375rem;
  color: var(--olive);
}
.card h3 { font-size: 1.25rem; }
.card p { font-size: 0.9375rem; line-height: 1.7; }
.services .also {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(var(--rgb-pearl-bush) / 0.28);
  max-width: 68ch;
}
.services .also strong { color: var(--ink); font-weight: var(--w-medium); }

/* --- Timeline ----------------------------------------------------------- */
.steps { list-style: none; display: grid; gap: 0; counter-reset: s; }
.steps li {
  border-top: 1px solid var(--line);
  padding: 1.75rem 0;
  counter-increment: s;
  display: grid;
  gap: 0.5rem;
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .when {
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
}
.steps h3 { font-size: 1.35rem; }
.steps p { font-size: 0.9375rem; }

/* --- Why join ----------------------------------------------------------- */
.why { background: var(--sage); }

.why-grid { display: grid; gap: clamp(2rem, 6vw, 3.75rem); align-items: center; }
.why .head { margin-bottom: 2.25rem; max-width: 22rem; }
.benefits { list-style: none; display: grid; gap: 1rem; }
.benefits li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.4rem 1.5rem;
}
.benefits h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.benefits p { font-size: 0.9375rem; }

/* --- FAQs --------------------------------------------------------------- */
.faqs .head { max-width: 36rem; }
.faq { border-top: 1px solid var(--line); }
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq h3 { font-family: var(--font-body); letter-spacing: 0; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: left;
  padding: 1.4rem 0;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3vw, 1.2rem);
  font-weight: var(--w-roman);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.faq-q:hover { color: var(--olive); }
.faq-q .pm {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  margin-top: 4px;
}
.faq-q .pm::before, .faq-q .pm::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--olive);
  transition: transform 0.28s ease;
}
.faq-q .pm::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .pm::after { transform: rotate(0deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 0.32s ease; }
.faq-a p { padding-bottom: 1.4rem; font-size: 0.9688rem; }

/* --- Image CTA with large wordmark ------------------------------------- */
.closer { padding-bottom: 0; }
.closer .stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  min-height: 460px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(3rem, 9vw, 5.5rem) 1.5rem;
  background: var(--olive-deep);
}
.closer .stage > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.closer .stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(72% 82% at 50% 52%, rgb(var(--rgb-mine-shaft) / 0.6), rgb(var(--rgb-mine-shaft) / 0) 74%),
    linear-gradient(180deg, rgb(var(--rgb-mine-shaft) / 0.62), rgb(var(--rgb-mine-shaft) / 0.9));
}
.closer .big {
  font-family: var(--font-display);
  color: var(--on-dark);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(1.5rem, 7.6vw, 4.25rem);
  line-height: 1.1;
  font-weight: 300;
  margin-bottom: 1.5rem;
}
.closer .big span { display: block; letter-spacing: 0.3em; font-size: 0.42em; color: var(--on-dark); margin-top: 0.6rem; }
.closer p { color: rgb(var(--rgb-pearl-bush) / 0.94); margin-inline: auto; max-width: 40ch; }
.closer .row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2.25rem; }

/* --- Footer ------------------------------------------------------------- */
.foot {
  background: var(--surface-dark);
  /* Set on the block so every descendant without its own colour, the blurb
     and the copyright line among them, inherits a readable value. */
  color: var(--on-dark);
  padding-block: clamp(3rem, 8vw, 4.5rem) 2rem;
  margin-top: var(--band);
}
.foot-grid { display: grid; gap: 2.5rem; }
.foot h4 {
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 1rem;
}
.foot ul { list-style: none; display: grid; gap: 0.5rem; }
.foot li, .foot a { font-size: 0.9375rem; color: rgb(var(--rgb-pearl-bush) / 0.82); }
.foot a:hover { color: var(--on-dark); }
.foot .blurb { font-size: 0.9375rem; margin-top: 1.1rem; max-width: 34ch; }
.foot .wordmark { font-size: 1rem; color: var(--on-dark); }
.foot-base {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.foot-base .disclaimer { font-size: 0.8125rem; max-width: 92ch; line-height: 1.7; color: rgb(var(--rgb-pearl-bush) / 0.82); }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  justify-content: space-between;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
}

/* --- Reveal ------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rise.in { opacity: 1; transform: none; }
.no-js .rise { opacity: 1; transform: none; }
.frame img { transition: transform 0.7s ease; }
.frame:hover img { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .rise { opacity: 1; transform: none; }
  .frame:hover img { transform: none; }
}

/* ============================================================
   Breakpoints: mobile-first
   ============================================================ */
@media (min-width: 560px) {
  .row2 { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .benefits { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  html { scroll-padding-top: 96px; }
  .masthead .wrap { min-height: 84px; }
  .mast-nav { display: flex; align-items: center; gap: 1.9rem; }
  .mast-nav a {
    font-size: 0.875rem;
    font-weight: var(--w-medium);
    color: var(--ink);
    letter-spacing: 0.01em;
    padding-block: 0.4rem;
    border-bottom: 1px solid transparent;
  }
  .mast-nav a:hover { color: var(--olive); border-bottom-color: var(--olive); }
  .burger { display: none; }
  .mast-phone { display: inline-block; font-size: 0.875rem; font-weight: var(--w-medium); color: var(--ink); }
  .mast-phone:hover { color: var(--olive); }
  .drawer { display: none !important; }


  .welcome-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .welcome-media { position: sticky; top: 110px; }

  .head.split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: end;
  }
  .head.split .eyebrow { grid-column: 1 / -1; }
  .head.split h2 { margin-bottom: 0; }
  .head.split .lead { margin-bottom: 0.5rem; }

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

  .timeline .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .timeline .steps li { border-bottom: 0; padding-bottom: 0; }
  .timeline .steps li:last-child { border-bottom: 0; }

  .why-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .benefits { grid-template-columns: 1fr; }
  .why-media { order: 2; }

  .faq-list { max-width: 46rem; }

  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 3rem; }
}

@media (min-width: 900px) {
  .hero { padding-block: clamp(4rem, 7vw, 7rem); }
  .hero-grid { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}

@media (min-width: 1100px) {
  .hero-grid { gap: 5rem; }
}

/* ============================================================
   Inner-page components: same tokens, same voice.
   Added for the full-site build; the homepage system above is
   untouched.
   ============================================================ */

/* --- Header dropdowns --------------------------------------------------- */
.navdrop { position: relative; }
.navdrop > button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: var(--w-medium);
  color: var(--ink);
  letter-spacing: 0.01em;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.navdrop > button:hover { color: var(--olive); border-bottom-color: var(--olive); }
.navdrop > button i {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.navdrop > button[aria-expanded="true"] i { transform: rotate(225deg) translateY(-1px); }
.drop-panel {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 15.5rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 24px 56px -34px rgb(var(--rgb-mine-shaft) / 0.4);
  padding: 0.55rem;
  display: none;
  z-index: 70;
}
.navdrop.open .drop-panel { display: block; }
.drop-panel a {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-xs);
}
.drop-panel a:hover { background: var(--surface-soft); color: var(--olive); }

/* Drawer groups (mobile) */
.dgroup { border-bottom: 1px solid var(--line); }
.dgroup summary {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--ink);
  padding: 0.95rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dgroup summary::-webkit-details-marker { display: none; }
.dgroup summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--olive);
  border-bottom: 1.5px solid var(--olive);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  margin-right: 0.35rem;
}
.dgroup[open] summary::after { transform: rotate(225deg); }
.dgroup a {
  display: block;
  font-size: 1.05rem;
  color: var(--ink);
  padding: 0.55rem 0 0.55rem 1rem;
}
.dgroup a:last-child { padding-bottom: 1rem; }

/* --- Page hero ----------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--surface-soft);
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgb(var(--rgb-fuscous-gray) / 0.03) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgb(var(--rgb-fuscous-gray) / 0.03) 0 1px, transparent 1px 22px);
}
.page-hero .wrap { position: relative; z-index: 1; }
.ph-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.ph-h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.07; margin-bottom: 1.25rem; }
.ph-h1 em { color: var(--clay); }
.page-hero .lead { max-width: 56ch; }
.page-hero .lead + .lead { margin-top: 1rem; }
.ph-side .img-ph { box-shadow: 0 28px 64px -44px rgb(var(--rgb-mine-shaft) / 0.45); }
@media (min-width: 900px) {
  .ph-grid.has-side { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs { margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0; }
.crumbs li {
  font-family: var(--font-accent);
  font-size: 0.875rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
}
.crumbs li + li::before {
  content: "/";
  margin: 0 0.6rem;
  color: var(--ink-soft);
}
.crumbs a { color: var(--olive); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink-soft); }

/* --- Image placeholders ---------------------------------------------------- */
.img-ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgb(var(--rgb-malta) / 0.18) 0 14px, transparent 14px 28px),
    var(--surface-soft);
  padding: 1.5rem;
  text-align: center;
}
.img-ph.tall { aspect-ratio: 4 / 5; }

/* --- Real photographs ------------------------------------------------------ */
.photo-fig { margin: 0; }
.photo-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-soft);
}
.photo-fig figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.ph-side .photo-fig img { box-shadow: 0 28px 64px -44px rgb(var(--rgb-mine-shaft) / 0.45); }
.img-ph span {
  font-size: 0.6875rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive);
  max-width: 30ch;
  line-height: 1.7;
}

/* --- Content flow ----------------------------------------------------------- */
.flow > * + * { margin-top: 1.15rem; }
.flow > .sec-h { margin-top: clamp(2.25rem, 5vw, 3rem); }
.flow > .sec-h3 { margin-top: clamp(1.9rem, 4vw, 2.5rem); }
.flow > .sec-h:first-child, .flow > .sec-h3:first-child { margin-top: 0; }
.sec-h { font-size: clamp(1.7rem, 4.4vw, 2.4rem); }
.sec-h3 { font-size: clamp(1.3rem, 3.4vw, 1.55rem); }
.band-alt { background: var(--surface-soft); }
.band-soft { background: var(--sage); }
.band-tight { padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.note-fine { font-size: 0.8125rem; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }

.ticklist { list-style: none; display: grid; gap: 0.55rem; max-width: 62ch; }
.ticklist li { position: relative; padding-left: 1.4rem; }
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.65rem; height: 1.5px;
  background: var(--olive);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* --- Link cards -------------------------------------------------------------- */
.linkcard-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}
@media (min-width: 620px) { .linkcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .linkcard-grid { grid-template-columns: repeat(3, 1fr); } }
.linkcard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.4rem 1.5rem;
  color: var(--ink);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.linkcard:hover {
  border-color: var(--olive);
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -34px rgb(var(--rgb-mine-shaft) / 0.4);
}
.linkcard h3 { font-size: 1.15rem; }
.linkcard p { font-size: 0.9375rem; line-height: 1.65; }
.lc-more {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
}

/* Pill link rows ("Explore:") */
.pillrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.pillrow a {
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  /* 13px label on a sage chip: Fuscous Gray would be 2.49:1, Mine Shaft is 5.19:1. */
  color: var(--ink);
  background: var(--sage);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pillrow a:hover { background: var(--olive); color: var(--on-dark); }
.pillrow-label {
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1.4rem;
}

/* --- Category block on hub / team cards ---------------------------------------- */
.hubcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.hubcard + .hubcard { margin-top: 1.25rem; }
.hubcard h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); margin-bottom: 0.75rem; }
.hubcard > p { max-width: 68ch; }
.hubcard .cardlink {
  display: inline-block;
  margin-top: 1.1rem;
  font-weight: var(--w-medium);
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.hubcard .cardlink:hover { border-color: var(--olive); }

.team-grid { display: grid; gap: 1.5rem; margin-top: 0.5rem; }
@media (min-width: 860px) { .team-grid { grid-template-columns: 1fr 1fr; } }
.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2rem);
}
.team-card .img-ph, .team-card .photo { max-width: 15rem; margin-bottom: 1.25rem; }
.team-card .photo { border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; }
.team-card h3 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.team-card .role {
  font-size: 0.6875rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.team-card p + p { margin-top: 0.9rem; }
.team-card .cardlink {
  display: inline-block;
  margin-top: 1.1rem;
  font-weight: var(--w-medium);
  font-size: 0.9375rem;
  color: var(--olive);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

/* --- Details/contact blocks -------------------------------------------------- */
.kv { list-style: none; display: grid; gap: 0.55rem; max-width: 40rem; }
.kv li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.8rem 1.1rem;
  font-size: 0.9375rem;
}
.kv .k {
  font-weight: var(--w-medium);
  color: var(--ink);
}
.kv-lines li { display: block; }
.kv-lines strong { color: var(--ink); }

/* Footer gains a fifth (Locations) column site-wide */
@media (min-width: 860px) {
  .foot-grid { grid-template-columns: 1.5fr 0.9fr 1fr 0.9fr 1.1fr; }
}

/* --- Map embed ----------------------------------------------------------------- */
.map-embed {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-top: 1.5rem;
}
.map-embed iframe { display: block; width: 100%; height: 340px; border: 0; }

/* --- Closing CTA band ----------------------------------------------------------- */
.cta-close { padding-block: 0 var(--band); }
.cta-panel {
  background: var(--olive-deep);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3rem);
  display: flex;
  justify-content: center;
}
.cta-panel .cta-row { margin-top: 0; justify-content: center; }
.cta-panel .btn-primary { background: var(--on-dark); color: var(--olive-deep); }
.cta-panel .btn-primary:hover { background: var(--line); }
.cta-panel .btn-outline { border-color: rgb(var(--rgb-pearl-bush) / 0.5); color: var(--surface); }
.cta-panel .btn-outline:hover { background: rgb(var(--rgb-pearl-bush) / 0.12); border-color: rgb(var(--rgb-pearl-bush) / 0.5); }

/* --- Contact form (reuses capture styling) -------------------------------------- */
.enquiry { max-width: 44rem; }
.enquiry textarea {
  width: 100%;
  min-height: 9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--olive);
  border-radius: 10px;
  padding: 1rem;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.enquiry textarea:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 2px var(--olive); }

/* --- Form preview notice (no endpoint wired yet) ---------------------------- */
.form-preview-note {
  margin-top: 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-soft);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink);
}
.form-preview-note strong { color: var(--olive-deep); }

/* --- Map slot while the address is unconfirmed ------------------------------ */
.map-pending {
  display: grid;
  place-items: center;
  min-height: 16rem;
  padding: 1.75rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(135deg, rgb(var(--rgb-malta) / 0.18) 0 14px, transparent 14px 28px),
    var(--surface-soft);
}
.map-pending p { max-width: 46ch; color: var(--ink); font-size: 0.9rem; line-height: 1.7; }
.map-pending .eyebrow { margin-bottom: 0.6rem; }


/* ==========================================================================
   MOBILE RESPONSIVENESS FIXES
   ========================================================================== */

/* 1. Masthead children were all flex-shrinkable, so below 414px the browser
      squeezed them horizontally. That distorted the logo (2.42:1 became
      1.78:1 at 320px) and narrowed the burger to 30px. Lock all three. */
.masthead .wordmark,
.masthead .mast-actions,
.burger { flex: 0 0 auto; }
.burger { min-width: 44px; min-height: 44px; }

/* 2. "Book an appointment" cannot fit on one line beside the logo and burger
      on a 320-414px screen: it wrapped to two lines and made the header 73px
      tall, crowding everything. Below 400px the header CTA is hidden and the
      drawer carries it instead (see 3). From 400px up it fits on one line
      with tighter padding. */
@media (max-width: 399px) {
  .mast-actions .btn { display: none; }
  .masthead .wrap { min-height: 64px; }
}
/* 400-859px: compact, single line. */
@media (min-width: 400px) and (max-width: 859px) {
  .mast-actions .btn { white-space: nowrap; padding: 0.7rem 0.95rem; font-size: 0.8125rem; }
}

/* 3. With the header CTA hidden on small screens the drawer's CTA becomes the
      primary booking route, so pin it to the bottom of the drawer. Previously
      it sat below the fold on a 320x568 screen and needed scrolling to reach. */
.drawer > .btn {
  position: sticky;
  bottom: 0;
  width: 100%;
  margin-top: 1.5rem;
  /* Cream spread masks the drawer's 1.25rem side padding and a band above the
     button, so items scroll cleanly behind the bar instead of being half-cut. */
  box-shadow: 0 0 0 1.25rem var(--surface), 0 -18px 18px -14px rgb(var(--rgb-mine-shaft) / 0.2);
}

/* 4. Touch target size (WCAG 2.5.8 asks for 24x24 minimum). Footer nav links
      were 17px tall and breadcrumb links 21px. Padding lifts both clear of the
      threshold on touch-sized screens without altering the desktop footer. */
@media (max-width: 859px) {
  .foot nav a,
  .foot li > a { display: inline-block; padding-block: 0.4rem; }
  .crumbs li { min-height: 24px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
}

/* 5. Burger icon geometry. `display:grid; place-items:center` gave the three
      bars three auto rows spanning the whole 44px button, so they sat ~15px
      apart and the `translateY(5.5px)` close-state left two offset diagonals
      instead of a clean X. A centred flex column with a real 4px gap makes the
      pitch 5.5px, which is exactly what the existing transforms expect. */
.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.burger i + i { margin-top: 0; }
/* 2px bars on a 6px pitch land on whole pixels at every device ratio; the 1.5px
   originals rendered unevenly (middle bar looked heavier). */
.burger i { height: 2px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 6. The sticky drawer CTA overlapped the last nav link ("Contact"). Reserve
      room beneath the nav so every item can scroll clear of it. */
.drawer nav { padding-bottom: 4.5rem; }

/* ==========================================================================
   SAGE PANEL TEXT
   Kept last so it wins over component rules of equal specificity that appear
   further down, .pillrow a among them.
   ========================================================================== */
/* Lemon Grass is a mid tone. Mine Shaft is the only palette colour that clears
   4.5:1 on it (5.19:1), so every piece of text inside a sage panel takes it,
   including the italic display accent and the pill links. Buttons are excluded
   because they carry their own fill and label colour. */
.why, .band-soft { color: var(--ink); }
.why :where(a, em, strong, .eyebrow, .when, .small, .fine, .note-fine, li, p, h2, h3):not(.btn),
.band-soft :where(a, em, strong, .eyebrow, .when, .small, .fine, .note-fine, li, p, h2, h3):not(.btn) {
  color: var(--ink);
}

/* --- Client practice photography (Oct 2026) --------------------------------
   The supplied images are wide panoramas (about 2.8:1). Every placement crops
   with object-fit: cover and sets its own focal point inline: --pos for
   tablet and up, --pos-m for phones (falls back to --pos). */
.hero-bg img.pano,
.frame img.pano,
.closer .stage > img.pano,
.photo-fig img.pano,
.photo img.pano {
  object-fit: cover;
  object-position: var(--pos-m, var(--pos, 50% 50%));
}
@media (min-width: 768px) {
  .hero-bg img.pano,
  .frame img.pano,
  .closer .stage > img.pano,
  .photo-fig img.pano,
  .photo img.pano { object-position: var(--pos, 50% 50%); }
}
/* Keep the approved 16:9 boxes for the side and full-width figures. */
.photo-fig img.pano,
.photo img.pano { width: 100%; height: auto; aspect-ratio: 16 / 9; }