/* Mobile & touch: everything that changes for tablets and phones lives here.
   Breakpoints: 960px (tablet nav), 860px (single-column layouts),
   640px (phones), 400px (small phones). Touch-only tweaks use (hover:none). */

/* ---------- Mobile menu (base styles; only shown below 960px) ---------- */
.menu-btn .icon-close{ display:none; }
.menu-btn[aria-expanded="true"] .icon-open{ display:none; }
.menu-btn[aria-expanded="true"] .icon-close{ display:block; }

#mobile-menu{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:8px clamp(16px, 4vw, 24px) 18px;
  border-top:1px solid var(--line-soft);
  max-height:calc(100dvh - 64px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
#mobile-menu a:not(.c-button){
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  font-size:1.02rem;
  padding:14px 4px;
  min-height:48px;
  border-bottom:1px solid var(--line-soft);
}
#mobile-menu a[aria-current="page"]:not(.c-button){ color:var(--accent); }
#mobile-menu .mobile-menu-cta{ margin-top:14px; align-self:stretch; }

/* Phone-only quick actions bar (Call / Book a free call) */
.mobile-action-bar{ display:none; }

/* ---------- Tablet: swap the desktop nav for the menu button ---------- */
@media (max-width: 960px){
  nav.links, .nav-cta{ display:none; }
  .menu-btn{ display:inline-flex; width:44px; height:44px; }
  #mobile-menu.open{ display:flex; }
}
/* Same switch, applied by main.js on wider screens whenever the centred
   links still don't fit without the tagline (large text, zoom, narrow windows). */
header.site.nav-collapsed nav.links,
header.site.nav-collapsed .nav-cta{ display:none; }
header.site.nav-collapsed .menu-btn{ display:inline-flex; width:44px; height:44px; }
header.site.nav-collapsed #mobile-menu.open{ display:flex; }

/* ---------- Single-column layouts ---------- */
@media (max-width: 860px){
  .grid-3,
  .grid-2,
  .flow-row,
  .blog-layout,
  .contact-grid{ grid-template-columns:1fr; }

  .approach-back p{ font-size:clamp(0.76rem, 3.67vw, 0.86rem); }

  .about-body{ column-count:1; }
  .headshot-img{ max-width:220px; }

  .contact-left{ padding-right:0; }
  .contact-right{ padding-left:0; border-left:none; margin-top:clamp(24px, 4vw, 32px); }
}

/* ---------- Phones ---------- */
@media (max-width: 640px){
  .hero-art{ aspect-ratio:4/3; border-radius:20px; }
  .hero .lede{ font-size:1rem; }

  /* Stack the main calls to action full-width so they're easy to hit */
  .hero-actions{ flex-direction:column; align-items:stretch; width:100%; }
  .hero-actions .c-button{ align-self:stretch; }

  .cta-band{ flex-direction:column; align-items:stretch; text-align:left; border-radius:18px; }
  .cta-band .c-button{ align-self:stretch; }

  .booking-cta{ flex-direction:column; align-items:stretch; }
  .booking-cta .c-button{ align-self:stretch; }

  .card .c-button,
  .svc-back .c-button{ align-self:stretch; }

  /* Tickets: tighten padding so the content isn't squeezed */
  .pt-main{ padding:1.6em 1.4em 1.2em; }
  .pt-stub{ padding:1.3em 1.4em; }
  .pt-title{ font-size:1.8em; }
  .pt-header{ margin-bottom:1.3em; }

  /* Forms: 16px inputs stop iOS from zooming in on focus */
  .field input, .field select, .field textarea{ font-size:16px; padding:12px 13px; }
  #cf-submit{ justify-self:stretch; }

  .faq-q{ padding:18px 2px; min-height:56px; }

  .footer-grid{ flex-direction:column; gap:20px; }
  .footer-social a{ width:44px; height:44px; }

  /* Sticky quick-action bar at the bottom of the screen */
  .mobile-action-bar{
    display:flex;
    gap:10px;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:45;
    padding:10px clamp(16px, 4vw, 24px) calc(10px + env(safe-area-inset-bottom, 0px));
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line-soft);
  }
  .mobile-action-bar .c-button{ flex:1; align-self:stretch; padding-block:12px; }
  .mobile-action-call{ flex:0 0 32% !important; }
  body:not([data-page="contact"]) footer.site{
    padding-bottom:calc(36px + 68px + env(safe-area-inset-bottom, 0px));
  }
  body.menu-open .mobile-action-bar{ display:none; }
}

@media (max-width: 600px){
  .wrap_card{ --w-card:176px; --h-card:132px; --insetX-card:32px; }
}

@media (max-width: 560px){
  .form-row{ grid-template-columns:1fr; }
}

@media (max-width: 480px){
  .brand-tagline{ display:none; }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px){
  .wrap_card{ --w-card:150px; --h-card:112px; --insetX-card:24px; }
  .pt-details{ grid-template-columns:1fr; gap:1em; }
  .pt-stub{ flex-wrap:wrap; gap:0.8em; }
  .flow-left{ gap:12px; }
}

/* ---------- Touch screens (no hover) and phones ---------- */
@media (hover: none), (pointer: coarse), (max-width: 640px){
  /* Service cards: show all the detail up front instead of hiding it behind hover */
  .svc-card{ max-height:none; cursor:default; }
  .svc-front{
    position:relative;
    inset:auto;
    padding-top:clamp(56px, 8vw, 62px);
    padding-bottom:0;
  }
  .svc-back{ padding-top:16px; }
  .svc-card:focus-within .svc-front{ opacity:1; transform:none; }

  /* Approach cards flip on tap; hint that they can */
  .approach-front::after{
    content:"Tap to read";
    position:absolute;
    bottom:16px; left:0; right:0;
    font-size:0.68rem;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(246,243,236,0.55);
  }

  /* No 3D tilt on the pricing tickets when tapped */
  .pack-ticket-wrap:hover .pack-ticket,
  .pack-ticket-wrap:active .pack-ticket{
    transform:none;
    filter:drop-shadow(0 10px 20px rgba(15,22,38,0.3));
  }
  .pack-ticket-wrap:hover .pack-ticket::after{ opacity:0; }
}