/* =========================================================================
   Crest Finance — self-hosted fonts
   Latin-subset variable woff2 files under public/assets/fonts/, no CDN, no
   external requests. Each @font-face declares the weight *range* the
   variable font instance actually supports so the browser can interpolate
   any weight in between (e.g. Inter 400-700 covers the 400/600/700 the
   design tokens below use without needing three separate static files).
   ========================================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-variable.woff2") format("woff2");
}

/* Latin subset of Newsreader (OFL, licence in the fonts folder), with its
   weight and optical-size axes. Used for headings in the admin area now
   and on the public site once it moves to the navy and gold direction. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-variable.woff2") format("woff2");
}

/* =========================================================================
   Crest Finance — design tokens
   All colours, spacing and type sizes live here. Nothing below this block
   should hardcode a colour, spacing value or font size.
   Breakpoints are 768px (tablet) and 1024px (desktop) — kept as literals in
   @media queries since custom properties cannot be used there.
   ========================================================================= */
:root {
  /* Colour */
  --color-primary: #0b4f8a;
  --color-primary-dark: #073a63;
  --color-primary-tint-10: #e8f1fa;
  --color-primary-tint-20: #cfe0ef;

  --color-bg: #fbf9f4;
  --color-bg-alt: #f7f5f2;
  --color-surface: #ffffff;
  --color-on-primary: #ffffff;

  /* Warm neutrals for text/borders — deliberately not blue-cast greys */
  --color-text: #1c1917;
  --color-text-muted: #6b6459;
  --color-border: #e2ddd6;

  --color-error: #b3261e;
  --color-error-bg: #fbeaea;
  --color-success: #1e6b3e;
  --color-success-bg: #eaf5ee;
  --color-focus: #1c7ed6;
  --color-accent: #c9821a;

  /* Navy and gold, used by the loan pages */
  --color-navy-950: #102a4c;
  --color-navy-900: #173762;
  --color-navy-800: #1f477b;
  --color-navy-700: #2e5c96;
  --color-navy-tint-10: #eef1f6;
  --color-navy-tint-20: #dde3ec;
  --color-gold: #c8a96a;
  --color-gold-strong: #a9894f;
  --color-gold-text: #85693a;
  --color-on-navy: #f4efe6;
  --color-on-navy-muted: #c9d3e3;

  /* Type */
  --font-family-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* System serif, no font file — reserved for the rare editorial headline
     (e.g. /book-a-call) that wants a deliberate contrast with the
     sans-serif type used everywhere else. */
  --font-family-serif: Georgia, "Times New Roman", Times, serif;
  --font-family-editorial: "Newsreader", Georgia, "Times New Roman", serif;

  /* 1.25 modular scale from a 1rem base */
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;
  --text-display: 3.815rem;

  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-display: 800;

  --line-height-tight: 1.2;
  --line-height-base: 1.6;

  --letter-spacing-tight: -0.02em;

  --measure: 65ch;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --tap-target: 44px;
  --step-size: 2rem;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Elevation — subtle, warm-tinted; financial services shouldn't float */
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.08);
  --shadow-md: 0 6px 16px rgba(28, 25, 23, 0.08);
  --shadow-lg: 0 16px 40px rgba(28, 25, 23, 0.1);

  /* Layout */
  --container-max: 1200px;
}

/* =========================================================================
   Reset & base
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Any component's own `display` rule (`.calc__fields{display:grid}`,
   `.field{display:flex}`, etc.) beats the UA stylesheet's unqualified
   `[hidden]{display:none}` in normal cascade order, since author rules
   always outrank UA rules regardless of specificity. Restoring `hidden` as
   a hard override here means JS can toggle `.hidden` on any element,
   including ones with their own display rules, and have it actually work. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--text-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}

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

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-dark);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-display);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}

/* Digits shouldn't jitter horizontally as a calculator figure updates */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

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

button {
  font: inherit;
}

/* Baseline look for every form control site-wide — not just ones wrapped
   in .field. Previously this styling only lived on ".field input,
   .field select" (missing textarea entirely) plus a separate, thinner
   ".admin-subsection textarea" rule with no background/color of its own,
   so any bare control (e.g. the admin tables' inline Name/Order inputs)
   fell back to the browser's stark default white/gray chrome — visibly
   mismatched against this site's warm, low-contrast palette. One rule,
   applied everywhere, keeps every field consistent. */
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6459' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
  padding-right: var(--space-7);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(28, 126, 214, 0.15);
}

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

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

/* A table ignores width: 1px and keeps its full width in the page's scroll area. */
table.visually-hidden {
  display: block;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 100;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--space-3);
}

/* =========================================================================
   Layout helpers
   ========================================================================= */
.section {
  padding: var(--space-7) 0;
}

.section--alt {
  background: var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
}

.section--tint {
  background: var(--color-primary-tint-10);
  border-block: 0;
}

.section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section__inner--narrow {
  max-width: 760px;
}

.section__heading {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
}

.section__intro,
.section__lede {
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.section__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
}

.booking-form__required-note {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.booking-form__consent {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-1);
}

.booking-form__privacy {
  margin: 0 0 var(--space-4);
}

.booking-form__summary-error {
  margin: 0;
}

.application-lookup__submit {
  margin-top: var(--space-6);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.booking-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.news-editor .button[type="submit"] {
  margin-top: var(--space-4);
}

.button--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.button--primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.button--secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.button--secondary:hover {
  background: var(--color-primary-tint-10);
}

.button--muted {
  background: var(--color-bg-alt);
  border-color: var(--color-bg-alt);
  color: var(--color-text);
}

.button--muted:hover {
  background: color-mix(in srgb, var(--color-border) 45%, var(--color-bg-alt));
  border-color: color-mix(in srgb, var(--color-border) 45%, var(--color-bg-alt));
  color: var(--color-text);
}

.button--muted:visited,
.button--muted:active {
  color: var(--color-text);
}

.button--muted:focus-visible {
  outline: none;
  box-shadow: none;
}

/* =========================================================================
   Header & nav
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-navy-900);
}

.site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.site-header__button.button {
  white-space: nowrap;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.site-header__link {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-header__link:hover,
.site-header__link[aria-current="page"] {
  color: var(--color-navy-800);
}

@media (max-width: 1199px) {
  .site-header__link {
    display: none;
  }
}

@media (max-width: 1023px) {
  .site-header__button.button {
    display: none;
  }
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  text-decoration: none;
  color: var(--color-navy-900);
}

.site-logo__image {
  display: block;
  width: auto;
  height: var(--space-7);
}

.site-logo__name {
  font-family: var(--font-family-editorial);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-logo:hover {
  color: var(--color-navy-700);
}

.nav-toggle {
  position: relative;
}

.nav-toggle summary {
  list-style: none;
  cursor: pointer;
}

.nav-toggle summary::-webkit-details-marker {
  display: none;
}

.nav-toggle__button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-navy-900);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.nav-toggle__icon {
  position: relative;
  display: inline-block;
  width: var(--space-4);
  height: 2px;
  background: currentColor;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: var(--space-4);
  height: 2px;
  background: currentColor;
}

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

.nav-toggle__icon::after {
  top: 6px;
}

.site-nav--mobile {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-3));
  width: min(85vw, 340px);
  max-width: calc(100vw - var(--space-6));
  max-height: calc(100vh - var(--space-9));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
}

.site-nav__mobile-cta {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.site-nav__mobile-cta .button {
  justify-content: center;
}

.site-nav--desktop {
  display: none;
}

.site-nav ul {
  list-style: none;
  display: grid;
  gap: var(--space-1);
}

.site-nav a,
.site-nav__mega-summary,
.site-nav__mega-link {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.site-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition: color 0.15s ease;
}

.site-nav a.button {
  color: var(--color-navy-950);
}

.site-nav a:not(.button):hover,
.site-nav a:not(.button)[aria-current="page"] {
  color: var(--color-navy-900);
}

/* Services and Calculators menus are <details> elements nested inside the
   main nav, so they open and close with a click, tap or Enter, with no
   JavaScript involved. */
.site-nav__mega {
  position: relative;
}

.site-nav__mega-summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  list-style: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition: color 0.15s ease;
}

.site-nav__mega-summary::-webkit-details-marker {
  display: none;
}

.site-nav__mega-summary::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--space-2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.site-nav__mega[open] > .site-nav__mega-summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.site-nav__mega-summary:hover,
.site-nav__mega-summary[aria-current="page"],
.site-nav__mega[open] > .site-nav__mega-summary {
  color: var(--color-navy-900);
}

.site-nav__mega-panel {
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
}

.site-nav__mega-panel ul {
  list-style: none;
  display: grid;
  gap: var(--space-1);
}

.site-nav .site-nav__mega-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--color-navy-900);
  transition: background-color 0.15s ease;
}

.site-nav .site-nav__mega-link:hover,
.site-nav .site-nav__mega-link[aria-current="page"] {
  background: var(--color-navy-tint-10);
}

.site-nav__mega-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent);
  border-radius: 50%;
  color: var(--color-gold-strong);
}

.site-nav__mega-icon svg {
  width: 18px;
  height: 18px;
}

.site-nav__mega-link > span:last-child {
  min-width: 0;
}

.site-nav__mega-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-navy-900);
}

.site-nav__mega-blurb {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.site-nav__mega-link--simple {
  align-items: center;
}

.site-nav__mega-link--all .site-nav__mega-title {
  color: var(--color-gold-text);
}

.site-nav__mega-divider {
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--color-border);
  list-style: none;
}

@media (min-width: 768px) {
  /* Modern Chrome hides a closed <details>'s non-summary content via an
     internal box that no child `display` override — not even with
     `!important` — can defeat (confirmed with an isolated repro). So
     rather than fighting the mobile <details> at desktop widths, it is
     hidden outright and a second, always-rendered <nav> (never wrapped in
     a <details>) takes over. See header.php for the two renderings. */
  .nav-toggle {
    display: none;
  }

  .site-nav--desktop {
    display: flex;
  }

  .site-nav--desktop ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }

  .site-nav--desktop > ul > li {
    position: relative;
  }

  .site-nav__mega-panel {
    position: absolute;
    left: 0;
    top: calc(100% + var(--space-3));
    z-index: 30;
    width: 300px;
    max-width: 40vw;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-gold);
    box-shadow: var(--shadow-lg);
  }

  .site-nav__mega-panel ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-nav__mega-panel--simple {
    width: 240px;
  }

  .site-nav--desktop a[aria-current="page"]::before,
  .site-nav--desktop .site-nav__mega-summary[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 0;
    height: 1px;
    background: var(--color-gold);
  }

  .site-nav--desktop .site-nav__mega-panel a[aria-current="page"]::before {
    content: none;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .site-logo__name {
    display: none;
  }
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  margin-top: var(--space-8);
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--color-gold) 10%, transparent), transparent 40%),
    var(--color-navy-950);
  border-top: 1px solid color-mix(in srgb, var(--color-gold) 30%, transparent);
  color: var(--color-on-navy-muted);
  font-size: var(--text-sm);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5) var(--space-7);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.site-footer__col {
  min-width: 0;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-family-editorial);
  font-size: var(--text-lg);
  color: var(--color-on-navy);
}

.site-footer__brand img {
  display: block;
  width: auto;
  height: var(--space-7);
}

.site-footer__disclaimer {
  max-width: 44ch;
  margin-bottom: var(--space-5);
  color: var(--color-on-navy-muted);
}

.site-footer a {
  color: var(--color-on-navy-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

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

.site-footer__disclaimer a {
  color: var(--color-on-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer a.button {
  color: var(--color-navy-950);
}

.site-footer__heading {
  margin-bottom: var(--space-4);
  color: var(--color-gold);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer__meta,
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.site-footer__bottom {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--color-on-navy) 10%, transparent);
  font-size: var(--text-xs);
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================================
   Hero (home) & page hero (inner pages)
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  top: -140px;
  right: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 30% 30%, var(--color-primary-tint-20), transparent 70%);
}

.hero::after {
  bottom: -180px;
  right: 12%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 60% 60%, rgba(201, 130, 26, 0.14), transparent 70%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-6);
  text-align: left;
  display: grid;
  gap: var(--space-6);
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__image {
  width: min(100%, 480px);
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  object-fit: contain;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: var(--color-primary-tint-10);
  color: var(--color-primary-dark);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-3);
}

.hero__heading {
  font-size: var(--text-3xl);
  line-height: 1;
  max-width: 12ch;
  margin-bottom: var(--space-3);
}

.hero__word,
.hero__arrow {
  display: inline-block;
}

.hero__word--accent {
  color: var(--color-accent);
}

.hero__arrow {
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.12em;
  color: var(--color-accent);
  vertical-align: middle;
  transform: translateY(-0.08em);
}

.hero__arrow svg {
  width: 100%;
  height: 100%;
}

.hero__subheading {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 42ch;
  margin-inline: 0;
  margin-bottom: var(--space-4);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.hero__secondary-link {
  border-radius: 999px;
  background: var(--color-primary-tint-10);
  border: 1px solid var(--color-primary-tint-20);
  padding: var(--space-3) var(--space-5);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hero__secondary-link:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-tint-20);
  border-color: var(--color-primary-tint-20);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .hero__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
}

.hero__reassurance {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Entrance stagger: the opacity:0 starting state is only ever reached via
   the .is-animating class, added at runtime by hero-intro.js right before
   the transition to .is-ready fires. A page with that script blocked or
   failing to load simply skips the animation and shows the hero normally,
   same defensive pattern as .reveal in scroll-reveal.js. */
.hero.is-animating .hero__word,
.hero.is-animating .hero__arrow,
.hero.is-animating .hero__subheading,
.hero.is-animating .hero__actions,
.hero.is-animating .hero__reassurance {
  opacity: 0;
  transform: translateY(16px);
}

.hero.is-ready .hero__word,
.hero.is-ready .hero__arrow,
.hero.is-ready .hero__subheading,
.hero.is-ready .hero__actions,
.hero.is-ready .hero__reassurance {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero__word:nth-child(1) { transition-delay: 0.05s; }
.hero__word:nth-child(2) { transition-delay: 0.1s; }
.hero__word:nth-child(3) { transition-delay: 0.15s; }
.hero__word:nth-child(4) { transition-delay: 0.2s; }
.hero__arrow { transition-delay: 0.25s; }
.hero__subheading { transition-delay: 0.32s; }
.hero__actions { transition-delay: 0.4s; }
.hero__reassurance { transition-delay: 0.45s; }

.hero__cta {
  gap: var(--space-3);
  border-radius: 999px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-4);
  box-shadow: none;
}

.hero__cta:hover {
  box-shadow: var(--shadow-lg);
}

.hero__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-primary);
  flex-shrink: 0;
}

