/* IMETO — prototype stylesheet
   Committed system:
   - Bone background #FEFEFB (kept light throughout per feedback)
   - Near-black text #1F1F19
   - Newsreader 300 for display type, DM Sans 400/500 for UI
   - No bold individual words inside body copy
   - Sharp edges on media (no rounded video corners per feedback)
*/

:root {
  --bg: #FEFEFB;
  --fg: #1F1F19;
  --fg-soft: #1F1F19;
  --line: rgba(31,31,25,0.14);
  --line-strong: rgba(31,31,25,0.35);
  --serif: "Newsreader", "Times New Roman", serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --page-pad: clamp(20px, 3vw, 56px);
  --header-h: 44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: #1F1F19; color: #FEFEFB; }

/* ===================== Intro splash =====================
   On first load, the viewport "blinks" white → black → white, then the
   overlay is removed instantly (no fade). Each phase paints the wordmark
   at the exact pixel position/size of the live wordmark. After the overlay
   goes, the page sits briefly with the wordmark hidden, then the wordmark
   appears — all hard cuts, no fades. */
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 200; /* above everything including header + nav */
  background: #FEFEFB;
  opacity: 1;
  pointer-events: auto;
}
.intro-splash.inverted {
  background: #1F1F19;
}
.intro-splash.done {
  display: none;
}
.intro-splash-wordmark {
  position: absolute;
  display: block;
  /* size + position set inline by JS to match the live wordmark exactly */
  opacity: 0;
}
.intro-splash-wordmark.ready {
  opacity: 1;
}
/* The two wordmark images are stacked; we toggle which one is visible per
   blink phase (black on white, then white on black). */
.intro-splash-wordmark.w-black { }
.intro-splash-wordmark.w-white { opacity: 0; }
.intro-splash.inverted .intro-splash-wordmark.w-black { opacity: 0; }
.intro-splash.inverted .intro-splash-wordmark.w-white { opacity: 1; }
body.intro-active .site-header .menu-trigger {
  opacity: 0;
}
body.intro-active .site-header .menu-trigger,
body.intro-active .site-header .wordmark {
  transition: none;
}
/* Hold the live wordmark(s) hidden during the intro blink. Once the overlay
   is removed and body.intro-active is cleared, they snap back in — no fade:
   a half-second pause where the page is visible but the wordmark isn't,
   then the wordmark appears instantly as a final beat. */
body.intro-active .home-hero .hero-wordmark img,
body.intro-active .site-header .wordmark {
  opacity: 0;
  transition: none;
}

/* ===================== Header ===================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  min-height: var(--header-h);
  padding: calc(var(--page-pad) - 6px) var(--page-pad) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #FEFEFB;
}
.site-header > * { pointer-events: auto; }

/* About page — opt out of the difference blend so the wordmark renders cleanly.
   JS swaps the src between white (over the dark video hero) and black
   (once scrolled past into the white content). */
body[data-route="about"] .site-header {
  mix-blend-mode: normal;
}

.wordmark {
  height: 18px;
  width: auto;
  display: block;
}
.site-header .wordmark {
  transition: opacity .25s ease;
  opacity: var(--header-logo-opacity, 1);
}
.wordmark-link { display: inline-flex; align-items: center; }

/* Dot menu trigger */
.menu-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: inherit;
}
.menu-trigger .dots {
  display: grid;
  grid-template-columns: repeat(2, 4px);
  grid-template-rows: repeat(2, 4px);
  gap: 3px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.menu-trigger .dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.menu-trigger:hover .dots { transform: rotate(45deg); }

/* Career page — black wordmark on the light background. Overrides the
   default mix-blend-mode:difference header treatment (which was designed
   for the dark home hero). */
body[data-route="career"] .site-header {
  mix-blend-mode: normal;
}
/* Career page — nudge the wordmark down so it top-aligns with the
   menu dots (dots are centered in a 44px tap target). */
body[data-route="career"] .site-header {
  padding-top: calc(var(--page-pad) - 6px);
}
body[data-route="career"] .site-header .wordmark-link { visibility: visible; }
body[data-route="career"] .site-header { color: #1F1F19; }

/* ===================== Nav Overlay ===================== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  color: var(--fg);
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
/* Minimal overlay: hide the wordmark in the overlay header and the overlay's own footer */
.nav-overlay .nav-header .wordmark-link { visibility: hidden; }
.nav-overlay .nav-footer { display: none; }
/* Hide the main page chrome behind the overlay */
body:has(.nav-overlay.open) .site-header,
body:has(.nav-overlay.open) > main ~ .site-footer,
body:has(.nav-overlay.open) .page.active .site-footer {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.nav-overlay .nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad);
}
.nav-overlay .nav-close {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: inherit;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-overlay .nav-close .x {
  width: 14px; height: 14px; position: relative; display: inline-block;
}
.nav-overlay .nav-close .x::before,
.nav-overlay .nav-close .x::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 1px; background: currentColor;
  transform-origin: center;
}
.nav-overlay .nav-close .x::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-overlay .nav-close .x::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--page-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 18px);
  /* Shift the whole list down from the vertical center for better
     optical balance with the nav header above. Works on all viewports. */
  transform: translateY(clamp(24px, 6vh, 72px));
}
.nav-list li {
  overflow: hidden;
}
.nav-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 11vw, 180px);
  line-height: 1;
  letter-spacing: -0.02em;
  padding: clamp(6px, 1vw, 14px) 0;
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.nav-list li:last-child .nav-link { border-bottom: 1px solid var(--line); }
.nav-overlay.open .nav-link { transform: translateY(0); }
.nav-overlay.open .nav-list li:nth-child(1) .nav-link { transition-delay: .08s; }
.nav-overlay.open .nav-list li:nth-child(2) .nav-link { transition-delay: .14s; }
.nav-overlay.open .nav-list li:nth-child(3) .nav-link { transition-delay: .20s; }

