:root{
--bg:#FFFFFF;--surface:#F5F3F0;--surface-2:#F5F3F0;--ink:#0A0A0A;--muted:#6B6B6B;--accent:#7C3AED;--accent-ink:#7c3aed;--on-accent:#ffffff;--shadow-1:0 12px 32px color-mix(in oklab, #0A0A0A 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #0A0A0A 18%, transparent);
--radius:10px;
--font-display:'Archivo Black',sans-serif;--font-body:'Archivo',sans-serif;
--step--1:0.8000rem;--step-0:1.0000rem;--step-1:1.2500rem;--step-2:1.5625rem;--step-3:1.9531rem;--step-4:2.4414rem;--step-5:3.0518rem;--step-6:3.8147rem;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
--section-pad:clamp(56px, 7vw, 112px);--measure:62ch;--measure-sm:34rem;--measure-lg:76rem;
--ease:cubic-bezier(.4,0,.2,1);--dur-1:.45s;--dur-2:.9s;
}
:root[data-theme="light"]{--bg:#FFFFFF;--surface:#F5F3F0;--surface-2:#F5F3F0;--ink:#0A0A0A;--muted:#6B6B6B;--accent:#7C3AED;--accent-ink:#7c3aed;--on-accent:#ffffff;--shadow-1:0 12px 32px color-mix(in oklab, #0A0A0A 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #0A0A0A 18%, transparent);}
:root[data-theme="dark"]{--bg:#080808;--surface:#181818;--surface-2:#181818;--ink:#eeeeee;--muted:#9b9b9b;--accent:#7C3AED;--accent-ink:#9661f1;--on-accent:#eeeeee;--shadow-1:0 12px 32px color-mix(in oklab, #eeeeee 12%, transparent);--shadow-2:0 24px 64px color-mix(in oklab, #eeeeee 18%, transparent);}
html{color-scheme:light;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);}
[dir="rtl"] body{font-family:var(--font-body-ar,var(--font-body));}
[dir="rtl"] .title,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:var(--font-display-ar,var(--font-display));}
section{padding-block:var(--section-pad);}

/* Forge primitives — the shared vocabulary every block composes from.
   Written once, tuned by hand, skinned per design system through the
   documented custom properties. Blocks NEVER redefine these classes; they
   set the properties inside their own scope.

   Loaded after reset.css, before the page's styles.css.

   CONTRAST-SAFE ACCENT PAIR: the engine emits --accent-ink (the accent
   shifted until it reads ≥4.5:1 on --bg) and --on-accent (the text colour
   that survives ON an accent fill). Primitives read them with a fallback so
   the engine's computed values always win. Blocks must use --accent-ink for
   accent TEXT and --on-accent for text on an accent fill — never --accent. */

:root {
  /* button skin */
  --btn-radius: var(--radius);
  --btn-pad-block: var(--space-3);
  --btn-pad-inline: var(--space-5);
  --btn-weight: 600;
  --btn-shadow: none;
  --btn-border-width: 1px;
  /* the primary button's fill is a kit decision: heritage and couture
     systems forbid filled buttons outright, so a kit can hollow it out
     without any block knowing. */
  --btn-primary-bg: var(--accent);
  --btn-primary-ink: var(--on-accent, var(--bg));
  --btn-primary-border: transparent;
  --btn-size: var(--step-0);
  /* card skin */
  --card-radius: min(var(--radius), var(--space-6));
  --card-pad: var(--space-6);
  --card-bg: var(--surface);
  --card-border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  --card-shadow: none;
  /* media + fields + tags */
  --ph-radius: min(var(--radius), var(--space-6));
  --field-radius: var(--radius);
  --field-border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  --field-bg: var(--bg);
  --tag-radius: 999px;
  --tag-bg: color-mix(in oklab, var(--ink) 7%, transparent);
  --tag-ink: var(--ink);
  --field-label-color: var(--muted);
  --lead-done-color: var(--accent-ink, var(--accent));
  --scrim-veil: 86%;        /* how much --bg the scrim holds back */
  --measure-sm: 34rem;      /* element-scale max width: forms, capsules */
  --measure-lg: 76rem;
  /* typography accents */
  /* several systems (Medium, Revolut, Mercury, Elementor) ban chromatic text
     outright — the eyebrow must be able to go achromatic. */
  --eyebrow-color: var(--accent-ink, var(--accent));
  --eyebrow-transform: uppercase;
  --eyebrow-tracking: 0.12em;
  --eyebrow-size: var(--step--1);
  --heading-tracking: -0.02em;
  --heading-weight: 700;
  --rule-color: color-mix(in oklab, var(--ink) 12%, transparent);
}

/* ---------- layout helpers ---------- */
.wrap { inline-size: min(100% - var(--space-6) * 2, var(--wrap-max, 1200px)); margin-inline: auto; }
.wrap--narrow { --wrap-max: 860px; }
.wrap--wide { --wrap-max: 1440px; }
.stack > * + * { margin-block-start: var(--stack-gap, var(--space-4)); }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-transform);
  color: var(--eyebrow-color, var(--accent-ink, var(--accent)));
  font-weight: 500;
}
.title {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1.08;
  color: var(--ink);
}
.lede { color: var(--muted); font-size: var(--step-1); max-inline-size: var(--measure); }
.body { color: var(--muted); max-inline-size: var(--measure); }
.rule { border: 0; border-block-start: 1px solid var(--rule-color); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 44px;
  padding-block: var(--btn-pad-block);
  padding-inline: var(--btn-pad-inline);
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  line-height: 1;
  text-decoration: none;
  border: var(--btn-border-width) solid transparent;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn--primary {
  background: var(--btn-primary-bg, var(--accent));
  color: var(--btn-primary-ink, var(--on-accent, var(--bg)));
  border-color: var(--btn-primary-border, transparent);
  box-shadow: var(--btn-shadow);
}
.btn--primary:hover { background: color-mix(in oklab, var(--btn-primary-bg, var(--accent)) 86%, var(--ink)); }
.btn--ink { background: var(--ink); color: var(--bg); box-shadow: var(--btn-shadow); }
.btn--ink:hover { background: color-mix(in oklab, var(--ink) 88%, var(--accent)); }
.btn--ghost {
  border-color: var(--btn-ghost-border, color-mix(in oklab, var(--ink) 28%, transparent));
  background: var(--btn-ghost-bg, transparent);
  color: var(--btn-ghost-ink, var(--ink));
  box-shadow: var(--btn-shadow);
}
.btn--ghost:hover { border-color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.btn--quiet { color: var(--ink); padding-inline: 0; min-block-size: 44px; }
.btn--quiet::after { content: "→"; transition: transform var(--dur-1) var(--ease); }
.btn--quiet:hover::after { transform: translateX(0.25em); }
[dir="rtl"] .btn--quiet::after { content: "←"; }
.btn:active { transform: translateY(1px); }

/* ---------- cards ---------- */
.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--card-shadow);
}
.card--flat { background: transparent; border-color: transparent; box-shadow: none; padding-inline: 0; }
.card--tinted { background: color-mix(in oklab, var(--accent) 10%, var(--bg)); border-color: transparent; }
.card--ink { background: var(--ink); border-color: transparent; }
.card--ink .title, .card--ink .card__title { color: var(--bg); }
.card--ink .body, .card--ink .card__text { color: color-mix(in oklab, var(--bg) 72%, var(--ink)); }
.card__title { font-family: var(--font-display); font-weight: var(--heading-weight); font-size: var(--step-1); color: var(--ink); letter-spacing: var(--heading-tracking); line-height: 1.2; }
.card__text { color: var(--muted); margin-block-start: var(--space-2); font-size: var(--step-0); }
.card__meta { color: var(--muted); font-family: var(--font-utility, var(--font-body)); font-size: var(--step--1); letter-spacing: 0.04em; }

