/* ==========================================================================
   Anvay — shared styles
   1. Design tokens        6. Header & navigation    11. Forms
   2. Base                 7. Hero & hero visual     12. Legal / prose
   3. Layout               8. Cards & grids          13. Footer
   4. Typography           9. Sections & components  14. Motion & reveal
   5. Buttons & links     10. Insights               15. Utilities
   ========================================================================== */

/* 0. Self-hosted font (Plus Jakarta Sans, SIL Open Font License - see /assets/fonts/OFL.txt) */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Design tokens ------------------------------------------------------ */
:root {
  /* Brand colours */
  --c-white: #FFFFFF;
  --c-red: #B91C1C;
  --c-red-dark: #991B1B;
  --c-ink: #202124;
  --c-grey: #F5F5F5;
  --c-pale: #FFF1F2;
  --c-border: #E5E7EB;
  --c-muted: #4A4F57;          /* secondary text, 8.3:1 on white */
  --c-red-soft: #FBD5D8;       /* decorative lines */

  /* Typography */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem);
  --fs-h3: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;

  /* Spacing, shape, depth */
  --space-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --gutter: clamp(1rem, .5rem + 2.5vw, 2rem);
  --container: 75rem;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(32, 33, 36, .05);
  --shadow: 0 10px 30px -12px rgba(32, 33, 36, .14);
  --header-h: 76px;

  /* Motion (edit these to tune the feel of the site) */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --reveal-distance: 12px;
  --reveal-duration: 600ms;
  --card-lift: -4px;

  /* Hero visual timings */
  --hero-symbol-fade: 700ms;
  --hero-line-delay: 350ms;
  --hero-line-draw: 1000ms;
  --hero-node-delay: 1050ms;
  --hero-node-reveal: 500ms;
  --hero-node-stagger: 120ms;
  --hero-pulse: 7s;
}

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--c-red); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-red-dark); }
:focus-visible { outline: 3px solid var(--c-red); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
::selection { background: var(--c-pale); color: var(--c-ink); }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: 3rem 0; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--c-ink); color: #fff; padding: .75rem 1rem; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* 3. Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(48rem + 2 * var(--gutter)); }
.section { padding-block: var(--space-section); }
.section--tight { padding-block: calc(var(--space-section) * .65); }
.section--grey { background: var(--c-grey); }
.section--pale { background: var(--c-pale); }
.section--border { border-top: 1px solid var(--c-border); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split { max-width: none; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: end; justify-content: space-between; }
.section-head--split > div { max-width: 44rem; }

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .split--center { align-items: center; }
  .sticky-col { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* 4. Typography --------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; }
h1, .h1 { font-size: var(--fs-h1); letter-spacing: -.03em; }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-muted); }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-small); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem; color: var(--c-red);
  font-size: .9375rem; font-weight: 600; letter-spacing: 0;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--c-red); border-radius: 2px; flex: none; }
.text-red { color: var(--c-red); }

/* 5. Buttons & links ---------------------------------------------------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-border: var(--c-border);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.375rem;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
  color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-border); border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-fast) var(--ease); }
.btn--primary { --btn-bg: var(--c-red); --btn-fg: #fff; --btn-border: var(--c-red); }
.btn--primary:hover { --btn-bg: var(--c-red-dark); --btn-border: var(--c-red-dark); color: #fff; box-shadow: 0 8px 20px -10px rgba(153, 27, 27, .6); }
.btn--secondary { --btn-fg: var(--c-red); --btn-border: var(--c-red); background: #fff; }
.btn--secondary:hover { --btn-bg: var(--c-pale); --btn-fg: var(--c-red-dark); --btn-border: var(--c-red-dark); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--c-red); --btn-border: #fff; }
.btn--light:hover { --btn-bg: var(--c-pale); --btn-fg: var(--c-red-dark); --btn-border: var(--c-pale); }
.btn--outline-light { --btn-fg: #fff; --btn-border: rgba(255,255,255,.7); }
.btn--outline-light:hover { --btn-bg: rgba(255,255,255,.12); --btn-border: #fff; color: #fff; }
.btn:focus-visible { outline-offset: 3px; border-radius: 999px; }
.btn--light:focus-visible, .btn--outline-light:focus-visible { outline-color: #fff; }
.btn--sm { min-height: 42px; padding: .55rem 1.1rem; font-size: .9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; text-decoration: none; color: var(--c-red);
}
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover { text-decoration: underline; }

.icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* 6. Header & navigation ------------------------------------------------ */
.dev-banner {
  background: #FFFBEB; color: #713F12; border-bottom: 1px solid #FDE68A;
  font-size: .8125rem; text-align: center; padding: .4rem var(--gutter);
}
.tbc {
  background: #FEF3C7; color: #713F12; border: 1px dashed #D97706; border-radius: 4px;
  padding: 0 .3em; font-size: .92em; font-weight: 600; white-space: normal;
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; /* solid on purpose: a backdrop-filter here would trap the fixed mobile menu */
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--c-border); box-shadow: 0 6px 24px -18px rgba(32, 33, 36, .35); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--c-ink); flex: none; }
.brand:hover { color: var(--c-ink); }
.brand__mark { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.brand__swirl { grid-area: 1 / 1; width: 100%; height: 100%; }
.brand__a { grid-area: 1 / 1; width: 34%; height: auto; fill: var(--c-ink); translate: 0 4%; }
.brand__name { font-size: 1.375rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }

.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.nav-list { display: flex; align-items: center; gap: .25rem; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem .8rem; border-radius: 10px;
  color: var(--c-ink); font: inherit; font-size: .9875rem; font-weight: 600; text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav-link:hover { color: var(--c-red); background: var(--c-pale); }
.nav-link[aria-current="page"], .nav-link[data-current-section] { color: var(--c-red); }
.nav-link[aria-current="page"]::after, .nav-link[data-current-section]::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; background: var(--c-red); border-radius: 2px;
}
.nav-link .icon { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease); }
.nav-link[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* Split menu items: the label goes to the page, the arrow opens its sections */
.nav-split { display: flex; align-items: center; }
.nav-split .nav-link { padding-right: .25rem; }
.nav-caret {
  display: grid; place-items: center; width: 28px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--c-ink); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-caret:hover { background: var(--c-pale); color: var(--c-red); }
.nav-caret .icon { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease); }
.nav-caret[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-caret[aria-expanded="true"] { color: var(--c-red); }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + .5rem); left: 50%; translate: -50% 0; z-index: 60;
  width: 22.5rem; padding: .5rem;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow);
  display: none;
}
.has-dropdown.is-open .dropdown { display: block; }
html.no-js .has-dropdown:focus-within .dropdown, html.no-js .has-dropdown:hover .dropdown { display: block; }
.dropdown__link {
  display: flex; gap: .85rem; align-items: flex-start; padding: .7rem .75rem; border-radius: 10px;
  color: var(--c-ink); text-decoration: none; transition: background-color var(--dur-fast) var(--ease);
}
.dropdown__link:hover, .dropdown__link[aria-current="page"] { background: var(--c-pale); color: var(--c-ink); }
.dropdown__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--c-pale); color: var(--c-red); flex: none; }
.dropdown__link:hover .dropdown__icon, .dropdown__link[aria-current="page"] .dropdown__icon { background: #fff; }
.dropdown__icon .icon { width: 1.2rem; height: 1.2rem; }
.dropdown__title { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.35; }
.dropdown__desc { display: block; font-size: .8125rem; color: var(--c-muted); line-height: 1.4; }

.nav-toggle {
  display: none; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem .85rem;
  background: #fff; border: 1.5px solid var(--c-border); border-radius: 999px;
  color: var(--c-ink); font: inherit; font-weight: 700; font-size: .9375rem; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--c-red); }
.nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars span {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 5px; }
.nav-toggle__bars::after { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 5px; transform: rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }

@media (max-width: 1099px) {
  html.js .nav-toggle { display: inline-flex; }
  html.js .site-nav {
    position: fixed; inset: var(--nav-top, var(--header-h)) 0 0 0; z-index: 49;
    display: none; flex-direction: column; align-items: stretch; gap: 1.5rem;
    padding: 1rem var(--gutter) 2rem; overflow-y: auto; background: #fff; border-top: 1px solid var(--c-border);
  }
  html.js .site-nav.is-open { display: flex; }
  html.js .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  html.js .nav-list > li { border-bottom: 1px solid var(--c-border); }
  html.js .nav-link { width: 100%; justify-content: space-between; padding: 1rem .25rem; font-size: 1.125rem; border-radius: 0; }
  html.js .nav-link:hover { background: none; }
  html.js .nav-link[aria-current="page"]::after, html.js .nav-link[data-current-section]::after { display: none; }
  html.js .dropdown { position: static; translate: none; width: auto; box-shadow: none; border: 0; padding: 0 0 .75rem; }
  html.js .nav-split .nav-link { flex: 1; }
  html.js .nav-caret { width: 48px; height: 48px; border-radius: 12px; background: var(--c-grey); }
  html.js .nav-caret .icon { width: 1.25rem; height: 1.25rem; }
  html.js .header-cta { width: 100%; }
  body.nav-open { overflow: hidden; }
  /* Without JavaScript the navigation simply wraps below the logo */
  html.no-js .header-inner { flex-wrap: wrap; padding-block: .75rem; }
  html.no-js .site-nav, html.no-js .nav-list { flex-wrap: wrap; }
}

/* 7. Hero & hero visual ------------------------------------------------- */
.hero { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2rem + 5vw, 6.5rem); overflow: hidden; overflow: clip; }
.hero::before { /* faint dotted field, purely decorative */
  content: ""; position: absolute; inset: 0 0 auto auto; width: min(60vw, 52rem); height: 100%; pointer-events: none;
  background-image: radial-gradient(rgba(185, 28, 28, .14) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at 70% 45%, #000 0%, transparent 70%);
}
.hero__grid { position: relative; display: grid; gap: clamp(2.5rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); } }
.hero__title { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 1.5rem; }
.hero__title > span { display: block; }
.hero__title .text-red { color: var(--c-red); }
.hero__lead { max-width: 34rem; margin-bottom: 2rem; }
.hero__topics { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 2.25rem; color: var(--c-muted); font-size: var(--fs-small); font-weight: 600; }
.hero__topics li { display: inline-flex; align-items: center; gap: .45rem; }
.hero__topics li::before { content: ""; width: 6px; height: 6px; background: var(--c-red); border-radius: 1.5px; transform: rotate(45deg); }

.hero-visual { width: 100%; max-width: 600px; margin-inline: auto; }
.hv { width: 100%; height: auto; overflow: visible; }
.hv--wide { aspect-ratio: 600 / 520; }
.hv--compact { display: none; aspect-ratio: 360 / 400; max-width: 420px; margin-inline: auto; }
@media (max-width: 559px) { .hv--wide { display: none; } .hv--compact { display: block; } }

.hv-frame path { fill: none; stroke: var(--c-border); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; }
.hv-line { fill: none; stroke: var(--c-red); stroke-width: 1.5; stroke-linecap: round; transition: stroke-width var(--dur) var(--ease); }
.hv-pixels rect { fill: var(--c-red); }
.hv-halo { fill: var(--c-pale); stroke: var(--c-red-soft); stroke-width: 1; }
.hv-core { fill: var(--c-red); }
.hv-a { fill: #fff; }
.hv-node rect { fill: #fff; stroke: var(--c-border); stroke-width: 1.25; filter: drop-shadow(0 8px 16px rgba(32, 33, 36, .07)); transition: stroke var(--dur) var(--ease); }
.hv-node__badge { fill: var(--c-pale); }
.hv-node__icon { fill: none; stroke: var(--c-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv-node text { fill: var(--c-ink); font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.hv--compact .hv-node text { font-size: 14px; }
.hv-dot { fill: var(--c-red); }

/* Hover emphasis only for precise pointers; purely decorative */
@media (hover: hover) and (pointer: fine) {
  .hv-node:hover rect { stroke: var(--c-red); }
  .hv:has(.hv-node[data-n="1"]:hover) .hv-line[data-n="1"],
  .hv:has(.hv-node[data-n="2"]:hover) .hv-line[data-n="2"],
  .hv:has(.hv-node[data-n="3"]:hover) .hv-line[data-n="3"],
  .hv:has(.hv-node[data-n="4"]:hover) .hv-line[data-n="4"] { stroke-width: 2.75; }
}

/* Inner-page hero */
.page-hero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem); border-bottom: 1px solid var(--c-border); overflow: hidden; overflow: clip; }
.page-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .page-hero__grid { grid-template-columns: minmax(0, 1fr) 17rem; } }
.page-hero h1 { max-width: 22ch; }
.page-hero .lead { max-width: 40rem; margin-bottom: 2rem; }
.page-hero--simple h1 { max-width: none; }

/* Page hero with a supporting image */
@media (min-width: 900px) { .page-hero__grid--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); } }
.hero-media { margin: 0; }
.hero-media img { width: 100%; height: auto; }
/* Off-white studio images sit in a soft frame so their background reads as intentional */
.hero-media--framed { overflow: hidden; overflow: clip; border-radius: var(--radius-lg); background: #F6F4F2; border: 1px solid var(--c-border); box-shadow: var(--shadow); aspect-ratio: 3 / 2; }
.hero-media--framed img { height: 100%; object-fit: cover; }
/* White-background artwork can bleed freely */
.hero-media--bleed { aspect-ratio: 1916 / 821; }
@media (min-width: 900px) { .hero-media--bleed { margin-right: calc(var(--gutter) * -1); } }
@media (max-width: 899px) { .hero-media--framed { aspect-ratio: 16 / 10; } .hero-media--framed img { object-position: 70% 50%; } }
@media (prefers-reduced-motion: no-preference) {

}
@keyframes hero-media-in { from { opacity: 0; } }

.hero-mark { position: relative; width: 15rem; aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.hero-mark::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--c-red-soft); }
.hero-mark::after { content: ""; position: absolute; inset: 16%; border-radius: 50%; background: var(--c-pale); }
.hero-mark .icon { position: relative; z-index: 1; width: 4.5rem; height: 4.5rem; color: var(--c-red); stroke-width: 1.4; }
.hero-mark__logo { position: relative; z-index: 1; width: 7.5rem; height: 7.5rem; }
.hero-mark__px { position: absolute; z-index: 1; width: 12px; height: 12px; background: var(--c-red); border-radius: 2px; }
.hero-mark__px:nth-of-type(1) { top: 9%; right: 21%; transform: rotate(24deg); }
.hero-mark__px:nth-of-type(2) { top: 20%; right: 6%; width: 9px; height: 9px; opacity: .7; transform: rotate(40deg); }
.hero-mark__px:nth-of-type(3) { bottom: 9%; left: 21%; transform: rotate(24deg); }
.hero-mark__px:nth-of-type(4) { bottom: 20%; left: 6%; width: 9px; height: 9px; opacity: .7; transform: rotate(40deg); }
@media (max-width: 899px) { .hero-mark { display: none; } }

