/* ============================================================
   TOKENS - red chrome (site) + blue product tokens (dashboard-frame only)
   ============================================================ */
:root{
  --red:#C8102E; --red-bright:#E92226; --red-deep:#C0101A;
  --ink:#0E0F12; --ink-2:#1E354C; --body:#5A5F66;
  --grey-50:#F2F2F2; --grey-100:#ECECEC; --grey-200:#E1E1E2; --grey-300:#D3D4D6; --grey-row-hover:#F5F5F5;
  --gradient:linear-gradient(135deg,#E92226 0%,#1E354C 100%);
  --easing:cubic-bezier(.25,.1,.25,1);
  --pill-radius:999px; --card-radius:28px; --gutter:clamp(20px,4vw,56px);
  --font: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* product-frame-only blue system (reconciled weight/radius with the site) */
  --p-25:#F5FAFF; --p-50:#EBF5FF; --p-100:#E1EFFE; --p-200:#C3DDFD; --p-300:#A4CAFE;
  --p-500:#3F83F8; --p-600:#1C64F2; --p-700:#1A56DB;
  --p-grey-25:#FBFCFD; --p-grey-50:#F9FAFB; --p-grey-100:#F3F4F6; --p-grey-400:#9CA3AF;
  --p-grey-500:#6B7280; --p-grey-700:#374151; --p-grey-800:#1F2A37; --p-grey-900:#111928;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/montserrat.woff2') format('woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/jetbrains-mono.woff2') format('woff2') format('woff2');
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;padding:0}
body{
  font-family:'Montserrat',var(--font);
  font-weight:400; color:var(--ink); background:#EFEEF2;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px;border-radius:4px}

.skip-link{
  position:fixed;top:-60px;left:12px;z-index:1000;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:8px;font-size:13px;font-weight:500;letter-spacing:.04em;
  transition:top .18s ease;
}
.skip-link:focus{top:12px}

/* ---------- Animations ---------- */
@keyframes floatUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatUpScale{from{opacity:0;transform:translateY(20px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes floatUpSubtle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroReveal{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes pulseRing{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.2);opacity:0}}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes shimmerBar{0%{background-position:200% 0}100%{background-position:-200% 0}}
.anim{opacity:0;animation-fill-mode:both;animation-timing-function:var(--easing)}
.anim.run{animation-name:floatUp;animation-duration:700ms}
.hero h1.anim.run,.hero .sub.anim.run{animation-name:heroReveal;animation-duration:850ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.anim.run.card{animation-name:floatUpScale;animation-duration:900ms}
@media (prefers-reduced-motion:reduce){
  .anim{opacity:1 !important;animation:none !important;transform:none !important;filter:none !important}
  *{scroll-behavior:auto !important}
}

/* Load entrance: nav + hero frame */
.nav .logo{animation:floatUpSubtle 620ms var(--easing) both}
@media (prefers-reduced-motion:reduce){.nav .logo{animation:none}}

/* ---------- Layout shell ---------- */
.page{max-width:1480px;margin:0 auto;padding:0 24px 64px}

/* ---------- Nav ---------- */
.site-header{position:sticky;top:0;z-index:50}
.nav{position:relative;z-index:50;background:transparent;pointer-events:none}
.nav-inner{
  max-width:1480px;margin:0 auto;padding:18px clamp(28px,10vw,150px);display:flex;
  align-items:center;gap:40px;pointer-events:auto;
  background:transparent;border:1px solid transparent;border-radius:0;box-shadow:none;
  backdrop-filter:saturate(160%) blur(0px);-webkit-backdrop-filter:saturate(160%) blur(0px);
  transition:max-width 500ms cubic-bezier(.4,0,.2,1),margin 500ms cubic-bezier(.4,0,.2,1),
    padding 500ms cubic-bezier(.4,0,.2,1),gap 500ms ease,background 380ms ease,
    border-radius 500ms ease,border-color 360ms ease,box-shadow 380ms ease,backdrop-filter 380ms ease;
}
.nav.scrolled .nav-inner{
  max-width:1420px;margin:8px auto 0;padding:12px clamp(24px,9vw,140px);border-radius:16px;
  background:rgba(252,252,253,.55);border-color:transparent;
  box-shadow:0 4px 28px -8px rgba(20,22,30,.13);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
}
.logo{display:inline-flex;align-items:center;gap:9px}
.logo-img{height:40px;width:auto;display:block}
@media (max-width:980px){.logo-img{height:32px}}
.logo svg{height:28px;width:auto;display:block}
.logo-word{font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.logo-word .dot{color:var(--red-bright)}
.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:36px;list-style:none;padding:0;margin:0 0 0 auto}
.nav-link{position:relative;font-size:12px;font-weight:500;letter-spacing:.14em;color:#1A1B1F;display:inline-flex;align-items:center;gap:6px;transition:color 150ms ease}
.nav-link:hover{color:var(--red-bright)}
.nav-link .arr{font-size:11px;opacity:.9}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--red-bright);transform:scaleX(0);transform-origin:left;transition:transform .18s var(--easing)}
.nav-link.active{color:var(--red-bright)}
.nav-link.active::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.nav-link::after{transition:none}}
.nav-link.nav-cta{padding:11px 22px;border-radius:var(--pill-radius);border:1px solid var(--red-bright);background:var(--red-bright);color:#fff;box-shadow:0 2px 10px rgba(233,34,38,.2);transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.nav-link.nav-cta::after{display:none}
.nav-link.nav-cta:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff;transform:translateY(-1px);box-shadow:0 8px 22px -6px rgba(192,16,26,.4)}
.nav-link.nav-cta.active{background:var(--red-deep);border-color:var(--red-deep)}
@media (prefers-reduced-motion:reduce){.nav-link.nav-cta:hover{transform:none}}
.nav .logo{pointer-events:auto}
.nav-toggle{display:none;flex:none;width:44px;height:44px;border:0;border-radius:0;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s var(--easing),opacity .18s ease}
.nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav-toggle span:nth-child(2){opacity:0}
.nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* seven nav items: tighten the gutters before falling back to the hamburger */
@media (max-width:1280px){
  .nav-inner{padding-left:clamp(24px,5vw,150px);padding-right:clamp(24px,5vw,150px)}
  .nav.scrolled .nav-inner{padding-left:clamp(20px,4.5vw,140px);padding-right:clamp(20px,4.5vw,140px)}
  .nav-links{gap:24px}
}
@media (max-width:1040px){
  .nav-inner{gap:14px}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;padding:10px clamp(20px,6vw,44px) 22px;margin-left:0;
    background:rgba(252,252,253,.97);backdrop-filter:saturate(160%) blur(14px);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
    border-top:1px solid rgba(15,18,28,.08);border-radius:0 0 16px 16px;
  }
  .nav.is-open .nav-links{display:flex}
  .nav-links li{width:100%}
  .nav-link{width:100%;justify-content:space-between;padding:14px 2px;border-bottom:1px solid rgba(15,18,28,.08);font-size:13px}
  .nav-link.nav-cta{justify-content:center;border-bottom:1px solid rgba(15,18,28,.08);margin-top:6px}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:var(--pill-radius);font-size:12px;font-weight:500;letter-spacing:.14em;border:1px solid currentColor;transition:all .2s ease;white-space:nowrap}
.btn .arr{font-size:12px}
.btn-outline-red{color:var(--red-bright);background:transparent}
.btn-outline-red:hover{background:var(--red-bright);color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px -6px rgba(233,34,38,.4)}
.btn-filled-red{background:var(--red-bright);color:#fff;border-color:var(--red-bright);box-shadow:0 2px 10px rgba(233,34,38,.2)}
.btn-filled-red:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-2px);box-shadow:0 8px 22px -6px rgba(192,16,26,.4)}
.btn.btn--sentence{font-size:14px;font-weight:700;letter-spacing:.01em;text-transform:none}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- Pill badges ---------- */
.badges{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;white-space:nowrap;font-size:12px;font-weight:500;letter-spacing:.04em;border-radius:var(--pill-radius);border:1px solid var(--grey-300);color:#2A2D33;background:transparent;
  transition:background-color .24s var(--easing),border-color .24s var(--easing),box-shadow .24s var(--easing),color .24s var(--easing),transform .24s var(--easing)}
.badge:hover{transform:translateY(-2px);border-color:rgba(233,34,38,.45);color:var(--red-deep)}
.badge .bi{width:13px;height:13px;flex:none;opacity:.8}
.gname{background:var(--v2-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:700}
.badges .badge{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--v2-grad) border-box;color:#2A2D33}
.badges .badge:hover{transform:translateY(-2px);border-color:transparent;color:var(--red-deep);box-shadow:0 8px 22px -10px rgba(233,34,38,.45)}
.cu{font-variant-numeric:tabular-nums}

/* ---------- Section base ---------- */
.section{border-radius:var(--card-radius);overflow:hidden;margin-top:14px;background:#fff;color:var(--ink);transition:transform .26s var(--easing),box-shadow .26s var(--easing);will-change:transform}
/* clear the sticky nav so anchor jumps land just below it, not cropped */
#platform,#products,#proof,#contact{scroll-margin-top:100px}
.section:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px rgba(0,0,0,.10),0 4px 6px 0 rgba(0,0,0,.05)}
.pad{padding:54px clamp(28px,10vw,150px)}
@media (prefers-reduced-motion:reduce){.section:hover{transform:none}}

/* ---------- Hero ---------- */
.hero{background:#fff;padding:54px clamp(28px,10vw,150px);position:relative;isolation:isolate}
.hero-inner{position:relative;z-index:2;max-width:min(640px,46%)}
.hero h1{font-weight:500;font-size:clamp(28px,4vw,55px);line-height:1.08;letter-spacing:-.03em;margin:0 0 28px;color:var(--ink)}
.hero h1 .accent{color:var(--red-bright)}
@keyframes heroDot{0%{box-shadow:0 0 0 0 rgba(233,34,38,.45)}70%{box-shadow:0 0 0 9px rgba(233,34,38,0)}100%{box-shadow:0 0 0 0 rgba(233,34,38,0)}}
.hero .sub{font-size:15px;color:var(--body);line-height:1.6;max-width:560px;margin:0 0 28px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.kip-inline{color:var(--red-bright);text-decoration:none;transition:color .2s ease}
.kip-inline:hover{font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- Brag banner ---------- */
.brag-banner{padding:28px clamp(28px,10vw,150px);display:flex;flex-direction:column;gap:28px}
.brag-top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 48px;width:100%}
.brag-text{flex:1 1 300px;min-width:220px}
.trust-line1{font-size:17px;font-weight:700;color:var(--red-bright);margin:0}
.brag-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,40px);margin-left:auto;flex:1 1 460px;max-width:640px}
.brag-stat{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:center;align-items:center}
@media (max-width:520px){.brag-stats{grid-template-columns:repeat(2,1fr)}}
.brag-num{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.brag-lbl{font-size:13px;font-weight:400;color:var(--body)}
@media (max-width:700px){.brag-stats{margin-left:0}}
.brag-banner .logo-strip{margin-top:0;width:100%}

.lattice-wrap{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.viz-frame{position:relative;width:100%;aspect-ratio:660/520;overflow:hidden;border-radius:16px;opacity:0;filter:blur(8px);transform:scale(1.02);transition:opacity .9s ease,filter .9s ease,transform .9s ease}
.viz-frame.ready{opacity:1;filter:blur(0);transform:scale(1)}
.viz-frame iframe{position:absolute;top:0;left:0;width:660px;height:520px;border:0;background:transparent;transform-origin:top left;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.viz-frame{transition:none}}
.hero-viz-box{position:absolute;top:50%;right:-6%;transform:translateY(-50%);height:135%;aspect-ratio:660/520;max-width:56%;z-index:1}
.hero-viz-box .viz-frame{border-radius:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,#fff 0%,#fff 34%,rgba(255,255,255,.72) 52%,rgba(255,255,255,0) 78%);pointer-events:none}
@media (max-width:1040px){
  /* Stacked: copy on top, cube as a full-width ambient band below it, bleeding
     off-frame on left, right and bottom with the top edge kept visible. Stacking
     here rather than at 900px avoids the band where the text column would be
     squeezed to clear the visual. */
  .hero{display:flex;flex-direction:column;overflow:hidden}
  .hero-inner{order:1;max-width:640px}
  .lattice-wrap{position:static;inset:auto;overflow:visible;order:2;width:100%;margin-top:24px}
  .hero-viz-box{
    position:relative;left:50%;transform:translateX(-50%);right:auto;
    width:132%;max-width:none;
    height:clamp(220px,58vw,300px);aspect-ratio:auto;overflow:hidden;
  }
  .hero-viz-box .viz-frame{border-radius:0}
  .hero::after{display:none}
}

/* ---------- Row: Every asset. One view. (70%) + Awards strip (30%) ---------- */
.row-70-30{display:grid;grid-template-columns:7fr 3fr;gap:14px;margin-top:14px}
.row-70-30 .section{margin-top:0}
@media (max-width:900px){.row-70-30{grid-template-columns:1fr}}

/* ---------- Awards strip ---------- */
.awards-strip{background:#fff;padding:54px clamp(24px,4vw,36px);display:flex;flex-direction:column;gap:28px}
.awards-strip .as-heading{font-weight:500;font-size:clamp(30px,3.4vw,40px);line-height:1.08;letter-spacing:-.018em;color:var(--ink);margin:0}
.awards-strip .as-heading .accent-red{color:var(--red-bright)}
.awards-strip .as-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%;border-top:1px solid var(--grey-200)}
.awards-strip .as-item{border-bottom:1px solid var(--grey-200)}
.awards-strip .as-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;color:inherit;text-decoration:none;transition:opacity .18s ease}
a.as-row:hover .as-title{background:var(--v2-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.as-row:hover .as-arrow{stroke:url(#kipGrad);transform:translate(2px,-2px)}
.awards-strip .as-title{font-size:15px;font-weight:700;color:var(--ink);margin:0;line-height:1.4}
.awards-strip .as-year{font-size:13px;color:var(--body);margin:4px 0 0}
.awards-strip .as-arrow{width:18px;height:18px;color:var(--red-bright);flex:0 0 auto;transition:transform .18s var(--easing)}

/* ---------- Section head / typography ---------- */
.h-display{font-weight:500;font-size:clamp(30px,3.4vw,40px);line-height:1.08;letter-spacing:-.018em;margin:0 0 28px}
.lede{font-size:15px;line-height:1.7;max-width:640px;margin:28px 0 28px;color:var(--body)}

/* ---------- Products ---------- */
.products-two{padding:56px clamp(28px,5vw,64px) 64px}
.products-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:820px){.products-grid-2{grid-template-columns:1fr}}
.domains-copy h3{font-weight:500;font-size:24px;color:var(--ink);margin:0}
.product-tagline{color:var(--red-bright);font-weight:700;font-size:15px;margin:8px 0 0}
.domains-copy hr{border:none;border-top:1px solid var(--grey-200);margin:18px 0}
.product-desc{color:var(--body);font-size:15px;line-height:1.6;margin:0 0 18px;min-height:76px}
.product-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:14px}
.product-stats .num{font-weight:700;font-size:24px;color:var(--ink);letter-spacing:-.02em}
.product-stats .lbl{font-size:13px;color:var(--body);margin-top:2px}
.product-qualifier{font-size:12px;line-height:1.4;color:var(--body);margin:0 0 16px}
.product-modules{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0}
.product-modules .badge{padding:7px 14px 7px 11px}

@keyframes capIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
.logo-strip{margin-top:56px;padding-top:0;width:100%}
.logo-strip-row{height:auto;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%)}
.logo-strip-track{display:flex;flex-shrink:0;gap:56px;align-items:center;padding-right:56px;height:100%;width:max-content;animation:logoScrollLeft 46s linear infinite;will-change:transform}
@keyframes logoScrollLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-strip-track{animation:none}}
.logo-strip .logo-word-tile{display:inline-flex;align-items:center;justify-content:center;width:170px;height:44px;flex:none;color:var(--grey-300);transition:color .2s ease,opacity .2s ease}
.logo-strip .logo-word-tile:hover{color:var(--body)}
/* client logo artwork: one colour source, per-logo height for equal optical weight */
.lg{display:block;width:auto;color:inherit}
.lg--vodacom{height:34px}
.lg--vodafone{height:34px}
.lg--vantage{height:36px}
.lg--uscell{height:24px}
.lg--inwit{height:20px}

/* ---------- Pitch sections (shared type helpers) ---------- */
.pitch h2{margin-bottom:18px}
.light{background:#fff}
.light .h-display{color:var(--ink)}
.dark{background:#fff;color:var(--ink);position:relative}
.dark h2{color:var(--ink)}
.dark p{color:var(--body)}

/* ---------- Two domains, merged toggle section ---------- */
.domain-chips{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:28px 0}
@media (max-width:1240px){.domain-chips{justify-content:flex-start}.chip-group{display:contents}}
.chip-group{display:flex;flex-wrap:wrap;gap:10px}
.domain-chip{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:var(--pill-radius);font-size:12px;font-weight:500;letter-spacing:.14em;border:1px solid var(--red-bright);color:var(--red-bright);background:transparent;transition:all .2s ease;white-space:nowrap}
.domain-chip:hover{background:var(--red-bright);color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px -6px rgba(233,34,38,.4)}
.domain-chip.active{background:var(--red-bright);border-color:var(--red-bright);color:#fff;box-shadow:0 2px 10px rgba(233,34,38,.2)}
.domain-chip.active:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-2px);box-shadow:0 8px 22px -6px rgba(192,16,26,.4)}
@media (prefers-reduced-motion:reduce){.domain-chip:hover{transform:none}}
.domains-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;background:#fff;border:1px solid var(--grey-200);border-radius:var(--card-radius);padding:20px 32px;min-height:500px}
@media (max-width:900px){.domains-body{grid-template-columns:1fr;min-height:0}.domains-visual{display:none}}
.domains-visual{position:relative;width:100%;aspect-ratio:660/520}
.domain-panel{display:none;position:absolute;inset:0}
.domain-panel.active{display:block;animation:capIn .42s var(--easing) both}
.domain-panel .viz-frame{border-radius:20px}
.domain-copy-panel{display:none}
.domain-copy-panel.active{display:block;animation:capIn .42s var(--easing) both}
@media (prefers-reduced-motion:reduce){.domain-panel.active,.domain-copy-panel.active{animation:none}}

/* ---------- Proof at operator scale ---------- */

@media (max-width:900px){}

.proof-testimonial{margin:20px 0 0;background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:0;border-radius:20px;padding:28px;color:var(--ink);box-shadow:0 14px 40px -16px rgba(20,22,30,.28),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .3s var(--easing),box-shadow .3s var(--easing)}
.proof-testimonial:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px rgba(0,0,0,.10),0 4px 6px 0 rgba(0,0,0,.05)}
@media (prefers-reduced-motion:reduce){.proof-testimonial:hover{transform:none}}
/* the expand uses the same 0fr to 1fr row trick as the Ignite accordion */
.pt-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms cubic-bezier(.22,.61,.36,1)}
.proof-testimonial.is-open .pt-panel{grid-template-rows:1fr}
.pt-panel-in{overflow:hidden;min-height:0;opacity:0;transition:opacity 140ms ease}
.proof-testimonial.is-open .pt-panel-in{opacity:1;transition:opacity 200ms ease 90ms}
.pt-panel-in > *{margin:0 0 14px}
.pt-panel-in > *:first-child{margin-top:18px}
.pt-panel-in > *:last-child{margin-bottom:0}
.pt-lead,.pt-panel-in p{font-size:14.5px;line-height:1.7;color:var(--body)}
.pt-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px}
.pt-list li{position:relative;padding-left:16px;font-size:14px;line-height:1.6;color:var(--body)}
.pt-list li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--red-bright)}
.pt-list strong,.pt-panel-in p strong{font-weight:700;color:var(--ink)}
.pt-top{display:flex;align-items:flex-start;gap:clamp(16px,3vw,32px)}
.pt-top .pt-quote{flex:1 1 auto;min-width:0}
.pt-toggle{flex:none;margin:0;display:inline-flex;align-items:center;gap:7px;padding:6px 13px;
  border-radius:var(--pill-radius);border:1px solid var(--grey-300);background:none;
  font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--body);white-space:nowrap;
  transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.pt-toggle:hover{border-color:var(--red-bright);color:var(--red-bright)}
