/* ==========================================================================
   SIGMA v2: design foundation (bold redesign, revertible)
   Loaded AFTER the classic stylesheets, and every rule is scoped to html.sb-v2.
   Remove the class (or the files) and the classic site returns untouched.

   Direction: light, high-contrast editorial. One theme for the whole page (cool paper),
   brand navy for type, one accent (SIGMA orange). Blue appears only inside data visuals.
   Orange as TEXT uses --v2-accent-text (contrast-safe); --v2-accent is for fills.
   Radius system: controls 10px, cards 18px, media 22px, pills only for tags.
   ========================================================================== */

html.sb-v2 {
  --v2-ink: #F4F6F9;          /* page: cool paper */
  --v2-ink-2: #EBEFF5;        /* raised band */
  --v2-surface: #FFFFFF;      /* card */
  --v2-surface-2: #F1F4F8;    /* card hover / inputs */
  --v2-line: rgba(7, 28, 51, .10);
  --v2-line-strong: rgba(7, 28, 51, .18);
  --v2-text: #071C33;         /* brand navy: 16:1 on paper */
  --v2-text-2: #3B4A5F;       /* 8.6:1 */
  --v2-text-3: #5A687C;       /* 5.4:1, small meta only */
  --v2-accent: #FF8A00;       /* fills, rules, glows */
  --v2-accent-text: #C25700;  /* orange as text: 4.6:1 on paper */
  --v2-accent-ink: #071C33;   /* text on orange: 7.6:1 */
  --v2-accent-soft: rgba(255, 138, 0, .10);
  --v2-data: #0B73D9;         /* data visuals only */
  --v2-navy: #071C33;         /* dark islands (dashboard, CTA band) */
  --v2-r-ctl: 10px;
  --v2-r-card: 18px;
  --v2-r-media: 22px;
  --v2-ease: cubic-bezier(.16, 1, .3, 1);
  --v2-shadow: 0 1px 2px rgba(7, 28, 51, .05), 0 24px 48px -28px rgba(7, 28, 51, .28);
  --v2-wrap: 1344px;         /* content width; containers add the gutter on each side (1440 at desktop) */

  /* ---- type roles (impeccable typeset): one scale for the whole v2 layer ----
     fluid between 375px and ~1600px, then held; ultra-wide gets a single step up (see @media 1920px).
     display max 4.5rem (72px), tracking never tighter than -0.04em. */
  --v2-fs-display: clamp(2.5rem, 1.55rem + 3.1vw, 4.5rem);     /* page h1: 40 -> 72px */
  --v2-fs-h2: clamp(2rem, 1.3rem + 2.2vw, 3.375rem);           /* section titles: 32 -> 54px */
  --v2-fs-h3: clamp(1.25rem, 1.05rem + .6vw, 1.625rem);        /* card / step titles: 20 -> 26px */
  --v2-fs-h3-lead: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem);    /* lead story / lead card titles: 24 -> 36px */
  --v2-fs-figure: clamp(2.5rem, 1.6rem + 2.9vw, 4.25rem);      /* outcome figures and step numerals: 40 -> 68px */
  --v2-fs-lede: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);     /* intro paragraphs: 17 -> 19px */
  --v2-fs-body: 1.0625rem;                                     /* 17px */
  --v2-fs-small: .9375rem;                                     /* 15px secondary text */
  --v2-fs-label: .8125rem;                                     /* 13px mono labels */
  --v2-track-display: -.04em;
  --v2-track-h2: -.035em;
  --v2-track-h3: -.02em;
  --v2-pad: clamp(88px, 11vw, 168px);   /* section rhythm */

  /* only the page background token is remapped; --sb-white etc. are also used as text colours, so components are overridden explicitly */
  --sb-bg: var(--v2-ink);
  color-scheme: light;
  background: var(--v2-ink);
}

