/* Figma 2743:7817: 402px mobile reference, fluid below and above it. */
@media (max-width: 760px) {
  .about-page { --home-mobile-gutter: clamp(24px, 8.208955vw, 33px); --about-space: 33px; }
  .about-page::before { display: none; }
  .about-page .hero-updated { height: auto; min-height: 0; max-height: none; aspect-ratio: 402 / 226; }
  .about-page .hero-updated .side-nav { top: var(--home-mobile-gutter); left: var(--home-mobile-gutter); right: auto; display: block; }
  .about-page .hero-updated .side-nav a:not(.brand) { display: none; }
  .about-page .hero-updated .brand, .about-page .hero-updated .brand img { width: 110px; height: 24px; margin: 0; }
  .about-page .hero-updated .hero-inner { top: 37.61%; bottom: auto; left: var(--home-mobile-gutter); right: var(--home-mobile-gutter); width: auto; transform: none; }
  .about-page .hero-updated h1 { font-size: 24px; line-height: 28px; letter-spacing: -.025em; }
  .about-page :is(.about-people-section,.about-studio-section,.about-story-section,.about-clients-section) { padding: 33px var(--home-mobile-gutter); }
  .about-page :is(.about-people-inner,.about-studio-inner,.about-story-inner,.about-clients-inner) { width: 100%; max-width: none; height: auto; margin: 0; }
  .about-page .about-people-inner { gap: 33px; }
  .about-page .about-people-inner > h2 { font-size: 20px; line-height: 24px; }
  .about-page .about-people-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .about-page .about-person { gap: 16px; }
  .about-page .about-person-photo { width: 80px; height: 80px; }
  .about-page .about-person h3 { font-size: 20px; line-height: 24px; color: #0a0a0a; }
  .about-page .about-person-role { font-size: 14px; line-height: 18px; }
  .about-page .about-person-linkedin { position: relative; display: block; min-height: 0; font-size: 12px; line-height: 16px; }
  .about-page .about-person-linkedin::after { content: ""; position: absolute; inset: -6px -4px -10px; }
  .about-page .about-studio-section { background: #f6f6f6; }
  .about-page :is(.about-studio-inner,.about-stats-block,.about-stats,.about-origin) { gap: 24px; }
  .about-page :is(.about-stats,.about-origin) { grid-template-columns: minmax(0,1fr); width: 100%; }
  .about-page .about-stat { gap: 16px; }
  .about-page .about-stat h2 { font-size: 32px; line-height: 36px; font-weight: 500; font-variation-settings: "wght" 500; }
  .about-page .about-stat p { font-size: 14px; line-height: 18px; }
  .about-page .about-origin-intro { gap: 8px; }
  .about-page .about-origin-intro h2 { font-size: 20px; line-height: 24px; }
  .about-page .about-origin-intro p { font-size: 14px; line-height: 18px; font-weight: 500; font-variation-settings: "wght" 500; }
  .about-page .about-origin-statement { font-size: 16px; line-height: 20px; font-weight: 500; font-variation-settings: "wght" 500; letter-spacing: -.015em; }
  .about-page .about-story-section { background: #fff; }
  .about-page .about-story-inner { gap: 24px; }
  .about-page .about-story-row { grid-template-columns: minmax(0,1fr); gap: 16px; min-height: 0; }
  .about-page .about-story-label h2 { font-size: 16px; line-height: 20px; }
  .about-page .about-story-content { gap: 8px; }
  .about-page .about-story-content h3 { font-size: 20px; line-height: 24px; }
  .about-page .about-story-content h3 br { display: none; }
  .about-page .about-story-row-intro h3 br { display: block; }
  .about-page .about-story-body { width: 100%; font-size: 14px; line-height: 18px; }
  .about-page .about-story-body p { font-size: inherit; line-height: inherit; }
  .about-page .about-clients-section { background: #f2f2f2; }
  .about-page .about-clients-inner { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .about-page .about-clients-inner > h2 { width: 100%; height: auto; font-size: 20px; line-height: 24px; }
  .about-page .about-clients-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: auto; gap: 3.6129px; }
  .about-page .about-client-card { height: 60px; aspect-ratio: auto; border-radius: 3.6129px; }
  /* These exports include Figma's logo sizing and padding. Never stretch them. */
  .about-page .about-client-card img { width: min(100%, 166.194px); height: 60px; object-fit: contain; flex: none; }
  .about-page .about-client-card:hover img { transform: none; }
  .about-page .about-contact-section { padding: 33px 24px 0; }
  .about-page .about-contact-section .contact-wrap { width: 100%; }
  .about-page .about-contact-panel { --contact-panel-bottom-space: 33px; width: calc(100% - 2 * (var(--home-mobile-gutter) - 24px)); margin-inline: auto; }
  .about-page .about-contact-panel::before { top: -33px; }
  .about-page .about-contact-cta-card { width: 100%; max-width: none; min-height: 248px; height: auto; aspect-ratio: auto; padding: 24px; border-radius: 8px; gap: 16px; justify-content: center; align-items: flex-start; }
  .about-page .about-contact-cta-card::before { display: none; }
  .about-page .about-contact-cta-card { isolation: isolate; clip-path: inset(0 round 8px); background: transparent; border: 0; outline: none; box-shadow: none; }
  /* Bleed the raster edge beneath one rounded clip; avoid a dark hairline. */
  .about-page .about-contact-cta-card .contact-cta-background { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; border-radius: 0; }
  /* Keep controls visible when resizing a page initialized with desktop reveals. */
  .about-page .about-contact-cta-card :is(.contact-copy,.contact-actions).about-scroll-reveal { opacity: 1; filter: none; transform: none; }
  .about-page .about-contact-cta-card .contact-copy { width: 100%; flex: none; gap: 8px; }
  .about-page .about-contact-cta-card .contact-copy h2 { font-size: 20px; line-height: 24px; font-weight: 600; font-variation-settings: "wght" 600; }
  .about-page .about-contact-cta-card .contact-copy h2 br { display: block; }
  .about-page .about-contact-cta-card .contact-copy p { font-size: 14px; line-height: 18px; }
  .about-page .about-contact-cta-card .contact-copy p br { display: none; }
  .about-page .about-contact-cta-card .contact-actions { align-self: flex-start; margin: 0; }
  .about-page .about-get-in-touch .contact-button-primary { min-height: 0; padding: 8px; gap: 4px; font-size: 12px; line-height: 16px; border-radius: 4px; }
  .about-page .about-get-in-touch .contact-button-primary img { width: 16px; height: 16px; }
}