/* Surmount Creatives: a screening room inside a gallery.
   Light gallery wall by default; .room is the dark screening room. One hue of
   red in two lightnesses (one per ground). Motion is transform/opacity only. */

:root {
  --wall: #E8E9EB;
  --sc-canvas: #E8E9EB;
  --sc-surface: #F4F4F5;
  --sc-ink: #131416;
  --sc-ink-soft: #4A4D54;
  --sc-accent: #9B0000;
  --sc-accent-ink: #FFFFFF;
  --line: color-mix(in oklab, var(--sc-ink) 16%, transparent);
  --shade: rgba(12, 13, 15, 0.68);
  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text: "Outfit", system-ui, sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --sc-shadow-color: 220 12% 30%;
  --dock-h: 0px;
  --r: 4px;
}
.room {
  --sc-canvas: #0F1012;
  --sc-surface: #18191C;
  --sc-ink: #ECEDEF;
  --sc-ink-soft: #A4A7AE;
  --sc-accent: #FF6B6B;
  --sc-accent-ink: #0F1012;
  --sc-shadow-color: 220 30% 2%;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  letter-spacing: 0.005em;
}
body { background: var(--wall); font-weight: 400; padding-bottom: var(--dock-h); }
.room a { color: inherit; }

/* ---------------------------------------------------------------- type */
.h1, .h2, .h3, .hero__h { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-tight); text-wrap: balance; margin: 0; }
.h1 { font-size: var(--sc-t-3xl); }
.h2 { font-size: var(--sc-t-2xl); }
.h3 { font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.lede { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; }
p { text-wrap: pretty; }
.wrap { width: min(100% - 2 * var(--sc-gutter), var(--sc-maxw)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--sc-ink); color: var(--wall); padding: .6rem 1rem; border-radius: var(--r); }
.skip:focus { top: 1rem; }
mark.ph { background: #FFE14D; color: #1A1600; padding: 0 .25em; border-radius: 3px; font-weight: 500; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: .65rem 1.2rem; border-radius: var(--r); font-weight: 600; font-size: var(--sc-t-sm); text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
.btn:active { transform: scale(0.97); }
.btn--red { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--line { border-color: currentColor; color: var(--sc-ink); background: transparent; }
.btn--lg { min-height: 52px; padding: .8rem 1.5rem; font-size: var(--sc-t-base); }
.btn--sm { min-height: 40px; padding: .45rem .9rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--red:hover { background: color-mix(in oklab, var(--sc-accent) 84%, var(--sc-ink)); }
  .btn--line:hover { background: var(--sc-ink); color: var(--sc-canvas); }
}
.arrow { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--sc-accent); padding-bottom: 2px; }
.arrow::after { content: " \2192"; }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------- header */
.top { display: flex; align-items: center; gap: var(--sc-5); padding: var(--sc-4) var(--sc-gutter); }
.top__logo img { width: 176px; height: auto; }
.top__nav { margin-left: auto; }
.top__nav ul { display: flex; gap: var(--sc-5); list-style: none; margin: 0; padding: 0; }
.top__nav a { text-decoration: none; font-weight: 500; padding: .4rem 0; border-bottom: 1.5px solid transparent; }
.top__nav a[aria-current="page"], .top__nav a:hover { border-color: var(--sc-accent); }
@media (max-width: 860px) { .top__nav, .top__cta { display: none; } .top__logo img { width: 150px; } }

/* ---------------------------------------------------------------- frame + reframe */
.frame { position: relative; aspect-ratio: var(--ar); width: 100%; }
.frame__btn { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: #1A1B1E; border-radius: var(--r); overflow: hidden; cursor: pointer; box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / .18), 0 12px 32px hsl(var(--sc-shadow-color) / .22); }
div.frame__btn { cursor: default; }
.frame__poster, .frame__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.frame__loop { opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.frame.is-live .frame__loop { opacity: 1; }
.crop { position: absolute; inset: 0; pointer-events: none; --hw: 50cqw; --hh: 50cqh; container-type: size; }
.crop__win { position: absolute; inset: 0; transform: scale(var(--sx, 1), var(--sy, 1)); box-shadow: 0 0 0 200vmax var(--shade); transition: transform 560ms var(--sc-ease-out); }
.crop__c { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #fff; opacity: .9; transition: transform 560ms var(--sc-ease-out); filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.crop__c--tl { clip-path: polygon(0 0, 100% 0, 100% 38%, 38% 38%, 38% 100%, 0 100%); transform: translate(calc(var(--hw) * -1 + 15px), calc(var(--hh) * -1 + 15px)); }
.crop__c--tr { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 62% 38%, 0 38%); transform: translate(calc(var(--hw) - 15px), calc(var(--hh) * -1 + 15px)); }
.crop__c--bl { clip-path: polygon(0 0, 38% 0, 38% 62%, 100% 62%, 100% 100%, 0 100%); transform: translate(calc(var(--hw) * -1 + 15px), calc(var(--hh) - 15px)); }
.crop__c--br { clip-path: polygon(62% 0, 100% 0, 100% 100%, 0 100%, 0 62%, 62% 62%); transform: translate(calc(var(--hw) - 15px), calc(var(--hh) - 15px)); }
.frame__play { position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(15,16,18,.72); display: grid; place-items: center; transition: background-color 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out); }
.frame__play svg { width: 20px; height: 20px; fill: #fff; }
@media (hover: hover) and (pointer: fine) { .frame__btn:hover .frame__play { background: #9B0000; transform: scale(1.06); } }
.frame__btn:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }
.frame__note { font-size: var(--sc-t-sm); margin: var(--sc-3) 0 0; }
.pending { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: .2rem; padding: 8%; background: repeating-linear-gradient(135deg, #1A1B1E 0 14px, #202125 14px 28px); color: #ECEDEF; }
.pending__k { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: .08em; background: #FFE14D; color: #1A1600; padding: .15rem .45rem; border-radius: 3px; }
.pending__c { font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: var(--sc-track-snug); line-height: 1.1; margin-top: .4rem; }
.pending__p { color: #A4A7AE; }

/* ---------------------------------------------------------------- slate label */
.slate { margin: var(--sc-4) 0 0; display: grid; grid-template-columns: max-content 1fr; font-size: var(--sc-t-sm); border-top: 1.5px solid var(--sc-ink); }
.slate > div { display: contents; }
.slate dt, .slate dd { padding: .42rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.slate dt { font-family: var(--sc-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sc-ink-soft); padding-right: var(--sc-4); padding-top: .55rem; }
.slate__no dd { color: var(--sc-accent); font-family: var(--sc-font-mono); font-weight: 500; }
.slate ul { margin: 0; padding-left: 1.1em; }
.slate--mini { font-size: .8rem; }

/* ---------------------------------------------------------------- hero (object No. 01) */
.hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: var(--sc-7); align-items: center; padding: var(--sc-5) var(--sc-gutter) var(--sc-9); min-height: calc(100svh - 84px); }
.hero__h { font-size: clamp(3rem, 1.6rem + 4.6vw, 6rem); line-height: .98; }
.hero__sub { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 30ch; margin: var(--sc-5) 0 var(--sc-6); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin: 0; }
.hero__stack { position: relative; padding-bottom: 12%; }
.hero__wide { width: 88%; margin-left: auto; will-change: transform; }
.hero__wide .slate { width: 62%; margin-left: auto; }
.hero__tall { position: absolute; left: 0; bottom: 0; width: 27%; will-change: transform; }
.hero__tall .frame__btn { box-shadow: 0 4px 8px hsl(var(--sc-shadow-color) / .25), 0 24px 48px hsl(var(--sc-shadow-color) / .35); }
.hero__tall .slate { background: var(--wall); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: var(--sc-6); padding-top: var(--sc-3); padding-bottom: var(--sc-8); }
  .hero__h { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .hero__sub { margin: var(--sc-4) 0 var(--sc-5); }
  .hero__wide { width: 100%; }
  .hero__wide .slate { width: 58%; }
  .hero__stack { padding-bottom: 0; }
  .hero__tall { width: 36%; bottom: auto; top: 46%; left: -2%; }
}

/* ---------------------------------------------------------------- reel wall (pan) */
.reels__stage { display: flex; align-items: center; overflow: hidden; }
.reels__rail { gap: clamp(1.25rem, 3vw, 3rem); padding: 0 var(--sc-gutter); align-items: flex-start; }
.reels__head, .reels__end { flex: 0 0 clamp(16rem, 26vw, 24rem); align-self: center; }
.reels__head p, .reels__end p { color: var(--sc-ink-soft); }
.reel { flex: 0 0 auto; width: calc(min(60svh, 640px) * 9 / 16); margin: 0; }
.reel .slate { font-size: .8rem; }
@media (max-width: 700px) { .reel { width: 62vw; } .reels__head, .reels__end { flex-basis: 72vw; } }

/* ---------------------------------------------------------------- hush */
.hush { padding: 34svh var(--sc-gutter); text-align: center; }
.hush__line { margin: 0 auto; max-width: 30ch; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }

/* ---------------------------------------------------------------- reframe (peak) */
.rf { height: 340svh; position: relative; }
.rf__stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--sc-7); align-items: center; padding: 0 var(--sc-gutter); }
.rf__steps { list-style: none; padding: 0; margin: var(--sc-6) 0 0; border-top: 1px solid var(--line); }
.rf__steps button { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0 var(--sc-4); width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: var(--sc-3) 0; cursor: pointer; color: var(--sc-ink-soft); transition: color 200ms var(--sc-ease-out); }
.rf__ar { font-family: var(--sc-font-mono); font-size: .8rem; grid-row: span 2; padding-top: .25rem; }
.rf__lbl { font-weight: 600; font-size: var(--sc-t-lg); }
.rf__line { font-size: var(--sc-t-sm); }
.rf__steps button[aria-pressed="true"] { color: var(--sc-ink); }
.rf__steps button[aria-pressed="true"] .rf__ar { color: var(--sc-accent); }
.rf__handoff { margin: var(--sc-5) 0 0; color: var(--sc-accent); font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--sc-ease-out), transform 400ms var(--sc-ease-out); }
.rf.is-handoff .rf__handoff { opacity: 1; transform: none; }
.rf__tag { position: absolute; right: 12px; top: 12px; font-family: var(--sc-font-mono); font-size: .8rem; color: #fff; background: rgba(15,16,18,.72); padding: .2rem .5rem; border-radius: 3px; }
.frame--rf .frame__btn { border-radius: 2px; }
@media (max-width: 860px) {
  .rf { height: 300svh; }
  .rf__stage { grid-template-columns: 1fr; align-content: center; gap: var(--sc-5); }
  .rf__frame { order: -1; }
  .rf__steps { margin-top: var(--sc-4); }
  .rf__steps button { padding: .45rem 0; }
  .rf__line { display: none; }
  .rf__steps button[aria-pressed="true"] .rf__line { display: block; }
  .rf__lbl { font-size: var(--sc-t-base); }
}
@media (prefers-reduced-motion: reduce) {
  .rf { height: auto; }
  .rf__stage { position: static; height: auto; padding-block: var(--sc-section); }
  .rf__handoff { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- commissions */
.cms { padding: var(--sc-section) 0 0; }
.cm:last-child { margin-bottom: var(--sc-7); }
.cm { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sc-7); align-items: end; width: min(100% - 2 * var(--sc-gutter), var(--sc-maxw)); margin: 0 auto var(--sc-9); }
.cm--trail .cm__media { order: 2; }
.cm__media .frame--v { width: min(62%, 380px); margin-inline: auto; }
.cm__label .h3 a { text-decoration: none; }
.cm__sum { color: var(--sc-ink-soft); margin: var(--sc-4) 0; }
@media (max-width: 860px) { .cm { grid-template-columns: 1fr; gap: var(--sc-5); } .cm--trail .cm__media { order: 0; } }

/* ---------------------------------------------------------------- ledger */
.ledger { padding: var(--sc-7) 0 var(--sc-section); }
.ledger__list { list-style: none; padding: 0; margin: var(--sc-6) 0 0; border-top: 1.5px solid var(--sc-ink); }
.ledger__list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sc-5); padding: var(--sc-4) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.ledger__n { font-weight: 600; font-size: var(--sc-t-lg); }
.ledger__s { color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) { .ledger__list a:hover .ledger__n { color: var(--sc-accent); } }
.ledger__note { margin-top: var(--sc-5); color: var(--sc-ink-soft); }
@media (max-width: 700px) { .ledger__list a { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------------------------------------------------------------- group strip */
.group { padding: var(--sc-7) 0; border-bottom: 1px solid var(--line); }
.group__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--sc-4) var(--sc-7); align-items: center; }
.group__by { display: flex; align-items: center; gap: var(--sc-3); font-size: var(--sc-t-xl); font-weight: 500; margin: 0; }
.group__by b { color: var(--sc-accent); font-weight: 600; }
.group__mark { width: 40px; height: 40px; }
.group__line { color: var(--sc-ink-soft); margin: 0; }
.group__line a { color: var(--sc-ink); }
.group__logos { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sc-5) var(--sc-7); align-items: center; padding: 0; margin: var(--sc-4) 0 0; }
.group__logos img { height: 34px; width: auto; opacity: .88; transition: opacity 160ms var(--sc-ease-out); }
.group__logos a { display: block; padding: 6px; border-radius: var(--r); }
.group__logos a[href*="yison"] { background: #fff; }
.group__logos a:hover img { opacity: 1; }
@media (max-width: 860px) { .group__in { grid-template-columns: 1fr; } .group__logos img { height: 28px; } }

/* ---------------------------------------------------------------- close slate */
.close { padding: var(--sc-section) 0; position: relative; }
.close::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(115deg, #ECEDEF 0 28px, #0F1012 28px 56px); }
.close__in { max-width: 58rem; }
.slate--board { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--sc-ink); margin-top: var(--sc-6); }
.slate--board > div { display: block; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: var(--sc-3) var(--sc-4); }
.slate--board > div:nth-child(3n) { border-right: 0; }
.slate--board dt, .slate--board dd { border: 0; padding: 0; }
.slate--board dd { font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: var(--sc-track-snug); margin-top: .25rem; }
.close__line { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); margin: var(--sc-6) 0; }
.close__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5); margin: 0; }
@media (max-width: 700px) { .slate--board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slate--board > div:nth-child(3n) { border-right: 1px solid var(--line); } .slate--board > div:nth-child(2n) { border-right: 0; } .slate--board dd { font-size: var(--sc-t-lg); } }

/* ---------------------------------------------------------------- footer */
.foot { padding: var(--sc-7) 0 var(--sc-6); font-size: var(--sc-t-sm); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: var(--sc-6); }
.foot__logo { width: 190px; height: auto; }
.foot__tag { color: var(--sc-ink-soft); }
.foot__social { display: flex; gap: var(--sc-4); }
.foot__h { font-family: var(--sc-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sc-ink-soft); font-weight: 500; margin: 0 0 var(--sc-3); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.foot a { text-decoration: none; } .foot a:hover { text-decoration: underline; }
.foot__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-7); padding-top: var(--sc-4); border-top: 1px solid var(--line); color: var(--sc-ink-soft); }
.foot__legal p { margin: 0; display: flex; gap: var(--sc-4); }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- fixed chrome: index + dock */
.idx { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 50; max-height: 72vh; overflow: auto; background: color-mix(in oklab, #F4F4F5 94%, transparent); border-radius: var(--r); padding: 6px; box-shadow: 0 2px 10px rgba(20,22,26,.14); scrollbar-width: none; }
.idx ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.idx a { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; text-decoration: none; padding: 4px 6px; border-radius: 3px; color: #4A4D54; font-size: .78rem; }
.idx__no { font-family: var(--sc-font-mono); font-size: .7rem; }
.idx__name { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: opacity 160ms var(--sc-ease-out); }
.idx:hover .idx__name, .idx:focus-within .idx__name { max-width: 15rem; opacity: 1; }
.idx a.is-on { color: #131416; background: #fff; box-shadow: inset 2px 0 0 #9B0000; }
.idx a.is-on .idx__no { color: #9B0000; }
@media (max-width: 1099px) { .idx { display: none; } }

.dock { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 8px; background: #131416; color: #ECEDEF; padding: 6px; border-radius: 6px; box-shadow: 0 6px 24px rgba(10,10,12,.28); }
.reframe-ctl { display: flex; align-items: center; gap: 2px; }
.reframe-ctl__k { font-family: var(--sc-font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #A4A7AE; padding: 0 6px 0 4px; }
.reframe-ctl button { font-family: var(--sc-font-mono); font-size: .74rem; min-height: 36px; min-width: 44px; padding: 0 .55rem; border: 0; border-radius: 4px; background: transparent; color: #ECEDEF; cursor: pointer; transition: background-color 160ms var(--sc-ease-out); }
.reframe-ctl button[aria-checked="true"] { background: #FF6B6B; color: #0F1012; }
@media (hover: hover) and (pointer: fine) { .reframe-ctl button:hover:not([aria-checked="true"]) { background: #2A2C31; } }
.dock__index, .dock__msg { font-size: .8rem; font-weight: 600; min-height: 36px; padding: 0 .8rem; border-radius: 4px; display: inline-flex; align-items: center; text-decoration: none; border: 1px solid #3A3C42; background: transparent; color: #ECEDEF; cursor: pointer; }
.dock__index { display: none; }
.dock.is-pulse .reframe-ctl { animation: pulse 1.2s var(--sc-ease-out) 2; }
@keyframes pulse { 50% { transform: scale(1.04); } }
@media (max-width: 1099px) {
  :root { --dock-h: 64px; }
  .dock { left: 0; right: 0; bottom: 0; border-radius: 0; justify-content: space-between; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .dock__index { display: inline-flex; }
  .dock__msg { display: none; }
  .reframe-ctl button { min-width: 40px; padding: 0 .4rem; }
}
@media (max-width: 380px) { .reframe-ctl__k { display: none; } }

.drawer { position: fixed; inset: 0; z-index: 120; overflow: auto; }
.drawer__in { padding: var(--sc-6) var(--sc-gutter) calc(var(--sc-8) + env(safe-area-inset-bottom)); }
.drawer__close { float: right; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); background: none; color: inherit; border-radius: var(--r); cursor: pointer; }
.drawer__pages { list-style: none; padding: 0; margin: var(--sc-8) 0 var(--sc-6); display: grid; gap: var(--sc-2); font-size: var(--sc-t-2xl); font-weight: 600; letter-spacing: var(--sc-track-tight); }
.drawer__pages a { text-decoration: none; }
.drawer__pages a[aria-current="page"] { color: var(--sc-accent); }
.drawer__k { font-family: var(--sc-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sc-ink-soft); }
.drawer__objs { list-style: none; padding: 0; margin: 0 0 var(--sc-6); display: grid; gap: 2px; }
.drawer__objs a { display: flex; gap: var(--sc-3); padding: .55rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.drawer__objs .idx__no { color: var(--sc-accent); }
.drawer__cta { display: flex; flex-wrap: wrap; gap: var(--sc-4); align-items: center; }

/* ---------------------------------------------------------------- page heads, work index */
.phead { padding: var(--sc-7) 0 var(--sc-6); }
.phead .lede { margin-top: var(--sc-4); }
.filters { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin-top: var(--sc-5); }
.filters button { min-height: 40px; padding: 0 .9rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--sc-surface); font-weight: 500; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--sc-ink); color: var(--wall); border-color: var(--sc-ink); }
.wks { list-style: none; padding: 0; margin: 0 0 var(--sc-section); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--sc-8) var(--sc-6); align-items: start; }
.wk .frame--v { width: 64%; }
.wk__h { font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: var(--sc-track-snug); margin: var(--sc-4) 0 0; }
.wk__h a { text-decoration: none; }
.wk__sum { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.wk[hidden] { display: none; }

/* ---------------------------------------------------------------- case */
.crumb { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin: var(--sc-4) 0 var(--sc-5); }
.case__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sc-7); align-items: start; }
.case__grid--v { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.case__proj { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); margin: var(--sc-2) 0 0; }
.case__body { max-width: 62ch; margin-top: var(--sc-8); margin-bottom: var(--sc-8); font-size: var(--sc-t-lg); }
.case__more { margin-bottom: var(--sc-8); }
.case__films { list-style: none; padding: 0; margin: var(--sc-5) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--sc-6); align-items: start; }
.case__next { margin-bottom: var(--sc-8); }
.case__next a { display: grid; gap: .2rem; text-decoration: none; padding: var(--sc-5) 0; border-top: 1.5px solid var(--sc-ink); border-bottom: 1px solid var(--line); }
.case__next-k { font-family: var(--sc-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sc-ink-soft); }
.case__next-c { font-size: var(--sc-t-2xl); font-weight: 600; letter-spacing: var(--sc-track-tight); }
.case__next a:hover .case__next-c { color: var(--sc-accent); }
@media (max-width: 860px) { .case__grid, .case__grid--v { grid-template-columns: 1fr; gap: var(--sc-5); } .case__grid--v .case__media { width: 78%; } }

/* ---------------------------------------------------------------- services */
.svcs { display: grid; gap: var(--sc-9); padding-bottom: var(--sc-8); }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--sc-7); padding-top: var(--sc-5); border-top: 1.5px solid var(--sc-ink); scroll-margin-top: var(--sc-5); }
.svc--wide { grid-template-columns: 1fr; }
.svc__no { font-family: var(--sc-font-mono); font-size: .75rem; color: var(--sc-accent); margin: 0 0 var(--sc-2); }
.svc__short { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); }
.svc__pts { margin: 0; padding-left: 1.1em; display: grid; gap: .5rem; font-size: var(--sc-t-lg); }
.proc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6); }
.proc h4, .tier__h { font-size: var(--sc-t-lg); margin: 0 0 var(--sc-2); font-weight: 600; }
.proc ul, .tier ul { margin: 0; padding-left: 1.1em; display: grid; gap: .35rem; }
.svc__intro { max-width: 62ch; color: var(--sc-ink-soft); }
.tiers { list-style: none; padding: 0; margin: var(--sc-5) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5); }
.tier { display: flex; flex-direction: column; gap: var(--sc-3); background: var(--sc-surface); border-top: 3px solid var(--sc-ink); padding: var(--sc-5); font-size: var(--sc-t-sm); }
.tier ul { flex: 1; }
.tier__for { font-family: var(--sc-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-ink-soft); margin: 0; }
.tier__price { font-weight: 600; margin: 0; }
.tier .btn { align-self: start; }
.steps { padding-bottom: var(--sc-section); }
.steps__list { list-style: none; counter-reset: s; padding: 0; margin: var(--sc-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-6); }
.steps__list li { counter-increment: s; border-top: 1px solid var(--line); padding-top: var(--sc-4); }
.steps__list h3::before { content: counter(s) ". "; color: var(--sc-accent); }
.steps__list h3 { font-size: var(--sc-t-lg); margin: 0 0 .3rem; }
.steps__list p { margin: 0; color: var(--sc-ink-soft); }
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; gap: var(--sc-4); } .proc, .steps__list { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .tiers { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- studio */
.st { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sc-8); align-items: start; padding-bottom: var(--sc-section); font-size: var(--sc-t-lg); }
.st__copy p:first-child { margin-top: 0; }
.st__fig { margin: 0; width: min(100%, 320px); justify-self: end; }
.cut { padding: var(--sc-section) 0; }
.cut__list { list-style: none; padding: 0; margin: var(--sc-6) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sc-6); }
.cut__list h3 { font-size: var(--sc-t-lg); margin: 0 0 .3rem; }
.cut__list p { margin: 0; color: var(--sc-ink-soft); }
.kit, .team, .why { padding-top: var(--sc-section); }
.slate--kit { max-width: 52rem; font-size: var(--sc-t-base); }
.kit__note, .team__note, .why__src { color: var(--sc-ink-soft); }
.team__list { list-style: none; padding: 0; margin: var(--sc-6) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--sc-6); }
.team__ph { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--sc-surface); border-radius: var(--r); }
.team__n { font-weight: 600; margin: var(--sc-3) 0 0; }
.team__r { margin: .2rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.why { padding-bottom: var(--sc-section); }
.why__list { list-style: none; padding: 0; margin: var(--sc-5) 0 0; display: grid; gap: 0; border-top: 1.5px solid var(--sc-ink); font-size: var(--sc-t-lg); }
.why__list li { padding: var(--sc-3) 0; border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .st { grid-template-columns: 1fr; } .st__fig { justify-self: start; width: 70%; } }

/* ---------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sc-8); padding: var(--sc-7) 0 var(--sc-section); }
.slate--contact { margin-top: var(--sc-6); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); }
.f { display: grid; gap: .35rem; min-width: 0; }
.f--full, .f--formats { grid-column: 1 / -1; }
.f label, .f legend { font-weight: 500; font-size: var(--sc-t-sm); }
.f input:not([type="checkbox"]), .f select, .f textarea { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1.5px solid color-mix(in oklab, var(--sc-ink) 34%, transparent); border-radius: var(--r); background: #fff; font-size: 16px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: var(--sc-accent); }
.f [aria-invalid="true"] { border-color: #9B0000; }
.f small { color: var(--sc-ink-soft); }
.f--formats { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); }
.f--formats legend { margin-bottom: .4rem; width: 100%; }
.chk { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; }
.chk input { width: 20px; height: 20px; }
.hp { position: absolute; left: -9999px; }
.form__submit { margin-top: var(--sc-6); }
.form__status { min-height: 1.6em; margin-top: var(--sc-4); }
.form__status.is-err { color: #9B0000; } .form__status.is-ok { color: #1F5F2E; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: var(--sc-6); } .form__grid { grid-template-columns: 1fr; } }

.nf { min-height: 60svh; }

/* ---------------------------------------------------------------- modal + cookie */
.modal { position: fixed; inset: 0; z-index: 150; background: rgba(8,9,10,.9); display: grid; place-items: center; padding: var(--sc-5); }
.modal[hidden] { display: none; }
.modal__box { position: relative; width: min(100%, 1100px); }
.modal.is-portrait .modal__box { width: min(100%, calc(80svh * 9 / 16)); }
.modal video { width: 100%; max-height: 80svh; background: #000; border-radius: var(--r); }
.modal__close { position: absolute; right: 0; top: -52px; min-height: 44px; padding: 0 1rem; background: #ECEDEF; color: #131416; border: 0; border-radius: var(--r); font-weight: 600; cursor: pointer; }
.modal__t { color: #ECEDEF; margin: var(--sc-3) 0 0; font-weight: 500; }
.cookie { position: fixed; right: 16px; bottom: calc(16px + var(--dock-h)); z-index: 90; max-width: 26rem; background: #fff; padding: var(--sc-4); border-radius: var(--r); box-shadow: 0 8px 30px rgba(10,10,12,.2); font-size: var(--sc-t-sm); }
.cookie__btns { display: flex; gap: var(--sc-2); }

@media (prefers-reduced-motion: reduce) {
  .crop__win, .crop__c { transition: none; }
  .hero__wide, .hero__tall { transform: none !important; }
}
/* Reduced motion: the reel wall is a plain horizontal scroller, not a pinned act. */
@media (prefers-reduced-motion: reduce) {
  .reels[data-sc-act="pan"] { height: auto !important; }
  .reels .reels__stage { position: relative !important; height: auto !important; padding-block: var(--sc-7); }
}

/* ---------------------------------------------------------------- categories, chips */
.filters__n { font-family: var(--sc-font-mono); font-size: .72rem; color: var(--sc-ink-soft); margin-left: .25rem; }
.filters button[aria-pressed="true"] .filters__n { color: #FF6B6B; }
.filters button:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 2px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: var(--sc-3) 0 0; }
.chips a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--sc-surface); font-size: .78rem; font-weight: 500; text-decoration: none; color: var(--sc-ink-soft); transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out); }
.chips a::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--sc-accent); margin-right: .4rem; }
@media (hover: hover) and (pointer: fine) { .chips a:hover { color: var(--sc-ink); border-color: var(--sc-ink); } }
.chips a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.chips--case { margin-top: var(--sc-4); }
.chips--case a { min-height: 34px; font-size: .84rem; }
.idx li[hidden] { display: none; }

.cats { padding: var(--sc-section) 0 var(--sc-7); }
.cats__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sc-3) var(--sc-6); border-bottom: 1.5px solid var(--sc-ink); padding-bottom: var(--sc-4); }
.cats__line { margin: 0; color: var(--sc-ink-soft); }
.cats__grid { list-style: none; padding: 0; margin: var(--sc-6) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-5); }
@media (max-width: 1000px) { .cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat { display: grid; grid-template-columns: 1fr; gap: .2rem; text-decoration: none; }
.cat__media { grid-column: 1 / -1; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: #1A1B1E; margin-bottom: var(--sc-3); }
.cat__img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--sc-ease-out); }
.cat__l { font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.2; }
.cat__n { font-family: var(--sc-font-mono); font-size: .74rem; color: var(--sc-accent); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .cat:hover .cat__img { transform: scale(1.03); } .cat:hover .cat__l { color: var(--sc-accent); } }
.cat:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 4px; border-radius: var(--r); }
@media (max-width: 560px) { .cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4) var(--sc-3); } .cat__l { font-size: var(--sc-t-base); } }

