/* SDO Entertainment — site stylesheet (PHP edition) */

/* ---------- fonts (self-hosted, latin + latin-ext) ---------- */
/* instrument-serif-latin-ext-400-normal */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* instrument-serif-latin-400-normal */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* instrument-serif-latin-ext-400-italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* instrument-serif-latin-400-italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* manrope-latin-ext-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* manrope-latin-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   SDO Entertainment — design system
   Black #080808 · Warm white #F2EFE9 · Red #E31B23
   ========================================================================== */

/* Metric-matched fallbacks (measured) so the swap to web fonts causes no layout shift */
@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif');
  size-adjust: 83.8%;
  ascent-override: 118%;
  descent-override: 37%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 102.6%;
  ascent-override: 104.3%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* colour */
  --c-black: #080808;
  --c-ink-1: #0d0d0d;
  --c-ink-2: #131313;
  --c-ink-3: #1b1b1b;
  --c-white: #f2efe9;
  --c-muted: #a5a5a5;
  --c-dim: #8d8982;
  --c-red: #e31b23;
  --c-red-hover: #ff2a33;
  /* brand red lifted for small text on black (≥ 4.5:1 contrast) */
  --c-red-text: #f2333b;
  --c-line: rgb(242 239 233 / 0.12);
  --c-line-strong: rgb(242 239 233 / 0.26);

  /* type */
  --f-serif: 'Instrument Serif', 'Instrument Serif Fallback', serif;
  --f-sans: 'Manrope Variable', 'Manrope Fallback', ui-sans-serif, system-ui, sans-serif;

  --fs-display: clamp(3.6rem, 9.4vw, 10rem);
  --fs-h1: clamp(3rem, 7vw, 7.25rem);
  --fs-h2: clamp(2.5rem, 5vw, 5rem);
  --fs-h3: clamp(1.75rem, 2.6vw, 2.5rem);
  --fs-h4: clamp(1.35rem, 1.7vw, 1.65rem);
  --fs-lead: clamp(1.05rem, 1.2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.72rem;

  /* layout */
  --maxw: 1520px;
  --gutter: clamp(20px, 4.4vw, 72px);
  --section: clamp(96px, 12vw, 184px);
  --header-h: 84px;
  --radius: 2px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.9s;
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-black);
  scroll-padding-top: var(--header-h);
}
body {
  min-height: 100svh;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}
::selection {
  background: var(--c-red);
  color: var(--c-white);
}
:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 4px;
}

/* ---------- smooth scroll (Lenis) ---------- */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* ---------- typography ---------- */
.display,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.display {
  font-size: var(--fs-display);
  line-height: 0.9;
}
.h1 {
  font-size: var(--fs-h1);
  line-height: 0.95;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.05;
}
.h4 {
  font-size: var(--fs-h4);
  line-height: 1.15;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgb(242 239 233 / 0.78);
  text-wrap: pretty;
  max-width: 46ch;
}
.muted {
  color: var(--c-muted);
}
.red {
  color: var(--c-red-text);
}
.italic {
  font-style: italic;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-red-text);
}
.eyebrow::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}
.label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section);
  position: relative;
}
.section-head {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.section-head--split {
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
  }
}
.rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
}

/* ---------- buttons & links ---------- */
.btn {
  --bg: var(--c-red);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.6rem;
  background: var(--bg);
  color: var(--c-white);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: background 0.4s var(--ease-out);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-white);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-out);
}
.btn:hover,
.btn:focus-visible {
  color: var(--c-black);
}
.btn:hover::after,
.btn:focus-visible::after {
  transform: none;
}
.btn svg {
  transition: transform 0.5s var(--ease-out);
}
.btn:hover svg {
  transform: translateX(4px);
}
.btn--ghost {
  --bg: transparent;
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.6s var(--ease-out);
}
.link-arrow svg {
  color: var(--c-red);
  transition: transform 0.5s var(--ease-out);
}
.link-arrow:hover,
.link-arrow:focus-visible {
  background-size: 100% 1px;
}
.link-arrow:hover svg,
.link-arrow:focus-visible svg {
  transform: translateX(5px);
}

/* ---------- media treatment ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--c-ink-2);
}
.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.grade {
  filter: saturate(0.88) contrast(1.06) brightness(0.92);
}

/* ---------- reveal animations (enabled by html.js) ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.3s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
html.js [data-reveal='wipe'] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.3s var(--ease-in-out);
  transition-delay: var(--delay, 0ms);
}
html.js [data-reveal='media'] {
  opacity: 1;
  transform: none;
  clip-path: inset(12% 0 0 0);
  transition: clip-path 1.5s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
html.js [data-reveal='media'] img {
  transform: scale(1.12);
  transition: transform 2s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
html.js [data-reveal='media'].is-in img {
  transform: none;
}

/* ---------- utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--c-red);
  color: var(--c-white);
  font-size: var(--fs-small);
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus {
  transform: none;
}

/* film grain over everything */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -2%); }
  60% { transform: translate(-2%, -4%); }
  80% { transform: translate(4%, 2%); }
  100% { transform: translate(0, 0); }
}

/* long-form text */
.prose {
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: rgb(242 239 233 / 0.84);
  max-width: 64ch;
}
.prose > * + * {
  margin-top: 1.4em;
}
.prose h2,
.prose h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  color: var(--c-white);
  line-height: 1.1;
  margin-top: 2em;
}
.prose h2 {
  font-size: var(--fs-h3);
}
.prose h3 {
  font-size: var(--fs-h4);
}
.prose a {
  color: var(--c-white);
  text-decoration: underline;
  text-decoration-color: var(--c-red);
  text-underline-offset: 0.25em;
}
.prose a:hover {
  color: var(--c-red);
}
.prose blockquote {
  font-family: var(--f-serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--c-white);
  border-left: 2px solid var(--c-red);
  padding-left: 1.5rem;
}
.prose ul,
.prose ol {
  padding-left: 1.2em;
}
.prose li::marker {
  color: var(--c-red);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal],
  html.js [data-reveal] img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .grain {
    display: none;
  }
}


