/* Scroll chapters and a softer, more physical finish. */
.nav-liquid i { background: radial-gradient(ellipse at 35% 18%,var(--frost),color-mix(in srgb,var(--mist) 30%,var(--frost)) 25%,color-mix(in srgb,var(--mist) 70%,var(--frost)) 65%,color-mix(in srgb,var(--storm) 5%,var(--mist))); }
.nav-liquid { filter: url(#nav-merge) drop-shadow(0 1px 2px color-mix(in srgb,var(--mist) 18.0392%,transparent)); }
.nav-liquid::after { display: none; }
:is(.studio-home,.service-page) .contact__bottom { border-top: 0; }
.studio-home .about {
  border-top: 0;
  background: var(--editorial-fade);
}
.studio-home .about__intro h2 { color: var(--frost); }
.studio-home .about__intro p { color: color-mix(in srgb,var(--mist) 40%,var(--frost)); }
.studio-home .work-player .work-card {
  display: flex; flex-direction: column; padding: 8px;
  width: clamp(280px,30vw,460px); min-width: clamp(280px,30vw,460px);
  height: clamp(252px,23.1vw,348px); background: color-mix(in srgb,var(--mist) 15%,var(--frost)); gap: 8px; align-self: stretch;
}
.studio-home .work-player .work-card__art {
  position: relative; inset: auto; display: block; flex: 1; min-height: 0;
  width: 100%; height: auto; background: color-mix(in srgb,var(--mist) 15%,var(--frost));
}
.studio-home .work-player .work-card__art img {
  position: static; inset: auto; display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: top center;
  transform: none!important; border-radius: 8px;
}
.studio-home .work-player .work-card .work-card__bottom {
  position: relative; overflow: hidden; flex: none; min-height: 112px;
  background: linear-gradient(130deg,var(--storm),color-mix(in srgb,var(--ink) 40%,var(--storm)))!important;
  border-color: color-mix(in srgb,var(--mist) 36.0784%,transparent); box-shadow: inset 0 1px color-mix(in srgb,var(--mist) 25.098%,transparent);
}
.work-player .work-card__source { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 4; }
.work-card__bottom::after {
  content: ''; pointer-events: none; position: absolute; inset: -50%;
  background: linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--mist) 36.0784%,transparent) 48%,color-mix(in srgb,var(--coral) 16.4706%,transparent) 54%,transparent 66%);
  transform: translateX(-65%); transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.work-card:is(:hover,:focus-visible) .work-card__bottom::after { transform: translateX(65%); }
