/* =====================================================================
   ZAYNO GREEN ENERGY SOLUTION PVT. LTD.
   Palette taken from the logo: deep forest green, leaf green, and gold
   used sparingly as an accent (the logo's gold lettering), never as a
   surface colour. The site reads as green.
   ===================================================================== */

:root {
  /* Greens — the brand */
  --forest-900: #0B3D2C;
  --forest-800: #0F4A34;
  --forest-700: #16603F;
  --green-600:  #1E7A4B;
  --green-500:  #2E9455;
  --leaf-500:   #62B33B;
  --leaf-400:   #7DC242;
  --leaf-300:   #A3D468;
  --mint-100:   #E8F5EA;
  --mint-50:    #F4FAF5;

  /* Gold — accent only: rules, small icons, hover underlines */
  --gold-500:   #C9A227;
  --gold-300:   #E3C765;

  /* Neutrals */
  --ink-900:    #10201A;
  --ink-700:    #35463F;
  --ink-500:    #6B7C75;
  --ink-300:    #AFBAB5;
  --line:       #DFE7E2;
  --white:      #FFFFFF;

  --radius:     14px;
  --radius-sm:  10px;
  --shadow-sm:  0 1px 3px rgba(11, 61, 44, .07);
  --shadow-md:  0 6px 22px rgba(11, 61, 44, .09);
  --shadow-lg:  0 18px 48px rgba(11, 61, 44, .14);

  --header-h:   84px;
  --ease:       cubic-bezier(.4, 0, .2, 1);
}

/* ----- Base ---------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  color: var(--forest-900);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--leaf-500); }

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

.container-zy {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Skip link — keyboard users land here first */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--forest-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Visible focus ring everywhere — never remove it */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--leaf-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----- Section scaffolding ------------------------------------------- */
.section { padding: clamp(64px, 8vw, 104px) 0; }
.section--tint { background: var(--mint-50); }

/* A single row of cards (the counters) doesn't need a full section's height —
   it is a strip, not a section. Padding stays symmetrical, just tighter. */
.section--strip { padding: clamp(44px, 5vw, 68px) 0; }
.section--deep {
  background: linear-gradient(135deg, var(--forest-900) 0%, var(--forest-700) 55%, var(--green-600) 100%);
  color: rgba(255, 255, 255, .88);
}
.section--deep h2,
.section--deep h3 { color: #fff; }

.section-head { max-width: 720px; margin: 0 auto clamp(38px, 5vw, 58px); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}
.section--deep .eyebrow { color: var(--leaf-300); }

.section-head p { color: var(--ink-500); font-size: 1.06rem; }
.section--deep .section-head p { color: rgba(255, 255, 255, .78); }

/* ----- Buttons -------------------------------------------------------- */
.btn-zy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}
.btn-zy:hover { transform: translateY(-2px); }
.btn-zy:active { transform: translateY(0); }

.btn-primary-zy {
  background: var(--green-600);
  color: #fff;
  box-shadow: 0 6px 18px rgba(30, 122, 75, .28);
}
.btn-primary-zy:hover {
  background: var(--forest-700);
  color: #fff;
  box-shadow: 0 10px 26px rgba(30, 122, 75, .36);
}

.btn-outline-zy {
  background: transparent;
  color: var(--forest-800);
  border-color: var(--line);
}
.btn-outline-zy:hover {
  background: var(--forest-800);
  border-color: var(--forest-800);
  color: #fff;
}

.btn-light-zy {
  background: #fff;
  color: var(--forest-800);
}
.btn-light-zy:hover { background: var(--mint-100); color: var(--forest-900); }

