/* ==========================================================================
   ScaleUp InfraTech — site styles
   Layout concept: full-bleed alternating bands (white / paper / tint), content on a
   1180px column, Apple-style stacked product tiles, glass navigation, scroll-scrubbed media.
   Theming: every colour is a token. Light values live on :root; dark values apply when the
   OS prefers dark (unless data-theme="light"), when data-theme="dark", and always inside
   image-led surfaces (hero, CTA band, feature article, 6S cards, industry tiles, .s-dark).
   ========================================================================== */

/* Style palettes. Apple is the default; [data-style="aws"] and [data-style="gcp"] override
   only these --brand / --ink / --s-* / shape / type values. -l = light mode, -d = dark mode. */
:root {
  --brand: #00C2FF; --brand-fg: #00131F; --brand-2: #22C55E;
  --navy: #1A3B5D; --amber: #F5A524;
  --ink: #06101C; --ink-2: #0B1828; --ink-3: #12243A; --ink-rgb: 6, 16, 28;
  --s-bg1-l: #FFFFFF; --s-bg2-l: #F3F5F8; --s-bg3-l: #E9EFF6;
  --s-bg1-d: #08131F; --s-bg2-d: #0C1828; --s-bg3-d: #050C16;
  --s-fg-l: #0A1626; --s-fg2-l: #475569; --s-fg3-l: #64748B; --s-fg4-l: #B5C0CE;
  --s-fg-d: #F4F7FB; --s-fg2-d: #A7B6C8; --s-fg3-d: #7D8FA6; --s-fg4-d: #34465C;
  --s-accent-l: #0072AD; --s-accent-d: #00C2FF;
  --s-green-l: #15803D; --s-green-d: #22C55E;
  --s-grad-l: linear-gradient(92deg, #0093D6 0%, #0072AD 45%, #15803D 100%);
  --s-grad-d: linear-gradient(92deg, #8BE6FF 0%, #00C2FF 38%, #3DDC97 82%, #22C55E 100%);
  --s-panel-d: #0E1B2C; --s-raised-d: #1B2D45;
  --s-nav-l: rgba(250, 251, 253, .78); --s-nav2-l: rgba(250, 251, 253, .9); --s-navfg-l: #0A1626; --s-navfg2-l: rgba(10, 22, 38, .72); --s-navline-l: rgba(10, 22, 38, .10); --s-fly-l: rgba(250, 251, 253, .97); --s-sheet-l: rgba(250, 251, 253, .99);
  --s-nav-d: rgba(6, 16, 28, .78); --s-nav2-d: rgba(6, 16, 28, .88); --s-navfg-d: #F4F7FB; --s-navfg2-d: rgba(244, 247, 251, .8); --s-navline-d: rgba(255, 255, 255, .10); --s-fly-d: rgba(8, 19, 33, .97); --s-sheet-d: rgba(6, 16, 28, .99);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --r-xl: 32px; --r-lg: 24px; --btn-r: 999px;
  --display-w: 700; --display-ls: -0.045em; --h-w: 700; --h-ls: -0.035em; --body-ls: -0.012em;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 60px;
  --max: 1180px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --band-pad: clamp(88px, 11vw, 168px);
}

/* AWS — squid ink + Smile orange, compact corners, firm headings */
:root[data-style="aws"] {
  --brand: #FF9900; --brand-fg: #16191F; --brand-2: #1D8102;
  --ink: #161D26; --ink-2: #232F3E; --ink-3: #2E3B4D; --ink-rgb: 22, 29, 38;
  --s-bg1-l: #FFFFFF; --s-bg2-l: #F2F3F3; --s-bg3-l: #EAEDED;
  --s-bg1-d: #0F141A; --s-bg2-d: #161D26; --s-bg3-d: #0B0F14;
  --s-fg-l: #16191F; --s-fg2-l: #414D5C; --s-fg3-l: #5F6B7A; --s-fg4-l: #B6BEC9;
  --s-fg-d: #F2F3F3; --s-fg2-d: #B6BEC9; --s-fg3-d: #8D99A8; --s-fg4-d: #3B4756;
  --s-accent-l: #B85C00; --s-accent-d: #FFB13D;
  --s-green-l: #1D8102; --s-green-d: #5FBF3F;
  --s-grad-l: linear-gradient(92deg, #EC7211 0%, #B85C00 100%);
  --s-grad-d: linear-gradient(92deg, #FFD08A 0%, #FF9900 55%, #EC7211 100%);
  --s-panel-d: #1B2430; --s-raised-d: #2A3645;
  --s-nav-l: rgba(35, 47, 62, .96); --s-nav2-l: rgba(35, 47, 62, .98); --s-navfg-l: #FFFFFF; --s-navfg2-l: rgba(255, 255, 255, .82); --s-navline-l: rgba(255, 255, 255, .08); --s-fly-l: rgba(35, 47, 62, .99); --s-sheet-l: rgba(22, 29, 38, .99);
  --s-nav-d: rgba(35, 47, 62, .96); --s-nav2-d: rgba(35, 47, 62, .98); --s-fly-d: rgba(35, 47, 62, .99); --s-sheet-d: rgba(22, 29, 38, .99);
  --font: "Amazon Ember", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --r-xl: 14px; --r-lg: 10px; --btn-r: 8px;
  --display-w: 700; --display-ls: -0.022em; --h-w: 700; --h-ls: -0.018em; --body-ls: 0;
}

/* Google Cloud — Google blue + four-colour accents, Roboto, Material corners */
:root[data-style="gcp"] {
  --brand: #1A73E8; --brand-fg: #FFFFFF; --brand-2: #34A853;
  --ink: #202124; --ink-2: #28292C; --ink-3: #3C4043; --ink-rgb: 32, 33, 36;
  --s-bg1-l: #FFFFFF; --s-bg2-l: #F8F9FA; --s-bg3-l: #F1F3F4;
  --s-bg1-d: #202124; --s-bg2-d: #28292C; --s-bg3-d: #18191B;
  --s-fg-l: #202124; --s-fg2-l: #5F6368; --s-fg3-l: #70757A; --s-fg4-l: #BDC1C6;
  --s-fg-d: #E8EAED; --s-fg2-d: #BDC1C6; --s-fg3-d: #9AA0A6; --s-fg4-d: #4A4E53;
  --s-accent-l: #1A73E8; --s-accent-d: #8AB4F8;
  --s-green-l: #188038; --s-green-d: #81C995;
  --s-grad-l: linear-gradient(92deg, #1A73E8 0%, #1A73E8 30%, #188038 55%, #E37400 78%, #D93025 100%);
  --s-grad-d: linear-gradient(92deg, #8AB4F8 0%, #8AB4F8 30%, #81C995 55%, #FDD663 78%, #F28B82 100%);
  --s-panel-d: #2D2E31; --s-raised-d: #3C4043;
  --s-nav-l: rgba(255, 255, 255, .92); --s-nav2-l: rgba(255, 255, 255, .97); --s-navfg-l: #202124; --s-navfg2-l: #5F6368; --s-navline-l: #DADCE0; --s-fly-l: rgba(255, 255, 255, .99); --s-sheet-l: rgba(255, 255, 255, .99);
  --s-nav-d: rgba(32, 33, 36, .92); --s-nav2-d: rgba(32, 33, 36, .97); --s-navfg-d: #E8EAED; --s-navfg2-d: #BDC1C6; --s-navline-d: #3C4043; --s-fly-d: rgba(40, 41, 44, .99); --s-sheet-d: rgba(32, 33, 36, .99);
  --font: "Google Sans", "Google Sans Text", "Product Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Google Sans Code", "Roboto Mono", ui-monospace, Menlo, monospace;
  --r-xl: 24px; --r-lg: 16px; --btn-r: 999px;
  --display-w: 500; --display-ls: -0.03em; --h-w: 500; --h-ls: -0.022em; --body-ls: .002em;
}

/* Theme tokens — light (default) */
:root {
  --bg-1: var(--s-bg1-l); --bg-2: var(--s-bg2-l); --bg-3: var(--s-bg3-l);
  --fg: var(--s-fg-l); --fg-2: var(--s-fg2-l); --fg-3: var(--s-fg3-l); --fg-4: var(--s-fg4-l);
  --line: rgba(10, 22, 38, .10); --line-strong: rgba(10, 22, 38, .18);
  --accent: var(--s-accent-l); --accent-green: var(--s-green-l); --danger: #DC2626;
  --card-1: var(--s-bg2-l); --card-2: #FFFFFF; --card-3: #FFFFFF; --card-line: rgba(10, 22, 38, .07);
  --icon-bg: color-mix(in srgb, var(--s-accent-l) 10%, transparent); --icon-bg-green: color-mix(in srgb, var(--s-green-l) 11%, transparent);
  --chip-bg: #FFFFFF; --field-bg: #FFFFFF; --panel: #FFFFFF; --panel-raised: #FFFFFF; --seg-bg: var(--s-bg2-l);
  --note-bg: rgba(34, 197, 94, .12); --note-fg: #14532D; --pill-red: #B91C1C; --pill-green: #15803D;
  --hover-shadow: rgba(0, 20, 40, .28);
  --grad: var(--s-grad-l);
  --grad-energy: linear-gradient(92deg, #16A34A 0%, #15803D 60%, #4D7C0F 100%);
  --nav-glass: var(--s-nav-l); --nav-glass-strong: var(--s-nav2-l); --nav-fg: var(--s-navfg-l); --nav-fg-2: var(--s-navfg2-l); --nav-line: var(--s-navline-l);
  --flyout-bg: var(--s-fly-l); --sheet-bg: var(--s-sheet-l); --scrim: rgba(10, 22, 38, .2);
  color-scheme: light;
}

/* Theme tokens — dark (OS preference) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nav-glass: var(--s-nav-d); --nav-glass-strong: var(--s-nav2-d); --nav-fg: var(--s-navfg-d); --nav-fg-2: var(--s-navfg2-d); --nav-line: var(--s-navline-d);
    --flyout-bg: var(--s-fly-d); --sheet-bg: var(--s-sheet-d); --scrim: rgba(2, 6, 12, .45);
  }
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) body {
    --bg-1: var(--s-bg1-d); --bg-2: var(--s-bg2-d); --bg-3: var(--s-bg3-d);
    --fg: var(--s-fg-d); --fg-2: var(--s-fg2-d); --fg-3: var(--s-fg3-d); --fg-4: var(--s-fg4-d);
    --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .20);
    --accent: var(--s-accent-d); --accent-green: var(--s-green-d); --danger: #FF7A7A;
    --card-1: rgba(255, 255, 255, .04); --card-2: rgba(255, 255, 255, .045); --card-3: rgba(255, 255, 255, .05); --card-line: rgba(255, 255, 255, .10);
    --icon-bg: color-mix(in srgb, var(--s-accent-d) 13%, transparent); --icon-bg-green: color-mix(in srgb, var(--s-green-d) 13%, transparent);
    --chip-bg: rgba(255, 255, 255, .05); --field-bg: rgba(255, 255, 255, .05); --panel: var(--s-panel-d); --panel-raised: var(--s-raised-d); --seg-bg: rgba(255, 255, 255, .06);
    --note-bg: rgba(34, 197, 94, .14); --note-fg: #86EFAC; --pill-red: #FCA5A5; --pill-green: #86EFAC;
    --hover-shadow: color-mix(in srgb, var(--brand) 22%, transparent);
    --grad: var(--s-grad-d);
    --grad-energy: linear-gradient(92deg, #B7F7CF 0%, #22C55E 55%, #9BE15D 100%);
    color-scheme: dark;
  }
}

/* Theme tokens — dark (explicit choice, and image-led surfaces in either theme) */
:root[data-theme="dark"], :root[data-theme="dark"] body,
.s-dark, .hero, .cta-band, .feature-article, .s-card, .ind, .on-dark {
  --bg-1: var(--s-bg1-d); --bg-2: var(--s-bg2-d); --bg-3: var(--s-bg3-d);
  --fg: var(--s-fg-d); --fg-2: var(--s-fg2-d); --fg-3: var(--s-fg3-d); --fg-4: var(--s-fg4-d);
  --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .20);
  --accent: var(--s-accent-d); --accent-green: var(--s-green-d); --danger: #FF7A7A;
  --card-1: rgba(255, 255, 255, .04); --card-2: rgba(255, 255, 255, .045); --card-3: rgba(255, 255, 255, .05); --card-line: rgba(255, 255, 255, .10);
  --icon-bg: color-mix(in srgb, var(--s-accent-d) 13%, transparent); --icon-bg-green: color-mix(in srgb, var(--s-green-d) 13%, transparent);
  --chip-bg: rgba(255, 255, 255, .05); --field-bg: rgba(255, 255, 255, .05); --panel: var(--s-panel-d); --panel-raised: var(--s-raised-d); --seg-bg: rgba(255, 255, 255, .06);
  --note-bg: rgba(34, 197, 94, .14); --note-fg: #86EFAC; --pill-red: #FCA5A5; --pill-green: #86EFAC;
  --hover-shadow: color-mix(in srgb, var(--brand) 22%, transparent);
  --grad: var(--s-grad-d);
  --grad-energy: linear-gradient(92deg, #B7F7CF 0%, #22C55E 55%, #9BE15D 100%);
  color-scheme: dark;
}
:root[data-theme="dark"] {
  --nav-glass: var(--s-nav-d); --nav-glass-strong: var(--s-nav2-d); --nav-fg: var(--s-navfg-d); --nav-fg-2: var(--s-navfg2-d); --nav-line: var(--s-navline-d);
  --flyout-bg: var(--s-fly-d); --sheet-bg: var(--s-sheet-d); --scrim: rgba(2, 6, 12, .45);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 64px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: var(--body-ls);
  color: var(--fg);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .4s;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--bg-1); color: var(--fg); padding: 10px 16px; border-radius: 10px; font-weight: 600; transition: top .2s; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.wrap { width: 100%; max-width: calc(var(--max) + 40px); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.wrap--narrow { max-width: 860px; }

/* ---------- Bands ---------- */
.band { position: relative; padding-block: var(--band-pad); background: var(--band-bg, var(--bg-1)); color: var(--fg); --card: var(--card-1); transition: background-color .4s; }
.band--tight { padding-block: clamp(64px, 8vw, 112px); }
.band--flush-top { padding-top: 0; }
.band--white { --band-bg: var(--bg-1); --card: var(--card-1); }
.band--paper { --band-bg: var(--bg-2); --card: var(--card-2); }
.band--ink, .band--ink2, .band--navy { --band-bg: var(--bg-3); --card: var(--card-3); }
.s-dark.band { --band-bg: var(--ink); --card: var(--card-3); }
.muted { color: var(--fg-2); }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .5em; font-size: clamp(15px, 1.25vw, 19px); font-weight: 600; letter-spacing: -0.01em; color: var(--accent); margin-bottom: 14px; }
.eyebrow--green { color: var(--accent-green); }
.eyebrow--danger { color: var(--danger); }
.display { font-size: clamp(44px, 6.4vw, 96px); line-height: 1.0; letter-spacing: var(--display-ls); font-weight: var(--display-w); text-wrap: balance; }
.h1 { font-size: clamp(40px, 6.2vw, 84px); line-height: 1.03; letter-spacing: var(--display-ls); font-weight: var(--display-w); text-wrap: balance; }
.h2 { font-size: clamp(34px, 4.9vw, 64px); line-height: 1.06; letter-spacing: var(--h-ls); font-weight: var(--h-w); text-wrap: balance; }
.h3 { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 650; text-wrap: balance; }
.h4 { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 650; }
.lead { font-size: clamp(19px, 1.65vw, 24px); line-height: 1.42; letter-spacing: -0.018em; font-weight: 500; color: var(--fg-2); max-width: 46ch; text-wrap: pretty; }
.lead strong { color: var(--fg); font-weight: 600; }
.body-lg { font-size: 19px; line-height: 1.6; color: var(--fg-2); max-width: 62ch; }
.body-lg strong { color: var(--fg); }
.mono { font-family: var(--mono); font-size: .82em; letter-spacing: 0; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.grad-energy { background: var(--grad-energy); -webkit-background-clip: text; background-clip: text; color: transparent; }
.center { text-align: center; margin-inline: auto; }
.center .lead, .center.lead { margin-inline: auto; }

.head { display: grid; gap: 18px; margin-bottom: clamp(44px, 6vw, 80px); max-width: 880px; }
.head.center { justify-items: center; }
.head--split { max-width: none; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .head--split { grid-template-columns: 1.2fr 1fr; gap: 48px; } }

/* ---------- Buttons & links ---------- */
.btn { --b-bg: var(--brand); --b-fg: var(--brand-fg); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: var(--btn-r); background: var(--b-bg); color: var(--b-fg); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; transition: transform .35s var(--ease), background-color .25s, box-shadow .35s var(--ease), color .25s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--brand) 55%, transparent); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--ghost { --b-bg: transparent; --b-fg: currentColor; border-color: currentColor; }
.btn--ghost:hover { box-shadow: none; background: rgba(127, 127, 127, .12); }
.btn--dark, .btn--white { --b-bg: var(--fg); --b-fg: var(--bg-1); }
.btn--dark:hover, .btn--white:hover { box-shadow: 0 10px 30px -12px var(--hover-shadow); }
.btn--green { --b-bg: var(--brand-2); --b-fg: #03210F; }
.btn--green:hover { box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--brand-2) 55%, transparent); }
.btn--sm { min-height: 36px; padding: 6px 16px; font-size: 14px; }
.btn svg { width: 18px; height: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.center .cta-row, .cta-row.center { justify-content: center; }

.more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent); font-size: 17px; }
.more svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.more:hover svg, a:hover .more svg, a:focus-visible .more svg { transform: translateX(4px); }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-top: env(safe-area-inset-top, 0px); color: var(--nav-fg); }
.nav__bar { position: relative; z-index: 2; height: var(--nav-h); display: flex; align-items: center; gap: 12px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); max-width: 1320px; margin-inline: auto; }
.nav::before { content: ""; position: absolute; inset: 0; background: var(--nav-glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid var(--nav-line); transition: background-color .4s; }
.nav.is-scrolled::before, .nav.is-open::before { background: var(--nav-glass-strong); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.logo svg { width: 28px; height: 28px; flex: none; }
.logo span em { font-style: normal; font-weight: 400; opacity: .78; }
.nav__links { display: none; margin-inline: auto; gap: 4px; align-items: center; height: 100%; }
.nav__links > li { height: 100%; display: flex; align-items: center; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0 12px; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; color: var(--nav-fg-2); background: none; border: 0; cursor: pointer; transition: color .2s; }
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { color: var(--nav-fg); }
.nav__link svg { width: 12px; height: 12px; opacity: .7; transition: transform .3s var(--ease); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__cta { display: none; }
.icon-toggle { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--nav-fg-2); transition: color .2s, background-color .2s; }
.icon-toggle:hover { color: var(--nav-fg); background: rgba(127, 127, 127, .14); }
.icon-toggle svg { width: 19px; height: 19px; stroke-width: 1.8; }
.theme-btn { margin-left: auto; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
.nav__menu-btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; border-radius: 10px; }
.nav__menu-btn span { position: relative; display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease), background-color .2s; }
.nav__menu-btn span::before, .nav__menu-btn span::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
.nav__menu-btn span::before { transform: translateY(-4px); }
.nav__menu-btn span::after { transform: translateY(4px); }
.nav__menu-btn[aria-expanded="true"] span { background: transparent; }
.nav__menu-btn[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__menu-btn[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* Flyout (desktop) */
.flyout { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: var(--flyout-bg); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-bottom: 1px solid var(--nav-line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .3s; }
.flyout.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s; }
.flyout__inner { max-width: 1080px; margin-inline: auto; padding: 36px max(20px, env(safe-area-inset-left, 0px)) 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px 40px; }
.flyout__label { font-size: 12px; color: var(--fg-3); margin-bottom: 12px; font-weight: 500; }
.flyout__big a { display: block; font-size: 24px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.25; padding: 4px 0; color: var(--nav-fg); transition: color .2s; }
.flyout__big a:hover { color: var(--accent); }
.flyout__small a { display: block; font-size: 14px; font-weight: 500; padding: 5px 0; color: var(--fg-2); }
.flyout__small a:hover { color: var(--nav-fg); }
.flyout__note { font-size: 13px; color: var(--fg-3); margin-top: 10px; max-width: 30ch; }
.nav-scrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.nav-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .35s; }

/* Mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 1; padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 16px) max(28px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(28px, env(safe-area-inset-left, 0px)); background: var(--sheet-bg); color: var(--nav-fg); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.sheet.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.sheet__group { margin-bottom: 14px; }
.sheet__label { font-size: 28px; line-height: 1.25; font-weight: 650; letter-spacing: -0.03em; color: var(--nav-fg); padding: 6px 0 2px; }
.sheet a.sheet__big { display: block; font-size: 28px; line-height: 1.25; font-weight: 650; letter-spacing: -0.03em; padding: 6px 0; }
.sheet a.sheet__small { display: block; font-size: 17px; font-weight: 500; color: var(--fg-2); padding: 7px 0; }
.sheet .btn { margin-top: 28px; width: 100%; }
.sheet__item { opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.sheet.is-open .sheet__item { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 28ms + 60ms); }

@media (min-width: 1080px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .theme-btn { margin-left: 0; }
  .nav__menu-btn, .sheet { display: none; }
}

/* Local (product) nav */
.localnav { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: 60; color: var(--nav-fg); }
.localnav::before { content: ""; position: absolute; inset: 0; background: var(--nav-glass-strong); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--nav-line); }
.localnav__inner { position: relative; display: flex; align-items: center; gap: 18px; height: 52px; }
.localnav__title { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; }
.localnav__links { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.localnav__links::-webkit-scrollbar { display: none; }
.localnav__links a { padding: 6px 10px; font-size: 13px; color: var(--nav-fg-2); white-space: nowrap; border-radius: 999px; transition: color .2s, background-color .2s; }
.localnav__links a:hover, .localnav__links a.is-active { color: var(--nav-fg); }
.localnav__links a.is-active { background: rgba(127, 127, 127, .14); }
.localnav .btn { flex: none; }
@media (max-width: 720px) { .localnav__title { display: none; } .localnav__links { margin-left: 0; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } .localnav .btn { display: none; } }

/* ---------- Hero (always dark: text sits on photography) ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--fg); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; will-change: transform; transform: scale(calc(1.08 - var(--p, 0) * .06)) translateY(calc(var(--p, 0) * 6%)); transform-origin: 70% 40%; }
.hero__media img, .hero__media .ph { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 70% 50%); }
.hero__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(var(--ink-rgb), .94) 0%, rgba(var(--ink-rgb), .8) 38%, rgba(var(--ink-rgb), .22) 66%, rgba(var(--ink-rgb), 0) 100%),
  linear-gradient(0deg, rgba(var(--ink-rgb), 1) 0%, rgba(var(--ink-rgb), 0) 32%); }
.hero--right .hero__shade { background:
  linear-gradient(270deg, rgba(var(--ink-rgb), .95) 0%, rgba(var(--ink-rgb), .84) 40%, rgba(var(--ink-rgb), .3) 68%, rgba(var(--ink-rgb), 0) 100%),
  linear-gradient(0deg, rgba(var(--ink-rgb), 1) 0%, rgba(var(--ink-rgb), 0) 32%); }
.hero__content { min-height: min(92svh, 920px); display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 72px); padding-bottom: 72px; opacity: calc(1 - var(--p, 0) * 1.6); transform: translateY(calc(var(--p, 0) * -40px)); }
.hero__content > * { max-width: 760px; }
.hero__content > h1 { max-width: min(960px, 100%); }
.hero--right .hero__content { align-items: flex-end; text-align: right; }
.hero--right .hero__content .cta-row { justify-content: flex-end; }
.hero--page .hero__content { min-height: min(78svh, 760px); }
.hero .lead { max-width: 40ch; color: rgba(244, 247, 251, .82); }
.hero__content .eyebrow { margin-bottom: 0; }
@media (max-width: 760px) {
  .hero__media { transform-origin: 60% 30%; }
  .hero__media img, .hero__media .ph { object-position: var(--focus-m, var(--focus, 72% 50%)); }
  .hero__shade, .hero--right .hero__shade { background: linear-gradient(0deg, rgba(var(--ink-rgb), 1) 0%, rgba(var(--ink-rgb), .9) 34%, rgba(var(--ink-rgb), .35) 62%, rgba(var(--ink-rgb), .15) 100%); }
  .hero__content, .hero--page .hero__content { min-height: min(100svh, 860px); justify-content: flex-end; padding-bottom: 48px; }
  .hero--right .hero__content { align-items: flex-start; text-align: left; }
  .hero--right .hero__content .cta-row { justify-content: flex-start; }
}
.hero--plain { background: radial-gradient(1200px 520px at 75% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%), radial-gradient(900px 480px at 0% 110%, color-mix(in srgb, var(--brand-2) 10%, transparent), transparent 60%), var(--ink); }
.hero--plain .hero__content { min-height: auto; padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(96px, 14vw, 180px)); padding-bottom: clamp(72px, 9vw, 128px); }

/* Trust strip */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.trust li { padding: 26px 18px 30px 0; display: grid; gap: 4px; }
.trust strong { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 700; font-variant-numeric: tabular-nums; }
.trust span { font-size: 14px; color: var(--fg-2); max-width: 22ch; line-height: 1.4; }
@media (min-width: 900px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } .trust li { padding-right: 28px; } .trust li + li { padding-left: 28px; border-left: 1px solid var(--line); } }
@media (max-width: 899px) { .trust li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); } .trust li:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------- Media frames & placeholders ---------- */
.frame { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--ink-3); isolation: isolate; }
.frame img, .frame .ph { width: 100%; height: 100%; object-fit: cover; }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--3x2 { aspect-ratio: 3 / 2; }
.frame--4x3 { aspect-ratio: 4 / 3; }
.frame--1x1 { aspect-ratio: 1; }
.frame--21x9 { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .frame--21x9 { aspect-ratio: 16 / 10; } .frame { border-radius: var(--r-lg); } }
.frame--zoom img { transition: transform 1.2s var(--ease); }
a:hover .frame--zoom img, .frame--zoom:hover img { transform: scale(1.04); }
.ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 160px; background:
  radial-gradient(120% 90% at 80% 10%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 55%),
  radial-gradient(90% 80% at 10% 100%, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 60%),
  linear-gradient(160deg, #0F2742 0%, #081626 100%); color: rgba(255, 255, 255, .55); overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(circle at 60% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(circle at 60% 40%, #000 0%, transparent 75%); }
.ph svg { position: relative; width: 44px; height: 44px; stroke-width: 1.25; }
.scale-in { transform: scale(calc(.9 + var(--p, 1) * .1)); transform-origin: 50% 0; will-change: transform; }

/* ---------- Statement (scroll-lit words) ---------- */
.statement { font-size: clamp(32px, 4.6vw, 64px); line-height: 1.12; letter-spacing: var(--h-ls); font-weight: var(--h-w); text-wrap: balance; max-width: 22ch; }
.statement .w { color: var(--fg-4); transition: color .5s var(--ease); }
.statement .w.is-lit { color: var(--fg); }
.statement .w.hl.is-lit { color: var(--accent); }
.no-js .statement .w, .reduce .statement .w { color: inherit; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid > * { min-width: 0; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3.grid-3--sm2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: clamp(36px, 6vw, 96px); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--rev > :first-child { order: 2; } .split--wide-text { grid-template-columns: .9fr 1.1fr; } }
.split__text { display: grid; gap: 22px; align-content: center; }

/* ---------- Product tiles ---------- */
.tile { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; background: var(--card); color: var(--fg); border: 1px solid var(--card-line); transition: transform .6s var(--ease), box-shadow .6s var(--ease); isolation: isolate; }
a.tile:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px var(--hover-shadow); }
.tile__media { aspect-ratio: 1 / .82; overflow: hidden; background: var(--ink-3); }
.tile__media img, .tile__media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
a.tile:hover .tile__media img { transform: scale(1.05); }
.tile__body { display: grid; gap: 10px; padding: 28px 28px 32px; align-content: start; flex: 1; }
.tile__kicker { font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .01em; }
.tile--energy .tile__kicker, .tile--energy .more { color: var(--accent-green); }
.tile__title { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; }
.tile__text { color: var(--fg-2); font-size: 16px; line-height: 1.5; }
.tile .more { margin-top: auto; padding-top: 8px; }

/* Feature cards */
.card { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--card-line); color: var(--fg); transition: transform .5s var(--ease), border-color .3s; }
.card p { color: var(--fg-2); font-size: 16px; line-height: 1.55; }
.card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--icon-bg); color: var(--accent); margin-bottom: 6px; }
.card__icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.card--green .card__icon { background: var(--icon-bg-green); color: var(--accent-green); }
.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { display: grid; gap: 10px; padding: 24px 26px 28px; }
.card--media .frame { border-radius: 0; }
a.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }

/* Bento */
.bento { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: 1fr; }
.bento > * { min-width: 0; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(6, 1fr); } .bento .b-2 { grid-column: span 2; } .bento .b-3 { grid-column: span 3; } .bento .b-4 { grid-column: span 4; } .bento .b-6 { grid-column: span 6; } }
.bento .card { height: 100%; }
.big-num { font-size: clamp(44px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.05em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.big-num small { font-size: .45em; letter-spacing: -0.02em; font-weight: 650; margin-left: 2px; }

/* ---------- Carousel (6S) ---------- */
.carousel { position: relative; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 380px); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2)); padding: 8px max(var(--gutter), calc((100vw - var(--max)) / 2)) 28px; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__controls { display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer; background: rgba(127, 140, 160, .18); color: inherit; transition: background-color .25s, opacity .25s; }
.icon-btn:hover { background: rgba(127, 140, 160, .3); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn svg { width: 20px; height: 20px; }
.s-card { position: relative; min-height: 440px; padding: 34px 30px; border-radius: var(--r-xl); background: linear-gradient(170deg, var(--ink-3) 0%, var(--ink-2) 100%); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; overflow: hidden; isolation: isolate; color: var(--fg); }
.s-card::after { content: ""; position: absolute; z-index: -1; width: 280px; height: 280px; right: -90px; bottom: -110px; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent), transparent 65%); transition: transform .9s var(--ease); }
.s-card:hover::after { transform: scale(1.25); }
.s-card__letter { font-size: 15px; font-weight: 600; color: var(--brand); }
.s-card__title { font-size: clamp(34px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; }
.s-card p { color: var(--fg-2); font-size: 17px; line-height: 1.5; }
.s-card__icon { margin-top: auto; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }
.s-card__icon svg { width: 30px; height: 30px; stroke-width: 1.5; }
.s-card--green::after { background: radial-gradient(circle, color-mix(in srgb, var(--brand-2) 30%, transparent), transparent 65%); }
.s-card--green .s-card__icon { color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 10%, transparent); }

