:root {
  --bg: #f3f1ea;
  --paper: #ece9df;
  --ink: #0b0b0c;
  --muted: #5b5a55;         /* body-copy grey on light — WCAG AA on --bg and --paper */
  --ink-muted: #9a9a94;     /* secondary text on dark surfaces — WCAG AA on --ink */
  --line: #c9c6ba;          /* hairline / decorative */
  --line-strong: #b0ac9c;   /* functional borders that must be perceivable */
  --accent: #2457ff;
  --accent-soft: #dce4ff;
  --field-line: #6a6a6e;    /* form control borders on dark — WCAG 1.4.11 (3.65:1 on --ink) */
  --error: #ff9b90;         /* form error text/border on dark */
  --focus: #2457ff;
  --max: 1440px;
  --pad: clamp(20px, 4vw, 64px);
  --radius: 18px;
  --ease: cubic-bezier(.22,1,.36,1);
  /* ---- Motion system (homepage scroll story) ---- */
  --motion-fast: 220ms;
  --motion-medium: 460ms;
  --motion-slow: 820ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  background: var(--bg);
  /* clip (not hidden) prevents horizontal scrollbars WITHOUT turning the element
     into a scroll container — that side effect (on <body>) broke fragment
     navigation. `hidden` is a fallback for browsers without `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  /* keep in-page anchor targets clear of the fixed header */
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Helvetica Neue", Arial, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[dir="rtl"] body { font-family: Tahoma, Arial, sans-serif; }
html.menu-open, body.menu-open { overflow: hidden; }
html.menu-open .site-header { background:var(--ink); color:var(--bg); }
html.menu-open .site-header :focus-visible { outline-color:var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--accent); color: white; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Focus ---------- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.needs-section :focus-visible,
.approach-section :focus-visible,
.contact-section :focus-visible,
.proof-strip :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible,
.cap-card-accent :focus-visible { outline-color: #ffffff; }
main:focus { outline: none; }

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  transform: translateY(-140%);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
html[dir="rtl"] .skip-link { left: auto; right: 8px; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}
.section-shell { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--pad); }
.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; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--pad);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, height .3s ease;
}
.site-header.scrolled { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(18px); border-color: var(--line); height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 760; letter-spacing: -.035em; width: max-content; }
.brand-mark { width: 30px; height: 30px; display: inline-grid; place-items: center; background: var(--ink); color: var(--bg); border-radius: 8px; font-size: 14px; font-weight: 800; }
.desktop-nav { display: flex; gap: clamp(20px, 3vw, 48px); font-size: 14px; }
.desktop-nav a, .footer-links a { position: relative; }
.desktop-nav a::after, .footer-links a::after { content:""; position:absolute; inset:auto 0 -4px 0; height:1px; background: currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
html[dir="rtl"] .desktop-nav a::after, html[dir="rtl"] .footer-links a::after { transform-origin:right; }
.desktop-nav a:hover::after, .footer-links a:hover::after { transform:scaleX(1); }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.lang-switch { font-size:13px; padding:8px 8px; display:inline-flex; align-items:center; min-height:24px; border-bottom:1px solid transparent; letter-spacing:.04em; }
.lang-switch:hover { border-bottom-color: currentColor; }
.header-cta { font-size:14px; border-bottom:1px solid var(--ink); padding-bottom:2px; }
.menu-toggle { display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative; }
.menu-toggle span:not(.sr-only) { position:absolute; width:20px; height:1px; background:currentColor; left:12px; transition:.3s var(--ease); }
.menu-toggle span:first-child { top:18px; }
.menu-toggle span:nth-child(2) { top:25px; }
.menu-toggle.active span:first-child { transform:translateY(3.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { transform:translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position:fixed; inset:0; z-index:45; background:var(--ink); color:var(--bg); display:none; padding:110px var(--pad) 40px; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu nav { display:flex; flex-direction:column; gap:0; }
.mobile-menu a { font-size:clamp(36px,9vw,70px); border-bottom:1px solid #2b2b2d; padding:14px 0; letter-spacing:-.05em; }

.hero { min-height: 100svh; padding-top: 128px; padding-bottom: 34px; display:flex; flex-direction:column; justify-content:space-between; }
.hero-kicker { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--ink); padding-top:12px; }
.eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.availability { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.availability-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent); }
.hero-grid { display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(290px, .45fr); gap:5vw; align-items:end; padding-block: clamp(52px, 9vh, 120px); }
.hero-copy h1, .hero-copy .hero-line-2 { margin:0; font-size:clamp(58px, 8.6vw, 138px); font-weight:540; line-height:.88; letter-spacing:-.072em; }
html[dir="rtl"] .hero-copy h1, html[dir="rtl"] .hero-copy .hero-line-2 { letter-spacing:-.04em; line-height:1.02; font-weight:700; }
.hero-copy .hero-line-2 { margin-top:.16em; }
.hero-copy em, .needs-intro em, .section-heading em, .ai-title-wrap em, .approach-heading em, .principles-heading em, .contact-copy em { font-family: Georgia, "Times New Roman", serif; font-weight:400; color:var(--accent); }
html[dir="rtl"] .hero-copy em, html[dir="rtl"] .needs-intro em, html[dir="rtl"] .section-heading em, html[dir="rtl"] .ai-title-wrap em, html[dir="rtl"] .approach-heading em, html[dir="rtl"] .principles-heading em, html[dir="rtl"] .contact-copy em { font-family: Tahoma, Arial, sans-serif; font-weight:700; }
.hero-side { align-self:end; padding-bottom:.75vw; }
.hero-side p { margin:0 0 28px; font-size:clamp(17px,1.35vw,22px); line-height:1.55; letter-spacing:-.025em; }
.hero-actions { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:0 24px; border-radius:999px; font-size:14px; letter-spacing:.005em; border:1px solid var(--ink); cursor:pointer; transition:transform .2s var(--ease), background .25s ease, color .25s ease, border-color .25s ease; }
@media (hover:hover) { .button:hover { transform:translateY(-2px); } }
.button:active { transform:translateY(0); }
.button-primary { background:var(--ink); color:var(--bg); }
.button-primary:hover { background:var(--accent); border-color:var(--accent); color:white; }
.button-wa { background:var(--accent); border-color:var(--accent); color:#fff; }
.button-wa:hover { background:color-mix(in srgb, var(--accent) 86%, #000); border-color:color-mix(in srgb, var(--accent) 86%, #000); }
.button:disabled { opacity:.55; cursor:default; transform:none; }

/* Mobile conversion bar — shown after the hero, hidden again at Contact (script.js) */
.mobile-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; gap:8px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); visibility:hidden;
  transition:transform .3s var(--ease), visibility 0s linear .3s;
}
.mobile-cta.is-shown { transform:translateY(0); visibility:visible; transition:transform .3s var(--ease), visibility 0s; }
.mobile-cta .button { flex:1; min-height:46px; width:auto; padding:0 14px; font-size:13px; }
@media (min-width:761px) { .mobile-cta { display:none !important; } }
.text-link { font-size:14px; border-bottom:1px solid currentColor; padding-bottom:3px; }
.text-link span[aria-hidden] { display:inline-block; transition:transform .2s var(--ease); }
@media (hover:hover) { .text-link:hover span[aria-hidden] { transform:translateX(3px); } }
html[dir="rtl"] .text-link span[aria-hidden] { transform:scaleX(-1); }
html[dir="rtl"] .text-link:hover span[aria-hidden] { transform:scaleX(-1) translateX(3px); }
.hero-system { display:grid; grid-template-columns:repeat(4, 1fr); position:relative; padding-top:18px; }
.system-line { position:absolute; top:0; inset-inline:0; height:1px; background:var(--line); overflow:hidden; }
.system-line::before { content:""; position:absolute; height:1px; background:var(--accent); width:25%; left:0; animation:scan 5s var(--ease) infinite alternate; }
html[dir="rtl"] .system-line::before { left:auto; right:0; animation-name:scan-rtl; }
.system-node { display:flex; align-items:baseline; gap:10px; padding-inline-end:20px; }
.system-node span { font-size:10px; color:var(--muted); }
.system-node strong { font-size:13px; font-weight:600; }
@keyframes scan { from{ transform:translateX(0); } to{ transform:translateX(300%); } }
@keyframes scan-rtl { from{ transform:translateX(0); } to{ transform:translateX(-300%); } }

.proof-strip { overflow:hidden; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--ink); color:var(--bg); }
.marquee-track { display:flex; align-items:center; width:max-content; gap:26px; padding:17px 0; animation:marquee 24s linear infinite; font-size:14px; text-transform:uppercase; letter-spacing:.09em; }
.marquee-track i { color:var(--accent); font-style:normal; font-size:18px; }
@keyframes marquee { to { transform:translateX(-50%); } }
html[dir="rtl"] .marquee-track { animation-name:marquee-rtl; }
@keyframes marquee-rtl { to { transform:translateX(50%); } }

.work-section, .capabilities-section, .ai-section { padding-top:clamp(110px,14vw,210px); padding-bottom:clamp(100px,12vw,180px); }
.section-heading { display:grid; grid-template-columns:80px minmax(0, 1fr) minmax(280px, .38fr); gap:24px; align-items:start; margin-bottom:64px; }
.section-index { font-size:11px; letter-spacing:.12em; padding-top:6px; }
.section-heading h2, .needs-intro h2, .ai-title-wrap h2, .approach-heading h2, .principles-heading h2, .contact-copy h2 { margin:14px 0 0; font-size:clamp(44px,5.8vw,92px); line-height:.96; letter-spacing:-.055em; font-weight:560; text-wrap:balance; }
html[dir="rtl"] .section-heading h2, html[dir="rtl"] .needs-intro h2, html[dir="rtl"] .ai-title-wrap h2, html[dir="rtl"] .approach-heading h2, html[dir="rtl"] .principles-heading h2, html[dir="rtl"] .contact-copy h2 { line-height:1.12; letter-spacing:-.035em; font-weight:700; }
.section-heading > p { margin:28px 0 0; font-size:16px; line-height:1.55; color:var(--muted); max-width:46ch; }
.projects-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:22px; align-items:start; }
.project-card { min-width:0; }
.project-visual { border-radius:var(--radius); overflow:hidden; position:relative; aspect-ratio:1.45/1; background:#d9d7ce; }
.project-secondary .project-visual { aspect-ratio:.92/1; }
.project-visual-a { background:#c9b6ff; color:#171719; }
.project-visual-b { background:#0c291c; color:#d9ff6a; }
/* Real capture drops in here (see the comment in index.html) */
.project-visual-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.project-visual-fallback { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(20px,3vw,40px); }
.project-visual-mark { font-family:Georgia,"Times New Roman",serif; font-size:clamp(30px,4vw,58px); line-height:.95; letter-spacing:-.04em; }
.project-visual-tag { align-self:flex-start; font-size:10px; text-transform:uppercase; letter-spacing:.14em; border:1px solid currentColor; border-radius:999px; padding:6px 11px; opacity:.85; }
.project-meta { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:18px; }
.project-secondary .project-meta { grid-template-columns:1fr; }
.project-number { font-size:10px; color:var(--muted); }
.project-meta h3 { font-size:clamp(23px,2vw,34px); line-height:1; letter-spacing:-.045em; margin:8px 0 0; }
.project-meta p { margin:0 0 8px; font-size:14px; }
.project-meta div:last-child > span { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }

.needs-section { background:var(--ink); color:var(--bg); padding-block:clamp(100px,13vw,180px); }
.needs-intro { display:grid; grid-template-columns:80px 1fr; gap:24px; margin-bottom:clamp(56px,7vw,96px); }
.needs-intro em { color:#8ca8ff; }
.needs-intro h2 { max-width:1150px; }
.needs-hint { margin:22px 0 0; color:var(--ink-muted); font-size:14px; max-width:520px; }
.needs-list { border-top:1px solid #323236; }
.need-row { position:relative; display:grid; grid-template-columns:80px minmax(220px,.9fr) 1fr 32px; gap:24px; align-items:center; border-bottom:1px solid #323236; padding:30px 0; transition:padding .3s var(--ease), background .2s ease; }
.need-number { font-size:10px; color:var(--ink-muted); }
.need-row h3 { margin:0; font-size:clamp(28px,3.2vw,50px); font-weight:500; letter-spacing:-.05em; }
.need-link { display:inline-block; }
.need-link::after { content:""; position:absolute; inset:0; } /* stretch link over the whole row */
.need-link:focus-visible { outline:2px solid #fff; outline-offset:4px; border-radius:2px; }
.need-row p { margin:0; max-width:560px; color:var(--ink-muted); }
.need-cta { justify-self:end; font-size:22px; color:var(--ink-muted); transition:transform .25s var(--ease), color .25s ease; }
html[dir="rtl"] .need-cta { display:inline-block; transform:scaleX(-1); }
@media (hover:hover) {
  .need-row:hover { background:#161618; padding-inline:16px; }
  .need-row:hover .need-cta { color:#9db3ff; transform:translateX(4px); }
  html[dir="rtl"] .need-row:hover .need-cta { transform:scaleX(-1) translateX(4px); }
}
.need-link:focus-visible ~ .need-cta,
.need-row:focus-within .need-cta { color:#9db3ff; }

.cap-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
html[dir="rtl"] .cap-grid { border-left:0; border-right:1px solid var(--ink); }
.cap-card { min-height:390px; padding:30px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); display:flex; flex-direction:column; }
html[dir="rtl"] .cap-card { border-right:0; border-left:1px solid var(--ink); }
.cap-card-accent { background:var(--accent); color:white; }
.cap-index { font-size:10px; opacity:.7; }
.cap-card h3 { margin:auto 0 18px; font-size:clamp(34px,3.8vw,58px); line-height:.92; letter-spacing:-.055em; font-weight:550; }
.cap-card p { max-width:600px; margin:0 0 26px; font-size:15px; color:var(--muted); }
.cap-card-accent p { color:rgba(255,255,255,.92); }
.cap-tags { display:flex; flex-wrap:wrap; gap:7px; }
.cap-tags span { border:1px solid currentColor; border-radius:999px; padding:7px 10px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.section-cta { margin:clamp(36px,5vw,56px) 0 0; }
.section-cta .text-link { font-size:15px; }

/* ---------- Nest systems map: BUSINESS NEED → NEST → RESPONSE ---------- */
/* Assembles on scroll (one IntersectionObserver trigger + staggered CSS).
   Base state below is the finished diagram, so no-JS and reduced-motion
   users get the full picture with no movement. */
.system-map {
  margin:0 auto clamp(48px,7vw,90px);
  max-width:840px; width:100%;
  display:grid;
  grid-template-columns:minmax(76px,max-content) 150px minmax(150px,1fr);
  grid-template-areas:"need core nodes" "cap cap cap";
  column-gap:clamp(20px,5vw,60px);
  row-gap:clamp(26px,4vw,40px);
  align-items:center;
  position:relative;
}
.map-need { grid-area:need; display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.map-need-label { font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.map-need-arrow { color:var(--accent); font-size:22px; line-height:1; }
html[dir="rtl"] .map-need-arrow { transform:scaleX(-1); }

.map-core { grid-area:core; justify-self:center; width:150px; height:150px; border-radius:50%; background:var(--ink); color:white; display:grid; place-content:center; justify-items:center; position:relative; z-index:2; }
.map-core strong { font-size:28px; letter-spacing:-.06em; }
.map-core > span { font-size:8px; letter-spacing:.18em; opacity:.7; margin-top:5px; }
.core-orbit { position:absolute; border:1px solid var(--accent); border-radius:50%; animation:orbit 12s linear infinite; }
.orbit-a { inset:-30px; }
.orbit-b { inset:-68px; opacity:.28; animation-duration:18s; animation-direction:reverse; }
.core-orbit::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent); top:50%; left:-4px; }
@keyframes orbit { to { transform:rotate(360deg); } }

.map-nodes { grid-area:nodes; position:relative; list-style:none; margin:0; padding:0 0 0 34px; display:flex; flex-direction:column; gap:12px; }
.map-nodes::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:1px; background:var(--accent); transform-origin:top; }
.map-nodes::after { content:""; position:absolute; left:0; top:12px; width:clamp(40px,7vw,88px); height:1px; background:var(--accent); transform:translateX(-100%); transform-origin:right; }
.map-node { position:relative; border:1px solid var(--line-strong); background:var(--bg); border-radius:9px; padding:12px 16px; font-size:14px; }
.map-node::before { content:""; position:absolute; left:-34px; top:50%; width:30px; height:1px; background:var(--accent); }
.map-node::after { content:""; position:absolute; left:-36px; top:calc(50% - 3px); width:6px; height:6px; border-radius:50%; background:var(--accent); }
@media (min-width:761px) {
  html[dir="rtl"] .map-nodes { padding:0 34px 0 0; }
  html[dir="rtl"] .map-nodes::before { left:auto; right:0; }
  html[dir="rtl"] .map-nodes::after { left:auto; right:0; transform:translateX(100%); transform-origin:left; }
  html[dir="rtl"] .map-node::before { left:auto; right:-34px; }
  html[dir="rtl"] .map-node::after { left:auto; right:-36px; }
}

.map-caption { grid-area:cap; margin:0; text-align:center; font-size:14px; color:var(--muted); }

/* Assembly: the pre-assemble state is gated by :not(.assemble); adding the
   .assemble class simply drops those overrides and the elements transition
   back to their natural (finished-diagram) state. One class toggle, no
   specificity race, and no movement at all under reduced motion / no-JS. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-system-map] .map-core { transition:opacity .45s ease, transform .45s var(--ease); }
  html.js [data-system-map] .map-need { transition:opacity .4s ease .12s, transform .4s var(--ease) .12s; }
  html.js [data-system-map] .map-node { transition:opacity .4s ease, transform .4s var(--ease); transition-delay:calc(.42s + var(--i,0) * .12s); }
  html.js [data-system-map] .map-nodes::before { transition:transform .5s var(--ease) .24s; }
  html.js [data-system-map] .map-nodes::after { transition:transform .35s var(--ease) .18s; }
  html.js [data-system-map] .map-node::before,
  html.js [data-system-map] .map-node::after { transition:opacity .3s ease; transition-delay:calc(.42s + var(--i,0) * .12s); }

  html.js [data-system-map]:not(.assemble) .map-core { opacity:0; transform:scale(.9); }
  html.js [data-system-map]:not(.assemble) .map-need { opacity:0; transform:translateX(-8px); }
  html.js [data-system-map]:not(.assemble) .map-node { opacity:0; transform:translateX(-8px); }
  html.js [data-system-map]:not(.assemble) .map-nodes::before { transform:scaleY(0); }
  html.js [data-system-map]:not(.assemble) .map-nodes::after { transform:translateX(-100%) scaleX(0); }
  html[dir="rtl"].js [data-system-map]:not(.assemble) .map-nodes::after { transform:translateX(100%) scaleX(0); }
  html.js [data-system-map]:not(.assemble) .map-node::before,
  html.js [data-system-map]:not(.assemble) .map-node::after { opacity:0; }
}

.ai-section { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,8vw,130px); border-top:1px solid var(--line); }
.ai-title-wrap .section-index { display:block; margin-bottom:44px; }
.ai-content { align-self:end; }
.ai-lead { font-size:clamp(20px,2vw,30px); letter-spacing:-.035em; line-height:1.35; margin:0 0 40px; }
.use-cases { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.use-cases li { padding:11px 14px; border-radius:999px; border:1px solid var(--line-strong); background:var(--paper); font-size:12px; }

.approach-section { background:var(--accent); color:white; padding-block:clamp(100px,13vw,180px); }
.approach-heading { display:grid; grid-template-columns:80px 1fr; gap:24px; margin-bottom:clamp(60px,8vw,110px); }
.approach-heading em { color:#dce4ff; }
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.5); }
.step { min-height:340px; padding:20px 24px 24px 0; border-right:1px solid rgba(255,255,255,.3); display:flex; flex-direction:column; }
html[dir="rtl"] .step { padding:20px 0 24px 24px; border-right:0; border-left:1px solid rgba(255,255,255,.3); }
.step:last-child { border-right:0; }
html[dir="rtl"] .step:last-child { border-left:0; }
.step > span { font-size:10px; opacity:.8; }
.step h3 { margin:auto 0 18px; font-size:clamp(30px,3vw,48px); letter-spacing:-.05em; font-weight:520; }
.step p { margin:0; max-width:270px; color:rgba(255,255,255,.92); }

.principles-section { padding-block:clamp(110px,14vw,190px); }
.principles-heading { display:grid; grid-template-columns:80px .75fr 1.25fr; gap:24px; align-items:start; margin-bottom:80px; }
.principles-heading h2 { margin-top:0; }
.principles-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }
.principle { padding:20px 28px 0 0; min-height:230px; border-right:1px solid var(--line); }
html[dir="rtl"] .principle { padding:20px 0 0 28px; border-right:0; border-left:1px solid var(--line); }
.principle:last-child { border-right:0; }
html[dir="rtl"] .principle:last-child { border-left:0; }
.principle > span { font-size:10px; color:var(--muted); }
.principle h3 { margin:64px 0 12px; font-size:22px; letter-spacing:-.035em; }
.principle p { margin:0; color:var(--muted); font-size:14px; max-width:300px; }

.contact-section { background:var(--ink); color:var(--bg); padding-block:clamp(100px,12vw,170px); }
.contact-shell { display:grid; grid-template-columns:1fr .78fr; gap:clamp(50px,10vw,150px); align-items:start; }
.contact-copy .section-index { display:block; margin-bottom:38px; }
.contact-copy em { color:#8ca8ff; }
.contact-lead { max-width:560px; margin:26px 0 0; color:var(--ink-muted); font-size:18px; }
.contact-paths { margin-top:30px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.wa-inline { margin:0; font-size:14px; color:var(--ink-muted); }
.wa-inline span { margin-inline-end:6px; }
.wa-link { display:inline-block; color:#a8baff; border-bottom:1px solid currentColor; padding-bottom:2px; white-space:nowrap; }
.mail-link { display:inline-block; color:#a8baff; border-bottom:1px solid currentColor; padding-bottom:3px; }
.project-form { border-top:1px solid #3a3a3e; padding-top:26px; }
.hp-field { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:0 !important; overflow:hidden !important; clip-path:inset(50%) !important; }
.project-form fieldset { border:0; padding:0; margin:0 0 34px; }
.project-form legend, .field label { display:block; font-size:12px; letter-spacing:.04em; color:#c2c1bb; margin-bottom:12px; }
.field-optional { color:var(--ink-muted); text-transform:none; letter-spacing:0; }
.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.choice-grid label { position:relative; cursor:pointer; margin-bottom:0; }
.choice-grid input { position:absolute; opacity:0; pointer-events:none; }
.choice-grid span { display:block; border:1px solid var(--field-line); padding:13px 14px; border-radius:8px; transition:.2s ease; font-size:13px; }
.choice-grid input:checked + span { background:var(--accent); border-color:var(--accent); color:white; }
.choice-grid input:focus-visible + span { outline:2px solid #fff; outline-offset:2px; }
.choice-wide { grid-column:1 / -1; }
.field { display:block; margin-bottom:22px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field input, .field textarea { width:100%; color:white; background:transparent; border:0; border-bottom:1px solid var(--field-line); border-radius:0; padding:12px 0; outline:none; resize:vertical; transition:border-color .2s ease; }
.field textarea { min-height:92px; }
.field input:focus, .field textarea:focus { border-color:#a8baff; }
.field input:focus-visible, .field textarea:focus-visible { outline:2px solid #a8baff; outline-offset:2px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field input.invalid, .field textarea.invalid { border-color:var(--error); }
.field-error { display:block; min-height:0; margin-top:8px; font-size:12px; line-height:1.4; color:var(--error); }
.field-error:empty { margin-top:0; }
.form-submit { border-color:var(--bg); margin-top:6px; width:100%; }
.form-note { font-size:12px; color:var(--ink-muted); margin:14px 0 0; }
.form-note a { color:#a8baff; border-bottom:1px solid currentColor; }
.form-status { min-height:18px; font-size:13px; color:#a8baff; margin:12px 0 0; }
.form-status[data-state="error"] { color:var(--error); }
.form-status[data-state="success"] { color:#9be7b0; }
.form-status a { color:inherit; border-bottom:1px solid currentColor; }

.site-footer { background:var(--ink); color:var(--bg); border-top:1px solid #2c2c30; }
.footer-top { padding-top:50px; padding-bottom:70px; display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.footer-brand { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; }
.footer-brand p { grid-column:2; margin:0; color:var(--ink-muted); font-size:13px; }
.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.footer-links > div { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.footer-links > div > span { color:var(--ink-muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:7px; }
.footer-links a { font-size:13px; }
.footer-bottom { border-top:1px solid #2c2c30; padding-top:16px; padding-bottom:24px; display:flex; justify-content:space-between; color:var(--ink-muted); font-size:11px; letter-spacing:.06em; }

/* ---------- Reveal (progressive enhancement) ---------- */
/* Visible by default. Only gated to hidden when JS is present (html.js),
   so no-JS and JS-error states always render content. */
html.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
html.js .reveal.in-view { opacity:1; transform:none; }
html.js .reveal-delay-1 { transition-delay:.06s; }
html.js .reveal-delay-2 { transition-delay:.12s; }
html.js .reveal-delay-3 { transition-delay:.18s; }

@media (max-width: 1100px) {
  .desktop-nav { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .header-cta { display:none; }
  .menu-toggle { display:block; }
  .mobile-menu { display:block; }
  .hero-grid { grid-template-columns:1fr; gap:42px; }
  .hero-side { max-width:580px; margin-inline-start:auto; }
  .section-heading { grid-template-columns:60px 1fr; }
  .section-heading > p { grid-column:2; margin-top:0; }
  .projects-grid { grid-template-columns:1fr; }
  .project-secondary { width:70%; margin-inline-start:auto; }
  .project-secondary .project-visual { aspect-ratio:1.25/1; }
  .capabilities-section .system-map { max-width:760px; }
  .system-map { max-width:760px; margin-inline:auto; width:100%; }
  .principles-heading { grid-template-columns:60px 1fr; }
  .principles-heading h2 { grid-column:2; }
  .principles-grid { grid-template-columns:repeat(3,1fr); }
  .contact-shell { grid-template-columns:1fr; }
  .project-form { max-width:720px; }
}

@media (max-width: 760px) {
  :root { --pad: 20px; --radius: 12px; }
  .site-header { height:70px; }
  .brand { font-size:13px; }
  .brand-mark { width:28px; height:28px; }
  .hero { padding-top:98px; min-height:auto; }
  .hero-kicker { align-items:flex-start; gap:20px; }
  .availability { max-width:160px; text-align:end; justify-content:flex-end; }
  .hero-grid { padding-block:56px 52px; }
  /* let the display type find its own line breaks on narrow screens */
  .hero-br { display:none; }
  .hero-copy h1, .hero-copy .hero-line-2 { font-size:clamp(46px,13vw,82px); line-height:.95; letter-spacing:-.055em; text-wrap:balance; }
  html[dir="rtl"] .hero-copy h1, html[dir="rtl"] .hero-copy .hero-line-2 { font-size:clamp(42px,12vw,72px); line-height:1.1; }
  .hero-side { margin:0; max-width:none; }
  .hero-side p { font-size:17px; max-width:470px; }
  .button { min-height:50px; width:100%; }
  .hero-system { grid-template-columns:repeat(2,1fr); row-gap:20px; }
  .system-node:nth-child(4), .system-node:nth-child(5) { border-top:1px solid var(--line); padding-top:12px; }
  .work-section, .capabilities-section, .ai-section { padding-top:clamp(72px,16vw,110px); padding-bottom:clamp(64px,14vw,100px); }
  .section-heading { grid-template-columns:1fr; gap:12px; margin-bottom:40px; }
  .section-heading > p, .section-heading > div { grid-column:auto; }
  .section-index { margin-bottom:4px; }
  .section-heading h2, .needs-intro h2, .ai-title-wrap h2, .approach-heading h2, .principles-heading h2, .contact-copy h2 { font-size:clamp(42px,12.3vw,68px); }
  .projects-grid { gap:56px; }
  .project-secondary { width:100%; }
  .project-visual, .project-secondary .project-visual { aspect-ratio:1/1; }
  .project-meta { grid-template-columns:1fr; gap:14px; }
  .needs-intro { grid-template-columns:1fr; }
  .need-row { grid-template-columns:36px 1fr 24px; gap:10px 12px; padding:24px 0; }
  .need-row p { grid-column:2; font-size:13px; }
  .need-row h3 { font-size:32px; }
  .need-cta { grid-column:3; grid-row:1; align-self:start; font-size:20px; }
  .need-row:hover { padding-inline:0; }
  .cap-grid { grid-template-columns:1fr; }
  .cap-card { min-height:300px; padding:22px; }
  /* Map goes vertical + simple on mobile: need → NEST → response pieces */
  .system-map { grid-template-columns:1fr; grid-template-areas:"need" "core" "nodes" "cap"; row-gap:16px; justify-items:center; text-align:center; }
  .map-need { flex-direction:column; gap:2px; justify-content:center; }
  .map-need-arrow { transform:rotate(90deg); }
  html[dir="rtl"] .map-need-arrow { transform:rotate(90deg); }
  .map-core { width:100px; height:100px; }
  .map-core strong { font-size:21px; }
  .orbit-a { inset:-16px; }
  .orbit-b { inset:-34px; }
  .map-nodes { padding:22px 0 0; width:100%; max-width:300px; }
  .map-nodes::before { left:50%; top:0; bottom:auto; height:20px; }
  .map-nodes::after { display:none; }
  .map-node { text-align:center; }
  .map-node::before, .map-node::after { display:none; }
  .ai-section { grid-template-columns:1fr; }
  .ai-title-wrap .section-index { margin-bottom:24px; }
  .approach-section { padding-block:clamp(72px,16vw,110px); }
  .approach-heading { grid-template-columns:1fr; margin-bottom:clamp(40px,10vw,70px); }
  .steps { grid-template-columns:1fr; border-top:1px solid rgba(255,255,255,.5); }
  .step { min-height:auto; border-right:0; border-bottom:1px solid rgba(255,255,255,.3); padding:24px 0; }
  html[dir="rtl"] .step { border-left:0; padding:24px 0; }
  .step:last-child { border-bottom:0; }
  .step h3 { margin:12px 0; }
  .principles-section { padding-block:clamp(72px,16vw,110px); }
  .principles-heading { grid-template-columns:1fr; margin-bottom:44px; }
  .principles-heading h2 { grid-column:auto; }
  .principles-grid { grid-template-columns:1fr; row-gap:0; }
  .principle, html[dir="rtl"] .principle { min-height:auto; border-right:0; border-left:0; border-bottom:1px solid var(--line); padding:20px 0; }
  .principle:last-child { border-bottom:0; }
  .principle h3 { margin:16px 0 10px; }
  .contact-section { padding-block:clamp(72px,16vw,110px); }
  .choice-grid { grid-template-columns:1fr; }
  .choice-wide { grid-column:auto; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .footer-top { grid-template-columns:1fr; gap:36px; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .footer-bottom { gap:20px; align-items:flex-start; flex-direction:column; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .hero { min-height:auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html.js .reveal, .reveal { opacity:1 !important; transform:none !important; }
}

/* ---------- Secondary pages (404, legal) ---------- */
.nf { min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:24px; }
.nf h1 { font-size:clamp(40px,8vw,88px); letter-spacing:-.06em; line-height:.95; margin:0; font-weight:560; }
.nf p { color:var(--muted); max-width:46ch; margin:0; }
.nf-links { display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top:8px; }

.legal { max-width:720px; padding-top:140px; padding-bottom:100px; }
.legal a.back { font-size:13px; border-bottom:1px solid currentColor; }
.legal h1 { font-size:clamp(36px,6vw,60px); letter-spacing:-.05em; line-height:1; margin:28px 0 8px; font-weight:560; }
.legal .updated { color:var(--muted); font-size:13px; margin:0 0 40px; }
.legal .updated a { color:var(--accent); }
.legal h2 { font-size:18px; letter-spacing:-.02em; margin:36px 0 10px; }
.legal p, .legal li { color:#2b2b2c; font-size:15px; line-height:1.6; }
.legal ul { padding-inline-start:20px; margin:0; }
.legal a { color:var(--accent); }
@media (max-width:760px) { .legal { padding-top:110px; } }

/* ==================================================================
   WORK — digital exhibition (/work, /en/work) + project detail
   ================================================================== */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration:.5s; animation-timing-function:cubic-bezier(.16,1,.3,1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.32s; }

.work-lede, .exhibition, .detail { --ease-out:cubic-bezier(.16,1,.3,1); }

/* ---------- first view ---------- */
.work-lede { position:relative; min-height:84svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:clamp(120px,20vh,220px); padding-bottom:0; }
.work-lede-inner { }
.work-lede-eyebrow { display:block; color:var(--muted); }
.work-lede-title { margin:.16em 0 0; font-size:clamp(64px,13vw,200px); line-height:.88; letter-spacing:-.065em; font-weight:560; overflow:hidden; }
.work-lede-title > span { display:block; }
.work-lede-sub { margin:clamp(22px,3vw,36px) 0 0; max-width:30ch; font-size:clamp(16px,1.5vw,21px); line-height:1.45; color:var(--muted); }
.work-lede-foot { margin-top:clamp(40px,6vw,80px); padding-bottom:20px; display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.work-lede-count { display:flex; align-items:baseline; gap:10px; }
.wlc-num { font-size:clamp(20px,2.4vw,34px); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.wlc-label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.work-lede-explore { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:3px; }
.work-lede-rule { position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px; background:var(--ink); }
.work-lede-rule::before { content:""; position:absolute; left:0; bottom:0; width:64px; height:1px; background:var(--accent); }
@media (prefers-reduced-motion:no-preference) {
  html.js .work-lede-title > span { animation:wl-clip .9s var(--ease-out) both; }
  html.js .work-lede-sub { animation:wl-fade .8s .14s var(--ease-out) both; }
  html.js .work-lede-foot { animation:wl-fade .8s .26s var(--ease-out) both; }
  html.js .work-lede-rule::before { animation:wl-grow 1s .3s var(--ease-out) both; }
}
@keyframes wl-clip { from { clip-path:inset(0 0 100% 0); transform:translateY(.28em); } }
@keyframes wl-fade { from { opacity:0; transform:translateY(14px); } }
@keyframes wl-grow { from { transform:scaleX(0); transform-origin:left; } }

/* ---------- exploration bar (sticky, editorial) ---------- */
.work-controls { position:sticky; top:70px; z-index:22; display:flex; flex-wrap:wrap; align-items:center; gap:12px 30px; padding-block:14px; margin-top:clamp(48px,8vw,110px); border-top:1px solid var(--ink); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 84%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:padding-block .3s var(--ease), border-color .3s ease; scroll-margin-top:76px; }
.work-controls.is-stuck { padding-block:10px; border-bottom-color:var(--ink); }
.work-modes { display:inline-flex; }
.work-mode-btn { border:0; background:transparent; cursor:pointer; font:inherit; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:8px 12px; color:var(--muted); position:relative; }
.work-mode-btn::after { content:""; position:absolute; left:12px; right:12px; bottom:3px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.work-mode-btn[aria-pressed="true"] { color:var(--ink); }
.work-mode-btn[aria-pressed="true"]::after { transform:scaleX(1); }
.work-mode-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.work-filters { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 26px; }
.work-filter { display:flex; align-items:baseline; gap:12px; }
.work-filter-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink); }
.work-filter-set { display:flex; flex-wrap:wrap; gap:3px 14px; }
.work-filter-btn { font-size:13px; color:var(--muted); padding-bottom:2px; border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease; }
.work-filter-btn:hover { color:var(--ink); }
.work-filter-btn[aria-pressed="true"] { color:var(--accent); border-bottom-color:var(--accent); }
.work-filter-clear { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid currentColor; }
.work-count { margin:0 0 0 auto; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- quiet statement between intro and first proof ---------- */
.work-statement { width:min(100%,var(--max)); margin-inline:auto; margin-block:0; padding:clamp(96px,20vw,240px) var(--pad); font-size:clamp(30px,5.4vw,68px); line-height:1; letter-spacing:-.05em; font-weight:560; max-width:22ch; text-wrap:balance; }

/* ---------- exhibition ---------- */
.exhibition { width:min(100%,var(--max)); margin-inline:auto; padding-inline:var(--pad); }
.exhibition-index-head { display:none; }

.plate { position:relative; margin-block:clamp(84px,15vw,220px); }
.plate:last-of-type { margin-bottom:clamp(64px,10vw,150px); }

/* the blue thread — CONNECT motif */
.plate-thread { position:absolute; left:-16px; top:-.6em; bottom:-.6em; width:1px; background:var(--line); }
.plate-thread::before { content:""; position:absolute; inset:0 0 auto 0; width:1px; height:100%; background:var(--accent); transform:scaleY(0); transform-origin:top; }
.plate.in-view .plate-thread::before { transform:scaleY(1); transition:transform 1s var(--ease-out); }
.plate-thread::after { content:""; position:absolute; left:-3px; top:0; width:7px; height:1px; background:var(--accent); }

.plate-link { display:grid; column-gap:clamp(24px,5vw,76px); row-gap:22px; color:inherit; align-items:end; }
.plate-index { display:flex; align-items:baseline; gap:9px; margin-bottom:2px; font-variant-numeric:tabular-nums; }
.plate-fig { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.plate-num { font-size:13px; letter-spacing:.05em; color:var(--muted); transition:color .3s ease; }
.plate.in-view .plate-num { color:var(--accent); }

.plate-frame { position:relative; align-self:start; }
.pmedia { position:relative; display:block; overflow:hidden; border-radius:2px; aspect-ratio:4/3; background:var(--paper); }
.pmedia > img, .pmedia > picture, .pmedia > picture > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pmedia-fallback { position:absolute; inset:0; background:var(--p-accent,#dcd9cf); color:var(--p-ink,#111); display:grid; place-items:center; padding:clamp(24px,4vw,60px); }
.pmedia-mark { font-family:Georgia,"Times New Roman",serif; font-size:clamp(24px,3vw,50px); line-height:1.04; letter-spacing:-.03em; text-align:center; text-transform:capitalize; }
/* "inspecting" bracket */
.plate-frame::after { content:""; position:absolute; inset:0; border:1px solid var(--accent); opacity:0; transition:opacity .25s var(--ease), inset .25s var(--ease); pointer-events:none; }

.plate-info { min-width:0; }
.plate-name { margin:0; overflow:hidden; font-size:clamp(26px,3.4vw,58px); line-height:1; letter-spacing:-.05em; font-weight:560; }
.plate-name > span { display:block; }
.plate-headline { margin:14px 0 0; font-size:clamp(15px,1.35vw,18px); line-height:1.5; color:var(--muted); max-width:34ch; }
.plate-brief { display:block; overflow:hidden; max-height:0; opacity:0; transition:max-height .45s var(--ease-out), opacity .3s ease; }
.pb-row { display:block; margin-top:14px; font-size:clamp(13px,1.15vw,15px); line-height:1.45; max-width:36ch; }
.pb-row:first-child { margin-top:16px; }
.pb-k { display:block; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:3px; }
.plate-meta { margin-top:clamp(18px,2.6vw,30px); display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px 20px; align-items:baseline; max-width:42ch; }
.pm-row { display:contents; }
.pm-k { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.pm-v { font-size:13px; line-height:1.4; }
.plate-open { display:inline-block; margin-top:22px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:3px; }

.plate-link:focus-visible { outline:2px solid var(--accent); outline-offset:8px; border-radius:2px; }

/* FOCUS — inspecting a single exhibit */
@media (hover:hover) {
  .plate-link:hover .plate-frame::after, .plate-link:focus-visible .plate-frame::after { opacity:1; inset:-8px; }
  .plate:hover .plate-brief, .plate:focus-within .plate-brief { max-height:260px; opacity:1; }
  .exhibition[data-mode="visual"]:has(.plate-link:hover) .plate:not(:hover),
  .exhibition[data-mode="visual"]:has(.plate-link:focus-visible) .plate:not(:focus-within) { opacity:.3; filter:saturate(.35); transition:opacity .35s var(--ease), filter .35s var(--ease); }
}

/* scales — visual mode */
.exhibition[data-mode="visual"] .plate[data-scale="featured"] .plate-link { grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); }
.exhibition[data-mode="visual"] .plate[data-scale="featured"] .plate-index { grid-column:1/-1; }
.exhibition[data-mode="visual"] .plate[data-scale="featured"] .plate-frame { grid-column:1; grid-row:2; }
.exhibition[data-mode="visual"] .plate[data-scale="featured"] .plate-info { grid-column:2; grid-row:2; }
.exhibition[data-mode="visual"] .plate[data-scale="featured"]:nth-of-type(even) .plate-link { grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); }
.exhibition[data-mode="visual"] .plate[data-scale="featured"]:nth-of-type(even) .plate-frame { grid-column:2; grid-row:2; }
.exhibition[data-mode="visual"] .plate[data-scale="featured"]:nth-of-type(even) .plate-info { grid-column:1; grid-row:2; }
.exhibition[data-mode="visual"] .plate[data-scale="featured"] .pmedia { aspect-ratio:4/3; }
.exhibition[data-mode="visual"] .plate[data-scale="featured"] .plate-name { font-size:clamp(34px,4.6vw,80px); }

.exhibition[data-mode="visual"] .plate[data-scale="standard"] .plate-link { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.exhibition[data-mode="visual"] .plate[data-scale="standard"] .plate-index { grid-column:1/-1; }
.exhibition[data-mode="visual"] .plate[data-scale="standard"] .pmedia { aspect-ratio:5/4; }
.exhibition[data-mode="visual"] .plate[data-scale="standard"]:nth-of-type(even) { margin-inline-start:auto; max-width:80%; }

.exhibition[data-mode="visual"] .plate[data-scale="archive"] { margin-block:clamp(44px,6vw,72px); }
.exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-link { grid-template-columns:110px 240px minmax(0,1fr); column-gap:32px; align-items:center; }
.exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-index { grid-column:1; grid-row:1; margin:0; flex-direction:column; gap:3px; align-items:flex-start; }
.exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-frame { grid-column:2; grid-row:1; }
.exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-info { grid-column:3; grid-row:1; }
.exhibition[data-mode="visual"] .plate[data-scale="archive"] .pmedia { aspect-ratio:3/2; }
.exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-name { font-size:clamp(20px,2vw,28px); }
.exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-headline,
.exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-brief,
.exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-open { display:none; }
.exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-meta { margin-top:12px; }

/* ENTER — the composition assembles */
@media (prefers-reduced-motion:no-preference) {
  html.js .exhibition .plate.reveal { opacity:1; transform:none; }
  html.js .exhibition .plate:not(.in-view) .pmedia { clip-path:inset(0 100% 0 0); }
  html.js .exhibition .plate.in-view .pmedia { clip-path:inset(0 0 0 0); transition:clip-path .85s var(--ease-out); }
  html.js .exhibition .plate:not(.in-view) .plate-name > span { transform:translateY(106%); }
  html.js .exhibition .plate.in-view .plate-name > span { transform:none; transition:transform .8s .12s var(--ease-out); }
  html.js .exhibition .plate:not(.in-view) .plate-headline,
  html.js .exhibition .plate:not(.in-view) .plate-meta,
  html.js .exhibition .plate:not(.in-view) .plate-index,
  html.js .exhibition .plate:not(.in-view) .plate-open { opacity:0; transform:translateY(12px); }
  html.js .exhibition .plate.in-view .plate-index { opacity:1; transform:none; transition:opacity .5s, transform .5s var(--ease-out); }
  html.js .exhibition .plate.in-view .plate-headline { opacity:1; transform:none; transition:opacity .6s .3s, transform .6s .3s var(--ease-out); }
  html.js .exhibition .plate.in-view .plate-meta { opacity:1; transform:none; transition:opacity .6s .42s, transform .6s .42s var(--ease-out); }
  html.js .exhibition .plate.in-view .plate-open { opacity:1; transform:none; transition:opacity .5s .52s, transform .5s .52s var(--ease-out); }
}

/* ---------- index mode — institutional catalogue ---------- */
.exhibition[data-mode="index"] .plate-thread { display:none; }
.exhibition[data-mode="index"] .exhibition-index-head { display:grid; grid-template-columns:5ch minmax(0,1fr) 18ch 8ch; column-gap:28px; padding:14px 0; border-bottom:1px solid var(--ink); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.exhibition[data-mode="index"] .exhibition-index-head span:last-child { text-align:right; }
.exhibition[data-mode="index"] .plate { margin:0; }
.exhibition[data-mode="index"] .plate-link { display:grid; grid-template-columns:5ch minmax(0,1fr) 18ch 8ch; column-gap:28px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line); transition:background .2s ease, padding-inline .3s var(--ease); }
@media (hover:hover) { .exhibition[data-mode="index"] .plate-link:hover { background:color-mix(in srgb,var(--accent) 5%,transparent); padding-inline:14px; } }
.exhibition[data-mode="index"] .plate-index { margin:0; grid-column:1; }
.exhibition[data-mode="index"] .plate-fig { display:none; }
.exhibition[data-mode="index"] .plate-num { font-size:12px; }
.exhibition[data-mode="index"] .plate-link:hover .plate-num { color:var(--accent); }
.exhibition[data-mode="index"] .plate-frame { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.exhibition[data-mode="index"] .plate-frame::after { display:none; }
.exhibition[data-mode="index"] .plate-info { display:contents; }
.exhibition[data-mode="index"] .plate-name { grid-column:2; grid-row:1; overflow:visible; font-size:clamp(15px,1.5vw,19px); line-height:1.2; letter-spacing:-.02em; font-weight:560; }
.exhibition[data-mode="index"] .plate-name > span { display:inline; }
.exhibition[data-mode="index"] .plate-link:hover .plate-name { color:var(--accent); }
.exhibition[data-mode="index"] .plate-headline,
.exhibition[data-mode="index"] .plate-brief,
.exhibition[data-mode="index"] .plate-open { display:none; }
.exhibition[data-mode="index"] .plate-meta { display:contents; }
.exhibition[data-mode="index"] .pm-row { display:none; }
.exhibition[data-mode="index"] .pm-year, .exhibition[data-mode="index"] .pm-industry { display:contents; }
.exhibition[data-mode="index"] .pm-industry .pm-k, .exhibition[data-mode="index"] .pm-year .pm-k { display:none; }
.exhibition[data-mode="index"] .pm-industry .pm-v { grid-column:3; grid-row:1; font-size:12px; color:var(--muted); }
.exhibition[data-mode="index"] .pm-year .pm-v { grid-column:4; grid-row:1; font-size:12px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }

@media (hover:hover) and (min-width:1080px) {
  .exhibition[data-mode="index"] .plate-frame { position:fixed; left:auto; right:var(--pad); top:50%; width:min(34vw,420px); height:auto; overflow:visible; transform:translateY(-50%); opacity:0; pointer-events:none; transition:opacity .25s var(--ease); z-index:28; border:1px solid var(--line); }
  .exhibition[data-mode="index"] .pmedia { aspect-ratio:4/3; }
  .exhibition[data-mode="index"] .plate:hover .plate-frame, .exhibition[data-mode="index"] .plate:focus-within .plate-frame { opacity:1; }
}

/* filtering — recompose */
.plate[hidden] { display:none; }
.exhibition.is-recomposing .plate:not([hidden]) { animation:plate-recompose .5s var(--ease-out) both; animation-delay:calc(var(--stagger,0) * 50ms); }
@keyframes plate-recompose { from { opacity:0; clip-path:inset(0 0 14% 0); } }
html.js .exhibition[data-collapsed] .plate[data-beyond] { display:none; }

.work-more { display:flex; justify-content:center; padding-block:clamp(30px,5vw,64px); }
.work-more-btn { min-width:240px; letter-spacing:.06em; }

/* ---------- conversion ---------- */
.work-conv { padding-block:clamp(100px,16vw,210px); border-top:1px solid var(--ink); text-align:center; }
.work-conv-title { margin:0; font-size:clamp(36px,6vw,88px); line-height:.95; letter-spacing:-.05em; font-weight:560; text-wrap:balance; }
.work-conv-lead { margin:22px auto 0; max-width:40ch; color:var(--muted); font-size:17px; line-height:1.55; }
.work-conv-actions { margin-top:40px; display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:center; align-items:center; }
.work-conv .wa-link { color:var(--accent); border-bottom:1px solid currentColor; padding-bottom:2px; }
.work-conv-next { font-size:14px; }

/* ---------- project detail ---------- */
.detail-hero { padding-top:clamp(120px,15vh,180px); padding-bottom:clamp(40px,6vw,80px); }
.detail-back { display:inline-block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:3px; }
.detail-lead { margin-top:clamp(44px,8vw,100px); }
.detail-eyebrow { margin:0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--muted); }
.detail-name { margin:16px 0 0; overflow:hidden; font-size:clamp(46px,9.5vw,150px); line-height:.88; letter-spacing:-.065em; font-weight:560; text-wrap:balance; }
.detail-name > span { display:block; }
.detail-headline { margin:24px 0 0; font-size:clamp(18px,2vw,26px); line-height:1.4; color:var(--muted); max-width:32ch; }
.detail-hero-media { margin-top:clamp(48px,8vw,100px); }
.detail-hero-media .pmedia { aspect-ratio:16/9; border-radius:2px; }
.detail-hero-media .pmedia-fallback { background:var(--p-accent); color:var(--p-ink); }

.detail-story { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,90px); padding-block:clamp(60px,9vw,120px); border-top:1px solid var(--ink); }
.ds-k { display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.ds-v { margin:16px 0 0; font-size:clamp(19px,2vw,27px); line-height:1.35; letter-spacing:-.02em; max-width:24ch; }

.detail-facts { padding-block:clamp(44px,6vw,80px); border-top:1px solid var(--line); }
.detail-facts dl { margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:32px 40px; }
.detail-facts div { min-width:0; }
.detail-facts dt { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.detail-facts dd { margin:10px 0 0; font-size:15px; line-height:1.5; }
.detail-facts dd a { color:var(--accent); border-bottom:1px solid currentColor; }
.detail-note { color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding-block:clamp(36px,5vw,60px); border-top:1px solid var(--line); }

.detail-body { padding-block:clamp(20px,4vw,48px); }
.cs-block { margin-block:clamp(44px,7vw,100px); }
.cs-text { max-width:62ch; }
.cs-text h2, .cs-system h2, .cs-split h2, .cs-screens h2 { font-size:clamp(24px,3vw,40px); letter-spacing:-.04em; margin:0 0 16px; }
.cs-text p, .cs-split-text p, .cs-outcome p { font-size:17px; line-height:1.65; margin:0 0 1em; }
.cs-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.cs-split-left .cs-split-media { order:-1; }
.cs-full { margin-inline:calc(50% - 50vw); }
.cs-full .pmedia { aspect-ratio:16/9; border-radius:0; }
.cs-full figcaption, .cs-gallery figcaption, .cs-screen-item figcaption { font-size:12px; color:var(--muted); margin-top:10px; text-align:center; }
.cs-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,3vw,32px); }
.cs-screens { margin-block:clamp(44px,7vw,100px); }
.cs-screens-sub { color:var(--muted); font-size:15px; margin:-8px 0 24px; }
.cs-screens-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:clamp(16px,3vw,32px); }
.cs-screen-item { margin:0; position:relative; }
.cs-screen-item .pmedia { aspect-ratio:16/10; border-radius:2px; }
.cs-system ol { margin:0; padding:0; list-style:none; counter-reset:s; display:grid; gap:12px; }
.cs-system li { counter-increment:s; padding:16px 0; border-top:1px solid var(--line); font-size:16px; }
.cs-system li::before { content:counter(s,decimal-leading-zero); color:var(--accent); margin-inline-end:14px; font-size:12px; }
.cs-quote { margin-inline:auto; max-width:34ch; text-align:center; }
.cs-quote p { font-family:Georgia,"Times New Roman",serif; font-size:clamp(22px,3vw,34px); line-height:1.3; margin:0; }
.cs-quote cite { display:block; margin-top:16px; font-style:normal; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.cs-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; border-block:1px solid var(--line); padding-block:clamp(28px,4vw,44px); }
.cs-metric strong { display:block; font-size:clamp(32px,4vw,56px); letter-spacing:-.04em; }
.cs-metric span { font-size:13px; color:var(--muted); }
.cs-video video { width:100%; border-radius:2px; display:block; }
.cs-outcome { max-width:56ch; }

/* ---------- smart preview drawer / modal ---------- */
.smart-drawer { position:fixed; inset:0; z-index:99; width:100vw; height:100vh; max-width:100vw; max-height:100vh; margin:0; padding:0; border:none; background:transparent; display:grid; place-items:center; overflow:hidden; }
.smart-drawer[hidden] { display:none; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(11,11,12,0.65); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); cursor:pointer; opacity:0; transition:opacity .32s var(--ease-out); }
.drawer-panel { position:relative; z-index:2; width:min(92vw, 1020px); max-height:min(90vh, 840px); background:var(--paper, #fff); color:var(--ink, #0b0b0c); border:1px solid var(--line); border-radius:2px; box-shadow:0 30px 80px rgba(0,0,0,0.3); display:flex; flex-direction:column; overflow:hidden; transform:translateY(20px) scale(.98); opacity:0; transition:transform .38s var(--ease-out), opacity .3s var(--ease-out); }
.smart-drawer.is-open .drawer-backdrop { opacity:1; }
.smart-drawer.is-open .drawer-panel { transform:none; opacity:1; }
.drawer-header { display:flex; justify-content:space-between; align-items:center; padding:16px 28px; border-bottom:1px solid var(--line); background:var(--bg); }
.drawer-tag { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.drawer-close { background:transparent; border:none; font-size:16px; cursor:pointer; padding:6px 10px; color:var(--muted); transition:color .2s; display:inline-flex; align-items:center; justify-content:center; }
.drawer-close:hover { color:var(--ink); }
.drawer-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.drawer-body { flex:1; overflow-y:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:0; overscroll-behavior:contain; }
.drawer-visual { background:var(--p-accent, #0b0b0c); color:var(--p-ink, #fff); display:grid; place-items:center; min-height:280px; padding:clamp(20px,4vw,44px); position:relative; overflow:hidden; }
.drawer-visual .pmedia { width:100%; aspect-ratio:4/3; background:transparent; }
.drawer-visual .pmedia-fallback { position:static; inset:auto; }
.drawer-content { padding:clamp(24px,3.5vw,40px); display:flex; flex-direction:column; gap:18px; }
.drawer-title { margin:0; font-size:clamp(26px,3.2vw,40px); line-height:1.05; letter-spacing:-.045em; font-weight:560; }
.drawer-headline { margin:0; font-size:clamp(14px,1.3vw,17px); line-height:1.45; color:var(--muted); }
.drawer-story { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding-block:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.drawer-story-col .ds-k { display:block; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
.drawer-story-col .ds-v { margin:0; font-size:14px; line-height:1.4; color:var(--ink); }
.drawer-facts dl { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; font-size:13px; }
.drawer-facts dt { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.drawer-facts dd { margin:3px 0 0; font-size:13px; line-height:1.35; }
.drawer-facts dd a { color:var(--accent); border-bottom:1px solid currentColor; }
.drawer-notice { margin:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.drawer-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:12px; }
.drawer-footer { display:flex; justify-content:space-between; align-items:center; padding:12px 28px; border-top:1px solid var(--line); background:var(--bg); }
.drawer-nav-btn { background:transparent; border:none; font:inherit; font-size:11px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; color:var(--muted); padding:4px 8px; transition:color .2s; }
.drawer-nav-btn:hover { color:var(--ink); }
.drawer-nav-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.drawer-counter { font-size:11px; letter-spacing:.14em; color:var(--muted); font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:no-preference) {
  html.js .detail .reveal { opacity:1; transform:none; }
  html.js .detail-hero-media:not(.in-view) .pmedia { clip-path:inset(0 0 100% 0); }
  html.js .detail-hero-media.in-view .pmedia { clip-path:inset(0 0 0 0); transition:clip-path .9s var(--ease-out); }
  html.js .detail-lead:not(.in-view) .detail-name > span { transform:translateY(106%); }
  html.js .detail-lead.in-view .detail-name > span { transform:none; transition:transform .85s .1s var(--ease-out); }
  html.js .detail-lead:not(.in-view) .detail-eyebrow,
  html.js .detail-lead:not(.in-view) .detail-headline { opacity:0; transform:translateY(12px); }
  html.js .detail-lead.in-view .detail-eyebrow { opacity:1; transform:none; transition:opacity .6s, transform .6s var(--ease-out); }
  html.js .detail-lead.in-view .detail-headline { opacity:1; transform:none; transition:opacity .6s .32s, transform .6s .32s var(--ease-out); }
  html.js .detail-story:not(.in-view), html.js .detail-facts:not(.in-view), html.js .detail-note:not(.in-view) { opacity:0; transform:translateY(16px); }
  html.js .detail-story.in-view, html.js .detail-facts.in-view, html.js .detail-note.in-view { opacity:1; transform:none; transition:opacity .7s, transform .7s var(--ease-out); }
}

/* ---------- homepage featured cards -> links (unchanged behaviour) ---------- */
.project-card-link { display:block; color:inherit; }
.project-visual-themed { background:var(--p-accent,#d9d7ce); color:var(--p-ink,#111); }
.project-visual-tag { transition:background .25s ease, color .25s ease; }
@media (hover:hover) { .project-card-link:hover .project-visual-tag { background:var(--p-ink,#111); color:var(--p-accent,#fff); } }
.work-all { margin:clamp(36px,5vw,60px) 0 0; }

/* ---------- responsive ---------- */
@media (max-width:1000px) {
  .exhibition[data-mode="visual"] .plate[data-scale="featured"] .plate-link,
  .exhibition[data-mode="visual"] .plate[data-scale="featured"]:nth-of-type(even) .plate-link,
  .exhibition[data-mode="visual"] .plate[data-scale="standard"] .plate-link { grid-template-columns:1fr; }
  .exhibition[data-mode="visual"] .plate[data-scale="featured"] .plate-frame,
  .exhibition[data-mode="visual"] .plate[data-scale="featured"] .plate-info,
  .exhibition[data-mode="visual"] .plate[data-scale="featured"]:nth-of-type(even) .plate-frame,
  .exhibition[data-mode="visual"] .plate[data-scale="featured"]:nth-of-type(even) .plate-info { grid-column:1; grid-row:auto; }
  .exhibition[data-mode="visual"] .plate[data-scale="standard"]:nth-of-type(even) { max-width:none; margin:0; }
  .exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-link { grid-template-columns:60px 150px minmax(0,1fr); column-gap:18px; }
  .detail-story { grid-template-columns:1fr; gap:28px; }
  .detail-facts dl { grid-template-columns:repeat(2,1fr); }
  .drawer-panel { width:95vw; }
}
@media (max-width:760px) {
  .work-lede { min-height:auto; padding-top:clamp(110px,22vh,170px); }
  .work-lede-title { font-size:clamp(56px,17vw,120px); }
  .work-lede-foot { flex-direction:column; align-items:flex-start; gap:16px; }
  .work-controls { position:static; flex-direction:column; align-items:flex-start; gap:14px; }
  .work-filters { flex-direction:column; align-items:flex-start; gap:12px; }
  .work-count { margin:0; }
  .plate { margin-block:clamp(60px,17vw,96px); }
  .plate-thread { left:-10px; }
  .plate-brief { max-height:none; opacity:1; overflow:visible; }
  .plate-frame::after { display:none; }
  .exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-link { grid-template-columns:1fr; }
  .exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-headline,
  .exhibition[data-mode="visual"] .plate[data-scale="archive"] .plate-brief { display:block; }
  .exhibition[data-mode="index"] .exhibition-index-head,
  .exhibition[data-mode="index"] .plate-link { grid-template-columns:4ch minmax(0,1fr) auto; }
  .exhibition[data-mode="index"] .exhibition-index-head span:nth-child(4) { display:none; }
  .exhibition[data-mode="index"] .pm-year .pm-v { grid-column:3; grid-row:1; }
  .exhibition[data-mode="index"] .pm-industry .pm-v { grid-column:2; grid-row:2; font-size:11px; margin-top:4px; }
  .detail-facts dl { grid-template-columns:1fr 1fr; }
  .cs-split { grid-template-columns:1fr; }
  .cs-gallery { grid-template-columns:1fr; }
  .drawer-panel { width:100vw; height:100svh; max-height:100svh; border-radius:0; border:none; }
  .drawer-body { grid-template-columns:1fr; }
  .drawer-visual { min-height:200px; aspect-ratio:16/9; }
  .drawer-story { grid-template-columns:1fr; gap:14px; }
  .drawer-facts dl { grid-template-columns:1fr 1fr; }
}
@media (max-width:430px) {
  .detail-facts dl { grid-template-columns:1fr; }
  .drawer-facts dl { grid-template-columns:1fr; }
}
@media (max-width:380px) { .plate-thread { display:none; } }

/* touch / no-hover: the project brief (need + response) is always shown */
@media (hover:none) {
  .plate-brief { max-height:none; opacity:1; overflow:visible; }
  .plate-frame::after { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .plate-brief { transition:none; }
  .exhibition.is-recomposing .plate { animation:none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
  .drawer-backdrop, .drawer-panel { transition:none !important; }
}


/* ==================================================================
   HOMEPAGE — SCROLL STORY & MOTION
   One continuous story: NEED -> PROOF -> PROBLEM -> NEST CONNECTS ->
   AI AS LEVERAGE -> HOW WE BUILD -> WHY NEST -> YOUR NEED.
   Every hidden/pre-state is gated behind `html.js` AND
   `prefers-reduced-motion: no-preference`, so no-JS and reduced-motion
   users get the finished layout immediately, with nothing delayed.
   Scroll-driven behaviour is limited to: Needs (JS focus band),
   the Nest map (short CSS sticky stage) and the Method progress line
   (CSS :has() counting revealed steps). No rAF, no scroll listeners.
   ================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---- shared keyframes ---- */
  @keyframes hs-mask-up   { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -0.16em 0); } }
  @keyframes hs-fade-up   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes hs-fade      { from { opacity: 0; } to { opacity: 1; } }
  @keyframes hs-draw-x    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes hs-core-pulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.85); opacity: 0; } }

  /* ================= 1. HERO — entry sequence (on load, CSS only) ==== */
  /* header settles -> kicker -> statement masks in -> blue italics land
     just after the black text -> supporting copy -> CTA -> four nodes. */
  html.js .hero-kicker      { animation: hs-fade-up var(--motion-medium) var(--ease-out) both; }
  html.js .hero-copy h1     { animation: hs-mask-up var(--motion-slow) var(--ease-out) .10s both; }
  html.js .hero-copy .hero-line-2 { animation: hs-mask-up var(--motion-slow) var(--ease-out) .26s both; }
  html.js .hero-copy h1 em,
  html.js .hero-copy .hero-line-2 em { animation: hs-fade var(--motion-medium) ease .58s both; }
  html.js .hero-side p      { animation: hs-fade-up var(--motion-medium) var(--ease-out) .52s both; }
  html.js .hero-actions     { animation: hs-fade-up var(--motion-medium) var(--ease-out) .64s both; }
  html.js .hero-system .system-line { transform-origin: left; animation: hs-draw-x var(--motion-slow) var(--ease-out) .70s both; }
  html[dir="rtl"] .hero-system .system-line { transform-origin: right; }
  html.js .hero-system .system-node { animation: hs-fade-up var(--motion-medium) var(--ease-out) both; }
  html.js .hero-system .system-node:nth-child(2) { animation-delay: .80s; }
  html.js .hero-system .system-node:nth-child(3) { animation-delay: .88s; }
  html.js .hero-system .system-node:nth-child(4) { animation-delay: .96s; }
  html.js .hero-system .system-node:nth-child(5) { animation-delay: 1.04s; }

  /* ================= section-index continuity tick ================== */
  /* A 2px blue mark under every numbered index draws in as the section
     arrives — the recurring "connection" motif down the page. */
  html.js #top .section-index { position: relative; }
  html.js #top .section-index::after {
    content: ""; position: absolute; left: 0; bottom: -6px;
    width: 22px; height: 2px; background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--motion-medium) var(--ease-out) .12s;
  }
  html[dir="rtl"] #top .section-index::after { left: auto; right: 0; transform-origin: right; }
  html.js #top .reveal.in-view .section-index::after { transform: scaleX(1); }
  html.js #top .approach-heading .section-index::after { background: #fff; }

  /* ================= 5. WORK — refined reveal + focus ============== */
  /* visual field settles first, then the metadata resolves. */
  html.js #work .project-card .project-visual-fallback {
    transition: transform var(--motion-slow) var(--ease-out);
  }
  html.js #work .project-card:not(.in-view) .project-visual-fallback { transform: scale(1.04); }
  html.js #work .project-card .project-meta { transition: opacity var(--motion-medium) ease .18s; }
  html.js #work .project-card:not(.in-view) .project-meta { opacity: 0; }
  @media (hover: hover) {
    .projects-grid:has(.project-card-link:hover) .project-card:not(:hover),
    .projects-grid:has(.project-card-link:focus-visible) .project-card:not(:focus-within) {
      opacity: .5;
      transition: opacity var(--motion-medium) var(--ease-out);
    }
  }

  /* ================= 6. NEEDS — desktop scroll focus band ========= */
  /* `.story-ready` is added by script.js on >=1024px only; mobile and
     reduced-motion never see the dimming. One row in full clarity. */
  html.js .needs-list.story-ready .need-row {
    transition: padding .3s var(--ease), background .2s ease,
                opacity var(--motion-medium) var(--ease-out);
  }
  html.js .needs-list.story-ready .need-row:not(.is-active) { opacity: .3; }
  html.js .needs-list.story-ready .need-row.is-active { opacity: 1; }
  html.js .needs-list.story-ready .need-row.is-active .need-cta { color: #9db3ff; }

  /* ================= 7. NEST MAP — sticky storytelling stage ====== */
  /* Short, controlled: ~1.6 viewport of travel while the assembled map
     holds in view. Desktop only. Mobile / reduced-motion = plain flow. */
  html.js .core-pulse {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid var(--accent); opacity: 0; pointer-events: none;
  }
  html.js [data-system-map].assemble .core-pulse {
    animation: hs-core-pulse 1.5s var(--ease-out) .5s 2;
  }
  html.js [data-system-map] .map-caption { transition: opacity var(--motion-medium) ease .9s; }
  html.js [data-system-map]:not(.assemble) .map-caption { opacity: 0; }

  /* ================= 8. CAPABILITIES — one connected sweep ======== */
  html.js .cap-grid { position: relative; }
  html.js .cap-grid::before {
    content: ""; position: absolute; left: 50%;
    top: calc(-1 * clamp(22px, 4vw, 42px));
    width: 1px; height: clamp(22px, 4vw, 42px); background: var(--accent);
    transform: scaleY(0); transform-origin: top;
    transition: transform var(--motion-slow) var(--ease-out);
  }
  html.js .cap-grid.in-view::before { transform: scaleY(1); }
  html.js .cap-grid .cap-card {
    transition: opacity var(--motion-medium) var(--ease-out),
                transform var(--motion-medium) var(--ease-out);
  }
  html.js .cap-grid:not(.in-view) .cap-card { opacity: 0; transform: translateY(20px); }
  html.js .cap-grid.in-view .cap-card { opacity: 1; transform: none; }
  html.js .cap-grid.in-view .cap-card:nth-child(2) { transition-delay: .08s; }
  html.js .cap-grid.in-view .cap-card:nth-child(3) { transition-delay: .16s; }
  html.js .cap-grid.in-view .cap-card:nth-child(4) { transition-delay: .24s; }

  /* ================= 9. AI — restrained, sequenced =============== */
  html.js .ai-title-wrap h2 {
    transition: clip-path var(--motion-slow) var(--ease-out) .08s,
                opacity var(--motion-medium) ease .08s;
  }
  html.js .ai-title-wrap:not(.in-view) h2 { clip-path: inset(0 0 100% 0); opacity: 0; }
  html.js .ai-title-wrap.in-view h2 { clip-path: inset(0 0 -0.16em 0); opacity: 1; }
  html.js .ai-content .use-cases li {
    transition: opacity var(--motion-medium) var(--ease-out),
                transform var(--motion-medium) var(--ease-out);
  }
  html.js .ai-content:not(.in-view) .use-cases li { opacity: 0; transform: translateY(10px); }
  html.js .ai-content.in-view .use-cases li { opacity: 1; transform: none; }
  html.js .ai-content.in-view .use-cases li:nth-child(1) { transition-delay: .06s; }
  html.js .ai-content.in-view .use-cases li:nth-child(2) { transition-delay: .12s; }
  html.js .ai-content.in-view .use-cases li:nth-child(3) { transition-delay: .18s; }
  html.js .ai-content.in-view .use-cases li:nth-child(4) { transition-delay: .24s; }
  html.js .ai-content.in-view .use-cases li:nth-child(5) { transition-delay: .30s; }

  /* ================= 10. METHOD — construction progress line ===== */
  /* CSS-only: :has() counts how many steps have been revealed and
     drives a white bar along the four stages. Rides the reveal IO. */
  html.js .approach-section .steps { position: relative; }
  html.js .approach-section .steps::before {
    content: ""; position: absolute; left: 0; top: -1px;
    width: 100%; height: 2px; background: #fff;
    transform: scaleX(var(--hs-progress, 0)); transform-origin: left;
    transition: transform var(--motion-slow) var(--ease-out);
  }
  html[dir="rtl"] .approach-section .steps::before { transform-origin: right; }
  html.js .approach-section .step {
    transition: opacity var(--motion-medium) var(--ease-out), transform var(--motion-medium) var(--ease-out);
  }
  html.js .approach-section .step:not(.in-view) { opacity: .4; transform: translateY(10px); }
  html.js .approach-section .step.in-view { opacity: 1; transform: none; }
  html.js .approach-section .steps:has(.step:nth-child(1).in-view) { --hs-progress: .25; }
  html.js .approach-section .steps:has(.step:nth-child(2).in-view) { --hs-progress: .5; }
  html.js .approach-section .steps:has(.step:nth-child(3).in-view) { --hs-progress: .75; }
  html.js .approach-section .steps:has(.step:nth-child(4).in-view) { --hs-progress: 1; }

  /* ================= 11. PRINCIPLES — calmer, settles =========== */
  html.js .principle.reveal:not(.in-view) { transform: translateY(10px); }
  html.js .principles-grid { position: relative; }
  html.js .principles-grid::after {
    content: ""; position: absolute; left: 0; top: -1px;
    width: 100%; height: 1px; background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--motion-slow) var(--ease-out);
  }
  html[dir="rtl"] .principles-grid::after { transform-origin: right; }
  html.js .principles-grid:has(.principle.in-view)::after { transform: scaleX(1); }

  /* ================= 12. CONTACT — the page converges =========== */
  html.js .contact-section { position: relative; }
  html.js .contact-section::before {
    content: ""; position: absolute; left: 50%; top: 0;
    width: 1px; height: clamp(40px, 7vw, 78px); background: var(--accent);
    transform: scaleY(0); transform-origin: top;
    transition: transform var(--motion-slow) var(--ease-out);
  }
  html.js .contact-section:has(.contact-copy.in-view)::before { transform: scaleY(1); }
  html.js .contact-copy h2 {
    transition: clip-path var(--motion-slow) var(--ease-out) .10s,
                opacity var(--motion-medium) ease .10s;
  }
  html.js .contact-copy:not(.in-view) h2 { clip-path: inset(0 0 100% 0); opacity: 0; }
  html.js .contact-copy.in-view h2 { clip-path: inset(0 0 -0.16em 0); opacity: 1; }
  html.js .contact-copy .contact-lead,
  html.js .contact-copy .contact-paths {
    transition: opacity var(--motion-medium) var(--ease-out),
                transform var(--motion-medium) var(--ease-out);
  }
  html.js .contact-copy:not(.in-view) .contact-lead,
  html.js .contact-copy:not(.in-view) .contact-paths { opacity: 0; transform: translateY(10px); }
  html.js .contact-copy.in-view .contact-lead { opacity: 1; transform: none; transition-delay: .16s; }
  html.js .contact-copy.in-view .contact-paths { opacity: 1; transform: none; transition-delay: .26s; }
}

/* ---- Nest map sticky stage: desktop + motion only, and kept short ---- */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  html.js .map-stage { position: relative; min-height: 116svh; }
  html.js .map-stage .system-map { position: sticky; top: clamp(88px, 13vh, 140px); margin-bottom: 0; }
}

/* ---- Method progress line goes vertical when the steps stack ---- */
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  html.js .approach-section .steps::before {
    width: 2px; height: 100%; top: 0;
    transform: scaleY(var(--hs-progress, 0)); transform-origin: top;
  }
  html[dir="rtl"] .approach-section .steps::before { transform-origin: top; }
  html.js .principles-grid::after,
  html.js .cap-grid::before { display: none; }
}