/* ==========================================================================
   PUROHIT PIPES INDUSTRIES — Main Stylesheet
   --------------------------------------------------------------------------
   Palette is derived from the company logo:
     • Steel grey / charcoal  (the "PUROHIT" wordmark + circular P mark)
     • Amber gold             (the "PIPES INDUSTRIES" wordmark + inner P)
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
     01. Design tokens (CSS variables)
     02. Reset & base
     03. Reusable utilities (container, section, buttons, headings)
     04. Top bar
     05. Header, navigation, dropdowns, hamburger, mobile drawer
     06. Hero slider
     07. Stats strip
     08. About
     09. Products
     10. Other services
     11. Why choose us
     12. Facility
     13. Industries
     14. Brand marquee
     15. Testimonials
     16. Direct contact CTA
     17. Footer
     18. Floating buttons
     19. Responsive breakpoints
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Brand colours ---- */
  --clr-primary:        #33383F;   /* deep steel charcoal — headings, header */
  --clr-primary-600:    #454B54;   /* lighter steel */
  --clr-primary-900:    #23272C;   /* near-black steel — dark sections */
  --clr-secondary:      #6E7278;   /* logo grey — secondary text/marks */

  --clr-accent:         #F5C242;   /* logo amber gold */
  --clr-accent-600:     #E0A91F;   /* darker gold — hover states */
  --clr-accent-soft:    #FDF3DA;   /* very light gold wash */

  /* ---- Neutrals ---- */
  --clr-body:           #545A62;
  --clr-heading:        #23272C;
  --clr-white:          #FFFFFF;
  --clr-tint:           #F6F7F9;   /* alternating section background */
  --clr-line:           #E4E7EB;

  /* ---- Typography ---- */
  --ff-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --container:   1240px;
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   22px;

  /* ---- Elevation ---- */
  --shadow-sm:  0 2px 10px rgba(35, 39, 44, .06);
  --shadow:     0 12px 30px rgba(35, 39, 44, .09);
  --shadow-lg:  0 24px 60px rgba(35, 39, 44, .16);
  --shadow-gold:0 16px 38px rgba(224, 169, 31, .32);

  /* ---- Motion ---- */
  --ease:  cubic-bezier(.4, 0, .2, 1);
  --tr:    .35s var(--ease);

  /* ---- Heights used by sticky logic ---- */
  --header-h: 84px;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Offset anchor jumps so the sticky header never covers a section title */
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-body);
  background: var(--clr-white);
  overflow-x: hidden;
}

/* Lock scroll while the mobile drawer is open */
body.no-scroll { overflow: hidden; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tr);
}

ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  color: var(--clr-heading);
  line-height: 1.25;
  font-weight: 700;
}

::selection {
  background: var(--clr-accent);
  color: var(--clr-primary-900);
}

/* Custom scrollbar (WebKit) */
::-webkit-scrollbar        { width: 10px; }
::-webkit-scrollbar-track  { background: var(--clr-tint); }
::-webkit-scrollbar-thumb  { background: var(--clr-secondary); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }


/* ==========================================================================
   03. REUSABLE UTILITIES
   ========================================================================== */

/* ---- Layout container ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---- Generic section rhythm ---- */
.section          { padding: 100px 0; position: relative; }
.section--tint    { background: var(--clr-tint); }
.section--dark    { background: var(--clr-primary-900); color: rgba(255,255,255,.72); }

/* ---- Section heading block ---- */
.section__head {
  max-width: 720px;
  margin: 0 auto 60px;
  text-align: center;
}
.section__head--sm { margin-bottom: 40px; }

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-accent-600);
  margin-bottom: 14px;
}
/* Small dash before the eyebrow label */
.section__eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--clr-accent);
}

.section__title {
  font-size: clamp(1.75rem, 3.4vw, 2.65rem);
  letter-spacing: -.01em;
  margin-bottom: 16px;
}

.section__sub { font-size: 1.02rem; }

/* Light variant used inside dark sections */
.section__head--light .section__title { color: var(--clr-white); }
.section__head--light .section__sub   { color: rgba(255,255,255,.7); }

/* ---- Accent text helper ---- */
.txt-accent { color: var(--clr-accent); }

/* ---- Buttons ---- */
.btn {
  --btn-bg: var(--clr-primary);
  --btn-fg: var(--clr-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  font-family: var(--ff-display);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid transparent;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr), border-color var(--tr);
}

/* Shine sweep that runs across the button on hover */
.btn::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -120%;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
  z-index: -1;
}
.btn:hover::before { left: 130%; }

.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn i { font-size: .9em; transition: transform var(--tr); }
.btn:hover i { transform: translateX(3px); }

.btn--primary { --btn-bg: var(--clr-primary); }
.btn--primary:hover { box-shadow: 0 14px 30px rgba(35,39,44,.28); }

.btn--accent {
  --btn-bg: var(--clr-accent);
  --btn-fg: var(--clr-primary-900);
}
.btn--accent:hover { background: var(--clr-accent-600); box-shadow: var(--shadow-gold); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--clr-white);
  border-color: rgba(255,255,255,.65);
}
.btn--outline:hover {
  background: var(--clr-white);
  color: var(--clr-primary-900);
  border-color: var(--clr-white);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--clr-primary);
  border-color: var(--clr-line);
}
.btn--ghost:hover { background: var(--clr-tint); }

.btn--lg    { padding: 16px 34px; font-size: 1rem; }
.btn--block { width: 100%; }


/* ==========================================================================
   04. TOP BAR  (non-sticky)
   ========================================================================== */
.topbar {
  background: var(--clr-primary-900);
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 46px;
  flex-wrap: wrap;
}

.topbar__greeting {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.topbar__greeting i { color: var(--clr-accent); }

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.topbar__contact li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar__contact i { color: var(--clr-accent); font-size: .82rem; }
.topbar__contact a:hover { color: var(--clr-accent); }

.topbar__social {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.topbar__social a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: .78rem;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  transition: background var(--tr), color var(--tr), transform var(--tr);
}
.topbar__social a:hover {
  background: var(--clr-accent);
  color: var(--clr-primary-900);
  transform: translateY(-2px);
}


/* ==========================================================================
   05. HEADER / NAVIGATION
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--clr-white);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow var(--tr);
  will-change: transform;
}

/* Smart-sticky states toggled from script.js */
.header.is-hidden   { transform: translateY(-115%); }
.header.is-stuck    { box-shadow: var(--shadow); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.header__logo img {
  height: 107px;
  width: auto;
  object-fit: contain;
  transition: transform var(--tr);
}
.header__logo:hover img { transform: scale(1.03); }

/* ---- Desktop nav list ---- */
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  font-family: var(--ff-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--clr-primary);
  position: relative;
}

/* Animated underline */
.nav__link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--clr-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--tr);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

.nav__link:hover,
.nav__link.is-active { color: var(--clr-accent-600); }

.nav__caret { font-size: .62rem; transition: transform var(--tr); }
.has-dropdown:hover .nav__caret { transform: rotate(180deg); }

/* Mobile-only submenu toggle button */
.nav__toggle { display: none; }

/* ---- Dropdown menus ---- */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 300px;
  padding: 10px;
  background: var(--clr-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--clr-accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--tr), transform var(--tr), visibility var(--tr);
}

.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--clr-body);
  border-radius: var(--radius-sm);
  transition: background var(--tr), color var(--tr), padding-left var(--tr);
}
.dropdown a i { font-size: .68rem; color: var(--clr-accent); }
.dropdown a:hover {
  background: var(--clr-accent-soft);
  color: var(--clr-primary-900);
  padding-left: 20px;
}

/* ---- Header right side ---- */
.header__actions { display: flex; align-items: center; gap: 14px; }

