/* Mobile is composed independently. The approved desktop rules stay in style.css. */
@media (max-width: 800px), (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  :root {
    --gutter: 24px;
    --space: 64px;
    --cut: 16px;
    --mobile-floor: max(80px, calc(env(safe-area-inset-bottom) + 66px));
    --stage-height: calc(100svh - var(--header-height) - var(--mobile-floor));
  }
  html { scroll-padding-top: 96px; scroll-padding-bottom: 88px; }
  body { font-size: 16px; padding-bottom: 0; }
  .eyebrow { font-size: 10px; letter-spacing: .095em; margin-bottom: 20px; }
  .brand-label { gap: 10px; }
  .brand-label::before { width: 15px; height: 3px; }
  .section-heading h2, .founder-copy h2, .founder-opening h2 {
    font-size: clamp(28px, 8.1vw, 38px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.05em;
  }
  .title-line { padding-bottom: .09em; margin-bottom: -.09em; }

  /* One whole entrance, including space for the persistent contact icon. */
  .home-page .hero { overflow-anchor: none; }
  .home-page .hero-grid { display: block; height: var(--hero-screen, 100svh); min-height: var(--hero-screen, 100svh); }
  .home-page .hero-visual {
    position: absolute; inset: 0 0 auto; width: 100%; height: 52%;
  }
  .home-page .hero-visual > img {
    top: 0; height: 100%; width: 100%;
    object-position: left center; transform: none;
  }
  .home-page .hero-visual::after {
    background: linear-gradient(180deg, #17202080, #17202018 28%, #23272850 54%, #232728 100%);
  }
  .home-page .hero-visual::before { animation-duration: 1s; }
  .home-page .hero-copy {
    margin-inline: auto; width: calc(100% - var(--gutter) * 2);
    height: var(--hero-screen, 100svh); min-height: var(--hero-screen, 100svh);
    padding: 112px 0 calc(var(--mobile-floor) + 30px);
    justify-content: flex-end; align-items: center; text-align: center;
  }
  .home-page .hero .eyebrow {
    display: block; width: fit-content; max-width: 36ch;
    margin: 0 auto 20px; font-size: 10px; line-height: 1.7;
  }
  .home-page .hero .eyebrow::before { display: none; }
  .home-page .hero h1 {
    font-size: clamp(32px, 9.2vw, 44px); line-height: 1.12;
    width: 100%; letter-spacing: -.06em;
  }
  .home-page .hero-description {
    margin: 20px auto 0; max-width: 32ch;
    font-size: 15px; line-height: 1.65; color: #e0e4e1;
  }
  .home-page .hero-actions { margin-top: 26px; justify-content: center; gap: 18px; }
  .home-page .hero-actions .button { min-height: 50px; padding-inline: 19px; font-size: 14px; }
  .home-page .hero-actions .text-link { min-height: 50px; font-size: 13px; }
  .home-page .hero-actions .whatsapp-link svg { width: 21px; height: 21px; }
  .home-page .hero-footer { display: none; }

  /* Only the contact icon floats; no fixed strip masks the page. */
  .whatsapp-float { right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); width: 52px; height: 52px; min-height: 52px; }
  .whatsapp-float svg { position: relative; }

  /* The entrance keeps its wordmark; the scrolled header becomes a compact R capsule. */
  .site-header, .home-page .site-header.is-scrolled, .home-page .site-header:has(.navigation.is-open) {
    background: transparent; border: 0;
  }
  .site-header { position: fixed; top: 0; left: 0; right: 0; }
  .header-inner { position: relative; transition: background .25s, box-shadow .25s; }
  .site-header.is-scrolled .header-inner,
  .site-header:has(.navigation.is-open) .header-inner,
  body:not(.home-page) .header-inner {
    width: calc(100% - 32px); max-width: 460px; margin: 12px auto 0;
    height: 60px; padding: 8px 12px; border-radius: 30px;
    background: var(--paper); color: var(--ink);
    box-shadow: 0 4px 24px #17202012;
  }
  .site-header.is-scrolled .brand,
  .site-header:has(.navigation.is-open) .brand,
  body:not(.home-page) .brand { width: 44px; height: 44px; display: grid; place-items: center; }
  .site-header.is-scrolled .brand-dark, .site-header.is-scrolled .brand-light,
  .site-header:has(.navigation.is-open) .brand-dark, .site-header:has(.navigation.is-open) .brand-light,
  body:not(.home-page) .brand-dark, body:not(.home-page) .brand-light { display: none; }
  .site-header.is-scrolled .brand-icon,
  .site-header:has(.navigation.is-open) .brand-icon,
  body:not(.home-page) .brand-icon { display: block; position: static; width: 38px; height: 38px; opacity: 1; }
  .site-header .navigation.is-open { position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 22px; border-radius: 24px; background: var(--paper); box-shadow: 0 12px 32px #17202018; }
  .legal-main { padding-top: 104px; }

  /* Services: a compact typographic index, then a single steady photograph. */
  .services { padding-top: 62px; }
  .services .section-heading { margin-bottom: 26px; }
  .services h2 { font-size: clamp(24px, 7.45vw, 34px); line-height: 1.2; }
  .services-layout { display: grid; grid-template-columns: 1fr; gap: 22px; }
  .service-selector { height: var(--service-panel-height, 350px); }
  .service-list { height: auto; gap: 0; }
  .service-item { flex: none; }
  .service-trigger {
    min-height: 76px; height: auto; padding: 15px 0;
    grid-template-columns: 20px minmax(0, 1fr) 44px; gap: 12px;
  }
  .service-title { font-size: clamp(25px, 6.7vw, 31px); line-height: 1.15; letter-spacing: -.045em; }
  .service-item .tiny-index { font-size: 10px; }
  .service-readout { height: 100%; overflow: visible; padding: 0; }
  .service-back { min-height: 44px; font-size: 13px; margin-bottom: 10px; }
  .service-readout h3 { font-size: 25px; line-height: 1.2; margin-bottom: 14px; letter-spacing: -.045em; }
  .service-readout .service-content p { font-size: 15px; line-height: 1.6; }
  .service-readout .service-content ul { padding-block: 12px; }
  .service-readout .service-content li { font-size: 13px; line-height: 1.5; margin-bottom: 5px; }
  .service-readout .text-link { font-size: 14px; min-height: 44px; }
  .service-visual { position: static; }
  .service-visual img { width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: none; object-position: center 50%; }
  .service-visual .photo-frame { clip-path: polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); }

  /* Work studies: native horizontal browsing, no vertical pin or viewport filler. */
  .gallery { height: auto; padding-block: 54px; overflow: visible; overflow-anchor: none; }
  .gallery-sticky { position: static; height: auto; padding: 0; display: block; }
  .work-stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 18px; height: auto; max-height: none; }
  .stage-copy { grid-column: 1; grid-row: 1; padding: 0; display: grid; gap: 14px; text-align: center; }
  .stage-copy > .eyebrow { justify-content: center; }
  .stage-copy > .eyebrow { margin-bottom: 0; }
  .stage-copy h2 { font-size: clamp(28px, 8.2vw, 38px); line-height: 1.15; align-items: center; }
  .stage-copy h2 .title-line, .stage-copy h2 .title-line > span { display: inline; width: auto; }
  .stage-copy h2 .title-line + .title-line::before { content: ' '; }
  .stage-intro { display: none; }
  .stage-description { margin: 0; gap: 12px; min-height: 64px; align-items: center; justify-content: center; }
  #stage-index { font-size: 30px; }
  .stage-description h3 { font-size: 17px; line-height: 1.3; }
  .stage-description p { font-size: 12px; line-height: 1.5; margin-top: 3px; }
  .stage-visual { grid-column: 1; grid-row: 2; width: 100%; height: auto; aspect-ratio: 4 / 3; background: none; }
  .gallery-track { display: flex; position: relative; gap: 12px; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .gallery-track::-webkit-scrollbar { display: none; }
  .gallery-track > .gallery-card { flex: 0 0 100%; min-width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .gallery-track .gallery-image { display: block; height: 100%; }
  .gallery-track .gallery-image > img { display: block; height: 100%; width: 100%; object-fit: cover; }
  .stage-navigation { grid-column: 1; grid-row: 3; width: 100%; margin: 0; gap: 6px; }
  .stage-navigation button { min-height: 50px; padding: 3px 2px 8px; font-size: 11px; background: transparent; color: var(--light-muted); }
  .stage-navigation button > span { font-size: 12px; }
  .stage-navigation button[aria-pressed="true"], .stage-navigation button[aria-pressed="true"]:hover { background: transparent; color: var(--accent); }
  .stage-navigation button[aria-pressed="true"]::after { content: ''; position: absolute; bottom: 0; left: calc(50% - 8px); width: 16px; height: 3px; background: var(--accent); border-radius: 2px; }
  .stage-navigation button:hover { background: transparent; transform: none; }
  .stage-navigation::after { display: none; }
  .detail-view-toggle { top: 12px; right: 12px; padding: 8px 12px; font-size: 12px; }
  .stage-visual .image-expand { right: 12px; bottom: 12px; }

  /* Personal section: an introduction, a face, then the supporting experience. */
  .founder-grid { gap: 24px; }
  .founder-opening, .founder-body { text-align: center; }
  .founder-opening .eyebrow { justify-content: center; }
  .founder-lead, .founder-body > p { margin-inline: auto; }
  .founder-image figcaption { text-align: center; }
  .founder-opening h2 { font-size: clamp(31px, 8.7vw, 39px); }
  .founder-lead { margin-top: 20px; font-size: 17px; line-height: 1.6; max-width: 35ch; }
  .founder-image { width: 100%; max-width: 460px; }
  .founder-image img { aspect-ratio: 4 / 3; object-position: center 22%; }
  .founder-image figcaption { font-size: 12px; margin-top: 16px; gap: 4px; }
  .founder-image figcaption strong { font-size: 16px; }
  .founder-body > p { font-size: 15px; line-height: 1.75; max-width: 39ch; }
  .experience { justify-content: center; margin-block: 24px 0; padding: 22px; gap: 20px; align-items: center; background: var(--soft); clip-path: polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); }
  .experience-number { font-size: 56px; font-weight: 500; }
  .experience p { font-size: 13px; line-height: 1.6; color: var(--ink); }
  .founder-body .text-link { font-size: 14px; min-height: 44px; }

  /* Every process step uses the same grid, including the fourth step. */
  .process .section-heading { margin-bottom: 34px; }
  .process .section-heading h2 { font-size: clamp(26px, 7.5vw, 35px); }
  .process-list { grid-template-columns: 1fr; gap: 28px; }
  .process-list li, .process-list li:last-child {
    display: grid; grid-template-columns: 38px minmax(0,1fr);
    gap: 6px 16px; padding: 0; border: 0; align-items: start;
  }
  .process-list .step-number { grid-row: 1 / 3; width: 38px; height: 38px; font-size: 12px; }
  .process-list h3 { grid-column: 2; font-size: 19px; line-height: 1.3; }
  .process-list p { grid-column: 2; font-size: 15px; line-height: 1.7; max-width: 39ch; }
  .process-list .step-number::after { display: none; }

  /* Questions stay closed until requested. Native disclosure controls are keyboard accessible. */
  .faq { gap: 30px; padding-bottom: var(--space); }
  .faq-heading h2 { font-size: clamp(29px, 8vw, 36px); }
  .faq-heading > p:last-child, .faq-readout, .faq-topics, .faq-list { display: none; }
  .faq-mobile { display: grid; grid-row: 2; gap: 12px; }
  .faq-answer { border-radius: 20px; background: var(--soft); overflow: hidden; }
  .faq-answer summary { display: grid; grid-template-columns: 20px minmax(0,1fr) 20px; gap: 12px; align-items: center; min-height: 76px; padding: 18px; cursor: pointer; list-style: none; }
  .faq-answer summary::-webkit-details-marker { display: none; }
  .faq-number { font-size: 11px; color: var(--muted); }
  .faq-question { font-size: 16px; line-height: 1.45; letter-spacing: -.025em; font-weight: 650; }
  .faq-chevron { width: 20px; height: 20px; transition: transform .25s var(--ease); }
  .faq-answer[open] .faq-chevron { transform: rotate(180deg); }
  .faq-answer .detail-copy { padding: 0 20px 22px 50px; }
  .faq-answer p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
  .faq-answer summary:hover { background: #e5e8e1; }

  /* All four contact choices share one entry point beside the form. */
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .contact-copy h2 { font-size: clamp(36px, 10vw, 45px); line-height: 1.12; }
  .contact-copy > p:not(.eyebrow):not(.contact-region) { font-size: 15px; line-height: 1.7; max-width: 38ch; margin-top: 20px; }
  .contact-links { display: flex; margin-top: 26px; }
  .contact-links .contact-choice-inline { display: inline-flex; margin: 0; }
  .contact-links a.contact-whatsapp { padding: 14px 18px; min-height: 72px; margin-bottom: 12px; }
  .contact-links a:not(.contact-whatsapp) { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; min-height: 44px; }
  .contact-links a > span { font-size: 12px; }
  .contact-links a > strong, .contact-links .contact-email > strong { font-size: 15px; line-height: 1.5; letter-spacing: -.025em; }
  .contact-links a.contact-whatsapp > strong { font-size: 16px; }
  .contact-form { padding: 28px 22px; box-shadow: none; }
  .contact-form h3 { font-size: 22px; line-height: 1.35; font-weight: 600; letter-spacing: -.035em; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .field { margin-bottom: 18px; }
  .field label { font-size: 13px; font-weight: 650; margin-bottom: 7px; }
  .field input, .field select, .field textarea { min-height: 50px; font-size: 16px; border-color: #858e86; }
  .field select {
    height: 50px; appearance: none; -webkit-appearance: none; padding: 12px 42px 12px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%23232728' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  }
  .field textarea { min-height: 108px; }
  .contact-preference { margin-block: 22px; }
  .contact-preference legend { font-size: 13px; }
  .channel-options { gap: 6px; }
  .channel-options span { font-size: 12px; }
  .field-help { font-size: 12px; margin: -8px 0 18px; }
  .privacy-ack { grid-template-columns: 20px 1fr; gap: 10px; align-items: start; min-height: 44px; margin-block: 4px 12px; }
  .privacy-ack input { margin-top: 5px; }
  .privacy-ack label { min-height: 44px; font-size: 12px; line-height: 1.75; }
  .privacy-ack a { display: inline; min-height: 0; }
  .form-note { font-size: 11px; line-height: 1.7; margin-bottom: 16px; }
  .preview-note { font-size: 12px; line-height: 1.65; padding: 12px; margin-bottom: 16px; }
  .form-fallback { font-size: 13px; margin-top: 10px; }
  .form-fallback span { display: none; }
  .form-status:not([hidden]) + .form-fallback span { display: block; }

  /* A short, static finish with the requested legal information. */
  .site-footer { padding-top: 38px; }
  .footer-top { display: none; }
  .footer-grid { grid-template-columns: 1fr 1.1fr; padding-block: 0 26px; gap: 24px 22px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { width: 245px; max-width: 100%; }
  .footer-brand p { display: none; }
  .footer-grid > .footer-legal:last-child { grid-column: 1 / -1; }
  .footer-legal nav { display: flex; flex-wrap: wrap; gap: 6px 24px; }
  .footer-grid h3, .footer-grid > .footer-legal:last-child h3 { font-size: 11px; margin-bottom: 8px; }
  .footer-grid a, .footer-grid p { font-size: 12px; }
  .footer-bottom { padding: 0 0 24px; gap: 4px; }
  .footer-bottom > span { font-size: 11px; line-height: 1.7; max-width: 47ch; }
  .footer-bottom .footer-copyright { font-size: 12px; color: var(--paper); }
  .footer-bottom .footer-company { max-width: 32ch; font-size: 10px; }
  .site-footer, .site-footer * { animation: none !important; }

  /* Cookie reading area and actions are separate rows, never overlapping. */
  .cookie-banner { bottom: calc(var(--mobile-floor) + 12px); padding: 18px; max-height: calc(100dvh - var(--mobile-floor) - 32px); }
  .cookie-banner .eyebrow { display: none; }
  .cookie-banner h2 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; }
  .cookie-banner > p:not(.eyebrow) { font-size: 13px; line-height: 1.65; }
  .cookie-actions { margin-top: 16px; }
  .cookie-actions button { min-height: 44px; font-size: 13px; }
  .cookie-details { min-height: 44px; font-size: 12px; }
  .privacy-dialog {
    width: calc(100% - 24px); height: min(760px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px); padding: 0; overflow: hidden;
  }
  .privacy-dialog[open] { display: grid; grid-template-rows: minmax(0,1fr) auto; }
  .privacy-scroll { padding: 76px 24px 24px; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .privacy-dialog .cookie-actions { position: static; padding: 16px 24px 20px; margin: 0; background: var(--paper); }
  .privacy-dialog .dialog-close { position: absolute; z-index: 2; }
  .privacy-dialog h2 { font-size: 27px; margin-bottom: 18px; }
  .privacy-dialog .privacy-state { font-size: 12px; padding: 10px 12px; }
  .privacy-dialog h3, #cookie-policy-excerpt h2 { font-size: 18px; margin: 24px 0 10px; }
  .privacy-dialog p:not(.eyebrow) { font-size: 13px; line-height: 1.75; }
  .privacy-policy-fold { margin-top: 22px; }
  .privacy-policy-fold summary { padding-block: 12px; min-height: 44px; font-size: 14px; font-weight: 650; cursor: pointer; }
}
@media (max-width: 360px) {
  :root { --gutter: 20px; --space: 54px; }
  .home-page .hero-copy { padding-bottom: calc(var(--mobile-floor) + 24px); }
  .home-page .hero h1 { font-size: 32px; }
  .home-page .hero-description { font-size: 14px; max-width: 30ch; }
  .home-page .hero-actions { gap: 14px; }
  .home-page .hero-actions .button { padding-inline: 14px; font-size: 13px; }
  .service-trigger { grid-template-columns: 17px minmax(0,1fr) 44px; gap: 8px; min-height: 77px; }
  .service-readout h3 { font-size: 23px; }
  .contact-form { padding-inline: 18px; }
  .contact-form h3 { font-size: 21px; }
  .contact-links a:not(.contact-whatsapp) { grid-template-columns: 50px 1fr; gap: 8px; }
  .contact-links a > strong, .contact-links .contact-email > strong { font-size: 14px; }
  .footer-grid { gap: 20px 15px; }
}
@media (max-width: 390px) and (orientation: portrait) {
  .services { padding-top: 38px; }
  .services .section-heading { margin-bottom: 18px; }
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  .home-page .hero-copy { margin-left: 42%; width: calc(58% - 44px); padding: 88px 0 calc(var(--mobile-floor) + 12px); justify-content: center; }
  .home-page .hero-visual { width: 100%; height: 100%; }
  .home-page .hero-visual > img { object-position: 24% 50%; }
  .home-page .hero-visual::after { background: linear-gradient(90deg,#17202022,#232728ee 42%,#232728),linear-gradient(180deg,#17202088,transparent 40%,#232728); }
  .home-page .hero h1 { font-size: clamp(28px, 4.5vw, 37px); }
  .home-page .hero .eyebrow { max-width: none; font-size: 8px; margin-bottom: 8px; }
  .home-page .hero-description { font-size: 12px; line-height: 1.6; margin-top: 10px; max-width: 44ch; }
  .home-page .hero-actions { margin-top: 14px; gap: 14px; }
  .home-page .hero-actions .button, .home-page .hero-actions .text-link { min-height: 44px; font-size: 12px; padding-block: 10px; }
  .work-stage { grid-template-columns: .85fr 1.15fr; grid-template-rows: 1fr auto; gap: 18px 28px; }
  .stage-copy { grid-column: 1; grid-row: 1 / 3; }
  .stage-visual { grid-column: 2; grid-row: 1; }
  .stage-navigation { grid-column: 2; grid-row: 2; }
  .services h2, .section-heading h2, .founder-opening h2 { font-size: 32px; }
  .cookie-banner { max-width: 410px; left: 12px; bottom: 12px; width: calc(100% - 100px); max-height: calc(100dvh - 24px); }
}
@media print { body { padding-bottom: 0; } }

@media (max-width: 800px), (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  .stage-visual .stage-description { left: 18px; right: 76px; bottom: 20px; gap: 12px; justify-content: flex-start; }
  .stage-visual #stage-index { font-size: 38px; }
  .stage-visual .stage-description h3 { font-size: clamp(18px,5vw,22px); line-height: 1.2; }
  .stage-visual .stage-description p { font-size: 12px; line-height: 1.4; }
  .stage-total { font-size: 10px; }
  .stage-visual::after { inset-block-start: 22%; }
  .js-mobile-studies .gallery { height: calc(var(--mobile-study-height) + var(--mobile-study-travel)); padding: 0; }
  .js-mobile-studies .gallery-sticky { position: sticky; top: 84px; height: var(--mobile-study-height); padding: 20px 0 22px; display: flex; align-items: stretch; }
  .js-mobile-studies .work-stage { height: 100%; max-height: none; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) auto; gap: 20px; }
  .js-mobile-studies .stage-copy { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; }
  .js-mobile-studies .stage-copy > .eyebrow { margin: 0; }
  .js-mobile-studies .stage-copy h2 { align-items: center; }
  .js-mobile-studies .stage-visual { grid-column: 1; grid-row: 2; height: 100%; min-height: 0; aspect-ratio: auto; }
  .js-mobile-studies .gallery-track { position: relative; display: block; overflow: hidden; scroll-snap-type: none; }
  .js-mobile-studies .gallery-track > .gallery-card { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; }
  .js-mobile-studies .stage-navigation { grid-column: 1; grid-row: 3; height: 50px; width: calc(100% - 64px); margin: 0; }
  .js-mobile-studies .stage-navigation button { min-height: 50px; padding: 3px 2px 8px; }
  .js-mobile-studies .stage-navigation button > span { font-size: 16px; }
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  .js-mobile-studies .work-stage { grid-template-columns: .85fr 1.15fr; grid-template-rows: minmax(0,1fr) auto; gap: 14px 24px; }
  .js-mobile-studies .stage-copy { grid-column: 1; grid-row: 1 / 3; align-content: center; }
  .js-mobile-studies .stage-visual { grid-column: 2; grid-row: 1; }
  .js-mobile-studies .stage-navigation { grid-column: 2; grid-row: 2; }
  .js-mobile-studies .stage-visual .stage-description { left: 12px; right: 64px; bottom: 12px; gap: 8px; }
  .js-mobile-studies .stage-visual #stage-index { font-size: 28px; }
  .js-mobile-studies .stage-description h3 { font-size: 15px; }
  .js-mobile-studies .stage-description p { font-size: 10px; margin-top: 4px; }
}

/* V19: the photograph fills the stage, without a second heading or control row. */
@media (max-width: 800px), (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  .gallery .gallery-sticky { padding-bottom: 0; }
  .gallery .stage-visual { aspect-ratio: auto; }
  .gallery .gallery-image { height: 440px; height: min(560px, 74svh); }
  .gallery .gallery-caption { padding: 54px 20px 24px; }
  .gallery .gallery-caption strong { font-size: 21px; }
  .js-mobile-studies .gallery .gallery-sticky { padding: 14px 0 22px; }
  .js-mobile-studies .gallery .work-stage { display: block; height: 100%; max-height: none; }
  .js-mobile-studies .gallery .stage-visual { height: 100%; }
  .js-mobile-studies .gallery .gallery-track, .js-mobile-studies .gallery .gallery-image { height: 100%; }
  .js-mobile-studies .gallery .stage-visual::after { inset-block-start: 48%; }
  .js-mobile-studies .gallery .stage-description { left: 22px; right: 70px; bottom: 32px; gap: 14px; }
  .js-mobile-studies .gallery .stage-description h3 { font-size: clamp(22px, 6.2vw, 28px); }
  .js-mobile-studies .gallery .stage-description p { font-size: 13px; }
  .js-mobile-studies .gallery #stage-index { font-size: 38px; }
  .intro .founder-image .photo-frame, .intro .founder-image img { border-radius: 24px; clip-path: none; }
  .intro .experience { border-radius: 24px; clip-path: none; padding: 22px; }
  .js-motion .intro .founder-copy.reveal { opacity: 1; transform: none; transition: none; }
  .js-motion .intro .founder-opening, .js-motion .intro .founder-body { opacity: 0; transform: translateY(12px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
  .js-motion .intro .founder-opening.in, .js-motion .intro .founder-body.in { opacity: 1; transform: none; }
  .js-motion .intro .founder-image.reveal { transform: translateX(36px) scale(.98); }
  .js-motion .intro .founder-image.reveal.in { transform: translateX(0) scale(1); }
  html[data-motion="reduced"] .intro .founder-opening, html[data-motion="reduced"] .intro .founder-body { opacity: 1; transform: none; transition: none; }
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  .js-mobile-studies .gallery .stage-description { left: 22px; right: 80px; bottom: 20px; }
  .js-mobile-studies .gallery #stage-index { font-size: 32px; }
  .js-mobile-studies .gallery .stage-description h3 { font-size: 23px; }
  .js-mobile-studies .gallery .stage-description p { font-size: 12px; }
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  /* Short stages need an earlier scrim so the chapter number remains readable. */
  .js-mobile-studies .gallery .stage-visual::after { inset-block-start: 0; }
}

/* V21: browser bars resize the visible photo; the reserved scroll track stays stable. */
@media (max-width: 800px), (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  .js-mobile-studies .gallery .gallery-sticky { height: max(240px, calc(100dvh - 84px)); }
}