/* ============================================================
   Gradiante Creatives: site styles
   Layout and sizes follow the reference design. Every color,
   gradient, glow position and font family is a token; raw colors
   may only appear inside the :root token blocks below.
   ============================================================ */

/* Local stand-in for Sora while it loads, scaled to Sora's width and
   line metrics so labels and the nav don't shift when it swaps in. */
@font-face {
  font-family: "Sora Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 111.3%;
  ascent-override: 87.2%;
  descent-override: 26.1%;
  line-gap-override: 0%;
}

/* ---------- Tokens: shared ---------- */
:root {
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-label: "Sora", "Sora Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tracking-label: -.01em;
  --eyebrow-mark-space: .4em; /* between an eyebrow's "//" and its text */

  --container: 1320px;
  --pad-x: 40px;
  /* Spacing scale: desktop values unchanged, phones tighten to the references' 56px */
  --section-y: clamp(56px, 6.7vw, 96px);
  --section-y-lg: clamp(56px, 8.3vw, 120px);
  --section-y-md: clamp(56px, 5.6vw, 80px);
  --section-y-sm: clamp(56px, 5vw, 72px);
  --section-y-xs: clamp(48px, 4.5vw, 64px);
  --page-hero-top: clamp(56px, 6.7vw, 96px);
  --page-hero-bottom: clamp(40px, 3.9vw, 56px);
  /* Home hero: sized by viewport height as well as width so it fits one screen */
  /* Team pop-out photos: the box starts this far down the frame; the cut-out
     has --pop-headroom extra canvas on top (CUTOUT_HEADROOM in
     scripts/build_team_photos.py) and rests --pop-lift low until hovered. */
  --pop-top: .16;
  --pop-headroom: .12;
  --pop-lift: 3px;
  --hero-pad-top: 56px;     /* nav to the eyebrow pill */
  --hero-pad-bottom: 104px; /* last CTA to the client band: the same at every window size */
  --hero-pill-space: clamp(18px, 4.4svh, 48px); /* extra space under the eyebrow pill */
  --hero-gap: clamp(14px, 2.6svh, 28px);
  --hero-art-size: min(900px, 118svh);
  --hero-art-y: 55%;
  --clients-pad-y: clamp(22px, 2.6vw, 38px);
  --clients-label-gap: clamp(14px, 1.6vw, 22px);
  --clients-fade: linear-gradient(to bottom, transparent, black 28%, black 72%, transparent);
  --clients-gap: clamp(40px, 4.4vw, 64px);
  --logo-h: 52px; /* per-logo "scale" in the seed evens out visual weight */
  --marquee-duration: 48s; /* one full loop of the client marquee: lower is faster */
  --marquee-fade: 8%;
  --marquee-bleed: 16px;
  --stack-gap: 40px;
  --grid-gap: 20px;
  --grid-gap-tight: 16px;
  --nav-link-gap: 4px;
  --nav-h: 72px;
  --brand-logo-h: 36px; /* the G mark */
  --footer-logo-h: 28px;
  --nav-height: var(--nav-h);
  --gutter: var(--pad-x);

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-card: 18px;
  --r-pill: 999px;
  --r-btn: 12px; /* buttons: a little softer than cards' inner elements, not pills */
  --radius-sm: var(--r-xs);
  --radius: var(--r-md);
  --radius-lg: var(--r-card);
  --radius-pill: var(--r-pill);

  /* Fluid type scale (Stage 1 proposal) */
  --fs-hero: clamp(40px, 5.8vw, 86px);
  --fs-hero-fit: clamp(40px, min(5.8vw, 9.6svh), 86px);
  --fs-hero-subhead: clamp(19px, min(1.9vw, 3.2svh), 26px);
  --fs-hero-body: clamp(15.5px, min(1.3vw, 2.3svh), 18px);
  --fs-client-word: clamp(20px, 1.8vw, 24px);
  --fs-h1: clamp(34px, 3.8vw, 52px); /* every subpage h1 */
  --fs-h2: clamp(30px, 3.4vw, 46px);
  --fs-h2-md: clamp(28px, 2.9vw, 40px);
  --fs-h2-sm: clamp(26px, 2.6vw, 36px);
  --fs-h3: clamp(24px, 2.2vw, 30px);
  --fs-cta: clamp(36px, 4.2vw, 60px);
  --fs-statement: clamp(24px, 2.4vw, 34px);
  --fs-lead: 18px;
  --fs-body: 16px;
  --lh-lead: 1.65;
  --lh-body: 1.55;
  --fs-mono-nav: 13px;
  --fs-mono-label: 12px;
  --fs-eyebrow: clamp(15px, 1.15vw, 17px);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Motion tokens */
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
  --dur-hover: .35s;
  --dur-sweep: .9s;
  --dur-text-shift: 8s;
  --lift-y: -4px;
  --proof-lift-y: -3px;
  --proof-hover-scale: 1.02;
  --dur-sweep-reveal: 1.1s;
  --card-edge-inset: 12%;
  /* Scroll reveals (played once as each block enters the viewport) */
  --dur-reveal: .8s;
  --reveal-y: 28px;
  --reveal-x: 56px;
  --reveal-scale: .98;
  --reveal-stagger: 90ms;
  /* Hero load-in (RapidVue order and timing) */
  --dur-hero-in: .75s;
  --dur-hero-in-line: .9s;
  --hero-in-y: 22px;
  --hero-in-line-y: .42em;
  --hero-in-start: 0ms;
  --hero-in-step: 130ms;
  /* Hero leaves as the page scrolls */
  --hero-exit-y: -8vh;
  --hero-exit-scale: .965;
  --hero-exit-range: 0 85vh;
  /* Continuous ambient motion */
  --aurora-a-duration: 22s;
  --aurora-b-duration: 27s;
  --orbit-inner-duration: 38s;
  --orbit-outer-duration: 64s;
  --cta-orbit-duration: 16s;
  --card-border-hover-static: .6;
  --ambient-drift-x: 3%;
  --ambient-drift-y: -2%;
  --ambient-drift-scale: 1.06;
  --ambient-drift-duration: 24s;

  /* Hero lightning (image coords 305,315 of 612 = bolt meeting point) */
  --bolt-core-x: 49.8%;
  --bolt-core-y: 51.5%;
  --bolt-core-size: 13%;
  --bolt-mask: radial-gradient(ellipse 55% 55% at 50% 50%, black 30%, transparent 72%);
  --bolt-glow-filter: blur(16px) brightness(1.5) contrast(1.7) saturate(1.4);
  --bolt-flash-filter: brightness(1.7) contrast(1.9) saturate(1.3);
  --bolt-glow-min: .16;
  --bolt-glow-max: .5;
  --bolt-pulse-duration: 5.2s;
  --bolt-flicker-duration: 7.3s;
  --hl-streak-h: 9%;
  --hl-streak-blur: 14px;
  --hl-shimmer-duration: 6.5s;
  --hero-scrim-shape: ellipse 46% 42% at 50% 47%;
  --hero-scrim-strip-start: 82%;
  --hero-scrim-strip-full: 88%;
  --hero-scrim: radial-gradient(var(--hero-scrim-shape), var(--hero-scrim-color) 0%, var(--hero-scrim-color) 55%, transparent 90%),
                linear-gradient(to bottom, transparent var(--hero-scrim-strip-start), var(--hero-scrim-strip) var(--hero-scrim-strip-full));

  /* Glow placement (shared by both themes) */
  --glow-hero-a-pos: 50% 55%;
  --glow-hero-a-size: 50% 45%;
  --glow-hero-b-pos: 70% 30%;
  --glow-hero-b-size: 35% 35%;
  --glow-sub-pos: 80% 0%;
  --glow-sub-size: 50% 50%;
  --glow-sub-left-pos: 20% 0%;
  --glow-inquiry-a-pos: 70% 0%;
  --glow-inquiry-a-size: 50% 60%;
  --glow-inquiry-b-pos: 20% 100%;
  --glow-inquiry-b-size: 30% 40%;
  --glow-lifecycle-pos: 50% 0%;
  --glow-lifecycle-size: 50% 40%;
  --glow-left-pos: 0% 50%;
  --glow-right-pos: 100% 50%;
  --glow-side-size: 40% 50%;
  --glow-cta-a-pos: 50% 100%;
  --glow-cta-a-size: 50% 60%;
  --glow-cta-b-pos: 80% 100%;
  --glow-cta-b-size: 30% 40%;
  --glow-card-pos: 100% 0%;
  --glow-card-size: 70% 80%;
  --glow-panel-pos: 0% 0%;
  --glow-panel-size: 80% 100%;
  --ambient-a-pos: 12% 18%;
  --ambient-b-pos: 88% 42%;
  --ambient-c-pos: 50% 100%;
  --ambient-size: 60vmax;
  --ambient-blur: 90px;
  --tone-duration: .9s;
  --persona-step: 70vh;
  --node-min: 152px;
  --connector-w: 14px;
  --flow-step: 1.6s; /* how long each persona step holds the highlight */
  --personas-tabs-narrow: 280px;
  --personas-stage-top: clamp(40px, 7vh, 88px);
  --personas-pin-min-top: 48px; /* pinned content never sits closer to the nav */
  --story-figure-max-h: 520px;
  --story-figure-ratio: 16 / 9;
  --moment-col: calc((100% - 24px) / 3); /* three columns in view on desktop */
  --moment-h: clamp(170px, 15vw, 230px);
  --moments-fade: 48px;
  --moment-tint: linear-gradient(to top, rgba(76, 141, 255, .18), rgba(155, 107, 255, .08) 35%, transparent 60%);
  --persona-fade: .35s;
  --persona-fade-out: .18s;

  /* Hero glow geometry (light theme without media) */
  --media-glow-a-pos: 38% 42%;
  --media-glow-b-pos: 50% 50%;
  --media-glow-c-pos: 62% 58%;
  --media-glow-size: 42% 42%;
  --media-glow-blur: 40px;
}

