/* ==========================================================================
   CIVITAS HR — Design System
   --------------------------------------------------------------------------
   Everything is scoped under `.civitas` so this file can be pasted into
   GoHighLevel's global Custom CSS without touching the builder's own chrome.
   Brand: crimson #9B1B30 / charcoal #1E1E1E / cream #F8F5F0
   Motif: the Three Pillars — Education, Health, Public Sector.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
.civitas {
  /* Brand */
  --crimson:      #9B1B30;
  --crimson-lt:   #C0253D;
  --crimson-dk:   #6E1221;
  --crimson-glow: rgba(155, 27, 48, 0.18);

  --charcoal:     #1E1E1E;
  --charcoal-2:   #262626;
  --charcoal-3:   #333333;
  --charcoal-4:   #4A4A4A;

  --cream:        #F8F5F0;
  --cream-2:      #F0ECE5;
  --cream-3:      #E3DDD3;
  --white:        #FFFFFF;

  /* Text */
  --ink:          #1E1E1E;
  --ink-2:        #4A4A4A;
  --ink-3:        #75706A;
  --ink-inv:      rgba(255, 255, 255, 0.92);
  --ink-inv-2:    rgba(255, 255, 255, 0.62);
  --ink-inv-3:    rgba(255, 255, 255, 0.42);

  /* Lines */
  --rule:         rgba(30, 30, 30, 0.10);
  --rule-2:       rgba(30, 30, 30, 0.16);
  --rule-inv:     rgba(255, 255, 255, 0.10);
  --rule-inv-2:   rgba(255, 255, 255, 0.18);

  /* Type */
  --ff-display:   'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --ff-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-xs:        0.75rem;
  --fs-sm:        0.8125rem;
  --fs-base:      0.9375rem;
  --fs-md:        1.0625rem;
  --fs-lg:        clamp(1.15rem, 0.9rem + 0.7vw, 1.4rem);
  --fs-h4:        clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem);
  --fs-h3:        clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-h2:        clamp(1.85rem, 1.35rem + 2.1vw, 3rem);
  --fs-h1:        clamp(2.35rem, 1.5rem + 3.6vw, 4.4rem);
  --fs-hero:      clamp(2.6rem, 1.4rem + 4.6vw, 5.25rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;

  --section-y:    clamp(4.5rem, 3rem + 6vw, 8rem);
  --gutter:       clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --maxw:         1200px;
  --maxw-narrow:  760px;
  --nav-h:        78px;
  --radius:       4px;
  --radius-lg:    8px;

  /* Motion */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur:          0.7s;

  /* Shadow */
  --shadow-sm:    0 1px 2px rgba(30,30,30,.05), 0 2px 8px rgba(30,30,30,.04);
  --shadow-md:    0 4px 12px rgba(30,30,30,.06), 0 12px 32px rgba(30,30,30,.07);
  --shadow-lg:    0 8px 24px rgba(30,30,30,.08), 0 24px 64px rgba(30,30,30,.10);
  --shadow-crim:  0 8px 28px rgba(155,27,48,.28);

  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

/* ------------------------------------------------------- SCOPED RESET
   Every reset rule is wrapped in :where(), which contributes ZERO specificity.

   This matters enormously. Written the obvious way, `.civitas p { margin: 0 }`
   scores (0,1,1) — one class plus one type — which silently outranks every
   single-class component rule like `.c-eyebrow { margin-block-end: 1rem }` at
   (0,1,0). The reset then quietly wins and the component spacing never applies.
   With :where() the whole selector scores (0,0,0): it still beats the browser's
   default styles (author origin always does), but loses to any component rule,
   which is exactly what a reset should do. */
:where(.civitas) *,
:where(.civitas) *::before,
:where(.civitas) *::after { box-sizing: border-box; }

:where(.civitas) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li,
                        figure, figcaption, blockquote, dl, dd, fieldset) {
  margin: 0;
  padding: 0;
}

:where(.civitas) :where(ul, ol) { list-style: none; }
:where(.civitas) :where(img, svg) { display: block; max-width: 100%; }
:where(.civitas) :where(a) { color: inherit; text-decoration: none; }
:where(.civitas) :where(button) {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}