/* ---- Custom animated hamburger ---- */
.hamburger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--clr-tint);
  position: relative;
  flex-shrink: 0;
}
.hamburger span {
  position: absolute;
  left: 13px;
  width: 20px;
  height: 2px;
  background: var(--clr-primary);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s var(--ease), width .35s var(--ease);
}
.hamburger span:nth-child(1) { top: 17px; }
.hamburger span:nth-child(2) { top: 22px; width: 14px; }
.hamburger span:nth-child(3) { top: 27px; }

.hamburger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---- Mobile drawer chrome (hidden on desktop) ---- */
.nav__drawer-head,
.nav__drawer-foot { display: none; }

/* ---- Overlay behind the drawer ---- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 27, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tr), visibility var(--tr);
  z-index: 940;
}
.nav-overlay.is-visible { opacity: 1; visibility: visible; }


/* ==========================================================================
   06. HERO SLIDER
   ========================================================================== */
.hero { position: relative; background: var(--clr-primary-900); }

.heroSwiper { height: clamp(520px, 78vh, 760px); }

.hero__slide {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
}

/* Background image with a slow Ken-Burns zoom on the active slide */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 8s linear;
}
.swiper-slide-active .hero__bg { transform: scale(1); }

/* Dark gradient so the copy always stays legible */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(24,27,31,.92) 0%, rgba(24,27,31,.76) 42%, rgba(24,27,31,.35) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding-block: 40px;
  color: rgba(255,255,255,.82);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  margin-bottom: 22px;
  font-family: var(--ff-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-accent);
  background: rgba(245, 194, 66, .12);
  border: 1px solid rgba(245, 194, 66, .35);
  border-radius: 50px;
}

.hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  font-weight: 800;
  color: var(--clr-white);
  letter-spacing: -.02em;
  margin-bottom: 20px;
}

.hero__text {
  font-size: clamp(.98rem, 1.4vw, 1.12rem);
  max-width: 620px;
  margin-bottom: 34px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Text entry animation, retriggered by Swiper on each slide change ---- */
.hero__slide .hero__eyebrow,
.hero__slide .hero__title,
.hero__slide .hero__text,
.hero__slide .hero__actions {
  opacity: 0;
  transform: translateY(38px);
}
.swiper-slide-active .hero__eyebrow,
.swiper-slide-active .hero__title,
.swiper-slide-active .hero__text,
.swiper-slide-active .hero__actions {
  animation: heroIn .85s var(--ease) forwards;
}
.swiper-slide-active .hero__eyebrow { animation-delay: .18s; }
.swiper-slide-active .hero__title   { animation-delay: .34s; }
.swiper-slide-active .hero__text    { animation-delay: .5s;  }
.swiper-slide-active .hero__actions { animation-delay: .66s; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Slider arrows ---- */
.hero__nav {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--clr-white);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.hero__nav:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-primary-900);
}
.hero__nav--prev { left: 26px; }
.hero__nav--next { right: 26px; }

/* ---- Pagination bullets ---- */
.hero__pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 68px;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.hero__pagination .swiper-pagination-bullet {
  width: 26px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.45);
  opacity: 1;
  transition: width var(--tr), background var(--tr);
}
.hero__pagination .swiper-pagination-bullet-active {
  width: 46px;
  background: var(--clr-accent);
}


/* ==========================================================================
   07. STATS STRIP
   --------------------------------------------------------------------------
   The hero ends on a clean straight edge (no wave). The negative margin here
   is what floats the white stats card up over the bottom of the hero.
   ========================================================================== */
.stats { padding: 0 0 40px; margin-top: -46px; position: relative; z-index: 5; }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.stat {
  padding: 34px 22px;
  text-align: center;
  border-right: 1px solid var(--clr-line);
  transition: background var(--tr), transform var(--tr);
}
.stat:last-child { border-right: 0; }
.stat:hover { background: var(--clr-accent-soft); }

.stat__icon {
  font-size: 1.7rem;
  color: var(--clr-accent);
  margin-bottom: 12px;
  display: block;
  transition: transform var(--tr);
}
.stat:hover .stat__icon { transform: translateY(-4px) scale(1.1); }

.stat__num {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--clr-primary-900);
  line-height: 1.1;
}

.stat__label {
  font-size: .88rem;
  font-weight: 500;
  color: var(--clr-secondary);
  margin-top: 4px;
}


/* ==========================================================================
   08. ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 70px;
}

/* ---- Overlapping image composition ---- */
.about__media { position: relative; padding: 0 60px 80px 0; }

.about__img { overflow: hidden; border-radius: var(--radius-lg); }
.about__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.about__img:hover img { transform: scale(1.06); }

.about__img--main { box-shadow: var(--shadow); }

.about__img--sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  border: 8px solid var(--clr-white);
  box-shadow: var(--shadow-lg);
}
.about__img--sub img { aspect-ratio: 1 / 1; }

/* Floating years badge */
.about__badge {
  position: absolute;
  top: 26px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: var(--clr-accent);
  color: var(--clr-primary-900);
  border-radius: var(--radius);
  box-shadow: var(--shadow-gold);
}
.about__badge-num {
  font-family: var(--ff-display);
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
}
.about__badge-text {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Decorative dot grid */
.about__dots {
  position: absolute;
  left: -28px;
  bottom: 34px;
  color: rgba(245,194,66,.5);
  z-index: -1;
}

/* ---- Text column ---- */
.about__body .section__title { margin-bottom: 20px; }

.about__lead {
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--clr-primary);
  margin-bottom: 16px;
}
.about__body p { margin-bottom: 16px; }

.about__points {
  display: grid;
  gap: 18px;
  margin: 28px 0 32px;
}

.about__point {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: var(--clr-tint);
  border-left: 3px solid var(--clr-accent);
  border-radius: var(--radius-sm);
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.about__point:hover {
  transform: translateX(6px);
  background: var(--clr-white);
  box-shadow: var(--shadow);
}
.about__point > i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 1.05rem;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: 50%;
}
.about__point h4 { font-size: 1.02rem; margin-bottom: 3px; }
.about__point p  { font-size: .92rem; margin: 0; }


/* ==========================================================================
   09. PRODUCTS
   ========================================================================== */
.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.p-card {
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.p-card:hover {
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

/* ---- Media ---- */
.p-card__media {
  position: relative;
  overflow: hidden;
  background: var(--clr-tint);
}
.p-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.p-card:hover .p-card__media img { transform: scale(1.09); }

/* Gold sweep that fades in over the image */
.p-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(35,39,44,.72), transparent 62%);
  opacity: 0;
  transition: opacity var(--tr);
}
.p-card:hover .p-card__media::after { opacity: 1; }

.p-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--ff-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: 10px;
}

/* ---- Body ---- */
.p-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 24px 24px;
}

.p-card__title {
  font-size: 1.18rem;
  margin-bottom: 10px;
  transition: color var(--tr);
}
.p-card:hover .p-card__title { color: var(--clr-accent-600); }

.p-card__text {
  font-size: .93rem;
  margin-bottom: 20px;
  flex: 1;
}

.p-card__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  font-family: var(--ff-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--clr-primary);
  background: var(--clr-tint);
  border-radius: 50px;
  transition: background var(--tr), color var(--tr), gap var(--tr), box-shadow var(--tr);
}
.p-card__link:hover {
  gap: 14px;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  box-shadow: var(--shadow-gold);
}

/* ---- CTA tile ---- */
.p-card--cta {
  background: var(--clr-primary-900);
  border-color: transparent;
  color: rgba(255,255,255,.72);
  justify-content: center;
}
.p-card__cta-body { padding: 40px 30px; text-align: center; }
.p-card__cta-body > i {
  font-size: 2.1rem;
  color: var(--clr-accent);
  margin-bottom: 16px;
}
.p-card__cta-body h3 { color: var(--clr-white); font-size: 1.24rem; margin-bottom: 10px; }
.p-card__cta-body p  { font-size: .93rem; margin-bottom: 22px; }

