/* =========================================================
   Amel — site styles. Every colour, font, type size, radius
   and duration comes from tokens.css. Rules: DESIGN.md.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--type-root-size);
  line-height: var(--type-root-leading);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* keyboard focus: an orange ring that shows on ink and on cream; ink on the orange active card */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.card.is-active :focus-visible { outline-color: var(--c-ink); }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: var(--space-3); left: var(--space-3); z-index: var(--z-skip); background: var(--c-canvas); color: var(--c-ink); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.mono { font-family: var(--font-mono); }
.accent { color: var(--c-primary); }
.container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

.dark, .light { background: var(--surface); color: var(--text); }

/* ---------- TYPE ROLE UTILITIES (use these for new content) ---------- */
.t-hero { font-family: var(--font-serif); font-size: var(--type-hero-size); font-weight: var(--type-hero-weight); letter-spacing: var(--type-hero-tracking); line-height: var(--type-hero-leading); }
.t-display-xl { font-size: var(--type-display-xl-size); font-weight: var(--type-display-xl-weight); letter-spacing: var(--type-display-xl-tracking); line-height: var(--type-display-xl-leading); }
.t-display-lg { font-size: var(--type-display-lg-size); font-weight: var(--type-display-lg-weight); letter-spacing: var(--type-display-lg-tracking); line-height: var(--type-display-lg-leading); }
.t-serif-accent { font-family: var(--font-serif); font-size: var(--type-serif-accent-size); font-weight: var(--type-serif-accent-weight); letter-spacing: var(--type-serif-accent-tracking); line-height: var(--type-serif-accent-leading); }
.t-heading-1 { font-size: var(--type-heading-1-size); font-weight: var(--type-heading-1-weight); letter-spacing: var(--type-heading-1-tracking); line-height: var(--type-heading-1-leading); }
.t-heading-2 { font-size: var(--type-heading-2-size); font-weight: var(--type-heading-2-weight); letter-spacing: var(--type-heading-2-tracking); line-height: var(--type-heading-2-leading); }
.t-heading-3 { font-size: var(--type-heading-3-size); font-weight: var(--type-heading-3-weight); letter-spacing: var(--type-heading-3-tracking); line-height: var(--type-heading-3-leading); }
.t-lead { font-size: var(--type-lead-size); font-weight: var(--type-lead-weight); letter-spacing: var(--type-lead-tracking); line-height: var(--type-lead-leading); }
.t-editorial { font-family: var(--font-editorial); font-size: var(--type-editorial-size); font-weight: var(--type-editorial-weight); letter-spacing: var(--type-editorial-tracking); line-height: var(--type-editorial-leading); }
.t-title { font-size: var(--type-title-size); font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); line-height: var(--type-title-leading); }
.t-body-lg { font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); letter-spacing: var(--type-body-lg-tracking); line-height: var(--type-body-lg-leading); }
.t-body { font-size: var(--type-body-size); font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking); line-height: var(--type-body-leading); }
.t-ui { font-size: var(--type-ui-size); font-weight: var(--type-ui-weight); letter-spacing: var(--type-ui-tracking); line-height: var(--type-ui-leading); }
.t-body-sm { font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking); line-height: var(--type-body-sm-leading); }
.t-label-lg, .t-label, .t-label-sm { font-family: var(--font-label); text-transform: uppercase; }
.t-label-lg { font-size: var(--type-label-lg-size); font-weight: var(--type-label-lg-weight); letter-spacing: var(--type-label-lg-tracking); line-height: var(--type-label-lg-leading); }
.t-label { font-size: var(--type-label-size); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); line-height: var(--type-label-leading); }
.t-label-sm { font-size: var(--type-label-sm-size); font-weight: var(--type-label-sm-weight); letter-spacing: var(--type-label-sm-tracking); line-height: var(--type-label-sm-leading); }
.t-mono { font-family: var(--font-mono); font-size: var(--type-mono-size); }
.t-mono-sm { font-family: var(--font-mono); font-size: var(--type-mono-sm-size); }
.t-mono-xs { font-family: var(--font-mono); font-size: var(--type-mono-xs-size); letter-spacing: var(--type-mono-xs-tracking); }
.t-hand { font-family: var(--font-hand); font-size: var(--type-hand-size); line-height: 1; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h); padding: 0 clamp(16px, 2.2vw, 32px);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--c-canvas);
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, backdrop-filter var(--dur-2);
}
.nav.on-light { color: var(--c-ink); }
.nav.scrolled { background: color-mix(in srgb, var(--c-ink) 84%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav.scrolled.on-light { background: color-mix(in srgb, var(--c-canvas) 92%, transparent); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.mark { width: 30px; height: 24px; }
.nav .mark { width: 40px; height: 32px; }   /* the nav shows the mark alone, one size up */
.mark-a { fill: currentColor; }
.mark-cursor { fill: var(--c-primary); animation: blink var(--blink) steps(1) infinite; }
.brand-word { font-weight: 600; font-size: var(--brand-size); letter-spacing: -0.03em; line-height: 1; }
.menu-btn { width: 40px; height: 40px; display: grid; place-content: center; gap: var(--space-2); position: relative; z-index: var(--z-menu-btn); }
.menu-btn i { display: block; width: 34px; height: 1.5px; background: currentColor; transition: transform var(--dur-2) var(--ease-out); }
.menu-open .menu-btn i:first-of-type { transform: translateY(4.75px) rotate(45deg); }
.menu-open .menu-btn i:last-of-type { transform: translateY(-4.75px) rotate(-45deg); }
.menu-open { overflow: hidden; }   /* the page behind the open menu stays still */
.menu-open .nav, .menu-open .nav.scrolled, .menu-open .nav.scrolled.on-light { color: var(--c-canvas); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu); background: var(--c-ink); color: var(--c-canvas);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-24) var(--gutter) var(--space-10); overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-3) var(--ease-out);
}
.menu[hidden] { display: flex; visibility: hidden; }
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu nav { display: flex; flex-direction: column; gap: var(--space-1); max-width: var(--maxw); width: 100%; margin: 0 auto; }
.menu nav a {
  text-decoration: none;
  font-size: var(--menu-link-size); font-weight: var(--type-display-lg-weight);
  letter-spacing: var(--type-display-lg-tracking); line-height: var(--type-display-lg-leading);
  display: flex; align-items: baseline; gap: var(--space-6);
  opacity: 0; transform: translateY(40px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), color var(--dur-1);
}
.menu nav a:hover { color: var(--c-primary); }
.menu-open .menu nav a { opacity: 1; transform: none; }
.menu-open .menu nav a:nth-child(2) { transition-delay: .06s; }
.menu-open .menu nav a:nth-child(3) { transition-delay: .12s; }
.menu-open .menu nav a:nth-child(4) { transition-delay: .18s; }
.menu-num { font-family: var(--font-mono); font-size: var(--type-mono-size); letter-spacing: 0; color: var(--text-3); }
.menu-foot { max-width: var(--maxw); width: 100%; margin: var(--space-12) auto 0; color: var(--text-3); font-size: var(--type-mono-size); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  height: var(--btn-height); padding: var(--btn-pad); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--type-ui-size); font-weight: var(--type-ui-weight);
  letter-spacing: var(--type-ui-tracking); line-height: var(--type-ui-leading);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn-ico { width: var(--btn-ico); height: var(--btn-ico); border-radius: var(--radius-sm); display: grid; place-items: center; transition: transform var(--dur-2) var(--ease-out); }
