:root{
  --navy:#0b2b8d;
  --navy-deep:#061a5a;
  --navy-darker:#03103e;
  --orange:#f89100;
  --orange-soft:#ffb84d;
  --white:#ffffff;
  --ink:#0a0e1a;
  --line:rgba(11,43,141,0.12);
  --line-dark:rgba(255,255,255,0.10);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-fluid:cubic-bezier(0.65,0,0.35,1);
  /* Magazine restructure: radius + shadow tokens */
  --radius-sm:12px;
  --radius-md:24px;
  --radius-lg:36px;
  --radius-xl:48px;
  --radius-pill:999px;
  --shadow-soft:0 12px 40px rgba(3,16,62,0.10);
  --shadow-deep:0 24px 80px rgba(3,16,62,0.20);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  background:var(--white);
  color:var(--ink);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:900px){body{cursor:auto}}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:none}
@media (max-width:900px){button{cursor:pointer}}

::selection{background:var(--orange);color:var(--ink)}

/* ---------- noise grain overlay ---------- */
.noise{display:none}

/* ---------- custom cursor ---------- */
.cur-dot,.cur-ring{
  position:fixed;left:0;top:0;
  pointer-events:none;
  z-index:10000;
  will-change:transform;
}
.cur-dot{
  width:6px;height:6px;
  background:var(--orange);
  border-radius:50%;
  margin:-3px 0 0 -3px;
}
.cur-ring{
  width:30px;height:30px;
  border:1px solid var(--ink);
  border-radius:50%;
  margin:-15px 0 0 -15px;
  transition:width 0.25s var(--ease),height 0.25s var(--ease),margin 0.25s var(--ease),border-color 0.25s var(--ease),background 0.25s var(--ease),border-radius 0.2s var(--ease);
}
.cur-ring.hover{width:60px;height:60px;margin:-30px 0 0 -30px;border-color:var(--orange);background:rgba(248,145,0,0.06)}
.cur-ring.text{width:4px;height:28px;margin:-14px 0 0 -2px;border-radius:0;background:var(--orange);border-color:var(--orange)}
.cur-ring.dark{border-color:var(--white)}
@media (max-width:900px){.cur-dot,.cur-ring{display:none}}

/* ---------- top ticker strip (premium interaction) ---------- */
.ticker{
  --tk-speed: 38s;
  --tk-spot-x: 50%;
  --tk-spot-o: 0;
  background:var(--navy-darker);
  color:rgba(255,255,255,0.78);
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  position:relative;
  border-bottom:1px solid var(--line-dark);
  display:flex;
  align-items:stretch;
  isolation:isolate;
  overflow:hidden;
}
.ticker::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(240px 80px at var(--tk-spot-x) 50%, rgba(248,145,0,0.22), rgba(248,145,0,0.04) 55%, transparent 75%);
  opacity:var(--tk-spot-o);
  transition:opacity .35s var(--ease);
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
}
.ticker::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(248,145,0,0.5), transparent);
  opacity:0;
  transition:opacity .4s var(--ease);
  pointer-events:none;
  z-index:2;
}
.ticker:hover::after{opacity:1}

.ticker-status{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 18px;
  flex:0 0 auto;
  border-right:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.ticker-pulse{
  width:6px;height:6px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(248,145,0,0.6), 0 0 8px rgba(248,145,0,0.5);
  animation:tickPulse 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes tickPulse{
  0%{box-shadow:0 0 0 0 rgba(248,145,0,0.55), 0 0 8px rgba(248,145,0,0.5)}
  70%{box-shadow:0 0 0 9px rgba(248,145,0,0), 0 0 8px rgba(248,145,0,0.5)}
  100%{box-shadow:0 0 0 0 rgba(248,145,0,0), 0 0 8px rgba(248,145,0,0.5)}
}
.ticker-status-label{
  color:var(--orange);
  font-size:10px;
  letter-spacing:0.22em;
  font-weight:500;
}

.ticker-viewport{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  overflow:hidden;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}
.ticker-viewport:active{cursor:grabbing}
.ticker.is-scrubbing .ticker-viewport{cursor:grabbing}

.ticker-track{
  display:flex;
  gap:48px;
  white-space:nowrap;
  width:max-content;
  padding:9px 0;
  animation:tick var(--tk-speed) linear infinite;
  will-change:transform;
}
.ticker-track span:nth-child(odd){color:var(--orange)}
.ticker-track .dot{color:rgba(255,255,255,0.35)}
.ticker-track > span:not(.dot){
  position:relative;
  transition:color .3s var(--ease), transform .35s var(--ease), text-shadow .35s var(--ease);
}
.ticker-track > span:not(.dot)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s var(--ease);
  opacity:0.7;
}
.ticker-track > span:not(.dot):hover{
  color:#fff;
  transform:translateY(-1px);
  text-shadow:0 0 12px rgba(248,145,0,0.45);
}
.ticker-track > span:not(.dot):hover::after{transform:scaleX(1)}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.ticker-meta{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  flex:0 0 auto;
  color:rgba(255,255,255,0.42);
  font-size:9px;
  letter-spacing:0.22em;
  border-left:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(270deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  opacity:0;
  transform:translateX(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), color .3s var(--ease);
}
.ticker:hover .ticker-meta{opacity:1; transform:translateX(0)}
.ticker.is-scrubbing .ticker-meta{color:var(--orange)}
.ticker-meta-arrows{font-size:11px; letter-spacing:0; color:rgba(255,255,255,0.55)}
.ticker.is-scrubbing .ticker-meta-arrows{color:var(--orange)}

@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none}
  .ticker-pulse{animation:none}
}
@media (max-width:640px){
  .ticker-meta{display:none}
  .ticker-status{padding:0 12px}
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1440px;margin:0 auto;
  padding:18px 36px;
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;
}
.brand{
  font-size:22px;font-weight:500;
  letter-spacing:-0.02em;
  display:flex;align-items:center;gap:0;
}
.brand .brand-name{
  font-family:'Fraunces','Inter',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-menu{gap:18px}
.nav-item{position:relative;padding:10px 0}
.nav-links a{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.78;
  position:relative;
  padding:6px 0;
  transition:opacity 0.3s var(--ease),color 0.3s var(--ease);
}
.nav-links a:hover{opacity:1;color:var(--navy)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--orange);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.4s var(--ease);
}
.nav-parent>a::before{
  content:'';
  position:absolute;right:-9px;top:50%;
  width:4px;height:4px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-65%) rotate(45deg);
  opacity:0.45;
}
.nav-submenu{
  position:absolute;
  top:100%;left:50%;
  width:320px;
  transform:translate(-50%,10px);
  background:rgba(255,255,255,0.96);
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(3,16,62,0.12);
  padding:18px;
  display:grid;
  gap:10px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.25s var(--ease),transform 0.25s var(--ease),visibility 0.25s var(--ease);
}
.nav-parent:hover>.nav-submenu,
.nav-parent:focus-within>.nav-submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.nav-child-group{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:2px 0;
}
.nav-submenu a{
  display:inline-flex;
  align-self:flex-start;
  padding:3px 0;
  font-size:10px;
  line-height:1.35;
  text-transform:none;
}
.nav-submenu a::after{display:none}
.nav-branch>summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  padding:3px 0;
  font-family:'Geist Mono',monospace;
  position:relative;
}
.nav-branch>summary::-webkit-details-marker{display:none}
.nav-branch>summary::after{
  content:'';
  width:5px;height:5px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-1px) rotate(45deg);
  opacity:0.55;
  transition:transform 0.22s var(--ease);
}
.nav-branch[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.nav-overview{
  margin-top:2px;
  color:var(--navy) !important;
}
.nav-child-title{
  color:var(--navy) !important;
  opacity:1 !important;
  text-transform:uppercase !important;
  letter-spacing:0.1em !important;
  font-size:10px !important;
}
.nav-submenu.level-2{
  position:static;
  width:auto;
  transform:none;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:4px 0 0 12px;
  gap:3px;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  display:flex;
  flex-direction:column;
}
.nav-branch:not([open])>.nav-submenu.level-2{display:none}
.nav-cta{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;
  background:var(--navy);color:var(--white);
  padding:13px 22px;
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--navy);
  transition:color 0.4s var(--ease);
}
.nav-cta::before{
  content:'';position:absolute;inset:0;
  background:var(--orange);
  transform:translateY(101%);
  transition:transform 0.5s var(--ease);
  z-index:-1;
}
.nav-cta:hover{color:var(--ink)}
.nav-cta:hover::before{transform:translateY(0)}
.nav-cta .arrow{font-size:14px;line-height:1}
/* ---------- mobile menu toggle (hamburger) ---------- */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  cursor:pointer;
  position:relative;
  z-index:202;
}
.nav-toggle-bar{
  display:block;
  width:18px;height:1.5px;
  background:var(--ink);
  border-radius:1px;
  transition:transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav.is-open .nav-toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.is-open .nav-toggle-bar:nth-child(2){opacity:0}
.nav.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-backdrop{
  position:fixed;inset:0;
  background:rgba(3,16,62,0.82);
  opacity:0;visibility:hidden;
  transition:opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  z-index:198;
}
.nav.is-open ~ .nav-backdrop,
.menu-open .nav-backdrop{opacity:1;visibility:visible}
html.menu-open,html.menu-open body{overflow:hidden}

@media (max-width:900px){
  .nav-inner{padding:14px 20px;gap:12px}
  .nav-toggle{display:inline-flex}
  .nav-links{
    display:flex !important;
    position:fixed;
    top:0;right:0;bottom:0;
    width:min(360px,86vw);
    background-color:#ffffff;
    border-left:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:96px 28px calc(32px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    transition:transform 0.4s var(--ease), visibility 0.4s var(--ease);
    box-shadow:-30px 0 80px -40px rgba(3,16,62,0.4);
    z-index:201;
    visibility:hidden;
    pointer-events:none;
  }
  .nav.is-open .nav-links,
  html.menu-open .nav-links{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
  }
  .nav-item{padding:0;border-bottom:1px solid rgba(11,43,141,0.08)}
  .nav-item > a{
    display:block;
    padding:14px 4px;
    font-size:13px;
    letter-spacing:0.08em;
    opacity:1;
  }
  .nav-parent > a::before{display:none}
  .nav-submenu{
    position:static !important;
    background:transparent !important;
    border:none !important;
    padding:0 0 10px 8px !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    display:block !important;
    width:auto !important;
  }
  .nav-submenu.level-1{display:flex !important;flex-direction:column;gap:4px}
  .nav-submenu.level-2{display:flex !important;flex-direction:column;gap:2px;padding-left:12px !important}

  /* Solutions has <details class="nav-branch"> wrappers. The default browser
     behaviour hides everything except <summary> when not [open]. On mobile
     we always want the children visible inside the drawer. */
  details.nav-branch{display:block !important}
  details.nav-branch > *:not(summary){
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  details.nav-branch > .nav-submenu.level-2{display:flex !important}
  details.nav-branch summary{
    list-style:none;
    cursor:default;
    padding:6px 4px !important;
  }
  details.nav-branch summary::-webkit-details-marker{display:none}
  details.nav-branch summary::marker{content:""}
  .nav-child,.nav-child-title,.nav-overview{
    display:block !important;
    padding:6px 4px !important;
    font-size:12px !important;
    letter-spacing:0.04em !important;
    opacity:0.78 !important;
    color:var(--ink) !important;
    background:transparent !important;
    border:none !important;
  }
  .nav-child-title{font-weight:600;opacity:1 !important;margin-top:6px}
  .nav-branch[open] .nav-child-title{color:var(--orange) !important}
  .nav-cta{
    margin-top:24px;
    width:100%;justify-content:center;
  }
  /* dark theme bodies get a dark drawer */
  .theme-platform .nav-links,
  .theme-talent .nav-links,
  .theme-portals .nav-links{
    background:#0a1230;
    border-left-color:rgba(255,255,255,0.08);
  }
  .theme-platform .nav-item,
  .theme-talent .nav-item,
  .theme-portals .nav-item{border-bottom-color:rgba(255,255,255,0.08)}
  .theme-platform .nav-item > a,
  .theme-talent .nav-item > a,
  .theme-portals .nav-item > a,
  .theme-platform .nav-child,
  .theme-talent .nav-child,
  .theme-portals .nav-child,
  .theme-platform .nav-child-title,
  .theme-talent .nav-child-title,
  .theme-portals .nav-child-title{color:#fff !important}
  .theme-platform .nav-toggle,
  .theme-talent .nav-toggle,
  .theme-portals .nav-toggle{border-color:rgba(255,255,255,0.15)}
  .theme-platform .nav-toggle-bar,
  .theme-talent .nav-toggle-bar,
  .theme-portals .nav-toggle-bar{background:#fff}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:var(--navy-darker);
  color:var(--white);
  min-height:820px;
  overflow:hidden;
  border-bottom:1px solid var(--line-dark);
}
.hero-bgvideo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  opacity:0.42;
  pointer-events:none;
}
.hero-bgvideo-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(8,16,38,0.35) 0%, rgba(8,16,38,0.78) 65%, rgba(8,16,38,0.92) 100%),
    linear-gradient(180deg, rgba(8,16,38,0.55) 0%, rgba(8,16,38,0.8) 100%);
  z-index:1;
  pointer-events:none;
}
.hero-has-bgvideo .aurora{opacity:0.55;mix-blend-mode:screen}
.hero-has-bgvideo .hero-grid{opacity:0.55}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,black 0%,transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 40%,black 0%,transparent 75%);
  pointer-events:none;
}
.aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.aurora .blob{
  position:absolute;
  width:680px;height:680px;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.55;
  will-change:transform;
}
.aurora .b1{
  background:radial-gradient(circle,rgba(11,43,141,0.85),transparent 60%);
  top:-180px;left:-100px;
  animation:drift1 20s ease-in-out infinite;
}
.aurora .b2{
  background:radial-gradient(circle,rgba(248,145,0,0.55),transparent 60%);
  bottom:-200px;right:-150px;
  animation:drift2 20s ease-in-out infinite;
  animation-delay:-10s;
}
@keyframes drift1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(120px,80px) scale(1.15)}
}
@keyframes drift2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-100px,-60px) scale(1.1)}
}
.particles{position:absolute;inset:0;pointer-events:none}
.crosshair{
  position:absolute;width:36px;height:36px;
  pointer-events:none;
}
.crosshair::before,.crosshair::after{
  content:'';position:absolute;background:var(--orange);
}
.crosshair::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.crosshair::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.crosshair{animation:cross-pulse 3s ease-in-out infinite}
.ch-tl{top:24px;left:24px}
.ch-tr{top:24px;right:24px;animation-delay:0.75s}
.ch-bl{bottom:24px;left:24px;animation-delay:1.5s}
.ch-br{bottom:24px;right:24px;animation-delay:2.25s}
@keyframes cross-pulse{
  0%,100%{opacity:0.4}
  50%{opacity:0.85}
}

.hero-inner{
  max-width:1440px;margin:0 auto;
  padding:48px 36px 96px;
  position:relative;z-index:2;
}
.hero-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  padding-bottom:28px;
  border-bottom:1px solid var(--line-dark);
  margin-bottom:64px;
  flex-wrap:wrap;gap:16px 28px;
}
@media (max-width:780px){
  .hero-inner{padding:36px 22px 72px}
  .hero-meta{font-size:10px;gap:10px 18px;margin-bottom:48px}
  .hero-meta .new-tag{order:3;width:100%}
}
.hero-meta .lang-tags{display:flex;gap:14px;align-items:center}
.hero-meta .lang-tags span{
  border:1px solid var(--line-dark);padding:4px 8px;
}
.hero-meta .new-tag{
  color:var(--orange);
  display:inline-flex;align-items:center;gap:8px;
}
.hero-meta .new-tag::before{
  content:'';width:6px;height:6px;background:var(--orange);
  border-radius:50%;
  animation:blink 1.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

.hero-body{
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:60px;align-items:start;
}
@media (max-width:1100px){.hero-body{grid-template-columns:1fr}}

/* Homepage hero: keep the H1 horizontal (one line per line-mask) instead of
   the narrower default that wraps "Multilingual customer operations," */
@media (min-width:1100px){
  body.theme-home .hero-body{grid-template-columns:1fr 1.15fr;}
  body.theme-home h1.hero-h1{font-size:clamp(44px,5.2vw,64px);line-height:1.06}
  body.theme-home h1.hero-h1.hero-h1-xl{font-size:clamp(52px,5.6vw,72px);line-height:1.04}
  body.theme-home h1.hero-h1 .line-mask>span{white-space:nowrap}
}

.eyebrow{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:32px;
}
.eyebrow::before{content:'•';color:var(--orange);font-size:14px}

h1.hero-h1{
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:clamp(44px,6.4vw,88px);
  line-height:1.08;
  letter-spacing:-0.045em;
  color:var(--white);
  margin-bottom:36px;
}
.line-mask{display:block;overflow:hidden;line-height:1.12;padding-bottom:0.18em}
.line-mask>span{
  display:block;
  transform:translateY(110%);
  transition:transform 0.9s var(--ease);
  line-height:1.12;
}
.hero.loaded .line-mask>span{transform:translateY(0)}
.hero.loaded .line-mask:nth-child(2)>span{transition-delay:0.1s}
.hero.loaded .line-mask:nth-child(3)>span{transition-delay:0.2s}

h1.hero-h1.hero-h1-static{
  color:#ffffff;
  text-shadow:0 2px 18px rgba(8,16,38,0.6), 0 1px 2px rgba(0,0,0,0.35);
}
h1.hero-h1.hero-h1-static > span{
  display:block;
  transform:none !important;
  opacity:1 !important;
  transition:none !important;
  animation:none !important;
  color:#ffffff;
}

.italic-accent{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  color:var(--orange);
  font-weight:400;
}

.word-wheel{
  display:inline-block;
  height:1em;overflow:hidden;
  position:relative;
  vertical-align:top;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 22%,black 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,black 22%,black 78%,transparent 100%);
}
.word-wheel-track{
  display:flex;flex-direction:column;
  transition:transform 0.7s var(--ease-fluid);
  line-height:1;
}
.word-wheel-track span{
  display:block;height:1em;line-height:1;
  font-family:'Instrument Serif',serif;font-style:italic;
  color:var(--orange);font-weight:400;
  white-space:nowrap;
}

.hero-sub{
  font-size:18px;line-height:1.6;
  color:rgba(255,255,255,0.9);
  max-width:520px;
  margin-bottom:44px;
  font-weight:400;
}

.hero-actions{
  display:flex;align-items:center;gap:24px;
  margin-bottom:80px;flex-wrap:wrap;
}
.btn-primary{
  font-family:'Geist Mono',monospace;
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  background:var(--orange);color:var(--ink);
  padding:18px 28px;
  display:inline-flex;align-items:center;gap:14px;
  position:relative;overflow:hidden;
  transition:background 0.4s var(--ease);
  border:1px solid var(--orange);
}
.btn-primary:hover{background:var(--orange-soft)}
.btn-primary .arr{font-size:14px;transition:transform 0.4s var(--ease)}
.btn-primary:hover .arr{transform:translateX(4px)}

.btn-ghost{
  font-family:'Geist Mono',monospace;
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  background:transparent;color:var(--white);
  padding:18px 28px;
  border:1px solid rgba(255,255,255,0.25);
  display:inline-flex;align-items:center;gap:14px;
  transition:border-color 0.4s var(--ease),background 0.4s var(--ease);
}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,0.05)}

.play-btn{
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.4);
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;
  color:var(--white);
}
.play-btn::before{
  content:'';position:absolute;inset:-6px;
  border:1px solid var(--orange);border-radius:50%;
  animation:pulsering 2s var(--ease) infinite;
}
@keyframes pulsering{
  0%{transform:scale(0.85);opacity:1}
  100%{transform:scale(1.4);opacity:0}
}
.play-btn svg{width:14px;height:14px;margin-left:3px}

/* hero stats */
.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-dark);
  padding-top:32px;
  gap:1px;
  background:var(--line-dark);
}
.hero-stat{
  background:var(--navy-darker);
  padding:0 24px 0 0;
}
.hero-stat:nth-child(n+2){padding-left:24px}
.flap{
  display:flex;align-items:baseline;gap:4px;
  font-family:'Inter',sans-serif;
  font-size:48px;font-weight:400;letter-spacing:-0.04em;
  color:var(--white);
  line-height:1;margin-bottom:10px;
}
.flap-num{
  display:inline-block;height:1em;overflow:hidden;
  vertical-align:bottom;
}
.flap-track{
  display:flex;flex-direction:column;
  transition:transform 1.6s cubic-bezier(0.22,1,0.36,1);
}
.flap-track span{display:block;height:1em;line-height:1}
.flap-suffix{color:var(--orange);font-family:'Instrument Serif',serif;font-style:italic;font-size:36px}
.hero-stat-label{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}
@media (max-width:680px){
  .hero-stats{grid-template-columns:1fr;gap:1px}
  .flap{font-size:36px}
}

/* hero globe */
.globe-wrap{
  position:relative;
  will-change:transform;
  transition:transform 0.6s var(--ease);
  display:flex;flex-direction:column;
  min-height:680px;
}
@media (max-width:1100px){.globe-wrap{min-height:0}}
.globe-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:1100px;
  margin:0 auto;
  border:1px solid var(--line-dark);
  background:
    radial-gradient(circle at 50% 50%,rgba(11,43,141,0.25),transparent 60%),
    rgba(255,255,255,0.015);
  cursor:grab;
  overflow:hidden;
  touch-action:none;
}
.globe-stage canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
.globe-tip{
  position:absolute;
  pointer-events:none;
  background:rgba(3,16,62,0.92);
  border:1px solid rgba(248,145,0,0.45);
  padding:8px 10px;
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.08em;
  color:var(--white);
  opacity:0;transform:translateY(-4px);
  transition:opacity 0.18s var(--ease),transform 0.18s var(--ease);
  z-index:5;
  white-space:nowrap;
  backdrop-filter:blur(2px);
}
.globe-tip.show{opacity:1;transform:translateY(0)}
.globe-tip.pin{border-color:var(--orange);box-shadow:0 0 0 1px rgba(248,145,0,0.25)}
.globe-tip .tip-name{
  display:block;font-size:11px;letter-spacing:0;
  font-family:'Geist',-apple-system,sans-serif;
  color:var(--orange);text-transform:none;margin-bottom:2px;
}
.globe-tip .tip-code{
  display:inline-block;color:var(--orange-soft);
  font-size:9px;letter-spacing:0.18em;
}
.globe-tip .tip-coords{
  display:block;color:rgba(255,255,255,0.55);
  font-size:9px;letter-spacing:0.12em;margin-top:2px;
}
.globe-hint{
  position:absolute;
  bottom:14px;left:50%;transform:translateX(-50%);
  font-family:'Geist Mono',monospace;
  font-size:8px;letter-spacing:0.20em;text-transform:uppercase;
  color:rgba(255,255,255,0.32);
  pointer-events:none;
  white-space:nowrap;
  transition:opacity 0.4s var(--ease);
}
.globe-stage.engaged .globe-hint{opacity:0}
.globe-corner{
  position:absolute;width:18px;height:18px;
  pointer-events:none;
}
.globe-corner::before,.globe-corner::after{
  content:'';position:absolute;background:rgba(248,145,0,0.6);
}
.globe-corner.tl{top:-1px;left:-1px}
.globe-corner.tl::before{left:0;top:0;width:1px;height:100%}
.globe-corner.tl::after{left:0;top:0;width:100%;height:1px}
.globe-corner.tr{top:-1px;right:-1px}
.globe-corner.tr::before{right:0;top:0;width:1px;height:100%}
.globe-corner.tr::after{right:0;top:0;width:100%;height:1px}
.globe-corner.bl{bottom:-1px;left:-1px}
.globe-corner.bl::before{left:0;bottom:0;width:1px;height:100%}
.globe-corner.bl::after{left:0;bottom:0;width:100%;height:1px}
.globe-corner.br{bottom:-1px;right:-1px}
.globe-corner.br::before{right:0;bottom:0;width:1px;height:100%}
.globe-corner.br::after{right:0;bottom:0;width:100%;height:1px}

.globe-readout{
  position:absolute;
  font-family:'Geist Mono',monospace;
  font-size:9px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  pointer-events:none;
  display:flex;align-items:center;gap:6px;
}
.globe-readout::before{content:'';width:1px;height:8px;background:var(--orange)}
.gr-tl{top:14px;left:14px}
.gr-tr{top:14px;right:14px;flex-direction:row-reverse}
.gr-tr::before{display:none}
.gr-tr::after{content:'';width:1px;height:8px;background:var(--orange)}
.gr-bl{bottom:14px;left:14px}
.gr-br{bottom:14px;right:14px;flex-direction:row-reverse}
.gr-br::before{display:none}
.gr-br::after{content:'';width:1px;height:8px;background:var(--orange)}

.globe-label{
  position:absolute;
  font-family:'Geist Mono',monospace;
  font-size:9px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--orange);
  pointer-events:none;
  white-space:nowrap;
  opacity:0;
  transition:opacity 0.4s var(--ease);
  transform:translate(-50%,-50%);
}
.globe-label.show{opacity:1}
.globe-label::before{
  content:'';position:absolute;
  width:14px;height:1px;background:var(--orange);
  left:100%;top:50%;
  margin-left:6px;
}

.globe-meta{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark);
  margin-top:18px;
}
.globe-meta-cell{
  background:var(--navy-darker);
  padding:14px 16px;
}
.globe-meta-cell .lbl{
  font-family:'Geist Mono',monospace;
  font-size:9px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  margin-bottom:6px;
}
.globe-meta-cell .val{
  font-size:18px;letter-spacing:-0.02em;
  color:var(--white);
  display:flex;align-items:baseline;gap:8px;
}
.globe-meta-cell .val .it{
  font-family:'Instrument Serif',serif;font-style:italic;
  color:var(--orange);font-size:14px;
}
.live-dot{
  display:inline-flex;align-items:center;gap:8px;color:#3ee08a;
  font-family:'Geist Mono',monospace;font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;
}
.live-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:#3ee08a;animation:blink 1.4s ease-in-out infinite}

/* ---------- editorial headline strip ---------- */
.edit-strip{
  background:var(--white);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:42px 0;
  overflow:hidden;
  white-space:nowrap;
}
.edit-strip-track{
  display:inline-flex;gap:60px;align-items:center;
  animation:tick 32s linear infinite;
  width:max-content;
}
.edit-strip-track span{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:64px;
  font-weight:400;
  color:var(--ink);
  line-height:1;
  letter-spacing:-0.03em;
}
.edit-strip-track .sep{color:var(--orange);font-style:normal;font-size:32px}
@media (max-width:680px){.edit-strip-track span{font-size:42px}}

/* ---------- trust marquee ---------- */
.trust{
  background:var(--white);
  padding:56px 0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.trust-label{
  text-align:center;
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink);opacity:0.55;
  margin-bottom:32px;
}
.trust-marquee{
  position:relative;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%);
}
.trust-track{
  display:flex;gap:80px;align-items:center;
  animation:tick 30s linear infinite;
  width:max-content;
}
.trust-mark{
  font-size:22px;
  color:var(--ink);
  opacity:0.4;
  font-weight:500;
  letter-spacing:-0.01em;
  text-transform:lowercase;
  white-space:nowrap;
  transition:opacity 0.4s var(--ease);
  font-family:'Inter',sans-serif;
}
.trust-mark:hover{opacity:1}
.trust-mark .accent{font-family:'Instrument Serif',serif;font-style:italic}

/* ---------- manifesto quote ---------- */
.manifesto{
  background:var(--white);
  padding:140px 36px;
  border-bottom:1px solid var(--line);
}
.manifesto-inner{
  max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:96px 1fr 260px;
  gap:48px;align-items:start;
}
.man-quote{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  color:var(--orange);
  font-size:140px;
  line-height:0.6;
  font-weight:400;
  margin-top:-10px;
}
.man-text{
  font-family:'Inter',sans-serif;
  font-size:clamp(26px,3.2vw,44px);
  line-height:1.2;
  letter-spacing:-0.025em;
  font-weight:400;
  color:var(--ink);
}
.man-text .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--orange)}
.man-attr{
  border-left:2px solid var(--orange);
  padding-left:18px;
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink);opacity:0.7;
  line-height:1.7;
}
.man-attr .name{display:block;color:var(--ink);opacity:1;font-weight:500;margin-bottom:4px}
.man-word{display:inline-block;opacity:0;transform:translateY(20px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease)}
.man-word.in{opacity:1;transform:none}
@media (max-width:1000px){
  .manifesto-inner{grid-template-columns:1fr}
  .man-quote{font-size:80px}
}

/* ---------- numbered section head ---------- */
.section-head{
  max-width:1440px;margin:0 auto;
  padding:0 36px;
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;
  margin-bottom:64px;
  flex-wrap:wrap;
}
.sh-left{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.sh-num{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--orange);
  font-weight:500;
}
.sh-title{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink);opacity:0.85;
  font-weight:500;
}
.sh-line{
  flex:1;height:1px;background:var(--line);
  position:relative;overflow:hidden;
  min-width:80px;
}
.sh-line::after{
  content:'';position:absolute;top:0;left:0;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  animation:sweep 4s ease-in-out infinite;
}
@keyframes sweep{
  0%{left:-30%}
  100%{left:100%}
}
.sh-edition{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink);opacity:0.7;
  font-weight:500;
}

/* generic h2 */
h2.editorial{
  max-width:1100px;margin:0 auto 64px;
  padding:0 36px 0.12em;
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:clamp(34px,4.6vw,60px);
  line-height:1.15;
  letter-spacing:-0.03em;
  color:var(--ink);
}
h2.editorial .it{
  font-family:'Instrument Serif',serif;
  font-style:italic;color:var(--orange);
  font-weight:400;
}

.section-pad{padding:120px 0;border-bottom:1px solid var(--line)}
@media (max-width:680px){
  .section-pad{padding:80px 0}
  .section-head{margin-bottom:42px}
}
.section-pad.dark{background:var(--navy-darker);color:var(--white);border-bottom:1px solid var(--line-dark)}
.section-pad.dark .sh-title{color:rgba(255,255,255,0.9);opacity:1}
.section-pad.dark .sh-line{background:var(--line-dark)}
.section-pad.dark h2.editorial{color:var(--white)}
.section-pad.dark .sh-edition{color:rgba(255,255,255,0.78);opacity:1}
.section-pad.dark .cmp-col{background:rgba(255,255,255,0.04);color:var(--white);border:1px solid rgba(255,255,255,0.08)}
.section-pad.dark .cmp-col p,.section-pad.dark .cmp-col li{color:rgba(255,255,255,0.85)}
.section-pad.dark .cmp-col.new{background:var(--navy)}
.section-pad.dark .cmp-tag{color:rgba(255,255,255,0.85);opacity:1}
.section-pad.dark .hc-link{color:var(--white);border-color:rgba(255,255,255,0.45)}

/* ---------- feature hall ---------- */
.hall{
  max-width:1440px;margin:0 auto;
  padding:0 36px;
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.hc{
  background:var(--white);
  padding:36px 32px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:380px;
}
.hc>*:not(.orbital):not(.wave):not(.worldmap):not(.shield):not(.barchart){position:relative;z-index:2}
.hc-tag{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:24px;color:var(--ink);opacity:0.72;
}
.hc-tag::before{content:'';width:6px;height:6px;background:var(--orange)}
.hc-h3{
  font-size:30px;font-weight:400;letter-spacing:-0.025em;
  line-height:1.18;margin-bottom:18px;
  padding-bottom:0.05em;
  font-family:'Inter',sans-serif;
  max-width:95%;
}
.hc-h3 .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--orange);font-weight:400}
.hc-body{
  font-size:14.5px;line-height:1.6;
  color:var(--ink);opacity:0.82;
  max-width:420px;font-weight:400;
  margin-bottom:24px;
}
.hc1 .hc-body,.section-pad.dark .hc-body{color:rgba(255,255,255,0.88);opacity:1}
.hc4 .hc-body{color:rgba(10,14,26,0.88);opacity:1}
.hc-link{
  margin-top:auto;padding-top:18px;
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
  align-self:flex-start;
  border-bottom:1px solid var(--ink);padding-bottom:6px;
  transition:color 0.3s var(--ease),border-color 0.3s var(--ease);
  background:linear-gradient(to right,var(--white),var(--white));
  background-clip:padding-box;
}
.hc1 .hc-link,.hc2 .hc-link,.hc3 .hc-link,.hc5 .hc-link{background:none}
.hc4 .hc-link{background:none}
.hc-link:hover{color:var(--orange);border-color:var(--orange)}
.hc-link .arr{transition:transform 0.3s var(--ease)}
.hc-link:hover .arr{transform:translateX(4px)}

.hc1{grid-column:span 7;background:var(--navy);color:var(--white);min-height:440px}
.hc1 .hc-tag{color:rgba(255,255,255,0.65)}
.hc1 .hc-body{color:rgba(255,255,255,0.78)}
.hc1 .hc-link{color:var(--white);border-color:rgba(255,255,255,0.4)}
.hc1 .hc-h3{max-width:60%}
.hc1 .hc-body{max-width:55%}

.hc2{grid-column:span 5;min-height:440px}
.hc2 .hc-h3{max-width:80%}
.hc2 .hc-body{max-width:80%;margin-bottom:90px}
.hc3{grid-column:span 4}
.hc3 .hc-h3{max-width:80%}
.hc3 .hc-body{margin-bottom:140px}
.hc4{grid-column:span 4;background:var(--orange);color:var(--ink)}
.hc4 .hc-tag{opacity:0.85}
.hc4 .hc-tag::before{background:var(--ink)}
.hc4 .hc-body{color:rgba(10,14,26,0.78);max-width:75%}
.hc4 .hc-h3{max-width:75%}
.hc4 .hc-link{color:var(--ink);border-color:var(--ink)}
.hc5{grid-column:span 4}
.hc5 .hc-h3{max-width:80%}
.hc5 .hc-body{margin-bottom:100px}

@media (max-width:1100px){
  .hall{grid-template-columns:repeat(2,1fr)}
  .hc1,.hc2,.hc3,.hc4,.hc5{grid-column:span 1}
  .hc1{grid-column:span 2}
}
@media (max-width:680px){
  .hall{grid-template-columns:1fr}
  .hc1,.hc2,.hc3,.hc4,.hc5{grid-column:span 1}
}

/* hc1 orbital diagram */
.orbital{
  position:absolute;right:-60px;bottom:-60px;
  width:340px;height:340px;
  pointer-events:none;
  opacity:0.7;
  z-index:1;
}
.orbital .ring{
  position:absolute;left:50%;top:50%;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.orbital .r1{width:100%;height:100%;animation:rot1 30s linear infinite}
.orbital .r2{width:75%;height:75%;animation:rot1 22s linear infinite reverse}
.orbital .r3{width:50%;height:50%;animation:rot1 16s linear infinite}
.orbital .ring::before{
  content:'';position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--orange);top:-4px;left:50%;transform:translateX(-50%);
}
.orbital .r2::before{background:var(--white);width:6px;height:6px;top:-3px}
.orbital .r3::before{background:var(--orange);width:10px;height:10px;top:-5px}
.orbital .core{
  position:absolute;left:50%;top:50%;
  width:40px;height:40px;border-radius:50%;
  background:var(--orange);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px rgba(248,145,0,0.2),0 0 0 14px rgba(248,145,0,0.08);
}
@keyframes rot1{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* hc2 waveform */
.wave{
  position:absolute;bottom:74px;right:32px;left:32px;
  height:60px;display:flex;align-items:flex-end;gap:4px;
  z-index:1;opacity:0.85;
}
.wave .bar{
  flex:1;background:var(--navy);
  height:100%;
  transform-origin:bottom;
  animation:waveb 1.6s ease-in-out infinite;
}
.wave .bar:nth-child(3n){background:var(--orange)}
.wave .bar:nth-child(5n){background:var(--navy-deep)}
@keyframes waveb{
  0%,100%{transform:scaleY(0.2)}
  50%{transform:scaleY(1)}
}

/* hc3 world map */
.worldmap{
  position:absolute;left:32px;right:32px;bottom:74px;
  height:120px;
  opacity:0.85;
  z-index:1;
}
.worldmap svg{width:100%;height:100%}
.dots circle{fill:var(--ink);opacity:0.18}
.hubs circle{fill:var(--orange);transform-origin:center;animation:hubpulse 3s ease-in-out infinite}
.hubs circle:nth-child(2){animation-delay:0.6s}
.hubs circle:nth-child(3){animation-delay:1.2s}
.hubs circle:nth-child(4){animation-delay:1.8s}
.hubs circle:nth-child(5){animation-delay:2.4s}
@keyframes hubpulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.6);opacity:0.5}
}

/* hc4 shield */
.shield{
  position:absolute;right:-20px;bottom:-20px;
  width:170px;height:170px;
  pointer-events:none;
  z-index:1;
  opacity:0.85;
}
.shield svg{width:100%;height:100%}
.shield .poly1{animation:rot1 24s linear infinite;transform-origin:50% 50%}
.shield .poly2{animation:rot1 18s linear infinite reverse;transform-origin:50% 50%}

