/* ──────────────────────────────────────────────
   TRU Realty — Base
   Reset, typography primitives, header, footer, buttons
   ────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: 400;
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--gold); }

button { font: inherit; cursor: pointer; }

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

p { margin: 0; }

::selection { background: var(--gold); color: var(--paper); }

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

/* ─── Layout primitives ─── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--sm { max-width: var(--container-sm); }

/* ─── Typography primitives ─── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  margin: 0;
}
.eyebrow--light { color: rgba(250, 250, 249, 0.72); }

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: var(--tr-display);
  margin: 0;
  color: var(--paper);
}
.display--md {
  font-size: var(--fs-display-md);
  line-height: 1.0;
}
.display__italic {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-soft);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-5);
  max-width: 24ch;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}

/* ─── Buttons ─── */
.btn {
  --pad-y: 14px;
  --pad-x: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              transform var(--d-base) var(--ease-out);
  white-space: nowrap;
}

.btn--gold {
  background: var(--gold);
  color: var(--paper);
}
.btn--gold:hover {
  background: var(--gold-2);
  color: var(--paper);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--ghost-light {
  background: transparent;
  color: var(--paper);
  border-color: rgba(250, 250, 249, 0.4);
}
.btn--ghost-light:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.btn--link {
  padding: 8px 0;
  background: transparent;
  color: var(--ink);
  border: none;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  position: relative;
}
.btn--link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform var(--d-base) var(--ease-out);
}
.btn--link:hover::after { transform-origin: left; transform: scaleX(0); animation: btn-link-redraw var(--d-base) var(--ease-out) forwards 0.05s; }
@keyframes btn-link-redraw { from { transform-origin: left; transform: scaleX(0); } to { transform-origin: left; transform: scaleX(1); } }

/* ─── Header ─── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  padding: 18px var(--gutter);
  background: transparent;
  transition: background var(--d-base) var(--ease-out),
              backdrop-filter var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header[data-scrolled="true"] {
  background: rgba(250, 250, 249, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.site-header__brand img {
  height: 32px;
  width: auto;
  filter: invert(1) brightness(2);
  transition: filter var(--d-base) var(--ease-out);
}
.site-header[data-scrolled="true"] .site-header__brand img { filter: none; }

.site-header__nav {
  display: flex;
  gap: clamp(20px, 2.4vw, 40px);
}
/* Seven top-level items once Resources landed. The row is nowrap, so without
   this the failure mode is a label breaking mid-word rather than clean
   overflow. */
.site-header__nav > a,
.nav-group__label { white-space: nowrap; }
.site-header__nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(250, 250, 249, 0.78);
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 0;
}
.site-header__nav a:hover { color: var(--paper); }
.site-header__nav a.is-active { color: var(--paper); }
.site-header__nav a.is-active::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 4px; height: 4px;
  background: var(--gold-soft);
  border-radius: 50%;
  transform: translateX(-50%);
}
/* Direct children only. The dropdown panel keeps its own dark background at
   every scroll position, so its links must not be flipped to ink with the
   rest of the bar — that left them near-black on near-black. */
.site-header[data-scrolled="true"] .site-header__nav > a {
  color: var(--ink-3);
}
.site-header[data-scrolled="true"] .site-header__nav > a.is-active { color: var(--ink); }
.site-header[data-scrolled="true"] .site-header__nav > a.is-active::before { background: var(--gold); }

.site-header[data-scrolled="false"] .site-header__cta {
  color: var(--paper);
  border-color: rgba(250, 250, 249, 0.4);
}
.site-header[data-scrolled="false"] .site-header__cta:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ─── Touch target sizing ───
   WCAG 2.2 AA (2.5.8) asks for at least 24x24px; primary controls are taken
   to 44px. Applied only on touch-ish widths so desktop density is unchanged. */
@media (max-width: 820px) {
  .site-header__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .btn--link { padding: 12px 0; }
  .proj-hero__crumbs a,
  .disclosure__items a,
  .proj-cta__sub a,
  .press-contact__kit a {
    display: inline-block;
    padding: 5px 0;
  }
}

/* ─── Projects dropdown ───
   There is no standalone projects page, so "Projects" is a disclosure button
   rather than a link: it opens the four project pages directly. */
.nav-group { position: relative; }
.nav-group__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(250, 250, 249, 0.78);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease-out);
}
.nav-group__label:hover { color: var(--paper); }
.site-header[data-scrolled="true"] .nav-group__label { color: var(--ink-3); }
.nav-group__chev { transition: transform var(--d-base) var(--ease-out); }
.nav-group[data-open="true"] .nav-group__chev { transform: rotate(180deg); }

