/* Shared editorial scale, materials and navigation */
:root {
  --page-edge: clamp(20px, 5.1vw, 84px);


  --section-space: clamp(60px, 7.4vw, 116px);
}
html { scroll-padding-top: 78px; }
body { font-family: var(--body), sans-serif; }
body :where(button, a, summary, input, textarea, select):focus-visible {
  outline: 3px solid color-mix(in srgb,var(--lacquer) 15%,var(--coral));
  outline-offset: 3px;
}
.studio-mast {
  position: sticky; top: 0; z-index: 100; color: var(--ink);
  background: var(--frost); border-bottom: 1px solid color-mix(in srgb,var(--mist) 80%,var(--frost));
}
:is(.studio-home,.service-page) .studio-mast { position: fixed; inset: 0 0 auto; }
:is(.studio-home,.service-page) .studio-mast:not(.solid):not(.open) {
  color: var(--frost); border-color: color-mix(in srgb,var(--white) 20.7843%,transparent);
  background: linear-gradient(180deg, color-mix(in srgb,var(--ink) 61.1765%,transparent), color-mix(in srgb,var(--ink) 14.1176%,transparent));
}
.mast-inner {
  width: min(1660px, 100%); padding: 0 var(--page-edge); margin: auto;
  display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 20px;
}
.studio-mark, .foot-word { font: 800 clamp(21px, 2vw, 31px)/1 Syne, Arial, sans-serif; letter-spacing: -.055em; text-decoration: none; color: inherit; }
.studio-mark span, .foot-word span, #aboutTitle span, #approachTitle span { color: var(--coral); }
#mast-nav { display: flex; align-items: center; gap: calc(clamp(18px, 2.4vw, 42px) + 8px); }
#mast-nav, .mast-toggle { font: 700 13px/1.4 var(--body), sans-serif; letter-spacing: .01em; }
#mast-nav a, #mast-nav summary { text-decoration: none; color: inherit; }
#mast-nav > a:not(.nav-contact), .mast-services > summary { padding: 12px 0; display: block; }
#mast-nav a:not(.nav-contact):hover, .mast-services summary:hover { text-decoration: underline; text-underline-offset: 5px; }
#mast-nav .nav-contact { color: var(--ink); min-height: 42px; padding: 10px 20px; }
.mast-toggle { display: none; border: 1px solid currentColor; border-radius: 99px; padding: 9px 17px; background: transparent; color: inherit; }
.mast-services { position: relative; }
.mast-services summary { list-style: none; cursor: pointer; }
.mast-services summary::-webkit-details-marker { display: none; }
.mast-services summary::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 2px 3px 9px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.mast-services[open] summary::after { transform: rotate(225deg); margin-bottom: 0; }
.mast-services > div { position: absolute; top: 100%; left: -18px; min-width: 240px; padding: 7px 18px; background: var(--frost); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 12px 26px color-mix(in srgb,var(--ink) 12.549%,transparent); }
.mast-services a { display: block; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.mast-services a:last-child { border: 0; }
.mast-services a[aria-current] { color: var(--storm); text-decoration: underline !important; }
.studio-foot { padding: clamp(42px, 5vw, 80px) var(--page-edge); display: flex; justify-content: space-between; align-items: end; gap: 30px; color: color-mix(in srgb,var(--mist) 30%,var(--frost)); background: repeating-linear-gradient(0deg,var(--ink) 0 2px,color-mix(in srgb,var(--ink) 95%,var(--storm)) 2px 4px); }
.studio-foot p { margin: 15px 0 0; font: 500 14px/1.6 var(--body), sans-serif; color: color-mix(in srgb,var(--mist) 95%,var(--frost)); }
.studio-foot nav { display: flex; gap: 16px 26px; flex-wrap: wrap; }
.studio-foot nav a { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.foot-word { color: color-mix(in srgb,var(--mist) 60%,var(--frost)); text-shadow: 1px 0 color-mix(in srgb,var(--storm) 60%,var(--mist)); }
.visually-hidden:focus { position: fixed!important; clip: auto; width: auto; height: auto; padding: 14px; z-index: 200; background: var(--ink); color: var(--white); }
@media(max-width:780px) {
  html { scroll-padding-top: 65px; }
  .mast-inner { min-height: 64px; flex-wrap: wrap; }
  .enhanced .mast-toggle { display: block; min-height: 44px; }
  #mast-nav { width: 100%; flex-wrap: wrap; }
  .enhanced #mast-nav { display: none; }
  .enhanced.open #mast-nav {
    display: grid; gap: 0; align-items: start; position: absolute; top: 100%; left: 0;
    padding: 8px var(--page-edge) 22px; background: var(--frost); color: var(--ink);
    max-height: calc(100dvh - 64px); overflow-y: auto; border-bottom: 1px solid var(--rule);
  }
  #mast-nav > a:not(.nav-contact), .mast-services > summary { min-height: 44px; }
  #mast-nav .nav-contact { justify-self: start; margin-top: 6px; }
  .mast-services > div { position: static; min-width: 0; box-shadow: none; background: color-mix(in srgb,var(--mist) 15%,var(--frost)); border: 0; }
  .studio-foot { align-items: start; flex-direction: column; }
}

/* Homepage. One measured accent per section. */
.studio-home .hero { min-height: 100svh; }
.studio-home .hero__title { font: 800 clamp(40px,5.6vw,96px)/1.01 var(--display),sans-serif; text-transform: none; letter-spacing: -.057em; text-wrap: initial; max-width: 100%; }
.studio-home .hero__desc { font-size: clamp(16px,1.23vw,20px); max-width: 44ch; color: var(--frost); line-height: 1.57; margin-block: 22px 26px; }
.studio-home .section { padding-block: var(--section-space); }
.studio-home .section-title { font-size: clamp(36px,4.5vw,75px); line-height: 1.05; letter-spacing: -.048em; }
.studio-home .section-head { margin-bottom: clamp(28px,3.2vw,48px); }
.studio-home .section-head__side { line-height: 1.6; font-size: clamp(15px,1.17vw,18px); max-width: 42ch; color: var(--reading); }
.service-tile .circle-arrow { margin-left: auto; }
.service-tile__name { display: block; }
.service-grid, .diptych { gap: 4px!important; }
.studio-home .about { border-top: 1px solid var(--rule); }
.about__intro { align-items: start; margin-bottom: clamp(28px,3.4vw,52px); }
.about__intro p { margin-block: 0; color: var(--reading); }
.studio-home .work { padding-inline: var(--gutter); }
.work .section-head { padding-right: 0; }
.work .container { max-width: var(--wide)!important; }
.work .work-player { border-radius: 20px; box-shadow: 0 1px 1px var(--white) inset,0 10px 26px color-mix(in srgb,color-mix(in srgb,var(--ink) 25%,var(--storm)) 15.6863%,transparent); }
.work-player .work-player__chrome { height: 32px; background: linear-gradient(var(--frost),color-mix(in srgb,var(--mist) 65%,var(--frost)) 49%,color-mix(in srgb,var(--storm) 30%,var(--mist))); }
.work-player .work-player__transport { background: linear-gradient(color-mix(in srgb,var(--mist) 20%,var(--frost)),color-mix(in srgb,var(--storm) 5%,var(--mist)) 12%,color-mix(in srgb,var(--storm) 30%,var(--mist)) 62%,color-mix(in srgb,var(--storm) 40%,var(--mist)) 88%,color-mix(in srgb,var(--mist) 90%,var(--frost))); }
.work-player__seek-labels { color: color-mix(in srgb,var(--ink) 75%,var(--storm)); text-shadow: none; }
.work-player__transport::before { opacity: .45; }
.work-player .work__track { touch-action: auto; }
.work-player .work__track.seeking { scroll-snap-type: none; }
.work-player .work-card { width: 54%; min-width: 54%; height: clamp(330px,33vw,490px); padding: 11px; }
.work-player .work-card:is(:hover,:focus-visible) { transform: translateY(-2px); }
.work-player .work-card .work-card__bottom { opacity: 1!important; transform: none!important; padding: 12px 16px; color: var(--frost); background: color-mix(in srgb,color-mix(in srgb,var(--ink) 95%,var(--storm)) 93.7255%,transparent)!important; }
.work-player .work-card__art { opacity: 1!important; }
.work-player .work-card__project { font-size: clamp(18px,1.65vw,28px); }
.work-player .work-card__excerpt { display: none; }
.work-player .work-card__source { z-index: 3; }
.work-player__display-top { padding-block: 12px 4px; }
.work-player__transport { padding-block: 14px; }
.studio-home .work__footer { margin-right: 0; gap: 20px; }
.studio-home .process__step { min-height: 195px; }
.studio-home .proof { background: color-mix(in srgb,var(--mist) 15%,var(--frost)); padding-block: clamp(48px,5.7vw,92px); }
.proof-stories { margin-top: clamp(26px,3vw,46px); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.proof-stories a { border-top: 1px solid color-mix(in srgb,var(--storm) 45%,var(--mist)); display: grid; gap: 8px; padding-block: 17px 12px; color: var(--ink); text-decoration: none; }
.proof-stories small { font: 650 13px/1.5 var(--body),sans-serif; color: var(--reading); }
.proof-stories strong { font: 750 clamp(20px,2vw,31px)/1.15 var(--display),sans-serif; letter-spacing: -.035em; }
.proof-stories span { font-size: 15px; }
.proof-stories a:is(:hover,:focus-visible) strong { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.studio-home .contact__title { font-size: clamp(42px,6.1vw,94px); line-height: 1.03; text-transform: none; }
.studio-home .contact__bottom { gap: 20px; }
.studio-home .contact { padding-bottom: var(--section-space); }
:is(.shiny-button,.nav-contact,.pill,.liquid-cta):not(:hover):not(:active):not(:focus-visible):not(.is-fully-pressed) { box-shadow: inset 0 1px 2px color-mix(in srgb,var(--white) 60%,transparent),inset 0 -3px 6px color-mix(in srgb,color-mix(in srgb,var(--ink) 80%,var(--storm)) 25.098%,transparent),0 3px 8px color-mix(in srgb,color-mix(in srgb,var(--ink) 95%,var(--storm)) 14.902%,transparent); }
:is(.shiny-button,.nav-contact,.pill,.liquid-cta)::after { border-width: .75px; }
.shiny-button--outline:is(:hover,:focus-visible) { color: var(--white); }
@media(max-width:720px) {
  .studio-home .hero__title { font-size: clamp(31px,7.5vw,52px); }
  .studio-home .hero__desc { max-width: 38ch; }
  .studio-home .work-player .work-card { width: 76vw; min-width: 76vw; height: clamp(260px,82vw,390px); }
  .proof-stories { grid-template-columns: 1fr; gap: 0; }
  .proof-stories a { grid-template-columns: 1fr; gap: 3px; }
  .studio-home .process__step { min-height: 0; }
  .work-player__display-top { gap: 4px; padding-inline: 12px; }
  .work-player__now strong { max-width: 38vw; }
  .work-player .work-card .work-card__bottom { padding: 9px 12px!important; }
  .studio-home .work__footer { align-items: start; flex-direction: column; }
  .studio-home .service-tile__bottom { gap: 4px; }
}

/* Cases and service pages share a reading rhythm and the same navigation. */
.studio-inner .hero__media, .studio-inner .hero__img { margin: 0; }
.studio-inner .hero:has(.hero__media) {
  display: grid; grid-template-columns: minmax(0,.83fr) minmax(0,1.17fr); grid-template-rows: 1fr auto 1fr;
  align-items: end; column-gap: clamp(30px,5vw,80px); padding-block: clamp(38px,5vw,80px);
}
.studio-inner .hero:has(.hero__media) h1 { grid-row: 1; align-self: end; font-size: clamp(39px,4.8vw,86px); margin: 0; }
.studio-inner .hero:has(.hero__media) > p { align-self: start; margin: 18px 0 0; grid-column: 1; grid-row: 2; line-height: 1.55; max-width: 40ch; }
.studio-inner .hero__media { grid-column: 2; grid-row: 1/4; align-self: center; padding: clamp(12px,1.8vw,28px); background: color-mix(in srgb,var(--mist) 25%,var(--frost)); }
.studio-inner .hero__media img { height: clamp(275px,30vw,435px); }
.hero__media figcaption { margin-top: 12px; font-size: 13px; color: var(--reading); }
.case-story { padding-block: clamp(38px,5vw,76px); gap: clamp(24px,6vw,100px); }
.case-story h2 { font-size: clamp(26px,2.7vw,44px); }
.case-story p { margin: 0; max-width: 61ch; color: var(--reading); }
.case-related { display: inline-block; margin-top: 16px; text-decoration: underline; text-underline-offset: 4px; }
.gallery-section { padding-block: var(--section-space); }
.gallery-tile .gallery-tile__caption { font: 550 14px/1.45 var(--body),sans-serif; padding-bottom: 8px; }
.studio-inner .gallery-tile__frame { aspect-ratio: 1/1.05; }
.studio-inner .archive-card__copy { display: block; }
.archive-card__copy small { display: block; margin-top: 6px; }
.next-cta { background: color-mix(in srgb,var(--mist) 55%,var(--frost)); }
.studio-inner .next-cta a { padding: 12px 20px; }
.studio-inner .hero-grid h1 { font-size: clamp(36px,4.7vw,82px); }
.studio-inner .hero-grid .lead { margin-bottom: 0; }
.studio-inner .hero:has(.hero-grid) { padding-bottom: clamp(38px,4.5vw,72px); }
@media(max-width:760px) {
  .studio-inner .hero:has(.hero__media) { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .studio-inner .hero:has(.hero__media) h1 { align-self: start; }
  .studio-inner .hero:has(.hero__media) > p { margin: 0; }
  .studio-inner .hero__media { align-self: stretch; }
  .studio-inner .hero__media img { height: clamp(240px,65vw,400px); }
  .studio-inner .hero-grid h1 { font-size: clamp(28px,6.9vw,48px); overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; animation: none!important; transition: none!important; }
}
.studio-home .image-replacement-note { color: color-mix(in srgb,var(--storm) 85%,var(--mist)); font-size: 12px; }
.proof__row p, .deliverable .number, .archive-card__copy small { color: color-mix(in srgb,var(--storm) 95%,var(--mist)); }
.vhs-nav .liquid-cta { color: color-mix(in srgb,var(--ink) 85%,var(--storm))!important; text-shadow: none; }
.contact__bottom [data-studio-email] { color: var(--frost); text-decoration: underline; text-underline-offset: 3px; }
.gallery-note { min-width: 0; }
.gallery-note .gallery-tile { width: 100%; }
.gallery-note h3 { margin: 16px 0 6px; font: 750 clamp(20px,1.8vw,29px)/1.17 var(--display),sans-serif; letter-spacing: -.035em; }
.gallery-note p { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.6; color: color-mix(in srgb,var(--mist) 55%,var(--frost)); }
.more-views { margin-top: 38px; border-block: 1px solid color-mix(in srgb,var(--storm) 80%,var(--mist)); }
.more-views summary { cursor: pointer; padding: 18px 0; font-weight: 650; }
.more-views .gallery-grid { padding-block: 10px 24px; }
@media(max-width:760px) {
  .studio-inner .gallery-edit { grid-template-columns: 1fr; gap: 30px; }
  .gallery-edit .gallery-tile__frame { aspect-ratio: 4/3; }
}

/* VHS service menu: the four real service destinations remain native links. */
.mast-services > div {
  isolation: isolate; overflow: hidden; z-index: 3;
  top: calc(100% + 8px); left: -22px; width: 350px; min-width: 0;
  max-width: calc(100vw - 40px); padding: 20px;
  border: 1px solid color-mix(in srgb,var(--mist) 36.0784%,transparent); border-radius: 12px; color: var(--frost);
  background: repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--mist) 1.96078%,transparent) 3px 4px),radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--storm) 50.1961%,transparent),transparent 65%),radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--coral) 3.92157%,transparent),transparent 60%),var(--ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb,color-mix(in srgb,var(--mist) 25%,var(--frost)) 20%,transparent),inset 0 0 24px color-mix(in srgb,var(--ink) 46.6667%,transparent),0 18px 45px color-mix(in srgb,var(--ink) 43.9216%,transparent),0 0 22px color-mix(in srgb,var(--mist) 4.31373%,transparent);
}
.mast-services[open]::before { content: ''; position: absolute; top: 100%; left: -22px; width: 350px; height: 10px; }
.mast-services > div::before {
  content: ''; pointer-events: none; position: absolute; inset: 0; z-index: -1; opacity: .055;
  background: url("data:image/svg+xml,%3Csvg width='128' height='128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h128v128H0z' filter='url(%23v)' opacity='.6'/%3E%3C/svg%3E") repeat;
}
#mast-nav .mast-services a {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 13px 12px; border: 0; border-radius: 7px;
  color: color-mix(in srgb,var(--mist) 10%,var(--frost)); background: transparent; text-shadow: .5px 0 color-mix(in srgb,var(--mist) 18.0392%,transparent);
  transition: background .25s ease,color .25s ease,box-shadow .25s ease;
}

#mast-nav .mast-services a:is(:hover,:focus-visible), #mast-nav .mast-services a[aria-current] {
  background: color-mix(in srgb,var(--mist) 7.84314%,transparent); color: var(--frost); text-decoration: none; box-shadow: inset 2px 0 var(--mist);
}
#mast-nav .mast-services a:focus-visible { outline-color: var(--mist); outline-offset: -3px; }
.mast-services[open] > div { animation: service-reveal .24s cubic-bezier(.16,1,.3,1) both; }
@keyframes service-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media(max-width:780px) {
  .mast-services > div { position: relative; top: auto; left: auto; width: 100%; max-width: none; margin: 4px 0 12px; }
  .mast-services[open]::before { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .mast-services[open] > div { animation: none; }
  #mast-nav .mast-services a { transition: none; }
}