/* ==========================================================================
   SyncMacro C-UAS — website
   Design system: IBM Plex Sans, 10px rem scale, black canvas,
   #1019ec electric blue, hairline surfaces, 3.2rem frames.
   ========================================================================== */

/* ---------- Reset ---------- */
a, abbr, address, article, aside, b, blockquote, body, button, canvas, caption,
cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, input, ins, kbd, label, legend, li, main, mark, menu, nav, ol,
output, p, pre, q, s, samp, section, small, span, strong, sub, summary, sup,
table, tbody, td, tfoot, th, thead, time, tr, u, ul, var, video {
  vertical-align: baseline;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
  touch-action: manipulation;
  font-size: 100%;
  font: inherit;
  font-weight: inherit;
}
*, :after, :before { box-sizing: border-box; }
ol, ul { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { -webkit-user-drag: none; user-select: none; }
a { touch-action: manipulation; color: inherit; text-decoration: inherit; }
a *, button * { pointer-events: none; }
button, input, select, textarea {
  margin: 0; background: inherit; padding: 0; color: inherit;
  font: inherit; line-height: inherit; letter-spacing: inherit;
  text-transform: inherit;
}
button { appearance: none; cursor: pointer; border: none; }
* { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }

/* ---------- Fonts ---------- */
/* IBM Plex Sans — SIL Open Font License 1.1, see ../fonts/LICENSE-IBMPlex.txt.
   Latin and Cyrillic ship as a single variable file per subset covering the whole
   weight range, so 300 and 400 resolve from the same download. Arabic and Hebrew
   are static per weight and are scoped to those locales by unicode-range. */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700;
  src: url(../fonts/IBMPlexSans-latin.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700;
  src: url(../fonts/IBMPlexSans-latin-ext.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700;
  src: url(../fonts/IBMPlexSans-cyrillic.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300;
  src: url(../fonts/IBMPlexSansArabic-Light.woff2) format("woff2");
  font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  src: url(../fonts/IBMPlexSansArabic-Regular.woff2) format("woff2");
  font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300;
  src: url(../fonts/IBMPlexSansHebrew-Light.woff2) format("woff2");
  font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  src: url(../fonts/IBMPlexSansHebrew-Regular.woff2) format("woff2");
  font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* ---------- Root tokens ---------- */
:root {
  --blue: #1019ec;
  --accent: #388cff;
  --green: #0ae77a;
  --threat: #ff5f56;
  --line: hsla(0, 0%, 100%, .1);
  --line-strong: hsla(0, 0%, 100%, .2);
  --muted: #ffffff80;
  --surface-05: #ffffff0d;
  --surface-06: #ffffff0f;
  --surface-10: #ffffff1a;
  --surface-20: #fff3;
  --frame-dark: #0d0d0d;
  --frame-gray: #1a1a1a;
  --r-frame: 3.2rem;
  --r-panel: 2.4rem;
  --r-card: 2rem;
  --r-chip: 1.6rem;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-springy: cubic-bezier(.19, 1, .22, 1);
  --ease-slide: cubic-bezier(.25, .46, .45, .94);
}

html {
  box-sizing: border-box;
  overflow-x: clip;
  overflow-y: scroll;
  font-size: 62.5%;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  scroll-behavior: smooth;
}
body, html {
  margin: 0; background-color: #000; padding: 0;
  width: 100%; height: auto; min-height: 100svh; color: #fff;
}
body {
  overflow-x: clip;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.26;
  letter-spacing: 0;
  text-wrap: pretty;
}
body ::selection { background-color: #1019ec; color: #fff; }
body [tabindex]:focus-visible, body a:focus-visible, body button:focus-visible,
body input:focus-visible {
  outline: 2px solid #388cff !important;
  outline-offset: 0;
}

/* ---------- Type scale (verbatim from template) ---------- */
h1, .h1 { font-weight: 400; font-size: 3rem; line-height: 1.1; letter-spacing: -.02em; }
h2, .h2 { font-weight: 400; font-size: 2.4rem; line-height: 1.1; letter-spacing: -.01em; }
h3, .h3 { font-weight: 400; font-size: 2rem; line-height: 1.2; letter-spacing: -.01em; }
.body-l { font-weight: 400; font-size: 1.8rem; line-height: 1.2; }
.body-m { font-weight: 400; font-size: 1.4rem; line-height: 1.26; }
.body-s { font-weight: 400; font-size: 1.2rem; line-height: 1.26; }
.caption {
  font-weight: 400; font-size: 1.2rem; line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase;
}
.caption-s {
  font-weight: 300; font-size: .8rem; line-height: 1.3;
  letter-spacing: .18em; text-transform: uppercase;
  font-feature-settings: "ss01" 1;
}
.annotation { font-weight: 300; font-size: 1rem; line-height: 1.3; font-feature-settings: "ss01" 1; }
.annotation-s { font-weight: 300; font-size: .8rem; line-height: 1.3; font-feature-settings: "ss01" 1; }

/* ---------- Containers & spacing ---------- */
.c-md {
  margin-right: auto; margin-left: auto;
  width: calc(min(100vw, 144rem) / 12 * 10 - 7rem);
}
.c-lg {
  margin-right: auto; margin-left: auto;
  width: calc(min(100vw, 144rem) * 1 - 8rem);
}
@media (max-width: 767px) {
  .c-md, .c-lg { width: calc(100% - 4rem); }
}
.c-scroll {
  box-sizing: border-box;
  padding-right: calc(50% - min(100vw, 144rem) / 12 * 10 / 2 + 3.5rem);
  padding-left: calc(50% - min(100vw, 144rem) / 12 * 10 / 2 + 3.5rem);
  scroll-padding-left: calc(50% - min(100vw, 144rem) / 12 * 10 / 2 + 3.5rem);
  scroll-padding-right: calc(50% - min(100vw, 144rem) / 12 * 10 / 2 + 3.5rem);
}
@media (max-width: 767px) {
  .c-scroll { padding-right: 2rem; padding-left: 2rem; scroll-padding-left: 2rem; scroll-padding-right: 2rem; }
}
.p-s { padding-top: 14rem; padding-bottom: 10rem; }
@media (max-width: 767px) { .p-s { padding-top: 8rem; padding-bottom: 6rem; } }

/* ---------- Shared pieces ---------- */
.split-title span { display: block; }
.split-title .muted { color: var(--muted); }

.section-heading {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 4rem;
}
.section-heading .split-title {
  width: calc(min(100vw, 144rem) / 12 * 5 - 4rem);
  font-size: 3rem; line-height: 1.1; letter-spacing: -.02em;
}
.cases .header .split-title { font-size: 3rem; line-height: 1.1; letter-spacing: -.02em; }
.section-heading .side {
  width: calc(min(100vw, 144rem) / 12 * 4 - 4rem);
  font-size: 1.8rem; line-height: 1.2;
}
@media (max-width: 767px) {
  .section-heading { flex-direction: column; gap: 2.4rem; }
  .section-heading .split-title, .section-heading .side { width: 100%; }
}

.button {
  position: relative;
  display: inline-flex; justify-content: center; align-items: center;
  gap: 1.2rem;
  border-radius: 100px; padding: 1.6rem 3.2rem;
  font-weight: 400; font-size: 1.4rem; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
  transition: transform .4s var(--ease-springy), opacity .2s var(--ease);
}
.button.light { background: #fff; color: #000; }
.button.glass {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background-color: var(--surface-10); color: #fff;
}
@media (hover: hover) { .button:hover { transform: scale(1.025); } }
.button:active { transform: scale(.975); }

.tag {
  display: inline-flex; justify-content: center; align-items: center;
  border-radius: 100px; padding: 1rem; width: fit-content;
  font-weight: 400; font-size: 1.2rem; line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase;
}
.tag.light {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background-color: var(--surface-10); color: #fff;
}
@media (hover: hover) { .tag:is(a, button):hover { opacity: .7; } }
.tag:is(a, button):active { transform: scale(.975); }

.rounded-button {
  position: relative; display: flex; justify-content: center; align-items: center;
  width: 4.2rem; height: 4.2rem; color: #fff;
  transition: transform .5s var(--ease-springy), opacity .2s var(--ease);
}
.rounded-button .inner {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--surface-10);
  transition: transform .5s var(--ease-springy);
}
.rounded-button svg { position: relative; width: 1.3125rem; height: 1.3125rem; }
.rounded-button.prev { rotate: 180deg; }
.rounded-button:disabled { opacity: .25; cursor: default; }
@media (hover: hover) { .rounded-button:not(:disabled):hover .inner { transform: scale(1.075); } }
.rounded-button:not(:disabled):active { transform: scale(.95); }

/* ---------- Screen-reader only ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed; top: -100%; left: 2rem; z-index: 10;
  border-radius: 100px; background: #fff; color: #000;
  padding: 1.2rem 1.8rem; font-size: 1.2rem;
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 2rem; }

/* ==========================================================================
   Floating pill nav
   ========================================================================== */
.menu { position: relative; z-index: 5; }
.menu .overlay {
  display: block; position: fixed; opacity: 0; z-index: 3;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .5s cubic-bezier(.445, .05, .55, .95);
  inset: 0; background-color: #0000004d; pointer-events: none;
}
.menu.open .overlay { opacity: 1; pointer-events: auto; }
.menu .panel {
  --panel-radius: 1.6rem;
  display: flex; position: fixed; top: 4rem; right: 0; left: 0;
  flex-direction: column; transform-origin: top center; z-index: 4;
  margin: auto; padding: 2rem; width: 30rem; max-width: calc(100vw - 4rem);
  max-height: calc(100dvh - 6rem); pointer-events: none; color: #fff;
  transition: opacity .4s cubic-bezier(.25, .46, .45, .94);
}
.menu.hidden .panel, html.intro .menu .panel { opacity: 0; pointer-events: none; }
.menu.hidden .panel .bar, html.intro .menu .panel .bar { pointer-events: none; }
.menu .panel-surface {
  position: absolute; top: 1rem; left: .8rem;
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border-radius: 1.6rem; width: calc(100% - 1.6rem); height: 6.2rem;
  overflow: hidden; pointer-events: none;
  transition: top .4s var(--ease-springy), left .4s var(--ease-springy),
    width .4s var(--ease-springy), height .4s var(--ease-springy),
    border-radius .4s var(--ease-springy);
}
.menu.open .panel-surface {
  top: 0; left: 0; border-radius: var(--panel-radius);
  width: 100%; height: 100%;
}
.menu .panel-tint {
  position: absolute; inset: 0; border-radius: inherit;
  background-color: #1a1a1ae6; opacity: .78; pointer-events: none;
  transition: opacity .3s linear;
}
.menu.open .panel-tint { opacity: .65; }
.menu .bar {
  display: flex; position: relative; flex-shrink: 0;
  justify-content: space-between; align-items: center; pointer-events: auto;
}
.menu .bar .logo {
  display: flex; align-items: center; gap: .9rem; margin-left: .6rem;
  transition: opacity .2s cubic-bezier(.445, .05, .55, .95);
}
@media (hover: hover) { .menu .bar .logo:hover { opacity: .7; } }
.logo .mark { width: auto; height: 1.9rem; }
.logo .wordmark { font-size: 1.8rem; letter-spacing: .01em; font-weight: 400; }
.menu .toggle {
  display: flex; position: relative; justify-content: center; align-items: center;
  transition: opacity .2s cubic-bezier(.445, .05, .55, .95);
  width: 4.2rem; height: 4.2rem; color: inherit;
}
.menu .toggle:before {
  position: absolute; top: 0; left: 0; opacity: 0; border-radius: 50%;
  background-color: var(--surface-10); width: 100%; height: 100%; content: "";
  transition: opacity .3s var(--ease);
}
.menu.open .toggle:before { opacity: 1; }
@media (hover: hover) { .menu .toggle:hover { opacity: .7; } }
.menu .toggle:active { transform: scale(.95); }
.menu .toggle .bars {
  display: flex; flex-direction: column; gap: 6px; width: 2.7rem;
  transition: width .3s var(--ease);
}
.menu .toggle .bars span {
  transform: scaleY(.5); transform-origin: center;
  background-color: currentColor; width: 100%; height: 2px;
  transition: transform .3s var(--ease);
}
.menu.open .toggle .bars { width: 1.6rem; }
.menu.open .toggle .bars span:first-child { transform: translateY(4px) rotate(45deg) scaleY(.5); }
.menu.open .toggle .bars span:last-child { transform: translateY(-4px) rotate(-45deg) scaleY(.5); }
.menu .content {
  display: flex; position: relative; flex-direction: column; gap: 3rem;
  visibility: hidden; opacity: 0;
  transition: visibility 0s linear .15s, opacity .15s linear;
  padding-top: 4rem; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; pointer-events: none; scrollbar-width: none;
}
.menu.open .content {
  visibility: visible; opacity: 1; transition-delay: 0s; pointer-events: auto;
}
.menu .links { margin: 0; border-bottom: 1px solid var(--line); width: 100%; }
.menu .links li { border-top: 1px solid var(--line); }
.menu .links a {
  display: flex; justify-content: space-between; align-items: center;
  transition: opacity .3s; padding: 1.2rem 0; color: #fff;
  font-size: 1.8rem; line-height: 1.2;
}
.menu .links a .arrow { display: block; opacity: 0; transition: opacity .3s; width: 1.2rem; height: 1.2rem; }
@media (hover: hover) {
  .menu .links a:hover .arrow { opacity: 1; }
}
.panel-cta { display: flex; }
.panel-cta .button { flex: 1; }

/* ==========================================================================
   Blue wrapper (hero + problem) with scroll crossfade to black
   ========================================================================== */
.bg-wrapper { position: relative; isolation: isolate; color: #fff; }
.bg-reveal { position: absolute; inset: 0; z-index: -2; background: #000; }
.bg-blue {
  position: absolute; inset: 0; z-index: -1;
  background: #1019ec; will-change: opacity;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  --u: calc(max(100vw, 100svh * 1.42433) / 1440);
  position: relative; isolation: isolate; height: 100svh; color: #fff;
  overflow: clip;
}
/* Fixed orb layer — the page scrolls over it, and it fades to black with
   the blue (the template's canvas behavior). */
.hero-canvas {
  position: fixed; top: 0; left: 0; width: 100%; height: 100svh;
  z-index: 1; pointer-events: none; will-change: opacity;
}
.hero-canvas.off { display: none; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 72% 68% at 50% 48%,
    transparent 34%, rgba(0, 0, 0, .14) 68%, rgba(0, 0, 0, .44) 100%);
}
.hero-noise {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .05; mix-blend-mode: soft-light;
  background-size: 64px 64px; background-repeat: repeat;
}
.portholes {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  animation: clusterDrift 26s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}
@keyframes clusterDrift {
  from { transform: rotate(-.6deg) translate3d(-.4%, .3%, 0); }
  to { transform: rotate(.6deg) translate3d(.4%, -.3%, 0); }
}
.porthole {
  position: absolute;
  transition: scale 2s var(--ease-springy) .98s, opacity 1.2s linear .98s;
}
html.intro .porthole { scale: .0001; opacity: 0; }
.porthole .bob {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  position: relative;
  animation: bob var(--bob-dur, 7s) ease-in-out var(--bob-delay, 0s) infinite;
  box-shadow: 0 0 9rem 1rem rgba(110, 140, 255, .25);
}
.porthole img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  filter: saturate(.85) contrast(1.04);
}
/* lens dome: top-left specular + edge shading */
.porthole .bob:before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%;
  background:
    radial-gradient(85% 70% at 30% 22%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 45%),
    radial-gradient(closest-side, transparent 58%, rgba(10, 14, 90, .18) 82%, rgba(2, 4, 40, .42) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
/* outer halo ring */
.porthole .bob:after {
  content: ""; position: absolute; inset: -9%; border-radius: 50%;
  background: radial-gradient(circle,
    transparent 69%, rgba(190, 205, 255, .24) 75.5%,
    rgba(190, 205, 255, .07) 79%, transparent 83%);
}
/* rotating rim arc highlights (elements injected by JS) */
.porthole .rim {
  position: absolute; inset: 0; z-index: 2; border-radius: 50%; opacity: .85;
  background: conic-gradient(from 0deg,
    transparent 0 8%, rgba(255, 255, 255, .55) 11%, transparent 15%,
    transparent 52%, rgba(255, 255, 255, .26) 58%, transparent 64%);
  -webkit-mask: radial-gradient(closest-side, transparent 93.5%, #000 94.5%);
  mask: radial-gradient(closest-side, transparent 93.5%, #000 94.5%);
  animation: rimSpin var(--rim-dur, 46s) linear infinite;
}
@keyframes rimSpin {
  from { transform: rotate(var(--rim-from, 0deg)); }
  to { transform: rotate(calc(var(--rim-from, 0deg) + 360deg)); }
}
/* the target-lock orb breathes like a live lens */
.ph-1 img { animation: lensZoom 18s ease-in-out infinite alternate; }
@keyframes lensZoom {
  from { transform: scale(1); }
  to { transform: scale(1.055); }
}
/* tactical chips riding on orbs */
.orb-chip {
  position: absolute; right: 2%; bottom: 5%; z-index: 3;
  backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem);
  border-radius: 999px; background: #00000047; color: #fff;
  padding: .7rem 1.3rem; white-space: nowrap;
  font-weight: 300; font-size: .9rem; line-height: 1.3;
  letter-spacing: .16em; text-transform: uppercase;
  font-feature-settings: "ss01" 1;
}
.ph-5 .orb-chip { right: auto; left: 4%; bottom: 12%; }
@media (max-width: 767px) { .orb-chip { display: none; } }
@keyframes bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(calc(var(--sway, 1) * .8rem), -1.6rem, 0); }
}
/* Orb geometry mapped from the template's measured cluster (1440x900) */
.ph-1 { top: 19.5%; left: 35.5%; width: calc(var(--u) * 450); height: calc(var(--u) * 450); --bob-dur: 7.4s; --bob-delay: 0s; --sway: 1; }
.ph-2 { top: -14%; left: 6.2%; width: calc(var(--u) * 420); height: calc(var(--u) * 420); --bob-dur: 8.6s; --bob-delay: -2.3s; --sway: -1; }
.ph-3 { top: -7%; left: 66.5%; width: calc(var(--u) * 273); height: calc(var(--u) * 273); --bob-dur: 6.8s; --bob-delay: -4.1s; --sway: 1; }
.ph-4 { top: 58%; left: 1.6%; width: calc(var(--u) * 305); height: calc(var(--u) * 305); --bob-dur: 9.2s; --bob-delay: -1.4s; --sway: -1; }
.ph-5 { top: 38%; left: 88%; width: calc(var(--u) * 350); height: calc(var(--u) * 350); --bob-dur: 7.9s; --bob-delay: -5.6s; --sway: 1; }
.ph-6 { top: 78%; left: 44%; width: calc(var(--u) * 363); height: calc(var(--u) * 363); --bob-dur: 8.3s; --bob-delay: -3.2s; --sway: -1; }
/* per-image crop focus */
.ph-1 img { object-position: 50% 50%; }
.ph-2 img { object-position: 50% 42%; }
.ph-3 img { object-position: 62% 40%; }
.ph-4 img { object-position: 36% 30%; }
.ph-5 img { object-position: 88% 30%; }
.ph-6 img { object-position: 50% 40%; }

/* mobile: template's "stacked" cluster — orbs hug the edges, copy stays clear */
@media (max-width: 767px) {
  .ph-1 { top: -7%; left: auto; right: -22%; width: 52vw; height: 52vw; }
  .ph-2 { top: 4%; left: -20%; width: 44vw; height: 44vw; }
  .ph-3 { top: 30%; left: auto; right: -16%; width: 34vw; height: 34vw; }
  .ph-4 { top: 56%; left: -18%; width: 48vw; height: 48vw; }
  .ph-5 { top: 74%; left: auto; right: -14%; width: 40vw; height: 40vw; }
  .ph-6 { top: 88%; left: 28%; width: 44vw; height: 44vw; }
}

.hero .stage { position: absolute; inset: 0; z-index: 3; }

/* hero chrome: chromeless logo + burger drawn on the blue (the pill nav is
   hidden while the hero is on screen, matching the template) */
.hero-chrome .logo {
  display: flex; position: absolute; top: 8.1rem; left: calc(50% - 9rem);
  transform: translate(-50%, -50%);
  align-items: center; gap: .9rem; color: #fff;
  transition: opacity .2s cubic-bezier(.445, .05, .55, .95);
}
@media (hover: hover) { .hero-chrome .logo:hover { opacity: .7; } }
.hero-chrome .burger {
  display: flex; position: absolute; top: 8.1rem; left: calc(50% + 10.9rem);
  transform: translate(-50%, -50%);
  flex-direction: column; justify-content: center; align-items: center;
  gap: 6px; width: 4.2rem; height: 4.2rem; color: #fff;
  transition: opacity .2s cubic-bezier(.445, .05, .55, .95);
}
.hero-chrome .burger span {
  transform: scaleY(.5); background: currentColor; width: 2.7rem; height: 2px;
}
@media (hover: hover) { .hero-chrome .burger:hover { opacity: .7; } }
.hero-chrome .burger:active { transform: translate(-50%, -50%) scale(.95); }
@media (max-width: 479px) {
  .hero-chrome .logo { top: 2.4rem; left: 2.4rem; transform: none; }
  .hero-chrome .burger { top: 1.6rem; left: auto; right: .8rem; transform: none; }
  .hero-chrome .burger:active { transform: scale(.95); }
}
.hero .copy {
  position: absolute; pointer-events: auto;
  font-weight: 400; font-size: calc(var(--u) * 15.4); line-height: 1.26;
  letter-spacing: 0;
  transition: transform .53s cubic-bezier(.58, 0, .2, 1) .9s;
}
.hero .copy.left { top: 50%; left: 13.47%; transform: translateY(-50%); }
.hero .copy.right { top: 49.28%; right: 13.264%; text-align: right; }
html.intro .hero .copy.left { transform: translateY(-50%) translateX(calc(var(--u) * 385)); }
.hero .copy.right > .lede {
  transition: transform .53s cubic-bezier(.58, 0, .2, 1) .9s,
    opacity .24s cubic-bezier(.42, 0, .2, 1) 1.18s;
}
html.intro .hero .copy.right > .lede { transform: translateX(calc(var(--u) * -346)); opacity: 0; }
.hero .copy.right > .link {
  display: inline-block; opacity: .5; margin-top: calc(var(--u) * 2);
  color: #fff; text-decoration: none;
  transition: transform .31s cubic-bezier(.17, 0, .2, 1) 1.34s,
    opacity .31s cubic-bezier(.17, 0, .2, 1) 1.34s;
}
html.intro .hero .copy.right > .link { transform: translateX(calc(var(--u) * -64)); opacity: 0; }
@media (hover: hover) { .hero .copy.right > .link:hover { opacity: 1; } }
.hero .scroll-pill {
  position: absolute; bottom: max(2.4rem, env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translate(-50%);
  display: flex; align-items: center; gap: .6rem;
  backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem);
  border-radius: 999px; background: #00000047;
  padding: .8rem 1.6rem; color: #fff;
  font-size: 1rem; line-height: 1.3; font-weight: 400;
  font-feature-settings: "ss01" 1;
  pointer-events: none;
  transition: opacity .4s cubic-bezier(.25, .46, .45, .94) 1.42s;
}
html.intro .hero .scroll-pill { opacity: 0; transition-delay: 0s; }
.hero .scroll-pill svg { width: 1em; height: 1em; }
@media (max-width: 767px) {
  .hero .stage {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 1.6rem; text-align: center;
    padding: 0 max(2rem, env(safe-area-inset-left, 0px));
  }
  .hero .copy { position: static; transform: none !important; }
  .hero .copy.left { font-size: 2.4rem; line-height: 1.15; }
  .hero .copy.right { font-size: 1.8rem; line-height: 1.25; text-align: center; text-wrap: balance; }
  .hero .copy.right > .link { font-size: 1.6rem; margin-top: 1.2rem; }
  html.intro .hero .copy.left,
  html.intro .hero .copy.right > .lede,
  html.intro .hero .copy.right > .link { transform: translateY(.8rem); opacity: 0; }
}

/* ==========================================================================
   Problem
   ========================================================================== */
.problem { display: flex; justify-content: center; align-items: center; color: #fff; }
@media (max-width: 1023px) { .problem { padding: 0 0 6rem; } }
.problem .frame {
  position: relative; border-radius: var(--r-frame); background: var(--frame-dark);
  min-height: 75.6rem; overflow: hidden;
  display: flex;
}
@media (max-width: 767px) { .problem .frame { border-radius: 0; width: 100%; min-height: 0; } }
.problem .content {
  position: relative; z-index: 1; flex: 1; min-width: 0; max-width: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 4rem; padding: 6rem 2rem;
}
@media (max-width: 479px) { .problem .content { gap: 2.4rem; padding: 4.8rem 1.6rem; } }
.problem header { width: 100%; }
.problem header h2 { text-align: center; font-size: 3rem; letter-spacing: -.02em; }
.problem header h2 span { display: block; }
/* the failing half of the headline takes the threat red, not the system blue */
.problem header h2 .bottom { color: var(--threat); }
.problem .intro {
  opacity: .8; margin: 2.4rem auto 0; width: min(66rem, 100%);
  text-align: center; text-wrap: balance;
}
.ledger-tabs {
  display: flex; margin: 0 auto; border: 1px solid var(--line);
  border-radius: 10rem; padding: .4rem; width: fit-content; max-width: 100%;
  flex-wrap: wrap; justify-content: center;
}
.ledger-tabs .tab {
  border-radius: 10rem; padding: 1.2rem 2rem; background: transparent;
  color: #fff; font-size: 1.2rem; line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .15s linear;
  cursor: pointer;
}
@media (hover: hover) { .ledger-tabs .tab:not(.active):hover { background: var(--surface-05); } }
.ledger-tabs .tab.active { background: var(--surface-10); }
@media (max-width: 767px) {
  .ledger-tabs { border: none; flex-wrap: wrap; justify-content: center; gap: .8rem; padding: 0; }
  .ledger-tabs .tab { border: 1px solid var(--line); padding: 1rem 1.6rem; }
  .ledger-tabs .tab.active { border-color: transparent; }
}
.stage-panel { width: 100%; }
.problem .panel {
  width: min(92rem, 100%); margin: 0 auto; border-radius: var(--r-panel);
  background: var(--surface-05); padding: 3.2rem 4rem;
  display: flex; flex-direction: column; gap: 3.2rem;
}
@media (max-width: 1023px) { .problem .panel { padding: 2.4rem; gap: 2.4rem; } }
.problem .context { font-size: 1.2rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.problem .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
@media (max-width: 1023px) { .problem .columns { grid-template-columns: 1fr; gap: 2.4rem; } }
.problem .col .label {
  font-size: 1.2rem; line-height: 1.3; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.6rem;
}
.problem .col.simulated .label { color: var(--accent); }
.problem .col p.type-target { font-size: 2rem; line-height: 1.2; letter-spacing: -.01em; min-height: 3lh; }
.problem .col.stated p.type-target { color: var(--muted); }
.problem .col.simulated { border-left: 1px solid var(--line); padding-left: 4rem; }
@media (max-width: 1023px) {
  .problem .col.simulated { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 2.4rem; }
}
.type-target .char { visibility: hidden; }
.type-target .char.on { visibility: visible; }
.problem .panel footer {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2.4rem;
  border-top: 1px solid var(--line); padding-top: 2.4rem;
  opacity: 0; translate: 0 .8rem;
  transition: opacity .5s var(--ease), translate .5s var(--ease);
}
.problem .panel footer.shown { opacity: 1; translate: 0 0; }
.problem .outcome { opacity: .8; max-width: 62rem; }
.problem .outcome .label {
  font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-right: 1rem;
}
.problem .more {
  font-size: 1.2rem; color: var(--muted); text-decoration: underline;
  text-underline-offset: .3em; white-space: nowrap;
  transition: color .2s var(--ease);
}
@media (hover: hover) { .problem .more:hover { color: #fff; } }

/* ==========================================================================
   Families (logo wall)
   ========================================================================== */
.families { background: #000; padding-top: 10rem; padding-bottom: 6rem; }
@media (max-width: 767px) { .families { padding-top: 6.4rem; padding-bottom: 3.2rem; } }
.families .inner { display: flex; flex-direction: column; align-items: center; gap: 5.6rem; }
@media (max-width: 767px) { .families .inner { gap: 4rem; } }
.families .label {
  display: flex; align-items: center; gap: 3.2rem;
  max-width: 72rem; width: 100%; color: var(--muted);
}
.families .label:before, .families .label:after {
  content: ""; flex: 1; height: .1rem; background: var(--surface-10);
}
.fam-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .1rem;
  background: var(--surface-10); width: 100%;
}
.fam-grid li {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1rem; background: #000; height: 12rem; padding: 2rem;
}
.fam-grid .fam-name { font-weight: 300; font-size: 1.6rem; letter-spacing: .14em; }
.fam-grid .caption-s { color: var(--muted); }
@media (max-width: 979px) {
  .fam-grid { grid-template-columns: repeat(2, 1fr); }
  .fam-grid li { height: 9.6rem; padding: 1.6rem; }
  .fam-grid li:last-child { grid-column: span 2; }
}
.families .cta { padding-top: 1.6rem; }
.cta-link {
  display: inline-flex; align-items: center; gap: 1.2rem;
  border-radius: 999px; background: #fff; color: #000;
  padding: 1.6rem 2.4rem; font-size: 1.8rem; line-height: 1.2;
  transition: transform .4s var(--ease-springy);
}
.cta-link svg { width: 1.2rem; height: 1.2rem; transition: translate .4s var(--ease-springy); }
@media (hover: hover) {
  .cta-link:hover { transform: scale(1.025); }
  .cta-link:hover svg { translate: .4rem 0; }
}
.cta-link:active { transform: scale(.975); }

/* ==========================================================================
   How — scroll-scrubbed dot field
   ========================================================================== */
.how { position: relative; height: 400svh; background: #000; }
.how .sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.how-frame {
  position: absolute; inset: 2rem; border-radius: var(--r-frame);
  background: var(--frame-gray); overflow: hidden;
  will-change: transform;
}
@media (max-width: 767px) { .how-frame { inset: 1rem; } }
#dotfield { position: absolute; inset: 0; width: 100%; height: 100%; }
.how .layout {
  position: relative; z-index: 1; padding-top: 14rem; pointer-events: none;
}
@media (max-width: 767px) { .how .layout { padding-top: 8rem; } }
.how .hud {
  position: absolute; top: auto; right: auto; bottom: 4rem; left: 50%;
  translate: -50% 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
}
.how .row { display: flex; align-items: center; gap: 1.6rem; }
.hud-nav {
  display: flex; justify-content: center; align-items: center;
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: var(--surface-06); color: #fff;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: background .2s var(--ease), opacity .2s var(--ease);
}
.hud-nav.prev { rotate: 180deg; }
.hud-nav svg { width: 1.2rem; height: 1.2rem; }
/* effector selector over the sim */
.sim-ui {
  position: absolute; top: 5.4rem; right: 5.2rem; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1rem;
}
.sim-ui[hidden] { display: none; }
.sim-modes { display: flex; gap: .6rem; }
.sim-mode {
  padding: .9rem 1.5rem; border-radius: 10rem;
  background: var(--surface-06); color: var(--muted);
  border: 1px solid #ffffff1a;
  font: inherit; font-size: 1.2rem; letter-spacing: .02em; white-space: nowrap;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  cursor: pointer;
}
.sim-mode:hover { background: #ffffff26; color: #fff; }
.sim-mode.active { background: #fff; color: #000; border-color: #fff; }
.sim-hint { color: #ffffff59; }
#dotfield { touch-action: pan-y; cursor: grab; }
#dotfield.dragging { cursor: grabbing; }
@media (max-width: 767px) {
  .sim-ui { top: auto; bottom: 24rem; right: 1.6rem; align-items: flex-end; }
  .sim-mode { padding: .7rem 1.1rem; font-size: 1.1rem; }
  .sim-hint { display: none; }
}
.hud-nav:disabled { opacity: .25; cursor: default; }
@media (hover: hover) { .hud-nav:not(:disabled):hover { background: hsla(0, 0%, 100%, .12); } }
.how .cards { display: grid; width: calc(min(100vw, 144rem) / 12 * 5 - 4.5rem); }
@media (max-width: 767px) { .how .cards { width: calc(100vw - 14rem); } }
.how .card {
  grid-area: 1 / 1;
  border-radius: var(--r-card); background: var(--surface-06);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 2.4rem; display: flex; flex-direction: column; gap: 1.2rem;
  opacity: 0; translate: 0 1.6rem; pointer-events: none;
  transition: opacity .45s var(--ease) 0s, translate .45s var(--ease) 0s;
}
.how .card.active {
  opacity: 1; translate: 0 0; pointer-events: auto;
  transition-delay: .15s;
}
.how .card .counter { color: var(--muted); font-variant-numeric: tabular-nums; }
.how .card p { color: var(--muted); }
.how .indicator { display: flex; gap: .8rem; }
.how .indicator .dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--surface-20);
  transition: background .3s linear;
}
.how .indicator .dot.active { background: #fff; }

/* ==========================================================================
   Catalogue
   ========================================================================== */
.catalogue { background: #000; }
.catalogue .section-heading { margin-bottom: 8rem; }
@media (max-width: 767px) { .catalogue .section-heading { margin-bottom: 5rem; } }
.catalogue .content {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem;
}
.catalogue-visual {
  flex-shrink: 0; width: calc(min(100vw, 144rem) / 2 - 9rem);
  position: sticky; top: max(8rem, calc((100svh - 56rem) / 2));
  height: 56rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-frame); background: var(--frame-gray); overflow: hidden;
}
.catalogue-visual:after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, #0009 0, #00000052 45%, #00000024);
}
.catalogue-visual img {
  position: absolute; max-height: 74%; max-width: 68%; object-fit: contain;
  opacity: 0; transform: scale(.94) translateY(1.2rem);
  transition: opacity .5s var(--ease), transform .5s var(--ease-slide);
}
.catalogue-visual img.active { opacity: 1; transform: none; }
.catalogue .list { width: calc(min(100vw, 144rem) / 12 * 5 - 4.5rem); font-size: 1.8rem; line-height: 1.2; }
@media (max-width: 979px) {
  .catalogue .content { flex-direction: column; }
  .catalogue-visual { position: relative; top: 0; width: 100%; height: 32rem; }
  .catalogue .list { width: 100%; }
}
.family.row {
  display: grid; grid-template-columns: 1fr; padding: .4rem 0;
  opacity: .3; transition: opacity .3s linear;
  border-top: 1px solid var(--line);
}
.family.row:last-of-type { border-bottom: 1px solid var(--line); }
.family.row.open { opacity: 1; }
@media (hover: hover) { .family.row:not(.open):hover { opacity: .6; } }
.family-head {
  display: grid; grid-template-columns: 4rem 1fr auto; gap: 4rem;
  align-items: baseline; width: 100%; padding: 1.6rem 0; text-align: left;
}
@media (max-width: 479px) { .family-head { gap: 2rem; } }
.family-head .num { color: var(--muted); }
.family-head .title { display: inline-flex; align-items: baseline; gap: 1.2rem; }
.family-head .layer { color: var(--muted); }
.family .chev {
  width: 1.2rem; height: .7rem; color: var(--muted); align-self: center;
  transition: transform .4s var(--ease-slide);
}
.family.open .chev { transform: rotate(180deg); }
.family .items {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-slide);
}
.family.open .items { grid-template-rows: 1fr; }
.items-inner { overflow: hidden; display: flex; flex-direction: column; gap: .8rem; }
.fam-desc {
  font-size: 1.4rem; line-height: 1.26; color: var(--muted);
  max-width: 46rem; padding: .4rem 0 1.2rem; margin-left: 8rem;
}
.family .items ul { display: flex; flex-direction: column; gap: .8rem; padding-bottom: 2rem; margin-left: 8rem; }
@media (max-width: 479px) {
  .fam-desc, .family .items ul { margin-left: 0; }
}
.chip {
  border-radius: var(--r-chip); background: var(--surface-06);
  padding: 1.2rem 1.6rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.chip .sku { font-size: 1.3rem; letter-spacing: .08em; }
.chip .desc { font-size: 1.3rem; line-height: 1.35; color: var(--muted); }
.catalogue .cta { margin-top: 4rem; }
.catalogue .cta-note { color: var(--muted); margin-top: 1.2rem; }

/* ==========================================================================
   Featured cards
   ========================================================================== */
.featured .grid {
  display: grid;
  grid-template-columns: 1fr calc(min(100vw, 144rem) / 4 - 3.5rem);
  gap: 2rem; align-items: stretch;
}
@media (max-width: 979px) { .featured .grid { grid-template-columns: 1fr; gap: 4rem; } }
.main-card {
  border: .1rem solid var(--line); border-radius: var(--r-frame);
  background: var(--surface-10); overflow: hidden;
}
.main-card .art { aspect-ratio: 21 / 9; position: relative; }
.main-card .art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  mask-image: linear-gradient(180deg, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.main-card .body {
  display: flex; justify-content: space-between; gap: 6.4rem;
  padding: 0 4rem 4rem;
}
@media (max-width: 1023px) { .main-card .body { flex-direction: column; gap: 4rem; padding: 0 2.4rem 2.4rem; } }
.main-card .task { display: flex; flex-direction: column; gap: 2.4rem; max-width: 46rem; }
.main-card .eyebrow { color: var(--muted); }
.main-card .task h3 { font-size: 2.4rem; line-height: 1.1; letter-spacing: -.01em; }
.main-card .task-title { font-size: 1.8rem; line-height: 1.2; }
.main-card .takeaway { font-size: 1.8rem; line-height: 1.2; color: var(--muted); }
.main-card .button { margin-top: auto; align-self: flex-start; }
.main-card .chart { flex: 1; min-width: 26rem; max-width: 36rem; }
.chart-label { font-size: 1.4rem; margin-bottom: 3.2rem; }
.chart ul { display: flex; flex-direction: column; gap: 4rem; }
.mrow { display: flex; flex-direction: column; gap: 1.2rem; }
.mrow .head { display: flex; justify-content: space-between; align-items: flex-end; }
.mrow .mlabel { font-size: 1.4rem; }
.mrow .value {
  font-size: 2.4rem; line-height: 1.1; min-width: 5ch; text-align: right;
  font-variant-numeric: tabular-nums;
}
.meter { height: 2.4rem; position: relative; }
.meter .track { position: absolute; inset: 0; background: var(--surface-10); }
.meter .fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 7px);
  transition: width 1.3s var(--ease-slide);
}
.mrow.filled .fill { width: calc(var(--fill) * 100%); }
.meter .fill.white { color: #fff; }
.meter .fill.muted { color: #fff6; }
.meter .fill.green { color: var(--green); }
@media (hover: hover) {
  .chart:has(.mrow:hover) .mrow:not(:hover) { opacity: .4; }
}
.mrow { transition: opacity .2s var(--ease); }

.side-card {
  display: flex; flex-direction: column;
  border: .1rem solid var(--line); border-radius: var(--r-frame);
  background: var(--surface-10); overflow: hidden;
  transition: background .3s var(--ease);
}
@media (hover: hover) {
  .side-card:hover { background: var(--surface-20); }
  .side-card:hover .card-footer .arrow { translate: .4rem 0; }
}
.side-card:active { opacity: .8; }
.side-card .art { aspect-ratio: 16 / 9; border-bottom: .1rem solid var(--line); }
.side-card .art img { width: 100%; height: 100%; object-fit: cover; }
.side-card .card-body {
  display: flex; flex-direction: column; gap: 2.4rem; flex: 1; padding: 3.2rem;
}
@media (max-width: 1023px) { .side-card .card-body { padding: 2.4rem; } }
.side-card .meta { display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; }
.wordmark-s { font-weight: 300; font-size: 1.5rem; letter-spacing: .16em; }
.side-card .title { font-size: 2rem; line-height: 1.2; letter-spacing: -.01em; }
.side-card .summary { font-size: 1.4rem; line-height: 1.26; color: var(--muted); }
.side-card .card-footer {
  margin-top: auto; border-top: .1rem solid var(--line); padding-top: 2.4rem;
  display: flex; justify-content: space-between; align-items: center;
}
.side-card .date { color: var(--muted); }
.side-card .arrow { width: 1.4rem; height: 1.4rem; transition: translate .4s var(--ease-springy); }

/* ==========================================================================
   Cases carousel
   ========================================================================== */
.cases { background: #000; padding-top: 7rem; }
@media (max-width: 767px) { .cases { padding-top: 4rem; } }
.cases .header {
  display: grid;
  grid-template-columns: calc(min(100vw, 144rem) / 12 * 4 - 4rem) 1fr;
  gap: 2rem; margin-bottom: 12rem;
}
@media (max-width: 767px) { .cases .header { grid-template-columns: 1fr; margin-bottom: 6rem; } }
.cases .actions { display: flex; justify-content: flex-end; align-items: flex-end; }
.cases .arrows { display: flex; gap: .8rem; }
@media (max-width: 767px) { .cases .arrows { display: none; } }
.cases .carousel {
  display: flex; gap: 6rem;
  overflow: auto clip;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  margin-top: -6.4rem; padding-top: 6.4rem;
  cursor: grab;
}
.cases .carousel::-webkit-scrollbar { display: none; }
@media (min-width: 1440px) { .cases .carousel { gap: 10rem; } }
@media (max-width: 767px) { .cases .carousel { gap: 4rem; } }
.case-card { flex: 0 0 32rem; width: 32rem; scroll-snap-align: start; }
@media (min-width: 1440px) { .case-card { flex-basis: 36rem; width: 36rem; } }
@media (max-width: 767px) { .case-card { flex-basis: 72vw; width: 72vw; } }
.case-card article { display: flex; flex-direction: column; gap: 4rem; height: 100%; }
.case-card .image {
  width: 26rem; height: 26rem; border-radius: var(--r-chip);
  background: var(--surface-10); overflow: hidden;
}
@media (min-width: 1440px) { .case-card .image { width: 32rem; height: 32rem; } }
@media (max-width: 767px) { .case-card .image { width: 100%; aspect-ratio: 1; height: auto; } }
.case-card .image img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  transition: scale .6s var(--ease-springy);
}
@media (hover: hover) { .case-card:hover .image img { scale: 1.04; } }
.case-card .content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.case-card .text { display: flex; flex-direction: column; gap: 1rem; }
.case-card h3 { font-size: 2rem; line-height: 1.2; letter-spacing: -.01em; }
.case-card p { font-size: 1.8rem; line-height: 1.2; color: var(--muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { margin-top: 14rem; background: #000; overflow: hidden; }
.footer a { color: currentColor; text-decoration: none; }
.footer .top {
  position: relative; border-radius: var(--r-frame); height: 70rem; overflow: hidden;
}
@media (max-width: 767px) { .footer .top { height: 56rem; } }
.footer .top .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 6%; opacity: .8;
}
.footer .top .inner {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 4rem;
  margin-left: calc(min(100vw, 144rem) / 12 * 1 - .5rem);
}
@media (max-width: 767px) {
  .footer .top .inner { align-items: center; margin-left: 0; text-align: center; }
}
.footer .top .split-title { font-size: 3rem; line-height: 1.1; letter-spacing: -.02em; }
.footer .bottom { display: flex; gap: 2rem; padding: 6rem 0; }
@media (max-width: 767px) { .footer .bottom { flex-direction: column; gap: 4rem; padding: 4rem 0 2rem; } }
.footer .brand {
  flex: 1; display: flex; flex-direction: column;
  justify-content: space-between; gap: 4rem;
}
.footer .brand .logo { display: inline-flex; align-items: center; gap: .9rem; transition: opacity .2s; width: fit-content; }
@media (hover: hover) { .footer .brand .logo:hover { opacity: .7; } }
.footer .tagline { color: var(--muted); }
.footer .content {
  flex: 1; display: flex; flex-direction: column;
  justify-content: space-between; gap: 4rem; min-height: 16rem;
}
.footer .wrapper { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; }
@media (max-width: 767px) { .footer .wrapper { flex-wrap: wrap; } }
.footer .links { display: flex; flex-direction: column; gap: .8rem; }
.footer .links a { font-size: 1.8rem; line-height: 1.2; transition: opacity .2s; }
@media (hover: hover) { .footer .links a:hover { opacity: .5; } }
.footer .resources { display: flex; flex-direction: column; gap: .8rem; }
.footer .resources a { font-size: 1.4rem; line-height: 1.26; color: var(--muted); transition: color .2s; }
@media (hover: hover) { .footer .resources a:hover { color: #fff; } }
.footer .actions { display: flex; gap: 1.6rem; }
.footer .base {
  display: flex; flex-direction: column; gap: 1.6rem;
  border-top: 1px solid var(--line); padding: 3rem 0 2rem;
}
.footer .meta {
  display: flex; justify-content: space-between; align-items: center; gap: 4rem;
  flex-wrap: wrap;
}
.footer .meta .caption { color: var(--muted); }
.footer .details { display: flex; gap: 2.4rem; align-items: center; }
@media (hover: hover) { .footer .details a:hover { color: #fff; } }
.footer .disclaimer { color: hsla(0, 0%, 100%, .35); max-width: 52rem; }
.side-card .art { background: var(--frame-gray); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .porthole, .porthole .bob { animation: none; transition: none; }
  .portholes, .porthole .rim, .ph-1 img { animation: none; }
  html.intro .porthole { scale: 1; opacity: 1; }
  html.intro .hero .copy.left,
  html.intro .hero .copy.right > .lede,
  html.intro .hero .copy.right > .link { transform: none; opacity: 1; }
  html.intro .hero .scroll-pill { opacity: 1; }
  .hero .copy, .menu .panel-surface, .family .items, .meter .fill { transition: none; }
}

/* ==========================================================================
   Service migration additions
   ========================================================================== */

/* Hero + footer availability status */
.hero .status {
  position: absolute; bottom: max(2.6rem, env(safe-area-inset-bottom, 0px));
  left: 13.47%;
  display: flex; align-items: center; gap: .8rem; color: #ffffffb3;
}
.status-dot {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  background: #0ae77a; box-shadow: 0 0 .8rem #0ae77a99;
  animation: statusPulse 2.4s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) { .status-dot { animation: none; } }
@media (max-width: 767px) {
  .hero .status { position: static; justify-content: center; margin-top: 1.6rem; }
}
.footer-status { color: var(--muted); display: flex; align-items: center; gap: .8rem; }

/* Cost equation (problem frame) */
.equation {
  display: flex; align-items: center; justify-content: center; gap: 4rem;
  flex-wrap: wrap; width: min(92rem, 100%); margin: 0 auto;
  border-top: 1px solid var(--line); padding-top: 3.2rem;
}
.eq-side { display: flex; align-items: baseline; gap: 1.2rem; }
.eq-num { font-variant-numeric: tabular-nums; }
.eq-side .annotation { color: var(--muted); }
.eq-mid { color: var(--muted); }
.eq-note { flex-basis: 100%; text-align: center; color: hsla(0, 0%, 100%, .35); }
@media (max-width: 479px) { .equation { gap: 2rem; } }

/* Featured heading */
.featured-heading { margin-bottom: 6rem; }
@media (max-width: 767px) { .featured-heading { margin-bottom: 4rem; } }

/* Service tiers */
.service { background: #000; }
.service .section-heading { margin-bottom: 8rem; }
@media (max-width: 767px) { .service .section-heading { margin-bottom: 5rem; } }
.tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
@media (max-width: 979px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  display: flex; flex-direction: column; gap: 2rem;
  border: .1rem solid var(--line); border-radius: var(--r-panel);
  background: var(--surface-05); padding: 3.2rem;
}
@media (max-width: 1023px) { .tier { padding: 2.4rem; } }
.tier-no { color: var(--muted); }
.tier h3 { font-size: 2.4rem; line-height: 1.1; letter-spacing: -.01em; }
.tier-tag { color: hsla(0, 0%, 100%, .85); margin-top: -1.2rem; }
.tier-list { display: flex; flex-direction: column; }
.tier-list li {
  border-top: 1px solid var(--line); padding: 1.2rem 0;
  font-size: 1.3rem; line-height: 1.35; color: var(--muted);
}
.tier-note { margin-top: auto; color: hsla(0, 0%, 100%, .45); }

/* Service CTA */
.service-cta {
  display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap;
  margin-top: 4rem;
}
.service-cta .annotation-s { color: var(--muted); max-width: 28rem; }

/* Service onboarding steps */
.service-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  margin-top: 6rem; border-top: 1px solid var(--line); padding-top: 3.2rem;
}
@media (max-width: 979px) { .service-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .service-steps { grid-template-columns: 1fr; } }
.service-steps li { display: flex; flex-direction: column; gap: 1rem; }
.service-steps .caption-s { color: var(--muted); }
.service-steps .body-s { color: hsla(0, 0%, 100%, .75); max-width: 24rem; }

/* ==========================================================================
   Hero HUD layer (defense C2 chrome)
   ========================================================================== */
.hero-sweep {
  position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(205, 220, 255, .13), rgba(205, 220, 255, .04) 9%, transparent 15%);
  animation: sweepSpin 22s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes sweepSpin { to { transform: rotate(360deg); } }
.hero-canvas .hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero-canvas .hud .bracket {
  position: absolute; width: 2.4rem; height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, .38);
}
.hero-canvas .hud .bracket.tl { top: 2rem; left: 2rem; border-right: 0; border-bottom: 0; }
.hero-canvas .hud .bracket.tr { top: 2rem; right: 2rem; border-left: 0; border-bottom: 0; }
.hero-canvas .hud .bracket.bl { bottom: 2rem; left: 2rem; border-right: 0; border-top: 0; }
.hero-canvas .hud .bracket.br { bottom: 2rem; right: 2rem; border-left: 0; border-top: 0; }
.hero-canvas .hud .readout {
  position: absolute; color: #ffffff99;
  font-weight: 300; font-size: .9rem; line-height: 1.8;
  letter-spacing: .16em; text-transform: uppercase;
  font-feature-settings: "ss01" 1; font-variant-numeric: tabular-nums;
}
.hero-canvas .hud .readout.tl-r { top: 2.4rem; left: 4.8rem; }
.hero-canvas .hud .readout.tr-r { top: 2.4rem; right: 4.8rem; text-align: right; }
@media (max-width: 767px) { .hero-canvas .hud .readout { display: none; } }
.chip-dot {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  margin-right: .7rem; vertical-align: middle; position: relative; top: -.1rem;
}
.chip-dot.hostile {
  background: var(--threat); box-shadow: 0 0 .6rem #ff5f5699;
  animation: statusPulse 1.6s ease-in-out infinite;
}
.chip-dot.own { background: #0ae77a; box-shadow: 0 0 .6rem #0ae77a99; }
@media (prefers-reduced-motion: reduce) {
  .hero-sweep, .chip-dot.hostile { animation: none; }
}

/* ---------- Scroll reveal (data-rv set by JS only) ---------- */
[data-rv] {
  opacity: 0; translate: 0 2rem;
  transition: opacity .7s var(--ease), translate .7s var(--ease-slide);
}
[data-rv].in-view { opacity: 1; translate: 0 0; }

/* ==========================================================================
   Improvement pass: interaction & mobile polish
   ========================================================================== */

/* anchor jumps clear the fixed pill */
html { scroll-padding-top: 12rem; }

/* hero link/copy: intro delays must not linger into hover interactions */
html.intro-done .hero .copy,
html.intro-done .hero .copy.right > .lede { transition-delay: 0s; }
html.intro-done .hero .copy.right > .link { transition: opacity .2s var(--ease); }

/* small-control transitions */
.tag { transition: opacity .2s var(--ease), transform .3s var(--ease-springy); }
@media (hover: hover) { .button.glass:hover { background-color: hsla(0, 0%, 100%, .14); } }
body [tabindex]:focus-visible, body a:focus-visible, body button:focus-visible,
body input:focus-visible { outline-offset: 2px !important; }

/* side card: complete the hover trio */
.side-card { transition: background .3s var(--ease), transform .3s var(--ease-springy); }
.side-card .art { overflow: hidden; }
.side-card .art img { transition: scale .6s var(--ease-springy); }
@media (hover: hover) { .side-card:hover .art img { scale: 1.04; } }
.side-card:active { transform: scale(.985); }

/* accordion chevron invite */
@media (hover: hover) {
  .family.row:not(.open) .family-head:hover .chev { color: #fff; translate: 0 .2rem; }
}
.family .chev { transition: transform .4s var(--ease-slide), color .2s var(--ease), translate .3s var(--ease-springy); }

/* footer frame scroll clip reveal */
.footer .top { clip-path: inset(var(--clip, 0%) round var(--r-frame)); will-change: clip-path; }

/* cases: mobile inactive-slide dimming (enabled by JS so no-JS stays bright) */
@media (max-width: 767px) {
  .carousel.dim-enabled .case-card { opacity: .5; transition: opacity .4s var(--ease); }
  .carousel.dim-enabled .case-card.is-active { opacity: 1; }
}

/* mobile: micro-type carries real content — make it legible */
@media (max-width: 767px) {
  .caption-s { font-size: 1.05rem; letter-spacing: .14em; }
  .annotation { font-size: 1.2rem; }
  .annotation-s { font-size: 1.05rem; }
  .hero .copy.left { font-size: clamp(3.2rem, 9vw, 4rem); }
  .hero .copy.right { font-size: 2rem; }
  .hero .copy.right > .link {
    display: inline-block; padding: 1.2rem 2rem; margin-top: .8rem;
    opacity: .85; border: 1px solid var(--line-strong); border-radius: 999px;
  }
  .footer { margin-top: 8rem; }
  .cases .header { margin-bottom: 4rem; }
  .main-card .art { aspect-ratio: 16 / 10; }
  .main-card .art img {
    mask-image: linear-gradient(180deg, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
  }
}

/* catalogue on mobile: the product render travels with the opened row */
.items-inner .fam-thumb { display: none; }
@media (max-width: 767px) {
  .catalogue-visual { display: none; }
  .items-inner .fam-thumb {
    display: block; height: 14rem; width: auto; max-width: 80%;
    object-fit: contain; margin: .8rem auto 1.2rem;
  }
}

/* ==========================================================================
   Improvement pass: design fixes
   ========================================================================== */

/* catalogue visual: vignette darkens EDGES (was inverted), bigger render, SKU chip */
.catalogue-visual:after {
  background: radial-gradient(120% 90% at 50% 50%,
    transparent 0, transparent 42%, #00000052 72%, #0009 100%);
}
.catalogue-visual img { max-height: 86%; max-width: 80%; }
.visual-chip {
  position: absolute; left: 2rem; bottom: 2rem; z-index: 1;
  backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem);
  border-radius: 999px; background: #00000047; color: #fff;
  padding: .7rem 1.3rem; white-space: nowrap;
  font-weight: 300; font-size: .9rem; line-height: 1.3;
  letter-spacing: .16em; text-transform: uppercase;
  font-feature-settings: "ss01" 1;
}

/* family wall: layer dots color-coded to the escalation ladder */
.fam-grid .caption-s:before {
  content: ""; display: inline-block; width: .5rem; height: .5rem;
  border-radius: 50%; margin-right: .7rem; vertical-align: middle;
  background: var(--layer-c, var(--muted));
}
.fam-grid li:nth-child(1), .fam-grid li:nth-child(2) { --layer-c: var(--accent); }
.fam-grid li:nth-child(3), .fam-grid li:nth-child(4) { --layer-c: var(--green); }
.fam-grid li:nth-child(5), .fam-grid li:nth-child(7) { --layer-c: #ff5f56; }

/* accordion titles match the family wall's uppercase wordmarks */
.family-head .title { text-transform: uppercase; font-weight: 300; letter-spacing: .08em; }

/* Shield is the default tier */
.tier.featured { border-color: var(--line-strong); }
.tier.featured .tier-no:after {
  content: "Most fielded"; margin-left: 1.2rem;
  display: inline-block; border-radius: 999px;
  border: 1px solid var(--line-strong); padding: .4rem .9rem;
  font-weight: 300; font-size: .9rem; letter-spacing: .14em;
  color: #fff; vertical-align: middle;
}

/* FORGE mini meters */
.chart-mini { display: flex; flex-direction: column; gap: 2rem; }
.chart-mini .value { font-size: 2rem; }
.chart-mini .mlabel { font-size: 1.2rem; color: var(--muted); }
.chart-mini .meter { height: 1.8rem; }

/* pill nav tucks away on scroll-down, returns on scroll-up */
.menu .panel { transition: opacity .4s cubic-bezier(.25, .46, .45, .94), translate .5s var(--ease-slide); }
.menu.tucked:not(.open) .panel { translate: 0 -14rem; }

/* ==========================================================================
   Hero field color variants — data-hero on <html>: "black" (default) | "blue" | "white"
   ========================================================================== */
:root { --hero-field: #000; }
html[data-hero="blue"] { --hero-field: #1019ec; }
html[data-hero="white"] { --hero-field: #f1f1ee; }
.bg-blue { background: var(--hero-field); }

/* black field: pills need definition without the blue behind them */
html:not([data-hero="blue"]) .hero .scroll-pill,
html:not([data-hero="blue"]) .orb-chip {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--line);
}
html:not([data-hero="blue"]) .porthole .bob {
  box-shadow: 0 0 10rem 1rem rgba(120, 150, 255, .18);
}

/* white field: hero chrome and copy flip to ink */
html[data-hero="white"] .hero { color: #000; }
html[data-hero="white"] .hero-chrome .logo,
html[data-hero="white"] .hero-chrome .burger { color: #000; }
html[data-hero="white"] .hero-canvas .hud .readout { color: #00000099; }
html[data-hero="white"] .hero-canvas .hud .bracket { border-color: rgba(0, 0, 0, .35); }
html[data-hero="white"] .hero .status { color: #000000b3; }
html[data-hero="white"] .hero .copy.right > .link { color: #000; }
html[data-hero="white"] .hero .scroll-pill,
html[data-hero="white"] .orb-chip {
  background: rgba(0, 0, 0, .55); color: #fff; box-shadow: none;
}
html[data-hero="white"] .hero-sweep {
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(10, 20, 90, .08), rgba(10, 20, 90, .02) 9%, transparent 15%);
}
html[data-hero="white"] .hero-vignette {
  background: radial-gradient(ellipse 72% 68% at 50% 48%,
    transparent 34%, rgba(0, 0, 0, .06) 68%, rgba(0, 0, 0, .2) 100%);
}

/* how-frame: scrim keeps the heading readable over the 3D engagement */
.how-frame:after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26rem;
  background: linear-gradient(180deg, rgba(26, 26, 26, .92), rgba(26, 26, 26, .5) 55%, transparent);
  pointer-events: none;
}

/* ==========================================================================
   Language switcher
   ========================================================================== */
.lang-switch { position: relative; display: inline-flex; }
.lang-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line-strong); border-radius: 10rem;
  background: var(--surface-06); color: #fff;
  padding: 1rem 3.4rem 1rem 1.6rem;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  min-height: 4.4rem;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lang-switch:after {
  content: ""; position: absolute; inset-inline-end: 1.4rem; top: 50%;
  width: .8rem; height: .8rem; margin-top: -.55rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .6; pointer-events: none;
}
.lang-select:hover { background: var(--surface-10); }
.lang-select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-select option { background: #111; color: #fff; }
html.i18n-busy body { cursor: progress; }

/* ==========================================================================
   Careers
   ========================================================================== */
.careers .career-values {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem;
  margin-top: 6rem; padding-top: 4rem; border-top: 1px solid var(--line);
}
.careers .career-values .caption-s { display: block; margin-bottom: 1rem; color: #fff; }
.careers .career-values p { color: var(--muted); }
.careers .roles { margin-top: 8rem; }
.careers .roles-title { font-size: 2.4rem; letter-spacing: -.01em; margin-bottom: 2.4rem; }
.careers .role-list { display: grid; gap: 1.2rem; }
.careers .role {
  display: grid; grid-template-columns: minmax(24rem, 1fr) minmax(0, 1.4fr) auto;
  align-items: center; gap: 2.4rem;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface-05); padding: 2.6rem 2.8rem;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.careers .role:hover { background: var(--surface-10); border-color: var(--line-strong); }
.careers .role-name { font-size: 1.8rem; margin-bottom: .6rem; }
.careers .role-meta { color: var(--muted); }
.careers .role-desc { color: var(--muted); }
.careers .role-apply {
  display: inline-flex; align-items: center; gap: .8rem; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: 10rem;
  padding: 1.1rem 2rem; min-height: 4.4rem;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.careers .role-apply svg { width: 1.1rem; height: 1.1rem; }
.careers .role-apply:hover { background: #fff; color: #000; }
.careers .roles-note { margin-top: 2.4rem; color: var(--muted); }

/* ==========================================================================
   Contact form
   ========================================================================== */
.contact-form { margin-top: 5rem; display: grid; gap: 2.4rem; max-width: 88rem; }
.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.contact-form .field { display: grid; gap: .9rem; min-width: 0; }
.contact-form label { font-size: 1.4rem; color: var(--muted); }
.contact-form label .opt { opacity: .65; }
.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea {
  width: 100%; min-height: 5.2rem;
  border: 1px solid var(--line-strong); border-radius: 1.2rem;
  background-color: var(--surface-05); color: #fff;
  padding: 1.4rem 1.6rem; font-size: 1.6rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.contact-form textarea { min-height: 14rem; resize: vertical; line-height: 1.5; }
.contact-form select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, #fff 50%), linear-gradient(-45deg, transparent 49%, #fff 50%);
  background-size: .6rem .6rem, .6rem .6rem;
  background-position: right 1.9rem center, right 1.5rem center;
  background-repeat: no-repeat;
  padding-inline-end: 4rem;
}
[dir="rtl"] .contact-form select { background-position: left 1.5rem center, left 1.9rem center; }
.contact-form select option { background: #111; color: #fff; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #ffffff4d; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: #fff; background-color: var(--surface-10);
}
.contact-form input.invalid, .contact-form textarea.invalid { border-color: #ff6a5e; }
.contact-form .field-error {
  display: none; font-size: 1.3rem; color: #ff8a80;
}
.contact-form .field-error.shown { display: block; }
.contact-form .hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.contact-form .form-actions {
  display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap;
  padding-top: .6rem;
}
.contact-form .form-actions .button { min-height: 5.2rem; }
.contact-form button.busy { opacity: .6; cursor: progress; }
.contact-form .form-note { color: var(--muted); max-width: 42rem; }
.contact-form .form-status {
  border-radius: 1.2rem; padding: 1.6rem 1.8rem; font-size: 1.5rem;
  border: 1px solid var(--line-strong); background: var(--surface-05);
}
.contact-form .form-status.ok { border-color: rgba(10, 231, 122, .5); color: var(--green); }
.contact-form .form-status.error { border-color: rgba(255, 106, 94, .5); color: #ff8a80; }
.contact-form.sent .field-row,
.contact-form.sent .field,
.contact-form.sent .form-actions { display: none; }

/* ==========================================================================
   RTL — Arabic and Hebrew
   ========================================================================== */
[dir="rtl"] .split-title,
[dir="rtl"] .section-heading .side,
[dir="rtl"] .hero .copy,
[dir="rtl"] .problem header,
[dir="rtl"] .contact-form,
[dir="rtl"] .careers .role-main { text-align: right; }
[dir="rtl"] .hero .copy.left,
[dir="rtl"] .hero .copy.right { text-align: right; }
[dir="rtl"] .families .fam-grid,
[dir="rtl"] .service-steps,
[dir="rtl"] .tiers { direction: rtl; }
/* arrows and chevrons point the other way in RTL */
[dir="rtl"] .links .arrow,
[dir="rtl"] .cta-link svg,
[dir="rtl"] .role-apply svg,
[dir="rtl"] .card-footer .arrow,
[dir="rtl"] .rounded-button svg,
[dir="rtl"] .hud-nav svg { transform: scaleX(-1); }
[dir="rtl"] .hud-nav.prev { rotate: 180deg; }
[dir="rtl"] .hud-nav.prev svg { transform: scaleX(-1); }
/* the sim, the hero orbs and the point-cloud art are physical scenes: never mirror them */
[dir="rtl"] .hero-canvas,
[dir="rtl"] .how-frame,
[dir="rtl"] .footer .bg { direction: ltr; }
[dir="rtl"] .sim-ui { left: 5.2rem; right: auto; align-items: flex-start; }
[dir="rtl"] .carousel { direction: ltr; }
[dir="rtl"] .carousel .case-card { direction: rtl; text-align: right; }
[dir="rtl"] .contact-form .field-error { text-align: right; }
/* Hebrew and Arabic have no small-caps/uppercase tradition — undo letterspacing tricks */
[lang="ar"] .caption, [lang="ar"] .caption-s, [lang="ar"] .annotation, [lang="ar"] .annotation-s,
[lang="he"] .caption, [lang="he"] .caption-s, [lang="he"] .annotation, [lang="he"] .annotation-s {
  text-transform: none; letter-spacing: 0;
}
[lang="ar"] .fam-name, [lang="he"] .fam-name { letter-spacing: 0; }
[lang="ar"] body, [lang="he"] body { letter-spacing: 0; }

/* ==========================================================================
   Mobile hardening
   ========================================================================== */
@media (max-width: 979px) {
  .careers .role { grid-template-columns: 1fr; gap: 1.4rem; }
  .careers .role-apply { justify-self: start; }
  .careers .career-values { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 767px) {
  .contact-form .field-row { grid-template-columns: 1fr; gap: 2rem; }
  .contact-form { gap: 2rem; margin-top: 3.6rem; }
  /* 16px minimum keeps iOS Safari from zooming the viewport on focus */
  .contact-form input, .contact-form select, .contact-form textarea { font-size: 1.6rem; }
  .contact-form .form-actions { gap: 1.6rem; }
  .contact-form .form-actions .button { width: 100%; justify-content: center; }
  .careers .roles { margin-top: 5rem; }
  .careers .career-values { margin-top: 4rem; padding-top: 3rem; }
  .careers .role { padding: 2.2rem; }
  .panel-cta { display: flex; flex-direction: column; align-items: stretch; gap: 1.2rem; }
  .panel-cta .lang-switch, .panel-cta .lang-select { width: 100%; }
  .footer .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
}
@media (max-width: 479px) {
  .careers .role-name { font-size: 1.6rem; }
  .lang-select { font-size: 1.2rem; padding: 1rem 3rem 1rem 1.2rem; }
}
/* Nothing may push the document sideways. Must be `clip`, never `hidden`:
   `hidden` establishes a scroll container, which silently breaks the
   position:sticky pin on the .how simulation and leaves a screen of black. */
body { overflow-x: clip; }

/* ==========================================================================
   Sub-page header (careers)
   ========================================================================== */
.subpage .page { background: #000; }
.page-head {
  padding-top: 22rem; padding-bottom: 2rem;
}
.page-head .page-eyebrow { color: var(--muted); margin-bottom: 2.4rem; }
.page-head .page-title {
  font-size: clamp(3.6rem, 6vw, 7.2rem); line-height: 1.02; letter-spacing: -.03em;
  font-weight: 300;
}
.page-head .page-side {
  max-width: 52rem; margin-top: 3rem; color: var(--muted);
}
.subpage .careers { padding-top: 6rem; }
.subpage .careers .career-values { border-top: 1px solid var(--line); }
.careers-cta { margin-top: 4rem; }
.subpage .footer { margin-top: 4rem; }
@media (max-width: 767px) {
  .page-head { padding-top: 14rem; }
  .page-head .page-side { margin-top: 2rem; }
  .subpage .careers { padding-top: 4rem; }
}

/* ==========================================================================
   Contact modal
   ========================================================================== */
.contact-modal {
  width: min(96rem, calc(100vw - 4rem));
  max-height: min(88svh, 96rem);
  margin: auto; padding: 0; border: 0;
  background: transparent; overflow: visible;
}
.contact-modal::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.contact-modal .modal-inner {
  position: relative;
  max-height: min(88svh, 96rem); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  background: #0b0b0b; color: #fff;
  padding: 5.2rem 5.6rem 5rem;
  -webkit-overflow-scrolling: touch;
}
.contact-modal .modal-head .split-title {
  font-size: clamp(2.8rem, 4vw, 4.4rem); line-height: 1.05;
  letter-spacing: -.02em; font-weight: 300;
}
.contact-modal .modal-head .side {
  max-width: 46rem; margin-top: 1.6rem; color: var(--muted);
}
.contact-modal .contact-form { margin-top: 3.6rem; max-width: none; }
.modal-close {
  position: absolute; inset-block-start: 2rem; inset-inline-end: 2rem; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: var(--surface-06); color: #fff;
  transition: background .2s var(--ease);
}
.modal-close:hover { background: var(--surface-20); }
.modal-close svg { width: 1.3rem; height: 1.3rem; }
html.modal-open, html.modal-open body { overflow: hidden; }
/* fallback for browsers without <dialog> */
.contact-modal:not([open]) { display: none; }
@supports not selector(dialog::backdrop) {
  .contact-modal[open] {
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, .8);
    width: 100vw; max-height: 100svh;
  }
}
@media (max-width: 767px) {
  .contact-modal {
    width: 100vw; max-width: 100vw; max-height: 100svh; height: 100svh;
    margin: 0;
  }
  .contact-modal .modal-inner {
    max-height: 100svh; height: 100svh; border-radius: 0; border: 0;
    padding: 7rem 2rem calc(3rem + env(safe-area-inset-bottom));
  }
  .modal-close { inset-block-start: 1.4rem; inset-inline-end: 1.4rem; }
  .contact-modal .contact-form { margin-top: 2.8rem; }
}
/* showModal() moves focus to the dialog; suppress its default ring
   (inner controls keep their own :focus-visible styling) */
.contact-modal:focus, .contact-modal:focus-visible { outline: none; }

/* ==========================================================================
   Modal: fit without scrolling
   The form is short enough to sit in one screen, so keep the paired short
   fields side by side even on phones rather than stacking to a scroller.
   ========================================================================== */
.contact-modal .modal-inner { padding: 4rem 4.4rem 3.6rem; }
.contact-modal .modal-head .split-title { font-size: clamp(2.4rem, 3vw, 3.4rem); }
.contact-modal .modal-head .side { margin-top: 1.2rem; font-size: 1.5rem; }
.contact-modal .contact-form { margin-top: 2.6rem; gap: 1.6rem; }
.contact-modal .contact-form .field-row { gap: 1.6rem; }
.contact-modal .contact-form .field { gap: .6rem; }
.contact-modal .contact-form label { font-size: 1.3rem; }
.contact-modal .contact-form input:not([type="checkbox"]),
.contact-modal .contact-form select { min-height: 4.6rem; padding: 1.1rem 1.4rem; }
.contact-modal .contact-form textarea { min-height: 8.4rem; padding: 1.1rem 1.4rem; }
.contact-modal .contact-form .form-actions { padding-top: 0; gap: 1.6rem; }
.contact-modal .contact-form .form-actions .button { min-height: 4.8rem; }
.contact-modal .contact-form .form-note { font-size: 1.2rem; max-width: 34rem; }
@media (max-width: 767px) {
  .contact-modal .modal-inner { padding: 6rem 1.8rem calc(2rem + env(safe-area-inset-bottom)); }
  /* two columns still: these labels are short and stacking would force a scroll */
  .contact-modal .contact-form .field-row { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .contact-modal .contact-form { margin-top: 2rem; gap: 1.2rem; }
  .contact-modal .modal-head .side { display: none; }
  .contact-modal .contact-form label { font-size: 1.2rem; }
  .contact-modal .contact-form input,
  .contact-modal .contact-form select { min-height: 4.4rem; padding: 1rem 1.2rem; }
  .contact-modal .contact-form textarea { min-height: 7.2rem; }
  .contact-modal .contact-form .form-note { display: none; }
  .contact-modal .contact-form .form-actions .button { width: 100%; }
}
@media (max-height: 820px) {
  .contact-modal .modal-head .side { display: none; }
  .contact-modal .modal-inner { padding-top: 3.2rem; padding-bottom: 3rem; }
  .contact-modal .contact-form { margin-top: 2rem; gap: 1.3rem; }
  .contact-modal .contact-form textarea { min-height: 6.4rem; }
  .contact-modal .contact-form .form-note { display: none; }
}

/* ==========================================================================
   Language control sizing
   The picker sits beside a .button in the nav pill and a .tag in the footer,
   so it has to match whichever it is paired with — same height, same radius,
   same type size. Language names stay in their own casing and script, since
   uppercasing proper nouns reads badly and does nothing for ar/he anyway.
   ========================================================================== */
.panel-cta { flex-direction: column; align-items: stretch; gap: 1rem; }
.panel-cta .button { flex: 0 0 auto; width: 100%; }
.panel-cta .lang-switch { width: 100%; }
.panel-cta .lang-select {
  width: 100%; min-height: 4.6rem;
  padding: 1.5rem 3.8rem 1.5rem 2rem;
  font-size: 1.4rem; line-height: 1; letter-spacing: .02em;
  border-radius: 100px; text-align: center; text-align-last: center;
}
.panel-cta .lang-switch:after { inset-inline-end: 1.8rem; }

/* footer: pair with .tag (1rem padding + 1.2rem text at line-height 1.3) */
.footer .actions { align-items: center; }
.footer .lang-select {
  min-height: 3.6rem; padding: .9rem 3.2rem .9rem 1.4rem;
  font-size: 1.2rem; line-height: 1.3; letter-spacing: .02em;
}
.footer .lang-switch:after { inset-inline-end: 1.4rem; width: .7rem; height: .7rem; margin-top: -.5rem; }

@media (max-width: 767px) {
  .panel-cta { gap: 1.2rem; }
}
@media (max-width: 479px) {
  /* keep parity with .button, which does not shrink at this width */
  .panel-cta .lang-select { font-size: 1.4rem; padding: 1.6rem 3.6rem 1.6rem 1.8rem; }
}

/* ==========================================================================
   FAQ / knowledge page
   Native <details> so the answers are in the DOM for crawlers and work
   without JavaScript, while still collapsing for readers.
   ========================================================================== */
.faq .faq-item {
  border-bottom: 1px solid var(--line);
  padding: 2.4rem 0;
}
.faq .faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h2 {
  font-size: 2rem; line-height: 1.25; letter-spacing: -.01em; font-weight: 300;
}
.faq summary:after {
  content: ""; flex: 0 0 auto;
  width: .9rem; height: .9rem; margin-top: -.3rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.faq .faq-item[open] summary:after { transform: rotate(-135deg); margin-top: .3rem; opacity: .9; }
@media (hover: hover) { .faq summary:hover:after { opacity: 1; } }
.faq summary:focus-visible { outline: 2px solid #fff; outline-offset: .6rem; border-radius: .4rem; }
.faq .faq-body { padding-top: 1.6rem; max-width: 68rem; }
.faq .faq-body > * + * { margin-top: 1.4rem; }
.faq .faq-body p { color: var(--muted); line-height: 1.55; }
.faq .faq-body strong { color: #fff; font-weight: 400; }
.faq .faq-body em { font-style: italic; }
.faq .faq-list { display: grid; gap: .9rem; }
.faq .faq-list li {
  position: relative; padding-inline-start: 1.8rem; color: var(--muted); line-height: 1.5;
}
.faq .faq-list li:before {
  content: ""; position: absolute; inset-inline-start: 0; top: .85em;
  width: .5rem; height: 1px; background: var(--line-strong);
}
.faq .faq-note { color: #ffffff59; border-inline-start: 1px solid var(--line-strong); padding-inline-start: 1.4rem; }
.faq-cta { margin-top: 6rem; display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap; }
.faq-cta .annotation-s { color: var(--muted); }
@media (max-width: 767px) {
  .faq summary h2 { font-size: 1.7rem; }
  .faq .faq-item { padding: 2rem 0; }
  .faq-cta { margin-top: 4rem; gap: 1.4rem; }
  .faq-cta .button { width: 100%; justify-content: center; }
}

/* ---- contact: export-review block ------------------------------------ */
.export-block { border: 1px solid var(--line); padding: 1.6rem; margin: 0 0 1.6rem; display: grid; gap: 1.2rem; }
.export-block .export-title { opacity: .7; letter-spacing: .08em; text-transform: uppercase; }
.export-block .field { margin: 0; }

/* `[hidden]` is a UA-stylesheet rule, so ANY author `display:` on the same element
   silently defeats it — and every conditional block in this form sets one
   (.contact-form .field, .field-row, .export-block are all `display: grid`).
   Without these opt-outs, contact.js's `el.hidden = …` toggles flip the attribute
   and change nothing on screen: the careers view kept showing the site questions,
   and the export block stayed up after submit. Same class of bug as .sim-ui[hidden].
   Keep the [hidden] selectors at least as specific as the rules they override. */
.contact-form [hidden],
.contact-form .field[hidden],
.contact-form .field-row[hidden],
.export-block[hidden] { display: none; }

/* The .sent rules below hide .field/.field-row/.form-actions, but the export block
   is none of those, so it survived the thank-you swap. */
.contact-form.sent .export-block { display: none; }
.contact-form .check { display: flex; gap: 1rem; align-items: flex-start; cursor: pointer; }
.contact-form .check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 2rem; height: 2rem; min-height: 0;
  margin: .2rem 0 0; padding: 0;
  border: 1px solid var(--line-strong); border-radius: .5rem;
  background-color: var(--surface-05);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.contact-form .check input[type="checkbox"]:checked {
  background-color: #fff; border-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.9 8.6 9.4 3.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 1.2rem;
}
.contact-form .check input[type="checkbox"]:focus-visible { outline: none; border-color: #fff; }
.contact-form .check span { font-size: 1.3rem; line-height: 1.5; opacity: .85; }

/* ---- authorization gating on the Defeat layer ------------------------ */
.catalogue-authority { max-width: 70ch; margin: 1.2rem 0 0; opacity: .72; line-height: 1.5; }
.fam-restricted { margin: .6rem 0 1rem; opacity: .72; border-left: 2px solid currentColor; padding-left: 1rem; }
.tier-elig { margin-top: .6rem; opacity: .72; }