/* ═══════════════════════════════════════════════════════════════════════════
   TANZIM — DESIGN SYSTEM
   Hand-authored. No framework, no build step, no runtime.

   Palette taken directly off the Tanzim mark, which runs a gradient from
   green through teal to cyan: #269753 → #12B4A2 → #04D4F2.

   THEME LOCK: this page is light throughout. There is no inverted section.
   The whole site is a daylight object, which is what lets the WebGL model
   city sit behind the content without the page becoming a night scene.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Brand, sampled from the logo */
  --green: #269753;
  --teal: #12b4a2;
  --cyan: #04d4f2;

  /* Accessible derivatives. --brand carries graphics; --brand-ink is the only
     one used for text, at 5.98:1 on paper. */
  --brand: #0e9c8c;
  --brand-ink: #076f66;
  --brand-wash: #eaf7f5;
  --brand-edge: #cdeae6;

  --gradient-h: linear-gradient(90deg, var(--green), var(--teal) 52%, var(--cyan));

  /* Surfaces */
  --paper: #fcfdfd;
  --paper-2: #f2f7f6;
  --surface: #ffffff;

  /* Ink */
  --ink: #06201f;
  --ink-2: #33514f;
  --ink-3: #6b8a88;
  --ink-4: #9cb4b2;

  --line: #e3ebea;
  --line-2: #c8d8d6;

  /* Depth, tinted to the surface hue */
  --sh-sm: 0 1px 2px rgba(6, 32, 31, .04), 0 2px 8px -4px rgba(6, 32, 31, .06);
  --sh: 0 2px 4px rgba(6, 32, 31, .03), 0 14px 30px -14px rgba(6, 32, 31, .11);
  --sh-lg: 0 4px 10px rgba(6, 32, 31, .03), 0 36px 70px -28px rgba(6, 32, 31, .18);

  --ease: cubic-bezier(.22, 1, .36, 1);

  --nav-h: 72px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1280px;
  --r: 4px;
  --r-lg: 12px;

  --t-micro: .6875rem;
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-lg: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --t-h4: clamp(1.0625rem, .98rem + .4vw, 1.25rem);
  --t-h3: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --t-h2: clamp(1.9rem, 1.35rem + 2.4vw, 3.4rem);
  --t-h1: clamp(2.4rem, 1.4rem + 3.7vw, 4.75rem);
}

/* ─── 2. RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* `clip`, never `hidden`: overflow-x:hidden promotes html/body to scroll
   containers, which breaks position:sticky and leaves ScrollTrigger measuring
   the wrong scroller. */
html, body { overflow-x: clip; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
}
p { text-wrap: pretty; }

::selection { background: var(--brand-edge); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--paper-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

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

/* ─── 3. THE MODEL CITY LAYER ───────────────────────────────────────────────
   One fixed canvas behind the whole document. Sections choose whether to sit
   on opaque paper or let the model show through.
   ─────────────────────────────────────────────────────────────────────────── */
#city {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  pointer-events: none;
}
#city.is-live { opacity: 1; }

.page { position: relative; z-index: 1; }

.solid { background: var(--paper); }
.solid-2 { background: var(--paper-2); }

/* Fades an opaque band into an open one so the model never cuts off hard */
.fade-up { background: linear-gradient(to top, var(--paper), rgba(252, 253, 253, 0)); }
.fade-down { background: linear-gradient(to bottom, var(--paper), rgba(252, 253, 253, 0)); }
.fade-band { height: clamp(5rem, 14vh, 11rem); }

