/* =====================================================================
   KR Roof — Roofing_5 · dark architectural edition
   Inter Tight (display + text) / IBM Plex Mono (labels)
   charcoal tonal system · warm paper type · copper accent
   ===================================================================== */
:root {
  --bg: #0f0f0e;
  --bg-2: #141412;
  --bg-3: #1a1916;
  --bg-4: #211f1b;
  --paper: #efe9df;
  --paper-80: rgba(239, 233, 223, .8);
  --mute: rgba(239, 233, 223, .58);
  --dim: rgba(239, 233, 223, .3);
  --line: rgba(239, 233, 223, .11);
  --line-2: rgba(239, 233, 223, .2);
  --ink: #0f0f0e;
  --cu: #c8794a;
  --cu-2: #df8446;
  --ph: #1d1c19;

  --pad: clamp(18px, 3.4vw, 48px);
  --container: 1600px;
  --col: calc((min(100vw, var(--container)) - 2 * var(--pad)) / 4);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --r: 4px;

  --fs-h2: clamp(42px, 6vw, 104px);
  --fs-body: clamp(15px, 1.02vw, 17px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--paper); overflow-x: clip;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--fs-body); line-height: 1.55; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--cu); color: var(--ink); }
:focus-visible { outline: 1px solid var(--cu); outline-offset: 4px; }