/* ---------- media placeholder (imagery paints into this) ---------- */
.ph {
  /* reset.css gives the bare .ph an accent edge so an unstyled page still
     reads as designed; inside the block library the primitive owns it. */
  border: 0;
  position: relative;
  border-radius: var(--ph-radius);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent) 0%,
                            color-mix(in oklab, var(--accent) 6%, transparent) 55%,
                            color-mix(in oklab, var(--accent) 16%, transparent) 100%),
    repeating-linear-gradient(45deg,
      color-mix(in oklab, var(--ink) 7%, transparent) 0 14px, transparent 14px 30px),
    var(--surface);
  background-size: cover;
  background-position: center;
  min-block-size: var(--ph-min, 120px);
  overflow: hidden;
}
.ph--frame {
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  padding: var(--space-2);
  background-clip: content-box;
}
/* browser-chrome frame for product shots: pure CSS, no assets */
.ph--browser::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 26px;
  background: color-mix(in oklab, var(--ink) 88%, var(--bg));
}
.ph--browser::after {
  content: "";
  position: absolute; inset-block-start: 9px; inset-inline-start: 12px;
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  box-shadow: 14px 0 0 color-mix(in oklab, var(--bg) 40%, transparent),
              28px 0 0 color-mix(in oklab, var(--bg) 28%, transparent);
}
[dir="rtl"] .ph--browser::after { box-shadow: -14px 0 0 color-mix(in oklab, var(--bg) 40%, transparent), -28px 0 0 color-mix(in oklab, var(--bg) 28%, transparent); }

/* a scrim for the rare case text must sit over media */
.scrim { position: relative; }
.scrim > * { position: relative; z-index: 1; }
.scrim::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: color-mix(in oklab, var(--bg) var(--scrim-veil, 86%), transparent);
  border-radius: inherit;
}

/* ---------- icons: drawn, never empty ---------- */
.icon {
  inline-size: var(--icon-size, 40px); block-size: var(--icon-size, 40px);
  border-radius: var(--icon-radius, calc(var(--radius) / 1.6));
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent-ink, var(--accent));
  position: relative;
  flex: none;
}
.icon::before {
  content: ""; inline-size: 42%; block-size: 42%;
  border: 2px solid currentColor; border-radius: 2px;
}
.icon--dot::before { border-radius: 50%; background: currentColor; border: 0; }
.icon--bar::before { block-size: 2px; inline-size: 55%; background: currentColor; border: 0; border-radius: 2px; }
.icon--corner::before { border-inline-end: 0; border-block-end: 0; border-radius: 3px 0 0 0; }
.icon--plus::before { border: 0; background:
  linear-gradient(currentColor, currentColor) center/2px 100% no-repeat,
  linear-gradient(currentColor, currentColor) center/100% 2px no-repeat; }
.icon--glyph::before { content: none; }
.icon--glyph { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); }

/* numerals for process/step blocks */
.numeral {
  font-family: var(--font-display);
  font-size: var(--numeral-size, var(--step-5));
  font-weight: var(--heading-weight);
  line-height: 0.9;
  color: var(--numeral-color, color-mix(in oklab, var(--accent-ink, var(--accent)) 55%, transparent));
  letter-spacing: -0.04em;
}
/* Outlined numerals are drawn ONLY by their stroke — the fill is transparent.
   A skin that takes the stroke to 0 must also give the glyph a fill, or the
   numeral silently disappears. --numeral-fill is how a system says "solid". */
.numeral--outline {
  color: var(--numeral-fill, transparent);
  -webkit-text-stroke: var(--numeral-stroke, 1.5px) var(--numeral-stroke-color, var(--accent-ink, var(--accent)));
}

/* ---------- tags / badges ---------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding-block: var(--space-1); padding-inline: var(--space-3);
  border-radius: var(--tag-radius);
  font-size: var(--step--1);
  font-family: var(--font-utility, var(--font-body));
  background: var(--tag-bg, color-mix(in oklab, var(--ink) 7%, transparent));
  color: var(--tag-ink, var(--ink));
  border: 1px solid transparent;
}
.tag--accent { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent-ink, var(--accent)); }
.tag--ghost { background: transparent; border-color: color-mix(in oklab, var(--ink) 20%, transparent); color: var(--muted); }

/* ---------- form fields ---------- */
.field { display: block; }
.field__label { display: block; font-size: var(--step--1); color: var(--field-label-color, var(--muted)); margin-block-end: var(--space-1); }
.field__input,
.field__area,
.field__select {
  inline-size: 100%;
  min-block-size: 46px;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-radius: var(--field-radius);
  border: var(--field-border);
  /* a kit may set --field-border: 0 and only an inline-end rule, which is
     how couture and editorial systems draw an input */
  border-block-end: var(--field-border-block-end, var(--field-border));
  background: var(--field-bg);
  color: var(--ink);
  font-size: var(--step-0);
}
.field__area { min-block-size: 120px; resize: vertical; }
.field__input::placeholder, .field__area::placeholder { color: color-mix(in oklab, var(--muted) 75%, transparent); }
.field__input:focus-visible, .field__area:focus-visible, .field__select:focus-visible { border-color: var(--accent); }

/* the lead form's success line — the runtime unhides it */
.lead-done { color: var(--lead-done-color, var(--accent-ink, var(--accent))); font-weight: 600; }