/* ─── 4. LAYOUT ─────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.section-sm { padding-block: clamp(3rem, 6vw, 5rem); }
.rule-t { border-top: 1px solid var(--line); }

.grid { display: grid; gap: var(--gap, 1.5rem); grid-template-columns: 1fr; }
.flow > * + * { margin-top: 1.1rem; }
.row { display: flex; align-items: center; gap: .75rem; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; }

.mt-1 { margin-top: .5rem; }  .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.75rem; } .mt-6 { margin-top: 3.75rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; } .mb-6 { margin-bottom: 3.75rem; }

/* ─── 5. TYPE ───────────────────────────────────────────────────────────── */
.h1 { font-size: var(--t-h1); letter-spacing: -.042em; font-weight: 500; line-height: 1.02; }
.h2 { font-size: var(--t-h2); letter-spacing: -.034em; font-weight: 500; line-height: 1.06; }
.h3 { font-size: var(--t-h3); letter-spacing: -.028em; font-weight: 500; }
.h4 { font-size: var(--t-h4); letter-spacing: -.02em; font-weight: 600; color: var(--ink); line-height: 1.3; }

.lede { font-size: var(--t-lg); line-height: 1.58; color: var(--ink-2); max-width: 54ch; }
.sm { font-size: var(--t-sm); line-height: 1.68; }
.measure { max-width: 58ch; }

.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Eyebrow. Rationed: no more than one per three sections. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-micro); letter-spacing: .16em;
  text-transform: uppercase; font-weight: 500; color: var(--brand-ink);
}
.eyebrow::before {
  content: ''; width: 1.75rem; height: 2px; border-radius: 2px;
  background: var(--gradient-h); flex-shrink: 0;
}

.accent { color: var(--brand-ink); }
.quiet { color: var(--ink-3); }

/* ─── 6. BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  --wipe: left;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem; border-radius: var(--r);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden;
  transition: color .4s var(--ease), border-color .4s var(--ease),
              transform .16s var(--ease), box-shadow .4s var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { flex-shrink: 0; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* Directional wipe: the fill enters from the edge the pointer crossed */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: var(--wipe);
  transition: transform .5s var(--ease);
}

.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary::after { background: var(--gradient-h); }
.btn-primary:hover { box-shadow: var(--sh); }

.btn-ghost { border: 1px solid var(--line-2); color: var(--ink); background: var(--surface); }
.btn-ghost::after { background: var(--paper-2); }
.btn-ghost:hover { border-color: var(--ink-4); }

.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }

.link {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding-bottom: .3rem; color: var(--brand-ink);
  font-size: var(--t-sm); font-weight: 600;
}
.link::before, .link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  height: 1.5px; width: 100%; border-radius: 2px;
}
.link::before { background: var(--line-2); }
.link::after {
  background: var(--gradient-h); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.link:hover::after { transform: scaleX(1); }
.link svg { transition: transform .4s var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* ─── 7. SURFACES ───────────────────────────────────────────────────────── */
.card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease),
              transform .45s var(--ease);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--sh); transform: translateY(-3px); }

/* Spotlight: --mx/--my are written as custom properties by tanzim.js, so a
   hover never triggers a re-render or a layout pass. */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
              rgba(18, 180, 162, .26), transparent 70%);
}
.spot:hover::before { opacity: 1; }

.tag {
  display: inline-flex; align-items: center; padding: .28rem .7rem;
  border: 1px solid var(--brand-edge); border-radius: 99px;
  background: var(--brand-wash); color: var(--brand-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}

/* ─── 8. HEADER ─────────────────────────────────────────────────────────── */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(252, 253, 253, .7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: transform .55s var(--ease), background-color .4s var(--ease),
              border-color .4s var(--ease);
  will-change: transform;
}
.header.is-stuck { background: rgba(252, 253, 253, .94); border-bottom-color: var(--line); }
.header.is-hidden { transform: translate3d(0, -101%, 0); }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: var(--nav-h);
}
.brand-mark img { height: 23px; width: auto; }

.nav-list { display: none; align-items: center; gap: 1.9rem; }
.nav-link {
  position: relative; padding: .35rem 0;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2);
  transition: color .3s var(--ease); white-space: nowrap;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  border-radius: 2px; background: var(--gradient-h);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link[aria-current='page'] { color: var(--ink); }
