/* About page art direction and motion. Shared legacy motion is neutralized
   here so this page has one predictable reveal system. */
.about-page .about-section { padding-top: clamp(68px, 8vw, 112px); }
.about-page .about-heading :is(h1, h2) { max-width: 8ch; text-wrap: balance; }
.about-page .about-title-line { display: block; }
.about-page .about-grid { align-items: center; }
.about-page .about-grid > *,
.about-page .about-profile > * { min-width: 0; }
.about-page .about-copy p,
.about-page .about-category p {
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.75;
  text-align: left;
  text-align-last: left;
}
.about-page .about-copy p { margin-bottom: 22px; }
.about-page .about-copy p:last-child { margin-bottom: 0; }
.about-page .about-label,
.about-page .section-number,
.about-page .about-category h3 { font-size: 12px; line-height: 1.6; }
.about-page .about-portrait figcaption {
  padding-top: 16px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .06em;
}
.about-page .about-facts { column-gap: 16px; margin-top: 30px; padding-top: 22px; }
.about-page .about-facts span { font-size: 11px; line-height: 1.5; letter-spacing: .05em; }
.about-page .about-facts strong { font-size: 13px; line-height: 1.55; }
.about-page .about-story { margin-top: clamp(64px, 6vw, 88px); padding-top: 32px; }
.about-page .about-story-heading { margin-bottom: 28px; }
.about-page .about-journey-heading { margin-bottom: 0; }
.about-page .about-experience-copy { row-gap: 22px; }
.about-page .about-experience-copy p { margin-bottom: 0; }
.about-page .about-final-credit { font-size: 12px; }
.about-page .about-work-footer .about-gallery-link { min-height: 48px; padding-inline: 20px; font-size: 14px; }
.about-page .about-journey,
.about-page .about-approach,
.about-page .about-experience,
.about-page .about-now { scroll-margin-top: 108px; }
.about-page .about-story-heading h2,
.about-page .about-final-copy h2 { text-wrap: balance; }

/* The signature is a fixed masthead mark: keep it still on entry and hover. */
.about-page .site-header .wordmark,
.about-page .site-header .wordmark:hover,
.about-page .site-header .wordmark:focus-visible,
.about-page .site-header .wordmark-signature,
.about-page .site-header .wordmark-note {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (min-width: 701px) and (max-width: 1000px) {
  .about-page .about-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: clamp(26px, 4vw, 44px);
    row-gap: 34px;
  }
  .about-page .about-heading { grid-column: 1 / -1; }
  .about-page .about-heading :is(h1, h2) {
    display: flex;
    flex-wrap: wrap;
    column-gap: .2em;
    max-width: none;
  }
  .about-page .about-profile {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(26px, 4vw, 44px);
  }
  .about-page .about-portrait,
  .about-page .about-bio { grid-row: auto; grid-column: auto; }
}

@media (max-width: 700px) {
  .about-page .about-section { padding-top: 58px; }
  .about-page .about-grid { gap: 30px; }
  .about-page .about-profile { gap: 28px; }
  .about-page .about-heading :is(h1, h2) { max-width: 9ch; }
  .about-page .about-aside { font-size: 18px; line-height: 1.45; }
  .about-page .about-portrait figcaption { flex-wrap: wrap; white-space: normal; }
  .about-page .about-story { margin-top: 60px; padding-top: 28px; }
  .about-page .about-story-heading { margin-bottom: 22px; }
  .about-page .about-journey-heading { margin-bottom: 0; }
  .about-page .about-categories { row-gap: 36px; }
  .about-page .about-experience-copy { row-gap: 22px; }
}