.breadcrumb { margin-bottom: 1.25rem; font-size: var(--fs-small); color: var(--c-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: .35rem; color: #9CA3AF; }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-red); }

/* 8. Cards & grids ------------------------------------------------------ */
.card-grid { display: grid; gap: clamp(1rem, .75rem + 1vw, 1.5rem); }
@media (min-width: 640px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1.25rem + .8vw, 2rem);
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card > p { color: var(--c-muted); }
.card h3, .card .h4 { margin-bottom: .6rem; }
.card--flat { box-shadow: none; }
.card--grey { background: var(--c-grey); border-color: transparent; }
.card__footer { margin-top: auto; padding-top: 1.25rem; }
.card--interactive:hover, .card--interactive:focus-within { border-color: rgba(185, 28, 28, .55); box-shadow: var(--shadow); }
.card--interactive:hover .link-arrow .icon { transform: translateX(3px); }
/* Make the whole card clickable via its main link */
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link:hover { color: var(--c-red); }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--c-red); outline-offset: 3px; }

.icon-badge {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem;
  border-radius: 14px; background: var(--c-pale); color: var(--c-red); flex: none;
}
.icon-badge .icon { width: 1.6rem; height: 1.6rem; }
.icon-badge--sm { width: 2.5rem; height: 2.5rem; border-radius: 11px; margin-bottom: 1rem; }
.icon-badge--sm .icon { width: 1.25rem; height: 1.25rem; }
.icon-badge--solid { background: var(--c-red); color: #fff; }

.service-card { min-height: 100%; }
.service-card .h3 { font-size: 1.25rem; }
.service-card__num { position: absolute; top: 1.5rem; right: 1.75rem; font-size: .8125rem; font-weight: 700; color: #B4B8BF; letter-spacing: .08em; }

/* 9. Sections & components ---------------------------------------------- */
/* Audience list */
.audience { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .audience { grid-template-columns: repeat(3, 1fr); } }
.audience__item { padding-top: 1.5rem; border-top: 2px solid var(--c-ink); }
.audience__item .icon { color: var(--c-red); width: 1.75rem; height: 1.75rem; margin-bottom: 1rem; }
.audience__item p { color: var(--c-muted); }

/* Outcomes list */
.outcomes { display: grid; gap: 0; border-top: 1px solid var(--c-border); }
.outcome { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--c-border); }
.outcome .icon-badge { margin: 0; }
.outcome h3 { font-size: 1.1875rem; margin-bottom: .35rem; }
.outcome p { color: var(--c-muted); }

/* Steps */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 2rem 1.75rem 1.75rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.step__num {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem;
  border-radius: 50%; background: var(--c-red); color: #fff; font-weight: 800; font-size: 1.0625rem;
}
.step p { color: var(--c-muted); }
@media (min-width: 900px) {
  .steps:not(.steps--4) .step:not(:last-child)::after {
    content: ""; position: absolute; top: 3.35rem; right: -1.25rem; width: 1.25rem; height: 1.5px; background: var(--c-red-soft);
  }
}

/* Check list */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checklist li { position: relative; padding-left: 2.1rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--c-pale);
}
.checklist li::after {
  content: ""; position: absolute; left: .44rem; top: calc(.2em + .36rem); width: .45rem; height: .25rem;
  border-left: 2px solid var(--c-red); border-bottom: 2px solid var(--c-red); transform: rotate(-45deg);
}
.checklist--2 { gap: .85rem 2rem; }
@media (min-width: 700px) { .checklist--2 { grid-template-columns: 1fr 1fr; } }

/* Challenge list */
.challenge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 700px) { .challenge-list { grid-template-columns: 1fr 1fr; } }
.challenge-list li { padding: 1.25rem 1.4rem; background: #fff; border: 1px solid var(--c-border); border-left: 3px solid var(--c-red); border-radius: 12px; color: var(--c-ink); font-weight: 500; }

/* Deliverables */
.deliverables { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .deliverables { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .deliverables { grid-template-columns: repeat(3, 1fr); } }
.deliverables li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--c-border); }
.deliverables li .icon-badge { margin: 0; }
.deliverables strong { display: block; margin-bottom: .2rem; }
.deliverables span.muted { font-size: var(--fs-small); display: block; line-height: 1.5; }

/* Callout */
.callout { padding: 1.5rem 1.75rem; border-radius: var(--radius); background: var(--c-pale); border: 1px solid #FBD0D5; }
.callout h2, .callout h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.callout p { color: var(--c-ink); }

/* Value / feature grid with left rule */
.features { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .features--4 { grid-template-columns: repeat(4, 1fr); } .features--5 { grid-template-columns: repeat(5, 1fr); gap: 2rem; } .features--3 { grid-template-columns: repeat(3, 1fr); } }
.feature .icon { color: var(--c-red); width: 1.75rem; height: 1.75rem; margin-bottom: 1rem; }
.feature h3 { font-size: 1.1875rem; margin-bottom: .4rem; }
.feature p { color: var(--c-muted); font-size: 1rem; }

/* Support chooser (services page) */
.chooser { display: grid; gap: 1rem; }
@media (min-width: 700px) { .chooser { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .chooser { grid-template-columns: repeat(4, 1fr); } }
.chooser .card { gap: .25rem; }
.chooser__q { font-size: var(--fs-small); font-weight: 700; color: var(--c-red); margin-bottom: .5rem; }

/* Workshops */
.workshop { gap: 0; }
.workshop__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.workshop__head .icon-badge { margin: 0; }
.workshop__head h3 { margin: 0 0 .15rem; font-size: 1.25rem; }
.workshop__area { font-size: .8125rem; font-weight: 700; color: var(--c-red); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.workshop dl { margin: 0 0 1.25rem; }
.workshop dt { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink); margin-top: 1rem; }
.workshop dd { margin: .3rem 0 0; color: var(--c-muted); }
.workshop dd ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.workshop dd li { margin-bottom: .25rem; }
.delivery-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.tag {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px;
  background: var(--c-grey); color: var(--c-ink); font-size: .8125rem; font-weight: 600; line-height: 1.4;
}
.tag .icon { width: .95rem; height: .95rem; color: var(--c-red); }
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.badge--draft { background: #FEF3C7; color: #713F12; border: 1px dashed #D97706; }

/* FAQ */
.faq { border-top: 1px solid var(--c-border); }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq summary {
  position: relative; display: block; list-style: none; cursor: pointer;
  padding: 1.35rem 3rem 1.35rem 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: 14px; height: 2px; background: var(--c-red); border-radius: 2px;
  transition: transform var(--dur) var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--c-red); }
.faq__answer { padding: 0 0 1.5rem; color: var(--c-muted); max-width: 46rem; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; overflow: clip; padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); border-radius: 28px; background: var(--c-red); color: #fff; }
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 36rem; font-size: var(--fs-lead); }
.cta-band__inner { position: relative; z-index: 1; display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1fr auto; } }
.cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.16); pointer-events: none; }
.cta-band::before { width: 26rem; height: 26rem; right: -8rem; top: -12rem; }
.cta-band::after { width: 16rem; height: 16rem; right: -3rem; top: -7rem; background: rgba(255,255,255,.04); }
.cta-band__px { position: absolute; right: 18%; bottom: 18%; width: 12px; height: 12px; background: rgba(255,255,255,.35); border-radius: 2px; transform: rotate(30deg); }

/* Engagement aside on service pages */
.panel { padding: 1.75rem; border-radius: var(--radius-lg); background: var(--c-grey); }
.panel h2, .panel h3 { font-size: 1.125rem; }