.nav-link[aria-current='page']::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: .75rem; }

.mega { position: relative; }
.mega-trigger { display: inline-flex; align-items: center; gap: .4rem; }
.mega-trigger svg { transition: transform .35s var(--ease); opacity: .5; }
.mega.is-open .mega-trigger svg { transform: rotate(180deg); }

.mega-panel {
  position: absolute; top: calc(100% + .7rem); left: 50%;
  width: min(90vw, 44rem); padding: .45rem;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.mega.is-open .mega-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mega-item {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .85rem .95rem; border-radius: var(--r);
  transition: background-color .28s var(--ease);
}
.mega-item:hover { background: var(--paper-2); }
.mega-item__n {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .1em; color: var(--brand);
  padding-top: .3rem; flex-shrink: 0;
}
.mega-item__t { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.mega-item__d { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: .1rem; }

/* Panel variants. Products needs two columns; the short Platform and Company
   groups read better as a single list, and the rightmost group anchors to its
   own right edge so it never runs past the viewport. */
.mega-panel--sm { width: min(90vw, 20.5rem); }
.mega-panel--end { left: auto; right: 0; transform: translateX(0) translateY(-8px); }
.mega.is-open .mega-panel--end { transform: translateX(0) translateY(0); }
.mega-grid--1 { grid-template-columns: minmax(0, 1fr); }

.mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .35rem; padding: .8rem .95rem;
  border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r);
  font-size: var(--t-xs); color: var(--ink-3);
  transition: background-color .28s var(--ease);
}
.mega-foot:hover { background: var(--paper-2); }
.mega-foot strong { color: var(--ink); font-weight: 600; }

.burger {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: var(--r);
}
.burger span {
  display: block; width: 18px; height: 1.5px; border-radius: 2px; background: var(--ink);
  transition: transform .4s var(--ease), opacity .25s var(--ease);
}
.burger.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; }
.burger.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  background: var(--surface); border-top: 1px solid var(--line);
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-lg); font-weight: 500; color: var(--ink);
}
html.is-locked, html.is-locked body { overflow: hidden; }

/* ─── 9. HERO ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: center;
  /* Capped so the hero never floats halfway down the viewport. */
  padding-top: calc(var(--nav-h) + clamp(1rem, 3vw, 2.5rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow-anchor: none;
}
.hero-h1 { font-size: var(--t-h1); font-weight: 500; letter-spacing: -.042em; line-height: 1.06; }
.hero-h1 em { font-style: normal; color: var(--brand-ink); }

/* A soft scrim only where the type sits, so the model stays legible behind it */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(97deg,
    var(--paper) 0%, rgba(252, 253, 253, .93) 24%,
    rgba(252, 253, 253, .55) 42%, rgba(252, 253, 253, 0) 62%);
}

