/* ==========================================================================
   ENDURA F&B SOLUTIONS - OFFICIAL THEME STYLESHEET
   Matching home_preview.html & Figma Specifications
   ========================================================================== */

/* =====================================================
   RESET & BASE
===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', -apple-system, sans-serif;
  color: #111;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

/* =====================================================
   1. HEADER
   - Logo di kiri (icon + "Endura" + "F&B SOLUTIONS")
   - Nav + Contact Us di kanan (right-aligned)
===================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #EFEFEF;
  height: 84px;
  display: flex;
  align-items: center;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Logo: Endura + F&B SOLUTIONS */
.logo-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.site-logo-img {
  height: 52px;
  width: auto;
  max-width: 220px;
  display: block;
  object-fit: contain;
}

/* Right side: nav + button */
.header-right {
  display: flex;
  align-items: center;
  gap: 32px;
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 24px;
}
.main-nav a {
  font-size: 0.88rem;
  font-weight: 500;
  color: #222222;
  transition: color 0.15s ease, font-weight 0.15s ease;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
}
.main-nav a.active {
  color: #062D54 !important;
  font-weight: 700;
}
.main-nav a:hover {
  color: #062D54;
}
.btn-header-contact {
  background: #F5A623;
  color: #111 !important;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-header-contact:hover { background: #e09520; }

/* =====================================================
   2. HERO SLIDESHOW (Aspect Ratio: 1554 x 908)
===================================================== */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1554 / 908;
  min-height: 620px;
  max-height: 908px;
  overflow: hidden;
  background: #060606;
}
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 72px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
  background-size: cover;
  background-position: center center;
  color: #fff;
  z-index: 1;
}
.hero-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.52) 55%, rgba(0,0,0,0.18) 100%);
  z-index: 1;
}
.hero-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 580px;
}
.hero h1 {
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.07;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: 28px;
  font-weight: 400;
}
.hero-btns { display: flex; gap: 12px; align-items: center; }
.btn-yellow {
  background: #F5A623;
  color: #111;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 5px;
  transition: background 0.15s;
}
.btn-yellow:hover { background: #e09520; }
.btn-yellow-outline {
  background: transparent;
  color: #F5A623;
  border: 2px solid #F5A623;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}
.btn-yellow-outline:hover { background: #F5A623; color: #111; }
.btn-blue-outline {
  background: #062D54;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 5px;
  transition: background 0.15s;
}
.btn-blue-outline:hover { background: #0b27a8; }
.hero-dots {
  position: absolute;
  bottom: 26px;
  /* Mirrors .container's actual left inset (48px padding, centered with a
     1200px max-width above ~1296px viewport width) so the dots stay aligned
     under the yellow-outline button's left border at every screen size,
     instead of a fixed offset that drifts once the container starts
     centering. Ben 2026-09-11. */
  left: max(48px, calc((100% - 1200px) / 2 + 48px));
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.2s;
}
.hero-dot.active {
  background: #fff;
  transform: scale(1.25);
}

/* WhatsApp — position:fixed agar tetap terlihat saat scroll */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 44px;
  width: 68px; height: 68px;
  background: linear-gradient(180deg, #7ED274 0%, #56AF4C 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
  z-index: 999;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 36px; height: 36px; fill: white; }

/* =====================================================
   3. INTRO SECTION (2 columns — left: heading, right: paragraphs)
===================================================== */
.intro-section {
  padding: 80px 0 72px;
  background: #fff;
}
.intro-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
}
.intro-left {
  flex: 0 0 45%;
  max-width: 45%;
}
.intro-right {
  flex: 1;
}
.intro-heading {
  /* 2026-09-17: reduced from 1.75rem, Ben: "tulisan ini di kurangi
     size nya ya" (this text -- Endura F&B Solutions provides
     end-to-end kitchen design... -- reduce its size). */
  font-size: 1.4rem;
  line-height: 1.42;
}
.intro-heading-blue { color: #0E30C1; font-weight: 600; }
.intro-heading-black { color: #111; font-weight: 400; }
.intro-paras {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
.intro-para {
  font-size: 1rem;
  color: #444;
  line-height: 1.78;
}

/* =====================================================
   4. GALLERY — full-width body, no container, rounded corners
===================================================== */
.gallery-section {
  width: 100%;
  padding: 0 0 72px 0;
  overflow: hidden;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1.85fr 1fr 1fr 1.1fr;
  gap: 6px;
  width: 100%;
  transition: grid-template-columns 0.4s ease;
}
.gallery-img {
  overflow: hidden;
  height: 500px;
  position: relative;
  border-radius: 12px;
  cursor: pointer;
}
.gallery-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.gallery-img:hover img {
  transform: scale(1.04);
}
.gallery-img.active img {
  transform: scale(1);
}

/* =====================================================
   5. OUR SERVICES — sesuai gambar ke-1 terbaru
===================================================== */
.services-section {
  padding: 80px 0 88px;
  background: #fff;
}
.services-heading {
  font-size: 1.5rem;
  font-weight: 500;
  color: #062D54;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}

.services-section .services-heading {
  font-weight: 700;
  margin-bottom: 32px;
}
.svc-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.svc-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(13, 27, 94, 0.07);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(13, 27, 94, 0.14);
}

.svc-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #EEF4FF;
  overflow: hidden;
}
.svc-card-photo-empty {
  background: linear-gradient(135deg, #EEF4FF 0%, #D8E5FE 100%);
}
.svc-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.svc-card:hover .svc-card-img {
  transform: scale(1.04);
}

.svc-card-desc-panel {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  padding: 26px 26px 22px;
  overflow: hidden;
}
.svc-card-desc-text {
  color: #0D1B5E;
  font-size: 1rem;
  line-height: 1.5;
  overflow: hidden;
}
.svc-card-desc-text p {
  margin: 0 0 11px;
}
.svc-card-desc-text p:last-child {
  margin-bottom: 0;
}
/* Real mouse hover only -- (hover: hover) alone isn't enough, since some
   Android browsers (Samsung Internet in particular) report "hover: hover"
   even on a plain touchscreen phone with no mouse attached. Requiring a
   fine pointer alongside it keeps this scoped to actual desktop/mouse use. */
@media (hover: hover) and (pointer: fine) {
  .svc-card.has-desc-panel:hover .svc-card-photo,
  .svc-card.has-desc-panel:hover .svc-card-body {
    display: none;
  }
  .svc-card.has-desc-panel:hover .svc-card-desc-panel {
    display: flex;
  }
}

/* Touch devices: first tap reveals the description panel instead (toggled
   via .tap-open by main.js), second tap (the arrow button) follows the card
   link. Deliberately NOT wrapped in @media (hover: none) -- main.js already
   gates when .tap-open gets added (via isTouchLike(), which itself no longer
   trusts the hover media feature alone for the same Samsung Internet reason
   noted above), so gating the CSS a second time on that same unreliable
   media feature just reintroduced the bug: .tap-open would get added by JS
   but never take visual effect, leaving the photo/title/badge showing at
   the same time as the description text underneath instead of the panel
   replacing them. */
.svc-card.has-desc-panel.tap-open .svc-card-photo,
.svc-card.has-desc-panel.tap-open .svc-card-body {
  display: none;
}
.svc-card.has-desc-panel.tap-open .svc-card-desc-panel {
  display: flex;
}

.svc-card-body {
  padding: 20px 22px 24px;
}
.svc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.svc-card-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: #0D1B5E;
  line-height: 1.15;
  margin: 0;
}
.svc-card-arrow-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0D1B5E;
  border: 1.5px solid #0D1B5E;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.svc-card-arrow-btn svg {
  width: 24px;
  height: 24px;
}
.svc-card:hover .svc-card-arrow-btn {
  background: #062D54;
  border-color: #062D54;
  color: #ffffff;
  transform: translate(2px, -2px);
}
.svc-card-badge {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #0D1B5E;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 6px;
  text-align: left;
}

/* "Let's Talk" static CTA card */
.svc-card-talk {
  background: #FFFFFF;
  justify-content: space-between;
  padding: 28px;
  min-height: 100%;
}
.svc-talk-text {
  display: flex;
  flex-direction: column;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.15;
  color: #CBD5E1;
  transition: color 0.15s ease;
}
.svc-talk-phone-btn {
  align-self: flex-start;
  color: #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  transition: color 0.15s ease;
}
.svc-talk-phone-btn svg {
  width: 28px;
  height: 28px;
}
.svc-card-talk:hover .svc-talk-phone-btn,
.svc-card-talk:hover .svc-talk-text {
  color: #0D1B5E;
}

/* =====================================================
   6. TRUSTED PARTNERS — CSS Marquee (2 rows)
===================================================== */
.partners-section {
  padding: 80px 0 72px;
  background: #fff;
  overflow: hidden;
}
.partners-overlay-rounded {
  position: relative;
  z-index: 10;
  margin-top: -55px;
  background: #ffffff;
  border-radius: 48px 48px 0 0;
  padding: 130px 0 72px;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.04);
}
.partners-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  color: #062D54;
  margin-bottom: 44px;
}

.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.brand-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 12px;
  filter: grayscale(30%);
  transition: filter 0.2s;
  opacity: 0.85;
}
.brand-logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.brand-logo-item img {
  height: 44px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* =====================================================
   8. CTA BANNER (Container Ratio: 712.19 x 371.18)
===================================================== */
.cta-section {
  padding: 30px 0 90px;
  background: #ffffff;
}
.cta-card {
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background: #122C51;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  align-items: stretch;
}
.cta-content {
  padding: 52px 48px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta-title {
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 12px;
}
.cta-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 28px;
  max-width: 420px;
  line-height: 1.55;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #F5A623;
  color: #000 !important;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 13px 26px;
  border-radius: 12px;
  align-self: flex-start;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-cta:hover {
  background: #e09520;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.4);
}
.cta-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 712.19 / 371.18;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #122C51;
}
.cta-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =====================================================
   9. FOOTER — sesuai gambar ke-3
===================================================== */
.site-footer {
  background: url('../images/footer-bg.jpg') center center / cover no-repeat;
  color: #fff;
  padding: 60px 0 40px;
}
.footer-outer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.footer-logo-big {
  display: block;
  margin-bottom: 28px;
}
.footer-logo-img {
  height: 130px;
  width: auto;
  max-width: 420px;
  display: block;
  object-fit: contain;
}

.footer-contact { display: flex; flex-direction: column; gap: 14px; }
.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: #ffffff;
  line-height: 1.55;
}
.footer-contact-row svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.7;
}
.footer-contact-row strong {
  display: block;
  color: #ffffff;
  font-size: 0.82rem;
  margin-bottom: 1px;
}

.footer-right { display: flex; flex-direction: column; }
.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1.3fr 0.8fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-col-h {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 2px; }
.footer-links a {
  font-size: 0.82rem;
  line-height: 1.3;
  color: #D0D0D0;
  transition: color 0.15s;
}
.footer-links a:hover { color: #F5A623; }

.footer-bottom {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #ffffff;
}
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  color: #0D1B5E;
  transition: background 0.15s, color 0.15s;
}
.footer-socials a svg {
  width: 15px;
  height: 15px;
}
.footer-socials a:hover { background: #062D54; color: #ffffff; }

/* =====================================================
   10. MOBILE MENU BUTTON
===================================================== */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 101;
}
.mobile-menu-btn span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: #111;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu-btn.active span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* =====================================================
   11. RESPONSIVE MEDIA QUERIES (TABLET & MOBILE)
