/* =========================================================================
   ALTA-////VISIONARIES — site stylesheet
   Layout is flexbox only (maps to Elementor flex containers).
   Sections marked SHOWPIECE are custom; everything else = native widgets.
   ========================================================================= */

/* ---------- 1. Tokens (→ Elementor Site Settings: Global colours / fonts) */
:root {
  --c-black: #000000;
  --c-ink: #0a0a0a;
  --c-panel: #111111;
  --c-white: #f4f4f1;
  --c-grey: #9a9a95;
  --c-grey-2: #5e5e5a;
  --c-line: rgba(244, 244, 241, 0.14);
  --c-line-strong: rgba(244, 244, 241, 0.32);
  --c-red: #ff2a1f;

  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --fs-mega: clamp(3.4rem, 12.5vw, 13.5rem);
  --fs-xl: clamp(2.6rem, 7vw, 7.5rem);
  --fs-l: clamp(1.9rem, 3.6vw, 3.6rem);
  --fs-m: clamp(1.3rem, 2vw, 1.9rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.6875rem;

  --gutter: clamp(16px, 3.2vw, 48px);
  --gap: clamp(12px, 1.6vw, 24px);
  --section: clamp(88px, 12vw, 180px);
  --header-h: 68px;
  --max: 1680px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

/* ---------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--c-red); color: var(--c-black); }
:focus-visible { outline: 1px solid var(--c-red); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 14px;
  background: var(--c-white); color: var(--c-black); font-family: var(--f-mono);
  font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .14em;
  transform: translateY(-150%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* ---------- 3. Typography roles (→ Heading / Text widgets + global typography) */
.eyebrow, .mono {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--c-grey);
}
.eyebrow--white { color: var(--c-white); }
.display-mega, .display-xl, .display-l {
  font-family: var(--f-sans);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.86;
}
.display-mega { font-size: var(--fs-mega); letter-spacing: -0.05em; }
.display-xl { font-size: var(--fs-xl); }
.display-l { font-size: var(--fs-l); line-height: 0.95; letter-spacing: -0.025em; }
.lead { font-size: var(--fs-m); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }
.text { color: var(--c-grey); max-width: 60ch; }
.text p + p { margin-top: 1em; }
.text strong { color: var(--c-white); font-weight: 500; }
.slashes { color: var(--c-grey-2); letter-spacing: -0.05em; }

/* ---------- 4. Layout primitives (→ flex containers) */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.55); }
.section--line { border-top: 1px solid var(--c-line); }
.section--tight-bottom { padding-bottom: clamp(26px, 3vw, 52px); }
.row { display: flex; gap: var(--gap); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { align-items: flex-end; }
.col-4 { flex: 0 1 calc(33.333% - var(--gap)); }
.col-5 { flex: 0 1 calc(41.666% - var(--gap)); }
.col-6 { flex: 0 1 calc(50% - var(--gap) / 2); }
.col-7 { flex: 0 1 calc(58.333% - var(--gap)); }
.col-8 { flex: 0 1 calc(66.666% - var(--gap)); }

/* Section head: /01 — Label ———— link */
.section-head {
  display: flex; align-items: baseline; gap: 18px;
  padding-bottom: 18px; margin-bottom: clamp(32px, 5vw, 72px);
  border-bottom: 1px solid var(--c-line);
}
.section-head__index { color: var(--c-white); }
.section-head__label { flex: 1 1 auto; }
.section-head__link { transition: color .25s; }
.section-head__link:hover { color: var(--c-red); }

/* ---------- 5. Buttons & links (→ Button widget) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px; padding: 0 26px;
  font-family: var(--f-mono); font-size: var(--fs-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-black); background: var(--c-white);
  border: 1px solid var(--c-white);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.btn:hover { background: var(--c-red); border-color: var(--c-red); color: var(--c-black); }
.btn--ghost { background: transparent; color: var(--c-white); border-color: var(--c-line-strong); }
.btn--ghost:hover { background: transparent; color: var(--c-red); border-color: var(--c-red); }
.btn__arrow { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.link-line {
  display: inline-flex; gap: 10px; align-items: center;
  border-bottom: 1px solid var(--c-line-strong); padding-bottom: 4px;
  transition: color .25s, border-color .25s;
}
.link-line:hover { color: var(--c-red); border-color: var(--c-red); }
.dot-red { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-red); }

/* ---------- 6. Header (→ Elementor Pro Header template) */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  transition: transform .45s var(--ease), background-color .3s;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-solid { background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header__inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header__logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.site-header__logo img { height: 20px; width: auto; }
.site-header__logo-word { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .2em; color: var(--c-grey); }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 44px); margin-left: auto; }
.site-header__inner > .sound-toggle { margin-left: clamp(8px, 2vw, 32px); }
.mobile-menu .sound-toggle { align-self: flex-start; }
.site-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-white); padding-block: 8px; transition: color .25s;
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--c-red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-nav__link:hover { color: var(--c-white); }
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Sound switch (global) */
.sound-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 2px;
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-grey); transition: color .25s;
}
.sound-toggle:hover { color: var(--c-white); }
.sound-toggle__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound-toggle__bars i { display: block; width: 2px; height: 3px; background: currentColor; transition: height .2s; }
.sound-toggle[aria-pressed="true"] { color: var(--c-white); }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i { background: var(--c-red); animation: eq 0.9s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(2) { animation-delay: -.3s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(3) { animation-delay: -.6s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 2px; } to { height: 12px; } }
.sound-toggle__state-on { display: none; }
.sound-toggle[aria-pressed="true"] .sound-toggle__state-on { display: inline; }
.sound-toggle[aria-pressed="true"] .sound-toggle__state-off { display: none; }

.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.menu-toggle span { display: block; width: 22px; height: 1px; background: var(--c-white); transition: transform .35s var(--ease); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile menu (→ Elementor Pro Popup / Off-canvas) */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--c-black);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__link {
  display: flex; align-items: baseline; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: clamp(2.2rem, 10vw, 4rem); font-weight: 600; text-transform: uppercase; letter-spacing: -.04em; line-height: 1;
}
.mobile-menu__link .eyebrow { transform: translateY(-0.9em); }
.mobile-menu__link[aria-current="page"] { color: var(--c-red); }
.mobile-menu__foot { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-header__inner > .sound-toggle { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .site-header__logo-word { display: none; }
}

/* ---------- 7. SHOWPIECE A — Hero "Signal" */
.hero-signal {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: var(--c-black); isolation: isolate;
}
.hero-signal__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .55; z-index: -2; transform: scale(1.04);
}
.hero-signal__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-signal__content {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(22px, 3vw, 36px); padding: calc(var(--header-h) + 40px) var(--gutter) 120px;
}
.hero-signal__logo { width: clamp(150px, 17vw, 250px); }
.hero-headline {
  font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 500; text-transform: uppercase;
  letter-spacing: .32em; line-height: 1.5; max-width: 40ch; margin-right: -.32em;
}
.hero-headline .word { display: inline-block; white-space: nowrap; }
.hero-headline .char { display: inline-block; }
.hero-signal__sub { color: rgba(244, 244, 241, .78); max-width: 56ch; font-size: var(--fs-small); letter-spacing: .02em; }
.hero-signal__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-signal__listen[aria-pressed="true"] { background: var(--c-red); border-color: var(--c-red); }
.hero-signal__readout {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 20px var(--gutter);
}
.hero-signal__status { display: inline-flex; align-items: center; gap: 8px; }
.hero-signal__status .dot-red { opacity: .25; transition: opacity .3s; }
.hero-signal.is-live .hero-signal__status .dot-red { opacity: 1; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.hero-signal__scroll { display: inline-flex; align-items: center; gap: 10px; }

/* Split-text entrance (behaviour added by signal.js, content stays in markup) */
.js .hero-signal [data-reveal-hero] { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .hero-signal.is-ready [data-reveal-hero] { opacity: 1; transform: none; }
.js .hero-signal.is-ready [data-reveal-hero="2"] { transition-delay: .25s; }
.js .hero-signal.is-ready [data-reveal-hero="3"] { transition-delay: .45s; }
.js .hero-signal.is-ready [data-reveal-hero="4"] { transition-delay: .65s; }

/* ---------- 8. Manifesto (→ container w/ background image + heading + text) */
.manifesto { position: relative; overflow: hidden; }
.manifesto__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.manifesto__inner { position: relative; display: flex; flex-direction: column; gap: clamp(40px, 6vw, 96px); }
.manifesto__text {
  font-size: clamp(1.8rem, 3.7vw, 4rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 500;
  text-transform: uppercase; max-width: 27ch;
}
.manifesto__text .muted { color: rgba(244, 244, 241, .5); }
.manifesto__facts { display: flex; flex-wrap: wrap; gap: var(--gap); border-top: 1px solid var(--c-line); }
.fact { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; padding-top: 20px; }
.fact__value { font-size: var(--fs-l); font-weight: 600; letter-spacing: -.04em; line-height: 1; }

/* ---------- 9. Pillars (→ 2 containers with background image + link) */
.pillars { display: flex; min-height: 92vh; border-top: 1px solid var(--c-line); }
.pillar {
  position: relative; flex: 1 1 50%; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(28px, 4vw, 64px) var(--gutter); overflow: hidden; isolation: isolate;
  border-right: 1px solid var(--c-line);
}
.pillar:last-child { border-right: 0; }
.pillar__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  opacity: .5; filter: grayscale(1); transform: scale(1.02);
  transition: opacity .8s var(--ease), transform 1.4s var(--ease), filter .8s;
}
.pillar:hover .pillar__image { opacity: .8; filter: grayscale(0); transform: scale(1.06); }
.pillar__top { display: flex; justify-content: space-between; gap: 16px; }
.pillar__index { transition: color .3s; }
.pillar:hover .pillar__index { color: var(--c-red); }
.pillar__body { display: flex; flex-direction: column; gap: 22px; }
.pillar__title { font-size: clamp(2.4rem, 4.7vw, 6rem); }
@media (max-width: 767px) { .pillar__title { font-size: clamp(2.4rem, 11vw, 4.5rem); } }
.pillar__text { color: var(--c-white); max-width: 44ch; opacity: .82; }
.pillar__list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex; padding: 6px 10px; border: 1px solid var(--c-line-strong);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-white);
}
.pillar__cta { display: inline-flex; align-items: center; gap: 12px; }
.pillar__cta .btn__arrow { transition: transform .35s var(--ease); }
.pillar:hover .pillar__cta .btn__arrow { transform: translateX(6px); color: var(--c-red); }

/* ---------- 10. Work cards (→ Loop Grid item: image + heading + text) */
.work-grid { display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 80px) var(--gap); }
.work-card { display: flex; flex-direction: column; gap: 16px; }
.work-card--wide { flex: 0 1 calc(58.333% - var(--gap) / 2); }
.work-card--narrow { flex: 0 1 calc(41.666% - var(--gap) / 2); }
.work-card--half { flex: 0 1 calc(50% - var(--gap) / 2); }
.work-card--narrow { margin-top: clamp(0px, 8vw, 140px); }
.work-card__media { position: relative; overflow: hidden; background: var(--c-panel); aspect-ratio: 16 / 10; }
.work-card--narrow .work-card__media { aspect-ratio: 4 / 5; }
/* Selected works are shown in black and white, whatever the source */
.work-card__media img {
  width: 100%; height: 100%; object-fit: cover; opacity: .92;
  filter: grayscale(1) contrast(1.04);
  transition: transform 1.2s var(--ease), opacity .6s;
}
.work-card:hover .work-card__media img { transform: scale(1.035); opacity: 1; }
.work-card__meta { display: flex; justify-content: space-between; gap: 16px; }
.work-card__title { font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; text-transform: uppercase; transition: color .25s; }
.work-card:hover .work-card__title { color: var(--c-red); }