.nav-sub {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px;
  padding: 10px;
  background: var(--ink);
  border: 1px solid rgba(250, 250, 249, 0.12);
  border-radius: 6px;
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              visibility var(--d-base) var(--ease-out);
}
/* Keeps the pointer path from the button to the panel hoverable */
.nav-sub::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}
.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub,
.nav-group[data-open="true"] .nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Scoped to .site-header__nav so a future bare `.site-header__nav a` colour
   rule can't outrank the panel's own light-on-dark palette again. */
.site-header__nav .nav-sub a {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  color: rgba(250, 250, 249, 0.88);
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.site-header__nav .nav-sub a:hover,
.site-header__nav .nav-sub a:focus-visible { background: rgba(250, 250, 249, 0.10); color: var(--paper); }
.site-header__nav .nav-sub a.is-active { color: var(--gold-soft); }

/* ─── Mobile nav ───
   Below 820px the primary nav used to be display:none with no replacement,
   which left phone and tablet visitors no way to navigate except the footer.
   It now becomes a drawer opened by the toggle below. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--paper);
}
.site-header[data-scrolled="true"] .nav-toggle { color: var(--ink); }
[data-nav-open="true"] .nav-toggle { color: var(--paper); }

.nav-toggle__box {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}
.nav-toggle__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--d-base) var(--ease-out),
              opacity var(--d-fast) var(--ease-out);
}
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 6px; }
.nav-toggle__box span:nth-child(3) { top: 12px; }

/* Burger morphs into a close cross while the drawer is open */
[data-nav-open="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[data-nav-open="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
[data-nav-open="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 1);
  background: rgba(12, 10, 9, 0.55);
  opacity: 0;
  visibility: hidden;
  /* Belt and braces: visibility is transitioned, so it lingers for the length
     of the fade. pointer-events makes sure a closing scrim can never swallow
     a tap in the meantime. */
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out),
              visibility var(--d-base) var(--ease-out);
}
[data-nav-open="true"] .nav-scrim { pointer-events: auto; }

@media (max-width: 820px) {
  /* Without JS the toggle cannot work, so keep the old behaviour and let the
     footer carry navigation rather than showing a dead button. */
  html:not(.js) .site-header__nav { display: none; }

  .js .nav-toggle { display: inline-flex; }

  .js .site-header__nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(82vw, 330px);
    flex-direction: column;
    /* `safe` matters now that the drawer holds seven rows plus two accordions:
       a plain centred flex column puts its overflow at the start edge, where
       scrolling cannot reach it. `safe` falls back to flex-start instead. */
    justify-content: safe center;
    gap: 0;
    padding: var(--s-9) var(--s-7) var(--s-8);
    background: var(--ink);
    box-shadow: -24px 0 60px rgba(12, 10, 9, 0.4);
    z-index: calc(var(--z-header) + 2);
    transform: translateX(101%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform var(--d-base) var(--ease-emph),
                visibility var(--d-base) var(--ease-emph);
  }
  .js [data-nav-open="true"] .site-header__nav,
  .js[data-nav-open="true"] .site-header__nav {
    transform: none;
    visibility: visible;
  }
  [data-nav-open="true"] .nav-scrim { opacity: 1; visibility: visible; }

  /* The header must outrank the drawer, otherwise the drawer covers the very
     button needed to close it. Force its dark-background treatment too, since
     while the drawer is open the header sits on the dark panel regardless of
     how far the page happens to be scrolled. */
  [data-nav-open="true"] .site-header {
    z-index: calc(var(--z-header) + 3);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  [data-nav-open="true"] .site-header[data-scrolled="true"] .site-header__brand img {
    filter: invert(1) brightness(2);
  }
  [data-nav-open="true"] .site-header__cta {
    color: var(--paper);
    border-color: rgba(250, 250, 249, 0.4);
  }
  /* The drawer is a sibling of the toggle and CTA inside the header's own
     stacking context, so raising the header alone is not enough — these two
     must also outrank the panel or the drawer paints over the close button. */
  .js .nav-toggle,
  [data-nav-open="true"] .site-header__cta,
  [data-nav-open="true"] .site-header__brand {
    position: relative;
    z-index: calc(var(--z-header) + 4);
  }

  /* Comfortable 48px tap rows rather than 18px text links */
  .js .site-header__nav a {
    display: block;
    padding: 14px 0;
    font-size: 1.35rem;
    font-family: var(--font-display);
    font-weight: 500;
    color: rgba(250, 250, 249, 0.82);
    border-bottom: 1px solid rgba(250, 250, 249, 0.10);
  }
  .js .site-header__nav a:last-child { border-bottom: 0; }

  /* Projects becomes an inline accordion inside the drawer rather than a
     floating panel, which has nowhere to float to on a phone. */
  .js .nav-group { position: static; width: 100%; }
  .js .nav-group__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    color: rgba(250, 250, 249, 0.82);
    border-bottom: 1px solid rgba(250, 250, 249, 0.10);
  }
  /* max-height rather than the 0fr→1fr grid trick: that only animates the
     first child, and this list has four, so the rest landed in unanimated
     implicit rows and escaped the panel. */
  .js .nav-sub {
    position: static;
    transform: none;
    display: block;
    min-width: 0;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--d-base) var(--ease-emph);
  }
  .js .nav-sub::before { content: none; }
  /* Hover must not open the accordion on touch; only the explicit toggle.
     These also have to re-clear the transform: the desktop open/hover rules
     re-apply translateX(-50%) at a higher specificity than `.js .nav-sub`,
     which shunted the whole list out of the drawer. */
  .js .nav-group:hover .nav-sub,
  .js .nav-group:focus-within .nav-sub {
    max-height: 0;
    transform: none;
  }
  .js .nav-group[data-open="true"] .nav-sub,
  .js .nav-group:focus-within[data-open="true"] .nav-sub {
    max-height: 320px;
    transform: none;
  }

  .js .nav-sub a {
    padding: 12px 0 12px var(--s-4);
    font-family: var(--font-body);
    font-size: 1rem;
    border-bottom: 1px solid rgba(250, 250, 249, 0.06);
  }
  .js .nav-sub li:last-child a { border-bottom: 1px solid rgba(250, 250, 249, 0.10); }
  /* The drawer sits on dark regardless of the header's scrolled state */
  .js .site-header[data-scrolled="true"] .site-header__nav a { color: rgba(250, 250, 249, 0.82); }
  .js .site-header__nav a.is-active,
  .js .site-header[data-scrolled="true"] .site-header__nav a.is-active { color: var(--paper); }
  .js .site-header__nav a.is-active::before {
    left: auto;
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gold-soft);
  }
}