.btn-ico svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.btn:hover .btn-ico { transform: rotate(45deg); }
.btn-light { background: var(--c-canvas); color: var(--c-ink); }
.btn-light .btn-ico { background: var(--c-primary); color: var(--c-on-primary); }
.btn-light:hover { background: var(--c-surface-card); }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary .btn-ico { background: var(--c-ink); color: var(--c-canvas); }
.btn-primary:hover { background: var(--c-primary-active); }

/* ---------- HERO ---------- */
.hero {
  position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;   /* drag to orbit the city (hero.js §3); a vertical swipe still scrolls */
}
.hero.dragging { cursor: grabbing; }
.city { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 22% at 50% 47%, var(--c-ink-a62), transparent 70%),
    linear-gradient(to bottom, var(--c-ink-a85) 0%, transparent 16%, transparent 72%, var(--c-ink-a92) 100%);
}
.hero-center {
  position: absolute; z-index: 2; left: 0; right: 0; top: 47%;
  transform: translateY(-50%);
  display: grid; place-items: center; padding: 0 var(--gutter);
  pointer-events: none;
}
.hero-title {
  grid-area: 1 / 1; margin: 0; text-align: center;
  font-family: var(--font-serif); font-size: var(--type-hero-size); font-weight: var(--type-hero-weight);
  letter-spacing: var(--type-hero-tracking); line-height: var(--type-hero-leading);
  color: var(--text);
}
.hero-title-canvas { grid-area: 1 / 1; width: 100%; pointer-events: auto; image-rendering: pixelated; }   /* pixel art: never smoothed */
.hero.pixel-ready .hero-title { color: transparent; }  /* text stays for screen readers + selection */