/* ---------------------------------------------------------------- photo frames + galleries */
.frame__count { position: absolute; left: 12px; bottom: 12px; font-family: var(--sc-font-mono); font-size: .74rem; color: #fff; background: rgba(15,16,18,.72); padding: .3rem .55rem; border-radius: 3px; }
@media (hover: hover) and (pointer: fine) { .frame--photo .frame__btn:hover .frame__count { background: #9B0000; } }
.case__media > .slate { margin-top: var(--sc-4); }
.case__gals { margin-bottom: var(--sc-8); }
.case__gals > .h2 { border-top: 1.5px solid var(--sc-ink); padding-top: var(--sc-5); }
.gal { margin-top: var(--sc-6); }
.gal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sc-2) var(--sc-5); margin-bottom: var(--sc-4); }
.gal__meta { margin: 0; font-family: var(--sc-font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-ink-soft); }
.gal__grid { list-style: none; padding: 0; margin: 0; columns: 4 14rem; column-gap: var(--sc-4); }
.gal__grid li { break-inside: avoid; margin-bottom: var(--sc-4); aspect-ratio: var(--ar); }
.gal__btn, .psets__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #1A1B1E; border-radius: var(--r); overflow: hidden; cursor: zoom-in; }
.gal__btn img, .psets__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--sc-ease-out), opacity 300ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .gal__btn:hover img, .psets__btn:hover img { transform: scale(1.025); } }
.gal__btn:focus-visible, .psets__btn:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }
@media (max-width: 560px) { .gal__grid { columns: 2; column-gap: var(--sc-3); } .gal__grid li { margin-bottom: var(--sc-3); } }
.psets { list-style: none; padding: 0; margin: var(--sc-6) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--sc-5) var(--sc-4); }
.psets__btn { aspect-ratio: 4 / 3; }
.psets__t { font-weight: 600; margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); line-height: 1.25; }
.psets__m { margin: .15rem 0 0; font-size: .78rem; color: var(--sc-ink-soft); }
@media (max-width: 560px) { .psets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- lightbox */
.lb { position: fixed; inset: 0; z-index: 160; background: rgba(8,9,10,.97); display: grid; place-items: center; padding: 64px 72px 56px; touch-action: pan-y; }
.lb[hidden] { display: none; }
.lb__fig { margin: 0; display: grid; justify-items: center; gap: var(--sc-3); max-width: 100%; max-height: 100%; }
.lb__img { max-width: 100%; max-height: calc(100svh - 160px); width: auto; height: auto; object-fit: contain; border-radius: 2px; background: #111; }
.lb__cap { color: #ECEDEF; font-size: var(--sc-t-sm); max-width: 70ch; text-align: center; }
.lb__n { font-family: var(--sc-font-mono); font-size: .74rem; color: #A4A7AE; margin-left: .5rem; white-space: nowrap; }
.lb__btn { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 1px solid #3A3C42; background: rgba(15,16,18,.8); display: grid; place-items: center; cursor: pointer; transition: background-color 160ms var(--sc-ease-out); }
.lb__btn svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; }
.lb__prev { left: 14px; } .lb__next { right: 14px; }
.lb__btn[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .lb__btn:hover { background: #9B0000; } }
.lb__close { position: absolute; right: 14px; top: 12px; min-height: 44px; padding: 0 1rem; background: #ECEDEF; color: #131416; border: 0; border-radius: var(--r); font-weight: 600; cursor: pointer; }
.lb__btn:focus-visible, .lb__close:focus-visible { outline: 3px solid #FF6B6B; outline-offset: 3px; }
@media (max-width: 700px) {
  .lb { padding: 64px 8px 84px; }
  .lb__btn { top: auto; bottom: 18px; margin-top: 0; }
  .lb__prev { left: calc(50% - 60px); } .lb__next { right: calc(50% - 60px); }
  .lb__img { max-height: calc(100svh - 210px); }
}