/* ============================================================
   NEMI LMM — Basic site · Brand Book v2.0 ("2029 Theme")
   Space Grotesk (display/body) + IBM Plex Mono (labels)
   ============================================================ */

:root {
  --signal: #10a37e;      /* Signal Emerald — sole accent */
  --mint: #2ee6a8;        /* Bright Mint — accent on dark */
  --emerald: #0a4938;     /* Deep Emerald */
  --graphite: #292926;    /* Warm Graphite */
  --ink: #070707;         /* Near Black */
  --panel: #161615;
  --bone: #fefefe;        /* Bone White canvas */
  --oat: #ece7dd;         /* Soft Oat card */
  --oat-pale: #f6f4e8;    /* Pale-oat callout */
  --grey: #8a8a85;

  --maxw: 1280px;
  --snip: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Do NOT add overflow-x: clip/hidden here. Measured: even `clip` stops the
   sticky sections (.sec-pin, .sec-deck, .faq-side) from pinning — they scroll
   away instead. Horizontal overflow is fixed at its source instead; see .eras. */
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

body {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bone);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Type helpers ---------- */
.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.kicker {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--signal);
}
h1, h2, h3 { font-weight: 500; letter-spacing: -1.5px; line-height: 1.05; }
.accent { color: var(--signal); }
.accent-deep { color: var(--emerald); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; }

/* Each section fills one full viewport on desktop; content vertically centered.
   min-height (not height) lets content-heavy sections grow instead of clipping. */
@media (min-width: 901px) {
  section { min-height: 100vh; display: flex; align-items: center; padding: 96px 0; }
  section > .wrap { width: 100%; }
}
.snip {
  clip-path: polygon(0 0, calc(100% - var(--snip)) 0, 100% var(--snip), 100% 100%, 0 100%);
}

/* ---------- Nav — transparent, sits over the hero ---------- */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 8px; }
.nav__links a {
  position: relative;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(236,231,221,0.62); transition: color .2s; padding: 8px 16px;
}
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 1.5px;
  background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav__links a:not(.nav__cta):hover::after,
.nav__links a.active:not(.nav__cta)::after { transform: scaleX(1); }
.nav__links a:hover, .nav__links a.active { color: var(--bone); }
.nav__links a.active { color: var(--signal); }
.nav__cta {
  margin-left: 14px;
  background: var(--signal); color: var(--emerald) !important;
  padding: 11px 22px !important; font-weight: 700; font-family: "Space Grotesk", sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition: background .2s, transform .2s;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: #0ebb8f; color: var(--emerald) !important; transform: translateY(-1px); }
.nav--stuck { position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  width: min(1460px, calc(100% - 24px)); background: rgba(7,7,7,.35);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(236,231,221,.14);
  animation: nav-drop .35s ease; }
.nav--stuck .wrap { height: 46px; padding: 0 18px; max-width: none; }
.nav--stuck .nav__logo img { height: 22px; }
/* inset:0 spans the whole condensed bar so the links can centre in it — but that
   also lays an invisible sheet over the logo and swallows the click, so the
   "tap the logo to go home" affordance died the moment you scrolled past 120px.
   Let pointers through the container and re-arm them on the links themselves. */
/* Condensed bar: everything after the logo sits right, the same order as the
   full-size nav. Centring the links and pinning only the CTA (what this used to
   do) stranded Invest in the middle of the bar, away from the button it pairs
   with. inset:0 still spans the bar so the row can align to its right edge. */
.nav--stuck .nav__links { position: absolute; inset: 0; justify-content: flex-end;
  padding-right: 12px; pointer-events: none; }
.nav--stuck .nav__links > a { pointer-events: auto; }
.nav--stuck .nav__links a:not(.nav__cta):not(.nav__invest) { font-size: 11px; padding: 6px 14px; }
/* Both buttons shrink to the 46px bar — at full size they crowded it. */
.nav--stuck .nav__invest { margin-left: 6px; padding: 7px 13px !important; font-size: 13px !important; }
.nav--stuck .nav__cta { position: static; transform: none;
  margin-left: 8px; padding: 8px 16px !important; font-size: 13px !important; }
@keyframes nav-drop { from { transform: translate(-50%, -130%); } to { transform: translate(-50%, 0); } }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--bone); margin: 5px 0; }