.pt-toggle:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}
.pt-chev{width:13px;height:13px;flex:none;transition:transform .24s var(--easing)}
/* mobile: chevron only, but the label stays in the accessibility tree */
@media (max-width:700px){
  .pt-toggle{gap:0;padding:0;width:34px;height:34px;justify-content:center;border-radius:50%}
  .pt-toggle-txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
.proof-testimonial.is-open .pt-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
  .pt-panel,.pt-panel-in,.pt-chev,.pt-toggle{transition:none}
}
.proof-testimonial .pt-quote{margin:0;font-size:clamp(16px,1.8vw,19px);line-height:1.55;font-weight:400;color:var(--ink)}
.proof-testimonial .pt-cite{display:flex;align-items:center;gap:14px;margin-top:28px}
.proof-testimonial .pt-avatar{width:42px;height:42px;border-radius:50%;background:var(--v2-grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:.02em;flex:none}
.proof-testimonial .pt-meta{display:flex;flex-direction:column;gap:1px}
.proof-testimonial .pt-name{font-size:14px;font-weight:700;color:var(--ink)}
.proof-testimonial .pt-role{font-size:13px;color:var(--body)}

/* ---------- Knowing is Power campaign ---------- */
.kip-campaign{padding:clamp(48px,7vw,72px) 0;margin-top:28px;scroll-margin-top:100px}
.kip-head{text-align:center;padding:0 clamp(20px,6vw,80px)}
.kip-campaign .h-display{margin:0 0 10px}
.kip-subline{margin:0;color:var(--body);font-size:clamp(15px,1.6vw,17px);line-height:1.5}
.kip-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.kip-hub{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin:38px 0 8px;align-items:stretch}
@media(max-width:900px){.kip-hub{grid-template-columns:1fr}}
.kip-cats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.kip-cats{grid-template-columns:1fr}}