/* ==========================================================================
   Logo
   ========================================================================== */
.sdo-mark {
  width: 100%;
  height: auto;
  overflow: visible;
}
.sdo-mark--draw path,
.sdo-mark--draw circle {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: sdo-draw 2.2s var(--ease-in-out) 0.25s forwards;
}
.sdo-mark--draw circle {
  animation-delay: 0.85s;
}
@keyframes sdo-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sdo-mark--draw path,
  .sdo-mark--draw circle {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* ==========================================================================
   PosterCover
   ========================================================================== */
.poster {
  position: absolute;
  inset: 0;
  background: var(--c-ink-2);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}
.poster__glow {
  position: absolute;
  inset: -2%;
  z-index: -1;
  transition: transform 1.4s var(--ease-out);
}
.poster--curtain .poster__glow {
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(227 27 35 / 0.45), transparent 62%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.4) 0 2px, transparent 2px 22px, rgb(255 255 255 / 0.03) 22px 30px, transparent 30px 46px),
    linear-gradient(180deg, #2b0a0d, #0d0d0d 78%);
}
.poster--spot .poster__glow {
  background:
    conic-gradient(from 180deg at 50% -10%, transparent 166deg, rgb(255 244 228 / 0.22) 180deg, transparent 194deg),
    radial-gradient(70% 36% at 50% 100%, rgb(255 244 228 / 0.12), transparent 70%),
    #0c0c0c;
}
.poster--frame .poster__glow {
  background:
    radial-gradient(90% 60% at 100% 100%, rgb(227 27 35 / 0.32), transparent 60%),
    radial-gradient(60% 50% at 0% 0%, rgb(255 244 228 / 0.06), transparent 70%),
    #101010;
}
.poster--frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgb(242 239 233 / 0.14);
  pointer-events: none;
}
.poster__title {
  position: absolute;
  top: 6%;
  left: 6%;
  right: -20%;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(3rem, 22cqi, 12rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(242 239 233 / 0.32);
  text-wrap: balance;
  transition: transform 1.4s var(--ease-out);
}
a:hover .poster__title,
a:focus-visible .poster__title {
  transform: translateX(-3%);
}
a:hover .poster__glow {
  transform: scale(1.06);
}

/* ==========================================================================
   ProjectCard
   ========================================================================== */
.pcard {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-ink-2);
  min-height: 100%;
}
.pcard__media {
  aspect-ratio: 4 / 5;
  height: 100%;
}
.pcard--feature .pcard__media {
  aspect-ratio: auto;
  min-height: 100%;
}
.pcard__media img {
  position: absolute;
  inset: 0;
  transition:
    transform 1.4s var(--ease-out),
    filter 0.8s var(--ease-out);
}
.pcard:hover .pcard__media img,
.pcard:focus-visible .pcard__media img {
  transform: scale(1.05);
  filter: saturate(1) contrast(1.08) brightness(1);
}
.pcard__poster {
  position: absolute;
  inset: 0;
}
.pcard__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(8 8 8 / 0) 38%, rgb(8 8 8 / 0.55) 68%, rgb(8 8 8 / 0.92) 100%);
  pointer-events: none;
}
.pcard__body {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.4rem 1rem;
  padding: clamp(1.1rem, 2vw, 1.75rem);
}
.pcard__meta {
  grid-column: 1 / -1;
  color: var(--c-muted);
}
.pcard__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.1vw, 2.15rem);
  line-height: 1.02;
  text-wrap: balance;
}
.pcard--feature .pcard__title {
  font-size: clamp(2rem, 3.4vw, 3.5rem);
}
.pcard__cta {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  transition:
    background 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.pcard:hover .pcard__cta,
.pcard:focus-visible .pcard__cta {
  background: var(--c-red);
  border-color: var(--c-red);
  transform: rotate(45deg);
}
.pcard::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}
.pcard:hover::after,
.pcard:focus-visible::after {
  transform: scaleX(1);
}

/* ==========================================================================
   NewsCard
   ========================================================================== */
.ncard__link {
  display: grid;
  gap: 1.5rem;
  height: 100%;
}
.ncard__media {
  aspect-ratio: 16 / 10;
}
.ncard__media img {
  position: absolute;
  inset: 0;
  transition: transform 1.4s var(--ease-out);
}
.ncard__media--contain {
  background: #000;
}
.ncard__media--contain img {
  object-fit: contain;
  padding: 12% 16%;
}
.ncard__link:hover .ncard__media img {
  transform: scale(1.04);
}
.ncard__body {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}
.ncard__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.12;
  text-wrap: balance;
  transition: color 0.4s var(--ease-out);
}
.ncard__link:hover .ncard__title {
  color: #fff;
}
.ncard__excerpt {
  color: var(--c-muted);
  font-size: var(--fs-small);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ncard__more {
  justify-self: start;
  margin-top: 0.25rem;
}
.ncard__link:hover .ncard__more {
  background-size: 100% 1px;
}

/* ==========================================================================
   LangSwitch
   ========================================================================== */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
}
.lang span {
  color: var(--c-dim);
}
.lang a {
  position: relative;
  padding-block: 0.45rem;
  color: var(--c-muted);
  transition: color 0.3s var(--ease-out);
}
.lang a:hover {
  color: var(--c-white);
}
.lang a[aria-current] {
  color: var(--c-white);
}
.lang a[aria-current]::after {
  content: '';
  position: absolute;
  left: 0;
  right: -0.18em;
  bottom: 0;
  height: 1px;
  background: var(--c-red);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  transition:
    transform 0.6s var(--ease-out),
    background 0.5s var(--ease-out);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(8 8 8 / 0.72);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--c-line);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
