/* Service-page arrangements of the homepage's existing components and tokens. */
.service-page { background: var(--ink); --hero-midnight: var(--ink); }
.service-page .service-hero-stage { height: calc(var(--hero-frame-height,100svh) * 2); position: relative; }
.service-page .service-hero {
  position: sticky; top: 0; min-height: max(780px,100svh); width: 100%; margin: 0;
  display: flex; align-items: center; padding: 140px var(--page-edge) 145px;
  --heading-accent: var(--coral);
}
.service-hero__media { position: absolute; inset: 0; }
.service-page .service-hero .hero__image {
  left: auto; right: 0; width: 70%; object-position: var(--service-focal,50% 42%);
  mask-image: linear-gradient(90deg,transparent,var(--black) 29%);
}
.service-page .service-hero::after {
  background: linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--ink) 92%,transparent) 22%,color-mix(in srgb,var(--ink) 44%,transparent) 51%,transparent 78%),linear-gradient(0deg,var(--ink),transparent 38%);
}
body.service-page main .service-hero h1 {
  font-size: var(--type-h1); font-weight: var(--display-weight); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); max-width: 13.5ch; margin: 0; overflow-wrap: normal;
}
.service-page .service-hero h1 em { color: var(--coral); font-style: normal; }
body.service-page main .service-hero .lead {
  color: var(--frost); max-width: 43ch; font-size: var(--type-body); line-height: var(--leading-body);
  margin: 24px 0 28px;
}
.service-page .hero__actions { display: flex; gap: 12px; }
.service-page .service-intro {
  position: relative; z-index: 4; width: 100%; margin-top: calc(var(--hero-frame-height,100svh) * -1);
  display: block; padding: clamp(80px,9vw,130px) 0 clamp(135px,13vw,200px);
  color: var(--frost); background: linear-gradient(180deg,transparent,var(--ink) 64px);
}
.service-intro::after {
  content: ''; position: absolute; inset: auto 0 0; height: clamp(110px,12vw,180px); pointer-events: none;
  background: var(--editorial-fade);
}
.service-intro .content-split { transform: translate3d(0,var(--services-rise,0px),0); }
.service-page main > :is(.deliverables,.review-offer,.flow,.related) { position: relative; z-index: 4; }
.service-page .service-intro p { color: var(--text-muted-dark); margin: 0; }
.service-page .service-intro h2 { color: var(--frost); }
.service-page .deliverables { padding-block: var(--section-space); background: var(--frost); }
.service-page .section-head { align-items: start; gap: clamp(26px,5vw,80px); margin-bottom: 40px; }
.service-page .section-head h2 { max-width: 16ch; }
.service-page .section-head p { color: var(--reading); max-width: 43ch; }
.service-page .deliverables-grid { gap: 4px; }
.service-page .deliverable {
  background: var(--white); color: var(--ink); border-radius: 6px;
  min-height: 245px; padding: clamp(26px,3.2vw,48px);
}
.service-page .deliverable .number { color: var(--reading); font: 500 var(--type-small)/1.4 var(--body); margin-bottom: 30px; }
.service-page .deliverable h3 { color: var(--ink); font-size: var(--type-h3); max-width: 22ch; margin-block: 0 14px; }
.service-page .deliverable p { color: var(--reading); max-width: 48ch; }
.service-page .review-offer { background: var(--surface-soft); }
.service-page .review-offer .offer-name { color: var(--reading); }
.service-page .review-offer .content-split { align-items: center; }
.service-page .flow { padding-block: var(--section-space); background: var(--frost); }
.service-page .flow-title { font-size: var(--type-h2); margin-bottom: 40px; max-width: 20ch; }
.service-page .flow-steps { border-color: var(--line); }
.service-page .flow-step { padding-block: 26px; border-color: var(--line); min-height: 225px; }
.service-page .flow-step strong { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(24px,2.15vw,32px); line-height: 1.15; letter-spacing: var(--tracking-heading); }
.service-page .flow-step p { color: var(--reading); margin-bottom: 0; max-width: 25ch; }
.service-page .flow-step .mono { font: 500 var(--type-small)/1.4 var(--body); color: var(--reading); }
.service-page .related { background: var(--frost); color: var(--ink); padding-block: 0 var(--section-space); --focus: var(--storm); }
.service-page .related .section-head p { color: var(--reading); }
.service-page .related-grid { gap: 24px; }
.service-page .related-grid:has(> :nth-child(3)) { grid-template-columns: repeat(3,minmax(0,1fr)); }
.service-page .related .portfolio-card__top { margin: 0; padding: 0; border: 0; }
.service-page .related .portfolio-card__top strong { display: block; font: var(--display-weight) var(--type-card)/1.15 var(--display); letter-spacing: var(--tracking-heading); }
.service-page .related .portfolio-card__top small { display: block; margin-top: 12px; color: var(--reading); font: 400 16px/1.55 var(--body); }
.service-page .related .portfolio-card__copy { transition: background .3s ease; border-radius: 0 0 8px 8px; }
.service-page .related .portfolio-card__link:is(:hover,:focus-visible) .portfolio-card__copy { background: var(--coral); }
.service-page .related .portfolio-card__link:is(:hover,:focus-visible) small { color: var(--ink); }
.service-page .contact-stage { background: var(--contact-surface); }
.service-page .contact-stage .contact {
  min-height: 64svh; padding: clamp(85px,10vw,140px) var(--page-edge); background: var(--contact-surface);
}
body.service-page .contact__title { font-size: var(--type-h2); max-width: 19ch; margin-inline: auto; text-align: center; color: var(--frost); }
.service-page .contact__bottom { margin-top: 28px; }
.service-page .contact > .container { width: min(100%,1440px); margin-inline: auto; }
.service-page .cinematic-footer .film-card { min-height: min(900px,100svh); }
.service-page .hero, .service-page .contact { --heading-accent: var(--coral); --focus: var(--mist); }
@media(max-width:1000px) {
  .service-page .service-hero { padding-block: 150px 135px; min-height: max(820px,100svh); }
  .service-page .service-hero .hero__image { width: 84%; }
  .service-page .service-hero::after { background: linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--ink) 92%,transparent) 18%,color-mix(in srgb,var(--ink) 55%,transparent) 52%,transparent),linear-gradient(0deg,var(--ink),transparent 60%); }
  body.service-page main .service-hero h1 { max-width: 12.5ch; }
  body.service-page main .service-hero .lead { max-width: 36ch; }
  .service-page .related-grid:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr; }
  .service-page .flow-steps { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .service-page .flow-step { min-height: 205px; }
}
@media(max-width:720px) {
  .service-page .service-hero { min-height: max(850px,100svh); align-items: end; padding: 360px var(--page-edge) 92px; }
  .service-page .service-hero .hero__image {
    inset: 0 0 auto; width: 100%; height: 66%; object-position: var(--service-focal-mobile,50% 36%);
    mask-image: linear-gradient(180deg,var(--black) 65%,transparent);
  }
  .service-page .service-hero::after { background: linear-gradient(0deg,var(--ink) 12%,color-mix(in srgb,var(--ink) 97%,transparent) 42%,color-mix(in srgb,var(--ink) 15%,transparent) 70%,transparent); }
  body.service-page main .service-hero h1 { font-size: var(--type-h1); max-width: 15ch; }
  body.service-page main .service-hero .lead { max-width: 42ch; margin-block: 20px 24px; }
  .service-page .service-intro { padding-top: 60px; padding-bottom: 160px; }
  .service-intro::after { height: 110px; }
  .service-page .deliverable { min-height: 230px; }
  .service-page .section-head { margin-bottom: 28px; }
  .service-page .contact-stage .contact { min-height: 60svh; padding-block: 85px; }
  .service-page .related-grid, .service-page .related-grid:has(> :nth-child(3)) { grid-template-columns: 1fr; }
}
@media(max-width:600px) {
  .service-page .flow-steps { grid-template-columns: 1fr; gap: 0; }
  .service-page .flow-step { min-height: 0; padding: 24px 0; }
  .service-page .flow-step p { max-width: 42ch; }
}
@media(prefers-reduced-motion:reduce), (max-height:650px) {
  .service-page .service-hero-stage { height: auto; }
  .service-page .service-hero { position: relative; }
  .service-page .service-intro { margin-top: 0; }
  .service-intro .content-split { transform: none; }
}