/* hc5 bar chart */
.barchart{
  position:absolute;bottom:74px;left:32px;right:32px;
  display:flex;align-items:flex-end;gap:6px;height:70px;
  z-index:1;opacity:0.9;
}
.barchart .b{
  flex:1;background:var(--navy);
  transform-origin:bottom;
  animation:barwave 2.2s ease-in-out infinite;
}
.barchart .b:nth-child(2){background:var(--navy);animation-delay:0.15s}
.barchart .b:nth-child(3){background:var(--orange);animation-delay:0.3s}
.barchart .b:nth-child(4){background:var(--navy);animation-delay:0.45s}
.barchart .b:nth-child(5){background:var(--orange);animation-delay:0.6s}
.barchart .b:nth-child(6){background:var(--navy);animation-delay:0.75s}
.barchart .b:nth-child(7){background:var(--orange);animation-delay:0.9s}
.barchart .b:nth-child(8){background:var(--navy);animation-delay:1.05s}
@keyframes barwave{
  0%,100%{transform:scaleY(0.5)}
  50%{transform:scaleY(1)}
}

/* ---------- stats ribbon ---------- */
.stats-ribbon{
  background:var(--navy-darker);color:var(--white);
  padding:96px 0;
  border-bottom:1px solid var(--line-dark);
  position:relative;overflow:hidden;
}
.stats-ribbon::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:100% 80px;
}
.stats-grid{
  max-width:1440px;margin:0 auto;
  padding:0 36px;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line-dark);
  position:relative;
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
}
.stat-cell{
  background:var(--navy-darker);
  padding:48px 32px;
  position:relative;
}
.stat-cell::before{
  content:'';position:absolute;top:0;left:32px;width:32px;height:1px;
  background:var(--orange);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease);
}
.stat-cell.in::before{transform:scaleX(1)}
.stat-num{
  font-size:72px;font-weight:400;
  letter-spacing:-0.04em;line-height:0.95;
  margin:18px 0 14px;
  font-family:'Inter',sans-serif;
}
.stat-num .suf{
  font-family:'Instrument Serif',serif;
  font-style:italic;color:var(--orange);
  font-size:48px;
}
.stat-label{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
.stat-tick{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:#3ee08a;
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;
}
.stat-tick::before{content:'';width:5px;height:5px;border-radius:50%;background:#3ee08a;animation:blink 1.6s ease-in-out infinite}
@media (max-width:1000px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.stats-grid{grid-template-columns:1fr}.stat-num{font-size:54px}}

/* ---------- try-it chat ---------- */
.tryit{
  max-width:1440px;margin:0 auto;
  padding:0 36px;
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:48px;
  align-items:stretch;
}
@media (max-width:1000px){.tryit{grid-template-columns:1fr}}
.tryit-left h3{
  font-size:36px;font-weight:400;letter-spacing:-0.03em;
  line-height:1.1;margin-bottom:24px;
  font-family:'Inter',sans-serif;
}
.tryit-left h3 .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--orange);font-weight:400}
.tryit-left p{
  font-size:15px;line-height:1.6;color:var(--ink);opacity:0.7;
  margin-bottom:28px;max-width:420px;font-weight:300;
}
.prompt-list{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.prompt-list .pq-label{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  opacity:0.5;margin-bottom:6px;
}
.pq{
  background:transparent;
  border:1px solid var(--line);
  padding:14px 18px;
  text-align:left;
  font-size:14px;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;
  transition:border-color 0.3s var(--ease),background 0.3s var(--ease),padding 0.3s var(--ease);
  font-weight:400;
}
.pq:hover{border-color:var(--orange);background:rgba(248,145,0,0.04);padding-left:24px}
.pq .arr{
  font-family:'Geist Mono',monospace;font-size:11px;
  color:var(--orange);opacity:0;transform:translateX(-6px);
  transition:opacity 0.3s var(--ease),transform 0.3s var(--ease);
}
.pq:hover .arr{opacity:1;transform:translateX(0)}

.chat-card{
  background:var(--white);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  min-height:520px;
  position:relative;
}
.chat-head{
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Geist Mono',monospace;font-size:11px;
  letter-spacing:0.12em;text-transform:uppercase;
}
.chat-head .ttl{display:flex;align-items:center;gap:10px;color:var(--ink);opacity:0.78}
.chat-head .live{color:#3ee08a;display:inline-flex;align-items:center;gap:8px}
.chat-head .live::before{content:'';width:5px;height:5px;border-radius:50%;background:#3ee08a;animation:blink 1.4s ease-in-out infinite}
.chat-body{
  flex:1;padding:24px 22px;
  display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;max-height:420px;
}
.bubble{
  font-size:14px;line-height:1.5;
  padding:12px 16px;
  max-width:78%;
  font-weight:400;
  white-space:pre-wrap;
}
.bubble.user{
  align-self:flex-end;
  background:var(--navy);color:var(--white);
}
.bubble.bot{
  align-self:flex-start;
  background:var(--white);color:var(--ink);
  border-left:2px solid var(--orange);
}
.bubble .lang{
  display:block;margin-top:6px;
  font-family:'Geist Mono',monospace;
  font-size:9px;letter-spacing:0.14em;text-transform:uppercase;opacity:0.55;
}
.typing{
  align-self:flex-start;
  display:flex;gap:6px;padding:14px 16px;
  background:var(--white);border-left:2px solid var(--orange);
}
.typing span{
  width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:0.4;
  animation:typedot 1.2s ease-in-out infinite;
}
.typing span:nth-child(2){animation-delay:0.15s}
.typing span:nth-child(3){animation-delay:0.3s}
@keyframes typedot{0%,100%{transform:translateY(0);opacity:0.4}50%{transform:translateY(-4px);opacity:1}}
.chat-foot{
  padding:14px 22px;border-top:1px solid var(--line);
  display:flex;gap:10px;
}
.chat-foot input{
  flex:1;border:1px solid var(--line);
  padding:11px 14px;font-family:inherit;font-size:13px;
  background:var(--white);color:var(--ink);outline:none;
}
.chat-foot input:focus{border-color:var(--orange)}
.chat-foot button{
  background:var(--ink);color:var(--white);
  font-family:'Geist Mono',monospace;font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:0 18px;
}
.chat-foot button:hover{background:var(--orange);color:var(--ink)}

/* ---------- comparison ---------- */
.compare{
  max-width:1440px;margin:0 auto;
  padding:0 36px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:900px){.compare{grid-template-columns:1fr}}
.cmp-col{
  padding:48px 36px;
  background:var(--white);
  position:relative;
}
.cmp-col p{color:var(--ink);opacity:0.85;font-size:15.5px;line-height:1.65;margin-bottom:16px;font-weight:400}
.cmp-col p:last-child{margin-bottom:0}
.cmp-col p strong{color:var(--ink);opacity:1}
.cmp-col.old{opacity:0.78}
.cmp-col.new{background:var(--navy);color:var(--white);position:relative}
.cmp-col.new p{color:rgba(255,255,255,0.88);opacity:1}
.cmp-col.new p strong{color:var(--white)}
.cmp-col.new .hc-link{color:var(--white);border-color:rgba(255,255,255,0.45)}
.cmp-col .hc-link{margin-top:18px}
.cmp-tag{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  margin-bottom:18px;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink);opacity:0.85;font-weight:500;
}
.cmp-h3{
  font-size:32px;font-weight:400;letter-spacing:-0.03em;
  line-height:1.18;margin-bottom:32px;
  padding-bottom:0.06em;
  font-family:'Inter',sans-serif;
}
.cmp-h3 .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--orange);font-weight:400}
.cmp-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.cmp-list li{
  font-size:15.5px;line-height:1.55;
  padding:12px 0 12px 32px;
  position:relative;
  border-bottom:1px solid var(--line);
  transition:transform 0.3s var(--ease),padding-left 0.3s var(--ease);
  font-weight:400;
  color:var(--ink);
}
.cmp-col.new .cmp-list li{color:rgba(255,255,255,0.9)}
.cmp-list li:hover{transform:translateX(6px)}
.cmp-col.new .cmp-list li{border-color:var(--line-dark)}
.cmp-list li::before{
  position:absolute;left:0;top:14px;
  font-family:'Geist Mono',monospace;font-size:14px;font-weight:500;
}
.cmp-col.old .cmp-list li::before{content:'×';color:var(--ink);opacity:0.75;font-size:18px;line-height:1}
.cmp-col.new .cmp-list li::before{content:'✓';color:var(--orange)}
.you-badge{
  position:absolute;top:24px;right:24px;
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--orange);
  display:inline-flex;align-items:center;gap:6px;
}

/* ---------- platform overview (premium three-layer) ---------- */
.platform-intro{
  max-width:1440px;margin:-12px auto 48px;
  padding:0 36px;
}
.platform-lede{
  font-family:'Instrument Serif',serif;
  font-size:clamp(24px,2.6vw,34px);
  font-weight:400;
  line-height:1.32;
  letter-spacing:-0.005em;
  color:var(--ink);
  opacity:0.88;
  max-width:760px;
  margin:0;
}
.platform-lede em{
  font-style:italic;
  color:var(--orange);
}
.layers-grid{
  max-width:1440px;margin:0 auto;
  padding:0 36px;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:980px){.layers-grid{grid-template-columns:1fr}}
.layer{
  background:var(--white);
  padding:52px 40px 44px;
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;
  min-height:340px;
  transition:background 0.4s var(--ease);
}
.layer::before{
  content:'';
  position:absolute;left:0;top:0;
  width:0;height:2px;
  background:var(--orange);
  transition:width 0.6s var(--ease);
}
.layer:hover::before{width:100%}
.layer-num{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.2em;
  color:var(--orange);
  margin-bottom:36px;
  font-weight:500;
  display:inline-flex;align-items:center;gap:10px;
}
.layer-num::after{
  content:'';width:24px;height:1px;background:var(--orange);opacity:0.5;
}
.layer-h3{
  font-family:'Inter',sans-serif;
  font-size:clamp(22px,2.2vw,28px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-0.025em;
  color:var(--ink);
  margin:0 0 22px;
  padding-bottom:0.06em;
}
.layer-h3 .it{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  color:var(--orange);
  font-weight:400;
}
.layer p{
  font-family:'Inter',sans-serif;
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink);
  opacity:0.82;
  font-weight:400;
  margin:0;
}
.platform-outro{
  max-width:1440px;margin:64px auto 0;
  padding:0 36px;
}
/* closing block rendered as an image band (aligns with the cards above) */
.platform-outro-band{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:18px;
  padding:clamp(38px,4.4vw,62px) clamp(28px,3.4vw,56px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:26px;
  background:var(--navy-darker);
}
.platform-outro-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform 18s linear;
  filter:saturate(1.04);
}
.platform-outro-band:hover .platform-outro-bg{transform:scale(1.06)}
.platform-outro-band::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg, rgba(3,16,62,0.92) 0%, rgba(3,16,62,0.74) 48%, rgba(3,16,62,0.52) 100%);
}
.platform-outro-band .platform-kicker,
.platform-outro-band .platform-cta{position:relative;z-index:2}
.platform-outro-band .platform-kicker{color:#fff;max-width:760px;margin:0 auto;text-align:center}
.platform-outro-band .platform-kicker em{color:#fff}
.platform-outro-band .platform-cta{
  color:#fff;
  background:none;
  align-self:center;
  margin-top:0;
  border-bottom-color:rgba(255,255,255,0.55);
}
.platform-outro-band .platform-cta:hover{color:var(--orange);border-bottom-color:var(--orange)}
/* beat the theme-home .hc-link !important rule so the CTA reads white on the dark band */
.theme-home .platform-outro-band .platform-cta{color:#fff !important;border-bottom-color:rgba(255,255,255,0.6) !important;border-color:rgba(255,255,255,0.6) !important}
.theme-home .platform-outro-band .platform-cta:hover{color:var(--orange) !important;border-bottom-color:var(--orange) !important;border-color:var(--orange) !important}
.platform-kicker{
  font-family:'Inter',sans-serif;
  font-size:clamp(20px,1.9vw,26px);
  font-weight:400;
  line-height:1.42;
  letter-spacing:-0.018em;
  color:var(--ink);
  max-width:720px;
  margin:0;
}
.platform-kicker em{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  color:var(--orange);
  font-weight:400;
}
.platform-cta{flex-shrink:0;margin-bottom:6px}
@media (max-width:680px){
  .platform-outro{margin-top:40px}
  .platform-outro-band{gap:24px;padding:34px 26px}
  .platform-intro{margin-bottom:36px}
  .layer{padding:40px 28px 36px;min-height:0}
  .layer-num{margin-bottom:24px}
}

/* ---------- case study ---------- */
.case{
  background:var(--orange);
  color:var(--ink);
  padding:140px 36px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.case::before{
  content:'';position:absolute;
  width:560px;height:560px;border-radius:50%;
  background:transparent;
  filter:none;
  top:-180px;right:-120px;
}
.case-inner{
  max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:340px 1fr;
  gap:60px;align-items:center;
  position:relative;z-index:2;
}
@media (max-width:1000px){.case-inner{grid-template-columns:1fr}}
.case-num{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:clamp(120px,14vw,200px);
  line-height:0.85;
  color:var(--navy);
  font-weight:400;
  letter-spacing:-0.04em;
  display:flex;align-items:baseline;
}
.case-num .pct{font-size:0.6em}
.case-quote{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:clamp(28px,3.4vw,46px);
  line-height:1.18;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:32px;
  font-weight:400;
}
.case-attr{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  margin-bottom:32px;
  color:var(--ink);opacity:0.78;
  border-left:2px solid var(--navy);padding-left:16px;
}
.case-attr .name{display:block;font-weight:500;opacity:1;margin-bottom:4px}
.case-cta{
  background:var(--navy);color:var(--white);
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  padding:16px 24px;
  display:inline-flex;align-items:center;gap:12px;
  transition:background 0.4s var(--ease);
  border:1px solid var(--navy);
}
.case-cta:hover{background:var(--navy-deep)}

/* ---------- testimonials ---------- */
.testi{
  max-width:1440px;margin:0 auto;
  padding:0 36px;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:1000px){.testi{grid-template-columns:1fr}}
.t-card{
  background:var(--white);
  padding:40px 32px;
  display:flex;flex-direction:column;gap:24px;
  min-height:340px;
  transition:background 0.4s var(--ease);
}
.t-card.feat{background:var(--navy);color:var(--white)}
.t-card:hover:not(.feat){background:var(--white)}
.t-mark{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:60px;line-height:0.6;
  color:var(--orange);
  font-weight:400;
}
.t-quote{
  font-size:17px;line-height:1.5;
  flex:1;
  font-weight:400;
}
.t-attr{
  display:flex;align-items:center;gap:12px;
  border-top:1px solid var(--line);
  padding-top:20px;
}
.t-card.feat .t-attr{border-color:var(--line-dark)}
.t-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--orange);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Geist Mono',monospace;font-size:12px;font-weight:500;
  letter-spacing:0.05em;
}
.t-meta{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
}
.t-meta .name{display:block;font-weight:500}
.t-meta .role{display:block;opacity:0.6;margin-top:3px}

/* ---------- pricing calculator ---------- */
.calc-grid{
  max-width:1440px;margin:0 auto;
  padding:0 36px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
@media (max-width:1000px){.calc-grid{grid-template-columns:1fr}}
.calc-left h3{
  font-size:48px;font-weight:400;letter-spacing:-0.03em;
  line-height:1.05;margin-bottom:24px;
  font-family:'Inter',sans-serif;
}
.calc-left h3 .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--orange);font-weight:400}
.calc-left p{
  font-size:16px;line-height:1.6;
  color:rgba(255,255,255,0.75);
  max-width:440px;margin-bottom:36px;font-weight:300;
}
.roi-card{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line-dark);
  padding:28px;
}
.roi-label{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);margin-bottom:8px;
}
.roi-amt{
  font-size:54px;font-weight:400;letter-spacing:-0.03em;
  font-family:'Inter',sans-serif;line-height:1;margin-bottom:18px;
}
.roi-amt .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--orange);font-size:36px}
.roi-chart{height:120px}
.roi-chart svg{width:100%;height:100%}
.roi-chart path.fill{fill:rgba(248,145,0,0.18);transition:d 0.5s var(--ease)}
.roi-chart path.line{fill:none;stroke:var(--orange);stroke-width:2;transition:d 0.5s var(--ease)}

.calc-card{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line-dark);
  padding:36px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.calc-row{margin-bottom:32px}
.calc-row label{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.7);margin-bottom:14px;
}
.calc-row label .val{color:var(--orange);font-size:14px}
.slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:1px;background:rgba(255,255,255,0.2);outline:none;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;background:var(--orange);
  cursor:pointer;
  transform:rotate(45deg);
  border:2px solid var(--navy-darker);
  border-radius:0;
  margin-top:0;
}
.slider::-moz-range-thumb{
  width:16px;height:16px;background:var(--orange);
  cursor:pointer;transform:rotate(45deg);
  border:2px solid var(--navy-darker);border-radius:0;
}

.toggle-row{
  display:flex;gap:0;
  border:1px solid var(--line-dark);
  margin-bottom:32px;
}
.toggle-row button{
  flex:1;padding:14px;
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  background:transparent;
  transition:background 0.3s var(--ease),color 0.3s var(--ease);
}
.toggle-row button.on{background:var(--orange);color:var(--ink)}

.calc-result{
  border-top:1px solid var(--line-dark);
  padding-top:28px;
}
.calc-result-label{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);margin-bottom:10px;
}
.calc-amt{
  font-size:64px;font-weight:400;letter-spacing:-0.03em;
  font-family:'Inter',sans-serif;line-height:1;
  display:inline-block;
  transition:transform 0.3s var(--ease);
}
.calc-amt .suf{font-family:'Instrument Serif',serif;font-style:italic;color:var(--orange);font-size:36px}
.calc-amt.bump{transform:scale(1.04)}
.calc-foot{
  margin-top:32px;
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.4);
}

/* ---------- FAQ ---------- */
.faq{
  max-width:880px;margin:0 auto;
  padding:0 36px;
}
.faq-item{
  border-bottom:1px solid var(--line);
  position:relative;
  transition:padding-left 0.3s var(--ease);
}
.faq-item:hover{padding-left:8px}
.faq-q{
  width:100%;text-align:left;
  padding:24px 48px 24px 0;
  font-size:18px;font-weight:400;letter-spacing:-0.01em;
  color:var(--ink);
  position:relative;
  font-family:'Inter',sans-serif;
}
.faq-q .plus{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  transition:transform 0.4s var(--ease),background 0.4s var(--ease),border-color 0.4s var(--ease);
}
.faq-q .plus::before,.faq-q .plus::after{
  content:'';position:absolute;background:var(--ink);
}
.faq-q .plus::before{width:10px;height:1px}
.faq-q .plus::after{width:1px;height:10px;transition:transform 0.4s var(--ease)}
.faq-item.open .faq-q .plus{transform:translateY(-50%) rotate(180deg);background:var(--orange);border-color:var(--orange)}
.faq-item.open .faq-q .plus::after{transform:rotate(90deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height 0.5s var(--ease);
}
.faq-item.open .faq-a{max-height:300px}
.faq-a-inner{
  padding:0 0 28px;
  font-size:15px;line-height:1.6;
  color:var(--ink);opacity:0.72;
  max-width:720px;font-weight:300;
}

/* ---------- final CTA ---------- */
.final-cta{
  background:var(--navy-darker);
  color:var(--white);
  padding:160px 36px;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.final-cta::before{
  content:'cx.';
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:320px;line-height:0.8;
  color:rgba(255,255,255,0.04);
  pointer-events:none;
  letter-spacing:-0.04em;
}
.final-cta::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 0% 0%,rgba(248,145,0,0.18),transparent 50%),
    radial-gradient(ellipse at 100% 100%,rgba(11,43,141,0.5),transparent 50%);
  pointer-events:none;
}
.final-inner{
  position:relative;z-index:2;max-width:920px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.final-eye{
  font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--orange);margin-bottom:32px;
  display:inline-flex;align-items:center;gap:10px;
}
.final-eye::before{content:'•';font-size:14px}
.final-h2{
  font-size:clamp(40px,6vw,80px);
  font-weight:400;letter-spacing:-0.04em;
  line-height:1.12;margin-bottom:42px;
  padding-bottom:0.08em;
  font-family:'Inter',sans-serif;
}
.final-h2 .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--orange);font-weight:400}
.final-cta .hero-sub{
  max-width:760px;
  margin:0 auto 44px;
  text-align:center;
}
.final-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{
  background:var(--white);
  border-top:1px solid var(--line);
  padding:80px 36px 0;
}
.foot-grid{
  max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:64px;
  border-bottom:1px solid var(--line);
}
/* ---- Footer: tablet & mobile compaction ----
   Brand sits full-width on top; the four link sections pair up 2-across
   (Solutions | Industries / Company | Log In), and flat link lists break into
   two columns so the footer stays short instead of one tall single column. */
@media (max-width:1024px){
  .foot-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:40px 48px;
  }
  .foot-brand{grid-column:1 / -1}
  .foot-grid .foot-col > ul{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 28px;
    align-content:start;
  }
  .foot-grid .foot-col li a{display:block;padding:5px 0}
}
.foot-brand .brand{font-size:24px;margin-bottom:18px}
.foot-brand .brand .foot-logo{height:60px;width:auto;display:block}
.foot-tag{
  font-size:14px;line-height:1.6;
  color:var(--ink);opacity:0.85;
  max-width:320px;font-weight:400;
}
.foot-col h4{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink);opacity:0.55;font-weight:500;
  margin-bottom:18px;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col li a{
  font-size:14px;color:var(--ink);
  display:inline-flex;align-items:center;
  position:relative;
  transition:padding-left 0.3s var(--ease),color 0.3s var(--ease);
}
.foot-col li a:hover{padding-left:16px;color:var(--orange)}
.foot-col li a::before{
  content:'→';
  position:absolute;left:0;
  font-family:'Geist Mono',monospace;
  opacity:0;color:var(--orange);
  transition:opacity 0.3s var(--ease);
}
.foot-col li a:hover::before{opacity:1}

.foot-socials{
  display:flex;gap:10px;margin-top:28px;
  padding-top:24px;border-top:1px solid var(--line);
}
.foot-socials a{
  position:relative;
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  background:transparent;color:var(--ink);
  transition:border-color 0.4s var(--ease),background 0.4s var(--ease),color 0.4s var(--ease),transform 0.4s var(--ease);
}
.foot-socials a::before{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--orange);
  opacity:0;transform:scale(0.85);
  transition:opacity 0.4s var(--ease),transform 0.4s var(--ease);
  pointer-events:none;
}
.foot-socials a:hover{
  color:var(--orange);
  border-color:transparent;
  background:rgba(248,145,0,0.06);
  transform:translateY(-2px);
}
.foot-socials a:hover::before{opacity:1;transform:scale(1)}
.foot-socials svg{display:block}

.bottom-bar{
  max-width:1440px;margin:0 auto;
  padding:28px 0;
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink);opacity:0.55;
  flex-wrap:wrap;gap:14px;
}
.bottom-bar .legal{display:flex;gap:24px}

/* utility — vertical-slide reveal, pure slide (no opacity flash)
   Why opacity is NOT animated:
     • Cards have a colored background (white / navy).
     • Animating opacity 0 → 1 makes the empty space behind the card show
       through, which on a white-background page reads as a flash before
       each card appears (especially during cascade waits).
     • By keeping cards always visible and only animating translateY, the
       card itself is the visual placeholder — no flash, just a clean slide.
   • 0.55s duration, cubic-bezier(0.22,1,0.36,1) ease-out
   • 28px Y rise — felt but doesn't disturb layout perception
   • cascade handled in JS (group-aware, order-aware, see site.js) */
.fade-in{
  transform:translate3d(0,28px,0);
}
.fade-in.in{
  animation:cardSlideIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
  will-change:transform;
}
.fade-in.is-done{will-change:auto}     /* free GPU layer when animation finishes */
@keyframes cardSlideIn{
  from{transform:translate3d(0,28px,0)}
  to  {transform:translate3d(0,0,0)}
}

/* low-fi mode: same idea, slightly shorter for budget devices */
html.low-fi .fade-in{transform:translate3d(0,18px,0)}
html.low-fi .fade-in.in{animation:cardSlideInLite 0.4s cubic-bezier(0.22,1,0.36,1) both}
@keyframes cardSlideInLite{
  from{transform:translate3d(0,18px,0)}
  to  {transform:translate3d(0,0,0)}
}

/* hard-fallback: if JS/observer never runs, never trap content shifted */
html.no-js .fade-in,html.no-js .reveal,html.no-js .editorial .ed-word > span{
  transform:none !important;clip-path:none !important
}
.is-loaded .fade-in,.is-loaded .reveal{transform:none;clip-path:none}

@media (prefers-reduced-motion: reduce){
  .fade-in{transform:none}
  .fade-in.in{animation:none;will-change:auto}
}

/* ===== SECTION VISUALS (non-home pages) ===== */
.section-viz{position:absolute;inset:0;width:100%;height:100%;display:block}
body[data-section]:not([data-section="home"]) .globe-stage{
  background:radial-gradient(ellipse at 50% 40%, rgba(248,145,0,0.05), rgba(11,43,141,0) 70%);
  cursor:default;
}
body[data-section]:not([data-section="home"]) .globe-hint{
  text-transform:uppercase;letter-spacing:0.18em;font-size:9px;opacity:0.55;
}

/* ===== SCROLL REVEAL ===== */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity 0.5s var(--ease), transform 0.5s var(--ease);
    transition-delay:calc(var(--rd, 0) * 25ms);
    will-change:opacity,transform;
  }
  .reveal.in-view{opacity:1;transform:none}
}

/* ===== TILT CARDS ===== */
.tilt{transition:transform 0.5s var(--ease), box-shadow 0.5s var(--ease)}
.tilt:hover{box-shadow:0 24px 60px -28px rgba(248,145,0,0.45)}

/* ===== RIPPLE ON CTA ===== */
.btn-primary,.btn-ghost,.nav-cta,.hc-link{position:relative;overflow:hidden}
.ripple{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  background:radial-gradient(circle, rgba(255,210,140,0.55), rgba(248,145,0,0) 70%);
  pointer-events:none;
  animation:ripple-out 0.65s var(--ease) forwards;
}
@keyframes ripple-out{
  to{transform:translate(-50%,-50%) scale(34);opacity:0}
}

/* ===== HALL CARD HOVER POLISH ===== */
.hc{transition:transform 0.6s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease)}
.hc::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(248,145,0,0) 0%, rgba(248,145,0,0.06) 50%, rgba(248,145,0,0) 100%);
  opacity:0;transition:opacity 0.6s var(--ease);pointer-events:none;
}
.hc:hover::after{opacity:1}

/* ===== NAV ACTIVE INDICATOR ===== */
.nav-item > a{position:relative;transition:color 0.3s var(--ease)}
.nav-item > a::after{
  content:'';position:absolute;left:50%;bottom:-6px;
  width:0;height:1px;background:var(--orange);
  transform:translateX(-50%);
  transition:width 0.4s var(--ease);
}
.nav-item:hover > a::after{width:24px}
.nav-item:hover > a{color:var(--orange)}

/* ===== HERO HEADLINE SHEEN for inner pages ===== */
body[data-section]:not([data-section="home"]) .hero-h1 .line-mask > span{
  background:linear-gradient(120deg, var(--ink) 0%, var(--ink) 40%, rgba(255,210,140,0.95) 50%, var(--ink) 60%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:headlineSheen 9s linear infinite;
}
@keyframes headlineSheen{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

/* ===== ANIMATED UNDERLINE for inline links ===== */
.hc-link::before{
  content:'';position:absolute;left:0;bottom:-3px;
  width:0;height:1px;background:var(--orange);
  transition:width 0.45s var(--ease);
}
.hc-link:hover::before{width:100%}
.hc-link .arr{transition:transform 0.45s var(--ease)}
.hc-link:hover .arr{transform:translateX(6px)}

/* ===== SOFT PARALLAX BACKDROP for inner heroes ===== */
body[data-section]:not([data-section="home"]) .aurora .blob.b1{
  animation:floatA 16s ease-in-out infinite alternate;
}
body[data-section]:not([data-section="home"]) .aurora .blob.b2{
  animation:floatB 22s ease-in-out infinite alternate;
}
@keyframes floatA{
  from{transform:translate(-10%,-6%) scale(1)}
  to{transform:translate(8%,4%) scale(1.08)}
}
@keyframes floatB{
  from{transform:translate(6%,4%) scale(1.06)}
  to{transform:translate(-6%,-4%) scale(0.98)}
}

/* ===== SECTION HEAD SCROLL ACCENT ===== */
.section-head{position:relative}
.section-head::before{
  content:'';position:absolute;left:0;top:50%;
  width:0;height:1px;background:linear-gradient(90deg, var(--orange), transparent);
  transition:width 1.2s var(--ease) 0.15s;
}
.section-pad.reveal.in-view .section-head::before{width:80px}

/* ===== HERO ACTION BUTTON SHEEN ===== */
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform 0.7s var(--ease);
  pointer-events:none;
}
.btn-primary:hover::before{transform:translateX(100%)}

/* ===== TICKER ACCENT (legacy hook — refined styling lives with .ticker block) ===== */

/* ===== HERO CROSSHAIR DRAW ===== */
@media (prefers-reduced-motion: no-preference){
  .crosshair{animation:chFade 1.4s var(--ease) both}
  @keyframes chFade{from{opacity:0;transform:scale(0.6)}to{opacity:1;transform:scale(1)}}
}

/* ============================================================
   IN-CONTENT VISUALS & ANIMATIONS
   Decorative shapes, animated borders, scroll-triggered text,
   list-item reveal, gradient sweeps and ornament marks layered
   into existing section markup. No new HTML required.
   ============================================================ */

/* --- decorative section ornament (placed by JS as .section-orn svg) ---
   Moved to bottom-right of the section so it never overlaps the header / sh-edition. */
.section-orn{
  position:absolute;pointer-events:none;
  right:36px;bottom:36px;
  width:88px;height:88px;
  opacity:0;transform:rotate(-12deg) scale(0.85);
  transition:opacity 1s var(--ease) 0.1s, transform 1.1s var(--ease) 0.1s;
  z-index:0;
}
.section-pad{position:relative;overflow:hidden}
.section-pad.in-view .section-orn{opacity:0.35;transform:rotate(0deg) scale(1)}
.section-orn .ring{stroke:var(--orange);stroke-width:1;fill:none;opacity:0.6}
.section-orn .dot{fill:var(--orange)}
.section-orn .arc{stroke:rgba(248,145,0,0.55);stroke-width:1;fill:none;stroke-dasharray:4 6;animation:dashSpin 16s linear infinite}
@keyframes dashSpin{to{stroke-dashoffset:-200}}
.section-pad.dark .section-orn{opacity:0}
.section-pad.dark.in-view .section-orn{opacity:0.28}
@media (max-width:780px){.section-orn{display:none}}

/* --- subtle dot-grid backdrop on alternating sections (disabled — keep backgrounds pure white) --- */
.section-pad:nth-of-type(even)::before{display:none}
.section-pad.dark:nth-of-type(even)::before{
  display:block;
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  opacity:0.45;
}

/* --- left rail accent: thin vertical bar that grows in --- */
.section-pad::after{
  content:'';position:absolute;left:36px;top:120px;
  width:1px;height:0;
  background:linear-gradient(180deg, var(--orange), rgba(248,145,0,0));
  transition:height 1.4s var(--ease) 0.2s;
}
.section-pad.in-view::after{height:80px}

/* --- editorial word/letter stagger (set by JS wrapping spans) --- */
.editorial .ed-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:0.18em;line-height:1.15}
.editorial .ed-word > span{display:inline-block;transform:translateY(110%);opacity:0;transition:transform 0.55s var(--ease), opacity 0.55s var(--ease);line-height:1.15}
.section-pad.in-view .editorial .ed-word > span{transform:none;opacity:1}
.section-pad.in-view .editorial .ed-word{transition-delay:calc(var(--wi, 0) * 18ms)}
.editorial .ed-word > span{transition-delay:calc(var(--wi, 0) * 18ms)}
/* fallback: if a section never gets in-view (older browser, no IO), still show editorial words */
html.no-io .editorial .ed-word > span{transform:none;opacity:1}

/* --- section-head numeric badge animated draw (applies to .sh-num only; JS no longer injects .sh-index) --- */
.section-head .sh-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--orange);
  border-radius:50%;
  font-family:'Geist Mono',monospace;font-size:11px;
  color:var(--orange);
  position:relative;
  background:rgba(248,145,0,0.04);
  transition:transform 0.5s var(--ease), background 0.4s var(--ease);
}
.section-head .sh-num::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px dashed rgba(248,145,0,0.35);
  animation:hubSpin 18s linear infinite;
  pointer-events:none;
}
.section-head .sh-index{display:none}
@keyframes hubSpin{to{transform:rotate(360deg)}}

/* --- hall card: animated traced border on hover --- */
.hc{position:relative}
.hc::before{
  content:'';position:absolute;inset:0;
  border:1px solid transparent;
  background:linear-gradient(90deg, transparent, rgba(248,145,0,0.7), transparent) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity 0.5s var(--ease);
  pointer-events:none;
}
.hc:hover::before{opacity:0.8;animation:traceBorder 2.4s var(--ease) infinite}
@keyframes traceBorder{
  0%{background-position:0% 0%}
  100%{background-position:200% 0%}
}

/* --- card heading rises a touch on hover --- */
.hc-h3{transition:transform 0.5s var(--ease), color 0.4s var(--ease)}
.hc:hover .hc-h3{transform:translateY(-2px);color:var(--orange)}

/* --- card body paragraph: subtle left-shift bullet on hover --- */
.hc-body p{transition:transform 0.5s var(--ease), color 0.4s var(--ease);position:relative}
.hc:hover .hc-body p:first-child{transform:translateX(2px)}

/* --- list-item reveal --- */
.hc-body ul,.hc-body ol{padding:0;margin:0;list-style:none}
.hc-body li{
  position:relative;padding-left:18px;margin-bottom:8px;
  opacity:0;transform:translateY(8px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay:calc(var(--li, 0) * 60ms);
}
.hc-body li::before{
  content:'';position:absolute;left:0;top:0.65em;
  width:8px;height:1px;background:var(--orange);
  transform-origin:left;transform:scaleX(0);
  transition:transform 0.6s var(--ease) 0.2s;
}
.in-view .hc-body li{opacity:1;transform:none}
.in-view .hc-body li::before{transform:scaleX(1)}

/* --- section-pad gets a soft scroll-progress line at top --- */
.section-pad > .sh-line{position:relative;overflow:hidden}
.section-pad > .sh-line::after{
  content:'';position:absolute;left:0;top:0;
  height:100%;width:0%;
  background:linear-gradient(90deg, var(--orange), rgba(248,145,0,0));
  transition:width 1.6s var(--ease) 0.2s;
}
.section-pad.in-view > .sh-line::after{width:30%}

/* --- text-panel cells get a left accent that draws up --- */
.text-panel-cell{position:relative}
.text-panel-cell::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:1px;background:var(--orange);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform 1s var(--ease) 0.3s;
}
.section-pad.in-view .text-panel-cell::before{transform:scaleY(1);transform-origin:top}

/* --- inline link arrow gets a tiny trail --- */
.hc-link::after{
  content:'';display:inline-block;width:0;height:1px;
  background:var(--orange);margin-left:4px;
  transition:width 0.4s var(--ease);
  vertical-align:middle;
}
.hc-link:hover::after{width:14px}

/* --- final CTA card: animated conic glow --- */
.cta-card{position:relative;overflow:hidden;isolation:isolate}
.cta-card::before{
  content:'';position:absolute;inset:-30%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(248,145,0,0.18) 80deg, transparent 160deg, transparent 360deg);
  animation:ctaSpin 14s linear infinite;
  z-index:-1;
}
@keyframes ctaSpin{to{transform:rotate(360deg)}}

/* --- ticker hover slowdown handled by JS (smooth speed tween, not hard pause) --- */

/* --- footer columns lift in --- */
@media (prefers-reduced-motion: no-preference){
  .foot-col{transition:transform 0.7s var(--ease), opacity 0.7s var(--ease)}
}

/* --- inline number badge for any data-num attr (set by JS) --- */
.num-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;padding:0 8px;
  border-radius:14px;border:1px solid var(--orange);
  font-family:'Geist Mono',monospace;font-size:11px;
  color:var(--orange);background:rgba(248,145,0,0.06);
  margin-right:10px;letter-spacing:0.06em;
}

/* --- count-up number flair --- */
.cu{font-variant-numeric:tabular-nums}