/* shared card behaviour: enlarge + drop shadow on hover */
.kip-cat,.kip-film{position:relative;overflow:hidden;border-radius:20px;text-decoration:none;color:#fff;isolation:isolate;
  transition:transform .28s var(--easing),box-shadow .28s var(--easing);will-change:transform}
.kip-cat:hover,.kip-film:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 40px -14px rgba(20,22,30,.45)}
.kip-cat:focus-visible,.kip-film:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* film */
.kip-film{display:flex;align-items:center;justify-content:center;background:var(--v2-grad);border:0;cursor:pointer;padding:0;min-height:300px;text-align:center}
.kip-film .kf-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;z-index:0}
.kip-film::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(125deg,rgba(30,53,76,.86),rgba(11,20,32,.5) 55%,rgba(233,34,38,.5))}
.kip-film .kf-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;padding:32px}
.kip-lockup{font-weight:700;letter-spacing:.05em;line-height:1.04;text-align:center}
.kip-lockup .kl-1,.kip-lockup .kl-2{display:block;font-size:clamp(24px,3.4vw,46px)}
.kip-lockup .kl-o{display:inline-block;width:.7em;height:.7em;vertical-align:-.07em;margin:0 .01em}
.kip-lockup .kl-dot{color:var(--red-bright)}
.kip-lockup .kl-mark{display:block;font-size:clamp(13px,1.4vw,18px);letter-spacing:.03em;margin-top:8px;opacity:.95}
.kip-lockup .kl-mark .dot{color:var(--red-bright)}
.kip-play{position:relative;width:64px;height:64px;flex:none}
.kip-play .kp-btn{position:absolute;inset:0;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px -6px rgba(0,0,0,.45);z-index:1}
.kip-play .kp-btn svg{width:32px;height:32px;margin-left:4px;fill:var(--red-bright)}
.kip-play .kp-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:kipPulse 2.4s ease-out infinite}
@keyframes kipPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.kip-film .kf-playing{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}

/* category cards: all on the campaign gradient */
.kip-cat{display:flex;background:var(--v2-grad)}
.kip-hero{aspect-ratio:1/1.15}
.kip-hero .kip-figure{position:absolute;bottom:0;height:100%;width:auto;max-width:none;object-fit:contain;object-position:bottom right;filter:grayscale(1) contrast(1.06);z-index:2;pointer-events:none}
.kip-hero--csm .kip-figure{right:-22%}
.kip-hero--energy .kip-figure{right:-22%;transform:scaleX(-1);filter:grayscale(1) contrast(1.22) brightness(1.3)}
.kip-cat .kip-wedge{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.95}
.kip-hero--csm .kip-wedge{background:#E23F00;clip-path:polygon(100% 14%,100% 100%,58% 100%)}
.kip-hero--energy .kip-wedge{background:#00EEC8;clip-path:polygon(100% 14%,100% 100%,58% 100%)}

.kip-cat::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(10,16,26,.86) 0%,rgba(10,16,26,.3) 32%,rgba(10,16,26,0) 54%),linear-gradient(to right,rgba(10,16,26,.5) 0%,rgba(10,16,26,0) 56%)}
.kip-cat .kc-eyebrow{position:absolute;top:16px;left:18px;z-index:5;font-family:'Montserrat',var(--font);font-size:12.5px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.9)}
.kip-cat .kc-eyebrow::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:-1px}
.kip-hero--csm .kc-eyebrow::before{background:#E23F00}
.kip-hero--energy .kc-eyebrow::before{background:#00EEC8}

.kip-cat .kc-stack{position:relative;z-index:4;align-self:flex-end;padding:18px;max-width:70%;display:flex;flex-direction:column;gap:6px}
.kip-hero .kc-stack{max-width:56%}
.kip-cat .kc-title{margin:0;font-size:clamp(17px,1.7vw,21px);font-weight:700;line-height:1.16;letter-spacing:-.012em;color:#fff}
.kip-cat .kc-copy{margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.88)}
.kip-cat .kc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:3px;font-size:13px;font-weight:700;color:#fff;transition:gap .2s ease}
.kip-cat .kc-cta span{text-decoration:underline;text-underline-offset:3px}
.kip-cat .kc-cta .kc-arrow{width:16px;height:16px;flex:0 0 auto;transition:transform .2s var(--easing)}
.kip-cat:hover .kc-cta{gap:11px}
.kip-cat:hover .kc-cta .kc-arrow{transform:translate(2px,-2px)}
.kip-sub{min-height:132px}

@media (max-width:560px){.kip-hero .kc-stack{max-width:74%}}
@media (prefers-reduced-motion:reduce){.kip-cat:hover .kc-cta{gap:8px}.kip-cat:hover .kc-cta .kc-arrow{transform:none}}

.kip-cta{text-align:center;margin-top:44px}
.kip-cta p{margin:0 0 20px;font-family:'Montserrat',var(--font);font-weight:500;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.012em;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.kip-cat,.kip-film{transition:none}.kip-cat:hover,.kip-film:hover{transform:none}.kip-play .kp-ring{animation:none}}
.partner-note{margin:38px 0 0;display:flex;flex-direction:column;align-items:center;gap:16px}
.partner-note p{margin:0;font-size:14px;color:var(--body)}
.btn-outline-white{color:#fff;background:transparent;border-color:rgba(255,255,255,.5)}
.btn-outline-white:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){.btn-outline-white:hover{transform:none}}

/* ---------- Case studies ---------- */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media (max-width:1040px){.cs-grid{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}
/* Every band lines up across the three cards regardless of copy length. Copy is also
   word-count matched, so the bands stay tight rather than merely aligned. */
/* Only while the cards sit 3-up: pinning every card to rows 1-7 stops them stacking,
   because items that cannot fit the single column spill into implicit columns. */
@media (min-width:1041px){
  @supports (grid-template-rows:subgrid){
    .cs-grid{grid-template-rows:repeat(5,auto)}
    .cs-grid > .cs-card{grid-row:1/span 5;display:grid;grid-template-rows:subgrid;align-content:start}
    .cs-grid > .cs-card > .cs-outcome{margin-top:0;align-self:start}
  }
}
.cs-card{background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:0;border-radius:20px;padding:28px;color:var(--ink);
  box-shadow:0 14px 40px -16px rgba(20,22,30,.28),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .3s var(--easing),box-shadow .3s var(--easing);display:flex;flex-direction:column}
.cs-card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px rgba(0,0,0,.10),0 4px 6px 0 rgba(0,0,0,.05)}
@media (prefers-reduced-motion:reduce){.cs-card,.cs-card:hover{transition:none;transform:none}}
/* logo left, product chip right, on one row: the old scope line cost a whole band */
.cs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 10px}
.cs-logo{display:flex;align-items:flex-end;min-height:34px;color:#41454B}
.cs-chip{flex:none;display:inline-flex;align-items:center;padding:5px 11px;border-radius:var(--pill-radius);
  font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.09em;
  white-space:nowrap;border:1px solid var(--grey-300);color:var(--body)}
@media (max-width:420px){.cs-head{flex-wrap:wrap;gap:8px}.cs-chip{order:-1}}
.cs-logo .lg--vodacom{height:28px}
.cs-logo .lg--vantage{height:31px}
.cs-logo .lg--inwit{height:17px}
.cs-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cs-block{margin:0 0 7px}
.cs-dt{font-family:'Montserrat',var(--font);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin:0 0 3px}
.cs-dd{margin:0;font-size:13.5px;line-height:1.6;color:var(--body)}
/* figure above its label always, so the three cards read the same whatever the
   card width does to the wrap */
.cs-outcome{margin:auto 0 0;padding-top:9px;border-top:1px solid var(--grey-200);display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.cs-num{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--red-bright)}
.cs-lbl{font-size:13px;font-weight:700;color:var(--ink)}
.cs-res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.cs-res li{position:relative;padding-left:14px;font-size:13px;line-height:1.55;color:var(--body)}
.cs-res li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--red-bright)}