/* ---------- Tokens: dark (default) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Bolt palette */
  --c-blue: #4C8DFF;
  --c-blue-soft: #8DB8FF;
  --c-violet: #9B6BFF;
  --c-violet-soft: #BDA4FF;
  --c-pink: #FF4D6A;
  --c-pink-soft: #FF7A90;

  /* Base: the reference's near-black, lifted to a deep violet-navy */
  --bg: #0B0A18;
  --bg-deep: #08070F;
  --surface: #13121F;
  --surface-input: #0B0A18;
  --nav-bg: rgba(11, 10, 24, .78);
  --glass: rgba(11, 10, 24, .6);
  --float-bg: rgba(19, 18, 31, .85);

  /* Text */
  --heading: #FFFFFF;
  --ink: #F2F1F7;
  --ink-2: #C9C8D6;
  --muted: #B9B8CA;
  --muted-2: #9C9BB0;
  --dim: #8C8BA3;
  --faint: #76758E;
  --fainter: #6E6D86;
  --chip-ink: #D7D6E4;
  --text-blue: var(--c-blue-soft);
  --text-pink: var(--c-pink-soft);
  --footer-heading: var(--c-violet-soft);
  --eyebrow-mark: var(--c-pink-soft);
  --eyebrow-mark-alt: var(--c-blue-soft);

  /* Lines and fills */
  --line: rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .08);
  --line-3: rgba(255, 255, 255, .1);
  --line-4: rgba(255, 255, 255, .14);
  --line-5: rgba(255, 255, 255, .18);
  --line-6: rgba(255, 255, 255, .4);
  --fill-1: rgba(255, 255, 255, .03);
  --fill-2: rgba(255, 255, 255, .05);
  --fill-3: rgba(255, 255, 255, .06);
  --grid-line: rgba(255, 255, 255, .035);
  --orbit-1: rgba(255, 255, 255, .07);
  --orbit-2: rgba(255, 255, 255, .045);

  /* Buttons */
  --btn-bg: #F2F1F7;
  --btn-ink: #05050B;
  --btn-glow: rgba(76, 141, 255, .4);
  --btn-primary-border: rgba(0, 0, 0, .55);
  --btn-ghost-hover: rgba(255, 255, 255, .5);
  --badge-ink: #05050B;

  /* Tints */
  --tint-blue: rgba(76, 141, 255, .16);
  --tint-blue-soft: rgba(76, 141, 255, .1);
  --tint-blue-card: rgba(76, 141, 255, .14);
  --tint-blue-panel: rgba(76, 141, 255, .08);
  --tint-blue-strong: rgba(76, 141, 255, .22);
  --tint-blue-cta: rgba(76, 141, 255, .2);
  --tint-blue-12: rgba(76, 141, 255, .12);
  --focus-ring: rgba(76, 141, 255, .2);
  --tint-pink-12: rgba(255, 77, 106, .12);
  --grad-avatar: linear-gradient(135deg, rgba(76, 141, 255, .5), rgba(255, 77, 106, .5));
  --grad-photo: radial-gradient(70% 55% at 20% 0%, rgba(255, 255, 255, .16), transparent 70%),
                linear-gradient(45deg, rgba(76, 141, 255, .27), rgba(155, 107, 255, .25) 50%, rgba(255, 77, 106, .23));
  --pop-shadow: rgba(4, 3, 14, .45);
  --on-avatar: #FFFFFF;
  --caption-shade: rgba(5, 5, 11, .75);
  --tint-pink: rgba(255, 77, 106, .12);
  --tint-pink-soft: rgba(255, 77, 106, .1);
  --tint-pink-card: rgba(255, 77, 106, .14);
  --tint-pink-strong: rgba(255, 77, 106, .18);
  --icon-blue-bg: rgba(76, 141, 255, .15);
  --icon-pink-bg: rgba(255, 77, 106, .15);
  --icon-white-bg: rgba(242, 241, 247, .1);
  --node-blue: rgba(76, 141, 255, .9);
  --node-pink: rgba(255, 77, 106, .9);
  --node-white: rgba(242, 241, 247, .9);
  --node-ring: rgba(76, 141, 255, .12);
  --node-glow: 0 0 18px rgba(76, 141, 255, .35);
  --connector-pulse: linear-gradient(90deg, transparent, rgba(189, 164, 255, .95), rgba(255, 122, 144, .9));
  --hover-border: rgba(76, 141, 255, .5);
  --hover-border-soft: rgba(141, 184, 255, .28);
  --clients-bg: linear-gradient(90deg, rgba(76, 141, 255, .07), rgba(155, 107, 255, .09) 50%, rgba(255, 77, 106, .07));
  --logo-ink: #9C9BB0;
  --orbit-dot: rgba(141, 184, 255, .85);
  --orbit-dot-glow: rgba(76, 141, 255, .6);
  --orbit-dot-2: rgba(255, 122, 144, .75);
  --aurora-a: rgba(76, 141, 255, .16);
  --aurora-b: rgba(255, 77, 106, .11);
  --cta-orbit-glow: rgba(155, 107, 255, .22);
  --shadow-menu: 0 30px 80px rgba(0, 0, 0, .6);
  --shadow-float: 0 20px 50px rgba(0, 0, 0, .5);
  --text-shadow-hero: 0 10px 60px rgba(5, 5, 11, .9);
  --text-shadow-body: 0 2px 20px rgba(5, 5, 11, .9);

  /* Gradients */
  --grad-text: linear-gradient(90deg, var(--c-blue-soft) 0%, var(--c-violet-soft) 50%, var(--c-pink-soft) 100%);
  --grad-text-loop: linear-gradient(90deg, var(--c-blue-soft), var(--c-violet-soft), var(--c-pink-soft), var(--c-violet-soft), var(--c-blue-soft));
  --hover-glow: 0 18px 44px -20px rgba(76, 141, 255, .45);
  --sweep-hi: rgba(189, 164, 255, .95);
  --card-edge: linear-gradient(90deg, transparent, rgba(141, 184, 255, .5) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 122, 144, .5) 70%, transparent);
  --grad-mark: linear-gradient(135deg, var(--c-blue) 0%, var(--c-violet) 50%, var(--c-pink) 100%);
  --grad-connector: linear-gradient(90deg, var(--c-blue), var(--c-violet), var(--c-pink));
  --grad-border: linear-gradient(135deg, rgba(141, 184, 255, .7) 0%, rgba(155, 107, 255, .45) 45%, rgba(255, 122, 144, .7) 100%);
  --card-border-rest: .28;
  --card-border-hover: 1;
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* Scroll tones: three glows per tone */
  --tone-blue-a: rgba(76, 141, 255, .16);
  --tone-blue-b: rgba(155, 107, 255, .08);
  --tone-blue-c: rgba(255, 77, 106, .06);
  --tone-violet-a: rgba(155, 107, 255, .16);
  --tone-violet-b: rgba(76, 141, 255, .09);
  --tone-violet-c: rgba(255, 77, 106, .08);
  --tone-ember-a: rgba(255, 77, 106, .14);
  --tone-ember-b: rgba(155, 107, 255, .1);
  --tone-ember-c: rgba(255, 122, 144, .1);

  /* Footer horizon */
  --horizon-a: rgba(255, 77, 106, .16);
  --horizon-b: rgba(155, 107, 255, .14);
  --horizon-c: rgba(76, 141, 255, .1);

  /* Hero media blending */
  --media-blend: screen;
  /* Contrast first: it crushes the checkerboard baked into the photo's darks. */
  --media-filter: brightness(1.05) contrast(1.55) saturate(1.25);
  --media-opacity: 1;
  --bolt-core-shade: rgba(11, 10, 24, .5);
  /* .72 keeps hero copy AA at peak flash (body 4.8:1, headline 8.2:1, subhead 4.0:1). */
  --hero-scrim-color: rgba(11, 10, 24, .72);
  --hero-scrim-strip: rgba(11, 10, 24, .88);

  --focus: #8DB8FF;
  --success: #5BD69B;
  --danger: #FF8A8A;
  --whatsapp: #25D366;
  --on-whatsapp: #FFFFFF;
}

/* ---------- Tokens: light (derived from dark) ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --c-blue: #4C8DFF;
  --c-blue-soft: #8DB8FF;
  --c-violet: #9B6BFF;
  --c-violet-soft: #BDA4FF;
  --c-pink: #FF4D6A;
  --c-pink-soft: #FF7A90;

  --bg: #F6F6FB;
  --bg-deep: #ECEBF5;
  --surface: #FFFFFF;
  --surface-input: #F6F6FB;
  --nav-bg: rgba(246, 246, 251, .82);
  --glass: rgba(255, 255, 255, .7);
  --float-bg: rgba(255, 255, 255, .9);

  --heading: #0B0A18;
  --ink: #15142A;
  --ink-2: #3F3E55;
  --muted: #4E4D66;
  --muted-2: #5E5D75;
  --dim: #63627A;
  --faint: #7A798F;
  --fainter: #7A798F;
  --chip-ink: #2C2B42;
  --text-blue: #2F64D6;
  --text-pink: #BE2A47;
  --footer-heading: #6A3FD6;
  --eyebrow-mark: #B8213F;
  --eyebrow-mark-alt: #2556C4;

  --line: rgba(11, 10, 24, .08);
  --line-2: rgba(11, 10, 24, .09);
  --line-3: rgba(11, 10, 24, .1);
  --line-4: rgba(11, 10, 24, .14);
  --line-5: rgba(11, 10, 24, .18);
  --line-6: rgba(11, 10, 24, .4);
  --fill-1: rgba(11, 10, 24, .025);
  --fill-2: rgba(11, 10, 24, .04);
  --fill-3: rgba(11, 10, 24, .05);
  --grid-line: rgba(11, 10, 24, .045);
  --orbit-1: rgba(11, 10, 24, .08);
  --orbit-2: rgba(11, 10, 24, .05);

  --btn-bg: #0B0A18;
  --btn-ink: #FFFFFF;
  --btn-glow: rgba(76, 141, 255, .35);
  --btn-primary-border: rgba(255, 255, 255, .45);
  --btn-ghost-hover: rgba(11, 10, 24, .45);
  --badge-ink: #FFFFFF;

  --tint-blue: rgba(76, 141, 255, .14);
  --tint-blue-soft: rgba(76, 141, 255, .08);
  --tint-blue-card: rgba(76, 141, 255, .1);
  --tint-blue-panel: rgba(76, 141, 255, .06);
  --tint-blue-strong: rgba(76, 141, 255, .16);
  --tint-blue-cta: rgba(76, 141, 255, .14);
  --tint-blue-12: rgba(76, 141, 255, .08);
  --focus-ring: rgba(76, 141, 255, .25);
  --tint-pink-12: rgba(255, 77, 106, .08);
  --grad-avatar: linear-gradient(135deg, rgba(76, 141, 255, .85), rgba(255, 77, 106, .85));
  --grad-photo: radial-gradient(70% 55% at 20% 0%, rgba(255, 255, 255, .5), transparent 70%),
                linear-gradient(45deg, rgba(76, 141, 255, .27), rgba(155, 107, 255, .25) 50%, rgba(255, 77, 106, .23));
  --pop-shadow: rgba(40, 30, 90, .22);
  --on-avatar: #FFFFFF;
  --caption-shade: rgba(11, 10, 24, .7);
  --tint-pink: rgba(255, 77, 106, .1);
  --tint-pink-soft: rgba(255, 77, 106, .07);
  --tint-pink-card: rgba(255, 77, 106, .09);
  --tint-pink-strong: rgba(255, 77, 106, .13);
  --icon-blue-bg: rgba(76, 141, 255, .14);
  --icon-pink-bg: rgba(255, 77, 106, .13);
  --icon-white-bg: rgba(11, 10, 24, .06);
  --node-blue: rgba(76, 141, 255, .95);
  --node-pink: rgba(255, 77, 106, .95);
  --node-white: rgba(11, 10, 24, .85);
  --node-ring: rgba(76, 141, 255, .16);
  --node-glow: 0 0 18px rgba(76, 141, 255, .25);
  --connector-pulse: linear-gradient(90deg, transparent, rgba(106, 59, 217, .9), rgba(184, 33, 63, .85));
  --hover-border: rgba(76, 141, 255, .55);
  --hover-border-soft: rgba(47, 100, 214, .25);
  --clients-bg: linear-gradient(90deg, rgba(76, 141, 255, .06), rgba(155, 107, 255, .07) 50%, rgba(255, 77, 106, .05));
  --logo-ink: #5E5D75;
  --orbit-dot: rgba(47, 100, 214, .6);
  --orbit-dot-glow: rgba(76, 141, 255, .35);
  --orbit-dot-2: rgba(210, 48, 79, .5);
  --aurora-a: rgba(76, 141, 255, .11);
  --aurora-b: rgba(255, 77, 106, .07);
  --cta-orbit-glow: rgba(155, 107, 255, .14);
  --shadow-menu: 0 30px 70px -20px rgba(11, 10, 24, .25);
  --shadow-float: 0 20px 40px -12px rgba(11, 10, 24, .22);
  --text-shadow-hero: 0 10px 60px rgba(246, 246, 251, .9);
  --text-shadow-body: 0 2px 20px rgba(246, 246, 251, .9);

  /* Deep enough for AA (5:1+) even over the light hero washes and at small sizes. */
  --grad-text: linear-gradient(90deg, #2556C4 0%, #6A3BD9 50%, #B8213F 100%);
  --grad-text-loop: linear-gradient(90deg, #2556C4, #6A3BD9, #B8213F, #6A3BD9, #2556C4);
  --hover-glow: 0 18px 40px -22px rgba(47, 100, 214, .45);
  --sweep-hi: rgba(123, 75, 234, .9);
  --card-edge: linear-gradient(90deg, transparent, rgba(47, 100, 214, .45) 30%, rgba(123, 75, 234, .5) 50%, rgba(210, 48, 79, .45) 70%, transparent);
  --grad-mark: linear-gradient(135deg, var(--c-blue) 0%, var(--c-violet) 50%, var(--c-pink) 100%);
  --grad-connector: linear-gradient(90deg, var(--c-blue), var(--c-violet), var(--c-pink));
  --grad-border: linear-gradient(135deg, rgba(76, 141, 255, .6) 0%, rgba(155, 107, 255, .4) 45%, rgba(255, 77, 106, .6) 100%);
  --card-border-rest: .35;
  --card-border-hover: 1;
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, .9);

  --tone-blue-a: rgba(76, 141, 255, .14);
  --tone-blue-b: rgba(155, 107, 255, .07);
  --tone-blue-c: rgba(255, 77, 106, .05);
  --tone-violet-a: rgba(155, 107, 255, .13);
  --tone-violet-b: rgba(76, 141, 255, .08);
  --tone-violet-c: rgba(255, 77, 106, .06);
  --tone-ember-a: rgba(255, 77, 106, .11);
  --tone-ember-b: rgba(155, 107, 255, .08);
  --tone-ember-c: rgba(255, 122, 144, .08);

  --horizon-a: rgba(255, 77, 106, .12);
  --horizon-b: rgba(155, 107, 255, .1);
  --horizon-c: rgba(76, 141, 255, .08);

  --media-blend: normal;
  --media-filter: none;
  --media-opacity: 1;
  --bolt-core-shade: transparent;
  /* Light hero composition (replaces the photo) */
  --hl-blue: rgba(76, 141, 255, .26);
  --hl-violet: rgba(155, 107, 255, .22);
  --hl-pink: rgba(255, 77, 106, .18);
  --hl-warm: rgba(255, 160, 122, .2);
  --hl-streak: linear-gradient(90deg, transparent 4%, rgba(76, 141, 255, .5) 24%, rgba(155, 107, 255, .5) 50%, rgba(255, 77, 106, .45) 76%, transparent 96%);
  --hl-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  --hl-core-a: rgba(255, 255, 255, .9);
  --hl-core-b: rgba(155, 107, 255, .28);
  --hl-core-min: .55;
  --hl-core-max: .9;
  --hero-scrim-color: rgba(246, 246, 251, .8);
  --hero-scrim-strip: rgba(246, 246, 251, .88);

  /* Hero glow shown in place of media when there is no light-theme source */
  --media-glow-a: rgba(76, 141, 255, .20);
  --media-glow-b: rgba(155, 107, 255, .16);
  --media-glow-c: rgba(255, 77, 106, .14);

  --focus: #2F64D6;
  --success: #15803D;
  --danger: #B91C1C;
  --whatsapp: #25D366;
  --on-whatsapp: #FFFFFF;
}