.nav-link .idx {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .08em;
  opacity: .5;
  align-self: flex-start;
  padding-top: 8px;
}
.nav-link:hover { font-style: italic; }
.nav-link[data-active="true"] { font-style: italic; }

.nav-footer {
  padding: clamp(20px, 3vw, 36px) var(--page-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .02em;
  border-top: 1px solid var(--line);
  color: var(--fg);
}
.nav-footer .label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 8px;
  display: block;
}
.nav-footer a { display: block; padding: 2px 0; }
.nav-footer a:hover { font-style: italic; }

/* ===================== Eyebrow buttons ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 14px 20px;
  border: 1px solid currentColor;
  border-radius: 6px;
  min-width: 220px;
  cursor: pointer;
  background: transparent;
  color: inherit;
  transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}
.btn .arrow {
  display: inline-block;
  transition: transform .3s ease;
}
.btn:hover { background: rgba(254, 254, 251, 0.12); border-color: rgba(255,255,255,0.65); }
.btn:hover .arrow { transform: translateX(4px); }
.btn.btn-inverse { color: #FEFEFB; border-color: rgba(255,255,255,0.32); background: rgba(254, 254, 251, 0.02); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: background .3s ease, border-color .3s ease, color .3s ease; }
.btn.btn-inverse:hover { background: rgba(254, 254, 251, 0.02); border-color: rgba(255,255,255,0.16); color: #FEFEFB; }

/* ===================== Page transitions ===================== */
.page {
  min-height: 100vh;
  display: none;
  animation: pageIn .6s cubic-bezier(.2,.7,.2,1);
}
.page.active { display: block; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===================== Footer ===================== */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(24px, 3vw, 40px) var(--page-pad) 28px;
  display: grid;
  grid-template-columns: repeat(4, max-content) 1fr;
  column-gap: clamp(48px, 6vw, 96px);
  row-gap: 0;
  font-family: var(--sans);
  font-size: 13px;
  align-items: start;
}
.site-footer .foot-col,
.site-footer .foot-addr {
  display: contents;
}
/* Row 1: labels */
.site-footer .foot-col .label,
.site-footer .foot-addr .label {
  grid-row: 1;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
  margin: 0 0 6px 0;
  display: block;
  align-self: start;
  white-space: nowrap;
}
/* Rows 2..n: content items — each child gets its own row */
.site-footer .foot-col a:nth-of-type(1) { grid-row: 2; }
.site-footer .foot-col a:nth-of-type(2) { grid-row: 3; }
.site-footer .foot-col a:nth-of-type(3) { grid-row: 4; }
.site-footer .foot-col a:nth-of-type(4) { grid-row: 5; }
.site-footer .foot-addr address { grid-row: 2 / span 4; align-self: start; }

.site-footer a {
  display: block;
  padding: 0;
  margin: 0;
  line-height: 1.55;
  font-size: 13px;
  white-space: nowrap;
  align-self: start;
}
.site-footer a:hover { font-style: italic; }

.site-footer .foot-addr address {
  font-style: normal;
  line-height: 1.55;
  font-size: 13px;
  opacity: .85;
  white-space: normal;
}

/* Column assignments — explicit so rows line up cleanly */
.site-footer > :nth-child(1) .label,
.site-footer > :nth-child(1) a,
.site-footer > :nth-child(1) address { grid-column: 1; }
.site-footer > :nth-child(2) .label,
.site-footer > :nth-child(2) a,
.site-footer > :nth-child(2) address { grid-column: 2; }
.site-footer > :nth-child(3) .label,
.site-footer > :nth-child(3) a,
.site-footer > :nth-child(3) address { grid-column: 3; }
.site-footer > :nth-child(4) .label,
.site-footer > :nth-child(4) a,
.site-footer > :nth-child(4) address { grid-column: 4; }

@media (max-width: 1100px) {
  .site-footer { column-gap: 40px; }
}
@media (max-width: 820px) {
  .site-footer {
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }
  .site-footer > :nth-child(1) .label,
  .site-footer > :nth-child(1) a,
  .site-footer > :nth-child(1) address { grid-column: 1; grid-row: auto; }
  .site-footer > :nth-child(2) .label,
  .site-footer > :nth-child(2) a,
  .site-footer > :nth-child(2) address { grid-column: 2; grid-row: auto; }
  .site-footer > :nth-child(3) .label,
  .site-footer > :nth-child(3) a,
  .site-footer > :nth-child(3) address { grid-column: 1; grid-row: auto; }
  .site-footer > :nth-child(4) .label,
  .site-footer > :nth-child(4) a,
  .site-footer > :nth-child(4) address { grid-column: 2; grid-row: auto; }
  .nav-footer { grid-template-columns: 1fr; }
}