/* ---------- light / dark switcher ---------- */
/* One button, one drawn glyph: a filled disc in light, a crescent in dark
   (carved by an offset box-shadow rather than a second element). It inherits
   the page's own tokens, so every design system gets its own switcher. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--theme-toggle-radius, 999px);
  border: var(--btn-border-width) solid var(--theme-toggle-border, color-mix(in oklab, var(--ink) 18%, transparent));
  background: var(--theme-toggle-bg, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.theme-toggle:hover { border-color: color-mix(in oklab, var(--ink) 42%, transparent); }
.theme-toggle__disc {
  inline-size: 15px; block-size: 15px; border-radius: 50%;
  background: currentColor;
  transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
/* in the dark theme the disc is carved into a crescent */
:root[data-theme="dark"] .theme-toggle__disc {
  background: transparent;
  box-shadow: inset -4px -1px 0 0 currentColor;
  transform: rotate(-24deg);
}
@media (prefers-reduced-motion: reduce) { .theme-toggle__disc { transition: none; } }


:root{--radius:24px;--btn-radius:9999px;--btn-pad-block:var(--space-3);--btn-pad-inline:var(--space-6);--btn-weight:700;--btn-size:var(--step-0);--btn-shadow:none;--card-radius:24px;--card-pad:var(--space-7);--card-bg:color-mix(in oklab, var(--ink) 5%, var(--bg));--card-border:1px solid transparent;--card-shadow:none;--ph-radius:24px;--field-radius:24px;--field-border:1px solid color-mix(in oklab, var(--ink) 22%, transparent);--tag-radius:999px;--heading-weight:900;--heading-tracking:-0.032em;--eyebrow-transform:uppercase;--eyebrow-tracking:0.12em;--eyebrow-size:var(--step--1);--rule-color:color-mix(in oklab, var(--ink) 18%, transparent);--section-pad:clamp(64px, 5.8vw, 104px);--measure:52ch;}

/* nav-floating-pill */
/* nav-floating-pill — a capsule of chrome floating clear of the page edge.
   Airbnb's rule: elevation belongs to floating chrome only, and it is a
   three-layer stack (hairline ring, close contact shadow, wide ambient one),
   never a single blurry drop. On a phone the capsule swells into a cushion
   sheet rather than snapping to a full-bleed bar — the float is the block. */

.blk-nav-floating-pill {
  --blk-nav-inset: var(--space-4);
  --blk-nav-pill-radius: 999px;
  --blk-nav-pill-radius-open: var(--space-6);
  --blk-nav-pill-bg: color-mix(in oklab, var(--bg) 92%, transparent);
  --blk-nav-pill-ring: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
  --blk-nav-pill-shadow:
    0 1px 2px color-mix(in oklab, var(--ink) 7%, transparent),
    0 10px 28px color-mix(in oklab, var(--ink) 11%, transparent);
  --blk-nav-gap: var(--space-5);
  --blk-nav-mark-size: var(--step-1);
  --blk-nav-link-size: var(--step-0);
  --blk-nav-link-color: var(--muted);
  --btn-radius: 999px;
  --btn-pad-block: var(--space-2);
  --btn-pad-inline: var(--space-5);

  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  padding-block: var(--blk-nav-inset);
}

.blk-nav-floating-pill__pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  padding-inline: var(--space-3) var(--space-2);
  border: var(--blk-nav-pill-ring);
  border-radius: var(--blk-nav-pill-radius);
  background: var(--blk-nav-pill-bg);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: var(--blk-nav-pill-shadow);
  transition: border-radius var(--dur-1) var(--ease);
}

.blk-nav-floating-pill__mark {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  margin-inline-end: auto;
  padding-inline: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--blk-nav-mark-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.blk-nav-floating-pill__nav { display: flex; align-items: center; min-inline-size: 0; }

.blk-nav-floating-pill__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding-inline: 0;
}

/* each link is its own small capsule — the hover target is the shape */
.blk-nav-floating-pill__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: var(--blk-nav-gap);
  border-radius: 999px;
  font-size: var(--blk-nav-link-size);
  color: var(--blk-nav-link-color);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.blk-nav-floating-pill__link:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 6%, transparent);
}

.blk-nav-floating-pill__actions { display: flex; align-items: center; gap: var(--space-2); }

.blk-nav-floating-pill__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999px;
  color: var(--ink);
}
.blk-nav-floating-pill__burger,
.blk-nav-floating-pill__burger::before,
.blk-nav-floating-pill__burger::after {
  display: block;
  inline-size: calc(var(--space-5) - var(--space-1));
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.blk-nav-floating-pill__burger { position: relative; }
.blk-nav-floating-pill__burger::before,
.blk-nav-floating-pill__burger::after { content: ""; position: absolute; inset-inline-start: 0; }
.blk-nav-floating-pill__burger::before { inset-block-start: calc(var(--space-2) * -1); }
.blk-nav-floating-pill__burger::after { inset-block-start: var(--space-2); }

.blk-nav-floating-pill.nav-open .blk-nav-floating-pill__burger { background: transparent; }
.blk-nav-floating-pill.nav-open .blk-nav-floating-pill__burger::before { transform: translateY(var(--space-2)) rotate(45deg); }
.blk-nav-floating-pill.nav-open .blk-nav-floating-pill__burger::after { transform: translateY(calc(var(--space-2) * -1)) rotate(-45deg); }

@media (max-width: 768px) {
  .blk-nav-floating-pill { --blk-nav-inset: var(--space-3); }
  .blk-nav-floating-pill__toggle { display: inline-flex; }
  .blk-nav-floating-pill__pill { padding-inline: var(--space-3) var(--space-2); }

  .blk-nav-floating-pill.nav-open .blk-nav-floating-pill__pill {
    border-radius: var(--blk-nav-pill-radius-open);
    background: var(--bg);
    padding-block: var(--space-2) var(--space-4);
    padding-inline: var(--space-4);
  }

  .blk-nav-floating-pill__nav,
  .blk-nav-floating-pill__actions {
    display: none;
    flex-basis: 100%;
  }
  .blk-nav-floating-pill.nav-open .blk-nav-floating-pill__nav { display: block; animation: blk-nav-floating-pill-sheet var(--dur-1) var(--ease) both; }
  .blk-nav-floating-pill.nav-open .blk-nav-floating-pill__actions { display: flex; animation: blk-nav-floating-pill-sheet var(--dur-1) var(--ease) both; }

  .blk-nav-floating-pill__links { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .blk-nav-floating-pill__link {
    display: flex;
    min-block-size: 52px;
    padding-inline: var(--space-4);
    border-radius: calc(var(--blk-nav-pill-radius-open) / 1.6);
    background: color-mix(in oklab, var(--ink) 4%, transparent);
    color: var(--ink);
    font-size: var(--step-1);
  }
  .blk-nav-floating-pill__actions { padding-block-start: var(--space-3); }
  .blk-nav-floating-pill__actions .btn { flex: 1 1 auto; }
}

@keyframes blk-nav-floating-pill-sheet {
  from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); }
  to { opacity: 1; transform: none; }
}


