/* ============================================================
   WARM STUDIO — Juan Jose Arauz · Motion Designer
   Editorial / Swiss-grid · warm cream + coral
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --bg:        #FAF4EE;
  --bg-2:      #F2E4D6;
  --ink:       #7a7470;   /* warm gray — page-wide */
  --muted:     rgba(122,116,112,.55);
  --accent:    #E07B65;   /* salmon */
  --accent-soft: #E8957E;
  --line:      rgba(122,116,112,.18);
  --gray-warm: #7a7470;
  --salmon:    #E07B65;

  --maxw: 1480px;
  --pad: clamp(20px, 5vw, 80px);

  --f-display: "aktiv-grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "aktiv-grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "source-code-pro", "SFMono-Regular", ui-monospace, monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

.section__label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(24px,4vw,48px);
}
.section__label::before {
  content: '';
  display: block;
  width: clamp(28px,4vw,56px);
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
  transform: scaleX(var(--label-line-scale, 1));
  transform-origin: left;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  background: radial-gradient(ellipse 140% 140% at 50% 40%, #FAF4EE 26%, #E7D4C4 100%) fixed;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
img, video { max-width: 100%; display: block; }
.mono { font-family: var(--f-mono); font-weight: 400; }
.dot { color: var(--accent); }
.pre-arauz { color: var(--salmon); }

::selection { background: var(--accent); color: var(--bg); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 9998;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(6) infinite;
}

/* ---------- Screen Glow ---------- */
.screen-glow {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 901;
  box-shadow:
    rgba(255, 178, 134, 0.60) 0px 2px 28px 0px inset,
    rgba(201, 117, 53, 0.38) 0px 2px 120px 6px inset;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-8%,4%)}
  40%{transform:translate(5%,-6%)} 60%{transform:translate(-4%,8%)} 80%{transform:translate(7%,2%)}
}