.wrap { position: relative; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.eyebrow i { width: 6px; height: 6px; background: var(--cu); }
.eyebrow span { color: var(--paper); }
.eyebrow--dark { color: #fff; } .eyebrow--dark span { color: #fff; }
.eyebrow--light span { color: var(--paper); }
.h2 { font-size: var(--fs-h2); font-weight: 600; line-height: .9; letter-spacing: -.045em; text-transform: uppercase; color: #ffffff;}
.dim { color: var(--dim); }
.line-m { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.line-i { display: block; will-change: transform; }

/* ---------- column guides + crosshairs ---------- */
.guides { position: fixed; inset: 0 auto 0 50%; z-index: 60; width: min(100%, var(--container)); padding: 0 var(--pad); transform: translateX(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.guides i { width: 1px; height: 100%; background: rgba(239, 233, 223, .055); }
.xm { position: absolute; left: 50%; top: 0; z-index: 3; width: min(100%, var(--container)); padding: 0 var(--pad); transform: translate(-50%, -50%); display: flex; justify-content: space-between; pointer-events: none; }
.xm span { width: 11px; height: 11px; margin: 0 -5px; background: linear-gradient(var(--line-2), var(--line-2)) center / 100% 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) center / 1px 100% no-repeat; }

/* ---------- pills / buttons ---------- */
.pill { display: inline-flex; align-items: stretch; height: 52px; border: 1px solid var(--line-2); font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; position: relative; isolation: isolate; transition: color .6s var(--ease), border-color .6s; }
.pill span { display: flex; align-items: center; padding: 0 22px; }
.pill b { display: grid; place-items: center; width: 52px; border-left: 1px solid var(--line-2); font-weight: 400; transition: border-color .6s; }
.pill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease); }
.pill:hover { color: var(--ink); border-color: var(--paper); }
.pill:hover::before { transform: scaleX(1); transform-origin: left; }
.pill:hover b { border-color: rgba(15,15,14,.2); }
.pill--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pill--light b { border-color: rgba(15,15,14,.18); }
.pill--light::before { background: var(--cu); }

/* ---------- HEADER ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 70; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; padding: 0 var(--pad); transition: background-color .6s var(--ease), transform .8s var(--ease), border-color .6s; border-bottom: 1px solid transparent; }
.hdr.is-solid { background: rgba(15, 15, 14, .0); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--line); }
.hdr.is-hidden { transform: translateY(-100%); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: -.02em; }
.logo svg { width: 30px; height: 30px; color: var(--cu); }
.logo--img img { display: block; width: auto; height: 60px; }
.logo--foot img { height: 96px; }
.hdr__nav { display: flex; gap: 30px; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.hdr__nav a { position: relative; color: #fff; transition: color .3s; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--cu); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.hdr__nav a:hover, .hdr__nav a.is-on { color: #fff; }
.hdr__nav a:hover::after, .hdr__nav a.is-on::after { transform: scaleX(1); transform-origin: left; }
.hdr__cta { justify-self: end; display: inline-flex; align-items: center; gap: 14px; height: 40px; padding: 0 0 0 16px; border: 1px solid var(--line-2); font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: background-color .5s var(--ease), color .5s, border-color .5s; }
.hdr__cta b { display: grid; place-items: center; width: 40px; height: 100%; border-left: 1px solid var(--line-2); font-weight: 400; }
.hdr__cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hdr__menu { display: none; justify-self: end; width: 44px; height: 44px; border: 1px solid var(--line-2); background: none; position: relative; cursor: pointer; }
.hdr__menu i { position: absolute; left: 12px; right: 12px; height: 1px; background: var(--paper); transition: transform .5s var(--ease); }
.hdr__menu i:first-child { top: 18px; } .hdr__menu i:last-child { top: 25px; }
.is-menu .hdr__menu i:first-child { transform: translateY(3.5px) rotate(45deg); }
.is-menu .hdr__menu i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.drawer { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; padding: 120px var(--pad) 32px; background: var(--bg-2); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .9s var(--ease-io), visibility 0s .9s; }
.is-menu .drawer { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease-io), visibility 0s; }
.drawer nav { display: flex; flex-direction: column; }
.drawer a { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: clamp(30px, 9vw, 56px); font-weight: 600; letter-spacing: -.04em; text-transform: uppercase; line-height: 1; }
.drawer a span { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--cu); }
.drawer .mono { margin-top: auto; color: var(--mute); }

/* ---------- HERO — filmstrip (full-bleed photo, uneven card strip; scroll steps through slides) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; color: var(--paper); background: var(--ph); }
.hx-bg { position: absolute; inset: 0; z-index: 0; }
.hx-bgs { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.hx-bgs.is-on { opacity: 1; }
.hx-bgs img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.28); transform-origin: 50% 50%; }
.hx-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(15,15,14,.42), rgba(15,15,14,0) 38%), linear-gradient(to top, rgba(15,15,14,.5), rgba(15,15,14,0) 30%), linear-gradient(to bottom, rgba(15,15,14,.35), rgba(15,15,14,0) 22%); }
/* logo in the slot the reference uses for its changing title */
.hx-logo { position: absolute; left: var(--pad); top: 80px; z-index: 2; display: flex; flex-direction: column; gap: 10px; width: 160px; color: var(--paper); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.035em; }
.hx-logo svg { width: 56px; height: 56px; color: var(--cu); }
/* card strip: sits on the horizontal midline; the active card is twice as tall and grows downward */
.hx { --cw: 12.36vw; --gap: 7px; --shift: 120px; --ws: 160px; }
.hx-strip { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* Safari < 14.1 ignores `inset` — explicit edges keep the banner layers full-size there */
.hx-bg, .hx-bgs, .hx-shade, .hx-strip { top: 0; right: 0; bottom: 0; left: 0; }
/* cards share a bottom line just below the midline; the active card grows upward from it */
.hx-track { position: absolute; left: 43.8vw; bottom: calc(50% - var(--cw) * .668 - var(--shift)); display: flex; align-items: flex-end; gap: var(--gap); will-change: transform; }
.hx-card { pointer-events: auto; flex: none; width: var(--cw); height: calc(var(--cw) * .668); padding: 0; border: 0; overflow: hidden; background: var(--ph); cursor: pointer; will-change: height; }
.hx-card.is-on { height: calc(var(--cw) * 1.337); cursor: default; }
.hx-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 1s var(--ease); }
.hx-card:not(.is-on):hover img { scale: 1.08; }
.hx-card:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }
/* progress: 01 ——— 05 */
.hx-count { position: absolute; left: var(--pad); bottom: 30px; z-index: 2; width: clamp(200px, 20vw, 300px); display: grid; grid-template-columns: auto auto; justify-content: space-between; row-gap: 10px; color: var(--paper); }
.hx-total { color: var(--paper-80); }
.hx-bar { grid-column: 1 / -1; position: relative; display: block; height: 1px; background: rgba(239, 233, 223, .3); overflow: hidden; }
.hx-bar b { position: absolute; inset: 0; background: var(--paper); transform-origin: left; transform: scaleX(.2); }
.hx-cta { position: absolute; right: var(--pad); bottom: 30px; z-index: 2; }


/* ---------- MANIFESTO ---------- */
.manifesto { position: relative; padding: clamp(120px, 14vw, 230px) 0 clamp(90px, 10vw, 160px); background: var(--bg); }
.manifesto__text { margin-top: 36px; font-size: clamp(28px, 3.9vw, 66px); font-weight: 600; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; max-width: 21ch; }
.manifesto__text .sl { display: inline; background: linear-gradient(90deg, var(--paper) 0 50%, var(--dim) 50% 100%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(80px, 10vw, 160px); border-top: 1px solid var(--line); }
.metrics > div { padding: 24px 24px 0 0; }
.metrics > div + div { padding-left: 24px; }
.metrics dt { color: var(--mute); }
.metrics dd { margin: clamp(30px, 4vw, 70px) 0 14px; font-size: clamp(54px, 6.4vw, 112px); font-weight: 600; letter-spacing: -.065em; line-height: .8; }
.metrics p { color: var(--mute); max-width: 26ch; font-size: 15px; }

/* ---------- section heads ---------- */
.head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "e e e e" "h h a a"; row-gap: 32px; align-items: end; margin-bottom: clamp(56px, 7vw, 110px); }
.head .eyebrow { grid-area: e; }
.head .h2 { grid-area: h; }
.head__aside { grid-area: a; justify-self: end; max-width: 36ch; color: var(--mute); text-transform: uppercase; font-size: 13.5px; letter-spacing: .01em; line-height: 1.5; font-weight: 500; }

/* ---------- SERVICES ---------- */
.services { position: relative; padding: clamp(100px, 12vw, 190px) 0; background: var(--bg-2); }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.svc__item { border-bottom: 1px solid var(--line); }
.svc__item a { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 0fr; column-gap: 12px; padding: 26px 24px 26px 0; transition: grid-template-rows .9s var(--ease), padding .9s var(--ease); }
.svc__n { grid-row: 1; color: var(--mute); padding-top: .9em; transition: color .5s; }
.svc__t { grid-row: 1; font-size: clamp(30px, 3.4vw, 60px); font-weight: 600; line-height: .95; letter-spacing: -.045em; text-transform: uppercase; color: var(--dim); transition: color .6s var(--ease), transform .8s var(--ease); }
.svc__d, .svc__tags { grid-column: 2; overflow: hidden; min-height: 0; }
.svc__d { grid-row: 2; color: var(--mute); max-width: 44ch; opacity: 0; transition: opacity .6s var(--ease); }
.svc__tags { display: none; }
.svc__item.is-on a, .svc__item a:hover { grid-template-rows: auto 1fr; }
.svc__item.is-on .svc__t, .svc__item a:hover .svc__t { color: var(--paper); transform: translateX(10px); }
.svc__item.is-on .svc__n { color: var(--cu); }
.svc__item.is-on .svc__d, .svc__item a:hover .svc__d { opacity: 1; padding-top: 14px; }
.svc__stage { position: relative; border-left: 1px solid var(--line); padding: 0 0 0 var(--pad); }
.svc__frame { position: sticky; top: 110px; height: min(640px, calc(100vh - 170px)); overflow: hidden; background: var(--ph); margin-top: 24px; }
.svc__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); will-change: clip-path, transform; }
.svc__frame img.is-on { clip-path: inset(0 0 0 0); }
.svc__cap { position: absolute; left: 0; bottom: 0; z-index: 50; margin: 0; padding: 12px 16px; background: rgba(15, 15, 14, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--mute); }
.svc__cap span { color: var(--paper); }
.svc__mimg { display: none; }