/* ---------- Scroll tones ---------- */
@property --amb-a { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --amb-b { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --amb-c { syntax: "<color>"; inherits: true; initial-value: transparent; }

html, html[data-tone="blue"] { --amb-a: var(--tone-blue-a); --amb-b: var(--tone-blue-b); --amb-c: var(--tone-blue-c); }
html[data-tone="violet"] { --amb-a: var(--tone-violet-a); --amb-b: var(--tone-violet-b); --amb-c: var(--tone-violet-c); }
html[data-tone="ember"] { --amb-a: var(--tone-ember-a); --amb-b: var(--tone-ember-b); --amb-c: var(--tone-ember-c); }
html { transition: --amb-a var(--tone-duration) ease, --amb-b var(--tone-duration) ease, --amb-c var(--tone-duration) ease; }

.ambient {
  position: fixed;
  inset: -10vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(var(--ambient-size) circle at var(--ambient-a-pos), var(--amb-a), transparent 60%),
    radial-gradient(var(--ambient-size) circle at var(--ambient-b-pos), var(--amb-b), transparent 60%),
    radial-gradient(var(--ambient-size) circle at var(--ambient-c-pos), var(--amb-c), transparent 60%);
  filter: blur(var(--ambient-blur));
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1 0 auto; position: relative; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--heading); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); }
p { margin: 0; }
ul { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-4);
}
.skip-link:focus { top: 12px; }
/* A separator between two labels that sit apart visually (name and tag):
   takes no space, but keeps them apart in copied text, reader modes and
   anything else that reads the page as plain text. */
.text-sep { font-size: 0; letter-spacing: 0; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Layout: full-bleed band with a 1320px inner column */
.band { position: relative; width: 100%; padding: 0 var(--pad-x); }
.band--rule { border-top: 1px solid var(--line); }
.band--clip { overflow: hidden; overflow: clip; } /* clip, not hidden: keeps scroll-driven reveals tied to the page */
.band__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: var(--section-y) 0; }
.container { width: 100%; max-width: calc(var(--container) + var(--pad-x) * 2); margin: 0 auto; padding: 0 var(--pad-x); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; }
.wrap { flex-wrap: wrap; }
.center { align-items: center; text-align: center; }
.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: var(--grid-gap-tight); }

/* Section washes (reference glows, as tokens) */
.wash { position: absolute; inset: 0; pointer-events: none; }
.wash--hero {
  background:
    radial-gradient(var(--glow-hero-a-size) at var(--glow-hero-a-pos), var(--tint-blue), transparent 70%),
    radial-gradient(var(--glow-hero-b-size) at var(--glow-hero-b-pos), var(--tint-pink), transparent 70%);
}
.wash--sub { background: radial-gradient(var(--glow-sub-size) at var(--glow-sub-pos), var(--tint-blue), transparent 70%); }
.wash--lifecycle { background: radial-gradient(var(--glow-lifecycle-size) at var(--glow-lifecycle-pos), var(--tint-blue-soft), transparent 70%); }
.wash--left-pink { background: radial-gradient(var(--glow-side-size) at var(--glow-left-pos), var(--tint-pink-soft), transparent 70%); }
.wash--right-blue { background: radial-gradient(var(--glow-side-size) at var(--glow-right-pos), var(--tint-blue-soft), transparent 70%); }
.wash--cta {
  background:
    radial-gradient(var(--glow-cta-a-size) at var(--glow-cta-a-pos), var(--tint-blue-strong), transparent 70%),
    radial-gradient(var(--glow-cta-b-size) at var(--glow-cta-b-pos), var(--tint-pink-strong), transparent 70%);
}
.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, black, transparent);
  mask-image: radial-gradient(60% 60% at 50% 50%, black, transparent);
}

/* ---------- Type ---------- */
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-blue); }
.eyebrow--pink { color: var(--text-pink); }
.eyebrow--plain { color: var(--dim); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--muted); }
.h-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--heading);
  text-shadow: var(--text-shadow-hero);
}
.h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1; letter-spacing: -.04em; color: var(--heading); }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.035em; color: var(--heading); }
.h-cta { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-cta); line-height: 1.02; letter-spacing: -.04em; color: var(--heading); }
.title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; color: var(--heading); }
.hl {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-blue { color: var(--text-blue); }
.text-pink { color: var(--text-pink); }
.link-arrow { font-size: 14px; font-weight: 700; color: var(--text-blue); }
.link-arrow:hover { color: var(--text-blue); }

/* ---------- Buttons ---------- */
.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  padding: 14px 24px;
  border-radius: var(--r-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; border: 1px solid transparent; } /* same height as .btn-ghost */
.btn-primary:hover { color: var(--btn-ink); transform: translateY(-1px); box-shadow: 0 12px 40px var(--btn-glow); }
/* Book a demo: a thin ring drawn inside the pill so its size is unchanged */
.btn-demo { box-shadow: inset 0 0 0 1px var(--btn-primary-border); }
.btn-demo:hover { box-shadow: inset 0 0 0 1px var(--btn-primary-border), 0 12px 40px var(--btn-glow); }
.btn-ghost { background: var(--fill-1); color: var(--ink); font-weight: 600; border: 1px solid var(--line-5); }
.btn-ghost:hover { color: var(--ink); border-color: var(--btn-ghost-hover); background: var(--fill-3); }
.btn-glass { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn-primary svg, .btn-ghost svg { width: 16px; height: 16px; }

/* ---------- Cards (gradient border + corner tint) ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  box-shadow: var(--card-highlight);
  transition: border-color var(--dur-hover) ease, transform var(--dur-hover) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium);
}
/* Gradient border; a highlight sweeps around it on reveal and on hover. */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--sweep-angle), transparent 0deg, var(--sweep-color) 40deg, transparent 90deg), var(--grad-border);
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black, black) content-box exclude, linear-gradient(black, black);
  opacity: var(--card-border-rest);
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
/* Static gradient edge along the top, as in the references. */
.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--card-edge-inset);
  right: var(--card-edge-inset);
  height: 1px;
  background: var(--card-edge);
  pointer-events: none;
}
/* Lift and glow only for cards you can click. */
a.card:hover, a.card:focus-visible, .card--hover:hover {
  border-color: var(--hover-border);
  transform: translateY(var(--lift-y));
  box-shadow: var(--card-highlight), var(--hover-glow);
}
a.card:hover::before, a.card:focus-visible::before, .card--hover:hover::before { opacity: var(--card-border-hover); }
.card > * { position: relative; }

@property --sweep-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --sweep-color { syntax: "<color>"; inherits: false; initial-value: transparent; }
/* Reveal: the gradient border lights up and settles. Opacity only, so the
   compositor runs it; the travelling arc is kept for hover (one card at a time). */
@keyframes card-sweep {
  0%, 100% { opacity: var(--card-border-rest); }
  35% { opacity: var(--card-border-hover); }
}
@keyframes card-sweep-hover {
  from { --sweep-angle: 0deg; --sweep-color: var(--sweep-hi); }
  to { --sweep-angle: 360deg; --sweep-color: transparent; }
}
/* Reveal glow plays once per card, on a timer, when site.js marks it as seen.
   (A scroll-linked sweep repainted every card on every scroll frame.) No fill
   mode: once it ends, the hover rules own the border's opacity again. */
@media (prefers-reduced-motion: no-preference) {
  .card.is-swept::before { animation: card-sweep var(--dur-sweep-reveal) var(--ease-premium) 1; }
}
@media (prefers-reduced-motion: no-preference) {
  a.card:hover::before, a.card:focus-visible::before, .card--hover:hover::before {
    animation: card-sweep-hover var(--dur-sweep) var(--ease-premium) both;
    animation-timeline: auto;
  }
}
.card--tint-blue { background: radial-gradient(var(--glow-card-size) at var(--glow-card-pos), var(--tint-blue-card), transparent 60%), var(--surface); }
.card--tint-pink { background: radial-gradient(var(--glow-card-size) at var(--glow-card-pos), var(--tint-pink-card), transparent 60%), var(--surface); }
.card--panel { background: radial-gradient(var(--glow-panel-size) at var(--glow-panel-pos), var(--tint-blue-panel), transparent 60%), var(--surface); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-3);
  background: var(--fill-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--chip-ink);
  white-space: nowrap;
}
.chip--sm { padding: 4px 10px; font-size: 11px; }
.chip--md { padding: 6px 12px; font-size: 12px; }
a.chip:hover { color: var(--heading); border-color: var(--line-5); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* A chip longer than its row wraps inside the pill instead of running off the edge. */
.chips > .chip { max-width: 100%; white-space: normal; }

.dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex-shrink: 0; }
.dot--blue { background: var(--c-blue); }
.dot--pink { background: var(--c-pink); }
.dot--white { background: var(--node-white); }

.icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-tile svg { width: 20px; height: 20px; }
.icon-tile--blue { background: var(--icon-blue-bg); color: var(--text-blue); }
.icon-tile--pink { background: var(--icon-pink-bg); color: var(--text-pink); }
.icon-tile--white { background: var(--icon-white-bg); color: var(--ink); }

/* ---------- Media slot ----------
   Blending is applied by the container (see .hero__art), which is its own
   layer, so the slot blends with the page behind it. */
.media-slot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--media-opacity);
  filter: var(--media-filter);
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black 30%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black 30%, transparent 72%);
}

/* Per-theme media: each theme shows only its own source (or the glow) */
:root[data-theme="dark"] [data-theme-media="light"],
:root[data-theme="light"] [data-theme-media="dark"] { display: none; }
.media-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(var(--media-glow-size) at var(--media-glow-a-pos), var(--media-glow-a), transparent 70%),
    radial-gradient(var(--media-glow-size) at var(--media-glow-b-pos), var(--media-glow-b), transparent 70%),
    radial-gradient(var(--media-glow-size) at var(--media-glow-c-pos), var(--media-glow-c), transparent 70%);
  filter: blur(var(--media-glow-blur));
}

/* ---------- Subpage hero (reference subpage pattern) ---------- */
.page-hero { position: relative; overflow: hidden; overflow: clip; padding: 0 var(--pad-x); }
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(var(--glow-sub-size) at var(--glow-sub-pos), var(--tint-blue), transparent 70%);
}
.page-hero > .container {
  position: relative;
  max-width: var(--container);
  padding: var(--page-hero-top) 0 var(--page-hero-bottom);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.page-hero__eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-blue); }
.page-hero__eyebrow.eyebrow--pink { color: var(--text-pink); }
.page-hero__title {
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--heading);
}
.page-hero__title .accent { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero__subhead { max-width: 720px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--muted); }
.page-hero__actions { margin-top: 8px; }
.page-note {
  max-width: var(--container);
  margin: 0 auto var(--section-y);
  padding: 18px 22px;
  border: 1px dashed var(--line-4);
  border-radius: var(--r-md);
  color: var(--dim);
  font-size: 14px;
}

/* Long-form legal text */
.prose { max-width: 75ch; padding-bottom: var(--section-y); color: var(--muted); line-height: 1.65; }
.prose h1 { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--heading); margin-bottom: 12px; letter-spacing: -.03em; }
.prose h2 { font-size: 1.35rem; color: var(--heading); margin: 40px 0 12px; }
.prose h3 { font-size: 1.08rem; color: var(--heading); margin: 24px 0 8px; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose a { color: var(--text-blue); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--heading); }

/* ---------- Nav (reference) ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  padding: 0 var(--pad-x);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-nav__inner {
  position: relative;
  max-width: var(--container); /* same column and side padding as page content */
  height: var(--nav-h);
  margin: 0 auto;
  /* Logo | links | actions. Equal outer columns keep the links centred on
     the viewport whatever the logo or action widths are. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-nav__inner > .brand { justify-self: start; }
.site-nav__inner > .site-nav__actions { justify-self: end; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.brand__logo { display: block; flex-shrink: 0; width: auto; height: var(--brand-logo-h); }
.site-nav__links { position: relative; display: flex; align-items: center; gap: var(--nav-link-gap); }
.nav-menu { display: flex; align-items: center; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--heading); background: var(--fill-3); }
.nav-link--split { padding-right: 6px; }
.nav-link--toggle { padding: 10px 8px; background: transparent; border: 0; cursor: pointer; }
.nav-link--toggle svg { width: 12px; height: 12px; transition: transform .15s; }
.nav-link--toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-on { color: var(--heading); box-shadow: inset 0 -2px 0 var(--c-blue); border-radius: 0; }
.nav-on:hover { background: transparent; }
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--grad-mark);
  color: var(--badge-ink);
}

.menu {
  position: absolute;
  top: 56px;
  left: 0;
  z-index: 20;
  width: 760px;
  padding: 20px;
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line-3);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-menu);
}
.menu.open { display: grid; }
.menu__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding: 0 12px 8px; }
.menu a { display: block; padding: 10px 12px; border-radius: var(--r-xs); font-size: 14px; color: var(--ink-2); }
.menu a:hover { background: var(--fill-2); color: var(--heading); }
.menu a.menu__accent { color: var(--text-blue); }

.site-nav__actions { grid-column: 3; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-3);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.icon-btn:hover { color: var(--heading); border-color: var(--line-5); }
.icon-btn svg { width: 18px; height: 18px; }
.site-nav__burger { display: none; }

/* Mobile drawer */
.drawer {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 29;
  display: none;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--line);
  overflow-y: auto;
}
.drawer.is-open { display: flex; }
.drawer__list { list-style: none; margin: 0; padding: 8px var(--pad-x); flex: 1 0 auto; }
.drawer__row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.drawer__link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}
.drawer__link[aria-current="page"] { color: var(--text-blue); }
.drawer__expand { border: 0; }
.drawer__expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__sub { list-style: none; margin: 0; padding: 0 0 12px 12px; border-bottom: 1px solid var(--line); }
.drawer__sub[hidden] { display: none; }
.drawer__sub a { display: block; padding: 10px 0; color: var(--muted); }
.drawer__cta { position: sticky; bottom: 0; padding: 16px var(--pad-x) 24px; border-top: 1px solid var(--line); background: var(--bg); }
.drawer__cta .btn-primary { width: 100%; }
body.has-drawer { overflow: hidden; }

/* ---------- Footer (reference) ---------- */
.site-footer {
  position: relative;
  margin-top: auto;
  padding: 0 var(--pad-x);
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 260px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 100% at 20% 100%, var(--horizon-c), transparent 70%),
    radial-gradient(45% 100% at 50% 100%, var(--horizon-b), transparent 70%),
    radial-gradient(45% 100% at 80% 100%, var(--horizon-a), transparent 70%);
}
.site-footer__inner { max-width: var(--container); margin: 0 auto; padding: 64px 0 40px; display: flex; flex-direction: column; gap: 48px; }
.site-footer__grid { display: grid; grid-template-columns: 2.2fr repeat(5, minmax(0, 1fr)); gap: 32px; }
@media (min-width: 901px) and (max-width: 1260px) {
  .site-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.site-footer__id { display: inline-flex; align-self: flex-start; }
.site-footer__logo { display: block; width: auto; height: var(--footer-logo-h); max-width: 100%; }
.site-footer__meta { font-size: 14px; line-height: 1.6; color: var(--dim); }
.site-footer__socials { display: flex; gap: 8px; }
.site-footer__heading { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--footer-heading); margin-bottom: 12px; }
.footer-link { display: block; padding: 5px 0; font-size: 13px; color: var(--dim); }
.footer-link:hover { color: var(--ink); }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--fainter);
}

.subscribe { display: grid; gap: 8px; margin-top: 12px; }
.subscribe input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-4);
  background: var(--surface-input);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.subscribe input::placeholder { color: var(--dim); }
.subscribe__msg { min-height: 1.4em; font-size: 13px; }
.subscribe__msg.is-ok { color: var(--success); }
.subscribe__msg.is-err { color: var(--danger); }

/* ---------- Floating WhatsApp (feature flag) ---------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--whatsapp);
  color: var(--on-whatsapp);
  box-shadow: var(--shadow-float);
  transition: transform .2s var(--ease);
}
.whatsapp-float:hover { color: var(--on-whatsapp); transform: scale(1.06); }
.whatsapp-float svg { width: 28px; height: 28px; }

/* ---------- Shared section pieces ---------- */
.section-gap { gap: 40px; }
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.section-head--center { align-self: center; align-items: center; text-align: center; }
.section-head--wide { max-width: 860px; }
.section-head--split { max-width: none; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions--center { justify-content: center; }
/* Button groups: every button takes the width of the widest one in its
   group (and they share one height), side by side; stacked full width on
   phones. */
.actions, .hero__actions, .page-hero__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
}
.actions--center, .hero__actions { margin-inline: auto; }
@media (max-width: 560px) {
  .actions, .hero__actions, .page-hero__actions { grid-auto-flow: row; width: 100%; }
}

/* ---------- Home: hero ----------
   As tall as its content plus fixed padding, so the client band sits the
   same distance below the CTAs on every screen (a viewport-tall hero left a
   growing empty gap on tall windows). Type and inner gaps still scale with
   the viewport height, so everything fits on short laptop screens. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Copy starts just below the nav; the rest of the screen is the art. */
  padding: var(--hero-pad-top) var(--pad-x) var(--hero-pad-bottom);
}
.hero__art {
  position: absolute;
  left: 50%;
  top: var(--hero-art-y);
  translate: -50% -50%;
  width: var(--hero-art-size);
  height: var(--hero-art-size);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  mix-blend-mode: var(--media-blend);
}
.hero__art .media-slot { width: 100%; height: 100%; }
.orbit { position: absolute; border-radius: var(--r-pill); border: 1px solid var(--orbit-1); pointer-events: none; }
.orbit--inner { width: 62%; height: 62%; }
.orbit--outer { width: 84%; height: 84%; border-color: var(--orbit-2); }
/* A small light travels each orbit (rotating a plain ring would be invisible). */
.orbit::after {
  content: "";
  position: absolute;
  top: -3px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--orbit-dot);
  box-shadow: 0 0 12px var(--orbit-dot-glow);
}
.orbit--outer::after { top: auto; bottom: -3px; background: var(--orbit-dot-2); }
.hero__content {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--hero-gap);
}
.hero .h-hero { font-size: var(--fs-hero-fit); }
.hero__line { display: block; }
.hero__pill {
  margin-bottom: var(--hero-pill-space);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-4);
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13px;
  color: var(--ink-2);
}
.hero__badge {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--c-blue);
  color: var(--badge-ink);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.hero__subhead { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero-subhead); letter-spacing: -.01em; }
.hero__body { max-width: 640px; font-size: var(--fs-hero-body); line-height: 1.6; color: var(--ink-2); text-shadow: var(--text-shadow-body); }

/* ---------- Home: clients band ----------
   A full-width band with its own gradient, faded at the edges: the label
   centred above a continuous marquee. Logos are drawn as a theme-tinted
   mask; the <img> underneath only sizes the slot and carries the alt text. */
.clients { position: relative; }
/* The band's gradient fades out at the top and bottom instead of ending in
   hard border lines. */
.clients::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--clients-bg);
  -webkit-mask-image: var(--clients-fade);
  mask-image: var(--clients-fade);
}
.clients__inner { position: relative; }
.clients + .band--rule { border-top: 0; margin-top: var(--section-y-sm); } /* the fade replaces the next section's rule; a section-sized gap instead */
.clients__inner {
  padding: var(--clients-pad-y) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--clients-label-gap);
}
.clients__label { padding: 0 var(--pad-x); text-align: center; }
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Room for logos taller than the row (scaled emblems) without making the
     band taller: the box grows, the layout doesn't. */
  padding-block: var(--marquee-bleed);
  margin-block: calc(var(--marquee-bleed) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--marquee-fade), black calc(100% - var(--marquee-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black var(--marquee-fade), black calc(100% - var(--marquee-fade)), transparent 100%);
}
.marquee__track { display: flex; width: max-content; }
.marquee__list {
  display: flex;
  align-items: center;
  gap: var(--clients-gap);
  margin: 0;
  padding: 0 var(--clients-gap) 0 0;
  list-style: none;
}
.client { flex: 0 0 auto; display: flex; align-items: center; height: var(--logo-h); }
.client__logo { position: relative; display: block; height: calc(var(--logo-h) * var(--logo-scale, 1)); }
.client__img { display: block; width: auto; height: 100%; max-width: none; opacity: 0; }
.client__mono {
  position: absolute;
  inset: 0;
  background: var(--logo-ink);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.client__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-client-word);
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--logo-ink);
}