===================================================== */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .hero-dots { left: 32px; }
  .header-inner { padding: 0 32px; }
  .header-right { gap: 20px; }
  .main-nav ul { gap: 16px; }
  .svc-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .testi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .footer-outer {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .site-header { height: 72px; }
  .header-inner { padding: 0 20px; }
  .site-logo-img { height: 42px; max-width: 175px; }

  /* Mobile Navigation Drawer */
  .mobile-menu-btn { display: flex; }
  .header-right {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100vh - 72px);
    background: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow-y: auto;
    z-index: 99;
  }
  .header-right.open {
    transform: translateX(0);
  }
  body.menu-open {
    overflow: hidden;
  }
  .main-nav {
    width: 100%;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
  }
  .main-nav a {
    font-size: 1.1rem;
    font-weight: 600;
    display: block;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }
  .btn-header-contact {
    width: 100%;
    text-align: center;
    padding: 13px;
    font-size: 1rem;
    margin-top: 4px;
  }

  /* Hero Section */
  .hero {
    aspect-ratio: auto;
    height: 520px;
    min-height: 520px;
  }
  .hero-slide {
    padding-bottom: 48px;
  }
  .hero h1 {
    font-size: 2.35rem;
    line-height: 1.15;
  }
  .hero-sub {
    font-size: 0.92rem;
    margin-bottom: 24px;
  }
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .btn-yellow, .btn-blue-outline {
    text-align: center;
    padding: 12px 20px;
  }
  .hero-dots {
    left: 20px;
    bottom: 16px;
  }

  /* Intro Section */
  .intro-section {
    padding: 50px 0 42px;
  }
  .intro-inner {
    flex-direction: column;
    gap: 24px;
  }
  .intro-left,
  .intro-right {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .intro-heading {
    font-size: 1.15rem;
    line-height: 1.45;
  }
  .intro-para {
    font-size: 0.92rem;
  }

  /* Gallery Section */
  .gallery-section {
    padding: 0 0 48px;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px;
  }
  .gallery-img {
    height: 160px;
    border-radius: 8px;
  }

  /* Services Section */
  .services-section {
    padding: 50px 0 56px;
  }
  .services-heading {
    font-size: 1.25rem;
    margin-bottom: 24px;
  }
  .svc-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .svc-card-title {
    font-size: 1.9rem;
  }
  .svc-talk-text {
    font-size: 2.1rem;
  }

  /* Partners Section */
  .partners-section {
    padding: 50px 0 44px;
  }
  .partners-title {
    font-size: 1.35rem;
    margin-bottom: 28px;
  }
  .brand-logo-item {
    height: 48px;
    padding: 0 8px;
  }
  .brand-logo-item img {
    height: 32px;
  }

  /* CTA Banner */
  .cta-section {
    padding: 0 0 50px;
  }
  .cta-card {
    grid-template-columns: 1fr;
  }
  .cta-content {
    padding: 36px 20px;
  }
  .cta-title {
    font-size: 1.65rem;
  }
  .cta-sub {
    font-size: 0.85rem;
    margin-bottom: 20px;
  }
  .btn-cta {
    width: 100%;
    justify-content: center;
  }
  .cta-img-wrap {
    width: 100%;
    aspect-ratio: 712.19 / 371.18;
    max-height: 240px;
    order: -1;
  }

  /* Footer */
  .site-footer {
    padding: 44px 0 32px;
  }
  .footer-outer {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-logo-big {
    margin-bottom: 20px;
  }
  .footer-logo-img {
    height: 68px;
    max-width: 240px;
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 28px;
  }
  .footer-bottom {
    flex-direction: column-reverse;
    gap: 16px;
    align-items: flex-start;
    padding-top: 16px;
  }

  /* WhatsApp floating button on mobile */
  .wa-float {
    bottom: 20px;
    right: 32px;
    width: 60px;
    height: 60px;
  }
  .wa-float svg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 2rem;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .gallery-img {
    height: 140px;
  }
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* =====================================================
   GLOBAL PAGE HERO BANNER (Ratio: 1492 x 456, 30.56% Ratio)
   Modular Container for Why Us, Design, Build, Equipment, Maintenance, Grow
===================================================== */
.page-hero-banner,
.whyus-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1492 / 456;
  min-height: 456px;
  background: linear-gradient(135deg, rgba(7, 29, 122, 0.75) 0%, rgba(6, 45, 84, 0.65) 100%),
              url('../images/whyus-hero-bg.png') center/cover no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

@media (max-width: 1492px) {
  .page-hero-banner,
  .whyus-hero {
    min-height: clamp(240px, 30.56vw, 456px);
  }
}

.page-hero-inner,
.whyus-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.page-hero-logo,
.whyus-hero-logo {
  width: 369px;
  height: 138px;
  max-width: 45%;
  object-fit: contain;
  display: block;
}

.page-hero-title,
.whyus-hero-title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
  display: flex;
  align-items: center;
  text-align: right;
}
.whyus-hero-title {
  /* Matched to the other page-hero titles (Design/Build/Equipment/Maintenance/Grow
     all use this exact clamp() -- Why Us was smaller and inconsistent, per QC). */
  font-size: clamp(2.3rem, 3.8vw, 3.25rem);
  text-align: left;
  justify-content: flex-start;
}

.vision-section {
  padding: 60px 0 70px;
  background: #ffffff;
}
.vision-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 80px;
  align-items: stretch;
}
.vision-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.badge-blue,
.section-label,
.services-heading,
.process-heading,
.commitments-heading {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  color: #062D54;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 16px;
}
.vision-headline {
  font-size: 2.15rem;
  font-weight: 600;
  color: #062D54;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}
.vision-headline-accent {
  color: #0E30C1;
  font-weight: 700;
}
.mission-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: #062D54;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.mission-desc {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  color: #062D54;
}
.vision-img-wrap {
  border-radius: 20px;
  overflow: hidden;
  /* Was 458/674 (tall portrait) -- .vision-copy sits in the same stretched
     grid row and uses justify-content:space-between, so the image's height
     was dictating a much bigger gap between the vision headline and the
     MISSION block below it than the text itself needed. Shorter image,
     tighter gap. Ben 2026-09-18. */
  aspect-ratio: 458 / 520;
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}
.vision-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cert-block {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 32px 28px;
}
.cert-heading {
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 20px;
}
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 12px;
  align-items: center;
}
.cert-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #EAEAEA;
  height: 52px;
}
.cert-item img {
  max-height: 34px;
  max-width: 100%;
  object-fit: contain;
}

/* =====================================================
   WHY ENDURA (4-Card Horizontal Grid)
===================================================== */
.why-endura-section {
  padding: 20px 0 70px;
  background: #ffffff;
}
.why-endura-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.why-endura-card {
  /* Grid items stretch to the row's tallest card by default (align-items:
     stretch), so a shorter card already has empty space below its text --
     the hover gradient below reveals that space. The gradient image is
     anchored to the BOTTOM edge with a fixed height (not a % stop) so it
     always sits behind the title/description text regardless of how tall
     the photo above it is -- a plain 0%/65% gradient across the whole card
     would mostly fall behind the (opaque) photo and never actually show. */
  position: relative;
  border-radius: 0 0 14px 14px;
  transition: background-color 0.25s ease;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 230px;
}
.why-endura-card:hover {
  background-image: linear-gradient(180deg, rgba(14, 48, 193, 0.14) 0%, rgba(14, 48, 193, 0) 100%);
}
.why-endura-photo-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 290 / 434;
  margin-bottom: 18px;
}
.why-endura-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor to the top instead of the default center (Ben 2026-09-18:
     on mobile, where .why-endura-photo-wrap switches to a shorter 4/3
     aspect ratio, object-fit:cover's default center-crop was cutting
     off the top of each person's head. Applies to all 4 Why Endura
     cards since they share this one class. */
  object-position: top;
  display: block;
}
.why-endura-num {
  position: absolute;
  top: 14px;
  left: 14px;
  background: none;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.why-endura-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0D1B5E;
  line-height: 1.3;
  margin-bottom: 10px;
  padding: 0 20px;
}
.why-endura-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  padding: 0 20px;
}
@media (max-width: 1024px) {
  .why-endura-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 640px) {
  .why-endura-grid { grid-template-columns: 1fr; }
  .why-endura-photo-wrap { aspect-ratio: 4 / 3; }
}

.commitments-section {
  padding: 40px 0 70px;
  background: #ffffff;
}
.commitments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.commitment-card {
  background: transparent;
  border: none;
  border-right: 1px solid #DCDCDC;
  border-radius: 0;
  height: 345px;
  min-height: 345px;
  padding: 36px 24px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: none;
}
.commitment-card:last-child {
  border-right: none;
}
.commit-icon-wrap {
  width: 64px;
  height: 64px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.commit-img-icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
}
.commit-title {
  font-size: 1.45rem;
  font-weight: 500;
  color: #0D1B5E;
  margin: 0;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
}
.commit-desc {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.55;
  max-width: 250px;
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Circular 3-Photo Center-Focus Carousel (click a side photo to bring it to
   center; the window rotates by one and wraps around, never empty) —
   Ben 2026-09-11 */
.whyus-gallery-full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 20px 0 30px;
  margin-bottom: 72px;
  background: #ffffff;
  overflow: hidden;
}
.gallery-scroll-wrapper {
  width: 100%;
  overflow: hidden;
}
.gallery-scroll-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* Bottom padding is sized to fully contain the center item's box-shadow
     (0 16px 36px -- needs ~52px of clearance below its box) so the shadow's
     lower edge doesn't get clipped by this track/the wrapper's
     overflow:hidden. Ben 2026-09-11. */
  padding: 24px 20px 56px;
  width: 100%;
  /* Fixed to the tallest (center) item's height so the track's own box
     doesn't reflow every frame while items animate height during a slide --
     otherwise everything below (dots) visibly bounces. Ben 2026-09-11. */
  height: 500px; /* 420 (center) + 24+56 (track vertical padding) */
  box-sizing: border-box;
}
.gallery-scroll-item {
  flex: 1 1 0;
  min-width: 0;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.gallery-scroll-item[data-role="center"] {
  flex: 1.7 1 0;
  height: 420px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.18);
  cursor: default;
}
.gallery-scroll-item[data-role="left"]:hover,
.gallery-scroll-item[data-role="right"]:hover {
  box-shadow: 0 16px 36px rgba(0,0,0,0.2);
}
.gallery-scroll-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.gallery-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #AFC6FB;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  display: inline-block;
}
.gallery-dot:hover {
  background: #7B9FF5;
  transform: scale(1.25);
}
.gallery-dot.active {
  background: #062D54;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(1.15);
}