html.is-scrolled .site-header::before {
  opacity: 1;
}
html.menu-open .site-header {
  transform: none;
}
.site-header__bar {
  position: relative;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}
.site-header__logo {
  display: block;
  width: 74px;
  padding-block: 0.5rem;
  transition: opacity 0.3s;
}
.site-header__logo:hover {
  opacity: 0.8;
}
.site-nav ul {
  display: flex;
  gap: clamp(1.25rem, 2.8vw, 2.75rem);
}
.site-nav a {
  position: relative;
  display: block;
  padding-block: 0.6rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(242 239 233 / 0.86);
  transition: color 0.3s var(--ease-out);
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0.2em;
  bottom: 0.2rem;
  height: 1px;
  background: var(--c-red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--c-white);
}
.site-nav a:hover::after,
.site-nav a[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}
.site-header__end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
}
 .menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-right: -10px;
}
.menu-toggle__bars {
  position: relative;
  width: 24px;
  height: 10px;
}
.menu-toggle__bars i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--c-white);
  transition:
    transform 0.5s var(--ease-out),
    top 0.5s var(--ease-out);
}
.menu-toggle__bars i:first-child {
  top: 0;
}
.menu-toggle__bars i:last-child {
  top: 8.5px;
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars i:first-child {
  top: 4.25px;
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars i:last-child {
  top: 4.25px;
  transform: rotate(-45deg);
}
 /* mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--c-black);
  padding-top: var(--header-h);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-in-out);
  overflow-y: auto;
}
html.menu-open .mobile-menu {
  clip-path: inset(0 0 0 0);
}
.mobile-menu__inner {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 2rem 2.5rem;
  gap: 3rem;
}
.mobile-menu__list {
  display: grid;
  gap: 0.4rem;
}
.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--f-serif);
  font-size: clamp(2.6rem, 11vw, 4.5rem);
  line-height: 1.05;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.8s var(--ease-out),
    color 0.3s;
  transition-delay: calc(0.2s + var(--i) * 0.06s);
}
.mobile-menu__list a[aria-current='page'],
.mobile-menu__list a:hover {
  color: var(--c-red);
}
html.menu-open .mobile-menu__list a {
  opacity: 1;
  transform: none;
}
.mobile-menu__num {
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  color: var(--c-red-text);
  transform: translateY(-1.2em);
}
.mobile-menu__foot {
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid var(--c-line);
  padding-top: 1.75rem;
}
.mobile-menu__mail {
  font-size: var(--fs-lead);
}
.mobile-menu__social {
  display: flex;
  gap: 1.25rem;
}
.mobile-menu__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
}
 @media (max-width: 1023px) {
  .site-header__bar {
    grid-template-columns: 1fr auto;
  }
  .site-nav {
    display: none;
  }
  .menu-toggle {
    display: grid;
  }
}
@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--c-line);
  padding-block: clamp(64px, 8vw, 112px) 2rem;
  background: var(--c-black);
  font-size: var(--fs-small);
}
.site-footer__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 2.5rem;
  padding-bottom: clamp(48px, 6vw, 80px);
}
.site-footer__logo {
  display: block;
  width: clamp(110px, 12vw, 168px);
}
.site-footer__tag {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1;
  color: rgb(242 239 233 / 0.9);
}
.site-footer__top-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding: 0.6rem 0;
  transition: color 0.3s;
}
.site-footer__top-btn:hover {
  color: var(--c-white);
}
.site-footer__top-btn svg {
  color: var(--c-red);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
  padding-block: 2.5rem;
  border-top: 1px solid var(--c-line);
}
.site-footer__h {
  color: var(--c-dim);
  margin-bottom: 1.1rem;
}
.site-footer ul {
  display: grid;
  gap: 0.6rem;
}
.site-footer a {
  color: rgb(242 239 233 / 0.82);
  transition: color 0.3s;
}
.site-footer a:hover {
  color: var(--c-red);
}
.site-footer address {
  font-style: normal;
  color: var(--c-muted);
  line-height: 1.6;
}
.site-footer address strong {
  color: var(--c-white);
  font-weight: 600;
}
.site-footer__offices {
  gap: 1.25rem !important;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-line);
  color: var(--c-dim);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
}
 @media (max-width: 899px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.5rem;
  }
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   PageHeader
   ========================================================================== */
.phead {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(64px, 10vw, 150px));
  padding-bottom: clamp(48px, 6vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
.phead__glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(227 27 35 / 0.14), transparent);
}
.phead__inner {
  display: grid;
  gap: 1.75rem;
  justify-items: start;
}
.phead__title {
  max-width: 16ch;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  overflow: hidden;
  border-top: 1px solid var(--c-line);
}
.contact__glow {
  position: absolute;
  top: -30%;
  right: -15%;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(closest-side, rgb(227 27 35 / 0.16), transparent);
  pointer-events: none;
}
.contact__head {
  display: grid;
  gap: 1.75rem;
  margin-bottom: clamp(56px, 7vw, 104px);
}
.contact__title {
  font-size: clamp(3rem, 8vw, 8.5rem);
  max-width: 14ch;
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(48px, 8vw, 140px);
  align-items: start;
}
.contact__info {
  display: grid;
  gap: 2.75rem;
}
.contact__email {
  display: grid;
  gap: 0.6rem;
}
.contact__email-addr {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 2.7vw, 2.6rem);
  line-height: 1.1;
  word-break: break-word;
  background: linear-gradient(var(--c-red), var(--c-red)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.7s var(--ease-out);
}
.contact__email-addr svg {
  flex: none;
  color: var(--c-red);
  transition: transform 0.5s var(--ease-out);
}
.contact__email:hover .contact__email-addr {
  background-size: 100% 1px;
}
.contact__email:hover .contact__email-addr svg {
  transform: translate(3px, -3px);
}
.contact__offices ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.contact__offices a {
  display: grid;
  gap: 0.35rem;
  font-size: var(--fs-small);
  line-height: 1.55;
}
.contact__city {
  font-family: var(--f-serif);
  font-size: var(--fs-h4);
  transition: color 0.3s;
}
.contact__offices a:hover .contact__city {
  color: var(--c-red);
}
.contact__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.contact__social a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  transition:
    background 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out);
}
.contact__social a:hover {
  background: var(--c-red);
  border-color: var(--c-red);
}
 /* form */