@keyframes marquee {
  from { translate: 0 0; }
  to { translate: -50% 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee var(--marquee-duration) linear infinite; }
}
/* Reduced motion: one static, wrapped, centred row; the copies go. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { width: auto; justify-content: center; }
  .marquee__list { flex-wrap: wrap; justify-content: center; row-gap: 20px; padding: 0 var(--pad-x); }
  .marquee__list[aria-hidden] { display: none; }
}

/* ---------- Home: personas ---------- */
.personas { display: flex; gap: 48px; align-items: flex-start; }
/* Stacked layout (default; mobile, reduced motion, no JS) */
.personas-scroll { position: relative; }
.personas-probe { position: absolute; top: 0; left: 0; width: 1px; height: var(--persona-step); visibility: hidden; pointer-events: none; }
.personas-section .personas { flex-direction: column; }
.personas-section .personas__tabs { flex: none; }
.personas__list { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 4px; }
.personas__list .tab { width: 100%; }
.personas__panels { flex: 1 1 600px; min-width: 0; width: 100%; display: flex; flex-direction: column; gap: var(--stack-gap); }
.personas__who { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-blue); margin: 0 0 -8px; }
.personas__tabs { flex: 0 1 380px; display: flex; flex-direction: column; gap: 4px; }
.personas__eyebrow { margin-bottom: 16px; padding-left: 20px; }
.tab {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--line-3);
  color: var(--dim);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  text-align: left;
  padding: 14px 20px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink); }
.tab-on { border-left-color: var(--c-blue); color: var(--ink); }
.tab__who { color: var(--heading); }
.personas__panel { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.personas__what { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-statement); line-height: 1.15; letter-spacing: -.02em; color: var(--heading); min-height: 80px; }
.personas__card { padding: 28px; gap: 22px; }
.flow { display: flex; align-items: center; flex-wrap: wrap; row-gap: 16px; }
.node {
  flex: 1 1 var(--node-min);
  min-width: min(var(--node-min), 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border: 1px solid var(--line-4);
  border-radius: var(--r-md);
  background: var(--surface);
}
.node-on { border-color: var(--c-blue); box-shadow: 0 0 0 4px var(--node-ring); }
.node__icon { width: 28px; height: 28px; border-radius: var(--r-xs); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--badge-ink); }
.node__icon svg { width: 14px; height: 14px; }
.node__icon--blue { background: var(--node-blue); }
.node__icon--pink { background: var(--node-pink); }
.node__icon--white { background: var(--node-white); }
.node__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
/* Labels wrap rather than overflow; a long single word breaks only as a last resort. */
.node__product { font-size: 11px; color: var(--dim); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.node__label { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.connector { flex: 0 1 32px; min-width: 16px; height: 1px; background: var(--grad-connector); }
/* Live highlight: while a persona is in focus (.is-live, set by site.js) a
   ring lights each step in turn and a pulse runs along the connector to the
   next. Opacity and scale only; no highlight at all under reduced motion. */
.node--step { position: relative; }
.node--step::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--c-blue);
  box-shadow: 0 0 0 4px var(--node-ring), var(--node-glow);
  opacity: 0;
  pointer-events: none;
}
.connector--step { position: relative; }
.connector--step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--connector-pulse);
  transform-origin: left;
  scale: 0 1;
  opacity: 0;
}
/* One cycle covers every step: each node holds the light for a quarter. */
@keyframes node-step {
  0% { opacity: 0; }
  3%, 22% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes connector-step {
  0%, 19% { opacity: 0; scale: 0 1; }
  20% { opacity: 1; scale: 0 1; }
  25% { opacity: 1; scale: 1 1; }
  28%, 100% { opacity: 0; scale: 1 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .is-live .node--step::after {
    animation: node-step calc(var(--flow-step) * 4) linear calc(var(--step-i) * var(--flow-step)) infinite both;
  }
  .is-live .connector--step::after {
    animation: connector-step calc(var(--flow-step) * 4) var(--ease) calc(var(--step-i) * var(--flow-step)) infinite both;
  }
}
/* Wide screens: the four steps always share one row. Nodes split the width
   evenly and their labels wrap inside them. */
@media (min-width: 1100px) {
  .flow { flex-wrap: nowrap; align-items: stretch; }
  .node { flex: 1 1 0; min-width: 0; gap: 8px; padding: 12px 10px; }
  .node__icon { width: 24px; height: 24px; }
  .node__icon svg { width: 12px; height: 12px; }
  .connector { flex: 0 0 var(--connector-w); min-width: var(--connector-w); align-self: center; }
}
/* Narrower: an intentional 2x2 grid (never 3 + 1); connectors drop out. */
@media (max-width: 1099px) {
  .flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  .node { min-width: 0; }
  .connector { display: none; }
}
/* Phones: a slim progress row of dots that sticks under the nav while the
   personas scroll past (site.js marks the one in view). Hidden on wider
   screens and without JS. */
.personas__progress { display: none; }
@media (max-width: 900px) {
  .personas__progress:not([hidden]) {
    position: sticky;
    top: calc(var(--nav-h) + 12px);
    z-index: 2;
    align-self: center;
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-3);
    background: var(--glass);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .personas__dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--c-blue); opacity: .3; transition: opacity .3s var(--ease), scale .3s var(--ease); }
  .personas__dot.is-on { opacity: 1; scale: 1.35; }
  /* Each panel's parts rise in once as it enters: label, headline, flow card, note. */
  .personas--reveal [data-persona-part]:not(.is-in) { opacity: 0; }
  .personas--reveal [data-persona-part].is-in { animation: reveal-up var(--dur-reveal) var(--ease-premium) var(--part-delay, 0ms) both; }
}
.personas__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line-2); padding-top: 18px; }
.personas__note { font-size: 14px; color: var(--muted); }

/* Pinned scroll storytelling: wide screens with motion allowed and JS on.
   The stage sticks below the nav while the section scrolls one
   --persona-step per persona, then releases into the next section. */
/* 1100-1279px: a narrower step list leaves the flow room for four nodes. */
@media (min-width: 1100px) and (max-width: 1279px) and (prefers-reduced-motion: no-preference) {
  .js .personas-section .personas.stack-m { gap: 32px; }
  .js .personas-section .personas > .personas__tabs { flex-basis: var(--personas-tabs-narrow); }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* Plain sticky with one constant offset: the stage scrolls up with the page
     until it reaches its centred position below the nav, stays there for one
     --persona-step per persona, then scrolls away. Nothing changes at the pin
     point, so there is no jump either way. site.js sets --persona-stick-top
     (centred in the space below the nav, at least --personas-pin-min-top)
     on load and resize only. */
  .js .personas-scroll { padding-top: var(--personas-stage-top); }
  .js .personas-scroll::after { content: ""; display: block; height: calc(var(--persona-steps) * var(--persona-step)); }
  .js .personas-stage { position: sticky; top: calc(var(--nav-h) + var(--persona-stick-top, var(--personas-pin-min-top))); }
  .js .personas-stage > .band__inner { width: 100%; padding: 0; }
  .js .personas-section .personas { flex-direction: row; }
  .js .personas-section .personas__tabs { flex: 0 1 380px; }
  .js .personas__list { display: flex; }
  .js .personas__who { display: none; }
  .js .personas__panels { display: grid; gap: 0; }
  .js .personas__panel {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(16px);
    visibility: hidden;
    /* Outgoing panel leaves quickly; the incoming one starts after it, so text never doubles up. */
    transition: opacity var(--persona-fade-out) ease, transform var(--persona-fade-out) ease, visibility 0s linear var(--persona-fade-out);
  }
  .js .personas__panel.is-active {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity var(--persona-fade) ease var(--persona-fade-out), transform var(--persona-fade) ease var(--persona-fade-out), visibility 0s;
  }
}

/* ---------- Home: proof strip ---------- */
.proof-band { padding-bottom: var(--section-y); }
.proof { max-width: var(--container); margin: 0 auto; gap: var(--grid-gap-tight); grid-auto-rows: 1fr; } /* equal box heights, stacked too */
.proof__card { padding: 26px 28px; gap: 6px; }
/* Each box carries its product link, bottom-right. */
.proof__link { margin-top: auto; padding-top: 14px; align-self: flex-end; font-weight: 700; font-size: 15px; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof__link:hover, .proof__link:focus-visible { color: transparent; text-decoration: underline; text-decoration-color: var(--c-violet); text-underline-offset: 4px; }
.proof__stat { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.03em; color: var(--heading); }
.proof__text { font-size: 14px; color: var(--muted); }
/* Hover: a small scale and lift, and the gradient border glows (transform
   and opacity only; no motion when reduced motion is asked for). */
.proof .card.proof__card:not(a):hover::before, .proof .card.proof__card:focus-within::before { opacity: var(--card-border-hover); }
@media (prefers-reduced-motion: no-preference) {
  .proof__card:hover, .proof__card:focus-within { transform: translateY(var(--proof-lift-y)) scale(var(--proof-hover-scale)); }
}

/* ---------- Products: family cards ---------- */
.family { padding: 32px; gap: 16px; min-height: 240px; }
.family--tall { min-height: 260px; }
.family__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.family__title { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; color: var(--heading); }
.family__body { flex: 1; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---------- Home: lifecycle ---------- */
.lifecycle { gap: 16px; }
.stage { padding: 22px; gap: 14px; }
.stage__head { display: flex; align-items: center; gap: 10px; }
.stage__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--heading); }
.stage__rows { display: flex; flex-direction: column; gap: 8px; }
.stage__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 8px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--fill-1);
  border: 1px solid var(--line);
  transition: border-color .15s, background .15s;
}
.stage__row:hover { border-color: var(--hover-border); background: var(--fill-2); }
.stage__module { font-weight: 700; font-size: 14px; color: var(--ink); }
.stage__short { font-size: 12px; color: var(--dim); text-align: right; }