/* ─── 10. MODE RAIL ─────────────────────────────────────────────────────── */
.rail {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.rail-item {
  position: relative; overflow: hidden; background: var(--surface);
  padding: 1.5rem 1.35rem; transition: background-color .4s var(--ease);
}
.rail-item:hover { background: var(--paper-2); }
.rail-item::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--gradient-h); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.rail-item:hover::before { transform: scaleX(1); }
.rail-icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  margin-bottom: 1.05rem; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--brand); background: var(--paper-2);
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.rail-icon svg { width: 21px; height: 21px; }
.rail-item:hover .rail-icon { color: var(--brand-ink); border-color: var(--brand-edge); background: var(--brand-wash); }
.rail-item__t { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.rail-item__d { font-size: var(--t-xs); color: var(--ink-3); margin-top: .2rem; }

/* ─── 11. OFFSET GRID (the problem) ─────────────────────────────────────── */
.offset {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.offset > * { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.4rem); }

/* The four universal decisions, set large */
.decisions { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.3rem; }
.decisions span {
  font-size: var(--t-h3); font-weight: 500; letter-spacing: -.028em; color: var(--brand-ink);
}
.decisions i { font-style: normal; color: var(--line-2); font-size: var(--t-h3); }

/* ─── 12. PRAXIS PANEL ────────────────────────────────────────────────── */
.panel-list { border-top: 1px solid var(--line); }
.panel-item {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  padding: 1.35rem .25rem; border-bottom: 1px solid var(--line);
  transition: background-color .35s var(--ease), padding-left .35s var(--ease);
}
.panel-item:hover { background: var(--paper-2); padding-left: .85rem; }
.panel-item[aria-selected='true'] { background: var(--brand-wash); padding-left: .85rem; }
.panel-item__i {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r); background: var(--paper-2); color: var(--brand);
  border: 1px solid var(--line);
}
.panel-item[aria-selected='true'] .panel-item__i {
  background: #fff; border-color: var(--brand-edge); color: var(--brand-ink);
}
.panel-item__i svg { width: 18px; height: 18px; }
.panel-item__t { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); }
.panel-item__d { display: block; font-size: var(--t-sm); color: var(--ink-3); margin-top: .25rem; }

.panel-stage {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 4 / 5; background: var(--surface);
}
.panel-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.panel-stage figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.35rem;
  background: linear-gradient(to top, #ffffff 42%, rgba(255, 255, 255, 0));
  font-size: var(--t-sm); color: var(--ink-2);
}

/* ─── 13. HORIZONTAL PAN (product family) ───────────────────────────────── */
.pan { position: relative; overflow: hidden; }
.pan-track { display: flex; align-items: stretch; will-change: transform; }
.pan-card {
  flex: 0 0 auto; width: min(84vw, 26rem);
  margin-right: clamp(1rem, 2vw, 1.75rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.pan-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.pan-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pan-card__body { padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }

/* ─── 14. STAT BAND ─────────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.stat {
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: clamp(1.4rem, 3vw, 2.1rem);
}
.stat dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .625rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.stat dd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); font-weight: 500;
  color: var(--ink); margin-top: .5rem; letter-spacing: -.035em;
}
.stat p { font-size: var(--t-xs); color: var(--ink-3); margin-top: .45rem; }

/* ─── 15. FORMS ─────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .5rem; }
.field-label { font-size: var(--t-xs); font-weight: 600; color: var(--ink); }
.input {
  width: 100%; min-height: 3rem; padding: .7rem .95rem;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); font-size: var(--t-sm); color: var(--ink);
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.input:user-invalid { border-color: #b8443a; }
textarea.input { resize: vertical; min-height: 7.5rem; }
.field-hint { font-size: var(--t-xs); color: var(--ink-3); }

/* ─── 16. FOOTER ────────────────────────────────────────────────────────── */
.footer { background: var(--surface); border-top: 1px solid var(--line); }
.footer-grad { height: 3px; background: var(--gradient-h); }
.footer-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.footer-link { font-size: var(--t-sm); color: var(--ink-2); transition: color .28s var(--ease); }
.footer-link:hover { color: var(--brand-ink); }
.footer-grid { display: grid; gap: 3.25rem; grid-template-columns: 1fr; }

/* ─── 17. MARQUEE (one per page) ────────────────────────────────────────── */
.marquee {
  display: flex; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; flex-shrink: 0; align-items: center; gap: 3rem;
  padding-right: 3rem; animation: marquee 46s linear infinite; will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap; color: var(--ink-3); }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-100%,0,0); } }

