/* ==========================================================================
   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; }
}

/* ---- the phone: all four keys inside the card (2026-10-02) -------------- */
/* The row used to scroll sideways with the fourth key cut at the edge, and
   the band itself stopped 20px short of the card (a max-width left over from
   the old tray).  Now the band spans the card and the four keys share its
   width: the free space is dealt out equally as side padding, so every label
   sits in the same air and nothing is hidden or clipped.  The row no longer
   overflows, so the page's peek tuner leaves it alone.
   Desktop and tablet (481px and up) keep their sizes; only the band's width
   is corrected up to 760px.
   TO UNDO delete from this comment to the end of the file (the files as they
   were: [archived]). */
@media (max-width: 760px){
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftabs{ max-width:100% !important; }
}
@media (max-width: 480px){
  /* one even 8px inset: top, left and right */
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftabs{ padding:8px 8px 0 !important; gap:0 !important; scroll-padding-inline:8px !important; }
  /* 13.5px from 412px wide, easing to 12.5px at 360px so the labels keep their air */
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab{ flex:1 0 auto !important; padding:12px 2px 13px !important; font-size:clamp(12.25px, calc(5.58px + 1.923vw), 13.5px) !important; }
}
@media (max-width: 349px){
  /* the narrowest phones (320, and 280 folded): a 4px inset and a smaller label */
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftabs{ padding-left:4px !important; padding-right:4px !important; scroll-padding-inline:4px !important; }
  html body #about5#about5#about5#about5#about5#about5#about5#about5 .ab-ftab{ font-size:clamp(10.5px, calc(3.22px + 2.6vw), 12.3px) !important; }
}