/* =====================================================
   AIO — Workforce Operating System
   Pixel-perfect rebuild from Figma (node 3002-20541)
   ===================================================== */

:root {
  --c-bg: #ffffff;
  --c-bg-dark: #000000;
  --c-ink: #141414;
  --c-ink-2: #171717;
  --c-ink-3: #1b1b1b;
  --c-muted: #525252;
  --c-muted-2: #737373;
  --c-muted-3: #a3a3a3;
  --c-line: #eaeaea;
  --c-line-2: #e5e5e5;
  --c-accent: #ef4444;          /* red for "new" + symbols */
  --c-accent-2: #da0010;        /* deep brand red for buttons */
  --c-on-dark: #eaeaea;
  --c-on-dark-2: #cccccc;

  --f-display: "Montserrat", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --f-body: "Karla", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;

  --container: 1563px;
  --radius-card: 40px;
  --radius-btn: 10px;
  --radius-slide: 47px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);color:var(--c-ink);background:var(--c-bg);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--c-accent);color:#fff}

.skip-link{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:12px 16px;z-index:100}
.skip-link:focus{left:8px;top:8px}

/* ---------- Accessible focus ring (visible only for keyboard users) ---------- */
:focus-visible{outline:2px solid var(--c-accent-2);outline-offset:3px;border-radius:4px}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline-offset:4px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:0}
.cookie-switch input:focus-visible + .cookie-switch__track{outline:2px solid var(--c-accent-2);outline-offset:3px;border-radius:999px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 82px}

