/* Human First, single stylesheet.
   Built 2026-08-01 by concatenating, in exact load order:
     css/style-v3.css -> css/home-v4.css -> css/home-v5.css
   Cascade order preserved byte for byte. Page-specific inline <style>
   blocks on referral.html and work-with-us.html are deliberately NOT
   merged, so their overrides cannot leak onto index.html. */


/* ==========================================================================
   1. style-v3.css
   ========================================================================== */
/* ============================================================
   HUMAN FIRST, Global Design System
   Brand: Vivid Vermilion #FF6020 | Dark Charcoal #2F2F2F
   Fonts: Barlow Condensed (display) + Inter (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,800&family=Inter:wght@300;400;500;600&display=swap');

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --vv:   #FF6020;
  --bo:   #CC5500;
  --clg:  #E2E6EA;
  --dc:   #2F2F2F;
  --white:#FFFFFF;

  --font-display: 'Barlow Condensed', 'Impact', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --radius: 4px;
  --transition: 240ms cubic-bezier(0.25, 1, 0.5, 1);

  /* Easing curves, use these instead of bare 'ease' */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --max-w: 1280px;
  --pad-x: clamp(20px, 5vw, 80px);
  --section-y: clamp(64px, 9vw, 120px);

  /* Text colour scale, use instead of hardcoded grays */
  --text-primary:   #2F2F2F;   /* = var(--dc) */
  --text-secondary: #444444;   /* body copy on white */
  --text-muted:     #666666;   /* secondary labels, captions */
  --text-faint:     #999999;   /* placeholder, disabled */
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--dc);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select {
  font-family: var(--font-body);
  font-size: 1rem;
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section {
  padding-block: var(--section-y);
}
.section--dark  { background: var(--dc); color: var(--white); }
.section--grey  { background: var(--clg); }
.section--white { background: var(--white); }
.section--vv    { background: var(--vv); color: var(--white); }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vv);
  margin-bottom: 14px;
  display: block;
}
.section--dark .eyebrow { color: var(--vv); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.0;
  text-transform: uppercase;
}
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 6rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: 0; }

/* Design system Display heading sizes */
.display-xxl { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 10vw, 6rem);  line-height: 0.94; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.display-xl  { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 0.94; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.display-lg  { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 0.94; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.display-md  { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem);   line-height: 0.96; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; }
.display-sm  { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 0.96; letter-spacing: 0em; text-transform: uppercase; margin: 0; }

p {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.75;
  color: inherit;
}
.lead {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.65;
  font-weight: 400;
  max-width: 68ch;
}
.section--dark p, .section--dark .lead { color: rgba(255,255,255,0.82); }
.section--vv p, .section--vv .lead { color: rgba(255,255,255,0.9); }

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--vv);
  border-left: 4px solid var(--vv);
  padding-left: 24px;
  margin-block: 40px;
  line-height: 1.4;
}
.section--dark .pull-quote { color: var(--vv); border-color: var(--vv); }

/* ── BUTTONS, exact from Primitives.jsx ─────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 12px 20px;
  border-radius: var(--radius);
  transition: background 220ms var(--ease-out-quart),
              transform  200ms var(--ease-out-quart),
              box-shadow 200ms var(--ease-out-quart),
              opacity    180ms ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  will-change: transform;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: scale(0.97); box-shadow: none !important; transition-duration: 80ms; }
.btn--loading {
  opacity: 0.7;
  pointer-events: none;
}
.btn--lg {
  padding: 16px 26px;
  font-size: 15px;
}
.btn-primary {
  background: var(--vv);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(255,96,32,0.30), 0 1px 2px rgba(0,0,0,0.08);
}
.btn-primary:hover {
  background: var(--bo);
  box-shadow: 0 4px 14px rgba(255,96,32,0.38), 0 2px 4px rgba(0,0,0,0.08);
}
.btn-secondary {
  background: transparent;
  color: var(--dc);
  border: 2px solid var(--dc);
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--dc);
  color: var(--white);
}
.section--dark .btn-secondary {
  color: var(--white);
  border-color: var(--white);
}
.section--dark .btn-secondary:hover {
  background: var(--white);
  color: var(--dc);
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
  align-items: center;
}

/* ── NAVIGATION, exact from Primitives.jsx ──────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid rgba(47,47,47,0.12);
  transition: box-shadow 240ms var(--ease-out-quart), background 280ms var(--ease-out-quart), border-color 240ms var(--ease-out-quart);
}
/* Offset body so fixed nav doesn't cover content */
body { padding-top: 64px; }
/* Hero pages: hero slides under transparent nav, no offset needed */
body.hero-page { padding-top: 0; }
.site-nav.scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,0.10);
}
/* Transparent nav on dark-hero pages before scroll */
.hero-page .site-nav:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}
.hero-page .site-nav:not(.scrolled) .nav-links a,
.hero-page .site-nav:not(.scrolled) .nav-mobile a {
  color: rgba(255,255,255,0.82);
}
.hero-page .site-nav:not(.scrolled) .nav-links a:hover,
.hero-page .site-nav:not(.scrolled) .nav-links a.active {
  color: var(--white);
}
.hero-page .site-nav:not(.scrolled) .nav-links .nav-cta {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.hero-page .site-nav:not(.scrolled) .nav-logo img {
  filter: brightness(10);
}
.hero-page .site-nav:not(.scrolled) .nav-hamburger span {
  background: var(--white);
}
.hero-page .site-nav:not(.scrolled) .nav-link--admin {
  border-color: rgba(255,255,255,0.4) !important;
  color: rgba(255,255,255,0.9) !important;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  gap: 32px;
}
.nav-logo img {
  height: 30px;
  width: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--dc);
  text-transform: none;
  transition: color 200ms var(--ease-out-quart);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
}
/* Slide-underline on plain nav links (not .nav-cta or .nav-link--admin) */
.nav-links a:not(.nav-cta):not(.nav-link--admin)::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--vv);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out-quart);
}
.nav-links a:not(.nav-cta):not(.nav-link--admin):hover::after,
.nav-links a:not(.nav-cta):not(.nav-link--admin).active::after { transform: scaleX(1); }
.nav-links a:hover,
.nav-links a.active { color: var(--vv); }
.nav-cta {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  background: var(--vv);
  color: var(--white) !important;
  padding: 11px 18px;
  border-radius: var(--radius);
  transition: background var(--transition) !important;
  white-space: nowrap;
  line-height: 1;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
}
.nav-cta:hover { background: var(--bo) !important; color: var(--white) !important; }

/* Admin Portal nav link, outlined pill to distinguish from worker link */
.nav-link--admin {
  border: 1.5px solid rgba(47,47,47,0.28);
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dc);
  white-space: nowrap;
  line-height: 1;
  display: inline-block;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.nav-link--admin:hover {
  border-color: var(--dc);
  background: rgba(47,47,47,0.06);
  color: var(--dc);
}

/* Mobile nav */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--dc);
  border-radius: 2px;
  transition: all var(--transition);
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  background: var(--dc);
  padding: 24px var(--pad-x) 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color var(--transition);
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover { color: var(--vv); }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  padding-top: 120px;
  padding-bottom: 140px;
  min-height: 80vh;
  display: flex;
  align-items: center;
}
.hero--dark {
  background: var(--dc);
  color: var(--white);
}
.hero--medium {
  min-height: 56vh;
}
.hero-inner {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.hero-inner--split {
  grid-template-columns: 1fr 1fr;
}
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vv);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--vv);
  flex-shrink: 0;
}
.hero h1 {
  color: var(--white);
  margin-bottom: 24px;
}
/* Large display headings in hero need more breathing room */
.hero .display-xl,
.hero .display-lg,
.hero .display-md {
  margin-bottom: 32px;
}
.hero .lead {
  margin-bottom: 0;
  max-width: 60ch;
}
.hero--dark .lead { color: rgba(255,255,255,0.8); }
/* Hero CTA button group */
.hero .btn-group { margin-top: 40px; }

/* ── PILLAR STRIP ─────────────────────────────────────────── */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.pillar {
  padding: 48px 36px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.pillar:last-child { border-right: none; }
.pillar-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--vv);
  line-height: 1;
  margin-bottom: 16px;
}
.pillar h4 {
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
}
.pillar p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
}

/* ── TWO COLUMN CONTENT ──────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.two-col--reverse { direction: rtl; }
.two-col--reverse > * { direction: ltr; }
.two-col--wide { grid-template-columns: 1.15fr 1fr; }

/* ── SERVICES GRID ───────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--clg);
  border: 1px solid var(--clg);
}
.service-card {
  background: var(--white);
  padding: 40px 36px;
  transition: background 280ms var(--ease-out-quart),
              transform  280ms var(--ease-out-quart),
              box-shadow 280ms var(--ease-out-quart),
              color       220ms var(--ease-out-quart);
  will-change: transform;
}
.service-card:hover {
  background: var(--dc);
  color: var(--white);
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}
.service-card:hover .service-tag { color: var(--vv); }
.service-card:hover p { color: rgba(255,255,255,0.8); }
.service-num {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--vv);
  margin-bottom: 20px;
}
.service-card h3 {
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  transition: color var(--transition);
}
.service-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(47,47,47,0.75);
  transition: color var(--transition);
}
.service-tag {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47,47,47,0.4);
  transition: color var(--transition);
}

/* ── SERVICE PILL STRIP ──────────────────────────────────── */
.pill-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.pill {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 2px solid var(--dc);
  border-radius: var(--radius);
  color: var(--dc);
  transition: all var(--transition);
  text-decoration: none;
}
.pill:hover {
  background: var(--vv);
  border-color: var(--vv);
  color: var(--white);
}

