/* SE3 — Home v12 prototype. Values are taken 1:1 from the Figma frame (263:1210). */

/* Inter, self-hosted (variable, 400–500; SIL Open Font License). Latin + Latin Extended only. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../fonts/inter-latin.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 500; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg-dark: #000;
  --bg-light: #fff;
  --graphite: #2b2b2b;
  --light-grey: #f0f0f0;
  --tile: #2a2a2b;

  --on-dark: #fff;
  --on-dark-2: rgba(255, 255, 255, 0.6);
  --on-light: #000;
  --on-light-2: rgba(0, 0, 0, 0.6);
  --line-dark: rgba(255, 255, 255, 0.24);
  --line-light: rgba(0, 0, 0, 0.16);

  --accent: #54839c;
  --accent-300: #9dbccb;
  --focus-ring: rgba(84, 131, 156, 0.7);  /* --accent, faded */

  --gutter: 96px;      /* page margin */
  --bleed: 32px;       /* margin for full-bleed media */
  --gap: 32px;         /* column gap */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-dark); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg-dark);
  color: var(--on-dark);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.3px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: none;
  overflow-x: hidden;
}
p, h1, h2, h3, ul { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Focus: a soft accent ring for keyboard users only (no browser-default orange); reads on dark and light */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* ---------- Type ---------- */
.t-figure  { font-size: 80px; line-height: 92px; letter-spacing: -4px; }
.t-heading { font-size: 30px; line-height: 36px; letter-spacing: -1.2px; }
.t-body    { font-size: 16px; line-height: 20px; letter-spacing: -0.3px; }
.t-small   { font-size: 12px; line-height: 16px; letter-spacing: -0.1px; }

.dark  { background: var(--bg-dark);  color: var(--on-dark); }
.light { background: var(--bg-light); color: var(--on-light); }
.dark .dim, .dim { color: var(--on-dark-2); }
.light .dim { color: var(--on-light-2); }
.accent-300 { color: var(--accent-300); }
.light .accent-300 { color: var(--accent); }   /* the light tint is for dark sections; on white the full accent reads */

/* ---------- Grid ---------- */
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.row > .l  { grid-column: 1 / span 4; }
.row > .r  { grid-column: 5 / span 6; }
.row > .r8 { grid-column: 5 / span 8; }
.pad { padding-inline: var(--gutter); }
.stack-32 { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  font-size: 16px; line-height: 20px; letter-spacing: -0.3px;
  white-space: nowrap;
}
.btn img { width: 16px; height: 16px; transition: transform .5s var(--ease-out); }
.btn:hover img { transform: translateX(3px); }

.btn-outline { border: 1px solid var(--on-dark); color: var(--on-dark); }
.btn-solid { background: var(--bg-light); color: var(--on-light); }

/* ---------- Announcement + nav ---------- */
.announce {
  height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 var(--gutter);
  background: var(--graphite);
  color: var(--on-dark);
  white-space: nowrap;
  transition: background-color .4s var(--ease-out);
}
/* The whole bar is one link to the article; "Read more" is its visible cue */
.announce-link { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.announce:hover { background: #363636; }
.announce:focus-visible { outline-offset: -4px; }   /* inset, so the ring isn't clipped at the top of the page */

.nav {
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--bg-dark);
}
/* SE3 v2 lockup, white faceted (Figma 520:61) */
.logo { display: block; width: 90px; height: 33px; }
.logo img { width: 100%; height: 100%; }
.nav-links { display: flex; gap: 32px; white-space: nowrap; }
.nav-links a { position: relative; transition: opacity .4s var(--ease-out); }
.nav-links:hover a { opacity: .6; }
.nav-links a:hover { opacity: 1; }

/* Phone menu (below 900 px): a text button, and a full-screen overlay on the dark background (js/menu.js) */
/* Two-line icon: 22 px lines, 7 px apart, in a 44 px tap area pulled out so the lines end on the gutter */
.menu-btn {
  display: none; position: relative;
  width: 44px; height: 44px; margin: 0 -11px 0 0; padding: 0;
  border: 0; background: none; cursor: pointer;
  transition: opacity .4s var(--ease-out);
}
.menu-btn:hover { opacity: .6; }
.menu-btn span { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--on-dark); }
.menu-btn span:first-child { top: 17.75px; }
.menu-btn span:last-child { top: 24.75px; }
.site-menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  background: var(--bg-dark); color: var(--on-dark);
  opacity: 0; transition: opacity .4s var(--ease-out);
  overflow-y: auto;
}
.site-menu[hidden] { display: none; }
.site-menu.is-open { opacity: 1; }
.site-menu-top { height: 72px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); }
.site-menu .menu-close { position: relative; top: auto; right: auto; margin-right: -13px; }
.site-menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 48px var(--gutter); }
/* One step under the phone figure size (52/60): 42/50 */
.site-menu-links.t-figure { font-size: 42px; line-height: 50px; letter-spacing: -1.8px; }
.site-menu-links a { transition: opacity .4s var(--ease-out); }
.site-menu-links a:hover { opacity: .6; }
html.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { padding: 0 var(--bleed) var(--bleed); background: var(--bg-dark); }
.hero-frame {
  position: relative;
  height: clamp(600px, calc(100svh - 144px), 960px);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 88px 64px 48px;
}
/* Without the announcement bar (the Series A embargo build, scripts/build-embargoed.sh), the hero still fills the first screen. */
body:not(:has(> .announce)) .hero-frame { height: clamp(600px, calc(100svh - 104px), 960px); }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-img {
  position: absolute; left: 0; top: -6%;
  width: 100%; height: 112%;
  max-width: none;
  object-fit: cover; object-position: 50% 60%;
  transform-origin: 50% 50%;
  will-change: transform;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 62%);
}
.hero-title { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.hero-title h1 { white-space: nowrap; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 6px; margin-bottom: -6px; }
.hero-title .line > span { display: block; }
.hero-sub { margin-top: 20px; white-space: nowrap; }
.ctas { display: flex; gap: 16px; }
.hero-ctas { margin-top: 40px; }

/* ---------- Mission ---------- */
.mission { padding: 160px var(--gutter); display: flex; flex-direction: column; gap: 120px; }
.figures { display: flex; flex-direction: column; gap: 56px; }
.figure { display: flex; flex-direction: column; gap: 12px; }
.rule { display: flex; height: 1px; }
.rule .accent { width: 40px; background: var(--accent); transform-origin: 0 50%; }
.rule .hair { flex: 1; background: var(--line-light); transform-origin: 0 50%; }
.figure-body { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; white-space: nowrap; }
.figure-body .t-body { white-space: normal; }
.figure-body .t-figure { overflow: hidden; padding-bottom: 4px; margin-bottom: -4px; }
.figure-body .t-figure > span { display: inline-block; }

/* ---------- Product ---------- */
.product { padding: 160px 0 0; }   /* ends on the assembly: its own bottom margin is the space to Capabilities */
.product > .pad:first-child { padding-bottom: 96px; }

/* Assembly (pinned) */
/* Exploded → assembled over ~90% of the scroll, then a short hold (drone render removed 2026-11-11). */
.assembly { position: relative; height: 370vh; margin-bottom: 80px; }
.assembly-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  padding: 0 var(--bleed);
  display: flex; align-items: center;
}
.assembly-frame {
  position: relative;
  width: 100%;
  height: min(900px, calc(100svh - 64px));
  overflow: hidden;
  background: #070708;
}
.studio, .studio-backdrop, .studio-veil, .assembly-canvas, .assembly-labels, .assembly-grain { position: absolute; inset: 0; }
.studio-backdrop {
  inset: -14% 0 6% 0;   /* lifts the floor's light pool to ~75% of the frame height */
  background: url(../img/studio-backdrop-export.jpg) 50% 100% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  will-change: transform;
}
.studio-veil {
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.7) 100%),
    linear-gradient(180deg, rgba(5,5,6,.82) 0%, rgba(5,5,6,.45) 50%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55) 100%);
}
.assembly-canvas { width: 100%; height: 100%; display: block; }
.assembly-labels { pointer-events: none; }
.assembly-grain {
  pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.callout { position: absolute; left: 0; top: 0; height: 20px; white-space: nowrap; will-change: transform, opacity; }
.callout .txt { position: absolute; top: 0; color: var(--on-dark-2); }
.callout .leader { position: absolute; top: 10px; height: 1px; width: 72px; background: var(--line-dark); transform-origin: var(--lo, 0) 50%; }
.callout .dot { position: absolute; top: 7.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(84,131,156,.18); }
/* right-hand callout: dot · 5.5 · leader 72 · 12 · text */
.callout.right .dot { left: -2.5px; }
.callout.right .leader { left: 8px; --lo: 0; }
.callout.right .txt { left: 92px; }
/* left-hand callout: text · 12 · leader 72 · 5.5 · dot */
.callout.left .dot { left: -2.5px; }
.callout.left .leader { left: -77.5px; --lo: 100%; }
.callout.left .txt { right: 89.5px; text-align: right; }


.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.spec, .principle { display: flex; flex-direction: column; }
.spec .hairline, .principle .hairline { display: block; height: 1px; background: var(--line-dark); margin-bottom: 20px; transform-origin: 0 50%; }
.spec p + p { margin-top: 4px; }

/* ---------- Capabilities ---------- */
.capabilities { padding: 160px var(--gutter); display: flex; flex-direction: column; gap: 120px; }
.cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 96px; }
.cap { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
/* Cards share row tracks (visual, name, heading, text), so side-by-side headings that wrap to different line
   counts still start their paragraphs at the same height. Gap inside a card stays 24px; 96px between card rows. */
@supports (grid-template-rows: subgrid) {
  .cap { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 24px; justify-items: start; align-content: start; }
}
.cap-visual { position: relative; width: 100%; aspect-ratio: 608 / 342; background: var(--light-grey); overflow: hidden; }
.cap-visual img, .cap-visual video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Line illustration by default; on hover it hands over to the photograph that shows the capability. */
.cap-visual .photo { opacity: 0; transition: opacity .7s var(--ease-out); }
.cap-visual .line { transition: opacity .7s var(--ease-out); }
/* The video shows only once it is actually playing (js/main.js adds .is-playing), so the box never goes blank */
.cap.is-playing .cap-visual .photo { opacity: 1; }
.cap.is-playing .cap-visual .line { opacity: 0; }
.cap-name { display: flex; align-items: center; gap: 12px; }
.tile { width: 32px; height: 32px; background: var(--tile); display: grid; place-items: center; }
.tile img { width: 16px; height: 16px; }
.cap h3 { max-width: 560px; }
.cap > p { max-width: 520px; }

/* ---------- Open architecture ---------- */
.open { padding: 160px 0; }
.open > .pad:first-child { padding-bottom: 96px; }
.diagram-wrap { padding: 0 var(--bleed) 120px; }
.diagram { position: relative; width: 100%; aspect-ratio: 1376 / 819; overflow: hidden;
  /* Point cloud texture (Wetterstein, Bavarian Alps, accent; DGM1 © Bayerische Vermessungsverwaltung, CC BY 4.0) at 32% brightness on #0a0a0a, baked so nothing blends at runtime. */
  background: #0a0a0a image-set(url("../img/diagram-texture.jpg") 1x, url("../img/diagram-texture-2x.jpg") 2x) center / cover no-repeat; }
.diagram-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.diagram-svg text { font-family: "Inter", sans-serif; font-size: 16px; letter-spacing: -0.3px; fill: #fff; }


.open > .pad:last-child > * + * { margin-top: 0; }
.principles-row, .practice-row { padding-bottom: 96px; }
.principles, .proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.principle p + p { margin-top: 20px; }
.proof {
  position: relative;
  height: 280px; padding: 32px;
  border: 1px solid var(--on-dark);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background-color .6s var(--ease-out);
}
a.proof:hover { background: rgba(255,255,255,.04); }
.proof-top { display: flex; flex-direction: column; gap: 24px; }
.proof-logo { height: 20px; }
.link { display: inline-flex; align-items: center; gap: 6px; }
.link img { width: 14px; height: 14px; transition: transform .5s var(--ease-out); }
a.proof:hover .link img { transform: translateX(3px); }

.standards {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 24px 0;
  border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
}
.standards > .l { grid-column: 1 / span 4; }
.standards-list { grid-column: 5 / span 8; display: flex; flex-wrap: wrap; column-gap: 31px; white-space: nowrap; }

/* ---------- Company + news ---------- */
.company { padding: 160px var(--gutter); display: flex; flex-direction: column; gap: 200px; }
.news { display: flex; flex-direction: column; gap: 80px; }
.news-list { border-bottom: 1px solid var(--line-light); }
.news-item {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 28px 0;
  border-top: 1px solid var(--line-light);
  align-items: start;
}
.news-item > .l { grid-column: 1 / span 4; }
.news-main { grid-column: 5 / -1; display: flex; gap: 24px; align-items: flex-start; }
.news-main > .t-body { flex: 1; min-width: 0; }
.thumb { position: relative; flex: none; width: 112px; height: 63px; overflow: hidden; background: #ddd; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.thumb-accel { background: #1c1c1c; }
.thumb-accel img { position: absolute; left: 32px; top: 23.81px; width: 48px; height: 15.39px; object-fit: contain; }
.news-arrow, .contact-item > img { flex: none; width: 16px; height: 16px; transition: transform .5s var(--ease-out); }
.news-arrow { margin: 2px 0 0 -16px; } /* 8px from the text, so the longest line still fits at 1440 */
a.news-item:hover .news-arrow, .contact-item:hover > img { transform: translateX(4px); }
a.news-item:hover .thumb:not(.thumb-accel) img { transform: scale(1.06); }

/* Older news: shown without JS; with JS they wait behind "Show more" */
.js .news-older:not(.is-open) { display: none; }
.news > .news-more { margin-top: -48px; display: flex; justify-content: flex-end; } /* right edge = where the row arrows end */
.news > .news-more[hidden] { display: none; }
.news-more-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--on-light-2);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .4s var(--ease-out);
}
.news-more-btn:hover { color: var(--on-light); }

/* ---------- Careers ---------- */
.careers { padding: 160px 0 var(--bleed); }
.careers > .pad { padding-bottom: 96px; }
/* Three photos: one large on the left, two stacked on the right (about 59/41), one gap between all three */
.careers-collage {
  margin: 0 var(--bleed);
  display: grid; grid-template-columns: 59fr 41fr; grid-template-rows: 1fr 1fr; gap: var(--gap);
  aspect-ratio: 1369 / 769;
}
.careers-collage > div { position: relative; overflow: hidden; background: #111; }
.careers-collage > .cc-main { grid-row: 1 / -1; }
.careers-collage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Contact ---------- */
.contact { padding: 160px var(--gutter); display: flex; flex-direction: column; gap: 96px; }
.contact-list { border-bottom: 1px solid var(--line-light); }
/* On exactly the .row grid, so the email lines up with the heading above; the arrow sits at the end of column 12 */
.contact-item {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center; padding: 28px 0; border-top: 1px solid var(--line-light);
}
.contact-item > .l { grid-column: 1 / span 4; }
.contact-item > .t-heading { grid-column: 5 / span 7; }
.contact-item > img { grid-column: 12; justify-self: end; }

/* ---------- Footer ---------- */
.footer { padding: 120px var(--gutter) 40px; display: flex; flex-direction: column; gap: 120px; }
/* Home outro: the fuselage visual above the footer, home page only. On the photo margin (--bleed), like the careers collage */
.outro { padding: 120px var(--gutter) 0; }
.outro-media { position: relative; margin-inline: calc(var(--bleed) - var(--gutter)); aspect-ratio: 21 / 9; overflow: hidden; background: #000; }
.outro-media img { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; max-width: none; object-fit: cover; will-change: transform; }
.footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.footer-brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 40px; }
.footer-cols { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: var(--gap); white-space: nowrap; }
.footer-cols ul { padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.footer-cols a { transition: opacity .4s var(--ease-out); }
.footer-cols a:hover { opacity: .6; }
.legal { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- Reveal initial states (only when JS runs) ---------- */
.js [data-reveal], .js [data-reveal-item], .js [data-figure] { opacity: 0; }

/* ---------- Film overlay ---------- */
.film-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 72px var(--gutter);
  background: rgba(0, 0, 0, 0.94);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.film-overlay[hidden] { display: none; }
.film-overlay.open { opacity: 1; }
.film-video {
  width: min(100%, calc((100svh - 144px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  transform: scale(.98);
  transition: transform .8s var(--ease-out);
}
.film-overlay.open .film-video { transform: none; }
.film-close {
  position: absolute; top: 16px; right: 16px;
  width: 48px; height: 48px;
  border: 0; background: none; cursor: pointer;
  transition: opacity .4s var(--ease-out);
}
.film-close:hover { opacity: .6; }
.film-close span { position: absolute; left: 13px; top: 23.5px; width: 22px; height: 1px; background: var(--on-dark); }
.film-close span:first-child { transform: rotate(45deg); }
.film-close span:last-child { transform: rotate(-45deg); }
html.film-open { overflow: hidden; }

/* Touch screens: links and buttons get a 44 px tap area without changing the layout */
@media (pointer: coarse) {
  .footer-cols ul { gap: 24px; }
  .footer-cols a, .news-more-btn { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .logo { padding-block: 6px; box-sizing: content-box; margin-block: -6px; }
  .a-chip { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-item], .js [data-figure] { opacity: 1; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1200px) {
  :root { --gutter: 64px; }
  .row > .r { grid-column: 5 / span 8; }
  .footer-brand, .footer-cols { grid-column: 1 / -1; }
  .footer-cols { margin-top: 56px; }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; --bleed: 16px; --gap: 16px; }
  .t-figure { font-size: 52px; line-height: 60px; letter-spacing: -2.4px; }
  .t-heading { font-size: 24px; line-height: 30px; letter-spacing: -0.9px; }
  /* Phone: the sentence on line 1, "Read more" on line 2; 16 px sides so the sentence fits on one line at 375 */
  .announce { flex-direction: column; gap: 2px; height: auto; padding: 10px 16px; text-align: center; }
  .nav-links { display: none; }
  .menu-btn { display: block; }
  .announce-more { display: none; }
  .hero-frame { padding: 48px 24px 32px; height: calc(100svh - 120px); min-height: 560px; }
  body:not(:has(> .announce)) .hero-frame { height: calc(100svh - 88px); }
  .hero-title h1 { white-space: normal; font-size: 46px; line-height: 52px; letter-spacing: -2px; }   /* one step under the 52 px mobile figure */
  .ctas { flex-wrap: wrap; }
  .row > .l, .row > .r, .row > .r8 { grid-column: 1 / -1; }
  .row > .l + * { margin-top: 24px; }
  .mission, .capabilities, .company, .contact { padding-block: 96px; gap: 72px; }
  .product, .open { padding-block: 96px; }
  .product { padding-bottom: 0; }
  /* Phone: a 4:5 stage instead of a full-height strip, so the module fills it */
  .assembly { height: 307vh; }
  .assembly-frame { height: min(calc(100svh - 64px), 125vw); }
  .assembly-labels { display: none; }   /* no part labels on phones; desktop keeps them */
  .specs, .principles, .proofs, .cap-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .cap-grid { row-gap: 64px; }
  .standards, .news-item, .contact-item, .footer-top { grid-template-columns: 1fr; row-gap: 16px; }
  .standards > .l, .standards-list, .news-item > *, .contact-item > *, .footer-brand, .footer-cols { grid-column: 1 / -1 !important; }
  .contact-item > img { display: none; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); row-gap: 40px; margin-top: 56px; }
  .legal { flex-direction: column; }
  .careers-collage { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .careers-collage > div { aspect-ratio: 4 / 3; }
  .careers-collage > .cc-main { grid-row: auto; grid-column: 1 / -1; }
  .outro-media { aspect-ratio: 16 / 9; }
  .film-overlay { padding: 64px 0; }
}

/* ---------- 404 (404.html, served by Vercel for any missing path) ---------- */
.notfound .hero-img { top: 0; height: 100%; opacity: .9; object-position: 50% 50%; }
.notfound-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.2) 100%); }
.notfound .hero-title { gap: 0; }
.notfound-h1 { margin-top: 24px; }
@media (max-width: 900px) {
  .notfound .hero-sub { white-space: normal; }
  .notfound-scrim { background: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.3) 100%); }
}