/* --- decorative SVG inside hero hero-meta --- */
.hero-meta{position:relative}
.hero-meta::after{
  content:'';position:absolute;left:-12px;top:50%;
  width:6px;height:6px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(248,145,0,0.6);
  animation:metaPing 2.6s var(--ease) infinite;
}
@keyframes metaPing{
  0%{box-shadow:0 0 0 0 rgba(248,145,0,0.55)}
  70%{box-shadow:0 0 0 12px rgba(248,145,0,0)}
  100%{box-shadow:0 0 0 0 rgba(248,145,0,0)}
}

/* --- card lift micro on .pq quotes --- */
.pq{transition:transform 0.6s var(--ease), border-color 0.4s var(--ease)}
.pq:hover{transform:translateY(-3px);border-color:var(--orange)}

/* --- card heading hover accent (subtle bar slide) --- */
.hc .hc-h3{position:relative}
.hc .hc-h3::before{
  content:'';display:block;
  width:0;height:2px;background:var(--orange);
  margin-bottom:14px;
  transition:width 0.55s var(--ease);
}
.hc.in-view .hc-h3::before,.hc:hover .hc-h3::before{width:36px}
.hc4 .hc-h3::before{background:var(--ink)}
.hc1 .hc-h3::before{background:var(--orange)}

/* --- buttons get a small chevron pulse --- */
.btn-primary .arr,.btn-ghost .arr,.nav-cta .arrow{
  display:inline-block;
  transition:transform 0.4s var(--ease);
}
.btn-primary:hover .arr,.btn-ghost:hover .arr,.nav-cta:hover .arrow{transform:translateX(4px)}

/* ---------- editorial heading ornament + glow ---------- */
h2.editorial{position:relative;display:block}
h2.editorial::before{
  content:'';
  display:block;
  width:48px;height:2px;
  background:linear-gradient(90deg,var(--orange),rgba(248,145,0,0));
  margin:0 0 22px;
  opacity:0.9;
  transform-origin:left center;
  animation:edBar 4.6s ease-in-out infinite;
  border-radius:2px;
}
.section-pad.dark h2.editorial::before{
  background:linear-gradient(90deg,var(--orange),rgba(248,145,0,0));
  opacity:1;
}
@keyframes edBar{
  0%,100%{transform:scaleX(1);opacity:0.9}
  50%{transform:scaleX(1.5);opacity:1}
}

/* ---------- compare card subtle shimmer ---------- */
.cmp-col{position:relative;overflow:hidden}
.cmp-col::after{
  content:'';position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(248,145,0,0.06) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform 1.2s var(--ease);
  pointer-events:none;
}
.cmp-col:hover::after{transform:translateX(100%)}

/* ---------- ensure no vertical clipping on italics anywhere ---------- */
.it,.italic-accent{padding-bottom:0.04em;display:inline-block}

/* ============================================================
   ORANGE CASE SECTION — readability fixes
   ============================================================ */
.case .case-attr{opacity:0.92;color:var(--ink);font-weight:500}
.case .case-quote{color:var(--ink);font-weight:400}
.case .case-num{color:var(--navy);text-shadow:0 1px 0 rgba(255,255,255,0.25)}
.case .editorial,
.case h2.editorial{color:var(--ink)}
.case .editorial .ed-word > span{opacity:1}
.case .editorial::before{background:linear-gradient(90deg,var(--navy),rgba(11,43,141,0));opacity:1}
/* keep text inside case section visible even if .ed-word IO never fires */
.case .editorial .ed-word > span,
.case .case-quote,
.case .case-attr{opacity:1 !important;transform:none !important}

/* ============================================================
   1) CLIP-PATH TEXT REVEAL (.cp-reveal)
   Words sweep in from the left in cinematic sequence.
   Use: <h2 class="cp-reveal">Word Word Word</h2>
   The JS wraps words; CSS animates their clip-path + translate.
   ============================================================ */
.cp-reveal{display:inline-block}
.cp-reveal .cp-word{
  display:inline-block;
  margin-right:0.28em;
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
  transform:translateX(-18px);
  opacity:0;
  transition:
    clip-path 0.85s cubic-bezier(.2,.7,.2,1),
    -webkit-clip-path 0.85s cubic-bezier(.2,.7,.2,1),
    transform 0.85s cubic-bezier(.2,.7,.2,1),
    opacity 0.5s var(--ease);
  transition-delay:calc(var(--cpw, 0) * 70ms);
  padding-bottom:0.08em;
}
.cp-reveal.in-view .cp-word{
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
  transform:translateX(0);
  opacity:1;
}
html.no-js .cp-reveal .cp-word,
html.no-io .cp-reveal .cp-word{
  clip-path:none;-webkit-clip-path:none;transform:none;opacity:1;
}

/* ============================================================
   2) SCROLL-REVEAL TIMELINE (.timeline) — refined / professional
   • neutral 1px rail (was 2px orange gradient — felt dated)
   • two-ring step indicator: thin outer ring + inner dot, both fill
     orange on activation (no heavy glow halo)
   • slide-up only on reveal (no opacity fade → no white flash)
   • typographic upgrade: bigger h4, tabular labels, hover color shift
   ============================================================ */
.timeline{
  position:relative;
  max-width:980px;
  margin:0 auto;
  padding:8px 36px 0 96px;
}
/* Neutral background rail — thin line that fades at both ends */
.timeline::before{
  content:'';
  position:absolute;
  left:48px;
  top:14px;
  bottom:42px;
  width:1px;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.14) 10%,
    rgba(0,0,0,0.14) 90%,
    rgba(0,0,0,0) 100%);
}

.tl-step{
  position:relative;
  padding:0 0 72px 0;
  transform:translate3d(0,32px,0);
  transition:transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.tl-step.in-view{transform:translate3d(0,0,0)}
.tl-step:last-child{padding-bottom:0}

/* Outer ring of the step indicator */
.tl-step::before{
  content:'';
  position:absolute;
  left:-56px;       /* outside the .tl-step padding-left of 0 */
  top:6px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--line);
  transition:
    border-color 0.55s var(--ease),
    background 0.55s var(--ease);
  z-index:2;
}
.tl-step.in-view::before{
  border-color:var(--orange);
}
/* Inner dot — sits inside the ring */
.tl-step::after{
  content:'';
  position:absolute;
  left:-50px;
  top:12px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--line);
  transition:background 0.55s var(--ease), transform 0.55s var(--ease);
  z-index:3;
}
.tl-step.in-view::after{
  background:var(--orange);
  transform:scale(1.15);
}

/* Step label — premium mono with leading rule */
.tl-step .tl-num{
  font-family:'Geist Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:500;
  margin-bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:12px;
}

/* Step heading — bigger, refined */
.tl-step h4{
  font-family:'Inter',sans-serif;
  font-size:clamp(20px, 2.1vw, 26px);
  font-weight:400;
  letter-spacing:-0.025em;
  margin-bottom:14px;
  color:var(--ink);
  line-height:1.22;
  text-wrap:balance;
  transition:color 0.35s var(--ease);
  font-feature-settings:"ss01","kern" 1,"liga" 1;
}
.tl-step:hover h4{color:var(--orange)}

/* Body — better contrast + reading rhythm */
.tl-step p{
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink);
  opacity:0.88;
  font-weight:400;
  max-width:580px;
  font-feature-settings:"kern" 1,"liga" 1;
}

/* Dark section variant */
.section-pad.dark .timeline::before{
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.16) 10%,
    rgba(255,255,255,0.16) 90%,
    rgba(255,255,255,0) 100%);
}
.section-pad.dark .tl-step::before{
  background:var(--navy-darker);
  border-color:rgba(255,255,255,0.22);
}
.section-pad.dark .tl-step.in-view::before{border-color:var(--orange)}
.section-pad.dark .tl-step::after{background:rgba(255,255,255,0.3)}
.section-pad.dark .tl-step.in-view::after{background:var(--orange)}
.section-pad.dark .tl-step h4{color:var(--white)}
.section-pad.dark .tl-step p{color:rgba(255,255,255,0.88);opacity:1}

/* Mobile: tighten layout */
@media (max-width:680px){
  .timeline{padding:8px 18px 0 56px}
  .timeline::before{left:24px}
  .tl-step{padding-bottom:54px}
  .tl-step::before{left:-40px;width:14px;height:14px}
  .tl-step::after{left:-36px;top:10px;width:6px;height:6px}
}

/* ============================================================
   3) TYPEWRITER ROTATING PHRASES (.rotator)
   ============================================================ */
.rotator{
  position:relative;
  display:inline-block;
  vertical-align:baseline;
  font-family:'Instrument Serif',serif;
  font-style:italic;
  color:var(--orange);
  font-weight:400;
  min-width:8ch;
}
.rotator .rt-current{
  display:inline-block;
  position:relative;
  white-space:nowrap;
}
.rotator .rt-caret{
  display:inline-block;
  width:2px;height:0.95em;
  background:var(--orange);
  vertical-align:-0.12em;
  margin-left:2px;
  animation:rtCaret 1s steps(2,start) infinite;
}
@keyframes rtCaret{
  0%,100%{opacity:1}
  50%{opacity:0}
}
.rotator.is-typing .rt-caret{animation-duration:0.6s}
html.no-js .rotator .rt-caret{display:none}

/* ---------- footer contact list (light footer) ---------- */
.foot-contact{
  list-style:none;
  margin-top:28px;
  display:flex;flex-direction:column;gap:18px;
  max-width:320px;
}
.foot-contact li{
  display:flex;flex-direction:column;gap:6px;
  font-size:14px;line-height:1.55;
  color:var(--ink);
}
.foot-contact .fc-lbl{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--orange);
  font-weight:500;
  display:inline-flex;align-items:center;gap:8px;
}
.foot-contact .fc-lbl::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 6px rgba(248,145,0,0.55);
}
.foot-contact a{
  color:var(--ink);
  text-decoration:none;
  font-weight:400;
  transition:color 0.3s var(--ease);
  position:relative;width:fit-content;
}
.foot-contact a::after{
  content:'';position:absolute;left:0;bottom:-2px;
  width:0;height:1px;background:var(--orange);
  transition:width 0.4s var(--ease);
}
.foot-contact a:hover{color:var(--orange)}
.foot-contact a:hover::after{width:100%}
.foot-contact li > span:not(.fc-lbl){
  color:var(--ink);opacity:0.85;
  font-weight:300;
}

/* ============================================================
   SELECTION READABILITY
   Default selection paints orange — invisible on orange/yellow
   surfaces. Scope overrides so selected text is always legible.
   ============================================================ */
::selection{background:var(--navy);color:var(--white)}
::-moz-selection{background:var(--navy);color:var(--white)}
.case ::selection,
.hc4 ::selection,
.btn-primary ::selection,
.t-avatar ::selection,
.case ::-moz-selection,
.hc4 ::-moz-selection,
.btn-primary ::-moz-selection,
.t-avatar ::-moz-selection{background:var(--navy);color:var(--white)}
.section-pad.dark ::selection,
.cmp-col.new ::selection,
.hc1 ::selection,
.t-card.feat ::selection,
.section-pad.dark ::-moz-selection,
.cmp-col.new ::-moz-selection,
.hc1 ::-moz-selection,
.t-card.feat ::-moz-selection{background:var(--orange);color:var(--ink)}

/* ============================================================
   COMPARE PANEL (.cmp-col.new) — navy text contrast fixes
   The "Defrilex Gig CX model" tag and child links inherit ink
   color from base rules; force readable color on navy regardless
   of whether the parent section is .section-pad or .section-pad.dark.
   ============================================================ */
.cmp-col.new .cmp-tag{color:rgba(255,255,255,0.85);opacity:1}
.cmp-col.new .cmp-tag::before{background:var(--orange)}
.cmp-col.new .cmp-h3{color:var(--white)}
.cmp-col.new .cmp-h3 .it{color:var(--orange-soft)}
.cmp-col.new .cmp-list li{color:rgba(255,255,255,0.92);border-color:var(--line-dark)}
.cmp-col.new .cmp-list li strong{color:var(--white)}
.cmp-col.new .hc-link{background:none;color:var(--white);border-color:rgba(255,255,255,0.5)}
.cmp-col.new .hc-link:hover,
.cmp-col.new .hc-link:focus-visible{color:var(--orange-soft);border-color:var(--orange-soft)}
.cmp-col.new .hc-link::before{background:var(--orange-soft)}

/* keep the orange shimmer subtle — but never fade text on hover */
.cmp-col.new::after{
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%);
}

/* ============================================================
   HOVER COLOR FIX on orange surfaces
   Orange-on-orange = invisible. On panels with an orange
   background, route hover to navy-on-orange instead.
   ============================================================ */
.hc4 .hc-link:hover,
.hc4 .hc-link:focus-visible,
.case a:hover,
.case a:focus-visible{color:var(--navy);border-color:var(--navy)}
.hc4 .hc-link::before{background:var(--navy)}
.hc4 .hc-link::after{background:var(--navy)}
.hc4 .hc-h3 .it,
.hc4:hover .hc-h3,
.hc4:hover .hc-h3 .it{color:var(--navy)}
.hc4 .hc-body li::before{background:var(--navy)}

/* ============================================================
   CLIP-PATH TEXT REVEAL — site-wide
   Auto-applied via JS to .editorial, .cmp-h3, .hc-h3, .final-h2.
   Words sweep in from the left; nested inline tags (.it, strong)
   are preserved by walking child nodes.
   ============================================================ */
.editorial,.cmp-h3,.hc-h3,.final-h2{display:block}
.editorial.cp-reveal,
.cmp-h3.cp-reveal,
.hc-h3.cp-reveal,
.final-h2.cp-reveal{display:block}
.cp-reveal .cp-word{
  display:inline-block;
  margin-right:0;
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
  transform:translateX(-14px);
  opacity:0;
  transition:
    clip-path 0.85s cubic-bezier(.2,.7,.2,1),
    -webkit-clip-path 0.85s cubic-bezier(.2,.7,.2,1),
    transform 0.85s cubic-bezier(.2,.7,.2,1),
    opacity 0.5s var(--ease);
  transition-delay:calc(var(--cpw, 0) * 55ms);
  padding-bottom:0.08em;
  will-change:clip-path,transform,opacity;
}
.cp-reveal.in-view .cp-word{
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
  transform:translateX(0);
  opacity:1;
}
@media (prefers-reduced-motion:reduce){
  .cp-reveal .cp-word{
    clip-path:none;-webkit-clip-path:none;
    transform:none;opacity:1;transition:none;
  }
}

/* ============================================================
   RESPONSIVE & SMOOTHNESS
   Tighter padding on small screens, momentum scrolling on iOS,
   stable touch targets, reduced GPU thrash.
   ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}
img,canvas,svg{max-width:100%;height:auto}

@media (max-width:1024px){
  .section-pad{padding:96px 0}
  .cmp-col{padding:40px 28px}
  .cmp-h3{font-size:28px;margin-bottom:24px}
  .editorial{font-size:clamp(34px,5vw,56px)}
}
@media (max-width:680px){
  .section-pad{padding:64px 0}
  .hall,.compare,.testi,.calc-grid{padding-left:18px;padding-right:18px}
  .hc{min-height:auto;padding:30px 22px}
  .hc1,.hc2,.hc3,.hc4,.hc5{min-height:auto}
  .hc1 .hc-h3,.hc2 .hc-h3,.hc3 .hc-h3,.hc4 .hc-h3,.hc5 .hc-h3,
  .hc1 .hc-body,.hc2 .hc-body,.hc3 .hc-body,.hc4 .hc-body,.hc5 .hc-body{
    max-width:100%;
  }
  .hc2 .hc-body,.hc3 .hc-body,.hc4 .hc-body,.hc5 .hc-body{margin-bottom:24px}
  .hc-link{white-space:normal;line-height:1.35}
  .cmp-col{padding:32px 22px}
  .cmp-h3{font-size:24px;margin-bottom:20px;letter-spacing:-0.025em}
  .cmp-col p,.cmp-col li{font-size:15px}
  .hero-actions,.final-actions{flex-wrap:wrap;gap:12px}
  .btn-primary,.btn-ghost{width:100%;justify-content:center}
  .nav-cta{display:none}
  .ticker{font-size:11px}
  .editorial{font-size:clamp(28px,7vw,40px)}
  .final-h2{font-size:clamp(28px,7vw,44px)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px 22px}
  .foot-brand{grid-column:1 / -1}
  .foot-grid .foot-col > ul{grid-template-columns:1fr;gap:9px}
  footer{padding:56px 20px 0}
  .foot-grid{padding-bottom:40px}
  .bottom-bar{flex-direction:column;gap:12px;align-items:flex-start}
  .section-head{flex-wrap:wrap;gap:12px}
  .sh-line{display:none}
}
@media (max-width:420px){
  /* keep the two-column section grid even on small phones (no 1-col collapse) */
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .foot-brand{grid-column:1 / -1}
  footer{padding:48px 16px 0}
  .cmp-col{padding:28px 18px}
}

/* will-change is now scoped to .fade-in.in (only during animation) and removed
   on .fade-in.is-done — see the .fade-in block above. Keeping this stub as a
   compatibility no-op so future search-and-replace doesn't get confused. */
.cmp-col,.hc,.t-card{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .fade-in,.cmp-col,.hc,.t-card{will-change:auto}
}

/* =====================================================
   PREMIUM TEXT POLISH
   • text-wrap:balance → display headlines wrap with even line lengths
     (the same trick magazines use to avoid orphaned words)
   • OpenType features → tighter kerning, true-width numerals, smarter ligatures
   • refined eyebrow accents → editorial dash instead of bullet
   • higher body contrast → easier to read, less washed out
   • larger display sizes on big screens → more dramatic without crowding mobile
   ===================================================== */

/* Headlines: balanced wrapping + OpenType refinements */
h1.hero-h1,
h2.editorial,
.cmp-h3,
.hc-h3,
.final-h2{
  text-wrap:balance;
  font-feature-settings:"ss01","cv11","kern" 1,"liga" 1;
  font-optical-sizing:auto;
}

/* Editorial section headlines — more dramatic on big screens */
h2.editorial{
  font-size:clamp(34px,4.9vw,68px);
  letter-spacing:-0.035em;
  line-height:1.12;
}
h2.editorial::before{
  content:"";
  display:block;
  width:42px;height:1px;
  background:var(--orange);
  margin-bottom:22px;
  transform:scaleX(0);
  transform-origin:left center;
  animation:edRule 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
@keyframes edRule{to{transform:scaleX(1)}}
.section-pad.dark h2.editorial::before{background:var(--orange)}

/* Hero headline — refined */
h1.hero-h1{letter-spacing:-0.046em;line-height:1.06}

/* Final CTA — same refinements */
.final-h2{letter-spacing:-0.042em;line-height:1.10}

/* Italic-serif accent (orange "Instrument Serif" inside headlines)
   — polish kerning and breathing room around the italic word */
h1.hero-h1 .it,
h2.editorial .it,
.cmp-h3 .it,
.hc-h3 .it,
.final-h2 .it{
  letter-spacing:-0.005em;
  padding:0 0.04em 0 0.06em;
  font-feature-settings:"liga" 1,"dlig" 1;
}

/* Card headings — slight bump for better hierarchy */
.cmp-h3{font-size:clamp(26px,2.4vw,34px);line-height:1.16;letter-spacing:-0.032em}
.hc-h3 {font-size:clamp(24px,2.2vw,32px);line-height:1.16;letter-spacing:-0.028em}

/* Body copy — better contrast + reading rhythm */
.hc-body{
  opacity:0.9;
  line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1;
}
.cmp-col > p{
  opacity:0.92;
  line-height:1.68;
  font-feature-settings:"kern" 1,"liga" 1;
}
.hero-sub{
  font-size:18.5px;
  line-height:1.62;
  letter-spacing:-0.005em;
  color:rgba(255,255,255,0.93);
  font-feature-settings:"kern" 1,"liga" 1;
}

/* Eyebrows — replace bullet with a thin editorial rule */
.eyebrow{display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{
  content:"";
  width:24px;height:1px;
  background:var(--orange);
  display:inline-block;
  flex:0 0 auto;
  font-size:0; /* nuke the old bullet glyph if it survives */
}
.final-eye{display:inline-flex;align-items:center;gap:12px}
.final-eye::before{
  content:"";
  width:24px;height:1px;
  background:var(--orange);
  display:inline-block;
  flex:0 0 auto;
  font-size:0;
}

/* Tags inside cards — slightly more refined letterspacing */
.cmp-tag,.hc-tag{letter-spacing:0.16em;font-weight:500}

/* Section number — tabular numerals so 01, 02, 10 align cleanly */
.sh-num{font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:0.05em}
.sh-title{letter-spacing:0.06em}

/* Compare list items — bump the body slightly */
.cmp-list li{font-size:15.5px;line-height:1.6}

/* Hover lift on card headings — already exists for .hc, mirror it on .cmp-h3 */
.cmp-h3{transition:transform 0.45s var(--ease), color 0.35s var(--ease)}
.cmp-col:hover .cmp-h3{transform:translateY(-2px)}

/* On dark backgrounds, lift body opacity slightly more so it doesn't read greyish */
.section-pad.dark .hc-body,
.section-pad.dark .cmp-col p,
.cmp-col.new p{color:rgba(255,255,255,0.92)}

/* Final-cta sub — wider rhythm for the centered closer */
.final-cta .hero-sub{
  font-size:19px;
  line-height:1.6;
  color:rgba(255,255,255,0.92);
}

/* Resources links are now visible across the site */

/* ---------- centered overview sections (04 Solutions, 05 Industries) ---------- */
.section-centered .editorial{text-align:center}
.section-centered h2.editorial::before{margin-left:auto;margin-right:auto}
.section-centered .faq{text-align:center}
.section-centered .faq-a-inner{margin-left:auto;margin-right:auto}

/* ---------- diversity imagery (Unsplash-fed photo components) ---------- */
.dx-figure{
  position:relative;
  margin:48px auto;
  max-width:min(1180px,92vw);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(11,43,141,0.08), rgba(248,145,0,0.05));
  border:1px solid var(--line);
  box-shadow:0 30px 80px -40px rgba(3,16,62,0.45);
}
.dx-figure img{
  width:100%;
  height:auto;
  display:block;
  transition:transform 1.2s var(--ease);
  filter:saturate(1.02) contrast(1.02);
}
.dx-figure:hover img{transform:scale(1.025)}
.dx-figure figcaption{
  position:absolute;
  left:18px;bottom:14px;
  padding:7px 12px;
  background:rgba(3,16,62,0.7);
  color:#fff;
  font-family:'Geist Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:6px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* portrait — slim vertical column image sitting next to compare blocks */
.dx-portrait{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(11,43,141,0.04);
  aspect-ratio:4/5;
}
.dx-portrait img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease), filter .8s var(--ease);
  filter:saturate(1.03);
}
.dx-portrait:hover img{transform:scale(1.04)}
.dx-portrait::after{
  content:"";
  position:absolute;inset:auto 0 0 0;
  height:60%;
  background:linear-gradient(180deg, transparent, rgba(3,16,62,0.55));
  pointer-events:none;
}
.dx-portrait .dx-tag{
  position:absolute;
  left:14px;bottom:14px;
  font-family:'Geist Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#fff;
  z-index:2;
}
.dx-portrait .dx-tag::before{
  content:"";
  display:inline-block;width:18px;height:1px;
  background:var(--orange);vertical-align:middle;margin-right:8px;
}

/* mosaic — three image collage that shows variety in one move */
.dx-mosaic{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  margin:48px auto;
  max-width:min(1180px,92vw);
  aspect-ratio:16/7;
}
.dx-mosaic > *{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--line);
}
.dx-mosaic > *:nth-child(1){grid-row:1/3}
.dx-mosaic img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.dx-mosaic > *:hover img{transform:scale(1.05)}
@media(max-width:760px){
  .dx-mosaic{
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr 1fr;
    aspect-ratio:1/1;
  }
  .dx-mosaic > *:nth-child(1){grid-column:1/3;grid-row:1}
  .dx-mosaic > *:nth-child(2),
  .dx-mosaic > *:nth-child(3){grid-row:auto}
}

/* band — full bleed photographic band with optional overlay caption */
.dx-band{
  position:relative;
  margin:60px 0;
  height:clamp(260px, 38vw, 420px);
  overflow:hidden;
}
.dx-band img,
.dx-band video{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 18s linear;
  filter:saturate(1.04);
}
.dx-band:hover img,
.dx-band:hover video{transform:scale(1.06)}
.dx-band-video::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(3,16,62,0.15) 0%, rgba(3,16,62,0.55) 100%);
  z-index:1;pointer-events:none;
}
.dx-band::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(3,16,62,0.55), rgba(3,16,62,0.05) 60%, transparent);
  z-index:1;
}
.dx-band .dx-band-text{
  position:absolute;
  left:5vw;top:50%;
  transform:translateY(-50%);
  z-index:2;
  max-width:520px;
  color:#fff;
}
.dx-band .dx-band-eyebrow{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--orange);
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.dx-band .dx-band-eyebrow::before{
  content:"";width:24px;height:1px;background:var(--orange);
}
.dx-band .dx-band-h{
  font-family:'Instrument Serif',serif;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.1;
  font-weight:400;
  letter-spacing:-0.01em;
}

/* card media — image at the top of a hall card */
.dx-card-media{
  margin:-1px -1px 16px;
  border-radius:14px 14px 0 0;
  overflow:hidden;
  aspect-ratio:16/9;
  position:relative;
  border-bottom:1px solid var(--line);
}
.dx-card-media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.hc:hover .dx-card-media img{transform:scale(1.05)}