/* ── VALUES ──────────────────────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: rgba(255,255,255,0.08);
}
.value-card {
  padding: 48px 40px;
  background: rgba(255,255,255,0.04);
  transition: background var(--transition);
}
.value-card:hover { background: rgba(255,96,32,0.12); }
.value-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: rgba(255,96,32,0.25);
  line-height: 1;
  margin-bottom: 16px;
}
.value-card h3 {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--white);
  margin-bottom: 12px;
}
.value-card p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
}

/* ── TEAM ────────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--clg);
}
.team-card {
  background: var(--white);
  padding: 40px 32px;
}
.team-card--director {
  grid-column: 1 / -1;
  background: var(--dc);
  color: var(--white);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  padding: 48px;
}
.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--vv);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--white);
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.team-avatar--large {
  width: 120px;
  height: 120px;
  font-size: 2rem;
}
.team-card--director .team-avatar { background: var(--vv); }
.team-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.team-role {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--vv);
  margin-bottom: 16px;
}
.team-card--director .team-role { color: var(--vv); }
.team-card p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(47,47,47,0.75);
}
.team-card--director p { color: rgba(255,255,255,0.78); }

/* ── CALLOUT STRIP ───────────────────────────────────────── */
.callout-strip {
  background: var(--vv);
  padding: 56px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.callout-strip h3 {
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--white);
  max-width: 60ch;
}
.callout-strip .btn-secondary {
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
.callout-strip .btn-secondary:hover {
  background: var(--white);
  color: var(--vv);
}

/* ── COORDINATOR CALLOUT ─────────────────────────────────── */
.coordinator-box {
  background: var(--dc);
  color: var(--white);
  padding: 56px 48px;
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.coordinator-box h3 { color: var(--white); margin-bottom: 16px; }
.coordinator-box p { color: rgba(255,255,255,0.78); font-size: 0.95rem; max-width: 56ch; }
.coordinator-details {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.coordinator-detail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.detail-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vv);
  white-space: nowrap;
  padding-top: 2px;
  min-width: 130px;
}
.detail-text {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

/* ── CIRCLE SQUARE BOX ───────────────────────────────────── */
.cs-box {
  border: 2px solid var(--clg);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
  border-radius: var(--radius);
}
.cs-icon {
  width: 56px;
  height: 56px;
  background: var(--vv);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.75rem;
  color: var(--white);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.cs-box p { font-size: 0.9rem; color: rgba(47,47,47,0.78); max-width: 64ch; }
.cs-box a { color: var(--vv); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── CTA SECTION ─────────────────────────────────────────── */
.cta-section {
  background: var(--dc);
  color: var(--white);
  text-align: center;
  padding-block: clamp(72px, 10vw, 120px);
}
.cta-section h2 { color: var(--white); margin-bottom: 20px; }
.cta-section .lead { color: rgba(255,255,255,0.78); margin-inline: auto; }
.cta-section .btn-group { justify-content: center; }

/* ── FORMS ───────────────────────────────────────────────── */
.form-section {
  background: var(--white);
}
.form-container {
  max-width: 820px;
  margin-inline: auto;
}
.form-group {
  margin-bottom: 24px;
}
.form-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dc);
  margin-bottom: 8px;
}
.form-label .req { color: var(--vv); margin-left: 2px; }
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--clg);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--dc);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--vv);
  box-shadow: 0 0 0 3px rgba(255,96,32,0.12);
  background: var(--white);
}
/* Subtle label colour shift when its field is focused */
.form-group:focus-within .form-label {
  color: var(--vv);
}
.form-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232F2F2F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-hint {
  font-size: 0.8rem;
  color: rgba(47,47,47,0.5);
  margin-top: 6px;
  line-height: 1.5;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-section-header {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1.5px solid var(--clg);
  margin-bottom: 32px;
}
.form-section-header:first-of-type {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}
.form-section-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dc);
  margin-bottom: 6px;
}
.form-section-desc {
  font-size: 0.975rem;
  color: rgba(47,47,47,0.6);
}
.form-radio-group,
.form-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.radio-label,
.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.radio-label input,
.check-label input {
  accent-color: var(--vv);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.form-consent {
  background: var(--clg);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 28px;
}
.form-consent p {
  font-size: 0.88rem;
  color: rgba(47,47,47,0.8);
  line-height: 1.65;
}
.form-submit {
  text-align: center;
}
.form-submit .btn {
  min-width: 240px;
  justify-content: center;
  padding: 18px 36px;
  font-size: 0.8rem;
}
.form-success {
  display: none;
  text-align: center;
  padding: 48px 24px;
}
.form-success h3 {
  color: var(--vv);
  margin-bottom: 16px;
}
.form-success p { color: rgba(47,47,47,0.7); }

/* ── CONTACT CARDS ───────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--clg);
}
.contact-card {
  background: var(--white);
  padding: 44px 40px;
  transition: transform 280ms var(--ease-out-quart), box-shadow 280ms var(--ease-out-quart);
  will-change: transform;
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.contact-card--dark {
  background: var(--dc);
  color: var(--white);
}
.contact-icon {
  width: 48px;
  height: 48px;
  background: rgba(255,96,32,0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.contact-card--dark .contact-icon { background: rgba(255,96,32,0.2); }
.contact-icon svg { width: 20px; height: 20px; stroke: var(--vv); fill: none; stroke-width: 2; }
.contact-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vv);
  margin-bottom: 8px;
}
.contact-value {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dc);
  margin-bottom: 8px;
  line-height: 1.3;
}
.contact-card--dark .contact-value { color: var(--white); }
.contact-card p {
  font-size: 0.88rem;
  color: rgba(47,47,47,0.65);
  line-height: 1.6;
}
.contact-card--dark p { color: rgba(255,255,255,0.65); }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  background: var(--dc);
  color: rgba(255,255,255,0.65);
  padding-block: 64px 40px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 0;
}
.footer-brand-col img {
  height: 32px;
  width: auto;
  margin-bottom: 20px;
}
.footer-brand-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  max-width: 28ch;
}
.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 20px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-tagline {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vv);
  margin-bottom: 20px;
}
.footer-contact a {
  display: block;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
  transition: color var(--transition);
}
.footer-contact a:hover { color: var(--white); }
.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.footer-links a,
.footer-links span {
  display: block;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--white); }
.footer-links span { color: rgba(255,255,255,0.4); }
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--transition);
}
.footer-social:hover { color: var(--white); }
.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.footer-bottom {
  padding-top: 28px;
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-acknowledgement {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
  max-width: 70ch;
}
.footer-copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}

/* ── STAT STRIP ──────────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-block: 64px;
}
.stat-item {
  padding: 40px 36px;
  border-right: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--vv);
  line-height: 1;
  margin-bottom: 10px;
}
.stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease-out-quart), transform 0.65s var(--ease-out-quart);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1.visible { transition-delay: 0.12s; }
.reveal-delay-2.visible { transition-delay: 0.24s; }
.reveal-delay-3.visible { transition-delay: 0.36s; }
.reveal-delay-4.visible { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; will-change: auto; }
}

/* ── SKIP LINK (A11Y) ────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--vv);
  color: var(--white);
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .pillar:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coordinator-box { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-card--director { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root { --section-y: 64px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .hero { min-height: 80vh; }
  .hero-inner--split { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .two-col--reverse { direction: ltr; }
  .values-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .team-card--director { grid-template-columns: 1fr; text-align: left; }
  .callout-strip { flex-direction: column; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .stat-item:last-child { border-bottom: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .services-grid { grid-template-columns: 1fr; }
  .cs-box { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .display-xl { font-size: 2.4rem; }
  .pillar { border-right: none !important; }
  .pillars { grid-template-columns: 1fr; }
  .btn-group { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; justify-content: center; }
}

/* ── UTILITY ─────────────────────────────────────────────── */
.text-vv { color: var(--vv); }
.text-white { color: var(--white); }
.text-dc { color: var(--dc); }
.mb-0 { margin-bottom: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }
.mb-24 { margin-bottom: 24px; }
.mb-40 { margin-bottom: 40px; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── PAGE HERO VARIANTS ──────────────────────────────────── */
.page-hero {
  background: var(--dc);
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,96,32,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero h1 { color: var(--white); margin-bottom: 24px; }
.page-hero .lead { color: rgba(255,255,255,0.78); max-width: 64ch; }

/* ── PHOTO TREATMENTS ─────────────────────────────────────── */

/* Hero with photo background */
.hero--photo {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(47,47,47,0.92) 0%,
    rgba(47,47,47,0.72) 55%,
    rgba(47,47,47,0.48) 100%
  );
  z-index: 0;
  pointer-events: none;
}
/* Brand tint layer, creates the orange wash effect on photos */
.hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,96,32,0.14);
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;
}
.hero--photo .container,
.hero--photo .hero-inner { position: relative; z-index: 1; }

/* Page hero with photo background */
.page-hero--photo {
  background-size: cover;
  background-position: center top;
}
.page-hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(47,47,47,0.80);
  z-index: 0;
  pointer-events: none;
  border-radius: 0;
}
/* Brand tint on page hero photo */
.page-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,96,32,0.12);
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;
}
.page-hero--photo .container { position: relative; z-index: 1; }

/* Inline photo wrap with brand colour tint overlay */
.photo-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  flex-shrink: 0;
}
.photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The brand tint, makes lighter clothing areas take on the Vivid Vermilion */
.photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,96,32,0.18);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.photo-wrap--tall  { aspect-ratio: 3 / 4; }
.photo-wrap--wide  { aspect-ratio: 16 / 9; }
.photo-wrap--square { aspect-ratio: 1 / 1; }
.photo-wrap--natural { aspect-ratio: 4 / 3; }

/* Photo strip, three images side by side */
.photo-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  overflow: hidden;
}
.photo-strip .photo-wrap {
  aspect-ratio: 3 / 2;
  border-radius: 0;
}

/* Section with background photo (used on dark sections) */
.section--photo-bg {
  background-size: cover;
  background-position: center;
  position: relative;
}
.section--photo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(47,47,47,0.88);
  z-index: 0;
  pointer-events: none;
}
.section--photo-bg .container { position: relative; z-index: 1; }

@media (max-width: 768px) {
  .photo-strip {
    grid-template-columns: 1fr;
  }
  .photo-strip .photo-wrap {
    aspect-ratio: 16 / 9;
  }
  .photo-wrap--tall { aspect-ratio: 4 / 3; }
}

/* ── INNER PAGE HERO ─────────────────────────────────────── */
/* Charcoal hero for inner pages (about, stories) */
.inner-hero {
  background: var(--dc);
  color: var(--white);
  padding-top: 120px;
  padding-bottom: 100px;
}
.inner-hero .display-xl { margin-bottom: 32px; }
.hero-lead {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: rgba(255,255,255,0.80);
  max-width: 52ch;
  line-height: 1.5;
  font-weight: 500;
  margin: 0;
}
.hero-sublead {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  max-width: 52ch;
  line-height: 1.6;
  margin-top: 16px;
}

