/* =============================================================
   POLARIS IMPACT — Design System
   ============================================================= */

/* ---------- SELF-HOSTED FONTS (no third-party CDN) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/fraunces-normal.woff2') format('woff2-variations'),
       url('fonts/fraunces-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/fraunces-italic.woff2') format('woff2-variations'),
       url('fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2-variations'),
       url('fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-variable.woff2') format('woff2-variations'),
       url('fonts/jetbrains-mono-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- TOKENS ---------- */
:root {
  /* Type scale — fluid */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --text-3xl: clamp(3rem, 1rem + 6vw, 6rem);
  --text-hero: clamp(3.5rem, 0.5rem + 9vw, 10rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Color — Polaris palette */
  --ink: #0A0B0F;                /* near-black */
  --ink-soft: #1a1b20;
  --paper: #F4EFE6;              /* warm off-white */
  --paper-2: #EDE7DA;
  --paper-3: #E5DECF;
  --ember: #E85D1F;              /* confident electric amber */
  --ember-hot: #D44B10;
  --ember-tint: #F4C8A8;
  --mute: #6B645A;               /* warm grey secondary */
  --mute-soft: #A8A196;
  --rule: rgba(10, 11, 15, 0.12);
  --rule-strong: rgba(10, 11, 15, 0.3);

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms var(--ease);
  --t-med: 380ms var(--ease);
  --t-slow: 700ms var(--ease);

  /* Content widths */
  --container: 1440px;
  --container-x: clamp(1.25rem, 4vw, 4rem);

  /* Fonts */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- BASE ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--paper);
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; color: inherit; font: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p, li, figcaption { text-wrap: pretty; }

::selection { background: var(--ember); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- LAYOUT ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-x);
}

.section {
  padding-block: clamp(4rem, 10vw, 9rem);
}

.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section-dark {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}

.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/dark_texture.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  mix-blend-mode: screen;
  pointer-events: none;
}

.section-dark > * { position: relative; z-index: 1; }

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

.rule {
  height: 1px;
  background: var(--rule);
  border: none;
}

.section-dark .rule { background: rgba(244, 239, 230, 0.2); }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-5);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.logo svg { width: 28px; height: 28px; flex-shrink: 0; }
.logo .wordmark { display: inline-flex; flex-direction: column; line-height: 1.05; }
.logo .wordmark span:last-child { color: var(--mute); font-weight: 500; letter-spacing: 0.08em; }

.nav-links {
  list-style: none;
  display: flex;
  gap: var(--space-8);
  font-size: var(--text-sm);
  font-weight: 500;
}

.nav-links a {
  position: relative;
  padding-block: var(--space-1);
  color: var(--ink);
  opacity: 0.85;
  transition: opacity var(--t-fast);
}

.nav-links a:hover { opacity: 1; }
.nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ember);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  transition: background var(--t-fast), transform var(--t-fast);
}

.nav-cta:hover { background: var(--ember); transform: translateY(-1px); }

.nav-cta svg { width: 14px; height: 14px; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
}

.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover { background: var(--ember); transform: translateY(-2px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.section-dark .btn--primary { background: var(--paper); color: var(--ink); }
.section-dark .btn--primary:hover { background: var(--ember); color: var(--paper); }
.section-dark .btn--ghost { color: var(--paper); border-color: var(--paper); }
.section-dark .btn--ghost:hover { background: var(--paper); color: var(--ink); }

/* ---------- HERO ---------- */
.hero {
  padding-block: clamp(3rem, 7vw, 7rem) clamp(4rem, 9vw, 8rem);
  position: relative;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
  margin-bottom: var(--space-8);
}

.hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--ember);
}

.hero-title {
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-style: normal;
  max-width: 16ch;
  margin-bottom: var(--space-10);
}

.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ember);
}

.hero-lede {
  max-width: 52ch;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--mute);
  margin-bottom: var(--space-10);
}

.hero-lede strong { color: var(--ink); font-weight: 500; }

