/* Shared photographic interaction and type scale for every page. */
:root {
  --type-page: clamp(39px, 4.7vw, 70px);
  --type-section: clamp(32px, 3.8vw, 54px);
  --type-card: clamp(22px, 2vw, 28px);
  --type-body: 18px;
  --type-label: 10px;
}
.about-hero h1, .contact-copy h1, .editorial-hero h1 {
  font-size: var(--type-page); line-height: 1.06; letter-spacing: -.055em; font-weight: 400;
}
.about-hero h1 strong { font-weight: 700; }
h2, .focus-heading h2, .purpose-grid h2, .work-copy h2, .closing-cta h2 {
  font-size: var(--type-section); line-height: 1.1; letter-spacing: -.05em; font-weight: 600;
}
.principle-row h3, .focus-list h3 { font-size: var(--type-card); line-height: 1.2; font-weight: 500; }
.intro-text > p, .intro-text > p + p, .about-body p, .about-body p.lead,
.focus-heading > p:not(.eyebrow), .purpose-grid p, .work-copy > p:last-child,
.commercial-intro p, .commercial-story p:not(.eyebrow),
.about-hero .hero-description, .contact-copy .hero-description, .quote-card blockquote,
.principle-row p {
  font-size: var(--type-body); line-height: 1.8; letter-spacing: 0;
}
.eyebrow, .story-heading .eyebrow, .closing-cta .eyebrow, .about-wide-caption .eyebrow,
.contact-panel .eyebrow { font-size: var(--type-label); line-height: 1.7; letter-spacing: .16em; }
/* The home headline and its matching supporting lines retain their own scale. */
.hero-cinematic .eyebrow, .hero-cinematic .hero-description { font-size: 15px; letter-spacing: .015em; line-height: 1.6; }
.contact-panel h2 { font-size: 32px; line-height: 1.1; }
.form-intro, .draft-result p, .direct-email { font-size: 14px; line-height: 1.7; }
.contact-panel label { font-size: 13px; }
.contact-panel input, .contact-panel textarea, .contact-panel select { font-size: 16px; }
.photo-frame { display: block; overflow: hidden; }
.photo-frame img { filter: grayscale(1); scale: 1; }
.commercial-intro > .photo-frame { min-width: 0; }
.commercial-gallery > .photo-frame { width: 100%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .photo-frame img { transition: filter 650ms ease, scale 850ms cubic-bezier(.22,1,.36,1); }
  .photo-frame:hover img, .hero-cinematic:hover .cinematic-photo img { filter: grayscale(0); scale: 1.025; }
  .brand-mark, .about-emblem { transition: opacity 300ms ease; }
  .brand:hover .brand-mark, .about-emblem:hover { opacity: .75; }
}
@media (max-width:760px) {
  :root { --type-page: clamp(43px,8.8vw,65px); --type-section: 36px; --type-card: 22px; --type-body: 16px; }
  .hero-cinematic .eyebrow, .hero-cinematic .hero-description { font-size: 13px; }
  .focus-list { min-width: 0; }
  .focus-list h3 { font-size: 20px; }
}
@media (max-width:375px) {
  :root { --type-page: 39px; --type-section: 32px; --type-card: 21px; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .photo-frame img { transition: none; scale: 1; }
}

/* One shared inner-page hero treatment, with the home masthead kept distinct. */
.about-hero h1, .contact-copy h1, .editorial-hero h1 {
  font-family: var(--display-font); font-weight: 400; line-height: 1.06; letter-spacing: -.055em;
}
.about-hero h1 strong { font-weight: 700; }
.page-hero-intro { max-width: 620px; margin-top: 28px; font-size: var(--type-body); line-height: 1.8; color: #bdbdb7; }
.partnership-heading { min-width: 0; }
@media (max-width:350px) { :root { --type-page: 37px; } }

/* Keep the introductory About paragraph the same ink as its body copy. */
.about-body p.lead { color: #4b4b46; }

/* Keep the image statement on three deliberate lines, even on small phones. */
.about-wide-caption { right:25px; }
.about-wide-caption .caption-line { white-space:nowrap; }
@media (max-width:760px) {
  .about-wide-caption > p:last-child { font-size:clamp(20px,6.4vw,27px); }
}

/* Mobile colour reveal changes only the filter, never photo position or size. */
@media (max-width:760px), (hover:none), (pointer:coarse) {
  .photo-frame img { transition:filter 1100ms ease; }
  .photo-frame img.is-colour-revealed { filter:grayscale(0); }
}
@media (prefers-reduced-motion:reduce) {
  .photo-frame img { transition:none; }
}

.inline-content-link { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
.inline-content-link:focus-visible { outline:2px solid currentColor; outline-offset:4px; }