/* split layout — text on one side, image on the other inside a compare block */
.dx-split{
  display:grid;
  grid-template-columns:1fr 0.85fr;
  gap:32px;
  align-items:stretch;
}
@media(max-width:900px){
  .dx-split{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .dx-figure img,.dx-portrait img,.dx-mosaic img,.dx-band img,.dx-card-media img{
    transition:none !important;
    transform:none !important;
  }
}

/* ============================================================
   PAGE THEMES — each menu section has a clear visual identity.
   The hero, globe canvas, and nav are untouched. Themes adjust
   body color, section surface, typography accent, and card style.
   ============================================================ */

/* ============================================================
   theme-home — premium baseline borrowing the Industries card
   aesthetic: linen body, white compare cards with shadow and
   orange top accent. The hero is left untouched.
   ============================================================ */
body.theme-home{background:#ffffff !important}
.theme-home .section-pad:not(.dark){background:transparent}
.theme-home .section-pad:not(.dark):nth-of-type(odd){background:#ffffff}
.theme-home .section-pad:not(.dark):nth-of-type(even){background:#ffffff}
.theme-home h2.editorial::after{
  content:"";
  display:block;
  width:56px;height:2px;
  background:var(--orange);
  margin-top:20px;
}
.theme-home .compare{
  background:#ffffff;
  border:none !important;
  border-radius:16px;
  padding:56px 56px 48px;
  gap:48px !important;
  box-shadow:0 30px 80px -50px rgba(80,60,30,0.4), 0 0 0 1px rgba(80,60,30,0.08);
  position:relative;
  max-width:1200px;
  margin-left:auto;margin-right:auto;
}
.theme-home .compare::before{
  content:"";
  position:absolute;
  left:32px;right:32px;top:0;
  height:3px;
  background:var(--orange);
  border-radius:3px;
}
@media(max-width:760px){
  .theme-home .compare{padding:36px 24px 28px;gap:28px !important;border-radius:14px}
  .theme-home .compare::before{left:24px;right:24px}
}
.theme-home .section-pad:not(.dark) .cmp-col,
.theme-home .section-pad:not(.dark) .cmp-col.new,
.theme-home .section-pad:not(.dark) .cmp-col.old{
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:var(--ink) !important;
}
.theme-home .section-pad:not(.dark) .cmp-col.new{position:relative}
.theme-home .section-pad:not(.dark) .compare{align-items:start}
/* if the .new column carries an H3, lift the sibling's first paragraph
   so both columns visually start roughly together */
.theme-home .section-pad:not(.dark) .cmp-col.new:has(.cmp-h3) ~ .cmp-col{padding-top:54px !important}
.theme-home .section-pad:not(.dark) .cmp-h3{margin-bottom:24px !important;font-size:30px !important;line-height:1.2}
.theme-home .section-pad:not(.dark) .cmp-col > *:first-child{margin-top:0 !important}
.theme-home .section-pad:not(.dark) .cmp-col p,
.theme-home .section-pad:not(.dark) .cmp-col.new p,
.theme-home .section-pad:not(.dark) .cmp-col.new li,
.theme-home .section-pad:not(.dark) .cmp-col.new .cmp-list li{color:var(--ink) !important;opacity:0.88 !important}
.theme-home .section-pad:not(.dark) .cmp-col.new strong,
.theme-home .section-pad:not(.dark) .cmp-col.new p strong{color:var(--ink) !important;opacity:1 !important}
.theme-home .section-pad:not(.dark) .cmp-col.new .hc-link{color:var(--ink) !important;border-color:rgba(80,60,30,0.3) !important}
.theme-home .section-pad:not(.dark) .cmp-col.new .hc-link:hover{color:var(--orange) !important;border-color:var(--orange) !important}
.theme-home .section-pad:not(.dark) .cmp-h3{color:var(--ink) !important}
.theme-home .section-pad:not(.dark) .sh-title{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-size:12.5px !important;
  letter-spacing:0.08em !important;
  text-transform:none !important;
  font-weight:500 !important;
  color:var(--ink) !important;
  opacity:0.78 !important;
}
.theme-home .section-pad:not(.dark) .sh-edition{
  font-family:'Inter',sans-serif !important;
  font-size:11px !important;
  letter-spacing:0.06em !important;
  text-transform:none !important;
  color:rgba(10,14,26,0.55) !important;
  opacity:1 !important;
  font-weight:400 !important;
  font-style:italic;
}
.theme-home .section-pad:not(.dark) .sh-num{
  font-family:'Geist Mono',monospace !important;
  color:var(--orange) !important;
  font-size:11px !important;
  letter-spacing:0.18em !important;
}
.theme-home .section-pad:not(.dark) h2.editorial{color:var(--ink) !important}
.theme-home .section-pad:not(.dark) .cmp-tag{
  display:inline-block;
  background:rgba(11,43,141,0.06);
  color:var(--navy) !important;
  padding:5px 13px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:0.18em;
  margin-bottom:14px;
  opacity:1 !important;
}
.theme-home .section-pad:not(.dark) .cmp-col.new .cmp-tag{background:rgba(248,145,0,0.14);color:#a85c00 !important}
.theme-home .hc{
  border-radius:14px;
  background:#ffffff !important;
  color:var(--ink) !important;
  border:1px solid rgba(80,60,30,0.1) !important;
  padding-top:32px;
  position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.theme-home .hc::before{
  content:"";
  position:absolute;
  left:24px;right:24px;top:0;
  height:2px;
  background:var(--orange);
  opacity:0.7;
  z-index:2;
}
.theme-home .hc-tag{color:var(--navy) !important;opacity:1 !important}
.theme-home .hc-h3{color:var(--ink) !important}
.theme-home .hc-body p,
.theme-home .hc-body li{color:var(--ink) !important;opacity:0.82 !important}
.theme-home .hc-link{color:var(--ink) !important;border-color:rgba(80,60,30,0.25) !important}
.theme-home .hc-link:hover{color:var(--orange) !important;border-color:var(--orange) !important}
.theme-home .hc:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 60px -36px rgba(80,60,30,0.35);
}
@media(max-width:760px){.theme-home .compare{padding:28px}}

/* ============================================================
   theme-solutions — warm editorial. Italic serif headlines,
   linen background, orange rail on the "new" compare column.
   ============================================================ */
body.theme-solutions{background:#ffffff !important}
.theme-solutions .section-pad:not(.dark){background:transparent}
.theme-solutions .section-pad:not(.dark):nth-of-type(odd){background:#ffffff}
.theme-solutions .section-pad:not(.dark):nth-of-type(even){background:#ffffff}
.theme-solutions h2.editorial{
  font-family:'Instrument Serif',serif !important;
  font-style:italic;
  font-weight:400;
  font-size:clamp(40px,5.4vw,76px);
  letter-spacing:-0.02em;
  line-height:1.05;
}
.theme-solutions .editorial .it{font-style:normal;color:var(--orange)}
.theme-solutions .sh-num{color:var(--orange)}
.theme-solutions .cmp-col.new{position:relative}
.theme-solutions .cmp-tag{letter-spacing:0.18em}
.theme-solutions .cmp-col.new .cmp-tag{color:var(--orange)}

/* ============================================================
   theme-industries — modular cards on linen. Each section feels
   like a paper card lifted off the canvas.
   ============================================================ */
body.theme-industries{background:#ffffff !important}
.theme-industries .section-pad:not(.dark){
  background:transparent;
  padding-top:90px;
  padding-bottom:90px;
}
.theme-industries .section-pad:not(.dark) > .section-head,
.theme-industries .section-pad:not(.dark) > h2.editorial,
.theme-industries .section-pad:not(.dark) > .faq,
.theme-industries .section-pad:not(.dark) > .compare,
.theme-industries .section-pad:not(.dark) > .hall,
.theme-industries .section-pad:not(.dark) > .timeline{
  max-width:1200px;
  margin-left:auto;margin-right:auto;
}
.theme-industries .compare{
  background:#ffffff;
  border:none !important;
  border-radius:16px;
  padding:56px 56px 48px;
  gap:48px !important;
  box-shadow:0 30px 80px -50px rgba(80,60,30,0.4), 0 0 0 1px rgba(80,60,30,0.08);
  position:relative;
  max-width:1200px;
  margin-left:auto;margin-right:auto;
}
.theme-industries .compare::before{
  content:"";
  position:absolute;
  left:32px;right:32px;top:0;
  height:3px;
  background:var(--orange);
  border-radius:3px;
}
@media(max-width:760px){
  .theme-industries .compare{padding:36px 24px 28px;gap:28px !important;border-radius:14px}
  .theme-industries .compare::before{left:24px;right:24px}
}
.theme-industries .section-pad:not(.dark) .cmp-col,
.theme-industries .section-pad:not(.dark) .cmp-col.new,
.theme-industries .section-pad:not(.dark) .cmp-col.old{
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:var(--ink) !important;
}
.theme-industries .section-pad:not(.dark) .cmp-col.new{position:relative}
.theme-industries .section-pad:not(.dark) .compare{align-items:start}
.theme-industries .section-pad:not(.dark) .cmp-col.new:has(.cmp-h3) ~ .cmp-col{padding-top:54px !important}
.theme-industries .section-pad:not(.dark) .cmp-h3{margin-bottom:24px !important;font-size:30px !important;line-height:1.2}
.theme-industries .section-pad:not(.dark) .cmp-col > *:first-child{margin-top:0 !important}
.theme-industries .section-pad:not(.dark) .cmp-col p,
.theme-industries .section-pad:not(.dark) .cmp-col.new p,
.theme-industries .section-pad:not(.dark) .cmp-col.new li,
.theme-industries .section-pad:not(.dark) .cmp-col.new .cmp-list li{color:var(--ink) !important;opacity:0.88 !important}
.theme-industries .section-pad:not(.dark) .cmp-col.new strong,
.theme-industries .section-pad:not(.dark) .cmp-col.new p strong{color:var(--ink) !important;opacity:1 !important}
.theme-industries .section-pad:not(.dark) .cmp-col.new .hc-link{color:var(--ink) !important;border-color:rgba(80,60,30,0.3) !important}
.theme-industries .section-pad:not(.dark) .cmp-col.new .hc-link:hover{color:var(--orange) !important;border-color:var(--orange) !important}
.theme-industries .section-pad:not(.dark) .cmp-h3{color:var(--ink) !important}
.theme-industries .section-pad:not(.dark) .sh-title{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic;
  font-size:20px !important;
  letter-spacing:-0.005em !important;
  text-transform:none !important;
  font-weight:400 !important;
  color:var(--ink) !important;
  opacity:0.92 !important;
  line-height:1.1;
}
.theme-industries .section-pad:not(.dark) .sh-edition{
  font-family:'Inter',sans-serif !important;
  font-size:11px !important;
  letter-spacing:0.04em !important;
  text-transform:none !important;
  color:rgba(10,14,26,0.5) !important;
  opacity:1 !important;
  font-weight:400 !important;
  font-style:italic;
}
.theme-industries .section-pad:not(.dark) .sh-num{
  font-family:'Geist Mono',monospace !important;
  color:var(--orange) !important;
  font-size:11px !important;
  letter-spacing:0.18em !important;
}
.theme-industries .section-pad:not(.dark) h2.editorial{color:var(--ink) !important}
.theme-industries .section-pad:not(.dark) .cmp-tag{
  display:inline-block;
  background:rgba(11,43,141,0.06);
  color:var(--navy) !important;
  padding:5px 13px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:0.18em;
  margin-bottom:14px;
  opacity:1 !important;
}
.theme-industries .section-pad:not(.dark) .cmp-col.new .cmp-tag{background:rgba(248,145,0,0.14);color:#a85c00 !important}
.theme-industries .hc,
.theme-industries .hc1,
.theme-industries .hc2,
.theme-industries .hc3,
.theme-industries .hc4,
.theme-industries .hc5,
.theme-industries .hc6{
  border-radius:14px;
  background:#ffffff !important;
  color:var(--ink) !important;
  border:1px solid rgba(80,60,30,0.1) !important;
  padding-top:32px;
  position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  min-height:unset !important;
}
.theme-industries .hc::before{
  content:"";
  position:absolute;
  left:24px;right:24px;top:0;
  height:2px;
  background:var(--orange);
  opacity:0.7;
  z-index:2;
}
.theme-industries .hc-tag{color:var(--navy) !important;opacity:1 !important}
.theme-industries .hc-h3{color:var(--ink) !important}
.theme-industries .hc-body p,
.theme-industries .hc-body li{color:var(--ink) !important;opacity:0.82 !important}
.theme-industries .hc-body strong{color:var(--ink) !important;opacity:1 !important}
.theme-industries .hc-link{color:var(--ink) !important;border-color:rgba(80,60,30,0.25) !important}
.theme-industries .hc-link:hover{color:var(--orange) !important;border-color:var(--orange) !important}
.theme-industries .hc:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 60px -36px rgba(80,60,30,0.35);
}
@media(max-width:760px){.theme-industries .compare{padding:28px}}

/* ============================================================
   theme-platform — full dark blueprint. Navy field with hairline
   grid, orange code-mono labels, glass cards with sharp edges.
   ============================================================ */
body.theme-platform{background:#06112d !important;color:rgba(255,255,255,0.92)}
.theme-platform .section-pad:not(.dark){
  background:#06112d !important;
  color:rgba(255,255,255,0.92);
  position:relative;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.theme-platform .section-pad:not(.dark)::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 56px 56px;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 100%);
}
.theme-platform .section-pad > *{position:relative;z-index:1}
.theme-platform h2.editorial{color:#fff !important}
.theme-platform .editorial::before{background:var(--orange)}
.theme-platform .sh-title{color:rgba(255,255,255,0.75) !important;opacity:1 !important}
.theme-platform .sh-num{color:var(--orange)}
.theme-platform .sh-line{background:rgba(255,255,255,0.12) !important}
.theme-platform .sh-edition{color:rgba(255,255,255,0.45) !important;font-family:'Geist Mono',monospace;opacity:1 !important}
.theme-platform .cmp-col{
  background:rgba(255,255,255,0.025) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:4px !important;
  padding:36px;
  color:rgba(255,255,255,0.85) !important;
  position:relative;
}
.theme-platform .cmp-col.new{background:linear-gradient(135deg, rgba(248,145,0,0.08), rgba(248,145,0,0.02)) !important;border-color:rgba(248,145,0,0.22) !important}
.theme-platform .cmp-col p,
.theme-platform .cmp-col li,
.theme-platform .cmp-col strong{color:rgba(255,255,255,0.85) !important;opacity:1 !important}
.theme-platform .cmp-col.new strong,
.theme-platform .cmp-col.new p strong,
.theme-platform .cmp-col strong,
.theme-platform .cmp-col p strong{color:#0a0e1a !important;opacity:1 !important}
.theme-platform .cmp-h3,
.theme-platform .cmp-col h3{color:#fff !important}
.theme-platform .cmp-tag{
  font-family:'Geist Mono',monospace !important;
  color:var(--orange) !important;
  letter-spacing:0.2em;
  font-size:11px;
  opacity:1 !important;
}
.theme-platform .hc,
.theme-platform .hc1,
.theme-platform .hc2,
.theme-platform .hc3,
.theme-platform .hc4,
.theme-platform .hc5,
.theme-platform .hc6{
  background:rgba(255,255,255,0.025) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  color:rgba(255,255,255,0.88) !important;
  min-height:unset !important;
}
.theme-platform .hc h3,
.theme-platform .hc-h3,
.theme-platform .hc-body p,
.theme-platform .hc-body li,
.theme-platform .hc-body strong{color:#fff !important;opacity:1 !important}
.theme-platform .hc-body p,
.theme-platform .hc-body li{color:rgba(255,255,255,0.82) !important}
.theme-platform .hc-h3,
.theme-platform .hc h3{color:#fff !important}
.theme-platform .hc-tag{color:var(--orange) !important;opacity:1 !important}
.theme-platform .hc-body p{color:rgba(255,255,255,0.82) !important;opacity:1 !important}
.theme-platform .hc-link{color:#fff !important;border-color:rgba(255,255,255,0.35) !important}
.theme-platform .hc-link:hover{border-color:var(--orange) !important;color:var(--orange) !important}
.theme-platform .faq{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:8px}
.theme-platform .faq-a-inner p{color:rgba(255,255,255,0.82) !important}
/* footer kept light so the full-color logo reads */
.theme-platform footer{background:var(--white) !important;color:var(--ink)}
.theme-platform .timeline::before{background:rgba(255,255,255,0.15) !important}
.theme-platform .tl-step h4{color:#fff !important}
.theme-platform .tl-step p{color:rgba(255,255,255,0.85) !important;opacity:1 !important}

/* ============================================================
   theme-company — warm paper editorial. Cream tones, oversized
   italic serif headlines, generous spacing.
   ============================================================ */
body.theme-company{background:#ffffff !important}
.theme-company .section-pad:not(.dark){background:transparent}
.theme-company .section-pad:not(.dark):nth-of-type(odd){background:#ffffff}
.theme-company .section-pad:not(.dark):nth-of-type(even){background:#ffffff}
.theme-company h2.editorial{
  font-family:'Instrument Serif',serif !important;
  font-size:clamp(44px,5.8vw,86px);
  font-weight:400;
  letter-spacing:-0.025em;
  line-height:1.02;
}
.theme-company .editorial::before{background:linear-gradient(90deg, #b8895a, transparent) !important}
.theme-company .sh-num{color:#a67043;font-family:'Instrument Serif',serif;font-style:italic;font-size:18px;letter-spacing:0}
.theme-company .sh-title{color:rgba(80,55,30,0.8) !important}
.theme-company .sh-edition{color:rgba(80,55,30,0.5) !important}
.theme-company .sh-line{background:rgba(80,55,30,0.2) !important}
.theme-company .section-pad:not(.dark) .cmp-col,
.theme-company .section-pad:not(.dark) .cmp-col.new,
.theme-company .section-pad:not(.dark) .cmp-col.old{
  padding:32px 36px;
  border-radius:16px;
  background:rgba(255,255,255,0.55) !important;
  border:1px solid rgba(184,137,90,0.16) !important;
  color:var(--ink) !important;
}
.theme-company .section-pad:not(.dark) .cmp-col.new{
  background:#ffffff !important;
  box-shadow:0 24px 50px -36px rgba(120,85,55,0.25);
}
.theme-company .section-pad:not(.dark) .cmp-col p,
.theme-company .section-pad:not(.dark) .cmp-col.new p,
.theme-company .section-pad:not(.dark) .cmp-col.new li,
.theme-company .section-pad:not(.dark) .cmp-col.new .cmp-list li{color:var(--ink) !important;opacity:0.88 !important}
.theme-company .section-pad:not(.dark) .cmp-col.new strong,
.theme-company .section-pad:not(.dark) .cmp-col.new p strong{color:var(--ink) !important;opacity:1 !important}
.theme-company .section-pad:not(.dark) .cmp-col.new .hc-link{color:var(--ink) !important;border-color:rgba(120,85,55,0.3) !important}
.theme-company .section-pad:not(.dark) .cmp-col.new .hc-link:hover{color:#a67043 !important;border-color:#a67043 !important}
.theme-company .section-pad:not(.dark) .cmp-h3{color:var(--ink) !important}
.theme-company .section-pad:not(.dark) h2.editorial{color:var(--ink) !important}
.theme-company .section-pad:not(.dark) .cmp-tag{color:#a67043 !important;opacity:1 !important;letter-spacing:0.18em}
.theme-company .hc,
.theme-company .hc1,
.theme-company .hc2,
.theme-company .hc3,
.theme-company .hc4,
.theme-company .hc5,
.theme-company .hc6{
  background:rgba(255,255,255,0.7) !important;
  color:var(--ink) !important;
  border:1px solid rgba(184,137,90,0.18) !important;
  border-radius:16px;
  min-height:unset !important;
}
.theme-company .hc-tag{color:#a67043 !important;opacity:1 !important}
.theme-company .hc h3,
.theme-company .hc-h3,
.theme-company .hc-body p,
.theme-company .hc-body li,
.theme-company .hc-body strong{color:var(--ink) !important;opacity:0.88 !important}
.theme-company .hc-h3{opacity:1 !important}

/* ============================================================
   theme-talent — bold rhythm. Cream / dark navy alternation,
   strong orange underline on H2, monospace section labels.
   ============================================================ */
body.theme-talent{background:#ffffff !important}
.theme-talent .section-pad{position:relative}
.theme-talent .section-pad:not(.dark){background:#ffffff}
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3){
  background:#06112d !important;
  color:rgba(255,255,255,0.92);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) h2.editorial,
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) .cmp-h3,
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) h3,
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) h4{color:#fff !important}
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) .sh-title{color:rgba(255,255,255,0.7) !important;opacity:1 !important}
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) .sh-line{background:rgba(255,255,255,0.15) !important}
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) .sh-edition{color:rgba(255,255,255,0.5) !important;opacity:1 !important}
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) p,
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) li,
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) strong{color:rgba(255,255,255,0.88) !important;opacity:1 !important}
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) .cmp-col{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  border-radius:12px;
  padding:32px;
}
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) .cmp-col.new{
  background:rgba(248,145,0,0.08) !important;
  border-color:rgba(248,145,0,0.24) !important;
}
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) .cmp-tag{color:rgba(255,255,255,0.7) !important;opacity:1 !important}
.theme-talent .section-pad:not(.dark):nth-of-type(3n+3) .cmp-col.new .cmp-tag{color:var(--orange) !important}
.theme-talent h2.editorial{
  font-size:clamp(40px,5.6vw,84px);
  letter-spacing:-0.025em;
}
.theme-talent h2.editorial::after{
  content:"";
  display:block;
  width:100px;height:3px;
  background:var(--orange);
  margin-top:22px;
}
.theme-talent .sh-num{
  font-family:'Geist Mono',monospace;
  color:var(--orange);
  font-size:12px;
  letter-spacing:0.22em;
}

/* ============================================================
   theme-portals — minimal dark utility (placeholder pages)
   ============================================================ */
body.theme-portals{background:#06112d !important;color:rgba(255,255,255,0.92)}
.theme-portals .section-pad{background:#06112d !important;color:rgba(255,255,255,0.9)}
.theme-portals h2.editorial{color:#fff !important}
.theme-portals .sh-num{color:var(--orange)}
.theme-portals .sh-title,
.theme-portals .sh-edition{color:rgba(255,255,255,0.55) !important;opacity:1 !important}
.theme-portals .sh-line{background:rgba(255,255,255,0.12) !important}
.theme-portals footer{background:var(--white) !important;color:var(--ink)}

/* ============================================================
   dx-band tuning per theme
   ============================================================ */
.dx-band{margin:0}
.theme-platform .dx-band,
.theme-talent .dx-band,
.theme-portals .dx-band{border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)}
.theme-platform .dx-band::before,
.theme-talent .dx-band::before,
.theme-portals .dx-band::before{
  background:linear-gradient(90deg, rgba(6,17,45,0.82), rgba(6,17,45,0.25) 60%, transparent) !important;
}
.theme-company .dx-band::before{
  background:linear-gradient(90deg, rgba(74,53,34,0.7), rgba(74,53,34,0.12) 60%, transparent) !important;
}
.theme-solutions .dx-band::before,
.theme-industries .dx-band::before{
  background:linear-gradient(90deg, rgba(3,16,62,0.65), rgba(3,16,62,0.08) 60%, transparent) !important;
}

/* ============================================================
   DARK SECTION (proof strip) — guarantee visibility no matter
   which theme the parent body uses. These are the last rules in
   the cascade so they win on equal specificity.
   ============================================================ */
.section-pad.dark{
  background:#03103e !important;
  color:#fff !important;
  position:relative;
}
.section-pad.dark .editorial,
.section-pad.dark h2,
.section-pad.dark h3,
.section-pad.dark h4,
.section-pad.dark .cmp-h3{color:#fff !important;opacity:1 !important}
.section-pad.dark .sh-title{color:rgba(255,255,255,0.85) !important;opacity:1 !important}
.section-pad.dark .sh-num{color:var(--orange) !important;opacity:1 !important}
.section-pad.dark .sh-edition{color:rgba(255,255,255,0.7) !important;opacity:1 !important}
.section-pad.dark .sh-line{background:rgba(255,255,255,0.18) !important}
.section-pad.dark .cmp-col,
.section-pad.dark .cmp-col.new,
.section-pad.dark .cmp-col.old{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  color:rgba(255,255,255,0.92) !important;
  padding:36px 40px !important;
  border-radius:8px !important;
}
.section-pad.dark .cmp-col.new{
  background:linear-gradient(135deg, rgba(248,145,0,0.10), rgba(248,145,0,0.02)) !important;
  border-color:rgba(248,145,0,0.25) !important;
}
.section-pad.dark .cmp-col p,
.section-pad.dark .cmp-col li,
.section-pad.dark .cmp-col strong,
.section-pad.dark .cmp-col.new p,
.section-pad.dark .cmp-col.new li,
.section-pad.dark .cmp-col.new strong{color:rgba(255,255,255,0.92) !important;opacity:1 !important}
.section-pad.dark .cmp-tag{color:rgba(255,255,255,0.75) !important;opacity:1 !important}
.section-pad.dark .cmp-col.new .cmp-tag{color:var(--orange) !important}
.section-pad.dark .hc-link{color:#fff !important;border-color:rgba(255,255,255,0.4) !important}
.section-pad.dark .hc-link:hover{color:var(--orange) !important;border-color:var(--orange) !important}
/* defeat any .reveal opacity:0 leftover on dark cards */
.section-pad.dark .reveal{opacity:1 !important;transform:none !important}
.section-pad.dark .cmp-col,
.section-pad.dark .cmp-col.fade-in,
.section-pad.dark .cmp-col.new,
.section-pad.dark .cmp-col.new.fade-in{opacity:1 !important;transform:none !important;visibility:visible !important}
.section-pad.dark .cmp-col > *,
.section-pad.dark .cmp-col h3,
.section-pad.dark .cmp-col p,
.section-pad.dark .cmp-col span,
.section-pad.dark .cmp-col strong{opacity:1 !important;visibility:visible !important}
/* defeat the .editorial word-stagger that hides h2 spans until in-view fires */
.section-pad.dark .editorial .ed-word,
.section-pad.dark .editorial .ed-word > span{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}
.section-pad.dark .editorial{visibility:visible !important;opacity:1 !important}

/* High-contrast text colors for proof-strip readability */
.section-pad.dark h2.editorial,
.section-pad.dark h2.editorial .ed-word,
.section-pad.dark h2.editorial .ed-word > span{color:#ffffff !important}
.section-pad.dark .cmp-h3,
.section-pad.dark .cmp-h3 .it,
.section-pad.dark .cmp-col h3{color:#ffffff !important}
.section-pad.dark .cmp-h3 .it{color:#ffb84d !important}
.section-pad.dark .cmp-col p{
  color:#ffffff !important;
  opacity:0.94 !important;
  font-size:15.5px !important;
  line-height:1.65 !important;
}
.section-pad.dark .cmp-col.new{
  background:rgba(248,145,0,0.08) !important;
  border:1px solid rgba(248,145,0,0.3) !important;
}

/* ============================================================
   BUTTONS — keep text on a single line, fix spacing, ensure
   the arrow sits flush next to the label inside the rectangle.
   ============================================================ */
.btn-primary,
.btn-ghost{
  white-space:nowrap;
  line-height:1.2 !important;
  min-height:54px;
  align-items:center !important;
  justify-content:center;
  padding:16px 26px !important;
}
.btn-primary > span,
.btn-ghost > span{display:inline-block;vertical-align:middle}
.btn-primary .arr,
.btn-ghost .arr{
  font-size:14px;
  display:inline-flex;align-items:center;
  line-height:1;
  flex-shrink:0;
}
.hero-actions,
.final-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
}
@media (max-width:520px){
  .btn-primary,
  .btn-ghost{
    width:100%;
    justify-content:space-between;
    padding:16px 22px !important;
  }
  .btn-primary > span:not(.arr),
  .btn-ghost > span:not(.arr){
    white-space:normal;
    text-align:left;
  }
}

/* ============================================================
   VP-STATS — editorial stat lines used in Section 01 (vendor
   sprawl) and reusable elsewhere. Big italic serif number,
   thin mono label, hairline divider.
   ============================================================ */
.vp-eyebrow{
  font-family:'Geist Mono',monospace;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(10,14,26,0.55);
  margin-bottom:14px;
}
.vp-eyebrow::before{
  content:"";
  display:inline-block;
  width:22px;height:1px;
  background:var(--orange);
  vertical-align:middle;
  margin-right:10px;
}
.vp-stats{
  list-style:none;
  padding:0;
  margin:24px 0;
  border-top:1px solid rgba(80,60,30,0.16);
  width:100%;
}
.vp-stat{
  display:flex;
  align-items:baseline;
  gap:22px;
  padding:14px 0;
  border-bottom:1px solid rgba(80,60,30,0.12);
}
.vp-num{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:46px;
  line-height:1;
  letter-spacing:-0.02em;
  min-width:62px;
  flex-shrink:0;
}
.vp-stats-bad .vp-num{color:#c0392b}
.vp-stats-good .vp-num{color:var(--orange)}
.vp-lbl{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(10,14,26,0.7);
  font-weight:500;
  line-height:1.4;
}
@media(max-width:520px){
  .vp-num{font-size:36px;min-width:50px}
  .vp-stat{gap:16px}
}
.vp-eyebrow-good::before{background:var(--navy)}

/* ============================================================
   SCN — three layer scenario stack (Platform Section 05)
   Three offset cards, each with a Roman numeral, layer label,
   and the scenario beat.
   ============================================================ */
.scn{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.scn-step{
  position:relative;
  background:#ffffff;
  border:1px solid rgba(80,60,30,0.16);
  border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;
  padding:22px 26px 22px 22px;
  box-shadow:0 14px 32px -28px rgba(80,60,30,0.35);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.scn-step:hover{
  transform:translateX(3px);
  box-shadow:0 18px 40px -28px rgba(80,60,30,0.45);
}
.scn-step:nth-child(2){margin-left:28px}
.scn-step:nth-child(3){margin-left:56px}
.scn-mark{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(80,60,30,0.1);
}
.scn-num{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:34px;
  line-height:0.9;
  color:var(--orange);
  letter-spacing:-0.01em;
  min-width:42px;
}
.scn-lbl{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(10,14,26,0.7);
  font-weight:500;
}
.scn-step p{
  font-size:15px;
  line-height:1.65;
  color:rgba(10,14,26,0.84);
  margin:0;
}
.scn-closing{
  margin-top:24px !important;
  padding:14px 0 0;
  border-top:1px solid rgba(80,60,30,0.16);
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:18px;
  line-height:1.4;
  color:#0a0e1a;
}
@media(max-width:760px){
  .scn-step:nth-child(2),
  .scn-step:nth-child(3){margin-left:0}
  .scn-num{font-size:28px}
}

/* ============================================================
   PHASES — premium engagement timeline (Platform Section 07)
   ============================================================ */
.phases{
  list-style:none;
  counter-reset:phase;
  padding:0;
  margin:0;
  position:relative;
}
.phases::before{
  content:"";
  position:absolute;
  left:11px;top:8px;bottom:8px;
  width:1px;
  background:linear-gradient(180deg,
    rgba(248,145,0,0.55) 0%,
    rgba(248,145,0,0.55) 75%,
    rgba(80,60,30,0.18) 100%);
}
.phase{
  position:relative;
  padding:0 0 22px 38px;
  counter-increment:phase;
}
.phase:last-child{padding-bottom:0}
.phase::before{
  content:"";
  position:absolute;
  left:6px;top:6px;
  width:11px;height:11px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid var(--orange);
  z-index:2;
}
.phase-ongoing::before{
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(248,145,0,0.18);
}
.phase-when{
  display:inline-block;
  font-family:'Geist Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:6px;
}
.phase-title{
  font-family:'Inter',sans-serif;
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.012em;
  line-height:1.3;
  color:#0a0e1a;
  margin:0 0 6px;
}
.phase p{
  font-size:14.5px;
  line-height:1.6;
  color:rgba(10,14,26,0.78);
  margin:0;
  max-width:54ch;
}

/* summary card on the left column of Section 07 */
.ph-summary{
  margin-top:24px;
  padding:20px 22px;
  background:#ffffff;
  border:1px solid rgba(80,60,30,0.16);
  border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;
  display:flex;
  align-items:baseline;
  gap:16px;
  box-shadow:0 14px 32px -24px rgba(80,60,30,0.3);
}
.ph-summary-num{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:46px;
  line-height:1;
  color:var(--orange);
  letter-spacing:-0.02em;
  flex-shrink:0;
}
.ph-summary-lbl{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(10,14,26,0.7);
  line-height:1.4;
}
@media(max-width:520px){
  .ph-summary-num{font-size:38px}
}

/* ============================================================
   INTEG-MATRIX — premium integration list (Platform Section 08)
   ============================================================ */
.integ-matrix{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  width:100%;
  border-top:1px solid rgba(80,60,30,0.18);
}
.integ-row{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid rgba(80,60,30,0.12);
  align-items:baseline;
}
.integ-cat{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.integ-cat::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--orange);
  flex-shrink:0;
}
.integ-list{
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.55;
  color:rgba(10,14,26,0.85);
  font-feature-settings:"tnum" 1;
}
.integ-note{
  margin-top:14px;
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(10,14,26,0.55);
  line-height:1.5;
  padding:14px 0 0;
  border-top:1px solid rgba(80,60,30,0.12);
}
@media(max-width:620px){
  .integ-row{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .integ-cat{font-size:10px}
  .integ-list{font-size:14px}
}

/* ============================================================
   FLOW — premium process roadmap (Section 10 "How it works")
   Big italic serif step number, mono tag underneath, hairline
   divider on top, title + body on the right.
   ============================================================ */
.flow{
  list-style:none;
  padding:0;
  margin:48px auto 0;
  max-width:1100px;
  position:relative;
}
.flow-step{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:48px;
  align-items:start;
  padding:38px 0;
  border-top:1px solid rgba(80,60,30,0.15);
  position:relative;
}
.flow-step:last-of-type{border-bottom:1px solid rgba(80,60,30,0.15)}
.flow-step::after{
  content:"";
  position:absolute;
  left:220px;top:38px;bottom:38px;
  width:1px;
  background:rgba(80,60,30,0.12);
  margin-left:-24px;
}
.flow-mark{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  position:relative;
}
.flow-num{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:88px;
  line-height:0.95;
  letter-spacing:-0.04em;
  color:var(--orange);
}
.flow-tag{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(10,14,26,0.6);
  padding-top:4px;
  position:relative;
}
.flow-tag::before{
  content:"";
  display:inline-block;
  width:24px;height:1px;
  background:var(--orange);
  vertical-align:middle;
  margin-right:10px;
}
.flow-content h4{
  font-family:'Inter',sans-serif;
  font-size:26px;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.22;
  color:#0a0e1a;
  margin:8px 0 14px;
  max-width:60ch;
}
.flow-content p{
  font-size:16px;
  line-height:1.65;
  color:rgba(10,14,26,0.84);
  margin:0;
  max-width:62ch;
}
.flow-step:hover .flow-num{color:#0a0e1a;transition:color .35s var(--ease)}
.flow-step .flow-num{transition:color .35s var(--ease)}
@media(max-width:760px){
  .flow{margin-top:32px}
  .flow-step{
    grid-template-columns:1fr;
    gap:16px;
    padding:28px 0;
  }
  .flow-step::after{display:none}
  .flow-num{font-size:64px}
  .flow-content h4{font-size:22px}
}

/* ============================================================
   POEM — editorial vertical stanza (Section 02 etc.)
   Each line is a serif italic phrase, hairline divider between.
   ============================================================ */
.poem{
  list-style:none;
  padding:0;
  margin:24px 0 0;
  width:100%;
  border-top:1px solid rgba(80,60,30,0.16);
}
.poem li{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:24px;
  line-height:1.3;
  letter-spacing:-0.01em;
  padding:14px 0;
  border-bottom:1px solid rgba(80,60,30,0.12);
  color:rgba(10,14,26,0.88);
  position:relative;
  padding-left:28px;
}
.poem li::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:14px;height:1px;
  background:var(--orange);
  transform:translateY(-50%);
}
.poem-before li{color:rgba(120,40,30,0.85)}
.poem-before li::before{background:#c0392b}
.poem-after li::before{background:var(--orange)}

@media(max-width:520px){
  .poem li{font-size:20px;padding:12px 0 12px 22px}
  .poem li::before{width:10px}
}

/* ============================================================
   PULL QUOTE — editorial callout used after the poem
   ============================================================ */
.pull-quote{
  margin:32px 0 0;
  padding:24px 26px 24px 30px;
  background:#ffffff;
  border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;
  box-shadow:0 10px 30px -20px rgba(80,60,30,0.3);
}
.pull-quote p{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:21px;
  line-height:1.4;
  color:#0a0e1a;
  margin:0;
  letter-spacing:-0.005em;
}
.pull-quote p::before{
  content:"\201C";
  font-size:46px;
  line-height:0;
  vertical-align:-0.45em;
  margin-right:6px;
  color:var(--orange);
  opacity:0.7;
}

/* ============================================================
   HOME — proof strip inverted: ivory card with BLACK text
   ============================================================ */
.theme-home .section-pad.dark{
  background:#ffffff !important;
  color:#0a0e1a !important;
  border-bottom:1px solid rgba(80,60,30,0.12) !important;
}
.theme-home .section-pad.dark h2,
.theme-home .section-pad.dark h2.editorial,
.theme-home .section-pad.dark h2.editorial .ed-word,
.theme-home .section-pad.dark h2.editorial .ed-word > span,
.theme-home .section-pad.dark .cmp-h3,
.theme-home .section-pad.dark .cmp-col h3{color:#0a0e1a !important;opacity:1 !important}
.theme-home .section-pad.dark .cmp-h3 .it{color:#c46e00 !important;font-style:italic}
.theme-home .section-pad.dark .cmp-col,
.theme-home .section-pad.dark .cmp-col.new,
.theme-home .section-pad.dark .cmp-col.old{
  background:#ffffff !important;
  border:1px solid rgba(80,60,30,0.14) !important;
  color:#0a0e1a !important;
  box-shadow:0 24px 60px -40px rgba(80,60,30,0.3);
}
.theme-home .section-pad.dark .cmp-col.new{
  background:#ffffff !important;
  border-top:3px solid var(--orange) !important;
}
.theme-home .section-pad.dark .cmp-col p,
.theme-home .section-pad.dark .cmp-col li,
.theme-home .section-pad.dark .cmp-col strong,
.theme-home .section-pad.dark .cmp-col.new p,
.theme-home .section-pad.dark .cmp-col.new li,
.theme-home .section-pad.dark .cmp-col.new strong,
.theme-home .section-pad.dark .cmp-col p strong,
.theme-home .section-pad.dark .cmp-col.new p strong{
  color:#0a0e1a !important;
  opacity:0.88 !important;
  font-size:15.5px !important;
  line-height:1.65 !important;
}
.theme-home .section-pad.dark .cmp-col strong,
.theme-home .section-pad.dark .cmp-col.new strong,
.theme-home .section-pad.dark .cmp-col p strong,
.theme-home .section-pad.dark .cmp-col.new p strong{opacity:1 !important}
.theme-home .section-pad.dark .sh-num{color:var(--orange) !important}
.theme-home .section-pad.dark .sh-title{color:#0a0e1a !important;opacity:0.85 !important}
.theme-home .section-pad.dark .sh-edition{color:rgba(10,14,26,0.55) !important;opacity:1 !important}
.theme-home .section-pad.dark .sh-line{background:rgba(80,60,30,0.2) !important}
.theme-home .section-pad.dark .cmp-col .hc-link{color:#0a0e1a !important;border-color:rgba(80,60,30,0.3) !important}
.theme-home .section-pad.dark .cmp-col .hc-link:hover{color:var(--orange) !important;border-color:var(--orange) !important}

/* ============================================================
   INDUSTRIES — proof strip inverted: ivory card with BLACK text
   ============================================================ */
.theme-industries .section-pad.dark{
  background:#ffffff !important;
  color:#0a0e1a !important;
  border-bottom:1px solid rgba(80,60,30,0.12) !important;
}
.theme-industries .section-pad.dark h2,
.theme-industries .section-pad.dark h2.editorial,
.theme-industries .section-pad.dark h2.editorial .ed-word,
.theme-industries .section-pad.dark h2.editorial .ed-word > span,
.theme-industries .section-pad.dark .cmp-h3,
.theme-industries .section-pad.dark .cmp-col h3{color:#0a0e1a !important;opacity:1 !important}
.theme-industries .section-pad.dark .cmp-h3 .it{color:#c46e00 !important;font-style:italic}
.theme-industries .section-pad.dark .cmp-col,
.theme-industries .section-pad.dark .cmp-col.new,
.theme-industries .section-pad.dark .cmp-col.old{
  background:#ffffff !important;
  border:1px solid rgba(80,60,30,0.14) !important;
  color:#0a0e1a !important;
  box-shadow:0 24px 60px -40px rgba(80,60,30,0.3);
}
.theme-industries .section-pad.dark .cmp-col.new{
  background:#ffffff !important;
  border-top:3px solid var(--orange) !important;
}
.theme-industries .section-pad.dark .cmp-col p,
.theme-industries .section-pad.dark .cmp-col li,
.theme-industries .section-pad.dark .cmp-col strong{
  color:#0a0e1a !important;
  opacity:0.88 !important;
  font-size:15.5px !important;
  line-height:1.65 !important;
}
.theme-industries .section-pad.dark .cmp-col strong{opacity:1 !important}
.theme-industries .section-pad.dark .sh-num{color:var(--orange) !important}
.theme-industries .section-pad.dark .sh-title{color:#0a0e1a !important;opacity:0.85 !important}
.theme-industries .section-pad.dark .sh-edition{color:rgba(10,14,26,0.55) !important;opacity:1 !important}
.theme-industries .section-pad.dark .sh-line{background:rgba(80,60,30,0.2) !important}

/* ============================================================
   PLATFORM — light compare cards with BLACK text on the dark
   blueprint backdrop. Same applies to hc cards in hall blocks.
   ============================================================ */
.theme-platform .cmp-col,
.theme-platform .cmp-col.new,
.theme-platform .cmp-col.old{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  color:#0a0e1a !important;
  border-radius:8px !important;
}
.theme-platform .cmp-col.new{
  background:#ffffff !important;
  border-top:3px solid var(--orange) !important;
}
.theme-platform .cmp-col p,
.theme-platform .cmp-col li,
.theme-platform .cmp-col strong{
  color:#0a0e1a !important;
  opacity:0.88 !important;
}
.theme-platform .cmp-col strong{opacity:1 !important}
.theme-platform .cmp-col .cmp-h3,
.theme-platform .cmp-col h3{color:#0a0e1a !important}
.theme-platform .cmp-col .cmp-h3 .it{color:var(--orange) !important;font-style:italic}
.theme-platform .cmp-col::before,
.theme-platform .cmp-col::after{display:none !important}
.theme-platform .cmp-col .cmp-tag{color:var(--navy) !important;background:rgba(11,43,141,0.06) !important;padding:5px 13px;border-radius:999px;font-size:10px}
.theme-platform .cmp-col.new .cmp-tag{background:rgba(248,145,0,0.14) !important;color:#a85c00 !important}
.theme-platform .cmp-col .hc-link{
  color:#0a0e1a !important;
  border-color:rgba(0,0,0,0.4) !important;
  background:none !important;
}
.theme-platform .cmp-col .hc-link:hover{
  color:var(--orange) !important;
  border-color:var(--orange) !important;
}

/* unify section-head + compare widths so titles align with cards */
.theme-platform .section-head,
.theme-platform > section .section-head{
  max-width:1200px !important;
  margin-left:auto !important;margin-right:auto !important;
}
.theme-platform h2.editorial{
  max-width:1200px;
  margin-left:auto;margin-right:auto;
  padding:0 36px;
  font-size:clamp(34px,4vw,56px) !important;
  font-weight:400;
  letter-spacing:-0.025em;
  line-height:1.1;
}
.theme-platform h2.editorial .it,
.theme-platform .cmp-h3 .it{
  font-family:'Instrument Serif',serif !important;
  font-style:italic;
  color:var(--orange) !important;
  font-weight:400;
}

/* compare layout — both columns left-aligned flex columns */
.theme-platform .compare{
  background:transparent !important;
  border:none !important;
  gap:24px !important;
  max-width:1200px;
  margin-left:auto;margin-right:auto;
  align-items:stretch;
  text-align:left !important;
  padding:0 36px !important;
}
.theme-platform .cmp-col,
.theme-platform .cmp-col.new,
.theme-platform .cmp-col.old{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  text-align:left !important;
  padding:36px 36px !important;
  gap:0;
}
.theme-platform .cmp-col *{text-align:left !important}
.theme-platform .cmp-h3{
  margin:0 0 20px 0 !important;
  font-size:26px !important;
  font-weight:500;
  line-height:1.22;
  letter-spacing:-0.02em;
  text-align:left !important;
  align-self:flex-start;
  color:#0a0e1a !important;
}
/* refined section-head typography on platform */
.theme-platform .sh-num{
  color:var(--orange) !important;
  font-family:'Geist Mono',monospace !important;
  font-size:11px !important;
  letter-spacing:0.18em !important;
}
.theme-platform .sh-title{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic;
  font-size:18px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-weight:400 !important;
  color:rgba(255,255,255,0.85) !important;
  opacity:1 !important;
  line-height:1.15;
}
.theme-platform .sh-edition{
  font-family:'Geist Mono',monospace !important;
  font-size:10px !important;
  letter-spacing:0.16em !important;
  color:rgba(255,255,255,0.45) !important;
  opacity:1 !important;
}
.theme-platform .sh-line{background:rgba(255,255,255,0.15) !important}
/* refined <strong> labels — small-caps amber for premium feel */
.theme-platform .cmp-col p strong,
.theme-platform .cmp-col strong{
  color:#0a0e1a !important;
  font-weight:600 !important;
  letter-spacing:-0.005em;
}
/* paragraphs — better reading rhythm */
.theme-platform .cmp-col p{
  font-size:15px !important;
  line-height:1.65 !important;
  color:rgba(10,14,26,0.84) !important;
}
.theme-platform .cmp-col p:first-of-type{
  font-size:16px !important;
  color:rgba(10,14,26,0.9) !important;
}
.theme-platform .cmp-col p{
  margin:0 0 14px 0 !important;
  text-align:left !important;
  width:100%;
}
.theme-platform .cmp-col p:last-of-type{margin-bottom:0 !important}
/* each .hc-link sits on its own row, flush left */
.theme-platform .cmp-col .hc-link{
  display:flex !important;
  align-items:center;
  align-self:flex-start !important;
  margin:14px 0 0 0 !important;
  width:auto;
  max-width:100%;
}
.theme-platform .cmp-col .hc-link + .hc-link{margin-top:10px !important}

/* CTA buttons inside theme-platform light cards must read dark */
.theme-platform .cmp-col .btn-primary{
  background:var(--orange) !important;
  color:#0a0e1a !important;
  border:1px solid var(--orange) !important;
}
.theme-platform .cmp-col .btn-primary > span,
.theme-platform .cmp-col .btn-primary .arr{color:#0a0e1a !important}
.theme-platform .cmp-col .btn-primary:hover{background:var(--orange-soft) !important}
.theme-platform .cmp-col .btn-ghost{
  background:transparent !important;
  color:#0a0e1a !important;
  border:1px solid rgba(10,14,26,0.3) !important;
}
.theme-platform .cmp-col .btn-ghost > span,
.theme-platform .cmp-col .btn-ghost .arr{color:#0a0e1a !important}
.theme-platform .cmp-col .btn-ghost:hover{
  border-color:#0a0e1a !important;
  background:rgba(10,14,26,0.04) !important;
}
.theme-platform .cmp-col .final-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  width:100%;
}
@media(max-width:760px){
  .theme-platform .compare{gap:14px !important}
  .theme-platform .cmp-col{padding:24px 22px !important}
}

/* hall cards on platform — same light treatment */
.theme-platform .hc,
.theme-platform .hc1,
.theme-platform .hc2,
.theme-platform .hc3,
.theme-platform .hc4,
.theme-platform .hc5,
.theme-platform .hc6{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  color:#0a0e1a !important;
  min-height:unset !important;
}
.theme-platform .hc-h3,
.theme-platform .hc h3{color:#0a0e1a !important}
.theme-platform .hc-tag{color:var(--orange) !important}
.theme-platform .hc-body p,
.theme-platform .hc-body li,
.theme-platform .hc-body strong{color:#0a0e1a !important;opacity:0.88 !important}
.theme-platform .hc .hc-link,
.theme-platform .hc-link{
  color:#0a0e1a !important;
  border-color:rgba(0,0,0,0.4) !important;
}
.theme-platform .hc .hc-link:hover,
.theme-platform .hc-link:hover{
  color:var(--orange) !important;
  border-color:var(--orange) !important;
}

/* ===========================================================================
   SITE WIDE TYPOGRAPHY BASELINE
   Cosmetic only. Targets exactly the seven primitives requested:
   .editorial, .cmp-h3, .sh-num, .sh-title, .sh-edition, paragraph rhythm,
   card spacing. Theme-specific rules still win where they exist; elevated
   component classes (.vp-*, .poem, .pull-quote, .flow*, .scn*, .phase*,
   .ph-summary, .integ-matrix, .dx-band*) are not referenced at all.
   =========================================================================== */

/* ===========================================================================
   PAGE-DETAIL — premium baseline for every solution/industry subpage and
   other detail pages. Same look as the OPI page (white card on linen,
   refined hierarchy). Cosmetic only.
   =========================================================================== */
body.page-detail{background:#ffffff !important}
.page-detail .section-pad:not(.dark){background:transparent}

.page-detail .sh-num{
  color:var(--orange) !important;
  font-family:'Geist Mono',monospace !important;
  font-weight:500 !important;
}
.page-detail .sh-title{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic;
  font-size:18px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-weight:400 !important;
  color:var(--ink) !important;
  opacity:0.92 !important;
}
.page-detail .sh-edition{
  color:rgba(10,14,26,0.55) !important;
  font-family:'Geist Mono',monospace !important;
}
.page-detail .sh-line{background:rgba(80,60,30,0.18) !important}

.page-detail h2.editorial{
  color:var(--ink) !important;
  font-family:'Inter',sans-serif !important;
  font-style:normal !important;
}
.page-detail h2.editorial .it{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic;
  color:var(--orange) !important;
}

.page-detail .compare{
  background:#ffffff !important;
  border:none !important;
  border-radius:16px;
  padding:56px 56px 48px !important;
  gap:48px !important;
  max-width:1200px;
  margin-left:auto;margin-right:auto;
  box-shadow:0 30px 80px -50px rgba(80,60,30,0.4), 0 0 0 1px rgba(80,60,30,0.08);
  position:relative;
  align-items:start;
}
.page-detail .compare::before{
  content:"";
  position:absolute;
  left:32px;right:32px;top:0;
  height:3px;
  background:var(--orange);
  border-radius:3px;
}
@media(max-width:760px){
  .page-detail .compare{padding:36px 24px 28px !important;gap:28px !important;border-radius:14px}
  .page-detail .compare::before{left:24px;right:24px}
}

.page-detail .compare .cmp-col,
.page-detail .compare .cmp-col.new,
.page-detail .compare .cmp-col.old{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  color:var(--ink) !important;
  display:flex;flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

.page-detail .compare p,
.page-detail .compare li{
  color:var(--ink) !important;
  opacity:0.88 !important;
}
.page-detail .compare p strong,
.page-detail .compare li strong{
  color:var(--ink) !important;
  opacity:1 !important;
  font-weight:600;
}
.page-detail .compare p:first-of-type{
  font-size:16.5px !important;
  line-height:1.7 !important;
  color:rgba(10,14,26,0.92) !important;
}

.page-detail .cmp-h3{
  color:var(--ink) !important;
  font-family:'Inter',sans-serif !important;
  font-weight:500 !important;
}
.page-detail .cmp-h3 .it{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic;
  color:var(--orange) !important;
  font-weight:400;
}

.page-detail .compare .cmp-col.new:has(.cmp-h3) ~ .cmp-col{padding-top:50px !important}
@media(max-width:760px){
  .page-detail .compare .cmp-col.new:has(.cmp-h3) ~ .cmp-col{padding-top:0 !important}
}

.page-detail .cmp-list{
  margin:0;
  padding:0;
  list-style:none;
}
.page-detail .cmp-list li{
  position:relative;
  padding:14px 0 14px 28px;
  border-bottom:1px solid rgba(80,60,30,0.12);
  font-size:15px;
  line-height:1.65;
  transform:none !important;
}
.page-detail .cmp-list li:last-child{border-bottom:none}
.page-detail .cmp-list li::before{
  content:"";
  position:absolute;
  left:0;top:22px;
  width:14px;height:1px;
  background:var(--orange);
}

.page-detail .compare .hc-link{
  color:var(--ink) !important;
  border-color:rgba(80,60,30,0.3) !important;
  margin:14px 0 0 0 !important;
  display:inline-flex;
  align-self:flex-start !important;
}
.page-detail .compare .hc-link:hover{
  color:var(--orange) !important;
  border-color:var(--orange) !important;
}

/* ===========================================================================
   PAGE-OPI — premium treatment for the Over the Phone Interpretation page.
   Cosmetic only. Reuses existing copy. No new components, no invented scope.
   =========================================================================== */
body.page-opi{background:#ffffff !important}
.page-opi .section-pad:not(.dark){background:transparent}

/* refined section-head typography on this page */
.page-opi .sh-num{
  color:var(--orange) !important;
  font-family:'Geist Mono',monospace !important;
  font-weight:500 !important;
}
.page-opi .sh-title{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic;
  font-size:18px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-weight:400 !important;
  color:var(--ink) !important;
  opacity:0.92 !important;
}
.page-opi .sh-edition{
  color:rgba(10,14,26,0.55) !important;
  font-family:'Geist Mono',monospace !important;
}
.page-opi .sh-line{background:rgba(80,60,30,0.18) !important}

/* H2: refined editorial weight */
.page-opi h2.editorial{
  color:var(--ink) !important;
  font-family:'Inter',sans-serif !important;
  font-style:normal !important;
}
.page-opi h2.editorial .it{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic;
  color:var(--orange) !important;
}

/* compare block: white card, soft shadow, orange top accent */
.page-opi .compare{
  background:#ffffff !important;
  border:none !important;
  border-radius:16px;
  padding:56px 56px 48px !important;
  gap:48px !important;
  max-width:1200px;
  margin-left:auto;margin-right:auto;
  box-shadow:0 30px 80px -50px rgba(80,60,30,0.4), 0 0 0 1px rgba(80,60,30,0.08);
  position:relative;
  align-items:start;
}
.page-opi .compare::before{
  content:"";
  position:absolute;
  left:32px;right:32px;top:0;
  height:3px;
  background:var(--orange);
  border-radius:3px;
}
@media(max-width:760px){
  .page-opi .compare{padding:36px 24px 28px !important;gap:28px !important;border-radius:14px}
  .page-opi .compare::before{left:24px;right:24px}
}

/* both columns reset to transparent, no internal padding (parent has it) */
.page-opi .compare .cmp-col,
.page-opi .compare .cmp-col.new,
.page-opi .compare .cmp-col.old{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  color:var(--ink) !important;
  display:flex;flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

/* paragraph rhythm in OPI cards */
.page-opi .compare p,
.page-opi .compare li{
  color:var(--ink) !important;
  opacity:0.88 !important;
}
.page-opi .compare p strong,
.page-opi .compare li strong{
  color:var(--ink) !important;
  opacity:1 !important;
  font-weight:600;
}
.page-opi .compare p:first-of-type{
  font-size:16.5px !important;
  line-height:1.7 !important;
  color:rgba(10,14,26,0.92) !important;
}

/* refined cmp-h3 inside the cards */
.page-opi .cmp-h3{
  color:var(--ink) !important;
  font-family:'Inter',sans-serif !important;
  font-weight:500 !important;
}
.page-opi .cmp-h3 .it{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic;
  color:var(--orange) !important;
  font-weight:400;
}

/* right column gets a tiny top shift when the new column carries an H3,
   so paragraphs align with the visual rhythm of the H3 + p stack */
.page-opi .compare .cmp-col.new:has(.cmp-h3) ~ .cmp-col, .page-hr .compare .cmp-col.new:has(.cmp-h3) ~ .cmp-col{padding-top:50px !important}
@media(max-width:760px){
  .page-opi .compare .cmp-col.new:has(.cmp-h3) ~ .cmp-col, .page-hr .compare .cmp-col.new:has(.cmp-h3) ~ .cmp-col{padding-top:0 !important}
}

/* cmp-list refinement (Section 06) */
.page-opi .cmp-list, .page-hr .cmp-list{
  margin:0;
  padding:0;
  list-style:none;
}
.page-opi .cmp-list li, .page-hr .cmp-list li{
  position:relative;
  padding:14px 0 14px 28px;
  border-bottom:1px solid rgba(80,60,30,0.12);
  font-size:15px;
  line-height:1.65;
  transform:none !important;
}
.page-opi .cmp-list li:last-child, .page-hr .cmp-list li:last-child{border-bottom:none}
.page-opi .cmp-list li::before, .page-hr .cmp-list li::before{
  content:"";
  position:absolute;
  left:0;top:22px;
  width:14px;height:1px;
  background:var(--orange);
}
.page-opi .cmp-col.new .cmp-list li::before, .page-hr .cmp-col.new .cmp-list li::before{content:"";color:transparent}

/* hc-link inside compare cards: black on white card, refined hover */
.page-opi .compare .hc-link, .page-hr .compare .hc-link{
  color:var(--ink) !important;
  border-color:rgba(80,60,30,0.3) !important;
  margin:14px 0 0 0 !important;
  display:inline-flex;
  align-self:flex-start !important;
}
.page-opi .compare .hc-link:hover, .page-hr .compare .hc-link:hover{
  color:var(--orange) !important;
  border-color:var(--orange) !important;
}

/* OPI / Chat / Tech / Omni / SMS / Payroll use case grid (Section 03/07) — premium numbered tiles */
.page-opi .opi-cases, .page-ch .opi-cases, .page-ts .opi-cases, .page-om .opi-cases, .page-sms .opi-cases, .page-payroll .opi-cases, .page-hr .opi-cases, .page-bo .opi-cases, .page-va .opi-cases{
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:1200px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:rgba(80,60,30,0.16);
  border:1px solid rgba(80,60,30,0.16);
  border-radius:14px;
  overflow:hidden;
}
.page-opi .opi-case, .page-ch .opi-case, .page-ts .opi-case, .page-om .opi-case, .page-sms .opi-case, .page-payroll .opi-case, .page-hr .opi-case, .page-bo .opi-case, .page-va .opi-case{
  background:#ffffff;
  padding:32px 36px 32px 92px;
  position:relative;
  transition:background .35s var(--ease);
}
.page-opi .opi-case:hover, .page-ch .opi-case:hover, .page-ts .opi-case:hover, .page-om .opi-case:hover, .page-sms .opi-case:hover, .page-payroll .opi-case:hover, .page-hr .opi-case:hover, .page-bo .opi-case:hover, .page-va .opi-case:hover{background:#ffffff}
.page-opi .opi-case-num, .page-hr .opi-case-num, .page-bo .opi-case-num{
  position:absolute;
  left:32px;top:32px;
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:42px;
  line-height:0.95;
  color:var(--orange);
  letter-spacing:-0.02em;
}
.page-ch .opi-case-num, .page-ts .opi-case-num, .page-om .opi-case-num, .page-sms .opi-case-num, .page-payroll .opi-case-num, .page-va .opi-case-num{
  position:absolute;
  left:32px;top:32px;
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:42px;
  line-height:0.95;
  color:var(--navy);
  letter-spacing:-0.02em;
}
.page-opi .opi-case-title, .page-ch .opi-case-title, .page-ts .opi-case-title, .page-om .opi-case-title, .page-sms .opi-case-title, .page-payroll .opi-case-title, .page-hr .opi-case-title, .page-bo .opi-case-title, .page-va .opi-case-title{
  font-family:'Inter',sans-serif;
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.012em;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 10px;
}
.page-opi .opi-case p, .page-ch .opi-case p, .page-ts .opi-case p, .page-om .opi-case p, .page-sms .opi-case p, .page-payroll .opi-case p, .page-hr .opi-case p, .page-bo .opi-case p, .page-va .opi-case p{
  font-size:14.5px;
  line-height:1.6;
  color:rgba(10,14,26,0.78);
  margin:0;
  max-width:48ch;
}
@media(max-width:760px){
  .page-opi .opi-cases, .page-ch .opi-cases, .page-ts .opi-cases, .page-om .opi-cases, .page-sms .opi-cases, .page-payroll .opi-cases, .page-hr .opi-cases, .page-bo .opi-cases, .page-va .opi-cases{grid-template-columns:1fr;border-radius:12px}
  .page-opi .opi-case, .page-ch .opi-case, .page-ts .opi-case, .page-om .opi-case, .page-sms .opi-case, .page-payroll .opi-case, .page-hr .opi-case, .page-bo .opi-case, .page-va .opi-case{padding:26px 24px 26px 78px}
  .page-opi .opi-case-num, .page-ch .opi-case-num, .page-ts .opi-case-num, .page-om .opi-case-num, .page-sms .opi-case-num, .page-payroll .opi-case-num, .page-hr .opi-case-num, .page-bo .opi-case-num, .page-va .opi-case-num{font-size:34px;left:24px;top:26px}
}

/* SMS Section 07 — intro lede + kicker centered above/below the .opi-cases grid */
.page-sms .opi-section-intro{
  max-width:880px;
  margin:0 auto 28px;
}
.page-sms .opi-section-intro > p{
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.7;
  color:#3a4566;
  margin:0 0 14px;
}
.page-sms .opi-section-intro > p:last-child{margin-bottom:0}
.page-sms .opi-section-kicker{
  max-width:880px;
  margin:28px auto 0;
  padding:24px 0 0;
  border-top:1px solid rgba(11,43,141,0.12);
}
.page-sms .opi-section-kicker > p:first-child{
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  line-height:1.65;
  color:#3a4566;
  margin:0;
}
.page-sms .opi-section-kicker .sms-pr-stamp{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:22px;
  color:var(--navy);
  margin:14px 0 0;
  letter-spacing:-0.01em;
  line-height:1.2;
}

/* 1. EDITORIAL H2 ----------------------------------------------------------- */
h2.editorial{
  font-size:clamp(38px, 4.6vw, 64px) !important;
  font-weight:400 !important;
  letter-spacing:-0.022em !important;
  line-height:1.08 !important;
  text-wrap:balance;
  hyphens:none;
  -webkit-hyphens:none;
  font-feature-settings:"kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  margin-bottom:44px !important;
}

/* 2. .cmp-h3 --------------------------------------------------------------- */
.cmp-h3{
  font-size:27px !important;
  font-weight:500 !important;
  letter-spacing:-0.024em !important;
  line-height:1.22 !important;
  margin-bottom:22px !important;
  text-wrap:balance;
  hyphens:none;
  -webkit-hyphens:none;
  font-feature-settings:"kern" 1, "liga" 1, "calt" 1;
}

/* 3. .sh-num --------------------------------------------------------------- */
.sh-num{
  font-size:11.5px !important;
  letter-spacing:0.18em !important;
  font-weight:500 !important;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1, "lnum" 1, "kern" 1;
}

/* 4. .sh-title ------------------------------------------------------------- */
.sh-title{
  font-size:11.5px !important;
  letter-spacing:0.14em !important;
  font-weight:500 !important;
  font-feature-settings:"kern" 1, "calt" 1;
}

/* 5. .sh-edition ----------------------------------------------------------- */
.sh-edition{
  font-size:10.5px !important;
  letter-spacing:0.22em !important;
  font-weight:500 !important;
  font-feature-settings:"kern" 1, "calt" 1;
}

/* 6. PARAGRAPH RHYTHM ------------------------------------------------------ */
.cmp-col p,
.hc-body p,
.faq p,
.compare p{
  font-size:15.5px !important;
  line-height:1.7 !important;
  font-feature-settings:"kern" 1, "liga" 1, "calt" 1, "onum" 1;
  text-wrap:pretty;
  hanging-punctuation:first allow-end last;
}
.cmp-col p + p,
.hc-body p + p{
  margin-top:14px !important;
}
.cmp-col p strong,
.hc-body p strong{
  font-weight:600 !important;
  letter-spacing:-0.006em;
}

/* 7. CARD SPACING ---------------------------------------------------------- */
.section-head{
  margin-bottom:56px !important;
}
.compare{
  gap:2px !important;
}
.cmp-col{
  padding:44px 36px !important;
}
@media(min-width:1000px){
  .hc{
    padding:38px 32px !important;
    border-radius:14px !important;
  }
}
@media(max-width:680px){
  .section-head{margin-bottom:36px !important}
  .cmp-col{padding:30px 24px !important}
  h2.editorial{margin-bottom:32px !important}
}

/* Base text rendering quality */
p{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Italic accent span inside any of the headings: refined kerning */
h2.editorial .it,
.cmp-h3 .it,
.hc-h3 .it{
  font-feature-settings:"kern" 1, "liga" 1, "calt" 1;
}

/* ===========================================================================
   RESPONSIVE PASS — fluid layout from desktop to phone.
   Cosmetic adjustments to section padding, hero height, dx-band sizing,
   card stacking, typography, footer, ticker, globe stage on small viewports.
   =========================================================================== */

/* ---- Tablet (max 1100px) ---- */
@media (max-width:1100px){
  .section-pad{padding:96px 0}
  .hero{min-height:auto}
  .hero-inner{padding:36px 26px 64px}
  .hero-body{gap:36px}
  .globe-stage{max-width:580px}
}

/* ---- Phablet (max 900px) ---- */
@media (max-width:900px){
  body{cursor:auto}
  .section-pad{padding:72px 0}
  .compare{padding:0 22px}
  .hall{padding:0 22px}
  .section-head{padding:0 22px;margin-bottom:36px !important;gap:14px}
  h2.editorial{padding:0 22px;font-size:clamp(30px,5.6vw,46px) !important;margin-bottom:32px !important}
  .editorial::before{margin-left:22px}
  .hero{min-height:0}
  .hero-inner{padding:28px 22px 56px}
  .hero-h1{font-size:clamp(36px,7.2vw,56px)}
  .hero-sub{font-size:16px;line-height:1.55}
  .hero-actions{flex-wrap:wrap;gap:10px}
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost{flex:1 1 240px}
  .globe-stage{max-width:520px}
  .globe-meta{flex-wrap:wrap;gap:14px 22px;font-size:10px}
  .hero-meta{font-size:10px;gap:8px 14px}

  /* dx-band fluid */
  .dx-band{height:clamp(220px,52vw,340px)}
  .dx-band .dx-band-text{max-width:80vw;left:22px;right:22px}
  .dx-band .dx-band-eyebrow{font-size:10px;letter-spacing:0.16em}
  .dx-band .dx-band-h{font-size:clamp(22px,4.6vw,32px)}

  /* footer stacks cleanly */
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 24px}
  .foot-brand{grid-column:1 / -1}
  .foot-col h4{font-size:11px;letter-spacing:0.16em}
  .foot-col ul{font-size:13px}
  .foot-col li{padding:4px 0}
  .bottom-bar{flex-wrap:wrap;gap:10px;padding:18px 22px;font-size:10px}
  .bottom-bar .legal{gap:10px;flex-wrap:wrap}

  /* ticker compact */
  .ticker{font-size:10px;letter-spacing:0.1em}
  .ticker-track{padding:10px 0}

  /* final cta */
  .final-cta{padding:64px 22px}
  .final-h2{font-size:clamp(28px,5.6vw,42px) !important}
  .final-actions{flex-wrap:wrap;gap:10px}
  .final-actions .btn-primary,
  .final-actions .btn-ghost{flex:1 1 240px}

  /* compare two-up becomes one column at 760px (already in base) */

  /* themed compare cards: gentler padding on tablet/mobile */
  .theme-home .compare,
  .theme-industries .compare,
  .page-detail .compare,
  .page-opi .compare{padding:36px 22px 28px !important;gap:28px !important;margin-left:14px;margin-right:14px}
  .theme-home .compare::before,
  .theme-industries .compare::before,
  .page-detail .compare::before,
  .page-opi .compare::before{left:22px;right:22px}
}

/* ---- Phone (max 680px) ---- */
@media (max-width:680px){
  .section-pad{padding:56px 0}
  .compare{padding:0 16px;gap:1px}
  .hall{padding:0 16px}
  .section-head{padding:0 16px;margin-bottom:28px !important}
  h2.editorial{padding:0 16px;font-size:clamp(26px,7.2vw,38px) !important;margin-bottom:26px !important;letter-spacing:-0.018em !important}
  .hero-inner{padding:22px 16px 48px}
  .hero-h1{font-size:clamp(32px,8.2vw,46px);line-height:1.05}
  .hero-sub{font-size:15px}
  .hero-meta{flex-wrap:wrap}
  .globe-stage{max-width:340px}
  .globe-meta{flex-direction:column;align-items:flex-start;gap:8px}

  .dx-band{height:clamp(200px,58vw,280px)}
  .dx-band .dx-band-text{left:16px;right:16px}
  .dx-band .dx-band-eyebrow{font-size:9.5px}
  .dx-band .dx-band-h{font-size:clamp(20px,5.2vw,28px);line-height:1.18}

  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 14px}
  .foot-brand{grid-column:1 / -1}
  .bottom-bar{padding:16px;font-size:9.5px}
  .bottom-bar .legal{flex-wrap:wrap;gap:8px 14px}

  .final-cta{padding:48px 16px}
  .final-h2{font-size:clamp(24px,6.6vw,34px) !important}

  /* themed compare cards: thinner padding on phones */
  .theme-home .compare,
  .theme-industries .compare,
  .page-detail .compare,
  .page-opi .compare{padding:28px 18px 22px !important;gap:22px !important;margin-left:8px;margin-right:8px;border-radius:12px}
  .theme-home .compare::before,
  .theme-industries .compare::before,
  .page-detail .compare::before,
  .page-opi .compare::before{left:18px;right:18px;height:2px}

  .cmp-h3{font-size:22px !important;margin-bottom:18px !important}
  .cmp-col p{font-size:15px !important}

  /* hall card grid stacks (base already does this at 680) but tighten padding */
  .hc{padding:24px 22px !important;border-radius:12px}
  .hc-h3{font-size:21px}

  /* timeline + flow */
  .timeline{padding-left:16px}
  .flow-step{gap:14px !important;padding:24px 16px !important}

  /* phases */
  .phase{padding-left:30px}
  .phase::before{left:4px}
  .phases::before{left:9px}

  /* opi cases */
  .page-opi .opi-cases{margin:0 16px}
  .page-opi .opi-case{padding:22px 18px 22px 62px}
  .page-opi .opi-case-num{font-size:30px;left:18px;top:22px}

  /* scn cards (Platform Section 05) */
  .scn-step:nth-child(2),
  .scn-step:nth-child(3){margin-left:0 !important}

  /* vp-stats */
  .vp-stat{gap:14px}
  .vp-num{font-size:34px;min-width:46px}

  /* poem */
  .poem li{font-size:18px;padding:11px 0 11px 22px}

  /* pull-quote */
  .pull-quote{padding:18px 18px 18px 22px;margin-top:24px}
  .pull-quote p{font-size:17px}
}

/* ---- Small phone (max 380px) ---- */
@media (max-width:380px){
  .hero-h1{font-size:32px}
  h2.editorial{font-size:24px !important}
  .cmp-h3{font-size:20px !important}
  .nav-inner{padding:12px 14px}
  .brand .brand-name{font-size:14px}
  .ticker{font-size:9.5px}
  .dx-band .dx-band-h{font-size:18px}
}

/* ---- Touch targets — ensure interactive elements are ≥ 44px on touch ---- */
@media (hover:none) and (pointer:coarse){
  .nav-toggle{width:48px;height:48px}
  .btn-primary, .btn-ghost{min-height:52px;padding:18px 24px !important}
  .hc-link{min-height:44px;padding:14px 0 12px}
  .nav-child, .nav-child-title, .nav-overview{min-height:40px;display:flex !important;align-items:center}
  .ticker-meta{display:none}
}

/* ---- Smooth scroll on anchors ---- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---- Prevent horizontal overflow ---- */
body{overflow-x:hidden}
.dx-band img{max-width:100%}

/* ============================================
   PART E — EXTENDED COMPONENT LIBRARY
   Components added per master brief. Each is
   self-contained and pulls only from :root tokens.
   Light surfaces stay pure #ffffff — no off-white.
   ============================================ */

/* ---------- .df-image — photographic treatment ---------- */
.df-image{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:0;
  background:var(--white);
}
.df-image img,
.df-image video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.15) contrast(1.05) brightness(0.96);
  transition:filter 0.6s var(--ease), transform 1.2s var(--ease);
  will-change:filter, transform;
}
.df-image-video video{
  filter:grayscale(0.1) contrast(1.06) brightness(0.94);
}
.df-image-video:hover video{
  filter:grayscale(0) contrast(1.08) brightness(1);
  transform:scale(1.03);
}
.df-image::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,16,62,0) 55%, rgba(3,16,62,0.55) 100%);
  pointer-events:none;
}
.df-image:hover img{
  filter:grayscale(0) contrast(1.08) brightness(1);
  transform:scale(1.03);
}
.df-image .df-image-cap{
  position:absolute; left:20px; bottom:18px;
  font-family:'Geist Mono',monospace; font-size:10px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.92); z-index:2;
  max-width:calc(100% - 80px);
}
.df-image .df-image-num{
  position:absolute; right:20px; top:18px;
  font-family:'Geist Mono',monospace; font-size:10px;
  color:var(--orange); letter-spacing:0.14em;
  z-index:2;
}
/* lazy-load fade-in: translate-only, no opacity (avoids white-flash) */
.df-image img{ transform:translate3d(0, 12px, 0); }
.df-image.df-img-loaded img{ transform:translate3d(0, 0, 0); }
.df-image.df-img-loaded:hover img{ transform:scale(1.03); }

/* ---------- .photo-strip — 16:5 full-bleed ribbon ---------- */
.photo-strip{
  position:relative; width:100%;
  aspect-ratio:16/5;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.photo-strip img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.1) contrast(1.05) brightness(0.94);
}
.photo-strip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,16,62,0) 50%, rgba(3,16,62,0.5) 100%);
  pointer-events:none;
}
.photo-strip-label{
  position:absolute; left:36px; bottom:24px;
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--orange); z-index:2;
}
@media (max-width:680px){
  .photo-strip{ aspect-ratio:4/3 }
  .photo-strip-label{ left:20px; bottom:18px; font-size:10px }
}

/* ---------- .photo-grid — 2x2 grid + triptych variant ---------- */
.photo-grid{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.photo-grid .df-image{ aspect-ratio:4/3; border:none }
.photo-grid.triptych{ grid-template-columns:repeat(3, 1fr); }
.photo-grid.triptych .df-image{ aspect-ratio:16/11 }
@media (max-width:900px){
  .photo-grid, .photo-grid.triptych{ grid-template-columns:1fr }
}

/* ---------- .cinematic-split — large photo + content ---------- */
.cinematic-split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; align-items:stretch;
  max-width:1440px; margin:0 auto;
}
.cinematic-split .df-image{
  border:none; min-height:560px;
}
.cinematic-split .cs-content{
  padding:80px 56px;
  display:flex; flex-direction:column; justify-content:center;
}
.section-pad.dark .cinematic-split .cs-content{ background:transparent }
@media (max-width:900px){
  .cinematic-split{ grid-template-columns:1fr }
  .cinematic-split .df-image{ min-height:380px }
  .cinematic-split .cs-content{ padding:56px 24px }
}

/* ---------- .workflow — horizontal step diagram ---------- */
.workflow{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
  display:grid; grid-template-columns:repeat(var(--workflow-steps, 5), 1fr);
  gap:0;
  position:relative;
}
.wf-step{
  position:relative;
  padding:32px 24px 32px 24px;
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
  opacity:0; transform:translate3d(0, 16px, 0);
  transition:opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.wf-step:first-child{ border-left:none }
.workflow.in-view .wf-step{ opacity:1; transform:translate3d(0, 0, 0) }
.workflow.in-view .wf-step:nth-child(1){ transition-delay:0.05s }
.workflow.in-view .wf-step:nth-child(2){ transition-delay:0.15s }
.workflow.in-view .wf-step:nth-child(3){ transition-delay:0.25s }
.workflow.in-view .wf-step:nth-child(4){ transition-delay:0.35s }
.workflow.in-view .wf-step:nth-child(5){ transition-delay:0.45s }
.workflow.in-view .wf-step:nth-child(6){ transition-delay:0.55s }
.wf-num{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.18em; color:var(--orange);
  display:inline-flex; align-items:center; gap:10px;
}
.wf-num::before{
  content:''; width:6px; height:6px; background:var(--orange);
}
.wf-title{
  font-family:'Inter',sans-serif; font-weight:500;
  font-size:18px; line-height:1.3; color:var(--ink);
  letter-spacing:-0.01em;
}
.wf-body{
  font-size:13.5px; line-height:1.55; color:var(--ink); opacity:0.78;
}
.section-pad.dark .wf-step{ border-left-color:var(--line-dark) }
.section-pad.dark .wf-title{ color:var(--white) }
.section-pad.dark .wf-body{ color:rgba(255,255,255,0.78); opacity:1 }
@media (max-width:1100px){
  .workflow{ grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
  .wf-step{ background:var(--white); border-left:none }
  .section-pad.dark .workflow{ background:var(--line-dark); border-color:var(--line-dark) }
  .section-pad.dark .wf-step{ background:var(--navy-darker) }
}
@media (max-width:680px){
  .workflow{ grid-template-columns:1fr }
}

/* ---------- .spec-table — striped technical specs ---------- */
.spec-table{
  max-width:1100px; margin:0 auto;
  padding:0 36px;
  width:100%;
}
.spec-table table{
  width:100%; border-collapse:collapse;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.spec-table th, .spec-table td{
  text-align:left;
  padding:18px 20px;
  border-top:1px solid var(--line);
  font-size:14px; line-height:1.5;
  vertical-align:top;
}
.spec-table th{
  font-family:'Geist Mono',monospace; font-size:10px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink); opacity:0.72; font-weight:500;
  width:30%;
}
.spec-table td{ color:var(--ink); }
.spec-table td .spec-num{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:18px; color:var(--ink); letter-spacing:-0.01em;
}
.spec-table td .spec-num .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange); font-weight:400;
}
.section-pad.dark .spec-table table,
.section-pad.dark .spec-table th,
.section-pad.dark .spec-table td{
  border-color:var(--line-dark);
}
.section-pad.dark .spec-table th{ color:rgba(255,255,255,0.78); opacity:1 }
.section-pad.dark .spec-table td{ color:rgba(255,255,255,0.92) }
.section-pad.dark .spec-table td .spec-num{ color:var(--white) }
@media (max-width:680px){
  .spec-table th, .spec-table td{ padding:14px 12px }
  .spec-table th{ width:42% }
}

/* ---------- .quote-pull — oversized pull-quote ---------- */
.quote-pull{
  max-width:1100px; margin:0 auto;
  padding:40px 36px;
  text-align:left;
}
.quote-pull blockquote{
  font-family:'Instrument Serif',serif; font-style:italic;
  font-weight:400;
  font-size:clamp(28px, 3.4vw, 48px);
  line-height:1.18; letter-spacing:-0.01em;
  color:var(--ink);
}
.quote-pull blockquote .it{ color:var(--orange) }
.quote-pull .qp-attr{
  margin-top:28px;
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink); opacity:0.7;
  display:flex; align-items:center; gap:14px;
}
.quote-pull .qp-attr::before{
  content:''; width:24px; height:1px; background:var(--orange);
}
.quote-pull.dark blockquote,
.section-pad.dark .quote-pull blockquote{ color:var(--white) }
.quote-pull.dark .qp-attr,
.section-pad.dark .quote-pull .qp-attr{ color:rgba(255,255,255,0.78); opacity:1 }

/* ---------- .metric-tower — vertical stacked KPI list ---------- */
.metric-tower{
  max-width:560px;
  display:flex; flex-direction:column;
}
.mt-row{
  display:grid; grid-template-columns:1fr auto;
  align-items:baseline; gap:18px;
  padding:24px 0;
  border-top:1px solid var(--line);
}
.mt-row:first-child{ border-top:none }
.mt-label{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink); opacity:0.72;
}
.mt-value{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(32px, 3vw, 48px);
  letter-spacing:-0.03em; color:var(--ink);
  line-height:1; white-space:nowrap;
}
.mt-value .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange); font-weight:400;
  font-size:0.75em;
}
.section-pad.dark .mt-row{ border-top-color:var(--line-dark) }
.section-pad.dark .mt-label{ color:rgba(255,255,255,0.72); opacity:1 }
.section-pad.dark .mt-value{ color:var(--white) }

/* ---------- .lang-cloud — chips grid ---------- */
.lang-cloud{
  max-width:1100px; margin:0 auto;
  padding:0 36px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.lang-chip{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid var(--line);
  padding:8px 14px;
  color:var(--ink); opacity:0.78;
  background:var(--white);
  transition:border-color 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.lang-chip.live{
  color:var(--orange); border-color:rgba(248,145,0,0.4); opacity:1;
}
.lang-chip:hover{ color:var(--navy); border-color:var(--navy); opacity:1 }
.section-pad.dark .lang-chip{
  border-color:var(--line-dark); color:rgba(255,255,255,0.78);
  background:transparent; opacity:1;
}
.section-pad.dark .lang-chip:hover{ color:var(--white); border-color:var(--white) }

/* ---------- .team-rail — horizontal scroll of portraits ---------- */
.team-rail{
  max-width:100%;
  padding:0 36px;
  display:flex; gap:20px;
  overflow-x:auto; overflow-y:visible;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.team-rail::-webkit-scrollbar{ display:none }
.team-rail .tr-card{
  flex:0 0 auto;
  width:200px;
  scroll-snap-align:start;
  display:flex; flex-direction:column; gap:14px;
}
.team-rail .tr-photo{
  width:200px; height:260px;
  overflow:hidden;
  border:1px solid var(--line);
}
.team-rail .tr-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.2) contrast(1.05) brightness(0.96);
  transition:filter 0.5s var(--ease), transform 0.8s var(--ease);
}
.team-rail .tr-card:hover .tr-photo img{
  filter:grayscale(0) contrast(1.08) brightness(1);
  transform:scale(1.04);
}
.team-rail .tr-name{
  font-family:'Inter',sans-serif; font-weight:500;
  font-size:14.5px; color:var(--ink); letter-spacing:-0.005em;
}
.team-rail .tr-title{
  font-family:'Geist Mono',monospace; font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink); opacity:0.62;
}
.section-pad.dark .team-rail .tr-name{ color:var(--white) }
.section-pad.dark .team-rail .tr-title{ color:rgba(255,255,255,0.62); opacity:1 }

/* ---------- .timeline — vertical company / process timeline ---------- */
.timeline{
  max-width:880px; margin:0 auto;
  padding:0 36px;
  position:relative;
}
.timeline::before{
  content:''; position:absolute;
  left:48px; top:8px; bottom:8px; width:1px;
  background:var(--line);
}
.tl-step{
  position:relative;
  padding:24px 0 24px 96px;
  display:flex; flex-direction:column; gap:8px;
  opacity:0; transform:translate3d(0, 16px, 0);
  transition:opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.timeline.in-view .tl-step{ opacity:1; transform:translate3d(0, 0, 0) }
.timeline.in-view .tl-step:nth-child(1){ transition-delay:0.05s }
.timeline.in-view .tl-step:nth-child(2){ transition-delay:0.15s }
.timeline.in-view .tl-step:nth-child(3){ transition-delay:0.25s }
.timeline.in-view .tl-step:nth-child(4){ transition-delay:0.35s }
.timeline.in-view .tl-step:nth-child(5){ transition-delay:0.45s }
.timeline.in-view .tl-step:nth-child(6){ transition-delay:0.55s }
.timeline.in-view .tl-step:nth-child(7){ transition-delay:0.65s }
.timeline.in-view .tl-step:nth-child(8){ transition-delay:0.75s }
.tl-step::before{
  content:''; position:absolute;
  left:44px; top:32px;
  width:9px; height:9px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px var(--white), 0 0 0 5px var(--line);
}
.section-pad.dark .timeline::before{ background:var(--line-dark) }
.section-pad.dark .tl-step::before{ box-shadow:0 0 0 4px var(--navy-darker), 0 0 0 5px var(--line-dark) }
.tl-year{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.18em; color:var(--orange);
}
.tl-title{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:22px; color:var(--ink); letter-spacing:-0.015em;
  line-height:1.3;
}
.tl-title .it{ font-family:'Instrument Serif',serif; font-style:italic; color:var(--orange) }
.tl-body{
  font-size:14.5px; line-height:1.6;
  color:var(--ink); opacity:0.82;
  max-width:540px;
}
.section-pad.dark .tl-title{ color:var(--white) }
.section-pad.dark .tl-body{ color:rgba(255,255,255,0.82); opacity:1 }
@media (max-width:680px){
  .timeline::before{ left:24px }
  .tl-step{ padding-left:56px }
  .tl-step::before{ left:20px }
}

/* ---------- .icon-feature-row — 3- or 4-col icon + headline + body ---------- */
.icon-feature-row{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
  display:grid; grid-template-columns:repeat(var(--ifr-cols, 4), 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.ifr-cell{
  background:var(--white);
  padding:40px 32px;
  display:flex; flex-direction:column; gap:14px;
}
.ifr-icon{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  color:var(--orange);
}
.ifr-icon svg{ width:100%; height:100%; display:block }
.ifr-title{
  font-family:'Inter',sans-serif; font-weight:500;
  font-size:20px; color:var(--ink); letter-spacing:-0.01em; line-height:1.25;
}
.ifr-title .it{ font-family:'Instrument Serif',serif; font-style:italic; color:var(--orange); font-weight:400 }
.ifr-body{
  font-size:14px; line-height:1.6;
  color:var(--ink); opacity:0.78;
}
.ifr-link{
  margin-top:auto; padding-top:8px;
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink); align-self:flex-start;
  border-bottom:1px solid var(--ink); padding-bottom:4px;
  transition:color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ifr-link:hover{ color:var(--orange); border-color:var(--orange) }
.section-pad.dark .icon-feature-row,
.theme-platform .icon-feature-row,
.theme-portals .icon-feature-row{ background:var(--line-dark); border-color:var(--line-dark) }
.section-pad.dark .ifr-cell,
.theme-platform .ifr-cell,
.theme-portals .ifr-cell{ background:rgba(255,255,255,0.025) }
.section-pad.dark .ifr-title,
.theme-platform .ifr-title,
.theme-portals .ifr-title{ color:var(--white) }
.section-pad.dark .ifr-body,
.theme-platform .ifr-body,
.theme-portals .ifr-body{ color:rgba(255,255,255,0.82); opacity:1 }
.section-pad.dark .ifr-link,
.theme-platform .ifr-link,
.theme-portals .ifr-link{ color:var(--white); border-color:rgba(255,255,255,0.45) }
@media (max-width:1100px){ .icon-feature-row{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:680px){ .icon-feature-row{ grid-template-columns:1fr } }

/* ---------- .code-window — mock terminal / API panel ---------- */
.code-window{
  max-width:640px;
  background:#0a0e1a;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  overflow:hidden;
  font-family:'Geist Mono',monospace;
  box-shadow:0 24px 60px rgba(0,0,0,0.4);
}
.cw-head{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.cw-dot{ width:10px; height:10px; border-radius:50% }
.cw-dot.red{ background:#ff5f57 }
.cw-dot.yellow{ background:#febc2e }
.cw-dot.green{ background:#28c840 }
.cw-title{
  margin-left:14px;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
.cw-body{
  padding:20px 24px;
  font-size:13px; line-height:1.7;
  color:rgba(255,255,255,0.88);
  white-space:pre;
  overflow-x:auto;
}
.cw-key{ color:#7ec3ff }            /* light blue keys */
.cw-str{ color:#ffb84d }             /* orange strings */
.cw-num{ color:#3ee08a }             /* green numbers */
.cw-com{ color:rgba(255,255,255,0.4); font-style:italic } /* comment grey */
.cw-fn{ color:var(--orange) }        /* function names */
/* typing cursor */
.cw-cursor::after{
  content:'▌';
  color:var(--orange);
  animation:cwBlink 1s steps(2) infinite;
}
@keyframes cwBlink{
  50%{ opacity:0 }
}

/* ---------- .map-region — SVG world map with industry pins ---------- */
.map-region{
  position:relative;
  max-width:1440px; margin:0 auto;
  padding:0 36px;
}
.map-region svg{
  width:100%; height:auto; display:block;
}
.map-region .mr-dots circle{
  fill:var(--ink); opacity:0.18;
}
.section-pad.dark .map-region .mr-dots circle{
  fill:var(--white); opacity:0.18;
}
.map-region .mr-pins circle{
  fill:var(--orange);
  transform-origin:center;
  animation:hubpulse 3s ease-in-out infinite;
}
.map-region .mr-pins circle:nth-child(2){ animation-delay:0.4s }
.map-region .mr-pins circle:nth-child(3){ animation-delay:0.8s }
.map-region .mr-pins circle:nth-child(4){ animation-delay:1.2s }
.map-region .mr-pins circle:nth-child(5){ animation-delay:1.6s }
.map-region .mr-pins circle:nth-child(6){ animation-delay:2.0s }

/* ---------- .related-rail — 3-card linker above footer ---------- */
.related-rail{
  background:var(--white);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:80px 0 96px;
}
.related-rail .rr-inner{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
}
.related-rail .rr-label{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); opacity:0.6;
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:32px;
}
.related-rail .rr-label::before{
  content:''; width:24px; height:1px; background:var(--orange);
}
.related-rail .rr-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.rr-card{
  background:var(--white);
  padding:36px 32px;
  display:flex; flex-direction:column; gap:14px;
  min-height:200px;
  transition:background 0.3s var(--ease);
}
.rr-card:hover{ background:var(--white) }    /* stay white — no tint */
.rr-tag{
  font-family:'Geist Mono',monospace; font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--orange);
}
.rr-title{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:22px; color:var(--ink); letter-spacing:-0.015em; line-height:1.25;
}
.rr-title .it{ font-family:'Instrument Serif',serif; font-style:italic; color:var(--orange) }
.rr-link{
  margin-top:auto;
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink); align-self:flex-start;
  border-bottom:1px solid var(--ink); padding-bottom:4px;
  transition:color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rr-link:hover{ color:var(--orange); border-color:var(--orange) }
.theme-platform .related-rail,
.theme-portals .related-rail{
  background:var(--navy-darker); border-color:var(--line-dark);
}
.theme-platform .related-rail .rr-grid,
.theme-portals .related-rail .rr-grid{ background:var(--line-dark); border-color:var(--line-dark) }
.theme-platform .rr-card,
.theme-portals .rr-card{ background:rgba(255,255,255,0.025) }
.theme-platform .rr-title,
.theme-portals .rr-title{ color:var(--white) }
.theme-platform .rr-link,
.theme-portals .rr-link{ color:var(--white); border-color:rgba(255,255,255,0.45) }
.theme-platform .related-rail .rr-label,
.theme-portals .related-rail .rr-label{ color:rgba(255,255,255,0.7); opacity:1 }
@media (max-width:900px){
  .related-rail .rr-grid{ grid-template-columns:1fr }
}

/* ---------- :focus-visible — 2px orange outline on every interactive ---------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}
.section-pad.dark a:focus-visible,
.section-pad.dark button:focus-visible,
.theme-platform a:focus-visible,
.theme-platform button:focus-visible,
.theme-portals a:focus-visible,
.theme-portals button:focus-visible{
  outline-offset:3px;
}

/* ============================================
   MAGAZINE LAYER — premium restructure
   Cascading overrides. Applies to all 46 pages.
   - Rounded everything (no sharp rectangles)
   - More navy presence (alternating sections)
   - Format-aware photo treatment
   - Slower, gentler animations + parallax + scale
   - Pill buttons, soft shadows, magazine spreads
   ============================================ */

/* Override .df-image: rounded magazine frame */
.df-image{
  border:none !important;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  background:transparent;
}
.df-image::after{
  border-radius:inherit;
}
.df-image img,
.df-image video{
  transition:filter 0.8s var(--ease), transform 1.4s var(--ease);
}
.df-image.df-img-loaded img,
.df-image.df-img-loaded video{
  transform:translate3d(0,0,0) scale(1);
}
.df-image:hover{
  box-shadow:var(--shadow-deep);
}
.df-image:hover img,
.df-image:hover video{
  transform:scale(1.04) !important;
}

/* Format variants — image picks its own aspect */
.df-image.portrait{ aspect-ratio:3/4 }
.df-image.landscape{ aspect-ratio:16/9 }
.df-image.wide{ aspect-ratio:21/9 }
.df-image.square{ aspect-ratio:1/1 }

/* Bleed band — full viewport width photo with navy overlay,
   no inner margin, no rounding on outer edges */
.bleed-band{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  aspect-ratio:21/9;
  overflow:hidden;
  background:var(--navy-darker);
}
.bleed-band img,
.bleed-band video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.1) contrast(1.05) brightness(0.7);
  transition:filter 1.2s var(--ease), transform 1.6s var(--ease);
}
.bleed-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,16,62,0.5) 0%, rgba(3,16,62,0.25) 40%, rgba(3,16,62,0.85) 100%);
  pointer-events:none;
}
.bleed-band-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:flex-end; align-items:flex-start;
  padding:80px 8vw;
  z-index:2;
  color:var(--white);
}
.bleed-band-eyebrow{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--orange);
  margin-bottom:16px;
}
.bleed-band-title{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(36px, 4.6vw, 64px);
  line-height:1.08; letter-spacing:-0.03em;
  color:var(--white);
  max-width:900px;
}
.bleed-band-title .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange-soft); font-weight:400;
}
@media (max-width:780px){
  .bleed-band{ aspect-ratio:4/5 }
  .bleed-band-content{ padding:48px 24px }
}

/* Deep blue block — navy panel, rounded, white type */
.deep-blue-block{
  background:var(--navy-darker);
  color:var(--white);
  border-radius:var(--radius-lg);
  padding:80px 64px;
  box-shadow:var(--shadow-deep);
  position:relative;
  overflow:hidden;
}
.deep-blue-block::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(800px 400px at 0% 0%, rgba(248,145,0,0.10), transparent 50%),
             radial-gradient(800px 400px at 100% 100%, rgba(11,43,141,0.6), transparent 50%);
  pointer-events:none;
}
.deep-blue-block > *{ position:relative; z-index:1 }
@media (max-width:780px){
  .deep-blue-block{ padding:48px 28px; border-radius:var(--radius-md) }
}

/* Editorial spread — 60/40 image + text magazine layout */
.editorial-spread{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
  display:grid; grid-template-columns:6fr 4fr;
  gap:64px; align-items:center;
}
.editorial-spread.reverse{ grid-template-columns:4fr 6fr; }
.editorial-spread.reverse .es-text{ order:-1 }
.editorial-spread .df-image{
  width:100%;
  aspect-ratio:4/5;
}
.es-text{
  display:flex; flex-direction:column;
  gap:24px;
}
.es-intro{
  font-family:'Instrument Serif',serif; font-style:italic;
  font-size:clamp(20px, 2vw, 28px);
  line-height:1.35; color:var(--ink);
  letter-spacing:-0.005em;
}
.es-intro .it{ color:var(--orange) }
.section-pad.dark .es-intro{ color:rgba(255,255,255,0.95) }
.es-body{
  font-size:16px; line-height:1.7;
  color:var(--ink); opacity:0.82;
}
.section-pad.dark .es-body{ color:rgba(255,255,255,0.82); opacity:1 }
.es-cta{
  align-self:flex-start;
  margin-top:8px;
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink);
  padding:14px 28px;
  border:1px solid var(--ink);
  border-radius:var(--radius-pill);
  transition:background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.es-cta:hover{
  background:var(--orange);
  color:var(--ink);
  border-color:var(--orange);
}
.section-pad.dark .es-cta{
  color:var(--white); border-color:rgba(255,255,255,0.45);
}
.section-pad.dark .es-cta:hover{
  background:var(--orange); color:var(--ink); border-color:var(--orange);
}
@media (max-width:900px){
  .editorial-spread,
  .editorial-spread.reverse{ grid-template-columns:1fr; gap:32px }
  .editorial-spread.reverse .es-text{ order:0 }
}

/* Chapter mark — oversized magazine chapter number */
.chapter-mark{
  display:flex; align-items:baseline; gap:24px;
  margin-bottom:32px;
}
.chapter-mark-num{
  font-family:'Instrument Serif',serif; font-style:italic;
  font-size:clamp(48px, 6vw, 96px);
  line-height:1; color:var(--orange);
  letter-spacing:-0.04em;
}
.chapter-mark-title{
  font-family:'Geist Mono',monospace; font-size:12px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink); opacity:0.72;
}
.section-pad.dark .chapter-mark-title{ color:rgba(255,255,255,0.75); opacity:1 }

/* Magazine pull-quote — oversized italic, navy rules above/below */
.magazine-quote{
  max-width:1100px; margin:0 auto;
  padding:80px 36px;
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.magazine-quote blockquote{
  font-family:'Instrument Serif',serif; font-style:italic;
  font-size:clamp(32px, 4vw, 64px);
  line-height:1.15; letter-spacing:-0.015em;
  color:var(--ink); max-width:920px; margin:0 auto;
}
.magazine-quote blockquote .it{ color:var(--orange) }
.magazine-quote .mq-attr{
  margin-top:36px;
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); opacity:0.66;
}
.section-pad.dark .magazine-quote{ border-color:var(--line-dark) }
.section-pad.dark .magazine-quote blockquote{ color:var(--white) }
.section-pad.dark .magazine-quote .mq-attr{ color:rgba(255,255,255,0.7); opacity:1 }

/* Feature card — rounded, soft shadow, replaces sharp .hc */
.feature-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:48px 40px;
  box-shadow:var(--shadow-soft);
  transition:transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  display:flex; flex-direction:column;
  min-height:340px;
}
.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-deep);
}
.feature-card.dark{
  background:var(--navy);
  color:var(--white);
}
.feature-card.dark .fc-body{ color:rgba(255,255,255,0.86); opacity:1 }
.feature-card.dark .fc-link{ color:var(--white); border-bottom-color:rgba(255,255,255,0.45) }
.feature-card.accent{
  background:var(--orange);
  color:var(--ink);
}
.fc-tag{
  font-family:'Geist Mono',monospace; font-size:10px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--orange);
  margin-bottom:20px;
  display:inline-flex; align-items:center; gap:10px;
}
.feature-card.dark .fc-tag,
.feature-card.accent .fc-tag{ color:var(--white) }
.feature-card.accent .fc-tag{ color:var(--ink); opacity:0.85 }
.fc-h3{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:28px; line-height:1.22; letter-spacing:-0.02em;
  color:inherit; margin-bottom:16px;
}
.fc-h3 .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange); font-weight:400;
}
.feature-card.dark .fc-h3 .it{ color:var(--orange-soft) }
.feature-card.accent .fc-h3 .it{ color:var(--navy-darker) }
.fc-body{
  font-size:15px; line-height:1.6;
  color:var(--ink); opacity:0.78;
  margin-bottom:28px;
}
.fc-link{
  margin-top:auto;
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  align-self:flex-start;
  border-bottom:1px solid currentColor;
  padding-bottom:4px;
  transition:color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.fc-link:hover{ color:var(--orange); border-color:var(--orange); transform:translateX(4px) }
.feature-card.dark .fc-link:hover{ color:var(--orange-soft); border-color:var(--orange-soft) }

/* Feature card grid — replaces .hall layout */
.feature-grid{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.feature-grid.two-col{ grid-template-columns:repeat(2, 1fr) }
.feature-grid .span-2{ grid-column:span 2 }
@media (max-width:1100px){ .feature-grid{ grid-template-columns:repeat(2, 1fr) } .feature-grid .span-2{ grid-column:span 2 } }
@media (max-width:680px){ .feature-grid{ grid-template-columns:1fr } .feature-grid .span-2{ grid-column:span 1 } }

/* Pill buttons — soften the existing .btn-primary / .btn-ghost */
.btn-primary,
.btn-ghost,
.nav-cta{
  border-radius:var(--radius-pill) !important;
}
.btn-primary{
  background:var(--navy) !important;
  color:var(--white) !important;
  border-color:var(--navy) !important;
  transition:background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease) !important;
}
.btn-primary:hover{
  background:var(--orange) !important;
  color:var(--ink) !important;
  border-color:var(--orange) !important;
  transform:translateY(-2px);
}
.btn-ghost{
  border-color:rgba(255,255,255,0.4) !important;
  transition:background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease) !important;
}
.btn-ghost:hover{
  background:var(--white) !important;
  color:var(--ink) !important;
  border-color:var(--white) !important;
  transform:translateY(-2px);
}
.nav-cta{
  padding:13px 26px !important;
}

/* Section rhythm — make more sections navy on Home and other top pages */
.theme-home .section-pad:nth-of-type(odd):not(.section-centered):not(.dark){
  /* leave white — alternation happens via explicit .dark in HTML */
}

/* Soften .section-pad.dark — magazine warmth, not flat slab */
.section-pad.dark{
  background:linear-gradient(180deg, var(--navy-darker) 0%, #0a1535 100%) !important;
}

/* Hero block — pill primary CTA, softer aurora blobs */
.hero{
  border-bottom:none;
}
.hero-actions .btn-primary,
.hero-actions .btn-ghost,
.hero-actions .play-btn{
  border-radius:var(--radius-pill);
}

/* Round the existing .hall .hc cards too (mixed-look mitigation) */
.hall{
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.hall .hc{
  /* gap between cards still 1px line, but corners on outer cards rounded */
}
.hc{
  border-radius:0; /* preserved inside hall grid; outer hall provides the rounding */
}

/* Round .t-card, .cmp-col, .case-cta, .faq-item containers softly */
.t-card{ border-radius:var(--radius-md) }
.cmp-grid{ border-radius:var(--radius-lg); overflow:hidden }

/* Nav: scroll-shrink class set by JS */
.nav.scrolled .nav-inner{
  padding-top:10px;
  padding-bottom:10px;
}
.nav.scrolled{
  box-shadow:var(--shadow-soft);
}

/* Reveal animation: slow down + add scale on .df-image */
.df-image{
  transform:translate3d(0, 24px, 0) scale(0.985);
  transition:transform 0.9s var(--ease), box-shadow 0.5s var(--ease);
}
.df-image.df-img-loaded{
  transform:translate3d(0, 0, 0) scale(1);
}

/* Gentle scroll-driven parallax: photos translate slightly slower than scroll
   (CSS only, via container-aware translate) */
@supports (animation-timeline: scroll()){
  .df-image.parallax img,
  .df-image.parallax video{
    animation: parallaxRise linear;
    animation-timeline: view();
    animation-range: entry 0% cover 100%;
  }
  @keyframes parallaxRise{
    from{ transform: translateY(40px) scale(1.06) }
    to{ transform: translateY(-40px) scale(1.06) }
  }
}

/* Magazine intro — large editorial intro paragraph block */
.magazine-intro{
  max-width:920px; margin:0 auto;
  padding:0 36px;
  font-family:'Instrument Serif',serif; font-style:italic;
  font-size:clamp(22px, 2.2vw, 32px);
  line-height:1.4; color:var(--ink);
  letter-spacing:-0.005em;
  text-align:center;
}
.magazine-intro .it{ color:var(--orange) }
.section-pad.dark .magazine-intro{ color:rgba(255,255,255,0.92) }

/* Small responsive niceties on .section-pad inner content */
.section-pad{
  border-bottom:none;
}
.section-pad + .section-pad{
  /* removed forced 1px line between adjacent sections;
     navy/white alternation provides the rhythm */
}

/* ============================================
   MAGAZINE LAYER 2 — videos + image mosaic
   Aspect ratio respected per asset. Navy gradient
   washes between sections. Premium magazine feel.
   ============================================ */

/* Body backdrop — subtle navy wash so even "white" sections
   sit on a deep blue page (more blue overall) */
body.theme-home,
body.theme-solutions,
body.theme-industries,
body.theme-company,
body.theme-talent{
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(11,43,141,0.06), transparent 60%),
    radial-gradient(1200px 800px at 110% 110%, rgba(11,43,141,0.05), transparent 60%),
    #ffffff;
}

/* Section-pad (white) gets a faint navy tint border-top/bottom */
.section-pad:not(.dark){
  position:relative;
  background:transparent;
}

/* ============================================
   .video-bleed — full-bleed video band with navy
   gradient overlay and editorial copy
   ============================================ */
.video-bleed{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  aspect-ratio:21/9;
  overflow:hidden;
  background:var(--navy-darker);
}
.video-bleed video,
.video-bleed img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.05) contrast(1.05) brightness(0.7);
}
.video-bleed::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(3,16,62,0.85) 0%, rgba(3,16,62,0.35) 40%, rgba(3,16,62,0.15) 100%),
    linear-gradient(180deg, transparent 50%, rgba(3,16,62,0.6) 100%);
  pointer-events:none;
  z-index:1;
}
.video-bleed-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start;
  padding:0 8vw;
  z-index:2;
  color:var(--white);
  max-width:1200px;
}
.video-bleed-eyebrow{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--orange);
  margin-bottom:20px;
  display:inline-flex; align-items:center; gap:12px;
}
.video-bleed-eyebrow::before{
  content:''; width:24px; height:1px; background:var(--orange);
}
.video-bleed-title{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(40px, 5.4vw, 84px);
  line-height:1.04; letter-spacing:-0.035em;
  color:var(--white);
  max-width:1000px;
}
.video-bleed-title .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange-soft); font-weight:400;
}
.video-bleed-sub{
  font-size:18px; line-height:1.5;
  color:rgba(255,255,255,0.9);
  max-width:560px;
  margin-top:24px;
}
@media (max-width:780px){
  .video-bleed{ aspect-ratio:4/5 }
  .video-bleed-content{ padding:0 24px }
  .video-bleed-title{ font-size:clamp(32px, 8vw, 56px) }
}

/* ============================================
   .video-tile — inline video card, rounded
   Used in editorial spreads + mosaic
   ============================================ */
.video-tile{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  background:var(--navy-darker);
  aspect-ratio:16/9;
}
.video-tile.portrait{ aspect-ratio:3/4 }
.video-tile.square{ aspect-ratio:1/1 }
.video-tile video,
.video-tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.1) contrast(1.05) brightness(0.95);
  transition:filter 0.6s var(--ease), transform 1.2s var(--ease);
}
.video-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(3,16,62,0.55) 100%);
  pointer-events:none;
}
.video-tile:hover video,
.video-tile:hover img{
  transform:scale(1.04);
}
.video-tile-cap{
  position:absolute; left:20px; bottom:18px;
  font-family:'Geist Mono',monospace; font-size:10px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.92); z-index:2;
}
.video-tile-num{
  position:absolute; right:20px; top:18px;
  font-family:'Geist Mono',monospace; font-size:10px;
  color:var(--orange); letter-spacing:0.14em; z-index:2;
}

/* ============================================
   .mosaic-grid — magazine masonry-like image grid
   Respects native aspect ratios via per-cell config
   ============================================ */
.mosaic{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
}
.mosaic-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:80px;
  gap:16px;
}
.mosaic-grid > *{
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  position:relative;
}
.mosaic-grid > * img,
.mosaic-grid > * video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.1) contrast(1.05) brightness(0.95);
  transition:transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.mosaic-grid > *:hover img,
.mosaic-grid > *:hover video{
  transform:scale(1.05);
  filter:grayscale(0) contrast(1.08) brightness(1);
}
.mosaic-grid > *::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(3,16,62,0.55) 100%);
  pointer-events:none;
}

/* Mosaic span variants — pick per cell to honor image shape */
.mosaic-grid .mc-portrait{ grid-column:span 4; grid-row:span 6 } /* tall */
.mosaic-grid .mc-landscape-l{ grid-column:span 8; grid-row:span 4 } /* big landscape */
.mosaic-grid .mc-landscape-m{ grid-column:span 6; grid-row:span 4 } /* mid landscape */
.mosaic-grid .mc-landscape-s{ grid-column:span 4; grid-row:span 3 } /* small landscape */
.mosaic-grid .mc-square{ grid-column:span 4; grid-row:span 4 } /* square */
.mosaic-grid .mc-wide{ grid-column:span 12; grid-row:span 3 } /* full row wide */
.mosaic-grid .mc-video-portrait{ grid-column:span 4; grid-row:span 7 } /* tall video */
.mosaic-grid .mc-video-landscape{ grid-column:span 8; grid-row:span 5 } /* video landscape */

.mosaic-grid .mc-cap{
  position:absolute; left:18px; bottom:14px;
  font-family:'Geist Mono',monospace; font-size:10px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.92); z-index:2;
}
.mosaic-grid .mc-num{
  position:absolute; right:18px; top:14px;
  font-family:'Geist Mono',monospace; font-size:10px;
  color:var(--orange); letter-spacing:0.14em; z-index:2;
}

@media (max-width:1100px){
  .mosaic-grid{ grid-template-columns:repeat(6, 1fr); grid-auto-rows:80px; }
  .mosaic-grid .mc-portrait{ grid-column:span 3; grid-row:span 5 }
  .mosaic-grid .mc-landscape-l{ grid-column:span 6; grid-row:span 4 }
  .mosaic-grid .mc-landscape-m{ grid-column:span 6; grid-row:span 3 }
  .mosaic-grid .mc-landscape-s{ grid-column:span 3; grid-row:span 3 }
  .mosaic-grid .mc-square{ grid-column:span 3; grid-row:span 3 }
  .mosaic-grid .mc-wide{ grid-column:span 6; grid-row:span 3 }
  .mosaic-grid .mc-video-portrait{ grid-column:span 3; grid-row:span 5 }
  .mosaic-grid .mc-video-landscape{ grid-column:span 6; grid-row:span 4 }
}
@media (max-width:640px){
  .mosaic-grid{ grid-template-columns:1fr; grid-auto-rows:60px; }
  .mosaic-grid > *{ grid-column:span 1 !important; grid-row:span 4 !important }
  .mosaic-grid .mc-portrait,
  .mosaic-grid .mc-video-portrait{ grid-row:span 6 !important }
}

/* ============================================
   .navy-band — short navy-blue section with editorial copy,
   used between content sections for more blue rhythm
   ============================================ */
.navy-band{
  background:linear-gradient(135deg, var(--navy-darker) 0%, var(--navy-deep) 100%);
  color:var(--white);
  padding:80px 0;
  position:relative;
  overflow:hidden;
}
.navy-band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(800px 400px at 5% 50%, rgba(248,145,0,0.06), transparent 50%),
    radial-gradient(800px 400px at 95% 50%, rgba(255,255,255,0.04), transparent 50%);
  pointer-events:none;
}
.navy-band-inner{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:center;
  position:relative; z-index:1;
}
.navy-band-h{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(28px, 3.6vw, 48px);
  line-height:1.12; letter-spacing:-0.025em;
  color:var(--white);
}
.navy-band-h .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange); font-weight:400;
}
.navy-band-body{
  font-size:16px; line-height:1.7;
  color:rgba(255,255,255,0.85);
}
@media (max-width:780px){
  .navy-band-inner{ grid-template-columns:1fr; gap:24px }
}

