/* =============================================================
   BANNER — hero + certifications strip (standalone)
   Extracted from index.css · self-contained, drop-in ready.

   Scope: every selector is namespaced under .hero / .certifications.
   Ships its own scoped reset + base type, uses no :root vars and no
   bare body/nav/a/* selectors, so it can't leak into (or inherit
   from) whatever page it's dropped on. Same class names as the
   homepage partials — no markup changes needed:
     components/translation-pill.php        (.hero-diff-pill)
     components/homepage-tagline.php        (.hero-tagline-v2)
     components/translation-trustcard.php   (.trust-cards / .metrics /
                                             .btn-cta-hero / .hero-urgency)
     components/certifications-compliance.php (.certifications block)

   Safe to load alongside index.css on the homepage too: identical
   declarations at higher specificity → zero visual change.

   Fonts: DM Sans + Plus Jakarta Sans. Uncomment the @import below
   only if the host page doesn't already load them.
   ============================================================= */

/* @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800;900&display=swap'); */

/* ---- scoped reset (only inside the banner) ---- */
.hero, .hero *, .hero *::before, .hero *::after,
.certifications, .certifications *,
.certifications *::before, .certifications *::after{
  margin:0; padding:0; box-sizing:border-box;
}

/* ---- base type (replaces body inheritance) ---- */
.hero,
.certifications{
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;
  line-height:1.6;
  color:#1a2535;
      justify-items: center;
}
.hero a, .certifications a{ text-decoration:none; }
.hero img, .hero svg, .hero iframe, .hero video,
.certifications img, .certifications svg{ max-width:100%; height:auto; }
.hero :focus-visible,
.certifications :focus-visible{
  outline:#5fb8ff solid 3px; outline-offset:3px; border-radius:4px;
}

