/* ==========================================================================
   GITAV — visual system (WARM VARIANT)
   --------------------------------------------------------------------------
   Same structure and copy as the primary build; a different temperature.
   Fraunces (soft optical axis) and Nunito Sans replace the editorial pairing,
   the ground is cream rather than white, corners are rounded, contrast is
   gentler, and text is set larger with more leading for easier reading.
   ==========================================================================

   ORIGINAL HEADER
   GITAV — visual system
   --------------------------------------------------------------------------
   Built to the conventions of the strategy and executive-search firms:
   white ground, two-tier grey text, brand colour rationed to links and one
   terminal band, a type scale with a compressed middle and a distant top,
   fixed image ratios, and no bulleted lists anywhere in the marketing pages.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Ground */
  --paper:      #FDFAF2;
  --bone:       #F3F0E3;   /* warm sand for alternating blocks */
  --sage:       #E9F1DF;   /* soft green for panels */
  --clay:       #B4653C;   /* warm accent, used only in small doses */
  --rule-c:     #E6E0CF;

  /* Two-tier text, both green-biased so they sit with the mark */
  --ink:        #3A3B31;   /* body */
  --ink-strong: #262A1D;   /* headlines */
  --grey:       #77735F;   /* secondary text AND every uppercase label */

  /* Brand — rationed. Links, one CTA, one terminal band. Never a heading. */
  --moss:       #4A8433;
  --forest:     #33502A;
  --sprout:     #B3E39C;   /* only ever on a dark ground */

  --serif: "Nunito", "Avenir Next Rounded", "Trebuchet MS", sans-serif;   /* display */
  --sans:  "Nunito Sans", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;

  --max:    66rem;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --block:  clamp(2.25rem, 4vw, 3.75rem);
  --rule:   1px solid var(--rule-c);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The masthead is sticky, so anchor jumps must clear it or the target's
     label lands underneath the header. */
  scroll-padding-top: 7rem;
  font-size: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
figure, blockquote { margin: 0; }

/* ---------- type ----------
   Scale: 17 / 19 / 21 / 24 — then a deliberate chasm — 40 / 56 / 88.
   The gap between text and display sizes is what reads as art direction. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.18;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.22; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.3; letter-spacing: -0.02em; }
h4 {
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  letter-spacing: 0; line-height: 1.4; color: var(--ink-strong); margin: 0;
}
p { margin: 0; }

.pair > .lead { max-width: none; }

.lead {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.6;
  color: var(--grey);
  max-width: 40rem;
}
.prose { max-width: 44rem; }
.prose p + p { margin-top: 1.25em; }
.muted { color: var(--grey); }
.small { font-size: .875rem; line-height: 1.6; }

/* Uppercase label — grey, never the brand colour. */
.label {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--moss);
  background: var(--sage);
  border-radius: 999px;
  padding: .4em .9em;
  width: fit-content;
  margin: 0;
}
.label--onDark { color: var(--forest); background: var(--sprout); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 62rem; }
.section { padding-block: var(--block); }
.section--tight { padding-block: clamp(2.5rem, 3.4vw, 3.5rem); }
.section + .section { border-top: var(--rule); }
.section--bone { background: var(--bone); }
.section--bone + .section, .section + .section--bone { border-top: 0; }

.split { display: grid; grid-template-columns: 1fr; gap: 1.5rem 4rem; align-items: start; }
@media (min-width: 64rem) { .split { grid-template-columns: 12rem minmax(0,1fr); gap: 0 5rem; } }
.split > * { min-width: 0; }

.stack { display: flex; flex-direction: column; min-width: 0; }
.stack > * { min-width: 0; }
.stack--xs { gap: .5rem; }
.stack--sm { gap: 1rem; }
.stack--md { gap: 1.75rem; }
.stack--lg { gap: 2.75rem; }

.grid { display: grid; gap: 2.5rem; }
.grid > * { min-width: 0; }
@media (min-width: 48rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 48rem) { .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 68rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 48rem) { .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 68rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2rem; } }