/* ── ABOUT PAGE, STORY GRID ─────────────────────────────── */
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.about-story-body { padding-top: 8px; }
.about-story-lead {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--dc);
  line-height: 1.4;
  margin-bottom: 24px;
}
.about-story-p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}
.about-story-p:last-child { margin-bottom: 0; }

/* ── STAT BAR, big numbers on dark bg ───────────────────── */
.stat-bar {
  background: var(--dc);
  padding-block: 64px;
}
.stat-bar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.stat-bar-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 800;
  color: var(--vv);
  line-height: 1;
}
.stat-bar-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 8px;
}

/* ── VALUE PANELS, 3-col dark section ───────────────────── */
.value-panels {
  background: #1e1e1e;
  padding-block: 96px;
}
.value-panels-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 64px;
}
.value-panels-intro { padding-bottom: 8px; }
.value-panels-tagline {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin-bottom: 16px;
}
.value-panels-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
}
.value-panels-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.value-panel {
  background: #2a2a2a;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
}
.value-panel-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--vv);
}
.value-panel-content {
  margin-top: auto;
  padding-top: 48px;
}
.value-panel-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.value-panel-body {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* ── STORY CARDS, coming-soon grid ─────────────────────── */
.story-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--clg);
}
.story-card {
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.story-card--white  { background: var(--white); }
.story-card--soft   { background: rgba(47,47,47,0.04); }
.story-card--faint  { background: rgba(47,47,47,0.06); }
.story-card-tag {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.story-card--white .story-card-tag  { color: var(--vv); }
.story-card--soft  .story-card-tag  { color: rgba(47,47,47,0.25); }
.story-card--faint .story-card-tag  { color: rgba(47,47,47,0.2); }
.story-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.story-card-bar {
  width: 48px;
  height: 3px;
  margin-bottom: 28px;
}
.story-card--white .story-card-bar  { background: var(--vv); }
.story-card--soft  .story-card-bar  { background: rgba(47,47,47,0.12); }
.story-card--faint .story-card-bar  { background: rgba(47,47,47,0.1); }
.story-card-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin-bottom: 20px;
}
.story-card--white .story-card-title { color: var(--dc); }
.story-card--soft  .story-card-title { color: rgba(47,47,47,0.18); }
.story-card--faint .story-card-title { color: rgba(47,47,47,0.15); }
.story-card-body { font-size: 0.875rem; line-height: 1.7; }
.story-card--white .story-card-body  { color: rgba(47,47,47,0.45); }
.story-card--soft  .story-card-body  { color: rgba(47,47,47,0.3); }
.story-card--faint .story-card-body  { color: rgba(47,47,47,0.25); }
.story-context-grid {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--clg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.story-context-body p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 20px;
}
.story-context-body p:last-of-type { margin-bottom: 32px; }

/* ── WORK-WITH-US COMPONENTS ─────────────────────────────── */
.quality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid var(--clg);
}
.quality-cell {
  padding: 36px 32px;
  border: 1px solid var(--clg);
}
.quality-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--vv);
  margin-bottom: 12px;
}
.quality-body {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.req-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.req-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.req-arrow {
  color: var(--vv);
  font-family: var(--font-display);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}
.req-text { font-size: 0.95rem; line-height: 1.6; }
.cta-col-note {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
}
.cta-col-note a {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

/* ── BUTTON VARIANTS ─────────────────────────────────────── */
.btn-dark {
  background: var(--dc);
  color: var(--white);
}
.btn-dark:hover {
  background: rgba(47,47,47,0.85);
  transform: translateY(-2px);
}
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.8);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
}

/* ── FOOTER ITALIC VARIANT ───────────────────────────────── */
.footer-copy--italic { font-style: italic; }

/* ── CONTACT CARD VARIANTS ───────────────────────────────── */
/* Smaller font for long email address in contact value */
.contact-value--email { font-size: clamp(0.75rem, 1.4vw, 1rem); }
/* Contact links inherit colour from card context */
.contact-card a { color: inherit; text-decoration: none; }

/* ── FORM ALIGNMENT VARIANTS ─────────────────────────────── */
.form-submit--left  { text-align: left; }
.form-success--left { text-align: left; }

/* ── NUDGE BOX (dark section sidebar callout) ────────────── */
.nudge-box {
  background: rgba(255,255,255,0.05);
  padding: 40px;
  border-radius: var(--radius);
}
.nudge-box .eyebrow { color: var(--vv); }
.nudge-box h3 { color: var(--white); margin: 12px 0 16px; }
.nudge-box p  { color: rgba(255,255,255,0.72); font-size: 0.9rem; margin-bottom: 24px; }

/* ── RESPONSIVE, inner page grids ──────────────────────── */
@media (max-width: 900px) {
  .about-story-grid,
  .value-panels-header,
  .story-context-grid { grid-template-columns: 1fr; gap: 40px; }
  .stat-bar-grid       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-panels-grid   { grid-template-columns: 1fr; }
  .story-cards-grid    { grid-template-columns: 1fr; }
  .quality-grid        { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stat-bar-grid   { grid-template-columns: 1fr; }
  .about-story-grid { gap: 32px; }
  .story-context-grid { gap: 40px; }
}

/* ── HERO ENTRANCE ANIMATION ─────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.hero-animate   {
  animation: fadeUp 0.9s var(--ease-out-expo) both;
  will-change: opacity, transform;
}
.hero-animate-1 { animation-delay: 0.06s; }
.hero-animate-2 { animation-delay: 0.20s; }
.hero-animate-3 { animation-delay: 0.34s; }
.hero-animate-4 { animation-delay: 0.50s; }
@media (prefers-reduced-motion: reduce) {
  .hero-animate { animation: none; will-change: auto; }
}

/* ── FAQ ACCORDION ───────────────────────────────────────── */
.faq-list { max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--clg); }
.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  gap: 16px;
}
.faq-trigger:hover { color: var(--vv); }
.faq-icon {
  transition: transform 260ms var(--ease-out-quart);
  flex-shrink: 0;
  color: var(--vv);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}
.faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-body {
  padding: 0 0 24px;
  color: var(--text-secondary);
  line-height: 1.75;
  font-size: 0.95rem;
  max-width: 68ch;
}

/* ── STORY CARD ATTRIBUTION ──────────────────────────────── */
.story-card-attribution {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 24px;
  font-style: italic;
}

/* ── HOME, SERVICES SECTION ─────────────────────────────── */
.home-services-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 80px;
  align-items: start;
  margin-bottom: 64px;
}
.home-services-header h2 { line-height: 0.95; }
.home-services-header-lead {
  display: flex;
  align-items: center;
}
.home-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid var(--clg);
}
.home-service-cell {
  padding: 36px 28px;
  border: 1px solid var(--clg);
  transition: background 280ms var(--ease-out-quart),
              transform  280ms var(--ease-out-quart),
              box-shadow 280ms var(--ease-out-quart);
  will-change: transform;
}
.home-service-cell:hover {
  background: var(--dc);
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.10);
}
.home-service-cell svg {
  margin-bottom: 24px;
  display: block;
  transition: stroke 220ms var(--ease-out-quart),
              transform 280ms var(--ease-out-quart);
}
.home-service-cell:hover svg {
  stroke: var(--vv);
  transform: translateY(-3px);
}
.home-service-cell h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  transition: color 220ms var(--ease-out-quart);
}
.home-service-cell:hover h3 { color: var(--white); }
.home-service-cell p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-family: var(--font-body);
  font-weight: 400;
  transition: color 220ms var(--ease-out-quart);
}
.home-service-cell:hover p { color: rgba(255,255,255,0.72); }

/* ── HOME, DIFF (FOUR THINGS) SECTION ──────────────────── */
.home-diff-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid rgba(0,0,0,0.12);
}
.home-diff-row:last-child { border-bottom: 1px solid rgba(0,0,0,0.12); }
.home-diff-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--vv);
}
.home-diff-title {
  font-size: 1.05rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--dc);
  line-height: 1.3;
}
.home-diff-body {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-family: var(--font-body);
  font-weight: 400;
}

/* ── HOME, CTA SECTION ──────────────────────────────────── */
.home-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.home-cta-grid h2 { font-size: clamp(3.5rem, 8vw, 7rem); }
.home-cta-lead {
  color: rgba(255,255,255,0.80);
  margin-bottom: 40px;
}
.home-cta-call {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.home-cta-call-note {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
}
.home-cta-call-note a { color: var(--white); font-weight: 600; }

/* ── HOME, RESPONSIVE ───────────────────────────────────── */
@media (max-width: 900px) {
  .home-services-header { grid-template-columns: 1fr; gap: 24px; }
  .home-services-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-cta-grid        { grid-template-columns: 1fr; gap: 40px; }
  .home-diff-row        { grid-template-columns: 56px 1fr; }
  .home-diff-body       { grid-column: 2; margin-top: -8px; }
}
@media (max-width: 640px) {
  .home-services-grid { grid-template-columns: 1fr; }
  .home-diff-row      { grid-template-columns: 1fr; gap: 8px; }
  .home-diff-num      { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════
   REVAMP, Split Hero + Services Featured + Team Hover
   ══════════════════════════════════════════════════════════ */

/* ── HERO SPLIT ──────────────────────────────────────────── */
.hero--split {
  padding: 0;
  min-height: 88vh;
  display: grid;
  /* Orange panel: max 36% of viewport, min 260px BUT never more than 40% of the viewport */
  grid-template-columns: 1fr min(38vw, 440px);
  overflow: hidden;
  background: linear-gradient(
    to right,
    var(--dc) 0%,
    var(--dc) calc(100% - min(38vw, 440px)),
    var(--vv) calc(100% - min(38vw, 440px)),
    var(--vv) 100%
  );
}
.hero-split-panel { align-self: stretch; }
.hero-split-text {
  background: var(--dc);
  color: var(--white);
  display: flex;
  align-items: center;
  padding-block: clamp(80px, 8vw, 120px);
}
.hero-split-text .lead { color: rgba(255,255,255,0.82); }
.hero-split-text p { color: rgba(255,255,255,0.82); }
.hero-split-inner {
  width: 100%;
  /* Align with the site container's left padding, never right-align */
  padding-inline: var(--pad-x);
  /* Content readable up to 660ch, but fills the panel fully */
  max-width: 660px;
}

/* Hero panel, orange column */
.hero-split-panel {
  background: var(--vv);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 56px);
  gap: 40px;
}

/* Truths list */
.hero-truths {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero-truth {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-truth-line {
  display: block;
  width: 28px;
  height: 2px;
  background: rgba(255,255,255,0.45);
  border-radius: 1px;
}
.hero-truth-text {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
}

/* Panel CTA */
.hero-panel-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 200ms var(--ease-out-quart);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.hero-panel-cta:hover { color: var(--white); border-bottom-color: var(--white); }

/* ── SERVICES, FEATURED FIRST CELL ─────────────────────── */
.home-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid var(--clg);
  background: var(--clg);
}
.home-service-cell--featured {
  grid-column: span 1; /* no span, clean equal grid */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--dc) !important;
}
.home-service-cell--featured svg { stroke: var(--vv) !important; }
.home-service-cell--featured h3 { color: var(--white); font-size: 1.15rem; margin-bottom: 10px; }
.home-service-cell--featured p { color: rgba(255,255,255,0.65); }
.home-service-cell--featured:hover {
  background: #222 !important;
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.home-service-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vv);
  text-decoration: none;
  transition: color 200ms var(--ease-out-quart);
}
.home-service-link:hover { color: rgba(255,96,32,0.75); }

/* ── TEAM CARD HOVER PHOTO OVERLAY ──────────────────────── */
.team-card-photo {
  position: relative;
  overflow: hidden;
}
.team-card-overlay {
  position: absolute;
  inset: 0;
  background: var(--vv);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px 22px;
  transition: opacity 280ms var(--ease-out-quart);
}
.team-card:hover .team-card-overlay { opacity: 1; }
.team-card-overlay-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.2;
}
.team-card-overlay-role {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
  margin-top: 3px;
  line-height: 1.4;
}

