/* ==========================================================================
   The Circle Lady(TM)  |  Draft B: Motion
   A different template from Draft A: fixed brand rail, overlay navigation,
   full bleed image panels, sticky editorial choreography.
   Same approved palette, typography direction and copy.
   All motion is opacity / transform only and is removed entirely for
   prefers-reduced-motion.
   ========================================================================== */

:root {
  --color-deep-plum:    #6A2E6D;
  --color-royal-indigo: #3D3A87;
  --color-marigold:     #E3A528;
  --color-coral:        #D87A5A;
  --color-warm-cream:   #FAF5EE;
  --color-ink:          #22252D;

  --plum-deep:   #4A1F4C;
  --plum-soft:   #F3EBF3;
  --indigo-deep: #2C2A63;
  --cream-shade: #F3EBDF;
  --cream-line:  #E4D9C8;
  --ink-muted:   #55596A;
  --ink-faint:   #5F647A;   /* raised from #7C8194, which was 3.5:1 on cream */

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui:      "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.16rem, 1.09rem + 0.35vw, 1.36rem);
  --step-2:  clamp(1.38rem, 1.24rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.7rem, 1.4rem + 1.5vw, 2.7rem);
  --step-4:  clamp(2.1rem, 1.55rem + 2.6vw, 3.9rem);
  --step-5:  clamp(2.5rem, 1.5rem + 4.8vw, 5.4rem);

  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --section-y: clamp(4rem, 2rem + 8vw, 9rem);

  --width-read:    38rem;
  --width-content: 62rem;
  --width-wide:    78rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --rail: 0rem;

  /* Text-safe tones of Coral and Marigold.
     Directive section 11 restricts the palette; sections 16 and 30 require
     WCAG 2.2 AA contrast. Coral on Warm Cream measures 2.8:1 and Marigold
     measures 2.0:1, so neither is legible as text on a light surface. These
     are the same hues shifted in lightness until they pass, used only where
     the colour carries words. */
  --coral-ink:     #A8492B;
  --marigold-ink:  #9A6B16;
  --marigold-lite: #F0BC55;

  --radius-s: 3px;
  --radius-m: 8px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 200ms;
  --t-base: 420ms;
  --t-slow: 760ms;
}

