/* ============================================================
   OnTrac — Contact Information card

   Replaces images/contact-information1.svg (167 KB), in which every
   word — company name, address, phone, email — was outlined vector
   paths. Nothing in it could be read by a screen reader, selected,
   copied or tapped, and "QBAR" could not be re-cased without redrawing
   the artwork.

   Rebuilt as markup with the same geometry, measured off the original
   at its native 541x603: 58.5px text inset, 42px/1.11 heading, 16px
   body on a 24px rhythm, rows at y 218 / 266 / 310, text column at
   106.5px, background #0B63E5, 12px radius. The three icons are the
   original SVG's own paths, inlined with currentColor so they inherit
   the card's white.
   ============================================================ */

.contact-card {
  position: relative;
  overflow: hidden; /* clips the decorative circles, as the SVG's clipPath did */
  box-sizing: border-box;
  width: 100%;
  background: #0b63e5;
  border-radius: 12px;
  /* 200px of bottom space is not slack: the original card was 541x603
     with its text ending at y402, and that empty lower third is where
     the two translucent circles sit. Without it they ride up over the
     address. */
  padding: 48px 40px 200px 58px;
  color: #fff;
  font-family: "Inter", sans-serif;
  /* responsive.css centres the whole .contactus section with !important.
     The old card was an <img> so it never noticed; real text does. A rule
     on the element itself beats an inherited value, !important or not. */
  text-align: left;
}

/* the two translucent circles bottom-right, from the original's
   <circle cx=448.687 cy=602.496 r=135.398 opacity=.12> and
   <ellipse cx=354.562 cy=510.387 r=69.4608 opacity=.13>.
   Positioned off the bottom-right corner so they keep their offsets
   however tall the card grows when the text wraps. */
.contact-card::before,
.contact-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.contact-card::before {
  width: 270.8px;
  height: 270.8px;
  right: -43.1px;
  bottom: -134.9px;
  background: rgba(255, 255, 255, 0.12);
}
.contact-card::after {
  width: 138.9px;
  height: 138.9px;
  right: 116.9px;
  bottom: 23.1px;
  background: rgba(255, 249, 249, 0.13);
}

/* content above the circles */
.contact-card > * {
  position: relative;
  z-index: 1;
}

.cc-title {
  margin: 0 0 14px;
  font-size: 42px;
  line-height: 1.11;
  font-weight: 700;
  /* -2px, not the -0.5px used elsewhere on the site. Measured against the
     original artwork: cap height 30.6 fixes the size at 42px, and at that
     size "Information" has to set to 215px of ink to match — Inter needs
     -2px of tracking to get there. Display sizes want negative tracking
     anyway. */
  letter-spacing: -2px;
  color: #fff;
}

/* responsive.css:176 targets `.contactus p` directly, which beats the
   text-align inherited from .contact-card — so the tagline needs its own */
.contact-card .cc-tagline {
  text-align: left;
}

.cc-tagline {
  margin: 0 0 38px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.cc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-list li {
  display: flex;
  align-items: flex-start;
  gap: 28px; /* icon 20 + 28 puts the text column at 106px, as in the original */
  margin-bottom: 24px;
}
.cc-list li:last-child {
  margin-bottom: 0;
}

.cc-icon {
  flex: 0 0 auto;
  margin-top: 0;
  width: 20px;
  height: 24px; /* matches the 24px line box, so the icon sits on the first line */
  color: #fff;
  overflow: visible;
}

/* The phone and email are links, and at 16px/1.5 they were 24px tall —
   under the 44px minimum for a touch target, on the one page whose job
   is getting people to make contact. Padding grows the hit area; the
   row gap below absorbs it without moving anything else. */
.cc-list a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
}

.cc-list a,
.cc-list address {
  font-size: 16px;
  line-height: 1.5;
  font-style: normal;
  color: #fff;
  text-decoration: none;
  /* long email on a narrow card should wrap rather than overflow */
  overflow-wrap: anywhere;
}

.cc-list a:hover,
.cc-list a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 575px) {
  .contact-card {
    padding: 36px 28px 130px 28px;
  }
  .cc-title {
    font-size: 34px;
  }
  .cc-list li {
    gap: 16px;
  }
}