/* ==========================================================================
   WIFT — Winntus Institute of Formwork Technology
   Brand layer on top of the DaWork theme.
   Palette: deep navy + construction amber, carried over from the WIFT source.
   ========================================================================== */

:root {
  --wift-navy: #0B1F4D;
  --wift-navy-deep: #071534;
  --wift-navy-soft: #12295C;
  --wift-amber: #FFC72C;
  --wift-steel: #C5CEE6;
  --wift-paper: #F3F6FC;

  /* consumed by css/style.css and css/default.css */
  --wift-accent: #FFC72C;
  --wift-accent-text: #B47A00;
}

/* --- dark section surfaces: DaWork charcoal -> WIFT navy ---------------- */
.skill-area,
.contact-area,
footer.footer-bg,
.testimonial-area {
  background-color: var(--wift-navy-deep) !important;
}

/* --- amber fills need navy ink, not white ------------------------------- */
.btn.ss-btn,
.btn2,
.header-btn,
.header-btn a,
#scrollUp,
.about-area .nav.nav-tabs li span:hover,
.about-area .nav.nav-tabs li span.active,
.locations-box li .button a,
.locations-box li .button a i,
.pricing-box.active h3,
.pricing-box.active .pricing-head h3,
.blog-content2 .category,
.counter-tittle,
.action-btn:hover,
.comment-form .submit,
.newslater-area,
.newslater-area .section-title h2,
.newslater-area p,
.newslater-area a:not(.btn2),
.contact-bg02 .btn.ss-btn.active {
  color: var(--wift-navy) !important;
}

.btn:hover,
.btn2:hover,
.btn.ss-btn:hover,
.btn:hover::before ~ *,
.locations-box li .button a:hover {
  color: var(--wift-amber) !important;
}

/* button arrow chips: amber chip with navy arrow, inverted on hover */
.btn i,
.btn2 i {
  background: var(--wift-amber) !important;
  color: var(--wift-navy) !important;
}
.btn:hover i,
.btn2:hover i {
  background: var(--wift-navy) !important;
  color: var(--wift-amber) !important;
}

.btn:hover,
.btn2:hover,
.btn.ss-btn:hover {
  background: var(--wift-navy) !important;
  border-color: var(--wift-navy) !important;
}

/* keep white ink where the fill stays navy */
.about-area .nav.nav-tabs li span,
.contact-box,
.single-team .team-info h4 a {
  color: inherit;
}