.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero-meta {
  margin-top: var(--space-16);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}

.hero-meta dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mute);
  margin-bottom: var(--space-2);
}

.hero-meta dd {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* ---------- SECTION HEADINGS / KICKERS ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mute);
  margin-bottom: var(--space-6);
}

.kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ember);
}

.section-dark .kicker { color: var(--mute-soft); }

.section-title {
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
  max-width: 20ch;
  margin-bottom: var(--space-10);
}

.section-title em { font-style: italic; color: var(--ember); font-weight: 400; }

.section-title--big {
  font-size: var(--text-3xl);
}

.section-title--center { margin-inline: auto; text-align: center; }

.lede {
  max-width: 52ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--mute);
}

.lede--dark { color: rgba(244, 239, 230, 0.75); }

/* ---------- NUMBERS BAND ---------- */
.numbers-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(244, 239, 230, 0.2);
  border-bottom: 1px solid rgba(244, 239, 230, 0.2);
}

.number-cell {
  padding: var(--space-10) var(--space-6);
  border-right: 1px solid rgba(244, 239, 230, 0.2);
}

.number-cell:last-child { border-right: none; }

.number-cell .value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-4);
}

.number-cell .value em { font-style: italic; color: var(--ember); font-weight: 400; }

.number-cell .label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 230, 0.65);
}

/* ---------- SERVICES / NUMBERED LIST ---------- */
.pillar-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}

.pillar {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: var(--space-10);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.pillar-index {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--mute);
  letter-spacing: 0.1em;
  padding-top: var(--space-2);
}

.pillar-title {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
}

.pillar-title em { font-style: italic; color: var(--ember); font-weight: 400; }

.pillar-body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--mute);
  max-width: 48ch;
}

.pillar-body strong { color: var(--ink); font-weight: 500; }
.section-dark .pillar-body strong { color: var(--paper); }
.section-dark .pillar-body { color: rgba(244, 239, 230, 0.7); }
.section-dark .pillar { border-color: rgba(244, 239, 230, 0.15); }
.section-dark .pillar-list { border-top-color: rgba(244, 239, 230, 0.15); }

.pillar-tags {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.pillar-tags li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--mute);
  letter-spacing: 0.06em;
}

.section-dark .pillar-tags li { border-color: rgba(244,239,230,0.25); color: rgba(244,239,230,0.7); }

/* ---------- ARTIS STAGES ---------- */
.artis-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.artis-cell {
  padding: var(--space-10) var(--space-6);
  border-right: 1px solid var(--rule);
  position: relative;
}

.artis-cell:last-child { border-right: none; }

.artis-cell .letter {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-6);
  color: var(--ink);
}

.artis-cell:nth-child(even) .letter { font-style: italic; color: var(--ember); }

.artis-cell .name {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mute);
  margin-bottom: var(--space-3);
}

.artis-cell .desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink);
}

/* Detailed ARTIS stage block */
.stage {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--rule);
}

.stage:last-child { border-bottom: 1px solid var(--rule); }

.stage-head {
  position: sticky;
  top: 6rem;
  align-self: start;
}

.stage-letter {
  font-family: var(--font-display);
  font-size: clamp(6rem, 12vw, 11rem);
  line-height: 0.85;
  font-weight: 300;
  letter-spacing: -0.045em;
  margin-bottom: var(--space-4);
}

.stage-letter em { font-style: italic; color: var(--ember); font-weight: 400; }

.stage-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mute);
}

.stage-body h3 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 22ch;
}

.stage-body p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--mute);
  margin-bottom: var(--space-5);
  max-width: 60ch;
}

.stage-body p strong { color: var(--ink); font-weight: 500; }

.stage-list {
  list-style: none;
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
}

.stage-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
  padding-block: var(--space-2);
  border-top: 1px solid var(--rule);
}

.stage-list li::before {
  content: counter(artis-item, decimal-leading-zero);
  counter-increment: artis-item;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.1em;
  padding-top: 4px;
}

