/* React/Sites integration layer for the supplied reference package. */
html[data-theme="light"], html[data-theme="light"] body { min-height: 100%; }
.home-stats { padding-top: clamp(48px, 8vh, 96px); }
.home-more { margin-top: 48px; }
.home-cta-copy { margin: 26px auto 0; text-align: center; }
.home-capabilities {
  padding-block: clamp(120px, 17vh, 220px);
}
.home-capabilities .home-capabilities__head {
  grid-template-columns: minmax(210px, .68fr) minmax(0, 1.42fr);
  gap: clamp(60px, 8vw, 150px);
  align-items: start;
  padding-bottom: 0;
}
.home-capabilities__head .label {
  padding-top: 12px;
}
.home-capabilities__head .h-section {
  max-width: 19ch;
  font-size: clamp(42px, 4.7vw, 76px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.home-capabilities__head .h-section span {
  display: block;
}
.home-capabilities__body {
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1fr);
  gap: clamp(72px, 9vw, 170px);
  margin-top: clamp(96px, 14vh, 170px);
}
.home-capabilities__copy {
  max-width: 42ch;
  margin: 0;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.72;
}
.home-capabilities__copy p {
  margin: 0;
}
.home-capabilities__copy p + p {
  margin-top: 22px;
}
.home-capabilities__list > div {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  padding: 28px 0;
}
.home-capabilities__list > div:first-child {
  padding-top: 0;
}
.home-capabilities__list dt {
  padding-top: 3px;
}
.home-capabilities__list dd {
  font-size: clamp(14px, 1.08vw, 17px);
  line-height: 1.7;
}
@media (max-width: 860px) {
  .home-capabilities { padding-block: 100px; }
  .home-capabilities .home-capabilities__head { grid-template-columns: 1fr; gap: 30px; }
  .home-capabilities__head .label { padding-top: 0; }
  .home-capabilities__head .h-section { max-width: 17ch; }
  .home-capabilities__body { grid-template-columns: 1fr; gap: 54px; margin-top: 76px; }
  .home-capabilities__copy { max-width: 52ch; }
}
@media (max-width: 560px) {
  .home-capabilities { padding-block: 78px; }
  .home-capabilities__head .h-section { font-size: clamp(34px, 10.2vw, 48px); }
  .home-capabilities__body { margin-top: 58px; }
  .home-capabilities__list > div { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
}
.page-hero { padding-top: 150px; }
.page-hero .h-display { margin-top: 18px; }
.page-hero .lede { margin-top: 24px; }
.works-section { padding-top: clamp(48px, 7vh, 90px); }
.works-index-section, .section-tight { padding-top: 0; }
.about-think { margin-top: 18px; }
.about-paragraph { margin-top: 18px; }
.concept-lede { max-width: 72ch; }
.pillars-space { margin-top: 44px; }
.inline-link { border-bottom: 1px solid var(--line-strong); }
.about-mail { margin-top: 26px; }
.crew-section__intro {
  max-width: 44ch;
  margin: 28px 0 0;
  color: var(--text-dim);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.7;
}
.crew-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.crew-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(32,32,37,.1);
  border-radius: 34px;
  background: rgba(255,255,255,.44);
  box-shadow: 0 22px 52px -40px rgba(34,25,46,.3), inset 0 1px 0 rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  transition: transform .45s var(--spring), box-shadow .45s var(--spring);
}
.crew-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 62px -40px rgba(34,25,46,.38), inset 0 1px 0 rgba(255,255,255,.96);
}
.crew-card__portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(32,32,37,.1);
  border-radius: 25px;
  background:
    linear-gradient(rgba(32,32,37,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,32,37,.035) 1px, transparent 1px),
    rgba(250,249,247,.84);
  background-size: 42px 42px;
}
.crew-card__portrait img {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  padding: clamp(20px, 2vw, 34px) clamp(10px, 1vw, 18px) 0;
  object-fit: contain;
  object-position: center bottom;
  filter: contrast(1.04);
}
.crew-card__index {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(32,32,37,.12);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(249,220,232,.78), rgba(219,209,249,.78));
  color: #28262d;
  font: 10px/1 "JetBrains Mono", monospace;
  box-shadow: 0 8px 22px -14px rgba(93,67,130,.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.crew-card__body { display: flex; flex: 1; flex-direction: column; padding: 24px 16px 20px; }
.crew-card__body h3 {
  margin: 0;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1;
}
.crew-card__role {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.crew-card__experience {
  width: fit-content;
  margin: 15px 0 0;
  padding: 7px 10px;
  border: 1px solid rgba(32,32,37,.12);
  border-radius: 999px;
  color: var(--text-faint);
  font: 10px/1 "JetBrains Mono", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.crew-card__bio {
  margin: 20px 0 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.72;
}
.crew-card__portfolio {
  width: fit-content;
  margin-top: auto;
  padding-top: 28px;
  border-bottom: 1px solid rgba(32,32,37,.24);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: border-color .25s ease, transform .25s ease;
}
.crew-card__portfolio span { display: inline-block; margin-left: 5px; transition: transform .25s ease; }
.crew-card__portfolio:hover { border-color: var(--text); transform: translateY(-1px); }
.crew-card__portfolio:hover span { transform: translate(3px, -3px); }
@media (max-width: 860px) {
  .crew-grid { grid-template-columns: 1fr; }
  .crew-card { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1fr); align-items: stretch; }
  .crew-card__portrait { aspect-ratio: 4 / 5; }
  .crew-card__body { align-self: center; padding: 28px; }
}
@media (max-width: 560px) {
  .crew-card { display: block; }
  .crew-card__portrait { aspect-ratio: 1 / 1; }
  .crew-card__body { padding: 22px 14px 18px; }
}
.cinema-progress { animation: cinemaProgress 5.2s linear both; }
@keyframes cinemaProgress { from { width: 0; } to { width: 100%; } }

.project-wrap { padding-top: 96px; }
.crumb-current { color: var(--text-dim); }
.player { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #0a0b0d; }
.player iframe, .player video { width: 100%; height: 100%; border: 0; display: block; }
.project-section-title { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 20px; }
.project-assets { margin-top: 22px; }
.project-assets figure { margin: 0; }
.project-assets .gal__img { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-elev); }
.project-assets .gal__img img { width: 100%; height: 100%; object-fit: cover; }
.project-assets figcaption { margin-top: 9px; color: var(--text-faint); font-size: 12px; }
.film-asset { position: relative; display: block; }
.film-asset::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.18); }
.film-asset-play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%,-50%); width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.9); color: #111; }
.project-dl { margin: 0; }
.project-author { display: flex; align-items: center; gap: 11px; }
.project-author-sub { font-size: 11.5px; color: var(--text-faint); }
.project-contact { margin-top: 16px; width: 100%; justify-content: center; }
.project-more { padding-bottom: clamp(60px,10vh,110px); }
.missing { padding-top: 180px; min-height: 100vh; }

.admin-page { min-height: 100vh; }
.admin-page .ad { display: grid; grid-template-columns: 264px minmax(0,1fr); min-height: 100vh; }
.admin-page .ad__side { border-right: 1px solid var(--line); padding: 22px 18px 120px; background: var(--bg-elev); }
.admin-page .ad__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.admin-brand-name { font-size: 12px; }
.admin-page .ad__navb { display: block; width: 100%; text-align: left; padding: 11px 13px; margin-bottom: 5px; border: 1px solid transparent; border-radius: 9px; background: transparent; font-size: 13.5px; color: var(--text-dim); }
.admin-page .ad__navb:hover { background: var(--bg-elev-2); color: var(--text); }
.admin-page .ad__navb.is-on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.admin-page .ad__sect { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin: 24px 0 10px; }
.admin-add { width: 100%; display: block; text-align: center; }
.admin-page .ad__main { padding: 26px clamp(18px,3vw,42px) 130px; min-width: 0; }
.admin-page .ad__h { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 4px; }
.admin-page .ad__sub { font-size: 13.5px; color: var(--text-faint); margin: 0 0 26px; }
.admin-page .note { border: 1px solid var(--line); background: var(--bg-elev); border-radius: 11px; padding: 14px 16px; font-size: 13px; color: var(--text-dim); line-height: 1.65; margin-bottom: 22px; }
.admin-page .fs { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); margin-bottom: 14px; overflow: hidden; }
.admin-page .fs__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; }
.admin-page .fs__h b { font-size: 14px; font-weight: 600; }
.admin-page .fs__h i { font-style: normal; color: var(--text-faint); font-size: 12px; }
.admin-page .fs__b { padding: 4px 18px 20px; border-top: 1px solid var(--line); }
.admin-fields { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding-top: 14px; }
.admin-field { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.5); }
.admin-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.admin-field span { font-size: 13px; color: var(--text-dim); }
.admin-actions { display: flex; gap: 10px; margin-top: 24px; }
.admin-page .b { display: inline-flex; padding: 11px 20px; border-radius: 9px; border: 1px solid var(--line-strong); background: transparent; font-size: 13px; }
.admin-page .b--go { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600; }

