/* NOAH desktop addition, 2026-11-07.
   All presentation changes are restricted to >=1024px.
   The original files and the original order of text/photos are retained. */
@media (min-width: 1024px) {
  .page { max-width: 1200px; padding: 104px 20px 0; }
  .hd-in, footer .wrap { max-width: 1200px; padding-left: 20px; padding-right: 20px; }
  .hd-in { min-height: 76px; gap: 18px; }
  .hd-nav { gap: 8px; }
  .hd-nav a { padding: 12px; }
  .hd-book { padding-inline: 24px; }
  .sec-head { margin-bottom: 48px; }
  .sec-title { font-size: 30px; }
  .sec-lead { max-width: 48em; }

  /* Keep the vertical scroll reveal in its own left-hand space.
     Only the photograph and plan link are visible from the first frame. */
  .js .hero-track { height: calc(min(740px, 100svh - 130px) + 790px); }
  .hero-stage, .js .hero-stage {
    position: sticky; top: 90px; height: min(740px, calc(100svh - 130px));
    min-height: 620px; padding: 0; display: block; text-align: center;
  }
  .hero-brand, .js .hero-brand {
    position: absolute; top: 38px; left: 3%; right: auto; width: 43%;
  }
  .hero-brand-name, .js .hero-brand-name { font-size: 46px; }
  .hero-brand-sub { margin-top: 12px; }
  .hero-main, .js .hero-main {
    display: grid; grid-template-columns: 46% 54%; align-items: center;
    height: 100%; width: 100%; margin: 0;
  }
  .hero-copy, .js .hero-copy { margin: 80px auto 0; height: 365px; }
  .vt-hero .hero-line, .js .vt-hero .hero-line { font-size: 27px; line-height: 2.25; }
  .vt-hero .hero-line-sub, .js .vt-hero .hero-line-sub { font-size: 16px; line-height: 2.4; }
  .hero-photo, .js .hero-photo {
    margin: 0; padding: 28px 38px 28px 0;
    opacity: 1 !important; transform: none !important;
  }
  .hero-mat { display: block; width: fit-content; max-width: 100%; margin: auto; padding: 10px; }
  .hero-mat img, .js .hero-mat img {
    width: auto; max-width: 100%; height: auto;
    max-height: min(650px, max(535px, calc(100svh - 206px)));
  }
  .hero-lead, .js .hero-lead {
    position: absolute; left: 3%; right: auto; bottom: 25px; width: 43%; margin: 0;
    opacity: 1 !important; transform: none !important; pointer-events: auto !important;
  }
  .hero-lead-note { display: none; }
  .hero-hint, .js .hero-hint { left: 3%; right: auto; width: 43%; bottom: 92px; }

  /* ABOUT: the same vertical passage stays sticky alongside its photograph. */
  #about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 64px; }
  #about > .sec-head { grid-column: 1 / -1; }
  .about-txt { min-width: 0; }
  .about-photo {
    align-self: start; position: sticky; top: 118px; margin: 24px 0 0;
    max-width: 360px; width: 100%; justify-self: center;
  }
  .about-chips { gap: 10px; }
  .reason-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .reason-item { padding: 26px; }

  /* PC contact sheets. DOM order is row-major; photographs are never cropped.
     Ring-only navigation is replaced by the existing cards' direct modal actions. */
  :is(.gr-track, .pr-track) { height: auto; }
  :is(.gr-stage, .pr-stage) {
    position: relative; top: auto; height: auto; padding: 24px;
    overflow: visible; box-shadow: none;
  }
  :is(.gr-scene, .pr-scene, .gr-ring, .pr-ring) { position: static; }
  :is(.gr-ring, .pr-ring) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
  :is(.gr-card, .pr-card) {
    position: relative; inset: auto; width: auto; min-width: 0; margin: 0;
    display: flex; flex-direction: column;
    transform: none !important; opacity: 1 !important; z-index: auto !important;
    pointer-events: auto; cursor: pointer; will-change: auto;
  }
  :is(.gr-mat, .pr-mat) { height: auto; flex: 1; padding: 10px; box-shadow: 0 3px 14px rgba(150,125,90,.08); }
  :is(.gr-photo, .pr-photo) { height: 280px; }
  :is(.gr-photo, .pr-photo) img { width: auto; height: auto; max-width: 100%; max-height: 280px; }
  :is(.gr-lab, .pr-lab) { font-size: 14px; margin-top: 16px; margin-bottom: 8px; white-space: normal; }
  :is(.gr-tag, .pr-tag, .gr-stack, .gr-hud, .pr-cap, .pr-hint, .pr-hud, .gr-dust, .pr-dust) { display: none; }
  :is(.gr-card, .pr-card):hover :is(.gr-mat, .pr-mat) { border-color: var(--accent); }
  :is(.gr-card, .pr-card):focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 5px; border-radius: 10px; }
  .gr-after:has(.gov-item) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
  .gr-block-title { grid-column: 1 / -1; margin-bottom: 0; }
  .gov-item { margin: 0; }
  .guide-intro { max-width: 65em; margin: 0 auto 32px; }

  /* Four newborn plans in two columns; three anniversary plans in three. */
  .plan-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .plan-list:has(> .plan-card:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-list:has(> .plan-card:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
  .plan-card { padding: 30px; display: flex; flex-direction: column; min-width: 0; }
  .plan-top { gap: 16px; }
  .plan-price { font-size: 30px; }
  .plan-list:has(> .plan-card:nth-child(3):last-child) .plan-top { flex-direction: column; }
  .plan-desc { margin-bottom: 24px; }
  .plan-book { margin-top: auto; }
  .plan-badge { left: 30px; }
  .plan-cat { margin-top: 72px; }
  .pi-sum, .cancel-sum { padding: 18px 28px; }
  .pi-body, .cancel-body { padding: 4px 28px 28px; }
  .flow-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .step { padding: 24px; }
  #faq, #access, #cancel, #booking { max-width: 960px; margin-inline: auto; }
  .rrow-head { padding: 20px 26px; }
  .rrow-panel { padding: 2px 26px 22px; }
  .access-card, .book-card { padding: 36px; }
  .plan-pick { gap: 16px; }
  .f-two { gap: 24px; }

  /* White on deep green is 6.53:1. Remove the preview's fade only on LINE controls;
     aria-disabled and their existing non-navigation behavior are retained. */
  .fixed-cta {
    left: 50%; right: auto; bottom: 20px; transform: translateX(-50%);
    width: 460px; max-width: calc(100% - 40px); padding: 8px; gap: 10px;
    border: 1px solid var(--line); border-radius: 999px; background: #fdfaf5;
    box-shadow: 0 8px 28px rgba(87,69,47,.18);
  }
  .fixed-cta a { min-height: 52px; padding: 14px 20px; }
  .fc-line, .btn-line, .line-btn {
    background: #176b42; color: #fff; opacity: 1 !important; filter: none !important;
    box-shadow: none;
  }
  .fixed-cta .fc-form { box-shadow: none; }

  /* Large, uncropped lightboxes. Native size remains the upper image limit. */
  .gmo-back, .pmo-back { padding: 28px; }
  .gmo-panel, .pmo-panel { max-width: 1040px; max-height: calc(100svh - 56px); padding: 20px 28px 24px; }
  .gmo-img, .pmo-img { max-height: calc(100svh - 300px); max-width: 100%; width: auto; height: auto; }
  .pmo-img { max-height: calc(100svh - 390px); }
  .gmo-photo, .pmo-photo { padding: 14px; }
  .gmo-head, .pmo-head { margin-bottom: 14px; }
  .gmo-title, .pmo-title { font-size: 23px; }
  .gmo-group { margin: 12px 0 4px; }
  .gmo-text, .pmo-text { margin-bottom: 0; }
  .pmo-cta { max-width: 440px; margin-inline: auto; }
  footer { padding-bottom: 130px; }

  @media (max-height: 760px) {
    .hero-stage, .js .hero-stage { min-height: 570px; }
    .hero-copy, .js .hero-copy { height: 320px; margin-top: 68px; }
    .vt-hero .hero-line, .js .vt-hero .hero-line { font-size: 23px; }
    .vt-hero .hero-line-sub, .js .vt-hero .hero-line-sub { font-size: 14px; }
    .hero-mat img, .js .hero-mat img { max-height: 500px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .js .hero-track { height: auto; }
    .hero-stage, .js .hero-stage { position: relative; top: auto; }
    .js :is(.hero-line, .hero-line-sub) { opacity: 1 !important; transform: none !important; filter: none !important; }
    .vtf-track, .vt-about-track { height: auto !important; }
    .vtf-stage, .vt-about-stage, .vtp-on .vtf-stage, .vtp-on .vt-about-stage { position: relative !important; top: auto !important; }
    .vtf-box .vch, .vt-about .vch { opacity: 1 !important; filter: none !important; }
    .about-photo { position: static; }
  }
}