.btn-ghost-zy {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn-ghost-zy:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1DA851; color: #fff; }

/* =====================================================================
   HEADER
   ===================================================================== */
.topbar {
  background: var(--forest-900);
  color: rgba(255, 255, 255, .82);
  font-size: .84rem;
  padding: 8px 0;
}
.topbar a { color: rgba(255, 255, 255, .82); }
.topbar a:hover { color: var(--leaf-300); }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar-contact { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-contact span,
.topbar-contact a { display: inline-flex; align-items: center; gap: 7px; }
.topbar-social { display: flex; gap: 14px; }
.topbar-social a:hover { color: var(--gold-300); }

.site-header {
  position: sticky;
  top: 0;
  /* MUST stay above .nav-backdrop (1100).
     z-index on a positioned element creates a stacking context, and the mobile
     drawer lives INSIDE this header — so the drawer's own z-index only competes
     within the header, it cannot escape it. At the old value of 1000 the
     backdrop (1100) therefore painted over the entire header, drawer and all,
     which made the solid white menu look like a translucent green panel.
     Raise this and the whole pair goes together. */
  z-index: 1200;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}

/* CAREFUL: backdrop-filter turns an element into a containing block for its
   position:fixed descendants. The mobile drawer is a fixed element INSIDE this
   header, so a blur here pins the drawer to the 84px header box instead of the
   viewport — the menu opens as a stub and most of it is unreachable.
   The blur is therefore applied only at desktop widths, where no drawer exists. */
@media (min-width: 1041px) {
  .site-header {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
  }
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

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

/* Logo only — no text beside it, so it carries the header alone and is sized up. */
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 68px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .06em;
  color: var(--forest-900);
}
.brand-sub {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-600);
  font-weight: 600;
}

/* --- Desktop nav --- */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .93rem;
  color: var(--ink-700);
  white-space: nowrap;
}
.nav-link:hover,
.nav-item.is-open > .nav-link { color: var(--forest-900); background: var(--mint-100); }
.nav-link.is-active { color: var(--green-600); }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
}
.nav-caret { font-size: .7rem; transition: transform .25s var(--ease); }
.nav-item.is-open .nav-caret { transform: rotate(180deg); }

/* --- Dropdown (Telecom Services / Logistics) --- */
.dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 306px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  list-style: none;
  margin: 0;
}
.nav-item.is-open .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Gold hairline at the top of the panel — the one gold flourish up here */
.dropdown-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--leaf-400));
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: .91rem;
  font-weight: 500;
  transition: background-color .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease);
}
.dropdown-link i { color: var(--leaf-500); font-size: 1.02rem; flex-shrink: 0; }
.dropdown-link:hover {
  background: var(--mint-50);
  color: var(--forest-900);
  padding-left: 16px;
}
.dropdown-link:hover i { color: var(--green-600); }

.dropdown-all {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.dropdown-all .dropdown-link { color: var(--green-600); font-weight: 600; }

/* ---------------------------------------------------------------------
   "Our Services" dropdown — the two verticals, and nothing under them.

   It lists CATEGORIES only. The individual services are not repeated here;
   they live on the category pages. So this is a short, narrow panel, not a
   wide mega menu.
   --------------------------------------------------------------------- */
.mega-panel {
  min-width: 320px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 12px;
}

.mega-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  background: var(--mint-50);
  transition: background-color .18s var(--ease);
}
.mega-head:hover { background: var(--mint-100); }
.mega-head i {
  font-size: 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, var(--green-600), var(--leaf-500));
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mega-head span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.mega-head strong { color: var(--forest-900); font-size: .95rem; }
.mega-head small { color: var(--ink-500); font-size: .76rem; }

.mega-foot {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.mega-foot .dropdown-link { color: var(--green-600); font-weight: 600; justify-content: center; }

.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* --- Burger --- */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--forest-900);
  font-size: 1.35rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* =====================================================================
   HERO — full-bleed imagery, no text overlay (by client requirement)
   ===================================================================== */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--forest-900);
}
/* SELF-SIZING HERO — no hard-coded aspect ratio anywhere.

   The slides are stacked in a single grid cell rather than absolutely
   positioned, which is what lets the banner have a height at all: an
   absolutely-positioned child contributes nothing to its parent's height, so
   the old markup NEEDED a fixed aspect-ratio and that ratio is exactly what
   was cropping the photos.

   The first slide's image is left at its natural height and therefore sets the
   height of the cell. The rest fill that cell. So the banner is as tall as the
   picture actually is — upload an image of any shape and the hero simply
   becomes that shape, at every screen width, with no ratio to keep in sync. */
.hero-track {
  display: grid;
  width: 100%;
}