/* ===================== Home ===================== */
.home-hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  width: 100%;
  overflow: hidden;
  color: #FEFEFB;
}
.home-hero .hero-media {
  position: absolute;
  inset: 0;
  background: #1F1F19;
}
.home-hero .hero-media video,
.home-hero .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight AI-leaning treatment without going dystopian */
  filter: contrast(1.02) saturate(.88) brightness(.92);
}
.home-hero .hero-media::after {
  /* subtle vignette for legibility, NOT a heavy dark overlay */
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.25) 100%),
    linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 45%);
}
.home-hero .hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: var(--header-h) var(--page-pad) clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-rows: 1fr auto;
}
.home-hero .hero-wordmark {
  align-self: end;
  padding-top: 40px;
}
.home-hero .hero-wordmark img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}
.home-hero .hero-base {
  display: grid;
  grid-template-columns: 1.3fr auto;
  align-items: end;
  gap: 48px;
  padding-top: 32px;
  width: 100%;
}
.home-hero .hero-headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 20ch;
  margin: 0;
}
.home-hero .hero-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-width: 240px;
  justify-self: end;
}
.home-hero .hero-cta { min-width: 200px; }
.home-hero .hero-cta .btn { min-width: 200px; font-size: 12px; padding: 11px 16px; }

.home-hero .hero-corner {
  position: absolute;
  left: var(--page-pad);
  top: calc(var(--header-h) + 8px);
  z-index: 2;
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
}
.home-hero .hero-corner .dot {
  width: 6px; height: 6px; background: #FEFEFB; border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: .3; } 50% { opacity: 1; }
}

.home-pace {
  padding: clamp(80px, 12vw, 180px) var(--page-pad);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.home-pace .eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 clamp(40px, 5vw, 72px);
}
.home-pace h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 14ch;
}
.home-pace .pace-body {
  font-size: 17px;
  line-height: 1.55;
  max-width: 52ch;
}
.home-pace .pace-body p { margin: 0 0 1em; }
.home-pace .pace-body p:last-child { margin-bottom: 0; }

.home-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px var(--page-pad);
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  gap: 48px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 3vw, 44px);
  letter-spacing: -0.01em;
  font-style: italic;
}
.home-strip .track {
  display: inline-flex;
  gap: 48px;
  animation: marquee 38s linear infinite;
}
.home-strip .track span { display: inline-flex; align-items: center; gap: 48px; }
.home-strip .track span::after {
  content: '—';
  font-style: normal;
  opacity: .3;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 820px) {
  .home-hero { min-height: 560px; }
  .home-hero .hero-base { grid-template-columns: 1fr; }
  .home-pace { grid-template-columns: 1fr; }
}

/* ===================== About ===================== */

/* About page lays its own scroll thread over the full page.
   The line runs down the left gutter of the content; a JS handler
   draws the highlighted segment in sync with scroll progress. */
.about-page {
  position: relative;
}
.about-thread {
  position: absolute;
  top: 0;
  left: clamp(18px, 2.6vw, 40px);
  width: 2px;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.about-thread .thread-svg {
  position: sticky;
  top: calc(var(--header-h) + 12px);
  width: 2px;
  height: calc(100vh - var(--header-h) - 24px);
  overflow: visible;
  display: block;
}
.about-thread .thread-bg {
  stroke: currentColor;
  stroke-width: 1;
  opacity: .18;
}
.about-thread .thread-fg {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: var(--thread-offset, 100);
  transition: stroke-dashoffset .12s linear;
  opacity: .85;
}
/* Nodes drop pinpoints along the thread, one per section boundary,
   rendered by JS into this absolute overlay (see the script block). */
.about-thread .thread-nodes {
  position: absolute;
  top: 0;
  left: -3px;
  width: 8px;
  height: 100%;
}
.about-thread .thread-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid currentColor;
  opacity: .45;
  transform: translateY(-50%);
  transition: opacity .4s ease, background .4s ease, transform .4s ease;
}
.about-thread .thread-node.active {
  opacity: 1;
  background: currentColor;
  transform: translateY(-50%) scale(1.15);
}

.about-hero {
  position: relative;
  padding: calc(var(--header-h) + 120px) var(--page-pad) 80px;
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
  min-height: 92vh;
  overflow: hidden;
  isolation: isolate;
  color: #FEFEFB;
  background: #1F1F19;
}
.about-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.about-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
.about-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.about-hero > *:not(.about-hero-media) {
  position: relative;
  z-index: 1;
}
.about-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 30ch;
  color: #FEFEFB;
}
.about-hero .about-meta {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  max-width: 42ch;
  color: rgba(254,254,251,0.95);
}
.about-hero .about-meta p {
  color: rgba(254,254,251,0.95);
  /* Nudge the paragraph up so its last-line baseline aligns with the h1's.
     A small negative translate is more reliable than margin tricks for
     cross-line-height baseline alignment. */
  margin: 0;
  transform: translateY(-0.18em);
}
.about-hero .about-meta .label {
  display: block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 1;
  margin: 0 0 12px;
  color: rgba(254,254,251,1);
}