/* --- header: logo lockup (gap G1 — WIFT has a seal, not a wordmark) ------ */
.wift-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  line-height: 1.1;
}
.wift-logo img {
  height: 46px;
  width: 46px;
  object-fit: contain;
  flex: 0 0 auto;
}
.wift-logo .wift-logo-text {
  display: flex;
  flex-direction: column;
}
.wift-logo .wift-logo-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--wift-navy);
  text-transform: uppercase;
}
.wift-logo .wift-logo-sub {
  font-size: 10px;
  letter-spacing: .06em;
  color: #6f7172;
  max-width: 190px;
  text-transform: uppercase;
}
.header-three .header-mid .wift-logo .wift-logo-name { color: #fff; }
.footer-bg .wift-logo .wift-logo-name { color: #fff; }
.footer-bg .wift-logo .wift-logo-sub { color: var(--wift-steel); }
.footer-bg .wift-logo img { height: 56px; width: 56px; }

/* --- 4.1 hero: the WIFT seal replaces DaWork's badge and keeps its spin -- */
.slider-area .badge { width: 142px; height: 142px; }
.slider-area .badge img { width: 142px; height: 142px; object-fit: contain; }
.slider-area .badge .badge-legend {
  position: absolute;
  inset: auto 0 -30px 0;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  animation: none;
}
.wift-motto-hero {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  letter-spacing: .18em;
  color: var(--wift-amber);
}
.s-slider-content h1 {
  font-size: 58px;
  line-height: 1.15;
  margin-bottom: 20px;
  color: #fff;
}
@media (max-width: 767px) {
  .s-slider-content h1 { font-size: 34px; }
  .slider-area .badge { display: none; }
}

/* --- top bar: WIFT publishes no phone/address (gap G8) ------------------- */
.header-cta .call-box .text strong { font-size: 14px; }

/* --- 4.5 partner segments: text pills, not client logos (gap G2) --------- */
.wift-partner-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 0 50px;
  padding: 0;
  list-style: none;
}
.wift-partner-pills li {
  border: 1px solid #d7d7d7;
  border-radius: 999px;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 600;
  color: var(--wift-navy);
  background: #fff;
  transition: .3s;
}
.wift-partner-pills li:hover {
  border-color: var(--wift-amber);
  background: var(--wift-amber);
}

/* --- 4.6 / 5.9 roadmap: numbered stages, never percentage bars ----------- */
.wift-roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wift-roadmap li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.wift-roadmap li:last-child { border-bottom: 0; }
.wift-roadmap .stage-no {
  flex: 0 0 46px;
  height: 46px;
  width: 46px;
  border-radius: 50%;
  background: var(--wift-amber);
  color: var(--wift-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}
.wift-roadmap .stage-no img { width: 26px; height: 26px; object-fit: contain; }
.wift-roadmap h6 {
  color: #fff;
  font-size: 19px;
  margin-bottom: 4px;
}
.wift-roadmap p { color: var(--wift-steel); margin: 0; font-size: 15px; }
.skill-area .wift-roadmap p { color: var(--wift-steel); }

/* --- 4.7 promoter monograms (gap G4 — no headshots exist) --------------- */
.wift-monogram {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--wift-amber);
  color: var(--wift-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .06em;
  margin: 0 auto;
}

/* --- 4.8 / 5.5 council seats: icon disc instead of a portrait (gap G5) --- */
.wift-seat {
  width: 100%;
  aspect-ratio: 600 / 760;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(11, 31, 77, .55), rgba(7, 21, 52, .92)),
    url(../img/team/wift-team-bg.jpg) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wift-seat i {
  font-size: 72px;
  color: var(--wift-amber);
}
.single-team .wift-seat + .team-info { padding-top: 20px; }
.team-area .section-title h2 span { color: var(--wift-accent-text); }

/* --- 4.3 four pillars --------------------------------------------------- */
.wift-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}
.wift-pillars li {
  border-left: 3px solid var(--wift-amber);
  padding-left: 16px;
}
.wift-pillars .pillar-no {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--wift-accent-text);
}
.wift-pillars h6 { font-size: 18px; margin: 4px 0 6px; color: var(--wift-navy); }
.wift-pillars p { font-size: 14px; margin: 0; color: #6f7172; }
@media (max-width: 575px) {
  .wift-pillars { grid-template-columns: 1fr; }
}

/* --- 4.13 / 5.6 CTA band (ported from the WIFT source) ------------------ */
.wift-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--wift-navy);
  padding: 90px 0;
}
.wift-cta .wift-cta-bg {
  position: absolute;
  inset: 0;
  background: url(../img/bg/wift-cta.jpg) center/cover no-repeat;
  opacity: .22;
}
.wift-cta .wift-cta-overlay {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 420px;
  opacity: .16;
  pointer-events: none;
}
.wift-cta .container { position: relative; z-index: 2; }
.wift-cta h3 {
  color: #fff;
  font-size: 38px;
  line-height: 1.25;
  margin-bottom: 18px;
}
.wift-cta p { color: var(--wift-steel); font-size: 17px; max-width: 640px; }
.wift-cta .btn2 {
  background: var(--wift-amber);
  color: var(--wift-navy) !important;
  border: 0;
}
.wift-cta .btn2:hover { background: #fff; }
@media (max-width: 767px) {
  .wift-cta h3 { font-size: 26px; }
}

/* --- 4.9 / 5.8 enquiry form --------------------------------------------- */
.contact-field select {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid #e4e4e4;
  background: #fff;
  color: #6f7172;
  font-size: 15px;
  border-radius: 0;
}
.contact-field select:focus { outline: 2px solid var(--wift-navy); outline-offset: 1px; }
.wift-form-ok {
  display: none;
  margin-top: 20px;
  padding: 16px 20px;
  border-left: 4px solid #2e7d32;
  background: #eaf5eb;
  color: #1b4d1f;
  font-size: 15px;
}
.wift-form-ok.is-visible { display: block; }
.wift-form-err {
  display: none;
  margin-top: 20px;
  padding: 16px 20px;
  border-left: 4px solid #b3261e;
  background: #fdecea;
  color: #7a1c17;
  font-size: 15px;
}
.wift-form-err.is-visible { display: block; }

/* counter component carries structural facts, not achievements — no "+" */
.ab-coutner ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-coutner .count { font-size: 46px; }

/* --- 4.10 contact boxes ------------------------------------------------- */
.contact-box .content p { font-size: 15px; }
.contact-box .content p .wift-tbc {
  display: inline-block;
  font-size: 13px;
  color: #6f7172;
  font-style: italic;
}

/* --- 4.12 vision panel replacing the newsletter form -------------------- */
.newslater-area .wift-vision-note {
  font-size: 15px;
  color: var(--wift-navy);
  margin-bottom: 26px;
}
.newslater-area .btn2 { background: var(--wift-navy); color: #fff !important; }
.newslater-area .btn2:hover { background: #fff; color: var(--wift-navy) !important; }

/* --- 5.3 module detail sidebar ------------------------------------------ */
.services-sidebar .services-categories li a { font-size: 15px; }
.brochures-box .wift-partner-note { font-size: 14px; color: #6f7172; }

/* --- 5.4 partnership boxes: role subtitle sits in the price slot -------- */
.price-count h2.wift-role {
  font-size: 24px;
  line-height: 1.3;
  color: var(--wift-navy);
}
.pricing-box.active .price-count h2.wift-role { color: var(--wift-navy); }
.wift-price-note {
  margin-top: 14px;
  font-size: 14px;
  color: #6f7172;
  font-style: italic;
}

/* --- 5.5 council grid (7 seats, no orphan) ------------------------------ */
.wift-council-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.wift-council-grid .wc-item {
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 28px 22px;
  background: #fff;
  transition: .3s;
}
.wift-council-grid .wc-item:hover {
  border-color: var(--wift-amber);
  transform: translateY(-4px);
}
.wift-council-grid .wc-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--wift-paper);
  color: var(--wift-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}
.wift-council-grid h6 { font-size: 18px; color: var(--wift-navy); margin-bottom: 6px; }
.wift-council-grid p { font-size: 14px; color: #6f7172; margin: 0; }
.wift-council-grid .wc-item.wc-photo { padding: 0; overflow: hidden; }
.wift-council-grid .wc-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.wift-council-grid .wc-photo .wc-body { padding: 24px 22px 28px; }
.wift-council-grid .wc-photo .wc-no {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wift-accent-text);
  margin-bottom: 8px;
}
.wift-council-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) {
  .wift-council-grid,
  .wift-council-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .wift-council-grid,
  .wift-council-grid.cols-3 { grid-template-columns: 1fr; }
}

/* --- 5.9 closing statement ---------------------------------------------- */
.wift-closing {
  border-left: 4px solid var(--wift-amber);
  padding: 8px 0 8px 28px;
  max-width: 820px;
}
.wift-closing .stage-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wift-amber);
  margin-bottom: 12px;
}
.wift-closing blockquote {
  font-size: 28px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 14px;
  font-weight: 600;
}
.wift-closing p { color: var(--wift-steel); margin: 0; font-size: 16px; }
@media (max-width: 767px) { .wift-closing blockquote { font-size: 21px; } }

