/* =========================================================
   Fountain ITES — Scroll Story Edition
   One fixed, color-morphing background + pinned chapter
   transitions (Lenis + GSAP ScrollTrigger)
   ========================================================= */

:root {
  /* ---- static brand tokens (Fountain IT: blue + AI purple) ---- */
  --color-teal: #5fa8dd;
  --color-teal-dark: #3f8cc9;
  --color-blue: #2f7dc4;
  --color-purple: #5b2fd6;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --container: 1200px;
  --container-wide: 1420px;
  --radius: 20px;

  /* ---- story background theme tokens (animated by JS/GSAP) ----
     Chapter colors are identical in Light and Dark (js/script.js's
     THEMES table is not mode-aware, by design: this keeps the
     scroll-driven color morph, its 1.3s GSAP tween and every trigger
     position completely untouched). What DOES change between modes
     is how these raw hues get expressed — aurora blob opacity, the
     vignette, and a separate accessible "ink" reading of --accent —
     all below. */
  --bg-c1: #2f7dc4;   /* aurora blob 1 */
  --bg-c2: #5b2fd6;   /* aurora blob 2 */
  --bg-c3: #16285c;   /* aurora blob 3 */
  --accent: #4a94d9;  /* live accent — fills/borders/glows/blobs (kept vivid in both modes) */
  --page-base: #ffffff;

  /* ---- Light theme (default) — premium white/near-white surface ---- */
  --ink: #0f172a;
  --ink-soft: #334155;
  --ink-mute: #52606d;
  --glass-bg: rgba(15,23,42,0.035);
  --glass-bg-strong: rgba(15,23,42,0.06);
  --glass-border: rgba(15,23,42,0.10);
  --surface-alt: #f7f9fc;

  /* Accent read as TEXT/icon color on a light page needs more
     contrast than the vivid fill/glow value above — this darkens it
     (via live color-mix, so it tracks the GSAP-animated --accent
     every frame, chapter to chapter) without touching --accent
     itself, which stays the bright brand hue for badges, buttons,
     aurora blobs and anything else with dark text already on top of
     it. Verified ≥4.5:1 on white across every chapter's accent. */
  --accent-ink: color-mix(in srgb, var(--accent) 60%, black);
  --card-accent-ink: color-mix(in srgb, var(--card-accent, var(--accent)) 60%, black);
  --row-accent-ink: color-mix(in srgb, var(--row-accent, var(--accent)) 60%, black);
  --node-accent-ink: color-mix(in srgb, var(--node-accent, var(--accent)) 60%, black);
  --color-teal-ink: color-mix(in srgb, var(--color-teal) 55%, black);

  --header-scrolled-bg: rgba(255,255,255,0.72);
  --mobile-nav-bg: rgba(255,255,255,0.92);
  --mega-panel-bg: rgba(255,255,255,0.85);
  /* A deep navy "bookend" rather than another near-white band — reads
     as a deliberate anchor at the bottom of an otherwise light page
     (the same pattern Stripe/Linear/etc. use), and reuses a tone
     already in the brand palette (the whyus/capabilities/industries/
     team chapters' own --bg-c3). Dark mode's footer stays its
     original near-black, unchanged, below. */
  --footer-bg: #0e1a3d;

  --input-bg: #f7f9fc;
  --input-border: #e2e8f0;
  --input-placeholder: #94a3b8;
  --input-bg-focus: #eef2f7;

  /* generic translucent hover/press tint, scaled to whatever sits under it */
  --overlay-soft: rgba(15,23,42,0.045);
  --overlay-strong: rgba(15,23,42,0.07);

  /* secondary "ghost" button — outline + translucent fill, read
     against whatever section it lands on (hero, CTA bands, product
     pages). Dark mode restores the original white-on-dark treatment
     verbatim; light mode flips it to a dark-ink outline so it stays
     visible on a white/pastel page instead of vanishing. */
  --btn-outline-fg: var(--ink);
  --btn-outline-bg: rgba(15,23,42,0.035);
  --btn-outline-border: rgba(15,23,42,0.35);
  --btn-outline-bg-hover: rgba(15,23,42,0.07);
  --btn-outline-border-hover: var(--ink);

  /* distinct per-component elevated-panel gradients (kept separate,
     not normalized into one shared pair, so each component's own
     dark-mode identity survives unchanged) */
  --stack-card-grad-a: #ffffff;
  --stack-card-grad-b: #f5f8fc;
  --aieng-diagram-grad-a: #ffffff;
  --aieng-diagram-grad-b: #f4f7fb;
  --presence-map-grad-a: #ffffff;
  --presence-map-grad-b: #f3f6fb;

  /* full-viewport page-transition overlay + preloader */
  --preloader-bg: var(--page-base);
  --pt-bg: #ffffff;
  --pt-vignette-rgb: 15,23,42;
  --pt-vignette-alpha: 0.10;
  --pt-ring: rgba(15,23,42,0.35);
  --pt-label: rgba(15,23,42,0.45);
  --pt-bloom-1: rgba(91,63,201,0.14);
  --pt-bloom-2: rgba(15,124,146,0.12);
  --pt-bloom-3: rgba(29,95,168,0.14);
  --pt-bloom-4: rgba(91,47,214,0.10);
  --pt-dot-a: #5b3fc9;
  --pt-dot-b: #0f7c92;
  --pt-logo-glow: rgba(91,63,201,0.25);

  /* status colors — accessible on white; dark mode restores the
     original vivid values verbatim */
  --status-warning: #a5720b;
  --status-success: #178a51;
  --status-danger-bg: rgba(232,84,106,0.12);
  --status-danger-text: #b3261e;
  --status-danger-border: rgba(232,84,106,0.35);

  /* story-bg aurora: same blob colors/geometry/animation as dark
     mode, just far more restrained opacity so they read as soft
     tinted washes on white rather than solid shapes */
  --aurora-op-base: 0.22;
  --aurora-op-3: 0.18;
  --aurora-op-4: 0.16;
  --breathe-blur: 6px;
  --vignette-rgb: 148,163,184;
  --vignette-a-outer: 0.06;
  --vignette-a-top: 0.02;
  --vignette-a-bottom: 0.05;

  /* ---- fluid motion: iOS-style spring/deceleration curves used
     for hover lifts, presses and card transitions site-wide ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- material-style elevation, tinted by the live accent ---- */
  --shadow-rest: 0 14px 32px -20px rgba(15,23,42,0.14);
  --shadow-elevate: 0 24px 50px -18px rgba(15,23,42,0.16), 0 0 0 1px rgba(15,23,42,0.05);

  /* ---- Material-style elevation for graphics (icon chips, photo/
     illustration frames, logo chips) — new in Light, so Dark stays
     pixel-identical to the original (both resolve to `none` there).
     Two tiers: --elevation-1 for small icon/number chips, --elevation-2
     for images, illustration panels and logo chips. */
  --elevation-1: 0 1px 2px rgba(15,23,42,0.07), 0 4px 10px -4px rgba(15,23,42,0.16);
  --elevation-2: 0 3px 8px -2px rgba(15,23,42,0.10), 0 16px 32px -14px rgba(15,23,42,0.20);
}

/* =========================================================
   Dark theme — the site's original look, restored verbatim.
   A distinct attribute from the scroll-chapter `data-theme`
   values (hero/problems/aiengineering/...) so the two systems
   never collide: this one is Light/Dark, that one is "which
   chapter's palette is currently live."
   ========================================================= */
:root[data-color-mode="dark"] {
  --page-base: #070c16;
  --ink: #f3f6fb;
  --ink-soft: rgba(243,246,251,0.72);
  --ink-mute: rgba(243,246,251,0.5);
  --glass-bg: rgba(255,255,255,0.06);
  --glass-bg-strong: rgba(255,255,255,0.1);
  --glass-border: rgba(255,255,255,0.14);
  --surface-alt: #050a14;

  --accent-ink: var(--accent);
  --card-accent-ink: var(--card-accent, var(--accent));
  --row-accent-ink: var(--row-accent, var(--accent));
  --node-accent-ink: var(--node-accent, var(--accent));
  --color-teal-ink: var(--color-teal);

  --header-scrolled-bg: rgba(4,10,20,0.6);
  --mobile-nav-bg: rgba(4,10,20,0.92);
  --mega-panel-bg: rgba(6,12,22,0.92);
  --footer-bg: #050a14;

  --input-bg: rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.12);
  --input-placeholder: rgba(255,255,255,0.28);
  --input-bg-focus: rgba(255,255,255,0.07);

  --overlay-soft: rgba(255,255,255,0.05);
  --overlay-strong: rgba(255,255,255,0.1);

  --btn-outline-fg: #fff;
  --btn-outline-bg: rgba(255,255,255,0.06);
  --btn-outline-border: rgba(255,255,255,0.5);
  --btn-outline-bg-hover: rgba(255,255,255,0.16);
  --btn-outline-border-hover: #fff;

  --stack-card-grad-a: rgba(10,16,30,0.96);
  --stack-card-grad-b: rgba(8,12,24,0.98);
  --aieng-diagram-grad-a: rgba(17,25,48,0.96);
  --aieng-diagram-grad-b: rgba(8,12,23,0.98);
  --presence-map-grad-a: rgba(10,16,30,0.92);
  --presence-map-grad-b: rgba(5,9,18,0.98);

  --preloader-bg: #070c16;
  --pt-bg: #04060c;
  --pt-vignette-rgb: 0,0,0;
  --pt-vignette-alpha: 0.55;
  --pt-ring: rgba(255,255,255,0.5);
  --pt-label: rgba(255,255,255,0.4);
  --pt-bloom-1: rgba(123,92,240,0.32);
  --pt-bloom-2: rgba(47,176,196,0.26);
  --pt-bloom-3: rgba(47,125,196,0.30);
  --pt-bloom-4: rgba(91,47,214,0.22);
  --pt-dot-a: #7a5cf0;
  --pt-dot-b: #2fb0c4;
  --pt-logo-glow: rgba(122,92,240,0.45);

  --status-warning: #e8a33d;
  --status-success: #4dd88a;
  --status-danger-bg: color-mix(in srgb, #e8546a 22%, transparent);
  --status-danger-text: #ffb3c0;
  --status-danger-border: color-mix(in srgb, #e8546a 40%, transparent);

  --aurora-op-base: 0.6;
  --aurora-op-3: 0.65;
  --aurora-op-4: 0.55;
  --breathe-blur: 10px;
  --vignette-rgb: 3,7,14;
  --vignette-a-outer: 0.4;
  --vignette-a-top: 0.08;
  --vignette-a-bottom: 0.38;

  --shadow-rest: 0 18px 40px -22px rgba(0,0,0,0.5);
  --shadow-elevate: 0 26px 60px -18px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);

  --elevation-1: none;
  --elevation-2: none;
}

html { color-scheme: light; }
:root[data-color-mode="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html { background: var(--page-base); }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 17px;
  font-weight: 300;
  /* No background here on purpose: body is a normal in-flow box,
     so its own background paints ABOVE .story-bg's negative
     z-index layer (per the CSS stacking spec) and would hide the
     aurora/vignette/grid behind it entirely. html's background
     below covers the same color as a fallback before paint. */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-loading { overflow: hidden; }

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.2;
  font-weight: 500;
}

p { margin: 0 0 16px; }
em { font-style: normal; color: var(--accent-ink); transition: color 1.1s ease; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.site-header .container,
.hero .container {
  max-width: var(--container-wide);
  padding: 0 60px;
}

@media (max-width: 767px) {
  .site-header .container,
  .hero .container { padding: 0 24px; }
}

.section { padding: 90px 0; }
@media (max-width: 767px) { .section { padding: 56px 0; } }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(120deg, var(--accent), var(--bg-c2));
  color: #08131f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 30px;
  margin-bottom: 18px;
  box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background 1.1s ease, box-shadow 1.1s ease;
}
.badge-ghost {
  background: var(--glass-bg-strong);
  color: var(--accent-ink);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.section-head { max-width: 640px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: 44px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.2; color: var(--ink); }

.chapter-head { max-width: 720px; margin: 0 0 56px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 30px;
  font-weight: 400;
  font-size: 17px;
  font-family: var(--font-body);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-fluid), background 0.6s ease, border-color 0.6s ease;
  white-space: nowrap;
  position: relative;
}
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn:active { transform: translateY(-1px) scale(0.96); transition-duration: 0.15s; }
.btn-sm { padding: 10px 22px; font-size: 14px; }
.btn-lg { padding: 18px 38px; font-size: 18px; }

.btn-primary { background: var(--accent); color: #061019; border-color: var(--accent); box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 18px 38px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-outline-light { background: var(--btn-outline-bg); color: var(--btn-outline-fg); border-color: var(--btn-outline-border); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.btn-outline-light:hover { background: var(--btn-outline-bg-hover); border-color: var(--btn-outline-border-hover); }

/* =========================================================
   STORY BACKGROUND — single fixed layer behind every chapter
   ========================================================= */
.story-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--page-base);
}
/* Liquid gradient wash — four soft blobs that drift AND morph their
   own outline (border-radius cycling through irregular blob shapes,
   iOS/Material "fluid" style — think Apple Music's animated cover
   art or a Material You dynamic wallpaper) instead of sitting as
   static, hard-edged circles. There is deliberately no grid, dot or
   line texture anywhere in this layer — replaced the earlier literal
   grid pattern, which read as a technical circuit board rather than
   the soft, organic backdrop this site wants. */
.story-bg__aurora {
  position: absolute; inset: -10%;
  filter: blur(var(--breathe-blur)) saturate(135%);
  animation: auroraBreathe 22s ease-in-out infinite;
}
.aurora {
  position: absolute;
  filter: blur(60px);
  opacity: var(--aurora-op-base);
  will-change: transform, opacity;
  transition: background 1.2s ease, opacity 0.6s ease, filter 0.6s ease;
}

/* ---- Light mode (default): a restrained Material "gradient mesh" ----
   Soft, low-opacity blurred color washes that drift gently in place
   (small amplitude, no border-radius theatrics) — this is the same
   visual family Material Design's own surfaces use for a touch of
   brand color, not a moving-object motif competing with text. Kept
   deliberately calm: low opacity (--aurora-op-*), slow, small drift.
   Still driven by the same chapter --bg-c1/--bg-c2/--bg-c3/--accent
   variables, so the color-morph-per-section storytelling survives.
   Dark mode keeps its original, larger, faster liquid-blob wash
   verbatim (see the :root[data-color-mode="dark"] overrides below)
   — this block only ever applies in Light. */
.aurora-1 { width: 46vw; height: 46vw; top: -16vw; left: -10vw; border-radius: 50%; background: radial-gradient(circle, var(--bg-c1), transparent 70%); animation: auroraFloat1 34s ease-in-out infinite; }
.aurora-2 { width: 40vw; height: 40vw; bottom: -16vw; right: -8vw; border-radius: 50%; background: radial-gradient(circle, var(--bg-c2), transparent 70%); animation: auroraFloat2 40s ease-in-out infinite; }
.aurora-3 { width: 32vw; height: 32vw; top: 26vh; right: 16vw; border-radius: 50%; background: radial-gradient(circle, var(--bg-c3), transparent 70%); opacity: var(--aurora-op-3); animation: auroraFloat3 46s ease-in-out infinite; }
.aurora-4 { width: 26vw; height: 26vw; bottom: 8vh; left: 20vw; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 72%); opacity: var(--aurora-op-4); animation: auroraFloat4 30s ease-in-out infinite; }

@keyframes auroraFloat1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2.5vw, 3vh) scale(1.08); } }
@keyframes auroraFloat2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-3vw, -2vh) scale(1.05); } }
@keyframes auroraFloat3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-2vw, 2.5vh) scale(0.94); } }
@keyframes auroraFloat4 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2vw, -2.5vh) scale(1.1); } }

/* ---- Dark mode: the site's original liquid-blob wash, verbatim ----
   Each blob cycles through 4 irregular border-radius shapes (one per
   corner, asymmetric) so it reads as a slowly morphing liquid droplet
   rather than a circle sliding around — the actual "fluid" motion. */
:root[data-color-mode="dark"] .aurora { filter: blur(100px); will-change: transform, border-radius; }
:root[data-color-mode="dark"] .aurora-1 { width: 62vw; height: 62vw; top: -18vw; left: -10vw; background: radial-gradient(circle, var(--bg-c1), transparent 70%); animation: auroraDrift1 30s ease-in-out infinite; }
:root[data-color-mode="dark"] .aurora-2 { width: 52vw; height: 52vw; bottom: -20vw; right: -8vw; top: auto; left: auto; background: radial-gradient(circle, var(--bg-c2), transparent 70%); animation: auroraDrift2 36s ease-in-out infinite; }
:root[data-color-mode="dark"] .aurora-3 { width: 42vw; height: 42vw; top: 28vh; right: 18vw; left: auto; background: radial-gradient(circle, var(--bg-c3), transparent 70%); animation: auroraDrift3 42s ease-in-out infinite; }
:root[data-color-mode="dark"] .aurora-4 { width: 34vw; height: 34vw; bottom: 6vh; left: 22vw; top: auto; background: radial-gradient(circle, var(--accent), transparent 72%); animation: auroraDrift4 24s ease-in-out infinite; }
@keyframes auroraDrift1 {
  0%   { transform: translate(0, 0) scale(1); border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
  25%  { transform: translate(4vw, 5vh) scale(1.08); border-radius: 58% 42% 38% 62% / 62% 40% 60% 38%; }
  50%  { transform: translate(6vw, 8vh) scale(1.15); border-radius: 65% 35% 50% 50% / 35% 65% 35% 65%; }
  75%  { transform: translate(2vw, 4vh) scale(1.05); border-radius: 38% 62% 55% 45% / 55% 45% 65% 35%; }
  100% { transform: translate(0, 0) scale(1); border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
}
@keyframes auroraDrift2 {
  0%   { transform: translate(0, 0) scale(1); border-radius: 55% 45% 40% 60% / 50% 60% 40% 50%; }
  25%  { transform: translate(-4vw, -3vh) scale(1.06); border-radius: 40% 60% 62% 38% / 58% 42% 58% 42%; }
  50%  { transform: translate(-7vw, -6vh) scale(1.1); border-radius: 60% 40% 45% 55% / 40% 60% 45% 55%; }
  75%  { transform: translate(-3vw, -2vh) scale(1.04); border-radius: 48% 52% 58% 42% / 62% 38% 52% 48%; }
  100% { transform: translate(0, 0) scale(1); border-radius: 55% 45% 40% 60% / 50% 60% 40% 50%; }
}
@keyframes auroraDrift3 {
  0%   { transform: translate(0, 0) scale(1); border-radius: 48% 52% 55% 45% / 55% 45% 50% 50%; }
  25%  { transform: translate(-2vw, 4vh) scale(0.95); border-radius: 62% 38% 42% 58% / 42% 58% 62% 38%; }
  50%  { transform: translate(-5vw, 7vh) scale(0.9); border-radius: 38% 62% 60% 40% / 60% 40% 45% 55%; }
  75%  { transform: translate(-2vw, 3vh) scale(0.96); border-radius: 55% 45% 48% 52% / 48% 52% 58% 42%; }
  100% { transform: translate(0, 0) scale(1); border-radius: 48% 52% 55% 45% / 55% 45% 50% 50%; }
}
@keyframes auroraDrift4 {
  0%   { transform: translate(0, 0) scale(1); border-radius: 60% 40% 45% 55% / 45% 55% 40% 60%; }
  25%  { transform: translate(2vw, -4vh) scale(1.12); border-radius: 42% 58% 62% 38% / 60% 40% 55% 45%; }
  50%  { transform: translate(4vw, -6vh) scale(1.2); border-radius: 55% 45% 38% 62% / 38% 62% 48% 52%; }
  75%  { transform: translate(2vw, -2vh) scale(1.08); border-radius: 48% 52% 55% 45% / 55% 45% 60% 40%; }
  100% { transform: translate(0, 0) scale(1); border-radius: 60% 40% 45% 55% / 45% 55% 40% 60%; }
}
/* A very slow, subtle hue drift — the whole aurora layer breathes
   through nearby tones instead of sitting static, like a living
   wallpaper, without ever fighting the theme-driven blob colors. */
@keyframes auroraBreathe {
  0%, 100% { filter: blur(var(--breathe-blur)) saturate(135%) hue-rotate(0deg); }
  50% { filter: blur(var(--breathe-blur)) saturate(150%) hue-rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .story-bg__aurora { animation: none !important; }
  .aurora { animation: none !important; }
}

/* "Fountain Intelligence Flow" — soft floating bokeh orbs, gentle
   water-ripple rings and twinkling light-dust sparkles, drawn and
   animated in js/script.js (initNetworkBackground). Deliberately no
   connecting lines or fixed grid — those read as a circuit-board
   graph rather than the fluid, organic motion this layer is going
   for. The canvas samples --bg-c1/--bg-c2/--accent every frame, so
   it stays in lockstep with the section theme engine's color morph
   for free. */
.story-bg__network {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .story-bg__network { opacity: 0.6; }
}
.story-bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, transparent 45%, rgba(var(--vignette-rgb),var(--vignette-a-outer)) 100%),
              linear-gradient(rgba(var(--vignette-rgb),var(--vignette-a-top)), rgba(var(--vignette-rgb),var(--vignette-a-bottom)));
  transition: background 0.6s ease;
}
.story-bg__noise {
  position: absolute; inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Chapters paint above the fixed backdrop. */
.chapter, .ticker, .site-footer, .cta-section {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Chapter dot-nav
   ========================================================= */
.chapter-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chapter-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-mute);
}
.chapter-nav a span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--overlay-strong);
  border: 1px solid var(--glass-border);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.chapter-nav a em {
  font-style: normal; font-size: 11px; letter-spacing: 0.5px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.chapter-nav a:hover em { opacity: 1; transform: translateX(0); }
.chapter-nav a.is-active span {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}
.chapter-nav a.is-active em { opacity: 1; transform: translateX(0); color: var(--ink); }
@media (max-width: 1100px) { .chapter-nav { display: none; } }

/* =========================================================
   Custom cursor (desktop / fine-pointer only)
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, .cursor-hoverable { cursor: none; }
}
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  /* Above every overlay in the site (the CTA modal included, both at
     10000) — otherwise a tied z-index falls back to DOM order and an
     overlay appended later in the markup paints over the cursor. */
  z-index: 10001;
  mix-blend-mode: difference;
}
.cursor-dot { width: 8px; height: 8px; background: #fff; }
.cursor-ring {
  width: 38px; height: 38px;
  border: 1.5px solid #fff;
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
  opacity: 0.7;
}
.cursor-ring.is-active { width: 64px; height: 64px; opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* =========================================================
   Scroll progress bar
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9998;
  background: var(--overlay-strong);
}
.scroll-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--bg-c1), var(--accent));
  transform-origin: left;
  transition: background 1.1s ease;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 26px 0;
  /* Actual rendered header height (padding-top + the 44px content row
     + padding-bottom) — the mobile .main-nav drawer below needs this
     to position itself starting exactly at the header's real bottom
     edge, not react to just .container's own (padding-less) height. */
  --header-h: 96px;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
.site-header.scrolled {
  padding: 14px 0;
  --header-h: 72px;
  background: var(--header-scrolled-bg);
  backdrop-filter: blur(26px) saturate(175%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }

.logo { display: inline-flex; align-items: center; }
.logo-img { height: 40px; width: auto; display: block; }
.logo-img-footer { height: 44px; }

.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav ul { display: flex; gap: 30px; }
.main-nav a {
  color: var(--ink); font-size: 16px; font-weight: 400;
  display: flex; align-items: center; gap: 5px; opacity: 0.85;
  position: relative;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1.5px;
  background: var(--accent);
  transition: width 0.3s ease, background 0.6s ease;
}
.main-nav a:hover::after { width: 100%; }
.main-nav a:hover { opacity: 1; }

.header-icons { display: flex; align-items: center; gap: 18px; color: var(--ink); }
.header-phone { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; opacity: 0.9; }
.header-phone i { color: var(--accent-ink); }
@media (max-width: 900px) { .header-phone span { display: none; } }
/* width/height/centering: the icon alone (24px) plus the browser's
   default button padding measured out to only ~33x30px — under the
   ~44x44px minimum tap target iOS/Material both recommend, and
   noticeably smaller than the adjacent .theme-toggle's deliberate
   34x34px. Background/border stay none, so this only grows the
   invisible tappable area — the icon itself is unchanged in size,
   color or position. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: none; color: var(--ink); font-size: 24px; cursor: pointer;
}

/* ---- Light/Dark toggle: injected into .header-icons by
   js/theme-toggle.js, right after the phone link. Icon-only,
   same rough footprint as .nav-toggle, so it drops into the
   existing row without shifting the phone link or CTA button. ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--overlay-soft); border: 1px solid var(--glass-border);
  color: var(--ink); font-size: 14px; cursor: pointer; padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s var(--ease-spring);
}
.theme-toggle:hover { background: var(--overlay-strong); }
.theme-toggle:active { transform: scale(0.9); }
/* Kept visible at every width, including small mobile — dark/light
   mode should stay reachable everywhere, not just on larger screens. */

/* ---- Header CTA: dropped on small/narrow screens ----
   Below 640px, the header row is logo + phone icon + theme toggle +
   hamburger; the full "Discuss Your Project" button no longer fits
   next to those without crowding or overflowing the viewport, and the
   same CTA already appears in the hero content just below the fold —
   so it's dropped here rather than shrunk, which would just recreate
   the crowding with smaller tap targets. */
@media (max-width: 640px) { .header-icons > .btn { display: none; } }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; color: var(--accent-ink); }
.hero-decor svg { position: absolute; transition: color 1.1s ease; }
.hero-decor .ring-a { top: 12%; right: 10%; width: 220px; opacity: 0.3; }
.hero-decor .ring-b { bottom: 14%; right: 22%; width: 120px; opacity: 0.4; }

/* width:100% is the actual root fix for the hero-slider width bug
   (the .hero-content/.hero-media width:100% + grid minmax(0,...)
   fixes elsewhere were real but insufficient): .hero is `display:flex`
   for its own layout purposes, which makes THIS container a flex
   item — and a flex item with no flex-grow/width defaults to sizing
   itself off its own content (flex-basis:auto), not filling the row.
   Every level below this one (the grid, its two items) was correctly
   proportioned; it just had a smaller, content-dependent amount of
   space to divide up in the first place. */
.hero .container { position: relative; z-index: 2; padding-top: 110px; padding-bottom: 70px; width: 100%; }
/* minmax(0, ...) on both tracks, not bare 1.1fr/0.9fr, is the actual
   fix (not the width:100% below, which only masked the symptom on
   one item at a time): grid items default to min-width:auto, i.e.
   "don't shrink below my own content's width" — with a bare fr track
   that lets a track's real size follow whichever item's content is
   currently widest instead of the fixed 1.1/0.9 ratio, which is
   exactly why the hero-slider text column measured a different width
   per slide (its own content) instead of a constant track width.
   minmax(0, Nfr) overrides that default back to 0, so the ratio is
   the only thing deciding each track's size, full stop. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; }
/* width:100% is load-bearing (same reasoning as .hero-media below):
   without it, this grid item was sizing to its OWN content's
   max-content width instead of reliably filling its grid track —
   confirmed by measuring it at 603px for shorter hero-slider copy
   and 620px (the max-width cap) for longer copy, on the exact same
   viewport. The whole point of the slider is that its 4 variants
   read as one consistent layout, not 4 slightly different widths. */
.hero-content { max-width: 620px; width: 100%; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.5px;
  color: var(--accent-ink);
  margin-bottom: 24px;
  transition: color 1.1s ease;
}

/* ---- two-tone eyebrow pill (solid chip + outline text) ---- */
.eyebrow-pill {
  display: inline-flex; align-items: center;
  border-radius: 30px; overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  margin-bottom: 26px;
}
.eyebrow-pill-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #061019;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  padding: 10px 18px; border-radius: 30px;
  white-space: nowrap;
  transition: background 1.1s ease;
}
.eyebrow-pill-text {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.3px; color: var(--ink-soft);
  padding: 10px 18px 10px 14px;
  white-space: nowrap;
}
@media (max-width: 560px) { .eyebrow-pill-text { display: none; } }

.split-line { overflow: hidden; display: block; }
.split-line > span { display: inline-block; will-change: transform; }

.hero-content h1 {
  color: var(--ink);
  font-size: 62px;
  font-weight: 300;
  line-height: 1.18;
  margin-bottom: 26px;
  letter-spacing: -1px;
}
.hero-content h1 strong { font-weight: 700; }
.hero-content h1 em { font-weight: 700; }
@media (max-width: 1100px) { .hero-content h1 { font-size: 46px; } }

/* min-height reserves room for the longest of the 4 hero-slider
   paragraphs (js/script.js initHeroSlider) so a shorter one doesn't
   shrink the hero row and reflow everything below it on slide
   change. Measured each of the 4 actual paragraph strings' rendered
   height (not guessed): 115px is the tallest down to the existing
   600px breakpoint (p's own 520px max-width is the binding
   constraint the whole way down to there); below 600px the same
   text wraps to a 5th line, so the reserved height grows there too. */
.hero-content p { color: var(--ink-soft); font-size: 18px; max-width: 520px; margin-bottom: 34px; min-height: 116px; }
@media (max-width: 600px) { .hero-content p { min-height: 174px; } }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---- hero copy, synced to the slider (js/script.js initHeroSlider):
   eyebrow/heading/paragraph fade out, swap text, fade back in, timed
   to land right as the matching image finishes crossfading in. ---- */
.hero-copy { transition: opacity 0.35s ease; }
.hero-copy.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-copy { transition: none; } }

/* ---- hero photo + stat badge + rotating "orbit" ring ---- */
/* width:100% is load-bearing, not decorative: .hero-media is a grid
   item whose only in-flow child (.hero-media-frame) now holds nothing
   but position:absolute slides (for the crossfade), so it has no
   min-content width of its own to stretch against — without an
   explicit width the item was collapsing to ~66px instead of filling
   its grid cell. Confirmed by direct measurement before/after. */
.hero-media { position: relative; width: 100%; }
.hero-media-frame {
  position: relative;
  height: 460px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55);
  border: 1px solid var(--glass-border);
}
.hero-media-frame img { width: 100%; height: 460px; object-fit: cover; }
.hero-media-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(4,10,20,0.75) 100%);
}

.stat-badge {
  position: absolute;
  left: 22px; bottom: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(8,14,26,0.55);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.stat-badge-num { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.stat-badge-label { font-size: 12px; color: rgba(255,255,255,0.7); }

.hero-media-orbit {
  position: absolute;
  right: -34px; bottom: -34px;
  width: 118px; height: 118px;
  color: var(--accent-ink);
  transition: color 1.1s ease;
  z-index: 3;
}
.hero-media-orbit svg { width: 100%; height: 100%; animation: orbitSpin 16s linear infinite; }
.hero-media-orbit-core {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: auto; width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #061019;
  font-size: 15px;
  transition: background 1.1s ease;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-media-orbit svg { animation: none; } }

/* ---- hero slider: 4 crossfading slides behind the persistent
   stat-badge/orbit, each highlighting one thing Fountain leads
   with (see js/script.js initHeroSlider). Autoplay pauses on
   hover/focus and respects prefers-reduced-motion. ---- */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Same footprint as the photo slides (fills the full 100%x460px
   frame, nothing shrunk/inset) — only the fit mode differs, since a
   flat map has empty margins a "cover" crop would just cut off. */
.hero-slide-map {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--bg-c2) 16%, transparent)), var(--page-base);
}
.hero-slide-map img { width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.4)); }
.hero-slide-caption {
  position: absolute; left: 22px; top: 22px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 8px 14px; border-radius: 20px;
  background: rgba(8,14,26,0.55); border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  color: #fff;
}
/* Below the frame now (in-flow sibling of .hero-media-frame, not
   overlapping the image) — was originally absolutely positioned over
   the photo's bottom-right corner, which put it behind/under other
   overlapping elements in practice and wasn't reliably clickable. */
.hero-slide-dots {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 18px;
}
.hero-slide-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--overlay-strong); border: none; padding: 0; cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.hero-slide-dot:hover { background: var(--ink-mute); }
.hero-slide-dot.is-active { background: var(--accent); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* Content (eyebrow, headline, copy, actions) keeps document order and
     renders first; the hero image follows last on mobile per content
     hierarchy — do not reorder it above the headline. */
  .hero-media { max-width: 480px; margin: 0 auto; }
  .hero-media-frame { height: 340px; }
  .hero-media-frame img { height: 340px; }
}
@media (max-width: 600px) {
  .hero-media-orbit { display: none; }
}

.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.scroll-cue__line {
  width: 1px; height: 34px;
  background: linear-gradient(var(--ink-mute), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0; width: 100%; height: 100%;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* =========================================================
   Marquee ticker
   ========================================================= */
.ticker {
  overflow: hidden;
  padding: 22px 0;
  position: relative;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 48px;
  will-change: transform;
}
.ticker-track span {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.ticker-track span i { color: var(--accent-ink); font-size: 10px; transition: color 1.1s ease; }

/* =========================================================
   Chapter pin + slide-stack ("content changes in motion")
   ========================================================= */
.chapter-pin { height: 100vh; display: flex; align-items: center; overflow: hidden; }
.chapter-inner { width: 100%; }

.slide-stack {
  position: relative;
  height: 440px;
}
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: 56px;
  opacity: 0;
  will-change: transform, opacity;
}
.slide:first-child { opacity: 1; }

.slide-text {
  flex: 0 0 420px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide-num {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent-ink);
  letter-spacing: 2px;
  margin-bottom: 18px;
  transition: color 1.1s ease;
}
.slide h3 { font-size: 34px; margin-bottom: 16px; }
.slide p { font-size: 17px; color: var(--ink-soft); margin: 0; }

/* ---- large photo panel filling the rest of the row: a low-
   opacity vector pattern etched over the image, plus an icon
   badge inset in the corner ---- */
.slide-media {
  position: relative;
  flex: 1 1 auto;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55);
}
.slide-media img { width: 100%; height: 100%; object-fit: cover; }
.slide-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(6,12,22,0.1), rgba(6,12,22,0.58));
  pointer-events: none;
}
.slide-media-vector {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: #fff;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.slide-media-badge {
  position: absolute;
  left: 24px; bottom: 24px;
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #061019;
  background: var(--accent);
  border: 3px solid var(--page-base);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: background 1.1s ease;
  z-index: 2;
}

.slide-dots { display: flex; gap: 10px; margin-top: 44px; }
.slide-dots .dot {
  width: 34px; height: 4px; border-radius: 4px;
  background: var(--overlay-strong);
  transition: background 0.35s ease, width 0.35s ease;
}
.slide-dots .dot.is-active { background: var(--accent); width: 54px; }

@media (max-width: 1024px) {
  .slide-text { flex: 0 0 320px; max-width: 320px; }
  .slide h3 { font-size: 28px; }
}

@media (max-width: 767px) {
  .chapter-pin { height: auto; min-height: 100vh; padding: 80px 0; }
  .slide-stack { height: 640px; }
  .slide { flex-direction: column; gap: 22px; }
  .slide-text { flex: 0 0 auto; max-width: 100%; justify-content: flex-start; }
  .slide-media { flex: 0 0 240px; width: 100%; }
  .slide-media-badge { width: 46px; height: 46px; font-size: 17px; left: 14px; bottom: 14px; }
  .slide h3 { font-size: 26px; }
}

/* =========================================================
   Why Choose Us — portrait + gradient stat card, feature pair
   ========================================================= */
.whyus-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 70px; align-items: center; }

.whyus-visual { position: relative; }
.whyus-visual img {
  width: 100%; height: 480px; object-fit: cover; border-radius: 28px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55);
}
.whyus-stat-card {
  position: absolute; right: -6%; bottom: -30px; width: 62%;
  padding: 28px 26px 24px; border-radius: 22px;
  background: linear-gradient(155deg, var(--accent), var(--bg-c2));
  box-shadow: 0 24px 50px -16px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background 1.1s ease;
}
.whyus-stat-num { display: block; font-family: var(--font-heading); font-size: 34px; font-weight: 700; color: #08131f; letter-spacing: -0.5px; }
.whyus-stat-num .stat-badge-plus { color: #08131f; }
.whyus-stat-label { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: rgba(8,19,31,0.78); line-height: 1.4; }

.whyus-seal { position: absolute; left: -28px; bottom: -28px; width: 104px; height: 104px; color: var(--ink); z-index: 3; transition: color 1.1s ease; }
.whyus-seal svg { width: 100%; height: 100%; animation: orbitSpin 18s linear infinite; }
.whyus-seal-core {
  position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #061019; font-size: 14px;
  transition: background 1.1s ease, transform 0.3s ease;
}
.whyus-seal-core:hover { transform: scale(1.08); }

.whyus-content h2 { font-size: 42px; font-weight: 500; max-width: 560px; }
.whyus-content > p { max-width: 540px; font-size: 17px; }

.whyus-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0 34px; }
.whyus-feature {
  padding: 26px 24px; border-radius: 22px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform 0.45s var(--ease-fluid), box-shadow 0.45s var(--ease-fluid), border-color 0.3s ease;
}
.whyus-feature:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow-elevate); }
.whyus-feature-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-ink);
  box-shadow: var(--elevation-1);
  font-size: 18px; transition: color 1.1s ease, background 1.1s ease;
}
.whyus-feature h3 { font-size: 17px; margin-bottom: 8px; color: var(--ink); }
.whyus-feature p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

.whyus-bottom { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--glass-border); }
.whyus-contact { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-soft); }
.whyus-contact i {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--accent-ink);
  transition: color 1.1s ease;
}
.whyus-contact strong { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .whyus-grid { grid-template-columns: 1fr; gap: 60px; }
  .whyus-visual { margin-bottom: 30px; }
  .whyus-stat-card { position: relative; right: 0; bottom: 0; width: 100%; margin-top: -40px; }
  .whyus-seal { display: none; }
  .whyus-features { grid-template-columns: 1fr; }
}

/* =========================================================
   Who We Are — full-bleed office banner + mission/vision strip
   ========================================================= */
.about-wrap { padding: 60px 0 90px; }

.about-banner {
  position: relative;
  width: 100%;
  min-height: 620px;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6);
}
.about-banner-bg { position: absolute; inset: 0; }
.about-banner-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.about-banner-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 35%, rgba(4,9,18,0.55) 100%),
    linear-gradient(100deg, rgba(4,9,18,0.95) 0%, rgba(4,9,18,0.85) 34%, rgba(4,9,18,0.5) 64%, rgba(4,9,18,0.28) 100%);
}
.about-banner-outline {
  position: absolute; left: 0; right: 0; bottom: -0.06em;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(60px, 11vw, 150px);
  line-height: 1; white-space: nowrap; overflow: hidden;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.14);
  letter-spacing: 2px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.about-banner-inner { position: relative; z-index: 2; max-width: 620px; }
.about-banner-pill { margin-bottom: 22px; }
/* This copy sits directly over the banner photo's dark scrim
   (.about-banner-bg::after, above), which stays dark regardless of
   site theme — so its text stays fixed-light regardless of theme
   too, same as every other photo-caption on the site. Overrides the
   global h1-h5/p -> var(--ink)/var(--ink-soft) cascade, which would
   otherwise go dark-on-dark here in Light mode. */
.about-banner-inner h2 { font-size: 42px; font-weight: 500; color: #fff; }
.about-banner-inner p { font-size: 16px; max-width: 520px; color: rgba(255,255,255,0.82); }
.about-banner-pill .eyebrow-pill-text { color: rgba(255,255,255,0.85); }
.about-banner-pill.eyebrow-pill { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); }

.about-banner-logo {
  position: absolute; top: 40px; right: 48px; z-index: 2;
  width: 220px; padding: 20px 26px; border-radius: 18px;
  background: rgba(8,14,26,0.55); border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.about-banner-logo img { width: 100%; height: auto; object-fit: contain; }

.about-banner-seal { position: absolute; right: 56px; bottom: 44px; width: 104px; height: 104px; color: #fff; z-index: 2; }
.about-banner-seal svg { width: 100%; height: 100%; animation: orbitSpin 20s linear infinite; }
.about-banner-seal-core {
  position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #061019; font-size: 14px; transition: background 1.1s ease;
}

.about-support { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 26px; }
.about-support-col {
  padding: 28px 26px; border-radius: 20px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.about-support-col h4 { font-size: 14px; color: var(--accent-ink); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; transition: color 1.1s ease; }
.about-support-col p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.about-support-checklist .why-checklist { margin-top: 4px; }

.why-checklist { display: flex; flex-direction: column; gap: 10px; }
.why-checklist li {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink); font-size: 14px; font-weight: 500;
}
.why-checklist .check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  color: #061019;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0;
  transition: background 1.1s ease;
}

@media (max-width: 900px) {
  .about-wrap { padding: 60px 0 80px; }
  .about-banner { min-height: 560px; border-radius: 22px; margin-bottom: 40px; }
  .about-banner-logo { display: none; }
  .about-banner-seal { right: 24px; bottom: 24px; width: 76px; height: 76px; }
  .about-banner-seal-core { width: 30px; height: 30px; font-size: 11px; }
  .about-support { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .about-banner-inner h2 { font-size: 30px; }
}

/* =========================================================
   Core capabilities — sticky stacking cards (Fexora-style):
   each card pins near the top of the viewport while the next
   one slides up to cover it, cascading as you scroll.
   ========================================================= */
.stack-list { position: relative; }
.stack-card {
  display: block; /* cards are <a> elements now (link to the service detail
  page); anchors default to display:inline, which breaks position:sticky
  and full-width layout, so this restates the block behavior a <div> had
  for free. */
  position: sticky;
  top: calc(110px + var(--stack-i, 0) * 14px);
  background: linear-gradient(160deg, var(--stack-card-grad-a), var(--stack-card-grad-b));
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  padding: 38px 40px;
  margin-bottom: 24px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6);
}
.stack-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.stack-num { font-family: var(--font-mono); font-size: 14px; color: var(--ink-mute); letter-spacing: 1px; }
.stack-ico {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  border: 1px solid var(--glass-border); color: var(--ink-soft); font-size: 19px;
  box-shadow: var(--elevation-1);
}
.stack-ico em {
  position: absolute; right: -5px; bottom: -5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--page-base);
  transition: background 1.1s ease;
}
.stack-card h3 { font-size: 26px; margin-bottom: 12px; color: var(--ink); }
.stack-card p { font-size: 15px; color: var(--ink-soft); max-width: 560px; margin-bottom: 22px; }
.stack-tags { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--glass-border); }
.stack-tags span {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 16px; border-radius: 20px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
}

/* Every capability card carries its own dedicated photo/illustration.
   A small top inset keeps the image feeling framed within the card
   rather than cut off flush against its top border. */
.stack-card-media-variant { padding-top: 18px; overflow: hidden; }
.stack-card-media { width: 100%; height: 190px; margin: 0 0 26px; border-radius: 20px; overflow: hidden; }
.stack-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stack-card-media-variant .stack-card-top,
.stack-card-media-variant h3,
.stack-card-media-variant p,
.stack-card-media-variant .stack-tags,
.stack-card-media-variant .stack-explore { padding-left: 40px; padding-right: 40px; }
.stack-card-media-variant .stack-explore { padding-bottom: 38px; box-sizing: border-box; }

/* Cards are <a> elements (link to the service detail page): a
   dedicated affordance line makes the whole-card link obvious,
   colored by the per-card --card-accent set inline in the markup. */
.stack-explore { display: flex; margin-top: 20px; text-transform: uppercase; }

@media (max-width: 767px) {
  .stack-card { padding: 30px 26px; }
  .stack-card-media-variant { padding-top: 14px; }
  .stack-card h3 { font-size: 21px; }
  .stack-card-media { height: 160px; }
  .stack-card-media-variant .stack-card-top,
  .stack-card-media-variant h3,
  .stack-card-media-variant p,
  .stack-card-media-variant .stack-tags,
  .stack-card-media-variant .stack-explore { padding-left: 26px; padding-right: 26px; }
  .stack-card-media-variant .stack-explore { padding-bottom: 30px; }
}

/* =========================================================
   AI-Driven Software Engineering — Fountain's core engineering
   differentiator. A "Business Challenge → Human + AI core → metro-
   rail SDLC (with a feedback loop) → Business Outcomes" system
   visualization, given a wider breakout panel than the standard
   .container so it can dominate the section, plus a typographic
   benefits band underneath that echoes the diagram's own icons.
   ========================================================= */
.ai-engineering { padding-top: 84px; }

.ai-eng-head { max-width: 720px; margin: 0 auto 8px; text-align: center; }
.ai-eng-head .eyebrow-pill { margin-left: auto; margin-right: auto; }
.ai-eng-head h2 { font-size: 44px; font-weight: 500; letter-spacing: -0.5px; }
.ai-eng-lead { font-size: 17px; max-width: 620px; margin: 0 auto 28px; }

.ai-eng-explore {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-ink); font-weight: 600; font-size: 14.5px;
  transition: color 1.1s ease, gap 0.3s ease;
}
.ai-eng-explore i { font-size: 12px; transition: transform 0.3s ease; }
.ai-eng-explore:hover i { transform: translateX(4px); }

/* ---- breakout wrapper: noticeably wider than the standard 1200px
   .container so the visualization reads as the section's centerpiece
   rather than another boxed-in content block ---- */
.ai-eng-visual-wrap { width: 100%; max-width: 1360px; margin: 40px auto 64px; padding: 0 24px; }

/* ---- the engineering visualization panel ---- */
.ai-eng-diagram {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 80px 48px 64px;
  border-radius: 14px;
  background: linear-gradient(165deg, var(--aieng-diagram-grad-a), var(--aieng-diagram-grad-b));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-elevate);
  overflow: hidden;
}
.ai-eng-diagram-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--glass-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--glass-border) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 40%, transparent 92%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 40%, transparent 92%);
  pointer-events: none;
}
.ai-eng-diagram-glow {
  position: absolute;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
  transition: background 1.1s ease;
}
.ai-eng-diagram-glow-a {
  top: -18%; left: 8%; width: 56%; height: 52%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%);
}
.ai-eng-diagram-glow-b {
  bottom: -22%; right: 4%; width: 52%; height: 56%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, #2fd0e0 26%, transparent), transparent 70%);
  animation-delay: -4.5s;
}
@media (prefers-reduced-motion: no-preference) {
  .ai-eng-diagram-glow { animation: aiEngGlowBreathe 9s ease-in-out infinite; }
}
@keyframes aiEngGlowBreathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.1); }
}

.ai-eng-endpoint {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--ink-soft);
  padding: 12px 24px; border-radius: 30px;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--accent) 50%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.ai-eng-endpoint i { color: var(--accent-ink); transition: color 1.1s ease; }

/* connecting line between endpoints, core and the stage rail —
   draws in (scaleY) once the diagram enters view */
.ai-eng-link {
  position: relative; z-index: 2;
  width: 1px; height: 52px;
  margin: 2px 0;
  background: linear-gradient(var(--accent), transparent);
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0.7;
  transition: transform 1s var(--ease-fluid);
}
.ai-eng-diagram.is-inview .ai-eng-link { transform: scaleY(1); }

/* ---- Human + AI core: the visual heart of the diagram ---- */
.ai-eng-core { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ai-eng-core-node {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 168px;
}
.ai-eng-core-ico {
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 26px;
  font-size: 32px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent-ink);
  box-shadow: var(--elevation-1);
  transition: color 1.1s ease, background 1.1s ease, border-color 1.1s ease;
}
.ai-eng-core-node, .ai-eng-core-node-ai { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .ai-eng-core-node .ai-eng-core-ico::after {
    content: ''; position: absolute; inset: -8px; border-radius: 32px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    animation: aiEngPulse 2.8s ease-out infinite;
  }
  .ai-eng-core-node-ai .ai-eng-core-ico::after { animation-delay: 1.4s; }
}
@keyframes aiEngPulse {
  0% { transform: scale(0.94); opacity: 0.9; }
  100% { transform: scale(1.3); opacity: 0; }
}
.ai-eng-core-label { font-size: 14.5px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.35; }

/* short connector lines meeting at a pulsing hub dot between the
   two core nodes — the point where "human + AI" becomes one system
   feeding the lifecycle below */
.ai-eng-core-hub { display: flex; align-items: center; gap: 0; width: 72px; }
.ai-eng-core-hub-line { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, transparent)); opacity: 0.6; }
.ai-eng-core-hub-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 16px 2px color-mix(in srgb, var(--accent) 60%, transparent);
}

.ai-eng-lifecycle-label {
  position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-ink); margin: 4px 0 40px; transition: color 1.1s ease;
}

/* ---- the SDLC "metro rail": nodes strung on a live line rather
   than boxed cards, illuminating in sequence as the diagram scrolls
   into view, with a signal dot traveling the line continuously ---- */
.ai-eng-rail {
  position: relative; z-index: 2; width: 100%; max-width: 980px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 2px;
}
.ai-eng-rail-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 50%, transparent) 12%, color-mix(in srgb, var(--accent) 50%, transparent) 88%, color-mix(in srgb, var(--accent) 12%, transparent));
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-fluid) 0.15s, background 1.1s ease;
}
.ai-eng-diagram.is-inview .ai-eng-rail-line { transform: translateY(-50%) scaleX(1); }
.ai-eng-rail-signal {
  position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--accent) 75%, transparent);
  opacity: 0; pointer-events: none;
}
.ai-eng-diagram.is-inview .ai-eng-rail-signal { opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
  .ai-eng-diagram.is-inview .ai-eng-rail-signal { animation: aiEngSignalRow 4.6s linear infinite 1.5s; }
}
@keyframes aiEngSignalRow { 0% { left: 0%; opacity: 0; } 6% { opacity: 0.9; } 94% { opacity: 0.9; } 100% { left: 100%; opacity: 0; } }

.ai-eng-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0.55; transition: opacity 0.5s ease; }
.ai-eng-stage.is-active { opacity: 1; }
.ai-eng-stage-dot {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 17px; color: var(--ink-mute);
  background: var(--page-base);
  border: 2px solid var(--glass-border);
  transition: color 0.5s ease, border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease, transform 0.5s var(--ease-spring);
}
.ai-eng-stage.is-active .ai-eng-stage-dot {
  color: var(--accent-ink); border-color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 20%, var(--page-base));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 22px -2px color-mix(in srgb, var(--accent) 75%, transparent);
  transform: scale(1.08);
}
.ai-eng-stage span:last-child { font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: color 0.5s ease; }
.ai-eng-stage.is-active span:last-child { color: var(--ink); }

/* ---- feedback loop: Optimize curves back to Discover ---- */
.ai-eng-loop { position: relative; z-index: 2; width: 100%; max-width: 660px; margin: 2px 0 0; }
.ai-eng-loop-svg { display: block; width: 100%; height: 44px; overflow: visible; }
.ai-eng-loop-path {
  fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 130; stroke-dashoffset: 130;
  transition: stroke-dashoffset 1.3s var(--ease-fluid) 0.6s, stroke 1.1s ease;
  opacity: 0.75;
}
.ai-eng-diagram.is-inview .ai-eng-loop-path { stroke-dashoffset: 0; }
.ai-eng-loop-label {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--ink-mute); background: var(--page-base); padding: 3px 12px;
}
.ai-eng-loop-label i { color: var(--accent-ink); }
.ai-eng-loop-compact { display: none; }

@media (max-width: 900px) {
  .ai-eng-rail { flex-direction: column; align-items: flex-start; gap: 30px; max-width: 300px; margin: 0 auto; padding: 4px 0; }
  .ai-eng-rail-line {
    left: 22px; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 50%, transparent) 12%, color-mix(in srgb, var(--accent) 50%, transparent) 88%, color-mix(in srgb, var(--accent) 12%, transparent));
    transform: scaleY(0); transform-origin: top;
  }
  .ai-eng-diagram.is-inview .ai-eng-rail-line { transform: scaleY(1); }
  .ai-eng-rail-signal { top: 0; left: 18px; margin-top: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .ai-eng-diagram.is-inview .ai-eng-rail-signal { animation-name: aiEngSignalCol; }
  }
  .ai-eng-stage { flex-direction: row; align-items: center; gap: 16px; }
  .ai-eng-stage span:last-child { text-align: left; }

  .ai-eng-loop { display: none; }
  .ai-eng-loop-compact {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    padding: 12px 18px; border-radius: 10px; margin-top: 6px;
  }
  .ai-eng-loop-compact i { color: var(--accent-ink); }
}
@keyframes aiEngSignalCol { 0% { top: 0%; opacity: 0; } 6% { opacity: 0.9; } 94% { opacity: 0.9; } 100% { top: 100%; opacity: 0; } }

@media (max-width: 767px) {
  .ai-engineering { padding-top: 60px; }
  .ai-eng-diagram { padding: 56px 22px 44px; }
  .ai-eng-head h2 { font-size: 32px; }
  .ai-eng-link { height: 36px; }
  .ai-eng-core { gap: 4px; }
  .ai-eng-core-node { width: 120px; }
  .ai-eng-core-ico { width: 64px; height: 64px; font-size: 24px; border-radius: 20px; }
  .ai-eng-core-hub { width: 40px; }
}
@media (max-width: 420px) {
  .ai-eng-core { flex-direction: column; gap: 14px; }
  .ai-eng-core-hub { flex-direction: column; height: 40px; width: auto; }
  .ai-eng-core-hub-line { width: 1px; height: auto; }
}

.ai-eng-tools { max-width: 720px; margin: 0 auto; text-align: center; font-size: 13.5px; color: var(--ink-mute); }
.ai-eng-tools span { color: var(--ink-soft); font-weight: 600; }

/* ---- one authentic supporting photo: real engineers + a real
   collaborative robotic arm, not a composited humanoid render —
   grounds the abstract diagram above in something tangible ---- */
.ai-eng-photo-banner {
  position: relative;
  width: 100%; max-width: 1152px; margin: 48px auto 0;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-elevate);
}
.ai-eng-photo-banner img { width: 100%; height: 100%; aspect-ratio: 1200 / 500; object-fit: cover; display: block; }
.ai-eng-photo-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,10,20,0.82) 0%, rgba(6,10,20,0.5) 32%, rgba(6,10,20,0.05) 60%);
}
.ai-eng-photo-caption {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 0 40px; max-width: 380px;
}
.ai-eng-photo-caption-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  /* This label always sits over the photo's fixed dark scrim
     (.ai-eng-photo-banner::after) regardless of site theme, same as
     the white caption text right below it — so it needs the vivid,
     theme-invariant --accent, not --accent-ink (which light mode
     darkens for text on a plain page background and would go
     near-invisible on this dark backdrop). */
  color: var(--accent); transition: color 1.1s ease;
}
.ai-eng-photo-caption p { margin: 0; font-size: 16px; font-weight: 500; color: #fff; line-height: 1.4; }

/* Below ~767px the caption moves off the photo entirely (a 2.4:1 crop
   leaves too little height for an overlay to stay legible at phone
   widths) and becomes a plain block underneath instead. */
@media (max-width: 767px) {
  .ai-eng-photo-banner { display: flex; flex-direction: column; }
  .ai-eng-photo-banner::after { display: none; }
  .ai-eng-photo-caption {
    position: static; max-width: none;
    padding: 20px 22px; gap: 8px;
    background: rgba(10,15,28,0.7);
  }
  .ai-eng-photo-caption p { font-size: 14.5px; }
}

/* ---- hairline divider marking the shift from "how" to "what it
   means for clients" within the same chapter ---- */
.ai-eng-divider {
  display: block; width: 100%; max-width: 1120px;
  height: 1px; margin: 56px auto 52px;
  background: linear-gradient(90deg, transparent, var(--glass-border) 20%, var(--glass-border) 80%, transparent);
}

/* ---- "What this means for our clients" — editorial, typographic
   benefit blocks: thin hairline dividers instead of card chrome,
   large graphical keywords carrying the message, small icons and
   an accent tick echoing the lifecycle rail above rather than
   invented stats. ---- */
.ai-eng-benefits-head { max-width: 620px; margin: 0 auto 48px; text-align: center; }
.ai-eng-benefits-head h3 { font-size: 30px; font-weight: 500; color: var(--ink); margin-bottom: 12px; }
.ai-eng-benefits-head p { font-size: 15.5px; color: var(--ink-soft); margin: 0; }

.ai-eng-benefit-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--glass-border);
}
.ai-eng-benefit {
  padding: 28px 26px 6px; border-left: 1px solid var(--glass-border);
}
.ai-eng-benefit:first-child { border-left: none; }
.ai-eng-benefit-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ai-eng-benefit-index { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 1px; }
.ai-eng-benefit-top i { font-size: 15px; color: var(--accent-ink); transition: color 1.1s ease; }
.ai-eng-benefit-bar { display: block; width: 30px; height: 2px; margin-bottom: 18px; background: var(--accent); transition: background 1.1s ease; }
.ai-eng-benefit-word {
  margin: 0 0 16px; font-family: var(--font-heading);
  line-height: 1; letter-spacing: -0.5px;
  font-size: clamp(28px, 3vw, 38px); font-weight: 600; color: var(--ink);
}
.ai-eng-benefit-word em {
  display: block; font-style: normal; font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px); text-transform: uppercase;
  color: var(--accent-ink); letter-spacing: 0.5px; margin-bottom: 4px;
  transition: color 1.1s ease;
}
.ai-eng-benefit > p { font-size: 13.5px; color: var(--ink-soft); max-width: 260px; }

.ai-eng-benefit-extra {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;
  max-width: 900px; margin: 46px auto 0;
  padding-top: 32px; border-top: 1px solid var(--glass-border);
}
.ai-eng-benefit-extra-item h5 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.ai-eng-benefit-extra-item p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

@media (max-width: 900px) {
  .ai-eng-benefit-grid { grid-template-columns: 1fr 1fr; border-top: none; }
  .ai-eng-benefit { border-left: none; border-top: 1px solid var(--glass-border); }
  .ai-eng-benefit:nth-child(2n+1) { border-left: none; }
  .ai-eng-benefit-extra { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .ai-eng-benefit-grid { grid-template-columns: 1fr; }
  .ai-eng-benefit > p { max-width: none; }
}

/* =========================================================
   Stat helpers (reused by hero + impact-style numbers)
   ========================================================= */
.stat-num {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-heading); font-size: 42px; font-weight: 700;
  line-height: 1; color: var(--ink); margin-bottom: 10px; letter-spacing: -1px;
}
.stat-num .stat-suffix { font-size: 22px; font-weight: 700; color: var(--accent-ink); transition: color 1.1s ease; }
.stat-caption { font-size: 14px; color: var(--ink-mute); font-weight: 500; }
.stat-badge-plus { font-size: 18px; color: var(--accent-ink); transition: color 1.1s ease; }

/* =========================================================
   Trust strip — proof stats + client-name marquee
   ========================================================= */
.trust-strip { padding: 56px 0 0; }
.trust-proof {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 30px; border-radius: var(--radius);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  margin-bottom: 34px;
}
.trust-proof-item { text-align: center; font-size: 13px; color: var(--ink-mute); font-weight: 500; }
.trust-proof-item span { display: block; font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.trust-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trust-track { display: flex; width: max-content; gap: 56px; align-items: center; padding: 18px 0 44px; }
.trust-track span { font-family: var(--font-heading); font-weight: 600; font-size: 17px; color: var(--ink-mute); white-space: nowrap; opacity: 0.7; }

@media (max-width: 900px) { .trust-proof { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trust-proof { grid-template-columns: 1fr; } }

/* =========================================================
   Product tags (Fountain product vs client project)
   ========================================================= */
.product-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 22%, transparent);
  color: var(--ink);
  margin-bottom: 16px;
}
.product-tag-outline { background: transparent; border: 1px solid var(--glass-border); color: var(--accent-ink); transition: color 1.1s ease; }

/* =========================================================
   Product / directory grid (categorized ecosystem)
   ========================================================= */
.directory-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; }
.filter-btn {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
  padding: 10px 20px; border-radius: 30px; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--ink-soft);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.filter-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--ink); }
.filter-btn.is-active { background: var(--accent); border-color: var(--accent); color: #061019; }

.directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.directory-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 30px 28px; position: relative;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--elevation-2);
  transition: transform 0.45s var(--ease-fluid), box-shadow 0.45s var(--ease-fluid), border-color 0.35s ease, opacity 0.3s ease, display 0.3s allow-discrete;
}
.directory-card:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow-elevate); }
.directory-card.is-hidden { display: none; }
.directory-logo { height: 34px; width: auto; max-width: 140px; object-fit: contain; object-position: left; margin-bottom: 18px; }
.directory-cat {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--accent-ink); margin-bottom: 10px; transition: color 1.1s ease;
}
.directory-card h3 { font-size: 20px; margin-bottom: 10px; color: var(--ink); }
.directory-card p { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }
.directory-card-soon { border-style: dashed; }
.fine-print { font-size: 12px; color: var(--ink-mute); font-style: italic; margin-top: -8px; margin-bottom: 16px; }

@media (max-width: 900px) { .directory-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .directory-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Industries grid
   ========================================================= */
.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.industry-card {
  padding: 22px 20px; border-radius: 18px; text-align: center;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--elevation-1);
  transition: transform 0.45s var(--ease-fluid), box-shadow 0.45s var(--ease-fluid), border-color 0.3s ease;
}
.industry-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow-elevate); }
.industry-card h4 { font-size: 15px; margin-bottom: 6px; color: var(--ink); }
.industry-card span { font-size: 12px; color: var(--accent-ink); transition: color 1.1s ease; }

@media (max-width: 900px) { .industry-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .industry-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Presence — Bangladesh + Australia: dotted map + office cards
   ========================================================= */
/* Eastern-Hemisphere equirectangular dot map (real lat/lng,
   independently verified against the map's own straight-line
   projection formula — see the HTML comment above the markup) as a
   banner, with the two office cards in a row underneath rather than
   squeezed into a side column. */
.presence-map {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--presence-map-grad-a), var(--presence-map-grad-b));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-rest);
  padding: 24px;
  margin-bottom: 20px;
}
/* The pins/route below are positioned by percentage, so this inner
   box must share the map SVG's exact aspect ratio (its viewBox is
   149 x 105) with zero padding of its own — otherwise a percentage
   like "top: 22%" would land somewhere different on the padded
   outer box than on the actual map image, throwing pins off. */
.presence-map-frame { position: relative; width: min(100%, 640px); aspect-ratio: 149 / 105; margin: 0 auto; }
.presence-map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.92; }

.presence-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.presence-route path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.35;
  stroke-linecap: round;
  stroke-dasharray: 1.4 1.8;
  opacity: 0.8;
  animation: presenceRouteFlow 3.2s linear infinite;
  transition: stroke 1.1s ease;
  vector-effect: non-scaling-stroke;
}
@keyframes presenceRouteFlow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .presence-route path { animation: none; } }

/* .presence-pin is just a zero-size anchor at its left/top %, matching
   the .presence-route path's coordinate space exactly. The dot and label
   used to be flex children of that anchor with the whole pill centered
   via transform — which meant the DOT (not the anchor) sat off-point by
   roughly half the label's rendered width. That's a fixed pixel offset,
   so it stayed small (and easy to miss) as a % of a wide desktop frame
   but became a large, visible drift on a narrow mobile frame, throwing
   the dot off the end of the route line. Positioning the dot and label
   independently off the same anchor keeps the dot exactly on-point at
   every viewport width. */
.presence-pin { position: absolute; z-index: 2; }
.presence-pin-dot {
  position: absolute; top: 0; left: 0; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); border: 2px solid #050912;
  transition: background 1.1s ease;
}
.presence-pin-dot::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: presencePulse 2.4s ease-out infinite;
  transition: border-color 1.1s ease;
}
.presence-pin-hq .presence-pin-dot { width: 16px; height: 16px; }
@keyframes presencePulse {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .presence-pin-dot::after { animation: none; } }
.presence-pin-label {
  position: absolute; top: 0; left: calc(100% + 8px); transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: #fff; background: rgba(6,12,22,0.75); border: 1px solid rgba(255,255,255,0.14);
  padding: 5px 10px; border-radius: 20px; white-space: nowrap;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.presence-pin-flip .presence-pin-label { left: auto; right: calc(100% + 8px); }
.presence-pin-hq .presence-pin-label { background: var(--accent); color: #061019; border-color: transparent; transition: background 1.1s ease; }

.presence-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 40px; }
.office-card {
  display: flex; align-items: flex-start; gap: 16px; padding: 24px; border-radius: 20px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-rest);
  transition: box-shadow 0.4s var(--ease-fluid), border-color 0.3s ease;
}
.office-card:hover { box-shadow: var(--shadow-elevate); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.office-card h4 { font-size: 15px; color: var(--ink); margin-bottom: 4px; display: flex; align-items: center; }
.office-card p { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.office-card a { font-size: 14px; font-weight: 700; color: var(--accent-ink); transition: color 1.1s ease; }

/* HQ card stands out — accent-tinted, comes after .office-card so
   its background/border-color win over the plain glass defaults */
.office-card-hq {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), var(--glass-bg));
}
.office-card-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg-strong); color: var(--ink-soft); font-size: 18px; box-shadow: var(--elevation-1);
  transition: color 1.1s ease, background 1.1s ease;
}
.office-card-hq .office-card-icon { background: var(--accent); color: #061019; }
.office-card-body { flex: 1; min-width: 0; }
.office-card-badge {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  padding: 3px 9px; border-radius: 20px; background: var(--accent); color: #061019;
  margin-left: 8px; vertical-align: middle; transition: background 1.1s ease;
}
.office-card-sub {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 8px; transition: color 1.1s ease;
}

.presence-list { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.presence-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink); }
.presence-list .check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #061019;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
  transition: background 1.1s ease;
}

@media (max-width: 640px) {
  .presence-offices { grid-template-columns: 1fr; }
}

/* =========================================================
   Team
   ========================================================= */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.team-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.team-photos img { width: 100%; height: 160px; object-fit: cover; border-radius: 16px; box-shadow: var(--elevation-2); }
.team-photos img:nth-child(2) { margin-top: 26px; }
.team-photos img:nth-child(3) { margin-top: -26px; }
.team-content h2 { font-size: 38px; max-width: 520px; }
.team-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.team-tags span {
  font-size: 13px; font-weight: 600; color: var(--ink);
  padding: 9px 18px; border-radius: 30px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
}

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; gap: 30px; }
  .team-photos img:nth-child(2), .team-photos img:nth-child(3) { margin-top: 0; }
}

/* =========================================================
   CTA contact grid
   ========================================================= */
.cta-contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; }
.cta-contact-item {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 18px 18px; border-radius: 18px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform 0.45s var(--ease-fluid), box-shadow 0.45s var(--ease-fluid), border-color 0.3s ease;
}
.cta-contact-item:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow-elevate); }
.cta-contact-item i { color: var(--accent-ink); font-size: 17px; transition: color 1.1s ease; }
.cta-contact-item span { display: block; font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.5px; }
.cta-contact-item div { font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-word; }

@media (max-width: 900px) { .cta-contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cta-contact-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Service links &amp; shared logo-chip treatment
   ========================================================= */
.service-link { color: var(--card-accent-ink); font-weight: 700; font-size: 13px; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 6px; }
.service-link::after { content: '→'; transition: transform 0.3s ease; }
.service-link:hover::after { transform: translateX(4px); }

/* Whole-card click targets: the visible "Explore"/"VIEW PRODUCT" link
   stays the one focusable, readable link, but a transparent overlay
   stretched to the card's edges (via ::before, since ::after already
   draws the arrow) catches clicks anywhere on the card. Scoped to
   card types that hold exactly one link each. */
.pshow-card .service-link::before,
.ai-card .service-link::before,
.directory-card .service-link::before {
  content: '';
  position: absolute; inset: 0;
}
.pshow-card, .ai-card, .directory-card { cursor: pointer; }
.pshow-cta-card { cursor: default; }
.pshow-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-elevate); }

/* Several supplied product logo files (DAM, Priyo Doctor, VEGO, etc.)
   are flattened PNGs with an opaque white background rather than
   transparent artwork. Rather than let that white rectangle sit
   directly on the dark surface, every small logo instance gets a
   consistent light "badge" chip — reads as intentional branding
   instead of an image bug. */
.mini-logo, .directory-logo, .product-hero-lockup-logo {
  background: #fff; border-radius: 8px; padding: 4px 8px; box-shadow: 0 4px 14px -6px rgba(0,0,0,0.4);
}
.mini-logo { height: 28px; width: auto; object-fit: contain; }

/* =========================================================
   Product showcase — pinned horizontal slider (10 products)
   ========================================================= */
.services-pin-wrap { position: relative; }
.services-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; }

/* Subtle grid-line backdrop behind the track, inspired by the fine
   diagonal line/dot pattern used on ixorasolution.com — reproduced
   here as a cheap, GPU-friendly CSS gradient (no image/canvas cost)
   rather than copying their asset. Faded out toward the edges via a
   radial mask so it reads as texture, not a hard-edged grid. */
.services-pin-head { margin-bottom: 40px; position: relative; z-index: 2; }
.pshow-viewall { margin-top: 4px; }

.services-track {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 0 60px;
  position: relative;
  z-index: 2;
  will-change: transform;
}
@media (max-width: 767px) { .services-track { padding: 0 24px; } }

.pshow-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--elevation-2);
  transition: transform 0.45s var(--ease-fluid), box-shadow 0.45s var(--ease-fluid);
}
.pshow-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 55%);
  pointer-events: none;
}

/* Sizing only applies inside the horizontal track — flex items,
   uniform width, so GSAP's scroll-distance math (track scrollWidth
   minus viewport width) stays simple and the scrub stays smooth. */
.services-track .pshow-card { flex: 0 0 auto; width: min(400px, 80vw); }

/* Illustrative SVG mockups: show the whole graphic uncropped
   (object-fit: contain, not cover — no zoomed/cropped corners) and
   keep the frame short so cards stay compact. The frame's own
   background matches the mockups' own dark-navy canvas so any
   letterboxing is essentially invisible. */
.pshow-media { position: relative; width: 100%; aspect-ratio: 1.9 / 1; overflow: hidden; background: #0e1524; }
.pshow-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pshow-media .illus-caption { position: absolute; bottom: 10px; right: 12px; }

.pshow-body { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.pshow-logo { display: inline-flex; align-items: center; margin-bottom: 10px; }
.pshow-logo img { height: 28px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.pshow-logo--chip { background: #fff; border-radius: 8px; padding: 5px 10px; box-shadow: 0 4px 14px -6px rgba(0,0,0,0.4); align-self: flex-start; }

.pshow-name { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0 0 2px; }
.pshow-descriptor { font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: var(--card-accent-ink); margin: 0 0 12px; }
.pshow-benefit { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; }

.pshow-caps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.pshow-caps li {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  background: color-mix(in srgb, var(--card-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 30%, transparent);
  padding: 5px 12px; border-radius: 20px;
}

.pshow-disclaimer { font-size: 11.5px; color: var(--ink-mute); margin: 12px 0 0; line-height: 1.5; }

/* Sentinel CTA card — final slide in the track */
.pshow-cta-card { align-items: center; justify-content: center; text-align: center; background: color-mix(in srgb, var(--card-accent) 10%, var(--glass-bg)); }
.pshow-cta-inner { padding: 40px 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pshow-cta-inner h3 { font-size: 21px; color: var(--ink); margin: 0; }
.pshow-cta-inner p { font-size: 14px; color: var(--ink-soft); margin: 0 0 6px; }

/* Shorter viewports (typical laptop window heights, browser chrome
   included) can clip the pinned section against overflow:hidden —
   shrink the vertical rhythm a little so cards comfortably fit. */
@media (max-height: 820px) {
  .services-pin-head { margin-bottom: 22px; }
  .pshow-body { padding-top: 18px; }
}

/* Below ~900px the horizontal pin/scrub is disabled in JS (see
   script.js — GSAP matchMedia) and the track becomes a normal
   vertical stack: full-width cards, natural document flow, no
   scroll-jacking, no horizontal scrolling — matches the section's
   touch/mobile behavior everywhere else on the site. */
@media (max-width: 899px) {
  .services-pin { height: auto !important; overflow: visible; }
  .services-track {
    flex-direction: column;
    transform: none !important;
    padding: 0 24px;
  }
  .services-track .pshow-card { width: 100%; }
}

/* =========================================================
   CTA
   ========================================================= */
.cta-section { text-align: center; }
.cta-grid { display: block; }
.cta-content { max-width: 780px; margin: 0 auto; }
.cta-content h2 { font-size: 46px; font-weight: 500; }
.cta-content p { font-size: 17px; max-width: 480px; margin: 0 auto 6px; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 34px; flex-wrap: wrap; }

/* =========================================================
   Footer
   ========================================================= */
/* The footer is a deep navy "bookend" in BOTH themes (see --footer-bg
   above — Light gets a real navy, Dark keeps its original near-black),
   so its internal text stays fixed light-on-dark in both, rather than
   flipping with var(--ink)/var(--accent-ink) the way page-body content
   does. This is deliberate, not an oversight: those "ink" tokens exist
   specifically to stay legible on a WHITE page, and would go dark-on-
   dark here since this surface never turns light. */
.site-footer { background: var(--footer-bg); color: rgba(255,255,255,0.62); padding-top: 0; position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,0.08); }

/* ---------- Footer CTA banner (sits above the link columns) ---------- */
.footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 44px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-cta h3 { color: #fff; font-size: 24px; margin-bottom: 6px; }
.footer-cta p { font-size: 15px; margin: 0; max-width: 480px; }
.footer-cta .btn { flex-shrink: 0; }

.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 60px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand p { font-size: 14px; max-width: 320px; }
.footer-brand .foot-phone { color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.footer-summary { line-height: 1.7; margin-bottom: 22px; color: rgba(255,255,255,0.62); }

.footer-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 22px; margin-bottom: 26px; max-width: 320px; }
.footer-stat { font-size: 11.5px; color: rgba(255,255,255,0.5); font-weight: 500; line-height: 1.3; }
.footer-stat span { display: block; font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 2px; }

.footer-contact-list { display: flex; flex-direction: column; gap: 10px; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.62); }
.footer-contact-list li i { color: var(--accent); font-size: 13px; margin-top: 3px; width: 14px; text-align: center; flex-shrink: 0; }
.footer-contact-list a { color: rgba(255,255,255,0.62); }
.footer-contact-list a:hover { color: var(--accent); }

.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 20px; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul a { font-size: 14px; color: rgba(255,255,255,0.62); }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; font-size: 13px; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,0.5); }
.footer-bottom .foot-links { display: flex; gap: 24px; align-items: center; }
.footer-bottom a:hover { color: var(--color-teal); }

@media (max-width: 767px) {
  .footer-cta { padding: 32px 0; }
  .footer-stats { grid-template-columns: repeat(4, auto); gap: 14px; max-width: 100%; }
}

.back-to-top {
  position: fixed; right: 30px; bottom: 30px; width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue), var(--color-purple)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  box-shadow: 0 10px 25px rgba(91,47,214,0.35); cursor: pointer; z-index: 200; border: none;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* =========================================================
   Reveal utility (GSAP-driven — initial hidden state only)
   A soft blur-to-sharp "blend in" rides alongside the existing
   fade/slide/scale — GSAP tweens filter as a normal CSS property
   (see the ScrollTrigger.batch call in js/script.js), no plugin
   needed. Works identically in both themes; this is motion, not color.
   ========================================================= */
.reveal { opacity: 0; transform: translateY(40px); filter: blur(6px); }
.reveal-left { opacity: 0; transform: translateX(-50px); filter: blur(6px); }
.reveal-right { opacity: 0; transform: translateX(50px); filter: blur(6px); }
.reveal-scale { opacity: 0; transform: scale(0.9); filter: blur(6px); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; filter: none !important; }
  .nav-mega-panel, .has-mega.is-open .nav-mega-panel, .main-nav, .nav-mega-trigger i {
    transition: none !important;
  }
}

/* =========================================================
   Preloader
   ========================================================= */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--preloader-bg);
  transition: opacity 0.6s ease, visibility 0.6s ease, background 0.3s ease;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; }
