/* ============================================================
   FIRECLAY CAPITAL — SITE STYLES
   Restrained corporate-classic. Bone-dominant above the footer,
   Ember as sparing accent, borderless blocks, centered alignment.
   Footer stays dark Forest + Ember — the family-of-sites common
   thread and the only dark surface on the site.
   ============================================================ */

/* ---------- WEBFONTS ---------- */
@font-face {
  font-family: "Tinos";
  src: url("../fonts/Tinos-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  /* Brand */
  --fc-forest:          #042e2a;
  --fc-forest-700:      #14453f;
  --fc-forest-gradient: linear-gradient(160deg, var(--fc-forest) 0%, var(--fc-forest-700) 100%);
  --fc-ember:           #b55219;
  --fc-ember-hover:     #9a4315;
  --fc-paper:           #ffffff;
  --fc-bone:            #fcf2ed;
  --fc-bone-200:        #f3e5dc;
  --fc-stone-200:       #e3dfe0;
  --fc-stone-500:       #7a7a7a;
  --fc-stone-700:       #3a3a3a;
  --fc-ink:             #1a1f1e;
  --fc-forest-rule:     rgba(252, 242, 237, 0.14);

  /* Type */
  --font-display: "Tinos", Georgia, "Times New Roman", serif;
  --font-body:    "Calibri", "Carlito", "Helvetica Neue", Arial, system-ui, sans-serif;

  --fs-eyebrow:  11px;
  --fs-caption:  12px;
  --fs-small:    13px;
  --fs-body:     15px;
  --fs-body-lg:  17px;
  --fs-h4:       18px;
  --fs-h3:       24px;
  --fs-h2:       32px;
  --fs-h1:       40px;
  --fs-display:  46px;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.55;
  --lh-loose:    1.7;

  --track-eyebrow: 0.18em;
  --track-display: -0.005em;

  /* Spacing (4px grid) */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius / motion */
  --radius-sm: 2px;
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --ease-out:  cubic-bezier(.2, .7, .2, 1);

  /* Semantic */
  --bg:        var(--fc-paper);
  --fg:        var(--fc-forest);
  --fg-body:   var(--fc-ink);
  --fg-muted:  var(--fc-stone-700);
  --fg-subtle: var(--fc-stone-500);
  --accent:    var(--fc-ember);
  --rule:      var(--fc-stone-200);

  /* Bootstrap overrides */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size:   var(--fs-body);
  --bs-body-color:       var(--fc-ink);
  --bs-body-bg:          var(--fc-paper);
  --bs-link-color:       var(--fc-ember);
  --bs-link-hover-color: var(--fc-ember-hover);
  --bs-border-radius:    var(--radius-sm);
  --bs-primary-rgb:      181, 82, 25;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dark surface — used ONLY by the footer and the consent banner.
   No other surface above the footer should set data-surface="dark". */
[data-surface="dark"] {
  background: var(--fc-forest);
  color: var(--fc-bone);
  --fg: var(--fc-bone);
  --fg-body: var(--fc-bone);
  --fg-muted: rgba(252, 242, 237, 0.72);
  --fg-subtle: rgba(252, 242, 237, 0.5);
  --rule: var(--fc-forest-rule);
}

/* ---------- CONTAINER ---------- */
@media (min-width: 768px) {
  .container { --bs-gutter-x: var(--space-7); }
}

/* ---------- TYPE ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(28px, 3.8vw, var(--fs-h1)); }
h2 { font-size: clamp(24px, 3.2vw, var(--fs-h2)); line-height: var(--lh-snug); }
h3 { font-size: clamp(20px, 2.4vw, var(--fs-h3)); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

.fc-display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  font-size: clamp(32px, 4.5vw, var(--fs-display));
  text-wrap: balance;
  margin: 0;
}

p {
  font-family: var(--font-body);
  line-height: var(--lh-loose);
  color: var(--fg-body);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}
p:last-child { margin-bottom: 0; }

ol, ul {
  font-family: var(--font-body);
  line-height: var(--lh-loose);
  color: var(--fg-body);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.fc-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.fc-small   { font-size: var(--fs-small); }
.fc-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  letter-spacing: 0.02em;
}

/* Eyebrow — Ember uppercase label */
.fc-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin: 0 0 var(--space-4);
}

/* Flanked eyebrow — a thin rule on each side of the label, e.g. the
   "— Expertise —" section header. */
.fc-eyebrow--flanked {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.fc-eyebrow--flanked::before,
.fc-eyebrow--flanked::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.fcc-section-head .fc-eyebrow--flanked { margin-bottom: 0; }

/* Inline accent — ember color for callouts inside body or display text */
.fc-accent { color: var(--accent); }

/* Ember rule — signature motif. Centered usage handled per-component. */
.fc-ember-rule {
  display: block;
  height: 2px;
  width: 48px;
  background: var(--fc-ember);
  margin: var(--space-4) 0 var(--space-7);
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fc-ember-hover); }

/* ---------- BUTTONS ---------- */
.btn-ember {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 22px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  color: var(--fc-bone);
  background: var(--fc-ember);
  border: 1px solid var(--fc-ember);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn-ember:hover,
.btn-ember:focus-visible {
  background: var(--fc-ember-hover);
  border-color: var(--fc-ember-hover);
  color: var(--fc-bone);
}

.btn-ember-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 22px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  color: var(--fc-bone);
  background: transparent;
  border: 1px solid var(--fc-bone);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-ember-outline:hover,
.btn-ember-outline:focus-visible {
  background: var(--fc-ember);
  border-color: var(--fc-ember);
  color: var(--fc-bone);
}

/* Light-surface outline button — used on the light contact section. */
.btn-ember-outline--light {
  color: var(--fc-forest);
  border-color: var(--fc-stone-500);
}
.btn-ember-outline--light:hover,
.btn-ember-outline--light:focus-visible {
  color: var(--fc-bone);
}

/* ---------- NAVBAR ---------- */
/* Single row: logo left, nav links right. The container is a wrapping
   flexbox — on mobile the brand row (logo + hamburger) and the
   collapsible menu each take a full row; from 992px up they shrink to
   content and sit on one line, pushed to opposite edges by
   space-between. Custom layout — doesn't use Bootstrap's `.navbar`
   machinery, but Bootstrap.Collapse still drives the mobile toggle via
   `data-bs-toggle="collapse"` and the `.collapse` class on the menu. */
.fcc-nav {
  background: var(--fc-paper);
  border-bottom: 1px solid var(--fc-stone-200);
  padding: var(--space-5) 0;
}

.fcc-nav .fcc-nav-container {
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.fcc-nav-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex: 1 1 100%;
}

.fcc-nav-logo {
  border: none;
  display: inline-flex;
  align-items: center;
}
.fcc-nav-logo img {
  width: 220px;
  height: auto;
  display: block;
}

.fcc-nav-toggler {
  background: transparent;
  border: 1px solid var(--fc-stone-200);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.fcc-nav-toggler:focus,
.fcc-nav-toggler:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(181, 82, 25, 0.20);
}
.fcc-nav-toggler-icon {
  display: block;
  width: 22px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23042e2a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
}

.fcc-nav-menu { flex: 1 1 100%; }

/* From 992px: single row. Force the menu visible regardless of Bootstrap
   collapse state (`.collapse` defaults to display:none), hide the
   toggle, and let the brand and menu size to their content so
   space-between can split them left/right. */
@media (min-width: 992px) {
  .fcc-nav-menu.collapse:not(.show) { display: block; }
  .fcc-nav-toggler { display: none; }
  .fcc-nav-brand-row { flex: 0 1 auto; }
  .fcc-nav-menu { flex: 0 1 auto; }
}

.fcc-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-7);
}

