/* The new home page (preview at /next/). Loaded after /styles.css: same tokens, fonts, buttons, form, lightbox.
   Every scene is driven by scroll through CSS variables that next.js sets on the scene (0..1, already eased).
   Without the "nx" class on <html> (no JavaScript, or reduced motion) the rules at the bottom show each scene's final state. */

.nxb { overflow-x: clip; }
.nxb::after { /* paper grain */
  content: ""; position: fixed; inset: 0; z-index: 38; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The thread: one thin line down the page that fills as you scroll (the rule from Afek's proposals). */
.thread { position: fixed; top: 0; bottom: 0; left: 18px; width: 1px; z-index: 39; pointer-events: none; mix-blend-mode: difference; background: rgba(255, 255, 255, .14); }
.thread i { display: block; height: 100%; background: #fff; transform-origin: top; transform: scaleY(var(--sp, 0)); }

/* Cursor (mouse only) */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nx .cursor { display: block; position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none; will-change: transform; }
  .cursor span { display: grid; place-items: center; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; mix-blend-mode: difference;
    font: 500 14px/1 var(--sans); color: transparent; white-space: nowrap; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .3s var(--ease), color .2s; }
  .cursor.is-link span { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .cursor.is-view span { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--light); mix-blend-mode: normal; color: var(--ink); }
  .cursor.is-off span { width: 0; height: 0; margin: 0; }
}

/* Navigation: ink on the paper opening, light over photographs, hides on the way down and returns on the way up. */
.nav { transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .55s var(--ease); }
.nav.nav--ink:not(.is-solid) { color: var(--ink); }
.nav.nav--ink:not(.is-solid) .nav__logo--light { display: none; }
.nav.nav--ink:not(.is-solid) .nav__logo--dark { display: block; }
.nav.nav--ink:not(.is-solid) .nav__cta:hover { background: var(--ink); color: var(--light); }
.nav.is-away { transform: translateY(-105%); }
.nav { transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .55s var(--ease), opacity .35s var(--ease); }
body.menu-open .nav { transform: none; }

/* ---------- 1. Hero ---------- */
/* a = the arch opening (0 arch, 1 full screen) · t = the title leaving · c = the closing line · z = the camera moving in */
.hx { position: relative; height: 380svh; --a: 0; --c: 0; --t: 0; --z: 0;
  --wt: 17%; --wr: 55%; --wb: 11%; --wl: 9%; --rad: 18vw; }
.hx__stick { position: sticky; top: 0; height: 100svh; overflow: hidden; background: radial-gradient(120% 90% at 70% 0%, #F8F4EE 0%, #EFE7DB 62%, #E9DFD0 100%); }
.hx__stick img, .hx__cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx__sketch img, .hx__color { transform: scale(calc(1.12 - var(--a) * .12)); will-change: transform; }
/* The drawing: pencil lines tinted warm brown, printed on the paper. */
.hx__sketch { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: calc(.62 - var(--a) * .3); animation: hxFade 1.6s ease .1s both; }
.hx__sketch::after { content: ""; position: absolute; inset: 0; background: #7A5F47; mix-blend-mode: screen; }
.hx__veil { position: absolute; inset: 0; background: linear-gradient(to left, rgba(245, 240, 232, .93) 0%, rgba(245, 240, 232, .88) 42%, rgba(245, 240, 232, 0) 60%); opacity: calc(1 - var(--a) * 1.6); }
.hx__win { position: absolute; inset: 0; will-change: clip-path;
  clip-path: inset(calc((1 - var(--a)) * var(--wt)) calc((1 - var(--a)) * var(--wr)) calc((1 - var(--a)) * var(--wb)) calc((1 - var(--a)) * var(--wl)) round calc((1 - var(--a)) * var(--rad)) calc((1 - var(--a)) * var(--rad)) 0 0);
  animation: hxWin 1.5s var(--ease) .25s both; }
.hx__color { position: absolute; inset: 0; }
.hx__color img { transform: scale(calc(1 + var(--z) * .1)); will-change: transform; } /* until the camera clip is loaded, a slow push on the still */
.hx__cv { opacity: 0; transition: opacity .28s ease; }
.hx__stick.has-clip .hx__color img { transform: none; } /* the clip does the moving */
.hx__cv.is-on { opacity: 1; }
/* The arch arrives as a drawing; once the photograph is ready the colour rises through it from the floor up. */
.hx__ink { position: absolute; inset: 0; background: #F4EDE3; isolation: isolate;
  -webkit-mask: linear-gradient(to bottom, #000 0, #000 40%, transparent 60%) 0 0 / 100% 250% no-repeat; mask: linear-gradient(to bottom, #000 0, #000 40%, transparent 60%) 0 0 / 100% 250% no-repeat;
  transition: -webkit-mask-position 2.8s cubic-bezier(.6, 0, .3, 1), mask-position 2.8s cubic-bezier(.6, 0, .3, 1); }
.hx__ink picture { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .82; }
.hx__ink picture::after { content: ""; position: absolute; inset: 0; background: #7A5F47; mix-blend-mode: screen; }
.hx__stick.is-real .hx__ink { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.hx__shade { position: absolute; inset: 0; opacity: var(--c); background:
  linear-gradient(to left, rgba(20, 18, 16, .58) 0%, rgba(20, 18, 16, .3) 40%, rgba(20, 18, 16, 0) 72%),
  linear-gradient(180deg, rgba(20, 18, 16, .46) 0%, rgba(20, 18, 16, 0) 24%, rgba(20, 18, 16, 0) 48%, rgba(20, 18, 16, .66) 100%); }
/* The arch has a soft shadow under it and a thin drawn outline around it; both go as it opens. */
.hx__glow { position: absolute; top: var(--wt); right: var(--wr); bottom: var(--wb); left: var(--wl); border-radius: var(--rad) var(--rad) 0 0;
  box-shadow: 0 50px 90px -34px rgba(74, 52, 30, .5), 0 18px 36px -18px rgba(74, 52, 30, .28); opacity: calc(1 - var(--a) * 6); animation: hxFade 1.2s ease .9s both; }
.hx__frame { position: absolute; top: calc(var(--wt) - 12px); right: calc(var(--wr) - 12px); bottom: calc(var(--wb) - 12px); left: calc(var(--wl) - 12px);
  border: 1px solid rgba(31, 29, 27, .55); border-bottom-color: transparent; border-radius: calc(var(--rad) + 12px) calc(var(--rad) + 12px) 0 0; pointer-events: none;
  opacity: calc(1 - var(--a) * 6); animation: hxFade 1.2s ease 1.1s both; }

.hx__head { position: absolute; top: 50%; right: var(--gutter); transform: translateY(-50%); width: min(42vw, 700px); pointer-events: none; }
.hx__eyebrow { margin: 0 0 clamp(14px, 2vw, 26px); font: 500 clamp(15px, 1.25vw, 19px)/1.2 var(--sans); letter-spacing: .02em; color: var(--accent-text); overflow: hidden; opacity: calc(1 - var(--t) * 1.4); }
.hx__eyebrow span { display: inline-block; animation: hxRise 1s var(--ease) .1s both; }
.hx__title { font-size: clamp(44px, 6.3vw, 124px); font-weight: 300; line-height: 1.04; letter-spacing: -.012em; margin: 0; color: var(--ink); }
.hx__title em { font-style: normal; color: var(--accent); font-weight: 400; }
.hx__l { display: block; overflow: hidden; padding: .1em 0 .16em; margin: -.1em 0 -.16em; opacity: calc(1 - var(--t) * 1.15); will-change: transform; }
.hx__l > span { display: inline-block; animation: hxRise 1.15s var(--ease) both; }
.hx__l--1 { transform: translateX(calc(var(--t) * 16vw)); } .hx__l--1 > span { animation-delay: .18s; }
.hx__l--2 { transform: translateX(calc(var(--t) * -12vw)); } .hx__l--2 > span { animation-delay: .28s; }
.hx__l--3 { transform: translateX(calc(var(--t) * 22vw)); } .hx__l--3 > span { animation-delay: .38s; }
@keyframes hxRise { from { transform: translateY(115%); } to { transform: none; } }
@keyframes hxWin { from { opacity: 0; transform: translateY(7%) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes hxFade { from { opacity: 0; } }

.hx__cap { position: absolute; left: var(--wl); right: var(--wr); bottom: calc(var(--wb) - 44px); margin: 0; text-align: center; font: 400 14px/1 var(--sans); letter-spacing: .06em; color: var(--muted); opacity: calc(1 - var(--a) * 6); animation: hxFade 1s ease 1.3s both; }
.hx__cap span { font: italic 400 18px/1 var(--latin); letter-spacing: .02em; color: var(--ink-2); }
.hx__end { position: absolute; right: var(--gutter); left: var(--gutter); bottom: clamp(56px, 10vh, 110px); max-width: var(--wrap); margin: 0 auto; color: var(--light);
  opacity: var(--c); transform: translateY(calc((1 - var(--c)) * 36px)); pointer-events: none; }
.hx__stick.is-end .hx__end { pointer-events: auto; }
.hx__lead { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.2vw, 54px); line-height: 1.2; max-width: 20ch; margin: 0 0 28px; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.hx__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hx__hint { position: absolute; right: var(--gutter); bottom: 26px; margin: 0; display: flex; align-items: center; gap: 12px;
  font: 500 13px/1 var(--sans); letter-spacing: .12em; color: var(--muted); opacity: calc(1 - var(--a) * 5); animation: hxFade 1s ease 1.5s both; }
.hx__hint i { display: block; width: 54px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.hx__hint i::after { content: ""; position: absolute; top: 0; right: -40%; height: 1px; width: 40%; background: var(--ink); animation: hintLine 2.2s var(--ease) infinite; }
@keyframes hintLine { to { right: 100%; } }

/* ---------- 2. Statement ---------- */
.sx { position: relative; height: 250svh; --p: 0; --f: 0; }
.sx__stick { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; padding: 90px 0 40px; }
.sx__text { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4.5vw, 76px); line-height: 1.24; max-width: 24ch; margin: 0; letter-spacing: -.008em; }
.sx__text .w, .qx__q .w { opacity: clamp(.13, calc(var(--p) * (var(--n) + 2) - var(--i)), 1); }
.sx__facts { list-style: none; margin: clamp(36px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.sx__facts li { padding: 26px 0 0; display: flex; flex-direction: column; gap: 4px; opacity: clamp(0, calc(var(--f) * 4 - var(--k)), 1); transform: translateY(calc((1 - clamp(0, calc(var(--f) * 4 - var(--k)), 1)) * 22px)); }
.sx__facts li:nth-child(1) { --k: 0; } .sx__facts li:nth-child(2) { --k: 1; } .sx__facts li:nth-child(3) { --k: 2; } .sx__facts li:nth-child(4) { --k: 3; }
.sx__facts li + li { padding-right: 28px; border-right: 1px solid var(--line); }
.sx__facts strong { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 30px); }
.sx__facts span { color: var(--muted); font-size: 16px; }

/* ---------- 3. Projects: stacked chapters ---------- */
.chs { position: relative; }
.chs__head { padding: clamp(40px, 7vw, 110px) 0 clamp(36px, 5vw, 72px); }
.chs__head h2 { font-size: clamp(44px, 8vw, 132px); font-weight: 300; }
.chs__stack { position: relative; background: var(--dark); }
.ch { position: sticky; top: 0; height: 100svh; --e: 1; --c: 0; --h: 0; }
.nx .ch:not(:last-child) { margin-bottom: 55svh; } /* each chapter holds the screen for a moment before the next one rises */
.ch + .ch .ch__in { border-radius: clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) 0 0; }
.ch__in { position: absolute; inset: 0; overflow: hidden; color: var(--light); background: var(--dark); transform-origin: 50% 0;
  transform: scale(calc(1 - var(--c) * .07)); will-change: transform; }
.ch__open { position: absolute; inset: 0; z-index: 2; cursor: zoom-in; }
.ch__img { position: absolute; inset: 0; }
.ch__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.2 - var(--e) * .12 + var(--h) * .05 + var(--c) * .03)); will-change: transform; }
/* A chapter's camera clip sits exactly on its photograph (same framing, same scroll zoom) and fades in once it plays. */
.ch__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; pointer-events: none;
  transform: scale(calc(1.2 - var(--e) * .12 + var(--h) * .05 + var(--c) * .03)); will-change: transform; }
.ch__vid.is-on { opacity: 1; }
.ch__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 16, .42) 0%, rgba(20, 18, 16, 0) 26%, rgba(20, 18, 16, .08) 44%, rgba(20, 18, 16, .86) 100%); }
.ch__dim { position: absolute; inset: 0; background: #0d0c0b; opacity: calc(var(--c) * .6); pointer-events: none; z-index: 4; }
.ch__index { position: absolute; z-index: 3; top: clamp(84px, 12vh, 120px); right: var(--gutter); margin: 0; font: 400 italic 22px/1 var(--latin); text-shadow: 0 1px 14px rgba(0, 0, 0, .45); letter-spacing: .04em; display: flex; align-items: center; gap: 14px; }
.ch__index .badge { position: static; font: 500 13px/1 var(--sans); font-style: normal; }
.ch__name { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(170px, 27vh, 260px); margin: 0; font: 300 italic clamp(56px, 12vw, 210px)/.9 var(--latin); white-space: nowrap; pointer-events: none; text-shadow: 0 2px 40px rgba(0, 0, 0, .25); }
.ch__name span { display: inline-block; transform: translateX(calc((1 - var(--e)) * -9vw)); will-change: transform; }
.ch__info { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(36px, 7vh, 72px); max-width: 44ch;
  opacity: clamp(0, calc((var(--e) - .62) * 3.4), 1); transform: translateY(calc((1 - clamp(0, calc((var(--e) - .62) * 3.4), 1)) * 26px)); }
.ch__type { margin: 0 0 8px; font-size: 16px; font-weight: 500; letter-spacing: .02em; color: #E6D6C4; }
.ch__info { text-shadow: 0 1px 18px rgba(0, 0, 0, .5); }
.ch__desc { margin: 0 0 16px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: rgba(245, 241, 235, .92); }
.ch__link { display: inline-flex; align-items: center; gap: 12px; color: var(--light); text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(245, 241, 235, .45); padding-bottom: 4px; transition: gap .35s var(--ease), border-color .35s var(--ease); }
.ch__link::after { content: "←"; }
.ch__link:hover { gap: 18px; border-color: var(--light); }

/* ---------- 4. Quote ---------- */
.qx { position: relative; min-height: 125svh; display: grid; place-items: center; overflow: hidden; background: var(--dark); color: var(--light); --p: 0; --y: .5; }
.qx__media { position: absolute; inset: -14% 0; }
.qx__media img { width: 100%; height: 100%; object-fit: cover; transform: translateY(calc((var(--y) - .5) * 18%)) scale(1.04); will-change: transform; }
.qx__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(20, 18, 16, .86) 0%, rgba(20, 18, 16, .72) 70%, rgba(20, 18, 16, .6) 100%); }
.qx__text { position: relative; margin: 0; padding: 120px var(--gutter); max-width: 1100px; text-align: center; }
.qx__label { font: 500 16px/1 var(--sans); letter-spacing: .04em; color: #D8C6B2; margin: 0 0 30px; }
.qx__q { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.9vw, 62px); line-height: 1.3; margin: 0 0 34px; }
.qx__text cite { font-style: normal; font-family: var(--serif); font-size: 24px; opacity: clamp(0, calc(var(--p) * 12 - 11), 1); } /* the signature waits for the last word */

/* ---------- 5. About ---------- */
.bx { padding: clamp(96px, 13vw, 190px) 0 0; --o: 1; --m: 0; overflow: clip; }
.bx__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.bx__photo { margin: 0; }
.bx__arch { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--bg-2);
  clip-path: inset(calc((1 - var(--o)) * 100%) 0 0 0 round 999px 999px 0 0); will-change: clip-path; }
.bx__arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(calc(1.3 - var(--o) * .3)); will-change: transform; }
.bx__text h2 { margin-bottom: 36px; }
.bx__text p { color: var(--ink-2); max-width: 52ch; }
.bx__values { margin-top: clamp(72px, 10vw, 150px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(14px, 2vw, 28px) 0; overflow: hidden; }
.bx__track { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); width: max-content; white-space: nowrap; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 8vw, 128px); line-height: 1.1;
  will-change: transform; }