.hero__cta-icon svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    align-items: center;
  }

  .hero__heading {
    font-size: var(--text-display);
  }

  .hero__image {
    width: min(100%, 540px);
  }
}

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-9) 0 var(--space-8);
  background: linear-gradient(120deg, var(--color-navy-900) 0%, var(--color-navy-800) 55%, var(--color-navy-700) 100%);
  color: var(--color-on-navy);
}

/* Soft navy and gold light behind the heading, plus a fine gold rule. */
.page-hero::before,
.page-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.page-hero::before {
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--color-gold) 18%, transparent), transparent 38%),
    radial-gradient(circle at 10% 110%, var(--color-navy-700), transparent 45%);
}

.page-hero::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 38%;
  background: repeating-linear-gradient(
    115deg,
    transparent 0 var(--space-6),
    color-mix(in srgb, var(--color-gold) 7%, transparent) var(--space-6) calc(var(--space-6) + 1px)
  );
  mask-image: linear-gradient(90deg, transparent, var(--color-text) 60%);
}

.page-hero__inner {
  position: relative;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.page-hero__heading {
  font-family: var(--font-family-editorial);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-on-navy);
  max-width: 20ch;
  margin-bottom: var(--space-4);
}

.page-hero__subheading {
  font-size: var(--text-md);
  color: var(--color-on-navy-muted);
  max-width: 56ch;
  margin-bottom: 0;
}

.page-hero__subheading + .button {
  margin-top: var(--space-5);
}
/* =========================================================================
   Loan type tiles (homepage): photo on the right fading into a light panel,
   numbered, with a gold rule and icon, in the navy and gold look.
   ========================================================================= */
.loan-tiles-section {
  background: var(--color-surface);
  border-top: 3px solid var(--color-gold);
  border-bottom: 1px solid var(--color-navy-tint-20);
  box-shadow: 0 -12px 24px -16px rgba(16, 42, 76, 0.25);
}

.loan-tiles-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.loan-tiles-section__header .loan-eyebrow::after {
  content: '';
  width: var(--space-6);
  height: 1px;
  background: currentColor;
}

.loan-tiles-section__header .loan-heading {
  max-width: 24ch;
  margin-bottom: var(--space-4);
}

.loan-tiles-section__divider {
  width: 8px;
  height: 8px;
  background: var(--color-gold);
  transform: rotate(45deg);
}

.loan-tiles {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .loan-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .loan-tiles { grid-template-columns: repeat(6, 1fr); }
  .loan-tile { grid-column: span 2; }
  .loan-tile:nth-child(-n+2) {
    grid-column: span 3;
    min-height: 19rem;
  }

  .loan-tile:nth-child(-n+2) .loan-tile__title { font-size: var(--text-xl); }
}

.loan-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 15rem;
  padding: var(--space-5);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-navy-tint-10);
  color: var(--color-navy-900);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 42, 76, 0.08), 0 8px 20px -12px rgba(16, 42, 76, 0.35);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.loan-tile:hover,
.loan-tile:focus-visible {
  box-shadow: 0 2px 4px rgba(16, 42, 76, 0.1), 0 16px 28px -12px rgba(16, 42, 76, 0.45);
  transform: translateY(-2px);
}

.loan-tile__image {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  width: 62%;
  height: 100%;
  object-fit: cover;
}

.loan-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--color-navy-tint-10) 40%, rgba(238, 241, 246, 0.55) 62%, rgba(238, 241, 246, 0) 100%);
}

.loan-tile__number {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-gold-text);
}

.loan-tile__title {
  max-width: 11ch;
  margin: var(--space-1) 0 0;
  font-family: var(--font-family-editorial);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-navy-900);
}

.loan-tile__title::after {
  content: '';
  display: block;
  width: var(--space-6);
  height: 1px;
  margin: var(--space-3) 0;
  background: var(--color-gold);
}

.loan-tile__body {
  max-width: 17ch;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-navy-800);
}

.loan-tile__icon {
  display: flex;
  margin-top: var(--space-4);
  color: var(--color-gold-strong);
}

.loan-tile__icon svg {
  width: 28px;
  height: 28px;
}

.loan-tile__image {
  transition: transform 0.4s ease;
}

.loan-tile:hover .loan-tile__image,
.loan-tile:focus-visible .loan-tile__image {
  transform: scale(1.04);
}


/* Applied by scroll-reveal.js at runtime only — see that file's header
   comment for why this can't be an unconditional CSS default. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .loan-tile__image,
  .button {
    transition: none;
  }

  .loan-tile:hover,
  .loan-tile:focus-visible,
  .button--primary:hover {
    transform: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__word,
  .hero__arrow,
  .hero__subheading,
  .hero__actions {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   How broking works (steps)
   ========================================================================= */
.steps {
  list-style: none;
  display: grid;
  gap: var(--space-5);
}

.steps__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.steps__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.steps__number {
  display: block;
  font-family: var(--font-family-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.steps__heading {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

.steps__body {
  color: var(--color-text-muted);
  max-width: 32ch;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  .steps__item:hover {
    transform: none;
  }
}

/* =========================================================================
   Lender logo band
   ========================================================================= */
.lender-band__heading {
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.lender-band__viewport {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, var(--color-text) 10%, var(--color-text) 90%, transparent);
}

/* The list is rendered twice, so sliding it left by half loops seamlessly. */
.lender-band__track {
  list-style: none;
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  animation: lender-band-scroll 60s linear infinite;
}

.lender-band__viewport:hover .lender-band__track {
  animation-play-state: paused;
}

.lender-band__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-inline: var(--space-6);
}

.lender-band__logo {
  display: block;
  height: var(--space-6);
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

@keyframes lender-band-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lender-band__viewport {
    mask-image: none;
  }

  .lender-band__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-4);
  }

  .lender-band__item[aria-hidden="true"] {
    display: none;
  }
}

/* =========================================================================
   Closing CTA
   ========================================================================= */
.closing-cta {
  text-align: center;
}

.closing-cta__inner {
  max-width: 640px;
  background: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}

.closing-cta__heading {
  font-size: var(--text-xl);
  color: var(--color-on-primary);
  margin-bottom: var(--space-3);
}

.closing-cta__body {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-5);
  margin-inline: auto;
}

.closing-cta .button--primary {
  background: var(--color-accent);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}

.closing-cta .button--primary:hover {
  background: var(--color-accent);
  opacity: 0.9;
  box-shadow: var(--shadow-lg);
}

/* =========================================================================
   Check list (loan pages, about)
   ========================================================================= */
.check-list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
}

.check-list li {
  position: relative;
  padding-inline-start: var(--space-6);
  max-width: var(--measure);
}

.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* =========================================================================
   Shared calculator layout — used by the repayment, borrowing-power and
   stamp-duty calculators alike. Desktop is two columns (inputs / hairline
   divider / sticky result); mobile stacks, with the result always rendered
   in normal flow directly under the inputs (never hidden behind a toggle).
   ========================================================================= */
.calc {
  display: grid;
  gap: var(--space-6);
}

.calc__heading {
  font-size: var(--text-lg);
  margin-bottom: var(--space-5);
}

.calc__fields {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: start;
}

.calc__fields > .field + .field {
  margin-top: 0;
}

.calc__group + .calc__group {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.calc__fields + .calc__group,
.calc__group + [data-calc-extra-fields] {
  margin-top: var(--space-6);
}

.calc__fields[data-calc-extra-fields] {
  align-items: end;
}

.calc__fields[data-calc-extra-fields] > .field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.calc__fields[data-calc-extra-fields] .field__help {
  min-height: 2.75em;
}

.calc__group-heading {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-4);
}

.calc__divider {
  display: none;
}

.calc__result-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  padding-top: calc(var(--space-6) + 4px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.calc__result-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.calc__result-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-4);
}

.calc__result-icon {
  display: flex;
  color: var(--color-primary);
}

.calc__result-icon svg {
  width: 20px;
  height: 20px;
}

.calc__figure {
  font-family: var(--font-family-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-primary-dark);
  line-height: 1;
  margin: 0;
}

.calc__figure-unit {
  font-family: var(--font-family-body);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  letter-spacing: normal;
  color: var(--color-text-muted);
  margin-left: var(--space-2);
  /* Wrap onto its own line as a whole if the figure doesn't leave room —
     never split "per" and "month" onto separate lines. */
  white-space: nowrap;
}

/* Borrowing power's "$X to $Y" range treatment — two smaller figures
   either side of a literal "to", since two display-size numbers side by
   side don't fit most viewports. */
.calc__figure-range {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.calc__figure-range .calc__figure {
  font-size: var(--text-2xl);
}

.calc__figure-range-to {
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.calc__figure-caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
}

.calc__assumptions-heading {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-2);
}

.calc__assumptions {
  list-style: disc;
  padding-left: var(--space-5);
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.calc__assumptions li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.calc__secondary-grid {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr — a grid item's default min-width is
     "auto" (its own min-content size), so a long unbroken figure like
     "$4,317,120" would push its track wider than the card and get
     clipped by .calc__result-card's overflow: hidden instead of
     wrapping. The 0 minimum lets it wrap normally when space is tight. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.calc__secondary-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.calc__secondary-value {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.calc__cta {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-primary-dark);
  border-radius: var(--radius-md);
}

.calc__cta-heading {
  font-size: var(--text-md);
  color: var(--color-on-primary);
  margin: 0 0 var(--space-2);
}

.calc__cta-body {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-4);
  max-width: none;
}

.calc__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.calc__cta .button--primary {
  background: var(--color-on-primary);
  color: var(--color-primary-dark);
}

.calc__cta .button--primary:hover {
  background: var(--color-primary-tint-10);
  color: var(--color-primary-dark);
}

/* .button--secondary's default (transparent + primary-blue border/text)
   has poor contrast on this panel's dark primary background — same fix
   already applied to .admin-header__logout-button for the same reason. */
.calc__cta .button--secondary {
  border-color: var(--color-on-primary);
  color: var(--color-on-primary);
}

.calc__cta .button--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 1024px) {
  .calc {
    /* The right column (result card + chart, both full width of it) needs
       more room than an even split gives it — a wide currency figure like
       "$4,317,120" plus its label was clipping at 1fr:1fr. */
    grid-template-columns: 1fr 1px 1.35fr;
    align-items: start;
    gap: var(--space-7);
  }

  .calc__divider {
    display: block;
    align-self: stretch;
    background: var(--color-border);
  }

  .calc__result {
    position: sticky;
    top: calc(96px + var(--space-5));
  }
}

/* Stamp duty's stepped (submit, not live) flow — reuses .calc__result-card
   and friends for the same card styling as the other two calculators, but
   as a single stacked column rather than the live two-column grid. */
.calc-stepped {
  max-width: 640px;
}

.calc-stepped .calc__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.calc-stepped .calc__fields > .field:nth-child(1) { grid-column: 1; }
.calc-stepped .calc__fields > .field:nth-child(2) { grid-column: 2; }
.calc-stepped .calc__fields > .field:nth-child(3) { grid-column: 1; }
.calc-stepped .calc__fields > .field:nth-child(4) { grid-column: 2; }

.calc-stepped .field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.calc-stepped .field__radio-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: center;
}

.calc-stepped .field__radio {
  min-height: 44px;
}

.calc-stepped .calc__group {
  margin-top: var(--space-4);
  width: 100%;
}

.calc-stepped .calc__group .field__radio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.calc-stepped .calc__result-card + .calc__result-card {
  margin-top: var(--space-6);
}

.calc-stepped [data-sd-submit] {
  margin-top: var(--space-5);
}

.calc-stepped [data-sd-back] {
  margin-top: var(--space-5);
}

.calc__breakdown {
  margin: var(--space-5) 0 0;
}

.calc__breakdown-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.calc__breakdown-row dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.calc__breakdown-row dd {
  margin: 0;
  font-weight: var(--font-weight-medium);
}

.calc__breakdown-row--total {
  border-bottom: none;
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  border-top: 2px solid var(--color-text);
}

.calc__breakdown-row--total dt {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.calc__breakdown-row--total dd {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
}

/* CSS-only tooltip: :hover for mouse users, :focus-within so keyboard
   users tabbing to the trigger also see it, aria-describedby so screen
   readers announce it on focus regardless of visibility. */
.tooltip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--space-1);
}

.tooltip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-style: italic;
  font-family: Georgia, serif;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.tooltip__text {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.tooltip:hover .tooltip__text,
.tooltip:focus-within .tooltip__text {
  opacity: 1;
  pointer-events: auto;
}

/* A viewBox="0 0 100 10" SVG, not a div — its x/width/etc are set as plain
   geometry attributes by PHP (first paint) and JS (live updates) rather
   than CSS `left`/`width` via style="...", because the site's CSP sends
   style-src 'self' with no 'unsafe-inline' and silently drops inline
   styles (fill/stroke here are ordinary stylesheet rules, so they're
   unaffected). */
.calculator__range-bar {
  display: block;
  width: 100%;
  height: 10px;
  margin-top: var(--space-4);
  overflow: visible;
}

.calculator__range-track {
  fill: var(--color-bg);
  stroke: var(--color-border);
  stroke-width: 1;
}

.calculator__range-fill {
  fill: var(--color-primary);
}

.calculator__range-marker {
  fill: var(--color-accent);
}

.calculator__placeholder {
  color: var(--color-text-muted);
  margin: 0;
}

.calculator__result-figure {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-2);
}