.stage-list { counter-reset: artis-item; }

/* ---------- WORK / PROJECT CARDS ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10);
}

.work-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }

.work-card {
  display: block;
  position: relative;
  color: inherit;
}

.work-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-3);
  margin-bottom: var(--space-5);
  position: relative;
}

.work-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.work-card:hover .work-card-img img { transform: scale(1.03); }

.work-card-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  color: var(--mute);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  position: relative;
}

.work-card-img--placeholder::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--rule-strong);
}

.work-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mute);
  margin-bottom: var(--space-2);
}

.work-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.work-card-title em { font-style: italic; color: var(--ember); }

.work-card-desc {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--mute);
  max-width: 40ch;
}

/* ---------- MARQUEE ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding-block: var(--space-10);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.marquee-track {
  display: inline-flex;
  gap: var(--space-16);
  padding-left: var(--space-16);
  animation: scroll 50s linear infinite;
  align-items: center;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}

.marquee-item::after {
  content: '✱';
  color: var(--ember);
  font-size: 0.7em;
  display: inline-block;
  margin-left: var(--space-8);
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- FEATURE BLOCKS (image + text pairs) ---------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding-block: var(--space-16);
}

.feature--reverse .feature-visual { order: 2; }

.feature-visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
}

.feature-visual img { width: 100%; height: 100%; object-fit: cover; }

.feature h2 {
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
}

.feature p {
  font-size: var(--text-base);
  color: var(--mute);
  line-height: 1.65;
  margin-bottom: var(--space-4);
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-24) 0 var(--space-10);
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/dark_texture.jpg');
  background-size: cover;
  opacity: 0.1;
  pointer-events: none;
}

.site-footer > * { position: relative; z-index: 1; }

.footer-hero {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-16);
  max-width: 18ch;
}

.footer-hero em { font-style: italic; color: var(--ember); font-weight: 400; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-top: var(--space-10);
  border-top: 1px solid rgba(244, 239, 230, 0.2);
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mute-soft);
  font-weight: 500;
  margin-bottom: var(--space-5);
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col li { font-size: var(--text-sm); opacity: 0.85; line-height: 1.4; }
.footer-col a { font-size: var(--text-sm); opacity: 1; transition: opacity var(--t-fast); color: inherit; }
.footer-col a:hover { opacity: 1; color: var(--ember); }

.footer-col p { font-size: var(--text-sm); line-height: 1.6; opacity: 0.8; }

.footer-legal {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(244, 239, 230, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mute-soft);
}

.footer-legal p { max-width: 48ch; }
.footer-legal a:hover { color: var(--ember); }
.footer-legal ul { display: flex; gap: var(--space-6); list-style: none; }

/* ---------- ENGAGEMENT / PRINCIPLES / COLLECTIVE / FAQ / AI GRIDS ---------- */
.models-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(244, 239, 230, 0.15);
}
.models-grid > .artis-cell {
  padding: var(--space-8) var(--space-5) var(--space-8) 0;
  border-right: 1px solid rgba(244, 239, 230, 0.15);
  position: relative;
}
.models-grid > .artis-cell:last-child { border-right: none; }

.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}

.collective-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding-top: var(--space-10);
  border-top: 1px solid rgba(244, 239, 230, 0.15);
}

.ai-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(244, 239, 230, 0.15);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}

.contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-16);
}

@media (max-width: 900px) {
  .models-grid { grid-template-columns: repeat(2, 1fr); }
  .models-grid > .artis-cell:nth-child(2n) { border-right: none; }
  .models-grid > .artis-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(244, 239, 230, 0.15); }

  .principles-grid { grid-template-columns: 1fr; }
  .principles-grid > div { border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; }

  .collective-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }

  .ai-features-grid { grid-template-columns: 1fr; gap: var(--space-8); }

  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid > div { border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; }

  .contact-grid { grid-template-columns: 1fr; gap: var(--space-12); }
}