/* ---------- Brand ---------- */
.brand{display:inline-flex;align-items:center;gap:14px;line-height:1}
.brand__logo{font-family:var(--f-display);font-weight:300;font-size:44px;letter-spacing:-0.02em;color:#1b1b1b}
.brand__dot{color:var(--c-accent)}   /* red full stop, same #ef4444 as the rest of the accents */
.brand__tag{font-family:var(--f-display);font-weight:400;font-size:13.7px;line-height:1.36;color:#0a0a0a}
.brand--dark .brand__logo{color:#eaeaea;font-weight:300}
.brand--dark .brand__tag{color:#a3a3a3}

/* ---------- Header / Nav ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:30;padding:24px 0}
.site-header .brand__logo{color:#1b1b1b}
.site-header .brand__tag{color:#0a0a0a}
.site-header .container{max-width:1660px;padding-left:56px;padding-right:56px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__links{display:flex;align-items:center;gap:28px;font-size:16px;color:var(--c-ink);font-family:var(--f-body);white-space:nowrap}
.nav__links a{padding:6px 2px;transition:color .2s ease}
.nav__links a:hover{color:var(--c-accent-2)}
/* Active page. The markup already carried aria-current="page" on every
   subpage, but nothing styled it — so no item ever looked selected and the
   red "Contact us" button read as the highlight instead. */
.nav__links a[aria-current="page"]{color:var(--c-accent-2);font-weight:600}
.nav__links a[aria-current="page"]::after{content:"";display:block;height:2px;margin-top:4px;
  background:var(--c-accent-2);border-radius:2px}
body.has-dark-hero .site-header .nav__links a[aria-current="page"]{color:var(--c-accent)}
body.has-dark-hero .site-header .nav__links a[aria-current="page"]::after{background:var(--c-accent)}
.nav__toggle{display:none;width:44px;height:44px;padding:0;background:transparent;border:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:8px}
.nav__toggle-bar{display:block;width:24px;height:2px;background:var(--c-ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:var(--radius-btn);
  font-family:var(--f-body);font-weight:500;font-size:16px;line-height:1;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .25s ease;
  white-space:nowrap;
}
.btn--sm{padding:10px 16px;font-size:14px;border-radius:9px;gap:8px}
.btn--sm .btn__arrow{width:18px;height:18px}
.btn__arrow{width:22px;height:22px;flex:none}
.btn--primary{background:var(--c-accent-2);color:#fff}
.btn--primary:hover{background:#b8000d}
.btn--ghost{background:transparent;color:var(--c-ink);border:1px solid rgba(255,255,255,.8);color:#fff}
.btn--pink{background:#E8A0BF;color:#fff}
.btn--pink:hover{background:#d98ab0}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* ---------- Arrow nav buttons ---------- */
.arrow-btn{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(0,0,0,.18);
  color:var(--c-ink);transition:background .2s ease,color .2s ease,border-color .2s ease,transform .25s ease;
}
.arrow-btn svg{width:20px;height:20px}
.arrow-btn:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.arrow-btn--light{border-color:rgba(255,255,255,.35);color:#fff}
.arrow-btn--light:hover{background:#fff;color:#000;border-color:#fff}
.arrow-btn:disabled{opacity:.35;cursor:not-allowed}
.arrow-btn:disabled:hover{background:transparent;color:inherit;border-color:rgba(0,0,0,.18)}

/* ---------- Section head (shared) ---------- */
.section-head{margin-bottom:72px}
.section-head__title{font-family:var(--f-display);font-weight:600;font-size:40px;line-height:1.2;letter-spacing:-0.01em;color:var(--c-ink);margin-bottom:22px}
.section-head__row{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap}
.section-head__lead{max-width:700px;font-size:16px;line-height:1.55;color:var(--c-muted);font-family:var(--f-body)}
.section-head__nav{display:inline-flex;gap:10px;flex:none}
.section-head--dark .section-head__title{color:#eaeaea}
.section-head--dark .section-head__lead{color:#a3a3a3}

/* ===========================================================
   HERO — Frame 544 (1728x1117). Rocks backdrop with centered
   brand mark (logo + tagline) overlay.
   =========================================================== */
.hero{position:relative;width:100vw;height:100vh;background:#fff;overflow:hidden}
.hero__bg{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block;object-fit:unset;z-index:1;pointer-events:none}
.hero__bg{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block;object-fit:unset}
.hero__center{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero__brand{
  display:flex;align-items:center;gap:32px;
  margin:0;line-height:1;
}
.hero__logo{
  font-family:var(--f-display);font-weight:400;font-size:180px;
  letter-spacing:-0.04em;color:#1b1b1b;line-height:.85;
}
.hero__dot{color:var(--c-accent)}   /* matches the red full stop in the header lockup */
.hero__tag{
  font-family:var(--f-display);font-weight:400;font-size:36px;line-height:1.25;
  color:#2a2a2a;text-align:left;
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===========================================================
   FEATURES — black section with horizontal carousel
   =========================================================== */
.features{position:relative;background:#000;color:#fff;padding:120px 0 140px;overflow:hidden;isolation:isolate}
.features::before{content:"";position:absolute;top:-200px;right:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(218,0,16,.22),rgba(218,0,16,0) 70%);filter:blur(30px);z-index:0;pointer-events:none}
.features::after{content:"";position:absolute;bottom:-220px;left:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(218,0,16,.14),rgba(218,0,16,0) 70%);filter:blur(36px);z-index:0;pointer-events:none}
.features > *{position:relative;z-index:1}
.features .section-head{margin-bottom:64px}

.carousel{position:relative;overflow:hidden}
.carousel__track{
  display:flex;gap:22px;
  padding:0 82px;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.feature-card{
  flex:0 0 974px;max-width:974px;
  display:flex;flex-direction:column;gap:18px;
}
.feature-card__media{
  position:relative;aspect-ratio: 974/610;
  border-radius:var(--radius-card);
  overflow:hidden;background:#141414;
  border:1px solid rgba(255,255,255,.06);
}
.feature-card__media img{position:absolute;inset:24px;width:calc(100% - 48px);height:calc(100% - 48px);object-fit:contain;object-position:center;border-radius:24px;transition:transform .6s ease}
.feature-card:hover .feature-card__media img{transform:scale(1.02)}
.feature-card__title{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.4;color:#eaeaea;margin-top:12px}
.feature-card__desc{font-family:var(--f-body);font-size:16px;line-height:1.55;color:#a3a3a3;max-width:780px}
.feature-card__more{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--f-body);font-size:14px;font-weight:500;color:#eaeaea;padding:10px 0;align-self:flex-start;transition:color .2s ease,gap .2s ease}
.feature-card__more svg{width:22px;height:22px;color:var(--c-accent-2);transition:transform .25s ease}
.feature-card__more:hover{color:#fff;gap:14px}
.feature-card__more:hover svg{transform:translateX(2px)}

/* ===========================================================
   PARADIGM — full-bleed image, 2-line mega title bottom-left,
   small play-circle + caption top-right.
   =========================================================== */
.paradigm{position:relative;min-height:900px;height:100vh;max-height:1117px;display:flex;flex-direction:column;overflow:hidden;color:#fff}
.paradigm__media{position:absolute;inset:0;z-index:0}
.paradigm__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.paradigm__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.8) 100%)}
.paradigm__inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:80px 0 100px;width:100%;flex:1}
.paradigm__top{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-bottom:auto}
.paradigm__top .play-btn{order:-1}
.paradigm__caption{max-width:240px;font-family:var(--f-body);font-weight:400;font-size:14px;line-height:1.45;color:#cccccc}

.play-btn{
  color:#eaeaea;transition:transform .3s ease,color .2s ease;
  display:inline-flex;align-items:center;justify-content:center;
}
.play-btn svg{width:48px;height:48px}
.play-btn:hover{transform:scale(1.05);color:#fff}

.paradigm__title{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(110px,19vw,266px);line-height:.86;letter-spacing:-0.045em;
  color:#eaeaea;text-transform:lowercase;
  margin:0;
}
.paradigm__accent{color:var(--c-accent)}

/* ===========================================================
   UNIFIED INTELLIGENCE — white, centered statement,
   3 checkmark pillars widely spaced at the bottom.
   =========================================================== */
.intel{padding:160px 0 140px;background:#fff;position:relative;overflow:hidden;isolation:isolate}
.intel::before{content:"";position:absolute;top:120px;left:-180px;width:480px;height:480px;border-radius:50%;background:radial-gradient(closest-side,rgba(218,0,16,.10),rgba(218,0,16,0) 70%);filter:blur(28px);z-index:0;pointer-events:none}
.intel::after{content:"";position:absolute;bottom:80px;right:-160px;width:440px;height:440px;border-radius:50%;background:radial-gradient(closest-side,rgba(218,0,16,.09),rgba(218,0,16,0) 70%);filter:blur(28px);z-index:0;pointer-events:none}
.intel > *{position:relative;z-index:1}
.intel__inner{max-width:1222px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:130px}
.intel__statement{
  font-family:var(--f-display);font-weight:500;font-size:48px;line-height:1.25;
  letter-spacing:-0.015em;color:var(--c-ink);max-width:1000px;
  text-align:left;
}
.intel__accent{color:var(--c-accent);font-weight:700}
.intel__pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;max-width:1100px}
.intel__pillar{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:36px 32px;background:#fafafa;border:1px solid var(--c-line);border-radius:24px;font-family:var(--f-display);font-weight:600;font-size:22px;line-height:1.25;letter-spacing:-.4px;color:var(--c-ink);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease}
.intel__pillar:hover{transform:translateY(-4px);background:#fff;border-color:#d4d4d4;box-shadow:0 18px 40px rgba(0,0,0,.06)}
.intel__check{flex:none;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:var(--c-accent-2);background:rgba(218,0,16,.08);border-radius:14px;margin:0}
.intel__check svg{width:26px;height:26px}

/* ===========================================================
   SLIDE — Dark rounded card with a wavy-mesh background
   =========================================================== */
.slide{padding:120px 0;background:#fff}
.slide__card{
  position:relative;overflow:hidden;
  border-radius:var(--radius-slide);
  aspect-ratio:1204/677;max-width:1204px;margin:0 auto;
  color:#eaeaea;background:#0a0a0a;
}
.slide__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.85}
.slide__card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at 30% 50%,rgba(0,0,0,.25),rgba(0,0,0,.65) 80%);
}
.slide__content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:0 56px;max-width:600px;margin-left:auto;margin-right:auto;
  text-align:center;
}
.slide__title{font-family:var(--f-display);font-weight:500;font-size:20px;line-height:1.45;margin-bottom:28px;color:#eaeaea;text-align:center}
.slide__accent{color:var(--c-accent);font-weight:700;display:inline}
.slide__bullets{display:flex;flex-direction:column;gap:10px;max-width:500px;align-items:center}
.slide__bullets li{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-size:11px;color:#cccccc;line-height:1.45;text-align:center}
.slide__bullets svg{width:14px;height:14px;flex:none;color:#cccccc}

/* ===========================================================
   STATS — 2×2 grid, mist bg, huge digit reels with red symbol
   =========================================================== */
.stats{position:relative;min-height:900px;display:flex;align-items:center;overflow:hidden;color:var(--c-ink)}
.stats__media{position:absolute;inset:0;z-index:0}
.stats__media img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.stats__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.75) 40%,rgba(255,255,255,.9) 100%)}
.stats__inner{position:relative;z-index:2;padding:100px 0;width:100%;text-align:center}
.stats__title{font-family:var(--f-display);font-weight:600;font-size:32px;line-height:1.25;letter-spacing:-0.01em;color:var(--c-ink);margin-bottom:120px}
.stats__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  row-gap:120px;column-gap:120px;
  max-width:1300px;margin:0 auto;
  text-align:left;
}
.stat{display:flex;flex-direction:column;gap:12px}
.stat__value{
  display:inline-flex;align-items:flex-start;gap:4px;
  font-family:var(--f-display);font-weight:600;font-size:124px;line-height:1;
  color:var(--c-ink);letter-spacing:-0.04em;margin:0;
  height:124px;overflow:hidden;
}
.stat__sym{font-style:normal;color:var(--c-accent);font-weight:700;font-size:124px;line-height:1}
.stat__sep{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:600;font-size:124px;line-height:1;color:var(--c-ink);height:124px;letter-spacing:-0.04em;margin:0 -0.04em}
.stat__static{display:inline-flex;align-items:center;font-family:var(--f-display);font-weight:600;font-size:124px;line-height:1;color:var(--c-ink);letter-spacing:0.02em;height:124px;padding-right:.18em;white-space:nowrap}
.stat__static .stat__sym{font-size:.55em;align-self:flex-end;margin-bottom:.18em;margin-left:.04em}

/* ---- Digit reel ---- */
.reel{display:inline-flex;gap:0;height:124px;line-height:1;overflow:hidden}
.reel__digit{
  display:inline-block;width:0.65em;height:124px;overflow:hidden;text-align:center;
  position:relative;
}
.reel__strip{
  display:flex;flex-direction:column;
  transition:transform 2.2s cubic-bezier(.2,.75,.15,1);
  will-change:transform;
}
.reel__strip span{display:block;height:124px;line-height:124px}

/* ===========================================================
   PROCESS / HOW IT WORKS — 4 cards with dark mockup previews
   =========================================================== */
.process{padding:120px 0 140px;background:#fff;overflow:hidden}
.process .section-head{margin-bottom:56px}
.process__track{padding:0 82px;gap:24px}
.step{flex:0 0 610px;max-width:610px;display:flex;flex-direction:column;gap:18px}
.step__card{
  position:relative;aspect-ratio:610/610;
  border-radius:var(--radius-card);overflow:hidden;
  background:radial-gradient(ellipse at center,#1e1e1e 0%,#050505 100%);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.04);
}
.step__card::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 70%,rgba(255,255,255,.05),transparent 60%);
  pointer-events:none;
}
.step__mock{position:relative;z-index:2;width:72%;border-radius:18px;overflow:hidden;box-shadow:0 50px 90px -30px rgba(0,0,0,.65);background:#fff}
.step__mock--table img{width:100%;height:auto;display:block}
.step__mock--profile{
  padding:28px 24px;display:flex;flex-direction:column;gap:16px;align-items:center;
  background:#fff;color:#141414;
}
.step__avatar{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0 14px;border-bottom:1px solid #f0f0f0;width:100%}
.avatar-circle{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,#d4a88a,#a87762);position:relative;overflow:hidden;
}
.avatar-circle::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,#e8c4a3 0%,transparent 55%);
}
.avatar-name{font-family:var(--f-body);font-weight:600;font-size:13px;color:#171717}
.avatar-mail{font-family:var(--f-body);font-size:11px;color:#737373}
.step__menu{display:flex;flex-direction:column;gap:8px;width:100%}
.step__menu li{font-family:var(--f-body);font-size:11px;color:#525252;padding:7px 10px;border-radius:6px;background:#fafafa}
.step__title{display:flex;align-items:baseline;gap:8px;font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--c-ink);margin-top:8px}
.step__num{font-size:20px;font-weight:700;color:var(--c-ink)}
.step__desc{font-family:var(--f-body);font-size:16px;line-height:1.55;color:var(--c-muted);max-width:520px}

/* Shared governance layer under the three workforce areas. The bracket above
   the label is what makes it read as a foundation the three sit on, rather
   than a fourth item in the same row. */
.process__layer{position:relative;margin-top:56px;padding:30px 34px 32px;border:1px solid var(--c-line);border-radius:20px;background:#fafafa}
.process__layer::before{content:"";position:absolute;top:-1px;left:34px;right:34px;height:3px;background:var(--c-accent);border-radius:0 0 3px 3px}
.process__layer-label{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--c-ink);margin:0 0 8px}
.process__layer-desc{font-family:var(--f-body);font-size:16px;line-height:1.55;color:var(--c-muted);max-width:760px;margin:0}
@media(max-width:640px){.process__layer{margin-top:40px;padding:24px 22px 26px}.process__layer::before{left:22px;right:22px}}

/* ===========================================================
   CTA — black section with cloud wisps, centered content
   =========================================================== */
.cta{position:relative;min-height:720px;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;background:#000;color:#fff}
.cta__media{position:absolute;inset:0;z-index:0}
.cta__media img{width:100%;height:100%;object-fit:cover;opacity:.35;filter:grayscale(100%) brightness(.4) contrast(1.1)}
.cta__scrim{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.4) 0%,rgba(0,0,0,.85) 80%)}
.cta__inner{position:relative;z-index:2;padding:120px 24px;max-width:860px;margin:0 auto}
.cta__title{font-family:var(--f-display);font-weight:600;font-size:40px;line-height:1.2;letter-spacing:-0.015em;color:#fff;margin-bottom:20px}
.cta__lead{font-family:var(--f-body);font-size:14px;line-height:1.65;color:#a3a3a3;margin-bottom:40px;max-width:620px;margin-left:auto;margin-right:auto}
.cta__actions{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ===========================================================
   FOOTER — black
   =========================================================== */
.site-footer{position:relative;padding:90px 0 40px;background:#000;color:#a3a3a3;overflow:hidden;isolation:isolate}
.site-footer__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.site-footer__bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;opacity:.85}
.site-footer__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.6) 100%)}
.site-footer__inner{position:relative;max-width:1280px;margin:0 auto;z-index:1}
.site-footer__top{display:grid;grid-template-columns:1.1fr 1.4fr;gap:80px;padding-bottom:90px}
.site-footer__brand{max-width:360px;display:flex;flex-direction:column;gap:28px}
.site-footer__desc{font-family:var(--f-body);font-size:14px;line-height:1.6;color:#a3a3a3}
.site-footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;justify-self:end;width:100%;max-width:520px}
.site-footer__col h4{font-family:var(--f-body);font-weight:400;font-size:14px;color:#737373;margin-bottom:28px}
.site-footer__col ul{display:flex;flex-direction:column;gap:20px}
.site-footer__col a{font-family:var(--f-body);font-size:14px;color:#eaeaea;transition:color .2s ease}
.site-footer__col a:hover{color:#fff}
.site-footer__rule{border:0;border-top:1px solid rgba(255,255,255,.1);margin:0 0 28px}
.site-footer__bottom{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-body);font-size:12px;color:#737373}
.site-footer__bottom ul{display:inline-flex;gap:36px}
.site-footer__bottom a:hover{color:#fff}

/* ===========================================================
   SUBPAGE — Talent Acquisition (and other long-form pages)
   =========================================================== */
.subpage{padding:200px 0 120px;position:relative;background:#fff;color:var(--c-ink);overflow:hidden;isolation:isolate}
.subpage::before{content:"";position:absolute;top:-220px;right:-200px;width:640px;height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(218,0,16,.16),rgba(218,0,16,0) 70%);filter:blur(20px);z-index:-1;pointer-events:none}
.subpage::after{content:"";position:absolute;bottom:-180px;left:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(218,0,16,.10),rgba(218,0,16,0) 70%);filter:blur(28px);z-index:-1;pointer-events:none}
.subpage__hero{position:relative}
.subpage__hero::after{content:"";position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);width:48px;height:3px;border-radius:999px;background:var(--c-accent-2);box-shadow:0 0 24px rgba(218,0,16,.55)}
.subpage__eyebrow{display:inline-block;font-family:var(--f-body);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-accent-2);margin-bottom:24px}
.subpage__hero{max-width:980px;margin:0 auto;text-align:center}
.subpage__title{font-family:var(--f-display);font-weight:600;font-size:64px;line-height:1.08;letter-spacing:-1.2px;color:var(--c-ink)}
.subpage__lead{margin-top:28px;font-family:var(--f-body);font-size:20px;line-height:1.6;color:var(--c-muted)}
.subpage__lead--strong{margin-top:24px;font-weight:600;color:var(--c-ink)}

/* ---------- Subpage hero with artwork ----------
   Variant of .subpage for the pages that now ship a hero image. Dark ground,
   copy left, artwork bleeding off the right edge — the same treatment the
   campaign landing page uses, so the two read as one site. Pages without
   artwork keep the original centred .subpage hero untouched. */
/* Hero height is capped so the CTA pair always clears the fold. Measured at
   1440x800: with the old 172/96 padding the long headlines on Talent
   Acquisition and Employee Management pushed the buttons below the first
   screen. */
.subpage--media{background:#000;color:#fff;padding:140px 0 64px;min-height:min(640px,76vh);display:flex;align-items:center}
/* Same dark hero for pages that have no artwork yet: the copy simply gets the
   full measure instead of leaving half the band empty. */
.subpage--dark{background:#000;color:#fff;padding:140px 0 64px;display:flex;align-items:center}
.subpage--dark::before,.subpage--dark::after{display:none}
.subpage--dark .container{position:relative;z-index:2;width:100%}
.subpage--dark .subpage__hero{max-width:920px;margin:0;text-align:left}
.subpage--dark .subpage__hero::after{display:none}
.subpage--dark .subpage__title{color:#fff;font-size:clamp(34px,4.2vw,56px);letter-spacing:-.025em}
.subpage--dark .subpage__lead{color:#b3b3b3;font-size:17px;margin-top:22px}
.subpage--dark .subpage__lead--strong{color:#fff;font-size:18px}
.subpage--dark .subpage__eyebrow{color:var(--c-accent)}
.subpage--media::before,.subpage--media::after{display:none}
.subpage--media .container{position:relative;z-index:2;width:100%}
.subpage--media .subpage__hero{max-width:640px;margin:0;text-align:left}
.subpage--media .subpage__hero::after{display:none}
.subpage--media .subpage__title{color:#fff;font-size:clamp(32px,3.9vw,52px);line-height:1.08;letter-spacing:-.025em}
.subpage--media .subpage__lead{color:#b3b3b3;font-size:16.5px;margin-top:16px}
.subpage--media .subpage__lead--strong{color:#fff;font-size:18px}
.subpage--media .subpage__eyebrow{color:var(--c-accent)}
.subpage__media{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:1;pointer-events:none}
.subpage__media picture,.subpage__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* Fade the artwork out where it passes under the headline. */
.subpage__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 24%,rgba(0,0,0,0) 64%)}
.subpage__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* The header sits absolutely over the hero. On pages whose hero is dark it
   has to switch to light type, otherwise the logo and nav render near-black
   on near-black. Set as a body class rather than :has() so it also holds on
   older browsers. */
body.has-dark-hero .site-header .brand__logo,
body.has-dark-hero .site-header .brand__tag,
body.has-dark-hero .site-header .nav__links{color:#eaeaea}
body.has-dark-hero .site-header .nav__links a:hover{color:#fff}
body.has-dark-hero .site-header .nav__toggle-bar{background:#eaeaea}
@media (max-width:1699px){
  /* Below this width the header gains a translucent WHITE bar. Over a dark
     hero that reads as a stripe across the artwork and hides the light type
     set above, so dark-hero pages get the same bar in black instead. */
  body.has-dark-hero .site-header{background:rgba(0,0,0,.72)}
  body.has-dark-hero .site-header .brand__logo,
  body.has-dark-hero .site-header .brand__tag,
  body.has-dark-hero .site-header .nav__links{color:#eaeaea}
  body.has-dark-hero .site-header .nav__toggle-bar{background:#eaeaea}
  /* the open mobile drawer keeps the dark panel, so type stays light */
  body.has-dark-hero .site-header .nav__links.is-open{color:#eaeaea}
}

/* ---------- Large in-narrative figure ----------
   For the product screens and the operating-model diagram: full column width,
   generous air around it, treated as part of the argument rather than a
   thumbnail in a card. */
.section-figure{margin:48px 0 0}
.section-figure img{width:100%;height:auto;display:block;border-radius:18px}
.section-figure--bare img{border-radius:0}
.section-figure__caption{margin-top:14px;font-family:var(--f-body);font-size:14px;line-height:1.5;color:var(--c-muted-2)}
.section-block--dark .section-figure__caption{color:#a3a3a3}

/* Placeholder for a product screenshot that has not been supplied yet. It is
   deliberately visible rather than an empty gap, so it cannot ship unnoticed. */
.figure-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:340px;margin:48px 0 0;padding:34px;border:2px dashed var(--c-line-2);border-radius:18px;
  background:#fafafa;text-align:center}
.section-block--dark .figure-placeholder{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.03)}
.figure-placeholder__label{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--c-muted)}
.section-block--dark .figure-placeholder__label{color:#cccccc}
.figure-placeholder__hint{font-family:var(--f-body);font-size:13.5px;color:var(--c-muted-2);max-width:46ch}
@media (max-width:960px){
  .subpage--media{display:block;min-height:0;padding:132px 0 64px}
  .subpage--media .subpage__hero{max-width:none}
  .subpage__media{position:relative;width:100%;height:auto;margin-bottom:28px}
  .subpage__media img{height:auto}
  .subpage__media::after{background:linear-gradient(180deg,rgba(0,0,0,0) 58%,#000 100%)}
}

.section-block{position:relative;padding:90px 0;border-top:1px solid var(--c-line);overflow:hidden;isolation:isolate}
.section-block:first-of-type{border-top:0}
.section-block::before{content:"";position:absolute;top:50%;right:-220px;transform:translateY(-50%);width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(218,0,16,.08),rgba(218,0,16,0) 72%);filter:blur(24px);z-index:-1;pointer-events:none;opacity:.9}
.section-block:nth-of-type(even)::before{right:auto;left:-220px}
.section-block--dark{position:relative;overflow:hidden;isolation:isolate}
.section-block--dark::before{background:radial-gradient(closest-side,rgba(218,0,16,.18),rgba(218,0,16,0) 72%);opacity:.85}
.section-block--dark::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(218,0,16,.45) 50%,transparent 100%);z-index:0;pointer-events:none}
.section-block__kicker{position:relative;display:inline-block;font-family:var(--f-body);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-muted-2);margin-bottom:14px;padding-left:28px}
.section-block__kicker::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:18px;height:2px;background:var(--c-accent-2);border-radius:2px}
.section-block--dark .section-block__kicker::before{background:var(--c-accent)}
.section-block__inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start}

/* ---------- Section with artwork alongside the copy ----------
   The layout the mockups use throughout: kicker, headline and prose stacked
   in the left column, one large graphic filling the right. Wider than the
   default text-only block, because the artwork needs the room. */
/* Same headline-level alignment as --split: kicker alone in row 1, headline in
   row 2, artwork starting at row 2. */
.section-block__inner--media{max-width:1240px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:auto auto 1fr;gap:0 56px;align-items:start}
.section-block__inner--media .section-block__head{grid-column:1;grid-row:1 / span 2;
  display:grid;grid-template-rows:subgrid;row-gap:0}
.section-block__inner--media .section-block__body{grid-column:1;grid-row:3;align-self:start;margin-top:20px}
.section-block__inner--media .section-block__figure{grid-column:2;grid-row:2 / span 2;align-self:start;margin:0}
.section-block__figure img{width:100%;height:auto;display:block;border-radius:16px}
.section-block__figure figcaption{margin-top:12px;font-family:var(--f-body);font-size:13.5px;line-height:1.5;color:var(--c-muted-2)}
.section-block--dark .section-block__figure figcaption{color:#8a8a8a}

/* Row of small supporting graphics, as under "talent is often lost at
   transition" in the mockup. */
.section-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
.section-cards img{width:100%;height:auto;display:block;border-radius:14px}
.section-band{margin-top:22px}
.section-band img{width:100%;height:auto;display:block;border-radius:14px}

@media (max-width:980px){
  .section-block__inner--media{grid-template-columns:1fr;gap:30px}
  .section-block__inner--media .section-block__head,
  .section-block__inner--media .section-block__body,
  .section-block__inner--media .section-block__figure{grid-column:1;grid-row:auto}
  /* The head is a subgrid on desktop so the headline can sit in the parent's
     second row. Once the parent collapses to one column those rows are gone and
     the subgrid printed the eyebrow on top of the headline — back to flow. */
  .section-block__inner--media .section-block__head{display:block}
  .section-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.section-cards{grid-template-columns:1fr}}

/* ---------- Split section: the rhythm used throughout the mockups ----------
   Left column carries the red eyebrow, the headline and the prose. Right
   column carries whatever supports it — artwork, a list, or a pull statement.
   Wider and flatter than the default 340px/1fr block, which was built for
   text-only pages. */
/* rows: auto for the headline, 1fr for the prose. The aside spans both, so
   without the 1fr its height would inflate the headline row and push the
   prose far down the left column, leaving a hole under the heading. */
.section-block__inner--split{max-width:1280px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto 1fr;gap:0 64px;align-items:start}
.section-block__inner--split .section-block__head{grid-column:1;grid-row:1 / span 2;
  display:grid;grid-template-rows:subgrid;row-gap:0}   /* the kicker already carries margin-bottom:14px — a gap here would double it and push the headline below the aside */
.section-block__inner--split .section-block__body{grid-column:1;grid-row:3;align-self:start;margin-top:20px}
/* Right column starts level with the HEADLINE, not the eyebrow.
   First attempt only got it level with the prose, because .section-block__head
   holds the kicker and the headline together in one grid item — so putting the
   aside in row 2 landed it below both. Splitting the head across two rows with
   subgrid puts the kicker alone in row 1 and the headline in row 2, which is
   where the right column now begins. */
.section-block__inner--split .section-block__aside{grid-column:2;grid-row:2 / span 2;align-self:start;
  display:flex;flex-direction:column;gap:20px;font-family:var(--f-body);font-size:16.5px;line-height:1.7;color:var(--c-muted)}
/* Opt-in: start the support column level with the prose instead of the kicker.
   For sections whose aside holds a card, spanning from row 1 charges the whole
   headline height against the right column and leaves a hole beneath it. */
.section-block__inner--split .section-block__aside--align-body{grid-row:2}  /* kept: now same as default */
.section-block--dark .section-block__aside{color:#cccccc}
/* In the mockups the eyebrow itself is red, not grey with a red rule. */
.section-block__inner--split .section-block__kicker{color:var(--c-accent-2);font-weight:600;letter-spacing:.14em;padding-left:0}
.section-block__inner--split .section-block__kicker::before{display:none}
.section-block--dark .section-block__inner--split .section-block__kicker{color:var(--c-accent)}
.section-block__inner--split .section-block__title{font-size:clamp(26px,2.9vw,38px);line-height:1.16;letter-spacing:-.02em}

/* Pull statement for the supporting column — the "The gap is not another
   system." treatment, set large and separated by a rule. */
.section-statement{padding-left:34px;border-left:1px solid var(--c-line-2);
  font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.1vw,27px);line-height:1.28;
  letter-spacing:-.015em;color:var(--c-ink)}
.section-block--dark .section-statement{border-left-color:rgba(255,255,255,.18);color:#fff}
.section-statement__mark{display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  margin-bottom:22px;border:2px dotted var(--c-muted-3);border-radius:50%;
  font-family:var(--f-display);font-size:24px;font-weight:600;color:var(--c-ink)}

/* ---------- Components the mockups use inside a section ----------
   Added so a section without artwork still has something to look at, instead
   of a wall of bullets crammed into the right column. */

/* Labelled group inside the aside — "Organizations today operate with:" etc. */
.aside-group{display:flex;flex-direction:column;gap:12px}
.aside-group__label{font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-muted-2)}
.section-block--dark .aside-group__label{color:#8a8a8a}

/* Row of icon + label items, as under "Too many systems" on the homepage. */
.icon-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;margin-top:6px}
.icon-row__item{display:flex;align-items:flex-start;gap:12px}
.icon-row__mark{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--c-line-2);color:var(--c-accent-2)}
.section-block--dark .icon-row__mark{border-color:rgba(255,255,255,.22);color:var(--c-accent)}
.icon-row__mark svg{width:19px;height:19px}
.icon-row__text{font-family:var(--f-body);font-size:14.5px;line-height:1.4;color:var(--c-ink)}
.section-block--dark .icon-row__text{color:#eaeaea}

/* Bordered feature boxes — the ATS / VMS / EMS row treatment. */
.spec-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.spec-card{padding:20px;border:1px solid var(--c-line-2);border-radius:14px;background:#fff}
.section-block--dark .spec-card{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.spec-card__title{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--c-ink);margin:0 0 6px}
.section-block--dark .spec-card__title{color:#fff}
.spec-card__text{font-family:var(--f-body);font-size:14px;line-height:1.5;color:var(--c-muted);margin:0}
.section-block--dark .spec-card__text{color:#b3b3b3}

/* Full-width bar that binds a row of cards, like the governance strip. */
.bind-bar{display:flex;align-items:flex-start;gap:16px;margin-top:16px;padding:20px 24px;
  border:1px solid var(--c-line-2);border-radius:14px;background:#fafafa}
.section-block--dark .bind-bar{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.03)}
/* Standalone modifier: the bar is also used in .features, which is dark but is
   not a .section-block, so the descendant override above never reached it. */
.bind-bar--on-dark{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.03)}
.bind-bar--on-dark .bind-bar__title{color:#fff}
.bind-bar--on-dark .bind-bar__text{color:#b3b3b3}
.bind-bar__title{font-family:var(--f-display);font-weight:600;font-size:16.5px;color:var(--c-ink);margin:0 0 4px}
.section-block--dark .bind-bar__title{color:#fff}
.bind-bar__text{font-family:var(--f-body);font-size:14.5px;line-height:1.5;color:var(--c-muted);margin:0}
.section-block--dark .bind-bar__text{color:#b3b3b3}

/* Numbers band — 500,000+ / 2-3 mo / 20 / <1s */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin-top:8px}
.stat-row__item{padding:0 26px;border-left:1px solid var(--c-line-2)}
.stat-row__item:first-child{border-left:0;padding-left:0}
.section-block--dark .stat-row__item{border-left-color:rgba(255,255,255,.16)}
.stat-row__value{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,3vw,42px);
  letter-spacing:-.02em;color:var(--c-ink);line-height:1.05}
.section-block--dark .stat-row__value{color:#fff}
.stat-row__label{font-family:var(--f-body);font-size:14px;line-height:1.45;color:var(--c-muted);margin-top:8px}
.section-block--dark .stat-row__label{color:#a3a3a3}

/* Two-up list when the aside carries a long enumeration. */
.section-block__list--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
@media (max-width:620px){.section-block__list--two{grid-template-columns:1fr}}
.section-block--dark .section-statement__mark{border-color:rgba(255,255,255,.35);color:#fff}

@media (max-width:980px){
  .section-block__inner--split{grid-template-columns:1fr;gap:26px}
  .section-block__inner--split .section-block__head,
  .section-block__inner--split .section-block__body,
  .section-block__inner--split .section-block__aside{grid-column:1;grid-row:auto}
  .section-block__inner--split .section-block__head{display:block}
  .section-block__inner--split .section-block__body{margin-top:0}
  .section-statement{padding-left:0;border-left:0;border-top:1px solid var(--c-line-2);padding-top:22px}
}
@media (min-width:901px){
  /* Only the legacy text-only block flips to the narrow 1fr/340px shape. Without
   the :not() guard this selector (0,3,0) out-specifies .section-block__inner--split
   (0,1,0) and squeezes every light band on every rebuilt page back to 340px. */
.section-block:nth-of-type(even) .section-block__inner:not([class*="--"]){grid-template-columns:1fr 340px}
  .section-block:nth-of-type(even) .section-block__inner:not([class*="--"]) > :first-child{order:2}
  .section-block:nth-of-type(even) .section-block__inner:not([class*="--"]) > :last-child{order:1}
}
.section-block__kicker{font-family:var(--f-body);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-muted-2);margin-bottom:14px}
.section-block__title{font-family:var(--f-display);font-weight:600;font-size:34px;line-height:1.18;letter-spacing:-.6px;color:var(--c-ink)}
.section-block__body{font-family:var(--f-body);font-size:17px;line-height:1.75;color:var(--c-muted);display:flex;flex-direction:column;gap:18px}
.section-block__body p strong{color:var(--c-ink);font-weight:600}
.section-block__body em{color:var(--c-ink);font-style:italic}
.section-block__list{display:flex;flex-direction:column;gap:14px;font-family:var(--f-body);font-size:16px;line-height:1.6;color:var(--c-muted)}
.section-block__list li{position:relative;padding-left:26px}
.section-block__list li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:999px;background:var(--c-accent-2)}
.section-block__quote{margin-top:8px;padding:24px 28px;background:#f5f5f5;border-left:3px solid var(--c-accent-2);border-radius:0 12px 12px 0;font-family:var(--f-display);font-weight:500;font-size:20px;line-height:1.5;color:var(--c-ink)}
.section-block--dark{background:#0a0a0a;color:var(--c-on-dark);border-top:0}
.section-block--dark .section-block__kicker{color:#737373}
.section-block--dark .section-block__title{color:#fff}
.section-block--dark .section-block__body{color:#cccccc}
.section-block--dark .section-block__body p strong,
.section-block--dark .section-block__body em{color:#fff}
.section-block--dark .section-block__list{color:#cccccc}
.section-block--dark .section-block__quote{background:rgba(255,255,255,.04);color:#fff;border-left-color:var(--c-accent)}
.deploy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
.deploy-card{padding:28px 28px 30px;border-radius:18px;background:#fafafa;border:1px solid var(--c-line);display:flex;flex-direction:column;gap:14px}
.deploy-card h3{font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:-.2px;color:var(--c-ink);margin:0}
.deploy-card ul{display:flex;flex-direction:column;gap:10px;font-family:var(--f-body);font-size:15px;line-height:1.55;color:var(--c-muted);padding-left:20px;list-style:disc}
.deploy-card p{font-family:var(--f-body);font-size:15px;line-height:1.6;color:var(--c-muted);margin:0}
.section-block--dark .deploy-card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.section-block--dark .deploy-card h3{color:#fff}
.section-block--dark .deploy-card ul,
.section-block--dark .deploy-card p{color:#cccccc}
@media (max-width:900px){
  .deploy-grid{grid-template-columns:1fr;gap:16px}
}

.module-stack{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.module-card{padding:26px 28px;border-radius:18px;background:#fafafa;border:1px solid var(--c-line);display:flex;flex-direction:column;gap:12px}
.module-card h3{font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:-.2px;color:var(--c-ink);margin:0}
.module-card ul{display:flex;flex-direction:column;gap:8px;font-family:var(--f-body);font-size:15px;line-height:1.55;color:var(--c-muted);padding-left:20px;list-style:disc}
.module-card__role{font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--c-accent-2);margin:6px 0 0;text-transform:uppercase}
.section-block--dark .module-card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.section-block--dark .module-card h3{color:#fff}
.section-block--dark .module-card ul{color:#cccccc}
.section-block--dark .module-card__role{color:var(--c-accent)}

/* ===========================================================
   CONTACT PAGE
   =========================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;max-width:1100px;margin:0 auto}
.contact-info{display:flex;flex-direction:column;gap:24px}
.contact-info__title{font-family:var(--f-display);font-weight:600;font-size:28px;line-height:1.2;letter-spacing:-.4px;color:var(--c-ink);margin:0}
.contact-info__lead{font-family:var(--f-body);font-size:16px;line-height:1.7;color:var(--c-muted);margin:0}
/* Mockup lays the three channels out as one row of cards, with the
   "See AIO in action" one picked out in the brand red. */
/* Stacked, not a grid: this list lives in the narrow left column beside the
   form, where two columns squeeze the email address onto three lines. */
.contact-channels{display:flex;flex-direction:column;gap:14px;margin-top:6px}
/* Doubled class: the .contact-channel rule below sets the `border` shorthand,
   which resets border-color. At equal specificity the later shorthand wins, so
   the accent card silently lost its red border. */
.contact-channel.contact-channel--accent{border-color:var(--c-accent-2)}
.contact-channel.contact-channel--accent .contact-channel__icon{background:var(--c-accent-2);color:#fff}
.contact-channel{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border:1px solid var(--c-line);border-radius:14px;background:#fafafa}
.contact-channel__icon{flex:none;width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(218,0,16,.08);color:var(--c-accent-2)}
.contact-channel__icon svg{width:22px;height:22px}
.contact-channel__label{font-family:var(--f-body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted-2);margin-bottom:4px;display:block}
.contact-channel__value{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--c-ink);text-decoration:none;word-break:break-word;line-height:1.35}
.contact-channel__value:hover{color:var(--c-accent-2)}
.contact-channel__hint{display:block;margin-top:6px;font-family:var(--f-body);font-size:13px;line-height:1.5;color:var(--c-muted)}

.contact-card{background:#fff;border:1px solid var(--c-line);border-radius:20px;padding:32px;box-shadow:0 16px 40px rgba(0,0,0,.04)}
.contact-card__title{font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--c-ink);margin:0 0 20px}
.contact-form .demo-form__field{margin-bottom:0}
.contact-form textarea.demo-form__input{min-height:140px;resize:vertical;line-height:1.55;font-family:var(--f-body)}
.contact-form .demo-form__submit{display:flex;width:100%;justify-content:space-between;align-items:center}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .contact-card{padding:24px}
}

/* ===========================================================
   DEMO MODAL
   =========================================================== */
.demo-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease}
.demo-modal.is-open{display:flex;opacity:1}
.demo-modal__dialog{position:relative;width:100%;max-width:480px;background:#fff;border-radius:20px;padding:40px 36px 32px;box-shadow:0 24px 80px rgba(0,0,0,.35);transform:translateY(16px);transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.demo-modal.is-open .demo-modal__dialog{transform:translateY(0)}
.demo-modal__close{position:absolute;top:14px;right:14px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:var(--c-muted);transition:background .2s ease,color .2s ease}
.demo-modal__close:hover{background:#f3f3f3;color:var(--c-ink)}
.demo-modal__close svg{width:18px;height:18px}
.demo-modal__eyebrow{font-family:var(--f-body);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-accent-2);margin-bottom:12px}
.demo-modal__title{font-family:var(--f-display);font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-.4px;color:var(--c-ink);margin-bottom:10px}
.demo-modal__lead{font-family:var(--f-body);font-size:15px;line-height:1.55;color:var(--c-muted);margin-bottom:24px}
.demo-form{display:flex;flex-direction:column;gap:18px}
.demo-form__field{display:flex;flex-direction:column;gap:8px}
.demo-form__label{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--c-ink)}
.demo-form__input{width:100%;padding:14px 16px;border:1px solid var(--c-line);border-radius:12px;font-family:var(--f-body);font-size:15px;color:var(--c-ink);background:#fafafa;transition:border-color .2s ease,background .2s ease}
.demo-form__input:focus{outline:none;border-color:var(--c-ink);background:#fff}
.demo-form__input[aria-invalid="true"]{border-color:var(--c-accent-2);background:#fff5f5}
.demo-form__consent{display:flex;gap:12px;align-items:flex-start;font-family:var(--f-body);font-size:13px;line-height:1.5;color:var(--c-muted);cursor:pointer}
.demo-form__consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--c-accent-2);flex-shrink:0;cursor:pointer}
.demo-form__consent a{color:var(--c-ink);text-decoration:underline;text-underline-offset:2px}
.demo-form__consent a:hover{color:var(--c-accent-2)}
.demo-form__error{font-family:var(--f-body);font-size:13px;color:var(--c-accent-2);min-height:16px}
.demo-form__submit{margin-top:4px}
.demo-form__submit[disabled]{opacity:.55;cursor:not-allowed}
.demo-modal__success{display:none;text-align:center;padding:12px 0 4px}
.demo-modal__success h3{font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--c-ink);margin-bottom:10px}
.demo-modal__success p{font-family:var(--f-body);font-size:15px;color:var(--c-muted);line-height:1.55}
.demo-modal.is-success .demo-form,
.demo-modal.is-success .demo-modal__eyebrow,
.demo-modal.is-success .demo-modal__title,
.demo-modal.is-success .demo-modal__lead{display:none}
.demo-modal.is-success .demo-modal__success{display:block}
body.has-modal-open{overflow:hidden}

@media (max-width:600px){
  .demo-modal__dialog{padding:32px 24px 28px;border-radius:16px}
  .demo-modal__title{font-size:22px}
}

/* ===========================================================
   VIDEO MODAL
   =========================================================== */
.video-modal{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.92);opacity:0;transition:opacity .25s ease}
.video-modal.is-open{display:flex;opacity:1}
.video-modal__frame{position:relative;width:100%;max-width:1100px;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.video-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-modal__close{position:absolute;top:18px;right:18px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:#fff;background:rgba(255,255,255,.08);border:0;cursor:pointer;transition:background .2s ease;z-index:1}
.video-modal__close:hover{background:rgba(255,255,255,.18)}
.video-modal__close svg{width:20px;height:20px}
@media (max-width:600px){
  .video-modal{padding:12px}
  .video-modal__close{top:10px;right:10px;width:38px;height:38px}
}

/* ===========================================================
   COOKIE CONSENT v2 — banner + preferences modal
   =========================================================== */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:180;max-width:980px;margin:0 auto;background:#0a0a0a;color:#eaeaea;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:22px 26px;transform:translateY(140%);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.2,.9,.3,1),opacity .3s ease}
.cookie-banner.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.cookie-banner__inner{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie-banner__copy{flex:1 1 320px;min-width:0}
.cookie-banner__title{font-family:var(--f-display);font-weight:600;font-size:16px;color:#fff;margin-bottom:6px}
.cookie-banner__lead{font-family:var(--f-body);font-size:13px;line-height:1.55;color:#a3a3a3}
.cookie-banner__actions{display:inline-flex;gap:10px;flex-wrap:wrap}

.cookie-btn{font-family:var(--f-body);font-size:14px;font-weight:500;padding:11px 20px;border-radius:999px;border:0;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;line-height:1}
.cookie-btn--primary{background:var(--c-accent-2);color:#fff}
.cookie-btn--primary:hover{background:#b3000d}
.cookie-btn--ghost{background:transparent;color:#eaeaea;border:1px solid rgba(255,255,255,.25)}
.cookie-btn--ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}

.cookie-modal{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease}
.cookie-modal.is-open{display:flex;opacity:1}
.cookie-modal__dialog{position:relative;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;background:#fff;border-radius:20px;padding:40px 36px 28px;box-shadow:0 24px 80px rgba(0,0,0,.35);transform:translateY(16px);transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.cookie-modal.is-open .cookie-modal__dialog{transform:translateY(0)}
.cookie-modal__close{position:absolute;top:14px;right:14px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:var(--c-muted);background:transparent;border:0;cursor:pointer;transition:background .2s ease,color .2s ease}
.cookie-modal__close:hover{background:#f3f3f3;color:var(--c-ink)}
.cookie-modal__close svg{width:18px;height:18px}
.cookie-modal__eyebrow{font-family:var(--f-body);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-accent-2);margin-bottom:12px}
.cookie-modal__title{font-family:var(--f-display);font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-.4px;color:var(--c-ink);margin-bottom:10px}
.cookie-modal__lead{font-family:var(--f-body);font-size:15px;line-height:1.55;color:var(--c-muted);margin-bottom:22px}
.cookie-modal .cookie-btn--primary{background:var(--c-accent-2);color:#fff}
.cookie-modal .cookie-btn--ghost{background:transparent;color:var(--c-ink);border:1px solid var(--c-line)}
.cookie-modal .cookie-btn--ghost:hover{background:#fafafa;border-color:#d4d4d4}
.cookie-modal__actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

.cookie-cat-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.cookie-cat{display:block;padding:16px 18px;border:1px solid var(--c-line);border-radius:14px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.cookie-cat:hover{border-color:#d4d4d4;background:#fafafa}
.cookie-cat__head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:6px}
.cookie-cat__name{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--c-ink)}
.cookie-cat__desc{font-family:var(--f-body);font-size:13px;line-height:1.55;color:var(--c-muted);margin:0}

.cookie-switch{position:relative;display:inline-block;flex-shrink:0;width:42px;height:24px}
.cookie-switch input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;width:100%;height:100%}
.cookie-switch input:disabled{cursor:not-allowed}
.cookie-switch__track{display:block;width:42px;height:24px;border-radius:999px;background:#d4d4d4;transition:background .2s ease;position:relative;pointer-events:none}
.cookie-switch__thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:#fff;transition:transform .2s ease;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.cookie-switch input:checked + .cookie-switch__track{background:var(--c-accent-2)}
.cookie-switch input:checked + .cookie-switch__track .cookie-switch__thumb{transform:translateX(18px)}
.cookie-switch input:disabled + .cookie-switch__track{opacity:.55}

@media (max-width:600px){
  .cookie-banner{left:12px;right:12px;bottom:12px;padding:18px;border-radius:14px}
  .cookie-banner__actions{width:100%;justify-content:flex-start}
  .cookie-btn{flex:1 1 auto;text-align:center}
  .cookie-modal__dialog{padding:32px 20px 24px;border-radius:14px}
  .cookie-modal__title{font-size:22px}
  .cookie-modal__actions{flex-direction:column;align-items:stretch}
}

.subpage-cta{padding:120px 0;text-align:center;background:#0a0a0a;color:#fff;position:relative;overflow:hidden;isolation:isolate}
.subpage-cta::before{content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:760px;height:760px;border-radius:50%;background:radial-gradient(closest-side,rgba(218,0,16,.22),rgba(218,0,16,0) 70%);filter:blur(30px);z-index:-1;pointer-events:none}
.subpage-cta::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(218,0,16,.6) 50%,transparent);pointer-events:none}
.subpage-cta__inner{max-width:820px;margin:0 auto;position:relative;z-index:1}
.subpage-cta__title{font-family:var(--f-display);font-weight:600;font-size:48px;line-height:1.1;letter-spacing:-.8px}
.subpage-cta__lead{margin:24px auto 40px;max-width:640px;font-family:var(--f-body);font-size:18px;line-height:1.6;color:#cccccc}

@media (max-width:900px){
  .subpage{padding:140px 0 80px}
  .subpage__title{font-size:38px;letter-spacing:-.4px}
  .subpage__lead{font-size:17px}
  .section-block{padding:60px 0}
  .section-block__inner{grid-template-columns:1fr;gap:24px}
  .section-block__title{font-size:26px}
  .section-block__body{font-size:16px}
  .section-block__quote{font-size:17px;padding:20px}
  .subpage-cta{padding:80px 0}
  .subpage-cta__title{font-size:32px}
}

/* ===========================================================
   MOTION
   =========================================================== */
@media (prefers-reduced-motion: no-preference) {
  .site-header{transition:background .35s ease,backdrop-filter .35s ease,padding .35s ease,box-shadow .35s ease}
  .site-header.is-stuck{
    position:fixed;background:rgba(255,255,255,.82);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    box-shadow:0 1px 0 rgba(0,0,0,.06);padding:14px 0;
  }
  body.has-stuck-header{padding-top:0}

  [data-reveal]{opacity:0;transform:translate3d(0,32px,0);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
  [data-reveal].is-in{opacity:1;transform:translate3d(0,0,0)}

  [data-stagger] > *{opacity:0;transform:translate3d(0,24px,0);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
  [data-stagger].is-in > *{opacity:1;transform:translate3d(0,0,0)}
  [data-stagger].is-in > *:nth-child(1){transition-delay:0ms}
  [data-stagger].is-in > *:nth-child(2){transition-delay:100ms}
  [data-stagger].is-in > *:nth-child(3){transition-delay:200ms}
  [data-stagger].is-in > *:nth-child(4){transition-delay:300ms}
  [data-stagger].is-in > *:nth-child(5){transition-delay:400ms}
  [data-stagger].is-in > *:nth-child(6){transition-delay:500ms}

  [data-words] .w{opacity:.2;transition:opacity .6s ease}
  [data-words] .w.lit{opacity:1}

  [data-parallax]{will-change:transform;overflow:hidden}
  [data-parallax] img{transform:translate3d(0,var(--py,0px),0) scale(1.2);transition:transform .2s linear;will-change:transform}

  .play-btn{position:relative}
  .play-btn::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(255,255,255,.4);animation:playPulse 2.6s ease-out infinite;pointer-events:none}
  @keyframes playPulse{0%{transform:scale(.9);opacity:.9}80%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}

  .feature-card{transition:transform .5s cubic-bezier(.22,1,.36,1)}
  .feature-card:hover{transform:translateY(-4px)}
  .step{transition:transform .5s cubic-bezier(.22,1,.36,1)}
  .step:hover{transform:translateY(-4px)}

  .btn{position:relative;overflow:hidden;isolation:isolate}
  .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s ease}
  .btn:hover::after{transform:translateX(120%)}
}

@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-stagger] > *{opacity:1 !important;transform:none !important}
  [data-parallax] img{transform:none !important}
  .play-btn::before{animation:none}
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1280px){
  .container,.carousel__track,.process__track{padding-left:48px;padding-right:48px}
  .hero__logo{font-size:120px}
  .hero__tag{font-size:32px;padding-top:14px}
  .intel__statement{font-size:40px}
  .paradigm__title{font-size:clamp(88px,16vw,180px)}
  .stat__value,.stat__sym{font-size:96px}
  .stat__value,.reel,.reel__digit,.stat__sep,.stat__static{height:96px}
  .stat__sep,.stat__static{font-size:96px}
  .reel__strip span{height:96px;line-height:96px}
  .section-head__title{font-size:34px}
  .site-footer__top{grid-template-columns:1fr}
  .site-footer__cols{justify-self:start}
  .feature-card{flex-basis:640px}
  .step{flex-basis:460px}
}

/* Hamburger nav kicks in below 1700px to prevent the wide 7-item nav from wrapping or overlapping the CTA */
@media (max-width:1699px){
  .hero__bg{width:100%;height:100%;object-fit:cover;object-position:left bottom}
  .site-header{padding:16px 0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
  .site-header .brand__logo{color:#1b1b1b}
  .site-header .brand__tag{color:#0a0a0a}
  .site-header .nav__links{color:var(--c-ink)}
  .site-header .nav__toggle-bar{background:var(--c-ink)}
  .nav__toggle{display:flex}
  .nav__cta{display:none}
  .nav{flex-wrap:wrap;row-gap:16px}
  .nav__links{order:3;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:18px;font-size:18px;padding:8px 0 4px;display:none}
  .nav__links.is-open{display:flex}
  .nav__links.is-open ~ .nav__cta{display:flex;order:4;flex-basis:100%;width:100%;justify-content:space-between;align-items:center;padding:14px 22px;font-size:16px;border-radius:12px;margin-bottom:8px}
  .site-header.is-stuck .nav__links.is-open{background:transparent}
}

@media (max-width:900px){
  .container,.carousel__track,.process__track{padding-left:24px;padding-right:24px}
  .hero__brand{flex-direction:column;align-items:center;gap:16px}
  .hero__logo{font-size:96px}
  .hero__tag{font-size:22px;text-align:center;padding-top:0}
  .features,.intel,.process,.slide{padding:80px 0}
  .intel{gap:60px}
  .intel__inner{gap:60px}
  .intel__statement{font-size:26px}
  .intel__pillars{grid-template-columns:1fr;gap:16px}
  .intel__pillar{flex-direction:row;align-items:center;gap:16px;padding:18px 20px;font-size:16px;line-height:1.3}
  .intel__pillar br{display:none}
  .intel__check{width:40px;height:40px;border-radius:12px}
  .intel__check svg{width:22px;height:22px}
  .section-head{margin-bottom:40px}
  .section-head__title{font-size:28px}
  .section-head__row{flex-direction:column;align-items:flex-start;gap:24px}
  .paradigm{min-height:600px;height:auto;max-height:none}
  .paradigm__inner{padding:60px 0}
  .paradigm__title{font-size:72px}
  .slide__card{aspect-ratio:auto;min-height:auto;border-radius:24px}
  .slide__content{position:relative;height:auto;padding:48px 28px;transform:none;max-width:100%}
  .slide__title{font-size:20px;line-height:1.5;margin-bottom:24px}
  .slide__bullets{max-width:100%;align-items:flex-start}
  .slide__bullets li{font-size:14px;line-height:1.55;text-align:left}
  .slide__bullets svg{width:16px;height:16px}
  .stats{min-height:auto}
  .stats__inner{padding:80px 0}
  .stats__title{font-size:24px;margin-bottom:64px}
  .stats__grid{grid-template-columns:1fr;row-gap:64px;column-gap:0;max-width:480px}
  .stat__value,.stat__sym{font-size:72px}
  .stat__value,.reel,.reel__digit,.stat__sep,.stat__static{height:72px}
  .stat__sep,.stat__static{font-size:72px}
  .reel__strip span{height:72px;line-height:72px}
  .stat{align-items:center;text-align:center}
  .stat__value{justify-content:center;align-self:center}
  .stat__label{text-align:center}
  .cta{min-height:auto}
  .cta__inner{padding:80px 20px}
  .cta__title{font-size:28px}
  .feature-card{flex-basis:85vw}
  .step{flex-basis:78vw}
  .site-footer{padding:60px 0 32px}
  .site-footer__top{padding-bottom:48px;gap:48px}
  .site-footer__cols{grid-template-columns:repeat(2,1fr)}
  .site-footer__bottom{flex-direction:column;gap:16px;align-items:flex-start}

  /* Carousel cards must fit a single mobile screen */
  .carousel__track,.process__track{padding-left:24px;padding-right:24px;gap:16px}
  .feature-card{flex:0 0 calc(100vw - 48px);max-width:calc(100vw - 48px)}
  .feature-card__media{aspect-ratio:4/3}
  .feature-card__title{font-size:18px}
  .feature-card__desc{font-size:14px;line-height:1.55}
  .step{flex:0 0 calc(100vw - 48px);max-width:calc(100vw - 48px)}
  .step__card{padding:24px}
  .step__title{font-size:18px}
  .step__desc{font-size:14px}
}

/* =====================================================================
   Homepage colour rhythm — client round 3
   Target: BLACK hero → WHITE modules → WHITE too-many-systems →
   BLACK workforce spend → WHITE stats → BLACK how-it-works →
   WHITE establish-control → BLACK contact/footer.
   Written as scoped overrides rather than edits to the base component
   rules, so the original light/dark treatments stay intact and the flip
   is one reversible block.
   ===================================================================== */

/* ---- "One ecosystem. Five connected modules." : black -> white ---- */
.features{background:#fff;color:var(--c-ink)}
.features::before,.features::after{opacity:.35}
.features .section-head--dark .section-head__title{color:var(--c-ink)}
.features .section-head--dark .section-head__lead{color:var(--c-muted)}
.features .arrow-btn--light{border-color:var(--c-line-2);color:var(--c-ink)}
.features .arrow-btn--light:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.features .feature-card__media{background:#f2f2f2;border-color:var(--c-line)}
.features .feature-card__title{color:var(--c-ink)}
.features .feature-card__desc{color:var(--c-muted)}
.features .feature-card__more{color:var(--c-ink)}
.features .feature-card__more:hover{color:var(--c-accent-2)}

/* ---- "Too many systems" pillars: darker, more contrast, premium ---- */
.intel__pillar{background:var(--c-ink);color:#fff;border-radius:14px;padding:20px 22px}
.intel__pillar span:last-child{color:#fff}
.intel__check{color:var(--c-accent)}

/* ---- "Workforce spend without governance": white -> one full black band ---- */
.slide{background:#000}
.slide__card{background:transparent;border-radius:0;box-shadow:none}
/* The bg image sits inside a <picture>, so it is a grandchild of the card —
   the child combinator never matched it and the texture stayed. */
.slide .slide__bg,.slide__card > picture,.slide__card::after{display:none}
.slide__card{padding:0;overflow:visible}
.slide .container{max-width:1440px}

/* ---- "How it works": white -> black ---- */
.process{background:#000;color:#fff}
.process .section-head__title{color:#fff}
.process .section-head__lead{color:#a3a3a3}
.process .arrow-btn{border-color:rgba(255,255,255,.35);color:#fff}
.process .arrow-btn:hover{background:#fff;color:#000;border-color:#fff}
.process .step__title,.process .step__num{color:#fff}
.process .step__desc{color:#b3b3b3}
.process .process__layer{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.process .process__layer-label{color:#fff}
.process .process__layer-desc{color:#b3b3b3}

/* ---- "Establish control over your talent ecosystem": black -> white ---- */
.cta{background:#fff;color:var(--c-ink)}
.cta .cta__media{display:none}
.cta .cta__title{color:var(--c-ink)}
.cta .cta__lead{color:var(--c-muted)}

/* Workforce-spend band: text left, diagram right, as one flat black segment. */
.slide__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.slide__figure{margin:0}
.slide__figure img{width:100%;height:auto;display:block;border-radius:14px}
.slide .slide__title{text-align:left}
.slide .slide__bullets{align-items:flex-start}
@media (max-width:940px){.slide__grid{grid-template-columns:1fr;gap:28px}}

/* "How it works": three areas side by side, always all visible.
   The client asked to drop the carousel because a slider hides the fact that
   the governance layer spans all three areas. */
.process__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start}
.process__grid .step{min-width:0}
.process__grid .step__card{padding:20px}
.process__grid .step__mock{width:100%}
.process__grid .step__title{font-size:17px;margin-top:16px}
.process__grid .step__desc{font-size:14.5px;line-height:1.5}
@media (max-width:900px){.process__grid{grid-template-columns:1fr;gap:22px}}

/* Mobile hero: copy first, artwork after.
   Stacking the artwork above the copy meant the first screen was a black gap
   and a picture, with the headline and CTA pushed below the fold. Ordering the
   copy first puts the message and the button on the opening screen, which is
   what the client reported missing. */
@media (max-width:960px){
  .subpage--media{display:flex;flex-direction:column}
  .subpage--media .container{order:1}
  .subpage__media{order:2;margin:26px 0 0}
  .subpage--media .subpage__hero{padding-bottom:0}
}
/* reCAPTCHA badge sits bottom-right and covered the submit button on phones.
   Float it above the fold line and out of the button's way. */
@media (max-width:760px){
  .grecaptcha-badge{bottom:88px !important;opacity:.55}
}

/* Registered-company line in the footer. Sits under the copyright, one size
   down, so the legal detail is present without competing with the links. */
.site-footer__legal{margin-top:6px;font-family:var(--f-body);font-size:12.5px;line-height:1.5;color:#8a8a8a}
@media (max-width:760px){.site-footer__legal{margin-bottom:14px}}

/* Light variant of the closing CTA band.
   The client asked for a white final CTA on Platform and Employee Management,
   to break the run of dark sections before the footer. The base component is
   dark, so this flips ground and type while keeping the red button. */
.subpage-cta--light{background:#fff;color:var(--c-ink)}
.subpage-cta--light::before{background:radial-gradient(closest-side,rgba(218,0,16,.10),rgba(218,0,16,0) 70%)}
.subpage-cta--light::after{background:linear-gradient(90deg,transparent,rgba(218,0,16,.35) 50%,transparent)}
.subpage-cta--light .subpage-cta__title{color:var(--c-ink)}
.subpage-cta--light .subpage-cta__lead{color:var(--c-muted)}
.subpage-cta--light .btn--ghost{border-color:var(--c-line-2);color:var(--c-ink)}
.subpage-cta--light .btn--ghost:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}


/* --- Homepage round-4 tuning --- */
/* Workforce-spend band ran tall with dead black below the diagram. */
.slide{padding:78px 0 72px}
.slide__grid{align-items:center;gap:48px}
.slide__figure img{max-height:430px;object-fit:contain}
/* The three governance bullets were small against all that space. */
.slide__bullets{gap:16px}
.slide__bullets li{font-size:16.5px;line-height:1.5;color:#d4d4d4}
.slide__bullets svg{width:17px;height:17px;color:var(--c-accent)}
/* Carousel control back on a light band. */
.features .section-head__nav .arrow-btn{border-color:var(--c-line-2);color:var(--c-ink)}
.features .section-head__nav .arrow-btn:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}

/* Optical left alignment in the hero.
   All four elements sit on the same box edge (measured: left=93.0 for eyebrow,
   headline, lead and CTA). The headline still reads as inset because it opens
   on a round "O" while the eyebrow and lead open on a flat "A". A round cap
   needs to overhang the margin slightly to look flush — this is that overhang,
   not a layout fix. */
.subpage--media .subpage__title,
.subpage--dark .subpage__title{margin-left:-3px}

/* Full-width figures were running 57-60% of their section's height — that is
   what made System Impact read long on Talent Acquisition and Operating Model.
   Cap them and centre what is left. The Process & Approval graphic on Workforce
   & Vendor is deliberately exempt: the client asked for that one to be LARGER,
   as a visual break between text-heavy sections. */
.section-figure img{max-height:680px;object-fit:contain;margin:0 auto}
.section-figure--wide img{max-height:none}

/* Homepage closing CTA on phones.
   At 390px the two buttons sat side by side — the pair was centred but each
   button was not, so "See AIO in action" hugged the left half at 201px wide
   against "Contact Us" at 127px. Stacking them centres each one and gives both
   a comfortable tap target. */
@media (max-width:640px){
  .cta__actions{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
  .cta__actions .btn{justify-content:center;min-width:240px}
}