.calculator__result-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.calculator__disclaimer {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: none;
}

/* =========================================================================
   Form fields
   ========================================================================= */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field + .field {
  margin-top: var(--space-5);
}

.field label,
.field__legend {
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
}

.field label .required-indicator,
.field__legend .required-indicator {
  color: var(--color-error);
}

.field__help {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: -0.25rem 0 0;
  max-width: none;
}

/* Border/background/padding/select-arrow/focus-ring now live on the
   global input/select/textarea rule near the top of this file, so every
   form control looks consistent whether or not it's wrapped in .field. */

.field__radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.field__radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-sm);
  cursor: pointer;
}

.field__radio input {
  accent-color: var(--color-primary);
}

.field__control {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin .grid.two-up {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .admin .grid.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field__control input[type="range"] {
  width: 100%;
  padding: 0;
  border: none;
  accent-color: var(--color-primary);
}

.field__error {
  font-size: var(--text-sm);
  color: var(--color-error);
  min-height: 1em;
  margin: 0;
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.field--error input,
.field--error select {
  border-color: var(--color-error);
}

.field--error label {
  color: var(--color-error);
}

.form-alert {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.booking-form__summary-error {
  margin: 0 0 var(--space-3);
  color: var(--color-error);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.form-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin: 0;
}

.enquiry-form {
  display: grid;
  gap: var(--space-4);
  max-width: 560px;
}

.enquiry-form__row {
  display: grid;
  gap: var(--space-4);
}

.enquiry-form__row + .enquiry-form__row,
.enquiry-form .field + .field {
  margin-top: 0;
}

.enquiry-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  max-width: 560px;
}

.enquiry-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.enquiry-form__inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.enquiry-form__submit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.enquiry-form__submit .booking-form__privacy {
  margin: 0;
}

.enquiry-form__submit .booking-form__summary-error {
  margin: 0;
}

@media (min-width: 540px) {
  .enquiry-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* display:none, not the usual clip-based visually-hidden pattern — a
   honeypot field must be invisible to autofill engines and password
   managers, not just to sighted users. The clip/position:absolute
   technique keeps the field in the layout tree, which several browsers'
   built-in autofill and third-party password managers still scan and fill
   (commonly triggered by the field name "website" matching a saved
   profile value), silently turning a genuine visitor's submission into a
   detected "bot" — no error, just a fake-looking success message and
   nothing actually happening. display:none is what both bots' own
   heuristics and every autofill engine reliably respect. The wrapper is
   also aria-hidden="true" already, so screen readers were never going to
   announce this field either way — this loses nothing. */
.enquiry-form__honeypot {
  display: none !important;
}

/* =========================================================================
   Contact page — form card + reassurance sidebar
   ========================================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

/* Google's widget is a fixed 304 x 78 iframe, wider than the card on small phones. */
@media (max-width: 400px) {
  .enquiry-form__captcha .g-recaptcha {
    transform: scale(0.85);
    transform-origin: left top;
    margin-bottom: calc(78px * -0.15);
  }
}

.contact-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.contact-aside {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.contact-aside__heading {
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}

.contact-aside .check-list {
  margin-bottom: var(--space-5);
}

.contact-aside__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* =========================================================================
   Misc
   ========================================================================= */
.not-found {
  text-align: center;
  padding: var(--space-9) 0;
}

/* =========================================================================
   Admin area
   Uses the same tokens/components as the public site (.button, .field,
   .form-alert). This section only adds the admin-specific chrome that has
   no public-site equivalent: header bar, stat tiles, table, status badges.
   ========================================================================= */
.admin-header {
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
}

.admin-header__inner {
  max-width: 1600px;
  margin-inline: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.admin-header__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-right: auto;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  line-height: 1.1;
  color: var(--color-on-primary);
  text-decoration: none;
}

.admin-header__brand:hover,
.admin-header__brand:focus-visible,
.admin-header__brand:visited {
  color: var(--color-on-primary);
  text-decoration: none;
}

.admin-header__brand-tag {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  opacity: 0.8;
  white-space: nowrap;
}

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

.admin-nav a {
  color: var(--color-on-primary);
  white-space: nowrap;
  text-decoration: none;
}

.admin-nav a:hover,
.admin-nav a:focus-visible,
.admin-nav a:visited {
  color: var(--color-on-primary);
  text-decoration: none;
}

.admin-header__logout {
  margin: 0;
}

.admin-header__logout-button {
  background: transparent;
  border-color: var(--color-on-primary);
  color: var(--color-on-primary);
  padding: var(--space-2) var(--space-4);
}

.admin-header__logout-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Admin is a data-heavy internal tool, not the marketing site — it gets
   its own, much wider cap than --container-max (1200px) instead of
   sharing that public-page convention, so tables have real room to
   breathe instead of being squeezed into a column narrower than the
   browser window actually is. */
.admin-main {
  max-width: 1600px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-9);
}

.admin-panel--narrow {
  max-width: 560px;
  margin-inline: auto;
}

.admin-panel__heading {
  font-size: var(--text-2xl);
  margin-top: var(--space-4);
  margin-bottom: var(--space-8);
}

.admin-panel--narrow .admin-panel__heading,
.admin-panel--narrow .form-alert,
.admin-panel--narrow > p {
  text-align: center;
}

.admin-login-form {
  display: grid;
  gap: var(--space-5);
  max-width: 360px;
  margin-inline: auto;
}

/* Same stacked-with-gaps treatment as .admin-login-form, for the other
   plain (non-.admin-filters) admin forms — FAQ question add/edit — whose
   .field divs and submit button had no spacing between them. */
.admin-form {
  display: grid;
  gap: var(--space-5);
  max-width: 480px;
  margin-bottom: var(--space-5);
}

.admin-form--compact {
  gap: var(--space-3);
}

.admin-client-create-page {
  max-width: 760px;
  margin-inline: auto;
}

.admin-client-form {
  max-width: none;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 2px 10px rgba(18, 45, 65, 0.06);
}

.admin-client-form .field + .field {
  margin-top: 0;
}

.admin-client-form .field,
.admin-client-form .field__control {
  gap: var(--space-1);
}

.admin-client-form__section {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.admin-client-form__section + .admin-client-form__section {
  padding-top: var(--space-2);
}

.admin-client-form__section h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.admin-client-form__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.admin-client-form__actions {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--space-2);
}

.form-alert--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success);
}

.admin-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  flex: 1 1 auto;
  margin-bottom: 0;
}

.admin-stats__hint {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.admin-stats__item {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  min-width: 120px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(18, 45, 65, 0.07);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-stats__item:hover,
.admin-stats__item:focus-visible {
  border-color: var(--color-accent-text);
  box-shadow: 0 4px 12px rgba(18, 45, 65, 0.1);
  color: inherit;
  text-decoration: none;
  transform: translateY(-2px);
}

.admin-stats__item--active {
  border-color: var(--color-accent-text);
  box-shadow: inset 0 0 0 1px var(--color-accent-text), 0 2px 8px rgba(18, 45, 65, 0.07);
}

.admin-stats__item--all.admin-stats__item--active {
  background: var(--color-accent-tint);
}

.admin-stats__item--new.admin-stats__item--active {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.admin-stats__item--contacted.admin-stats__item--active {
  background: #fff4c7;
  border-color: #e5c65a;
  color: #725b10;
}

.admin-stats__item--closed.admin-stats__item--active {
  background: #e7ebef;
  border-color: #c7d0d9;
  color: #4b5966;
}

.admin-stats__value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.admin-stats__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.admin-filters .field {
  min-width: 180px;
}

.admin-filters__search {
  flex: 1 1 14rem;
  min-width: min(100%, 14rem) !important;
}

.admin-filters > .button {
  min-height: 2.75rem;
}

.admin-filters__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: none;
  height: 2.75rem;
}

.admin-filters__create {
  height: 2.75rem;
}

.admin-filters__clear svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.admin-filters__clear:hover,
.admin-filters__clear:focus-visible {
  background: var(--color-primary-tint-10);
  color: var(--color-primary);
}

.admin-filters__export {
  margin-left: auto;                     
  margin-right: var(--space-2);         
  background: transparent;               
  border: 1px solid var(--color-primary); 
  color: var(--color-primary);
  height: 2.75rem;
}

.admin-export-dialog {
  width: min(88vw, 28rem);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 18px 48px rgba(18, 45, 65, 0.2);
}

.admin-export-dialog::backdrop {
  background: rgba(19, 36, 59, 0.35);
}

.admin-export-dialog__eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-export-dialog h2 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  color: var(--color-accent-text);
  font-size: var(--text-2xl);
}

.admin-export-dialog__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.admin-export-dialog__actions form {
  margin: 0;
}

.admin-export-backdrop {
  display: grid;
  min-height: min(70vh, 44rem);
  place-items: center;
  margin: calc(var(--space-6) * -1) calc(var(--space-5) * -1) calc(var(--space-9) * -1);
  padding: var(--space-6) var(--space-5);
  background: rgba(19, 36, 59, 0.12);
}

.admin-export-modal {
  width: min(100%, 30rem);
  max-width: 30rem;
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent-text);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 18px 48px rgba(18, 45, 65, 0.2);
}

.admin-export-modal__eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-export-modal h1 {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.admin-export-modal ul {
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
}

.admin-export-modal__note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.admin-export-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.admin-export-modal__actions form {
  margin: 0;
}

.admin-search-results {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.admin-search-results li {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

/* table-layout: fixed makes the table's own width (100%, i.e. never wider
   than .admin-table-wrap) the hard cap on column widths, instead of the
   browser expanding columns — and the table past its container — to fit
   nowrap content. Columns without an explicit width (the text-heavy ones:
   Name, Question, Email, Title) split whatever space is left over after
   the sized ones below; long content in them wraps instead of overflowing. */
.admin-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: break-word;
}

/* Width hints for short, fixed-format columns (Order, Status, a date, an
   action button) — applied to the <th>, since table-layout: fixed sizes
   columns from the header row. Everything else in the row shares the
   remaining width. Percentages, not pixels: a handful of fixed-px columns
   can add up to more than a genuinely narrow window has room for, which
   starves the one flexible (text) column down to ~0 and forces its text
   to break mid-word, one letter per line. A percentage always scales to
   whatever width actually exists, so no column can be squeezed to nothing. */
.admin-table__col-xs { width: 8%; }
.admin-table__col-sm { width: 16%; }
.admin-table__col-lg { width: 22%; }

/* Lets a text input inside a table cell use the column's width, up to a
   sane reading-width cap — table-layout: fixed above gives text-heavy
   columns like Name real room, but on the categories table (only 3
   columns) that "real room" is most of the row, and an input stretched
   that wide just looks like an oversized empty box. 480px matches
   .admin-form's own width elsewhere. Number inputs keep their own
   deliberate .input--narrow width. */
.admin-table td input[type="text"] {
  width: 100%;
  max-width: 480px;
}

/* Puts a cell's button and its own standalone <form> (e.g. Save + Delete
   on the FAQ categories table) side by side. display:contents drops the
   form's own box out of layout so its button behaves as a direct flex
   item of the cell, without needing the form to visually wrap anything. */
.admin-table__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-table__actions form {
  display: contents;
}

/* Used on a div inside the cell rather than on the <td> itself, so the
   cell stays a real table cell and its border lines up with the row. */
.admin-table__actions--wrap {
  flex-wrap: wrap;
}

/* Expand/collapse trigger for a FAQ question's detail row — see
   admin.js for the click handler that toggles the target row's `hidden`
   attribute and this attribute in lockstep. The arrow rotates via
   aria-expanded rather than a separate class, so the two can never
   drift out of sync with each other. */
.admin-table__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}

.admin-table__toggle:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.admin-table__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.admin-table__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .admin-table__toggle svg {
    transition: none;
  }
}

/* Marks a cell as holding prose or an embedded form (the FAQ question
   text, the inline question-edit row) rather than short single-line data.
   Cells wrap by default now (see overflow-wrap above), so this class is
   mostly a hook for the mobile stacked layout below to lay these cells
   out full-width instead of as a label/value pair. */
.admin-table__wrap-cell {
  white-space: normal;
}

.admin-table__row--clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.admin-table__row--clickable td > a,
.admin-table__row--clickable td a {
  color: inherit;
  text-decoration: none;
}

.admin-table__row--clickable:hover,
.admin-table__row--clickable:focus-visible {
  background: var(--color-bg-alt);
}

/* Below phone width, every .admin-table (enquiries, FAQ categories/
   questions, news) switches from a fixed-layout grid to a stack of
   labelled rows per record — table-layout: fixed (above) already
   guarantees no horizontal overflow at any width, but a phone-width
   column is too narrow for 4-5 columns to stay readable side by side.
   Each <td> needs a data-label attribute (the column header text) for
   the ::before to read from; cells that don't carry one (action buttons,
   the "no results" row, the FAQ inline edit form) just render full-width
   with no label, via .admin-table__wrap-cell. */
@media (max-width: 640px) {
  .admin-table-wrap {
    overflow-x: visible;
    border: none;
  }

  .admin-table thead {
    display: none;
  }

  .admin-table,
  .admin-table tbody,
  .admin-table tr {
    display: block;
    width: 100%;
  }

  .admin-table tr {
    margin-bottom: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .admin-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    white-space: normal;
    border-bottom: 1px solid var(--color-border);
  }

  .admin-table td:last-child {
    border-bottom: none;
  }

  .admin-table td[data-label]::before {
    content: attr(data-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .admin-table__wrap-cell {
    display: block;
  }

  .admin-table td.admin-table__wrap-cell[data-label]::before {
    display: block;
    margin-bottom: var(--space-1);
  }

  /* On a phone the row buttons are tapped, not clicked. */
  .admin-table .button--small {
    min-height: var(--tap-target);
  }

  .admin-table__actions--wrap {
    gap: var(--space-3);
  }
}

.admin-table thead th {
  background: var(--color-bg-alt);
  font-weight: var(--font-weight-medium);
}

.status-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.status-badge--new {
  background: var(--color-primary-tint-20);
  color: var(--color-primary-dark);
}

.status-badge--contacted {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-badge--closed {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.admin-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.admin-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
  align-items: stretch;
}

.admin-detail-grid > div {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 100%;
}

.admin-detail-grid dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.admin-detail-grid dd {
  margin: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-enquiry-page {
  max-width: 1180px;
  margin-inline: auto;
}

.client-inactive {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.admin-enquiry-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.admin-enquiry-header h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.admin-enquiry-header__eyebrow,
.admin-enquiry-card__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-enquiry-header__meta {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.admin-enquiry-header__audit {
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.admin-toast {
  position: fixed;
  top: var(--space-5);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  z-index: 1100;
  width: min(90vw, 25rem);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
  box-shadow: 0 14px 36px rgba(18, 45, 65, 0.28);
  transform: translateX(-50%);
  animation: admin-toast-in 180ms ease-out;
}

@keyframes admin-toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translateX(-50%); }
}

.admin-toast__message {
  flex: 1 1 auto;
}

.admin-toast form {
  margin: 0;
}

.admin-toast__undo,
.admin-toast__close {
  border: 0;
  background: transparent;
  color: var(--color-on-primary);
  cursor: pointer;
  font: inherit;
}

.admin-toast__undo {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.admin-toast__undo:hover,
.admin-toast__undo:focus-visible,
.admin-toast__close:hover,
.admin-toast__close:focus-visible {
  color: var(--color-accent-on-dark);
}

.admin-toast__icon {
  flex: 0 0 auto;
  color: #65d391;
}

.admin-toast__icon svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-toast__close {
  flex: 0 0 auto;
  padding: 0;
  font-size: var(--text-xl);
  line-height: 1;
}

.admin-enquiry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  align-items: stretch;
  gap: var(--space-6);
}

.admin-client-detail-page .admin-enquiry-layout {
  align-items: start;
}

.admin-enquiry-main,
.admin-enquiry-sidebar {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

.admin-enquiry-sidebar {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.admin-client-detail-page .admin-enquiry-sidebar {
  grid-template-rows: none;
}

.admin-enquiry-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 2px 10px rgba(18, 45, 65, 0.06);
}

.admin-enquiry-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-enquiry-card h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.admin-enquiry-card h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
}

.admin-enquiry-card .admin-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

.admin-enquiry-card .admin-detail-grid > div {
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.admin-enquiry-message,
.admin-enquiry-message dt {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-enquiry-message dd {
  margin: 0;
  line-height: 1.65;
  white-space: pre-wrap;
}

.admin-client-applications {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.admin-client-applications h3 {
  margin-top: 0;
}

.admin-enquiry-status-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.admin-enquiry-status-form .field {
  flex: 1 1 12rem;
}

.admin-enquiry-status-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.admin-enquiry-status-picker label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.admin-enquiry-status-picker select {
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.admin-enquiry-status-picker__select {
  position: relative;
  display: inline-flex;
}

.admin-enquiry-status-picker__select select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  padding-right: var(--space-7);
}

.admin-status-select--new {
  background-color: var(--color-success-bg) !important;
  border-color: var(--color-success-border) !important;
  color: var(--color-success) !important;
}

.admin-status-select--contacted {
  background-color: var(--color-primary-tint-20) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.admin-status-select--closed {
  background-color: var(--color-bg-alt) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

.admin-enquiry-status-picker__select select:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 1px;
}

.admin-enquiry-status-picker__chevron {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 160ms ease;
}

.admin-enquiry-status-picker__select select:focus + .admin-enquiry-status-picker__chevron {
  transform: translateY(-35%) rotate(225deg);
}

.admin-enquiry-card--action {
  border-top: 4px solid var(--color-primary);
}

.admin-enquiry-card--audit {
  border-top: 4px solid var(--color-accent-text);
}

.admin-enquiry-card--danger {
  border-top: 4px solid var(--color-error);
  height: 100%;
  box-sizing: border-box;
}

.admin-client-detail-page .admin-enquiry-card--danger {
  height: auto;
}

.admin-enquiry-card > p:not(.admin-subsection__hint) {
  color: var(--color-text-muted);
  line-height: 1.55;
}

.admin-enquiry-card--action .button,
.admin-enquiry-card--audit .button,
.admin-enquiry-card--danger .button {
  width: 100%;
  justify-content: center;
}

.admin-enquiry-notes-form {
  display: grid;
  gap: var(--space-5);
}

.admin-delete-dialog {
  width: min(90vw, 27rem);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-error);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 18px 48px rgba(18, 45, 65, 0.2);
}

.admin-delete-dialog::backdrop {
  background: rgba(19, 36, 59, 0.35);
}

.admin-delete-dialog h2 {
  margin-top: 0;
}

.admin-delete-dialog__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.admin-delete-dialog__actions form {
  margin: 0;
}

@media (max-width: 640px) {
  .admin-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .admin-detail-grid > div {
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 820px) {
  .admin-enquiry-layout {
    grid-template-columns: 1fr;
  }

  .admin-enquiry-sidebar {
    grid-template-rows: none;
  }

  .admin-enquiry-card--danger {
    height: auto;
  }

  .admin-enquiry-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }
}

.admin-subsection {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  max-width: 480px;
}

.admin-subsection form {
  display: grid;
  gap: var(--space-4);
}

/* Opts a subsection out of the 480px cap above — that width suits the
   narrow status-update/danger-zone forms it was written for (enquiry
   detail, news editor), but a subsection wrapping a data table (FAQ
   categories/questions) needs the full admin-main width instead. This
   was the actual ceiling behind every "why won't the table use the
   screen" report: nothing about the table or its container mattered
   while this 480px cap sat on their shared ancestor. */
.admin-subsection--wide {
  max-width: none;
  min-width: 0;
}

.admin-subsection--danger {
  border-top-color: var(--color-error);
}

.admin-subsection__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.button--danger {
  background: var(--color-error);
  color: var(--color-on-primary);
  border-color: var(--color-error);
}

.button--danger:hover {
  background: var(--color-error);
  opacity: 0.9;
}

/* =========================================================================
   Admin page header + section header
   One consistent heading treatment reused across every admin screen —
   the list page, the detail page, the editor. A page can add its own
   secondary line (loan type, status, a back-link) below the h1 without
   redefining spacing each time.
   ========================================================================= */
.admin-page-header {
  margin: var(--space-4) 0 var(--space-7);
}

.admin-page-header h1 {
  font-size: var(--text-2xl);
  margin: 0;
}

.admin-page-header__meta {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.admin-page-header__meta a {
  color: var(--color-text-muted);
}

/* A section's own heading + one action that opens/closes it — the "Add
   update" / "Add task" / "Add a question" button sits inline with the
   heading it belongs to, instead of below a paragraph of hint text. */
.admin-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.admin-section-header h2 {
  margin: 0;
}

/* Wraps a collapsible create/edit form revealed by an .admin-section-header
   button. Hidden by default in markup (progressive enhancement — see
   admin.js's data-toggle-target handling), so a page with JS blocked shows
   every form open rather than permanently hiding it. */
.admin-form-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.admin-form-panel .admin-form,
.admin-form-panel form {
  max-width: none;
  margin-bottom: 0;
}

.admin-form-panel h3 {
  font-size: var(--text-base);
  margin: 0 0 var(--space-3);
}

.admin-form-panel h3:not(:first-child) {
  margin-top: var(--space-6);
}

/* =========================================================================
   Application detail — two-column layout
   Main column (~2/3) is what the broker reads and acts on day to day;
   the sidebar (~1/3) is reference material — who this is, how to reach
   them, what's scheduled. Collapses to one column below 1024px.
   ========================================================================= */
.application-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.application-layout__main {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

.application-layout__sidebar {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  min-width: 0;
}

@media (max-width: 1024px) {
  .application-layout {
    grid-template-columns: 1fr;
  }
}

/* A bordered content block — the generic building block for both the
   main column's sections and the sidebar's cards, so both share one
   card style instead of each inventing its own border/padding. */
.admin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.admin-card h2 {
  font-size: var(--text-md);
  margin: 0 0 var(--space-4);
}

.admin-card dl {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.admin-card dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-card dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* The reference is read out loud on calls — larger, monospaced-feeling
   letterforms with generous letter-spacing and a tinted background so it
   stands out from every other line of sidebar text. */
.admin-reference-card__value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-family-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
  background: var(--color-primary-tint-10);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
}

.admin-card__actions {
  display: grid;
  gap: var(--space-3);
}

.admin-card__actions form {
  margin: 0;
}

.admin-card__actions .button {
  width: 100%;
}

/* Full-width stage tracker at the top of the application detail page —
   reuses the public .application-progress component (same done/current/
   upcoming semantics and classes) but stretches it across the full
   content width and gives the current stage a visibly larger marker and
   label, since this tracker is the reason the page exists. */
.admin-stage-tracker {
  margin: 0 0 var(--space-7);
}

.admin-stage-tracker .application-progress {
  margin: 0;
}

/* =========================================================================
   FAQ + News
   Uses the same tokens/components as the rest of the site. Public-facing
   rules (card media, accordion, prose, pagination, empty state) and admin
   editor rules (toolbar, upload widget, syntax reference) are grouped
   together here since both features shipped together.
   ========================================================================= */
.input--narrow {
  max-width: 6ch;
}

.status-badge--draft {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.status-badge--published {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-badge--active {
  background: var(--color-primary-tint-20);
  color: var(--color-primary-dark);
}

.status-badge--completed {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-badge--withdrawn {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.status-badge--pending {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.status-badge--submitted {
  background: var(--color-primary-tint-20);
  color: var(--color-primary-dark);
}

.status-badge--accepted {
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* News cards need room for an image + date on top of heading/body, so they
   get a 3-column max instead of .card-grid's 4-column breakpoint. */
.card-grid {
  display: grid;
  gap: var(--space-5);
}

.card-grid--news {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-tint-20);
}

.card--news {
  padding: 0;
  overflow: hidden;
}

.card__heading,
.card__body,
.card__meta {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}

.card__heading {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.card__body {
  margin-top: var(--space-2);
  margin-bottom: 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card__meta {
  display: block;
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.card__media--placeholder svg {
  width: 40px;
  height: 40px;
}

.news-empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.news-article__hero {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}

.news-article__date {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

/* Article body copy — capped at roughly 65 characters per line. */
.prose {
  max-width: 65ch;
  font-size: var(--text-base);
  line-height: var(--line-height-base);
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote {
  margin-bottom: var(--space-4);
}

.prose blockquote {
  border-left: 3px solid var(--color-primary-tint-20);
  padding-left: var(--space-4);
  color: var(--color-text-muted);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.pagination__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* FAQ accordion — reuses the mega-menu <details> marker-hiding/chevron
   technique from the header nav for visual consistency. */
.faq-category {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.faq-category h2 {
  margin-bottom: var(--space-4);
}

.faq-accordion {
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  list-style: none;
}

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

.faq-item__question::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.faq-item[open] > .faq-item__question::after {
  transform: rotate(-135deg);
}

.faq-item__answer {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

/* Smooth open/close, added by faq-accordion.js — a fixed generous
   max-height rather than a JS-measured exact value, since the site's CSP
   (style-src 'self', no unsafe-inline) blocks inline styles set via the
   style="" attribute AND via element.style.property assignment from JS,
   so the transition target has to live here in the stylesheet, not be
   computed at runtime. Without JS, .faq-item[open] shows the answer
   instantly via the browser's native <details> behaviour — this class is
   additive enhancement only. */
.faq-item__answer.faq-item__answer--animated {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-item__answer.faq-item__answer--animated.is-open {
  max-height: 60em;
}

/* News admin editor */
.news-editor__autosave-status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-height: 1.2em;
}

.news-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.news-editor__toolbar button {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  font-size: var(--text-sm);
}

.news-editor__toolbar button:hover {
  background: var(--color-bg-alt);
}

.news-editor__preview-toggle {
  margin-left: auto;
}

.news-editor__split {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.news-editor__pane textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
}

.news-editor__pane--preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  overflow-y: auto;
}

/* Mobile: single column, toggled between write/preview via a button
   (news-editor.js). Desktop: side-by-side split, toggle hidden. */
.news-editor__split[data-view="write"] .news-editor__pane--preview {
  display: none;
}

.news-editor__split[data-view="preview"] .news-editor__pane--write {
  display: none;
}

@media (min-width: 1024px) {
  .news-editor__preview-toggle {
    display: none;
  }

  .news-editor__split {
    grid-template-columns: 1fr 1fr;
  }

  .news-editor__split[data-view="write"] .news-editor__pane--preview,
  .news-editor__split[data-view="preview"] .news-editor__pane--write {
    display: block;
  }
}

.upload-dropzone {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.upload-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.upload-dropzone__preview {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  max-width: 320px;
}

.upload-dropzone__preview img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.syntax-reference {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.syntax-reference summary {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
}

.syntax-reference ul {
  margin-top: var(--space-2);
  padding-left: var(--space-5);
}

.syntax-reference code {
  background: var(--color-bg-alt);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
}

/* =========================================================================
   Loan balance chart
   Sits below the repayment calculator's result card, in the same right-
   hand column, always full width and always stacked — an earlier side-
   by-side arrangement made both cards too narrow (the total-interest
   figure clipped, "per month" wrapped mid-phrase). Hand-rolled inline
   SVG, sized purely by viewBox; nothing in this section is set via
   style="" or el.style.* (see loan-balance-chart.js's header comment for
   why that matters under this site's CSP), only plain attributes,
   classes and the `hidden` attribute.
   ========================================================================= */
.calc__result {
  display: grid;
  gap: var(--space-6);
}

.balance-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.balance-chart__title {
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}

.balance-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.balance-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.balance-chart__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.balance-chart__swatch--balance {
  background: var(--color-primary);
}

.balance-chart__swatch--remaining {
  /* Matches loan-balance-chart.js's COLOR_REMAINING (#c9821a) — keep the
     two in sync if either changes. */
  background: var(--color-accent);
}

.balance-chart__plot-wrap {
  position: relative;
}

.balance-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Visibility is driven by a class on this plain HTML wrapper, not by the
   `hidden` attribute on the <svg> itself — Chrome does not reliably
   reflect el.hidden = false back to a removed `hidden` content attribute
   on foreign (SVG-namespaced) elements, and this site's own [hidden] {
   display: none !important } reset rule then keeps a stale attribute
   hidden regardless of the live IDL property. Toggling a class on an
   ordinary <div> has no such ambiguity. */
.balance-chart__plot-wrap.is-empty .balance-chart__svg {
  display: none;
}

.balance-chart__plot-wrap:not(.is-empty) .balance-chart__empty-prompt {
  display: none;
}

.balance-chart__gridline,
.balance-chart__axis-line,
.balance-chart__axis-tick {
  stroke: var(--color-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.balance-chart__axis-label {
  fill: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.balance-chart__axis-label--y {
  text-anchor: end;
  dominant-baseline: middle;
}

.balance-chart__axis-label--x {
  text-anchor: middle;
}

.balance-chart__area {
  transition: d 0.3s ease;
}

.balance-chart__line {
  transition: d 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .balance-chart__area,
  .balance-chart__line {
    transition: none;
  }
}

.balance-chart__crosshair {
  stroke: var(--color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.balance-chart__tooltip {
  pointer-events: none;
}

/* A class toggle rather than the `hidden` attribute, for the same reason
   noted on .balance-chart__plot-wrap above — these are SVG-namespaced
   elements. */
.balance-chart__crosshair.is-hidden,
.balance-chart__tooltip.is-hidden {
  display: none;
}

.balance-chart__tooltip-bg {
  fill: var(--color-surface);
  stroke: var(--color-border);
  stroke-width: 1;
}

.balance-chart__tooltip-text {
  fill: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-size: 11px;
}

.balance-chart__tooltip-text--year {
  fill: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.balance-chart__interaction {
  cursor: crosshair;
  touch-action: none;
}

.balance-chart__empty-prompt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

/* =========================================================================
   Borrowing power breakdown chart
   A horizontal waterfall (net income, minus each deduction, equals
   available for repayments) — deliberately a different chart type from
   the loan balance chart above, since a borrowing power estimate has no
   amortisation schedule to plot. Same hand-rolled inline SVG approach and
   the same CSP-safe rules (plain attributes and class toggles, never
   style="" or el.style.*) — see loan-balance-chart.js's header comment.
   Sits below .calc__result-card as a sibling inside .calc__result, so it
   inherits that section's stacked, full-width treatment for free.
   ========================================================================= */
.breakdown-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.breakdown-chart__title {
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}

.breakdown-chart__plot-wrap {
  position: relative;
}

.breakdown-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Class toggle, not the `hidden` attribute — same SVG-namespaced-element
   caveat noted on .balance-chart__plot-wrap above. */
.breakdown-chart__plot-wrap.is-empty .breakdown-chart__svg {
  display: none;
}

.breakdown-chart__plot-wrap:not(.is-empty) .breakdown-chart__empty-prompt {
  display: none;
}

.breakdown-chart__empty-prompt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.breakdown-chart__label {
  font-family: var(--font-family-body);
  font-size: 12px;
  fill: var(--color-text);
}

.breakdown-chart__label-note {
  fill: var(--color-text-muted);
  font-size: 10px;
  font-style: italic;
}

.breakdown-chart__value {
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  fill: var(--color-text);
}

.breakdown-chart__bar {
  transition: x 0.3s ease, width 0.3s ease;
}

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

.breakdown-chart__negative-note:empty,
.breakdown-chart__caption:empty {
  display: none;
}

.breakdown-chart__negative-note {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.breakdown-chart__caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0;
}

/* =========================================================================
   Client application tracker (US10.1/US10.2) — progress indicator, update
   timeline, and the picker list for a client with more than one
   application. Same tokens as the rest of the public site; no admin-only
   classes reused here since this renders through the public layout.
   ========================================================================= */
/* Numbered steps joined by a line: stacked on phones, left to right from
   768px. Done steps show a tick, the current one is filled and labelled. */
.application-progress {
  display: grid;
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 var(--space-6);
}

.application-progress__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  min-width: 0;
}

.application-progress__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--step-size) / 2 - 1px);
  top: var(--step-size);
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.application-progress__step--done:not(:last-child)::before {
  background: var(--color-success);
}

.application-progress__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--step-size);
  height: var(--step-size);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.application-progress__step--done .application-progress__marker {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-on-primary);
}

.application-progress__step--done .application-progress__marker::before {
  content: "\2713";
}

.application-progress__step--current .application-progress__marker {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 0 0 var(--space-1) var(--color-primary-tint-20);
}

.application-progress__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding-top: var(--space-1);
}

.application-progress__label {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.application-progress__step--done .application-progress__label,
.application-progress__step--current .application-progress__label {
  color: var(--color-text);
}

.application-progress__step--current .application-progress__label {
  font-weight: var(--font-weight-bold);
}

.application-progress__state {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.application-progress__step--current .application-progress__state {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.application-progress__summary {
  margin: var(--space-4) 0 0;
  font-size: var(--text-md);
}

@media (min-width: 768px) {
  .application-progress {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .application-progress__step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0;
  }

  .application-progress__step:not(:last-child)::before {
    left: calc(50% + var(--step-size) / 2);
    right: calc(-50% + var(--step-size) / 2);
    top: calc(var(--step-size) / 2 - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .application-progress__text {
    align-items: center;
    padding: 0 var(--space-2);
  }
}

.application-timeline {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-4);
}

.application-timeline__item {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.application-timeline__date {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.application-timeline__stage {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

.application-timeline__note {
  margin: 0;
  color: var(--color-text);
}

/* The public /application progress page — one bordered section per stage,
   in order, reusing .application-timeline__date/__note for the "date
   reached" / note lines within each. */
.application-stage-section {
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.application-stage-section h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
}

.application-tasks {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  display: grid;
  gap: var(--space-3);
}

.application-tasks__item {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.application-tasks__title {
  font-weight: var(--font-weight-medium);
  margin-right: var(--space-2);
}

.application-tasks__description {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.application-tasks__due {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.application-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-3);
}

.application-list__item a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
}

.application-list__reference {
  font-weight: 600;
  color: var(--color-text);
}

.application-list__loan-type {
  color: var(--color-text-muted);
}

/* =========================================================================
   Appointment booking (US9.1/US9.2/US9.3) — the four-week calendar, the
   selected-slot booking form, and the upcoming/past appointment list.
   ========================================================================= */
.appointment-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.appointment-calendar__day {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.appointment-calendar__date {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.appointment-calendar__unavailable {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.appointment-calendar__slots {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.appointment-calendar__slot {
  display: block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  text-align: center;
  text-decoration: none;
  color: var(--color-primary-dark);
}

.appointment-calendar__slot:hover {
  background: var(--color-primary-tint-10);
}

.appointment-calendar__slot--selected {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.appointment-booking-form {
  padding: var(--space-5);
  margin: var(--space-5) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-primary-tint-10);
}

/* =========================================================================
   /book-a-call — editorial-left / booking-card-right layout. Left column
   is deliberately sparse (eyebrow, serif headline, one line of body copy)
   so the white card is the only thing competing for attention. The card
   itself never changes shape between steps — step two swaps the calendar
   band for the details form and repurposes the heading band to show the
   chosen time, so the "same card, different content" feel is continuous
   rather than a page jump.
   ========================================================================= */
.booking-hero {
  background: var(--color-bg-alt);
}

.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 1024px) {
  .booking-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.booking-layout__intro {
  padding-top: var(--space-4);
}

.booking-layout__eyebrow {
  display: block;
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.booking-layout__headline {
  max-width: 9em;
  margin: 0 0 var(--space-5);
  font-family: var(--font-family-serif);
  font-size: var(--text-3xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.booking-layout__lede {
  max-width: 34ch;
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.booking-card {
  min-width: 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6);
}

.booking-card__band {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.booking-card__band:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.booking-card__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.booking-card__brand img {
  height: 28px;
  width: auto;
}

.booking-card__heading-band {
  text-align: center;
}

.booking-card__back {
  display: block;
  width: 100%;
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: left;
}

.booking-card__heading-band h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-text);
  text-align: center;
}

.booking-card__meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.booking-card__meta li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.booking-card__meta svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.booking-card__label {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.booking-card__note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.booking-calendar-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

@media (max-width: 560px) {
  .booking-calendar-row {
    flex-direction: column;
  }
}

.booking-calendar {
  flex: 1 1 280px;
  min-width: 0;
}

.booking-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

.booking-calendar__month {
  min-width: 11em;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: center;
}

.booking-calendar__nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--color-text-muted);
}

.booking-calendar__nav-link svg {
  width: 16px;
  height: 16px;
}

.booking-calendar__nav-link--prev svg {
  transform: rotate(90deg);
}

.booking-calendar__nav-link--next svg {
  transform: rotate(-90deg);
}

.booking-calendar__nav-link:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.booking-calendar__nav-link--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.booking-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2) 0;
}

.booking-calendar__dow {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-align: center;
  padding-bottom: var(--space-2);
}

/* No grid lines or cell borders anywhere here — spacing (the grid gap
   above) is what separates one date from the next. A circular tint marks
   a bookable day; an unavailable day is plain, muted text; a small dot
   (currentColor, so it matches whichever state it sits on) marks today. */
.booking-calendar__cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  width: 2.25em;
  border-radius: 50%;
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-text-muted);
}

.booking-calendar__cell--unavailable {
  cursor: default;
}

.booking-calendar__cell--available {
  background: var(--color-primary-tint-10);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.booking-calendar__cell--available:hover {
  background: var(--color-primary-tint-20);
}

.booking-calendar__cell--selected {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.booking-calendar__cell--today::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.booking-slots {
  flex: 1 1 170px;
  min-width: 150px;
}

.booking-slots__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.booking-slots__empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.booking-slots__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  max-height: 22em;
  overflow-y: auto;
}

.booking-slots__slot {
  display: block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  text-align: center;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-dark);
}

.booking-slots__slot:hover {
  background: var(--color-primary-tint-10);
}

.booking-details-form h2 {
  font-size: var(--text-lg);
  margin: 0;
  color: var(--color-text);
}

.phone-input {
  display: flex;
  gap: var(--space-2);
}

.phone-input__prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.phone-input input {
  flex: 1;
  min-width: 0;
}

/* Same rationale as .enquiry-form__honeypot — display:none (not visual
   hiding) so bots and autofill engines that respect it never see the
   field, without relying on it being announced (or not) to screen readers,
   which the wrapper's aria-hidden already handles either way. */
.booking-form__honeypot {
  display: none !important;
}

/* Availability page — week grid, leave-day calendar, two-week preview.
   Everything here is sized in relative/flexible units so it stays inside
   .admin-main's existing centred column at every width; nothing on this
   page should ever force a horizontal scrollbar. */

.availability-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

.availability-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.availability-summary__value {
  font-family: var(--font-family-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.availability-summary__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-alert--zero-availability {
  font-size: var(--text-base);
  border-width: 2px;
}

.availability-grid-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Flex items default to a content-based min-width, not 0 — without this,
   the long "This is also what /book-a-call offers..." hint paragraph
   could stop this item from shrinking below its own preferred width and
   push the row wider than the viewport at phone width. */
.field--inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 220px;
}

/* Desktop 7-day grid: hidden below 768px in favour of the accordion.
   overflow-x is set unconditionally (not just at the 768px breakpoint
   below) so this container always owns its own scrollbar if its content
   is ever wider than available space, rather than the page itself
   growing wider than the viewport. */
.availability-grid-wrap--desktop {
  display: none;
  overflow-x: auto;
  max-width: 100%;
}

.availability-grid-fallback {
  display: none;
}

.availability-grid {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
}

.availability-grid th,
.availability-grid td {
  padding: 1px;
  text-align: center;
}

.availability-grid thead th {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  padding-bottom: var(--space-2);
}

.availability-grid tbody th {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
  text-align: right;
  padding-right: var(--space-2);
  white-space: nowrap;
}

.availability-cell {
  display: block;
  width: 100%;
  min-height: 22px;
  border: 1px solid var(--color-bg);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  -webkit-user-select: none;
  user-select: none;
}

.availability-cell--closed {
  background: var(--color-bg-alt);
}

.availability-cell--open {
  background: var(--color-primary);
}

.availability-cell:hover {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* Mobile day-by-day accordion: shown by default (mobile-first), hidden
   from 768px up where the desktop grid takes over. */
.availability-grid-accordion--mobile {
  margin-bottom: var(--space-5);
}

.availability-accordion__day {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.availability-accordion__day > summary {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
}

.availability-accordion__times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.availability-accordion__times .availability-cell {
  min-height: 36px;
  font-size: var(--text-xs);
  color: var(--color-text);
}

.availability-accordion__times .availability-cell--open {
  color: var(--color-on-primary);
}

@media (min-width: 768px) {
  .availability-grid-wrap--desktop {
    display: block;
  }

  .availability-grid-accordion--mobile {
    display: none;
  }
}

/* Leave-day calendar */
.exceptions-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
  min-width: 0;
}

.exceptions-calendar,
.exceptions-list {
  min-width: 0;
}

@media (min-width: 768px) {
  .exceptions-layout {
    grid-template-columns: minmax(0, 380px) 1fr;
  }
}

.exceptions-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.exceptions-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.exceptions-calendar__dow {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  padding-bottom: var(--space-1);
}

.exceptions-calendar__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
}

.exceptions-calendar__cell--empty {
  border: none;
  background: transparent;
  cursor: default;
}

.exceptions-calendar__cell--blocked {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

.exceptions-calendar__cell--partial {
  background: var(--color-primary-tint-10);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.exceptions-calendar__cell--past {
  opacity: 0.4;
  cursor: not-allowed;
}

.exceptions-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.exceptions-list__items li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.exceptions-list__date {
  font-weight: var(--font-weight-medium);
}

.exceptions-list__scope,
.exceptions-list__reason {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  min-width: 0;
}

.exceptions-list__items li form {
  margin-left: auto;
}

.exceptions-list__pending {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.exception-form {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  max-width: 420px;
  display: grid;
  gap: var(--space-4);
}

.exception-form__times {
  display: flex;
  gap: var(--space-4);
}

.button--small {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

/* Read-only two-week preview — the visual anchor of the page, given more
   room than the two editors above it. */
.availability-preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
  min-height: 400px;
  min-width: 0;
}

.availability-preview__day {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
}

.availability-preview__date {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
}

.availability-preview__unavailable {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.availability-preview__slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}

.availability-preview__slot {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.availability-preview__slot--open {
  background: var(--color-primary-tint-10);
  color: var(--color-primary-dark);
}

.availability-preview__slot--booked {
  background: var(--color-success-bg);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.availability-preview__slot--blocked {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Admin area in the client's navy and gold direction. Scoped to
   body.admin so the public site keeps its current look until it moves
   over too. Components read the same token names, so most of the change
   is these values. */
.admin {
  --color-primary: #13243b;
  --color-primary-dark: #0c1829;
  --color-primary-tint-10: #eef0f4;
  --color-primary-tint-20: #e3e9f2;

  --color-bg: #fbf9f5;
  --color-bg-alt: #f4f0e8;
  --color-surface: #ffffff;
  --color-on-primary: #fbf9f5;

  --color-text: #2a3340;
  --color-text-muted: #6a6358;
  --color-border: #e6e0d6;

  --color-focus: #13243b;
  --color-accent: #a9894f;
  /* Gold that passes AA as text on white, --color-bg and --color-bg-alt. */
  --color-accent-text: #85693a;
  --color-accent-on-dark: #c8a96a;
  --color-accent-tint: #f3ead8;
  --color-accent-tint-text: #6b5424;

  --font-family-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-weight-display: 500;
  --letter-spacing-tight: -0.01em;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --shadow-sm: none;
  --shadow-md: none;

  --accent-rule-width: 2.5rem;
  --accent-rule-thickness: 2px;

  --field-sm: 8rem;
  --field-md: 20rem;
  --field-lg: 32rem;
  --color-success-border: #b9dcc5;
  --rule-strong: 3px;
  --grid-row-height: 1.25rem;
  --handle-dot-size: 1.5px;
  --opacity-quiet: 0.7;
  --opacity-disabled: 0.35;
}

.admin h1,
.admin h2,
.admin h3,
.admin h4 {
  font-weight: var(--font-weight-display);
}

.admin input:focus-visible,
.admin select:focus-visible,
.admin textarea:focus-visible {
  box-shadow: 0 0 0 var(--rule-strong) var(--color-primary-tint-20);
}

/* A light header with a navy rule rather than a solid navy bar: the bar
   was the largest dark area on every screen and tiring over a long day. */
.admin .admin-header {
  background: var(--color-surface);
  color: var(--color-primary);
  border-bottom: var(--rule-strong) solid var(--color-primary);
}

.admin .admin-header__brand,
.admin .admin-header__brand:hover,
.admin .admin-header__brand:focus-visible,
.admin .admin-header__brand:visited {
  font-family: var(--font-family-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-display);
  color: var(--color-primary);
}

.admin .admin-header__brand-tag {
  font-family: var(--font-family-body);
  color: var(--color-text-muted);
  opacity: 1;
}

.admin .admin-nav a,
.admin .admin-nav a:hover,
.admin .admin-nav a:focus-visible,
.admin .admin-nav a:visited {
  color: var(--color-text);
}

.admin .admin-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  border-bottom: var(--accent-rule-thickness) solid transparent;
}

.admin .admin-nav a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-border);
}

.admin .admin-nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  border-bottom-color: var(--color-accent-text);
}

.admin .admin-header__logout-button {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.admin .admin-header__logout-button:hover {
  background: var(--color-primary-tint-10);
}

@media (max-width: 767px) {
  .admin .admin-nav--desktop,
  .admin .admin-header__logout {
    display: none;
  }

  .admin .nav-toggle__label {
    display: none;
  }

  .admin .nav-toggle {
    position: relative;
  }

  .admin .admin-nav--mobile {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    width: 220px;
    padding: var(--space-2) 0;

    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: 0 var(--space-2) var(--space-5) rgba(0, 0, 0, 0.12);
  }

  .admin .admin-nav--mobile a {
    display: flex;
    align-items: center;
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-4);
    border-bottom: 0;
  }

  .admin .admin-nav__mobile-footer {
    margin-top: 0;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .admin .admin-nav__mobile-logout {
    margin: 0;
  }

  .admin .admin-nav__mobile-logout button {
    width: 100%;
  }
}

.admin-page-header h1::after,
.admin-wordmark__link::after {
  content: "";
  display: block;
  width: var(--accent-rule-width);
  height: var(--accent-rule-thickness);
  margin-top: var(--space-3);
  background: var(--color-accent);
}

.admin-stats__value {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-display);
  font-variant-numeric: tabular-nums;
}

/* Signed-out pages (login, reset, accept invite) get the name as a quiet
   wordmark instead of the header bar, which has nothing to offer them. */
.admin-wordmark {
  padding: var(--space-8) var(--space-5) 0;
  text-align: center;
}

.admin-wordmark__link {
  display: inline-block;
  font-family: var(--font-family-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-display);
  color: var(--color-primary);
  text-decoration: none;
}

.admin-wordmark__link::after {
  margin-inline: auto;
}

.admin-wordmark__link:hover,
.admin-wordmark__link:visited {
  color: var(--color-primary);
}

.admin .admin-panel--narrow {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
}

.admin .admin-panel__heading {
  margin-top: 0;
  margin-bottom: var(--space-6);
}

/* Statuses sort into five looks so the ones that share a list never look
   alike: solid navy needs action, navy tint is in progress, gold tint is
   waiting on someone, green is done, an outline is switched off. */
.admin .status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 6.5rem;
  min-height: 1.75rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: 999px;
}

.admin .status-badge--new {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.admin .status-badge--active,
.admin .status-badge--submitted {
  background: var(--color-primary-tint-20);
  color: var(--color-primary);
}

.admin .status-badge--pending {
  background: var(--color-accent-tint);
  color: var(--color-accent-tint-text);
}

.admin .status-badge--contacted {
  background: #fff4c7;
  border-color: #e5c65a;
  color: #725b10;
}

.admin .status-badge--published,
.admin .status-badge--completed,
.admin .status-badge--accepted {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.admin .status-badge--closed,
.admin .status-badge--draft,
.admin .status-badge--withdrawn {
  background: #e7ebef;
  border-color: #c7d0d9;
  color: #4b5966;
}

.admin .status-badge--owner {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.admin .admin-login-form + p {
  margin-top: var(--space-5);
}

.admin .admin-panel--narrow {
  max-width: var(--field-lg);
}

.admin .admin-panel--narrow > p,
.admin .admin-panel--narrow .admin-login-form {
  max-width: var(--field-md);
  margin-inline: auto;
}

.admin .admin-login-form .field + .field {
  margin-top: 0;
}

/* Three input widths instead of every control stretching to its container:
   short values (times, amounts), everyday fields (names, choices), and
   long ones (emails, questions). Inside tables the column decides. */
.admin input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.admin select {
  min-height: var(--tap-target);
}

.admin .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  width: 100%;
  max-width: var(--field-lg);
}

.admin .field select,
.admin .field input[type="tel"],
.admin .field input[type="date"],
.admin .field input[type="search"] {
  width: 100%;
  max-width: var(--field-md);
}

.admin .field input[type="number"],
.admin .field input[type="time"] {
  max-width: var(--field-sm);
}

.admin .field textarea {
  width: 100%;
  max-width: var(--measure);
}

/* One solid button per page carries the main action. Everything that
   destroys something is an outline until the confirm step. */
.admin .button--danger {
  background: transparent;
  color: var(--color-error);
  border-color: var(--color-error);
}

.admin .button--danger:hover {
  background: var(--color-error-bg);
  opacity: 1;
}

.admin .admin-form-panel .button--danger {
  background: var(--color-error);
  color: var(--color-surface);
}

.admin .admin-table .button {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

/* Read aloud over the phone, so it stays on one line in a plain face. */
.admin .admin-reference-card__value {
  flex-wrap: wrap;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  background: var(--color-bg-alt);
}

.admin .admin-reference-card__value > :first-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The week grid: open slots are a soft navy tint with a navy edge, and a
   run of open slots reads as one block (admin-availability.js marks the
   first and last slot of each run). */
.admin .availability-grid tbody th,
.admin .availability-grid tbody td {
  height: var(--grid-row-height);
  padding-block: 0;
  line-height: var(--grid-row-height);
}

.admin .availability-grid .availability-cell {
  height: var(--grid-row-height);
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.admin .availability-grid .availability-cell--closed {
  background: var(--color-surface);
  box-shadow: inset 0 -1px 0 var(--color-bg-alt);
}

.admin .availability-grid .availability-cell--open {
  background: var(--color-primary-tint-20);
  box-shadow: inset var(--rule-strong) 0 0 var(--color-primary);
}

.admin .availability-grid .availability-cell--run-start {
  border-top-right-radius: var(--radius-md);
}

.admin .availability-grid .availability-cell--run-end {
  border-bottom-right-radius: var(--radius-md);
}

/* Phones get one list of time buttons per day instead of the grid. */
.admin .availability-accordion__times .availability-cell--open {
  background: var(--color-primary-tint-20);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.admin .availability-grid-controls .field--inline {
  flex: 0 1 var(--field-md);
}

.admin .availability-grid-controls .field__hint {
  max-width: var(--measure);
}

.admin .availability-preview__grid {
  min-height: 0;
}

.admin .admin-subsection form > .button {
  justify-self: start;
}

.admin .availability-accordion__times .availability-cell {
  min-height: var(--tap-target);
}

.admin .admin-header__logout-button {
  min-height: var(--tap-target);
}

/* Phones: brand and Log out share the first row and the nav is one row
   that scrolls sideways, instead of four wrapped rows taking a third of
   the screen. admin.js scrolls the current page's link into view. */
@media (max-width: 767px) {
  .admin .admin-header__inner {
    row-gap: 0;
  }

  .admin .admin-header__logout {
    order: 2;
  }

  .admin .admin-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .admin .admin-nav::-webkit-scrollbar {
    display: none;
  }

  .admin .admin-table .button {
    min-height: var(--tap-target);
  }

  .admin .admin-filters .field select,
  .admin .admin-filters .field input {
    width: 100%;
    max-width: var(--field-md);
  }
}

.admin .field textarea {
  max-width: var(--field-lg);
}

.admin .availability-grid thead th:first-child,
.admin .availability-grid tbody th {
  width: 4rem;
}

.admin .availability-accordion__day summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  cursor: pointer;
}

/* Ordered lists you rearrange by dragging (FAQ categories and questions,
   application stages). See admin-sortable.js. */
.sortable-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.sortable-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.sortable-row:last-child {
  border-bottom: 0;
}

.sortable-row--muted .sortable-row__title {
  color: var(--color-text-muted);
}

.sortable-row--dragging {
  background: var(--color-primary-tint-10);
  outline: 1px dashed var(--color-primary);
}

.sortable-row__handle {
  width: var(--space-4);
  height: var(--space-5);
  cursor: grab;
  background-image: radial-gradient(circle, var(--color-text-muted) var(--handle-dot-size), transparent calc(var(--handle-dot-size) + 0.1px));
  background-size: var(--space-2) var(--space-2);
  opacity: var(--opacity-quiet);
}

.sortable-row__handle:hover {
  opacity: 1;
}

.sortable-row__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}

.sortable-row__title {
  overflow-wrap: anywhere;
}

.sortable-row__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sortable-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.sortable-row__actions form {
  display: contents;
}

.sortable-row__move {
  min-width: var(--tap-target);
}

.sortable-row__move:disabled {
  opacity: var(--opacity-disabled);
  cursor: default;
}

.sortable-row__edit {
  grid-column: 1 / -1;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.sortable-row__edit .admin-form {
  max-width: none;
  margin-bottom: var(--space-3);
}

.sortable-group {
  margin-bottom: var(--space-6);
}

.sortable-group__heading {
  font-size: var(--text-md);
  margin-bottom: var(--space-3);
}

.sortable-status {
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-success);
}

.sortable-status--error {
  color: var(--color-error);
}

@media (max-width: 767px) {
  .sortable-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Dragging doesn't work with touch; the arrow buttons do the job. */
  .sortable-row__handle {
    display: none;
  }

  .sortable-row__actions {
    justify-content: flex-start;
  }

  .sortable-row__actions .button {
    min-height: var(--tap-target);
  }
}

.sortable-status:empty {
  display: none;
}

/* Row actions are quiet until pointed at, so the titles carry the list.
   Delete keeps its red outline so it's the one that stands out. */
.sortable-row__actions .button--secondary {
  min-height: var(--tap-target);
  border-width: 1px;
  border-color: var(--color-border);
  color: var(--color-text);
  background: var(--color-surface);
}

.sortable-row__actions .button--secondary:hover:not(:disabled),
.sortable-row__actions .button--secondary:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sortable-row__actions .button--danger {
  min-height: var(--tap-target);
  border-width: 1px;
}

.sortable-list--busy {
  opacity: var(--opacity-quiet);
}

/* Touch screens can't drag, whatever the width. */
@media (pointer: coarse) {
  .sortable-row__handle {
    display: none;
  }
}

/* Tablets get the same compact header as phones: brand and Log out on
   one row, the nav as a single sideways-scrolling row under it. */
@media (min-width: 768px) and (max-width: 1199px) {
  .admin .admin-header__inner {
    row-gap: 0;
  }

  .admin .admin-header__logout {
    order: 2;
  }

  .admin .admin-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
}

@media (max-width: 1199px) {
  .admin .admin-nav {
    padding-inline-end: var(--space-5);
    scroll-padding-inline: var(--space-5);
  }
}

@media (max-width: 767px) {
  .admin .admin-filters .field {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Application detail: status, loan type and the reference sit under the
   client's name, so the sidebar only holds contact details and actions. */
.application-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.application-header__reference {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
}

.application-stage-form,
.application-note-form {
  display: grid;
  gap: var(--space-4);
  max-width: var(--field-lg);
}

.application-note-form {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.application-tasks__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.application-tasks__item > p {
  grid-column: 1 / -1;
  margin: 0;
}

.application-tasks__item form {
  margin: 0;
}

.application-more > summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: calc(-1 * var(--space-2));
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.application-more > summary::-webkit-details-marker {
  display: none;
}

.application-more > summary:hover {
  background: var(--color-primary-tint-10);
  border-color: var(--color-primary-tint-20);
}

/* A chevron so the row reads as something that opens. */
.application-more > summary::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.application-more[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.application-more__title {
  display: block;
  font-weight: var(--font-weight-medium);
}

.application-more__hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.application-more[open] > summary {
  margin-bottom: var(--space-4);
}

/* Two short fields side by side on wider screens; .admin-form__full spans
   both columns. One column on phones. */
.admin .admin-form--two-col {
  max-width: calc(var(--field-md) * 2 + var(--space-5));
}

@media (min-width: 768px) {
  .admin .admin-form--two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .admin .admin-form--two-col .admin-form__full {
    grid-column: 1 / -1;
  }

  /* The grid gap does the spacing; the usual stacked-field margin would
     push every second field in a row out of line. */
  .admin .admin-form--two-col > .field + .field {
    margin-top: 0;
  }
}

.field__label-text {
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
}

/* "Coming up / Past" on the appointments page. */
.admin-tabs {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.admin-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: var(--accent-rule-thickness) solid transparent;
  margin-bottom: -1px;
}

.admin-tabs a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  border-bottom-color: var(--color-primary);
}

.application-tasks__edit {
  grid-column: 1 / -1;
  padding-top: var(--space-3);
}

/* Client progress page: what is happening now, then what we need. */
.application-now,
.application-needed,
.application-history {
  margin-top: var(--space-6);
}

.application-now {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.application-now h2,
.application-needed h2,
.application-history h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.application-now p:last-child {
  margin-bottom: 0;
}

.application-now__note {
  margin-top: var(--space-3);
  color: var(--color-text);
}

/* =========================================================================
   Loan pages
   ========================================================================= */
.button--gold {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy-950);
  border-radius: var(--radius-sm);
}

.button--gold:hover {
  background: var(--color-on-navy);
  border-color: var(--color-on-navy);
}

.button--on-dark {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-on-navy) 45%, transparent);
  color: var(--color-on-navy);
  border-radius: var(--radius-sm);
}

.button--on-dark:hover {
  background: color-mix(in srgb, var(--color-on-navy) 10%, transparent);
  border-color: var(--color-on-navy);
}

.button--gold:focus-visible,
.button--on-dark:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.loan-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  color: var(--color-gold);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.loan-eyebrow::before {
  content: '';
  width: var(--space-6);
  height: 1px;
  background: currentColor;
}

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

.loan-heading {
  font-family: var(--font-family-editorial);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  color: var(--color-navy-900);
  max-width: 22ch;
  margin-bottom: var(--space-5);
}

.loan-heading--on-dark {
  color: var(--color-on-navy);
}

.loan-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(34rem, 80vh, 46rem);
  background: var(--color-navy-950);
  color: var(--color-on-navy);
}

.loan-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loan-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-navy-950) 92%, transparent) 0%,
      color-mix(in srgb, var(--color-navy-950) 70%, transparent) 45%,
      color-mix(in srgb, var(--color-navy-950) 25%, transparent) 100%),
    linear-gradient(0deg, var(--color-navy-950) 0%, transparent 35%);
}

.loan-hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-9) var(--space-5) var(--space-10);
}

.loan-hero__heading {
  font-family: var(--font-family-editorial);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--text-2xl), 6vw, var(--text-display));
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-on-navy);
  max-width: 14ch;
  margin-bottom: var(--space-5);
}

.loan-hero__lede {
  font-size: var(--text-md);
  color: var(--color-on-navy-muted);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

.loan-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The three promises sit over the bottom edge of the hero photo. */
.loan-values {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--space-9));
  padding-inline: var(--space-5);
}

.loan-values__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--container-max);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--color-surface);
  border-top: 2px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
}

.loan-values__item {
  padding: var(--space-6);
  min-width: 0;
}

.loan-values__item + .loan-values__item {
  border-top: 1px solid var(--color-border);
}

.loan-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  color: var(--color-gold-strong);
}

.loan-values__title {
  font-family: var(--font-family-editorial);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-md);
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
}

.loan-values__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

@media (min-width: 768px) {
  .loan-values__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .loan-values__item + .loan-values__item {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }
}

.loan-intro {
  padding-block: var(--space-9);
}

.loan-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.loan-intro__lede {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 58ch;
  margin-bottom: var(--space-5);
}

.loan-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.loan-ticks li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-text);
}

.loan-ticks li::before {
  content: '';
  position: absolute;
  left: var(--space-1);
  top: 0.45em;
  width: var(--space-3);
  height: var(--space-2);
  border-left: 2px solid var(--color-gold-strong);
  border-bottom: 2px solid var(--color-gold-strong);
  transform: rotate(-45deg);
}

.loan-intro__figure {
  position: relative;
  margin: 0 var(--space-5) var(--space-5) 0;
  /* Soft shadow of the same offset block as before: the photo's shape
     shifted down and right by --space-5, blurred. */
  box-shadow: var(--space-5) var(--space-5) var(--space-5) 0 rgba(16, 42, 76, 0.4);
}

.loan-intro__image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 34rem;
}

@media (min-width: 960px) {
  .loan-intro__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-9);
  }
}

.loan-situations {
  padding-block: var(--space-9);
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--color-gold) 14%, transparent), transparent 45%),
    var(--color-navy-900);
  color: var(--color-on-navy);
}

.loan-situations__grid {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.loan-situations__card {
  min-width: 0;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--color-navy-800) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-gold) 25%, transparent);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.loan-situations__card:hover {
  border-color: var(--color-gold);
  transform: translateY(calc(-1 * var(--space-1)));
}

.loan-situations__number {
  display: block;
  margin-bottom: var(--space-5);
  font-family: var(--font-family-editorial);
  font-size: var(--text-xl);
  color: var(--color-gold);
  line-height: 1;
}

.loan-situations__title {
  font-family: var(--font-family-editorial);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-lg);
  color: var(--color-on-navy);
  margin-bottom: var(--space-2);
}

.loan-situations__text {
  font-size: var(--text-sm);
  color: var(--color-on-navy-muted);
  margin: 0;
}

.loan-situations__note {
  margin: var(--space-6) 0 0;
  font-size: var(--text-xs);
  color: var(--color-on-navy-muted);
}

.loan-situations__note a {
  color: var(--color-gold);
}

@media (min-width: 640px) {
  .loan-situations__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .loan-situations__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.loan-steps {
  padding-block: var(--space-9);
}

.loan-steps__list {
  position: relative;
  z-index: 0;
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.loan-steps__item {
  position: relative;
  min-width: 0;
}

.loan-steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  background: var(--color-bg);
  font-family: var(--font-family-editorial);
  font-size: var(--text-lg);
  color: var(--color-gold-text);
}

.loan-steps__title {
  font-family: var(--font-family-editorial);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-lg);
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
}

.loan-steps__text {
  color: var(--color-text-muted);
  max-width: 32ch;
  margin: 0;
}

@media (min-width: 768px) {
  .loan-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Thin gold rule joining the step numbers */
  .loan-steps__item:not(:last-child)::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(var(--space-8) / 2);
    left: var(--space-8);
    right: calc(-1 * var(--space-6));
    height: 1px;
    background: color-mix(in srgb, var(--color-gold) 60%, transparent);
  }
}

.loan-cta {
  padding: var(--space-9) var(--space-5);
  background:
    radial-gradient(circle at 15% 100%, color-mix(in srgb, var(--color-gold) 16%, transparent), transparent 40%),
    var(--color-navy-950);
  color: var(--color-on-navy);
  text-align: center;
}

.loan-cta__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.loan-cta .loan-eyebrow {
  justify-content: center;
}

.loan-cta__heading {
  font-family: var(--font-family-editorial);
  font-weight: var(--font-weight-regular);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  line-height: var(--line-height-tight);
  color: var(--color-on-navy);
  margin-bottom: var(--space-4);
}

.loan-cta__text {
  color: var(--color-on-navy-muted);
  margin-bottom: var(--space-6);
}

.loan-cta__actions {
  justify-content: center;
}

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

  .loan-situations__card:hover {
    transform: none;
  }
}

/* The shared calculator partial reads the primary tokens; navy here. */
.loan-calculator {
  --color-primary: var(--color-navy-800);
  --color-primary-dark: var(--color-navy-900);
}

/* Sits flush on the footer instead of leaving its top margin showing. */
.loan-cta {
  margin-bottom: calc(-1 * var(--space-8));
  border-bottom: 1px solid color-mix(in srgb, var(--color-gold) 35%, transparent);
}

/* =========================================================================
   Navy and gold look for the calculators, FAQ, news, about and contact
   pages. Mostly token overrides, so shared components follow along.
   ========================================================================= */
.lux {
  --font-family-display: var(--font-family-editorial);
  --letter-spacing-tight: -0.01em;
  --color-text: var(--color-navy-900);
  --color-primary: var(--color-navy-800);
  --color-primary-dark: var(--color-navy-900);
  --color-primary-tint-10: var(--color-navy-tint-10);
  --color-primary-tint-20: var(--color-navy-tint-20);
  --color-accent: var(--color-gold-strong);
  --color-focus: var(--color-navy-800);
  --radius-md: var(--radius-sm);
  --radius-lg: var(--radius-sm);
}

.lux :where(h1, h2, h3, h4) {
  font-weight: var(--font-weight-regular);
}

.lux .button {
  border-radius: var(--radius-sm);
}

.lux .check-list li::before {
  color: var(--color-gold-strong);
}

.lux .section__heading {
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
}

/* Closing call to action card (about) */
.lux .closing-cta__inner {
  max-width: 44rem;
  padding: var(--space-8) var(--space-6);
  background:
    radial-gradient(circle at 15% 100%, color-mix(in srgb, var(--color-gold) 16%, transparent), transparent 45%),
    var(--color-navy-950);
  border-top: 2px solid var(--color-gold);
}

.lux .closing-cta__heading {
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
  color: var(--color-on-navy);
}

.lux .closing-cta__body {
  color: var(--color-on-navy-muted);
}

.lux .closing-cta .button--primary,
.lux .closing-cta .button--primary:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy-950);
  border-radius: var(--radius-sm);
  box-shadow: none;
  opacity: 1;
}

.lux .closing-cta .button--primary:hover {
  background: var(--color-on-navy);
  border-color: var(--color-on-navy);
}

/* Contact */
.lux .contact-form-card {
  border-top: 2px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
}

/* FAQ */
.lux .faq-category h2 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xl);
}

.lux .faq-category h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--color-gold) 45%, transparent);
}

.lux .faq-item {
  background: var(--color-surface);
  border-color: var(--color-border);
  border-left: 2px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lux .faq-item:hover {
  box-shadow: var(--shadow-sm);
}

.lux .faq-item[open] {
  border-left-color: var(--color-gold);
  box-shadow: var(--shadow-md);
}

.lux .faq-item__question {
  font-family: var(--font-family-editorial);
  font-size: var(--text-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-navy-900);
}

.lux .faq-item__question::after {
  color: var(--color-gold-strong);
}

/* News */
.lux .card {
  border-color: var(--color-border);
  box-shadow: none;
}

.lux .card:hover,
.lux .card:focus-visible {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-lg);
}

.lux .card__heading {
  font-size: var(--text-lg);
  line-height: var(--line-height-tight);
}

.lux .card__meta {
  color: var(--color-gold-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lux .news-article__date {
  color: var(--color-gold-text);
}

/* Calculators */
.lux .calc__heading {
  font-size: var(--text-xl);
}

.lux .calc__result-card {
  box-shadow: var(--shadow-lg);
}

.lux .calc__group-heading {
  font-family: var(--font-family-body);
  color: var(--color-gold-text);
  letter-spacing: 0.14em;
}

/* =========================================================================
   About
   ========================================================================= */
.about-intro {
  padding-block: var(--space-9) var(--space-8);
}

.about-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.about-intro__image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 960px) {
  .about-intro__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-9);
  }
}

.about-facts {
  padding-inline: var(--space-5);
}

.about-facts__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--container-max);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-gold);
  box-shadow: var(--shadow-md);
}