.cform {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  background: rgb(19 19 19 / 0.7);
  border: 1px solid var(--c-line);
}
.cform__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}
.field {
  display: grid;
  gap: 0.5rem;
}
.field__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line-strong);
  border-radius: 0;
  padding: 0.7rem 0;
  font-size: 1.05rem;
  color: var(--c-white);
  transition: border-color 0.3s;
}
.field textarea {
  resize: vertical;
  min-height: 7.5rem;
}
.field select {
  appearance: none;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23E31B23' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 0.2rem center / 12px 8px no-repeat;
  padding-right: 1.75rem;
}
.field select option {
  background: var(--c-ink-2);
  color: var(--c-white);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--c-red);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  box-shadow: 0 1px 0 0 var(--c-red);
}
.field .is-invalid {
  border-bottom-color: var(--c-red);
}
.cform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
  margin-top: 0.5rem;
}
.cform__status {
  font-size: var(--fs-small);
  color: var(--c-muted);
  max-width: 36ch;
}
 /* SDOLAB */
.lab {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 2rem 3rem;
  margin-top: clamp(72px, 9vw, 128px);
  padding-top: 2.5rem;
  border-top: 1px solid var(--c-line);
}
.lab__name h3 {
  letter-spacing: 0.02em;
}
.lab__text {
  color: var(--c-muted);
  max-width: 60ch;
}
.lab__links {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
.lab__mail {
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.lab__mail:hover {
  color: var(--c-white);
}
 @media (max-width: 960px) {
  .contact__grid {
    grid-template-columns: 1fr;
  }
  .lab {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .cform__row,
  .contact__offices ul {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-black);
}
.hero__parallax {
  position: absolute;
  inset: -6% 0 -6% 0;
  will-change: transform;
}
.hero__slide,
.hero__video {
  position: absolute;
  inset: 0 0 0 auto;
  width: 70%;
  height: 100%;
  object-fit: cover;
}
.hero__slide {
  opacity: 0;
  animation: hero-slide 28s linear infinite;
  animation-delay: calc(var(--i) * 7s);
}
@keyframes hero-slide {
  0% {
    opacity: 0;
    transform: scale(1.14);
  }
  4.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1.03);
  }
}
 /* volumetric stage light */
.hero__beams span {
  position: absolute;
  top: -25%;
  left: var(--x);
  width: 26vw;
  height: 150%;
  background: linear-gradient(180deg, rgb(255 241 222 / 0.3), rgb(255 241 222 / 0) 72%);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  filter: blur(16px);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  transform: rotate(var(--r));
  animation: hero-beam var(--t) var(--ease-in-out) infinite alternate;
  opacity: 0.65;
}
.hero__beams span:nth-child(1) {
  --x: 40%;
  --r: 16deg;
  --t: 13s;
}
.hero__beams span:nth-child(2) {
  --x: 60%;
  --r: -9deg;
  --t: 10s;
  opacity: 0.45;
}
.hero__beams span:nth-child(3) {
  --x: 78%;
  --r: 12deg;
  --t: 15s;
}
@keyframes hero-beam {
  to {
    transform: rotate(calc(var(--r) * -1));
  }
}
 .hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--c-black) 0%, rgb(8 8 8 / 0.94) 26%, rgb(8 8 8 / 0.45) 52%, rgb(8 8 8 / 0.12) 78%, rgb(8 8 8 / 0.5) 100%),
    linear-gradient(0deg, var(--c-black) 0%, rgb(8 8 8 / 0) 32%),
    linear-gradient(180deg, rgb(8 8 8 / 0.75) 0%, rgb(8 8 8 / 0) 22%);
}
 .hero__content {
  align-self: end;
  padding-block: clamp(40px, 8vh, 96px) clamp(32px, 6vh, 64px);
}
.hero__title {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  font-weight: 400;
}
.hero__mark {
  display: block;
  width: clamp(150px, 19vw, 300px);
  color: var(--c-white);
}
.hero__tagline {
  display: block;
  font-family: var(--f-serif);
  font-size: clamp(3.2rem, 7.8vw, 8.75rem);
  line-height: 0.92;
  letter-spacing: -0.018em;
}
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.hero__line > span {
  display: inline-block;
  transform: translateY(108%);
  animation: hero-line 1.3s var(--ease-out) forwards;
  animation-delay: calc(0.75s + var(--n) * 0.14s);
}
@keyframes hero-line {
  to {
    transform: none;
  }
}
.hero__lede {
  margin-top: clamp(1.5rem, 2.4vw, 2.25rem);
  max-width: 30ch;
  font-size: clamp(1.1rem, 1.45vw, 1.4rem);
  line-height: 1.45;
  color: rgb(242 239 233 / 0.86);
}
.hero__lede,
.hero__cta {
  opacity: 0;
  animation: hero-fade 1.2s var(--ease-out) forwards;
  animation-delay: 1.3s;
}
.hero__cta {
  margin-top: 2.25rem;
  animation-delay: 1.45s;
}
@keyframes hero-fade {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
 .hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem 2rem;
  color: var(--c-muted);
  border-top: 1px solid var(--c-line);
}
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.hero__scroll i {
  position: relative;
  width: 56px;
  height: 1px;
  background: var(--c-line-strong);
  overflow: hidden;
}
.hero__scroll i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-red);
  transform: translateX(-100%);
  animation: hero-scroll 2.4s var(--ease-in-out) infinite;
}
@keyframes hero-scroll {
  55% {
    transform: none;
  }
  100% {
    transform: translateX(100%);
  }
}
 @media (max-width: 899px) {
  .hero__slide,
  .hero__video {
    width: 100%;
  }
  .hero__shade {
    background:
      linear-gradient(0deg, var(--c-black) 8%, rgb(8 8 8 / 0.7) 48%, rgb(8 8 8 / 0.35) 72%, rgb(8 8 8 / 0.75) 100%);
  }
  .hero__beams span {
    width: 50vw;
  }
}
@media (max-width: 560px) {
  .hero__scroll {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide:first-child {
    opacity: 1;
  }
}

/* ==========================================================================
   Services
   ========================================================================== */
.services__titles {
  display: grid;
  gap: 1.5rem;
}
.services__body {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}
.services__stage {
  position: sticky;
  top: calc(var(--header-h) + 3vh);
}
.services__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--header-h) - 8vh);
  width: 100%;
  overflow: hidden;
  background: #000;
}
.services__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 0.9s var(--ease-out),
    transform 1.6s var(--ease-out);
}
.services__img.is-contain {
  object-fit: contain;
  padding: 18%;
}
.services__img.is-active {
  opacity: 1;
  transform: none;
}
.services__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(8 8 8 / 0.25), rgb(8 8 8 / 0) 30%, rgb(8 8 8 / 0) 60%, rgb(8 8 8 / 0.75));
  pointer-events: none;
}
.services__counter,
.services__caption {
  position: absolute;
  z-index: 1;
  color: var(--c-white);
}
.services__counter {
  top: 1.25rem;
  left: 1.25rem;
}
.services__counter span {
  color: var(--c-red-text);
}
.services__caption {
  left: 1.25rem;
  bottom: 1.25rem;
}
 .services__list {
  border-top: 1px solid var(--c-line);
}
.svc {
  display: grid;
  grid-template-columns: 2.5rem 3.25rem minmax(0, 1fr);
  gap: 0 1.25rem;
  align-items: start;
  padding-block: clamp(1.5rem, 2.4vw, 2.1rem);
  border-bottom: 1px solid var(--c-line);
  transition: opacity 0.6s var(--ease-out);
}
.svc__num {
  padding-top: 0.55rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-dim);
  transition: color 0.4s;
}
.svc__icon {
  color: var(--c-muted);
  padding-top: 0.15rem;
  transition: color 0.4s;
}
.svc__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.6rem);
  line-height: 1.05;
  transition: color 0.5s var(--ease-out);
}
.svc__title a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.svc__title a svg {
  color: var(--c-red);
  transition: transform 0.5s var(--ease-out);
}
.svc__title a:hover svg {
  transform: translate(3px, -3px);
}
.svc__text {
  margin-top: 0.75rem;
  max-width: 52ch;
  color: var(--c-muted);
  font-size: var(--fs-small);
  line-height: 1.7;
}
.svc.is-active .svc__num {
  color: var(--c-red-text);
}
.svc.is-active .svc__icon {
  color: var(--c-white);
}
 .services__cta {
  margin-top: clamp(40px, 5vw, 72px);
  display: flex;
  justify-content: flex-end;
}
 @media (min-width: 1024px) {
  /* spotlight: only titles dim, all text stays above WCAG AA */
  html.js .svc:not(.is-active):not(:hover) .svc__title {
    color: rgb(242 239 233 / 0.5);
  }
}
@media (max-width: 1023px) {
  .services__body {
    grid-template-columns: 1fr;
  }
  .services__stage {
    display: none;
  }
  .services__cta {
    justify-content: flex-start;
  }
}
@media (max-width: 520px) {
  .svc {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }
  .svc__num {
    display: none;
  }
}