/* Interactive 6-Step Why Us Differentiators (Exact Figma Ratios: 1440x806 & 1283x649) */
.whyus-slider-full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  min-height: 806px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, #062D54 100%),
    url('../images/whyus-slider-bg.jpg');
}
.whyus-slider-card {
  width: 89.1%;
  max-width: 1283px;
  min-height: 649px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 28px;
  padding: 56px 72px 40px;
  color: #ffffff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25), inset 0 1.5px 2px rgba(255, 255, 255, 0.45);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.whyus-card-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
  padding: 24px 0;
}
.whyus-card-left {
  padding-top: 4px;
}
.whyus-card-heading {
  font-size: 2.75rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.whyus-card-right {
  display: flex;
  flex-direction: column;
}
.whyus-slide-title {
  font-size: 2.55rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: #ffffff;
  min-height: 90px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  transition: opacity 0.15s ease;
}
.whyus-slide-desc {
  font-size: 0.94rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  max-width: 620px;
  margin-bottom: 20px;
  min-height: 70px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  transition: opacity 0.15s ease;
}
.whyus-nav-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
  padding-top: 10px;
}
.whyus-tab-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  line-height: 1;
  outline: none;
}
.whyus-tab-btn:hover {
  color: #ffffff;
}
.whyus-tab-btn.active {
  background: #ffffff;
  color: #071D7A;
  font-weight: 800;
  padding: 5px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: none;
}

.process-section {
  padding: 60px 0 70px;
  background: #ffffff;
  position: relative;
}
.process-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: stretch;
}
.process-pillar {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.35s ease;
}
.process-pillar:hover {
  transform: translateY(-24px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  background: linear-gradient(160deg, #eef0f3 0%, #ffffff 65%);
  z-index: 2;
}
.process-pillar-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 18px;
  object-fit: contain;
}
.process-pillar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0D1B5E;
  margin-bottom: 16px;
  line-height: 1.2;
}
.process-pillar-divider {
  border: none;
  border-top: 1px solid #E5E7EB;
  margin: 0 0 20px;
}
.process-pillar-desc {
  font-size: 0.86rem;
  line-height: 1.65;
  color: #555555;
}

@media (max-width: 1024px) {
  .vision-grid { grid-template-columns: 1fr; gap: 40px; }
  .vision-copy { gap: 32px; }
  .commitments-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .commitment-card:nth-child(2n) { border-right: none; }
  .commitment-card:nth-child(1), .commitment-card:nth-child(2) { border-bottom: 1px solid #DCDCDC; padding-bottom: 32px; }
  .gallery-scroll-item { height: 260px; }
  .gallery-scroll-item[data-role="center"] { height: 330px; }
  .gallery-scroll-track { height: 410px; } /* 330 + 24+56 padding */
  .whyus-slider-full { padding: 56px 32px; }
  .whyus-slider-card { padding: 48px 40px 36px; }
  .whyus-card-body { grid-template-columns: 200px 1fr; gap: 28px; }
  .whyus-card-heading { font-size: 2.2rem; }
  .whyus-slide-title { font-size: 2.1rem; min-height: auto; }
  .process-grid-5 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .partners-overlay-rounded { margin-top: -45px; border-radius: 36px 36px 0 0; padding-top: 72px; }
}

@media (max-width: 768px) {
  .page-hero-banner,
  .whyus-hero {
    aspect-ratio: auto;
    padding: 50px 0;
    min-height: 240px;
  }
  .page-hero-inner,
  .whyus-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .page-hero-title {
    font-size: 1.85rem;
  }
  .whyus-hero-title {
    /* No mobile font-size override here anymore -- it now falls through to the
       same clamp() as Design/Build/Equipment/Maintenance/Grow at all sizes,
       per QC "samain aja semua font hero image di semua halaman". */
    text-align: center;
    justify-content: center;
  }
  .page-hero-logo,
  .whyus-hero-logo {
    width: 240px;
    height: auto;
    max-width: 80%;
  }

  .vision-headline { font-size: 1.4rem; }
  /* Mission label + description had no mobile override at all, so they stayed
     at their desktop size (1.5rem each) -- bigger than the just-shrunk 1.4rem
     headline above them, inverting the intended hierarchy. Scaled both down
     so the headline stays visibly the largest element, per QC. */
  .mission-label { font-size: 1.15rem; }
  .mission-desc { font-size: 0.95rem; }
  .vision-img-wrap {
    /* Was portrait (458/674) on mobile too, per QC should be landscape. */
    aspect-ratio: 4 / 3;
  }
  .commitments-grid { grid-template-columns: 1fr; gap: 28px; }
  .commitment-card {
    border-right: none;
    border-bottom: 1px solid #EAEAEA;
    padding-bottom: 24px;
    height: auto;
    min-height: auto;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
  }
  .commitment-card:last-child { border-bottom: none; }
  .commit-title {
    min-height: auto;
    justify-content: flex-start;
    text-align: left;
  }
  .commit-desc {
    max-width: none;
    margin: 0;
    min-height: auto;
    justify-content: flex-start;
    text-align: left;
  }

  .whyus-gallery-full { padding: 10px 0 40px; }
  .gallery-scroll-track { padding: 10px 10px 56px; gap: 8px; height: 306px; } /* 240 + 10+56 padding */
  .gallery-scroll-item { height: 190px; }
  .gallery-scroll-item[data-role="center"] { height: 240px; }

  .whyus-slider-full { padding: 36px 16px; min-height: 480px; }
  .whyus-slider-card { padding: 32px 22px; border-radius: 20px; }
  .whyus-card-body { grid-template-columns: 1fr; gap: 14px; }
  .whyus-card-heading { font-size: 1.8rem; }
  .whyus-slide-title { font-size: 1.55rem; min-height: auto; margin-bottom: 16px; }
  .whyus-slide-desc { font-size: 0.88rem; min-height: auto; margin-bottom: 20px; }
  .whyus-nav-tabs { justify-content: center; flex-wrap: wrap; gap: 10px; }

  .process-section { padding: 50px 0 60px; }
  .process-grid-5 { grid-template-columns: 1fr; gap: 16px; }
  .process-pillar { padding: 28px 20px; }
  .partners-overlay-rounded { margin-top: -30px; border-radius: 28px 28px 0 0; padding-top: 56px; }
}

/* =====================================================
   DESIGN (KITCHEN CONSULTANCY) PAGE SPECIFIC STYLES
===================================================== */
.design-hero {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.05) 100%),
              url('../images/concept-hero-bg.png') center/cover no-repeat;
}
.design-hero-content {
  max-width: 820px;
  text-align: left;
  padding: 40px 0;
}
.design-hero-title {
  font-size: clamp(2.3rem, 3.8vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.design-hero-subtitle {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  max-width: 620px;
  margin: 0;
}

/* Leadership Profile Section */
.consultancy-lead-section {
  padding: 90px 0 80px;
  background: #ffffff;
}
.lead-grid {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 72px;
  align-items: start;
}
.lead-photo-wrapper {
  position: relative;
}
.lead-photo-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #EBF1FA;
  box-shadow: 0 12px 36px rgba(13, 27, 94, 0.08);
}
.lead-photo-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.lead-badge-pill {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.lead-badge-name {
  font-size: 1.28rem;
  font-weight: 800;
  color: #0D1B5E;
  line-height: 1.2;
}
.lead-badge-role {
  font-size: 0.68rem;
  font-weight: 700;
  color: #062D54;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3px;
}
.lead-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #062D54;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF4FF;
  flex-shrink: 0;
}
.lead-eyebrow {
  font-size: 1.1rem;
  color: #1F2937;
  font-weight: 600;
  margin-bottom: 6px;
}
.lead-headline {
  margin: 0 0 10px;
  line-height: 1.15;
}
.lead-name-highlight {
  font-size: clamp(2.2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  color: #062D54;
  display: block;
}
.lead-role-highlight {
  font-size: clamp(2.2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  color: #0D1B5E;
  display: block;
}
.lead-subheading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 24px;
  line-height: 1.4;
}
.lead-bio-body p {
  font-size: 0.94rem;
  color: #374151;
  line-height: 1.75;
  margin-bottom: 18px;
}
.lead-logos-wrapper {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
}
.lead-logos-img {
  max-width: 100%;
  height: auto;
  display: block;
  opacity: 0.88;
}

/* 4 Consultancy Services Cards */
.consultancy-services-section {
  padding: 70px 0 32px;
  background: #ffffff;
}
.consultancy-services-header {
  margin-bottom: 36px;
}
.services-subheading {
  font-size: 1.05rem;
  color: #374151;
  line-height: 1.6;
  max-width: 740px;
  margin-top: 8px;
}
.consultancy-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.consult-card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F4F8 100%);
  border: 1px solid #EDF0F5;
  border-radius: 20px;
  padding: 40px 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.35s ease;
}
.consult-card:hover {
  transform: translateY(-24px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  background: linear-gradient(160deg, #eef0f3 0%, #ffffff 65%);
  z-index: 2;
}
.consult-card-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin-bottom: 18px;
}
.consult-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0D1B5E;
  margin: 0 0 14px;
  line-height: 1.3;
}
.consult-card-desc {
  font-size: 0.92rem;
  color: #4B5563;
  line-height: 1.68;
  margin: 0;
}

@media (max-width: 900px) {
  .consultancy-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .consultancy-cards-grid { grid-template-columns: 1fr; }
}