.contact-panel {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr);
  gap: clamp(30px,6vw,90px);
  padding: clamp(28px,5vw,62px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 38px;
  background:
    radial-gradient(58% 100% at 0% 100%, rgba(var(--pastel-blue),.3), transparent 72%),
    radial-gradient(50% 90% at 100% 0%, rgba(var(--pastel-pink),.38), transparent 72%),
    rgba(255,255,255,.62);
  box-shadow: var(--glass-shadow-deep), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
}
.contact-panel__lead a {
  display: block;
  width: fit-content;
  margin-top: 20px;
  font-size: clamp(25px,4vw,56px);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.05;
  border-bottom: 1px solid rgba(32,32,37,.25);
}
.contact-panel__lead .contact-panel__phone {
  margin-top: 12px;
  font-size: clamp(20px,2.2vw,32px);
  letter-spacing: -.02em;
}
.contact-panel__lead p { margin: 20px 0 0; color: var(--text-faint); font-size: 13px; letter-spacing: .06em; }
.contact-panel__meta { display: grid; align-content: center; }
.contact-panel__meta > div { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-panel__meta > div:first-child { border-top: 1px solid var(--line); }
.contact-panel__meta span { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.contact-panel__meta strong { font-weight: 400; font-size: 14px; }

@media (max-width: 900px) {
  .admin-page .ad { grid-template-columns: 1fr; }
  .admin-page .ad__side { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
  .contact-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .admin-fields { grid-template-columns: 1fr; }
  .project-wrap { padding-top: 82px; }
  .page-hero { padding-top: 118px; }
}

/* =========================================================
   PASTEL GLASS UI — inspired by the supplied UI references
   ========================================================= */
:root {
  --pastel-pink: 255, 177, 207;
  --pastel-peach: 255, 213, 166;
  --pastel-lilac: 205, 184, 255;
  --pastel-blue: 178, 226, 255;
  --glass: rgba(255,255,255,.66);
  --glass-strong: rgba(255,255,255,.84);
  --glass-line: rgba(255,255,255,.86);
  --glass-shadow: 0 2px 7px rgba(95,75,120,.05), 0 24px 64px -24px rgba(89,68,121,.25);
  --glass-shadow-deep: 0 6px 18px rgba(99,75,130,.08), 0 42px 100px -30px rgba(87,60,120,.34);
}

html[data-theme="light"] body {
  background: #f8f7fa;
  color: #202025;
}

html[data-theme="light"] body::before {
  inset: -22%;
  background:
    radial-gradient(34% 30% at 8% 4%, rgba(var(--pastel-pink),.72) 0%, transparent 72%),
    radial-gradient(30% 28% at 94% 10%, rgba(var(--pastel-peach),.62) 0%, transparent 72%),
    radial-gradient(38% 34% at 88% 82%, rgba(var(--pastel-lilac),.58) 0%, transparent 72%),
    radial-gradient(34% 32% at 6% 92%, rgba(var(--pastel-blue),.5) 0%, transparent 72%);
  filter: blur(40px);
  opacity: .86;
  animation: ambientDrift 22s ease-in-out infinite alternate;
}

@keyframes ambientDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.035); }
}