/* hero-fullbleed-photo */
/* hero-fullbleed-photo — cinematic. The photograph owns the whole viewport
   band; the statement rides in the middle on a scrimmed panel so the words
   never depend on what the picture happens to contain. Tracking is pulled
   tight at display sizes: this is signage, not paragraph type. */

.blk-hero-fullbleed-photo {
  --blk-hero-min: clamp(calc(var(--space-9) * 5), 84svh, calc(var(--space-9) * 9));
  --blk-hero-title-size: clamp(2.2rem, 6.4vw, var(--step-6));
  --blk-hero-tracking: -0.03em;
  --blk-hero-panel-radius: min(var(--radius), var(--space-6));
  --blk-hero-panel-pad: clamp(var(--space-5), 4vw, var(--space-8));
  --blk-hero-measure: 46ch;
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: var(--blk-hero-min);
  padding-block: var(--section-pad);
  background: var(--blk-hero-bg, var(--bg));
  overflow: clip;
}

.blk-hero-fullbleed-photo__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.blk-hero-fullbleed-photo__bg .ph {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  border-radius: 0;
}

.blk-hero-fullbleed-photo__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.blk-hero-fullbleed-photo__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  padding: var(--blk-hero-panel-pad);
  border-radius: var(--blk-hero-panel-radius);
  inline-size: min(100%, calc(var(--space-9) * 7));
}

.blk-hero-fullbleed-photo__eyebrow { margin-block-end: calc(var(--space-3) * -1); }

.blk-hero-fullbleed-photo__title {
  font-size: var(--blk-hero-title-size);
  letter-spacing: var(--blk-hero-tracking);
  line-height: 1;
  max-inline-size: 16ch;
}

.blk-hero-fullbleed-photo__sub {
  font-size: var(--step-1);
  line-height: 1.5;
  max-inline-size: var(--blk-hero-measure);
}

.blk-hero-fullbleed-photo__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-1);
}

.blk-hero-fullbleed-photo__note {
  color: var(--muted);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .blk-hero-fullbleed-photo {
    --blk-hero-title-size: clamp(2rem, 8.6vw, 3.2rem);
    --blk-hero-min: clamp(calc(var(--space-9) * 4.5), 78svh, calc(var(--space-9) * 7));
  }
  .blk-hero-fullbleed-photo__title { max-inline-size: 100%; }
}

@media (max-width: 480px) {
  .blk-hero-fullbleed-photo__actions { inline-size: 100%; }
  .blk-hero-fullbleed-photo__actions > .btn { flex: 1 1 12rem; }
}


/* soc-stats-row */
/* soc-stats-row — numbers at display scale over a small utility label, ruled
   top and bottom so the band holds together however many columns wrap. The
   figures count up once, when the band is first seen. */

.blk-soc-stats-row {
  --blk-soc-stats-row-min: 170px;
  --blk-soc-stats-row-gap: var(--space-6);
  --blk-soc-stats-row-value-size: clamp(2.2rem, 6vw, var(--step-6));
  --blk-soc-stats-row-title-size: clamp(1.6rem, 3.2vw, var(--step-3));
  background: var(--blk-soc-stats-row-bg, var(--bg));
  padding-block: var(--blk-soc-stats-row-pad-block, var(--section-pad));
  overflow: clip;
}

.blk-soc-stats-row__head:not(:has(*)) { display: none; }
.blk-soc-stats-row__head { display: grid; gap: var(--space-3); max-inline-size: 56ch; margin-block-end: var(--space-6); }
.blk-soc-stats-row__title { font-size: var(--blk-soc-stats-row-title-size); margin: 0; }
.blk-soc-stats-row__lede { font-size: var(--step-0); margin: 0; }

.blk-soc-stats-row__row {
  list-style: none;
  margin: 0;
  padding-block: var(--space-6);
  padding-inline: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--blk-soc-stats-row-min)), 1fr));
  gap: var(--blk-soc-stats-row-gap);
  border-block-start: 1px solid var(--rule-color);
  border-block-end: 1px solid var(--rule-color);
}

.blk-soc-stats-row__stat { display: grid; gap: var(--space-2); align-content: start; min-inline-size: 0; }
.blk-soc-stats-row__value {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: var(--blk-soc-stats-row-value-size);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--blk-soc-stats-row-value-color, var(--ink));
}
.blk-soc-stats-row__label {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: var(--blk-soc-stats-row-label-transform, uppercase);
  color: var(--ink);
}
.blk-soc-stats-row__note { color: var(--muted); font-size: var(--step--1); line-height: 1.45; max-inline-size: 32ch; }

.blk-soc-stats-row__footnote {
  margin-block-start: var(--space-4);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  color: var(--muted);
}

@media (max-width: 768px) {
  .blk-soc-stats-row { --blk-soc-stats-row-min: 140px; --blk-soc-stats-row-gap: var(--space-5); }
}
@media (max-width: 480px) {
  .blk-soc-stats-row { --blk-soc-stats-row-min: 100%; }
  .blk-soc-stats-row__stat { grid-template-columns: minmax(0, 1fr); }
}


/* feat-statement-grid */
/* feat-statement-grid — statements, not cards. Type does all the work:
   a display-size line per idea, a hairline above it, a whisper of body copy
   underneath. The agency/editorial answer to a feature grid. */

.blk-feat-statement-grid {
  --blk-feat-statement-grid-min: 320px;
  --blk-feat-statement-grid-gap: var(--space-7) var(--space-8);
  --blk-feat-statement-grid-head-gap: var(--space-8);
  --blk-feat-statement-grid-title-size: clamp(1.5rem, 3vw, var(--step-3));
  --blk-feat-statement-grid-statement-size: clamp(1.6rem, 3.4vw, var(--step-4));
  background: var(--blk-feat-statement-grid-bg, var(--bg));
  padding-block: var(--section-pad);
}

.blk-feat-statement-grid__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: var(--measure);
  margin-block-end: var(--blk-feat-statement-grid-head-gap);
}

.blk-feat-statement-grid__title { font-size: var(--blk-feat-statement-grid-title-size); margin: 0; }

.blk-feat-statement-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--blk-feat-statement-grid-min), 1fr));
  gap: var(--blk-feat-statement-grid-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.blk-feat-statement-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
  padding-block-start: var(--space-5);
  border-block-start: 2px solid var(--blk-feat-statement-grid-rule, color-mix(in oklab, var(--ink) 85%, transparent));
}

.blk-feat-statement-grid__meta {
  margin: 0;
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: var(--eyebrow-transform);
  color: var(--accent-ink, var(--accent));
}

