/* Final responsive layer: stable touch scrolling and readable controls. */
html { scroll-padding-top: 8rem; -webkit-text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
header { gap: 1rem; padding-block: .5rem; }
header:after { pointer-events: none; }
main, section, article, form, .field, .hero-copy, .bridge-copy { min-width: 0; }
a, button, summary { touch-action: manipulation; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #b68b46; outline-offset: 5px; }
.nav { align-items: center; font-size: .875rem; letter-spacing: .06em; }
.nav a, .button, summary { min-height: 44px; }
.nav a { display: inline-flex; align-items: center; }
.button { font-size: .875rem; letter-spacing: .07em; text-align: center; white-space: normal; }
.eyebrow, .scene-no, .scroll-note { font-size: .75rem; line-height: 1.65; }
.field label, .form-note, footer { font-size: .875rem; line-height: 1.6; }
.field input, .field select, .field textarea { font-size: 1rem; min-width: 0; min-height: 48px; }
.field select option { color: #20211e; background: #f7f5ef; }
.full { grid-column: 1 / -1; }
.hero h1 { line-height: 1; }
.brand { flex: 0 0 auto; width: 160px; height: 74px; background: none; display: block; overflow: hidden; }
.brand .brand-logo { display: block; visibility: visible; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
footer { background: #f7f5ef; color: #515249; }
footer .footer-logo { width: 240px; max-width: 100%; height: 124px; object-fit: cover; object-position: center 50%; filter: none; mix-blend-mode: normal; }
.stage { perspective: none; }
.stage-image { inset: 0 auto auto 0; max-width: none; width: auto; height: 100%; object-fit: fill; clip-path: none; will-change: transform; transform-origin: left center; transition: none; }
.scene-copy { visibility: hidden; pointer-events: none; }
.scene-copy.on { visibility: visible; pointer-events: auto; }
.scene-copy h2 { line-height: 1.05; }
.reveal { opacity: 1; transform: none; }
@media (max-width: 1000px) { .nav { gap: .9rem; } .steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 800px) {
  .hero-bg { background-image: url('journey-mobile.webp'); }
  html { scroll-padding-top: 6.5rem; }
  header { padding: .4rem max(1rem,env(safe-area-inset-right)) .4rem max(1rem,env(safe-area-inset-left)); background: rgba(247,245,239,.97); backdrop-filter: none; }
  .brand { width: 124px; height: 60px; }
  .nav { gap: 0; }
  .nav-cta { padding: .6rem .7rem; font-size: .75rem; letter-spacing: .025em; }
  .hero { min-height: 100svh; padding: 7rem 1.25rem 3rem; }
  .hero h1 { font-size: clamp(2.7rem,10.5vw,4.8rem); line-height: 1.02; }
  .hero .lead { font-size: 1rem; line-height: 1.65; margin-block: 1.5rem; }
  .hero:before { background: linear-gradient(0deg,rgba(247,245,239,.98),rgba(247,245,239,.86) 55%,rgba(247,245,239,.4)); }
  .hero-bg { animation: none; }
  .grain, .stage:before, .cinema-light, .cinema-orbit, .cinema-bars { display: none; }
  .story { height: 450svh; }
  .stage { height: 100svh; }
  .stage .scene-copy, .stage .scene-copy.on { left: 1rem; right: 1rem; top: auto; bottom: max(3.7rem,calc(env(safe-area-inset-bottom) + 3rem)); width: auto; max-width: none; max-height: calc(100% - 9rem); overflow-y: auto; padding: 1.2rem; transform: none; filter: none; backdrop-filter: none; background: rgba(249,247,241,.96); box-shadow: none; transition: opacity .25s ease; }
  .scene-copy h2 { font-size: clamp(2.1rem,8.5vw,3.5rem); margin: .6rem 0 1rem; }
  .scene-copy p { font-size: 1rem; line-height: 1.6; margin-bottom: 0; }
  .progress { left: 1rem; bottom: max(1.7rem,env(safe-area-inset-bottom)); }
  .camera-readout { bottom: max(1.2rem,env(safe-area-inset-bottom)); }
  .bridge, .journey, .categories, .faq { padding: 4.5rem 1.25rem; gap: 2rem; }
  .bridge h2, .section-head h2, .faq h2, .contact h2 { font-size: clamp(2.5rem,9vw,4.2rem); line-height: 1.05; }
  .section-head { margin-bottom: 2.5rem; }
  .proof { margin-inline: 1.25rem; }
  .proof article { padding: 2rem 0; }
  .category { grid-template-columns: 2rem minmax(0,1fr) 1.2rem; gap: .5rem; }
  .category strong { font-size: clamp(1.7rem,6vw,2.5rem); line-height: 1.15; }
  .contact { margin: 0 1rem 2rem; padding: 1.5rem; gap: 2rem; }
  footer { padding-inline: 1.25rem; }
}
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0,1fr); } .step { min-height: auto; padding: 1.5rem; } .step h3 { margin-top: 3rem; } }
@media (prefers-reduced-motion: reduce), (max-height: 600px) {
  html { scroll-behavior: auto; }
  .story { height: auto; }
  .stage { position: relative; height: auto; padding: 2rem 1rem; display: grid; gap: 2rem; }
  .stage-image, .stage-vignette, .stage:before, .stage:after, .cinema-light, .cinema-orbit, .cinema-bars, .camera-readout, .progress { display: none; }
  .stage .scene-copy, .stage .scene-copy.on { position: relative; inset: auto; visibility: visible; opacity: 1; pointer-events: auto; width: 100%; max-width: 760px; max-height: none; overflow: visible; margin-inline: auto; transform: none; filter: none; backdrop-filter: none; }
  .scene-copy:before { content: ''; display: block; aspect-ratio: 4/3; margin-bottom: 1.5rem; background: url('journey-mobile.webp') var(--scene-position,0%) center / auto 100% no-repeat; }
  .scene-copy:nth-of-type(2) { --scene-position: 48%; }
  .scene-copy:nth-of-type(3) { --scene-position: 71%; }
  .scene-copy:nth-of-type(4) { --scene-position: 100%; }
}