@media (max-width: 560px) {
  .models-grid { grid-template-columns: 1fr; }
  .models-grid > .artis-cell { border-right: none; border-bottom: 1px solid rgba(244, 239, 230, 0.15); padding: var(--space-8) 0; }
  .models-grid > .artis-cell:last-child { border-bottom: none; }

  .collective-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ---------- INTRO/REVEAL ANIMATIONS ---------- */
/* Progressive enhancement: opacity 0 only when JS has flagged the document. */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

html.js-reveal .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

html.js-reveal .reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

html.js-reveal .reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 400ms; }

/* ---------- FORMS ---------- */
.form {
  display: grid;
  gap: var(--space-6);
  max-width: 640px;
}

.form label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mute);
  margin-bottom: var(--space-2);
}

.form input,
.form textarea,
.form select {
  width: 100%;
  padding: var(--space-4) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--text-base);
  color: var(--ink);
  font-family: var(--font-body);
  transition: border-color var(--t-fast);
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-bottom-color: var(--ember);
}

.form textarea { resize: vertical; min-height: 140px; }

.form button[type="submit"] {
  justify-self: start;
  margin-top: var(--space-4);
}

/* ---------- UTILITIES ---------- */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.9;
  z-index: 1;
}

.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .nav-links,
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  .nav.is-open .nav-links,
  .nav.is-open .nav-cta {
    display: flex;
  }
  .nav.is-open {
    flex-wrap: wrap;
  }
  .nav.is-open .nav-links {
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-top: 1px solid var(--rule);
  }
  .nav.is-open .nav-cta {
    order: 4;
    width: 100%;
    justify-content: center;
    margin-bottom: var(--space-4);
  }

  .hero-meta { grid-template-columns: 1fr 1fr; }
  .numbers-band { grid-template-columns: 1fr 1fr; }
  .number-cell:nth-child(2) { border-right: none; }
  .number-cell:nth-child(1), .number-cell:nth-child(2) { border-bottom: 1px solid rgba(244,239,230,0.2); }

  .pillar { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-10) 0; }
  .pillar-index { padding-top: 0; }

  .artis-grid { grid-template-columns: 1fr 1fr; }
  .artis-cell:nth-child(2) { border-right: none; }
  .artis-cell { border-bottom: 1px solid var(--rule); }
  .artis-cell:nth-last-child(-n+2) { border-bottom: none; }
  .artis-cell:nth-child(5) { grid-column: 1 / -1; border-right: none; border-top: 1px solid var(--rule); }

  .stage { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-10) 0; }
  .stage-head { position: static; }
  .stage-list { grid-template-columns: 1fr; }

  .work-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .work-grid--3 { grid-template-columns: 1fr; }

  .feature { grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-10); }
  .feature--reverse .feature-visual { order: 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:first-child { grid-column: 1 / -1; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

@media (max-width: 560px) {
  .artis-grid { grid-template-columns: 1fr; }
  .artis-cell { border-right: none; border-bottom: 1px solid var(--rule); }
  .artis-cell:last-child { border-bottom: none; }
  .footer-grid { grid-template-columns: 1fr; }
}


/* =============================================================
   POLARIS ROUND 4 — LinkedIn button, answer-box, mobile tuning
   ============================================================= */

/* LinkedIn circular nav button */
.nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #0A66C2;
  color: #FFFFFF;
  border-radius: 999px;
  transition: background var(--t-fast), transform var(--t-fast);
  margin-right: var(--space-3);
  flex-shrink: 0;
}
.nav-social:hover { background: #084a8f; transform: translateY(-1px); }
.nav-social svg { width: 16px; height: 16px; }

/* Mobile visibility for nav-social — matches nav-cta pattern */
@media (max-width: 900px) {
  .nav-social { display: none; }
  .nav.is-open .nav-social {
    display: inline-flex;
    order: 3;
    margin-right: 0;
    margin-inline: auto;
    margin-bottom: var(--space-4);
  }
}

/* ---------- ANSWER BOX (AI-friendly content card) ---------- */
.answer-box {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ember);
  padding: var(--space-8) var(--space-10);
  max-width: 72ch;
  border-radius: 2px;
}
.answer-box .answer-q {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ember);
  font-size: var(--text-lg);
  line-height: 1.3;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.answer-box .answer-q + .answer-a { margin-bottom: var(--space-6); }
.answer-box .answer-a:last-child { margin-bottom: 0; }
.answer-box .answer-a {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
}
.answer-box .answer-a strong { font-weight: 600; }

/* ---------- VERSION B HERO VISUAL ---------- */
.hero--with-visual .hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}
@media (max-width: 900px) {
  .hero--with-visual .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-visual { max-height: 40vh; overflow: hidden; }
  .hero-visual img { max-height: 40vh; object-fit: contain; object-position: center; }
}
@media (max-width: 560px) {
  .hero-visual { display: none; }
}

