/* =========================================================
   Davis Strategic Services — v9
   Bolder typography. Darker text. More chess presence.
   Cormorant Garamond display + Mona Sans body.
   ========================================================= */

:root {
  /* Three warm light tones */
  --bg: #F4EFE6;
  --bg-cool: #ECE1D0;
  --bg-stone: #DECFBC;

  /* Warm ink family — espresso through umber to taupe, tuned to sit with the
     candlelit photography rather than fight it (cool blue-greys removed). */
  --text: #241813;
  --text-muted: #44362A;
  --text-soft: #7E6650;
  /* Accent: antique gold. --gold marks on light (rules, frames, markers,
     arrow); --gold-deep speaks as text on light (sublabels, link hovers). */
  --gold: #B8860B;
  --gold-deep: #7E570B;   /* 5.6:1 on cream, 5.0:1 on cool; AA for small text */
  --gold-deeper: #6B4A09; /* for gold text on the stone band */

  /* Borders & lines — single unified separator weight, warmed to a low-opacity
     brown so every divider agrees with the warm ink. */
  --border: rgba(60, 42, 28, 0.30);
  --border-strong: rgba(60, 42, 28, 0.30);
  /* Section seam hairline (matches the footer's existing top rule) */
  --hairline: rgba(60, 42, 28, 0.30);

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Cormorant', 'Times New Roman', Georgia, serif;
  --font-body: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  /* Type scale: four heading sizes plus a display-prose size. Every heading maps here. */
  --fs-hero: clamp(3.25rem, 6.5vw, 5.5rem);
  --fs-section: clamp(2.25rem, 4.2vw, 3.5rem);
  --fs-card: clamp(1.6rem, 2.4vw, 2.1rem);
  --fs-prose: clamp(1.35rem, 2vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 1.35vw, 1.2rem);

  --rhythm: 3.5rem;      /* section edge / band gap, mobile */

  --container: 1280px;
  --container-narrow: 1080px;
  --container-text: 720px;

  /* Easing */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Text selection — warm limestone tint, no browser-default blue */
::selection {
  background: var(--bg-stone);
  color: var(--text);
}
::-moz-selection {
  background: var(--bg-stone);
  color: var(--text);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------------------
   Section seams
   A single full-bleed hairline at each background-tone transition, matching
   the footer's existing top rule. Sections that open directly beneath a
   .page-hero (about-body, first pillar) are intentionally NOT listed here:
   .page-hero already carries its own border-bottom, so adding a seam on top
   would double the line. Home's .hero has no border-bottom, so .approach
   keeps its seam.
   -------------------------------------------------------------------- */
.approach,
.testimonials,
.cta-banner {
  border-top: 1px solid var(--hairline);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: opacity 0.25s var(--ease), color 0.25s var(--ease); }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* ---- Layout primitives ---- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px) {
  .container, .container-narrow { padding: 0 3rem; }
}
@media (min-width: 1280px) {
  .container, .container-narrow { padding: 0 4rem; }
}

section { padding: 3.5rem 0; position: relative; scroll-margin-top: 80px; }
@media (min-width: 768px) { :root { --rhythm: 4.5rem; } section { padding: 4.5rem 0; } }

/* ---- Typography (bolder, larger) ---- */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.02;
  color: var(--text);
}

.h-hero {
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 0.96;
}
.h-section {
  font-size: var(--fs-section);
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.02;
}
.h-card {
  font-size: var(--fs-card);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.1;
}

.italic { font-style: italic; font-weight: 600; }

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text);
}