/* ---------- 11. Disciplines — a stack of full-width rows, each with its own
   image behind it (→ one flex Container per row, background image + overlay,
   hover set in the container's Style tab; Heading + Heading + Text inside) */
.dstack { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.dline { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--c-line); }
.dline__media { position: absolute; inset: 0; z-index: -2; display: block; overflow: hidden; }
.dline__image {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  opacity: 1; filter: grayscale(1) contrast(1.12) brightness(.5);
  transform: scale(1.06); transition: transform 1.4s var(--ease), filter .7s var(--ease);
}
/* the scrim: the image is always read through black, so the text never fights it */
.dline::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.56) 46%, rgba(0,0,0,.44) 100%);
  transition: opacity .7s var(--ease);
}
.dline:hover .dline__image, .dline:focus-within .dline__image { filter: grayscale(1) contrast(1.08) brightness(.82); transform: scale(1); }
.dline:hover::before, .dline:focus-within::before { opacity: .82; }
.dline__inner {
  display: flex; align-items: baseline; gap: var(--gap);
  padding-block: clamp(38px, 5.6vw, 88px);
}
.dline__index { flex: 0 0 clamp(48px, 5vw, 92px); color: var(--c-white); }
.dline__title {
  flex: 0 0 32%; font-size: clamp(1.25rem, 2.3vw, 2.25rem); font-weight: 600; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.02em;
  transition: transform .55s var(--ease), color .25s;
}
.dline:hover .dline__title { transform: translateX(12px); }
.dline__text { flex: 1 1 auto; max-width: 56ch; color: #c6c6c1; font-size: var(--fs-small); transition: color .35s; }
.dline:hover .dline__text { color: var(--c-white); }
/* a hairline that opens to the right edge: the technical tell that the row is live */
.dline__keyline { flex: 0 0 clamp(26px, 5vw, 90px); align-self: center; height: 1px; background: var(--c-line-strong); transform: scaleX(.3); transform-origin: left; transition: transform .55s var(--ease), background .25s; }
.dline:hover .dline__keyline { transform: scaleX(1); background: var(--c-red); }

/* ---------- 12. Clients wall (→ Heading widgets in a wrapping flex container) */
.clients-wall { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35em; row-gap: .1em; }
.clients-wall__name {
  font-size: clamp(2rem, 5.6vw, 5.8rem); font-weight: 600; letter-spacing: -.045em; line-height: 1;
  text-transform: uppercase; color: var(--c-white); transition: color .25s;
}
.clients-wall__name:hover { color: var(--c-red); }
.clients-wall__sep { font-size: clamp(2rem, 5.6vw, 5.8rem); line-height: 1; color: var(--c-grey-2); font-weight: 300; }

/* ---------- 13. CTA band (→ container w/ background image + heading + buttons) */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-top: 1px solid var(--c-line); padding-block: clamp(96px, 13vw, 190px);
}
.cta-band__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  opacity: .5; filter: grayscale(1) contrast(1.06) brightness(.72); transform: scale(1.04);
}
/* the room falls away towards the edges, so the type sits in its own light */
.cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(135% 100% at 18% 42%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.92) 100%);
}
.cta-band__inner { display: flex; flex-direction: column; gap: clamp(36px, 4.6vw, 72px); }
.cta-band__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--c-line);
}
.cta-band__coords { color: var(--c-grey-2); }
.cta-band__title { max-width: none; }
.cta-band__actions {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); align-items: center; justify-content: space-between;
  padding-top: clamp(24px, 3.2vw, 44px); border-top: 1px solid var(--c-line);
}
/* the address sits at the weight of the button opposite it, with a rule that draws itself */
.cta-band__mail {
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .08em; line-height: 1.4;
  padding: 9px 0 8px; background-image: linear-gradient(var(--c-red), var(--c-red));
  background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%;
  border-bottom: 1px solid var(--c-line-strong);
  transition: background-size .55s var(--ease), color .3s;
}
.cta-band__mail:hover { background-size: 100% 1px; color: var(--c-red); }
.cta-band__mail-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; }
.cta-band__copied { position: absolute; top: calc(100% + 10px); left: 0; white-space: nowrap; color: var(--c-red); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s var(--ease); }
.cta-band__actions.is-copied .cta-band__copied { opacity: 1; transform: none; }
.cta-band__btn { flex: 0 0 auto; }