/* The rail only reserves space when it is actually on screen. */
@media (min-width: 78rem) { body.has-rail { --rail: 11rem; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  padding-left: var(--rail);
  background: var(--color-warm-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.014em;
  color: var(--color-deep-plum);
  margin: 0 0 var(--space-m);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 var(--space-m); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-royal-indigo); text-underline-offset: 0.18em; }
a:hover { color: var(--color-deep-plum); }

ul, ol { margin: 0 0 var(--space-m); padding-left: 1.15rem; }
li { margin-bottom: var(--space-2xs); }

hr { border: 0; height: 1px; background: var(--cream-line); margin: var(--space-xl) 0; }

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

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

.skip-link {
  position: absolute; left: 1rem; top: -100%; z-index: 999;
  background: var(--color-deep-plum); color: #fff;
  padding: 0.75rem 1.5rem; border-radius: var(--radius-m);
  font-family: var(--font-ui); font-weight: 600; text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

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

/* --------------------------------------------------------------- layout -- */
.container      { width: min(100% - var(--gutter) * 2, var(--width-content)); margin-inline: auto; }
.container-wide { width: min(100% - var(--gutter) * 2, var(--width-wide));    margin-inline: auto; }
.container-read { width: min(100% - var(--gutter) * 2, var(--width-read));    margin-inline: auto; }

/* overflow-x: clip contains the arc motifs without creating a scroll
   container, so position: sticky inside these sections keeps working. */
.section { padding-block: var(--section-y); position: relative; overflow-x: clip; }
.section-tight { padding-block: clamp(2.5rem, 1.5rem + 4.5vw, 5rem); position: relative; overflow-x: clip; }

.section-cream  { background: var(--color-warm-cream); }
.section-shade  { background: var(--cream-shade); }
.section-plum   { background: var(--color-deep-plum); color: #F6EFF4; }
.section-indigo { background: var(--color-royal-indigo); color: #EDEDF7; }

/* Marigold is a light surface, so it takes dark ink rather than the reversed
   treatment the plum and indigo sections use. White on Marigold measures
   1.9:1, and Coral measures 1.4:1, so neither can appear here. */
.section-marigold { background: var(--color-marigold); color: var(--color-ink); }
.section-marigold h1, .section-marigold h2, .section-marigold h3 { color: var(--plum-deep); }
.section-marigold .eyebrow { color: var(--plum-deep); }
.section-marigold .lede { color: #43380F; }
.section-marigold .statement { color: var(--plum-deep); }
.section-marigold .accent { color: var(--indigo-deep); }
.section-marigold .requirements p { color: var(--indigo-deep); }
.section-marigold a:not(.btn) { color: var(--indigo-deep); }

.section-plum h1, .section-plum h2, .section-plum h3,
.section-indigo h1, .section-indigo h2, .section-indigo h3 { color: #fff; }
/* Buttons are excluded: this rule outranks .btn-primary on specificity and
   was painting the label marigold on a marigold fill, which made
   "Explore Solutions" and "See Who We Serve" invisible. */
.section-plum a:not(.btn), .section-indigo a:not(.btn) { color: var(--color-marigold); }

.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin: 0 0 var(--space-s);
}
.section-plum .eyebrow, .section-indigo .eyebrow { color: var(--marigold-lite); }
.accent-gold { color: var(--marigold-ink); }

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); }
.section-plum .lede, .section-indigo .lede { color: rgba(255,255,255,0.85); }

.statement {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.24;
  color: var(--coral-ink);
  margin: var(--space-l) 0 0;
  max-width: 30ch;
}

/* The three "It requires" lines. Royal Indigo on a light surface, white on a
   deep one, so the block survives a change of section colour. */
.requirements p {
  font-size: var(--step-1);
  color: var(--color-royal-indigo);
  margin-bottom: var(--space-2xs);
}
.requirements p:last-child { margin-bottom: 0; }
.section-plum .requirements p, .section-indigo .requirements p { color: #fff; }
.section-plum .statement, .section-indigo .statement { color: var(--color-marigold); }

.rule-gold { width: 3.5rem; height: 2px; background: var(--color-marigold); border: 0; margin: var(--space-m) 0; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.7rem;
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
/* A wipe rather than a bounce: the fill sweeps in behind the label. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn svg { flex: none; transition: transform var(--t-base) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn-primary { background: var(--color-marigold); color: var(--color-ink); border-color: var(--color-marigold); }
.btn-primary::before { background: var(--color-deep-plum); }
.btn-primary:hover, .btn-primary:focus-visible { color: #fff; border-color: var(--color-deep-plum); }

.btn-outline { background: transparent; color: var(--color-deep-plum); border-color: var(--color-deep-plum); }
.btn-outline::before { background: var(--color-deep-plum); }
.btn-outline:hover, .btn-outline:focus-visible { color: #fff; }

/* The ecosystem band is a deep surface too, so it takes the reversed button.
   Without it the outline button rendered Deep Plum on dark indigo at 1.4:1. */
/* A Marigold button on a Marigold surface would disappear, so deep sections
   of that colour flip the primary button to plum. */
.section-marigold .btn-primary {
  background: var(--plum-deep); color: #fff; border-color: var(--plum-deep);
}
.section-marigold .btn-primary::before { background: #fff; }
.section-marigold .btn-primary:hover,
.section-marigold .btn-primary:focus-visible { color: var(--plum-deep); }
.section-marigold .btn-outline { color: var(--plum-deep); border-color: var(--plum-deep); }
.section-marigold .btn-outline::before { background: var(--plum-deep); }
.section-marigold .btn-outline:hover,
.section-marigold .btn-outline:focus-visible { color: var(--color-marigold); }

.section-plum .btn-outline, .section-indigo .btn-outline, .ecosystem .btn-outline {
  color: #fff; border-color: rgba(255,255,255,0.6);
}
.section-plum .btn-outline::before,
.section-indigo .btn-outline::before,
.ecosystem .btn-outline::before { background: #fff; }
.section-plum .btn-outline:hover, .section-indigo .btn-outline:hover, .ecosystem .btn-outline:hover,
.section-plum .btn-outline:focus-visible, .section-indigo .btn-outline:focus-visible,
.ecosystem .btn-outline:focus-visible { color: var(--color-deep-plum); border-color: #fff; }

/* ----------------------------------------------------------- brand rail -- */
.rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: 1.25rem 0.5rem;
  background: var(--color-warm-cream);
  border-right: 1px solid var(--cream-line);
  z-index: 90;
  overflow-y: auto;
}
@media (min-width: 78rem) { body.has-rail .rail { display: flex; } }

.rail__mark { width: 2.6rem; flex: none; }
.rail__mark svg { width: 100%; height: auto; }

/* Section index. Labels are always visible: a column of unexplained dots
   left visitors guessing what they did. */
.rail__nav { width: 100%; }
.rail__title {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.75rem;
  padding-left: 1rem;
}
.rail__index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rail__index li { margin: 0; }
.rail__index a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 40px;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  line-height: 1.2;
  transition: color var(--t-base) var(--ease);
}
.rail__index a::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.5;
  transition: background-color var(--t-base) var(--ease), opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.rail__index a:hover { color: var(--color-deep-plum); }
.rail__index a:hover::before { opacity: 1; }
.rail__index a.is-active { color: var(--color-deep-plum); }
.rail__index a.is-active::before {
  background: var(--color-marigold);
  border-color: var(--color-marigold);
  opacity: 1;
  transform: scale(1.25);
}
/* A rule marks the active section rather than relying on colour alone. */
.rail__index a.is-active::after {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem; bottom: 0.5rem;
  width: 2px;
  background: var(--color-marigold);
}

.rail__progress { width: 2.4rem; height: 2.4rem; }
.rail__progress circle { fill: none; stroke-width: 2; }
.rail__progress .track { stroke: var(--cream-line); }
.rail__progress .value {
  stroke: var(--color-marigold);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 120ms linear;
}

/* ------------------------------------------------------------ topbar/nav -- */
.topbar {
  position: fixed;
  top: 0; left: var(--rail); right: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: 0.85rem var(--gutter);
  background: rgba(250,245,238,0);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              backdrop-filter var(--t-base) var(--ease), padding var(--t-base) var(--ease);
}
.topbar.is-solid {
  background: rgba(250,245,238,0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--cream-line);
  padding-block: 0.55rem;
}
.topbar__logo img { width: clamp(108px, 11vw, 136px); }

.topbar__actions { display: flex; align-items: center; gap: var(--space-s); }
.topbar .btn { padding-block: 0.8rem; }
@media (max-width: 40rem) { .topbar .btn-primary { display: none; } }

/* Persistent page navigation.
   The overlay alone made the site feel like a puzzle: nothing told you where
   you were or what else existed without opening it first. On anything wider
   than a phone the full navigation now sits in the bar. */
.topbar__nav { display: none; }
@media (min-width: 62rem) {
  .topbar__nav { display: block; flex: 1; }
  .topbar__nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.4vw, 1.35rem);
    list-style: none; margin: 0; padding: 0;
  }
  .topbar__nav li { margin: 0; }
  .topbar__nav a {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.55rem 0.1rem;
    border-bottom: 2px solid transparent;
    transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  }
  .topbar__nav a:hover { color: var(--color-deep-plum); border-bottom-color: var(--color-marigold); }
  .topbar__nav a[aria-current="page"] {
    color: var(--color-deep-plum);
    font-weight: 600;
    border-bottom-color: var(--color-coral);
  }
  /* With the full navigation visible the overlay is redundant. */
  .topbar .menu-btn { display: none; }
}
/* The bar carries navigation now, so it stays legible from the first pixel. */
.topbar {
  background: rgba(250,245,238,0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--cream-line);
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0.6rem 0.2rem;
  min-height: 48px;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  cursor: pointer;
}
.menu-btn .bars { position: relative; display: block; width: 24px; height: 12px; }
.menu-btn .bars i {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; display: block;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.menu-btn .bars i:nth-child(1) { top: 0; }
.menu-btn .bars i:nth-child(2) { top: 5px; }
.menu-btn .bars i:nth-child(3) { top: 10px; }
.menu-btn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Full overlay navigation. Panels wipe open, links rise in sequence. */
.overlay-nav {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--color-deep-plum);
  color: #fff;
  display: grid;
  place-items: center;
  clip-path: circle(0% at calc(100% - 4rem) 2.5rem);
  transition: clip-path var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  visibility: hidden;
  overflow-y: auto;
}
.overlay-nav.is-open {
  clip-path: circle(150% at calc(100% - 4rem) 2.5rem);
  visibility: visible;
  transition: clip-path var(--t-slow) var(--ease-out), visibility 0s;
}
.overlay-nav__close {
  position: absolute; top: 1rem; right: var(--gutter);
  background: none; border: 0; color: #fff; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px;
}
.overlay-nav ol {
  list-style: none;
  margin: 0; padding: var(--space-2xl) var(--gutter);
  width: min(100%, 46rem);
  counter-reset: navitem;
}
.overlay-nav li { margin: 0; opacity: 0; transform: translateY(18px); }
.overlay-nav.is-open li { opacity: 1; transform: none; transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.overlay-nav.is-open li:nth-child(1) { transition-delay: 180ms; }
.overlay-nav.is-open li:nth-child(2) { transition-delay: 240ms; }
.overlay-nav.is-open li:nth-child(3) { transition-delay: 300ms; }
.overlay-nav.is-open li:nth-child(4) { transition-delay: 360ms; }
.overlay-nav.is-open li:nth-child(5) { transition-delay: 420ms; }
.overlay-nav.is-open li:nth-child(6) { transition-delay: 480ms; }
.overlay-nav.is-open li:nth-child(7) { transition-delay: 540ms; }
.overlay-nav.is-open li:nth-child(8) { transition-delay: 620ms; }

/* Every rule here excludes .btn. Without that, these selectors outrank the
   button styles and the menu's Start the Conversation control rendered as a
   27px serif link with a numbered prefix and white text on Marigold. */
.overlay-nav a:not(.btn) {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1rem + 3.6vw, 3.2rem);
  line-height: 1.25;
  color: #fff;
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  transition: color var(--t-base) var(--ease), padding-left var(--t-base) var(--ease-out);
}
.overlay-nav a:not(.btn)::before {
  counter-increment: navitem;
  content: counter(navitem, decimal-leading-zero);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-marigold);
  opacity: 0.75;
}
.overlay-nav a:not(.btn):hover,
.overlay-nav a:not(.btn):focus-visible { color: var(--color-marigold); padding-left: 0.8rem; }
.overlay-nav a:not(.btn)[aria-current="page"] { color: var(--color-marigold); }
.overlay-nav__cta { margin-top: var(--space-xl); }

/* ----------------------------------------------------------------- hero -- */
.hero-full {
  position: relative;
  min-height: min(92svh, 54rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--plum-deep);
  isolation: isolate;
}
.hero-full__media { position: absolute; inset: 0; z-index: -2; }
.hero-full__media img,
.hero-full__media video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scale(1.06);
}

/* Pause control for the hero loop.
   WCAG 2.2 criterion 2.2.2 requires a way to stop motion that starts on its
   own and runs beyond five seconds. This clip is 10.5 seconds and loops. */
.hero-media-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 1.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  background: rgba(74, 31, 76, 0.74);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.hero-media-toggle:hover { background: rgba(74, 31, 76, 0.92); border-color: #fff; }
.hero-media-toggle svg { width: 11px; height: 11px; flex: none; fill: currentColor; }
.hero-media-toggle .icon-play { display: none; }
.hero-media-toggle[aria-pressed="true"] .icon-pause { display: none; }
.hero-media-toggle[aria-pressed="true"] .icon-play { display: block; }
/* Shown only once the script has actually started playback. */
.hero-media-toggle[hidden] { display: none; }
/* The scrim is a touch heavier than it was for the still photograph. The
   circle footage contains blown out highlights (the flip chart paper), and
   over those the headline was landing at 3.18:1. This lifts the worst case
   past 4:1 without flattening the picture. */
.hero-full::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(74,31,76,0.95) 8%, rgba(74,31,76,0.70) 45%, rgba(74,31,76,0.45) 100%);
}
.hero-full__inner { padding-block: clamp(6rem, 4rem + 8vw, 9rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero-full h1 { color: #fff; max-width: 18ch; }
.hero-full h1 .accent { color: var(--color-marigold); }
/* Marigold is 2:1 on Warm Cream, so light surfaces use the darkened tone. */
h1 .accent, h2 .accent { color: var(--marigold-ink); }
.section-plum .accent, .section-indigo .accent, .hero-full .accent { color: var(--color-marigold); }
.hero-full .lede, .hero-full p { color: rgba(255,255,255,0.9); }
.hero-full .hero-kicker {
  font-family: var(--font-ui); font-size: var(--step-1); font-weight: 500;
  color: #fff; margin-bottom: var(--space-m);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }

/* --------------------------------------------------- portrait hero (About) --
   An asymmetric editorial opening: a deep plum reading column on the left,
   the portrait running full height and bleeding off the right edge of the
   viewport. The photograph is near black, so it meets the plum panel without
   a hard seam, and the gold script inside it carries the brand accent.
   -------------------------------------------------------------------------- */
.hero-portrait {
  position: relative;
  overflow: hidden;
  background: var(--color-deep-plum);
  color: #F6EFF4;
}
.hero-portrait h1 { color: #fff; }
.hero-portrait .eyebrow { color: var(--marigold-lite); }
.hero-portrait .accent { color: var(--color-marigold); }

.hero-portrait__grid {
  display: grid;
  grid-template-columns: 1fr;
}
.hero-portrait__copy {
  position: relative;
  z-index: 1;
  width: min(100% - var(--gutter) * 2, 36rem);
  margin-inline: auto;
  /* The breadcrumb above already clears the fixed bar. */
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
/* The portrait is shown whole and centred in its column. Cropping it to fill
   the height clipped the ends of the gold signature, which is the reason this
   photograph is here, and bottom aligning it left a large gap overhead. Even
   plum above and below frames it instead. */
.hero-portrait__media {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
}
/* Full bleed, so no rounded corners, and the reveal wipes in plum not cream. */
.hero-portrait .mask-reveal { border-radius: 0; }
.hero-portrait .mask-reveal::after { background: var(--color-deep-plum); }
.hero-portrait__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Stacked layout: a full width portrait pushed the hero past 1500px on a
   tablet, so it is held to a sensible size and centred. */
@media (max-width: 55.99rem) {
  .hero-portrait__media {
    padding: 0 var(--gutter) clamp(2rem, 1rem + 4vw, 3.5rem);
    justify-content: center;
  }
  .hero-portrait__media img { max-width: 22rem; margin-inline: auto; }
}

@media (min-width: 56rem) {
  .hero-portrait__grid {
    /* Last track runs to the viewport edge: no right gutter. */
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      minmax(0, 34rem)
      minmax(0, 30rem);
    align-items: stretch;
    min-height: min(86svh, 48rem);
  }
  .hero-portrait__copy {
    grid-column: 2;
    width: auto;
    margin-inline: 0;
    align-self: center;
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
    padding-right: var(--space-xl);
  }
  .hero-portrait__media { grid-column: 3; }
  /* Widening the photograph column shortens the plum framing above and below
     without cropping anything. */
  .hero-portrait__grid { grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 33rem) minmax(0, 34rem); }
  /* Softens the meeting point between panel and photograph. */
  .hero-portrait__media::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 9rem;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right, var(--color-deep-plum), rgba(106, 46, 109, 0));
  }
}

/* Compact hero used on inner pages. */
.hero-page { position: relative; overflow: hidden; padding-block: clamp(6.5rem, 4rem + 9vw, 10rem) var(--section-y); }
.hero-page__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 56rem) {
  .hero-page__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}
/* Hero photography is shown whole. A fixed ratio cropped the subject out of
   portrait sources, so only the height is bounded. */
.hero-page figure { margin: 0; position: relative; display: flex; justify-content: center; }
.hero-page figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(72svh, 36rem);
  border-radius: var(--radius-m);
}

/* Word by word headline reveal */
.reveal-words .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.reveal-words .word > span { display: inline-block; transform: translateY(105%); transition: transform var(--t-slow) var(--ease-out); }
.reveal-words.is-visible .word > span { transform: none; }

/* -------------------------------------------------------- drawn arc motif -- */
.arc { position: absolute; pointer-events: none; z-index: 0; opacity: 0.55; }
.arc svg { width: 100%; height: auto; overflow: visible; }
.arc circle, .arc path { fill: none; stroke-linecap: round; }
.arc--draw circle, .arc--draw path {
  stroke-dasharray: var(--len, 700);
  stroke-dashoffset: var(--len, 700);
  transition: stroke-dashoffset 1600ms var(--ease-out);
}
.arc--draw.is-visible circle, .arc--draw.is-visible path { stroke-dashoffset: 0; }
.arc--draw.is-visible circle:nth-of-type(2) { transition-delay: 180ms; }
.arc--draw.is-visible circle:nth-of-type(3) { transition-delay: 340ms; }

.arc--tr { width: min(36vw, 24rem); right: -6%; top: -12%; }
.arc--bl { width: min(32vw, 21rem); left: -8%; bottom: -14%; }
.arc--hero { width: min(46vw, 30rem); right: 4%; top: 12%; opacity: 0.4; }

/* Slow, clamped rotation tied to scroll. Never spins. */
.arc--turn svg { transform: rotate(calc(var(--turn, 0) * 24deg)); transition: transform 120ms linear; }

/* ------------------------------------------------------ sticky editorial -- */
.sticky-pair { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 60rem) {
  .sticky-pair { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .sticky-pair__aside { position: sticky; top: 7rem; }
}
.sticky-pair__flow > * + * { margin-top: var(--space-xl); }
.sticky-pair__flow .beat {
  border-top: 1px solid var(--cream-line);
  padding-top: var(--space-m);
}
.section-plum .sticky-pair__flow .beat,
.section-indigo .sticky-pair__flow .beat { border-top-color: rgba(255,255,255,0.26); }

/* --------------------------------------------------------- condition list -- */
.conditions { list-style: none; margin: 0 0 var(--space-m); padding: 0; }
.conditions li {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: var(--space-s);
  max-width: 58ch;
}
.conditions li svg { position: absolute; left: 0; top: 0.28em; width: 1.4rem; height: 1.4rem; }
.conditions li svg circle {
  fill: none; stroke: var(--color-marigold); stroke-width: 1.6;
  stroke-dasharray: 44; stroke-dashoffset: 44;
  transition: stroke-dashoffset 700ms var(--ease-out);
}
.conditions.is-visible li svg circle { stroke-dashoffset: 0; }
.conditions.is-visible li:nth-child(2) svg circle { transition-delay: 90ms; }
.conditions.is-visible li:nth-child(3) svg circle { transition-delay: 180ms; }
.conditions.is-visible li:nth-child(4) svg circle { transition-delay: 270ms; }
.conditions.is-visible li:nth-child(5) svg circle { transition-delay: 360ms; }
.conditions.is-visible li:nth-child(6) svg circle { transition-delay: 450ms; }

/* ----------------------------------------------------------- trusted wall --
   Each cell holds a typographic wordmark until an official logo file appears
   in assets/logos/, at which point the script swaps in the real asset. Sizing
   is optical: logos are bounded by height and keep their natural width. */
/* Flex rather than a fixed column grid. The roster changes whenever an
   organization is added or removed, and a grid leaves an empty cell whenever
   the count does not divide evenly. Here a short final row stretches to fill
   the width instead, so the wall closes cleanly at any count. The basis sits
   just under a clean fraction so the intended number still fits per row. */
.logo-wall {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--cream-line);
  border: 1px solid var(--cream-line);
  text-align: center;
}
.logo-wall__item { flex: 1 1 46%; }                                  /* 2 up */
@media (min-width: 34rem) { .logo-wall__item { flex-basis: 30%; } }  /* 3 up */
@media (min-width: 60rem) { .logo-wall__item { flex-basis: 18%; } }  /* 5 up */

.logo-wall__item {
  margin: 0;
  background: var(--cream-shade);
  min-height: 9rem;
  padding: var(--space-m) var(--space-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  transition: background-color var(--t-base) var(--ease);
}
.logo-wall__item:hover { background: var(--plum-soft); }

/* The organization name stays visible whether or not a logo has been
   supplied, so the wall reads consistently and every partner is named. */
.logo-wall__mark {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-royal-indigo);
  text-wrap: balance;
  transition: color var(--t-base) var(--ease);
}
/* Once a logo sits above it, the name steps back to a caption. It keeps
   Royal Indigo rather than dropping to a muted grey: at this size the grey
   read as an afterthought next to the full colour marks. */
.logo-wall__item.has-logo .logo-wall__mark {
  font-size: 0.67rem;
  letter-spacing: 0.07em;
}
.logo-wall__item:hover .logo-wall__mark { color: var(--color-deep-plum); }

/* Full colour at rest. Desaturating them made several marks almost
   disappear against the warm background. */
.logo-wall__img {
  max-height: 3.2rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--t-base) var(--ease-out);
}
.logo-wall__item:hover .logo-wall__img { transform: scale(1.05); }

/* ---------------------------------------------------------- setting panels -- */
.panels { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--plum-deep); }
@media (min-width: 56rem) {
  .panels { grid-template-columns: 1fr 1fr 1fr 1fr; height: min(70svh, 34rem); }
  .panels .panel { transition: flex var(--t-slow) var(--ease-out); }
}
.panel { position: relative; margin: 0; overflow: hidden; background: var(--plum-deep); }
.panel img {
  width: 100%; height: 100%;
  min-height: 15rem;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease);
  filter: saturate(0.86);
}
.panel:hover img, .panel:focus-within img { transform: scale(1.08); filter: saturate(1); }
.panel figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-2xl) var(--space-m) var(--space-m);
  background: linear-gradient(to top, rgba(74,31,76,0.95) 35%, rgba(74,31,76,0));
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step-2);
}
.panel figcaption::after {
  content: "";
  display: block;
  width: 2.5rem; height: 2px;
  background: var(--color-marigold);
  margin-top: 0.7rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.panel:hover figcaption::after { transform: scaleX(1); }

/* --------------------------------------------------------------- entries -- */
.entry-list { margin: 0; padding: 0; list-style: none; }
.entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s) var(--space-l);
  padding-block: var(--space-l);
  border-top: 1px solid var(--cream-line);
  margin: 0;
  transition: background-color var(--t-base) var(--ease);
}
.entry:last-child { border-bottom: 1px solid var(--cream-line); }
@media (min-width: 52rem) {
  .entry { grid-template-columns: 3.4rem minmax(0, 19rem) minmax(0, 1fr); align-items: start; }
}
.entry__icon { width: 3rem; height: 3rem; }
.entry__icon svg { width: 100%; height: 100%; }
.entry__icon svg circle:first-child {
  stroke-dasharray: 139; stroke-dashoffset: 139;
  transition: stroke-dashoffset 900ms var(--ease-out);
}
.entry.is-visible .entry__icon svg circle:first-child { stroke-dashoffset: 0; }
.entry h3 { margin: 0; font-size: var(--step-2); }
.entry__sub {
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--coral-ink); margin: var(--space-2xs) 0 0;
}
.section-plum .entry__sub, .section-indigo .entry__sub { color: var(--marigold-lite); }
.entry p { margin: 0; }
.section-plum .entry, .section-indigo .entry { border-top-color: rgba(255,255,255,0.24); }
.section-plum .entry:last-child, .section-indigo .entry:last-child { border-bottom-color: rgba(255,255,255,0.24); }