.about-approach {
  position: relative;
  padding: clamp(60px, 8vw, 140px) var(--page-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  border-top: 1px solid var(--line);
}

.about-seeit {
  position: relative;
  padding: clamp(60px, 8vw, 140px) var(--page-pad);
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  color: #FEFEFB;
  background: #1F1F19;
}
.about-seeit .seeit-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.about-seeit .seeit-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-seeit .seeit-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
}
.about-seeit .seeit-inner {
  position: relative;
  z-index: 1;
}
.about-seeit .eyebrow { color: rgba(254,254,251,0.7); }
.about-seeit h2 { color: #FEFEFB; }
.about-seeit .seeit-intro { color: rgba(254,254,251,0.82); }
.about-seeit .seeit-item { border-right-color: rgba(255,255,255,0.2); }
.about-seeit .seeit-item .num { color: rgba(254,254,251,0.65); }
.about-seeit .seeit-item h3 { color: #FEFEFB; }
.about-seeit .seeit-grid { border-top-color: rgba(255,255,255,0.2); }
.about-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: none;
}
.about-hero .about-meta {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .02em;
  max-width: 36ch;
  align-self: end;
  padding-bottom: 12px;
  opacity: .7;
}
.about-hero .about-meta .label {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 8px;
}

.about-approach {
  padding: clamp(60px, 8vw, 140px) var(--page-pad);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(48px, 6vw, 96px);
  border-top: 1px solid var(--line);
  align-items: start;
}
.about-approach .eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 24px;
}
.about-approach h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
}
.about-approach h2 em { font-style: italic; }

/* Calm, quiet reading column — one body paragraph, then a single
   italic close line. No extra rules or kickers crowding the space. */
.about-approach .approach-body {
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.65;
  max-width: 54ch;
  margin-top: 42px;
  color: var(--ink-2, #3a3a33);
}
.about-approach .approach-body p {
  margin: 0;
}
.about-approach .approach-close {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-top: 40px;
  color: var(--ink, #1F1F19);
}
.about-approach .approach-close em {
  font-style: italic;
  font-weight: 400;
}
.about-seeit {
  padding: clamp(60px, 8vw, 140px) var(--page-pad);
  border-top: 1px solid var(--line);
}
.about-seeit .eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 24px;
}
.about-seeit h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0 0 24px;
}
.about-seeit .seeit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.about-seeit .seeit-item {
  padding: 56px 32px 36px 0;
  border-right: 1px solid var(--line);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
}
.about-seeit .seeit-item + .seeit-item { padding-left: 32px; }
.about-seeit .seeit-item:last-child { border-right: 0; padding-right: 0; }
.about-seeit .seeit-item .num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .5;
}
.about-seeit .seeit-item h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 18ch;
}
.about-seeit .seeit-intro {
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 48px;
}

/* Three horizontally-aligned cards — same glass treatment as the career collage.
   Uses subgrid so the num / title / paragraph rows line up across all three
   cards regardless of how the title wraps. */
.about-seeit .seeit-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  gap: 1px;
  margin-top: 8px;
}
.about-seeit .seeit-cards .cc-card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  min-height: 280px;
  /* Override .cc-card + .cc-card { border-top: none } from the career collage
     — in this horizontal layout every card needs a full border box. */
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.32));
}
/* Drop the per-card min-height shim now that subgrid handles alignment */
.about-seeit .seeit-cards .cc-card h3 {
  min-height: 0;
}
@media (max-width: 980px) {
  .about-seeit .seeit-cards { grid-template-columns: 1fr; }
  .about-seeit .seeit-cards .cc-card { grid-template-rows: auto auto auto; }
}

.about-examples {
  padding: clamp(60px, 8vw, 120px) 0 clamp(24px, 3vw, 56px) var(--page-pad);
  border-top: 1px solid var(--line);
}
.about-examples .ex-head {
  padding-right: var(--page-pad);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 24px;
}
.about-examples h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.about-examples .scroll-hint {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
}
.about-examples .ex-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding-right: var(--page-pad);
  /* Push the scrollbar further below the cards and keep it from overlapping
     the last line of the card paragraph. */
  padding-bottom: 32px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.about-examples .ex-track::-webkit-scrollbar { height: 3px; }
.about-examples .ex-track::-webkit-scrollbar-track {
  /* Shorten the visible scrollbar track to roughly half the viewport
     width by adding large left/right inset margins. */
  margin-left: 25%;
  margin-right: 25%;
  background: transparent;
}
.about-examples .ex-track::-webkit-scrollbar-thumb { background: var(--line-strong); }
.about-examples .ex-card {
  flex: 0 0 clamp(420px, 38vw, 560px);
  scroll-snap-align: start;
  border-top: 1px solid var(--fg);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
}
.about-examples .ex-card .tag {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 18px;
}
.about-examples .ex-card h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.about-examples .ex-card p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 40ch;
  opacity: .8;
}
.about-examples .ex-card .ex-meta {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .6;
}