.fcc-nav-link {
  color: var(--fc-forest);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--space-2) 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.fcc-nav-link:hover,
.fcc-nav-link:focus-visible {
  color: var(--fc-ember);
  border-bottom-color: var(--fc-ember);
}

/* Mobile collapse — stack vertically with comfortable touch targets */
@media (max-width: 991.98px) {
  .fcc-nav-links {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-4);
  }
  .fcc-nav-link {
    padding: var(--space-3) var(--space-4);
  }
}

/* ---------- HERO (Home) — full-screen background video, overlaid text ---------- */
.fcc-hero {
  position: relative;
  /* Fill the viewport BELOW the nav (~127px = 48px padding + ~78px logo
     [220px-wide 612x216 SVG] + 1px border) so the whole video fits one
     screen instead of pushing the page down. Update the offset if the
     logo/nav height changes. */
  min-height: calc(100vh - 127px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: var(--space-7) 0;
  background: var(--fc-forest);
}

.fcc-hero .container {
  position: relative;
  z-index: 2;
  max-width: 1080px;
}

.fcc-hero h1.fc-display {
  margin: 0 auto var(--space-5);
  max-width: 720px;
  color: var(--fc-bone);
}

.fcc-hero .fcc-subhead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: rgba(252, 242, 237, 0.85);
  max-width: 560px;
  margin: 0 auto var(--space-6);
}

