/* ==========================================================================
   ZANSYS RESPONSIVE PATCH v1
   Applied to every page to unify mobile/tablet breakpoints
   Breakpoints:
     - 1060px and below : tablet/small laptop (already partially handled)
     - 768px and below  : tablet portrait
     - 640px and below  : large phone
     - 480px and below  : standard phone
     - 380px and below  : small phone
   ========================================================================== */

/* ---------- Safety layer: universal overflow and sizing ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
body { position: relative; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Prevent the mobile drawer from causing horizontal scroll/layout shift
   even though it's transformed off-screen. */
.mob-nav, #mobNav { right: 0; left: auto; max-width: 100vw; }
.mob-panel { right: 0; }

/* ---------- TABLET (1060px — refine existing) ---------- */
@media (max-width: 1060px) {
  .hero-l { padding: 3rem 1.75rem !important; }
  .hero-r-img { height: 260px; }
  .hfc, .hfc1, .hfc2 { position: static !important; max-width: 100% !important; margin-top: 1rem; animation: none !important; }
}

/* ---------- TABLET PORTRAIT (768px) ---------- */
@media (max-width: 768px) {
  /* Container padding */
  .w, .nav-in, .ft-bt, .ft-in { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* Section padding — reduce vertical space */
  .sec, .sec-dk { padding: 3.5rem 0 !important; }

  /* Typography scaling for readability */
  .h1, h1 { font-size: clamp(2rem, 7vw, 2.75rem) !important; line-height: 1.1 !important; }
  .h2, h2, .h2w { font-size: clamp(1.5rem, 5.5vw, 2.1rem) !important; line-height: 1.15 !important; }
  .h3, h3 { font-size: clamp(1.1rem, 4vw, 1.35rem) !important; }
  .p1, .p1w, p { font-size: 0.95rem !important; line-height: 1.65 !important; }

  /* Grids collapse — class-based. Comprehensive list covering all class-based grids across the site.
     NOTE: .cl-grid (client logos on about.html) is intentionally excluded — the page's own
     @media rule already handles it, and we want logos to stay 2-col on mobile, not stack. */
  .g2, .g3, .g4,
  .hww-g, .sol-hd,
  .ai-in, .out-in, .tm-g,
  .eng-g, .eng-overview,
  .case-g, .cs-g,
  .del-g, .res-g, .rel-g, .related-g,
  .ins-g, .ins-all, .sm-grid,
  .ldr-g, .offices-g, .og,
  .psi, .quick-links,
  .values-g, .who-g, .why-g,
  .two,
  .contact-wrap, .cf-field-row,
  .fr { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* Client logos grid on about page — respect the page's own 2-col mobile rule, don't override */
  .cl-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }

  /* Stats counter grid: keep as 2 columns on tablet — numbers look better side by side */
  .stats-g { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }

  /* Contact form column - reduce huge padding */
  .cf-col { padding: 1.75rem 1.25rem !important; }
  .cv { min-height: 280px; }
  .cv-ct { padding: 1.75rem 1.25rem !important; }
  .cv-ct h2 { font-size: 1.4rem !important; }

  /* Engagement model cards - reduce padding on mobile to avoid tall cards */
  .ec { padding: 1.5rem !important; }
  .ec p, .ec-fs li { font-size: 0.85rem !important; }

  /* Solution detail page hero — reduce excessive top/bottom padding on mobile */
  .sol-hero { padding: 1.5rem 0 2rem !important; }
  .sol-bc { margin-bottom: 1rem !important; font-size: 0.78rem !important; }
  .sol-hero-ic { font-size: 2rem !important; margin-bottom: 0.75rem !important; }
  .sol-hero-img { height: 200px !important; margin-top: 1.5rem !important; }

  /* Class-based grids (preferred — replaces inline-style attribute selectors below).
     Card grids: collapse to 2 columns at tablet portrait. */
  .ig-3, .ig-5, .case-grid-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  /* 2-col card grids → 1 column on tablet portrait */
  .ig-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Logo strips: 3 columns on tablet — logos still read in a row */
  .logos-6, .logos-6c {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem 1rem !important;
    justify-items: center !important;
  }

  /* Inline-styled grids: override repeat(N, …) patterns on containers inside .w
     — KEPT as a safety net for legacy markup; harmless when nothing matches. */
  .w div[style*="grid-template-columns:repeat(6"],
  .w div[style*="grid-template-columns: repeat(6"],
  .w div[style*="grid-template-columns:repeat(5"],
  .w div[style*="grid-template-columns: repeat(5"],
  .w div[style*="grid-template-columns:repeat(4"],
  .w div[style*="grid-template-columns: repeat(4"],
  .w div[style*="grid-template-columns:repeat(3"],
  .w div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* repeat(2,1fr) grids with card content: collapse to 1 column on tablet & below */
  .w div[style*="grid-template-columns:repeat(2,1fr)"],
  .w div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Logo-only grids (repeat(6,...)): keep at 3 columns on tablet — logos look better in a row */
  .w div[style*="grid-template-columns:repeat(6,1fr)"],
  .w div[style*="grid-template-columns: repeat(6, 1fr)"],
  .w div[style*="grid-template-columns:repeat(6,auto)"],
  .w div[style*="grid-template-columns: repeat(6, auto)"],
  div[style*="grid-template-columns:repeat(6,1fr)"],
  div[style*="grid-template-columns:repeat(6,auto)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem 1rem !important;
    justify-items: center !important;
  }

  /* Hero */
  .hero { grid-template-columns: 1fr !important; min-height: auto !important; }
  .hero-l { padding: 2.25rem 1.25rem !important; }
  .hero-l h1 { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
  .hero-sub { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; }
  .hero-r, .hero-r-img { height: 240px !important; min-height: 240px !important; }
  .hero-ctas { flex-direction: column; align-items: stretch !important; gap: 0.65rem !important; margin-bottom: 2rem !important; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-proof { gap: 1.25rem !important; padding-top: 1.25rem !important; }
  .pf-n { font-size: 1.25rem !important; }

  /* Floating hero cards -> inline */
  .hfc, .hfc1, .hfc2 { position: static !important; max-width: 100% !important; margin: 0.75rem 0 0 0 !important; animation: none !important; box-shadow: none !important; border: 1px solid var(--br) !important; }

  /* Navigation */
  nav { height: 60px; }
  .nav-in { height: 60px !important; padding: 0 1rem !important; align-items: center !important; }
  .logo { padding: 0 !important; border-right: none !important; }
  .logo img { height: 30px !important; }
  .nl { display: none !important; }
  .nr { gap: 0.5rem !important; margin-left: auto !important; }
  .nr .btn { padding: 0.5rem 1rem !important; font-size: 0.85rem !important; }
  .nr .nbadge { display: none !important; }
  /* Hide all nav CTAs on mobile — drawer will contain them */
  .nr .nav-hire, .nr .nav-btn, .nr .btn:not(.ham-btn) { display: none !important; }

  /* CTAs / buttons */
  .btn { padding: 0.75rem 1.25rem !important; font-size: 0.95rem !important; }
  .btn-or, .btn-dk, .btn-gh, .btn-ghw { padding: 0.8rem 1.5rem !important; }

  /* Footer */
  .ft-g { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
  .ft-bt { flex-direction: column !important; gap: 0.75rem !important; text-align: center !important; }

  /* Forms */
  input, textarea, select { font-size: 16px !important; /* prevents iOS zoom-on-focus */ }
  .fg { width: 100%; }

  /* Carousel - tighten */
  .carousel-outer::before, .carousel-outer::after { width: 40px; }
  .cl-item { padding: 0 1rem; }
  .cl-item img, .cl-item svg { height: 32px !important; max-width: 120px !important; }

  /* Tag pills don't break lines awkwardly */
  .tag, .tagw { font-size: 0.65rem !important; }

  /* Tables */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Any element that had absolute positioning off-screen */
  [class*="fl-card"], [class*="float-card"] { position: static !important; }

  /* Privacy/terms TOC — fix inline min-width */
  .toc { max-width: 100% !important; min-width: 0 !important; width: auto !important; position: static !important; padding: 1rem !important; }
  .toc h4 { max-width: 100% !important; min-width: 0 !important; white-space: normal !important; }
  .toc ul, .toc li, .toc a { max-width: 100% !important; min-width: 0 !important; word-wrap: break-word; overflow-wrap: break-word; }

  /* Grid children must be shrinkable - prevents overflow from intrinsic content */
  .legal-wrap, .legal-wrap > * { min-width: 0 !important; grid-template-columns: 1fr !important; }
  .legal-wrap > * { max-width: 100% !important; overflow: hidden; }
}

/* ---------- LARGE PHONE (640px) ---------- */
@media (max-width: 640px) {
  .sec, .sec-dk { padding: 2.75rem 0 !important; }
  .hero-l h1 { font-size: clamp(1.8rem, 8.5vw, 2.3rem) !important; }
  .ft-g { grid-template-columns: 1fr !important; text-align: left !important; }

  /* Page heroes on secondary pages */
  .page-hero h1 { font-size: 1.75rem !important; }
  .page-hero { padding: 2rem 1.25rem !important; }
}

/* ---------- STANDARD PHONE (480px) ---------- */
@media (max-width: 480px) {
  .w, .nav-in, .ft-bt, .ft-in { padding-left: 1rem !important; padding-right: 1rem !important; }
  .sec, .sec-dk { padding: 2.25rem 0 !important; }

  .h1, h1 { font-size: 1.7rem !important; letter-spacing: -0.02em !important; }
  .h2, h2, .h2w { font-size: 1.35rem !important; }
  .h3, h3 { font-size: 1.05rem !important; }
  .p1, .p1w, p { font-size: 0.9rem !important; }

  .hero-l { padding: 1.75rem 1rem !important; }
  .hero-l h1 { font-size: 1.75rem !important; }
  .hero-sub { font-size: 0.9rem !important; }

  .btn { font-size: 0.9rem !important; padding: 0.7rem 1.1rem !important; }
  .btn-sm { font-size: 0.78rem !important; padding: 0.5rem 1rem !important; }

  /* Hamburger button more tap-friendly */
  .ham-btn { padding: 10px !important; margin-left: 0 !important; }

  /* Cookie banner */
  #ck-banner { padding: 0.875rem !important; font-size: 0.85rem; gap: 0.5rem !important; }
  #ck-banner .ck-msg, #ck-banner .ck-left p { font-size: 0.78rem !important; line-height: 1.45 !important; }
  #ck-banner .ck-ic { font-size: 1.1rem !important; }
  .ck-btns { flex-wrap: wrap !important; gap: 0.5rem !important; width: 100% !important; }
  .ck-btns .btn { flex: 1 1 calc(50% - 0.25rem) !important; font-size: 0.78rem !important; padding: 0.55rem 0.5rem !important; white-space: nowrap; justify-content: center; }
  .ck-reject { flex: 1 1 100% !important; text-align: left; padding: 0.25rem 0 !important; }

  /* Forms */
  label { font-size: 0.75rem !important; }
  input, textarea, select { padding: 0.7rem !important; }

  /* Hero proof numbers */
  .pf-n { font-size: 1.1rem !important; }
  .pf-l { font-size: 0.7rem !important; }

  /* Class-based collapse for the new grid utility classes — small phones */
  .ig-3, .ig-5, .case-grid-3 {
    grid-template-columns: 1fr !important;
  }
  /* Logo strips (.logos-6, .logos-6c): keep 3 columns even on small phones */
  .logos-6, .logos-6c {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    justify-items: stretch !important;
    align-items: center !important;
  }
  .logos-6 > *, .logos-6c > * {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    width: 100% !important;
  }
  .logos-6 img, .logos-6c img {
    max-width: 100% !important;
    max-height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Collapse 2-col grids fully on small phones (content cards only) */
  .w div[style*="grid-template-columns:repeat(5"],
  .w div[style*="grid-template-columns: repeat(5"],
  .w div[style*="grid-template-columns:repeat(4"],
  .w div[style*="grid-template-columns: repeat(4"],
  .w div[style*="grid-template-columns:repeat(3"],
  .w div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Logo grids (repeat(6)): keep as 3 columns on phones too — logos don't need to stack */
  .w div[style*="grid-template-columns:repeat(6,1fr)"],
  .w div[style*="grid-template-columns: repeat(6, 1fr)"],
  .w div[style*="grid-template-columns:repeat(6,auto)"],
  .w div[style*="grid-template-columns: repeat(6, auto)"],
  div[style*="grid-template-columns:repeat(6,1fr)"],
  div[style*="grid-template-columns:repeat(6,auto)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    justify-items: stretch !important;
    align-items: center !important;
  }
  /* Each logo gets a consistent 60px-tall centered cell */
  .w div[style*="grid-template-columns:repeat(6,1fr)"] > *,
  .w div[style*="grid-template-columns: repeat(6, 1fr)"] > *,
  .w div[style*="grid-template-columns:repeat(6,auto)"] > *,
  .w div[style*="grid-template-columns: repeat(6, auto)"] > *,
  div[style*="grid-template-columns:repeat(6,1fr)"] > *,
  div[style*="grid-template-columns:repeat(6,auto)"] > * {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    width: 100% !important;
  }
  /* Shrink logo images to fit their cell */
  .w div[style*="grid-template-columns:repeat(6,1fr)"] img,
  .w div[style*="grid-template-columns: repeat(6, 1fr)"] img,
  .w div[style*="grid-template-columns:repeat(6,auto)"] img,
  .w div[style*="grid-template-columns: repeat(6, auto)"] img,
  div[style*="grid-template-columns:repeat(6,1fr)"] img,
  div[style*="grid-template-columns:repeat(6,auto)"] img {
    max-width: 100% !important;
    max-height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Privacy/terms TOC and any element with inline min-width */
  .toc, .toc h4, .toc ul, .toc li, .toc a {
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
    position: static !important;
  }
  .toc { padding: 1rem !important; margin-bottom: 1.5rem !important; }
  .toc h4 { font-size: 0.7rem !important; white-space: normal !important; }
}

/* ---------- SMALL PHONE (380px) ---------- */
@media (max-width: 380px) {
  .h1, h1, .hero-l h1 { font-size: 1.55rem !important; }
  .h2, h2, .h2w { font-size: 1.2rem !important; }
  .btn { font-size: 0.85rem !important; padding: 0.65rem 1rem !important; }
  .logo img { height: 26px !important; }
}

/* ---------- LANDSCAPE PHONE (hero height fix) ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto !important; }
  .hero-l { padding: 1.5rem 1.25rem !important; }
  .hero-r, .hero-r-img { height: 180px !important; min-height: 180px !important; }
}

/* ---------- MOBILE NAV DRAWER ----------
   NOTE: The site already defines .mob-nav with position:fixed, inset:0,
   pointer-events:none, and .mob-panel with transform:translateX(100%).
   We do NOT redefine these — the existing implementation works correctly.
   Only scoped mobile-specific tweaks (inside @media blocks above) are applied. */

/* ---------- Accessibility: tap targets ---------- */
@media (max-width: 768px) {
  /* Apply 44px tap target only to standalone CTAs/buttons, not inline text links */
  button:not(.ham-line), .btn, input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  /* Inline text links (breadcrumbs, footer, body copy) keep natural line height */
  .sol-bc a, .sol-bc span,
  .ft-l a, .ft-l li,
  .breadcrumb a, .crumb a,
  p a, li a, td a {
    min-height: 0 !important;
  }
}

/* ---------- Prevent text size boost on iOS landscape ---------- */
html { -webkit-text-size-adjust: 100%; }

/* ---------- Use-case list items with orange arrow bullets (solution detail pages) ---------- */
.use-cases { display: flex; flex-direction: column; gap: 0.65rem; }
.uc {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: var(--bd);
  line-height: 1.55;
  padding-left: 0;
}
.uc::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.25rem;
  background-color: var(--or);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
}

/* ---------- Mobile drawer sub-icons — match desktop SVG styling ---------- */.mob-sub-ic {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--or) !important;
  flex-shrink: 0;
}
.mob-sub-ic svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ---------- "View all Solutions" link in mobile drawer ---------- */
.mob-sub-all {
  font-weight: 600 !important;
  color: var(--or) !important;
  background: rgba(232, 77, 14, 0.04) !important;
  border-bottom: 1px solid var(--br) !important;
}
.mob-sub-all:hover {
  background: rgba(232, 77, 14, 0.08) !important;
  color: var(--or) !important;
}
.mob-sub-all .mob-sub-ic {
  color: var(--or) !important;
}

/* ==========================================================================
   LOGO STRIP — visual-weight tiers (Featured Clients grid)
   --------------------------------------------------------------------------
   The brand logos vary widely in character (shields, wordmarks, icons,
   logos with built-in coloured backgrounds). A single bounding box can't
   make them feel equally substantial. These tier classes let each logo
   be sized for its own visual weight, taking NRCA as the reference.
   ========================================================================== */
.lc {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  flex: 0 0 auto;
  padding: 0 1rem;
}
.lc img {
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: .85;
  transition: opacity .25s;
}
.lc img:hover { opacity: 1; }

/* Tier A — shield/mark + wordmark logos (NRCA reference) ----------------- */
.lc.lc-mark img  { max-height: 50px; max-width: 160px; }

/* Tier B — wide text-only wordmarks; let them stretch wider ------------- */
.lc.lc-wide img  { max-height: 40px; max-width: 200px; }

/* Tier C — round / square icon-only logos ------------------------------- */
.lc.lc-icon img  { max-height: 54px; max-width: 64px;  }

/* Tier D — logos with built-in coloured backgrounds; trim slightly so
   the panel doesn't dominate next to clean-on-white logos --------------- */
.lc.lc-boxed img { max-height: 44px; max-width: 150px; }

/* Mobile — drop heights a touch so logos still breathe in narrow rows --- */
@media (max-width: 640px) {
  .lc                  { height: 64px; padding: 0 .5rem; }
  .lc.lc-mark img      { max-height: 42px; max-width: 130px; }
  .lc.lc-wide img      { max-height: 28px; max-width: 150px; }
  .lc.lc-icon img      { max-height: 42px; max-width: 50px;  }
  .lc.lc-boxed img     { max-height: 34px; max-width: 120px; }
}

/* ==========================================================================
   FIXED-TOP NAV with scroll-aware shadow
   --------------------------------------------------------------------------
   The nav is upgraded from `position: sticky` to `position: fixed` because
   sticky can be silently broken by ancestor `overflow-x: hidden` (which the
   body uses). Fixed always works. Body gets a top padding to compensate for
   the nav being out of normal flow. A subtle shadow fades in once the page
   has scrolled, giving the bar a sense of elevation over the content.
   ========================================================================== */
nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: box-shadow .25s ease, background-color .25s ease;
}
body { padding-top: 72px; }

nav.is-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

@media (max-width: 1060px) { body { padding-top: 64px; } }
@media (max-width: 640px)  { body { padding-top: 60px; } }

/* ==========================================================================
   ANCHOR-JUMP OFFSET — keeps section headings clear of the fixed nav
   --------------------------------------------------------------------------
   With `nav { position: fixed }` and `body { padding-top: 72px }`, anchor
   jumps (e.g. `solutions.html#engage`) used to land 72px under the nav,
   hiding the heading. `scroll-margin-top` tells the browser to leave room
   above any element that becomes a scroll target. Values are tuned to
   match the nav heights at each breakpoint, plus a small 8px buffer.
   ========================================================================== */
:target,
[id],
section[id],
section {
  scroll-margin-top: 80px;
}
@media (max-width: 1060px) {
  :target, [id], section[id], section { scroll-margin-top: 72px; }
}
@media (max-width: 640px) {
  :target, [id], section[id], section { scroll-margin-top: 68px; }
}