/* ---------- 14. Footer (→ Elementor Pro Footer template) */
.site-footer { border-top: 1px solid var(--c-line); padding-top: clamp(64px, 8vw, 120px); padding-bottom: 28px; }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 22px; flex: 1 1 280px; }
.site-footer__brand img { width: 180px; display: block; }
.site-footer__home { display: inline-block; width: fit-content; opacity: 1; transition: opacity .25s, transform .4s var(--ease); }
.site-footer__home:hover, .site-footer__home:focus-visible { opacity: .72; transform: translateY(-3px); }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 96px); }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
.site-footer__col a { transition: color .25s; width: fit-content; }
.site-footer__col a:hover { color: var(--c-red); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: clamp(64px, 8vw, 120px); padding-top: 20px; border-top: 1px solid var(--c-line);
}
.site-footer__bottom a:hover { color: var(--c-white); }

/* ---------- 15. Page hero (list / studio / contact pages) */
.page-hero { position: relative; padding-top: calc(var(--header-h) + clamp(64px, 11vw, 170px)); padding-bottom: clamp(48px, 6vw, 90px); overflow: hidden; isolation: isolate; }
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; z-index: -1; }
/* ---------- Studio head: the portrait, then the title under it.
   A photograph behind a title cannot survive a band whose height is set by its
   text — as the screen widens the window onto the picture gets shorter and
   eventually cuts the faces, and the title lands on whoever stands behind it.
   So the picture is given the whole band and the type follows underneath.
   The published file carries ~400px of manufactured headroom that continues the
   backdrop and fades to black (see BUILD-NOTES → Studio portrait).
   The band's height is `max(72vh, 33vw)`: the vh term keeps it in proportion on a
   normal screen, the vw term stops it going flat on an ultrawide one.
   → Elementor: an Image widget at full width with these two gradients as
   Background Overlays, then Heading + Text under it. */
.studio-head { position: relative; isolation: isolate; }

