/* =========================================================
   TOP LINES — Client comments round 3 (8 Sep 2026)
   "Website Comments_3_Sep08, 2026.pdf" — the green items.
   Loaded LAST in index.html so it wins over the theme layers.
   ========================================================= */

/* ---------------------------------------------------------
   1. "Please ensure that all words are shown as one word in
      one line. Please do not split any word in 2 lines."
      (Home hero, Home services, About mission/vision + process,
       Services page.)
   polish.css set `hyphens: auto` on every p and heading, which is
   what produced "reno-vation", "coordi-nation", "execu-tion".
   --------------------------------------------------------- */
p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.section-title.title-2 {
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
  word-break: normal !important;
  overflow-wrap: normal;
}

/* Hyphenated words ("fit-out") kept whole — see src/lib/nowrap.tsx. */
.tl-nowrap {
  white-space: nowrap;
}

/* Very narrow phones only: allow an emergency break rather than
   letting a long word push the page sideways. */
@media (max-width: 359.98px) {
  p,
  li {
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------
   2. Header — smooth shrink on scroll DOWN.
   The keyframe that caused the jump is removed in styles.css;
   here the size change itself gets a softer, slightly longer
   ease so down and up feel identical.
   --------------------------------------------------------- */
.header {
  transition:
    background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.header.sticky,
.header.header-scrolled {
  background-color: #ffffff;
  box-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.45);
}

@media (min-width: 1024px) {
  .header .primary-header-inner .header-logo .tl-logo {
    transition:
      max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.35s ease;
  }

  .header .primary-header-inner .header-menu-wrap ul li a {
    transition:
      padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      font-size 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.3s ease;
  }
}

/* ---------------------------------------------------------
   3. Home hero — Riyadh Gallery photo (landscape). Keep the
   mall name and entrance in frame when the panel crops it.
   --------------------------------------------------------- */
.tl-hero-media img {
  object-position: 50% 40%;
}

/* ---------------------------------------------------------
   4. Service cards — no numbering, text in the centre of the
   card (Home carousel + Services page grid).
   --------------------------------------------------------- */
.tl-service-card {
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 200px;
  padding: 24px 28px;
}

.tl-service-card__label {
  max-width: 16ch;
}

@media (max-width: 767px) {
  .tl-service-card {
    height: 170px;
  }
}

/* Services page: the same cards in a grid (no photos, no numbers). */
.tl-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

/* ---------------------------------------------------------
   5. Home "Sectors we serve" — "Sectors covered" moved DOWN
   into its own row, below the previous paragraph: label in the
   left column, copy lined up with the paragraphs above it.
   --------------------------------------------------------- */
.tl-sectors-covered {
  margin-top: clamp(40px, 4vw, 64px);
}

.tl-sectors-covered .section-heading-2 p {
  max-width: 70ch;
}

@media (max-width: 991.98px) {
  .col-lg-8.tl-sectors-covered {
    margin-top: 14px;
  }
}

/* ---------------------------------------------------------
   6. Home — four value cards: titles only, as real cards.
   ("Remove the text below. just keep the cards titles —
     This is not completed as we requested!")
   --------------------------------------------------------- */
.tl-value-card {
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 24px 22px;
  text-align: center;
  border: 1px solid var(--tl-surface-rule, rgba(25, 25, 25, 0.13));
  border-radius: 22px;
  background-color: var(--tl-surface-card, #ffffff);
}

.tl-value-card__title {
  font-size: clamp(18px, 1.4vw, 22px);
}

@media (max-width: 479px) {
  .tl-value-card {
    min-height: 110px;
    padding: 20px;
  }
}

/* ---------------------------------------------------------
   7. The "TOPLINES" background word — Home + footer.
   "exactly same as how it is shown in the logo. The letters
   should be thicker. Please make sure all parts of the letters
   are visible (currently the bottom of the letters are cropped)."

   Drawn with the logo artwork itself (/img/logo/toplines-wordmark.svg,
   traced from logo.png) used as a mask, so the letter shapes and
   stroke weight are the logo's — not a thin font — and the element
   has its own box, so nothing hangs off the section edge.
   --------------------------------------------------------- */
.tl-bg-wordmark {
  --tl-wm-ratio: 6.847; /* SVG viewBox 6464 x 944 */
  display: block !important;
  -webkit-mask: url("/img/logo/toplines-wordmark.svg") center / contain no-repeat;
  mask: url("/img/logo/toplines-wordmark.svg") center / contain no-repeat;
  pointer-events: none;
  user-select: none;
}

/* Home: counter section */
.counter-1 {
  --tl-wm-w: min(88vw, 1500px);
  padding-bottom: calc(var(--tl-wm-w) / 6.847 + clamp(60px, 7vw, 110px)) !important;
}

.counter-1 .counter-text.tl-bg-wordmark {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: clamp(24px, 3vw, 48px);
  transform: translateX(-50%);
  width: var(--tl-wm-w);
  height: calc(var(--tl-wm-w) / 6.847);
  padding: 0;
  z-index: 0;
  opacity: 0.14;
  background-color: #6f6f75;
}

.counter-1 .container {
  position: relative;
  z-index: 1;
}

/* Footer: a little smaller than before and moved up off the edge. */
.footer-section {
  --tl-wm-w: min(66vw, 1080px);
  padding-bottom: calc(var(--tl-wm-w) / 6.847 + clamp(56px, 6vw, 96px)) !important;
}

.footer-section .footer-text.tl-bg-wordmark {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: clamp(28px, 3.4vw, 56px);
  transform: translateX(-50%);
  width: var(--tl-wm-w);
  height: calc(var(--tl-wm-w) / 6.847);
  padding: 0;
  z-index: -1;
  opacity: 0.5;
  background: linear-gradient(180deg, #fffaf2 0%, rgba(255, 251, 244, 0.25) 100%);
}

@media (max-width: 767px) {
  .counter-1 {
    --tl-wm-w: 90vw;
  }

  .footer-section {
    --tl-wm-w: 80vw;
  }
}

/* ---------------------------------------------------------
   8. Home projects — the office photo and the word "Interior"
   behind the section were removed (item 10), so the 430px of
   space the theme reserved for them goes too.
   --------------------------------------------------------- */
.home-page .project-section {
  padding-bottom: clamp(90px, 9vw, 140px) !important;
}

/* ---------------------------------------------------------
   9. About — introduction reads as the section's lead, and the
   paragraph text is larger ("The paragraph text is too small.
   It's not readable.").
   --------------------------------------------------------- */
.section-heading p.tl-mv-intro {
  font-size: clamp(19px, 1.45vw, 23px);
  line-height: 1.6;
  color: var(--tl-ink, #191919);
  max-width: 44ch;
}

.tl-mv-card p {
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.75;
}

.about-desc p,
.process-desc p,
.process-section .process-item .process-content p {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
}

/* ---------------------------------------------------------
   10. Footer copyright — "Top Lines" exactly as written.
   --------------------------------------------------------- */
.copyright-content p .tl-wordmark-inline {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
}

/* Archivo's word space is tight once letter-spacing is pulled in, so
   short centred labels ("MEP Coordination") read as one word. */
.tl-service-card__label,
.tl-value-card__title {
  word-spacing: 0.1em;
}