/* Floating navigation capsule */
.nav { top: 12px; padding-inline: clamp(12px, 2.5vw, 34px); }
.nav::before { display: none; }
.nav__inner {
  max-width: 1180px;
  min-height: 62px;
  padding: 9px 12px 9px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 1px 0 rgba(255,255,255,.92) inset, var(--glass-shadow);
  transition: background .35s var(--spring), box-shadow .35s var(--spring), transform .35s var(--spring);
}
.nav.is-scrolled::before { display: none; }
.nav.is-scrolled .nav__inner {
  background: rgba(255,255,255,.82);
  box-shadow: 0 1px 0 #fff inset, 0 18px 50px -22px rgba(64,48,90,.28);
  transform: translateY(-2px);
}
.brand__mark {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.92);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.58));
  box-shadow: 0 8px 22px -12px rgba(90,59,121,.4), inset 0 1px 0 #fff;
  font-weight: 600;
}
.nav__links { gap: 6px; }
.nav__link, .nav__lock {
  padding: 9px 14px;
  border-radius: 999px;
  transition: background .3s var(--spring), color .3s var(--spring), transform .3s var(--spring);
}
.nav__link:hover, .nav__link.is-active { background: rgba(255,255,255,.74); color: var(--text); }
.nav__link.is-active { box-shadow: 0 8px 20px -14px rgba(66,49,92,.4), inset 0 0 0 1px rgba(255,255,255,.9); }
.nav__link.is-active::after { display: none; }
.nav__lock { margin-left: 4px; background: #222228; color: #fff; }
.nav__lock:hover { color: #fff; background: #000; transform: translateY(-1px); }

/* Hero becomes a glowing UI object */
.cinema { overflow: visible; isolation: isolate; }
.cinema__top { position: relative; z-index: 2; }
.cinema__top .label, .page-hero > .label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.54);
  box-shadow: 0 8px 26px -18px rgba(75,54,105,.3), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.cinema__top .label::before, .page-hero > .label::before {
  content: "✦";
  font-size: 10px;
  color: #b263a8;
}
.cinema__title {
  margin-top: 20px;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.cinema__title .grad {
  color: #8e8795;
  background: linear-gradient(90deg, #8c76b4 0%, #d7789d 45%, #db9b62 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stage { padding: 12px; border-radius: 42px; }
.stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: 42px;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.38));
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--glass-shadow-deep), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.stage__glow {
  width: 116%; height: 136%; opacity: .72;
  background:
    radial-gradient(40% 48% at 18% 28%, rgba(var(--pastel-pink),.92), transparent 70%),
    radial-gradient(38% 46% at 84% 24%, rgba(var(--pastel-peach),.88), transparent 70%),
    radial-gradient(46% 50% at 78% 80%, rgba(var(--pastel-lilac),.8), transparent 70%),
    radial-gradient(38% 46% at 20% 82%, rgba(var(--pastel-blue),.76), transparent 70%);
  filter: blur(58px);
}
.screen { border-radius: 30px; box-shadow: 0 24px 62px -28px rgba(44,33,58,.55); }
.screen__s::after { background: linear-gradient(to top, rgba(12,10,16,.78) 0%, rgba(12,10,16,.12) 48%, transparent 72%); }
.screen__nav { padding: 0 20px; }
.screen__nav { pointer-events: none; }
.screen__nav button { pointer-events: auto; }
.screen__nav button {
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.58);
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px -16px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.reel {
  width: fit-content;
  margin: 18px auto 0;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: var(--glass-shadow);
}
.reel__d { height: 5px; background: rgba(38,36,44,.12); }
.reel__d.is-on { background: linear-gradient(90deg, #bb86dd, #ed89ae, #f0b36f); }
.seats { opacity: .62; }
.seats__r span {
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 10px 26px -18px rgba(64,44,88,.28);
}

/* Glass bento surfaces */
.stats, .steps { gap: 14px !important; }
html[data-theme="light"] .stats__item,
html[data-theme="light"] .steps__item,
html[data-theme="light"] .pillar {
  border: 1px solid rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.64) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.stats__item, .steps__item, .pillar { position: relative; overflow: hidden; isolation: isolate; }
.stats__item::after, .steps__item::after, .pillar::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(72% 70% at 92% 0%, rgba(var(--pastel-pink),.34), transparent 70%),
    radial-gradient(70% 66% at 0% 100%, rgba(var(--pastel-blue),.22), transparent 72%);
}
.stats__item:nth-child(2n)::after, .steps__item:nth-child(2n)::after, .pillar:nth-child(2n)::after {
  background:
    radial-gradient(72% 70% at 92% 0%, rgba(var(--pastel-peach),.38), transparent 70%),
    radial-gradient(70% 66% at 0% 100%, rgba(var(--pastel-lilac),.22), transparent 72%);
}
.stats__item, .steps__item, .pillar { transition: transform .45s var(--spring), box-shadow .45s var(--spring); }
.stats__item:hover, .steps__item:hover, .pillar:hover { transform: translateY(-5px); box-shadow: var(--glass-shadow-deep) !important; }
.stats__num { font-weight: 500; letter-spacing: -.055em; }

/* Project cards: cinematic image inside a soft UI frame */
.card { padding: 10px; margin: -10px; border-radius: 32px; transition: transform .5s var(--spring); }
.card:hover { transform: translateY(-7px); }
.card__media {
  border: 8px solid rgba(255,255,255,.66) !important;
  border-radius: 30px !important;
  box-shadow: var(--glass-shadow-deep), inset 0 0 0 1px rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.7);
}
.card__badge {
  top: 18px; left: 18px;
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(255,255,255,.86);
  color: #29282d !important;
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.card__play span {
  width: 68px; height: 68px;
  border: 1px solid rgba(255,255,255,.76);
  background: rgba(255,255,255,.34);
  color: #fff;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.card__body { padding-inline: 8px; }
.card__desc { padding-inline: 8px; }

/* Shared pills, index rows and CTA */
.btn, .pill {
  border-color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px -20px rgba(58,43,78,.32), inset 0 1px 0 #fff;
}
.btn:hover, .pill:hover { background: #202025; color: #fff; border-color: #202025; transform: translateY(-2px); }
.btn--solid, .pill--solid { background: #222228; color: #fff; border-color: #222228; }
.index__row {
  margin-bottom: 8px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 20px;
  background: rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.index__row:hover { padding-left: 28px; background: rgba(255,255,255,.66); box-shadow: var(--glass-shadow); }
.cta {
  margin-bottom: clamp(38px, 7vw, 90px);
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 42px;
  background:
    radial-gradient(52% 88% at 0% 100%, rgba(var(--pastel-blue),.38), transparent 72%),
    radial-gradient(50% 88% at 100% 0%, rgba(var(--pastel-pink),.45), transparent 72%),
    rgba(255,255,255,.58);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--glass-shadow-deep), inset 0 1px 0 #fff;
}
.cta__mail { text-decoration-thickness: 1px; text-underline-offset: 10px; }

/* About / works page hero */
.page-hero { position: relative; isolation: isolate; min-height: 58svh; display: flex; flex-direction: column; justify-content: center; }
.page-hero::after {
  content: ""; position: absolute; right: 5%; top: 42%; width: clamp(160px,24vw,360px); aspect-ratio: 1;
  border-radius: 36%; transform: translateY(-50%) rotate(10deg); z-index: -1;
  border: 1px solid rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 28% 26%, rgba(var(--pastel-pink),.58), transparent 46%),
    radial-gradient(circle at 74% 66%, rgba(var(--pastel-lilac),.52), transparent 50%),
    rgba(255,255,255,.34);
  box-shadow: var(--glass-shadow-deep), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

/* Project detail as an editorial glass dashboard */
.project-wrap { padding-top: 112px; }
.player {
  border: 10px solid rgba(255,255,255,.68) !important;
  border-radius: 38px !important;
  background: rgba(255,255,255,.54);
  box-shadow: var(--glass-shadow-deep), inset 0 0 0 1px rgba(255,255,255,.95) !important;
}
.tabs {
  top: 86px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.88) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
}
.tabs::after { display: none !important; }
.tabs a.is-active { background: #222228; color: #fff; }
.folder, .scard, .code, .project-assets .gal__img {
  border: 1px solid rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.58) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 #fff !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}
.folder:hover, .scard:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-deep) !important; }
.project-assets .gal__img { border-radius: 24px; }
.project-assets figure:nth-child(3n+1) .gal__img { transform: rotate(-.45deg); }
.project-assets figure:nth-child(3n+2) .gal__img { transform: rotate(.45deg); }

/* Password gate becomes a premium frosted panel */
.gate {
  background:
    radial-gradient(42% 38% at 18% 18%, rgba(var(--pastel-pink),.75), transparent 74%),
    radial-gradient(42% 38% at 86% 16%, rgba(var(--pastel-peach),.62), transparent 74%),
    radial-gradient(46% 42% at 80% 88%, rgba(var(--pastel-lilac),.62), transparent 74%),
    radial-gradient(42% 40% at 10% 88%, rgba(var(--pastel-blue),.52), transparent 74%),
    #f8f7fa;
  background-size: auto;
}
.gate__inner {
  max-width: 430px;
  padding: 44px 38px 34px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 40px;
  background: rgba(255,255,255,.58);
  box-shadow: var(--glass-shadow-deep), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(34px) saturate(160%);
  backdrop-filter: blur(34px) saturate(160%);
}
.gate__mark { width: 54px; height: 54px; margin-bottom: 24px; background: rgba(255,255,255,.72); box-shadow: var(--glass-shadow); }
.gate__input { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.88); box-shadow: inset 0 1px 0 #fff; }
.gate__btn { min-height: 52px; background: #222228; color: #fff; box-shadow: 0 18px 36px -20px rgba(28,25,34,.5); }

/* Admin follows the same glass system */
.admin-page .ad__side { background: rgba(255,255,255,.58); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }
.admin-page .note, .admin-page .fs, .admin-field {
  border-color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.58);
  box-shadow: var(--glass-shadow), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

@media (max-width: 860px) {
  .nav { top: 8px; padding-inline: 8px; }
  .nav__inner { min-height: 56px; padding: 7px 10px 7px 12px; }
  .nav__links {
    inset: 8px; width: auto; height: calc(100svh - 16px);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 32px;
    background:
      radial-gradient(60% 44% at 15% 8%, rgba(var(--pastel-pink),.55), transparent 72%),
      radial-gradient(60% 44% at 88% 90%, rgba(var(--pastel-lilac),.48), transparent 72%),
      rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    box-shadow: var(--glass-shadow-deep);
  }
  .nav__lock { margin-left: 0; padding-inline: 24px; }
  .page-hero::after { opacity: .56; right: -12%; }
  .tabs { top: 76px; margin-inline: 0; }
}

@media (max-width: 640px) {
  .stage { padding: 7px; border-radius: 28px; }
  .stage::before { border-radius: 28px; }
  .screen { border-radius: 22px; }
  .cinema__title { font-size: clamp(34px, 10vw, 48px); }
  .card { padding: 6px; margin: -6px; }
  .card__media { border-width: 5px !important; border-radius: 24px !important; }
  .cta { border-radius: 28px; margin-inline: 12px; width: auto; }
  .player { border-width: 6px !important; border-radius: 26px !important; }
  .gate__inner { margin: 16px; padding: 38px 24px 28px; border-radius: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body::before { animation: none; }
}

/* =========================================================
   EDITORIAL HIERARCHY — clear primary / secondary reading
   ========================================================= */
.editorial-hero {
  min-height: 68svh;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, .72fr);
  gap: clamp(42px, 7vw, 120px);
  align-items: end;
  padding-bottom: clamp(58px, 9vh, 110px);
}
.editorial-hero__main { position: relative; z-index: 2; }
.editorial-hero__main > .label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.54);
  box-shadow: 0 8px 26px -18px rgba(75,54,105,.3), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.editorial-hero__main > .label::before { content: "✦"; font-size: 10px; color: #b263a8; }
.editorial-hero__main .h-display {
  margin-top: 22px;
  max-width: 10.5ch;
  font-size: clamp(50px, 8.2vw, 118px);
  line-height: .9;
}
.editorial-hero__aside {
  position: relative;
  z-index: 2;
  padding: 22px 0 4px 24px;
  border-left: 1px solid rgba(32,32,37,.16);
}
.editorial-hero__aside .lede {
  margin: 14px 0 0;
  max-width: 30ch;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.65;
}
.editorial-section {
  position: relative;
  padding-top: clamp(58px, 8vh, 100px);
  padding-bottom: clamp(72px, 11vh, 140px);
  border-top: 1px solid rgba(32,32,37,.1);
}
.editorial-section .section__head {
  grid-template-columns: minmax(150px, .45fr) minmax(0, 1.55fr);
  align-items: start;
  padding-bottom: clamp(34px, 5vw, 68px);
}
.editorial-section .section__head .label { padding-top: 9px; }
.editorial-section .section__head .h-section {
  max-width: 15ch;
  font-size: clamp(34px, 4.6vw, 66px);
  line-height: .98;
}
.belief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr);
  gap: clamp(40px, 8vw, 140px);
  align-items: end;
  padding-left: calc((100% - clamp(150px, 24vw, 360px)) * .02);
}
.belief-grid p { margin: 0; }
.belief-grid__primary {
  max-width: 25ch;
  font-size: clamp(24px, 3.1vw, 44px);
  line-height: 1.18;
  letter-spacing: -.035em;
}
.belief-grid__secondary {
  max-width: 38ch;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.75;
}
.pillars--hierarchy {
  grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.pillars--hierarchy .pillar {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 34px);
}
.pillars--hierarchy .pillar__t { margin: auto 0 10px; }
.pillars--hierarchy .pillar--primary {
  min-height: 320px;
  background: rgba(255,255,255,.78) !important;
}
.pillars--hierarchy .pillar--primary .pillar__t {
  max-width: 8ch;
  font-size: clamp(27px, 2.7vw, 40px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.pillars--hierarchy .pillar--primary .pillar__d {
  max-width: 28ch;
  font-size: 14px;
}
.two--editorial {
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 10vw, 170px);
}
.two--editorial .h-section { max-width: 9ch; font-size: clamp(38px, 5vw, 72px); line-height: .96; }
.list-def--steps > div {
  grid-template-columns: minmax(70px, .28fr) 1fr;
  padding: 24px 0;
}
.list-def--steps dd { color: var(--text); font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -.015em; }
.editorial-section--contact { padding-top: 0; border-top: 0; }
.editorial-section--contact .contact-panel__lead a { max-width: 16ch; }
.motion-ready .editorial-hero__main { animation: heroEnter 1s var(--spring) both .08s; }
.motion-ready .editorial-hero__aside { animation: heroEnter 1s var(--spring) both .22s; }
.editorial-hero__main > .label::before { animation: sparkleTurn 4.6s ease-in-out infinite; }

@media (max-width: 1000px) {
  .pillars--hierarchy { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pillars--hierarchy .pillar--primary { grid-column: span 2; min-height: 280px; }
}
@media (max-width: 760px) {
  .editorial-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: start;
    padding-top: 132px;
    padding-bottom: 74px;
  }
  .editorial-hero__main .h-display { font-size: clamp(46px, 14vw, 76px); }
  .editorial-hero__aside { max-width: 34ch; padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(32,32,37,.14); }
  .editorial-section .section__head { grid-template-columns: 1fr; gap: 18px; }
  .editorial-section .section__head .label { padding-top: 0; }
  .belief-grid, .two--editorial { grid-template-columns: 1fr; gap: 30px; padding-left: 0; }
  .belief-grid__secondary { max-width: 46ch; }
}
@media (max-width: 560px) {
  .pillars--hierarchy { grid-template-columns: 1fr; }
  .pillars--hierarchy .pillar,
  .pillars--hierarchy .pillar--primary { grid-column: auto; min-height: 220px; }
  .pillars--hierarchy .pillar--primary { min-height: 270px; }
}

/* =========================================================
   MOTION SYSTEM — soft, dimensional, and performance-aware
   ========================================================= */
.motion-progress {
  position: fixed; inset: 0 0 auto; z-index: 1200;
  height: 2px; pointer-events: none;
}
.motion-progress__bar {
  display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #ad8bd8, #ef8eb5 48%, #efb36f);
  box-shadow: 0 0 14px rgba(226,124,170,.42);
  will-change: transform;
}
.motion-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body > main { position: relative; z-index: 1; }
.motion-orb {
  position: absolute; width: min(34vw, 520px); aspect-ratio: 1; border-radius: 50%;
  filter: blur(72px); opacity: .16; will-change: transform;
}
.motion-orb--pink { left: -10%; top: 18%; background: rgb(var(--pastel-pink)); animation: orbPink 19s ease-in-out infinite alternate; }
.motion-orb--peach { right: -12%; top: 42%; background: rgb(var(--pastel-peach)); animation: orbPeach 23s ease-in-out infinite alternate; }
.motion-orb--lilac { left: 36%; bottom: -18%; background: rgb(var(--pastel-lilac)); animation: orbLilac 26s ease-in-out infinite alternate; }
@keyframes orbPink { to { transform: translate3d(28vw, 8vh, 0) scale(1.2); } }
@keyframes orbPeach { to { transform: translate3d(-24vw, -14vh, 0) scale(.88); } }
@keyframes orbLilac { to { transform: translate3d(18vw, -18vh, 0) scale(1.12); } }

/* Staggered scroll entrance */
.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.992);
  transition:
    opacity .42s var(--spring) var(--reveal-delay, 0ms),
    transform .5s var(--spring) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.motion-ready .reveal.is-in { opacity: 1; transform: translate3d(0,0,0) scale(1); }

/* Hero choreography */
.motion-ready .cinema__top .label { animation: heroEnter .8s var(--spring) both .06s; }
.motion-ready .cinema__title { animation: heroEnter 1s var(--spring) both .14s; }
.motion-ready .cinema__lede { animation: heroEnter 1s var(--spring) both .24s; }
.motion-ready .stage { animation: heroStageIn 1.15s var(--spring) both .28s, stageBreathe 7s ease-in-out infinite 1.5s; }
.motion-ready .reel { animation: heroEnter .8s var(--spring) both .52s, reelFloat 5s ease-in-out infinite 1.4s; }
.motion-ready .seats { animation: seatsEnter 1.1s var(--spring) both .58s; }
@keyframes heroEnter { from { opacity: 0; transform: translate3d(0,26px,0) scale(.985); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes heroStageIn { from { opacity: 0; transform: translate3d(0,48px,0) scale(.94); filter: blur(12px); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); } }
@keyframes stageBreathe { 0%,100% { transform: translate3d(var(--stage-x,0), calc(var(--stage-y,0) + 0px), 0); } 50% { transform: translate3d(var(--stage-x,0), calc(var(--stage-y,0) - 8px), 0); } }
@keyframes reelFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes seatsEnter { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: .62; transform: none; } }
.stage { --stage-x: 0px; --stage-y: 0px; transition: filter .45s var(--spring); }
.stage:hover { filter: saturate(1.04); }
.stage__glow { animation: projectorPulse 8s ease-in-out infinite alternate !important; }
@keyframes projectorPulse { from { transform: translate(-50%,-52%) scale(.98); opacity: .58; } to { transform: translate(-50%,-49%) scale(1.08); opacity: .82; } }
.cinema__top .label::before, .page-hero > .label::before { animation: sparkleTurn 4.6s ease-in-out infinite; }
@keyframes sparkleTurn { 0%,100% { transform: rotate(0) scale(1); opacity: .65; } 45% { transform: rotate(180deg) scale(1.25); opacity: 1; } }

/* Image slides feel alive without distracting from the film */
.screen__s img { transform: scale(1.035); transition: transform 6.4s cubic-bezier(.2,.7,.2,1), filter .6s; }
.screen__s:hover img { transform: scale(1.075); }
.screen__c { transition: transform .7s var(--spring), opacity .6s; }
.screen:hover .screen__c { transform: translateY(-5px); }
.screen__nav button { transition: transform .35s var(--spring), background .35s, box-shadow .35s; }
.screen__nav button:hover { transform: scale(1.08); box-shadow: 0 18px 34px -18px rgba(0,0,0,.5); }
.screen__nav button:active { transform: scale(.94); }

/* Pointer depth and light tracking */
.card, .project-assets figure {
  --tilt-x: 0deg; --tilt-y: 0deg; --shine-x: 50%; --shine-y: 50%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s var(--spring), filter .45s var(--spring);
}
.card.is-tilting, .project-assets figure.is-tilting {
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-7px);
}
.card::before, .project-assets figure::before {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 32px; pointer-events: none;
  background: radial-gradient(340px circle at var(--shine-x) var(--shine-y), rgba(255,255,255,.34), transparent 58%);
  opacity: 0; transition: opacity .35s;
}
.card.is-tilting::before, .project-assets figure.is-tilting::before { opacity: 1; }
.card.is-tilting .card__media, .project-assets figure.is-tilting .gal__img { box-shadow: 0 34px 80px -32px rgba(63,42,90,.46) !important; }
.card__body, .card__desc, .project-assets figcaption { transform: translateZ(18px); }

/* Small tactile interactions */
.nav__link, .nav__lock, .btn, .pill, .reel__d, .folder, .index__row { will-change: transform; }
.nav__link:active, .nav__lock:active, .btn:active, .pill:active { transform: scale(.95); }
.reel__d:hover { transform: scaleX(1.2); }
.folder:hover { transform: translateY(-4px) rotate(.35deg); }
.index__row:hover .index__go { transform: translateX(4px); }
.index__go { transition: transform .35s var(--spring), color .35s; }
.page-hero::after { animation: heroOrbFloat 8s ease-in-out infinite alternate; }
@keyframes heroOrbFloat { to { transform: translateY(calc(-50% - 10px)) rotate(14deg) scale(1.035); } }
.cta { transition: transform .55s var(--spring), box-shadow .55s var(--spring); }
.cta:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(99,75,130,.08), 0 56px 110px -40px rgba(87,60,120,.38), inset 0 1px 0 #fff; }

/* Gate entrance */
.motion-ready .gate__inner { animation: gateIn .95s var(--spring) both; }
.motion-ready .gate__mark { animation: gateMark 4.8s ease-in-out infinite 1s; }
@keyframes gateIn { from { opacity: 0; transform: translateY(28px) scale(.95); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes gateMark { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(3deg); } }

@media (max-width: 860px), (hover: none), (pointer: coarse) {
  .card.is-tilting, .project-assets figure.is-tilting { transform: none; }
  .card::before, .project-assets figure::before { display: none; }
  .motion-orb { opacity: .1; filter: blur(58px); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-progress, .motion-orbs { display: none; }
  .motion-ready .reveal, .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .motion-ready .cinema__top .label, .motion-ready .cinema__title, .motion-ready .cinema__lede,
  .motion-ready .stage, .motion-ready .reel, .motion-ready .seats, .stage__glow,
  .page-hero::after, .motion-ready .gate__inner, .motion-ready .gate__mark { animation: none !important; }
  .screen__s img { transition: none; transform: none; }
}

/* =========================================================
   ALIGNMENT RESET — one clear reading axis
   ========================================================= */
.editorial-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  min-height: 66svh;
  padding-bottom: clamp(64px, 9vh, 108px);
}
.editorial-hero__main,
.editorial-hero__aside { width: 100%; }
.editorial-hero__main .h-display {
  max-width: 12ch;
  font-size: clamp(50px, 8vw, 112px);
  line-height: .92;
}
.editorial-hero__aside {
  max-width: 42ch;
  margin-top: clamp(28px, 4vw, 46px);
  padding: 0;
  border: 0;
}
.editorial-hero__aside > .label { display: none; }
.editorial-hero__aside .lede { max-width: 42ch; margin: 0; }

.editorial-section .section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: clamp(36px, 5vw, 60px);
}
.editorial-section .section__head .label { padding-top: 0; }
.editorial-section .section__head .h-section { max-width: 17ch; }
.belief-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  align-items: start;
  gap: clamp(36px, 7vw, 110px);
  padding-left: 0;
}
.pillars--hierarchy {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.pillars--hierarchy .pillar,
.pillars--hierarchy .pillar--primary {
  min-height: 270px;
  padding: clamp(22px, 2.2vw, 32px);
}
.pillars--hierarchy .pillar--primary .pillar__t,
.pillars--hierarchy .pillar__t {
  max-width: none;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.pillars--hierarchy .pillar--primary .pillar__d,
.pillars--hierarchy .pillar__d { font-size: 13.5px; }
.two--editorial {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 7vw, 100px);
}
.two--editorial .h-section { max-width: 10ch; }

@media (max-width: 1000px) {
  .pillars--hierarchy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars--hierarchy .pillar--primary { grid-column: auto; }
}
@media (max-width: 760px) {
  .editorial-hero { min-height: auto; padding-top: 132px; padding-bottom: 72px; }
  .editorial-hero__main .h-display { font-size: clamp(44px, 13vw, 72px); }
  .belief-grid,
  .two--editorial { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .pillars--hierarchy { grid-template-columns: 1fr; }
  .pillars--hierarchy .pillar,
  .pillars--hierarchy .pillar--primary { min-height: 220px; }
}

/* =========================================================
   PROJECT ADMIN — Drive-first content workspace
   ========================================================= */
.admin-workspace { background: #f5f4f7; color: #202025; }
.admin-workspace .ad { grid-template-columns: 250px minmax(0, 1fr); }
.admin-workspace .ad__side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: rgba(255,255,255,.72);
  border-right-color: rgba(32,32,37,.08);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.admin-workspace button.ad__navb { cursor: pointer; font-family: inherit; }
.admin-workspace .ad__navb.is-on { background: #202025; color: #fff; box-shadow: 0 12px 28px -18px rgba(0,0,0,.45); }
.admin-workspace .admin-quick-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-workspace .admin-quick-link small { color: #9b98a0; font-size: 9px; white-space: nowrap; }
.admin-workspace .ad__main { padding: 34px clamp(20px, 3vw, 48px) 100px; }
.admin-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.admin-topbar .ad__h { margin-top: 8px; font-size: clamp(30px, 3vw, 46px); font-weight: 500; }
.admin-topbar .ad__sub { margin-bottom: 0; }
.admin-topbar__actions { display: flex; gap: 10px; flex: none; }
.admin-workspace .b { cursor: pointer; justify-content: center; }
.admin-workspace .b:disabled { cursor: not-allowed; opacity: .36; }
.admin-notice {
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid rgba(32,32,37,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  color: #45454d;
  font-size: 13px;
}
.admin-guide {
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid rgba(32,32,37,.09);
  border-radius: 20px;
  background: linear-gradient(125deg, rgba(255,255,255,.9), rgba(244,236,247,.78));
  box-shadow: 0 18px 50px -40px rgba(87,53,103,.45);
}
.admin-guide summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}
.admin-guide summary::-webkit-details-marker { display: none; }
.admin-guide summary span { display: flex; align-items: baseline; gap: 12px; }
.admin-guide summary b { font-size: 14px; font-weight: 650; }
.admin-guide summary i { color: #89858e; font-size: 11px; font-style: normal; }
.admin-guide summary em { color: #8b5d83; font-size: 10px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.admin-guide__body { padding: 0 20px 20px; border-top: 1px solid rgba(32,32,37,.07); }
.admin-guide__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.admin-guide__steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 18px 18px 4px 0; }
.admin-guide__steps li + li { padding-left: 18px; border-left: 1px solid rgba(32,32,37,.07); }
.admin-guide__steps li > span { color: #a16d95; font-size: 10px; font-weight: 650; letter-spacing: .08em; }
.admin-guide__steps b { display: block; margin-bottom: 7px; font-size: 12.5px; }
.admin-guide__steps p { margin: 0; color: #716e77; font-size: 11px; line-height: 1.55; }
.admin-guide__steps code { padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.7); color: #5f5263; font: inherit; }
.admin-guide__steps strong { color: #49454d; font-weight: 600; }
.admin-guide__links { display: flex; gap: 9px; margin-top: 16px; }
.admin-guide__links a { padding: 9px 12px; border: 1px solid rgba(32,32,37,.09); border-radius: 999px; background: rgba(255,255,255,.62); color: #46424a; font-size: 11px; text-decoration: none; }
.admin-guide__links a:hover { background: #fff; }
.admin-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(22px, 3vw, 42px); align-items: start; }
.admin-editor { min-width: 0; }
.admin-form-section { border-radius: 22px !important; background: rgba(255,255,255,.72) !important; }
.admin-form-section .fs__h { padding: 18px 20px; }
.admin-form-section .fs__b { padding: 20px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-control { display: block; min-width: 0; }
.admin-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: #505059;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .045em;
}
.admin-control > span i { color: #a06b8f; font-size: 9px; font-style: normal; font-weight: 500; text-transform: uppercase; }
.admin-control input,
.admin-control textarea,
.admin-control select {
  width: 100%;
  min-height: 45px;
  padding: 11px 13px;
  border: 1px solid rgba(32,32,37,.1);
  border-radius: 12px;
  outline: none;
  background: rgba(250,250,252,.88);
  color: #202025;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.admin-control textarea { resize: vertical; min-height: 110px; }
.admin-control input:focus,
.admin-control textarea:focus,
.admin-control select:focus { border-color: rgba(122,86,145,.4); background: #fff; box-shadow: 0 0 0 4px rgba(192,164,211,.14); }
.admin-control--wide { grid-column: 1 / -1; }
.admin-preview__sticky {
  position: sticky;
  top: 28px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 48px -30px rgba(65,50,86,.28), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.admin-preview__image {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 18px;
  background: #ebe9ee;
  color: #87848c;
  text-align: center;
  font-size: 12px;
}
.admin-preview__image img { width: 100%; height: 100%; object-fit: cover; }
.admin-preview__format { margin: 16px 0 6px; color: #88858e; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.admin-preview h2 { margin: 0; font-size: 25px; line-height: 1.08; letter-spacing: -.035em; }
.admin-preview h2 + p { margin: 10px 0 0; color: #696770; font-size: 12.5px; line-height: 1.6; }
.admin-checks { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(32,32,37,.08); }
.admin-checks > div { display: flex; align-items: center; gap: 9px; color: #a19ea6; font-size: 12px; }
.admin-checks > div span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #eceaef; }
.admin-checks > div.is-ok { color: #34323a; }
.admin-checks > div.is-ok span { background: #dff1e6; color: #28704a; }
.admin-preview__actions { display: grid; gap: 9px; margin-top: 20px; }
.admin-preview__hint { margin: 14px 2px 0; color: #8a8790; font-size: 10.5px; line-height: 1.55; }
.project-assets--fluid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.project-assets--fluid figure { min-width: 0; }
.project-assets--fluid .gal__img { aspect-ratio: 4 / 3; }

/* Asset rails preserve every source image's original ratio. */
.project-assets .asset-rail__viewport .gal__img {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent;
}
.project-assets .asset-rail__viewport .gal__img img {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}
.project-assets .asset-rail__viewport,
.project-assets .asset-rail__viewport figure { align-items: start; align-self: start; }
.project-assets .asset-rail--fit-height .asset-rail__viewport {
  --asset-fit-height: clamp(300px, 34vw, 520px);
  display: flex !important;
  align-items: flex-start;
}
.project-assets .asset-rail--fit-height .asset-rail__viewport figure {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.project-assets .asset-rail--fit-height .asset-rail__viewport .gal__img {
  width: auto !important;
  height: var(--asset-fit-height) !important;
}
.project-assets .asset-rail--fit-height .asset-rail__viewport .gal__img img {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}
.project-assets .asset-rail--fit-height .asset-rail__viewport figcaption {
  max-width: min(72vw, 680px);
}
.project-assets .asset-rail--fit-height .asset-rail__viewport .asset-more-card {
  width: clamp(240px, 25vw, 380px);
}
.project-assets .asset-rail--fit-height .asset-rail__viewport .asset-more-card__surface {
  width: 100% !important;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(92, 79, 112, .2) !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(247, 206, 222, .42), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(207, 200, 241, .48), transparent 44%),
    rgba(255,255,255,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
  transform: none !important;
}
.project-assets .asset-more-card__surface span {
  padding: 28px;
  color: #77717d;
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: 450;
  letter-spacing: -.02em;
  text-align: center;
}

/* Character + Location / Element share one compact two-row asset browser. */
.project-assets .asset-rail--combined {
  position: relative;
  overflow: hidden;
  background-color: rgba(255,255,255,.7);
  background-image: radial-gradient(rgba(76,66,89,.1) .7px, transparent .7px);
  background-size: 14px 14px;
}
.project-assets .asset-grid-scroll {
  --asset-card-width: clamp(210px, 22vw, 300px);
  --asset-media-height: clamp(150px, 16vw, 220px);
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: var(--asset-card-width);
  gap: 14px;
  padding: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(83, 72, 104, .28) transparent;
}
.project-assets .asset-grid-card {
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}
.project-assets .asset-grid-card .gal__img {
  width: 100%;
  height: var(--asset-media-height);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid rgba(62,54,72,.08) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 14px 30px -24px rgba(42,34,52,.38) !important;
  transform: none;
}
.project-assets .asset-grid-card .gal__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.project-assets .asset-grid-card figcaption {
  display: grid;
  gap: 4px;
  padding: 9px 2px 2px;
  overflow: hidden;
}
.project-assets .asset-grid-card figcaption span {
  color: #918997;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.project-assets .asset-grid-card figcaption b {
  overflow: hidden;
  color: #3d3942;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-assets .asset-grid-card.asset-more-card .asset-more-card__surface {
  width: 100%;
  height: var(--asset-media-height) !important;
  border: 1px dashed rgba(92, 79, 112, .2) !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(247, 206, 222, .42), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(207, 200, 241, .48), transparent 44%),
    rgba(255,255,255,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* MiniMax-inspired outcome showcase, adapted to UnitTwoFour's film archive. */
.outcome-showcase {
  display: grid;
  grid-template-columns: minmax(210px, 25%) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(18px, 2.6vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(52% 80% at 100% 0%, rgba(var(--pastel-lilac),.2), transparent 72%),
    rgba(255,255,255,.72);
  box-shadow: var(--glass-shadow-deep), inset 0 1px 0 #fff;
}
.outcome-showcase__side {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.outcome-showcase__intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 14px;
  padding: 4px 2px clamp(22px, 4vw, 48px);
}
.outcome-showcase__intro > span,
.outcome-showcase__intro > small {
  color: #88818d;
  font-size: 9px;
  letter-spacing: .12em;
}
.outcome-showcase__intro > span { text-transform: uppercase; }
.outcome-showcase__intro h2 {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: clamp(24px, 2.8vw, 42px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.outcome-showcase__intro p {
  grid-column: 1 / -1;
  max-width: 30ch;
  margin: 0;
  color: #77717d;
  font-size: 11px;
  line-height: 1.55;
}
.outcome-showcase__list {
  display: grid;
  gap: 10px;
  margin-top: auto;
}
.outcome-showcase__list button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: #49434d;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.outcome-showcase__list button:hover { transform: translateX(3px); background: rgba(255,255,255,.74); }
.outcome-showcase__list button.is-active { border-color: rgba(34,31,38,.32); background: #fff; box-shadow: 0 10px 28px -22px rgba(35,29,43,.5); }
.outcome-showcase__thumb {
  width: 88px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #151419;
}
.outcome-showcase__thumb img { width: 100%; height: 100%; object-fit: contain; }
.outcome-showcase__label { min-width: 0; display: grid; gap: 4px; }
.outcome-showcase__label small { color: #99919f; font-size: 8px; letter-spacing: .12em; }
.outcome-showcase__label b { overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.outcome-showcase__stage { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.outcome-showcase__stage .player {
  border-width: 6px !important;
  border-radius: 30px !important;
  box-shadow: 0 24px 60px -34px rgba(35,29,43,.5), inset 0 0 0 1px rgba(255,255,255,.85) !important;
}
.outcome-showcase__stage-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 8px 0;
  color: #87808c;
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .outcome-showcase { grid-template-columns: 1fr; }
  .outcome-showcase__side { display: contents; }
  .outcome-showcase__intro { padding-bottom: 4px; }
  .outcome-showcase__stage { grid-row: 2; }
  .outcome-showcase__list {
    grid-row: 3;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    overflow-x: auto;
    padding-bottom: 3px;
  }
  .outcome-showcase__list button { grid-template-columns: 72px minmax(0, 1fr); }
  .outcome-showcase__thumb { width: 72px; }
}

@media (max-width: 620px) {
  .outcome-showcase { padding: 12px; border-radius: 26px; }
  .outcome-showcase__intro { padding: 8px 5px 2px; }
  .outcome-showcase__intro p { display: none; }
  .outcome-showcase__stage .player { border-width: 4px !important; border-radius: 20px !important; }
  .outcome-showcase__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(74vw, 260px); }
  .project-assets .asset-grid-scroll {
    --asset-card-width: min(72vw, 280px);
    --asset-media-height: min(52vw, 190px);
    gap: 10px;
    padding: 10px;
  }
}

@media (max-width: 1100px) {
  .admin-guide__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-guide__steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .admin-editor-grid { grid-template-columns: 1fr; }
  .admin-preview { grid-row: 1; }
  .admin-preview__sticky { position: static; display: grid; grid-template-columns: 220px 1fr; column-gap: 20px; }
  .admin-preview__sticky > .label { grid-column: 1 / -1; }
  .admin-preview__image { grid-row: 2 / span 6; }
  .admin-preview__format { margin-top: 14px; }
  .admin-checks { grid-template-columns: repeat(2, 1fr); }
  .admin-preview__actions { grid-template-columns: repeat(2, 1fr); }
  .admin-preview__hint { grid-column: 2; }
}
@media (max-width: 820px) {
  .admin-workspace .ad { grid-template-columns: 1fr; }
  .admin-workspace .ad__side { position: static; height: auto; max-height: none; border-right: 0; border-bottom: 1px solid rgba(32,32,37,.08); }
  .admin-topbar { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
  .project-assets .asset-rail--fit-height .asset-rail__viewport { --asset-fit-height: clamp(260px, 82vw, 420px); }
  .admin-workspace .ad__main { padding-inline: 14px; }
  .admin-topbar__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-control--wide { grid-column: auto; }
  .admin-preview__sticky { display: block; }
  .admin-preview__image { margin-top: 14px; }
  .admin-checks { grid-template-columns: 1fr 1fr; }
  .admin-preview__hint { margin-top: 14px; }
  .admin-guide summary span { align-items: flex-start; flex-direction: column; gap: 3px; }
  .admin-guide__steps { grid-template-columns: 1fr; }
  .admin-guide__steps li,
  .admin-guide__steps li + li { padding: 15px 0; border-left: 0; border-top: 1px solid rgba(32,32,37,.07); }
  .admin-guide__steps li:first-child { border-top: 0; }
  .admin-guide__links { display: grid; grid-template-columns: 1fr; }
  .admin-guide__links a { text-align: center; }
}

/* =========================================================
   HOME SHOWREEL — editorial creative showcase
   Inspired by MiniMax's canvas, kept cinematic for UnitTwoFour
   ========================================================= */
.cinema {
  position: relative;
  min-height: 100svh;
  background-image: radial-gradient(rgba(70,62,82,.09) .7px, transparent .7px);
  background-size: 18px 18px;
}
.cinema::before {
  content: "";
  position: absolute;
  inset: 58px 0 auto;
  height: min(48vw, 620px);
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 42%, rgba(var(--pastel-pink),.34), transparent 20%),
    radial-gradient(circle at 83% 32%, rgba(var(--pastel-lilac),.4), transparent 21%),
    radial-gradient(circle at 64% 86%, rgba(var(--pastel-peach),.26), transparent 18%);
  filter: blur(50px);
  opacity: .9;
}
.cinema__top { margin-bottom: clamp(34px, 6vh, 72px); }
.cinema__title { max-width: 12ch; font-size: clamp(54px, 8.3vw, 128px); line-height: .88; letter-spacing: -.075em; }
.cinema__lede { max-width: 54ch; }

.showreel-showcase {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(230px, 25%) minmax(0, 1fr);
  align-items: start;
  gap: clamp(22px, 3.6vw, 58px);
  padding: clamp(20px, 3vw, 44px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: clamp(32px, 4.4vw, 58px);
  background: rgba(255,255,255,.72);
  box-shadow: 0 34px 90px -48px rgba(53,41,70,.42), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(30px) saturate(145%);
  backdrop-filter: blur(30px) saturate(145%);
}
.showreel-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(69,61,80,.08) .7px, transparent .7px);
  background-size: 14px 14px;
  mask-image: linear-gradient(90deg, #000, transparent 54%);
}
.showreel-showcase__side {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.showreel-showcase__intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 14px;
}
.showreel-showcase__intro > span,
.showreel-showcase__intro > small {
  color: #87808b;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}
.showreel-showcase__intro > span { text-transform: uppercase; }
.showreel-showcase__intro h2 {
  grid-column: 1 / -1;
  margin: clamp(20px, 4vh, 42px) 0 0;
  font-size: clamp(30px, 3vw, 50px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.055em;
}
.showreel-showcase__intro p {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: #77717d;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.showreel-showcase__list {
  display: grid;
  gap: 9px;
  margin-top: clamp(28px, 4vh, 48px);
  padding-top: 0;
}
.showreel-showcase__list button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: #48424c;
  text-align: left;
  cursor: pointer;
  transition: transform .3s var(--spring), border-color .25s, background .25s, box-shadow .25s;
}
.showreel-showcase__list button:hover { transform: translateX(4px); background: rgba(255,255,255,.8); }
.showreel-showcase__list button.is-active { border-color: rgba(30,28,34,.3); background: #fff; box-shadow: 0 12px 28px -22px rgba(45,36,56,.48); }
.showreel-showcase__thumb {
  width: 86px;
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #151419;
}
.showreel-showcase__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: filter .25s; }
.showreel-showcase__list button.is-active img,
.showreel-showcase__list button:hover img { filter: saturate(1); }
.showreel-showcase__label { min-width: 0; display: grid; gap: 4px; }
.showreel-showcase__label small { color: #9a929f; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.showreel-showcase__label b { overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.showreel-showcase__media {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 9;
  max-height: min(68svh, 720px);
  align-self: start;
  overflow: hidden;
  border: 7px solid rgba(255,255,255,.82);
  border-radius: clamp(24px, 3vw, 40px);
  background: #111116;
  box-shadow: 0 28px 70px -36px rgba(30,23,40,.58), inset 0 0 0 1px rgba(255,255,255,.76);
}
.showreel-showcase__media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  animation: showreelImageIn .9s var(--spring) both;
  transition: transform 1.2s var(--spring), filter .5s;
}
.showreel-showcase__media:hover > img { transform: scale(1.035); filter: saturate(1.05); }
.showreel-showcase__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(11,9,14,.72)); }
.showreel-showcase__open {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #fff;
}
.showreel-showcase__open i {
  width: 72px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  box-shadow: 0 16px 38px -20px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-size: 22px;
  font-style: normal;
  transition: transform .35s var(--spring), background .3s;
}
.showreel-showcase__media:hover .showreel-showcase__open i { transform: rotate(8deg) scale(1.08); background: rgba(255,255,255,.28); }
.showreel-showcase__open b { font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.showreel-showcase__meta {
  position: absolute;
  left: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 30px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
}
.showreel-showcase__meta b { font-size: clamp(18px, 2.3vw, 34px); font-weight: 400; letter-spacing: -.035em; }
.showreel-showcase__meta small { max-width: 42%; text-align: right; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .76; }
.showreel-showcase__progress { position: absolute; left: 0; bottom: 0; z-index: 3; height: 3px; background: linear-gradient(90deg, #c48ce3, #ec8aad, #efaf6e); }
@keyframes showreelImageIn { from { opacity: .35; transform: scale(1.06); } to { opacity: 1; transform: none; } }

@media (max-width: 920px) {
  .cinema__title { font-size: clamp(52px, 11vw, 94px); }
  .showreel-showcase { min-height: auto; grid-template-columns: 1fr; }
  .showreel-showcase__side { display: contents; }
  .showreel-showcase__intro { padding: 2px 4px; }
  .showreel-showcase__media { grid-row: 2; min-height: 0; aspect-ratio: 16 / 10; max-height: none; }
  .showreel-showcase__list { grid-row: 3; grid-auto-flow: column; grid-auto-columns: min(52vw, 260px); overflow-x: auto; margin-top: 0; padding: 3px 0 2px; }
}
@media (max-width: 620px) {
  .cinema { padding-top: 92px; }
  .cinema__top { margin-bottom: 26px; }
  .cinema__title { max-width: 11ch; font-size: clamp(46px, 14vw, 72px); }
  .cinema__lede { font-size: 13px; }
  .showreel-showcase { gap: 14px; padding: 12px; border-radius: 28px; }
  .showreel-showcase__intro h2 { margin-top: 14px; font-size: 28px; }
  .showreel-showcase__media { border-width: 4px; border-radius: 21px; }
  .showreel-showcase__open i { width: 58px; }
  .showreel-showcase__meta small { display: none; }
  .showreel-showcase__list { grid-auto-columns: min(76vw, 260px); }
}

/* MiniMax-style global header: announcement strip + clean full-width nav. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
}
.site-announcement {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 5vw, 70px);
  padding-inline: var(--pad);
  color: rgba(255,255,255,.9);
  background: #5547ac;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-announcement span + span { color: rgba(255,255,255,.66); }
.site-header .nav {
  position: relative;
  inset: auto;
  top: auto;
  padding: 0;
  border-bottom: 1px solid rgba(34,31,39,.1);
  background: rgba(249,248,250,.94);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}
.site-header .nav::before { display: none; }
.site-header .nav__inner,
.site-header .nav.is-scrolled .nav__inner {
  max-width: none;
  min-height: 70px;
  margin: 0;
  padding: 0 clamp(18px, 5vw, 72px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.site-header .brand { gap: 10px; }
.site-header .brand__mark {
  width: 35px;
  height: 35px;
  border: 1px solid #17151b;
  border-radius: 8px;
  color: #fff;
  background: #17151b;
  box-shadow: none;
  font-size: 9px;
  letter-spacing: -.03em;
}
.site-header .brand__name {
  color: #17151b;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
}
.site-header .nav__links { gap: clamp(2px, .7vw, 10px); }
.site-header .nav__link {
  padding: 11px 12px;
  border-radius: 0;
  color: #5d5861;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.site-header .nav__link:hover,
.site-header .nav__link.is-active {
  color: #17151b;
  background: transparent;
  box-shadow: none;
}
.site-header .nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  display: block;
  height: 1px;
  background: #17151b;
}
.site-header .nav__lock {
  min-height: 42px;
  margin-left: clamp(4px, 1vw, 14px);
  padding: 0 19px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #17151b;
  font-size: 9px;
  letter-spacing: .1em;
  box-shadow: none;
}
.site-header .nav__lock:hover { color: #fff; background: #000; transform: translateY(-1px); }
.site-header + .cinema { padding-top: clamp(138px, 16vh, 174px); }

@media (max-width: 860px) {
  .site-announcement { height: 29px; justify-content: center; font-size: 8px; }
  .site-announcement span + span { display: none; }
  .site-header .nav__inner,
  .site-header .nav.is-scrolled .nav__inner { min-height: 62px; padding-inline: 14px; }
  .site-header .nav__toggle { display: block; }
  .site-header .nav__links {
    top: 0;
    gap: 22px;
    background: rgba(249,248,250,.98);
  }
  .site-header .nav__link { padding: 8px; font-size: 28px; letter-spacing: -.04em; }
  .site-header .nav__link.is-active::after { left: 8px; right: 8px; bottom: 2px; }
  .site-header .nav__lock { min-height: 46px; margin: 10px 0 0; padding-inline: 26px; }
  .site-header + .cinema { padding-top: 116px; }
}

/* Compact project story: brief, challenge, solution */
.project-essentials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(52px, 7vw, 96px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.project-essentials article {
  min-width: 0;
  padding: clamp(26px, 3vw, 44px);
}
.project-essentials article + article { border-left: 1px solid var(--line); }
.project-essentials p {
  margin: 22px 0 0;
  color: var(--text-dim);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.75;
}
.project-assets-section { padding-top: clamp(64px, 8vw, 112px); }

/* Two-page structure: a clear studio intro and a project-only showreel */
.home-single-screen {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
}
.home-about-hero {
  flex: 1;
  min-height: auto;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  padding-top: clamp(170px, 19vh, 220px);
  padding-bottom: clamp(88px, 10vh, 132px);
  text-align: center;
}
.home-single-screen .foot { margin-top: auto; }
.home-about-hero::after { display: none; }
.home-about-hero .lede {
  max-width: 72ch;
  margin: clamp(24px, 3vw, 42px) auto 0;
  line-height: 1.72;
}
.home-showreel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 3vw, 40px);
  padding: 15px 23px;
  border: 1px solid #17151b;
  border-radius: 999px;
  background: #17151b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: transform .3s var(--spring), background-color .3s ease, color .3s ease;
}
.home-showreel-cta span:last-child {
  display: inline-block;
  font-size: 15px;
  transition: transform .3s var(--spring);
}
.home-showreel-cta:hover {
  transform: translateY(-3px);
  background: transparent;
  color: #17151b;
}
.home-showreel-cta:hover span:last-child { transform: translate(3px, -3px); }
.interactive-quote {
  --pointer-x: 50%;
  --pointer-y: 50%;
  width: 100%;
}
.interactive-quote h1 {
  margin: 0;
  padding: .16em 0 .22em;
  color: transparent;
  background: radial-gradient(circle 32vw at var(--pointer-x) var(--pointer-y), #9b73d9 0%, #17151b 42%, #17151b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(52px, 6.7vw, 128px);
  font-weight: 300;
  letter-spacing: -.058em;
  line-height: 1.1;
  transition: background-position 180ms ease-out;
  animation: interactiveQuoteIn 900ms cubic-bezier(.2,.7,.2,1) both;
}
.interactive-quote h1 span {
  display: block;
  transition: opacity 320ms ease, background-position 700ms ease;
}
.interactive-quote h1 span:first-child {
  opacity: .46;
  font-size: .78em;
  letter-spacing: -.045em;
}
.interactive-quote h1 span:last-child {
  opacity: 1;
  font-weight: 430;
  background: linear-gradient(100deg, #17151b 4%, #6f4db0 30%, #dd86b4 50%, #6f4db0 70%, #17151b 96%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
}
.interactive-quote:hover h1 span:last-child {
  background-position: 100% 50%;
  animation: tasteHover 1.1s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes tasteHover {
  0% { background-position: 0% 50%; }
  55% { background-position: 112% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes interactiveQuoteIn {
  from { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.home-crew-section { padding-top: clamp(72px, 9vw, 132px); }
.home-crew-section .section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-bottom: clamp(42px, 5vw, 68px);
  text-align: center;
}
.home-crew-section .section__head > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-crew-section .section__head .h-section {
  max-width: 14ch;
  margin: 0;
  line-height: .98;
}
.home-crew-section .crew-section__intro {
  max-width: 34ch;
  margin: 18px auto 0;
  line-height: 1.55;
}
.home-contact-compact {
  display: grid;
  grid-template-columns: minmax(140px, .42fr) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding-block: clamp(40px, 6vw, 76px);
  border-top: 1px solid var(--line);
}
.home-contact-compact p { margin: 0; color: var(--text-dim); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.7; }
.home-contact-compact a { color: var(--text); border-bottom: 1px solid var(--line-strong); }
.showreel-hero {
  min-height: auto;
  padding-top: clamp(176px, 20vh, 228px);
  padding-bottom: clamp(96px, 11vh, 144px);
}
.showreel-hero::after { display: none; }
.works-section {
  padding-top: 0;
  padding-bottom: clamp(104px, 13vh, 172px);
}
.works-section .grid {
  column-gap: clamp(30px, 3.8vw, 64px);
  row-gap: clamp(72px, 9vw, 132px);
}
.works-section .card__body { padding-top: clamp(20px, 2vw, 30px); }
.cover-loading {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(125deg, rgba(244,238,246,.92), rgba(255,255,255,.72));
}
.color-mixer {
  min-height: clamp(260px, 38vh, 420px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 24px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.color-mixer__dots {
  position: relative;
  display: block;
  width: 136px;
  height: 58px;
}
.color-mixer__dots i {
  position: absolute;
  top: 5px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  opacity: .82;
  mix-blend-mode: multiply;
  filter: blur(.2px);
  animation: mixColor 1.25s cubic-bezier(.6,0,.4,1) infinite alternate;
}
.color-mixer__dots i:nth-child(1) { left: 0; background: #f3a6c6; }
.color-mixer__dots i:nth-child(2) { left: 44px; background: #ac91dd; animation-delay: -.42s; }
.color-mixer__dots i:nth-child(3) { left: 88px; background: #f1bb7f; animation-delay: -.84s; }
@keyframes mixColor {
  0% { transform: translateX(0) scale(.9); }
  50% { transform: translateX(18px) scale(1.08); }
  100% { transform: translateX(-18px) scale(.94); }
}
.project-route-loading { padding-top: clamp(130px, 17vh, 190px); }
.project-data-error { min-height: 260px; display: grid; place-content: center; color: var(--text-dim); }

@media (max-width: 760px) {
  .project-essentials { grid-template-columns: 1fr; }
  .project-essentials article + article {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .home-about-hero { min-height: auto; padding-top: 136px; padding-bottom: 76px; }
  .interactive-quote h1 { font-size: clamp(42px, 11.8vw, 68px); line-height: 1.12; }
  .home-contact-compact { grid-template-columns: 1fr; }
  .showreel-hero { padding-top: 140px; padding-bottom: 72px; }
  .works-section .grid { row-gap: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .interactive-quote h1 { animation: none; transform: none !important; }
  .interactive-quote h1 span { transition: none; }
}