.nx .bx__values { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.nx .bx__values.is-drag { cursor: grabbing; }
.bx__track i { font-style: normal; color: var(--accent); }

/* ---------- 6. Process ---------- */
.px { background: var(--dark); color: var(--light); padding: clamp(96px, 13vw, 180px) 0; --p: 1; }
.px .eyebrow { color: #C9B39C; }
.px__wrap { position: relative; max-width: 900px; }
.px__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(44px, 6vw, 84px); }
.px__steps li { display: grid; grid-template-columns: 84px 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.px__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(245, 241, 235, .28); background: var(--dark);
  font: 300 30px/1 var(--latin); color: rgba(245, 241, 235, .5); transition: background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease), transform .6s var(--ease); }
.px__steps h3 { font-size: clamp(28px, 3vw, 44px); font-weight: 300; margin: 14px 0 12px; }
.px__steps p { margin: 0; font-size: 18px; color: rgba(245, 241, 235, .82); max-width: 46ch; }
.px__steps li > div { opacity: .32; transform: translateX(-14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.px__steps li.is-on > div { opacity: 1; transform: none; }
.px__steps li.is-on .px__dot { background: var(--light); color: var(--ink); border-color: var(--light); transform: scale(1.04); }
.px__line { position: absolute; top: 42px; bottom: 42px; right: 42px; width: 1px; background: rgba(245, 241, 235, .16); }
.px__line b { display: block; width: 100%; height: 100%; background: var(--light); transform-origin: top; transform: scaleY(var(--p)); }

/* ---------- 7. Client area ---------- */
.ax { position: relative; height: 380svh; background: var(--bg-2); }
.ax__stick { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; overflow: clip; padding: 84px 0 28px; }
.ax h2 { font-size: clamp(34px, 4.2vw, 64px); }
.ax__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 100px); align-items: center; width: 100%; }
.ax__lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 58ch; margin: 14px 0 0; }
.ax__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.ax__list li { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; padding: 11px 0 13px; line-height: 1.5; border-top: 1px solid var(--line); opacity: .34; transition: opacity .5s var(--ease); }
.ax__list li.is-on { opacity: 1; }
.ax__list li::before { content: ""; position: absolute; top: -1px; right: 0; height: 1px; width: 100%; background: var(--ink); transform-origin: right; transform: scaleX(0); transition: transform .7s var(--ease); }
.ax__list li.is-on::before { transform: none; }
.ax__num { grid-row: span 2; font: 300 italic 22px/1.3 var(--latin); color: var(--accent-text); }
.ax__list strong { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.9vw, 27px); }
.ax__list li > span:last-child { color: var(--muted); font-size: 16px; }
.ax__cta { margin-top: 20px; }
.ax__phone { margin: 0; display: flex; justify-content: center; }
.ax__phone .phone { width: min(300px, calc((100svh - 150px) * .46)); }

