/* ============================================================
   Atlato: Enterprise AI Agentic Orchestration
   Design system: ElevenLabs reference (eggshell editorial)
   Fonts: Inter (300 display substitute for Waldenburg, 400/500 body)
   ============================================================ */

:root {
  /* Colours */
  --color-eggshell: #fdfcfc;
  --color-warm-taupe: #f5f3f1;
  --color-stone: #ebe8e4;
  --color-ink: #000000;
  --color-graphite: #44403b;
  --color-smoke: #777169;
  --color-ash: #a59f97;
  --color-violet-spark: #0447ff;
  --color-ember-orange: #ff4704;
  --color-btn-border: #e5e5e5;

  /* Type */
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-caption: 10px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-body-lg: 20px;
  --text-heading-sm: 32px;
  --text-heading: 36px;
  --text-display: 48px;

  /* Radii */
  --radius-inputs: 4px;
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-cards: 20px;
  --radius-large-cards: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  --shadow-inset: rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Layout */
  --page-max: 1280px;
  --gutter: 48px;
  --nav-h: 64px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: 0.16px;
  color: var(--color-ink);
  background: var(--color-eggshell);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--color-ink); color: var(--color-eggshell); }

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Type roles ---------- */
.display, .h-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.h-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.h-heading-sm {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.13;
  letter-spacing: -0.02em;
}
.lead {
  font-size: var(--text-body-lg);
  line-height: 1.45;
  color: var(--color-graphite);
  font-weight: 400;
  letter-spacing: 0;
}
.muted { color: var(--color-smoke); }
.faint { color: var(--color-ash); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-smoke);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-ink);
}

/* ---------- Page shell + grid lines ---------- */
.page-shell {
  max-width: var(--page-max);
  margin: 0 auto;
  position: relative;
  border-left: 1px solid var(--color-stone);
  border-right: 1px solid var(--color-stone);
  background: var(--color-eggshell);
  min-height: 100vh;
}
.section {
  position: relative;
  border-top: 1px solid var(--color-stone);
  padding: 96px var(--gutter);
}
.section.no-line { border-top: 0; }
.section.tight { padding-top: 64px; padding-bottom: 64px; }
.section.band { background: var(--color-warm-taupe); }
.section.band-ink { background: var(--color-ink); color: var(--color-eggshell); }

/* + tick marks where hairlines cross the frame (grid detail) */
.cross {
  position: absolute;
  width: 13px; height: 13px;
  top: -7px;
  pointer-events: none;
  z-index: 3;
}
.cross.tl { left: -7px; }
.cross.tr { right: -7px; }
.cross::before, .cross::after {
  content: "";
  position: absolute;
  background: var(--color-ash);
}
.cross::before { left: 6px; top: 0; width: 1px; height: 13px; }
.cross::after  { top: 6px; left: 0; height: 1px; width: 13px; }

/* faint interior column guides for hero + select sections */
.ruled {
  background-image:
    linear-gradient(to right, rgba(235,232,228,0.65) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--gutter)) / 12) 100%;
  background-position: var(--gutter) 0;
  background-repeat: repeat-x;
  background-origin: border-box;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: 0.14px;
  border-radius: var(--radius-full);
  padding: 10px 20px;
  border: 1px solid var(--color-btn-border);
  transition: background-color 160ms ease, color 160ms ease, transform 120ms var(--ease-out), box-shadow 160ms ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn { text-align: center; }
/* Inviting hover: primary CTAs warm to a light green */
@media (hover: hover) and (pointer: fine) {
  .btn-filled:hover { background: #d7f2dc; border-color: #d7f2dc; color: var(--color-ink); }
  .hero-cine .btn-filled:hover { background: #d7f2dc; border-color: #d7f2dc; color: var(--color-ink); }
  .site-header.over-dark .btn-filled:hover { background: #d7f2dc; border-color: #d7f2dc; color: var(--color-ink); }
  .band-ink .btn-filled:hover { background: #d7f2dc; border-color: #d7f2dc; color: var(--color-ink); }
}
.btn-filled {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-eggshell);
  box-shadow: var(--shadow-subtle);
}
.btn-filled:hover { background: #d7f2dc; border-color: #d7f2dc; color: var(--color-ink); }
.btn-outline {
  background: var(--color-eggshell);
  color: var(--color-ink);
  box-shadow: var(--shadow-subtle);
}
.btn-outline:hover { background: var(--color-warm-taupe); }
.btn-ghost { border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--color-warm-taupe); }
.btn-lg { padding: 13px 26px; font-size: 15px; }
.btn .arrow { transition: transform 160ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
}
.link-arrow .arrow { transition: transform 160ms var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }
.link-arrow:hover { border-bottom-color: var(--color-ink); }

/* ---------- Header / navigation ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--nav-h);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.site-header.scrolled {
  background: rgba(253, 252, 252, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--color-stone);
}
.nav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo img { height: 26px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-graphite);
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: var(--radius-full);
  transition: color 150ms ease, background-color 150ms ease;
}
.nav-link:hover, .nav-item.open > .nav-link { color: var(--color-ink); background: var(--color-warm-taupe); }
.nav-link[aria-current="page"] { color: var(--color-ink); }
.nav-link .caret {
  width: 10px; height: 10px;
  transition: transform 200ms var(--ease-out);
}
.nav-item.open .caret { transform: rotate(180deg); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Ask Atlato AI button hidden for now (remove this rule to bring it back) */
.icon-btn[data-open-ai] { display: none; }
/* AI launch search section hidden for now (remove this rule to bring it back) */
.ai-search-section { display: none; }

/* Mega menu panel */
.mega {
  position: absolute;
  top: calc(100% + 24px);   /* 24px gap below the nav bar */
  left: 0;
  transform: translateY(8px) scale(0.99);
  opacity: 0;
  pointer-events: none;
  background: #fff;
  border: 1px solid #f1efec;
  border-radius: 20px;
  box-shadow: 0 24px 70px -18px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0,0,0,0.03);
  padding: 24px;
  width: 700px;
  /* Exit: fast (this state is the destination when closing) */
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  transform-origin: top left;
  z-index: 70;
}
/* Invisible bridge over the 24px gap so the hover doesn't drop before the pointer reaches the panel */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.nav-item.open .mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  /* Enter: slightly slower than exit */
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
/* Header: title + subtitle on the left, CTA pill on the right, over a divider */
.mega-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--color-stone);
}
.mega-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); }
.mega-sub { font-size: 14px; color: var(--color-smoke); line-height: 1.45; margin-top: 4px; max-width: 46ch; }
.mega-cta {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 500; color: var(--color-ink);
  background: var(--color-warm-taupe);
  border-radius: var(--radius-full);
  padding: 9px 16px;
  white-space: nowrap;
  transition: background-color 140ms ease;
}
.mega-cta:hover { background: var(--color-stone); }
.mega-cta .arrow { transition: transform 160ms var(--ease-out); }
.mega-cta:hover .arrow { transform: translateX(3px); }
/* Uniform item grid: every cell the same width (repeat 1fr) and the same
   height (grid-auto-rows: 1fr makes all rows equal to the tallest). */
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
}
.mega-item {
  display: flex;
  flex-direction: column;
  height: 100%;               /* fill the equal grid cell */
  padding: 14px 16px;
  border-radius: 12px;
  transition: background-color 140ms ease, transform 140ms var(--ease-out);
}
.mega-item:hover { background: var(--color-warm-taupe); }
.mega-item:active { transform: scale(0.99); }
.mega-item .t { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); }
.mega-item .d {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-smoke);
  line-height: 1.45;
  margin-top: 4px;
}

/* Mobile nav */
.nav-burger:active { transform: scale(0.94); }
.nav-burger {
  transition: transform 120ms var(--ease-out);
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-btn-border);
  background: var(--color-eggshell);
  align-items: center;
  justify-content: center;
}
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--color-eggshell);
  z-index: 55;
  padding: 24px 24px calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu.open { display: flex; flex-direction: column; }
.mobile-menu a {
  display: block;
  padding: 16px 8px;
  font-size: 20px;
  font-weight: 400;
  border-bottom: 1px solid var(--color-stone);
}
.mobile-menu .btn { margin-top: auto; width: 100%; flex: none; }

/* Mobile menu: expandable groups (Technology / Industries) */
.m-group { border-bottom: 1px solid var(--color-stone); }
.m-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 8px;
  min-height: 48px;
  font-size: 20px;
  font-weight: 400;
  color: var(--color-ink);
  text-align: left;
}
.m-group-toggle .m-chev { flex: none; color: var(--color-ash); transition: transform 220ms var(--ease-out); }
.m-group.open .m-group-toggle .m-chev { transform: rotate(180deg); color: var(--color-ink); }
.m-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--ease-out);
}
.m-group.open .m-sub { grid-template-rows: 1fr; }
.m-sub-inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear 220ms; }
.m-group.open .m-sub-inner { visibility: visible; transition: visibility 0s; }
.m-sub a {
  display: block;
  padding: 12px 8px 12px 22px;
  font-size: 16px;
  color: var(--color-graphite);
  border-bottom: 0;
}
.m-sub a:last-child { padding-bottom: 16px; }
@media (prefers-reduced-motion: reduce) {
  .m-sub, .m-sub-inner { transition: none; }
  .m-group-toggle .m-chev { transition: none; }
}