.about-facts__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  min-width: 0;
  padding: var(--space-5) var(--space-6);
}

.about-facts__item + .about-facts__item {
  border-top: 1px solid var(--color-border);
}

.about-facts__item .loan-values__icon {
  flex-shrink: 0;
  margin-bottom: 0;
}

.about-facts__title {
  font-size: var(--text-md);
  margin-bottom: var(--space-1);
}

.about-facts__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

@media (min-width: 640px) {
  .about-facts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-facts__item + .about-facts__item {
    border-top: 0;
  }

  .about-facts__item:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }

  .about-facts__item:nth-child(even) {
    border-left: 1px solid var(--color-border);
  }
}

@media (min-width: 1024px) {
  .about-facts__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about-facts__item:nth-child(n + 3) {
    border-top: 0;
  }

  .about-facts__item + .about-facts__item {
    border-left: 1px solid var(--color-border);
  }
}

.about-broker {
  padding-block: var(--space-9);
}

.about-broker__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.about-broker__portrait {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 22rem);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  background:
    radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--color-gold) 30%, transparent), transparent 55%),
    linear-gradient(160deg, var(--color-navy-700), var(--color-navy-900));
}

.about-broker__portrait::after {
  content: '';
  position: absolute;
  inset: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-gold) 55%, transparent);
}

