/* =========================================================================
   GAISCE — Mobile optimisation layer
   Loaded last so it refines the base responsive rules. Touch targets,
   small-screen rhythm, and phone-specific tuning.
   ========================================================================= */

/* Never allow horizontal overflow on small screens */
@media (max-width: 760px){
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* ---- Touch targets: WCAG / iOS minimum 44px ---- */
@media (max-width: 940px){
  .nav-burger { width: 44px; height: 44px; }
  .nav-inner { padding: 0 20px; }
}

/* Mobile menu: comfortable tap rows + a clear contact CTA */
.mobile-menu .mm-cta {
  display: none;
}
@media (max-width: 940px){
  .mobile-menu a { padding: 16px 0; font-size: clamp(26px, 7vw, 34px); }
  .mobile-menu .mm-cta {
    display: inline-flex; margin-top: 28px; align-self: flex-start;
    border: 1px solid var(--mint); color: var(--mint);
    font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    padding: 15px 26px; border-radius: 2px; min-height: 48px; align-items: center; gap: 10px;
  }
  .mobile-menu .mm-cta::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
}

/* ---- Buttons: full-width & tall enough to tap on phones ---- */
@media (max-width: 560px){
  .btn { min-height: 48px; padding: 15px 22px; justify-content: center; }
  .hero-actions, .cta-actions, .ph-actions, .page-cta .pc-actions { width: 100%; }
  .hero-actions .btn,
  .cta-actions .btn,
  .page-cta .pc-actions .btn { width: 100%; }
  .hero-actions { gap: 16px; }
  .cta-actions, .page-cta .pc-actions { flex-direction: column; }
}

/* ---- Hero tuning on phones ---- */
@media (max-width: 600px){
  .hero { min-height: 92svh; }
  .hero-content { padding: 24px 0; }
  .hero-h { margin-bottom: 22px; }
  .hero-sub { margin-bottom: 26px; }
  .hero-meta { margin-bottom: 30px; gap: 8px; }
  /* calm the scroll-driven homing layer so it never fights the text */
  .homing-svg { opacity: .5; }
  .scroll-cue { bottom: 18px; }
}
@media (max-width: 400px){
  .display { font-size: 38px; line-height: 1.0; }
  .hero-meta .badge { font-size: 9.5px; padding: 4px 7px; }
}

/* ---- Section rhythm: less dead space on small screens ---- */
@media (max-width: 600px){
  .section-pad { padding: 64px 0; }
  .block { padding: 64px 0; }
  .block-tight { padding: 52px 0; }
  .wrap { padding: 0 20px; }
}

/* ---- Page headers (sub-pages) ---- */
@media (max-width: 600px){
  .page-head { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 56px; min-height: 0; }
  .ph-title { font-size: clamp(30px, 8.5vw, 46px); }
  .ph-lede { font-size: 17px; }
}

/* ---- Section heads stack cleanly ---- */
@media (max-width: 600px){
  .sec-head { gap: 18px; }
  .sec-head-r { padding-bottom: 0; }
}

/* ---- Lead-construct spec card ---- */
@media (max-width: 600px){
  .lead-spec { padding: 6px 20px; }
  .spec-row { padding: 15px 0; gap: 12px; }
  .spec-v { font-size: 17px; }
}

/* ---- Platform system blocks: visual above text, comfortable gaps ---- */
@media (max-width: 600px){
  .sysblock { gap: 26px; }
  .sys-title { font-size: clamp(26px, 7.5vw, 34px); }
  .sys-points li { gap: 4px; }
}

/* ---- Pipeline: keep the programme rows readable at phone width ---- */
@media (max-width: 520px){
  .pipe-row, .pipe-row.head { grid-template-columns: 1fr; gap: 6px 0; padding: 20px 0; }
  .pipe-row .pipe-ind { font-size: 16px; }
  .pipe-row.head { display: none; }            /* column headers make no sense once stacked */
  .pipe-row .pipe-track-cell { margin-top: 10px; }
  .pipe-row.is-lead { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
}

/* ---- Proof stats: 2-up stays tidy, labels not too tiny ---- */
@media (max-width: 600px){
  .proof-stats { gap: 28px 24px; }
  .stat-l { font-size: 10.5px; }
}

/* ---- Contact: success card padding ---- */
@media (max-width: 560px){
  .cform.sent .cform-success { padding: 28px 22px; }
  .contact-meta .cm-row { flex-wrap: wrap; gap: 4px 16px; }
}

/* ---- Footer: breathing room + tappable links ---- */
@media (max-width: 600px){
  .footer { padding-top: 64px; }
  .footer-top { gap: 34px; }
  .footer-nav a, .footer a { padding: 4px 0; display: inline-block; }
  .footer-mail { font-size: 17px; word-break: break-word; }
}

/* ---- Respect notches / safe areas ---- */
@supports (padding: max(0px)){
  @media (max-width: 760px){
    .wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
    .nav-inner { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  }
}