/* Portfolio & Projects Showcase */
.design-projects-section {
  padding: 24px 0 100px;
  background: #ffffff;
}
.project-tabs-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 40px;
}
.project-tabs-wrapper {
  display: inline-flex;
  align-items: center;
  background: #F2F4F7;
  padding: 5px;
  border-radius: 9999px;
  gap: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.proj-tab {
  background: transparent;
  color: #111827;
  border: none;
  padding: 9px 24px;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  user-select: none;
}
.proj-tab:hover {
  color: #062D54;
}
.proj-tab.active {
  background: #FFFFFF;
  color: #062D54;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Mobile-only sector dropdown -- swaps in for the pill tabs below 768px
   (see the @media (max-width: 768px) block further down) so a long sector
   list (Hospitality/Corporate/Restaurants/Healthcare/Bars/Production
   Kitchens/Public Assembly, etc.) doesn't wrap or overflow the screen on a
   phone. Hidden on desktop; kept in sync with the pill tabs by JS
   (initProjectTabs() in main.js). Ben QC 2026-09-18. */
.proj-tab-mobile-select {
  display: none;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  background-color: #F2F4F7;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%23062D54" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
  color: #062D54;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  border: none;
  border-radius: 9999px;
  padding: 12px 42px 12px 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.design-projects-grid,
.build-projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  transition: opacity 0.25s ease;
}
.design-projects-grid.loading,
.build-projects-grid.loading {
  opacity: 0.4;
  pointer-events: none;
}
.design-proj-card,
.build-proj-card {
  border-radius: 16px;
  overflow: hidden;
  background: #0D1B5E;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.design-proj-card:hover,
.build-proj-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(13, 27, 94, 0.14);
}
.proj-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}
.proj-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.proj-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.proj-slide.active {
  opacity: 1;
  visibility: visible;
  /* Ben 2026-09-17: was `position: relative` here, which overrode the
     base .proj-slide rule's `position: absolute; inset: 0;` the moment a
     slide became active -- inset:0 only sizes a position:absolute/fixed
     box, so the active slide silently fell back to being sized by its own
     content (the <img>) instead of filling .proj-slider-track. Since
     .proj-img has height:100%, and percentage heights need a DEFINITE
     parent height to resolve, that height:100% also collapsed to the
     image's natural/intrinsic size instead of the wrap's fixed
     aspect-ratio box -- so object-fit:cover never got a chance to crop
     the photo to fill the card, and the card's own navy background
     (#0D1B5E) showed through in the gap below whenever the photo's own
     aspect ratio was shorter than the 16:11 box (confirmed live: a
     1920x1080 upload rendered at 259px tall inside a 316px box). Leaving
     position unset here lets it keep inheriting `position: absolute;
     inset: 0;` from .proj-slide, which is what actually keeps every
     slide -- active or not -- locked to fill the wrap. */
}
.proj-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.proj-img-wrap:hover .proj-slide.active .proj-img {
  transform: scale(1.03);
}
.proj-tag-pill {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0D1B5E;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  letter-spacing: 0.01em;
  z-index: 4;
  pointer-events: none;
}
.proj-expand-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0D1B5E;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.proj-expand-btn svg {
  width: 18px;
  height: 18px;
}
.proj-img-wrap:hover .proj-expand-btn {
  opacity: 1;
  transform: scale(1);
}
.proj-expand-btn:hover {
  background: #062D54;
  color: #FFFFFF;
}
.proj-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0D1B5E;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 5;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.proj-arrow-btn svg {
  width: 20px;
  height: 20px;
}
.proj-arrow-btn.prev-btn {
  left: 14px;
}
.proj-arrow-btn.next-btn {
  right: 14px;
}
.proj-img-wrap:hover .proj-arrow-btn {
  opacity: 1;
}
.proj-arrow-btn:hover {
  background: #062D54;
  color: #FFFFFF;
}
.proj-dots-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 4;
}
.p-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  display: inline-block;
  cursor: pointer;
  transition: all 0.25s ease;
}
.p-dot:hover {
  background: rgba(255, 255, 255, 0.85);
}
.p-dot.active {
  background: #FFFFFF;
  width: 20px;
  border-radius: 4px;
}

/* =====================================================
   FULLSCREEN INTERACTIVE LIGHTBOX MODAL
===================================================== */
.endura-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(8, 16, 56, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 24px;
  user-select: none;
}
.endura-lightbox.open {
  opacity: 1;
  visibility: visible;
}
.lightbox-header {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 28px;
  z-index: 10;
}
.lightbox-title-pill {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lightbox-counter {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 12px;
}
.lightbox-close-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lightbox-close-btn svg {
  width: 24px;
  height: 24px;
}
.lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
}
.lightbox-content-wrap {
  position: relative;
  max-width: 90vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-main-img {
  max-width: 88vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}
.lightbox-nav-btn svg {
  width: 28px;
  height: 28px;
}
.lightbox-nav-btn.prev {
  left: 20px;
}
.lightbox-nav-btn.next {
  right: 20px;
}
.lightbox-nav-btn:hover {
  background: #062D54;
  transform: translateY(-50%) scale(1.1);
}
.lightbox-thumbnails {
  position: absolute;
  bottom: 20px;
  display: flex;
  gap: 10px;
  max-width: 80vw;
  overflow-x: auto;
  padding: 8px;
}
.lightbox-thumb {
  width: 54px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}
.lightbox-thumb.active,
.lightbox-thumb:hover {
  opacity: 1;
  border-color: #062D54;
  transform: scale(1.08);
}

@media (max-width: 1024px) {
  .lead-grid { grid-template-columns: 1fr; gap: 40px; }
  .lead-photo-wrapper { max-width: 440px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .consultancy-cards-grid { grid-template-columns: 1fr; gap: 16px; }
  .design-projects-grid { grid-template-columns: 1fr; gap: 20px; }
  .lead-badge-pill { padding: 10px 14px; bottom: 14px; left: 14px; right: 14px; }
  .lead-badge-name { font-size: 1.1rem; }
  .lead-subheading { font-size: 1.1rem; }
  .proj-tab { padding: 8px 20px; font-size: 0.85rem; }
  .project-tabs-wrapper { display: none; }
  .proj-tab-mobile-select { display: block; }
}

/* =====================================================
   BUILD (DESIGN & BUILD) PAGE SPECIFIC STYLES
===================================================== */
.build-hero {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.32) 45%, rgba(0, 0, 0, 0.08) 100%),
              url('../images/build-hero-bg.png') center/cover no-repeat;
}
.build-hero-content {
  max-width: 820px;
  text-align: left;
  padding: 40px 0;
}
.build-hero-title {
  font-size: clamp(2.3rem, 3.8vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.build-hero-subtitle {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  max-width: 620px;
  margin: 0;
}

/* Key Service Area (6 Cards: 5 photo cards + Let's Talk) */
.keysvc-section {
  padding: 70px 0 60px;
  background: #ffffff;
}
.keysvc-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.keysvc-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(13, 27, 94, 0.07);
}
.keysvc-card-header {
  background: #062D54;
  min-height: 172px;
  box-sizing: border-box;
  padding: 30px 26px 20px;
}
.keysvc-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
}
.keysvc-card-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.keysvc-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.keysvc-card-talk {
  min-height: 100%;
}

/* Project Timeline (static preview, not database-driven) */
.timeline-section {
  padding: 60px 0 50px;
  background: #ffffff;
}
.timeline-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
}
.timeline-heading {
  margin-bottom: 0;
}
.timeline-divider {
  border: none;
  border-top: 1px solid #E5E7EB;
  margin: 0 0 40px;
}
.timeline-track {
  /* Ben 2026-09-25: client didn't want to scroll right to see all 8
     milestones, so this switched from a horizontally-scrolling flex row
     to a wrapping grid (4 columns x 2 rows on desktop, stepping down at
     the same 1024px/768px breakpoints already used for .keysvc-cards-grid
     above, for consistency). No more overflow-x/scroll-behavior/hidden
     scrollbar -- there's nothing to scroll any more, so the badge-
     clipping workarounds that overflow-x:auto used to require (see git
     history) aren't needed either: with default overflow:visible, the
     numbered corner badges on every pill (including column 1's) can
     poke past their pill's edge without being cut off.

     Ben 2026-09-25 (round 2 + 3): a 7-column template (4 pill columns +
     3 narrow arrow-gap columns) plus extra narrow "connector rows"
     between every pair of pill rows, so page-build.php can place every
     pill/arrow/connector via an explicit inline grid-column/grid-row --
     see the PHP loop for why (it draws a true boustrophedon/snake path:
     row 1 left-to-right, then straight down into the SAME column to
     start the next row, which then reads right-to-left, alternating for
     as many rows as there are milestones -- plain grid auto-flow can't
     express that). This whole column/row scheme is desktop-only: the
     1024px/768px breakpoints below swap back to plain repeat(2,1fr)/1fr
     templates, force pills back to grid-column/row:auto (needs
     !important to beat the inline style), and hide the arrows/connectors
     entirely -- 2 or 1 columns can't fit this exact "4 across" path
     anyway. */
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr;
  align-items: center;
  row-gap: 14px;
  column-gap: 0;
  padding-top: 12px;
  counter-reset: timeline-step;
}
.timeline-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
}
.timeline-step-arrow--left {
  transform: scaleX(-1);
}
.timeline-row-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
}
.timeline-pill {
  position: relative;
  counter-increment: timeline-step;
  min-width: 190px;
  background: #F1F5F9;
  border-radius: 14px;
  padding: 20px 22px;
  font-size: 0.98rem;
  font-weight: 600;
  color: #0D1B5E;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.timeline-pill:hover {
  /* #4A617C 2026-09-04 round 2: re-sampled via PIL directly from Ben's
     clean Figma export (43db8ee1-image.png) instead of the earlier
     #3A5471 approximated from a compressed video frame -- same navy
     family, more precise. */
  background: #4A617C;
  color: #ffffff;
}
.timeline-pill::before {
  /* Ben 2026-09-24: replaced the big floating gradient ghost-number
     (centered above the pill, see git history for that version) with a
     small solid-navy circle badge sitting right on the pill's top-left
     corner, per Ben's marked-up screenshot -- #0D1B5E reuses the same
     navy already used for the pill label text and the step arrows
     elsewhere in this section, so the badge reads as part of the same
     color family ("senada dengan lainnya"); the digit itself is white. */
  content: counter(timeline-step);
  position: absolute;
  top: -12px;
  left: -12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0D1B5E;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(13, 27, 94, 0.25);
}
/* Featured Projects Showcase */
.build-projects-section {
  padding: 40px 0 70px;
  background: #ffffff;
}
.build-projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.build-proj-card {
  border-radius: 16px;
  overflow: hidden;
  background: #0D1B5E;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease;
}
.build-proj-card:hover {
  transform: translateY(-4px);
}
.build-proj-card:hover .proj-img {
  transform: scale(1.03);
}


@media (max-width: 1024px) {
  .keysvc-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }
  .timeline-pill { grid-column: auto !important; grid-row: auto !important; }
  .timeline-step-arrow,
  .timeline-row-connector { display: none; }
}

@media (max-width: 768px) {
  .build-projects-grid { grid-template-columns: 1fr; gap: 20px; }
  .keysvc-cards-grid { grid-template-columns: 1fr; }
  .timeline-divider { margin-bottom: 36px; }
  /* Mobile Project Timeline (Ben 2026-09-18 through 2026-09-25): the
     small numbered corner badge on .timeline-pill::before needs no
     mobile-specific handling -- it's tiny and always visible by default.
     As of 2026-09-25 the track is a single-column grid here (was a
     swipeable horizontal scroller before the client asked to drop
     scrolling entirely -- see .timeline-track above). */
  .timeline-track { grid-template-columns: 1fr; }
  .timeline-section { padding: 36px 0 44px; }
  /* Same "mobile inherits an un-overridden desktop rule" pattern already
     seen elsewhere on this site (Why Us OUR COMMITMENTS): the header's
     desktop min-height:172px was never overridden at this breakpoint, so
     on mobile it kept reserving 172px even though a short 1-2 line title
     only needs a fraction of that -- the empty leftover space inside the
     header read as an oversized gap before the photo below it, per Ben
     ("Jarak antara image dengan text jangan terlalu jauh"). */
  .keysvc-card-header {
    min-height: auto;
    padding: 18px 20px 14px;
  }
}

/* =====================================================
   EQUIPMENT CATALOG PAGE SPECIFIC STYLES
===================================================== */
.equipment-hero {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.05) 100%),
              url('../images/equipment-hero-bg.png') center/cover no-repeat;
}
.equipment-hero-content {
  max-width: 820px;
  text-align: left;
  padding: 40px 0;
}
.equipment-hero-title {
  font-size: clamp(2.3rem, 3.8vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.equipment-hero-subtitle {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  max-width: 620px;
  margin: 0;
}

/* Catalog Main Section */
.equipment-catalog-section {
  padding: 60px 0 100px;
  background: #ffffff;
}
.catalog-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}
.equipment-main-heading {
  font-size: 2.2rem;
  font-weight: 800;
  color: #062D54;
  margin: 0;
  letter-spacing: -0.01em;
}
/* Mobile filter-drawer trigger -- icon only, hidden on desktop where the
   sidebar renders inline. See the @media (max-width: 900px) block below
   for the drawer itself. Ben 2026-09-04. */
.filter-icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  color: #062D54;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-icon-btn:hover {
  background: #F3F4F6;
  border-color: #062D54;
}
.filter-icon-btn.active {
  background: #062D54;
  border-color: #062D54;
  color: #ffffff;
}
.catalog-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}

