:root {
  --ink: #0a0a09;
  --ink-2: #141412;
  --bone: #efece4;
  --stone: #b4b0a6;
  --graphite: #5a5853;
  --amber: #f0a13a;
  --line: rgba(239, 236, 228, .16);
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 3vw, 40px);
  --nav-h: 64px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--bone);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Film grain over the whole page */
body::after {
  content: "";
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background-image: var(--noise);
  opacity: .07;
  pointer-events: none;
  z-index: 100;
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-2%, 6%); }
  80% { transform: translate(5%, 2%); }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--bone); color: var(--ink); padding: 8px 12px; }
.skip:focus { left: 8px; }

.mono { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dim { color: var(--stone); }
.accent { color: var(--amber); }
.wrap { max-width: 1440px; margin: 0 auto; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.nav.scrolled, .nav.open {
  background: rgba(10, 10, 9, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
.mark { width: 24px; height: 24px; flex: none; }
.nav-links { display: flex; gap: 30px; margin: 0 auto; font-size: 17px; }
.nav-links a { opacity: .8; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-meta { font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.nav-toggle {
  display: none; margin-left: auto;
  background: none; color: var(--bone);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 9px 12px;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav-meta { display: none; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto;
    flex-direction: column; gap: 0;
    margin: 0; padding: 8px var(--gutter) 28px;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav-links a { font-size: 28px; font-weight: 500; letter-spacing: -.01em; padding: 12px 0; border-bottom: 1px solid var(--line); opacity: 1; }
  .nav.open .nav-links { opacity: 1; visibility: visible; transform: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: clamp(560px, 100svh, 1100px);
  display: grid; grid-template-rows: 1fr auto; row-gap: 32px;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 28px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Parallax layers. main.js sets --sy (scroll) and --mx/--my (pointer, -1..1); --k is how far
   back a layer sits, --px how far it leans toward the pointer. Oversized so leaning never shows an edge. */
.hero-bg .layer {
  position: absolute; top: -24px; left: -24px;
  width: calc(100% + 48px); height: calc(100% + 48px); max-width: none;
  transform: translate3d(0, calc(var(--sy, 0px) * var(--k, 0)), 0);
  translate: calc(var(--mx, 0) * var(--px, 0px) * -1) calc(var(--my, 0) * var(--px, 0px) * -.5);
  transition: translate 1.4s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.hero-bg .sun { animation: sun-breathe 9s ease-in-out infinite alternate; }
@keyframes sun-breathe { to { opacity: .68; } }
/* Where the browser supports scroll-driven animations, the sinking runs on the page's own scroll
   timeline, so it stays in step with the finger on phones. main.js then only handles the pointer
   lean; without support it falls back to setting --sy from scroll events. 1200px is past the
   tallest hero, so a layer always sinks --k times the distance scrolled. */
@supports (animation-timeline: scroll()) {
  .hero-bg .layer {
    transform: none;
    animation: hero-sink linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 1200px;
  }
  .hero-bg .sun {
    animation: hero-sink linear both, sun-breathe 9s ease-in-out infinite alternate;
    animation-timeline: scroll(root block), auto;
    animation-range: 0px 1200px, normal;
  }
}
@keyframes hero-sink { to { transform: translate3d(0, calc(var(--k, 0) * 1200px), 0); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(10,10,9,.6), rgba(10,10,9,0) 32%, rgba(10,10,9,0) 62%, rgba(10,10,9,.85));
}
.viewfinder i { position: absolute; width: 22px; height: 22px; border-color: rgba(239,236,228,.55); border-style: solid; border-width: 0; }
.viewfinder i:nth-child(1) { top: calc(var(--nav-h) + 12px); left: var(--gutter); border-top-width: 1px; border-left-width: 1px; }
.viewfinder i:nth-child(2) { top: calc(var(--nav-h) + 12px); right: var(--gutter); border-top-width: 1px; border-right-width: 1px; }
.viewfinder i:nth-child(3) { bottom: 12px; left: var(--gutter); border-bottom-width: 1px; border-left-width: 1px; }
.viewfinder i:nth-child(4) { bottom: 12px; right: var(--gutter); border-bottom-width: 1px; border-right-width: 1px; }
.hud {
  position: absolute; top: calc(var(--nav-h) + 22px); left: calc(var(--gutter) + 34px); right: calc(var(--gutter) + 34px);
  display: flex; justify-content: space-between;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(239,236,228,.75);
  font-variant-numeric: tabular-nums;
}
.hero-title {
  align-self: center; justify-self: center;
  max-width: 21ch;
  text-align: center; text-transform: uppercase; text-wrap: balance;
  font-weight: 500;
  font-size: clamp(2.2rem, 5.4vw, 6.25rem);
  line-height: .92;
  letter-spacing: -.03em;
}
.hero-copy { display: block; }
.hero-strip {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  width: min(100%, 760px); justify-self: center;
  margin-bottom: 28px;
  font: 500 13px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.hero-strip p:first-child { text-align: right; }
.hero-strip .mark { width: 40px; height: 40px; }

/* ---------- Sections ---------- */
.section { padding: clamp(88px, 12vw, 168px) var(--gutter); }
.light { background: var(--bone); color: var(--ink); --line: rgba(10, 10, 9, .16); }
.light .dim { color: var(--graphite); }
.label {
  display: flex; gap: 16px;
  padding-bottom: 16px; margin-bottom: clamp(40px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--stone);
}
.light .label { color: var(--graphite); }
.tc { color: var(--amber); font-variant-numeric: tabular-nums; }
.light .tc { color: #8f4f10; } /* 5.4:1 on bone */
.h2 { font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 4.25rem); line-height: 1; letter-spacing: -.025em; }
.display { font-weight: 500; font-size: clamp(3.25rem, 10vw, 10rem); line-height: .88; letter-spacing: -.04em; text-transform: uppercase; }

.lede { max-width: 26ch; font-size: clamp(1.9rem, 4vw, 3.75rem); line-height: 1.06; letter-spacing: -.025em; }
.company-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(40px, 6vw, 96px); }
.cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px;
  width: min(100%, 780px); margin: clamp(48px, 7vw, 96px) 0 0 auto;
  color: var(--stone);
}

/* 3D mark. The six lines are copies of the frame turned about its TL→BR diagonal (the
   spine). main.js builds them as square rods that fold open, turn and lock back into the
   flat logo; the inline SVG stands in without JS. Study page: brand/roughcut-mark-3d.html */
@property --open  { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --zoom  { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --pitch { syntax: '<angle>';  inherits: true; initial-value: 0deg; }
@property --roll  { syntax: '<angle>';  inherits: true; initial-value: 0deg; }
@property --spin  { syntax: '<angle>';  inherits: true; initial-value: 0deg; }
@property --drag-x { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --drag-y { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

.mark3d {
  --S: clamp(180px, 24vw, 340px);
  --u: calc(var(--S) / 100);  /* one unit of the mark's 100×100 viewBox */
  --face: var(--bone);
  --side: #77746c;
  --dur: 14s;
  width: var(--S); height: var(--S);
  color: var(--bone);
  touch-action: none;  /* every touch on the mark drags it; the page scrolls from anywhere else */
  user-select: none;
}
.mark3d > svg { width: 100%; height: 100%; }
.mark3d.built { cursor: grab; }
.mark3d.dragging { cursor: grabbing; }
.m3-camera {
  width: 100%; height: 100%;
  /* Near-orthographic at rest so the logo is exact; real perspective once it opens */
  perspective: calc(var(--S) * 2.6 / max(var(--open), .004));
  animation: m3-camera var(--dur) infinite paused, m3-unfold var(--dur) infinite paused;
}
.m3-orbit {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--drag-y)) rotateY(var(--drag-x));
  transition: --drag-x 1.4s cubic-bezier(.2, .8, .2, 1), --drag-y 1.4s cubic-bezier(.2, .8, .2, 1);
}
.dragging .m3-orbit { transition: none; }
/* Follow a hovering mouse closely; the slower default eases it home on leave */
.mark3d.hovering:not(.dragging) .m3-orbit { transition-duration: .5s; }
/* The 3D rods can reach past the viewport edge at some widths; don't let that scroll the page sideways */
#company { overflow-x: clip; }
.m3-stage {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: scale3d(var(--zoom), var(--zoom), var(--zoom)) rotateZ(var(--roll)) rotate3d(1, -1, 0, var(--pitch));
}
.m3-stage * { position: absolute; transform-style: preserve-3d; }
/* The frame: a solid ring that turns on its own diagonal */
.m3-ring { inset: 0; transform: rotate3d(1, 1, 0, var(--spin)); animation: m3-spin-ring var(--dur) infinite paused; }
/* The cage's x axis is the spine. Each meridian is a half-plane hinged on it, holding one
   pole → vertex → pole line. */
.m3-cage { left: calc(3.7 * var(--u)); top: calc(3.7 * var(--u)); transform-origin: 0 0; transform: rotate(45deg); }
.m3-meridian {
  --a: calc(var(--rest) + (var(--even) - var(--rest)) * var(--open) + var(--spin));
  transform: rotateX(var(--a));
  animation: m3-spin var(--dur) infinite paused;
  animation-delay: calc(var(--i) * 70ms);
}
.mark3d.playing :is(.m3-camera, .m3-ring, .m3-meridian) { animation-play-state: running; }

/* A rod with a square cross-section, drawn from (x, y) at angle b. It runs --ext past the
   vertex end: past its far end, or before its start when --lead is 1. */
.m3-rod {
  left: 0; top: calc(var(--w) * var(--u) / -2);
  width: calc((var(--len) + var(--ext, 0)) * var(--u));
  height: calc(var(--w) * var(--u));
  transform-origin: 0 50%;
  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))) rotate(var(--b))
             translateX(calc(var(--ext, 0) * var(--lead, 0) * -1 * var(--u))) rotateX(var(--twist, 0deg));
}
/* At rest, roll each rod about its own axis to face the viewer, so every line keeps the
   SVG's stroke width however steeply its meridian is tilted. Once open it settles square to
   its meridian at --turn (0° or 90°, whichever is nearer, so no rod rolls far), while the
   vertex overlap moves from the flat mitre to a square 3D corner. */
.m3-meridian .m3-rod {
  --twist: calc(atan(-1 * var(--cb) * tan(var(--a))) * (1 - var(--open)) + var(--turn) * var(--open));
  --ext: calc(var(--ext0) + (var(--ext1) - var(--ext0)) * var(--open));
}
.m3-rod > i { inset: 0; background: var(--face); }
.m3-rod > .front { transform: translateZ(calc(var(--w) * var(--u) / 2)); }
.m3-rod > .back  { transform: rotateY(180deg) translateZ(calc(var(--w) * var(--u) / 2)); }
.m3-rod > .top   { transform: translateY(-50%) rotateX(90deg); background: var(--side); }
.m3-rod > .under { transform: translateY(50%) rotateX(-90deg); background: var(--side); }
/* A rod that settles a quarter turn round: its front and back end up as the sides */
.m3-rod.turned > .front, .m3-rod.turned > .back, .m3-knuckle.turned { background: color-mix(in srgb, var(--side) calc(var(--open) * 100%), var(--face)); }
.m3-rod.turned > .top, .m3-rod.turned > .under { background: var(--face); }
/* A disc at each vertex, turned back through every rotation above it so it always faces
   the viewer. It sits inside the joint at rest and when open, and fills the corner while
   the rods are mid-roll and can't meet cleanly. */
.m3-knuckle {
  left: calc(var(--w) * var(--u) / -2); top: calc(var(--w) * var(--u) / -2);
  width: calc(var(--w) * var(--u)); height: calc(var(--w) * var(--u));
  border-radius: 50%;
  background: var(--face);
  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u)))
             rotateX(calc(-1 * var(--a))) rotate(-45deg) rotate3d(1, -1, 0, calc(-1 * var(--pitch)))
             rotateZ(calc(-1 * var(--roll))) rotateY(calc(-1 * var(--drag-x))) rotateX(calc(-1 * var(--drag-y)));
}

/* 0–8% hold the logo · 8–26% camera lifts, lines fan out to even 45° spokes · 24–62% lines
   riffle a full turn round the spine while the frame counter-turns half · 26–66% camera
   drifts toward the spine's end · 66–86% everything folds back and locks into the logo */
@keyframes m3-camera {
  0%, 8% { --pitch: 0deg; --roll: 0deg; --zoom: 1; animation-timing-function: cubic-bezier(.55, 0, .25, 1); }
  26%    { --pitch: 52deg; --roll: -20deg; --zoom: .8; animation-timing-function: ease-in-out; }
  46%    { --pitch: 74deg; --roll: 24deg; --zoom: .76; animation-timing-function: ease-in-out; }
  66%    { --pitch: 34deg; --roll: 6deg; --zoom: .84; animation-timing-function: cubic-bezier(.45, 0, .2, 1.12); }
  86%, 100% { --pitch: 0deg; --roll: 0deg; --zoom: 1; }
}
@keyframes m3-unfold {
  0%, 8% { --open: 0; animation-timing-function: cubic-bezier(.55, 0, .25, 1); }
  26%, 64% { --open: 1; animation-timing-function: cubic-bezier(.6, 0, .25, 1); }
  86%, 100% { --open: 0; }
}
@keyframes m3-spin {
  0%, 24% { --spin: 0deg; animation-timing-function: cubic-bezier(.62, 0, .3, 1); }
  62%, 100% { --spin: 360deg; }
}
@keyframes m3-spin-ring {
  0%, 24% { --spin: 0deg; animation-timing-function: cubic-bezier(.62, 0, .3, 1); }
  62%, 100% { --spin: -180deg; }
}

/* Principles */
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 6vw, 88px); }
.principles li { border-top: 1px solid var(--ink); padding-top: 20px; }
.idx { display: block; margin-bottom: clamp(40px, 6vw, 96px); font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--graphite); }
.principles h3 { font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 14px; }
.principles p { color: var(--graphite); font-size: 16px; max-width: 30ch; }

/* Slate */
.slate-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.slate-teaser {
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: end;
  margin-top: clamp(40px, 5vw, 72px);
}
.frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background-color: var(--ink-2);
}
.frame-wide { aspect-ratio: 2.39 / 1; }
.slate-copy p:not(.status) { max-width: 40ch; margin-top: 16px; color: var(--stone); }
.frame::after {
  content: ""; position: absolute; inset: 14px;
  background:
    linear-gradient(var(--bone), var(--bone)) top left / 16px 1px no-repeat,
    linear-gradient(var(--bone), var(--bone)) top left / 1px 16px no-repeat,
    linear-gradient(var(--bone), var(--bone)) top right / 16px 1px no-repeat,
    linear-gradient(var(--bone), var(--bone)) top right / 1px 16px no-repeat,
    linear-gradient(var(--bone), var(--bone)) bottom left / 16px 1px no-repeat,
    linear-gradient(var(--bone), var(--bone)) bottom left / 1px 16px no-repeat,
    linear-gradient(var(--bone), var(--bone)) bottom right / 16px 1px no-repeat,
    linear-gradient(var(--bone), var(--bone)) bottom right / 1px 16px no-repeat;
  opacity: .6;
}
.frame-id { position: absolute; top: 24px; left: 28px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(239,236,228,.75); }
.f1 { background:
  radial-gradient(42% 14% at 66% 61.5%, rgba(255,205,140,.6), transparent 70%),
  linear-gradient(to bottom, #120b07 0%, #4f250e 40%, #c97c33 61.5%, #1a0f09 62%, #0b0806 100%); }
.status { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* Leadership */
.leader { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.portrait { position: relative; overflow: hidden; background: var(--ink-2); }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.94); }
.portrait::after {
  content: "RP / 01"; position: absolute; left: 16px; bottom: 14px;
  font: 500 11px/1 var(--mono); letter-spacing: .1em; color: rgba(239,236,228,.85);
}
.leader-copy .h2 { margin: 14px 0 28px; }
.leader-copy p:not(.mono) { max-width: 52ch; color: var(--stone); margin-bottom: 16px; }
.arrow-link {
  display: inline-flex; gap: 10px; margin-top: 16px; padding: 14px 18px;
  border: 1px solid var(--line);
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.arrow-link:hover { background: var(--bone); color: var(--ink); }

/* Themes: warm-grey panel, after Anduril's stone sections */
.themes { background: var(--stone); color: var(--ink); --line: rgba(10, 10, 9, .2); }
.themes .label { color: #3f3d39; }
.themes .tc { color: #5c300a; } /* 5.2:1 on stone */
.themes-intro { max-width: 34ch; margin-bottom: clamp(28px, 4vw, 56px); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.4; color: #3f3d39; }
.themes-list {
  font-weight: 500; font-size: clamp(2.3rem, 7vw, 7.25rem); line-height: .98; letter-spacing: -.035em; text-transform: uppercase;
}
.themes-list li { display: inline; white-space: nowrap; }
.themes-list li:not(:last-child)::after { content: "/"; margin: 0 .22em 0 .18em; color: rgba(10, 10, 9, .3); }

/* Press */
.press-card { margin-top: clamp(40px, 5vw, 72px); }
.press-card a {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: end;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.press-img { overflow: hidden; background: var(--ink-2); }
.press-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.94); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.press-meta { display: flex; gap: 20px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.press-body h3 { max-width: 26ch; margin: 18px 0 16px; font-weight: 500; font-size: clamp(1.6rem, 2.7vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; transition: color .2s; }
.press-dek { max-width: 46ch; color: var(--stone); margin-bottom: 8px; }
.press-card a:hover h3 { color: var(--amber); }
.press-card a:hover .press-img img { transform: scale(1.02); }
.press-card a:hover .arrow-link { background: var(--bone); color: var(--ink); }

/* Contact */
.contact .display { margin-bottom: clamp(48px, 7vw, 104px); }
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.contact-grid > div { border-top: 1px solid var(--ink); padding-top: 18px; }
.contact-grid p:not(.mono) { margin-top: 14px; max-width: 34ch; }
.big-link {
  display: inline-block; margin-top: 14px;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 500; letter-spacing: -.01em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .3s;
  overflow-wrap: anywhere;
}
.big-link:hover { background-size: 100% 1px; }

/* Footer */
.footer { padding: clamp(56px, 8vw, 96px) var(--gutter) 28px; overflow: hidden; }
.footer-word {
  display: flex; align-items: center; gap: .1em;
  font-weight: 600; text-transform: uppercase; white-space: nowrap;
  font-size: 14.6vw; line-height: .8; letter-spacing: -.045em;
}
.footer-mark { width: .74em; height: .74em; flex: none; }
.footer-row {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line);
  font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone);
}
.footer-row a:hover { color: var(--bone); }

/* Reveal on scroll (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .nav-meta { display: none; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hud { left: calc(var(--gutter) + 28px); right: calc(var(--gutter) + 28px); font-size: 11px; }
  .hud > span:first-child { display: none; }
  .hud { justify-content: flex-end; }
  .hero-strip { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .hero-strip p:first-child { text-align: center; }
  .hero-strip .mark { order: -1; width: 28px; height: 28px; }
  .cols, .principles, .slate-teaser, .contact-grid, .leader, .press-card a, .company-intro { grid-template-columns: 1fr; }
  .mark3d { --S: 56vw; justify-self: center; }
  .cols { gap: 16px; }
  .principles .idx { margin-bottom: 28px; }
  .footer-row { flex-direction: column; }
}