/* One editorial grid and spacing rhythm. Pigments and font roles stay in the shared system. */
:root {
 --editorial-section:clamp(120px,9vw,144px);
 --editorial-grid-gap:clamp(72px,5.5vw,80px);
 --editorial-columns: minmax(0,1fr) minmax(0,1fr);
 --editorial-column-gap:clamp(40px,6vw,96px);
 --editorial-copy:52ch;
 --editorial-action-gap:40px;
}
body.studio-home :is(#services .section-head,.about__intro),
body.studio-inner :is(#story > .content-split,.review-offer > .content-split),
body.studio-inner.service-refined .service-intro .brand-intro-card {
 display:grid; grid-template-columns:var(--editorial-columns);
 align-items:start; gap:var(--editorial-column-gap);
}
body.studio-home :is(#services .section-head,.about__intro) { margin:0 0 var(--editorial-grid-gap); }
body.studio-home :is(#services .section-head,.about__intro) > * { min-width:0; margin:0; }
body.studio-home :is(#services .section-head__side,.about__intro p) {
 max-width:var(--editorial-copy); margin:0; line-height:1.65;
}
body.studio-home .about__intro .content-link-menu { margin-top:var(--editorial-action-gap); }
body.studio-home .about__intro .content-link { margin-top:0; }
body.studio-home :is(#services,#about) { padding-block:var(--editorial-section); }
body.studio-home #services .section-title { max-width:17ch; }
body.studio-home .about__intro .section-title { max-width:16ch; }
body.studio-inner :is(.section-head,.content-split) { align-items:start; }
body .section-head :is(h2,p),body .content-split > h2 { margin-top:0; }
body :is(.portfolio-card__top h2,.portfolio-card__top h3) { transition:color 300ms ease; }
body .portfolio-card__link:is(:hover,:focus-visible) .portfolio-card__top :is(h2,h3) { color:var(--coral); }
body :is(.shiny-button,.nav-contact) { text-align:center; white-space:normal; }
body :is(.section-head,.about__intro,.content-split) p { text-wrap:pretty; }
body :is(.section-head,.about__intro,.content-split) > * { min-width:0; }
.footer-email { display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin:20px 0 8px; font:500 16px/1.5 var(--body); color:var(--frost); text-underline-offset:5px; overflow-wrap:anywhere; }
.footer-email:is(:hover,:focus-visible),.inquiry-email:is(:hover,:focus-visible) { color:var(--coral); }
#inquiryDialog .inquiry-email { display:inline-flex; align-items:center; min-height:44px; margin-top:12px; color:var(--mist); font:500 16px/1.5 var(--body); text-underline-offset:4px; }
#inquiryDialog .dialog__inside { padding:36px 32px 32px; }
#inquiryDialog .inquiry-form { margin-top:24px; gap:22px 20px; }
#inquiryDialog .inquiry-privacy { line-height:1.6; margin-block:20px 0; }
body :is(.case-block,.case-outcome) p { max-width:62ch; }
@media (max-width:1100px) {
 :root { --editorial-section:96px; --editorial-grid-gap:56px; --editorial-column-gap:40px; --editorial-action-gap:32px; }
}
@media (max-width:780px) {
 :root { --editorial-columns:minmax(0,1fr); --editorial-section:72px; --editorial-grid-gap:44px; --editorial-column-gap:24px; --editorial-action-gap:28px; }
 body.studio-home :is(#services .section-head,.about__intro) { row-gap:24px; }
 body.studio-home :is(#services .section-title,.about__intro .section-title) { max-width:20ch; }
 #inquiryDialog .dialog__inside { padding:32px 24px 28px; }
}
@media(prefers-reduced-motion:reduce) { body :is(.portfolio-card__top h2,.portfolio-card__top h3) { transition:none; } }

/* One quiet ring for interactive image cards, matching the service treatment.
   A single outline is used; Work overview uses its existing inset pseudo-ring. */
body :is(.service-tile,.drawing-panel,.studio-use-case,.deliverable):is(:hover,:focus-visible,:focus-within) { outline:2px solid var(--card-hover-ring); outline-offset:-2px; }
body .portfolio-card__link:is(:hover,:focus-visible) { outline:2px solid var(--card-hover-ring); outline-offset:5px; }
body.portfolio-overview .portfolio-card__link:is(:hover,:focus-visible) { outline:none; }

/* Shared blue contact shadow: anchored underneath every project card.
   Keep hover rings, imagery and card geometry independent of the shadow. */
body .portfolio-card { box-shadow:var(--project-ground-shadow); }
@media(max-width:780px) {
 .cinematic-footer .footer-legal {
  display:flex; flex-direction:row; flex-wrap:wrap;
  justify-content:center; align-items:center; align-self:center;
  width:100%; margin-inline:auto; text-align:center; gap:8px 24px;
 }
 .cinematic-footer .footer-legal a { display:inline-flex; align-items:center; justify-content:center; text-align:center; }
}

/* Homepage editorial grid: one edge and width for all left-aligned sections.
   Contact panels retain their intentionally centred composition. */
body.studio-home { --gutter:var(--page-edge); --home-content-width:var(--wide,1600px); }
body.studio-home #approach .process-layout { width:min(var(--home-content-width),100%); }
body.studio-home #work > .portfolio-shell,
body.studio-home .client-feedback__inner {
 width:min(var(--home-content-width),calc(100% - 2 * var(--page-edge)));
 margin-inline:auto;
}

/* Shared content edges: full-bleed scenery, one 1440px editorial canvas. */
:root { --content-max:1440px; --wide:var(--content-max); }
body.studio-home { --home-content-width:var(--content-max); }
body .mast-inner {
 width:min(var(--content-max),calc(100% - 2 * var(--page-edge)));
 padding-inline:0;
}
body :is(.container,.wrap,.studio-section__inner) { max-width:var(--content-max); }
body .wrap,
body .portfolio-shell,
body .client-feedback__inner {
 width:min(var(--content-max),calc(100% - 2 * var(--page-edge)));
 margin-inline:auto;
}
body .process-layout { width:min(var(--content-max),100%); margin-inline:auto; }
body.studio-page .studio-hero--vhs {
 padding-inline:max(var(--page-edge),calc((100% - var(--content-max)) / 2));
}
body .cinematic-hero .hero__content { max-width:var(--content-max); }
body .cinematic-footer .film-card {
 width:100%; max-width:none; margin-inline:0;
 padding-inline:max(var(--page-edge),calc((100% - var(--content-max)) / 2));
}
/* Size the whole closing frame, including any links below the film card. */
body:has(.contact-stage) > .cinematic-footer {
 display:flex; flex-direction:column;
 min-height:100vh; min-height:100dvh;
}
body:has(.contact-stage) > .cinematic-footer > .film-card {
 flex:1 0 auto; min-height:0;
}
/* Preserve the original scroll-over and feathered VHS reveal with shorter CTAs. */
@media(prefers-reduced-motion:no-preference) and (min-height:651px) {
 body:has(.contact-stage) > .cinematic-footer {
  margin-top:calc(-1 * var(--contact-frame-height,100svh));
 }
 body .contact-stage > #contact { position:sticky; top:0; }
}
@media(prefers-reduced-motion:reduce),(max-height:650px) {
 body:has(.contact-stage) > .cinematic-footer { margin-top:0; }
 body .contact-stage > #contact { position:relative; }
}