.about-broker__initial {
  font-family: var(--font-family-editorial);
  font-size: var(--text-display);
  color: var(--color-on-navy);
}

.about-broker__role {
  margin-top: calc(-1 * var(--space-3));
  color: var(--color-gold-text);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-broker__credentials {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.about-broker__credentials span {
  display: inline-block;
  min-width: 9rem;
  color: var(--color-navy-900);
  font-weight: var(--font-weight-medium);
}

@media (min-width: 900px) {
  .about-broker__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-9);
  }
}

.about-meet {
  padding-block: var(--space-9);
  background: var(--color-navy-tint-10);
}

.about-meet__grid {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.about-meet__card {
  min-width: 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-meet__card:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-md);
}

.about-meet__card .loan-situations__number {
  color: var(--color-gold-strong);
}

.about-meet__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.about-meet__text {
  color: var(--color-text-muted);
  margin: 0;
}

@media (min-width: 768px) {
  .about-meet__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about-principles {
  padding-block: var(--space-9);
}

.about-principles__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.about-principles__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-7);
}

.about-principles__item {
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gold);
}

.about-principles__title {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

.about-principles__text {
  color: var(--color-text-muted);
  margin: 0;
}

@media (min-width: 640px) {
  .about-principles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .about-principles__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--space-9);
  }
}