.hero-slide {
  grid-area: 1 / 1;         /* stack, don't flow */
  opacity: 0;
  transition: opacity 1s var(--ease);
  min-width: 0;
}
.hero-slide.is-active { opacity: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* The first image is the sizer: natural height, so the grid row is exactly as
   tall as this photo renders at the current width. Every other slide then
   matches it. Slides of a near-identical ratio (ours are 1.92 and 1.88) lose
   about 2% — visually nothing — and a wildly different one is contained to
   this height rather than stretching the layout. */
.hero-slide:first-child img { height: auto; }

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
  z-index: 3;
}
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: width .3s var(--ease), background-color .3s var(--ease);
}
.hero-dot.is-active { width: 30px; background: #fff; }

/* =====================================================================
   PAGE BANNER (inner pages)
   ===================================================================== */
.page-banner {
  background: linear-gradient(135deg, var(--forest-900) 0%, var(--forest-700) 60%, var(--green-600) 100%);
  color: #fff;
  padding: clamp(52px, 7vw, 84px) 0;
  position: relative;
  overflow: hidden;
}
/* Soft leaf-shaped glow, echoing the logo mark */
.page-banner::after {
  content: '';
  position: absolute;
  right: -90px;
  top: -90px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(125, 194, 66, .3) 0%, transparent 70%);
  border-radius: 50%;
}
.page-banner h1 { color: #fff; margin-bottom: 10px; position: relative; z-index: 1; }
.page-banner p { color: rgba(255, 255, 255, .8); margin: 0; position: relative; z-index: 1; }

.crumbs {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: .86rem;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, .62);
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.crumbs a { color: rgba(255, 255, 255, .82); }
.crumbs a:hover { color: var(--leaf-300); }

/* =====================================================================
   INTRO / ABOUT SPLIT
   ===================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.check-list { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 12px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-weight: 500;
  color: var(--ink-700);
}
.check-list i { color: var(--leaf-500); font-size: 1.15rem; flex-shrink: 0; margin-top: 2px; }

/* Decorative image stack for the intro */
.intro-visual { position: relative; }
.intro-visual img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.intro-visual::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--leaf-400);
  border-radius: var(--radius);
  z-index: -1;
}

/* Logo variant: the mark is contained on a soft green plate, never cropped.
   The offset leaf-green outline still frames it, so it reads as a designed
   element rather than a logo dumped into a box. */
.intro-visual--logo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 30% 25%, rgba(125, 194, 66, .16), transparent 55%),
    linear-gradient(150deg, var(--mint-100), var(--mint-50) 60%, #fff);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.intro-visual--logo img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;      /* let the logo keep its own proportions */
  object-fit: contain;     /* contain, never cover — do not crop the mark */
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply; /* the logo's near-white backing melts into the plate */
}

/* =====================================================================
   CATEGORY FLIP CARDS (the two verticals)

   Front = the pitch. Back = the full service list.
   Flips on hover, on tap (.is-flipped), and on keyboard focus.

   Only the face pointing at the viewer is `visible`, so links on the hidden
   face cannot be tabbed to — backface-visibility alone does NOT remove an
   element from the focus order, which is the classic flip-card a11y trap.
   ===================================================================== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
}

.flip-card {
  perspective: 1600px;
  display: flex;
}

.flip-inner {
  /* Both faces stack in ONE grid cell, so the card's height is simply the
     height of its TALLER face. No fixed height, so nothing is ever clipped —
     and Telecom (10 services) can be taller than Logistics (6) without either
     being squeezed into a shared magic number. */
  display: grid;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .75s var(--ease);
}
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }

.flip-face {
  grid-area: 1 / 1;              /* stack, don't sit side by side */
  position: relative;            /* anchor for the back's close button */
  display: flex;
  flex-direction: column;
  padding: 34px;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Swap visibility at the half-way point of the flip, not at the start. */
  transition: visibility 0s linear .38s;
}

/* --- Front --- */
.flip-front {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: visibility 0s linear .38s, box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.flip-card:hover .flip-front {
  box-shadow: var(--shadow-md);
  border-color: var(--leaf-400);
}
.flip-card.is-flipped .flip-front { visibility: hidden; }

.cat-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  color: #fff;
  background: linear-gradient(135deg, var(--green-600), var(--leaf-500));
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(30, 122, 75, .26);
  flex-shrink: 0;
}

.flip-front h3 { margin-bottom: 8px; }
.cat-tagline { color: var(--green-600); font-weight: 600; font-size: .9rem; margin-bottom: 14px; }
.flip-front p { color: var(--ink-500); font-size: .95rem; }

/* The affordance: tells you there is a back, and flips the card when pressed. */
.flip-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--mint-50);
  color: var(--forest-800);
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.flip-btn i { transition: transform .5s var(--ease); }
.flip-btn:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}
.flip-btn:hover i { transform: rotate(180deg); }

/* --- Back --- */
.flip-back {
  transform: rotateY(180deg);
  visibility: hidden;
  background: linear-gradient(150deg, var(--forest-900) 0%, var(--forest-700) 55%, var(--green-600) 100%);
  color: rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-lg);
}
.flip-card.is-flipped .flip-back { visibility: visible; }