/* ---------- MOBILE LIGHTWEIGHT TUNING ---------- */
@media (max-width: 768px) {
  .marquee { display: none; }
  .feature-visual { display: none; }
  .hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem); }
  .section { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
  .answer-box { padding: var(--space-6) var(--space-5); }
}

@media (max-width: 560px) {
  .number-cell { padding: var(--space-6) var(--space-4); }
  .number-cell .value { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-title { margin-bottom: var(--space-6); }
  .hero-lede { margin-bottom: var(--space-6); font-size: var(--text-base); }
  .hero-meta { margin-top: var(--space-10); padding-top: var(--space-6); gap: var(--space-5); }
  .section-title { margin-bottom: var(--space-6); }
}


/* =============== POLARIS ROUND 5 — layout polish, audit fixes ===============
   Applied 2026-04-18. Overrides selected Round-4 rules.
   ========================================================================= */

/* ---------- 1. LinkedIn nav button — subtle square, monochrome ----------
   Replaces old round blue circle. Matches nav link size / rhythm.          */
.nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(10, 11, 15, 0.18);
  border-radius: 6px;
  margin-right: var(--space-4);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}
.nav-social:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: none;
}
.nav-social svg { width: 18px; height: 18px; }

/* Mobile drawer pattern — same as nav-cta */
@media (max-width: 900px) {
  .nav-social { display: none; }
  .nav.is-open .nav-social {
    display: inline-flex;
    order: 3;
    margin-right: 0;
    margin-inline: auto;
    margin-bottom: var(--space-4);
  }
}

/* ---------- 2. Hero (Version B) — reposition graphic ----------
   Issue: align-items: center pushed the img below baseline of long text.
   Fix:   align to top, tighten gap, cap image max-height so it reads with H1.
*/
.hero--with-visual .hero-grid {
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  align-items: start;
}
/* Pull visual up to align with eyebrow, not the bottom of the hero block */
.hero-visual {
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
  max-width: 560px;
  justify-self: end;
}
.hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  /* softer edge blending with paper */
  filter: contrast(1.02);
}

@media (max-width: 1100px) {
  .hero--with-visual .hero-grid { grid-template-columns: 1.3fr 1fr; }
  .hero-visual { margin-top: var(--space-8); }
}
@media (max-width: 900px) {
  .hero--with-visual .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-visual {
    margin-top: var(--space-4);
    max-height: 42vh;
    max-width: 100%;
    justify-self: stretch;
    overflow: hidden;
  }
  .hero-visual img { max-height: 42vh; object-fit: contain; object-position: left center; }
}
@media (max-width: 560px) {
  .hero-visual { display: none; }
}

/* ---------- 3. Section spacing — tighten vertical rhythm ----------
   Prior: .section padding-block ~ clamp(4.5rem, 9vw, 8rem) → too airy.
   Polished: tighter, consistent rhythm, still editorial.                 */