/* ---------- Marquee & chips ---------- */
.marquee { --gap: 14px; display: grid; gap: var(--gap); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__row { display: flex; gap: var(--gap); width: max-content; animation: marquee var(--dur, 48s) linear infinite; }
.marquee__row--rev { animation-direction: reverse; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--line); color: var(--fg); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; }
.chip svg { width: 20px; height: 20px; color: var(--accent); stroke-width: 1.75; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips .chip { font-size: 15px; padding: 10px 16px; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

/* ---------- Spec table ---------- */
.specs { border-top: 1px solid var(--line); }
.specs__row { display: grid; grid-template-columns: 1fr; gap: 4px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.specs__row dt { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); padding-top: 4px; }
.specs__row dd { font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; }
@media (min-width: 760px) { .specs__row { grid-template-columns: 260px 1fr; } }

/* ---------- Sticky story ---------- */
.story { display: grid; gap: 48px; }
.story > * { min-width: 0; }
.story__media { position: relative; display: none; }
.story__stage { position: sticky; top: calc(var(--nav-h) + 52px + 40px); aspect-ratio: 1; border-radius: var(--r-xl); overflow: hidden; background: var(--ink-3); }
.story__stage figure { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease), transform 1.2s var(--ease); }
.story__stage figure.is-active { opacity: 1; transform: none; }
.story__stage img, .story__stage .ph { width: 100%; height: 100%; object-fit: cover; }
.story__steps { display: grid; gap: 0; }
.story__step { padding: 30px 0; border-top: 1px solid var(--line); display: grid; gap: 12px; transition: opacity .5s var(--ease); }
.story__step .frame { margin-bottom: 8px; }
.story__step h3 { display: flex; align-items: center; gap: 12px; }
.story__step h3 svg { width: 24px; height: 24px; color: var(--accent); flex: none; stroke-width: 1.75; }
.story__step p { color: var(--fg-2); max-width: 48ch; }
@media (min-width: 960px) {
  .story { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .story__media { display: block; height: 100%; }
  .story__step { min-height: 62vh; align-content: center; opacity: .35; border-top: 0; padding: 0; }
  .story__step.is-active { opacity: 1; }
  .story__step .frame { display: none; }
}

/* ---------- Steps ---------- */
.steps { display: grid; gap: 16px; }
.steps > * { min-width: 0; }
@media (min-width: 860px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 30px 28px 32px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--card-line); display: grid; gap: 10px; align-content: start; }
.step__n { font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: .04em; }
.step__title { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.step p { color: var(--fg-2); font-size: 16px; }
.step__bar { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform-origin: left; transform: scaleX(.18); transition: transform 1.2s var(--ease); margin-bottom: 8px; }
.is-in .step__bar, .no-js .step__bar { transform: scaleX(1); }

/* ---------- Lists ---------- */
.ticks { display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 17px; line-height: 1.5; }
.ticks li svg { width: 20px; height: 20px; margin-top: 3px; color: var(--accent); stroke-width: 2; }
.ticks--green li svg { color: var(--accent-green); }
.dep { display: grid; gap: 0; border-top: 1px solid var(--line); }
.dep li { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; }
.dep li svg { width: 26px; height: 26px; color: var(--danger); stroke-width: 1.6; }

/* ---------- Quote ---------- */
.quote { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.15; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; max-width: 24ch; }
.quote::before { content: "\201C"; color: var(--accent); margin-right: .04em; }
.quote::after { content: "\201D"; color: var(--accent); margin-left: .02em; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.stats > div { padding: 28px 20px 28px 0; display: grid; gap: 6px; align-content: start; border-top: 1px solid var(--line); }
.stats .big-num { font-size: clamp(40px, 4.8vw, 68px); }
.stats p { color: var(--fg-2); font-size: 15px; line-height: 1.45; max-width: 26ch; }
@media (min-width: 900px) { .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats--5 .big-num { font-size: clamp(38px, 3.7vw, 54px); } }
.c-green { color: var(--accent-green); }
.c-cyan { color: var(--accent); }
.c-amber { color: var(--amber); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; font-size: clamp(19px, 1.7vw, 23px); font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq__i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(127, 140, 160, .14); transition: transform .45s var(--ease), background-color .25s; }
.faq summary .faq__i svg { width: 16px; height: 16px; }
.faq details[open] summary .faq__i { transform: rotate(45deg); background: color-mix(in srgb, var(--brand) 18%, transparent); }
.faq__a { padding: 0 56px 28px 0; color: var(--fg-2); font-size: 17px; line-height: 1.6; max-width: 70ch; }
.faq details[open] .faq__a { animation: faq-in .5s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- CTA band (always dark) ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: var(--fg); background: var(--ink); }
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img, .cta-band__media .ph { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 80% at 50% 50%, rgba(var(--ink-rgb), .55), rgba(var(--ink-rgb), .88)); }
.cta-band .wrap { display: grid; justify-items: center; gap: 22px; padding-block: clamp(110px, 14vw, 200px); }
.cta-band .lead { color: rgba(244, 247, 251, .82); }
.cta-band--energy::after { background: radial-gradient(70% 80% at 50% 50%, rgba(4, 20, 14, .45), rgba(var(--ink-rgb), .86)); }

/* ---------- Partners ---------- */
.partners { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.partners a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--line); font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -0.04em; color: var(--fg); transition: color .25s, padding .45s var(--ease), transform .45s var(--ease); }
.partners a span.mono { font-size: 14px; font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
.partners a:hover { color: var(--accent); padding-left: 10px; }
@media (min-width: 860px) { .partners { grid-template-columns: repeat(3, 1fr); border-top: 0; gap: 20px; } .partners a { flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 200px; padding: 28px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); } .partners a:hover { padding-left: 28px; transform: translateY(-4px); } }

/* ---------- Team ---------- */
.person { display: grid; gap: 14px; align-content: start; }
.avatar { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; background: radial-gradient(90% 70% at 70% 15%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 60%), linear-gradient(160deg, var(--ink-3) 0%, var(--ink-2) 100%); color: #F4F7FB; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar span { position: relative; font-size: clamp(44px, 5vw, 64px); font-weight: 700; letter-spacing: -0.05em; color: rgba(255, 255, 255, .92); }
.person__role { color: var(--accent); font-weight: 600; font-size: 15px; }
.person p { color: var(--fg-2); font-size: 15px; line-height: 1.55; }
.person a.more { font-size: 15px; }

/* ---------- Locations ---------- */
.loc { display: grid; gap: 0; }
.loc .frame { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.loc__body { padding: 20px 22px 24px; background: var(--card); border: 1px solid var(--card-line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); display: grid; gap: 4px; }
.loc__tag { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.loc__body p { color: var(--fg-2); font-size: 15px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; color: var(--fg); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 14px 16px; font: inherit; font-size: 17px; color: var(--fg); background: var(--field-bg); border: 1px solid var(--line-strong); border-radius: 14px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237D8FA6' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field select option { color: #0A1626; background: #FFFFFF; }
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
.field .hint { font-size: 13px; color: var(--fg-3); }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.field .err { font-size: 13px; color: var(--danger); display: none; }
.field.has-error .err { display: block; }
.form-note { padding: 18px 20px; border-radius: 14px; background: var(--note-bg); color: var(--note-fg); font-size: 15px; line-height: 1.5; }
.form-panel { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--card-line); box-shadow: 0 40px 80px -50px rgba(var(--ink-rgb), .35); }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--seg-bg); margin-bottom: 26px; flex-wrap: wrap; }
.seg button { min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--fg-2); transition: background-color .25s, color .25s, box-shadow .25s; }
.seg button[aria-selected="true"] { background: var(--panel-raised); color: var(--fg); box-shadow: 0 2px 10px rgba(var(--ink-rgb), .14); }
.contact-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.contact-list .ci { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--icon-bg); color: var(--accent); }
.contact-list .ci svg { width: 20px; height: 20px; }
.contact-list small { display: block; font-size: 13px; color: var(--fg-3); margin-bottom: 2px; }
.contact-list b { font-weight: 600; font-size: 17px; user-select: all; -webkit-user-select: all; }
.copy { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.copy:hover { background: var(--icon-bg); }

/* ---------- Industries ---------- */
.ind { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3.4; isolation: isolate; color: var(--fg); display: flex; align-items: flex-end; background: var(--ink-3); }
.ind img, .ind .ph { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ind::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(var(--ink-rgb), .95) 0%, rgba(var(--ink-rgb), .45) 45%, rgba(var(--ink-rgb), 0) 75%); }
.ind:hover img { transform: scale(1.05); }
.ind__body { padding: 24px; display: grid; gap: 6px; }
.ind__body h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }
.ind__body p { font-size: 15px; color: rgba(244, 247, 251, .8); line-height: 1.45; }
.ind-grid { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: 1fr; }
.ind-grid > * { min-width: 0; }
@media (min-width: 640px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } .ind--feature { grid-column: span 2; aspect-ratio: 16 / 9; } }
@media (min-width: 1040px) { .ind-grid { grid-template-columns: repeat(4, 1fr); } .ind--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .ind--feature .ind__body h3 { font-size: 32px; } .ind--feature .ind__body p { font-size: 17px; } }

