/* =========================================================
   TOP LINES — Services section (Home)
   Addresses client comment 3 (22 Jul 2026):
     • "Keep the cards clean with service labels only and
        no icons on the right side of the service card"
     • "make the moving service cards pause on mouse hover
        and resume moving when the mouse leaves the section"
       (the pause/resume itself is wired in Home.tsx)
   ========================================================= */

.tl-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 220px;
  padding: 26px 28px;
  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,
    transform 0.3s ease;
}

/* The card previously repeated the same building line-art as the section
   background, cropped differently per card — it read as a rendering fault
   and fought the "keep the cards clean" instruction. Cards are now a plain
   surface; the artwork stays on the section behind them. */

.tl-service-card:hover {
  border-color: rgba(27, 26, 24, 0.28);
  box-shadow: 0 18px 40px -30px rgba(27, 26, 24, 0.55);
  transform: translateY(-3px);
}

.tl-service-card__num {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--tl-ink-muted, #8b877f);
}

.tl-service-card__label {
  margin: 0;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tl-ink, #1b1a18);
  /* No trailing icon, so the label may use the full card width. */
  padding-right: 0;
}

@media (max-width: 767px) {
  .tl-service-card {
    height: 190px;
    padding: 22px 24px;
  }

  .tl-service-card__num {
    font-size: 24px;
  }
}

/* Pointer devices only — on touch there is no hover, and a sticky
   :hover state would leave a card looking permanently active. */
@media (hover: none) {
  .tl-service-card:hover {
    border-color: var(--tl-surface-rule, rgba(27, 26, 24, 0.14));
    box-shadow: none;
    transform: none;
  }
}

/* =========================================================
   Home — "Sectors we serve" + the four value cards
   Addresses client comment 5 (22 Jul 2026):
     • "Sectors covered: move it to the left to be aligned
        with SECTORS WE SERVE"
     • "Remove the photos and all list (01, 02, 03, 04 & 05)"
     • "Remove the text below. just keep the cards titles"
   ========================================================= */

/* "Sectors covered" now sits under the section label in the left
   column, so it needs its own breathing room rather than the
   margin it had while it was nested in the right column. */
.tl-sectors-covered {
  margin-top: clamp(28px, 3vw, 44px);
}

.tl-sectors-covered p:not(.sub-heading) {
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.7;
  color: var(--tl-ink-body, #55524c);
  max-width: 42ch;
}

/* Stacked on mobile the two columns would read
   label -> Sectors covered -> heading, which puts the sub-block
   before the heading it belongs under. `display: contents` lifts the
   left column's children into the row so they can be ordered:
   label -> heading + copy -> Sectors covered. */
@media (max-width: 991.98px) {
  .feature-section .section-heading-wrap > .col-lg-4 {
    display: contents;
  }

  .feature-section .section-heading-wrap > .col-lg-4 > .section-heading {
    width: 100%;
  }

  .feature-section .section-heading-wrap > .col-lg-4 > .section-heading:first-child {
    order: 1;
  }

  .feature-section .section-heading-wrap > .col-lg-8 {
    order: 2;
  }

  .feature-section .tl-sectors-covered {
    order: 3;
    margin-top: 34px;
    margin-bottom: 0;
  }

  .tl-sectors-covered p:not(.sub-heading) {
    max-width: none;
  }
}

/* ---- Four value cards: titles only ---- */
.tl-value-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 991.98px) {
  .tl-value-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .tl-value-row {
    grid-template-columns: 1fr;
  }
}

.tl-value-card {
  display: flex;
  align-items: flex-end;
  min-height: 116px;
  /* No horizontal padding so the title sits flush with the rule above it. */
  padding: 20px 0 0;
  border-top: 2px solid var(--tl-ink, #1b1a18);
  background-color: transparent;
}

.tl-value-card__title {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tl-ink, #1b1a18);
}

@media (max-width: 479px) {
  .tl-value-card {
    min-height: 0;
    padding: 16px 0 0;
    align-items: center;
  }
}

/* =========================================================
   Home — the "TOPLINES" background wordmark
   Addresses client comment 6 (22 Jul 2026):
     "The 'top lines' words at the background: should be
      centered, and full word is visible. Shape should be
      same as the logo."

   main.css pins it at `left: 77px` with a fixed 420px type
   size, so on anything under ~2100px the tail of the word ran
   off the right edge — the site showed "TOPLINE".
   ========================================================= */

/* main.css reserves 425px of bottom padding here — that space existed to
   hold the floating photo, which client comment 6 removed. Only the wordmark
   is left, so the section now reserves just enough room for it. */
.counter-1 {
  padding-bottom: clamp(150px, 15vw, 230px);
}

.counter-1 .counter-text {
  left: 0;
  right: 0;
  width: 100%;
  padding: 0 16px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.counter-1 .counter-text span {
  display: inline-block;
  /* Sized in vw so the whole word always fits, whatever the viewport. */
  font-size: 16.8vw;
  /* The logo wordmark is a light geometric sans with open tracking —
     matching it here rather than the theme's default weight. */
  font-weight: 200;
  letter-spacing: 0.055em;
  line-height: 1;
}

/* styles.css caps these background words at 14vw below 1200px with
   `!important`; match that weight so the sizing stays consistent. */
@media (max-width: 1199.98px) {
  .counter-1 .counter-text span {
    font-size: 16.8vw !important;
  }
}

@media (min-width: 1921px) {
  .counter-1 .counter-text span {
    font-size: 322px;
  }
}

/* =========================================================
   Home — Selected projects
   Addresses client comment 7 (22 Jul 2026):
     • "remove the labels (white text) inside each photo.
        Only photo and description below"
     • "Description below each photo to be Title & Location"
   (order, photos and the pause-on-hover behaviour are handled
    in Home.tsx and useSiteEffects.ts)
   ========================================================= */

.project-item {
  margin: 0;
}

.project-item .project-img img {
  width: 100%;
  /* Source photos have different native ratios; the theme fixes the box
     height, so `cover` is what keeps every card visually uniform. */
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  display: block;
}

.tl-project-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 2px 0;
}

.tl-project-caption__title {
  font-size: clamp(16px, 1.15vw, 19px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--tl-ink, #191919);
}

.tl-project-caption__loc {
  font-size: clamp(14px, 0.95vw, 15px);
  letter-spacing: 0.02em;
  color: var(--tl-ink-muted, #63636a);
}

/* Dragging is disabled (client comment 7), so don't advertise a grab cursor. */
.project-carousel,
.project-carousel .swiper-slide {
  cursor: default;
}