.prose-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-l) var(--space-xl); }
@media (min-width: 52rem) { .prose-grid { grid-template-columns: repeat(2, 1fr); } }
.prose-grid > div { border-top: 2px solid var(--color-marigold); padding-top: var(--space-s); }
.prose-grid h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }

.columns-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-l); }
@media (min-width: 46rem) { .columns-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } }
.columns-3 > div { border-top: 1px solid var(--cream-line); padding-top: var(--space-m); }
.section-plum .columns-3 > div, .section-indigo .columns-3 > div { border-top-color: rgba(255,255,255,0.28); }

.split { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .split--start { align-items: start; }
  .split--media-first .split__media { order: -1; }
}
.split figure { margin: 0; }
.split figure img { width: 100%; border-radius: var(--radius-m); object-fit: cover; }

/* Image mask reveal */
.mask-reveal { position: relative; overflow: hidden; border-radius: var(--radius-m); }
/* A flex figure would stretch the wipe overlay oddly; keep it a plain block. */
.hero-page figure.mask-reveal { display: block; text-align: center; }
.hero-page figure.mask-reveal img { margin-inline: auto; }
.js .mask-reveal::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--color-warm-cream);
  transform-origin: right;
  transition: transform 900ms var(--ease-out);
}
.section-plum .mask-reveal::after { background: var(--color-deep-plum); }
.section-indigo .mask-reveal::after { background: var(--color-royal-indigo); }
.section-shade .mask-reveal::after { background: var(--cream-shade); }
.section-marigold .mask-reveal::after { background: var(--color-marigold); }
.mask-reveal.is-visible::after { transform: scaleX(0); }
.mask-reveal img { transform: scale(1.08); transition: transform 1400ms var(--ease-out); }
.mask-reveal.is-visible img { transform: none; }