/* ============================================
   .stat-row — big inline stat row, navy or white
   ============================================ */
.stat-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  max-width:1440px; margin:0 auto;
  padding:60px 36px;
}
.stat-row.navy{
  background:var(--navy-darker);
  color:var(--white);
  max-width:none;
  padding:80px 8vw;
}
.stat-row > .stat-cell{
  display:flex; flex-direction:column;
  gap:8px;
}
.stat-row .stat-num{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(48px, 5vw, 80px);
  line-height:1; letter-spacing:-0.04em;
  color:var(--ink);
}
.stat-row .stat-num .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange); font-size:0.7em;
}
.stat-row.navy .stat-num{ color:var(--white) }
.stat-row .stat-lbl{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink); opacity:0.66;
}
.stat-row.navy .stat-lbl{ color:rgba(255,255,255,0.7); opacity:1 }
@media (max-width:780px){
  .stat-row{ grid-template-columns:repeat(2, 1fr); padding:36px 24px }
}

/* ---------- footer deep submenu (Solutions column) ---------- */
.foot-col .foot-cat{
  font-family:'Geist Mono',monospace;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:inherit;
  margin-top:18px;
  margin-bottom:8px;
  opacity:0.95;
  list-style:none;
}
.foot-col .foot-cat:first-child{margin-top:0}