@media (max-width: 820px) {
  .about-hero { grid-template-columns: 1fr; align-items: start; }
  .about-approach { grid-template-columns: 1fr; }
  .about-seeit .seeit-grid { grid-template-columns: 1fr; }
  .about-seeit .seeit-item { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
}

/* ===================== Career ===================== */
.career-page { padding-top: var(--header-h); }

.career-hero {
  position: relative;
  padding: calc(var(--header-h) + 56px) var(--page-pad) 40px;
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
  min-height: 56vh;
  color: #1F1F19;
  background: transparent;
}
.career-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 120px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 14ch;
}
.career-hero h1 em { font-style: italic; }
.career-hero .career-meta {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.55;
  max-width: 32ch;
  color: rgba(31,31,25,0.75);
  /* Align the paragraph's baseline with the h1 headline's last-line
     baseline. The big serif has more descender space below its baseline
     than the small sans, so shift the meta up to compensate. */
  margin-bottom: 14px;
}
.career-hero .career-meta p { margin: 0; }
.career-hero .career-meta .label {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 12px;
  color: rgba(31,31,25,0.65);
}

/* (legacy — retained but unused) */
.career-hero .career-wordmark { display: none; }

/* Wrapper holds the video as a single background spanning the collage AND the CTA,
   all the way down to where the footer begins. */
.career-media {
  position: relative;
  isolation: isolate;
  background: #1F1F19;
  overflow: hidden;
}
.career-media .cc-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.career-media > .career-collage,
.career-media > .career-cta {
  position: relative;
  z-index: 1;
}
.career-media .cc-video video,
.career-media .cc-video img {
  width: 100%; height: 100%; object-fit: cover;
}
.career-media .cc-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

/* Asymmetric collage — tighter than the current site */
.career-collage {
  position: relative;
  width: 100%;
  min-height: clamp(640px, 85vh, 920px);
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* (legacy .cc-video rules kept scoped to .career-collage for safety, but wrapper now owns the video) */
.career-collage > .cc-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.career-collage > .cc-video video, .career-collage > .cc-video img {
  width: 100%; height: 100%; object-fit: cover;
}
.career-collage > .cc-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

.cc-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 24px 48px;
  max-width: 560px;
  width: 100%;
  flex: 0 0 auto;
  /* Visually shift cards toward the vertical center of the overall .career-media
     (which includes the CTA section below). Reduced so the cards sit a bit
     higher and the CTA h2 can align with the cards' bottom. */
  transform: translateY(var(--cta-half, 80px));
}

.cc-card {
  padding: 32px 28px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  position: relative;
  overflow: hidden;
  color: #FEFEFB;
  background: rgba(254, 254, 251, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: border-color .6s ease, background-color .6s ease;
}
.cc-card + .cc-card { border-top: none; }
.cc-card > * { position: relative; z-index: 1; }

/* thin hairline that unfolds from left → right under the number on hover */
.cc-card .num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .7;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: opacity .6s ease;
}
.cc-card h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 6px;
  /* Shrink h3's box to the actual text width so the hand-drawn underline
     below can start/end exactly where the sentence starts/ends. Use
     min-content so wrapped titles still wrap to the longest word,
     and the pseudo-element spans the whole text bounding box. */
  width: fit-content;
  max-width: 100%;
}
.cc-card h3 em { font-style: italic; }

/* Hand-drawn underscore — a loose, slightly wobbly stroke that "draws in"
   on hover under each statement. Uses mask-image so currentColor works on
   both the dark career page and the light "See It In Action" section.
   Every card gets a unique hand-drawn path — no two lines repeat. */
.cc-card h3::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 12px;
  max-width: 100%;
  background: currentColor;
  opacity: .85;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: left center;
  mask-position: left center;
  transform: translateX(-50%);
  transform-origin: center center;
  transition: width .8s cubic-bezier(.22,.61,.36,1);
}

/* Home "See It In Action" — 3 unique strokes */
/* 01 — gentle wave with a small end-flick */
.seeit-cards .cc-card:nth-child(1) h3::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 7 C 28 4, 58 9, 92 6 S 160 10, 198 5 S 262 8, 294 4 L 291 2.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 7 C 28 4, 58 9, 92 6 S 160 10, 198 5 S 262 8, 294 4 L 291 2.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* 02 — tight wobble, dips low */
.seeit-cards .cc-card:nth-child(2) h3::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M3 6 C 22 9, 48 4, 78 7 S 132 10, 168 6 S 226 3, 264 8 S 294 6, 297 5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M3 6 C 22 9, 48 4, 78 7 S 132 10, 168 6 S 226 3, 264 8 S 294 6, 297 5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* 03 — two overlapping quick strokes, doodle retrace */
.seeit-cards .cc-card:nth-child(3) h3::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 5 C 40 3, 90 8, 140 5 S 230 7, 288 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/><path d='M14 9 C 60 7, 120 10, 176 8 S 248 9, 278 7' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 5 C 40 3, 90 8, 140 5 S 230 7, 288 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/><path d='M14 9 C 60 7, 120 10, 176 8 S 248 9, 278 7' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'/></svg>");
}