/* ─── 18. CHAT ──────────────────────────────────────────────────────────── */
.chat-root {
  position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: .85rem;
}
.chat-fab {
  width: 52px; height: 52px; border-radius: 99px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.chat-fab:hover { transform: scale(1.06); box-shadow: var(--sh-lg); }
.chat-fab:active { transform: scale(.97); }
.chat-fab img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.chat-win {
  display: flex; flex-direction: column;
  width: min(22.5rem, calc(100vw - 2rem)); height: min(30rem, calc(100dvh - 8rem));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden;
}
.chat-win[hidden] { display: none; }
.chat-head {
  display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem;
  border-bottom: 1px solid var(--line); background: var(--paper-2); flex-shrink: 0;
}
.chat-stream { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.chat-avatar {
  width: 28px; height: 28px; border-radius: 99px; flex-shrink: 0;
  border: 1px solid var(--line-2); background-image: var(--avatar);
  background-size: cover; background-position: top center;
}
.chat-avatar--lg { width: 34px; height: 34px; }
.chat-row { display: flex; gap: .6rem; align-items: flex-start; }
.chat-row--user { justify-content: flex-end; }
.chat-bubble {
  max-width: 82%; padding: .6rem .85rem; border-radius: var(--r-lg);
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2);
}
.chat-bubble--user { background: var(--brand-wash); border-color: var(--brand-edge); color: var(--ink); }
.chat-bubble--typing { display: flex; gap: 5px; align-items: center; padding: .9rem; }
.chat-bubble strong { color: var(--ink); font-weight: 600; }
.chat-bullet { display: block; padding-left: .9rem; position: relative; }
.chat-bullet::before { content: '-'; position: absolute; left: 0; color: var(--brand); }
.chat-dot { width: 5px; height: 5px; border-radius: 99px; background: var(--brand); animation: typing 1.3s var(--ease) infinite; }
.chat-dot:nth-child(2) { animation-delay: .16s; }
.chat-dot:nth-child(3) { animation-delay: .32s; }
@keyframes typing { 0%,70%,100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
.chat-compose {
  display: flex; align-items: flex-end; gap: .5rem; padding: .7rem;
  border-top: 1px solid var(--line); background: var(--paper-2); flex-shrink: 0;
}
.chat-input {
  flex: 1; max-height: 6rem; min-height: 2.5rem; padding: .6rem .75rem;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
  font-size: var(--t-sm); line-height: 1.5; resize: none; color: var(--ink);
}
.chat-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.chat-input:disabled { opacity: .55; }
.chat-send {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border-radius: var(--r); background: var(--ink); color: #fff;
  transition: background-color .3s var(--ease), transform .2s var(--ease);
}
.chat-send:hover:not(:disabled) { background: var(--brand-ink); }
.chat-send:active:not(:disabled) { transform: scale(.94); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; }

/* ─── 19. MISC ──────────────────────────────────────────────────────────── */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: var(--gradient-h); transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 80;
  padding: .85rem 1.25rem; background: var(--ink); color: #fff; border-radius: var(--r);
}

/* Masks a heading's lines so they rise from behind a hard edge. The padding
   and negative margin protect descenders without adding height. */
/* The padding gives descenders room inside the mask; the negative margin
   removes that space again between lines. On the final line there is no next
   line to close up against, so the margin is dropped and the reserve stays. */
.line-mask { display: block; overflow: hidden; padding-bottom: .32em; margin-bottom: -.32em; }
.line-mask:last-child { margin-bottom: 0; }
.tz-word { display: inline-block; }

/* Reveal states apply only with JS present, so a no-JS visitor and a visitor
   whose script failed both still see every word. */
html.js [data-reveal] { opacity: 0; }
html.js [data-reveal-line] { opacity: 0; }

/* ─── 20. RESPONSIVE ────────────────────────────────────────────────────── */
.lg-only { display: none; }

@media (min-width: 640px) {
  .sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  /* Fixed count, not auto-fit. The rail holds one cell per product, and
     auto-fit packs as many as will fit, leaving the remainder stranded on a
     half-empty row. Four divides the eight products into two clean rows.
     If a product is added or removed, revisit this number. */
  .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.3fr 2fr; }

  /* Deliberately unequal: the first cell spans two rows and the last spans two
     columns, so the four problems read as a composition rather than as four
     identical cards in a row. */
  .offset { grid-template-columns: 1.15fr 1fr 1fr; }
  .offset > :nth-child(1) { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
  .offset > :nth-child(4) { grid-column: 2 / span 2; }
}

@media (min-width: 1024px) {
  .nav-list { display: flex; }
  .burger { display: none; }
  .lg-only { display: inline-flex; }

  .split { display: grid; grid-template-columns: var(--split, 1fr 1fr); gap: var(--gap, clamp(2.5rem, 5vw, 5rem)); }
  .hero-h1 { max-width: 21ch; }
  .panel-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 4vw, 4rem); align-items: start; }
}