.fcc-hero .fc-ember-rule {
  margin: 0 auto;
}

/* Full-screen background video covering the hero. A 16:9 iframe can't use
   object-fit, so it's oversized and centered to cover any viewport ratio.
   The iframe operates under Vimeo's own CSP; parent allowance is in
   inc/security.php. */
.fcc-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--fc-forest);
}
.fcc-hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;       /* 16:9 derived from width */
  min-width: 177.78vh;   /* 16:9 derived from height */
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;  /* decorative background */
}

/* Dark scrim between the video and the text for legibility. */
.fcc-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(4, 46, 42, 0.45);
}

/* ---------- PAGE HEADER (interior pages) ---------- */
.fcc-page-header {
  background: var(--fc-paper);
  padding: 4rem 0 var(--space-7);
  text-align: center;
}
.fcc-page-header .container { max-width: 1080px; }
.fcc-page-header h1 { margin: 0 auto var(--space-4); max-width: 720px; }
.fcc-page-header .fc-ember-rule { margin: 0 auto; }

/* Image variant — title over a full-width photo (Expertise, Contact).
   The photo shows through untinted; a text-shadow carries the bone title's
   legibility across the image's dark canopy and lighter road band. The
   base .fcc-page-header rule above is untouched. */
.fcc-page-header--image {
  position: relative;
  background-image: url("/wp-content/themes/fireclay-capital/images/forest-road.webp");
  background-size: cover;
  background-position: center;
  padding: clamp(80px, 12vw, 160px) var(--space-5);
}
.fcc-page-header--image .container { position: relative; z-index: 1; }
.fcc-page-header--image h1 {
  color: var(--fc-bone);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 18px rgba(0, 0, 0, 0.45);
}
.fcc-page-header--image .fc-ember-rule { margin: var(--space-4) auto 0; }

/* ---------- SECTIONS ---------- */
main { background: var(--fc-paper); }

.fcc-section {
  background: var(--fc-paper);
  padding: 10px 0 clamp(80px, 10vw, var(--space-10));
}

.fcc-section .container { max-width: 1080px; }

/* Full-bleed sections opt out of vertical padding and the centered
   container — used by the Expertise mosaic and the Investment Criteria
   split, which both run to the viewport edge. */
.fcc-section--flush { padding: 0; }

/* Centered section head — eyebrow + H2 + ember rule */
.fcc-section-head {
  text-align: center;
  margin-bottom: var(--space-9);
}
.fcc-section-head .fc-ember-rule {
  margin: var(--space-4) auto 0;
}
.fcc-section-head h2 {
  margin: 0 auto;
  max-width: 720px;
}

/* Left-aligned head — used in the Investment Criteria split column,
   where the heading sits beside the image rather than centered. */