/* ---- Auto-playing slider shell ----
   The top padding is what keeps the -10px hover lift and the card shadow from
   being clipped by Swiper's own overflow:hidden. */
.products__slider { position: relative; }

.productsSwiper {
  padding: 16px 4px 8px;
  margin: -16px -4px -8px;
}

/* Slides stretch so every card in a row ends at the same height. */
.productsSwiper .swiper-slide {
  display: flex;
  height: auto;
}
.productsSwiper .p-card { width: 100%; }

/* ---- Controls row : prev • bullets • next ---- */
.products__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 38px;
}

.products__nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: .95rem;
  color: var(--clr-primary);
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr),
              box-shadow var(--tr), transform var(--tr);
}
.products__nav:hover {
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-gold);
  transform: translateY(-3px);
}
/* Swiper adds this class itself when looping is off and an end is reached. */
.products__nav.swiper-button-disabled {
  opacity: .4;
  pointer-events: none;
}

.products__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: auto;
}
.products__pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--clr-secondary);
  opacity: .35;
  border-radius: 50%;
  transition: width var(--tr), background var(--tr), opacity var(--tr);
}
.products__pagination .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 6px;
  background: var(--clr-accent);
  opacity: 1;
}


/* ==========================================================================
   10. OTHER SERVICES
   ========================================================================== */
/* --------------------------------------------------------------------------
   Full-width service rows rather than cards. Each row is a single <a>; on
   hover a dark steel panel sweeps in from the left behind the content, the
   number and icon flip to gold, and the arrow slides into its circle.
   -------------------------------------------------------------------------- */
.svc-list {
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--clr-white);
}

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 30px 34px;
  border-bottom: 1px solid var(--clr-line);
  isolation: isolate;
}
.svc-row:last-child { border-bottom: 0; }

/* The sweeping fill. scaleX from the left edge keeps it GPU-cheap. */
.svc-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--clr-primary-900), #2C3138);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
}
.svc-row:hover::before,
.svc-row:focus-visible::before { transform: scaleX(1); }

/* ---- Leading index number ---- */
.svc-row__num {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--clr-line);
  transition: color var(--tr);
}
.svc-row:hover .svc-row__num { color: var(--clr-accent); }

/* ---- Icon tile ---- */
.svc-row__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  font-size: 1.35rem;
  color: var(--clr-primary-900);
  background: var(--clr-accent-soft);
  border-radius: 16px;
  transition: background var(--tr), transform var(--tr);
}
.svc-row:hover .svc-row__icon {
  background: var(--clr-accent);
  transform: rotate(-6deg) scale(1.05);
}

/* ---- Text ---- */
.svc-row__title {
  font-size: 1.16rem;
  margin-bottom: 5px;
  transition: color var(--tr);
}
.svc-row:hover .svc-row__title { color: var(--clr-white); }

.svc-row__text {
  font-size: .92rem;
  margin: 0;
  max-width: 62ch;
  transition: color var(--tr);
}
.svc-row:hover .svc-row__text { color: rgba(255,255,255,.7); }

/* ---- Trailing arrow ---- */
.svc-row__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: .95rem;
  color: var(--clr-primary);
  background: var(--clr-tint);
  border-radius: 50%;
  transition: background var(--tr), color var(--tr), transform var(--tr);
}
.svc-row:hover .svc-row__arrow {
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  transform: translateX(6px);
}


/* ==========================================================================
   11. WHY CHOOSE US
   ========================================================================== */
.why { overflow: hidden; }

.why__grid-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,.045);
  pointer-events: none;
}

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

.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.w-card {
  padding: 34px 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  transition: transform var(--tr), background var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.w-card:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,.07);
  border-color: rgba(245,194,66,.45);
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
}

.w-card__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  font-size: 1.4rem;
  color: var(--clr-accent);
  background: rgba(245,194,66,.12);
  border: 1px solid rgba(245,194,66,.3);
  border-radius: 50%;
  transition: background var(--tr), color var(--tr), transform var(--tr);
}
.w-card:hover .w-card__icon {
  background: var(--clr-accent);
  color: var(--clr-primary-900);
  transform: rotateY(180deg);
}

.w-card h3 {
  font-size: 1.1rem;
  color: var(--clr-white);
  margin-bottom: 10px;
}
.w-card p { font-size: .93rem; }


/* ==========================================================================
   12. IN-HOUSE FACILITY
   ========================================================================== */
.facility__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 60px;
}

.facility__text p { margin-bottom: 26px; }

.facility__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.facility__chips li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--ff-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--clr-primary);
  background: var(--clr-tint);
  border: 1px solid var(--clr-line);
  border-radius: 50px;
  transition: transform var(--tr), background var(--tr), color var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.facility__chips li i { color: var(--clr-accent-600); transition: color var(--tr); }
.facility__chips li:hover {
  transform: translateY(-4px);
  background: var(--clr-primary-900);
  color: var(--clr-white);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.facility__chips li:hover i { color: var(--clr-accent); }


/* ==========================================================================
   13. INDUSTRIES WE SERVE  —  expanding image accordion
   --------------------------------------------------------------------------
   Eight flex panels share the row. Whichever panel is "open" grows, the rest
   stay as narrow slats showing their name set vertically.

   The open state is expressed once, by this pair of selectors:

     .ind-panel:hover                          -> the panel under the cursor
     .ind-accordion:not(:hover) .ind-panel.is-open  -> the default panel,
                                                       but only while nothing
                                                       else is hovered

   That combination means the first panel sits open at rest and hands over
   cleanly the moment the visitor engages — with no JavaScript involved.
   ========================================================================== */
.industries__hint {
  display: inline-block;
  font-size: .88rem;
  font-style: italic;
  color: var(--clr-accent-600);
}

.ind-accordion {
  display: flex;
  gap: 12px;
  height: 460px;
}

.ind-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--clr-primary-900);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: flex-grow .65s var(--ease), box-shadow var(--tr);
}

/* ---- The open panel ---- */
.ind-panel:hover,
.ind-accordion:not(:hover) .ind-panel.is-open {
  flex-grow: 4.2;
  box-shadow: var(--shadow-lg);
}

/* ---- Image ---- */
.ind-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Collapsed slats are desaturated and dim so the open one clearly leads */
  filter: grayscale(1) brightness(.55);
  transform: scale(1.06);
  transition: filter .6s var(--ease), transform .9s var(--ease);
}
.ind-panel:hover .ind-panel__img,
.ind-accordion:not(:hover) .ind-panel.is-open .ind-panel__img {
  filter: grayscale(0) brightness(.78);
  transform: scale(1);
}

/* Readability veil under the text, painted over the image */
.ind-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,23,26,.92) 4%, rgba(20,23,26,.28) 55%, transparent);
  opacity: .9;
  transition: opacity var(--tr);
}

/* ---- Index number, top-left ---- */
.ind-panel__num {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  font-family: var(--ff-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--clr-accent);
}
.ind-panel:hover .ind-panel__num,
.ind-accordion:not(:hover) .ind-panel.is-open .ind-panel__num {
  left: 26px;
  right: auto;
  text-align: left;
}

/* ---- Collapsed state : vertical name ----
   writing-mode cannot be transitioned, so the collapsed and open labels are
   two separate elements that simply cross-fade. */
.ind-panel__vlabel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  z-index: 3;
  display: flex;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.02rem;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--clr-white);
  opacity: 1;
  transition: opacity .35s var(--ease);
}
.ind-panel:hover .ind-panel__vlabel,
.ind-accordion:not(:hover) .ind-panel.is-open .ind-panel__vlabel {
  opacity: 0;
  transition-duration: .2s;
}