/* ─── 21. REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.js [data-reveal], html.js [data-reveal-line] { opacity: 1 !important; }
  .marquee__track { animation: none; }
  #city { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERIOR PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 22. SUB-HERO ──────────────────────────────────────────────────────────
   Shorter than the home hero: interior pages carry dense content, so the
   model city gets one moment at the top and then yields to the page.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-sub {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(26rem, 56vh, 34rem);
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  overflow-anchor: none;
}
.hero-sub .hero-scrim {
  background: linear-gradient(100deg,
    var(--paper) 0%, rgba(252, 253, 253, .94) 28%,
    rgba(252, 253, 253, .6) 46%, rgba(252, 253, 253, .1) 70%);
}
.hero-sub h1 { font-size: var(--t-h1); letter-spacing: -.042em; line-height: 1.04; max-width: 18ch; }

/* ─── 23. TABLES ────────────────────────────────────────────────────────── */
.table-shell { width: 100%; overflow-x: auto; }
.table-tz { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 46rem; }
.table-tz thead th {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; text-align: left; vertical-align: bottom;
  padding: 0 1.25rem 1rem 0; border-bottom: 1px solid var(--line-2);
}
.table-tz tbody td {
  padding: 1.15rem 1.25rem 1.15rem 0; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.table-tz tbody tr { transition: background-color .3s var(--ease); }
.table-tz tbody tr:hover { background: var(--paper-2); }
.table-tz .row-key { font-weight: 600; color: var(--ink); }
/* The Tanzim column is the emphasis column */
.table-tz .col-own {
  border-left: 2px solid var(--brand); padding-left: 1.5rem;
  color: var(--ink); font-weight: 500; background: rgba(234, 247, 245, .45);
}
.table-tz thead .col-own { color: var(--brand-ink); }

/* ─── 24. TABS ──────────────────────────────────────────────────────────── */
.tabbar {
  display: flex; flex-wrap: wrap; gap: .4rem;
  border-bottom: 1px solid var(--line); padding-bottom: .75rem;
}
.tab {
  position: relative; padding: .55rem .95rem; border-radius: var(--r);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.tab:hover { color: var(--ink); background: var(--paper-2); }
.tab[aria-selected='true'] { color: var(--brand-ink); background: var(--brand-wash); }
.tab-panel[hidden] { display: none; }
.tab-panel { padding-top: clamp(1.5rem, 3vw, 2.25rem); }

/* ─── 25. ACCORDION (Praxis modules) ──────────────────────────────────── */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 1.9rem) 0;
  transition: color .3s var(--ease);
}
.acc-head:hover .acc-title { color: var(--brand-ink); }
.acc-n {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-micro); letter-spacing: .12em; color: var(--brand);
  flex-shrink: 0; width: 2rem;
}
.acc-title { flex: 1; font-size: var(--t-h3); font-weight: 500; letter-spacing: -.026em; color: var(--ink); transition: color .3s var(--ease); }
.acc-icon {
  flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 99px; color: var(--ink-3);
  transition: transform .45s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.acc-head[aria-expanded='true'] .acc-icon { transform: rotate(45deg); border-color: var(--brand); color: var(--brand-ink); }
.acc-body { overflow: hidden; }
.acc-body[hidden] { display: none; }
.acc-inner { padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ─── 26. SCENARIO CARD ─────────────────────────────────────────────────── */
.scenario {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.15rem 1.25rem;
}
.scenario dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-ink); margin-bottom: .5rem;
}
.scenario dd { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

/* ─── 27. CAPABILITY / CHECK LISTS ──────────────────────────────────────── */
.checks { display: grid; gap: .7rem; }
.check { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--t-sm); color: var(--ink-2); }
.check svg { flex-shrink: 0; margin-top: .3rem; color: var(--brand); }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Grouped hairline rows: used instead of a long bulleted list */
.rows { border-top: 1px solid var(--line); }
.rows > li {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-2);
}
.rows > li svg { flex-shrink: 0; margin-top: .3rem; color: var(--brand); }

