/* =============================================================
   R B P B & CO LLP — Chartered Accountants
   Design system
   -------------------------------------------------------------
   Restrained, institutional and typographic. Hairline rules and
   whitespace carry the layout; there are no drop shadows used as
   decoration, no gradients on text, and no scale-bounce hovers.
   Motion is limited to short fades, small rises and rule draws,
   and is switched off entirely under prefers-reduced-motion.
   ============================================================= */

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */

:root {
  /* Colour ------------------------------------------------- */
  --ink:            #0f2436;  /* primary navy — headings, dark bands */
  --ink-deep:       #0a1a28;  /* footer, deepest surface            */
  --ink-soft:       #1c3b56;  /* raised panels on dark              */

  --accent:         #9c7c43;  /* brass — rules, eyebrows, marks     */
  --accent-deep:    #7d6234;  /* brass on paper (AA at small sizes) */
  --accent-on-dark: #b08f52;  /* brass on the navy bands (AA)       */
  --accent-tint:    #f2ece0;

  --paper:          #fbfaf7;  /* page background                    */
  --paper-warm:     #f5f2ec;  /* alternating band                   */
  --surface:        #ffffff;

  --text:           #384450;
  --text-muted:     #64707c;
  --text-on-dark:   #cfd9e2;
  --text-on-dark-muted: #94a6b6;

  --rule:           #e5e1d9;
  --rule-strong:    #d2ccc0;
  --rule-on-dark:   rgba(255, 255, 255, 0.14);

  --focus:          #1c6ea4;

  /* Type ---------------------------------------------------- */
  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.875rem);
  --step-0:  clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --step-2:  clamp(1.35rem, 1.26rem + 0.42vw, 1.625rem);
  --step-3:  clamp(1.62rem, 1.45rem + 0.80vw, 2.125rem);
  --step-4:  clamp(1.95rem, 1.65rem + 1.45vw, 2.875rem);
  --step-5:  clamp(2.30rem, 1.82rem + 2.35vw, 3.75rem);

  /* Space --------------------------------------------------- */
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --wrap: 75rem;         /* 1200px */
  --wrap-narrow: 52rem;  /* 832px  */
  --section-y: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);

  /* Motion -------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-base: 280ms;
  --t-slow: 620ms;

  --radius: 2px;
  --header-h: 4.5rem;
}

/* -------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.25; }
h4 { font-size: var(--step-1); line-height: 1.35; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin-bottom: 0.35em; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-deep); }

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

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

::selection { background: var(--accent-tint); color: var(--ink); }

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.1rem;
  font-size: var(--step--1);
  font-weight: 600;
  transition: top var(--t-base) var(--ease);
}
.skip-link:focus { top: 0.75rem; color: #fff; }

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

/* -------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: none; }

.section { padding-block: var(--section-y); }
.section--warm { background: var(--paper-warm); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--ink); color: var(--text-on-dark); }

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.section--dark a { color: #fff; }

.grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

@media (max-width: 62rem) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 42rem) {
  .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------
   4. Typographic components
   ------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow--center { justify-content: center; }
/* Brass needs lifting against the navy bands to stay legible. */
.section--dark .eyebrow,
.page-hero .eyebrow { color: var(--accent-on-dark); }
.section--dark .eyebrow::before,
.page-hero .eyebrow::before { background: var(--accent-on-dark); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section-head p:not(.eyebrow) { font-size: var(--step-1); color: var(--text-muted); margin-bottom: 0; }
.section--dark .section-head p:not(.eyebrow) { color: var(--text-on-dark); }

.lead { font-size: var(--step-1); color: var(--text-muted); }
.prose p { max-width: 38em; }
.prose h3 { margin-top: 2.25rem; }

/* -------------------------------------------------------------
   5. Buttons & links
   ------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.btn:hover { --btn-bg: var(--ink-soft); --btn-bd: var(--ink-soft); color: #fff; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-bd: var(--ink); color: #fff; }

.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--on-dark:hover { --btn-bg: var(--accent-deep); --btn-bd: var(--accent-deep); color: #fff; }

.btn--ghost-on-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: var(--rule-on-dark); }
.btn--ghost-on-dark:hover { --btn-bg: rgba(255,255,255,0.08); --btn-bd: rgba(255,255,255,0.4); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Arrow link — the rule under the label draws in on hover */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 0.35rem;
  position: relative;
}
.arrow-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.arrow-link:hover::after { transform: scaleX(1); }
.arrow-link svg { transition: transform var(--t-base) var(--ease); flex: none; }
.arrow-link:hover svg { transform: translateX(4px); }
.section--dark .arrow-link { color: #fff; }

/* -------------------------------------------------------------
   6. Site header
   ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow var(--t-base) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 6px 20px -16px rgba(15, 36, 54, 0.4); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--header-h);
}

/* Wordmark */
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand__mark { flex: none; width: auto; height: 2rem; }

/* The mark's lettering is navy, so on the dark bands it sits on a
   white plate rather than being recoloured. */
.brand__plate {
  flex: none;
  display: inline-flex;
  padding: 0.3rem 0.4rem;
  background: #fff;
  border-radius: var(--radius);
}
.brand__text { display: flex; flex-direction: column; gap: 0.15rem; }
.brand__name {
  font-family: var(--font-serif);
  white-space: nowrap;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}
.brand__descriptor {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  line-height: 1;
}

/* Navigation */
.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  display: block;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Services menu ---- */

.nav__item { position: relative; }
.nav__item--menu { display: flex; align-items: center; gap: 0.3rem; }

.nav__menu-btn {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
.nav__item--menu:hover .nav__menu-btn { color: var(--ink); }
.nav__item--menu.is-open .nav__menu-btn { color: var(--ink); transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  width: min(34rem, calc(100vw - 3rem));
  padding-top: 0.75rem; /* bridges the gap so the menu survives the cursor */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              visibility var(--t-base);
}
.nav__item--menu.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__menu-inner {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  padding: 1.5rem 1.75rem 1.25rem;
  box-shadow: 0 18px 40px -28px rgba(15, 36, 54, 0.45);
}
.nav__menu-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
}
.nav__menu-list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  columns: 2;
  column-gap: 1.75rem;
}
.nav__menu-list li { margin: 0; break-inside: avoid; }
.nav__menu-list a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.42rem 0.5rem 0.42rem 0;
  font-size: 0.92rem;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.nav__menu-list a:hover { color: var(--ink); padding-left: 0.35rem; }