.eyebrow-num {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow-num::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), opacity 0.25s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: var(--text);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--text);
  opacity: 1;
  transform: translateY(-1px);
}
.btn-primary .arr { color: var(--gold); transition: transform 0.3s var(--ease); }
.btn-primary:hover .arr { transform: translateX(4px); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover {
  background: var(--text);
  color: var(--bg);
  opacity: 1;
}

.btn-light {
  background: var(--bg);
  color: var(--text);
}
.btn-light:hover {
  background: var(--bg-cool);
  opacity: 1;
  transform: translateY(-1px);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
  transition: gap 0.3s var(--ease), border-color 0.3s var(--ease);
}
.text-link span { color: var(--gold); }
.text-link:hover {
  gap: 0.85rem;
  border-color: var(--gold-deep);
  opacity: 1;
}

/* ---- Header (larger logo) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 239, 230, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 2px solid rgba(184, 134, 11, 0.45);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: rgba(184, 134, 11, 0.55);
  background: rgba(244, 239, 230, 0.94);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  gap: 2rem;
}
.nav-logo img {
  height: 56px;
  width: auto;
  display: block;
}
.nav-logo {
  flex-shrink: 0;
  min-width: 0;
}
@media (min-width: 768px) {
  .nav { padding: 0.85rem 0; }
  .nav-logo img { height: 72px; }
}
.nav-links {
  display: none;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: none; }
/* v41: nav-links + CTA were showing at 768px but the total content
   (logo + 4 nav items + CTA button) exceeded the viewport between
   768-836px, clipping the CTA. Pushed the breakpoint up so the
   hamburger menu handles narrow widths instead. */
@media (min-width: 880px) {
  .nav-links, .nav-cta { display: flex; }
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
@media (min-width: 880px) { .menu-toggle { display: none; } }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 60;
  padding: 5rem 1.5rem 2rem;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  display: flex;
  flex-direction: column;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu .menu-close {
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  font-size: 1.6rem;
  font-family: var(--font-display);
}
.mobile-menu ul { list-style: none; }
.mobile-menu li {
  border-bottom: 1px solid var(--border);
}
.mobile-menu li a {
  display: block;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
}
.mobile-menu .btn { margin-top: 2rem; align-self: flex-start; }

/* ---- Chessboard background pattern (subtle but visible) ---- */
.chess-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    conic-gradient(
      rgba(60, 42, 28, 0.05) 0deg 90deg,
      transparent 90deg 180deg,
      rgba(60, 42, 28, 0.05) 180deg 270deg,
      transparent 270deg 360deg
    );
  background-size: 130px 130px;
  background-position: 0 0;
  mask-image: linear-gradient(to bottom, black 20%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 90%);
}

/* ---- Chess piece icons (Staunton silhouettes, 810x810 viewBox) ---- */
.chess-icon {
  width: 60px;
  height: auto;
  color: var(--text);
  display: block;
  margin-bottom: 1.25rem;
  transition: transform 0.4s var(--ease);
}

/* Hero knight (giant decorative element) */
.hero-knight {
  position: absolute;
  width: 360px;
  height: auto;
  color: var(--text);
  opacity: 0.08;
  pointer-events: none;
  right: 4%;
  top: 8%;
  z-index: 0;
}
@media (min-width: 1100px) {
  .hero-knight {
    width: 480px;
    right: 6%;
    top: 6%;
    opacity: 0.09;
  }
}
@media (max-width: 767px) {
  .hero-knight {
    width: 220px;
    right: -30px;
    top: 60%;
    opacity: 0.07;
  }
}

/* CTA king watermark */
.cta-king {
  position: absolute;
  width: 320px;
  height: auto;
  color: var(--text);
  opacity: 0.18;
  pointer-events: none;
  right: 6%;
  bottom: 0;
  z-index: 0;
}
@media (min-width: 1100px) {
  .cta-king {
    width: 460px;
    bottom: 0;
    opacity: 0.15;
  }
}
/* On narrow/portrait screens the king sits behind the copy; fade it so text stays legible */
@media (max-width: 760px) {
  .cta-king { opacity: 0.06; }
}
.advisory-mark {
  position: absolute;
  width: 90px;
  height: auto;
  color: var(--text);
  opacity: 0.12;
  pointer-events: none;
  top: 4rem;
  right: 6%;
}
/* From the two-column layout up, the mark sits in the title column beneath the
   heading (always empty there) instead of the section's right edge, where it
   collided with the text column at mid widths (v125). */
@media (min-width: 900px) {
  .pillar-detail .advisory-mark {
    top: auto;
    right: auto;
    bottom: var(--rhythm);
    left: max(1.5rem, calc((100% - var(--container)) / 2 + 1.5rem));
    width: 150px;
  }
}
@media (min-width: 1200px) {
  .pillar-detail .advisory-mark { width: 180px; }
}

/* ---- Hero (bigger, bolder) ---- */
.hero {
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero { padding: 7rem 0 9rem; }
}
.hero > .container { position: relative; z-index: 2; }

/* v20: hero background image — brighter source means less filter compensation needed. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(244, 239, 230, 0.82) 0%,
    rgba(244, 239, 230, 0.55) 32%,
    rgba(244, 239, 230, 0.12) 60%,
    transparent 80%);
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('assets/flavour-hero-bg.webp');
  background-size: cover;
  background-position: center 60%;
  opacity: 0.24;
  filter: saturate(0.78) contrast(0.96);
  /* Fade out at top and bottom so headline area + section transition stay clean */
  mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 70%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 70%, transparent 98%);
}
@media (min-width: 1100px) {
  .hero-image { opacity: 0.26; }
}

/* Hero chess-bg — hidden when hero-image is present.
   Map image carries the atmospheric texture solo. */
.hero .chess-bg { display: none; }
/* Hero knight SVG — sits above image */
.hero-knight { z-index: 1; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
}
.hero-headline {
  max-width: 18ch;
  margin-bottom: 2.5rem;
}
.hero-headline .italic { font-style: italic; color: var(--gold); }
.hero-sub {
  max-width: 56ch;
  margin-bottom: 3rem;
  color: var(--text);
  font-size: var(--fs-lead);
  font-weight: 500;
}

.hero-accent {
  color: inherit;
  font-style: italic;
}

.hero-cred {
  color: inherit;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.hero-rule {
  margin-top: 5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(184, 134, 11, 0.45);
}
.hero-rule .meta {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text);
  font-weight: 600;
}
@media (min-width: 880px) {
  .hero-rule .meta { font-size: 0.9rem; }
}

/* ---- Section header ---- */
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-strong);
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: end;
  }
  /* v33: asymmetric variant for sections where the title is short
     (e.g. "Team.") and the blurb is long. The default 1fr 1fr gives the
     5-character title a 50% column which reads as awkward whitespace.
     v34: also drop the 50ch max-width cap on the blurb so it fills the
     wider right column, matching the right-edge alignment of paragraphs
     in surrounding sections (about-body, team-member bio). */
  .section-head--asymmetric {
    grid-template-columns: 2fr 8fr;
    align-items: center;
  }
  .section-head.section-head--asymmetric .head-blurb { max-width: none; }
}
.section-head .head-title { max-width: 18ch; }
.section-head .head-blurb {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 50ch;
  font-weight: 500;
}
/* v43-v45: drop section-head bottom-border where it would create a
   redundant double horizontal rule with a bordered grid below.
   - .consider: consider-items have border-top (v43)
   - .services (home Pillars): .pillars has border-top (v44)
   - .team-list (About Team): .team-member has border-top (v44)
   - .engagement (friction sections): .engagement-grid has border-top (v45) */
.consider .section-head,
.services .section-head,
.team-list .section-head,
.engagement .section-head {
  padding-bottom: 0;
  margin-bottom: 4rem;
  border-bottom: none;
}
.team-list .section-head { margin-bottom: 2rem; }

/* ---- Consider section (limestone) ---- */
.consider {
  background: var(--bg-cool);
  position: relative;
  overflow: hidden;
}
.consider-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .consider-list { grid-template-columns: repeat(3, 1fr); }
}
.consider-item {
  padding: 2.5rem 0;
  border-top: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.consider-item:last-child { border-bottom: 1px solid var(--border-strong); }
@media (min-width: 768px) {
  .consider-item {
    padding: 2.5rem 2.5rem 2.5rem 0;
    border-bottom: 1px solid var(--border-strong);
    border-right: 1px solid rgba(184, 134, 11, 0.42);
  }
  .consider-item:nth-child(1) { padding-left: 0; }
  .consider-item:nth-child(2) { padding-left: 2.5rem; }
  .consider-item:nth-child(3) {
    padding-left: 2.5rem;
    padding-right: 0;
    border-right: none;
  }
}
.consider-num {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  display: block;
  margin-bottom: 1rem;
}
.consider-q {
  font-family: var(--font-display);
  font-size: var(--fs-prose);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
}

/* ---- Approach (maturity curve) ---- */
.approach {
  background: var(--bg-cool);
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}
.approach .chess-bg {
  opacity: 0.28;
}
.approach > .container { position: relative; z-index: 1; }
.approach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 900px) {
  .approach-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}