/* ---------- footer Solutions — category-level expand on click ---------- */
.foot-cat-detail{
  margin:0 0 4px;
}
.foot-cat-detail > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  user-select:none;
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:-0.005em;
  text-transform:none;
  color:inherit;
  padding:6px 0;
  position:relative;
  transition:color 0.25s var(--ease, ease);
}
.foot-cat-detail > summary:hover{color:var(--orange)}
.foot-cat-detail > summary::-webkit-details-marker{display:none}
.foot-cat-detail > summary::marker{display:none;content:''}
.foot-cat-detail > summary::after{
  content:'';
  display:inline-block;
  width:6px;height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  opacity:0.55;
  transition:transform 0.28s var(--ease, ease), opacity 0.28s var(--ease, ease);
  flex-shrink:0;
}
.foot-cat-detail[open] > summary::after{
  transform:translateY(2px) rotate(-135deg);
  opacity:0.9;
}
.foot-cat-detail > ul{
  list-style:none;
  margin:4px 0 10px;
  padding:0 0 0 14px;
  animation:footCatReveal 0.28s ease;
}
.foot-cat-detail > ul > li{margin:0}
.foot-cat-detail > ul > li a{font-size:13px;opacity:0.85}
@keyframes footCatReveal{
  from{opacity:0;transform:translateY(-3px)}
  to{opacity:1;transform:none}
}

/* ============================================
   .cover-spread — taller cinematic opener
   Issue / Folio / Title overlay layout
   ============================================ */
.cover-spread{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  aspect-ratio:16/8;
  overflow:hidden;
  background:var(--navy-darker);
}
.cover-spread video,
.cover-spread img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.18) contrast(1.08) brightness(0.62);
}
.cover-spread::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,16,62,0.6) 0%, rgba(3,16,62,0.1) 35%, rgba(3,16,62,0.85) 100%),
    radial-gradient(1200px 600px at 80% 30%, rgba(248,145,0,0.18), transparent 60%);
  z-index:1; pointer-events:none;
}
.cover-spread-inner{
  position:absolute; inset:0; z-index:2;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:48px 8vw;
  color:var(--white);
}
.cover-spread-folio{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.78);
}
.cover-spread-folio .ft-orange{ color:var(--orange) }
.cover-spread-folio .ft-line{ flex:1; height:1px; background:rgba(255,255,255,0.25); margin:0 24px }
.cover-spread-title{
  align-self:end;
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(48px, 7vw, 112px);
  line-height:1.02; letter-spacing:-0.04em;
  color:var(--white);
  max-width:1100px;
}
.cover-spread-title .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange-soft);
}
.cover-spread-foot{
  display:flex; justify-content:space-between; align-items:end;
  margin-top:32px;
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.78);
}
.cover-spread-byline{ max-width:420px; line-height:1.7; text-transform:none; letter-spacing:0.02em; font-family:'Inter',sans-serif; font-size:15px; color:rgba(255,255,255,0.85) }
@media (max-width:780px){
  .cover-spread{ aspect-ratio:4/5 }
  .cover-spread-inner{ padding:24px }
  .cover-spread-title{ font-size:clamp(36px, 10vw, 64px) }
  .cover-spread-foot{ flex-direction:column; gap:16px; align-items:start }
}

/* ============================================
   .split-bleed — two videos side-by-side full-bleed
   ============================================ */
.split-bleed{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--navy-darker);
  aspect-ratio:24/9;
  overflow:hidden;
}
.split-bleed-pane{
  position:relative; overflow:hidden;
}
.split-bleed-pane video,
.split-bleed-pane img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.1) contrast(1.08) brightness(0.7);
}
.split-bleed-pane::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,16,62,0.25) 0%, rgba(3,16,62,0.85) 100%);
  z-index:1;
}
.split-bleed-pane-text{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:36px;
  color:var(--white);
}
.split-bleed-eyebrow{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
}
.split-bleed-title{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(24px, 2.6vw, 40px);
  line-height:1.1; letter-spacing:-0.025em;
  color:var(--white);
  max-width:520px;
}
.split-bleed-title .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange-soft);
}
.split-bleed-num{
  position:absolute; right:24px; top:20px;
  font-family:'Geist Mono',monospace; font-size:10px;
  color:rgba(255,255,255,0.7); letter-spacing:0.18em; z-index:3;
}
@media (max-width:780px){
  .split-bleed{ grid-template-columns:1fr; aspect-ratio:auto }
  .split-bleed-pane{ aspect-ratio:4/3 }
}

/* ============================================
   .portrait-wall — 3 vertical videos side by side
   Talent triptych
   ============================================ */
.portrait-wall{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.portrait-wall .video-tile{ aspect-ratio:3/4 }
@media (max-width:900px){
  .portrait-wall{ grid-template-columns:repeat(3, 1fr); gap:10px; padding:0 18px }
}
@media (max-width:640px){
  .portrait-wall{ grid-template-columns:1fr; }
}

/* ============================================
   .video-triptych — 3 landscape tiles
   ============================================ */
.video-triptych{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.video-triptych .video-tile{ aspect-ratio:4/5 }
@media (max-width:900px){
  .video-triptych{ grid-template-columns:1fr; }
}

/* ============================================
   .film-strip — horizontally scrolling band
   ============================================ */
.film-strip-wrap{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--navy-darker);
  padding:48px 0;
  overflow:hidden;
}
.film-strip-wrap::before,
.film-strip-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:120px;
  z-index:2; pointer-events:none;
}
.film-strip-wrap::before{ left:0; background:linear-gradient(90deg, var(--navy-darker), transparent) }
.film-strip-wrap::after{ right:0; background:linear-gradient(270deg, var(--navy-darker), transparent) }
.film-strip-head{
  max-width:1440px; margin:0 auto 24px;
  padding:0 36px;
  display:flex; justify-content:space-between; align-items:end;
  color:var(--white);
}
.film-strip-eyebrow{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--orange);
}
.film-strip-title{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(24px, 2.6vw, 38px);
  line-height:1.12; letter-spacing:-0.025em;
  color:var(--white);
  margin-top:10px;
}
.film-strip-title .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange-soft);
}
.film-strip-meta{
  font-family:'Geist Mono',monospace; font-size:10px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.65);
  text-align:right;
}
.film-strip{
  display:flex; gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 36px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(248,145,0,0.4) transparent;
}
.film-strip::-webkit-scrollbar{ height:6px }
.film-strip::-webkit-scrollbar-track{ background:rgba(255,255,255,0.05) }
.film-strip::-webkit-scrollbar-thumb{ background:rgba(248,145,0,0.4); border-radius:3px }
.film-strip > .video-tile{
  flex:0 0 320px;
  aspect-ratio:3/4;
  scroll-snap-align:start;
}
.film-strip > .video-tile.wide{ flex:0 0 480px; aspect-ratio:16/9 }
@media (max-width:780px){
  .film-strip > .video-tile{ flex:0 0 240px }
  .film-strip > .video-tile.wide{ flex:0 0 320px }
}

/* ============================================
   .numbers-ribbon — 2 videos with overlaid stats
   ============================================ */
.numbers-ribbon{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--navy-darker);
}
.numbers-ribbon-pane{
  position:relative; overflow:hidden;
  aspect-ratio:4/3;
}
.numbers-ribbon-pane video,
.numbers-ribbon-pane img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.12) contrast(1.05) brightness(0.55);
}
.numbers-ribbon-pane::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(3,16,62,0.7), rgba(3,16,62,0.4));
  z-index:1;
}
.numbers-ribbon-text{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 8vw;
  color:var(--white);
}
.numbers-ribbon-eyebrow{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--orange);
  margin-bottom:18px;
}
.numbers-ribbon-num{
  font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(72px, 9vw, 144px);
  line-height:0.95; letter-spacing:-0.05em;
  color:var(--white);
}
.numbers-ribbon-num .it{
  font-family:'Instrument Serif',serif; font-style:italic;
  color:var(--orange);
  font-size:0.5em;
}
.numbers-ribbon-lbl{
  font-family:'Geist Mono',monospace; font-size:12px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.8);
  margin-top:20px; max-width:340px; line-height:1.6;
}
@media (max-width:780px){
  .numbers-ribbon{ grid-template-columns:1fr }
}

/* ============================================
   .quote-bleed — magazine-quote with video backdrop
   ============================================ */
.quote-bleed{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  aspect-ratio:16/7;
  overflow:hidden;
  background:var(--navy-darker);
}
.quote-bleed video,
.quote-bleed img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.4) contrast(1.1) brightness(0.45);
}
.quote-bleed::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,16,62,0.55), rgba(3,16,62,0.85)),
    radial-gradient(900px 500px at 50% 50%, rgba(248,145,0,0.1), transparent 60%);
  z-index:1;
}
.quote-bleed-inner{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:0 8vw; text-align:center;
  color:var(--white);
}
.quote-bleed blockquote{
  font-family:'Instrument Serif',serif;
  font-style:italic; font-weight:400;
  font-size:clamp(32px, 4.4vw, 64px);
  line-height:1.15; letter-spacing:-0.02em;
  color:var(--white); max-width:1100px;
  margin:0;
}
.quote-bleed blockquote .it{ color:var(--orange-soft) }
.quote-bleed .qb-attr{
  font-family:'Geist Mono',monospace; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  margin-top:32px;
}
.quote-bleed .qb-mark{
  font-family:'Instrument Serif',serif;
  font-size:120px; line-height:1; color:var(--orange);
  opacity:0.45; margin-bottom:-30px;
}
@media (max-width:780px){
  .quote-bleed{ aspect-ratio:4/5 }
}

