/* Phone-only layout: separate title, animation and career card into rows. */
@media (max-width: 850px) {
  html { scroll-padding-top: 76px; }
  .topbar { height: 64px; }
  .nav { top: 64px; max-height: calc(100svh - 64px); overflow-y: auto; gap: 8px; }
  .nav a { display: flex; align-items: center; min-height: 44px; width: 100%; }
  .menu { min-width: 44px; min-height: 44px; }
  .hero { padding-top: 108px; }
  .hero-grid { gap: 32px; }
  .hero h1 { font-size: clamp(52px, 18vw, 110px); line-height: .92; }
  .hero h1:after { line-height: 1.7; letter-spacing: .1em; margin-top: 20px; }
  .hero .eyebrow { line-height: 1.7; }
  .scroll-cue { width: max-content; max-width: calc(100% - 32px); font-size: 9px; letter-spacing: .08em; }
  .sequence { height: 420svh; scroll-margin-top: -76px; }
  .sticky { height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto 12px; gap: 10px; padding: 80px 16px max(14px, env(safe-area-inset-bottom)); }
  .seq-head { position: static; min-width: 0; }
  .seq-head .eyebrow { font-size: 9px; margin-bottom: 7px; }
  .seq-head h2 { font-size: clamp(22px, 5.7vw, 30px); line-height: 1.15; max-width: none; }
  .phase { font-size: 9px; letter-spacing: .05em; line-height: 1.5; margin-top: 8px; }
  .phase strong { display: block; }
  .build-stage { position: relative; inset: auto; min-width: 0; min-height: 0; width: 100%; height: 100%; perspective: none; }
  .canvas-frame { min-height: 0; min-width: 0; height: 100%; width: 100%; will-change: auto; }
  .construction-video { inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .seq-copy { position: static; width: 100%; padding: 0; display: grid; min-width: 0; }
  .seq-copy .step { position: relative; bottom: auto; grid-area: 1 / 1; width: 100%; padding: 13px 15px; visibility: hidden; pointer-events: none; transform: none; transition: opacity .18s; backdrop-filter: none; background: #101719a8; box-shadow: none; }
  .seq-copy .step.active { visibility: visible; }
  .step .role-meta { flex-wrap: wrap; gap: 4px 10px; font-size: 9px; line-height: 1.4; margin-bottom: 7px; }
  .step h3 { font-size: 20px; line-height: 1.2; margin-bottom: 7px; }
  .step p { font-size: 13px; line-height: 1.55; }
  .rail { position: relative; inset: auto; width: calc(100% - 40px); height: 2px; align-self: center; }
  .rail i { height: 2px; width: calc(var(--progress) * 100%); }
  .rail span { top: 50%; right: -40px; font-size: 9px; }
  section.content { padding: 64px 0; }
  .section-grid { gap: 30px; }
  .section-kicker h2 { font-size: 40px; }
  .project-media, .project:nth-child(3) .project-media { height: 240px; }
  .edu { min-height: 0; }
  .project a { min-height: 44px; align-items: center; }
  .footer-inner { line-height: 1.7; }
}
@media (max-width: 850px) and (max-height: 700px) and (orientation: portrait) {
  .sticky { gap: 6px; padding-top: 73px; padding-bottom: 10px; }
  .seq-head .eyebrow { display: none; }
  .seq-head h2 { font-size: 22px; }
  .phase strong { display: inline; }
  .seq-copy .step { padding: 10px 12px; }
  .step h3 { font-size: 18px; }
  .step p { font-size: 12px; line-height: 1.45; }
}
@media (max-width: 850px) and (orientation: landscape) and (max-height: 550px) {
  .sticky { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr) 8px; padding-top: 72px; gap: 8px 16px; }
  .seq-head { grid-area: 1 / 1; }
  .seq-head .eyebrow, .phase { display: none; }
  .seq-head h2 { font-size: 21px; }
  .build-stage { grid-area: 1 / 2 / 3 / 3; }
  .seq-copy { grid-area: 2 / 1; align-self: center; }
  .seq-copy .step { padding: 10px; }
  .step h3 { font-size: 17px; }
  .step p { font-size: 12px; line-height: 1.4; }
  .rail { grid-area: 3 / 1 / 4 / 3; }
}