.civitas :focus-visible {
  outline: 2px solid var(--crimson-lt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- LAYOUT */
.c-wrap    { width: min(var(--maxw), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.c-wrap--narrow { width: min(var(--maxw-narrow), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.c-section { padding-block: var(--section-y); position: relative; }
.c-section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.c-section--cream { background: var(--cream); }
.c-section--cream2 { background: var(--cream-2); }
.c-section--dark  { background: var(--charcoal); color: var(--ink-inv-2); }
.c-section--dark .c-h2, .c-section--dark .c-h3, .c-section--dark .c-h4 { color: var(--white); }

.c-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link */
.c-skip {
  position: absolute; inset-inline-start: var(--sp-4); inset-block-start: -100px;
  z-index: 999; background: var(--crimson); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600;
  transition: inset-block-start .2s var(--ease);
}
.c-skip:focus { inset-block-start: var(--sp-4); }

/* ------------------------------------------------------------ TYPOGRAPHY */
.c-h1, .c-h2, .c-h3, .c-h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* Line-heights allow for descenders. Playfair Display has a deep descender;
   anything under ~1.1 makes a "g" on one line touch the ascenders on the next. */
.c-h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.025em; }
.c-h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.02em; }
.c-h3 { font-size: var(--fs-h3); line-height: 1.26; }
.c-h4 { font-size: var(--fs-h4); line-height: 1.38; letter-spacing: -0.005em; }

.c-h1 em, .c-h2 em, .c-h3 em { font-style: normal; color: var(--crimson); }
.c-section--dark .c-h1 em, .c-section--dark .c-h2 em { color: var(--crimson-lt); }

/* Eyebrow — small caps label with a pillar tick */
.c-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crimson);
  margin-block-end: var(--sp-4);
}
.c-eyebrow::before {
  content: ''; display: block; flex: none;
  width: 26px; height: 2px; background: currentColor;
  transform-origin: left center;
}
.c-section--dark .c-eyebrow { color: var(--crimson-lt); }
.c-eyebrow--center { justify-content: center; }

.c-lead {
  font-size: var(--fs-md); line-height: 1.72;
  color: var(--ink-3); max-width: 60ch;
  text-wrap: pretty;
}
.c-section--dark .c-lead { color: var(--ink-inv-2); }

.c-prose > * + * { margin-block-start: var(--sp-5); }
.c-prose p { line-height: 1.78; color: var(--ink-2); max-width: 68ch; text-wrap: pretty; }
.c-prose h2 { font-family: var(--ff-display); font-size: var(--fs-h3); color: var(--ink); margin-block-start: var(--sp-8); letter-spacing: -0.015em; }
.c-prose h3 { font-family: var(--ff-display); font-size: var(--fs-h4); color: var(--ink); margin-block-start: var(--sp-7); }
.c-prose strong { color: var(--ink); font-weight: 600; }
.c-prose a:not(.c-btn) {
  color: var(--crimson); font-weight: 500;
  background-image: linear-gradient(var(--crimson), var(--crimson));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s var(--ease);
}
.c-prose a:not(.c-btn):hover { background-size: 0 1px; }

/* Checked list */
.c-ticks { display: grid; gap: var(--sp-3); }
.c-ticks li {
  display: grid; grid-template-columns: 1.35rem 1fr; gap: var(--sp-3);
  align-items: start; font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2);
}
.c-ticks li::before {
  content: ''; margin-block-start: 0.5rem;
  width: 0.6rem; height: 0.6rem; border-radius: 1px;
  background: var(--crimson); flex: none;
  transform: rotate(45deg) scale(0.85);
}
.c-section--dark .c-ticks li { color: var(--ink-inv-2); }

/* Section header block */
.c-section__head { margin-block-end: clamp(2.5rem, 2rem + 2vw, 4rem); }
.c-section__head .c-lead { margin-block-start: 1.25rem; }
.c-section__head--center { text-align: center; max-width: 44rem; margin-inline: auto; }
.c-section__head--center .c-h2,
.c-section__head--center .c-lead { margin-inline: auto; }

/* --------------------------------------------------------------- BUTTONS */
/* Legibility notes:
   - Colour is stated explicitly (not just via a custom property) so a host
     platform's global `a { color: … }` rule cannot override it.
   - 14px / 700 / 0.045em tracking. Uppercase at 12-13px with wide tracking
     reads as cramped; this is the smallest size that stays comfortably clear.
   - White on #9B1B30 is 8.1:1 contrast — passes WCAG AAA. */
.civitas .c-btn {
  --btn-bg: var(--crimson);
  --btn-fg: #FFFFFF;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--ff-body);
  font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.045em; text-transform: uppercase;
  line-height: 1.2;
  background: var(--btn-bg); color: #FFFFFF;
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.civitas .c-btn:hover,
.civitas .c-btn:focus-visible { color: #FFFFFF; }
.c-btn > * { position: relative; z-index: 1; }
.c-btn svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.c-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-crim); }
.c-btn:hover svg { transform: translateX(4px); }
.c-btn:active { transform: translateY(0); }

.civitas .c-btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-2);
}
.civitas .c-btn--ghost:hover { border-color: var(--crimson); color: var(--crimson); box-shadow: none; }

.civitas .c-btn--onDark {
  background: transparent; color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.32);
}
.civitas .c-btn--onDark:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); color: #FFFFFF; box-shadow: none; }

/* Crimson on white — 8.1:1, same pairing inverted */
.civitas .c-btn--white { background: #FFFFFF; color: var(--crimson); }
.civitas .c-btn--white:hover { color: var(--crimson-dk); box-shadow: 0 8px 28px rgba(0,0,0,.22); }

/* Text link with arrow */
.c-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--crimson);
}
.c-link svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.c-link:hover svg { transform: translateX(5px); }
.c-link::after {
  content: ''; position: absolute;
}
.c-section--dark .c-link { color: var(--crimson-lt); }

/* ============================================================== NAV ==== */
.c-nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
/* The gutter comes from .c-wrap, which is now a separate parent element.
   Do NOT put .c-wrap and .c-nav__inner on the same element — .c-nav__inner's
   width:100% would override .c-wrap's width and the logo would sit flush
   against the viewport edge. */
.c-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(0.75rem, 2vw, var(--sp-5)); width: 100%; min-width: 0;
}
.c-nav > .c-wrap { width: min(var(--maxw), 100% - (var(--gutter) * 2)); }

