/* Mobile reading and touch controls. Desktop water lanes keep their layout. */
.journey-section-note { display: none; }
.contact-toolbar { display: contents; }
.contact-toolbar-title, .contact-close-label { display: none; }

/* One vector shape on every OS: never let a font/emoji replace the arrow. */
.direction-arrow, .nav-cta::after, .button-primary::after, .button-ghost::after {
  display: inline-block; width: 20px; height: 20px; flex: 0 0 20px;
  background-color: currentColor; vertical-align: middle;
  -webkit-mask: url('arrow-up-right.svg') center / contain no-repeat;
  mask: url('arrow-up-right.svg') center / contain no-repeat;
}
.nav-cta::after, .button-primary::after, .button-ghost::after { content: ''; }
.footer-brand .brand {
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: auto; gap: 6px; white-space: nowrap; font-size: 24px;
}
.footer-brand .brand img { width: 60px; height: 60px; flex: 0 0 60px; }

@media (max-width: 980px) {
  /* The glass/orbits intentionally extend beyond their slots. Bound the page
     itself as well as main, including WebKit's root elastic overscroll.
     Do not use overflow:hidden on body: it would trap the sticky journey. */
  html { overflow-x: hidden; overscroll-behavior-x: none; }
  body { width: 100%; max-width: 100%; min-width: 0; }
  @supports (overflow: clip) {
    html, body { overflow-x: clip; }
  }
  .site-main, .site-footer { max-width: 100%; min-width: 0; }
  .footer-grid > *, .contact-layout > * { min-width: 0; }
  .header-inner { gap: 12px; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    appearance: none; -webkit-appearance: none;
    position: relative; width: 44px; min-width: 44px; min-height: 44px; height: 44px; flex-shrink: 0;
    padding: 10px; border: 1px solid #b8d2dc; border-radius: 9px;
    background: #f8fdff; color: var(--ink); font: inherit; font-size: 16px;
    font-weight: 650; line-height: 1.25; text-align: center; cursor: pointer;
  }
  .menu-toggle .burger-line {
    display: block; position: absolute; left: 10px; top: 20px;
    width: 22px; height: 2px; margin: 0; border-radius: 2px;
    background: currentColor; transform-origin: center;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  }
  .menu-toggle .burger-line:nth-child(1) { transform: translateY(-7px); }
  .menu-toggle .burger-line:nth-child(3) { transform: translateY(7px); }
  .menu-toggle[aria-expanded=true] .burger-line:nth-child(1) { transform: rotate(45deg); }
  .menu-toggle[aria-expanded=true] .burger-line:nth-child(2) { opacity: 0; transform: scaleX(.5); }
  .menu-toggle[aria-expanded=true] .burger-line:nth-child(3) { transform: rotate(-45deg); }
  .site-nav { white-space: normal; max-height: calc(100dvh - 108px); overflow-y: auto; }
  .site-nav .nav-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    appearance: none; -webkit-appearance: none;
    width: 100%; min-height: 54px; margin: 14px 0 4px; padding: 14px 18px;
    background: var(--ink); color: #fff; border: 1px solid var(--ink);
    border-radius: 11px; font-size: 16px; font-weight: 650; line-height: 1.5;
    text-align: center; white-space: normal; cursor: pointer;
  }
  .site-nav .nav-cta::after { margin-left: 0; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 100px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col a, .audience-card p, .faq-answer p { overflow-wrap: anywhere; }
  .contact-scroll { overflow-x: hidden; }
  .site-nav { top: calc(100% + 10px); }
  .site-header .brand { white-space: nowrap; }
  .journey-section-note {
    display: grid; grid-column: 1 / -1; gap: 8px; min-width: 0;
    margin: 0 0 18px; padding: 18px 20px; border: 1px solid #d1e4eb;
    border-radius: 14px; background: #f8fdffb8; color: #28576a;
    writing-mode: horizontal-tb; text-align: left;
  }
  .journey-section-note > span { font: 16px/1.5 ui-monospace, monospace; color: #3d788e; letter-spacing: .03em; }
  .journey-section-note > p { margin: 0; font-size: 16px; line-height: 1.6; }
  .lane-sticky .scene-caption, .lane-sticky .lane-index { display: none; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 12px; }
  .hero-actions .button, .arrival-cta .button, .contact-form .contact-submit {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    appearance: none; -webkit-appearance: none;
    width: 100%; max-width: 100%; min-height: 56px; height: auto;
    padding: 15px 18px; font: inherit; font-size: 16px; font-weight: 650;
    line-height: 1.5; text-align: center; white-space: normal;
    text-decoration: none; border-radius: 11px; cursor: pointer;
  }
  .hero-actions .button::after, .arrival-cta .button::after, .contact-form .contact-submit::after { content: ''; }
  .hero-actions .button-primary, .arrival-cta .button, .contact-form .contact-submit { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
  .hero-actions .button-ghost { background: #f8fdff; color: var(--ink); border: 1px solid #acc8d3; }
  .hero-actions .button:hover, .arrival-cta .button:hover { transform: none; }
  .contact-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 12px 8px 20px; border-bottom: 1px solid #d6e7ed; }
  .contact-toolbar-title { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }
  .contact-toolbar .contact-close {
    position: static; display: inline-flex; align-items: center; justify-content: center;
    appearance: none; -webkit-appearance: none;
    width: auto; min-width: 84px; min-height: 44px; height: auto; flex-shrink: 0;
    padding: 10px 12px; border: 1px solid #b8d2dc; border-radius: 9px;
    background: #fff; color: var(--ink); font-size: 16px; line-height: 1.25;
  }
  .contact-close-icon { display: none; }
  .contact-close-label { display: inline; font-size: 16px; }
  .contact-scroll { max-height: calc(100dvh - 90px); }
  .contact-eyebrow { margin-right: 0; }
}