.hero-hud {
  position: absolute; z-index: 2; left: 50%; top: var(--space-24); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--type-mono-xs-size); letter-spacing: var(--type-mono-xs-tracking); color: var(--text-3); white-space: nowrap;
}
.hero-hud b { color: var(--text); font-weight: 500; }
.hud-dot { width: 6px; height: 6px; background: var(--c-primary); animation: blink var(--blink) steps(1) infinite; }
.hud-cue { color: var(--c-primary); }

.hero-bottom {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(16px, 4.2vw, 60px) clamp(28px, 5vh, 52px);
  display: flex; align-items: center; gap: var(--space-10);
}
.hero-copy { flex: 0 1 auto; }
.hero-tag { margin: 0; font-size: var(--type-lead-size); font-weight: var(--type-lead-weight); letter-spacing: var(--type-lead-tracking); line-height: var(--type-lead-leading); }
.hero-sub { margin: var(--space-2) 0 0; font-size: var(--type-body-fluid-size); color: var(--text-2); letter-spacing: var(--type-body-fluid-tracking); max-width: 30em; text-wrap: balance; }
.hero-line { flex: 1 1 auto; height: 1px; position: relative; display: block; min-width: 40px; }
.hero-line i { position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(0); animation: line-grow var(--dur-5) var(--ease-out) 1.6s forwards; }
.hero-line i::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: var(--stroke-hairline) solid var(--text); border-right: var(--stroke-hairline) solid var(--text); transform: rotate(45deg); }

.reveal-up { opacity: 0; transform: translateY(18px); animation: reveal-up var(--dur-4) var(--ease-out) forwards; }
.hero-copy.reveal-up { animation-delay: 1.3s; }
.btn.reveal-up { animation-delay: 1.75s; }

/* ---------- SECTION HEADS ---------- */
.eyebrow {
  margin: 0 0 var(--space-8); font-family: var(--font-label);
  font-size: var(--type-label-lg-size); font-weight: var(--type-label-lg-weight);
  letter-spacing: var(--type-label-lg-tracking); line-height: var(--type-label-lg-leading);
  text-transform: uppercase; color: var(--text-2);
}
.dark .eyebrow { color: var(--text-3); }
.approach-title, .section-title {
  margin: 0; font-size: var(--type-display-lg-size); font-weight: var(--type-display-lg-weight);
  letter-spacing: var(--type-display-lg-tracking); line-height: var(--type-display-lg-leading);
  text-wrap: balance;   /* no word left alone on the last line */
}
.pixel-badge { width: 64px; height: 54px; background: var(--c-primary); display: grid; place-items: center; margin-top: var(--space-12); border-radius: var(--radius-xs); }
.pixel-badge svg { width: 100%; height: 100%; fill: var(--c-on-primary); }
.pixel-badge .blink { animation: blink var(--blink) steps(1) infinite; }

/* ---------- APPROACH ---------- */
.approach { padding: var(--section-y) 0; }
.approach-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.approach-left { align-self: stretch; }
.approach-sticky { position: sticky; top: 120px; }