/* ---- Open state : icon, title, one line of copy ---- */
.ind-panel__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 0 26px 28px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s var(--ease) .12s, transform .45s var(--ease) .12s;
}
.ind-panel:hover .ind-panel__body,
.ind-accordion:not(:hover) .ind-panel.is-open .ind-panel__body {
  opacity: 1;
  transform: translateY(0);
}

.ind-panel__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  font-size: 1.05rem;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: 12px;
}

.ind-panel__title {
  font-size: 1.32rem;
  color: var(--clr-white);
  margin-bottom: 8px;
  white-space: nowrap;
}

.ind-panel__text {
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  margin: 0;
  max-width: 42ch;
}


/* ==========================================================================
   14. BRAND MARQUEE
   ========================================================================== */
.brands { padding-bottom: 90px; }

.marquee {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  /* Fade the strip out at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: marqueeScroll 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  /* -50% because the track content is duplicated once by script.js */
  to   { transform: translateX(-50%); }
}

.marquee__item {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 170px;
  height: 84px;
  padding: 12px 18px;
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
}
.marquee__item img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--tr), opacity var(--tr), transform var(--tr);
}
.marquee__item:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}


/* ==========================================================================
   15. TESTIMONIALS
   ========================================================================== */
.testimonialSwiper { padding: 10px 6px 62px; }

.t-card {
  position: relative;
  height: 100%;
  padding: 34px 30px;
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.t-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

.t-card__quote {
  position: absolute;
  top: 26px;
  right: 28px;
  font-size: 2.4rem;
  color: var(--clr-accent);
  opacity: .18;
}

.t-card__stars {
  display: flex;
  gap: 4px;
  color: var(--clr-accent);
  font-size: .85rem;
  margin-bottom: 16px;
}

.t-card__text {
  font-size: .96rem;
  color: var(--clr-body);
  margin-bottom: 24px;
}

.t-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--clr-line);
}

/* Initials avatar — no fake photos required */
.t-card__avatar {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.t-card__author h4   { font-size: 1rem; }
.t-card__author span { font-size: .84rem; color: var(--clr-secondary); }

.testimonials__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.testimonials__pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--clr-secondary);
  opacity: .35;
  border-radius: 50%;
  transition: width var(--tr), background var(--tr), opacity var(--tr);
}
.testimonials__pagination .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 6px;
  background: var(--clr-accent);
  opacity: 1;
}


/* ==========================================================================
   16. DIRECT CONTACT CTA
   ========================================================================== */
.cta {
  position: relative;
  background: linear-gradient(150deg, var(--clr-primary-900) 0%, #2E343B 55%, #1D2126 100%);
  color: rgba(255,255,255,.72);
  overflow: hidden;
}

/* The section starts on a straight edge — no decorative wave. */
.cta__inner { position: relative; z-index: 1; }

.cta__head {
  max-width: 720px;
  margin: 0 auto 54px;
  text-align: center;
}
.cta__head .section__title { color: var(--clr-white); }
.cta__head .section__sub   { color: rgba(255,255,255,.7); }

.cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.c-card {
  display: flex;
  flex-direction: column;
  padding: 34px 28px;
  text-align: center;
  align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  transition: transform var(--tr), background var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.c-card:not(.c-card--static):hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,.09);
  border-color: rgba(245,194,66,.5);
  box-shadow: 0 22px 50px rgba(0,0,0,.4);
}

.c-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  font-size: 1.5rem;
  color: var(--clr-accent);
  background: rgba(245,194,66,.12);
  border: 1px solid rgba(245,194,66,.32);
  border-radius: 50%;
  transition: background var(--tr), color var(--tr), transform var(--tr);
}
.c-card:not(.c-card--static):hover .c-card__icon {
  background: var(--clr-accent);
  color: var(--clr-primary-900);
  transform: scale(1.08);
}

.c-card h3 { font-size: 1.12rem; color: var(--clr-white); margin-bottom: 8px; }
.c-card p  { font-size: .92rem; margin-bottom: 16px; flex: 1; }

.c-card__value {
  font-family: var(--ff-display);
  font-size: .9rem;
  font-weight: 600;
  color: var(--clr-accent);
  word-break: break-word;
}

/* WhatsApp card gets a green-tinted icon for instant recognition */
.c-card--whatsapp .c-card__icon {
  color: #4BD865;
  background: rgba(75,216,101,.12);
  border-color: rgba(75,216,101,.35);
}
.c-card--whatsapp:hover .c-card__icon {
  background: #25D366;
  color: var(--clr-white);
}

.c-card--static { cursor: default; }


/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.footer {
  background: #191C21;
  color: rgba(255,255,255,.62);
  font-size: .93rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  gap: 46px;
  padding: 76px 20px 56px;
}

.footer__logo {
  height: 88px;
  width: auto;
  margin-bottom: 20px;
  /* Removed filter to make the logo visible properly */
}

.footer__col--about p { margin-bottom: 22px; }

.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: .88rem;
  background: rgba(255,255,255,.07);
  border-radius: 50%;
  transition: background var(--tr), color var(--tr), transform var(--tr);
}
.footer__social a:hover {
  background: var(--clr-accent);
  color: var(--clr-primary-900);
  transform: translateY(-3px);
}

.footer__title {
  position: relative;
  font-size: 1.08rem;
  color: var(--clr-white);
  margin-bottom: 24px;
  padding-bottom: 12px;
}
.footer__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  background: var(--clr-accent);
  border-radius: 3px;
}

.footer__links li + li { margin-top: 11px; }
.footer__links a {
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color var(--tr), padding-left var(--tr);
}
.footer__links a i { font-size: .68rem; color: var(--clr-accent); }
.footer__links a:hover { color: var(--clr-accent); padding-left: 6px; }

.footer__contact li {
  display: flex;
  gap: 13px;
  margin-bottom: 16px;
  line-height: 1.6;
}
.footer__contact i {
  flex-shrink: 0;
  margin-top: 5px;
  color: var(--clr-accent);
  font-size: .9rem;
}
.footer__contact a:hover { color: var(--clr-accent); }

/* ---- Copyright bar ---- */
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
  font-size: .88rem;
}
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer__bottom a {
  color: var(--clr-accent);
  font-weight: 600;
}
.footer__bottom a:hover { text-decoration: underline; }


/* ==========================================================================
   18. FLOATING BUTTONS
   ========================================================================== */
.float-wa {
  position: fixed;
  left: 24px;
  bottom: 26px;
  z-index: 800;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 1.5rem;
  color: var(--clr-white);
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(37,211,102,.42);
  transition: transform var(--tr), box-shadow var(--tr);
}
.float-wa::after {
  /* Soft outward pulse ring */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: waPulse 2.2s ease-out infinite;
}
.float-wa:hover { transform: scale(1.1); }

@keyframes waPulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.6); opacity: 0;  }
}

.back-top {
  position: fixed;
  right: 24px;
  bottom: 26px;
  z-index: 800;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: 50%;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--tr), visibility var(--tr), transform var(--tr), background var(--tr);
}
.back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover      { background: var(--clr-accent-600); transform: translateY(-4px); }


/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */

/* ---------- ≤ 1200px : tighten nav spacing ---------- */
@media (max-width: 1200px) {
  .nav__link      { padding: 12px 10px; font-size: .9rem; }
  .header__cta    { display: none; }
  .about__grid    { gap: 46px; }
}