/* ---------- WORK: showcase ---------- */
.work { position: relative; background: var(--bg); }
.showcase { position: relative; height: 100vh; }
.showcase__pin { position: relative; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.showcase__grid { position: absolute; inset: 0; }
.sc { position: absolute; overflow: hidden; background: var(--ph); will-change: transform; }
.sc img { width: 100%; height: 100%; object-fit: cover; }
.sc--1 { left: 4%; top: 12%; width: 20vw; height: 26vh; }
.sc--2 { left: 7%; bottom: 9%; width: 24vw; height: 30vh; }
.sc--3 { right: 5%; top: 9%; width: 22vw; height: 30vh; }
.sc--4 { right: 8%; bottom: 12%; width: 18vw; height: 26vh; }
.sc--main { left: 50%; top: 50%; width: 32vw; height: 44vh; transform: translate(-50%, -50%); z-index: 2; }
.showcase__word { position: absolute; z-index: 3; top: 50%; font-size: calc(clamp(60px, 13.5vw, 240px) - 30px); font-weight: 600; letter-spacing: -.065em; line-height: .8; text-transform: uppercase; pointer-events: none; color: var(--paper); text-shadow: 0 4px 60px rgba(15,15,14,.35); }
.showcase__word--l { left: var(--pad); transform: translateY(-100%); }
.showcase__word--r { right: var(--pad); transform: translateY(0%); }

/* ---------- WORK: cases ---------- */
.head--work { padding-top: clamp(100px, 12vw, 190px); }
.cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(70px, 9vw, 150px); padding-bottom: clamp(110px, 13vw, 200px); }
.case { position: relative; }
.case__media { position: relative; display: block; overflow: hidden; background: var(--ph); }
.case__media img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; transition: scale 1.4s var(--ease), filter .8s; }
.case__media:hover img { scale: 1.05; }
.case__media::after { content: "View project ↗"; position: absolute; left: 50%; top: 50%; padding: 14px 20px; background: var(--paper); color: var(--ink); font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .5s var(--ease), transform .7s var(--ease); }
.case__media:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.case__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "t l"; gap: 8px 24px; align-items: end; padding-top: 18px; border-top: 1px solid var(--line); margin-top: 16px; }
.case__info > .mono { grid-area: n; color: var(--cu-2); }
.case__info h3 { grid-area: t; font-size: clamp(22px, 2vw, 34px); font-weight: 600; letter-spacing: -.035em; text-transform: uppercase; line-height: 1; }
.case__info ul { grid-area: l; text-align: right; color: var(--mute); }
.case--a { grid-column: 1 / span 8; } .case--a .case__media { aspect-ratio: 16 / 10; }
.case--b { grid-column: 10 / span 3; align-self: end; } .case--b .case__media { aspect-ratio: 3 / 4.2; }
.case--b .case__info { grid-template-areas: "n" "t" "l"; grid-template-columns: 1fr; } .case--b .case__info ul { text-align: left; }
.case--c { grid-column: 1 / -1; } .case--c .case__media { aspect-ratio: 21 / 9; }
.case--d { grid-column: 2 / span 5; } .case--d .case__media { aspect-ratio: 4 / 5; }
.case--e { grid-column: 8 / span 5; margin-top: clamp(80px, 14vw, 240px); } .case--e .case__media { aspect-ratio: 4 / 3.4; }