/* ---------- Articles & resources ---------- */
.res__meta { font-size: 13px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em; }
.feature-article { display: grid; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--ink-2); color: var(--fg); }
.feature-article .frame { border-radius: 0; }
.feature-article__body { padding: clamp(28px, 4vw, 56px); display: grid; gap: 16px; align-content: center; }
.feature-article__body p { color: var(--fg-2); }
@media (min-width: 900px) { .feature-article { grid-template-columns: 1.2fr 1fr; } .feature-article .frame { height: 100%; aspect-ratio: auto; min-height: 420px; } }

/* ---------- Before / After ---------- */
.ba { display: grid; gap: 18px; }
@media (min-width: 860px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba figure { display: grid; gap: 14px; }
.ba figcaption { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; }
.pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pill--red { background: rgba(239, 68, 68, .14); color: var(--pill-red); }
.pill--green { background: color-mix(in srgb, var(--brand-2) 16%, transparent); color: var(--pill-green); }

/* ---------- Values & team grids ---------- */
.values, .team { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: 1fr; }
.values > *, .team > * { min-width: 0; }
.value { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--card-line); }
.value p { color: var(--fg-2); font-size: 16px; }
.value__art { width: 84px; height: 84px; border-radius: 22px; overflow: hidden; background: #FFFFFF; margin-bottom: 6px; box-shadow: 0 10px 30px -18px rgba(var(--ink-rgb), .4); }
.value__art img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) and (max-width: 1039px) {
  .values, .team { grid-template-columns: repeat(6, 1fr); }
  .values > :nth-child(-n+2), .team > :nth-child(n+4) { grid-column: span 3; }
  .values > :nth-child(n+3), .team > :nth-child(-n+3) { grid-column: span 2; }
}
@media (min-width: 1040px) { .values, .team { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 639px) {
  .person { grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
  .person .avatar span { font-size: 30px; }
  .person .avatar { border-radius: 20px; }
}

/* ---------- Rack-unit gauge (MDC) ---------- */
.rack { display: grid; grid-template-columns: 56px auto; gap: 14px; margin-top: 18px; align-items: stretch; }
.rack__col { display: grid; grid-template-rows: repeat(45, 1fr); gap: 2px; height: 230px; padding: 8px; border-radius: 10px; background: var(--ink); }
.rack__col span { border-radius: 1px; background: rgba(255, 255, 255, .08); }
.rack__col span.is-base { background: var(--brand); opacity: .9; }
.rack__col span.is-mid { background: color-mix(in srgb, var(--brand) 38%, transparent); }
.rack__col span.is-top { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.rack__labels { position: relative; height: 230px; font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.rack__labels span { position: absolute; left: 0; top: calc(8px + var(--at) * 214px); transform: translateY(-50%); white-space: nowrap; }
.rack__labels span::before { content: ""; display: inline-block; width: 10px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 6px; opacity: .6; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-2); color: var(--fg-2); font-size: 13px; line-height: 1.5; padding-top: 56px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.footer__top { display: grid; gap: 28px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .footer__top { grid-template-columns: 1.3fr repeat(5, 1fr); gap: 24px; } }
.footer .logo { color: var(--fg); }
.footer__brand p { margin-top: 12px; max-width: 30ch; }
.footer__brand strong { color: var(--fg); }
.footer h4 { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 10px; }
.footer ul li { padding: 3px 0; }
.footer a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; padding-top: 20px; }
.footer__bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 899px) {
  .footer__desk, .footer__col h4 { display: none; }
  .footer__col { border-bottom: 1px solid var(--line); }
  .footer__col details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--fg); cursor: pointer; }
  .footer__col details summary::-webkit-details-marker { display: none; }
  .footer__col details summary svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
  .footer__col details[open] summary svg { transform: rotate(45deg); }
  .footer__col ul { padding-bottom: 12px; }
  .footer__top { gap: 0; }
  .footer__brand { padding-bottom: 20px; }
}
@media (min-width: 900px) { .footer__col details { display: none; } }