.c-nav.is-solid {
  height: 66px;
  background: rgba(24, 24, 24, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 8px 32px rgba(0,0,0,.18);
}
/* Light-header pages (inner pages with cream hero) */
.c-nav--light { background: var(--charcoal); }

/* Scroll progress rail — sits on the nav's lower edge */
.c-nav__progress {
  position: absolute; inset-block-end: 0; inset-inline-start: 0;
  height: 2px; width: 100%;
  transform: scaleX(var(--scroll, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--crimson-dk), var(--crimson-lt));
  opacity: 0; transition: opacity .4s var(--ease);
  will-change: transform;
}
.c-nav.is-solid .c-nav__progress { opacity: 1; }

/* Logo lockup ------------------------------------------------------------
   Mark and text are separate flex children; the text is its own column so the
   wordmark and strapline align to a shared left edge and centre as one block
   against the mark. Nothing relies on inline-block baselines. */
.c-logo {
  display: inline-flex; align-items: center;
  gap: 0.65rem; flex: 0 0 auto;
  min-width: 0;                 /* allows the lockup to shrink, never clip */
  line-height: 1;
}
.c-logo__mark {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: block; overflow: visible;
  border-radius: 50%;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.c-logo__text {
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.26rem; min-width: 0;
}
.c-logo__word {
  display: block;
  font-family: var(--ff-display); font-size: 1.2rem; font-weight: 700;
  color: var(--white); letter-spacing: 0.02em; line-height: 1;
  white-space: nowrap;
}
.c-logo__word span { color: var(--crimson-lt); margin-inline-start: 0.06em; }
.c-logo__sub {
  display: block; font-family: var(--ff-body);
  font-size: 0.5rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-inv-3);
  line-height: 1; white-space: nowrap;
}

/* Badge hover: a small lift and a soft crimson halo, and the community arc
   above the figures brightens. Scaling the whole roundel keeps every element in
   proportion, so nothing can drift out of the viewBox. */
.c-logo:hover .c-logo__mark {
  transform: scale(1.05);
  box-shadow: 0 4px 18px rgba(155, 27, 48, .45);
}
.c-logo__arc { transition: stroke .5s var(--ease); }
.c-logo:hover .c-logo__arc { stroke: rgba(255, 255, 255, .6); }

/* Desktop menu */
.c-menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.c-menu__item { position: relative; }
.c-menu__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.03em;
  color: rgba(255,255,255,.72); padding-block: 0.5rem;
  transition: color .25s var(--ease);
  white-space: nowrap;
}
.c-menu__link::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  height: 1px; width: 100%; background: var(--crimson-lt);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .4s var(--ease);
}
.c-menu__link:hover, .c-menu__link[aria-current="page"] { color: #fff; }
.c-menu__link:hover::after,
.c-menu__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.c-menu__link svg { width: 9px; height: 9px; opacity: .55; transition: transform .3s var(--ease); }
.c-menu__item:hover .c-menu__link svg { transform: rotate(180deg); }

/* Dropdown */
.c-drop {
  position: absolute; inset-block-start: calc(100% + 0.9rem); inset-inline-start: -1.25rem;
  min-width: 290px; padding: 0.6rem;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--rule);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.c-menu__item:hover .c-drop,
.c-menu__item:focus-within .c-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.c-drop::before { content: ''; position: absolute; inset-block-start: -1rem; inset-inline: 0; height: 1rem; }
.c-drop a {
  display: block; padding: 0.65rem 0.85rem; border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.4;
  transition: background-color .2s, color .2s, padding-inline-start .25s var(--ease);
}
.c-drop a strong { display: block; font-weight: 600; color: var(--ink); font-size: var(--fs-base); }
.c-drop a span { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-block-start: 0.1rem; }
.c-drop a:hover { background: var(--cream); padding-inline-start: 1.1rem; }
.c-drop a:hover strong { color: var(--crimson); }

.civitas .c-nav__cta {
  padding: 0.72rem 1.45rem;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em;
  flex: 0 0 auto; white-space: nowrap;
}

/* Burger */
.c-burger {
  display: none; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center; border-radius: var(--radius);
}
.c-burger span {
  display: block; position: relative; width: 20px; height: 1.5px;
  background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease), background-color .2s;
}
.c-burger span::before, .c-burger span::after {
  content: ''; position: absolute; inset-inline-start: 0;
  width: 20px; height: 1.5px; background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease);
}
.c-burger span::before { inset-block-start: -6px; }
.c-burger span::after  { inset-block-start: 6px; }
.c-burger[aria-expanded="true"] span { background: transparent; }
.c-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.c-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.c-drawer {
  position: fixed; inset: 0; z-index: 190;
  background: var(--charcoal);
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) var(--sp-8);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.c-drawer.is-open { opacity: 1; visibility: visible; }
.c-drawer__list { display: flex; flex-direction: column; }
.c-drawer__list > li { border-block-end: 1px solid var(--rule-inv); }
.c-drawer__list a {
  display: block; padding: 1.1rem 0;
  font-family: var(--ff-display); font-size: 1.35rem; font-weight: 500;
  color: var(--ink-inv);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .2s;
}
.c-drawer.is-open .c-drawer__list a { opacity: 1; transform: none; }
.c-drawer__list a:hover { color: var(--crimson-lt); }
.c-drawer__sub { padding-block-end: 1rem; }
.c-drawer__sub a { font-family: var(--ff-body); font-size: var(--fs-base); padding: 0.5rem 0 0.5rem 1.1rem; color: var(--ink-inv-2); border-inline-start: 1px solid var(--rule-inv-2); }
.c-drawer__cta { margin-block-start: var(--sp-7); display: grid; gap: var(--sp-3); }

/* ============================================================= HERO ==== */
.c-hero {
  position: relative; overflow: hidden;
  background: var(--charcoal);
  padding-block: calc(var(--nav-h) + clamp(4rem, 8vw, 7rem)) clamp(4rem, 8vw, 7rem);
  min-height: min(88vh, 860px);
  display: flex; align-items: center;
  isolation: isolate;
}
.c-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; width: 100%;
}
.c-hero__copy { position: relative; z-index: 2; }
.c-hero__eyebrow { color: var(--crimson-lt); }
.c-hero__title {
  font-family: var(--ff-display); font-weight: 600;
  font-size: var(--fs-hero); line-height: 1.06; letter-spacing: -0.03em;
  color: var(--white); margin-block-end: var(--sp-6);
}
.c-hero__title em { font-style: normal; color: var(--crimson-lt); }
.c-hero__sub {
  font-size: var(--fs-md); line-height: 1.74; color: var(--ink-inv-2);
  max-width: 46ch; margin-block-end: var(--sp-7); text-wrap: pretty;
}
.c-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Hero atmosphere */
.c-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.c-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 70% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 70% 40%, #000 20%, transparent 78%);
}
.c-hero__bloom {
  position: absolute; inset-inline-end: 8%; inset-block-start: 12%;
  width: clamp(280px, 42vw, 620px); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(155,27,48,.42) 0%, rgba(155,27,48,.10) 42%, transparent 68%);
  filter: blur(46px);
  animation: c-breathe 11s var(--ease-inout) infinite;
}
@keyframes c-breathe {
  0%, 100% { transform: scale(1) translateY(0); opacity: .85; }
  50%      { transform: scale(1.1) translateY(-14px); opacity: 1; }
}
.c-hero__vignette {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--charcoal) 18%, rgba(30,30,30,.72) 48%, transparent 82%);
}

/* Hero pillar sculpture (the signature visual) */
.c-pillars {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.6rem);
  height: clamp(260px, 34vw, 420px);
}
.c-pillar {
  position: relative; flex: 1; max-width: 108px;
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
  transform: scaleY(0);
  animation: c-rise 1.5s var(--ease) forwards;
  overflow: hidden;
}
.c-pillar::after { /* capital */
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 9px; background: currentColor; opacity: .55;
}
.c-pillar--1 { height: 62%;  background: rgba(255,255,255,.13); color: var(--crimson-lt); animation-delay: .25s; }
.c-pillar--2 { height: 100%; background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-dk) 100%); color: #fff; animation-delay: .1s; box-shadow: 0 0 60px rgba(155,27,48,.4); }
.c-pillar--3 { height: 76%;  background: rgba(255,255,255,.13); color: var(--crimson-lt); animation-delay: .4s; }
@keyframes c-rise { to { transform: scaleY(1); } }