/* ---------- ≤ 1024px : switch to the mobile side-drawer ---------- */
@media (max-width: 1024px) {

  .section { padding: 76px 0; }

  /* ---- Top bar collapses to the essentials ---- */
  .topbar__inner    { justify-content: center; gap: 14px; padding-block: 8px; }
  .topbar__greeting { display: none; }
  .topbar__contact  { margin-left: 0; gap: 16px; flex-wrap: wrap; justify-content: center; }
  .topbar__contact li:first-child { display: none; }
  .topbar__social   { padding-left: 14px; }

  /* ---- Hamburger appears ---- */
  .hamburger { display: block; }

  /* ---- Nav becomes a sliding side drawer ---- */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 950;
    width: min(340px, 86vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--clr-white);
    box-shadow: -14px 0 44px rgba(0,0,0,.22);
    transform: translateX(105%);
    transition: transform .42s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { transform: translateX(0); }

  /* Drawer header with logo + close */
  .nav__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--clr-line);
  }
  .nav__drawer-logo { height: 36px; width: auto; }
  .nav__close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    color: var(--clr-primary);
    background: var(--clr-tint);
    border-radius: 50%;
    transition: background var(--tr), color var(--tr), transform var(--tr);
  }
  .nav__close:hover {
    background: var(--clr-accent);
    color: var(--clr-primary-900);
    transform: rotate(90deg);
  }

  /* Stacked links */
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 14px;
    flex: 1;
  }
  .nav__item { border-bottom: 1px solid var(--clr-line); }
  .nav__item:last-child { border-bottom: 0; }

  .nav__link {
    padding: 15px 10px;
    font-size: 1rem;
    justify-content: flex-start;
  }
  .nav__link::after { display: none; }
  .nav__caret       { display: none; }   /* replaced by the toggle button */

  /* Submenu toggle button on the right of the row */
  .nav__toggle {
    display: grid;
    place-items: center;
    position: absolute;
    top: 8px;
    right: 4px;
    width: 38px;
    height: 38px;
    font-size: .78rem;
    color: var(--clr-primary);
    background: var(--clr-tint);
    border-radius: 50%;
    transition: transform var(--tr), background var(--tr), color var(--tr);
  }
  .nav__toggle:hover { background: var(--clr-accent); color: var(--clr-primary-900); }
  .has-dropdown.is-open > .nav__toggle {
    transform: rotate(180deg);
    background: var(--clr-accent);
    color: var(--clr-primary-900);
  }

  /* Accordion dropdown — height is set inline by script.js for a smooth slide */
  .dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 0 8px;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    border-left: 2px solid var(--clr-accent-soft);
    border-radius: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--ease), padding-bottom .4s var(--ease);
  }
  .has-dropdown.is-open > .dropdown { padding-bottom: 10px; }

  .dropdown a { padding: 10px 12px; font-size: .88rem; }
  .dropdown a:hover { padding-left: 16px; }

  /* Drawer footer CTAs */
  .nav__drawer-foot {
    display: grid;
    gap: 10px;
    padding: 18px 20px 26px;
    border-top: 1px solid var(--clr-line);
  }

  /* ---- Section layouts stack ---- */
  .about__grid,
  .facility__inner { grid-template-columns: 1fr; gap: 46px; }

  .about__media { padding: 0 40px 60px 0; max-width: 620px; }

  /* ---- Industries accordion becomes a stacked list ----
     Touch devices have no hover, so every panel is permanently open and the
     vertical slat labels are dropped entirely. */
  .industries__hint { display: none; }

  .ind-accordion { flex-direction: column; height: auto; gap: 14px; }

  .ind-panel,
  .ind-panel:hover,
  .ind-accordion:not(:hover) .ind-panel.is-open {
    flex: none;
    height: 190px;
    box-shadow: var(--shadow-sm);
  }

  .ind-panel__img,
  .ind-panel:hover .ind-panel__img,
  .ind-accordion:not(:hover) .ind-panel.is-open .ind-panel__img {
    filter: grayscale(0) brightness(.7);
    transform: scale(1);
  }

  .ind-panel__vlabel { display: none; }

  .ind-panel__num,
  .ind-panel:hover .ind-panel__num,
  .ind-accordion:not(:hover) .ind-panel.is-open .ind-panel__num {
    top: 16px;
    left: auto;
    right: 20px;
    text-align: right;
  }

  .ind-panel__body,
  .ind-panel:hover .ind-panel__body,
  .ind-accordion:not(:hover) .ind-panel.is-open .ind-panel__body {
    opacity: 1;
    transform: none;
    padding: 0 22px 22px;
  }

  .ind-panel__icon  { width: 40px; height: 40px; margin-bottom: 10px; }
  .ind-panel__title { font-size: 1.18rem; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* ---------- ≤ 768px ---------- */
@media (max-width: 768px) {

  :root { --header-h: 70px; }

  .section { padding: 64px 0; }

  .header__logo img { height: 40px; }

  .heroSwiper       { height: clamp(480px, 82vh, 620px); }
  .hero__content    { text-align: left; }
  .hero__eyebrow    { font-size: .72rem; padding: 7px 15px; }
  .hero__text       { margin-inline: 0; }
  .hero__actions    { justify-content: flex-start; }
  .hero__nav        { display: none; }
  .hero__pagination { bottom: 54px; }

  /* Stats become a 2-column card */
  .stats            { margin-top: -30px; }
  .stats__grid      { grid-template-columns: repeat(2, 1fr); }
  .stat             { padding: 26px 14px; }
  .stat:nth-child(1),
  .stat:nth-child(2) { border-bottom: 1px solid var(--clr-line); }
  .stat:nth-child(2n) { border-right: 0; }

  /* About images stop overlapping so nothing gets cropped */
  .about__media     { padding: 0; }
  .about__img--sub  { position: static; width: 100%; margin-top: 16px; border-width: 0; }
  .about__badge     { top: 14px; right: 14px; padding: 12px 16px; }
  .about__badge-num { font-size: 1.8rem; }
  .about__dots      { display: none; }

  .cta__grid        { grid-template-columns: 1fr; }

  /* Service rows drop the number column and tuck the arrow beside the icon */
  .svc-row {
    grid-template-columns: auto 1fr;
    gap: 16px 18px;
    padding: 24px 20px;
  }
  .svc-row__num   { display: none; }
  .svc-row__icon  { width: 50px; height: 50px; font-size: 1.2rem; }
  .svc-row__title { font-size: 1.06rem; }
  .svc-row__text  { font-size: .88rem; }
  .svc-row__arrow {
    grid-column: 2;
    justify-self: start;
    width: 40px;
    height: 40px;
  }

  .marquee__track   { gap: 34px; animation-duration: 24s; }
  .marquee__item    { width: 140px; height: 72px; }

  .footer__grid     { grid-template-columns: 1fr; gap: 34px; padding: 56px 20px 40px; }
  .footer__bottom-inner { justify-content: center; text-align: center; }

  .float-wa         { width: 48px; height: 48px; font-size: 1.3rem; left: 16px; bottom: 18px; }
  .back-top         { width: 42px; height: 42px; right: 16px; bottom: 18px; }
}

/* ---------- ≤ 480px ---------- */
@media (max-width: 480px) {
  .topbar__contact  { font-size: .78rem; gap: 12px; }
  .btn              { padding: 12px 22px; font-size: .88rem; }
  .btn--lg          { padding: 14px 26px; font-size: .94rem; }
  .hero__actions    { flex-direction: column; align-items: stretch; }
  .ind-panel,
  .ind-panel:hover,
  .ind-accordion:not(:hover) .ind-panel.is-open { height: 168px; }
  .ind-panel__text  { font-size: .86rem; }
  .facility__chips li { padding: 11px 16px; font-size: .85rem; }

  /* Products slider controls tighten up on the smallest screens */
  .products__controls { gap: 14px; margin-top: 30px; }
  .products__nav      { width: 40px; height: 40px; font-size: .85rem; }
}


/* ==========================================================================
   20. INNER PAGE HERO  +  BREADCRUMB
   --------------------------------------------------------------------------
   Every page other than the home page opens on this banner. It reuses the
   hero's dark gradient language so the inner pages read as the same site,
   but sits at roughly half the height so the content starts sooner.
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  padding: 96px 0 88px;
  text-align: center;
  background: var(--clr-primary-900);
  overflow: hidden;
}

/* Slow settle of the background photo, same Ken-Burns idea as the hero */
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  animation: pageHeroZoom 14s var(--ease) forwards;
}
@keyframes pageHeroZoom { to { transform: scale(1); } }

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(140deg, rgba(20,23,26,.94) 0%, rgba(20,23,26,.78) 52%, rgba(20,23,26,.92) 100%);
}