.approach-cards { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.card {
  position: relative; background: transparent; border: var(--stroke-hairline) solid var(--line-bold);
  border-radius: var(--radius-lg); padding: var(--card-pad);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 15vw, 200px); grid-template-areas: "title title" "text art";
  gap: var(--space-5) var(--space-6); align-items: center;   /* the title gets the full width; text and art share the row below */
  transition: background-color .45s ease, border-color .45s ease, color .45s ease,
              transform .7s cubic-bezier(.2, 0, .1, 1), opacity .6s cubic-bezier(.2, 0, .1, 1);
  overflow: hidden;
}
.card-title { grid-area: title; margin: 0; font-size: var(--type-heading-1-size); font-weight: var(--type-heading-1-weight); letter-spacing: var(--type-heading-1-tracking); line-height: var(--type-heading-1-leading); }
.card-text { grid-area: text; }
.card .art { grid-area: art; }
.card-body { margin: 0; color: var(--text-2); font-size: var(--type-body-lg-size); letter-spacing: var(--type-body-lg-tracking); line-height: var(--type-body-lg-leading); max-width: 30em; text-wrap: pretty; }   /* no word left alone on the last line */
.card-more {
  margin-top: var(--space-6); display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--type-ui-size); font-weight: var(--type-ui-weight); letter-spacing: var(--type-ui-tracking); line-height: var(--type-ui-leading);
  color: var(--text);
}
.card-more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: var(--stroke-art); transition: transform var(--dur-2) var(--ease-out); }
.card-more:hover { color: var(--c-primary); }
.card-more[aria-expanded="true"] svg { transform: rotate(90deg); }
.card-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.card-detail > ul { overflow: hidden; margin: 0; padding: 0; list-style: none; }
.card-detail.open { grid-template-rows: 1fr; }
.card-detail li { padding: var(--space-3) 0; border-top: var(--stroke-hairline) solid var(--line-soft); color: var(--text-2); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-leading); display: flex; gap: var(--space-3); text-wrap: balance; }   /* short items: two even lines, never one word alone */
.card-detail li:first-child { margin-top: var(--space-5); }
.card-detail li .mono { color: var(--c-primary); }

/* the active card: orange flood, ink text, line art filled with a halftone print (main.js picks it) */
.card.is-active { background: var(--c-primary); border-color: var(--c-primary); }
.card-title, .card-body, .card-more, .card-detail li { transition: color .45s ease, border-color .45s ease; }
.card.is-active .card-title,
.card.is-active .card-body,
.card.is-active .card-more,
.card.is-active .card-detail li,
.card.is-active .card-detail li .mono { color: var(--c-ink); }
.card.is-active .card-detail li { border-color: var(--c-primary-active); }
.card.rise { opacity: 0; transform: translateY(80px); }   /* cards rise 80px as they come in */
.card.rise.in { opacity: 1; transform: none; }
/* sticky top / bottom fades over the card column */
.cards-fade { position: sticky; z-index: 2; height: 150px; pointer-events: none; }
.cards-fade.top { top: 0; margin-bottom: calc(-150px - var(--space-8)); background: linear-gradient(var(--surface), transparent); }
.cards-fade.bottom { bottom: 0; margin-top: calc(-150px - var(--space-8)); background: linear-gradient(transparent, var(--surface)); }