/* Career collage — 3 more unique strokes */
/* 01 — long lazy stroke that dips in the middle then rises */
.cc-cards .cc-card:nth-child(1) h3::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 5 C 48 7, 82 10, 130 8 S 212 4, 254 3 S 292 6, 298 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 5 C 48 7, 82 10, 130 8 S 212 4, 254 3 S 292 6, 298 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* 02 — stroke that rises, with a tiny hook-back at the start */
.cc-cards .cc-card:nth-child(2) h3::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M6 9 C 3 7, 8 5, 18 6 C 54 7, 96 5, 144 6 S 224 8, 268 5 S 294 3, 297 2' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M6 9 C 3 7, 8 5, 18 6 C 54 7, 96 5, 144 6 S 224 8, 268 5 S 294 3, 297 2' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* 03 — tighter zigzag, slightly scratchy feel */
.cc-cards .cc-card:nth-child(3) h3::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 6 C 18 3, 36 10, 56 6 S 96 3, 120 7 S 168 10, 196 6 S 244 3, 272 7 S 296 9, 298 6' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 6 C 18 3, 36 10, 56 6 S 96 3, 120 7 S 168 10, 196 6 S 244 3, 272 7 S 296 9, 298 6' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.cc-card p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  opacity: .85;
  transition: opacity .6s ease;
}

/* Hover — subtle: the rule unfolds, opacities lift gently */
.cc-card:hover {
  background: rgba(254, 254, 251, 0.16);
  border-color: rgba(255,255,255,0.5);
}
.cc-card:hover .num { opacity: 1; }
.cc-card:hover h3::after { width: 100%; }
.cc-card:hover p { opacity: 1; }

.cc-wide {
  grid-column: 1 / span 7;
  grid-row: span 4;
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
}
.cc-wide h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.015em;
  max-width: 14ch;
}
.cc-wide p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 40ch;
}

.cc-stats {
  grid-column: 8 / span 5;
  grid-row: span 4;
  padding: 40px 32px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  background: #1F1F19;
  color: #FEFEFB;
}
.cc-stats .label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}
.cc-stats .stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-content: end;
}
.cc-stats .stat {
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 14px;
}
.cc-stats .stat .num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-style: italic;
}
.cc-stats .stat .txt {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .7;
  margin-top: 4px;
}

.career-cta {
  padding: clamp(40px, 6vw, 72px) var(--page-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  position: relative;
  z-index: 1;
  color: #FEFEFB;
  /* Match the cards column on the right side of the video area. */
  justify-items: end;
}
.career-cta h2,
.career-cta .cta-link,
.career-cta .cta-link * {
  color: #FEFEFB;
}
.career-cta h2 {
  justify-self: end;
  text-align: right;
}
/* Sized + styled like the home-hero .btn.btn-inverse "What we're about" pill */
.career-cta .cta-link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: auto;
  min-width: 148px;
  max-width: none;
  padding: 8px 12px;
  margin-right: 16px;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 6px;
  background: rgba(254, 254, 251, 0.02);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.career-cta .cta-link:hover {
  background: rgba(254, 254, 251, 0.12);
  border-color: rgba(255,255,255,0.65);
}
.career-cta .cta-link .cta-label {
  font-size: 11px;
  letter-spacing: .04em;
}
.career-cta .cta-link .cta-arrow {
  font-size: 12px;
}
.career-cta h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
  /* Pull the h2 up so its bottom baseline aligns with the cards' bottom
     row of the collage above. Cards sit translated up by ~80px; this
     closes the residual gap between cards bottom and the h2. */
  margin-top: -13px;
}
.career-cta h2 em { font-style: italic; }