/* "Back" control on the reverse face — the only way to return, now that
   hover no longer drives the flip. */
.flip-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .2s var(--ease);
}
.flip-close:hover { background: rgba(255, 255, 255, .25); }

.flip-back h3 {
  color: #fff;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  position: relative;
  flex-shrink: 0;
}
/* The one gold flourish on the back, echoing the logo lettering */
.flip-back h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 46px;
  height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}

.flip-services {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  flex-grow: 1;
  align-content: start;
}
.flip-services a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .85);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.flip-services a i { color: var(--leaf-300); font-size: .95rem; flex-shrink: 0; }
.flip-services a:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.flip-all {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--forest-900);
  font-weight: 600;
  font-size: .89rem;
  flex-shrink: 0;
}
.flip-all i { transition: transform .22s var(--ease); }
.flip-all:hover { background: var(--mint-100); color: var(--forest-900); }
.flip-all:hover i { transform: translateX(4px); }

/* Single column on narrow screens — 10 service names will not fit side by side. */
@media (max-width: 420px) {
  .flip-services { grid-template-columns: 1fr; }
  .flip-face { padding: 26px; }
}

/* Reduced motion: no 3D spin. The card still turns over, just instantly. */
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
}

/* =====================================================================
   SERVICE CARDS
   ===================================================================== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.svc-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--leaf-400);
}

.svc-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--green-600);
  background: var(--mint-100);
  margin-bottom: 18px;
  transition: background-color .26s var(--ease), color .26s var(--ease);
}
.svc-card:hover .svc-icon {
  background: linear-gradient(135deg, var(--green-600), var(--leaf-500));
  color: #fff;
}

.svc-card h3 { font-size: 1.13rem; margin-bottom: 9px; }
.svc-card p { color: var(--ink-500); font-size: .92rem; flex-grow: 1; margin-bottom: 18px; }

.svc-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .89rem;
  color: var(--green-600);
}
.svc-more i { transition: transform .22s var(--ease); }
.svc-card:hover .svc-more i { transform: translateX(4px); }

.svc-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--green-600);
  background: var(--mint-100);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  align-self: flex-start;
}

/* =====================================================================
   FEATURES ("why choose us")
   ===================================================================== */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}
.feat-card {
  display: flex;
  gap: 18px;
  padding: 26px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  transition: background-color .26s var(--ease), transform .26s var(--ease);
}
.feat-card:hover { background: rgba(255, 255, 255, .12); transform: translateY(-4px); }
.feat-card i {
  font-size: 1.6rem;
  color: var(--leaf-300);
  flex-shrink: 0;
  line-height: 1.4;
}
.feat-card h3 { font-size: 1.06rem; margin-bottom: 7px; }
.feat-card p { font-size: .9rem; color: rgba(255, 255, 255, .74); margin: 0; }

/* =====================================================================
   STATS
   ===================================================================== */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px;
  align-items: stretch;          /* every card the same height as the tallest */
}
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;       /* icon/number/label centred as one block */
  text-align: center;
  padding: 30px 20px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--leaf-400);
}
.stat-card i { font-size: 1.7rem; color: var(--leaf-500); margin-bottom: 10px; display: block; }
.stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  color: var(--forest-900);
  line-height: 1;
}
.stat-label {
  font-size: .87rem;
  color: var(--ink-500);
  margin-top: 8px;
  font-weight: 500;
}

/* =====================================================================
   CTA BAND
   ===================================================================== */
.cta-band {
  background: linear-gradient(120deg, var(--forest-900), var(--green-600));
  border-radius: var(--radius);
  padding: clamp(38px, 5vw, 58px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(125, 194, 66, .32), transparent 70%);
  border-radius: 50%;
}
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: rgba(255, 255, 255, .8); margin: 0; max-width: 560px; }
.cta-band > * { position: relative; z-index: 1; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* =====================================================================
   SERVICE DETAIL
   ===================================================================== */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 46px;
  align-items: start;
}
@media (max-width: 980px) { .detail-layout { grid-template-columns: 1fr; } }

.detail-hero {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 32px;
}

.detail-body { font-size: 1.03rem; }
.detail-body h2 { margin-top: 34px; }
.detail-body h3 { margin-top: 28px; }
.detail-body ul, .detail-body ol { padding-left: 22px; margin-bottom: 1.1rem; }
.detail-body li { margin-bottom: 8px; }

