/* sbs-v2-base */
/* ==========================================================================
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,");
}
/* ---------- 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*="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; } }
/* phones: the homepage dashboard is the largest thing on first paint, so it is shown at once and only settles into place
(js/v2.js heroIntro animates transform, never opacity, below 768px) */
@media (max-width: 767px) { html.sb-v2.v2-pre .sbhero .sbhero-visual { opacity: 1; animation: none; } }
/* 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; }
/* sbs-v2-header */
/* ==========================================================================
SIGMA v2 header: "the command island"
At rest the header dissolves into the page: a refined light utility line and an airy,
borderless navigation row. On scroll (header.js adds .is-scrolled) the row condenses into a
floating glass island: the logo reduces to the sigma mark, search becomes a round icon, the CTA
becomes a compact pill with its arrow nested in a circle. A soft highlight pill glides between
links (the classic ink element) and rests on the current page. Mega menus drop as floating
double-bezel glass sheets with one accent and a quick stagger. Mobile: a compact floating pill
and a full-screen light glass menu. All behaviour stays in js/header.js; this is styling only.
========================================================================== */
html.sb-v2 .sbh {
--isl: cubic-bezier(.32, .72, 0, 1);
--isl-h: 64px;
--isl-max: 1120px;
background: transparent; box-shadow: none; border: 0;
}
/* ---------- utility line: light, quiet, hairline ---------- */
html.sb-v2 .sbh--light .sbh-util { background: var(--v2-ink); border-bottom: 1px solid var(--v2-line); }
html.sb-v2 .sbh-util__item { color: var(--v2-text-2); font-size: .8125rem; }
html.sb-v2 .sbh-util__item strong { color: var(--v2-text); }
html.sb-v2 a.sbh-util__item:hover, html.sb-v2 button.sbh-util__item:hover { color: var(--v2-text); }
html.sb-v2 .sbh-util__group > li + li { border-left-color: var(--v2-line-strong); }
html.sb-v2 .sbh-ic-blue { color: #071C33; }
html.sb-v2 .sbh-util__icon i { color: #071C33; }
/* ---------- the row at rest: no bar, just type on paper ---------- */
/* at rest the row is paper (it also covers the curtain footer pinned beneath the page);
once scrolled the band clears so the page content runs behind the island */
html.sb-v2 .sbh--light .sbh-main { background: var(--v2-ink); border-bottom: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background-color .4s; }
html.sb-v2 .sbh--light.is-scrolled .sbh-main { background: transparent; }
html.sb-v2 .sbh-main__inner {
position: relative; gap: 32px; border-radius: 0;
transition: max-width .8s var(--isl), height .8s var(--isl), margin .8s var(--isl), padding .8s var(--isl), border-radius .8s var(--isl), background-color .5s, box-shadow .6s;
}
html.sb-v2 .sbh-progress { display: none; }
/* logo: full lockup at rest, the sigma mark alone in the island */
html.sb-v2 .sbh-logo { overflow: hidden; width: 230px; transition: width .8s var(--isl); }
html.sb-v2 .sbh-logo__img { height: 61px; max-width: none; transition: height .8s var(--isl), filter .3s; }
html.sb-v2 .sbh--light .sbh-logo:hover .sbh-logo__img { filter: none; }
/* nav: medium weight navy type; the highlight pill does the talking */
html.sb-v2 .sbh-nav { margin-inline: auto; }
html.sb-v2 .sbh--light .sbh-link {
position: relative; z-index: 1; height: 40px; padding: 0 16px; border-radius: 999px;
font-size: .96875rem; font-weight: 500; color: var(--v2-text-2); transition: color .3s;
}
html.sb-v2 .sbh--light .sbh-link:hover, html.sb-v2 .sbh--light .sbh-link[aria-expanded="true"], html.sb-v2 .sbh--light .sbh-link.is-current { color: var(--v2-text); }
html.sb-v2 .sbh--light .sbh-link.is-current { font-weight: 600; }
html.sb-v2 .sbh--light .sbh-link[aria-expanded="true"]::after, html.sb-v2 .sbh-link::after { display: none; }
html.sb-v2 .sbh-link i { font-size: .625rem; opacity: .7; transition: transform .45s var(--isl); }
html.sb-v2 .sbh-link[aria-expanded="true"] i { transform: rotate(180deg); }
/* the classic ink becomes a gliding pill (header.js sets width = link - 28px and translateX = left + 14px) */
html.sb-v2 .sbh-ink {
top: calc(50% - 20px); bottom: auto; height: 40px; z-index: 0; background: transparent; box-shadow: none; border-radius: 999px;
transition: transform .6s var(--isl), width .6s var(--isl), opacity .3s;
}
html.sb-v2 .sbh-ink::before { content: ""; position: absolute; inset: 0 -14px; border-radius: 999px; background: rgba(7, 28, 51, .065); box-shadow: inset 0 0 0 1px rgba(7, 28, 51, .04); }
/* search: a round glass icon (Ctrl K and / still open the palette) */
html.sb-v2 .sbh--light .sbh-search {
width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; border-radius: 50%;
background: rgba(255, 255, 255, .7); border: 1px solid var(--v2-line); color: var(--v2-text-3); font-size: .875rem;
transition: width .8s var(--isl), padding .8s var(--isl), background-color .3s, border-color .3s;
}
html.sb-v2 .sbh--light .sbh-search:hover { background: #FFFFFF; border-color: var(--v2-line-strong); color: var(--v2-text-2); }
html.sb-v2 .sbh--light .sbh-search > i { color: var(--v2-text); font-size: .9375rem; }
html.sb-v2 .sbh-search__label, html.sb-v2 .sbh--light .sbh-search .sbh-kbd { display: none; }
html.sb-v2 .sbh--light .sbh-kbd { margin-left: auto; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--v2-surface-2); border: 0; font-size: .6875rem; color: var(--v2-text-3); opacity: 1; }
html.sb-v2 .sbh-vr { display: none; }
/* CTA: a pill with its arrow nested in a navy circle (button-in-button) */
html.sb-v2 .sbh--light .sbh-cta, html.sb-v2 .sbh-cta {
height: 50px; gap: 14px; padding: 0 6px 0 24px; border-radius: 999px;
background: var(--v2-accent); color: #071C33; font-weight: 700; font-size: .9375rem;
box-shadow: 0 10px 24px -12px rgba(232, 118, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
transition: height .8s var(--isl), padding .8s var(--isl), transform .4s var(--isl), box-shadow .4s, background-color .3s;
}
html.sb-v2 .sbh-cta i {
display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
background: #071C33; color: #FFFFFF; font-size: .8125rem;
transition: transform .5s var(--isl), width .8s var(--isl), height .8s var(--isl);
}
html.sb-v2 .sbh-cta:hover { background: #FF9A24; transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(232, 118, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
html.sb-v2 .sbh-cta:hover i { transform: translate(2px, -1px) scale(1.06) rotate(-45deg); }
html.sb-v2 .sbh-cta:active { transform: scale(.98); }
/* burger: a round glass button; lines morph into an X (classic header.js toggles aria-expanded) */
html.sb-v2 .sbh--light .sbh-burger { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--v2-line); background: rgba(255, 255, 255, .7); }
html.sb-v2 .sbh--light .sbh-burger span { left: 13px; right: 13px; height: 1.5px; background: #071C33; transition: transform .5s var(--isl), opacity .3s, top .5s var(--isl); }
html.sb-v2 .sbh--light .sbh-burger span:nth-child(1) { top: 16px; }
html.sb-v2 .sbh--light .sbh-burger span:nth-child(2) { top: 21px; right: 19px; background: var(--v2-accent); }
html.sb-v2 .sbh--light .sbh-burger span:nth-child(3) { top: 26px; }
html.sb-v2 .sbh--light .sbh-burger[aria-expanded="true"] span:nth-child(1), html.sb-v2 .sbh--light .sbh-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; }
html.sb-v2 .sbh--light .sbh-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
html.sb-v2 .sbh--light .sbh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(8px); }
html.sb-v2 .sbh--light .sbh-burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
/* ---------- the island (scrolled) ---------- */
html.sb-v2 .sbh.is-scrolled .sbh-main__inner {
max-width: var(--isl-max); height: var(--isl-h); margin-top: calc((var(--sbh-main-h) - var(--isl-h)) / 2);
padding: 0 8px 0 18px; border-radius: 999px;
background: rgba(255, 255, 255, .8);
box-shadow: 0 0 0 1px rgba(7, 28, 51, .07), 0 0 0 6px rgba(255, 255, 255, .45), 0 0 0 7px rgba(7, 28, 51, .05), 0 22px 44px -20px rgba(7, 28, 51, .32), inset 0 1px 0 rgba(255, 255, 255, .9);
}
@supports (backdrop-filter: blur(1px)) {
html.sb-v2 .sbh.is-scrolled .sbh-main__inner { background: rgba(255, 255, 255, .66); backdrop-filter: saturate(170%) blur(20px); -webkit-backdrop-filter: saturate(170%) blur(20px); }
}
html.sb-v2 .sbh.is-scrolled .sbh-logo { width: 44px; }
html.sb-v2 .sbh.is-scrolled .sbh-logo__img { height: 44px; }
html.sb-v2 .sbh.is-scrolled .sbh-cta { height: 48px; }
html.sb-v2 .sbh.is-scrolled .sbh-cta__full { display: none; }
html.sb-v2 .sbh.is-scrolled .sbh-cta__short { display: inline; }
html.sb-v2 .sbh.is-scrolled .sbh-cta i { width: 36px; height: 36px; }
/* ---------- mega menus: floating double-bezel glass sheets ---------- */
html.sb-v2 .sbh-mega { background: transparent; border: 0; box-shadow: none; transform: translateY(-10px) scale(.99); transform-origin: 50% 0;
transition: opacity .35s var(--isl), transform .5s var(--isl), visibility 0s linear .5s; }
html.sb-v2 .sbh-mega.is-open { transform: none; transition: opacity .35s var(--isl), transform .5s var(--isl), visibility 0s; }
html.sb-v2 .sbh-mega--card { padding: 8px var(--sb-gutter) 32px; }
html.sb-v2 .sbh.is-scrolled .sbh-mega--card { padding-top: 0; }
html.sb-v2 .sbh-sv {
max-width: var(--v2-wrap); border: 0; border-radius: 28px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 0 0 1px rgba(7, 28, 51, .07), 0 0 0 8px rgba(255, 255, 255, .5), 0 0 0 9px rgba(7, 28, 51, .05), 0 50px 90px -40px rgba(7, 28, 51, .45);
}
@supports (backdrop-filter: blur(1px)) {
html.sb-v2 .sbh-sv { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(160%) blur(24px); -webkit-backdrop-filter: saturate(160%) blur(24px); }
}
html.sb-v2 .sbh-sv__eyebrow { display: none; }
html.sb-v2 .sbh-sv__title { margin-top: 0; font-stretch: 112%; font-weight: 800; letter-spacing: var(--v2-track-h2); color: #071C33; }
html.sb-v2 .sbh-sv__title span { color: var(--v2-accent-text); }
html.sb-v2 .sbh-sv__lede { color: var(--v2-text-2); font-size: 1rem; }
html.sb-v2 .sbh-sv__all strong, html.sb-v2 .sbh-in__all, html.sb-v2 .sbh-in__foot-link, html.sb-v2 .sbh-sv__start-link { color: #071C33; }
/* items: no boxes; a paper tint and the orange arrow appear on hover */
html.sb-v2 :is(.sbh-sv__card, .sbh-in__item, .sbh-rs__item, .sbh-rs__tool) {
border-color: transparent !important; background: transparent; box-shadow: none !important; border-radius: 16px;
transition: background-color .35s var(--isl), transform .45s var(--isl);
}
html.sb-v2 :is(.sbh-sv__card, .sbh-in__item, .sbh-rs__item, .sbh-rs__tool):hover,
html.sb-v2 :is(.sbh-sv__card, .sbh-in__item, .sbh-rs__item, .sbh-rs__tool):focus-visible { background: rgba(7, 28, 51, .045); transform: translateX(3px); }
/* one accent: monochrome icon tiles that warm to orange on hover */
html.sb-v2 :is(.sbh-sv__icon, .sbh-in__icon, .sbh-rs__icon, .sbh-rs__ticon) {
background: #FFFFFF !important; color: #071C33 !important; border-radius: 12px;
box-shadow: 0 0 0 1px rgba(7, 28, 51, .08), 0 6px 14px -8px rgba(7, 28, 51, .3);
transition: background-color .35s, color .35s, transform .45s var(--isl);
}
html.sb-v2 :is(.sbh-sv__card, .sbh-in__item, .sbh-rs__item, .sbh-rs__tool):hover :is(.sbh-sv__icon, .sbh-in__icon, .sbh-rs__icon, .sbh-rs__ticon) { background: var(--v2-accent) !important; color: #071C33 !important; transform: rotate(-6deg); }
html.sb-v2 :is(.sbh-sv__go, .sbh-rs__go, .sbh-in__chev) { color: var(--v2-accent-text); }
html.sb-v2 .sbh-sv__go { background: transparent !important; }
html.sb-v2 .sbh-sv__start { border-radius: 18px; background: var(--v2-ink); }
/* a quick stagger as a sheet opens */
@media (prefers-reduced-motion: no-preference) {
html.sb-v2 .sbh-mega :is(.sbh-sv__grid, .sbh-in__grid, .sbh-rs__list, .sbh-rs__tools) > li { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--isl), transform .6s var(--isl); }
html.sb-v2 .sbh-mega.is-open :is(.sbh-sv__grid, .sbh-in__grid, .sbh-rs__list, .sbh-rs__tools) > li { opacity: 1; transform: none; }
html.sb-v2 .sbh-mega.is-open :is(.sbh-sv__grid, .sbh-in__grid, .sbh-rs__list, .sbh-rs__tools) > li:nth-child(2) { transition-delay: 40ms; }
html.sb-v2 .sbh-mega.is-open :is(.sbh-sv__grid, .sbh-in__grid, .sbh-rs__list, .sbh-rs__tools) > li:nth-child(3) { transition-delay: 80ms; }
html.sb-v2 .sbh-mega.is-open :is(.sbh-sv__grid, .sbh-in__grid, .sbh-rs__list, .sbh-rs__tools) > li:nth-child(4) { transition-delay: 120ms; }
html.sb-v2 .sbh-mega.is-open :is(.sbh-sv__grid, .sbh-in__grid, .sbh-rs__list, .sbh-rs__tools) > li:nth-child(5) { transition-delay: 160ms; }
html.sb-v2 .sbh-mega.is-open :is(.sbh-sv__grid, .sbh-in__grid, .sbh-rs__list, .sbh-rs__tools) > li:nth-child(6) { transition-delay: 200ms; }
html.sb-v2 .sbh-mega.is-open :is(.sbh-sv__grid, .sbh-in__grid, .sbh-rs__list, .sbh-rs__tools) > li:nth-child(n+7) { transition-delay: 240ms; }
}
/* ---------- mobile + tablet menu: full-screen light glass, large staggered links ---------- */
html.sb-v2 .sbh-drawer { background: rgba(244, 246, 249, .97); color: #071C33; }
@supports (backdrop-filter: blur(1px)) {
html.sb-v2 .sbh-drawer { background: rgba(244, 246, 249, .86); backdrop-filter: saturate(160%) blur(26px); -webkit-backdrop-filter: saturate(160%) blur(26px); }
}
html.sb-v2 :is(.sbh-drawer__link, .sbh-acc__btn) {
padding: 16px 0; border-bottom: 1px solid var(--v2-line); color: #071C33;
font-family: var(--sb-font-heading); font-stretch: 112%; font-weight: 700; font-size: clamp(1.625rem, 6.5vw, 2.25rem); letter-spacing: -.03em;
}
html.sb-v2 .sbh-acc__btn i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--v2-line-strong); color: #071C33; font-size: .75rem; }
html.sb-v2 .sbh-acc__btn[aria-expanded="true"] i { background: var(--v2-accent); border-color: var(--v2-accent); color: #071C33; }
html.sb-v2 .sbh-drawer__link[aria-current="page"] { color: var(--v2-accent-text); }
html.sb-v2 .sbh-acc__panel { border-bottom-color: var(--v2-line); }
html.sb-v2 .sbh-acc__panel a { color: var(--v2-text-2); font-size: 1rem; border-radius: 12px; }
html.sb-v2 .sbh-acc__panel a:hover, html.sb-v2 .sbh-acc__panel a[aria-current="page"] { background: rgba(7, 28, 51, .05); color: #071C33; }
html.sb-v2 .sbh-acc__all { color: var(--v2-accent-text) !important; }
html.sb-v2 .sbh-drawer__foot .sbh-cta, html.sb-v2 .sbh-drawer__foot > a:first-child { border-radius: 999px; }
html.sb-v2 .sbh-drawer__contact a { height: 50px; border-radius: 999px; }
html.sb-v2 .sbh-drawer__mail { border: 1px solid var(--v2-line-strong) !important; color: #071C33; }
html.sb-v2 .sbh-drawer__meta { color: var(--v2-text-3); }
@media (prefers-reduced-motion: no-preference) {
html.sb-v2 .sbh-drawer__nav > * { opacity: 0; transform: translateY(28px); transition: opacity .5s var(--isl), transform .7s var(--isl); }
html.sb-v2 .sbh-drawer.is-open .sbh-drawer__nav > * { opacity: 1; transform: none; }
html.sb-v2 .sbh-drawer.is-open .sbh-drawer__nav > :nth-child(2) { transition-delay: 50ms; }
html.sb-v2 .sbh-drawer.is-open .sbh-drawer__nav > :nth-child(3) { transition-delay: 100ms; }
html.sb-v2 .sbh-drawer.is-open .sbh-drawer__nav > :nth-child(4) { transition-delay: 150ms; }
html.sb-v2 .sbh-drawer.is-open .sbh-drawer__nav > :nth-child(5) { transition-delay: 200ms; }
html.sb-v2 .sbh-drawer.is-open .sbh-drawer__nav > :nth-child(n+6) { transition-delay: 250ms; }
}
/* ---------- command palette: same glass language ---------- */
html.sb-v2 .sbh-palette { background: rgba(7, 28, 51, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* ---------- widths ---------- */
@media (max-width: 1400px) { html.sb-v2 .sbh-main__inner { gap: 24px; } }
@media (max-width: 1200px) {
html.sb-v2 .sbh { --isl-max: 100%; }
html.sb-v2 .sbh-logo { width: 200px; }
html.sb-v2 .sbh-logo__img { height: 53px; }
html.sb-v2 .sbh.is-scrolled .sbh-main__inner { max-width: calc(100% - 2 * var(--sb-gutter) + 16px); }
}
@media (max-width: 767px) {
html.sb-v2 .sbh { --isl-h: 56px; }
html.sb-v2 .sbh-logo { width: 150px; }
html.sb-v2 .sbh-logo__img { height: 40px; }
html.sb-v2 .sbh.is-scrolled .sbh-main__inner { max-width: calc(100% - 16px); padding: 0 6px 0 14px; }
html.sb-v2 .sbh.is-scrolled .sbh-logo { width: 38px; }
html.sb-v2 .sbh.is-scrolled .sbh-logo__img { height: 38px; }
html.sb-v2 .sbh--light .sbh-search { width: 42px; height: 42px; background: transparent; border-color: transparent; }
html.sb-v2 .sbh--light .sbh-burger { width: 42px; height: 42px; }
html.sb-v2 .sbh--light .sbh-burger span:nth-child(1) { top: 15px; } html.sb-v2 .sbh--light .sbh-burger span:nth-child(2) { top: 20px; } html.sb-v2 .sbh--light .sbh-burger span:nth-child(3) { top: 25px; }
html.sb-v2 .sbh--light .sbh-burger[aria-expanded="true"] span:nth-child(1), html.sb-v2 .sbh--light .sbh-burger[aria-expanded="true"] span:nth-child(3) { top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
html.sb-v2 .sbh-main__inner, html.sb-v2 .sbh-logo, html.sb-v2 .sbh-logo__img, html.sb-v2 .sbh-search, html.sb-v2 .sbh-cta, html.sb-v2 .sbh-ink { transition: none; }
}
/* sbs-v2-insights-page */
/* SIGMA v2: insights hub (/insights/), insight articles (/insights//), related insights, and the latest-insights block on the 404.
Body sections only. The listing uses the homepage insight language (media on the page, mono topic, Archivo titles);
the article is long-form editorial: ~68ch measure, clear h2/h3, lists, quotes, tables, figures, code. */
html.sb-v2 .sbil { background: var(--v2-ink); color: var(--v2-text-2); }
html.sb-v2 .sbia { background: var(--v2-ink); color: var(--v2-text-2); }
/* ---------- listing ---------- */
html.sb-v2 .sbil { padding: clamp(28px, 3vw, 48px) 0 clamp(64px, 7vw, 112px); }
html.sb-v2 .sbil-filters { gap: 10px; padding: 28px 0 0; border-top: 1px solid var(--v2-line); border-bottom: 0; }
html.sb-v2 .sbil-filter {
min-height: 40px; padding: 0 16px 0 18px; gap: 10px; border-radius: 999px;
border: 1px solid var(--v2-line-strong); background: transparent;
font: 500 .9375rem/1 var(--sb-font-body); color: var(--v2-text-2);
transition: background-color .2s, border-color .2s, color .2s;
}
html.sb-v2 .sbil-filter span { padding: 3px 7px; background: var(--v2-line); font: 500 .6875rem/1 var(--sb-font-mono); color: var(--v2-text-2); }
html.sb-v2 .sbil-filter:hover { border-color: var(--v2-text-3); color: var(--v2-text); }
html.sb-v2 .sbil-filter.is-active { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-accent-ink); font-weight: 700; }
html.sb-v2 .sbil-filter.is-active span { background: rgba(7, 28, 51, .14); color: var(--v2-accent-ink); }
html.sb-v2 .sbil-filter:focus-visible, html.sb-v2 .sbil-card__link:focus-visible, html.sb-v2 .sbil-related__head a:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 4px; }
html.sb-v2 .sbil-status { margin: 22px 0 32px; font: 500 var(--v2-fs-label)/1.4 var(--sb-font-mono); letter-spacing: .04em; color: var(--v2-text-3); }
html.sb-v2 .sbil-grid { gap: clamp(32px, 3.4vw, 56px) clamp(24px, 2.6vw, 40px); }
/* card: no box, media + text on the page */
html.sb-v2 .sbil-card__link { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: none; }
html.sb-v2 .sbil-card__link:hover { transform: none; box-shadow: none; border-color: transparent; }
html.sb-v2 .sbil-card__media { aspect-ratio: 3 / 2; border-radius: var(--v2-r-media); background: var(--v2-surface-2); border: 1px solid var(--v2-line); box-shadow: var(--v2-shadow); }
html.sb-v2 .sbil-card__media img { filter: saturate(.55); transition: transform .9s var(--v2-ease), filter .5s; }
html.sb-v2 .sbil-card__link:hover .sbil-card__media img, html.sb-v2 .sbil-card__link:focus-visible .sbil-card__media img { transform: scale(1.04); filter: none; }
html.sb-v2 .sbil-badge { top: 18px; left: 18px; border-radius: 999px; background: var(--v2-surface); color: var(--v2-text); border: 1px solid var(--v2-line-strong); box-shadow: 0 6px 16px -8px rgba(7, 28, 51, .35); font: 600 .6875rem/1 var(--sb-font-mono); letter-spacing: .14em; padding: 8px 12px; }
html.sb-v2 .sbil-card__body { padding: 24px 0 0; }
html.sb-v2 .sbil-topic { font: 600 .75rem/1.3 var(--sb-font-mono); letter-spacing: .16em; color: var(--v2-accent-text); }
html.sb-v2 .sbil-card__title { margin-top: 12px !important; font-stretch: 108%; font-weight: 700; font-size: var(--v2-fs-h3); line-height: 1.15; letter-spacing: -.025em; color: var(--v2-text); transition: color .25s; text-wrap: balance; }
html.sb-v2 .sbil-card__link:hover .sbil-card__title { color: var(--v2-accent-text); }
html.sb-v2 .sbil-card__text { margin-top: 12px !important; font-size: 1rem; line-height: 1.55; color: var(--v2-text-2); }
html.sb-v2 .sbil-meta { padding-top: 22px; gap: 0; font: 500 var(--v2-fs-label)/1 var(--sb-font-mono); letter-spacing: .04em; color: var(--v2-text-3); }
html.sb-v2 .sbil-meta > span:first-child { padding-right: 14px; white-space: nowrap; }
html.sb-v2 .sbil-meta time { padding-left: 14px; border-left: 1px solid var(--v2-line-strong); white-space: nowrap; }
html.sb-v2 .sbil-go { width: 40px; height: 40px; background: transparent; border: 1px solid var(--v2-line-strong); color: var(--v2-text); transition: transform .35s var(--v2-ease), background-color .2s, border-color .2s; }
html.sb-v2 .sbil-card__link:hover .sbil-go { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-accent-ink); transform: translateX(2px); }
/* lead: media beside text, spans two columns */
html.sb-v2 .sbil-card--lead .sbil-card__link { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
html.sb-v2 .sbil-card--lead { grid-column: 1 / -1; }
html.sb-v2 .sbil-grid.is-filtered .sbil-card--lead { grid-column: auto; }
html.sb-v2 .sbil-card--lead .sbil-card__media { aspect-ratio: auto; min-width: 0; min-height: clamp(300px, 30vw, 440px); align-self: stretch; }
html.sb-v2 .sbil-card--lead .sbil-card__media img { position: absolute; inset: 0; }
html.sb-v2 .sbil-card--lead .sbil-card__body { padding: 0; }
html.sb-v2 .sbil-card--lead .sbil-card__title { font-weight: 800; font-size: var(--v2-fs-h3-lead); line-height: 1.04; letter-spacing: -.04em; }
html.sb-v2 .sbil-card--lead .sbil-card__text { font-size: 1.125rem; }
html.sb-v2 .sbil-grid.is-filtered .sbil-card--lead .sbil-card__media { aspect-ratio: 3 / 2; min-height: 0; }
html.sb-v2 .sbil-grid.is-filtered .sbil-card--lead .sbil-card__media img { position: static; }
html.sb-v2 .sbil-grid.is-filtered .sbil-card--lead .sbil-card__body { padding: 24px 0 0; }
html.sb-v2 .sbil-grid.is-filtered .sbil-card--lead .sbil-card__title { font-weight: 700; font-size: var(--v2-fs-h3); line-height: 1.15; letter-spacing: -.025em; }
html.sb-v2 .sbil-grid.is-filtered .sbil-card--lead .sbil-card__text { font-size: 1rem; }
html.sb-v2 .sbil-empty { border-radius: var(--v2-r-card); border-color: var(--v2-line-strong); background: transparent; color: var(--v2-text-2); }
html.sb-v2 .sbil-empty a { color: var(--v2-accent-text); }
/* related / latest band (also used on the 404) */
html.sb-v2 .sbil--related { padding: var(--v2-pad) 0; border-top: 1px solid var(--v2-line); background: var(--v2-ink-2); }
html.sb-v2 .sbil-related__head { align-items: end; margin-bottom: clamp(32px, 4vw, 56px); padding-bottom: 24px; border-bottom: 1px solid var(--v2-line); }
html.sb-v2 .sbil-related__head h2 { font-stretch: 112%; font-weight: 800; font-size: var(--v2-fs-h3-lead); line-height: 1.02; letter-spacing: var(--v2-track-h2); color: var(--v2-text); }
html.sb-v2 .sbil-related__head a { font: 600 .9375rem/1 var(--sb-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text); transition: color .2s; white-space: nowrap; }
html.sb-v2 .sbil-related__head a i { color: var(--v2-accent-text); }
html.sb-v2 .sbil-related__head a:hover { color: var(--v2-accent-text); }
html.sb-v2 .sbil-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ---------- article ---------- */
html.sb-v2 .sbia-wrap { box-sizing: border-box; max-width: calc(1180px + 2 * var(--sb-gutter)); padding-inline: var(--sb-gutter); }
html.sb-v2 .sbia-hero .sbia-wrap { max-width: calc(1180px + 2 * var(--sb-gutter)); }
html.sb-v2 .sbia-hero { background: transparent; padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 56px); }
html.sb-v2 .sbia-hero__dots { display: none; }
html.sb-v2 .sbia-crumbs { gap: 12px; font: 500 var(--v2-fs-label)/1 var(--sb-font-mono); letter-spacing: .14em; color: var(--v2-text-3); }
html.sb-v2 .sbia-crumbs a { transition: color .2s; }
html.sb-v2 .sbia-crumbs a:last-child { color: var(--v2-accent-text); }
html.sb-v2 .sbia-crumbs a:hover { color: var(--v2-text); }
html.sb-v2 .sbia-title { margin-top: 28px !important; max-width: 24ch; 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 .sbia-dek { margin-top: 24px !important; max-width: 44rem; font-size: var(--v2-fs-lede); line-height: 1.55; color: var(--v2-text-2); }
html.sb-v2 .sbia-meta { margin-top: 32px !important; padding-top: 24px; gap: 10px 24px; border-top: 1px solid var(--v2-line); font: 500 var(--v2-fs-label)/1.3 var(--sb-font-mono); letter-spacing: .04em; color: var(--v2-text-3); }
html.sb-v2 .sbia-author { font-weight: 600; color: var(--v2-text); }
html.sb-v2 .sbia-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--v2-navy); color: #FF9F33; font-stretch: 112%; }
html.sb-v2 .sbia-cover { margin-top: 0; max-width: calc(1180px + 2 * var(--sb-gutter)); }
html.sb-v2 .sbia-cover img { border-radius: var(--v2-r-media); border: 1px solid var(--v2-line); box-shadow: var(--v2-shadow); }
html.sb-v2 .sbia-layout { grid-template-columns: minmax(0, 720px) 280px; justify-content: space-between; gap: 64px; padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(64px, 7vw, 112px); }
html.sb-v2 .sbia-body { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.72; color: var(--v2-text-2); }
html.sb-v2 .sbia-body > * + * { margin-top: 1.15em; }
html.sb-v2 .sbia-body > :first-child { font-size: 1.1em; color: var(--v2-text); }
html.sb-v2 .sbia-body :is(h2, h3, h4) { font-family: var(--sb-font-heading); color: var(--v2-text); text-wrap: balance; }
html.sb-v2 .sbia-body h2 { margin-top: 2.2em; padding-top: 1.4em; border-top: 1px solid var(--v2-line); font-stretch: 108%; font-weight: 800; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.1; letter-spacing: -.03em; scroll-margin-top: 120px; }
html.sb-v2 .sbia-body h3 { margin-top: 1.9em; font-stretch: 105%; font-weight: 700; font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; scroll-margin-top: 120px; }
html.sb-v2 .sbia-body h4 { margin-top: 1.6em; font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; }
html.sb-v2 .sbia-body h2 + *, html.sb-v2 .sbia-body h3 + *, html.sb-v2 .sbia-body h4 + * { margin-top: .75em; }
html.sb-v2 .sbia-body a { color: var(--v2-accent-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(194, 87, 0, .4); transition: color .2s, text-decoration-color .2s; }
html.sb-v2 .sbia-body a:hover { color: var(--v2-text); text-decoration-color: var(--v2-accent); }
html.sb-v2 .sbia-body strong, html.sb-v2 .sbia-body b { color: var(--v2-text); font-weight: 600; }
html.sb-v2 .sbia-body ul, html.sb-v2 .sbia-body ol { padding-left: 1.5em; }
html.sb-v2 .sbia-body li { padding-left: .25em; }
html.sb-v2 .sbia-body li + li { margin-top: .5em; }
html.sb-v2 .sbia-body li::marker { color: var(--v2-accent-text); font-weight: 700; }
html.sb-v2 .sbia-body :is(ul, ol) :is(ul, ol) { margin-top: .5em; }
/* blockquote: pull quote, orange rule */
html.sb-v2 .sbia-body blockquote { margin: 2.2em 0; padding: 4px 0 4px clamp(20px, 2.4vw, 32px); border-left: 3px solid var(--v2-accent); border-radius: 0; background: none; font-family: var(--sb-font-heading); font-stretch: 105%; font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.35; letter-spacing: -.02em; color: var(--v2-text); }
html.sb-v2 .sbia-body blockquote p { max-width: none; margin: 0; }
html.sb-v2 .sbia-body blockquote p + p { margin-top: .8em; }
html.sb-v2 .sbia-body blockquote :is(cite, footer) { display: block; margin-top: 1em; font: 500 var(--v2-fs-label)/1.3 var(--sb-font-mono); letter-spacing: .06em; font-style: normal; color: var(--v2-text-3); }
/* code, tables, figures, rules */
html.sb-v2 .sbia-body :is(code, kbd, samp) { padding: 2px 6px; border-radius: 6px; border: 1px solid var(--v2-line); background: var(--v2-surface); font: .88em var(--sb-font-mono); color: var(--v2-text); }
html.sb-v2 .sbia-body pre { overflow-x: auto; padding: 20px 22px; border-radius: var(--v2-r-card); background: var(--v2-navy); color: #D3DDE8; font: .875rem/1.65 var(--sb-font-mono); tab-size: 2; }
html.sb-v2 .sbia-body pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
html.sb-v2 .sbia-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--v2-fs-small); line-height: 1.5; }
html.sb-v2 .sbia-body :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--v2-line); text-align: left; vertical-align: top; }
html.sb-v2 .sbia-body th { border-bottom: 1px solid var(--v2-line-strong); font: 500 var(--v2-fs-label)/1.3 var(--sb-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text); white-space: nowrap; }
html.sb-v2 .sbia-body figure { margin-inline: 0; }
html.sb-v2 .sbia-body :is(img, video) { display: block; max-width: 100%; height: auto; border-radius: var(--v2-r-card); border: 1px solid var(--v2-line); }
html.sb-v2 .sbia-body figcaption { margin-top: 12px; max-width: 60ch; font-size: var(--v2-fs-small); line-height: 1.5; color: var(--v2-text-3); }
html.sb-v2 .sbia-body hr { margin: 2.6em 0; border-top-color: var(--v2-line-strong); }
html.sb-v2 .sbia-body :is(p, li) { overflow-wrap: break-word; }
/* aside */
html.sb-v2 .sbia-aside { top: 120px; gap: 24px; }
html.sb-v2 .sbia-aside__label { font: 500 var(--v2-fs-label)/1 var(--sb-font-mono); letter-spacing: .16em; color: var(--v2-text-3); }
html.sb-v2 .sbia-share a, html.sb-v2 .sbia-share button { width: 44px; height: 44px; border-radius: var(--v2-r-ctl); border: 1px solid var(--v2-line-strong); background: transparent; color: var(--v2-text); }
html.sb-v2 .sbia-share a:hover, html.sb-v2 .sbia-share button:hover { background: var(--v2-navy); border-color: var(--v2-navy); color: #FFFFFF; }
html.sb-v2 .sbia-share button.is-done { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-accent-ink); }
html.sb-v2 .sbia a:focus-visible, html.sb-v2 .sbia button:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 3px; }
html.sb-v2 .sbia-cta { padding: 28px; border-radius: var(--v2-r-card); background: radial-gradient(120% 90% at 100% 0%, #13365E, var(--v2-navy) 65%); color: var(--v2-text-2); box-shadow: var(--v2-shadow); }
html.sb-v2 .sbia-cta__title { font-stretch: 108%; font-weight: 800; font-size: 1.375rem; line-height: 1.15; letter-spacing: -.03em; color: var(--v2-text); }
html.sb-v2 .sbia-cta p + p { margin-top: 10px; color: var(--v2-text-2); }
html.sb-v2 .sbia-cta__btn { margin-top: 20px; padding: 13px 18px; border-radius: var(--v2-r-ctl); background: var(--v2-accent); color: var(--v2-accent-ink) !important; box-shadow: 0 12px 28px -14px rgba(232, 118, 0, .75); transition: transform .35s var(--v2-ease), background-color .2s; }
html.sb-v2 .sbia-cta__btn:hover { background: #FF9A24; transform: translateY(-2px); }
/* ---------- responsive ---------- */
@media (max-width: 1100px) {
html.sb-v2 .sbil-card--lead .sbil-card__link { grid-template-columns: minmax(0, 1fr); gap: 0; }
html.sb-v2 .sbil-card--lead .sbil-card__media { aspect-ratio: 3 / 2; min-height: 0; align-self: auto; }
html.sb-v2 .sbil-card--lead .sbil-card__media img { position: static; }
html.sb-v2 .sbil-card--lead .sbil-card__body { padding: 24px 0 0; }
html.sb-v2 .sbia-layout { grid-template-columns: minmax(0, 720px); justify-content: start; gap: 48px; }
html.sb-v2 .sbia-aside { position: static; padding-top: 32px; border-top: 1px solid var(--v2-line); }
html.sb-v2 .sbil-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
html.sb-v2 .sbil { padding-top: 20px; }
html.sb-v2 .sbil-filters { padding-top: 22px; }
html.sb-v2 .sbil-filter { flex-shrink: 0; }
html.sb-v2 .sbil-status { margin: 18px 0 24px; }
html.sb-v2 .sbil-grid, html.sb-v2 .sbil-grid--three { grid-template-columns: minmax(0, 1fr); gap: 40px; }
html.sb-v2 .sbil--related { padding: 72px 0; }
html.sb-v2 .sbil-related__head { gap: 14px; }
html.sb-v2 .sbil-card__body, html.sb-v2 .sbil-card--lead .sbil-card__body { padding-top: 18px; }
html.sb-v2 .sbia-cover img { border-radius: var(--v2-r-card); }
html.sb-v2 .sbia-body h2 { margin-top: 1.9em; padding-top: 1.2em; }
html.sb-v2 .sbia-body pre { margin-inline: calc(var(--sb-gutter) * -1); border-radius: 0; padding-inline: var(--sb-gutter); }
html.sb-v2 .sbia-aside { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
html.sb-v2 .sbil-card__media img, html.sb-v2 .sbil-go, html.sb-v2 .sbia-cta__btn { transition: none; }
html.sb-v2 .sbil-card__link:hover .sbil-card__media img { transform: none; }
}
/* sbs-v2-footer */
/* SIGMA v2: footer and the global CTA band. On the light theme these two form the page's ONE deliberate
navy block (the finale), so the dark token set is re-declared locally and every rule below still uses tokens. */
html.sb-v2 :is(.sbpass-main, .sbft) {
--v2-ink: #071C33; --v2-ink-2: #0A223D; --v2-surface: #0D2744; --v2-surface-2: #12304F;
--v2-line: rgba(160, 190, 225, .14); --v2-line-strong: rgba(160, 190, 225, .26);
--v2-text: #F2F6FA; --v2-text-2: #BCC9D9; --v2-text-3: #93A4BA;
--v2-accent-text: #FF9F33; --v2-accent-ink: #071C33; --v2-accent-soft: rgba(255, 138, 0, .14);
color-scheme: dark;
}
html.sb-v2 .sbft { background: var(--v2-ink); border-top: 1px solid var(--v2-line); }
html.sb-v2 .sbft::before, html.sb-v2 .sbft::after { display: none; }
html.sb-v2 .sbft-h { color: var(--v2-text); font: 600 .8125rem/1 var(--sb-font-mono); letter-spacing: .14em; }
html.sb-v2 .sbft a:not(.sbft-logo) { color: var(--v2-text-2); transition: color .2s; }
html.sb-v2 .sbft a:not(.sbft-logo):hover { color: var(--v2-accent-text); }
html.sb-v2 .sbft-about, html.sb-v2 .sbft-copy, html.sb-v2 .sbft-news__text, html.sb-v2 .sbft-news__note { color: var(--v2-text-3); }
html.sb-v2 .sbft-bar { border-top-color: var(--v2-line); }
html.sb-v2 .sbft-social a { border-color: var(--v2-line-strong); }
html.sb-v2 .sbft-social a:hover { border-color: var(--v2-accent); }
/* ==========================================================================
Global CTA: the consultation pass (markup: partials/cta-v2.html)
A compact ticket that straddles the paper/footer boundary: navy main panel with a drifting
data field, a perforated tear line with notches, and a paper stub that holds the actions.
========================================================================== */
html.sb-v2 .sbct--v2 {
position: relative; padding: clamp(56px, 7vw, 96px) 0 0; color: var(--v2-text);
/* paper above, footer navy below: the pass sits across the seam */
background: linear-gradient(180deg, var(--v2-ink) 0, var(--v2-ink) 58%, #06182C 58%, #06182C 100%);
}
html.sb-v2 .sbct--v2 + .sbft { border-top: 0; }
/* the classic band overlay and two-column grid do not apply to the pass */
html.sb-v2 .sbct--v2::before, html.sb-v2 .sbct--v2::after { display: none; }
html.sb-v2 .sbct--v2 .sbct-inner { display: block; }
html.sb-v2 .sbpass {
--notch: 18px; --stub: clamp(300px, 28%, 380px);
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub);
filter: drop-shadow(0 30px 40px rgba(7, 28, 51, .22)) drop-shadow(0 4px 8px rgba(7, 28, 51, .08));
}
/* the halves are cut with notches at the perforation (radial masks), so the tear reads physically */
html.sb-v2 .sbpass-main {
position: relative; overflow: hidden; isolation: isolate; padding: clamp(32px, 4vw, 56px);
background: radial-gradient(600px 300px at 0% 100%, rgba(255, 138, 0, .16), transparent 70%), linear-gradient(135deg, #0B2546 0%, #071C33 60%);
box-shadow: inset 0 0 0 1px rgba(160, 190, 225, .16); /* rim: keeps the edge where the panel meets the navy footer */
border-radius: var(--v2-r-media) 0 0 var(--v2-r-media);
-webkit-mask: radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
mask: radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
/* drifting data field: the hero terrain dots, laid flat in perspective on the right */
html.sb-v2 .sbpass-field {
position: absolute; inset: -40% -10% -40% 35%; z-index: -1; pointer-events: none;
background-image: radial-gradient(circle, rgba(141, 190, 240, .5) 1.2px, transparent 1.6px);
background-size: 22px 22px;
transform: perspective(700px) rotateX(58deg) rotateZ(-8deg);
-webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent);
animation: sbpass-drift 18s linear infinite;
}
@keyframes sbpass-drift { to { background-position: 0 -220px; } }
html.sb-v2 .sbpass-title {
max-width: 17ch; margin: 0; 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 .sbpass-title strong { color: var(--v2-accent-text); }
html.sb-v2 .sbpass-lede { max-width: 46ch; margin: 18px 0 0; font-size: var(--v2-fs-lede); color: var(--v2-text-2); }
html.sb-v2 .sbpass-points { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px dashed var(--v2-line-strong); list-style: none; }
html.sb-v2 .sbpass-points li { display: inline-flex; align-items: center; gap: 9px; font-size: var(--v2-fs-small); font-weight: 500; color: var(--v2-text); }
html.sb-v2 .sbpass-points i { color: var(--v2-accent-text); font-size: .875rem; }
/* the stub: paper white, perforation dots on the tear edge */
html.sb-v2 .sbpass-stub {
position: relative; display: flex; flex-direction: column; justify-content: center; gap: 18px;
padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px);
background: #FFFFFF; color: #071C33; border-radius: 0 var(--v2-r-media) var(--v2-r-media) 0;
-webkit-mask: radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
mask: radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
transform-origin: 0 50%; transition: transform .6s var(--v2-ease);
}
html.sb-v2 .sbpass-stub::before {
content: ""; position: absolute; left: 0; top: calc(var(--notch) + 8px); bottom: calc(var(--notch) + 8px); width: 2px;
background: radial-gradient(circle, rgba(7, 28, 51, .28) 1px, transparent 1.5px) 0 0 / 2px 10px repeat-y;
}
html.sb-v2 .sbpass-admit { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; margin: 0; }
html.sb-v2 .sbpass-admit__big { font: 800 3.25rem/1 var(--sb-font-heading); font-stretch: 118%; letter-spacing: var(--v2-track-display); color: #071C33; }
html.sb-v2 .sbpass-admit__small { font: 600 .875rem/1.2 var(--sb-font-body); color: #3B4A5F; }
html.sb-v2 .sbpass-admit__tag { align-self: start; padding: 5px 9px; border-radius: 6px; background: var(--v2-accent); color: #071C33; font: 700 .75rem/1 var(--sb-font-mono); letter-spacing: .08em; text-transform: uppercase; }
html.sb-v2 .sbpass-btn {
display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 20px;
border-radius: var(--v2-r-ctl); background: var(--v2-accent); color: #071C33; font-weight: 700; font-size: 1rem;
box-shadow: 0 12px 26px -12px rgba(232, 118, 0, .8); transition: transform .35s var(--v2-ease), box-shadow .35s var(--v2-ease), background-color .2s;
}
html.sb-v2 .sbpass-btn:hover { background: #FF9A24; transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(232, 118, 0, .9); }
html.sb-v2 .sbpass-btn:active { transform: translateY(1px) scale(.98); }
html.sb-v2 .sbpass-btn i { transition: transform .35s var(--v2-ease); }
html.sb-v2 .sbpass-btn:hover i { transform: translateX(4px); }
html.sb-v2 .sbpass-alt { display: flex; gap: 8px; }
html.sb-v2 .sbpass-alt a {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px;
border: 1px solid rgba(7, 28, 51, .14); border-radius: var(--v2-r-ctl); color: #071C33; font-weight: 600; font-size: .9375rem; transition: border-color .2s, background-color .2s;
}
html.sb-v2 .sbpass-alt a:hover { border-color: #071C33; background: #F4F6F9; }
html.sb-v2 .sbpass-alt .fa-whatsapp { color: #128C4A; }
html.sb-v2 .sbpass a:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 3px; }
/* hover: the stub leans away along the tear line */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
html.sb-v2 .sbpass:hover .sbpass-stub { transform: translateX(6px) rotate(.8deg); }
}
@media (max-width: 1100px) { html.sb-v2 .sbpass { --stub: 300px; } }
/* phone: the pass turns vertical, the tear runs across */
@media (max-width: 767px) {
html.sb-v2 .sbct--v2 { background: linear-gradient(180deg, var(--v2-ink) 0, var(--v2-ink) 70%, #06182C 70%); }
html.sb-v2 .sbpass { grid-template-columns: 1fr; --notch: 14px; }
html.sb-v2 .sbpass-main {
border-radius: var(--v2-r-media) var(--v2-r-media) 0 0;
-webkit-mask: radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000) right / 51% 100% no-repeat;
mask: radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000) right / 51% 100% no-repeat;
}
html.sb-v2 .sbpass-stub {
border-radius: 0 0 var(--v2-r-media) var(--v2-r-media);
-webkit-mask: radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000) right / 51% 100% no-repeat;
mask: radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000) right / 51% 100% no-repeat;
}
html.sb-v2 .sbpass-stub::before { left: calc(var(--notch) + 8px); right: calc(var(--notch) + 8px); top: 0; bottom: auto; width: auto; height: 2px; background: radial-gradient(circle, rgba(7, 28, 51, .28) 1px, transparent 1.5px) 0 0 / 10px 2px repeat-x; }
html.sb-v2 .sbpass:hover .sbpass-stub { transform: none; }
}
@media (prefers-reduced-motion: reduce) { html.sb-v2 .sbpass-field { animation: none; } }
/* ==========================================================================
v2 footer: "the curtain" (markup: partials/footer-v2.html)
Large screens: the page is a sheet that lifts to reveal a full-height footer pinned beneath it
(html.v2-curtain, set by js/v2.js when the footer fits the viewport). Mount Kenya in a navy
duotone, the brand line in light/bold contrast, concierge-style contact, hairlines, no boxes.
========================================================================== */
html.sb-v2 .sbft--v2 {
position: relative; overflow: hidden; isolation: isolate; border-top: 0;
background: #06182C; color: var(--v2-text-2);
}
/* photo: duotone navy, settles (scale + light) as the curtain lifts; --reveal 0..1 set by js/v2.js */
html.sb-v2 .sbfc-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
html.sb-v2 .sbfc-photo img {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
filter: grayscale(1) contrast(1.15) brightness(.9);
opacity: calc(.3 + var(--reveal, 1) * .25);
transform: scale(calc(1.14 - var(--reveal, 1) * .14));
transform-origin: 50% 70%; will-change: transform;
}
html.sb-v2 .sbfc-photo::after { /* navy duotone + falloff toward the text */
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6, 24, 44, .9) 0%, rgba(6, 24, 44, .35) 42%, rgba(6, 24, 44, .88) 100%),
linear-gradient(90deg, rgba(6, 24, 44, .8) 0%, rgba(6, 24, 44, .15) 75%);
}
html.sb-v2 .sbft--v2 > .sbft-inner { width: 100%; }
html.sb-v2 .sbfc { position: relative; display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px); padding-top: clamp(56px, 6vw, 96px); padding-bottom: 28px; }
/* ---- composition: a 12-column editorial grid ----
head: brand line (cols 1-7) | direct line (cols 8-12, aligned to the line's baseline)
grid: Practices | Explore | Visit | Insights by email, each under its own hairline
sign: logo, copyright, legal, back to top */
html.sb-v2 .sbfc-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: end; }
html.sb-v2 .sbfc-line {
grid-column: 1 / span 7; margin: 0;
font-family: var(--sb-font-heading); font-stretch: 112%; font-weight: 300;
font-size: calc(var(--v2-fs-display) * 1.08); line-height: .96; letter-spacing: var(--v2-track-display); color: #F2F6FA;
}
html.sb-v2 .sbfc-line em { font-style: normal; font-weight: 800; color: #FF9F33; }
/* direct line: status, the email as the hero link with copy, the phone */
html.sb-v2 .sbfc-direct { grid-column: 8 / -1; justify-self: end; text-align: right; padding-bottom: 6px; } /* right-aligned to the grid edge: counterweight to the brand line */
html.sb-v2 .sbfc-status { display: block; margin: 0 0 18px; font-size: .8125rem; color: var(--v2-text-3); }
html.sb-v2 .sbfc-status strong { font-weight: 600; color: #DCE5EF; }
html.sb-v2 .sbfc-status__dot { position: relative; display: inline-block; vertical-align: 1px; margin-right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #7C8BA0; }
html.sb-v2 .sbfc-status.is-open .sbfc-status__dot { background: #34D399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); animation: sbfc-pulse 2.4s ease-out infinite; }
@keyframes sbfc-pulse { to { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } }
html.sb-v2 .sbfc-mail { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
html.sb-v2 .sbft--v2 .sbfc-mail__link {
font-family: var(--sb-font-heading); font-stretch: 108%; font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.25vw, 2.375rem); letter-spacing: -.025em; line-height: 1.1;
color: #FFFFFF; background: linear-gradient(#FF9F33, #FF9F33) 0 100% / 0 2px no-repeat; padding-bottom: 6px; transition: background-size .6s var(--v2-ease);
}
html.sb-v2 .sbft--v2 .sbfc-mail__link:hover, html.sb-v2 .sbft--v2 .sbfc-mail__link:focus-visible { background-size: 100% 2px; color: #FFFFFF; }
html.sb-v2 .sbfc-copy-btn {
height: 30px; padding: 0 12px; border: 1px solid rgba(160, 190, 225, .35); border-radius: 999px; background: transparent;
font: 500 .6875rem/1 var(--sb-font-body); letter-spacing: .16em; text-transform: uppercase; color: #DCE5EF; cursor: pointer;
transition: background-color .3s, border-color .3s, color .3s;
}
html.sb-v2 .sbfc-copy-btn:hover, html.sb-v2 .sbfc-copy-btn:focus-visible { border-color: #FF9F33; color: #FF9F33; }
html.sb-v2 .sbfc-copy-btn.is-done { background: #FF8A00; border-color: #FF8A00; color: #071C33; }
html.sb-v2 .sbft--v2 .sbfc-tel { display: inline-block; margin-top: 10px; font-family: var(--sb-font-heading); font-stretch: 108%; font-weight: 300; font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); letter-spacing: -.015em; color: #BCC9D9; }
html.sb-v2 .sbft--v2 .sbfc-tel:hover { color: #FFFFFF; }
/* four columns under hairlines */
html.sb-v2 .sbfc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); row-gap: 40px; }
html.sb-v2 .sbfc-grid > :nth-child(1) { grid-column: 1 / span 3; }
html.sb-v2 .sbfc-grid > :nth-child(2) { grid-column: 4 / span 2; }
html.sb-v2 .sbfc-grid > :nth-child(3) { grid-column: 6 / span 3; }
html.sb-v2 .sbfc-grid > :nth-child(4) { grid-column: 9 / -1; }
html.sb-v2 .sbfc-col { padding-top: 22px; border-top: 1px solid rgba(160, 190, 225, .2); font-style: normal; }
html.sb-v2 .sbfc-h { margin: 0 0 18px; font: 500 .6875rem/1 var(--sb-font-body); letter-spacing: .24em; text-transform: uppercase; color: #93A4BA; }
html.sb-v2 .sbfc-col ul { margin: 0; padding: 0; list-style: none; }
html.sb-v2 .sbfc-col li + li { margin-top: 9px; }
html.sb-v2 .sbft--v2 .sbfc-col a, html.sb-v2 .sbft--v2 .sbfc-legal a { font-size: .9375rem; color: #DCE5EF; }
html.sb-v2 .sbfc-addr { margin: 0; font-size: .9375rem; line-height: 1.5; }
html.sb-v2 .sbfc-hours { margin: 6px 0 0; font-size: .875rem; color: #93A4BA; }
html.sb-v2 .sbfc-social { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 20px !important; }
html.sb-v2 .sbfc-social li + li { margin-top: 0 !important; }
html.sb-v2 .sbfc-ext { margin-left: 6px; font-size: .7em; transform: rotate(-45deg); transition: transform .45s var(--v2-ease); }
html.sb-v2 .sbft--v2 a:hover .sbfc-ext { transform: rotate(-45deg) translate(3px, 0); }
/* text roll: the label slides up and a copy rolls in from below (data-roll added by js/v2.js) */
html.sb-v2 .sbft--v2 .sbfc-roll a { position: relative; display: inline-flex; align-items: center; overflow: hidden; vertical-align: top; }
html.sb-v2 .sbft--v2 .sbfc-roll a .v2-roll { display: inline-block; position: relative; transition: transform .55s var(--v2-ease); }
html.sb-v2 .sbft--v2 .sbfc-roll a .v2-roll::after { content: attr(data-roll); position: absolute; left: 0; top: 100%; color: #FF9F33; }
html.sb-v2 .sbft--v2 .sbfc-roll a:hover .v2-roll, html.sb-v2 .sbft--v2 .sbfc-roll a:focus-visible .v2-roll { transform: translateY(-100%); }
/* newsletter, compact */
html.sb-v2 .sbfc-label { display: block; max-width: 36ch; margin-bottom: 8px; font-size: .9375rem; line-height: 1.5; color: #BCC9D9; }
html.sb-v2 .sbfc-field { position: relative; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(160, 190, 225, .35); }
html.sb-v2 .sbfc-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #FF9F33; transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--v2-ease); }
html.sb-v2 .sbfc-field:focus-within::after { transform: scaleX(1); }
html.sb-v2 .sbft--v2 .sbfc-field input[type="email"], html.sb-v2 .sbft--v2 .sbfc-field input[data-sb-code] {
flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
font: 300 1.125rem/1 var(--sb-font-heading); font-stretch: 108%; color: #F2F6FA;
}
html.sb-v2 .sbft--v2 .sbfc-field input[data-sb-code] { font-family: var(--sb-font-mono, "IBM Plex Mono", monospace); font-weight: 500; letter-spacing: .32em; font-variant-numeric: tabular-nums; }
/* code step of the newsletter sign-up (js/sigma.js): "use a different email" link-button inside the note */
.sbft-news__note .sbft-news__alt { margin-left: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html.sb-v2 .sbft--v2 .sbfc-field input::placeholder { color: rgba(188, 201, 217, .6); opacity: 1; }
html.sb-v2 .sbft--v2 .sbfc-field input[aria-invalid="true"] { color: #FFB4A8; }
html.sb-v2 .sbft--v2 .sbfc-field button {
position: static; flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%;
border: 1px solid rgba(160, 190, 225, .4); background: transparent; color: #F2F6FA; font-size: .875rem;
transition: background-color .35s var(--v2-ease), border-color .35s, color .35s, transform .35s var(--v2-ease);
}
html.sb-v2 .sbft--v2 .sbfc-field button:hover, html.sb-v2 .sbft--v2 .sbfc-field button:focus-visible { background: #FF8A00; border-color: #FF8A00; color: #071C33; transform: rotate(-45deg); }
html.sb-v2 .sbft--v2 .sbfc-news .sbft-news__note { margin-top: 10px; font-size: .8125rem; color: #93A4BA; }
html.sb-v2 .sbft--v2 .sbfc-news .sbft-news__note.is-error { color: #FFB4A8; }
html.sb-v2 .sbft--v2 .sbfc-news .sbft-news__note.is-info { color: #F2F6FA; }
/* signature row */
html.sb-v2 .sbfc-sign { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; padding-top: 22px; border-top: 1px solid rgba(160, 190, 225, .2); }
html.sb-v2 .sbft--v2 .sbfc-logo .sbft-logo__img { height: 30px; width: auto; }
html.sb-v2 .sbfc-copy { display: block; margin: 0; font-size: .8125rem; color: #93A4BA; }
html.sb-v2 .sbfc-legal { display: flex; gap: 22px; margin: 0 0 0 auto; padding: 0; list-style: none; }
html.sb-v2 .sbft--v2 .sbfc-legal a { font-size: .8125rem; color: #93A4BA; }
html.sb-v2 .sbft--v2 .sbfc-totop { display: inline-flex; align-items: center; gap: 12px; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: #DCE5EF; background: none; }
html.sb-v2 .sbfc-totop i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(160, 190, 225, .4); border-radius: 50%; transition: transform .45s var(--v2-ease), background-color .3s, border-color .3s, color .3s; }
html.sb-v2 .sbfc-totop:hover i, html.sb-v2 .sbfc-totop:focus-visible i { transform: translateY(-4px); background: #FF8A00; border-color: #FF8A00; color: #071C33; }
html.sb-v2 .sbft--v2 .sbfc a:focus-visible, html.sb-v2 .sbft--v2 .sbfc button:focus-visible { outline: 2px solid #FF9F33; outline-offset: 4px; }
/* ---------- the curtain (large screens, footer shorter than the viewport) ---------- */
html.sb-v2.v2-curtain .sbft--v2 { position: sticky; bottom: 0; z-index: 0; min-height: min(100dvh, 860px); display: flex; flex-direction: column; justify-content: flex-end; }
html.sb-v2.v2-curtain .v2-sheet { position: relative; z-index: 1; background-color: var(--v2-ink); }
/* the sheet edge: rounded corners and a soft shadow falling onto the footer */
html.sb-v2.v2-curtain .v2-sheet--last { border-radius: 0 0 28px 28px; box-shadow: 0 40px 60px -30px rgba(0, 8, 20, .55), 0 2px 0 rgba(255, 255, 255, .6) inset; }
/* the consultation pass now rests on the sheet (paper all round) instead of straddling a navy band */
html.sb-v2.v2-curtain .sbct--v2 { background: var(--v2-ink); padding-bottom: clamp(56px, 7vw, 96px); }
/* tablet and phone: normal flow, stacked */
@media (max-width: 1100px) {
html.sb-v2 .sbfc-line { grid-column: 1 / -1; margin-bottom: 36px; }
html.sb-v2 .sbfc-direct { grid-column: 1 / -1; justify-self: start; text-align: left; }
html.sb-v2 .sbfc-mail { justify-content: flex-start; }
html.sb-v2 .sbfc-grid > :nth-child(1) { grid-column: 1 / span 6; }
html.sb-v2 .sbfc-grid > :nth-child(2) { grid-column: 7 / span 6; }
html.sb-v2 .sbfc-grid > :nth-child(3) { grid-column: 1 / span 6; }
html.sb-v2 .sbfc-grid > :nth-child(4) { grid-column: 7 / span 6; }
}
@media (max-width: 767px) {
html.sb-v2 .sbfc { gap: 48px; padding-top: 72px; }
html.sb-v2 .sbfc-line { font-size: var(--v2-fs-display); }
html.sb-v2 .sbfc-grid > * { grid-column: 1 / -1 !important; }
html.sb-v2 .sbfc-legal { margin-left: 0; }
html.sb-v2 .sbfc-sign { padding-bottom: 88px; } /* clear the sticky mobile action bar */
}
@media (min-width: 768px) { html.sb-v2 .sbfc-sign { padding-right: 84px; } } /* floating WhatsApp button */
@media (prefers-reduced-motion: reduce) { html.sb-v2 .sbfc-photo img { transform: none; } }