/* =========================================================================
   Stedion - shared stylesheet
   Design system + home-page sections. Linked from every page.
   ========================================================================= */

:root{
  --cream:#FAF5E4;
  --cream-2:#F4EDD6;
  --ink:#16242F;
  --ink-soft:#2b3a45;
  --lime:#D4F23A;
  --lime-deep:#bcd92a;
  --magenta:#F25CC1;
  --cyan:#37C7F0;
  --green:#3AD982;
  --card:#FFFFFF;
  /* service-band tints (sampled from reference screenshots) */
  --tint-design:#F4D9F1;
  --tint-build:#A9E8C1;
  --tint-manage:#A9E8F1;
  --display:"Plus Jakarta Sans",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);
  font-family:var(--display);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:18px;border:none;border-radius:14px;
  padding:16px 30px;cursor:pointer;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--lime-deep)}
.btn--dark{background:var(--ink);color:var(--cream)}
.btn--dark:hover{box-shadow:6px 6px 0 var(--ink-soft)}
.btn .arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- eyebrow / pill ---------- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.pill{display:inline-block;background:#fff;border-radius:999px;padding:10px 20px;
  font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);line-height:1;
  box-shadow:0 2px 0 rgba(22,36,47,.08)}
.pill em{font-style:italic;font-weight:600}

/* ---------- nav ---------- */
.site-nav{position:sticky;top:0;z-index:40;background:transparent;
  transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease}
.site-nav.scrolled{background:rgba(250,245,228,.85);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(22,36,47,.08)}
nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0 18px}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.brand .logo{height:26px;width:auto;display:block}
.navlinks{display:flex;align-items:center;gap:28px;font-weight:600;font-size:15px}
.navlinks > a{text-decoration:none;opacity:.85;transition:opacity .15s ease}
.navlinks > a:hover{opacity:.55}
.navlinks .btn{font-size:15px;padding:11px 22px;opacity:1}

/* services dropdown */
.dropdown{position:relative}
.dropdown > button{font:inherit;font-weight:600;font-size:15px;background:none;border:none;
  cursor:pointer;color:inherit;opacity:.85;display:inline-flex;align-items:center;gap:5px;padding:0}
.dropdown > button:hover{opacity:.55}
.dropdown > button .caret{transition:transform .2s ease;font-size:11px}
.dropdown.open > button .caret{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border:2px solid var(--ink);border-radius:16px;padding:8px;min-width:210px;
  box-shadow:8px 8px 0 rgba(22,36,47,.12);opacity:0;visibility:hidden;
  transition:opacity .18s ease, transform .18s ease;z-index:50}
.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* invisible bridge spanning the 12px gap, so moving the cursor from the trigger
   to the menu never leaves the .dropdown hover area (prevents the menu closing) */
.dropdown-menu::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.dropdown-menu a{display:block;text-decoration:none;padding:10px 14px;border-radius:10px;
  font-weight:600;font-size:15px;transition:background .12s ease}
.dropdown-menu a:hover{background:var(--cream-2)}
.dropdown-menu a .sub{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:12.5px;opacity:.6;margin-top:1px}

.navtoggle{display:none;background:none;border:none;cursor:pointer;font-size:24px;color:var(--ink)}
@media(max-width:860px){
  .navlinks{display:none}
  .navtoggle{display:block}
  .navlinks.mobile-open{display:flex;position:absolute;top:72px;right:clamp(20px,4vw,56px);
    flex-direction:column;align-items:flex-start;gap:16px;background:#fff;border:2px solid var(--ink);
    border-radius:18px;padding:22px 26px;box-shadow:8px 8px 0 rgba(22,36,47,.12)}
  /* mobile: Services submenu expands inline (accordion), not a second floating card */
  .dropdown{width:100%}
  .dropdown-menu{position:static;transform:none;left:auto;top:auto;min-width:0;width:100%;
    background:transparent;border:none;box-shadow:none;padding:8px 0 0;
    opacity:1;visibility:visible;display:none}
  .dropdown.open .dropdown-menu{display:block;transform:none}
  .dropdown-menu::before{display:none}
  .dropdown-menu a{padding:8px 0 8px 14px;border-radius:0;border-left:2px solid rgba(22,36,47,.14)}
  .dropdown-menu a:hover{background:transparent}
  [data-theme="dark"] .dropdown-menu{background:transparent;border:none;box-shadow:none}
  [data-theme="dark"] .dropdown-menu a{border-left-color:rgba(255,255,255,.16)}
  [data-theme="dark"] .dropdown-menu a:hover{background:transparent}
}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:30px 0 40px}
@media(max-width:980px){.hero{grid-template-columns:1fr;gap:26px}}
h1{font-family:var(--display);font-weight:800;line-height:.97;letter-spacing:-.035em;
  font-size:clamp(44px,7.2vw,88px);margin:0 0 26px}
.lede{font-family:var(--serif);font-size:clamp(19px,2.1vw,27px);line-height:1.42;max-width:30ch;
  margin:0 0 30px;color:var(--ink-soft)}
.lede em{font-style:italic;font-weight:500}
.lede u{text-decoration-thickness:1.5px;text-underline-offset:4px}
.lede u[data-tile]{cursor:pointer;transition:color .15s ease}
.lede u[data-tile]:hover{color:var(--ink)}
/* Single-column hero: widen the lede so it's proportional to the full-width h1 (placed after the base .lede rule so it wins) */
@media(max-width:980px){.lede{max-width:60ch}}

/* ---------- What's New (wraps the featured experience tiles) ---------- */
.whatsnew{display:flex;flex-direction:column}
.wn-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.wn-title{font-weight:800;font-size:22px;letter-spacing:-.02em;white-space:nowrap}
.wn-rule{flex:1;height:2px;background:var(--ink);opacity:.12;border-radius:2px}
.wn-more{align-self:flex-end;margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:15px;text-decoration:none;color:var(--ink);transition:opacity .15s ease}
.wn-more:hover{opacity:.6}
.wn-more .arrow{transition:transform .18s ease}
.wn-more:hover .arrow{transform:translateX(5px)}