/* ---------- Footer wordmark ---------- */
.fx { padding-top: 0; overflow: hidden; --p: 1; }
.footer .fx__word { margin: 0 0 clamp(28px, 5vw, 64px); padding: clamp(40px, 6vw, 90px) 0 0; display: flex; justify-content: center; overflow: hidden; font: 300 clamp(60px, 17.4vw, 330px)/.86 var(--latin); color: rgba(245, 241, 235, .92); letter-spacing: -.01em; }
.fx__word span { display: inline-block; transform: translateY(calc((1 - clamp(0, calc(var(--p) * 2.1 - var(--i) * .1), 1)) * 105%)); will-change: transform; }

/* ---------- Phone ---------- */
@media (max-width: 860px) {
  .thread { left: 7px; }
  .hx { height: 350svh; --wt: 45%; --wr: 14%; --wb: 11%; --wl: 14%; --rad: 36vw; }
  .hx__sketch { opacity: calc(.66 - var(--a) * .3); }
  .hx__veil { background: linear-gradient(180deg, rgba(246, 241, 233, .98) 0%, rgba(246, 241, 233, .96) 35%, rgba(246, 241, 233, .4) 44%, rgba(246, 241, 233, 0) 54%, rgba(246, 241, 233, 0) 84%, rgba(240, 232, 220, .94) 95%); }
  .hx__head { top: clamp(86px, 12.5svh, 124px); right: var(--gutter); left: var(--gutter); width: auto; transform: none; text-align: center; }
  .hx__eyebrow { font-size: 15px; margin-bottom: 12px; }
  .hx__title { font-size: clamp(40px, 12.6vw, 70px); line-height: 1.02; }
  .hx__l--1 { transform: translateX(calc(var(--t) * 30vw)); }
  .hx__l--2 { transform: translateX(calc(var(--t) * -26vw)); }
  .hx__l--3 { transform: translateX(calc(var(--t) * 40vw)); }
  .hx__shade { background: linear-gradient(180deg, rgba(20, 18, 16, .44) 0%, rgba(20, 18, 16, .04) 24%, rgba(20, 18, 16, .12) 44%, rgba(20, 18, 16, .72) 78%, rgba(20, 18, 16, .8) 100%); }
  .hx__end { bottom: clamp(40px, 7svh, 72px); }
  .hx__lead { font-size: clamp(27px, 7.6vw, 38px); max-width: 15ch; margin-bottom: 22px; }
  .hx__actions .btn { flex: 1 1 auto; padding: 0 18px; }
  .hx__hint { display: none; }
  .hx__cap { bottom: calc(var(--wb) - 40px); }
  .sx { height: 230svh; }
  .sx__text { font-size: clamp(25px, 7.3vw, 40px); line-height: 1.28; }
  .sx__facts { grid-template-columns: 1fr 1fr; margin-top: 30px; }
  .sx__facts li { padding-top: 16px; }
  .sx__facts li:nth-child(3) { padding-right: 0; border-right: 0; }
  .sx__facts li:nth-child(n+3) { margin-top: 16px; border-top: 1px solid var(--line); }
  .sx__facts span { font-size: 14.5px; line-height: 1.4; }
  .ch__name { bottom: clamp(190px, 30svh, 250px); font-size: clamp(44px, 15vw, 96px); }
  .ch__info { left: var(--gutter); bottom: clamp(30px, 5svh, 48px); padding-left: 64px; }
  .ch__desc { font-size: 16.5px; }
  .qx { min-height: 110svh; }
  .qx__shade { background: rgba(20, 18, 16, .8); }
  .qx__q { font-size: clamp(25px, 7vw, 36px); }
  .bx__grid { grid-template-columns: 1fr; }
  .bx__photo { width: 84%; margin: 0 auto; }
  .px__steps li { grid-template-columns: 60px 1fr; }
  .px__dot { width: 60px; height: 60px; font-size: 22px; }
  .px__line { top: 30px; bottom: 30px; right: 30px; }
  .px__steps h3 { margin-top: 8px; }
  .px__steps p { font-size: 17px; }
  .ax { height: 400svh; }
  .ax__stick { padding: 76px 0 24px; align-items: stretch; }
  .ax__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 14px; align-content: start; }
  .ax__text { display: contents; }
  .ax__text .eyebrow { display: none; }
  .ax__text h2 { font-size: clamp(30px, 8.6vw, 44px); order: 1; }
  .ax__lead, .ax__cta { display: none; }
  .ax__phone { order: 2; align-items: center; min-height: 0; }
  .ax__phone .phone { width: min(230px, 27svh); }
  .ax__list { order: 3; margin: 0 0 0 70px; position: relative; min-height: 104px; }
  .ax__list li { position: absolute; inset: 0 0 auto 0; border-top: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .ax__list li.is-on { opacity: 1; transform: none; }
  .fx__word { font-size: 17vw; }
}