.approach-col {
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
/* Mobile (stacked): keep the full gap to the band above the first stage and
   below the last stage; the smaller base padding tightens the gaps between stages. */
.approach-col:first-child { padding-top: 5rem; }
.approach-col:last-child { padding-bottom: 5rem; border-bottom: none; }
@media (min-width: 900px) {
  .approach-col {
    padding: 4.5rem 0;
    border-bottom: none;
  }
  /* Single row: same 4.5rem rhythm as every other section edge and band gap */
  .approach-col:first-child { padding-top: 4.5rem; }
  .approach-col:last-child { padding-bottom: 4.5rem; }
  /* Vertical separator centered in each gap (1.5rem from each column edge) */
  .approach-col:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 4.5rem;
    bottom: 4.5rem;
    right: -1.5rem;
    width: 1px;
    background: var(--border);
  }
}
.approach-col .chess-icon {
  margin-bottom: 1.5rem;
  color: var(--text);
  width: 68px;
}
.approach-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 1rem;
}
.approach-stage {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 2.7vw, 2.4rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: -0.012em;
}
.approach-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.approach-list li {
  font-size: 0.98rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-weight: 500;
}
.approach-list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold);
  flex-shrink: 0;
  transform: translateY(-3px) rotate(45deg);
}

/* ---- Services pillars ---- */
.services {
  background: transparent;
  padding-top: 0;
}
/* v46: tighter top padding because the knight-marble banner inside
   this section already provides visual breathing room. Default section
   padding (7.5rem top) + banner margin-top (3.5rem) + approach padding-
   bottom (7.5rem) was stacking to ~18rem between the Approach stages
   and the banner. */
/* v54: knight banner sits inside services container — uses default section
   top padding for breathing room from previous section, plus a margin-bottom
   for proper separation from the pillars grid below. Matches the pillar-accent
   pattern on the services page. */
.services .section-banner {
  margin: 0 0 3.5rem;
}
@media (min-width: 768px) {
  .services .section-banner { margin: 0 0 4.5rem; }
}
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(184, 134, 11, 0.42);
}
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
.pillar {
  padding: 3rem 0;
  border-bottom: 1px solid var(--border-strong);
  position: relative;
  transition: background 0.4s var(--ease);
}
@media (min-width: 768px) {
  .pillar { padding: 3rem 3rem 3rem 0; }
  .pillar:nth-child(odd) { border-right: 1px solid rgba(184, 134, 11, 0.42); }
  .pillar:nth-child(even) { padding-left: 3rem; padding-right: 0; }
}
.pillar-num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
}
.pillar-title {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.012em;
}
.pillar-blurb {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  max-width: 42ch;
  font-weight: 500;
}
.pillar-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}
.pillar-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.pillar-list li:not(:last-child)::after {
  content: '·';
  color: var(--border-strong);
}

/* ---- Engagement model ---- */
.engagement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(184, 134, 11, 0.42);
  border-bottom: 1px solid rgba(184, 134, 11, 0.42);
}
@media (min-width: 768px) {
  .engagement-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .engagement-grid { grid-template-columns: repeat(4, 1fr); }
}
.engage-item {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--border);
}
.engage-item:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .engage-item {
    padding: 2.5rem 1.5rem 2.5rem 0;
    border-bottom: 1px solid var(--border);
  }
  .engage-item:nth-child(odd) { border-right: 1px solid rgba(184, 134, 11, 0.42); }
  .engage-item:nth-child(even) { padding-left: 1.5rem; padding-right: 0; }
  /* last row (items 3-4) must not add their own bottom border on top of the
     grid's strong bottom border, or the bottom line doubles in width */
  .engage-item:nth-last-child(2) { border-bottom: none; }
}
/* v46: at the 4-column breakpoint, the 2-col odd/even padding pattern
   collapses the right buffer on cards 2 and 4. Reset to a uniform
   pattern where every card has 1.5rem on both sides except the
   container edges, with vertical dividers from border-right on the
   first three cards. */