/* ==========================================================================
   Showreel
   ========================================================================== */
.reel {
  position: relative;
  min-height: clamp(560px, 92svh, 980px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid var(--c-line);
}
.reel__strips {
  position: absolute;
  inset: -10% -10%;
  z-index: -2;
  display: grid;
  align-content: center;
  gap: 14px;
  transform: rotate(-5deg);
}
.reel__row {
  display: flex;
  width: max-content;
}
.reel__track {
  display: flex;
  gap: 14px;
  padding-right: 14px;
  animation: reel-scroll 70s linear infinite;
}
.reel__row--rev .reel__track {
  animation-direction: reverse;
  animation-duration: 80s;
}
@keyframes reel-scroll {
  to {
    transform: translateX(-100%);
  }
}
.reel__still {
  width: clamp(240px, 26vw, 400px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.1) brightness(0.55);
}
.reel__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 90% at 22% 50%, rgb(8 8 8 / 0.94), rgb(8 8 8 / 0.55) 60%, rgb(8 8 8 / 0.25)),
    linear-gradient(180deg, var(--c-black), transparent 22%, transparent 78%, var(--c-black));
}
.reel__content {
  display: grid;
  gap: 1.75rem;
  padding-block: var(--section);
}
.reel__title {
  max-width: 12ch;
}
.reel__play {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.75rem;
}
.reel__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgb(242 239 233 / 0.6);
  transition:
    background 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.reel__ring svg {
  transform: translateX(2px);
}
.reel__ring::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--c-red);
  animation: reel-pulse 2.8s var(--ease-out) infinite;
}
@keyframes reel-pulse {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}
.reel__play:hover .reel__ring,
.reel__play:focus-visible .reel__ring {
  background: var(--c-red);
  border-color: var(--c-red);
  transform: scale(1.06);
}
 .reel-modal {
  width: min(1280px, 92vw);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: #000;
  color: var(--c-white);
  overflow: visible;
}
.reel-modal::backdrop {
  background: rgb(8 8 8 / 0.92);
  backdrop-filter: blur(6px);
}
.reel-modal__frame {
  aspect-ratio: 16 / 9;
}
.reel-modal__frame iframe,
.reel-modal__frame video {
  width: 100%;
  height: 100%;
  border: 0;
}
.reel-modal__close {
  position: absolute;
  top: -56px;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.reel-modal__close:hover {
  color: var(--c-red);
}
@media (prefers-reduced-motion: reduce) {
  .reel__track {
    animation: none;
  }
}

/* ==========================================================================
   SelectedWork
   ========================================================================== */
.work__titles {
  display: grid;
  gap: 1.5rem;
}
.work__all {
  justify-self: end;
}
.work__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.work__grid > :first-child {
  grid-row: span 2;
}
 @media (max-width: 1099px) {
  .work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .work__grid > :first-child {
    grid-row: auto;
    grid-column: 1 / -1;
  }
  .work__grid > :first-child .pcard__media {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 699px) {
  .work__all {
    justify-self: start;
  }
  .work__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .work__grid::-webkit-scrollbar {
    display: none;
  }
  .work__grid > * {
    scroll-snap-align: start;
  }
  .work__grid > :first-child {
    grid-column: auto;
  }
  .work__grid > :first-child .pcard__media {
    aspect-ratio: 4 / 5;
  }
}

/* ==========================================================================
   TrustedBy
   ========================================================================== */
.clients {
  padding-block: clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--c-line);
}
.clients__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.clients__label {
  padding-right: clamp(24px, 3vw, 48px);
  border-right: 1px solid var(--c-line);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.clients__marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.clients__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(44px, 5vw, 84px);
  padding-right: clamp(44px, 5vw, 84px);
  animation: clients-marquee 75s linear infinite;
}
.clients__marquee:hover .clients__track {
  animation-play-state: paused;
}
@keyframes clients-marquee {
  to {
    transform: translateX(-100%);
  }
}
.clients__track li {
  flex: none;
  display: grid;
  place-items: center;
  height: 72px;
}
.clients__track img {
  max-width: none;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity 0.4s var(--ease-out);
}
.clients__track img:hover {
  opacity: 1;
}
 @media (max-width: 760px) {
  .clients__inner {
    grid-template-columns: 1fr;
  }
  .clients__label {
    border-right: 0;
    padding-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .clients__marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .clients__track {
    flex-wrap: wrap;
    flex: 1;
    animation: none;
    row-gap: 1.5rem;
  }
  .clients__track[aria-hidden] {
    display: none;
  }
}

/* ==========================================================================
   ElevenHub
   ========================================================================== */
.hub {
  position: relative;
  padding-block: var(--section);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--c-black), var(--c-ink-1) 50%, var(--c-black));
}
.hub--hero {
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 120px));
}
.hub__glow {
  position: absolute;
  left: -10%;
  top: 10%;
  width: 60vw;
  height: 60vw;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(255 107 87 / 0.14), transparent);
}
.hub__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 8vw, 140px);
  align-items: center;
}
.hub__content {
  display: grid;
  gap: 1.6rem;
  justify-items: start;
}
.hub__logo {
  width: clamp(180px, 18vw, 260px);
  height: auto;
  margin-bottom: 1rem;
}
.hub__title {
  max-width: 16ch;
}
.hub__alliance {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--c-white);
}
.hub__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-red);
  box-shadow: 0 0 0 4px rgb(227 27 35 / 0.2);
}
 /* vertical frames */