/* --- breadcrumb --------------------------------------------------------- */
.breadcrumb-area { background-color: var(--wift-navy-deep); }
.breadcrumb-title h1 {
  font-size: 70px;
  margin-bottom: 12px;
  line-height: 1;
  letter-spacing: 1px;
  color: #fff;
}
.breadcrumb-title .wift-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wift-amber);
  margin-bottom: 14px;
}
@media (max-width: 767px) {
  .breadcrumb-area { min-height: 380px; padding-top: 110px; }
  .breadcrumb-title h1 { font-size: 38px; }
}

/* --- misc --------------------------------------------------------------- */
.scrollbox .section-t h2 { -webkit-text-stroke: 1px rgba(11, 31, 77, .35); }
.section-title h5 { letter-spacing: .12em; text-transform: uppercase; font-size: 14px; }
.wift-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- 5.3 module prev/next nav ------------------------------------------- */
.wift-modnav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  margin-top: 45px;
  padding-top: 32px;
  border-top: 1px solid #e4e4e4;
}
.wift-modnav a {
  flex: 1 1 220px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 18px 22px;
  transition: .3s;
}
.wift-modnav a:hover { border-color: var(--wift-amber); background: var(--wift-paper); }
.wift-modnav span {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wift-accent-text);
  margin-bottom: 4px;
}
.wift-modnav strong { font-size: 17px; color: var(--wift-navy); }
.wift-modnav-next { text-align: right; }