/* Sidebar Filters */
.catalog-sidebar {
  background: #ffffff;
  padding-right: 12px;
}
/* Hidden by default everywhere -- it's only ever meaningful as the
   mobile popup-drawer's dim overlay (see the @media 900px block below).
   Without this, the div was an unstyled grid child on desktop and threw
   off .catalog-layout's 2-column auto-placement (sidebar ended up
   sharing row 1 with this instead of with .catalog-main, pushing the
   products grid onto its own row underneath the sidebar). Caught via
   Playwright before reaching Ben. */
.catalog-filter-backdrop {
  display: none;
}
.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E7EB;
}
.filter-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #111827;
  margin: 0;
}
.filter-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Close (X) button inside the mobile popup drawer -- desktop-hidden (see
   the @media (min-width: 901px) rule near the drawer CSS below), shown
   only once the sidebar becomes an overlay. */
.filter-mobile-close {
  display: none;
  background: none;
  border: none;
  padding: 0;
  color: #374151;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.filter-mobile-close:hover {
  color: #062D54;
}
.filter-clear-btn {
  background: none;
  border: none;
  font-size: 0.85rem;
  color: #6B7280;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  transition: color 0.15s;
}
.filter-clear-btn:hover {
  color: #062D54;
}
.filter-group {
  margin-bottom: 28px;
}
.filter-group-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 14px;
}

/* Product Category quick-select pills -- Ben 2026-09-15: a compact,
   always-visible duplicate of the same Category terms the accordion list
   below already offers (see .cat-accordion-header), styled like the old
   Item Group chips. Click a pill to select that whole Category without
   needing to open its accordion first; main.js keeps this in sync with
   the matching accordion-header radio for the same Category. */
.cat-pills-grid {
  /* Ben 2026-09-26: was flex-wrap (each pill only as wide as its own
     text, so "Cooking" and "Bulk Cooking / Catering" were very different
     sizes and wrapped 2-per-row unevenly). Switched to a single-column
     flex stack instead: with flex-direction:column, every pill is a flex
     item on the cross axis, and the default align-items:stretch makes
     each one automatically fill the full sidebar width -- so every pill
     is exactly the same size regardless of its text length, short or
     long, current or any added later via wp-admin. The sidebar is only
     280px wide (see .catalog-layout), which isn't room for 2 pills
     side-by-side once they're all sized to fit the longest label anyway
     ("Bulk Cooking / Catering"), so 1-per-row is the natural outcome of
     "everything the same size" here, not an arbitrary choice. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}
.cat-pill-chip {
  display: flex;
  cursor: pointer;
  user-select: none;
}
.cat-pill-chip input {
  display: none;
}
.cat-pill-chip-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: 7px 16px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #374151;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.cat-pill-chip:hover .cat-pill-chip-text {
  border-color: #062D54;
  color: #062D54;
  background: #EEF4FF;
}
.cat-pill-chip input:checked + .cat-pill-chip-text {
  background: #062D54;
  border-color: #062D54;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(6, 45, 84, 0.25);
}

/* Category Accordion */
.cat-accordion-item {
  border-bottom: 1px solid #F3F4F6;
  padding: 4px 0;
}
/* Category itself is only selectable via the .cat-pill-chip row above --
   this toggle is expand/collapse ONLY (Ben 2026-09-15: no radio here, just
   the Sub-Category radios inside .cat-accordion-body should be clickable). */
.cat-accordion-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1F2937;
  padding: 10px 0;
  cursor: pointer;
  text-align: left;
}
.cat-chevron {
  transition: transform 0.2s ease;
}
.cat-accordion-item.open .cat-chevron {
  transform: rotate(180deg);
}
.cat-accordion-body {
  padding: 2px 0 12px;
  display: none;
}
.cat-accordion-item.open .cat-accordion-body {
  display: block;
}

/* Radio Button Styling */
/* Filter Checkbox / Radio Item Styling */
.filter-radio-label,
.filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 0.88rem;
  color: #4B5563;
  transition: color 0.15s;
  user-select: none;
}
.filter-radio-label:hover,
.filter-checkbox-label:hover {
  color: #062D54;
}
.filter-radio-label input,
.filter-checkbox-label input {
  display: none;
}
.custom-radio {
  width: 17px;
  height: 17px;
  border: 2px solid #D1D5DB;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  background: #FFFFFF;
}
.filter-radio-label input:checked + .custom-radio,
.filter-checkbox-label input:checked + .custom-radio {
  border-color: #062D54;
  background: #FFFFFF;
}
.filter-radio-label input:checked + .custom-radio::after,
.filter-checkbox-label input:checked + .custom-radio::after {
  content: '';
  width: 9px;
  height: 9px;
  background: #062D54;
  border-radius: 50%;
}
.filter-radio-label input:checked ~ .radio-text,
.filter-checkbox-label input:checked ~ .radio-text {
  color: #062D54;
  font-weight: 700;
}

/* Brand Filter Chips */
.filter-brand-group {
  padding-top: 10px;
}
.brand-chips-grid {
  /* Ben 2026-09-26: same fix as .cat-pills-grid above and for the same
     reason -- flex-wrap sized each chip to its own text ("Anvil" vs
     "Convotherm"), so short brand names looked smaller. flex-direction:
     column + the flex container's default align-items:stretch makes
     every .brand-chip fill the full sidebar width automatically,
     whatever its label's length, current or added later via wp-admin. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.brand-chip {
  /* Ben 2026-09-26 (earlier round): brand chips (<button>) were also
     rendering visibly SHORTER than the Product Category chips
     (.cat-pill-chip-text, a <span>) even though every box-model number
     here already matched -- padding, font-size, border-radius, colors,
     all identical between the two. The actual cause: <span> always
     inherits font-family/line-height from the page (body sets Roboto +
     line-height:1.6), but a <button> does NOT inherit those by default
     in any browser's UA stylesheet -- it falls back to the system UI
     font at its own default line-height (~1.15), which renders visibly
     shorter/different even at the same font-size. font-family/
     line-height: inherit here makes the button pick up the exact same
     Roboto + 1.6 line-height the category chips already get for free. */
  font-family: inherit;
  line-height: inherit;
  text-align: center;
  padding: 7px 16px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.brand-chip:hover {
  border-color: #062D54;
  color: #062D54;
  background: #EEF4FF;
}
.brand-chip.active {
  background: #062D54;
  border-color: #062D54;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(6, 45, 84, 0.25);
}

/* No Products Found Empty State */
.no-products-container {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
  background: #F9FAFB;
  border: 1px dashed #D1D5DB;
  border-radius: 16px;
  margin-bottom: 30px;
}
.no-products-icon {
  width: 56px;
  height: 56px;
  color: #9CA3AF;
  margin-bottom: 16px;
}
.no-products-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
}
.no-products-desc {
  font-size: 0.92rem;
  color: #6B7280;
  max-width: 420px;
  margin: 0 0 24px;
  line-height: 1.55;
}
.no-products-reset-btn {
  background: #062D54;
  color: #ffffff;
  border: none;
  padding: 10px 26px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(6, 45, 84, 0.2);
  transition: all 0.2s ease;
}
.no-products-reset-btn:hover {
  background: #0D1B5E;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 27, 94, 0.25);
}

/* 4-Column Product Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
  min-height: 300px;
  transition: opacity 0.2s ease;
}
/* Ben 2026-09-17: AJAX-paginated catalog -- dims the grid while a
   filter/search/page fetch is in flight (endura_filter_equipment in
   functions.php), same pattern as .design-projects-grid.loading. */
.products-grid.loading {
  opacity: 0.4;
  pointer-events: none;
}
.product-card {
  border: 1px solid #ECECEC;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  text-align: center;
  padding: 16px 12px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: #CBD5E1;
}
.product-card-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1.15;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
  background: #FFFFFF;
}
.product-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.product-card:hover .product-img {
  transform: scale(1.06);
}
.product-sku {
  font-size: 0.82rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}
.product-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4B5563;
  letter-spacing: 0.04em;
}

/* Pagination */
.catalog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
}
.page-num-btn, .page-nav-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: #4B5563;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.page-num-btn:hover, .page-nav-btn:hover {
  background: #F3F4F6;
  color: #062D54;
}
.page-num-btn.active {
  background: #062D54;
  color: #ffffff;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; gap: 32px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }

  /* Filters become an icon-triggered popup drawer on mobile/tablet --
     slide-in-from-right + body-scroll-lock, the same interaction as the
     site's hamburger nav (.header-right/.mobile-menu-btn in section 10),
     just re-triggered by .filter-icon-btn instead of .mobile-menu-btn.
     Ben 2026-09-04: "Filter dibuat jadi icon aja ... muncul pop up
     opsi-opsinya. Seperti hamburger menu". */
  .filter-icon-btn { display: inline-flex; }
  .filter-mobile-close { display: inline-flex; }
  .catalog-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 86vw);
    height: 100vh;
    z-index: 201;
    padding: 28px 24px 32px;
    overflow-y: auto;
    background: #ffffff;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  }
  .catalog-sidebar.open {
    transform: translateX(0);
  }
  .catalog-filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    z-index: 200;
  }
  .catalog-filter-backdrop.open {
    display: block;
  }
  body.filter-open {
    overflow: hidden;
  }
}
@media (min-width: 901px) {
  .filter-mobile-close { display: none !important; }
}
/* Ben 2026-09-04: "1 baris ada 2 katalog saja" -- stay at 2 columns all
   the way down to phone widths (this used to collapse to 1 column here,
   the opposite of what he wants); just tighten spacing/type so 2 cards
   still fit comfortably on a narrow phone. */
@media (max-width: 540px) {
  .products-grid { gap: 12px; }
  .product-card { padding: 12px 8px 16px; }
  .product-sku { font-size: 0.74rem; }
  .product-name { font-size: 0.7rem; }
}

/* =====================================================
   SINGLE EQUIPMENT DETAIL PAGE STYLES
===================================================== */
.single-equipment-page {
  background: #ffffff;
}

.prod-detail-section {
  padding: 50px 0 60px;
  background: #ffffff;
}

.prod-detail-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  /* 2026-09-17: was "center" -- fine when the left column was short
     (title/description only), but now the spec table + buttons live in
     this same left column too, making it much taller than the photo, so
     centering floated the photo awkwardly in the middle of a tall gap.
     "start" keeps the photo aligned to the top, next to the SKU/title. */
  align-items: start;
}