/* ---------- Home: philosophy ---------- */
.idea { padding: 30px; gap: 14px; }
.idea__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--heading); }
.idea__body { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- Home: enterprise ---------- */
.enterprise { display: flex; gap: 48px; align-items: flex-start; }
.enterprise__copy { flex: 1 1 440px; display: flex; flex-direction: column; gap: 18px; }
.enterprise__title { font-size: var(--fs-h2); }
.enterprise__body { font-size: 17px; line-height: 1.6; color: var(--muted); }
.enterprise__actions { margin-top: 8px; }
.enterprise__grid { flex: 1 1 560px; gap: 14px; }
.feature { padding: 22px; gap: 8px; }
.feature__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--heading); }
.feature__body { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- Home: closing CTA ---------- */
.closing { padding: var(--section-y-lg) 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.closing__title { max-width: 820px; }
.closing__body { max-width: 600px; font-size: 19px; line-height: 1.55; color: var(--muted); }

/* ---------- Subpage pieces (products and beyond) ---------- */
.section-head--tight { gap: 12px; }
.chips--hero { gap: 10px; margin-top: 8px; }
.actions--spaced { margin-top: 8px; }
.lead--sm { font-size: 16px; }
.note { font-size: 14px; color: var(--dim); }
.bullets {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.info-card { padding: 24px; gap: 6px; }
.info-card__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--heading); }
.info-card__title--lg { font-size: 20px; }
.info-card__body { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ---------- Products ---------- */
.product-section { padding: var(--section-y-md) 0; gap: 36px; }
.split { display: grid; gap: 48px; align-items: start; }
.split--copy-first { grid-template-columns: 1.1fr 1fr; }
.split--cards-first { grid-template-columns: 1fr 1.1fr; }
.stage__rows--detail { gap: 10px; }
.module-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--fill-1);
  border: 1px solid var(--line);
  transition: border-color .15s, background .15s;
}
.module-row:hover { border-color: var(--hover-border); background: var(--fill-2); }
.module-row__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; align-items: baseline; }
.module-row__tag { font-size: 11px; color: var(--text-blue); text-align: right; }
.module-row__job { font-size: 12.5px; line-height: 1.45; color: var(--muted-2); }
.module-item { display: flex; flex-direction: column; gap: 4px; }
/* A module's own site, under its row (opens in a new tab). */
.info-card__site { margin-top: 6px; }

/* ---------- Subpage hero variants ---------- */
.page-hero--pink::before { background: radial-gradient(var(--glow-sub-size) at var(--glow-sub-pos), var(--tint-pink-card), transparent 70%); }
.page-hero--left::before { background: radial-gradient(var(--glow-sub-size) at var(--glow-sub-left-pos), var(--tint-blue-card), transparent 70%); }
.page-hero--tight > .container { padding-bottom: 40px; }
.page-hero__title--wide { max-width: 980px; }
.page-hero__subhead--wide { max-width: 760px; }

/* ---------- Shared spacing helpers ---------- */
.band__inner--72 { padding: var(--section-y-sm) 0; }
.band__inner--72-96 { padding: var(--section-y-sm) 0 var(--section-y); }
.gap-32 { gap: 32px; }
.h2--36 { font-size: var(--fs-h2-sm); }
.wash--cta-blue { background: radial-gradient(var(--glow-cta-a-size) at var(--glow-cta-a-pos), var(--tint-blue-cta), transparent 70%); }
.closing--sub { padding: var(--section-y) 0; gap: 20px; }

/* ---------- Services ---------- */
.program { padding: 26px; gap: 12px; }
.program__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.program__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--heading); }
.program__audience { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-blue); }
.program__body { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.why { padding: 26px; gap: 10px; }
.why__title { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.02em; color: var(--heading); }
.impact { padding: 28px; }
.impact-steps { gap: 32px; }
.impact-step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.impact-step .node { position: relative; flex: 0 0 auto; }
.impact-step:not(:last-child) .node::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--grad-connector);
}
.impact__note { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ---------- Case studies ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.filter {
  background: transparent;
  border: 1px solid var(--line-4);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.filter:hover { color: var(--heading); border-color: var(--line-6); }
.filter-on, .filter-on:hover { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.stories { max-width: var(--container); margin: 0 auto; padding: 24px 0 var(--section-y); }

/* ---------- Case study story page ---------- */
.story-back { margin-bottom: 8px; }
.story-media { display: flex; flex-wrap: wrap; gap: 12px; }
.story-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 8px 0 0; }
/* Client and industry, with the product's own site beside them when the story has one. */
.story-facts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-top: 8px; }
.story-facts-row .story-facts { margin: 0; }
.story-facts dt { font-family: var(--font-label); font-size: var(--fs-mono-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.story-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
.story-figure { margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line-3); }
.story-figure img { width: 100%; aspect-ratio: var(--story-figure-ratio); max-height: var(--story-figure-max-h); object-fit: cover; }
/* Heading on the left, text column on the right; stacked on phones. */
.story-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 64px; align-items: start; }
.story-section__title { font-size: var(--fs-h2-sm); }
.story-section__body { display: flex; flex-direction: column; gap: 16px; max-width: 72ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--muted); }
.story-section__body .bullets { font-size: 16px; }
.story-items { gap: 14px; }
.story-item { padding: 22px 24px; gap: 8px; }
.story-item__title { font-size: 18px; font-weight: 600; color: var(--heading); }
.story-item__body { font-size: 15px; line-height: 1.55; color: var(--muted); }
.story-goal { padding: 22px 24px; gap: 8px; }
.story-goal p { color: var(--ink); }
.story-stat { padding: 26px 28px; gap: 8px; }
.story-stat__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1; letter-spacing: -.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story-stat__label { font-size: 16px; color: var(--ink-2); }
.story-quote { margin: 0; padding-left: 20px; border-left: 2px solid var(--c-violet); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-statement); line-height: 1.2; color: var(--heading); }
@media (max-width: 900px) { .story-section { grid-template-columns: minmax(0, 1fr); } }
.story { padding: 26px; gap: 16px; min-height: 240px; }
.story[hidden] { display: none; }
.story__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.story__client { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--dim); }
.story__headline { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--heading); }
.story__body { font-size: 14px; line-height: 1.5; color: var(--muted); }
.story__read { font-size: 14px; font-weight: 700; color: var(--text-blue); border-top: 1px solid var(--line-2); padding-top: 14px; }

/* ---------- More spacing helpers ---------- */
.page-hero--pink-left::before { background: radial-gradient(var(--glow-sub-size) at var(--glow-sub-left-pos), var(--tint-pink-card), transparent 70%); }
.band__inner--0-72 { padding: 0 0 var(--section-y-sm); }
.band__inner--64 { padding: var(--section-y-xs) 0; }
.band__inner--64-96 { padding: var(--section-y-xs) 0 var(--section-y); }
.gap-18 { gap: 18px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-40 { gap: 40px; }
.h2--30 { font-size: var(--fs-h3); }
.h2--40 { font-size: var(--fs-h2-md); }
.split--even { grid-template-columns: 1fr 1fr; }
.card--tint-blue-12 { background: radial-gradient(var(--glow-card-size) at var(--glow-card-pos), var(--tint-blue-12), transparent 60%), var(--surface); }
.card--tint-pink-12 { background: radial-gradient(var(--glow-card-size) at var(--glow-card-pos), var(--tint-pink-12), transparent 60%), var(--surface); }

/* ---------- Team ---------- */
.founder {
  flex-direction: row;
  padding: 40px;
  gap: 40px;
  align-items: flex-start;
  background: radial-gradient(60% 100% at 0% 0%, var(--tint-blue-12), transparent 60%), var(--surface);
}
.founder__photo { width: 220px; height: 220px; border-radius: var(--r-card); object-fit: cover; flex-shrink: 0; border: 1px solid var(--line-3); }
.founder__copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.founder__credentials { font-size: 14px; font-weight: 600; color: var(--text-blue); }
.founder__actions { margin-top: 6px; }
.avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md); /* same shape for photos and initials */
  background: var(--grad-avatar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--on-avatar);
}
.avatar--photo { object-fit: cover; }

/* ---------- Team: pop-out portraits ----------
   The gradient box is CSS; the person is a transparent cut-out drawn twice:
   once clipped to the box (shoulders and sides), once showing only what
   rises above the box's top edge (the head). Both rest --pop-lift low and
   lift into place on hover; no motion under reduced motion. */
.pop { position: relative; flex-shrink: 0; width: 72px; aspect-ratio: 1; }
.pop__box {
  position: absolute;
  inset: calc(var(--pop-top) * 100%) 0 0;
  border-radius: var(--r-md);
  background: var(--grad-photo);
  border: 1px solid var(--line-3);
  overflow: hidden;
}
.pop__img {
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--pop-lift));
  width: 100%;
  max-width: none;
  filter: drop-shadow(0 4px 8px var(--pop-shadow));
  transition: transform var(--dur-hover) var(--ease-premium);
}
/* Inside the box, the image is positioned against the box's own bottom edge. */
.pop__box .pop__img { left: -1px; width: calc(100% + 2px); bottom: calc(-1 * var(--pop-lift) - 1px); }
/* Above the box: everything below the box's top edge (plus 1px of overlap) is clipped away. */
.pop__img--head {
  clip-path: inset(0 0 calc((1 - (var(--pop-top) + var(--pop-headroom)) / (1 + var(--pop-headroom))) * 100% - 1px) 0);
}
@media (prefers-reduced-motion: no-preference) {
  .member:hover .pop__img, .founder:hover .pop__img { transform: translateY(calc(-1 * var(--pop-lift))); }
}
.member--compact .pop { width: 56px; }
.founder .pop { width: 220px; }
.founder .pop__box { border-radius: var(--r-card); }
.member { padding: 26px; gap: 14px; }
.member__head { display: flex; align-items: center; gap: 14px; }
.member__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.member__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--heading); }
.member__role { font-size: 13px; color: var(--text-blue); }
.member__bio { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.member--compact { padding: 24px; }
.member--compact .member__head { gap: 12px; }
.member--compact .avatar { width: 56px; height: 56px; font-size: 18px; }
.member--compact .member__name { font-size: 17px; }
.member--compact .member__bio { font-size: 14px; }
.member--name-only { padding: 18px 20px; }
.gallery { grid-auto-rows: 220px; gap: 12px; }
.gallery__item { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line-3); }
.gallery__item--lead { grid-column: span 2; grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
/* Team moments: two rows that scroll sideways, snapping by column. */
.moments__controls { display: flex; align-items: center; gap: 10px; }
.moments__btn svg { rotate: 90deg; }
.moments__btn--next svg { rotate: -90deg; }
.moments__btn:disabled { opacity: .35; cursor: default; }
.moments { --fade-l: var(--moments-fade); --fade-r: var(--moments-fade); }
.moments.is-start { --fade-l: 0px; }
.moments.is-end { --fade-r: 0px; }
.moments__track {
  display: grid;
  grid-template-rows: repeat(2, var(--moment-h));
  grid-auto-flow: column;
  grid-auto-columns: var(--moment-col);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--r-card);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--fade-l), black calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black var(--fade-l), black calc(100% - var(--fade-r)), transparent 100%);
}
.moments__track::-webkit-scrollbar { display: none; }
.moments__track:focus-visible { outline-offset: 4px; }
.moments__item { scroll-snap-align: start; }
.moments__item--lead { grid-row: span 2; grid-column: span 2; } /* the big group photo leads, 2x2 */
@media (max-width: 900px) {
  .moments { --moment-col: 82%; --moment-h: 170px; }
  .moments__item--lead { grid-column: span 1; grid-row: span 1; } /* a portrait crop would cut the group photo */
  .moments__btn { display: none; } /* swipe on touch screens */
}
@media (prefers-reduced-motion: reduce) { .moments__track { scroll-behavior: auto; } }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-hover) var(--ease-premium); }
.gallery__item:hover img { scale: 1.04; }
/* Brand tint from the bottom, and the cards' gradient edge. */
.gallery__item::before, .gallery__item::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.gallery__item::before { background: var(--moment-tint); }
.gallery__item::after {
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black, black) content-box exclude, linear-gradient(black, black);
  opacity: var(--card-border-rest);
}
.gallery__item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  font-weight: 600;
  font-size: 12px;
  color: var(--on-avatar);
  background: linear-gradient(transparent, var(--caption-shade));
}
.value { display: flex; gap: 12px; align-items: baseline; }
.value__num { font-weight: 700; color: var(--text-blue); font-size: 14px; width: 24px; flex-shrink: 0; }
.value__title { font-weight: 700; color: var(--heading); }
.value__body { color: var(--muted); }
.award {
  padding: 30px;
  gap: 12px;
  background: radial-gradient(var(--glow-card-size) at var(--glow-card-pos), var(--tint-pink-12), transparent 60%), var(--surface);
}
.award__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--heading); }
.award__link { margin-top: 8px; }

/* ---------- Careers ---------- */
.tile { padding: 24px; gap: 8px; }
.role { flex-direction: row; align-items: center; padding: 24px 28px; gap: 24px; }
.role__copy { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.role__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--heading); }
.role__body { font-size: 14px; line-height: 1.5; color: var(--muted); }
.apply-card { padding: 30px; gap: 12px; }
.apply-card.card--tint-blue { background: radial-gradient(var(--glow-card-size) at var(--glow-card-pos), var(--tint-blue-12), transparent 60%), var(--surface); }
.apply-card__body { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.apply-card__email { color: var(--text-blue); font-weight: 600; }

/* ---------- Contact / demo ---------- */
.gap-6 { gap: 6px; }
.gap-28 { gap: 28px; }
.wash--inquiry {
  background:
    radial-gradient(var(--glow-inquiry-a-size) at var(--glow-inquiry-a-pos), var(--tint-blue), transparent 70%),
    radial-gradient(var(--glow-inquiry-b-size) at var(--glow-inquiry-b-pos), var(--tint-pink-12), transparent 70%);
}
.inquiry__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; padding: var(--section-y) 0; }
.channel { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.channel__text { display: flex; flex-direction: column; gap: 2px; }
.channel__label { font-size: 12px; color: var(--dim); }
.channel__value { font-weight: 700; color: var(--heading); }
.channel__action { font-size: 13px; font-weight: 700; color: var(--text-blue); }
.office { padding: 18px; gap: 4px; }
.office__city { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--heading); }
.office__meta { font-size: 12.5px; color: var(--dim); }
.inquiry__form {
  padding: 36px;
  gap: 20px;
  background: radial-gradient(70% 60% at 100% 0%, var(--tint-blue-soft), transparent 60%), var(--surface);
}
.inquiry__form-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--heading); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--surface-input);
  border: 1px solid var(--line-4);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  outline: none;
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--focus-ring); }
.field [aria-invalid="true"], .consent input[aria-invalid="true"] { border-color: var(--danger); }
.field__error { font-size: 12.5px; color: var(--danger); }
.field__error:empty { display: none; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.consent input { margin-top: 3px; width: auto; }
.inquiry__submit { width: 100%; }
.inquiry__submit:disabled { opacity: .7; cursor: default; transform: none; }
.form-success { padding: 20px; border-radius: var(--r-md); border: 1px solid var(--hover-border); background: var(--tint-blue-panel); font-size: 15px; color: var(--ink); }
.form-success[hidden], .form-error[hidden] { display: none; }
.form-error { font-size: 14px; color: var(--danger); }

/* ---------- Label roles: Sora 500 for interface labels ----------
   Slightly tight tracking; the small uppercase labels keep wider tracking. */
.nav-link, .menu a { font-family: var(--font-label); font-size: var(--fs-mono-nav); font-weight: 500; letter-spacing: var(--tracking-label); }
.menu__label, .site-footer__heading, .personas__who, .program__audience {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: .08em;
}
.chip, .filter, .node__product, .module-row__tag, .stage__short, .hero__pill, .hero__badge, .float-chip {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
}
.node__product { letter-spacing: .02em; }

/* ---------- Eyebrows: "// label" in the label font, larger and brighter ----------
   The slashes are decoration (empty alt text), in the second accent. */
.eyebrow, .page-hero__eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--text-blue);
}
/* The "//" mark is decoration (empty alt text). Its spacing is a margin,
   not a space character: a trailing space in generated content can be
   dropped (flex or inline-flex parents, some engines with centered text). */
.eyebrow::before, .page-hero__eyebrow::before {
  content: "//";
  content: "//" / "";
  margin-inline-end: var(--eyebrow-mark-space);
  color: var(--eyebrow-mark);
}
.eyebrow--pink, .page-hero__eyebrow.eyebrow--pink { color: var(--text-pink); }
.eyebrow--pink::before, .page-hero__eyebrow.eyebrow--pink::before { color: var(--eyebrow-mark-alt); }
.eyebrow--plain { color: var(--dim); }
.chip, .filter { font-weight: 500; font-size: var(--fs-mono-label); }

/* ============================================================
   Motion system
   Everything here animates only transform-family properties
   (translate, scale, rotate) and opacity, plus registered custom
   properties for gradient angles, and switches off under
   prefers-reduced-motion. Content is never hidden waiting for
   JavaScript: the hero load-in is pure CSS that ends visible, and
   scroll reveals only hide blocks that site.js has tagged itself.
   ============================================================ */

/* ---------- Hero load-in (home hero and subpage heroes) ----------
   Eyebrow, then each headline line, subhead, body and CTAs, each a step
   later. */
@keyframes hero-in {
  from { opacity: 0; translate: 0 var(--hero-in-y); }
}
@keyframes hero-in-line {
  from { opacity: 0; translate: 0 var(--hero-in-line-y); }
}
@keyframes hero-exit {
  to { opacity: 0; translate: 0 var(--hero-exit-y); scale: var(--hero-exit-scale); }
}
.page-hero > .container > :nth-child(1) { --in-i: 0; }
.page-hero > .container > :nth-child(2) { --in-i: 1; }
.page-hero > .container > :nth-child(3) { --in-i: 2; }
.page-hero > .container > :nth-child(4) { --in-i: 3; }
.page-hero > .container > :nth-child(n+5) { --in-i: 4; }
@media (prefers-reduced-motion: no-preference) {
  .hero-in, .page-hero > .container > * {
    animation: hero-in var(--dur-hero-in) var(--ease-premium) calc(var(--hero-in-start) + var(--in-i, 0) * var(--hero-in-step)) both;
  }
  .hero-in--line { animation-name: hero-in-line; animation-duration: var(--dur-hero-in-line); }
  /* As the page scrolls, the hero copy lifts away and fades. */
  @supports (animation-timeline: scroll()) {
    .hero__content {
      animation: hero-exit linear both;
      animation-timeline: scroll(root);
      animation-range: var(--hero-exit-range);
    }
  }
}

/* ---------- Scroll reveals ----------
   site.js tags blocks that start below the fold with data-reveal (a group's
   children get a stepped --reveal-delay), adds .reveal-ready to <html>, and
   adds .is-in once each block enters the viewport. Played once, eased. */
@keyframes reveal-up {
  from { opacity: 0; translate: 0 var(--reveal-y); }
}
@keyframes reveal-left {
  from { opacity: 0; translate: calc(var(--reveal-x) * -1) 0; scale: var(--reveal-scale); }
}
@keyframes reveal-right {
  from { opacity: 0; translate: var(--reveal-x) 0; scale: var(--reveal-scale); }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal]:not(.is-in) { opacity: 0; }
  .reveal-ready [data-reveal].is-in { animation: reveal-up var(--dur-reveal) var(--ease-premium) var(--reveal-delay, 0ms) both; }
  .reveal-ready [data-reveal="left"].is-in { animation-name: reveal-left; }
  .reveal-ready [data-reveal="right"].is-in { animation-name: reveal-right; }
}

/* Hover lift and glow, for things that are clickable. */
.hover-lift {
  transition: transform var(--dur-hover) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium), border-color var(--dur-hover) ease;
}
.hover-lift:hover, .hover-lift:focus-visible {
  transform: translateY(var(--lift-y));
  box-shadow: var(--card-highlight), var(--hover-glow);
}

/* Static cards still answer the pointer: the border warms, no lift. */
.card:not(a):not(.card--hover):hover { border-color: var(--hover-border-soft); }
.card:not(a):not(.card--hover):hover::before { opacity: var(--card-border-hover-static); }

/* Lifecycle rows: a gradient bar grows on the left and the row nudges right. */
.stage__row { position: relative; transition: border-color .15s, background .15s, translate var(--dur-hover) var(--ease-premium); }
.stage__row::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--grad-mark);
  scale: 1 0;
  transition: scale var(--dur-hover) var(--ease-premium);
}
.stage__row:hover { translate: 2px 0; }
.stage__row:hover::before { scale: 1 1; }

/* Text links: an underline grows from the left. */
.footer-link, .link-arrow { position: relative; width: fit-content; }
.link-arrow { display: inline-block; }
.footer-link::after, .link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur-hover) var(--ease-premium);
}
.link-arrow::after { bottom: -2px; }
.footer-link:hover::after, .footer-link:focus-visible::after,
.link-arrow:hover::after, .link-arrow:focus-visible::after { scale: 1 1; }
.btn-ghost:hover { transform: translateY(-1px); }

/* Slow ambient background drift (the fixed tone layer behind every page). */
@keyframes ambient-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(var(--ambient-drift-x), var(--ambient-drift-y), 0) scale(var(--ambient-drift-scale)); }
}
@media (prefers-reduced-motion: no-preference) {
  .ambient { animation: ambient-drift var(--ambient-drift-duration) ease-in-out infinite; will-change: transform; }
}

/* Aurora: two soft colour fields drifting behind a hero. */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 50%; }
.aurora::before { width: 58vw; height: 46vw; top: -16vw; left: -10vw; background: radial-gradient(closest-side, var(--aurora-a), transparent); }
.aurora::after { width: 46vw; height: 40vw; top: -8vw; right: -8vw; background: radial-gradient(closest-side, var(--aurora-b), transparent); }
@keyframes aurora-a {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 6% 4%; scale: 1.08; }
}
@keyframes aurora-b {
  0%, 100% { translate: 0 0; scale: 1.06; }
  50% { translate: -7% 5%; scale: .96; }
}
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
  .aurora::before { animation: aurora-a var(--aurora-a-duration) ease-in-out infinite; will-change: translate, scale; }
  .aurora::after { animation: aurora-b var(--aurora-b-duration) ease-in-out infinite; will-change: translate, scale; }
  .orbit--inner { animation: spin var(--orbit-inner-duration) linear infinite; }
  .orbit--outer { animation: spin var(--orbit-outer-duration) linear infinite reverse; }
}

/* Closing CTA: a soft glow orbits the section. */
.wash--cta::after {
  content: "";
  position: absolute;
  left: calc(50% - 310px);
  top: calc(55% - 170px);
  width: 620px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cta-orbit-glow), transparent);
}
@keyframes cta-orbit {
  0%, 100% { translate: -26vw 18%; }
  25% { translate: 26vw 18%; }
  50% { translate: 26vw -26%; }
  75% { translate: -26vw -26%; }
}
@media (prefers-reduced-motion: no-preference) {
  .wash--cta::after { animation: cta-orbit var(--cta-orbit-duration) ease-in-out infinite; will-change: translate; }
}

/* Slowly moving gradient text, used sparingly (one element per page at most). */
@keyframes text-shift {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}
.hl--shift { background: var(--grad-text-loop); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .hl--shift { animation: text-shift var(--dur-text-shift) linear infinite; }
}
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* ---------- Hero lightning ----------
   Dark: the brightened photo (media slot, --media-filter) with a pulsing
   blurred copy, a flickering bright copy and a soft shade over the core.
   Light: layered washes, a streak along the bolt's diagonal and a breathing
   core glow, in place of the photo. */