.fcc-section-head--left {
  text-align: left;
  margin-bottom: var(--space-7);
}
.fcc-section-head--left h2 { margin-left: 0; }
.fcc-section-head--left .fc-ember-rule { margin-left: 0; margin-right: 0; }

.fcc-prose {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  max-width: 720px;
}
.fcc-prose--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.fcc-prose ol li::marker,
.fcc-prose ul li::marker { color: var(--fc-ember); }

/* ---------- ARISTOTLE PULL QUOTE (Philosophy) ---------- */
.fcc-pullquote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  line-height: var(--lh-snug);
  color: var(--fc-forest);
  text-wrap: balance;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.fcc-pullquote p { font-size: inherit; line-height: inherit; margin: 0; color: inherit; }
.fcc-pullquote cite {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-top: var(--space-5);
  font-style: normal;
}

/* ---------- QUOTE BAND (Philosophy) ---------- */
/* The Aristotle quote over a full-cover photograph. A Forest overlay
   sits between the image and the text so the light pull-quote stays
   legible; `.fcc-quote-band` overrides the default `.fcc-section`
   padding to set its own band height (the "tight crop"). */
.fcc-quote-band {
  position: relative;
  background-image: url("/wp-content/themes/fireclay-capital/images/forest-road.webp");
  background-size: cover;
  background-position: center;
  padding: clamp(72px, 12vw, 150px) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fcc-quote-band__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 46, 42, 0.62);
}
.fcc-pullquote--on-image {
  position: relative;
  z-index: 1;
  color: var(--fc-bone);
}
.fcc-pullquote--on-image cite { color: rgba(252, 242, 237, 0.8); }

/* ---------- BORDERLESS BLOCKS (Pillars, Expertise) ---------- */
/* `.fcc-card-grid` / `.fcc-card` are kept as aliases so existing pages
   that have the older bordered-card patterns inserted auto-restyle into
   the new borderless treatment without re-inserting. New patterns use
   `.fcc-blocks` / `.fcc-block` (semantically accurate). */
.fcc-blocks,
.fcc-card-grid {
  display: grid;
  gap: var(--space-8);
}
.fcc-blocks--3,
.fcc-card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fcc-blocks--4,
.fcc-card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.fcc-blocks--6,
.fcc-card-grid--6 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

@media (min-width: 992px) {
  .fcc-blocks,
  .fcc-card-grid { gap: var(--space-5) var(--space-7); }
  .fcc-blocks--6,
  .fcc-card-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .fcc-blocks--4,
  .fcc-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .fcc-blocks--3,
  .fcc-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.fcc-block,
.fcc-card {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fcc-block h3,
.fcc-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--fc-forest);
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.fcc-block p,
.fcc-card p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-body);
  margin: 0;
}
/* Optional Ember tick above each block title — a sparing accent that
   ties items together without card chrome. */
.fcc-block::before,
.fcc-card::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--fc-ember);
  margin-bottom: var(--space-2);
}
/* Disable hover transform that the old `.fcc-card` rule applied. */
.fcc-card:hover { border-color: transparent; }

/* Optional 16:9 media header on a block (Philosophy pillars). When a
   block carries an image, its leading ember tick is dropped so the
   image leads cleanly; the flex gap handles image-to-heading spacing. */
.fcc-block__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.fcc-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fcc-block:has(.fcc-block__media)::before { display: none; }

/* ---------- FULL-BLEED IMAGE MOSAIC (Expertise) ---------- */
/* Gapless grid that runs the full viewport width (the pattern omits the
   centered `.container`). Each cell crops its image to a uniform ratio
   and zooms it on hover. */
.fcc-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 768px) {
  .fcc-image-grid { grid-template-columns: repeat(3, 1fr); }
}
.fcc-image-grid__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.fcc-image-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}
.fcc-image-grid__item:hover img,
.fcc-image-grid__item:focus-within img {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .fcc-image-grid__item img { transition: none; }
  .fcc-image-grid__item:hover img,
  .fcc-image-grid__item:focus-within img { transform: none; }
}