.studio-portrait {
  position: relative;
  width: 100%;
  height: max(72vh, 33vw);
  overflow: hidden;
  background: var(--c-black);
}
.studio-portrait__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;   /* how much of the manufactured headroom shows */
  filter: grayscale(1) contrast(1.05);
  opacity: .92;
}
/* no hard edges: it comes out of the black under the header and sinks back into
   it where the title begins */
.studio-portrait::before,
.studio-portrait::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.studio-portrait::before {
  top: 0;
  height: clamp(96px, 14vh, 190px);
  background: linear-gradient(to bottom, var(--c-black), rgba(0, 0, 0, 0));
}
.studio-portrait::after {
  bottom: 0;
  height: clamp(90px, 14vh, 180px);
  background: linear-gradient(to top, var(--c-black), rgba(0, 0, 0, 0));
}

.studio-head__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 18px);
  padding-top: clamp(18px, 2.4vw, 36px);
  padding-bottom: clamp(44px, 6vw, 96px);
}
.studio-head__place { color: var(--c-grey); }

@media (max-width: 767px) {
  .studio-portrait { height: max(48vh, 62vw); }
}

.page-hero__inner { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 44px); }
.page-hero__top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-hero__top--end { justify-content: flex-end; }
.page-hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.page-hero__lead { max-width: 40ch; }

/* ---------- 16. SHOWPIECE B — "Console" project index */
.console { position: relative; }
.console__bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  padding-block: 16px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.console__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.console__filter {
  padding: 8px 12px; border: 1px solid var(--c-line);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-grey);
  transition: color .2s, border-color .2s;
}
.console__filter:hover { color: var(--c-white); border-color: var(--c-line-strong); }
.console__filter[aria-pressed="true"] { color: var(--c-white); border-color: var(--c-red); }
.console__hint { display: inline-flex; align-items: center; gap: 10px; }
.console__head, .console-row__link {
  display: flex; align-items: center; gap: var(--gap);
}
.console__head { padding-block: 14px; border-bottom: 1px solid var(--c-line); }
.console__bar, .console__head { position: relative; z-index: 3; background: var(--c-black); }
.console__list { position: relative; z-index: 2; }
.console-row { position: relative; border-bottom: 1px solid var(--c-line); transition: opacity .35s var(--ease); }
.console-row[hidden] { display: none; }
.console-row__link { padding-block: clamp(16px, 2vw, 28px); padding-right: 120px; }
.c-index { flex: 0 0 48px; }
.c-title { flex: 1 1 34%; min-width: 0; }
.c-project { flex: 1 1 22%; }
.c-discipline { flex: 1 1 20%; }
.c-meter { flex: 0 0 48px; }
.console-row__title {
  font-size: clamp(1.7rem, 3.6vw, 3.6rem); font-weight: 600; letter-spacing: -.04em; line-height: .95;
  text-transform: uppercase; transition: color .25s, transform .5s var(--ease);
}
.console-row__project { font-size: var(--fs-small); color: var(--c-white); }
.console-row__meter { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.console-row__meter i { display: block; width: 4px; height: 2px; background: var(--c-grey-2); transition: height .08s linear, background .2s; }
.console-row__meter i.is-peak { background: var(--c-red); }
.console-row__preview {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--c-line); font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-grey); transition: color .2s, border-color .2s; z-index: 3;
}
.console-row__preview:hover, .console-row__preview[aria-pressed="true"] { color: var(--c-white); border-color: var(--c-red); }
.console-row__preview-icon { width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.console-row__preview[aria-pressed="true"] .console-row__preview-icon { width: 6px; height: 8px; border: 0; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
/* Full-screen image stage: each row's own media is pinned behind the list */
.console-row__media {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease);
}
.console-row__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--ease); }
.console-row__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.console.has-active .console-row { opacity: .28; }
.console.has-active .console-row.is-active { opacity: 1; }
.console-row.is-active .console-row__media { opacity: 1; }
.console-row.is-active .console-row__media img { transform: scale(1); }
.console-row.is-active .console-row__title { transform: translateX(12px); }
.console-row.is-active .c-index { color: var(--c-red); }
.console__empty { padding: 40px 0; }

@media (max-width: 900px) {
  .console__head { display: none; }
  .console-row__link { flex-wrap: wrap; gap: 6px 14px; padding-right: 0; padding-top: 16px; padding-bottom: 20px; }
  .c-index { flex: 0 0 auto; order: 1; }
  .c-discipline { flex: 1 1 auto; order: 2; }
  .c-title { flex: 1 1 100%; order: 5; }
  .c-project { flex: 1 1 100%; order: 6; }
  .c-meter { display: none; }
  .console-row__media { position: relative; inset: auto; z-index: 0; opacity: 1; order: -1; flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; margin-top: 24px; overflow: hidden; }
  .console-row__preview { align-self: flex-start; }
  .console-row__media::after { display: none; }
  .console-row__media img { transform: none; }
  .console.has-active .console-row { opacity: 1; }
  .console-row.is-active .console-row__title { transform: none; }
  .console-row__preview { position: static; transform: none; margin: 0 0 20px; }
  .console-row { display: flex; flex-direction: column; }
}

/* ---------- 17. Project page */
.project-hero { position: relative; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.project-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.project-hero__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); z-index: -1; }
.project-hero__inner { display: flex; flex-direction: column; gap: 18px; padding-bottom: clamp(32px, 5vw, 64px); }
.project-hero__title { font-size: clamp(3rem, 11vw, 12rem); }
.project-hero__subtitle { font-size: var(--fs-m); letter-spacing: -.01em; }
.project-hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