.blk-feat-statement-grid__statement {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  font-size: var(--blk-feat-statement-grid-statement-size);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  max-inline-size: 18ch;
  text-wrap: balance;
}

.blk-feat-statement-grid__text {
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.6;
  margin: 0;
  max-inline-size: 42ch;
}

@media (max-width: 768px) {
  .blk-feat-statement-grid {
    --blk-feat-statement-grid-min: 260px;
    --blk-feat-statement-grid-gap: var(--space-6);
    --blk-feat-statement-grid-head-gap: var(--space-6);
  }
  .blk-feat-statement-grid__statement { max-inline-size: 24ch; }
}


/* proc-big-numerals */
/* proc-big-numerals — editorial process. Outlined numerals at display size
   sit in their own column beside the copy, with a hairline between steps.
   No cards, no badges: the number is the ornament. */

.blk-proc-big-numerals {
  --blk-proc-big-numerals-cols: auto minmax(0, 1fr) auto;
  --blk-proc-big-numerals-gap: var(--space-6);
  --blk-proc-big-numerals-row-pad: var(--space-6);
  --blk-proc-big-numerals-head-gap: var(--space-7);
  --blk-proc-big-numerals-title-size: clamp(1.7rem, 3.6vw, var(--step-4));
  --numeral-size: var(--blk-proc-big-numerals-numeral-size, clamp(3.4rem, 7vw, calc(var(--step-6) * 1.9)));
  background: var(--blk-proc-big-numerals-bg, var(--bg));
  padding-block: var(--section-pad);
}

.blk-proc-big-numerals__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: var(--measure);
  margin-block-end: var(--blk-proc-big-numerals-head-gap);
}

.blk-proc-big-numerals__title { font-size: var(--blk-proc-big-numerals-title-size); margin: 0; }
.blk-proc-big-numerals__sub { font-size: var(--step-0); line-height: 1.55; }

.blk-proc-big-numerals__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  border-block-end: 1px solid var(--rule-color);
}

.blk-proc-big-numerals__step {
  display: grid;
  grid-template-columns: var(--blk-proc-big-numerals-cols);
  gap: var(--space-3) var(--blk-proc-big-numerals-gap);
  align-items: center;
  padding-block: var(--blk-proc-big-numerals-row-pad);
  border-block-start: 1px solid var(--rule-color);
}

.blk-proc-big-numerals__numeral {
  line-height: 0.85;
  min-inline-size: 2.2ch;
  text-align: center;
  color: var(--blk-proc-big-numerals-fill, var(--numeral-fill, transparent));
  -webkit-text-stroke: var(--blk-proc-big-numerals-stroke, 1.5px) var(--accent-ink, var(--accent));
}

.blk-proc-big-numerals__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.blk-proc-big-numerals__stepTitle {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.blk-proc-big-numerals__stepText {
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.65;
  margin: 0;
  max-inline-size: 58ch;
}

.blk-proc-big-numerals__meta {
  margin: 0;
  text-align: end;
  text-transform: var(--eyebrow-transform);
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .blk-proc-big-numerals {
    --blk-proc-big-numerals-cols: auto minmax(0, 1fr);
    --blk-proc-big-numerals-gap: var(--space-5);
    --blk-proc-big-numerals-row-pad: var(--space-5);
    --blk-proc-big-numerals-head-gap: var(--space-6);
  }
  .blk-proc-big-numerals__step { align-items: start; }
  .blk-proc-big-numerals__meta { grid-column: 2; text-align: start; }
  .blk-proc-big-numerals__stepTitle { font-size: var(--step-1); }
}


/* feat-grid-3 */
/* feat-grid-3 — three bordered cards per row. The Stripe/Notion workhorse:
   a start-anchored headline block, then an even grid of quiet cards whose
   only ornament is a hairline keyline. Everything stylistic is a hook. */

.blk-feat-grid-3 {
  --blk-feat-grid-3-min: 260px;
  --blk-feat-grid-3-gap: var(--space-5);
  --blk-feat-grid-3-head-gap: var(--space-7);
  --blk-feat-grid-3-title-size: clamp(1.7rem, 3.6vw, var(--step-4));
  --blk-feat-grid-3-keyline-size: var(--space-6);
  --blk-feat-grid-3-keyline: var(--accent);
  --blk-feat-grid-3-lift: -2px;
  /* cards read on the page colour by default: --surface is an inverted panel
     in some kits, and a card must never guess its own text contrast */
  --card-bg: var(--blk-feat-grid-3-card-bg, var(--bg));
  --card-shadow: var(--blk-feat-grid-3-card-shadow, none);
  background: var(--blk-feat-grid-3-bg, var(--bg));
  padding-block: var(--section-pad);
}

.blk-feat-grid-3__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: var(--measure);
  margin-block-end: var(--blk-feat-grid-3-head-gap);
  text-align: var(--blk-feat-grid-3-head-align, start);
}

.blk-feat-grid-3__title {
  font-size: var(--blk-feat-grid-3-title-size);
  margin: 0;
}

.blk-feat-grid-3__sub { font-size: var(--step-0); line-height: 1.55; }

.blk-feat-grid-3__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--blk-feat-grid-3-min), 1fr));
  gap: var(--blk-feat-grid-3-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.blk-feat-grid-3__card {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-2);
  min-inline-size: 0;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

.blk-feat-grid-3__card:hover {
  transform: translateY(var(--blk-feat-grid-3-lift));
  box-shadow: var(--blk-feat-grid-3-card-shadow-hover, var(--shadow-1));
}

.blk-feat-grid-3__keyline {
  display: block;
  inline-size: var(--blk-feat-grid-3-keyline-size);
  block-size: 3px;
  border-radius: 3px;
  background: var(--blk-feat-grid-3-keyline);
  margin-block-end: var(--space-3);
}

.blk-feat-grid-3__meta { margin: 0; }

.blk-feat-grid-3__card .card__title { font-size: var(--step-1); }
.blk-feat-grid-3__card .card__text { margin-block-start: 0; line-height: 1.55; }

@media (max-width: 768px) {
  .blk-feat-grid-3 {
    --blk-feat-grid-3-min: 240px;
    --blk-feat-grid-3-head-gap: var(--space-6);
  }
}

@media (max-width: 480px) {
  .blk-feat-grid-3 { --blk-feat-grid-3-gap: var(--space-4); }
}


/* show-tile-captions */
/* show-tile-captions — the caption lives INSIDE the tile, on a scrim panel
   pinned to the bottom edge. The scrim is not decoration: it is the only
   reason the label survives a photograph we have not seen yet. */

.blk-show-tile-captions {
  --blk-show-tile-captions-min: 260px;
  --blk-show-tile-captions-ar: 4/5;
  --blk-show-tile-captions-gap: var(--space-5);
  --blk-show-tile-captions-radius: min(var(--ph-radius), var(--space-5));
  --blk-show-tile-captions-title-size: clamp(1.8rem, 3.8vw, var(--step-4));
  --blk-show-tile-captions-inset: var(--space-3);
  background: var(--blk-show-tile-captions-bg, var(--bg));
  padding-block: var(--blk-show-tile-captions-pad-block, var(--section-pad));
  overflow: clip;
}

.blk-show-tile-captions__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-6);
  align-items: end;
  margin-block-end: var(--space-7);
}
.blk-show-tile-captions__headline { display: grid; gap: var(--space-3); min-inline-size: 0; }
.blk-show-tile-captions__title { font-size: var(--blk-show-tile-captions-title-size); margin: 0; }
.blk-show-tile-captions__lede { font-size: var(--step-0); margin: 0; max-inline-size: 44ch; }