/* Left Column: Brand, Title, Description, Buttons */
.prod-detail-left {
  display: flex;
  flex-direction: column;
}
.prod-brand-logo-wrap {
  margin-bottom: 22px;
}
.prod-brand-logo-img {
  max-width: 155px;
  height: auto;
  display: block;
  object-fit: contain;
}
/* 2026-09-16: plain-text fallback for a brand with no logo set in
   wp-admin (see single-equipment.php) -- previously every brand with no
   logo of its own silently showed the Hisakage logo instead, which was
   wrong for any other brand. */
.prod-brand-name-text {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #062D54;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.prod-title-group {
  margin-bottom: 24px;
}
.prod-sku-title {
  /* 2026-09-17: reduced from clamp(2.4rem, 4.2vw, 3.4rem) -- that size
     was set when this column ran the full page width; now that the spec
     table also lives in this same (narrower) left column, the old size
     wrapped awkwardly across 2-3 lines. Ben: "model number sama name itu
     tolong di kecilin lagi sih". */
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 900;
  color: #062D54;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.prod-model-title {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 900;
  color: #062D54;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.prod-desc-text {
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.72;
}
.prod-desc-text p {
  margin-bottom: 16px;
}
.prod-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.btn-download-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #062D54;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(6, 45, 84, 0.25);
  border: none;
  cursor: pointer;
}
.btn-download-pdf:hover {
  background: #0D1B5E;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 27, 94, 0.3);
  color: #ffffff;
}
.btn-request-quote {
  /* 2026-09-04: was #D97706/white text, an off-brand amber that doesn't
     match the site's actual yellow. Ben: "Warna kuning button blm
     sesuai". Swapped to the established sitewide yellow #F5A623 (see
     .btn-yellow / .btn-grow-talk) with dark text, the same
     yellow-bg/dark-text pairing used everywhere else that color
     appears -- flagged to Ben as this session's own read of "kuning"
     rather than a Figma-sampled value, since image 2 was a screenshot
     of the current (wrong) state, not a reference swatch. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F5A623;
  color: #111;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.3);
}
.btn-request-quote:hover {
  background: #e09520;
  color: #111;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(224, 149, 32, 0.35);
}

/* Right Column: Large Product Showcase Photo (now includes ice types/feature badges baked into the photo itself, per-product) */
.prod-hero-photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.prod-hero-photo-img {
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  filter: drop-shadow(0 15px 35px rgba(0,0,0,0.12));
}

/* =====================================================
   TECHNICAL SPECIFICATIONS TABLE
   2026-09-17: moved out of its own full-width section (.specs-table-section,
   now removed) into the left column of .prod-detail-grid, beside the
   photo instead of below it -- Ben: "ngga perlu full size, jadi mungkin
   di sejajarkan dengan deskripsi di atas nya itu ya, dibagi dua gitu, dan
   ada di sebelah kiri". The old separate Detail/Value <th> header row is
   gone at every screen size now too, replaced by the single
   "Specification" title bar the mobile layout already used -- Ben:
   "di header nya di samakan seperti mobile, tulisan detail sama value
   nya dihilangkan, diganti aja specification".
===================================================== */
.specs-section-title {
  background: #062D54;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 16px 20px;
  margin: 28px 0 0;
  border-radius: 12px 12px 0 0;
}
.specs-table-container {
  overflow-x: auto;
  /* Top corners square -- .specs-section-title always sits flush above
     this now, so only the bottom needs rounding. */
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid #E5E7EB;
  border-top: none;
}
.endura-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.endura-specs-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #F1F5F9;
  color: #374151;
  font-size: 0.85rem;
}
.endura-specs-table td:first-child {
  text-align: left;
  padding-left: 20px;
  font-weight: 700;
  color: #111827;
  width: 44%;
}
.endura-specs-table td:last-child {
  text-align: right;
  padding-right: 20px;
  font-weight: 600;
}
.endura-specs-table tbody tr:last-child td {
  border-bottom: none;
}
.endura-specs-table tbody tr:nth-child(even) {
  background: #F8FAFC;
}
.endura-specs-table tbody tr:hover {
  background: #EEF2F6;
}

/* =====================================================
   PRODUCTS RECOMMENDATION SECTION
===================================================== */
.recommendations-section {
  padding: 60px 0 90px;
  background: #FAFAFA;
  border-top: 1px solid #ECECEC;
}
.recommendations-title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 900;
  color: #062D54;
  text-align: center;
  margin: 0 0 45px;
  letter-spacing: -0.02em;
}
.rec-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.rec-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  width: 100%;
}
.rec-card {
  border: 1px solid #ECECEC;
  border-radius: 16px;
  background: #ffffff;
  padding: 24px 16px 20px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.rec-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: #CBD5E1;
}
.rec-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1.15;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
  background: #FFFFFF;
}
.rec-card-img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.rec-card:hover .rec-card-img {
  transform: scale(1.06);
}
.rec-card-sku {
  font-size: 0.86rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 2px;
}
.rec-card-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #4B5563;
  letter-spacing: 0.03em;
}
.rec-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #D1D5DB;
  background: #ffffff;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.rec-arrow-btn.prev {
  left: -22px;
}
.rec-arrow-btn.next {
  right: -22px;
}
.rec-arrow-btn:hover {
  background: #062D54;
  color: #ffffff;
  border-color: #062D54;
  transform: translateY(-50%) scale(1.08);
}

/* =====================================================
   REQUEST QUOTE MODAL POPUP
===================================================== */
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.quote-modal.open {
  display: flex;
}
.quote-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 94, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.25s ease;
}
.quote-modal-card {
  position: relative;
  width: 100%;
  max-width: 580px;
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  z-index: 2;
  animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalScaleUp {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.quote-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #F3F4F6;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4B5563;
  cursor: pointer;
  transition: all 0.2s ease;
}
.quote-modal-close:hover {
  background: #E5E7EB;
  color: #111827;
  transform: rotate(90deg);
}
.quote-modal-header {
  margin-bottom: 22px;
}
.quote-prod-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #EEF4FF;
  border: 1px solid #D0E1FD;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #062D54;
  margin-bottom: 12px;
}
.quote-modal-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0D1B5E;
  margin: 0 0 6px;
}
.quote-modal-subtitle {
  font-size: 0.9rem;
  color: #6B7280;
  margin: 0;
}
.quote-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.quote-field-full {
  grid-column: 1 / -1;
}
.quote-form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: 6px;
}
.quote-input, .quote-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #111827;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.quote-input:focus, .quote-textarea:focus {
  outline: none;
  border-color: #062D54;
  box-shadow: 0 0 0 3px rgba(6, 45, 84, 0.12);
}
.quote-textarea {
  resize: vertical;
  min-height: 70px;
}
.quote-submit-btn {
  width: 100%;
  background: #D97706;
  color: #ffffff;
  border: none;
  padding: 13px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
  margin-top: 8px;
}
.quote-submit-btn:hover {
  background: #B45309;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(180, 83, 9, 0.3);
}
.quote-form-msg {
  padding: 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 14px;
  display: none;
}
.quote-form-msg.success {
  background: #DEF7EC;
  color: #03543F;
  border: 1px solid #BCF0DA;
  display: block;
}
.quote-form-msg.error {
  background: #FDE8E8;
  color: #9B1C1C;
  border: 1px solid #FBD5D5;
  display: block;
}

@media (max-width: 1024px) {
  .prod-detail-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .prod-hero-photo-wrap {
    order: -1;
  }
}

@media (max-width: 768px) {
  .prod-detail-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .rec-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .quote-form-grid {
    grid-template-columns: 1fr;
  }
  .rec-arrow-btn { display: none; }

  /* .specs-section-title / .specs-table-container corner-radius are
     unconditional now (see the base rules above) -- nothing phone-specific
     needed for those anymore. Below this breakpoint, still drop the
     2-column table layout and stack each row as a label-over-value block
     instead, so a long spec value never forces horizontal scroll. */
  .endura-specs-table, .endura-specs-table tbody, .endura-specs-table tr, .endura-specs-table td {
    display: block;
    width: 100%;
  }
  .endura-specs-table tbody tr {
    padding: 14px 20px;
    border-bottom: 1px solid #F1F5F9;
  }
  .endura-specs-table tbody tr:last-child {
    border-bottom: none;
  }
  .endura-specs-table tbody tr:nth-child(even) {
    background: #F8FAFC;
  }
  .endura-specs-table td {
    padding: 2px 0 !important;
    border: none !important;
    text-align: left !important;
  }
  .endura-specs-table td:first-child {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6B7280;
  }
  .endura-specs-table td:last-child {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
  }
}

/* =====================================================
   MAINTENANCE & REPAIR SERVICES PAGE SPECIFIC STYLES
===================================================== */
.maintenance-hero {
  background: linear-gradient(90deg, rgba(5, 10, 25, 0.6) 0%, rgba(5, 10, 25, 0.28) 48%, rgba(5, 10, 25, 0.08) 100%),
              url('../images/maintenance-hero-bg.jpg') center/cover no-repeat;
}
.maintenance-hero-content {
  max-width: 780px;
  text-align: left;
  padding: 40px 0;
}
.maintenance-hero-title {
  font-size: clamp(2.3rem, 3.8vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.maintenance-hero-subtitle {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  max-width: 600px;
  margin: 0;
}

/* Shared navy section label (used for "KEY SERVICE AREA" / "OUR COMMITMENTS") */
.maint-section-label {
  font-size: 1.55rem;
  font-weight: 800;
  color: #0D1B5E;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0 0 32px;
}

/* ---- Key Service Area: 3 numbered cards ---- */
.keyservice-section {
  padding: 90px 0 20px;
  background: #ffffff;
}
.keyservice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}
.keyservice-card {
  background: linear-gradient(180deg, #F8F8F8 0%, #F1F1F1 100%);
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.keyservice-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 382 / 259;
}
.keyservice-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 0 26px 26px;
}
.keyservice-num-badge {
  position: absolute;
  left: 20px;
  bottom: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #142949 0%, #3A516F 100%);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(13, 44, 108, 0.35);
}
.keyservice-body {
  padding: 44px 28px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.keyservice-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0D1B5E;
  line-height: 1.3;
  margin: 0 0 16px;
}
.keyservice-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex: 1;
}
.keyservice-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.95rem;
  color: #1F2937;
  line-height: 1.6;
  margin-bottom: 6px;
}
.keyservice-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1F2937;
}
.keyservice-icon-wrap {
  align-self: flex-end;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keyservice-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.keyservice-intro {
  font-size: 1.15rem;
  font-weight: 500;
  color: #111111;
  line-height: 1.6;
  max-width: 900px;
}

/* ---- Our Commitments (4 columns, no dividers) ---- */
.maint-commitments-section {
  padding: 50px 0 0;
  background: #ffffff;
}
.maint-commitments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}
.maint-commit-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 72px;
  border-radius: 18px 18px 0 0;
  background: transparent;
  transition: background 0.3s ease;
}
.maint-commit-card:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #DCE3FB 100%);
}
.maint-commit-icon-wrap {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.maint-commit-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.maint-commit-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0D1B5E;
  line-height: 1.3;
  margin: 0 0 12px;
}
.maint-commit-desc {
  font-size: 0.95rem;
  color: #1F2937;
  line-height: 1.6;
  margin: 0;
}
.maint-commit-note {
  margin-top: 16px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.78rem;
  color: #6B7280;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .keyservice-grid { grid-template-columns: 1fr; gap: 44px; }
  .maint-commitments-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}