@media (min-width: 1100px) {
  .engage-item,
  .engage-item:nth-child(odd),
  .engage-item:nth-child(even) {
    padding: 2.5rem 1.5rem;
    border-right: 1px solid rgba(184, 134, 11, 0.42);
    border-bottom: none;
  }
  .engage-item:first-child { padding-left: 0; }
  .engage-item:last-child {
    padding-right: 0;
    border-right: none;
  }
}
@media (min-width: 1100px) {
  .engage-item {
    padding: 2.5rem 2rem 2.5rem 0;
    border-bottom: none;
    border-right: 1px solid rgba(184, 134, 11, 0.42);
  }
  .engage-item:nth-child(2),
  .engage-item:nth-child(3) {
    padding-left: 2rem;
  }
  .engage-item:nth-child(4) {
    padding-left: 2rem;
    padding-right: 0;
    border-right: none;
  }
}
.engage-num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 1rem;
}
.engage-title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  letter-spacing: -0.008em;
}
.engage-blurb {
  font-size: 0.98rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---- Testimonials section ---- */
.testimonials {
  background: var(--bg-cool);
  position: relative;
  overflow: hidden;
}
.testimonials .chess-bg {
  opacity: 0.32;
}
.testimonials > .container { position: relative; z-index: 1; }
.testimonials-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text);
  font-weight: 600;
}
.testimonials-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.testimonials-headline {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.0;
  color: var(--text);
  max-width: 18ch;
  margin-bottom: 4rem;
}
.testimonials-headline .italic { font-style: italic; }
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(184, 134, 11, 0.42);
  border-bottom: 1px solid rgba(184, 134, 11, 0.42);
}
@media (min-width: 900px) {
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}
.testimonial {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(184, 134, 11, 0.42);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
}
.testimonial:last-child { border-bottom: none; }
@media (min-width: 900px) {
  /* Cells are equal height in the 3-up grid; pin the citation to the bottom so
     names align across columns regardless of quote length. */
  .testimonial-grid .testimonial .testimonial-cite { margin-top: auto; }
  .testimonial {
    padding: 2.5rem 2rem 2.5rem 0;
    border-bottom: none;
    border-right: 1px solid rgba(184, 134, 11, 0.42);
  }
  .testimonial:nth-child(2) { padding-left: 2rem; }
  .testimonial:nth-child(3) {
    padding-left: 2rem;
    padding-right: 0;
    border-right: none;
  }
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.42rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}
.testimonial-cite {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  font-style: normal;
  display: block;
}
.testimonial-cite a {
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.testimonial-cite a:hover {
  border-bottom-color: var(--gold-deep);
}
.testimonial-role {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* ---- CTA banner (warm stone feature band, gold-framed) ---- */
.cta-banner {
  background: var(--bg-stone);
  color: var(--text);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(184, 134, 11, 0.42);
  border-bottom: 1px solid rgba(184, 134, 11, 0.42);
}
.cta-banner .cta-eyebrow { color: var(--gold-deeper); }
.cta-banner .container { position: relative; z-index: 1; }
.cta-headline {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 0.98;
  margin-bottom: 2rem;
  color: var(--text);
  max-width: 18ch;
}
.cta-headline .italic { font-style: italic; }
.cta-headline .italic.accent { color: var(--gold); }
.cta-sub {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: 3rem;
  font-weight: 500;
}
.cta-actions {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Footer (light limestone) ---- */
.site-footer {
  background: var(--bg);
  color: var(--text-muted);
  padding: 5rem 0 2rem;
  border-top: 1px solid rgba(184, 134, 11, 0.42);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}
/* v42: 4-column grid only at widths wide enough that the logo column
   doesn't get squeezed. Below 880px, footer uses a 2-column layout
   (logo+tag, then nav columns stacked underneath). */
@media (min-width: 880px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
  }
}
.footer-logo img {
  height: 64px;
  width: auto;
  margin-bottom: 1.5rem;
  display: block;
  /* v42: object-fit preserves the natural aspect ratio without forcing
     a min-width that breaks the grid columns at certain viewports.
     Previous fix (min-width: 146px) caused the logo's column to overflow
     into adjacent footer columns, creating an overlap. */
  object-fit: contain;
  object-position: left center;
}
.footer-tag {
  font-size: 0.95rem;
  max-width: 36ch;
  color: var(--text-muted);
  font-weight: 500;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col li { color: var(--text); font-weight: 500; }
.footer-col a { color: var(--text); font-weight: 500; }
.footer-col a:hover { color: var(--gold-deep); opacity: 1; }
.footer-col em { font-style: normal; font-size: 0.94em; }
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}
@media (min-width: 768px) {
  .footer-meta { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer-meta a { border-bottom: 1px dotted rgba(60, 42, 28, 0.32); padding-bottom: 1px; color: var(--text-muted); }
.footer-meta a:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* ---- Page hero (sub-pages) ---- */
.page-hero {
  padding: 5rem 0 4rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero > .container { position: relative; z-index: 1; }
/* v32: subtle cream wash overlay behind text on imaged page-heroes.
   Sits between image (z=0) and text container (z=1) at z=0 with the image.
   Vignettes from transparent at top to a soft cream wash at the bottom
   where the lead paragraph sits, improving readability without dimming
   the atmospheric top of the image. */
.page-hero-imaged::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(244, 239, 230, 0.80) 0%,
      rgba(244, 239, 230, 0.52) 32%,
      rgba(244, 239, 230, 0.12) 60%,
      transparent 80%),
    linear-gradient(to bottom,
      transparent 0%,
      transparent 55%,
      rgba(244, 239, 230, 0.40) 82%,
      rgba(244, 239, 230, 0.60) 100%);
}
@media (min-width: 768px) {
  .page-hero { padding: 8rem 0 6rem; }
}
.page-hero h1 {
  font-size: var(--fs-hero);
  max-width: 16ch;
  margin-bottom: 1.5rem;
  letter-spacing: -0.018em;
}
.page-hero h1.h1-wide { max-width: 14ch; }
.page-hero h1 .italic { color: inherit; }
.page-hero h1 .italic.accent { color: var(--gold); }
.page-hero .lead { max-width: 56ch; }
/* v31: Imaged page-heroes need fuller text color so the lead reads cleanly
   over the photographic background (the muted color was disappearing into
   mid-tone areas of the image). */
.page-hero-imaged .lead { color: var(--text); }

/* v21: page-hero with image background — parallels home .hero/.hero-image. */
.page-hero-imaged { padding: 6rem 0 5rem; }
@media (min-width: 768px) {
  .page-hero-imaged { padding: 9rem 0 7rem; }
}
/* Services hero is the only one followed directly by a band graphic. Extend its
   bottom so the distance from the hero text down to the band is at least the
   distance from the header down to the hero text, smoothing the transition. */
/* When a framed band sits flush beneath the hero (Services), the band's own
   top line is the seam — the hero must not also draw one, or it doubles. */
.page-hero.page-hero--band-below { border-bottom: none; }
.page-hero-imaged .chess-bg { display: none; }
.page-hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  /* default background-position can be overridden inline per page */
  background-position: center center;
  opacity: 0.22;
  filter: saturate(0.78) contrast(0.96);
  /* Fade out top + bottom so headline area + section transition stay clean */
  mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 70%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 70%, transparent 98%);
}
@media (min-width: 1100px) {
  .page-hero-image { opacity: 0.36; }
}
/* Page-specific tonal adjustments. Darker source images need higher opacity
   plus a brightness lift so they don't read as a grey wash on the cream bg. */
.page-hero-image--services {
  background-image: url('assets/flavour-services-hero.webp');
  background-position: center 65%;
  opacity: 0.22;
  filter: saturate(0.78) contrast(0.92) brightness(1.20);
}
.page-hero-image--about {
  background-image: url('assets/flavour-boardroom.webp');
  background-position: center 75%;
}
.page-hero-image--contact {
  background-image: url('assets/flavour-knight-parchment.webp');
  background-position: center 50%;
}
/* hero eyebrow ("About" / "Services" / "Contact") spacing */
.page-hero .eyebrow-num { margin-bottom: 2rem; }
@media (min-width: 1100px) {
  .page-hero-image--services { opacity: 0.24; }
}

/* About page body section — two-column lede + supporting text */
.about-body {
  background: var(--bg-cool);
  padding: var(--rhythm) 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) {
  .about-body { padding: var(--rhythm) 0; }
}
.about-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .about-body-grid {
    grid-template-columns: 6fr 5fr;
    gap: 5rem;
  }
}
.about-body-col:last-child::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.75rem;
}
.about-lede {
  font-family: var(--font-display);
  font-size: var(--fs-prose);
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -0.005em;
}
@media (min-width: 900px) {
  .about-lede { max-width: 26ch; }
}
.about-body-col p + p { margin-top: 1.25rem; }