/* Looping video in a hero media slot. The rules above are written for <img>,
   so the sizing, radius and reveal scale are mirrored onto <video> rather than
   widening those selectors, which would also catch every inline image.
   media-loop__still is the frame shown when motion is not wanted; it doubles
   as the poster, so the swap is invisible. */
.hero-page figure video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(72svh, 36rem);
  margin-inline: auto;
  border-radius: var(--radius-m);
}
.mask-reveal video { transform: scale(1.08); transition: transform 1400ms var(--ease-out); }
.mask-reveal.is-visible video { transform: none; }
.media-loop__still { display: none; }

/* Pause control for the inline hero loops. WCAG 2.2.2 wants a way to stop
   motion that runs past five seconds and these loops run 10.5, so they carry
   the same control the homepage background does, moved in tight against the
   figure rather than sitting on the page gutter. */
.media-loop__toggle { right: 0.75rem; bottom: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  .media-loop video { display: none; }
  .media-loop .media-loop__still { display: block; }
  .mask-reveal video { transform: none !important; }
}

.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.2;
  color: var(--color-deep-plum);
  margin: 0;
  border-left: 2px solid var(--color-marigold);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 24ch;
}

/* --------------------------------------------------------------- guides -- */
.guides { display: grid; grid-template-columns: 1fr; gap: var(--space-l); }
@media (min-width: 48rem) { .guides { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } }
.guide {
  border-top: 2px solid var(--color-deep-plum);
  padding-top: var(--space-m);
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform var(--t-base) var(--ease-out);
}
.guide:hover { transform: translateY(-4px); }
.guide:nth-child(2) { border-top-color: var(--color-royal-indigo); }
.guide:nth-child(3) { border-top-color: var(--color-coral); }
.guide:nth-child(4) { border-top-color: var(--color-marigold); }
.guide h3 { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
.guide .btn { margin-top: auto; }

/* ------------------------------------------------------------ ecosystem -- */
.ecosystem { background: var(--indigo-deep); color: #E9E9F5; }
.ecosystem h2 { color: #fff; font-size: var(--step-3); }
.ecosystem .eyebrow { color: var(--color-marigold); }
.ecosystem-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: center; }
@media (min-width: 56rem) { .ecosystem-grid { grid-template-columns: minmax(0,1.4fr) auto; gap: var(--space-xl); } }

/* ------------------------------------------------------------ final cta -- */
/* ------------------------------------------------------------ statement -- */
/* One editorial pull quote standing where the certifications list used to be.
   It is deliberately the quietest markup on the page: a blockquote, a footer,
   and one arc. Everything else is type scale and vertical space. */
.statement-quote {
  position: relative;
  overflow-x: clip;
  background: var(--color-warm-cream);
  /* 70px at 375px wide, 134px at 1440, capped at 140 on very large screens. */
  padding-block: clamp(4rem, 3rem + 6vw, 8.75rem);
}
.statement-quote__inner { position: relative; z-index: 1; }
.statement-quote__body { margin: 0; }
.statement-quote__body p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 4.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-deep-plum);
  /* The container caps the measure at 62rem, which lands the quote on three
     to four lines across desktop widths without any manual breaks. */
  text-wrap: balance;
}
.statement-quote__by {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.statement-quote__name {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.statement-quote__org {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* The single signal element. Sized to sit under the quote rather than beside
   it, so it never competes for the reader's attention. */
.arc--statement-quote { width: min(19vw, 12.5rem); right: -3%; bottom: -18%; opacity: 0.4; }

/* Mobile is composed rather than shrunk: its own type scale, a wider gutter
   than the site default, and the arc pulled clear of the text. */
@media (max-width: 40rem) {
  .statement-quote__body p { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.16; }
  .statement-quote__inner { padding-inline: 0.75rem; }
  .arc--statement-quote { width: 30vw; right: -10%; bottom: -4%; opacity: 0.28; }
}

.final-cta { background: var(--color-marigold); color: var(--color-ink); text-align: center; }
.final-cta h2 { color: var(--plum-deep); max-width: 20ch; margin-inline: auto; }
.final-cta p { margin-inline: auto; color: #4A3A16; }
.final-cta .btn-solid {
  background: var(--plum-deep); color: #fff; border-color: var(--plum-deep); margin-top: var(--space-l);
}
.final-cta .btn-solid::before { background: #fff; }
.final-cta .btn-solid:hover, .final-cta .btn-solid:focus-visible { color: var(--plum-deep); }

/* ----------------------------------------------------------------- form -- */
.form-panel {
  background: var(--color-deep-plum);
  color: #fff;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  border-radius: var(--radius-m);
}
.form-panel h2 { color: #fff; font-size: var(--step-3); }
.field-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 40rem) { .field-grid { grid-template-columns: repeat(2, 1fr); } }
.field-grid .field-full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; color: #F0E4EF; }
.field .req { color: var(--marigold-lite); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--step-0); color: var(--color-ink);
  background: #fff; border: 1px solid transparent; border-radius: var(--radius-s);
  padding: 0.8rem 0.9rem; min-height: 48px; width: 100%;
  transition: box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--color-marigold); outline-offset: 2px;
}
.field .hint { font-size: var(--step--1); color: rgba(255,255,255,0.72); }
.field .error { font-family: var(--font-ui); font-size: var(--step--1); font-weight: 500; color: #FFD9A8; }
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--color-coral); box-shadow: 0 0 0 2px var(--color-coral);
}
.form-footnote { font-size: var(--step--1); color: rgba(255,255,255,0.72); margin-top: var(--space-s); }
.form-panel .btn-primary { width: 100%; justify-content: center; margin-top: var(--space-m); }
.form-status {
  margin-top: var(--space-m); padding: var(--space-m); border-radius: var(--radius-s);
  background: #fff; color: var(--color-ink); border-left: 4px solid var(--color-marigold);
}
.form-status[hidden] { display: none; }
/* Submission failure keeps the same panel but flags itself in Coral. */
.form-status.is-error { border-left-color: var(--color-coral); }
.form-status.is-error a { color: var(--color-royal-indigo); }
.form-status h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.signature {
  font-family: var(--font-display); font-size: var(--step-2);
  color: var(--color-deep-plum); margin: var(--space-l) 0 0; line-height: 1.2;
}
.signature span {
  display: block; font-family: var(--font-ui); font-size: var(--step--1);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-2xs);
}

/* Direct contact details. <address> italicises by default, which reads as an
   aside rather than as the primary way to reach the business. */
.contact-details {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.contact-details a {
  font-weight: 500;
  color: var(--color-royal-indigo);
  text-underline-offset: 0.18em;
}
.contact-details a:hover { color: var(--color-deep-plum); }
.contact-details span { color: var(--ink-muted); }

.social-row { display: flex; flex-wrap: wrap; gap: var(--space-m); list-style: none; margin: 0; padding: 0; }
.social-row a {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 500;
  text-decoration: none; color: inherit; min-height: 44px;
  transition: color var(--t-fast) var(--ease);
}
.social-row a:hover { color: var(--color-marigold); }
.social-row svg { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------- footer -- */
.site-footer { background: var(--plum-deep); color: rgba(255,255,255,0.82); padding-block: var(--space-2xl) var(--space-l); font-size: var(--step--1); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--space-l); } }
.site-footer h2 {
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-marigold); margin: 0 0 var(--space-s);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2xs); }
.site-footer a { color: rgba(255,255,255,0.82); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.site-footer a:hover { color: var(--color-marigold); }
.footer-logo img { width: 150px; }
.footer-tagline { font-family: var(--font-display); font-size: var(--step-0); color: var(--color-marigold); margin-top: var(--space-m); max-width: 22ch; }
.footer-bottom {
  margin-top: var(--space-xl); padding-top: var(--space-m);
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m);
  justify-content: space-between; align-items: center;
}
.footer-bottom ul { display: flex; gap: var(--space-m); }
.footer-bottom li { margin: 0; }