.hub__phones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  align-items: center;
}
.phone {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: clamp(14px, 1.6vw, 24px);
  border: 1px solid rgb(242 239 233 / 0.18);
  overflow: hidden;
  padding: clamp(10px, 1.2vw, 16px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(calc((var(--i) - 1) * -9%));
  animation: phone-float 7s var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--i) * -2.3s);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.9);
}
.phone:nth-child(1) {
  background:
    radial-gradient(120% 60% at 20% 110%, rgb(227 27 35 / 0.55), transparent 60%),
    linear-gradient(160deg, #1d1112, #0b0b0b);
}
.phone:nth-child(2) {
  background:
    radial-gradient(90% 50% at 80% -10%, rgb(255 107 87 / 0.5), transparent 65%),
    radial-gradient(70% 40% at 0% 100%, rgb(227 27 35 / 0.25), transparent 70%),
    #0c0c0c;
}
.phone:nth-child(3) {
  background:
    conic-gradient(from 200deg at 50% 40%, rgb(255 241 222 / 0.12), transparent 25%, transparent 75%, rgb(227 27 35 / 0.3)),
    #0e0e0e;
}
@keyframes phone-float {
  to {
    translate: 0 -14px;
  }
}
.phone__bars {
  display: flex;
  gap: 4px;
}
.phone__bars i {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgb(242 239 233 / 0.25);
  overflow: hidden;
  position: relative;
}
.phone__bars i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left;
  animation: phone-progress 9s linear infinite;
}
.phone__bars i:nth-child(1)::after {
  animation-delay: calc(var(--i) * -1.4s);
}
.phone__bars i:nth-child(2)::after {
  animation-delay: calc(3s + var(--i) * -1.4s);
}
.phone__bars i:nth-child(3)::after {
  animation-delay: calc(6s + var(--i) * -1.4s);
}
@keyframes phone-progress {
  0% {
    transform: scaleX(0);
  }
  33% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
}
.phone__format {
  position: absolute;
  top: clamp(22px, 2.4vw, 32px);
  right: clamp(10px, 1.2vw, 16px);
  color: rgb(242 239 233 / 0.55);
}
.phone__word {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.3vw, 2.2rem);
  line-height: 1;
  text-wrap: balance;
}
 @media (max-width: 900px) {
  .hub__grid {
    grid-template-columns: 1fr;
  }
  .hub__phones {
    order: 2;
    max-width: 520px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .phone__bars i::after {
    transform: scaleX(1);
  }
}

/* ==========================================================================
   AboutTeaser
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}
.about__visual {
  display: grid;
  gap: 1.75rem;
}
.about__media {
  aspect-ratio: 5 / 4;
}
.about__media img {
  position: absolute;
  inset: 0;
}
.about__leaders {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
}
.about__leaders li {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.about__leaders strong {
  display: block;
  font-weight: 600;
  font-size: var(--fs-small);
}
.about__leaders .muted {
  font-size: var(--fs-small);
}
.about__portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  filter: grayscale(1) contrast(1.05);
}
.about__content {
  display: grid;
  gap: 1.6rem;
  justify-items: start;
}
.about__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin-block: 0.75rem 0.5rem;
  border-top: 1px solid var(--c-line);
}
.about__facts > div {
  padding: 1.4rem 1.4rem 1.4rem 0;
  border-bottom: 1px solid var(--c-line);
}
.about__facts > div:nth-child(odd) {
  border-right: 1px solid var(--c-line);
}
.about__facts > div:nth-child(even) {
  padding-left: 1.4rem;
}
.about__facts dt {
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  line-height: 1.05;
}
.about__facts dd {
  margin-top: 0.4rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
  line-height: 1.5;
}
 @media (max-width: 960px) {
  .about__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .about__facts {
    grid-template-columns: 1fr;
  }
  .about__facts > div:nth-child(odd) {
    border-right: 0;
  }
  .about__facts > div:nth-child(even) {
    padding-left: 0;
  }
}

/* ==========================================================================
   NewsTeaser
   ========================================================================== */
.news {
  border-top: 1px solid var(--c-line);
}
.news__titles {
  display: grid;
  gap: 1.5rem;
}
.news__all {
  justify-self: end;
}
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
}
@media (max-width: 960px) {
  .news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .news__all {
    justify-self: start;
  }
  .news__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   WorkIndexView
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}
.filters button {
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition:
    color 0.3s,
    background 0.3s,
    border-color 0.3s;
}
.filters button:hover {
  color: var(--c-white);
  border-color: var(--c-white);
}
.filters button[aria-pressed='true'] {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-black);
}
.work-index {
  padding-bottom: var(--section);
}
.work-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.work-index__grid > [hidden] {
  display: none;
}
@media (max-width: 1023px) {
  .work-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 580px) {
  .work-index__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ProjectView
   ========================================================================== */
.project__hero {
  position: relative;
  min-height: clamp(560px, 86svh, 920px);
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: hidden;
}
.project__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.project__media img,
.project__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Covers sit on the right like the home hero, so small source stills
   are never stretched across a wide screen. */
.project__media.is-landscape img {
  left: auto;
  width: 68%;
}
.project__media.is-portrait img {
  left: auto;
  top: var(--header-h);
  height: calc(100% - var(--header-h));
  right: var(--gutter);
  width: min(40%, 620px);
  object-position: 50% 15% !important;
}
.project__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--c-black) 2%, rgb(8 8 8 / 0.6) 30%, rgb(8 8 8 / 0) 60%, rgb(8 8 8 / 0.55) 100%),
    linear-gradient(90deg, var(--c-black) 0%, rgb(8 8 8 / 0.92) 30%, rgb(8 8 8 / 0.25) 62%, rgb(8 8 8 / 0.1) 100%);
}
@media (max-width: 899px) {
  .project__media.is-landscape img,
  .project__media.is-portrait img {
    right: 0;
    width: 100%;
  }
  .project__shade {
    background: linear-gradient(0deg, var(--c-black) 6%, rgb(8 8 8 / 0.65) 50%, rgb(8 8 8 / 0.5) 100%);
  }
}
.project__head {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  padding-block: calc(var(--header-h) + 3rem) clamp(40px, 6vw, 80px);
}
.project__back {
  margin-bottom: 1rem;
}
.project__back svg {
  transform: none !important;
}
.project__title {
  max-width: 14ch;
}
 .project__body {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(40px, 7vw, 120px);
  padding-block: clamp(48px, 6vw, 96px) var(--section);
}
.project__facts {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  align-self: start;
}
.project__facts dl {
  border-top: 1px solid var(--c-line);
}
.project__facts dl > div {
  display: grid;
  gap: 0.35rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--c-line);
}
.project__facts dt {
  color: var(--c-dim);
}
.project__facts dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
}
.project__summary {
  font-family: var(--f-serif);
  font-size: var(--fs-h3);
  line-height: 1.15;
  margin-bottom: 2.5rem;
  text-wrap: pretty;
}
.project__gallery {
  display: grid;
  gap: 16px;
  margin-top: 3.5rem;
}
.project__next {
  padding-bottom: var(--section);
  display: grid;
  gap: 1.75rem;
}
.project__next-card {
  max-width: 560px;
}
 @media (max-width: 900px) {
  .project__body {
    grid-template-columns: 1fr;
  }
  .project__facts {
    position: static;
    order: 2;
  }
}