/* ---------- Custom Cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot {
  position: fixed; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; transform: translate(-50%,-50%);
  opacity: 0; transition: opacity .15s;
}
.cursor__ring {
  position: fixed; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  transform: translate(-50%,-50%) scale(1);
  display: grid; place-items: center;
  transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), opacity .15s;
  opacity: 0;
}
body.cursor-ready .cursor__dot,
body.cursor-ready .cursor__ring { opacity: 1; }
.cursor__label {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em;
  color: #fff; opacity: 0; text-transform: uppercase;
}
body.cur-hover .cursor__ring { width: 64px; height: 64px; background: rgba(255,255,255,.08); }
body.cur-label .cursor__ring { width: 84px; height: 84px; background: #fff; border-color: transparent; }
body.cur-label .cursor__label { opacity: 1; color: var(--ink); }
@media (hover: none) { .cursor { display: none; } }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
}
.preloader__bar { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: transparent; }
.preloader__fill { display: block; height: 100%; width: 0%; background: var(--accent); }
.preloader__brand {
  font-family: var(--f-display);
  font-size: clamp(28px, 5vw, 56px); font-weight: 600; letter-spacing: -.02em;
}
.preloader__count {
  position: absolute; bottom: clamp(20px,5vw,48px); right: var(--pad);
  font-family: var(--f-mono); font-size: clamp(40px, 9vw, 100px); line-height: 1;
}
.preloader__count .pct { font-size: .4em; vertical-align: super; color: var(--accent); }
.preloader.is-done { transform: translateY(-100%); transition: transform 0.85s var(--ease); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px,2vw,22px) var(--pad);
  color: oklch(96% 0.025 50);
  transition: color .4s ease;
}
.nav.is-light { color: var(--ink); }
.nav__pill {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  background: oklch(8% 0.02 35 / .56); backdrop-filter: blur(12px);
  border: 1px solid oklch(96% 0.025 50 / .30); border-radius: 100px;
  padding: 6px 8px; mix-blend-mode: normal;
  transition: opacity 0.3s ease;
}
.nav.is-light .nav__pill {
  background: rgba(255,255,255,.58);
  border-color: var(--line);
}
.nav__pill a {
  font-size: 15px; padding: 7px 14px; border-radius: 100px;
  font-weight: 500;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__pill a:hover { background: var(--ink); color: var(--bg); }
.nav__pill a.is-current {
  background: var(--accent);
  color: var(--bg);
}
.nav__right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.lang { display: flex; align-items: center; gap: 5px; font-size: 15px; font-family: var(--f-mono); }
.lang__opt { opacity: .6; transition: opacity .25s; }
.lang__opt.is-active { opacity: 1; color: var(--accent); }
.lang__sep { opacity: .45; }
.nav__email { font-size: 14px; }
.nav__email:hover { color: var(--accent); }
.nav__burger { display: none; width: 30px; height: 18px; position: relative; }
.nav__burger span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .25s; }
.nav__burger span:nth-child(1){ top: 2px; } .nav__burger span:nth-child(2){ bottom: 2px; }
body.menu-open .nav__burger span:nth-child(1){ top: 8px; transform: rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ bottom: 8px; transform: rotate(-45deg); }
.nav:not(.is-light) .nav__pill a,
.nav:not(.is-light) .lang,
.nav:not(.is-light) .nav__burger {
  text-shadow: 0 1px 10px oklch(0% 0 0 / .30);
}

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 800;
  background: var(--accent); color: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad);
  clip-path: inset(0 0 100% 0); pointer-events: none;
  transition: clip-path .7s var(--ease);
}
body.menu-open .menu { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu__links { display: flex; flex-direction: column; gap: 6px; }
.menu__links a { font-family: var(--f-display); font-size: clamp(40px,12vw,72px); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.menu__foot { margin-top: 48px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; opacity: .85; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  --ink:    #1A120A;
  --muted:  rgba(26,18,10,.55);
  --accent: #E07B65;
  --accent-soft: #E8957E;
  --line:   rgba(26,18,10,.12);
  /* Tall scroll runway — the merged hero+tunnel piece (301 frames: desk
     push-in + tunnel escape) scrubs across this whole height while
     .hero__stage stays pinned. Was two sections (a 1-viewport .hero handoff
     into a separate 950vh .statement--tunnel); now one continuous scrub. */
  position: relative;
  height: 950vh;
  padding: 0;
  background: #1A120A;
}
/* Pinned viewport-sized stage — everything visible lives in here so it
   stays in place while .hero (the tall runway above) scrolls underneath it. */
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: block;
  background: #1A120A;
}
.hero__stage::before {
  /* Old .hero::before — warm gradient wash that helps the name/deck text pop
     over the desk footage. Only relevant for the hero portion of the scrub
     (frames 0-148); fades out via --hero-text-opacity as the tunnel takes over. */
  content: '';
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 78% 20%, oklch(72% 0.13 55 / .24) 0%, transparent 62%),
    radial-gradient(ellipse 105% 100% at 48% 44%, transparent 42%, oklch(14% 0.04 36 / .42) 100%),
    linear-gradient(to top, oklch(11% 0.04 36 / .62) 0%, oklch(18% 0.045 38 / .30) 34%, transparent 64%),
    linear-gradient(90deg, oklch(12% 0.04 36 / .34) 0%, transparent 26%, transparent 68%, oklch(12% 0.04 36 / .24) 100%),
    linear-gradient(oklch(62% 0.13 45 / .14) 0%, oklch(52% 0.10 38 / .06) 100%);
  opacity: var(--hero-text-opacity, 1);
}
.hero__stage::after {
  /* Old .hero::after — faint grid, same hero-only fade. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, oklch(96% 0.025 50 / .10) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, oklch(96% 0.025 50 / .08) 0 1px, transparent 1px 100%);
  background-size: 25vw 100%, 100% 25vh;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  opacity: calc(var(--hero-text-opacity, 1) * 0.18);
}

.hero__copy {
  position: absolute;
  left: var(--pad);
  bottom: clamp(60px,8.5vh,104px);
  z-index: 5;
  width: min(920px, calc(100vw - (var(--pad) * 2)));
  transform: translate3d(0, var(--hero-copy-y, 0px), 0);
  opacity: var(--hero-copy-opacity, 1);
  will-change: transform, opacity;
}
.hero__title {
  display: flex;
  flex-direction: column;
  gap: clamp(0px,.25vw,4px);
}
.hero__title-line {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(68px,12.4vw,176px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -0.04em;
  overflow: hidden;
  color: oklch(97% 0.025 50);
  text-shadow: 0 18px 48px oklch(3% 0.02 30 / .35);
}
.hero__title-line--juan { margin-left: 0; }
.hero__title-line--arauz {
  margin-left: 0;
  color: var(--salmon);
}
.hero__word { display: inline-block; }
.hero__deck {
  max-width: 38ch;
  margin-top: clamp(20px,2.6vh,30px);
  margin-left: 0;
  font-size: clamp(16px,1.5vw,22px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: .005em;
  color: oklch(97% 0.02 50 / .92);
  text-shadow: 0 1px 20px oklch(8% .025 35 / .55);
}
.hero__role {
  display: block;
  margin-bottom: clamp(10px,1.3vh,16px);
  font-family: var(--f-body);
  font-size: clamp(11px,0.9vw,13px);
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #E07B65;
  text-shadow: 0 1px 14px oklch(12% .03 35 / .6);
}
.hero__role--top {
  margin-top: 0;
  margin-bottom: clamp(16px,2vh,26px);
}
.hero__hook {
  position: absolute;
  right: var(--pad);
  top: 44%;
  transform: translateY(-50%);
  z-index: 5;
  max-width: 13ch;
  text-align: right;
  font-family: var(--f-display);
  font-size: clamp(26px,3.1vw,48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: oklch(98% 0.02 50 / .97);
  text-shadow: 0 2px 26px oklch(8% .025 35 / .6);
  text-wrap: balance;
  opacity: var(--hero-hook-opacity, 1);
}
.hero__sub {
  display: block;
  margin-top: clamp(10px,1.3vh,15px);
  max-width: 46ch;
  font-size: clamp(14px,1.05vw,17px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .005em;
  color: oklch(94% 0.018 50 / .7);
  text-wrap: balance;
}
.hero__proof {
  margin-top: clamp(12px,1.6vh,20px);
  font-family: var(--f-mono);
  font-size: clamp(11px,.95vw,13px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: oklch(96% 0.02 50 / .6);
  text-shadow: 0 1px 12px oklch(20% .04 40 / .5);
}
.hero__proof b { font-weight: 600; letter-spacing: .1em; color: oklch(84% .1 55 / .95); }
body:not(.hero-ready) .hero__role--top,
body:not(.hero-ready) .hero__deck,
body:not(.hero-ready) .hero__word {
  opacity: 0;
}
body:not(.hero-ready) .hero__hook {
  opacity: 0;
  transform: translateY(-50%) translateX(14px);
}
body:not(.hero-ready) .hero__word {
  transform: none;
}
body:not(.hero-ready) .hero {
  opacity: 0;
}

/* Strip — REMOVED */

/* ===== STATEMENT (motion video + text, scroll-scrubbed) ===== */
.statement {
  padding: 0;
  position: relative;
}
.statement__stage {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: visible;
  display: flex;
  align-items: center;
  /* flat warm cream — no hero→ansatz gradient seam */
  background: var(--bg);
}
.ansatz-seam { display: none; }
.ansatz-glow { display: none; }
/* 3D — abstract sphere cluster (Three.js), rotates with scroll. Canvas = right column. */
.ansatz-3d {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  display: block;
}
/* ANSATZ eyebrow — kicker at the top of the content column (leads into the headline) */
.ansatz-eyebrow::before { background: var(--gray-warm); }
.ansatz-eyebrow {
  position: static;
  margin: 0 0 clamp(10px, 1.6vh, 22px);
  z-index: 3;
  color: var(--accent);
  font-family: var(--f-mono, var(--f-body));
  font-size: clamp(11px, 0.92vw, 15px);
  letter-spacing: .28em;
  text-transform: uppercase;
}
/* Statement appears in the SAME centre area the services occupied */
.ansatz-copy {
  position: absolute;
  left: clamp(20%, 25vw, 36%);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: none;
  pointer-events: none;
}
.is-mblur-line { filter: url(#mblur-line); }
.is-mblur-soft { filter: url(#mblur-soft); }
.statement .section__label,
.statement__line { position: relative; z-index: 2; }
.stmt-top {
  width: 100%;
  text-align: left;
  padding-left: clamp(36px, 5vw, 84px);
}
.statement__line {
  font-family: var(--f-display);
  font-size: clamp(38px, 4.7vw, 94px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: oklch(91% .024 58);
  text-align: left;
  width: clamp(300px, 52vw, 980px);
  max-width: none;
  white-space: normal;
  text-wrap: normal;
  margin: 0;
}
.statement__line .kw {
  color: var(--accent);
  display: inline-block;
  will-change: transform;
}
/* coral emphasis only — no perpetual loop (it bugged the eye) */
.kw--move, .kw--grab { animation: none; }

/* keyword as filled coral pill (juanmora "click" affordance) */
.statement__line .kw-pill {
  color: oklch(98% .015 70);
  background: var(--accent);
  border-radius: 999px;
  padding: .04em .42em .12em;
  margin: 0 .04em;
  line-height: 1;
  box-shadow: 0 10px 28px oklch(60% .12 45 / .28);
}

.svc {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}
.svc-canvas {
  position: relative;
  width: 100%;
  height: clamp(360px, 50vh, 560px);
}

/* ===== ANSATZ — cohesive block: headline + service list, accumulating ===== */
.ansatz-block {
  position: absolute;
  left: clamp(36px, 8vw, 150px);
  right: clamp(36px, 6vw, 120px);
  top: clamp(13%, 14vh, 16%);
  transform: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 34px);
  pointer-events: none;
}
.ansatz-svc {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 18px);
}
/* bridge into Work (continuity), bottom-left space */
.ansatz-bridge {
  position: absolute;
  left: clamp(36px, 8vw, 150px);
  bottom: clamp(48px, 10vh, 120px);
  z-index: 2;
  max-width: 16ch;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(28px, 3.9vw, 74px);
  line-height: 1.04;
  letter-spacing: -.03em;
  /* warm brand tone — same amber hue as "Arauz" in the hero, darkened to read on cream */
  color: var(--accent);
  opacity: 0;
  text-wrap: balance;
  pointer-events: none;
  will-change: opacity, transform, filter;
}
.asl {
  position: relative;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(23px, 2.7vw, 52px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: oklch(91% .024 58 / .8);
  opacity: 0;
  white-space: nowrap;
  will-change: opacity, transform;
}
.asl .asw { display: inline-block; }
/* bridge — pale ghost letters fill to warm colour, one by one (juanmora-style colour wipe) */
.ansatz-bridge .bsw { display: inline-block; white-space: nowrap; }
.ansatz-bridge .bsc { will-change: opacity; }

/* keep text above the soft shapes */
.statement__stage .stmt-top,
.ansatz-trust { position: relative; z-index: 2; }

/* ===== TUNNEL STATEMENT — scroll-scrubbed frame sequence ===== */
/* Ambient vignette for the tunnel portion of the scrub — was previously an
   animated transition device (.tunnel-stage::before, fading out on section
   handoff); now just a constant darkening so the neon doesn't blow out and
   the centre stays the focus. A real element (not ::before/::after) since
   .hero__stage already uses both pseudo-elements for the hero-only gradient. */
.tunnel-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 50% 58%, transparent 0%, oklch(4% .025 35 / .72) 78%),
    linear-gradient(0deg, oklch(4% .025 35 / .70), transparent 42%);
  /* Disabled — inherited from the old standalone .statement--tunnel section,
     doesn't belong on the new merged hero. Rule kept intact to re-enable. */
  opacity: 0;
}
.tunnel-whiteout {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.tunnel-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  opacity: 1;
  filter: saturate(var(--ao-sat, 1)) brightness(var(--ao-bright, 1));
  transform: scale(var(--ao-scale, 1));
  transform-origin: center;
  will-change: opacity, filter, transform;
}
.ansatz-overlay {
  --ao-measure: 0;
  --ao-glow: .16;
  --ao-vignette: .44;
  --ao-field-x: 0px;
  --ao-field-y: 0px;
  --ao-field-rot: 0deg;
  --ao-figure-x: 0px;
  --ao-figure-y: 0px;
  --ao-figure-scale: .9;
  --ao-figure-rot: 0deg;
  --ao-figure-opacity: 0;
  --ao-figure-blur: 12px;
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  /* Dark background removed — was crushing the tunnel to near-black while
     the frame scrub was still visible/playing. Container + opacity timing
     kept intact, tagline text still lives here and reveals on its own. */
  background: none;
  will-change: opacity;
}
.ansatz-overlay::before {
  display: none;
}
.ansatz-overlay::after {
  /* Vignette darkening removed — same reason as the overlay background. */
  display: none;
}
.ansatz-overlay__glow {
  display: none;
  position: absolute;
  z-index: 1;
  left: clamp(32px, 8vw, 128px);
  bottom: clamp(58px, 12vh, 124px);
  width: clamp(220px, 42vw, 720px);
  height: clamp(180px, 34vh, 380px);
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 0% 100%, oklch(63% .13 48 / .26) 0%, transparent 68%),
    radial-gradient(ellipse 58% 70% at 35% 56%, oklch(92% .035 58 / .08) 0%, transparent 72%);
  filter: blur(28px);
  opacity: var(--ao-glow);
  transform: translate3d(var(--ao-glow-x, 0px), var(--ao-glow-y, 0px), 0);
  will-change: opacity, transform;
}
.ansatz-figure {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: clamp(620px, 78vw, 1180px);
  aspect-ratio: 1.62;
  pointer-events: none;
  opacity: var(--ao-figure-opacity);
  transform:
    translate3d(calc(-50% + var(--ao-figure-x)), calc(-50% + var(--ao-figure-y)), 0)
    rotate(var(--ao-figure-rot))
    scale(var(--ao-figure-scale));
  transform-origin: center;
  filter: blur(var(--ao-figure-blur)) saturate(.62) contrast(1.48) brightness(1.06);
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
}
.ansatz-figure::before,
.ansatz-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 46% 54% 52% 48% / 42% 44% 56% 58%;
}
.ansatz-figure::before {
  background:
    linear-gradient(112deg, oklch(82% .018 58 / .08), transparent 38%, oklch(68% .018 42 / .10)),
    url('../assets/fog-wrap-frames/f118.jpg'),
    url('../assets/tunnel-frames/f118.jpg');
  background-size: 100% 100%, cover, cover;
  background-position: center, center, center 52%;
  background-blend-mode: soft-light, screen, luminosity;
  opacity: 0;
  clip-path: polygon(1% 38%, 22% 16%, 55% 3%, 88% 16%, 100% 42%, 88% 72%, 58% 95%, 20% 84%, 0% 60%);
}
.ansatz-figure::after {
  inset: 3%;
  background:
    url('../assets/fog-wrap-frames/f118.jpg'),
    radial-gradient(ellipse 78% 50% at 48% 52%, oklch(80% .018 58 / .12), transparent 74%);
  background-size: cover, 100% 100%;
  background-position: center;
  background-blend-mode: screen, normal;
  opacity: 0;
  transform: rotate(-5deg) scale(1.02);
  mix-blend-mode: screen;
  clip-path: polygon(8% 32%, 34% 14%, 72% 12%, 94% 38%, 78% 70%, 48% 86%, 15% 76%, 0% 55%);
}
.ao-fold {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  transform: translate3d(0, calc(var(--ao-field-y) * .18), 0);
  will-change: transform;
}
.ao-fold::before {
  display: none;
}
.ao-headline {
  font-family: var(--f-display);
  font-size: clamp(56px, 10.5vw, 152px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -.045em;
  color: oklch(97% .005 55);
  margin: 0;
  text-align: center;
}
.ao-line {
  display: block;
  position: relative;
  overflow: visible;
  padding: 0.08em 0 0.16em;
}
.ao-word {
  display: inline-block;
  margin-right: 0.22em;
  will-change: transform, opacity, filter;
}
.ao-word:last-child { margin-right: 0; }
.ao-word--tag {
  font-family: var(--f-display);
  font-size: clamp(38px, 5.15vw, 74px);
  font-weight: 600;
  font-style: normal;
  line-height: .94;
  color: oklch(88% .026 58);
  letter-spacing: -0.028em;
  text-shadow:
    0 18px 72px oklch(0% 0 0 / .72);
}
.ao-tagline__lead,
.ao-tagline__thought {
  display: inline-block;
}
.ao-tagline__lead {
  color: oklch(91% .024 58);
}
.ao-tagline__thought {
  color: var(--accent);
  text-shadow:
    0 18px 72px oklch(0% 0 0 / .68);
}
.ao-tagline-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 48px));
}
.ao-byline {
  position: absolute;
  top: calc(50% + clamp(66px, 8.5vw, 102px));
  left: 0;
  right: 0;
  text-align: center;
}
.ao-byline__text {
  font-family: var(--f-mono);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(91% .024 58 / .55);
  display: inline-block;
  will-change: transform, opacity, filter;
}
.ao-services-list {
  position: absolute;
  inset: clamp(70px, 11vh, 118px) clamp(34px, 6vw, 92px);
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  display: none;
  transform: translate3d(var(--ao-field-x), var(--ao-field-y), 0) rotate(var(--ao-field-rot));
  transform-origin: center;
  will-change: transform;
}
.ao-services-list .ao-line {
  position: absolute;
  display: block;
  padding: 0;
}
.ao-services-list .ao-line::before {
  display: none;
}
.ao-services-list .ao-line:nth-child(1) {
  left: 3vw;
  top: 14vh;
}
.ao-services-list .ao-line:nth-child(2) {
  right: 4vw;
  top: 18vh;
}
.ao-services-list .ao-line:nth-child(3) {
  left: 13vw;
  bottom: 13vh;
}
.ao-services-list .ao-line:nth-child(4) {
  right: 11vw;
  bottom: 9vh;
}
.ao-svc {
  font-family: var(--f-display);
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: oklch(96% .012 56 / .92);
  text-shadow: 0 14px 42px oklch(0% 0 0 / .42);
}
.ao-headline .kw {
  color: var(--accent);
  font-style: italic;
}
.ao-services {
  font-family: var(--f-display);
  font-size: clamp(20px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: oklch(97% .005 55 / .70);
  margin: 0.55em 0 0;
  text-align: center;
}
.ao-sep {
  color: var(--accent);
  margin: 0 0.1em;
}

/* iridescent soap/water bubbles — translucent, light-fragmenting, slow float */
.ansatz-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; display: none; }
.ansh { position: absolute; will-change: transform; border-radius: 50%; }
.bub > i {
  display: block;
  width: 100%; height: 100%; border-radius: 50%;
  animation: anshFloat var(--fd,16s) ease-in-out infinite;
  animation-delay: var(--fdl, 0s);
  background:
    /* primary specular highlight */
    radial-gradient(circle at 30% 26%, oklch(100% 0 0 / .92) 0%, oklch(100% 0 0 / 0) 13%),
    /* secondary glint */
    radial-gradient(circle at 73% 78%, oklch(100% 0 0 / .5) 0%, oklch(100% 0 0 / 0) 9%),
    /* iridescent thin-film sheen */
    conic-gradient(from 210deg at 50% 50%,
      oklch(86% .12 30 / .34),
      oklch(88% .10 42 / .28),
      oklch(90% .09 58 / .26),
      oklch(92% .08 32 / .24),
      oklch(86% .12 30 / .34)),
    /* bright rim, hollow centre */
    radial-gradient(circle at 50% 50%,
      oklch(96% .03 60 / .06) 0%,
      oklch(96% .03 60 / 0) 52%,
      oklch(99% .04 70 / .34) 77%,
      oklch(99% .04 70 / 0) 84%);
  box-shadow:
    inset 0 0 50px oklch(100% 0 0 / .22),
    inset -12px -14px 38px oklch(72% .08 42 / .14),
    0 30px 64px oklch(60% .06 50 / .12);
  border: 1px solid oklch(100% 0 0 / .42);
  backdrop-filter: blur(3px) saturate(1.25);
  -webkit-backdrop-filter: blur(3px) saturate(1.25);
}
@keyframes anshFloat {
  0%,100% { transform: translateY(0) rotate(calc(var(--rot,6deg) * -1)); }
  50%     { transform: translateY(var(--by,-22px)) rotate(var(--rot,6deg)); }
}