/* ---------- PROCESS ---------- */
.process { position: relative; background: var(--bg-3); overflow: hidden; }
.process__pin { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 110px 0 60px; }
.process__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vh, 64px); }
.process__head .eyebrow { width: 100%; }
.process__meter { width: min(320px, 30vw); height: 1px; background: var(--line-2); margin-bottom: 14px; }
.process__meter i { display: block; height: 100%; background: var(--cu); transform-origin: left; transform: scaleX(0); }
.process__track { display: flex; gap: clamp(20px, 2.4vw, 40px); padding: 0 var(--pad); width: max-content; will-change: transform; }
.ch { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px 26px; width: clamp(560px, 50vw, 860px); padding: clamp(20px, 2vw, 30px); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(239,233,223,.035), rgba(239,233,223,0) 60%); }
.ch__n { grid-row: 1 / span 2; font-size: clamp(90px, 9vw, 160px); font-weight: 600; line-height: .78; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.ch__img { position: relative; height: clamp(230px, 34vh, 380px); overflow: hidden; background: var(--ph); }
.ch__img img { position: absolute; left: -8%; top: 0; width: 116%; height: 100%; max-width: none; object-fit: cover; will-change: transform; }
.ch__txt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: start; }
.ch__txt h3 { font-size: clamp(28px, 2.6vw, 44px); font-weight: 600; text-transform: uppercase; letter-spacing: -.045em; line-height: .9; }
.ch__txt p { grid-column: 1 / -1; grid-row: 2; color: var(--mute); max-width: 48ch; }
.ch__txt .mono { color: var(--cu-2); padding-top: 6px; }
.ch.is-on .ch__n { -webkit-text-stroke-color: var(--cu); }

/* ---------- BEFORE / AFTER ---------- */
.transform { position: relative; padding: clamp(110px, 13vw, 200px) 0; background: var(--bg); }
.transform__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 28px; margin-bottom: clamp(44px, 5vw, 80px); }
.transform__head .eyebrow { width: 100%; }
.ba { --p: 50%; position: relative; width: calc(100% - 2 * var(--pad)); max-width: calc(var(--container) - 2 * var(--pad)); margin: 0 auto; aspect-ratio: 16 / 8; overflow: hidden; background: var(--ph); cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 1px; background: var(--paper); pointer-events: none; }
.ba__line span { position: absolute; top: 50%; left: 0; width: 72px; height: 72px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: rgba(15, 15, 14, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(239,233,223,.6); font-size: 22px; transition: scale .6s var(--ease), background-color .5s; }
.ba:hover .ba__line span, .ba.is-drag .ba__line span { scale: 1.1; background: var(--cu); border-color: var(--cu); }
.ba__lab { position: absolute; top: 20px; padding: 8px 12px; background: rgba(15, 15, 14, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
.ba__lab--l { left: 20px; } .ba__lab--r { right: 20px; }
.transform__foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.transform__foot p { grid-column: 1 / span 2; color: var(--mute); max-width: 56ch; }
.transform__foot dl { grid-column: 3 / span 2; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.transform__foot dl div { padding-top: 14px; }
.transform__foot dt { color: var(--mute); }
.transform__foot dd { color: var(--paper); margin-top: 6px; }

/* ---------- ABOUT ---------- */
.about { position: relative; padding: clamp(110px, 13vw, 200px) 0; background: var(--bg-2); overflow: hidden; }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
.about__copy .h2 { margin-top: 32px; }
.about__h .line-i { transform-origin: 0 100%; }
.about__rule { display: block; height: 1px; margin-top: clamp(40px, 5vw, 70px); background: var(--line); transform-origin: left; }
.about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 24px; }
.about__cols p { color: var(--mute); font-size: 15px; }
.about__cols .aw { display: inline-block; will-change: opacity, transform; }
.about__sig { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 36px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.about__sig-name { position: relative; }
.about__sig-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--cu); transform: scaleX(var(--sig, 0)); transform-origin: left; }
.about__sig .mono { color: var(--mute); }

.about__visual { position: relative; height: clamp(520px, 52vw, 820px); }
.about__main, .about__inset { position: absolute; margin: 0; overflow: hidden; background: var(--ph); }
.about__main { right: 0; top: 0; width: 82%; height: 88%; will-change: clip-path; }
.about__inset { left: 0; bottom: 0; z-index: 2; width: 42%; height: 40%; outline: 10px solid var(--bg-2); will-change: clip-path, transform; }
.about__main-in, .about__inset-in { position: absolute; inset: -9% 0; will-change: transform; }
.about__main img, .about__inset img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transition: scale 1.4s var(--ease); }
.about__main:hover img, .about__inset:hover img { scale: 1.045; }
.about__tag { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; gap: 10px; padding: 10px 14px; background: rgba(15, 15, 14, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--paper-80); clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease); pointer-events: none; }
.about__tag span { color: var(--cu-2); }
.about__main:hover .about__tag, .about__inset:hover .about__tag { clip-path: inset(0 0 0 0); }
.about__year { position: absolute; left: -2%; top: 2%; z-index: 3; margin: 0; font-size: clamp(70px, 9vw, 160px); font-weight: 600; letter-spacing: -.07em; line-height: .8; writing-mode: vertical-rl; transform: rotate(180deg); pointer-events: none; }
.about__year span {
  --f: 0%; display: inline-block; color: transparent; -webkit-text-stroke: 1px rgba(239, 233, 223, .55);
  background: linear-gradient(var(--cu), var(--cu)) top / 100% var(--f) no-repeat; -webkit-background-clip: text; background-clip: text;
}
.about__mark { position: absolute; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; color: var(--mute); }
.about__mark i { width: 6px; height: 6px; background: var(--cu); }

