/* ==========================================================================
   ABOUT US (#about5, home page) — the same design as Our System and Why
   Choose Us on the Google Ads page (2026-09-20)
   --------------------------------------------------------------------------
   Same concept, this section's own parts:
     · the tab row becomes a head band in the hero's outer blue (#C6D9F4)
       that also frames the card; the chosen tab is cut out of it in white
       and opens into the white body — no line, border or underline
     · the tabs start on a deliberate gutter, not on the card's edge
     · the company facts (label / value rows) sit together on one pale-blue
       block, the way the checklists sit in their blue foot
     · square corners, the hero's geometry
   The picture, the identity block, the three fact tiles and both actions are
   left exactly as they are.  Markup and scripts untouched.

   Linked last on index.html; TO UNDO delete that single <link>.
   The home page paints this section through `html body #about5 …!important`
   rules — and it already escalates its own selectors to six repeated ids for
   this section — so every rule here carries `!important` and eight repeated
   ids, which is what it takes to win.
   ========================================================================== */
html body #about5#about5#about5#about5#about5#about5#about5#about5{
  --ab5-band:#C6D9F4;
  --ab5-block:#F2F6FC;
  --ab5-ink:#0E1E35;
  --ab5-navy:#15335C;
}

/* ---- the card: framed in the band's blue, square ----------------------- */
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-card.ab-outer{
  border:2px solid var(--ab5-band) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

/* ---- the head band and its keys ---------------------------------------- */
/* the row spans the card and becomes the band itself (the card's own ground
   is already this blue); the tray it used to sit in is gone, so the chosen
   key can reach the white body below */
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftabs{
  width:auto !important;
  margin:0 !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:12px 30px 0 !important;
  gap:4px !important;
  scroll-padding-inline:30px !important;
  align-items:flex-end !important;
}
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:var(--ab5-navy) !important;
  padding:13px 20px 14px !important;
  font-weight:750 !important;
  letter-spacing:-.012em !important;
}
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab svg{ stroke:#2F5C96 !important; opacity:1 !important; }
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab:hover:not([aria-selected="true"]){
  background:rgba(255,255,255,.42) !important; box-shadow:none !important; color:var(--ab5-ink) !important;
}
/* the chosen key is cut out of the band in white and runs into the body */
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab[aria-selected="true"]{
  background:#FFFFFF !important;
  color:var(--ab5-ink) !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab[aria-selected="true"] svg{ stroke:var(--ab5-ink) !important; }
/* the little live dot on the chosen key is a second selection mark — the
   white cut-out says it already */
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab[aria-selected="true"]::after{ content:none !important; }
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-split{
  border:0 !important; border-radius:0 !important; background-color:#FFFFFF !important;
}

/* ---- the facts, as one pale-blue block --------------------------------- */
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-pnote{ color:#46556A !important; }
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-pr{
  background:var(--ab5-block) !important;
  border-bottom:1px solid #E1EAF6 !important;
  padding:9px 18px !important;
  margin:0 !important;
}
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-panel > div.ab-pr:first-of-type{ margin-top:14px !important; padding-top:14px !important; }
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-panel > div.ab-pr:last-of-type{ border-bottom:0 !important; padding-bottom:16px !important; }
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-k{ color:#4A5A70 !important; }
html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-v{ color:var(--ab5-ink) !important; }

/* ---- the phone: the same, on the narrower band ------------------------- */
@media (max-width: 860px){
  /* on a phone the card's ground is pale sky, so the row paints the band
     itself; the chosen key stays the white cut-out */
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftabs{ background-color:var(--ab5-band) !important; padding:10px 18px 0 !important; scroll-padding-inline:18px !important; }
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab{ padding:12px 14px 13px !important; }
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-pr{ padding:6px 14px !important; }
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-panel > div.ab-pr:first-of-type{ margin-top:10px !important; padding-top:10px !important; }
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-panel > div.ab-pr:last-of-type{ padding-bottom:12px !important; }
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftabs{ padding-top:8px !important; }
}