/* ---------- CRITERIA SECTIONS (Investment Criteria) ---------- */
.fcc-criteria {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .fcc-criteria {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-9) var(--space-8);
  }
}
.fcc-criteria__item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--fc-forest);
  margin-bottom: var(--space-3);
}
.fcc-criteria__item p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-body);
}
.fcc-criteria__item::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--fc-ember);
  margin-bottom: var(--space-3);
}
/* The first item sits directly under the section's ember rule, so its own
   tick would double up — drop it on the first item only. */
.fcc-criteria-stack .fcc-criteria__item:first-child::before { display: none; }

/* Split layout — full-bleed image left, stacked content right
   (Investment Criteria). Stacks to one column (image on top) below
   768px. */
.fcc-criteria-split {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .fcc-criteria-split { grid-template-columns: 1fr 1fr; }
}
.fcc-criteria-split__media { overflow: hidden; }
.fcc-criteria-split__media img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
}
.fcc-criteria-split__body {
  align-self: center;
  padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px);
}
.fcc-criteria-stack {
  display: grid;
  gap: var(--space-7);
}

/* ---------- CONTACT (light surface) ---------- */
.fcc-contact-address {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-3);
  text-align: center;
}
.fcc-contact-address address {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-body);
  margin: 0;
}
.fcc-contact-address .fcc-directions {
  font-size: var(--fs-body);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: center;
}

/* Inline figures */
.fcc-figure { margin: 0; }
.fcc-figure img { display: block; width: 100%; height: auto; }

/* ---------- FOOTER ---------- */
/* Unchanged from the as-built — dark Forest + Ember accents, the family-
   of-sites common thread and the only dark surface above the consent
   banner. */
.fcc-footer {
  background: var(--fc-forest);
  padding: var(--space-8) 0 var(--space-6);
}

.fcc-footer .container { max-width: 1080px; }

.fcc-footer-top { margin-bottom: var(--space-5); }

.fcc-footer-address {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-small);
  color: rgba(252, 242, 237, 0.72);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-3);
}

.fcc-footer-prose {
  font-size: var(--fs-small);
  color: rgba(252, 242, 237, 0.72);
  line-height: var(--lh-loose);
  margin: 0;
}

.fcc-footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-small);
}
.fcc-footer-contact a {
  color: var(--fc-bone);
  border-bottom: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fcc-footer-contact a:hover { color: var(--fc-ember); }

.fcc-footer-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent);
}

.fcc-footer-base {
  border-top: 1px solid var(--fc-forest-rule);
  padding-top: var(--space-5);
}

.fcc-footer-fine {
  font-size: var(--fs-caption);
  color: rgba(252, 242, 237, 0.55);
  line-height: var(--lh-loose);
  text-align: center;
  margin: 2.4rem auto var(--space-5);
}

.fcc-footer-signoff {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.fcc-footer-copy {
  font-size: var(--fs-caption);
  color: rgba(252, 242, 237, 0.55);
  margin: 0;
}

.fcc-footer-mark {
  width: 150px;
  height: auto;
  display: block;
}

/* ---------- ANIMATIONS ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fcc-hero h1,
  .fcc-hero .fcc-subhead,
  .fcc-hero .fc-ember-rule {
    opacity: 0;
    transform: translateY(8px);
    animation: fcc-rise 700ms var(--ease-out) forwards;
  }
  .fcc-hero h1              { animation-delay: 80ms; }
  .fcc-hero .fcc-subhead    { animation-delay: 180ms; }
  .fcc-hero .fc-ember-rule  { animation-delay: 260ms; }

  .fc-ember-rule {
    transform-origin: center;
    animation: fcc-grow 600ms var(--ease-out) both;
    animation-delay: 100ms;
  }
}

@keyframes fcc-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fcc-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

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

/* Anchor offset for sticky nav (kept harmless — nav isn't sticky now) */
:target { scroll-margin-top: 80px; }

/* ---------- CONTACT FORM (light surface) ---------- */
.fcc-form-wrap {
  margin-top: var(--space-7);
  display: flex;
  justify-content: center;
}

.fcc-form {
  width: 100%;
  max-width: 900px;
  /* Clean white card — the stone border + soft shadow carry the boundary
     now that the fill matches the section. */
  background: var(--fc-paper);
  border: 1px solid var(--fc-stone-200);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 24px rgba(4, 46, 42, 0.06);
  padding: clamp(28px, 5vw, 56px);
  /* Two-column field grid; stacks to one column below 640px. */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .fcc-form { grid-template-columns: 1fr 1fr; }
}
/* Fields, status, and submit that span the full width of the box. */
.fcc-field--full,
.fcc-form-status,
.fcc-form-submit { grid-column: 1 / -1; }

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

.fcc-field label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: left;
}
.fcc-field label .req {
  color: var(--accent);
  margin-left: 4px;
}

