/* =========================================================
   TOP LINES — About page: Mission & Vision
   Addresses client comment 4 (22 Jul 2026):
     • "Remove this part from the home tab and add it to about tab"
     • "Use 2 cards, one for mission and one for vision, side by side"
     • "Remove numbering & title"   (the "01." / "02." and the
        invented card headings are gone; only the Mission / Vision
        label and the client's copy remain)
     • "The paragraph text is too small. It's not readable."
   ========================================================= */

/* ---------------------------------------------------------
   Intro band — "10+ Years of Excellence"

   Bug: the counter image overlapped the paragraph in the right
   column. main.css lays this band out as
     grid-template-columns: 1fr 350px;  max-width: 840px;
   but `1fr` resolves to at least the column's min-content, and
   the min-content here is the un-breakable "10+" at 360px type
   (~563px wide). That pushed the grid ~160px past its own
   max-width and straight into the next column.

   Two changes: minmax(0, …) lets the tracks shrink as intended,
   and the numeral is scaled to the space it actually has.
   --------------------------------------------------------- */
/* Desktop only. This override MUST stay inside a min-width query: main.css
   collapses the band to a single column under 992px, and because this file
   loads after main.css an unguarded rule here wins at every width — which
   kept two columns on phones, squeezed the numeral's track to nothing and
   let the "10+" spill out underneath the photo. */
@media (min-width: 992px) {
  .about-wrap-2 .about-content-left .about-counter-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
  }

  .about-wrap-2 .about-content-left .about-counter-wrap .counter-content .title {
    font-size: clamp(150px, 15.5vw, 280px);
    margin-top: -90px;
  }
}

/* Phone and small tablet: one column, numeral sized to the viewport it has. */
@media (max-width: 991.98px) {
  .about-wrap-2 .about-content-left .about-counter-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  /* main.css only left-aligns this under 767px, so 768–991px was still
     right-aligned against a full-width column. */
  .about-wrap-2 .about-content-left .about-counter-wrap .counter-content {
    align-items: start;
    width: 100%;
  }

  .about-wrap-2 .about-content-left .about-counter-wrap .counter-content .title {
    font-size: clamp(88px, 22vw, 170px);
    margin-top: 0;
    line-height: 0.95;
  }

  .about-wrap-2 .about-content-left .about-counter-wrap .counter-content p {
    margin-top: 6px;
    font-size: 20px;
    line-height: 1.35;
  }

  .about-wrap-2 .about-content-left .about-counter-wrap .counter-img {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------
   Process band — mobile alignment.

   Also applies to the Services page, which uses the same
   .process-section markup for "Project Sectors".

   On a phone this band had four different left edges stacked
   on top of each other: heading 16px, card 28px, photo 38px,
   card text 48px. The heading sits straight inside
   .container-2 while every other section on the page wraps its
   content in a Bootstrap row/col, and that col contributes the
   extra 12px the heading was missing.
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
  .process-section .heading-space {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* The photo carries a 10px white border, the copy 20px of padding,
     so image and text did not line up inside their own card. */
  .process-section .process-item .process-thumb {
    border-width: 14px;
    height: 200px;
  }

  .process-section .process-item .process-content {
    padding: 18px 14px 46px;
  }

  /* 65px of bottom padding was reserved for the ghost numeral at
     desktop size; at 60px type it only needs about 46. */
  .process-section .process-item .number {
    font-size: 52px;
    bottom: 6px;
    right: 14px;
  }
}

.tl-mv-section {
  background-color: var(--tl-surface-alt, #eeebe5);
}

.tl-mv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
  margin-top: clamp(40px, 4.5vw, 64px);
}

@media (max-width: 767px) {
  .tl-mv-grid {
    grid-template-columns: 1fr;
  }
}

.tl-mv-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--tl-surface-rule, rgba(27, 26, 24, 0.14));
  border-radius: 22px;
  background-color: var(--tl-surface-card, #fdfcfa);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.tl-mv-card:hover {
  border-color: rgba(27, 26, 24, 0.26);
  box-shadow: 0 18px 44px -32px rgba(27, 26, 24, 0.55);
}

/* The Mission / Vision label. This is what identifies the card —
   the numbering and the extra heading the client asked us to drop
   sat above it. A short gold rule ties it to the logo tagline. */
.tl-mv-card__label {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tl-ink-muted, #67635c);
}

.tl-mv-card__label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--tl-gold, #b58c21), rgba(181, 140, 33, 0));
}

.tl-mv-card p {
  margin: 0;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--tl-ink-body, #55524c);
  max-width: 56ch;
}

@media (hover: none) {
  .tl-mv-card:hover {
    border-color: var(--tl-surface-rule, rgba(27, 26, 24, 0.14));
    box-shadow: none;
  }
}