.section {
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
}
.section--tight {
  padding-block: clamp(3rem, 5.5vw, 5rem);
}
.section-dark {
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
}

/* Kill a common dead gap after the feature (section-paper-2) visuals */
.section-paper-2 { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.feature { padding-block: 0; }

/* Hero — keep generous but not empty */
.hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }

/* Tighten lede-block-to-grid margins */
.section .lede { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- 4. Answer-box — editorial restyle ----------
   Before: cream box with left amber bar + rounded corners — felt like
   a tooltip. Now: set within a bordered rule system that echoes ARTIS
   grid cells and section dividers. No rounded corners, hairline rule,
   display typography. Mono eyebrow above the question.                  */
.answer-box {
  background: transparent;
  border: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-left: none;
  padding: var(--space-8) 0;
  max-width: 68ch;
  border-radius: 0;
  position: relative;
}
.answer-box::before {
  content: "Frequently asked";
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--space-5);
}
.answer-box .answer-q {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  font-size: var(--text-xl);
  line-height: 1.25;
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
}
.answer-box .answer-q::before {
  content: "— ";
  color: var(--ember);
  font-style: normal;
}
.answer-box .answer-q + .answer-a { margin-bottom: var(--space-6); }
.answer-box .answer-a:last-child { margin-bottom: 0; }
.answer-box .answer-a {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.88;
}
.answer-box .answer-a strong { font-weight: 600; opacity: 1; }

/* When the answer-box lives inside a dark section, invert colours */
.section-dark .answer-box,
.section-dark.answer-box {
  border-top-color: rgba(244, 239, 230, 0.16);
  border-bottom-color: rgba(244, 239, 230, 0.16);
}
.section-dark .answer-box::before { color: var(--mute-soft); }
.section-dark .answer-box .answer-q { color: var(--paper); }
.section-dark .answer-box .answer-a { color: rgba(244, 239, 230, 0.85); }

/* If the answer-box wraps multiple Q&A pairs, add dividers between */
.answer-box .answer-a + .answer-q {
  padding-top: var(--space-6);
  border-top: 1px dashed var(--rule);
}

/* ---------- 5. Marquee — smaller, subtle, transparent, flush ---------- */
.marquee {
  padding-block: var(--space-4);
  opacity: 0.55;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent;
  /* Pull marquee flush with neighbouring sections to kill stacked padding */
  margin-top: calc(-1 * clamp(1.75rem, 3vw, 3rem));
  margin-bottom: calc(-1 * clamp(1.75rem, 3vw, 3rem));
}
/* When a section immediately precedes/follows the marquee, shave its adjacent padding */
.section + .marquee,
.section-dark + .marquee { margin-top: 0; }
.marquee + .section,
.marquee + .section-dark { }
.marquee-item {
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  opacity: 0.9;
}

/* ---------- 6. Footer legal — single line + left alignment ---------- */
.footer-legal {
  display: block;           /* override previous space-between row */
  margin-top: var(--space-14);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(244, 239, 230, 0.15);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mute-soft);
}
.footer-legal-left { display: block; }
.footer-legal-line {
  margin: 0;
  max-width: none;
  line-height: 1.7;
}
.footer-legal-line .footer-orgline {
  display: block;
}
.footer-legal-links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0 0;
  flex-wrap: wrap;
}
.footer-legal-links li { font-size: var(--text-xs); opacity: 0.9; }
.footer-legal-links a {
  color: var(--mute-soft);
  transition: color var(--t-fast);
}
.footer-legal-links a:hover { color: var(--ember); }

@media (max-width: 560px) {
  .footer-legal-line .footer-orgline { margin-top: var(--space-2); }
  .footer-legal-links { gap: var(--space-4); }
}

/* ---------- 7. Minor polish ---------- */
/* ARTIS teaser + CTA band spacing refinement */
.section + .section { border-top: none; }

/* Ensure the hero eyebrow sits at top of content column (Version B) */
.hero--with-visual .hero-content { padding-top: 0; }