/* ==========================================================================
   NewsIndexView
   ========================================================================== */
.news-index {
  padding-bottom: var(--section);
}
.news-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 64px) clamp(28px, 3vw, 48px);
}
@media (max-width: 960px) {
  .news-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .news-index__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ArticleView
   ========================================================================== */
.article__head {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 120px));
  padding-bottom: clamp(40px, 5vw, 72px);
}
.article__head > * {
  max-width: 980px;
}
.article__meta {
  margin-top: 1.5rem;
}
.article__cover .media {
  aspect-ratio: 21 / 9;
}
.article__cover img {
  position: absolute;
  inset: 0;
}
.article__cover--contain {
  background: #000;
}
.article__cover--contain img {
  object-fit: contain !important;
  padding: 6% 20%;
}
.article__body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-block: clamp(48px, 6vw, 96px) var(--section);
}
.article__related {
  display: grid;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
}
.article__related-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.article__related-link svg {
  color: var(--c-red);
  flex: none;
  transition: transform 0.5s var(--ease-out);
}
.article__related-link:hover svg {
  transform: translate(3px, -3px);
}
@media (max-width: 900px) {
  .article__body {
    grid-template-columns: 1fr;
  }
  .article__cover .media {
    aspect-ratio: 16 / 10;
  }
}