.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px;
  margin-bottom: 18px;
  font-family: var(--ff-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-accent);
  background: rgba(245,194,66,.12);
  border: 1px solid rgba(245,194,66,.35);
  border-radius: 50px;
}

.page-hero__title {
  font-size: clamp(1.85rem, 4.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--clr-white);
  margin-bottom: 14px;
}

.page-hero__text {
  max-width: 720px;
  margin-inline: auto;
  color: rgba(255,255,255,.72);
  font-size: 1.01rem;
}

/* ---- Breadcrumb trail ---- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  font-size: .87rem;
  color: rgba(255,255,255,.62);
}
.crumb li { display: flex; align-items: center; gap: 10px; }
.crumb li + li::before {
  content: '\f054';                       /* fa-chevron-right */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .52rem;
  color: rgba(255,255,255,.38);
}
.crumb a { color: var(--clr-accent); }
.crumb a:hover { text-decoration: underline; }
.crumb [aria-current='page'] { color: var(--clr-white); font-weight: 500; }


/* ==========================================================================
   21. PRODUCT PAGE SHELL  —  sticky sidebar + content column
   ========================================================================== */
.pwrap {
  display: grid;
  /* minmax(0, 1fr) rather than a bare 1fr: a bare fr track refuses to shrink
     below its content's min-content width, so the 640px-wide data tables in the
     content column would widen the whole grid and push the page sideways
     instead of scrolling inside their own .tbl-wrap. */
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 44px;
  /* No align-items:start here. The aside has to stretch to the full height of
     the row, otherwise the sticky sidebar inside it runs out of box to travel
     in and scrolls away the moment its own content ends. */
  align-items: stretch;
}

/* The content column must be allowed to shrink for the minmax above to bite. */
.pcontent { min-width: 0; }

/* ---- Sidebar ---- */
/* Full row height is what gives the sticky inner panel somewhere to travel. */
.pside { align-self: stretch; height: 100%; }

.pside__mobile { display: none; }          /* revealed under 992px */

.pside__inner {
  position: sticky;
  top: calc(var(--header-h) + 22px);
  display: grid;
  gap: 20px;
  /* A sidebar taller than the screen would leave its lower blocks permanently
     out of reach while stuck, so past that height it scrolls on its own. */
  max-height: calc(100vh - var(--header-h) - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Room for the block shadows so the overflow box does not shave them off. */
  padding: 3px;
  margin: -3px;
  scrollbar-width: thin;
  scrollbar-color: var(--clr-line) transparent;
}
.pside__inner::-webkit-scrollbar        { width: 6px; }
.pside__inner::-webkit-scrollbar-track  { background: transparent; }
.pside__inner::-webkit-scrollbar-thumb  { background: var(--clr-line); border-radius: 50px; }
.pside__inner:hover::-webkit-scrollbar-thumb { background: #C9CED4; }

.pside__block {
  padding: 22px;
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.pside__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--clr-line);
}
.pside__heading i { color: var(--clr-accent-600); }

/* ---- Category accordion ---- */
.pside__cat { border-bottom: 1px solid var(--clr-line); }
.pside__cat:last-child { border-bottom: 0; }

.pside__cat-head { display: flex; align-items: center; gap: 6px; }

.pside__cat-link {
  flex: 1;
  padding: 13px 4px;
  font-family: var(--ff-display);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--clr-primary);
  transition: color var(--tr), padding-left var(--tr);
}
.pside__cat-link:hover { color: var(--clr-accent-600); padding-left: 7px; }

/* The category this page belongs to */
.pside__cat.is-current > .pside__cat-head .pside__cat-link { color: var(--clr-accent-600); }

.pside__toggle {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: .64rem;
  color: var(--clr-primary);
  background: var(--clr-tint);
  border-radius: 50%;
  transition: transform var(--tr), background var(--tr), color var(--tr);
}
.pside__toggle:hover { background: var(--clr-accent); color: var(--clr-primary-900); }
.pside__cat.is-open > .pside__cat-head .pside__toggle {
  transform: rotate(180deg);
  background: var(--clr-accent);
  color: var(--clr-primary-900);
}

/* Height is written inline by script.js so the transition has a target */
.pside__sub {
  max-height: 0;
  overflow: hidden;
  margin-left: 5px;
  border-left: 2px solid var(--clr-accent-soft);
  transition: max-height .45s var(--ease), padding-bottom .45s var(--ease);
}
.pside__cat.is-open > .pside__sub { padding-bottom: 10px; }

.pside__sub a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  font-size: .845rem;
  line-height: 1.45;
  color: var(--clr-body);
  border-radius: var(--radius-sm);
  transition: background var(--tr), color var(--tr), padding-left var(--tr);
}
.pside__sub a::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clr-accent);
  transition: transform var(--tr);
}
.pside__sub a:hover,
.pside__sub a.is-active {
  padding-left: 17px;
  color: var(--clr-primary-900);
  background: var(--clr-accent-soft);
}
.pside__sub a.is-active { font-weight: 600; }
.pside__sub a:hover::before { transform: scale(1.6); }

/* ---- Sidebar enquiry card ---- */
.pside__cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: rgba(255,255,255,.72);
  background: linear-gradient(150deg, var(--clr-primary-900), #2E343B);
  border-color: transparent;
}
.pside__cta > i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  font-size: 1.25rem;
  color: var(--clr-accent);
  background: rgba(245,194,66,.12);
  border: 1px solid rgba(245,194,66,.32);
  border-radius: 50%;
}
.pside__cta h3 { font-size: 1.08rem; color: var(--clr-white); margin-bottom: 8px; }
.pside__cta p  { font-size: .88rem; margin-bottom: 18px; }

/* ---- Sidebar contact strip ---- */
.pside__facts li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  font-size: .87rem;
  line-height: 1.55;
  border-bottom: 1px dashed var(--clr-line);
}
.pside__facts li:last-child { border-bottom: 0; }
.pside__facts i { flex-shrink: 0; margin-top: 4px; color: var(--clr-accent-600); }
.pside__facts a:hover { color: var(--clr-accent-600); }


/* ==========================================================================
   22. PRODUCT CONTENT BLOCKS
   ========================================================================== */

/* ---- Category intro : image + lead copy ---- */
.pintro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 40px;
  align-items: center;
}

.pintro__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pintro__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.pintro__media:hover img { transform: scale(1.06); }

.pintro__badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 20px;
  font-family: var(--ff-display);
  font-size: .84rem;
  font-weight: 700;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: 50px;
  box-shadow: var(--shadow-gold);
}

.pintro__body p { margin-bottom: 14px; }

/* ---- Bullet list with check marks ---- */
.plist { display: grid; gap: 11px; margin-top: 20px; }
.plist li {
  display: flex;
  gap: 12px;
  font-size: .94rem;
}
.plist li i {
  flex-shrink: 0;
  margin-top: 6px;
  font-size: .8rem;
  color: var(--clr-accent-600);
}
.plist li strong { color: var(--clr-heading); font-weight: 600; }

/* ---- Content block heading ---- */
.blk { margin-top: 62px; }
.blk__head { margin-bottom: 26px; }
.blk__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  margin-bottom: 8px;
}
.blk__title i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 1.02rem;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: 13px;
}
.blk__sub { font-size: .96rem; }

/* ---- One sub-product ---- */
.pitem {
  padding: 40px 0;
  border-top: 1px solid var(--clr-line);
  scroll-margin-top: calc(var(--header-h) + 26px);
}
.pitem:first-of-type { border-top: 0; padding-top: 8px; }