html.sb-v2 body {
  background: var(--v2-ink);
  color: var(--v2-text-2);
  font-size: var(--v2-fs-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

/* film grain: fixed, non-interactive, never on a scrolling layer */
html.sb-v2 body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- dark islands ----------
   Classic sections built on navy (photo heroes, CTA bands, the sidebar CTA card) keep their navy in v2.
   They get the dark token set so v2 rules (headings, links, orange text) stay readable inside them. */
html.sb-v2 :is(.sbid-hero, .sbid-cta, .sbab-hero, .sbct2-hero, .sbsd-cta, .sbia-cta) {
  --v2-text: #F2F6FA; --v2-text-2: #D3DDE8; --v2-text-3: #A9B8CA;
  --v2-line: rgba(160, 190, 225, .16); --v2-line-strong: rgba(160, 190, 225, .3);
  --v2-accent-text: #FF9F33; --v2-surface: rgba(255, 255, 255, .06);
  color-scheme: dark;
}

/* ---------- one grid for every section ----------
   Header, hero, sections, CTA band and footer share the same content edges at every width
   (they previously started at 48, 60 and 108px). body raises specificity above the section files. */
html.sb-v2 body :is(.sbh-wrap, .sbhero-inner, .sbwb-inner, .sbdx-inner, .sbpr-inner, .sbcs-inner, .sbin-inner, .sbis-inner, .sbct-inner, .sbft-inner,
  .sbsd-wrap, .sbtl-wrap, .sblg-wrap, .sbab-wrap, .sbcx-wrap, .sbct2-wrap, .sbil-wrap) {
  box-sizing: border-box;
  max-width: calc(var(--v2-wrap) + 2 * var(--sb-gutter));
  margin-inline: auto;
  padding-inline: var(--sb-gutter);
}

/* ---------- ultra-wide: a wider grid and one type step up, then hold ---------- */
@media (min-width: 1920px) {
  html.sb-v2 {
    --v2-wrap: 1600px;
    --v2-fs-display: 5rem;
    --v2-fs-h2: 3.75rem;
    --v2-fs-h3: 1.75rem;
    --v2-fs-h3-lead: 2.5rem;
    --v2-fs-figure: 4.75rem;
    --v2-fs-lede: 1.25rem;
    --v2-fs-body: 1.125rem;
  }
}
@media (min-width: 2400px) {
  html.sb-v2 { --v2-wrap: 1760px; }
}
@media (max-width: 1023px) { html.sb-v2 { --sb-gutter: 32px; } }
@media (max-width: 767px) { html.sb-v2 { --sb-gutter: 20px; --v2-fs-body: 1rem; } }

/* ---------- typography ---------- */
html.sb-v2 :where(h1, h2, h3, h4) { color: var(--v2-text); text-wrap: balance; }
html.sb-v2 p { text-wrap: pretty; }
html.sb-v2 ::selection { background: var(--v2-accent); color: var(--v2-accent-ink); }
html.sb-v2 :focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 3px; }

/* section headline scale shared by every v2 section */
html.sb-v2 .v2-h2,
html.sb-v2 :is(.sbwb-title, .sbdx-title, .sbpr-title, .sbcs-title, .sbin-title, .sbis-title, .sb-h2) {
  font-family: var(--sb-font-heading);
  font-stretch: 112%;
  font-weight: 800;
  font-size: var(--v2-fs-h2);
  line-height: 1.02;
  letter-spacing: var(--v2-track-h2);
  color: var(--v2-text);
}
html.sb-v2 :is(.sbwb-title, .sbdx-title, .sbpr-title, .sbcs-title, .sbin-title, .sbis-title, .sb-h2) :is(strong, em, span) { color: var(--v2-accent-text); font-style: normal; }

/* inner page hero titles share the display role */
html.sb-v2 :is(.sbsd-hero__title, .sbid-hero__title, .sbab-hero__title, .sbct2-hero__title, .sbcx-hero__title, .sbil-hero__title, .sbtl-title, .sblg-title) {
  font-size: var(--v2-fs-display); line-height: 1.02; letter-spacing: var(--v2-track-display); text-wrap: balance;
}

/* eyebrows: rationed. The hero keeps one; section eyebrows are hidden in v2. */
html.sb-v2 :is(.sbwb-eyebrow, .sbdx-eyebrow, .sbpr-eyebrow, .sbcs-eyebrow, .sbin-eyebrow, .sbis-eyebrow, .sb-eyebrow) { display: none; }

/* ---------- buttons (shared look for every primary/secondary CTA) ---------- */
html.sb-v2 :is(.sbhero-btn--primary, .sbh-cta, .sb-btn--primary, .sb-btn-primary) {
  background: var(--v2-accent);
  color: var(--v2-accent-ink);
  border-radius: var(--v2-r-ctl);
  box-shadow: 0 12px 28px -14px rgba(232, 118, 0, .75);
  transition: transform .35s var(--v2-ease), box-shadow .35s var(--v2-ease), background-color .2s;
}
html.sb-v2 :is(.sbhero-btn--primary, .sbh-cta, .sb-btn--primary, .sb-btn-primary):hover { background: #FF9A24; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(232, 118, 0, .85); }
html.sb-v2 :is(.sbhero-btn, .sbh-cta, .sb-btn):active { transform: translateY(1px) scale(.98); }


/* ---------- motion: reveal on scroll (classes added by js/v2.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* hidden until Motion (js/v2.js) animates it in; .is-in is the settled state */
  html.sb-v2.v2-motion .v2-rv { opacity: 0; }
  html.sb-v2.v2-motion .v2-rv.is-in { opacity: 1; }
}

/* no flash before the entrance: an inline head script adds html.v2-pre (motion allowed, JS on) before first paint,
   js/v2.js removes it once Motion has taken over. If scripts never run, the failsafe reveals everything after 2.5s. */
html.sb-v2.v2-pre :is(.sbhero, .sbsd-hero, .sbid-hero, .sbtl-hero, .sbil-hero, .sbct2-hero, .sbcx-hero, .sbab-hero, .sblg-hero) :is(h1, [class*="eyebrow"], [class*="lede"], [class*="ctas"], [class*="actions"], .sbhero-visual, .sbid-hero__photo, .sbab-hero__photo, .sbct2-hero__photo) {
  opacity: 0; animation: v2-failsafe 0s linear 2.5s forwards;
}
@keyframes v2-failsafe { to { opacity: 1; } }

/* heroes that host the Three.js terrain: the canvas sits behind the content inside its own stacking context */
html.sb-v2 .v2-has3d { position: relative; isolation: isolate; overflow: hidden; }

/* shared 3D canvas host (home and every page hero that gets one) */
html.sb-v2 .v2-hero3d { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--v2-ease);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 70%, transparent 100%); }
html.sb-v2 .v2-hero3d.is-ready { opacity: 1; }
html.sb-v2 .v2-hero3d.is-dark { mix-blend-mode: screen; }
/* inner pages: the floor lives in the lower part of the hero, strongest under the hero visual (right),
   quiet under the copy (left), and dissolves into the next section at the bottom edge */