/* =========================================================================
   Contact
   ========================================================================= */
.contact-routes {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--space-6));
  padding-inline: var(--space-5);
}

.contact-routes__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--container-max);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.contact-routes__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-gold);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-routes__card:hover {
  transform: translateY(calc(-1 * var(--space-1)));
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

.contact-routes__card .loan-values__icon {
  margin-bottom: var(--space-2);
}

.contact-routes__title {
  font-family: var(--font-family-editorial);
  font-size: var(--text-lg);
  color: var(--color-navy-900);
}

.contact-routes__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-routes__link {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gold-text);
}

@media (min-width: 768px) {
  .contact-routes__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.contact-main {
  padding-block: var(--space-8) var(--space-9);
  scroll-margin-top: var(--space-9);
}

.lux .contact-aside {
  background: var(--color-navy-tint-10);
  border: 1px solid var(--color-navy-tint-20);
  border-left: 2px solid var(--color-gold);
}

.lux .contact-aside__heading {
  font-size: var(--text-lg);
}

.contact-steps {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.contact-steps__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.contact-steps__number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  font-family: var(--font-family-editorial);
  color: var(--color-gold-text);
  background: var(--color-surface);
}

.contact-steps__title {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-medium);
  color: var(--color-navy-900);
}

.contact-steps__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .lux .contact-aside {
    position: sticky;
    top: calc(var(--space-9) + var(--space-4));
  }
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-search {
  margin-top: var(--space-6);
  max-width: 34rem;
}