@media (max-width: 640px) {
  .maint-commitments-grid { grid-template-columns: 1fr; gap: 36px; }
  .maintenance-hero-content { padding: 24px 0; }
  .maint-commit-card {
    text-align: left;
    align-items: flex-start;
    padding: 20px 16px 24px;
  }
}

/* =====================================================
   GROW (MARKETING & TECHNOLOGY) PAGE SPECIFIC STYLES
===================================================== */
.grow-hero {
  background: linear-gradient(90deg, rgba(5, 10, 25, 0.6) 0%, rgba(5, 10, 25, 0.28) 48%, rgba(5, 10, 25, 0.08) 100%),
              url('../images/grow-hero-bg.jpg') center/cover no-repeat;
}
.grow-hero-content {
  max-width: 720px;
  text-align: left;
  padding: 40px 0;
}
.grow-hero-title {
  font-size: clamp(2.3rem, 3.8vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.grow-hero-subtitle {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  max-width: 640px;
  margin: 0;
}

/* ---- Getting Attention intro (2-col paragraphs) ---- */
.grow-intro-section {
  padding: 70px 0 40px;
  background: #ffffff;
}
.grow-intro-heading {
  font-size: 1.75rem;
  font-weight: 800;
  color: #062D54;
  line-height: 1.3;
  margin: 0 0 28px;
}
.grow-intro-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.grow-intro-para {
  font-size: 1rem;
  color: #111111;
  line-height: 1.6;
  margin: 0;
}
.grow-intro-para.justify { text-align: justify; }

.grow-feature-img-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  aspect-ratio: 1199 / 562;
}
.grow-feature-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Marketing & Technology Service We Provide (3 cards) ---- */
.grow-services-section {
  padding: 70px 0 30px;
  background: #ffffff;
}
.grow-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.grow-card {
  background: linear-gradient(180deg, #ffffff 0%, #EDEEF0 100%);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.grow-card-photo-wrap {
  width: 100%;
  aspect-ratio: 382 / 259;
}
.grow-card-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grow-card-body {
  padding: 28px 26px 34px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.grow-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #062D54;
  line-height: 1.3;
  margin: 0 0 16px;
}
.grow-card-desc {
  font-size: 1rem;
  color: #1F2937;
  line-height: 1.6;
  margin: 0 0 18px;
}
.grow-card-desc strong { font-weight: 700; color: #0D1B5E; }
.grow-card-includes-label {
  font-size: 0.92rem;
  color: #1F2937;
  margin: 0 0 8px;
}
.grow-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.grow-card-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #111111;
  line-height: 1.7;
}
.grow-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #111111;
}

/* ---- Talk to Us CTA ---- */
.grow-talk-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #E7EBF0 100%);
}
.grow-talk-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.62) 0%, rgba(245, 166, 35, 0) 65%);
  filter: blur(30px);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: left 0.12s linear, top 0.12s linear, opacity 0.3s ease;
  z-index: 0;
}
.grow-talk-section.is-glow-active .grow-talk-glow { opacity: 1; }
.grow-talk-section .container {
  position: relative;
  z-index: 1;
}
.grow-talk-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}
.grow-talk-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  color: #0D1B5E;
  margin: 0 0 8px;
}
.grow-talk-sub {
  font-size: 0.95rem;
  color: #1F2937;
  margin: 0;
}
.btn-grow-talk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #F5A623;
  color: #F5A623;
  background: transparent;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 36px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.btn-grow-talk:hover { background: #F5A623; color: #111111; }

@media (max-width: 1024px) {
  .grow-intro-cols { grid-template-columns: 1fr; gap: 20px; }
  .grow-services-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .grow-talk-inner { flex-direction: column; align-items: flex-start; }
  .btn-grow-talk { width: 100%; text-align: center; }
}

/* =====================================================
   CONTACT US PAGE (page-contact.php)
===================================================== */
.contact-getintouch-section {
  padding: 64px 0 72px;
}
.contact-getintouge-grid {}
.contact-getintouch-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 64px;
  align-items: start;
}
.contact-page-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #0D2C6C;
  line-height: 1.15;
  margin-bottom: 20px;
  font-family: 'Roboto', sans-serif;
}
.contact-page-intro {
  color: #374151;
  font-size: 0.95rem;
  font-family: 'Roboto', sans-serif;
  line-height: 1.75;
  margin-bottom: 26px;
  max-width: 360px;
}
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}
.contact-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0F172A;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: 'Roboto', sans-serif;
  transition: color 0.15s ease;
}
.contact-info-row:hover { color: #062D54; }
.contact-social-icons { display: flex; gap: 12px; }
.contact-social-icons a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0D2C6C;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.contact-social-icons a:hover { background: #062D54; transform: translateY(-2px); }

/* Contact Form */
.contact-form-alert {
  display: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 18px;
}
.contact-form-alert.success { display: block; background: #DEF7EC; color: #03543F; }
.contact-form-alert.error { display: block; background: #FDE8E8; color: #9B1C1C; }

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.contact-hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact-form-group label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: 'Roboto', sans-serif;
  color: #111827;
  margin-bottom: 8px;
}
.contact-input,
.contact-select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #182FB9;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: 'Roboto', sans-serif;
  color: #111827;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-select { appearance: auto; cursor: pointer; }
.contact-input:focus,
.contact-select:focus {
  outline: none;
  border-color: #062D54;
  box-shadow: 0 0 0 3px rgba(6, 45, 84, 0.12);
}
.contact-input.field-error,
.contact-select.field-error,
.contact-textarea.field-error {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.contact-textarea {
  min-height: 190px;
  resize: vertical;
}
.contact-field-full { grid-column: 1 / -1; }
.contact-recaptcha-wrap { display: flex; }
.contact-form-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.contact-submit-btn {
  background: #0D2C6C;
  color: #fff;
  border: none;
  padding: 15px 46px;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(13, 44, 108, 0.25);
}
.contact-submit-btn:hover { background: #062D54; transform: translateY(-2px); }
.contact-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Our Offices */
.our-offices-section { padding: 10px 0 84px; }
.our-offices-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #0D2C6C;
  margin-bottom: 30px;
  font-family: 'Roboto', sans-serif;
}
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 36px;
}
.office-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: 'Roboto', sans-serif;
  color: #0D2C6C;
  margin-bottom: 8px;
}
.office-card-address {
  color: #374151;
  font-size: 0.92rem;
  font-family: 'Roboto', sans-serif;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .contact-getintouch-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-page-intro { max-width: none; }
  .office-grid { grid-template-columns: 1fr; }
  .contact-submit-btn { width: 100%; }
}

/* =====================================================
   BLOG LISTING PAGE (page-blog.php)
===================================================== */
.blog-hero {
  background: linear-gradient(90deg, rgba(10, 25, 47, 0.55) 0%, rgba(10, 25, 47, 0.18) 55%, rgba(10, 25, 47, 0.05) 100%),
              url('../images/blog-hero-bg.jpg') center/cover no-repeat;
}
.blog-hero-content { max-width: 820px; text-align: left; }
.blog-hero-title {
  font-size: clamp(2.3rem, 3.8vw, 3.25rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
  font-family: 'Roboto', sans-serif;
}

.blog-sidebar-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #0D2C6C;
  line-height: 1.2;
  margin: 0 0 22px;
  font-family: 'Roboto', sans-serif;
}

.blog-search-box {
  display: flex;
  align-items: stretch;
  margin-bottom: 24px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #D1D5DB;
}
.blog-search-box input {
  flex: 1;
  border: none;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #111827;
  outline: none;
}
.blog-search-box button {
  background: #0F172A;
  border: none;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.blog-search-box button:hover { background: #062D54; }

.blog-tag-active-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #EEF4FF;
  border: 1px solid #D0E1FD;
  color: #062D54;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.blog-tag-active-chip button {
  margin-left: auto;
  background: none;
  border: none;
  color: #062D54;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.blog-empty-state {
  padding: 60px 20px;
  text-align: center;
  color: #64748B;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px dashed #E2E8F0;
}
.blog-empty-state p { margin: 0 0 14px; }

/* Featured (Latest) Post - big single row */
.blog-featured-card {
  border: 1px solid #ECECEC;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-featured-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); }
.blog-featured-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.blog-featured-img-wrap {
  height: 220px;
  overflow: hidden;
  background: #F1F5F9;
}
.blog-featured-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-featured-body {
  padding: 20px 36px;
  display: flex;
  flex-direction: column;
}
.blog-featured-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
  margin: 0 0 10px;
}
.blog-featured-excerpt {
  font-size: 0.95rem;
  color: #4B5563;
  line-height: 1.65;
  margin: 0 0 14px;
}

/* Grid of Blog Cards (2 columns) */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 20px;
}
.blog-card {
  border: 1px solid #ECECEC;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07); }
.blog-card-link { display: block; text-decoration: none; color: inherit; padding-bottom: 20px; }
.blog-card-img-wrap {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #F1F5F9;
  margin-bottom: 16px;
}
.blog-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-img-placeholder { width: 100%; height: 100%; background: #EEF0F3; }
.blog-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 18px 8px;
  line-height: 1.35;
}
.blog-card-excerpt {
  font-size: 0.85rem;
  color: #6B7280;
  line-height: 1.6;
  margin: 0 18px 14px;
}
.blog-read-more {
  display: block;
  width: fit-content;
  margin: 0 18px 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #0F172A;
  border: 1px solid #D1D5DB;
  padding: 7px 16px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.blog-featured-body .blog-read-more {
  margin-right: 0;
}
.blog-card:hover .blog-read-more,
.blog-featured-card:hover .blog-read-more {
  background: #0D2C6C;
  border-color: #0D2C6C;
  color: #fff;
}

/* Pagination ellipsis dots (reuses .catalog-pagination / .page-num-btn / .page-nav-btn) */
.blog-page-ellipsis {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-weight: 700;
}

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-featured-img-wrap { height: 200px; }
}

/* =====================================================
   SINGLE BLOG POST PAGE (single.php)
===================================================== */
.single-blog-hero {
  width: 100%;
  aspect-ratio: 1492 / 456;
  max-height: 456px;
  overflow: hidden;
  background: #0A192F;
}
.single-blog-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.single-blog-section { padding: 56px 0 90px; }

.blog-single-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  align-items: start;
}

.blog-single-title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  color: #0D2C6C;
  line-height: 1.25;
  margin: 0 0 18px;
  font-family: 'Roboto', sans-serif;
}
.blog-single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  color: #64748B;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E5E7EB;
}
.blog-meta-item { display: inline-flex; align-items: center; gap: 8px; }