/* Larger tap targets on touch devices (>=44px) */
@media (pointer: coarse) {
  .uc-filter, .uc-sort, .uc-search { min-height: 44px; }
  .nav-burger { width: 44px; height: 44px; }
  .icon-btn, .ai-send { width: 44px; height: 44px; }
  .bt-opt, .ai-suggests button { min-height: 44px; }
}

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(var(--nav-h) + 72px);
  padding-bottom: 72px;
  border-top: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr);
  gap: 56px;
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 24px; }
.hero-copy h1 { margin-bottom: 24px; max-width: 15ch; }
.hero-copy .lead { margin-bottom: 20px; max-width: 46ch; }
.hero-copy .desc { color: var(--color-smoke); font-size: var(--text-body); max-width: 52ch; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero visual card */
.hero-visual {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-large-cards);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.hero-visual .plate-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ash);
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.orchestration-svg { width: 100%; height: auto; }

/* SVG animation primitives */
.flow-path {
  fill: none;
  stroke: #d8d4cf;
  stroke-width: 1.5;
}
.flow-pulse {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 22 320;
  animation: flow-travel 4.2s linear infinite;
}
.flow-pulse.violet { stroke: var(--color-violet-spark); }
.flow-pulse.ember { stroke: var(--color-ember-orange); animation-delay: 1.3s; }
.flow-pulse.dusk { stroke: #8f7bd8; animation-delay: 2.4s; }
@keyframes flow-travel {
  from { stroke-dashoffset: 342; }
  to { stroke-dashoffset: 0; }
}
.node-ring {
  transform-origin: center;
  transform-box: fill-box;
  animation: node-breathe 3.6s var(--ease-in-out) infinite;
}
@keyframes node-breathe {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.14); opacity: 1; }
}
.sphere-grad-a { stop-color: var(--color-violet-spark); }
.sphere-grad-b { stop-color: var(--color-ember-orange); }

/* ---------- AI search launcher ---------- */
.ai-search-row {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}
.ai-search-launch {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-eggshell);
  border: 1px solid var(--color-btn-border);
  border-radius: var(--radius-full);
  padding: 16px 22px;
  box-shadow: var(--shadow-subtle);
  color: var(--color-ash);
  font-size: 15px;
  text-align: left;
  transition: box-shadow 180ms ease, transform 140ms var(--ease-out);
}
.ai-search-launch:hover {
  box-shadow: rgba(0,0,0,0.4) 0 0 1px 0, rgba(0,0,0,0.06) 0 4px 12px 0;
  transform: translateY(-1px);
}
.ai-search-launch:active { transform: scale(0.99); }
.ai-search-launch .spark { color: var(--color-ember-orange); flex: none; }
.ai-search-launch .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ash);
  border: 1px solid var(--color-stone);
  border-radius: 6px;
  padding: 3px 7px;
}

/* ---------- AI modal ---------- */
.ai-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16, 14, 12, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  /* Exit: fast */
  transition: opacity 140ms ease;
}
.ai-overlay.open { opacity: 1; pointer-events: auto; transition: opacity 200ms ease; }
/* Keyboard-initiated open/close skips animation entirely */
.ai-overlay.instant, .ai-overlay.instant .ai-modal { transition-duration: 0ms; }
.ai-modal {
  background: var(--color-eggshell);
  width: 100%;
  max-width: 960px;
  height: min(85vh, 780px);
  border-radius: var(--radius-cards);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px -20px rgba(0,0,0,0.35);
  transform: scale(0.97) translateY(8px);
  opacity: 0;
  /* Exit: fast */
  transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
}
.ai-overlay.open .ai-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
  /* Enter: standard modal timing */
  transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out);
}
.ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-stone);
  flex: none;
}
.ai-head .left { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.ai-head .left .spark { color: var(--color-ember-orange); }
.ai-head .left .info { color: var(--color-ash); font-weight: 400; }
.ai-head .right { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-smoke);
  transition: background-color 140ms ease, color 140ms ease;
}
.icon-btn:hover { background: var(--color-warm-taupe); color: var(--color-ink); }
.icon-btn:active { transform: scale(0.92); }
.ai-body { flex: 1; overflow-y: auto; padding: 32px; }
.ai-empty { text-align: center; color: var(--color-ash); padding: 48px 24px; }
.ai-empty .h { font-size: 20px; color: var(--color-graphite); font-weight: 400; margin-bottom: 8px; }
.ai-suggests { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 24px; }
.ai-suggests button {
  border: 1px solid var(--color-btn-border);
  background: var(--color-eggshell);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 13px;
  color: var(--color-graphite);
  transition: background-color 140ms ease;
}
.ai-suggests button:hover { background: var(--color-warm-taupe); }

