/* =====================================================================
   IRON HORNET — SITEWIDE POLISH LAYER
   Pushes the entire site toward a darker, more cinematic premium look.
   Deep charcoal + crimson + high-contrast white + heavier typography.
   Loaded AFTER each page's inline <style>, so token overrides win.
   ===================================================================== */

/* -- 1. Tokens: true charcoal, no teal tint, stronger crimson ---------- */
:root,
html[data-theme="dark"]{
  --bg:        #07080A;
  --bg-2:      #0E1013;
  --bg-3:      #15181C;
  --ink:       #FFFFFF;
  --ink-soft:  #BFC2C7;
  --ink-dim:   #74787E;
  --line:      #23262B;
  --line-soft: #181B1F;

  --accent:    oklch(0.55 0.23 22);
  --accent-2:  oklch(0.42 0.20 264);
  --glow:      oklch(0.55 0.23 22 / 0.55);
  --glow-2:    oklch(0.42 0.20 264 / 0.45);

  --nav-bg:    rgba(8, 9, 11, 0.72);
  --panel-bg:  rgba(14, 16, 19, 0.94);
  --drop-hover:rgba(255,255,255,0.05);
  --on-accent: #FFFFFF;

  --raise-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 30px 60px -28px rgba(0,0,0,0.85),
    0 4px 14px -4px rgba(0,0,0,0.55);
  --inlay-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    inset 1px 0 0 rgba(255,255,255,0.02),
    inset -1px 0 0 rgba(0,0,0,0.3);
}

/* Re-derive light-mode tokens too (more contrast, deeper crimson) */
html[data-theme="light"]{
  --bg:        #FFFFFF;
  --bg-2:      #F5F6F8;
  --bg-3:      #EDEFF2;
  --ink:       #0A0B0D;
  --ink-soft:  #3A3D43;
  --ink-dim:   #6A6E75;
  --line:      #D9DCE0;
  --line-soft: #E8EAEE;
  --accent:    #EF233C;
  --accent-2: #1E40AF;
  --glow:      rgba(239, 35, 60,0.28);
  --glow-2:    rgba(30,64,175,0.28);
}

/* -- 2. Body / ambient ------------------------------------------------- */
body{
  background: var(--bg);
  color: var(--ink);
  letter-spacing: -0.006em;
}
/* Neutral ambient glow (no teal) */
html:not([data-theme="light"]) body::before{
  background:
    radial-gradient(1100px 560px at 82% -8%, oklch(0.55 0.23 22 / 0.10), transparent 60%),
    radial-gradient(820px 460px at 12% 118%, rgba(255,255,255,0.025), transparent 60%) !important;
}
html:not([data-theme="light"]) body::after{ opacity: 0.045 !important }