/* Light sweep across the centre pillar */
.c-pillar--2::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: -60%;
  width: 55%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  animation: c-sweep 5.5s 2s var(--ease-inout) infinite;
}
@keyframes c-sweep { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(400%); } }

.c-pillars__base {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  height: 8px; background: rgba(255,255,255,.2); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  animation: c-baseIn 1.1s .05s var(--ease) forwards;
}
@keyframes c-baseIn { to { transform: scaleX(1); } }

.c-pillars__labels {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.6rem);
  margin-block-start: var(--sp-5); text-align: center;
}
.c-pillars__labels span {
  font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-inv-3);
  opacity: 0; animation: c-fadeUp .8s 1.3s var(--ease) forwards;
}
.c-pillars__labels span:nth-child(2) { color: var(--crimson-lt); animation-delay: 1.15s; }
.c-pillars__labels span:nth-child(3) { animation-delay: 1.45s; }
@keyframes c-fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Hero stat strip */
.c-hero__strip {
  position: relative; z-index: 2;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--rule-inv);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-6);
}
.c-stat__num {
  font-family: var(--ff-display); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 600; color: var(--white); line-height: 1; letter-spacing: -0.02em;
}
.c-stat__num em { font-style: normal; color: var(--crimson-lt); }
.c-stat__label {
  font-size: var(--fs-xs); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-inv-3); margin-block-start: 0.55rem;
}
.c-section--cream .c-stat__num, .c-stat--dark .c-stat__num { color: var(--ink); }
.c-section--cream .c-stat__num em { color: var(--crimson); }
.c-section--cream .c-stat__label { color: var(--ink-3); }

/* ---------------------------------------------- INNER-PAGE HERO (compact) */
.c-phero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--charcoal);
  padding-block: calc(var(--nav-h) + clamp(2.75rem, 5vw, 4.5rem)) clamp(3rem, 5vw, 4.5rem);
}
.c-phero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.c-phero__bg::before {
  content: ''; position: absolute; inset-inline-end: -6%; inset-block-start: -30%;
  width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(155,27,48,.34) 0%, transparent 64%);
  filter: blur(50px);
}
.c-phero__bg::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 100%);
  mask-image: linear-gradient(105deg, transparent 30%, #000 100%);
}
.c-phero__inner { position: relative; z-index: 1; max-width: 46rem; }
.c-phero__title { color: var(--white); margin-block-end: var(--sp-5); }
.c-phero__sub { font-size: var(--fs-md); line-height: 1.72; color: var(--ink-inv-2); max-width: 56ch; text-wrap: pretty; }
.c-phero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-block-start: var(--sp-7); }

/* Breadcrumbs */
.c-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: var(--fs-xs); color: var(--ink-inv-3);
  margin-block-end: var(--sp-5); letter-spacing: 0.04em;
}
.c-crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.c-crumbs li + li::before { content: '/'; color: rgba(255,255,255,.22); }
.c-crumbs a { transition: color .2s; }
.c-crumbs a:hover { color: var(--crimson-lt); }
.c-crumbs [aria-current] { color: var(--ink-inv-2); }

/* ============================================================ CARDS ==== */
.c-grid { display: grid; gap: var(--sp-5); }
.c-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.c-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.c-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Service card — crimson rises from the base on hover (pillar motif) */
.c-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 1rem + 1.4vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.c-card::before {
  content: ''; position: absolute; inset-block-end: 0; inset-inline: 0; z-index: -1;
  height: 100%; background: linear-gradient(180deg, transparent, var(--cream) 55%);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .55s var(--ease);
}
.c-card::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline: 0;
  height: 2px; background: var(--crimson);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.c-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--rule-2); }
.c-card:hover::before { transform: scaleY(1); }
.c-card:hover::after  { transform: scaleX(1); }

.c-card__idx {
  position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.4rem;
  font-family: var(--ff-display); font-size: 2.6rem; font-weight: 700;
  color: rgba(155,27,48,.07); line-height: 1; user-select: none;
  transition: color .45s var(--ease);
}
.c-card:hover .c-card__idx { color: rgba(155,27,48,.13); }

.c-card__icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: rgba(155,27,48,.07); border-radius: var(--radius);
  margin-block-end: var(--sp-5);
  transition: background-color .4s var(--ease), transform .5s var(--ease);
}
.c-card:hover .c-card__icon { background: var(--crimson); transform: translateY(-2px); }
.c-card__icon svg { width: 21px; height: 21px; stroke: var(--crimson); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--ease); }
.c-card:hover .c-card__icon svg { stroke: #fff; }

.c-card__title { font-family: var(--ff-display); font-size: var(--fs-h4); font-weight: 600; color: var(--ink); margin-block-end: var(--sp-3); letter-spacing: -0.01em; }
.c-card__text { font-size: var(--fs-base); line-height: 1.72; color: var(--ink-3); flex: 1; text-wrap: pretty; }
.c-card__more { margin-block-start: var(--sp-5); }

/* Whole-card link */
.c-card--link .c-card__title a::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
}
.c-card--link .c-card__title a { position: static; }

/* Dark variant */
.c-card--dark {
  background: rgba(255,255,255,.035);
  border-color: var(--rule-inv);
}
.c-card--dark::before { background: linear-gradient(180deg, transparent, rgba(155,27,48,.14) 60%); }
.c-card--dark .c-card__title { color: var(--white); }
.c-card--dark .c-card__text { color: var(--ink-inv-2); }
.c-card--dark .c-card__icon { background: rgba(155,27,48,.2); }
.c-card--dark .c-card__icon svg { stroke: #E4718A; }
.c-card--dark:hover { border-color: rgba(155,27,48,.45); box-shadow: none; }
.c-card--dark .c-card__idx { color: rgba(255,255,255,.05); }
.c-card--dark:hover .c-card__idx { color: rgba(192,37,61,.22); }

/* Sector card list */
.c-card__list { margin-block-start: var(--sp-4); display: grid; gap: 0; }
.c-card__list li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-sm); color: var(--ink-3);
  padding-block: 0.55rem; border-block-end: 1px solid var(--rule);
}
.c-card__list li::before { content: ''; width: 12px; height: 1px; background: var(--crimson); flex: none; }
.c-card--dark .c-card__list li { color: var(--ink-inv-3); border-color: var(--rule-inv); }
.c-card--dark .c-card__list li::before { background: var(--crimson-lt); }