.blk-show-tile-captions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--blk-show-tile-captions-min)), 1fr));
  gap: var(--blk-show-tile-captions-gap);
}

.blk-show-tile-captions__tile {
  position: relative;
  margin: 0;
  min-inline-size: 0;
  overflow: clip;
  border-radius: var(--blk-show-tile-captions-radius);
  background: color-mix(in oklab, var(--ink) 6%, var(--bg));
  display: grid;
}
.blk-show-tile-captions__media {
  grid-area: 1 / 1;
  inline-size: 100%;
  border-radius: 0;
  transition: transform var(--dur-2) var(--ease);
}
.blk-show-tile-captions__tile:hover .blk-show-tile-captions__media { transform: scale(1.05); }

.blk-show-tile-captions__caption {
  grid-area: 1 / 1;
  align-self: end;
  margin: var(--blk-show-tile-captions-inset);
  padding: var(--space-4);
  border-radius: calc(var(--blk-show-tile-captions-radius) / 1.5);
  display: grid;
  gap: var(--space-1);
}
.blk-show-tile-captions__caption::before {
  backdrop-filter: blur(8px);
}
.blk-show-tile-captions__name {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  font-size: var(--step-0);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.blk-show-tile-captions__meta {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}

.blk-show-tile-captions__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-7); }

@media (max-width: 768px) {
  .blk-show-tile-captions__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .blk-show-tile-captions { --blk-show-tile-captions-min: 220px; }
}
@media (max-width: 480px) {
  .blk-show-tile-captions { --blk-show-tile-captions-min: 100%; }
  .blk-show-tile-captions__actions > .btn { flex: 1 1 auto; }
}


/* soc-quote-large */
/* soc-quote-large — one sentence at display scale. Impact Field logic: the
   statement IS the section, so nothing shares the stage with it except a
   small portrait and two lines of attribution. */

.blk-soc-quote-large {
  --blk-soc-quote-large-size: clamp(1.6rem, 4.4vw, var(--step-4));
  --blk-soc-quote-large-leading: 1.25;
  --blk-soc-quote-large-portrait: clamp(76px, 9vw, 104px);
  --blk-soc-quote-large-align: center;
  background: var(--blk-soc-quote-large-bg, var(--bg));
  padding-block: var(--blk-soc-quote-large-pad-block, var(--section-pad));
  overflow: clip;
}

.blk-soc-quote-large__inner {
  display: grid;
  justify-items: var(--blk-soc-quote-large-align);
  text-align: var(--blk-soc-quote-large-align);
  gap: var(--space-5);
}

.blk-soc-quote-large__portrait { inline-size: var(--blk-soc-quote-large-portrait); }
.blk-soc-quote-large__portrait .ph {
  inline-size: 100%;
  min-block-size: 0;
  border-radius: var(--blk-soc-quote-large-portrait-radius, 50%);
}

.blk-soc-quote-large__block { margin: 0; display: grid; gap: var(--space-5); justify-items: var(--blk-soc-quote-large-align); }
.blk-soc-quote-large__quote {
  font-size: var(--blk-soc-quote-large-size);
  line-height: var(--blk-soc-quote-large-leading);
  margin: 0;
  text-wrap: balance;
}
.blk-soc-quote-large__quote::before { content: "\201C"; }
.blk-soc-quote-large__quote::after { content: "\201D"; }

.blk-soc-quote-large__by {
  display: grid;
  gap: var(--space-1);
  justify-items: var(--blk-soc-quote-large-align);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule-color);
  min-inline-size: min(100%, 28ch);
}
.blk-soc-quote-large__name {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: var(--step-0);
  letter-spacing: var(--heading-tracking);
  color: var(--ink);
}
.blk-soc-quote-large__role {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.blk-soc-quote-large__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 480px) {
  .blk-soc-quote-large { --blk-soc-quote-large-size: clamp(1.4rem, 7vw, 2rem); }
  .blk-soc-quote-large__actions > .btn { flex: 1 1 auto; }
}


/* faq-two-col */
/* faq-two-col — every answer visible at once. No interaction, no chevrons:
   a printed page of questions. Best when the answers are short and the visitor
   is scanning for one specific fact. */

.blk-faq-two-col {
  --blk-faq2-pad-block: var(--section-pad);
  --blk-faq2-min: 320px;
  --blk-faq2-gap: var(--space-7);
  --blk-faq2-title-size: clamp(var(--step-3), 4.4vw, var(--step-5));
  --blk-faq2-q-size: var(--step-1);
  background: var(--blk-faq2-bg, var(--bg));
  padding-block: var(--blk-faq2-pad-block);
  overflow: clip;
}

.blk-faq-two-col__inner {
  display: grid;
  gap: var(--space-7);
}

.blk-faq-two-col__intro {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  max-inline-size: var(--measure);
}

.blk-faq-two-col__title {
  font-size: var(--blk-faq2-title-size);
  margin: 0;
}

.blk-faq-two-col__lede { font-size: var(--step-1); line-height: 1.5; }

.blk-faq-two-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--blk-faq2-min), 1fr));
  gap: var(--blk-faq2-gap);
}

.blk-faq-two-col__item {
  min-inline-size: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--blk-faq2-rule, var(--rule-color));
}

.blk-faq-two-col__q {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  font-size: var(--blk-faq2-q-size);
  line-height: 1.25;
  color: var(--ink);
}

.blk-faq-two-col__a {
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.6;
  margin-block-start: var(--space-2);
  max-inline-size: 48ch;
}

@media (max-width: 480px) {
  .blk-faq-two-col { --blk-faq2-gap: var(--space-6); --blk-faq2-q-size: var(--step-0); }
}


/* cta-band */
/* cta-band — the page raises its voice exactly once.
   A full-bleed inverted field, one statement, one button. Everything is lit
   from --bg over the band so the block flips correctly in dark themes, and
   the button inverts with it: on an ink field the loud object is the light
   one, never a second accent competing with the field itself. */