@media (max-width: 380px) {
  .about-page .about-facts { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .about-page .about-facts > div { gap: 5px; }
}

/* Old About keyframes were scattered through the shared stylesheet. Disable
   those page-specific load animations; the states below own all About motion. */
body.about-page .about-section *,
body.about-page .about-section::before,
body.about-page .about-section::after,
body.about-page .contact-section > *,
body.about-page .site-footer:not(.editorial-footer) > * { animation: none !important; }

@media (prefers-reduced-motion: no-preference) {
  :root {
    --about-motion-ease: cubic-bezier(.19, 1, .22, 1);
    --about-motion-duration: 680ms;
    --about-motion-small: 620ms;
  }

  /* One entrance owner: keyframes keep a defined hidden first frame on
     both cold and cached loads. Legacy transitions cannot skip the copy. */
  @keyframes about-intro-arrival {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  html.has-reveal body.about-page.is-about-arriving:not(.is-about-entered) .about-heading > .section-number,
html.has-reveal body.about-page.is-about-arriving:not(.is-about-entered) .about-heading .about-aside,
html.has-reveal body.about-page.is-about-arriving:not(.is-about-entered) .about-profile .about-portrait,
html.has-reveal body.about-page.is-about-arriving:not(.is-about-entered) .about-profile .about-portrait figcaption,
html.has-reveal body.about-page.is-about-arriving:not(.is-about-entered) .about-profile .about-lead,
html.has-reveal body.about-page.is-about-arriving:not(.is-about-entered) .about-profile .about-copy > p,
html.has-reveal body.about-page.is-about-arriving:not(.is-about-entered) .about-profile .about-facts > div,
html.has-reveal body.about-page.is-about-arriving:not(.is-about-entered) .contact-float-button {
    opacity: 0 !important;
    visibility: visible !important;
    transform: translate3d(0, 12px, 0) !important;
  }
  html.has-reveal body.about-page.is-about-arriving.is-about-entered .about-heading > .section-number,
html.has-reveal body.about-page.is-about-arriving.is-about-entered .about-heading .about-aside,
html.has-reveal body.about-page.is-about-arriving.is-about-entered .about-profile .about-portrait,
html.has-reveal body.about-page.is-about-arriving.is-about-entered .about-profile .about-portrait figcaption,
html.has-reveal body.about-page.is-about-arriving.is-about-entered .about-profile .about-lead,
html.has-reveal body.about-page.is-about-arriving.is-about-entered .about-profile .about-copy > p,
html.has-reveal body.about-page.is-about-arriving.is-about-entered .about-profile .about-facts > div,
html.has-reveal body.about-page.is-about-arriving.is-about-entered .contact-float-button {
    animation: about-intro-arrival 850ms var(--about-motion-ease) var(--about-entry-delay, 0ms) both !important;
    transition: none !important;
    visibility: visible !important;
    will-change: opacity, transform;
  }
  html.has-reveal body.about-page.is-about-arriving .about-profile .portrait-frame img {
    transform: none !important;
    transition: none !important;
  }

  /* The title lines use the same restrained, independent entrance as the
     Work headline. Keyframes give the two lines a reliable start on every
     reload, without depending on the browser catching a transition frame. */
  @keyframes about-title-line-arrival {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  html.has-reveal body.about-page.is-about-arriving:not(.is-about-entered) .about-heading .about-title-line {
    opacity: 0 !important;
    visibility: visible !important;
    transform: translate3d(0, 12px, 0) !important;
  }

  html.has-reveal body.about-page.is-about-arriving.is-about-entered .about-heading .about-title-line {
    animation: about-title-line-arrival 800ms var(--about-motion-ease) both !important;
    animation-delay: var(--about-entry-delay, 0ms) !important;
    will-change: opacity, transform;
  }

  body.about-page.is-about-arriving .about-heading > .section-number { --about-entry-delay: 0ms; }
  body.about-page.is-about-arriving .about-title-line:first-child { --about-entry-delay: 0ms; }
  body.about-page.is-about-arriving .about-title-line:last-child { --about-entry-delay: 160ms; }
  body.about-page.is-about-arriving .about-heading .about-aside { --about-entry-delay: 200ms; }
  body.about-page.is-about-arriving .about-profile .about-portrait { --about-entry-delay: 0ms; }
  body.about-page.is-about-arriving .about-profile .about-portrait figcaption { --about-entry-delay: 140ms; }
  body.about-page.is-about-arriving .about-profile .about-lead { --about-entry-delay: 180ms; }
  body.about-page.is-about-arriving .about-profile .about-copy > p:nth-child(1) { --about-entry-delay: 270ms; }
  body.about-page.is-about-arriving .about-profile .about-copy > p:nth-child(2) { --about-entry-delay: 350ms; }
  body.about-page.is-about-arriving .about-profile .about-facts > div:nth-child(1) { --about-entry-delay: 440ms; }
  body.about-page.is-about-arriving .about-profile .about-facts > div:nth-child(2) { --about-entry-delay: 500ms; }
  body.about-page.is-about-arriving .about-profile .about-facts > div:nth-child(3) { --about-entry-delay: 560ms; }
  body.about-page.is-about-arriving .contact-float-button { --about-entry-delay: 380ms; }

  /* Reveal wrappers are triggers only; keep their geometry stable and animate
     the meaningful inner elements instead of stacking multiple fades. */
  html.has-reveal body.about-page .about-heading :is(h1, h2),
  html.has-reveal body.about-page .about-profile .portrait-frame,
  html.has-reveal body.about-page .about-profile .about-bio,
  html.has-reveal body.about-page .about-profile .about-copy,
  html.has-reveal body.about-page .about-profile .about-facts,
  html.has-reveal body.about-page .about-heading,
  html.has-reveal body.about-page .about-profile,
  html.has-reveal body.about-page .about-story,
  html.has-reveal body.about-page .about-final,
  html.has-reveal body.about-page .about-story-heading,
  html.has-reveal body.about-page .about-journey-copy,
  html.has-reveal body.about-page .about-approach-copy,
  html.has-reveal body.about-page .about-approach-text,
  html.has-reveal body.about-page .about-experience-body,
  html.has-reveal body.about-page .about-experience-images,
  html.has-reveal body.about-page .about-experience-copy,
  html.has-reveal body.about-page .about-categories,
  html.has-reveal body.about-page .about-now-copy,
  html.has-reveal body.about-page .about-final-copy,
  html.has-reveal body.about-page .contact-content,
  html.has-reveal body.about-page .contact-bottom,
  html.has-reveal body.about-page .contact-section-label,
  html.has-reveal body.about-page .contact-section,
  html.has-reveal body.about-page .about-category,
  html.has-reveal body.about-page .site-footer:not(.editorial-footer) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  /* The figure owns the portrait fade. Legacy pixel-level opacity must not
     keep an already animated portrait invisible until a scroll trigger. */
  html.has-reveal body.about-page .about-profile .portrait-frame img {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
  }

  /* First view. Desktop profile uses display:contents, so it follows the
     heading trigger there; tablet and mobile use the profile trigger. */
  html.has-reveal body.about-page:not(.is-about-arriving) .about-heading :is(.section-number, .about-title-line, .about-aside),
  html.has-reveal body.about-page:not(.is-about-arriving) .about-profile :is(.about-portrait, .about-portrait figcaption, .about-lead, .about-copy > p, .about-facts > div) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 12px, 0) !important;
    transition:
      opacity var(--about-motion-small) var(--about-motion-ease),
      transform var(--about-motion-small) var(--about-motion-ease),
      visibility 0s linear var(--about-motion-small) !important;
    transition-delay: var(--about-scroll-delay, 0ms) !important;
    animation: none !important;
    will-change: auto !important;
  }

  html.has-reveal body.about-page:not(.is-about-arriving) .about-heading.is-visible :is(.section-number, .about-title-line, .about-aside),
  html.has-reveal body.about-page:not(.is-about-arriving) .about-profile.is-visible :is(.about-portrait, .about-portrait figcaption, .about-lead, .about-copy > p, .about-facts > div) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html.has-reveal body.about-page .about-profile .about-portrait { --about-scroll-delay: 0ms; }
  html.has-reveal body.about-page .about-profile .about-portrait figcaption { --about-scroll-delay: 80ms; }
  html.has-reveal body.about-page .about-profile .about-lead { --about-scroll-delay: 80ms; }
  html.has-reveal body.about-page .about-profile .about-copy > p { --about-scroll-delay: 120ms; }
  html.has-reveal body.about-page .about-profile .about-facts > div { --about-scroll-delay: 180ms; }

  @media (min-width: 1001px) {
    html.has-reveal body.about-page:not(.is-about-arriving) .about-heading.is-visible ~ .about-profile :is(.about-portrait, .about-portrait figcaption, .about-lead, .about-copy > p, .about-facts > div) {
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
    }
  }

  /* Section divider/frame first, followed by a short heading and copy cascade.
     All transform/opacity motion is one-shot; scrolling back never hides text. */
  html.has-reveal body.about-page .about-story {
    border-top-color: transparent;
    transition: border-color var(--theme-colour-duration, 680ms) var(--about-motion-ease) !important;
  }
  html.has-reveal body.about-page .about-story.is-visible { border-top-color: var(--rule); }

  html.has-reveal body.about-page .about-story :is(.about-story-heading .about-label, .about-story-heading h2, .about-journey-copy p, .about-approach-statement, .about-approach-text p, .about-experience-copy p, .about-now-copy p, .about-work-footer, .about-final-copy h2, .about-final-credit) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 8px, 0) !important;
    transition:
      opacity var(--about-motion-small) var(--about-motion-ease),
      transform var(--about-motion-small) var(--about-motion-ease),
      visibility 0s linear var(--about-motion-small) !important;
    transition-delay: var(--about-scroll-delay, 80ms) !important;
    animation: none !important;
    will-change: auto !important;
  }

  html.has-reveal body.about-page .about-story.is-visible :is(.about-story-heading .about-label, .about-story-heading h2, .about-journey-copy p, .about-approach-statement, .about-approach-text p, .about-experience-copy p, .about-now-copy p, .about-work-footer, .about-final-copy h2, .about-final-credit) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html.has-reveal body.about-page .about-story .about-story-heading .about-label { --about-scroll-delay: 0ms; }
  html.has-reveal body.about-page .about-story .about-story-heading h2 { --about-scroll-delay: 60ms; }
  html.has-reveal body.about-page .about-story :is(.about-journey-copy p, .about-approach-statement, .about-approach-text p, .about-experience-copy p, .about-final-copy h2) { --about-scroll-delay: 100ms; }
  html.has-reveal body.about-page .about-final-credit,
  html.has-reveal body.about-page .about-story .about-work-footer { --about-scroll-delay: 160ms; }
  html.has-reveal body.about-page .about-experience-images .about-image:nth-child(2) { --about-image-delay: 60ms; }

  /* Each subject card gets its own trigger so a long grid does not reveal all
     three cards before the visitor reaches them. */
  html.has-reveal body.about-page .about-category :is(h4, p) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 11px, 0) !important;
    transition:
      opacity var(--about-motion-small) var(--about-motion-ease),
      transform var(--about-motion-small) var(--about-motion-ease),
      visibility 0s linear var(--about-motion-small) !important;
    transition-delay: var(--about-card-delay, 100ms) !important;
    animation: none !important;
  }
  html.has-reveal body.about-page .about-category.is-visible :is(h4, p) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  html.has-reveal body.about-page .about-category h3 { --about-card-delay: 105ms; }
  html.has-reveal body.about-page .about-category p { --about-card-delay: 175ms; }

  /* Start photo motion only after the browser has loaded and decoded the
     image. This prevents a late lazy-load paint from appearing as a flash. */
  html.has-reveal body.about-page .about-image {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 8px, 0) !important;
    transition:
      opacity 820ms var(--about-motion-ease),
      transform 920ms var(--about-motion-ease),
      visibility 0s linear 0s !important;
    transition-delay: var(--about-image-delay, 0ms) !important;
    animation: none !important;
    will-change: auto !important;
  }
  html.has-reveal body.about-page .about-story.is-visible > .about-image:not(.is-image-visible),
  html.has-reveal body.about-page .about-story.is-visible .about-experience-images .about-image:not(.is-image-visible),
  html.has-reveal body.about-page .about-category.is-visible .about-image:not(.is-image-visible) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 8px, 0) !important;
  }
  html.has-reveal body.about-page .about-image.is-image-ready { will-change: opacity, transform; }
  html.has-reveal body.about-page .about-image.is-image-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  html.has-reveal body.about-page .about-image img {
    opacity: 1 !important;
    transform: scale(1.015) !important;
    transition: transform 1000ms var(--about-motion-ease) !important;
    transition-delay: var(--about-image-delay, 0ms) !important;
    will-change: auto !important;
  }
  html.has-reveal body.about-page .about-image.is-image-visible img {
    transform: scale(1) !important;
  }

  /* Contact surface begins first; the eyebrow and content then follow. */
  html.has-reveal body.about-page .contact-section {
    background-color: transparent;
    transition: background-color var(--theme-colour-duration, 760ms) var(--about-motion-ease) !important;
  }
  html.has-reveal body.about-page .contact-section.is-visible {
    background-color: var(--about-contact-surface, var(--paper-contact));
  }
  html[data-theme="dark"].has-reveal body.about-page .contact-section {
    --about-contact-surface: var(--bg);
  }

  html.has-reveal body.about-page :is(.contact-section-label, .contact-bottom, .contact-content h2, .contact-aside > p, .contact-actions a, .site-footer:not(.editorial-footer) > *) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 8px, 0) !important;
    transition:
      opacity var(--about-motion-small) var(--about-motion-ease),
      transform var(--about-motion-small) var(--about-motion-ease),
      visibility 0s linear var(--about-motion-small) !important;
    transition-delay: var(--about-scroll-delay, 80ms) !important;
    animation: none !important;
    will-change: auto !important;
  }
  html.has-reveal body.about-page .contact-section-label.is-visible,
  html.has-reveal body.about-page .contact-content.is-visible :is(h2, .contact-aside > p, .contact-actions a),
  html.has-reveal body.about-page .contact-bottom.is-visible,
  html.has-reveal body.about-page .site-footer:not(.editorial-footer).is-visible > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  html.has-reveal body.about-page .contact-content h2 { --about-scroll-delay: 90ms; }
  html.has-reveal body.about-page .contact-aside > p { --about-scroll-delay: 170ms; }
  html.has-reveal body.about-page .contact-actions a:first-child { --about-scroll-delay: 250ms; }
  html.has-reveal body.about-page .contact-actions a:last-child { --about-scroll-delay: 315ms; }
  html.has-reveal body.about-page .contact-bottom > :first-child { --about-scroll-delay: 70ms; }
  html.has-reveal body.about-page .contact-bottom > :last-child { --about-scroll-delay: 130ms; }
  html.has-reveal body.about-page .site-footer:not(.editorial-footer) > :nth-child(1) { --about-scroll-delay: 0ms; }
  html.has-reveal body.about-page .site-footer:not(.editorial-footer) > :nth-child(2) { --about-scroll-delay: 75ms; }
  html.has-reveal body.about-page .site-footer:not(.editorial-footer) > :nth-child(3) { --about-scroll-delay: 145ms; }
  html.has-reveal body.about-page .site-footer:not(.editorial-footer) > :nth-child(4) { --about-scroll-delay: 210ms; }
  html.has-reveal body.about-page .site-footer:not(.editorial-footer) > :nth-child(5) { --about-scroll-delay: 270ms; }

  html.has-reveal body.about-page .site-footer:not(.editorial-footer) {
    background-color: transparent !important;
    transition: background-color var(--theme-colour-duration, 760ms) var(--about-motion-ease) !important;
  }
  html.has-reveal body.about-page .site-footer:not(.editorial-footer).is-visible {
    background-color: var(--footer-surface) !important;
  }
  html.has-reveal body.about-page .site-footer:not(.editorial-footer)::after {
    opacity: 0;
    transition: opacity 620ms var(--about-motion-ease);
  }
  html.has-reveal body.about-page .site-footer:not(.editorial-footer).is-visible::after { opacity: 1; }

  @media (max-width: 700px) {
    :root {
      --about-motion-duration: 600ms;
      --about-motion-small: 540ms;
    }
    body.about-page.is-about-arriving .about-title-line:first-child { --about-entry-delay: 0ms; }
    body.about-page.is-about-arriving .about-title-line:last-child { --about-entry-delay: 120ms; }
    html.has-reveal body.about-page.is-about-arriving.is-about-entered .about-heading .about-title-line { animation-duration: 700ms !important; }
    body.about-page.is-about-arriving .about-profile .about-portrait { --about-entry-delay: 0ms; }
    body.about-page.is-about-arriving .about-profile .about-portrait figcaption { --about-entry-delay: 120ms; }
    body.about-page.is-about-arriving .about-profile .about-lead { --about-entry-delay: 160ms; }
    body.about-page.is-about-arriving .about-profile .about-copy > p:nth-child(1) { --about-entry-delay: 230ms; }
    body.about-page.is-about-arriving .about-profile .about-copy > p:nth-child(2) { --about-entry-delay: 300ms; }
    body.about-page.is-about-arriving .about-profile .about-facts > div:nth-child(1) { --about-entry-delay: 370ms; }
    body.about-page.is-about-arriving .about-profile .about-facts > div:nth-child(2) { --about-entry-delay: 420ms; }
    body.about-page.is-about-arriving .about-profile .about-facts > div:nth-child(3) { --about-entry-delay: 470ms; }
    html.has-reveal body.about-page .about-story :is(.about-story-heading .about-label, .about-story-heading h2, .about-journey-copy p, .about-approach-statement, .about-approach-text p, .about-experience-copy p, .about-now-copy p, .about-work-footer, .about-final-copy h2, .about-final-credit) {
      transform: translate3d(0, 6px, 0) !important;
    }
    html.has-reveal body.about-page .about-image {
      transition-duration: 760ms, 840ms, 0s !important;
    }
    html.has-reveal body.about-page .about-image img { transition-duration: 900ms !important; }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.about-page .about-section *,
  body.about-page .contact-section *,
  body.about-page .site-footer:not(.editorial-footer),
  body.about-page .site-footer:not(.editorial-footer) *,
  body.about-page #contact-float-button {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  body.about-page .about-story { border-top-color: var(--rule) !important; }
  body.about-page .contact-section { background-color: var(--paper-contact) !important; }
  html[data-theme="dark"] body.about-page .contact-section { background-color: var(--bg) !important; }
}