/* ---------- NEMI loop · clean 4-panel view with images ---------- */
.loop-panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.loop-panel {
  position: relative; background: var(--bone); border: 1px solid rgba(7,7,7,.1);
  display: flex; flex-direction: column; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform .3s, box-shadow .3s;
}
.loop-panel:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(7,7,7,.35); }
.loop-panel:hover .loop-panel__media img { transform: scale(1.05); }
.loop-panel__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ink); }
.loop-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.loop-panel__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 100%); }
.loop-panel__letter {
  position: absolute; left: 14px; bottom: 4px; z-index: 2;
  color: rgba(254,254,254,.92); font-weight: 700; font-size: 84px; line-height: 1;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.loop-panel__num { position: absolute; top: 12px; right: 14px; z-index: 2;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 2px; color: rgba(254,254,254,.9); }
.loop-panel__content { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.loop-panel__stage { font-weight: 700; font-size: 23px; letter-spacing: -.6px; color: var(--graphite); }
.loop-panel__sub { margin-top: 8px; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--signal); line-height: 1.5; }
.loop-panel__body { margin-top: 14px; font-weight: 400; font-size: 13.5px; line-height: 1.65; color: rgba(41,41,38,.85); }
.loop-panel__link { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 1px; color: var(--ink);
  border-bottom: 1px solid rgba(7,7,7,.3); align-self: flex-start; transition: color .2s, border-color .2s; }
.loop-panel__link:hover { color: var(--signal); border-color: var(--signal); }
@media (max-width: 900px) { .loop-panels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .loop-panels { grid-template-columns: 1fr; } }

/* ---------- LMM stack (N/E/M/I image cards) ---------- */
.lmm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lmm-card { background: var(--bone); border: 1px solid rgba(7,7,7,.1); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.lmm-card__media { position: relative; aspect-ratio: 4/3; background: var(--ink); overflow: hidden; }
.lmm-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lmm-card__letter { position: absolute; left: 12px; bottom: 6px; font-weight: 700; font-size: 66px;
  line-height: 1; color: rgba(254,254,254,.85); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.lmm-card__idx { position: absolute; top: 12px; right: 14px; font-family: "IBM Plex Mono", monospace;
  font-size: 12px; letter-spacing: 2px; color: rgba(254,254,254,.9); }
.lmm-card__body { padding: 20px; }
.lmm-card__stage { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--signal); }
.lmm-card__title { margin-top: 6px; font-weight: 600; font-size: 20px; letter-spacing: -.4px; }
.lmm-card__desc { margin-top: 10px; font-weight: 300; font-size: 13px; line-height: 1.55; color: rgba(7,7,7,.6); }
.lmm-diff { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lmm-diff__item { padding: 20px; border-top: 2px solid var(--signal); background: var(--oat-pale); }
.lmm-diff__item h4 { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.lmm-diff__item p { margin-top: 8px; font-weight: 300; font-size: 12px; line-height: 1.55; color: rgba(7,7,7,.6); }
.lmm-stats { margin-top: 20px; background: var(--ink); color: var(--bone); padding: 22px 28px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 44px; }
.lmm-stats .s { display: flex; align-items: baseline; gap: 10px; }
.lmm-stats .s b { font-size: 30px; font-weight: 700; color: var(--signal); letter-spacing: -1px; }
.lmm-stats .s span { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 2px; color: rgba(236,231,221,.65); }
.lmm-stats .road { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: 2px; color: var(--signal); font-weight: 600; }
@media (max-width: 900px) {
  .lmm-grid, .lmm-diff { grid-template-columns: repeat(2, 1fr); }
  .lmm-stats .road { margin-left: 0; }
}
@media (max-width: 560px) { .lmm-grid, .lmm-diff { grid-template-columns: 1fr; } }

/* ---------- LMM section · compact so it fits one viewport ---------- */
@media (min-width: 901px) {
  .sec-lmm { padding: 52px 0; }
  .sec-lmm .head { margin-bottom: 22px; }
  .sec-lmm .lmm-card__media { aspect-ratio: 16/10; }
  .sec-lmm .lmm-card__letter { font-size: 52px; }
  .sec-lmm .lmm-card__body { padding: 14px 16px; }
  .sec-lmm .lmm-card__title { font-size: 18px; }
  .sec-lmm .lmm-card__desc { font-size: 12px; line-height: 1.5; margin-top: 8px; }
  .sec-lmm .lmm-diff { margin-top: 20px; }
  .sec-lmm .lmm-diff__item { padding: 14px 16px; }
  .sec-lmm .lmm-diff__item p { font-size: 11.5px; margin-top: 6px; }
  .sec-lmm .lmm-stats { margin-top: 16px; padding: 15px 24px; }
  .sec-lmm .lmm-stats .s b { font-size: 26px; }
}

/* ---------- Closed-loop image flow (Months to Hours) ---------- */
.loop-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.loop-step { background: var(--bone); border: 1px solid rgba(7,7,7,.1); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.loop-step img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.loop-step__cap { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(7,7,7,.08); }
.loop-step__cap b { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--emerald); }
.loop-step__cap span { font-weight: 600; font-size: 14px; letter-spacing: -.2px; }
.loop-arrow { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--signal); }
.loop-arrow em { font-style: normal; font-size: 18px; }
.loop-arrow small { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--emerald); font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) {
  .loop-row { grid-template-columns: 1fr 1fr; }
  .loop-arrow { display: none; }
}
@media (max-width: 560px) { .loop-row { grid-template-columns: 1fr; } }

/* ---------- Manufacturing-as-a-Service factory grid ---------- */
.maas { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.maas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.maas-tile { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--graphite);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.maas-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.maas-tile:hover img { transform: scale(1.05); }
.maas-tile span { position: absolute; bottom: 10px; left: 12px; font-family: "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--bone); background: rgba(0,0,0,.45); padding: 3px 8px; }
.maas__big { font-size: clamp(56px, 8vw, 96px); font-weight: 700; letter-spacing: -3px; color: var(--signal); line-height: .95; }
.maas__certs { margin-top: 26px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.maas__cert { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 1px; }
.maas__cert b { color: var(--signal); display: block; font-size: 11px; letter-spacing: 2px; margin-top: 4px; }
@media (max-width: 900px) { .maas { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Customer marquee ---------- */
/* This section has multiple full-bleed children, so it must stack (column),
   overriding the global one-viewport flex-row rule. */
@media (min-width: 901px) {
  .sec-customers { flex-direction: column; justify-content: center; align-items: stretch; }
}
.sec-customers .head { margin-bottom: 40px; }
.marquee { position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 16px; }
.marquee__track { display: flex; width: max-content; gap: 14px; animation: scroll-left 42s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 52s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.chip {
  flex: 0 0 auto; padding: 14px 26px; background: var(--bone); border: 1px solid rgba(7,7,7,.1);
  font-weight: 600; font-size: 16px; letter-spacing: -.2px; color: var(--ink); white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.bg-ink .chip { background: rgba(236,231,221,.05); border-color: rgba(236,231,221,.14); color: var(--bone); }
.chip--logo {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  height: 78px; width: 158px; padding: 16px 22px; background: #fff; border: 1px solid rgba(7,7,7,.08);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.chip--logo img { max-height: 100%; max-width: 100%; object-fit: contain; display: block;
  filter: grayscale(1); opacity: .72; transition: filter .3s, opacity .3s; }
.chip--logo { transition: border-color .3s, box-shadow .3s, transform .3s; }
.chip--logo:hover img, .chip--logo.lit img { filter: grayscale(0); opacity: 1; }
.chip--logo.lit { border-color: var(--signal); transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(16,163,126,.5); }
@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Pillar bullet lists ---------- */
.pill-list { list-style: none; margin-top: 18px; }
.pill-list li { position: relative; padding: 8px 0 8px 22px; font-weight: 300; font-size: 14px;
  border-top: 1px solid rgba(236,231,221,.12); }
.card--emerald .pill-list li { border-color: rgba(236,231,221,.18); }
.pill-list li:first-child { border-top: 0; }
.pill-list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 6px;
  background: var(--signal); }

/* ---------- From months to hours ---------- */
.compress { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 40px; }
.crow { display: grid; grid-template-columns: 1fr auto 20px auto; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid rgba(7,7,7,.1); }
.cstage { font-weight: 600; font-size: 15px; letter-spacing: -.2px; }
.cold { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: rgba(7,7,7,.4); text-decoration: line-through; }
.carrow { color: var(--signal); text-align: center; }
.cnew { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; color: var(--emerald); text-align: right; }
.loopbar { margin-top: 28px; background: #E4EFE9; border: 1px solid rgba(16,163,126,.25);
  padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.lb-tag { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  font-weight: 600; color: var(--emerald); }
.lb-mid { font-weight: 300; font-size: 13px; color: rgba(7,7,7,.7); }
.lb-res { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 1px;
  font-weight: 700; color: var(--emerald); }

/* ---------- Featured case study ---------- */
.case-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid rgba(7,7,7,.1);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); overflow: hidden; background: var(--bone); }
.case-feature__media { position: relative; min-height: 340px; background: var(--ink); }
.case-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-feature__media .case__vert { color: var(--signal); background: rgba(0,0,0,.4); padding: 4px 10px; }
.case-feature__body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.case-feature__body h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.8px; }
.kpi-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; }
.kpi-v { font-size: 28px; font-weight: 700; letter-spacing: -1px; color: var(--emerald); line-height: 1; }
.kpi-l { margin-top: 8px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(7,7,7,.5); }
@media (max-width: 900px) {
  .compress { grid-template-columns: 1fr; gap: 0; }
  .loopbar { flex-direction: column; align-items: flex-start; }
  .lb-res { margin-left: 0; }
  .case-feature { grid-template-columns: 1fr; }
  .case-feature__media { min-height: 240px; }
  .case-feature__body { padding: 28px; }
}

/* ---------- Case study sections (services page) ---------- */
.cs { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cs--flip .cs__media { order: 2; }
.cs__media { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 4/3;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.cs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs__media--fit { background: #ffffff; border: 1px solid rgba(7,7,7,.14); }
.cs__media--fit img { object-fit: contain; }
.cs__media .badge { position: absolute; top: 18px; left: 18px; background: var(--emerald); color: var(--bone);
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 2px; padding: 6px 12px; }
.cs__vert { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--signal); }
.cs h2 { font-size: clamp(26px, 3.4vw, 40px); margin-top: 14px; }
.cs__kpis { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cs__kpi .v { font-size: 30px; font-weight: 700; letter-spacing: -1px; color: var(--emerald); line-height: 1; }
.cs__kpi .l { margin-top: 8px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(7,7,7,.5); }
.bg-ink .cs__kpi .v { color: var(--signal); }
.bg-ink .cs__kpi .l { color: rgba(236,231,221,.55); }
.cs__did { margin-top: 24px; font-weight: 300; font-size: 14px; line-height: 1.7; color: rgba(7,7,7,.65); }
.bg-ink .cs__did { color: rgba(236,231,221,.7); }
.cs__quote { margin-top: 24px; border-left: 2px solid var(--signal); padding-left: 20px; }
.cs__quote p { font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -.2px; }
.cs__quote cite { display: block; margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; font-style: normal; color: rgba(7,7,7,.5); }
.bg-ink .cs__quote cite { color: rgba(236,231,221,.55); }
@media (max-width: 900px) {
  .cs { grid-template-columns: 1fr; gap: 28px; }
  .cs--flip .cs__media { order: 0; }
  .cs__kpis { gap: 14px; }
}

/* ---------- Case studies ---------- */
.case-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.case { position: relative; overflow: hidden; background: var(--ink); min-height: 300px; display: block;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.case:hover img { transform: scale(1.05); }
.case__grad { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.92) 100%); }
.case__top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; }
.case__idx { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 2px; color: rgba(236,231,221,.9); }
.case__stat { text-align: right; }
.case__stat .v { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--signal); line-height: 1; }
.case__stat .l { margin-top: 4px; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(236,231,221,.65); }
.case__body { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.case__vert { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--signal); }
.case__title { margin-top: 8px; font-size: 22px; font-weight: 600; letter-spacing: -.5px; color: var(--bone); }
.case-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-sub .case { min-height: 142px; }
.case-sub .case__title { font-size: 17px; }
@media (max-width: 900px) {
  .case-hero { grid-template-columns: 1fr; }
  .case-sub { grid-template-columns: 1fr; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; background: var(--ink); color: var(--bone);
  padding: 120px 0 96px; overflow: hidden;
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(16,163,126,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,163,126,.12) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
}
.hero__wash {
  position: absolute; top: -180px; right: -180px; width: 620px; height: 620px;
  pointer-events: none; opacity: .4;
  background: radial-gradient(circle, rgba(16,163,126,.35) 0%, transparent 65%);
}
.hero .wrap { position: relative; }
.hero h1 { font-size: clamp(38px, 6vw, 84px); letter-spacing: -3px; max-width: 1050px; }
.hero p { margin-top: 28px; max-width: 620px; font-size: 16px; font-weight: 300; color: rgba(236,231,221,.75); }
.hero__loop { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__loop span {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid rgba(236,231,221,.25); color: rgba(236,231,221,.85);
}
.hero__loop span.eq { border: 0; color: rgba(236,231,221,.4); align-self: center; }
.hero__loop span.res { background: var(--signal); color: var(--emerald); border-color: var(--signal); font-weight: 600; }
.hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; font-weight: 700; font-size: 14px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: background .2s, border-color .2s, color .2s;
}
.btn--signal { background: var(--signal); color: var(--emerald); }
.btn--signal:hover { background: #0ebb8f; }
.btn--ghost { border: 1px solid rgba(236,231,221,.35); color: var(--bone); }
.btn--ghost:hover { border-color: rgba(236,231,221,.7); }
.btn--ink { background: var(--ink); color: var(--bone); }
.btn--ink:hover { background: var(--emerald); }

/* ---------- Grounds ---------- */
.bg-oat { background: var(--oat); }
.bg-bone { background: var(--bone); }
.bg-ink { background: var(--ink); color: var(--bone); }
.bg-emerald { background: var(--emerald); color: var(--bone); }

/* ---------- Section header ---------- */
.head { max-width: 900px; margin-bottom: 48px; }
.head h2 { font-size: clamp(28px, 4vw, 46px); margin-top: 18px; }
.head p { margin-top: 18px; font-weight: 300; font-size: 16px; color: rgba(7,7,7,.6); max-width: 640px; }
.bg-ink .head p, .bg-emerald .head p { color: rgba(236,231,221,.7); }

/* ---------- Card grids ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bone); border: 1px solid rgba(7,7,7,.1); padding: 30px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.card .num { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 2px; color: var(--signal); }
.card h3 { font-size: 22px; margin-top: 14px; letter-spacing: -.5px; }
.card p { margin-top: 12px; font-weight: 300; font-size: 14px; color: rgba(7,7,7,.6); }
.card--dark { background: var(--panel); border-color: rgba(236,231,221,.12); color: var(--bone); }
.card--dark p { color: rgba(236,231,221,.65); }
.card--emerald { background: var(--emerald); border-color: transparent; color: var(--bone); }
.card--emerald p { color: rgba(236,231,221,.8); }

/* ---------- Photo tiles ---------- */
.tile { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 4/3;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tile--fit { aspect-ratio: 3/2; }
.tile--fit img { object-fit: contain; }
.tile--zoom img { object-fit: cover; transform: scale(1.18); }
.tile--zoom:hover img { transform: scale(1.24); }
.tile:hover img { transform: scale(1.04); }
.tile__grad { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.8) 100%); }
.tile__num { position: absolute; top: 14px; left: 14px; font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: 2px; color: rgba(236,231,221,.9); background: rgba(0,0,0,.4); padding: 3px 8px; }
.tile__name { position: absolute; left: 16px; right: 16px; bottom: 16px; color: var(--bone);
  font-weight: 600; font-size: 22px; letter-spacing: -.5px; }
.tile__tag { position: absolute; left: 16px; bottom: 54px; font-family: "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--signal); }

/* ---------- Stat boxes ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { padding: 26px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.stat .v { font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.stat .l { margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; opacity: .6; }
.stat--e { background: var(--emerald); color: var(--bone); }
.stat--g { background: var(--graphite); color: var(--bone); }
.stat--o { background: var(--bone); color: var(--ink); border: 1px solid rgba(7,7,7,.1); }

/* ---------- Split (image + copy) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.split h2 { font-size: clamp(26px, 3.5vw, 42px); }
.split p { margin-top: 18px; font-weight: 300; color: rgba(7,7,7,.65); }

/* ---------- Callout / CTA band ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .wash { position: absolute; bottom: -160px; left: -160px; width: 520px; height: 520px;
  opacity: .3; background: radial-gradient(circle, rgba(16,163,126,.35) 0%, transparent 65%); }
.cta-band .inner { position: relative; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 24px; }
.cta-band h2 { font-size: clamp(28px, 4vw, 48px); max-width: 720px; }

/* ---------- Footer ---------- */
.footer { background: var(--emerald); color: var(--bone); padding: 64px 0 28px; }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.footer__brand img { height: 26px; margin-bottom: 20px; }
.footer__brand .name { font-weight: 600; font-size: 20px; }
.footer__brand p { margin-top: 12px; font-weight: 300; font-size: 13px; max-width: 380px; color: rgba(236,231,221,.7); }
.footer h4 { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 18px; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 12px; }
.footer ul a, .footer__contact a { font-family: "IBM Plex Mono", monospace; font-size: 13px;
  color: rgba(236,231,221,.75); transition: color .2s; }
.footer ul a:hover, .footer__contact a:hover { color: var(--signal); }
.footer__contact p { margin-top: 14px; font-weight: 300; font-size: 12px; color: rgba(236,231,221,.6); max-width: 260px; }
.footer__socials { margin-top: 22px; display: flex; gap: 22px; }
.footer__socials a svg { width: 18px; height: 18px; fill: rgba(236,231,221,.7); transition: fill .2s; }
.footer__socials a:hover svg { fill: var(--signal); }
.footer__bar { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(236,231,221,.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 1px; color: rgba(236,231,221,.5); }

/* ---------- Page hero (interior) ---------- */
.phero { background: var(--ink); color: var(--bone); padding: 110px 0 72px; position: relative; overflow: hidden; }
/* Desktop gets full-viewport sections from the min-width:901px rule, so page
   heroes fill the screen there. Below that they collapsed to content height —
   about 33% of a phone screen — which wasted the background imagery and made
   the hero read as a thin banner. dvh, not vh, so the collapsing browser bar
   cannot push the content out of view. */
@media (max-width: 900px) {
  .phero {
    min-height: 100dvh;
    display: flex; align-items: center;
    padding-top: 96px; padding-bottom: 64px;
  }
  .phero > .wrap { width: 100%; }
}
.phero h1 { font-size: clamp(34px, 5vw, 68px); letter-spacing: -2.5px; }
.phero p { margin-top: 22px; max-width: 640px; font-weight: 300; color: rgba(236,231,221,.75); }

/* ---------- Background video ---------- */
.bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bgvideo__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,7,7,.78) 0%, rgba(7,7,7,.62) 50%, rgba(7,7,7,.8) 100%); }
.hero .wrap, .phero .wrap { position: relative; z-index: 2; }

/* ---------- Leadership / team ---------- */
/* team = soft-oat cards on the bone canvas, emerald role labels */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  background: transparent; border: 0; padding: 0; box-shadow: none;
}
/* each person sits on their own oat card — name over role, no headshot */
.person {
  display: grid; grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "name" "role";
  align-content: center; row-gap: 7px; min-height: 78px;
  background: var(--oat); border: 1px solid rgba(7,7,7,.12);
  padding: 16px 18px; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  box-shadow: 0 2px 12px rgba(7,7,7,.05);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.person:hover { transform: translateY(-3px); border-color: rgba(10,73,56,.4);
  box-shadow: 0 10px 26px rgba(7,7,7,.12); }
.person__name {
  grid-area: name; align-self: end; color: var(--ink); font-weight: 600;
  font-size: 15px; letter-spacing: -.2px; line-height: 1.25;
}
.person__role {
  grid-area: role; align-self: start; color: var(--emerald);
  background: transparent; border: 0; padding: 0;
  font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.3;
}
.team-sub { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.team-sub .person { padding: 14px 15px; min-height: 68px; }
.team-sub .person__name { font-size: 12px; letter-spacing: -.3px; white-space: nowrap; }
.team-sub .person__role { font-size: 8.5px; letter-spacing: 1px; }
/* keep each name and role on a single line, evenly aligned */
.team-inline .person { padding: 16px 16px; }
.team-inline .person__name { white-space: nowrap; }
.team-inline .person__role { white-space: nowrap; font-size: 8.5px; letter-spacing: .4px; }
/* flip cards: hovering a name flips to a short bio */
/* min-height must clear the longest bio on the back at the narrowest 4-up width */
.team-grid .person { position: relative; display: block; background: transparent; border: 0; box-shadow: none; padding: 0; clip-path: none; overflow: visible; perspective: 900px; min-height: 108px; }
.team-grid .person:hover { transform: none; box-shadow: none; }
.person__face {
  position: absolute; inset: 0; display: grid; align-content: center; row-gap: 7px;
  grid-template-columns: 1fr; grid-template-areas: "name" "role";
  padding: 12px 16px; background: var(--oat); border: 1px solid rgba(7,7,7,.12);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .55s cubic-bezier(.3, .9, .35, 1);
}
.person__front { transform: rotateY(0deg); }
.person__back { transform: rotateY(-180deg); background: var(--emerald); border-color: var(--emerald); }
.person__back p { margin: 0; font-size: 10.5px; line-height: 1.4; font-weight: 300; color: rgba(254,254,254,.9); }
/* Flip on hover only where hover actually exists. Touch devices have no hover,
   so the bios would be unreachable; there they flip on tap via .is-flipped. */
@media (hover: hover) {
  .team-grid .person:hover .person__front { transform: rotateY(180deg); }
  .team-grid .person:hover .person__back { transform: rotateY(0deg); }
}
.team-grid .person.is-flipped .person__front { transform: rotateY(180deg); }
.team-grid .person.is-flipped .person__back { transform: rotateY(0deg); }
.team-sub.team-grid .person { min-height: 98px; }
.team-sub .person__back p { font-size: 9.5px; line-height: 1.38; }
@media (prefers-reduced-motion: reduce) { .person__face { transition: none; } }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } .team-sub { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .team-grid, .team-sub { grid-template-columns: 1fr !important; } }
/* on touch the cards are full width, so give the text room to breathe */
@media (hover: none) and (max-width: 560px) {
  .team-grid .person { min-height: 96px; }
  .team-sub.team-grid .person { min-height: 88px; }
  .person__role { font-size: 10px; }
  .team-sub .person__name { font-size: 14px; white-space: normal; }
  .team-sub .person__role { font-size: 10px; }
  .person__back p, .team-sub .person__back p { font-size: 12.5px; line-height: 1.5; }
}

/* ---------- Master plan letter ---------- */
.sec-plan { position: relative; }
/* expandable letter on the About page: the letterhead and opening paragraph
   show as a teaser, fading out into an expand CTA */
.plan-fold {
  overflow: hidden; max-height: 440px; position: relative;
  transition: max-height 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.plan-fold .letter {
  margin-top: 48px; margin-bottom: 10px;
  box-shadow: 0 34px 90px -30px rgba(0,0,0,0.95), 0 0 0 1px rgba(16,163,126,0.22);
}
.plan-cta::before {
  /* connector stem from the folded letter down to the CTA */
  content: ''; display: block; width: 1px; height: 30px; margin: 0 auto 14px;
  background: linear-gradient(180deg, rgba(16,163,126,0), rgba(16,163,126,0.75));
}
button.btn {
  appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: inherit;
}
.sec-plan.sec-vision cite { color: var(--signal); }
.sec-plan.sec-vision blockquote { max-width: 1040px; margin-left: auto; margin-right: auto; }
.letter {
  position: relative; z-index: 1;
  max-width: 840px; margin: 0 auto;
  background: var(--bone); color: var(--ink);
  padding: clamp(30px, 5vw, 72px);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  box-shadow: 0 46px 100px -55px rgba(0,0,0,.85);
}
.letter__head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 30px;
  border-bottom: 1px solid rgba(7,7,7,.12); }
.letter__mark { font-family: "IBM Plex Mono", monospace; text-transform: uppercase;
  letter-spacing: 3px; font-size: 12px; font-weight: 600; color: var(--emerald); }
.letter__from { font-family: "IBM Plex Mono", monospace; text-transform: uppercase;
  letter-spacing: 2px; font-size: 10px; color: var(--grey); }
.letter__body p { margin-top: 20px; font-size: 17px; line-height: 1.78; color: #23231f; }
.letter__body b { font-weight: 600; color: var(--emerald); }
.letter__lede { font-size: 17px !important; line-height: 1.78 !important; color: #23231f !important; }
/* Section heads: emerald rule, then the title in the display face. The rule is an
   inline-block on ::before rather than a flex child so a heading that wraps keeps
   the dash tied to its first line. */
.letter__body h3 { margin-top: 56px; font-family: "Space Grotesk", sans-serif;
  text-transform: none; letter-spacing: -.7px; font-size: clamp(23px, 2.7vw, 33px);
  font-weight: 700; line-height: 1.18; color: var(--emerald); }
.letter__body h3::before { content: ''; display: inline-block; vertical-align: middle;
  width: 42px; height: 3px; margin-right: 18px; background: var(--signal); }
.letter__short { margin-top: 26px; padding: 0; background: none; clip-path: none;
  list-style: none; }
.letter__short li { position: relative; margin-top: 18px; padding-left: 34px;
  font-size: 17px; line-height: 1.7; color: #23231f; }
.letter__short li::before { content: ''; position: absolute; left: 2px; top: .58em;
  width: 11px; height: 11px; background: var(--signal); }
.letter__close { margin-top: 42px !important; font-size: clamp(20px, 2.2vw, 27px) !important;
  font-weight: 700; letter-spacing: -.6px;
  color: var(--emerald) !important; line-height: 1.32 !important; }
.letter__sign { margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(7,7,7,.14); }
.letter__signature { font-size: clamp(22px, 2.4vw, 29px); font-weight: 700; font-style: normal;
  letter-spacing: -.6px; color: var(--emerald); }
.letter__role { margin-top: 9px; font-family: "IBM Plex Mono", monospace;
  text-transform: none; letter-spacing: 1.5px; font-size: 12px; color: var(--grey); }
.letter__turn { margin-top: 34px !important; font-size: clamp(21px, 2.3vw, 28px) !important;
  font-weight: 700; letter-spacing: -.6px; line-height: 1.3 !important;
  color: var(--emerald) !important; }
/* square corners, flat oat fill, emerald spine — the phase blocks in the letter */
.letter__phase { margin-top: 34px; padding: 32px 36px; background: var(--oat-pale);
  border-left: 3px solid var(--signal); clip-path: none; }
.letter__phase-num { font-family: "IBM Plex Mono", monospace; text-transform: uppercase;
  letter-spacing: 3px; font-size: 12px; font-weight: 600; color: var(--signal); }
.letter__phase h4 { margin-top: 12px; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.24;
  font-weight: 700; letter-spacing: -.6px; color: var(--emerald); }
.letter__phase p { margin-top: 18px; font-size: 16px; line-height: 1.75; color: #23231f; }

/* ---------- Master plan · standalone founder's letter ---------- */
/* Title plate: the letter's cover card, matched to the PDF edition — deep emerald,
   inset on the bone page at the letter's own column width, a fine 41px grid, and
   two "+" crop marks. Sizes are the PDF's (510pt card) scaled to the 880px column. */
/* display/min-height: opt out of the desktop rule that stretches every <section> to a
   full viewport and centres its content, which left the plate floating mid-screen with
   a large empty band above and below it. The plate sits directly under the nav instead. */
.mpl-hero { position: relative; display: block; min-height: 0; background: var(--bone); color: var(--bone);
  padding: calc(84px + clamp(20px, 3vw, 36px)) 0 0; }
.mpl-plate { position: relative; overflow: hidden; max-width: 880px; margin: 0 auto;
  background-color: var(--emerald);
  background-image:
    linear-gradient(rgba(236,231,208,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,231,208,.07) 1px, transparent 1px);
  background-size: 41px 41px;
  padding: clamp(40px, 8.5vw, 75px) clamp(22px, 7.7vw, 68px) clamp(38px, 7.2vw, 64px); }
.mpl-plate__crops span { position: absolute; font-family: "IBM Plex Mono", monospace;
  font-size: 15px; line-height: 1; color: rgba(236,231,208,.55); }
.mpl-plate__crops span:nth-child(1) { top: 24px; left: 24px; }
.mpl-plate__crops span:nth-child(2) { right: 24px; bottom: 26px; }
.mpl-kicker { display: flex; align-items: center; gap: 16px;
  font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 3.5px;
  font-size: clamp(12px, 1.8vw, 16px); font-weight: 500; color: #7fc0ac; }
.mpl-kicker::before { content: ''; flex: 0 0 auto; width: 45px; height: 2px; background: #7fc0ac; }
.mpl-title { margin: clamp(22px, 4vw, 36px) 0 0; font-size: clamp(36px, 7.3vw, 64px); font-weight: 700;
  letter-spacing: -2px; line-height: 1.02; color: #ece7d0; }
.mpl-sub { margin-top: clamp(20px, 3.8vw, 34px); font-family: "IBM Plex Mono", monospace;
  font-size: clamp(14px, 2.4vw, 21px); letter-spacing: 0; color: #7fc0ac; }
.mpl-byline { margin-top: clamp(28px, 5vw, 46px); font-family: "IBM Plex Mono", monospace; text-transform: uppercase;
  letter-spacing: 2px; font-size: clamp(10px, 1.5vw, 13.5px); line-height: 1.7; color: rgba(236,231,208,.5); }
.mpl-body { display: block; min-height: 0; background: var(--bone); padding: clamp(40px, 7vw, 62px) 0 clamp(72px, 10vw, 128px); }
/* no card, no shadow: the letter is the page here, unlike the folded copies on
   About and Resources which still sit in a .letter card on a dark section */
.mpl-letter { max-width: 880px; margin: 0 auto; }
.mpl-letter .letter__body > p:first-child { margin-top: 0; }

@media (max-width: 640px) {
  .letter__body p, .letter__lede { font-size: 16px !important; }
  /* beats `.letter__body p` (0,1,1) above, which is also !important */
  .letter__body p.letter__turn { font-size: 21px !important; }
  .letter__body h3 { margin-top: 42px; }
  .letter__body h3::before { width: 28px; margin-right: 13px; }
  .letter__short li { font-size: 16px; padding-left: 28px; }
  .letter__phase { padding: 24px 22px; }
  .mpl-hero { padding-top: 96px; }
  .mpl-title { letter-spacing: -1.2px; }
}

/* ---------- Offerings page ---------- */
.offer-num {
  font-family: "IBM Plex Mono", monospace; text-transform: uppercase;
  letter-spacing: 3px; font-size: 12px; font-weight: 600; color: var(--emerald);
  margin-bottom: 14px;
}
.offer-lede { margin-top: 16px; max-width: 780px; font-size: 17px; line-height: 1.68; color: #3a3a35; }
.sec-offer .grid { margin-top: 40px; }
/* offering sections with a related stock video behind */
.sec-offer--video {
  position: relative; overflow: hidden; background: #0A0F0D;
  border-top: 1px solid rgba(16,163,126,0.22);
}
.sec-offer--video .wrap { position: relative; z-index: 2; }
.sec-offer--video .bgvideo { filter: saturate(0.85); }
.sec-offer--video .bgvideo__overlay {
  /* deep, even scrim over the whole left/content zone so text stays readable */
  background:
    linear-gradient(96deg, rgba(7,7,7,0.94) 0%, rgba(7,7,7,0.86) 40%, rgba(7,7,7,0.6) 72%, rgba(7,7,7,0.5) 100%),
    linear-gradient(180deg, rgba(7,7,7,0.3) 0%, rgba(7,7,7,0.05) 34%, rgba(7,7,7,0.05) 66%, rgba(7,7,7,0.45) 100%);
}
/* per-section accent — rotate the brand's usable tones so it isn't all one green */
/* LMM hero over the black hand-touch clip: gentle left scrim; black bg does the rest */
.phero--handvid { background: #050505; }
.phero--handvid .bgvideo__overlay {
  background:
    linear-gradient(92deg, rgba(7,7,7,0.72) 0%, rgba(7,7,7,0.4) 38%, rgba(7,7,7,0.12) 72%, rgba(7,7,7,0.15) 100%),
    linear-gradient(180deg, rgba(7,7,7,0.2) 0%, rgba(7,7,7,0) 45%, rgba(7,7,7,0.35) 100%);
}
/* the video fades away softly into the black at its edges */
.phero--handvid .bgvideo {
  -webkit-mask-image: radial-gradient(135% 120% at 58% 42%, #000 46%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(135% 120% at 58% 42%, #000 46%, rgba(0,0,0,0) 100%);
}
.sec-offer--video { --acc: var(--signal); }              /* emerald (default) */
#spm, #motors { --acc: #E6D5A6; }                         /* warm oat / sand */
#metal, #electronics { --acc: #45E1A6; }                  /* bright mint */
/* right-corner section index */
.sec-offer--video::after {
  content: attr(data-idx);
  position: absolute; top: clamp(24px, 4vh, 46px); right: clamp(22px, 5vw, 64px); z-index: 3;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: 3px;
  color: color-mix(in srgb, var(--acc) 80%, transparent); pointer-events: none;
}
.sec-offer--video .offer-num { color: var(--acc); text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
.sec-offer--video .head h2 { color: #FFFFFF; max-width: 19em; text-shadow: 0 2px 20px rgba(0,0,0,0.6); }
.sec-offer--video .head h2 .accent-deep { color: var(--acc); }
.sec-offer--video .offer-lede { color: #F0ECE4; text-shadow: 0 1px 14px rgba(0,0,0,0.6); }
/* offering NAME is the section heading; tagline sits under it */
.sec-offer--video .offer-tag {
  margin-top: 12px; font-size: clamp(17px, 2vw, 23px); font-weight: 500; line-height: 1.35;
  color: #E7E2D9; max-width: 22em; text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.sec-offer--video .offer-tag .accent-deep { color: var(--acc); }
.sec-offer--video .offer-lede { margin-top: 14px; }
@media (max-width: 640px) { .sec-offer--video::after { display: none; } }
.sec-offer--video .card {
  background: rgba(254,254,254,0.97);
  box-shadow: 0 28px 60px -18px rgba(0,0,0,0.55);
}
.sec-offer--video .card .num { color: var(--signal); }

/* ---- offering section modules: one distinct treatment per section ---- */
.sec-offer--video .head { max-width: 760px; }
.offer-mod { margin-top: clamp(28px, 4vw, 44px); }

/* A — hero stat */
.offer-stat { display: flex; align-items: baseline; gap: clamp(18px,3vw,34px); flex-wrap: wrap; }
.offer-stat__n {
  font-size: clamp(52px, 9vw, 118px); font-weight: 700; letter-spacing: -3px;
  line-height: 0.85; color: var(--acc, var(--signal));
}
.offer-stat__c { max-width: 380px; font-size: 15px; line-height: 1.6; color: #E9E4DB; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.offer-stat__c b {
  display: block; margin-bottom: 6px; font-family: "IBM Plex Mono", monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #FFFFFF;
}

/* B — capability chips */
.offer-chips { display: flex; flex-wrap: wrap; gap: 10px; max-width: 840px; }
.offer-chip {
  padding: 11px 18px; font-size: 14px; color: #FFFFFF;
  background: color-mix(in srgb, var(--acc, var(--signal)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc, var(--signal)) 48%, transparent);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.offer-note { margin-top: 20px; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.5px; line-height: 1.7; color: rgba(236,231,221,0.82); max-width: 640px; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.offer-note b { color: var(--acc, var(--signal)); font-weight: 500; }

/* C — engagement routes */
.offer-routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(236,231,221,0.14); border: 1px solid rgba(236,231,221,0.14); }
.offer-route { background: #0B0F0D; padding: 22px 20px; }
.offer-route__n { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--signal); }
.offer-route h4 { margin-top: 11px; font-size: 17px; font-weight: 600; color: #FFFFFF; }
.offer-route p { margin-top: 7px; font-size: 13px; line-height: 1.5; color: rgba(236,231,221,0.62); }

/* D — process flow */
.offer-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.offer-step {
  font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 1px; color: #FFFFFF;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--acc, var(--signal)) 46%, transparent);
  background: color-mix(in srgb, var(--acc, var(--signal)) 8%, transparent);
}
.offer-flow i { color: var(--acc, var(--signal)); font-style: normal; font-size: 15px; }

/* E — turnaround timeline */
.offer-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.offer-stage { padding: 24px 22px; background: color-mix(in srgb, var(--acc, var(--signal)) 10%, transparent); border-left: 2px solid var(--acc, var(--signal)); }
.offer-stage__t { font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; letter-spacing: -1px; color: var(--acc, var(--signal)); }
.offer-stage__l { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: rgba(236,231,221,0.9); }
.offer-stage__l b { color: #FFFFFF; font-weight: 600; }
.offer-timeline--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 820px) {
  .offer-routes { grid-template-columns: repeat(2, 1fr); }
  .offer-timeline, .offer-timeline--4 { grid-template-columns: 1fr; }
}
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 42px; }
.stat {
  padding: 26px 24px; background: rgba(7,7,7,0.035);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.stat__v { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.5px; color: var(--emerald); }
.stat__l { margin-top: 8px; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 1.5px; font-size: 10px; color: var(--grey); }
/* each stat box in its own brand colour */
.stat-row .stat:nth-child(1) { background: var(--emerald); }
.stat-row .stat:nth-child(1) .stat__v { color: #FFFFFF; }
.stat-row .stat:nth-child(1) .stat__l { color: rgba(236,231,221,0.75); }
.stat-row .stat:nth-child(2) { background: rgba(16,163,126,0.16); }
.stat-row .stat:nth-child(2) .stat__v { color: var(--signal); }
.stat-row .stat:nth-child(3) { background: #EFE9DC; }
.stat-row .stat:nth-child(4) { background: #101512; }
.stat-row .stat:nth-child(4) .stat__v { color: var(--signal); }
.stat-row .stat:nth-child(4) .stat__l { color: rgba(236,231,221,0.55); }

/* "service around the part" cards — same brand-colour rotation */
.sec-service .grid .card:nth-child(1) { background: var(--emerald); }
.sec-service .grid .card:nth-child(1) h3 { color: #FFFFFF; }
.sec-service .grid .card:nth-child(1) p { color: rgba(255,255,255,0.92); }
.sec-service .grid .card:nth-child(1) .num { color: #9FE8CF; }
/* links must stay visible on the dark cards */
.sec-service .grid .card:nth-child(1) .cs-more { color: #9FE8CF; border-bottom-color: rgba(159,232,207,.45); }
.sec-service .grid .card:nth-child(1) .cs-more:hover { color: #FFFFFF; }
.sec-service .grid .card:nth-child(4) .cs-more { color: var(--signal); border-bottom-color: rgba(16,163,126,.5); }
.sec-service .grid .card:nth-child(4) .cs-more:hover { color: #9FE8CF; }
.sec-service .grid .card:nth-child(2) { background: rgba(16,163,126,0.15); }
.sec-service .grid .card:nth-child(2) .num { color: var(--signal); }
.sec-service .grid .card:nth-child(3) { background: #EFE9DC; }
.sec-service .grid .card:nth-child(3) .num { color: var(--emerald); }
.bg-oat.sec-service .grid .card:nth-child(3) { background: #FFFFFF; }  /* keep contrast on oat sections */
.sec-service .grid .card:nth-child(4) { background: #101512; }
.sec-service .grid .card:nth-child(4) h3 { color: #FFFFFF; }
.sec-service .grid .card:nth-child(4) p { color: rgba(236,231,221,0.72); }
.sec-service .grid .card:nth-child(4) .num { color: var(--signal); }
/* service: 4 stacked rows — title box on the left, description on the right */
.svc-rows { display: flex; flex-direction: column; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.svc-row { display: grid; grid-template-columns: minmax(240px, 330px) 1fr; gap: 0; align-items: stretch; }
.svc-row__title {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 32px);
}
.svc-num { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 2px; margin-bottom: 8px; }
.svc-row__title h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.5px; }
/* description is now an attached, lighter-tinted box */
.svc-row__desc {
  align-self: stretch; display: flex; align-items: center;
  padding: clamp(18px, 2vw, 26px) clamp(24px, 3vw, 36px);
  font-size: 15px; line-height: 1.7; font-weight: 300; color: rgba(7,7,7,.68);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.svc-row:nth-child(1) .svc-row__title { background: var(--emerald); color: var(--bone); }
.svc-row:nth-child(1) .svc-num { color: #9FE8CF; }
.svc-row:nth-child(1) .svc-row__desc { background: rgba(16,163,126,.10); border: 1px solid rgba(16,163,126,.24); }
.svc-row:nth-child(2) .svc-row__title { background: rgba(16,163,126,.16); color: var(--ink); }
.svc-row:nth-child(2) .svc-num { color: var(--signal); }
.svc-row:nth-child(2) .svc-row__desc { background: rgba(16,163,126,.055); border: 1px solid rgba(16,163,126,.16); }
.svc-row:nth-child(3) .svc-row__title { background: #EFE9DC; color: var(--ink); }
.svc-row:nth-child(3) .svc-num { color: var(--emerald); }
.svc-row:nth-child(3) .svc-row__desc { background: #F8F4EC; border: 1px solid rgba(7,7,7,.12); }
.svc-row:nth-child(4) .svc-row__title { background: #101512; color: var(--bone); }
.svc-row:nth-child(4) .svc-num { color: var(--signal); }
.svc-row:nth-child(4) .svc-row__desc { background: rgba(16,21,18,.06); border: 1px solid rgba(7,7,7,.16); }
@media (max-width: 760px) { .svc-row { grid-template-columns: 1fr; } .svc-row__desc { clip-path: none; } }
/* 2x2 cards where the top two carry a stock image bleeding to the card top */
.img2x2 { grid-template-columns: 1fr 1fr; }
.img2x2 .card { display: flex; flex-direction: column; }
.img-media { margin: -30px -30px 20px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--graphite); }
.img-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .img2x2 { grid-template-columns: 1fr; } }
/* Compounding section: fit heading + 2x2 into a single viewport */
.sec-compound .head { margin-bottom: clamp(16px, 2.2vh, 28px); }
.sec-compound .grid-4 { gap: 16px; }
.sec-compound .card { padding: 24px; }
.sec-compound .img-media { margin: -24px -24px 15px; aspect-ratio: 16 / 6.6; }
.sec-compound .card h3 { font-size: 20px; margin-top: 10px; }
.sec-compound .card p { font-size: 13.5px; line-height: 1.6; margin-top: 8px; }
@media (min-width: 901px) { .sec-compound.bp { padding: clamp(38px, 5.5vh, 66px) 0; } }
/* compounding: card 1 light green with dark text */
.bg-oat.sec-compound .grid-4 .card:nth-child(1) { background: rgba(16,163,126,0.14); }
.bg-oat.sec-compound .grid-4 .card:nth-child(1) h3 { color: var(--emerald); }
.bg-oat.sec-compound .grid-4 .card:nth-child(1) p { color: rgba(7,7,7,0.62); }
/* combined "Own the Default" + "One Closed Loop" — full width, one line divider, no gap */
.sec-compound .card--split { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; background: #FFFFFF; }
.sec-compound .card--split .card__half { padding: 24px; }
.sec-compound .card--split .card__half + .card__half { border-left: 1px solid rgba(7,7,7,0.14); }
.sec-compound .card--split h3 { font-size: 20px; color: var(--ink); }
.sec-compound .card--split p { font-size: 13.5px; line-height: 1.6; margin-top: 8px; color: rgba(7,7,7,0.62); }
@media (max-width: 760px) {
  .sec-compound .card--split { grid-template-columns: 1fr; }
  .sec-compound .card--split .card__half + .card__half { border-left: 0; border-top: 1px solid rgba(7,7,7,0.14); }
}
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
/* Offerings "the factory is the model": content left, factory image right */
.factory-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 68px); align-items: center; }
.factory-split .head { max-width: none; }
.factory-split .stat-row { grid-template-columns: 1fr 1fr; margin-top: clamp(26px, 4vw, 40px); }
.factory-split__media { position: relative; margin: 0; align-self: stretch; min-height: 440px; }
.factory-split__media img, .factory-split__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  box-shadow: 0 34px 80px -42px rgba(0,0,0,.45); }
@media (max-width: 860px) {
  .factory-split { grid-template-columns: 1fr; gap: 28px; }
  .factory-split__media { min-height: 300px; }
  .factory-split .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Nav dropdown ---------- */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.nav__item > a::after { content: ' \25BE'; font-size: 9px; opacity: 0.6; }
.nav__drop {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
  min-width: 190px; padding: 8px 0;
  background: #0B0F0D; border: 1px solid rgba(16,163,126,0.3);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 80;
}
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop {
  opacity: 1; visibility: visible; transform: translate(-50%, 4px);
}
.nav__drop a {
  display: block; padding: 11px 20px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: rgba(236,231,221,0.85);
}
.nav__drop a:hover { color: var(--signal); background: rgba(16,163,126,0.08); }
@media (max-width: 900px) {
  .nav__item { display: block; }
  .nav__drop { position: static; transform: none; opacity: 1; visibility: visible; border: 0; background: transparent; padding: 0 0 0 18px; }
}

/* ---------- LMM Stack: architecture diagram (dark, premium) ---------- */
.sec-arch { position: relative; overflow: hidden; }
.arch { max-width: 920px; margin: clamp(28px, 4vw, 46px) auto 0; }
.arch__layer { position: relative; }
.arch__tag {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase; color: rgba(236,231,221,0.5); margin-bottom: 12px;
}
.arch__apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.arch__app {
  padding: 20px 18px; text-align: left;
  background: linear-gradient(160deg, rgba(16,163,126,0.16), rgba(16,163,126,0.05));
  border: 1px solid rgba(16,163,126,0.4);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.arch__app:hover { transform: translateY(-4px); border-color: var(--signal); }
.arch__app b { display: block; font-size: 18px; font-weight: 600; color: #FFFFFF; }
.arch__app span { display: block; margin-top: 5px; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--signal); }

.arch__core, .arch__phys {
  position: relative; padding: 30px 30px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.arch__core b, .arch__phys b { display: block; font-size: clamp(19px, 2.3vw, 27px); font-weight: 700; letter-spacing: -0.4px; }
.arch__core span, .arch__phys span {
  display: block; margin-top: 9px; font-family: "IBM Plex Mono", monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
}
/* the glowing model core — centerpiece */
.arch__core {
  background: linear-gradient(135deg, #0A4938, #10A37E);
  box-shadow: 0 0 60px -8px rgba(16,163,126,0.6), inset 0 0 0 1px rgba(255,255,255,0.12);
  overflow: hidden;
}
.arch__core b { color: #FFFFFF; position: relative; z-index: 1; }
.arch__core span { color: #CFF5E6; position: relative; z-index: 1; }
.arch__core-glow {
  position: absolute; top: -60%; left: -10%; width: 55%; height: 220%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.35), transparent);
  animation: archsweep 6s ease-in-out infinite;
}
@keyframes archsweep { 0%,100% { transform: translateX(0); opacity:.5; } 50% { transform: translateX(180%); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .arch__core-glow { animation: none; } }
.arch__phys {
  background: #0E1310; border: 1px solid rgba(236,231,221,0.14);
}
.arch__phys b { color: #FFFFFF; }
.arch__phys span { color: rgba(236,231,221,0.55); }

.arch__link { display: flex; align-items: center; gap: 16px; justify-content: center; padding: 14px 0; }
.arch__link span { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--signal); white-space: nowrap; }
.arch__link-line { flex: 1; max-width: 180px; height: 1px; background: linear-gradient(90deg, transparent, rgba(16,163,126,0.6), transparent); }

@media (max-width: 720px) { .arch__apps { grid-template-columns: repeat(2, 1fr); } }

/* ---------- LMM Stack: suite cards ---------- */
.suitecard {
  display: block; background: #FFFFFF; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  box-shadow: 0 22px 50px -22px rgba(0,0,0,0.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.suitecard:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -22px rgba(0,0,0,0.35); }
.suitecard img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: left top; display: block; }
.suitecard__body { padding: 18px 20px 22px; }
.suitecard__body .num { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--signal); }
.suitecard__body h3 { margin-top: 8px; font-size: 20px; font-weight: 600; color: var(--ink); }
.suitecard__body p { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: #55554f; }

/* ---------- LMM Stack: raw suite spec-plates (no images) ---------- */
.suiteplates { gap: 1px; background: rgba(7,7,7,0.1); border: 1px solid rgba(7,7,7,0.1); }
.suiteplate {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bone); padding: 30px 26px 26px; min-height: 340px;
  transition: background 0.3s ease;
}
.suiteplate:hover { background: var(--oat-pale); }
.suiteplate__ghost {
  position: absolute; top: -22px; right: 2px; z-index: 0; pointer-events: none;
  font-size: 150px; font-weight: 700; line-height: 1; letter-spacing: -6px;
  color: rgba(10,73,56,0.05);
}
.suiteplate > * { position: relative; z-index: 1; }
.suiteplate__stage { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--signal); }
.suiteplate__name { margin-top: 14px; font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.5px; color: var(--ink); }
.suiteplate__role { margin-top: 5px; font-size: 13.5px; font-weight: 500; color: var(--emerald); }
.suiteplate__desc { margin-top: 15px; font-size: 13px; line-height: 1.62; color: #4b4b45; }
.suiteplate__spec { margin-top: auto; padding-top: 16px; }
.suiteplate__io { display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.3px; color: #6a6a63; line-height: 1.9; }
.suiteplate__io b { display: inline-block; width: 30px; color: var(--signal); font-weight: 600; text-transform: uppercase; }
@media (max-width: 900px) { .suiteplates { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .suiteplates { grid-template-columns: 1fr; } .suiteplate { min-height: 0; } }

/* "powered by the LMM" foundation bar under the four plates */
.suitepower__nodes { display: grid; grid-template-columns: repeat(4, 1fr); height: 26px; }
.suitepower__nodes i { position: relative; justify-self: center; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(16,163,126,0.15), var(--signal)); }
.suitepower__nodes i::after { content: ''; position: absolute; bottom: -3px; left: -2.5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px rgba(16,163,126,0.9); }
.suitepower__bar {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap;
  padding: 22px 30px; text-align: center;
  background: linear-gradient(135deg, var(--emerald), var(--signal));
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow: 0 26px 66px -32px rgba(16,163,126,0.75);
}
.suitepower__mono { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.suitepower__name { font-size: clamp(19px, 2.1vw, 26px); font-weight: 700; letter-spacing: -0.5px; color: #FFFFFF; }
@media (max-width: 900px) { .suitepower__nodes { grid-template-columns: repeat(2, 1fr); } }


/* ===== Case studies · stacked sections (full image + advantage graph) ===== */
.sec-cs { display: block; min-height: 0; padding-bottom: clamp(24px, 4vw, 44px); }
.cs-head { margin-bottom: clamp(28px, 5vw, 52px); }
.cs-head h2 { margin-top: 6px; }
.cs-row { display: block; padding: clamp(30px, 5vw, 64px) 0; border-top: 1px solid rgba(7,7,7,0.1); }
.cs-row:first-of-type { border-top: 0; }
.cs-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(30px, 5vw, 74px); align-items: center; }
.cs-row:nth-of-type(even) .cs-visual { order: 2; }        /* alternate the image side */

.cs-visual {                                  /* clips + shadows the whole visual (image, then chart) */
  position: relative; margin: 0; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  filter: drop-shadow(0 26px 48px rgba(0,0,0,0.34));
}
.cs-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: #FFFFFF; background: var(--emerald); padding: 7px 13px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.cs-photo { width: 100%; height: auto; display: block; }   /* the full image — nothing cropped */
.cs-info { max-width: 560px; }
.cs-scope { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--signal); }
.cs-title { margin-top: 12px; font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -1px; color: var(--ink); }
.cs-desc { margin-top: 16px; font-size: 15px; line-height: 1.7; color: #4a4a44; }
.cs-rows { margin: 22px 0 0; }
.cs-rows > div { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(7,7,7,0.12); }
.cs-rows dt { flex: 0 0 118px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey); padding-top: 2px; }
.cs-rows dd { margin: 0; font-size: 15px; color: var(--ink); }
.cs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.cs-metrics > div { padding: 15px 14px; background: rgba(7,7,7,0.035); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.cs-metrics b { display: block; font-size: clamp(18px, 2.2vw, 25px); font-weight: 700; letter-spacing: -0.5px; color: var(--emerald); }
.cs-metrics span { display: block; margin-top: 5px; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--grey); }

/* ---- hi-tech advantage chart: swipes in over the photo after 2s ---- */
.cc {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; padding: clamp(16px, 2vw, 28px);
  background:
    radial-gradient(130% 90% at 82% 6%, rgba(16,163,126,0.16), transparent 58%),
    linear-gradient(150deg, #0b1a14 0%, #06100b 62%, #050c08 100%);
  transform: translateX(103%);
  transition: transform 0.62s cubic-bezier(0.62, 0, 0.1, 1);
  will-change: transform;
}
.cc::before {                                  /* faint tech scanlines */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(16,163,126,0.05) 0 1px, transparent 1px 4px);
}
.cs-visual:hover .cc, .cs-visual.tapped .cc { transform: translateX(0); }

.cc__hud { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cc__lg { display: inline-flex; align-items: center; gap: 7px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(236,231,221,0.62); }
.cc__lg i { width: 9px; height: 9px; border-radius: 2px; }
.cc__lg .i-conv { background: rgba(236,231,221,0.6); }
.cc__lg .i-lmm { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.cc__delta { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--mint); text-shadow: 0 0 12px rgba(46,230,168,0.5); }

.cc__plot { position: relative; flex: 1; margin-top: 12px; min-height: 0; }
.cc__x { position: absolute; width: 11px; height: 11px; border: 1px solid rgba(16,163,126,0.55); z-index: 2; }
.cc__x.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cc__x.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cc__x.bl { bottom: 20px; left: 0; border-right: 0; border-top: 0; }
.cc__x.br { bottom: 20px; right: 0; border-left: 0; border-top: 0; }
.cc__svg { position: absolute; inset: 0 0 20px 0; width: 100%; height: calc(100% - 20px); overflow: visible; }
.cc-grid line { stroke: rgba(16,163,126,0.10); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cc-grid .vt { stroke: rgba(16,163,126,0.07); }
.cc-base { stroke: rgba(236,231,221,0.20); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* base = fully drawn (stays visible while the panel swipes back out); entry animations draw it in */
.cc-conv { fill: none; stroke: rgba(236,231,221,0.5); stroke-width: 2.2; stroke-dasharray: 6 6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 1; }
.cc-lmm { fill: none; stroke: var(--signal); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(16,163,126,0.75)); stroke-dashoffset: 0; stroke-dasharray: 1; }
.cc-fill { opacity: 1; }
.cc-dot { opacity: 1; }
.cc-dot--conv { fill: rgba(236,231,221,0.7); }
.cc-dot--lmm { fill: var(--signal); filter: drop-shadow(0 0 8px rgba(16,163,126,0.95)); }
.cc-halo { fill: none; stroke: var(--signal); stroke-width: 1.4; opacity: 0.5; }
.cc-tag { opacity: 1; }
.cc-tag rect { }
.cc-tag--conv rect { fill: rgba(24,28,27,0.92); stroke: rgba(236,231,221,0.42); stroke-width: 1; }
.cc-tag--lmm rect { fill: rgba(16,163,126,0.18); stroke: var(--signal); stroke-width: 1.3; }
.cc-tag text { font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 600; text-anchor: middle; }
.cc-tag--conv text { fill: #ece7dd; }
.cc-tag--lmm text { fill: #ffffff; }
.cc__axis { position: absolute; left: 4px; right: 4px; bottom: 0; display: flex; justify-content: space-between;
  font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(236,231,221,0.4); }

/* reveal choreography — replays each time the panel swipes in (backwards = held hidden through the delay) */
.cs-visual:hover .cc-conv, .cs-visual.tapped .cc-conv  { animation: ccfadein 0.55s ease 0.3s backwards; }
.cs-visual:hover .cc-lmm, .cs-visual.tapped .cc-lmm   { animation: ccdrawin 0.85s cubic-bezier(0.4,0,0.2,1) 0.45s backwards; }
.cs-visual:hover .cc-fill, .cs-visual.tapped .cc-fill  { animation: ccfadein 0.65s ease 0.95s backwards; }
.cs-visual:hover .cc-dot, .cs-visual.tapped .cc-dot   { animation: ccfadein 0.4s ease 1.1s backwards; }
.cs-visual:hover .cc-tag, .cs-visual.tapped .cc-tag   { animation: ccfadein 0.45s ease 1.25s backwards; }
.cs-visual:hover .cc-halo, .cs-visual.tapped .cc-halo  { animation: ccfadein 0.4s ease 1.1s backwards, cchalo 2.2s ease-in-out 1.6s infinite; }
@keyframes ccdrawin { from { stroke-dashoffset: 1; } }
@keyframes ccfadein { from { opacity: 0; } }
@keyframes cchalo { 0%,100% { opacity: 0.5; } 50% { opacity: 0.08; } }
@media (prefers-reduced-motion: reduce) {
  .cc { transition: none; }
  .cs-visual .cc-conv, .cs-visual .cc-lmm, .cs-visual .cc-fill,
  .cs-visual .cc-dot, .cs-visual .cc-halo, .cs-visual .cc-tag { animation: none; }
}
@media (max-width: 860px) {
  .cs-grid { grid-template-columns: 1fr; gap: 24px; }
  .cs-row:nth-of-type(even) .cs-visual { order: 0; }
  .cs-metrics { gap: 10px; }
}

/* ---------- LMM Stack: Premise split (text + image) ---------- */
.premise-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.premise-split .head { max-width: none; }
.premise-media { position: relative; margin: 0; }
.premise-media img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  box-shadow: 0 34px 80px -38px rgba(0,0,0,0.45);
}
.premise-media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(7,7,7,0.55) 100%);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.premise-cap {
  position: absolute; left: 18px; bottom: 15px; z-index: 2;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bone);
}
.premise-cap::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px;
  background: var(--signal); box-shadow: 0 0 8px rgba(16,163,126,0.9); }
@media (max-width: 860px) { .premise-split { grid-template-columns: 1fr; } .premise-media { margin-top: 8px; } }

/* ---------- Careers: factory-floor marquee (scrolls right → left) ---------- */
.floor-marquee {
  display: flex; width: 100%; overflow: hidden; margin-top: clamp(2rem, 4vw, 3.2rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.floor-track {
  display: flex; gap: 18px; padding-right: 18px; margin: 0; list-style: none;
  flex-shrink: 0; animation: floorscroll 60s linear infinite;
}
/* marquee keeps scrolling on hover (no pause) */
@keyframes floorscroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.floor-tile {
  position: relative; flex: 0 0 auto;
  width: clamp(340px, 40vw, 600px); height: clamp(230px, 28vw, 360px);
  overflow: hidden; background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.floor-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .floor-track { animation: none; } }

/* Careers "life on the floor": full-bleed strip running edge to edge */
.sec-floor .floor-tile { width: clamp(300px, 27vw, 520px); height: clamp(230px, 25vw, 400px); }
.sec-floor > .floor-marquee { width: 100%; margin-top: 0; }

/* ===== "Read the full case study" link on a case card ===== */
.cs-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--emerald); border-bottom: 1px solid rgba(10,73,56,0.3); padding-bottom: 5px; transition: gap 0.2s ease, color 0.2s ease; }
.cs-more:hover { color: var(--signal); gap: 13px; }

/* ===== Case-study detail page (case-pmi.html) — reads as a document, not one-viewport slides ===== */
.page-cd section:not(.phero):not(.cta-band) { min-height: 0; display: block; padding: clamp(60px, 9vh, 108px) 0; }
.page-cd section:not(.phero):not(.cta-band) > .wrap { width: 100%; }
.cd-hero .bgvideo { object-fit: cover; }
.cd-back { display: inline-block; margin-bottom: 20px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(236,231,221,0.72); }
.cd-back:hover { color: var(--mint); }

.cd-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.cd-lede { font-size: 17px; line-height: 1.75; color: #4a4a44; }
.cd-lede b { color: var(--ink); font-weight: 600; }
.cd-chips { display: flex; gap: 16px; flex-wrap: wrap; }
.cd-chip { flex: 1 1 150px; padding: 20px 22px; background: rgba(7,7,7,0.045); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.cd-chip b { display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.5px; color: var(--emerald); }
.cd-chip span { display: block; margin-top: 6px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey); }

.cd-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: clamp(36px, 5vw, 60px); }
.cd-m { padding: clamp(22px, 2.6vw, 32px); background: var(--emerald); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.cd-m--hi { background: var(--signal); }
.cd-m b { display: block; font-size: clamp(26px, 3.4vw, 44px); font-weight: 700; letter-spacing: -1px; color: #fff; line-height: 1; }
.cd-m span { display: block; margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.75); }

.cd-proc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.cd-step__img { position: relative; margin-bottom: 18px; overflow: hidden; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.cd-step__img img { width: 100%; height: clamp(180px, 22vw, 240px); object-fit: cover; display: block; }
.cd-step__n { position: absolute; top: 12px; left: 12px; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 2px; color: #fff; background: var(--emerald); padding: 5px 11px; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); }
.cd-step h3 { font-size: 19px; letter-spacing: -0.3px; color: var(--ink); }
.cd-step p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: #4a4a44; }
.cd-step b { color: var(--emerald); font-weight: 600; }
.cd-step--text { border-top: 2px solid var(--emerald); padding-top: 18px; }

.cd-tablewrap { overflow-x: auto; }
.cd-table { width: 100%; border-collapse: collapse; margin-top: 8px; min-width: 620px; }
.cd-table th { text-align: left; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; padding: 15px 18px; background: var(--emerald); color: #fff; }
.cd-table td { padding: 15px 18px; font-size: 15px; border-bottom: 1px solid rgba(7,7,7,0.1); color: var(--ink); }
.cd-table tbody tr:nth-child(odd) { background: rgba(7,7,7,0.03); }
.cd-table td:nth-child(2) { color: var(--grey); }
.cd-table td:last-child { font-weight: 600; color: var(--emerald); }

.cd-quote { max-width: 960px; margin: 0 auto; text-align: center; }
.cd-quote p { font-size: clamp(20px, 2.6vw, 31px); line-height: 1.5; font-weight: 300; color: var(--bone); letter-spacing: -0.3px; }
.cd-quote p::before { content: '“'; color: var(--signal); margin-right: 2px; }
.cd-quote p::after { content: '”'; color: var(--signal); margin-left: 2px; }
.cd-quote cite { display: block; margin-top: 26px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-style: normal; color: var(--mint); }

.cd-list { margin-top: 18px; list-style: none; padding: 0; }
.cd-list li { position: relative; padding-left: 22px; margin-bottom: 12px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.cd-list li::before { content: '▪'; position: absolute; left: 0; color: var(--signal); }
.cd-team { margin-top: 20px; }
.cd-foot { margin-top: 16px; font-size: 12px; line-height: 1.6; font-style: italic; color: var(--grey); max-width: 760px; }

/* ===== Fill the empty space with brand colour: emerald blueprint + tinted case cards ===== */
.sec-cs.bp--light::before {
  background-image:
    linear-gradient(rgba(16,163,126,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,163,126,.08) 1px, transparent 1px);
}
.sec-cs .cs-row { border-top: 0; padding: clamp(14px, 2.2vw, 26px) 0; }
.sec-cs .cs-grid {
  background: linear-gradient(140deg, rgba(16,163,126,.10) 0%, rgba(236,231,221,.58) 52%, rgba(236,231,221,.72) 100%);
  border: 1px solid rgba(10,73,56,.16);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  padding: clamp(26px, 3.4vw, 54px);
  box-shadow: 0 34px 80px -54px rgba(10,73,56,.55);
}
.sec-cs .cs-row:nth-of-type(even) .cs-grid {
  background: linear-gradient(140deg, rgba(236,231,221,.72) 0%, rgba(236,231,221,.58) 48%, rgba(16,163,126,.10) 100%);
}
/* emerald blueprint on the case-study detail pages' light sections too */
.page-cd .bp--light::before {
  background-image:
    linear-gradient(rgba(16,163,126,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,163,126,.06) 1px, transparent 1px);
}

/* ===== Offerings: lively per-section reveals + count-up stats ===== */
.anim .sec-offer .head,
.anim .sec-offer .offer-mod,
.anim .sec-offer .offer-note { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.sec-offer.reveal-on .head { transition-delay: .04s; }
.sec-offer.reveal-on .offer-mod { transition-delay: .16s; }
.sec-offer.reveal-on .offer-note { transition-delay: .3s; }
.sec-offer.reveal-on .head,
.sec-offer.reveal-on .offer-mod,
.sec-offer.reveal-on .offer-note { opacity: 1; transform: none; }
/* the big stat number gives a subtle pop as it counts */
.anim .offer-stat__n { transform-origin: left center; }
.sec-offer.reveal-on .offer-stat__n { animation: statpop .7s cubic-bezier(.2,.8,.2,1) .18s both; }
@keyframes statpop { 0% { transform: scale(.86); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* intro stat row: staggered rise */
.anim .stat-row .stat { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.stat-row.reveal-on .stat { opacity: 1; transform: none; }
.stat-row.reveal-on .stat:nth-child(2) { transition-delay: .1s; }
.stat-row.reveal-on .stat:nth-child(3) { transition-delay: .2s; }
.stat-row.reveal-on .stat:nth-child(4) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .anim .sec-offer .head, .anim .sec-offer .offer-mod, .anim .sec-offer .offer-note,
  .anim .stat-row .stat { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sec-offer.reveal-on .offer-stat__n { animation: none !important; }
}

@media (max-width: 860px) {
  .cd-split { grid-template-columns: 1fr; }
  .cd-metrics { grid-template-columns: repeat(2, 1fr); }
  .cd-proc { grid-template-columns: 1fr; }
}

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-sm { margin-top: 16px; }
.divider { height: 1px; background: rgba(7,7,7,.1); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  section { padding: 60px 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2, .split { grid-template-columns: 1fr; }
  .split { gap: 28px; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  /* Solid, not .96: the drawer is a panel you read menu items off, not glass.
     See the .nav--stuck note below for why even .96 was not opaque enough. */
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0; background: var(--ink);
    border-bottom: 1px solid rgba(236,231,221,.1); padding: 8px 24px 20px; }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 12px 0; width: 100%; }
  /* .nav__cta keeps its desktop margin-left:14px in the drawer, which pushed the
     Contact block 14px right of every other row and 14px past the panel's right
     padding. Only the scrolled state had ever reset it. */
  .nav__cta { margin-left: 0; }
  .nav__burger { display: block; }
  /* At 30px tall the wordmark ran to 142px — 38% of a 375px screen. */
  .nav__logo img { height: 23px; }
  .nav--stuck .nav__logo img { height: 19px; }
  /* Shrinking the wordmark also shrank the tap target to 23px tall, well under
     the ~44px a thumb needs, so "tap the logo to go home" kept missing. Pad the
     link out to a 44px target without changing how big the logo looks. */
  .nav__logo { min-height: 44px; padding-right: 10px; }
  .foot-logo { padding: 7px 12px 7px 0; margin-bottom: calc(1.1rem - 7px); }
  /* The desktop .nav--stuck rules place the links with inset:0 and pull the CTA
     out to right:12px/top:50%. On mobile that crushes the whole drop-down into
     the 46px condensed bar and leaves the green Contact block floating over the
     page. Re-assert the panel layout for the scrolled state. */
  .nav--stuck .nav__links { top: 100%; right: 0; bottom: auto; left: 0;
    justify-content: flex-start; pointer-events: auto;
    /* the desktop condensed-bar rule sets padding-right:12px to pull the row to
       the bar edge; in the drawer that left 24px of padding on the left and 12px
       on the right, so restate the panel padding */
    padding: 8px 24px 20px; }
  /* The condensed bar is 35% ink over a blur. backdrop-filter makes the nav a
     backdrop root, so the drawer — a child hanging below the bar's own box —
     gets composited into that group and the page reads straight through it,
     whatever alpha the panel itself carries. With the menu open the header
     stops being glass and becomes a solid surface, which is what a drawer
     wants anyway. */
  .nav--stuck:has(.nav__links.open) { background: var(--ink);
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav--stuck .nav__links a:not(.nav__cta):not(.nav__invest) { font-size: 12px; padding: 12px 0; }
  /* the condensed-bar sizing above is (0,2,0) and !important, so the drawer has
     to restate Invest at matching weight or it keeps the 46px-bar padding and
     the box collapses to a thin outlined strip */
  .nav--stuck .nav__invest { margin-left: 0; padding: 11px 22px !important; font-size: 14px !important; }
  .nav--stuck .nav__cta { position: static; transform: none; margin-left: 0;
    padding: 12px 18px !important; font-size: 14px !important; }
  .stats { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* ================= Hero typing effect ================= */
.typefx { position: relative; }
.typefx__ghost { visibility: hidden; }
.typefx__live { position: absolute; inset: 0; }
.typefx__cursor { display: inline-block; width: .06em; height: .92em; margin-left: .06em;
  background: var(--signal); vertical-align: -.06em; animation: type-blink 1s steps(1) infinite; }
@keyframes type-blink { 50% { opacity: 0; } }

/* ================= Blueprint (waffle) pattern overlays ================= */
.bp { position: relative; }
.bp::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(16,163,126,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,163,126,.09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.9) 100%);
  mask-image: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.9) 100%); }
.bp > .wrap { position: relative; z-index: 1; }
.bp--light::before {
  background-image:
    linear-gradient(rgba(7,7,7,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,7,7,.05) 1px, transparent 1px); }
.bp--full::before { -webkit-mask-image: none; mask-image: none; }
/* careers page: blueprint grid — barely-there texture */
.page-careers .bp::before {
  background-image:
    linear-gradient(rgba(16,163,126,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,163,126,.1) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.9) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.9) 100%);
}
.page-careers .bp--light::before {
  background-image:
    linear-gradient(rgba(10,73,56,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,73,56,.05) 1px, transparent 1px);
}
/* ambition heading: staggered word rise-in */
#ambH .w {
  display: inline-block;
  opacity: 0; transform: translateY(0.55em); filter: blur(5px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.55s ease;
  transition-delay: calc(var(--wi) * 75ms);
}
#ambH.play .w { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { #ambH .w { transition: none; opacity: 1; transform: none; filter: none; } }

/* ================= Crop marks (registration corners) ================= */
.crops { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.crops span { position: absolute; font-family: "IBM Plex Mono", monospace; font-size: 16px; color: rgba(236,231,221,.45); }
.crops span:nth-child(1) { top: 88px; left: 22px; }
.crops span:nth-child(2) { top: 88px; right: 22px; }
.crops span:nth-child(3) { bottom: 18px; left: 22px; }
.crops span:nth-child(4) { bottom: 18px; right: 22px; }

/* ================= Reveal on scroll ================= */
/* Hidden only once fx.js has confirmed it is running (it sets .js-anim on
   <html> immediately). Without that guard, a script error or a blocked file
   would leave every revealed element stuck at opacity 0 — the content would
   be gone rather than merely un-animated. */
.js-anim .rv,
.js-anim .rv-l,
.js-anim .rv-r { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.js-anim .rv { transform: translateY(26px); }
.js-anim .rv-l { transform: translateX(-40px); }
.js-anim .rv-r { transform: translateX(40px); }
.js-anim .rv.shown,
.js-anim .rv-l.shown,
.js-anim .rv-r.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .rv, .js-anim .rv-l, .js-anim .rv-r {
    opacity: 1; transform: none; transition: none;
  }
}
.rv-d1 { transition-delay: .15s; }

/* ================= NEMI loop journey (full-bleed alternating) ================= */
@media (min-width: 901px) { .sec-flow { display: block; min-height: auto; padding: 96px 0 0; } }
.sec-flow { padding-bottom: 0; }
.sec-flow .head { margin-bottom: 48px; }
.flow-row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.flow-row--flip .flow-row__media { order: 2; }
.flow-row--flip .flow-row__copy { order: 1; }
.flow-row__media { position: relative; overflow: hidden; background: var(--ink); min-height: 74vh; }
.flow-row__media video, .flow-row__media img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flow-row__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none;
  background: linear-gradient(200deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.78) 100%); }
.flow-row__letter { position: absolute; bottom: 2px; left: 22px; font-weight: 700; line-height: 1;
  font-size: clamp(96px, 10vw, 180px); color: var(--signal); user-select: none; }
.flow-row__letter i { font-style: normal; margin-left: 14px; font-family: "IBM Plex Mono", monospace; font-weight: 400;
  font-size: 14px; letter-spacing: 4px; color: var(--oat); text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.flow-row__tag { position: absolute; top: 20px; left: 20px; font-family: "IBM Plex Mono", monospace;
  font-size: 12px; letter-spacing: 3px; color: rgba(236,231,221,.95); background: rgba(0,0,0,.35); padding: 4px 8px; }
.flow-row__copy { display: flex; align-items: center; background: var(--bone); border-bottom: 1px solid rgba(7,7,7,.1); }
.flow-row--flip .flow-row__copy { justify-content: flex-end; }
.flow-row__copy > div { padding: 64px 56px; max-width: 640px; }
.flow-row__kicker { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 4px;
  color: var(--signal); text-transform: uppercase; }
.flow-row__copy h3 { margin-top: 20px; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -1px; font-weight: 600; line-height: 1.12; }
.flow-row__copy p { margin-top: 22px; font-weight: 300; font-size: 14px; line-height: 1.8; color: rgba(7,7,7,.65); }
@media (max-width: 900px) {
  .flow-row { grid-template-columns: 1fr; }
  .flow-row__media { min-height: 0; aspect-ratio: 16/10; }
  .flow-row--flip .flow-row__media { order: 0; }
  .flow-row--flip .flow-row__copy { order: 1; justify-content: flex-start; }
  .flow-row__copy > div { padding: 36px 24px; }
  .flow-row__letter { font-size: 96px; }
}

/* ================= Intro statement — pinned scroll (Do for hardware…) ================= */
.pinwrap { position: relative; height: 260vh; }
.sec-pin { position: sticky; top: 0; height: 100vh; min-height: 0; display: block;
  overflow: hidden; background: var(--bone); padding: 0; }
.pin__title { position: absolute; left: 0; right: 0; top: 50%; display: flex; justify-content: center;
  padding: 0 24px; transform: translateY(-50%); will-change: top, transform; }
.pin__title h2 { max-width: 1400px; text-align: center; font-weight: 600; line-height: 1.02;
  letter-spacing: -2px; font-size: clamp(40px, 5.8vw, 84px); }
.pin__clip { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); overflow: hidden; }
.pin__lines { text-align: center; opacity: 0; transform: translateX(100vw); will-change: transform; }
.pin__lines > div { white-space: nowrap; font-weight: 500; letter-spacing: -.5px; line-height: 1.35;
  font-size: clamp(15px, 2.15vw, 44px); }
.pin__lines > div + div { margin-top: 12px; }
.pin__lines .hl, .pin__title .accent-deep {
  color: var(--emerald);
  background-image: linear-gradient(100deg,
    rgba(16,163,126,0) 0.5%, rgba(16,163,126,.24) 3%,
    rgba(16,163,126,.24) 97%, rgba(16,163,126,0) 99.5%);
  background-repeat: no-repeat; background-size: 0% 78%; background-position: 0 62%;
  transition: background-size .65s cubic-bezier(.25,.6,.25,1);
  padding: 0 .08em; margin: 0 -.08em;
}
.pin__lines.hl-on .hl, .pin__title.hl-on .accent-deep { background-size: 100% 78%; }
.pin__lines > div:nth-child(1) .hl { transition-delay: .05s; }
.pin__lines > div:nth-child(2) .hl { transition-delay: .2s; }
.pin__lines > div:nth-child(3) .hl { transition-delay: .35s; }
.pin__meta { position: absolute; bottom: 34px; left: 32px; font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(7,7,7,.4); opacity: 0; transition: opacity .3s; }
.pin__cta { opacity: 0; transition: opacity .3s, background .2s; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .pinwrap { height: auto; }
  .sec-pin { position: static; height: auto; overflow: visible; padding: 80px 0; }
  .pin__title { position: static; transform: none !important; padding: 0 24px; }
  .pin__title h2 { font-size: 34px; letter-spacing: -1.2px; }
  .pin__clip { position: static; transform: none; overflow: visible; margin-top: 28px; }
  .pin__lines { opacity: 1 !important; transform: none !important; padding: 0 24px; }
  .pin__lines > div { white-space: normal; font-size: 16px; display: inline; }
  .pin__lines .hl, .pin__title .accent-deep { background-size: 100% 78%; }
  .pin__meta { display: none; }
  .pin__cta { position: static; display: inline-flex; margin: 32px 24px 0; opacity: 1 !important; }
}
.crops--dark span { color: rgba(7,7,7,.3); }
.mp-btn { position: absolute; right: 28px; bottom: 28px; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
  background: var(--emerald); color: var(--bone); font-weight: 600; font-size: 14px; padding: 14px 22px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); transition: background .2s; }
.mp-btn:hover { background: #0c5a45; }
.mp-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }

/* ================= LMM stack — suites left, fanned screenshots right ================= */
@media (min-width: 901px) {
  .sec-suites { padding: 56px 0; }
  .sec-suites .head { margin-bottom: 24px; }
}
.suites { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; }
.suites__list { display: flex; flex-direction: column; gap: 16px; }
.suites__shots { position: relative; aspect-ratio: 16/11; }
.suites__shots .shot { position: absolute; width: 82%; height: auto; background: var(--bone);
  border: 1px solid rgba(7,7,7,.16); box-shadow: 0 32px 64px -28px rgba(7,7,7,.45);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: transform .35s; }
.suites__shots .shot-1 { top: 0; left: 0; transform: rotate(-1.6deg); z-index: 1; }
.suites__shots .shot-2 { top: 16%; left: 9%; transform: rotate(1.2deg); z-index: 2; }
.suites__shots .shot-3 { top: 32%; left: 18%; transform: rotate(-0.8deg); z-index: 3; }
.suites__shots .shot:hover { transform: rotate(0deg) scale(1.03); z-index: 4; }
@media (max-width: 900px) {
  .suites { grid-template-columns: 1fr; gap: 32px; }
  .suites__shots { aspect-ratio: auto; }
  .suites__shots .shot { position: static; width: 100%; transform: none; margin-top: 14px; }
}

/* ================= Where we focus — expanding panel gallery ================= */
@media (min-width: 901px) {
  .sec-focus { padding: 48px 0; }
  .sec-focus .head { margin-bottom: 20px; }
  .sec-focus .head h2 { font-size: clamp(24px, 2.6vw, 36px); }
}
.expander { display: flex; gap: 14px; height: min(56vh, 480px); }
.exp-panel { position: relative; overflow: hidden; flex: 1; min-width: 0; cursor: pointer;
  background: var(--panel); border: 1px solid rgba(236,231,221,.08);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: flex .65s cubic-bezier(.22,.61,.24,1); }
.exp-panel.active { flex: 2.6; }
.exp-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .65s, filter .5s; filter: grayscale(.35) brightness(.85); }
.exp-panel.active img { filter: grayscale(0) brightness(1); }
.exp-panel:hover img { transform: scale(1.04); }
.exp-panel img.img-zoom { transform: scale(1.16); }
.exp-panel:hover img.img-zoom { transform: scale(1.2); }
.exp-panel__num { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: 2px; color: rgba(236,231,221,.9); background: rgba(0,0,0,.4); padding: 4px 8px; }
.exp-panel__body { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; }
.exp-panel__name { color: var(--bone); font-weight: 600; font-size: 17px; letter-spacing: -.3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.exp-panel__desc { margin-top: 0; max-width: 420px; font-weight: 300; font-size: 13px; line-height: 1.6;
  color: rgba(236,231,221,.75); opacity: 0; transform: translateY(10px);
  max-height: 0; overflow: hidden;
  transition: opacity .4s .25s, transform .4s .25s, max-height .5s .1s, margin-top .5s .1s; }
.exp-panel.active .exp-panel__desc { opacity: 1; transform: none; max-height: 140px; margin-top: 8px; }
.rv-d2 { transition-delay: .3s; }
.rv-d3 { transition-delay: .45s; }
@media (max-width: 900px) {
  .expander { flex-direction: column; height: auto; }
  .exp-panel { flex: none; aspect-ratio: 16/9; }
  .exp-panel__desc { opacity: 1; transform: none; max-height: none; margin-top: 8px; }
}

/* ================= Case studies — card deck (stacked cards, scroll to advance) ================= */
.deckwrap { position: relative; height: 300vh; }
.sec-deck { position: sticky; top: 0; height: 100vh; min-height: 0; display: flex;
  flex-direction: column; justify-content: center; padding: 64px 0 36px; overflow: hidden; }
.sec-deck > .wrap { width: 100%; }
.deck-head { text-align: center; margin-bottom: 26px; }
.deck-head h2 { margin-top: 12px; font-size: clamp(26px, 3vw, 42px); }
.deck { position: relative; height: min(calc(100vh - 250px), 620px); margin-top: 0; }
.deck-card { position: absolute; inset: 0; display: flex; align-items: center;
  background: var(--bone); border: 1px solid rgba(7,7,7,.12); padding: 36px 44px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  box-shadow: 0 40px 80px -40px rgba(7,7,7,.4); will-change: transform; overflow: hidden; }
.deck-card .cs { width: 100%; }
.deck-card .cs__media { aspect-ratio: 16/10; }
.deck-card--dark { background: var(--ink); color: var(--bone); border-color: rgba(236,231,221,.16); }
.deck-card--dark .cs__kpi .v { color: var(--signal); }
.deck-card--dark .cs__kpi .l { color: rgba(236,231,221,.55); }
.deck-card--dark .cs__did { color: rgba(236,231,221,.7); }
.deck-card--dark .cs__quote cite { color: rgba(236,231,221,.55); }
@media (max-width: 900px) {
  .deckwrap { height: auto; }
  .sec-deck { position: static; height: auto; overflow: visible; padding: 48px 0; }
  .deck { height: auto; margin-top: 0; }
  .deck-card { position: static; transform: none !important; margin-top: 20px; padding: 24px; }
}
/* case-studies page: cards as plain sections, no deck stacking */
.case-sec { padding: 70px 0; }
.deck-card--static { position: static; inset: auto; height: auto; }
@media (max-width: 900px) { .case-sec { padding: 40px 0; } .deck-card--static { margin-top: 0; } }

/* ===== Scalable case-study list — auto-numbered, auto-alternating ===== */
/* NOTE: uses a unique .cstudy prefix to avoid the legacy .case image-tile rules */
.cases { counter-reset: cstudy; position: relative; }
.cstudy { position: relative; padding: clamp(52px, 7vw, 104px) 0; background: var(--bone); border-top: 1px solid rgba(7,7,7,0.1); }
.cstudy:first-of-type { border-top: 0; }
.cstudy:nth-of-type(even) { background: var(--ink); border-top-color: rgba(236,231,221,0.14); }
.cstudy__row { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(30px, 4.5vw, 70px); align-items: center; }
.cstudy:nth-of-type(even) .cstudy__media { order: 2; }        /* flip image side on alternate rows */

.cstudy__media { position: relative; }
.cstudy__media img {
  position: static; inset: auto;
  width: 100%; height: auto; aspect-ratio: 16/11; object-fit: cover; display: block;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.6);
}
.cstudy__media::before {
  counter-increment: cstudy; content: "Case " counter(cstudy, decimal-leading-zero);
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: #FFFFFF; background: var(--emerald); padding: 8px 14px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.cstudy__tag { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--signal); }
.cstudy__title { margin-top: 14px; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.06; color: var(--ink); }
.cstudy:nth-of-type(even) .cstudy__title { color: var(--bone); }
.cstudy__kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 26px 0; padding: 20px 0;
  border-top: 1px solid rgba(7,7,7,0.12); border-bottom: 1px solid rgba(7,7,7,0.12);
}
.cstudy:nth-of-type(even) .cstudy__kpis { border-color: rgba(236,231,221,0.16); }
.cstudy__kpis b { display: block; font-size: clamp(19px, 2.3vw, 27px); font-weight: 600; letter-spacing: -0.5px; color: var(--emerald); }
.cstudy:nth-of-type(even) .cstudy__kpis b { color: var(--signal); }
.cstudy__kpis span { display: block; margin-top: 5px; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; line-height: 1.4; color: var(--grey); }
.cstudy:nth-of-type(even) .cstudy__kpis span { color: rgba(236,231,221,0.55); }
.cstudy__text { font-size: 15px; line-height: 1.72; color: #33332e; }
.cstudy:nth-of-type(even) .cstudy__text { color: rgba(236,231,221,0.72); }
.cstudy__quote { margin-top: 24px; padding-left: 18px; border-left: 2px solid var(--signal); }
.cstudy__quote p { font-size: 16px; font-style: italic; line-height: 1.55; color: var(--ink); }
.cstudy:nth-of-type(even) .cstudy__quote p { color: var(--bone); }
.cstudy__quote cite { display: block; margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-style: normal; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--grey); }
.cstudy:nth-of-type(even) .cstudy__quote cite { color: rgba(236,231,221,0.5); }
@media (max-width: 860px) {
  .cstudy__row { grid-template-columns: 1fr; gap: 24px; }
  .cstudy:nth-of-type(even) .cstudy__media { order: 0; }
  .cstudy__kpis { gap: 10px; }
}

/* ================= Fortress Factories — headline row, 6 tiles, stat trio ================= */
@media (min-width: 901px) { .sec-fort { padding: 48px 0; } }
.fort-head { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.fort-head h2 { margin-top: 14px; max-width: 940px; font-size: clamp(24px, 2.9vw, 40px); letter-spacing: -1.2px; }
.fort-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; background: var(--ink);
  color: var(--bone); font-weight: 600; font-size: 14px; padding: 14px 24px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); transition: background .2s; }
.fort-btn:hover { background: var(--emerald); }
.fort-btn span { transition: transform .2s; }
.fort-btn:hover span { transform: translateX(3px); }
.fort-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.fort-tile { position: relative; aspect-ratio: 3/3.6; overflow: hidden; background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.fort-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.fort-tile:hover img { transform: scale(1.04); }
.fort-tile__num { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: 2px; color: rgba(236,231,221,.9); }
.fort-tile__name { position: absolute; left: 12px; bottom: 12px; z-index: 2; color: var(--bone);
  font-weight: 600; font-size: 18px; letter-spacing: -.4px; }
.fort-tile__arrow { position: absolute; right: 12px; bottom: 12px; z-index: 2; color: var(--signal);
  font-weight: 300; font-size: 14px; opacity: 0; transition: opacity .25s; }
.fort-tile:hover .fort-tile__arrow { opacity: 1; }
.fort-stats { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fort-stat { position: relative; padding: 22px 24px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.fort-stat--emerald { background: var(--emerald); color: var(--bone); }
.fort-stat--graphite { background: var(--graphite); color: var(--bone); }
.fort-stat--bone { background: var(--bone); color: var(--ink); border: 1px solid rgba(7,7,7,.1); }
.fort-stat .idx { position: absolute; top: 14px; right: 18px; font-family: "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: 2px; opacity: .4; }
.fort-stat .v { font-weight: 700; font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -.8px; line-height: 1; }
.fort-stat .l { margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; opacity: .6; }
@media (max-width: 900px) {
  .fort-head { flex-direction: column; align-items: flex-start; }
  .fort-grid { grid-template-columns: repeat(2, 1fr); }
  .fort-tile { aspect-ratio: 4/3; }
  .fort-stats { grid-template-columns: 1fr; }
}

/* ================= Months-to-hours — live loop animation ================= */
.loop-step { transition: transform .35s, box-shadow .35s, border-color .35s; }
.loop-step.active { border-color: var(--signal); transform: translateY(-5px);
  box-shadow: 0 0 0 2px var(--signal), 0 18px 36px -14px rgba(16,163,126,.55); }
.loop-step.active .loop-step__cap { background: var(--signal); }
.loop-step.active .loop-step__cap b { color: rgba(254,254,254,.85); }
.loop-step.active .loop-step__cap span { color: var(--bone); }
.loop-arrow.active em { color: var(--signal); }
.lb-spin { display: inline-block; animation: lb-rotate 6s linear infinite; }
@keyframes lb-rotate { to { transform: rotate(360deg); } }

/* ================= Months-to-hours — compact, fits one viewport ================= */
@media (min-width: 901px) { .sec-months { padding: 52px 0; } }
.sec-months .head { margin-bottom: 20px; }
.sec-months .head h2 { font-size: clamp(22px, 2.3vw, 32px); }
.sec-months .loop-step img { aspect-ratio: 16/9; }
.sec-months .loop-step__cap { padding: 7px 10px; }
.sec-months .loopbar { margin: 12px 0 !important; }

/* ================= Loop 4-panel — compact, fits one viewport ================= */
@media (min-width: 901px) { .sec-loop { padding: 64px 0; } }
.sec-loop .head { margin-bottom: 26px; }
.sec-loop .loop-panel__media { aspect-ratio: 16/9; }
.sec-loop .loop-panel__content { padding: 16px 18px 12px; }
.sec-loop .loop-panel__stage { font-size: 21px; }
.sec-loop .loop-panel__body { margin-top: 10px; font-size: 13px; }

/* ================= Who we are — full-bleed darkened aerial ================= */
.sec-who {
  position: relative; overflow: hidden; color: var(--bone);
  background: url("../img/about-aerial.jpg") center / cover no-repeat;
}
/* zoom the factory video in, anchored left, so the left-side detail enlarges into view */
.sec-who .bgvideo { transform: scale(1.22); transform-origin: left center; }
.sec-who__overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(160deg, rgba(10,73,56,.45) 0%, rgba(7,7,7,0) 45%),
    linear-gradient(90deg, rgba(7,7,7,.92) 0%, rgba(7,7,7,.68) 52%, rgba(7,7,7,.38) 100%); }
.sec-who.bp::before { z-index: 1; }
.sec-who h2 { color: var(--bone); }
.sec-who .accent-deep { color: var(--signal); }
.sec-who p { color: rgba(236,231,221,.82); max-width: 560px; }
.sec-who .stat { box-shadow: 0 18px 40px -22px rgba(0,0,0,.65); transition: transform .3s; }
.sec-who .stat:hover { transform: translateY(-3px); }
.sec-who .stat--o { border: 0; }
/* fix: this stat inherited dark ink text on a dark box — brighten it to match the other two */
.sec-who .stat--o, .sec-who .stat--o .v, .sec-who .stat--o .l { color: var(--bone); }
.sec-who__caption { position: absolute; right: 28px; bottom: 24px; z-index: 1;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(236,231,221,.55);
  background: rgba(7,7,7,.35); padding: 6px 10px; backdrop-filter: blur(4px); }

/* ================= Auxiliary services — image cards ================= */
@media (min-width: 901px) { .sec-aux { padding: 40px 0; } .sec-aux .head { margin-bottom: 16px; } .sec-aux .head h2 { font-size: clamp(24px, 2.6vw, 36px); } }
.card--img { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__media { position: relative; aspect-ratio: 3/1; overflow: hidden; background: var(--ink); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card--img:hover .card__media img { transform: scale(1.05); }
.card--img .card__body { padding: 14px 18px 16px; }
.card--img .card__body h3 { margin-top: 5px; font-size: 19px; }
.card--img .card__body p { margin-top: 7px; font-size: 13.5px; }

/* ================= Life at NEMI — editorial mosaic ================= */
.life-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 218px; gap: 14px; }
.life-tile { position: relative; overflow: hidden; background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.life-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.life-tile:hover img { transform: scale(1.04); }
.life-tile--feature { grid-column: span 2; grid-row: span 2; }
.life-tile--wide { grid-column: span 2; }
.life-tile__cap::before, .life-card__kicker::before {
  /* blinking live dot — the floor is being watched by the model */
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
  background: var(--signal); box-shadow: 0 0 8px rgba(16,163,126,0.9);
  animation: livedot 1.4s ease-in-out infinite;
}
@keyframes livedot { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .life-tile__cap::before, .life-card__kicker::before { animation: none; } }
.life-tile__cap { position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(236,231,221,.92); background: rgba(0,0,0,.38); padding: 5px 9px; }
.life-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: center; background: var(--graphite); color: var(--bone); padding: 24px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.life-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.life-card:hover > img { transform: scale(1.04); }
.life-card__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,7,.45) 0%, rgba(7,7,7,.78) 100%); }
.life-card__inner { position: relative; z-index: 1; }
.life-card__kicker { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--signal); }
.life-card p { margin-top: 12px; font-weight: 300; font-size: 14px; line-height: 1.65; color: rgba(236,231,221,.8); }
@media (max-width: 900px) {
  .life-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .life-tile, .life-tile--feature, .life-tile--wide { grid-column: auto; grid-row: auto; aspect-ratio: 16/9; }
  .life-card { aspect-ratio: auto; }
}

/* ================= Founder vision quote band ================= */
.sec-vision .vision { max-width: 1040px; }
.sec-vision blockquote { margin: 22px 0 0; font-weight: 500; letter-spacing: -1px; line-height: 1.22;
  font-size: clamp(28px, 3.7vw, 46px); }
.sec-vision cite { display: block; margin-top: 30px; font-style: normal; font-family: "IBM Plex Mono", monospace;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--emerald); }

/* ================= Inline certification chips ================= */
.certs-inline { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.cert-chip { background: var(--bone); border: 1px solid rgba(7,7,7,.15); padding: 14px 20px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.cert-chip b { display: block; font-weight: 600; font-size: 15px; letter-spacing: -.3px; color: var(--ink); }
.cert-chip span { display: block; margin-top: 5px; font-family: "IBM Plex Mono", monospace; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--emerald); }
.sec-who .cert-chip { background: rgba(7,7,7,.55); border: 1px solid rgba(236,231,221,.18);
  border-left: 2px solid var(--signal); backdrop-filter: blur(6px);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.sec-who .cert-chip b { color: var(--bone); }
.sec-who .cert-chip span { color: var(--signal); }
/* Stacked on narrow screens they each size to their own text — 242px next to
   282px — so the left edges line up but the right ones are ragged. Stretch
   them to a shared width so the block reads as one aligned column. */
@media (max-width: 900px) {
  .certs-inline { flex-direction: column; align-items: stretch; }
  .certs-inline .cert-chip { width: 100%; }
  /* The location caption is a one-line label pinned bottom-right on desktop.
     At this width it wraps to two lines and rides up over the last chip, so
     put it back in normal flow underneath instead. */
  .sec-who__caption {
    position: static; right: auto; bottom: auto;
    display: block; margin: 1.25rem 24px 0;
    letter-spacing: 2px; line-height: 1.7;
  }
}

/* ================= Eras timeline (Every few decades) ================= */
@media (min-width: 901px) { .sec-eras { display: block; min-height: auto; padding: 96px 0; } }
.sec-eras .head { margin-bottom: 52px; }
/* The era rows sit flush to the .wrap edge, and .rv-r parks them 40px further
   right until they animate in — 16px past the viewport on a phone. Clip here so
   that overshoot never joins the page's scrollable area. `clip` (not `hidden`)
   keeps this from becoming a scroll container. */
.eras { position: relative; overflow-x: clip; }
.eras__spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(236,231,221,.15); }
.era { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.era + .era { margin-top: 60px; }
.era__node { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg);
  width: 12px; height: 12px; background: rgba(236,231,221,.4); }
.era--today .era__node { background: var(--signal); }
.era__visual { padding-right: 64px; }
.era--flip .era__visual { order: 2; padding-right: 0; padding-left: 64px; }
.era__frame { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--graphite);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.era__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.era__by { position: absolute; top: 14px; left: 14px; font-family: "IBM Plex Mono", monospace; font-size: 10px;
  letter-spacing: 3px; text-transform: uppercase; color: rgba(236,231,221,.9); background: rgba(0,0,0,.4); padding: 4px 8px; }
.era__info { padding-left: 64px; }
.era--flip .era__info { order: 1; padding-left: 0; padding-right: 64px; text-align: right; }
.era__year { font-weight: 700; font-size: clamp(44px, 5vw, 68px); letter-spacing: -2px; line-height: 1; color: var(--oat); }
.era--today .era__year { color: var(--signal); }
.era__today { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 3px; color: var(--signal); margin-left: 14px; }
.era__info h3 { margin-top: 14px; font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.5px; color: var(--bone); }
.era__byline { margin-top: 6px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(236,231,221,.45); }
.era__info p { margin-top: 16px; font-family: "IBM Plex Mono", monospace; font-size: 13px; line-height: 1.75;
  color: rgba(236,231,221,.6); max-width: 440px; }
.era--flip .era__info p { margin-left: auto; }
.eras-stats { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.eras-stat { padding: 32px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.eras-stat--emerald { background: var(--emerald); color: var(--bone); }
.eras-stat--graphite { background: var(--graphite); color: var(--bone); }
.eras-stat--oat { background: var(--oat); color: var(--ink); }
.eras-stat .v { font-weight: 700; font-size: clamp(36px, 3.4vw, 48px); letter-spacing: -1.5px; line-height: 1; }
.eras-stat .l { margin-top: 12px; font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.6; opacity: .78; }
.eras-stat .l b { font-weight: 500; color: var(--signal); }
.eras-stat--oat .l b { color: var(--emerald); }
.eras-callout { margin-top: 32px; border-left: 2px solid var(--signal); background: rgba(236,231,221,.05); padding: 20px 32px;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 2px; color: var(--signal); text-transform: uppercase; }
.eras-credit { margin-top: 20px; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(236,231,221,.3); }
@media (max-width: 900px) {
  .eras__spine { left: 22px; }
  .era { grid-template-columns: 1fr; gap: 20px; padding-left: 44px; }
  .era + .era { margin-top: 56px; }
  .era__node { left: 22px; top: 8px; }
  .era__visual, .era--flip .era__visual { order: 0; padding: 0; }
  .era__info, .era--flip .era__info { order: 1; padding: 0; text-align: left; }
  .era--flip .era__info p { margin-left: 0; }
  .eras-stats { grid-template-columns: 1fr; }
}

/* ================= Thesis — three statements + robots video ================= */
@media (min-width: 901px) { .sec-thesis { padding: 56px 0; } }
.thesis-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.thesis-item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 26px 0;
  border-bottom: 1px solid rgba(236,231,221,.14); }
.thesis-item:first-of-type { margin-top: 10px; border-top: 1px solid rgba(236,231,221,.14); }
.thesis-item span { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 2px;
  color: var(--signal); padding-top: 6px; }
.thesis-item p { color: var(--bone); font-weight: 500; font-size: clamp(18px, 1.9vw, 25px);
  letter-spacing: -.5px; line-height: 1.3; }
.thesis-item p b { font-weight: 500; color: var(--signal); }
.thesis-media { position: relative; overflow: hidden; aspect-ratio: 16/11; background: var(--panel);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  border: 1px solid rgba(236,231,221,.12); }
.thesis-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thesis-media__cap { position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(236,231,221,.92); background: rgba(7,7,7,.45); padding: 5px 9px; }
@media (max-width: 900px) { .thesis-split { grid-template-columns: 1fr; gap: 28px; } }

/* ================= Four suites (home) ================= */
@media (min-width: 901px) { .sec-suiteshome { padding: 48px 0; } .sec-suiteshome .head { margin-bottom: 22px; } }
.sec-suiteshome .card__media { aspect-ratio: 16/10; }
.suite-card .card__body h3 { font-size: 20px; margin-top: 6px; }
.suite-card .card__body p { font-size: 13px; }
.suite-card { transition: transform .3s, box-shadow .3s; }
.suite-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(7,7,7,.35); }

/* ================= Proof stats + Phase One markets ================= */
@media (min-width: 901px) { .sec-markets { padding: 44px 0; } .sec-markets .head { margin-bottom: 18px; } }
.proof-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.proof-stat { padding: 18px 20px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.proof-stat--e { background: var(--emerald); color: var(--bone); }
.proof-stat--g { background: var(--graphite); color: var(--bone); }
.proof-stat--b { background: var(--oat); color: var(--ink); }
.proof-stat .v { font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -1px; line-height: 1; }
.proof-stat .l { margin-top: 8px; font-family: "IBM Plex Mono", monospace; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; }
.market-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.market-tile { position: relative; overflow: hidden; aspect-ratio: 16/9.5; background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.market-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.market-tile:hover img { transform: scale(1.05); }
.market-tile span { position: absolute; left: 12px; bottom: 10px; z-index: 2; color: var(--bone);
  font-weight: 600; font-size: 14px; letter-spacing: -.2px; }
@media (max-width: 900px) {
  .proof-row { grid-template-columns: repeat(2, 1fr); }
  .market-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Eyebrows/kickers removed site-wide per request */
.kicker { display: none !important; }

/* ── contact form ─────────────────────────────────────────── */
.cform-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 5vw, 60px); align-items: start; margin-top: clamp(28px, 4vw, 44px); }
.cform-info .cinfo-row { padding: 15px 0; border-bottom: 1px solid rgba(7,7,7,.1); }
.cform-info .cinfo-row:last-child { border-bottom: 0; }
.cform-info .cinfo-k { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--emerald); }
.cform-info .cinfo-v { font-size: 17px; margin-top: 5px; color: var(--ink); font-weight: 500; }
.cform-info .cinfo-v a { color: inherit; text-decoration: none; }
.cinfo-soon { display: inline-block; margin-top: 4px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--signal); }
.cform-info .cinfo-v a:hover { color: var(--emerald); }
.cform { background: #ffffff; border: 1px solid rgba(7,7,7,.12); padding: clamp(22px, 3vw, 34px);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); box-shadow: 0 3px 16px rgba(7,7,7,.05); }
.cform .field { margin-bottom: 15px; }
.cform label { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--emerald); margin-bottom: 6px; }
.cform input, .cform select, .cform textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(7,7,7,.18);
  background: var(--bone); font-family: inherit; font-size: 15px; color: var(--ink); border-radius: 0; transition: border-color .2s; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--emerald); }
.cform textarea { min-height: 118px; resize: vertical; }
.cform .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform button { margin-top: 4px; width: 100%; }
.cform__ok { display: none; text-align: center; padding: clamp(34px, 5vw, 48px) 26px; background: rgba(16,163,126,.08); border: 1px solid rgba(16,163,126,.3); color: rgba(7,7,7,.66); font-weight: 400; line-height: 1.65; }
.cform__ok::before { content: '\2713'; display: block; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; background: var(--emerald); color: #fff; font-size: 30px; line-height: 58px; box-shadow: 0 8px 22px rgba(10,73,56,.28); }
.cform__ok b { display: block; margin-bottom: 6px; font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; letter-spacing: -.3px; color: var(--emerald); }
.cform.sent form { display: none; }
.cform.sent .cform__ok { display: block; animation: okPop .5s cubic-bezier(.22,1,.36,1); }
@keyframes okPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
/* email OTP verification */
.otp-verify { margin: -6px 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.otp-verify .btn { width: auto; margin-top: 0; padding: 9px 16px; font-size: 12px; }
.otp-step { display: flex; gap: 8px; align-items: center; }
.otp-verify .otp-code { width: 150px; padding: 10px 12px; border: 1px solid rgba(7,7,7,.2); font-family: "IBM Plex Mono", monospace; font-size: 15px; letter-spacing: 5px; text-align: center; }
.otp-verify .otp-code:focus { outline: none; border-color: var(--emerald); }
.otp-msg { flex-basis: 100%; margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .4px; color: rgba(7,7,7,.55); }
.otp-msg--err { color: #b3261e; }
.form-status { margin: 10px 0 0; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .4px; color: #b3261e; }
.otp-msg--ok { color: var(--emerald); font-weight: 600; }
.otp-verify.is-verified .otp-send { display: none; }
.otp-verify.is-verified .otp-code { display: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* the confirmed button reads as success — keep it green + full opacity even though disabled */
.otp-confirm.btn--signal:disabled { opacity: 1; }
/* highlight the Verify button so it's the obvious next step; stops once verified */
@keyframes otpPulse { 0% { box-shadow: 0 0 0 0 rgba(16,163,126,.42); } 70% { box-shadow: 0 0 0 8px rgba(16,163,126,0); } 100% { box-shadow: 0 0 0 0 rgba(16,163,126,0); } }
.otp-verify:not(.is-verified) .otp-send { animation: otpPulse 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .otp-verify:not(.is-verified) .otp-send { animation: none; box-shadow: 0 0 0 3px rgba(16,163,126,.22); } }
@media (max-width: 820px) { .cform-split { grid-template-columns: 1fr; } .cform .field-row { grid-template-columns: 1fr; } }
/* iOS Safari zooms the page in when a focused field is under 16px, which throws
   the layout off mid-form. 16px on small screens keeps the viewport still. */
@media (max-width: 820px) {
  .cform input, .cform select, .cform textarea,
  .apply-form input, .apply-form textarea { font-size: 16px; }
  .otp-verify .otp-code { font-size: 16px; width: 132px; }
}

/* master-plan: floating collapse button while the plan is expanded */
.plan-close-float {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 400; margin: 0 !important; text-align: center;
  transition: opacity .35s ease, transform .35s ease;
}
.plan-close-float.faded { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(14px); }
.plan-close-float .btn {
  padding: 15px 30px; font-size: 14.5px;
  filter: drop-shadow(0 12px 30px rgba(7,7,7,.5));
  transition: transform .2s ease, filter .2s ease;
}
.plan-close-float .btn:hover { transform: translateY(-2px); filter: drop-shadow(0 18px 40px rgba(7,7,7,.6)); }
@media (max-width: 560px) { .plan-close-float { bottom: 16px; } .plan-close-float .btn { padding: 13px 24px; font-size: 13.5px; } }

/* ---------- Blog · case-study slider ---------- */
.slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(22px, 3vw, 34px); flex-wrap: wrap; }
.slider-nav { display: flex; gap: 10px; flex-shrink: 0; }
.slider-btn {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--emerald); border: 1px solid rgba(10,73,56,.3);
  font-size: 17px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  transition: background .25s, color .25s, border-color .25s, opacity .25s;
}
.slider-btn:hover:not(:disabled) { background: var(--emerald); color: var(--bone); border-color: var(--emerald); }
.slider-btn:disabled { opacity: .3; cursor: default; }

.cslide {
  --cs-gap: clamp(14px, 1.6vw, 22px);
  display: flex; gap: var(--cs-gap); overflow-x: auto; scroll-snap-type: x proximity;
  scroll-behavior: smooth; scroll-padding-left: 0; padding-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cslide::-webkit-scrollbar { display: none; }
.cslide__card {
  flex: 0 0 calc((100% - 2 * var(--cs-gap)) / 3);
  scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none;
  background: var(--bone); border: 1px solid rgba(7,7,7,.12); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s, box-shadow .3s;
}
.cslide__card:hover { transform: translateY(-4px); border-color: rgba(10,73,56,.4); box-shadow: 0 14px 32px rgba(7,7,7,.12); }
.cslide__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--graphite); }
.cslide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.cslide__card:hover .cslide__media img { transform: scale(1.045); }
.cslide__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.cslide__scope {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--signal);
}
.cslide__card h3 { margin: 9px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.4px; line-height: 1.25; color: var(--ink); }
.cslide__metrics { display: flex; gap: 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(7,7,7,.12); }
.cslide__metrics b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.cslide__metrics span { display: block; margin-top: 3px; font-family: "IBM Plex Mono", monospace; font-size: 9px;
  letter-spacing: 1.1px; text-transform: uppercase; color: rgba(7,7,7,.5); }
.cslide__more {
  margin-top: auto; padding-top: 16px;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--emerald);
}
.cslide__card:hover .cslide__more { color: var(--signal); }

.slider-dots { display: flex; gap: 8px; justify-content: center; margin-top: clamp(20px, 2.6vw, 30px); }
.slider-dot { width: 26px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(7,7,7,.18); transition: background .25s; }
.slider-dot.is-on { background: var(--signal); }

/* writing · coming-soon block */
.soon { max-width: 660px; }
.soon h2 { margin-top: 6px; }

@media (max-width: 1000px) { .cslide__card { flex-basis: calc((100% - var(--cs-gap)) / 2); } }
@media (max-width: 640px) { .cslide__card { flex-basis: 84%; } }

/* ---------- Careers · leadership principles ---------- */
/* image column runs alongside the card stack, so it costs no extra height */
.prin-split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(18px, 2.6vw, 38px); align-items: stretch; }
.prin-split--flip .prin-media { order: 2; }
.prin-media { position: relative; margin: 0; min-height: 260px; overflow: hidden; }
.prin-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow: 0 26px 60px -38px rgba(0,0,0,.45);
}
.prin-cards { display: grid; gap: 14px; grid-auto-rows: 1fr; align-content: stretch; }
@media (max-width: 900px) {
  .prin-split { grid-template-columns: 1fr; }
  .prin-split--flip .prin-media { order: 0; }
  .prin-media { min-height: 220px; }
}
/* inside each card the label sits beside the line, so no dead space */
.sec-principles .grid-2 { grid-auto-rows: 1fr; gap: 16px; }
.sec-principles .card {
  display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 22px;
  align-items: start; padding: 22px 24px;
}
.sec-principles .card h3 { margin-top: 0; font-size: 18px; letter-spacing: -.35px; line-height: 1.25; }
.sec-principles .card p { margin-top: 0; font-size: 14px; line-height: 1.55; }
@media (max-width: 900px) {
  .sec-principles .grid-2 { grid-template-columns: 1fr; }
  .sec-principles .card { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Careers · prosperity / pride / progress closer ---------- */
.ppp { margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid rgba(7,7,7,.14); }
.ppp__k {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--emerald); margin-bottom: clamp(14px, 1.6vw, 20px);
}
.ppp .grid-3 { gap: 16px; }
.ppp__item { display: flex; align-items: baseline; gap: 12px; }
.ppp__item h3 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--ink);
  white-space: nowrap;
}
.ppp__item h3::before {
  content: ''; display: inline-block; width: 14px; height: 2px; background: var(--signal);
  vertical-align: middle; margin-right: 10px;
}
.ppp__item p { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: rgba(7,7,7,.58); }
@media (max-width: 760px) { .ppp .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Offerings · core + auxiliary service cards ---------- */
/* compact: the whole core + auxiliary story fits one viewport.
   vertical rhythm is vh-based so it keeps fitting on shorter screens */
.sec-svcx { padding-top: clamp(24px, 4vh, 48px) !important; padding-bottom: clamp(24px, 4vh, 48px) !important; }
.svcx-rule { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.svcx-rule__k {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; color: var(--signal); white-space: nowrap;
}
.svcx-rule__line { flex: 1; height: 1px; background: rgba(7,7,7,.14); }
.svcx-rule__note {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(7,7,7,.42); white-space: nowrap;
}
.svcx-h { margin: 0 0 clamp(10px, 2.1vh, 21px); }
.svcx-h h2 { font-size: clamp(22px, 2.6vw, 38px); line-height: 1.1; }
.svcx-block + .svcx-block { margin-top: clamp(18px, 4.4vh, 44px); }

/* core — deep-emerald panels: blueprint grid, ghost numeral, label at the base */
.svcx-core { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(11px, 1.2vw, 16px); }
.svcx-big {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(118px, 21vh, 205px); padding: 18px 20px;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(46,230,168,.16) 0%, transparent 58%),
    linear-gradient(152deg, #0c5540 0%, var(--emerald) 46%, #04241a 100%);
  border: 1px solid rgba(46,230,168,.2);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s, box-shadow .3s;
}
/* blueprint grid, fading out toward the label so type stays clean */
.svcx-big::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(46,230,168,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,230,168,.075) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 92%);
}
/* oversized ghost numeral sitting in the dead space */
.svcx-big::after {
  content: attr(data-n); position: absolute; right: 12px; top: -14px; pointer-events: none;
  font-family: "IBM Plex Mono", monospace; font-weight: 600; line-height: 1;
  font-size: clamp(64px, 7vw, 104px); color: rgba(254,254,254,.055);
  transition: color .3s;
}
.svcx-big:hover { transform: translateY(-4px); border-color: rgba(46,230,168,.55);
  box-shadow: 0 16px 38px rgba(4,36,26,.42); }
.svcx-big:hover::after { color: rgba(46,230,168,.11); }
.svcx-big__num {
  position: absolute; top: 15px; left: 20px; z-index: 2;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 2px;
  color: rgba(46,230,168,.62);
}
.svcx-big__body { position: relative; z-index: 2; }
/* short mint rule above the label */
.svcx-big__body::before {
  content: ''; display: block; width: 24px; height: 2px; background: var(--mint);
  margin-bottom: 11px; transition: width .3s cubic-bezier(.22,.61,.36,1);
}
.svcx-big:hover .svcx-big__body::before { width: 44px; }
.svcx-big__tag {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: 9.5px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--signal); margin-bottom: 6px;
}
.svcx-big__name {
  display: block; color: var(--bone); font-weight: 700;
  font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.4px; line-height: 1.15;
}
.svcx-big__spec {
  display: block; margin-top: 8px; padding-top: 9px;
  border-top: 1px solid rgba(254,254,254,.13);
  color: rgba(236,231,221,.66); font-size: 12px; line-height: 1.45;
}

/* auxiliary — light boxes with a mint wipe on hover */
.svcx-aux { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: clamp(11px, 1.2vw, 16px); }
.svcx-tile {
  position: relative; display: flex; flex-direction: column;
  background: var(--bone); border: 1px solid rgba(7,7,7,.12);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s, box-shadow .3s;
}
/* accent bar wipes across the top edge on hover */
.svcx-tile::before {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--signal); transition: width .4s cubic-bezier(.22,.61,.36,1);
}
.svcx-tile:hover::before { width: 100%; }
.svcx-tile:hover { transform: translateY(-4px); border-color: rgba(10,73,56,.38); box-shadow: 0 12px 28px rgba(7,7,7,.11); }
.svcx-tile__body { padding: clamp(14px, 1.9vh, 19px) 18px; }
/* number + hairline sit on one row above the title */
.svcx-tile__num {
  display: flex; align-items: center; gap: 9px;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: 1.6px; color: var(--signal); margin-bottom: 7px;
}
.svcx-tile__num::after {
  content: ''; flex: 1; height: 1px; background: rgba(7,7,7,.13);
  transition: background .3s;
}
.svcx-tile:hover .svcx-tile__num::after { background: rgba(16,163,126,.35); }
.svcx-tile h3 { margin: 0; color: var(--ink); font-size: 15.5px; font-weight: 600; letter-spacing: -.3px; line-height: 1.2; }
.svcx-tile p { margin: 7px 0 0; color: rgba(7,7,7,.6); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 1000px) { .svcx-aux { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .svcx-core { grid-template-columns: 1fr; } .svcx-rule__note { display: none; } }
@media (max-width: 560px) { .svcx-aux { grid-template-columns: 1fr; } }

/* ---------- Resources: FAQ accordion ---------- */
.faq__item { border-bottom: 1px solid rgba(7,7,7,0.12); }
.faq__item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 20px 44px 20px 0; font-weight: 600; font-size: 17px; letter-spacing: -0.3px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: 20px; color: var(--signal);
  transition: transform 0.25s ease;
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { padding: 0 0 22px; max-width: 720px; font-weight: 300; color: rgba(7,7,7,0.72); }

/* ---------- Canonical dark footer (shared with home) ---------- */
footer { background: #07110D; color: #9DA8A0; border-top: 1px solid rgba(233,238,231,0.13); padding: 4rem 0 2.5rem; font-size: 0.82rem; }
.foot-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3.5rem; }
.foot-grid h4 { font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.22em; color: var(--signal); margin-bottom: 1.1rem; text-transform: uppercase; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid ul li { margin-bottom: 0.55rem; }
.foot-grid a { color: inherit; text-decoration: none; transition: color 0.2s; }
.foot-grid a:hover { color: #FFFFFF; }
.foot-brand { color: #FFFFFF; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.3em; margin-bottom: 1rem; }
.foot-brand span { color: var(--signal); }
.foot-logo { display: inline-block; margin-bottom: 1.1rem; }
.foot-logo img { height: 30px; width: auto; display: block; }
.foot-tag { max-width: 26em; line-height: 1.7; }
.foot-certs { display: flex; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.foot-cert { border: 1px solid rgba(233,238,231,0.26); padding: 0.35rem 0.8rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; color: #9DA8A0; }
/* social: same bordered chip language as the cert badges, square corners */
.foot-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid rgba(233,238,231,0.26); color: #9DA8A0;
  transition: color .2s, background .2s, border-color .2s; }
.foot-social a:hover { color: var(--ink); background: var(--signal); border-color: var(--signal); }
.foot-social svg { display: block; }
.foot-base { border-top: 1px solid rgba(233,238,231,0.13); padding-top: 2rem; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.04em; }
.foot-base a { color: inherit; text-decoration: none; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
/* Footer links were 17px tall — well under a comfortable touch target, and
   stacked that close they are easy to mis-tap. Pad them out on touch screens.
   Keyed on hover capability rather than width, so a touchscreen laptop gets
   the larger targets too. */
@media (hover: none) {
  .foot-grid ul li { margin-bottom: 0; }
  .foot-grid ul li a { display: block; padding: 11px 0; }
  .foot-base { gap: 0.75rem; }
  .foot-base a { display: inline-block; padding: 6px 0; }
  .foot-social a { width: 44px; height: 44px; }
}

/* Resources: FAQ split with side image */
.faq-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; }
.faq-side { margin: 0; position: sticky; top: 90px; }
.faq-side img { width: 100%; display: block; border: 1px solid rgba(7,7,7,0.15); }
.faq-side figcaption { margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1px; color: rgba(7,7,7,0.55); }
@media (max-width: 860px) { .faq-split { grid-template-columns: 1fr; } .faq-side { position: static; order: -1; } }

/* About hero: crossfading slideshow behind the headline */
.phero-slide { opacity: 0; transition: opacity 1.4s ease; filter: brightness(0.72) saturate(0.9); }
.phero-slide.on { opacity: 1; }

/* Offerings detail sections: longer line lengths so each section runs shorter.
   Scoped to .sec-offer so ledes elsewhere keep their tighter measure. */
.sec-offer .head { max-width: 1060px; }
.sec-offer .head p.offer-lede, .sec-offer .offer-lede { max-width: 1000px; }
.sec-offer .offer-stat__c { max-width: 700px; }
.sec-offer .offer-note { max-width: 960px; }

/* Offerings detail sections — one viewport each, content vertically centered
   so the section breathes instead of cramming at the top */
.sec-offer--video { padding: clamp(2.5rem, 6vh, 4rem) 0; display: flex; align-items: center; }
.sec-offer--video > .wrap { width: 100%; }
.sec-offer .head { margin-bottom: 26px; }
.sec-offer .head h2 { font-size: clamp(28px, 3.6vw, 44px); }
.sec-offer .offer-tag { margin-top: 12px; }
.sec-offer .offer-lede { margin-top: 16px; font-size: 16.5px; line-height: 1.72; }
.sec-offer .offer-mod { margin-top: 28px; }
.sec-offer .offer-gap { margin-top: 24px; }
.sec-offer .offer-chips { gap: 11px; }
.sec-offer .offer-chip { padding: 8px 16px; font-size: 12.5px; }
.sec-offer .offer-stat__n { font-size: clamp(48px, 7.5vw, 96px); }
.sec-offer .offer-stage { padding: 20px 20px; }
.sec-offer .offer-stage__t { font-size: clamp(22px, 2.8vw, 34px); }
.sec-offer .offer-note { margin-top: 24px; line-height: 1.75; }
.sec-offer .offer-note--follow { margin-top: 12px; }
.sec-offer .offer-cta { margin-top: 28px; }

/* Offerings hero: centered variant over the collage still */
.phero--center .wrap { text-align: center; }
.phero--center .wrap p { margin-left: auto; margin-right: auto; }
.phero--center .hero-ctas { justify-content: center; }

/* Offerings hero: typewriter headline. Ghost copy reserves the final size so
   the centered block never shifts; caret keeps blinking after the line ends. */
#offerTitle { display: grid; }
#offerTitle > span { grid-area: 1 / 1; }
#offerTitle .hero-ghost { visibility: hidden; }
#offerTitle.typing .hero-live::after {
  content: ''; display: inline-block; width: 3px; height: 0.8em;
  margin-left: 6px; vertical-align: -0.05em; background: var(--signal);
  animation: offerCaret 0.7s step-end infinite;
}
@keyframes offerCaret { 50% { opacity: 0; } }

/* Resources hub — typographic header with an index of the page */
.res-hub { padding: 150px 0 72px; color: var(--bone); }
.res-hub h1 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -2px; margin-top: 20px; }
.res-index { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.res-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 24px 20px; color: var(--bone); text-decoration: none;
  border: 1px solid rgba(236, 231, 221, 0.16);
  background: rgba(236, 231, 221, 0.03);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.res-card:hover { border-color: rgba(16, 163, 126, 0.6); background: rgba(16, 163, 126, 0.07); transform: translateY(-3px); }
.res-card__t { font-weight: 600; font-size: 18px; letter-spacing: -0.3px; }
.res-card__d { font-weight: 300; font-size: 13.5px; line-height: 1.6; color: rgba(236, 231, 221, 0.66); }
.res-card__go {
  margin-top: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--signal);
}
@media (max-width: 820px) { .res-index { grid-template-columns: 1fr; } .res-hub { padding: 120px 0 56px; } }

/* Case-study cards: hover reveals a clean before/after bar comparison */
.cslide__media { position: relative; }
.cs-graph {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 26px 28px;
  background: rgba(7, 17, 13, 0.9);
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.cslide__card:hover .cs-graph { opacity: 1; }
.cs-graph__t {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: rgba(236,231,221,0.6);
  margin-bottom: 4px;
}
.cs-bar { display: grid; grid-template-columns: 74px 1fr 52px; align-items: center; gap: 10px; }
.cs-bar__l, .cs-bar__v { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 1px; color: rgba(236,231,221,0.75); }
.cs-bar__v { text-align: right; color: #FEFEFE; }
.cs-bar__track { height: 10px; background: rgba(236,231,221,0.12); overflow: hidden; }
.cs-bar__fill {
  display: block; height: 100%; background: rgba(236,231,221,0.38);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
.cs-bar--nemi .cs-bar__fill { background: var(--signal); transition-delay: 0.28s; }
.cs-bar--nemi .cs-bar__l { color: var(--signal); }
.cslide__card:hover .cs-bar__fill { transform: scaleX(1); }
@media (hover: none) { .cs-graph { display: none; } }

/* Careers: principle cards carry the brand emerald — rule, tint, hover */
.prin-cards .card {
  border: 1px solid rgba(7, 7, 7, 0.1);
  border-left: 3px solid var(--signal);
  background: #FDFCF7;
  padding: 20px 22px;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.prin-cards .card:hover {
  background: rgba(16, 163, 126, 0.07);
  transform: translateX(4px);
  box-shadow: 0 14px 34px -22px rgba(10, 73, 56, 0.45);
}
.prin-cards .card h3 { color: var(--emerald); font-size: 17px; letter-spacing: -0.3px; }
.prin-cards .card p { margin-top: 6px; font-weight: 300; font-size: 14px; color: rgba(7,7,7,0.62); }
.prin-split--flip .prin-cards .card { border-left: none; border-right: 3px solid var(--signal); }
.prin-split--flip .prin-cards .card:hover { transform: translateX(-4px); }

/* Offerings · Tough problems — split layout, copy left, proof grid right */
.sec-tough { position: relative; overflow: hidden; padding: clamp(3.5rem, 8vh, 6rem) 0; background: #e2ede7; }
.sec-grid-light {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(10, 73, 56, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 73, 56, 0.07) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 80% 50%, #000 30%, transparent 100%);
}
.tough-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.sec-tough h2 { font-size: clamp(30px, 4vw, 50px); margin-top: 18px; }
.tough-lede { margin-top: 20px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 400; line-height: 1.5; color: var(--ink); max-width: 22em; }
.tough-sub { margin-top: 14px; font-weight: 300; font-size: 15.5px; line-height: 1.7; color: rgba(7, 7, 7, 0.62); max-width: 30em; }
.tough-cta { margin-top: 28px; }
.tough-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tough-stats .stat { padding: 28px 24px; background: rgba(7, 7, 7, 0.04); }
.tough-stats .stat:nth-child(1) { background: var(--emerald); }
.tough-stats .stat:nth-child(1) .stat__v { color: #FFFFFF; }
.tough-stats .stat:nth-child(1) .stat__l { color: rgba(254, 254, 254, 0.7); }
.tough-stats .stat:nth-child(2) { background: rgba(16, 163, 126, 0.13); }
.tough-stats .stat:nth-child(4) { background: var(--ink); }
.tough-stats .stat:nth-child(4) .stat__v { color: var(--signal); }
.tough-stats .stat:nth-child(4) .stat__l { color: rgba(254, 254, 254, 0.55); }
@media (max-width: 900px) {
  .tough-wrap { grid-template-columns: 1fr; }
  .tough-stats { margin-top: 8px; }
}

/* ============ Offerings: theme pass on the three upper sections ============ */

/* shared blueprint texture, drawn without extra markup */
.sec-service, .sec-svcx { position: relative; overflow: hidden; }
.sec-service::before, .sec-svcx::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(10, 73, 56, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 73, 56, 0.06) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(130% 100% at 85% 40%, #000 25%, transparent 100%);
  mask-image: radial-gradient(130% 100% at 85% 40%, #000 25%, transparent 100%);
}
.sec-service > .wrap, .sec-svcx > .wrap { position: relative; z-index: 1; }

/* --- 1. We deliver on what matters: numbered, notched, hover-lit rows --- */
.svc-rows { counter-reset: svc; }
.svc-row {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.svc-row:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -28px rgba(10, 73, 56, 0.5); }
.svc-row__title { position: relative; display: flex; flex-direction: column; justify-content: center; }
.svc-row__title::before { content: none; }
.svc-row__title h3 { position: relative; padding-bottom: 12px; }
.svc-row__title h3::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 30px; height: 2px; background: var(--signal);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-row:hover .svc-row__title h3::after { width: 64px; }

/* --- 3. Every path: notched tiles with emerald edge + arrow on hover --- */
.svcx-tile {
  position: relative; display: block; text-decoration: none; color: inherit;
  border: 1px solid rgba(7, 7, 7, 0.1);
  border-left: 3px solid rgba(16, 163, 126, 0.32);
  background: #FDFCF7;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-left-color 0.28s ease, background 0.28s ease;
}
.svcx-tile:hover {
  transform: translateY(-4px);
  border-left-color: var(--signal);
  background: #FFFFFF;
  box-shadow: 0 24px 52px -30px rgba(10, 73, 56, 0.45);
}
.svcx-tile__body { position: relative; padding: 26px 26px 30px; }
.svcx-tile h3 { font-size: 17.5px; letter-spacing: -0.3px; color: var(--emerald); }
.svcx-tile p { margin-top: 10px; font-weight: 300; font-size: 14px; line-height: 1.65; color: rgba(7,7,7,0.62); }
.svcx-tile__body::after {
  content: '\2192'; position: absolute; right: 24px; bottom: 22px;
  font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--signal);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.svcx-tile:hover .svcx-tile__body::after { opacity: 1; transform: translateX(0); }

/* FAQ page: one vertical list, numbered like the menu rows, at the reading width the
   Master Plan letter uses. .sec-faq opts out of the full-viewport section rule so six
   short rows are not stranded in the middle of a screen-tall band. */
.sec-faq { display: block; min-height: 0; padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); }
.faq { max-width: 880px; counter-reset: faq; }
.faq__item { counter-increment: faq; }
.faq__item:first-child { border-top: 1px solid rgba(7,7,7,0.12); }
.faq__item summary { padding-left: 56px; transition: color .2s ease; }
.faq__item summary:hover, .faq__item[open] summary { color: var(--emerald); }
.faq__item summary::before {
  content: counter(faq, decimal-leading-zero); position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; color: var(--signal);
}
.faq__item p { padding-left: 56px; }
@media (max-width: 640px) {
  .faq__item summary { padding-left: 40px; font-size: 16px; }
  .faq__item p { padding-left: 40px; }
}
/* Compact page hero: title block only, so the content below starts on the first screen.
   Both breakpoints, because .phero is made full-height separately above and below 900px. */
@media (min-width: 901px) { .phero--compact { min-height: 0; padding: 176px 0 84px; } }
@media (max-width: 900px) { .phero.phero--compact { min-height: 0; padding-top: 128px; padding-bottom: 52px; } }

/* Contact form: file input styled like the other fields */
.field input[type="file"] {
  padding: 12px 14px; font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  color: rgba(7, 7, 7, 0.65); background: #FDFCF7;
  border: 1px dashed rgba(10, 73, 56, 0.35); cursor: pointer;
}
.field input[type="file"]:hover { border-color: var(--signal); }
.field input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 8px 16px; border: 0; cursor: pointer;
  background: var(--emerald); color: var(--bone);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
}

/* Attachment row: pick a file, OR paste a link when it is too big to upload.
   Both sit on one line; the file picker keeps its natural width and the link
   box takes the rest. */
.attach-row { display: flex; gap: 12px; align-items: stretch; }
/* flex-basis 0 on both, so they split the row evenly instead of the file input's
   wide intrinsic width ("CHOOSE FILE" + filename) crushing the link box. */
.attach-row input[type="file"] { flex: 1 1 0; min-width: 0; }
.attach-row .attach-or {
  align-self: center; flex: 0 0 auto;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(7, 7, 7, 0.45);
}
.attach-row input[type="url"] { flex: 1 1 0; min-width: 0; }
/* Sits above the picker, so it is read before choosing rather than after. */
.attach-note {
  margin: 0 0 9px; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .04em; line-height: 1.6; color: rgba(7, 7, 7, 0.5);
}

/* Chosen files, each removable. A file input's own FileList is read-only, so
   the list is driven by JS state rather than the input itself. */
.file-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 12px; background: #FDFCF7;
  border: 1px solid rgba(10, 73, 56, 0.28);
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: rgba(7, 7, 7, 0.78);
  max-width: 100%;
}
/* the name takes the slack and truncates; the size never shrinks */
.file-chip__name {
  flex: 1 1 auto; min-width: 60px; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-chip__size { color: rgba(7, 7, 7, 0.45); flex: 0 0 auto; white-space: nowrap; }
/* .cform button sets width:100% for the submit button and out-specifies a
   single class, so this needs .cform in front or the x stretches the full row
   and squeezes the filename to nothing. */
.cform .file-chip__x {
  flex: 0 0 auto; width: 20px; min-width: 20px; height: 20px; margin: 0;
  line-height: 1; padding: 0; border: 0; cursor: pointer;
  background: rgba(10, 73, 56, 0.10);
  color: var(--emerald); font-size: 14px; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.cform .file-chip__x:hover { background: #b3261e; color: #fff; }
.file-chip--over { border-color: #b3261e; color: #b3261e; }
/* Stacked on narrow screens: side by side would squeeze both to unusable widths */
@media (max-width: 720px) {
  .attach-row { flex-direction: column; align-items: stretch; }
  .attach-row .attach-or { align-self: flex-start; }
}

/* ---------- Nav: Invest button ---------- */
/* Outlined against the filled Contact CTA it sits beside, so the two read as a
   pair without competing. Square, not chamfered: a clip-path cuts the corner out
   of the border stroke itself, so the chamfered version had no line at all along
   the top-right. A sharp rectangle is an approved brand shape, so the outline
   stays whole. */
.nav__invest {
  margin-left: 10px;
  color: var(--signal) !important;
  border: 1px solid rgba(16,163,126,.55);
  padding: 10px 18px !important;
  font-weight: 600; font-family: "Space Grotesk", sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important;
  transition: background .2s, color .2s, border-color .2s;
}
.nav__invest::after { display: none; }
.nav__invest:hover { background: var(--signal); color: var(--emerald) !important; border-color: var(--signal); }

/* With Invest in the row there are 7 items again: without nowrap the flex row
   shrinks each link enough that "About Us" breaks onto two lines. */
.nav__links a { white-space: nowrap; }

/* The row only just clears the logo at the top of the desktop range, so tighten
   it across that band. Starts at 900.02px, not 901px: at a fractional viewport
   of ~900.5 neither max-width:900 nor min-width:901 matches, and the width fell
   through the gap onto the untightened row. */
@media (min-width: 900.02px) and (max-width: 1120px) {
  .nav__links a { padding: 8px 10px; letter-spacing: 1.3px; }
  .nav__invest { margin-left: 6px; padding: 10px 13px !important; }
  .nav__cta { margin-left: 6px; padding: 11px 15px !important; }
}
@media (max-width: 900px) {
  /* In the drawer Invest pairs with Contact, so it is boxed like Contact rather
     than sitting as a bare text row among the section links — outlined instead
     of filled, since it is the secondary of the two. Same padding as .nav__cta
     so the two stack as one block with their labels on the same left edge. */
  .nav__invest { margin: 10px 0 8px; border: 1px solid rgba(16,163,126,.55);
    width: 100%; padding: 11px 22px !important; font-size: 14px !important;
    color: var(--signal) !important; clip-path: none; }
  .nav__invest:hover { background: var(--signal); color: var(--emerald) !important;
    border-color: var(--signal); }
}
/* "Sadasivam Balasubramanian" is far longer than the other names in this row,
   and .team-inline nowraps them. Let this row wrap instead of overflowing. */
.team-inline .person__name { white-space: normal; }
/* Between the burger breakpoint and ~1120px these cards are 4-up and narrow.
   The nowrap role ("Business Unit Leader · MaaS India Commercial" measures
   242px in a 197px card) forced the grid column wider than the card and
   dragged the name out past the edge with it. Let both wrap in that band. */
@media (max-width: 1120px) {
  .team-inline .person__role { white-space: normal; }
}


/* Light-page nav (Master Plan): the header sits on the bone page above the emerald
   title plate, so links and the logo flip to ink until the bar condenses on scroll
   (the condensed bar gets a darker pill so bone text still reads over a light page).
   The open mobile drawer keeps its dark styling, hence :not(.open). */
.nav--light:not(.nav--stuck) .nav__links:not(.open) a:not(.nav__cta):not(.nav__invest) { color: rgba(7,7,7,.62); }
.nav--light:not(.nav--stuck) .nav__links:not(.open) a:not(.nav__cta):not(.nav__invest):hover { color: var(--ink); }
.nav--light:not(.nav--stuck) .nav__links:not(.open) a.active:not(.nav__cta):not(.nav__invest) { color: var(--emerald); }
.nav--light:not(.nav--stuck) .nav__links:not(.open) .nav__invest { color: var(--emerald) !important; border-color: rgba(10,73,56,.45); }
.nav--light:not(.nav--stuck) .nav__logo img { filter: invert(1); }
.nav--light:not(.nav--stuck) .nav__burger span { background: var(--ink); }
.nav--light.nav--stuck { background: rgba(7,7,7,.82); }

/* The same cover plate inside the folded letter cards on About and Resources.
   The card's content column is ~696px, so every size steps down to ~0.79x of the
   standalone page's, which keeps the PDF's proportions. */
.letter .mpl-plate { max-width: none; margin: 0 0 clamp(20px, 3.5vw, 30px);
  background-size: 32px 32px;
  padding: clamp(32px, 6.8vw, 59px) clamp(18px, 6.1vw, 54px) clamp(30px, 5.7vw, 51px); }
.letter .mpl-plate__crops span { font-size: 13px; }
.letter .mpl-plate__crops span:nth-child(1) { top: 19px; left: 19px; }
.letter .mpl-plate__crops span:nth-child(2) { right: 19px; bottom: 21px; }
.letter .mpl-kicker { font-size: clamp(11px, 1.45vw, 13px); letter-spacing: 3px; gap: 13px; }
.letter .mpl-kicker::before { width: 36px; }
.letter .mpl-title { margin: clamp(18px, 3.2vw, 28px) 0 0; font-size: clamp(30px, 5.8vw, 51px); letter-spacing: -1.6px; }
.letter .mpl-sub { margin-top: clamp(16px, 3vw, 27px); font-size: clamp(13px, 1.9vw, 17px); }
.letter .mpl-byline { margin-top: clamp(22px, 4vw, 36px); font-size: clamp(9.5px, 1.2vw, 11px); letter-spacing: 1.6px; }
/* Taller teaser so the cover plate and the opening paragraph both show before the fade. */
.plan-fold { max-height: 720px; }

/* ---------- Blogs index ----------
   .sec-blog opts out of the full-viewport section rule, like .sec-faq. Each post is one
   card: a cover on the left in the Master Plan plate's language (emerald, fine grid,
   two crop marks), the details on the right. */
.sec-blog { display: block; min-height: 0; padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); }
.posts { display: grid; gap: 28px; }
.post {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--bone); color: var(--ink); text-decoration: none;
  border: 1px solid rgba(7,7,7,.12);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  transition: transform .28s ease, border-color .28s ease;
}
.post:hover { transform: translateY(-4px); border-color: rgba(10,73,56,.5); }
.post__cover {
  position: relative; overflow: hidden; min-height: clamp(240px, 26vw, 340px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 4.4vw, 60px);
  background-color: var(--emerald);
  background-image:
    linear-gradient(rgba(236,231,208,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,231,208,.07) 1px, transparent 1px);
  background-size: 34px 34px;
}
.post__cover-k { display: flex; align-items: center; gap: 14px;
  font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 3px;
  font-size: clamp(10.5px, 1vw, 13px); font-weight: 500; color: #7fc0ac; }
.post__cover-k::before { content: ''; flex: 0 0 auto; width: 36px; height: 2px; background: #7fc0ac; }
.post__cover-t { margin-top: clamp(16px, 2vw, 26px); font-size: clamp(28px, 3.5vw, 48px); font-weight: 700;
  letter-spacing: -1.6px; line-height: 1.04; color: #ece7d0; }
.post__body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(26px, 3.8vw, 52px); }
.post__meta { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 2px;
  font-size: 11px; font-weight: 500; color: var(--signal); }
.post__title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.8px; line-height: 1.12; color: var(--ink); }
.post__excerpt { font-size: 16px; line-height: 1.7; font-weight: 300; color: rgba(7,7,7,.72); }
.post__by { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 1.6px; font-size: 10.5px; color: var(--grey); }
.post__go { align-self: flex-start; margin-top: 6px; padding-bottom: 4px;
  font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 600;
  color: var(--emerald); border-bottom: 1px solid currentColor; transition: color .2s ease; }
.post:hover .post__go { color: var(--signal); }
@media (max-width: 820px) {
  .post { grid-template-columns: 1fr; }
  .post__cover { min-height: 210px; }
}