.blk-cta-band {
  --blk-cta-band-bg: var(--ink);
  --blk-cta-ink: var(--bg);
  --blk-cta-quiet: color-mix(in oklab, var(--bg) 74%, var(--ink));
  --blk-cta-pad-block: calc(var(--section-pad) * 1.1);
  --blk-cta-title-size: clamp(1.9rem, 5vw, var(--step-5));
  --blk-cta-align: center;
  --blk-cta-measure: 20ch;
  --blk-cta-btn-bg: var(--bg);
  --blk-cta-btn-ink: var(--ink);

  background: var(--blk-cta-band-bg);
  color: var(--blk-cta-ink);
  padding-block: var(--blk-cta-pad-block);
}

.blk-cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: var(--blk-cta-items, center);
  text-align: var(--blk-cta-align);
  gap: var(--space-5);
}

.blk-cta-band__eyebrow {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-transform);
  font-weight: 500;
  color: var(--blk-cta-quiet);
  margin-block-end: calc(var(--space-2) * -1);
}

.blk-cta-band__title {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  font-size: var(--blk-cta-title-size);
  line-height: 1.05;
  color: var(--blk-cta-ink);
  max-inline-size: var(--blk-cta-measure);
}

.blk-cta-band__sub {
  color: var(--blk-cta-quiet);
  font-size: var(--step-1);
  line-height: 1.5;
  max-inline-size: 46ch;
}

.blk-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--blk-cta-items, center);
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

/* the band owns its button: light object on a dark field */
.blk-cta-band__actions .btn--primary {
  background: var(--blk-cta-btn-bg);
  color: var(--blk-cta-btn-ink);
}
.blk-cta-band__actions .btn--primary:hover {
  background: color-mix(in oklab, var(--blk-cta-btn-bg) 88%, var(--accent));
}

.blk-cta-band__note {
  color: var(--blk-cta-quiet);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
}

@media (max-width: 768px) {
  .blk-cta-band { --blk-cta-measure: 24ch; --blk-cta-pad-block: var(--section-pad); }
}

@media (max-width: 480px) {
  .blk-cta-band__actions { inline-size: 100%; }
  .blk-cta-band__actions .btn { flex: 1 1 auto; }
}


/* contact-split-form */
/* contact-split-form — the default contact block: the reasons to trust you
   (address, hours, phone) inline-start, the lead form on its own tinted plane
   inline-end. The plane is what makes the form read as a place to type: the
   fields keep the page background, the plane sits one step off it. */

.blk-contact-split-form {
  --blk-contact-split-cols: 0.9fr 1.1fr;
  --blk-contact-split-gap: var(--space-8);
  --blk-contact-split-pad-block: var(--section-pad);
  --blk-contact-split-plane: color-mix(in oklab, var(--ink) 4%, var(--bg));
  --blk-contact-split-plane-pad: clamp(var(--space-5), 3vw, var(--space-7));
  --blk-contact-split-plane-radius: var(--radius);
  --blk-contact-split-plane-border: 1px solid transparent;
  --blk-contact-split-title-size: clamp(var(--step-3), 4.2vw, var(--step-5));
  background: var(--blk-contact-split-bg, var(--bg));
  padding-block: var(--blk-contact-split-pad-block);
  overflow: clip;
}

.blk-contact-split-form__grid {
  display: grid;
  grid-template-columns: var(--blk-contact-split-cols);
  gap: var(--blk-contact-split-gap);
  align-items: start;
}

.blk-contact-split-form__intro {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-4);
  min-inline-size: 0;
}

.blk-contact-split-form__title {
  font-size: var(--blk-contact-split-title-size);
  margin: 0;
}

.blk-contact-split-form__lede { font-size: var(--step-1); line-height: 1.5; }

.blk-contact-split-form__details {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-block-start: var(--space-3);
  inline-size: 100%;
  display: grid;
  gap: var(--space-4);
}

.blk-contact-split-form__detail {
  display: grid;
  gap: var(--space-1);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule-color);
}

.blk-contact-split-form__label {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.blk-contact-split-form__value {
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.blk-contact-split-form__form {
  min-inline-size: 0;
  display: grid;
  gap: var(--space-4);
  background: var(--blk-contact-split-plane);
  border: var(--blk-contact-split-plane-border);
  border-radius: var(--blk-contact-split-plane-radius);
  padding: var(--blk-contact-split-plane-pad);
  box-shadow: var(--blk-contact-split-plane-shadow, none);
}

.blk-contact-split-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.blk-contact-split-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-block-start: var(--space-1);
}

.blk-contact-split-form__note {
  color: var(--muted);
  font-size: var(--step--1);
  max-inline-size: 30ch;
}

@media (max-width: 768px) {
  .blk-contact-split-form__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

@media (max-width: 480px) {
  .blk-contact-split-form__submit { inline-size: 100%; }
  .blk-contact-split-form__note { max-inline-size: none; }
}


/* footer-dark-band */
/* footer-dark-band — the page ends on an inverted field.
   Every colour in here is derived from --bg over the ink surface, never from
   --ink or --muted, so the block inverts correctly in dark themes too (where
   "ink" is the light tone and this band becomes the bright one). The tone
   ladder is three steps: the mark, the links, the fine print. */

.blk-footer-dark-band {
  --blk-footer-band: var(--ink);
  --blk-footer-pad-block: var(--section-pad);
  --blk-footer-rule: 1px solid color-mix(in oklab, var(--bg) 22%, transparent);
  --blk-footer-cols: minmax(0, 1fr) minmax(0, 1.4fr);
  --blk-footer-gap: var(--space-8);
  --blk-footer-mark-size: var(--step-2);
  --blk-footer-col-min: 150px;
  --blk-footer-strong: var(--bg);
  --blk-footer-quiet: color-mix(in oklab, var(--bg) 74%, var(--ink));
  --blk-footer-faint: color-mix(in oklab, var(--bg) 66%, var(--ink));

  background: var(--blk-footer-band);
  color: var(--blk-footer-strong);
  padding-block: var(--blk-footer-pad-block) var(--space-6);
}

.blk-footer-dark-band__grid {
  display: grid;
  grid-template-columns: var(--blk-footer-cols);
  gap: var(--blk-footer-gap);
}

.blk-footer-dark-band__brand { min-inline-size: 0; }

.blk-footer-dark-band__mark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--blk-footer-mark-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1.1;
  color: var(--blk-footer-strong);
  text-decoration: none;
}

.blk-footer-dark-band__blurb {
  margin-block-start: var(--space-4);
  color: var(--blk-footer-quiet);
  font-size: var(--step-0);
  max-inline-size: 36ch;
}

.blk-footer-dark-band__act { margin-block-start: var(--space-5); }

/* the ghost button has to be re-lit for the inverted field */
.blk-footer-dark-band__act .btn--ghost {
  color: var(--blk-footer-strong);
  border-color: color-mix(in oklab, var(--bg) 40%, transparent);
}
.blk-footer-dark-band__act .btn--ghost:hover {
  border-color: var(--blk-footer-strong);
  background: color-mix(in oklab, var(--bg) 12%, transparent);
}

.blk-footer-dark-band__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--blk-footer-col-min), 1fr));
  gap: var(--space-6) var(--space-5);
  min-inline-size: 0;
}