/* ---- Services page expanded ---- */
.pillar-detail {
  padding: var(--rhythm) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.pillar-detail:last-of-type { border-bottom: none; }
.pillar-detail--cool { background: var(--bg-cool); }
.pillar-detail .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 900px) {
  .pillar-detail .grid {
    grid-template-columns: 4fr 8fr;
    gap: 5rem;
  }
}
.pillar-detail h2 {
  font-size: var(--fs-section);
  margin-bottom: 1rem;
  letter-spacing: -0.012em;
}
.pillar-detail .pillar-intro { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2rem; max-width: 56ch; font-weight: 500; }
.pillar-detail-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 600px) {
  .pillar-detail-list { grid-template-columns: 1fr 1fr; }
}
.pillar-detail-list li {
  padding: 1.25rem 0;
  font-size: 0.98rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-weight: 500;
}
@media (min-width: 600px) {
  .pillar-detail-list li:nth-child(odd) { padding-right: 1.5rem; }
  .pillar-detail-list li:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid rgba(184, 134, 11, 0.42); }
}
.pillar-detail-list li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  flex-shrink: 0;
  transform: translateY(-2px) rotate(45deg);
}

/* ---- Team page ---- */
.firm-intro {
  padding: 5rem 0 3rem;
  border-bottom: 1px solid var(--border);
}
.firm-intro p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-prose);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--text);
  max-width: 38ch;
}

.team-list {
  padding: var(--rhythm) 0;
}
.team-member {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 4rem 0 2rem;
  align-items: start;
}
@media (min-width: 900px) {
  .team-member {
    grid-template-columns: 3fr 9fr;
    gap: 4.5rem;
    padding: 4rem 0 2rem;
  }
}
.team-portrait {
  background: var(--bg-cool);
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  max-width: 320px;
}
.team-portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(0.98) brightness(0.99) sepia(0.03); }
.team-portrait .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.team-meta-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.team-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.05;
  margin: 0;
}
.team-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
}
.team-social {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  align-self: flex-end;
  transform: translateY(-0.05rem);
}
.team-social li { margin: 0; }
.team-social a {
  display: inline-flex;
  color: var(--gold-deep);
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.team-social a:hover { opacity: 1; color: var(--gold); }
.team-social a:hover,
.team-social a:focus-visible { opacity: 1; }
.team-social svg { width: 19px; height: 19px; display: block; fill: currentColor; }
@media (max-width: 540px) {
  .team-social { margin-left: 0; }
}
.team-bio p { color: var(--text-muted); margin-bottom: 1rem; max-width: 68ch; font-weight: 500; }
@media (min-width: 1100px) {
  .team-bio {
    column-count: 2;
    column-gap: 4.5rem;
  }
  .team-bio p {
    max-width: none;
    break-inside: avoid;
  }
}

.team-creds {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.team-creds-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 1rem;
}
.team-creds-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
}
@media (min-width: 600px) {
  .team-creds-list { grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
}
.team-creds-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.team-creds-list li::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--gold);
  flex-shrink: 0;
  transform: translateY(-2px) rotate(45deg);
}
.team-creds-list a,
.team-creds-list a:visited {
  display: block;
  flex: 1;
  color: inherit;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  opacity: 1;
  transition: opacity 0.2s var(--ease);
}
.team-creds-list a:hover {
  color: var(--gold-deep);
}
.team-creds-list a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Contact page ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 6fr 5fr; gap: 5rem; align-items: start; }
}
.contact-card {
  background: var(--bg);
  padding: 2rem 1.5rem;
  border: 1px solid rgba(184, 134, 11, 0.30);
}
.contact-card a.value { transition: color 0.2s var(--ease); }
.contact-card a.value:hover { color: var(--gold-deep); }
@media (min-width: 600px) {
  .contact-card { padding: 2.5rem; }
}
.contact-card h3 { font-size: 1.75rem; margin-bottom: 1rem; }
.contact-card p { color: var(--text-muted); margin-bottom: 2rem; font-weight: 500; }
.contact-detail {
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}
.contact-detail:last-child { border-bottom: 1px solid var(--border); }
.contact-detail .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.contact-detail .value {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: block;
}
@media (min-width: 600px) {
  .contact-detail .value { font-size: 1rem; }
}

/* Discovery booking column + "what to expect" list (Contact) */
.discovery { background: var(--bg-cool); padding: var(--rhythm) 0; }
.discovery-title { margin-bottom: 1.5rem; max-width: 16ch; }
.discovery-lead { margin-bottom: 2.5rem; }
.discovery-actions { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 3rem; }
.expect { padding: 2rem 0; border-top: 1px solid var(--border); }
.expect-label { margin-bottom: 1rem; }
.expect-list { list-style: none; display: grid; gap: 1rem; max-width: 52ch; }
.expect-item { display: flex; align-items: baseline; gap: 1rem; }
.expect-num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-deep);
  font-size: 0.95rem;
  min-width: 24px;
}
.expect-text { color: var(--text-muted); }

/* row wrapping a trailing text-link beneath a content block */
.text-link-row { margin-top: 3rem; }