/* Guarantee nav items breathing room with new LinkedIn shape */
.nav-cta { margin-left: 0; }

/* ---------- 8. Round 5.1 fixes ----------
   (a) Hero meta: force 4-across on desktop so METHOD doesn't orphan on a new row.
   (b) Pull consecutive sections tighter — trim stacked vertical padding.
   (c) Footer legal: © line on the LEFT, links on the RIGHT, both on the SAME row. */

/* (a) Hero meta: 4 items must share one row on wide screens */
@media (min-width: 900px) {
  .hero-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(var(--space-5), 2vw, var(--space-7));
  }
  .hero-meta dd {
    font-size: var(--text-base);
    line-height: 1.25;
  }
}
@media (max-width: 899px) and (min-width: 560px) {
  .hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .hero-meta { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* (b) Consecutive sections — kill stacked padding between main content blocks */
.section + .section,
.section + .section-dark,
.section-dark + .section,
.section-dark + .section-dark,
.section-paper-2 + .section,
.section + .section-paper-2 {
  padding-top: clamp(2.5rem, 4.5vw, 4.25rem);
}
.section + .section.section--tight,
.section-dark + .section.section--tight {
  padding-top: clamp(2rem, 3.5vw, 3.5rem);
}
/* And trim the bottom of the preceding one a touch too */
.section:has(+ .section),
.section:has(+ .section-dark),
.section-dark:has(+ .section),
.section-dark:has(+ .section-dark) {
  padding-bottom: clamp(2.5rem, 4.5vw, 4.25rem);
}

/* (c) Footer legal bar — two-column row, © left | links right */
.footer-legal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.footer-legal-left { flex: 1 1 auto; min-width: 0; }
.footer-legal-links {
  margin: 0;
  align-self: flex-start;
  justify-content: flex-end;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .footer-legal { flex-direction: column; gap: var(--space-4); }
  .footer-legal-links { justify-content: flex-start; margin-top: var(--space-2); }
}

/* ---------- v5.3 MOBILE OVERFLOW PATCH (about.html + artis.html) ----------
   Scoped fix for inline-grid CTA/teaser blocks that don't stack on narrow
   viewports. Desktop layout and all copy are untouched — this only activates
   at ≤560px. Targets the two reported overflows:
     • about.html CTA  "Start a project"       (grid 1fr auto)
     • artis.html CTA  "Book a scoping call"   (grid 1fr auto)
     • artis.html NORTHSIGHT teaser            (grid auto 1fr + inline font-size:var(--text-2xl))
   No classes or HTML are modified — we override the inline grids scoped
   to .section-dark .container and .section .container at mobile width. */
@media (max-width: 560px) {
  /* Stack any inline two-col grid inside a .section or .section-dark container */
  .section .container[style*="grid-template-columns:1fr auto"],
  .section-dark .container[style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
    align-items: start !important;
  }
  /* The ember "Start a project" / "Book a scoping call" CTAs need to sit
     flush-left (not stretched) so the SVG arrow doesn't push beyond viewport */
  .section .container[style*="grid-template-columns:1fr auto"] > .btn,
  .section-dark .container[style*="grid-template-columns:1fr auto"] > .btn {
    justify-self: start;
    max-width: 100%;
  }

  /* Artis NORTHSIGHT header row: the inner "auto 1fr" grid forces the
     kicker to its own column which cramps the h2. Stack it on mobile. */
  .section-dark .container > div[style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
  /* And shrink the NORTHSIGHT h2 one step so "instrumented." fits */
  .section-dark .container > div[style*="grid-template-columns:auto 1fr"] > h2[style*="--text-2xl"] {
    font-size: var(--text-xl) !important;
    line-height: 1.1 !important;
  }

  /* The ARTIS 1.1fr/1fr media row (text + dashboard image) also needs
     to stack below 560px to avoid crunch. */
  .section-dark .container .reveal[style*="grid-template-columns:1.1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }
}