/* ---------- Simple red icons on module and solution items ---------- */
.it-ico{display:inline-flex;flex:none;color:var(--red-bright)}
.ico-svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mod-card .it-ico{margin-bottom:12px}
.acc-list li .it-ico{margin-top:1px}
.acc-list li .ico-svg{width:17px;height:17px}
.sol-text{display:flex;flex-direction:column;gap:2px;min-width:0}

/* ---------- Products and solutions: the two extra tabs ---------- */
.tab-off{display:none !important}
.mod-head{max-width:720px}
.mod-head h3{margin:0 0 12px;font-family:'Montserrat',var(--font);font-weight:500;
  font-size:clamp(21px,2.3vw,27px);line-height:1.14;letter-spacing:-.014em;color:var(--ink)}
.mod-head p{margin:0;font-size:15px;line-height:1.7;color:var(--body)}
.mod-grid{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1040px){.mod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.mod-grid{grid-template-columns:1fr}}
/* gradient border: a white padding-box over a gradient border-box */
.mod-card{border:1.5px solid transparent;border-radius:18px;padding:20px;
  background:linear-gradient(#fff,#fff) padding-box,var(--v2-grad) border-box;
  transition:transform .3s var(--easing),box-shadow .3s var(--easing)}
.mod-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px -20px rgba(20,22,30,.3)}
@media (prefers-reduced-motion:reduce){.mod-card,.mod-card:hover{transition:none;transform:none}}
.mod-name{margin:0 0 6px;font-family:'Montserrat',var(--font);font-size:14px;font-weight:700;
  line-height:1.3;color:var(--ink)}
.mod-out{margin:0;font-size:13px;line-height:1.55;color:var(--body)}
/* the partner tab keeps the accordion; only its heading spacing changes in here */
#domain-tab-partner .lede{margin-top:14px}
#domain-tab-partner .sol-acc{margin-top:32px}

/* ---------- Case studies on the gradient shell ---------- */
.grad-shell .cs-card,.grad-shell .cs-mini,.grad-shell .proof-testimonial{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 40px -22px rgba(0,0,0,.4)}
.grad-shell .cs-card:hover,.grad-shell .cs-mini:hover,.grad-shell .proof-testimonial:hover{
  background:rgba(255,255,255,.14);box-shadow:0 18px 44px -20px rgba(0,0,0,.45)}
