/*
  Global styles for the Al Shirawi inspired website.
  This stylesheet is intentionally simple and self-contained. It relies on
  modern CSS features such as flexbox and grid to lay out sections
  responsively. You can customise colours, fonts and spacing variables in
  the :root block to suit your brand.
*/

:root {
  --primary-color: #0a5ea8; /* primary navigation and footer colour */
  --secondary-color: #ffffff; /* page background */
  --accent-color: #00a1e4; /* highlights for buttons and hovers */
  --text-color: #1a1a1a;
  --light-gray: #f4f7fb;
  --max-width: 1200px;
  --transition: all 0.3s ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--secondary-color);
}

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

a:hover {
  color: var(--accent-color);
}

.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}


/* Header */
.site-header {
  background-color: var(--primary-color);
  color: #fff;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header .brand {
  display: flex;
  align-items: center;
}

.site-header .logo {
  height: 70px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.main-nav { margin-left: auto; }

.main-nav a {
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.main-nav a:hover { color: var(--accent-color); }

/* Hero */
.hero {
  position: relative;
  height: 70vh;
  background: url('img/hero-default.jpg') center/cover no-repeat;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  color: #fff;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  pointer-events: none;
}

.hero-overlay { z-index: 2; }
.hero-icons { z-index: 3; }

.hero-overlay {
  position: absolute;
  top: 20%;
  left: 5%;
  transform: none;
  z-index: 2;
  max-width: 45%;
  text-align: left;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

.hero-title {
  font-size: 4rem;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.hero-subtitle {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: #f0f0f0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Hero text swap animation */
.hero-title, .hero-subtitle {
  transition: opacity .2s ease, transform .2s ease;
  will-change: opacity, transform;
}
.hero-text-out { opacity: 0; transform: translateY(6px); }

/* Hero icons row */
.hero-icons {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2rem;
  width: calc(100% - 4rem);
  max-width: none;
  padding: 0.5rem 1rem;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.hero-icons::-webkit-scrollbar { display: none; }

.hero-icon {
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  background-color: rgba(255, 255, 255, 0.08);
}

.hero-icon img {
  width: 26px;
  height: 26px;
  filter: invert(1);
}

.hero-icon img.skyzone-icon { filter: none; }

.hero-icon:hover,
.hero-icon.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

/* Start state (only added by JS) */
.services-overview .service-card.fade-init {
  opacity: 0;
  transform: translateY(12px);
}

/* Transition when entering view */
.services-overview .service-card.fade-init.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .services-overview .service-card.fade-init { opacity:1!important; transform:none!important; transition:none!important; }
}


@media (prefers-reduced-motion: reduce){
  .services-overview .service-card.pf-hide {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .services-overview .service-card.pf-reveal {
    transition: none !important;
  }
}

.sectors h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
  text-align: center;              /* <- add this */
}

.sectors .container > p.section-description,
.sectors .container > p.quote {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* ===== Services Page (scoped) ===== */
.svc .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.svc-hero { padding: 56px 0 22px; }
.svc-title { font-size: 2.2rem; margin: 0 0 6px; }
.svc-sub { color: #5b6b7b; }

/* Showcase wrap */
.svc-showcase { padding: 12px 0 38px; }
.svc-showcase-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 980px){ .svc-showcase-wrap { grid-template-columns: 1fr; } }

/* Big visual */
.svc-visual{
  min-height: 360px;
  border-radius: 18px;
  background: #0b2c4f center / cover no-repeat;
  position: relative;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transform: translateZ(0);
}
.svc-visual.fade{ animation: svcFade .45s ease both; }
@keyframes svcFade{ from{ opacity:.25; transform: scale(1.02);} to{ opacity:1; transform: scale(1);} }

/* Details */
.svc-details{
  background: #fff;
  border: 1px solid #e7eef6;
  border-radius: 18px;
  padding: 20px 20px 22px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.svc-details h2{ font-size: 1.6rem; margin: 4px 0 6px; color: #0a5ea8; }
.svc-details p{ color:#1f2937; line-height: 1.6; }
.svc-bullets{ margin: 12px 0 8px; padding-left: 1.15rem; }
.svc-bullets li{ margin: 6px 0; }
.svc-cta .btn{ display:inline-block; margin-top:8px; }

/* Icon rail */
.svc-rail{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  overflow: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.svc-pill{
  display:flex; align-items:center; gap:10px;
  background:#f6f9ff; border:1px solid #e3ebf7;
  padding:10px 12px; border-radius: 999px; cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s;
  white-space: nowrap;
}
.svc-pill:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.svc-pill.active{ background:#0a5ea8; color:#fff; border-color:transparent; }
.svc-pill-media{ width:26px; height:26px; display:grid; place-items:center; }
.svc-pill-media img{ width:100%; height:100%; object-fit:contain; display:block; }
.svc-pill-text{ font-weight:600; font-size:.95rem; }

/* Grid of capability cards */
.svc-grid-sec{ padding: 22px 0 64px; }
.svc-grid-title{ margin: 0 0 12px; }
.svc-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
@media (max-width: 980px){ .svc-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .svc-grid{ grid-template-columns: 1fr;} }

.svc-card{
  display:block; background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #e7eef6;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transform: translateY(6px);
  opacity: 0;
  transition: transform .35s ease, box-shadow .25s ease, opacity .35s ease;
}
.svc-card.in{ transform: none; opacity: 1; }
.svc-card:hover{ box-shadow:0 12px 26px rgba(0,0,0,.12); }

.svc-card-media{
  background:#0b2c4f center / cover no-repeat;
  height: 160px;
  width: 100%;
}
.svc-card-meta{
  display:flex; gap:10px; padding: 12px 12px 14px;
}
.svc-card-icon{ width:28px; height:28px; object-fit:contain; }
.svc-card-meta h4{ margin:0 0 4px; font-size:1.02rem; color:#0a5ea8; }
.svc-card-meta p{ margin:0; color:#374151; font-size:.93rem; line-height:1.45; }


/* ===========================
   Service-legacy.html code 
   =========================== */


.service-hero {
  background: #0b4f8f;   /* Skyzone blue */
  color: #fff;
  padding: 60px 0;
  text-align: center;
}
.service-hero h1 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}
.service-hero p {
  color: #d8e9ff;
  font-size: 1.1rem;
  max-width: 720px;
  margin: 0 auto;
}
.service-content {
  padding: 3rem 0;
  line-height: 1.7;
}
.service-content h2 {
  margin-top: 2rem;
  color: #0b4f8f;
}

/* ===== Legacy Page (scoped to .legacy-*), blue theme only ===== */
:root{
  --leg-blue:#0b4f8f;
  --leg-blue-dark:#083d6d;
  --leg-sky:#f0f6ff;
  --leg-text:#1b2a3a;
  --leg-muted:#5d6b7a;
  --leg-card:#ffffff;
  --leg-brd:#e8eef6;
  --leg-shadow:0 10px 26px rgba(0,0,0,.08);
  --leg-radius:16px;
}

/* Hero */
.legacy-hero{
  background: var(--leg-blue);
  color:#fff;
  padding: 60px 0 44px;
}
.legacy-hero__inner{
  display:grid; grid-template-columns: 2.2fr 1fr; gap: 24px; align-items: end;
}
.legacy-hero__text h1{ margin:0 0 8px; font-size: 2.2rem; }
.legacy-hero__text p{ margin:0; color:#d7e8ff; max-width: 760px; }
.legacy-hero__stats{ display:flex; gap: 14px; justify-content:flex-end; flex-wrap: wrap; }
.legacy-hero__stats .stat{
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  color:#fff; padding:10px 14px; border-radius: 12px; text-align:center; min-width: 140px;
}
.legacy-hero__stats .stat strong{ display:block; font-size:1.3rem; line-height:1.2; }
.legacy-hero__stats .stat span{ font-size:.9rem; color:#e9f2ff; }

/* Intro card */
.legacy-intro{ background: #fff; padding: 24px 0 0; }
.legacy-intro__card{
  background: var(--leg-sky);
  border: 1px solid #d6e8ff;
  box-shadow: var(--leg-shadow);
  border-radius: var(--leg-radius);
  padding: 18px 20px;
}
.legacy-intro .lead{ margin:0; color:#2b3e55; }

/* Sections */
.legacy-section{ padding: 54px 0; background:#fff; }
.legacy-section:nth-of-type(even){ background: #fbfdff; }

.legacy-header{ text-align:center; max-width: 860px; margin: 0 auto 28px; }
.legacy-header .eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing: .08em; font-weight:700;
  color: var(--leg-blue); background:#eaf3ff; border:1px solid #d6e8ff; border-radius: 999px;
  padding: 4px 10px; margin-bottom: 8px; font-size: .78rem;
}
.legacy-header h2{ margin:0 0 6px; color: var(--leg-blue-dark); }
.legacy-header .sub{ color: var(--leg-muted); margin:0 auto; }

/* Cards and grids */
.legacy-card{
  background: var(--leg-card);
  border: 1px solid var(--leg-brd);
  border-radius: var(--leg-radius);
  padding: 20px;
  box-shadow: var(--leg-shadow);
}
.legacy-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.legacy-grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

.bullet{ padding-left: 1rem; }
.bullet li{ margin: .35rem 0; color:#2a3e52; }
.check{ padding-left: 1rem; }
.check li{ margin: .35rem 0; color:#2a3e52; list-style: "✓  "; }

/* Timeline */
.legacy-timeline{ position:relative; margin: 8px auto 0; max-width: 980px; }
.legacy-timeline .tl-item{ position:relative; padding-left: 32px; margin: 18px 0; }
.legacy-timeline .tl-item:not(:last-child){ padding-bottom: 10px; }
.legacy-timeline .tl-item::before{
  content:""; position:absolute; left: 10px; top: 0; bottom: -10px; width:2px; background:#d6e8ff;
}
.legacy-timeline .tl-dot{
  position:absolute; left: 4px; top: 4px; width: 14px; height: 14px; border-radius:50%;
  background: #fff; border: 3px solid var(--leg-blue);
}
.legacy-timeline .tl-content h4{ margin: 0 0 6px; color: var(--leg-blue-dark); }
.legacy-timeline .tl-content p{ margin:0; color:#344a63; }

/* Values row */
.legacy-values{ margin-top: 24px; }
.legacy-values__row{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.legacy-values__row .value{
  background:#fff; border:1px solid var(--leg-brd); border-radius:14px; padding:16px; box-shadow: var(--leg-shadow);
}
.legacy-values__row .value h4{ margin:0 0 6px; color: var(--leg-blue-dark); }
.legacy-values__row .value p{ margin:0; color:#3b516b; }

/* CTA */
.legacy-cta{
  background: linear-gradient(180deg, #eaf3ff 0%, #f7fbff 100%);
  border-top: 1px solid #dfeaf8;
  padding: 48px 0 56px;
}
.legacy-cta__box{
  text-align:center; background:#fff; border:1px solid #dfeaf8; border-radius:20px;
  max-width: 960px; margin: 0 auto; padding: 28px 22px; box-shadow: var(--leg-shadow);
}
.legacy-cta__box h2{ margin:0 0 6px; color: var(--leg-blue-dark); }
.legacy-cta__box p{ margin:0 0 16px; color:#466081; }
.btn-primary-blue{
  display:inline-block; text-decoration:none; font-weight:700;
  color: var(--leg-blue-dark);
  border: 2px solid var(--leg-blue);
  padding: 10px 16px; border-radius: 999px;
}
.btn-primary-blue:hover{ background:#e8f3ff; }

/* Subtle reveal on scroll */
.legacy-section, .legacy-cta__box{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.legacy-section.in, .legacy-cta__box.in{ opacity:1; transform:none; }

/* Responsive */
@media (max-width: 980px){
  .legacy-hero__inner{ grid-template-columns: 1fr; gap: 16px; }
  .legacy-hero__stats{ justify-content:flex-start; }
  .legacy-grid-2{ grid-template-columns: 1fr; }
  .legacy-grid-3{ grid-template-columns: 1fr 1fr; }
  .legacy-values__row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px){
  .legacy-grid-3{ grid-template-columns: 1fr; }
  .legacy-values__row{ grid-template-columns: 1fr; }
}

.legacy-section, .legacy-cta__box {
  opacity:0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.legacy-section.in, .legacy-cta__box.in {
  opacity:1;
  transform:none;
}


/* ===== Staggered reveal (scoped) ===== */
.legacy-hero .reveal,
.legacy-section .reveal,
.legacy-cta__box .reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);   /* per-item delay from JS */
  will-change: opacity, transform;
}

/* When the parent enters view, children animate in */
.legacy-hero.in .reveal,
.legacy-section.in .reveal,
.legacy-cta__box.in .reveal{
  opacity: 1;
  transform: none;
}

/* ===== Clear Water Page Image Styling ===== */
.clear-water .legacy-card img {
  width: 100%;
  max-width: 320px;   /* keeps image from blowing up */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  margin-bottom: 1rem;
  object-fit: cover;
}

/* center content in cards */
.clear-water .legacy-card {
  text-align: center;
  padding: 1.5rem;
}

.clear-water .legacy-card h3 {
  margin-top: .5rem;
}


/* ===== Ozone - Systems detail page ===== */
.page-ozone .site-header .main-nav a,
.page-ozone .site-header .main-nav a.active { font-weight: 600 !important; }

/* Hero */
.page-ozone .oz-hero{ position:relative; color:#fff; padding:110px 0 80px; overflow:hidden; }
.page-ozone .oz-hero__bg{ position:absolute; inset:0; background:center/cover no-repeat; }
.page-ozone .oz-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,78,134,.86) 0%, rgba(13,78,134,.72) 50%, rgba(13,78,134,.58) 100%);
}
.page-ozone .oz-hero__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 1.5rem; }
.page-ozone .oz-crumb{ color:#d1e6f9; text-transform:uppercase; letter-spacing:.05em; font:500 .85rem/1.4 'Poppins',sans-serif; margin-bottom:.6rem; }
.page-ozone .oz-crumb span{ color:#ffd377; }
.page-ozone .oz-hero h1{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:3rem; line-height:1.2; margin:0 0 1rem; text-shadow:0 2px 6px rgba(0,0,0,.3); }
.page-ozone .oz-hero .lead{ max-width:72ch; color:#f1f7fc; font-size:1.05rem; line-height:1.65; }
.page-ozone .oz-metrics{ display:flex; flex-wrap:wrap; gap:1rem; list-style:none; padding:0; margin:1.25rem 0 0; }
.page-ozone .oz-metrics li{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:1rem 1.25rem; min-width:160px; text-align:center; backdrop-filter:blur(6px); }
.page-ozone .oz-metrics .kpi{ display:block; font-weight:700; font-size:1.2rem; }
.page-ozone .oz-metrics .lbl{ font-size:.85rem; color:#d7ebff; }

/* Intro split */
.page-ozone .oz-intro{ background:#f7fbff; padding:56px 0; }
.page-ozone .oz-intro__wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center; }
@media (max-width:980px){ .page-ozone .oz-intro__wrap{ grid-template-columns:1fr; } }
.page-ozone .oz-media{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(13,78,134,.15); }
.page-ozone .oz-media img{ width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover; }
.page-ozone .oz-badge{ position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.92); color:#0d4e86; font:700 .8rem/1 'Poppins',sans-serif; padding:.5rem .7rem; border-radius:10px; }
.page-ozone .oz-text h2{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(1.6rem,2.4vw,2rem); margin:0 0 .5rem; color:#0e2a3f; }
.page-ozone .oz-text p{ color:#3b5164; line-height:1.7; margin:0 0 1rem; max-width:64ch; }
.page-ozone .oz-bullets{ margin:.25rem 0 1.25rem; padding:0; list-style:none; display:grid; gap:.5rem; }
.page-ozone .oz-bullets li{ position:relative; padding-left:1.4rem; color:#264256; }
.page-ozone .oz-bullets li::before{ content:"●"; position:absolute; left:0; top:.2rem; font-size:.6rem; color:#0d4e86; }

/* Applications */
.page-ozone .oz-apps{ padding:56px 0; }
.page-ozone .sec-head{ text-align:center; margin-bottom:2rem; }
.page-ozone .sec-head .eyebrow{ text-transform:uppercase; font:600 .85rem/1 'Poppins',sans-serif; color:#0d4e86; }
.page-ozone .sec-head h2{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:2rem; color:#0e2a3f; margin:.25rem 0 .75rem; }
.page-ozone .sec-head .sub{ color:#435566; max-width:720px; margin:0 auto; }
.page-ozone .oz-apps__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.2rem; }
.page-ozone .app-card{ background:#fff; border-radius:14px; box-shadow:0 10px 26px rgba(13,78,134,.08); padding:1.2rem; }
.page-ozone .app-card h3{ color:#0d4e86; font-size:1.05rem; margin:0 0 .25rem; }

/* Safety */
.page-ozone .oz-safety{ background:#f7fbff; padding:56px 0; }
.page-ozone .oz-safety__list{ max-width:900px; margin:0 auto; list-style:none; padding:0; display:grid; gap:.6rem; }
.page-ozone .oz-safety__list li{ position:relative; padding-left:1.4rem; color:#2a4153; }
.page-ozone .oz-safety__list li::before{ content:"✔"; position:absolute; left:0; top:0; color:#0d4e86; font-weight:700; }

/* simple reveal */
.page-ozone .oz-intro__wrap,
.page-ozone .oz-apps__grid,
.page-ozone .oz-safety__list { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.page-ozone .oz-intro__wrap.in,
.page-ozone .oz-apps__grid.in,
.page-ozone .oz-safety__list.in { opacity:1; transform:none; }


/* ===== Fade & Slide Animations for Ozone Systems Page ===== */
.page-ozone .fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.page-ozone .fade-up.in {
  opacity: 1;
  transform: translateY(0);
}

.page-ozone .fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.page-ozone .fade-left.in {
  opacity: 1;
  transform: translateX(0);
}

.page-ozone .fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.page-ozone .fade-right.in {
  opacity: 1;
  transform: translateX(0);
}

.page-ozone .fade-delay-1 { transition-delay: .15s; }
.page-ozone .fade-delay-2 { transition-delay: .3s; }
.page-ozone .fade-delay-3 { transition-delay: .45s; }
.page-ozone .fade-delay-4 { transition-delay: .6s; }



/* === Shared CTA look (same as Legacy) === */
.legacy-cta {
background: linear-gradient(180deg, #eaf3ff 0%, #f7fbff 100%);
  border-top: 1px solid #dfeaf8;
  padding: 48px 0 56px;
}

.legacy-cta__box {
    text-align:center; background:#fff; border:1px solid #dfeaf8; border-radius:20px;
  max-width: 960px; margin: 0 auto; padding: 28px 22px; box-shadow: var(--leg-shadow);
}

.legacy-cta__box h2 {
  margin: 0 0 .5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: #0e2a3f;
}
.legacy-cta__box p{ margin:0 0 16px; color:#466081; }

/* Outline button used on Legacy */
.btn-outline-blue {
  display:inline-block; text-decoration:none; font-weight:700;
  color: var(--leg-blue-dark);
  border: 2px solid var(--leg-blue);
  padding: 10px 16px; border-radius: 999px;
}
.btn-primary-blue:hover{ background:#e8f3ff; }



/* Ozone page safety: ensure nothing overlays the CTA */
.page-ozone .legacy-cta,
.page-ozone .legacy-cta * { position: relative; z-index: 1; }

/* ===== Desalination detail page ===== */
.page-desal .site-header .main-nav a,
.page-desal .site-header .main-nav a.active { font-weight: 600 !important; }

/* Hero */
.page-desal .ds-hero{ position:relative; color:#fff; padding:110px 0 80px; overflow:hidden; }
.page-desal .ds-hero__bg{ position:absolute; inset:0; background:center/cover no-repeat; }
.page-desal .ds-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,78,134,.86) 0%, rgba(13,78,134,.72) 50%, rgba(13,78,134,.58) 100%);
}
.page-desal .ds-hero__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 1.5rem; }
.page-desal .ds-crumb{ color:#d1e6f9; text-transform:uppercase; letter-spacing:.05em; font:500 .85rem/1.4 'Poppins',sans-serif; margin-bottom:.6rem; }
.page-desal .ds-crumb span{ color:#ffd377; }
.page-desal .ds-hero h1{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:3rem; line-height:1.2; margin:0 0 1rem; text-shadow:0 2px 6px rgba(0,0,0,.3); }
.page-desal .ds-hero .lead{ max-width:72ch; color:#f1f7fc; font-size:1.05rem; line-height:1.65; }
.page-desal .ds-metrics{ display:flex; flex-wrap:wrap; gap:1rem; list-style:none; padding:0; margin:1.25rem 0 0; }
.page-desal .ds-metrics li{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:1rem 1.25rem; min-width:160px; text-align:center; backdrop-filter:blur(6px); }
.page-desal .ds-metrics .kpi{ display:block; font-weight:700; font-size:1.2rem; }
.page-desal .ds-metrics .lbl{ font-size:.85rem; color:#d7ebff; }

/* Intro split */
.page-desal .ds-intro{ background:#f7fbff; padding:56px 0; }
.page-desal .ds-intro__wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center; }
@media (max-width:980px){ .page-desal .ds-intro__wrap{ grid-template-columns:1fr; } }
.page-desal .ds-media{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(13,78,134,.15); }
.page-desal .ds-media img{ width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover; }
.page-desal .ds-badge{ position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.92); color:#0d4e86; font:700 .8rem/1 'Poppins',sans-serif; padding:.5rem .7rem; border-radius:10px; }
.page-desal .ds-text h2{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(1.6rem,2.4vw,2rem); margin:0 0 .5rem; color:#0e2a3f; }
.page-desal .ds-text p{ color:#3b5164; line-height:1.7; margin:0 0 1rem; max-width:64ch; }
.page-desal .ds-bullets{ margin:.25rem 0 1.25rem; padding:0; list-style:none; display:grid; gap:.5rem; }
.page-desal .ds-bullets li{ position:relative; padding-left:1.4rem; color:#264256; }
.page-desal .ds-bullets li::before{ content:"●"; position:absolute; left:0; top:.2rem; font-size:.6rem; color:#0d4e86; }

/* Applications */
.page-desal .ds-apps{ padding:56px 0; }
.page-desal .sec-head{ text-align:center; margin-bottom:2rem; }
.page-desal .sec-head .eyebrow{ text-transform:uppercase; font:600 .85rem/1 'Poppins',sans-serif; color:#0d4e86; }
.page-desal .sec-head h2{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:2rem; color:#0e2a3f; margin:.25rem 0 .75rem; }
.page-desal .sec-head .sub{ color:#435566; max-width:720px; margin:0 auto; }
.page-desal .ds-apps__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.2rem; }
.page-desal .app-card{ background:#fff; border-radius:14px; box-shadow:0 10px 26px rgba(13,78,134,.08); padding:1.2rem; }
.page-desal .app-card h3{ color:#0d4e86; font-size:1.05rem; margin:0 0 .25rem; }

/* Process */
.page-desal .ds-process{ background:#fefefe; padding:56px 0; }
.page-desal .ds-steps{ list-style:none; padding:0; max-width:900px; margin:0 auto; display:grid; gap:14px; }
.page-desal .ds-steps li{ background:#fff; border:1px solid #e5eff9; border-radius:14px; padding:1rem 1.2rem; box-shadow:0 10px 24px rgba(13,78,134,.06); }
.page-desal .ds-steps h4{ margin:.2rem 0 .3rem; color:#0d4e86; font-weight:700; }

/* Specs */
.page-desal .ds-specs{ background:#f7fbff; padding:48px 0; }
.page-desal .specs-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem; max-width:1000px; margin:0 auto; }
.page-desal .spec{ background:#fff; border:1px solid #e3ecf7; border-radius:14px; padding:1rem 1.2rem; }
.page-desal .spec .lbl{ font:600 .85rem/1 'Poppins',sans-serif; color:#244764; margin-bottom:.25rem; }
.page-desal .spec .val{ color:#2b4358; }

/* Safety / Ops */
.page-desal .ds-safety{ background:#ffffff; padding:56px 0; }
.page-desal .ds-safety__list{ max-width:900px; margin:0 auto; list-style:none; padding:0; display:grid; gap:.6rem; }
.page-desal .ds-safety__list li{ position:relative; padding-left:1.4rem; color:#2a4153; }
.page-desal .ds-safety__list li::before{ content:"✔"; position:absolute; left:0; top:0; color:#0d4e86; font-weight:700; }

/* FAQ */
.page-desal .ds-faq{ background:#f7fbff; padding:56px 0; }
.page-desal .accordion .item{ border:1px solid #e3ecf7; border-radius:14px; background:#fff; overflow:hidden; }
.page-desal .accordion .item + .item{ margin-top:.8rem; }
.page-desal .accordion .head{ width:100%; text-align:left; padding:1rem 1.2rem; font-weight:700; color:#0d4e86; background:#fff; border:0; cursor:pointer; }
.page-desal .accordion .head[aria-expanded="true"]{ background:#f2f8ff; }
.page-desal .accordion .body{ max-height:0; overflow:hidden; padding:0 1.2rem; color:#2b4358; transition:max-height .35s ease; }
.page-desal .accordion .head[aria-expanded="true"] + .body{ padding:0 1.2rem 1rem; }

/* Reveal animations (parallel to ozone) */
.page-desal .fade-up{ opacity:0; transform:translateY(30px); transition:opacity .7s ease-out, transform .7s ease-out; }
.page-desal .fade-up.in{ opacity:1; transform:none; }
.page-desal .fade-left{ opacity:0; transform:translateX(-40px); transition:opacity .7s ease-out, transform .7s ease-out; }
.page-desal .fade-left.in{ opacity:1; transform:none; }
.page-desal .fade-right{ opacity:0; transform:translateX(40px); transition:opacity .7s ease-out, transform .7s ease-out; }
.page-desal .fade-right.in{ opacity:1; transform:none; }
.page-desal .fade-delay-1{ transition-delay:.15s; }
.page-desal .fade-delay-2{ transition-delay:.3s; }
.page-desal .fade-delay-3{ transition-delay:.45s; }
.page-desal .fade-delay-4{ transition-delay:.6s; }

/* Back to top button */
.back-to-top{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:999px;
  border:none; background:#0d4e86; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(13,78,134,.28); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* Reuse your existing .legacy-cta styles as-is */



/* ===== Transport Equipment detail page ===== */
.page-transport .site-header .main-nav a,
.page-transport .site-header .main-nav a.active { font-weight: 600 !important; }

/* Hero */
.page-transport .te-hero{ position:relative; color:#fff; padding:110px 0 80px; overflow:hidden; }
.page-transport .te-hero__bg{ position:absolute; inset:0; background:center/cover no-repeat; }
.page-transport .te-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,78,134,.86) 0%, rgba(13,78,134,.72) 50%, rgba(13,78,134,.58) 100%);
}
.page-transport .te-hero__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 1.5rem; }
.page-transport .te-crumb{ color:#d1e6f9; text-transform:uppercase; letter-spacing:.05em; font:500 .85rem/1.4 'Poppins',sans-serif; margin-bottom:.6rem; }
.page-transport .te-crumb span{ color:#ffd377; }
.page-transport .te-hero h1{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:3rem; line-height:1.2; margin:0 0 1rem; text-shadow:0 2px 6px rgba(0,0,0,.3); }
.page-transport .te-hero .lead{ max-width:72ch; color:#f1f7fc; font-size:1.05rem; line-height:1.65; }
.page-transport .te-metrics{ display:flex; flex-wrap:wrap; gap:1rem; list-style:none; padding:0; margin:1.25rem 0 0; }
.page-transport .te-metrics li{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:1rem 1.25rem; min-width:160px; text-align:center; backdrop-filter:blur(6px); }
.page-transport .te-metrics .kpi{ display:block; font-weight:700; font-size:1.2rem; }
.page-transport .te-metrics .lbl{ font-size:.85rem; color:#d7ebff; }

/* Intro split */
.page-transport .te-intro{ background:#f7fbff; padding:56px 0; }
.page-transport .te-intro__wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center; }
@media (max-width:980px){ .page-transport .te-intro__wrap{ grid-template-columns:1fr; } }
.page-transport .te-media{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(13,78,134,.15); }
.page-transport .te-media img{ width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover; }
.page-transport .te-badge{ position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.92); color:#0d4e86; font:700 .8rem/1 'Poppins',sans-serif; padding:.5rem .7rem; border-radius:10px; }
.page-transport .te-text h2{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(1.6rem,2.4vw,2rem); margin:0 0 .5rem; color:#0e2a3f; }
.page-transport .te-text p{ color:#3b5164; line-height:1.7; margin:0 0 1rem; max-width:64ch; }
.page-transport .te-bullets{ margin:.25rem 0 1.25rem; padding:0; list-style:none; display:grid; gap:.5rem; }
.page-transport .te-bullets li{ position:relative; padding-left:1.4rem; color:#264256; }
.page-transport .te-bullets li::before{ content:"●"; position:absolute; left:0; top:.2rem; font-size:.6rem; color:#0d4e86; }

/* Applications */
.page-transport .te-apps{ padding:56px 0; }
.page-transport .sec-head{ text-align:center; margin-bottom:2rem; }
.page-transport .sec-head .eyebrow{ text-transform:uppercase; font:600 .85rem/1 'Poppins',sans-serif; color:#0d4e86; }
.page-transport .sec-head h2{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:2rem; color:#0e2a3f; margin:.25rem 0 .75rem; }
.page-transport .sec-head .sub{ color:#435566; max-width:720px; margin:0 auto; }
.page-transport .te-apps__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.2rem; }
.page-transport .app-card{ background:#fff; border-radius:14px; box-shadow:0 10px 26px rgba(13,78,134,.08); padding:1.2rem; }
.page-transport .app-card h3{ color:#0d4e86; font-size:1.05rem; margin:0 0 .25rem; }

/* Offering / Steps */
.page-transport .te-offer{ background:#fefefe; padding:56px 0; }
.page-transport .te-steps{ list-style:none; padding:0; max-width:900px; margin:0 auto; display:grid; gap:14px; }
.page-transport .te-steps li{ background:#fff; border:1px solid #e5eff9; border-radius:14px; padding:1rem 1.2rem; box-shadow:0 10px 24px rgba(13,78,134,.06); }
.page-transport .te-steps h4{ margin:.2rem 0 .3rem; color:#0d4e86; font-weight:700; }

/* Specs */
.page-transport .te-specs{ background:#f7fbff; padding:48px 0; }
.page-transport .specs-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem; max-width:1000px; margin:0 auto; }
.page-transport .spec{ background:#fff; border:1px solid #e3ecf7; border-radius:14px; padding:1rem 1.2rem; }
.page-transport .spec .lbl{ font:600 .85rem/1 'Poppins',sans-serif; color:#244764; margin-bottom:.25rem; }
.page-transport .spec .val{ color:#2b4358; }

/* Safety / Ops */
.page-transport .te-safety{ background:#ffffff; padding:56px 0; }
.page-transport .te-safety__list{ max-width:900px; margin:0 auto; list-style:none; padding:0; display:grid; gap:.6rem; }
.page-transport .te-safety__list li{ position:relative; padding-left:1.4rem; color:#2a4153; }
.page-transport .te-safety__list li::before{ content:"✔"; position:absolute; left:0; top:0; color:#0d4e86; font-weight:700; }

/* FAQ */
.page-transport .te-faq{ background:#f7fbff; padding:56px 0; }
.page-transport .accordion .item{ border:1px solid #e3ecf7; border-radius:14px; background:#fff; overflow:hidden; }
.page-transport .accordion .item + .item{ margin-top:.8rem; }
.page-transport .accordion .head{ width:100%; text-align:left; padding:1rem 1.2rem; font-weight:700; color:#0d4e86; background:#fff; border:0; cursor:pointer; }
.page-transport .accordion .head[aria-expanded="true"]{ background:#f2f8ff; }
.page-transport .accordion .body{ max-height:0; overflow:hidden; padding:0 1.2rem; color:#2b4358; transition:max-height .35s ease; }
.page-transport .accordion .head[aria-expanded="true"] + .body{ padding:0 1.2rem 1rem; }

/* Reveal animations (same pattern) */
.page-transport .fade-up{ opacity:0; transform:translateY(30px); transition:opacity .7s ease-out, transform .7s ease-out; }
.page-transport .fade-up.in{ opacity:1; transform:none; }
.page-transport .fade-left{ opacity:0; transform:translateX(-40px); transition:opacity .7s ease-out, transform .7s ease-out; }
.page-transport .fade-left.in{ opacity:1; transform:none; }
.page-transport .fade-right{ opacity:0; transform:translateX(40px); transition:opacity .7s ease-out, transform .7s ease-out; }
.page-transport .fade-right.in{ opacity:1; transform:none; }

/* Back to top button (reuse) */
.back-to-top{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:999px;
  border:none; background:#0d4e86; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(13,78,134,.28); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }


/* ===== Media & Marketing detail page (no animations) ===== */
.page-media .site-header .main-nav a,
.page-media .site-header .main-nav a.active { font-weight: 600 !important; }

/* Hero */
.page-media .mm-hero{ position:relative; color:#fff; padding:110px 0 80px; overflow:hidden; }
.page-media .mm-hero__bg{ position:absolute; inset:0; background:center/cover no-repeat; }
.page-media .mm-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,78,134,.86) 0%, rgba(13,78,134,.72) 50%, rgba(13,78,134,.58) 100%);
}
.page-media .mm-hero__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 1.5rem; }
.page-media .mm-crumb{ color:#d1e6f9; text-transform:uppercase; letter-spacing:.05em; font:500 .85rem/1.4 'Poppins',sans-serif; margin-bottom:.6rem; }
.page-media .mm-crumb span{ color:#ffd377; }
.page-media .mm-hero h1{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:3rem; line-height:1.2; margin:0 0 1rem; text-shadow:0 2px 6px rgba(0,0,0,.3); }
.page-media .mm-hero .lead{ max-width:72ch; color:#f1f7fc; font-size:1.05rem; line-height:1.65; }
.page-media .mm-metrics{ display:flex; flex-wrap:wrap; gap:1rem; list-style:none; padding:0; margin:1.25rem 0 0; }
.page-media .mm-metrics li{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:1rem 1.25rem; min-width:160px; text-align:center; backdrop-filter:blur(6px); }
.page-media .mm-metrics .kpi{ display:block; font-weight:700; font-size:1.2rem; }
.page-media .mm-metrics .lbl{ font-size:.85rem; color:#d7ebff; }

/* Intro split */
.page-media .mm-intro{ background:#f7fbff; padding:56px 0; }
.page-media .mm-intro__wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center; }
@media (max-width:980px){ .page-media .mm-intro__wrap{ grid-template-columns:1fr; } }
.page-media .mm-media{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(13,78,134,.15); }
.page-media .mm-media img{ width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover; }
.page-media .mm-badge{ position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.92); color:#0d4e86; font:700 .8rem/1 'Poppins',sans-serif; padding:.5rem .7rem; border-radius:10px; }
.page-media .mm-text h2{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(1.6rem,2.4vw,2rem); margin:0 0 .5rem; color:#0e2a3f; }
.page-media .mm-text p{ color:#3b5164; line-height:1.7; margin:0 0 1rem; max-width:64ch; }
.page-media .mm-bullets{ margin:.25rem 0 1.25rem; padding:0; list-style:none; display:grid; gap:.5rem; }
.page-media .mm-bullets li{ position:relative; padding-left:1.4rem; color:#264256; }
.page-media .mm-bullets li::before{ content:"●"; position:absolute; left:0; top:.2rem; font-size:.6rem; color:#0d4e86; }

/* ===== Capabilities section (scoped, no animations) ===== */
.page-media .mm-capabilities{
  padding:56px 0;
  position:relative;
  z-index:1; /* sits above hero bg if any overlap */
  background:#fff; /* keep page clean between hero and next sections */
}

.page-media .mm-cap__head{
  text-align:center;
  margin-bottom:2rem;
}
.page-media .mm-cap__head .eyebrow{
  text-transform:uppercase;
  font:600 .85rem/1 'Poppins',sans-serif;
  color:#0d4e86;
}
.page-media .mm-cap__head h2{
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:2rem;
  color:#0e2a3f;
  margin:.25rem 0 .75rem;
}
.page-media .mm-cap__head .sub{
  color:#435566;
  max-width:720px;
  margin:0 auto;
}

/* grid/cards */
.page-media .mm-cap__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.2rem;
}
.page-media .mm-cap__card{
  background:#fff;
  border:1px solid #e6eef8;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(13,78,134,.07);
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.page-media .mm-cap__card img{
  width:100%;
  display:block;
  height:auto;
  aspect-ratio:4/3;      /* consistent height */
  object-fit:cover;
}
.page-media .mm-cap__body{
  padding:1rem 1.1rem;
}
.page-media .mm-cap__body h3{
  color:#0d4e86;
  font-size:1.08rem;
  margin:0 0 .35rem;
}
.page-media .mm-cap__body p{
  margin:0;
  color:#2a4153;
  line-height:1.55;
}

/* safety: ensure hero bg never overlays this section */
.page-media .mm-hero { position:relative; z-index:0; }
.page-media .mm-hero__bg, 
.page-media .mm-hero__bg::after { z-index:-1; }


/* Portfolio gallery with lightbox */
.page-media .mm-portfolio { padding: 64px 0 40px; background:#fff; }
.page-media .mm-portfolio .sec-head{
  text-align:center;
  margin: 0 0 22px;
}

.page-media .mm-portfolio .sec-head .eyebrow{
  text-transform: uppercase;
  letter-spacing: .06em;
  font: 600 .85rem/1 'Poppins', sans-serif;
  color: #0d4e86;             /* blue, small cap line */
  margin-bottom: 6px;
}

.page-media .mm-portfolio .sec-head h2{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;            /* bold like the shot */
  font-size: clamp(1.9rem, 2.8vw, 2.25rem);
  line-height: 1.2;
  color: #0e2a3f;              /* deep navy */
  margin: 0 0 8px;
}

.page-media .mm-portfolio .sec-head .sub{
  color:#435566;
  max-width: 720px;
  margin: 0 auto;
  font-size: 1rem;
}
.page-media .gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:.8rem; }
.page-media .gallery a{ display:block; border-radius:14px; overflow:hidden; border:1px solid #e6eef8; box-shadow:0 10px 24px rgba(13,78,134,.06); }
.page-media .gallery img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; transition:transform .25s ease; }
.page-media .gallery a:hover img{ transform:scale(1.03); }


/* ===== Simple fade-in utility (no movement) ===== */
:root { --fade-dur:.6s; --fade-ease:cubic-bezier(.2,.65,.2,1); }

/* If JS is off, content stays visible */
.no-js .fade-in { opacity: 1 !important; }

.fade-in {
  opacity: 0;
  transition: opacity var(--fade-dur) var(--fade-ease);
  will-change: opacity;
}

.fade-in.in { opacity: 1; }

/* (Optional) easy stagger helpers */
.stagger-1 { transition-delay: .08s; }
.stagger-2 { transition-delay: .16s; }
.stagger-3 { transition-delay: .24s; }
.stagger-4 { transition-delay: .32s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .fade-in { opacity: 1 !important; transition: none !important; }
}


.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.78); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:9999; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox .lb-img{ max-width:90vw; max-height:80vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next{
  position:absolute; top:20px; background:#0d4e86; color:#fff; border:0; width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(13,78,134,.28); cursor:pointer;
}
.lightbox .lb-close{ right:20px; }
.lightbox .lb-prev{ left:20px; top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:20px; top:50%; transform:translateY(-50%); }

/* Case studies */
/* ===== Media page: Case Studies heading (match Portfolio style) ===== */
.page-media .mm-cases { padding: 64px 0 40px; background:#f7fbff; }

.page-media .mm-cases .sec-head{
  text-align:center;
  margin: 0 0 22px;
}

.page-media .mm-cases .sec-head .eyebrow{
  text-transform: uppercase;
  letter-spacing: .06em;
  font: 600 .85rem/1 'Poppins', sans-serif;
  color: #0d4e86;
  margin-bottom: 6px;
}

.page-media .mm-cases .sec-head h2{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 2.8vw, 2.25rem);
  line-height: 1.2;
  color: #0e2a3f;
  margin: 0 0 8px;
}

.page-media .mm-cases .sec-head .sub{
  color:#435566;
  max-width: 720px;
  margin: 0 auto;
  font-size: 1rem;
}

.page-media .case-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1rem; }
.page-media .case-card{ background:#fff; border:1px solid #e3ecf7; border-radius:16px; overflow:hidden; box-shadow:0 12px 28px rgba(13,78,134,.07); }
.page-media .case-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.page-media .case-body{ padding:1rem 1.1rem; }
.page-media .case-body h3{ margin:.2rem 0 .4rem; color:#0d4e86; }
.page-media .ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.page-media .ticks li{ position:relative; padding-left:1.2rem; color:#2a4153; }
.page-media .ticks li::before{ content:"✔"; position:absolute; left:0; top:0; color:#0d4e86; font-weight:700; }

/* Process */
/* ===== Media page: Process heading (centered) ===== */
.page-media .mm-process { padding: 64px 0 40px; background:#fff; }

.page-media .mm-process .sec-head{
  text-align:center;
  margin: 0 0 22px;
}

.page-media .mm-process .sec-head .eyebrow{
  text-transform: uppercase;
  letter-spacing: .06em;
  font: 600 .85rem/1 'Poppins', sans-serif;
  color: #0d4e86;
  margin-bottom: 6px;
}

.page-media .mm-process .sec-head h2{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 2.8vw, 2.25rem);
  line-height: 1.2;
  color: #0e2a3f;
  margin: 0 0 8px;
}

.page-media .mm-process .sec-head .sub{
  color:#435566;
  max-width: 720px;
  margin: 0 auto;
  font-size: 1rem;
}

.page-media .mm-steps{ list-style:none; padding:0; max-width:900px; margin:0 auto; display:grid; gap:14px; }
.page-media .mm-steps li{ background:#fff; border:1px solid #e5eff9; border-radius:14px; padding:1rem 1.2rem; box-shadow:0 10px 24px rgba(13,78,134,.06); }
.page-media .mm-steps h4{ margin:.2rem 0 .3rem; color:#0d4e86; font-weight:700; }

/* Plans */
/* ===== Media page: Packages heading (centered) ===== */
.page-media .mm-plans { padding: 64px 0 40px; background:#f7fbff; }

.page-media .mm-plans .sec-head{
  text-align:center;
  margin: 0 0 22px;
}

.page-media .mm-plans .sec-head .eyebrow{
  text-transform: uppercase;
  letter-spacing: .06em;
  font: 600 .85rem/1 'Poppins', sans-serif;
  color: #0d4e86;
  margin-bottom: 6px;
}

.page-media .mm-plans .sec-head h2{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 2.8vw, 2.25rem);
  line-height: 1.2;
  color: #0e2a3f;
  margin: 0 0 8px;
}

.page-media .mm-plans .sec-head .sub{
  color:#435566;
  max-width: 720px;
  margin: 0 auto;
  font-size: 1rem;
}

.page-media .plan-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.page-media .plan-card{ background:#fff; border:1px solid #e3ecf7; border-radius:16px; padding:1rem 1.1rem; text-align:left; box-shadow:0 12px 28px rgba(13,78,134,.07); }
.page-media .plan-card h3{ color:#0d4e86; margin:.2rem 0 .6rem; }
.page-media .plan-card ul{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.35rem; }
.page-media .plan-card li{ position:relative; padding-left:1.1rem; color:#2a4153; }
.page-media .plan-card li::before{ content:"•"; position:absolute; left:0; top:0; color:#0d4e86; }
.page-media .plan-card.featured{ border-width:2px; border-color:#0d4e86; }

/* FAQ */
.page-media .mm-faq{ background:#fff; padding:56px 0; }
.page-media .accordion .item{ border:1px solid #e3ecf7; border-radius:14px; background:#fff; overflow:hidden; }
.page-media .accordion .item + .item{ margin-top:.8rem; }
.page-media .accordion .head{ width:100%; text-align:left; padding:1rem 1.2rem; font-weight:700; color:#0d4e86; background:#fff; border:0; cursor:pointer; }
.page-media .accordion .head[aria-expanded="true"]{ background:#f2f8ff; }
.page-media .accordion .body{ max-height:0; overflow:hidden; padding:0 1.2rem; color:#2b4358; transition:max-height .35s ease; }
.page-media .accordion .head[aria-expanded="true"] + .body{ padding:0 1.2rem 1rem; }

/* Back to top button (reuse) */
.back-to-top{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:999px;
  border:none; background:#0d4e86; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(13,78,134,.28); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }



/* ===== Batteries & Inverters (no animations) ===== */
.page-batteries .site-header .main-nav a,
.page-batteries .site-header .main-nav a.active { font-weight:600 !important; }

/* Hero */
.page-batteries .bat-hero{ position:relative; color:#fff; padding:110px 0 80px; overflow:hidden; }
.page-batteries .bat-hero__bg{ position:absolute; inset:0; background:center/cover no-repeat; }
.page-batteries .bat-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,78,134,.86) 0%, rgba(13,78,134,.72) 50%, rgba(13,78,134,.58) 100%);
}
.page-batteries .bat-hero__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 1.5rem; }
.page-batteries .bat-crumb{ color:#d1e6f9; text-transform:uppercase; letter-spacing:.05em; font:500 .85rem/1.4 'Poppins',sans-serif; margin-bottom:.6rem; }
.page-batteries .bat-crumb span{ color:#ffd377; }
.page-batteries .bat-hero h1{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:3rem; line-height:1.2; margin:0 0 1rem; text-shadow:0 2px 6px rgba(0,0,0,.3); }
.page-batteries .bat-hero .lead{ max-width:72ch; color:#f1f7fc; font-size:1.05rem; line-height:1.65; }
.page-batteries .bat-metrics{ display:flex; flex-wrap:wrap; gap:1rem; list-style:none; padding:0; margin:1.25rem 0 0; }
.page-batteries .bat-metrics li{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:1rem 1.25rem; min-width:160px; text-align:center; backdrop-filter:blur(6px); }
.page-batteries .bat-metrics .kpi{ display:block; font-weight:700; font-size:1.2rem; }
.page-batteries .bat-metrics .lbl{ font-size:.85rem; color:#d7ebff; }

/* Intro */
.page-batteries .bat-intro{ background:#f7fbff; padding:56px 0; }
.page-batteries .bat-intro__wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center; }
@media (max-width:980px){ .page-batteries .bat-intro__wrap{ grid-template-columns:1fr; } }
.page-batteries .bat-media{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(13,78,134,.15); }
.page-batteries .bat-media img{ width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover; }
.page-batteries .bat-badge{ position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.92); color:#0d4e86; font:700 .8rem/1 'Poppins',sans-serif; padding:.5rem .7rem; border-radius:10px; }
.page-batteries .bat-text h2{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(1.6rem,2.4vw,2rem); margin:0 0 .5rem; color:#0e2a3f; }
.page-batteries .bat-text p{ color:#3b5164; line-height:1.7; margin:0 0 1rem; max-width:64ch; }
.page-batteries .bat-bullets{ margin:.25rem 0 1.25rem; padding:0; list-style:none; display:grid; gap:.5rem; }
.page-batteries .bat-bullets li{ position:relative; padding-left:1.4rem; color:#264256; }
.page-batteries .bat-bullets li::before{ content:"●"; position:absolute; left:0; top:.2rem; font-size:.6rem; color:#0d4e86; }

/* Solutions grid */
.page-batteries .bat-solns{ padding:56px 0; }
.page-batteries .sec-head{ text-align:center; margin-bottom:2rem; }
.page-batteries .sec-head .eyebrow{ text-transform:uppercase; font:600 .85rem/1 'Poppins',sans-serif; color:#0d4e86; }
.page-batteries .sec-head h2{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(1.9rem,2.8vw,2.25rem); color:#0e2a3f; margin:.25rem 0 .75rem; }
.page-batteries .sec-head .sub{ color:#435566; max-width:720px; margin:0 auto; }
.page-batteries .bat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.2rem; }
.page-batteries .bat-card{ border-radius:16px; overflow:hidden; background:#fff; border:1px solid #e6eef8; box-shadow:0 12px 28px rgba(13,78,134,.07); display:flex; flex-direction:column; }
.page-batteries .bat-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.page-batteries .bat-body{ padding:1rem 1.1rem; }
.page-batteries .bat-body h3{ color:#0d4e86; font-size:1.08rem; margin:0 0 .3rem; }

/* Specs list */
.page-batteries .bat-specs{ background:#fff; padding:56px 0; }
.page-batteries .spec-list{ max-width:900px; margin:0 auto; list-style:none; padding:0; display:grid; gap:.55rem; color:#2a4153; }
.page-batteries .spec-list li{ position:relative; padding-left:1.2rem; }
.page-batteries .spec-list li::before{ content:"✔"; position:absolute; left:0; top:0; color:#0d4e86; font-weight:700; }

/* Applications */
.page-batteries .bat-apps{ background:#f7fbff; padding:56px 0; }
.page-batteries .chip-grid{ list-style:none; padding:0; margin:0 auto; max-width:980px; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:.7rem; }
.page-batteries .chip-grid li{ background:#fff; border:1px solid #e3ecf7; border-radius:999px; padding:.55rem .8rem; color:#244257; display:flex; align-items:center; gap:.5rem; box-shadow:0 8px 22px rgba(13,78,134,.06); }
.page-batteries .chip-grid i{ color:#0d4e86; }

/* Comparison table */
.page-batteries .bat-compare{ background:#fff; padding:56px 0; }
.page-batteries .table-wrap{ overflow:auto; }
.page-batteries .bat-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:640px; }
.page-batteries .bat-table thead th{ background:#0d4e86; color:#fff; padding:.75rem; text-align:left; font-weight:700; }
.page-batteries .bat-table tbody td{ border:1px solid #e3ecf7; padding:.7rem; }
.page-batteries .bat-table thead th:first-child{ border-top-left-radius:10px; }
.page-batteries .bat-table thead th:last-child{ border-top-right-radius:10px; }

/* FAQ */
.page-batteries .bat-faq{ background:#f7fbff; padding:56px 0; }
.page-batteries .accordion .item{ border:1px solid #e3ecf7; border-radius:14px; background:#fff; overflow:hidden; }
.page-batteries .accordion .item + .item{ margin-top:.8rem; }
.page-batteries .accordion .head{ width:100%; text-align:left; padding:1rem 1.2rem; font-weight:700; color:#0d4e86; background:#fff; border:0; cursor:pointer; }
.page-batteries .accordion .head[aria-expanded="true"]{ background:#f2f8ff; }
.page-batteries .accordion .body{ max-height:0; overflow:hidden; padding:0 1.2rem; color:#2b4358; transition:max-height .35s ease; }
.page-batteries .accordion .head[aria-expanded="true"] + .body{ padding:0 1.2rem 1rem; }

/* Back to top (reuse) */
.back-to-top{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:999px;
  border:none; background:#0d4e86; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(13,78,134,.28); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* Ensure hero never overlays next sections */
.page-batteries .bat-hero{ z-index:0; }
.page-batteries .bat-hero__bg, 
.page-batteries .bat-hero__bg::after{ z-index:-1; }


/* Floating scroll buttons (shared) */
.back-to-top,
.back-to-bottom{
  position: fixed;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #0d4e86;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(13,78,134,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 999;
}

/* positions */
.back-to-top   { bottom: 72px; }  /* sits above the bottom button */
.back-to-bottom{ bottom: 18px; }

.back-to-top.show,
.back-to-bottom.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* optional hover */
.back-to-top:hover,
.back-to-bottom:hover{ filter: brightness(1.05); }



/* ==============================
   RENEWABLE PAGE (scoped styles)
   ============================== */

.page-renewable .pro-hero {
  position: relative;
  color: #fff;
  padding: 120px 0 100px;
  text-align: center;
  overflow: hidden;
}
.page-renewable .pro-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45);
  z-index: 0;
}
.page-renewable .pro-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}
.page-renewable .pro-hero__crumb {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: #c9e4ff;
}
.page-renewable .pro-hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.page-renewable .pro-hero__lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #eaf6ff;
  margin-bottom: 1.5rem;
}
.page-renewable .pro-hero__metrics {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.page-renewable .pro-hero__metrics .metric {
  background: rgba(255,255,255,0.1);
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  backdrop-filter: blur(6px);
}
.page-renewable .metric .kpi {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
}
.page-renewable .metric .lbl {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Shared section spacing */
.page-renewable section {
  padding: 70px 0;
}

/* Intro */
.page-renewable .oz-intro__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.page-renewable .oz-intro__wrap img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.page-renewable .oz-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #0d4e86;
  color: #fff;
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  border-radius: 6px;
}

/* Apps grid */
.page-renewable .oz-apps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 1.5rem;
}
.page-renewable .app-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.page-renewable .app-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.1);
}
.page-renewable .app-card h3 {
  color: #0d4e86;
  margin-bottom: 0.5rem;
}
.page-renewable .app-card .mini-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: #435566;
}

/* Legacy sections reused */
.page-renewable .legacy-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.page-renewable .legacy-header h2 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0.3rem 0;
  color: #0e2a3f;
}
.page-renewable .legacy-header .eyebrow {
  text-transform: uppercase;
  color: #0d4e86;
  font-size: 0.85rem;
  font-weight: 600;
}
.page-renewable .legacy-grid-2,
.page-renewable .legacy-grid-3 {
  display: grid;
  gap: 1.5rem;
}
.page-renewable .legacy-grid-2 { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.page-renewable .legacy-grid-3 { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }

.page-renewable .legacy-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 8px 18px rgba(0,0,0,0.05);
  transition: transform .3s ease;
}
.page-renewable .legacy-card:hover { transform: translateY(-4px); }
.page-renewable .legacy-card h3 { color:#0d4e86; margin-bottom: .5rem; }
.page-renewable .legacy-card p { color:#4b5b6c; font-size: .95rem; line-height:1.55; }
.page-renewable .legacy-card .checklist li { margin-bottom: .4rem; }

/* Case snapshots */
.page-renewable .legacy-card .card-img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: .8rem;
  object-fit: cover;
  max-height: 180px;
}

/* === Shared CTA look (same as Legacy) === */
.legacy-cta {
  background: linear-gradient(180deg, #eaf3ff 0%, #f7fbff 100%);
  border-top: 1px solid #dfeaf8;
  padding: 48px 0 56px;
}

.legacy-cta__box {
  text-align: center;
  background: #fff;
  border: 1px solid #dfeaf8;
  border-radius: 20px;
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 22px;
  box-shadow: var(--leg-shadow);
}

.legacy-cta__box h2 {
  margin: 0 0 .5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: #0e2a3f;
}
.legacy-cta__box p{ margin:0 0 16px; color:#466081; }

/* Outline button used on Legacy */
.btn-outline-blue {
  display:inline-block; text-decoration:none; font-weight:700;
  color: var(--leg-blue-dark);
  border: 2px solid var(--leg-blue);
  padding: 10px 16px; border-radius: 999px;
}
.btn-primary-blue:hover{ background:#e8f3ff; }

/* Ozone page safety: ensure nothing overlays the CTA */
.page-construction .legacy-cta,
.page-construction .legacy-cta * { position: relative; z-index: 1; }

/* Fade animations */
.fade-up { opacity:0; transform:translateY(30px); transition:all .7s ease; }
.fade-up.in { opacity:1; transform:none; }
.fade-left { opacity:0; transform:translateX(-40px); transition:all .7s ease; }
.fade-left.in { opacity:1; transform:none; }
.fade-right { opacity:0; transform:translateX(40px); transition:all .7s ease; }
.fade-right.in { opacity:1; transform:none; }


/* =============================
   Advanced Air Filtration Page
   ============================= */
/* HERO */
.page-air .air-hero {
  position: relative;
  color: #fff;
  padding: 140px 0 120px;
  text-align: center;
}
.page-air .air-hero__bg {
  position: absolute; inset:0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45);
  z-index: 0;
}
.page-air .air-hero__inner { position: relative; z-index:1; max-width:960px; margin:0 auto; }
.page-air .hero-title { font-size:2.8rem; font-weight:700; margin-bottom:1rem; }
.page-air .hero-lead { font-size:1.15rem; color:#eaf4ff; margin-bottom:1.6rem; line-height:1.7; }
.page-air .hero-metrics { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.page-air .metric { background:rgba(255,255,255,.1); padding:1rem 1.4rem; border-radius:10px; backdrop-filter:blur(6px); }
.page-air .metric strong { font-size:1.2rem; display:block; }
.page-air .metric span { font-size:.9rem; opacity:.95; }

/* INTRO */
.page-air .air-intro__wrap { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; margin-top:60px; }
.page-air .air-media img { width:100%; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.15); }
.page-air .air-badge { position:absolute; top:14px; left:14px; background:#0d4e86; color:#fff; padding:.35rem .7rem; border-radius:6px; font-size:.8rem; }
.page-air .air-text h2 { color:#0e2a3f; margin-bottom:.6rem; }
.page-air .air-text p { color:#435566; margin-bottom:1rem; line-height:1.6; }
.page-air .air-bullets { padding-left:1.2rem; color:#4b5b6c; line-height:1.5; }

/* APPS */
.page-air .air-apps__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; margin-top:2rem; }
.page-air .app-card { background:#fff; border-radius:14px; padding:1.2rem; box-shadow:0 8px 20px rgba(0,0,0,.08); transition:.3s; text-align:center; }
.page-air .app-card img { width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:.8rem; }
.page-air .app-card:hover { transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.page-air .app-card h3 { color:#0d4e86; margin-bottom:.5rem; }

/* BENEFITS */
.page-air .benefits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; margin-top:2rem; }
.page-air .benefit { background:#fff; padding:1.5rem; border-radius:14px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.08); }
.page-air .benefit img { width:60px; height:60px; margin-bottom:.6rem; }
.page-air .benefit h3 { color:#0d4e86; margin-bottom:.4rem; }

/* CASES */
.page-air .case-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:2rem; }
.page-air .case-card { background:#fff; border-radius:14px; padding:1rem 1rem 1.4rem; box-shadow:0 8px 20px rgba(0,0,0,.08); }
.page-air .case-card img { width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:.8rem; }
.page-air .case-card h3 { color:#0d4e86; margin-bottom:.4rem; }

/* CTA */
.legacy-cta{
  background: linear-gradient(180deg, #eaf3ff 0%, #f7fbff 100%);
  border-top: 1px solid #dfeaf8;
  padding: 48px 0 56px;
}
.legacy-cta__box{
  text-align:center; background:#fff; border:1px solid #dfeaf8; border-radius:20px;
  max-width: 960px; margin: 0 auto; padding: 28px 22px; box-shadow: var(--leg-shadow);
}
.legacy-cta__box h2{ margin:0 0 6px; color: var(--leg-blue-dark); }
.legacy-cta__box p{ margin:0 0 16px; color:#466081; }
.btn-primary-blue{
  display:inline-block; text-decoration:none; font-weight:700;
  color: var(--leg-blue-dark);
  border: 2px solid var(--leg-blue);
  padding: 10px 16px; border-radius: 999px;
}
.btn-primary-blue:hover{ background:#e8f3ff; }

/* Subtle reveal on scroll */
.legacy-section, .legacy-cta__box{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.legacy-section.in, .legacy-cta__box.in{ opacity:1; transform:none; }

/* ============================
   Polished Vertical Rhythm
   (safe overrides for spacing)
   ============================ */

/* Consistent section spacing */
.page-air section { padding: 68px 0; }

/* Hero: give a soft handoff into next section */
.page-air .air-hero { padding: 140px 0 120px; margin-bottom: 8px; }

/* Section headers: eyebrow, title, sub */
.page-air .sec-head { 
  margin-bottom: 22px; 
  text-align: left;          /* feel free to set to center if you prefer */
}
.page-air .sec-head .eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85rem;
  color: #0d4e86;
  margin-bottom: 6px;
}
.page-air .sec-head h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: #0e2a3f;
  margin: 0 0 8px;           /* not sticky, not too far */
  line-height: 1.25;
}
.page-air .sec-head .sub {
  color: #4b5b6c;
  margin: 0;
}

/* Intro split: add breathing room between media and text */
.page-air .air-intro { padding-top: 64px; }
.page-air .air-intro__wrap { gap: 2.2rem; }
.page-air .air-text h2 { margin: 0 0 10px; }
.page-air .air-text p { margin: 0 0 12px; }

/* Grids: comfortable gaps + card inner spacing */
.page-air .air-apps__grid,
.page-air .benefits-grid,
.page-air .case-grid,
.page-air .air-quality__grid { gap: 1.35rem; }

.page-air .app-card,
.page-air .benefit,
.page-air .case-card,
.page-air .quality-card { padding: 1.25rem; }

/* App images uniform + modest size */
.page-air .app-card img,
.page-air .case-card img {
  height: 160px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: .75rem;
}

/* Benefits icons sized neatly */
.page-air .benefit img { width: 56px; height: 56px; margin-bottom: .5rem; }

/* CTA: a little more room above/below, matching your other pages */
.page-air .legacy-cta { padding: 60px 0; }
.page-air .legacy-cta__box { padding: 30px 26px; }

/* Tweak metric chips spacing */
.page-air .hero-metrics { gap: 12px 16px; }
.page-air .metric { padding: .9rem 1.2rem; }

/* ============================
   Fade-in Animations
   ============================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}


/* Responsive refinements */
@media (max-width: 1024px) {
  .page-air section { padding: 56px 0; }
  .page-air .air-intro__wrap { grid-template-columns: 1fr; gap: 1.6rem; }
  .page-air .air-media { order: -1; } /* image first on smaller screens looks nicer */
}
@media (max-width: 640px) {
  .page-air .hero-title { font-size: 2.1rem; }
  .page-air .hero-lead { font-size: 1.02rem; }
  .page-air .app-card img,
  .page-air .case-card img { height: 140px; }
}


/* Responsive */
@media (max-width: 980px){
  .legacy-hero__inner{ grid-template-columns: 1fr; gap: 16px; }
  .legacy-hero__stats{ justify-content:flex-start; }
  .legacy-grid-2{ grid-template-columns: 1fr; }
  .legacy-grid-3{ grid-template-columns: 1fr 1fr; }
  .legacy-values__row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px){
  .legacy-grid-3{ grid-template-columns: 1fr; }
  .legacy-values__row{ grid-template-columns: 1fr; }
}

.legacy-section, .legacy-cta__box {
  opacity:0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.legacy-section.in, .legacy-cta__box.in {
  opacity:1;
  transform:none;
}


/* ===== Staggered reveal (scoped) ===== */
.legacy-hero .reveal,
.legacy-section .reveal,
.legacy-cta__box .reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);   /* per-item delay from JS */
  will-change: opacity, transform;
}

/* When the parent enters view, children animate in */
.legacy-hero.in .reveal,
.legacy-section.in .reveal,
.legacy-cta__box.in .reveal{
  opacity: 1;
  transform: none;
}

/* ===== Clear Water Page Image Styling ===== */
.clear-water .legacy-card img {
  width: 100%;
  max-width: 320px;   /* keeps image from blowing up */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  margin-bottom: 1rem;
  object-fit: cover;
}


/* Buttons */
.btn-outline-blue {
  border:2px solid #0d4e86;
  color:#0d4e86;
  padding:.7rem 1.5rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  transition:all .3s;
}
.btn-outline-blue:hover { background:#0d4e86; color:#fff; }


/* =============================
   Air Ventilation (Scoped, Clean)
   ============================= */

.page-vent { font-family: 'Montserrat', sans-serif; color:#0e2a3f; }

/* ---------- Hero ---------- */
.page-vent .vent-hero {
  position: relative;
  color: #fff;
  padding: 120px 0 100px;
  text-align: center;
  overflow: hidden;
}
.page-vent .vent-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.45);
  z-index: 0;
}
.page-vent .vent-hero__inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; }
.page-vent .vent-crumb { font-size: .9rem; color: #cfe7ff; margin-bottom: 1rem; }
.page-vent .hero-title { font-size: 2.6rem; font-weight: 700; margin-bottom: 1rem; }
.page-vent .hero-lead { font-size: 1.08rem; color: #eaf4ff; margin-bottom: 1.5rem; line-height: 1.65; }
.page-vent .hero-metrics { display:flex; justify-content:center; gap:12px 16px; flex-wrap:wrap; }
.page-vent .metric { background: rgba(255,255,255,.1); padding:.85rem 1.2rem; border-radius:10px; backdrop-filter: blur(6px); }
.page-vent .metric strong { display:block; font-size:1.12rem; }
.page-vent .metric span { font-size:.9rem; opacity:.95; }

/* ---------- Section rhythm & headings ---------- */
.page-vent section { padding: 68px 0; }
.page-vent .sec-head { text-align:center; margin-bottom: 28px; }
.page-vent .sec-head .eyebrow {
  display:block; text-transform:uppercase; letter-spacing:.04em;
  font-size:.85rem; color:#0d4e86; margin-bottom:6px;
}
.page-vent .sec-head h2 {
  font-weight:700; font-size: clamp(1.5rem, 2.6vw, 2rem);
  color:#0e2a3f; margin: 0 0 10px;
}
.page-vent .sec-head .sub { color:#435566; max-width: 720px; margin: 0 auto; line-height:1.6; }

/* ---------- Intro (if you use it) ---------- */
.page-vent .vent-intro__wrap { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:center; }
.page-vent .vent-media { position:relative; }
.page-vent .vent-media img { width:100%; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.12); display:block; }
.page-vent .vent-badge { position:absolute; top:14px; left:14px; background:#0d4e86; color:#fff; padding:.35rem .7rem; border-radius:6px; font-size:.8rem; }
.page-vent .vent-text h2 { color:#0e2a3f; margin:0 0 10px; }
.page-vent .vent-text p { color:#435566; margin:0 0 12px; line-height:1.6; }
.page-vent .vent-bullets { padding-left:1.2rem; color:#4b5b6c; line-height:1.55; }

/* ---------- Controls & Intelligence (text left, photo right) ---------- */
.page-vent .vent-controls__grid { display: grid; gap: 2rem; }
.page-vent .control-card {
  display:grid;
  grid-template-columns: 1fr 360px;  /* bigger, balanced image on the right */
  gap: 1.8rem;
  align-items: center;
  background:#fff; border-radius:14px; padding:1.6rem 1.8rem;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.page-vent .control-card h3 { font-size:1.25rem; color:#0d4e86; margin:0 0 .5rem; }
.page-vent .control-card p  { font-size:.96rem; color:#435566; margin:0 0 .55rem; line-height:1.55; }
.page-vent .mini-list { font-size:.92rem; color:#4b5b6c; padding-left:1.1rem; }
.page-vent .mini-list li { margin:.3rem 0; }
.page-vent .control-card img {
  width: 100%;
  height: 240px;            /* consistent visual height */
  border-radius: 12px;
  object-fit: cover;        /* crop nicely */
  justify-self: end;
}

/* (Optional) Alternate second card to image left for visual rhythm */
.page-vent .vent-controls__grid .control-card:nth-child(2) {
  grid-template-columns: 360px 1fr;
}
.page-vent .vent-controls__grid .control-card:nth-child(2) img {
  order: 1; justify-self: start;
}
.page-vent .vent-controls__grid .control-card:nth-child(2) h3,
.page-vent .vent-controls__grid .control-card:nth-child(2) p,
.page-vent .vent-controls__grid .control-card:nth-child(2) .mini-list {
  order: 2;
}

/* ---------- Compliance ---------- */
.page-vent .vent-compliance__grid { display:grid; gap:1.4rem; }
.page-vent .comp-card {
  background:#fff; border-radius:14px; padding:1.4rem;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.page-vent .comp-card h3 { color:#0d4e86; margin:0 0 .45rem; }
.page-vent .comp-card p  { color:#435566; line-height:1.55; }

/* ---------- Applications (visual cards) ---------- */
.page-vent .vent-apps__grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:1.5rem; margin-top: .25rem;
}
.page-vent .app-card {
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.page-vent .app-card:hover { transform: translateY(-6px); box-shadow:0 12px 24px rgba(0,0,0,.1); }
.page-vent .app-card img { width:100%; height:200px; object-fit:cover; }
.page-vent .app-card h3 { color:#0d4e86; font-size:1.12rem; margin:.65rem 1rem .3rem; }
.page-vent .app-card p  { color:#435566; font-size:.95rem; margin:0 1rem 1rem; line-height:1.55; }

/* ---------- CTA (shared white card look) ---------- */
.page-vent .legacy-cta {
  background: linear-gradient(180deg, #eaf3ff 0%, #f7fbff 100%);
  border-top: 1px solid #dfeaf8;
  padding: 60px 0;
}
.page-vent .legacy-cta__box {
  text-align: center; background:#fff; border:1px solid #dfeaf8; border-radius:20px;
  max-width: 900px; margin: 0 auto; padding: 32px 28px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.page-vent .legacy-cta__box h2 { font-size:1.85rem; color:#0d4e86; margin:0 0 .9rem; }
.page-vent .legacy-cta__box p  { color:#435566; margin:0 0 1.2rem; }
.page-vent .btn-outline-blue {
  border:2px solid #0d4e86; color:#0d4e86; padding:.7rem 1.5rem;
  border-radius:999px; text-decoration:none; font-weight:600; transition: all .25s ease;
}
.page-vent .btn-outline-blue:hover { background:#0d4e86; color:#fff; }

/* ---------- Reveal (fade-in) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .page-vent section { padding: 56px 0; }
  .page-vent .vent-intro__wrap { grid-template-columns: 1fr; gap: 1.4rem; }
  .page-vent .vent-media { order: -1; }
}
@media (max-width: 820px) {
  .page-vent .control-card,
  .page-vent .vent-controls__grid .control-card:nth-child(2) {
    grid-template-columns: 1fr;   /* stack for mobile/tablet */
  }
  .page-vent .control-card img {
    width: 100%; height: 220px; margin-top: .6rem; justify-self: start;
  }
}
@media (max-width: 640px) {
  .page-vent .hero-title { font-size: 2.1rem; }
  .page-vent .hero-lead  { font-size: 1.02rem; }
  .page-vent .app-card img { height: 160px; }
}

/* Basic Reset */
*{margin:0; padding:0; box-sizing:border-box;}
body{font-family:Arial, Helvetica, sans-serif; color:#0e2a3f;}

/* Header */
.header{background:#0d4e86;}
.nav{max-width:1200px; margin:0 auto; padding:14px 20px; display:flex; align-items:center;}
.brand img{height:44px; width:auto;}
.primary-nav{flex:1;}
.primary-nav ul{display:flex; list-style:none; justify-content:flex-end; gap:28px;}
.primary-nav a{color:#fff; text-decoration:none; font-weight:700; text-transform:uppercase; font-size:.9rem;}
.primary-nav a:hover{opacity:.9;}
.btn-quote{background:#fff; color:#0d4e86; padding:8px 16px; border-radius:20px;}

/* Hero */
.hero{
  position:relative;
  background-size:cover;
  background-position:center;
  color:#fff;
  text-align:center;
  padding:110px 20px;
}
.hero .overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
}
.hero-inner{position:relative; z-index:1; max-width:800px; margin:0 auto;}
.hero h1{font-size:2.5rem; margin-bottom:1rem;}
.hero p{font-size:1.1rem; line-height:1.6; margin-bottom:1.2rem;}
.hero-ctas{display:flex; justify-content:center; gap:14px;}
.btn, .btn-outline{padding:10px 18px; border-radius:6px; font-weight:bold; text-decoration:none;}
.btn{background:#0d4e86; color:#fff;}
.btn:hover{background:#0b3e6a;}
.btn-outline{border:2px solid #fff; color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.2);}

/* Section */
.section{padding:60px 20px;}
.container{max-width:1200px; margin:0 auto;}

/* Footer */
.footer{background:#0a2746; color:#e4f0ff; text-align:center; padding:20px;}
.footer img{height:40px; margin-bottom:8px;}
   
/* =============================
   Air Ventilation (Scoped, Clean)
   ============================= */

.page-vent { font-family: 'Montserrat', sans-serif; color:#0e2a3f; }

/* ---------- Hero ---------- */
.page-vent .vent-hero {
  position: relative;
  color: #fff;
  padding: 120px 0 100px;
  text-align: center;
  overflow: hidden;
}
.page-vent .vent-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.45);
  z-index: 0;
}
.page-vent .vent-hero__inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; }
.page-vent .vent-crumb { font-size: .9rem; color: #cfe7ff; margin-bottom: 1rem; }
.page-vent .hero-title { font-size: 2.6rem; font-weight: 700; margin-bottom: 1rem; }
.page-vent .hero-lead { font-size: 1.08rem; color: #eaf4ff; margin-bottom: 1.5rem; line-height: 1.65; }
.page-vent .hero-metrics { display:flex; justify-content:center; gap:12px 16px; flex-wrap:wrap; }
.page-vent .metric { background: rgba(255,255,255,.1); padding:.85rem 1.2rem; border-radius:10px; backdrop-filter: blur(6px); }
.page-vent .metric strong { display:block; font-size:1.12rem; }
.page-vent .metric span { font-size:.9rem; opacity:.95; }

/* ---------- Section rhythm & headings ---------- */
.page-vent section { padding: 68px 0; }
.page-vent .sec-head { text-align:center; margin-bottom: 28px; }
.page-vent .sec-head .eyebrow {
  display:block; text-transform:uppercase; letter-spacing:.04em;
  font-size:.85rem; color:#0d4e86; margin-bottom:6px;
}
.page-vent .sec-head h2 {
  font-weight:700; font-size: clamp(1.5rem, 2.6vw, 2rem);
  color:#0e2a3f; margin: 0 0 10px;
}
.page-vent .sec-head .sub { color:#435566; max-width: 720px; margin: 0 auto; line-height:1.6; }

/* ---------- Intro (if you use it) ---------- */
.page-vent .vent-intro__wrap { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:center; }
.page-vent .vent-media { position:relative; }
.page-vent .vent-media img { width:100%; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.12); display:block; }
.page-vent .vent-badge { position:absolute; top:14px; left:14px; background:#0d4e86; color:#fff; padding:.35rem .7rem; border-radius:6px; font-size:.8rem; }
.page-vent .vent-text h2 { color:#0e2a3f; margin:0 0 10px; }
.page-vent .vent-text p { color:#435566; margin:0 0 12px; line-height:1.6; }
.page-vent .vent-bullets { padding-left:1.2rem; color:#4b5b6c; line-height:1.55; }

/* ---------- Controls & Intelligence (text left, photo right) ---------- */
.page-vent .vent-controls__grid { display: grid; gap: 2rem; }
.page-vent .control-card {
  display:grid;
  grid-template-columns: 1fr 360px;  /* bigger, balanced image on the right */
  gap: 1.8rem;
  align-items: center;
  background:#fff; border-radius:14px; padding:1.6rem 1.8rem;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.page-vent .control-card h3 { font-size:1.25rem; color:#0d4e86; margin:0 0 .5rem; }
.page-vent .control-card p  { font-size:.96rem; color:#435566; margin:0 0 .55rem; line-height:1.55; }
.page-vent .mini-list { font-size:.92rem; color:#4b5b6c; padding-left:1.1rem; }
.page-vent .mini-list li { margin:.3rem 0; }
.page-vent .control-card img {
  width: 100%;
  height: 240px;            /* consistent visual height */
  border-radius: 12px;
  object-fit: cover;        /* crop nicely */
  justify-self: end;
}

/* (Optional) Alternate second card to image left for visual rhythm */
.page-vent .vent-controls__grid .control-card:nth-child(2) {
  grid-template-columns: 360px 1fr;
}
.page-vent .vent-controls__grid .control-card:nth-child(2) img {
  order: 1; justify-self: start;
}
.page-vent .vent-controls__grid .control-card:nth-child(2) h3,
.page-vent .vent-controls__grid .control-card:nth-child(2) p,
.page-vent .vent-controls__grid .control-card:nth-child(2) .mini-list {
  order: 2;
}

/* ---------- Compliance ---------- */
.page-vent .vent-compliance__grid { display:grid; gap:1.4rem; }
.page-vent .comp-card {
  background:#fff; border-radius:14px; padding:1.4rem;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.page-vent .comp-card h3 { color:#0d4e86; margin:0 0 .45rem; }
.page-vent .comp-card p  { color:#435566; line-height:1.55; }

/* ---------- Applications (visual cards) ---------- */
.page-vent .vent-apps__grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:1.5rem; margin-top: .25rem;
}
.page-vent .app-card {
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.page-vent .app-card:hover { transform: translateY(-6px); box-shadow:0 12px 24px rgba(0,0,0,.1); }
.page-vent .app-card img { width:100%; height:200px; object-fit:cover; }
.page-vent .app-card h3 { color:#0d4e86; font-size:1.12rem; margin:.65rem 1rem .3rem; }
.page-vent .app-card p  { color:#435566; font-size:.95rem; margin:0 1rem 1rem; line-height:1.55; }

/* ---------- CTA (shared white card look) ---------- */
.page-vent .legacy-cta {
  background: linear-gradient(180deg, #eaf3ff 0%, #f7fbff 100%);
  border-top: 1px solid #dfeaf8;
  padding: 60px 0;
}
.page-vent .legacy-cta__box {
  text-align: center; background:#fff; border:1px solid #dfeaf8; border-radius:20px;
  max-width: 900px; margin: 0 auto; padding: 32px 28px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.page-vent .legacy-cta__box h2 { font-size:1.85rem; color:#0d4e86; margin:0 0 .9rem; }
.page-vent .legacy-cta__box p  { color:#435566; margin:0 0 1.2rem; }
.page-vent .btn-outline-blue {
  border:2px solid #0d4e86; color:#0d4e86; padding:.7rem 1.5rem;
  border-radius:999px; text-decoration:none; font-weight:600; transition: all .25s ease;
}
.page-vent .btn-outline-blue:hover { background:#0d4e86; color:#fff; }

/* ---------- Reveal (fade-in) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .page-vent section { padding: 56px 0; }
  .page-vent .vent-intro__wrap { grid-template-columns: 1fr; gap: 1.4rem; }
  .page-vent .vent-media { order: -1; }
}
@media (max-width: 820px) {
  .page-vent .control-card,
  .page-vent .vent-controls__grid .control-card:nth-child(2) {
    grid-template-columns: 1fr;   /* stack for mobile/tablet */
  }
  .page-vent .control-card img {
    width: 100%; height: 220px; margin-top: .6rem; justify-self: start;
  }
}
@media (max-width: 640px) {
  .page-vent .hero-title { font-size: 2.1rem; }
  .page-vent .hero-lead  { font-size: 1.02rem; }
  .page-vent .app-card img { height: 160px; }
}




/* ===============================
   Construction Material (scoped)
   =============================== */

.page-construction .pro-hero {
  position: relative;
  color: #fff;
  padding: 120px 0 100px;
  text-align: center;
  overflow: hidden;
}
.page-construction .pro-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45);
  z-index: 0;
}
.page-construction .pro-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
}
.page-construction .pro-hero__crumb {
  font-size: .9rem;
  margin-bottom: 1rem;
  color: #cfe7ff;
}
.page-construction .pro-hero__title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: .8rem;
}
.page-construction .pro-hero__lead {
  font-size: 1.08rem;
  line-height: 1.65;
  color: #eaf4ff;
  margin-bottom: 1.4rem;
}
.page-construction .pro-hero__metrics {
  display:flex; gap:1rem 1.5rem; justify-content:center; flex-wrap:wrap;
}
.page-construction .metric {
  background: rgba(255,255,255,.1);
  padding: .75rem 1.2rem;
  border-radius: 10px;
  backdrop-filter: blur(6px);
}
.page-construction .metric .kpi { display:block; font-weight:700; font-size:1.15rem; }
.page-construction .metric .lbl { font-size:.85rem; opacity:.95; }

/* Section base */
.page-construction section { padding: 72px 0; }

/* Intro split */
.page-construction .cm-intro__wrap {
  display:grid; grid-template-columns: 1.05fr .95fr; gap:2rem; align-items:center;
}
.page-construction .cm-media { position:relative; }
.page-construction .cm-media img {
  width:100%; border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.12); display:block;
}
.page-construction .cm-badge {
  position:absolute; left:12px; top:12px; background:#0d4e86; color:#fff;
  font-size:.78rem; padding:.35rem .6rem; border-radius:6px;
}
.page-construction .cm-text h2 { color:#0e2a3f; margin-bottom:.4rem; }
.page-construction .cm-text p { color:#435566; }
.page-construction .cm-grid-mini {
  display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1rem;
}
.page-construction .mini-card {
  background:#fff; border-radius:12px; padding:1rem 1.1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.page-construction .mini-card h3 { color:#0d4e86; margin-bottom:.4rem; font-size:1.05rem; }
.page-construction .mini-list { margin:.25rem 0 0; padding-left:1.1rem; color:#4b5b6c; font-size:.95rem; }

/* Apps grid */
.page-construction .cm-apps__grid {
  display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem;
}
.page-construction .app-card {
  background:#fff; border-radius:14px; padding:1.4rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.page-construction .app-card:hover { transform:translateY(-6px); box-shadow:0 10px 22px rgba(0,0,0,.1); }
.page-construction .app-card h3 { color:#0d4e86; margin-bottom:.4rem; }
.page-construction .app-card p { color:#435566; }
.page-construction .app-card .mini-list { color:#4b5b6c; font-size:.92rem; padding-left:1.1rem; margin-top:.4rem; }

/* Quality */
.page-construction .cm-quality__grid {
  display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem;
}
.page-construction .quality-card {
  background:#fff; border-radius:14px; padding:1.4rem;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.page-construction .quality-card h3 { color:#0d4e86; margin-bottom:.4rem; }
.page-construction .checklist { padding-left:1.1rem; color:#435566; }
.page-construction .checklist li { margin:.35rem 0; }

/* Supply */
.page-construction .cm-supply { background:#f7fbff; }
.page-construction .cm-supply__grid {
  display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem;
}
.page-construction .supply-card {
  background:#fff; border-radius:14px; padding:1rem 1rem 1.2rem;
  box-shadow:0 8px 20px rgba(13,78,134,.08);
}
.page-construction .supply-card .card-img {
  width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:.6rem;
}
.page-construction .supply-card h3 { color:#0d4e86; margin-bottom:.3rem; }
.page-construction .supply-card p { color:#435566; }

/* Cases */
.page-construction .cm-cases__grid {
  display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem;
}
.page-construction .case-card {
  background:#fff; border-radius:14px; padding:1rem 1rem 1.2rem;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.page-construction .case-card .card-img {
  width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:.6rem;
}
.page-construction .case-card h3 { color:#0d4e86; margin-bottom:.3rem; }
.page-construction .case-card p { color:#435566; }


/* === Shared CTA look (same as Legacy) === */
.legacy-cta {
  background: linear-gradient(180deg, #eaf3ff 0%, #f7fbff 100%);
  border-top: 1px solid #dfeaf8;
  padding: 48px 0 56px;
}

.legacy-cta__box {
  text-align: center;
  background: #fff;
  border: 1px solid #dfeaf8;
  border-radius: 20px;
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 22px;
  box-shadow: var(--leg-shadow);
}

.legacy-cta__box h2 {
  margin: 0 0 .5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: #0e2a3f;
}
.legacy-cta__box p{ margin:0 0 16px; color:#466081; }

/* Outline button used on Legacy */
.btn-outline-blue {
  display:inline-block; text-decoration:none; font-weight:700;
  color: var(--leg-blue-dark);
  border: 2px solid var(--leg-blue);
  padding: 10px 16px; border-radius: 999px;
}
.btn-primary-blue:hover{ background:#e8f3ff; }

/* Construction page safety: ensure nothing overlays the CTA */
.page-construction .legacy-cta,
.page-construction .legacy-cta * { position: relative; z-index: 1; }


/* IMPORTANT: remove any earlier rule that made
   .page-construction .legacy-cta a dark-blue full background.
   This design uses the white card + outlined button. */

/* Animations */
.fade-up    { opacity:0; transform:translateY(28px); transition:all .7s ease; }
.fade-left  { opacity:0; transform:translateX(-36px); transition:all .7s ease; }
.fade-right { opacity:0; transform:translateX(36px); transition:all .7s ease; }
.fade-up.in, .fade-left.in, .fade-right.in { opacity:1; transform:none; }

/* Responsive */
@media (max-width: 980px){
  .page-construction .cm-intro__wrap { grid-template-columns: 1fr; }
}

/* ===========================
   Skyzone Products (scoped)
   =========================== */
.szp-hero h1 {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  margin: 0 0 .4rem;
  color: #121212;
}
.szp-hero .lead {
  color: #5d6b7a;
  max-width: 860px;
  margin-bottom: 1.2rem;
}
.szp-filters {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 1.2rem 0 2rem;
}
.szp-filters .chip {
  border: 1px solid #e3ecf7;
  background: #f7fbff;
  color: #0a5ea8;
  padding: 8px 14px; border-radius: 999px;
  font-weight: 600; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.szp-filters .chip:hover { transform: translateY(-1px); }
.szp-filters .chip.is-active { background: #0a5ea8; color: #fff; }

/* Dynamic products */
.szp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}


/* Card */
/* Product card with dark overlay */
/* Fade-in animation for product cards */

/* Subtle fade-in animation for product cards */
/* Subtle fade-in animation with stagger */
.szp-card {
opacity: 1;
  transform: translateY(0);
}

/* when visible */
.szp-card.visible {
  opacity: 1;
  transform: translateY(0);
}


.szp-card.revealed { opacity: 1; transform: translateY(0); transition: .45s ease; }
.szp-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }


/* Image with dark gradient overlay */
.szp-thumb {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.szp-body {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
}

.szp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.85) 100%);
}

.szp-title, .szp-desc {
  text-shadow: 0 3px 8px rgba(0,0,0,.9);
}


/* ====== USP (interactive) ====== */
.szp-usp { margin: 64px 0 0; background: linear-gradient(135deg,#0a5ea8,#0b4e8e); color:#fff; padding: 40px 0; }
.szp-usp .usp-row { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.szp-usp .usp-card {
  text-align:left; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  border-radius:16px; padding:16px; cursor:pointer; transition:.25s ease; position:relative;
}
.szp-usp .usp-card:hover { transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.15); }
.szp-usp .usp-head { font-weight:800; letter-spacing:.2px; margin-bottom:8px; }
.szp-usp .usp-body { color:#eef4ff; max-height:0; overflow:hidden; transition:max-height .35s ease, opacity .3s ease; opacity:.8; }
.szp-usp .usp-card.is-open .usp-body { max-height:220px; opacity:1; }
.szp-usp .usp-points { margin:.6rem 0 0 1.1rem; }
.szp-usp .usp-points li { list-style: disc; margin:.12rem 0; }

/* ========= Mini FAQ ========= */
.szp-faq { padding: 48px 0 72px; background:#ffffff; }
.szp-faq-title { text-align:center; color:#0a5ea8; margin:0 0 18px; font-weight:800; }
.faq-item { border:1px solid #e8f0fb; border-radius:14px; margin:10px 0; overflow:hidden; box-shadow:0 8px 22px rgba(10,45,80,.05); }
.faq-q {
  width:100%; text-align:left; padding:14px 16px; background:#f6fafe; color:#0a3661; font-weight:700;
  border:none; cursor:pointer; transition:.2s ease;
}
.faq-q:hover { background:#edf5ff; }
.faq-a { padding:0 16px; max-height:0; overflow:hidden; color:#42546a; transition:max-height .32s ease, padding .2s ease; }
.faq-item.open .faq-a { padding:12px 16px 16px; max-height:280px; }


/* ====== Engage ====== */
.szp-engage { background:#f6fafe; padding:46px 0 64px; }
.szp-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:22px; margin-bottom:24px; }
.szp-stats .stat { background:#fff; border:1px solid #e8f0fb; border-radius:16px; padding:18px; text-align:center; box-shadow:0 8px 24px rgba(10,45,80,.06); }
.szp-stats .num { font-weight:800; font-size:2rem; color:#0a5ea8; }
.szp-stats .label { color:#4b5a6b; margin-top:4px; font-weight:600; }

/* CTA band */
.szp-cta-band {
  margin-top:14px; display:flex; gap:16px; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,#0a5ea8,#0b4e8e); color:#fff; border-radius:18px; padding:18px 22px;
}
.szp-cta-band .band-text { font-weight:700; }
.szp-cta-band .band-text span { display:block; font-weight:600; opacity:.95; }
.szp-cta-band .band-btn {
  background:#fff; color:#0a5ea8; text-decoration:none; font-weight:800; border-radius:999px; padding:10px 18px;
  transition:.2s ease; box-shadow:0 10px 24px rgba(255,255,255,.18);
}
.szp-cta-band .band-btn:hover { background:#e9f3ff; transform: translateY(-1px); }

@media (max-width:700px){
  .szp-cta-band { flex-direction:column; align-items:stretch; text-align:center; }
}


.szp-badge {
  position: absolute; top: 12px; left: 12px;
  background: #0a5ea8; color: #fff; font-weight: 700; font-size: .78rem;
  padding: 6px 10px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(10, 94, 168, .22);
}
/* Stronger, crisper titles + better contrast */
/* Text overlay (white) */
.szp-body {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  color: #fff;
  z-index: 2;
}


.szp-title {
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 6px;
  color: #fff; /* heading white */
}

.szp-desc {
  font-size: .9rem;
  line-height: 1.4;
  margin-bottom: 10px;
  color: #f0f0f0; /* softer white */
}


/* CTA stays punchy */
/* CTA button (blue with hover) */
.szp-cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  background: #fff;
  color: #0a5ea8;
  transition: all .25s ease;
}

.szp-cta:hover {
  background: #0a5ea8;
  color: #fff;
}

/* Mobile tweak: slightly shorter images so cards feel balanced */
@media (max-width: 520px) {
  .szp-thumb { height: 180px; }
}

/* subtle ripple */
.szp-cta::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120px 120px at var(--x,50%) var(--y,50%), rgba(255,255,255,.25), transparent 40%);
  opacity: 0; transition: opacity .25s ease;
}
.szp-cta:hover::after { opacity: 1; }

/* USP strip */
.szp-usp {
  margin: 64px 0 0; background: linear-gradient(135deg,#0a5ea8,#0b4e8e);
  color: #fff; padding: 40px 0;
}
.szp-usp .usp-row {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.szp-usp .usp-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 18px;
}
.szp-usp h4 { margin: 0 0 6px; color: #fff; }

/* Accessibility focus */
.szp-card:focus-within, .szp-cta:focus { outline: 3px solid #7cc4ff; outline-offset: 3px; border-radius: 20px; }


/* Products Section */
.products {
  padding: 80px 20px;
  background: #f8fbff;
  text-align: center;
}

.products .section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #0a5ea8;
  margin-bottom: 0.5rem;
}

.products .section-subtitle {
  color: #5d6b7a;
  font-size: 1rem;
  margin-bottom: 2rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.product-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.product-media img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: #eaf4fc;
  padding: 20px;
}

.product-meta {
  padding: 20px;
}

.product-meta h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #0a5ea8;
  margin-bottom: 8px;
}

.product-meta p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* CTA Button */
.cta {
  margin-top: 40px;
}

.btn-primary {
  display: inline-block;
  background: #0a5ea8;
  color: #fff;
  padding: 14px 32px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background: #084c87;
}

/* ===========================
   Products (namespaced)
   =========================== */
.sz-products {
  padding: 56px 0;
  background: #fff; /* clean surface above sectors */
}

.sz-products .szp-head {
  text-align: center;
  margin-bottom: 1.75rem;
}


#sz-products .szp-cta {
  text-align: center;   /* centers inline content */
  margin-top: 20px;
}
#sz-products .szp-cta .btn {
  display: inline-block;
}



#sz-products.limit-3 .szp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

#sz-products.limit-3 .szp-grid .szp-card:nth-child(n+4) {
  display: none; /* hide everything after the 3rd card */
}

#sz-products .szp-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


#sz-products .szp-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* Image styling */
#sz-products .szp-media img {
  display: block;
  max-width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}
#sz-products .szp-card:hover .szp-media img {
  transform: scale(1.08);
}

/* Overlay text */
/* --- Products card: hover overlay fix (scoped) --- */
#sz-products .szp-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


#sz-products .szp-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* Make sure image sits BELOW overlay */
#sz-products .szp-media {
  position: relative;
  z-index: 1;
}


#sz-products .szp-media img {
  display: block;
  max-width: 85%;  /* a bit smaller so it doesn't fill the box */
  height: auto;
  margin: 18px auto;
  transition: transform 0.4s ease;
  border-radius: 12px;
}

#sz-products .szp-card:hover .szp-media img {
  transform: scale(1.06);
}

#sz-products .szp-meta {
  position: absolute;
  inset: 0;
  z-index: 2; /* <-- crucial so it sits above the image */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 18px;

  /* stylish background */
  background: radial-gradient(120% 120% at 50% 0%, rgba(10,94,168,0.92) 0%, rgba(10,94,168,0.75) 60%, rgba(10,94,168,0.6) 100%);
  color: #fff;

  opacity: 0;
  transform: translateY(16%);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none; /* keep whole card clickable */
}


#sz-products .szp-card:hover .szp-meta {
  opacity: 1;
  transform: translateY(0);
}

/* === FIX: Product overlay text not appearing (scoped + high-specificity) === */

/* Ensure card is a positioning context and hides overflow */
#sz-products.sz-products .szp-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Keep image below overlay */
#sz-products.sz-products .szp-card .szp-media { position: relative; z-index: 1; }
#sz-products.sz-products .szp-card .szp-media img {
  display: block;
  max-width: 85%;
  height: auto;
  margin: 18px auto;
  transition: transform .35s ease;
}
#sz-products.sz-products .szp-card:hover .szp-media img { transform: scale(1.06); }

/* OVERLAY: make it absolutely cover the card and sit on top */
#sz-products.sz-products .szp-card .szp-meta {
  position: absolute !important;
  inset: 0 !important;               /* full cover */
  z-index: 5 !important;             /* above image */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  color: #fff;

  /* stylish gradient overlay */
  background: radial-gradient(120% 120% at 50% 0%,
              rgba(10,94,168,0.92) 0%,
              rgba(10,94,168,0.78) 55%,
              rgba(10,94,168,0.60) 100%);

  opacity: 0;
  transform: translateY(14%);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;               /* keep whole card clickable */
}

/* Show overlay on hover/focus */
#sz-products.sz-products .szp-card:hover .szp-meta,
#sz-products.sz-products .szp-card:focus-within .szp-meta {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Typographic polish */
#sz-products.sz-products .szp-card .szp-meta h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 6px 0;
}
#sz-products.sz-products .szp-card .szp-meta p {
  font-size: .95rem;
  line-height: 1.35;
  max-width: 90%;
  opacity: .95;
  margin: 0;
}

/* Always-visible overlay on touch devices (no hover) */
@media (hover: none) {
  #sz-products.sz-products .szp-card .szp-meta {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ===== Sky Zone Global — Testimonials Page (scoped) ===== */
.szg-tm {
  --sz-blue: #0b4f8f;
  --sz-blue-dark: #083d6d;
  --sz-sky: #f0f6ff;
  --sz-text: #1b2a3a;
  --sz-muted: #5d6b7a;
  --sz-radius: 14px;
  --sz-shadow: 0 10px 24px rgba(0,0,0,.08);
  color: var(--sz-text);
  background: #fff;
}

/* Intro */
.szg-tm__hero {
  padding: 64px 20px 28px;
  text-align: center;
}
.szg-tm__title {
  margin: 0 0 10px;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--sz-blue-dark);
}
.szg-tm__lead {
  max-width: 860px;
  margin: 0 auto;
  color: var(--sz-muted);
}

/* Grid section */
.szg-tm__wrap {
  background: var(--sz-sky);
  padding: 48px 0;
}
.szg-tm__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}
.szg-tm__card {
  grid-column: span 6; /* 2 columns on desktop */
  background: #fff;
  border-radius: var(--sz-radius);
  box-shadow: var(--sz-shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.szg-tm__card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.12); }

@media (max-width: 900px) { .szg-tm__card { grid-column: span 12; } }

.szg-tm__quote {
  margin: 0;
  line-height: 1.75;
  color: #263a4f;
  font-style: italic;
}
.szg-tm__person {
  display: flex; align-items: center; gap: 12px;
}
.szg-tm__avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--sz-blue);
}
.szg-tm__name {
  margin: 0; font-size: 1.05rem; color: var(--sz-blue-dark);
}
.szg-tm__role {
  display: block; font-size: .92rem; color: var(--sz-muted);
}

/* Credibility band (optional) */
.szg-tm__band {
  padding: 28px 0;
  background: linear-gradient(0deg, #e9f3ff, #f6faff);
  border-top: 1px solid #e1ecfb;
  border-bottom: 1px solid #e1ecfb;
}
.szg-tm__band-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: center;
}
@media (max-width: 900px) { .szg-tm__band-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .szg-tm__band-inner { grid-template-columns: 1fr; text-align: center; } }
.szg-tm__stat { text-align: center; }
.szg-tm__stat strong {
  display: block; font-size: 1.4rem; color: var(--sz-blue-dark);
}
.szg-tm__stat span {
  color: var(--sz-muted); font-size: .95rem;
}

/* CTA (minimal, blue only) */
.szg-tm__cta {
  padding: 48px 20px 64px;
  text-align: center;
}
.szg-tm__cta-title { margin: 0 0 6px; color: var(--sz-blue-dark); font-size: 1.6rem; }
.szg-tm__cta-sub { margin: 0 0 14px; color: var(--sz-muted); }
.szg-tm__link {
  display: inline-block;
  text-decoration: none;
  border: 1.8px solid var(--sz-blue);
  color: var(--sz-blue-dark);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
}
.szg-tm__link:hover { background: #e9f3ff; }

/* Footer logo protection (prevents distortion if global CSS overrides width/height) */
.site-footer .footer-logo {
  height: 46px;
  width: auto !important;      /* keep aspect ratio */
  object-fit: contain;
}

/* Fade-in base state */
.szg-tm__card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* When visible */
.szg-tm__card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-description {
  max-width: 700px;
  margin: 0 auto 2rem;
  color: #555;
}

.sectors-slider { position: relative; overflow: hidden; }

.slides {
  display: flex;
  gap: 0.5rem;
  transition: transform 0.5s ease;
}

.slide {
  position: relative;
  flex: 1 1 15%;
  height: 340px;
  background-color: #333;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  background-size: cover;
  background-position: center;
  transition: flex-basis 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  overflow: hidden;
}

/* Darker overlays for readability */
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
}
.slide.light-text::before {
  background: rgba(0, 0, 0, 0.45);
}

.slide:hover {
  flex-basis: 35%;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  z-index: 2;
  transform: none;
}

.slide-number {
  font-size: 3.5rem;
  font-weight: 700;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  font-family: 'Montserrat', 'Poppins', 'Segoe UI', sans-serif;
}

/* Hide the left corner vertical text on slides */
.slide-label {
  display: none !important;
}


.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.slider-arrow:hover { background-color: var(--accent-color); }
.slider-arrow.left { left: 8px; }
.slider-arrow.right { right: 8px; }

.slide.light-text .slide-number,
.slide.light-text .slide-label {
  color: #f8f8f8;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Hover content reveal */
.slide-content {
  position: absolute;
  top: 20%;
  left: 10%;
  right: 10%;
  z-index: 3;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.slide:hover .slide-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.slide-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-family: 'Montserrat', 'Poppins', 'Segoe UI', sans-serif;
}

.slide-tagline {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  max-width: 80%;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
}

.slide-learn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--primary-color);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Montserrat', 'Poppins', 'Segoe UI', sans-serif;
  transition: background-color 0.3s ease;
}
.slide-learn:hover {
  background-color: var(--accent-color);
  color: #fff; /* keep text white on hover */
}

/* Quote & buttons */
.quote {
  font-style: italic;
  margin: 2rem auto 1rem;
  max-width: 800px;
  color: #555;
}

.btn {
  display: inline-block;
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 1rem auto;
  transition: var(--transition);
}
.btn:hover {
  background-color: var(--accent-color);
  color: #fff; /* ensure white text */
}

.btn-outline {
  display: inline-block;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0.5rem;
  transition: var(--transition);
}
.btn-outline:hover {
  background-color: var(--primary-color);
  color: #fff;
}

/* Stats */
.stats { padding: 3rem 0; background-color: #fff; text-align: center; }

.sectors .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 2rem;
}

.stat-item strong {
  font-size: 2.5rem;
  color: var(--primary-color);
  display: block;
}
.stat-item span { font-size: 0.9rem; color: #555; }

.stats-cta { margin-top: 2rem; }

/* Section layout */
.sustainability {
  display: flex;
  flex-direction: row;   /* force side by side */
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  min-height: 400px;
  background: linear-gradient(135deg, #0a5ea8 0%, #0b4e8e 100%);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}


/* ========== Contact Page ========== */
:root{
  --primary: #0b4f8f;         /* Skyzone blue */
  --primary-600:#083d6d;      /* darker blue */
  --dark: #1c1b33;
  --accent: #f3f0fc;
  --card-bg: rgba(255,255,255,0.85);
  --border: rgba(0,0,0,0.08);
  --shadow: 0 10px 30px rgba(28,27,51,0.1);
}

.contact-page{
  position: relative;
  overflow: hidden;
  padding: 4rem 1rem;
}

.contact-bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(106,13,173,0.15), transparent 60%),
    radial-gradient(1000px 600px at 110% 110%, rgba(106,13,173,0.2), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
  z-index: 0;
}

.contact-wrapper{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.5rem;
}

/* Left info panel */
.contact-pane{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 2rem;
}

.contact-title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--dark);
  font-size: 2rem;
  margin-bottom: .5rem;
}
.contact-subtitle{
  color:#555;
  margin-bottom: 1.25rem;
}

.contact-list{
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}
.contact-list li{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  color:#333;
}
.contact-list i{ color: var(--primary); }

/* WhatsApp CTA */
.btn-whatsapp{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #25D366;
  color:#fff;
  padding: .8rem 1.1rem;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(37,211,102,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-whatsapp:hover{
  transform: translateY(-2px);
  filter: brightness(.98);
  box-shadow: 0 10px 22px rgba(37,211,102,.28);
}
.btn-whatsapp i{ font-size: 1.25rem; }

/* small socials under pane */
.mini-social{
  margin-top: 1.25rem;
  display: flex;
  gap: .6rem;
}
.mini-social a{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--primary);
  border-radius: 50%;
  color: var(--primary);
  transition: all .25s ease;
}
.mini-social a:hover{ background: var(--primary); color:#fff; }

/* Form card (glass) */
.form-card{
  backdrop-filter: blur(8px);
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 2rem;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1rem;
}

/* Input group with floating label & icon */
.input-group{
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem .9rem .6rem .9rem;
}
.input-group--full{ grid-column: 1 / -1; }

.input-group i{
  color: var(--primary-600);
  align-self: start;
  margin-top: .15rem;
}

.input-group input,
.input-group textarea{
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: #222;
  padding: 0;
  min-width: 0;
}

.input-group label{
  position: absolute;
  left: 2.6rem; /* icon width + gap */
  top: 50%;
  transform: translateY(-50%);
  color:#777;
  font-size: .95rem;
  pointer-events: none;
  transition: all .18s ease;
  padding: 0 .25rem;
  background: transparent;
}

/* Floating behavior */
.input-group:focus-within{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(106,13,173,.08);
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label{
  top: .55rem;
  transform: none;
  font-size: .75rem;
  color: var(--primary-600);
  background: #fff;
}

/* Error messaging */
.error-msg{
  display: none;
  grid-column: 1 / -1;
  color: #c03838;
  font-size: .8rem;
  margin-top: .25rem;
  padding-left: 2.6rem;
}
.input-group.invalid{ border-color: #e16b6b; box-shadow: 0 0 0 3px rgba(225,107,107,.08); }
.input-group.invalid .error-msg{ display: block; }

/* Submit button */
.btn-primary{
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--primary);       /* changed to blue */
  color:#fff;
  border: none;
  padding: .9rem 1.25rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 10px 24px rgba(11,79,143,.25); /* blue shadow */
}
.btn-primary:hover{ transform: translateY(-2px); background: var(--primary-600); }

/* CTA base (keep your existing styles) */
/* Fade-in states */
.szg-tm__cta .reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

/* When visible */
.szg-tm__cta.is-visible .reveal{
  opacity: 1;
  transform: none;
}

/* subtle stagger */
.szg-tm__cta .reveal.d0{ transition-delay: .05s; }
.szg-tm__cta .reveal.d1{ transition-delay: .18s; }
.szg-tm__cta .reveal.d2{ transition-delay: .30s; }

/* CTA fade-in (scoped) */
.szg-tm__cta .fade-item{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

/* once section is in view */
.szg-tm__cta.in-view .fade-item{ opacity: 1; transform: none; }

/* gentle stagger */
.szg-tm__cta.in-view .fade-item:nth-of-type(1){ transition-delay: .05s; }
.szg-tm__cta.in-view .fade-item:nth-of-type(2){ transition-delay: .18s; }
.szg-tm__cta.in-view .fade-item:nth-of-type(3){ transition-delay: .30s; }

/* Testimonials proof bar (subtle, professional) */
.tm-proofbar{
  display:flex; flex-wrap:wrap; gap:12px 16px;
  align-items:center; justify-content:center;
  margin:18px auto 10px;      /* small gap above the H2 */
}
.tm-proofbar .pb-item{
  display:flex; align-items:center; gap:8px;
  background:#eaf3ff;         /* light blue */
  color:#0b4f8f;              /* brand blue */
  border:1px solid #d6e8ff;
  padding:8px 12px;
  border-radius:999px;        /* pill */
  font-size:0.95rem;
  white-space:nowrap;
}
.tm-proofbar .pb-item strong{ font-weight:700; }
.tm-proofbar .pb-icon{ font-size:1rem; line-height:1; }

/* small fade-in so it feels alive (optional) */
.tm-proofbar{ opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.tm-proofbar.pb-in{ opacity:1; transform:none; }

/* responsive minor tweak */
@media (max-width:600px){
  .tm-proofbar .pb-item{ font-size:.9rem; }
}

/* Overlay */
.site-search {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 20000;
}
.site-search.active { display: flex; }

/* Search box */
.site-search .search-box {
  background: #fff;
  padding: 1.2rem 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.site-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: .6rem .75rem;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.site-search button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}


/* Toast */
.form-toast{
  display: none;
  margin-top: .9rem;
  background: #eefbea;
  color: #205c2e;
  border: 1px solid #c7edc0;
  padding: .75rem 1rem;
  border-radius: 10px;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}
.form-toast.show{ display: inline-flex; }

/* Mini social icons */
.mini-social a{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--primary);   /* blue border */
  border-radius: 50%;
  color: var(--primary);                /* blue icon */
  transition: all .25s ease;
}
.mini-social a:hover{ background: var(--primary); color:#fff; }

/* Responsive */
@media (max-width: 900px){
  .contact-wrapper{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .contact-pane, .form-card{ padding: 1.5rem; }
}




/* Left content */
/* Left content always first */
.sustainability-content {
  flex: 1 1 50%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sustainability-content h2 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: white;
}
.sustainability-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

/* Community-only (sustainability) gentle fade-in */
.sustainability .comm-fade-init {
  opacity: 0;
  transform: translateY(10px);
}

.sustainability .comm-fade-init.comm-fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease;
}

/* optional tiny stagger for inner items (pills/stats/button) */
.sustainability .comm-stagger-1 { transition-delay: .06s; }
.sustainability .comm-stagger-2 { transition-delay: .12s; }
.sustainability .comm-stagger-3 { transition-delay: .18s; }

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .sustainability .comm-fade-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Pills */
.sz-pills {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}
.sz-pill {
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.3s ease;
}
.sz-pill:hover {
  background: rgba(255,255,255,0.18);
}
.sz-icon {
  font-size: 1.1rem;
}

/* Stats row */
.sz-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.stat-box {
  flex: 1;
  min-width: 120px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}
.stat-box span {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

/* Button */
.btn-learn {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  background: #fff;
  color: #0a4c91;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-learn:hover {
  background: #00d1ff;
  color: #fff;
}

/* Right card */
/* Right image card always second */
.sustainability-image {
  flex: 0 1 45%;
  display: flex;
  justify-content: flex-end;
}
.sustainability-card {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
  padding: 20px;
}
.media {
  width: 100%;
  height: clamp(240px, 32vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
}
.media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.sustainability-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #163e6d;
  color: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}

@media (max-width: 900px) {
  .sustainability {
    flex-direction: column; /* stack on small screens */
  }
  .sustainability-image {
    justify-content: center;
    flex: 1 1 100%;
  }
}



/* ===== About Page (no animations) ===== */
.page-about .site-header .main-nav a,
.page-about .site-header .main-nav a.active { font-weight:600 !important; }

/* Hero */
.page-about .ab-hero{ position:relative; color:#fff; padding:110px 0 80px; overflow:hidden; }
.page-about .ab-hero__bg{ position:absolute; inset:0; background:center/cover no-repeat; }
.page-about .ab-hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,78,134,.86) 0%, rgba(13,78,134,.72) 50%, rgba(13,78,134,.58) 100%);
}
.page-about .ab-hero__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 1.5rem; }
.page-about .ab-crumb{ color:#d1e6f9; text-transform:uppercase; letter-spacing:.05em; font:500 .85rem/1.4 'Poppins',sans-serif; margin-bottom:.6rem; }
.page-about .ab-crumb span{ color:#ffd377; }
.page-about .ab-hero h1{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:3rem; line-height:1.2; margin:0 0 1rem; text-shadow:0 2px 6px rgba(0,0,0,.3); }
.page-about .ab-hero .lead{ max-width:72ch; color:#f1f7fc; font-size:1.05rem; line-height:1.65; }
.page-about .ab-kpis{ display:flex; flex-wrap:wrap; gap:1rem; list-style:none; padding:0; margin:1.25rem 0 0; }
.page-about .ab-kpis li{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:1rem 1.25rem; min-width:160px; text-align:center; backdrop-filter:blur(6px); }
.page-about .ab-kpis .kpi{ display:block; font-weight:700; font-size:1.1rem; }
.page-about .ab-kpis .lbl{ font-size:.85rem; color:#d7ebff; }

/* Intro split */
.page-about .ab-intro{ background:#f7fbff; padding:56px 0; }
.page-about .ab-intro__wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center; }
@media (max-width:980px){ .page-about .ab-intro__wrap{ grid-template-columns:1fr; } }
.page-about .ab-media{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(13,78,134,.15); }
.page-about .ab-media img{ width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover; }
.page-about .ab-badge{ position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.92); color:#0d4e86; font:700 .8rem/1 'Poppins',sans-serif; padding:.5rem .7rem; border-radius:10px; }
.page-about .ab-text h2{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(1.6rem,2.4vw,2rem); margin:0 0 .5rem; color:#0e2a3f; }
.page-about .ab-text p{ color:#3b5164; line-height:1.7; margin:0 0 1rem; max-width:64ch; }
.page-about .ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.page-about .ticks li{ position:relative; padding-left:1.2rem; color:#2a4153; }
.page-about .ticks li::before{ content:"✔"; position:absolute; left:0; top:0; color:#0d4e86; font-weight:700; }

/* Vision / Mission / Values */
.page-about .ab-vmv{ background:#fff; padding:56px 0; }
.page-about .vmv-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.page-about .vmv-card{ background:#fff; border:1px solid #e3ecf7; border-radius:16px; padding:1.2rem; box-shadow:0 10px 24px rgba(13,78,134,.06); }
.page-about .vmv-card h3{ margin:.2rem 0 .4rem; color:#0d4e86; font-weight:700; }
.page-about .vmv-card i{ font-size:1.25rem; color:#0d4e86; }
.page-about .dots{ list-style:none; margin:.35rem 0 0; padding:0; display:grid; gap:.35rem; }
.page-about .dots li{ position:relative; padding-left:1.1rem; color:#2b4358; }
.page-about .dots li::before{ content:"•"; position:absolute; left:0; top:0; color:#0d4e86; }

/* Goals */
.page-about .ab-goals{ background:#f7fbff; padding:56px 0; }
.page-about .sec-head{ text-align:center; margin:0 0 22px; }
.page-about .sec-head .eyebrow{ text-transform:uppercase; letter-spacing:.06em; font:600 .85rem/1 'Poppins',sans-serif; color:#0d4e86; margin-bottom:6px; }
.page-about .sec-head h2{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(1.9rem,2.8vw,2.25rem); line-height:1.2; color:#0e2a3f; margin:0 0 8px; }
.page-about .sec-head .sub{ color:#435566; max-width:720px; margin:0 auto; font-size:1rem; }
.page-about .goals-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.page-about .goal-card{ background:#fff; border:1px solid #e3ecf7; border-radius:16px; padding:1rem 1.1rem; box-shadow:0 10px 24px rgba(13,78,134,.06); }
.page-about .goal-card h4{ color:#0d4e86; margin:.1rem 0 .4rem; }

/* Timeline */
.page-about .ab-timeline{ background:#fff; padding:56px 0; }
.page-about .timeline{ list-style:none; padding:0; margin:0 auto; max-width:900px; display:grid; gap:12px; }
.page-about .timeline li{ background:#fff; border:1px solid #e5eff9; border-radius:14px; padding:1rem 1.2rem; box-shadow:0 10px 24px rgba(13,78,134,.06); display:grid; grid-template-columns:92px 1fr; gap:1rem; align-items:start; }
.page-about .timeline .year{ font-weight:700; color:#0d4e86; }

/* Certs */
.page-about .ab-certs{ background:#f7fbff; padding:56px 0; }
.page-about .cert-grid{ list-style:none; padding:0; margin:0 auto; max-width:960px; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:.8rem; }
.page-about .cert-grid li{ background:#fff; border:1px solid #e3ecf7; border-radius:12px; padding:.75rem 1rem; color:#2a4153; box-shadow:0 8px 22px rgba(13,78,134,.06); display:flex; align-items:center; gap:.6rem; }
.page-about .cert-grid i{ color:#0d4e86; }

/* Leadership */
.page-about .ab-leadership{ background:#fff; padding:56px 0; }
.page-about .lead-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem; }
.page-about .lead-card{ background:#fff; border:1px solid #e3ecf7; border-radius:16px; overflow:hidden; text-align:center; box-shadow:0 12px 28px rgba(13,78,134,.07); }
.page-about .lead-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.page-about .lead-card h3{ margin:.6rem 0 .3rem; color:#0d4e86; }
.page-about .lead-card p{ color:#2a4153; padding:0 1rem 1rem; }

/* CSR */
.page-about .ab-csr{ background:#f7fbff; padding:56px 0; }
.page-about .csr-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.page-about .csr-card{ background:#fff; border:1px solid #e3ecf7; border-radius:16px; padding:1.1rem; box-shadow:0 10px 24px rgba(13,78,134,.06); }
.page-about .csr-card i{ color:#0d4e86; margin-right:.4rem; }

/* Presence */
.page-about .ab-presence{ background:#fff; padding:56px 0; }
.page-about .presence-list{ list-style:none; padding:0; margin:0 auto; max-width:980px; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:.7rem; }
.page-about .presence-list li{ background:#fff; border:1px solid #e3ecf7; border-radius:999px; padding:.55rem .8rem; color:#244257; display:flex; align-items:center; gap:.5rem; box-shadow:0 8px 22px rgba(13,78,134,.06); }
.page-about .presence-list i{ color:#0d4e86; }

/* FAQ */
.page-about .ab-faq{ background:#f7fbff; padding:56px 0; }
.page-about .accordion .item{ border:1px solid #e3ecf7; border-radius:14px; background:#fff; overflow:hidden; }
.page-about .accordion .item + .item{ margin-top:.8rem; }
.page-about .accordion .head{ width:100%; text-align:left; padding:1rem 1.2rem; font-weight:700; color:#0d4e86; background:#fff; border:0; cursor:pointer; }
.page-about .accordion .head[aria-expanded="true"]{ background:#f2f8ff; }
.page-about .accordion .body{ max-height:0; overflow:hidden; padding:0 1.2rem; color:#2b4358; transition:max-height .35s ease; }
.page-about .accordion .head[aria-expanded="true"] + .body{ padding:0 1.2rem 1rem; }

/* Ensure hero never overlays next sections */
.page-about .ab-hero{ z-index:0; }
.page-about .ab-hero__bg, 
.page-about .ab-hero__bg::after{ z-index:-1; }





/* ===== News/Blog Section ===== */
.news {
  margin: 80px auto;
}
.news h2 {
  text-align: center;
  margin-bottom: 32px;
  font-size: 2rem;
  color: #0a5ea8;
}

/* Grid layout */
.news-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* Featured blog */
/* === Force featured blog image to show FULL === */
.news-featured {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.news-featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
.news-featured img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;   /* no cropping */
  aspect-ratio: auto !important;    /* cancel any earlier aspect ratio */
  display: block !important;
}

.news-featured .news-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.05));
  color: #fff;
  padding: 20px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.news-featured .news-overlay h3 {
  margin: 8px 0 6px;
  font-size: 1.4rem;
}
.news-featured .news-overlay p {
  font-size: 0.95rem;
  line-height: 1.5;
}


.news .news-featured img {
  aspect-ratio: 21 / 9;     /* fixes the box height */
  object-fit: cover;         /* crops the image to fill */
}

/* Featured blog: show full image (no cropping) */
.news .news-featured { background:#000; } /* hides any letterbox bars nicely */
.news .news-featured img {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;  /* keep whole image visible */
  display: block;
}

/* Featured blog: taller banner + better focal point */
.news .news-featured img {
  aspect-ratio: 16 / 9 !important;    /* taller than 21:9 */
  object-fit: cover !important;       /* keep banner fill */
  object-position: center 30% !important; /* nudge the crop window */
}

/* Blog list (side column) */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.news-list article {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-list article:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.news-list img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.news-meta {
  padding: 14px;
}
.news-meta .date {
  display: block;
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 6px;
}
.news-meta h4 {
  font-size: 1.1rem;
  color: #0a5ea8;
  margin-bottom: 6px;
}
.news-meta p {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.5;
}

/* ===== Jump Arrow (scoped) ===== */
.jump-toggle{
  position: fixed;
  right: 18px;
  bottom: 22px;              /* move up if it overlaps your chat widget */
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 16px;        /* rounded square like your UI */
  background: #1d3b72;        /* dark blue */
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 1000;
  transition: transform .2s ease, background .25s ease, opacity .2s ease;
}
.jump-toggle:hover{ background:#0a5ea8; transform: translateY(-2px); }
.jump-toggle:active{ transform: translateY(0); }

.jt{ display:none; }
.jump-toggle.mode-hero .jt-up{ display:block; }    /* show UP arrow when away from hero */
.jump-toggle.mode-footer .jt-down{ display:block; }/* show DOWN arrow when on hero */

@media (pointer:coarse){
  .jump-toggle{ width:58px; height:58px; }
}



/* Footer */
.site-footer {
  background-color: var(--primary-color);
  color: #fff;
  padding: 3rem 0 1rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.footer-branding .logo { height: 40px; margin-bottom: 1rem; }
.footer-links ul, .social-icons { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: #fff; font-size: 0.9rem; }
.footer-links a:hover { color: var(--accent-color); }
.social-icons { display: flex; gap: 1rem; }
.social-icons li a {
  display: inline-block; width: 24px; height: 24px; line-height: 24px;
  text-align: center; border: 1px solid #fff; border-radius: 50%;
  color: #fff; font-size: 0.8rem;
}
.social-icons li a:hover { background-color: var(--accent-color); border-color: var(--accent-color); }
.copyright { text-align: center; margin-top: 2rem; font-size: 0.8rem; color: #ccc; }
.copyright a { color: #ccc; margin-left: 0.5rem; }

/* Services overview / portfolio */
.services-overview {
  padding: 4rem 1rem;
  background-color: var(--light-gray);
  text-align: center;
}
.services-overview h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
  text-transform: uppercase;
}
.services-overview p {
  max-width: 700px;
  margin: 0 auto 2rem;
  color: #555;
  font-size: 1rem;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
.service-card {
  background-color: #fff;
  padding: 2rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  height: 100%;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.service-card img {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  filter: invert(35%) sepia(62%) saturate(316%) hue-rotate(175deg) brightness(90%) contrast(92%);
}
.service-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
  font-weight: 600;
}
.service-card p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
}

/* Dubai-inspired footer */
.dubai-footer {
  background-color: var(--primary-color);
  color: #fff;
  position: relative;
  padding-top: 4rem;
  padding-bottom: 2rem;
  overflow: hidden;
}
.dubai-footer .footer-wave {
  display: none; /* simplest way: hides the yellow wave block */
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  z-index: 1;
  position: relative;
}


.footer-col, 
.footer-col * {
  color: #ffffff !important;
}

.footer-col h5 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  text-transform: uppercase;
  color: #ffd377;
}


.footer-col ul { list-style: none; padding: 0; margin: 0; line-height: 1.8; }
.footer-col a { color: #ffffff; text-decoration: none; }
.footer-col a:hover { color: var(--accent-color); }

.footer-logo {
  height: 65px !important;   /* moderate size */
  width: auto !important;    /* keep proportions */
  margin-bottom: 1rem;
  object-fit: contain;
}

.footer-tagline { font-size: 0.9rem; max-width: 260px; color: #e0e0e0; line-height: 1.4; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  padding-top: 1rem;
  margin-top: 2rem;
  font-size: 0.8rem;
}
.footer-bottom a { color: var(--accent-color); margin-left: 0.5rem; }

/* --- Reveal animations (no layout changes) --- */
.reveal-left,
.reveal-right {
  opacity: 0;
  transform: translateX(0); /* base */
  will-change: transform, opacity;
  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.22,.61,.36,1);
}

.reveal-left { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }

.reveal-left.in-view,
.reveal-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Subtle stagger for inner items once left panel is visible */
.sustainability-content.in-view .sz-pill    { transition-delay: .10s; }
.sustainability-content.in-view .sz-pill + .sz-pill { transition-delay: .18s; }
.sustainability-content.in-view .sz-pill + .sz-pill + .sz-pill { transition-delay: .26s; }
.sustainability-content.in-view .sz-stats .stat-box { transition: transform .6s ease, opacity .6s ease; opacity: 0; transform: translateY(8px); }
.sustainability-content.in-view .sz-stats .stat-box:nth-child(1) { opacity:1; transform:none; transition-delay:.18s; }
.sustainability-content.in-view .sz-stats .stat-box:nth-child(2) { opacity:1; transform:none; transition-delay:.26s; }
.sustainability-content.in-view .sz-stats .stat-box:nth-child(3) { opacity:1; transform:none; transition-delay:.34s; }


/* 1. Hide default corner text on product cards */
.szp-meta {
  display: none !important;
}

/* 2. Slight hover movement for slide numbers */
.slide-number {
  transition: transform 0.3s ease;
}

.slide:hover .slide-number {
  transform: translateX(6px); /* very minimal nudge */
}

/* ===== News card polish (you can keep your existing news styles) ===== */
.news img { width:100%; height:auto; display:block; object-fit:cover; }
.news .news-featured img { aspect-ratio: 21 / 9; }
.news .news-list img { aspect-ratio: 16 / 9; }

/* ===== Blog Modal (scoped) ===== */
.no-scroll { overflow: hidden; }

.blog-modal[aria-hidden="true"] { display: none; }
.blog-modal {
  position: fixed; inset: 0; z-index: 9999;
}
.blog-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.blog-modal__dialog {
  position: relative;
  background: #fff;
  width: min(900px, 92vw);
  max-height: 88vh;
  margin: 4vh auto;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
  display: grid;
}

/* Make hero image full-bleed and fully visible */
.blog-hero {
  margin: 0 -20px 8px;       /* bleed to dialog edges (matches padding) */
  background: #000;          /* looks cleaner while image loads */
}


.blog-modal__close {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.06);
  font-size: 22px; line-height: 36px;
  cursor: pointer;
}


.blog-modal__content {
  overflow: auto;
  padding: 16px 20px 24px;
}

.blog-hero img {
  width: 100%;
  height: auto;
  max-height: 60vh;          /* tall, but within viewport */
  object-fit: contain;       /* SHOW ENTIRE IMAGE */
  aspect-ratio: auto;        /* override any earlier ratio */
  display: block;
  border-radius: 0;          /* edge-to-edge inside modal */
}

.blog-meta {
  color: #6b7280; font-size: .95rem;
  margin: 10px 0 4px;
}
/* Tweak title/body so they never overlap the image */
#blog-title { margin-top: 6px; }
.blog-body  { margin-bottom: 6px; }

.blog-body { line-height: 1.7; color: #1f2937; }
.blog-body h3 { margin: 16px 0 8px; }
.blog-body ul { padding-left: 1.1rem; }


/* === Search Overlay === */
/* Modern circular search icon */
.search-toggle {
  position: absolute;
  top: 20px;
  right: 24px;
  background: #1d3b72;       /* dark blue background */
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: background 0.3s, transform 0.2s;
  z-index: 20;
}

.search-toggle:hover {
  background: #0a5ea8;       /* lighter blue on hover */
  transform: scale(1.05);
}

.search-toggle svg {
  pointer-events: none;      /* so clicks only hit button */
}

.search-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(10, 30, 60, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; 
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
}
.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-box {
  position: relative;
  width: 90%;
  max-width: 600px;
}
.search-box form {
  display: flex;
  background: #fff;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.search-box input {
  flex: 1;
  border: none;
  padding: 14px 18px;
  font-size: 1rem;
  outline: none;
}
.search-box button[type="submit"] {
  background: #0a5ea8;
  border: none;
  padding: 14px 24px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}
.search-box button[type="submit"]:hover {
  background: #084c88;
}

.search-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

/* Overlay */
.site-search{
  position: fixed; inset: 0; display: none;
  justify-content: flex-start; align-items: flex-start;
  background: rgba(0,0,0,.55); z-index: 20000; padding: 10vh 0 0;
}
.site-search.active{ display: flex; }

/* Box */
.site-search .search-box{
  background:#fff; margin: 0 auto; width: min(720px, 92%);
  padding: .9rem 1rem; border-radius: 12px; display:flex; gap:.6rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.site-search input{
  flex:1; border:1px solid #e3e8ef; border-radius:10px; padding:.75rem .9rem;
  font-size:1rem; outline:none;
}
.site-search button{ background:none;border:0;font-size:1.6rem;cursor:pointer; color:#333 }

/* Results */
.search-results{
  margin: .9rem auto 0; width: min(720px, 92%);
  display: grid; gap: .75rem;
}
.result-card{
  background:#fff; border:1px solid #e9eef5; border-radius:12px; padding: .9rem 1rem;
  display:grid; gap:.35rem; box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.result-card a{
  color:#0b4f8f; font-weight:700; text-decoration:none;
}
.result-card a:hover{ text-decoration: underline; }
.result-desc{ color:#516173; font-size:.95rem; }
.result-url{ color:#7a8aa0; font-size:.82rem; }

/* Empty */
.no-results{
  color:#e6edf6; text-align:center; padding:1rem; font-weight:600;
}

/* Smooth scroll across site (keeps your behavior consistent) */
html{ scroll-behavior:smooth; }



/* ===== Trusted By ===== */
.szp-trust { padding:60px 0; background:#f8fbff; text-align:center; }
.szp-trust .trust-title { color:#0a5ea8; font-weight:800; margin-bottom:28px; }
.trust-logos { display:flex; flex-wrap:wrap; gap:30px; justify-content:center; align-items:center; }
.trust-logos img { max-height:60px; filter: grayscale(100%) brightness(0.8); opacity:.7; transition:.3s ease; }
.trust-logos img:hover { filter:none; opacity:1; transform:scale(1.05); }

/* ================= Sky Zone Chatbot (polished) ================ */
/* ——— Fix chatbot position: stay on right, lifted above scroll buttons ——— */
#szChatbot{
  position: fixed !important;
  right: 18px !important;
  left: auto !important;       /* prevent any left anchoring */
  bottom: 120px !important;     /* lift above your up/down buttons */
  z-index: 9999 !important;
}

/* Ensure the panel also opens from the right edge */
#szChatbotPanel{
  right: 0 !important;
  left: auto !important;
}

/* Floating FAB */
#szChatbotFab{
  width:56px; height:56px; border-radius:999px;
  background:linear-gradient(135deg,#0d4e86 0%, #1692ff 100%);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 14px 34px rgba(13,78,134,.35);
  transition:transform .2s ease, box-shadow .2s ease; user-select:none;
  font-size:22px;
}
#szChatbotFab:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(13,78,134,.42); }

/* Panel */
#szChatbotPanel{
  position:absolute; right:0; bottom:72px; width:min(360px, 92vw); height:min(560px, 74vh);
  background:#fff; border:1px solid #dfeaf8; border-radius:18px; overflow:hidden;
  box-shadow:0 24px 56px rgba(13,78,134,.25); display:none;
}
#szChatbotPanel.open{ display:flex; flex-direction:column; }

/* Header */
.szChatbot-header{
  background:linear-gradient(180deg,#0d4e86 0%, #0f6fb8 100%);
  color:#fff; padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
}
.szChatbot-header span{ font-weight:700; display:flex; align-items:center; gap:8px; }
.szChatbot-header span::before{
  content:""; width:10px; height:10px; border-radius:999px; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.25);
}
.szChatbot-header button{
  background:transparent; border:0; color:#fff; cursor:pointer; font-size:16px; opacity:.9;
}
.szChatbot-header button:hover{ opacity:1; }

/* Messages area */
.szChatbot-messages{
  flex:1; padding:12px; overflow:auto; background:linear-gradient(180deg,#f7fbff 0%, #ffffff 60%);
}
.sz-msg{ display:flex; margin:8px 0; gap:8px; }
.sz-msg.agent{ align-items:flex-start; }
.sz-msg.user{ justify-content:flex-end; }
.sz-bubble{
  max-width:78%; padding:10px 12px; border-radius:16px; line-height:1.45; font-size:.95rem;
  box-shadow:0 8px 22px rgba(13,78,134,.08);
}
.sz-msg.agent .sz-bubble{ background:#ffffff; border:1px solid #e6eef8; color:#123; border-top-left-radius:6px; }
.sz-msg.user  .sz-bubble{ background:#0d4e86; color:#fff; border-top-right-radius:6px; }

/* Tiny avatar for agent */
.sz-avatar{ width:28px; height:28px; border-radius:50%; background:#0d4e86; color:#fff; display:grid; place-items:center; font-weight:700; font-size:.8rem; }

/* Quick replies */
.sz-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.sz-chip{
  border:1px solid #dfeaf8; color:#0d4e86; background:#fff; border-radius:999px; padding:6px 10px; font-size:.85rem; cursor:pointer;
}
.sz-chip:hover{ background:#eff6ff; }

/* CTA card */
.sz-card{
  border:1px solid #e6eef8; background:#fff; border-radius:14px; padding:10px 12px; margin-top:8px;
}
.sz-card h4{ margin:.1rem 0 .25rem; font-size:1rem; color:#0d4e86; }
.sz-card p{ margin:0; color:#2a4153; font-size:.9rem; }
.sz-actions{ display:flex; gap:8px; margin-top:8px; }
.sz-btn{
  display:inline-block; text-decoration:none; font-weight:700; font-size:.9rem;
  border-radius:999px; padding:8px 12px; border:2px solid #0d4e86; color:#0d4e86;
}
.sz-btn.primary{ background:#0d4e86; color:#fff; border-color:#0d4e86; }
.sz-btn:hover{ filter:brightness(1.05); }

/* Form */
.szChatbot-form{
  display:flex; gap:8px; padding:10px; border-top:1px solid #e6eef8; background:#fff;
}
.szChatbot-form input{
  flex:1; border:1px solid #dfeaf8; border-radius:12px; padding:10px 12px; font-size:.95rem;
}
.szChatbot-form button{
  background:#0d4e86; color:#fff; border:0; border-radius:12px; padding:0 14px; font-size:1rem; cursor:pointer;
}

/* Typing dots */
.sz-typing{ display:inline-flex; gap:3px; align-items:center; }
.sz-typing span{ width:6px; height:6px; border-radius:999px; background:#9bb9d6; animation:blip 1s infinite ease-in-out; }
.sz-typing span:nth-child(2){ animation-delay:.15s; }
.sz-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes blip{ 0%,80%,100%{opacity:.3; transform:translateY(0)} 40%{opacity:1; transform:translateY(-2px)} }

/* Small screens */
@media (max-width:540px){
  #szChatbotPanel{ right:-8px; width:calc(100vw - 20px); height:min(70vh, 580px); }
}



/* === Floating scroll buttons (shared for all pages) === */
.back-to-top,
.back-to-bottom{
  position: fixed;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #0d4e86;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(13,78,134,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 999;
}

.back-to-top   { bottom: 72px; }  /* sits above the down button */
.back-to-bottom{ bottom: 18px; }

.back-to-top.show,
.back-to-bottom.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-bottom:hover{ filter: brightness(1.05); }



/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-left, .reveal-right,
  .sustainability-content.in-view .sz-stats .stat-box {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 600px) {
  .footer-logo {
    height: 50px !important;  /* a bit smaller on phones */
  }
}

/* Responsive */
@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; }
  .sustainability { flex-direction: column; }
  .hero-title { font-size: 2rem; }
  .slide { min-width: 150px; height: 250px; }
}

/* Accessibility & polish */
.hero-icon:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* On small screens, allow even more height for the image */
@media (max-width: 560px) {
  .blog-hero img { max-height: 70vh; }
}