/* ---------- experience tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:520px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:22px;
  overflow:hidden;cursor:pointer;min-height:178px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.tile:hover,.tile.is-hovered{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--ink)}
.tile .eyebrow{opacity:.55}
.tile h3{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.02em;margin:6px 0 0;line-height:1.05}
.tile p{font-size:13.5px;line-height:1.4;margin:8px 0 0;color:var(--ink-soft);opacity:.9}
.tile .cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-top:14px;text-decoration:none}
.tile .cta .arrow{transition:transform .18s ease}
.tile:hover .cta .arrow,.tile.is-hovered .cta .arrow{transform:translateX(5px)}
.tile .badge{position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px}

.tile--online{grid-column:1 / -1}
.tile--online{background:linear-gradient(120deg,#0c2a33 0%, #133b46 60%, #0a242c 100%);border-color:var(--ink);color:#eafcff}
.tile--online .eyebrow{color:var(--cyan);opacity:.95}
.tile--online p{color:#bfe9f2;opacity:.95}
.tile--online .badge{background:rgba(10,24,30,.5);color:#dff4fa;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);z-index:3}
.tile--online:hover,.tile--online.is-hovered{box-shadow:10px 10px 0 var(--lime)}
.tile--online .cta{color:var(--lime)}
.tile--online .deco-game{position:absolute;right:0;bottom:0;width:min(380px,48%);height:190px;opacity:.95;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 40%);mask-image:linear-gradient(to right,transparent,#000 40%)}

.tile--store .badge{background:var(--magenta);color:#fff}
.tile--store{position:relative;padding:0;color:#fff;border-color:var(--ink);justify-content:flex-end;min-height:360px}
.tile--store:hover,.tile--store.is-hovered{box-shadow:10px 10px 0 var(--magenta)}
.ar-media{position:absolute;inset:0;overflow:hidden;background:#16242F}
.ar-media video{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;
  filter:brightness(.5) saturate(.82);transition:transform .5s ease, filter .45s ease}
.tile--store:hover .ar-media video,.tile--store.is-hovered .ar-media video{transform:scale(1.05);filter:brightness(1) saturate(1.05)}
.ar-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,18,24,.92) 0%,rgba(10,18,24,.5) 42%,rgba(10,18,24,.05) 72%)}
.ar-label{position:relative;z-index:2;padding:22px}
.tile--store .eyebrow{color:#ffc4ee;opacity:.95}
.tile--store h3{color:#fff;margin-top:5px}
.ar-tease{margin:9px 0 0;font-family:var(--serif);font-style:italic;font-size:13px;color:#e7eef2;opacity:.92;letter-spacing:.04em}
.tile--store .cta{color:#fff;margin-top:13px}
.ar-hint{position:absolute;top:16px;left:16px;z-index:3;white-space:nowrap;
  background:rgba(10,18,24,.55);color:#fff;font-size:10px;font-weight:700;letter-spacing:.05em;
  padding:4px 9px;border-radius:99px;pointer-events:none;transition:opacity .2s ease;backdrop-filter:blur(2px)}
.tile--store:hover .ar-hint,.tile--store.is-hovered .ar-hint{opacity:0}

/* Everywhere - omnichannel wallet demo */
.tile--every{background:#10333f;border-color:var(--ink);color:#eafcff}
.tile--every .badge{background:var(--lime);color:#0a242c}
.tile--every .eyebrow{color:var(--lime);opacity:.95}
.tile--every p{color:#bfe9f2;opacity:.95}
.tile--every:hover,.tile--every.is-hovered{box-shadow:10px 10px 0 var(--green)}
.tile--every .cta{color:var(--lime)}
/* digital-persona visual: wireframe head + muted synaptic spark canvas */
.persona{position:absolute;inset:0;z-index:0;pointer-events:none}
.persona-head{position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:auto;height:auto;max-height:112%;max-width:114%;opacity:.62}
.persona-fx{position:absolute;inset:0;width:100%;height:100%}
.tile--every>div:not(.persona),.tile--every>.cta{position:relative;z-index:2}
.tile--every .badge{z-index:2}


/* ---------- service bands ---------- */
.band{border-radius:32px;padding:clamp(28px,4.2vw,56px);margin:20px 0;
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:900px){.band{grid-template-columns:1fr;gap:30px}}
.band--design{background:var(--tint-design);transition:background .45s ease}
/* the Design band's accent follows the selected program goal */
.band--design[data-goal="simplicity"]{background:#F2E8F2}
.band--design[data-goal="recognition"]{background:#F9D8EC}
.band--design[data-goal="exclusivity"]{background:#E4D2EA}
.band--build{background:var(--tint-build)}
.band--manage{background:var(--tint-manage)}
.band h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,56px);
  letter-spacing:-.03em;margin:0 0 22px;line-height:1}
.band .pill{margin:0 0 22px}
.band .body{font-size:clamp(15px,1.15vw,16.5px);line-height:1.58;max-width:48ch;margin:0 0 28px;color:var(--ink)}
.band .stage{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}

/* Design demo - goal-driven program designer (tier benefits chart) */
.designer{width:100%;max-width:440px}
/* reserve the 3-tier height so switching goals doesn't resize the section */
#tierchartHost{min-height:388px}
.goalpick{margin-bottom:16px}
.goallabel{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:9px}
.goalseg{display:flex;width:100%;gap:7px}
.goalseg button{flex:1;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:12px;
  padding:9px 6px;font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .1s ease,box-shadow .15s ease}
.goalseg button:hover{transform:translateY(-1px)}
.goalseg button.active{background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--magenta)}
/* Active goal button: shadow tracks the same per-goal accent as the tier-chart shadow (recognition keeps the default magenta) */
.designer.g-simplicity .goalseg button.active{box-shadow:3px 3px 0 rgba(22,36,47,.18)}
.designer.g-exclusivity .goalseg button.active{box-shadow:3px 3px 0 #c9a24a}

.tierchart{border:2px solid var(--ink);border-radius:20px;overflow:hidden;
  box-shadow:10px 10px 0 var(--magenta);animation:tcfade .35s ease}
@keyframes tcfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tc-head{padding:13px 16px;font-weight:800;font-size:14px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:2px solid var(--ink)}
.tc-tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;background:var(--ink);color:#fff}
.tier{padding:12px 16px;border-bottom:1px solid rgba(22,36,47,.12)}
.tier:last-child{border-bottom:none}
.tier-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.tier-name{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px}
.tier-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.tier-th{font-size:10.5px;font-weight:700;opacity:.6;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.tier-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.tier-benefits li{font-size:12.5px;line-height:1.35;padding-left:16px;position:relative;color:var(--ink-soft)}
.tier-benefits li::before{content:'';position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:var(--magenta)}
.goalnote{margin-top:13px;font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-soft);line-height:1.45}

/* goal: Simplicity - clean & minimal */
.designer.g-simplicity .tierchart{background:#fff;box-shadow:8px 8px 0 rgba(22,36,47,.16)}
.designer.g-simplicity .tier-benefits li::before{background:var(--ink)}
/* Simplicity has fewer tiers: stretch the chart to match the taller charts and fill the gap with an intentional "by design" placeholder */
.designer.g-simplicity #tierchartHost{display:flex}
.designer.g-simplicity .tierchart{flex:1;display:flex;flex-direction:column}
.tier-filler{flex:1;min-height:62px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;background:rgba(22,36,47,.045)}
.tier-filler span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);opacity:.75}

/* goal: Recognition - warm, status tiers */
.designer.g-recognition .tierchart{background:#fff;box-shadow:10px 10px 0 var(--magenta)}
.designer.g-recognition .tc-head{background:linear-gradient(90deg,#fbe6f6,#fff)}
.designer.g-recognition .tc-tag{background:var(--magenta)}
.designer.g-recognition .tier-benefits li::before{background:var(--magenta)}

/* goal: Exclusivity - dark, premium, serif */
.designer.g-exclusivity .tierchart{background:#1b1430;border-color:#1b1430;color:#f3ecd9;box-shadow:10px 10px 0 #c9a24a}
.designer.g-exclusivity .tc-head{background:#241a3d;border-bottom-color:rgba(255,255,255,.14);color:#f3ecd9}
.designer.g-exclusivity .tc-tag{background:#c9a24a;color:#1b1430}
.designer.g-exclusivity .tier{border-bottom-color:rgba(255,255,255,.1)}
.designer.g-exclusivity .tier-name{font-family:var(--serif);font-weight:600}
.designer.g-exclusivity .tier-th{color:#c9a24a;opacity:1}
.designer.g-exclusivity .tier-benefits li{color:#d8d0e2}
.designer.g-exclusivity .tier-benefits li::before{background:#c9a24a}

/* Build demo - integration diagram */
.diagram{width:100%;max-width:480px}
.diagram svg{width:100%;height:auto;display:block}
.diagram .node-box{fill:#fff;stroke:var(--ink);stroke-width:2}
.diagram .node-hub{fill:var(--ink)}
.diagram .nlabel{font-family:var(--display);font-weight:700;font-size:12px;fill:var(--ink)}
.diagram .nlabel-l{fill:#eafcff}
.diagram .nsub{font-family:var(--serif);font-style:italic;font-size:9.5px;fill:var(--ink-soft)}
.diagram .link{fill:none;stroke:#1d6b43;stroke-width:2;stroke-dasharray:6 6;opacity:.5}
.diagram .flow{fill:var(--green);opacity:0;filter:drop-shadow(0 0 4px rgba(58,217,130,.7))}

/* Manage demo - live dashboard */
.dash{width:100%;max-width:460px;background:#fff;border:2px solid var(--ink);border-radius:20px;
  padding:18px;box-shadow:10px 10px 0 var(--cyan);position:relative}
.dash .dbar{display:flex;gap:7px;align-items:center;margin-bottom:14px}
.dash .dbar i{width:11px;height:11px;border-radius:50%;background:var(--cyan);display:inline-block}
.dash .dbar i:nth-child(2){background:var(--green)}
.dash .dbar i:nth-child(3){background:var(--magenta)}
.dash .dbar span{margin-left:6px;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.kpi{background:var(--cream);border-radius:12px;padding:10px 11px}
.kpi .v{font-weight:800;font-size:19px;letter-spacing:-.02em}
.kpi .l{font-size:10px;letter-spacing:.05em;text-transform:uppercase;opacity:.55;font-weight:700;margin-top:1px}
.dchart{background:#0c2a33;border-radius:12px;padding:12px;position:relative}
.dchart svg{width:100%;height:84px;display:block;overflow:visible}
.dchart .gline{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dchart .gdot{fill:#fff;stroke:var(--cyan);stroke-width:2}
.dchart .garea{fill:url(#dashgrad)}
.dalert{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:9px;
  background:#2a1622;border:1px solid var(--magenta);color:#ffd9f1;border-radius:11px;padding:9px 12px;
  font-size:12px;font-weight:600;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.dalert.show{opacity:1;transform:translateY(0)}
.dalert.resolved{background:#10332a;border-color:var(--green);color:#c8f7df}
.dalert .dico{font-size:14px}

/* ---------- social proof ---------- */
.proof{padding:46px 0 10px;text-align:center}
.proof .eyebrowline{font-family:var(--serif);font-size:clamp(20px,2.6vw,30px);max-width:24ch;
  margin:0 auto 30px;line-height:1.25}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,5vw,64px);margin:0 0 34px}
.stat .num{font-weight:800;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em}
.stat .num.lime{color:var(--lime-deep)}
.stat .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;font-weight:700;margin-top:2px}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(40px,7vw,96px);width:max-content;
  animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:38px;width:auto;object-fit:contain;filter:grayscale(1) opacity(.55);
  transition:filter .3s ease}
.marquee-track a:hover img{filter:grayscale(0) opacity(1)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- walkthrough CTA ---------- */
.cta-band{text-align:center;padding:60px 0 70px}
.cta-band h2{font-family:var(--display);font-weight:800;font-size:clamp(40px,6.4vw,84px);
  letter-spacing:-.035em;line-height:1.02;margin:0 0 22px;max-width:14ch;margin-left:auto;margin-right:auto}
.cta-band p{font-family:var(--serif);font-size:clamp(16px,1.7vw,20px);max-width:34ch;
  margin:0 auto 28px;color:var(--ink-soft);line-height:1.45}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--cream);margin-top:30px;overflow:hidden}
.site-footer .ftop{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;padding:56px 0 30px}
.fcols{display:flex;flex-wrap:wrap;gap:clamp(40px,7vw,96px)}
.fcol h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin:0 0 14px;font-weight:700}
.fcol a{display:block;text-decoration:none;font-weight:600;font-size:16px;margin-bottom:10px;opacity:.9;
  transition:opacity .15s ease, color .15s ease}
.fcol a:hover{opacity:1;color:var(--lime)}
.fwordmark{color:var(--cream);padding:14px 0 22px;line-height:0}
.fwordmark svg{display:block;width:100%;height:auto}
.site-footer .fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:0 0 26px;font-size:13px;opacity:.5}

/* ============ game modal (Stingray) ============ */
.overlay{position:fixed;inset:0;background:rgba(10,18,24,.78);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;z-index:60;padding:18px}
.overlay.open{display:flex}
.gamebox{width:min(580px,96vw);background:#0a242c;border:2px solid var(--lime);border-radius:20px;
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative}
.gamebar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#0c2a33;color:#eafcff;
  font-weight:700;font-size:14px;letter-spacing:.04em}
.gamebar .x{cursor:pointer;background:none;border:none;color:#eafcff;font-size:20px;line-height:1;padding:2px 6px;border-radius:8px}
.gamebar .x:hover{background:rgba(255,255,255,.12)}
.hud{display:flex;gap:16px;align-items:center}
.hud .pts{color:var(--lime)}
.hud .lives{color:var(--magenta);letter-spacing:2px}
#gameCanvas{display:block;width:100%;background:#0d2730;touch-action:none}
.loyalty{background:#0c2a33;padding:11px 14px 13px;border-top:1px solid rgba(255,255,255,.06)}
.badgewrap{margin-bottom:11px}
.badgetext{color:#cfeefa;font-size:12.5px;font-family:var(--serif);font-style:italic;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.badgetext b{font-style:normal;color:var(--lime);font-family:var(--display)}
.badgebar{height:7px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.badgefill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--lime));transition:width .25s ease}
.pillrow{display:flex;gap:6px;margin-bottom:11px;flex-wrap:wrap}
.earned{font-size:11px;font-weight:700;color:#0a242c;background:var(--lime);padding:3px 8px;border-radius:99px}
.powerups{display:flex;gap:7px;flex-wrap:wrap}
.pu{flex:1 1 0;min-width:118px;background:#123b47;border:1px solid rgba(255,255,255,.14);color:#eafcff;
  border-radius:11px;padding:8px 9px;cursor:pointer;font-family:var(--display);text-align:left;
  display:flex;flex-direction:column;gap:2px;transition:transform .1s ease, background .15s ease, border-color .15s ease}
.pu:hover:not(:disabled){transform:translateY(-2px);border-color:var(--cyan)}
.pu:disabled{opacity:.38;cursor:not-allowed}
.pu.active{background:#1d5c4a;border-color:var(--green)}
.pu .lbl{font-weight:700;font-size:13px}
.pu .cost{font-size:11px;color:var(--cyan)}
.pu.active .cost{color:var(--green)}
.gamefoot{padding:9px 16px;color:#9fd4df;font-size:11.5px;background:#0a242c;text-align:center;font-family:var(--serif);font-style:italic}
.toast{position:absolute;left:50%;top:54px;transform:translateX(-50%) translateY(-12px);
  background:var(--lime);color:#0a242c;font-weight:700;font-size:13px;padding:9px 16px;border-radius:99px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:5;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.warn{background:var(--magenta);color:#fff}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
}

/* ============================================================
   DARK MODE
   Theme is set on <html data-theme="dark"> (pre-paint by an inline
   <head> script). Brand accents (lime/magenta/cyan/green) are kept;
   neutral surfaces and text are flipped, section by section.
   ============================================================ */

/* theme toggle button */
.themetoggle{background:none;border:none;cursor:pointer;color:inherit;padding:6px;
  display:inline-grid;place-items:center;border-radius:9px;line-height:0;opacity:.85}
.themetoggle:hover{opacity:1;background:rgba(22,36,47,.08)}
.themetoggle svg{width:20px;height:20px;display:block}
.themetoggle .ico-sun{display:none}
[data-theme="dark"] .themetoggle .ico-moon{display:none}
[data-theme="dark"] .themetoggle .ico-sun{display:block}
[data-theme="dark"] .themetoggle:hover{background:rgba(255,255,255,.1)}

[data-theme="dark"] html,[data-theme="dark"] body{background:#0E1A24;color:#E9EFF0}

/* nav */
[data-theme="dark"] .site-nav.scrolled{background:rgba(14,26,36,.85);box-shadow:0 1px 0 rgba(255,255,255,.07)}
[data-theme="dark"] .brand{color:#E9EFF0}
[data-theme="dark"] .navlinks>a:not(.btn){color:#E9EFF0}
[data-theme="dark"] .dropdown>button{color:#E9EFF0}
[data-theme="dark"] .dropdown-menu{background:#16242F;border-color:#3A4A55;box-shadow:8px 8px 0 rgba(0,0,0,.45)}
[data-theme="dark"] .dropdown-menu a{color:#E9EFF0}
[data-theme="dark"] .dropdown-menu a:hover{background:#1F2F3A}
[data-theme="dark"] .dropdown-menu a .sub{color:#9FB0B8}
[data-theme="dark"] .navtoggle{color:#E9EFF0}
[data-theme="dark"] .navlinks.mobile-open{background:#16242F;border-color:#3A4A55;box-shadow:8px 8px 0 rgba(0,0,0,.45)}

/* hero + generic text */
[data-theme="dark"] .lede{color:#AEBDC5}
[data-theme="dark"] .btn--dark{background:#E9EFF0;color:#16242F}
[data-theme="dark"] .btn--dark:hover{box-shadow:6px 6px 0 rgba(233,239,240,.3)}

/* What's New */
[data-theme="dark"] .wn-rule{background:#E9EFF0;opacity:.16}
[data-theme="dark"] .wn-more{color:#E9EFF0}

/* pill (sits on the service bands) */
[data-theme="dark"] .pill{color:#16242F}

/* service bands -> dark, accent-tinted */
[data-theme="dark"] .band--design{background:#241A2A}
[data-theme="dark"] .band--design[data-goal="simplicity"]{background:#211C28}
[data-theme="dark"] .band--design[data-goal="recognition"]{background:#2A1B27}
[data-theme="dark"] .band--design[data-goal="exclusivity"]{background:#231A2E}
[data-theme="dark"] .band--build{background:#102A1E}
[data-theme="dark"] .band--manage{background:#0F2730}
[data-theme="dark"] .band .body{color:#C4CFD5}

/* Design goal picker + chart */
[data-theme="dark"] .goallabel{color:#C9D4DA}
[data-theme="dark"] .goalseg button{background:#16242F;border-color:#3A4A55;color:#E9EFF0}
[data-theme="dark"] .goalseg button.active{background:#E9EFF0;color:#16242F;box-shadow:3px 3px 0 var(--magenta)}
[data-theme="dark"] .designer.g-simplicity .goalseg button.active{box-shadow:3px 3px 0 rgba(0,0,0,.35)}
[data-theme="dark"] .designer.g-exclusivity .goalseg button.active{box-shadow:3px 3px 0 #c9a24a}
[data-theme="dark"] .tierchart{border-color:#3A4A55}
[data-theme="dark"] .tc-head{border-bottom-color:#3A4A55}
[data-theme="dark"] .tc-tag{background:#E9EFF0;color:#16242F}
[data-theme="dark"] .tier{border-bottom-color:rgba(255,255,255,.1)}
[data-theme="dark"] .tier-benefits li{color:#B9C6CD}
[data-theme="dark"] .goalnote{color:#AEBDC5}
[data-theme="dark"] .designer.g-simplicity .tierchart,
[data-theme="dark"] .designer.g-recognition .tierchart{background:#16242F;color:#E9EFF0;box-shadow:8px 8px 0 rgba(0,0,0,.35)}
[data-theme="dark"] .designer.g-recognition .tierchart{box-shadow:10px 10px 0 var(--magenta)}
[data-theme="dark"] .designer.g-recognition .tc-head{background:linear-gradient(90deg,#3a2233,#16242F)}
[data-theme="dark"] .designer.g-simplicity .tier-benefits li::before{background:#E9EFF0}
[data-theme="dark"] .tier-filler{background:rgba(255,255,255,.045)}
[data-theme="dark"] .tier-filler span{color:#B9C6CD}

/* Manage dashboard */
[data-theme="dark"] .dash{background:#16242F;border-color:#3A4A55;color:#E9EFF0}
[data-theme="dark"] .kpi{background:#0E1A24}
[data-theme="dark"] .dbar span{color:#AEBDC5}

/* Build integration diagram - lighten for the dark band */
[data-theme="dark"] .diagram .node-hub{fill:#3AD982}
[data-theme="dark"] .diagram .nlabel-l{fill:#0E1A24}
[data-theme="dark"] .diagram .link{stroke:#56C98C;opacity:.7}
[data-theme="dark"] .diagram .flow{fill:#EAFFF4}

/* social proof + CTA */
[data-theme="dark"] .marquee-track img{filter:grayscale(1) invert(1) opacity(.55)}
[data-theme="dark"] .marquee-track a:hover img{filter:grayscale(1) invert(1) opacity(1)}
[data-theme="dark"] .cta-band p{color:#AEBDC5}

/* ============================================================
   SERVICES OVERVIEW PAGE
   ============================================================ */
.svc-hero{padding:26px 0 12px}
.svc-hero-copy{max-width:780px}
.svc-hero .lede{max-width:62ch}
.svc-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}

/* operating-model track */
.opmodel{margin-top:40px;border:2px solid var(--ink);border-radius:24px;
  padding:clamp(18px,3vw,30px);background:var(--card)}
.opm-phases{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.opm-phase{display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-align:left;
  border:2px solid var(--ink);border-radius:14px;padding:13px 14px;background:var(--cream);
  cursor:pointer;font:inherit;color:var(--ink);
  transition:transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease}
.opm-num{font-size:11px;font-weight:700;letter-spacing:.1em;opacity:.45}
.opm-name{font-weight:800;font-size:clamp(12.5px,1.05vw,15.5px);letter-spacing:-.01em;line-height:1.1}
.opm-phase:hover{transform:translateY(-2px)}
.opm-phase.is-active{background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--lime)}
.opm-phase.is-active .opm-num{opacity:.7}
.opm-bars{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.opm-bar{border-radius:11px;padding:9px 14px;font-weight:800;font-size:13px;letter-spacing:-.01em;
  display:flex;align-items:center;border:2px solid var(--ink);color:var(--ink);opacity:.45;
  transition:opacity .25s ease}
.opm-bar.is-active{opacity:1}
.opm-bar--design{background:var(--tint-design)}
.opm-bar--build{background:var(--tint-build)}
.opm-bar--manage{background:var(--tint-manage)}
.opm-detail{margin:16px 0 0;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft)}
@media(max-width:700px){
  .opm-phases{grid-template-columns:1fr 1fr}
  .opm-bars{display:none}
}

/* generic services section */
.svc-section{padding:46px 0}
.svc-lead-block{max-width:66ch;margin:0 0 28px}
.svc-section h2,.svc-ai h2{font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;line-height:1.04;margin:6px 0 16px}
.svc-lead{font-family:var(--serif);font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--ink-soft);margin:0}
.svc-lead em{font-style:italic}

/* §2 static vs dynamic */
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(14px,3vw,28px);margin-top:8px}
@media(max-width:760px){.vs{grid-template-columns:1fr}.vs-arrow{transform:rotate(90deg)}}
.vs-card{border:2px solid var(--ink);border-radius:20px;padding:24px;min-height:240px;
  display:flex;flex-direction:column;justify-content:space-between}
.vs-tag{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.vs-static{background:var(--cream-2)}
.store-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:14px;letter-spacing:-.01em;margin:14px 0 12px}
.store-bal{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.5}
.store-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.store-item{display:flex;justify-content:space-between;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:12px;padding:11px 14px}
.si-name{font-weight:700;font-size:13.5px}
.si-cost{font-weight:700;font-size:12.5px;opacity:.65}
.store-item.is-locked{border-style:dashed;opacity:.5}
.vs-cap{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-soft);margin:0}
.vs-arrow{display:grid;place-items:center;font-size:26px;font-weight:800;opacity:.4}
.vs-dynamic{background:linear-gradient(140deg,#10333f,#0a242c);border-color:var(--ink);color:#eafcff;position:relative;overflow:hidden}
.vs-dynamic .vs-tag{color:var(--lime)}
.game-prompt{font-size:13px;line-height:1.45;color:#bfe9f2;margin:12px 0 14px}
.game-prompt b{color:#fff}
.game-cost{color:var(--lime);font-weight:800}
.game-tiles{display:flex;gap:10px;margin-bottom:14px}
.gtile{position:relative;flex:1;aspect-ratio:3/4;border:none;padding:0;border-radius:14px;cursor:pointer;
  background:transparent;font:inherit;animation:gfloat 3.4s ease-in-out infinite}
.gtile:nth-child(2){animation-delay:.6s}
.gtile:nth-child(3){animation-delay:1.2s}
@keyframes gfloat{0%,100%{transform:translateY(0) rotate(-1.6deg)}50%{transform:translateY(-6px) rotate(1.6deg)}}
.gtile:hover{animation-play-state:paused;transform:translateY(-4px) scale(1.03)}
.gtile-cover{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;overflow:hidden;
  background:linear-gradient(150deg,#1d5c4a,#103b46);border:2px solid var(--green);
  transition:opacity .35s ease, transform .35s ease}
.gtile-q{font-size:30px;font-weight:800;color:var(--lime)}
.gtile-shine{position:absolute;top:0;left:-70%;width:55%;height:100%;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:gshine 3.2s ease-in-out infinite}
@keyframes gshine{0%{left:-70%}60%,100%{left:150%}}
.gtile-prize{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:6px;border-radius:14px;
  background:var(--lime);color:#0a242c;font-weight:800;font-size:13.5px;line-height:1.2;opacity:0;transform:scale(.92)}
.gtile.revealed{animation:none}
.gtile.revealed .gtile-cover{opacity:0;transform:scale(1.12)}
.gtile.revealed .gtile-prize{opacity:1;transform:none;transition:opacity .35s ease .08s, transform .35s ease .08s}
.vs-game.done .gtile{animation:none;cursor:default}
.vs-game.done .gtile:not(.revealed){opacity:.38}
.game-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.game-result{font-family:var(--serif);font-style:italic;font-size:13px;color:#bfe9f2}
.game-reset{display:none;background:var(--lime);color:#0a242c;border:none;border-radius:99px;
  font-weight:800;font-size:12.5px;padding:8px 15px;cursor:pointer;white-space:nowrap;transition:transform .12s ease}
.game-reset:hover{transform:translateY(-1px)}
.vs-game.done .game-reset{display:inline-flex;align-items:center}
.vs-dynamic .vs-cap{color:#bfe9f2}
/* reveal outcomes: prize (confetti) vs unlucky (bomb) */
.gtile.loss .gtile-prize{background:#3a2233;color:#ffdce8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.gtile-prize .bomb{display:inline-block;font-size:24px;animation:bombwobble 1s ease-in-out infinite;transform-origin:50% 60%}
@keyframes bombwobble{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(10deg) scale(1.13)}}
.confetti{position:absolute;left:50%;top:46%;width:7px;height:10px;border-radius:1px;opacity:0;pointer-events:none;z-index:4;
  animation:confettiBurst .9s ease-out forwards}
@keyframes confettiBurst{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--r)) scale(.5)}}

/* §3 practices */
.practices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:4px}
@media(max-width:820px){.practices{grid-template-columns:1fr}}
.practice{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  border:2px solid var(--ink);border-radius:20px;padding:22px;background:var(--card);
  transition:transform .18s ease, box-shadow .18s ease}
.practice:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--ink)}
.practice--design:hover{box-shadow:10px 10px 0 var(--magenta)}
.practice--build:hover{box-shadow:10px 10px 0 var(--green)}
.practice--manage:hover{box-shadow:10px 10px 0 var(--cyan)}
.practice-eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.practice--design .practice-eyebrow{color:#b8439a}
.practice--build .practice-eyebrow{color:#1f8a52}
.practice--manage .practice-eyebrow{color:#1f93b5}
.practice h3{font-weight:800;font-size:20px;letter-spacing:-.01em;margin:8px 0 8px;line-height:1.12}
.practice p{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0 0 16px;flex:1}
.practice-cta{font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.practice .arrow{transition:transform .18s ease}
.practice:hover .arrow{transform:translateX(5px)}
.approach-loop{margin:26px 0 0;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft);
  display:flex;align-items:center;gap:10px}
.loop-ico{font-style:normal;font-size:20px;color:var(--lime-deep)}

/* §4 AI */
.svc-ai{padding:48px 0}
.svc-ai-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:26px}
.svc-ai-head>div{max-width:64ch}
.ai-switch{display:inline-flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;font:inherit;flex:none}
.ai-switch-track{width:52px;height:30px;border-radius:99px;background:var(--ink);position:relative;border:2px solid var(--ink);transition:background .2s ease}
.ai-switch-thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--cream);transition:left .2s ease, background .2s ease}
.ai-on .ai-switch-track{background:var(--lime)}
.ai-on .ai-switch-thumb{left:24px;background:var(--ink)}
.ai-switch-text{font-weight:800;font-size:13px;letter-spacing:.1em;color:var(--ink)}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.ai-grid{grid-template-columns:1fr}.svc-ai-head{flex-direction:column}}
.ai-card{border:2px solid var(--ink);border-radius:20px;padding:22px;background:var(--card)}
.ai-card h3{font-weight:800;font-size:18px;margin:0 0 6px;display:flex;align-items:center;gap:10px}
.ai-base{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-soft);margin:0 0 4px}
.ai-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease, opacity .3s ease, margin .35s ease}
.ai-on .ai-list{max-height:320px;opacity:1;margin-top:10px}
.ai-list li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.4;color:var(--ink)}
.ai-list li::before{content:'';position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--lime-deep)}
.ai-spark{width:9px;height:9px;border-radius:50%;background:var(--lime-deep);opacity:0;transition:opacity .3s ease}
.ai-on .ai-spark{opacity:1;animation:aipulse 2.4s ease-in-out infinite}
@keyframes aipulse{0%,100%{box-shadow:0 0 0 0 rgba(188,217,42,.5)}50%{box-shadow:0 0 0 7px rgba(188,217,42,0)}}
.ai-foot{margin:22px 0 0;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft);max-width:62ch}

/* §5 ecosystem */
.ecosystem{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(20px,4vw,44px);align-items:center;margin-top:4px}
@media(max-width:860px){.ecosystem{grid-template-columns:1fr}}
.ecosystem svg{width:100%;height:auto;display:block;overflow:visible}
.eco-spoke{stroke:#9bbf9f;stroke-width:1.5;stroke-dasharray:5 6;opacity:.7}
.eco-chart{display:flex;flex-direction:column;gap:12px}
.cov-area{fill:rgba(58,217,130,.18);stroke:var(--green);stroke-width:2;stroke-linejoin:round}
.cov-dot{fill:var(--green)}
.eco-cover{display:flex;align-items:center;gap:9px;margin:0;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.eco-cover-dot{width:11px;height:11px;border-radius:3px;background:var(--green);display:inline-block;flex:none}
.eco-cover b{color:var(--ink)}
.eco-node rect{fill:var(--card);stroke:var(--ink);stroke-width:2;transition:fill .15s ease}
.eco-node text{font-family:var(--display);font-weight:700;font-size:13px;fill:var(--ink);text-anchor:middle}
.eco-ring{fill:none;stroke:var(--green);stroke-width:2;stroke-dasharray:4 5;opacity:.85}
.eco-way{display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;cursor:pointer;
  background:none;border:none;border-left:3px solid rgba(22,36,47,.16);padding:9px 13px;border-radius:0 10px 10px 0;
  color:var(--ink-soft);transition:background .15s ease, border-color .15s ease, transform .12s ease}
.eco-way b{font-weight:800;font-size:14px;color:var(--ink)}
.eco-way span{font-size:12.5px}
.eco-way:hover{transform:translateX(2px)}
.eco-way.is-active{border-left-color:var(--green);background:rgba(58,217,130,.1)}
.eco-center{fill:var(--green)}
.eco-center-t{font-family:var(--display);font-weight:800;font-size:14px;fill:#0E1A24;text-anchor:middle}
.eco-ring-t{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.12em;fill:var(--ink-soft);text-anchor:middle}
.eco-ways{display:flex;flex-direction:column;gap:8px}
.eco-ways-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin:0 0 12px 13px}
.eco-team{margin:22px 0 0;font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-soft);opacity:.85}

/* ---- Services page: dark mode ---- */
[data-theme="dark"] .opmodel{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .opm-phase{background:#0E1A24;border-color:#3A4A55;color:#E9EFF0}
[data-theme="dark"] .opm-phase.is-active{background:#E9EFF0;color:#16242F;box-shadow:4px 4px 0 var(--lime)}
[data-theme="dark"] .opm-detail{color:#AEBDC5}
[data-theme="dark"] .svc-lead{color:#AEBDC5}
[data-theme="dark"] .vs-static{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .store-item{border-color:#3A4A55}
[data-theme="dark"] .vs-cap{color:#AEBDC5}
[data-theme="dark"] .vs-arrow{color:#E9EFF0}
[data-theme="dark"] .practice{background:#16242F;border-color:#3A4A55;color:#E9EFF0}
[data-theme="dark"] .practice p{color:#AEBDC5}
[data-theme="dark"] .practice:hover{box-shadow:10px 10px 0 #E9EFF0}
[data-theme="dark"] .practice--design:hover{box-shadow:10px 10px 0 var(--magenta)}
[data-theme="dark"] .practice--build:hover{box-shadow:10px 10px 0 var(--green)}
[data-theme="dark"] .practice--manage:hover{box-shadow:10px 10px 0 var(--cyan)}
[data-theme="dark"] .practice--design .practice-eyebrow{color:#F25CC1}
[data-theme="dark"] .practice--build .practice-eyebrow{color:#3AD982}
[data-theme="dark"] .practice--manage .practice-eyebrow{color:#37C7F0}
[data-theme="dark"] .approach-loop{color:#AEBDC5}
[data-theme="dark"] .ai-card{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .ai-list li{color:#E9EFF0}
[data-theme="dark"] .ai-base,[data-theme="dark"] .ai-foot{color:#AEBDC5}
[data-theme="dark"] .ai-switch-track{background:#3A4A55;border-color:#3A4A55}
[data-theme="dark"] .ai-switch-thumb{background:#E9EFF0}
[data-theme="dark"] .ai-on .ai-switch-track{background:var(--lime)}
[data-theme="dark"] .ai-on .ai-switch-thumb{background:#16242F}
[data-theme="dark"] .ai-switch-text{color:#E9EFF0}
[data-theme="dark"] .eco-spoke{stroke:#3f7a55;opacity:.75}
[data-theme="dark"] .eco-node rect{fill:#16242F;stroke:#3A4A55}
[data-theme="dark"] .eco-node text{fill:#E9EFF0}
[data-theme="dark"] .eco-center{fill:#3AD982}
[data-theme="dark"] .eco-center-t{fill:#0E1A24}
[data-theme="dark"] .eco-ring{stroke:#3AD982}
[data-theme="dark"] .cov-area{fill:rgba(58,217,130,.22);stroke:#3AD982}
[data-theme="dark"] .cov-dot{fill:#3AD982}
[data-theme="dark"] .eco-cover{color:#AEBDC5}
[data-theme="dark"] .eco-cover b{color:#E9EFF0}
[data-theme="dark"] .eco-way{border-left-color:rgba(255,255,255,.18);color:#AEBDC5}
[data-theme="dark"] .eco-way b{color:#E9EFF0}
[data-theme="dark"] .eco-way.is-active{border-left-color:#3AD982;background:rgba(58,217,130,.14)}
[data-theme="dark"] .eco-team{color:#AEBDC5}

/* ============================================================
   DESIGN PRACTICE PAGE
   ============================================================ */
/* configurator */
.cfg{margin-top:38px;border:2px solid var(--ink);border-radius:24px;padding:clamp(18px,3vw,28px);background:var(--card)}
.cfg-label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px}
.cfg-goals{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.cfg-goal{border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:11px;padding:8px 14px;
  font:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:background .15s ease,color .15s ease,transform .1s ease,box-shadow .15s ease}
.cfg-goal:hover{transform:translateY(-1px)}
.cfg-goal.is-active{background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--magenta)}
.cfg-body{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
@media(max-width:760px){.cfg-body{grid-template-columns:1fr}}
.cfg-card{border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:10px 10px 0 var(--magenta);background:#fff}
.cfg-card-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-weight:800;font-size:15px;border-bottom:2px solid var(--ink)}
.cfg-tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--magenta);color:#fff;border-radius:99px;padding:3px 9px}
.cfg-rows{list-style:none;margin:0;padding:4px 0;transition:opacity .2s ease}
.cfg-row{display:flex;flex-direction:column;gap:1px;padding:10px 16px;border-bottom:1px solid rgba(22,36,47,.1)}
.cfg-row:last-child{border-bottom:none}
.cfg-row .r-n{font-weight:800;font-size:13.5px}
.cfg-row .r-d{font-size:12.5px;color:var(--ink-soft)}
.cfg-out{border:2px solid var(--ink);border-radius:18px;padding:16px 18px;background:var(--cream)}
.cfg-out-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:14px}
.meter{margin-bottom:13px}
.meter-l{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px}
.meter-bar{height:9px;border-radius:99px;background:rgba(22,36,47,.12);overflow:hidden}
.meter-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--magenta),var(--lime));transition:width .55s cubic-bezier(.3,.7,.3,1)}
.cfg-out-note{font-family:var(--serif);font-style:italic;font-size:11.5px;color:var(--ink-soft);margin:14px 0 0;line-height:1.4}

/* strategy builds up */
.sbuild{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:8px;max-width:520px}
.sbuild-step{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);border-radius:12px;padding:11px 16px;
  font-weight:700;font-size:14px;background:var(--card);
  opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i) * .1s)}
.reveal.in .sbuild-step{opacity:1;transform:none}
.sbuild-k{font-size:11px;font-weight:800;letter-spacing:.08em;opacity:.45}
.sbuild-note{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-soft);margin:16px 0 0}

/* what we design cards */
.dcaps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:700px){.dcaps{grid-template-columns:1fr}}
.dcap{border:2px solid var(--ink);border-radius:18px;padding:20px;background:var(--card)}
.dcap h3{font-weight:800;font-size:17px;margin:0 0 8px;letter-spacing:-.01em}
.dcap p{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin:0}

/* AI concept lab */
.lab{display:grid;grid-template-columns:1fr auto 1.1fr auto 1.1fr;gap:14px;align-items:center}
@media(max-width:860px){.lab{grid-template-columns:1fr}.lab-arrow{transform:rotate(90deg);justify-self:center}}
.lab-col{display:flex;flex-direction:column;gap:8px}
.lab-cap{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.lab-box{border:2px solid var(--ink);border-radius:14px;padding:14px;font-family:var(--serif);font-style:italic;font-size:13.5px;background:var(--card);line-height:1.4}
.lab-arrow{font-size:22px;font-weight:800;opacity:.4;justify-self:center}
.lab-dir{text-align:left;border:2px solid var(--ink);border-radius:12px;padding:11px 13px;font:inherit;font-weight:700;font-size:13px;
  background:var(--card);cursor:pointer;transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .1s ease}
.lab-dir:hover{transform:translateY(-1px)}
.lab-dir.is-active{background:var(--magenta);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.lab-bp .lab-box{box-shadow:8px 8px 0 var(--magenta);transition:box-shadow .2s ease}

/* ---- Design page: dark mode ---- */
[data-theme="dark"] .cfg{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .cfg-label{color:#E9EFF0}
[data-theme="dark"] .cfg-goal{background:#0E1A24;border-color:#3A4A55;color:#E9EFF0}
[data-theme="dark"] .cfg-goal.is-active{background:#E9EFF0;color:#16242F;box-shadow:3px 3px 0 var(--magenta)}
[data-theme="dark"] .cfg-card{background:#0E1A24;border-color:#3A4A55}
[data-theme="dark"] .cfg-card-head{border-bottom-color:#3A4A55}
[data-theme="dark"] .cfg-row{border-bottom-color:rgba(255,255,255,.1)}
[data-theme="dark"] .cfg-row .r-d{color:#AEBDC5}
[data-theme="dark"] .cfg-out{background:#0E1A24;border-color:#3A4A55}
[data-theme="dark"] .meter-bar{background:rgba(255,255,255,.14)}
[data-theme="dark"] .cfg-out-note{color:#AEBDC5}
[data-theme="dark"] .sbuild-step{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .sbuild-note{color:#AEBDC5}
[data-theme="dark"] .dcap{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .dcap p{color:#AEBDC5}
[data-theme="dark"] .lab-box{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .lab-dir{background:#16242F;border-color:#3A4A55;color:#E9EFF0}
[data-theme="dark"] .lab-dir.is-active{background:var(--magenta);color:#16242F;box-shadow:4px 4px 0 #E9EFF0}

/* ============================================================
   BUILD PRACTICE PAGE
   ============================================================ */
.bzdiagram{margin-top:38px}
.bz-cap{display:flex;align-items:center;gap:9px;margin:12px 0 0;font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-soft)}
.bz-dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;flex:none;animation:bzpulse 2s ease-out infinite}
@keyframes bzpulse{0%{box-shadow:0 0 0 0 rgba(58,217,130,.5)}100%{box-shadow:0 0 0 9px rgba(58,217,130,0)}}

/* platform capability vs customer experience */
.capexp{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,3vw,28px);align-items:center}
@media(max-width:760px){.capexp{grid-template-columns:1fr}.capexp-link{transform:rotate(90deg);justify-self:center}}
.capexp-side{border:2px solid var(--ink);border-radius:18px;padding:18px;background:var(--card)}
.capexp-exp{background:#eafcef}
.cx-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:12px}
.cx-chips{display:flex;flex-wrap:wrap;gap:8px}
.cx-chip{border:1.5px solid var(--ink);border-radius:99px;padding:6px 12px;font-weight:700;font-size:12.5px}
.capexp-exp .cx-chip{border-color:var(--green);background:#fff}
.capexp-link{display:flex;flex-direction:column;gap:5px;align-items:center;justify-self:center}
.capexp-link span{width:28px;height:3px;border-radius:2px;background:var(--green);opacity:.4;animation:cxflow 1.6s ease-in-out infinite}
.capexp-link span:nth-child(2){animation-delay:.2s}
.capexp-link span:nth-child(3){animation-delay:.4s}
@keyframes cxflow{0%,100%{opacity:.25;transform:translateX(-3px)}50%{opacity:1;transform:translateX(3px)}}

/* interactive mechanics gallery */
.mechs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.mechs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mechs{grid-template-columns:1fr}}
.mech{border:2px solid var(--ink);border-radius:18px;padding:16px;background:var(--card)}
.mech-viz{height:120px;border-radius:12px;background:#0a242c;overflow:hidden;display:grid;place-items:center;margin-bottom:12px;position:relative}
.mech h3{font-weight:800;font-size:15px;margin:0 0 5px;letter-spacing:-.01em}
.mech p{font-size:12.5px;line-height:1.45;color:var(--ink-soft);margin:0}
.mech-ar video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* personalized communication: AI agent chatting with a member */
.mech-chat{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 16px;place-items:stretch}
.ch-row{display:flex;align-items:flex-end;gap:6px;opacity:0;transform:translateY(7px);transition:opacity .32s ease,transform .32s ease}
.ch-row.show{opacity:1;transform:none}
.ch-ai{justify-content:flex-start}
.ch-me{justify-content:flex-end}
.ch-ava{width:18px;height:18px;border-radius:50%;background:var(--lime);color:#0a242c;font-size:11px;line-height:1;display:grid;place-items:center;flex:none;font-weight:800}
.ch-bub{max-width:74%;padding:7px 9px;border-radius:11px}
.ch-ai .ch-bub{background:rgba(212,242,58,.16);border:1px solid rgba(212,242,58,.5);border-bottom-left-radius:3px}
.ch-me .ch-bub{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);border-bottom-right-radius:3px}
.ch-typing{display:flex;gap:3px;align-items:center;height:9px}
.ch-typing i{width:5px;height:5px;border-radius:50%;background:var(--lime);animation:chtype 1s ease-in-out infinite}
.ch-typing i:nth-child(2){animation-delay:.15s}
.ch-typing i:nth-child(3){animation-delay:.3s}
@keyframes chtype{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-3px);opacity:1}}
.ch-lines{display:none;flex-direction:column;gap:3px}
.ch-ai.done .ch-typing{display:none}
.ch-ai.done .ch-lines{display:flex}
.ch-me .ch-lines{display:flex}
.ch-lines span{height:4px;border-radius:2px;display:block}
.ch-ai .ch-lines span{background:rgba(234,252,255,.85)}
.ch-ai .ch-lines span:nth-child(1){width:64px}
.ch-ai .ch-lines span:nth-child(2){width:44px}
.ch-me .ch-lines span{background:rgba(234,252,255,.72);width:38px}
@media(prefers-reduced-motion:reduce){.ch-row{transition:none}.ch-typing i{animation:none}}
/* select & reveal: cards flip to show a prize (confetti) or a bomb */
.rcards{display:flex;gap:9px;align-items:center;justify-content:center}
.rcard{width:42px;height:64px;perspective:520px}
.rc-in{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.4,.15,.2,1);transform-style:preserve-3d}
.rcard.flip .rc-in{transform:rotateY(180deg)}
.rc-f{position:absolute;inset:0;border-radius:9px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.rc-front{background:linear-gradient(150deg,#1d5c4a,#103b46);border:1.5px solid var(--green)}
.rc-front::after{content:'?';position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:24px;color:rgba(91,227,154,.7)}
.rc-back{transform:rotateY(180deg);border:1.5px solid var(--green)}
.rcard.is-prize .rc-back{background:linear-gradient(150deg,#1f7a4f,#0f5436);border-color:#5BE39A}
.rcard.is-bomb .rc-back{background:linear-gradient(150deg,#7a2530,#4a1118);border-color:#F2768A}
.rc-confetti,.rc-bomb{position:absolute;inset:0;opacity:0;pointer-events:none}
.rcard.is-prize .rc-confetti{opacity:1}
.rcard.is-bomb .rc-bomb{opacity:1;display:grid;place-items:center}
.rc-confetti i{position:absolute;top:-6px;width:5px;height:5px;border-radius:1px;animation:rconf 1.15s linear infinite}
.rc-confetti i:nth-child(1){left:14%;background:var(--lime);animation-delay:0s}
.rc-confetti i:nth-child(2){left:31%;background:var(--cyan);animation-delay:.16s}
.rc-confetti i:nth-child(3){left:48%;background:var(--magenta);animation-delay:.34s}
.rc-confetti i:nth-child(4){left:64%;background:var(--green);animation-delay:.1s}
.rc-confetti i:nth-child(5){left:80%;background:var(--lime);animation-delay:.28s}
.rc-confetti i:nth-child(6){left:40%;background:var(--cyan);animation-delay:.5s}
@keyframes rconf{0%{transform:translateY(-6px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(70px) rotate(340deg);opacity:0}}
.rc-bomb span{font-size:26px;line-height:1;animation:rbomb 1s ease-in-out infinite}
@keyframes rbomb{0%,100%{transform:scale(1) rotate(-7deg)}50%{transform:scale(1.16) rotate(7deg)}}
@media(prefers-reduced-motion:reduce){.rc-in{transition:none}.rc-confetti i,.rc-bomb span{animation:none}}
.mech-scan .mech-receipt{width:58px;height:80px;background:#eafcff;border-radius:4px}
.mech-scan .mech-scanline{position:absolute;left:50%;transform:translateX(-50%);width:70px;height:3px;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:mscan 2.6s ease-in-out infinite}
@keyframes mscan{0%,100%{top:28px}50%{top:78px}}
.mech-badge{width:58px;height:58px;border-radius:50%;background:var(--lime);color:#0a242c;display:grid;place-items:center;font-size:24px;font-weight:800;animation:mbadge 2.2s ease-out infinite}
@keyframes mbadge{0%{box-shadow:0 0 0 0 rgba(212,242,58,.55);transform:scale(1)}50%{transform:scale(1.06)}100%{box-shadow:0 0 0 20px rgba(212,242,58,0);transform:scale(1)}}
.mech-streak{display:flex;justify-content:center;align-items:center;gap:16px}
.mech-streak i{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);transition:background .3s ease,box-shadow .3s ease,transform .3s ease}
.mech-streak i.lit{background:var(--lime);box-shadow:0 0 13px rgba(212,242,58,.8)}
.mech-streak.cele i{transform:scale(1.22)}
.mech-streak.cele{animation:streakcele .95s ease-out}
@keyframes streakcele{0%{box-shadow:inset 0 0 0 0 rgba(212,242,58,0)}35%{background:rgba(212,242,58,.16);box-shadow:inset 0 0 55px 10px rgba(212,242,58,.5)}100%{background:#0a242c;box-shadow:inset 0 0 0 0 rgba(212,242,58,0)}}
@media(prefers-reduced-motion:reduce){.mech-streak i{transition:none}.mech-streak.cele{animation:none}}

/* AI delivery pipeline */
.pipe{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
@media(max-width:760px){.pipe{flex-direction:column}.pipe-arrow{display:none}}
.pipe-step{flex:1;min-width:120px;border:2px solid var(--ink);border-radius:14px;padding:14px;background:var(--card);transition:box-shadow .2s ease,transform .12s ease}
.pipe-step.is-active{box-shadow:6px 6px 0 var(--green);transform:translateY(-2px)}
.pipe-k{font-size:11px;font-weight:800;opacity:.45}
.pipe-n{font-weight:800;font-size:15px;margin:4px 0 2px;letter-spacing:-.01em}
.pipe-d{font-size:12px;color:var(--ink-soft)}
.pipe-arrow{display:grid;place-items:center;font-size:20px;font-weight:800;opacity:.4}

/* ---- Build page: dark mode ---- */
[data-theme="dark"] .bz-cap{color:#AEBDC5}
[data-theme="dark"] .capexp-side{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .capexp-exp{background:#10271c}
[data-theme="dark"] .cx-chip{border-color:#3A4A55}
[data-theme="dark"] .capexp-exp .cx-chip{border-color:var(--green);background:#16242F}
[data-theme="dark"] .mech{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .mech p{color:#AEBDC5}
[data-theme="dark"] .pipe-step{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .pipe-d{color:#AEBDC5}

/* ============================================================
   MANAGE PRACTICE PAGE
   ============================================================ */
/* program health dashboard (dark UI in both themes) */
.mdash{margin-top:38px;border:2px solid var(--ink);border-radius:22px;background:#0c2a33;color:#eafcff;padding:18px;box-shadow:12px 12px 0 var(--cyan)}
.mdash-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.mdash-dots{display:flex;gap:6px}
.mdash-dots i{width:11px;height:11px;border-radius:50%;background:var(--cyan)}
.mdash-dots i:nth-child(2){background:var(--green)}
.mdash-dots i:nth-child(3){background:var(--magenta)}
.mdash-t{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.mdash-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.mdash-live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:bzpulse 2s ease-out infinite}
.mdash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media(max-width:600px){.mdash-kpis{grid-template-columns:repeat(2,1fr)}}
.mdash-kpis .kpi{background:rgba(255,255,255,.06);border-radius:12px;padding:11px 13px}
.mdash-kpis .kpi .v{font-weight:800;font-size:21px;letter-spacing:-.02em;color:#fff}
.mdash-kpis .kpi .l{font-size:10px;letter-spacing:.05em;text-transform:uppercase;opacity:.6;font-weight:700;margin-top:2px}
.mdash-chart{background:rgba(255,255,255,.04);border-radius:12px;padding:10px;margin-bottom:14px}
.mdash-chart svg{width:100%;height:90px;display:block;overflow:visible}
.mg-line{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mg-area{fill:url(#mgGrad)}
.mg-dot{fill:#fff;stroke:var(--cyan);stroke-width:2}
.mdash-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:600px){.mdash-foot{grid-template-columns:1fr}}
.mdash-alert{display:flex;align-items:center;gap:9px;background:#2a1622;border:1px solid var(--magenta);color:#ffd9f1;border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:600;transition:background .35s ease,border-color .35s ease,color .35s ease}
.mdash-alert.resolved{background:#10332a;border-color:var(--green);color:#c8f7df}
.mdash-rec{display:flex;align-items:center;gap:8px;background:rgba(55,199,240,.12);border:1px solid var(--cyan);color:#d8f6ff;border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.mdash-rec.show{opacity:1;transform:none}
.rec-k{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}

/* operating loop */
.oloop{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.oloop-step{border:2px solid var(--ink);border-radius:99px;padding:9px 16px;font-weight:800;font-size:13.5px;background:var(--card);transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.oloop-step.is-active{background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--cyan)}
.oloop-sep{opacity:.4;font-weight:800}
.oloop-cycle{font-size:22px;color:var(--cyan);font-weight:800;margin-left:2px}

/* ask your program */
.aq{border:2px solid var(--ink);border-radius:20px;overflow:hidden;background:var(--card);box-shadow:12px 12px 0 var(--cyan)}
.aq-head{display:flex;align-items:center;gap:9px;padding:13px 18px;font-weight:800;font-size:14px;border-bottom:2px solid var(--ink)}
.aq-spark{color:var(--cyan)}
.aq-qs{display:flex;flex-wrap:wrap;gap:8px;padding:16px 18px 4px}
.aq-q{text-align:left;border:2px solid var(--ink);border-radius:11px;padding:9px 13px;font:inherit;font-weight:700;font-size:12.5px;background:var(--cream);color:var(--ink);cursor:pointer;transition:background .15s ease,color .15s ease,transform .1s ease,box-shadow .15s ease}
.aq-q:hover{transform:translateY(-1px)}
.aq-q.is-active{background:var(--cyan);color:#06222b;box-shadow:3px 3px 0 var(--ink)}
.aq-ans{padding:8px 18px 20px}
.aq-insight{display:flex;gap:10px;align-items:baseline;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.45;margin-bottom:14px}
.aq-k{font-family:var(--display);font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);flex:none;margin-top:3px}
.aq-actions{display:flex;flex-wrap:wrap;gap:8px}
.aq-action{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--ink);border-radius:99px;padding:7px 13px;font-size:12.5px;font-weight:700}
.aq-action::before{content:'→';color:var(--cyan);font-weight:800}

/* ---- Manage page: dark mode ---- */
[data-theme="dark"] .oloop-step{background:#16242F;border-color:#3A4A55;color:#E9EFF0}
[data-theme="dark"] .oloop-step.is-active{background:#E9EFF0;color:#16242F;box-shadow:3px 3px 0 var(--cyan)}
[data-theme="dark"] .aq{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .aq-head{border-bottom-color:#3A4A55}
[data-theme="dark"] .aq-q{background:#0E1A24;border-color:#3A4A55;color:#E9EFF0}
[data-theme="dark"] .aq-q.is-active{background:var(--cyan);color:#06222b}
[data-theme="dark"] .aq-action{border-color:#3A4A55}

/* =========================================================================
   NEWS feed + article pages
   ========================================================================= */
.news-hero{padding:54px 0 6px;max-width:40ch}
.news-hero h1{font-size:clamp(40px,6vw,72px);margin:8px 0 0}
.news-lead{font-family:var(--serif);font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--ink-soft);margin:16px 0 0;max-width:46ch}
.news-section{padding:34px 0 8px}
.news-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:880px){.news-feed{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.news-feed{grid-template-columns:1fr}}

.ncard{display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:20px;overflow:hidden;background:var(--card);color:inherit;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.ncard:hover{transform:translateY(-3px);box-shadow:7px 7px 0 var(--ink)}
.ncard-media{height:190px;background:#0a242c;overflow:hidden;display:block;position:relative}
.ncard-media img{width:100%;height:100%;object-fit:cover;display:block}
.ncard-media--contain{display:grid;place-items:center;padding:14px}
.ncard-media--contain img{width:auto;height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 16px rgba(58,217,130,.25))}
.ncard-media--game{display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 20%,#3a1336,#0a242c 70%)}
.ncard-play{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--magenta);color:#2a0a22;font-size:20px;padding-left:3px;box-shadow:0 0 26px rgba(242,92,193,.55)}
.ncard-body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1}
.ncard-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ncard-date{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-soft)}
.ncard-title{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.15;margin:2px 0 0}
.ncard-dek{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin:0;flex:1}
.ncard-link{font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;margin-top:4px}
.ncard:hover .ncard-link .arrow{transform:translateX(4px)}
.ncard-link .arrow{transition:transform .2s ease}

/* category tags (also used on article pages) */
.ncard-tag{display:inline-flex;align-items:center;font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1.5px solid currentColor;white-space:nowrap}
.ncard-tag.magenta{color:#b3247e;background:rgba(242,92,193,.1)}
.ncard-tag.cyan{color:#0d7ba2;background:rgba(55,199,240,.1)}
.ncard-tag.green{color:#1c8b53;background:rgba(58,217,130,.1)}

/* article layout */
.article{max-width:760px;margin:0 auto;padding:40px 0 8px}
.article-back{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--ink-soft);text-decoration:none;margin-bottom:22px}
.article-back:hover{color:var(--ink)}
.article-back .arrow{transition:transform .2s ease}
.article-back:hover .arrow{transform:translateX(-3px)}
.article-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.article-date{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-soft)}
.article h1{font-size:clamp(34px,5.2vw,58px);margin:0}
.article-standfirst{font-family:var(--serif);font-size:clamp(18px,2.1vw,23px);line-height:1.5;color:var(--ink-soft);margin:18px 0 0}
.article-hero{border:2px solid var(--ink);border-radius:20px;overflow:hidden;margin:28px 0 6px;background:#0a242c}
.article-hero--video video{display:block;width:100%;height:auto}
.article-hero--persona{display:grid;place-items:center;padding:26px}
.article-hero--persona img{width:auto;max-height:300px;max-width:100%;filter:drop-shadow(0 0 26px rgba(58,217,130,.3))}
.article-hero--game{display:grid;place-items:center;padding:42px 24px;background:radial-gradient(120% 130% at 30% 15%,#3a1336,#0a242c 72%)}
.ah-game{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;color:#fff}
.ah-game-eyebrow{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta)}
.ah-game-title{font-family:var(--display);font-weight:800;font-size:clamp(40px,7vw,64px);letter-spacing:-.03em;line-height:1}
.ah-game-sub{font-family:var(--serif);font-style:italic;font-size:16px;color:#cfd8dc}
.ah-game-btn{margin-top:14px}
.article-body{margin-top:26px}
.article-body p{font-size:17px;line-height:1.7;margin:0 0 16px}
.article-body h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;margin:32px 0 10px}
.article-list{margin:0 0 18px;padding:0;list-style:none}
.article-list li{position:relative;padding-left:24px;margin:0 0 9px;font-size:16.5px;line-height:1.5}
.article-list li::before{content:'';position:absolute;left:3px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--green)}
.article-cta{margin-top:36px;border:2px solid var(--ink);border-radius:20px;padding:30px;background:var(--card)}
.article-cta h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;margin:0 0 8px}
.article-cta p{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0 0 18px;max-width:54ch}

/* News + article: dark mode */
[data-theme="dark"] .news-lead,[data-theme="dark"] .ncard-date,[data-theme="dark"] .ncard-dek,[data-theme="dark"] .article-date,[data-theme="dark"] .article-standfirst,[data-theme="dark"] .article-cta p,[data-theme="dark"] .article-back{color:#AEBDC5}
[data-theme="dark"] .ncard,[data-theme="dark"] .article-cta{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .ncard:hover{box-shadow:7px 7px 0 #3A4A55}
[data-theme="dark"] .article-hero{border-color:#3A4A55}
[data-theme="dark"] .article-back:hover{color:#E9EFF0}
[data-theme="dark"] .ncard-tag.magenta{color:#F5A8DD}
[data-theme="dark"] .ncard-tag.cyan{color:#7FDCF6}
[data-theme="dark"] .ncard-tag.green{color:#7BE6AE}

/* Case-study rich media (phone showcase, video embed, source + client) */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 8px;padding:26px 24px;border:2px solid var(--ink);border-radius:20px;background:linear-gradient(155deg,#005DAB 0%,#073357 100%)}
.shots figure{margin:0;text-align:center}
.shots img{width:100%;height:auto;border-radius:12px;filter:drop-shadow(0 12px 26px rgba(0,0,0,.4))}
.shots figcaption{margin-top:12px;font-size:12.5px;line-height:1.45;color:#CFE4F7;font-weight:600}
@media(max-width:620px){.shots{grid-template-columns:1fr;max-width:320px;margin-inline:auto}}

.article-embed{margin:26px 0}
.article-embed .embed-cap{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-soft);text-align:center;margin:12px 0 0}
.video-frame{position:relative;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:#000}
.video-frame--wide{aspect-ratio:16/9}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.article-source{display:flex;align-items:center;gap:14px;margin:24px 0;padding:16px 18px;border:2px solid var(--ink);border-radius:16px;background:var(--card);text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.article-source:hover{transform:translateY(-2px);box-shadow:6px 6px 0 var(--ink)}
.article-source .src-k{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft);font-weight:800;margin:0 0 3px}
.article-source .src-t{font-weight:700;font-size:15.5px;line-height:1.35;margin:0}
.article-source .arrow{margin-left:auto;flex:none}

.article-client{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:24px 0;padding:18px 22px;border:2px solid var(--ink);border-radius:16px;background:var(--card)}
.yeg-logo{height:34px;width:auto;flex:none;color:#005DAB}
.article-client span{font-size:14px;line-height:1.5;color:var(--ink-soft)}

[data-theme="dark"] .article-source{background:#16242F;border-color:#3A4A55;color:#E9EFF0}
[data-theme="dark"] .article-source:hover{box-shadow:6px 6px 0 #3A4A55}
[data-theme="dark"] .article-source .src-t{color:#E9EFF0}
[data-theme="dark"] .shots,[data-theme="dark"] .video-frame{border-color:#3A4A55}
[data-theme="dark"] .article-client{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .yeg-logo{color:#fff}
[data-theme="dark"] .article-embed .embed-cap,[data-theme="dark"] .article-source .src-k,[data-theme="dark"] .article-client span{color:#AEBDC5}

/* =========================================================================
   CONTACT page
   ========================================================================= */
.contact-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;padding:56px 0 24px}
@media(max-width:820px){.contact-wrap{grid-template-columns:1fr;gap:30px;padding:40px 0 16px}}
.contact-intro{position:sticky;top:96px}
@media(max-width:820px){.contact-intro{position:static;top:auto}}
.contact-intro h1{font-size:clamp(38px,5.4vw,64px);margin:10px 0 0}
.contact-lead{font-family:var(--serif);font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--ink-soft);margin:18px 0 0;max-width:38ch}
.contact-points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.contact-points li{position:relative;padding-left:28px;font-weight:600;font-size:15.5px;line-height:1.4}
.contact-points li::before{content:'';position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)}

.contact-card{border:2px solid var(--ink);border-radius:22px;background:var(--card);padding:30px;box-shadow:7px 7px 0 var(--ink)}
@media(max-width:520px){.contact-card{padding:22px}}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:14px;margin-bottom:7px}
.field .opt{font-weight:500;font-size:12.5px;color:var(--ink-soft);font-family:var(--serif);font-style:italic}
.field input,.field textarea{width:100%;box-sizing:border-box;font-family:var(--display);font-size:15.5px;color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:12px;padding:12px 14px;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{resize:vertical;min-height:104px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#9aa7af}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(212,242,58,.55)}
.field input.is-invalid,.field textarea.is-invalid{border-color:#d83a52;box-shadow:0 0 0 3px rgba(216,58,82,.18)}
.field-err{display:block;min-height:0;color:#cf2741;font-size:12.5px;font-weight:600;margin-top:6px}
.field-err:empty{margin-top:0}
.cf-submit{width:100%;justify-content:center;margin-top:4px}
.cf-submit.is-loading{opacity:.75;cursor:progress}
.cf-formerror{color:#cf2741;font-size:13.5px;font-weight:600;margin:14px 0 0;text-align:center}
.cf-formerror a{text-decoration:underline}
.cf-fineprint{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-soft);text-align:center;margin:14px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cf-success{text-align:center;padding:18px 6px 8px;animation:cfFade .5s ease}
@keyframes cfFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cf-check{width:60px;height:60px;border-radius:50%;background:var(--green);color:#06321d;display:grid;place-items:center;font-size:30px;font-weight:800;margin:0 auto 16px;animation:cfPop .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes cfPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.cf-success h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;margin:0 0 8px}
.cf-success p{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0 auto 20px;max-width:34ch}

/* Contact: dark mode */
[data-theme="dark"] .contact-lead,[data-theme="dark"] .cf-fineprint,[data-theme="dark"] .cf-success p{color:#AEBDC5}
[data-theme="dark"] .contact-card{background:#16242F;border-color:#3A4A55;box-shadow:7px 7px 0 #3A4A55}
[data-theme="dark"] .field input,[data-theme="dark"] .field textarea{background:#0E1A24;border-color:#3A4A55;color:#E9EFF0}
[data-theme="dark"] .field input::placeholder,[data-theme="dark"] .field textarea::placeholder{color:#6b7b85}
[data-theme="dark"] .field input:focus,[data-theme="dark"] .field textarea:focus{border-color:#5a6c77;box-shadow:0 0 0 3px rgba(212,242,58,.4)}
[data-theme="dark"] .contact-points li::before{box-shadow:inset 0 0 0 2px #0E1A24}

/* =========================================================================
   ABOUT page
   ========================================================================= */
.about-prose{max-width:66ch}
.about-prose p{font-size:17px;line-height:1.7;margin:0 0 16px;color:var(--ink-soft)}
.about-prose p:last-child{margin-bottom:0}
.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.regions{grid-template-columns:1fr}}
.region{border:2px solid var(--ink);border-radius:18px;padding:20px;background:var(--card)}
.region-name{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.region-name::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink);flex:none}
.region-list{display:flex;flex-wrap:wrap;gap:8px}
.country{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--ink);border-radius:99px;padding:6px 12px;font-weight:700;font-size:13.5px}
.country .flag{font-size:15px;line-height:1}
.about-stats{padding:14px 0 0}
.about-stats .stats{margin:0}

/* About: dark mode */
[data-theme="dark"] .about-prose p{color:#AEBDC5}
[data-theme="dark"] .region{background:#16242F;border-color:#3A4A55}
[data-theme="dark"] .country{border-color:#3A4A55}
[data-theme="dark"] .region-name::before{box-shadow:inset 0 0 0 2px #0E1A24}

/* =========================================================================
   Language switcher (globe icon + dropdown)
   ========================================================================= */
.langswitch{position:relative;display:inline-flex}
.langbtn .ico-globe{width:21px;height:21px;display:block}
.langmenu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:6px;min-width:156px;box-shadow:6px 6px 0 rgba(22,36,47,.12);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;z-index:60}
.langswitch.open .langmenu{opacity:1;visibility:visible;transform:none}
.langmenu a{display:block;text-decoration:none;color:inherit;padding:9px 13px;border-radius:9px;font-weight:600;font-size:14px;line-height:1.1}
.langmenu a:hover{background:var(--cream-2)}
.langmenu a.is-current{font-weight:800}
.langmenu a.is-current::after{content:'✓';float:right;color:#1c8b53;font-weight:800}
[data-theme="dark"] .langmenu{background:#16242F;border-color:#3A4A55;box-shadow:6px 6px 0 rgba(0,0,0,.45)}
[data-theme="dark"] .langmenu a{color:#E9EFF0}
[data-theme="dark"] .langmenu a:hover{background:#1F2F3A}
[data-theme="dark"] .langmenu a.is-current::after{color:#7BE6AE}