/* ---- container ---- */
.hero .container{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* =====================  HERO  ===================== */
.hero{
  position:relative;
  padding:44px 0 30px !important;
  text-align:center !important;
  background:linear-gradient(180deg,#fff 0,#eef4ff 100%) !important;
}
/* legacy kill-switches (old two-column hero) */
.hero .hero-grid, .hero::before{ display:none !important; }

/* ---- pill ("Human Translators. Not AI.") ---- */
.hero .hero-diff-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8;
  font-size:.85rem; font-weight:700; padding:.35rem 1rem;
  border-radius:999px; margin-bottom:1.1rem; letter-spacing:.01em;
}

/* ---- title / tagline / subtext ---- */
.hero h1{ font-family:"Plus Jakarta Sans",sans-serif; font-weight:900; }
.hero .hero-title{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:clamp(30px, 3.8vw, 52px);
  font-weight:800; line-height:1.1; letter-spacing:-.02em;
  color:#0f172a; margin-bottom:0;
}
.hero .hero-title .accent{ display:block; color:#2563eb; font-size:inherit; }
.hero .hero-tagline-v2{
  margin-top:12px; font-size:12px; letter-spacing:.08em; color:#94a3b8;
}
.hero .hero-subtext-v2{
  margin:14px auto 22px; font-size:16px; max-width:720px;
  color:#475569; line-height:1.6;
}
.hero .hero-subtext-v2 strong{ color:#0f172a; font-weight:600; }

/* ---- trust cards ---- */
.hero .trust-cards{
  display:grid; grid-template-columns:repeat(4,180px);
  justify-content:center; gap:12px; margin-bottom:22px;
}
.hero .trust-card{
  background:#fff; border:1.5px solid #e2e8f0; border-radius:14px;
  padding:14px 12px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  transition:.2s;
}
.hero .trust-card:hover{
  transform:translateY(-3px); border-color:#2563eb;
  box-shadow:0 10px 24px rgb(37 99 235 / .14);
}
/* highlighted 2nd card (4.9★ rating, gold) */
.hero .trust-cards .trust-card:nth-child(2){
  background:#fffbeb; border:2px solid #fde68a;
}
.hero .trust-card .card-icon{
  width:36px; height:36px; border-radius:10px; background:#f1f5f9;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; margin-bottom:7px;
}
.hero .trust-cards .trust-card:nth-child(2) .card-icon{
  background:rgb(245 158 11 / .12);
}
.hero .trust-card h3{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:13px; font-weight:700; color:#1e40af;
  margin-bottom:2px; white-space:nowrap;
}
.hero .trust-cards .trust-card:nth-child(2) h3{ color:#92400e; }
.hero .trust-card p{
  font-size:11px; color:#64748b; line-height:1.4; white-space:nowrap;
}

/* ---- metrics strip ---- */
.hero .metrics{
  display:flex; justify-content:center; gap:48px; margin-bottom:22px;
}
.hero .metric{ text-align:center; }
.hero .metric-number{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:30px; font-weight:700; color:#0f172a;
  line-height:1; margin-bottom:4px;
}
.hero .metric-label{ font-size:11px; color:#94a3b8; letter-spacing:.02em; }

/* ---- CTA + microcopy + urgency ---- */
.hero .hero-cta-wrap{ text-align:center; margin-bottom:8px; }
.hero .btn-cta-hero{
  display:inline-block;
  font-family:"Plus Jakarta Sans",sans-serif;
  padding:13px 32px; border-radius:10px;
  font-weight:600; font-size:15px; border:none; cursor:pointer;
  text-decoration:none;
  background:#16a34a; color:#fff;
  box-shadow:0 10px 28px rgb(22 163 74 / .32);
  transition:.2s;
}
.hero .btn-cta-hero:hover{
  background:#15803d; transform:translateY(-2px);
  box-shadow:0 14px 36px rgb(22 163 74 / .42);
}
.hero .cta-microcopy{
  text-align:center; margin-top:10px; font-size:12px;
  color:#475569; letter-spacing:.03em;
}
.hero .hero-urgency{
  font-size:.875rem; color:#374151; margin-top:.65rem; text-align:center;
}
.hero .hero-urgency strong{ color:#1d4ed8; }
.hero .hero-urgency a{ color:#1d4ed8; text-decoration:underline; }

/* =====================  CERTIFICATIONS STRIP  ===================== */
.certifications{
  background:linear-gradient(180deg,#f0f6ff 0,#f8fafc 100%);
  padding:24px 0 22px;
  border-top:1px solid #e2eaf6; border-bottom:1px solid #e2eaf6;
}
.certifications .certs-label{
  display:flex; gap:12px; align-items:center; justify-content:center;
  text-align:center; font-size:13px; font-weight:600;
  letter-spacing:.05em; color:#94a3b8; margin-bottom:16px;
}
.certifications .certs-label::before,
.certifications .certs-label::after{
  content:""; display:block; width:60px; height:1px; background:#cbd5e1;
}
.certifications .cert-inner{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  max-width:1100px; margin:0 auto; padding:0 20px;
}
.certifications .cert-card{
  display:flex; gap:12px; align-items:center;
  flex:1 1 175px; min-width:0;
  background:#fff; border:1px solid #dde8f5; border-radius:14px;
  padding:14px 18px; box-shadow:0 1px 4px rgb(0 0 0 / .04);
  transition:.2s;
}
.certifications .cert-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgb(37 99 235 / .1);
  border-color:#bfd3f0;
}
.certifications .cert-icon{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
}
.certifications .cert-icon svg{
  width:20px; height:20px; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.certifications .cert-card h4{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:13px; font-weight:700; color:#0f172a; margin-bottom:2px;
}
.certifications .cert-card p{ font-size:12px; color:#64748b; line-height:1.4; }

/* accent top borders */
.certifications .cert-card.hipaa{ border-top:3px solid #3b82f6; }
.certifications .cert-card.bbb  { border-top:3px solid #f97316; }
.certifications .cert-card.uscis{ border-top:3px solid #0d9488; }
.certifications .cert-card.ata  { border-top:3px solid #8b5cf6; }
.certifications .cert-card.gdpr { border-top:3px solid #22c55e; }

/* icon tints */
.certifications .ci-hipaa{ background:#eff6ff; }
.certifications .ci-bbb  { background:#fff7ed; }
.certifications .ci-uscis{ background:#f0fdfa; }
.certifications .ci-ata  { background:#f5f3ff; }
.certifications .ci-gdpr { background:#f0fdf4; }

/* =====================  RESPONSIVE  ===================== */
@media (max-width:992px){
  .hero .trust-cards{ grid-template-columns:repeat(2,180px); }
  .hero .metrics{ gap:28px; }
}

@media (max-width:768px){
  .hero, .certifications{ font-size:14px; }
  .hero .container{ padding:0 16px; }
  .hero{ padding:30px 0 22px !important; }
  .hero .hero-title{ font-size:clamp(24px, 7vw, 34px) !important; line-height:1.12; }
  .hero .hero-tagline-v2{ margin-top:8px; font-size:11px; }
  .hero .hero-subtext-v2{ font-size:14.5px; margin:12px auto 18px; }
  .hero .trust-cards{
    grid-template-columns:repeat(2,1fr) !important;
    gap:9px; max-width:440px; margin:0 auto 18px;
  }
  .hero .trust-card{ padding:12px 10px; }
  .hero .trust-card h3{ font-size:12.5px; white-space:normal; }
  .hero .trust-card p{ font-size:11px; white-space:normal; }
  .hero .metrics{
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:14px 12px; max-width:340px; margin:0 auto 16px;
  }
  .hero .metric-number{ font-size:24px; }
  .hero .btn-cta-hero{ width:100%; max-width:360px; padding:13px 18px; font-size:15px; }
  .hero .cta-microcopy{ font-size:11.5px; line-height:1.5; padding:0 8px; }
  .certifications{ padding:20px 0 18px; }
  .certifications .cert-inner{ gap:9px; padding:0 14px; }
  .certifications .cert-card{ flex:1 1 calc(50% - 9px); padding:12px; gap:10px; }
  .certifications .cert-card h4{ font-size:12.5px; }
  .certifications .cert-card p{ font-size:11.5px; }
  .certifications .cert-icon{ width:36px; height:36px; }
  .certifications .certs-label::before,
  .certifications .certs-label::after{ width:32px; }
}

@media (max-width:600px){
  .hero .container{ padding:0 14px; }
  .hero .hero-title{ font-size:clamp(22px, 7.5vw, 30px) !important; }
  .hero .trust-cards{ gap:8px; }
  .hero .trust-card{ padding:10px 8px; }
  .hero .trust-card .card-icon{ width:30px; height:30px; font-size:14px; margin-bottom:6px; }
  .hero .metrics{ gap:12px 10px; }
  .hero .metric-number{ font-size:22px; }
  .hero .metric-label{ font-size:10px; }
}

@media (max-width:480px){
  .hero .hero-title{ font-size:clamp(20px, 8vw, 28px) !important; }
}

@media (max-width:400px){
  .certifications .cert-card{ flex:1 1 100%; }
}

@media (max-width:360px){
  .hero .container{ padding:0 12px; }
  .hero .hero-title{ font-size:clamp(18px, 8.5vw, 24px) !important; }
  .hero .metrics, .hero .trust-cards{ grid-template-columns:1fr !important; }
  .hero .trust-cards{ max-width:280px; }
  .hero .trust-card{
    padding:10px 14px; flex-direction:row; gap:10px;
    justify-content:flex-start; text-align:left;
  }
  .hero .trust-card .card-icon{ margin-bottom:0; }
  .hero .trust-card h3, .hero .trust-card p{ white-space:normal; }
  .hero .metrics{ gap:10px; max-width:220px; }
}

/* ---- space after the certifications strip ----
   Opens clean air between the strip's bottom border and the next
   section ("We are Experts…"). Sits after the scoped reset so the
   margin sticks. Tune 44px to taste (40–48 works best here). ---- */
.certifications{ margin-bottom:44px !important; }
@media (max-width:768px){
  .certifications{ margin-bottom:28px !important; }
}