.faq-search input {
  width: 100%;
  min-height: calc(var(--tap-target) + var(--space-2));
  padding: var(--space-3) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-gold) 50%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font-size: var(--text-base);
  box-shadow: var(--shadow-lg);
}

.faq-search input:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.faq-body {
  padding-block: var(--space-8) var(--space-9);
}

.faq-body__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.faq-body__list {
  min-width: 0;
}

.lux .faq-body .faq-category {
  padding: 0 0 var(--space-7);
  scroll-margin-top: calc(var(--space-9) + var(--space-4));
}

.faq-nav {
  min-width: 0;
}

.faq-nav__heading {
  margin-bottom: var(--space-3);
  color: var(--color-gold-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.faq-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.faq-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.faq-nav a:hover {
  border-color: var(--color-gold);
  color: var(--color-navy-900);
}

.faq-nav__count {
  min-width: var(--space-5);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-gold-text);
}

.faq-status {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.faq-status:not(:empty) {
  margin-bottom: var(--space-5);
}

@media (min-width: 960px) {
  .faq-body__inner {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-9);
  }

  .faq-nav {
    position: sticky;
    top: calc(var(--space-9) + var(--space-4));
  }

  .faq-nav ul {
    flex-direction: column;
    gap: 0;
    border-left: 1px solid var(--color-border);
  }

  .faq-nav a {
    border: 0;
    border-left: 2px solid transparent;
    margin-left: -1px;
    background: transparent;
    padding: var(--space-3) var(--space-4);
  }

  .faq-nav a:hover {
    border-left-color: var(--color-gold);
  }
}

/* =========================================================================
   News
   ========================================================================= */
.news-body {
  padding-block: var(--space-8) var(--space-9);
}

.news-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.news-feature:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

.news-feature__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--color-gold) 25%, transparent), transparent 55%),
    linear-gradient(160deg, var(--color-navy-700), var(--color-navy-900));
}