.fcc-field input,
.fcc-field select,
.fcc-field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  color: var(--fc-ink);
  background: var(--fc-paper);
  border: 1px solid var(--fc-stone-200);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* Custom caret for the selects — native arrow is removed by
   appearance:none above. */
.fcc-field select {
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23042e2a' stroke-width='1.5'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
.fcc-field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: var(--lh-normal);
}
.fcc-field input:hover,
.fcc-field select:hover,
.fcc-field textarea:hover {
  border-color: var(--fc-stone-500);
}
.fcc-field input:focus-visible,
.fcc-field select:focus-visible,
.fcc-field textarea:focus-visible {
  outline: none;
  border-color: var(--fc-ember);
  box-shadow: 0 0 0 2px rgba(181, 82, 25, 0.20);
}

.fcc-field.is-error input,
.fcc-field.is-error select,
.fcc-field.is-error textarea {
  border-color: var(--fc-ember);
  box-shadow: 0 0 0 2px rgba(181, 82, 25, 0.14);
}
.fcc-field-error {
  font-size: var(--fs-small);
  color: var(--fc-ember);
  font-weight: 500;
  text-align: left;
}
.fcc-field-error[hidden] { display: none; }

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

.fcc-form-status {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--fc-stone-200);
  font-size: var(--fs-body);
  color: var(--fc-ink);
  background: var(--fc-bone-200);
  text-align: left;
}
.fcc-form-status[hidden] { display: none; }
.fcc-form-status.is-success {
  border-color: var(--fc-stone-200);
  background: var(--fc-bone-200);
}
.fcc-form-status.is-error {
  border-color: var(--fc-ember);
  background: rgba(181, 82, 25, 0.06);
}
.fcc-form-status a { color: var(--fc-ember); }

.fcc-form-submit {
  margin-top: var(--space-2);
  display: flex;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .fcc-field input,
  .fcc-field select,
  .fcc-field textarea { transition: none; }
}

/* ---------- CONSENT BANNER ---------- */
/* Banner stays dark Forest — it pairs visually with the footer when both
   are on screen, and a temporary fixed-bottom UI element wants the
   weight to register the privacy choice. */
.fcc-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  background: var(--fc-forest);
  border-top: 2px solid var(--fc-ember);
  color: var(--fc-bone);
  padding: var(--space-5) 0;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}

.fcc-consent.is-visible { transform: translateY(0); }

.fcc-consent__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

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

.fcc-consent__text { flex: 1; }

.fcc-consent__text .fc-eyebrow {
  margin-bottom: var(--space-2);
  color: var(--fc-ember);
}

.fcc-consent__text p {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: rgba(252, 242, 237, 0.85);
  margin: 0;
}

.fcc-consent__text a {
  color: var(--fc-bone);
  border-bottom: 1px solid var(--fc-ember);
}
.fcc-consent__text a:hover,
.fcc-consent__text a:focus-visible {
  color: var(--fc-ember);
}

.fcc-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .fcc-consent__actions { width: 100%; }
  .fcc-consent__actions .btn-ember,
  .fcc-consent__actions .btn-ember-outline {
    flex: 1;
    justify-content: center;
  }
}

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