.nav__menu-num {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  color: var(--accent-deep);
  flex: none;
}
.nav__menu-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.nav__menu-all svg { transition: transform var(--t-base) var(--ease); }
.nav__menu-all:hover svg { transform: translateX(4px); }

/* Without JavaScript the menu still opens on hover and keyboard focus. */
.no-js .nav__item--menu:hover .nav__menu,
.no-js .nav__item--menu:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__actions { display: flex; gap: 0.55rem; }
.nav__actions .btn { padding: 0.72rem 1.15rem; font-size: 0.72rem; white-space: nowrap; }
/* Above the drawer breakpoint the CTAs sit in the header; below it the
   drawer rules further down take them over, so they are never absent. */


/* Contact details live inside the drawer, so they only show there. */
.nav__mobile-contact { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle__bars { display: grid; gap: 4px; width: 16px; }
.nav-toggle__bars span {
  display: block; height: 1.5px; background: var(--ink);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 68rem) {
  /* backdrop-filter makes fixed descendants use the header as their
     containing block in mobile Safari and Chromium. The drawer would then be
     constrained to the header's height, which made it appear empty. Keep the
     mobile header opaque and anchor the full-height drawer to the sticky
     header instead. */
  .site-header {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-toggle { display: inline-flex; position: relative; z-index: 2; }
  .nav {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    width: min(23rem, 88vw);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
    background: var(--surface);
    border-left: 1px solid var(--rule);
    box-shadow: -1rem 0 2.5rem rgba(15, 36, 54, 0.12);
    transform: translateX(100%);
    transition: transform 320ms var(--ease-out);
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;
  }
  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--rule); }
  .nav__link { padding: 1rem 0; font-size: 1.05rem; }
  .nav__item--menu { flex-wrap: wrap; justify-content: space-between; gap: 0; }
  .nav__item--menu .nav__link { flex: 1; }
  .nav__menu-btn { width: 2.75rem; height: 2.75rem; color: var(--ink); }
  .nav__menu {
    position: static;
    width: 100%;
    padding-top: 0;
    opacity: 1;
    visibility: hidden;
    transform: none;
    display: none;
  }
  .nav__item--menu.is-open .nav__menu {
    display: block;
    visibility: visible;
    transform: none;
  }
  .nav__menu-inner {
    border: 0;
    border-top: 1px solid var(--rule);
    box-shadow: none;
    padding: 1.1rem 0 1.25rem 0.75rem;
    background: var(--paper);
  }
  .nav__menu-list { columns: 1; margin-bottom: 0.9rem; }
  .no-js .nav__item--menu .nav__menu { display: block; visibility: visible; }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--accent-deep); }
  .nav__actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.75rem; }
  .nav__actions .btn { padding: 0.9rem 1.2rem; font-size: 0.78rem; }
  .nav__mobile-contact { display: block; margin-top: auto; padding-top: 2rem; font-size: 0.9rem; color: var(--text-muted); }
  .nav__mobile-contact a { display: block; color: var(--ink); text-decoration: none; margin-top: 0.4rem; }
}

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 26, 40, 0.42);
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.nav-scrim.is-visible { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(3.25rem, 2rem + 5vw, 6rem);
}
.hero::before {
  /* engraved hairline grid — barely there, gives the page a base texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}
@media (max-width: 62rem) { .hero__inner { grid-template-columns: minmax(0, 1fr); } }

.hero h1 { margin-bottom: 0.5em; }
.hero h1 em {
  font-style: normal;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.045em;
  text-underline-offset: 0.17em;
  text-decoration-skip-ink: auto;
}
.hero__copy p:not(.eyebrow) { font-size: var(--step-1); color: var(--text-muted); max-width: 34em; }
.hero__actions { margin-top: 2rem; }

.hero__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.hero__credentials span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__credentials span::before {
  content: ""; width: 4px; height: 4px; background: var(--accent); flex: none;
  transform: rotate(45deg);
}

/* At-a-glance panel */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
}
.panel__title {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.fact {
  padding: 1.1rem 0.5rem 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.fact:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.fact:nth-child(odd) { padding-right: 1.25rem; border-right: 1px solid var(--rule); }
.fact:nth-child(even) { padding-left: 1.25rem; }
.fact__value {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  display: block;
}
.fact__label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.panel__footer {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* -------------------------------------------------------------
   8. Page hero (interior pages)
   ------------------------------------------------------------- */

.page-hero {
  position: relative;
  background: var(--ink);
  color: var(--text-on-dark);
  padding-block: clamp(3rem, 2rem + 4vw, 5.25rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  -webkit-mask-image: radial-gradient(110% 100% at 88% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(110% 100% at 88% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}
.page-hero__inner { position: relative; max-width: 48rem; }
.page-hero h1 { color: #fff; }
.page-hero p:not(.eyebrow) { font-size: var(--step-1); color: var(--text-on-dark); margin-bottom: 0; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-on-dark-muted);
}
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before { content: "/"; color: rgba(255,255,255,0.28); }
.breadcrumb a { color: var(--text-on-dark-muted); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current="page"] { color: #fff; }

/* -------------------------------------------------------------
   9. Cards
   ------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) { .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 42rem) { .card-grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* Service card — index number, hairline borders, accent rule on hover */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  transition: background var(--t-base) var(--ease);
}
.service-card::before {
  content: "";
  position: absolute;
  left: -1px; top: 0; bottom: -1px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base) var(--ease);
}
.service-card:hover { background: var(--paper-warm); }
.service-card:hover::before { transform: scaleY(1); }
.card-grid--3 .service-card:nth-child(3n) { border-right: 0; }
@media (max-width: 62rem) {
  .card-grid--3 .service-card:nth-child(3n) { border-right: 1px solid var(--rule); }
  .card-grid--3 .service-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 42rem) { .card-grid .service-card { border-right: 0; } }

.service-card__index {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  margin-bottom: 1.25rem;
}
.service-card__title {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.24;
  margin: 0 0 0.7rem;
  transition: color var(--t-fast) var(--ease);
}
.service-card:hover .service-card__title { color: var(--accent-deep); }
.service-card__summary { font-size: 0.95rem; color: var(--text-muted); margin: 0 0 1.75rem; }
.service-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.service-card__more svg { transition: transform var(--t-base) var(--ease); }
.service-card:hover .service-card__more svg { transform: translateX(4px); }

/* Generic bordered tile */
.tile {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  height: 100%;
  transition: border-color var(--t-base) var(--ease);
}
.tile:hover { border-color: var(--rule-strong); }
.tile h3 { font-size: var(--step-1); margin-bottom: 0.55rem; }
.tile p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0; }

/* ---- Horizontal scroller ---- */

.scroller__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}
.scroller__head > div { max-width: 46rem; }
.scroller__head h2 { margin-bottom: 0.5rem; }
.scroller__head .lead { margin-bottom: 0; }
@media (max-width: 52rem) {
  .scroller__head { grid-template-columns: minmax(0, 1fr); }
  .scroller__controls { justify-self: start; }
}

.scroller__controls { display: flex; gap: 0.5rem; }
.scroller__controls[hidden] { display: none; }
.scroller__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              opacity var(--t-base) var(--ease);
}
.scroller__btn:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.scroller__btn:disabled { opacity: 0.32; cursor: default; }

.scroller { position: relative; }
.scroller__track {
  display: grid;
  grid-auto-flow: column;
  /* A fraction of the next card stays in view, so it is obvious the
     rail continues past the right edge. */
  grid-auto-columns: calc(100% / 4.25);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  /* The rail is moved by touch, trackpad, or the vertical mouse wheel.
     Keep the browser's utility scrollbar out of the visual design. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroller__track > * { scroll-snap-align: start; }
.scroller__track::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Keep service cards readable as the rail narrows: two cards on tablets and
   one comfortably swipeable card on phones. */
@media (max-width: 62rem) {
  .scroller__track { grid-auto-columns: calc(100% / 2.25); }
}
@media (max-width: 42rem) {
  .scroller__track { grid-auto-columns: calc(100% / 1.08); }
}

.hscroll__more { margin-top: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  .scroller__viewport { scroll-behavior: auto; }
}

/* -------------------------------------------------------------
   10. Numbered feature list (Why us / Approach)
   ------------------------------------------------------------- */

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.feature-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (max-width: 52rem) { .feature-list--2 { grid-template-columns: minmax(0, 1fr); } }

.feature {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 1.75rem 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.section--dark .feature { border-top-color: var(--rule-on-dark); }
.feature__num {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  padding-top: 0.28rem;
}
/* The deeper brass is needed for contrast on paper; on the dark
   bands the lighter tone is the readable one. */
.section--dark .feature__num { color: var(--accent-on-dark); }
.feature h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.feature p { font-size: 0.95rem; color: var(--text-muted); margin: 0; }
.section--dark .feature p { color: var(--text-on-dark); }

@media (max-width: 34rem) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .feature__num { padding-top: 0; }
}

/* -------------------------------------------------------------
   11. Team
   ------------------------------------------------------------- */

.person {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid transparent;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  height: 100%;
  transition: border-top-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.person:hover { border-top-color: var(--accent); border-color: var(--rule-strong); }

.person__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 1.35rem;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.person__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Until the firm supplies photographs the slot is shown as a marked
   placeholder, so the layout is final and the gap is obvious. */
.person__portrait--empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    var(--rule) 9px 10px
  );
}
.person__portrait-label {
  position: absolute;
  left: 0.9rem;
  bottom: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.person--compact { border-top-width: 1px; padding: 0; border: 0; background: none; }
.person--compact:hover { border: 0; }
.person--compact .person__portrait { margin-bottom: 1.5rem; }
.person__credential { font-size: 0.95rem; color: var(--text-muted); margin: 0; }
.person__name { font-size: var(--step-1); margin-bottom: 0.3rem; }
.person__role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1rem;
}
.person__summary { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.person__meta {
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.person__meta dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0.3rem 1rem; margin: 0; }
.person__meta dt { font-weight: 600; color: var(--ink); }
.person__meta dd { margin: 0; }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.tags li {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.25rem 0.6rem;
}

/* -------------------------------------------------------------
   12. Offering / checklist columns
   ------------------------------------------------------------- */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.checklist li {
  break-inside: avoid;
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
  color: var(--text);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.1rem; top: 0.52em;
  width: 0.55rem; height: 0.3rem;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
@media (max-width: 48rem) { .checklist { columns: 1; } }

.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.index-list li { margin: 0; border-bottom: 1px solid var(--rule); }
.index-list a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.1rem 0.5rem 1.1rem 0;
  text-decoration: none;
  color: var(--ink);
  transition: padding-left var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.index-list a:hover { padding-left: 0.75rem; background: var(--paper-warm); }
.index-list__num {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--accent-deep);
  flex: none;
  min-width: 1.75rem;
}
.index-list__label { font-family: var(--font-serif); font-size: var(--step-1); font-weight: 600; }
.index-list__meta { margin-left: auto; font-size: 0.85rem; color: var(--text-muted); text-align: right; }
@media (max-width: 42rem) { .index-list__meta { display: none; } }

/* -------------------------------------------------------------
   13. Compliance strip
   ------------------------------------------------------------- */

.compliance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-on-dark); }
@media (max-width: 62rem) { .compliance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .compliance { grid-template-columns: minmax(0, 1fr); } }

.compliance__item {
  padding: 1.75rem clamp(1rem, 0.6rem + 1.4vw, 1.75rem) 1.75rem 0;
  border-right: 1px solid var(--rule-on-dark);
}
.compliance__item:last-child { border-right: 0; }
@media (max-width: 62rem) {
  .compliance__item:nth-child(2n) { border-right: 0; }
  .compliance__item:nth-child(n+3) { border-top: 1px solid var(--rule-on-dark); }
}
@media (max-width: 38rem) {
  .compliance__item { border-right: 0; }
  .compliance__item + .compliance__item { border-top: 1px solid var(--rule-on-dark); }
}
.compliance__day {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--accent-on-dark);
  line-height: 1;
  display: block;
  margin-bottom: 0.75rem;
}
.compliance__title { color: #fff; font-family: var(--font-serif); font-size: var(--step-1); margin: 0 0 0.35rem; }
.compliance__body { font-size: 0.9rem; color: var(--text-on-dark-muted); margin: 0; }
.note {
  font-size: 0.82rem;
  color: var(--text-muted);
  border-left: 2px solid var(--rule-strong);
  padding-left: 1rem;
  max-width: 44em;
}
.section--dark .note { color: var(--text-on-dark-muted); border-left-color: var(--rule-on-dark); }

/* -------------------------------------------------------------
   14. CTA band
   ------------------------------------------------------------- */

.cta-band {
  background: var(--ink);
  color: var(--text-on-dark);
  padding-block: clamp(3rem, 2rem + 3.5vw, 4.75rem);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 5.5rem 100%;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 65%);
  mask-image: linear-gradient(to right, #000, transparent 65%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: 0.5rem; font-size: var(--step-3); max-width: 20em; }
.cta-band p { color: var(--text-on-dark); margin: 0; max-width: 38em; }

/* -------------------------------------------------------------
   15. Forms
   ------------------------------------------------------------- */

.form { display: grid; gap: 1.5rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.field--full { grid-column: 1 / -1; }
.field--span-2 { grid-column: span 2; }

/* A compact heading for a form section: the intro sits beside the
   title rather than under it, so the form starts higher up the screen. */
.form-section { padding-block: clamp(2.5rem, 1.6rem + 3vw, 3.75rem); }
.form-section__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 0.6rem + 1.6vw, 3rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
}
.form-section__head h2 { margin-bottom: 0; font-size: var(--step-3); }
.form-section__head .lead { margin-bottom: 0; }
@media (max-width: 62rem) {
  .form-section__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* The wide form uses the full measure so a long enquiry form reads in
   one screen rather than a single scrolling column. */
.form--wide .form__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form--wide .field textarea { min-height: 7.5rem; }

@media (max-width: 62rem) {
  .form--wide .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form--wide .field--span-2 { grid-column: 1 / -1; }
}
@media (max-width: 42rem) {
  .form__grid, .form--wide .form__grid { grid-template-columns: minmax(0, 1fr); }
  .field--span-2 { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: var(--accent-deep); }
.field__hint { font-size: 0.8rem; color: var(--text-muted); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(28, 110, 164, 0.14);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #a4362f; }
.field__error { font-size: 0.8rem; color: #a4362f; min-height: 0; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2364707c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}
.field input[type="file"] { padding: 0.6rem 0.9rem; font-size: 0.9rem; }
.field input[type="file"]::file-selector-button {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--rule-strong);
  background: var(--paper-warm);
  color: var(--ink);
  padding: 0.45rem 0.9rem;
  margin-right: 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.field input[type="file"]::file-selector-button:hover { background: var(--accent-tint); }

.form__status {
  font-size: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-left-width: 2px;
  border-left-color: var(--accent);
  background: var(--paper-warm);
  color: var(--text);
}
.form__status[hidden] { display: none; }
.form__status--error { border-left-color: #a4362f; }

.form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.form__consent { font-size: 0.82rem; color: var(--text-muted); max-width: 34em; }

/* -------------------------------------------------------------
   16. Contact details
   ------------------------------------------------------------- */

.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list > li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1.35rem 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.detail-list > li:first-child { border-top: 0; padding-top: 0; }
.detail-list__icon { color: var(--accent); padding-top: 0.28rem; }
.detail-list__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.detail-list__value { font-size: 1rem; color: var(--ink); }
.detail-list__value a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); transition: border-color var(--t-fast) var(--ease); }
.detail-list__value a:hover { border-color: var(--accent); }
.detail-list__value p { margin: 0; }
.detail-list__value ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }

.contact-aside { display: flex; flex-direction: column; }
.map-frame {
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  flex: 1;
  min-height: 24rem;
  overflow: hidden;
}
.map-frame iframe { border: 0; width: 100%; height: 100%; min-height: 24rem; display: block; }

/* -------------------------------------------------------------
   17. Resources
   ------------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}
.search-field { position: relative; flex: 1 1 18rem; max-width: 24rem; }
.search-field input { padding-left: 2.6rem; }
.search-field svg {
  position: absolute;
  left: 0.9rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.filter-count { font-size: 0.85rem; color: var(--text-muted); }

.resource-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  height: 100%;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.resource-card:hover { border-color: var(--rule-strong); background: var(--paper-warm); }
.resource-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: var(--step-1); }
.resource-card__count { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; color: var(--accent-deep); letter-spacing: 0.06em; }
.resource-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.resource-card ul li {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.25rem 0.6rem;
}
.is-hidden { display: none !important; }
.empty-state { padding: 3rem 0; text-align: center; color: var(--text-muted); }

/* -------------------------------------------------------------
   18. Footer
   ------------------------------------------------------------- */

.site-footer {
  background: var(--ink-deep);
  color: var(--text-on-dark-muted);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0;
  font-size: 0.92rem;
}
.site-footer a { color: var(--text-on-dark); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.site-footer a:hover { color: #fff; }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  padding-bottom: 3rem;
}
@media (max-width: 68rem) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .footer__top { grid-template-columns: minmax(0, 1fr); } }

.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__descriptor { color: var(--accent-on-dark); }
.footer__blurb { margin-top: 1.25rem; max-width: 30em; color: var(--text-on-dark-muted); }

.footer__heading {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__list li { margin: 0; }

.footer__legal {
  border-top: 1px solid var(--rule-on-dark);
  padding-block: 1.75rem;
  font-size: 0.8rem;
  color: rgba(148, 166, 182, 0.78);
}
.footer__legal p { max-width: 62em; margin-bottom: 1.25rem; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
}

/* Back to top */
.to-top {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  z-index: 90;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              visibility var(--t-base), background var(--t-fast) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* -------------------------------------------------------------
   19. Motion
   ------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* No JS: never leave content invisible */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------------
   20. Print
   ------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .to-top, .cta-band, .nav-scrim { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.5rem; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* =============================================================
   21. Signature finish
   A richer editorial layer: dimensional surfaces and quiet ambient
   motion, while keeping the practice's conservative visual language.
   ============================================================= */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 250;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 12% 10%, rgba(176,143,82,.06), transparent 28%);
}

.site-header {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.hero {
  min-height: min(50rem, calc(100vh - var(--header-h)));
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at 82% 30%, rgba(156,124,67,.12), transparent 24rem),
    linear-gradient(135deg, #fbfaf7 0%, #f7f4ed 100%);
}
.hero::after {
  content: "";
  position: absolute;
  width: 36rem;
  aspect-ratio: 1;
  right: -18rem;
  bottom: -24rem;
  border: 1px solid rgba(156,124,67,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(156,124,67,.025), 0 0 0 8rem rgba(156,124,67,.018);
  pointer-events: none;
}
.hero h1 { font-size: clamp(2.8rem, 4.7vw, 5.1rem); line-height: 1.02; letter-spacing: -.035em; }
.hero h1 em { text-decoration: none; color: var(--accent-deep); position: relative; }
.hero h1 em::after {
  content: "";
  position: absolute;
  left: .04em; right: 0; bottom: -.08em;
  height: .08em;
  background: var(--accent);
  transform-origin: left;
  animation: signature-line 1.1s var(--ease-out) .45s both;
}
@keyframes signature-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-visual {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-height: 31rem;
  display: grid;
  place-items: center;
  perspective: 1100px;
  transform-style: preserve-3d;
}
.hero-visual__glow {
  position: absolute;
  inset: 13% 8% 9%;
  border-radius: 50%;
  background: rgba(156,124,67,.17);
  filter: blur(45px);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .65; transform: scale(1.06); } }
.hero-visual__ledger {
  position: absolute;
  inset: 4% 3% 10% 14%;
  border: 1px solid rgba(15,36,54,.09);
  transform: rotate(-4deg) translateZ(-30px);
  background: rgba(255,255,255,.23);
}
.hero-visual__ledger span { display: block; height: 16.66%; border-bottom: 1px solid rgba(15,36,54,.07); }
.hero-visual__ledger::before { content: ""; position: absolute; inset: 0 auto 0 29%; width: 1px; background: rgba(15,36,54,.07); }
.hero-visual .panel {
  position: relative;
  width: min(100%, 29rem);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid rgba(255,255,255,.75);
  border-top: 1px solid rgba(255,255,255,.95);
  border-radius: 10px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 35px 80px -35px rgba(15,36,54,.32), 0 8px 25px -18px rgba(15,36,54,.25);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.hero-visual .panel__header {
  /* The seal sits over this deliberately empty corner, never over copy. */
  min-height: 3.75rem;
  padding-right: 6.75rem;
}
.hero-visual:hover .panel { box-shadow: 0 45px 95px -35px rgba(15,36,54,.4); }
.panel__header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.panel__kicker { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.panel__kicker span { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: #62866c; box-shadow: 0 0 0 4px rgba(98,134,108,.12); margin-right: .4rem; }
.panel__title { max-width: 8rem; text-align: right; margin: 0; }
.hero-visual .fact { padding-block: 1.3rem; }
.hero-visual .fact__value { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.hero-visual__seal {
  position: absolute;
  /* Keep the seal inside the visual's bounds so the hero's overflow clipping
     cannot cut it off at desktop or mobile widths. */
  right: clamp(.25rem, 1vw, .75rem);
  top: 1.7rem;
  z-index: 3;
  width: 6.7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 35px -18px rgba(15,36,54,.65);
  transform: translateZ(45px) rotate(7deg);
  font-size: .61rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: seal-float 4.5s ease-in-out infinite;
}
.hero-visual__seal::before { content: ""; position: absolute; inset: .42rem; border: 1px solid rgba(176,143,82,.6); border-radius: 50%; }
.hero-visual__seal-mark { display: block; color: var(--accent-on-dark); font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: .06em; }
@keyframes seal-float { 50% { transform: translateZ(45px) rotate(4deg) translateY(-6px); } }
.hero-visual__status {
  position: absolute;
  left: -.5rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(15,36,54,.08);
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 15px 35px -24px rgba(15,36,54,.5);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  transform: translateZ(30px);
}
.status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #62866c; box-shadow: 0 0 0 4px rgba(98,134,108,.13); }

.section { position: relative; }
.section--dark {
  background:
    radial-gradient(circle at 85% 10%, rgba(176,143,82,.12), transparent 25rem),
    linear-gradient(145deg, var(--ink), #091a28);
}
.service-card { transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 22px 45px -35px rgba(15,36,54,.55); }
.person__portrait { overflow: hidden; }
.person__portrait img { transition: transform 700ms var(--ease-out), filter 500ms var(--ease); filter: saturate(.8); }
.person:hover .person__portrait img { transform: scale(1.025); filter: saturate(1); }
.feature { transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.feature:hover { transform: translateX(5px); border-color: rgba(176,143,82,.45); }
.page-hero::after {
  content: "RBPB";
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-52%);
  font-family: var(--font-serif);
  font-size: clamp(5rem, 16vw, 14rem);
  line-height: 1;
  letter-spacing: -.07em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.06);
  pointer-events: none;
}

@media (max-width: 62rem) {
  .hero { min-height: auto; }
  .hero-visual { min-height: 29rem; max-width: 36rem; margin-inline: auto; width: 100%; }
}
@media (max-width: 40rem) {
  .hero h1 { font-size: clamp(2.45rem, 12vw, 3.4rem); }
  .hero-visual { min-height: 27rem; }
  .hero-visual__seal { right: .25rem; top: .6rem; width: 5.8rem; }
  .hero-visual__status { left: .25rem; bottom: .25rem; }
  .panel__header { display: block; }
  .hero-visual .panel__header { min-height: 3.25rem; padding-right: 5.85rem; }
  .panel__title { max-width: none; text-align: left; margin-top: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 em::after { animation: none; }
  .hero-visual__glow, .hero-visual__seal { animation: none; }
  .hero-visual .panel { transform: none !important; }
}