/* Almaya — shared mobile layer. Loaded first in every page's helmet so
   page-specific rules that come later can still override it.
   NOTE: styles are serialized by React, so attribute selectors must use the
   spaced form ("font-size: 13px", "repeat(4, 1fr)") that the DOM carries. */
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
img, iframe, video { max-width: 100%; }

@media (max-width: 900px) {

  /* ---- page gutters: use the full screen ---- */
  header { padding: 12px 16px !important; gap: 12px !important; }
  section, footer { padding-left: 18px !important; padding-right: 18px !important; }
  section > div, footer > div { max-width: 100% !important; }

  /* ---- collapse multi-column grids to one column ---- */
  [style*="grid-template-columns: repeat(2"]:not(.cmp-row),
  [style*="grid-template-columns: repeat(3"]:not(.cmp-row),
  [style*="grid-template-columns: repeat(4"]:not(.cmp-row),
  [style*="grid-template-columns: repeat(auto-fit"],
  [style*="grid-template-columns: 1fr 1fr"]:not(.cmp-row),
  [style*="grid-template-columns: 0.7fr"],
  [style*="grid-template-columns: 0.8fr"],
  [style*="grid-template-columns: 0.9fr"],
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns: 1.15fr"],
  [style*="grid-template-columns: 1.2fr"],
  [style*="grid-template-columns: 1.3fr"]:not(.cmp-row),
  [style*="grid-template-columns: 216px"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- headings never clip or run off screen ---- */
  h1[style*="white-space: nowrap"], h2[style*="white-space: nowrap"],
  h3[style*="white-space: nowrap"], p[style*="white-space: nowrap"],
  div[style*="white-space: nowrap"]:not(.marquee-track) {
    white-space: normal !important;
  }
  h1 { font-size: clamp(1.85rem, 8.4vw, 2.5rem) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(1.45rem, 6.4vw, 2rem) !important; line-height: 1.22 !important; }
  h3 { font-size: 18px !important; }
  h1, h2, h3, p, div, span, a { overflow-wrap: break-word; }

  /* ---- lift the smallest type to a readable size ---- */
  [style*="font-size: 10px"], [style*="font-size: 11px"], [style*="font-size: 11.5px"],
  [style*="font-size: 12px"], [style*="font-size: 12.5px"] { font-size: 13px !important; }
  [style*="font-size: 13px"], [style*="font-size: 13.5px"] { font-size: 14.5px !important; }
  [style*="font-size: 14px"], [style*="font-size: 14.5px"] { font-size: 15.5px !important; }
  p { line-height: 1.65 !important; }

  /* ---- hero / banner bands ---- */
  [style*="min-height: 520px"] {
    min-height: 0 !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .hero-grid { padding: 28px 18px 32px !important; }
  .hero-copy { padding-left: 0 !important; }

  /* ---- tap targets ---- */
  a[style*="height: 38px"], a[style*="height: 47px"] { height: 48px !important; }
  a[style*="height: 52px"], a[style*="height: 56px"] { height: 52px !important; width: 100% !important; }
  button { min-height: 44px; }

  /* ---- booking pop-up ---- */
  [style*="z-index: 2000"] { padding: 10px !important; }
  [style*="max-width: 920px"] { height: 92vh !important; }

  /* ---- marquees ---- */
  .marquee-track { gap: 26px !important; }
  .marquee-track span { font-size: 18px !important; }
  .marquee-track > div { max-width: 78vw !important; }

  /* ---- comparison table stays legible ---- */
  .cmp-row > div { padding: 12px 10px !important; }

  /* ---- overflow hardening ---- */
  [style*="min-width: 260px"], [style*="min-width: 280px"], [style*="min-width: 320px"] { min-width: 0 !important; }
  [style*="max-width: 1160px"], [style*="max-width: 1120px"], [style*="max-width: 1100px"],
  [style*="max-width: 1080px"], [style*="max-width: 1060px"], [style*="max-width: 1000px"],
  [style*="max-width: 960px"], [style*="max-width: 900px"], [style*="max-width: 820px"],
  [style*="max-width: 800px"], [style*="max-width: 780px"], [style*="max-width: 760px"],
  [style*="max-width: 720px"], [style*="max-width: 680px"], [style*="max-width: 640px"],
  [style*="max-width: 620px"], [style*="max-width: 600px"] { max-width: 100% !important; }
  img[style*="width: 140px"] { width: 110px !important; height: 110px !important; }
  section > *, footer > * { max-width: 100% !important; }
}

@media (max-width: 560px) {
  section, footer { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 56px 48px"], [style*="padding: 40px"], [style*="padding: 32px"] { padding: 26px 18px !important; }
}

/* ---------- header: keep it one line through the 900–1200px dead zone ---------- */
header > a:first-child span { white-space: nowrap; }
header > div:last-child { flex-shrink: 0; }
header > div:last-child a, header > div:last-child button { white-space: nowrap; }
@media (max-width: 1200px) {
  header { gap: 16px !important; padding-left: 24px !important; padding-right: 24px !important; }
  .nav-links { gap: 20px !important; }
  header > div:last-child button { font-size: 13px !important; padding: 0 14px !important; }
}

/* ---------- mobile nav (injected by site-mobile-nav.js) ---------- */
.am-navtoggle { display: none; }
/* the drawer is injected into <body> on every page — keep it hidden outside the
   mobile breakpoint, or its links render as stray text over the hero */
.am-drawer { display: none; }
@media (max-width: 900px) {
  /* pages hide .nav-links at 860px; match this layer's 900px so the two navs
     never render at the same time */
  .nav-links { display: none !important; }
  .am-navtoggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(247,243,234,0.45);
    border-radius: 4px; cursor: pointer;
  }
  .am-navtoggle span {
    display: block; width: 20px; height: 2px; background: #F7F3EA;
    box-shadow: 0 -6px 0 #F7F3EA, 0 6px 0 #F7F3EA;
  }
  .am-drawer {
    position: fixed; left: 0; right: 0; z-index: 99;
    background: #17392F; border-top: 1px solid rgba(247,243,234,0.18);
    box-shadow: 0 18px 40px rgba(0,0,0,0.32);
    display: none; flex-direction: column; padding: 8px 0 14px;
  }
  .am-drawer.am-open { display: flex; }
  .am-drawer a {
    padding: 15px 20px; color: #F7F3EA !important; font-size: 17px;
    text-decoration: none; border-bottom: 1px solid rgba(247,243,234,0.10);
  }
  .am-drawer a.am-cta {
    margin: 14px 20px 0; background: #B85C3D; border: 0; border-radius: 4px;
    text-align: center; font-weight: 600;
  }
  header > a:first-child span { font-size: 19px !important; }
  header > a:first-child > div { width: 34px !important; height: 34px !important; }
  header > a:first-child img { height: 26px !important; }
}


/* ---------- scroll-reveal override ----------
   Several pages hid content at opacity:0 and relied on a scroll observer to
   add an "in" class. The runtime re-creates those nodes on re-render, which
   strips the class and leaves whole sections blank. Content visibility is not
   worth an entrance animation, so these are simply always visible. */
.step-box, .svc-card, .why-point, .vet-step, .svc-headline, .svc-sub,
.au-point, .au-crit, .math-item, .math-op, .hiw-step, .stage-card {
  opacity: 1 !important;
  transform: none !important;
}
.worry-bubble {
  opacity: 1 !important;
  transform: translateY(0) rotate(var(--rot, 0deg)) scale(1) !important;
}
/* hover lifts still work — they set transform on :hover, which wins on
   specificity over the rules above */
.svc-card:hover, .stage-card:hover, .bubble:hover { transform: translateY(-4px) !important; }
.step-box:hover { transform: none !important; }