.project-meta { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--c-line); }
.project-meta__item { flex: 1 1 180px; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px 0; }
.project-meta__value { font-size: var(--fs-small); color: var(--c-white); }
/* Prev / index / next, in the space the meta row leaves (→ three Icon-List links) */
.project-nav {
  flex: 0 0 auto; margin-left: auto; flex-direction: row; align-items: flex-end;
  gap: clamp(16px, 2vw, 30px); padding-right: 0;
}
.project-nav__link { display: inline-flex; align-items: baseline; gap: 8px; color: var(--c-grey); transition: color .25s; }
.project-nav__link:hover, .project-nav__link:focus-visible { color: var(--c-white); }
.project-nav__arrow { display: inline-block; font-size: var(--fs-small); line-height: 1; transition: transform .3s var(--ease); }
.project-nav__link:hover .project-nav__arrow { color: var(--c-red); }
.project-nav__link[rel="next"]:hover .project-nav__arrow { transform: translateX(4px); }
.project-nav__link[rel="prev"]:hover .project-nav__arrow { transform: translateX(-4px); }
.project-nav__link:not([rel]):hover .project-nav__arrow { transform: translateY(-4px); }

.project-intro { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 120px); justify-content: space-between; }
.project-intro__statement { flex: 1 1 420px; font-size: var(--fs-l); font-weight: 500; letter-spacing: -.03em; line-height: 1.02; text-transform: uppercase; }
.project-intro__body { flex: 1 1 360px; display: flex; flex-direction: column; gap: 40px; }
.credits { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.credits__row { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.credits__value { font-size: var(--fs-small); text-align: right; }

/* ---------- 18. SHOWPIECE C — "Takeover" player */
.av-player {
  display: flex; flex-direction: column; gap: 20px;
  padding: clamp(20px, 3vw, 40px); border: 1px solid var(--c-line); background: var(--c-ink);
}
.av-player__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.av-player__title { font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -.03em; text-transform: uppercase; line-height: 1; }
.av-players { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 30px); }
.av-player__body { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.av-player__toggle {
  flex: 0 0 auto; width: clamp(56px, 6vw, 76px); height: clamp(56px, 6vw, 76px); border-radius: 50%;
  border: 1px solid var(--c-white); display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s;
}
.av-player__toggle:hover { border-color: var(--c-red); }
.av-player__icon { width: 0; height: 0; border-left: 14px solid var(--c-white); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.av-player.is-playing .av-player__toggle { background: var(--c-red); border-color: var(--c-red); }
.av-player.is-playing .av-player__icon { width: 14px; height: 18px; border: 0; border-left: 4px solid var(--c-black); border-right: 4px solid var(--c-black); margin-left: 0; }
.av-player__wave { position: relative; flex: 1 1 auto; height: clamp(72px, 9vw, 120px); cursor: pointer; touch-action: none; }
.av-player__canvas { width: 100%; height: 100%; }
.av-player__time { flex: 0 0 auto; display: flex; gap: 6px; font-variant-numeric: tabular-nums; }
.av-player__time .av-player__current { color: var(--c-white); }
@media (max-width: 640px) {
  .av-player__body { flex-wrap: wrap; }
  .av-player__wave { flex: 1 1 100%; order: 3; }
}

/* Video block (Palimpsest teasers → Video widget) */
/* Embedded film: our own still until it is played, then the iframe takes its
   place — nothing is loaded from YouTube before that click
   (→ Elementor: Video widget, YouTube, "Lazy load" + custom image overlay) */
.film { display: flex; flex-direction: column; gap: 14px; }
.film__frame {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--c-panel);
  aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; isolation: isolate;
}
/* standby is black and white; the film itself plays in colour */
.film__poster {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: opacity .5s var(--ease), transform 1.2s var(--ease), filter .6s var(--ease);
}
.film__frame:hover .film__poster, .film__frame:focus-visible .film__poster { opacity: .72; transform: scale(1.02); }
.film__play {
  position: absolute; top: 50%; left: 50%; width: clamp(56px, 6vw, 84px); height: clamp(56px, 6vw, 84px);
  transform: translate(-50%, -50%); border: 1px solid var(--c-white); border-radius: 50%;
  transition: background .25s, border-color .25s;
}
.film__play::before {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-left: 16px solid var(--c-white); border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  transition: border-left-color .25s;
}
.film__frame:hover .film__play, .film__frame:focus-visible .film__play { background: var(--c-red); border-color: var(--c-red); }
.film__frame:hover .film__play::before { border-left-color: var(--c-black); }
.film__hint { position: absolute; left: clamp(14px, 2vw, 24px); bottom: clamp(12px, 1.6vw, 20px); color: var(--c-white); }
.film__caption { color: var(--c-grey); }
.film__embed { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: var(--c-black); }
.video-row { display: flex; flex-wrap: wrap; gap: var(--gap); }
.video-block { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; }
.video-block video { width: 100%; aspect-ratio: 16 / 9; background: var(--c-panel); object-fit: cover; }

/* ---------- 19. Gallery (→ Gallery widget, lightbox off) */
/* One block per edition: a full-width image, two under it (→ one flex
   Container per block: Image, then a row of two Images) */
.gallery { display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 56px); }
.gallery-group { display: flex; flex-wrap: wrap; gap: var(--gap); }
.gallery-group__label { flex: 1 1 100%; color: var(--c-grey-2); margin-bottom: -4px; }
/* The gallery is for looking at, not for opening: no link, no zoom cursor. */
.gallery__item { flex: 1 1 calc(50% - var(--gap)); min-width: 260px; overflow: hidden; background: var(--c-panel); }
.gallery__item--full { flex-basis: 100%; }
.gallery__item--half { flex-basis: calc(50% - var(--gap) / 2); }
.gallery__item--third { flex-basis: calc(33.333% - var(--gap)); }
.gallery__item img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery__item--full img { aspect-ratio: 21 / 9; }
.gallery__item--portrait img { aspect-ratio: 4 / 5; }

/* ---------- 20. Next project */
.next-project { position: relative; display: flex; min-height: 70vh; align-items: center; overflow: hidden; isolation: isolate; border-top: 1px solid var(--c-line); }
.next-project__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; z-index: -1; filter: grayscale(1); transition: opacity .8s var(--ease), filter .8s, transform 1.4s var(--ease); }
.next-project:hover .next-project__image { opacity: .7; filter: grayscale(0); transform: scale(1.03); }
.next-project__inner { display: flex; flex-direction: column; gap: 18px; }
.next-project__title { transition: color .3s; }
.next-project:hover .next-project__title { color: var(--c-red); }

