/* Phone layout. The desktop composition stays in style.css. */
@media (max-width: 760px) {
  html {
    scroll-padding-top: calc(88px + env(safe-area-inset-top));
    scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
  body { font-size: 16px; line-height: 1.75; }
  .wrap, .header .wrap { width: auto; margin-inline: 20px; }
  .section { padding: 56px 0; }
  .section-heading h2, .journey-heading h2, .memory h2,
  .transmission .shared-copy h2, .vision h2, .story h2 {
    font-size: clamp(36px, 11.2vw, 48px);
    line-height: 1.08;
    letter-spacing: -.03em;
  }
  .text-link { font-size: 13px; min-height: 48px; }

  /* Navigation remains within reach while reading the long page. */
  .header {
    position: fixed;
    padding-top: env(safe-area-inset-top);
    background: #111411f5;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #ffffff18;
  }
  .nav { height: 68px; border: 0; }
  .brand { min-height: 44px; }
  .brand span { font-size: 24px; }
  .brand img { width: 26px; height: 29px; }
  .menu-toggle {
    gap: 12px; min-height: 44px; padding: 8px 12px;
    border: 1px solid #c8b18a66; border-radius: var(--radius-control);
    font-size: 13px;
  }
  .menu-toggle span { font-size: 19px; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
  .nav-links {
    top: calc(76px + env(safe-area-inset-top));
    left: 20px; right: 20px; padding: 10px 20px;
    background: #17251e; border: 1px solid #c8b18a55;
    box-shadow: 0 12px 32px #0004;
    max-height: calc(100svh - 100px - env(safe-area-inset-top));
    overflow-y: auto;
  }
  .nav-links a { display: block; min-height: 48px; font-size: 15px; padding: 12px 0; }
  .nav-links a + a { border-top: 1px solid #ffffff18; }
  .nav-links .nav-cta { margin: 8px 0; padding: 12px; text-align: center; }

  /* The watch and the first action fit much earlier in the opening. */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { display: contents; }
  .hero-copy > * { grid-column: 1; min-width: 0; }
  .hero-copy > .eyebrow {
    grid-row: 1; margin: calc(94px + env(safe-area-inset-top)) 20px 14px;
    font-size: 10px; line-height: 1.6; letter-spacing: .09em;
  }
  .hero h1 {
    grid-row: 2; margin: 0 20px;
    font-size: clamp(43px, 13vw, 58px); line-height: 1.03;
    letter-spacing: -.035em;
  }
  .hero-lead { grid-row: 3; margin: 18px 20px 0; max-width: none; font-size: 15px; line-height: 1.65; }
  .hero-visual {
    grid-row: 4; grid-column: 1; margin: 20px 20px 0;
    height: auto; min-height: 0; aspect-ratio: 4 / 3;
  }
  .hero-visual > img { object-position: 50% 48%; }
  .hero-visual::after, .hero-photo-title { display: none; }
  .hero-offer { grid-row: 5; display: block; margin: 18px 20px 0; }
  .hero .button { width: 100%; min-height: 54px; font-size: 14px; padding: 14px 18px; }
  .hero-edition { grid-row: 6; margin: 18px 20px 0; padding-left: 14px; font-size: 12px; line-height: 1.65; }
  .hero-discover { grid-row: 7; margin: 4px 20px 0; width: fit-content; min-height: 44px; padding: 10px 0; font-size: 13px; }
  .hero-status { grid-row: 8; margin: 8px 20px 28px; font-size: 11px; line-height: 1.6; }
  .edition-ribbon { padding: 18px 20px; gap: 6px 12px; font-size: 10px; line-height: 1.7; }

  .memory-grid, .vision-grid, .founders-letter { gap: 26px; }
  .memory-copy p, .vision-copy p, .story-prose p,
  .transmission .shared-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.75; }
  .memory-copy .text-link { margin-top: 16px; }
  .section-heading { margin-bottom: 24px; }
  .section-heading > p { font-size: 15px; line-height: 1.75; margin-top: 20px; }
  .collection-specs { margin: 0 0 26px; padding-bottom: 20px; font-size: 12px; line-height: 1.8; }
  .models { gap: 40px; }
  .model figure { height: auto; aspect-ratio: 1; }
  .model-black figure > img { object-position: 74% 50%; }
  .model-gold figure > img { object-position: 50% 50%; }
  .model-number { font-size: 36px; top: 18px; left: 20px; }
  .model-info { gap: 14px; margin: 20px 0 16px; align-items: end; }
  .model-info > div { min-width: 0; }
  .model-info .eyebrow { font-size: 10px; line-height: 1.6; }
  .model h3 { font-size: clamp(29px, 8.6vw, 36px); line-height: 1.08; margin-top: 9px; }
  .model-diameter { font-size: 43px; flex-shrink: 0; }
  .model-meta { padding: 14px 0; gap: 6px 12px; font-size: 12px; }
  .model .text-link { margin-top: 8px; }
  .section-note { font-size: 12px; line-height: 1.75; margin-top: 28px; }

  .details-journey { padding: 56px 0 40px; }
  .journey-heading { margin-bottom: 28px; }
  .detail-step { gap: 22px; padding-bottom: 34px; margin-bottom: 34px; }
  .detail-inline { aspect-ratio: 4 / 3; }
  .detail-isolated-dial, .detail-seconds { aspect-ratio: 1; }
  .detail-kicker { font-size: 11px; line-height: 1.6; letter-spacing: .08em; margin-bottom: 15px; gap: 12px; }
  .detail-kicker > span { width: 32px; height: 32px; }
  .detail-copy h3 { font-size: clamp(34px, 10vw, 43px); line-height: 1.08; margin-bottom: 16px; }
  .detail-copy > p:not(.detail-kicker) { font-size: 16px; line-height: 1.75; }
  .detail-copy .detail-thickness { margin-top: 20px; padding-top: 16px; }
  .detail-thickness strong { font-size: 17px; }
  .journey-next { margin-top: 26px; }

  .rotor { padding: 40px 0 56px; }
  .rotor-visual { order: 0; height: auto; min-height: 0; aspect-ratio: 4 / 3; margin: 0 20px; }
  .rotor-visual > img { object-position: 50% 50%; }
  .rotor-copy { order: 1; padding: 28px 20px 0; align-self: stretch; }
  .rotor-copy h2 { font-size: clamp(43px, 12vw, 54px); line-height: 1.04; margin: 18px 0 24px; }
  .rotor-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.75; }
  .rotor-calibre { padding: 18px 0; margin-bottom: 22px; }
  .rotor-calibre span { font-size: 13px; }
  .rotor-copy .rotor-arabic { font-size: clamp(25px, 7.7vw, 32px) !important; margin: 20px 0; }
  .rotor-copy .text-link { margin-top: 18px; }

  .transmission .shared-grid { gap: 28px; }
  .transmission .shared-copy h2 { margin-bottom: 22px; }
  .shared figure { margin: 0; }
  .story h2 br { display: initial; }
  .story-prose p + p { margin-top: 18px; }
  .story-prose .signature { font-size: 14px; margin-top: 24px; }
  .prototype-strip {
    display: grid; grid-template-columns: 76px minmax(0, 1fr);
    align-items: start; gap: 20px 16px; margin-top: 32px; padding-top: 28px;
  }
  .prototype-thumb { width: 76px; height: 102px; }
  .prototype-strip > div { width: auto; min-width: 0; }
  .prototype-strip h3 { font-size: 28px; line-height: 1.1; }
  .prototype-strip p:not(.eyebrow) { font-size: 13px; line-height: 1.7; }
  .prototype-strip .text-link { grid-column: 1 / -1; margin: 0; min-height: 48px; justify-content: center; white-space: normal; }
  .vision h2 { margin-top: 16px; }
  .vision-copy p + p { margin-top: 18px; }

  .launch-grid { gap: 30px; }
  .launch h2 { font-size: clamp(47px, 13vw, 59px); line-height: 1.04; margin: 20px 0 24px; }
  .launch-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.75; }
  .launch-offer { margin-top: 24px; padding-top: 18px; }
  .launch-offer strong { font-size: 57px; }
  .signup-opening { padding: 0 0 10px; border: 0; }
  .signup-opening h3 { font-size: 35px; line-height: 1.1; margin: 0 0 16px; }
  .signup-opening > p:not(.eyebrow) { font-size: 15px; line-height: 1.75; }
  .signup-opening .signup-submit { min-height: 56px; padding: 15px 18px; font-size: 14px; line-height: 1.5; margin-top: 22px; }
  .signup-opening > p.signup-promise { font-size: 12px; margin-top: 16px; }
  .faq { margin-top: 24px; }
  summary { min-height: 56px; gap: 14px; font-size: 14px; line-height: 1.65; padding: 16px 0; }
  summary span { flex-shrink: 0; }
  details p { font-size: 14px; line-height: 1.75; }

  .footer { padding: 40px 0 calc(28px + env(safe-area-inset-bottom)); }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-top > p { font-size: 25px; line-height: 1.3; }
  .footer-contact { font-size: 14px; min-height: 48px; }
  .footer-bottom { font-size: 11px; line-height: 1.7; margin-top: 24px; gap: 10px; }
  .quickbar { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 12px; }
  .quickbar > span { font-size: 11px; line-height: 1.5; max-width: 170px; }
  .quickbar > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex-shrink: 0; font-size: 13px; padding: 10px 14px; }
  body:has(.menu-toggle[aria-expanded="true"]) .quickbar,
  body:has(dialog[open]) .quickbar { display: none; }

  dialog { width: calc(100% - 24px); max-height: calc(100svh - 24px); padding: 20px; }
  .dialog-top { gap: 14px; margin-bottom: 18px; }
  .dialog-top h2 { font-size: 32px; line-height: 1.1; }
  .dialog-top button { width: 44px; height: 44px; }
  .dialog-intro { font-size: 14px; line-height: 1.75; margin: 18px 0; }
  .prototype-gallery-single img { max-height: 62svh; }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .model figure { height: auto; aspect-ratio: 4 / 5; }
  .nav-links { gap: 18px; }
  .nav-links .nav-cta { padding-inline: 12px; }
  .transmission .shared-grid, .vision-grid { gap: 36px; }
  .transmission .shared-copy h2, .vision h2 { font-size: 45px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .hero-visual { align-self: center; height: auto; min-height: 0; aspect-ratio: 3 / 4; margin: 100px 20px 40px 0; }
  .hero-visual > img { object-position: 50% center; }
  .hero-photo-title { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu-toggle span { transition: none; }
}