/* ─── Footer ─── */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--ink-2);
  color: rgba(250, 250, 249, 0.72);
  padding: var(--s-10) 0 var(--s-6);
}
.site-footer .eyebrow {
  color: rgba(250, 250, 249, 0.5);
  margin-bottom: var(--s-4);
}
.site-footer__inner {
  display: grid;
  /* 1fr rather than 1.3fr: the link block went from three columns to four
     when Resources landed, and needed the width more than the address does. */
  grid-template-columns: 1fr 2.6fr;
  gap: var(--s-9);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid var(--line-light);
}
.site-footer__brand img {
  height: 42px;
  width: auto;
  filter: invert(1) brightness(2);
  margin-bottom: var(--s-6);
}
.site-footer__address,
.site-footer__contact {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--s-5);
  color: rgba(250, 250, 249, 0.72);
}
.site-footer__contact a:hover { color: var(--gold-soft); }

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-7);
}
.site-footer__nav ul li { margin-bottom: var(--s-3); }
.site-footer__nav a {
  font-size: 0.95rem;
  color: rgba(250, 250, 249, 0.72);
}
.site-footer__nav a:hover { color: var(--paper); }

.site-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.42);
}

@media (max-width: 820px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .site-footer__nav { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-5); }
  .site-footer__base { flex-direction: column; gap: var(--s-3); text-align: center; }

  /* Footer links were 18px tall — well under a comfortable touch target.
     Padding brings each row to ~44px without changing the type size. */
  .site-footer__nav ul li { margin-bottom: 0; }
  .site-footer__nav a,
  .site-footer__contact a {
    display: inline-block;
    padding: 12px 0;
    line-height: 1.25;
  }
}

/* ─── Floating Enquire CTA ─── */
.enquire-fab {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(20px, 3vw, 32px);
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.enquire-fab[data-visible="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.enquire-fab:hover {
  background: var(--gold);
  color: var(--paper);
  transform: translateY(-2px) scale(1.02);
}
.enquire-fab__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 0 0 var(--gold-soft);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 178, 90, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(214, 178, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .enquire-fab__dot { animation: none; }
}

/* ─────────────────  ENQUIRY MODAL  ─────────────────
   Markup is injected by js/enquire.js so the component lives in one place
   rather than being duplicated across seven pages. */
.enquire-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.enquire-modal[hidden] { display: none; }

.enquire-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 9, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out);
}
[data-enquire-open="true"] .enquire-modal__backdrop { opacity: 1; }