/* ---------- 21. Studio page */
.process { display: flex; flex-wrap: wrap; border-top: 1px solid var(--c-line); }
.process__step { flex: 1 1 240px; display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 36px 0; border-bottom: 1px solid var(--c-line); }
.process__num { font-size: var(--fs-xl); font-weight: 300; letter-spacing: -.06em; line-height: .8; color: var(--c-grey-2); transition: color .3s; }
.process__step:hover .process__num { color: var(--c-red); }
.process__title { font-size: 1.25rem; font-weight: 600; text-transform: uppercase; }
.split { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 120px); justify-content: space-between; align-items: flex-start; }
.split__side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 24px; }
.split__main { flex: 2 1 480px; display: flex; flex-direction: column; gap: 28px; }
/* The three partners: one block each, in the order they stand in the portrait
   (→ three flex Containers: Heading, Heading, Text, Text) */
.partners { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 72px); margin-top: clamp(52px, 6vw, 96px); padding-top: clamp(30px, 3.4vw, 50px); border-top: 1px solid var(--c-line); }
.partner { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.partner__index { color: var(--c-grey-2); }
.partner__name { font-size: clamp(1.15rem, 1.6vw, 1.6rem); font-weight: 600; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; margin-top: 4px; margin-bottom: 8px; }
.partner__text { max-width: none; }
.image-band { display: flex; gap: var(--gap); }
.image-band__item { flex: 1 1 0; overflow: hidden; }
.image-band__item img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.image-band__item--wide { flex-grow: 2; }
.image-band--single .image-band__item img { aspect-ratio: 21 / 9; }
/* the Studio intro is set as a block of uppercase lines (measured in FIT) */
.studio-intro { text-transform: uppercase; font-weight: 500; }
.studio-intro .fit-block__line { letter-spacing: -.025em; line-height: 1.12; }
@media (max-width: 767px) {
  .image-band { flex-direction: column; }
  /* Stacking turns flex-basis:0 into a HEIGHT of 0, and the image's height:100%
     then resolves against nothing — the whole band renders invisible. Hand the
     height back to the aspect ratio. */
  .image-band__item { flex: 0 0 auto; }
  .image-band__item img { height: auto; }
}

/* ---------- 22. Contact (→ Elementor Pro Form + Accordion) */
.contact-section { position: relative; overflow: hidden; isolation: isolate; }
.contact-section__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; z-index: -1; }
.contact-layout { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 120px); align-items: flex-start; }
.contact-layout__form { flex: 3 1 520px; }
.contact-layout__aside { flex: 2 1 300px; display: flex; flex-direction: column; gap: 36px; }
.form { display: flex; flex-wrap: wrap; gap: 22px var(--gap); padding: clamp(20px, 3vw, 40px); background: rgba(0, 0, 0, .78); border: 1px solid var(--c-line); }
.form__field { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
.form__field--half { flex: 1 1 calc(50% - var(--gap)); min-width: 220px; }
.form__label { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-white); }
.form__label .req { color: var(--c-red); }
.form__input, .form__select, .form__textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 0;
  background: transparent; color: var(--c-white); border: 1px solid var(--c-line-strong);
  font-family: var(--f-sans); font-size: 1rem; transition: border-color .2s;
  -webkit-appearance: none; appearance: none;
}
.form__select { background-image: none; cursor: pointer; }
.form__select option { background: var(--c-black); }
.form__textarea { min-height: 180px; resize: vertical; }
.form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--c-white); }
.form__input[aria-invalid="true"], .form__textarea[aria-invalid="true"] { border-color: var(--c-red); }
.form__check { flex: 1 1 100%; display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); color: var(--c-grey); }
.form__check input { margin-top: 3px; accent-color: var(--c-red); width: 16px; height: 16px; }
.form__check a { text-decoration: underline; text-underline-offset: 3px; }
.form__foot { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__note { max-width: 46ch; }
.form__status { flex: 1 1 100%; min-height: 1.6em; color: var(--c-white); }
/* Honeypot. Taken out of the layout entirely rather than display:none, which
   some bots look for and skip. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status.is-error { color: var(--c-red); }
.contact-line { display: flex; flex-direction: column; gap: 8px; }
.contact-line__value { font-size: var(--fs-m); letter-spacing: -.01em; transition: color .25s; width: fit-content; }
a.contact-line__value:hover { color: var(--c-red); }

.accordion { border-top: 1px solid var(--c-line); }
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__title {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 500; text-transform: uppercase; letter-spacing: -.01em;
}
.accordion__title::-webkit-details-marker { display: none; }
.accordion__title::after { content: "+"; font-family: var(--f-mono); font-weight: 400; color: var(--c-grey); transition: transform .3s var(--ease), color .2s; }
.accordion__item[open] .accordion__title::after { transform: rotate(45deg); color: var(--c-red); }
.accordion__title:hover { color: var(--c-white); }
.accordion__content { padding: 0 0 28px; max-width: 70ch; }

/* ---------- 23. Legal / 404 */
/* Legal: one narrow column centred on the page, the type kept quiet
   (→ a flex Container with a max width and Align: center) */
.legal-page { max-width: 760px; margin-inline: auto; width: 100%; }
.legal-hero {
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 128px));
  padding-bottom: clamp(30px, 4vw, 56px);
}
.legal-hero__inner { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 34px); text-align: center; }
.legal-hero__title { font-size: var(--fs-l); }
.legal { display: flex; flex-direction: column; gap: clamp(42px, 5vw, 70px); }
.legal__block { display: flex; flex-direction: column; gap: 18px; }
.legal__block + .legal__block { border-top: 1px solid var(--c-line); padding-top: clamp(42px, 5vw, 70px); }
.legal__block h2 { font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.legal__ids { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); margin-top: 8px; }
.legal__ids div { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.legal__ids div span:last-child, .legal__ids div a { font-size: var(--fs-small); }
.not-found { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; isolation: isolate; }

/* ---------- 24. Reveal on scroll (→ Elementor Motion Effects: Fade In Up) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 25. Responsive */
@media (max-width: 1024px) {
  .work-card--wide, .work-card--narrow, .work-card--half { flex-basis: 100%; }
  .work-card--narrow { margin-top: 0; }
  .work-card--narrow .work-card__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  :root { --header-h: 60px; }
  .pillars { flex-direction: column; min-height: 0; }
  .pillar { min-height: 78vh; border-right: 0; border-bottom: 1px solid var(--c-line); }
  .col-4, .col-5, .col-6, .col-7, .col-8 { flex-basis: 100%; }
  .row { flex-wrap: wrap; }
  .gallery__item, .gallery__item--third { flex-basis: 100%; }
  .gallery__item--full img { aspect-ratio: 3 / 2; }
  .hero-signal__readout .hide-sm { display: none; }
  .project-meta__item { flex-basis: 50%; }
  .project-nav { flex-basis: 100%; margin-left: 0; justify-content: space-between; padding-top: 4px; }
  .credits__row { flex-direction: column; gap: 4px; }
  .credits__value { text-align: left; }
  .cta-band__mail { word-break: break-all; }
  .cta-band__actions { gap: 22px; }
  .cta-band__btn { width: 100%; }
}

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

/* ---------- 26. Modifiers */
.display-mega[data-long="true"] { font-size: clamp(2.6rem, 8.4vw, 9rem); }
.lead--narrow { max-width: 36ch; }
.section-head--flush { margin-bottom: 0; }
.console__head { padding-right: 120px; }
@media (max-width: 900px) { .console__head { padding-right: 0; } }
@media (max-width: 767px) {
  .display-mega { font-size: clamp(2.2rem, 10.4vw, 5rem); }
  .display-mega[data-long="true"] { font-size: clamp(2rem, 8.2vw, 4rem); }
}

/* ---------- 27. Page background (Home) — fills the viewport, travels top→bottom with scroll
   (→ Elementor: page background image, Motion Effects › Scrolling Effects › Vertical) */
.page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--c-black); }
.page-bg__image {
  position: absolute; left: 50%; top: 0; max-width: none; height: auto;
  width: max(100vw, calc(100vh * 1559 / 2912));
  transform: translate3d(-50%, 0, 0); will-change: transform;
}
.page-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.hero-signal--transparent { background: transparent; }
.page-bg ~ .pillars, .page-bg ~ .cta-band { background: var(--c-black); }
/* …except the plain band, which has no image of its own: it runs on the page
   background and sinks to black, so the page closes without an edge */