/* Floating WhatsApp */
.fab { position: fixed; z-index: 80; right: max(18px, calc(env(safe-area-inset-right, 0px) + 12px)); bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 12px)); display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 18px 10px 14px; border-radius: 999px; background: rgba(var(--ink-rgb), .88); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); color: #FFFFFF; font-size: 15px; font-weight: 600; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); transition: transform .45s var(--ease), opacity .3s; }
.fab svg { width: 22px; height: 22px; color: #25D366; }
.fab:hover { transform: translateY(-2px); }
.fab.is-hidden { transform: translateY(140%); opacity: 0; }
@media (max-width: 520px) { .fab span { display: none; } .fab { padding: 14px; } }

/* ---------- Reveal motion ---------- */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Utilities ---------- */
.stack-xs > * + * { margin-top: 8px; }
.stack-sm > * + * { margin-top: 14px; }
.stack > * + * { margin-top: 22px; }
.mt-lg { margin-top: clamp(48px, 6vw, 88px); }
.mt-md { margin-top: clamp(28px, 3.4vw, 44px); }
.kbd-note { font-size: 13px; color: var(--fg-3); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero__media, .hero__content, .scale-in { transform: none !important; opacity: 1 !important; }
  .marquee__row { animation: none; flex-wrap: wrap; width: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__row [aria-hidden="true"] { display: none; }
}

/* ---------- Design style switcher (Apple / AWS / Google Cloud) ---------- */
.style-dock { position: fixed; z-index: 85; left: max(16px, calc(env(safe-area-inset-left, 0px) + 12px)); bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 12px)); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(var(--ink-rgb), .86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); color: #FFFFFF; font-family: var(--font); }
.style-dock__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .6); padding: 0 8px 0 10px; }
.style-dock button { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s; white-space: nowrap; }
.style-dock button:hover { color: #FFFFFF; background: rgba(255, 255, 255, .1); }
.style-dock button[aria-pressed="true"] { background: var(--brand); color: var(--brand-fg); }
.style-dock .short { display: none; }
@media (max-width: 560px) { .style-dock__label, .style-dock .long { display: none; } .style-dock .short { display: inline; } .style-dock button { padding: 6px 12px; } }

/* Google Cloud style: Google Sans reads best a touch lighter with softer tracking */
:root[data-style="gcp"] .tile__title, :root[data-style="gcp"] .s-card__title, :root[data-style="gcp"] .step__title,
:root[data-style="gcp"] .big-num, :root[data-style="gcp"] .trust strong, :root[data-style="gcp"] .quote, :root[data-style="gcp"] .partners a { font-weight: 500; letter-spacing: -0.02em; }
:root[data-style="gcp"] .h3, :root[data-style="gcp"] .h4, :root[data-style="gcp"] .faq summary, :root[data-style="gcp"] .logo { font-weight: 500; }
:root[data-style="gcp"] .btn, :root[data-style="gcp"] .nav__link, :root[data-style="gcp"] .eyebrow { font-weight: 500; letter-spacing: .005em; }
:root[data-style="gcp"] .lead { font-weight: 400; }

/* ---------- Brand logo (light / dark variants) ---------- */
.logo__img { display: block; height: 46px; width: auto; }
.logo__img--dark { display: none; }
.footer .logo__img { height: 52px; }
:root[data-theme="dark"] .logo__img--light, :root[data-style="aws"] .nav .logo__img--light { display: none; }
:root[data-theme="dark"] .logo__img--dark, :root[data-style="aws"] .nav .logo__img--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo__img--light { display: none; }
  :root:not([data-theme="light"]) .logo__img--dark { display: block; }
}
@media (max-width: 400px) { .nav .logo__img { height: 40px; } }

/* ---------- Strategic advisors ---------- */
.advisors { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; }
.advisors > * { min-width: 0; }
@media (min-width: 900px) { .advisors { grid-template-columns: 1fr 1fr; } }
.advisor { display: grid; grid-template-columns: 1fr; gap: 22px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--card-line); align-items: start; }
@media (min-width: 560px) { .advisor { grid-template-columns: 168px 1fr; } }
.advisor__photo { width: 100%; max-width: 220px; }
.advisor__photo img { object-position: 50% 20%; }
.advisor__bio { color: var(--fg-2); font-size: 16px; line-height: 1.6; }

/* Team of three: three equal columns from tablet up */
@media (min-width: 640px) {
  .team { grid-template-columns: repeat(3, 1fr); }
  .team > :nth-child(n) { grid-column: auto; }
}
@media (min-width: 640px) { .team .avatar { max-width: 260px; } }