/* ============================================
   .marquee-line — running headline ticker between sections
   ============================================ */
.marquee-line{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--ink);
  color:var(--white);
  padding:18px 0;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.marquee-line-track{
  display:flex; gap:48px; white-space:nowrap;
  animation:marquee-slide 38s linear infinite;
  font-family:'Geist Mono',monospace; font-size:12px;
  letter-spacing:0.18em; text-transform:uppercase;
}
.marquee-line-track span{ display:inline-flex; align-items:center; gap:14px }
.marquee-line-track .ml-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--orange); display:inline-block;
}
@keyframes marquee-slide{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}

/* =====================================================
   THEME: HOME — dial down the orange, lean navy
   Scoped to body.theme-home. Same token-override pattern
   as the healthcare theme, applied to the landing page.
   ===================================================== */
body.theme-home{
  --orange:#0b2b8d;          /* brand navy */
  --orange-soft:#1a3fb8;     /* slightly lifted navy for hover */
  --navy-light:#7a92d6;      /* legible navy tint for dark surfaces */
}
.theme-home .cur-ring.hover{background:rgba(11,43,141,0.08);border-color:var(--navy)}
.theme-home .globe-tip.pin{box-shadow:0 0 0 1px rgba(11,43,141,0.28)}
.theme-home .pq:hover{background:rgba(11,43,141,0.05)}
.theme-home .aurora .b2{
  background:radial-gradient(circle,rgba(11,43,141,0.55),transparent 60%);
}
.theme-home .live-dot::before{
  box-shadow:0 0 0 0 rgba(11,43,141,0.6), 0 0 8px rgba(11,43,141,0.5);
  animation:homePulse 2.2s ease-out infinite;
}
@keyframes homePulse{
  0%{box-shadow:0 0 0 0 rgba(11,43,141,0.55), 0 0 8px rgba(11,43,141,0.5)}
  70%{box-shadow:0 0 0 9px rgba(11,43,141,0), 0 0 8px rgba(11,43,141,0.5)}
  100%{box-shadow:0 0 0 0 rgba(11,43,141,0), 0 0 8px rgba(11,43,141,0.5)}
}
.theme-home .ticker-track span:nth-child(odd){color:var(--navy-light)}
.theme-home .ticker.is-scrubbing .ticker-track::after{
  background:radial-gradient(240px 80px at var(--tk-spot-x) 50%, rgba(11,43,141,0.22), rgba(11,43,141,0.04) 55%, transparent 75%);
}
.theme-home .ticker-status-label{text-shadow:0 0 12px rgba(11,43,141,0.45)}

/* keep-orange opt-out works on the home theme too */
.theme-home .keep-orange{
  --orange:#f89100;
  --orange-soft:#ffb84d;
}
.theme-home .dx-band.keep-orange::before{
  background:linear-gradient(90deg, rgba(3,16,62,0.55), rgba(3,16,62,0.05) 60%, transparent);
}
.theme-home .dx-band.keep-orange .dx-band-eyebrow{color:var(--orange)}
.theme-home .dx-band.keep-orange .dx-band-eyebrow::before{background:var(--orange)}
.theme-home .dx-band.keep-orange.dx-band-video::after{
  background:linear-gradient(180deg, rgba(3,16,62,0.15) 0%, rgba(3,16,62,0.55) 100%);
}
.theme-home .final-cta.keep-orange{background:var(--navy-darker)}
.theme-home .final-cta.keep-orange .final-eye{color:var(--orange)}

/* .accent-orange — utility class to restore the warm orange accent
   on an element (and its descendants) within a navy-themed page.
   Use sparingly: brand moments, value props, key metric suffixes. */
.theme-home .accent-orange,
.theme-home .accent-orange .it,
.theme-home .accent-orange .rt-current,
.theme-home .accent-orange .rt-caret{
  --orange:#f89100;
  --orange-soft:#ffb84d;
  color:#f89100;
}

/* =====================================================
   THEME: HEALTHCARE — premium blue accent layer
   Scoped to body.theme-healthcare. Layers deeper navy
   chrome, editorial lede typography, and a hero spec rail.
   ===================================================== */

/* Recolor accent token: all var(--orange) usages on the
   healthcare theme inherit the brand navy instead. A lighter
   navy tint is exposed for use on dark backgrounds. */
body.theme-healthcare{
  --orange:#0b2b8d;          /* brand navy */
  --orange-soft:#1a3fb8;     /* slightly lifted navy for hover */
  --navy-light:#7a92d6;      /* legible navy tint for dark surfaces */
}
/* Rules that use literal rgba(248,145,0,...) need explicit
   overrides; map them to navy with matching opacity. */
.theme-blue .cur-ring.hover{background:rgba(11,43,141,0.08);border-color:var(--navy)}
.theme-blue .globe-tip.pin{box-shadow:0 0 0 1px rgba(11,43,141,0.28)}
.theme-blue .pq:hover{background:rgba(11,43,141,0.05)}

/* Hero aurora — warm blob recolored to a cool blue glow */
.theme-blue .aurora .b2{
  background:radial-gradient(circle,rgba(11,43,141,0.55),transparent 60%);
}
/* Live-dot pulse ring */
.theme-blue .live-dot::before{
  box-shadow:0 0 0 0 rgba(11,43,141,0.6), 0 0 8px rgba(11,43,141,0.5);
  animation:hcPulse 2.2s ease-out infinite;
}
@keyframes hcPulse{
  0%{box-shadow:0 0 0 0 rgba(11,43,141,0.55), 0 0 8px rgba(11,43,141,0.5)}
  70%{box-shadow:0 0 0 9px rgba(11,43,141,0), 0 0 8px rgba(11,43,141,0.5)}
  100%{box-shadow:0 0 0 0 rgba(11,43,141,0), 0 0 8px rgba(11,43,141,0.5)}
}
/* Ticker odd-child highlight + scrub spotlight */
.theme-blue .ticker-track span:nth-child(odd){color:var(--navy-light)}
.theme-blue .ticker.is-scrubbing .ticker-track::after{
  background:radial-gradient(240px 80px at var(--tk-spot-x) 50%, rgba(11,43,141,0.22), rgba(11,43,141,0.04) 55%, transparent 75%);
}
.theme-blue .ticker-status-label{text-shadow:0 0 12px rgba(11,43,141,0.45)}

/* .keep-orange — opt-out from the healthcare blue theme on a per-section
   basis. Restores the original orange token and undoes the dx-band/video-bleed
   healthcare overrides inside the marked element. */
.theme-blue .keep-orange{
  --orange:#f89100;
  --orange-soft:#ffb84d;
}
/* dx-band — restore original warm gradient + orange eyebrow */
.theme-blue .dx-band.keep-orange::before{
  background:linear-gradient(90deg, rgba(3,16,62,0.55), rgba(3,16,62,0.05) 60%, transparent);
}
.theme-blue .dx-band.keep-orange .dx-band-eyebrow{color:var(--orange)}
.theme-blue .dx-band.keep-orange .dx-band-eyebrow::before{background:var(--orange)}
.theme-blue .dx-band.keep-orange.dx-band-video::after{
  background:linear-gradient(180deg, rgba(3,16,62,0.15) 0%, rgba(3,16,62,0.55) 100%);
}
/* final-cta — restore original navy-darker background (was retinted to a navy gradient) */
.theme-blue .final-cta.keep-orange{
  background:var(--navy-darker);
}
.theme-blue .final-cta.keep-orange .final-eye{color:var(--orange)}
/* section-pad with keep-orange — restore default orange-tinted section-head colors */
.theme-blue .section-pad.keep-orange .section-head .sh-num{color:var(--orange)}
.theme-blue .section-pad.keep-orange .section-head .sh-title{color:var(--ink)}
.theme-blue .section-pad.keep-orange .section-head .sh-edition{color:rgba(10,14,26,0.55)}
.theme-blue .section-pad.keep-orange.dark .section-head .sh-num{color:var(--orange)}
.theme-blue .section-pad.keep-orange.dark .section-head .sh-title{color:rgba(255,255,255,0.9)}
.theme-blue .section-pad.keep-orange.dark .section-head .sh-edition{color:rgba(255,255,255,0.78)}
.theme-blue .section-pad.keep-orange h2.editorial{color:var(--ink)}
.theme-blue .section-pad.keep-orange h2.editorial .it{color:var(--orange)}
.theme-blue .section-pad.keep-orange .cmp-h3{color:var(--ink)}
.theme-blue .section-pad.keep-orange .cmp-h3 .it{color:var(--orange)}

.theme-blue .eyebrow-blue{
  color:var(--navy-light);
  letter-spacing:0.22em;
}
.theme-blue .eyebrow-blue::before{
  background:var(--navy-light);
}

.theme-blue .hero-lede{
  font-family:'Instrument Serif',serif;
  font-size:clamp(22px,2.3vw,30px);
  line-height:1.32;
  letter-spacing:-0.01em;
  color:#ffffff;
  margin:0 0 22px;
  max-width:780px;
  text-shadow:0 1px 14px rgba(3,16,62,0.55);
}
.theme-blue .hero-sub{
  color:rgba(255,255,255,0.94);
  max-width:780px;
  margin-bottom:18px;
}
.theme-blue .hero-sub-muted{
  color:rgba(255,255,255,0.72);
  font-size:0.96em;
}

/* OPI hero — flex column with explicit gaps so margins can't drift */
.page-opi .hero-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.page-opi .hero-text > *{margin:0 !important}
.page-opi .hero-text > .eyebrow{margin-bottom:28px !important}
.page-opi .hero-text > h1.hero-h1{margin-bottom:10px !important}
.page-opi .hero-text > .hero-lede{margin-bottom:18px !important}
.page-opi .hero-text > .hero-sub{margin-bottom:14px !important;max-width:780px}
.page-opi .hero-text > .hero-sub.hero-sub-muted{margin-bottom:28px !important}
.page-opi .hero-text > .hero-actions{margin-bottom:0 !important;margin-top:8px !important}
.page-opi .hero-text > .hc-spec-rail{width:100%;margin-top:32px !important}

/* Cap H1 size so each of the three lines fits the hero-text column on landscape */
.page-opi h1.hero-h1{font-size:clamp(40px,5.2vw,72px) !important;line-height:1.04 !important}
.page-opi h1.hero-h1 > span{white-space:nowrap}

/* ============================================================
   CUSTOMER SERVICE (CS) — orange-forward CX hero scope. Mirrors
   .page-opi flex-column hero, forces white hero text for
   visibility over the bg video, tints spec rail amber.
   ============================================================ */