/* ── TEAM CARD QUOTE, fix side-stripe ban ───────────────── */
.team-card-quote {
  margin-top: 18px;
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(47,47,47,0.5);
  background: rgba(255,96,32,0.05);
  border-radius: 3px;
  padding: 10px 14px;
  line-height: 1.65;
  border-left: none; /* removed side-stripe */
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Reduce orange panel to not dominate on mid-size screens */
  .hero--split { grid-template-columns: 1fr clamp(260px, 28vw, 380px); }
}
@media (max-width: 900px) {
  .hero--split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-split-text { padding-block: clamp(80px, 10vw, 120px); }
  .hero-split-inner { max-width: 100%; margin-left: 0; }
  .hero-split-panel {
    min-height: 200px;
    justify-content: flex-start;
    padding: 40px var(--pad-x);
  }
  .hero-truths { flex-direction: row; flex-wrap: wrap; gap: 20px 32px; }
  .hero-truth { flex-direction: row; gap: 10px; align-items: center; }
  .hero-truth-line { width: 20px; flex-shrink: 0; }
  .home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-services-grid { grid-template-columns: 1fr; }
  .hero-split-panel { display: none; }
}


/* ==========================================================================
   2. home-v4.css
   ========================================================================== */
/* ============================================================
   HUMAN FIRST, home-v4.css
   Single-page overlay on top of style-v3.css.
   ONLY new rules + token overrides live here. style-v3.css is
   never edited. Palette softened: light/airy, cool neutrals,
   orange used sparingly as an accent.
   ============================================================ */

/* ── PALETTE OVERRIDE (cool neutrals, brand tokens kept) ───── */
:root {
  /* brand tokens (--vv, --dc, fonts) inherited from style-v3.css */
  --surface-0: #FBFBFC;   /* near-white page surface */
  --surface-1: #F4F5F7;   /* cool light grey section */
  --hairline:  #E7E9ED;   /* cool hairline divider */
  --nav-h: 64px;

  /* darken body text scale for >= 4.5:1 contrast */
  --text-secondary: #4A4A4A;
  --text-muted:     #5E5E5E;
}

body { background: var(--surface-0); }

/* Re-map section surfaces to the cool neutrals */
.section--white { background: var(--surface-0); }
.section--grey  { background: var(--surface-1); }

/* Anchor targets clear the fixed nav */
#home, #about, #services, #team, #testimonials, #work, #contact {
  scroll-margin-top: var(--nav-h);
}

/* ── MOTION GATING (reveals only hide under html.js-motion) ── */
/* style-v3 sets .reveal{opacity:0} globally; neutralise that so
   content is visible without JS, then re-hide only when motion
   is on (matches motion.js contract). */
.reveal { opacity: 1; transform: none; }
html.js-motion .reveal { opacity: 0; transform: translateY(20px); }
html.js-motion .reveal.visible { opacity: 1; transform: none; }
html.js-motion [data-reveal-group] > * { opacity: 0; }

/* Hero: CSS keyframe is the no-JS fallback; only hide under js-motion */
html.js-motion .hero-animate { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html.js-motion .reveal,
  html.js-motion [data-reveal-group] > *,
  html.js-motion .hero-animate { opacity: 1 !important; transform: none !important; }
  .hero-animate { animation: none !important; }
  [data-parallax] { transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   HERO, light & airy (charcoal text on near-white)
   ============================================================ */
.hf-hero {
  background: var(--surface-0);
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: clamp(72px, 12vh, 140px);
  position: relative;
  overflow: hidden;
}
/* faint cool wash, top-right, no orange tint */
.hf-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 680px; height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,47,47,0.05) 0%, transparent 68%);
  pointer-events: none;
}
.hf-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  width: 100%;
}
.hf-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.hf-hero-eyebrow::before {
  content: '';
  width: 30px; height: 2px;
  background: var(--vv);
  flex-shrink: 0;
}
.hf-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7.5vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--dc);
  margin: 0 0 28px;
  text-wrap: balance;
}
.hf-hero h1 .hf-glyph { color: var(--vv); }   /* the only orange glyph */
.hf-hero .lead {
  color: var(--text-secondary);
  font-size: clamp(1.125rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 36px;
}
.hf-hero .btn-group { margin-top: 0; }

/* Hero side card, truths, calm not loud */
.hf-hero-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hf-hero-truths {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hf-hero-truth {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.hf-hero-truth-mark {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vv);
  margin-top: 9px;
  flex-shrink: 0;
}
.hf-hero-truth-text {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--dc);
  line-height: 1.12;
}
.hf-hero-card-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.hf-hero-card-note a { color: var(--vv); font-weight: 600; }

@media (max-width: 900px) {
  .hf-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hf-hero { min-height: auto; }
}

/* ============================================================
   SECTION HEAD (shared, restrained, no eyebrow spam)
   ============================================================ */
.hf-section-head {
  max-width: 60ch;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.hf-section-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--dc);
  margin: 0 0 20px;
  text-wrap: balance;
}
.section--dark .hf-section-head h2 { color: var(--white); }
.hf-section-head p {
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  max-width: 52ch;
}
.section--dark .hf-section-head p { color: rgba(255,255,255,0.82); }
.hf-accent { color: var(--vv); }

/* ============================================================
   ABOUT, story + asymmetric values + stat strip
   ============================================================ */
.hf-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.hf-about-lead {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--dc);
  margin: 0;
}
.hf-about-body p {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.78;
  margin: 0 0 20px;
}
.hf-about-body p:last-child { margin-bottom: 0; }
.hf-about-body strong { color: var(--dc); font-weight: 600; }

/* Stat strip, uses the existing data-target countup mechanism */
.hf-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  margin-top: clamp(48px, 6vw, 80px);
}
.hf-stat {
  background: var(--surface-0);
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 32px);
}
.hf-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vv);   /* stat numbers are orange */
}
.hf-stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 12px;
  max-width: 22ch;
}

/* Asymmetric values, not three identical cards */
.hf-values {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  margin-top: clamp(40px, 5vw, 64px);
}
.hf-value {
  background: var(--surface-0);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
}
.hf-value:first-child { background: var(--dc); }
.hf-value-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--dc);
  line-height: 1;
  margin-bottom: 12px;
}
.hf-value:first-child .hf-value-title { color: var(--white); }
.hf-value-title .hf-glyph { color: var(--vv); }
.hf-value p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.hf-value:first-child p { color: rgba(255,255,255,0.78); }

@media (max-width: 900px) {
  .hf-about-grid { grid-template-columns: 1fr; }
  .hf-values { grid-template-columns: 1fr; }
  .hf-stat-strip { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICES, editorial rows (not a 6-up identical grid)
   ============================================================ */
.hf-services { display: flex; flex-direction: column; }
.hf-service-row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: baseline;
  padding-block: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid var(--hairline);
}
.hf-service-row:last-child { border-bottom: 1px solid var(--hairline); }
.hf-service-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.hf-service-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--vv);     /* the service dot, orange */
  flex-shrink: 0;
  transform: translateY(-2px);
}
.hf-service-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--dc);
  line-height: 0.98;
}
.hf-service-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.hf-service-desc {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Interleaved parallax photo blocks */
.hf-service-photo {
  border-radius: 16px;
  overflow: hidden;
  margin-block: clamp(24px, 3vw, 40px);
  aspect-ratio: 21 / 9;
}
.hf-service-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 760px) {
  .hf-service-row { grid-template-columns: 1fr; gap: 14px; }
  .hf-service-photo { aspect-ratio: 16 / 9; }
}

/* ============================================================
   TEAM, director, grid, gallery, hiring  (modal CSS below)
   ============================================================ */
.hf-director {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.hf-director-photo {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-1);
}
.hf-director-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.hf-director-tag {
  position: absolute;
  left: 16px; bottom: 16px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--dc);
  padding: 8px 14px;
  border-radius: 6px;
}
.hf-director-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--dc);
  line-height: 1;
}
.hf-director-role {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vv);
  margin: 8px 0 22px;
}
.hf-director-bio p {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: 0 0 18px;
}
.hf-director-bio strong { color: var(--dc); font-weight: 600; }
.hf-director-contact { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 820px) {
  .hf-director { grid-template-columns: 1fr; }
  .hf-director-photo { max-width: 360px; }
}