/* ==========================================================================
   AboutView
   ========================================================================== */
.about-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
  padding-block: clamp(32px, 4vw, 64px) clamp(64px, 8vw, 120px);
}
.about-story__collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, minmax(0, 1fr));
  aspect-ratio: 1 / 1.05;
}
.about-story__img {
  position: relative;
}
.about-story__img img {
  position: absolute;
  inset: 0;
}
.about-story__img--0 {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
}
.about-story__img--1 {
  grid-column: 4 / 7;
  grid-row: 3 / 6;
  z-index: 1;
  box-shadow: 0 30px 60px -20px #000;
}
.about-story__img--2 {
  grid-column: 2 / 5;
  grid-row: 5 / 7;
  z-index: 2;
  box-shadow: 0 30px 60px -20px #000;
}
.about-story__text {
  display: grid;
  gap: 1.75rem;
}
.about-story__first {
  font-family: var(--f-serif);
  font-size: var(--fs-h3);
  line-height: 1.15;
  text-wrap: pretty;
}
.about-story__member {
  font-size: var(--fs-small);
  border-top: 1px solid var(--c-line);
  padding-top: 1.25rem;
}
 .about-facts dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--c-line);
}
.about-facts dl > div {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--c-line);
}
.about-facts dl > div:first-child {
  border-left: 0;
  padding-left: 0;
}
.about-facts dt {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1;
}
.about-facts dd {
  margin-top: 0.6rem;
  color: var(--c-muted);
  font-size: var(--fs-small);
}
 .about-divisions__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 6vw, 96px);
}
.about-divisions__list li {
  display: grid;
  gap: 1rem;
  padding-block: 2.25rem;
  border-top: 1px solid var(--c-line);
}
.about-divisions__num {
  color: var(--c-red-text);
}
.about-divisions__list p {
  color: var(--c-muted);
  max-width: 58ch;
}
 .about-people {
  padding-top: 0;
}
.leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 96px);
}
.leader {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.75rem;
  align-items: start;
}
.leader__photo {
  aspect-ratio: 4 / 5;
}
.leader__photo img {
  position: absolute;
  inset: 0;
  object-position: 50% 15%;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.8s var(--ease-out);
}
.leader:hover .leader__photo img {
  filter: none;
}
.leader__body {
  display: grid;
  gap: 0.9rem;
}
.leader__bio {
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.leader__bio li {
  padding-left: 1.1rem;
  position: relative;
}
.leader__bio li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5rem;
  height: 1px;
  background: var(--c-red);
}
.about-people__team {
  margin-top: clamp(72px, 9vw, 128px);
  margin-bottom: 2.5rem;
}
.team {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.team__photo {
  aspect-ratio: 1;
}
.team__photo img {
  position: absolute;
  inset: 0;
  object-position: 50% 15%;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.8s var(--ease-out);
}
.team__member:hover .team__photo img {
  filter: none;
}
.team__name {
  margin-top: 0.85rem;
  font-size: var(--fs-small);
}
 @media (max-width: 1023px) {
  .leaders {
    grid-template-columns: 1fr;
  }
  .team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .about-facts dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-facts dl > div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .about-facts dl > div:nth-child(n + 3) {
    border-top: 1px solid var(--c-line);
  }
}
@media (max-width: 900px) {
  .about-story {
    grid-template-columns: 1fr;
  }
  .about-divisions__list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .leader {
    grid-template-columns: 1fr;
  }
  .leader__photo {
    max-width: 320px;
  }
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-facts dl {
    grid-template-columns: 1fr;
  }
  .about-facts dl > div {
    border-left: 0 !important;
    padding-left: 0;
  }
  .about-facts dl > div + div {
    border-top: 1px solid var(--c-line);
  }
}

/* ==========================================================================
   ElevenHubView
   ========================================================================== */
.hub-page {
  border-top: 1px solid var(--c-line);
}
.hub-page__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  margin-bottom: clamp(72px, 9vw, 128px);
}
.hub-page__context {
  font-family: var(--f-serif);
  font-size: var(--fs-h2);
  line-height: 1;
  text-wrap: balance;
}
.hub-page__intro .lead {
  max-width: 52ch;
}
.hub-page__h {
  margin-bottom: 2rem;
}
.hub-page__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.hub-page__pillars li {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-line-strong);
}
.hub-page__pillars p {
  color: var(--c-muted);
}
.hub-page__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: clamp(64px, 8vw, 112px);
  padding-top: 2rem;
  border-top: 1px solid var(--c-line);
}
@media (max-width: 900px) {
  .hub-page__intro,
  .hub-page__pillars {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   404
   ========================================================================== */
.nf {
  min-height: 90svh;
  display: grid;
  align-content: center;
  gap: 1.5rem;
  padding-top: var(--header-h);
}
.nf__code {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(6rem, 22vw, 18rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-red);
}
.nf__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

/* ==========================================================================
   BaseLayout
   ========================================================================== */
main:focus {
  outline: none;
}

/* ==========================================================================
   Page transitions — native cross-document View Transitions.
   The opt-in (@view-transition) is declared inline in <head> (layout.php)
   so it is active from the first parse of every page.
   ========================================================================== */
::view-transition-old(root) {
  animation: 0.4s var(--ease-in-out) both vt-fade-out;
}
::view-transition-new(root) {
  animation: 0.55s var(--ease-out) 0.08s both vt-fade-in;
}
@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
}