.bullet-grid {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 13px;
}
.bullet-grid li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  border-radius: var(--radius-sm);
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-700);
}
.bullet-grid i { color: var(--leaf-500); flex-shrink: 0; margin-top: 3px; }

/* Sidebar */
.side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 22px;
}
.side-card h3 { font-size: 1.08rem; margin-bottom: 16px; }

.side-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: .91rem;
  font-weight: 500;
  transition: background-color .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease);
}
.side-nav a i { color: var(--leaf-500); flex-shrink: 0; }
.side-nav a:hover { background: var(--mint-50); color: var(--forest-900); padding-left: 17px; }
.side-nav a.is-active {
  background: linear-gradient(135deg, var(--green-600), var(--leaf-500));
  color: #fff;
}
.side-nav a.is-active i { color: #fff; }

.side-cta {
  background: linear-gradient(150deg, var(--forest-900), var(--green-600));
  color: #fff;
  text-align: center;
}
.side-cta h3 { color: #fff; }
.side-cta p { color: rgba(255, 255, 255, .8); font-size: .92rem; margin-bottom: 20px; }
.side-cta .btn-zy { width: 100%; margin-bottom: 10px; }

/* =====================================================================
   OUR CLIENTS
   ===================================================================== */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.client-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  min-height: 170px;
  padding: 26px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.client-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--leaf-400);
}

/* Real logos: greyscale at rest, full colour on hover — keeps a grid of
   mismatched brand colours from fighting the green palette. */
.client-card img {
  max-height: 72px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .26s var(--ease), opacity .26s var(--ease);
}
.client-card:hover img { filter: grayscale(0); opacity: 1; }

/* No logo uploaded → the name itself becomes the tile. */
.client-wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--forest-900);
}
.client-card:hover .client-wordmark { color: var(--green-600); }

.client-sector {
  font-size: .8rem;
  color: var(--ink-500);
  font-weight: 500;
}

/* Testimonials */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.quote-card {
  position: relative;
  margin: 0;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quote-card > i {
  font-size: 2.2rem;
  color: var(--leaf-400);
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.quote-card blockquote {
  margin: 0 0 18px;
  font-size: 1rem;
  color: var(--ink-700);
  font-style: italic;
  line-height: 1.7;
}
.quote-card figcaption {
  display: flex;
  flex-direction: column;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.quote-card figcaption strong { color: var(--forest-900); font-size: .94rem; }
.quote-card figcaption span   { color: var(--ink-500); font-size: .84rem; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 46px;
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.info-row {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.info-row:last-of-type { border-bottom: 0; }
.info-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--mint-100);
  color: var(--green-600);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.info-row h4 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-500);
  margin-bottom: 5px;
  font-weight: 700;
}
.info-row p, .info-row a { margin: 0; color: var(--forest-900); font-weight: 500; white-space: pre-line; }
.info-row a:hover { color: var(--green-600); }

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-sm);
}

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: .87rem;
  font-weight: 600;
  color: var(--forest-900);
  margin-bottom: 7px;
}
.field .req { color: #C0392B; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink-900);
  background: var(--mint-50);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--leaf-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(125, 194, 66, .16);
}
.field textarea { resize: vertical; min-height: 128px; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .form-grid-2 { grid-template-columns: 1fr; } }

.map-frame {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: var(--radius);
  display: block;
}

/* =====================================================================
   ALERTS
   ===================================================================== */