.blog-article-body {
  color: #374151;
  font-size: 0.98rem;
  line-height: 1.85;
}
.blog-article-body p { margin: 0 0 20px; }
.blog-article-body h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 36px 0 14px;
  line-height: 1.35;
}
.blog-article-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0F172A;
  margin: 28px 0 12px;
}
.blog-article-body strong { color: #111827; }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 20px; padding-left: 22px; }
.blog-article-body li { margin-bottom: 8px; }
.blog-article-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0 20px; }
.blog-article-body a { color: #062D54; text-decoration: underline; }

.blog-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid #E5E7EB;
}
.blog-tag-pill {
  display: inline-block;
  background: #F1F5F9;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.blog-tag-pill:hover { background: #0D2C6C; color: #fff; }

/* Sidebar */
.blog-sidebar-widget { margin-bottom: 40px; }
.blog-sidebar-heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 18px;
}
.blog-related-item {
  display: block;
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid #E5E7EB;
}
.blog-related-item:first-child { padding-top: 0; }
.blog-related-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 6px;
  line-height: 1.4;
}
.blog-related-excerpt {
  font-size: 0.8rem;
  color: #6B7280;
  margin: 0;
  line-height: 1.55;
}
.blog-latest-item {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 14px 0;
  border-bottom: 1px solid #F1F5F9;
}
.blog-latest-item:last-child { border-bottom: none; }
.blog-latest-img-wrap {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #F1F5F9;
}
.blog-latest-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-latest-body { flex: 1; min-width: 0; }
.blog-latest-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 4px;
  line-height: 1.35;
}
.blog-latest-excerpt {
  font-size: 0.78rem;
  color: #6B7280;
  margin: 0 0 6px;
  line-height: 1.5;
}
.blog-read-more-sm {
  display: inline-block;
  width: auto;
  font-size: 0.65rem;
  padding: 4px 10px;
  margin: 0;
}

@media (max-width: 960px) {
  .blog-single-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* =====================================================
   FAQ PAGE SPECIFIC STYLES
===================================================== */
.faq-page-section {
  background: linear-gradient(180deg, #ffffff 0%, #f2f3f6 35%, #e3e5ea 100%);
  padding: 48px 0 90px;
}
.faq-hero-title {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: #0D1B5E;
  text-align: left;
  margin: 0 0 40px;
  letter-spacing: -0.01em;
}

.faq-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  background: #F8F9FC;
  border: 1px solid #E7EAF3;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item.open {
  border-color: #062D54;
  box-shadow: 0 8px 24px rgba(6, 45, 84, 0.08);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 20px 24px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  color: #0F172A;
}
.faq-item.open .faq-question {
  color: #062D54;
}
.faq-chevron {
  flex-shrink: 0;
  color: #6B7280;
  transition: transform 0.25s ease, color 0.2s ease;
}
.faq-item.open .faq-chevron {
  color: #062D54;
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer {
  max-height: 600px;
}
.faq-answer-inner {
  padding: 0 24px 22px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #4B5563;
}
.faq-answer-inner p:first-child {
  margin-top: 0;
}
.faq-answer-inner p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .faq-question { padding: 16px 18px; font-size: 0.95rem; }
  .faq-answer-inner { padding: 0 18px 18px; }
}

/* =====================================================
   CAREERS PAGE SPECIFIC STYLES
===================================================== */
.career-hero {
  background: linear-gradient(90deg, rgba(5, 10, 40, 0.6) 0%, rgba(5, 10, 40, 0.3) 48%, rgba(5, 10, 40, 0.08) 100%),
              url('../images/career-hero-bg.jpg') center/cover no-repeat;
}
.career-hero-content {
  max-width: 780px;
  text-align: left;
  padding: 40px 0;
}
.career-hero-title {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
}

.career-intro-section {
  padding: 64px 0 40px;
  background: #ffffff;
}
.career-intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 48px;
  align-items: start;
}
.career-intro-title {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  color: #0D1B5E;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}
.career-intro-text {
  font-size: 0.98rem;
  line-height: 1.75;
  color: #4B5563;
}
.career-intro-text p:first-child {
  margin-top: 0;
}

.career-jobs-section {
  padding: 20px 0 100px;
  background: #ffffff;
}
.career-jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.career-job-card {
  display: block;
  background: #F8F9FC;
  border: 1px solid #E7EAF3;
  border-radius: 16px;
  padding: 28px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.career-job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(13, 27, 94, 0.1);
  border-color: #062D54;
}
.career-job-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 14px;
  line-height: 1.35;
}
.career-job-type {
  font-size: 0.85rem;
  font-weight: 600;
  color: #062D54;
}
.career-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 14px;
}
.career-job-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
  color: #6B7280;
}
.career-job-meta-item svg {
  flex-shrink: 0;
  color: #062D54;
}
.career-job-excerpt {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #6B7280;
  margin: 0;
}

.career-apply-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #F5A623;
  border: none;
  border-radius: 10px;
  padding: 18px 26px;
  color: #111;
  font-size: 0.92rem;
  line-height: 1.6;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.career-apply-banner svg {
  flex-shrink: 0;
  color: #111;
}
.career-apply-banner a {
  color: #111;
  text-decoration: underline;
}

/* Single Career Detail Page */
.career-detail-section {
  padding: 56px 0 100px;
  background: #ffffff;
}
.career-detail-section .container {
  max-width: 860px;
}
.career-back-link {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #062D54;
  text-decoration: none;
  margin-bottom: 24px;
}
.career-back-link:hover {
  text-decoration: underline;
}
.career-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.career-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EEF2FF;
  color: #062D54;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 600;
}
.career-badge svg {
  flex-shrink: 0;
}
.career-badge-type {
  background: #0D1B5E;
  color: #ffffff;
}
.career-detail-body {
  font-size: 0.98rem;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 36px;
}
.career-detail-body p:first-child {
  margin-top: 0;
}
.career-requirements {
  background: #F8F9FC;
  border: 1px solid #E7EAF3;
  border-radius: 14px;
  padding: 28px 30px;
  margin-bottom: 36px;
}
.career-requirements-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0D1B5E;
  margin: 0 0 16px;
}
.career-requirements-list {
  margin: 0;
  padding-left: 20px;
  color: #4B5563;
  font-size: 0.92rem;
  line-height: 1.9;
}
.career-requirements-list li {
  margin-bottom: 6px;
}

@media (max-width: 960px) {
  .career-intro-grid { grid-template-columns: 1fr; gap: 20px; }
  .career-jobs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .career-requirements { padding: 22px 20px; }
  .career-apply-banner { flex-direction: column; align-items: center; text-align: center; }
}

/* =====================================================
   12. SERVICE JOURNEY STEPPER (Design -> Build -> Equipment
       Supply -> Maintenance Service -> Expansion Service)
===================================================== */
.svc-stepper-section {
  background: #ffffff;
  padding: 32px 0 8px;
}
/* Whichever section follows the stepper on each of the 5 service pages
   (grow-intro-section, keysvc-section, keyservice-section,
   consultancy-services-section, equipment-catalog-section) normally opens
   with its own generous 60-90px top padding -- fine on its own, but
   stacked after the stepper's own bottom padding it made the gap BELOW
   the stepper read as much bigger than the gap above it. Trim just the
   top padding of that one section, only when it directly follows the
   stepper, so both gaps end up close to the same, moderate size instead
   of touching each section's padding-bottom or its padding elsewhere. */
.svc-stepper-section + section {
  padding-top: 24px;
}
.svc-stepper {
  display: flex;
  align-items: center;
}

/* Same pill-for-completed/current-steps + plain-text-for-upcoming-steps bar
   at every screen size. On a wide screen it never needs to scroll; on a
   narrow one, .svc-stepper-scroll becomes a horizontally scrollable strip
   and the fade on .svc-stepper-scroll-wrap hints that there's more to see.
   A small inline script (in endura_render_service_stepper()) scrolls the
   current step into view on load. */
.svc-stepper-scroll-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
}
.svc-stepper-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s ease;
}
/* Nothing left to reveal by scrolling further -- hide the "more content"
   hint instead of letting it sit on top of the (possibly current) last
   step. Toggled by the inline script in endura_render_service_stepper(). */
.svc-stepper-scroll-wrap.is-scroll-end::after {
  opacity: 0;
}
.svc-stepper-scroll {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.svc-stepper-scroll::-webkit-scrollbar {
  display: none;
}
/* Single flat row of steps (see endura_render_service_stepper()) instead
   of a separate "active pill" block + "upcoming text" block. Steps that
   are in-range (the real current step by default, or temporarily
   extended further by a hover preview -- see the inline script in
   endura_render_service_stepper()) share the same navy background so
   adjacent in-range items+separators read as one continuous pill; only
   the first item (always in-range) and whichever item is currently the
   range's end get rounded corners. */
/* .svc-stepper-track holds the real text items/seps (plain, no
   background of their own) PLUS one single .svc-stepper-fill overlay --
   the ONE element that actually paints the navy gradient + blue border.
   Earlier this session each item/sep had its OWN background+border,
   which looked like several small pills glued together (gradient
   restarting inside every segment, and what read as a border ring around
   each one individually) instead of a single pill that grows -- Ben
   flagged this ("border biru itu di luar stepper sih, bukan per
   stepper ... gradiennya otomatis menyambung ... bukan per stepper").
   A single overlay, resized by JS to reach the range-end item's right
   edge (see endura_render_service_stepper()'s inline script), gives one
   continuous gradient/border across however many steps are covered, and
   its own `transition: width` is what animates the hover-preview sweep
   now (no more per-item stagger-delay hack needed). z-index: -1 + an
   explicit z-index on the track (not just position: relative -- that
   alone does not establish a stacking context) keeps the fill behind the
   items' own text without sinking behind the whole page. */
.svc-stepper-track {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.svc-stepper-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: -1;
  border-radius: 6px;
  border: 3px solid #2151C5;
  background: linear-gradient(90deg, #062D54 0%, #1C459E 100%);
  transition: width 0.36s ease;
  pointer-events: none;
}
.svc-stepper-item {
  display: inline-flex;
  align-items: center;
  color: #6B7280;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 12px;
  transition: color 0.2s ease;
  scroll-margin-right: 48px; /* keep clear of the right-edge fade when scrolled into view */
}
.svc-stepper-item:first-child {
  padding-left: 20px;
}
.svc-stepper-item.is-range-end {
  padding-right: 20px;
}
.svc-stepper-item:not(.is-in-range):hover {
  color: #062D54;
}
.svc-stepper-item.is-in-range {
  color: rgba(255, 255, 255, 0.78);
}
.svc-stepper-item.is-in-range:hover {
  color: #ffffff;
}
.svc-stepper-item.is-range-end {
  color: #ffffff;
  font-weight: 700;
}
.svc-stepper-sep {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 10px 0;
}
.svc-stepper-sep-arrow,
.svc-stepper-sep-divider {
  font-size: 0.85rem;
  line-height: 1;
}
.svc-stepper-sep-arrow {
  display: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 8px;
}
.svc-stepper-sep-divider {
  display: inline-block;
  color: #D1D5DB;
  padding: 0 12px;
}
.svc-stepper-sep.is-in-range .svc-stepper-sep-arrow {
  display: inline-block;
}
.svc-stepper-sep.is-in-range .svc-stepper-sep-divider {
  display: none;
}

@media (max-width: 768px) {
  .svc-stepper-section {
    padding: 20px 0 4px;
  }
  .svc-stepper-section + section {
    padding-top: 16px;
  }
}