.work-player :is(.work-player__button,.work-player__toggle) {
  --glint-x: 50%; --glint-y: 35%; touch-action: manipulation;
  transition: transform 170ms ease,box-shadow 170ms ease,filter 170ms ease;
}
.work-player :is(.work-player__button,.work-player__toggle)::after {
  content: ''; pointer-events: none; position: absolute; inset: 3px; border-radius: 50%;
  border: 1px solid color-mix(in srgb,color-mix(in srgb,var(--mist) 35%,var(--frost)) 41.9608%,transparent); background: radial-gradient(ellipse at var(--glint-x) var(--glint-y),color-mix(in srgb,var(--white) 31.3725%,transparent),transparent 68%);
}
.work-player :is(.work-player__button,.work-player__toggle) > span { position: relative; z-index: 2; }
.work-player :is(.work-player__button,.work-player__toggle):not(:disabled):is(:hover,:focus-visible) {
  transform: translateY(2px) scale(.987)!important;
  box-shadow: inset 0 5px 9px color-mix(in srgb,var(--ink) 60%,transparent),inset 0 -2px 3px color-mix(in srgb,color-mix(in srgb,var(--mist) 65%,var(--frost)) 46.6667%,transparent),0 1px 2px color-mix(in srgb,var(--ink) 40%,transparent);
}
.work-player :is(.work-player__button,.work-player__toggle):not(:disabled):is(:active,.is-fully-pressed) {
  transform: translateY(5px) scale(.968)!important;
  background: radial-gradient(circle at 50% 90%,color-mix(in srgb,var(--mist) 20%,transparent),transparent 60%),linear-gradient(color-mix(in srgb,var(--ink) 65%,var(--storm)),color-mix(in srgb,var(--storm) 90%,var(--mist)));
  box-shadow: inset 0 8px 14px color-mix(in srgb,var(--ink) 80%,transparent),inset 0 -3px 6px color-mix(in srgb,var(--mist) 33.3333%,transparent),0 1px 1px color-mix(in srgb,var(--ink) 40%,transparent);
}
.work-player :is(.work-player__button,.work-player__toggle):is(:hover,.is-fully-pressed)::after { opacity: .35; }
.process-scroll { position: relative; height: 240svh; background: var(--frost); }
.process-sticky { position: sticky; top: 76px; min-height: calc(100svh - 76px); padding: clamp(35px,5vw,80px) var(--page-edge); display: grid; align-items: center; }
.process-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(25px,5vw,90px); width: min(1660px,100%); margin: auto; align-items: center; }
.process-copy .section-title { font-size: clamp(36px,4.5vw,75px); }
.process-copy .section-title span { color: var(--coral); }
.process-lead { max-width: 45ch; color: color-mix(in srgb,var(--storm) 95%,var(--mist)); line-height: 1.65; margin: 24px 0; }
.process-tabs { display: flex; gap: 8px; margin-block: 24px; }
.process-tabs button { min-width: 48px; min-height: 44px; border: 1px solid var(--mist); border-radius: 24px; background: transparent; color: var(--storm); font: 700 13px var(--body),sans-serif; cursor: pointer; }
.process-tabs button[aria-current] { background: var(--storm); color: var(--white); }
.process-panels { position: relative; min-height: 250px; }
.process-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity .65s ease,transform .75s cubic-bezier(.16,1,.3,1),visibility .65s; }
.process-panel.is-active { opacity: 1; visibility: visible; transform: none; }
.process-panel h3 { margin: 20px 0 14px; font: 800 clamp(30px,4vw,64px)/1.08 var(--display),sans-serif; letter-spacing: -.045em; color: var(--ink); }
.process-panel p { max-width: 42ch; font-size: clamp(15px,1.3vw,20px); line-height: 1.65; color: color-mix(in srgb,var(--storm) 95%,var(--mist)); }
.process-pictures { position: relative; height: min(74svh,760px); }
.process-pictures img, .process-inline { width: 100%; height: 100%; object-fit: contain; mask-image: linear-gradient(90deg,transparent,var(--black) 12%,var(--black) 88%,transparent),linear-gradient(180deg,transparent,var(--black) 10%,var(--black) 88%,transparent); mask-composite: intersect; }
.process-pictures img { position: absolute; top: 0; left: 50%; width: auto; max-width: 100%; opacity: 0; transform: translateX(-50%) translateY(12px); transition: opacity .7s ease,transform .9s ease; }
.process-pictures img.is-active { opacity: 1; transform: translateX(-50%); }
.process-inline { display: none; width: auto; max-width: 100%; margin-inline: auto; }
.contact-stage { position: relative; height: calc(var(--contact-frame-height,100svh) * 2); background: var(--ink); }
:is(.studio-home,.service-page) .contact-stage .contact { position: sticky; top: 0; min-height: 100svh; opacity: var(--contact-opacity,1); }
.cinematic-footer { margin-top: calc(var(--contact-frame-height,100svh) * -1); min-height: 100svh; padding-top: 50px; background: transparent; }
.film-card { min-height: calc(100svh - 120px); transform: none; }
.film-bottom a { color: color-mix(in srgb,var(--storm) 95%,var(--mist)); }
@media(max-width:720px) {
  .process-sticky { top: 64px; min-height: calc(100svh - 64px); padding-block: 25px; }
  .process-layout { grid-template-columns: 1fr; gap: 0; }
  .process-copy .section-title { font-size: 34px; }
  .process-lead { font-size: 14px; margin: 12px 0; }
  .process-tabs { margin-block: 12px; }
  .process-panels { min-height: 155px; }
  .process-panel h3 { font-size: 32px; margin: 10px 0; }
  .process-panel p { font-size: 14px; line-height: 1.5; margin: 0; }
  .process-pictures { height: 37svh; }
  .studio-home .work-player .work-card .work-card__bottom { min-height: 96px; }
  .studio-home .work-player .work-card { width: 80vw; min-width: 80vw; }

  .studio-home .about { background: linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 45%,var(--storm) 66%,color-mix(in srgb,var(--mist) 80%,var(--frost)) 88%,var(--frost) 98%); }
}
@media(prefers-reduced-motion:reduce), (max-height:650px) {
  .process-scroll { height: auto; }
  .process-sticky { position: relative; top: auto; }
  .process-layout { display: block; }
  .process-tabs, .process-pictures { display: none; }
  .process-panels { min-height: 0; }
  .process-panel { position: relative; opacity: 1; visibility: visible; transform: none; margin-block: 40px; }
  .process-inline { display: block; height: 420px; margin-top: 24px; }
  .contact-stage { height: auto; }
  :is(.studio-home,.service-page) .contact-stage .contact { position: relative; opacity: 1; }
  .cinematic-footer { margin-top: -70px; }
}
@media(prefers-reduced-motion:reduce) {
  .process-panel,.process-pictures img,.work-card__bottom::after,.work-player :is(.work-player__button,.work-player__toggle) { transition: none; }
}