/* ---------- WHY ---------- */
.why { position: relative; min-height: 100vh; display: flex; align-items: stretch; overflow: hidden; color: var(--ink); background: #d9dde0; will-change: clip-path; }
.why__bg { position: absolute; inset: -12% 0; z-index: 0; }
.why__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.why__inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 60px; padding-top: clamp(110px, 12vw, 170px); padding-bottom: clamp(40px, 4vw, 60px); }
.why__head .h2 { margin-top: 28px; color: #ffffff); max-width: 9ch; }
.why__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(15, 15, 14, .72); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); color: var(--paper); }
.why__list li { padding: clamp(20px, 2.2vw, 34px); border-left: 1px solid var(--line); min-height: 240px; display: flex; flex-direction: column; }
.why__list li:first-child { border-left: 0; }
.why__list .mono { color: var(--cu-2); }
.why__list h3 { margin-top: auto; padding-top: 50px; font-size: clamp(20px, 1.7vw, 28px); font-weight: 600; letter-spacing: -.035em; line-height: 1; text-transform: uppercase; }
.why__list p { margin-top: 12px; color: var(--mute); font-size: 15px; }

/* ---------- TESTIMONIALS ---------- */
.voices { position: relative; padding: clamp(110px, 13vw, 200px) 0; background: var(--bg); }
.voices__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: clamp(40px, 5vw, 70px); }
.voices__score { display: flex; align-items: flex-end; gap: 14px; }
.voices__score b { font-size: clamp(54px, 5vw, 86px); font-weight: 600; letter-spacing: -.06em; line-height: .8; }
.voices__score .mono { color: var(--cu-2); }
.voices__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.voices__img { position: relative; height: clamp(440px, 46vw, 720px); overflow: hidden; background: var(--ph); }
.voices__img img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.voices__quotes { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 4vw, 70px); border-left: 1px solid var(--line); }
.vq { grid-area: 1 / 1; display: none; }
.vq.is-on { display: block; }
.vq blockquote { font-size: clamp(26px, 2.8vw, 50px); font-weight: 500; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.vq blockquote .w { display: inline-block; }
.vq figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 36px; }
.vq figcaption b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.vq figcaption .mono { color: var(--mute); }
.voices__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 50px; padding-top: 18px; border-top: 1px solid var(--line); }
.vbtn { background: none; border: 0; padding: 8px 0; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); cursor: pointer; transition: color .3s; }
.vbtn:hover { color: var(--cu-2); }
.voices__nav .mono span { color: var(--paper); }