.ai-msg-user { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 28px; }
.ai-msg-user .bubble {
  background: var(--color-warm-taupe);
  border: 1px solid var(--color-stone);
  color: var(--color-ink);
  padding: 14px 18px;
  border-radius: 14px;
  max-width: 78%;
  font-size: 16px;
}
.ai-msg-user .time { font-size: 11px; color: var(--color-ash); margin-top: 6px; }
.ai-msg-ai { margin-bottom: 32px; max-width: 100%; animation: msg-in 260ms var(--ease-out); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ai-msg-ai p { color: var(--color-graphite); line-height: 1.6; margin-bottom: 14px; }
.ai-msg-ai ul { padding-left: 20px; list-style: disc; margin-bottom: 18px; }
.ai-msg-ai li { color: var(--color-smoke); line-height: 1.6; margin-bottom: 8px; }
.ai-msg-ai li strong { color: var(--color-ink); font-weight: 600; }
.ai-links { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.ai-links a { font-size: 13px; font-weight: 500; color: var(--color-ink); border-bottom: 1px solid var(--color-stone); padding-bottom: 1px; }
.ai-links a:hover { border-bottom-color: var(--color-ink); }
.ai-deeper-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.ai-deeper-head .h { font-weight: 600; font-size: 15px; }
.ai-deeper-head a { font-size: 13px; color: var(--color-smoke); }
.ai-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.ai-card {
  border: 1px solid var(--color-stone);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: box-shadow 160ms ease, transform 160ms var(--ease-out);
  background: #fff;
}
.ai-card:hover { box-shadow: var(--shadow-subtle); transform: translateY(-2px); }
.ai-card .tag {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-smoke);
  margin-bottom: 10px;
}
.ai-card .t { font-size: 13px; line-height: 1.4; color: var(--color-ink); }
.ai-feedback {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--color-stone);
  padding-top: 18px;
  color: var(--color-smoke);
  font-size: 13px;
}
.ai-feedback .fb { display: flex; align-items: center; gap: 10px; }
.ai-input-row { padding: 20px 24px; border-top: 1px solid var(--color-stone); flex: none; background: var(--color-eggshell); }
.ai-input-wrap {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--color-ink);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
}
.ai-input-wrap input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-size: 15px; color: var(--color-ink);
}
.ai-input-wrap input::placeholder { color: var(--color-ash); }
.ai-send {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--color-ink);
  color: var(--color-eggshell);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 120ms var(--ease-out), background-color 140ms ease;
}
.ai-send:hover { background: #1c1917; }
.ai-send:active { transform: scale(0.94); }
.ai-typing { display: inline-flex; gap: 4px; padding: 8px 0; }
.ai-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-ash);
  animation: typing 1s ease-in-out infinite;
}
.ai-typing i:nth-child(2) { animation-delay: 0.15s; }
.ai-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Section headers ---------- */
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head .eyebrow { margin-bottom: 20px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { color: var(--color-smoke); font-size: var(--text-subheading); line-height: 1.6; }

/* ---------- Trusted partners marquee ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  margin: 0 calc(-1 * var(--gutter));
  padding: 8px 0 16px;
}
.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee-scroll 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.partner-card {
  width: 460px;
  height: 236px;
  flex: none;
  border-radius: var(--radius-cards);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-stone);
  background: #fff;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.partner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-subtle); }
.partner-card .side-colour {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}
.partner-card .side-colour .sector {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.partner-card .side-colour .desc { font-size: 14px; line-height: 1.5; font-weight: 400; }
.partner-card .side-brand {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--color-eggshell);
}
.partner-card .monogram {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 30px;
  background: var(--color-warm-taupe);
  color: var(--color-graphite);
}
.partner-card .plogo {
  height: 118px; max-width: 100%;
  display: inline-flex; align-items: center; justify-content: flex-start;
}
.partner-card .plogo img { max-height: 118px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.partner-card .side-brand > span:not(.plogo) { width: 100%; text-align: center; }  /* centre the name + type block */
.partner-card .pname { display: block; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.3; color: var(--color-smoke); }
.partner-card .ptype { display: block; font-size: 12.5px; color: var(--color-ash); margin-top: 10px; }

/* Partner colour plates (product-visual accents may live here) */
.pc-violet { background: linear-gradient(135deg, #0447ff, #2c63ff); }
.pc-ember { background: linear-gradient(135deg, #ff4704, #ff7a3d); }
.pc-ink { background: linear-gradient(135deg, #171412, #3a352f); }
.pc-dusk { background: linear-gradient(135deg, #4b3fbf, #7a63e0); }
.pc-clay { background: linear-gradient(135deg, #b0512b, #d97e50); }
.pc-moss { background: linear-gradient(135deg, #3e5c48, #6b8a72); }
.pc-pink { background: linear-gradient(135deg, #f7d7e2, #fbe9f0); }
.pc-pink .sector { color: rgba(23, 20, 18, 0.55); }
.pc-pink .desc { color: var(--color-ink); }
/* Photo left-panel: image behind the text, with a dark scrim so the white copy stays legible */
.partner-card .side-colour.pc-photo {
  position: relative;
  background-color: #12100e;
  background-size: cover;
  background-position: center;
}
.partner-card .side-colour.pc-photo::before {
  content: "";
  position: absolute; inset: 0;
  /* lighter scrim so the photo shows through; still darker at the bottom where the copy sits */
  background: linear-gradient(to bottom, rgba(11,10,9,0.14) 0%, rgba(11,10,9,0.38) 52%, rgba(11,10,9,0.62) 100%);
}
.partner-card .side-colour.pc-photo > * { position: relative; z-index: 1; }
/* text-shadow keeps the white copy crisp over the lighter overlay */
.partner-card .side-colour.pc-photo .sector,
.partner-card .side-colour.pc-photo .desc { text-shadow: 0 1px 4px rgba(0,0,0,0.55); }

/* ---------- Value proposition trio (OpenAI style) ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.value-card {
  background: #fff;
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-2xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.value-card .icon-plate {
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-warm-taupe);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink);
  margin-bottom: 22px;
}
.value-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; line-height: 1.3; }
.value-card p { font-size: 15px; color: var(--color-smoke); line-height: 1.6; }
.value-card p + p { margin-top: 10px; }

/* ---------- Industries showcase ---------- */
.industries-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 40px;
  align-items: start;
}
.industry-tabs { display: flex; flex-direction: column; gap: 4px; }
.industry-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 13px 18px;
  border-radius: var(--radius-lg);
  font-size: 17px;
  font-weight: 400;
  color: var(--color-smoke);
  transition: color 150ms ease, background-color 150ms ease;
  width: 100%;
}
.industry-tab:hover { color: var(--color-ink); }
.industry-tab.active {
  background: var(--color-warm-taupe);
  color: var(--color-ink);
  font-weight: 500;
}
.industry-tab .chev { opacity: 0; transform: translateX(-4px); transition: opacity 150ms ease, transform 150ms var(--ease-out); }
.industry-tab.active .chev { opacity: 1; transform: none; }
.industry-tabs .see-all { margin-top: 20px; padding-left: 18px; }

.industry-stage {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-large-cards);
  padding: 44px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 36px;
  align-items: center;
  min-height: 400px;
}
.stage-copy { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), filter 220ms ease; }
.stage-copy.switching { opacity: 0; transform: translateY(8px); filter: blur(3px); }
.stage-copy .pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  color: var(--color-graphite);
  margin-bottom: 20px;
}
.stage-copy h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.stage-copy p { color: var(--color-smoke); line-height: 1.6; margin-bottom: 24px; max-width: 42ch; }
.stage-highlight {
  background: var(--color-ink);
  color: var(--color-eggshell);
  border-radius: var(--radius-2xl);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), filter 220ms ease;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.4);
}
.stage-highlight.switching { opacity: 0; transform: translateY(8px); filter: blur(3px); }
.stage-highlight .brand {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253,252,252,0.55);
}
.stage-highlight .quote { font-size: 17px; line-height: 1.45; font-weight: 400; }
.stage-highlight .go {
  margin-top: auto;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(253,252,252,0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-eggshell);
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.stage-highlight a:hover .go, .stage-highlight .go:hover { background: rgba(253,252,252,0.12); transform: translateX(3px); }

.uc-card:active { transform: scale(0.99); }
.partner-card:active { transform: scale(0.99); }

/* Stagger: cards cascade in after the grid reveals (decorative, never blocks interaction) */
.uc-grid[data-reveal] .uc-card { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.uc-grid[data-reveal].revealed .uc-card { opacity: 1; transform: translateY(0); }
.uc-grid[data-reveal].revealed .uc-card:nth-child(2) { transition-delay: 45ms; }
.uc-grid[data-reveal].revealed .uc-card:nth-child(3) { transition-delay: 90ms; }
.uc-grid[data-reveal].revealed .uc-card:nth-child(4) { transition-delay: 135ms; }
.uc-grid[data-reveal].revealed .uc-card:nth-child(5) { transition-delay: 180ms; }
.uc-grid[data-reveal].revealed .uc-card:nth-child(6) { transition-delay: 225ms; }
.uc-grid[data-reveal].revealed .uc-card:nth-child(n + 7) { transition-delay: 270ms; }

/* ---------- Use case grid (Latest updates style) ---------- */
.uc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.uc-header h2 { flex: none; }
.uc-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.uc-search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-btn-border);
  background: var(--color-eggshell);
  border-radius: var(--radius-full);
  padding: 9px 16px;
  width: 260px;
  box-shadow: var(--shadow-subtle);
}
.uc-search input {
  border: 0; outline: none; background: transparent;
  font-size: 14px; width: 100%; color: var(--color-ink);
}
.uc-search input::placeholder { color: var(--color-ash); }
.uc-search svg { color: var(--color-ash); flex: none; }
.uc-sort {
  appearance: none;
  border: 1px solid var(--color-btn-border);
  background: var(--color-eggshell) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777169' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  border-radius: var(--radius-full);
  padding: 9px 38px 9px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-graphite);
  cursor: pointer;
  box-shadow: var(--shadow-subtle);
}
.uc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.uc-filter {
  border: 1px solid var(--color-btn-border);
  background: var(--color-eggshell);
  border-radius: var(--radius-full);
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-smoke);
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms var(--ease-out);
}
.uc-filter:hover { background: var(--color-warm-taupe); color: var(--color-ink); }
.uc-filter:active { transform: scale(0.96); }
.uc-filter.active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-eggshell); }

.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.uc-card { display: flex; flex-direction: column; cursor: pointer; transition: transform 120ms var(--ease-out); }
.uc-card .visual {
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-cards);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  position: relative;
  transition: transform 240ms var(--ease-out), box-shadow 240ms ease;
}
.uc-card:hover .visual { transform: translateY(-4px); box-shadow: 0 16px 32px -18px rgba(0,0,0,0.28); }
.uc-card .visual .vd {
  color: #fff;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.35;
  text-align: center;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.18);
  max-width: 24ch;
}
.uc-card .t {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uc-card .meta {
  margin-top: 8px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
  color: var(--color-smoke);
}
.uc-card .meta .cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.uc-empty { text-align: center; color: var(--color-ash); padding: 64px 0; display: none; }

/* Use case gradients (product-visual accent territory) */
.g1 { background: radial-gradient(120% 120% at 20% 15%, #2c63ff 0%, #0447ff 45%, #021f7a 100%); }
.g2 { background: radial-gradient(120% 120% at 80% 10%, #ff7a3d 0%, #ff4704 50%, #8f1d00 100%); }
.g3 { background: radial-gradient(130% 130% at 30% 20%, #8f7bd8 0%, #4b3fbf 55%, #221a66 100%); }
.g4 { background: radial-gradient(130% 130% at 70% 25%, #ff9d7a 0%, #e0592a 50%, #7a2404 100%); }
.g5 { background: radial-gradient(130% 130% at 25% 80%, #5b8de8 0%, #1d4ed8 55%, #0a1e5c 100%); }
.g6 { background: radial-gradient(130% 130% at 75% 75%, #f0b26a 0%, #d97e2c 55%, #6e3405 100%); }
.g7 { background: radial-gradient(130% 130% at 50% 15%, #6b8a72 0%, #3e5c48 60%, #17281d 100%); }
.g8 { background: radial-gradient(130% 130% at 40% 60%, #b78ae8 0%, #7a3fd0 55%, #320f66 100%); }
.g9 { background: radial-gradient(130% 130% at 60% 40%, #4d4842 0%, #26221e 60%, #0c0a08 100%); }

/* Use-case cards backed by a photo (overlay text removed; show the image clean) */
.uc-card .visual.has-photo { background-size: cover; background-position: center; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-stone); }
.faq-item:first-child { border-top: 1px solid var(--color-stone); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  padding: 24px 4px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 140ms ease;
}
.faq-q:hover { color: var(--color-graphite); }
.faq-q .plus { flex: none; transition: transform 220ms var(--ease-out); color: var(--color-ash); }
.faq-item.open .faq-q .plus { transform: rotate(45deg); color: var(--color-ink); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  /* Close: fast */
  transition: grid-template-rows 180ms var(--ease-out);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; transition: grid-template-rows 240ms var(--ease-out); }
.faq-a > div { overflow: hidden; opacity: 0; transition: opacity 120ms ease; }
.faq-item.open .faq-a > div { opacity: 1; transition: opacity 220ms ease 60ms; }
.faq-a p {
  color: var(--color-smoke);
  line-height: 1.65;
  padding: 0 4px 26px;
  max-width: 62ch;
}

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band p { color: var(--color-smoke); font-size: var(--text-subheading); max-width: 52ch; margin: 0 auto 32px; }
.cta-band .hero-actions { justify-content: center; }
.band-ink .cta-band p { color: rgba(253,252,252,0.6); }
.band-ink .btn-filled { background: var(--color-eggshell); border-color: var(--color-eggshell); color: var(--color-ink); }
.band-ink .btn-filled:hover { background: #d7f2dc; border-color: #d7f2dc; color: var(--color-ink); }
.band-ink .btn-outline { background: transparent; color: var(--color-eggshell); border-color: rgba(253,252,252,0.3); box-shadow: none; }
.band-ink .btn-outline:hover { background: rgba(253,252,252,0.08); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-stone);
  background: var(--color-warm-taupe);
  padding: 64px var(--gutter) 40px;
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand img { height: 24px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: var(--color-smoke); line-height: 1.6; max-width: 32ch; }
.footer-col .h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--color-graphite);
  padding: 5px 0;
  transition: color 140ms ease;
}
.footer-col a:hover { color: var(--color-ink); }
.footer-base {
  border-top: 1px solid var(--color-stone);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-ash);
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  padding-top: calc(var(--nav-h) + 88px);
  padding-bottom: 80px;
  border-top: 0;
}
.page-hero .eyebrow { margin-bottom: 24px; }
.page-hero h1 { max-width: 18ch; margin-bottom: 24px; }
.page-hero .lead { max-width: 56ch; }

/* ---------- Feature rows (technology / vision) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--color-warm-taupe);
  border-radius: var(--radius-large-cards);
  padding: 48px;
}
.feature-row + .feature-row { margin-top: 24px; }
.feature-row.flip .f-visual { order: -1; }
.feature-row .tagchip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  color: var(--color-graphite);
  margin-bottom: 18px;
}
.feature-row h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.feature-row p { color: var(--color-smoke); line-height: 1.65; margin-bottom: 12px; max-width: 48ch; }
.feature-row ul { margin: 18px 0 24px; }
.feature-row li {
  display: flex; gap: 12px;
  font-size: 15px; color: var(--color-graphite);
  padding: 7px 0;
  line-height: 1.5;
}
.feature-row li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-ink);
  margin-top: 9px;
}
.f-visual {
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-cards);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.f-visual video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* soft product sphere (signature visual language) */
.sphere {
  width: 190px; height: 190px;
  border-radius: 50%;
  filter: blur(0.4px);
  position: relative;
}
.sphere::after {
  content: "";
  position: absolute; inset: -18%;
  border-radius: 50%;
  background: inherit;
  filter: blur(38px);
  opacity: 0.35;
  z-index: -1;
}
.sphere.a { background: radial-gradient(circle at 32% 28%, #9db4ff 0%, #0447ff 42%, #ff4704 100%); }
.sphere.b { background: radial-gradient(circle at 68% 30%, #ffc39e 0%, #ff4704 45%, #0447ff 100%); }
.sphere.c { background: radial-gradient(circle at 40% 65%, #d9c6ff 0%, #7a3fd0 48%, #ff4704 100%); }
.sphere.d { background: radial-gradient(circle at 55% 35%, #a8ffd8 0%, #3e5c48 55%, #0447ff 100%); }
.sphere.e { background: radial-gradient(circle at 30% 40%, #ffe2a8 0%, #d97e2c 50%, #4b3fbf 100%); }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 420px)); gap: 24px; justify-content: center; }
@media (max-width: 1080px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 420px)); }
}
/* Row 1: two larger lead cards that fill the full width (half each) */
.team-grid-lead {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
/* Horizontal card: photo (left 1/3) + body (right 2/3) */
.team-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 190px;
  background: #fff;
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-cards);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.team-card:active { transform: scale(0.99); }
.tm-photo {
  flex: 0 0 50%;             /* left 1.5/3 */
  min-width: 0;
  background: var(--color-warm-taupe);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 300; font-size: 30px; color: var(--color-graphite);
  overflow: hidden;
}
.tm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* modal avatar */
.tm-body {
  flex: 1; min-width: 0;     /* right two-thirds */
  display: flex; flex-direction: column;
  padding: 20px 22px;
}
.team-card .tm-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--color-ink); }
.team-card .role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-smoke);
  margin: 6px 0 0;
}
.team-card .tm-more {
  margin-top: auto;          /* pushes Read bio to the bottom */
  padding-top: 18px;         /* keeps a gap above it */
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--color-ink);
}
.team-card .tm-more span { transition: transform 160ms var(--ease-out); }
/* Larger lead cards */
.team-card.lead { min-height: 325px; }
.team-card.lead .tm-body { padding: 26px 28px; }
.team-card.lead .tm-name { font-size: 22px; }
@media (hover: hover) and (pointer: fine) {
  .team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-subtle); }
  .team-card:hover .tm-more span { transform: translateX(4px); }
}
@media (max-width: 640px) {
  .team-grid-lead { grid-template-columns: 1fr; }
}

/* ---------- Team member modal ---------- */
.tm-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(16, 14, 12, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 160ms ease;
}
.tm-overlay.open { opacity: 1; pointer-events: auto; }
.tm-modal {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: calc(85vh - 80px); overflow-y: auto;
  overscroll-behavior: contain;       /* don't chain scroll into the page at the modal's edges */
  background: var(--color-eggshell);
  border-radius: var(--radius-cards);
  padding: 0;                         /* header banner is full-bleed */
  box-shadow: 0 24px 80px -20px rgba(0,0,0,0.35);
  transform: scale(0.97) translateY(8px);
  opacity: 0;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.tm-overlay.open .tm-modal { transform: none; opacity: 1; }
.tm-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  color: #fff;
  background: rgba(16,14,12,0.4);
  border: 1px solid rgba(253,252,252,0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color 160ms ease;
}
.tm-close:hover { background: rgba(16,14,12,0.62); }

/* ---- Banner header: member photo background + name/role/socials ---- */
.tm-modal-hero {
  position: relative;
  width: 100%; height: 260px;
  background: var(--color-warm-taupe);   /* fallback while the photo loads */
  overflow: hidden;
}
.tm-modal-hero img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;   /* bias toward the face */
  display: block;
}
.tm-modal-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(16,14,12,0.88) 0%,
    rgba(16,14,12,0.45) 34%,
    rgba(16,14,12,0) 68%);
}
/* Avatar-style hero (custom black-backdrop portrait): match the backdrop and show the whole figure */
.tm-modal.avatar-hero .tm-modal-hero { background: #000; }
.tm-modal.avatar-hero .tm-modal-hero img { object-fit: contain; object-position: center; }
.tm-modal-hero-inner {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 26px 32px;   /* left/right match .tm-modal-bio */
}
.tm-modal-hero-text { min-width: 0; }
.tm-modal-hero h3 {
  color: #fff; font-size: 25px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.15;
}
.tm-modal-hero .role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(253,252,252,0.78); margin-top: 9px;
}
/* Rich-profile modals only: name/role start large (40/20px) and shrink to 25/11px on scroll (JS-driven vars) */
.tm-modal.wide .tm-modal-hero h3 {
  font-size: var(--tm-name-size, 40px); line-height: 1.12; will-change: font-size;
}
.tm-modal.wide .tm-modal-hero .role {
  font-size: var(--tm-role-size, 20px); will-change: font-size;
}
.tm-modal-socials { flex: none; display: flex; align-items: center; gap: 10px; }

.tm-modal-bio { padding: 28px 32px 36px; }
.tm-modal-bio p { color: var(--color-graphite); line-height: 1.7; margin-bottom: 14px; }
.tm-modal-bio p:last-child { margin-bottom: 0; }
.tm-modal-bio a { color: var(--color-ink); border-bottom: 1px solid var(--color-stone); }
.tm-modal-bio a:hover { border-bottom-color: var(--color-ink); }

/* ---- Wider modal + rich founder profile (lead, highlights, divided sections) ---- */
.tm-modal.wide { max-width: 880px; --tm-name-size: 40px; --tm-role-size: 20px; }  /* initial header sizes; js/main.js shrinks them on scroll */
.tm-modal.wide .tm-modal-bio { padding: 30px 40px 40px; }
.tm-modal.wide .tm-modal-hero-inner { padding: 26px 40px; }  /* left/right match the wide bio */

.tm-modal-bio .bio-tagline {
  font-size: 13px; letter-spacing: 0.01em; color: var(--color-smoke);
  margin-bottom: 12px;
}
.tm-modal-bio .bio-lead {
  font-size: 16.5px; line-height: 1.62; color: var(--color-ink);
  margin-bottom: 0;
}
.tm-modal-bio .bio-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-ember-orange);
  margin-bottom: 14px;
}
.bio-highlights { margin-top: 26px; }
.bio-highlight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bio-highlight {
  padding: 15px 17px;
  background: var(--color-warm-taupe);
  border-radius: 12px;
}
.bio-highlight h5 {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-ink); line-height: 1.3;
}
.bio-highlight p {
  font-size: 12.5px; line-height: 1.55; color: var(--color-graphite);
  margin: 7px 0 0;
}
.bio-section { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--color-stone); }
.bio-section h4 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-ink); margin-bottom: 12px;
}
.bio-section p { font-size: 14.5px; }
.bio-quote {
  margin-top: 20px; padding: 18px 22px;
  background: var(--color-warm-taupe); border-radius: 12px;
  font-family: var(--font-display); font-size: 18px; font-style: italic;
  color: var(--color-ink); line-height: 1.4;
}
.bio-quote cite {
  display: block; margin-top: 8px; font-style: normal;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-smoke);
}

/* ---- Overview attributed quote card + stat pills (used in Dr Yasantha's modal) ---- */
.bio-quote-card {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--color-warm-taupe);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-cards);
  padding: 30px 34px;
}
.bio-quote-card-text { flex: 1; min-width: 0; }
.bio-quote-card blockquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.bio-quote-card cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-smoke);
}
.bio-quote-card-portrait {
  flex: none;
  width: 118px; height: 118px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;   /* tall portrait: show from the top */
  border: 1px solid var(--color-stone);
}
.bio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0 26px;
}
.bio-stat {
  background: var(--color-warm-taupe);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
@media (max-width: 640px) {
  .bio-quote-card { flex-direction: column; align-items: flex-start; gap: 20px; }
  .bio-quote-card-portrait { width: 96px; height: 96px; }
  .bio-stats { grid-template-columns: 1fr; }
}

/* ---- Tabbed modal view (alternative layout, toggled by .tm-modal.tabbed) ---- */
.tm-modal.tabbed .tm-modal-hero { height: 300px; }      /* slightly taller header for this view */
.tm-modal:not(.tabbed) .bio-tablist { display: none; }  /* flat view: no tabs, every panel shows */
.bio-panel[hidden] { display: none; }
.bio-panel-leadership { margin-bottom: 80px; }  /* extra breathing room on the Leadership tab */
/* Dr Yasantha: extra bottom breathing room per tab */
#yr-panel-0 { margin-bottom: 220px; }  /* Overview */
#yr-panel-1 { margin-bottom: 140px; }  /* Innovation */
#yr-panel-2 { margin-bottom: 252px; }  /* Education */
#yr-panel-3 { margin-bottom: 200px; }  /* Atlato */

.bio-tablist {
  position: sticky; top: 0; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--color-eggshell);
  padding: 14px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-stone);
}
.bio-tab {
  font-size: 13px; font-weight: 500; color: var(--color-smoke);
  padding: 8px 15px; border-radius: var(--radius-full);
  transition: background-color 140ms ease, color 140ms ease;
}
.bio-tab:hover { color: var(--color-ink); background: var(--color-warm-taupe); }
.bio-tab[aria-selected="true"] { color: var(--color-eggshell); background: var(--color-ink); }
/* first block of each panel shouldn't carry the section divider at the top */
.tm-modal.tabbed .bio-panel > .bio-section:first-child,
.tm-modal.tabbed .bio-panel > .bio-highlights:first-child { margin-top: 0; }
.tm-modal.tabbed .bio-panel > .bio-section:first-child { border-top: 0; padding-top: 0; }

@media (max-width: 640px) {
  .bio-highlight-grid { grid-template-columns: 1fr; }
  .bio-tablist { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bio-tab { flex: none; white-space: nowrap; }
}

/* Social buttons live on the photo header now — glass on dark */
.tm-linkedin,
.tm-twitter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(253,252,252,0.32);
  background: rgba(253,252,252,0.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff;                       /* icon is white (SVG uses currentColor) */
  transition: background-color 160ms ease, transform 120ms var(--ease-out);
}
.tm-linkedin:hover,
.tm-twitter:hover { background: rgba(253,252,252,0.30); }
.tm-linkedin:active,
.tm-twitter:active { transform: scale(0.94); }
.tm-linkedin[hidden],
.tm-twitter[hidden] { display: none; }

/* ---------- Contact form ---------- */
.contact-wrap { max-width: 780px; margin: 0 auto; }
.contact-form .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); }
.field-input, .field-select, .combo-btn {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-btn-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field-input::placeholder { color: var(--color-ash); }
.field-input:focus, .field-select:focus, .combo-btn:focus-visible {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.field-textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777169' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field-select:required:invalid { color: var(--color-ash); } /* grey until an option is chosen */

/* Searchable combo (country / dial code) */
.combo { position: relative; }
.combo-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; text-align: left; }
.combo-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-placeholder { color: var(--color-ash); }
.combo-caret { flex: none; color: var(--color-smoke); }
.combo.invalid .combo-btn { border-color: var(--color-ember-orange); }
.combo-panel {
  position: absolute; z-index: 30;
  top: calc(100% + 6px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--color-stone);
  border-radius: 12px;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.2), 0 0 0 0.5px rgba(0,0,0,0.03);
  padding: 8px;
}
.combo-search { padding: 2px 2px 8px; }
.combo-search-input {
  width: 100%; font: inherit; font-size: 14px; color: var(--color-ink);
  border: 1px solid var(--color-btn-border); border-radius: 8px;
  padding: 9px 12px; outline: none;
}
.combo-search-input:focus { border-color: var(--color-ink); }
.combo-list { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0; }
.combo-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.combo-item:hover { background: var(--color-warm-taupe); }
.combo-flag { flex: none; font-size: 18px; line-height: 1; }
.combo-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-code { flex: none; color: var(--color-smoke); font-variant-numeric: tabular-nums; }

/* Phone: dial code + number */
.phone-row { display: flex; gap: 8px; }
.combo-dial { width: 132px; flex: none; }
.combo-dial .combo-panel { min-width: 300px; }
.phone-row .field-input { flex: 1; min-width: 0; }

.contact-actions { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.contact-note { font-size: 13px; }

/* Success state */
.contact-success { max-width: 560px; }
.cs-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: #d7f2dc; color: #1c7a3f; margin-bottom: 20px;
}
.contact-success h2 { margin-bottom: 12px; }
.contact-success p { color: var(--color-smoke); line-height: 1.6; }
.contact-success a { color: var(--color-ink); border-bottom: 1px solid var(--color-stone); }

@media (max-width: 640px) {
  .contact-form .field-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-overlay, .tm-overlay.open .tm-modal { transition: opacity 120ms ease; }
  .tm-modal { transform: none; }
}

/* ---------- Team group photo (fills the section frame L↔R, no gutter/caption) ---------- */
.team-photo {
  display: block;
  background: var(--color-warm-taupe);
}
.team-photo img { width: 100%; height: auto; display: block; }

/* ---------- Stats strip (qualitative, no invented figures) ---------- */
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-item {
  border: 1px solid var(--color-btn-border);
  background: var(--color-eggshell);
  border-radius: var(--radius-full);
  padding: 9px 18px;
  font-size: 14px;
  color: var(--color-graphite);
  display: inline-flex; align-items: center; gap: 8px;
}
.pill-item .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill-item .dot.v { background: var(--color-violet-spark); }
.pill-item .dot.e { background: var(--color-ember-orange); }

/* ---------- Reveal on scroll / on load (variant engine) ----------
   Base hidden state + transition. Motion is chosen per element with
   data-reveal="<variant>"; empty/no value defaults to slide-up.
   JS toggles .revealed (on load for data-reveal-now, else on scroll). */
[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-duration: 0.55s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity, filter; /* JS clears this after the run */
}
[data-reveal=""],
[data-reveal="slide-up"]    { transform: translateY(30px); }
[data-reveal="slide-down"]  { transform: translateY(-30px); }
[data-reveal="slide-left"]  { transform: translateX(30px); }   /* enters from the right */
[data-reveal="slide-right"] { transform: translateX(-30px); }  /* enters from the left  */
[data-reveal="scale"]       { transform: scale(0.96); }
[data-reveal="blur"]        { filter: blur(12px); }
[data-reveal="hero"]        { transform: translateY(30px) scale(0.97); filter: blur(4px); }
/* [data-reveal="fade"] = opacity only (no transform/filter). */
[data-reveal].revealed { opacity: 1; transform: none; filter: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  :root { --gutter: 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy h1, .hero-copy .lead, .hero-copy .desc { max-width: 100%; }
  .industries-grid { grid-template-columns: 1fr; }
  .industry-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 8px; gap: 8px; }
  .industry-tab { white-space: nowrap; width: auto; font-size: 15px; }
  .industry-tabs .see-all { display: none; }
  .industry-stage { grid-template-columns: 1fr; padding: 32px; }
  .value-grid { grid-template-columns: 1fr; }
  .uc-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-cards { grid-template-columns: repeat(2, 1fr); }
  .feature-row { grid-template-columns: 1fr; padding: 32px; }
  .feature-row.flip .f-visual { order: 0; }
  /* stacked full-width: match the video's 16:9 so the whole frame shows (no side-crop of baked-in text) */
  .f-visual { min-height: 0; aspect-ratio: 16 / 9; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  /* group the CTA buttons + hamburger into one right-aligned cluster */
  .nav-inner { gap: 12px; }
  .nav-burger { display: inline-flex; margin-left: 0; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .uc-grid { grid-template-columns: 1fr; }
  .uc-header { flex-direction: column; align-items: flex-start; }
  .uc-search { width: 100%; }
  /* height:auto + the marquee's default flex `align-items:stretch` equalises every
     card to the tallest one, so long descriptions are never clipped; the wider text
     column + smaller desc keep that tallest height reasonable */
  .partner-card { width: min(340px, 86vw); height: auto; min-height: 210px; grid-template-columns: 1.2fr 0.8fr; }
  .partner-card .side-colour, .partner-card .side-brand { padding: 18px; }
  .partner-card .side-colour .desc { font-size: 13px; line-height: 1.42; }
  .partner-card .monogram { width: 52px; height: 52px; font-size: 24px; }
  .ai-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .nav-cta .btn-filled { display: none; }
  .hero { padding-top: calc(var(--nav-h) + 48px); }
  .cross { display: none; }
  .team-grid { grid-template-columns: 1fr; }
  .stack-layer { flex-direction: column; align-items: flex-start; gap: 6px; }
  .stack-layer .d { text-align: left; }
  .sphere { width: 150px; height: 150px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  /* the loop-duplicate cards are only needed for the scroll; hide them when static */
  .marquee .partner-card.dup { display: none; }
  .flow-pulse, .node-ring { animation: none; }
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; will-change: auto; }
  .ai-modal, .mega, .stage-copy, .stage-highlight { transition: opacity 150ms ease; transform: none !important; filter: none !important; }
  .uc-grid[data-reveal] .uc-card { opacity: 1; transform: none; transition: opacity 150ms ease; }
  .uc-card .visual, .partner-card, .btn { transition: none; }
}

/* ---------- Touch: gate hover lifts ---------- */
@media (hover: none) {
  .partner-card:hover, .uc-card:hover .visual { transform: none; box-shadow: none; }
}

/* ---------- Hero live pills ---------- */
.live-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-eggshell);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-graphite);
  opacity: 0;
  transform: scale(0.92);
  animation: pill-pop 7.5s var(--ease-out) infinite;
}
.live-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.live-pill:nth-child(1) { animation-delay: 0.4s; }
.live-pill:nth-child(2) { animation-delay: 1.6s; }
.live-pill:nth-child(3) { animation-delay: 2.8s; }
@keyframes pill-pop {
  0% { opacity: 0; transform: scale(0.92); }
  6%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .live-pill { animation: none; opacity: 1; transform: none; }
}

