/* Shared hero rhythm. Page artwork and colours stay in their own stylesheets. */
.mobile-v3 {
  --hero-gutter: max(var(--gutter), calc((100% - 1280px) / 2));
  --hero-space: 64px;
  --hero-heading: clamp(54px, 5.8vw, 84px);
  --hero-ease: cubic-bezier(.22, .75, .2, 1);
}
.creative [data-page-hero="primary"] {
  padding: var(--hero-space) var(--hero-gutter);
  min-height: 500px;
  align-items: start;
}
.creative [data-page-hero="primary"]:is(.purpose-intro, .team-opening, .contact-section),
.creative [data-page-hero="primary"] .work-intro-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 7%;
  row-gap: 32px;
  align-items: start;
}
.creative [data-page-hero] [data-hero-kicker] {
  font: 600 11px/18px var(--font-body);
  letter-spacing: .055em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.creative [data-page-hero="primary"] h1 {
  font: 600 var(--hero-heading)/1.05 var(--font-display);
  letter-spacing: -.055em;
  margin: 0;
  max-width: none;
  text-wrap: initial;
}
.creative [data-page-hero="primary"] h1 em {
  font: italic 400 1.16em/1.02 "Instrument Serif", serif;
  letter-spacing: -.025em;
}
.creative [data-page-hero="primary"] .purpose-intro-description,
.creative [data-page-hero="primary"] .contact-copy > h1 + p {
  font-size: 15px;
  line-height: 1.8;
  margin-top: 28px;
  max-width: 520px;
}
.creative [data-page-hero="primary"] .purpose-links { margin-top: 28px; }
.creative [data-page-hero="primary"] .intro-work,
.creative [data-page-hero="primary"] .offer-editorial-photo { align-self: center; }
.creative [data-page-hero="primary"] .team-opening-copy,
.creative [data-page-hero="primary"] .work-intro-note { padding-top: 42px; }
.creative [data-page-hero="primary"] .team-opening-copy > p { margin: 0; }
.creative [data-page-hero="primary"] .work-intro-note { margin: 0; max-width: none; }
.creative [data-page-hero="primary"] .work-intro-note > .work-intro-count {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--red);
  padding-bottom: 16px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--line);
}
.creative [data-page-hero="primary"] .work-intro-note > p:not(.work-intro-count) {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}
.creative [data-page-hero="primary"].contact-section {
  min-height: calc(100svh - 82px);
}
.creative [data-page-hero="primary"] .contact-paper { margin-top: 0; }
/* Detail pages share the same outer grid, with room for their return link. */
.creative [data-page-hero="case"] {
  padding: var(--hero-space) var(--hero-gutter);
  align-items: start;
  gap: 7%;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.creative [data-page-hero="case"] .back-link,
.creative [data-page-hero="reading"] > .back-link { margin-bottom: 24px; }
.creative [data-page-hero="case"] .client-story-visual { align-self: center; }
.creative [data-page-hero="case"] h1 {
  font-size: clamp(50px, 5.3vw, 78px);
  line-height: 1.05;
  margin: 0;
}
/* Long articles retain their comfortable reading width. */
.creative [data-page-hero="reading"] { padding-top: var(--hero-space); }
.creative [data-page-hero="reading"] h1 {
  font-size: clamp(42px, 5vw, 65px);
  line-height: 1.08;
  margin-top: 0;
}
@media (max-width: 960px) and (min-width: 701px) {
  .mobile-v3 { --hero-space: 48px; --hero-heading: clamp(46px, 6.2vw, 60px); }
  .creative [data-page-hero="primary"]:is(.purpose-intro, .team-opening, .contact-section),
  .creative [data-page-hero="primary"] .work-intro-body { column-gap: 5%; }
}
@media (max-width: 700px) {
  .mobile-v3 { --hero-space: 36px; --hero-heading: clamp(39px, 11.5vw, 60px); }
  .creative [data-page-hero="primary"],
  .creative [data-page-hero="case"] {
    padding: var(--hero-space) var(--gutter) 40px;
    min-height: 0;
  }
  .creative [data-page-hero="primary"]:is(.purpose-intro, .team-opening, .contact-section),
  .creative [data-page-hero="primary"] .work-intro-body,
  .creative [data-page-hero="case"] { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .creative [data-page-hero] [data-hero-kicker] { font-size: 10px; margin-bottom: 20px; }
  .creative [data-page-hero="primary"] .team-opening-copy,
  .creative [data-page-hero="primary"] .work-intro-note { padding-top: 0; }
  .creative [data-page-hero="primary"] .purpose-intro-description,
  .creative [data-page-hero="primary"] .contact-copy > h1 + p { margin-top: 24px; }
  .creative [data-page-hero="primary"] .purpose-links { margin-top: 24px; }
  .creative [data-page-hero="case"] h1 { font-size: clamp(40px, 11.5vw, 60px); }
  .creative [data-page-hero="reading"] h1 { font-size: clamp(36px, 10.5vw, 48px); }
}
/* Identical title entrance on every internal page, including mobile.
   No JS or hidden default state; reduced-motion visitors see everything at once. */
@media (prefers-reduced-motion: no-preference) {
  .creative [data-page-hero] h1[data-title-arrival] {
    animation: af-hero-title .9s var(--hero-ease) both;
  }
  .creative [data-page-hero] [data-hero-kicker] {
    animation: af-hero-copy .65s var(--hero-ease) both;
  }
  .creative [data-page-hero] [data-hero-follow] {
    animation: af-hero-copy .8s .14s var(--hero-ease) both;
  }
  @keyframes af-hero-title { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes af-hero-copy { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .creative [data-page-hero] :is([data-title-arrival], [data-hero-kicker], [data-hero-follow]) {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}