/* ---- Reveal animations ---- */
.reveal {
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.reveal.in-view { opacity: 1; }
/* Belt and braces: if the observer script never runs, nothing stays hidden. */
.no-js .reveal { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- CTA banner eyebrow (was inline white, now uses panel default) ---- */
.cta-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text);
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.cta-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* ============================================
   HOVER ANIMATIONS — DEH-style panel interaction
   ============================================ */

/* Consider items — subtle background tint + indent on hover */
.consider-item {
  transition: background 0.4s var(--ease), padding-left 0.4s var(--ease);
  position: relative;
}
@media (hover: hover) and (min-width: 768px) {
  .consider-item:hover {
    background: rgba(60, 42, 28, 0.035);
  }
  .consider-item .consider-q {
    transition: transform 0.4s var(--ease);
  }
  .consider-item:hover .consider-q {
    transform: translateX(6px);
  }
}

/* Approach columns — chess icon scales + lifts on hover.
   v22: removed the conflicting hover-line ::after — it collided with the
   column-separator ::after defined earlier (top: 3rem from rule 1 bled
   into rule 2's positioning, putting the line at the top for cols 1+2
   and at the bottom for col 3). Hover now just lifts the chess icon and
   nudges the stage label. */
.approach-col {
  transition: background 0.4s var(--ease);
  position: relative;
}
@media (hover: hover) {
  .approach-col:hover .chess-icon {
    transform: translateY(-4px) scale(1.04);
  }
  .approach-col:hover .approach-stage {
    transition: transform 0.4s var(--ease);
    transform: translateX(3px);
  }
}

/* Pillar cards — subtle background tint + arrow indication */
.pillar {
  transition: background 0.4s var(--ease), padding-left 0.4s var(--ease);
  position: relative;
}
.pillar .pillar-title {
  transition: transform 0.4s var(--ease);
  position: relative;
  display: inline-block;
}
/* v47: pillar-title is now wrapped in an <a>. The link should be
   visually invisible (inherits colour, no underline) so the existing
   whole-pillar hover behaviour (translate + arrow ::after) keeps doing
   the work. Pointer cursor signals interactivity. */
.pillar-title .pillar-link,
.pillar-title .pillar-link:visited {
  color: inherit;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.pillar-title .pillar-link:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
  border-radius: 2px;
}
/* v48: links on the hero meta strip (Finance Automation · Outsourced
   Finance · etc). Inherit the meta strip's small-caps, letter-spaced
   styling; subtle hover treatment via opacity, which suits the meta
   strip's typographic-label register better than an underline. */
.hero-rule .meta-link,
.hero-rule .meta-link:visited {
  color: inherit;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  opacity: 1;
  transition: opacity 0.2s var(--ease);
}
.hero-rule .meta-link:hover {
  color: var(--gold-deep);
  opacity: 1;
}
.hero-rule .meta-link:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
  border-radius: 2px;
}
.pillar .pillar-title::after {
  content: '';
  position: absolute;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 1px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
@media (hover: hover) and (min-width: 768px) {
  .pillar:hover {
    background: rgba(60, 42, 28, 0.03);
  }
  .pillar:hover .pillar-title {
    transform: translateX(4px);
  }
  .pillar:hover .pillar-title::after {
    opacity: 1;
    transform: translateY(-50%) translateX(8px);
  }
}

/* Engagement items — number lift + line accent */
.engage-item {
  transition: background 0.4s var(--ease);
  position: relative;
}
.engage-item .engage-num {
  transition: transform 0.4s var(--ease), letter-spacing 0.4s var(--ease);
  display: inline-block;
}
@media (hover: hover) {
  .engage-item:hover {
    background: rgba(60, 42, 28, 0.03);
  }
  .engage-item:hover .engage-num {
    letter-spacing: 0.28em;
  }
  .engage-item:hover .engage-title {
    transition: transform 0.4s var(--ease);
    transform: translateX(3px);
  }
}

/* Testimonial cards — gentle lift + quote shift */
.testimonial {
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.testimonial-quote {
  transition: transform 0.5s var(--ease);
}
@media (hover: hover) and (min-width: 900px) {
  .testimonial:hover {
    background: rgba(60, 42, 28, 0.035);
  }
  .testimonial:hover .testimonial-quote {
    transform: translateY(-3px);
  }
  /* About page pull-quote: keep the lift, drop the box shading */
  .about-testimonial:hover {
    background: transparent;
  }
}

/* Partners strip — homepage Reputation section
   Safari compatibility: explicit flex-basis, height-first sizing (not width-first),
   so logos are constrained by max-height even when image dimensions are large. */
/* Reputation logo wall — startup ecosystem and accreditations as one charcoal set.
   Row 1 (credentials & status): Chartered Accountants, Xero, TPB, AVOB.
   Row 2 (startup ecosystem): Startmate, Cicada Innovations, ThincLab.
   One framing rule under the headline, no divider between the rows. Each row
   centres and wraps; under 700px the whole set collapses to a tidy two-column grid. */
.logo-wall {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  margin-top: 2.5rem;
  padding: 2rem 0 3.5rem;
  border-top: 1px solid rgba(184, 134, 11, 0.42);
}
.logo-group { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.logo-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.logo-label::before, .logo-label::after {
  content: ""; width: 1.5rem; height: 1px; background: rgba(60, 42, 28, 0.3);
}
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem 3.5rem;
}
.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.logo-mark:hover { opacity: 1; transform: translateY(-2px); }
.logo-mark img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}
/* Per-mark optical sizing so wordmarks and seals read at a consistent weight */
.logo-caanz     { height: 74px; }  .logo-caanz img     { max-width: 172px; }
.logo-xero      { height: 60px; }
.logo-tpb       { height: 82px; }
.logo-avob      { height: 86px; }
.logo-startmate { height: 40px; }  .logo-startmate img { max-width: 220px; }
.logo-cicada    { height: 50px; }  .logo-cicada img    { max-width: 185px; }
.logo-thinclab  { height: 56px; }  .logo-thinclab img  { max-width: 215px; }

@media (max-width: 760px) {
  /* tablet band: keep four credentials on one line, ecosystem three across */
  .logo-wall { gap: 2.25rem; padding-bottom: 3rem; }
  .logo-row  { gap: 1.5rem 2.5rem; }
  .logo-caanz     { height: 56px; }  .logo-caanz img     { max-width: 134px; }
  .logo-xero      { height: 48px; }
  .logo-tpb       { height: 64px; }
  .logo-avob      { height: 66px; }
  .logo-startmate { height: 38px; }  .logo-startmate img { max-width: 195px; }
  .logo-cicada    { height: 46px; }  .logo-cicada img    { max-width: 172px; }
  .logo-thinclab  { height: 52px; }  .logo-thinclab img  { max-width: 195px; }
}
@media (max-width: 600px) {
  /* once four no longer fit comfortably, set credentials as a larger centred 2x2 */
  .logo-row:first-child {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: center;
    align-items: center;
    column-gap: 3rem;
    row-gap: 2.25rem;
  }
  .logo-caanz     { height: 64px; }  .logo-caanz img     { max-width: 150px; }
  .logo-xero      { height: 56px; }
  .logo-tpb       { height: 76px; }
  .logo-avob      { height: 78px; }
  .logo-startmate { height: 40px; }  .logo-startmate img { max-width: 205px; }
  .logo-cicada    { height: 50px; }  .logo-cicada img    { max-width: 182px; }
  .logo-thinclab  { height: 56px; }  .logo-thinclab img  { max-width: 205px; }
}
@media (max-width: 440px) {
  .logo-row:first-child { column-gap: 2.25rem; row-gap: 1.85rem; }
  .logo-row  { gap: 1.25rem 2rem; }
  .logo-caanz     { height: 54px; }  .logo-caanz img     { max-width: 124px; }
  .logo-xero      { height: 48px; }
  .logo-tpb       { height: 66px; }
  .logo-avob      { height: 68px; }
  .logo-startmate { height: 36px; }
  .logo-cicada    { height: 44px; }
  .logo-thinclab  { height: 48px; }
}
@media (max-width: 360px) {
  .logo-row:first-child { column-gap: 1.75rem; }
  .logo-caanz     { height: 46px; }
  .logo-xero      { height: 42px; }
  .logo-tpb       { height: 56px; }
  .logo-avob      { height: 58px; }
}
@media (max-width: 360px) {
  .logo-row:first-child { column-gap: 1.75rem; }
  .logo-caanz     { height: 46px; }
  .logo-xero      { height: 42px; }
  .logo-tpb       { height: 56px; }
  .logo-avob      { height: 58px; }
}

/* About page testimonial — editorial pull-quote treatment (showpiece, not body) */
.about-testimonial {
  padding: 0;
  border: none;
  gap: 1.75rem;
  position: relative;
  margin-top: 1.5rem;
}
.about-testimonial::before {
  content: "\201C";
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(6rem, 10vw, 9rem);
  line-height: 0.8;
  color: var(--gold);
  opacity: 0.30;
  position: absolute;
  top: -2rem;
  left: -0.5rem;
  pointer-events: none;
  z-index: 0;
}
.about-testimonial .testimonial-quote {
  position: relative;
  z-index: 1;
  font-size: clamp(1.7rem, 2.7vw, 2.4rem);
  line-height: 1.3;
  font-weight: 500;
  padding-top: 1.5rem;
}
.about-testimonial .testimonial-cite {
  position: relative;
  z-index: 1;
  padding-left: 0;
  border-left: none;
  margin-top: 0.5rem;
}
@media (min-width: 900px) {
  .about-testimonial {
    padding: 0;
    border-right: none;
  }
}
@media (max-width: 700px) {
  .about-testimonial::before { top: -0.8rem; }
}

/* Pillar detail (services page) — list item hover */
.pillar-detail-list li {
  transition: padding-left 0.3s var(--ease), background 0.3s var(--ease);
}
@media (hover: hover) {
  .pillar-detail-list li:hover {
    padding-left: 0.75rem;
    background: rgba(60, 42, 28, 0.03);
  }
}

/* Buttons — subtle scale on press */
.btn:active { transform: translateY(0) scale(0.98); }

/* Logo subtle hover */
.nav-logo {
  transition: opacity 0.3s var(--ease);
}
.nav-logo:hover {
  opacity: 0.75;
}

/* Hero rule meta — subtle width animation on hover */
.hero-rule {
  transition: border-color 0.4s var(--ease);
}

/* =========================================================
   Flavour images (v15)
   Banners on home page sections, accents on services pillars,
   bands on team/contact page heroes. Editorial framing.
   ========================================================= */

/* v17: Bring back some of the colour. Heavy desaturation in v16 lost the
   beauty of the source images. Now: moderate desaturation (about 70% of
   original colour), lighter cream wash, slightly higher opacity. Still
   reads as "complement", not "show piece". */

.section-banner,
.pillar-accent,
.page-hero-band {
  position: relative;
  overflow: hidden;
  background: var(--bg-cool);
}

/* Common image treatment */
.section-banner img,
.pillar-accent img,
.page-hero-band img {
  display: block;
  width: 100%;
  filter: saturate(0.88) contrast(1.0);
  opacity: 0.95;
}

/* Cream wash overlay — lighter than v16 (was 0.22, now 0.10) */
.section-banner::before,
.pillar-accent::before,
.page-hero-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(244, 239, 230, 0.10);
  z-index: 1;
}