/* ---------- links and the single button ---------- */
.textlink {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-size: .9375rem; font-weight: 600; color: var(--moss);
  text-decoration: none; width: fit-content;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: opacity .18s ease;
}
.textlink:hover { opacity: .62; }
.textlink--onDark { color: var(--sprout); }
.textlink--plain { color: var(--ink-strong); border-color: var(--rule-c); }
.textlink--plain:hover { border-color: var(--ink-strong); opacity: 1; }
.textlink span[aria-hidden] { transition: transform .18s ease; }
.textlink:hover span[aria-hidden] { transform: translateX(3px); }

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.4rem;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--moss); color: #fff; }
.btn--primary:hover { background: var(--forest); }
.btn--ghost { background: transparent; color: var(--ink-strong); border-color: var(--ink-strong); }
.btn--ghost:hover { background: var(--ink-strong); color: #fff; }
.btn--light { background: #fff; color: var(--forest); }
.btn--light:hover { background: var(--sprout); }
.btn--outlineLight { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outlineLight:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: center; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--moss); outline-offset: 3px; border-radius: 6px;
}

/* ---------- masthead: quiet utility row above a title-case primary row ---------- */
.masthead { position: sticky; top: 0; z-index: 60; background: rgba(253,251,246,.94); backdrop-filter: blur(10px); border-bottom: var(--rule); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 6.5rem; }

.wordmark {
  display: inline-flex; align-items: center; gap: .9rem;
  text-decoration: none; color: var(--ink-strong);
}
.wordmark__mark { width: 2.6rem; height: auto; flex: none; }
.wordmark__type {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; padding-left: .14em;
  line-height: 1;
}

.nav { display: none; align-items: center; gap: 3.25rem; }
@media (min-width: 58rem) { .nav { display: flex; } }
.nav a {
  font-size: .9375rem; text-decoration: none; color: var(--ink);
  padding-block: .5rem; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink-strong); border-color: var(--rule-c); }
.nav a[aria-current="page"] { border-color: var(--ink-strong); color: var(--ink-strong); }

.menu-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0 8px;
  background: transparent; border: var(--rule); cursor: pointer;
}
@media (min-width: 58rem) { .menu-toggle { display: none; } }
.menu-toggle span { display: block; height: 1.5px; background: var(--ink-strong); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer { display: none; border-bottom: var(--rule); background: var(--paper); }
.drawer[data-open="true"] { display: block; }
@media (min-width: 58rem) { .drawer { display: none !important; } }
.drawer__inner { display: flex; flex-direction: column; padding-block: .5rem 1.5rem; }
.drawer a {
  font-family: var(--serif); font-weight: 700; font-size: 1.125rem; color: var(--ink-strong);
  text-decoration: none; padding-block: .7rem; border-bottom: var(--rule);
}

/* ---------- hero ---------- */
.hero { border-bottom: var(--rule); }

/* Photographic hero: headline sits in front of the image, bottom-left. */
.hero--image {
  position: relative; overflow: hidden; border-bottom: 0;
  min-height: clamp(20rem, 52vh, 40rem);
  display: grid; align-items: end;
  background: var(--forest);
}
.hero--image .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero--image::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(20,28,14,.86) 0%, rgba(20,28,14,.68) 24%, rgba(20,28,14,.40) 48%, rgba(20,28,14,.14) 74%, rgba(20,28,14,.03) 100%);
}
.hero--image .hero__inner { position: relative; z-index: 2; padding-block: 0 clamp(2.75rem, 4.25vw, 4.5rem); }
.hero--image h1 { color: #fff; font-size: clamp(1.875rem, 3.6vw, 2.875rem); }
.hero--image .textlink--plain { color: #fff; font-size: 1rem; border-color: rgba(255,255,255,.5); }
.hero--image .textlink--plain:hover { border-color: #fff; }
.hero__inner {
  display: grid; gap: 2.25rem; max-width: 64rem;
  padding-block: clamp(4rem, 9.35vw, 9.5rem) clamp(3.5rem, 6.8vw, 7rem);
}
.hero--statement .hero__inner { max-width: none; padding-block: clamp(3rem, 5.1vw, 5.5rem) clamp(2.25rem, 3.4vw, 3.5rem); }
.hero--statement h1 { font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.3; letter-spacing: -0.022em; font-weight: 700; text-wrap: pretty; }

.hero--inner .hero__inner { padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.25rem); gap: 1.25rem; }
.hero h1 em { font-style: italic; }

/* ---------- plate: every image is a numbered plate with a caption ---------- */
.plate { display: grid; gap: 1rem; }
.plate img { width: 100%; object-fit: cover; background: var(--bone); border-radius: 24px; box-shadow: 0 22px 44px -30px rgba(60,50,25,.5); }
.plate--wide img  { aspect-ratio: 16 / 9; }
.plate--tall img  { aspect-ratio: 2 / 3; }
.plate--square img{ aspect-ratio: 1 / 1; }
.plate--portrait img {
  /* Squarer than the 4:5 source, so the crop comes off the bottom of the frame
     rather than the face — hence the upward object-position. */
  aspect-ratio: 6 / 7;
  object-position: 50% 30%;
}
.plate--three img { aspect-ratio: 3 / 2; }
.plate--band img  { aspect-ratio: 21 / 9; }
.plate--wide-3 img { aspect-ratio: 3 / 2; }
.plate__caption {
  display: flex; gap: 1rem; align-items: baseline;
  padding-top: .85rem; border-top: var(--rule);
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey);
}
.plate__caption b { font-weight: 600; color: var(--ink-strong); flex: none; }

.bleed { width: 100%; }
.bleed img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 48rem) { .bleed img { aspect-ratio: 4 / 3; } }