/* Short laptop screens: the client-area scene drops its paragraph so it still fits and pins. */
@media (min-width: 861px) and (max-height: 800px) {
  .ax__stick { padding: 76px 0 20px; }
  .ax__lead { display: none; }
  .ax h2 { font-size: clamp(32px, 3.6vw, 52px); }
}
@media (min-width: 861px) and (max-height: 640px) { .ax__cta { display: none; } .ax__list li { padding: 8px 0 9px; } }

/* A pinned scene whose content does not fit the screen flows normally instead (set by next.js). */
.nx .is-flow { height: auto !important; }
.nx .is-flow > [class$="__stick"] { position: static; }
.nx .is-flow .ax__list li { position: relative; opacity: 1; transform: none; }
.nxb [hidden] { display: none !important; }

/* ---------- Without the scroll engine: every scene at rest ---------- */
html:not(.nx) .thread, html:not(.nx) .hx__hint, html:not(.nx) .hx__sketch, html:not(.nx) .hx__veil, html:not(.nx) .hx__glow, html:not(.nx) .hx__frame, html:not(.nx) .hx__cap, html:not(.nx) .hx__cv, html:not(.nx) .hx__ink { display: none; }
html:not(.nx) .hx { height: auto; --a: 1; --c: 1; --t: 0; }
html:not(.nx) .hx__stick { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) clamp(56px, 10vh, 110px); }
html:not(.nx) .hx__head, html:not(.nx) .hx__end { position: relative; inset: auto; transform: none; width: auto; margin: 0; color: var(--light); text-align: start; }
html:not(.nx) .hx__title, html:not(.nx) .hx__eyebrow { color: var(--light); }
html:not(.nx) .hx__title em { color: inherit; }
html:not(.nx) .hx__title { margin-bottom: 22px; font-size: clamp(42px, 6.4vw, 104px); }
html:not(.nx) .hx__lead { font-size: clamp(18px, 1.5vw, 22px); font-family: var(--sans); max-width: 32ch; }
html:not(.nx) .hx__win, html:not(.nx) .hx__l > span, html:not(.nx) .hx__eyebrow span { animation: none; }
html:not(.nx) .sx, html:not(.nx) .ax { height: auto; }
html:not(.nx) .sx { --p: 1; --f: 1; }
html:not(.nx) .sx__stick, html:not(.nx) .ax__stick { position: static; min-height: 0; padding: clamp(64px, 9vw, 120px) 0; }
html:not(.nx) .ch { position: relative; height: min(100svh, 820px); }
html:not(.nx) .qx { --p: 1; }
html:not(.nx) .px__steps li > div { opacity: 1; transform: none; }
html:not(.nx) .ax__list li { opacity: 1; position: relative; transform: none; }
html:not(.nx) .ax__lead, html:not(.nx) .ax__cta { display: block; }
html:not(.nx) .ax__text { display: block; }
html:not(.nx) .ax__list { margin: 22px 0 0; min-height: 0; }
html:not(.nx) .ax__grid { grid-template-rows: none; }
html:not(.nx) .bx__values { overflow-x: auto; } /* without motion the strip scrolls sideways by hand */
/* Once the photograph fills the screen the navigation turns light; a soft shade under it keeps it readable on a white ceiling. */
.nx .hx__win::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 24%; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 18, 16, .42), rgba(20, 18, 16, 0)); opacity: calc((var(--a) - .72) * 3.6); }