/* Premium scrollbar */
html{ scrollbar-color: #2A2D32 #07080A; scrollbar-width: thin }
::-webkit-scrollbar{ width: 10px; height: 10px }
::-webkit-scrollbar-track{ background: #07080A }
::-webkit-scrollbar-thumb{ background: #23262B; border-radius: 6px; border: 2px solid #07080A }
::-webkit-scrollbar-thumb:hover{ background: #34373D }

/* -- 3. Typography: heavier, tighter, more cinematic ------------------- */
h1, h2, h3, h4{
  font-family: var(--ff-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1{ font-weight: 600 }
h2{
  font-weight: 600;
  font-size: clamp(44px, 6.2vw, 96px);
  letter-spacing: -0.038em;
  line-height: 0.96;
}
h3{
  font-weight: 600;
  letter-spacing: -0.022em;
}

/* Hero supersized */
.hero h1{
  font-size: clamp(60px, 9.6vw, 168px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.9 !important;
}
.hero h1 em{
  font-style: normal;
  background: linear-gradient(180deg, oklch(0.65 0.24 22) 0%, oklch(0.50 0.22 22) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero h1 em::after{
  height: 3px !important;
  bottom: 6px !important;
  background: linear-gradient(90deg, oklch(0.65 0.24 22), oklch(0.50 0.22 22)) !important;
  box-shadow: 0 0 24px var(--glow), 0 0 60px var(--glow) !important;
}
.hero-sub{
  font-size: clamp(16px, 1.25vw, 20px) !important;
  color: var(--ink-soft) !important;
  font-weight: 400;
  max-width: 600px !important;
  text-wrap: pretty;
}

/* Hero background — deeper, more vignette */
.hero-bg{
  background:
    radial-gradient(ellipse at 50% 38%, #0F1115 0%, #08090B 60%, #050507 100%) !important;
}
.hero-bg::after{
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(5,5,7,0.55) 65%, var(--bg) 100%),
    linear-gradient(180deg, rgba(5,5,7,0.4) 0%, transparent 22%, transparent 60%, var(--bg) 100%) !important;
}

/* Hero stat tiles */
.hero-stat{
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 24px !important;
}
.hero-stat .num{ font-weight: 600 !important; color: #FFFFFF !important }
.hero-stat .num .unit{ color: var(--accent) !important }
.hero-stat .lbl{ color: var(--ink-dim) !important; letter-spacing: 0.12em !important }

/* -- 4. Eyebrow + section heads --------------------------------------- */
.eyebrow{ color: var(--ink-dim); letter-spacing: 0.14em }
.eyebrow::before{
  width: 22px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
}
.section-head{ margin-bottom: 96px }
.section-head .num{
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.16em;
}
.section-head p.lead{
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* -- 5. Buttons: stronger CTAs ---------------------------------------- */
.btn{
  font-weight: 600 !important;
  font-size: 15px;
  padding: 16px 24px;
  letter-spacing: -0.005em;
}
.btn-primary{
  background: linear-gradient(180deg, oklch(0.60 0.24 22), oklch(0.50 0.22 20)) !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,255,255,0.06),
    0 18px 44px -14px var(--glow),
    0 6px 16px -6px rgba(0,0,0,0.6) !important;
}
.btn-primary:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,255,255,0.10),
    0 28px 60px -14px var(--glow),
    0 10px 24px -8px rgba(0,0,0,0.7) !important;
}
.btn-ghost{
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.btn-ghost:hover{
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--accent) !important;
  color: #FFFFFF !important;
}
.btn .arrow{
  background: rgba(0,0,0,0.35) !important;
  width: 24px; height: 24px;
}
.nav .cta{
  /* ---- Canonical CTA geometry — homepage spec, single source of truth ----
     These width-determining properties were previously set per-page and
     diverged (Group B: flex/gap6/13px/8-16 padding; articles: 12px svg),
     which shifted header width calculations. Locked here so every page
     renders an identical CTA. (Background/color/shadow keep the approved
     polish gradient, which is what the homepage actually renders.) */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: transform .2s, box-shadow .3s !important;
  background: linear-gradient(180deg, oklch(0.60 0.24 22), oklch(0.50 0.22 20)) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 12px 30px -10px var(--glow) !important;
}
/* Canonical CTA icon size — exactly 14×14 on every page (was 12px on Group B + articles) */
.nav .cta svg{
  width: 14px !important;
  height: 14px !important;
}
/* Outlined CTA — used for the secondary nav action so two strong buttons can sit side by side */
.nav .cta.cta-outline{
  background: rgba(255,255,255,0.02) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 10px 24px -16px rgba(0,0,0,0.6) !important;
}
.nav .cta.cta-outline:hover{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.4) !important;
  transform: translateY(-1px);
}
html[data-theme="light"] .nav .cta.cta-outline{
  background: rgba(15,23,42,0.03) !important;
  color: #0F172A !important;
  border: 1px solid rgba(15,23,42,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 8px 20px -12px rgba(15,23,42,0.18) !important;
}
html[data-theme="light"] .nav .cta.cta-outline:hover{
  background: rgba(15,23,42,0.06) !important;
  border-color: rgba(15,23,42,0.32) !important;
}
/* Nudge spacing between the paired CTAs so they read as a pair, not a stack */
.nav .cta + .cta{ margin-left: 6px }
@media (max-width: 1100px){
  /* Compact the secondary CTA on tablet so both stay on one row alongside the burger */
  .nav .cta.cta-outline{ padding: 9px 13px !important; font-size: 13px !important }
  .nav .cta.cta-outline svg{ display: none }
  /* Also tighten the primary CTA's icon margin since space is at a premium */
  .nav .cta:not(.cta-outline){ padding: 10px 14px !important }
}
@media (max-width: 760px){
  /* Outline collapses below ~760px — the mobile sheet exposes both CTAs */
  .nav .cta.cta-outline{ display: none !important }
}
@media (max-width: 520px){
  /* On very small phones, hide the primary CTA too; the burger sheet has both */
  .nav .cta:not(.cta-outline){ display: none !important }
}

/* -- 6. Nav: tighter, darker --------------------------------------- */
.nav{
  background: rgba(10, 11, 14, 0.72) !important;
  border: 1px solid var(--line) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 20px 50px -20px rgba(0,0,0,0.7) !important;
}
.nav ul a{ font-weight: 500; color: var(--ink-soft) }
.nav ul a:hover{ background: rgba(255,255,255,0.05); color: #FFFFFF }

/* -- 7. Cards / pillars / quotes --------------------------------------- */
.pillar,
.feature-card,
.quote,
.team-card,
.story-step,
.pc-card,
.cta-inner{
  background: linear-gradient(180deg, #131619, #0D0F12) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px;
}
.pillar:hover,
.team-card:hover,
.quote:hover{
  border-color: oklch(0.40 0.18 22) !important;
  box-shadow:
    var(--raise-shadow),
    0 0 80px -28px var(--glow) !important;
}
.pillar .kicker,
.story-step .step-n{
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.14em;
}
.pillar .tag{
  color: var(--accent);
  background: rgba(255, 50, 70, 0.10);
  border: 1px solid rgba(255, 50, 70, 0.30);
  font-weight: 500;
}
.pillar h3{ color: #FFFFFF }
.pillar p, .feature-card p, .quote blockquote{ color: var(--ink-soft) }
.quote blockquote{ font-weight: 500 }
.quote .mark{ color: var(--accent) }

/* Story step active state — crimson glow */
.story-step.is-active{
  border-color: oklch(0.45 0.20 22) !important;
  box-shadow:
    var(--raise-shadow),
    0 0 80px -20px var(--glow) !important;
}

/* -- 8. Metrics row + verticals --------------------------------------- */
.metric .num{ font-weight: 600; color: #FFFFFF }
.metric .num .unit{ color: var(--accent) }
.metric .lbl{ color: var(--ink-soft) }
.metric-grid{ border-color: var(--line) !important }
.metric{ border-color: var(--line) !important }

.vert{ background: transparent }
.vert:hover{ background: rgba(255,255,255,0.025) !important }
.vert-grid{ border-color: var(--line) !important }
.vert{ border-color: var(--line) !important }
.vert-name{ color: #FFFFFF; font-weight: 600 }
.vert-desc{ color: var(--ink-soft) }
.vert-ic{
  background: rgba(255, 50, 70, 0.08) !important;
  border-color: rgba(255, 50, 70, 0.28) !important;
  color: var(--accent) !important;
}

/* -- 9. CTA closer — bigger, more cinematic --------------------------- */
.cta-close{ padding: 140px 0 160px }
.cta-inner{
  background:
    radial-gradient(700px 320px at 50% 0%, oklch(0.55 0.23 22 / 0.20), transparent 70%),
    linear-gradient(180deg, #14171B, #0B0D10) !important;
  padding: 100px 48px !important;
  border-radius: 28px;
}
.cta-inner h2{
  font-size: clamp(48px, 6.4vw, 104px) !important;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.96;
}
.cta-inner h2 em{
  font-style: normal;
  background: linear-gradient(180deg, oklch(0.65 0.24 22), oklch(0.50 0.22 22));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.cta-inner p{
  color: var(--ink-soft);
  font-size: 18px;
}

/* -- 10. Partner CTA card --------------------------------------------- */
.pc-card{
  background:
    radial-gradient(800px 360px at 0% 100%, oklch(0.55 0.23 22 / 0.18), transparent 70%),
    linear-gradient(180deg, #14171B, #0B0D10) !important;
  border-radius: 28px;
}
.pc-eyebrow{
  color: var(--accent);
  background: rgba(255, 50, 70, 0.10);
  border-color: rgba(255, 50, 70, 0.30);
  font-weight: 500;
}
.pc-lead h2{ font-weight: 600 }

/* -- 11. Comparison table -------------------------------------------- */
.cmp-row{ border-color: var(--line) !important }
.cmp-ih::before{ color: var(--accent) }
.cmp-ih{ color: #FFFFFF }
.cmp-tr{ color: var(--ink-dim) }

/* -- 12. Footer ------------------------------------------------------- */
footer{
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
}
.foot-grid .col h5{ color: var(--ink-dim); letter-spacing: 0.14em }
.foot-grid .col a{ color: var(--ink-soft) }
.foot-grid .col a:hover{ color: var(--accent) }
.foot-brand p{ color: var(--ink-dim) }
.foot-bot{ border-color: var(--line); color: var(--ink-dim) }

/* -- 13. Logos marquee fade --------------------------------------- */
.marquee-item{ color: var(--ink-dim); opacity: 0.7 }
.marquee-item i{ background: var(--accent); border-radius: 50% }

/* -- 14. Section padding (more breathing room) ----------------------- */
section.band{ padding: 160px 0 }
@media (max-width: 900px){
  section.band{ padding: 100px 0 }
  .section-head{ margin-bottom: 56px }
  .cta-inner{ padding: 64px 28px !important }
  .cta-close{ padding: 80px 0 100px }
}

/* -- 15. Scroll cue --------------------------------------- */
.scroll-cue{ color: var(--ink-dim) }
.scroll-cue .bar{ background: var(--line) }
.scroll-cue .bar::before{
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
}

/* =====================================================================
   ARTICLE PAGES — convert light theme to dark and tighten typography
   ===================================================================== */
body.ih-article,
html.ih-article body{
  background: #07080A;
  color: #FFFFFF;
}
.ih-article :root,
html.ih-article,
.ih-article{
  --bg:#07080A;
  --bg-2:#0E1013;
  --bg-3:#15181C;
  --ink:#FFFFFF;
  --ink-soft:#BFC2C7;
  --ink-dim:#74787E;
  --line:#23262B;
  --line-soft:#181B1F;
  --accent:#FF2E4D;
  --accent-2:#1E40AF;
  --glow:rgba(255,46,77,0.45);
  --glow-2:rgba(30,64,175,0.40);
}
.ih-article body{
  background: #07080A;
  color: #FFFFFF;
}
/* Article-specific known hardcoded light values */
.ih-article .nav{
  background: rgba(10, 11, 14, 0.72) !important;
  border-color: #23262B !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 20px 50px -20px rgba(0,0,0,0.7) !important;
}
.ih-article .nav ul a{ color: #BFC2C7 !important }
.ih-article .nav ul a:hover{
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.05) !important;
}
.ih-article .nav .cta,
.ih-article .cta{
  background: linear-gradient(180deg, #FF2E4D, #C40A3C) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 12px 30px -10px rgba(255,46,77,0.45) !important;
}
.ih-article .nav .logo img,
.ih-article footer img{
  filter: none !important;
}
.ih-article .breadcrumbs,
.ih-article .breadcrumbs a{ color: #74787E !important }
.ih-article .breadcrumbs .cur,
.ih-article .breadcrumbs a:hover{ color: #FF2E4D !important }
.ih-article .art-meta{ color: #74787E !important }
.ih-article .art-meta .tag{
  border-color: rgba(255,46,77,0.5) !important;
  background: rgba(255,46,77,0.10) !important;
  color: #FF2E4D !important;
}
.ih-article .art-mast{ border-bottom: 1px solid #23262B !important }
.ih-article .art-mast h1{
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: clamp(52px, 8.6vw, 140px) !important;
  letter-spacing: -0.045em !important;
  line-height: 0.92 !important;
}
.ih-article .art-mast h1 em{
  font-style: normal !important;
  background: linear-gradient(180deg, #FF2E4D, #C40A3C) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.ih-article .art-mast .deck{ color: #BFC2C7 !important }
.ih-article .byline{
  border-color: #23262B !important;
  color: #74787E !important;
}
.ih-article .byline .who{ color: #FFFFFF !important }
.ih-article .byline .flag{ color: #FF2E4D !important }
.ih-article .byline .dot{ background: #74787E !important }
/* Site card / generic surfaces */
.ih-article .site-card,
.ih-article .pull-card,
.ih-article .quote,
.ih-article .feature-card,
.ih-article .card,
.ih-article aside,
.ih-article figure,
.ih-article .panel,
.ih-article .stat-card,
.ih-article .stat,
.ih-article .num-card,
.ih-article .timeline-item,
.ih-article .related-card,
.ih-article .gallery-item{
  background: linear-gradient(180deg, #131619, #0D0F12) !important;
  border-color: #23262B !important;
  color: #FFFFFF !important;
}
.ih-article h1,
.ih-article h2,
.ih-article h3,
.ih-article h4{
  color: #FFFFFF !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
}
.ih-article h2{
  font-size: clamp(36px, 4.8vw, 64px) !important;
  line-height: 0.98 !important;
}
.ih-article p, .ih-article li{ color: #BFC2C7 }
.ih-article p strong, .ih-article li strong{ color: #FFFFFF }
.ih-article a{ color: #FF2E4D }
.ih-article a:hover{ color: #FF5066 }
.ih-article hr{ border-color: #23262B }
.ih-article footer{
  border-top: 1px solid #23262B !important;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
}
.ih-article footer p,
.ih-article footer span,
.ih-article footer a{ color: #74787E !important }
.ih-article footer a:hover{ color: #FF2E4D !important }
.ih-article body::before,
.ih-article body::after{ display: none }
/* Catch any remaining white backgrounds */
.ih-article [style*="background: #FFFFFF"],
.ih-article [style*="background:#FFFFFF"],
.ih-article [style*="background: #fff"],
.ih-article [style*="background:#fff"],
.ih-article [style*="background-color: #FFFFFF"],
.ih-article [style*="background-color:#FFFFFF"]{
  background: #0E1013 !important;
}

/* =====================================================================
   MOBILE polish
   ===================================================================== */
@media (max-width: 700px){
  .hero{ padding: 120px 0 64px !important; min-height: auto }
  .hero h1{ font-size: clamp(44px, 12vw, 80px) !important }
  .hero-bottom{ grid-template-columns: 1fr !important; gap: 12px !important }
  .hero-stat{ padding: 18px !important }
  .scroll-cue{ display: none }
  .feature-row{ grid-template-columns: 1fr !important; gap: 16px }
  .feature-card{ min-height: 380px !important; padding: 24px !important }
  .quote-grid{ grid-template-columns: 1fr !important }
  .quote{ padding: 24px !important }
  .pillar{ padding: 28px !important }
  .pc-card{ padding: 36px 24px !important }
  .pc-lead h2{ font-size: clamp(32px, 7vw, 48px) !important }
  .cta-inner h2{ font-size: clamp(36px, 8vw, 56px) !important }
  .nav .logo img{ height: 26px !important }
}

/* Reduced motion — keep it polished but calm */
@media (prefers-reduced-motion: reduce){
  .marquee-track,
  .wave-bands,
  .wave-high,
  .flag-svg{ animation: none !important }
}

/* =====================================================================
   LIGHT MODE — re-light the surfaces the polish layer darkened
   These rules sit at the end so they win against the dark defaults.
   ===================================================================== */
html[data-theme="light"]{
  --bg:        #FFFFFF;
  --bg-2:      #F5F6F8;
  --bg-3:      #ECEEF1;
  --ink:       #0A0B0D;
  --ink-soft:  #3A3D43;
  --ink-dim:   #6A6E75;
  --line:      #D9DCE0;
  --line-soft: #E8EAEE;
  --accent:    #EF233C;
  --accent-2: #1E40AF;
  --glow:      rgba(239, 35, 60, 0.28);
  --glow-2:    rgba(30, 64, 175, 0.28);
  --on-accent: #FFFFFF;
  --nav-bg:    rgba(255,255,255,0.78);
  --panel-bg:  rgba(255,255,255,0.96);
  --drop-hover:#F1F2F5;
  --raise-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 -1px 0 rgba(15,23,42,0.05) inset,
    0 24px 50px -22px rgba(15,23,42,0.18),
    0 4px 12px -4px rgba(15,23,42,0.08);
  --inlay-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(15,23,42,0.04),
    inset 1px 0 0 rgba(255,255,255,0.5),
    inset -1px 0 0 rgba(15,23,42,0.03);
}

/* Ambient field for light mode */
html[data-theme="light"] body::before{
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(239, 35, 60,0.06), transparent 60%),
    radial-gradient(820px 460px at 12% 118%, rgba(15,23,42,0.04), transparent 60%) !important;
}
html[data-theme="light"] body::after{ opacity: 0.025 !important; mix-blend-mode: multiply !important }

/* Scrollbar */
html[data-theme="light"]{ scrollbar-color: #C9CCD2 #FFFFFF }
html[data-theme="light"] ::-webkit-scrollbar-track{ background: #FFFFFF }
html[data-theme="light"] ::-webkit-scrollbar-thumb{
  background: #C9CCD2; border: 2px solid #FFFFFF;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background: #A6AAB1 }

/* Hero — light gradient sky */
html[data-theme="light"] .hero-bg{
  background:
    radial-gradient(ellipse at 50% 38%, #FFFFFF 0%, #F2F4F7 60%, #E6E9EE 100%) !important;
}
html[data-theme="light"] .hero-bg::after{
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(255,255,255,0.4) 65%, var(--bg) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 22%, transparent 60%, var(--bg) 100%) !important;
}

/* Hero typography — keep weight + scale, switch color to ink */
html[data-theme="light"] .hero h1,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4{
  color: var(--ink);
}
html[data-theme="light"] .hero h1 em,
html[data-theme="light"] .cta-inner h2 em{
  background: linear-gradient(180deg, #EF233C 0%, #C5102A 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] .hero h1 em::after{
  background: linear-gradient(90deg, #EF233C, #C5102A) !important;
  box-shadow: 0 0 18px rgba(239, 35, 60,0.45), 0 0 40px rgba(239, 35, 60,0.25) !important;
}
html[data-theme="light"] .hero-sub{ color: var(--ink-soft) !important }

/* Hero stat tiles — light surface */
html[data-theme="light"] .hero-stat{
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,246,248,0.85)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--inlay-shadow);
}
html[data-theme="light"] .hero-stat .num{ color: var(--ink) !important }
html[data-theme="light"] .hero-stat .num .unit{ color: var(--accent) !important }
html[data-theme="light"] .hero-stat .lbl{ color: var(--ink-dim) !important }

/* Eyebrow strip — fix dark band behind it */
html[data-theme="light"] .eyebrow{ color: var(--ink-dim) }
html[data-theme="light"] .eyebrow::before{
  background: var(--accent);
  box-shadow: 0 0 10px rgba(239, 35, 60,0.4);
}

/* Section heads */
html[data-theme="light"] .section-head .num{ color: var(--accent) }
html[data-theme="light"] .section-head p.lead{ color: var(--ink-soft) }

/* Nav — light glass */
html[data-theme="light"] .nav{
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid var(--line) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 16px 40px -18px rgba(15,23,42,0.18) !important;
}
html[data-theme="light"] .nav ul a{ color: var(--ink-soft) }
html[data-theme="light"] .nav ul a:hover{
  color: var(--ink);
  background: rgba(15,23,42,0.05);
}
html[data-theme="light"] .nav .logo img{ filter: invert(1) !important }

/* CTA buttons — solid crimson #9F1239 with inset highlight for premium depth (no "lighter" gradient) */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .nav .cta{
  background: #EF233C !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 0 0 1px rgba(239, 35, 60,0.2),
    0 14px 36px -12px rgba(239, 35, 60,0.45),
    0 6px 14px -6px rgba(15,23,42,0.18) !important;
}
html[data-theme="light"] .btn-primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 0 0 1px rgba(239, 35, 60,0.3),
    0 22px 50px -12px rgba(239, 35, 60,0.5),
    0 10px 22px -8px rgba(15,23,42,0.22) !important;
}
html[data-theme="light"] .btn-ghost{
  background: #FFFFFF !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--inlay-shadow) !important;
}
html[data-theme="light"] .btn-ghost:hover{
  background: #FAFBFC !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
html[data-theme="light"] .btn .arrow{ background: rgba(0,0,0,0.18) !important }

/* Cards / surfaces — light */
html[data-theme="light"] .pillar,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .quote,
html[data-theme="light"] .team-card,
html[data-theme="light"] .story-step{
  background: linear-gradient(180deg, #FFFFFF, #F7F8FA) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--inlay-shadow);
}
html[data-theme="light"] .pillar:hover,
html[data-theme="light"] .team-card:hover,
html[data-theme="light"] .quote:hover{
  border-color: rgba(239, 35, 60,0.45) !important;
  box-shadow: var(--raise-shadow), 0 0 60px -28px rgba(239, 35, 60,0.35) !important;
}
html[data-theme="light"] .pillar:not(.flag-pillar) h3,
html[data-theme="light"] .vert-name,
html[data-theme="light"] .cmp-ih,
html[data-theme="light"] .quote blockquote,
html[data-theme="light"] .metric .num,
html[data-theme="light"] .hero-stat .num,
html[data-theme="light"] .team-name{
  color: var(--ink) !important;
}

/* Flag pillar — text sits on the American flag with a dark overlay,
   so keep it white in BOTH themes. Beats the inline color: #fff which
   our generic h1-h4 light-mode rule was overriding. */
html[data-theme="light"] .flag-pillar .kicker,
html[data-theme="light"] .flag-pillar h3,
html[data-theme="light"] .flag-pillar h3 em,
html[data-theme="light"] .flag-pillar p{
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
html[data-theme="light"] .pillar p,
html[data-theme="light"] .feature-card p,
html[data-theme="light"] .vert-desc{ color: var(--ink-soft) }

/* Story-step active glow */
html[data-theme="light"] .story-step.is-active{
  border-color: rgba(239, 35, 60,0.5) !important;
  box-shadow: var(--raise-shadow), 0 0 60px -20px rgba(239, 35, 60,0.3) !important;
}

/* Partner CTA + closing CTA — light tinted */
html[data-theme="light"] .pc-card{
  background:
    radial-gradient(700px 320px at 0% 100%, rgba(239, 35, 60,0.08), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F2F4F7) !important;
  border: 1px solid var(--line) !important;
}
html[data-theme="light"] .pc-eyebrow{
  color: var(--accent);
  background: rgba(239, 35, 60,0.08);
  border: 1px solid rgba(239, 35, 60,0.28);
}
html[data-theme="light"] .pc-lead h2{ color: var(--ink) }
html[data-theme="light"] .pc-lead p{ color: var(--ink-soft) }
html[data-theme="light"] .pc-meta{ border-top-color: var(--line) }
html[data-theme="light"] .pc-meta-row .v{ color: var(--ink) }
html[data-theme="light"] .pc-meta-row .k{ color: var(--ink-dim) }

html[data-theme="light"] .cta-inner{
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(239, 35, 60,0.10), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F2F4F7) !important;
  border: 1px solid var(--line) !important;
}
html[data-theme="light"] .cta-inner h2{ color: var(--ink) }
html[data-theme="light"] .cta-inner p{ color: var(--ink-soft) }

/* Vertical industries grid */
html[data-theme="light"] .vert{ background: transparent }
html[data-theme="light"] .vert:hover{ background: rgba(15,23,42,0.025) !important }
html[data-theme="light"] .vert-ic{
  background: rgba(239, 35, 60,0.08) !important;
  border-color: rgba(239, 35, 60,0.25) !important;
  color: var(--accent) !important;
}

/* Comparison table */
html[data-theme="light"] .cmp-tr{ color: var(--ink-dim) }
html[data-theme="light"] .cmp-ih::before{ color: var(--accent) }

/* Metrics */
html[data-theme="light"] .metric .num .unit{ color: var(--accent) }
html[data-theme="light"] .metric .lbl{ color: var(--ink-soft) }

/* Footer */
html[data-theme="light"] footer{
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(15,23,42,0.03));
}
html[data-theme="light"] .foot-grid .col a{ color: var(--ink-soft) }
html[data-theme="light"] .foot-grid .col a:hover{ color: var(--accent) }
html[data-theme="light"] .foot-brand p,
html[data-theme="light"] .foot-bot{ color: var(--ink-dim) }
html[data-theme="light"] .brand-full img,
html[data-theme="light"] footer img{ filter: invert(1) !important }

/* Watermarks — invert + lower opacity in light */
html[data-theme="light"] .brand-watermark{ opacity: 0.05 !important; mix-blend-mode: multiply !important }
html[data-theme="light"] .brand-watermark img{ filter: invert(1) !important }

/* Scroll cue */
html[data-theme="light"] .scroll-cue{ color: var(--ink-dim) }
html[data-theme="light"] .scroll-cue .bar{ background: var(--line) }

/* Story flywheel / inlay surfaces in light */
html[data-theme="light"] .inlay,
html[data-theme="light"] .cloud-inlay,
html[data-theme="light"] .story-visual,
html[data-theme="light"] .story-visual-inner{
  background: linear-gradient(180deg, #FFFFFF, #F7F8FA) !important;
  border-color: var(--line) !important;
}

/* Marquee items */
html[data-theme="light"] .marquee-item{ color: var(--ink-dim) }

/* ===== Articles in light mode — opt them OUT of dark by default? ====
   The .ih-article class force-darkens articles. If the user toggles light,
   re-light the article surfaces too. */
html[data-theme="light"].ih-article,
html[data-theme="light"].ih-article body{
  background: #FFFFFF !important;
  color: #0A0B0D !important;
}
html[data-theme="light"].ih-article{
  --bg:#FFFFFF; --bg-2:#F5F6F8; --bg-3:#ECEEF1;
  --ink:#0A0B0D; --ink-soft:#3A3D43; --ink-dim:#6A6E75;
  --line:#D9DCE0; --line-soft:#E8EAEE;
  --accent:#EF233C; --accent-2: #1E40AF;
  --glow: rgba(239, 35, 60,0.28);
  --glow-2: rgba(30,64,175,0.28);
}
html[data-theme="light"].ih-article .nav{
  background: rgba(255,255,255,0.78) !important;
  border-color: var(--line) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 16px 40px -18px rgba(15,23,42,0.18) !important;
}
html[data-theme="light"].ih-article .nav ul a{ color: #3A3D43 !important }
html[data-theme="light"].ih-article .nav ul a:hover{ color: #0A0B0D !important; background: rgba(15,23,42,0.05) !important }
html[data-theme="light"].ih-article .nav .logo img,
html[data-theme="light"].ih-article footer img{ filter: invert(1) !important }
html[data-theme="light"].ih-article .art-mast h1,
html[data-theme="light"].ih-article h1,
html[data-theme="light"].ih-article h2,
html[data-theme="light"].ih-article h3,
html[data-theme="light"].ih-article h4{ color: #0A0B0D !important }
html[data-theme="light"].ih-article p,
html[data-theme="light"].ih-article li{ color: #3A3D43 }
html[data-theme="light"].ih-article p strong,
html[data-theme="light"].ih-article li strong{ color: #0A0B0D }
html[data-theme="light"].ih-article .site-card,
html[data-theme="light"].ih-article .pull-card,
html[data-theme="light"].ih-article .quote,
html[data-theme="light"].ih-article .feature-card,
html[data-theme="light"].ih-article .card,
html[data-theme="light"].ih-article aside,
html[data-theme="light"].ih-article figure,
html[data-theme="light"].ih-article .panel,
html[data-theme="light"].ih-article .stat-card,
html[data-theme="light"].ih-article .stat,
html[data-theme="light"].ih-article .num-card,
html[data-theme="light"].ih-article .timeline-item,
html[data-theme="light"].ih-article .related-card,
html[data-theme="light"].ih-article .gallery-item{
  background: linear-gradient(180deg, #FFFFFF, #F7F8FA) !important;
  border-color: var(--line) !important;
  color: #0A0B0D !important;
}
html[data-theme="light"].ih-article footer{
  border-top: 1px solid var(--line) !important;
  background: linear-gradient(180deg, transparent, rgba(15,23,42,0.03)) !important;
}
html[data-theme="light"].ih-article footer p,
html[data-theme="light"].ih-article footer span,
html[data-theme="light"].ih-article footer a{ color: #6A6E75 !important }

/* Article body copy in light mode — was inheriting dark-mode soft gray */
html[data-theme="light"].ih-article p,
html[data-theme="light"].ih-article li,
html[data-theme="light"].ih-article .art-mast .deck,
html[data-theme="light"].ih-article .deck,
html[data-theme="light"].ih-article .byline,
html[data-theme="light"].ih-article .breadcrumbs,
html[data-theme="light"].ih-article .breadcrumbs a,
html[data-theme="light"].ih-article .art-meta{
  color: #3A3D43 !important;
}
html[data-theme="light"].ih-article .breadcrumbs .cur,
html[data-theme="light"].ih-article .breadcrumbs a:hover{ color: #EF233C !important }
html[data-theme="light"].ih-article .byline .who{ color: #0A0B0D !important }
html[data-theme="light"].ih-article .byline .flag{ color: #EF233C !important }
html[data-theme="light"].ih-article .byline .dot{ background: #6A6E75 !important }
html[data-theme="light"].ih-article .art-meta .tag{
  border-color: rgba(239, 35, 60,0.5) !important;
  background: rgba(239, 35, 60,0.08) !important;
  color: #EF233C !important;
}
html[data-theme="light"].ih-article p strong,
html[data-theme="light"].ih-article li strong{ color: #0A0B0D !important }
html[data-theme="light"].ih-article a{ color: #EF233C }
html[data-theme="light"].ih-article a:hover{ color: #C5102A }

/* =====================================================================
   STANDARDIZED HEADER LOGO — single shared implementation, site-wide.
   Overrides every per-page `.nav .logo img` height (previously 20 / 24 /
   34px) so the Iron Hornet wordmark renders at one identical size on all
   pages. Apply the reusable `.site-logo` class to any new logo markup.
   ===================================================================== */
.nav .logo img,
.site-logo{
  height: 30px !important;
  width: auto !important;
  display: block !important;
}
@media (max-width: 640px){
  .nav .logo img,
  .site-logo{ height: 22px !important; }
}

/* =====================================================================
   STANDARDIZED PRIMARY NAVIGATION — single source of truth, site-wide.
   Consolidates three divergent per-page nav styles into ONE identical
   appearance on every page:
     • Group A (index, iron-cloud, site-assessment, privacy, terms): 14px, 2px gap, pill hover
     • Group B (systems, company, team, newsroom, hardware): 13.5px, 22px gap, color-only hover
     • Group C (article pages): 13.5px, 4px gap, pill hover
   The pill style (already endorsed by this file) is the canonical spec.
   Visual design is preserved — only inconsistencies are corrected. Text,
   order, structure, destinations, and dropdown/mobile behavior untouched.
   `.nav-link` is the reusable class alias for any new nav markup.
   ===================================================================== */

/* Container — identical width, padding, centering & alignment on every
   page (CSS-enforced on first paint, no longer dependent on JS), so the
   logo always starts at the same X and the CTA always ends at the same X.
   The homepage geometry is the reference. */
.nav{
  width: min(1320px, calc(100% - 32px)) !important;
  left: 50% !important;
  justify-content: space-between !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  padding: 10px 14px 10px 22px !important;
  align-items: center !important;
}
/* Tighter — but still identical — edge spacing on small screens */
@media (max-width: 640px){
  .nav{ padding: 8px 10px 8px 16px !important; }
}
/* Link row — identical horizontal spacing between items */
.nav ul{
  gap: 2px !important;
  align-items: center !important;
}
/* Links — one typography + shape spec on every page */
.nav ul a,
.nav-link{
  font-family: var(--ff-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  display: block !important;
  transition: color .2s, background .2s !important;
}
/* Hover + active — identical pill treatment (dark default;
   light-theme color/bg handled by the themed rules above) */
.nav ul a:hover,
.nav ul a.current,
.nav-link:hover{
  color: var(--ink);
  background: rgba(255,255,255,0.05);
}