.page-bg ~ .cta-band--plain {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 42%, var(--c-black) 100%);
}
.cta-band--plain::before { background: none; }
main:has(.cta-band--plain) ~ .site-footer { background: var(--c-black); }

/* sections that sit ON the background instead of letting it through */
.section--solid { background: var(--c-black); }
/* black under the header, dissolving into the background by the first line —
   no hard edge across the page (→ Elementor: container background gradient) */
.page-hero--dissolve {
  background: linear-gradient(to bottom,
    var(--c-black) 0,
    var(--c-black) calc(var(--header-h) + 8px),
    rgba(0, 0, 0, 0) calc(var(--header-h) + 190px));
}

/* Hero statement (their wording, set as three structural lines) */
.hero-signal__sub--statement {
  color: var(--c-white); max-width: none; text-transform: uppercase; font-weight: 500;
  font-size: clamp(.78rem, 1.05vw, 1.02rem); letter-spacing: .04em; line-height: 1.5;
}
.hero-signal__line { display: block; }
@media (max-width: 767px) { .hero-signal__line { display: inline; } }

/* Manifesto as a justified typographic block (→ Heading widget, alignment: Justified) */
.manifesto__text {
  max-width: none; width: 100%;
  font-size: clamp(1.7rem, 4.6vw, 5.4rem); line-height: .98; letter-spacing: -.03em;
  text-align: justify; text-align-last: justify; hyphens: none; -webkit-hyphens: none;
}
@media (max-width: 767px) { .manifesto__text { text-align: left; text-align-last: left; } }
/* Hero statement: single line */
.hero-signal__sub--statement { font-size: clamp(.9rem, 1.35vw, 1.3rem); letter-spacing: .08em; }
.nowrap { white-space: nowrap; }

/* Manifesto block: fixed, balanced lines, each justified edge to edge
   (→ one Heading widget per line, alignment Justified) */
.manifesto__text--block { text-align: left; text-align-last: auto; font-size: min(3.64vw, 3.84rem); line-height: 1.02; }
.manifesto__line { display: block; white-space: nowrap; text-align: justify; text-align-last: justify; }
@media (max-width: 767px) {
  .manifesto__text--block { font-size: clamp(1.6rem, 7.4vw, 2.4rem); }
  .manifesto__line { display: inline; white-space: normal; text-align: left; text-align-last: auto; }
}

/* Hero statement in the technical mono, width matched to the headline by signal.js */
.hero-signal__sub--statement {
  font-family: var(--f-mono); font-weight: 400; color: var(--c-white);
  font-size: clamp(.68rem, .78vw, .8rem); letter-spacing: .18em; line-height: 1.6;
}
.hero-headline { margin-bottom: -6px; }

/* Background distortion (bg-distort.js): WebGL copy of .page-bg__image */
.page-bg__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.page-bg.is-gl .page-bg__image { visibility: hidden; }

/* =========================================================================
   28. TEXT AS BLOCKS — every text keeps a rectangular shape
   ========================================================================= */

/* A. Fitted blocks: each line justified edge to edge, font size = column ÷ widest line.
      --fit (em width of the widest line) is written by the build from measurements.
      (→ Elementor: one Heading per line, alignment Justified, font size in vw/cqi) */
.fit-block { container-type: inline-size; display: block; max-width: none; width: 100%; }
.fit-block__line {
  display: block; white-space: nowrap;
  text-align: justify; text-align-last: justify;
  font-size: calc(100cqi / var(--fit)); line-height: .98;
}
/* per-line fit: each line carries its own measurement, so nothing is stretched */
.fit-block--per-line .fit-block__line { font-size: calc(100cqi / var(--l)); }
.lead.fit-block .fit-block__line { line-height: 1.22; }
@media (max-width: 767px) {
  .fit-block:not(.fit-block--always) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .fit-block:not(.fit-block--always) .fit-block__line { display: inline; white-space: normal; font-size: inherit; text-align: inherit; text-align-last: auto; }
}