.grad-shell .cs-logo{color:#fff}
.grad-shell .cs-chip{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.12);color:#fff}
.grad-shell .cs-dt,.grad-shell .cs-more-head,.grad-shell .cs-mini-name{color:#fff}
.grad-shell .cs-dd,.grad-shell .cs-res li,.grad-shell .cs-mini-desc{color:rgba(255,255,255,.78)}
.grad-shell .cs-res li:before{background:#fff}
.grad-shell .cs-outcome,.grad-shell .cs-mini-out{border-top-color:rgba(255,255,255,.22)}
.grad-shell .cs-num,.grad-shell .cs-lbl,.grad-shell .cs-mini-out{color:#fff}
.grad-shell .cs-mini-lbl{color:#fff}
.grad-shell .cs-arrow{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff}
.grad-shell .cs-arrow:hover:not(:disabled){background:#fff;color:var(--ink);border-color:#fff}
/* the rail edges cannot fade to a flat colour over a gradient, so the crop and the
   arrows carry the affordance on their own here */
.grad-shell .cs-rail-wrap:before,.grad-shell .cs-rail-wrap:after{display:none}
.grad-shell .pt-quote,.grad-shell .pt-name{color:#fff}
.grad-shell .pt-lead,.grad-shell .pt-panel-in p,.grad-shell .pt-list li{color:rgba(255,255,255,.82)}
.grad-shell .pt-list strong,.grad-shell .pt-panel-in p strong{color:#fff}
.grad-shell .pt-list li:before{background:#fff}
.grad-shell .pt-toggle{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.12);color:#fff}
.grad-shell .pt-toggle:hover{background:#fff;border-color:#fff;color:var(--ink)}
.grad-shell .pt-toggle:focus-visible{outline-color:#fff}
.grad-shell .pt-role{color:rgba(255,255,255,.7)}
.grad-shell .pt-avatar{background:#fff;color:var(--ink)}

/* ---------- Case studies: the rest ---------- */
.cs-more{margin-top:52px}
.cs-more-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.cs-more-head{margin:0;font-family:'Montserrat',var(--font);font-size:15px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.cs-nav{display:flex;gap:8px;flex:none}
.cs-arrow{width:36px;height:36px;border-radius:50%;border:1px solid var(--grey-300);background:rgba(255,255,255,.6);
  color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .18s ease,background .18s ease,opacity .18s ease}
.cs-arrow svg{width:17px;height:17px;display:block}
.cs-arrow:hover:not(:disabled){border-color:var(--red-bright);color:var(--red-bright);background:#fff}
.cs-arrow:disabled{opacity:.32;cursor:default}
/* the rail: native horizontal scroll, snapped, with the scrollbar hidden */
.cs-rail-wrap{position:relative}
.cs-rail{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  padding:2px 2px 6px}
.cs-rail::-webkit-scrollbar{display:none}
.cs-rail:focus-visible{outline:2px solid var(--red-bright);outline-offset:4px;border-radius:20px}
.cs-rail .cs-mini{flex:0 0 29%;min-width:0;scroll-snap-align:start}
@media (max-width:1040px){.cs-rail .cs-mini{flex-basis:44%}}
@media (max-width:700px){.cs-rail .cs-mini{flex-basis:82%}}
/* white-to-transparent fades over each cropped edge, shown only when there is
   actually more rail in that direction */
.cs-rail-wrap:before,.cs-rail-wrap:after{content:"";position:absolute;top:0;bottom:6px;width:52px;
  pointer-events:none;z-index:2;opacity:0;transition:opacity .22s ease}
.cs-rail-wrap:before{left:0;background:linear-gradient(90deg,#fff 12%,rgba(255,255,255,0))}
.cs-rail-wrap:after{right:0;background:linear-gradient(270deg,#fff 12%,rgba(255,255,255,0))}
.cs-rail-wrap.can-prev:before,.cs-rail-wrap.can-next:after{opacity:1}
@media (prefers-reduced-motion:reduce){.cs-rail-wrap:before,.cs-rail-wrap:after{transition:none}}
@media (prefers-reduced-motion:reduce){.cs-rail{scroll-behavior:auto}}
.cs-mini{background:#23262B;border:0;border-radius:18px;padding:22px;display:flex;flex-direction:column;
  box-shadow:0 14px 34px -20px rgba(0,0,0,.5);
  transition:transform .3s var(--easing),box-shadow .3s var(--easing)}
.cs-mini:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){.cs-mini,.cs-mini:hover{transition:none;transform:none}}
/* one mark band per card: supplied logo artwork where it exists, the name set as a
   wordmark where it does not, both bottom aligned so the band height stays constant */
/* One identity row per card, bottom aligned, so logo baselines and wordmark
   baselines line up across the whole rail. min-height rather than height, so a
   name that wraps on a narrow card grows instead of clipping. */
.cs-mini-mark{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 12px;color:#fff}
.cs-mini-logos{display:flex;align-items:flex-end;gap:12px;min-height:22px}
.cs-mini-logos .lg{flex:none}
.cs-mini-mark .lg--vodacom,.cs-mini-mark .lg--vodafone{height:20px}
.cs-mini-mark .lg--uscell{height:14px;margin-bottom:5px}
.cs-mini-name{font-family:'Montserrat',var(--font);font-size:15px;font-weight:700;color:#fff;line-height:1.25}
.cs-mini-scope{margin:0 0 12px;font-size:12px;color:rgba(255,255,255,.58)}
.cs-mini-desc{margin:0 0 14px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.76)}
.cs-mini-out{margin:auto 0 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;line-height:1.55;color:#fff}
.cs-mini-lbl{display:block;margin-bottom:5px;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:#FF7A6B}

/* ---------- Every asset. One view. (capability wheel) ---------- */
.wl-band{background:#fff;padding:54px clamp(24px,3vw,40px)}
.wl-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,36px);align-items:center}
/* stacked: copy, wheel, then the CTA centred beneath both */
.wl-cta{justify-content:center;margin-top:8px}
@media (min-width:1240px){
  .wl-grid{grid-template-columns:minmax(240px,1fr) 480px;grid-template-rows:auto auto;gap:0 28px;align-items:start}
  .wl-copy{grid-column:1;grid-row:1}
  .wl-cta{grid-column:1;grid-row:2;justify-content:flex-start;margin-top:32px}
  .wl-wheel{grid-column:2;grid-row:1/3;align-self:center}
}
.wl-copy{min-width:0}
.wl-copy .h-display{margin:0 0 10px}
.wl-sub{margin:0;font-family:'Montserrat',var(--font);font-size:15px;font-weight:700;color:var(--ink)}
/* the intro holds the panel's height, the detail sits over it, so hovering never shifts the layout */
.wl-panel{position:relative;margin-top:24px}
.wl-intro{margin:0;font-size:15px;line-height:1.7;color:var(--body);transition:opacity .2s var(--easing)}
.wl-intro p{margin:0 0 15px}
.wl-intro p:last-child{margin-bottom:0}
.wl-detail{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .2s var(--easing)}
.wl-band.is-detail .wl-intro{opacity:0}
.wl-band.is-detail .wl-detail{opacity:1}
.wl-dt{margin:0 0 12px;font-family:'Montserrat',var(--font);font-size:19px;font-weight:700;line-height:1.25;color:var(--ink)}
.wl-dl p{margin:0 0 9px;font-size:14px;line-height:1.6;color:var(--body)}
.wl-cue{display:none;align-items:center;gap:8px;margin:16px 0 0;font-size:13px;font-weight:700;color:var(--red-bright)}
.wl-cue.on{display:inline-flex}
.wl-cue-arr{width:15px;height:15px;flex:0 0 auto}
.wl-wheel{min-width:0;display:flex;flex-direction:column;align-items:center}
.wl-svg{display:block;width:100%;max-width:520px;height:auto;overflow:visible}

/* resting state reads the hierarchy on its own: red core, grey rings, two soft red
   products, one muted partner segment */
.seg{cursor:pointer}
/* rounded ends plus a real angular gap, so no separating stroke is needed */
.seg-shape{stroke:none;transition:fill .2s var(--easing),fill-opacity .2s var(--easing)}
.seg-lbl{font-family:'Montserrat',var(--font);font-weight:500;fill:var(--ink);
  transition:fill .2s var(--easing)}
/* the core is the brand gradient on a slow turn; the two halves sit over it and
   stay transparent until one is hovered */
.core-spin{transform-origin:240px 240px;animation:wlCoreSpin 26s linear infinite}
.r-core .seg-shape{fill:transparent}
.core-ripple{fill:none;stroke:url(#wlGrad);stroke-width:1.5;transform-origin:240px 240px;
  animation:wlRipple 3.6s var(--easing) infinite}
.core-ripple--b{animation-delay:1.8s}
@keyframes wlCoreSpin{to{transform:rotate(360deg)}}
@keyframes wlRipple{0%{transform:scale(1);opacity:.45}75%{opacity:0}100%{transform:scale(1.2);opacity:0}}
.r-fn .seg-shape{fill:var(--grey-100)}
.r-mod .seg-shape{fill:var(--grey-100)}
.r-off.off-prod .seg-shape{fill:url(#wlGrad);fill-opacity:.42}
.r-off.off-partner .seg-shape{fill:var(--grey-100)}
.off-lbl{font-weight:700;letter-spacing:.005em}
.r-off.off-partner .seg-lbl{fill:var(--body)}
.core-name{font-family:'Montserrat',var(--font);font-size:15px;font-weight:700;fill:#fff;
  transition:opacity .2s var(--easing)}
.core-half{fill:#fff;font-weight:700;opacity:0;transition:opacity .2s var(--easing)}
.core-split{stroke:#fff;stroke-width:1.5;opacity:0;transition:opacity .2s var(--easing)}
.wl-band.core-open .core-name{opacity:0}
.wl-band.core-open .core-half,.wl-band.core-open .core-split{opacity:1}
/* one dotted ring turning slowly behind the Sense, Reason and Act labels, which
   stay still so they remain readable */
.grp-dots{fill:none;stroke:url(#wlCore);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round}
.grp-spin{transform-origin:240px 240px;animation:wlDotSpin 44s linear infinite}
@keyframes wlDotSpin{to{transform:rotate(360deg)}}
.grp-lbl{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;fill:var(--body);
  stroke:#fff;stroke-width:4;stroke-linejoin:round;paint-order:stroke fill}

/* hover and focus: the segment goes brand red, whatever it uses tints light red */
.seg.is-linked .seg-shape{fill:url(#wlGrad);fill-opacity:.34}
.r-off.off-prod.is-linked .seg-shape{fill-opacity:.62}
.seg.is-active .seg-shape,.r-off.is-active .seg-shape,.r-off.off-prod.is-active .seg-shape{fill:url(#wlGrad);fill-opacity:1}
.seg.is-active .seg-lbl,.r-off.off-partner.is-active .seg-lbl{fill:#fff}
.r-core .seg.is-active .seg-shape,.seg.r-core.is-active .seg-shape{fill:#0E0F12;fill-opacity:.28}
.seg:focus{outline:none}
.seg:focus-visible .seg-shape{stroke:var(--ink);stroke-width:2.5}

/* mobile: ring tabs above a static wheel, with that ring's items listed below */
.wl-tabs{display:none;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px}
.wl-tab{padding:10px 16px;border-radius:var(--pill-radius);font-size:12px;font-weight:500;letter-spacing:.08em;
  border:1px solid var(--red-bright);color:var(--red-bright);background:transparent;transition:all .2s ease}
.wl-tab.active{background:var(--red-bright);border-color:var(--red-bright);color:#fff;box-shadow:0 2px 10px rgba(233,34,38,.2)}
.wl-mlist{display:none;width:100%;margin-top:24px;border-top:1px solid var(--grey-200)}
.wl-mrow{padding:14px 0;border-bottom:1px solid var(--grey-200)}
.wl-mrow p{margin:0}
.wl-mrow .wl-mt{font-family:'Montserrat',var(--font);font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.wl-mrow .wl-mc{margin-top:4px;font-size:13px;line-height:1.6;color:var(--body)}
.wl-mnote{margin:14px 0 0;font-size:12.5px;color:var(--body)}
@media (max-width:760px){
  .wl-tabs{display:flex}
  .wl-mlist{display:block}
  .wl-svg{pointer-events:none;max-width:420px}
  .wl-band .wl-detail{display:none}
  .wl-band.is-detail .wl-intro{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .seg-shape,.seg-lbl,.wl-intro,.wl-detail,.core-name,.core-half,.core-split,.wl-tab{transition:none}
  .core-spin,.grp-spin,.core-ripple{animation:none}
  .core-ripple{opacity:0}
}

/* ---------- CTA component: two intents, used site wide ---------- */
.cta-band{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 0}
.partner-note .cta-band{margin:0}
/* on the gradient shell an outlined red button has too little contrast, so the
   secondary borrows the white outline already defined for that surface */
.grad-shell .cta-band .btn-outline-red{color:#fff;border-color:rgba(255,255,255,.5)}
.grad-shell .cta-band .btn-outline-red:hover{background:#fff;color:var(--ink);border-color:#fff;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45)}
/* inside the dark domains-body the same applies to the product primary */
.cta-band--domain{margin-top:28px;justify-content:center}
/* these labels name the product, so they are long by design; .btn is nowrap and
   the section clips its overflow, so below the narrow breakpoint the button
   wraps and takes the full column instead of being cut off at the edge */
@media (max-width:620px){
  .cta-band--domain{display:block}
  .cta-band--domain .btn{white-space:normal;text-align:center;justify-content:center;
    width:100%;line-height:1.45}
}

/* ---------- Careers band + external link glyph ---------- */
.careers-band .h-display{margin:0 0 18px}
.careers-band .lede{margin:0;max-width:560px}
/* copy left, the team lattice right; the lattice carries the team names at desktop
   and hands them to the chip row once it is too small to letter */
.careers-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(24px,4vw,56px);align-items:stretch}
/* the chart is sized by the copy beside it: it fills the copy column's height and
   never the other way round, so the card stays as tall as the words */
.careers-art{min-width:0;position:relative}
.jb-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
/* the organisation above, its model below: same people, same structure, the
   model dashed and held back, the open seats lit and tied to their twins */
.ot-edges path{fill:none;stroke:var(--grey-300);stroke-width:1.1}
.ot-dot{fill:#B9BCC2}
.ot-dot.ot-live{fill:var(--red-bright)}
.ot-ring{fill:none;stroke:var(--red-bright);stroke-width:1.1}
.ot-horizon{stroke:var(--grey-200);stroke-width:1;stroke-dasharray:2 6}
.ot-twin{opacity:.45}
.ot-twin .ot-edges path{stroke-dasharray:3 4}
.ot-twin .ot-dot{fill:none;stroke:#B9BCC2;stroke-width:1.1}
.ot-twin .ot-dot.ot-live{stroke:var(--red-bright)}
.ot-ties{stroke:var(--red-bright);stroke-width:1;stroke-dasharray:3 5;opacity:.55}
@media (prefers-reduced-motion:reduce){.ot-ring{display:none}}
@media (max-width:900px){
  .careers-grid{grid-template-columns:1fr}
  .careers-art{aspect-ratio:560/288;width:min(100%,560px);margin:8px auto 0}
}

/* ---------- Contact form ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1fr;gap:56px;align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.contact-copy .badges{flex-direction:row;flex-wrap:wrap}}
.contact-form{max-width:640px;margin-top:0;display:flex;flex-direction:column;gap:18px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.cf-row{grid-template-columns:1fr}}
.cf-field{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700;letter-spacing:normal;color:var(--ink)}
.cf-field input,.cf-field select,.cf-field textarea{
  font:inherit;font-size:16px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--ink);
  border:1px solid var(--grey-300);border-radius:10px;padding:11.5px 14px;background:#fff;
  transition:border-color .18s ease;resize:vertical;
}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:var(--red-bright);outline:none}
.cf-field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:42px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5F66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.contact-form .btn{align-self:flex-start;margin-top:4px}
.cf-notice{font-size:13px;color:var(--body);margin:0;min-height:1.4em}
.cf-notice.show{color:var(--red-deep)}
.h-display .accent-red,.lede .accent-red{color:var(--red-bright)}

.sol-acc{margin-top:46px;display:flex;flex-direction:column;gap:12px}
.acc-card{border:1.5px solid transparent;border-radius:18px;overflow:hidden;
  background:linear-gradient(#fff,#fff) padding-box,var(--v2-grad) border-box;
  transition:background-color .2s ease,border-color .2s ease}
.acc-card:hover{background:linear-gradient(var(--grey-row-hover),var(--grey-row-hover)) padding-box,var(--v2-grad) border-box}
.acc-card.is-open{background:linear-gradient(#fff,#fff) padding-box,var(--v2-grad) border-box;box-shadow:0 10px 30px -20px rgba(20,22,30,.3)}
.acc-h{margin:0}
.acc-btn{display:flex;align-items:center;gap:20px;width:100%;padding:18px 22px;background:none;border:0;
  cursor:pointer;text-align:left;font:inherit;color:inherit}
.acc-btn:focus-visible{outline:2px solid var(--red-bright);outline-offset:-3px;border-radius:18px}
.acc-btn .acc-ico{flex:none;width:18px;height:18px;color:var(--red-bright)}
.acc-btn .acc-ico .dot,.acc-btn .acc-ico.ico-sense::before{background:var(--red-bright)}
.acc-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.acc-title{font-family:'Montserrat',var(--font);font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.acc-cats{font-size:12px;line-height:1.5;color:var(--body)}
.acc-chev{flex:none;width:20px;height:20px;color:var(--body);display:block;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),color .2s ease}
.acc-chev svg{width:20px;height:20px;display:block}
.acc-card.is-open .acc-chev{transform:rotate(180deg);color:var(--red-bright)}

.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms cubic-bezier(.22,.61,.36,1)}
.acc-card.is-open .acc-panel{grid-template-rows:1fr;transition-duration:300ms}
.acc-inner{overflow:hidden;min-height:0;padding:0 22px;opacity:0;transition:opacity 120ms ease}
.acc-card.is-open .acc-inner{opacity:1;padding:2px 22px 24px;transition:opacity 200ms ease 80ms}
.acc-offer{margin:0 0 22px;max-width:760px;font-size:14.5px;line-height:1.7;color:var(--body)}
.acc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px}
.acc-list li{display:grid;grid-template-columns:19px 1fr;gap:11px;align-items:start}
.sol-name{font-family:'Montserrat',var(--font);font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
.sol-desc{font-size:13px;line-height:1.5;color:var(--body)}
@media (max-width:900px){
  .acc-list{grid-template-columns:1fr 1fr}
  .acc-btn{gap:14px;padding:16px}
  .acc-inner{padding:0 16px}
  .acc-card.is-open .acc-inner{padding:2px 16px 20px}
}
@media (max-width:560px){
  .acc-list{grid-template-columns:1fr}
  .acc-btn{gap:11px;padding:14px;align-items:flex-start}
  .acc-ico{margin-top:3px}
  .acc-chev{margin-top:2px}
  .acc-cats{font-size:11.5px}
  .acc-offer{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .acc-card,.acc-chev,.acc-panel,.acc-inner{transition:none !important}
}

/* ---------- Site footer ---------- */
.site-footer{margin-top:64px;padding:48px clamp(28px,10vw,150px) 24px;font-size:13px;letter-spacing:.01em;color:var(--body)}
.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:32px 80px}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr;text-align:left;gap:32px}}
.footer-logo{font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink);margin:0}
.footer-logo .dot{color:var(--red-bright)}
.footer-tagline{margin:14px 0 0;max-width:340px;line-height:1.6;color:var(--body)}
.footer-heading{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--ink);margin:0 0 16px}
.site-footer .legal,.footer-contact{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.site-footer .legal a,.footer-contact a{color:var(--body);text-decoration:none;transition:color .18s ease}
.site-footer .legal a:hover,.footer-contact a:hover{color:var(--red-bright)}
.socials{display:flex;gap:12px;margin-top:20px}
.site-footer .socials a{width:32px;height:32px;border-radius:6px;display:inline-grid;place-items:center;background:#1a1b1f;color:#D9D7DE;transition:color .18s ease,background .18s ease,transform .18s var(--easing)}
.site-footer .socials a:hover{background:var(--red-bright);transform:translateY(-1px)}
.site-footer .socials svg{width:14px;height:14px;fill:currentColor;display:block}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:36px;padding-top:22px;border-top:1px solid rgba(15,18,28,.10)}
.footer-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;color:var(--body)}
.footer-badges .fb-strong{font-weight:700;color:var(--ink)}
.footer-bottom .copyright{white-space:nowrap;margin:0;color:var(--body)}
@media (max-width:600px){.footer-bottom{flex-direction:column;align-items:flex-start}}
@keyframes flowPulseX{from{background-position:0% 0}to{background-position:200% 0}}
@keyframes flowPulseY{from{background-position:0 0}to{background-position:0 200%}}
.flow-ico{flex:none;color:var(--red-bright);display:inline-flex;align-items:center;justify-content:center}
/* Sense: pulsing dot */
.ico-sense{position:relative;width:18px;height:18px}
.ico-sense .dot{position:absolute;inset:5px;border-radius:50%;background:var(--red-bright)}
.ico-sense::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--red-bright);animation:senseDot 1.8s ease-out infinite}
@keyframes senseDot{0%{transform:scale(.4);opacity:.55}70%{opacity:0}100%{transform:scale(1.7);opacity:0}}
/* Reason: rippling thinking bars */
.ico-reason{display:inline-flex;align-items:center;gap:2.5px;height:16px}
.ico-reason i{display:block;width:2.5px;height:7px;border-radius:2px;background:var(--red-bright);transform-origin:center;animation:reasonBar 1.05s ease-in-out infinite}
.ico-reason i:nth-child(2){animation-delay:.13s}
.ico-reason i:nth-child(3){animation-delay:.26s}
.ico-reason i:nth-child(4){animation-delay:.39s}
@keyframes reasonBar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.7)}}
/* Act: clicking cursor */
.ico-act{position:relative;width:22px;height:22px}
.ico-act svg{position:absolute;top:2px;left:2px;width:16px;height:16px;animation:actClick 1.9s ease-in-out infinite}
.ico-act .click{position:absolute;top:1px;left:1px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--red-bright);opacity:0;transform-origin:center;animation:actRipple 1.9s ease-out infinite}
@keyframes actClick{0%,66%,100%{transform:translate(0,0)}10%,20%{transform:translate(2px,2px)}}
@keyframes actRipple{0%,10%{transform:scale(.3);opacity:0}22%{opacity:.6}52%{transform:scale(1.9);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ico-sense::before{animation:none;opacity:0}.ico-reason i{animation:none;transform:scaleY(1)}.ico-act svg,.ico-act .click{animation:none}.ico-act .click{opacity:0}}

/* ============================================================
   V2 THEME OVERRIDES  (KIP gradient · white product visuals · glass partner)
   KIP gradient: navy #1E354C (bottom-left) → red #E92226 (top-right)
   ============================================================ */
:root{ --v2-grad:linear-gradient(to top right, #1E354C 0%, #E92226 100%); }

/* --- 1. "Our data" trust banner → KIP gradient, white content --- */
.section.brag-banner{background:var(--v2-grad)}
.brag-banner .trust-line1{color:#fff}
.brag-banner .brag-num{color:#fff}
.brag-banner .brag-lbl{color:rgba(255,255,255,.82)}
.brag-banner .logo-strip .logo-word-tile{color:#fff;opacity:.92}
.brag-banner .logo-strip .logo-word-tile:hover{color:#fff;opacity:1}

/* --- 2. Product cards → KIP gradient, all content white --- */
.domains-body{background:var(--v2-grad);border-color:rgba(255,255,255,.18)}
.domains-body .domains-copy h3{color:#fff}
.domains-body .product-desc{color:rgba(255,255,255,.85)}
.domains-body .product-stats .num{color:#fff}
.domains-body .product-stats .lbl{color:rgba(255,255,255,.78)}
.domains-body .product-qualifier{color:rgba(255,255,255,.7)}
.domains-body .product-tagline{color:#fff}
.domains-body .domains-copy hr{border-top-color:rgba(255,255,255,.35)}
.domains-body .product-modules .badge{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.10)}
.domains-body .product-modules .badge:hover{color:#1E354C;border-color:#fff;background:#fff}

/* --- 3. Partner card → glassmorphism over the KIP gradient, white content --- */
.grad-shell{background:transparent;position:relative;overflow:hidden;border-radius:var(--card-radius)}
.grad-shell .grad-glow{
  position:absolute;inset:-8%;pointer-events:none;z-index:0;
  background:var(--v2-grad);
}
.grad-shell .grad-glass{
  position:relative;z-index:1;
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--card-radius);
}
.grad-shell .h-display{color:#fff}
.grad-shell .h-display .accent-red{color:#fff}
.grad-shell .lede{color:rgba(255,255,255,.88)}
/* CTAs: both glass on the gradient. Primary = frosted white fill; secondary = white outline. */
.grad-shell .btn-filled-red{
  color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 2px 10px rgba(0,0,0,.12),inset 0 1px 1px rgba(255,255,255,.35);
}
.grad-shell .btn-filled-red:hover{
  background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.7);color:#fff;
}
.grad-shell .btn-outline-red{color:#fff;border-color:rgba(255,255,255,.7)}
.grad-shell .btn-outline-red:hover{background:rgba(255,255,255,.28);color:#fff;border-color:rgba(255,255,255,.7)}

/* ---------- Initial loading animation ---------- */
#preloader{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:#F3F2F5;transition:opacity .55s ease,transform .7s cubic-bezier(.66,0,.2,1),filter .55s ease}
#preloader.pl-done{opacity:0;transform:scale(1.06);filter:blur(4px);pointer-events:none}
.pl-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
#plCanvas{width:160px;height:160px;display:block;opacity:0;animation:plFade .6s ease .1s both}
.pl-track{width:150px;height:2px;border-radius:2px;background:rgba(20,22,30,.10);overflow:hidden;opacity:0;animation:plFade .4s ease .35s both}
.pl-fill{display:block;height:100%;width:0;background:var(--red-bright);border-radius:2px;animation:plFill 1.2s cubic-bezier(.5,0,.15,1) .4s both}
.pl-word{font-family:'Montserrat',var(--font);font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--ink);
  opacity:0;animation:plFade .5s ease .5s both}
.pl-word .pl-wdot{color:var(--red-bright)}
@keyframes plFade{to{opacity:1}}
@keyframes plFill{to{width:100%}}
@media (prefers-reduced-motion:reduce){
  #plCanvas,.pl-track,.pl-fill,.pl-word{animation:none;opacity:1}
  .pl-fill{width:100%}
  #preloader{transition:opacity .3s ease}#preloader.pl-done{transform:none;filter:none}
}

/* ---------- Legal & policies modal (footer-triggered, self-contained) ---------- */
.legal-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:6vh 18px;background:rgba(14,15,18,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow-y:auto}
.legal-overlay.open{display:flex}
.legal-modal{position:relative;width:100%;max-width:960px;margin:auto;background:#fff;border-radius:22px;box-shadow:0 40px 120px -24px rgba(0,0,0,.55);overflow:hidden;animation:legalIn .3s var(--easing)}
@keyframes legalIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.legal-modal-top{position:sticky;top:0;z-index:2;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--grey-200)}
.legal-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 26px 12px}
.legal-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8f96;margin:0 0 4px}
.legal-title{font-size:22px;font-weight:500;letter-spacing:-.018em;color:var(--ink);margin:0}
.legal-close{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--grey-200);background:#fff;color:var(--ink);cursor:pointer;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .18s ease,color .18s ease}
.legal-close:hover{border-color:var(--red-bright);color:var(--red-bright)}
.legal-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:0 26px 14px}
.legal-tab{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--body);background:transparent;border:1px solid var(--grey-200);border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.legal-tab:hover{border-color:var(--red-bright);color:var(--red-bright)}
.legal-tab.active{background:var(--red-bright);border-color:var(--red-bright);color:#fff}
.legal-body{padding:24px 30px 38px}
.legal-doc{display:none}
.legal-doc.active{display:block}
.legal-doc .doc-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-family:var(--font-mono);font-size:11px;color:#8a8f96;margin:6px 0 22px}
.legal-doc .doc-meta .v{background:var(--grey-100);color:var(--body);font-weight:700;padding:3px 10px;border-radius:20px}
.legal-doc h2{font-size:28px;font-weight:500;letter-spacing:-.018em;color:var(--ink);margin:0;line-height:1.1}
.legal-doc h3{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:26px 0 10px;padding-left:12px;border-left:3px solid var(--red-bright)}
.legal-doc p{margin:0 0 14px;color:var(--body);font-size:15px;line-height:1.7}
.legal-doc ul{margin:0 0 16px;padding-left:20px}
.legal-doc li{margin:0 0 9px;color:var(--body);font-size:15px;line-height:1.7}
.legal-doc a{color:var(--red-bright);text-decoration:none;font-weight:600}
.legal-doc a:hover{text-decoration:underline}
.legal-doc strong{color:var(--ink)}
.legal-doc .callout{background:var(--grey-100);border-radius:10px;padding:15px 18px;margin:14px 0;font-size:14px;color:var(--body)}
.legal-doc .addr{font-style:normal;line-height:1.7;color:var(--body);font-size:14.5px}
body.legal-open{overflow:hidden}
.legal-head-actions{display:flex;align-items:center;gap:10px;flex:none}
.legal-dl-all,.legal-dl{font-family:'Montserrat',var(--font)}
.legal-dl-all{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--body);background:transparent;border:1px solid var(--grey-200);border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap;transition:border-color .18s ease,color .18s ease}
.legal-dl-all:hover{border-color:var(--red-bright);color:var(--red-bright)}
.legal-dl-wrap{margin-top:34px;padding-top:22px;border-top:1px solid var(--grey-200)}
.legal-dl{font-size:13px;font-weight:600;color:#fff;background:var(--red-bright);border:1px solid var(--red-bright);border-radius:999px;padding:11px 20px;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.legal-dl:hover{background:var(--red-deep);border-color:var(--red-deep)}
@media (prefers-reduced-motion:reduce){.legal-modal{animation:none}}
@media print{
  body.legal-printing>*{display:none !important}
  body.legal-printing #legalOverlay{display:block !important;position:static;inset:auto;padding:0;background:#fff;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.legal-printing .legal-modal{max-width:none;width:100%;margin:0;border-radius:0;box-shadow:none;animation:none}
  body.legal-printing .legal-modal-top{display:none !important}
  body.legal-printing .legal-body{padding:0}
  body.legal-printing .legal-doc{display:none !important}
  body.legal-printing .legal-doc.printing{display:block !important}
  body.legal-printing .legal-doc.printing ~ .legal-doc.printing{page-break-before:always}
  body.legal-printing .legal-dl-wrap{display:none !important}
  body.legal-printing .legal-doc h3{break-after:avoid}
}
@media (max-width:640px){
  .legal-modal-head{padding:16px 18px 10px}
  .legal-tabs{padding:0 18px 12px}
  .legal-body{padding:20px 20px 32px}
}

/* ============================================================
   Blog: The Open Dialogue
   Everything above this point is lifted verbatim from the homepage stylesheet.
   ============================================================ */
/* the cards set their own display, which would outrank the browser's default
   [hidden] rule; the filter and pager rely on this winning */
[hidden]{display:none !important}
.page{padding-top:0}
.blog-head{padding-top:44px}
.blog-head .h-display{margin:0 0 18px}
.blog-head .lede{margin:0;max-width:640px}

.blog-chip{background:transparent}
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.blog-filters .domain-chip{padding:10px 18px;font-size:11px}

.blog-list{padding-top:36px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
@media (max-width:1040px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.blog-grid{grid-template-columns:1fr}}

/* one card shape for the feature and the grid: same border, same hover as the
   module cards elsewhere on the site */
.bc{display:flex;flex-direction:column;gap:0;padding:26px;border-radius:20px;
  border:1px solid var(--grey-200);background:#fff;color:inherit;text-decoration:none;
  transition:transform .3s var(--easing),box-shadow .3s var(--easing),border-color .2s ease}
.bc:hover{transform:translateY(-4px);border-color:rgba(233,34,38,.45);
  box-shadow:0 10px 15px -3px rgba(0,0,0,.10),0 4px 6px 0 rgba(0,0,0,.05)}
.bc:hover .bc-title{color:var(--red-bright)}
.bc:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.bc,.bc:hover{transition:none;transform:none}}
.bc-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.bc-title{margin:0 0 10px;font-family:'Montserrat',var(--font);font-weight:700;font-size:17px;
  line-height:1.3;letter-spacing:-.01em;color:var(--ink);transition:color .2s ease}
.bc-ex{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-meta{margin:auto 0 0;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.11em;color:var(--body)}

.bc--feature{display:grid;grid-template-columns:1.15fr 1fr;gap:0;padding:0;overflow:hidden;
  align-items:stretch}
@media (max-width:900px){.bc--feature{grid-template-columns:1fr}}
.bc--feature .bc-art{display:block;position:relative;min-height:260px;background:var(--grey-100)}
.bc--feature .bc-body{display:flex;flex-direction:column;padding:34px}
.bc--feature .bc-title{font-size:clamp(20px,2.4vw,27px);font-weight:500;letter-spacing:-.018em}
.bc--feature .bc-ex{-webkit-line-clamp:3;font-size:14.5px}

/* the seeded lattice: the hero's node motif, held still, in greys and one soft red */
.bv{display:block;width:100%;height:100%;position:absolute;inset:0}
.bv--band{position:relative;width:100%;aspect-ratio:640/152;max-height:200px;
  border-radius:20px;background:var(--grey-100)}
.bv-edges{stroke:var(--grey-300);stroke-width:1.1;fill:none}
.bv-dots{fill:var(--grey-300)}
.bv-dots .bv-live{fill:var(--red-bright)}
/* the model below is the same plane, held back so the physical one reads first */
.bv-plane.bv-twin{opacity:.55}
.bv-plane.bv-twin .bv-edges{stroke-dasharray:4 4}
.bv-ties{stroke:var(--red-bright);stroke-width:1;stroke-dasharray:3 5;opacity:.6}

.blog-empty{margin:28px 0 0;font-size:14px;color:var(--body)}
.blog-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:36px;flex-wrap:wrap}
.blog-pager[hidden]{display:none}
.blog-pager .pg{min-width:36px;height:36px;padding:0 12px;border-radius:var(--pill-radius);border:1px solid var(--grey-300);
  background:transparent;font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .18s ease,color .18s ease,background .18s ease}
.blog-pager .pg:hover{border-color:var(--red-bright);color:var(--red-bright)}
.blog-pager .pg.active{background:var(--red-bright);border-color:var(--red-bright);color:#fff}
.blog-pager .pg:disabled{opacity:.32;cursor:default;border-color:var(--grey-300);color:var(--ink)}
.blog-pager .pg svg{width:16px;height:16px}
.blog-pager .pg-gap{color:var(--body);font-size:12px;padding:0 2px}
.post-back{display:inline-block;margin:0 0 22px;font-size:13px;font-weight:700;color:var(--red-bright);
  text-decoration:none}
.post-back:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- article ---------- */
.post{padding-top:40px}
.post-head{max-width:68ch}
.post-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.post-title{margin:0 0 14px;font-size:clamp(26px,3.4vw,42px)}
.post-byline{margin:0;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.11em;color:var(--body)}
.post-band{margin:30px 0 36px;border-radius:20px;overflow:hidden}
.post-body{max-width:68ch}
.post-body p{margin:0 0 18px;font-size:15.5px;line-height:1.75;color:var(--body)}
.post-body h2{margin:36px 0 14px;font-family:'Montserrat',var(--font);font-weight:700;
  font-size:19px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.post-body strong{font-weight:700;color:var(--ink)}
.post-body a{color:var(--red-bright);text-decoration:underline;text-underline-offset:3px}
.post-body a:hover{color:var(--red-deep)}
.post-list{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.post-list li{position:relative;padding-left:17px;font-size:15px;line-height:1.7;color:var(--body)}
.post-list li:before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;
  border-radius:50%;background:var(--red-bright)}
.post-body blockquote{margin:0 0 18px;padding:2px 0 2px 20px;border-left:2px solid var(--red-bright);
  font-size:16px;line-height:1.7;color:var(--ink)}
.post-body figure{margin:0 0 22px}
.post-body img{width:100%;border-radius:16px}
.post-body figcaption{margin-top:9px;font-size:12.5px;color:var(--body)}
.post-video{position:relative;margin:0 0 22px;padding-top:56.25%;border-radius:16px;overflow:hidden;
  background:var(--grey-100)}
.post-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.post-embed{padding:14px 18px;border:1px solid var(--grey-200);border-radius:14px;font-size:14px;color:var(--body)}
.post-embed a{margin-left:6px}

.blog-more{padding-top:12px}
.blog-more-head{margin:0;font-family:'Montserrat',var(--font);font-size:15px;font-weight:700;
  letter-spacing:.01em;color:var(--ink)}
.blog-cta-band .h-display{margin:0 0 16px}
.blog-cta-band .lede{margin:0;max-width:560px}
.blog-cta-band .cta-band{margin-top:28px}

/* the blog link is the one nav item that is a page rather than an anchor */
.nav-link.nav-blog-link.active{color:var(--red-bright)}
.nav-link.nav-blog-link.active::after{transform:scaleX(1)}

/* ============================================================
   Mobile review (21 Oct 2026, revised): every item below is <=700px only
   ============================================================ */
@media (max-width:700px){
  /* 1. 16px from every card to the screen edge; internal card padding unchanged */
  .page{padding:0 16px 48px}
  .section{margin-top:12px}
  /* 2. the cube: no touch, and shown whole down to the card's bottom edge */
  .hero{padding-bottom:0}
  .lattice-wrap{margin-top:16px;margin-bottom:0}
  .hero-viz-box{height:auto;aspect-ratio:660/520;width:118%;overflow:visible}
  /* 3. tighter logo strip */
  .logo-strip-track{gap:28px;padding-right:28px}
  /* 4. products: the two product tabs only */
  .domain-chip[data-target="modules"],.domain-chip[data-target="partner"],
  #domain-tab-modules,#domain-tab-partner{display:none !important}
  .domain-chips{justify-content:flex-start}
  /* 5. the gradient card runs edge to edge of the white container */
  .domains-body{margin-left:calc(-1 * clamp(28px,10vw,150px));margin-right:calc(-1 * clamp(28px,10vw,150px));
    min-height:0}
  /* 6. case study cards and the testimonial run edge to edge of the gradient section */
  .cs-grid{max-width:none;margin-left:calc(-1 * clamp(28px,10vw,150px));margin-right:calc(-1 * clamp(28px,10vw,150px))}
  .proof-testimonial{margin-left:calc(-1 * clamp(28px,10vw,150px));margin-right:calc(-1 * clamp(28px,10vw,150px))}
  /* 7. the story rail starts flush left and bleeds off the right edge */
  .cs-more{margin-left:calc(-1 * clamp(28px,10vw,150px));margin-right:calc(-1 * clamp(28px,10vw,150px))}
  .cs-more-bar{padding:0 clamp(28px,10vw,150px)}
  .cs-rail{padding:2px 0 6px}
  /* 8. vacancies: everything centred */
  .careers-band{text-align:center}
  .careers-band .lede{margin-left:auto;margin-right:auto}
  .careers-band .cta-band{justify-content:center}
  .careers-art{margin-left:auto;margin-right:auto}
  /* 9. contact: the select's long option text was forcing the grid column past
     the container (300px in a 268px column), which read as a wider right gutter;
     minmax(0,1fr) lets the column shrink to the container */
  .contact-grid{gap:28px;grid-template-columns:minmax(0,1fr)}
  .cf-row{grid-template-columns:minmax(0,1fr)}
  .contact-form{max-width:none;width:100%;min-width:0}
  .cf-field{min-width:0}
  .cf-field input,.cf-field select,.cf-field textarea{width:100%;min-width:0;max-width:100%}
}
/* 2. touch: applies wherever the hero is stacked, phones and tablets */
@media (max-width:1040px){
  .hero-viz-box .viz-frame iframe{pointer-events:none}
}


/* ---------- Custom dropdown (phones): the site's pill, a branded option list ---------- */
.dd{position:relative;display:none;width:100%;margin:0 0 22px}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:13px 18px 13px 22px;border-radius:var(--pill-radius);border:1px solid var(--red-bright);
  background:#fff;color:var(--red-bright);font:inherit;font-size:12px;font-weight:500;letter-spacing:.14em;
  text-align:left;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.dd-btn:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}
.dd.open .dd-btn{background:var(--red-bright);color:#fff;box-shadow:0 2px 10px rgba(233,34,38,.2)}
.dd-chev{width:16px;height:16px;flex:none;transition:transform .22s var(--easing)}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--grey-200);border-radius:18px;
  box-shadow:0 14px 40px -16px rgba(20,22,30,.28);display:none}
.dd.open .dd-list{display:block}
.dd-opt{padding:12px 16px;border-radius:12px;font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--ink);
  cursor:pointer;transition:background .15s ease,color .15s ease}
.dd-opt:hover,.dd-opt:focus{background:var(--grey-100);color:var(--red-bright);outline:none}
.dd-opt.is-sel{background:var(--red-bright);color:#fff}
@media (prefers-reduced-motion:reduce){.dd-chev,.dd-btn,.dd-opt{transition:none}}
/* 12. blog: one dropdown replaces the chip row on phones */
@media (max-width:700px){
  .blog-filters{display:none}
  .dd.blog-dd{display:block}
}