/* Phone and tablet fixes, shared by every page (loaded from each page's <head>). */

/* ---- Menu button + menu panel (built by mobile.js) ---- */
.m-menu-btn, .m-menu { display: none; }

@media (max-width: 980px) {
  /* The desktop menu links and "Get in touch" button don't fit: hide them and use the Menu button instead */
  nav[aria-label="Main"] > div > div { display: none !important; }

  .m-menu-btn {
    display: inline-flex; align-items: center; gap: 10px;
    position: fixed; top: 12px; right: clamp(20px, 5vw, 72px); z-index: 60;
    min-height: 40px; padding: 0 16px;
    background: #ffffff; color: #1a4590; border: 1px solid #c9a449; border-radius: 0;
    font-family: 'Barlow Semi Condensed', 'Outfit', sans-serif; font-weight: 600; font-size: 13px;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  }
  .m-menu-btn .m-bars { position: relative; width: 16px; height: 10px; }
  .m-menu-btn .m-bars::before, .m-menu-btn .m-bars::after, .m-menu-btn .m-bars span {
    content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor; transition: transform .25s ease, opacity .25s ease;
  }
  .m-menu-btn .m-bars::before { top: 0; }
  .m-menu-btn .m-bars span { top: 4.25px; }
  .m-menu-btn .m-bars::after { bottom: 0; }
  .m-menu-btn[aria-expanded="true"] .m-bars::before { transform: translateY(4.25px) rotate(45deg); }
  .m-menu-btn[aria-expanded="true"] .m-bars span { opacity: 0; }
  .m-menu-btn[aria-expanded="true"] .m-bars::after { transform: translateY(-4.25px) rotate(-45deg); }

  .m-menu {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 64px; z-index: 55;
    background: #ffffff; color: #1a4590; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 4px clamp(20px, 5vw, 72px) 16px;
    border-top: 1px solid rgba(11, 31, 69, 0.12);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .m-menu.m-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
  /* Main headings (Services, About, More): tap to slide their links open, like the FAQs */
  .m-group { border-bottom: 1px solid rgba(11, 31, 69, 0.12); }
  .m-group-btn {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 18px 0; background: none; border: 0; cursor: pointer; text-align: left; color: #1a4590;
    font-family: 'Newsreader', Georgia, serif; font-size: 24px; line-height: 1.25;
  }
  .m-group-btn .m-sign { font-family: 'Outfit', sans-serif; font-size: 22px; flex: none; }
  .m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
  .m-sub.m-sub-open { grid-template-rows: 1fr; }
  .m-sub-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear .35s; }
  .m-sub.m-sub-open .m-sub-inner { visibility: visible; transition: none; }
  .m-sub-inner > div { padding: 0 0 12px 16px; border-left: 1px solid #c9a449; margin-bottom: 18px; }
  .m-menu a.m-link {
    display: block; padding: 10px 0; color: #1a4590; text-decoration: none;
    font-family: 'Newsreader', Georgia, serif; font-size: 19px; line-height: 1.25;
  }
  .m-menu a.m-cta {
    display: block; text-align: center; margin-top: 28px; padding: 16px 20px;
    background: #0b1f45; color: #fbf8f1; text-decoration: none;
    font-family: 'Barlow Semi Condensed', 'Outfit', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .m-sub, .m-sub-inner, .m-menu, .m-menu.m-open, .m-menu-btn .m-bars::before, .m-menu-btn .m-bars::after, .m-menu-btn .m-bars span { transition: none; }
}

/* ---- Newsletter box: one column on phones (home, insights, testimonials) ---- */
@media (max-width: 760px) {
  .news-grid { grid-template-columns: 1fr !important; }
  .news-grid input[type="email"] { min-width: 0 !important; }
}

/* ---- Contact form card: remove the desktop sideways offset on smaller screens ---- */
@media (max-width: 900px) {
  .contact-card { left: 0 !important; }
}

/* ---- Home hero "I'd like to" links: one per line on phones (no dots) ---- */
@media (max-width: 640px) {
  .hero-links { flex-direction: column; gap: 14px !important; }
  .hero-dot { display: none; }
  .hero-links { align-self: stretch; align-items: center !important; }
  .hero-links a { width: 100% !important; max-width: 340px; justify-content: center; }
  .hero-tile { padding: 16px 14px !important; gap: 8px !important; }
  .hero-title { min-height: 3.1em !important; }  /* the longest headline takes 3 lines on phones: stops the page jumping as they rotate */
}

/* ---- Appear on scroll, one after the other (code in mobile.js) ----
   Items wait here, invisible and 48px lower, only while <html> has class rv-js. That class is set
   by a tiny script in the page's <head> (so there is no flash on load) and is removed after 4s if
   mobile.js never starts, so nothing can ever stay hidden. */
html.rv-js [data-rv].rv-self, html.rv-js [data-rv] > .rv-in {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .8s cubic-bezier(.33,1,.68,1), transform .8s cubic-bezier(.33,1,.68,1);
}
@media (prefers-reduced-motion: reduce) {
  html.rv-js [data-rv].rv-self, html.rv-js [data-rv] > .rv-in { opacity: 1; transform: none; transition: none; }
}

/* ---- Phones: "Get in touch" + round contact icons (email, phone, LinkedIn, Instagram) ----
   Side by side they don't fit on a phone, so the last icon dropped onto a line of its own.
   Put "Get in touch" on one line and all the icons together on the next. */
@media (max-width: 760px) {
  div:has(> a[aria-label="Email Claudio"]):has(> a[aria-label="Call Claudio"]) { flex-wrap: wrap !important; }
  div:has(> a[aria-label="Email Claudio"]):has(> a[aria-label="Call Claudio"])::before { content: ""; order: 1; flex-basis: 100%; height: 0; }
  div:has(> a[aria-label="Email Claudio"]):has(> a[aria-label="Call Claudio"]) > a[aria-label] { order: 2; }
}

/* A "Get in touch" + icons row inside a narrow column (About page, "Let's have a chat"): the same
   two-line layout at every screen size, so the last icon never drops onto a line of its own. */
.contact-row-stack { flex-wrap: wrap !important; }
.contact-row-stack::before { content: ""; order: 1; flex-basis: 100%; height: 0; }
.contact-row-stack > a[aria-label] { order: 2; }