/* V16: lighter liquid glass, larger cutouts and a full-bleed film ending. */
.liquid-visible > .nav-liquid { opacity: .23; }
#mast-nav .liquid-active { color: inherit!important; }
.process-tabs { position: relative; isolation: isolate; }
.process-tabs > .nav-liquid { display: block; }
.process-tabs button { position: relative; z-index: 1; flex: 0 0 48px; width: 48px; padding: 0; border-color: transparent; background: transparent; transition: flex-basis .45s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease; }
.process-tabs button:focus-visible { flex-basis: 84px; }
@media(hover:hover) and (pointer:fine) {
  .process-tabs button:hover { flex-basis: 84px; }
  .process-tabs:has(button:hover) button:focus-visible:not(:hover) { flex-basis: 48px; }
}
.process-tabs button[aria-current] { color: var(--storm); background: color-mix(in srgb,var(--mist) 7.05882%,transparent); border-color: color-mix(in srgb,var(--storm) 33.3333%,transparent); box-shadow: inset 0 1px 2px color-mix(in srgb,var(--white) 50.1961%,transparent); }
.process-panel h3 { color: color-mix(in srgb,var(--lacquer) 75%,var(--coral)); }
.process-layout { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(20px,3vw,60px); }
.process-pictures { height: min(84svh,1000px); }
@media(min-width:721px) { .process-sticky { padding-block: clamp(24px,2.5vh,40px); } }
.process-pictures img, .process-inline { mask-image: none; }
.cinematic-footer {
  padding: 0; background: var(--ink) url('footer-film-texture-v11.webp') center / cover no-repeat;
}
.cinematic-footer .film-card {
  max-width: none; width: 100%; margin: 0; min-height: 100svh;
  padding: clamp(80px,8vw,140px) var(--page-edge); mask-image: none;
}
.cinematic-footer .film-bottom { padding: 0 var(--page-edge) 20px; margin: 0; max-width: none; background: transparent; }
.cinematic-footer .film-bottom a { color: color-mix(in srgb,var(--mist) 85%,var(--frost)); }
:is(.studio-home,.service-page) .contact__title { letter-spacing: -.035em; text-shadow: 1px 0 color-mix(in srgb,var(--mist) 21.9608%,transparent),-1px 0 color-mix(in srgb,var(--storm) 50.1961%,transparent); }
:is(.studio-home,.service-page) .contact__title em { color: var(--mist); text-shadow: 1.5px 0 color-mix(in srgb,var(--mist) 40%,transparent),-1px 0 var(--storm); }
:is(.studio-home,.service-page) .contact::after {
  content: ''; pointer-events: none; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--mist) 16.8627%,transparent) 3px 4px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  opacity: .11;
}
:is(.studio-home,.service-page) .contact.vhs-visible::after { animation: vhs-settle 4.8s linear both; }
@keyframes vhs-settle { from { background-position: 0 0,0 0; } to { background-position: 0 16px,4px 6px; } }
@media(max-width:720px) {
  .process-layout { grid-template-columns: 1fr; gap: 0; }
  .process-pictures { height: min(42svh,calc(100svh - 470px)); }
  .process-panels { min-height: 125px; }
  .cinematic-footer .film-card { padding-inline: 25px; background-size: cover; }
}
@media(prefers-reduced-motion:reduce), (max-height:650px) {
  .process-inline { height: min(620px,90svh); }
}
@media(prefers-reduced-motion:reduce) {
  :is(.studio-home,.service-page) .contact::after { animation: none!important; }
  .process-tabs button { transition: none; }
}