/* Sits under the fixed bar, so it needs to clear it. */
.breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--cream-line);
  background: var(--color-warm-cream);
  margin-top: 6.5rem;
}
.breadcrumb + .hero-page { padding-top: var(--space-xl); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; color: var(--ink-faint); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--cream-line); }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }

/* --------------------------------------------------------------- reveal --
   Hidden starting states apply only when scripting is available, so the page
   is fully readable if JavaScript never runs. */
.js .reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.reveal[data-delay="1"].is-visible { transition-delay: 90ms; }
.reveal[data-delay="2"].is-visible { transition-delay: 180ms; }
.reveal[data-delay="3"].is-visible { transition-delay: 270ms; }
.reveal[data-delay="4"].is-visible { transition-delay: 360ms; }

.js .stagger > * { opacity: 0; transform: translateY(16px); }
.stagger.is-visible > * { opacity: 1; transform: none; transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.stagger.is-visible > *:nth-child(1) { transition-delay: 40ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 220ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 340ms; }
.stagger.is-visible > *:nth-child(7) { transition-delay: 400ms; }
.stagger.is-visible > *:nth-child(8) { transition-delay: 460ms; }
.stagger.is-visible > *:nth-child(n+9) { transition-delay: 520ms; }

/* --------------------------------------------------- reduced motion off -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .reveal-words .word > span { transform: none !important; }
  .arc--draw circle, .arc--draw path,
  .conditions li svg circle,
  .entry__icon svg circle:first-child { stroke-dashoffset: 0 !important; }
  .mask-reveal::after { transform: scaleX(0) !important; }
  .mask-reveal img, .hero-full__media img, .hero-full__media video, .panel img { transform: none !important; }
  .arc--turn svg { transform: none !important; }
  .overlay-nav { transition: none; }
}

@media print {
  .rail, .topbar, .overlay-nav, .site-footer, .btn, .arc { display: none; }
  body { padding-left: 0; background: #fff; color: #000; }
}