/* Team grid */
.hf-team-subhead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 52ch;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.hf-team-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.team-card {
  background: var(--surface-0);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 280ms var(--ease-out-quart), box-shadow 280ms var(--ease-out-quart);
  will-change: transform;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(47,47,47,0.10);
}
.team-card-photo {
  aspect-ratio: 4 / 5;
  background: var(--surface-1);
  position: relative;
  overflow: hidden;
}
.team-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.team-card-photo--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--dc);
}
.photo-initials {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: rgba(255,96,32,0.45);
  letter-spacing: 0.06em;
}
.photo-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.team-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.team-card-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--dc);
  line-height: 1.05;
  margin-bottom: 6px;
}
.team-card-role {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vv);
  line-height: 1.45;
  margin-bottom: 14px;
}
.team-card-bio {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.62;
  flex: 1;
}
/* read-more button defined in modal block below */

@media (max-width: 880px) { .hf-team-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .hf-team-cards { grid-template-columns: 1fr; } }

/* Draggable photo gallery */
.hf-gallery {
  margin-top: clamp(48px, 6vw, 80px);
}
.hf-gallery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.hf-gallery-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--dc);
}
.hf-gallery-hint {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vv);   /* drag affordance, orange */
  white-space: nowrap;
}
.hf-gallery-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.hf-gallery-track::-webkit-scrollbar { display: none; }
.hf-gallery-item {
  flex: 0 0 clamp(260px, 36vw, 380px);
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-1);
  scroll-snap-align: start;
  user-select: none;
}
.hf-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Philosophy strip + hiring criteria */
.hf-philosophy {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(32px, 4vw, 52px);
  background: var(--surface-1);
  border-radius: 16px;
}
.hf-philosophy p {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--text-secondary);
  line-height: 1.65;
}
.hf-philosophy-stat { text-align: left; }
.hf-philosophy-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--vv);
  line-height: 0.9;
  display: block;
}
.hf-philosophy-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
  display: block;
}

.hf-hire {
  margin-top: clamp(48px, 6vw, 72px);
}
.hf-hire-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(28px, 3vw, 40px);
}
.hf-hire-item {
  padding-top: 22px;
  border-top: 2px solid var(--dc);
}
.hf-hire-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--dc);
  line-height: 1.05;
  margin-bottom: 12px;
}
.hf-hire-body {
  font-size: 0.97rem;
  color: var(--text-secondary);
  line-height: 1.68;
}

@media (max-width: 820px) {
  .hf-philosophy { grid-template-columns: 1fr; gap: 24px; }
  .hf-hire-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TESTIMONIALS, slider + tasteful empty state
   ============================================================ */
.hf-tslider { max-width: 880px; }
.hf-tslider-live { min-height: 160px; }
.hf-tslider-quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--dc);
  margin: 0 0 24px;
}
.hf-tslider-name {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dc);
}
.hf-tslider-context {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.hf-tslider-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}
.hf-tslider-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline);
  background: var(--surface-0);
  color: var(--dc);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out-quart), color 200ms var(--ease-out-quart);
}
.hf-tslider-btn:hover { border-color: var(--vv); color: var(--vv); }
.hf-tslider-dots { display: flex; gap: 8px; margin-left: 4px; }
.tdot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hairline);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart);
}
.tdot.is-active { background: var(--vv); transform: scale(1.25); }  /* active dot, orange */

.hf-tslider-empty {
  max-width: 56ch;
}
.hf-tslider-empty h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--dc);
  line-height: 1.02;
  margin-bottom: 18px;
}
.hf-tslider-empty p {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ============================================================
   WORK WITH US, the single dark section
   ============================================================ */
.hf-work-qualities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  overflow: hidden;
}
.hf-work-quality {
  background: var(--dc);
  padding: clamp(28px, 3vw, 40px);
}
.section--dark .hf-work-quality-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--vv);     /* orange accent on titles (dark section) */
  line-height: 1;
  margin-bottom: 14px;
}
.section--dark .hf-work-quality-body {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.68;
}
.hf-work-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(48px, 6vw, 80px);
}
.section--dark .hf-work-list-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 24px;
}
.hf-work-list { display: flex; flex-direction: column; gap: 14px; }
.hf-work-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.97rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
}
.hf-work-list li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vv);
  flex-shrink: 0;
  margin-top: 8px;
}
.hf-work-cta {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hf-work-cta h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 18px;
}
.hf-work-cta p {
  color: rgba(255,255,255,0.82);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 60ch;
  margin-bottom: 28px;
}
.section--dark .hf-work-cta-note {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
}
.hf-work-cta-note a { color: var(--white); font-weight: 600; }

@media (max-width: 760px) {
  .hf-work-qualities { grid-template-columns: 1fr; }
  .hf-work-lists { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT, cards + form
   ============================================================ */
.hf-contact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.hf-contact-card {
  background: var(--surface-0);
  padding: clamp(24px, 2.5vw, 36px);
}
.hf-contact-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vv);
  margin-bottom: 10px;
}
.hf-contact-value {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--dc);
  line-height: 1.15;
  margin-bottom: 10px;
  word-break: break-word;
}
.hf-contact-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.hf-contact-card a { color: inherit; }
.hf-contact-card a:hover { color: var(--vv); }

.hf-contact-form-wrap {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.hf-contact-form-intro h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--dc);
  line-height: 1.02;
  margin-bottom: 18px;
}
.hf-contact-form-intro p {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.7;
}

@media (max-width: 4096px) { } /* no-op guard */
@media (max-width: 980px)  { .hf-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .hf-contact-form-wrap { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 520px)  { .hf-contact-grid { grid-template-columns: 1fr; } }

/* Tighten focus rings to orange site-wide (accessibility + accent) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--vv);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   BIO MODAL  (ported verbatim from team.html, tokens intact)
   ============================================================ */
.team-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vv);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 200ms var(--ease-out-quart), gap 200ms var(--ease-out-quart);
}
.team-card-readmore:hover { color: var(--bo); gap: 10px; }

.bio-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 300ms var(--ease-out-quart);
  will-change: opacity;
}
.bio-modal-overlay.is-open { opacity: 1; }
.bio-modal-overlay[hidden] { display: none; }

.bio-modal-panel {
  background: var(--white);
  width: 100%;
  max-width: 960px;
  max-height: 92vh;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(40px);
  transition: transform 360ms var(--ease-out-expo);
  will-change: transform;
  position: relative;
}
.bio-modal-overlay.is-open .bio-modal-panel { transform: translateY(0); }

.bio-modal-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(47,47,47,0.08);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dc);
  z-index: 10;
  transition: background 200ms var(--ease-out-quart);
}
.bio-modal-close:hover { background: rgba(47,47,47,0.16); }

.bio-modal-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  overflow-y: auto;
  max-height: 92vh;
  /* iOS touch-scroll: a grid/flex scroll child with the default min-height:auto
     cannot shrink, so momentum touch scrolling silently fails on iPhone (works on
     desktop). min-height:0 + momentum scrolling + contained overscroll fixes it.
     All three are invisible on desktop. */
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.bio-modal-photo-col {
  background: var(--dc);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 92vh;
}
.bio-modal-photo-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  flex-shrink: 0;
  max-height: 360px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bio-modal-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.bio-modal-initials-placeholder {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: rgba(255,96,32,0.25);
  letter-spacing: 0.06em;
}
.bio-modal-values-section {
  padding: 28px 24px;
  flex: 1;
}
.bio-modal-values-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 12px;
}
.bio-modal-values-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bio-modal-value-tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vv);
  background: rgba(255,96,32,0.12);
  border-radius: 2px;
  padding: 5px 10px;
  text-transform: uppercase;
}

.bio-modal-content {
  padding: 48px 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.bio-modal-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dc);
  line-height: 1;
  margin-bottom: 4px;
}
.bio-modal-role {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--vv);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bio-modal-body p {
  font-size: 0.975rem;
  line-height: 1.82;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.bio-modal-body p:last-child { margin-bottom: 0; }
.bio-modal-quals-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(47,47,47,0.28);
  margin-bottom: 8px;
}
.bio-modal-quals-text {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.bio-modal-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  background: var(--dc);
  color: var(--white);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 220ms var(--ease-out-quart), transform 200ms var(--ease-out-quart);
  margin-top: 4px;
}
.bio-modal-pdf-btn:hover { background: #222; transform: translateY(-2px); }
.bio-modal-pdf-btn:active { transform: scale(0.97); }

@media (max-width: 720px) {
  .bio-modal-inner { grid-template-columns: 1fr; }
  .bio-modal-photo-col { position: static; flex-direction: row; max-height: none; }
  .bio-modal-photo-wrap { width: 120px; flex-shrink: 0; aspect-ratio: auto; height: 140px; max-height: 140px; }
  .bio-modal-values-section { padding: 16px 20px; }
  .bio-modal-content { padding: 28px 24px 40px; }
  .bio-modal-panel { border-radius: 12px 12px 0 0; }
}


/* ==========================================================================
   3. home-v5.css
   ========================================================================== */
/* ============================================================
   HUMAN FIRST, home-v5  ·  HUMAAN-PARITY REBUILD (2026-06-09)
   Built TO the measured humaan.com/about reference, in HF brand.
   Loaded after style-v3 + home-v4 so it overrides them.
   Reference facts driving this file:
   - One type family (Humaan = Neue Montreal) -> HF uses General Sans
     (Fontshare, free, same neo-grotesque feel), weight 500/600.
   - Colour-DRENCHED sections + a centered pill nav (NOT a white page).
   - Giant, tight display type (Humaan hero ~240px). HF goes large too;
     this deliberately overrides impeccable's 6rem hero ceiling because
     the task is MATCH-TO-REFERENCE (Alex, 2026-06-09).
   - No photography yet -> image areas become colour panels + bold type
     (the team gallery gets a tasteful "coming soon" later increment).
   ============================================================ */

:root {
  /* type, single family, like the reference */
  --font-display: 'General Sans', 'Switzer', system-ui, sans-serif;
  --font-body:    'General Sans', 'Switzer', system-ui, sans-serif;

  /* ink + brand */
  --ink:        #1B1714;   /* warm near-black */
  --ink-soft:   #45403B;
  --ink-mute:   #6A645D;
  --orange:     #FF6020;
  --orange-ink: #9A370B;   /* darker rust: ≥4.5:1 on peach/sage/paper drenches */

  /* colour DRENCHES (deliberate, brand-derived, NOT generic cream) */
  --d-peach:    #F6D8C4;   /* warm peach (hero) */
  --d-peach-2:  #F1C7AD;
  --d-sage:     #D6E0DC;   /* cool counter-tone */
  --d-char:     #211D1A;   /* dark drench */
  --d-orange:   #FF6020;   /* full-punch drench */
  --paper:      #F3EEE9;   /* warm off-white base (rarely fully exposed) */
}

/* ---- Global base: kill the "grossly white", adopt the type ---- */
html.js-motion { scroll-behavior: auto !important; } /* stop CSS smooth fighting Lenis */
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding-top: 0 !important;   /* kill old fixed-nav offset → hero meets top, no strip */
  margin-top: 0 !important;
}
#main { padding-top: 0; margin-top: 0; }
h1, h2, h3, h4, .hhero-title { font-family: var(--font-display); }