.pitem__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 34px;
  align-items: center;
}
/* Every second row mirrors so the page never reads as a single column of
   images. The column ratio is mirrored along with the order, so the picture
   always sits in the narrower .82fr track — otherwise alternate rows would
   render their image half again as wide as the row above. */
.pitem:nth-of-type(even) .pitem__grid  { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.pitem:nth-of-type(even) .pitem__media { order: 2; }

.pitem__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--clr-tint);
  box-shadow: var(--shadow-sm);
}
.pitem__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.pitem__media:hover img { transform: scale(1.07); }

.pitem__num {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-family: var(--ff-display);
  font-size: .84rem;
  font-weight: 700;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: 11px;
}

.pitem__title { font-size: 1.28rem; margin-bottom: 10px; }
.pitem__text  { font-size: .945rem; margin-bottom: 20px; }

/* ---- Mini specification tiles under each sub-product ---- */
.pitem__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px;
}
.pitem__spec {
  padding: 11px 15px;
  background: var(--clr-tint);
  border-left: 3px solid var(--clr-accent);
  border-radius: var(--radius-sm);
  transition: transform var(--tr), background var(--tr), box-shadow var(--tr);
}
.pitem__spec:hover {
  transform: translateY(-3px);
  background: var(--clr-white);
  box-shadow: var(--shadow-sm);
}
.pitem__spec dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--clr-secondary);
  margin-bottom: 3px;
}
.pitem__spec dd {
  font-family: var(--ff-display);
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--clr-heading);
}


/* ==========================================================================
   23. DATA TABLES  —  grades, chemistry, mechanical properties
   --------------------------------------------------------------------------
   The wrapper is the scroll container so a wide table never forces the whole
   page to scroll sideways on a phone.
   ========================================================================== */
.tbl-wrap {
  overflow-x: auto;
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.tbl {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .9rem;
}
.tbl thead th {
  padding: 15px 18px;
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--clr-white);
  background: var(--clr-primary-900);
}
.tbl tbody td {
  padding: 13px 18px;
  white-space: nowrap;
  border-top: 1px solid var(--clr-line);
  transition: background var(--tr);
}
.tbl tbody tr:nth-child(even) { background: var(--clr-tint); }
.tbl tbody tr:hover           { background: var(--clr-accent-soft); }
.tbl tbody td:first-child {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--clr-heading);
}

.tbl-note {
  margin-top: 13px;
  font-size: .84rem;
  font-style: italic;
  color: var(--clr-secondary);
}

/* Hint that a table scrolls, shown only on touch-width screens */
.tbl-scroll-hint { display: none; }


/* ==========================================================================
   24. SHARED CONTENT COMPONENTS
   (light feature cards, chips, applications, steps, FAQ, inner CTA)
   ========================================================================== */

/* ---- Light feature card ---- */
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.fcard {
  padding: 30px 26px;
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.fcard:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.fcard__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  font-size: 1.28rem;
  color: var(--clr-primary-900);
  background: var(--clr-accent-soft);
  border-radius: 16px;
  transition: background var(--tr), transform var(--tr);
}
.fcard:hover .fcard__icon { background: var(--clr-accent); transform: rotate(-8deg); }
.fcard h3 { font-size: 1.1rem; margin-bottom: 9px; }
.fcard p  { font-size: .93rem; }

/* ---- Grade / standard chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 9px 17px;
  font-family: var(--ff-display);
  font-size: .84rem;
  font-weight: 600;
  color: var(--clr-primary);
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: 50px;
  transition: transform var(--tr), background var(--tr), color var(--tr),
              border-color var(--tr), box-shadow var(--tr);
}
.chip:hover {
  transform: translateY(-3px);
  color: var(--clr-white);
  background: var(--clr-primary-900);
  border-color: transparent;
  box-shadow: var(--shadow);
}
/* On tinted backgrounds the chips need their own contrast */
.section--tint .chip { background: var(--clr-white); }

/* ---- Applications ---- */
.apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.app {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.app:hover { transform: translateY(-5px); border-color: transparent; box-shadow: var(--shadow); }
.app i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 1rem;
  color: var(--clr-accent-600);
  background: var(--clr-accent-soft);
  border-radius: 50%;
  transition: background var(--tr), color var(--tr), transform var(--tr);
}
.app:hover i { color: var(--clr-primary-900); background: var(--clr-accent); transform: rotate(-8deg); }
.app span {
  font-family: var(--ff-display);
  font-size: .91rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--clr-heading);
}

/* ---- Numbered process steps ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 24px;
  padding-top: 20px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 30px 24px 26px;
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -20px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--ff-display);
  font-size: .94rem;
  font-weight: 800;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: 14px;
  box-shadow: var(--shadow-gold);
  transition: transform var(--tr);
}
.step:hover { transform: translateY(-8px); border-color: transparent; box-shadow: var(--shadow); }
.step:hover::before { transform: rotate(-8deg); }
.step h3 { font-size: 1.06rem; margin: 12px 0 8px; }
.step p  { font-size: .92rem; }

/* ---- FAQ accordion ---- */
.faq { display: grid; gap: 14px; }
.faq__item {
  overflow: hidden;
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  transition: box-shadow var(--tr), border-color var(--tr);
}
.faq__item.is-open { border-color: transparent; box-shadow: var(--shadow); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 22px;
  text-align: left;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-heading);
  transition: color var(--tr);
}
.faq__q:hover { color: var(--clr-accent-600); }
.faq__q i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: .68rem;
  color: var(--clr-primary);
  background: var(--clr-tint);
  border-radius: 50%;
  transition: transform var(--tr), background var(--tr), color var(--tr);
}
.faq__item.is-open .faq__q i {
  transform: rotate(180deg);
  background: var(--clr-accent);
  color: var(--clr-primary-900);
}

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease);
}
.faq__a p { padding: 0 22px 20px; margin: 0; font-size: .94rem; }

/* ---- Inner page CTA banner ---- */
.inner-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin-top: 62px;
  padding: 40px 42px;
  overflow: hidden;
  color: rgba(255,255,255,.74);
  background: linear-gradient(120deg, var(--clr-primary-900), #2E343B 65%, #23272C);
  border-radius: var(--radius-lg);
}
/* Faint gold glow bottom-right so the panel is not a flat rectangle */
.inner-cta::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,194,66,.22), transparent 68%);
  pointer-events: none;
}
.inner-cta__body { position: relative; z-index: 1; max-width: 620px; }
.inner-cta h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--clr-white); margin-bottom: 8px; }
.inner-cta p  { font-size: .95rem; margin: 0; }
.inner-cta__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Split media / text row, reused across the service & about pages ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}
.split--wide-text { grid-template-columns: 1fr 1.15fr; }
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.split__media:hover img { transform: scale(1.05); }
.split--flip .split__media { order: 2; }

/* Small stat tile floating on a split image */
.split__tile {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-gold);
}
.split__tile strong { font-family: var(--ff-display); font-size: 1.8rem; line-height: 1; }
.split__tile span   { font-size: .78rem; font-weight: 600; line-height: 1.3; }


/* ==========================================================================
   25. ABOUT PAGE  —  milestone timeline
   ========================================================================== */
.tline { position: relative; padding-left: 36px; }
.tline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--clr-accent), var(--clr-line));
}
.tline__item { position: relative; padding-bottom: 32px; }
.tline__item:last-child { padding-bottom: 0; }
.tline__item::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 5px;
  width: 20px;
  height: 20px;
  background: var(--clr-white);
  border: 3px solid var(--clr-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(245,194,66,.18);
  transition: transform var(--tr);
}
.tline__item:hover::before { transform: scale(1.18); }
.tline__year {
  font-family: var(--ff-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--clr-accent-600);
}
.tline__item h3 { font-size: 1.08rem; margin: 4px 0 6px; }
.tline__item p  { font-size: .93rem; margin: 0; }