.hero__scrim { position: absolute; inset: 0; pointer-events: none; background: var(--hero-scrim); }
.hero__art .media-glow { display: none; } /* the light composition below replaces it */
.bolt, .hero-light { position: absolute; inset: 0; pointer-events: none; }
.bolt { -webkit-mask-image: var(--bolt-mask); mask-image: var(--bolt-mask); }
.bolt__layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; mix-blend-mode: screen; }
.bolt__glow { filter: var(--bolt-glow-filter); opacity: var(--bolt-glow-min); }
.bolt__flash { filter: var(--bolt-flash-filter); opacity: 0; }
.bolt__core { position: absolute; inset: 0; background: radial-gradient(circle at var(--bolt-core-x) var(--bolt-core-y), var(--bolt-core-shade) 0, transparent var(--bolt-core-size)); }
@keyframes bolt-pulse {
  0%, 100% { opacity: var(--bolt-glow-min); }
  50% { opacity: var(--bolt-glow-max); }
}
/* Two irregular bursts per loop: quick on/off steps read as a flicker. */
@keyframes bolt-flicker {
  0%, 57% { opacity: 0; }
  58% { opacity: .85; }
  59% { opacity: .1; }
  60.2% { opacity: .65; }
  61.5% { opacity: .05; }
  63% { opacity: .3; }
  65%, 86% { opacity: 0; }
  86.7% { opacity: .5; }
  87.6% { opacity: 0; }
  88.4% { opacity: .35; }
  90%, 100% { opacity: 0; }
}

.hero-light__blob { position: absolute; border-radius: 50%; }
.hero-light__blob--blue { width: 70%; height: 62%; left: -6%; top: 30%; background: radial-gradient(closest-side, var(--hl-blue), transparent); }
.hero-light__blob--violet { width: 62%; height: 58%; left: 22%; top: 18%; background: radial-gradient(closest-side, var(--hl-violet), transparent); }
.hero-light__blob--pink { width: 64%; height: 56%; left: 44%; top: 2%; background: radial-gradient(closest-side, var(--hl-pink), transparent); }
.hero-light__blob--warm { width: 54%; height: 46%; left: 38%; top: 50%; background: radial-gradient(closest-side, var(--hl-warm), transparent); }
/* The bolt runs lower-left to upper-right through the core. */
.hero-light__streak {
  position: absolute;
  left: var(--bolt-core-x);
  top: var(--bolt-core-y);
  width: 96%;
  height: var(--hl-streak-h);
  translate: -50% -50%;
  rotate: -45deg;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hl-streak);
  filter: blur(var(--hl-streak-blur));
}
.hero-light__shimmer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26%;
  background: var(--hl-shimmer);
  translate: -100% 0;
}
.hero-light__core {
  position: absolute;
  left: var(--bolt-core-x);
  top: var(--bolt-core-y);
  width: 34%;
  height: 34%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--hl-core-a), var(--hl-core-b) 45%, transparent);
  opacity: var(--hl-core-min);
}
@keyframes hl-drift-a {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 6% -5%; scale: 1.08; }
}
@keyframes hl-drift-b {
  0%, 100% { translate: 0 0; scale: 1.05; }
  50% { translate: -7% 4%; scale: .95; }
}
@keyframes hl-shimmer {
  0% { translate: -100% 0; }
  60%, 100% { translate: 400% 0; }
}
@keyframes hl-breathe {
  0%, 100% { opacity: var(--hl-core-min); scale: .9; }
  50% { opacity: var(--hl-core-max); scale: 1.08; }
}
@media (prefers-reduced-motion: no-preference) {
  .bolt__glow { animation: bolt-pulse var(--bolt-pulse-duration) ease-in-out infinite; }
  .bolt__flash { animation: bolt-flicker var(--bolt-flicker-duration) linear infinite; }
  .hero-light__blob--blue, .hero-light__blob--pink { animation: hl-drift-a var(--aurora-a-duration) ease-in-out infinite; }
  .hero-light__blob--violet, .hero-light__blob--warm { animation: hl-drift-b var(--aurora-b-duration) ease-in-out infinite; }
  .hero-light__shimmer { animation: hl-shimmer var(--hl-shimmer-duration) var(--ease-premium) infinite; }
  .hero-light__core { animation: hl-breathe var(--bolt-pulse-duration) ease-in-out infinite; }
}

/* ---------- Responsive (reference breakpoint: 900px) ---------- */
@media (max-width: 900px) {
  :root { --pad-x: 20px; --hero-pad-top: 32px; --hero-pad-bottom: 64px; --hero-scrim-shape: ellipse 95% 46% at 50% 50%; --hero-scrim-strip-start: 68%; --hero-scrim-strip-full: 76%; }
  .hide-m { display: none !important; }
  .stack-m { flex-direction: column !important; }
  .grid-m { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .grid-2m { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .site-nav__burger { display: inline-flex; }
  .impact-step:not(:last-child) .node::after { display: none; }
  .site-footer__brand { grid-column: 1 / -1; }
  .gallery__item--lead, .gallery__item--wide { grid-column: auto; grid-row: auto; }

  /* Hero pill: always one line on phones. The type scales with the viewport
     (13px from about 430px up, down to 8.5px at the narrowest), with tighter
     padding and gaps. */
  .hero__pill { max-width: 100%; white-space: nowrap; gap: 6px; padding: 4px 10px 4px 4px; font-size: clamp(8.5px, calc((100vw - 74px) / 27), 13px); }
  .hero__badge { padding: 2px 7px; font-size: .85em; }

  /* Personas: the usual section gap above, eyebrow centered over the stack. */
  .clients + .band--rule.personas-section { margin-top: 0; }
  .personas-section .personas__tabs { align-self: stretch; }
  .personas__eyebrow { padding-left: 0; text-align: center; }

  /* HR module cards: tag on its own line under the name, left-aligned, then
     the description. */
  .stage__row, .module-row__top { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .stage__short, .module-row__tag { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { transition: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* Hover states keep their color and glow, but nothing moves. */
  .btn-primary:hover, .btn-ghost:hover, a.card:hover, a.card:focus-visible, .card--hover:hover,
  .hover-lift:hover, .hover-lift:focus-visible, .whatsapp-float:hover { transform: none; }
  .gallery__item:hover img { scale: none; }
  .stage__row:hover { translate: none; }
}

/* ============================================================
   Screen classes
   One set of tokens per class of screen, so every screen shows the
   layout in the same proportions. Inside a class, sizes are fluid
   (clamp); between classes they step. The large-laptop class
   (1367-1680px) is the reference: it uses the base tokens above,
   unchanged. Windows display scaling lands in these classes too:
   1920x1080 at 125% is 1536x864 (large laptop), at 150% 1280x720
   (laptop, short).

     phone S            <= 380px
     phone              381-480px
     large phone        481-768px
     tablet             769-1024px
     laptop             1025-1366px   (base fluid tokens)
     large laptop       1367-1680px   (base tokens: the reference)
     desktop / large    >= 1681px
   plus short windows (max-height: 760px) and tall ones (min-height: 1100px).
   ============================================================ */

/* Desktop / large: the column and the type grow with the screen instead of
   leaving an ever wider margin. Each value starts where the large-laptop
   class ends (at 1680px) and grows to its cap at about 2560px. */
@media (min-width: 1681px) {
  :root {
    --container: clamp(1320px, calc(39.29vw + 660px), 1680px);
    --fs-hero-fit: clamp(86px, min(calc(2.56vw + 43px), 9.6svh), 110px);
    --fs-hero-subhead: clamp(26px, calc(.77vw + 13px), 33px);
    --fs-hero-body: clamp(18px, calc(.36vw + 12px), 21px);
    --fs-h1: clamp(52px, calc(1.55vw + 26px), 66px);
    --fs-h2: clamp(46px, calc(1.37vw + 23px), 58px);
    --fs-h2-md: clamp(40px, calc(1.19vw + 20px), 50px);
    --fs-h2-sm: clamp(36px, calc(1.07vw + 18px), 45px);
    --fs-h3: clamp(30px, calc(.89vw + 15px), 38px);
    --fs-cta: clamp(60px, calc(1.79vw + 30px), 76px);
    --fs-statement: clamp(34px, calc(1vw + 17.2px), 43px);
    --fs-lead: clamp(18px, calc(.24vw + 14px), 20px);
    --fs-eyebrow: clamp(17px, calc(.24vw + 13px), 19px);
    --fs-body: clamp(16px, calc(.12vw + 14px), 17px);
    --fs-mono-nav: clamp(13px, calc(.12vw + 11px), 14px);
    --section-y: clamp(96px, calc(2.86vw + 48px), 120px);
    --section-y-lg: clamp(120px, calc(3.57vw + 60px), 150px);
    --section-y-md: clamp(80px, calc(2.38vw + 40px), 100px);
    --section-y-sm: clamp(72px, calc(2.14vw + 36px), 90px);
    --section-y-xs: clamp(64px, calc(1.9vw + 32px), 80px);
    --page-hero-top: clamp(96px, calc(2.86vw + 48px), 120px);
    --page-hero-bottom: clamp(56px, calc(1.67vw + 28px), 70px);
    --grid-gap: clamp(20px, calc(.6vw + 10px), 25px);
    --grid-gap-tight: clamp(16px, calc(.48vw + 8px), 20px);
    --stack-gap: clamp(40px, calc(1.19vw + 20px), 50px);
    --nav-link-gap: clamp(4px, calc(.48vw - 4px), 8px);
    --hero-pad-top: 64px;
    --hero-pad-bottom: 120px;
  }
}

/* Tablet (769-1024): the wide layout from 901px, the stacked one below,
   both with tablet-sized type and padding rather than phone or laptop. */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --pad-x: 32px;
    --fs-h1: clamp(38px, 4.3vw, 44px);
    --fs-h2: clamp(32px, 3.5vw, 36px);
    --fs-h2-md: clamp(30px, 3.2vw, 33px);
    --fs-h2-sm: clamp(28px, 3vw, 31px);
    --fs-h3: clamp(24px, 2.5vw, 26px);
    --fs-statement: clamp(26px, 2.8vw, 29px);
    --fs-cta: clamp(40px, 4.4vw, 45px);
    --section-y: clamp(64px, 7vw, 72px);
    --hero-pad-top: 48px;
    --hero-pad-bottom: 88px;
  }
}

/* Large phone and small tablet (481-768). */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --pad-x: 24px;
    --fs-h2: clamp(28px, 4.2vw, 32px);
    --hero-pad-bottom: 72px;
  }
}

/* Stacked layout on tablets and large phones (601-900): cards two up
   instead of one very wide column; an odd last card takes the full row. */
@media (min-width: 601px) and (max-width: 900px) {
  .grid--3.grid-m, .grid--4.grid-m:not(.grid-2m) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid--3.grid-m > :last-child:nth-child(odd), .grid--4.grid-m:not(.grid-2m) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Phones (<= 480): the persona flow lists its four steps one under the
   other, so labels such as "Investigator" never break mid-word. */
@media (max-width: 480px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* Phone S (<= 380): slimmer side padding and type; the HR lifecycle grid
   goes to one column so module names aren't squeezed. */
@media (max-width: 380px) {
  :root {
    --pad-x: 16px;
    --fs-hero-fit: clamp(34px, 10.4vw, 40px);
    --fs-h1: clamp(30px, 8.6vw, 34px);
    --fs-h2: clamp(25px, 7vw, 26px);
  }
  .lifecycle.grid-2m { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Short laptop windows (e.g. 1280x720 at 150% scaling): tighter vertical
   rhythm; the hero's CTA-to-band distance stays the same. */
@media (min-width: 1025px) and (max-height: 760px) {
  :root {
    --hero-pad-top: 40px;
    --section-y: clamp(56px, 5.4vw, 80px);
    --page-hero-top: clamp(48px, 5vw, 72px);
  }
}

/* Tall windows: a little more air above the hero copy. */
@media (min-width: 1025px) and (min-height: 1100px) {
  :root { --hero-pad-top: 80px; }
}