/* ---------- JOURNAL ---------- */
.journal { position: relative; padding: clamp(110px, 13vw, 200px) 0; background: var(--bg-2); }
.head--journal .pill { grid-area: a; justify-self: end; }
/* FAQ accordion — each row is a button; the answer opens by animating its grid row from 0fr to 1fr */
.faq { border-top: 1px solid var(--line); }
.faq__item { position: relative; border-bottom: 1px solid var(--line); isolation: isolate; }
.faq__item::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--pad)); z-index: -1; background: var(--bg-4); opacity: 0; transition: opacity .6s var(--ease); }
.faq__item:hover::before, .faq__item.is-open::before { opacity: 1; }
.faq__h { margin: 0; font: inherit; }
.faq__q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) 150px 48px; align-items: center; gap: 24px; width: 100%; padding: clamp(26px, 2.8vw, 40px) 0; border: 0; background: none; text-align: left; cursor: pointer; }
.faq__n { color: var(--cu-2); }
.faq__t { font-size: clamp(22px, 2.3vw, 40px); font-weight: 600; letter-spacing: -.04em; line-height: 1; text-transform: uppercase; transition: transform .8s var(--ease), color .5s; }
.faq__q:hover .faq__t, .faq__item.is-open .faq__t { transform: translateX(12px); }
.faq__cat { color: var(--mute); text-align: right; }
.faq__icon { position: relative; width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: 50%; transition: background-color .5s var(--ease), border-color .5s, transform .7s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--paper); transition: transform .6s var(--ease), background-color .5s; }
.faq__icon::after { transform: rotate(90deg); }
.faq__q:hover .faq__icon { border-color: var(--paper); }
.faq__item.is-open .faq__icon { background: var(--cu); border-color: var(--cu); transform: rotate(180deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: var(--ink); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__in { min-height: 0; overflow: hidden; }
.faq__in p { max-width: 62ch; margin-left: calc((100% - 24px * 3 - 150px - 48px) / 3.4 + 24px); padding: 0 0 clamp(28px, 3vw, 44px) 12px; color: var(--paper-80); font-size: clamp(15px, 1.15vw, 19px); line-height: 1.6; opacity: 0; transform: translateY(-8px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.faq__item.is-open .faq__in p { opacity: 1; transform: none; transition-delay: .12s; }
.faq__q:focus-visible { outline: none; }
.faq__q:focus-visible .faq__icon { outline: 1px solid var(--cu); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .faq__a, .faq__in p, .faq__t, .faq__icon { transition: none; } }

/* ---------- CTA ---------- */
.cta { position: relative;  background: var(--bg); }
.cta__window { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; background: var(--ph); will-change: clip-path; }
.cta__window > img { position: absolute; inset: -8% 0; z-index: -2; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.cta__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(15,15,14,.74) 0%, rgba(15,15,14,.3) 50%, rgba(15,15,14,.12) 100%), linear-gradient(to top, rgba(15,15,14,.45), transparent 40%); }
.cta__inner { max-width: var(--container); margin: 0 auto; min-height: 100vh; padding: clamp(100px, 10vw, 150px) var(--pad) clamp(40px, 5vw, 70px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 6vw, 120px); align-items: end; }
.cta__h { margin-top: 28px; font-size: clamp(54px, 8.4vw, 120px); font-weight: 600; line-height: .95; letter-spacing: -.06em; text-transform: uppercase; }
.cta__p { margin-top: 30px; max-width: 40ch; color: var(--paper-80); }
.cta__direct { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; font-size: clamp(18px, 1.5vw, 24px); font-weight: 500; letter-spacing: -.02em; }
.cta__direct a { border-bottom: 1px solid var(--line-2); transition: border-color .4s, color .4s; }
.cta__direct a:hover { color: var(--cu-2); border-color: var(--cu-2); }
.form { background: rgba(15, 15, 14, .62); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); border: 1px solid var(--line-2); }
.form__fields { display: grid; grid-template-columns: 1fr 1fr; }
.f { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.f:nth-child(odd):not(.f--wide) { border-right: 1px solid var(--line); }
.f--wide { grid-column: 1 / -1; }
.f .mono { color: var(--mute); }
.f input, .f select, .f textarea { width: 100%; padding: 0; border: 0; background: none; font-size: 16px; outline: none; resize: none; }
.f select { appearance: none; -webkit-appearance: none; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23efe9df' stroke-width='1.2'/%3E%3C/svg%3E") right center / 12px no-repeat; }
.f select option { background: var(--bg-2); }
.f input::placeholder, .f textarea::placeholder { color: var(--dim); }
.f:focus-within { background: rgba(239, 233, 223, .04); }
.f:focus-within .mono { color: var(--cu-2); }
.f.is-err .mono { color: #e2775a; }
.form__send { position: relative; display: flex; justify-content: space-between; align-items: stretch; width: 100%; height: 64px; padding: 0; border: 0; background: var(--paper); color: var(--ink); font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; overflow: hidden; isolation: isolate; }
.form__send span { display: flex; align-items: center; padding: 0 22px; }
.form__send b { display: grid; place-items: center; width: 64px; border-left: 1px solid rgba(15,15,14,.15); font-weight: 400; }
.form__send::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cu); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease); }
.form__send:hover::before { transform: scaleX(1); transform-origin: left; }
.form__ok { padding: 0 22px; max-height: 0; overflow: hidden; color: var(--cu-2); transition: max-height .6s var(--ease), padding .6s var(--ease); }
.form.is-sent .form__ok { max-height: 80px; padding: 16px 22px; }

/* ---------- FOOTER ---------- */
.foot { position: relative; z-index: 61; background: var(--bg-3); padding-top: clamp(70px, 8vw, 120px); overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.foot__grid > * { padding: 28px 24px 40px 0; }
.foot__grid > * + * { padding-left: 24px; }
.foot__brand p { margin-top: 22px; max-width: 30ch; color: var(--mute); font-size: 14.5px; }
.foot__links { display: flex; flex-direction: column; }
.foot__links a { display: flex; justify-content: space-between; padding: 10px 0; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: color .3s, padding .6s var(--ease); }
.foot__links a:first-child { padding-top: 0; }
.foot__links a b { font-weight: 400; color: var(--mute); transition: transform .6s var(--ease), color .3s; }
.foot__links a:hover { color: var(--cu-2); padding-left: 8px; }
.foot__links a:hover b { color: var(--cu-2); transform: translateX(-4px); }
.foot__col .mono { color: var(--mute); margin-bottom: 6px; }
.foot__col p:not(.mono) { margin-bottom: 22px; font-size: 15px; }
.foot__col a:hover { color: var(--cu-2); }
.foot__bar { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 0; color: var(--mute); }
.foot__bar a:hover { color: var(--paper); }
.foot__word { display: flex; justify-content: center; padding: 0 var(--pad) .1em; margin: 0 auto; max-width: var(--container); font-size: clamp(90px, 20.5vw, 370px); font-weight: 600; line-height: .82; letter-spacing: -.07em; white-space: nowrap; will-change: clip-path; }
.foot__word span { display: block; }
.foot__word span:last-child { color: var(--cu); }
.foot__word--long { gap: .18em; font-size: clamp(44px, 10.6vw, 192px); letter-spacing: -.045em; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }

/* ---------- pre-boot hero (no flash before intro) ---------- */
.js:not(.no-anim) .hx-bg { opacity: 0; }
.js:not(.no-anim) .hx-logo, .js:not(.no-anim) .hx-count, .js:not(.no-anim) .hx-cta, .js:not(.no-anim) .hx-card { opacity: 0; }
.js:not(.no-anim) .hdr { opacity: 0; }

/* ===================================================================== RESPONSIVE */
@media (max-width: 1100px) {
  .hdr__nav { display: none; }
  .hdr { grid-template-columns: 1fr auto auto; gap: 12px; }
  .hdr__menu { display: block; }
  .head { grid-template-areas: "e e e e" "h h h h" "a a a a"; }
  .head__aside, .head--journal .pill { justify-self: start; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics > div:nth-child(3) { padding-left: 0; }
  .metrics > div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 40px; }
  .metrics > div:nth-child(even) { border-left: 1px solid var(--line); }
  .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__list li:nth-child(3) { border-left: 0; }
  .why__list li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cta__inner { grid-template-columns: 1fr; align-items: start; }
  .about__grid { grid-template-columns: 1fr; }
  .voices__stage { grid-template-columns: 1fr; }
  .voices__img { height: clamp(300px, 56vw, 520px); }
  .voices__quotes { border-left: 0; padding-left: 0; padding-right: 0; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid > :nth-child(3) { padding-left: 0; }
}
@media (max-width: 900px) {
  .guides i:nth-child(2), .guides i:nth-child(4) { display: none; }
  .xm span:nth-child(2), .xm span:nth-child(4) { display: none; }
  .svc { grid-template-columns: 1fr; }
  .svc__stage { display: none; }
  .svc__item a { grid-template-rows: auto auto auto; padding-right: 0; }
  .svc__t { color: var(--paper); }
  .svc__d { opacity: 1; padding-top: 12px; }
  .svc__mimg { display: block; grid-column: 1 / -1; grid-row: 3; margin-top: 18px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ph); }
  .svc__mimg img { width: 100%; height: 100%; object-fit: cover; }
  .svc__item.is-on .svc__t, .svc__item a:hover .svc__t { transform: none; }
  .showcase { height: auto; }
  .showcase__pin { height: 78vh; min-height: 480px; }
  .sc--1 { width: 34vw; height: 18vh; } .sc--2 { width: 38vw; height: 20vh; } .sc--3 { width: 34vw; height: 20vh; } .sc--4 { width: 32vw; height: 18vh; }
  .sc--main { width: 56vw; height: 34vh; }
  .cases { grid-template-columns: 1fr; }
  .case--a, .case--b, .case--c, .case--d, .case--e { grid-column: 1; margin-top: 0; }
  .case--b .case__media { aspect-ratio: 4 / 3; }
  .case--c .case__media { aspect-ratio: 16 / 10; }
  .case--d .case__media, .case--e .case__media { aspect-ratio: 4 / 3; }
  .process__pin { min-height: 0; padding: clamp(100px, 14vw, 140px) 0; }
  .process__meter { display: none; }
  .process__track { flex-direction: column; width: auto; }
  .ch { width: 100%; grid-template-columns: 1fr; }
  .ch__n { grid-row: auto; font-size: 72px; }
  .ch__img img { left: 0; width: 100%; }
  .ba { aspect-ratio: 4 / 3.4; }
  .transform__foot { grid-template-columns: 1fr; }
  .transform__foot p, .transform__foot dl { grid-column: 1; }
  .faq__q { grid-template-columns: auto minmax(0, 1fr) 42px; gap: 12px 18px; padding: 24px 0; }
  .faq__n { grid-row: 1; grid-column: 1; }
  .faq__cat { grid-row: 1; grid-column: 2; text-align: left; }
  .faq__t { grid-row: 2; grid-column: 1 / 3; font-size: clamp(20px, 4.6vw, 30px); }
  .faq__icon { grid-row: 1 / 3; grid-column: 3; width: 42px; height: 42px; }
  .faq__q:hover .faq__t, .faq__item.is-open .faq__t { transform: none; }
  .faq__in p { margin-left: 0; padding: 0 60px 26px 0; }
}
@media (max-width: 640px) {
  .hdr__cta { display: none; }
  .hx { --cw: 30vw; --gap: 5px; --shift: 60px; --ws: clamp(52px, 16vw, 72px); }
  .hx-track { left: 34vw; }
  .hx-word { right: 0; text-align: center; }
  .hx-logo { width: 120px; font-size: 30px; gap: 8px; }
  .hx-logo svg { width: 42px; height: 42px; }
  .hx-count { bottom: 92px; width: calc(100% - 2 * var(--pad)); }
  .hx-cta { left: var(--pad); right: var(--pad); bottom: 22px; justify-content: space-between; }
  .metrics { grid-template-columns: 1fr; }
  .metrics > div, .metrics > div + div { padding-left: 0; border-left: 0 !important; }
  .metrics > div + div { border-top: 1px solid var(--line); margin-top: 36px; }
  .why__list { grid-template-columns: 1fr; }
  .why__list li { border-left: 0; min-height: 0; }
  .why__list li + li { border-top: 1px solid var(--line); }
  .why__list h3 { padding-top: 26px; }
  .about__cols { grid-template-columns: 1fr; }
  .about__visual { height: 120vw; }
  .form__fields { grid-template-columns: 1fr; }
  .f:nth-child(odd):not(.f--wide) { border-right: 0; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__grid > *, .foot__grid > * + * { padding-left: 0; }
  .ba__line span { width: 56px; height: 56px; }
  .ba__lab { top: 12px; font-size: 10px; }
  .ba__lab--l { left: 12px; } .ba__lab--r { right: 12px; }
  .voices__head { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (hover: none) { .about__tag { display: none; } }

/* ---------- 10px radius on contained images, cards and boxed UI (full-bleed media stays square) ---------- */
:root { --rad: 10px; }
.hero__chip, .svc__frame, .svc__cap, .svc__mimg, .sc, .case__media, .case__media::after, .ch, .ch__img,
.ba, .ba__lab, .about__main, .about__inset, .about__tag, .why__list, .voices__img, .post__img, .cursor-img,
.form, .pill, .hdr__cta, .hdr__menu { border-radius: var(--rad); }
.hero__chip, .form, .hdr__cta { overflow: hidden; }


/* ---------- Featured projects: spotlight reveal + magnetic "+" disc (desktop) / scroll reveal (touch) ---------- */
.cases.is-fx .case__media::after { display: none; }
.case__media img.case__img { transition: scale 1.4s var(--ease), filter .8s var(--ease); }
.cases.is-pointer .case__media { cursor: none; }
.cases.is-pointer .case__media:hover img.case__img { scale: 1; }
/* hover: the photo calms to a dim monochrome; a full-colour copy is revealed through a soft circle at the cursor */
.cases.is-pointer .case__media.is-hover img.case__img { filter: grayscale(1) brightness(.62); scale: 1.04; }
.case__lit {
  --mx: 50%; --my: 50%; --r: 0px;
  position: absolute; left: 0; top: -10%; z-index: 1; width: 100%; height: 120%; object-fit: cover; pointer-events: none; will-change: transform;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 calc(var(--r) * .45), transparent var(--r));
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 calc(var(--r) * .45), transparent var(--r));
  transition: scale 1.4s var(--ease);
}
.cases.is-pointer .case__media.is-hover img.case__lit, .cases.is-pointer .case__media:hover img.case__lit { scale: 1.04; }
.case-plus {
  position: absolute; left: 0; top: 0; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--ink); pointer-events: none; opacity: 0; transform: scale(0);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45); will-change: transform, opacity;
}
.case-plus svg { width: 22px; height: 22px; }
/* touch: no cursor — the image eases in and the disc settles in its corner as it reaches the middle of the screen */
.cases.is-touch .case-plus { left: auto; top: auto; right: 16px; bottom: 16px; width: 52px; height: 52px; margin: 0; transition: opacity .6s var(--ease), transform .8s var(--ease); }
.cases.is-touch .case__media.is-active .case-plus { opacity: 1; transform: scale(1); }
.cases.is-touch .case__media.is-active img.case__img { scale: 1.06; }
@media (min-width: 641px) and (max-width: 1100px) { .hx { --cw: 17vw; --ws: clamp(96px, 12.5vw, 136px); } .hx-track { left: 40vw; } }

/* ---------- hero: one large word per slide, sitting above the strip (bottom edge 44px above the active card) ---------- */
.hx-words { position: absolute; left: var(--pad); right: var(--pad); z-index: 2; bottom: calc(50% - var(--shift) + var(--cw) * .669 + 44px); height: calc(var(--ws) * .98); overflow: hidden; pointer-events: none;
  font-size: var(--ws); font-weight: 600; line-height: .9; letter-spacing: -.05em; text-transform: uppercase; color: var(--paper); }
.hx-word { position: absolute; left: 0; bottom: 0; white-space: nowrap; padding-bottom: .04em; will-change: transform, opacity; opacity: 0; }
.hx-word:first-child { opacity: 1; }
.js:not(.no-anim) .hx-words { opacity: 0; }

/* ---------- Selected Work showcase: autoplay video that opens to full-bleed, holds, and is overlaid by the next content ----------
   .showcase = 100vh stage + 170vh of expansion + 100vh of overlap. The stage is sticky (no layout work while scrolling);
   the video is always full-size and is revealed through a clip-path that opens from the small centre frame. */
.showcase { height: 370vh; }
.showcase__pin { position: sticky; top: 0; height: 100vh; }
.sc--main { left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: 0; clip-path: inset(28vh 34vw 28vh 34vw round 10px); will-change: clip-path; }
.sc__video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); will-change: transform; }
.work__over { position: relative; z-index: 4; margin-top: -100vh; background: var(--bg); box-shadow: 0 -40px 120px rgba(0, 0, 0, .55); }
@media (max-width: 900px) {
  .showcase { height: 330vh; }
  .showcase__pin { height: 100vh; min-height: 0; }
  .sc--main { width: 100%; height: 100%; clip-path: inset(33vh 22vw 33vh 22vw round 10px); }
}