.bub-1 { width: clamp(300px,34vw,560px); aspect-ratio: 1; left: -7%; top: 40%; }
.bub-2 { width: clamp(240px,28vw,460px); aspect-ratio: 1; right: -6%; top: 1%; }
.bub-3 { width: clamp(190px,23vw,380px); aspect-ratio: 1; right: 12%; bottom: 2%; }
.bub-4 { width: clamp(110px,13vw,200px); aspect-ratio: 1; left: 15%; bottom: 12%; }
.bub-5 { width: clamp(130px,16vw,250px); aspect-ratio: 1; left: 6%; top: 5%; }

/* closing line — confident, coral keyword */
.ansatz-trust { margin: clamp(44px,7vh,96px) auto 0; max-width: 22ch; text-align: center;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(22px,3vw,42px);
  line-height: 1.1; letter-spacing: -.015em; color: var(--ink); }
.ansatz-trust .kw-trust { color: var(--accent); }

.svc-path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.svc-path {
  stroke: var(--accent);
  stroke-width: 1.7;
  opacity: .6;
  fill: none;
}
.svc-path-lead {
  stroke: var(--accent);
  stroke-width: 2.4;
  opacity: .9;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px oklch(62% .13 45 / .5));
}
.svc-marker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px oklch(62% .13 45 / .13), 0 0 16px oklch(62% .13 45 / .42);
  opacity: 0;
}
.svc-knode {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: transparent;
  transform: scale(.5);
  opacity: 0;
  transition: transform .4s cubic-bezier(0.76,0,0.24,1), background .4s, opacity .4s;
}
.svc-knode.is-on {
  transform: scale(1);
  opacity: 1;
  background: var(--accent);
  box-shadow: 0 0 0 5px oklch(62% .13 45 / .12);
}
.svc-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.svc-word {
  z-index: 3;
}
.deco-bracket {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  opacity: .65;
  will-change: transform;
}
.deco-bracket::before,
.deco-bracket::after {
  content: '';
  position: absolute;
  background: var(--accent);
}
.deco-bracket--tl::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
}
.deco-bracket--tl::after {
  top: 0;
  left: 0;
  width: 1.5px;
  height: 100%;
}
.deco-bracket--br::before {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1.5px;
}
.deco-bracket--br::after {
  bottom: 0;
  right: 0;
  width: 1.5px;
  height: 100%;
}
.deco-ticks {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 34px;
  height: 10px;
  margin: -5px 0 0 -17px;
  background-image: repeating-linear-gradient(90deg, var(--accent) 0 1.5px, transparent 1.5px 12px);
  opacity: .6;
  will-change: transform;
}
.deco-cross {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  opacity: .6;
  will-change: transform;
}
.deco-cross::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transform: translateY(-50%);
}
.deco-cross::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  background: var(--accent);
  transform: translateX(-50%);
}
.deco-square {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 1.5px solid var(--accent);
  opacity: .6;
  will-change: transform;
}
.deco-ring {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  opacity: .6;
  will-change: transform;
}
.svc-word {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  transform: translate(-2%, -50%);
  display: flex;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
  will-change: transform, opacity, clip-path;
}
.svc-no {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--accent);
  opacity: .8;
  align-self: flex-start;
  margin-top: .2em;
}
.svc-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 52px);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: color .4s ease;
}
.svc-word.is-active .svc-name { color: var(--accent); }