/* B. Justified running text (→ Text Editor widget, alignment Justified)
   Hyphenation is on so justification does not open rivers in a narrow column,
   but short words are never broken: a word must be at least 9 letters long and
   keep 4 either side of the break. Without this, justification was splitting
   words like "spa-ces" and "vi-sions". */
.text, .text p, .lead, .pillar__text, .dline__text, .form__note, .form__check,
.accordion__content, .legal .text p, .contact-line .text {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  text-wrap: pretty;
}
.legal .text { max-width: none; }
.legal .text p { font-size: var(--fs-small); line-height: 1.8; }

/* C. Section-specific block shapes */
.cta-band__title { max-width: none; }
.project-intro__statement { margin-bottom: clamp(40px, 6vw, 96px); font-weight: 500; letter-spacing: -.03em; text-transform: uppercase; }
.project-intro { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 120px); justify-content: space-between; align-items: flex-start; }
.project-intro__text { flex: 1 1 440px; max-width: 62ch; }
.project-intro__credits { flex: 0 1 460px; }
@media (max-width: 767px) { .project-intro__statement { font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1; } }

/* Disciplines: the row keeps its block shape down to the phone */
@media (max-width: 900px) {
  .dline__inner { flex-wrap: wrap; row-gap: 10px; }
  .dline__index { flex: 0 0 100%; }
  .dline__title { flex: 0 0 100%; }
  .dline__text { flex: 1 1 100%; max-width: none; }
  .dline__keyline { display: none; }
}

/* Clients: one justified block, names kept whole (→ Text Editor, justified) */
.clients-wall { display: block; text-align: justify; text-align-last: justify; line-height: 1.02; }
.clients-wall__name, .clients-wall__sep { display: inline; }

/* Page hero leads: fixed-measure justified blocks */
.page-hero__lead { max-width: 34ch; }
.page-hero__foot .link-line.lead { text-align: left; }
/* letter-spacing must be declared on the lines so it scales with their own size */
.project-intro__statement .fit-block__line { letter-spacing: -.03em; }
.display-xl.fit-block .fit-block__line, .display-mega.fit-block .fit-block__line { letter-spacing: -.035em; }
.lead.fit-block .fit-block__line { letter-spacing: -.01em; }

/* Clients as a fitted two-line block */
.clients-wall.fit-block .fit-block__line { font-weight: 600; text-transform: uppercase; letter-spacing: -.045em; line-height: 1.02; }
.clients-wall.fit-block .clients-wall__name, .clients-wall.fit-block .clients-wall__sep { font-size: inherit; line-height: inherit; }
@media (max-width: 767px) { .clients-wall.fit-block { font-size: clamp(1.9rem, 9vw, 3rem); text-align-last: justify; } }

/* Project text: one paragraph at a narrower measure → always a multi-line block */
.project-intro__text { max-width: 52ch; }

/* ===========================================================================
   GRAIN — commissions only
   A single 256 px noise tile, overlaid on the pictures of the commissions
   pillar (index rows, project hero, gallery, film stills) so the photography
   reads as one material. It is a layer, never baked into the file: the
   downloaded image stays clean.
   Elementor: a Container with this class and the same ::after, or a CSS-class
   control on the Image widget.
   =========================================================================== */
:root { --grain-size: 256px; --grain-strength: .32; }

.is-grained .gallery__item::after,
.project-hero.is-grained .project-hero__shade::after,
.film.is-grained .film__frame::after,
.console-row.is-grained .console-row__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url(../img/bg/grain.png);
  background-size: var(--grain-size) var(--grain-size);
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: var(--grain-strength);
}
.is-grained .gallery__item { position: relative; }
.film.is-grained .film__frame::after { z-index: 0; }
.console-row.is-grained .console-row__media::before { z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* nothing animates: the grain is static, so it costs one decoded tile */
}

/* A self-hosted film sits in the same frame as an embedded one, but keeps its
   own shape — the EXP LAB pieces are vertical. */
.film__frame--local { aspect-ratio: auto; cursor: default; display: block; background: var(--c-black); }
.film__video { display: block; width: 100%; height: auto; background: var(--c-black); }
.film--portrait .film__frame--local { max-width: 440px; margin-inline: auto; }
.film--portrait .film__caption { text-align: center; }

/* The index rows preview on hover with a mouse and on tap without one, so the
   hint has to say the right thing. Both are in the markup; CSS shows one. */
.hint--touch { display: none; }
@media (hover: none) {
  .hint--pointer { display: none; }
  .hint--touch   { display: inline; }
}

/* ---------- Studio image bands
   Two frames stacked at the full column width, then three small ones beneath.
   The trio takes the same gap as the partner bios directly above it
   (clamp(28px, 4vw, 72px)), so the three plates land on the same three columns
   — outer two flush with the big frames' edges, the third centred between. */
.studio-band + .studio-band { margin-top: var(--gap); }
.studio-band .image-band__item img { aspect-ratio: 16 / 9; }

.studio-band--trio { gap: clamp(28px, 4vw, 72px); }
.studio-band--trio .image-band__item { flex: 1 1 0; }
/* The small ones keep their own upright proportion — at a third of the column
   they are already far smaller than the frames above, so nothing is cropped. */
.studio-band--trio .image-band__item img { aspect-ratio: 9 / 10; }

@media (max-width: 767px) {
  /* Stacked on a phone the trio would be three narrow slivers side by side.
     flex:1 1 0 above is more specific than the generic mobile reset, so it has
     to be undone here too — otherwise the row collapses to zero height. */
  .studio-band--trio { gap: var(--gap); }
  .studio-band--trio .image-band__item { flex: 0 0 auto; }
  .studio-band--trio .image-band__item img { aspect-ratio: 4 / 5; }
}