.alert-zy {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
  font-size: .93rem;
  font-weight: 500;
}
.alert-zy i { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.alert-ok  { background: var(--mint-100); color: var(--forest-800); border: 1px solid var(--leaf-300); }
.alert-bad { background: #FDECEA; color: #922B21; border: 1px solid #F5B7B1; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  background: var(--forest-900);
  color: rgba(255, 255, 255, .68);
  padding-top: clamp(56px, 7vw, 80px);
  font-size: .93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 48px;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: flex; align-items: center; margin-bottom: 20px; }
/* The logo art has a light background, so it sits on a white plate down here
   rather than disappearing into the dark green footer. */
.footer-brand img { height: 84px; width: auto; background: #fff; border-radius: 12px; padding: 8px; }

.site-footer h4 {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 11px;
}
.site-footer h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}

.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a {
  color: rgba(255, 255, 255, .68);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.footer-links a:hover { color: var(--leaf-300); transform: translateX(3px); }

.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact i { color: var(--leaf-400); font-size: 1.05rem; flex-shrink: 0; margin-top: 3px; }
.footer-contact a { color: rgba(255, 255, 255, .68); }
.footer-contact a:hover { color: var(--leaf-300); }
.footer-contact .pre { white-space: pre-line; }

.footer-gst {
  margin-top: 20px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, .06);
  border-radius: var(--radius-sm);
  font-size: .82rem;
}
.footer-gst strong { color: #fff; }

.footer-socials { display: flex; gap: 11px; margin-top: 22px; }
.footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  transition: background-color .22s var(--ease), transform .22s var(--ease);
}
.footer-socials a:hover { background: var(--leaf-500); transform: translateY(-3px); color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .86rem;
}
.footer-bottom a { color: rgba(255, 255, 255, .68); }
.footer-bottom a:hover { color: var(--leaf-300); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* =====================================================================
   FLOATING WHATSAPP
   ===================================================================== */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.65rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .42);
  transition: transform .24s var(--ease);
}
.wa-float:hover { transform: scale(1.08); color: #fff; }

/* Gentle attention pulse — disabled for reduced-motion users below */
.wa-float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* =====================================================================
   MOBILE NAV
   ===================================================================== */
@media (max-width: 1040px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(360px, 88vw);
    height: 100dvh;               /* dvh: survives the mobile URL bar collapsing */
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: #fff;             /* fully opaque — the page must not show through */
    padding: 84px 20px calc(32px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* scrolling the menu must not scroll the page */
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .32s var(--ease);
    z-index: 1200;
  }
  .nav-menu.is-open { transform: translateX(0); }

  .nav-link { width: 100%; justify-content: space-between; padding: 14px 15px; font-size: 1rem; }
  .nav-link.is-active::after { display: none; }

  /* Dropdowns become inline accordions on mobile */
  .dropdown-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--mint-100);
    border-radius: 0;
    margin: 0 0 6px 15px;
    padding: 0 0 0 6px;
    min-width: 0;
    display: none;
  }
  .dropdown-panel::before { display: none; }
  .nav-item.is-open .dropdown-panel { display: block; }

  /* Inside the mobile accordion the panel is just a plain stacked list. */
  .mega-panel {
    min-width: 0;
    display: none;
    gap: 0;
    padding: 4px 0 4px 6px;
  }
  .nav-item.is-open .mega-panel { display: block; }

  .mega-head { margin: 8px 0 4px; padding: 8px 10px; }
  .mega-head i { width: 32px; height: 32px; font-size: 1rem; }
  .mega-foot { border-top: 1px solid var(--line); margin-top: 8px; }
  .mega-foot .dropdown-link { justify-content: flex-start; }

  .nav-cta { display: none; }

  /* Dims the PAGE only. Must stay below .site-header (1200), which carries the
     drawer — otherwise this tints the menu itself. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 61, 44, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
    z-index: 1100;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .nav-close {
    position: absolute;
    top: 22px;
    right: 20px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 1.3rem;
    color: var(--forest-900);
    cursor: pointer;
    z-index: 1300;
  }
}
@media (min-width: 1041px) {
  .nav-close, .nav-backdrop { display: none; }
}

@media (max-width: 900px) {
  /* This outline is offset 18px PAST the right edge of its parent, which pushes
     the page wider than the viewport on a phone and creates a horizontal
     scrollbar. It is pure decoration, so it goes on small screens. */
  .intro-visual::before { display: none; }
}

@media (max-width: 640px) {
  .topbar-social { display: none; }
  .topbar-inner { justify-content: center; }
  .topbar-contact { justify-content: center; gap: 14px; }
  .brand img { height: 52px; }
  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
  .cta-actions { width: 100%; }
  .cta-actions .btn-zy { flex: 1 1 auto; justify-content: center; }

  /* Bigger tap targets in the drawer — 44px is the minimum comfortable touch size */
  .nav-link { padding: 15px 15px; }
  .dropdown-link { padding: 13px 12px; }

  /* Keep the floating WhatsApp button clear of the drawer + its backdrop */
  .wa-float { right: 16px; bottom: 16px; }
}

/* While the drawer is open the floating WhatsApp button is just clutter sitting
   on the dimmed backdrop. The JS adds .nav-open to <body>. */
body.nav-open .wa-float {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}

/* =====================================================================
   MOTION / PRINT
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .topbar, .site-footer, .wa-float, .hero { display: none; }
  body { color: #000; }
}