.duo { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 62rem) {
  .duo { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); gap: 0 5.5rem; }
  .duo > .index--grid:not(.index--grid-3) { grid-template-columns: repeat(2, 1fr); }
  
  
}
.duo__head { display: grid; gap: 1rem; align-content: start; }

/* Equal halves, for two blocks that belong on one screen */
.pair { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 62rem) { .pair { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5.5rem; } }

/* ---------- claims: one statement per line, serif, hairline-separated ---------- */
.claims { display: grid; }
.claims > * {
  padding-block: clamp(1.1rem, 1.7vw, 1.6rem);
  border-top: var(--rule);
  font-family: var(--serif); font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 400; line-height: 1.2; letter-spacing: -0.022em;
  color: var(--ink-strong); text-wrap: balance;
}
.claims > *:last-child { border-bottom: var(--rule); }

/* ---------- index: roman-numeralled items, the one structural device ---------- */
.index { display: grid; gap: 0; }
.index__item {
  display: grid; gap: .55rem;
  padding-block: 1.6rem; border-top: var(--rule);
}
.index__item:last-child { border-bottom: var(--rule); }
@media (min-width: 52rem) {
  .index__item { grid-template-columns: 3.5rem minmax(0,15rem) minmax(0,1fr); gap: 0 2.5rem; align-items: baseline; }
}
.index__num {
  font-family: var(--serif); font-weight: 700; font-size: .9375rem; color: var(--grey);
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.index--grid { display: grid; gap: 1.25rem; border-top: 0; }
.section--bone .index--grid .index__cell { background: var(--paper); }
@media (min-width: 60rem) { .index--grid { grid-template-columns: repeat(4, 1fr); } }
.index--grid-3 { grid-template-columns: 1fr; }
@media (min-width: 60rem) { .index--grid-3 { grid-template-columns: repeat(3, 1fr); } }

.index--grid .index__cell {
  padding: 1.4rem; border-bottom: 0; display: grid; gap: .6rem; align-content: start;
  background: var(--bone); border-radius: 20px;
}


/* ---------- stats: numeral + 2-4 word label, no sentence ---------- */
.stats { display: grid; border-top: var(--rule); border-bottom: var(--rule); }
@media (min-width: 46rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 2rem 1.5rem 2.1rem 0; }
@media (min-width: 46rem) { .stat + .stat { border-left: var(--rule); padding-left: 1.75rem; } }
@media (max-width: 45.99rem) { .stat + .stat { border-top: var(--rule); } }
.stat__num {
  font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: .8rem; font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey);
}

/* ---------- card: fixed ratio, title, one sentence, link ---------- */
.card { display: grid; gap: 1.25rem; align-content: start; }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--bone); border-radius: 24px; }
.card__body { display: grid; gap: .65rem; }

.offer { display: grid; gap: .75rem; justify-items: start; background: var(--bone); border-radius: 20px; padding: 1.5rem; }
.offer .textlink { margin-top: .4rem; }
/* The whole panel is the control: one large button per service line. */
.offer--btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: var(--moss); color: #fff; text-decoration: none;
  border-radius: 20px; padding: 1.5rem 1.5rem;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.3; letter-spacing: -0.02em;
  transition: background-color .18s ease;
}
.offer--btn:hover { background: var(--forest); }
.offer--btn span[aria-hidden] { font-size: .8em; transition: transform .18s ease; }
.offer--btn:hover span[aria-hidden] { transform: translateX(4px); }

