/* Studio 1-0, site stylesheet. Reference layout: Figma "V3 / Website" (desktop 1440, mobile 390). */

/* ---------- fonts (self-hosted, Google Fonts families) ---------- */
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-wght.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/instrument-sans-wght.woff2') format('woff2-variations'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/space-mono.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/space-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'League Gothic'; src: url('/assets/fonts/league-gothic.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/geist-wght.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-wght.woff2') format('woff2-variations'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-wght.woff2') format('woff2-variations'); font-weight: 100 1000; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-gothic: 'League Gothic', 'Arial Narrow', Impact, sans-serif;
  --f-geist: 'Geist', 'Instrument Sans', sans-serif;
  --f-manrope: 'Manrope', 'Instrument Sans', sans-serif;
  --f-dmsans: 'DM Sans', 'Instrument Sans', sans-serif;
  --pad: clamp(20px, 3.34vw, 48px);
  --bg: #130e0a;
  --text: #f2efe9;
  --accent: #c7431d;
  --white: #ffffff;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .7s;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-sans); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.light { color-scheme: light; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol, dl, figure, h1, h2, p { margin: 0; padding: 0; }
li { list-style: none; }
.mono { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; }
.cap { font-family: var(--f-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; color: var(--muted, inherit); }
.dim { opacity: .6; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- navigation ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; pointer-events: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px var(--pad) 0; color: #fff; }
.nav-center { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3.7vw, 53px); flex: 1; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 27px; padding: 6px 14px; border-radius: 24px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: background .3s var(--ease), transform .3s var(--ease); }
.pill:hover { background: rgba(255,255,255,.22); }
.pill:active { transform: scale(.97); }
.pill-spacer { width: 151px; flex: 0 0 auto; }
.pill-spacer-lang { display: flex; justify-content: flex-end; }
.lang-toggle { display: inline-flex; align-items: center; gap: 2px; pointer-events: auto; }
.lang-opt { display: inline-flex; align-items: center; height: 27px; padding: 6px 12px; border-radius: 24px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: inherit; opacity: .75; transition: opacity .3s var(--ease), background .3s var(--ease); }
a.lang-opt:hover { opacity: 1; }
.lang-opt.is-active { opacity: 1; }
.menu-lang .lang-opt { font-size: 11px; }
.menu-lang .lang-opt.pill { background: rgba(255,255,255,.12); }
.nav .pill, .nav .afzender, .nav .lang-opt { pointer-events: auto; }
.nav, .nav .pill, .nav .afzender-svg [fill="white"], .nav .afzender-svg [stroke="white"] { transition: color .35s var(--ease), background-color .35s var(--ease), fill .35s var(--ease), stroke .35s var(--ease); }
/* nav on a light background: black */
.nav.nav-on-light { color: #111; }
.nav.nav-on-light .pill { color: #111; background: rgba(0,0,0,.07); }
.nav.nav-on-light .pill:hover { background: rgba(0,0,0,.14); }
.nav.nav-on-light .afzender-svg > [fill="white"], .nav.nav-on-light .afzender-svg :not(mask) > [fill="white"] { fill: #111; }
.nav.nav-on-light .afzender-svg [stroke="white"] { stroke: #111; }
body.menu-open .nav { color: #fff; }
body.menu-open .nav .pill { color: #fff; background: rgba(255,255,255,.1); }
body.menu-open .nav .afzender-svg > [fill="white"], body.menu-open .nav .afzender-svg :not(mask) > [fill="white"] { fill: #fff; }
body.menu-open .nav .afzender-svg [stroke="white"] { stroke: #fff; }
.ico-burger { display: inline-flex; flex-direction: column; justify-content: space-between; width: 11px; height: 8px; }
.ico-burger i { display: block; height: 1px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }
.ico-arrow { display: inline-block; width: 12px; height: 8px; flex: 0 0 auto; transition: transform .3s var(--ease); }
.pill-back:hover .ico-arrow { transform: translateX(-2px); }
.ico-mail { display: none; }
.afzender { display: block; height: 16px; flex: 0 0 auto; }
.afzender-svg { height: 16px; width: auto; }
.afzender-svg path, .afzender-svg line { transition: opacity .3s; }
.afzender:hover .afzender-svg { opacity: .8; }
@media (max-width: 720px) {
  /* mobile: back arrow left (case pages), name + logo always centred, burger right */
  .nav { padding-top: 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
  .nav-center { display: contents; }
  .pill .lbl { display: none; }
  .pill { padding: 6px 12px; }
  .pill-back { grid-column: 1; grid-row: 1; justify-self: start; }
  .afzender { grid-column: 2; grid-row: 1; justify-self: center; }
  .pill-menu { grid-column: 3; grid-row: 1; justify-self: end; }
  .pill-mail, .pill-spacer { display: none; }
}

/* menu overlay */
.menu { position: fixed; inset: 0; z-index: 40; background: rgba(19,14,10,.96); color: #fff; overflow-x: hidden; overflow-y: auto; }
/* menu: full-width crop of the hero wipes in behind the hovered project (desktop) */
.menu-list li { position: relative; }
.menu-list li a { position: relative; z-index: 1; }
.menu-bg { display: none; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--pad)); width: 100vw; clip-path: inset(100% 0 0 0); pointer-events: none; will-change: clip-path; }
.menu-bg picture, .menu-bg img, .menu-bg .ph { width: 100%; height: 100%; object-fit: cover; }
.menu-bg::after { content: ''; position: absolute; inset: 0; background: rgba(19,14,10,.35); }
@media (min-width: 721px) and (hover: hover) { .menu-bg { display: block; } }
.menu[hidden] { display: none; }
.menu-inner { min-height: 100%; display: flex; flex-direction: column; padding: 28px var(--pad) 40px; }
.menu-head { display: flex; justify-content: space-between; align-items: center; }
.menu-list { margin: auto 0; padding: 48px 0; }
.menu-list li a { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 24px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.15); transition: padding-left .4s var(--ease); }
.menu-list li:last-child a { border-bottom: 1px solid rgba(255,255,255,.15); }
.menu-list li a:hover, .menu-list li a[aria-current] { padding-left: 12px; }
.menu-num { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; opacity: .6; }
.menu-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 4.5vw, 64px); letter-spacing: -.02em; line-height: 1; }
.menu-role { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; opacity: .7; text-align: right; }
.menu-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.menu-about { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.02em; }
.menu-mail { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.menu-mail:hover, .menu-about:hover { text-decoration: underline; text-underline-offset: .15em; }
body.menu-open { overflow: hidden; }
body.menu-open .ico-burger i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .ico-burger i:nth-child(2) { opacity: 0; }
body.menu-open .ico-burger i:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 720px) { .menu-list li a { grid-template-columns: 32px 1fr; } .menu-role { display: none; } }

/* ---------- case hero ---------- */
.hero { position: relative; min-height: 720px; height: 90vh; max-height: 900px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px var(--pad) 40px; color: #fff; overflow: hidden; }
.hero-media, .hero-overlay { position: absolute; inset: 0; }
.hero-media picture, .hero-media img, .hero-media .ph { width: 100%; height: 100%; object-fit: cover; }
.hero-media img { transform: scale(1.06); animation: heroIn 1.6s var(--ease) forwards; }
@keyframes heroIn { to { transform: scale(1); } }
.hero-overlay { background: var(--overlay); }
.hero-text { position: relative; display: flex; flex-direction: column; gap: 20px; }
.kicker { opacity: .9; }
.hero-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(56px, calc(var(--title-size, 96) * 0.0694vw), calc(var(--title-size, 96) * 1px)); line-height: 1.02; letter-spacing: -.02em; }
.metaregel { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.metaregel .tagline { text-align: right; max-width: 560px; }
.hero .kicker, .hero .metaregel { opacity: 0; animation: fadeUp .9s var(--ease) .3s forwards; }
.hero-title { opacity: 0; animation: fadeUp 1s var(--ease) .15s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: .95; transform: none; } }
@media (max-width: 720px) {
  .hero { min-height: 520px; height: 78vh; padding-bottom: 28px; }
  .hero-title { font-size: clamp(48px, 15vw, 64px); }
  .metaregel { flex-direction: column; align-items: flex-start; gap: 10px; }
  .metaregel .tagline { text-align: left; }
}

/* ---------- sections ---------- */
.sec { padding: var(--pt, 56px) var(--pad) var(--pb, 56px); display: flex; flex-direction: column; gap: var(--gap, 24px); color: var(--text); }
.sec.dark { --muted: rgba(255,255,255,.7); }
.sec.light { --muted: rgba(0,0,0,.6); }
.label { font-family: var(--f-mono); font-size: 10px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; max-width: 920px; }
.statement { max-width: 1100px; }
.facts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 40px; padding-top: 16px; }
.facts div { display: flex; flex-direction: column; gap: 8px; }
.facts dt { font-family: var(--f-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.facts dd { margin: 0; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; text-transform: uppercase; }
.sec.dark .facts dt { color: var(--accent); }
.fig { display: flex; flex-direction: column; gap: 10px; }
.fig-media { position: relative; aspect-ratio: var(--ratio, 16/9); overflow: hidden; border-radius: var(--radius, 0); background: var(--fig-bg, rgba(127,127,127,.08)); }
.fig-media picture, .fig-media img, .fig-media video, .fig-media .ph { width: 100%; height: 100%; object-fit: cover; }
.fig-contain .fig-media { display: flex; align-items: center; justify-content: center; }
.fig-contain .fig-media img { object-fit: contain; }
.fig-inner { height: auto; }
.fig-inner img { object-fit: contain; }
.ph { background: rgba(127,127,127,.12); }
.row { display: flex; gap: var(--gap, 24px); align-items: flex-start; }
.row-center { justify-content: center; }
.row .col { min-width: 0; }
.row-center .col { flex-grow: 0; }
.group { display: flex; flex-direction: column; gap: var(--gap, 12px); }
@media (max-width: 720px) {
  .row { flex-direction: column; }
  .row .col { flex: 1 1 auto !important; width: 100%; }
  .sec { --pt: 40px; --pb: 40px; }
  .facts { flex-direction: column; gap: 18px; }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .row-many { flex-wrap: wrap; }
  .row-many .col { flex: 1 1 40% !important; }
}

/* logo blocks */
.logo-box { display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio, 16/6); padding: 8%; }
.logo-svg svg { width: 100%; height: auto; }
.logo-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.logo-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio, 2/1); }
.logo-tile:first-child { grid-column: 1 / -1; }
.logo-tile-svg { width: clamp(120px, 14vw, 187px); height: auto; }
@media (max-width: 720px) { .logo-tiles { grid-template-columns: 1fr; } .logo-tile { aspect-ratio: 2/1; } }

/* colours */
.swatch-bar { display: flex; height: clamp(72px, 8.3vw, 120px); background: #fff; }
.swatch-bar .sw { flex: 1; }
.swatches { display: flex; gap: 20px; }
.swatches li { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.swatches .sw { aspect-ratio: var(--ratio, 1/1); border-radius: var(--radius, 0); }
.gradients { gap: 24px; }
@media (max-width: 720px) {
  .swatches { flex-wrap: wrap; }
  .swatches li { flex: 1 1 calc(25% - 15px); }
  .gradients li { flex: 1 1 100%; }
  .swatch-bar { flex-wrap: wrap; height: auto; }
  .swatch-bar .sw { flex: 1 1 20%; height: 72px; }
}
.palette { display: flex; gap: 0; }
.pal { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pal .sw { height: clamp(100px, 12.5vw, 180px); }
.pal-meta { display: flex; flex-direction: column; gap: 4px; }
.pal-share { font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em; }
@media (max-width: 720px) { .palette { flex-wrap: wrap; } .pal { flex: 1 1 30% !important; } .pal .sw { height: 90px; } }

/* type specimens */
.specimen { display: flex; flex-direction: column; gap: 24px; max-width: 900px; }
.specimen-main { white-space: pre-line; }
.manrope-box { display: flex; justify-content: space-between; align-items: center; gap: 64px; padding: clamp(28px, 4vw, 56px) clamp(24px, 4.4vw, 64px); font-family: var(--f-manrope); color: #faf7f5; }
.manrope-big { font-size: clamp(96px, 11.7vw, 168px); font-weight: 700; line-height: 1; }
.manrope-col { display: flex; flex-direction: column; gap: 6px; }
.manrope-name { font-size: clamp(32px, 3vw, 44px); font-weight: 800; line-height: 1.2; }
.manrope-w { font-size: clamp(18px, 1.5vw, 22px); opacity: .9; }
@media (max-width: 720px) { .manrope-box { flex-direction: column; align-items: flex-start; gap: 24px; } }

/* stories (phone strip) */
.stories { display: flex; flex-direction: column; gap: 12px; }
.strip { display: flex; gap: 48px; padding: 45px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.story { flex: 0 0 330px; scroll-snap-align: center; display: flex; flex-direction: column; gap: 14px; }
.phone { position: relative; aspect-ratio: 330/690; border-radius: 40px; overflow: hidden; box-shadow: 0 30px 50px rgba(0,0,0,.35); background: var(--phone-bg, #111); }
.stories.fit-contain .phone img, .stories.fit-contain .phone video { object-fit: contain; }
.phone picture, .phone img, .phone video, .phone .ph { width: 100%; height: 100%; object-fit: cover; }
.phone-ui { position: absolute; left: 20px; right: 20px; top: 26px; display: flex; align-items: center; gap: 12px; color: #fff; }
.phone-ui::before { content: ''; position: absolute; left: 0; right: 0; top: -0; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); }
.phone-bar { position: absolute; left: 0; top: 0; width: 33%; height: 3px; border-radius: 2px; background: #fff; }
.phone-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-dot, #d12e33); margin-top: 14px; }
.phone-handle { margin-top: 14px; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .02em; }
@media (max-width: 720px) { .strip { padding: 20px 0; gap: 20px; } .story { flex-basis: 70vw; } .phone { border-radius: 28px; } }
.stories.strip-js { margin-inline: calc(-1 * var(--pad)); }
.stories.strip-js .strip-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-inline: var(--pad); overflow: clip; box-sizing: border-box; }
.stories.strip-js .strip { overflow: visible; scroll-snap-type: none; will-change: transform; }
@media (min-width: 721px) { .stories.strip-js .strip { padding-bottom: 70px; } }
@media (max-height: 860px) and (min-width: 721px) { .stories.strip-js .story { flex-basis: calc((100svh - 220px) * 330 / 690); } }
@media (max-width: 720px) { .stories.strip-js .story { flex-basis: min(70vw, (100svh - 160px) * 330 / 690); } }

/* video */
.fig-video video { cursor: pointer; }

/* next case footer */
.next-case { position: relative; display: block; overflow: hidden; color: #fff; padding: 40px var(--pad); min-height: 182px; }
.next-media { position: absolute; inset: 0; }
.next-media picture, .next-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.next-media::after { content: ''; position: absolute; inset: 0; background: var(--next-overlay, rgba(23,28,28,.6)); transition: opacity .6s; }
.next-case:hover .next-media img { transform: scale(1.04); }
.next-case:hover .next-media::after { opacity: .85; }
.next-text { position: relative; display: flex; flex-direction: column; gap: 9px; }
.next-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.next-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 5vw, 72px); letter-spacing: -.02em; line-height: 1.08; }
@media (max-width: 720px) { .next-row .mono { display: none; } }

/* footer */
.site-foot { display: flex; justify-content: space-between; gap: 24px; padding: 28px var(--pad) 32px; border-top: 1px solid rgba(127,127,127,.25); opacity: .7; }

/* ---------- home: beeldindex ---------- */
.page-home { background: #130e0a; color: #fff; }
/* home: index + about as two snapped screens on desktop */
@media (min-width: 721px) { html:has(body.page-home) { scroll-snap-type: y proximity; } .page-home .index, .page-home .home-about { scroll-snap-align: start; } }
.index-tagline { position: absolute; left: var(--pad); top: 92px; z-index: 2; max-width: 340px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.92); text-wrap: balance; }
.index-hint { position: absolute; right: var(--pad); bottom: 30px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .05em; opacity: .8; }
.index-hint:hover { opacity: 1; }
.index-hint-arrow { display: inline-block; animation: hintBob 1.8s ease-in-out infinite; }
@keyframes hintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.home-about { min-height: 100vh; min-height: 100dvh; padding: 140px var(--pad) 80px; background: #171512; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.home-about-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.home-about .pill { background: rgba(255,255,255,.12); }
.home-about-mail { font-size: 11px; letter-spacing: .04em; opacity: .8; }
.home-about-mail:hover { opacity: 1; text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 720px) { .index-tagline { top: 64px; max-width: 260px; font-size: 13px; } .index-hint { display: none; } .home-about { padding: 96px var(--pad) 56px; } .home-about .about-hero { grid-template-columns: 1fr; gap: 32px; } }
@media (prefers-reduced-motion: reduce) { .index-hint-arrow { animation: none; } }
.index { position: relative; height: 100vh; height: 100dvh; min-height: 640px; overflow: hidden; display: flex; flex-direction: column; }
.backdrops { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.bd { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); will-change: opacity, transform; }
.bd.is-active { opacity: 1; z-index: 2; }
.bd.is-leaving { opacity: 1; z-index: 1; transition: none; }
.bd picture, .bd img, .bd .ph { width: 100%; height: 100%; object-fit: cover; }
.bd img { transform: scale(1.04); transition: transform 6s linear; }
.bd.is-active img { transform: scale(1); }
.bd-overlay { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(19,14,10,.3) 0%, rgba(19,14,10,.3) 45%, rgba(19,14,10,.62) 100%); }
.index-stage { position: relative; flex: 1; display: grid; min-height: 0; }
.index-stage > * { grid-area: 1 / 1; }
.index-text { position: relative; z-index: 3; pointer-events: none; align-self: end; padding: 0 var(--pad); display: flex; flex-direction: column; gap: 32px; transition: opacity .45s var(--ease), visibility 0s linear 0s; }
/* intro state: one sentence, portrait, small numbered ribbon; no project selected */
.index { transition: background-color .5s var(--ease), color .5s var(--ease); }
.index.is-intro { background: #e9eae8; color: #130e0a; }
.index.is-intro .bd { opacity: 0 !important; }
.index.is-intro:not(.bd-ready) .bd { display: none; } /* backdrops load once the cursor reaches the ribbon */
.index.is-intro .bd-overlay { opacity: 0; }
.bd-overlay { transition: opacity .5s var(--ease); }
.index.is-intro .index-text { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.intro { position: relative; align-self: end; padding: 0 var(--pad) 40px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.index.is-intro .intro { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s linear 0s; }
.intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.intro-statement { grid-column: 1 / span 6; margin: 0 0 30px; font-family: var(--f-sans); font-weight: 700; font-size: clamp(40px, 4.72vw, 68px); line-height: .92; letter-spacing: -.04em; text-transform: uppercase; }
.intro-portrait { grid-column: 7 / span 6; justify-self: end; margin: 0; display: flex; flex-direction: column; gap: 12px; max-width: 100%; }
.intro-portrait { --ph: clamp(300px, calc(100dvh - 380px), 520px); }
.intro-portrait picture, .intro-portrait .ph { display: block; height: var(--ph); width: calc(var(--ph) * 392 / 490); max-width: 100%; overflow: hidden; background: #d6d5d0; }
.intro-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.intro-portrait figcaption { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; opacity: .8; }
.intro-portrait figcaption a { text-decoration: underline; text-underline-offset: 3px; }
.strip-head { display: flex; justify-content: space-between; padding: 0 var(--pad); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .3s var(--ease), padding .5s var(--ease); }
.index.is-intro .strip-head { max-height: 64px; opacity: .7; padding-bottom: 46px; }
.tile-media { overflow: hidden; }
.tile-label { transition: transform .5s var(--ease), color .5s var(--ease); }
.index.is-intro .tiles { gap: 24px; padding: 0 var(--pad); }
.index.is-intro .tile { height: 76px; flex-grow: 1; box-shadow: none; background: #d6d5d0; overflow: visible; color: #171c1c; }
.index.is-intro .tile-label { position: absolute; left: 0; top: -22px; opacity: .7; font-size: 10px; }
.index.is-intro .tile-label-case { display: none; }
.index.is-intro .tile-media img { transform: none; filter: none; }
.tiles { transition: gap .5s var(--ease), padding .5s var(--ease); }
.teller, .index-hint { transition: opacity .3s var(--ease), max-height .5s var(--ease), padding .5s var(--ease); }
.index.is-intro .teller { max-height: 0; padding: 0 0 33px; opacity: 0; overflow: hidden; }
.index.is-intro .index-hint { opacity: 0; pointer-events: none; }
.index-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(56px, 6.7vw, 96px); line-height: .98; letter-spacing: -.02em; text-shadow: 0 2px 28px rgba(0,0,0,.35); transition: opacity .35s var(--ease), transform .5s var(--ease); }
.index-title.swap, .index-meta.swap { opacity: 0; transform: translateY(8px); }
.index-meta { transition: opacity .35s var(--ease), transform .5s var(--ease); }
[data-index-years]:empty + .sep { display: none; }
.sep { display: inline-block; width: 56px; }
.strip-wrap { position: relative; margin-top: 32px; }
.tiles { display: flex; align-items: flex-end; }
.tile { position: relative; flex: 1 1 0; height: 130px; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 12px 10px; background: #292421; color: #fff; overflow: hidden; transition: height .7s var(--ease), flex-grow .7s var(--ease), box-shadow .7s var(--ease); will-change: flex-grow, height; }
.tile-media img { transition: transform .9s var(--ease); }
.tile.is-active .tile-media img { transform: scale(1.04); }
.tile-media { position: absolute; inset: 0; }
.tile-media picture, .tile-media img, .tile-media .ph { width: 100%; height: 100%; object-fit: cover; }
.tile-label { position: relative; opacity: .6; font-size: 9px; }
.tile.is-active { flex-grow: 2.4; height: 310px; box-shadow: 0 24px 36px rgba(0,0,0,.4); z-index: 2; }
.tile:hover .tile-media img { filter: brightness(1.08); }
.teller { position: relative; display: flex; align-items: center; gap: 8px; width: min(547px, 70vw); margin: 0 auto; padding: 26px 0 28px; }
.teller-track { position: relative; flex: 1; height: 1px; background: rgba(255,255,255,.3); }
.teller-track i { position: absolute; top: -1px; height: 3px; background: #fff; transition: left .5s var(--ease); }
.index-mail { display: none; }
@media (max-width: 720px) {
  .index-text { gap: 14px; }
  .index-title { font-size: clamp(48px, 15vw, 64px); }
  .index-meta { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0 10px; }
  .sep { width: auto; }
  .sep::before { content: '/'; padding: 0 6px; opacity: .8; }
  .index-meta > span + span::before { content: '/'; padding-right: 10px; opacity: .8; }
  .strip-wrap { margin-top: 16px; }
  .tiles { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 calc(50vw - 55px); gap: 8px; align-items: center; height: 200px; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { flex: 0 0 100px; height: 80px; scroll-snap-align: center; transition: flex-basis .5s var(--ease), height .5s var(--ease); }
  .tile.is-active { flex-basis: 130px; height: 190px; }
  .tile-label { display: none; }
  .teller { padding: 18px 0 8px; width: calc(100% - 40px); }
  .index-mail { display: block; text-align: center; padding: 8px 0 24px; opacity: .8; }
  .intro { padding-bottom: 20px; }
  .intro-grid { grid-template-columns: 1fr; gap: 16px; }
  .intro-statement { grid-column: 1; margin-bottom: 8px; font-size: clamp(34px, 9.8vw, 44px); }
  .intro-portrait { grid-column: 1; }
  .intro-portrait { justify-self: stretch; }
  .intro-portrait { --ph: clamp(160px, 26dvh, 280px); }
  .index.is-intro .tiles { gap: 12px; padding: 22px var(--pad) 0; height: auto; }
  .index.is-intro .tile { flex: 0 0 96px; height: 60px; }
  .index.is-intro .tile-label { display: block; top: -18px; }
  .index.is-intro .strip-head { padding-bottom: 16px; }
  .index.is-intro .index-mail { display: none; }
}

/* ---------- about ---------- */
.about { padding: 220px var(--pad) 40px; display: flex; flex-direction: column; gap: 120px; color: #fff; }
.about-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 392px); gap: 64px; align-items: start; }
.about-copy { display: flex; flex-direction: column; gap: 30px; max-width: 820px; }
.about-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(48px, 6.7vw, 96px); line-height: 1; letter-spacing: -.02em; }
.about-quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; }
.about .lead { color: rgba(255,255,255,.9); max-width: 760px; }
.about-portrait { display: flex; flex-direction: column; gap: 10px; }
.about-portrait picture, .about-portrait .ph { aspect-ratio: 392/490; overflow: hidden; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-block { display: flex; flex-direction: column; gap: 30px; }
.about-method { font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 4.45vw, 64px); line-height: 1.1; letter-spacing: -.01em; }
.about-clients { font-size: 12px; line-height: 2; letter-spacing: .04em; opacity: .9; max-width: 1000px; }
.about-mail { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 6.1vw, 88px); letter-spacing: -.02em; line-height: 1.05; word-break: break-all; }
.about-mail:hover { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: .06em; }
.about-contact .cap { color: #b8ad9e; }
.page-about .site-foot { color: #b8ad9e; opacity: 1; border-color: rgba(255,255,255,.2); }
@media (max-width: 900px) { .about-hero { grid-template-columns: 1fr; } .about-portrait { max-width: 320px; } }
@media (max-width: 720px) { .about { padding-top: 140px; gap: 72px; } }