/* line art: single stroke, ink, one orange detail per drawing */
.art { width: 100%; height: auto; fill: none; stroke: var(--text); stroke-width: var(--stroke-art); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.art .hot { stroke: var(--c-primary); }
.art .faint { stroke: var(--line-strong); }
.art { transition: stroke .45s ease; }
.art circle, .art path { fill: url(#halftone); fill-opacity: 0; transition: fill-opacity .45s ease, stroke .45s ease; }
.card.is-active .art { stroke: var(--c-ink); }
.card.is-active .art circle, .card.is-active .art path { fill-opacity: 1; }
.card.is-active .art .hot { stroke: var(--c-ink); fill: var(--c-ink); }
.card.is-active .art .faint { stroke: var(--c-primary-active); }
.svg-defs { position: absolute; width: 0; height: 0; }   /* the #halftone pattern, first thing in <body> */
.halftone-dot { fill: var(--c-ink); }
.art-compass .needle { transform-origin: 100px 100px; transition: transform var(--dur-5) var(--ease-out); }
.card:hover .art-compass .needle { transform: rotate(135deg); }
.art-prism .rays path { transition: transform var(--dur-3) var(--ease-out), fill-opacity .45s ease, stroke .45s ease; transform-origin: 128px 100px; }
.card:hover .art-prism .rays path:nth-child(1) { transform: rotate(-4deg); }
.card:hover .art-prism .rays path:nth-child(4) { transform: rotate(4deg); }
.art-gears .gear-a { transform: translate(84px, 90px); }
.art-gears .gear-b { transform: translate(144px, 128px); }
.art-gears .gear > * { transform-origin: 0 0; }
.card:hover .art-gears .gear-a > * { animation: spin 6s linear infinite; }
.card:hover .art-gears .gear-b > * { animation: spin 4s linear infinite reverse; }

/* word stagger (split by JS) */
.stagger-words .w-mask { display: inline-block; vertical-align: top; }   /* no clipping: a word is never cut while it moves */
.stagger-words .w { display: inline-block; will-change: transform; }

/* ---------- INTERLUDE ---------- */
.interlude { position: relative; overflow: hidden; padding: clamp(80px, 9vw, 120px) 0 var(--section-y-sm); }
.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 65% 45%, var(--c-ink) 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 45%, var(--c-ink) 20%, transparent 75%);
  animation: ambient-scan 9s ease-in-out infinite alternate;
}
.interlude-inner { position: relative; }

/* blueprint: type guides measured from the real headline grow across the graph paper,
   the words are outlined, then filled; the pixel pointer rides the fill (main.js) */
.blueprint { position: relative; padding: var(--space-16) 0 var(--space-12); text-align: center; }
.bp-guides { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; pointer-events: none; }
.bp-g {
  position: absolute; left: 0; right: 0; height: 1px; margin-top: -.5px; background: var(--c-primary); opacity: .5;
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) calc(var(--d) * 70ms), opacity var(--dur-4);
}
.bp-g-x { height: 0; background: none; border-top: var(--stroke-hairline) dashed var(--c-primary); }
.blueprint.guides .bp-g { transform: none; }
.blueprint.settled .bp-g { opacity: .22; }
.bp-gl {
  position: absolute; left: var(--gutter); transform: translateY(-100%); padding-bottom: 3px;
  font-family: var(--font-mono); font-size: var(--type-mono-xs-size); font-weight: 400; letter-spacing: var(--type-mono-xs-tracking); text-transform: uppercase;
  color: var(--c-primary); opacity: 0; transition: opacity var(--dur-3) calc(var(--d) * 70ms + .3s);
}
.blueprint.guides .bp-gl { opacity: .8; }
.blueprint.settled .bp-gl { opacity: .45; }
.bp-v { position: absolute; top: 0; bottom: 0; width: 0; border-left: var(--stroke-hairline) dashed var(--c-primary); opacity: 0; transition: opacity var(--dur-3) .5s; }
.blueprint.guides .bp-v { opacity: .35; }
.blueprint.settled .bp-v { opacity: .15; }
.bp-text { position: relative; margin: 0; }
.bp-line {
  position: relative; display: block; width: max-content; margin: 0 auto; white-space: nowrap;
  font-size: var(--type-display-xl-size); font-weight: var(--type-display-xl-weight); letter-spacing: var(--type-display-xl-tracking); line-height: var(--type-display-xl-leading);
}
.bp-ink { display: inline-block; color: var(--text); clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1); }
.bp-b .bp-ink { color: var(--c-primary); }
.bp-base { display: inline-block; width: 0; height: 0; }   /* a zero-size probe: its top is the baseline */
.bp-out {
  position: absolute; left: 0; top: 0; color: transparent; -webkit-text-stroke: 1px var(--c-primary);
  clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1);
}
.bp-b .bp-ink, .bp-b .bp-out { transition-delay: .25s; }
.blueprint.drawn .bp-out { clip-path: inset(0 0 0 0); }
.blueprint.filled .bp-ink { clip-path: inset(0 0 0 0); }
.blueprint.filled .bp-out { clip-path: inset(0 0 0 100%); }   /* the fill eats the outline as it passes */
.bp-spec {
  margin: var(--space-8) 0 0; font-family: var(--font-mono); font-size: var(--type-mono-xs-size); letter-spacing: var(--type-mono-xs-tracking); text-transform: uppercase;
  color: var(--text-3); opacity: 0; transition: opacity var(--dur-3);
}
.blueprint.settled .bp-spec { opacity: 1; }
.bp-ptr { position: absolute; left: 0; top: 0; width: 30px; height: auto; z-index: 3; pointer-events: none; opacity: 0; }
.bp-ptr .po { fill: var(--c-canvas); }
.bp-ptr .pi { fill: var(--c-primary); }

.tools {
  position: relative; margin-top: clamp(64px, 9vw, 120px);
  display: flex; align-items: center; gap: var(--space-8) var(--space-12); flex-wrap: wrap;
  padding-top: var(--space-8); padding-bottom: var(--space-8);
}
.tools::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: var(--line); }
.tools-label { margin: 0; font-size: var(--type-body-lg-size); letter-spacing: var(--type-body-lg-tracking); line-height: var(--type-body-lg-leading); color: var(--text-2); }
.tools-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); }
.tools-list li { font-size: var(--type-title-size); font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); line-height: var(--type-title-leading); color: var(--text-3); transition: color var(--dur-1); }
.tools-list li:hover { color: var(--text); }