/* Two columns whose rows line up — label, heading, image, copy and button each
   share a baseline across both columns, however long the copy above them runs.
   Subgrid does it properly; the fallback still bottoms-out the button. */
.pair--equal { align-items: stretch; }
.pair--equal > .stack { height: 100%; }
.pair--equal .btn-row { margin-top: auto; justify-content: center; }

@media (min-width: 62rem) {
  @supports (grid-template-rows: subgrid) {
    .pair--equal { grid-template-rows: auto auto auto 1fr auto; }
    .pair--equal > .stack {
      display: grid; grid-row: span 5;
      grid-template-rows: subgrid; gap: 1.75rem;
    }
    .pair--equal .btn-row { margin-top: 0; align-self: start; }
  }
}

/* Centred columns — used on the closing band, where each column is a short
   destination rather than something to read left-to-right. */
.pair--centred > .stack { align-items: center; text-align: center; }
.pair--centred .btn-row { justify-content: center; }

/* Founder: a small portrait set against the quote, not a half-page image. */
.founder { display: grid; gap: 2rem; align-items: center; }
.founder .plate { max-width: 16rem; }
@media (min-width: 62rem) {
  .founder { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 0 4rem; }
}

/* Principles read as three marks, so the cell centres on its symbol. */
.principles .index__cell { justify-items: center; text-align: center; }

/* Principle marks on About — small, one per principle, never decorative filler. */
.principle__icon { width: 2rem; height: 2rem; color: var(--moss); }

/* The page's thesis. Set roughly twice the visual weight of the closing band:
   a display-scale headline, a larger secondary tier, and deeper blocking — with
   the headline and paragraph sharing the width instead of stacking into it. */
.section--statement { padding-block: calc(var(--block) * 1.0); }
/* Columns centre against each other, so neither floats to an edge and leaves a
   void in the opposite corner. The paragraph takes the larger share: at the
   previous split it ran ~45 characters a line, which read as cramped. */
.statement { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) {
  .statement { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: 0 5rem; }
}
.statement__head {
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
  line-height: 1.25; letter-spacing: -0.025em;
}
.statement__lead {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6; color: var(--grey); max-width: none;
}

/* Engagement plan: the numeral carries the step and the words get out of the way. */
.plan__num {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.plan__week {
  font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey);
}

/* ---------- terminal band: the one place the brand goes big ---------- */
.band { background: var(--forest); color: rgba(255,255,255,.92); position: relative; overflow: hidden;
        padding-block: calc(var(--block) * 0.58); }