/* ------------------------------------------------- SPLIT / EDITORIAL ROW */
.c-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.c-split--top { align-items: start; }
.c-split--sticky > :first-child { position: sticky; inset-block-start: calc(var(--nav-h) + 2rem); }

/* Numbered feature rows */
.c-features { display: grid; gap: var(--sp-7); counter-reset: cf; }
.c-feature {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--sp-5);
  padding-block-end: var(--sp-7); border-block-end: 1px solid var(--rule);
}
.c-feature:last-child { border-block-end: 0; padding-block-end: 0; }
.c-feature__num {
  counter-increment: cf;
  font-family: var(--ff-display); font-size: 1.7rem; font-weight: 700;
  color: var(--cream-3); line-height: 1.1;
  transition: color .4s var(--ease);
}
.c-feature__num::before { content: '0' counter(cf); }
.c-feature:hover .c-feature__num { color: var(--crimson); }
.c-feature__title { font-family: var(--ff-display); font-size: var(--fs-h4); font-weight: 600; color: var(--ink); margin-block-end: 0.6rem; }
.c-feature__text { font-size: var(--fs-base); line-height: 1.75; color: var(--ink-3); text-wrap: pretty; }
.c-section--dark .c-feature { border-color: var(--rule-inv); }
.c-section--dark .c-feature__num { color: rgba(255,255,255,.14); }
.c-section--dark .c-feature:hover .c-feature__num { color: var(--crimson-lt); }
.c-section--dark .c-feature__title { color: var(--white); }
.c-section--dark .c-feature__text { color: var(--ink-inv-2); }

/* ------------------------------------------------------- THE TWO PILLARS */
.c-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: var(--radius-lg); overflow: hidden; }
.c-offer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--white); padding: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  display: flex; flex-direction: column;
  transition: background-color .5s var(--ease);
}
.c-offer::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--crimson-dk), var(--crimson-lt));
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.c-offer:hover { background: var(--cream); }
.c-offer:hover::before { transform: scaleX(1); }
.c-offer__tag {
  display: inline-block; align-self: flex-start;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--crimson); background: rgba(155,27,48,.08);
  padding: 0.35rem 0.75rem; border-radius: 100px; margin-block-end: var(--sp-5);
}
.c-offer__title { font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); margin-block-end: var(--sp-4); letter-spacing: -0.015em; }
.c-offer__text { font-size: var(--fs-base); line-height: 1.76; color: var(--ink-3); margin-block-end: var(--sp-5); }
.c-offer__list { display: grid; gap: 0.7rem; margin-block-end: var(--sp-6); flex: 1; }
.c-offer__list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.7rem; font-size: var(--fs-sm); color: var(--ink-2); align-items: start; }
.c-offer__list li svg { width: 13px; height: 13px; margin-block-start: 0.35rem; stroke: var(--crimson); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------- PROCESS */
.c-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-6); position: relative; }
.c-step { position: relative; padding-block-start: var(--sp-6); }
.c-step::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 2px; background: var(--rule-2);
}
.c-step::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  height: 2px; width: 100%; background: var(--crimson);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease);
}
.c-step.is-in::after { transform: scaleX(1); }
.c-step:nth-child(2)::after { transition-delay: .12s; }
.c-step:nth-child(3)::after { transition-delay: .24s; }
.c-step:nth-child(4)::after { transition-delay: .36s; }
.c-step__num { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; color: var(--crimson); margin-block-end: 0.7rem; }
.c-step__title { font-family: var(--ff-display); font-size: var(--fs-h4); color: var(--ink); margin-block-end: 0.5rem; }
.c-step__text { font-size: var(--fs-sm); line-height: 1.72; color: var(--ink-3); }
.c-section--dark .c-step::before { background: var(--rule-inv-2); }
.c-section--dark .c-step__title { color: var(--white); }
.c-section--dark .c-step__text { color: var(--ink-inv-2); }
.c-section--dark .c-step__num { color: var(--crimson-lt); }

/* ------------------------------------------------------------- QUOTE */
.civitas .c-quote {
  position: relative;
  padding-block: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-inline-end: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  /* Deliberately deeper on the left: the crimson rule sits on that edge, and the
     text needs a clear gutter between it and the rule. */
  padding-inline-start: clamp(2.75rem, 1.9rem + 3.2vw, 4.75rem);
  background: var(--charcoal); border-radius: var(--radius-lg);
  overflow: hidden; isolation: isolate;
}
/* Hairline, top right */
.c-quote::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline-end: 0;
  width: 45%; height: 3px; background: linear-gradient(to left, var(--crimson-lt), transparent);
}
/* Crimson rule, left edge.
   This replaces a 9rem decorative quotation mark that used to sit at
   top:-1.6rem inside an overflow:hidden box, so its top was sliced off and it
   collided with the real opening quote in the text. Two quote marks in the same
   corner, one of them clipped, is what read as broken alignment. */
.c-quote::after {
  content: ''; position: absolute;
  inset-block: clamp(1.75rem, 4vw, 2.75rem);
  inset-inline-start: 0; width: 3px;
  background: linear-gradient(180deg, var(--crimson-lt), rgba(192, 37, 61, 0));
  z-index: 0;             /* absolutely-positioned pseudo-elements paint ABOVE
                             inline text by default — without this the rule sat
                             on top of the first few pixels of every line and
                             sliced the leading letter of each one */
}
/* Text sits above the rule, whatever the padding resolves to */
.c-quote__text,
.c-quote__attr { position: relative; z-index: 1; }
.c-quote__text {
  font-family: var(--ff-display); font-size: var(--fs-lg); line-height: 1.58;
  color: var(--ink-inv); font-weight: 400; text-wrap: pretty;
  /* No hanging indent. An earlier version pulled the first line left by 0.4em so
     the opening quotation mark would hang into the padding — textbook optical
     alignment, but at this size against a dark panel it just read as the line
     being out of alignment. Everything starts flush at the padding edge instead. */
  text-indent: 0;
}
.c-quote__attr {
  margin-block-start: var(--sp-5); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--crimson-lt);
}