/* ---------- Prose (vision) ---------- */
.prose { max-width: 66ch; }
.prose h2 { margin-bottom: 20px; }
.prose p { color: var(--color-smoke); line-height: 1.7; margin-bottom: 16px; font-size: 17px; }
.prose p strong { color: var(--color-ink); font-weight: 600; }
.split-2 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}
.split-2 .side-title { position: sticky; top: 120px; }
@media (max-width: 1080px) {
  .split-2 { grid-template-columns: 1fr; gap: 24px; }
  .split-2 .side-title { position: static; }
}

/* ---------- Architecture stack (technology) ---------- */
.stack { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.stack-layer {
  border: 1px solid var(--color-stone);
  background: var(--color-eggshell);
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.stack-layer:hover { transform: translateY(-2px); box-shadow: var(--shadow-subtle); }
.stack-layer .n { font-weight: 600; font-size: 15px; }
.stack-layer .d { font-size: 13px; color: var(--color-smoke); text-align: right; }
.stack-layer.core { background: var(--color-ink); color: var(--color-eggshell); border-color: var(--color-ink); }
.stack-layer.core .d { color: rgba(253,252,252,0.6); }
.stack-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-top: 20px;
}

/* ---------- Industry blocks (industries page) ---------- */
.industry-block {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
  scroll-margin-top: 96px;
}
.industry-block .carries {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-cards);
  padding: 32px;
}
.section.band .industry-block .carries { background: var(--color-eggshell); border: 1px solid var(--color-stone); }
.industry-block .carries .h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: 18px;
}
.industry-block .carries li {
  display: flex; gap: 12px;
  padding: 9px 0;
  color: var(--color-graphite);
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-stone);
}
.industry-block .carries li:last-child { border-bottom: 0; }
.industry-block .carries li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-ink);
  margin-top: 9px;
}
@media (max-width: 1080px) {
  .industry-block { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Cinematic hero (full-bleed video slot) ---------- */
.hero-cine {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #0b0a09;
  color: var(--color-eggshell);
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate; /* contain the grain's blend mode to the hero */
}
.hero-media { position: absolute; inset: 0; z-index: 0; }

/* Film-grain overlay: sits above the video + scrim, below the text content (z-index:2) */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.82;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  will-change: background-position;
  animation: hero-grain-flicker 0.5s steps(1) infinite;
}
@keyframes hero-grain-flicker {
  0%   { background-position: 0 0; }
  25%  { background-position: -32px 14px; }
  50%  { background-position: 18px -28px; }
  75%  { background-position: -20px 24px; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-grain { animation: none; }
}
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(11,10,9,0.82) 0%, rgba(11,10,9,0.55) 46%, rgba(11,10,9,0.25) 100%),
    linear-gradient(to top, rgba(11,10,9,0.85) 0%, rgba(11,10,9,0) 40%);
}
.hero-cine-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  /* +1px matches the page-shell border so hero text aligns exactly with section content */
  padding: 120px calc(var(--gutter) + 1px) 72px;
}
.hero-cine .eyebrow { color: rgba(253,252,252,0.55); }
.hero-cine .eyebrow::before { background: var(--color-ember-orange); }
.hero-cine h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 15ch;
  margin: 22px 0 24px;
}
.hero-cine .lead {
  color: rgba(253,252,252,0.78);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  max-width: 46ch;
  margin-bottom: 40px;
}
.hero-cine .desc {
  color: rgba(253,252,252,0.55);
  font-size: 15px;
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 36px;
}
.hero-cine .hero-actions { margin-bottom: 0; }
.hero-cine .btn-filled { background: var(--color-eggshell); border-color: var(--color-eggshell); color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .hero-cine .btn-filled:hover { background: #d7f2dc; border-color: #d7f2dc; color: var(--color-ink); }
  .hero-cine .btn-outline:hover { background: rgba(253,252,252,0.1); }
}
.hero-cine .btn-outline { border-color: rgba(253,252,252,0.35); color: var(--color-eggshell); background: transparent; }

/* Prominent AI search bar in hero */
.hero-ai {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 620px;
  background: #fff;
  color: var(--color-graphite);
  border: 1px solid rgba(253,252,252,0.2);
  border-radius: var(--radius-full);
  padding: 0 10px 0 22px;
  height: 62px;
  text-align: left;
  cursor: pointer;
  font-size: 15.5px;
  box-shadow: 0 18px 60px -18px rgba(0,0,0,0.65), 0 0 0 6px rgba(253,252,252,0.06);
  transition: box-shadow 200ms ease, transform 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hero-ai:hover { transform: translateY(-1px); box-shadow: 0 22px 70px -18px rgba(0,0,0,0.7), 0 0 0 6px rgba(253,252,252,0.1); }
}
.hero-ai:active { transform: scale(0.99); }
.hero-ai .spark { color: var(--color-ember-orange); flex: none; }
.hero-ai > span:not(.kbd):not(.go) { flex: 1; color: var(--color-smoke); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-ai .kbd {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ash);
  border: 1px solid var(--color-stone);
  border-radius: 6px;
  padding: 3px 8px;
}
.hero-ai .go {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-eggshell);
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-ai-hint { margin-top: 14px; font-size: 12.5px; color: rgba(253,252,252,0.4); }

/* Live pills on dark */
.hero-cine .live-pills { position: relative; margin-top: 44px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-cine .live-pill {
  background: rgba(253,252,252,0.08);
  border: 1px solid rgba(253,252,252,0.14);
  color: rgba(253,252,252,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 640px) {
  .hero-cine { min-height: 0; }
  .hero-cine-inner { padding: 96px calc(var(--gutter) + 1px) 56px; }
  .hero-ai { height: 56px; font-size: 14px; padding-left: 18px; }
  .hero-ai .kbd { display: none; }
}

/* ---------- Header over the dark hero ---------- */
.site-header.over-dark .nav-link { color: rgba(253,252,252,0.72); }
.site-header.over-dark .nav-link:hover,
.site-header.over-dark .nav-item.open > .nav-link { color: #fff; background: rgba(253,252,252,0.08); }
.site-header.over-dark .nav-link[aria-current="page"] { color: #fff; }
.site-header.over-dark .nav-logo img { filter: brightness(0) invert(1); }
.site-header.over-dark .icon-btn { color: rgba(253,252,252,0.8); }
.site-header.over-dark .icon-btn:hover { background: rgba(253,252,252,0.1); color: #fff; }
.site-header.over-dark .btn-outline { border-color: rgba(253,252,252,0.35); color: var(--color-eggshell); background: transparent; }
.site-header.over-dark .btn-outline:hover { background: rgba(253,252,252,0.1); }
.site-header.over-dark .btn-filled { background: var(--color-eggshell); border-color: var(--color-eggshell); color: var(--color-ink); }
.site-header.over-dark .nav-burger { background: transparent; color: #fff; border-color: rgba(253,252,252,0.3); }
.site-header.over-dark.scrolled {
  background: rgba(11, 10, 9, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(253,252,252,0.08);
}
/* Mobile menu panel is light; revert header colours while it is open */
.site-header.menu-open .nav-logo img { filter: none; }
.site-header.menu-open .nav-burger { background: var(--color-eggshell); color: var(--color-ink); border-color: var(--color-btn-border); }

/* ---------- Industry value bento showcase ---------- */
.bento-toggle-wrap { display: flex; justify-content: center; margin: 8px 0 40px; }
.bento-toggle {
  position: relative;
  display: inline-flex;
  gap: 2px;
  background: var(--color-warm-taupe);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-full);
  padding: 4px;
  max-width: 100%;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.bento-toggle::-webkit-scrollbar { display: none; }
.bt-thumb {
  position: absolute;
  top: 4px; left: 0;
  height: calc(100% - 8px);
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.03);
  /* Interruptible slide; rapid clicks retarget mid-flight (matches the card morph) */
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.bt-thumb.measured { /* set visible once positioned to avoid a flash at 0,0 */ opacity: 1; }
.bt-thumb { opacity: 0; }
.bt-opt {
  position: relative;
  z-index: 1;
  flex: none;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-smoke);
  padding: 9px 18px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: color 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 120ms var(--ease-out);
}
.bt-opt:hover { color: var(--color-ink); }
.bt-opt:active { transform: scale(0.97); }
.bt-opt.active { color: var(--color-ink); }
.bt-opt:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

/* ===== Value showcase — 5 slots (LT/LB centre RT/RB); side slots toggle card<->spacer ===== */
.el-stage {
  position: relative;
  height: 506px;
  max-width: 1180px;
  margin: 4px auto 0;
  overflow-x: clip;          /* outermost cards may bleed; clip horizontally */
  isolation: isolate;
}
.el-card {
  position: absolute;
  top: var(--top, 0); left: 50%;
  width: var(--w); height: var(--h);
  margin-left: calc(var(--x) - var(--w) / 2);  /* centred on (50% + X) via margin, transform free for FLIP */
  border-radius: 20px;
  overflow: hidden;
  will-change: transform;
  /* spacer state (default): faint, contentless tile */
  background: var(--color-warm-taupe, #f1efec);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.el-card.is-card {           /* card state: dark surface holding an image */
  background: #12100e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ec-content { position: absolute; inset: 0; opacity: 0; }
.el-card.is-card .ec-content.is-on { opacity: 1; }   /* content only visible on a card */
.ec-img { position: absolute; inset: 0; background: #12100e center / cover no-repeat; }
.ec-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,4,4,0.74) 0%, rgba(4,4,4,0.12) 48%, rgba(4,4,4,0) 74%); }
.ec-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  color: #fff; font-size: 16px; line-height: 1.38; font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transform-origin: 0 100%;   /* caption reveal scales up from its bottom-left anchor */
}
.ec-cap:empty { display: none; }

/* Mobile: the SAME 5-slot absolute layout as desktop, stacked into three rows. Row 1 = left
   column (card top-left + spacer bottom-right), row 2 = centre (full width), row 3 = right
   column (spacer top-left + card bottom-right). Geometry + the card<->spacer scale animation
   are computed in js/main.js (mobile branch of geom(); syncStage() sets the stacked height). */
@media (max-width: 1080px) {
  .el-stage {
    height: auto;              /* JS sets an explicit height for the stacked rows */
    max-width: 460px;
    margin: 4px auto 0;
    padding: 0;
    overflow: visible;
    perspective: none;
  }
  .el-card.is-card .ec-content.is-on { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .el-card { will-change: auto; } }

@media (max-width: 640px) {
  /* With 6 industries the sliding segmented pill is cramped and hides tabs behind a scroll.
     On phones show them all as a centred, wrapping chip set with a clear solid active state. */
  .bento-toggle-wrap { justify-content: center; }
  .bento-toggle {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    overflow: visible;
    background: transparent;
    border: 0;
    padding: 0;
  }
  .bt-thumb { display: none; }
  .bt-opt {
    background: var(--color-warm-taupe);
    border: 1px solid var(--color-stone);
    border-radius: var(--radius-full);
    color: var(--color-smoke);
    padding: 10px 16px;
    font-size: 13px;
    transition: background 240ms var(--ease-out), color 240ms var(--ease-out),
                border-color 240ms var(--ease-out), transform 120ms var(--ease-out);
  }
  .bt-opt.active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bt-thumb { transition: none; }
}

/* ---------- Hero v3: two columns, rotator, awards ---------- */
.hero-cols { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: center; }
.hero-cine .eyebrow.plain::before { content: none; }
.hero-cine .eyebrow.plain { padding-left: 0; }
/* hero eyebrow: a touch larger and brighter for visibility on the dark canvas */
.hero-cine .eyebrow { font-size: 14px; letter-spacing: 0.14em; color: rgba(253,252,252,0.8); font-weight: 500; }
.hero-cine h1 { font-size: clamp(36px, 4.6vw, 62px); max-width: 20ch; margin: 26px 0 30px; }

.hero-rotate-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.1;
}
.hr-label { color: rgba(253,252,252,0.45); }
.hr-word {
  display: inline-block;
  color: #fff;
  border-bottom: 1px solid rgba(255,71,4,0.7);
  padding-bottom: 4px;
  will-change: transform;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hero-awards { display: flex; flex-direction: column; gap: 12px; }
.award {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(11,10,9,0.4);   /* darker smoked glass for better text contrast */
  border: 1px solid rgba(253,252,252,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.aw-ic {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(253,252,252,0.08);
  border: 1px solid rgba(253,252,252,0.14);
  color: var(--color-eggshell);
}
.award:first-child .aw-ic { color: #ffb27d; }
.aw-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw-t strong { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.aw-t em { font-style: normal; font-size: 12.5px; color: rgba(253,252,252,0.55); }

@media (max-width: 1080px) {
  .hero-cols { grid-template-columns: 1fr; gap: 40px; }
  .hero-awards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .hero-awards { grid-template-columns: 1fr; }
  .hero-rotate-line { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-word { transition: none; }
}

/* nav links: single line always */
.nav-link { white-space: nowrap; }

/* ---------- Industry pages: ROI stat columns + section CTAs ---------- */

/* Industry ROI — clean stat columns (num replaces the icon in the reference layout).
   Two-column header (heading left, intro right) over a divider, then three columns each
   led by a large "num" with subtle vertical rules between them. */
.roi-head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px 72px;
  align-items: end;
  max-width: 1120px;
  margin: 0 auto 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--color-stone);
}
.roi-head-l { display: flex; flex-direction: column; gap: 18px; }
.roi-head-r { color: var(--color-smoke); font-size: 16px; line-height: 1.6; max-width: 48ch; margin: 0; }
.roi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
}
.roi-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 40px;
  border-left: 1px solid var(--color-stone);
}
.roi-col:first-child { padding-left: 0; border-left: 0; }
.roi-col-nonum { padding-top: calc(clamp(46px, 4.6vw, 68px) + 20px); }  /* aligns a num-less caption */
.roi-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(46px, 4.6vw, 68px);   /* a touch larger — this is the card's focal point */
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-ink);
}
.roi-cap { color: var(--color-smoke); font-size: 15.5px; line-height: 1.6; max-width: 36ch; margin: 0; }
@media (max-width: 900px) {
  .roi-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; padding-bottom: 30px; }
  .roi-grid { grid-template-columns: 1fr; gap: 0; }
  .roi-col { padding: 30px 0 0; margin-top: 30px; border-left: 0; border-top: 1px solid var(--color-stone); }
  .roi-col:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
  .roi-cap { max-width: none; }
}
.sec-cta { display: flex; justify-content: center; margin-top: 44px; }
.hero-cine.compact { min-height: min(72vh, 720px); }
/* Industry heroes: one uniform height on desktop regardless of copy length.
   810px clears the tallest measured content (~797px); shorter pages centre
   their content in the extra space. Below 1081px the columns stack, so this
   only applies on desktop. */
@media (min-width: 1081px) {
  .hero-cine.compact { min-height: 810px; }
}

/* ---------- Industry page extras: ROI note + proof of concept strip ---------- */
.roi-note {
  max-width: 760px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ash);
}
.poc {
  margin-top: 44px;
  background: var(--color-ink);
  color: var(--color-eggshell);
  border-radius: 24px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.poc-copy h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.poc-copy p { font-size: 14.5px; line-height: 1.65; color: rgba(253,252,252,0.7); }
.poc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.poc-stat {
  border: 1px solid rgba(253,252,252,0.14);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.poc-stat .n {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.poc-stat .l { font-size: 12.5px; color: rgba(253,252,252,0.55); }
@media (max-width: 1080px) {
  .poc { grid-template-columns: 1fr; gap: 32px; padding: 36px 32px; }
}
@media (max-width: 640px) {
  .poc-stats { grid-template-columns: 1fr 1fr; }
  .poc { padding: 28px 24px; }
}

/* ---------- Industry segment cards (operating models) ---------- */
.seg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.seg-grid.two { grid-template-columns: repeat(2, 1fr); }
.seg-grid.two .seg-card { padding: 32px 32px 26px; }
.seg-grid.two .seg-card h3 { font-size: 19px; }
.seg-grid.two .seg-card > p { font-size: 14.5px; }
.seg-card {
  background: var(--color-warm-taupe);
  border-radius: var(--radius-cards);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
}
.section.band .seg-card { background: var(--color-eggshell); border: 1px solid var(--color-stone); }
.seg-card .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: 14px;
}
.seg-card h3 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--color-ink);
  margin-bottom: 10px;
}
.seg-card > p {
  font-size: 14px;
  line-height: 1.62;
  color: var(--color-smoke);
  margin-bottom: 18px;
}
.seg-card .back {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-stone);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-graphite);
}
.seg-grid[data-reveal] .seg-card { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.seg-grid[data-reveal].revealed .seg-card { opacity: 1; transform: translateY(0); }
.seg-grid[data-reveal].revealed .seg-card:nth-child(2) { transition-delay: 45ms; }
.seg-grid[data-reveal].revealed .seg-card:nth-child(3) { transition-delay: 90ms; }
.seg-grid[data-reveal].revealed .seg-card:nth-child(4) { transition-delay: 135ms; }
.seg-grid[data-reveal].revealed .seg-card:nth-child(5) { transition-delay: 180ms; }
.seg-grid[data-reveal].revealed .seg-card:nth-child(n + 6) { transition-delay: 225ms; }
@media (max-width: 1080px) {
  .seg-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .seg-grid, .seg-grid.two { grid-template-columns: 1fr; }
  .seg-grid.two .seg-card { padding: 26px 24px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .seg-grid[data-reveal] .seg-card { opacity: 1; transform: none; transition: opacity 150ms ease; }
}

/* ============================================================
   Use-case detail pages (ucd-*): hero, highlights, problem,
   impact, 6-card solution, benefits, similar, CTA band.
   ============================================================ */
.ucd-hero {
  position: relative;
  min-height: 70vh;                 /* hero fills 7/10 of the viewport height */
  width: 100vw;                     /* full-bleed: break out of the centred page-shell frame */
  margin-left: calc(50% - 50vw);
  display: flex;
  align-items: center;
  background: linear-gradient(165deg, #1b1714 0%, #12100e 58%, #0c0b0a 100%);
  color: var(--color-eggshell);
  padding: 120px 40px 72px;         /* top padding clears the fixed nav */
  overflow: hidden;
}
/* Detail hero backed by a photo. The image is set inline on the element (so the
   relative URL resolves against the page, not this stylesheet); a left-weighted
   scrim over it keeps the light hero text legible. */
.ucd-hero.has-photo {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.ucd-hero.has-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9,10,9,0.90) 0%, rgba(9,10,9,0.74) 45%, rgba(9,10,9,0.52) 100%);
}
.ucd-hero.has-photo .ucd-hero-inner { position: relative; z-index: 1; }
.ucd-hero-inner { max-width: 1180px; margin: 0 auto; width: 100%; padding: 0 8px; }
.ucd-crumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(253,252,252,0.55); }
.ucd-crumbs a { color: rgba(253,252,252,0.7); }
.ucd-crumbs a:hover { color: #fff; }
.ucd-crumbs span { color: rgba(253,252,252,0.35); }
.ucd-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -0.025em;
  max-width: 20ch; margin: 22px 0 0;
}
.ucd-lead { margin: 18px 0 0; max-width: 60ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: rgba(253,252,252,0.9); }
.ucd-for { margin: 16px 0 0; max-width: 62ch; font-size: 14.5px; letter-spacing: 0.01em; color: rgba(253,252,252,0.55); }
.ucd-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.ucd-tag {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  padding: 6px 12px; border-radius: var(--radius-full);
  background: rgba(253,252,252,0.08); border: 1px solid rgba(253,252,252,0.16); color: rgba(253,252,252,0.85);
}
.ucd-tag-ember { background: rgba(255,71,4,0.16); border-color: rgba(255,113,51,0.4); color: #ffb27d; }
.ucd-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.ucd-hero .btn-filled { background: var(--color-eggshell); border-color: var(--color-eggshell); color: var(--color-ink); }
.ucd-btn-line { background: transparent; color: rgba(253,252,252,0.85); border-color: rgba(253,252,252,0.28); box-shadow: none; }
.ucd-btn-line:hover { background: rgba(253,252,252,0.08); }

/* Highlights */
.ucd-hl { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 56px; }
.ucd-hl-item { display: flex; gap: 20px; align-items: flex-start; }
.ucd-hl-num { font-family: var(--font-display); font-weight: 300; font-size: 22px; color: var(--color-ash); line-height: 1.1; letter-spacing: -0.02em; flex: none; padding-top: 2px; }
.ucd-hl-item h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.ucd-hl-item p { color: var(--color-smoke); font-size: 15px; line-height: 1.55; margin: 0; }

/* Problem prose */
.ucd-prose { max-width: 760px; }
.ucd-prose p { color: var(--color-graphite); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; margin: 0 0 16px; }
.ucd-prose p:last-child { margin-bottom: 0; }
.ucd-prose strong { color: var(--color-ink); font-weight: 600; }

/* Impact split + evidence */
.ucd-split { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.ucd-evidence {
  background: #12100e; color: var(--color-eggshell);
  border-radius: var(--radius-large-cards); padding: 34px 32px;
}
.ucd-evidence-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253,252,252,0.5); }
.ucd-evidence-num { font-family: var(--font-display); font-weight: 300; font-size: clamp(48px, 6vw, 76px); line-height: 1; letter-spacing: -0.03em; margin: 14px 0 16px; }
.ucd-evidence-text { color: rgba(253,252,252,0.72); font-size: 15px; line-height: 1.55; margin: 0; }
.ucd-evidence-text strong { color: #fff; font-weight: 600; }
.ucd-evidence-src { margin-top: 18px; font-size: 12.5px; color: rgba(253,252,252,0.4); }

/* Solution — 6 cards */
.ucd-solution { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ucd-card {
  background: var(--color-eggshell); border: 1px solid var(--color-stone);
  border-radius: var(--radius-large-cards); padding: 28px 26px 26px;
}
.ucd-card-num { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.1em; color: var(--color-ash); }
.ucd-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 14px 0 8px; }
.ucd-card p { color: var(--color-smoke); font-size: 15px; line-height: 1.55; margin: 0; }

/* Benefits */
.ucd-benefits { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
/* 24px gap between the 'What changes' cards (.ucd-hl) and the summary (.ucd-benefits) in Result of the solution */
.ucd-hl + .ucd-benefits { margin-top: 24px; }
.ucd-benefit { background: var(--color-eggshell); border: 1px solid var(--color-stone); border-radius: var(--radius-large-cards); padding: 32px 30px; }
.ucd-benefit-dark { background: #12100e; border-color: #12100e; color: var(--color-eggshell); }
.ucd-benefit h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 12px; }
.ucd-benefit > p { color: var(--color-smoke); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.ucd-benefit-dark > p { color: rgba(253,252,252,0.6); }
.ucd-benefit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ucd-benefit li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--color-graphite); }
.ucd-benefit-dark li { color: rgba(253,252,252,0.86); }
.ucd-benefit li svg { flex: none; margin-top: 3px; color: #1f9d55; }
.ucd-benefit-dark li svg { color: #7fe3a4; }
.ucd-benefit-note { margin: 18px 0 0 !important; font-size: 12.5px; color: rgba(253,252,252,0.4); line-height: 1.5; }

/* CTA band */
.ucd-ctaband {
  max-width: 1120px; margin: 0 auto; text-align: center;
  background: linear-gradient(165deg, #1b1714 0%, #12100e 100%); color: var(--color-eggshell);
  border-radius: var(--radius-large-cards); padding: 64px 40px;
}
.ucd-ctaband h2 { color: var(--color-eggshell); }
.ucd-ctaband p { max-width: 56ch; margin: 16px auto 0; color: rgba(253,252,252,0.72); font-size: 16px; line-height: 1.55; }
.ucd-ctaband-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 28px 0 0; }
.ucd-ctaband .btn-filled { background: var(--color-eggshell); border-color: var(--color-eggshell); color: var(--color-ink); }
.ucd-ctaband-note { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; margin: 26px 0 0; font-size: 13px; color: rgba(253,252,252,0.45); }
.ucd-ctaband-note span { position: relative; padding-left: 18px; }
.ucd-ctaband-note span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #7fe3a4; }

@media (max-width: 980px) {
  .ucd-split, .ucd-benefits { grid-template-columns: 1fr; gap: 24px; }
  .ucd-solution { grid-template-columns: 1fr 1fr; }
  .ucd-hl { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .ucd-hero { padding: 128px 20px 64px; }
  .ucd-solution { grid-template-columns: 1fr; }
  .ucd-ctaband { padding: 48px 22px; }
}