/* Mobile art direction only. All original assets and desktop rules are retained. */
@media (max-width:600px) {
 :root { --mobile-edge:20px; --mobile-section:72px; --mobile-card-gap:6px; --mobile-cta-size:12px; }
 body { --page-edge:var(--mobile-edge); }
 /* A landscape portrait needs a short image window, not a viewport-tall crop.
    The copy has its own area and never covers the face, hands or CD player. */
 body.studio-home .hero-stage { background:var(--ink); }
 body.studio-home #home {
  --mobile-hero-image:clamp(250px,76vw,325px);
  height:auto; min-height:0; align-items:flex-start;
  padding:calc(64px + var(--mobile-hero-image) - 20px) var(--page-edge) 36px;
 }
 body.studio-home #home > .hero__image {
  inset:64px 0 auto; width:100%; height:var(--mobile-hero-image);
  object-fit:cover; object-position:100% 50%; transform:none;
  mask-image:linear-gradient(#000 76%,transparent 100%);
 }
 body.studio-home #home::after { background:linear-gradient(180deg,transparent 0 65%,var(--ink) 100%); }
 body.studio-home #home .hero__content { transform:none; margin:0 auto; }
 body.studio-home #home .hero__title { font-size:clamp(34px,10vw,46px); line-height:1.08; max-width:100%; }
 body.studio-home #home .hero__desc { font-size:16px; line-height:1.55; max-width:39ch; margin-block:20px 24px; }
 body.studio-home #home .hero__actions { gap:10px; }
 body.studio-home #home .imagery-note { margin-top:10px; }
 body.studio-home #home .ai-disclosure { margin-top:22px; }

 /* Portrait campaign cards: names stay on the image and objects retain their
    complete square arrangement above the caption, rather than being cut off. */
 body.studio-home #services .service-grid { grid-template-columns:minmax(0,1fr); gap:var(--mobile-card-gap)!important; }
 body.studio-home #services .service-tile { display:block; min-height:0; aspect-ratio:4/5; padding:0; background:var(--ink); border-radius:6px; overflow:hidden; }
 body.studio-home #services .service-tile > img,
 body.studio-home #services .service-tile > img:first-child {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  aspect-ratio:auto; transform:none; object-fit:cover; object-position:50% 32%; mask-image:none;
 }
 body.studio-home #services .service-tile:nth-child(1) > .service-color { object-position:50% 24%; }
 body.studio-home #services .service-tile:nth-child(n+3) > img,
 body.studio-home #services .service-tile:nth-child(n+3) > img:first-child {
  height:84%; object-fit:contain; object-position:center top;
  mask-image:linear-gradient(#000 76%,transparent);
 }
 body.studio-home #services .service-tile::after {
  background:linear-gradient(0deg,var(--ink),color-mix(in srgb,var(--ink) 88%,transparent) 14%,transparent 62%);
 }
 body.studio-home #services .service-tile__bottom {
  position:absolute; inset:auto 0 0; z-index:2; margin:0;
  padding:24px; align-items:center; gap:12px;
 }
 body.studio-home #services .service-tile__copy { max-width:calc(100% - 48px); }
 body.studio-home #services .service-tile__name { font-size:clamp(26px,7vw,30px); line-height:1.12; }
 body.studio-home #services .circle-arrow { width:36px; height:36px; }


 /* One editorial reading order followed by two full-width 4:5 image studies. */
 body.studio-home :is(#services,#about) { padding-block:var(--mobile-section); }
 body.studio-home #about .about__intro { display:grid; grid-template-columns:1fr; gap:24px; margin-bottom:40px; }
 body.studio-home #about .section-title { font-size:clamp(34px,9.3vw,42px); line-height:1.1; margin:0; max-width:15ch; }
 body.studio-home #about .about__intro p { font-size:17px; line-height:1.65; margin:0; max-width:42ch; }
 body.studio-home #about .content-link-menu { margin-top:24px; padding:0; }
 body.studio-home #about .content-link--menu { font-size:15px; line-height:1.45; text-align:left; justify-content:flex-start; }
 body.studio-home .diptych { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--mobile-card-gap); }
 body.studio-home .diptych .drawing-panel { width:100%; height:auto; aspect-ratio:4/5; min-height:0; border-radius:6px; overflow:hidden; background:var(--ink); }
 body.studio-home .diptych .drawing-panel > img {
  position:absolute; inset:0 0 auto; display:block; width:100%; height:84%;
  object-fit:contain; object-position:center top!important; transform:none;
  mask-image:linear-gradient(#000 82%,transparent);
 }
 body.studio-home .drawing-caption { padding:48px 24px 24px; }
 body.studio-home .drawing-caption .diptych__name { font-size:clamp(32px,8.7vw,40px); line-height:1.05; }
 body.studio-home .drawing-surface { inset:14px 14px 104px; }

 /* The cutout gets a complete, contained frame before the studio copy. Its
    natural section height prevents the legs from being clipped on phones. */
 body.studio-page .studio-hero--vhs {
  display:flex; flex-direction:column; gap:24px; height:auto; min-height:0;
  padding:88px var(--page-edge) 56px; align-items:stretch;
 }
 body.studio-page .studio-hero__portrait {
  order:-1; width:100%; margin:0; align-self:center; transform:none;
 }
 body.studio-page .studio-hero__portrait img {
  display:block; width:100%; height:clamp(300px,92vw,410px); max-height:none;
  object-fit:contain; object-position:center; mask-image:linear-gradient(#000 90%,transparent);
 }
 body.studio-page .studio-hero__copy { padding:0; }
 body.studio-page .studio-hero h1 { font-size:clamp(33px,9vw,43px); }

 /* Use-case and deliverable flatlays are landscape photographs. Show the
    whole arrangement above the caption instead of cropping its objects. */
 body.studio-page .studio-use-case { display:block; min-height:0; background:var(--ink); }
 body.studio-page .studio-use-case > img { inset:0 0 auto; height:auto; aspect-ratio:3/2; object-fit:contain; object-position:center top; mask-image:linear-gradient(#000 82%,transparent); }
 body.studio-page .studio-use-case > img:first-child { position:relative; inset:auto; display:block; }
 body.studio-page .studio-use-case::after { background:none; }
 body.studio-page .studio-use-case__copy { position:relative; padding:12px 24px 26px; }
 body.service-refined .deliverable { display:block; min-height:0; padding:0; }
 body.service-refined .deliverable > img { inset:0 0 auto; height:auto; aspect-ratio:3/2; object-fit:contain; object-position:center top; mask-image:linear-gradient(#000 82%,transparent); }
 body.service-refined .deliverable > img:first-child { position:relative; inset:auto; display:block; }
 body.service-refined .deliverable::after { background:none; }
 body.service-refined .deliverable > div { padding:14px 24px 28px; }
 body.studio-page .studio-use-case--lifestyle > .studio-use-case__copy,
 body.service-refined[data-service="websites-ecommerce"] .deliverables-grid > .deliverable:first-child > div {
  margin-top:-20px; padding-top:8px;
 }

 /* Fixed image windows keep longer DE/EL copy from changing the hero crop. */
 body.service-page .service-hero { --mobile-service-image:clamp(320px,100vw,440px); min-height:100svh; height:auto; padding:calc(64px + var(--mobile-service-image) - 12px) var(--page-edge) 64px; align-items:flex-start; }
 body.service-page .service-hero .hero__image { inset:64px 0 auto; width:100%; height:var(--mobile-service-image); transform:none; object-position:var(--service-focal-mobile,50% 36%); mask-image:linear-gradient(#000 76%,transparent); }
 body.service-page .service-hero::after { background:none; }
 body.service-page .service-hero .hero__content { transform:none; }
 body.service-page .service-hero:has(img[src*="service-commerce"]) .hero__image,
 body.service-page .service-hero:has(img[src*="service-product"]) .hero__image { object-fit:contain; object-position:center; }
 /* Mockups contain two devices. Preserve both; screenshot crops elsewhere
    continue to start at the page navigation. */
 body.service-page .related .portfolio-card:has(img[src*="primus"]) .portfolio-cover { aspect-ratio:1.6; }
 body.service-page .related .portfolio-card:has(img[src*="primus"]) .portfolio-cover img { object-fit:contain; object-position:center; }
 body.portfolio-overview #primus .portfolio-cover img { object-fit:contain; object-position:center; }
 /* Case studies can afford natural image height. Complete device mockups,
    building signage and page excerpts stay intact at every phone width. */
 body.portfolio-case .case-image--opening img { aspect-ratio:auto; max-height:none; }
 body.portfolio-case .case-image-grid .case-image__button { height:auto; }
 body.portfolio-case .case-image img { height:auto; max-height:none; object-fit:contain; object-position:center top; }
 body.portfolio-overview .portfolio-cover img { object-fit:contain; object-position:center top; }
}
/* A tall translated hero must scroll far enough to expose its CTA before
   the next section wipes over it. Short heroes remain pinned at the top. */
@media (max-width:600px) and (min-height:651px) and (prefers-reduced-motion:no-preference) {
 body.studio-home #home,
 body.service-page .service-hero { top:min(0px,calc(100svh - var(--hero-frame-height,100svh))); }
 body.studio-page .studio-hero--vhs { top:min(0px,calc(100svh - var(--studio-frame-height,100svh))); }
}
@media (max-width:600px) and (min-height:651px) and (prefers-reduced-motion:no-preference) {
 /* Longer DE/EL process copy needs a slightly shorter contained portrait
    window, leaving the feet and floor shadow inside the visible frame. */
 html:not([lang="en"]) body.studio-home #approach .process-pictures { height:min(30svh,260px); min-height:0; }
}
@media (max-width:600px) {
 /* The alternate handheld photograph is landscape, unlike its square base.
    Fade its own bounds into midnight instead of exposing a letterbox seam. */
 body.studio-home #services .service-tile:nth-child(4) > .service-color {
  top:4%; height:80%; aspect-ratio:auto; object-fit:contain; object-position:center top;
  mask-image:linear-gradient(transparent,#000 12%,#000 72%,transparent);
 }
 body.studio-home #services .service-tile:nth-child(4) > img:first-child { transition:opacity .95s ease!important; }
 body.studio-home #services .service-tile:nth-child(4):is(:hover,:focus-visible) > img:first-child { opacity:0; }
}

/* Mobile interface controls; the approved desktop materials are untouched. */
@media(max-width:780px) {
 body :is(.shiny-button,.nav-contact,.liquid-cta,.back-btn,.pill) {
  font-size:12px; line-height:1.3; letter-spacing:.015em; font-weight:600;
  min-height:44px; padding:11px 18px; border-width:1px;
 }
 body :is(.shiny-button,.nav-contact,.liquid-cta):not(.shiny-button--outline) {
  box-shadow:inset 0 1px 2px #ffffffa6,inset 0 -2px 3px #101a222b,0 3px 7px #101a2226;
 }
 body :is(.shiny-button,.nav-contact,.liquid-cta)::before { opacity:.42; height:42%; }
 body :is(.shiny-button,.nav-contact,.liquid-cta)::after { inset:3px; border-width:1px; opacity:.48; }
 body :is(.shiny-button,.nav-contact,.liquid-cta):is(:active,.is-fully-pressed) {
  transform:translateY(2px) scale(.99)!important;
  box-shadow:inset 0 4px 7px #101a2259,inset 0 -1px 2px #ffffff80!important;
 }
 body.mobile-nav-open { overflow:hidden; }
 .studio-mast.open {
  position:fixed; inset:0; height:100dvh; background:var(--ink); color:var(--frost);
  backdrop-filter:none; -webkit-backdrop-filter:none;
 }
 .studio-mast.open .mast-inner { min-height:72px; padding-inline:20px; align-items:center; }
 .studio-mast.open .brand-logo--dark,.studio-mast.open .brand-logo--square { display:none; }
 .studio-mast.open .brand-logo--light { display:block; opacity:1; visibility:visible; transform:none; }
 .studio-mast.open .studio-mark { width:176px; height:auto; }
 .studio-mast.open .mast-toggle {
  position:relative; display:grid; place-items:center; width:44px; height:44px; min-height:44px;
  padding:0; border:0; border-radius:50%; background:#ffffff0d; color:var(--frost);
  font-size:0!important; box-shadow:inset 0 1px 0 #ffffff29;
 }
 .studio-mast.open .mast-toggle .liquid-label { font-size:0!important; }
 .studio-mast.open .mast-toggle::before,.studio-mast.open .mast-toggle::after {
  content:''; position:absolute; width:18px; height:1px; background:currentColor; transform:rotate(45deg);
 }
 .studio-mast.open .mast-toggle::after { transform:rotate(-45deg); }
 .studio-mast.enhanced.open #mast-nav {
  inset:72px 0 0; padding:24px 24px max(32px,env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  gap:8px; max-height:none; overflow-y:auto; overscroll-behavior:contain;
  border:0; color:var(--frost); background:linear-gradient(145deg,#29475e21,transparent 60%),var(--ink);
 }
 .studio-mast.open #mast-nav > a:not(.nav-contact),.studio-mast.open .mast-services > summary {
  display:inline-flex; align-items:center; align-self:flex-start;
  width:fit-content; max-width:100%; min-height:48px; padding:8px 16px;
  font-family:var(--display); font-weight:700;
  font-size:clamp(24px,6vw,28px); line-height:1.2; letter-spacing:-.02em;
  border-radius:999px; text-decoration:none; isolation:isolate;
 }
 .studio-mast.open .mast-services { width:100%; }
 .studio-mast.open .mast-services > summary { display:flex; align-items:center; gap:14px; }
 .studio-mast.open .mast-services > summary::after { width:8px; height:8px; flex:none; }
 .studio-mast.open #mast-nav .mast-services > .service-menu {
  margin:8px 0 12px; padding:8px; border:1px solid #a8c8c226; background:#ffffff04;
  border-radius:12px; box-shadow:none;
 }
 .studio-mast.open #mast-nav .mast-services .service-menu > a { font-size:16px; padding:12px; min-height:44px; }
 /* One contained active capsule replaces the desktop negative-inset bubble.
    A transparent link background prevents a second rectangular layer inside. */
 .studio-mast.open #mast-nav > a[aria-current] { color:var(--coral)!important; background:transparent; }
 .studio-mast.open #mast-nav > a[aria-current]::before {
  inset:0; border-radius:inherit;
  background:linear-gradient(180deg,#ffffff12,transparent 65%),color-mix(in srgb,var(--coral) 14%,transparent);
  box-shadow:inset 0 1px 1px #ffffff26;
 }
 .studio-mast.open #mast-nav > a:not(.nav-contact):is(:hover,:focus-visible):not([aria-current]),
 .studio-mast.open .mast-services > summary:is(:hover,:focus-visible) {
  background:color-mix(in srgb,var(--mist) 8%,transparent); color:var(--frost)!important;
 }
 .studio-mast.open #mast-nav .nav-liquid { display:none; }
 .studio-mast.open #mast-nav .language-switcher { margin:12px 0 0 4px; width:fit-content; }
 .studio-mast.open #mast-nav .language-switcher > summary { display:none; }
 .studio-mast.open #mast-nav .language-switcher__links {
  position:static; display:flex; gap:8px; margin:0; padding:0; min-width:0;
  background:none; border:0; box-shadow:none;
 }
 .studio-mast.open #mast-nav .language-switcher a { min-width:44px; min-height:44px; padding:10px; font-size:13px; }
 .studio-mast.open #mast-nav .nav-contact { align-self:flex-start; margin:16px 0 0 4px; min-height:44px; font-size:12px; padding:12px 24px; }
}
@media(max-width:360px) {
 body.studio-home #services .service-tile__bottom { padding:20px; }
 body.studio-home #about .about__intro p { font-size:16px; }
}

/* Mobile and touch cards communicate fully without a hover gesture. */
@media(max-width:780px), (hover:none), (pointer:coarse) {
 body .service-tile .service-tile__summary,
 body .drawing-panel .drawing-caption p,
 body.service-refined .deliverable p,
 body .studio-use-case .studio-use-case__copy p {
  display:block; visibility:visible; opacity:1; max-height:none;
  transform:none; overflow:visible; transition:none;
 }
 body .service-tile .service-tile__summary { margin-top:12px; }
 body .drawing-panel .drawing-caption p { margin-top:12px; }
 body :is(.service-tile__name,.diptych__name,.deliverable h3,.studio-use-case h3) { visibility:visible; opacity:1; }
}
@media(max-width:600px) {
 body.studio-home #services .service-tile__copy { max-width:100%; min-width:0; }
 body.studio-home #services .service-tile__bottom { padding-right:68px; align-items:flex-end; }
 body.studio-home #services .service-tile__summary { font-size:14px; line-height:1.5; }
 body.studio-home #services .service-tile__bottom .circle-arrow { position:absolute; right:20px; bottom:24px; }
 body.studio-home #services .service-tile::after { background:linear-gradient(0deg,var(--ink),color-mix(in srgb,var(--ink) 94%,transparent) 28%,transparent 70%); }
 body.studio-home .drawing-caption { padding-top:54px; background:linear-gradient(transparent,var(--ink) 28%); }
 body.studio-home .drawing-caption p { font-size:14px; line-height:1.55; }
 /* Keep interactive paper/tablet marks clear of the now permanent caption. */
 body.studio-home .drawing-surface { bottom:210px; }
}

/* The mobile menu trigger uses the same quiet, translucent plastic as
   secondary CTAs. Inset highlights leave the close icon layers available. */
@media(max-width:780px) {
 .studio-mast .mast-toggle,
 .studio-mast.open .mast-toggle {
  position:relative; min-height:44px; border:1px solid color-mix(in srgb,currentColor 26%,transparent);
  border-radius:999px; background:var(--secondary-surface); color:inherit;
  box-shadow:inset 0 1px 2px #ffffff70,inset 0 -2px 3px #101a2238,
    inset 0 0 0 3px #a8c8c214,0 2px 5px #101a2226;
  transition:transform 180ms ease,box-shadow 180ms ease,background 180ms ease;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
 }
 .studio-mast:not(.open) .mast-toggle {
  min-width:88px; padding:10px 20px;
  font:600 13px/1.3 var(--body),sans-serif; letter-spacing:.015em;
 }
 .studio-mast .mast-toggle:focus-visible {
  outline:2px solid var(--coral); outline-offset:4px;
 }
 .studio-mast .mast-toggle:active {
  transform:translateY(2px) scale(.98); background:var(--secondary-pressed);
  box-shadow:inset 0 4px 7px #101a2259,inset 0 -1px 2px #ffffff70,0 1px 2px #101a221a;
 }
}
@media(max-width:780px) and (hover:hover) {
 .studio-mast .mast-toggle:hover {
  transform:translateY(1px); background:var(--secondary-pressed);
  box-shadow:inset 0 2px 4px #101a2238,inset 0 -1px 2px #ffffff59,0 1px 3px #101a221a;
 }
 .studio-mast .mast-toggle:active { transform:translateY(2px) scale(.98); }
}
@media(max-width:780px) and (prefers-reduced-motion:reduce) {
 .studio-mast .mast-toggle { transition:none; }
}

/* Mobile75: equal visual breathing room around the project cards. The lower
   inset still contains the ground shadow and the upper inset protects focus rings. */
@media(max-width:780px) {
 body.studio-home #work .portfolio-section-head { margin-bottom:20px; }
 body.studio-home #work .selected-player .portfolio-grid { padding-block:12px 24px; }
 body.studio-home #work .selected-player .work-player__transport { margin-top:8px; }

 /* Natural-height credits replace the inherited fullscreen closing frame.
    Link hit areas remain 44px while only typography and inter-group gaps shrink. */
 body .cinematic-footer { min-height:0; }
 body .cinematic-footer .film-card,
 body.studio-page .studio-footer .film-card,
 body.legal-page .legal-footer .film-card {
  min-height:0; height:auto; padding:48px 20px 36px; gap:0;
 }
 body .cinematic-footer .film-mark img { width:96px; }
 body .cinematic-footer .film-title,
 body.studio-page .studio-footer .film-title {
  max-width:25ch; margin:22px 0 0; font-size:clamp(23px,5.8vw,28px); line-height:1.2;
 }
 body .cinematic-footer .film-founder { margin:18px 0 0; font-size:11px; line-height:1.45; letter-spacing:.08em; }
 body .cinematic-footer .film-founder strong,
 body.studio-page .studio-footer .film-founder strong { margin-top:6px; font-size:19px; line-height:1.2; letter-spacing:.025em; }
 body .cinematic-footer .film-nav { margin-top:20px; gap:2px 14px; }
 body .cinematic-footer .film-nav > a { min-height:44px; font-size:12px; letter-spacing:.035em; }
 body .cinematic-footer .footer-email { margin:8px 0 0; font-size:15px; }
 body .cinematic-footer .film-copyright { margin:14px 0 0; font-size:11px; }
 body .cinematic-footer .footer-legal { margin-top:8px; gap:0 20px; }
 body .cinematic-footer .footer-legal a { min-height:44px; font-size:12px; }
 body .cinematic-footer .film-bottom { padding:0 20px 16px; }
}

@media(max-width:780px) {
 /* Constrain the Studio's intrinsic grid tracks, rather than hiding page
    overflow. Wide translated text and image dimensions must fit the column. */
 body.studio-page #story { grid-template-columns:minmax(0,1fr); }
 body.studio-page :is(.studio-section__inner,.studio-hero__copy,.studio-hero__portrait,
   .recognition,.recognition__intro,.studio-use-cases,.studio-use-case__copy,
   .process-copy,.process-panels,.process-pictures,.studio-service-links,
   .client-feedback__inner) { min-width:0; max-width:100%; }
 body.studio-page .studio-use-cases { grid-template-columns:minmax(0,1fr); }
 body.studio-page .studio-service-links { flex-wrap:wrap; }
 body.studio-page .studio-service-links > a { min-width:0; max-width:100%; overflow-wrap:anywhere; }
 body.studio-page .recognition__credentials { grid-template-columns:repeat(2,minmax(0,1fr)); }
}