/* Final shared layer, loaded last on every page (corporate and catalog).
   One type scale, one section-heading style, and the shared footer, contact
   band and partner strip. Palette: navy, grey, white only (Brand Guideline p4). */
:root {
  --fs-hero:clamp(34px,4.2vw,58px);
  --fs-page:clamp(30px,3.2vw,44px);
  --fs-section:clamp(26px,2.5vw,36px);
  --fs-card:20px;
  --fs-body:16px;
  --fs-card-body:15px;
  --fs-small:14px;
  --fs-eyebrow:13px;
}

/* ---------- Type scale ---------- */
.carousel .carousel-caption h1,.carousel .carousel-caption h2 {
  font-size:var(--fs-hero)
}

h1,.water-systems-page-header h1,.tm-container-content>.row:first-child h1,.appoinment h1 {
  font-size:var(--fs-page)
}

.section-title,.certificates-heading h2,.partners h2,.water-systems-cta h2,
.container-fluid.pt-6 h2.display-6,.about-img+div h2 {
  font-size:var(--fs-section)
}

.service-text h5,.team-text h4,.team-text h5,.tm-video-item h2,.certificate-content h4,
.photo-gallery span,.tm-video-details h3,.contact-info h3 {
  font-size:var(--fs-card);
  line-height:1.35
}

.service-text p,.tm-video-item p,.certificate-content>p:not(.certificate-code) {
  font-size:var(--fs-card-body)
}

/* ---------- Section headings: one accent motif everywhere ---------- */
.section-title,.certificates-heading h2,.water-systems-page-header h1,
.tm-container-content>.row:first-child h1 {
  position:relative
}

.section-title::after,.certificates-heading h2::after {
  content:'';
  display:block;
  width:56px;
  height:3px;
  margin-top:16px;
  background:var(--brand-navy)
}

.certificates-heading h2::after {
  margin-inline:auto
}

.water-systems-page-header h1::after {
  content:'';
  display:block;
  width:56px;
  height:3px;
  margin-top:16px;
  background:var(--brand-white)
}

.tm-container-content>.row:first-child h1 {
  border-bottom:0!important;
  padding-bottom:0!important
}

.tm-container-content>.row:first-child h1::after {
  content:'';
  display:block;
  width:56px;
  height:3px;
  margin-top:16px;
  background:var(--brand-navy)
}

.water-systems-section-head {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px 24px;
  margin-bottom:36px
}

.water-systems-section-head .section-title {
  margin:0
}

/* ---------- Certificates & Credentials: certificates + company profile ---------- */
.credentials-part {
  max-width:950px;
  margin:0 auto
}

.credentials-part+.credentials-part {
  margin-top:56px
}

.credentials-part-head {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 16px;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border-color)
}

.credentials-part-head h3 {
  margin:0;
  font-size:22px
}

.credentials-part-head p {
  margin:0;
  font-size:var(--fs-small)
}

.certificate-content h4 {
  margin:0 0 14px
}

.profile-card {
  display:grid;
  grid-template-columns:minmax(220px,36%) 1fr;
  overflow:hidden;
  background:var(--brand-white);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  transition:border-color .2s,box-shadow .2s
}

.profile-card:hover {
  border-color:var(--brand-navy);
  box-shadow:var(--shadow)
}

.profile-cover {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  min-height:290px;
  padding:28px;
  overflow:hidden;
  background:var(--brand-navy);
  color:var(--brand-white);
  text-decoration:none
}

.profile-cover:hover {
  text-decoration:none
}

.profile-cover-logo {
  position:relative;
  z-index:1;
  align-self:flex-start;
  padding:10px 12px;
  background:var(--brand-white);
  border-radius:2px
}

.profile-cover-logo img {
  display:block;
  width:150px;
  height:auto
}

.profile-cover-title {
  position:relative;
  z-index:1;
  font-family:var(--font-heading);
  font-size:28px;
  line-height:1.3;
  color:var(--brand-white)
}

/* Water-line motif along the bottom of the cover. */
.profile-cover-lines {
  position:absolute;
  inset:auto 0 0;
  height:110px;
  background:repeating-linear-gradient(172deg,rgba(255,255,255,.14) 0 2px,transparent 2px 16px)
}

.profile-content {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:32px 28px
}

.profile-content h4 {
  margin:0 0 12px;
  font-size:22px
}

.profile-content>p:not(.certificate-code) {
  margin:0 0 24px;
  font-size:var(--fs-card-body);
  line-height:1.8
}

.profile-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 24px;
  margin-top:auto
}

.profile-actions .btn {
  display:inline-flex;
  align-items:center
}

.profile-actions .certificate-link {
  margin-top:0;
  padding-top:0
}

/* ---------- Hero slider: crossfade ----------
   The sliding transition from the LTR Bootstrap build leaves a blank navy
   frame between slides on RTL pages; a crossfade is cleaner in both directions.
   (Same rules as Bootstrap's .carousel-fade.) */
#header-carousel .carousel-item {
  transition-property:opacity;
  transform:none!important;
  opacity:0
}

#header-carousel .carousel-item.active,
#header-carousel .carousel-item-next.carousel-item-start,
#header-carousel .carousel-item-prev.carousel-item-end {
  z-index:1;
  opacity:1
}