/* --- 5.7 faq aside ------------------------------------------------------ */
.wift-faq-aside {
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 24px;
  background: #fff;
}
.wift-faq-aside img { border-radius: 6px; width: 100%; }
.wift-faq-aside h4 { font-size: 22px; color: var(--wift-navy); margin-bottom: 8px; }
.wift-faq-aside p { font-size: 15px; color: #6f7172; margin-bottom: 0; }

/* --- 5.8 thank-you ------------------------------------------------------ */
.wift-thanks { padding: 20px 0 10px; }
.wift-thanks .wc-icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--wift-paper); color: var(--wift-navy);
  display: flex; align-items: center; justify-content: center; font-size: 36px;
}
.wift-thanks h2 { font-size: 34px; color: var(--wift-navy); margin-bottom: 10px; }
.wift-thanks p { font-size: 17px; color: #6f7172; margin-bottom: 0; }
.wift-thanks .btn2.mr-15 { margin-right: 15px; }
@media (max-width: 575px) {
  .wift-thanks h2 { font-size: 26px; }
  .wift-thanks .btn2, .wift-thanks .btn.ss-btn { display: block; width: 100%; margin: 10px 0 !important; }
}

/* --- section-title lead paragraph --------------------------------------- */
.section-title p { max-width: 820px; margin: 18px auto 0; font-size: 16px; color: #6f7172; }
.section-title.center-align p { margin-left: 0; margin-right: 0; }
.pricing-area .wift-price-note, .contact-area .wift-price-note { max-width: 760px; margin-left: auto; margin-right: auto; }

/* --- homepage locations panel ------------------------------------------- */
.wift-locations-panel p { font-size: 16px; color: #6f7172; }
.wift-locations-panel img { border-radius: 8px; width: 100%; }

/* --- header top bar: needs a solid ground on light inner-page photos ---- */
.header-area .header-mid {
  background: var(--wift-navy-deep);
}
.header-mid .wift-logo-name { color: #fff; }
.header-mid .wift-logo-sub { color: var(--wift-steel); }

/* --- breadcrumb: darken the photo so white type always clears contrast -- */
.breadcrumb-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(7, 21, 52, .9) 0%, rgba(7, 21, 52, .62) 55%, rgba(7, 21, 52, .4) 100%);
}
.breadcrumb-area .container { position: relative; z-index: 2; }

/* --- about tabs: keep the rotated rail clear of the copy ---------------- */
@media (min-width: 992px) {
  .about-area .tab-content .col-lg-6:last-child { padding-right: 190px; }
}

/* --- brand the stock goal icon from DaWork orange to WIFT amber --------- */
.about-title .mb-50 img { filter: hue-rotate(28deg) saturate(1.15) brightness(1.05); }

/* ==========================================================================
   MOBILE / TABLET FIXES (<= 991px, where MeanMenu takes over)
   ========================================================================== */

/* never let a stray element create sideways scroll */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, li, a, span { overflow-wrap: break-word; word-wrap: break-word; }

@media (max-width: 991px) {

  /* --- header bar: orange -> WIFT navy, in every state ------------------ */
  .header-area .menu-area,
  .header-three .menu-area,
  .menu-area.sticky-menu,
  .header-three .sticky-menu,
  .header-area.header .menu-area.sticky-menu {
    background: var(--wift-navy-deep) !important;
  }
  /* header is only the 66px bar on mobile; the desktop -180px pull-up hid the page heading under it */
  .header-three { margin-bottom: -66px; }
  .header-area .menu-area { padding: 0; }
  .header-three .menu-area .container { border-top: 0; }

  /* --- logo + hamburger: one row, both centred on the same line --------- */
  .header-area .second-menu > .row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }
  .header-area .second-menu .col-lg-3.col-md-12 {
    flex: 1 1 auto;
    max-width: calc(100% - 64px);
    width: auto;
    padding: 12px 0;
  }
  .header-area .second-menu .col-xl-9.col-lg-9,
  .header-area .second-menu .col-12 {
    padding-left: 0;
    padding-right: 0;
  }
  .header-area .second-menu .col-xl-9.col-lg-9 { flex: 0 0 0; width: 0; max-width: 0; padding: 0; }
  .header-area .second-menu .col-12 { flex: 0 0 100%; max-width: 100%; }
  .header-area .second-menu .logo,
  .sticky-menu .logo { padding: 0; margin: 0; line-height: 1; height: auto; }
  .header-area .second-menu .logo a { display: inline-flex; }
  .second-menu, .sticky-menu .second-menu { padding: 0; margin: 0; }
  .header-area .second-menu .wift-logo { gap: 10px; }
  .header-area .second-menu .wift-logo img { width: 42px; height: 42px; background: #fff; border-radius: 50%; padding: 2px; }
  .header-area .second-menu .wift-logo-name { color: #fff !important; font-size: 22px; }

  /* toggle + dropdown anchor to the bar itself (works sticky or not) */
  .header-three .menu-area .container,
  .header-area .second-menu,
  .header-area .second-menu > .row,
  .header-area .mean-container .mean-bar { position: static; }
  .menu-area.sticky-menu,
  .header-three .sticky-menu { padding: 0 !important; }
  .header-area .mean-container .mean-bar { min-height: 0; }
  .header-area .mean-container a.meanmenu-reveal,
  .header-three .mean-container a.meanmenu-reveal,
  .sticky-menu .mean-container a.meanmenu-reveal {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -20px !important;
    transform: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 3px;
  }

  /* --- dropdown panel: full width, flush under the bar ------------------ */
  .mean-container .mean-nav {
    margin-top: 0;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--wift-navy) !important;
  }
  .mean-container .mean-nav ul li a {
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .mean-container .mean-nav ul li a:hover,
  .mean-container .mean-nav ul li.active > a { color: var(--wift-amber); }
  .mean-container .mean-nav ul li li a { color: var(--wift-steel); text-transform: none; font-weight: 500; }
  .mean-container .mean-nav ul li a.mean-expand { color: #fff; background: transparent; }
  .mean-container .mean-nav ul li a.mean-expand:hover { background: transparent; }
  .menu .sub-menu { overflow: visible; }

  /* --- hero: photo must not blow past the screen, text must stay legible - */
  .slider-area { overflow: hidden; }
  .slider-bg { min-height: 640px !important; }
  .single-slider.slider-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(7, 21, 52, .78) 0%, rgba(7, 21, 52, .55) 55%, rgba(7, 21, 52, .78) 100%);
  }
  .single-slider.slider-bg > .container { position: relative; z-index: 2; }
  .s-slider-content { padding-left: 0; padding-right: 0; margin-top: 100px !important; }
  .s-slider-content h1,
  .s-slider-content h2 { font-size: 32px; line-height: 1.2; color: #fff; }
  .s-slider-content p { color: #fff; font-size: 16px; padding-right: 0; }
  .wift-motto-hero { letter-spacing: .08em; font-size: 14px; }
  .s-slider-content .slider-btn .btn.ss-btn { max-width: 100%; white-space: normal; }
}

@media (max-width: 767px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .wift-cta .wift-cta-overlay { width: 260px; right: -80px; bottom: -80px; }
  .services-active2 .slider-nav .slick-list.draggable,
  .services-item { max-width: 100%; }
  .text-bg h2,
  .scrollbox .section-t h2 { font-size: 44px !important; line-height: 1.1; }
  .breadcrumb-title h1 { font-size: clamp(28px, 9vw, 38px); }
  .wift-cta h3 { font-size: 24px; }
  .wift-logo .wift-logo-sub { max-width: 150px; }
}

/* --- service cards (01/02/03): readable text over photos, no overflow ---- */
.s-single-services { overflow: hidden; }
.services-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 21, 52, .35) 0%, rgba(7, 21, 52, .92) 100%);
}
.services-hover { z-index: 1; }
.services-hover .second-services-content,
.h-service p, .h-service h5 { position: relative; z-index: 3; }
@media (max-width: 767px) {
  .s-single-services .services-icon { left: 24px; top: 30px; }
  .services-number { font-size: 90px; top: 50px; right: 24px; }
  .h-service, .services-hover { padding: 62% 24px 0; }
  .h-service h5, .services-hover h5 { font-size: 26px; line-height: 1.25; }
}
.services-hover .second-services-content a,
.s-single-services.active .second-services-content a { color: #fff; }
.services-hover .second-services-content a:hover { color: var(--wift-amber); }


/* ==========================================================================
   MOBILE FIXES, ROUND 2 (from on-device screenshots)
   ========================================================================== */

/* preloader logo: was left:4% / width:100%, so it spilled off the screen */
#loading {
  left: 50%;
  top: 50%;
  width: min(260px, 70vw);
  height: min(260px, 70vw);
  margin: 0;
  transform: translate(-50%, -50%);
  background-size: contain;
}

/* light photo sections must not sit on a navy base (it shows as empty bands) */
.testimonial-area { background-color: var(--wift-paper) !important; background-size: cover; }

/* stock DaWork orange -> WIFT amber (stars, phone/mail icons) */
.review-icon img,
.contact-area .contact-box .icon img { filter: hue-rotate(30deg) saturate(1.25) brightness(1.3); }
.contact-area .contact-box { background-color: var(--wift-navy-soft); }

@media (max-width: 991px) {
  /* about tabs: the desktop rotated side-rail clipped the labels */
  .about-area .nav.nav-tabs {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 30px;
  }
  .about-area .nav.nav-tabs::before,
  .about-area .nav.nav-tabs::after { display: none; }
  .about-area .nav.nav-tabs li { margin: 0; display: block; }
  .about-area .nav.nav-tabs li span {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1.3;
    border: 1px solid #d7d7d7;
  }
  .about-area .nav.nav-tabs li span.active { border-color: var(--wift-amber); }
}

@media (max-width: 767px) {
  /* 120-200px desktop paddings leave huge empty bands on a phone */
  .pt-160 { padding-top: 90px !important; }
  .pt-120 { padding-top: 64px !important; }
  .pb-120 { padding-bottom: 64px !important; }
  .pb-90  { padding-bottom: 56px !important; }
  .pb-200 { padding-bottom: 120px !important; }
  .locations-area { margin-top: -64px; }
  .mb-50 { margin-bottom: 32px !important; }

  /* promoter note: one full-width card, no desktop overlap tricks */
  .testimonial-active .testimonial-box { width: 100%; padding: 0; }
  .testimonial-active .single-testimonial {
    width: 100%;
    margin: 18px 0 9px;
    padding: 26px 22px;
  }
  .testimonial-active .single-testimonial::before,
  .testimonial-active .single-testimonial::after { display: none; }
  .testimonial-active .testi-author-img { position: static; text-align: center; }
  .testimonial-active .ta-info h6,
  .testimonial-active .ta-info span { color: var(--wift-navy); }
  .single-testimonial p { font-size: 16px; line-height: 1.7; }

  /* scroll-to-top must not cover copy */
  #scrollUp { width: 42px; height: 42px; right: 14px; bottom: 14px; line-height: 42px; opacity: .9; }

  .locations-box h3 { font-size: 30px; }
  .locations-box p { font-size: 16px; line-height: 1.6; }
  .locations-box li { flex-wrap: wrap; }
  .locations-box li .day { width: 100%; margin-bottom: 6px; }
  .locations-box li .time { width: 55%; }
  .locations-box li .button { width: 45%; }
}