/* Frame each band graphic with a hairline above and below — the same
   bracketing the Discovery section uses. The bands are section-width, so
   these run edge to edge. */
.section-banner,
.pillar-accent {
  border-top: 1px solid rgba(184, 134, 11, 0.42);
  border-bottom: 1px solid rgba(184, 134, 11, 0.42);
}

/* Section-banner: full-bleed band running edge to edge of the viewport.
   Height tracks each image's native proportion (so the full composition shows)
   until a cap, beyond which it crops rather than narrowing the band. Width is
   always 100% so the band stays edge to edge at any zoom. */
.section-banner {
  margin: 3rem 0 4rem;
  width: 100%;
}
@media (min-width: 768px) {
  .section-banner { margin: 4rem 0 5rem; }
}
.section-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.approach .section-head { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.approach   .section-banner { height: min(33.8vw, 760px); margin: 3.5rem 0 0; }
@media (min-width: 768px) { .approach .section-banner { margin-top: 4.5rem; } }
@media (max-width: 767px) {
  .approach .section-banner { height: 50vw; }
}
.services   .section-banner { height: min(39.9vw, 760px); }
@media (max-width: 767px) {
  .services .section-banner { height: 55vw; }
}
.engagement--banded { padding-top: 0; }
.engagement .section-banner { height: min(45.7vw, 760px); margin: 0 0 3.5rem; }
@media (min-width: 768px) {
  .engagement .section-banner { margin: 0 0 4.5rem; }
}

/* Pillar-accent: full-bleed band at the top of each pillar-detail section. */
.pillar-accent {
  margin: 0 0 3.5rem;
  width: 100%;
}
@media (min-width: 768px) {
  .pillar-accent { margin: 0 0 4.5rem; }
}
.pillar-accent img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pillar-detail--advisory .pillar-accent { height: min(33.7vw, 760px); }
.pillar-detail--cfo .pillar-accent { height: min(40vw, 760px); }
@media (max-width: 767px) {
  .pillar-detail--advisory .pillar-accent { height: 50vw; }
  .pillar-detail--cfo .pillar-accent { height: 55vw; }
}
.pillar-detail--cfo .pillar-accent img { object-position: center 30%; }
/* v66: knight/laptop band sits flush against the hero above it (no white space
   before Pillar I begins) with normal padding to the text below; dashboard band
   starts its section, cropped with headroom kept above the tablet. */
.pillar-detail--advisory { padding-top: 0; }
.pillar-detail--cfo { padding-top: 0; }

/* Pillar anchors sit on the inner container (not the section) so links land on the
   heading rather than the flavour photo; offset = sticky header + one rhythm unit. */
.pillar-detail > .container { scroll-margin-top: calc(80px + var(--rhythm)); }


/* Page-hero band: full-bleed strip between page-hero and next section. */
.page-hero-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-height: 360px;
}
@media (min-width: 768px) {
  .page-hero-band { max-height: 440px; }
}
.page-hero-band img { height: 100%; object-fit: cover; }
/* Bottom gradient fade for soft transition into next section */
.page-hero-band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 75%, rgba(244, 239, 230, 0.30) 100%);
  z-index: 2;
}