.band h2, .band h3 { color: #fff; }
/* On the dark ground the secondary tier has to stay close to white: at .66 it
   fell to roughly 4.9:1, which is borderline even for large text. */
.band .lead, .band .muted { color: rgba(255,255,255,.86); }
.band .btn--outlineLight { border-color: rgba(255,255,255,.65); }
.band .btn--outlineLight:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.band__mark { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: min(44.2vw, 32rem); opacity: .07; pointer-events: none; }

/* ---------- quote ---------- */
.quote { display: grid; gap: 1.75rem; max-width: 48rem; }
.quote--lead blockquote { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; font-weight: 600; }
.quote blockquote {
  font-family: var(--serif); font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.45; letter-spacing: -0.02em; font-weight: 600; color: var(--ink-strong);
}
.quote figcaption { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }

/* ---------- FAQ ---------- */
.faq details { border-top: var(--rule); }
.faq details:last-of-type { border-bottom: var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
  font-size: 1.1875rem; font-weight: 600; color: var(--ink-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 1.5px solid var(--grey); border-bottom: 1.5px solid var(--grey);
  transform: rotate(45deg) translate(-3px,-3px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
.faq details > p { padding-bottom: 1.4rem; color: var(--grey); max-width: 42rem; }

/* ---------- table ---------- */
.tablewrap { overflow-x: auto; }
table.compare { width: 100%; border-collapse: collapse; min-width: 34rem; }
table.compare th, table.compare td { text-align: left; font-size: 1.125rem; padding: 1.1rem 1.5rem 1.1rem 0; border-bottom: var(--rule); vertical-align: top; }
table.compare thead th {
  font-size: .75rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--grey); border-bottom: 1px solid var(--ink-strong); padding-bottom: .8rem;
}
table.compare td:first-child { color: var(--ink-strong); }

/* ---------- footer ---------- */
.footer { background: #2A3623; color: rgba(255,255,255,.6); padding-block: 4rem 2rem; }
.footer a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: 3rem; }
@media (min-width: 52rem) { .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer .wordmark, .footer .wordmark__type { color: #fff; }
.footer .wordmark__type { font-size: 1.5rem; }
.footer .wordmark__mark { width: 2.1rem; }
.footer h4 { color: #fff; font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .5rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: 1.0625rem; }
.footer__base {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: center;
  font-size: .78125rem; color: rgba(255,255,255,.42);
}

/* ---------- draft notes ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.steps li {
  display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: baseline;
  padding: .9rem 0; border-top: var(--rule); color: var(--grey); font-size: .9375rem;
}
.steps li:last-child { border-bottom: var(--rule); }
.steps li b { font-family: var(--serif); font-weight: 700; color: var(--rule-c); }
.steps li[data-state="active"] { color: var(--ink-strong); font-weight: 600; }
.steps li[data-state="active"] b, .steps li[data-state="done"] b { color: var(--moss); }

.sidenote { background: var(--sage); border-radius: 20px; padding: 1.75rem; display: grid; gap: .6rem; }
.sidenote h4 { font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; color: var(--grey); }

.progress { height: 4px; border-radius: 999px; background: var(--rule-c); overflow: hidden; }
.progress__bar { height: 100%; width: 25%; border-radius: 999px; background: var(--moss); transition: width .3s ease; }

/* ==========================================================================
   Forms
   ========================================================================== */
/* On the two form pages the header is a signpost, not a hero — it should not
   push the first input most of a screen down. */
.hero--compact .hero__inner { padding-block: 1.25rem 1rem; gap: .5rem; }
.hero--compact h1 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.hero--compact + .section { padding-top: 1.75rem; }

/* Both forms are a single column now — no step sidebar to lay out around. */
.formsingle { max-width: 44rem; }
/* Group headings inside a single-page form — a rule above each keeps the
   sections legible now that they are no longer separate steps. */
.formgroup { margin-top: .5rem; padding-top: 1.1rem; border-top: var(--rule); }

/* Services settles onto each section as you scroll. Proximity rather than
   mandatory: the practices block runs taller than a laptop viewport, and a
   mandatory snap makes an oversized section awkward to read to the bottom. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.snap-section) { scroll-snap-type: y proximity; }
  .snap-section { scroll-snap-align: start; }
}

.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field > label, .field > .field__legend { font-size: .9375rem; font-weight: 600; color: var(--ink-strong); }
.field__hint { font-size: .875rem; color: var(--grey); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="url"], .field select, .field textarea {
  width: 100%; padding: .55rem .8rem; background: #fff;
  border: 1px solid var(--rule-c); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(20,36,15,.08);
}
.field[data-invalid="true"] input, .field[data-invalid="true"] select,
.field[data-invalid="true"] textarea, .field[data-invalid="true"] .choices { border-color: #A5391F; }
.field__error { font-size: .8125rem; color: #A5391F; font-weight: 600; }

.choices { display: grid; gap: .4rem; }
@media (min-width: 40rem) { .choices--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.choice {
  display: grid; grid-template-columns: 1.05rem 1fr; gap: .65rem; align-items: start;
  padding: .55rem .75rem; background: #fff; border: 1px solid var(--rule-c); border-radius: 10px; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--grey); }
.choice input { margin: .3rem 0 0; accent-color: var(--forest); width: 1.05rem; height: 1.05rem; }
.choice:has(input:checked) { border-color: var(--moss); background: var(--bone); }
.choice span { font-size: .9375rem; line-height: 1.4; }
.choice small { display: block; color: var(--grey); font-size: .8125rem; margin-top: .15rem; }

.formnav { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 1rem; border-top: var(--rule); margin-top: .75rem; }
.formnav [data-action="next"], .formnav [data-action="submit"] { margin-left: auto; }

.formdone { display: none; }
.formdone[data-visible="true"] { display: grid; gap: 1.5rem; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }