/* ─── Self-hosted Outfit font ────────────────────────────────────── */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Design Tokens ─────────────────────────────────────────────── */
:root {
  --brand-purple:       #4B1F8B;
  --brand-purple-deep:  #2A0F52;
  --brand-purple-light: #8B5CF6;
  --brand-magenta:      #D946EF;
  --brand-orange:       #e87825;
  --brand-pink:         #EC4899;
  --ink:                #0B0B1F;
  --ink-soft:           #1A1430;
  --paper:              #FAFAFC;
  --line:               #E5E7EB;
  --muted:              #6B7280;
  --text:               #111127;

  --grad-hero:    radial-gradient(circle at 20% 30%, rgba(217,70,239,.35), transparent 40%),
                  radial-gradient(circle at 80% 70%, rgba(139,92,246,.4),  transparent 45%),
                  linear-gradient(135deg, #1A0B3A 0%, #2A0F52 50%, #3D1B69 100%);
  --grad-accent:  linear-gradient(135deg, #8B5CF6 0%, #D946EF 100%);
  --grad-orange:  linear-gradient(135deg, #e87825 0%, #FF4D8F 100%);

  --shadow-sm:    0 1px 2px rgba(15,15,40,.06), 0 1px 3px rgba(15,15,40,.04);
  --shadow-md:    0 4px 12px rgba(15,15,40,.08), 0 2px 4px rgba(15,15,40,.04);
  --shadow-lg:    0 20px 40px rgba(15,15,40,.12), 0 8px 16px rgba(15,15,40,.06);
  --shadow-glow:  0 0 40px rgba(139,92,246,.25);

  --radius:    14px;
  --radius-lg: 20px;
}

/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--text);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
h1, h2, h3, h4 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
}
h1 { font-weight: 600; }
h2 { font-weight: 600; }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ─── @property for conic-gradient animation ─────────────────────── */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ─── Layout helpers ─────────────────────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
#page-wrap  { position: relative; }

/* ─── TOP NAV ────────────────────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topnav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 32px;
  height: 100px;
  display: flex; align-items: center; gap: 36px;
}
.topnav-brand { display: flex; align-items: center; gap: 10px; }
.logo-img { height: auto; width: auto; display: block; }
.topnav-brand .logo-img { width: 285px; }
.logo-img.logo-white { filter: brightness(0) invert(1); }

.topnav-nav { display: flex; gap: 2px; list-style: none; align-items: center; }
.topnav-item { position: static; }
.topnav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 0;
  color: var(--text); font-weight: 500; font-size: 15px;
  transition: background 150ms, color 150ms;
  cursor: pointer; background: none; border: none;
}
.topnav-link:hover { background: rgba(139,92,246,.08); color: var(--brand-purple); }
.topnav-link svg.chev { transition: transform 200ms; opacity: .6; }
.topnav-item.open .topnav-link { background: rgba(139,92,246,.08); color: var(--brand-purple); }
.topnav-item.open .topnav-link svg.chev { transform: rotate(180deg); }

.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn-topnav {
  display: inline-flex; align-items: center;
  padding: 11px 22px;
  background: var(--brand-purple-deep);
  color: #fff; border-radius: 0;
  font-weight: 600; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background 150ms, transform 150ms;
}
.btn-topnav:hover { background: var(--brand-purple); transform: translateY(-1px); }

.icon-btn {
  width: 40px; height: 40px; border-radius: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--text);
  transition: background 150ms, color 150ms;
}
.icon-btn:hover { background: rgba(139,92,246,.08); color: var(--brand-purple); }

.mobile-toggle { display: none; }

/* ─── MEGA MENU ──────────────────────────────────────────────────── */
.megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(15,15,40,.12);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 99;
}
.topnav-item.open .megamenu { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu-inner {
  max-width: 1240px; margin: 0 auto; padding: 36px 32px;
  display: grid; grid-template-columns: 1fr 1fr 1fr 320px; gap: 36px;
}
.mega-col h6 {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.mega-links { display: flex; flex-direction: column; gap: 2px; }
.mega-link {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px; border-radius: 10px;
  transition: background 150ms;
}
.mega-link:hover { background: rgba(139,92,246,.06); }
.mega-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(217,70,239,.12));
  color: var(--brand-purple);
  display: grid; place-items: center; flex-shrink: 0;
}
.mega-link strong { display: block; font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.mega-link p { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin: 0; }

.mega-featured {
  background: linear-gradient(135deg, #1A0B3A 0%, #2A0F52 100%);
  border-radius: 14px; padding: 26px; color: #fff;
  position: relative; overflow: hidden;
}
.mega-featured::after {
  content: ''; position: absolute; top: -50%; right: -30%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(217,70,239,.35), transparent 70%);
  pointer-events: none;
}
.mega-featured-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-orange); margin-bottom: 10px; position: relative;
}
.mega-featured h4 { color: #fff; font-size: 19px; margin-bottom: 8px; position: relative; }
.mega-featured p  { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 18px; position: relative; }
.mega-featured a  { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #C4B5FD; position: relative; }
.mega-featured a:hover { color: #fff; }

/* ─── SIMPLE DROPDOWN ────────────────────────────────────────────── */
.dropdown {
  position: absolute; top: 100%; left: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15,15,40,.12);
  padding: 8px; min-width: 220px;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms, transform 180ms, visibility 180ms;
  z-index: 99;
}
.topnav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 14px; color: var(--text);
  transition: background 150ms;
}
.dropdown a:hover { background: rgba(139,92,246,.06); color: var(--brand-purple); }
.dropdown a svg { color: var(--muted); }

/* ─── MOBILE MENU ────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed; inset: 0 0 0 auto;
  width: min(340px, 90vw);
  background: #fff;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-inner { padding: 24px 28px 48px; }
.mobile-close {
  display: flex; margin-left: auto; margin-bottom: 24px;
  width: 40px; height: 40px; border-radius: 8px;
  align-items: center; justify-content: center;
  color: var(--text);
}
.mobile-close:hover { background: rgba(139,92,246,.08); color: var(--brand-purple); }
.mobile-section { margin-bottom: 28px; }
.mobile-heading {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.mobile-nav a {
  display: block; padding: 8px 0;
  font-size: 15px; color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: color 150ms;
}
.mobile-nav a:hover { color: var(--brand-purple); }

.mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 199;
  opacity: 0; visibility: hidden;
  transition: opacity 300ms, visibility 300ms;
}
.mobile-overlay.open { opacity: 1; visibility: visible; }

/* ─── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 0;
  font-weight: 600; font-size: 15px;
  transition: transform 150ms, box-shadow 150ms, background 150ms;
}
.btn-primary {
  background: var(--grad-orange); color: #fff;
  box-shadow: 0 10px 30px rgba(255,122,26,.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,122,26,.55); }
.btn-ghost {
  background: rgba(255,255,255,.06); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-outline {
  background: #fff; color: var(--brand-purple);
  border: 1px solid var(--brand-purple);
  padding: 12px 28px; border-radius: 0; font-weight: 600;
}
.btn-outline:hover { background: var(--brand-purple); color: #fff; }

/* animated gradient-stroke button */
.btn-stroke {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 0;
  font-weight: 600; font-size: 15px; color: #fff;
  background: transparent; border: none;
  isolation: isolate; transition: transform 150ms; cursor: pointer;
}
.btn-stroke::before {
  content: ''; position: absolute; inset: 0; padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle), #e87825, #D946EF, #8B5CF6, #e87825);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: btn-spin 4s linear infinite;
  pointer-events: none;
}
.btn-stroke:hover { transform: translateY(-2px); }
@keyframes btn-spin { to { --angle: 360deg; } }

/* border-beam ring on featured surfaces */
.beam { position: relative; isolation: isolate; }
.beam::before {
  content: ''; position: absolute; inset: 0; padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle),
    transparent 0deg, transparent 260deg,
    #8B5CF6 300deg, #D946EF 340deg, #FBA74D 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: btn-spin 9s linear infinite;
  pointer-events: none; opacity: .85;
}

/* ─── HERO ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--grad-hero);
  color: #fff;
  padding: 100px 0 120px;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 25% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,.3), transparent);
  background-size: 400px 400px; opacity: .6; pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 5; }
/* No image + no confetti: the art column is empty and unrendered (see
   render.php's $ef_has_art) — go full-width instead of leaving the text
   column stuck at the narrower two-column measure, which orphans words on
   longer headlines. */
.hero-grid.no-art { grid-template-columns: 1fr; }
.hero-grid.no-art > div:first-child { max-width: 920px; }
.badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px); border-radius: 999px;
  font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 24px;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,26,0.7); }
  60%       { box-shadow: 0 0 0 7px rgba(255,122,26,0); }
}
.badge-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 10px var(--brand-orange);
  animation: dot-pulse 2s ease-out infinite;
}
.hero h1 { color: #fff; font-size: 56px; line-height: 1.04; margin-bottom: 22px; }
sup.tm { font-size: 0.5em; vertical-align: top; line-height: 1; font-weight: 700; }
.hero h1 .grad {
  background: linear-gradient(90deg, #C4B5FD, #F0ABFC, #FBA74D);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { font-size: 18px; color: #fff; max-width: 540px; margin-bottom: 36px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ─── Hero chain headline (effectual/hero headlineMode:"chain") ─────
   Two states share the h1: .ef-hc-typer (JS-driven typewriter/slide chain,
   starts empty) and .ef-hc-final (the resting state — visible by default so
   no-JS / reduced-motion / a failed GSAP load all get this real, correct
   headline with zero extra work; hero-chain.js hides it and empties the
   typer at the start of its run, then crossfades back at the end).
   .ef-hc-final-text is one .grad span wrapping all resting words together —
   not one .grad span per word — so the gradient reads as a single continuous
   sweep across the whole line instead of restarting on each word.
   hero-chain.js locks an inline min-height (measured from .ef-hc-final) on
   the h1 right before swapping states, so the empty-starting .ef-hc-typer
   doesn't collapse the hero's height and shift the content below it — no
   CSS-only fix for that, since it depends on the actual rendered content. */
.ef-hc-typer { display: none; }
.ef-hc-final { display: block; }
.ef-hc-typer.is-active { display: block; }
.ef-hc-final.is-hidden { display: none; }
.ef-hc-word { display: inline-block; white-space: pre; }
.ef-hc-punct { display: inline-block; }
.ef-hc-cursor {
  display: inline-block; width: 3px; height: 0.9em; margin-left: 3px;
  background: currentColor; vertical-align: -0.1em; opacity: .85;
  animation: efHcBlink 1s step-end infinite;
}
@keyframes efHcBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ef-hc-typer { display: none !important; }
  .ef-hc-final { display: block !important; }
}

/* aurora */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.aurora-layer {
  position: absolute; width: 180%; height: 180%; top: -40%; left: -40%;
  filter: blur(70px); opacity: .55; will-change: transform;
}
.aurora-layer.a1 {
  background: conic-gradient(from 0deg at 35% 50%,
    transparent 0deg, rgba(217,70,239,.6) 40deg, transparent 100deg,
    rgba(139,92,246,.5) 180deg, transparent 240deg,
    rgba(255,122,26,.4) 300deg, transparent 360deg);
  animation: aurora-spin 28s linear infinite;
}
.aurora-layer.a2 {
  background: conic-gradient(from 180deg at 65% 50%,
    transparent 0deg, rgba(139,92,246,.5) 50deg, transparent 130deg,
    rgba(217,70,239,.45) 220deg, transparent 300deg);
  animation: aurora-spin 42s linear infinite reverse; opacity: .4;
}
@keyframes aurora-spin { to { transform: rotate(360deg); } }

/* sparkles */
.sparkle-wrap { position: relative; display: inline-block; }
.sparkle {
  position: absolute; pointer-events: none;
  color: #FBA74D; opacity: 0;
  filter: drop-shadow(0 0 8px currentColor);
  animation: twinkle 3.5s ease-in-out infinite;
}
.sparkle.s1 { top: -22px; left: -6px;  width: 20px; height: 20px; animation-delay: 0s; }
.sparkle.s2 { top: 10px;  right: -18px; width: 26px; height: 26px; animation-delay: 1.2s; color: #F0ABFC; }
.sparkle.s3 { bottom: -16px; left: 30%; width: 16px; height: 16px; animation-delay: 2.3s; color: #C4B5FD; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50%       { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* hero blobs */
.hero-blob {
  position: absolute; width: 520px; height: 520px;
  border-radius: 50%; filter: blur(80px); opacity: .4;
  pointer-events: none; will-change: transform;
}
.hero-blob.b1 { background: #D946EF; top: -160px; left: -100px; animation: floatA 14s ease-in-out infinite; }
.hero-blob.b2 { background: #8B5CF6; bottom: -180px; right: -60px; animation: floatB 16s ease-in-out infinite; }
.hero-blob.b3 { background: #FF7A1A; top: 30%; right: 25%; opacity: .28; animation: floatC 18s ease-in-out infinite; }
@keyframes floatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(260px,160px) scale(1.2); } }
@keyframes floatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-220px,-180px) scale(1.25); } }
@keyframes floatC { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-180px,200px) scale(1.15); } 66% { transform: translate(220px,-120px) scale(.85); } }

/* hero art */
.hero-art { position: relative; aspect-ratio: 1/1; max-width: 460px; margin-left: auto; display: flex; align-items: center; justify-content: center; }
.aws-badge {
  position: relative; isolation: isolate;
  /* 2026-07-28: was a flat 75% of .hero-art, which rendered small and
     inconsistently across viewports. The real culprit chasing this down
     turned out to be a stale `sizes="320px"` on the <img> itself (fixed in
     post_content, not here) pinning the browser to a low-res srcset
     candidate regardless of this rule — once that was gone, a 440px cap
     rendered at ~420px on a large monitor, so 370px (matching the same
     .aws-badge rule's rendering via the effectual/hero block elsewhere)
     is the dialed-in value. min() still shrinks proportionally (95% of
     .hero-art) on narrower viewports instead of overflowing. */
  width: min(370px, 95%);
  display: flex; align-items: center; justify-content: center;
}
.aws-badge img { width: 100%; height: auto; display: block; }
.aws-badge::after {
  content: ''; position: absolute; inset: 10% 15%;
  background: radial-gradient(ellipse, rgba(232,120,37,.35) 0%, rgba(139,92,246,.2) 60%, transparent 100%);
  z-index: -1; filter: blur(28px);
}
.badge-inner { text-align: center; color: #fff; }
.badge-inner .lbl { font-size: 12px; opacity: .6; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 8px; }
.badge-inner .big { font-weight: 700; font-size: 36px; line-height: 1.05; background: linear-gradient(135deg,#fff,#FBA74D); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; }
.badge-inner .yr  { font-size: 56px; font-weight: 800; color: #fff; }
.badge-inner .sub { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.6); }

/* Confetti burst (shared) — the layer + particle base styles used by any block's
   confetti-pop trigger (currently effectual/hero's .aws-badge and
   effectual/credentials' .cred-confetti-anchor). Requires a `position: relative`
   *and* `isolation: isolate` parent to anchor to. The isolation matters, not just
   the positioning: `position: relative` alone does NOT create a new stacking
   context, so a plain `.confetti-pop { z-index: -1 }` inside it escapes past the
   anchor looking for the nearest ancestor that DOES establish one — and none of
   .aws-badge/.hero-art/.hero/#page-wrap do, so without `isolation: isolate` here
   the burst silently paints behind virtually all normal-flow page content
   instead of just behind its own anchor (found 2026-07-09 debugging why the
   credentials confetti wasn't visible — .aws-badge had the same latent bug).
   The actual particle-physics trigger lives in the shared, sitewide
   `assets/js/confetti-burst.js` — not inline in any block's render.php, see that
   file's docblock for why. */
.confetti-pop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.confetti-pop span { position: absolute; left: 50%; top: 50%; opacity: 0; will-change: transform, opacity; }
.cred-confetti-anchor { position: relative; isolation: isolate; display: inline-flex; }

/* ─── SCROLL REVEAL ──────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1);
}
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay:   0ms; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay:  60ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─── SPOTLIGHT CARDS ────────────────────────────────────────────── */
.spotlight { position: relative; overflow: hidden; }
.spotlight::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(139,92,246,.18), rgba(217,70,239,.08) 30%, transparent 55%);
  opacity: 0; transition: opacity 250ms;
  pointer-events: none; z-index: 0;
}
.spotlight:hover::after { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }
.sol-card.dark.spotlight::after {
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(217,70,239,.3), rgba(139,92,246,.15) 30%, transparent 55%);
}

/* ─── LOGO MARQUEE ───────────────────────────────────────────────── */
.logos { padding: 56px 0 48px; background: #fff; border-bottom: 1px solid var(--line); }
.logos-label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px; }
.logo-marquee {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-track { display: flex; gap: 56px; align-items: center; width: max-content; animation: marquee 32s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-ph {
  flex-shrink: 0; min-width: 200px; height: 56px;
  background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
  border-radius: 8px; display: grid; place-items: center;
  color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em;
}

/* ─── GARTNER BAR ────────────────────────────────────────────────── */
.gartner-row { background: #fff; padding: 48px 0; }
.gartner-grid { display: grid; grid-template-columns: 200px 1fr auto; gap: 40px; align-items: center; }
.gartner-logo { max-width: 200px; height: 56px; object-fit: contain; object-position: left center; display: block; }
.gartner-text strong { font-weight: 700; color: var(--text); }
.gartner-text p { color: var(--text); font-size: 15px; margin-top: 4px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-purple); font-weight: 600; }
.link-arrow:hover { gap: 10px; transition: gap 150ms; }

/* ─── STATS ──────────────────────────────────────────────────────── */
.stats {
  background: linear-gradient(135deg, #0B0B1F 0%, #1A0B3A 100%);
  color: #fff; padding: 80px 0; position: relative; overflow: hidden;
}
.stats::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(139,92,246,.2), transparent 40%),
              radial-gradient(circle at 70% 50%, rgba(217,70,239,.15), transparent 40%);
  pointer-events: none;
}
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; position: relative; }
.stat { text-align: center; }
.stat-num {
  font-weight: 800; font-size: 80px; line-height: 1;
  background: linear-gradient(135deg, #e87825 0%, #e87825 55%, #f4a94e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px; font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.stat-lbl { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; color: #fff; }
.aws-mini {
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: 0;
}

/* ─── SECTIONS ───────────────────────────────────────────────────── */
.section { padding: 100px 0; background: var(--paper); }
.section.alt { background: #fff; }
/* Dark tone: the same dark-gradient + radial-glow + animated dot-drift treatment
   as the CTA band (.ai-strip) and impact stats (.stats), generalized as a third
   `tone` option on the flexible content blocks (card-grid, tabbed-benefits,
   value-props) — and usable on a plain `core/group` (e.g. wrapping
   section-headline) via its "Additional CSS class" field, since these are
   plain class selectors, not tied to a specific block. Use sparingly — one
   per page reads as a highlight; several reads as noise. See `.section.noir`
   just below for the flatter, non-animated alternative sourced from the
   homepage's `#cloud-ai-in-motion` section. */
.section.dark {
  background: linear-gradient(135deg, #0B0B1F 0%, #1A0B3A 50%, #2A0F52 100%);
  color: #fff; position: relative; overflow: hidden;
}
.section.dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 50%, rgba(217,70,239,.2), transparent 40%),
              radial-gradient(circle at 80% 50%, rgba(255,122,26,.15), transparent 40%);
}
.section.dark::after {
  content: ''; position: absolute; inset: -28px; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  animation: dots-drift 4s linear infinite;
}
.section.dark > .container,
.section.dark > .is-layout-constrained { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .section.dark::after { animation: none; } }
/* Noir tone: the flat near-black background actually used by the homepage's
   `#cloud-ai-in-motion` section (`.ctm-section { background: #0a080f; }`) —
   that section has no section-level gradient/glow/animation of its own (all
   its color comes from the bespoke interactive terminal scene inside it,
   which isn't portable), so this is a faithful, deliberately flatter
   alternative to `.section.dark`'s animated purple gradient. A single static
   (non-animated) soft purple highlight is added so it doesn't read as totally
   inert in a plain content block — same restraint rule applies: use sparingly. */
.section.noir {
  background: #0a080f;
  color: #fff; position: relative; overflow: hidden;
}
.section.noir::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(170,68,255,.12), transparent 60%);
}
.section.noir > .container,
.section.noir > .is-layout-constrained { position: relative; z-index: 1; }
/* Text/control contrast inside a dark or noir section. */
.section.dark .eyebrow, .section.noir .eyebrow { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.section.dark .section-title, .section.noir .section-title { color: #fff; }
.section.dark .section-lead, .section.noir .section-lead { color: rgba(255,255,255,.75); }
.section.dark .ef-vp-icon, .section.noir .ef-vp-icon { background: rgba(255,255,255,.12); color: #fff; }
.section.dark .ef-vp-body h3, .section.noir .ef-vp-body h3 { color: #fff; }
.section.dark .ef-vp-body p, .section.noir .ef-vp-body p { color: rgba(255,255,255,.75); }
.section.dark .ef-tablist, .section.noir .ef-tablist { border-bottom-color: rgba(255,255,255,.18); }
.section.dark .ef-tab, .section.noir .ef-tab { color: rgba(255,255,255,.6); }
.section.dark .ef-tab:hover, .section.noir .ef-tab:hover { color: #fff; }
.section.dark .ef-tab.is-active, .section.noir .ef-tab.is-active { color: #fff; }
.section.dark .ef-tabpanel h3, .section.noir .ef-tabpanel h3 { color: #fff; }
.section.dark .ef-tabpanel p, .section.noir .ef-tabpanel p { color: rgba(255,255,255,.75); }
.section.dark .ef-vp-body ul li, .section.dark .ef-tabpanel ul li, .section.noir .ef-vp-body ul li, .section.noir .ef-tabpanel ul li { color: rgba(255,255,255,.75); }
.section.dark .ef-vp-body ul li::before, .section.dark .ef-tabpanel ul li::before, .section.noir .ef-vp-body ul li::before, .section.noir .ef-tabpanel ul li::before { background: rgba(255,255,255,.15); }
.section.dark .ef-vp-body ul li::after, .section.dark .ef-tabpanel ul li::after, .section.noir .ef-vp-body ul li::after, .section.noir .ef-tabpanel ul li::after { border-color: #fff; }
.section.dark .job-filter, .section.noir .job-filter { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.section.dark .job-filter option, .section.noir .job-filter option { color: #0B0B1F; } /* native <option> popups can't inherit the dark bg */
.section.dark .job-card, .section.noir .job-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.section.dark .job-card h3, .section.noir .job-card h3 { color: #fff; }
.section.dark .job-pill, .section.noir .job-pill { background: rgba(255,255,255,.12); color: #fff; }
.section.dark .job-empty, .section.noir .job-empty { color: rgba(255,255,255,.75); }

/* Solutions sticks at top; nav floats over it via its own z-index:100 */
section#solutions {
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Every section after #solutions scrolls over it like a card */
section#solutions ~ section {
  position: relative;
  z-index: 20;
}
/* Shadow only on the first section that slides over Solutions */
section#solutions + section {
  box-shadow: 0 -16px 48px rgba(0,0,0,0.10);
}

/* Case Studies also sticks at top; News (and following sections) slide in over it */
.section.alt#cases {
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Every section after Case Studies must sit above it to cover it while sliding over */
#cases ~ section {
  position: relative;
  z-index: 30;
}
/* Opaque background so News fully covers Case Studies as it slides over */
#news {
  background: #f5f5f5;
}
/* Shadow on News as it slides over Case Studies */
#cases + section {
  box-shadow: 0 -16px 48px rgba(0,0,0,0.10);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(217,70,239,.12));
  color: var(--brand-purple);
}
.contact-eyebrow {
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color: #fff;
}
.section-title { font-size: 44px; max-width: 720px; margin-bottom: 18px; }
.section-title .grad { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-lead { font-size: 17px; color: var(--text); max-width: 640px; }

/* ─── WHY ────────────────────────────────────────────────────────── */
.why { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; }
.why-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.why-card {
  padding: 28px 22px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(139,92,246,.3); }
.why-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(217,70,239,.12));
  display: grid; place-items: center; margin-bottom: 18px; color: var(--brand-purple);
}
/* Uploaded logo (e.g. AWS service icon): no gradient tile, larger, contained. */
.why-icon.is-image { width: 56px; height: 56px; background: none; border-radius: 0; }
.why-icon.is-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.why-card h3 { font-size: 17px; margin-bottom: 8px; }
.why-card p  { font-size: 14px; color: var(--text); }
/* Linked shadow-card: keep content stacked with the link pinned at the bottom. */
.why-card.is-linked { display: flex; flex-direction: column; }
.why-card.is-linked .link-arrow { margin-top: auto; }
/* Equal-height shadow-cards in a core/columns row (e.g. AWS page card rows):
   the columns already stretch to the tallest, so make each card fill its column.
   Scoped to cards that are a direct child of a column, so the homepage .why-cards
   grid and ordinary multi-child columns are unaffected. */
.wp-block-columns:has(> .wp-block-column > .why-card) { align-items: stretch; }
.wp-block-column > .why-card { height: 100%; }

/* ─── CREDENTIALS BLOCK ──────────────────────────────────────────── */
/* Top region: intro text on the left, partner badges stacked in a column on the right. */
.cred-top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: stretch; margin-bottom: 44px;
}
/* No badges configured (e.g. Our Story, deliberately logo-free) → drop the
   second grid column entirely so the heading/intro get the full container
   width instead of being squeezed into half a 2-col grid with an empty
   second column (same fix as the hero block's .hero-grid.no-art). */
.cred-top.no-badges { grid-template-columns: 1fr; }
.cred-intro > :last-child { margin-bottom: 0; }
/* Badges: a row centered both ways within the (stretched) right-hand column. */
.cred-badges {
  display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 28px;
  margin: 0;
}
.cred-badge { height: 110px; width: auto; max-width: 180px; display: block; }
/* Competency checklist: 4 across, spanning the full 1240 container. Tight column
   gap so the longest items (e.g. "Migration & Modernization Consulting") stay on
   one line. The 13th item sits centered on its own row below the 3 rows of 4. */
.cred-list {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 20px;
}
.cred-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text);
}
.cred-item:nth-child(13) { grid-column: 1 / -1; justify-self: center; }
.cred-check {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(217,70,239,.12));
  color: var(--brand-purple); margin-top: 1px;
}
@media (max-width: 960px) {
  .cred-top { grid-template-columns: 1fr; gap: 32px; }
  .cred-badges { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 28px; }
  .cred-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
}
@media (max-width: 620px) {
  .cred-list { grid-template-columns: 1fr; }
  .cred-badge { height: 80px; }
}

/* ─── AWARD BADGES BLOCK ─────────────────────────────────────────── */
/* Eyebrow, then — when badges are configured — a two-column row: intro copy
   on the left, a fixed 4-across grid of logo badges on the right (each
   optionally a link out to the announcement). A real grid (not flex-wrap)
   so the row break is deterministic — always 4 then the remainder — rather
   than depending on each logo's rendered width: 7 badges (2024) becomes
   4-top/3-under, 5 becomes 4/1, 2 or 4 sit on one row. Drops to 3-across on
   narrow phones. With no badges configured, the intro drops back to full
   width (see "Recognized for Cloud Innovation" on Awards & Recognition). */
.award-badges-columns {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}
.award-badges-intro { max-width: 760px; }
.award-badges-columns .award-badges-intro { max-width: none; }
.award-badges-intro p { margin: 0 0 14px; }
.award-badges-intro p:last-child { margin-bottom: 0; }
.award-badges-grid {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; gap: 36px; margin-top: 8px;
}
.award-badges-columns .award-badges-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  justify-items: center; align-items: center;
  gap: 20px 24px; margin-top: 0;
}
.award-badge { display: block; line-height: 0; }
a.award-badge { transition: transform 150ms ease, opacity 150ms ease; }
a.award-badge:hover { transform: translateY(-3px); opacity: .82; }
.award-badge-img { height: 110px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.award-badges-columns .award-badge-img { height: 96px; width: auto; max-width: 100%; }
.award-badges-note { margin: 28px 0 0; font-size: 14px; color: var(--muted); }
.section.dark .award-badges-note, .section.noir .award-badges-note { color: rgba(255,255,255,.6); }
@media (max-width: 900px) {
  .award-badges-columns { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 782px) {
  .award-badges-grid { gap: 24px; }
  .award-badge-img { height: 72px; }
}
@media (max-width: 560px) {
  .award-badges-columns .award-badges-grid { grid-template-columns: repeat(3, 1fr); }
  .award-badges-columns .award-badge-img { height: 64px; }
}

/* ─── FEATURE SPLIT BLOCK ────────────────────────────────────────── */
/* Two-column spotlight: image or looping video on one side, eyebrow/heading/
   copy/link on the other. .media-right flips which side the media sits on;
   .no-media (no image/video configured) drops to a single full-width column,
   same fallback pattern as the hero block's .hero-grid.no-art. */
.feature-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.feature-split.no-media { grid-template-columns: 1fr; }
.feature-split.media-right .feature-split-media { order: 2; }
/* min-width:0 overrides the grid item's implicit min-width:auto (based on its
   content's intrinsic size) — without it, an explicit max-width on this grid
   item can't actually shrink it below the image's natural size, and since
   overflow:hidden is set for the rounded corners, the part that couldn't
   shrink was getting visually clipped instead of resizing. */
.feature-split-media { border-radius: 16px; overflow: hidden; line-height: 0; min-width: 0; }
/* border-radius removed here — the parent's overflow:hidden already does the
   actual clipping; having it on both was redundant and could show as a
   subtly doubled/harder edge at the corners. */
.feature-split-media img, .feature-split-media video { width: 100%; height: auto; display: block; }
.feature-split-body .section-lead { margin-bottom: 0; }
.feature-split-body .section-lead p { margin: 0 0 14px; }
.feature-split-body .section-lead p:last-child { margin-bottom: 0; }
/* Dark/noir feature-split: the sitewide .section.dark rules already turn
   .eyebrow/.section-title white, but .section-lead only gets 75%-opacity
   white there (fine for most blocks) and .link-arrow has no override at all
   — it would render in brand-purple, which is genuinely low-contrast on a
   dark background. Scoped to .feature-split-body specifically so this
   doesn't change the dimmed-body-copy look on other blocks that share
   .section-lead/.link-arrow. */
.section.dark .feature-split-body .section-lead,
.section.noir .feature-split-body .section-lead { color: #fff; }
.section.dark .feature-split-body .link-arrow,
.section.noir .feature-split-body .link-arrow { color: #fff; }
@media (max-width: 900px) {
  .feature-split { grid-template-columns: 1fr; gap: 28px; }
  .feature-split.media-right .feature-split-media { order: 0; }
}

/* ─── AI ACCELERATORS ────────────────────────────────────────────── */
.accel { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.accel-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; padding: 8px 14px;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(217,70,239,.12));
  color: var(--brand-purple); border-radius: 999px; margin-bottom: 18px;
  letter-spacing: .05em; text-transform: uppercase;
}
.accel h2 { font-size: 38px; margin-bottom: 16px; }
.accel h2 em { font-style: normal; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accel p { color: var(--text); font-size: 16px; margin-bottom: 26px; }
.video-ph {
  position: relative; aspect-ratio: 16/10;
  background: linear-gradient(135deg, #1A0B3A 0%, #4B1F8B 100%);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); display: grid; place-items: center;
}
/* Legacy-desktop thumbnail behind the play button in .video-ph — a CSS-only
   recreation of the /demo/ legacy scene's look (teal desktop, Windows-95
   style window chrome), not a screenshot; no screenshot tooling was
   available to capture the real thing. Sits at inset:0 behind the
   play-btn/caption (which use .video-ph's own grid centering, unaffected
   since this is absolutely positioned and out of that flow). */
/* Faithful (not abstract) recreation of /demo/index.html's own #legacyScene
   — same teal background, Windows-95 chrome colors, titlebar gradient,
   rainbow hr, marquee, and even the same copy ("ACME Order Entry System",
   link labels) as the real first scene of the demo, scaled down to fit
   here via %-based sizing (the real scene assumes a full viewport, so
   values aren't copied verbatim — structure/colors/copy are). Classes are
   .vpt-* (not the demo's bare .win95/.titlebar/etc.) so this doesn't
   collide with anything else sitewide. */
.video-ph-thumb { position: absolute; inset: 0; background: #008080; overflow: hidden; }
.video-ph-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 45%); pointer-events: none; }
/* .video-ph's aspect ratio (16/9) differs from the real demo's, so the
   icons/window were reading as cropped against the left edge — shifted
   the whole content group right, background unaffected. */
/* Only the window shifts — the icons belong anchored in the corner like a
   real desktop, so they stay outside .vpt-inner (see markup). */
.vpt-inner { position: absolute; inset: 0; transform: translateX(50px); }
/* Fixed px, not %, deliberately — .vpt-icons has no explicit width (only
   top/left), so it shrink-wraps to content; percentage widths on its
   children can't resolve against that and silently collapse to ~0 (the
   "just dots and text" bug). The real demo's own .dicon uses fixed px
   for the same reason (84px), not %. */
.vpt-icons { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 10px; z-index: 1; }
.vpt-ic { width: 34px; text-align: center; color: #fff; font: 6px/1.3 Tahoma, 'MS Sans Serif', sans-serif; text-shadow: 1px 1px 0 #000; }
.vpt-glyph { display: flex; align-items: center; justify-content: center; width: 14px; height: 12px; margin: 0 auto 2px; background: #c0c0c0; border: 1.5px solid; border-color: #fff #404040 #404040 #fff; }
.vpt-glyph svg { width: 8px; height: 8px; flex: 0 0 auto; }
.vpt-window { position: absolute; top: 12%; left: 9%; width: 66%; background: #c0c0c0; border: 2px solid; border-color: #dfdfdf #404040 #404040 #dfdfdf; box-shadow: 4px 4px 0 rgba(0,0,0,.35); font-family: Tahoma, 'MS Sans Serif', sans-serif; }
.vpt-titlebar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: bold; font-size: 8px; padding: 3px 4px; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; overflow: hidden; }
.vpt-tb-btns { display: flex; gap: 2px; flex: 0 0 auto; }
.vpt-tb-btns i { display: inline-block; width: 9px; height: 8px; background: #c0c0c0; border: 1px solid; border-color: #fff #404040 #404040 #fff; font-style: normal; }
.vpt-menubar { padding: 2px 6px; border-bottom: 1px solid #808080; background: #c0c0c0; font-size: 7px; color: #000; }
.vpt-menubar span { margin-right: 8px; }
.vpt-body95 { padding: 6px 8px; background: #c0c0c0; }
.vpt-content { background: #fff; border: 2px inset #808080; padding: 6px 8px; font-family: 'Times New Roman', serif; }
.vpt-h1 { font-size: 9px; text-align: center; color: #000080; font-weight: bold; margin-bottom: 3px; }
.vpt-rainbow { height: 2px; background: linear-gradient(90deg, red, orange, yellow, green, blue, purple); margin: 3px 0; }
.vpt-marquee { background: #ffffcc; border: 1px solid #999; margin: 3px 0; padding: 1px 3px; font-size: 6px; color: #cc0000; font-weight: bold; white-space: nowrap; overflow: hidden; }
.vpt-links { columns: 2; column-gap: 8px; font-size: 6px; line-height: 1.7; margin-top: 3px; }
.vpt-links a { color: #0000EE; text-decoration: underline; }
.vpt-links a.visited { color: #551A8B; }
.play-btn {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  display: grid; place-items: center; color: var(--brand-purple);
  box-shadow: 0 20px 50px rgba(0,0,0,.3); transition: transform 200ms;
  text-decoration: none;
}
.play-btn:hover { transform: scale(1.1); }
.video-caption { position: absolute; bottom: 16px; left: 16px; right: 16px; color: #fff; font-size: 13px; }
.video-caption strong { display: block; font-size: 15px; margin-bottom: 2px; }
.video-caption span  { opacity: .7; font-size: 12px; }
.video-mute-link { opacity: .7; font-size: 12px; color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.video-mute-link:hover { opacity: 1; }

/* ─── SOLUTIONS ──────────────────────────────────────────────────── */
.sol-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 50px; gap: 40px; }
.sol-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.sol-card {
  position: relative; padding: 32px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 200ms, box-shadow 200ms;
  min-height: 260px; display: flex; flex-direction: column; justify-content: space-between;
}
.sol-card.dark {
  background: linear-gradient(135deg, #0B0B1F 0%, #1A0B3A 100%);
  color: #fff; border-color: transparent;
}
.sol-card.dark::after {
  content: ''; position: absolute; bottom: -40px; right: -40px;
  width: 240px; height: 120px;
  background: linear-gradient(90deg, var(--brand-magenta), var(--brand-purple-light));
  filter: blur(40px); opacity: .4; pointer-events: none;
}
.sol-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sol-icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(217,70,239,.15));
  display: grid; place-items: center; color: var(--brand-purple); margin-bottom: 18px;
}
.sol-card.dark .sol-icon { background: rgba(255,255,255,.12); color: #fff; }
.sol-card h3 { font-size: 19px; margin-bottom: 8px; position: relative; z-index: 1; }
.sol-card p  { font-size: 14px; color: var(--text); position: relative; z-index: 1; }
.sol-card.dark p { color: #fff; }
.sol-link { margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--brand-purple); display: inline-flex; align-items: center; gap: 6px; }
.sol-card.dark .sol-link { color: #C4B5FD; }

/* ─── CARDS ──────────────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 200ms, box-shadow 200ms;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-img {
  aspect-ratio: 2/1;
  background: linear-gradient(135deg, #2A0F52 0%, #4B1F8B 50%, #8B5CF6 100%);
  position: relative; overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img.v2 { background: linear-gradient(135deg, #0B0B1F 0%, #1A0B3A 50%, #4B1F8B 100%); }
.card-img.v3 { background: linear-gradient(135deg, #FF7A1A 0%, #D946EF 50%, #8B5CF6 100%); }
.card-img.v4 { background: linear-gradient(135deg, #1E40AF 0%, #4B1F8B 100%); }
.card-img.v5 { background: linear-gradient(135deg, #D946EF 0%, #4B1F8B 100%); }
.card-img.v6 { background: linear-gradient(135deg, #FF7A1A 0%, #4B1F8B 100%); }
.card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card-tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-purple); margin-bottom: 10px; }
/* Real WP categories (post-grid block, single.php): same weight as .card-tag,
   but a row of individually-linked pills instead of one plain-text string. */
.card-cats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.card-cats a, .card-cats span {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-purple);
}
.card-cats a:hover { text-decoration: underline; }
/* Resources archive: category pills are shown as plain <span>s (not <a>), so
   nothing to hover/click there — see archive.php's is_post_type_archive('resource') check. */
.card h3 { font-size: 18px; margin-bottom: 10px; line-height: 1.25; }
.card h3 a { color: inherit; }
.card h3 a:hover { color: var(--brand-purple); }
.card p  { font-size: 14px; color: var(--text); flex: 1; }
/* archive.php cards use <h4> (no default margin under the global *{margin:0} reset) —
   scoped per-archive, via WP's automatic body class, per request. */
body.post-type-archive-resource .card h4,
body.post-type-archive-ef_event .card h4 { margin-bottom: 14px; }
.card-meta {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text); letter-spacing: .05em;
  display: flex; align-items: center; gap: 10px;
}
.card-meta::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-purple-light), var(--brand-magenta)); flex-shrink: 0; }
.card-event-date { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--brand-purple); }

.more-row { text-align: center; margin-top: 50px; }
.placeholder-tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; background: rgba(0,0,0,.4); border-radius: 6px;
  color: rgba(255,255,255,.6);
}
/* Moved to the upper-right in .video-ph specifically so it doesn't sit on
   top of the .video-ph-thumb recreation's own detail (desktop icons live
   in the upper-left of that thumbnail). */
.video-ph .placeholder-tag { left: auto; right: 12px; }

/* ─── AI STRIP ───────────────────────────────────────────────────── */
.ai-strip {
  background: linear-gradient(135deg, #0B0B1F 0%, #1A0B3A 50%, #2A0F52 100%);
  color: #fff; padding: 80px 0; position: relative; overflow: hidden;
}
.ai-strip::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(217,70,239,.2), transparent 40%),
              radial-gradient(circle at 80% 50%, rgba(255,122,26,.15), transparent 40%);
}
.ai-strip::after {
  content: ''; position: absolute; inset: -28px; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  animation: dots-drift 4s linear infinite;
}
.ai-strip-grid { display: grid; grid-template-columns: 220px 1fr; gap: 50px; align-items: center; position: relative; z-index: 1; }
.ai-cloud-ph {
  aspect-ratio: 1; border-radius: 30px;
  background: radial-gradient(circle, rgba(217,70,239,.4) 0%, rgba(139,92,246,.2) 40%, transparent 70%);
  display: grid; place-items: center; position: relative;
}
.ai-big-text {
  font-size: 160px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #e87825 0%, #e87825 55%, #f4a94e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200%;
  animation: grad-pan 5s ease-in-out 1.5s infinite;
  user-select: none;
}
.ai-strip .accel-tag { color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); }
.ai-strip .accel-tag svg { stroke: #fff; }
.ai-strip h2 { color: #fff; font-size: 36px; max-width: 1000px; margin: 0 auto 14px; }
.ai-strip h2 em { font-style: normal; background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-strip p { color: #fff; font-size: 16px; max-width: 1000px; margin: 0 auto 24px; }

/* ─── TESTIMONIAL ────────────────────────────────────────────────── */
.testimonial { padding: 100px 0; background: #fff; }
.quote-wrap { max-width: 860px; margin: 0 auto; text-align: center; }
.testimonial h2 { font-size: 32px; margin-bottom: 50px; }
.quote-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 56px 64px; position: relative; box-shadow: var(--shadow-md);
}
.quote-mark {
  position: absolute; top: 24px; left: 36px;
  font-weight: 800; font-size: 80px; line-height: 1; color: rgba(139,92,246,.15);
}
.quote-card blockquote { font-size: 19px; line-height: 1.55; color: var(--text); margin-bottom: 28px; position: relative; }
.author { display: flex; align-items: center; justify-content: center; gap: 14px; }
.avatar-ph {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-purple-light), var(--brand-magenta));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.author-meta { text-align: left; }
.author-meta strong { display: block; font-size: 15px; color: var(--text); }
.author-meta span { font-size: 13px; color: var(--brand-purple); }
.dots { display: flex; justify-content: center; gap: 0; margin-top: 28px; }
/* Outer element is the 44×44 touch target; inner ::after is the visual dot */
.dots .dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: none;
}
.dots .dot::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(139,92,246,.25);
  transition: background 150ms, transform 150ms;
  display: block;
}
.dots .dot.active::after { background: var(--brand-purple); transform: scale(1.2); }

/* ─── CONTACT ────────────────────────────────────────────────────── */
.contact {
  background: linear-gradient(135deg, #1A0B3A 0%, #2A0F52 100%);
  color: #fff; padding: 100px 0; position: relative; overflow: hidden;
}
.contact::before {
  content: ''; position: absolute; top: -50%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(217,70,239,.2), transparent 60%);
  filter: blur(80px);
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; position: relative; }
.contact-eyebrow { color: var(--brand-orange); }
.contact h2 { color: #fff; font-size: 44px; font-weight: 600; margin-bottom: 24px; }
.contact h2 em { font-style: normal; background: linear-gradient(135deg, #e87825 0%, #e87825 55%, #f4a94e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.contact-lead { color: #fff; font-size: 16px; margin-bottom: 20px; }
.form-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(12px); border-radius: var(--radius-lg); padding: 36px;
  display: flex; align-items: center; justify-content: center; min-height: 380px;
}

/* HubSpot form placeholder */
.hs-placeholder { text-align: center; color: rgba(255,255,255,.5); }
.hs-placeholder svg { margin: 0 auto 16px; opacity: .4; }
.hs-placeholder p { font-size: 14px; line-height: 1.6; }
.hs-placeholder code { font-size: 12px; background: rgba(255,255,255,.1); padding: 2px 6px; border-radius: 4px; }
.hs-missing { color: #FF7A1A; font-size: 14px; text-align: center; }

/* HubSpot overrides — make injected form match dark theme */
#hs-form-wrap .hs-form-field label { color: rgba(255,255,255,.8); font-size: 13px; font-weight: 500; margin-bottom: 6px; display: block; }
#hs-form-wrap .hs-input { width: 100%; padding: 12px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #fff; font-size: 14px; font-family: inherit; transition: border-color 150ms; }
#hs-form-wrap .hs-input:focus { outline: none; border-color: var(--brand-purple-light); background: rgba(255,255,255,.1); }
#hs-form-wrap .hs-button { width: 100%; padding: 14px 24px; background: var(--grad-orange); color: #fff; border: none; border-radius: 0; font-weight: 600; font-size: 15px; cursor: pointer; font-family: inherit; transition: transform 150ms; }
#hs-form-wrap .hs-button:hover { transform: translateY(-2px); }

/* ─── FOOTER ─────────────────────────────────────────────────────── */
footer { background: #0B0B1F; color: rgba(255,255,255,.7); padding: 70px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(3,1fr); gap: 40px; margin-bottom: 50px; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.foot-tagline { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 22px; }
.social { display: flex; gap: 10px; }
.social a { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.06); display: grid; place-items: center; transition: background 150ms; color: rgba(255,255,255,.7); }
.social a:hover { background: var(--brand-purple); color: #fff; }
.foot-col h3 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 16px; letter-spacing: .02em; }
/* Sub-group heading within a column (e.g. "AI & Data Services" under "Expertise") —
   matches prod's footer having a column title + several named link groups beneath it. */
.foot-col h4 { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 4px; }
.foot-col h4:first-of-type { margin-top: 0; }
.foot-col ul  { list-style: none; margin-bottom: 0; padding-left: 10px; }
.foot-col li  { margin-bottom: 2px; }
.foot-col a   { font-size: 13px; color: rgba(255,255,255,.65); transition: color 150ms; }
.foot-col a:hover { color: var(--brand-purple-light); }
/* Colors match the header mega-menu's pills (custom-header plugin,
   assets/style.css .cmh-pill-hiring / .cmh-pill-join). */
.foot-pill { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }
.foot-pill-hiring { background: #f4d7f4; color: #5e007f; }
.foot-pill-join   { background: #fff3e0; color: #924500; }
.copy { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: rgba(255,255,255,.5); }
.copy-links { display: flex; align-items: center; gap: 20px; }
.copy a:hover, .footer-cookie-settings:hover { color: #fff; }
/* Reset to match the adjacent Privacy Policy link's plain-text look (a { color:inherit } elsewhere). */
.footer-cookie-settings { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* ─── INNER PAGES ────────────────────────────────────────────────── */
.inner-main    { min-height: 60vh; }
.inner-title   { font-size: 44px; margin-bottom: 40px; }
.inner-content { max-width: 820px; }
.inner-content p    { margin-bottom: 1.25em; color: var(--muted); font-size: 16px; line-height: 1.7; }
.inner-content h2   { font-size: 28px; margin: 2em 0 .75em; }
.inner-content h3   { font-size: 22px; margin: 1.75em 0 .6em; }
.inner-content ul, .inner-content ol { padding-left: 1.5em; margin-bottom: 1.25em; color: var(--muted); font-size: 16px; }
.inner-content li   { margin-bottom: .5em; }

/* ─── SINGLE POST ────────────────────────────────────────────────── */
.post-hero { background: var(--paper); padding: 80px 0 60px; border-bottom: 1px solid var(--line); }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-purple); margin-bottom: 24px; }
.back-link:hover { gap: 12px; transition: gap 150ms; }
.post-title   { font-size: 44px; max-width: 800px; margin-bottom: 20px; }
.post-title .grad { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.post-meta-bar { display: flex; gap: 10px; font-size: 14px; color: var(--muted); }
.post-featured-img { padding: 40px 0; background: var(--paper); }
.post-featured-img img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.post-body    { padding: 60px 0 100px; }
.post-content { max-width: none; }
.post-content p  { margin-bottom: 1.4em; font-size: 17px; line-height: 1.75; color: #333; }
.post-content h2 { font-size: 30px; margin: 2em 0 .75em; }
.post-content h3 { font-size: 24px; margin: 1.75em 0 .6em; }
.post-content ul, .post-content ol { padding-left: 1.5em; margin-bottom: 1.4em; font-size: 17px; line-height: 1.75; }
.post-content li { margin-bottom: .5em; }
.post-content blockquote { border-left: 4px solid var(--brand-purple-light); padding: 16px 24px; margin: 2em 0; background: rgba(139,92,246,.04); border-radius: 0 8px 8px 0; font-style: italic; color: var(--muted); }

.post-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line); }
.post-nav-link { display: flex; flex-direction: column; gap: 6px; max-width: 45%; }
.post-nav-link.next { text-align: right; margin-left: auto; }
.nav-dir  { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-purple); }
.nav-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.post-nav-link:hover .nav-title { color: var(--brand-purple); }

/* ─── ARCHIVE ────────────────────────────────────────────────────── */
.archive-hero { background: var(--paper); padding: 80px 0 0; border-bottom: 1px solid var(--line); }
.archive-hero .section-title { padding-bottom: 60px; }
.wp-pagenavi, .nav-links { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.wp-pagenavi a, .wp-pagenavi span, .nav-links .page-numbers {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; color: var(--text); transition: background 150ms, color 150ms;
}
.wp-pagenavi a:hover, .nav-links a.page-numbers:hover { background: var(--brand-purple); color: #fff; border-color: var(--brand-purple); }
.wp-pagenavi span.current, .nav-links .page-numbers.current { background: var(--brand-purple); color: #fff; border-color: var(--brand-purple); }
/* Prev/next are text links ("← Newer" / "Older →"), not single digits — a boxed
   pill looks stretched/inconsistent next to numeric pages, so give them the same
   plain link treatment used elsewhere on the site instead of a border. */
.nav-links .prev.page-numbers, .nav-links .next.page-numbers {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 4px; border: none; background: none; color: var(--brand-purple); font-weight: 600;
}
.nav-links .prev.page-numbers:hover, .nav-links .next.page-numbers:hover { background: none; color: var(--brand-purple-deep, var(--brand-purple)); text-decoration: underline; }
/* Ellipsis "…" isn't clickable — it shouldn't look like a button. */
.nav-links .page-numbers.dots { border: none; background: none; padding: 8px 2px; }

/* ─── BACK TO TOP ────────────────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 32px; right: 32px; z-index: 90;
  width: 48px; height: 48px;
  background: var(--brand-purple-deep);
  color: #fff; border-radius: 0;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity 250ms, visibility 250ms, transform 250ms, background 150ms;
  box-shadow: 0 8px 24px rgba(75,31,139,.35);
  cursor: pointer; border: none;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--brand-purple); }

/* ─── TESTIMONIAL ROTATOR ────────────────────────────────────────── */
.testimonial-slides {
  display: grid;
}
.testimonial-slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  animation: none;
}
.testimonial-slide.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: fadeSlide 500ms ease both;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── CARD READ MORE LINK ────────────────────────────────────────── */
.card-read-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--brand-purple);
  transition: gap 150ms;
}
.card-read-more:hover { gap: 10px; color: var(--brand-purple); }

/* ─── EVENTS SECTION ─────────────────────────────────────────────── */
.event-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.event-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column;
  transition: transform 200ms, box-shadow 200ms;
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.event-date {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-orange); margin-bottom: 12px;
}
.event-card h3 { font-size: 17px; margin-bottom: 10px; line-height: 1.3; }
.event-card p  { font-size: 14px; color: var(--text); flex: 1; }
.event-read-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--brand-purple);
  transition: gap 150ms;
}
.event-read-more:hover { gap: 10px; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero h1 { font-size: 48px; }
  .hero-grid, .accel, .ai-strip-grid, .why, .contact-grid { grid-template-columns: 1fr; }
  .stats-grid, .sol-grid, .card-grid, .why-cards, .event-grid { grid-template-columns: repeat(2,1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .gartner-grid { grid-template-columns: 160px 1fr; }
  .gartner-grid .link-arrow { display: none; }
  .megamenu-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .topnav-nav, .topnav-right .btn-topnav { display: none; }
  .mobile-toggle { display: grid; }
  .megamenu, .dropdown { display: none; }
}

@media (max-width: 720px) {
  .topnav-inner { padding: 0 20px; height: 72px; }
  .back-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; }
  .container { padding: 0 20px; }
  .stats-grid, .sol-grid, .card-grid, .why-cards, .event-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 36px; }
  .section { padding: 60px 0; }
  .section-title { font-size: 32px; }
  section#solutions { position: static; }
  section#solutions ~ section { position: static; z-index: auto; }
  section#solutions + section { box-shadow: none; }
  .section.alt#cases { position: static; }
  #cases ~ section { position: static; z-index: auto; }
  #cases + section { box-shadow: none; }
  .quote-card { padding: 36px 24px; }
  .foot-grid { grid-template-columns: 1fr; }
  .gartner-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 100%; }
  .post-title { font-size: 32px; }
  .sol-head { flex-direction: column; }
  .contact-grid { gap: 40px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 30px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-num { font-size: 56px; }
  .copy { flex-direction: column; gap: 8px; }
}

/* ─── AI-First Animations ────────────────────────────────────────── */

/* 1. Animated gradient text — .grad words cycle through the palette */
@keyframes grad-pan {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.hero h1 .grad {
  background-size: 200%;
  animation: grad-pan 5s ease-in-out infinite;
}
.section-title .grad {
  background-size: 200%;
  animation: grad-pan 6s ease-in-out 0.8s infinite;
}

/* 2. Hero art badge — gentle levitation */
@keyframes float-badge {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}
.aws-badge { animation: float-badge 5s ease-in-out infinite; }

/* 3. Stats section — drifting circuit dot grid */
@keyframes dots-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(28px, 28px); }
}
.stats::after {
  content: ''; position: absolute; inset: -28px; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  animation: dots-drift 4s linear infinite;
}
.stats-grid { position: relative; z-index: 1; }

/* 4. AI blinking cursor */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.ai-cursor {
  display: inline-block; color: var(--brand-orange);
  animation: cursor-blink 1.1s step-end infinite;
  font-weight: 300; margin-left: 1px; font-style: normal;
}

/* 5. Card hover shimmer — a light streak across on hover */
@keyframes card-shimmer {
  from { transform: translateX(-110%) skewX(-18deg); }
  to   { transform: translateX(210%)  skewX(-18deg); }
}
.sol-card, .why-card, .card {
  position: relative;
  overflow: hidden;
}
.sol-card::before, .why-card::before, .card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: translateX(-110%) skewX(-18deg);
  pointer-events: none; z-index: 2;
  transition: none;
}
.sol-card:hover::before, .why-card:hover::before, .card:hover::before {
  animation: card-shimmer 0.65s ease-in-out;
}

/* 6. Eyebrow scramble — prevents FOUC during scramble */
.eyebrow[data-scrambled] { letter-spacing: .03em; }

/* ─── Vertical page navigation ──────────────────────────────────── */
/* Eyebrows double as page-nav anchor targets on block pages — offset for the sticky header. */
.eyebrow { scroll-margin-top: 96px; }
.page-nav {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  padding: 14px 9px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  display: none;
}
@media (min-width: 1380px) {
  .page-nav { display: block; }
}
.pnav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}
/* connecting line */
.pnav-list::before {
  content: '';
  position: absolute;
  top: 10px; bottom: 10px;
  left: 50%; transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(255,122,26,0.5) 15%,
    rgba(255,122,26,0.5) 85%,
    transparent);
}
.pnav-item { position: relative; margin: -5px 0; }
.pnav-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  position: relative;
}
/* dot circle */
.pnav-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(232,120,37,0.45);
  border: none;
  transition: all 220ms ease;
  display: block;
  position: relative; z-index: 1;
}
.pnav-dot.is-active::before {
  width: 11px; height: 11px;
  background: #e87825;
  border: none;
  box-shadow: 0 0 10px rgba(232,120,37,0.8), 0 0 20px rgba(232,120,37,0.4);
}
/* label — hidden until hover or active */
.pnav-label {
  position: absolute;
  left: calc(100% + 4px);
  top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(18,1,57,0.82);
  border: 1px solid rgba(73,50,144,0.3);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms, transform 180ms;
  transform: translateY(-50%) translateX(-4px);
}
.pnav-dot:hover .pnav-label,
.pnav-dot.is-active .pnav-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── Gauge Panel (Why Effectual scroll animation) ─────────────────── */
.gauge-panel-wrap {
  width: 100%;
  max-width: 720px;
  margin: 3rem auto 0;
}
.gauge-panel-inner {
  border-radius: 12px;
  overflow: hidden;
  padding: 1.5rem 0 0.5rem;
}
.gauge-state-strip {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 1rem;
  padding: 0 10px;
}
#effectual-gauges {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Block-editor pages (Full Width template) ───────────────────────
   Make the core Group/container block behave like a homepage section:
   inner content constrained to the .container width (1240 + gutter),
   with .alignwide / .alignfull options. Backgrounds come from theme.json. */
.block-canvas { width: 100%; }
/* Anything OUTSIDE a container is full width. A container (a constrained Group)
   behaves like the homepage .container: a centered column at the site content
   width whose contents flow left and line up — headings, eyebrow pills and
   buttons alike (WordPress's default centers each child, which only works for
   block-level elements and leaves inline pills/buttons stranded at the edge). */
.block-canvas .wp-block-group.is-layout-constrained:not(.alignfull):not(.alignwide) {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 32px);
}
.block-canvas .wp-block-group.is-layout-constrained:not(.alignfull):not(.alignwide) > * {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.block-canvas .alignwide { max-width: 1400px; margin-inline: auto; }
.block-canvas .alignfull { max-width: none; }
/* The eyebrow pill and button are inline by design; placed directly in a
   container, make them left-aligned block items so they stack and space like
   the heading instead of collapsing to the edge. */
.block-canvas .wp-block-group.is-layout-constrained > .eyebrow,
.block-canvas .wp-block-group.is-layout-constrained > .btn,
.block-canvas .wp-block-group.is-layout-constrained > .btn-stroke {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
}
/* A full-width container with a background reads as a section — give it
   homepage-style vertical padding by default (editor padding overrides). */
.block-canvas > .wp-block-group.has-background { padding-block: clamp(56px, 8vw, 100px); }

/* ─── Section Headline block ─────────────────────────────────────────
   Stacked eyebrow + gradient title + lead + button; left by default. */
.ef-section-head.is-center { text-align: center; }
.ef-section-head.is-center .section-title,
.ef-section-head.is-center .section-lead { margin-left: auto; margin-right: auto; }

/* ─── Card Grid block (effectual/card-grid) ──────────────────────────
   Flexible row of icon feature cards. Reuses the homepage .why-card look;
   the column count is set per-block via the --ef-cols custom property. */
.ef-card-grid {
  display: grid;
  grid-template-columns: repeat(var(--ef-cols, 3), minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.ef-card-grid.is-center { text-align: center; }
.ef-card-grid.is-center .why-icon { margin-left: auto; margin-right: auto; }
@media (max-width: 980px) { .ef-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ef-card-grid { grid-template-columns: 1fr; } }
/* mediaStyle:"thumbnail" cards (e.g. case-study/photo grids): the image bleeds
   full-width to the card edges at a fixed height instead of the small square
   logo treatment, so mixed-aspect source photos all read as the same size. */
.why-card.has-thumb { padding: 0 22px 28px; overflow: hidden; }
.why-thumb { margin: 0 -22px 18px; width: calc(100% + 44px); height: 180px; }
.why-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Value Props block (effectual/value-props) ──────────────────────
   Two-column list of differentiators: icon + title + supporting copy. */
.ef-vp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 44px;
  margin-top: 44px;
}
.ef-vp-item { display: flex; gap: 16px; align-items: flex-start; }
.ef-vp-icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(217,70,239,.12));
  display: grid; place-items: center; color: var(--brand-purple);
}
.ef-vp-body h3 { font-size: 18px; margin-bottom: 6px; }
.ef-vp-body p  { font-size: 14px; color: var(--text); }
@media (max-width: 760px) { .ef-vp-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Optional bulleted supporting copy (value-props items, tabbed-benefits panels,
   card-grid card text): a checkmark bullet reusing the credentials block's
   checkmark-circle look (.cred-check) instead of the default disc marker. */
.ef-vp-body ul, .ef-tabpanel ul, .why-card ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ef-vp-body ul li, .ef-tabpanel ul li, .why-card ul li {
  position: relative; padding-left: 26px; font-size: 14px; color: var(--text);
}
.ef-tabpanel ul li { font-size: 15px; }
.ef-vp-body ul li::before, .ef-tabpanel ul li::before, .why-card ul li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(217,70,239,.12));
}
.ef-vp-body ul li::after, .ef-tabpanel ul li::after, .why-card ul li::after {
  content: ''; position: absolute; left: 5px; top: 7px; width: 8px; height: 5px;
  border-left: 2px solid var(--brand-purple); border-bottom: 2px solid var(--brand-purple);
  transform: rotate(-45deg);
}

/* ─── Process Steps block (effectual/process-steps) ──────────────────
   Numbered phases with gradient step numbers; count via --ef-steps. */
.ef-steps {
  display: grid;
  grid-template-columns: repeat(var(--ef-steps, 3), minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.ef-step { position: relative; }
.ef-step-num {
  font-size: 42px; font-weight: 700; line-height: 1; margin-bottom: 14px;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ef-step h3 { font-size: 18px; margin-bottom: 8px; }
.ef-step p  { font-size: 14px; color: var(--text); }
.section.dark .ef-step h3, .section.noir .ef-step h3 { color: #fff; }
.section.dark .ef-step p, .section.noir .ef-step p { color: rgba(255,255,255,.75); }
/* Subtle connector between steps on wide screens */
.ef-step:not(:last-child)::after {
  content: ''; position: absolute; top: 20px; right: -16px; width: 32px; height: 2px;
  background: linear-gradient(90deg, rgba(139,92,246,.4), rgba(217,70,239,0));
}
@media (max-width: 760px) {
  .ef-steps { grid-template-columns: 1fr; gap: 28px; }
  .ef-step:not(:last-child)::after { display: none; }
}

/* ─── Story Act block (effectual/story-act) ──────────────────────────
   Cinematic "chapter" section: gradient title, then a narrow single-column
   reading measure for the prose chapters (long-form copy reads better
   narrow, not full-container-width). */
.ef-story-act .ef-act-head { margin-top: 28px; }
.ef-story-act .section-title { margin-bottom: 0; }
.ef-story-act [data-story-egg].section-title {
  cursor: pointer; transition: transform 200ms, filter 200ms; width: fit-content;
}
.ef-story-act [data-story-egg].section-title:hover,
.ef-story-act [data-story-egg].section-title:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 24px rgba(139,92,246,.35));
}
.ef-story-act [data-story-egg].section-title:focus-visible { outline: 2px solid var(--brand-purple); outline-offset: 6px; }
.ef-act-chapters {
  display: flex; flex-direction: column; gap: 40px;
  max-width: 760px; margin-top: 44px;
}
.ef-act-chapter h3 { font-size: 20px; margin-bottom: 10px; }
.ef-act-chapter p { font-size: 16px; line-height: 1.7; color: var(--text); margin-bottom: 12px; }
.ef-act-chapter p:last-child { margin-bottom: 0; }
.ef-act-chapter .ef-manifesto-line { margin-top: 20px; }
.section.dark .ef-act-chapter h3, .section.noir .ef-act-chapter h3 { color: #fff; }
.section.dark .ef-act-chapter p, .section.noir .ef-act-chapter p { color: rgba(255,255,255,.75); }

/* ─── Manifesto Line block (effectual/manifesto-line) ─────────────────
   Short declarative statements in large type, staggered in via the shared
   .reveal-stagger observer (theme.js) — no block-specific JS needed. Also
   reused (same class) for a Story Act chapter's optional punch-line close. */
.ef-manifesto { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.ef-manifesto-line {
  font-weight: 700; line-height: 1.2; color: var(--ink); margin: 0;
}
.ef-manifesto-sm .ef-manifesto-line { font-size: clamp(16px, 1.8vw, 22px); }
.ef-manifesto-md .ef-manifesto-line { font-size: clamp(22px, 3.4vw, 40px); }
.ef-manifesto-lg .ef-manifesto-line { font-size: clamp(32px, 5vw, 64px); }
.section.dark .ef-manifesto-line, .section.noir .ef-manifesto-line { color: rgba(255,255,255,.92); }

/* ─── Tabbed Benefits block (effectual/tabbed-benefits) ──────────────
   Accessible content tabs; first panel shows pre-JS. */
.ef-tabs { margin-top: 44px; }
.ef-tablist {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--line); margin-bottom: 30px;
}
.ef-tab {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  font-weight: 600; font-size: 15px; color: var(--muted); padding: 12px 18px;
  position: relative; border-radius: 10px 10px 0 0; transition: color 150ms;
}
.ef-tab:hover { color: var(--brand-purple); }
.ef-tab.is-active { color: var(--brand-purple); }
.ef-tab.is-active::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px;
  background: var(--grad-accent); border-radius: 3px 3px 0 0;
}
.ef-tabpanel { display: none; }
.ef-tabpanel.is-active { display: block; animation: ef-tab-fade .25s ease; }
.ef-tabpanel h3 { font-size: 22px; margin-bottom: 12px; }
.ef-tabpanel p  { font-size: 15px; color: var(--text); max-width: 760px; }
@keyframes ef-tab-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ef-tabpanel.is-active { animation: none; } }

/* ─── Job Listings block (effectual/job-listings) ─────────────────────
   Live Greenhouse job board — dark-tone overrides live up in .section.dark. */
.job-filters { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; margin-bottom: 28px; }
.job-filter {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  min-width: 220px; padding: 12px 40px 12px 16px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234B1F8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: border-color 150ms, box-shadow 150ms;
}
.job-filter:hover { border-color: rgba(139,92,246,.4); }
.job-filter:focus-visible { outline: none; border-color: var(--brand-purple); box-shadow: 0 0 0 3px rgba(139,92,246,.15); }

.job-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.job-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 26px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}
.job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(139,92,246,.3); }
.job-card-main { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; min-width: 0; }
.job-card h3 { font-size: 17px; margin: 0; }
.job-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(217,70,239,.12));
  color: var(--brand-purple);
}
.job-apply { flex-shrink: 0; }
.job-empty { margin-top: 44px; color: var(--text); font-size: 15px; }

@media (max-width: 640px) {
  .job-filters { flex-direction: column; }
  .job-filter { width: 100%; }
  .job-card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .job-apply { align-self: flex-start; }
}

/* ─── KEY TAKEAWAYS / FAQ (content add-ons) ─────────────────────────── */
/* Both sit inside the standard `.section > .container` wrapper (same as
   every other block), so width/vertical rhythm come from there — these
   rules are just the inner box styling. */
.ef-takeaways {
  background: var(--paper); border-left: 2px solid var(--brand-purple);
  border-radius: 8px; padding: 24px 28px;
}
/* Scoped as `.ef-takeaways .ef-takeaways-title` (2 classes), not just
   `.ef-takeaways-title` (1 class) — on blog posts this sits inside
   `.post-content`, and `.post-content h2` (1 class + 1 element = higher
   specificity than a single class alone) was winning the cascade and adding
   a 2em top margin + 30px font-size, which is what made the border-left
   look like it started way above the actual title text. */
.ef-takeaways .ef-takeaways-title { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: var(--text); }
.ef-takeaways ul { margin: 0; padding-left: 20px; }
.ef-takeaways li { margin-bottom: 8px; color: var(--text); line-height: 1.6; }
/* Used when there's no `.section` wrapper to lean on for spacing (blog posts —
   see the_content filter) — needs its own bottom margin, and a bit tighter
   internal spacing since it's sitting inline in a narrow article column
   rather than as its own full section. Same specificity (2 classes) as the
   base `.ef-takeaways-title` rule above, so it must come AFTER it in the
   stylesheet to win the cascade tie — order matters here, not just specificity. */
.ef-takeaways--standalone { margin: 0 0 32px; padding: 20px 24px; }
.ef-takeaways--standalone .ef-takeaways-title { margin-bottom: 8px; }
.ef-takeaways--standalone li { margin-bottom: 6px; }
.ef-takeaways li:last-child { margin-bottom: 0; }

.ef-faq .ef-faq-title { font-size: 24px; font-weight: 700; margin: 0 0 20px; color: var(--text); }
.ef-faq-item { border-bottom: 1px solid var(--line); padding: 16px 0; }
.ef-faq-item summary {
  cursor: pointer; font-weight: 600; color: var(--text); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.ef-faq-item summary::-webkit-details-marker { display: none; }
.ef-faq-item summary::after {
  content: '+'; font-size: 20px; line-height: 1; color: var(--brand-purple); flex-shrink: 0;
  transition: transform 150ms;
}
.ef-faq-item[open] summary::after { transform: rotate(45deg); }
.ef-faq-answer { margin-top: 12px; color: var(--text); line-height: 1.7; }
.ef-faq-answer p { margin: 0; }

/* ─── PRINT ──────────────────────────────────────────────────────────
   Sitewide — hide persistent chrome that has no business on a printed
   page. Added for the Privacy Policy page's print/PDF feature, but this
   is correct for every page, not just that one. */
@media print {
  header, footer,
  #cmh-notice-bar,
  #ef-chat-launcher, #ef-chat-panel, #ef-chat-nudge,
  #ef-cookie-banner, #ef-cookie-fab, #ef-cookie-settings-modal,
  #ef-reinvent-wrap,
  .back-to-top {
    display: none !important;
  }
}