/* Sized to fit without scrolling: three short fields and nothing else. The
   overflow rule below is a fallback for very short viewports (landscape
   phones) only — data-lenis-prevent on the panel is what lets a wheel or
   touch actually scroll it, since Lenis swallows wheel events while stopped
   and the scrollbar thumb was the only thing that worked before. */
.enquire-modal__panel {
  position: relative;
  width: min(100%, 460px);
  max-height: min(92dvh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: var(--shadow-3);
  padding: clamp(26px, 4vw, 40px);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity var(--d-base) var(--ease-emph),
              transform var(--d-base) var(--ease-emph);
}
[data-enquire-open="true"] .enquire-modal__panel {
  opacity: 1;
  transform: none;
}

.enquire-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--mute);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.enquire-modal__close:hover { background: rgba(12, 10, 9, 0.06); color: var(--ink); }

.enquire-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: var(--s-2) 0 var(--s-3);
}
.enquire-modal__intro {
  color: var(--mute);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 var(--s-6);
  max-width: 40ch;
}

.enquire-form { display: flex; flex-direction: column; gap: var(--s-4); }
/* display:flex above outranks the UA [hidden] rule, so the form kept its
   height after a successful submit and pushed the thank-you into a scroll. */
.enquire-form[hidden] { display: none; }
.enquire-field { display: flex; flex-direction: column; gap: 6px; }

/* Label and error share one row, so validation never changes the panel's height. */
.enquire-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 1em;
}
.enquire-field label,
.enquire-field__error {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.enquire-field__error {
  color: #B4442E;
  letter-spacing: 0.08em;
  text-align: right;
  white-space: nowrap;
}

.enquire-field input {
  width: 100%;
  /* 16px minimum stops iOS Safari zooming the page on focus */
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  transition: border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.enquire-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(24, 118, 155, 0.16);
}
.enquire-field input[aria-invalid="true"] { border-color: #B4442E; }

/* Honeypot. Moved off-screen rather than display:none or visibility:hidden,
   because a filler that reads computed styles skips anything hidden that way
   and the trap never springs. Nothing here is focusable or announced: the
   inputs carry tabindex="-1" and the wrapper is aria-hidden. */
.enquire-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form-level failure (network, or a rejected submission). Sits above the
   button so it is between the visitor and the thing they are about to press
   again, and reserves no height until it has something to say. */
.enquire-form__alert {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(180, 68, 46, 0.35);
  border-left-width: 3px;
  border-radius: 4px;
  background: rgba(180, 68, 46, 0.06);
  color: #8F3524;
  font-size: 0.85rem;
  line-height: 1.6;
}
.enquire-form__alert[hidden] { display: none; }

.enquire-form__submit { width: 100%; justify-content: center; margin-top: var(--s-2); }
.enquire-form__submit:disabled { opacity: 0.6; cursor: default; }
.enquire-form__note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--mute-2);
  text-align: center;
}

/* The reCAPTCHA v3 badge is fixed bottom-right, landing on top of
   .enquire-fab. Google allows hiding it provided the disclosure below is shown
   in the form, so the badge goes and .enquire-form__legal carries the notice.
   Removing one without the other breaks Google's terms, so they stay together. */
.grecaptcha-badge { visibility: hidden; }

.enquire-form__legal {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--mute-2);
  text-align: center;
  opacity: 0.75;
}
.enquire-form__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enquire-form__legal a:hover { color: var(--ink); }

.enquire-modal__panel[data-state="done"] > .eyebrow,
.enquire-modal__panel[data-state="done"] > .enquire-modal__title,
.enquire-modal__panel[data-state="done"] > .enquire-modal__intro { display: none; }

.enquire-modal__done { text-align: center; padding: var(--s-5) 0 var(--s-2); }
.enquire-modal__done h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  margin: 0 0 var(--s-3);
}
.enquire-modal__done p { color: var(--mute); line-height: 1.7; margin: 0 0 var(--s-6); }

@media (prefers-reduced-motion: reduce) {
  .enquire-modal__backdrop,
  .enquire-modal__panel { transition: none; }
}