.blk-footer-dark-band__colTitle {
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: var(--blk-footer-head-transform, uppercase);
  color: var(--blk-footer-strong);
  margin-block-end: var(--space-3);
}

.blk-footer-dark-band__list { list-style: none; padding-inline: 0; }

.blk-footer-dark-band__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  color: var(--blk-footer-quiet);
  font-size: var(--step-0);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.blk-footer-dark-band__link:hover { color: var(--blk-footer-strong); text-decoration: underline; text-underline-offset: 0.25em; }

.blk-footer-dark-band__fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: var(--blk-footer-rule);
}

.blk-footer-dark-band__copy {
  color: var(--blk-footer-faint);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
}

.blk-footer-dark-band__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding-inline: 0;
}

.blk-footer-dark-band__legalLink {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  color: var(--blk-footer-faint);
  font-family: var(--font-utility, var(--font-body));
  font-size: var(--step--1);
  text-decoration: none;
}
.blk-footer-dark-band__legalLink:hover { color: var(--blk-footer-strong); }

@media (max-width: 768px) {
  .blk-footer-dark-band { --blk-footer-gap: var(--space-7); }
  .blk-footer-dark-band__grid { grid-template-columns: 1fr; }
  .blk-footer-dark-band__link { min-block-size: 44px; }
}

@media (max-width: 480px) {
  .blk-footer-dark-band { --blk-footer-col-min: 130px; }
  .blk-footer-dark-band__fine { justify-content: flex-start; }
}


.blk-nav-floating-pill, .blk-nav-bordered-bar, .blk-hero-fullbleed-photo, .blk-hero-poster-type, .blk-hero-cutout-overlap, .blk-feat-statement-grid, .blk-feat-grid-3, .blk-feat-alternating-media, .blk-proc-big-numerals, .blk-proc-zigzag, .blk-show-fullbleed-band, .blk-show-tile-captions, .blk-soc-quote-large, .blk-soc-stats-row, .blk-price-tiers-flat, .blk-price-tiers-3, .blk-faq-two-col, .blk-faq-accordion, .blk-content-pull-quote, .blk-content-prose, .blk-cta-statement-big, .blk-cta-band, .blk-contact-panel-dark, .blk-contact-centered-form, .blk-footer-dark-band, .blk-footer-big-wordmark, .blk-util-divider-statement, .blk-util-section-header, .blk-util-badge-row { --btn-radius: 9999px; --btn-pad-block: var(--space-3); --btn-pad-inline: var(--space-6); --btn-weight: 700; --btn-size: var(--step-0); --btn-shadow: none; --card-radius: 24px; --ph-radius: 24px; --field-radius: 24px; --eyebrow-transform: uppercase; --eyebrow-tracking: 0.12em; --eyebrow-size: var(--step--1); --heading-tracking: -0.032em; --heading-weight: 900; --rule-color: color-mix(in oklab, var(--ink) 18%, transparent); }
.blk-nav-floating-pill { --blk-nav-pill-bg: var(--bg); --blk-nav-pill-shadow: none; --blk-nav-pill-ring: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); --blk-nav-pill-radius: 24px; --blk-nav-pill-radius-open: 24px; --blk-nav-link-size: var(--step-0); }
.blk-hero-fullbleed-photo { --blk-hero-title-size: clamp(2.8rem, 9vw, calc(var(--step-6) * 1.8)); --blk-hero-tracking: -0.038em; --blk-hero-panel-radius: 24px; --blk-hero-panel-pad: clamp(var(--space-6), 4vw, var(--space-9)); --blk-hero-measure: 40ch; }
.blk-feat-statement-grid { --blk-feat-statement-grid-bg: color-mix(in oklab, var(--ink) 5%, var(--bg)); --blk-feat-statement-grid-statement-size: clamp(1.8rem, 4vw, var(--step-4)); --blk-feat-statement-grid-rule: 1px solid var(--rule-color); }
.blk-proc-big-numerals { --blk-proc-big-numerals-stroke: 3px; --blk-proc-big-numerals-numeral-size: clamp(3.6rem, 8vw, calc(var(--step-6) * 2.1)); --blk-proc-big-numerals-row-pad: var(--space-6); }
.blk-show-fullbleed-band { --blk-show-fullbleed-band-bg: color-mix(in oklab, var(--ink) 5%, var(--bg)); --blk-show-fullbleed-band-radius: 24px; --blk-show-fullbleed-band-chip-radius: 999px; --blk-show-fullbleed-band-ar: 21/9; }
.blk-soc-quote-large { --blk-soc-quote-large-align: center; --blk-soc-quote-large-size: clamp(1.9rem, 5vw, var(--step-5)); --blk-soc-quote-large-leading: 1.05; --blk-soc-quote-large-portrait-radius: 999px; }
.blk-price-tiers-flat { --blk-ptf-bg: color-mix(in oklab, var(--ink) 5%, var(--bg)); --blk-ptf-row-pad: var(--space-6); }
.blk-faq-two-col { --blk-faq2-rule: color-mix(in oklab, var(--ink) 20%, transparent); --blk-faq2-q-size: var(--step-2); }
.blk-content-pull-quote { --blk-quote-bg: color-mix(in oklab, var(--ink) 5%, var(--bg)); --blk-quote-frame: 1px solid transparent; --blk-quote-radius: 24px; --blk-quote-size: clamp(var(--step-2), 4vw, var(--step-4)); --blk-quote-weight: 900; --blk-quote-leading: 1.05; }
.blk-cta-statement-big { --blk-cta-align: center; --blk-cta-title-size: clamp(2.6rem, 8vw, calc(var(--step-6) * 1.7)); --blk-cta-title-leading: 0.94; --blk-cta-title-weight: 900; --blk-cta-measure: 15ch; }
.blk-contact-panel-dark { --blk-contact-panel-radius: 24px; --blk-contact-panel-title-size: clamp(var(--step-3), 4.4vw, var(--step-5)); }
.blk-footer-dark-band { --blk-footer-head-transform: uppercase; }

@media (prefers-reduced-motion: reduce){
  [data-motion]{opacity:1 !important;transform:none !important;clip-path:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}