/* Liquid navigation and tactile drawing surfaces. */
[data-reveal] { transition: opacity .65s ease,transform .75s cubic-bezier(.16,1,.3,1); }
[data-reveal].reveal-pending { opacity: 0; transform: translateY(15px); }
@media(prefers-reduced-motion:reduce) {
  [data-reveal] { transition: none; }
  [data-reveal].reveal-pending { opacity: 1; transform: none; }
}
.studio-mast { border-bottom: 0; }
.studio-mast.solid:not(.open) {
  background: color-mix(in srgb,var(--frost) 56%,transparent); color: var(--ink);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}
#mast-nav { position: relative; isolation: isolate; }
#mast-nav > a:not(.nav-contact), .mast-services > summary { position: relative; z-index: 1; transition: color .28s ease; }
#mast-nav a:not(.nav-contact):hover, .mast-services summary:hover { text-decoration: none; }
#mast-nav .liquid-active { color: var(--ink)!important; }
.nav-liquid { position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s ease; filter: url(#nav-merge); }
.nav-liquid > svg { position: absolute; }
.nav-liquid i { position: absolute; left: 0; top: 0; height: 44px; border-radius: 26px; background: var(--mist); will-change: transform,width; }
.liquid-visible > .nav-liquid { opacity: 1; }
.studio-home .hero { padding-bottom: clamp(75px,9vh,135px); }
.studio-home { --hero-midnight: var(--ink); }
.studio-home .hero-stage { height: calc(var(--hero-frame-height,100svh) * 2); position: relative; }
.studio-home .hero { position: sticky; top: 0; background: var(--hero-midnight); padding-bottom: clamp(160px,19vh,240px); isolation: isolate; }
.studio-home .hero__image {
  inset: -3% 0; height: 106%; object-position: 67% center;
  filter: saturate(.95) contrast(1.02); opacity: 1;
  transform: translate3d(0,var(--hero-drift,0px),0);
}
.studio-home .hero::after {
  background: linear-gradient(90deg,color-mix(in srgb,var(--ink) 67.0588%,transparent),transparent 78%),linear-gradient(0deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 90.9804%,transparent) 6%,color-mix(in srgb,var(--ink) 43.9216%,transparent) 19%,transparent 43%);
}
.studio-home .hero__content { transform: translate3d(0,var(--hero-copy-drift,0px),0); }
.studio-home .section.services {
  position: relative; z-index: 4; margin-top: calc(var(--hero-frame-height,100svh) * -1);
  padding-top: clamp(100px,12vh,160px); color: var(--frost);
  background: linear-gradient(180deg,transparent 0,var(--hero-midnight) 64px);
}
.studio-home .services .section-head__side { color: color-mix(in srgb,var(--mist) 75%,var(--frost)); }
.studio-home .services > .container { transform: translate3d(0,var(--services-rise,0px),0); }
.studio-home .services .service-grid { background: var(--hero-midnight); }
@media(max-width:720px) {
  .studio-home .hero { padding-top: 115px; padding-bottom: 180px; }
  .studio-home .hero__image { object-position: 70% center; }
  .studio-home .hero::after { background: linear-gradient(0deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 87.8431%,transparent) 23%,color-mix(in srgb,var(--ink) 20.7843%,transparent) 60%,color-mix(in srgb,var(--ink) 8.23529%,transparent)),linear-gradient(90deg,color-mix(in srgb,var(--ink) 33.3333%,transparent),transparent); }
  .studio-home .section.services { padding-top: 110px; }
}
.service-tile > img { transform: scale(1.035); transition: transform 1.4s cubic-bezier(.16,1,.3,1),filter 1s ease!important; filter: saturate(.25) contrast(.94)!important; }
.service-tile > .service-color { opacity: 0; filter: saturate(1.08) contrast(1.02)!important; mix-blend-mode: normal; transition: opacity .95s ease,transform 1.6s cubic-bezier(.16,1,.3,1)!important; }
.service-tile:is(:hover,:focus-visible) > img { transform: scale(1); }
.service-tile:is(:hover,:focus-visible) > .service-color { opacity: 1; }
.service-tile[href="services/brand-identity.html"] > .service-color { object-position: 50% 24%; }
.service-tile[href="services/art-direction.html"] > .service-color { object-position: 50% 35%; }
.service-tile::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--mist) 3.92157%,transparent) 3px 4px),linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--coral) 17.2549%,transparent) 58%,color-mix(in srgb,var(--mist) 13.3333%,transparent)); mix-blend-mode: screen; transition: opacity 1s ease; }
.service-tile:is(:hover,:focus-visible)::before { opacity: 1; }
.service-tile__summary { transition: max-height .75s cubic-bezier(.16,1,.3,1),opacity .6s ease,transform .75s cubic-bezier(.16,1,.3,1)!important; }
.service-tile .circle-arrow { transition: transform .7s cubic-bezier(.16,1,.3,1),border-color .6s ease,background .6s ease!important; }
.studio-home .diptych { display: flex; align-items: stretch; }
.drawing-panel { flex: 1 1 0; min-width: 0; position: relative; transition: flex-grow .85s cubic-bezier(.16,1,.3,1); }
.drawing-panel > img { object-position: center!important; transition: opacity .7s ease,transform 1.2s cubic-bezier(.16,1,.3,1)!important; }
.drawing-surface { position: absolute; inset: 20px 20px 165px; z-index: 2; opacity: 0; transform: scale(.98); transition: opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1); pointer-events: none; overflow: hidden; }
.drawing-panel[data-medium="analog"] .drawing-surface {
  background: url('desk-analog-v2.webp') center / cover no-repeat;
  transform: scale(1); box-shadow: none;
}
.drawing-panel[data-medium="analog"] .drawing-surface canvas {
  position: absolute; inset: 8% 9%; width: 82%; height: 84%;
}
.drawing-panel[data-medium="digital"] .drawing-surface { border: 13px solid color-mix(in srgb,var(--ink) 95%,var(--storm)); border-radius: 27px; background: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb,var(--storm) 25%,var(--mist)),0 12px 40px color-mix(in srgb,var(--ink) 33.3333%,transparent); }
.drawing-surface canvas { display: block; width: 100%; height: 100%; }
.drawing-cursor { position: absolute; top: 0; left: 0; width: 11px; height: 78px; transform-origin: bottom center; pointer-events: none; }
.drawing-cursor::after { content: ''; position: absolute; bottom: 0; width: 8px; height: 74px; background: linear-gradient(90deg,color-mix(in srgb,var(--ink) 80%,var(--storm)),color-mix(in srgb,var(--storm) 85%,var(--mist)) 48%,color-mix(in srgb,var(--ink) 80%,var(--storm)) 50%,color-mix(in srgb,var(--ink) 40%,var(--storm))); clip-path: polygon(0 0,100% 0,100% 84%,50% 100%,0 84%); transform: translate(-3px,-72px) rotate(28deg); transform-origin: bottom center; }
[data-medium="digital"] .drawing-cursor::after { background: linear-gradient(90deg,color-mix(in srgb,var(--storm) 5%,var(--mist)),var(--white) 45%,color-mix(in srgb,var(--mist) 30%,var(--frost))); border-radius: 4px; filter: drop-shadow(1px 2px 2px color-mix(in srgb,var(--ink) 33.3333%,transparent)); }
.drawing-caption { position: absolute; z-index: 3; inset: auto 0 0; padding: 55px clamp(16px,2.2vw,32px) 28px; color: var(--frost); background: linear-gradient(transparent,color-mix(in srgb,var(--ink) 96.0784%,transparent) 35%); pointer-events: none; }
.drawing-panel .diptych__name { position: static; display: block; font-size: clamp(24px,4.5vw,66px); letter-spacing: -.05em; }
.drawing-caption p {
  margin: 0; max-width: 44ch; max-height: 0; overflow: hidden;
  font-size: clamp(13px,1.15vw,17px); line-height: 1.55;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: max-height .5s ease,margin .5s ease,opacity .3s ease,transform .4s ease,visibility 0s .5s;
}
.drawing-panel.surface-preview .drawing-caption p,
.drawing-panel:has(.drawing-toggle:focus-visible) .drawing-caption p {
  margin-top: 12px; max-height: 16em; opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media(hover:hover) and (pointer:fine) {
  .drawing-panel:hover .drawing-caption p {
    margin-top: 12px; max-height: 16em; opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
}
.drawing-panel::after { pointer-events: none; transition: opacity .6s ease; }
.drawing-panel:is(.drawing-active,.surface-preview) .drawing-surface { opacity: 1; transform: scale(1); }
.drawing-panel:is(.drawing-active,.surface-preview) > img { opacity: .25; transform: scale(1.025); }
.drawing-panel:is(.drawing-active,.surface-preview)::after { opacity: 0; }
.drawing-toggle { position: absolute; top: 18px; right: 18px; z-index: 4; opacity: 0; pointer-events: none; border: 1px solid color-mix(in srgb,var(--white) 50.1961%,transparent); border-radius: 30px; background: color-mix(in srgb,var(--ink) 78.8235%,transparent); color: var(--frost); padding: 10px 14px; font: 600 12px var(--body),sans-serif; }
.drawing-toggle:focus-visible { opacity: 1; pointer-events: auto; }
@media(hover:hover) and (pointer:fine) {
  .drawing-panel.drawing-active { flex-grow: 1.15; }
  .drawing-panel.drawing-active.drawing-over { cursor: none; }
}
@media(hover:none), (pointer:coarse) {
  .drawing-toggle { opacity: 1; pointer-events: auto; }
  .drawing-cursor { display: none; }
}
@media(max-width:780px) {
  .nav-liquid { display: none; }
  #mast-nav .liquid-active { color: var(--storm)!important; }
  .drawing-panel[data-medium="digital"] .drawing-surface { border-width: 7px; border-radius: 18px; }
}
@media(max-width:720px) {
  .studio-home .drawing-panel { height: 440px; }
  .drawing-panel .diptych__name { font-size: clamp(17px,4.5vw,32px); }
  .drawing-caption { padding: 40px 13px 20px; }
  .drawing-caption p { font-size: 13px; }
  .drawing-surface { inset: 14px 10px 190px; }
  .drawing-toggle { right: 12px; min-height: 44px; }
}
/* The entire portfolio section is one padded media-player enclosure. */
.studio-home .section.work { padding: clamp(20px,3vw,48px); background: var(--frost); }
.studio-home .work::before, .studio-home .work::after { display: none; }
.studio-home .work .container { max-width: none!important; width: 100%; }
.studio-home .work .work-player { max-width: none; width: 100%; }
.work-player__intro { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px 48px; align-items: start; padding: clamp(24px,3.4vw,54px); background: linear-gradient(120deg,var(--frost),color-mix(in srgb,var(--mist) 60%,var(--frost)) 55%,color-mix(in srgb,var(--mist) 10%,var(--frost))); box-shadow: inset 0 1px var(--white); color: color-mix(in srgb,var(--ink) 80%,var(--storm)); }
.studio-home .work-player__intro .section-title { font-size: clamp(34px,4.2vw,68px); margin: 0; }
.work-player__intro 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)); }
.work-player__all { margin-top: 4px; background: var(--storm); color: var(--white); min-height: 48px; }
.studio-home .work .work-player {
  --player-metal: radial-gradient(ellipse at 8% 0,color-mix(in srgb,var(--mist) 17.2549%,transparent),transparent 52%),radial-gradient(ellipse at 92% 90%,color-mix(in srgb,var(--coral) 10.5882%,transparent),transparent 42%),repeating-conic-gradient(from 200deg at 50% 0,color-mix(in srgb,var(--white) 1.56863%,transparent) 0deg .35deg,color-mix(in srgb,var(--black) 5.09804%,transparent) .35deg .7deg),linear-gradient(165deg,color-mix(in srgb,var(--storm) 75%,var(--mist)),color-mix(in srgb,var(--ink) 45%,var(--storm)) 32%,color-mix(in srgb,var(--storm) 95%,var(--mist)) 65%,color-mix(in srgb,var(--ink) 70%,var(--storm)));
  border: 2px solid color-mix(in srgb,var(--storm) 70%,var(--mist));
  box-shadow: inset 0 2px 1px color-mix(in srgb,color-mix(in srgb,var(--mist) 65%,var(--frost)) 53.3333%,transparent),inset 0 -3px 2px var(--ink),0 7px 0 -3px color-mix(in srgb,var(--ink) 35%,var(--storm)),0 15px 30px color-mix(in srgb,color-mix(in srgb,var(--ink) 60%,var(--storm)) 25.098%,transparent);
  background: var(--player-metal);
}
.work-player__screen { position: relative; overflow: hidden; isolation: isolate; border: 7px solid color-mix(in srgb,var(--ink) 65%,var(--storm)); border-bottom-width: 4px; background: var(--ink); box-shadow: inset 0 5px 14px color-mix(in srgb,var(--black) 60%,transparent); }
.work-player__spectrum { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.work-player__screen .work-player__intro { position: relative; z-index: 1; background: linear-gradient(color-mix(in srgb,var(--ink) 50.1961%,transparent),color-mix(in srgb,var(--ink) 14.5098%,transparent)); box-shadow: none; color: var(--frost); }
.work-player__intro p { color: color-mix(in srgb,var(--mist) 60%,var(--frost)); }
.studio-home .work-player .work-player__display { border: 0; background: transparent; box-shadow: none; }
.work-player__display-top { justify-content: flex-end; }
.work-player__screen::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg,color-mix(in srgb,var(--black) 3.13725%,transparent) 0 1px,transparent 1px 4px); box-shadow: inset 0 0 25px color-mix(in srgb,var(--black) 40%,transparent); }
.studio-home .work-player .work-player__chrome { height: 44px; padding-inline: 18px; background: var(--player-metal); border-bottom: 1px solid color-mix(in srgb,var(--mist) 23.1373%,transparent); }
.work-player__motion { position: relative; z-index: 3; min-height: 32px; padding: 5px 12px; border: 1px solid color-mix(in srgb,var(--storm) 55%,var(--mist)); border-radius: 8px; background: linear-gradient(color-mix(in srgb,var(--storm) 90%,var(--mist)),color-mix(in srgb,var(--ink) 60%,var(--storm))); box-shadow: inset 0 1px color-mix(in srgb,color-mix(in srgb,var(--mist) 90%,var(--frost)) 26.6667%,transparent),0 1px 2px color-mix(in srgb,var(--ink) 50.1961%,transparent); font: 700 11px var(--body),sans-serif; color: var(--frost); cursor: pointer; }
.work-player__motion:hover { background: color-mix(in srgb,var(--storm) 95%,var(--mist)); }
.work-player__motion:disabled { cursor: default; }
.studio-home .work-player .work-player__transport { background: var(--player-metal); border-top: 2px solid color-mix(in srgb,var(--storm) 40%,var(--mist)); box-shadow: inset 0 2px 2px color-mix(in srgb,color-mix(in srgb,var(--mist) 35%,var(--frost)) 30.1961%,transparent),inset 0 -5px 8px color-mix(in srgb,var(--ink) 50.1961%,transparent); }
.work-player .work-player__seek-labels { color: color-mix(in srgb,var(--mist) 20%,var(--frost)); }
.work-player .work-player__button, .work-player .work-player__toggle {
  border-color: color-mix(in srgb,var(--storm) 15%,var(--mist)); color: var(--frost);
  background: radial-gradient(circle at 30% 16%,color-mix(in srgb,var(--mist) 40%,var(--frost)),color-mix(in srgb,var(--storm) 45%,var(--mist)) 25%,color-mix(in srgb,var(--storm) 90%,var(--mist)) 52%,color-mix(in srgb,var(--ink) 65%,var(--storm)) 74%,color-mix(in srgb,var(--storm) 65%,var(--mist)));
  box-shadow: 0 3px 6px color-mix(in srgb,var(--ink) 60%,transparent),inset 0 2px 3px color-mix(in srgb,color-mix(in srgb,var(--mist) 55%,var(--frost)) 53.3333%,transparent),inset 0 -3px 4px color-mix(in srgb,var(--ink) 66.6667%,transparent);
  text-shadow: 0 1px var(--ink);
}
.work-player .work-player__button::before { background: radial-gradient(circle at 35% 19%,color-mix(in srgb,var(--storm) 85%,var(--mist)),color-mix(in srgb,var(--ink) 65%,var(--storm)) 70%,color-mix(in srgb,var(--ink) 85%,var(--storm))); box-shadow: inset 0 2px 6px var(--ink),0 1px 1px color-mix(in srgb,var(--storm) 15%,var(--mist)); }
.work-player__chrome .work-player__orbs i { background: radial-gradient(circle at 30% 24%,color-mix(in srgb,var(--mist) 35%,var(--frost)),color-mix(in srgb,var(--storm) 70%,var(--mist)) 48%,color-mix(in srgb,var(--ink) 70%,var(--storm))); border-color: color-mix(in srgb,var(--storm) 45%,var(--mist)); }
@media(max-width:720px) { .work-player__screen { border-width: 4px; } }
@media(max-width:900px) {
  .work-player__intro { grid-template-columns: 1fr; gap: 20px; }
  .work-player__all { justify-self: end; margin: 0; }
}
@media(max-width:480px) {
  .studio-home .section.work { padding: 14px; }
  .work-player__intro { padding: 24px 18px; }
  .studio-home .work-player__intro .section-title { font-size: 31px; }
  .work-player__all { padding-inline: 16px; font-size: 10px; }
  .studio-home .work-player .work-card { width: 74vw; min-width: 74vw; }
}
@media(prefers-reduced-motion:reduce) {
  .drawing-panel, .drawing-surface, .service-tile > img, .nav-liquid { transition: none!important; }
  .studio-home .hero__image, .studio-home .hero__content, .studio-home .services > .container { transform: none!important; }
}
@media(prefers-reduced-motion:reduce), (max-height:650px) {
  .studio-home .hero-stage { height: auto; }
  .studio-home .hero { position: relative; }
  .studio-home .section.services { margin-top: -64px; }
}

@media(prefers-reduced-motion:reduce) { .drawing-caption p { transition: none!important; } }