/* ---------- TICKER ---------- */
.ticker-wrap { position: relative; z-index: 4; height: 150px; margin: -40px 0 -60px; pointer-events: none; overflow: hidden; }
.ticker {
  position: absolute; left: -5%; right: -5%; top: 46px;
  background: var(--c-canvas); color: var(--c-ink);
  border-top: var(--stroke-hairline) solid var(--c-ink); border-bottom: var(--stroke-hairline) solid var(--c-ink);
  padding: var(--space-4) 0; overflow: hidden;
}
.ticker-track {
  display: flex; align-items: center; gap: var(--space-12); width: max-content; white-space: nowrap;
  font-family: var(--font-sans); font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight);
  letter-spacing: var(--type-body-lg-tracking); line-height: var(--type-body-lg-leading);
  animation: marquee 38s linear infinite;   /* main.js speeds it up while you scroll */
}
.key-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.key-item kbd {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 var(--space-2);
  border: var(--stroke-hairline) solid var(--c-ink); border-bottom-width: 3px; border-radius: var(--radius-sm); background: var(--c-surface-card);
  font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--c-ink);
}
.key-item em { font-style: normal; margin-left: var(--space-2); }

/* ---------- FOUNDERS ---------- */
.founders { padding: var(--section-y-after-ticker) 0 var(--section-y); overflow-x: hidden; overflow-x: clip; }   /* names slide in from the side */
.founders-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 80px); }
.founders-lede { margin: var(--space-6) 0 0; color: var(--text-2); font-size: var(--type-body-lg-size); letter-spacing: var(--type-body-lg-tracking); line-height: var(--type-body-lg-leading); max-width: 32em; }
.founder-list { display: flex; flex-direction: column; }
.founder-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center;
  padding: var(--space-16) 0; border-top: var(--stroke-hairline) solid var(--line);
}
.founder-row:last-child { border-bottom: var(--stroke-hairline) solid var(--line); }
.founder-row.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.founder-row.flip .founder-media { order: 2; }
.founder-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); border: var(--stroke-hairline) solid var(--line); }
.founder-pan { position: absolute; inset: -8% 0; }   /* taller than the frame: it drifts with scroll */
.founder-pan canvas { width: 100%; height: 100%; }
.founder-photo { width: 100%; height: 100%; object-fit: cover; }   /* a real photo in place of the dot portrait */
.founder-media.has-photo { background: var(--c-ink); }   /* the photo comes out of the dark, not out of the cream */
.founder-role {
  margin: 0; font-family: var(--font-label); font-size: var(--type-label-size); font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking); line-height: var(--type-label-leading); text-transform: uppercase; color: var(--c-primary);
}
.founder-role span { white-space: nowrap; }   /* the area ("AI & Engineering") wraps as one piece */
.founder-name {
  margin: var(--space-3) 0 0; display: flex; flex-direction: column;
  font-size: var(--type-display-xl-size); font-weight: var(--type-display-xl-weight);
  letter-spacing: var(--type-display-xl-tracking); line-height: var(--type-display-xl-leading);
}
.founder-name-line { display: block; }
.founder-name-line + .founder-name-line { color: var(--text-2); }
.founder-bio { margin: var(--space-6) 0 0; color: var(--text-2); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-leading); max-width: 32em; }
.badges { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badges li {
  background: var(--surface-strong); color: var(--text); border-radius: var(--radius-pill); padding: var(--badge-pad);
  font-family: var(--font-label); font-size: var(--type-label-sm-size); font-weight: var(--type-label-sm-weight);
  letter-spacing: var(--type-label-sm-tracking); line-height: var(--type-label-sm-leading); text-transform: uppercase;
}
.founder-foot { padding-top: var(--space-8); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.signature { font-family: var(--font-hand); font-size: var(--type-hand-size); line-height: 1; color: var(--text); transform: rotate(-3deg); }

/* ---------- CTA ---------- */
.cta { padding: var(--section-y) 0; text-align: center; }
.cta-inner { display: flex; flex-direction: column; align-items: center; }
.pixel-badge-lg { width: 76px; height: 64px; margin: 0 0 var(--space-10); }
.cta-title { margin: 0 auto; text-wrap: balance; font-size: var(--type-display-xl-size); font-weight: var(--type-display-xl-weight); letter-spacing: var(--type-display-xl-tracking); line-height: var(--type-display-xl-leading); }
.cta-line { display: block; text-wrap: balance; }
.cta-title .fw { color: var(--c-body); transition: color .15s linear; }   /* unlit word */
.cta-title .fw.on { color: var(--text); }
.cta .btn { margin-top: var(--space-12); }
.cta-mail { margin: var(--space-5) 0 0; font-size: var(--type-body-sm-size); color: var(--text-3); }   /* the address in plain sight, for people without a mail app */
.cta-mail a { color: var(--text-2); text-underline-offset: 3px; }
.cta-mail a:hover { color: var(--c-primary); }

/* ---------- FOOTER ---------- */
.footer { border-top: var(--stroke-hairline) solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding-top: var(--space-10); padding-bottom: var(--space-10); }
.footer .mark { width: 25px; height: 20px; }
.footer .brand-word { font-size: var(--brand-size-footer); }
.footer-copy { margin: 0; font-size: var(--type-body-sm-size); color: var(--text-3); }
.footer-links { display: flex; gap: var(--space-6); font-size: var(--type-body-sm-size); }
.footer-links a { text-decoration: none; color: var(--text-2); }
.footer-links a:hover { color: var(--c-primary); }

/* ---------- KEYFRAMES ---------- */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes reveal-up { to { opacity: 1; transform: none; } }
@keyframes line-grow { to { transform: scaleX(1); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ambient-scan { 0% { opacity: .42; transform: translate3d(-2%, -1%, 0) scale(1); } 100% { opacity: .74; transform: translate3d(2%, 1%, 0) scale(1.06); } }

/* ---------- RESPONSIVE (900px = --bp-md, 640px = --bp-sm) ---------- */
@media (max-width: 900px) {
  .approach-grid { grid-template-columns: 1fr; }
  .approach-sticky { position: static; }
  .cards-fade { display: none; }   /* on one column the sticky fades sit over the cards */
}
@media (max-width: 640px) {
  .nav { height: var(--nav-h-mobile); }
  .hero-bottom { flex-wrap: wrap; gap: var(--space-5); }
  .hero-line { display: none; }
  .hero { min-height: 560px; }
  .hero-hud { top: 76px; }
  .hero-center { top: 30%; }
  .hero-title { font-size: var(--type-hero-size-mobile); }
  .card { grid-template-columns: 1fr; grid-template-areas: "art" "title" "text"; }
  .card .art { width: 110px; }
  .ticker-wrap { height: 120px; }
  .ticker { top: 36px; }
  .bp-gl-x, .bp-gl-base { display: none; }   /* only "Cap height" fits beside the type on a phone */
  .bp-ptr { width: 22px; }
  .founder-row, .founder-row.flip { grid-template-columns: 1fr; padding: var(--space-12) 0; }
  .founder-row.flip .founder-media { order: 0; }
  .founder-media { max-width: 420px; }
  .bp-line { font-size: var(--type-heading-1-size); }   /* each blueprint line stays one unbroken line */
}
@media (max-width: 360px) {
  .bp-line { font-size: var(--type-heading-2-size); }
}
/* phones turned sideways: the hero fits the screen and is laid out like the desktop one (hero.js sizes the city to match) */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 0; }
  .hero-center { top: 47%; }
  .hero-title { font-size: var(--type-hero-size); }
  .hero-bottom { flex-wrap: nowrap; padding-bottom: var(--space-5); }
}

@media (max-height: 520px) {
  .menu { padding-top: var(--space-16); padding-bottom: var(--space-6); }
  .menu nav a { font-size: var(--type-heading-1-size); }
  .menu-foot { margin-top: var(--space-6); }
}

/* touch screens: small links and buttons get a tap area of 44px or more; how they look does not change */
@media (pointer: coarse) {
  .card-more, .footer-links a, .brand, .cta-mail a { position: relative; }
  .card-more::after, .footer-links a::after, .brand::after, .cta-mail a::after { content: ""; position: absolute; inset: -12px -8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal-up { opacity: 1; transform: none; }
  .hero-line i { transform: none; }
  .card.rise { opacity: 1; transform: none; }
}