/* 10. Insights ---------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
html.no-js .js-only { display: none !important; }
.filter-chip {
  min-height: 42px; padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--c-border); background: #fff;
  font: inherit; font-size: .9375rem; font-weight: 600; color: var(--c-ink); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--c-red); color: var(--c-red); }
.filter-chip[aria-pressed="true"] { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.article-card__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.article-card__date { margin-top: auto; padding-top: 1rem; font-size: var(--fs-small); color: var(--c-muted); }
.article-list { list-style: none; padding: 0; margin: 0; }
.dev-drafts { margin-top: 3rem; padding: 1.5rem; border: 1px dashed #D97706; border-radius: var(--radius-lg); background: #FFFBEB; }
.dev-drafts h2 { color: #713F12; margin-bottom: 1.25rem; }
.filter-empty { padding: 2rem; text-align: center; background: var(--c-grey); border-radius: var(--radius); }

.empty-state { display: grid; gap: 2rem; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: #fff; }
@media (min-width: 900px) { .empty-state { grid-template-columns: auto 1fr; align-items: center; } }
.empty-state__art { width: 9rem; height: 9rem; margin-inline: auto; }
.empty-state__topics { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.5rem; padding: 0; list-style: none; }

.article-header { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 2rem; }
.prose { max-width: 44rem; }
.prose h2 { font-size: 1.625rem; margin-top: 2.5rem; }
.prose h3 { font-size: 1.25rem; margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.25rem; }
.prose li { margin-bottom: .45rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .75rem; border: 1px solid var(--c-border); }
.prose th { background: var(--c-grey); }
.table-wrap { overflow-x: auto; }

/* 11. Forms ------------------------------------------------------------- */
.form { display: grid; gap: 1.35rem; }
.form-row { display: grid; gap: 1.35rem; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field label, .field legend { font-weight: 700; font-size: .9875rem; }
.field .optional { font-weight: 500; color: var(--c-muted); }
.field .hint { font-size: var(--fs-small); color: var(--c-muted); margin: 0; }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: .75rem .95rem;
  font: inherit; font-size: 1rem; color: var(--c-ink);
  background: #fff; border: 1.5px solid #C9CDD3; border-radius: 12px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.textarea { min-height: 10rem; resize: vertical; line-height: 1.55; }
.select { appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202124' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.1rem; }
.input:hover, .select:hover, .textarea:hover { border-color: #9CA3AF; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-red); box-shadow: 0 0 0 4px rgba(185, 28, 28, .15); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--c-red); }
.field-error { display: none; align-items: center; gap: .4rem; margin: 0; color: var(--c-red-dark); font-size: var(--fs-small); font-weight: 600; }
.field.has-error .field-error { display: flex; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.radio-group { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .2rem; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.radio-pill span {
  display: inline-flex; align-items: center; min-height: 46px; padding: .6rem 1.1rem; border: 1.5px solid #C9CDD3; border-radius: 999px;
  font-weight: 600; font-size: .9375rem; transition: all var(--dur-fast) var(--ease);
}
.radio-pill input:hover + span { border-color: var(--c-red); }
.radio-pill input:checked + span { background: var(--c-pale); border-color: var(--c-red); color: var(--c-red-dark); }
.radio-pill input:focus-visible + span { outline: 3px solid var(--c-red); outline-offset: 2px; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; gap: .85rem; align-items: flex-start; padding: 1.1rem 1.25rem; border-radius: 12px; font-weight: 500; }
.form-status.is-visible { display: flex; }
.form-status .icon { margin-top: .1rem; }
.form-status--success { background: #ECFDF3; border: 1px solid #A6E9C1; color: #14532D; }
.form-status--error { background: var(--c-pale); border: 1px solid #F7B4BB; color: var(--c-red-dark); }
.form-status--info { background: #FFFBEB; border: 1px solid #FDE68A; color: #713F12; }
.form-status p { margin: 0; }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.btn .spinner { display: none; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; }
.btn[aria-busy="true"] .spinner { display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.contact-aside { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 900px) { .split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .contact-aside { position: sticky; top: calc(var(--header-h) + 2rem); } }
.field-error .icon { width: 1rem; height: 1rem; }
.form-status .icon { width: 1.25rem; height: 1.25rem; }
.link-button { padding: 0; margin-left: .35rem; background: none; border: 0; font: inherit; font-weight: 700; color: var(--c-red); text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--c-red-dark); }
.contact-aside .card h2 { font-size: 1.125rem; }

/* 12. Legal / prose ------------------------------------------------------ */
.legal-note { margin-bottom: 2.5rem; }
.legal-toc { padding: 1.25rem 1.5rem; border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 2.5rem; }
.legal-toc h2 { font-size: 1rem; margin: 0 0 .5rem; }
.legal-toc ol { margin: 0; padding-left: 1.25rem; columns: 2 14rem; }

/* 13. Footer ------------------------------------------------------------- */
.site-footer { margin-top: 0; padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 2rem; background: var(--c-grey); border-top: 1px solid var(--c-border); font-size: var(--fs-small); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .footer-grid { grid-template-columns: 1.3fr repeat(5, 1fr); gap: 2rem; } .footer-brand { grid-column: auto; } }
.footer-heading a { color: var(--c-ink); text-decoration: none; }
.footer-heading a:hover { color: var(--c-red); }
.footer-brand p { color: var(--c-muted); max-width: 26rem; margin-top: 1rem; }
.brand--footer .brand__mark { width: 40px; height: 40px; }
.brand--footer .brand__name { font-size: 1.2rem; }
.footer-heading { font-size: .8125rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a, .footer-contact a, .footer-social a { color: var(--c-ink); text-decoration: none; }
.footer-col a:hover, .footer-contact a:hover, .footer-social a:hover { color: var(--c-red); text-decoration: underline; }
.footer-base { display: grid; gap: .5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #DADDE1; color: var(--c-muted); font-size: .875rem; }

/* 404 */
.not-found { text-align: center; padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.not-found__code { font-size: clamp(4rem, 3rem + 6vw, 7rem); font-weight: 800; color: var(--c-red); line-height: 1; letter-spacing: -.04em; margin-bottom: 1rem; }
.not-found__code .icon { width: 4.5rem; height: 4.5rem; margin-inline: auto; stroke-width: 2.25; }
.not-found .btn-row { justify-content: center; margin-top: 2rem; }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: 2.5rem; padding: 0; list-style: none; }

/* 14. Motion & reveal ----------------------------------------------------- */
/* All motion is opt-in: nothing is hidden unless the visitor accepts motion
   AND the script has confirmed it can reveal content again. */
@media (prefers-reduced-motion: no-preference) {
  .card--interactive:hover, .card--interactive:focus-within { transform: translateY(var(--card-lift)); }
  .btn--primary:hover .icon, .btn--secondary:hover .icon { transform: translateX(2px); }

  html.reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(var(--reveal-distance)); }
  html.reveal-ready [data-reveal] {
    transition: opacity var(--reveal-duration) var(--ease), transform var(--reveal-duration) var(--ease),
                border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.reveal-ready .card--interactive[data-reveal].is-visible:hover { transition-delay: 0ms; }

  /* Hero visual entrance: base styles are the finished composition;
     the keyframes only describe where each element starts from. */
  .hv-symbol { transform-box: fill-box; transform-origin: center; animation: hv-fade-scale var(--hero-symbol-fade) var(--ease) both; }
  .hv-line { stroke-dasharray: 1; animation: hv-draw var(--hero-line-draw) var(--ease) var(--hero-line-delay) both; }
  .hv-node, .hv-pixels { transform-box: fill-box; transform-origin: center; animation: hv-node-in var(--hero-node-reveal) var(--ease) both; }
  .hv-node[data-n="1"] { animation-delay: var(--hero-node-delay); }
  .hv-node[data-n="2"] { animation-delay: calc(var(--hero-node-delay) + var(--hero-node-stagger)); }
  .hv-node[data-n="3"] { animation-delay: calc(var(--hero-node-delay) + var(--hero-node-stagger) * 2); }
  .hv-node[data-n="4"] { animation-delay: calc(var(--hero-node-delay) + var(--hero-node-stagger) * 3); }
  .hv-pixels { animation-name: hv-fade; animation-delay: calc(var(--hero-node-delay) + var(--hero-node-stagger) * 4); }
  .hv-frame { animation: hv-fade 900ms var(--ease) calc(var(--hero-node-delay) + var(--hero-node-stagger) * 4) both; }

  /* Faint, slow pulse: only runs while the hero is on screen and the tab is visible */
  .hv-halo { transform-box: fill-box; transform-origin: center; }
  .hero-visual.is-live .hv-halo { animation: hv-pulse var(--hero-pulse) ease-in-out calc(var(--hero-node-delay) + 800ms) infinite alternate; }

  .hero-mark::before { animation: hv-fade 900ms var(--ease) 150ms both; }
}

@keyframes hv-fade { from { opacity: 0; } }
@keyframes hv-fade-scale { from { opacity: 0; transform: scale(.94); } }
@keyframes hv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hv-node-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes hv-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.06); opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .hv-line { stroke-dasharray: none; }
  .btn[aria-busy="true"] .spinner { animation-duration: 2.4s; }
}

/* 16. Pillars, sub-navigation, and pillar pages ---------------------------- */
.hero__title--long { font-size: clamp(2.6rem, 1.5rem + 3.8vw, 4.6rem); line-height: 1; letter-spacing: -.048em; font-weight: 800; }
.hero__title--long > span + span { margin-top: .02em; }

.pillar-card { padding: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.pillar-card .h3 { font-size: 1.625rem; }
.pillar-card__list { display: grid; gap: .45rem; margin: .5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--c-border); font-size: var(--fs-small); font-weight: 600; }
.pillar-card__list li { display: flex; gap: .55rem; align-items: center; }
.pillar-card__list li::before { content: ""; width: 6px; height: 6px; background: var(--c-red); border-radius: 1.5px; transform: rotate(45deg); flex: none; }

@media (min-width: 640px) { .audience--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .audience--4 { grid-template-columns: repeat(4, 1fr); } }

.dropdown__link--sub { padding: .5rem .75rem .5rem 3.85rem; font-size: .9375rem; font-weight: 600; }
.dropdown__link--sub:hover { color: var(--c-red-dark); }

/* Sticky in-page navigation on pillar pages */
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 80px); }
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--c-border); }
.subnav__list { display: flex; gap: .35rem; overflow-x: auto; padding: .7rem 0; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .95rem; white-space: nowrap;
  border-radius: 999px; color: var(--c-ink); font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.subnav__list a:hover { background: var(--c-pale); color: var(--c-red-dark); }
.subnav__list a[aria-current="true"] { background: var(--c-red); color: #fff; }

.pillar-block__detail { padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.section--grey .pillar-block__detail { border-color: transparent; box-shadow: var(--shadow-sm); }
.pillar-block__detail > h3 { margin-bottom: 1.1rem; }
.deliverable-box { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border); }
.deliverable-box h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-red); margin-bottom: .8rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-list .tag { background: var(--c-pale); color: var(--c-ink); padding: .4rem .8rem; }
.pillar-media { margin: 2rem 0 0; overflow: hidden; overflow: clip; border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: #F6F4F2; aspect-ratio: 3 / 2; }
.pillar-media img { width: 100%; height: 100%; object-fit: cover; }

.motto-grid { list-style: none; margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .motto-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .motto-grid { grid-template-columns: repeat(4, 1fr); } }
.motto-grid li { padding: 1.5rem; border-radius: var(--radius); background: var(--c-pale); font-weight: 700; font-size: 1.0625rem; line-height: 1.4; }
.motto-grid span { display: block; margin-bottom: .6rem; color: var(--c-red); font-size: .8125rem; letter-spacing: .1em; }

.data-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; font-size: .975rem; }
.data-table th, .data-table td { text-align: left; padding: .95rem 1.25rem; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.data-table thead th { background: var(--c-grey); font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; }
.data-table tbody th { font-weight: 700; white-space: nowrap; }
.data-table tr:last-child > * { border-bottom: 0; }

.card__pillar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-red); }
.card__pillar .icon-badge { margin: 0; }
.aside-links { display: grid; gap: .5rem; }

/* Insight topics (home and insights page) */
.topic-columns { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .topic-columns { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .topic-columns--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .topic-columns--4 { grid-template-columns: repeat(4, 1fr); } }
.topic-col { padding: 1.75rem; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: #fff; }
.topic-col h3 { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.topic-col h3 .icon-badge { margin: 0; }
.topic-col ul { display: grid; gap: .85rem; }
.topic-col li { padding-left: 1rem; border-left: 2px solid var(--c-red-soft); color: var(--c-ink); font-weight: 500; line-height: 1.45; }

.mission { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); line-height: 1.3; letter-spacing: -.02em; margin: 0 auto; max-width: 30ch; }

/* Brand statement with ribbon */
.statement { padding-block: clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; overflow: clip; }
.statement__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .statement__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.statement__text { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.22; letter-spacing: -.025em; margin: 0; }
.statement__media { margin: 0; aspect-ratio: 1916 / 821; }
.statement__media img { width: 100%; height: auto; }
@media (min-width: 900px) { .statement__media { margin-right: calc(var(--gutter) * -1); } }

/* Header: eight items need a little more room before the mobile menu takes over */
@media (min-width: 1100px) {
  .nav-link { white-space: nowrap; padding-inline: .6rem; }
  .site-nav { gap: .75rem; }
  .header-cta { white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1599px) { .header-cta { display: none; } }
/* Four pillar menus: tighten the links a little on smaller desktops */
@media (min-width: 1100px) and (max-width: 1219px) { .nav-link { padding-inline: .45rem; font-size: .9375rem; } .nav-caret { width: 24px; } }

/* 17. Scroll-driven "flux" motion ------------------------------------------
   Motion is tied to scroll position (CSS scroll-driven animations), so it runs on
   the compositor and moves only when the visitor scrolls. Browsers without support,
   and anyone who prefers reduced motion, get the static design (plus the simple
   JavaScript reveal in main.js where available). Tune the feel with these tokens: */
:root {
  --flux-drift: 7vw;          /* how far hero headline lines travel sideways */
  --flux-rise: 28px;          /* how far content rises as it drifts in */
  --flux-parallax: 5%;        /* image movement inside its frame */
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Hero: headline lines drift apart and the A graphic tilts away as you scroll */
    .hero__title > .line {
      animation: flux-left linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 75vh;
      will-change: transform;
    }
    .hero__title > .line:nth-child(2) { animation-name: flux-right; }
    .hero__title > .line:nth-child(3) { animation-name: flux-left-far; }
    /* Tied to the graphic's own exit, so on phones (where it sits below the text)
       it is seen in full before it tilts away */
    .hero-visual {
      animation: flux-visual linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    /* Content drifts in as it enters the viewport (replaces the timed reveal) */
    [data-reveal] {
      animation: flux-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
    [data-reveal-group] > [data-reveal]:nth-child(2) { animation-range: entry 8% entry 85%; }
    [data-reveal-group] > [data-reveal]:nth-child(3) { animation-range: entry 16% entry 95%; }
    [data-reveal-group] > [data-reveal]:nth-child(n+4) { animation-range: entry 22% cover 30%; }

    /* Headings drift in from the side, slightly behind their block */
    .page-hero h1 { animation: flux-heading-out linear both; animation-timeline: scroll(root); animation-range: 0px 60vh; }

    /* Images: gentle parallax inside their frames; the ribbon flows sideways */
    .hero-media--framed img, .pillar-media img {
      scale: 1.12;
      animation: flux-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .hero-media--bleed img, .statement__media img {
      animation: flux-ribbon linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Brand statement fills from grey to charcoal as it scrolls through the screen */
    .statement__text {
      background: linear-gradient(90deg, var(--c-ink) 0 46%, #BCC1C8 54% 100%);
      background-size: 220% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
              background-clip: text;
      color: transparent;
      animation: flux-ink linear both;
      animation-timeline: view();
      animation-range: entry 35% cover 60%;
    }

    /* The red CTA band's rings drift as it passes */
    .cta-band::before, .cta-band::after {
      animation: flux-rings linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* Never let the statement text vanish in Windows high-contrast mode */
@media (forced-colors: active) {
  .statement__text { background: none !important; color: CanvasText !important; }
}

@keyframes flux-left      { to { transform: translate3d(calc(var(--flux-drift) * -1), 0, 0); opacity: .12; } }
@keyframes flux-right     { to { transform: translate3d(var(--flux-drift), 0, 0); opacity: .12; } }
@keyframes flux-left-far  { to { transform: translate3d(calc(var(--flux-drift) * -1.6), 0, 0); opacity: .12; } }
@keyframes flux-visual    { to { transform: translate3d(0, -7%, 0) rotate(-9deg) scale(.9); opacity: .35; } }
@keyframes flux-in        { from { opacity: 0; translate: 0 var(--flux-rise); } }
@keyframes flux-heading   { from { opacity: .2; translate: -2.5rem 0; } }
@keyframes flux-heading-out { to { translate: -3vw 0; opacity: .4; } }
@keyframes flux-parallax  { from { translate: 0 calc(var(--flux-parallax) * -1); } to { translate: 0 var(--flux-parallax); } }
@keyframes flux-ribbon    { from { translate: 9% 0; } to { translate: -7% 0; } }
@keyframes flux-ink       { to { background-position: 0 0; } }
@keyframes flux-rings     { from { translate: 3rem -2rem; } to { translate: -4rem 3rem; } }

/* 18. Apple-inspired materials, depth and playful graphics -------------------
   Principles: clarity (content first, big type), depth (glass layers, one dark
   section), and fluid, purposeful motion (spring presses, live graphics that
   pause off-screen). Every moving part is off for reduced-motion users. */
:root {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --c-rose: #FB7185;
  --c-rose-soft: #FECDD3;
  --c-red-on-dark: #FCA5A5;
  --radius-xl: 28px;
}

/* Frosted-glass header. The blur sits on a pseudo-element so it never becomes
   the containing block for the fixed mobile menu. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(255, 255, 255, .72); }
  .site-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  }
}

/* Springy, tactile buttons */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform 280ms var(--spring); }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(.96); transition-duration: 90ms; }
}

/* Hero aura: soft blurred colour drifting behind the headline */
.hero--aura { isolation: isolate; }
.aura { position: absolute; inset: -8% -6% auto auto; width: min(72vw, 940px); height: 115%; pointer-events: none; z-index: -1; }
.aura__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.aura__blob--1 { width: 420px; height: 420px; top: 2%; right: 12%; background: var(--c-rose-soft); }
.aura__blob--2 { width: 320px; height: 320px; top: 32%; right: 34%; background: var(--c-red); opacity: .16; }
.aura__blob--3 { width: 300px; height: 300px; top: 48%; right: 0; background: var(--c-rose); opacity: .28; }
@media (max-width: 959px) { .aura { inset: auto -20% 0 auto; width: 120vw; height: 60%; } .aura__blob { filter: blur(56px); } }
@media (prefers-reduced-motion: no-preference) {
  .aura__blob { animation: aura-drift 18s ease-in-out infinite alternate; animation-play-state: paused; }
  .aura__blob--2 { animation-duration: 23s; animation-delay: -6s; }
  .aura__blob--3 { animation-duration: 27s; animation-delay: -12s; }
  .aura.is-live .aura__blob { animation-play-state: running; }
}
@keyframes aura-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-40px, 30px, 0) scale(1.08); }
  100% { transform: translate3d(30px, -20px, 0) scale(.95); }
}

/* Sticker tags around the hero graphic */
.hero__stage { position: relative; }
.stickers { list-style: none; margin: 0; padding: 0; }
.sticker {
  display: inline-block; padding: .5rem 1rem; border-radius: 999px;
  font-weight: 700; font-size: .9rem; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(32, 33, 36, .45);
}
.sticker--1 { background: var(--c-ink); color: #fff; rotate: -7deg; }
.sticker--2 { background: var(--c-red); color: #fff; rotate: 6deg; }
.sticker--3 { background: #fff; color: var(--c-red-dark); border: 1.5px solid var(--c-red); rotate: -3deg; }
@media (min-width: 560px) {
  .stickers { position: absolute; inset: 0; pointer-events: none; }
  .sticker { position: absolute; }
  .sticker--1 { top: 40%; left: -1%; }
  .sticker--2 { top: 36%; right: -2%; }
  .sticker--3 { bottom: 3%; right: 3%; }
}
@media (max-width: 559px) {
  .stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .sticker { animation: sticker-in 600ms var(--spring) both, sticker-bob 5s ease-in-out 1.8s infinite alternate; }
  .sticker--1 { animation-delay: 1.5s, 2s; }
  .sticker--2 { animation-delay: 1.65s, 2.6s; }
  .sticker--3 { animation-delay: 1.8s, 3.2s; }
}
@keyframes sticker-in { from { opacity: 0; scale: .6; } }
@keyframes sticker-bob { to { translate: 0 -6px; } }

/* Ticker band */
/* Only the red band is slanted (a pseudo-element); the text runs perfectly level */
.ticker {
  position: relative; isolation: isolate; margin-block: 1rem 1.5rem; padding-block: 1.05rem;
  color: #fff; overflow: hidden; overflow-x: clip; overflow-y: visible;
}
.ticker::before { content: ""; position: absolute; inset: 0 -3%; z-index: -1; background: var(--c-red); transform: skewY(-1.6deg); }
.ticker::after { content: ""; position: absolute; top: 0; bottom: 0; right: -3%; width: calc(5.5rem + 3%); background: linear-gradient(90deg, rgba(185, 28, 28, 0), var(--c-red) 55%); transform: skewY(-1.6deg); pointer-events: none; }
.ticker__track { display: flex; width: max-content; }
.ticker__list { display: flex; margin: 0; padding: 0; list-style: none; }
.ticker__list li {
  display: inline-flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem;
  font-size: clamp(1rem, .9rem + .55vw, 1.375rem); font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.ticker__list li::before { content: ""; width: .55rem; height: .55rem; background: rgba(255, 255, 255, .85); border-radius: 2px; transform: rotate(45deg); }
.ticker__toggle {
  position: absolute; right: .75rem; top: 50%; translate: 0 -50%; z-index: 1;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--c-red); display: grid; place-items: center;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .4);
}
.ticker__toggle::before, .ticker__toggle::after { content: ""; width: 4px; height: 12px; background: currentColor; border-radius: 1px; grid-area: 1 / 1; }
.ticker__toggle::before { translate: -3px 0; } .ticker__toggle::after { translate: 3px 0; }
.ticker__toggle[aria-pressed="true"]::before { width: 0; height: 0; background: none; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; translate: 1px 0; border-radius: 0; }
.ticker__toggle[aria-pressed="true"]::after { display: none; }
.ticker__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ticker__track { animation: ticker 45s linear infinite; animation-play-state: paused; }
  .ticker.is-live:not(.is-paused):not(:hover) .ticker__track { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { width: auto; padding-inline: var(--gutter) 3.5rem; }
  .ticker__list { flex-wrap: wrap; row-gap: .4rem; }
  .ticker__list[aria-hidden="true"], .ticker__toggle { display: none; }
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* Bento tiles for the pillars (equal size, distinct character) */
.bento { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bento__tile {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--radius-xl);
  background: var(--c-grey); overflow: hidden; overflow: clip;
}
.bento__tile--ai { background: var(--c-pale); }
.bento__tile--cyber { background: var(--c-ink); color: #fff; }
.bento__tile p { color: var(--c-muted); }
.bento__tile--cyber p { color: rgba(255, 255, 255, .76); }
.bento__art { display: grid; place-items: center; height: 180px; margin-bottom: 1.5rem; border-radius: 20px; background: rgba(255, 255, 255, .75); }
.bento__tile--cyber .bento__art { background: rgba(255, 255, 255, .06); }
.bento__art svg { width: 100%; max-width: 280px; height: 100%; overflow: visible; }
.bento__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.035em; margin-bottom: .5rem; }
.bento__tile--cyber .card__link:hover { color: var(--c-red-on-dark); }
.bento__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: auto 0 0; padding: 1.25rem 0 0; list-style: none; }
.bento__chips li { padding: .35rem .8rem; border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 600; }
.bento__tile--cyber .bento__chips li { background: rgba(255, 255, 255, .1); color: #fff; }
.bento__tile:has(.card__link:focus-visible) { outline: 3px solid var(--c-red); outline-offset: 3px; }
/* Pointer spotlight (precise pointers only) */
.bento__tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(185, 28, 28, .13), transparent 62%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.bento__tile--cyber::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(252, 165, 165, .16), transparent 62%); }
.bento__tile.is-hot::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .bento__tile { transition: transform 420ms var(--spring); }
  .bento__tile:hover, .bento__tile:focus-within { transform: translateY(-4px); }
}

/* AI tile: a small network with data flowing between nodes */
.net-line { fill: none; stroke: #F6B9C0; stroke-width: 2; }
.net-flow { fill: none; stroke: var(--c-red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 90; stroke-dashoffset: 0; }
.net-node { fill: #fff; stroke: var(--c-red); stroke-width: 2.5; }
.net-core { fill: var(--c-red); }
.net-a { fill: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .net-flow { animation: net-flow 2.6s linear infinite; animation-play-state: paused; }
  .net-flow--2 { animation-duration: 3.2s; animation-direction: reverse; }
  .bento__art.is-live .net-flow { animation-play-state: running; }
  .net-core { transform-box: fill-box; transform-origin: center; }
  .bento__art.is-live .net-core { animation: net-pulse 2.6s ease-in-out infinite; }
}
@keyframes net-flow { to { stroke-dashoffset: -100; } }
@keyframes net-pulse { 50% { transform: scale(1.12); } }

/* Finance tile: activity-style rings (decorative, no data meaning) */
.ring-track { fill: none; stroke: #E5E7EB; stroke-width: 10; }
.ring { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.ring--1 { stroke: var(--c-red); stroke-dashoffset: 22; }
.ring--2 { stroke: var(--c-rose); stroke-dashoffset: 38; }
.ring--3 { stroke: var(--c-ink); stroke-dashoffset: 14; }
.ring-legend text { font-family: var(--font); font-size: 15px; font-weight: 700; fill: var(--c-ink); }
.dot--1 { fill: var(--c-red); } .dot--2 { fill: var(--c-rose); } .dot--3 { fill: var(--c-ink); }
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .bento__art:not(.is-in) .ring { stroke-dashoffset: 100; }
  .ring { transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
  .ring--2 { transition-delay: .15s; } .ring--3 { transition-delay: .3s; }
}

/* Business Consulting tile: a checklist that ticks itself off */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; width: min(100%, 250px); }
.checks li { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: 14px; background: rgba(255, 255, 255, .07); font-weight: 600; font-size: .95rem; color: #fff; }
.checks__box { position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--c-red); border: 2px solid var(--c-red); }
.checks__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .bento__art:not(.is-in) .checks__box { background: transparent; border-color: rgba(255, 255, 255, .35); }
  html.motion-ready .bento__art:not(.is-in) .checks__box::after { scale: 0; }
  .checks__box { transition: background-color .3s ease, border-color .3s ease; }
  .checks__box::after { transition: scale .35s var(--spring); }
  .checks li:nth-child(2) .checks__box, .checks li:nth-child(2) .checks__box::after { transition-delay: .45s; }
  .checks li:nth-child(3) .checks__box, .checks li:nth-child(3) .checks__box::after { transition-delay: .9s; }
}

/* One dark section for depth */
.section--ink { background: var(--c-ink); color: #fff; }
.section--ink .lead { color: rgba(255, 255, 255, .76); }
.section--ink .eyebrow { color: var(--c-red-on-dark); }
.section--ink .eyebrow::before { background: var(--c-red-on-dark); }
.section--ink .step { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.section--ink .step p { color: rgba(255, 255, 255, .74); }
.section--ink :focus-visible { outline-color: #fff; }

/* 19. Expressive motion (Cuberto-inspired) -----------------------------------
   Masked text reveals, image wipes, a living logo, a cursor follower, magnetic
   buttons and 3D tilt. Everything here is skipped for reduced motion, and the
   pointer effects only run on devices with a mouse or trackpad. */
:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-wipe: cubic-bezier(.77, 0, .18, 1);
}

/* Hero headline: each line slides up from behind its own mask */
.hero__title .line { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.line__inner { display: inline-block; }

/* Split headings (words wrapped by main.js): each word rises from a mask */
.split-word { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split-word > span { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .line__inner { animation: line-up 1.1s var(--ease-out-expo) both; }
  .hero__title .line:nth-child(1) .line__inner { animation-delay: .15s; }
  .hero__title .line:nth-child(2) .line__inner { animation-delay: .27s; }
  .hero__title .line:nth-child(3) .line__inner { animation-delay: .39s; }
  .hero .eyebrow, .hero__lead, .hero .btn-row { animation: rise-in .9s var(--ease-out-expo) both; }
  .hero .eyebrow { animation-delay: .05s; }
  .hero__lead { animation-delay: .55s; }
  .hero .btn-row { animation-delay: .68s; }

  html.split-ready .split-word > span { translate: 0 110%; transition: translate .95s var(--ease-out-expo); transition-delay: calc(var(--w, 0) * 45ms); }
  html.split-ready .is-split.is-in .split-word > span { translate: 0 0; }

  /* Images wipe into view */
  .hero-media--framed { animation: wipe-up 1.15s var(--ease-wipe) .2s both; }
  .hero-media--bleed { animation: wipe-right 1.4s var(--ease-wipe) .25s both; }


  /* The logo swirl spins in, turns as you scroll, and spins on hover; the A stays upright */
  .brand__mark { animation: logo-in 1.2s var(--ease-out-expo) both; }
  .brand__swirl { transition: transform .9s var(--ease-out-expo); }
  .brand:hover .brand__swirl, .brand:focus-visible .brand__swirl { transform: rotate(360deg); }
  .brand__a { animation: rise-in .8s var(--ease-out-expo) .35s both; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header .brand__swirl { animation: logo-scroll linear both; animation-timeline: scroll(root); }
  }
}
@keyframes line-up   { from { transform: translateY(110%); } }
@keyframes rise-in   { from { opacity: 0; translate: 0 18px; } }
@keyframes wipe-up   { from { clip-path: inset(100% 0 0 0 round 20px); } to { clip-path: inset(0 0 0 0 round 20px); } }
@keyframes wipe-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes logo-in   { from { opacity: 0; transform: rotate(-200deg) scale(.4); } }
@keyframes logo-scroll { to { rotate: 540deg; } }

/* Cursor follower (added by main.js on precise pointers) */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid rgba(185, 28, 28, .55); background: rgba(185, 28, 28, 0);
  display: grid; place-items: center; color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .01em;
  transition: width .35s var(--ease-out-expo), height .35s var(--ease-out-expo), margin .35s var(--ease-out-expo), background-color .25s ease, border-color .25s ease, opacity .25s ease;
  opacity: 0; will-change: transform;
}
.cursor.is-visible { opacity: 1; }
.cursor.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(185, 28, 28, .12); border-color: rgba(185, 28, 28, .35); }
.cursor.is-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--c-red); border-color: var(--c-red); }
.cursor.is-down { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cursor__label { opacity: 0; transition: opacity .2s ease; white-space: nowrap; }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor-dot { position: fixed; left: 0; top: 0; z-index: 201; pointer-events: none; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--c-red); opacity: 0; transition: opacity .25s ease; }
.cursor-dot.is-visible { opacity: 1; }
.cursor.is-label ~ .cursor-dot, .cursor.is-link ~ .cursor-dot { opacity: 0; }

/* Magnetic elements and 3D tilt are driven by main.js through these properties */
[data-magnetic] { translate: var(--mag-x, 0) var(--mag-y, 0); transition: translate .5s var(--spring); }
[data-magnetic].is-magnetised { transition-duration: .15s; transition-timing-function: linear; }
.tilt-host { perspective: 1000px; }
[data-tilt] { transform-style: preserve-3d; transition: transform .7s var(--ease-out-expo); }
[data-tilt].is-tilting { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px); transition: transform .12s linear; }

/* 20. Living hero graphic, floating chips and lively pillar pages ------------ */
/* Hero graphic: brand swirl, orbits, sonar, data packets */
.hv-disc { fill: #fff; }
.hv-a--ink { fill: var(--c-ink); }
.hv-swirl { transform-box: fill-box; transform-origin: center; }
.hv-orbit { fill: none; stroke: var(--c-red-soft); stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.hv-orbit--2 { stroke: #F3D3D6; stroke-dasharray: 14 10; stroke-width: 1; }
.hv-sonar { fill: none; stroke: var(--c-red); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hv-flow { fill: none; stroke: var(--c-red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .045 .955; stroke-dashoffset: .045; opacity: 0; filter: drop-shadow(0 0 4px rgba(185, 28, 28, .55)); }
.hv-pixels { transform-box: view-box; transform-origin: 300px 262px; }
.hv--compact .hv-pixels { transform-origin: 180px 200px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-visual.is-live .hv-swirl { animation: hv-spin 26s linear infinite; }
  .hero-visual.is-live .hv-orbit--1 { animation: hv-spin 40s linear infinite; }
  .hero-visual.is-live .hv-orbit--2 { animation: hv-spin 60s linear infinite reverse; }
  .hero-visual.is-live .hv-sonar { animation: hv-sonar 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
  .hero-visual.is-live .hv-sonar--2 { animation-delay: 1.8s; }
  .hero-visual.is-live .hv-flow { opacity: 1; animation: hv-packet 2.4s cubic-bezier(.5, 0, .5, 1) infinite; }
  .hero-visual.is-live .hv-flow--2 { animation-delay: .8s; }
  .hero-visual.is-live .hv-flow--3 { animation-delay: 1.6s; }
  .hero-visual.is-live .hv-node__float { animation: hv-float 5s ease-in-out infinite alternate; }
  .hero-visual.is-live .hv-node[data-n="2"] .hv-node__float { animation-duration: 6s; animation-delay: -2s; }
  .hero-visual.is-live .hv-node[data-n="3"] .hv-node__float { animation-duration: 5.5s; animation-delay: -4s; }
  .hero-visual.is-live .hv-pixels { animation: hv-fade .5s var(--ease) both, hv-spin 48s linear infinite; }
  .hv-node__float { transform-box: fill-box; transform-origin: center; transition: scale .4s var(--spring); }
  .hv-node:hover .hv-node__float { scale: 1.03; }
}
@keyframes hv-spin   { to { rotate: 360deg; } }
@keyframes hv-sonar  { 0% { opacity: .55; scale: 1; } 100% { opacity: 0; scale: 1.9; } }
@keyframes hv-packet { 0% { stroke-dashoffset: .045; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -.955; opacity: 0; } }
@keyframes hv-float  { from { translate: 0 -4px; } to { translate: 0 5px; } }

/* Pillar page hero images with floating glass chips */
.hero-media-wrap { position: relative; }
.float-chips { list-style: none; margin: 0; padding: 0; }
.float-chip {
  position: absolute; display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .95rem .55rem .6rem; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 14px 30px -16px rgba(32, 33, 36, .45);
  font-size: .875rem; font-weight: 700; color: var(--c-ink);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .float-chip { background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
}
.float-chip__tick { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--c-red); flex: none; }
.float-chip__tick::after { content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.float-chip:nth-child(1) { top: 8%; left: -6%; }
.float-chip:nth-child(2) { top: 44%; right: -5%; }
.float-chip:nth-child(3) { bottom: -4%; left: 12%; }
@media (max-width: 899px) {
  .float-chip { font-size: .8rem; }
  .float-chip:nth-child(1) { left: 2%; } .float-chip:nth-child(2) { right: 2%; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-media-wrap .float-chip { animation: chip-in .8s var(--spring) .9s both; }
  .hero-media-wrap .float-chip:nth-child(2) { animation-delay: 1.1s; }
  .hero-media-wrap .float-chip:nth-child(3) { animation-delay: 1.3s; }
  .hero-media-wrap.is-live .float-chip { animation: chip-in .8s var(--spring) .9s both, chip-bob 4.5s ease-in-out 1.8s infinite alternate; }
  .hero-media-wrap.is-live .float-chip:nth-child(2) { animation-delay: 1.1s, 2s; }
  .hero-media-wrap.is-live .float-chip:nth-child(3) { animation-delay: 1.3s, 2.2s; }
}
@keyframes chip-bob { from { margin-top: -4px; } to { margin-top: 5px; } }
@keyframes chip-in { from { opacity: 0; scale: .7; translate: 0 12px; } }

/* Taller photo frames inside pillar sections */
.pillar-media--tall { aspect-ratio: 4 / 5; max-width: 460px; }
@media (max-width: 899px) { .pillar-media--tall { aspect-ratio: 4 / 3; max-width: none; } }

/* Lists and tags inside each pillar section pop in, one after another */
@media (prefers-reduced-motion: no-preference) {

  /* Industry page emblem: rings turn while on screen */
  .hero-mark.is-live::before { animation: hv-spin 30s linear infinite; }
  .hero-mark.is-live .hero-mark__px { animation: chip-bob 3.5s ease-in-out infinite alternate; }
  .hero-mark.is-live .hero-mark__px:nth-of-type(2n) { animation-duration: 4.2s; animation-delay: -1.2s; }
}
@keyframes tick-pop { from { scale: 0; } }

/* 21. AI page: "Hi, I'm Anvay" screen illustration ------------------------
   An original, code-drawn illustration (not a working tool). The prompt types,
   deletes and cycles while on screen; reduced motion shows one static prompt. */
.hero-media-wrap--screen { padding: 4% 2% 6%; }
.ai-screen { perspective: 1400px; }
.ai-screen__glass {
  position: relative; overflow: hidden; overflow: clip; aspect-ratio: 16 / 11;
  border-radius: 22px; color: #fff;
  background:
    radial-gradient(60% 50% at 55% 62%, rgba(185, 28, 28, .28), transparent 70%),
    radial-gradient(80% 70% at 20% 0%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(160deg, #1C1E23 0%, #111215 55%, #0B0C0E 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 40px 80px -30px rgba(32, 33, 36, .55), 0 0 0 10px #17181B, 0 0 0 11px rgba(255, 255, 255, .06);
  transform: rotateX(10deg) rotateY(-16deg) rotateZ(2deg);
  transform-origin: 50% 60%;
}
.ai-screen__bar { display: flex; align-items: center; gap: .4rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ai-screen__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ai-screen__url { margin-left: .75rem; padding: .2rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .72rem; color: rgba(255, 255, 255, .55); }
.ai-screen__body { display: grid; justify-items: center; align-content: center; gap: .5rem; height: calc(100% - 42px); padding: 1rem 8%; text-align: center; }
.ai-screen__hello { display: flex; align-items: center; gap: .7rem; font-size: clamp(1.25rem, .9rem + 1.5vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.ai-screen__hello .brand__mark { width: 40px; height: 40px; }
.ai-screen__hello .brand__a { fill: #fff; }
.ai-screen__sub { margin: 0 0 .9rem; font-size: clamp(.85rem, .75rem + .4vw, 1rem); color: rgba(255, 255, 255, .7); font-weight: 500; }
.ai-screen__input {
  width: 100%; padding: .9rem 1rem .75rem; border-radius: 18px; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.ai-screen__prompt { min-height: 2.6em; margin: 0 0 .6rem; font-size: clamp(.82rem, .72rem + .35vw, .98rem); line-height: 1.35; color: rgba(255, 255, 255, .92); }
.ai-screen__caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--c-red-on-dark); }
.ai-screen__tools { display: flex; align-items: center; gap: .45rem; }
.ai-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); font-size: .72rem; font-weight: 600; color: rgba(255, 255, 255, .8); }
.ai-pill__icon { width: 11px; height: 11px; border: 1.5px solid currentColor; border-radius: 50%; }
.ai-pill__icon--shield { border-radius: 3px 3px 6px 6px; }
.ai-screen__send { position: relative; margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 0 rgba(185, 28, 28, .5); }
.ai-screen__send::before { content: ""; position: absolute; left: 50%; top: 9px; width: 2px; height: 14px; margin-left: -1px; background: #fff; border-radius: 2px; }
.ai-screen__send::after { content: ""; position: absolute; left: 50%; top: 9px; width: 8px; height: 8px; margin-left: -4px; border: solid #fff; border-width: 2px 0 0 2px; transform: rotate(45deg); transform-origin: center; translate: 0 0; }
.ai-screen__note { margin: .9rem 0 0; font-size: .68rem; color: rgba(255, 255, 255, .38); letter-spacing: .02em; }
.ai-screen__glare { position: absolute; inset: -40% auto -40% -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .12) 50%, transparent 60%); transform: skewX(-12deg); opacity: 0; }
@media (max-width: 899px) { .ai-screen__glass { transform: rotateX(8deg) rotateY(-8deg); aspect-ratio: 4 / 3.3; } }
@media (max-width: 420px) {
  .ai-screen__glass { aspect-ratio: 1 / 1.05; }
  .ai-screen__body { padding: .75rem 6%; gap: .35rem; }
  .ai-screen__hello { font-size: 1.15rem; gap: .5rem; }
  .ai-screen__hello .brand__mark { width: 32px; height: 32px; }
  .ai-screen__sub { margin-bottom: .5rem; }
  .ai-screen__input { padding: .7rem .75rem .6rem; }
  .ai-screen__tools .ai-pill:nth-child(2) { display: none; }
  .ai-screen__note { margin-top: .5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .ai-screen__glass { animation: screen-in 1.3s var(--ease-out-expo) .15s both; }
  .hero-media-wrap--screen.is-live .ai-screen__glass { animation: screen-in 1.3s var(--ease-out-expo) .15s both, screen-float 9s ease-in-out 1.5s infinite alternate; }
  .ai-screen__hello, .ai-screen__sub, .ai-screen__input { animation: rise-in .9s var(--ease-out-expo) both; }
  .ai-screen__hello { animation-delay: .55s; } .ai-screen__sub { animation-delay: .7s; } .ai-screen__input { animation-delay: .85s; }
  .hero-media-wrap--screen.is-live .ai-screen__caret { animation: caret-blink 1s steps(1) infinite; }
  .hero-media-wrap--screen.is-live .ai-screen .brand__swirl { animation: hv-spin 14s linear infinite; }
  .hero-media-wrap--screen.is-live .ai-screen__glare { animation: glare-sweep 7s ease-in-out 2s infinite; }
  .ai-screen.is-sending .ai-screen__send { animation: send-pulse .9s ease-out; }
}
@keyframes screen-in    { from { opacity: 0; transform: rotateX(28deg) rotateY(-30deg) rotateZ(4deg) translateY(30px) scale(.92); } }
@keyframes screen-float { from { transform: rotateX(10deg) rotateY(-16deg) rotateZ(2deg) translateY(0); } to { transform: rotateX(7deg) rotateY(-11deg) rotateZ(1deg) translateY(-8px); } }
@keyframes caret-blink  { 50% { opacity: 0; } }
@keyframes glare-sweep  { 0% { left: -60%; opacity: 0; } 15% { opacity: 1; } 45% { left: 130%; opacity: 0; } 100% { left: 130%; opacity: 0; } }
@keyframes send-pulse   { 0% { box-shadow: 0 0 0 0 rgba(185, 28, 28, .6); scale: 1; } 40% { scale: 1.12; } 100% { box-shadow: 0 0 0 16px rgba(185, 28, 28, 0); scale: 1; } }
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  @keyframes screen-float { from { transform: rotateX(8deg) rotateY(-8deg); } to { transform: rotateX(6deg) rotateY(-5deg) translateY(-6px); } }
}

/* Scroll-linked reveals that need no JavaScript; unsupported browsers simply show everything */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pillar-media, .statement__media { animation: wipe-up linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .statement__media { animation-name: wipe-right; }
    .pillar-block__detail .checklist li { animation: item-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .pillar-block__detail .tag-list .tag { animation: tag-in linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
  }
}
@keyframes item-in { from { opacity: 0; translate: -16px 0; } }
@keyframes tag-in  { from { opacity: 0; scale: .7; } }

/* 22. Particle brand moment, "Let's talk" ending, page transitions ---------- */
.brand-moment {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate;
  background: radial-gradient(70% 60% at 50% 45%, #2A1416 0%, var(--c-ink) 60%, #141517 100%); color: #fff;
  padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}
.brand-moment__canvas { display: block; width: 100%; height: clamp(320px, 52vw, 620px); touch-action: pan-y; cursor: crosshair; }
.brand-moment__content { position: relative; display: grid; gap: 1rem; justify-items: center; text-align: center; margin-top: -1rem; }
.brand-moment__text { max-width: 26ch; margin: 0; font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.75rem); line-height: 1.18; letter-spacing: -.03em; color: #fff; }
.brand-moment__hint { margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .55); }
@media (prefers-reduced-motion: reduce) { .brand-moment__hint, .brand-moment__canvas { cursor: default; } .brand-moment__hint { display: none; } }

/* "Let's talk." ending above the footer links */
.talk {
  display: grid; gap: 1.25rem 2rem; align-items: center;
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
  border-bottom: 1px solid #DADDE1;
}
@media (min-width: 760px) { .talk { grid-template-columns: 1fr auto; } }
.talk__kicker { grid-column: 1 / -1; margin: 0; color: var(--c-muted); font-size: 1.0625rem; font-weight: 600; }
.talk__title { margin: 0; font-size: clamp(3.75rem, 1.4rem + 11vw, 11rem); line-height: .88; letter-spacing: -.06em; font-weight: 800; color: var(--c-ink); }
.talk__button {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; justify-self: start;
  width: clamp(8.5rem, 6rem + 6vw, 11.5rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--c-red); color: #fff; font-size: 1.0625rem; font-weight: 800; text-decoration: none; text-align: center;
  box-shadow: 0 24px 50px -24px rgba(185, 28, 28, .8);
}
@media (min-width: 760px) { .talk__button { justify-self: end; } }
.talk__button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--c-ink); transform: scale(0); transition: transform .55s var(--ease-out-expo); }
.talk__button:hover, .talk__button:focus-visible { color: #fff; }
.talk__button:hover::before, .talk__button:focus-visible::before { transform: scale(1); }
.talk__button:focus-visible { outline: 3px solid var(--c-red); outline-offset: 4px; }
.page-contact .talk { display: none; }

/* Page transitions between pages (View Transitions; ignored by browsers without support) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition { background: var(--c-red); }
  ::view-transition-old(root) { animation: vt-out .42s var(--ease-wipe) both; }
  ::view-transition-new(root) { animation: vt-in .62s var(--ease-wipe) .18s both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes vt-out { to { clip-path: inset(0 0 100% 0); } }
@keyframes vt-in  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 23. UX: "Reduce motion" switch ------------------------------------------- */
/* Turned on from the footer: stops every animation, transition and scroll effect */
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
  animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html.motion-off::view-transition-old(root), html.motion-off::view-transition-new(root), html.motion-off::view-transition-group(root) { animation: none !important; }
.footer-base__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.footer-base__row p { margin: 0; }
.motion-toggle {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 40px; padding: .35rem .9rem .35rem .45rem;
  border: 1px solid #D5D8DD; border-radius: 999px; background: #fff; color: var(--c-ink);
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.motion-toggle:hover { border-color: var(--c-red); }
.motion-toggle__track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #C9CDD3; flex: none; transition: background-color .2s ease; }
.motion-toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: translate .25s var(--spring); }
.motion-toggle[aria-pressed="true"] .motion-toggle__track { background: var(--c-red); }
.motion-toggle[aria-pressed="true"] .motion-toggle__track::after { translate: 14px 0; }
/* People who already reduce motion on their device don't need the switch */
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* 24. UX: phone call-to-action bar ---------------------------------------- */
.mobile-cta { display: none; }
@media (max-width: 899px) {
  .mobile-cta {
    position: fixed; z-index: 45; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.5rem;
    border-radius: 999px; background: var(--c-red); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap;
    box-shadow: 0 16px 34px -14px rgba(153, 27, 27, .75);
    translate: -50% calc(100% + 30px); visibility: hidden;
    transition: translate .45s var(--ease-out-expo), visibility 0s linear .45s;
  }
  .mobile-cta.is-shown { translate: -50% 0; visibility: visible; transition: translate .5s var(--ease-out-expo), visibility 0s; }
  .mobile-cta:hover, .mobile-cta:focus-visible { color: #fff; background: var(--c-red-dark); }
  .mobile-cta:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
  /* keep keyboard focus clear of the bar */
  html { scroll-padding-bottom: 90px; }
}
.page-contact .mobile-cta { display: none !important; }

/* 25. UX: form error summary and article reading aids --------------------- */
.error-summary { padding: 1.1rem 1.25rem; border: 2px solid var(--c-red); border-radius: 14px; background: var(--c-pale); }
.error-summary:focus-visible { outline: 3px solid var(--c-red); outline-offset: 3px; }
.error-summary h3 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--c-red-dark); }
.error-summary ul { margin: 0; padding-left: 1.15rem; }
.error-summary li { margin: .2rem 0; }
.error-summary a { color: var(--c-red-dark); font-weight: 600; }

.read-progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .read-progress { display: block; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; background: var(--c-red); transform-origin: 0 50%; animation: read-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.article-meta__time { color: var(--c-muted); font-size: var(--fs-small); font-weight: 600; }

/* 15. Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 2rem; }
.center { text-align: center; }
.max-40 { max-width: 40rem; }

@media print {
  .site-header, .site-footer, .dev-banner, .hero-visual, .cta-band { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation: none !important; translate: none !important; scale: none !important; }
  .statement__text { color: #202124 !important; background: none !important; }
}

/* 26. Four pillars: home particle hero, pillar row, tiles, roadmap art -------
   The particle "A" (particles.js) opens the home page on a dark stage, with the
   four pillars as real links underneath it. */
.hero--particles {
  isolation: isolate; color: #fff;
  background: radial-gradient(65% 55% at 50% 28%, #2A1416 0%, var(--c-ink) 58%, #141517 100%);
  padding-block: clamp(.25rem, 0rem + 1vw, 1rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}
.hero--particles::before { content: none; }
.hero-particles { position: relative; }
.hero-particles__canvas {
  display: block; width: 100%; height: min(clamp(280px, 42vw, 520px), 50svh);
  touch-action: pan-y; cursor: crosshair;
}
.hero-particles__hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-size: .8125rem; color: rgba(255, 255, 255, .5); }
@media (prefers-reduced-motion: reduce) { .hero-particles__hint { display: none; } .hero-particles__canvas { cursor: default; } }
html.motion-off .hero-particles__hint { display: none; }

.hero__content--center { max-width: 70rem; margin: clamp(.75rem, .25rem + 1vw, 1.25rem) auto 0; text-align: center; }
.hero__content--center .eyebrow { justify-content: center; }
.hero__content--center .hero__lead { max-width: 44rem; margin-inline: auto; }
.hero__content--center .btn-row { justify-content: center; }
.hero--particles .hero__title--long { font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem); color: #fff; }
.hero--particles .eyebrow { color: var(--c-red-on-dark); }
.hero--particles .eyebrow::before { background: var(--c-red-on-dark); }
.hero--particles .hero__lead { color: rgba(255, 255, 255, .74); }
.hero--particles .btn--secondary { --btn-fg: #fff; --btn-border: rgba(255, 255, 255, .45); background: transparent; }
.hero--particles .btn--secondary:hover { --btn-bg: rgba(255, 255, 255, .08); --btn-fg: #fff; --btn-border: #fff; }
.hero--particles :focus-visible { outline-color: #fff; }

/* The four pillars, floating under the particle "A" */
.pillar-row { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin: 0 auto clamp(2.5rem, 1.5rem + 3vw, 4rem); padding: 0; }
@media (min-width: 900px) { .pillar-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.pillar-row__link {
  display: flex; align-items: center; gap: .85rem; height: 100%; padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; background: rgba(255, 255, 255, .06);
  color: #fff; text-align: left; text-decoration: none;
  transition: transform .45s var(--spring), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pillar-row__link:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(252, 165, 165, .55); box-shadow: 0 20px 44px -22px rgba(185, 28, 28, .8); transform: translateY(-4px); }
.pillar-row__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--c-red); color: #fff; }
.pillar-row__icon .icon, .pillar-row__icon svg { width: 22px; height: 22px; }
.pillar-row__text { display: grid; gap: .1rem; }
.pillar-row__name { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.pillar-row__desc { font-size: .8125rem; color: rgba(255, 255, 255, .66); }
@media (max-width: 559px) {
  .pillar-row__link { flex-direction: column; justify-content: center; gap: .5rem; padding: .9rem .6rem; text-align: center; }
  .pillar-row__desc { display: none; }
  .pillar-row__name { font-size: .975rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .pillar-row li { animation: rise-in .9s var(--ease-out-expo) both; }
  .pillar-row li:nth-child(1) { animation-delay: .8s; }
  .pillar-row li:nth-child(2) { animation-delay: .9s; }
  .pillar-row li:nth-child(3) { animation-delay: 1s; }
  .pillar-row li:nth-child(4) { animation-delay: 1.1s; }
  .pillar-row.is-live li { animation: rise-in .9s var(--ease-out-expo) .8s both, pillar-float 5s ease-in-out 1.8s infinite alternate; }
  .pillar-row.is-live li:nth-child(2) { animation-delay: .9s, 2.6s; }
  .pillar-row.is-live li:nth-child(3) { animation-delay: 1s, 2.2s; }
  .pillar-row.is-live li:nth-child(4) { animation-delay: 1.1s, 3s; }
}
@keyframes pillar-float { to { translate: 0 -6px; } }

/* Four pillar tiles: two by two */
@media (min-width: 760px) { .bento--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bento__tile--bc { background: #fff; border: 1px solid var(--c-border); }
.bento__tile--bc .bento__art { background: var(--c-grey); }

/* Business Consulting tile: a roadmap that draws itself from strategy to delivery */
.road-track { fill: none; stroke: var(--c-border); stroke-width: 10; stroke-linecap: round; }
.road-flow { fill: none; stroke: var(--c-red); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.road-dot { fill: #fff; stroke: var(--c-ink); stroke-width: 3; }
.road-dot--end { fill: var(--c-red); stroke: var(--c-red); }
.road-labels text { font-family: var(--font); font-size: 14px; font-weight: 700; fill: var(--c-ink); }
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .bento__art:not(.is-in) .road-flow { stroke-dashoffset: 100; }
  .road-flow { transition: stroke-dashoffset 1.8s cubic-bezier(.2, .8, .2, 1); }
  .road-dot--end { transform-box: fill-box; transform-origin: center; }
  .bento__art.is-live .road-dot--end { animation: net-pulse 2.6s ease-in-out infinite; }
}

/* 27. Cyber "security desk": a robot and a person talking on the tablet -----
   Shares the AI page's tablet (.ai-screen). Decorative; main.js plays the
   conversation while it is on screen. Without it, the first exchange shows. */
.chat { display: grid; grid-template-rows: auto 1fr auto; height: calc(100% - 42px); padding: .9rem 6% .7rem; }
.chat__cast { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.chat__who { display: grid; justify-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .6); transition: color var(--dur) var(--ease); }
.chat__who svg { width: clamp(58px, 3.25rem + 2vw, 86px); height: auto; overflow: visible; transition: filter var(--dur) var(--ease), scale .4s var(--spring); }
.cyber-chat[data-speaking="bot"] .chat__who--bot,
.cyber-chat[data-speaking="human"] .chat__who--human { color: #fff; }
.cyber-chat[data-speaking="bot"] .chat__who--bot svg { filter: drop-shadow(0 0 14px rgba(239, 68, 68, .55)); scale: 1.06; }
.cyber-chat[data-speaking="human"] .chat__who--human svg { filter: drop-shadow(0 0 14px rgba(255, 255, 255, .35)); scale: 1.06; }

/* Robot */
.bot__head { fill: #2B2E35; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.bot__face { fill: #0E0F12; }
.bot__ear { fill: var(--c-red); }
.bot__stem { stroke: rgba(255, 255, 255, .45); stroke-width: 2; stroke-linecap: round; }
.bot__light { fill: var(--c-red); }
.bot__eyes { fill: #FCA5A5; }
.bot__mouth { fill: #FCA5A5; }
.bot__eyes, .bot__mouth, .bot__light { transform-box: fill-box; transform-origin: center; }

/* Person */
.human__bg { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.human__body { fill: #E5E7EB; }
.human__head { fill: #F3C9A8; }
.human__hair { fill: #3A2A22; }

/* A dotted wire between them, with a pulse travelling the way the conversation flows */
.chat__wire { position: relative; flex: 1; height: 2px; margin-bottom: 1.1rem; background-image: linear-gradient(90deg, rgba(255, 255, 255, .25) 50%, transparent 50%); background-size: 8px 2px; }
.chat__pulse { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 12px rgba(239, 68, 68, .9); opacity: 0; }

/* Thread: newest message at the bottom, older ones slide up and out of view */
.chat__thread { display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; min-height: 0; margin: .7rem 0 0; padding: 0; list-style: none; overflow: hidden; overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
.chat__msg { max-width: 82%; padding: .55rem .8rem; border-radius: 14px; font-size: clamp(.72rem, .62rem + .35vw, .86rem); line-height: 1.38; text-align: left; }
.chat__msg--bot { align-self: flex-start; border-bottom-left-radius: 4px; background: rgba(185, 28, 28, .32); border: 1px solid rgba(252, 165, 165, .3); color: #fff; }
.chat__msg--human { align-self: flex-end; border-bottom-right-radius: 4px; background: #fff; color: var(--c-ink); }
/* Static view: the first exchange */
.chat__msg:nth-child(n+3), .chat__typing { display: none; }

.cyber-chat.is-playing .chat__msg { display: none; }
.cyber-chat.is-playing .chat__msg.is-shown { display: block; animation: bubble-in .5s var(--spring) both; }
.cyber-chat.is-playing .chat__typing.is-shown { display: flex; }
.chat__typing { align-self: flex-start; gap: 4px; padding: .6rem .75rem; border-radius: 14px; background: rgba(255, 255, 255, .1); }
.chat__typing[data-side="human"] { align-self: flex-end; background: rgba(255, 255, 255, .85); }
.chat__typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .8); animation: typing-dot 1s ease-in-out infinite; }
.chat__typing[data-side="human"] span { background: var(--c-ink); }
.chat__typing span:nth-child(2) { animation-delay: .15s; } .chat__typing span:nth-child(3) { animation-delay: .3s; }
.cyber-chat .chat__thread { transition: opacity .6s var(--ease); }
.cyber-chat.is-resetting .chat__thread { opacity: 0; }
.cyber-chat .ai-screen__note { margin-top: .5rem; text-align: center; }

@media (max-width: 420px) {
  .chat { padding: .7rem 5% .5rem; }
  .chat__msg { max-width: 90%; padding: .45rem .65rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-media-wrap--screen.is-live .bot__eyes { animation: bot-blink 4.5s ease-in-out infinite; }
  .hero-media-wrap--screen.is-live .bot__light { animation: bot-light 1.8s ease-in-out infinite; }
  .cyber-chat[data-speaking="bot"] .bot__mouth { animation: bot-talk .32s ease-in-out infinite alternate; }
  .cyber-chat[data-speaking="bot"] .chat__pulse { animation: wire-pulse 1.2s ease-in-out infinite; }
  .cyber-chat[data-speaking="human"] .chat__pulse { animation: wire-pulse 1.2s ease-in-out infinite reverse; }
  .chat__who--bot, .chat__who--human, .chat__thread { animation: rise-in .9s var(--ease-out-expo) both; }
  .chat__who--bot { animation-delay: .55s; } .chat__who--human { animation-delay: .7s; } .chat__thread { animation-delay: .85s; }
}
@keyframes bubble-in  { from { opacity: 0; translate: 0 10px; scale: .94; } }
@keyframes typing-dot { 0%, 100% { opacity: .35; translate: 0 0; } 50% { opacity: 1; translate: 0 -3px; } }
@keyframes bot-blink  { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
@keyframes bot-light  { 50% { opacity: .35; } }
@keyframes bot-talk   { from { scale: .5 1; } to { scale: 1.15 2.2; } }
@keyframes wire-pulse { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 0; } }

/* 28. GAPZe by Anvay: free assessment highlight, mascot and product page ----
   The mascot (partials/gapze-anim.html) loops through three beats every 10s:
   scan the controls, find the gaps, lay out a roadmap. With reduced motion it
   shows the finished picture: gaps found and the roadmap ready. */

/* Site-wide free assessment bar */
.promo-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .75rem;
  padding: .55rem var(--gutter); background: var(--c-ink); color: #fff; font-size: .875rem; line-height: 1.35; text-align: center; text-decoration: none;
}
.promo-bar:hover { color: #fff; background: #000; }
.promo-bar__free, .gapze-badge__free, .free-pill {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px; background: var(--c-red); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
}
.promo-bar__text strong { color: var(--c-red-on-dark); }
.promo-bar__go { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.promo-bar:focus-visible { outline: 3px solid var(--c-red-on-dark); outline-offset: -3px; }
@media (max-width: 559px) { .promo-bar__go { display: none; } }
.free-pill { margin-left: .4rem; padding: .05rem .45rem; font-size: .65rem; vertical-align: .1em; }

/* "Free" badge and ticks */
.gapze-badge {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; padding: .3rem .9rem .3rem .3rem;
  border: 1px solid var(--c-red-soft); border-radius: 999px; background: #fff; font-size: .875rem; font-weight: 700; color: var(--c-ink);
  box-shadow: 0 8px 24px -16px rgba(185, 28, 28, .5);
}
.gapze-badge__free { font-size: .78rem; padding: .25rem .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .gapze-badge__free { animation: free-pulse 2.4s ease-out infinite; }
}
@keyframes free-pulse { 0% { box-shadow: 0 0 0 0 rgba(185, 28, 28, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(185, 28, 28, 0); } }
.gapze-ticks { list-style: none; display: grid; gap: .55rem; margin: 0 0 2rem; padding: 0; font-weight: 600; }
.gapze-ticks li { display: flex; align-items: flex-start; gap: .6rem; }
.gapze-ticks .icon { flex: none; width: 1.35rem; height: 1.35rem; padding: .2rem; border-radius: 50%; background: var(--c-red); color: #fff; stroke-width: 3; }
.gapze-ticks--inline { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 0; font-size: .9375rem; }

/* GAPZe band on the home and Cybersecurity pages */
.gapze-band { background: linear-gradient(180deg, #fff 0%, var(--c-pale) 100%); border-bottom: 1px solid var(--c-red-soft); }
.gapze-band__grid { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 960px) { .gapze-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gapze-band h2 { max-width: 18ch; }
.gapze-band .lead { max-width: 36rem; }

/* Mascot card */
.gz { --s: 54px; width: 100%; max-width: 520px; margin-inline: auto; }
.gz__card {
  position: relative; overflow: hidden; overflow: clip; padding: clamp(1rem, .75rem + 1vw, 1.5rem); border-radius: 26px; color: #fff;
  background: radial-gradient(70% 60% at 30% 70%, rgba(185, 28, 28, .32), transparent 70%), linear-gradient(160deg, #26282D 0%, #141518 100%);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 40px 80px -36px rgba(32, 33, 36, .6);
}
.gz__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.gz__brand { font-size: 1.15rem; font-weight: 800; letter-spacing: .06em; }
.gz__tag { padding: .2rem .65rem; border-radius: 999px; background: rgba(252, 165, 165, .16); color: var(--c-red-on-dark); font-size: .75rem; font-weight: 700; }
.gz__stage { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
.gz__mascot { display: grid; justify-items: center; gap: .5rem; }
.gz__bubble { position: relative; display: grid; margin: 0; padding: .55rem .85rem; border-radius: 14px 14px 14px 4px; background: #fff; color: var(--c-ink); font-size: .85rem; font-weight: 700; line-height: 1.3; text-align: center; }
.gz__bubble::after { content: ""; position: absolute; left: 22%; bottom: -7px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.gz__bubble span { grid-area: 1 / 1; }
.gz__bubble span:nth-child(1), .gz__bubble span:nth-child(2) { opacity: 0; }
.gz__bot { width: min(100%, 150px); height: auto; overflow: visible; }
.gz__shadow { fill: rgba(0, 0, 0, .35); }
.gz__stem { stroke: rgba(255, 255, 255, .5); stroke-width: 3; stroke-linecap: round; }
.gz__light { fill: var(--c-red-on-dark); }
.gz__shield { fill: var(--c-red); }
.gz__shine { fill: rgba(255, 255, 255, .14); }
.gz__face { fill: #15161A; }
.gz__eyes { fill: #FCA5A5; }
.gz__smile { fill: none; stroke: #FCA5A5; stroke-width: 3; stroke-linecap: round; }
.gz__limb { fill: none; stroke: var(--c-red); stroke-width: 6; stroke-linecap: round; }
.gz__glass { fill: rgba(255, 255, 255, .18); stroke: #fff; stroke-width: 3.5; }
.gz__handle { stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.gz__body, .gz__eyes, .gz__arm, .gz__light, .gz__shadow { transform-box: fill-box; transform-origin: center; }
.gz__arm { transform-origin: 0% 0%; }

.gz__work { display: grid; justify-items: center; gap: .9rem; }
.gz__board { position: relative; display: grid; grid-template-columns: repeat(3, calc(var(--s) - 8px)); gap: 8px; }
.gz__tile { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; background: rgba(34, 197, 94, .18); border: 1px solid rgba(134, 239, 172, .4); }
.gz__tile::after { content: ""; position: absolute; left: 50%; top: 46%; width: 30%; height: 16%; border: solid #86EFAC; border-width: 0 0 2.5px 2.5px; translate: -50% -50%; rotate: -45deg; }
.gz__tile--gap { background: rgba(239, 68, 68, .38); border-color: #F87171; }
.gz__tile--gap::after { content: "!"; width: auto; height: auto; border: 0; rotate: none; top: 50%; color: #fff; font-weight: 800; font-size: 1.15rem; line-height: 1; }
.gz__lens {
  position: absolute; left: 0; top: 0; width: calc(var(--s) - 8px); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid #fff; background: rgba(255, 255, 255, .14); box-shadow: 0 0 18px rgba(255, 255, 255, .35); opacity: 0;
}
.gz__lens::after { content: ""; position: absolute; right: -9px; bottom: -9px; width: 14px; height: 4px; border-radius: 2px; background: #fff; rotate: 45deg; }
.gz__road { list-style: none; display: grid; gap: .4rem; width: 100%; margin: 0; padding: 0; }
.gz__road li { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border-radius: 10px; background: rgba(255, 255, 255, .07); font-size: .78rem; font-weight: 600; }
.gz__road b { display: grid; place-items: center; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--c-red); font-size: .72rem; }
.gz__foot { margin: 1rem 0 0; font-size: .7rem; color: rgba(255, 255, 255, .45); text-align: center; }
@media (max-width: 420px) {
  .gz { --s: 44px; }
  .gz__stage { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: .6rem; }
  .gz__bubble { font-size: .75rem; padding: .45rem .6rem; }
  .gz__road li { font-size: .7rem; padding: .35rem .45rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .gz__body { animation: gz-float 3.2s ease-in-out infinite alternate; }
  .gz__shadow { animation: gz-shadow 3.2s ease-in-out infinite alternate; }
  .gz__eyes { animation: bot-blink 4s ease-in-out infinite; }
  .gz__light { animation: bot-light 1.6s ease-in-out infinite; }
  .gz__arm { animation: gz-wave 10s ease-in-out infinite; }
  .gz__lens { animation: gz-scan 10s ease-in-out infinite; }
  .gz__tile { animation: gz-ok 10s linear infinite; }
  .gz__tile::after { animation: gz-mark 10s linear infinite; }
  .gz__tile--gap { animation: gz-gap 10s linear infinite; }
  .gz__bubble span:nth-child(1) { animation: gz-say1 10s linear infinite; }
  .gz__bubble span:nth-child(2) { animation: gz-say2 10s linear infinite; }
  .gz__bubble span:nth-child(3) { animation: gz-say3 10s linear infinite; }
  .gz__road li:nth-child(1) { animation: gz-road1 10s var(--ease) infinite; }
  .gz__road li:nth-child(2) { animation: gz-road2 10s var(--ease) infinite; }
  .gz__road li:nth-child(3) { animation: gz-road3 10s var(--ease) infinite; }
  /* Pause while off screen */
  html.motion-ready .gz:not(.is-live) .gz__card *,
  html.motion-ready .gz:not(.is-live) .gz__card *::after { animation-play-state: paused; }
}
@keyframes gz-float  { to { translate: 0 -6px; } }
@keyframes gz-shadow { to { scale: .82 1; opacity: .7; } }
@keyframes gz-wave   { 0%, 30% { rotate: -8deg; } 15% { rotate: 6deg; } 40%, 100% { rotate: 0deg; } }
@keyframes gz-scan {
  0% { translate: 0 0; opacity: 0; } 3% { opacity: 1; }
  9% { translate: calc(var(--s) * 2) 0; } 13% { translate: 0 var(--s); } 20% { translate: calc(var(--s) * 2) var(--s); }
  24% { translate: 0 calc(var(--s) * 2); } 30% { translate: calc(var(--s) * 2) calc(var(--s) * 2); opacity: 1; }
  34%, 100% { translate: calc(var(--s) * 2) calc(var(--s) * 2); opacity: 0; }
}
@keyframes gz-ok {
  0%, 30%, 100% { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
  35%, 93% { background: rgba(34, 197, 94, .18); border-color: rgba(134, 239, 172, .4); }
}
@keyframes gz-gap {
  0%, 30%, 100% { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  35% { background: rgba(239, 68, 68, .45); border-color: #F87171; box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); }
  45% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  50% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); }
  60%, 93% { background: rgba(239, 68, 68, .38); border-color: #F87171; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes gz-mark { 0%, 31%, 100% { opacity: 0; } 37%, 93% { opacity: 1; } }
@keyframes gz-say1 { 0%, 29% { opacity: 1; } 32%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gz-say2 { 0%, 31% { opacity: 0; } 34%, 60% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes gz-say3 { 0%, 62% { opacity: 0; } 65%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes gz-road1 { 0%, 64% { opacity: 0; translate: -12px 0; } 68%, 94% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; } }
@keyframes gz-road2 { 0%, 70% { opacity: 0; translate: -12px 0; } 74%, 94% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; } }
@keyframes gz-road3 { 0%, 76% { opacity: 0; translate: -12px 0; } 80%, 94% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; } }

/* Contact page: confirms the free assessment */
.gapze-note { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1.5rem; padding: 1rem 1.15rem; border-left: 4px solid var(--c-red); border-radius: var(--radius); background: var(--c-pale); }
.gapze-note .gapze-badge__free { flex: none; margin-top: .15rem; }

/* GAPZe page */
.gapze-hero { background: linear-gradient(180deg, #fff 0%, var(--c-pale) 100%); }
.gapze-legal { padding-bottom: 2.5rem; }

.finder { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .finder { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.finder__q { margin: 0 0 1.5rem; padding: 0; border: 0; min-width: 0; }
.finder__q:last-child { margin-bottom: 0; }
.finder__q legend { display: block; margin-bottom: .65rem; padding: 0; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; padding: .55rem 1rem; border: 1.5px solid var(--c-border); border-radius: 999px; background: #fff; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.chip:hover span { border-color: var(--c-ink); }
.chip input:checked + span { border-color: var(--c-red); background: var(--c-pale); color: var(--c-red-dark); }
.chip input:focus-visible + span { outline: 3px solid var(--c-red); outline-offset: 2px; }
@media (min-width: 900px) { .finder__result { position: sticky; top: calc(var(--header-h) + 1rem); } }
.suggestion { display: flex; align-items: flex-start; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--c-border); }
.suggestion:last-child { border-bottom: 0; }
.suggestion__dot { flex: none; width: 10px; height: 10px; margin-top: .5rem; border-radius: 50%; background: var(--c-red); }
.suggestion__dot--soon { background: var(--c-border); }
.suggestion strong { display: block; }
.suggestion p { margin: .2rem 0 0; font-size: .9rem; color: var(--c-muted); }

.fw-group { margin-bottom: 2.5rem; }
.fw-group > p { margin-bottom: 1rem; }
.fw-list { list-style: none; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); margin: 0; padding: 0; }
.fw-item { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; }
.fw-item strong { display: block; font-size: .975rem; line-height: 1.3; }
.fw-item span span { font-size: .85rem; color: var(--c-muted); }
.fw-badge { display: inline-flex; flex: none; padding: .2rem .55rem; border-radius: 999px; background: var(--c-grey); color: var(--c-muted); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.fw-badge--live { background: #F0FDF4; color: #15803D; }
.fw-badge--amber { background: #FFFBEB; color: #B45309; }

.map-demo { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 760px) { .map-demo { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.map-demo__q { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--c-ink); color: #fff; }
.map-demo__q small { color: var(--c-red-on-dark); font-weight: 600; }
.map-demo__q p { margin: .4rem 0 1rem; font-size: 1.15rem; font-weight: 700; }
.map-demo__arrow { justify-self: center; color: var(--c-red); }
.map-demo__arrow .icon { width: 2.5rem; height: 2.5rem; }
@media (max-width: 759px) { .map-demo__arrow { rotate: 90deg; } }
.map-demo__targets { list-style: none; display: grid; gap: .6rem; margin: 0; padding: 0; }
.map-demo__targets li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border: 1px solid var(--c-border); border-radius: 12px; background: #fff; font-weight: 700; font-size: .95rem; }
.map-demo__targets li.is-soon { color: var(--c-muted); }
.map-demo__targets code { font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--c-muted); }
.gapze-price th[scope="row"] { color: var(--c-red); font-weight: 800; white-space: nowrap; }

/* 29. GAPZe framework showcase: a living field of frameworks ----------------
   Without script it is a tidy wrapped list; main.js turns it into a moving,
   draggable field around the GAPZe core (.fwc.is-ready). */
.fw-showcase { margin-top: clamp(3.5rem, 2rem + 5vw, 6rem); }
.fw-showcase-section .fw-showcase { margin-top: 0; }
.fw-showcase__head { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.fw-showcase__head .eyebrow { justify-content: center; }
.fw-showcase__head .h2 { font-size: var(--fs-h2); }

.fwc { --fwc-core: 248, 113, 113; --fwc-reg: 251, 191, 36; --fwc-ot: 96, 165, 250; --fwc-cloud: 167, 139, 250; }
.fwc__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.fwc__filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.fwc__filter {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .35rem .9rem;
  border: 1.5px solid var(--c-border); border-radius: 999px; background: #fff; color: var(--c-ink);
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.fwc__filter:hover { border-color: var(--c-ink); }
.fwc__filter[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.fwc__swatch { width: 10px; height: 10px; border-radius: 50%; }
.fwc__filter--core .fwc__swatch { background: rgb(var(--fwc-core)); }
.fwc__filter--reg .fwc__swatch { background: rgb(var(--fwc-reg)); }
.fwc__filter--ot .fwc__swatch { background: rgb(var(--fwc-ot)); }
.fwc__filter--cloud .fwc__swatch { background: rgb(var(--fwc-cloud)); }
.fwc__legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; padding: 0; font-size: .8125rem; color: var(--c-muted); }
.fwc__legend li { display: inline-flex; align-items: center; gap: .45rem; }
.fwc__key { width: 22px; height: 12px; border-radius: 999px; border: 1px solid #9CA3AF; background: #F3F4F6; }
.fwc__key--live { border-color: var(--c-red); background: var(--c-red); }

.fwc__stage {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate; border-radius: 28px; padding: 1.5rem;
  background: radial-gradient(50% 50% at 50% 50%, rgba(185, 28, 28, .3), transparent 70%), linear-gradient(160deg, #24262B 0%, #121316 100%);
  box-shadow: 0 40px 80px -40px rgba(32, 33, 36, .55);
}
.fwc__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.fwc__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0; padding: 0; }
.fwc__chip {
  --c: var(--fwc-core);
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid rgba(var(--c), .45); background: rgba(22, 23, 27, .82); color: #fff;
  font-size: .8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; user-select: none;
  box-shadow: 0 0 0 0 rgba(var(--c), 0), 0 10px 24px -14px rgba(0, 0, 0, .8);
  transition: opacity .35s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.fwc__chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 10px rgba(var(--c), .9); }
.fwc__chip[data-cat="reg"] { --c: var(--fwc-reg); }
.fwc__chip[data-cat="ot"] { --c: var(--fwc-ot); }
.fwc__chip[data-cat="cloud"] { --c: var(--fwc-cloud); }
.fwc__chip--live { background: var(--c-red); border-color: #FCA5A5; font-size: .9rem; padding: .55rem 1rem; box-shadow: 0 0 24px rgba(239, 68, 68, .55); }
.fwc__chip--live::before { background: #fff; box-shadow: 0 0 10px #fff; }
.fwc__chip.is-dim { opacity: .18; }
.fwc__core { display: none; }
.fwc__hint { margin: 1rem 0 0; text-align: center; font-size: .8125rem; color: rgba(255, 255, 255, .5); }

/* Living field */
.fwc.is-ready .fwc__stage { height: clamp(460px, 40vw, 560px); padding: 0; touch-action: pan-y; }
.fwc.is-ready .fwc__canvas { display: block; }
.fwc.is-ready .fwc__chip { position: absolute; left: 0; top: 0; will-change: transform; cursor: grab; }
.fwc.is-ready .fwc__chip:hover { border-color: rgb(var(--c)); box-shadow: 0 0 22px rgba(var(--c), .55), 0 10px 24px -14px rgba(0, 0, 0, .8); z-index: 2; }
.fwc.is-ready .fwc__chip.is-dragging { cursor: grabbing; z-index: 3; }
.fwc.is-ready .fwc__hint { position: absolute; left: 0; right: 0; bottom: .75rem; margin: 0; pointer-events: none; }
.fwc.is-ready .fwc__core {
  position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-content: center; justify-items: center;
  width: clamp(96px, 7rem + 2vw, 140px); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle at 35% 30%, #EF4444, var(--c-red) 55%, #7F1D1D); color: #fff; text-align: center;
  box-shadow: 0 0 0 10px rgba(185, 28, 28, .18), 0 0 60px rgba(239, 68, 68, .55);
}
.fwc__core-name { font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem); font-weight: 800; letter-spacing: .04em; }
.fwc__core-sub { font-size: .68rem; font-weight: 600; color: rgba(255, 255, 255, .8); }
.fwc.is-ready .fwc__core::before, .fwc.is-ready .fwc__core::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(252, 165, 165, .55); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fwc.is-ready .fwc__core::before, .fwc.is-ready .fwc__core::after { animation: hv-sonar 3.4s cubic-bezier(.2, .6, .3, 1) infinite; }
  .fwc.is-ready .fwc__core::after { animation-delay: 1.7s; }
}
@media (max-width: 639px) {
  .fwc.is-ready .fwc__stage { height: 720px; }
  .fwc__chip { font-size: .72rem; padding: .38rem .65rem; gap: .35rem; }
  .fwc__chip--live { font-size: .78rem; padding: .45rem .75rem; }
  .fwc.is-ready .fwc__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fwc.is-ready .fwc__chip { cursor: default; } .fwc.is-ready .fwc__hint { display: none; } }
html.motion-off .fwc.is-ready .fwc__chip { cursor: default; }
html.motion-off .fwc.is-ready .fwc__hint { display: none; }

/* Expert support cards (GAPZe page) */
.support-grid { list-style: none; display: grid; gap: 1rem; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.support-card { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: 1.5rem; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: #fff; }
.support-card p { color: var(--c-muted); margin-bottom: 0; }
.support-card .icon-badge, .support-card .gapze-badge__free { margin-bottom: .75rem; }
.support-card--free { border-color: var(--c-red); background: var(--c-pale); box-shadow: 0 18px 40px -26px rgba(185, 28, 28, .6); }
.support-card--free .btn { margin-top: auto; }
.support-card--free p { margin-bottom: 1rem; }

/* 30. About: the Anvay guide walking and helping people ----------------------
   partials/about-walk.html + main.js [data-walk]. The finished picture (everyone
   helped, the guide at the AI sign) is the default; .is-playing adds the story. */
.about-hero { padding-top: clamp(1.25rem, .75rem + 1.5vw, 2rem); }
.about-hero__scene { margin-top: 1rem; }
.about-hero__text { max-width: 56rem; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); text-align: center; }
.about-hero__text .eyebrow { justify-content: center; }
.about-hero__text h1 { max-width: none; }
.about-hero__text .lead { margin-inline: auto; margin-bottom: 0; }

.walk-scene { position: relative; overflow: hidden; overflow: clip; border-radius: 28px; border: 1px solid var(--c-border); background: #fff; box-shadow: 0 30px 60px -40px rgba(32, 33, 36, .4); }
.walk-scene__svg { display: block; width: 100%; height: auto; aspect-ratio: 1160 / 420; }
.walk-scene.is-narrow .walk-scene__svg { aspect-ratio: 560 / 420; }

.scene-sun { fill: #FDE2E4; }
.cloud { fill: #fff; stroke: #F6D3D7; stroke-width: 1.5; }
.scene-city { fill: #F7E8EA; }
.scene-ground { fill: #F3F4F6; }
.scene-path { stroke: #D1D5DB; stroke-width: 3; stroke-dasharray: 18 14; stroke-linecap: round; }
.shadow { fill: rgba(32, 33, 36, .12); }

.sign__post { stroke: #9CA3AF; stroke-width: 4; stroke-linecap: round; }
.sign__panel { fill: #fff; stroke: var(--c-border); stroke-width: 1.5; filter: drop-shadow(0 8px 14px rgba(32, 33, 36, .08)); }
.sign__icon { fill: none; stroke: var(--c-red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sign__label { fill: var(--c-ink); font-family: var(--font); font-size: 13px; font-weight: 800; text-anchor: middle; }

.mouth { fill: none; stroke: #202124; stroke-width: 2; stroke-linecap: round; }
.mouth--flat { opacity: 0; }

/* The question bubble: a green tick once helped (default view) */
.ask__bubble { fill: #fff; stroke: #BBF7D0; stroke-width: 2; }
.ask__tail { fill: #fff; }
.ask__q { opacity: 0; fill: var(--c-red); font-family: var(--font); font-size: 22px; font-weight: 800; text-anchor: middle; }
.ask__ok { fill: none; stroke: #16A34A; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ask, .fb__item, .spark, .pp__body, .pp__arm { transform-box: fill-box; transform-origin: center; }
.pp__arm { transform-origin: top center; }

/* Feedback: a few icons resting above each happy person in the still picture */
.fb__item--heart { fill: #F43F5E; }
.fb__item--star { fill: #F59E0B; }
.fb__item--thumb { fill: #2563EB; }
.fb__item--smile circle:first-child { fill: #FACC15; }
.fb__eye { fill: #202124; }
.fb__grin { fill: none; stroke: #202124; stroke-width: 1.6; stroke-linecap: round; }
.fb__item { opacity: 0; }
.fb__item--heart { translate: -26px -18px; opacity: .9; }
.fb__item--star { translate: 24px -30px; opacity: .9; }
.spark { fill: none; stroke: #86EFAC; stroke-width: 2; opacity: 0; }

/* The guide */
.limb { transform-box: fill-box; transform-origin: top center; }
.walker__bob { transform-box: fill-box; }
.arm--front { rotate: -8deg; }

/* Playing: people start with a question, then get help */
.walk-scene.is-playing .station:not(.is-helped) .ask__q { opacity: 1; }
.walk-scene.is-playing .station:not(.is-helped) .ask__ok { opacity: 0; }
.walk-scene.is-playing .station:not(.is-helped) .ask__bubble { stroke: #FBD5D8; }
.walk-scene.is-playing .station:not(.is-helped) .mouth--smile { opacity: 0; }
.walk-scene.is-playing .station:not(.is-helped) .mouth--flat { opacity: 1; }
.walk-scene.is-playing .fb__item { opacity: 0; translate: 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .walk-scene.is-playing .station:not(.is-helped) .ask { animation: ask-bob 1.6s ease-in-out infinite alternate; }
  .walk-scene.is-playing .station.is-helped .ask { animation: ask-pop .55s var(--spring); }
  .walk-scene.is-playing .station.is-cheering .pp__body { animation: pp-hop .42s ease-out 3 alternate; }
  .walk-scene.is-playing .station.is-cheering .pp__arm { animation: pp-wave .4s ease-in-out .1s 4 alternate; }
  .walk-scene.is-playing .station.is-cheering .spark { animation: spark .9s ease-out; }
  .walk-scene.is-playing .station.is-cheering .fb__item { animation: fb-fly 2.2s cubic-bezier(.2, .7, .3, 1) both; }
  .walk-scene.is-playing .station.is-cheering .fb__item--heart { --fx: -38px; animation-delay: .1s; }
  .walk-scene.is-playing .station.is-cheering .fb__item--star { --fx: 30px; animation-delay: .35s; }
  .walk-scene.is-playing .station.is-cheering .fb__item--thumb { --fx: -8px; animation-delay: .6s; }
  .walk-scene.is-playing .station.is-cheering .fb__item--smile { --fx: 46px; animation-delay: .85s; }

  .walker.is-walking .walker__bob { animation: walk-bob .29s ease-in-out infinite alternate; }
  .walker.is-walking .leg--front { animation: leg-swing .58s ease-in-out infinite alternate; }
  .walker.is-walking .leg--back { animation: leg-swing .58s ease-in-out -.29s infinite alternate; }
  .walker.is-walking .arm--front { animation: arm-swing .58s ease-in-out -.29s infinite alternate; }
  .walker.is-walking .arm--back { animation: arm-swing .58s ease-in-out infinite alternate; }
  .walker .arm--front { transition: rotate .35s var(--spring); }
  .walker.is-helping .arm--front { rotate: -115deg; animation: help-gesture .5s ease-in-out infinite alternate; }
  .walker.is-helping .walker__mouth { animation: talk .22s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }

  .walk-scene.is-live .cloud--1 { animation: cloud-drift 28s ease-in-out infinite alternate; }
  .walk-scene.is-live .cloud--2 { animation: cloud-drift 34s ease-in-out -8s infinite alternate-reverse; }
  .walk-scene.is-live .cloud--3 { animation: cloud-drift 30s ease-in-out -14s infinite alternate; }
}
@keyframes leg-swing  { from { rotate: 24deg; } to { rotate: -24deg; } }
@keyframes arm-swing  { from { rotate: 26deg; } to { rotate: -26deg; } }
@keyframes walk-bob   { to { translate: 0 -3px; } }
@keyframes help-gesture { from { rotate: -105deg; } to { rotate: -130deg; } }
@keyframes talk       { to { scale: 1 .4; } }
@keyframes ask-bob    { to { translate: 0 -5px; } }
@keyframes ask-pop    { 0% { scale: .5; } 60% { scale: 1.2; } 100% { scale: 1; } }
@keyframes pp-hop     { to { translate: 0 -12px; } }
@keyframes pp-wave    { from { rotate: 0deg; } to { rotate: 150deg; } }
@keyframes spark      { 0% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 1.6; } }
@keyframes fb-fly     { 0% { opacity: 0; translate: 0 10px; scale: .4; } 15% { opacity: 1; scale: 1.15; } 30% { scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: var(--fx, 0) -120px; scale: .9; } }
@keyframes cloud-drift { to { translate: 60px 0; } }

/* 31. About: the matrix opening --------------------------------------------
   Red code rain, the particle "A" and four pillar nodes it resolves one by one
   (assets/js/matrix.js). Dark stage to match the home page particle hero. */
.about-hero--matrix {
  position: relative; overflow: hidden; overflow: clip; color: #fff; border-bottom: 0;
  padding-block: clamp(1rem, .5rem + 1.5vw, 1.75rem) clamp(3rem, 2rem + 4vw, 5rem);
  background: radial-gradient(60% 55% at 50% 40%, #2A1416 0%, var(--c-ink) 60%, #111215 100%);
}
.about-hero--matrix .breadcrumb, .about-hero--matrix .breadcrumb a { color: rgba(255, 255, 255, .65); }
.about-hero--matrix .breadcrumb a:hover { color: #fff; }
.matrix-stage { position: relative; }
.matrix-stage__canvas { display: block; width: 100%; height: min(clamp(420px, 46vw, 600px), 66svh); touch-action: pan-y; cursor: crosshair; }
@media (max-width: 759px) { .matrix-stage__canvas { height: 540px; } .matrix-stage__hint { display: none; } }
.matrix-stage__hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-size: .8125rem; color: rgba(255, 255, 255, .5); }
.about-hero--matrix .eyebrow { color: var(--c-red-on-dark); }
.about-hero--matrix .eyebrow::before { background: var(--c-red-on-dark); }
.about-hero--matrix h1 { color: #fff; }
.about-hero--matrix .lead { color: rgba(255, 255, 255, .74); }
.about-hero--matrix :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .matrix-stage__hint { display: none; } .matrix-stage__canvas { cursor: default; } }
html.motion-off .matrix-stage__hint { display: none; }
html.motion-off .matrix-stage__canvas { cursor: default; }