/* V20: end-credit typography and a dark reveal beneath the closing frame. */
.contact-stage { background: var(--ink); }
:is(.studio-home,.service-page) .contact {
  background: radial-gradient(ellipse at 85% 20%,color-mix(in srgb,var(--mist) 16.8627%,transparent),transparent 58%),radial-gradient(ellipse at 8% 78%,color-mix(in srgb,var(--storm) 70.1961%,transparent),transparent 66%),linear-gradient(135deg,var(--ink-2),color-mix(in srgb,var(--ink) 40%,var(--storm)) 52%,var(--ink));
}
:is(.studio-home,.service-page) .contact::before { background: linear-gradient(180deg,color-mix(in srgb,var(--ink) 3.13725%,transparent),color-mix(in srgb,var(--ink) 10.1961%,transparent) 55%,var(--ink)); }
.cinematic-footer {
  background: var(--ink) url('footer-vhs-credits-v20.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg,transparent 0,var(--black) var(--footer-feather,140px),var(--black) 100%);
  mask-image: linear-gradient(180deg,transparent 0,var(--black) var(--footer-feather,140px),var(--black) 100%);
}
.cinematic-footer .film-card { background: transparent; }
.cinematic-footer .film-mark { font: 400 clamp(14px,1.2vw,19px)/1.4 var(--body),sans-serif; letter-spacing: .18em; }
.cinematic-footer .film-title {
  font: 600 clamp(32px,3.8vw,64px)/1.12 var(--body),sans-serif;
  max-width: 40ch; letter-spacing: .035em; color: color-mix(in srgb,var(--mist) 30%,var(--frost));
  text-shadow: .7px 0 color-mix(in srgb,var(--mist) 30.1961%,transparent),-.7px 0 color-mix(in srgb,var(--storm) 60%,transparent);
}
.cinematic-footer .film-founder { font: 400 15px/1.4 var(--body),sans-serif; letter-spacing: .12em; color: color-mix(in srgb,var(--mist) 75%,var(--frost)); }
.cinematic-footer .film-founder strong { font: 600 clamp(28px,3vw,50px)/1.15 var(--body),sans-serif; letter-spacing: .035em; color: color-mix(in srgb,var(--mist) 30%,var(--frost)); text-shadow: .7px 0 color-mix(in srgb,var(--mist) 30.1961%,transparent); }
.cinematic-footer .film-nav a { font-family: var(--body),sans-serif; font-size: 17px; letter-spacing: .12em; }

:is(.studio-home,.service-page) .studio-mast.ending-surface:not(.open) { background: color-mix(in srgb,var(--ink) 56%,transparent); color: var(--frost); }

/* V21: a quiet portfolio stage with only the metallic transport strip. */
#mast-nav .service-menu > .nav-liquid { display: block; }
#mast-nav .mast-services a:is(:hover,:focus-visible) { background: transparent; box-shadow: none; }
.studio-home .section.work { padding: clamp(50px,6vw,92px) var(--page-edge); }
.studio-home .work .work-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px 48px; align-items: start; margin-bottom: 48px; padding-bottom: 0; border: 0; color: var(--ink); }
.work-heading .section-title { margin: 0; }
.work-heading p { max-width: 68ch; margin: 18px 0 0; font-size: clamp(14px,1.15vw,17px); line-height: 1.6; color: color-mix(in srgb,var(--storm) 95%,var(--mist)); }
.studio-home .work .work-player { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.studio-home .work .work-player__screen, .studio-home .work-player .work-player__display { overflow: visible; border: 0; background: transparent; box-shadow: none; }
.work-player__screen::after, .work-player__display::before { content: none; }
.studio-home .work-player .work__track { padding: 14px 0 44px; scroll-padding-inline-start: 0; }
.studio-home .work-player .work-card { box-shadow: 0 14px 13px -12px color-mix(in srgb,var(--ink) 33.3333%,transparent),0 28px 28px -23px color-mix(in srgb,var(--ink) 20%,transparent); }
.studio-home .work-player .work-card:is(:hover,:focus-visible) { transform: translateY(-4px); box-shadow: 0 19px 17px -14px color-mix(in srgb,var(--ink) 37.6471%,transparent),0 30px 30px -24px color-mix(in srgb,var(--ink) 25.098%,transparent); }
.studio-home .work-player .work-card__project { font-size: clamp(19px,1.65vw,28px); transition: color .35s ease; }
.studio-home .work-player .work-card:is(:hover,:focus-visible) .work-card__project { color: var(--coral); }
.studio-home .work-player .work-card:is(:hover,:focus-visible) .work-card__bottom { background: linear-gradient(130deg,color-mix(in srgb,var(--ink) 30%,var(--storm)),color-mix(in srgb,var(--ink) 65%,var(--storm)))!important; }
.studio-home .work-player .work-player__transport { grid-template-columns: auto minmax(180px,1fr); border: 1px solid color-mix(in srgb,var(--storm) 70%,var(--mist)); border-radius: 18px; }
@media(max-width:720px) {
  .studio-home .work .work-heading { grid-template-columns: 1fr; gap: 20px; }
  .work-heading .work-player__all { justify-self: start; }
  .studio-home .work-player .work-player__transport { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion:reduce) { .studio-home .work-player .work-card__project { transition: none; } }