/* CTA link — borderless, quiet; animates the label tracking + a growing underline on hover */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg);
  padding: 10px 2px;
  position: relative;
}
.cta-link .cta-label {
  position: relative;
  display: inline-block;
  transition: letter-spacing .5s cubic-bezier(.22,.61,.36,1);
}
.cta-link .cta-label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.cta-link .cta-arrow {
  display: inline-block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.cta-link:hover .cta-label { letter-spacing: .22em; }
.cta-link:hover .cta-label::after { transform: scaleX(1); }
.cta-link:hover .cta-arrow { transform: translateX(8px); }

@media (max-width: 900px) {
  .career-collage { min-height: auto; }
  .cc-cards { padding: 24px; max-width: none; }
  .career-cta { grid-template-columns: 1fr; }
}

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

/* =====================================================================
   RESPONSIVE PASS — tablet & mobile
   Desktop layout stays untouched; these rules only activate below 1024px.

   Breakpoints:
     <= 1024px   iPad landscape and smaller
     <= 820px    iPad portrait and smaller
     <= 560px    phones
   ===================================================================== */

/* --------- iPad landscape (≤1024) — shrink oversized hero type --------- */
@media (max-width: 1024px) {
  :root {
    --page-pad: clamp(20px, 3vw, 40px);
  }
  /* Home hero headline was fine but giant wordmark image + hero-base sit close
     together — give the base a little more breathing room. */
  .home-hero .hero-base { gap: 32px; }

  /* About hero — the top padding is calc(header+120px); that's heavy on 1024 */
  .about-hero { padding: calc(var(--header-h) + 80px) var(--page-pad) 64px; }

  /* Career hero headline was clamping up to 120px — fine on desktop, a bit
     pushy on iPad landscape where viewport starts to narrow. */
  .career-hero { min-height: 44vh; }
}

/* --------- iPad portrait (≤820px) — structural stacking --------- */
@media (max-width: 820px) {
  :root {
    --page-pad: clamp(18px, 4vw, 32px);
    --header-h: 40px;
  }

  /* ---- Header / nav ---- */
  .site-header { padding: calc(var(--page-pad) - 4px) var(--page-pad) 0; }
  .wordmark { height: 16px; }

  /* Nav overlay — big serif had min 56px which could overflow.
     Drop min and let it scale with the viewport. */
  .nav-link {
    font-size: clamp(44px, 13vw, 120px);
    gap: 16px;
  }
  .nav-link .idx { font-size: 12px; padding-top: 6px; }

  /* ---- Home hero ----
     Mobile: the hero scrolls normally with the page (no sticky pin).
     JS only shrinks the wordmark in place as you scroll, while the
     whole hero — video, headline, CTAs — lifts upward in flow and the
     footer follows underneath naturally. */
  .home-hero {
    min-height: 100dvh;
    height: 100dvh;
  }
  .home-hero .hero-media video,
  .home-hero .hero-media img {
    /* Mobile crop: bias the framing slightly right of center so the
       subject sits a touch right of middle in the portrait window. */
    object-position: 62% 50%;
  }
  .home-hero .hero-inner {
    padding-bottom: 24px;
    /* Lift the stacked wordmark + headline + CTAs higher in the hero. */
    grid-template-rows: auto auto;
    align-content: end;
    row-gap: 6px;
  }
  .home-hero .hero-wordmark {
    padding-top: 0;
    margin-top: auto;
    margin-bottom: 0;
    transform-origin: 0 100%;
    will-change: transform;
  }
  .home-hero .hero-base {
    padding-top: 0;
    margin-bottom: 8vh;
  }
  .home-hero .hero-headline {
    font-size: clamp(28px, 5.2vw, 40px);
    max-width: 22ch;
  }
  .home-hero .hero-base {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 20px;
  }
  .home-hero .hero-cta {
    justify-self: start;
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .home-hero .hero-cta .btn {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: space-between;
  }
  .home-hero .hero-corner {
    font-size: 10px;
    gap: 12px;
    top: calc(var(--header-h) + 4px);
  }

  /* ---- Home pace ---- */
  .home-pace {
    padding: clamp(56px, 10vw, 96px) var(--page-pad);
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .home-pace .eyebrow { margin-bottom: 20px; }
  .home-pace h2 { font-size: clamp(30px, 6.4vw, 48px); max-width: none; }
  .home-pace .pace-body { font-size: 16px; }

  /* ---- Home strip ---- */
  .home-strip { padding: 14px var(--page-pad); gap: 32px; }
  .home-strip .track { gap: 32px; }
  .home-strip .track span { gap: 32px; }

  /* ---- About thread line — hide on narrow viewports, it fights the gutter ---- */
  .about-thread { display: none; }

  /* ---- About hero ---- */
  .about-hero {
    padding: calc(var(--header-h) + 72px) var(--page-pad) 48px;
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: 72vh;
    align-items: start;
  }
  .about-hero h1 { font-size: clamp(32px, 6.4vw, 52px); }
  .about-hero .about-meta { padding-bottom: 0; max-width: 44ch; }

  /* ---- About approach ---- */
  .about-approach {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: clamp(48px, 10vw, 96px) var(--page-pad);
  }
  .about-approach h2 { font-size: clamp(28px, 6vw, 44px); max-width: none; }
  .about-approach .approach-body { margin-top: 8px; font-size: 16px; }
  .about-approach .approach-close { font-size: clamp(20px, 3.4vw, 26px); margin-top: 28px; }

  /* ---- About "see it" ---- */
  .about-seeit { padding: clamp(48px, 10vw, 96px) var(--page-pad); }
  .about-seeit h2 { font-size: clamp(28px, 6vw, 44px); max-width: none; }
  .about-seeit .seeit-intro { font-size: 16px; margin-bottom: 32px; }
  /* seeit-grid + seeit-cards single-col rules already handled at 820/980 */

  /* ---- About examples (horizontal scroll) ---- */
  .about-examples {
    padding: clamp(48px, 10vw, 96px) 0 clamp(24px, 4vw, 48px) var(--page-pad);
  }
  .about-examples .ex-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
  }
  .about-examples h2 { font-size: clamp(24px, 5vw, 36px); }
  .about-examples .ex-card {
    flex: 0 0 min(78vw, 400px);
  }

  /* ---- Career hero ---- */
  .career-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: calc(var(--header-h) + 40px) var(--page-pad) 32px;
    min-height: auto;
    align-items: start;
  }
  .career-hero h1 {
    font-size: clamp(44px, 10vw, 88px);
    max-width: none;
  }
  .career-hero .career-meta { max-width: 44ch; margin-bottom: 0; }

  /* ---- Career collage ---- */
  .career-collage {
    min-height: auto;
    padding: 0;
  }
  .cc-cards {
    max-width: none;
    width: 100%;
    padding: 24px var(--page-pad);
    transform: none; /* kill the desktop translateY nudge */
  }
  .cc-card { padding: 24px 20px; }
  .cc-card h3 { font-size: clamp(20px, 4vw, 26px); }

  /* ---- Career CTA ---- */
  .career-cta {
    padding: clamp(40px, 8vw, 64px) var(--page-pad);
    justify-items: stretch;
  }
  .career-cta h2 {
    justify-self: start;
    text-align: left;
    font-size: clamp(30px, 7vw, 52px);
    max-width: none;
    margin-top: 0;
  }
  .career-cta .cta-link {
    justify-self: start;
    margin-right: 0;
  }
}

/* --------- Phones (≤560px) — tighter still --------- */
@media (max-width: 560px) {
  :root {
    --page-pad: 18px;
  }

  /* Wordmark in header stays, but drop the 18px height one step for tap target clarity */
  .wordmark { height: 14px; }

  /* Nav overlay — serif needs to be smaller to fit 3 links on short screens */
  .nav-link {
    font-size: clamp(40px, 14vw, 80px);
    padding: 8px 0;
  }
  .nav-list { gap: 4px; }
  .nav-footer {
    grid-template-columns: 1fr;
    padding: 20px var(--page-pad) 28px;
    font-size: 12px;
  }

  /* Home hero — cut the big wordmark slightly so layout breathes */
  .home-hero { min-height: 580px; }
  .home-hero .hero-wordmark { padding-top: 16px; }
  .home-hero .hero-wordmark img {
    /* Cap the giant wordmark on phones so it doesn't dominate the hero */
    max-width: 100%;
  }
  .home-hero .hero-headline { font-size: clamp(26px, 6.8vw, 34px); }
  .home-hero .hero-cta { flex-direction: column; }
  .home-hero .hero-cta .btn {
    width: 100%;
    font-size: 12px;
  }
  .home-hero .hero-corner {
    /* Tiny screens — just show the dot + first label */
    font-size: 9px;
    letter-spacing: .12em;
    gap: 8px;
  }

  /* Home pace */
  .home-pace h2 { font-size: clamp(28px, 8vw, 38px); }

  /* About hero */
  .about-hero h1 { font-size: clamp(30px, 8vw, 44px); }
  .about-hero .about-meta { font-size: 13px; }

  /* About approach */
  .about-approach h2 { font-size: clamp(26px, 7vw, 36px); }

  /* About seeit */
  .about-seeit h2 { font-size: clamp(26px, 7vw, 36px); }

  /* About examples cards */
  .about-examples .ex-card {
    flex: 0 0 82vw;
  }
  .about-examples .ex-card h3 { font-size: clamp(20px, 5vw, 26px); }

  /* Career hero */
  .career-hero h1 { font-size: clamp(40px, 12vw, 68px); }

  /* Career collage cards */
  .cc-card { padding: 22px 18px; }
  .cc-card h3 { font-size: clamp(19px, 4.6vw, 24px); }
  .cc-card p { font-size: 14px; }
  .cc-card:hover h3::after { width: 100%; }

  /* Career CTA */
  .career-cta h2 { font-size: clamp(26px, 8vw, 40px); }

  /* Footer — keep the 2-col grid from 820px all the way down; 1-column
     is too tall on phones. Reset the desktop per-row grid (which reserves
     tall rows for addresses) so each column becomes a simple flex stack
     with tight, even spacing. */
  .site-footer {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 14px;
    padding: 16px var(--page-pad) 18px;
    font-size: 11px;
  }
  /* Undo display:contents so each .foot-col / .foot-addr is its own flex
     column with no wasted row space. */
  .site-footer .foot-col,
  .site-footer .foot-addr {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .site-footer a,
  .site-footer .foot-addr address { font-size: 11px; line-height: 1.4; }
  .site-footer .foot-col .label,
  .site-footer .foot-addr .label {
    font-size: 9px;
    letter-spacing: .12em;
    margin: 0 0 2px 0;
  }
  /* Clear the desktop grid-row assignments; flex handles flow now. */
  .site-footer .foot-col a,
  .site-footer .foot-addr address {
    grid-row: auto;
    align-self: auto;
  }
  /* 2-col layout: col 1 = get-in-touch + Oslo, col 2 = Stockholm + Malmö */
  .site-footer > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .site-footer > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .site-footer > :nth-child(3) { grid-column: 1; grid-row: 2; }
  .site-footer > :nth-child(4) { grid-column: 2; grid-row: 2; }
}