/* ------------------------------------------------------------ FACT GRID */
.c-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); overflow: hidden;
}
.c-fact { background: var(--white); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); transition: background-color .3s; }
.c-fact:hover { background: var(--cream); }
.c-fact__num { font-family: var(--ff-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; color: var(--ink); line-height: 1.1; letter-spacing: -0.02em; }
.c-fact__num em { font-style: normal; color: var(--crimson); }
.c-fact__label { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: 0.06em; margin-block-start: 0.3rem; line-height: 1.45; }

/* --------------------------------------------------------------- FAQ */
.c-faq { display: grid; gap: 0; border-block-start: 1px solid var(--rule); }
.c-faq__item { border-block-end: 1px solid var(--rule); }
.c-faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5);
  width: 100%; text-align: start;
  padding: 1.4rem 0;
  font-family: var(--ff-display); font-size: var(--fs-h4); font-weight: 600;
  color: var(--ink); line-height: 1.4;
  transition: color .25s;
}
.c-faq__q:hover { color: var(--crimson); }
.c-faq__icon {
  position: relative; flex: none; width: 20px; height: 20px; margin-block-start: 0.25rem;
}
.c-faq__icon::before, .c-faq__icon::after {
  content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  width: 100%; height: 1.5px; background: var(--crimson); border-radius: 2px;
  transition: transform .4s var(--ease);
}
.c-faq__icon::after { transform: rotate(90deg); }
.c-faq__q[aria-expanded="true"] .c-faq__icon::after { transform: rotate(0deg); }
.c-faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.c-faq__q[aria-expanded="true"] + .c-faq__a { grid-template-rows: 1fr; }
.c-faq__a > div { overflow: hidden; }
.c-faq__a p { padding-block-end: 1.5rem; font-size: var(--fs-base); line-height: 1.78; color: var(--ink-3); max-width: 72ch; }
.c-faq__a p + p { padding-block-start: 0; margin-block-start: -0.6rem; }

/* ------------------------------------------------------------ CTA BAND */
.c-cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--charcoal); color: var(--ink-inv-2);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  text-align: center;
}
.c-cta__bg { position: absolute; inset: 0; z-index: -1; }
.c-cta__bg::before {
  content: ''; position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  width: 120%; aspect-ratio: 2 / 1; transform: translate(-50%, -35%);
  background: radial-gradient(ellipse at center, rgba(155,27,48,.35) 0%, transparent 62%);
  filter: blur(40px);
}
/* Faint pillar silhouettes */
.c-cta__bg::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline: 0; height: 55%;
  background:
    linear-gradient(to top, rgba(255,255,255,.035), transparent) 12% 100% / 60px 62% no-repeat,
    linear-gradient(to top, rgba(192,37,61,.10), transparent) 50% 100% / 76px 100% no-repeat,
    linear-gradient(to top, rgba(255,255,255,.035), transparent) 88% 100% / 60px 78% no-repeat;
}
.c-cta__title { color: var(--white); margin-block-end: var(--sp-5); }
.c-cta__text { font-size: var(--fs-md); color: var(--ink-inv-2); max-width: 54ch; margin-inline: auto; margin-block-end: var(--sp-7); text-wrap: pretty; }
.c-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.c-cta__note { margin-block-start: var(--sp-7); font-size: var(--fs-sm); color: var(--ink-inv-3); }
.c-cta__note a { color: var(--crimson-lt); }
.c-cta__note a:hover { text-decoration: underline; }

/* Crimson variant */
.c-cta--crimson { background: linear-gradient(135deg, var(--crimson-dk) 0%, var(--crimson) 55%, var(--crimson-lt) 100%); }
.c-cta--crimson .c-cta__bg::before { background: radial-gradient(ellipse at center, rgba(255,255,255,.16) 0%, transparent 60%); }
.c-cta--crimson .c-cta__bg::after { opacity: .5; }
.c-cta--crimson .c-cta__text { color: rgba(255,255,255,.8); }
.c-cta--crimson .c-cta__note { color: rgba(255,255,255,.62); }
.c-cta--crimson .c-cta__note a { color: #fff; }

/* --------------------------------------------------------------- FORM */
.c-form { display: grid; gap: var(--sp-5); }
.c-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); }
.c-field { display: grid; gap: 0.5rem; }
.c-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.c-field label span { color: var(--crimson); }
.c-field input, .c-field select, .c-field textarea {
  font: inherit; font-size: var(--fs-base); color: var(--ink);
  padding: 0.85rem 1rem; background: var(--white);
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  transition: border-color .25s, box-shadow .25s;
  width: 100%;
}
.c-field textarea { min-height: 140px; resize: vertical; }
.c-field input:focus, .c-field select:focus, .c-field textarea:focus {
  outline: none; border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(155,27,48,.12);
}
.c-form__note { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }

/* ------------------------------------------------------- CONTACT PANEL */
.c-contact-panel {
  background: var(--charcoal); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  color: var(--ink-inv-2); position: relative; overflow: hidden;
}
.c-contact-panel::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 3px; height: 100%; background: linear-gradient(180deg, var(--crimson-lt), transparent);
}
.c-contact-item { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--sp-3); align-items: start; padding-block: var(--sp-4); border-block-end: 1px solid var(--rule-inv); }
.c-contact-item:last-child { border-block-end: 0; }
.c-contact-item__ico { width: 36px; height: 36px; display: grid; place-items: center; background: rgba(155,27,48,.18); border-radius: var(--radius); }
.c-contact-item__ico svg { width: 16px; height: 16px; stroke: #E4718A; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.c-contact-item__k { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-inv-3); margin-block-end: 0.25rem; }
.c-contact-item__v { font-size: var(--fs-base); color: var(--white); line-height: 1.55; }
.c-contact-item__v a:hover { color: var(--crimson-lt); }

/* --------------------------------------------------------- TRUST STRIP */
.c-trust {
  padding-block: var(--sp-6);
  border-block: 1px solid var(--rule);
  background: var(--cream);
}
.c-trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 3rem); }
.c-trust__label { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.c-trust__item {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); letter-spacing: 0.02em;
}
.c-trust__item svg { width: 16px; height: 16px; stroke: var(--crimson); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------------------------------------------------------- INSIGHTS */
.c-post {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.c-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--rule-2); }
/* Whole card is clickable, but the accessible link text is the headline */
.c-post__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.c-post__title a { transition: color .25s var(--ease); }
.c-post:hover .c-post__title a { color: var(--crimson); }
.c-post:focus-within { outline: 2px solid var(--crimson-lt); outline-offset: 3px; }
.c-post__title a:focus-visible { outline: none; }
.c-post__banner {
  height: 7px; background: linear-gradient(90deg, var(--crimson-dk), var(--crimson-lt));
  transform: scaleX(.28); transform-origin: left;
  transition: transform .6s var(--ease);
}
.c-post:hover .c-post__banner { transform: scaleX(1); }
.c-post__body { padding: clamp(1.4rem, 1rem + 1vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.c-post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-block-end: var(--sp-4);
}
.c-post__meta > * + *::before { content: '·'; margin-inline-end: 0.75rem; color: var(--cream-3); }
.c-post__meta span:first-child { color: var(--crimson); font-weight: 600; }
.c-post__title { font-family: var(--ff-display); font-size: var(--fs-h4); font-weight: 600; color: var(--ink); line-height: 1.35; margin-block-end: var(--sp-3); }
.c-post__excerpt { font-size: var(--fs-sm); line-height: 1.72; color: var(--ink-3); flex: 1; }
.c-post__more { margin-block-start: var(--sp-5); font-size: var(--fs-xs); }

/* --------------------------------------------------------- PAGE NAV */
.c-pagenav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5);
}
.c-pagenav a {
  display: block; padding: var(--sp-5);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  transition: border-color .3s, background-color .3s, transform .3s var(--ease);
}
.c-pagenav a:hover { border-color: var(--crimson); background: var(--cream); transform: translateY(-3px); }
.c-pagenav__k { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); margin-block-end: 0.5rem; }
.c-pagenav__t { font-family: var(--ff-display); font-size: var(--fs-h4); color: var(--ink); }

/* ------------------------------------------------------------- FOOTER */
.c-footer { background: var(--charcoal); color: var(--ink-inv-3); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--sp-6); }
.c-footer__grid {
  display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block-end: var(--sp-8); border-block-end: 1px solid var(--rule-inv);
}
.c-footer__about { font-size: var(--fs-sm); line-height: 1.75; color: var(--ink-inv-3); margin-block-start: var(--sp-4); max-width: 38ch; }
.c-footer__col-t { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-inv-2); margin-block-end: var(--sp-4); }
.c-footer__links { display: grid; gap: 0.65rem; }
.c-footer__links a { font-size: var(--fs-sm); color: var(--ink-inv-3); transition: color .2s, transform .25s var(--ease); display: inline-block; }
.c-footer__links a:hover { color: #fff; transform: translateX(3px); }
.c-footer__bottom {
  padding-block-start: var(--sp-6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--fs-xs); color: rgba(255,255,255,.3);
}
.c-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.c-footer__legal a:hover { color: rgba(255,255,255,.7); }
.c-footer__placeholder { color: rgba(255,255,255,.22); font-style: italic; }

/* ==================================================== REVEAL ANIMATION */
/* Base: elements start hidden only when JS is present (html.c-js) */
.c-js .c-rv { opacity: 0; transform: translateY(26px); }
.c-js .c-rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.c-js .c-rv--left  { transform: translateX(-26px); }
.c-js .c-rv--right { transform: translateX(26px); }
.c-js .c-rv--scale { transform: scale(.96); }
.c-js .c-rv.is-in { transition-delay: var(--d, 0s); }

/* Masked line reveal for display headings -------------------------------
   Each line sits in an overflow:hidden box so the text can slide up from
   behind an invisible edge.

   The catch: a line box at line-height ~1.1 is SHORTER than the font's full
   ascent-to-descent range, so descenders (g, y, p, j) fall outside it and get
   sliced off by the mask. `padding-block-end` extends the mask below the
   baseline to give descenders room to paint.

   Because the mask is now taller than the line box, the hidden state has to
   travel further than 100% or the top of the text peeks into the padding.
   125% clears it at every line-height used here. */
.c-reveal-lines .c-line { display: block; }   /* holds line breaks without JS */

/* Playfair Display: descender -278/1000, so glyph tails fall ~0.08em below the
   line box at these line-heights. 0.18em is comfortable clearance.
   No top padding is needed: its ascent metric (1082/1000) already puts the line
   box top above the tallest glyph, so nothing clips upward. */
.c-js .c-reveal-lines .c-line {
  overflow: hidden;
  padding-block-end: 0.18em;
}
.c-js .c-reveal-lines .c-line > span {
  display: block; transform: translateY(125%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.09s);
}
.c-js .c-reveal-lines.is-in .c-line > span { transform: none; }

/* Hairline rule that draws in */
.c-rule {
  height: 1px; background: var(--rule-2);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease);
}
.c-rule.is-in { transform: scaleX(1); }
.c-section--dark .c-rule { background: var(--rule-inv-2); }

/* Counter */
.c-count { font-variant-numeric: tabular-nums; }

/* ======================================================== BREAKPOINTS */
/* Between the desktop menu appearing and there being comfortable room for it,
   drop the strapline so the logo, menu and CTA never crowd each other. */
@media (min-width: 1021px) and (max-width: 1200px) {
  .c-nav .c-logo__sub { display: none; }
  .c-nav .c-logo__text { gap: 0; }
  .c-menu { gap: 1.15rem; }
}