/* ─── 28. NUMBERED BLOCKS ───────────────────────────────────────────────── */
.numbered { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.numbered > * { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); }
.num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 500;
  letter-spacing: -.03em; color: var(--brand); display: block; margin-bottom: 1rem;
}

/* ─── 29. PEOPLE ────────────────────────────────────────────────────────── */
.person { display: flex; flex-direction: column; }
.person__photo {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--paper-2);
  aspect-ratio: 4 / 5; margin-bottom: 1.15rem;
}
.person__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.person__photo--mono { display: grid; place-items: center; }
.person__initials {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 500;
  color: var(--line-2); letter-spacing: .04em;
}
.person__role { font-size: var(--t-sm); color: var(--ink-3); margin-top: .2rem; }

.linkedin {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); transition: color .3s var(--ease);
}
.linkedin:hover { color: var(--brand-ink); }
.linkedin svg { flex-shrink: 0; }

/* ─── 30. NOTICES ───────────────────────────────────────────────────────── */
.notice {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.1rem 1.25rem; border-radius: var(--r-lg);
  border: 1px solid var(--brand-edge); background: var(--brand-wash);
}
.notice svg { flex-shrink: 0; margin-top: .15rem; color: var(--brand-ink); }
.notice--warn { border-color: #e8d9a8; background: #fdf8e8; }
.notice--warn svg { color: #8a6d1f; }
.notice--error { border-color: #edcdc8; background: #fdf2f0; }
.notice--error svg { color: #a8412f; }
.notice__t { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.notice__d { font-size: var(--t-sm); color: var(--ink-2); margin-top: .2rem; }
.notice a { color: var(--brand-ink); font-weight: 600; }

/* ─── 31. SHIFT LIST (from -> to) ───────────────────────────────────────── */
.shift { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.shift > div {
  background: var(--surface); padding: 1.35rem 1.5rem;
  display: grid; gap: .5rem 1.25rem; align-items: center;
  grid-template-columns: 1fr;
}
.shift .from { font-size: var(--t-sm); color: var(--ink-3); }
.shift .to { font-size: var(--t-h4); font-weight: 600; color: var(--ink); }
.shift .arrow { color: var(--brand); display: none; }

/* ─── 32. MEDIA FIGURE ──────────────────────────────────────────────────── */
.figure {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--paper-2);
}
.figure img { display: block; width: 100%; height: auto; }
.figure--contain { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); }
.figure--contain img { max-height: 24rem; width: auto; object-fit: contain; }

/* Fixed-ratio frame the image fills. Use this when several figures sit in a
   row: --contain centres each image at its own size and leaves uneven gaps. */
.figure--cover { aspect-ratio: 4 / 3; }
.figure--cover img { height: 100%; object-fit: cover; }

/* ─── 33. INTERIOR RESPONSIVE ───────────────────────────────────────────── */
@media (min-width: 640px) {
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shift > div { grid-template-columns: 1fr auto 1.1fr; }
  .shift .arrow { display: block; }
}

@media (min-width: 900px) {
  .numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbered--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numbered--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}