/* ==========================================================================
   26. GALLERY PAGE  —  filter, masonry grid, lightbox
   ========================================================================== */
.gal-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.gal-filter button {
  padding: 10px 22px;
  font-family: var(--ff-display);
  font-size: .87rem;
  font-weight: 600;
  color: var(--clr-primary);
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: 50px;
  transition: transform var(--tr), background var(--tr), color var(--tr),
              border-color var(--tr), box-shadow var(--tr);
}
.gal-filter button:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.gal-filter button.is-active {
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-gold);
}

/* CSS multi-column masonry — no JS layout pass, so it never jumps on load */
.gal-grid { columns: 3; column-gap: 20px; }

.gal-item {
  position: relative;
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 20px;
  overflow: hidden;
  cursor: zoom-in;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  animation: galIn .5s var(--ease) both;
}
.gal-item.is-hidden { display: none; }
@keyframes galIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.gal-item img {
  width: 100%;
  display: block;
  transition: transform .7s var(--ease);
}
.gal-item:hover img { transform: scale(1.07); }

.gal-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  opacity: 0;
  background: linear-gradient(to top, rgba(20,23,26,.9), transparent 62%);
  transition: opacity var(--tr);
}
.gal-item:hover .gal-item__overlay { opacity: 1; }

.gal-item__cap {
  font-family: var(--ff-display);
  font-size: .94rem;
  font-weight: 600;
  color: var(--clr-white);
  transform: translateY(12px);
  transition: transform var(--tr);
}
.gal-item:hover .gal-item__cap { transform: none; }

.gal-item__tag {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: 4px;
}

.gal-item__zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--tr), transform var(--tr);
}
.gal-item:hover .gal-item__zoom { opacity: 1; transform: none; }

.gal-empty {
  display: none;
  padding: 50px 0;
  text-align: center;
  color: var(--clr-secondary);
}

/* ---- Lightbox ---- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 30px;
  background: rgba(12,14,17,.95);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.lb.is-open { opacity: 1; visibility: visible; }

.lb__figure { margin: 0; text-align: center; }
.lb__img {
  max-width: min(1080px, 92vw);
  max-height: 78vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: lbIn .4s var(--ease);
}
@keyframes lbIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.lb__cap {
  margin-top: 16px;
  font-size: .93rem;
  color: rgba(255,255,255,.78);
}

.lb__close,
.lb__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--clr-white);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.lb__close:hover,
.lb__nav:hover {
  color: var(--clr-primary-900);
  background: var(--clr-accent);
  border-color: var(--clr-accent);
}
.lb__close    { top: 24px; right: 24px; font-size: 1.1rem; }
.lb__nav      { top: 50%; transform: translateY(-50%); }
.lb__nav--prev{ left: 24px; }
.lb__nav--next{ right: 24px; }

.lb__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
  font-size: .85rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.6);
}


/* ==========================================================================
   27. CONTACT PAGE  —  info cards, direct contact actions, map
   --------------------------------------------------------------------------
   There is no enquiry form here: the brief asks for direct WhatsApp, phone and
   email contact instead, so the page runs as one centred column throughout.
   ========================================================================== */

/* Auto-fitting card grid — three across on a desktop, two on a tablet, one on
   a phone, with no breakpoint of its own. Grid items stretch by default, so
   every card on a row finishes the same height however much text it holds. */
.info-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.info-item {
  display: flex;
  gap: 18px;
  padding: 24px;
  background: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
/* Lifts rather than slides sideways — these are tiles in a grid now, not rows */
.info-item:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow); }
.info-item > i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  font-size: 1.1rem;
  color: var(--clr-primary-900);
  background: var(--clr-accent-soft);
  border-radius: 14px;
  transition: background var(--tr), transform var(--tr);
}
.info-item:hover > i { background: var(--clr-accent); transform: rotate(-8deg); }
.info-item h3 { font-size: 1.02rem; margin-bottom: 4px; }
.info-item p, .info-item a { font-size: .93rem; line-height: 1.6; display: block; }
.info-item a:hover { color: var(--clr-accent-600); }

/* ---- Direct contact buttons, centred under the cards ---- */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

/* ---- Map embed ---- */
.map {
  overflow: hidden;
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.map iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
  filter: grayscale(.2);
  transition: filter var(--tr);
}
.map:hover iframe { filter: none; }


/* ==========================================================================
   28. INNER-PAGE RESPONSIVE
   ========================================================================== */

/* ---------- ≤ 1200px ---------- */
@media (max-width: 1200px) {
  .pwrap { grid-template-columns: 290px minmax(0, 1fr); gap: 34px; }
}

/* ---------- ≤ 991px : sidebar becomes a collapsible panel ---------- */
@media (max-width: 991px) {

  /* minmax(0, 1fr) again — on one column the wide tables would otherwise force
     the page to scroll sideways instead of scrolling inside .tbl-wrap. */
  .pwrap { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* Toggle button that opens the whole sidebar */
  .pside__mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 16px 22px;
    margin-bottom: 20px;
    font-family: var(--ff-display);
    font-size: .96rem;
    font-weight: 600;
    color: var(--clr-white);
    background: var(--clr-primary-900);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .pside__mobile > span { display: flex; align-items: center; gap: 11px; }
  .pside__mobile .fa-chevron-down { color: var(--clr-accent); transition: transform var(--tr); }
  .pside.is-open .pside__mobile .fa-chevron-down { transform: rotate(180deg); }

  .pside__inner {
    position: static;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease), margin-bottom .5s var(--ease);
  }
  .pside.is-open .pside__inner { max-height: 2600px; margin-bottom: 44px; }

  .pintro,
  .split,
  .split--wide-text { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .split--flip .split__media { order: 0; }

  /* Stack every sub-product; the mirrored desktop ratio is reset here too,
     since its selector outranks the plain .pitem__grid rule. */
  .pitem__grid,
  .pitem:nth-of-type(even) .pitem__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pitem:nth-of-type(even) .pitem__media { order: 0; }

  .tbl-scroll-hint {
    display: block;
    margin-bottom: 10px;
    font-size: .8rem;
    font-style: italic;
    color: var(--clr-secondary);
  }

  .gal-grid { columns: 2; }
}

/* ---------- ≤ 768px ---------- */
@media (max-width: 768px) {
  .page-hero        { padding: 66px 0 60px; }
  .page-hero__text  { font-size: .95rem; }

  .blk              { margin-top: 46px; }
  .blk__title i     { width: 38px; height: 38px; font-size: .9rem; }

  .inner-cta        { margin-top: 46px; padding: 30px 24px; }
  .inner-cta__actions .btn { flex: 1 1 auto; }

  .contact-actions  { margin-top: 30px; }
  .contact-actions .btn { flex: 1 1 auto; }

  .map iframe       { height: 320px; }

  .tline            { padding-left: 30px; }
  .tline__item::before { left: -29px; width: 17px; height: 17px; }

  .lb               { padding: 16px; }
  .lb__close        { top: 14px; right: 14px; width: 42px; height: 42px; }
  .lb__nav          { width: 40px; height: 40px; }
  .lb__nav--prev    { left: 10px; }
  .lb__nav--next    { right: 10px; }
  .lb__img          { max-height: 68vh; }
}

/* ---------- ≤ 560px ---------- */
@media (max-width: 560px) {
  .gal-grid         { columns: 1; }
  .gal-filter button{ padding: 9px 17px; font-size: .82rem; }
  .pitem            { padding: 30px 0; }
  .pitem__title     { font-size: 1.14rem; }
  .pintro__badge    { left: 12px; bottom: 12px; padding: 8px 15px; font-size: .78rem; }
}


/* ==========================================================================
   ACCESSIBILITY — honour reduced-motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; }
}