/* ---------- Testimonials: one portrait per review, crossfaded in sync with the quote ---------- */
.voices__img .vimg { opacity: 0; object-position: 50% 28%; }
.voices__img .vimg.is-on { opacity: 1; }
.vq__stars { margin-bottom: 22px; font-size: 15px; letter-spacing: .2em; color: var(--cu-2); }
.vq__role { font-size: 15px; color: var(--paper-80); }

/* showcase entrance: the words rise inside an inner wrapper (the outer word keeps its scroll animation) */
.showcase__word .sw-in { display: inline-block; will-change: transform, opacity; }

/* orange-hover buttons: white text + arrow on hover (background stays copper) */
.pill--light:hover, .pill--light:focus-visible { color: #fff; border-color: var(--cu); }
.pill--light:hover b, .pill--light:focus-visible b { border-color: rgba(255, 255, 255, .35); }
.form__send span, .form__send b { transition: color .5s var(--ease); }
.form__send:hover, .form__send:focus-visible { color: #fff; }
.form__send:hover b, .form__send:focus-visible b { border-color: rgba(255, 255, 255, .35); }

/* Safari: the banner layers sit at z-index 0-2 (no negative layers) and only the moving strip is GPU-promoted */
.hx-words, .hx-logo, .hx-count, .hx-cta { z-index: 3; }