.preloader-logo-img { height: 52px; width: auto; }
.preloader-bar { width: 150px; height: 4px; border-radius: 4px; background: var(--overlay-strong); overflow: hidden; margin: 20px auto 0; }
.preloader-bar::after {
  content: ''; display: block; height: 100%; width: 45%; border-radius: 4px;
  background: linear-gradient(90deg, var(--color-blue), var(--color-teal));
  animation: loaderSlide 1.15s ease-in-out infinite;
}
.preloader-label { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--ink-mute); }
@keyframes loaderSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }

/* =========================================================
   Products mega-menu
   ========================================================= */
.has-mega { position: relative; }
.nav-mega-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--font-body); color: var(--ink); font-size: 16px; font-weight: 400; opacity: 0.85;
}
.nav-mega-trigger:hover { opacity: 1; }
.nav-mega-trigger i { font-size: 11px; transition: transform 0.25s ease; }
.has-mega.is-open .nav-mega-trigger i { transform: rotate(180deg); }

.nav-mega-panel {
  position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%);
  width: min(880px, 90vw);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 28px;
  background: var(--mega-panel-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: var(--shadow-elevate);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 120;
}
.has-mega.is-open .nav-mega-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-mega-col { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; border-left: 1px solid var(--glass-border); }
.nav-mega-col:first-child { border-left: none; }
.nav-mega-heading {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 10px;
}
.nav-mega-col a { display: block; padding: 8px 0; font-size: 14px; color: var(--ink-soft); opacity: 1; }
.nav-mega-col a::after { display: none; }
.nav-mega-col a:hover { color: var(--ink); }
.nav-mega-col a.nav-mega-viewall { color: var(--accent-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.nav-mega-col a.nav-mega-viewall svg, .nav-mega-col a.nav-mega-viewall i { font-size: 11px; }

/* =========================================================
   Maturity labels (Product / AI Module / AI Solution)
   ========================================================= */
.maturity-tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px;
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 20%, transparent);
  color: var(--ink);
}

/* =========================================================
   AI-Based Applications section
   ========================================================= */
.section-lead { max-width: 680px; margin: 0 auto; color: var(--ink-soft); }
.ai-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 20px; }
.ai-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 28px 24px; position: relative; box-shadow: var(--elevation-2);
}
.ai-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; margin: 14px 0 16px;
  background: color-mix(in srgb, var(--card-accent) 20%, transparent);
  color: var(--card-accent-ink);
  box-shadow: var(--elevation-1);
}
.ai-card-ico svg { width: 24px; height: 24px; }
.ai-card h3 { font-size: 19px; margin-bottom: 10px; }
.ai-card > p { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }
.ai-card-meta { display: grid; gap: 8px; margin-bottom: 18px; }
.ai-card-meta li { font-size: 12.5px; color: var(--ink-mute); }
.ai-card-meta strong { color: var(--ink-soft); }
@media (max-width: 1100px) { .ai-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ai-card-grid { grid-template-columns: 1fr; } }

.ai-taxonomy {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--glass-border);
}
.ai-taxonomy-group { display: flex; flex-direction: column; gap: 8px; }
.ai-taxonomy-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; }
.ai-taxonomy-group a { font-size: 14px; color: var(--ink-soft); }
.ai-taxonomy-group a:hover { color: var(--ink); }
@media (max-width: 767px) { .ai-taxonomy { grid-template-columns: 1fr; } }

/* =========================================================
   Product-card additions: capability bullets, dual CTAs,
   illustration media, directory icon tiles
   ========================================================= */
.illus-caption {
  position: absolute; bottom: 10px; right: 12px;
  font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.75);
  background: rgba(6,12,22,0.55); padding: 4px 9px; border-radius: 20px;
}

.directory-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 18px; color: var(--accent-ink);
}
.directory-ico svg { width: 26px; height: 26px; }

/* Industry cards are now links (product-card requirement) */
a.industry-card { display: block; }

/* =========================================================
   Responsive
   ========================================================= */
/* Medium widths (small laptop / tablet-landscape): the full desktop
   nav — logo + 7 links (added: AI Engineering) + phone + CTA button —
   has no room to breathe between ~901px and ~1320px and was visibly
   compressing/overlapping there. Collapse to the off-canvas nav for
   that whole zone instead of only below 900px. */
@media (max-width: 1320px) {
  .nav-toggle { display: flex; }
  .main-nav {
    /* Fixed (not absolute) so top/max-height resolve against the real
       viewport instead of .container, which is only as tall as its
       content row and excludes .site-header's own top/bottom padding —
       that mismatch was landing the drawer's top ~26px underneath the
       header's own padding area, hiding "Home" and "Products" behind
       it with no way to scroll to them (the box's start position was
       wrong, not its scroll offset). --header-h (set on .site-header)
       tracks the real rendered header height in both its resting and
       .scrolled states, so this stays correct either way. */
    position: fixed; top: var(--header-h, 96px); left: 0; right: 0;
    max-height: calc(100vh - var(--header-h, 96px)); overflow-y: auto;
    /* .main-nav is still "display:flex" from the desktop rule above,
       which also sets "align-items:center" — harmless on desktop
       (single row, never taller than the flex line), but on mobile
       the <ul> can get much taller than this box once the Products
       accordion opens. Centering an over-height flex child pushes
       roughly half the overflow ABOVE the box's own top edge, into
       negative scroll territory overflow-y:auto can never reach
       (scrollTop can't go negative) — "Home" and the accordion's own
       first rows were landing there, unreachable by any amount of
       scrolling. Top-aligning keeps the start of the list at
       scrollTop:0 and lets any overflow extend downward instead,
       where the scrollbar actually reaches it. */
    align-items: flex-start;
    background: var(--mobile-nav-bg); backdrop-filter: blur(20px);
    /* Fixed-size box, shown/hidden with opacity + transform only — not
       an animated max-height. Animating max-height on a backdrop-filter
       element repaints a growing blurred region on every frame (main
       thread + GPU both pay for it each tick), which is what read as
       stutter opening this menu. Safe to do since .main-nav is already
       position:absolute (out of flow), so its box never having to
       "grow" costs nothing layout-wise — same opacity/visibility/
       pointer-events idiom the desktop .nav-mega-panel already uses. */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.35s var(--ease-fluid, ease), visibility 0.3s ease;
  }
  .main-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  /* .main-nav itself stays "display:flex" from the desktop rule
     above (only its direction changes here), so without an
     explicit width its <ul> child shrinks to fit its content
     instead of filling the off-canvas panel — which then starves
     the Products accordion of the width it needs. */
  .main-nav ul { flex-direction: column; gap: 0; padding: 10px 24px 20px; width: 100%; }
  .main-nav ul li { border-bottom: 1px solid var(--glass-border); }
  .main-nav ul li a { padding: 14px 0; }
  .header-icons { gap: 12px; }

  /* Products becomes an inline expandable accordion, not a
     floating mega-panel, so it never overflows a narrow viewport. */
  .nav-mega-trigger { width: 100%; justify-content: space-between; padding: 14px 0; }
  /* Same (or higher) specificity as the desktop ".has-mega.is-open
     .nav-mega-panel" transform rule is required here — a plain
     ".nav-mega-panel" selector alone loses to that rule regardless
     of media-query order, since CSS specificity beats source order. */
  /* A guessed max-height (the previous approach here — 900px, then
     "just make overflow visible instead") can never be right for
     every family: "Enterprise"/"AI" have 7 products and render
     ~1240px tall, and neither a hardcoded cap (silently discards
     anything past it, overflow:hidden doesn't scroll) nor overflow:
     visible (stops discarding it, but the box still only RESERVES
     max-height's worth of space in the drawer's normal flow, so the
     real content spills onto "Services"/"About"/etc. below it
     instead of pushing them down) is actually correct.
     grid-template-rows: 0fr -> 1fr sidesteps guessing entirely: the
     "1fr" row track sizes itself to its content's real height,
     whatever that turns out to be per family, so the closed state
     is genuinely 0 and the open state is genuinely exactly as tall
     as this family's list — every family gets the right amount of
     both clipping (none, while open) and reserved flow space. */
  .has-mega .nav-mega-panel,
  .has-mega.is-open .nav-mega-panel {
    position: static; transform: none; width: 100%;
    /* grid-template-columns: 1fr is load-bearing, not decorative —
       the desktop rule above sets repeat(4, 1fr) for its 4-column
       dropdown, and now that this rule also sets display:grid (for
       the row-collapse trick below), that 4-column template applies
       here too unless overridden: it was squeezing the whole mobile
       accordion into just its first ~86px-wide column. */
    display: grid; grid-template-columns: 1fr; grid-template-rows: 0fr;
    opacity: 1; visibility: visible; pointer-events: none;
    padding: 0; margin: 0; border: none; backdrop-filter: none; box-shadow: none;
    background: var(--overlay-soft); border-radius: 14px;
    transition: grid-template-rows 0.35s ease, padding 0.35s ease;
  }
  .has-mega.is-open .nav-mega-panel { grid-template-rows: 1fr; pointer-events: auto; padding: 6px 16px 16px; }
  /* The single grid item (js/mega-menu.js's own ".mega" wrapper) needs
     its own overflow:hidden + min-height:0 — a grid row can only
     collapse to the 0fr track size if its item is allowed to shrink
     below its content's min-content height, which flex/block children
     refuse by default. */
  .nav-mega-panel > .mega { overflow: hidden; min-height: 0; }
  .nav-mega-col { border-left: none; padding: 14px 0 4px; border-top: 1px solid var(--glass-border); }
  .nav-mega-col:first-child { border-top: none; }
  .nav-mega-col a { padding: 10px 0; }
}
@media (max-width: 900px) {
  .hero-content h1 { font-size: 36px; }
}

@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; }
  .hero-content h1 { font-size: 30px; }
  .cta-actions { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .cta-content { text-align: left; }
}

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}