.news-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-feature__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
}

.news-feature__placeholder svg {
  width: var(--space-8);
  height: var(--space-8);
}

.news-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: var(--space-6);
}

.news-feature__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-3);
}

.news-feature__excerpt {
  color: var(--color-text-muted);
}

.lux .news-feature__date {
  margin: 0 0 var(--space-4);
}

.news-feature__link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gold-text);
}

@media (min-width: 900px) {
  .news-feature {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .news-feature__media {
    aspect-ratio: auto;
    min-height: 22rem;
  }

  .news-feature__copy {
    padding: var(--space-8) var(--space-7);
  }
}

.lux .news-grid .card__meta {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.lux .news-grid .card__heading {
  margin-top: var(--space-2);
}

.lux .news-grid .card__body {
  margin-bottom: var(--space-5);
}

.lux .pagination {
  justify-content: center;
  margin-top: var(--space-7);
}

@media (prefers-reduced-motion: reduce) {
  .contact-routes__card,
  .contact-routes__card:hover {
    transition: none;
    transform: none;
  }
}

@media (max-width: 767px) {
  .contact-routes__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    padding: var(--space-5);
  }

  .contact-routes__card .loan-values__icon {
    grid-row: span 3;
    margin-bottom: 0;
  }

  .contact-routes__link {
    padding-top: var(--space-1);
  }
}

/* Page banner with a photo showing through a navy wash. */
.page-hero--photo {
  display: flex;
  align-items: center;
  min-height: clamp(20rem, 44vh, 28rem);
  background: var(--color-navy-900);
}

.page-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero--photo::before {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-navy-900) 90%, transparent) 0%,
      color-mix(in srgb, var(--color-navy-900) 72%, transparent) 40%,
      color-mix(in srgb, var(--color-navy-800) 35%, transparent) 100%);
}

.page-hero--photo::after {
  content: none;
}

.page-hero--photo .page-hero__inner {
  width: 100%;
}

@media (max-width: 767px) {
  .page-hero--photo::before {
    background: color-mix(in srgb, var(--color-navy-900) 80%, transparent);
  }
}

/* =========================================================================
   Home
   ========================================================================= */
.lux .hero {
  background:
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--color-gold) 16%, transparent), transparent 36%),
    radial-gradient(circle at 8% 95%, color-mix(in srgb, var(--color-navy-700) 14%, transparent), transparent 50%),
    linear-gradient(135deg, var(--color-navy-tint-10) 0%, var(--color-bg) 55%, color-mix(in srgb, var(--color-gold) 6%, var(--color-bg)) 100%);
  border-bottom: 1px solid var(--color-border);
}

.lux .hero::before,
.lux .hero::after {
  content: none;
}

.lux .hero__inner {
  padding-block: var(--space-8) var(--space-9);
}

.lux .hero__eyebrow {
  display: flex;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  color: var(--color-gold-text);
  margin-bottom: var(--space-4);
}

.lux .hero__heading {
  font-size: clamp(var(--text-2xl), 6.5vw, var(--text-display));
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
  max-width: 11ch;
}

.lux .hero__word--accent {
  color: var(--color-gold-strong);
  font-style: italic;
}

.lux .hero__subheading {
  font-size: var(--text-md);
  max-width: 44ch;
}

.lux .hero__cta,
.lux .hero__secondary-link {
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.lux .hero__secondary-link {
  background: transparent;
  border: 1px solid var(--color-navy-800);
  color: var(--color-navy-800);
}

.lux .hero__secondary-link:hover {
  background: var(--color-navy-tint-10);
  color: var(--color-navy-900);
}

.hero__points {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero__points li {
  position: relative;
  padding-left: var(--space-5);
}

.hero__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: var(--space-2);
  height: var(--space-1);
  border-left: 2px solid var(--color-gold-strong);
  border-bottom: 2px solid var(--color-gold-strong);
  transform: rotate(-45deg);
}

.lux .hero__image {
  width: min(100%, 440px);
}

.home-calc {
  padding-block: var(--space-8) var(--space-9);
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-navy-tint-10) 100%);
}

.home-calc .section__intro {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* One continuous backdrop behind every public page: soft blue and gold
   light drifting down the page over a base between the two. Section
   bands below are made transparent so nothing breaks it into strips. */
body:not(.admin) main {
  padding-bottom: var(--space-8);
  background:
    radial-gradient(ellipse 60% 900px at 100% 0, color-mix(in srgb, var(--color-gold) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 65% 1100px at 0 12%, color-mix(in srgb, var(--color-navy-700) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 1000px at 100% 40%, color-mix(in srgb, var(--color-navy-700) 13%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 900px at 0 62%, color-mix(in srgb, var(--color-gold) 9%, transparent), transparent 70%),
    radial-gradient(ellipse 65% 1100px at 100% 85%, color-mix(in srgb, var(--color-navy-700) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-navy-tint-10) 70%, var(--color-bg));
}

.site-footer {
  margin-top: 0;
}

.lux .hero,
.lux .home-calc,
.section--alt,
.section--tint,
.about-meet {
  background: transparent;
  border: 0;
}

.application-history__earlier {
  margin-top: var(--space-4);
}

.application-history__earlier > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gold-text);
}

.application-history__earlier > summary::-webkit-details-marker {
  display: none;
}

.application-history__earlier > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.application-history__earlier[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.admin-search-results__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.admin-search-results__item > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-section-header .admin-inline-actions {
  margin: 0;
}

.usual-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.usual-list legend {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.usual-list__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.usual-list__item:hover {
  border-color: var(--color-primary-tint-20);
  background: var(--color-primary-tint-10);
}

.usual-list__item input {
  margin-top: 0.3em;
}

.usual-list__title {
  display: block;
  font-weight: var(--font-weight-medium);
}

.usual-list__description {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.application-now + p {
  margin-top: var(--space-4);
}

/* Admin workspace shell */
.admin-shell {
  display: flex;
  min-height: 100vh;
  background: var(--color-background);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex: 0 0 248px;
  flex-direction: column;
  align-self: flex-start;
  width: 248px;
  min-height: 100vh;
  padding: var(--space-7) var(--space-4) var(--space-5);
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
}

.admin-sidebar .admin-header__brand,
.admin-sidebar .admin-header__brand:hover,
.admin-sidebar .admin-header__brand:focus-visible,
.admin-sidebar .admin-header__brand:visited {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0 var(--space-3) var(--space-7);
  color: var(--color-on-primary);
}

.admin-sidebar .admin-header__brand-tag {
  color: var(--color-accent);
}

.admin-sidebar__user {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 var(--space-3) var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  overflow-wrap: anywhere;
}

.admin-sidebar__user-label {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-sidebar .admin-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.admin-sidebar .admin-nav a,
.admin-sidebar .admin-nav a:hover,
.admin-sidebar .admin-nav a:focus-visible,
.admin-sidebar .admin-nav a:visited {
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.admin-sidebar .admin-nav a:hover,
.admin-sidebar .admin-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-on-primary);
}

.admin-sidebar .admin-nav a[aria-current="page"] {
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

.admin-sidebar .admin-header__logout {
  margin-top: auto;
  padding: var(--space-5) var(--space-3) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.admin-sidebar .admin-header__logout-button {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-on-primary);
}

.admin-sidebar .admin-header__logout-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.admin-content {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-mobile-header {
  display: none;
}

.admin-dashboard__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-dashboard .admin-page-header h1 {
  margin-bottom: var(--space-3);
}

.admin-dashboard__intro {
  max-width: 42rem;
  margin: 0 0 var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.admin-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.admin-dashboard-card {
  position: relative;
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-dashboard-card:hover,
.admin-dashboard-card:focus-visible {
  border-color: var(--color-accent-text);
  box-shadow: 0 8px 22px rgba(18, 45, 65, 0.12);
  color: var(--color-text);
  transform: translateY(-2px);
}

.admin-dashboard-card__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-5);
  color: var(--color-accent-text);
}

.admin-dashboard-card__title {
  font-family: var(--font-family-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-display);
}

.admin-dashboard-card__description {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.admin-dashboard-card__action {
  margin-top: auto;
  padding-top: var(--space-5);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  margin: var(--space-2) 0 var(--space-5);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-back-link::before {
  width: 0.5rem;
  height: 0.5rem;
  border-bottom: 2px solid var(--color-accent-text);
  border-left: 2px solid var(--color-accent-text);
  content: "";
  transform: rotate(45deg);
}

.admin-back-link:hover,
.admin-back-link:focus-visible {
  border-color: var(--color-accent-text);
  box-shadow: 0 4px 12px rgba(18, 45, 65, 0.1);
  color: var(--color-primary);
  text-decoration: none;
  transform: translateX(-2px);
}

@media (max-width: 1100px) and (min-width: 768px) {
  .admin-dashboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .admin-shell {
    display: block;
  }

  .admin-sidebar {
    display: none;
  }

  .admin-mobile-header {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    min-height: 4.5rem;
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--rule-strong) solid var(--color-primary);
    background: var(--color-surface);
  }

  .admin-mobile-header .admin-header__brand {
    display: inline-flex;
    margin: 0;
  }

  .admin-mobile-header .admin-header__logout {
    display: none;
  }

  .admin-mobile-header .admin-nav--mobile {
    top: calc(100% + var(--space-2));
  }

  .admin-main {
    padding-inline: var(--space-4);
  }

  .admin-dashboard__grid {
    grid-template-columns: 1fr;
  }
}