/* v77: mobile-only spacing (max 767px) — tighten oversized gaps around the
   homepage approach band and above the about-page portrait. */
@media (max-width: 767px) {
  .approach-col:first-child { padding-top: 3.5rem; }
  .approach-col:last-child { padding-bottom: 3.5rem; }
  .team-member { padding-top: 1.5rem; }
}

/* ---- Contact card: quiet alternate line ---- */
.contact-alt {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-strong, rgba(126, 102, 80, 0.25));
  font-size: 0.85rem;
  color: var(--text-soft);
}
.contact-alt a {
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 134, 11, 0.5);
}
.contact-alt a:hover {
  color: var(--gold-deep, #B8860B);
}

/* ---- Skip to content ---- */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 1000;
  padding: 0.75rem 1.25rem; background: var(--text); color: #fff;
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  border-radius: 999px; transition: top 0.2s ease-out;
}
.skip-link:focus { top: 1rem; outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- 404 ---- */
.notfound { padding: 6rem 0 5rem; min-height: 60vh; }
@media (min-width: 768px) { .notfound { padding: 9rem 0 7rem; } }
.notfound h1 { font-size: var(--fs-hero); max-width: 14ch; margin-bottom: 1.5rem; }
.notfound h1 .italic.accent { color: var(--gold); }
.notfound p { font-size: var(--fs-lead); color: var(--text-muted); max-width: 48ch; margin-bottom: 2.5rem; }
.notfound .btn + .btn { margin-left: 0.75rem; }

/* ---- Legal / long-form text pages (terms, tax practitioner information) ---- */
.container-text { max-width: var(--container-text); margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .container-text { padding: 0 3rem; } }
.legal { padding: 5rem 0 var(--rhythm); position: relative; }
@media (min-width: 768px) { .legal { padding: 7rem 0 var(--rhythm); } }
.legal-head { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--border); }
.legal-head .eyebrow-num { color: var(--gold-deep); margin-bottom: 1.5rem; }
.legal-h1 { font-size: var(--fs-section); max-width: 24ch; margin-bottom: 1.25rem; }
.legal-meta { font-size: 0.8125rem; color: var(--text-soft); font-weight: 500; letter-spacing: 0.01em; margin-bottom: 0.75rem; max-width: 60ch; }
@media (min-width: 768px) { .legal-meta { font-size: 0.875rem; } }
.legal-meta .sep { margin: 0 0.55em; color: var(--border-strong); }
.legal-meta-links { white-space: nowrap; }
@media (max-width: 767px) {
  .legal-meta-links { display: block; }
  .legal-meta-links > .sep:first-child { display: none; }
}
.legal-meta a, .legal-meta a:visited { color: inherit; text-decoration: none; font: inherit; -webkit-tap-highlight-color: transparent; transition: color 0.2s var(--ease); }
.legal-meta a:hover { color: var(--gold-deep); }
.legal-meta a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; }
.legal-meta strong { color: var(--text); font-weight: 600; }
.legal-download a, .legal-foot a, .version-links a, .legal-body a {
  font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border-strong); padding-bottom: 1px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.legal-download a:hover, .legal-foot a:hover, .version-links a:hover, .legal-body a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.legal-body { font-size: 1rem; line-height: 1.65; color: var(--text-muted); font-weight: 500; }
.legal-body p { margin-bottom: 1.1rem; }
.legal-body strong { color: var(--text); font-weight: 700; }
.legal-h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.65rem; line-height: 1.15; color: var(--text);
  display: grid; grid-template-columns: 2.75rem 1fr; align-items: baseline; margin: 2.75rem 0 1rem;
}
.legal-h2:first-child { margin-top: 0; }
.legal-h2-num { color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.clause { display: grid; grid-template-columns: 2.75rem 1fr; align-items: baseline; }
.clause-num { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.legal-foot { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); font-size: 0.95rem; }
mark.placeholder { background: rgba(184, 134, 11, 0.22); color: var(--text); padding: 0 0.2em; }
.version-list { list-style: none; margin: 0; padding: 0; }
.version-item { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.version-item:first-child { padding-top: 0; }
.version-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.version-name a { color: inherit; border-bottom: none; }
.version-current {
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep); border: 1px solid var(--gold-deep); border-radius: 999px; padding: 0.25rem 0.7rem 0.2rem; line-height: 1;
}
.version-date { margin: 0.35rem 0 0.6rem; }
.version-links { font-size: 0.95rem; }
.footer-scheme { font-size: 0.82rem; color: var(--text-muted); font-weight: 500; margin: 0; }
@media (min-width: 768px) { .footer-scheme { text-align: right; } }
.footer-legal { font-size: 0.82rem; }
.footer-legal a { color: var(--text-muted); border-bottom: 1px dotted rgba(60, 42, 28, 0.32); padding-bottom: 1px; }
.footer-legal a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
@media (max-width: 480px) {
  .legal-h2, .clause { grid-template-columns: 2.4rem 1fr; }
}