@media (max-width: 1020px) {
  .c-menu, .civitas .c-nav__cta { display: none; }
  .c-burger { display: flex; }
  .c-hero__inner { grid-template-columns: 1fr; }
  .c-hero__visual { order: -1; max-width: 460px; width: 100%; margin-inline: auto; }
  .c-split--sticky > :first-child { position: static; }
}
@media (max-width: 620px) {
  .civitas { --nav-h: 66px; }
  .c-hero { min-height: auto; }
  .c-hero__visual { display: none; }
  .c-feature { grid-template-columns: 2.5rem 1fr; gap: var(--sp-4); }
  .c-footer__grid { grid-template-columns: 1fr 1fr; }
  .c-btn { width: 100%; }
  .c-hero__actions .c-btn, .c-cta__actions .c-btn, .c-phero__actions .c-btn { width: auto; flex: 1 1 auto; min-width: 200px; }
}
@media (max-width: 420px) {
  .c-footer__grid { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------ CASE STUDIES */
.c-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); }
.c-case {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-6); overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.c-case::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block: 0; width: 3px;
  background: var(--crimson); transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease);
}
.c-case:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--rule-2); }
.c-case:hover::before { transform: scaleY(1); }
.c-section--dark .c-case { background: var(--charcoal-2); border-color: var(--rule-inv); }
.c-section--dark .c-case:hover { box-shadow: none; border-color: rgba(155,27,48,.45); }
.c-case__sector {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--crimson); margin-block-end: var(--sp-4);
}
.c-case__sector::before { content: ''; width: 18px; height: 1px; background: currentColor; }
.c-section--dark .c-case__sector { color: var(--crimson-lt); }
.c-case__title { font-family: var(--ff-display); font-size: var(--fs-h4); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-block-end: var(--sp-4); text-wrap: balance; }
.c-section--dark .c-case__title { color: var(--white); }
.c-case__rows { display: grid; gap: 0.85rem; flex: 1; }
.c-case__row { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-3); align-items: start; }
.c-case__k { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-block-start: 0.2em; }
.c-case__v { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-2); }
.c-section--dark .c-case__k { color: var(--ink-inv-3); }
.c-section--dark .c-case__v { color: var(--ink-inv-2); }
.c-case__more { margin-block-start: var(--sp-5); }
.c-case--link .c-case__title a { color: inherit; text-decoration: none; position: static; }
.c-case--link .c-case__title a::after { content: ''; position: absolute; inset: 0; }
.c-cases__note {
  margin-block-start: var(--sp-6); font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; max-width: 72ch;
}
.c-section--dark .c-cases__note { color: var(--ink-inv-3); }

/* Full case study (case-studies page) */
.c-casefull { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: var(--sp-9); border-block-start: 1px solid var(--rule); }
.c-casefull:first-of-type { border-block-start: 0; padding-block-start: 0; }
.c-casefull__aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); background: var(--charcoal); color: var(--ink-inv); border-radius: var(--radius-lg); padding: var(--sp-6); border-inline-start: 3px solid var(--crimson); }
.c-casefull__aside dl { display: grid; gap: var(--sp-4); }
.c-casefull__aside dt { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-inv-3); margin-block-end: 0.2rem; }
.c-casefull__aside dd { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-inv); }
.c-casefull__aside dd a { color: #E4718A; text-decoration: none; border-block-end: 1px solid rgba(228,113,138,.35); }
.c-casefull__aside dd a:hover { border-color: #E4718A; }
.c-casefull .c-prose h2 { font-size: var(--fs-h3); margin-block-start: var(--sp-6); }
.c-casefull .c-prose h2:first-child { margin-block-start: 0; }
.c-casefull__title { font-family: var(--ff-display); font-size: var(--fs-h2); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; line-height: 1.15; margin-block: var(--sp-3) var(--sp-5); text-wrap: balance; }
.c-casefull__outcome { margin-block-start: var(--sp-6); padding: var(--sp-5) var(--sp-6); background: var(--cream); border-inline-start: 3px solid var(--crimson); border-radius: 0 var(--radius) var(--radius) 0; }
.c-casefull__outcome p { font-size: var(--fs-base); line-height: 1.7; color: var(--ink-2); }
.c-casefull__outcome p strong { font-family: var(--ff-display); font-size: var(--fs-md); color: var(--ink); display: block; margin-block-end: 0.35rem; }
.c-casenote { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5) var(--sp-6); background: var(--cream); border: 1px solid var(--cream-3); border-radius: var(--radius-lg); font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-2); max-width: 72ch; }
.c-casenote svg { width: 20px; height: 20px; stroke: var(--crimson); flex: none; margin-block-start: 2px; }
@media (max-width: 900px) {
  .c-casefull { grid-template-columns: 1fr; }
  .c-casefull__aside { position: static; }
}


/* ------------------------------------------------------------- VIDEO HERO */
.c-hero__video {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: 62% center; background-color: var(--charcoal);
}
.c-hero__video video {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block;
  opacity: 0; animation: c-videoIn 1.6s .2s var(--ease) forwards;
}
@keyframes c-videoIn { to { opacity: 1; } }
.c-hero--video .c-hero__bloom { opacity: .35; }
.c-hero--video .c-hero__grid { opacity: .35; }
.c-hero--video .c-hero__vignette {
  background:
    linear-gradient(90deg, rgba(30,30,30,.92) 0%, rgba(30,30,30,.72) 38%, rgba(30,30,30,.25) 70%, rgba(30,30,30,.35) 100%),
    linear-gradient(180deg, rgba(30,30,30,.55) 0%, rgba(30,30,30,0) 30%, rgba(30,30,30,.15) 70%, var(--charcoal) 100%);
}
.c-hero--video .c-hero__visual--video { min-height: 1px; }
@media (max-width: 1020px) {
  .c-hero--video .c-hero__visual--video { display: none; }
  .c-hero__video, .c-hero__video video { background-position: 70% center; object-position: 70% center; }
  .c-hero--video .c-hero__vignette {
    background: linear-gradient(180deg, rgba(30,30,30,.9) 0%, rgba(30,30,30,.78) 55%, var(--charcoal) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero__video video { display: none; } /* poster stays as the background image */
}

/* ==================================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .civitas *,
  .civitas *::before,
  .civitas *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .c-js .c-rv { opacity: 1 !important; transform: none !important; }
  .c-js .c-reveal-lines .c-line > span { transform: none !important; }
  .c-pillar { transform: scaleY(1) !important; }
  .c-rule { transform: scaleX(1) !important; }
  .c-step::after { transform: scaleX(1) !important; }
  .c-pillars__labels span { opacity: 1 !important; }
  .c-pillars__base { transform: scaleX(1) !important; }
}

/* =============================================================== PRINT */
@media print {
  .c-nav, .c-drawer, .c-cta, .c-burger { display: none !important; }
  .civitas { color: #000; background: #fff; }
  .c-hero, .c-phero, .c-section--dark, .c-footer { background: #fff !important; color: #000 !important; }
  .c-hero__title, .c-phero__title, .c-h1, .c-h2, .c-h3 { color: #000 !important; }
}