/* ============================================================
   NAV, centered pill (reference parity)
   ============================================================ */
.hnav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 20px clamp(18px, 4vw, 40px);
  background: transparent; height: auto; border: 0;
  box-shadow: none;            /* kill the old .site-nav top strip */
  transition: padding .3s ease;
}
.hnav.scrolled { padding-top: 12px; padding-bottom: 12px; background: transparent; box-shadow: none; }
.hnav::before, .hnav::after { content: none; display: none; }
.hnav-logo { justify-self: start; display: inline-flex; align-items: center; }
.hnav-logo img { height: 30px; width: auto; }

.hnav-pill {
  justify-self: center;
  display: flex; align-items: center; gap: 2px;
  padding: 6px;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(27,23,20,0.06);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(27,23,20,0.08);
}
.hnav-pill a {
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding: 9px 17px; border-radius: 999px; line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.hnav-pill a:hover:not(.active) { background: rgba(27,23,20,0.06); }
.hnav-pill a.active { background: var(--ink); color: #fff; }
/* kill the legacy underline indicator inherited from .nav-links */
.hnav-pill a::after { content: none !important; display: none !important; }
/* Make a Referral lives inside the pill, as the orange accent */
/* ink text on orange fill = AA (5.8:1) while keeping the vibrant orange */
.hnav-pill .hnav-pill-cta { background: var(--orange); color: var(--ink); font-weight: 600; margin-left: 4px; }
.hnav-pill .hnav-pill-cta:hover { background: #ED4F12; color: var(--ink); }

.hnav-cta {
  justify-self: end;
  background: var(--orange); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 11px 20px; border-radius: 999px; line-height: 1;
  transition: transform .18s ease, background .2s ease;
}
.hnav-cta:hover { background: #ED4F12; transform: translateY(-1px); }
.hnav .nav-hamburger { justify-self: end; display: none; }

@media (max-width: 860px) {
  .hnav { grid-template-columns: 1fr auto; }
  .hnav-pill { display: none; }
  .hnav-cta { display: none; }
  .hnav .nav-hamburger { display: inline-flex; }
}

/* ============================================================
   HERO, colour-drenched, giant display (reference parity)
   ============================================================ */
.hhero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(120px, 18vh, 200px) clamp(18px, 4vw, 40px) clamp(80px, 12vh, 140px);
  background: var(--d-peach);
}
/* atmosphere instead of a photo: large soft brand blobs */
.hhero-bg {
  position: absolute; inset: -20% -10% -10% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 50% at 82% 18%, rgba(255,96,32,0.38), rgba(255,96,32,0) 60%),
    radial-gradient(40% 46% at 12% 88%, rgba(255,176,120,0.55), rgba(255,176,120,0) 62%),
    radial-gradient(60% 60% at 50% 50%, rgba(241,199,173,0.5), rgba(246,216,196,0) 70%);
  filter: saturate(1.05);
}
.hhero-inner { width: 100%; max-width: 1180px; margin: 0 auto; }

.hhero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange-ink); margin-bottom: 26px;
}
.hhero-eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--orange); border-radius: 2px; }

.hhero-title {
  /* deliberate large scale to match the reference (overrides 6rem default) */
  font-size: clamp(3.4rem, 11.5vw, 9.5rem);
  font-weight: 600; line-height: 0.92; letter-spacing: -0.035em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.hhero-title .dot { color: var(--orange); }

.hhero-lead {
  font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 400; line-height: 1.5;
  color: var(--ink-soft); max-width: 34ch; margin: 28px 0 0;
}
.hhero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hbtn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; text-decoration: none; line-height: 1;
  padding: 16px 28px; border-radius: 999px; transition: transform .18s ease, background .2s ease, color .2s ease;
}
.hbtn--solid { background: var(--ink); color: #fff; }
.hbtn--solid:hover { transform: translateY(-2px); background: #000; }
.hbtn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(27,23,20,0.35); }
.hbtn--ghost:hover { border-color: var(--ink); background: rgba(27,23,20,0.04); }

/* floating truths card */
.hhero-card {
  position: absolute; right: clamp(18px, 4vw, 40px); bottom: clamp(28px, 6vh, 64px);
  z-index: 2; width: min(360px, 42vw);
  background: rgba(255,255,255,0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(27,23,20,0.07); border-radius: 22px;
  padding: 24px 26px; box-shadow: 0 18px 50px rgba(27,23,20,0.12);
}
.hhero-truths { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hhero-truths li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.hhero-truth-mark { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--orange); }
.hhero-card-note { font-size: 13px; line-height: 1.5; color: var(--ink-mute); margin: 0; padding-top: 14px; border-top: 1px solid rgba(27,23,20,0.08); }
.hhero-card-note a { color: var(--orange-ink); font-weight: 600; text-decoration: none; }
.hhero-card-note a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .hhero { min-height: auto; padding-top: 120px; }
  .hhero-card { position: static; width: 100%; margin-top: 40px; }
}

/* ============================================================
   SECTIONS, colour-drench rotation + big type (system-wide)
   ============================================================ */
.section { color: var(--ink); }
#about        { background: #FBF6F1; }          /* warm paper */
#services     { background: var(--d-sage); }    /* cool */
#team         { background: var(--d-peach); }   /* warm */
#testimonials { background: #FBF6F1; }          /* warm paper */
#work         { background: var(--d-char); }    /* dark */
#contact      { background: var(--d-sage); }    /* cool */

/* section headings: big, tight, General Sans */
.hf-section-head h2, .section h2 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.2vw, 4.4rem);
  font-weight: 600; line-height: 0.98; letter-spacing: -0.03em;
  color: var(--ink); text-wrap: balance;
}
.hf-section-head .eyebrow, .section .eyebrow {
  color: var(--orange-ink); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px;
}
.hf-section-head > p, .section--white .hf-section-head p, .section--grey .hf-section-head p { color: var(--ink-soft); }
.hf-accent, .hf-glyph { color: var(--orange); }

/* dark section (work) text */
#work .hf-section-head h2, #work h2, #work h3, #work .hf-work-quality-title { color: #fff; }
#work .hf-section-head p, #work .hf-work-quality-body, #work .hf-work-list, #work .hf-work-cta-note { color: rgba(255,255,255,0.78); }
#work .eyebrow { color: #FFB088; }
#work .hf-accent { color: var(--orange); }

/* about, stats + values legible on warm paper */
.hf-about-lead { color: var(--ink); }
.hf-about-body p { color: var(--ink-soft); }
.hf-stat-num { color: var(--orange); font-family: var(--font-display); }
.hf-stat-label { color: var(--ink-mute); }
.hf-value-title { font-family: var(--font-display); color: var(--ink); }
.hf-value p { color: var(--ink-soft); }

/* service rows, readable on sage */
.hf-service-title { font-family: var(--font-display); color: var(--ink); font-weight: 600; }
.hf-service-tag { color: var(--orange-ink); font-weight: 600; letter-spacing: .04em; }
.hf-service-desc { color: var(--ink-soft); }
.hf-service-dot { background: var(--orange); }
.hf-service-row { border-color: rgba(27,23,20,0.14) !important; }

/* team cards on peach drench, fix contrast (was orange-on-peach) */
.team-card-name { font-family: var(--font-display); color: var(--ink); }
.team-card-role { color: var(--ink-soft); }
.team-card-bio  { color: var(--ink-soft); }
.team-card-readmore { color: var(--ink); font-weight: 600; }
.team-card-readmore:hover { color: var(--orange-ink); }
.hf-team-subhead { color: var(--ink-soft); }

