/* ═══════════════════════════════════════════════════════════════════════════════
   CAS — RESPONSIVE FIXES v4.0
   Loaded LAST so it overrides any embedded <style> blocks.
   Targets: phones (≤480px), small phones (≤375px), tablets (≤900px), iOS notch.

   IMPORTANT: rules here are deliberately conservative — only `body` gets
   overflow-x:hidden (NOT `html`), and the mobile drawer paints transparently
   until `.is-open` is set so it can never accidentally cover content.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   FORCE-VISIBLE SAFETY NET — guarantees that no plugin / embedded CSS can
   accidentally hide the main page content area on mobile.  This is an
   explicit safeguard against the "blank page below header" bug class.
   ─────────────────────────────────────────────────────────────────────────── */
html { display: block !important; }
body {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 100vh;
}
main,
#cas-main,
.cas-main,
.hp,
.hp-hero,
section.hp-hero,
.svc-page,
.au-page,
.cs-page,
.cr-page,
.pcs-page,
.cp,
.hub,
.lib,
.ap,
.entry-content,
[role="main"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hero sections must always have a minimum visible height so they never
   collapse to 0px even if their flex/grid children fail to render.
   v4.2 — also force the dark background here as a safety net so that even
   if the inline <style> blocks in page templates fail to load (slow Chrome
   Android with KB/s data speed), the hero is still recognisably dark and
   the user sees the page is "loading" instead of an empty white screen.
   v4.3 — added .cp-hero (contact), .hub-hero (services hub), .lib-hero
          (document library). All page-template heroes now covered. */
.hp-hero,
.svc-hero,
.au-hero,
.cs-hero,
.pcs-hero,
.cp-hero,
.hub-hero,
.lib-hero {
  min-height: 200px;
  background-color: #1D1D1F;
  color: #fff;
}
/* contact + hub use even-darker #0A0A0B per their templates */
.cp-hero,
.hub-hero { background-color: #0A0A0B; }

/* Page wrappers — give a background colour fallback so they don't paint
   pure transparent (which on Chrome Android occasionally renders as black
   or "blank" if a parent's bg fails). */
.cs-page,
.cr-page,
.svc-page,
.pcs-page,
.au-page,
.cp,
.hub,
.lib,
.ap { background-color: #F5F5F7; }

/* ───────────────────────────────────────────────────────────────────────────
   GLOBAL — safer overflow handling on body only.  Setting overflow-x:hidden
   on <html> breaks scroll-anchoring on Chrome Android in some versions and
   was the suspected cause of the "blank page below header" mobile bug.
   ─────────────────────────────────────────────────────────────────────────── */
body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

* {
  -webkit-tap-highlight-color: rgba(0, 113, 227, 0.15);
}

/* Honor iPhone safe area insets at the top/sides */
@supports (padding: env(safe-area-inset-top)) {
  .cas-topstrip {
    padding-top: env(safe-area-inset-top);
  }
  .cas-topstrip__inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Make all images responsive by default */
img { max-width: 100%; height: auto; }

/* ───────────────────────────────────────────────────────────────────────────
   CRITICAL FIX — mobile nav drawer.
   Defaults: transparent background + visibility:hidden so the drawer NEVER
   paints over content unless `.is-open` is set by the hamburger JS.
   When open: solid white, anchored below the header at correct height per
   breakpoint, uses 100dvh on iOS for true viewport height.
   ─────────────────────────────────────────────────────────────────────────── */
.cas-mobile-nav {
  position: fixed;
  inset: 96px 0 0 0;            /* desktop default: clears 32px topstrip + 64px header */
  height: calc(100vh - 96px);
  height: calc(100dvh - 96px);
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: transparent;       /* transparent until is-open — never covers content */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9998;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.cas-mobile-nav.is-open {
  background: #fff;              /* solid white only when actually open */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}
.cas-mobile-nav__inner {
  min-height: auto;
  padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 720px) {
  .cas-mobile-nav {
    inset: 102px 0 0 0;          /* 38px topstrip + 64px header = 102px */
    height: calc(100vh - 102px);
    height: calc(100dvh - 102px);
    max-height: calc(100vh - 102px);
    max-height: calc(100dvh - 102px);
  }
}

@media (max-width: 480px) {
  .cas-mobile-nav {
    inset: 92px 0 0 0;           /* 36px topstrip + 56px header = 92px */
    height: calc(100vh - 92px);
    height: calc(100dvh - 92px);
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
  }
}
@media (max-width: 360px) {
  .cas-mobile-nav {
    inset: 88px 0 0 0;           /* 32px topstrip + 56px header = 88px */
    height: calc(100vh - 88px);
    height: calc(100dvh - 88px);
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
  }
}

@media (max-width: 360px) {
  .cas-mobile-nav {
    inset: 86px 0 0 0;
    height: calc(100vh - 86px);
    height: calc(100dvh - 86px);
  }
}

/* Mobile nav links — bigger tap targets */
.cas-mobile-nav__list li a,
.cas-mobile-nav__list li > a {
  min-height: 44px;
  display: flex !important;
  align-items: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   TABLET — show hamburger from 1024px down (was only 900px), since
   the desktop nav links + mega trigger don't all fit reliably on iPad
   portrait (~768px).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cas-nav { display: none !important; }
  .cas-header__actions .cas-btn--primary { display: none !important; }
  .cas-hamburger { display: flex !important; }
  .cas-nav__item--mega { display: none !important; }
  #cas-mega { display: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   HEADER — tighten padding on small screens, prevent logo overflow
   v4.7 — improve mobile header layout: hide both action buttons (they live
   in the drawer), make the hamburger the dominant right-side affordance,
   widen the logo target. Cleaner & more touch-friendly than v4.6.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Hide BOTH header CTAs on phones — drawer has Verify + Get Certified */
  .cas-header__verify,
  .cas-header__actions .cas-btn--primary,
  .cas-header__actions .cas-btn--outline {
    display: none !important;
  }
  /* Promote the hamburger as the only right-edge element */
  .cas-header__inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 0 !important;
  }
  .cas-header__actions {
    display: none !important;
  }
  .cas-hamburger {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    background: rgba(0,0,0,.02) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .cas-hamburger:active { background: rgba(0,113,227,.1) !important; }
  .cas-hamburger__bar {
    width: 20px !important;
    height: 2px !important;
    background: #1D1D1F !important;
    border-radius: 2px;
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  .cas-header__inner {
    height: 56px;
    gap: 1rem;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .cas-header__logo img { height: 32px !important; }
  /* Spacer accounts for 36px topstrip + 56px header = 92px (rounded up) */
  .cas-header-spacer { height: 92px !important; }
  .cas-hamburger {
    width: 42px !important;
    height: 42px !important;
  }
}

/* Tablet logo height */
@media (max-width: 720px) and (min-width: 481px) {
  .cas-header__inner {
    height: 60px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .cas-header__logo img { height: 36px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   TOPSTRIP — already responsive, but tighten further on very small phones
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .cas-topstrip__tagline { display: none !important; }
  .cas-topstrip__inner { justify-content: flex-end; min-height: 32px; }
  .cas-header { top: 32px !important; }
  .cas-header-spacer { height: 88px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   HOMEPAGE HERO
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hp-hero {
    padding: 4rem 1.25rem 3.5rem !important;
  }
  .hp-hero h1 {
    font-size: clamp(1.85rem, 7vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }
  .hp-hero-desc {
    font-size: 0.95rem !important;
  }
  .hp-hero-card {
    display: block !important;            /* tablet — show card again, smaller */
    max-width: 100%;
    margin: 1.5rem 0 0 !important;
  }
}

@media (max-width: 600px) {
  .hp-hero {
    padding: 3rem 1rem 2.5rem !important;
  }
  .hp-hero-inner {
    gap: 1.5rem !important;
  }
  .hp-hero h1 {
    font-size: clamp(1.65rem, 8vw, 2.1rem) !important;
  }
  .hp-hero-card { display: none !important; }   /* small phones — hide again */
  .hp-btns {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }
  .hp-btns .btn-blue,
  .hp-btns .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 14px 22px !important;
  }
  .hp-trust {
    margin-top: 1.5rem !important;
    gap: 12px !important;
    font-size: 11px;
  }
  .hp-trust-item { font-size: 11px !important; }
  .eyebrow { font-size: 10px !important; letter-spacing: .12em !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   HOMEPAGE STATS — already 2x2 below 640px; tighten padding
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hp-stat { padding: 1.25rem 0.75rem !important; }
  .hp-stat-n { font-size: 1.65rem !important; }
  .hp-stat-l { font-size: 11px !important; line-height: 1.35 !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   HOMEPAGE ACCREDITATIONS — better card layout on phones
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hp-accred-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .hp-accred-card {
    padding: 16px 12px !important;
  }
  .hp-accred-logo { height: 48px !important; }
  .hp-accred-name { font-size: 12px !important; }
  .hp-accred-sub { font-size: 11px !important; line-height: 1.45 !important; }
  .hp-accred-link { font-size: 11px !important; }
}

@media (max-width: 360px) {
  .hp-accred-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   HOMEPAGE SERVICES — Category Selector + Service Cards
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cas-svc-section { padding: 3.5rem 1rem !important; }
  .cas-cat-selector {
    flex-direction: column;
    gap: 8px !important;
    margin: 2rem 0 0 !important;
  }
  .cas-cat-btn {
    width: 100% !important;
    max-width: none !important;
    min-width: auto !important;
    flex: none !important;
    padding: 12px 16px !important;
  }
  .cas-cat-btn__sub { display: block !important; font-size: 11px !important; }
}

@media (max-width: 600px) {
  .cas-svc-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .cas-svc-card {
    padding: 14px !important;
  }
  .cas-svc-card__std { font-size: 13px !important; }
  .cas-svc-card__name { font-size: 12px !important; }
  .cas-svc-card__cta {
    opacity: 1 !important;            /* show CTA always on touch */
    transform: none !important;
  }
  .cas-tier {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .cas-tier__sub {
    margin-left: 28px !important;     /* below the dot+label, indented */
    font-size: 10.5px !important;
    flex-basis: 100%;
    line-height: 1.4;
  }
  .cas-tier__label { font-size: 10.5px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   HOMEPAGE PROCESS — already stacks below 900px; tighten padding
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hp-proc-step {
    padding: 18px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid #E8E8ED;
  }
  .hp-proc-step:last-child { border-bottom: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   HOMEPAGE CERTSEARCH — already stacks below 540px; ensure full width
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .hp-cs { padding: 3rem 1.25rem !important; }
  .hp-cs-inner h2 { font-size: 1.5rem !important; }
  .hp-cs-inner p { font-size: 14px !important; line-height: 1.6 !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   HOMEPAGE OFFICES — make 1col on small phones
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hp-office { padding: 18px !important; }
  .hp-ops {
    flex-direction: column;
    align-items: flex-start !important;
    padding: 14px 16px !important;
  }
  .hp-ops-pills { gap: 6px !important; }
  .hp-ops-pill { font-size: 11.5px !important; padding: 4px 10px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   FOOTER — better stacking on phones
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cas-footer-main {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  .cas-footer { padding: 2.5rem 1.25rem !important; }
  .cas-footer-col { text-align: left !important; }
  .cas-footer-col h4 { margin-bottom: 0.5rem !important; }
  .cas-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem !important;
    padding-top: 1.5rem !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   FORMS — input fields full-width on phones, tap target ≥44px
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;          /* prevents iOS zoom-in on focus */
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
  }
  .ap-grid,
  .ap-g,
  .ap-g2 {
    grid-template-columns: 1fr !important;
  }
  .ap-card,
  .ap-card__bd,
  .ap-card__hd { padding: 1rem !important; }
  .ap-step h2 { font-size: 1.1rem !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   APPLICATION FORM — progress steps + nav buttons
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ap-ps {
    gap: 8px !important;
    padding: 1rem !important;
  }
  .ap-ps__step {
    flex: 1;
    min-width: 0;
  }
  .ap-ps__lbl {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ap-nav {
    flex-direction: column-reverse;
    gap: 8px !important;
  }
  .ap-nav button,
  .ap-nav .ap-btn {
    width: 100% !important;
    justify-content: center;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   ABOUT PAGE — hero stats grid, accred cards, scope tables
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .au-hero { padding: 3rem 1.25rem !important; }
  .au-hero h1 { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; }
  .au-hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  .au-hero-group {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .au-mv-grid,
  .au-vision-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .au-scope-grid,
  .au-accred-grid {
    grid-template-columns: 1fr !important;
  }
  .au-offices-grid {
    grid-template-columns: 1fr !important;
  }
  .au-section { padding: 2.5rem 1.25rem !important; }
}

@media (max-width: 480px) {
  .au-hero-stats {
    grid-template-columns: 1fr !important;
  }
  .au-hero-group {
    grid-template-columns: 1fr !important;
  }
  .au-scard,
  .au-accred-item,
  .au-mv,
  .au-vision-pillar {
    padding: 1rem !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   CERTSEARCH — verify page hero/results
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cs-hero { padding: 2.5rem 1.25rem !important; }
  .cs-hero h1 { font-size: clamp(1.6rem, 6vw, 2.1rem) !important; }
  .cs-search-card { padding: 1.25rem !important; }
  .cs-search-row {
    flex-direction: column;
    gap: 8px !important;
  }
  .cs-search-input,
  .cs-search-btn {
    width: 100% !important;
    border-radius: 10px !important;
  }
  .cs-search-btn { justify-content: center; }
  .cs-trust {
    flex-direction: column;
    gap: 8px !important;
    align-items: flex-start;
  }
  .cs-steps-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .cs-step-card { padding: 16px !important; }
  .cs-modal {
    margin: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
  }
  .cs-modal-actions { flex-direction: column; gap: 8px !important; }
  .cs-modal-actions button { width: 100% !important; }
  /* v4.2 — tab switcher: stack vertically on phones so cards don't get
     cramped (the inline 200px min-width forces awkward wrap on 380–500px) */
  .cs-tabs { flex-direction: column !important; gap: 8px !important; }
  .cs-tab {
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px 14px !important;
  }
  .cs-tab-emoji { font-size: 20px !important; }
  .cs-tab-title { font-size: 13.5px !important; }
  .cs-tab-sub { font-size: 10.5px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   PERSON CERT — verification page
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .pcs-hero { padding: 2rem 1rem !important; }
  .pcs-summary {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  .pcs-grid {
    grid-template-columns: 1fr !important;
  }
  .pcs-actions {
    flex-direction: column;
    gap: 1rem !important;
    align-items: stretch !important;
  }
  .pcs-action-btns {
    flex-direction: column;
    gap: 8px !important;
  }
  .pcs-btn {
    width: 100% !important;
    justify-content: center;
  }
  .pcs-other-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .pcs-summary { grid-template-columns: 1fr !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   SINGLE CERTSEARCH — cert verification record
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cr-page,
  .vr-page { padding: 1.25rem !important; }
  .cr-grid,
  .vr-grid {
    grid-template-columns: 1fr !important;
  }
  .cr-other-certs__grid,
  .vr-other-certs__grid {
    grid-template-columns: 1fr !important;
  }
  .ts-body { padding: 1.5rem 1.25rem !important; }
  .ts-title { font-size: 1.2rem !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   SERVICE PAGES — single ISO/standard pages
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .svc-hero { padding: 3rem 1.25rem !important; }
  .svc-hero__h1,
  .svc-hero h1 {
    font-size: clamp(1.85rem, 6vw, 2.6rem) !important;
  }
  .svc-hero__container,
  .svc-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .svc-section { padding: 2.5rem 1.25rem !important; }
  .svc-grid,
  .svc-cards { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .svc-2col,
  .svc-3col,
  .svc-4col { grid-template-columns: 1fr !important; }
  .svc-table { font-size: 13px !important; }
  .svc-table th,
  .svc-table td { padding: 10px !important; }
}

@media (max-width: 600px) {
  .svc-hero__badges {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .svc-badge {
    font-size: 10.5px !important;
    padding: 4px 10px !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   FAQ PAGE
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .faq-layout,
  .faq-grid {
    grid-template-columns: 1fr !important;
  }
  .faq-sidebar {
    position: static !important;
    margin-bottom: 1.5rem;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   LIBRARY PAGE
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lib-layout {
    grid-template-columns: 1fr !important;
  }
  .lib-aside,
  .lib-sidebar {
    position: static !important;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 600px) {
  .lib-section { padding: 1.5rem 1rem !important; }
  .lib-doc-hd { padding: 12px !important; }
  .lib-doc-body { padding: 0 12px 12px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   CONTACT / COMPLAINTS / FEEDBACK FORMS
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .contact-grid,
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .contact-info-card,
  .contact-form-card { padding: 1.25rem !important; }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   GENERIC GRIDS — fallback for any 2/3/4-column grid that misses breakpoints
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  [class*="grid-cols-2"],
  [class*="grid-cols-3"],
  [class*="grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   SECTION CTA / BANNERS
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hp-cta {
    padding: 2.25rem 1.25rem !important;
    border-radius: 14px !important;
  }
  .hp-cta h2 { font-size: 1.45rem !important; }
  .hp-cta p { font-size: 14px !important; }
  .hp-cta-btns {
    flex-direction: column;
    width: 100%;
    gap: 8px !important;
  }
  .hp-cta-btns .btn-white,
  .hp-cta-btns .btn-outline-white {
    width: 100%;
    justify-content: center;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   REVIEW BANNER — full message visible on mobile
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .cas-review-banner__inner {
    flex-wrap: wrap;
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  .cas-review-banner__msg { font-size: 11.5px !important; line-height: 1.4 !important; }
  .cas-review-banner__close { padding: 4px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   LANGUAGE DROPDOWN — better mobile alignment
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .cas-lang-menu {
    right: 0;
    left: auto;
    min-width: 160px;
  }
  .cas-lang-trigger {
    padding: 5px 8px !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY — increase tap target sizes globally on touch devices
   ─────────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  a, button, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  .cas-svc-card,
  .hp-svc-card,
  .hp-accred-card { min-height: 44px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   PREVENT INPUT-ZOOM ON iOS — apply to ALL form inputs on phones
   (iOS auto-zooms when input font-size < 16px)
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: max(16px, 1em);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   BREAK LONG WORDS / URLS to prevent layout overflow on phones
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body, p, h1, h2, h3, h4, h5, h6, li, td, th, dd, dt {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  /* But keep ISO codes / cert numbers / monospace on one line */
  code, .cas-iso-code, .hc-mono, .pcs-cell-value code, .doc-mono {
    -webkit-hyphens: none;
    hyphens: none;
    word-break: normal;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   RTL (Arabic) — fix mobile-specific RTL issues
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body.cas-rtl .cas-mobile-nav__list li > a {
    text-align: right;
  }
  body.cas-rtl .cas-tier__sub {
    margin-left: 0 !important;
    margin-right: 28px !important;
  }
  body.cas-rtl .hp-ops {
    direction: rtl;
  }
}

/* v4.6 — RTL bidi-isolation for phone numbers, emails, URLs, and any text
   starting with a "+" prefix (international dial codes). Without this,
   the bidi algorithm flips the leading "+" to the wrong end of the number
   so "+20 108 088 8574" displays as "20+ 108 088 8574". This fixes the
   issue site-wide for every tel:/mailto:/sms:/wa.me link without needing
   to wrap each number in <bdi> tags one by one. */
body.cas-rtl a[href^="tel:"],
body.cas-rtl a[href^="mailto:"],
body.cas-rtl a[href^="sms:"],
body.cas-rtl a[href*="wa.me/"],
body.cas-rtl a[href^="tel:"] *,
body.cas-rtl a[href^="mailto:"] *,
body.cas-rtl a[href*="wa.me/"] *,
body.cas-rtl .cp-office__link,
body.cas-rtl .cp-wa__num,
body.cas-rtl .cas-footer-contact-row,
body.cas-rtl input[type="tel"],
body.cas-rtl input[type="email"],
body.cas-rtl input[type="url"] {
  unicode-bidi: isolate !important;
  direction: ltr !important;
}
/* Keep the link itself flex-aligned to the right edge in RTL so it sits
   under the right-aligned label even though its content is LTR. */
body.cas-rtl a[href^="tel:"],
body.cas-rtl a[href^="mailto:"],
body.cas-rtl a[href*="wa.me/"] {
  display: inline-flex;
  text-align: left;
}

/* v4.5 — RTL MOBILE OVERFLOW PROTECTION (ships v2.32.0)
   Without this, on Chrome Android with dir="rtl" the document body can grow
   wider than the viewport (often because some descendant ignores its parent's
   max-width when the layout is mirrored). The visible result: a half-empty
   page on first load — content is rendered but pushed off-screen to one side.
   This block hard-clamps EVERY page wrapper and major container to 100vw and
   forces overflow-x: hidden up the chain so the canvas can't be wider than
   the viewport, regardless of which descendant misbehaves. */
@media (max-width: 1024px) {
  /* Lock the document canvas to exactly viewport-width. Without this, on
     dir="rtl" Chrome Android the page can render at 2x viewport width with
     content sitting in the right half — the unscrolled view shows the empty
     left half ("blank page" symptom). */
  html[dir="rtl"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    position: relative !important;
  }
  html[dir="rtl"] body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    min-width: 0 !important;
    position: relative !important;
    margin: 0 !important;
  }
  /* Top-level page wrappers — clamp their width too */
  html[dir="rtl"] body main,
  html[dir="rtl"] body #cas-main,
  html[dir="rtl"] body .cas-main,
  html[dir="rtl"] body .hp,
  html[dir="rtl"] body .hub,
  html[dir="rtl"] body .lib,
  html[dir="rtl"] body .ap,
  html[dir="rtl"] body .cp,
  html[dir="rtl"] body .au-page,
  html[dir="rtl"] body .cs-page,
  html[dir="rtl"] body .cr-page,
  html[dir="rtl"] body .pcs-page,
  html[dir="rtl"] body .svc-page {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  /* Inner containers and grid wrappers */
  html[dir="rtl"] body section,
  html[dir="rtl"] body .cas-container,
  html[dir="rtl"] body .hp-container,
  html[dir="rtl"] body .hp-hero-inner,
  html[dir="rtl"] body .hp-stats-grid,
  html[dir="rtl"] body .hp-offices-grid,
  html[dir="rtl"] body .hp-svc-grid,
  html[dir="rtl"] body .hp-process,
  html[dir="rtl"] body .hp-accred-grid,
  html[dir="rtl"] body .au-hero-inner,
  html[dir="rtl"] body .au-wrap,
  html[dir="rtl"] body .au-section,
  html[dir="rtl"] body .au-mv-grid,
  html[dir="rtl"] body .au-vision-grid,
  html[dir="rtl"] body .au-accred-grid,
  html[dir="rtl"] body .au-scope-grid,
  html[dir="rtl"] body .au-offices-grid,
  html[dir="rtl"] body .au-why-grid,
  html[dir="rtl"] body .au-iaf-grid,
  html[dir="rtl"] body .au-fsms-grid,
  html[dir="rtl"] body .cs-hero-inner,
  html[dir="rtl"] body .cs-search-card,
  html[dir="rtl"] body .cs-results,
  html[dir="rtl"] body .cs-steps-grid,
  html[dir="rtl"] body .cp-layout,
  html[dir="rtl"] body .cp-hero__in,
  html[dir="rtl"] body .lib-layout,
  html[dir="rtl"] body .lib-hero__in,
  html[dir="rtl"] body .hub-content,
  html[dir="rtl"] body .hub-hero__in,
  html[dir="rtl"] body .svc-hero__inner,
  html[dir="rtl"] body .svc-section,
  html[dir="rtl"] body .cas-footer,
  html[dir="rtl"] body .cas-footer-grid,
  html[dir="rtl"] body .cas-footer-main,
  html[dir="rtl"] body .cas-footer-cta,
  html[dir="rtl"] body .cas-footer-cta__inner {
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Belt-and-braces: ANY direct child of body cannot exceed viewport */
  html[dir="rtl"] body > * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  /* Images / media never blow out the canvas */
  html[dir="rtl"] body img,
  html[dir="rtl"] body video,
  html[dir="rtl"] body iframe,
  html[dir="rtl"] body table {
    max-width: 100% !important;
    height: auto;
  }
}

/* v4.4 — RTL safety net: re-assert dark hero + page-wrapper rendering with
   higher-specificity selectors that beat any cas-rtl-prefixed override.
   Some browsers/extensions also inject rules under [dir="rtl"] selectors
   (specificity 0,1,1 — beats a bare .au-hero at 0,1,0); these rules cover
   that case so the dark hero is guaranteed in Arabic too. */
html[dir="rtl"] .hp-hero,
html[dir="rtl"] .cs-hero,
html[dir="rtl"] .svc-hero,
html[dir="rtl"] .au-hero,
html[dir="rtl"] .pcs-hero,
html[dir="rtl"] .cp-hero,
html[dir="rtl"] .hub-hero,
html[dir="rtl"] .lib-hero,
body.cas-rtl .hp-hero,
body.cas-rtl .cs-hero,
body.cas-rtl .svc-hero,
body.cas-rtl .au-hero,
body.cas-rtl .pcs-hero,
body.cas-rtl .cp-hero,
body.cas-rtl .hub-hero,
body.cas-rtl .lib-hero {
  background-color: #1D1D1F !important;
  color: #fff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 200px !important;
}
html[dir="rtl"] .cp-hero,
html[dir="rtl"] .hub-hero,
html[dir="rtl"] .lib-hero,
body.cas-rtl .cp-hero,
body.cas-rtl .hub-hero,
body.cas-rtl .lib-hero {
  background-color: #0A0A0B !important;
}
html[dir="rtl"] .hp,
html[dir="rtl"] .cs-page,
html[dir="rtl"] .cr-page,
html[dir="rtl"] .svc-page,
html[dir="rtl"] .au-page,
html[dir="rtl"] .pcs-page,
html[dir="rtl"] .cp,
html[dir="rtl"] .hub,
html[dir="rtl"] .lib,
html[dir="rtl"] .ap,
body.cas-rtl .hp,
body.cas-rtl .cs-page,
body.cas-rtl .cr-page,
body.cas-rtl .svc-page,
body.cas-rtl .au-page,
body.cas-rtl .pcs-page,
body.cas-rtl .cp,
body.cas-rtl .hub,
body.cas-rtl .lib,
body.cas-rtl .ap {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 60vh !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   PRINT — ensure desktop layout when printing from mobile
   ─────────────────────────────────────────────────────────────────────────── */
@media print {
  .cas-topstrip,
  .cas-header,
  .cas-mobile-nav,
  .cas-hamburger,
  .cas-review-banner,
  .cas-footer { display: none !important; }
  .cas-header-spacer { height: 0 !important; }
}