.tl-foot {
  position: absolute;
  left: clamp(24px, 6vw, 120px);
  right: auto;
  bottom: clamp(28px, 5vh, 72px);
  text-align: left;
  max-width: 24ch;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.45;
  color: oklch(44% .012 45);
  /* keep pre-reveal state */
  opacity: 0;
}
.tl-foot::before {
  content:'';
  display:inline-block;
  width:16px;
  height:1px;
  background:var(--accent);
  vertical-align:middle;
  margin-right:8px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s cubic-bezier(0.76,0,0.24,1);
}
.tl-foot.is-visible::before { transform:scaleX(1); }

/* pre-reveal (no flash) */
body .statement .tl-foot { opacity: 0; }

/* pre-reveal */
body .statement .statement__line { opacity: 0; }

@media (max-width: 760px) {
  .statement__stage { padding: clamp(36px, 6vh, 72px) 0; }
  .stmt-top { padding-left: clamp(22px, 7vw, 34px); }
  .statement__line { font-size: clamp(26px, 7vw, 40px); max-width: 18ch; }
  .svc {
    max-width: 100%;
  }
  .svc-canvas { height: clamp(300px, 52vh, 460px); }
  .svc-name { font-size: clamp(22px, 6.5vw, 34px); }
  .svc-word[data-i='0'] { --x: 7%; }
  .svc-word[data-i='1'] { --x: 34%; }
  .svc-word[data-i='2'] { --x: 9%; }
  .svc-word[data-i='3'] { --x: 28%; }
  .svc-knode { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
  .deco-bracket { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .deco-ticks { width: 28px; margin-left: -14px; opacity: .5; }
  .deco-cross { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
  .deco-square { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
  .deco-ring { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .tl-foot {
    position: static;
    text-align: left;
    right: auto;
    bottom: auto;
    margin-top: clamp(32px, 6vh, 56px);
    max-width: 90%;
  }
}

/* ============================================================
   SERVICES (post-tunnel)
   ============================================================ */

/* ============================================================
   WORK
   ============================================================ */
.work {
  position: relative;
  z-index: 2;
  background: var(--bg);
  margin-top: -90vh;
}
.work__hook-zone {
  height: 90vh;
  position: relative;
  display: flow-root;
}
.work__hook {
  position: sticky;
  /* font-size matches .work__hook-line's own clamp, so 1em here scales
     exactly with the heading's real rendered size at any viewport — the
     0.94em offset (line-height .94, half of 2 lines) centers the HEADING
     itself at 50vh, not the whole heading+menu block (a translateY(-50%)
     on the whole box centers the box, pulling the heading off 50vh by
     roughly half the menu's height — that was the bug). Matches
     .ao-tagline-wrap's true viewport-center exactly, same technique. */
  font-size: clamp(38px, 5.15vw, 74px);
  top: calc(50vh - 0.94em);
  margin-top: calc(50vh - 0.94em);
  width: 100%;
  text-align: center;
  padding: 0 var(--pad);
  pointer-events: none;
  /* .work__inner (the project cards panel) has z-index:2 and is a sibling
     branch, not a descendant — .work__menu's own z-index:2 only wins inside
     THIS element's stacking context, not against .work__inner's. Without an
     explicit z-index here, this whole sticky block (auto = 0) loses to
     .work__inner wherever they visually overlap once the panel is open,
     silently eating clicks on the category tabs. */
  z-index: 3;
}
.work__hook-line {
  font-family: var(--f-display);
  font-size: clamp(38px, 5.15vw, 74px);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -0.028em;
  margin: 0;
  color: var(--ink);
}
.wh-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.wh-word--accent { color: var(--accent); }
.work__inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: clamp(780px, 106vh, 1000px);
  padding: clamp(40px,7vh,84px) var(--pad) clamp(100px,16vh,180px);
}
.work__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(56px,8vw,96px); position: relative; z-index: 2; }
.work__title { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.work__all { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; transition: color 0.3s ease; }
.work__all:hover { color: var(--accent); }
.work__watermark {
  position: absolute; top: clamp(40px,10vh,120px); left: 0; width: 100%;
  text-align: center; pointer-events: none; z-index: 1; overflow: hidden;
}
.work__watermark span {
  font-size: clamp(140px,32vw,460px); font-weight: 600; line-height: .8;
  color: var(--accent-soft); opacity: .18; letter-spacing: -.04em; white-space: nowrap;
  display: inline-block;
}
.work__menu {
  /* Absolutely positioned at the exact same offset .ao-byline uses below
     .ao-tagline-wrap's center (clamp(66px,8.5vw,102px) past 50vh), minus
     .work__hook's own top offset — so the gap between heading and
     complements matches "Bewegung, die denkt." exactly instead of the
     much tighter clamp(22px,2.2vw,30px) flow-margin this used to have. */
  position: absolute;
  left: 0;
  right: 0;
  top: calc(clamp(66px, 8.5vw, 102px) + 0.94 * clamp(38px, 5.15vw, 74px));
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(18px, 2.4vw, 36px);
  align-items: end;
  justify-content: center;
  width: min(980px, calc(100vw - (var(--pad) * 2)));
  margin: 0 auto;
  pointer-events: auto;
  transition: opacity .55s var(--ease-out);
  will-change: opacity;
}
.work__cat {
  appearance: none;
  border: 0;
  background: transparent;
  color: oklch(42% 0.02 58 / 0.98);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-height: clamp(52px, 7vw, 92px);
  padding: 0 0 clamp(12px, 1.6vw, 20px);
  text-align: left;
  white-space: nowrap;
  transform-origin: left bottom;
  will-change: transform, opacity, filter;
  transition: color .32s var(--ease);
}
.work__cat.is-revealed { color: var(--accent); }
.work__cat:hover,
.work__cat.is-active,
.work__cat[aria-selected="true"] {
  color: var(--accent);
}
.work__cat.is-active,
.work__cat[aria-selected="true"] {
  font-weight: 700;
}
.work__cat:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 5px;
}
.work__panel {
  --work-panel-width: min(1760px, calc(100vw - clamp(24px, 3vw, 48px)));
  position: relative;
  z-index: 2;
  width: var(--work-panel-width);
  margin-left: calc((100% - var(--work-panel-width)) / 2);
  padding-top: clamp(38px, 6vw, 72px);
  will-change: opacity, transform, filter;
}
.work__panel[hidden],
.work__sources[hidden] {
  display: none;
}
.work__carousel {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
}
.work__carousel:focus-visible {
  outline: 1px solid oklch(64% 0.09 36 / 0.65);
  outline-offset: 10px;
}
.work__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 34px);
  cursor: grab;
  user-select: none;
  will-change: transform;
}
.work__track.is-dragging { cursor: grabbing; }
.work__track .work__project,
.work__track .work__media {
  cursor: grab;
  user-select: none;
}
.work__track video {
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.work__track.is-dragging .work__media { cursor: grabbing; }
.work__track.is-dragging .work__project,
.work__track.is-dragging video { cursor: grabbing; }
.work__project {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  flex: 0 0 clamp(258px, 30vw, 450px);
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.work__panel.is-revealing .work__project {
  transition: none;
}
.work__project.is-visible { opacity: 1; filter: blur(0px); }
.work__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(14px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.work__project.is-visible .work__info { transform: translateY(0); }
.work__num {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.1em;
  opacity: 0.55;
}
/* Roll-text structure */
.rt {
  display: block;
  overflow: hidden;
  position: relative;
}
.rt__line {
  display: block;
  transition: transform 0.32s var(--ease);
  /* .rt is overflow:hidden with no explicit height (auto-sized to this
     line's tight 0.98 line-height), so descenders (y/g/j/p/q — "Hype",
     "Generated Frame", "Boque auf Croque") get clipped at the bottom.
     Both .rt__line and .rt__line--dup share this class, so the reserve
     stays symmetric and the hover roll (translateY(-100%) / top:100%)
     still lines them up edge-to-edge. */
  padding-bottom: 0.15em;
}
.rt__line--dup {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.work__project:hover .rt__line { transform: translateY(-100%); }

.work__name {
  font-family: var(--f-display);
  font-size: clamp(21px, 2.1vw, 32px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
  will-change: transform;
}
.work__project:hover .work__name { transform: translateX(8px); }
.work__meta {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.work__desc {
  font-family: var(--f-body);
  font-size: clamp(13px,1.05vw,15px);
  line-height: 1.45;
  color: var(--muted);
  max-width: 32ch;
  margin: 2px 0 0;
  display: none;
}
.work__media {
  cursor: pointer;
  transform: translateY(18px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.07s;
}
.work__project.is-visible .work__media { transform: translateY(0); }
.work__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 14px 14px 60px rgba(122, 116, 112, 0.25),
              5px 5px 20px rgba(122, 116, 112, 0.12);
}
@media (hover: hover) and (pointer: fine) {
  .work__frame { transition: transform 0.3s cubic-bezier(0.23,1,0.32,1); }
  .work__project:hover .work__frame { transform: scale(1.03); }
}
.work__frame::after {
  content: '';
  position: absolute; inset: 0;
  background: oklch(18% .015 45 / 0);
  transition: background 0.45s ease;
  border-radius: inherit;
  pointer-events: none;
}
.work__project:hover .work__frame::after { background: oklch(18% .015 45 / 0.10); }
.work__frame-inner {
  position: absolute;
  inset: -9% 0;
  will-change: transform;
}
.work__frame-inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: oklch(42% 0.02 58 / 0.62);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, oklch(97% .012 58), oklch(91% .018 58)),
    var(--bg-2);
}
.work__web {
  max-width: 760px;
  padding: clamp(34px, 5vw, 64px) 0 clamp(10px, 2vw, 24px);
}
.work__web-copy {
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(36px, 6vw, 92px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: .92;
  margin: clamp(18px, 3vw, 34px) 0 0;
}
@media (max-width: 768px) {
  .work__menu {
    /* gap must absorb the active tab's scale growth (transform-origin:left
       bottom grows it rightward only, paint-only — flex doesn't reserve
       extra space for it) so it never touches the next label. */
    gap: clamp(18px, 5vw, 20px);
    justify-content: center;
    flex-wrap: nowrap;
    overflow: visible;
  }
  .work__menu::-webkit-scrollbar { display: none; }
  .work__cat {
    min-height: auto;
    padding: 6px 0;
    font-size: clamp(9px, 2.6vw, 11px);
  }
  .work__track { gap: clamp(18px, 6vw, 26px); }
  .work__project,
  .work__carousel[data-cat] .work__project:nth-child(n) {
    flex-basis: min(70vw, 330px);
  }
  .work__info,
  .work__media { transform: none; }
  .ao-byline__text { letter-spacing: 0.05em; }
  .work__inner { padding-top: clamp(48px,6vh,72px); padding-bottom: clamp(64px,10vh,100px); }
  .work__panel { width: 100%; margin-left: 0; }
  .work__head { margin-bottom: 32px; }
}

/* Phone landscape (wide but short — escapes the max-width:768px portrait
   block above and gets the desktop layout otherwise, which is correct: the
   categories/cards there already behave like desktop). The one thing that
   doesn't translate is .work__inner's min-height: clamp(780px,106vh,1000px)
   — at these heights 106vh is nowhere near 780px, so it floors at the flat
   780px and forces a dead, empty scroll stretch with no content in it.
   Letting the box size to its own content (min-height:auto) is the minimal
   fix: nothing else here changes, so categories/cards keep the exact
   desktop behavior already verified. Gated on max-height so normal
   portrait phones, tablets and desktop/laptop windows are untouched. */
@media (max-width: 950px) and (max-height: 500px) {
  .work__inner { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .work__menu {
    opacity: 1 !important;
    transition: none;
  }
  .work__cat,
  .work__panel {
    filter: none !important;
    transform: none !important;
    transition: none;
  }
}


/* ============================================================
   REVEAL (GSAP SplitType targets default hidden)
   ============================================================ */
.reveal-lines .line { overflow: hidden; }
.reveal-lines .line > * { display: inline-block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav__pill { display: none; }
  .nav__email { display: none; }
  .nav__burger { display: block; }
  .hero__copy { width: min(680px, calc(100vw - (var(--pad) * 2))); }
  .hero__title-line { font-size: clamp(62px,17vw,118px); }
  .hero__title-line--arauz { margin-left: 0; }
  .ao-fold {
    inset: 0;
  }
  .ansatz-figure { width: clamp(560px, 92vw, 860px); }
  .ao-word--tag { font-size: clamp(38px, 8vw, 68px); }
  .ao-services-list { inset: clamp(56px, 10vh, 88px) clamp(26px, 5vw, 56px); }
  .ao-services-list .ao-line:nth-child(1) { left: 0; top: 16vh; }
  .ao-services-list .ao-line:nth-child(2) { right: 0; top: 20vh; }
  .ao-services-list .ao-line:nth-child(3) { left: 6vw; bottom: 14vh; }
  .ao-services-list .ao-line:nth-child(4) { right: 4vw; bottom: 11vh; }
  .ao-svc { font-size: clamp(11px, 1.7vw, 14px); }
  .ao-headline { font-size: clamp(44px, 12vw, 82px); max-width: 10.5ch; }
  .ao-services { max-width: min(520px, 88vw); }
  .ao-coord--tr { top: 22px; right: 22px; }
  .ao-coord--br { right: 22px; bottom: 22px; }
}
@media (max-width: 560px) {
  .hero {
    background-position: center 26%;
  }
  .hero__copy { bottom: clamp(44px,6vh,80px); }
  .hero__deck { max-width: 32ch; }
  .nav__right { gap: 12px; }
  .ao-fold {
    inset: 0;
  }
  .ansatz-figure { width: clamp(420px, 126vw, 620px); }
  .ao-tagline-wrap { width: calc(100vw - 36px); }
  .ao-word--tag { font-size: clamp(32px, 9.8vw, 48px); }
  .ao-services-list {
    left: 18px;
    right: 18px;
    top: auto;
    bottom: clamp(34px, 7vh, 58px);
    display: none;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 15px;
  }
  .ao-services-list .ao-line {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
  .ao-services-list .ao-line:not(:first-child)::before {
    content: "/";
    display: block;
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    color: oklch(83% .105 56 / .28);
  }
  .ao-eyebrow { margin-bottom: 28px; }
  .ao-headline { font-size: clamp(40px, 13vw, 64px); }
  .ao-services { gap: 0 18px; padding-top: 16px; }
  .ao-svc {
    font-size: clamp(11px, 3.2vw, 14px);
    line-height: 1.14;
    white-space: normal;
  }
  .ao-coord { display: none; }
}

/* ============================================================
   WORK LIGHTBOX
   ============================================================ */
.work-lb {
  position: fixed; inset: 0; z-index: 9000;
  background: oklch(6% .008 45 / 0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s var(--ease-out);
  backdrop-filter: blur(4px);
}
.work-lb.is-open { opacity: 1; pointer-events: all; }
.work-lb__inner {
  position: relative;
  width: min(86vw, 1180px);
  max-height: min(82vh, 780px);
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 0.78fr);
  gap: clamp(34px, 5.6vw, 90px);
  align-items: center;
}
.work-lb__media {
  min-width: 0;
  height: min(74vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-lb.is-portrait .work-lb__media {
  width: min(38vw, 430px);
  justify-self: start;
}
.work-lb__inner video {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  border-radius: 4px;
}
.work-lb.is-portrait .work-lb__inner video {
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  background: oklch(3% .006 45);
}
.work-lb__case {
  color: oklch(91% .014 55);
  max-width: 28ch;
  align-self: center;
}
.work-lb__label {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: clamp(10px, 0.72vw, 11px);
  line-height: 1.55;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}
.work-lb__kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: clamp(12px, 0.96vw, 14px);
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.84;
}
.work-lb__role,
.work-lb__credits {
  margin: 0;
  color: oklch(88% .014 55 / .72);
  font-size: clamp(12px, 0.9vw, 13px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.work-lb__title {
  color: oklch(97% .006 55);
  font-family: var(--f-display);
  font-size: clamp(20px, 1.55vw, 27px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0 0 clamp(14px, 1.8vw, 24px);
  text-wrap: balance;
}
.work-lb__question {
  color: oklch(95% .01 55 / .92);
  margin: 0 0 10px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.4;
}
.work-lb__body {
  margin: 0 0 clamp(18px, 2vw, 24px);
  color: oklch(87% .012 55 / .76);
  font-size: clamp(13px, 0.98vw, 15px);
  line-height: 1.5;
  max-width: 30ch;
}
.work-lb__role { margin-bottom: 2px; }
.work-lb__close {
  position: absolute; top: -38px; right: 0;
  background: none; border: none; cursor: pointer;
  color: oklch(90% .01 45); font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 0.14em;
  opacity: 0.56; transition: opacity 0.18s var(--ease);
  text-transform: uppercase; padding: 8px;
}
.work-lb__close:hover { opacity: 1; }
@media (max-width: 900px) {
  .work-lb {
    align-items: flex-start;
    overflow-y: auto;
    padding: 72px 0 44px;
  }
  .work-lb__inner {
    width: min(90vw, 620px);
    max-height: none;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .work-lb__media { height: min(58vh, 560px); }
  .work-lb__close { top: -48px; right: 0; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .grain { animation: none; }
  body:not(.hero-ready) .hero__deck,
  body:not(.hero-ready) .hero__word { opacity: 1; transform: none; filter: none; }
  .reveal-lines .line > * { transform: none !important; opacity: 1 !important; }
  .statement .statement__line { opacity: 1 !important; }
  .svc-name { opacity: 1; clip-path: none; }
  .svc-path { stroke-dashoffset: 0; }
  .svc-path-lead { opacity: 0; }
  .svc-knode { opacity: 1; transform: scale(1); background: var(--accent); }
  .svc-marker { opacity: 0; }
  .tl-foot { opacity: 1; clip-path: none; transform: none; }
  .kw--move, .kw--grab { animation: none !important; }
  .is-mblur-line, .is-mblur-soft { filter: none !important; }
  .rt { transition-duration: 0s !important; transform: none !important; }
  .cta__arrow { transition-duration: 0s !important; transform: none !important; opacity: 1; }
  .section__label { --label-line-scale: 1 !important; }
}

/* ============================================================
   ABOUT — two-phase scroll choreography
   Default layout = static (no-JS / reduced-motion safe).
   JS adds .jma--pin to enable the tall runway + sticky stage.
   ============================================================ */
.jma {
  position: relative;
  background: var(--ink);
}
.jma--pin { height: 560vh; }

.jma__stage {
  position: relative;
  overflow: hidden;
  padding: clamp(80px,12vh,160px) 0;
}
.jma--pin .jma__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0;
}

/* depth layers */
.jma__bg {
  /* base photo stays clean — the only treatment is the animated grey adjustment layer (.jma__scrim) */
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../_recursos/Foto_9.png') center 100% / cover no-repeat;
}
.jma__sil {
  /* alpha cutout registered 1:1 over .jma__bg — identical sizing, never transformed */
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 100%;
  pointer-events: none;
  user-select: none;
}

.jma__scrim {
  /* grey adjustment layer above photo + cutout — JS drives it from strong to 0 with scroll */
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #6b655f;
  opacity: 0;
  pointer-events: none;
}
.jma__scrim::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 250px 250px;
  mix-blend-mode: soft-light;
  opacity: 0.3;
  pointer-events: none;
}

/* ---------- Phase 1 ----------
   Contains the cutout + grey layer so every depth layer shares one stacking
   context: line 1 (z2) < cutout (z3) < line 2 / foot (z4).
   Full-bleed in pin mode so the cutout inside aligns 1:1 with .jma__bg;
   text alignment is preserved via the computed horizontal padding. */
.jma__p1 {
  position: relative;
  pointer-events: none;
  padding: 0 max(var(--pad), calc((100vw - var(--maxw)) / 2));
}
.jma--pin .jma__p1 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(220px,42vh,520px); /* lowered to chin height of the photo */
  padding-bottom: clamp(56px,10vh,110px);
}
/* phase-1 kinetic wrappers — headlines slide horizontally (reference behavior), no mask */
.jma__head { position: relative; margin-left: 0; }
.jma__kin { position: relative; width: max-content; }
.jma__kin--l1 { margin-left: 0; }
.jma__kin--l1 { will-change: transform, opacity, filter; }
.jma__kin--l2 { will-change: transform, opacity, filter; }
.jma__kin--over { position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; }
.jma__h1.jma__h1--ol { color: transparent; -webkit-text-stroke: 2.5px var(--bg); }
.jma__kin--shift {
  z-index: 4;
  /* plain 44vw overflowed the viewport across ~769-1565px (its own text width
     scales faster than the room a fixed vw-offset leaves it) — this derives
     the offset from actual available space (padding + own text width, both
     computed the same way the layout itself computes them) instead of a
     flat vw fraction, so it can never push the text past the viewport edge.
     7.73 is "keine Dekoration."'s measured width/font-size ratio. */
  margin-left: clamp(160px, calc(100vw - max(var(--pad), calc((100vw - var(--maxw)) / 2)) - 7.73 * clamp(60px, 9.2vw, 144px) - 28px), 660px);
  margin-top: clamp(24px,3vh,48px);
}
.jma__h1,
.jma__h2 {
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--bg);
  margin: 0;
  white-space: nowrap;
}
.jma__h1 {
  /* "Motion braucht Richtung" is long enough that 9.2vw overflows the
     viewport across ~769-1900px (no margin-offset compensates it like
     .jma__kin--shift has) — 8.3vw keeps it inside the viewport at every
     width up to its own ceiling, verified empirically. */
  font-size: clamp(60px,8.3vw,144px);
}
.jma__h2 {
  font-size: clamp(60px,9.2vw,144px);
  color: var(--accent);
}
.jma__over-pre { color: transparent; }
.jma__outline {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--bg);
}
.jma__foot { position: relative; z-index: 4; max-width: 60%; text-shadow: 0 10px 28px oklch(0% 0 0 / .38); }
.jma__personal {
  position: relative;
  z-index: 4;
  font-family: var(--f-body);
  font-size: clamp(21px,1.85vw,30px);
  line-height: 1.45;
  letter-spacing: 0;
  color: oklch(96% 0.02 50 / .85);
  text-shadow: 0 10px 28px oklch(0% 0 0 / .38);
  max-width: 46ch;
  margin: 0;
}

/* ---------- Phase 2 ---------- */
.jma__p2 {
  position: relative;
  max-width: var(--maxw);
  margin: clamp(60px,10vh,120px) auto 0;
  padding: 0 var(--pad);
}
.jma--pin .jma__p2 {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* left edge aligned to the p1 grid; narrow so it stays in the dark zone, off the figure */
  padding: 0;
  padding-left: max(var(--pad), calc((100vw - var(--maxw)) / 2));
  /* Occlusion: hides the right portion of this container — where the
     figure always sits, across every viewport tested — so headline text
     never renders over him at any point of the slide-in. Simple rectangle
     boundary, not the photo's alpha contour. */
  clip-path: inset(0 38% 0 0);
}
.jma__p2 > * { width: min(760px, 100%); }
.jma--pin .jma__p2 > * { width: min(760px, 54vw, var(--jma-safe-w, 760px)); }
.jma__p2head { margin-bottom: clamp(16px,2.4vh,28px); }
.jma__p2hw {
  /* was overflow:hidden as a slide-in wipe mask, but that mask clips at a
     fixed box edge unrelated to the portrait — during the xPercent slide it
     hid text over plain background AND let text show over his silhouette
     wherever the mask happened to reveal it, instead of true alpha
     occlusion. overflow:visible removes that fake clip so .jma__p2's
     z-index (below .jma__sil) is the only thing governing visibility,
     for every frame of the slide, not just the resting position.
     .jma__stage still clips anything past the section bounds. */
  overflow: visible;
  width: fit-content;
}
.jma__b1, .jma__b2, .jma__b3 {
  font-size: clamp(44px,6.2vw,104px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--bg);
  margin: 0;
  /* .jma__p2hw is overflow:hidden with no explicit height, so its box is
     exactly N * line-height with no reserve below the last line's baseline
     — every line's own descender (y/g/j/p/q — "Rhythmus.", "Systeme.")
     sits in that same tight slot regardless of how many lines there are,
     so a 2-line heading is clipped exactly like a 1-line one. */
  padding-bottom: 0.15em;
}
.jma__b3 { color: var(--accent); }
.jma__list {
  /* Unlike the headlines above it (Klarheit braucht Rhythmus. / visuelle
     Systeme.), this list must stay fully visible over the portrait — never
     occluded by his silhouette. .jma__p2 no longer sets its own z-index
     (so it doesn't trap this in a stacking context below .jma__sil), and
     this gets an explicit z-index above .jma__sil (z-index:3) directly. */
  position: relative;
  z-index: 5;
  list-style: none;
  padding: 0;
  margin: 0;
}
.jma__li {
  padding: clamp(8px,1.2vh,14px) 0;
}
.jma__li h3 {
  font-size: clamp(18px,1.65vw,26px);
  font-weight: 400;
  color: oklch(90% 0.025 58 / 1.0);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
}
.jma__item:nth-child(1) .jma__li h3 { font-weight: 500; }
.jma__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin-top: clamp(24px,3.5vh,44px);
  font-size: clamp(15px,1.4vw,19px);
  font-weight: 600;
  color: var(--bg);
  text-decoration: none;
  border: 1px solid oklch(90% 0.01 60 / 0.25);
  border-radius: 100px;
  padding: 14px 28px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.jma__cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.jma__cta-arrow { display: flex; transition: transform 0.3s var(--ease); }
.jma__cta:hover .jma__cta-arrow { transform: translateX(4px); }
.jma__cta img { width: 16px; height: 16px; filter: invert(1); }

@media (max-width: 768px) {
  .jma--pin { height: 480vh; }
  /* Reposition text to bottom of frame — magazine cover layout */
  .jma--pin .jma__p1 {
    justify-content: flex-end;
    padding-top: 0;
    padding-bottom: clamp(48px,10vh,88px);
    background: linear-gradient(to top, oklch(10% 0.01 45 / 0.65) 0%, transparent 55%);
  }
  .jma__kin--over { display: none; }
  .jma__h1, .jma__h2 {
    font-size: clamp(36px,10vw,52px);
    font-weight: 500;
    white-space: normal;
  }
  .jma__foot { max-width: 100%; margin-top: clamp(12px,3vh,24px); }
  .jma--pin .jma__p2 { justify-content: flex-end; padding-bottom: clamp(48px,9vh,80px); }
  .jma__head { margin-left: 0; width: 100%; overflow: visible; }
  .jma__kin--l1 { margin-left: 0; width: 100%; position: relative; z-index: 5; }
  .jma__kin--shift { margin-left: 0; }
  .jma__kin { width: 100%; }
  .jma__stage { overflow-x: hidden; }
}

/* ============================================================
   TABLET — 769px–1100px (iPad 12.9 portrait + small laptops)
   About section kinetic layout overflow fix
   ============================================================ */
/* ============================================================
   CONTACT JM
   ============================================================ */
.contact-jm {
  padding: clamp(80px,14vh,160px) clamp(20px,2.5vw,40px);
  background: oklch(99% 0.004 70);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  border-radius: 32px 32px 0 0;
  margin-top: -25vh;
}
.contact-jm__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(48px,7vw,96px);
}
.contact-jm__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px,4vw,48px);
}
.contact-jm__head {
  font-size: clamp(52px,8.5vw,130px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.contact-jm__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-jm__cta {
  position: relative;
  display: inline-block;
  font-size: clamp(40px,5.5vw,80px);
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0 0 8px;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.contact-jm__cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.contact-jm__cta:hover::after,
.contact-jm__cta.is-open::after { transform: scaleX(1); }
.contact-jm__cta.is-open { color: var(--accent); }
.contact-jm__cta:active { transform: scale(0.98); }
.contact-jm__cta-arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s;
}
.contact-jm__cta:hover .contact-jm__cta-arrow { transform: translateX(5px); }
.contact-jm__cta.is-open .contact-jm__cta-arrow { opacity: 0; }
.contact-jm__reveal {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 0;
  opacity: 0;
}
.contact-jm__reveal-link {
  font-size: clamp(16px,1.4vw,20px);
  font-family: var(--f-mono);
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}
.contact-jm__reveal-link:hover { color: var(--accent); }
.contact-jm__phone {
  font-size: clamp(16px,1.5vw,22px);
  font-family: var(--f-mono);
  letter-spacing: 0.02em;
  color: oklch(25% 0.04 55 / 0.7);
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.contact-jm__phone:hover { color: var(--ink); }

@media (max-width: 768px) {
  .contact-jm {
    min-height: auto;
    padding-top: clamp(60px, 12vh, 100px);
    padding-bottom: clamp(60px, 12vh, 100px);
    align-items: flex-start;
  }
  .contact-jm__head { font-size: clamp(34px, 9vw, 52px); }
  .contact-jm__cta  { font-size: clamp(28px, 7.5vw, 40px); }
}

/* ============================================================
   FOOTER JM
   ============================================================ */
.footer-jm {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 5;
}
.footer-jm__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.footer-jm__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.85;
}
.footer-jm__video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, oklch(12% 0.04 55 / 0.6) 100%);
}
.footer-jm__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad) clamp(32px,4vh,56px);
}
.footer-jm__name-row {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 0.9;
  padding-top: clamp(395px,53vw,650px);
}
.footer-jm__name {
  font-size: clamp(56px,10.5vw,168px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: oklch(96% 0.01 60);
  margin: 0;
}
.footer-jm__name--right { color: var(--salmon); }
.footer-jm__role {
  margin: 0 0 clamp(8px,1vh,14px);
  font-size: clamp(13px,1.1vw,16px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(96% 0.01 60);
  font-family: var(--f-body);
}
.footer-jm__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: clamp(24px,3vh,36px);
  flex-shrink: 0;
}
.footer-jm__email {
  font-size: clamp(13px,1.1vw,16px);
  font-family: var(--f-mono);
  color: oklch(96% 0.01 60);
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.footer-jm__email:hover { color: oklch(96% 0.01 60); }
.footer-jm__top {
  background: none; border: none; cursor: pointer;
  font-size: clamp(13px,1.1vw,16px); font-family: var(--f-mono);
  color: oklch(96% 0.01 60);
  transition: color 0.2s; padding: 4px 0;
}
.footer-jm__top:hover { color: oklch(96% 0.01 60); }
.footer-jm__copy {
  font-size: clamp(13px,1.1vw,16px); color: oklch(96% 0.01 60 / 0.6); margin: 0;
}