.page-cs .hero-text, .page-billing .hero-text, .page-bo .hero-text{display:flex;flex-direction:column;align-items:flex-start}
.page-cs .hero-text > *, .page-billing .hero-text > *, .page-bo .hero-text > *{margin:0}
.page-cs .hero-text > .eyebrow, .page-billing .hero-text > .eyebrow, .page-bo .hero-text > .eyebrow{margin-bottom:28px !important;color:#ffffff !important}
.page-cs .hero-text > h1.hero-h1, .page-billing .hero-text > h1.hero-h1, .page-bo .hero-text > h1.hero-h1{margin-bottom:10px !important;color:#ffffff !important;text-shadow:0 2px 18px rgba(8,16,38,0.55), 0 1px 2px rgba(0,0,0,0.4)}
.page-cs .hero-text > .hero-lede, .page-billing .hero-text > .hero-lede, .page-bo .hero-text > .hero-lede{margin-bottom:18px !important;color:#ffffff !important}
.page-cs .hero-text > .hero-sub, .page-billing .hero-text > .hero-sub, .page-bo .hero-text > .hero-sub{margin-bottom:14px !important;max-width:780px;color:rgba(255,255,255,0.94) !important}
.page-cs .hero-text > .hero-sub.hero-sub-muted, .page-billing .hero-text > .hero-sub.hero-sub-muted, .page-bo .hero-text > .hero-sub.hero-sub-muted{margin-bottom:28px !important;color:rgba(255,255,255,0.74) !important}
.page-cs .hero-text > .hero-actions, .page-billing .hero-text > .hero-actions, .page-bo .hero-text > .hero-actions{margin-bottom:0 !important;margin-top:8px !important}
.page-cs .hero-text > .hc-spec-rail, .page-billing .hero-text > .hc-spec-rail, .page-bo .hero-text > .hc-spec-rail{width:100%;margin-top:32px !important}
.page-cs h1.hero-h1, .page-billing h1.hero-h1, .page-bo h1.hero-h1{font-size:clamp(40px,5.2vw,72px) !important;line-height:1.04 !important}
.page-cs h1.hero-h1 > span, .page-billing h1.hero-h1 > span, .page-bo h1.hero-h1 > span{white-space:nowrap}
.page-cs h1.hero-h1 .it, .page-billing h1.hero-h1 .it, .page-bo h1.hero-h1 .it{color:var(--orange) !important;font-family:'Instrument Serif',serif;font-style:italic}
@media (max-width:640px){
  .page-cs h1.hero-h1, .page-billing h1.hero-h1, .page-bo h1.hero-h1{font-size:clamp(30px,8.4vw,44px) !important;line-height:1.06 !important}
  .page-cs h1.hero-h1 > span, .page-billing h1.hero-h1 > span, .page-bo h1.hero-h1 > span{white-space:normal}
  .page-cs .hero-text > .hero-lede, .page-billing .hero-text > .hero-lede, .page-bo .hero-text > .hero-lede{font-size:16px;line-height:1.5}
}

/* Hero veil — warm dark so bg video reads as canvas under white text */
.page-cs .hero-bgvideo-veil, .page-billing .hero-bgvideo-veil, .page-bo .hero-bgvideo-veil{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(15,28,68,0.40), rgba(6,14,40,0.78) 60%, rgba(4,10,32,0.92) 100%),
    linear-gradient(180deg, rgba(6,14,40,0.55), rgba(4,10,32,0.85)) !important;
}

/* Spec rail — amber tint */
.page-cs .hc-spec-rail, .page-billing .hc-spec-rail, .page-bo .hc-spec-rail{
  border-top:1px solid rgba(248,145,0,0.32);
  border-bottom:1px solid rgba(248,145,0,0.32);
  background:linear-gradient(180deg,rgba(248,145,0,0.16),rgba(8,5,2,0.05));
}
.page-cs .hc-spec-val, .page-billing .hc-spec-val, .page-bo .hc-spec-val{color:#ffd28a}
.page-cs .hc-spec-lbl, .page-billing .hc-spec-lbl, .page-bo .hc-spec-lbl{color:rgba(255,255,255,0.78)}

/* Cinematic outro — warm veil + orange italic */
.page-cs .video-bleed.keep-orange::before, .page-billing .video-bleed.keep-orange::before, .page-bo .video-bleed.keep-orange::before{
  background:linear-gradient(180deg, rgba(40,20,4,0.20) 0%, rgba(40,20,4,0.70) 100%) !important;
}
.page-cs .video-bleed-title .it, .page-billing .video-bleed-title .it, .page-bo .video-bleed-title .it{color:#ffb35a !important}

/* ============================================================
   SALES GENERATION (SG) — navy-forward CX variant. Mirrors
   .page-opi flex-column hero, paints spec rail, italics, and
   cinematic outro in navy. Hero text is forced white for
   visibility over the bg video.
   ============================================================ */
body.page-sg{background:#f5f8ff}
.page-sg .hero-text{display:flex;flex-direction:column;align-items:flex-start}
.page-sg .hero-text > *{margin:0}
.page-sg .hero-text > .eyebrow{margin-bottom:28px !important;color:#ffffff !important}
.page-sg .hero-text > h1.hero-h1{margin-bottom:10px !important;color:#ffffff !important;text-shadow:0 2px 18px rgba(3,16,62,0.55), 0 1px 2px rgba(0,0,0,0.4)}
.page-sg .hero-text > .hero-lede{margin-bottom:18px !important;color:#ffffff !important}
.page-sg .hero-text > .hero-sub{margin-bottom:14px !important;max-width:780px;color:rgba(255,255,255,0.94) !important}
.page-sg .hero-text > .hero-sub.hero-sub-muted{margin-bottom:28px !important;color:rgba(255,255,255,0.74) !important}
.page-sg .hero-text > .hero-actions{margin-bottom:0 !important;margin-top:8px !important}
.page-sg .hero-text > .hc-spec-rail{width:100%;margin-top:32px !important}
.page-sg h1.hero-h1{font-size:clamp(40px,5.2vw,72px) !important;line-height:1.04 !important}
.page-sg h1.hero-h1 > span{white-space:nowrap}
.page-sg h1.hero-h1 .it{color:#7aa6ff !important;font-family:'Instrument Serif',serif;font-style:italic}

/* Heavier navy veil so the bg video reads as navy canvas under white text */
.page-sg .hero-bgvideo-veil{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(11,43,141,0.45), rgba(3,16,62,0.78) 60%, rgba(3,16,62,0.92) 100%),
    linear-gradient(180deg, rgba(3,16,62,0.55), rgba(3,16,62,0.85)) !important;
}

/* Aurora blobs lean fully blue (no orange leak) */
.page-sg .aurora .blob.b1{background:radial-gradient(closest-side,rgba(58,116,255,0.55),transparent 70%)}
.page-sg .aurora .blob.b2{background:radial-gradient(closest-side,rgba(11,43,141,0.55),transparent 70%)}

/* Spec rail — navy tint + bright blue numerals */
.page-sg .hc-spec-rail{
  border-top:1px solid rgba(122,146,214,0.40);
  border-bottom:1px solid rgba(122,146,214,0.40);
  background:linear-gradient(180deg,rgba(11,43,141,0.32),rgba(3,16,62,0.10));
}
.page-sg .hc-spec-val{color:#cfe0ff}
.page-sg .hc-spec-lbl{color:rgba(207,224,255,0.78)}

/* Section accents on white sections — navy sh-num, navy italics on editorial + cmp-h3 */
.page-sg .sh-num{color:var(--navy) !important}
.page-sg .sh-title{color:var(--navy) !important;opacity:0.85}
.page-sg .sh-edition{color:rgba(11,43,141,0.55) !important}
.page-sg .sh-line{background:rgba(11,43,141,0.18) !important}
.page-sg h2.editorial .it,
.page-sg .cmp-h3 .it,
.page-sg .quote-pull blockquote .it,
.page-sg .final-h2 .it,
.page-sg .rr-title .it{color:var(--navy) !important;font-style:italic}

/* Compare cards — left column gets a navy hairline + tinted bg */
.page-sg .section-pad:not(.dark) .cmp-col.new{
  background:linear-gradient(180deg,rgba(11,43,141,0.05),rgba(11,43,141,0.02)) !important;
  border:1px solid rgba(11,43,141,0.14) !important;
}
.page-sg .section-pad:not(.dark) .cmp-h3{color:var(--navy) !important}

/* dx-band — orange band keeps cream but text leans navy; video band eyebrow stays light blue */
.page-sg .dx-band.keep-orange .dx-band-eyebrow{color:var(--navy) !important}
.page-sg .dx-band.dx-band-video .dx-band-eyebrow{color:#cfe0ff !important}

/* Cross-links + related rail in navy */
.page-sg .hc-link{color:var(--navy) !important;border-color:rgba(11,43,141,0.30) !important}
.page-sg .hc-link:hover{color:#0b2b8d !important;border-color:#0b2b8d !important;background:rgba(11,43,141,0.06) !important}
.page-sg .rr-card{border-color:rgba(11,43,141,0.18)}
.page-sg .rr-card:hover{border-color:rgba(11,43,141,0.45);background:rgba(11,43,141,0.04)}
.page-sg .rr-tag{color:#0b2b8d}

/* Final CTA — navy italic accent + navy primary button */
.page-sg .final-cta.keep-orange .final-eye{color:var(--navy) !important}
.page-sg .final-cta.keep-orange .btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.page-sg .final-cta.keep-orange .btn-primary:hover{background:#0a2477;border-color:#0a2477}

/* Cinematic outro — navy veil + light-blue italic accent */
.page-sg .video-bleed.keep-orange::before{
  background:linear-gradient(180deg, rgba(3,16,62,0.20) 0%, rgba(3,16,62,0.70) 100%) !important;
}
.page-sg .video-bleed-eyebrow{color:#cfe0ff !important}
.page-sg .video-bleed-title{color:#ffffff !important}
.page-sg .video-bleed-title .it{color:#7aa6ff !important}

/* ============================================================
   VIRTUAL ASSISTANT (VA) — premium navy treatment.
   Mirrors .page-sg but operates WITHOUT requiring .keep-orange
   anywhere on the page (per VA spec). Adds a 48px gold hairline
   underneath every editorial h2 for an "edition" feel.
   ============================================================ */
body.page-va{background:#f5f8ff}
.page-va .hero-text{display:flex;flex-direction:column;align-items:flex-start}
.page-va .hero-text > *{margin:0}
.page-va .hero-text > .eyebrow{margin-bottom:28px !important;color:#ffffff !important}
.page-va .hero-text > h1.hero-h1{margin-bottom:10px !important;color:#ffffff !important;text-shadow:0 2px 18px rgba(3,16,62,0.55), 0 1px 2px rgba(0,0,0,0.4)}
.page-va .hero-text > .hero-lede{margin-bottom:18px !important;color:#ffffff !important}
.page-va .hero-text > .hero-sub{margin-bottom:14px !important;max-width:780px;color:rgba(255,255,255,0.94) !important}
.page-va .hero-text > .hero-sub.hero-sub-muted{margin-bottom:28px !important;color:rgba(255,255,255,0.74) !important}
.page-va .hero-text > .hero-actions{margin-bottom:0 !important;margin-top:8px !important}
.page-va .hero-text > .hc-spec-rail{width:100%;margin-top:32px !important}
.page-va h1.hero-h1{font-size:clamp(40px,5.2vw,72px) !important;line-height:1.04 !important}
.page-va h1.hero-h1 > span{white-space:nowrap}
.page-va h1.hero-h1 .it{color:#7aa6ff !important;font-family:'Instrument Serif',serif;font-style:italic}
@media (max-width:640px){
  .page-va h1.hero-h1{font-size:clamp(30px,8.4vw,44px) !important;line-height:1.06 !important}
  .page-va h1.hero-h1 > span{white-space:normal}
  .page-va .hero-text > .hero-lede{font-size:16px;line-height:1.5}
}

/* Hero veil — navy radial gradient at 30% 20% per spec */
.page-va .hero-bgvideo-veil{
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(11,43,141,0.45), rgba(3,16,62,0.78) 60%, rgba(3,16,62,0.92) 100%),
    linear-gradient(180deg, rgba(3,16,62,0.55), rgba(3,16,62,0.85)) !important;
}
.page-va .aurora .blob.b1{background:radial-gradient(closest-side,rgba(58,116,255,0.55),transparent 70%)}
.page-va .aurora .blob.b2{background:radial-gradient(closest-side,rgba(11,43,141,0.55),transparent 70%)}

/* Spec rail — navy fill, gold (orange) numeric val ONLY, ice labels */
.page-va .hc-spec-rail{
  border-top:1px solid rgba(122,146,214,0.40);
  border-bottom:1px solid rgba(122,146,214,0.40);
  background:linear-gradient(180deg,rgba(11,43,141,0.32),rgba(3,16,62,0.10));
}
.page-va .hc-spec-val{color:var(--orange-soft)}
.page-va .hc-spec-lbl{color:rgba(230,236,245,0.78)}

/* Section accents on white sections — navy sh-num, navy italics */
.page-va .sh-num{color:var(--navy) !important}
.page-va .sh-title{color:var(--navy) !important;opacity:0.85}
.page-va .sh-edition{color:rgba(11,43,141,0.55) !important}
.page-va .sh-line{background:rgba(11,43,141,0.18) !important}
.page-va h2.editorial .it,
.page-va .cmp-h3 .it,
.page-va .quote-pull blockquote .it,
.page-va .final-h2 .it,
.page-va .video-bleed-title .it,
.page-va .rr-title .it{color:var(--navy) !important;font-style:italic}

/* 48px gold hairline under every editorial h2 — the "edition" signal */
.page-va h2.editorial{position:relative;padding-bottom:18px}
.page-va h2.editorial::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:48px;height:2px;
  background:var(--orange);
}
.page-va .section-pad.dark h2.editorial::after{background:var(--orange-soft)}

/* Compare cards on white sections — left column gets a navy hairline + tinted bg */
.page-va .section-pad:not(.dark) .cmp-col.new{
  background:linear-gradient(180deg,rgba(11,43,141,0.05),rgba(11,43,141,0.02)) !important;
  border:1px solid rgba(11,43,141,0.14) !important;
}
.page-va .section-pad:not(.dark) .cmp-h3{color:var(--navy) !important}

/* dx-band overlay — navy gradient, ice eyebrow, gold hairline under h */
.page-va .dx-band::before{
  background:linear-gradient(180deg, rgba(3,16,62,0.15) 0%, rgba(3,16,62,0.85) 100%) !important;
}
.page-va .dx-band-eyebrow{color:rgba(230,236,245,0.82) !important}
.page-va .dx-band-eyebrow::before{background:var(--orange) !important}
.page-va .dx-band-h{position:relative;padding-bottom:14px;color:#ffffff !important}
.page-va .dx-band-h::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:48px;height:2px;
  background:var(--orange);
}

/* Cross-links + related rail in navy */
.page-va .hc-link{color:var(--navy) !important;border-color:rgba(11,43,141,0.30) !important}
.page-va .hc-link:hover{color:#0b2b8d !important;border-color:#0b2b8d !important;background:rgba(11,43,141,0.06) !important}
.page-va .rr-card{border-color:rgba(11,43,141,0.18)}
.page-va .rr-card:hover{border-color:rgba(11,43,141,0.45);background:rgba(11,43,141,0.04)}
.page-va .rr-tag{color:#0b2b8d}

/* Final CTA — navy surface, gold eye, ice body, navy primary button.
   These fire WITHOUT requiring .keep-orange. */
.page-va .final-cta::after{
  background:
    radial-gradient(ellipse at 0% 0%,rgba(58,116,255,0.18),transparent 50%),
    radial-gradient(ellipse at 100% 100%,rgba(11,43,141,0.5),transparent 50%) !important;
}
.page-va .final-cta .final-eye{color:var(--orange-soft) !important}
.page-va .final-cta .final-h2{color:#ffffff}
.page-va .final-cta .final-h2 .it{color:var(--orange-soft) !important;font-style:italic}
.page-va .final-cta .btn-primary{background:var(--orange);color:#ffffff;border-color:var(--orange)}
.page-va .final-cta .btn-primary:hover{background:var(--orange-soft);border-color:var(--orange-soft)}
.page-va .final-cta .btn-ghost{border-color:rgba(255,255,255,0.6);color:#ffffff}
.page-va .final-cta .btn-ghost:hover{border-color:#ffffff;background:rgba(255,255,255,0.06)}

/* Cinematic outro — navy veil, ice eyebrow, gold italic — without .keep-orange */
.page-va .video-bleed::before{
  background:
    linear-gradient(120deg, rgba(3,16,62,0.85) 0%, rgba(3,16,62,0.45) 40%, rgba(3,16,62,0.25) 100%),
    linear-gradient(180deg, transparent 50%, rgba(3,16,62,0.7) 100%) !important;
}
.page-va .video-bleed-eyebrow{color:rgba(230,236,245,0.82) !important}
.page-va .video-bleed-eyebrow::before{background:var(--orange) !important}
.page-va .video-bleed-title{color:#ffffff !important}
.page-va .video-bleed-title .it{color:var(--orange-soft) !important}

/* photo-grid captions on solid navy chips, not transparent */
.page-va .photo-grid .df-image{border:1px solid rgba(11,43,141,0.18)}
.page-va .df-image .df-image-cap{background:rgba(3,16,62,0.92);color:#ffffff;padding:6px 12px;border-radius:0}
.page-va .df-image .df-image-num{color:var(--orange-soft)}

/* .cmp-col.new on .page-va — LEFT column has a LIGHT tinted bg, so the
   default white text from the global .cmp-col.new rules must flip dark.
   Without this every left-column paragraph renders white-on-near-white. */
.page-va .section-pad:not(.dark) .cmp-col.new p{color:var(--ink) !important;opacity:0.85}
.page-va .section-pad:not(.dark) .cmp-col.new p strong{color:var(--ink) !important;opacity:1}
.page-va .section-pad:not(.dark) .cmp-col.new p em{color:var(--navy) !important;font-style:italic}
.page-va .section-pad:not(.dark) .cmp-col.new p .it{color:var(--navy) !important;font-style:italic}
.page-va .section-pad:not(.dark) .cmp-col.new .cmp-h3 .it{color:var(--navy) !important;font-style:italic}
.page-va .section-pad:not(.dark) .cmp-col.new .hc-link{color:var(--navy) !important;border-color:rgba(11,43,141,0.30) !important;background:transparent}
.page-va .section-pad:not(.dark) .cmp-col.new .hc-link:hover{color:#0b2b8d !important;border-color:#0b2b8d !important;background:rgba(11,43,141,0.06)}
.page-va .section-pad:not(.dark) .cmp-col.new .cmp-list li{color:var(--ink) !important;border-color:rgba(11,43,141,0.12) !important}
.page-va .section-pad:not(.dark) .cmp-col.new .cmp-list li strong{color:var(--ink) !important}
.page-va .section-pad:not(.dark) .cmp-col.new .cmp-list li::before{color:var(--orange) !important}
.page-va .section-pad:not(.dark) .cmp-col .cmp-list li::before{color:var(--orange) !important}

/* RIGHT column on .page-va already inherits the default white-bg compare
   styling — make sure links + list bullets pick up the navy accent. */
.page-va .section-pad:not(.dark) .cmp-col .hc-link{color:var(--navy) !important;border-color:rgba(11,43,141,0.30) !important}
.page-va .section-pad:not(.dark) .cmp-col .hc-link:hover{color:#0b2b8d !important;border-color:#0b2b8d !important;background:rgba(11,43,141,0.06)}
.page-va .section-pad:not(.dark) .cmp-col em,
.page-va .section-pad:not(.dark) .cmp-col p .it{color:var(--navy) !important;font-style:italic}

/* opi-cases grid — make sure body copy reads on the light section bg */
.page-va .opi-case-title{color:var(--navy-darker) !important}
.page-va .opi-case p{color:var(--ink) !important;opacity:0.85}
.page-va .opi-case p .it,
.page-va .opi-case p em{color:var(--navy) !important;font-style:italic}
.page-va .opi-case p strong{color:var(--navy-darker) !important}

/* workflow grid — ensure navy ink on the light section bg */
.page-va .workflow{background:rgba(11,43,141,0.10)}
.page-va .wf-step{background:#ffffff}
.page-va .wf-num{color:var(--navy)}
.page-va .wf-title{color:var(--navy-darker)}
.page-va .wf-body{color:var(--ink);opacity:0.82}

/* quote-pull — navy italic accent on .page-va */
.page-va .quote-pull blockquote{color:var(--navy-darker)}
.page-va .quote-pull blockquote .it{color:var(--orange)}
.page-va .quote-pull .qp-attr{color:rgba(11,43,141,0.65)}

/* ============================================================
   SIGN LANGUAGE (SLI) — blue-forward variant of the theme-blue
   palette. Mirrors .page-opi rules and tints aurora, ticker,
   spec rail, dx-band eyebrows, hc-link, and italic-accent.
   ============================================================ */
body.page-sli{background:#f5f8ff}
.page-sli .hero-text{display:flex;flex-direction:column;align-items:flex-start}
.page-sli .hero-text > *{margin:0}
.page-sli .hero-text > .eyebrow{margin-bottom:28px !important}
.page-sli .hero-text > h1.hero-h1{margin-bottom:10px !important}
.page-sli .hero-text > .hero-sub{margin-bottom:14px !important;max-width:780px}
.page-sli .hero-text > .hero-actions{margin-bottom:0 !important;margin-top:18px !important}
.page-sli .hero-text > .hc-spec-rail{width:100%;margin-top:32px !important}
.page-sli h1.hero-h1{font-size:clamp(40px,5.2vw,72px) !important;line-height:1.04 !important}
.page-sli h1.hero-h1 > span{white-space:nowrap}

/* Stronger blue wash on the hero veil so the bg video reads under a navy tint */
.page-sli .hero-bgvideo-veil{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(11,43,141,0.45), rgba(3,16,62,0.78) 60%, rgba(3,16,62,0.92) 100%),
    linear-gradient(180deg, rgba(3,16,62,0.55), rgba(3,16,62,0.85)) !important;
}

/* Aurora blobs lean fully blue (no orange leak) */
.page-sli .aurora .blob.b1{background:radial-gradient(closest-side,rgba(58,116,255,0.55),transparent 70%)}
.page-sli .aurora .blob.b2{background:radial-gradient(closest-side,rgba(11,43,141,0.55),transparent 70%)}

/* Spec rail — navy tint + brighter blue numerals */
.page-sli .hc-spec-rail{
  border-top:1px solid rgba(122,146,214,0.40);
  border-bottom:1px solid rgba(122,146,214,0.40);
  background:linear-gradient(180deg,rgba(11,43,141,0.32),rgba(3,16,62,0.10));
}
.page-sli .hc-spec-val{color:#cfe0ff}
.page-sli .hc-spec-lbl{color:rgba(207,224,255,0.78)}

/* Section accents on white sections — blue sh-num, blue cmp-h3 italic, blue editorial italic */
.page-sli .sh-num{color:var(--navy) !important}
.page-sli .sh-title{color:var(--navy) !important;opacity:0.85}
.page-sli .sh-edition{color:rgba(11,43,141,0.55) !important}
.page-sli .sh-line{background:rgba(11,43,141,0.18) !important}
.page-sli h2.editorial .it,
.page-sli .cmp-h3 .it,
.page-sli .quote-pull blockquote .it,
.page-sli .final-h2 .it,
.page-sli .rr-title .it{color:var(--navy) !important;font-style:italic}

/* Compare cards — left column gets a navy hairline + tinted bg */
.page-sli .section-pad:not(.dark) .cmp-col.new{
  background:linear-gradient(180deg,rgba(11,43,141,0.05),rgba(11,43,141,0.02)) !important;
  border:1px solid rgba(11,43,141,0.14) !important;
}
.page-sli .section-pad:not(.dark) .cmp-h3{color:var(--navy) !important}

/* dx-band eyebrows + h on the orange bands stay readable but trade their orange for navy */
.page-sli .dx-band.keep-orange .dx-band-eyebrow{color:var(--navy) !important}
.page-sli .dx-band.dx-band-video .dx-band-eyebrow{color:#cfe0ff !important}

/* Cross-links + related rail in navy on white */
.page-sli .hc-link{color:var(--navy) !important;border-color:rgba(11,43,141,0.30) !important}
.page-sli .hc-link:hover{color:#0b2b8d !important;border-color:#0b2b8d !important;background:rgba(11,43,141,0.06) !important}
.page-sli .rr-card{border-color:rgba(11,43,141,0.18)}
.page-sli .rr-card:hover{border-color:rgba(11,43,141,0.45);background:rgba(11,43,141,0.04)}
.page-sli .rr-tag{color:#0b2b8d}

/* Final CTA keep-orange band gets a navy italic accent + navy primary button */
.page-sli .final-cta.keep-orange .final-eye{color:var(--navy) !important}
.page-sli .final-cta.keep-orange .btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.page-sli .final-cta.keep-orange .btn-primary:hover{background:#0a2477;border-color:#0a2477}

/* Cinematic video-bleed — navy veil instead of warm */
.page-sli .video-bleed.keep-orange::before{
  background:linear-gradient(180deg, rgba(3,16,62,0.20) 0%, rgba(3,16,62,0.70) 100%) !important;
}
.page-sli .video-bleed-eyebrow{color:#cfe0ff !important}
.page-sli .video-bleed-title{color:#ffffff !important}
.page-sli .video-bleed-title .it{color:#7aa6ff !important}

/* hero spec rail — four chips */
.hc-spec-rail{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:40px;
  border-top:1px solid rgba(122,146,214,0.22);
  border-bottom:1px solid rgba(122,146,214,0.22);
  background:linear-gradient(180deg,rgba(11,43,141,0.18),rgba(3,16,62,0.05));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.hc-spec{
  position:relative;
  padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:8px;
}
.hc-spec + .hc-spec::before{
  content:"";
  position:absolute;left:0;top:18%;bottom:18%;
  width:1px;
  background:rgba(122,146,214,0.18);
}
.hc-spec-val{
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:clamp(26px,2.4vw,34px);
  letter-spacing:-0.035em;
  color:#ffffff;
  line-height:1;
  display:inline-flex;align-items:baseline;
}
.hc-spec-plus{color:var(--orange);font-family:'Instrument Serif',serif;font-style:italic;font-size:0.7em;margin-left:2px}
.hc-spec-unit{color:var(--navy-light);font-family:'Geist Mono',monospace;font-size:0.5em;margin-left:3px;letter-spacing:0;text-transform:lowercase}
.hc-spec-lbl{
  font-family:'Geist Mono',monospace;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(122,146,214,0.85);
}
@media (max-width:760px){
  .hc-spec-rail{grid-template-columns:repeat(2,1fr)}
  .hc-spec:nth-child(2)::before,
  .hc-spec:nth-child(4)::before{content:none}
  .hc-spec:nth-child(3),
  .hc-spec:nth-child(4){border-top:1px solid rgba(122,146,214,0.18)}
}

/* Legal spec rail — mirrors hc-spec-rail with a gold edge accent */
.lg-spec-rail{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:40px;
  border-top:1px solid rgba(122,146,214,0.22);
  border-bottom:1px solid rgba(122,146,214,0.22);
  background:linear-gradient(180deg,rgba(11,43,141,0.18),rgba(3,16,62,0.05));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  position:relative;
}
.lg-spec-rail::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--orange),rgba(247,140,75,0.2));
}
.lg-spec{position:relative;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.lg-spec + .lg-spec::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(122,146,214,0.18)}
.lg-spec-val{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(26px,2.4vw,34px);letter-spacing:-0.035em;color:#ffffff;line-height:1;display:inline-flex;align-items:baseline}
.lg-spec-plus{color:var(--orange);font-family:'Instrument Serif',serif;font-style:italic;font-size:0.7em;margin-left:2px}
.lg-spec-unit{color:var(--navy-light);font-family:'Geist Mono',monospace;font-size:0.5em;margin-left:3px;letter-spacing:0;text-transform:lowercase}
.lg-spec-lbl{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(122,146,214,0.85)}
@media (max-width:760px){
  .lg-spec-rail{grid-template-columns:repeat(2,1fr)}
  .lg-spec:nth-child(2)::before,
  .lg-spec:nth-child(4)::before{content:none}
  .lg-spec:nth-child(3),
  .lg-spec:nth-child(4){border-top:1px solid rgba(122,146,214,0.18)}
}

/* Retail spec rail — mirrors hc-spec-rail with a gold right-edge stripe accent */
.rt-spec-rail{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:40px;
  border-top:1px solid rgba(122,146,214,0.22);
  border-bottom:1px solid rgba(122,146,214,0.22);
  background:linear-gradient(180deg,rgba(11,43,141,0.18),rgba(3,16,62,0.05));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  position:relative;
}
.rt-spec-rail::after{
  content:"";
  position:absolute;right:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(247,140,75,0.2),var(--orange));
}
.rt-spec{position:relative;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.rt-spec + .rt-spec::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(122,146,214,0.18)}
.rt-spec-val{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(26px,2.4vw,34px);letter-spacing:-0.035em;color:#ffffff;line-height:1;display:inline-flex;align-items:baseline}
.rt-spec-plus{color:var(--orange);font-family:'Instrument Serif',serif;font-style:italic;font-size:0.7em;margin-left:2px}
.rt-spec-unit{color:var(--navy-light);font-family:'Geist Mono',monospace;font-size:0.5em;margin-left:3px;letter-spacing:0;text-transform:lowercase}
.rt-spec-lbl{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(122,146,214,0.85)}
@media (max-width:760px){
  .rt-spec-rail{grid-template-columns:repeat(2,1fr)}
  .rt-spec:nth-child(2)::before,
  .rt-spec:nth-child(4)::before{content:none}
  .rt-spec:nth-child(3),
  .rt-spec:nth-child(4){border-top:1px solid rgba(122,146,214,0.18)}
}

/* Education spec rail — mirrors hc-spec-rail with a navy-light bottom stripe accent */
.ed-spec-rail{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:40px;
  border-top:1px solid rgba(122,146,214,0.22);
  border-bottom:1px solid rgba(122,146,214,0.22);
  background:linear-gradient(180deg,rgba(11,43,141,0.18),rgba(3,16,62,0.05));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  position:relative;
}
.ed-spec-rail::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,rgba(122,146,214,0.6),var(--navy-light) 60%,rgba(247,140,75,0.35));
}
.ed-spec{position:relative;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.ed-spec + .ed-spec::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(122,146,214,0.18)}
.ed-spec-val{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(26px,2.4vw,34px);letter-spacing:-0.035em;color:#ffffff;line-height:1;display:inline-flex;align-items:baseline}
.ed-spec-plus{color:var(--orange);font-family:'Instrument Serif',serif;font-style:italic;font-size:0.7em;margin-left:2px}
.ed-spec-unit{color:var(--navy-light);font-family:'Geist Mono',monospace;font-size:0.5em;margin-left:3px;letter-spacing:0;text-transform:lowercase}
.ed-spec-lbl{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(122,146,214,0.85)}
@media (max-width:760px){
  .ed-spec-rail{grid-template-columns:repeat(2,1fr)}
  .ed-spec:nth-child(2)::before,
  .ed-spec:nth-child(4)::before{content:none}
  .ed-spec:nth-child(3),
  .ed-spec:nth-child(4){border-top:1px solid rgba(122,146,214,0.18)}
}

/* Financial Services spec rail — mirrors hc-spec-rail with a gold top stripe accent */
.fs-spec-rail{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:40px;
  border-top:1px solid rgba(122,146,214,0.22);
  border-bottom:1px solid rgba(122,146,214,0.22);
  background:linear-gradient(180deg,rgba(11,43,141,0.18),rgba(3,16,62,0.05));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  position:relative;
}
.fs-spec-rail::before{
  content:"";
  position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,var(--orange),rgba(247,140,75,0.3) 60%,rgba(122,146,214,0.35));
}
.fs-spec{position:relative;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.fs-spec + .fs-spec::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(122,146,214,0.18)}
.fs-spec-val{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(26px,2.4vw,34px);letter-spacing:-0.035em;color:#ffffff;line-height:1;display:inline-flex;align-items:baseline}
.fs-spec-plus{color:var(--orange);font-family:'Instrument Serif',serif;font-style:italic;font-size:0.7em;margin-left:2px}
.fs-spec-unit{color:var(--navy-light);font-family:'Geist Mono',monospace;font-size:0.5em;margin-left:3px;letter-spacing:0;text-transform:lowercase}
.fs-spec-lbl{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(122,146,214,0.85)}
@media (max-width:760px){
  .fs-spec-rail{grid-template-columns:repeat(2,1fr)}
  .fs-spec:nth-child(2)::before,
  .fs-spec:nth-child(4)::before{content:none}
  .fs-spec:nth-child(3),
  .fs-spec:nth-child(4){border-top:1px solid rgba(122,146,214,0.18)}
}

/* Government spec rail — mirrors hc-spec-rail with a navy-light edge accent */
.gv-spec-rail{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:40px;
  border-top:1px solid rgba(122,146,214,0.22);
  border-bottom:1px solid rgba(122,146,214,0.22);
  background:linear-gradient(180deg,rgba(11,43,141,0.18),rgba(3,16,62,0.05));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  position:relative;
}
.gv-spec-rail::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--navy-light),rgba(122,146,214,0.2));
}
.gv-spec{position:relative;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.gv-spec + .gv-spec::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(122,146,214,0.18)}
.gv-spec-val{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(26px,2.4vw,34px);letter-spacing:-0.035em;color:#ffffff;line-height:1;display:inline-flex;align-items:baseline}
.gv-spec-plus{color:var(--orange);font-family:'Instrument Serif',serif;font-style:italic;font-size:0.7em;margin-left:2px}
.gv-spec-unit{color:var(--navy-light);font-family:'Geist Mono',monospace;font-size:0.5em;margin-left:3px;letter-spacing:0;text-transform:lowercase}
.gv-spec-lbl{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(122,146,214,0.85)}
@media (max-width:760px){
  .gv-spec-rail{grid-template-columns:repeat(2,1fr)}
  .gv-spec:nth-child(2)::before,
  .gv-spec:nth-child(4)::before{content:none}
  .gv-spec:nth-child(3),
  .gv-spec:nth-child(4){border-top:1px solid rgba(122,146,214,0.18)}
}

/* Legal Section 02 — editorial run-list (simple, premium, unique to legal) */
.lg-section-lede{
  font-family:'Inter',sans-serif;
  font-size:17px;
  line-height:1.6;
  color:rgba(10,14,26,0.78);
  max-width:780px;
  margin:24px 0 0;
}
.lg-section-outro{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:20px;
  line-height:1.45;
  color:var(--navy-darker);
  max-width:780px;
  margin:36px 0 0;
  padding-left:22px;
  border-left:2px solid var(--orange);
}
.lg-runs{
  margin:44px 0 0;
  max-width:920px;
  list-style:none;
  padding:0;
  border-top:1px solid rgba(11,43,141,0.18);
}
.lg-runs li{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:32px;
  padding:26px 0;
  border-bottom:1px solid rgba(11,43,141,0.10);
}
.lg-runs li:last-child{border-bottom:1px solid rgba(11,43,141,0.18)}
.lg-runs-num{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--orange);
  padding-top:9px;
}
.lg-runs-body h4{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:25px;
  line-height:1.2;
  color:var(--navy-darker);
  margin:0 0 6px;
  letter-spacing:-0.005em;
}
.lg-runs-body p{
  font-family:'Inter',sans-serif;
  font-size:15.5px;
  line-height:1.6;
  color:rgba(10,14,26,0.72);
  margin:0;
  max-width:640px;
}
@media (max-width:640px){
  .lg-runs li{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .lg-runs-num{padding-top:0}
  .lg-runs-body h4{font-size:22px}
}

/* Legal Section 01 — failure-mode grid (editorial signal unique to legal) */
.lg-failmodes{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:48px 0 56px;
}
.lg-failmode{
  position:relative;
  padding:28px 22px 24px;
  background:#ffffff;
  border:1px solid rgba(11,43,141,0.12);
  border-top:2px solid var(--orange);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.lg-failmode:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px -28px rgba(11,43,141,0.45);
  border-color:rgba(11,43,141,0.22);
}
.lg-failmode-num{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.2em;
  color:rgba(11,43,141,0.55);
  text-transform:uppercase;
}
.lg-failmode-h{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-weight:400;
  font-size:22px;
  line-height:1.18;
  color:var(--navy-darker);
  margin:0;
}
.lg-failmode p{
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  line-height:1.55;
  color:rgba(10,14,26,0.78);
  margin:0;
}
.lg-failmode em{font-style:italic;color:var(--orange);font-weight:500;letter-spacing:0.01em}
@media (max-width:980px){
  .lg-failmodes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .lg-failmodes{grid-template-columns:1fr;margin:36px 0 40px}
}

/* Section-head numerals — deeper blue tint */
.theme-blue .section-head .sh-num{
  color:var(--navy);
}
.theme-blue .section-head .sh-title{
  color:var(--navy-deep);
}
.theme-blue .section-head .sh-edition{
  color:rgba(11,43,141,0.65);
}
.theme-blue .section-pad.dark .section-head .sh-num{color:var(--navy-light)}
.theme-blue .section-pad.dark .section-head .sh-title{color:#cfe0ff}
.theme-blue .section-pad.dark .section-head .sh-edition{color:rgba(207,224,255,0.8)}

/* Editorial headlines — ink color, no underline rule */
.theme-blue h2.editorial{
  color:var(--navy-darker);
}
.theme-blue h2.editorial::before{
  display:none;
  content:none;
}
.theme-blue h2.editorial .it{color:var(--navy)}

/* Compare cards — left rail accent + deeper paper feel */
.theme-blue .cmp-col{
  background:#fbfcff;
  border:1px solid rgba(11,43,141,0.10);
  position:relative;
}
.theme-blue .cmp-col.new{
  background:linear-gradient(180deg,#f4f7ff 0%,#ffffff 100%);
  border:1px solid rgba(11,43,141,0.14);
  box-shadow:0 18px 60px rgba(11,43,141,0.08);
}
.theme-blue .cmp-col p{
  color:#1a2440;
}
.theme-blue .cmp-col strong{
  color:var(--navy);
  font-weight:600;
}
.theme-blue .cmp-col .it{color:var(--navy)}
.theme-blue .section-pad.dark .cmp-col{
  background:rgba(11,43,141,0.18);
  border:1px solid rgba(122,146,214,0.18);
}
.theme-blue .section-pad.dark .cmp-col.new{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
}
.theme-blue .section-pad.dark .cmp-col p{color:rgba(255,255,255,0.88)}
.theme-blue .section-pad.dark .cmp-col strong{color:#cfe0ff}

/* hc-link — blue */
.theme-blue .hc-link{
  color:var(--navy);
  border-bottom:1px solid rgba(11,43,141,0.25);
}
.theme-blue .hc-link:hover{
  color:var(--navy-deep);
  border-bottom-color:var(--navy);
}

/* dx-band — deeper navy gradient overlay */
.theme-blue .dx-band::before{
  background:linear-gradient(90deg,rgba(3,16,62,0.78) 0%,rgba(11,43,141,0.45) 50%,rgba(3,16,62,0.25) 100%);
}
.theme-blue .dx-band .dx-band-eyebrow{color:var(--navy-light)}
.theme-blue .dx-band .dx-band-eyebrow::before{background:var(--navy-light)}
.theme-blue .dx-band-video::after{
  background:linear-gradient(180deg,rgba(3,16,62,0.35) 0%,rgba(11,43,141,0.55) 60%,rgba(3,16,62,0.78) 100%);
}

/* cmp-h3 — orange italic stays, but base gets navy tint */
.theme-blue .cmp-h3{color:var(--navy-darker)}
.theme-blue .cmp-h3 .it{
  color:var(--navy);
  font-family:'Instrument Serif',serif;
  font-style:italic;
}

/* List items — blue marker */
.theme-blue .cmp-list li{
  position:relative;
  padding-left:18px;
}
.theme-blue .cmp-list li::before{
  content:"";
  position:absolute;left:0;top:0.7em;
  width:8px;height:1px;
  background:var(--navy);
}

/* final-cta tint */
.theme-blue .final-cta{
  background:linear-gradient(180deg,#03103e 0%,#0b2b8d 100%);
}
.theme-blue .final-eye{color:var(--navy-light)}

/* ============================================================
   Navy theme alias — chat-support, technical-support, omnichannel
   Mirror page-sg's navy treatment so all four navy pages share
   the same hero veil, hero text colors, spec rail, section
   accents, and final CTA.
   ============================================================ */
body.page-ch, body.page-ts, body.page-om{background:#f5f8ff}
.page-ch .hero-text, .page-ts .hero-text, .page-om .hero-text{display:flex;flex-direction:column;align-items:flex-start}
.page-ch .hero-text > *, .page-ts .hero-text > *, .page-om .hero-text > *{margin:0}
.page-ch .hero-text > .eyebrow, .page-ts .hero-text > .eyebrow, .page-om .hero-text > .eyebrow{margin-bottom:28px !important;color:#ffffff !important}
.page-ch .hero-text > h1.hero-h1, .page-ts .hero-text > h1.hero-h1, .page-om .hero-text > h1.hero-h1{margin-bottom:10px !important;color:#ffffff !important;text-shadow:0 2px 18px rgba(3,16,62,0.55), 0 1px 2px rgba(0,0,0,0.4)}
.page-ch .hero-text > .hero-lede, .page-ts .hero-text > .hero-lede, .page-om .hero-text > .hero-lede{margin-bottom:18px !important;color:#ffffff !important}
.page-ch .hero-text > .hero-sub, .page-ts .hero-text > .hero-sub, .page-om .hero-text > .hero-sub{margin-bottom:14px !important;max-width:780px;color:rgba(255,255,255,0.94) !important}
.page-ch .hero-text > .hero-sub.hero-sub-muted, .page-ts .hero-text > .hero-sub.hero-sub-muted, .page-om .hero-text > .hero-sub.hero-sub-muted{margin-bottom:28px !important;color:rgba(255,255,255,0.74) !important}
.page-ch .hero-text > .hero-actions, .page-ts .hero-text > .hero-actions, .page-om .hero-text > .hero-actions{margin-bottom:0 !important;margin-top:8px !important}
.page-ch .hero-text > .hc-spec-rail, .page-ts .hero-text > .hc-spec-rail, .page-om .hero-text > .hc-spec-rail{width:100%;margin-top:32px !important}
.page-ch h1.hero-h1, .page-ts h1.hero-h1, .page-om h1.hero-h1{font-size:clamp(40px,5.2vw,72px) !important;line-height:1.04 !important}
.page-ch h1.hero-h1 > span, .page-ts h1.hero-h1 > span, .page-om h1.hero-h1 > span{white-space:nowrap}
.page-ch h1.hero-h1 .it, .page-ts h1.hero-h1 .it, .page-om h1.hero-h1 .it{color:#7aa6ff !important;font-family:'Instrument Serif',serif;font-style:italic}

.page-ch .hero-bgvideo-veil, .page-ts .hero-bgvideo-veil, .page-om .hero-bgvideo-veil{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(11,43,141,0.45), rgba(3,16,62,0.78) 60%, rgba(3,16,62,0.92) 100%),
    linear-gradient(180deg, rgba(3,16,62,0.55), rgba(3,16,62,0.85)) !important;
}

.page-ch .aurora .blob.b1, .page-ts .aurora .blob.b1, .page-om .aurora .blob.b1{background:radial-gradient(closest-side,rgba(58,116,255,0.55),transparent 70%)}
.page-ch .aurora .blob.b2, .page-ts .aurora .blob.b2, .page-om .aurora .blob.b2{background:radial-gradient(closest-side,rgba(11,43,141,0.55),transparent 70%)}

.page-ch .hc-spec-rail, .page-ts .hc-spec-rail, .page-om .hc-spec-rail{
  border-top:1px solid rgba(122,146,214,0.40);
  border-bottom:1px solid rgba(122,146,214,0.40);
  background:linear-gradient(180deg,rgba(11,43,141,0.32),rgba(3,16,62,0.10));
}
.page-ch .hc-spec-val, .page-ts .hc-spec-val, .page-om .hc-spec-val{color:#cfe0ff}
.page-ch .hc-spec-lbl, .page-ts .hc-spec-lbl, .page-om .hc-spec-lbl{color:rgba(207,224,255,0.78)}

.page-ch .sh-num, .page-ts .sh-num, .page-om .sh-num{color:var(--navy) !important}
.page-ch .sh-title, .page-ts .sh-title, .page-om .sh-title{color:var(--navy) !important;opacity:0.85}
.page-ch .sh-edition, .page-ts .sh-edition, .page-om .sh-edition{color:rgba(11,43,141,0.55) !important}
.page-ch .sh-line, .page-ts .sh-line, .page-om .sh-line{background:rgba(11,43,141,0.18) !important}
.page-ch h2.editorial .it, .page-ch .cmp-h3 .it, .page-ch .final-h2 .it, .page-ch .rr-title .it,
.page-ts h2.editorial .it, .page-ts .cmp-h3 .it, .page-ts .final-h2 .it, .page-ts .rr-title .it,
.page-om h2.editorial .it, .page-om .cmp-h3 .it, .page-om .final-h2 .it, .page-om .rr-title .it{color:var(--navy) !important;font-style:italic}

.page-ch .section-pad:not(.dark) .cmp-col.new,
.page-ts .section-pad:not(.dark) .cmp-col.new,
.page-om .section-pad:not(.dark) .cmp-col.new{
  background:linear-gradient(180deg,rgba(11,43,141,0.05),rgba(11,43,141,0.02)) !important;
  border:1px solid rgba(11,43,141,0.14) !important;
}
.page-ch .section-pad:not(.dark) .cmp-h3, .page-ts .section-pad:not(.dark) .cmp-h3, .page-om .section-pad:not(.dark) .cmp-h3{color:var(--navy) !important}

.page-ch .dx-band.keep-orange .dx-band-eyebrow, .page-ts .dx-band.keep-orange .dx-band-eyebrow, .page-om .dx-band.keep-orange .dx-band-eyebrow{color:var(--navy) !important}
.page-ch .dx-band.dx-band-video .dx-band-eyebrow, .page-ts .dx-band.dx-band-video .dx-band-eyebrow, .page-om .dx-band.dx-band-video .dx-band-eyebrow{color:#cfe0ff !important}

.page-ch .hc-link, .page-ts .hc-link, .page-om .hc-link{color:var(--navy) !important;border-color:rgba(11,43,141,0.30) !important}
.page-ch .hc-link:hover, .page-ts .hc-link:hover, .page-om .hc-link:hover{color:#0b2b8d !important;border-color:#0b2b8d !important;background:rgba(11,43,141,0.06) !important}
.page-ch .rr-card, .page-ts .rr-card, .page-om .rr-card{border-color:rgba(11,43,141,0.18)}
.page-ch .rr-card:hover, .page-ts .rr-card:hover, .page-om .rr-card:hover{border-color:rgba(11,43,141,0.45);background:rgba(11,43,141,0.04)}
.page-ch .rr-tag, .page-ts .rr-tag, .page-om .rr-tag{color:#0b2b8d}

.page-ch .final-cta.keep-orange .final-eye, .page-ts .final-cta.keep-orange .final-eye, .page-om .final-cta.keep-orange .final-eye{color:var(--navy) !important}
.page-ch .final-cta.keep-orange .btn-primary, .page-ts .final-cta.keep-orange .btn-primary, .page-om .final-cta.keep-orange .btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.page-ch .final-cta.keep-orange .btn-primary:hover, .page-ts .final-cta.keep-orange .btn-primary:hover, .page-om .final-cta.keep-orange .btn-primary:hover{background:#0a2477;border-color:#0a2477}

.page-ch .video-bleed.keep-orange::before, .page-ts .video-bleed.keep-orange::before, .page-om .video-bleed.keep-orange::before{
  background:linear-gradient(180deg, rgba(3,16,62,0.20) 0%, rgba(3,16,62,0.70) 100%) !important;
}
.page-ch .video-bleed-eyebrow, .page-ts .video-bleed-eyebrow, .page-om .video-bleed-eyebrow{color:#cfe0ff !important}
.page-ch .video-bleed-title, .page-ts .video-bleed-title, .page-om .video-bleed-title{color:#ffffff !important}
.page-ch .video-bleed-title .it, .page-ts .video-bleed-title .it, .page-om .video-bleed-title .it{color:#7aa6ff !important}

/* ============================================================
   SOCIAL MEDIA SUPPORT (page-sms) — share the navy alias used by
   chat-support / technical-support / omnichannel. Same hero veil,
   spec rail, section accents, dx-band, final CTA, video bleed,
   related rail.
   ============================================================ */
body.page-sms{background:#f5f8ff}
.page-sms .hero-text{display:flex;flex-direction:column;align-items:flex-start}
.page-sms .hero-text > *{margin:0}
.page-sms .hero-text > .eyebrow{margin-bottom:28px !important;color:#ffffff !important}
.page-sms .hero-text > h1.hero-h1{margin-bottom:10px !important;color:#ffffff !important;text-shadow:0 2px 18px rgba(3,16,62,0.55), 0 1px 2px rgba(0,0,0,0.4)}
.page-sms .hero-text > .hero-lede{margin-bottom:18px !important;color:#ffffff !important}
.page-sms .hero-text > .hero-sub{margin-bottom:14px !important;max-width:780px;color:rgba(255,255,255,0.94) !important}
.page-sms .hero-text > .hero-sub.hero-sub-muted{margin-bottom:28px !important;color:rgba(255,255,255,0.74) !important}
.page-sms .hero-text > .hero-actions{margin-bottom:0 !important;margin-top:8px !important}
.page-sms .hero-text > .hc-spec-rail{width:100%;margin-top:32px !important}
.page-sms h1.hero-h1{font-size:clamp(40px,5.2vw,72px) !important;line-height:1.04 !important}
.page-sms h1.hero-h1 > span{white-space:nowrap}
.page-sms h1.hero-h1 .it{color:#7aa6ff !important;font-family:'Instrument Serif',serif;font-style:italic}

.page-sms .hero-bgvideo-veil{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(11,43,141,0.45), rgba(3,16,62,0.78) 60%, rgba(3,16,62,0.92) 100%),
    linear-gradient(180deg, rgba(3,16,62,0.55), rgba(3,16,62,0.85)) !important;
}
.page-sms .aurora .blob.b1{background:radial-gradient(closest-side,rgba(58,116,255,0.55),transparent 70%)}
.page-sms .aurora .blob.b2{background:radial-gradient(closest-side,rgba(11,43,141,0.55),transparent 70%)}

.page-sms .hc-spec-rail{
  border-top:1px solid rgba(122,146,214,0.40);
  border-bottom:1px solid rgba(122,146,214,0.40);
  background:linear-gradient(180deg,rgba(11,43,141,0.32),rgba(3,16,62,0.10));
}
.page-sms .hc-spec-val{color:#cfe0ff}
.page-sms .hc-spec-lbl{color:rgba(207,224,255,0.78)}

.page-sms .sh-num{color:var(--navy) !important}
.page-sms .sh-title{color:var(--navy) !important;opacity:0.85}
.page-sms .sh-edition{color:rgba(11,43,141,0.55) !important}
.page-sms .sh-line{background:rgba(11,43,141,0.18) !important}
.page-sms h2.editorial .it, .page-sms .cmp-h3 .it, .page-sms .final-h2 .it, .page-sms .rr-title .it{color:var(--navy) !important;font-style:italic}

.page-sms .section-pad:not(.dark) .cmp-col.new{
  background:linear-gradient(180deg,rgba(11,43,141,0.05),rgba(11,43,141,0.02)) !important;
  border:1px solid rgba(11,43,141,0.14) !important;
}
.page-sms .section-pad:not(.dark) .cmp-h3{color:var(--navy) !important}

.page-sms .dx-band .dx-band-eyebrow{color:#cfe0ff !important}
.page-sms .dx-band.dx-band-video .dx-band-eyebrow{color:#cfe0ff !important}

.page-sms .hc-link{color:var(--navy) !important;border-color:rgba(11,43,141,0.30) !important}
.page-sms .hc-link:hover{color:#0b2b8d !important;border-color:#0b2b8d !important;background:rgba(11,43,141,0.06) !important}
.page-sms .rr-card{border-color:rgba(11,43,141,0.18)}
.page-sms .rr-card:hover{border-color:rgba(11,43,141,0.45);background:rgba(11,43,141,0.04)}
.page-sms .rr-tag{color:#0b2b8d}

.page-sms .final-cta .final-eye{color:var(--navy-light) !important}
.page-sms .final-cta .btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.page-sms .final-cta .btn-primary:hover{background:#0a2477;border-color:#0a2477}

.page-sms .video-bleed::before{
  background:linear-gradient(180deg, rgba(3,16,62,0.20) 0%, rgba(3,16,62,0.70) 100%) !important;
}
.page-sms .video-bleed-eyebrow{color:#cfe0ff !important}
.page-sms .video-bleed-title{color:#ffffff !important}
.page-sms .video-bleed-title .it{color:#7aa6ff !important}

/* Photo grid caption chips on solid navy */
.page-sms .photo-grid .df-image{border:1px solid rgba(11,43,141,0.18)}
.page-sms .photo-grid .df-image-num,
.page-sms .photo-grid .df-image-cap{background:var(--navy);color:#ffffff}
.page-sms .photo-grid .df-image-num{color:#ffd28a}

/* Section 07 — refined principle list (still inside .compare layout) */
.page-sms .sms-pr-lede{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.2;
  color:var(--navy-darker);
  margin:0 0 20px;
  letter-spacing:-0.01em;
}
.page-sms .sms-pr-lede::before{
  content:"";
  display:block;
  width:48px;height:2px;
  background:#ffd28a;
  margin-bottom:18px;
}

.page-sms .sms-principles{
  list-style:none;
  padding:0;margin:0 0 32px;
  display:flex;flex-direction:column;
  counter-reset:sms-pr;
}
.page-sms .sms-principles > li{
  position:relative;
  padding:24px 0 24px 64px;
  border-bottom:1px solid rgba(11,43,141,0.12);
}
.page-sms .sms-principles > li:first-child{padding-top:0}
.page-sms .sms-principles > li:last-child{border-bottom:0;padding-bottom:0}
.page-sms .sms-principles > li::before{content:none !important}
.page-sms .sms-pr-num{
  position:absolute;
  left:0;top:24px;
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:30px;line-height:1;
  color:#ffd28a;
  letter-spacing:-0.02em;
}
.page-sms .sms-principles > li:first-child .sms-pr-num{top:0}
.page-sms .sms-pr-h{
  font-family:'Instrument Serif',serif;
  font-size:clamp(19px,1.65vw,23px);
  line-height:1.22;
  color:var(--navy-darker);
  margin:0 0 10px;
  letter-spacing:-0.01em;
  font-weight:400;
}
.page-sms .sms-principles > li > p{
  font-family:'Inter',sans-serif;
  font-size:14.5px;line-height:1.65;
  color:#3a4566;
  margin:0;
}

@media (max-width:560px){
  .page-sms .sms-principles > li{
    padding-left:0;
    padding-top:20px;padding-bottom:20px;
  }
  .page-sms .sms-pr-num{
    position:static;display:block;
    font-size:24px;margin-bottom:6px;
  }
  .page-sms .sms-principles > li:first-child .sms-pr-num{margin-top:0}
}

.page-sms .sms-pr-kicker{
  margin-top:24px;
  padding:24px 0 0;
  border-top:1px solid rgba(11,43,141,0.12);
}
.page-sms .sms-pr-kicker > p:first-child{
  font-family:'Inter',sans-serif;
  font-size:14.5px;line-height:1.65;
  color:#3a4566;
  margin:0;
}
.page-sms .sms-pr-stamp{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:22px !important;
  color:var(--navy) !important;
  margin:14px 0 0 !important;
  letter-spacing:-0.01em;
  line-height:1.2;
}

/* ---- SMS hero layout — portrait side video, balanced text column ---- */
.page-sms .hero-body{
  grid-template-columns:minmax(0,1.25fr) minmax(380px,460px) !important;
  gap:72px !important;
  align-items:center;
}
@media (max-width:1440px){
  .page-sms .hero-body{
    grid-template-columns:minmax(0,1.2fr) minmax(360px,430px) !important;
    gap:56px !important;
  }
}
@media (max-width:1280px){
  .page-sms .hero-body{
    grid-template-columns:minmax(0,1.15fr) minmax(340px,400px) !important;
    gap:44px !important;
  }
}
@media (max-width:1100px){
  .page-sms .hero-body{grid-template-columns:1fr !important;gap:40px !important}
}
.page-sms .hero-text{min-width:0}
.page-sms .hero-text > h1.hero-h1{font-size:clamp(36px,4.6vw,64px) !important;line-height:1.06 !important}
.page-sms .hero-text > h1.hero-h1 > span{white-space:normal !important}
.page-sms .hero-text > .hero-sub{max-width:620px}
.page-sms .hero-text > .hero-sub.hero-sub-muted{max-width:620px}

.page-sms .sm-hero-side{
  min-height:0 !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:100%;
}
.page-sms .sm-hero-video{
  position:relative;
  width:100%;
  max-width:460px;
  aspect-ratio:9/16;
  margin:0 auto;
  border:1px solid rgba(122,146,214,0.45);
  box-shadow:
    0 30px 80px rgba(3,16,62,0.55),
    0 0 0 1px rgba(255,210,138,0.08) inset;
  border-radius:6px;
  overflow:hidden;
  background:#03103e;
}
@media (max-width:1440px){.page-sms .sm-hero-video{max-width:430px}}
@media (max-width:1280px){.page-sms .sm-hero-video{max-width:400px}}
@media (max-width:1100px){.page-sms .sm-hero-video{max-width:380px}}
.page-sms .sm-hero-video video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:none;
}
.page-sms .sm-hero-video::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(3,16,62,0) 55%, rgba(3,16,62,0.65) 100%);
  pointer-events:none;
}
.page-sms .sm-hero-video .df-image-num{
  position:absolute;top:14px;left:14px;
  background:var(--navy);
  color:#ffd28a;
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  padding:6px 10px;
  z-index:2;
}
.page-sms .sm-hero-video .df-image-cap{
  position:absolute;left:14px;right:14px;bottom:14px;
  background:rgba(3,16,62,0.92);
  color:#ffffff;
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  padding:8px 12px;
  z-index:2;
}

.page-sms .sm-hero-meta{
  width:100%;max-width:460px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(122,146,214,0.25);
  border:1px solid rgba(122,146,214,0.25);
}
@media (max-width:1440px){.page-sms .sm-hero-meta{max-width:430px}}
@media (max-width:1280px){.page-sms .sm-hero-meta{max-width:400px}}
@media (max-width:1100px){.page-sms .sm-hero-meta{max-width:380px}}
.page-sms .sm-hero-meta .globe-meta-cell{
  background:rgba(3,16,62,0.55);
  padding:14px 16px;
}
.page-sms .sm-hero-meta .lbl{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(207,224,255,0.65);
  margin-bottom:6px;
}
.page-sms .sm-hero-meta .val{
  font-family:'Inter',sans-serif;
  font-size:13px;color:#ffffff;font-weight:500;
}
.page-sms .sm-hero-meta .live-dot{display:inline-flex;align-items:center;gap:8px}
.page-sms .sm-hero-meta .live-dot::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#7aa6ff;box-shadow:0 0 8px rgba(122,166,255,0.8);
}

/* hero spec-rail polish — tighter columns, gold numerals */
.page-sms .hero-text > .hc-spec-rail{max-width:620px}
.page-sms .hc-spec-rail{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;padding:0;
  background:rgba(122,146,214,0.25);
  border:1px solid rgba(122,146,214,0.25);
}
.page-sms .hc-spec{
  background:rgba(3,16,62,0.55);
  padding:16px 14px;
  display:flex;flex-direction:column;gap:6px;
  min-width:0;
}
.page-sms .hc-spec-val{
  font-family:'Instrument Serif',serif;
  font-size:26px;line-height:1;color:#ffd28a;letter-spacing:0;
  white-space:nowrap;
}
.page-sms .hc-spec-lbl{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(207,224,255,0.82);
  line-height:1.3;
}
/* Break to 2x2 early so 4-col labels never crowd on common desktops */
@media (max-width:1440px){
  .page-sms .hc-spec-rail{grid-template-columns:repeat(2,1fr)}
}

/* Data Training - premium navy treatment.
   body.theme-data-training mirrors body.theme-healthcare token overrides
   so var(--orange) recolors to navy on this page. The .dt-spec-* rail is
   the industry-unique signal in the hero (PART 3 rule #4). */
body.theme-data-training{
  --orange:#0b2b8d;
  --orange-soft:#1a3fb8;
  --navy-light:#7a92d6;
}
.dt-spec-rail{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:40px;
  border-top:1px solid rgba(122,146,214,0.22);
  border-bottom:1px solid rgba(122,146,214,0.22);
  background:linear-gradient(180deg,rgba(11,43,141,0.18),rgba(3,16,62,0.05));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.dt-spec{
  position:relative;
  padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:8px;
  border-right:1px solid rgba(122,146,214,0.12);
}
.dt-spec:last-child{border-right:0}
.dt-spec-val{
  font-family:'Inter',sans-serif;font-weight:400;
  font-size:clamp(26px,2.4vw,34px);
  letter-spacing:-0.035em;
  color:#fff;line-height:1;
  display:inline-flex;align-items:baseline;
}
.dt-spec-lbl{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(122,146,214,0.85);
}
.dt-spec-plus,.dt-spec-unit{
  font-family:'Geist Mono',monospace;
  font-size:0.55em;margin-left:2px;opacity:0.85;
  color:var(--gold,#f89100);
}
@media (max-width:900px){
  .dt-spec-rail{grid-template-columns:repeat(2,1fr)}
  .dt-spec:nth-child(2){border-right:0}
  .dt-spec:nth-child(1),.dt-spec:nth-child(2){border-bottom:1px solid rgba(122,146,214,0.12)}
}

/* Proof strip on data-training: force solid black + bright white text so
   the editorial copy reads on the darkest frame. The default .section-pad.dark
   rules rely on opacity and a navy background; on theme-data-training the
   navy --orange token can read low-contrast against the navy bg, so we
   pin the whole block to true black + white here. */
body.theme-data-training .section-pad.dark{
  background:#000 !important;
}
body.theme-data-training .section-pad.dark .editorial,
body.theme-data-training .section-pad.dark .cmp-h3,
body.theme-data-training .section-pad.dark .cmp-col p,
body.theme-data-training .section-pad.dark .cmp-col li,
body.theme-data-training .section-pad.dark .cmp-col strong{
  color:#ffffff !important;opacity:1 !important;
}
body.theme-data-training .section-pad.dark .cmp-h3 .it,
body.theme-data-training .section-pad.dark .editorial .it{
  color:#f89100 !important;
}
body.theme-data-training .section-pad.dark .cmp-col{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
}
body.theme-data-training .section-pad.dark .sh-num{color:#f89100 !important}
body.theme-data-training .section-pad.dark .sh-title{color:rgba(255,255,255,0.92) !important}
body.theme-data-training .section-pad.dark .sh-edition{color:rgba(255,255,255,0.7) !important}