#header-carousel .active.carousel-item-start,
#header-carousel .active.carousel-item-end {
  z-index:0;
  opacity:0;
  transition:opacity 0s .6s
}

/* ---------- Homepage partner strip ---------- */
.water-systems-home-partners {
  padding-block:var(--section-space)
}

.water-systems-logo-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}

.water-systems-logo-strip>div {
  display:flex;
  align-items:center;
  justify-content:center;
  height:116px;
  padding:20px 24px;
  background:var(--brand-white);
  border:1px solid var(--border-color);
  border-radius:var(--radius)
}

.water-systems-logo-strip img {
  max-width:100%;
  max-height:64px;
  object-fit:contain
}

/* ---------- Contact band ---------- */
.water-systems-cta {
  margin-top:var(--section-space);
  padding-block:clamp(40px,5vw,64px);
  background:var(--surface-tint);
  border-top:1px solid var(--border-color)
}

.water-systems-home-partners+.water-systems-cta {
  margin-top:0
}

.water-systems-cta .container {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 32px
}

.water-systems-cta h2 {
  margin:0;
  max-width:640px
}

.water-systems-cta-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.water-systems-cta .btn-light {
  background:var(--brand-navy);
  border-color:var(--brand-navy);
  color:var(--brand-white)
}

.water-systems-cta .btn-light:hover,.water-systems-cta .btn-light:focus {
  background:var(--brand-white);
  color:var(--brand-navy)
}

.water-systems-cta .btn-outline-light {
  background:var(--brand-white);
  border:1px solid var(--brand-navy);
  color:var(--brand-navy)
}

.water-systems-cta .btn-outline-light:hover,.water-systems-cta .btn-outline-light:focus {
  background:var(--brand-navy);
  color:var(--brand-white)
}

/* ---------- Shared footer ---------- */
.water-systems-footer {
  margin-top:0;
  padding-block:clamp(48px,5vw,72px)!important
}

main+.water-systems-footer,.water-systems-footer:first-child {
  margin-top:var(--section-space)
}

.water-systems-footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1.3fr 1fr;
  gap:40px 48px
}

.water-systems-footer .water-systems-footer-logo {
  width:220px;
  margin-bottom:24px
}

.water-systems-footer p {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 10px;
  font-size:var(--fs-small);
  line-height:1.7
}

.water-systems-footer p i {
  width:16px;
  margin-top:5px;
  color:var(--brand-white);
  opacity:.75
}

.water-systems-footer-title {
  margin:0 0 20px;
  font-family:var(--font-heading);
  font-size:17px;
  line-height:1.4;
  color:var(--brand-white)!important;
  text-align:start
}

.water-systems-footer-links {
  list-style:none;
  margin:0;
  padding:0!important
}

.water-systems-footer-links li {
  margin-bottom:10px
}

.water-systems-footer-links a {
  color:rgba(255,255,255,.85);
  font-size:var(--fs-small);
  text-decoration:none
}

.water-systems-footer-links a:hover,.water-systems-footer-links a:focus-visible {
  color:var(--brand-white);
  text-decoration:underline;
  text-underline-offset:4px
}

.water-systems-footer-social {
  display:flex;
  gap:10px;
  margin-top:20px
}

.water-systems-footer-social a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radius);
  color:var(--brand-white);
  text-decoration:none
}

.water-systems-footer-social a:hover,.water-systems-footer-social a:focus-visible {
  background:var(--brand-white);
  color:var(--brand-navy)
}

.water-systems-copyright {
  padding-block:18px;
  text-align:center
}

/* Bootstrap's screen-reader-only text has no inset; in RTL it lands past the
   right edge and causes sideways scroll on phones. It stays clipped either way. */
.visually-hidden {
  left:0;
  top:0
}

/* ---------- Responsive ---------- */
@media(max-width:767.98px) {
  .profile-card {
    grid-template-columns:1fr
  }

  .profile-cover {
    min-height:190px
  }

  .profile-content {
    padding:24px 20px
  }
}

@media(max-width:991.98px) {
  .water-systems-footer-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  /* 8 logos: keep two full rows of four on tablets. */
  .water-systems-logo-strip {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px
  }

  .water-systems-logo-strip>div {
    height:100px;
    padding:16px
  }
}

@media(max-width:575.98px) {
  /* Slide thumbnails don't fit five across on phones; use slim bars instead. */
  .carousel .carousel-indicators {
    gap:8px
  }

  .carousel .carousel-indicators [data-bs-target] {
    width:28px;
    height:4px;
    border:0;
    opacity:.5
  }

  .carousel .carousel-indicators .active {
    opacity:1;
    outline:0
  }

  .carousel .carousel-indicators img {
    display:none
  }

  .water-systems-footer-grid {
    grid-template-columns:1fr;
    gap:32px
  }

  .water-systems-logo-strip {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .water-systems-logo-strip>div {
    height:96px;
    padding:16px
  }

  .water-systems-cta-actions,.water-systems-cta-actions .btn {
    width:100%
  }

  .water-systems-cta-actions .btn {
    justify-content:center;
    display:inline-flex;
    align-items:center
  }
}