/* ---- gate fixes: contrast + radius consistency (root, not patches) ---- */
/* orange-on-peach labels were 2.24:1 -> dark rust */
.hf-director-role, .hf-gallery-hint, .hf-gallery-cta, [class*="-hint"] { color: var(--orange-ink); }
.hf-director-tag { border-radius: 999px; }
/* orange-fill CTAs: ink text passes AA (5.8:1) while keeping the vibrant orange */
.hnav-pill-cta, #work .btn-primary, .btn-primary.btn--orange { color: var(--ink); }
.hnav-pill-cta:hover, #work .btn-primary:hover { color: var(--ink); }
/* skip-link: never white-on-orange */
.skip-link { background: var(--ink); color: #fff; }
/* primary submit not undersized */
.form-section button[type=submit], .form-section .btn, .btn--lg { font-size: 1rem; }

/* big display numbers: deepened orange that clears 3:1 (large) on light drenches */
.hf-stat-num, .hf-philosophy-num { color: #DE4E0C; }
/* photo placeholder tile is dark charcoal -> light label + brighter orange initials */
.photo-initials { color: #FF8A50; }
/* footer (dark) text: legible + readable size (was dim grey 3.2:1 / 9.6px) */
.site-footer { background: var(--d-char); }
.site-footer, .site-footer p, .site-footer li, .site-footer a, .site-footer span, .site-footer div { color: rgba(255,255,255,0.82); }
.site-footer .footer-col-title { color: #fff; font-size: 0.8rem; }
.site-footer a:hover { color: #fff; }
/* inline orange tel links on light surfaces -> AA rust */
.form-section a[href^="tel:"], #contact a[href^="tel:"] { color: var(--orange-ink) !important; }
/* "Photo Coming" placeholder: light label on the dark tile */
.photo-label { color: rgba(255,255,255,0.78); font-size: 0.72rem; }
.hf-director-tag { font-size: 0.72rem; }

/* contact cards / form on sage */
.hf-contact-label { color: var(--ink-mute); }
.hf-contact-value, .hf-contact-value a { color: var(--ink); }
.hf-contact-value a:hover { color: var(--orange-ink); }

/* lift cards to a soft surface so they read on the drench */
.hf-contact-card, .hf-stat, .hf-work-quality, .hf-value {
  background: transparent;
}

/* buttons used in lower sections -> match hero button language */
.btn.btn-primary, .btn-primary { background: var(--ink); color: #fff; border-radius: 999px; }
.btn.btn-primary:hover { background: #000; }
.btn.btn-secondary, .btn-secondary { border-radius: 999px; }
#work .btn-primary { background: var(--orange); }
#work .btn-primary:hover { background: #ED4F12; }

/* footer */
footer, .site-footer { background: var(--d-char); color: rgba(255,255,255,0.8); }
footer a, .site-footer a { color: rgba(255,255,255,0.8); }
footer a:hover, .site-footer a:hover { color: #fff; }

/* ============================================================
   REFERRAL, soft orange misty background on the form section.
   Dark top hero (.page-hero) is kept as-is.
   ============================================================ */
.form-section { position: relative; isolation: isolate; background: var(--d-peach); overflow: hidden; }
.form-section::before {
  content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 50% at 82% 12%, rgba(255,96,32,0.30), rgba(255,96,32,0) 60%),
    radial-gradient(40% 46% at 10% 88%, rgba(255,176,120,0.45), rgba(255,176,120,0) 62%),
    radial-gradient(60% 60% at 50% 40%, rgba(241,199,173,0.45), rgba(246,216,196,0) 70%);
}
.form-section .container { position: relative; z-index: 1; }

/* MARKETING FORM LANGUAGE (global, not per-section, fixes the contact
   form that was square because the rule was scoped to .form-section).
   Rounded + glass surface like the nav pill, on every marketing form. */
.form-input,
.form-select,
.form-textarea {
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(27,23,20,0.10);
}
.form-textarea { border-radius: 14px; }   /* unify w/ inputs */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  background: #fff; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,96,32,0.14);
}
/* on-brand, rounded native controls (were default square/black) */
input[type=checkbox], input[type=radio] { accent-color: var(--orange); width: 18px; height: 18px; }
/* form labels: comfortable scanning (were ~12.5px) */
.form-label { font-size: 0.82rem; }
/* progress bar: rounder + glass, readable inactive steps */
.form-section .form-progress {
  border-radius: 999px; border-color: rgba(27,23,20,0.10);
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.form-section .form-progress-step {
  background: transparent; border-right-color: rgba(27,23,20,0.10);
  color: rgba(27,23,20,0.72); font-size: 0.7rem;
}
.form-section .form-progress-step.active { background: var(--ink); color: #fff; border-radius: 999px; }
/* form copy legible on the misty peach */
.form-section .form-section-desc { color: var(--ink-soft); }
.form-section .form-section-title { color: var(--ink); }
.form-section a { color: var(--orange-ink); }
.form-section .form-hint, .form-section small, .form-section .muted { color: var(--ink-soft); }

/* reveal gating respects motion.js; keep content visible without JS.
   (.reveal must be visible by default, pages without motion.js, e.g.
   referral.html, were stuck hidden because base CSS pre-hid .reveal.) */
.reveal { opacity: 1; transform: none; }
html.js-motion .reveal { opacity: 0; }
html.js-motion .hero-animate { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js-motion .hero-animate { opacity: 1; }
  html.js-motion { scroll-behavior: auto !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   4. A2 "ATMOSPHERE"  ·  2026-08-01
   Additive layer. Restyles existing classes only, adds no new markup hooks,
   so every selector js/motion.js, js/main.js and the bio modal depend on
   survives untouched.

   Approved direction: Alex's own .hhero-bg blob stack (previously hero-only)
   extended across the whole page, sentence case above 13px, one glass
   component language, and --orange demoted to a mark (2.62:1 on paper, so it
   can never be a text colour or a field).
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --a2-r-card: 22px;      /* Alex's own .hhero-card radius, now the system */
  --a2-r-soft: 16px;      /* portraits and media */
  --a2-pill: 999px;
  --a2-ease: cubic-bezier(.16,1,.3,1);
  --a2-glass: rgba(255,255,255,.72);
}

/* ── the field: the hero wash, extended down the page ── */
body{ position: relative; background: var(--d-peach); }
body::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(46% 20% at 82%  3%, rgba(255,96,32,.34),  rgba(255,96,32,0) 60%),
    radial-gradient(40% 16% at 12% 11%, rgba(255,176,120,.5), rgba(255,176,120,0) 62%),
    radial-gradient(60% 14% at 50%  8%, rgba(241,199,173,.5), rgba(246,216,196,0) 70%),
    radial-gradient(55% 12% at 88% 28%, rgba(255,176,120,.32),rgba(255,176,120,0) 65%),
    radial-gradient(50% 11% at  8% 42%, rgba(214,224,220,.7), rgba(214,224,220,0) 68%),
    radial-gradient(60% 12% at 70% 55%, rgba(214,224,220,.55),rgba(214,224,220,0) 70%),
    radial-gradient(55% 11% at 20% 68%, rgba(255,96,32,.14),  rgba(255,96,32,0) 66%),
    linear-gradient(180deg, var(--d-peach) 0%, #F5E7DC 12%, var(--paper) 28%,
      #EFEDE6 44%, #E4EAE6 56%, var(--paper) 68%, var(--paper) 100%);
}
body::after{  /* grain, so the field reads as material rather than as CSS */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* sections become transparent so the one field shows through instead of banding */
.section, .section--white, .section--grey, .hhero{ background: transparent !important; }
.hhero-bg{ display:none; }   /* superseded by the page-wide field */

/* ── sentence case above 13px. Uppercase survives only at label size. ── */
h1,h2,h3,h4,
.hhero-title,.hf-section-head h2,.hf-service-title,.team-card-name,
.hf-work-quality-title,.hf-stat-num,.hf-contact-value{
  text-transform:none !important;
}
.hhero-title{ font-weight:600; letter-spacing:-.03em; }
.hf-section-head h2{ letter-spacing:-.028em; font-weight:600; }
.hf-service-title{ letter-spacing:-.018em; font-weight:600; }
.team-card-name{ font-size:18.5px; font-weight:600; letter-spacing:-.01em;
  color:var(--ink); text-transform:none; }
.team-card-role{ font-size:13.5px; letter-spacing:0; text-transform:none;
  color:var(--ink-mute); }

/* ── glass: Alex's .hhero-card language, applied to every card surface ── */
.hf-contact-card,.hf-work-quality,.hf-stat,.hf-gallery-item,.team-card,
.hf-service-row,.form-container{
  background:var(--a2-glass);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(27,23,20,.07);
  border-radius:var(--a2-r-card);
  box-shadow:0 18px 50px rgba(27,23,20,.10);
}
.hf-service-row{ padding:26px 28px; border-top:1px solid rgba(27,23,20,.07); }
.hf-stat,.hf-work-quality,.hf-contact-card{ padding:28px 26px; }
.team-card{ overflow:hidden; }
.team-card-photo img{ border-radius:0; }
.team-card-body{ padding:18px 20px 20px; }

/* ── one radius system: 22 cards, 16 media, pill controls ── */
.btn,.hbtn,.hnav-pill,.hnav-pill a{ border-radius:var(--a2-pill); }
.hf-gallery-item,.hf-gallery-item img,.team-card-photo{ border-radius:var(--a2-r-soft); }

/* ── orange is a mark, never a field or a text colour on light ── */
.hf-accent,.dot,.hhero-title .dot{ color:var(--orange); }
.hf-service-tag,.eyebrow,.hhero-eyebrow{ color:var(--orange-ink); }

/* ── motion: unchanged vocabulary, only the easing token is shared ── */
.btn,.hbtn,.team-card,.hf-service-row{ transition:transform .22s var(--a2-ease), box-shadow .22s var(--a2-ease); }
.team-card:hover,.hf-service-row:hover{ transform:translateY(-3px); box-shadow:0 26px 60px rgba(27,23,20,.14); }

/* ── the overflow footgun home-v4 shipped: bare 1fr ── */
.hf-team-cards,.hf-gallery,.hf-services{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }

@media (prefers-reduced-motion:reduce){
  .btn,.hbtn,.team-card,.hf-service-row{ transition:none; }
  .team-card:hover,.hf-service-row:hover{ transform:none; }
}

/* sentence case: these are <p> elements with classes, so the h1-h4 rule missed them.
   Uppercase survives only on true labels at 13px and below (.hf-director-role, .eyebrow). */
.hf-about-lead,.hf-value-title,.hf-director-name,.hf-hire-title,.hf-work-list-title,
.hf-stat-label,.hf-contact-label,.hf-work-quality-title,.hf-gallery-caption{
  text-transform:none !important;
  letter-spacing:-.012em;
}
.hf-director-name{ font-weight:600; letter-spacing:-.025em; }
.form-section-title{ text-transform:none !important; letter-spacing:-.01em; font-weight:600; }

/* text-bearing accents must clear AA on the lightest part of the field, not just on paper.
   --orange-ink #9A370B measures 4.43:1 there, so text uses a slightly deeper rust.
   The decorative full stop keeps the bright --orange: it carries no information. */
:root{ --orange-text:#7E2B08; }
.hero-eyebrow,.hhero-eyebrow,.eyebrow,.hf-service-tag,.hf-director-role,
a[href^="tel:"],.hf-contact-value a,.hhero-card-note a{ color:var(--orange-text) !important; }
.req,.form-required,abbr[title="required"]{ color:#A32118 !important; }

/* ── dark zones: the conversion-page heroes and the careers band ──
   Legacy --dc #2F2F2F replaced by the brand's warm charcoal, and given the same
   rounded, softly-lit treatment as the approved A2 dark section so it reads as
   one system rather than a hard band across an atmospheric page. */
.page-hero,.section--dark{
  background:var(--d-char) !important;
  border-radius:34px; margin-inline:clamp(12px,3vw,40px);
  position:relative; isolation:isolate; overflow:hidden;
}
.page-hero::before,.section--dark::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 46% at 84% 8%, rgba(255,96,32,.30), rgba(255,96,32,0) 62%),
    radial-gradient(40% 40% at 8% 92%, rgba(255,176,120,.16), rgba(255,176,120,0) 64%);
}
/* accents inside a dark zone invert: the deep rust is illegible there */
.page-hero .hero-eyebrow,.page-hero .eyebrow,.section--dark .eyebrow,
.page-hero a[href^="tel:"],.section--dark a[href^="tel:"],
.page-hero .hf-accent,.section--dark .hf-accent{ color:var(--d-peach-2) !important; }
.page-hero h1,.page-hero h2,.section--dark h2,.section--dark h3{ color:var(--paper) !important; }
.page-hero p,.section--dark p{ color:rgba(243,238,233,.82); }
@media (max-width:640px){ .page-hero,.section--dark{ border-radius:24px; margin-inline:10px; } }
/* the footer is a dark zone too */
.site-footer a[href^="tel:"],.site-footer a[href^="mailto:"],.site-footer .eyebrow{ color:var(--d-peach-2) !important; }

/* glass inside a dark zone must be the dark variant, or the light text sits on a
   light panel. This is the one collision between the glass rule and the dark-zone rule. */
.section--dark .hf-work-quality,.section--dark .hf-stat,.section--dark .hf-contact-card,
.page-hero .hf-work-quality,.page-hero .hf-stat{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(243,238,233,.14) !important;
  box-shadow:none !important;
}
.section--dark .hf-work-quality-title,.section--dark .hf-stat-num{ color:var(--paper) !important; }
.section--dark .hf-work-quality-body,.section--dark .hf-stat-label,
.section--dark .hf-work-list li{ color:rgba(243,238,233,.82) !important; }
.section--dark .btn-primary,.page-hero .btn-primary{
  background:var(--paper) !important; color:var(--ink) !important;
}
/* the tel: accent rule must not repaint a phone number that is itself a button */
a.btn[href^="tel:"],a.hbtn[href^="tel:"]{ color:var(--paper) !important; }
a.btn--ghost[href^="tel:"],a.hbtn--ghost[href^="tel:"]{ color:var(--ink) !important; }
/* ============================================================
   APPLE HIG PASS, 2026-08-05. Appended in the same way the A2 override block
   above it works, so nothing earlier in this file had to be edited.

   Every rule here corrects a measured defect found by auditing the live site
   against the Apple Human Interface Guidelines at 1440 / 1024 / 900 / 390,
   in every interactive state.
   Every rule below is a correction to a measured defect, not a restyle:
   nothing changes a colour, a typeface, a layout or a decision Alex approved.
   ============================================================ */

/* ── P0.1  The hero joins the page spine ──────────────────────
   Was: .hhero padding-inline clamp(18px,4vw,40px) + .hhero-inner max-width 1180px
        = content left 130px at 1440.
   Every other section: .container max-width 1280 (--max-w) + --pad-x
        = content left 152px.
   The 22px offset also drifted with viewport width, because the two clamps differ.
   This makes the hero use the same two tokens, so it tracks the spine at every width. */
.hhero{ padding-inline: 0; }
.hhero-inner{ max-width: var(--max-w); padding-inline: var(--pad-x); }

/* ── P0.2  Give the team cards their hierarchy back ───────────
   The legacy `.team-card p` rule (css line 660, from the previous team design) has
   specificity 0,1,1 and was beating `.team-card-name` / `-role` / `-bio` (0,1,0),
   flattening a person's name, their job title and their bio to one identical
   14.08px / w600 / rgba(47,47,47,.75). Raising specificity to 0,2,0 restores the
   intent that was written at css 2588 and 3614 but never rendered.
   #6A645D (--ink-mute) on the card glass measures 5.13:1, clears AA at 13.5px. */
.team-card .team-card-name{
  font-size: 18.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); line-height: 1.2; margin-bottom: 4px;
}
.team-card .team-card-role{
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-mute); line-height: 1.45; margin-bottom: 12px;
}
.team-card .team-card-bio{
  font-size: 14.5px; font-weight: 400;
  color: var(--ink-mute); line-height: 1.65;
}

/* ── P0.3  One button box, and it clears 44pt ─────────────────
   Was: .btn 38px tall, .btn-secondary 42px (its 2px border sat outside the shared box),
   so every filled/outlined pair had baselines 2px apart. Both were under Apple's
   44x44pt minimum control size. A transparent border on the base gives every variant
   the same box.
   Padding plus line-height plus a border is three sources of truth for one number, which is
   how the site ended up with 38 / 42 / 48 / 49px buttons. A min-height on an inline-flex
   control is one source of truth: the box is the stated size whatever the border or the
   font metrics do. */
.btn{ border: 2px solid transparent; padding: 0 22px; min-height: 46px; }
.btn--lg, .form-submit .btn{ padding: 0 26px; min-height: 52px; }

/* The hero runs a second button system (.hbtn) with the same defect: .hbtn--ghost
   carries a 1.5px border that .hbtn does not account for, so at 390px the solid
   button measures 48px against the ghost's 50px, and they stack full width there.
   At 1440 they happen to agree, which is why it was never caught. */
.hbtn{ border: 1.5px solid transparent; padding: 0 28px; min-height: 50px; }

/* ── P1.4  The nav's own chrome gets the same material as the pill ──
   The pill is already correct (72% white + blur(14px)), so text under it is scrimmed.
   The logo and hamburger were left bare, which produced 37 measured collisions between
   nav chrome and page text on desktop and 33 on mobile while scrolling.
   HIG layout: differentiate controls from content. */
.hnav-logo, .nav-logo, .hnav .nav-hamburger{
  padding-inline: 12px; border-radius: var(--a2-pill);
  background: rgba(255,255,255,0);
  transition: background .22s var(--a2-ease), backdrop-filter .22s var(--a2-ease);
}
/* The material appears only once the page has scrolled, which is the only time
   content is behind the chrome. At rest the logo sits bare on the hero exactly as before.
   .scrolled is already toggled by js/motion.js at scrollY > 40. */
.site-nav.scrolled .hnav-logo, .site-nav.scrolled .nav-logo,
.site-nav.scrolled .nav-hamburger{
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ── P1.6  Controls reach 44x44 without changing how they look ──
   The glyphs stay the size they are; only the hit area grows. */
.hnav .nav-hamburger{
  width: 44px; height: 44px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
}
/* the bars are block children of a column flex container: centring them collapses
   them to zero width unless the width is stated, which is what the 28px on
   .nav-hamburger used to do implicitly through align-items: stretch. */
.hnav .nav-hamburger span{ width: 24px; }
.bio-modal-close{ width: 44px; height: 44px; }
.team-card-readmore{ min-height: 44px; padding-block: 12px; }
.site-footer nav a, .site-footer li a{ display: inline-block; padding-block: 11px; }

/* ── P2.8  Headlines stop dropping orphan words ───────────────
   "Support shaped / around / your life." and "What makes / someone / Human First."
   Headlines with a manual <br> already read correctly and are unaffected. */
h1, h2, h3, .hhero-title, .hf-section-head h2{ text-wrap: balance; }
.hhero-lead, .hf-section-head p, .hf-about-lead{ text-wrap: pretty; }

/* ── P2.9  The form gets the padding that goes with its card skin ──
   .form-container is in the glass list (css 3620) but not the padding list (css 3629),
   so it computed padding:0 and its fields sat 1px from the card edge while every other
   card surface has 18 to 28px. The select was also 4px shorter than the inputs around it. */
.form-container{ padding: 26px; }
.form-container select{ height: 52px; }

/* ── P2.10  Symmetric card padding ──────────────────────────── */
.team-card-body{ padding: 20px; }

/* ── P2.13  A modal takes the screen ────────────────────────── */
body:has(.bio-modal-overlay.is-open) .hnav{ opacity: 0; pointer-events: none; }
.hnav{ transition: opacity .2s var(--a2-ease); }

/* ── Not included here, because they are your calls, not defects ──
   P1.5  The 2px hairline-seam grids (.hf-stat-strip, .hf-values, .hf-contact-grid)
         versus the 22px glass cards now sitting inside them. Two valid languages;
         one has to win, and that is a design decision.
   P2.11 The mobile menu (square corners, no scrim, ALL CAPS, no primary action).
         Worth a mockup rather than a patch.
   P2.12 Team photo crops, the "PHOTO COMING" tile outranking real people,
         "Bio coming soon.", and the duplicate boilerplate bio on Josh and Leigh.
         Content and photography, not CSS.
   ============================================================ */

/* ── Apple HIG pass, round 2: defects the first pass surfaced ──

   1. The inset dark band broke the spine at every width except 1440.
      .section--dark / .page-hero carry margin-inline: clamp(12px,3vw,40px) (line 3678),
      which pushes their inner .container in by that margin. At 1440 the maths happens to
      land back on 152px, which is why it was never seen. At 1024 the band's text sat
      30.7px right of the page spine, at 390 it sat 10px right.
      Subtracting the inset from the container's own padding, and from its max-width, puts
      the band's text back on the spine at every width while keeping the rounded inset look. */
:root{ --band-inset: clamp(12px, 3vw, 40px); }
.section--dark, .page-hero{ margin-inline: var(--band-inset); }
.section--dark > .container, .page-hero > .container{
  max-width: calc(var(--max-w) - 2 * var(--band-inset));
  padding-inline: max(0px, calc(var(--pad-x) - var(--band-inset)));
}
@media (max-width: 640px){ :root{ --band-inset: 10px; } }

/* 2. Radio and checkbox rows on the referral and careers forms were 26px tall
      (an 18px control in a 26px label). These are the forms a support coordinator
      fills in on a phone. The row gets a 44px hit area; nothing moves visually
      except the breathing room the group's 12px gap already implied. */
.radio-label, .check-label{ min-height: 44px; padding-block: 9px; }

/* 3. The nav logo and the footer brand link were the last two controls under 44. */
.hnav-logo, .nav-logo{ padding-block: 7px; }
.footer-brand-col > a{ display: inline-block; padding-block: 6px; }

/* 4. The three value cells disagreed vertically: the dark cell centred its content
      while the two light cells sat at the top, so "Consistency." sat 21px below
      "Capability." and "Communication." on the same row. */
.hf-values > *{ align-self: start; }

/* 5. Round 3, found on the live site: the "Worker age preference" row on the
      referral form is five labels carrying only an inline style, so the
      .radio-label / .check-label rule above never reached them and they stayed
      23px tall. This catches any label that wraps a checkbox or radio, whatever
      it is classed as. Inline styles set display and gap, not height, so this
      applies without fighting them. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]){ min-height: 44px; }