html.sb-v2 .v2-hero3d--page {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 34%, #000 68%, #000 90%, transparent 100%), linear-gradient(90deg, rgba(0, 0, 0, .08) 0, rgba(0, 0, 0, .08) 34%, #000 66%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, transparent 34%, #000 68%, #000 90%, transparent 100%), linear-gradient(90deg, rgba(0, 0, 0, .08) 0, rgba(0, 0, 0, .08) 34%, #000 66%);
  mask-composite: intersect;
}
@media (max-width: 1100px) {
  html.sb-v2 .v2-hero3d--page { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 55%, #000 85%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, transparent 55%, #000 85%, transparent 100%); }
}
html.sb-v2 .v2-hero3d canvas { width: 100% !important; height: 100% !important; display: block; }

/* spotlight card: border lights up under the pointer (vars set by js/v2.js) */
html.sb-v2 .v2-spot { position: relative; isolation: isolate; }
html.sb-v2 .v2-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 138, 0, .75), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
html.sb-v2 .v2-spot:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.sb-v2 *, html.sb-v2 *::before, html.sb-v2 *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* reading measure: long-form text (legal, insight articles) stays within ~70 characters at any width */
html.sb-v2 :is(.sblg-wrap, .sbia-body, .sbia-content) :is(p, li) { max-width: 70ch; }