:root{
  --bg:#efefef;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.08);
  --text:#0b0b0b;
  --muted:rgba(0,0,0,.62);
  --line:rgba(0,0,0,.12);
  --red:#ff0000;
  --yellow:#ff0000;
  --shadow:0 18px 60px rgba(0,0,0,.15);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(255,255,255,0) 220px),
    var(--bg);
color:var(--text);
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
.container{width:min(1180px, 92vw); margin:0 auto}

.topbar{
border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, #0f1226 0%, #1a1f3c 35%, #7a3a0a 70%, #f26a00 100%);
  backdrop-filter: blur(10px);
}
.topbar .row{
  display:flex; gap:16px; justify-content:space-between; align-items:center;
  padding:10px 0;
  color:var(--muted);
  font-size:14px;
  flex-wrap:wrap;
}
.badge{
  display:inline-flex; align-items:center; gap: 6px;
  padding:7px 10px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.92);
}
.nav{ position:relative; z-index:55;
  border-bottom:1px solid var(--line);
  background:#cfd1d6;
  backdrop-filter: blur(14px);
}
.nav .inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:12px}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.2px}
.brand img{width:38px; height:38px}
.navlinks{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center}
.navlinks a{color:var(--muted); font-weight:700; padding:8px 10px; border-radius:12px}
.navlinks a:hover, .navlinks a.active{color:var(--text); background:rgba(255,255,255,.06)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.10)}
.btn.primary{
  border-color: rgba(225,29,72,.35);
  background: linear-gradient(135deg, rgba(225,29,72,.95), rgba(245,158,11,.95));
}
.btn.primary:hover{filter:saturate(1.05) brightness(1.03)}
.btn.small{padding: 8px 10px; border-radius:12px; font-weight:800}
.hamburger{display:none}

.hero{padding:56px 0 22px}
.herogrid{
  display:grid; grid-template-columns: 1.08fr .92fr; gap:30px; align-items:center;
}
.kicker{color:rgba(255,255,255,.72); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:12px}
.h1{
  font-size: clamp(34px, 4.2vw, 56px);
  line-height:1.04;
  margin:12px 0 12px;
}
.lead{color:var(--muted); font-size:18px; max-width:64ch}
.ctas{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 10px}
.stats{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}
.stat{
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  border-radius:16px;
  padding:14px 16px;
  min-width:160px;
}
.stat b{font-size:22px}
.heroimg{
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.heroimg img{width:100%; height:auto; display:block}

.section{padding:46px 0}
.section h2{font-size: clamp(26px, 3vw, 38px); margin:0 0 10px}
.section p{color:var(--muted); margin:0 0 18px}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}
.card{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
  border-radius: var(--radius);
  padding:18px;
}
.card h3{margin:8px 0 8px}
.card p{margin:0; color:var(--muted)}

.icon{
  width:46px; height:46px; border-radius:14px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  display:grid; place-items:center;
}
.icon svg{width:22px; height:22px; opacity:.92}

.split{display:grid; grid-template-columns: 1fr 1fr; gap:22px; align-items:center}
.media{
  border-radius:24px;
  border:1px solid var(--line);
  overflow:hidden;
  background:rgba(255,255,255,.92);
}
.media img{width:100%; display:block}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.pill{
  padding:8px 10px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.92); color:var(--muted); font-weight:800; font-size:13px
}

.meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:13px}
.partner{padding: 8px 10px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.92); color:rgba(255,255,255,.78); font-weight:900;
}
.partners{display:flex; gap:12px; flex-wrap:wrap}

.footer{
  border-top:1px solid var(--line);
  padding:28px 0 36px;
  background:#343a4f;
}
.footergrid{display:grid; grid-template-columns: 1.35fr .9fr .9fr; gap:20px}
.footer h4{margin:0 0 10px}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}
.small{color:var(--muted); font-size:14px}
.notice{
  border:1px solid rgba(245,158,11,.30);
  background:rgba(245,158,11,.08);
  border-radius:16px;
  padding:12px 14px;
  color:rgba(255,255,255,.84);
}

.fade-up{opacity:0; transform:translateY(12px); transition: all .65s ease}
.fade-up.in{opacity:1; transform:none}

.form{display:grid; gap:12px}
.input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  color:var(--text);
  outline:none;
}
textarea{min-height:140px; resize:vertical}

@media (max-width: 980px){
  .herogrid{grid-template-columns:1fr; gap:18px}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .footergrid{grid-template-columns:1fr}
  .navlinks{display:none}
  .hamburger{display:inline-flex}
  .mobilemenu{display:none}
  .mobilemenu.open{display:block}
  .mobilemenu a{
    display:block; padding:12px 0; border-bottom:1px solid var(--line);
    color:var(--muted); font-weight:900;
  }
  .mobilemenu a.active{color:var(--text)}
}


.red{ color: var(--red); }
.brandstack{ display:flex; flex-direction:column; line-height:1.05; }
.brandstack .l1{ font-weight:900; }
.brandstack .l2{ font-weight:800; font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.socials{ display:flex; gap:10px; flex-wrap:wrap; margin-}
.socialbtn{
  width:40px; height:40px; border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  display:grid; place-items:center;
  font-weight:900;
}
.socialbtn:hover{ filter:brightness(.98); }


.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#fff;
  background:#111;
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 16px 50px rgba(0,0,0,.20);
  z-index:80;
}
.wa-float:hover{ filter:brightness(1.05); }
.wa-float svg{ width:26px; height:26px; }
.wa-tip{
  position:fixed;
  right:84px;
  bottom:28px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.12);
  color:rgba(0,0,0,.78);
  padding: 8px 10px;
  border-radius:14px;
  font-weight:800;
  z-index:79;
}
@media (max-width: 520px){
  .wa-tip{ display:none; }
}


/* ===== Premium Infinity-style UI upgrades ===== */
.btn{
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 800;
  transition: transform .18s ease, filter .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn.primary{
  background: var(--red);
  border-color: rgba(0,0,0,.08);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.btn.primary:hover{ filter: brightness(1.03); box-shadow: 0 14px 32px rgba(0,0,0,.20); }
.btn.small{ padding: 10px 14px; border-radius: 10px; }

.nav{
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.topbar .row{ color: rgba(255,255,255,.92); }
.topbar .badge{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);
}
.topbar a{ color: rgba(255,255,255,.95); }

.lang{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  
  user-select: none;
}
.lang .label{ font-weight: 800; }
.langmenu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 160px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  padding: 6px;
  display: none;
  z-index: 120;
}
.langmenu a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  color: rgba(0,0,0,.82);
  font-weight: 800;
}
.langmenu a:hover{ background: rgba(0,0,0,.06); }
.lang.open .langmenu{ display: block; }

.iconbtn svg, .socialbtn svg{ width: 18px; height: 18px; display:block; }

/* Footer text on dark */
.footer{
  color: rgba(255,255,255,.92);
}
.footer a{ color: rgba(255,255,255,.78); }
.footer a:hover{ color: rgba(255,255,255,.95); }
.footer .small{ color: rgba(255,255,255,.70); }
.footer .notice{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
}
.footer h4{ color: rgba(255,255,255,.95); }

/* ===== Requested tweaks (Jan 2026) ===== */
.footer .socialbtn{
  background: var(--red) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: #ffffff !important;
}
.footer .socialbtn:hover{ filter: brightness(1.05); }
.footer .socialbtn svg{ color:#ffffff; }

/* Bigger logo in header/footer */
.brand img{ width: 54px !important; height: 54px !important; }
.footer .brand img{ width: 58px !important; height: 58px !important; }
@media (max-width: 520px){
  .brand img{ width: 46px !important; height: 46px !important; }
}

/* Hide mobile menu elements on desktop */
.hamburger{ display:none !important; }
.mobilemenu{ display:none !important; }

.footer .small[style*="margin-top:18px"]{ text-align:center !important; }

.card-ico{ display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center;
  border-radius:10px; background: rgba(255,0,0,.10); border:1px solid rgba(255,0,0,.18);
  margin-right:8px; font-size:16px; }

/* Footer section titles in red (Quick Links, Legal, Contact) */
.footer h4{
  color: var(--red) !important;
}

/* Projects page title emphasis */
.projects-title{
  color: var(--red) !important;
  font-size: 40px;
  font-weight: 900;
}


/* ===== Home page background (InfinityTech style) ===== */
.home-hero,
.hero.home{
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(255,0,0,.18), transparent 60%),
    radial-gradient(700px 360px at 80% 70%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(120deg, #0b0f2b 0%, #121742 45%, #1b214f 70%, #2a2f6a 100%);
  color:#ffffff;
}

.home-hero h1,
.home-hero h2,
.home-hero p,
.hero.home h1,
.hero.home h2,
.hero.home p{
  color:#ffffff;
}


/* ===== Company name uppercase (header & footer) ===== */
.brandstack, .brandstack *{
  text-transform: uppercase;
}

/* ===== Card images for Services & Products ===== */
.card-img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 14px;
  margin: 0 0 12px 0;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
@media (max-width: 980px){
  .card-img{ height: 150px; }
}

/* ===== Social media buttons (brand icons) ===== */
.socials{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.socialbtn{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.socialbtn svg{ width: 18px; height: 18px; }
.socialbtn:hover{
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-1px);
}
/* In light sections, keep same behavior */
.section .socialbtn, .card .socialbtn{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.82);
}
.section .socialbtn:hover, .card .socialbtn:hover{
  background: var(--red);
  border-color: var(--red);
  color:#fff;
}

/* ===== Page titles as red CTA-style H2 ===== */
.page-cta{
  display:inline-block;
  padding: 12px 22px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--red), #cc0000);
  color: #fff !important;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 14px 0;
  box-shadow: 0 10px 22px rgba(255,0,0,.22);
}


/* ===== Hero Slider ===== */
.hero-slider{
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 28px 80px rgba(0,0,0,.32);
}
.hero-slide{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .9s ease, transform 5.5s ease;
}
.hero-slide.is-active{
  opacity: 1;
  transform: scale(1.0);
}
.hero-slider-controls{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display:flex;
  gap: 10px;
  justify-content:center;
  align-items:center;
  z-index: 2;
}
.hero-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.22);
  padding: 0;
  
}
.hero-dot.is-active{
  background: var(--red);
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 0 0 6px rgba(255,0,0,.15);
}
@media (max-width: 980px){
  .hero-slider{ height: 280px; }
}

/* ===== Hero alignment: slider on same line as Home title ===== */
.hero .row, .hero .herogrid{ align-items: flex-start !important; }
.hero-slider{ margin-top: 0 !important; }

/* ===== Hero Slider upgrades (arrows + captions) ===== */
.hero-slider{ height: 420px; }

.hero-arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.22);
  color: #fff;
  font-size: 28px;
  line-height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 3;
}
.hero-arrow.prev{ left: 12px; }
.hero-arrow.next{ right: 12px; }
.hero-arrow:hover{ background: rgba(255,0,0,.22); border-color: rgba(255,255,255,.75); }

.hero-caption{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 30px;
  z-index: 2;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
  backdrop-filter: blur(8px);
}
.hero-caption .cap-title{
  font-weight: 900;
  font-size: 16px;
  color: rgba(255,255,255,.96);
}
.hero-caption .cap-sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.82);
}
@media (max-width: 980px){
  .hero-slider{ height: 300px; }
  .hero-caption{ bottom: 40px; }
}

/* ===== Animated Technology word ===== */
.tech-word{
  color: var(--red);
  font-weight: 900;
  display: inline-block;
  animation: techPulse 5.0s ease-in-out infinite;
}
@keyframes techPulse{
  0%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-1px) scale(1.04); }
  100%{ transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .tech-word{ animation: none !important; }
}

/* ===== Emphasis words (same size as Explore Services) ===== */
.emphasis-word{
  color: #000 !important;
  font-weight: 800;
  font-size: 15px;
}

/* ===== Red CTA-style badge ===== */
.cta-badge{
  display: inline-block;
  background: linear-gradient(90deg, #1b1430, #ff6a00);
  color: #ffffff !important;
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* ===== Stats section adjustments ===== */
.stats-section{
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.stats-card{
  padding: 16px 18px !important;
}

.stats-card h3{
  font-size: 22px !important;
  margin-bottom: 4px !important;
}

.stats-card p{
  font-size: 13px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.85);
}

/* ===== Single-line tight stats under hero slider ===== */
.stats-inline{
  padding: 10px 0 0;
  margin-top: 0px;  /* tuck closer to hero */
}
.stats-inline-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.stat-item{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,0,0,.28);
  background: rgba(255,255,255,.04);
}
.stat-num{
  color: var(--red);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
.stat-label{
  color: var(--red);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.1;
}
@media (max-width: 520px){
  .stat-item{ width: 100%; justify-content: center; }
}

/* ===== Hero stats (Infinity-style) ===== */
.hero-stats{
  display:flex;
  justify-content: center;
  gap: 80px;
  margin-top: 28px;
}
.hero-stat{
  text-align:center;
}
.hero-stat-num{
  font-size: 36px;
  font-weight: 900;
  color: transparent;
}
.hero-stat-label{
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255,255,255,.75);
}
@media (max-width: 768px){
  .hero-stats{
    gap: 28px;
    flex-wrap: wrap;
  }
  .hero-stat-num{ font-size: 30px; }
}

/* ===== Hero stats enhancements (count-up + brand gradient) ===== */
.hero-stats{
  margin-top: 34px; /* move slightly lower; adjust to 24px to move higher */
}

.hero-stat-num{
  background: linear-gradient(90deg, var(--red) 0%, #ff6a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 900;
}


/* ===== Tighten hero stats spacing (no gap between number & text) ===== */
.hero-stat{
  line-height: 1.05;
}
.hero-stat-num{
  margin-bottom: 0 !important;
}
.hero-stat-label{
  margin-top: 0 !important;
}

/* ===== Reduce header height ===== */
.header{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.navbar{
  min-height: 56px !important;
}
.navbar a{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ===== Further reduce header & logo size ===== */
.header{
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.navbar{
  min-height: 50px !important;
}

.header img,
.header .logo img{
  height: 36px !important; /* smaller logo */
  width: auto !important;
}

.navbar a{
  padding: 4px 8px !important;
  font-size: 14px !important;
}

/* ===== WhatsApp brand green ===== */
.wa-float{
  background: #25D366 !important;
  border-color: #25D366 !important;
  box-shadow: 0 12px 28px rgba(37,211,102,.35) !important;
}
.wa-float:hover{
  filter: brightness(0.95);
}
.wa-tip{
  background: #25D366 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.25);
}

/* Our Services section title */
.services-title{
  text-align:center;
  font-size:32px;
  font-weight:800;
  color:#e60000;
  margin-bottom:32px;
}

/* Adjust Our Services title spacing */
.section-header{
  margin-bottom: 16px;
}
.services-title{
  margin-top: 0;
  margin-bottom: 12px;
}

/* ===== Ensure Services section fits content and isn't blocked by floating WhatsApp ===== */
.services-section{
  padding-top: 30px !important;
  padding-bottom: 70px !important;
}

/* Extra scroll room so floating WhatsApp never covers the last row of cards */
body{
  padding-bottom: 110px;
}

/* Card header: icon + title on same line */
.card-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.card-header .icon{
  flex-shrink:0;
}
.card-header h3{
  margin:0;
}

/* ===== Card header enhancements (do all) ===== */
/* 1) Slightly adjust icon size */
.card-header .icon{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 2) Icon in brand red */
.card-header .icon{
  color: var(--red, #e60000);
  border-color: rgba(230,0,0,.22) !important;
}
/* Ensure SVG scales nicely */
.card-header .icon svg{
  width: 22px;
  height: 22px;
}
/* 3) Title vertical centering + spacing polish */
.card-header{
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.card-header h3{
  line-height: 1.15;
}

/* Our Services subtitle */
.services-subtitle{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
  color: #666;
  font-size: 16px;
}

/* Force center alignment for Services title + subtitle */
.services-header{
  text-align: center;
  margin-bottom: 28px;
}
.services-header .services-title{
  margin-bottom: 8px;
}
.services-header .services-subtitle{
  margin-left: auto;
  margin-right: auto;
}

/* Clickable cards disabled */
.card-link{
  text-decoration: none;
  color: inherit;
  display: block;
  
}
.card-link:focus{
  outline: 3px solid rgba(230,0,0,.35);
  outline-offset: 3px;
  border-radius: 14px;
}
.card-link:hover{
  transform: translateY(-2px);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Explore more services box */
.explore-services-box{
  margin-top: 36px;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.explore-services-link{
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--red, #e60000);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.explore-services-link:hover{
  opacity: .9;
}

/* Compact Services section so CTA fits */
.services-compact{
  padding-top: 20px !important;
  padding-bottom: 30px !important;
}
.services-compact .services-header{
  margin-bottom: 16px !important;
}
.services-compact .grid3{
  margin-bottom: 20px !important;
}
.services-compact .explore-services-box{
  margin-top: 12px !important;
}

/* ===== Services CTA: tighten gap so button sits directly under cards ===== */
.services-compact{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.services-compact .grid3{
  margin-bottom: 10px !important;
}

.services-compact .explore-services-box{
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce bottom margin/padding from cards in this section */
.services-compact .card{
  margin-bottom: 0 !important;
}

/* If the next section adds a big top padding, reduce it slightly */
.services-compact + section{
  padding-top: 20px !important;
}

/* Move Our Services title & subtitle upward */
.services-header-tight{
  margin-top: 0px !important; 
  margin-bottom: 10px !important;
}
.services-header-tight .services-title{
  margin-bottom: 4px !important;
}
.services-header-tight .services-subtitle{
  margin-bottom: 0 !important;
}

/* ===== Card lift animation (non-clickable) ===== */
.card{
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-2px);
}

/* Mission & Vision */
.mission-vision{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:24px;
  margin-top:12px;
}
.mv-card{
  background:#f7f7f7;
  padding:24px;
  border-radius:14px;
}
.mv-card h3{
  color:var(--red, #e60000);
  margin-bottom:8px;
}

/* ===== About section layout adjustments ===== */
.about-split .about-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items:start;
}

/* Title aligned near media row */
.about-split .about-content h2{
  margin-top: 0;
}

/* Media column with buttons under the frame */
.about-split .about-media{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.about-actions{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.about-actions .btn{
  width: 100%;
  justify-content:center;
}

/* Mission & Vision under about text (same left column) */
.mission-vision{
  margin-top: 18px !important;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.mission-vision .mv-card{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}

/* MV icons */
.mv-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(230,0,0,.08);
  color: var(--red, #e60000);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 40px;
}
.mv-icon svg{ width: 22px; height: 22px; }
.mission-vision .mv-card h3{ margin-top: 0; }

/* Responsive stacking */
@media (max-width: 900px){
  .about-split .about-grid{ grid-template-columns: 1fr; }
  .about-actions{ flex-direction: row; flex-wrap: wrap; }
  .about-actions .btn{ width: auto; }
}

/* Center About section like Hero / Our Services */
.about-split .container{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.about-split{
  padding-left: 0;
  padding-right: 0;
}

/* ===== About: Mission/Vision text stacked + buttons inline (fix) ===== */
.mission-vision .mv-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.mission-vision .mv-body{
  display:flex;
  flex-direction:column;
}
.mission-vision .mv-body h3{
  margin:0 0 6px 0;
}
.mission-vision .mv-body p{
  margin:0;
}

/* Buttons inline under media (desktop) */
.about-actions-inline{
  display:flex !important;
  flex-direction:row !important;
  gap:12px !important;
  flex-wrap:wrap;
}
.about-actions-inline .btn{
  width:auto !important;
}

/* ===== Compact About section ===== */
.about-compact .about-content h2{
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}
.about-compact .about-content p{
  margin-bottom: 8px !important;
}
.about-compact .mission-vision{
  margin-top: 6px !important;
}

/* ===== Strong About compact overrides (fix v2) ===== */
#about.about-compact{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
#about.about-compact .about-grid{
  gap: 22px !important;
}
#about.about-compact .about-content h2{
  margin-top: 0px !important;   /* move title up */
  margin-bottom: 4px !important;
  line-height: 1.05 !important;
}
#about.about-compact .about-content p{
  margin-top: 0 !important;
  margin-bottom: 6px !important; /* reduce space before mission/vision */
}
#about.about-compact .mission-vision{
  margin-top: 6px !important;
  gap: 10px !important;
}
#about.about-compact .mv-card{
  padding: 18px !important;
}

/* Core Values under media frame */
.core-values{
  margin-top:16px;
  padding:16px;
  background:#f7f7f7;
  border-radius:14px;
}
.core-values h3{
  color:var(--red,#e60000);
  margin-bottom:8px;
}
.core-values ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px 16px;
}
.core-values li::before{
  content:"• ";
  color:var(--red,#e60000);
}

/* ===== Why Choose Us aligned with above section ===== */
.why-compact{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
.why-compact h2{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}
.why-compact .container{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Why Choose Us title styling */
.text-red{ color: var(--red,#e60000) !important; }
.text-center{ text-align:center; }
.section-title{ margin-bottom:8px; }
.section-subtitle{ max-width:720px; margin:0 auto 24px auto; }

/* Align icons like Services cards */
.card-header-inline{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.card-header-inline .icon{
  width:36px;
  height:36px;
}

/* Match Our Services title/subtitle layout */
.section-title{
  margin-bottom:6px;
}
.section-subtitle{
  margin:0 auto 32px auto;
  max-width:760px;
  color:#555;
}

/* ===== Force center subtitle under Why Choose Us ===== */
.section-header-centered{
  text-align: center;
  margin-bottom: 32px;
}
.section-header-centered h2{
  margin-bottom: 6px;
}
.section-header-centered p{
  margin: 0 auto;
  max-width: 760px;
}

.brand-red{
  color: var(--red,#e60000);
}

/* ===== About title & subtitle centered and moved up ===== */
.about-header-centered{
  text-align:center;
  margin-bottom:16px;
}
.about-header-centered h2{
  margin-bottom:6px;
}
.about-header-centered p{
  margin-top:0;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

/* ===== FORCE CENTER ABOUT TITLE (FINAL) ===== */
.section-header.force-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:20px;
}
.section-header.force-center h2{
  margin-bottom:6px !important;
}
.section-header.force-center p{
  margin:0 !important;
  max-width:720px;
}

/* Featured Projects header match (home) */
.featured-projects .section-header h2{
  color: var(--red,#e60000);
  text-align:center;
}
.featured-projects .section-header p{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Force center Featured Projects like Why Choose Us */
.section-header.force-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.section-header.force-center h2,
.section-header.force-center p{
  text-align:center;
}

/* Reduce vertical spacing for Featured Projects header */
.featured-projects .section-header.force-center,
.section-header.force-center{
  margin-top: 20px;
  margin-bottom: 24px;
}

/* === FINAL FIX: Reduce TOP spacing above Featured Projects === */
section.featured-projects {
  padding-top: 32px !important;
}

/* Tighten header block inside Featured Projects */
section.featured-projects .section-header {
  margin-top: 0 !important;
  margin-bottom: 24px;
}

/* === Reduce TOP spacing above Trusted Partners === */
section.trusted-partners{
  padding-top:32px !important;
}
section.trusted-partners .section-header{
  margin-top:0 !important;
}

/* FORCE move Trusted Partners up under See All Projects */
section.trusted-partners{
  padding-top: 16px !important;
}
section.trusted-partners .section-header{
  margin-top: 0 !important;
}

/* FORCE move Ready to grow smarter CTA up and style like Book an on-site assessment */
section.ready-cta{
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
section.ready-cta .cta-box,
section.ready-cta .cta-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(135deg, #e60000, #b30000);
  color: #fff;
}
section.ready-cta h2{
  font-size: 32px;
  margin-bottom: 12px;
}
section.ready-cta p{
  font-size: 16px;
  opacity: .95;
}
section.ready-cta .btn,
section.ready-cta a.btn{
  background:#fff;
  color:#e60000;
  font-weight:700;
  padding:14px 28px;
  border-radius:999px;
}

/* === Compact Featured Projects case study placeholders === */
section.featured-projects{
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.featured-projects .grid3{
  gap: 12px !important;
}

.featured-projects .card{
  padding: 12px !important;
  border-radius: 18px !important;
}

.featured-projects .media{
  border-radius: 16px !important;
}

.featured-projects .media img{
  width: 100%;
  height: 120px;
  object-fit: cover;
  display:block;
}

.featured-projects .meta{
  font-size: 12px !important;
  gap: 8px !important;
}

.featured-projects h3{
  font-size: 16px !important;
  margin: 8px 0 6px 0 !important;
}

.featured-projects .card p{
  font-size: 13px !important;
  margin: 0 !important;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;           /* clamp to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px){
  .featured-projects .media img{ height: 110px; }
}

/* === Further reduce TOP space above Featured Projects === */
section.featured-projects{
  padding-top: 20px !important;
}

section.featured-projects .section-header{
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* === ULTRA-COMPACT Featured Projects spacing === */
section.featured-projects{
  padding-top: 8px !important;
  padding-bottom: 28px !important;
}

section.featured-projects .section-header{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.featured-projects .grid3{
  margin-top: 0 !important;
}

/* === CTS Social brand icons (bold white, hover red) === */
.cts-social{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:14px;
}
.cts-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  text-decoration:none;
  transition: transform .2s ease, background-color .2s ease;
}
.cts-social a svg{
  width:22px;
  height:22px;
  fill:#ffffff;
  transition: fill .2s ease;
}
.cts-social a:hover svg{
  fill:#ff0000; /* pure red */
}
.cts-social a:hover{
  transform: translateY(-2px);
}


.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:15px 0;font-size:14px;color:#ccc}
.footer-bottom-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.footer-bottom-left{text-align:left}
.footer-bottom-center{text-align:center;color:#aaa}
.footer-bottom-right{text-align:right}
.footer-bottom-right a{color:#ccc;text-decoration:none}
.footer-bottom-right a:hover{color:#e60000}
.footer-bottom-right .separator{margin:0 8px;color:#666}
@media(max-width:768px){
.footer-bottom-inner{grid-template-columns:1fr;row-gap: 6px;text-align:center}
.footer-bottom-left,.footer-bottom-center,.footer-bottom-right{text-align:center}
}


.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:14px 0;font-size:14px;color:#ccc}
.footer-bottom-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.footer-bottom-left{text-align:left}
.footer-bottom-center{text-align:center}
.footer-bottom-right{text-align:right}
.footer-bottom-right a{color:#ccc;text-decoration:none}
.footer-bottom-right a:hover{color:#e60000}
.footer-bottom-right .separator{margin:0 8px;color:#666}
@media(max-width:768px){
.footer-bottom-inner{grid-template-columns:1fr;row-gap: 6px;text-align:center}
.footer-bottom-left,.footer-bottom-center,.footer-bottom-right{text-align:center}
}


/* Compact bottom footer */
.footer-bottom{
  padding:8px 0;
  font-size: 12px;
}
.footer-bottom-inner{
  align-items:center;
}
.footer-bottom-left,
.footer-bottom-center,
.footer-bottom-right{
  font-size: 12px;
}


/* Remove all extra space under bottom footer */
.footer-bottom{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
footer{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}


/* Balanced spacing for bottom footer */
.footer-bottom{
  padding-top:8px !important;
  padding-bottom:8px !important;
}
footer{
  padding-bottom:0 !important;
}


/* Uniform font size for bottom footer content */
.footer-bottom,
.footer-bottom *{
  font-size:13px !important;
  line-height:1.4;
}


/* Footer social icons */
footer .social a{
  font-size:20px;
  color:#ffffff;
  margin-right:12px;
  transition:color .3s ease, transform .2s ease;
}
footer .social a:hover{
  color:#e60000;
  transform:translateY(-2px);
}


/* Uniform footer social icons */
footer .social a,
footer .social-icons a,
footer .cts-social a{
  font-size:22px;
  color:#ffffff;
  margin-right:14px;
  transition:color .3s ease, transform .2s ease;
}
footer .social a:hover,
footer .social-icons a:hover,
footer .cts-social a:hover{
  color:#e60000;
  transform:translateY(-2px);
}


/* Tighter spacing for footer social icons */
footer .social a,
footer .social-icons a,
footer .cts-social a{
  margin-right:8px !important;
}


/* Center and tighter spacing for footer column 1 social icons */
footer .cts-social,
footer .social,
footer .social-icons{
  display:flex;
  justify-content:center;
}

footer .cts-social a,
footer .social a,
footer .social-icons a{
  margin-right:6px !important;
}

footer .cts-social a:last-child,
footer .social a:last-child,
footer .social-icons a:last-child{
  margin-right:0 !important;
}


.footer-social-title{
  text-align:center;
  font-weight:700;
  margin-bottom:6px;
  color:#ffffff;
}


/* Left align & ultra-tight spacing for footer social icons */
footer .cts-social,
footer .social,
footer .social-icons{
  justify-content:flex-start !important;
  text-align:left;
}

footer .cts-social a,
footer .social a,
footer .social-icons a{
  margin-right:4px !important;
}

footer .cts-social a:last-child,
footer .social a:last-child,
footer .social-icons a:last-child{
  margin-right:0 !important;
}

.footer-social-title{
  text-align:left !important;
}


/* Responsive alignment for footer social icons */
/* Desktop: left aligned */
footer .cts-social,
footer .social,
footer .social-icons{
  display:flex;
  justify-content:flex-start;
  text-align:left;
}

/* Mobile: center aligned */
@media (max-width: 768px){
  footer .cts-social,
  footer .social,
  footer .social-icons{
    justify-content:center !important;
    text-align:center !important;
  }

  .footer-social-title{
    text-align:center !important;
  }
}


/* Align social icons exactly with 'Follow us on' title (left-aligned) */
.footer-social-title{
  text-align:left !important;
}

footer .cts-social,
footer .social,
footer .social-icons{
  display:flex;
  justify-content:flex-start !important;
  align-items:center;
}


/* FORCE title and icons to share same left edge */
.footer-social-title{
  margin-left:0 !important;
  padding-left:0 !important;
  width:100%;
}
.footer-social-title + .cts-social{
  margin-left:0 !important;
  padding-left:0 !important;
  width:100%;
  justify-content:flex-start !important;
}
.footer-social-title,
.cts-social{
  align-self:flex-start !important;
}


/* FINAL FIX: make footer column 1 social icons start exactly under title */
footer .footer-social-title{
  display:block;
  width:100%;
  margin:0 0 8px 0 !important;
  text-align:left !important;
}

footer .socials{
  display:flex !important;
  width:100%;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 !important;
  padding:0 !important;
}

footer .socials a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}


/* Make footer social icons true glyph-style (no square boxes) so first icon aligns with title start */
footer .cts-social{
  margin-top:8px !important;
  gap:18px !important;
}
footer .cts-social a{
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:none !important;
  transform:none !important;
}
footer .cts-social a:hover{
  background:transparent !important;
}
footer .cts-social svg{
  width:22px !important;
  height:22px !important;
  display:block;
}


/* FORCE footer bottom to use same background as topbar */
.topbar {
  background: linear-gradient(90deg, #2b1b4b 0%, #8a3b00 100%);
}

footer .footer-bottom,
.footer .footer-bottom,
.footer-bottom {
  background: linear-gradient(90deg, #2b1b4b 0%, #8a3b00 100%) !important;
}



/* About page tabs (Equity-style simple subnav) */
.about-tabs{ margin-top:18px; }
.about-tabs-nav{
  display:flex;
  gap: 6px;
  flex-wrap: nowrap;
  border-bottom:1px solid rgba(255,255,255,.14);
  padding-bottom:10px;
  margin-bottom:14px;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.about-tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background:transparent;
  color:inherit;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight:700;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;

  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.about-tab:hover{ transform:translateY(-1px); border-color: rgba(230,0,0,.6); }
.about-tab.is-active{
  background: linear-gradient(90deg, rgba(230,0,0,.95), rgba(230,0,0,.65));
  border-color: rgba(230,0,0,.8);
  color:#fff;
}
.about-panel-title{ margin:0 0 8px 0; }
.about-bullets{ margin:10px 0 0 18px; }
.about-bullets li{ margin:6px 0; }
.about-two-col{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
}
@media (max-width: 860px){
  .about-two-col{ grid-template-columns: 1fr; }
}
.team-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:12px;
}
@media (max-width: 860px){
  .team-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .team-grid{ grid-template-columns: 1fr; }
}
.team-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
  background: rgba(255,255,255,.03);
}
.team-card .avatar{
  width:44px; height:44px;
  border-radius:12px;
  background: rgba(255,255,255,.12);
}
.team-meta{ display:flex; flex-direction:column; line-height:1.15; }
.team-meta span{ opacity:.8; font-size:.92em; }



/* Equity-style leadership profiles */
.leadership-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:14px;
}
@media (max-width: 900px){
  .leadership-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px){
  .leadership-grid{ grid-template-columns: 1fr; }
}
.leader-card{
  display:block;
  text-decoration:none;
  color:inherit;
}
.leader-photo{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 5;
  border-radius:16px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.14);
}
.leader-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.leader-cta{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-weight:800;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;
  border-radius:999px;
}
.leader-card:hover .leader-overlay,
.leader-card:focus-visible .leader-overlay{
  opacity:1;
  transform: translateY(0);
}
.leader-card:hover .leader-cta{
  border-color: rgba(230,0,0,.75);
}
.leader-meta{
  padding:10px 2px 0 2px;
}
.leader-name{ font-weight:900; }
.leader-role{ opacity:.8; margin-top:2px; }



/* Equity-style leadership cards + modal */
.eq-leadership-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:18px;
  margin-top:16px;
}
@media (max-width: 980px){
  .eq-leadership-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .eq-leadership-grid{ grid-template-columns: 1fr; }
}

.eq-leader-card{
  text-align:left;
  background: #f2f2f2;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  overflow:hidden;
  padding:0;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.eq-leader-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.eq-leader-photo img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 4/5;
  object-fit: cover;
  background:#ddd;
}
.eq-leader-info{
  background:#ededed;
  padding:14px 14px 12px;
}
.eq-leader-name{
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#b30000;
  line-height:1.15;
}
.eq-leader-title{
  margin-top:6px;
  font-size:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
  opacity:.85;
}
.eq-leader-viewrow{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#b30000;
  font-weight:800;
  opacity:0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.eq-leader-card:hover .eq-leader-viewrow,
.eq-leader-card:focus-visible .eq-leader-viewrow{
  opacity:1;
  transform: translateY(0);
}
.eq-leader-card:focus-visible{ outline: 2px solid rgba(230,0,0,.6); outline-offset:2px; }

/* Modal */
.eq-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.eq-modal.is-open{ display:block; }
.eq-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.72); }
.eq-modal-panel{
  position:relative;
  width:min(980px, calc(100% - 60px));
  max-height: calc(100% - 60px);
  overflow:auto;
  background:#fff;
  margin:30px auto;
  border-radius:6px;
  padding:26px 30px 28px;
}
.eq-modal-close{
  position:absolute;
  top:0;
  right:0;
  width:52px;
  height:52px;
  border:0;
  background:#b30000;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.eq-modal-grid{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:28px;
  align-items:start;
}
@media (max-width: 780px){
  .eq-modal-grid{ grid-template-columns: 1fr; }
}
.eq-modal-left{ max-width:300px; }
@media (max-width: 780px){
  .eq-modal-left{ max-width:none; }
}
.eq-modal-meta{ margin-top:12px; }
.eq-modal-photo{
  width:100%;
  aspect-ratio: 4/5;
  background: #ddd center/cover no-repeat;
}
.eq-modal-name{
  font-size:20px;
  font-weight:900;
  color:#000;
  line-height:1.15;
}
.eq-modal-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#666;
  margin:0 0 4px 0;
}
.eq-modal-body{
  margin-top:18px;
  font-size:14px;
  line-height:1.7;
  color:#333;
}

.eq-modal-bio{
  margin: 0;
  color: #222;
}

.eq-modal-note{
  margin: 0;
  opacity: .9;
}

/* Bio modal content (PPC-style sections) */
.eq-modal-section{ margin:0 0 16px; }
.eq-modal-section h4{
  margin:0 0 8px;
  font-size:14px;
  font-weight:800;
  color:#111;
}
.eq-modal-section ul{
  margin:0;
  padding-left:18px;
}
.eq-modal-section li{ margin:4px 0; }
.eq-modal-appointed{ margin:0; font-style:italic; }

.eq-modal-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px 26px;
}
@media (max-width: 900px){
  .eq-modal-split{ grid-template-columns: 1fr; }
}

body.eq-modal-open{ overflow:hidden; }


/* About tabs: boxed + emoji + red active gradient (Infinity-style) */
.about-tabs-nav::-webkit-scrollbar{ display:none; }
.about-tab .tab-emoji{
  font-size: 15px;
  line-height: 1;
}
.about-tab .tab-label{
  white-space: nowrap;
}



.about-tab[aria-selected="true"]{
  background: linear-gradient(90deg, #7a0000 0%, #e60000 55%, #ff2e2e 100%);
  border-color: transparent;
  color: #ffffff;
}
.about-tab[aria-selected="true"] .tab-emoji{ filter: none; }
.about-tab:hover{
  border-color: rgba(230,0,0,.55);
}



/* WHAT WE DO */


/* WHAT WE DO: icon sections inside About tabs */
.whatwedo-sections{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:4px;
}
.wtd-card{
  border:1px solid rgba(230,0,0,.45);
  background: rgba(255,255,255,.03);
  border-radius:14px;
  padding:14px 14px 12px;
}
.wtd-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.wtd-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(230,0,0,.55);
  background: rgba(230,0,0,.10);
}
.wtd-icon i{
  color:#e60000;
  font-size:16px;
}
.wtd-title{
  margin:0;
  font-size:16px;
  font-weight:800;
}
.wtd-text{
  margin:0;
  opacity:.92;
  line-height:1.45;
  font-size:14px;
}
@media (max-width: 980px){
  .whatwedo-sections{ grid-template-columns: 1fr; }
}


/* About > Leadership extra sections */
.eq-section-title{
  margin: 22px 0 12px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}
.eq-governance{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 14px 16px;
}
.eq-governance p{ margin: 0 0 10px; opacity: .92; }
.eq-governance-list{ margin: 0; padding-left: 18px; }
.eq-governance-list li{ margin: 6px 0; }

/* Leadership sections */
.eq-leadership-section{ margin-top: 18px; }
.eq-leadership-section:first-child{ margin-top: 0; }

/* Governance expanded text */
.gov-subtitle{margin-top:14px;font-weight:700;color:#e60000;}
.gov-text{margin:6px 0 12px;opacity:.9;}

/* Governance cards */
.gov-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:20px;}
.gov-card{border:1px solid #e60000;border-radius:10px;padding:18px;text-align:center;}
.gov-card i{font-size:28px;color:#e60000;margin-bottom:10px;}
.gov-card h4{margin:6px 0;font-weight:700;}
.gov-card p{font-size:14px;opacity:.9;}
.gov-download{display:inline-block;margin-top:10px;font-size:13px;color:#e60000;font-weight:600;text-decoration:none;}
.gov-download:hover{text-decoration:underline;}

/* Governance intro text */
.gov-intro{
  margin-bottom:18px;
  opacity:.9;
  max-width:900px;
}

/* Governance aligned layout */
.gov-aligned{
  max-width:1200px;
  margin:0;
}
.gov-aligned h3,
.gov-aligned .gov-intro,
.gov-aligned .gov-card-grid{
  margin-left:0;
  text-align:left;
}

/* Governance title + description alignment */
.gov-left{
  margin-left:0 !important;
  padding-left:0 !important;
  text-align:left;
}

/* tighter spacing */
.eq-governance h2,
.eq-governance h3{
  margin-bottom:6px;
}
.gov-intro{
  margin-top:0;
  margin-bottom:12px;
}

/* Governance title + intro tighter spacing + exact left alignment */
.eq-leadership-section .eq-section-title{ margin-bottom: 6px; }
.eq-leadership-section .gov-intro{
  margin: 0 0 10px 0;
  padding: 0;
  max-width: 900px;
  opacity: .9;
}
/* Slightly tighten cards block spacing from intro */
.eq-leadership-section .eq-governance{ margin-top: 0; padding-top: 0; }
.eq-leadership-section .gov-card-grid{ margin-top: 12px; }

/* Red border for all About panel titles */
.about-page .eq-section-title,
.about-page .about-tabs button,
.about-page .about-tabs .tab,
.about-page h2.about-title,
.about-page h3.about-title{
  border-bottom: 2px solid #e60000;
  padding-bottom: 6px;
}

/* Remove underline/border only for Leadership subsection titles */
.about-page .eq-leadership-section .eq-section-title{
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* What We Do card bullets */
.wtd-bullets{
  margin: 10px 0 0 18px;
  padding: 0;
}
.wtd-bullets li{
  margin: 6px 0;
}

/* Partnerships accordion */
.acc-section{ margin-top:14px; border:1px solid rgba(230,0,0,.25); border-radius:12px; overflow:hidden; }
.acc-toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background: rgba(0,0,0,.05);
  border:0;
  color: inherit;
  font-weight:700;
  cursor:pointer;
  text-align:left;
}
.acc-toggle i{ color:#e60000; }
.acc-title{ flex:1; }
.acc-chevron{ transition: transform .2s ease; }
.acc-toggle[aria-expanded="false"] .acc-chevron{ transform: rotate(-90deg); }
.acc-content{
  /* collapsed by default (opened via .acc-open + JS height calc) */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 16px;
  transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
}

.acc-open > .acc-content{
  opacity: 1;
  padding: 14px 16px;
}

/* tighter spacing variant (used in Who we are / Philosophy / Core values) */
.acc-section.acc-compact{ margin-top: 10px; }
.acc-section.acc-compact .acc-toggle{ padding: 12px 14px; }
.acc-section.acc-compact .acc-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
  text-transform:uppercase;
}
.acc-section.acc-compact .acc-content{ padding-left: 14px; padding-right: 14px; }
.acc-section.acc-compact.acc-open > .acc-content{ padding: 12px 14px 14px; }
.acc-section.acc-compact .acc-content p{ margin-bottom: 8px; }
.acc-section.acc-compact .model-cards{ margin-top: 8px; gap: 10px; }
.acc-content p{ margin: 0 0 10px 0; }
.partner-logos{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.partner-pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.12);
  font-weight:700;
}
.model-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}
.model-card{
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:12px;
  background: rgba(0,0,0,.08);
}
.model-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 6px 0;
}
.model-card-head i{ color:#e60000; font-size:18px; line-height:1; }
.model-card-head h4{ margin:0; font-size:16px; }
.model-card p{ margin:0; }
.model-card p{ margin:0; opacity:.9; }

/* Who we are subsection titles */
.about-block-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
  text-transform:uppercase;
  margin:0 0 12px 0;
}
.industries-list{ margin: 6px 0 0 18px; }
@media (max-width: 720px){
  .model-cards{ grid-template-columns: 1fr; }
}

/* Stakeholders: icon cards */
.stakeholders-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.stakeholder-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.08);
}
.stakeholder-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(230,0,0,.10);
  border:1px solid rgba(230,0,0,.25);
  flex:0 0 auto;
}
.stakeholder-icon i{
  color:#e60000;
  font-size:18px;
}
.stakeholder-title{
  margin:0 0 6px 0;
  font-size:16px;
}
.stakeholder-desc{
  margin:0;
  opacity:.92;
}
@media (max-width: 720px){
  .stakeholders-grid{ grid-template-columns: 1fr; }
}

/* Sustainability & ESG icon cards */
.esg-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;
}
.esg-card{
  padding:18px;
  border-radius:14px;
  border: none;
  background: rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  min-height:190px; /* align with other card sections */
  transition: transform .18s ease, box-shadow .18s ease;
}
.esg-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.esg-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(230,0,0,.12);
  margin-bottom:10px;
}
.esg-icon i{
  color:#e60000;
  font-size:20px;
}
.esg-card h3{
  margin:0 0 8px 0;
  font-size:17px;
}
.esg-card p{
  margin:0;
  opacity:.92;
}
/* ESG KPIs */
.esg-kpis{
  display:flex;
  gap:14px;
  margin-top:14px;
  flex-wrap:wrap;
}
.esg-kpi{
  flex:1 1 160px;
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.06);
}
.esg-kpi-num{
  font-size:18px;
  font-weight:800;
  color:#e60000;
  line-height:1.1;
}
.esg-kpi-label{
  margin-top:4px;
  opacity:.9;
  font-weight:600;
  font-size:13px;
}
/* ESG downloads */
.esg-downloads{
  margin-top:14px;
  border-radius:14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.06);
}
.esg-downloads-title{ margin:0 0 10px 0; font-size:16px; color:#e60000; }
.esg-download-links{ display:flex; flex-wrap:wrap; gap:10px; }
.esg-dl{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(230,0,0,.25);
  background: rgba(0,0,0,.08);
  text-decoration:none;
}
.esg-dl i{ color:#e60000; }
.esg-dl:hover{ border-color: rgba(230,0,0,.55); }
@media (max-width: 720px){
  .esg-grid{ grid-template-columns: 1fr; }
}

/* Certifications & Accreditations */
.cert-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 14px 0;
}
.cert-filter{
  border:1px solid rgba(230,0,0,.35);
  background: rgba(0,0,0,.06);
  color: inherit;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
}
.cert-filter.is-active{
  background: linear-gradient(90deg, rgba(230,0,0,.95), rgba(255,70,70,.85));
  color:#fff;
  border-color: rgba(230,0,0,.65);
}
.cert-badges{
  margin:6px 0 16px 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.06);
}
.cert-badges-title{
  font-weight:800;
  margin-bottom:10px;
  color:#e60000;
}
.cert-badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cert-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(230,0,0,.25);
  background: rgba(0,0,0,.08);
  font-weight:700;
}
.cert-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;
}
.cert-card{
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(230,0,0,.25);
  background: rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
  min-height: 210px;
}
.cert-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.cert-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(230,0,0,.12);
  margin-bottom:10px;
}
.cert-icon i{
  color:#e60000;
  font-size:20px;
}
.cert-card h3{ margin:0 0 10px 0; font-size:17px; }
.cert-card ul{ margin:0; padding-left:18px; opacity:.92; }
.cert-note{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.06);
}
.cert-cta{
  margin-top:14px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(230,0,0,.25);
  background: rgba(0,0,0,.08);
}
.cert-cta h3{ margin:0 0 6px 0; color:#e60000; }
.cert-cta p{ margin:0 0 12px 0; opacity:.92; }
.cert-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cert-timeline{
  margin-top:14px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.06);
}
.cert-timeline h3{ margin:0 0 10px 0; color:#e60000; }
.cert-steps{ margin:0; padding-left:0; list-style:none; display:grid; gap:10px; }
.cert-step{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.04);
}
.cert-step-tag{
  flex:0 0 auto;
  font-weight:900;
  color:#e60000;
  min-width:54px;
}
.cert-step-desc{ opacity:.92; }
@media (max-width: 720px){
  .cert-grid{ grid-template-columns: 1fr; }
}


/* WHO WE ARE CONTENT */
#tab-who .mv-block p{margin:10px 0;}
#tab-who .about-bullets{margin:10px 0 0 18px;padding:0;}
#tab-who .about-bullets li{margin:8px 0; line-height:1.4;}

/* WHO WE ARE refinements */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.who-card-title{display:inline-flex;align-items:center;gap:10px;}
.who-card-title i{color:#e60000;}
.who-timeline{position:relative;margin:14px 0 18px 0;padding-left:18px;}
.who-timeline:before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:rgba(230,0,0,.35);}
.who-timeline-item{position:relative;display:flex;padding:10px 0;}
.who-timeline-dot{position:absolute;left:-1px;top:18px;width:14px;height:14px;border-radius:999px;background:rgba(230,0,0,.95);box-shadow:0 0 0 4px rgba(230,0,0,.15);}
.who-timeline-content{padding-left:28px;}
.who-timeline-content h4{margin:0 0 6px 0;font-weight:800;}
.who-timeline-content p{margin:0;opacity:.92;}
.philosophy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.philosophy-card,.value-card{display:flex;flex-direction:column;min-height:190px;}
.values-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media (max-width:900px){.values-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:720px){.philosophy-grid{grid-template-columns:1fr;}.values-grid{grid-template-columns:1fr;}.philosophy-card,.value-card{min-height:unset;}}


/* WHO WE ARE icon-card sizing */
#tab-who .icon-card{
  padding: 14px 14px;
  border-radius: 12px;
}
#tab-who .philosophy-grid{ gap: 12px; }
#tab-who .values-grid{ gap: 12px; }

#tab-who .icon-card h4.card-title-inline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px 0;
  font-weight: 900;
}
#tab-who .icon-card 
#tab-who .icon-card p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}


/* WHO WE ARE TRUEFIX icon-title alignment */
#tab-who .icon-card {
  padding: 12px 12px !important;
  border-radius: 12px;
}
#tab-who .philosophy-grid, #tab-who .values-grid {
  gap: 10px !important;
}
#tab-who .icon-card h4.card-title-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 6px 0 !important;
  font-weight: 900 !important;
}
#tab-who .icon-card 
#tab-who .icon-card p.card-text-compact {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

.eq-modal-appointedline{ margin:0; }

.eq-modal-right{ font-size:14px; line-height:1.7; color:#333; }


/* --- Leadership Modal V2 (PPC-style) --- */
.leader-name{
  color:#d10000; /* CTS red */
  margin: 0 0 6px 0;
}
.leader-role{
  margin: 0 0 12px 0;
}


/* === Leadership Modal FINAL FIX === */
.leader-left .leader-name,
#modal-name,
.red-name {
  color: #d10000 !important; /* CTS Red */
  font-weight: 700;
}

.leader-left .leader-role,
#modal-title {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  text-transform: uppercase;
  color: #555;
}


/* --- Leadership Modal: Name red + Title under name --- */
.eq-modal .eq-modal-meta{ margin-top: 14px; }
.eq-modal .eq-modal-name{
  color: #d10000 !important; /* CTS red */
  font-weight: 800;
  margin: 0 0 6px 0;
}
.eq-modal .eq-modal-title{
  margin: 0;
  text-transform: none;
}



/* WHAT WE DO — force horizontal row cards (one card per row) */
#tab-whatwedo .what-we-do-cards,
#tab-whatwedo .eq-cards-grid,
#tab-whatwedo .grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 20px;
}

#tab-whatwedo .wtd-card,
#tab-whatwedo .eq-card {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure image + content align nicely */
#tab-whatwedo .wtd-card img,
#tab-whatwedo .eq-card img {
  max-width: 160px;
  width: 160px;
  height: auto;
  margin-right: 16px;
}



/* WHAT WE DO: horizontal row cards (one card per line) */
#tab-whatwedo .whatwedo-sections{
  grid-template-columns: 1fr !important;
  gap: 16px;
}

#tab-whatwedo .wtd-card{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px 18px;
}

#tab-whatwedo .wtd-head{
  margin-bottom: 0;
  flex: 0 0 260px; /* left column width */
}

#tab-whatwedo .wtd-title{
  font-size: 17px;
}

#tab-whatwedo .wtd-body{
  flex: 1 1 auto;
  min-width: 0;
}

#tab-whatwedo .wtd-bullets{
  margin: 10px 0 0;
  padding-left: 18px;
}

@media (max-width: 900px){
  #tab-whatwedo .wtd-card{
    flex-direction: column;
  }
  #tab-whatwedo .wtd-head{
    flex: 1 1 auto;
  }
}



/* WHAT WE DO: place content under the title (vertical inside each card) */
#tab-whatwedo .whatwedo-sections{
  grid-template-columns: 1fr !important; /* one card per row */
}

#tab-whatwedo .wtd-card{
  display: block !important;
  padding: 16px 18px;
}

#tab-whatwedo .wtd-head{
  margin: 0 0 10px 0 !important;
}

#tab-whatwedo .wtd-body{
  margin-top: 8px;
}

#tab-whatwedo .wtd-bullets{
  margin: 10px 0 0;
  padding-left: 18px;
}



/* WHAT WE DO: two-column custom layout */
#tab-whatwedo .wwd-two-cols{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

#tab-whatwedo .wwd-col{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 900px){
  #tab-whatwedo .wwd-two-cols{
    grid-template-columns: 1fr;
  }
}



/* WHAT WE DO: left content, right image placeholders */
#tab-whatwedo .wwd-two-cols{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
}

#tab-whatwedo .wwd-col{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#tab-whatwedo .wwd-image-placeholder{
  background: #f4f4f4;
  border: 2px dashed #ccc;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
}

@media (max-width: 900px){
  #tab-whatwedo .wwd-two-cols{
    grid-template-columns: 1fr;
  }
  #tab-whatwedo .wwd-image-placeholder{
    height: 140px;
  }
}



/* WHAT WE DO: align image placeholders with cards */
#tab-whatwedo .wwd-left .wtd-card{
  min-height: 220px;
}

#tab-whatwedo .wwd-image-placeholder{
  min-height: 220px;
  background: #f4f4f4;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
  margin-bottom: 16px;
}

#tab-whatwedo .wwd-right{
  padding-top: 0;
}



/* WHAT WE DO: auto-align placeholders to card height using row grid */
#tab-whatwedo .wwd-two-cols{
  display: block; /* rows control layout */
}

#tab-whatwedo .wwd-rows{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#tab-whatwedo .wwd-row{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
  align-items: stretch; /* make both cells same height */
}

#tab-whatwedo .wwd-row .wtd-card{
  height: 100%;
  margin: 0;
}

#tab-whatwedo .wwd-row .wwd-image-placeholder{
  height: 100%;
  background: #f4f4f4;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
}

/* responsive */
@media (max-width: 900px){
  #tab-whatwedo .wwd-row{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #tab-whatwedo .wwd-row .wwd-image-placeholder{
    min-height: 160px;
  }
}



/* ESG / Sustainability cards: align icon and title on same line */
#tab-esg .card-header,
#tab-sustainability .card-header,
.esg-card .card-header{
  display: flex;
  align-items: center;
  gap: 12px;
}

#tab-esg .card-header img,
#tab-sustainability .card-header img,
.esg-card .card-header img{
  flex-shrink: 0;
}

#tab-esg .card-header h4,
#tab-sustainability .card-header h4,
.esg-card .card-header h4{
  margin: 0;
}



/* FINAL ESG FIX: force icon and title inline */
#tab-esg .esg-header-inline,
#tab-sustainability .esg-header-inline{
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}

#tab-esg .esg-header-inline h4,
#tab-sustainability .esg-header-inline h4{
  margin: 0 !important;
}



/* ESG cards: align icon and title on the same line (no HTML changes needed) */
#tab-esg .esg-card{
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}

#tab-esg .esg-card .esg-icon{
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

#tab-esg .esg-card h3{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

#tab-esg .esg-card p,
#tab-esg .esg-card ul,
#tab-esg .esg-card ol{
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 6px;
}



/* ESG: switch icon + accent (red) to green in Sustainability & ESG tab */
#tab-esg{
  --esg-green: #1f8f3a;
  --esg-green-soft: #e6f6ea;
}

/* icon pill */
#tab-esg .esg-icon{
  background: var(--esg-green-soft) !important;
  color: var(--esg-green) !important;
}

/* any inline icons or svg inside */
#tab-esg .esg-icon svg,
#tab-esg .esg-icon i{
  color: var(--esg-green) !important;
  fill: currentColor;
}

/* green accents for numbers/labels that were red */
#tab-esg .esg-kpi strong,
#tab-esg .esg-kpi .kpi-number,
#tab-esg .esg-kpi .value,
#tab-esg .esg-kpi b,
#tab-esg .downloads .download-title,
#tab-esg .downloads .btn i,
#tab-esg .downloads .btn svg,
#tab-esg .downloads .btn .pdf-icon{
  color: var(--esg-green) !important;
}

/* common utility classes */
#tab-esg .text-danger,
#tab-esg .text-red,
#tab-esg .eq-text-red,
#tab-esg .accent-red,
#tab-esg .brand-red{
  color: var(--esg-green) !important;
}



/* ESG: force ALL accent reds to green inside ESG tab */
#tab-esg{ --esg-green:#1f8f3a; --esg-green-soft:#e6f6ea; }

/* card icons */
#tab-esg .esg-icon{
  background: var(--esg-green-soft) !important;
  color: var(--esg-green) !important;
}
#tab-esg .esg-icon i{
  color: var(--esg-green) !important;
}

/* KPI numbers */
#tab-esg .esg-kpi-num{
  color: var(--esg-green) !important;
}

/* Downloads title */
#tab-esg .esg-downloads-title{
  color: var(--esg-green) !important;
}

/* Download buttons + pdf icons + borders */
#tab-esg .esg-dl{
  border-color: var(--esg-green) !important;
  color: #111 !important;
}
#tab-esg .esg-dl i{
  color: var(--esg-green) !important;
}
#tab-esg .esg-dl:hover{
  background: var(--esg-green-soft) !important;
}

/* Any remaining brand red helpers inside ESG tab */
#tab-esg .text-danger,
#tab-esg .text-red,
#tab-esg .eq-text-red,
#tab-esg .accent-red,
#tab-esg .brand-red,
#tab-esg .red{
  color: var(--esg-green) !important;
}



/* CONTACT PAGE (aligned like reference screenshot) */
.contact-grid{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}
.contact-card{
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
}
.contact-card + .contact-card{ margin-top: 16px; }

.contact-card-head{
  padding: 14px 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  background: #111827; /* dark */
}
.contact-card-head.alt{
  background: #f3f4f6;
  color: #111827;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.contact-card-head.gradient{
  background: linear-gradient(90deg, #111827 0%, #111827 25%, #e10600 100%);
}
.contact-card-head i{ opacity: .95; }

.contact-card-body{
  padding: 16px;
}

.contact-item{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.contact-item:last-child{ border-bottom: none; }
.contact-item i{
  color: #e10600;
  margin-top: 2px;
}
.contact-item .label{
  font-weight: 700;
  font-size: 13px;
  color: #111827;
}
.contact-item .value{
  font-size: 13px;
  color: #374151;
  line-height: 1.35;
}

.contact-form .form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form .field label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}
.contact-form .field label span{ color: #e10600; }
.contact-form input,
.contact-form select,
.contact-form textarea{
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
}
.contact-form textarea{ min-height: 120px; resize: vertical; }
.contact-form .field.full{ grid-column: 1 / -1; }

.contact-form .send-btn{
  width: 100%;
  margin-top: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
}

.w-100{ width: 100% !important; display: inline-flex; justify-content: center; }

/* Responsive */
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-form .form-grid{ grid-template-columns: 1fr; }
}



/* Contact page: map under both columns */
.contact-map-row{
  margin-top: 22px;
}
.contact-map-row .contact-card{
  width: 100%;
}
.contact-map-row iframe{
  width: 100% !important;
  height: 380px !important;
  border: 0;
  border-radius: 12px;
}



/* GLOBAL: Products-style page badge title */
.page-hero{
  margin-bottom: 24px;
}
.page-hero-badge{
  display: inline-block;
  background: #e10600; /* CTS Red */
  color: #ffffff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  margin-bottom: 16px;
  font-size: 26px;
  line-height: 1;
}
.page-hero-title{
  font-size: 46px;
  font-weight: 900;
  color: #000000;
  margin: 0 0 10px 0;
  letter-spacing: -0.4px;
}
.page-hero-subtitle{
  font-size: 16px;
  color: #6b7280;
  margin: 0;
  max-width: 820px;
}
@media (max-width: 768px){
  .page-hero-badge{ font-size: 22px; padding: 12px 18px; }
  .page-hero-title{ font-size: 32px; }
}


/* About page: keep intro paragraphs full-width under the hero (badge + title) */
.about-intro-block{
  max-width: 100%;
}
.about-intro-full{
  max-width: 100% !important;
  width: 100%;
  margin: 10px 0 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
}


/* Topbar social icons (replaces Rwanda & East Africa badge) */
.topbar-social{display:flex;gap:10px;align-items:center}
.topbar-social a{color:rgba(255,255,255,.95);font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:opacity .2s,color .2s}
.topbar-social a:hover{opacity:1}

/* Hover colors: CTS Red for most, WhatsApp Green for WhatsApp */
.topbar-social a:hover i.fa-linkedin-in,
.topbar-social a:hover i.fa-x-twitter,
.topbar-social a:hover i.fa-facebook-f,
.topbar-social a:hover i.fa-instagram,
.topbar-social a:hover i.fa-youtube{
  color:#c4161c;
}
.topbar-social a:hover i.fa-whatsapp{
  color:#25D366;
}


/* Hero paragraph justified alignment */
.hero .lead,
.hero-section .lead,
.page-hero .lead {
    text-align: justify;
}


/* CTS red highlight utility */
.cts-red{ color:#e10600 !important; }


/* Homepage flow sections helpers */
.section{ padding: 60px 0; }
.section .section-head{ margin-bottom: 24px; }
.section .section-head .badge{ display:inline-block; padding:6px 12px; border-radius:999px; background:#e10600; color:#fff; font-weight:700; letter-spacing:.06em; font-size:12px; text-transform:uppercase; margin-bottom:10px; }
.section .grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.section .card{ border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:18px; background:#fff; }
.section .card h3{ margin:0 0 8px; font-size:16px; }
.section .card p{ margin:0; color:#555; font-size:14px; line-height:1.5; }
@media (max-width: 992px){ .section .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .section .grid{ grid-template-columns: 1fr; } }
.cta-section{ background: rgba(0,0,0,.03); }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.btn.primary{ background:#e10600; color:#fff; border-color:#e10600; }



/* Core Services CTA buttons (Services + Products) */
.explore-services-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.explore-services-link.is-outline{
  background:transparent;
  border:2px solid var(--cts-red, #e60000);
  color:var(--cts-red, #e60000);
}
.explore-services-link.is-outline:hover{
  background:var(--cts-red, #e60000);
  color:#fff;
}


/* --- Why Choose Us enhancements --- */
.why-grid{gap:22px}
.why-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.why-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.08); border-color:rgba(227,6,19,.28)}
.why-card-top{display:flex; align-items:center; gap:12px}
.why-card h3{margin:0}
.why-card p{margin-top:10px}

/* Responsive grid for Why Choose section */
@media (max-width: 1024px){
  .why-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 640px){
  .why-grid{grid-template-columns: 1fr}
}


/* Why Choose - header row with right-side CTA */
.why-header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.why-header-left{
  max-width: 820px;
}

.why-cta-right{
  flex: 0 0 auto;
  text-align:right;
}


/* Why Choose - bottom-left CTA */
.why-cta-bottom-left{
  text-align:left;
  margin-top: 28px;
}


/* Why Choose CTA - after all cards, left aligned */
.why-cta-after-cards{
  margin-top: 12px;
  text-align: left;
}


/* Force Core Values Single Column */
.core-values-list.single-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
    padding-left: 20px;
}

.core-values-list.single-column li {
    width: 100% !important;
}




/* Remove spacing inside Core Values */
.core-values ul{
    margin: 0 !important;
    padding-left: 18px !important;
}

.core-values ul li{
    margin: 0 !important;
    padding: 2px 0 !important;
}

/* Remove space between Core Values card and buttons above */
.core-values{
    margin-top: 0 !important;
}


/* Ultra-tight Core Values spacing */
.core-values{
    margin: 0 !important;
    padding: 0 !important;
}

.core-values ul{
    margin: 0 !important;
    padding-left: 16px !important;
}

.core-values ul li{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}


/* Partner marquee (moving logos / badges) */
.partner-marquee{
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 18px;
  padding: 10px 0;
}

.partner-track{
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  animation: partnerScroll 56.55s linear infinite;
}

.partner-logo{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 10px 14px;
}

.partner-logo img{
  height: 50px;
  width: auto;
  display: block;
  max-width: 240px;
}

.partner-marquee:hover .partner-track{
  animation-play-state: paused;
}


  100%{ transform: translateX(-50%); }
}

@media (max-width: 520px){
  .partner-track{ gap: 18px; }
  .partner-logo img{ height: 44px; max-width: 200px; }
}


/* Hide legacy partner text pills (marquee replaces them) */
.partner{ display: none !important; }



/* Reduce extra vertical padding around the marquee */
.partner-marquee{
  padding: 0 !important;
}

.partner-marquee:hover .partner-track{
  animation-play-state: running; /* keep moving even on hover */
}


/* ===== Partner Marquee Clean (No Cards / No Borders) ===== */
.partner-logo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.partner-logo img {
    height: 55px;
    width: auto;
    display: block;
}

.partner-marquee {
    padding: 0 !important;
}




/* Hide legacy partner pills/buttons (marquee replaces them) */
.partners,
.partner,
.partner-btn,
.partner-pill{
  display: none !important;
}

/* ===== Clean Partner Marquee (Logos Only) ===== */
.partner-marquee{
  width: 100%;
  overflow: hidden;
  margin: 20px 0;
  padding: 0 !important;
  background: transparent !important;
}

.partner-track{
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: partnerScroll 60.55s linear infinite;
  will-change: transform;
}

.partner-logo{
  flex: 0 0 auto;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.partner-logo img{
  height: 55px;
  width: auto;
  display: block;
  max-width: 260px;
}

/* Pause on hover */
.partner-marquee:hover .partner-track{
  animation-play-state: paused;
}

@keyframes partnerScroll{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}




/* === Featured Projects: Enterprise case-study layout (Homepage only) === */
.featured-projects .case-studies{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.featured-projects .case-study{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:24px;
  align-items:center;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  padding:22px;
}
.featured-projects .case-study.case-right{
  grid-template-columns: 0.85fr 1.15fr;
}
.featured-projects .case-content h3{
  margin:0 0 10px;
}
.featured-projects .case-block{
  margin-top:10px;
}
.featured-projects .case-block h4{
  margin:0 0 6px;
  font-size:0.95rem;
  font-weight:700;
  position:relative;
  padding-left:12px;
}
.featured-projects .case-block h4::before{
  content:"";
  position:absolute;
  left:0;
  top:0.25em;
  width:4px;
  height:0.95em;
  background: var(--red,#e60000);
  border-radius:3px;
}
.featured-projects .case-block p{
  margin:0;
}
.featured-projects .case-block ul{
  margin:0;
  padding-left:18px;
}
.featured-projects .case-visual{
  display:flex;
  justify-content:center;
  align-items:center;
}
.featured-projects .case-visual img{
  width:100%;
  max-width:none;
  height:240px;
  object-fit:cover;
  border-radius:14px;
  display:block;
  opacity:0.98;
}
@media (max-width: 900px){
  .featured-projects .case-study,
  .featured-projects .case-study.case-right{
    grid-template-columns: 1fr;
  }
  .featured-projects .case-visual{
    margin-top:8px;
  }
  .featured-projects .case-visual img{
    height:200px;
  }
}


/* ===============================
   CTS Auto-Expanding Section Background Fix
   - Prevent cross-section overlap (no negative pulls)
   - Ensure section backgrounds expand with content
   =============================== */
section.section, section {
  position: relative;
  overflow: visible; /* allow normal flow; backgrounds expand naturally */
}

section.section + section.section {
  margin-top: 0; /* avoid accidental stacking gaps/pulls */
}


/* ===============================
   Reduce gap between Partnerships and Ready CTA
   =============================== */
section.trusted-partners {
    padding-bottom: 10px !important;
}

section.ready-cta {
    padding-top: 10px !important;
    margin-top: 0 !important;
}


/* ===============================
   CTS Global Section Justify Alignment (Homepage)
   =============================== */
section.section > .container,
section > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero .container,
.services-section .container,
.why-compact .container,
.featured-projects .container,
.trusted-partners .container,
.ready-cta .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ===============================
   CTS About Section Text Justify
   =============================== */
#about p,
.about-split p {
    text-align: justify;
}


/* ===============================
   CTS Industries Section Text Justify
   =============================== */
.industries-served p,
#industries p {
    text-align: justify;
}


/* ===============================
   CTS Why Choose Section Text Justify
   =============================== */
.why-compact p,
.why-grid p {
    text-align: justify;
}


/* ===============================
   CTS Precise Reduce Services-Why Spacing
   =============================== */

/* Reduce bottom padding of Services section */
.services-section.section {
    padding-bottom: 20px !important;
}

/* Reduce top padding of Why section */
section.why-compact {
    padding-top: 20px !important;
}

/* Reduce internal header spacing inside Why */
section.why-compact .section-header {
    margin-bottom: 20px !important;
}


/* ===============================
   CTS Tighten gap: Services CTA buttons -> Why Choose section
   =============================== */
.section.services-section.services-compact{
  padding-bottom: 18px !important;
}
.section.services-section.services-compact .explore-services-box{
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}
section.why-compact.section{
  padding-top: 10px !important;
}
section.why-compact.section .section-header-centered{
  margin-bottom: 20px !important;
}


/* ===============================
   CTS Reduce About Button -> Title Gap
   =============================== */

/* Reduce bottom margin of button container */
.about-actions,
.about-actions-inline {
    margin-bottom: 10px !important;
}

/* Reduce top margin of About title */
#about h1,
#about .section-title {
    margin-top: 0 !important;
}


/* ===============================
   CTS Remove About Title Bottom Space
   =============================== */
#about h1,
#about .section-title {
    margin-bottom: 6px !important;
}

#about p:first-of-type {
    margin-top: 0 !important;
}


/* ===============================
   CTS Core Values Bottom Spacing
   =============================== */
.core-values {
    padding-bottom: 20px !important;
}

.core-values ul {
    margin-bottom: 0 !important;
}


/* ===============================
   CTS Core Values Title Left Spacing
   =============================== */
.core-values h3,
.core-values .section-title {
    padding-left: 12px !important;
}


/* ===============================
   CTS Reduce About -> Industries Gap
   =============================== */

/* Reduce bottom padding of About section */
#about.section {
    padding-bottom: 20px !important;
}

/* Reduce top padding of Industries section */
#industries.section,
.industries-served.section {
    padding-top: 20px !important;
}


/* ===============================
   CTS Force Tight About -> Industries Gap
   =============================== */

/* Remove extra bottom spacing from About inner wrapper */
#about .about-split,
#about .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Reduce About section bottom padding further */
#about.section {
    padding-bottom: 10px !important;
}

/* Reduce Industries top padding strongly */
#industries.section,
.industries-served.section {
    padding-top: 10px !important;
}

/* Remove margin above Industries heading */
#industries h1,
#industries .section-title {
    margin-top: 0 !important;
}


/* ===============================
   CTS Remove Industries Title -> Text Gap
   =============================== */
#industries h1,
#industries .section-title {
    margin-bottom: 6px !important;
}

#industries p:first-of-type {
    margin-top: 0 !important;
}


/* ===============================
   CTS Exact Remove Industries Title Gap
   =============================== */
.industries-served h1{
  margin-bottom: 4px !important;
}
.industries-served .fade-up p{
  margin-top: 0 !important;
}


/* ===============================
   CTS Reduce Featured Projects Title Spacing
   =============================== */

/* Reduce top and bottom padding of Featured Projects section */
.featured-projects.section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
}

/* Reduce margin around Featured Projects title */
.featured-projects h1 {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}


/* ===============================
   CTS Force Reduce Featured Section Top Space
   =============================== */

/* Reduce global section padding only for Featured Projects */
.section.featured-projects {
    padding-top: 12px !important;
}

/* Reduce margin above Featured title */
.featured-projects h1 {
    margin-top: 0 !important;
}

/* Reduce bottom padding of previous section to remove gap */
.section + .section.featured-projects {
    margin-top: 0 !important;
}


/* ===============================
   CTS Reduce Certifications Title Spacing
   =============================== */

/* Reduce section padding */
.section.trusted-partners {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* Reduce title margin */
.trusted-partners h1 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}


/* ===============================
   CTS Force Tight Certifications Section Spacing
   =============================== */

/* Strongly reduce top padding of Certifications section */
.section.trusted-partners {
    padding-top: 8px !important;
    padding-bottom: 16px !important;
}

/* Remove any margin from previous section */
.section + .section.trusted-partners {
    margin-top: 0 !important;
}

/* Tighten title spacing */
.trusted-partners h1 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}


/* ===============================
   CTS Ultra Tight Why Top Spacing
   =============================== */

/* Reduce bottom space of services CTA buttons block */
.explore-services-box {
    margin-bottom: 4px !important;
    margin-top: 16px !important;
}

/* Reduce bottom padding of Services section */
.section.services-section {
    padding-bottom: 12px !important;
}

/* Strongly reduce top padding of Why section */
.section.why-compact {
    padding-top: 8px !important;
}

/* Remove extra heading margin */
.section.why-compact h1 {
    margin-top: 0 !important;
}


/* ===============================
   CTS Navbar Premium Improvements
   - Sticky header
   - Shadow on scroll
   - Active link underline + smooth hover
   - Better alignment polish
   =============================== */

.nav{
  position: sticky;
  top: 0;
  z-index: 999;
  transition: box-shadow .18s ease, background-color .18s ease;
}

.nav.scrolled{
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Slightly more breathing room + perfect alignment */
.nav .inner{
  align-items: center;
}

/* Smooth link hover + underline indicator */
.navlinks a,
.mobilemenu a{
  position: relative;
  transition: color .18s ease, background-color .18s ease;
}

.navlinks a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:4px;
  height:2px;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  opacity: .95;
}

.navlinks a:hover{
  color: var(--text);
}

.navlinks a:hover::after{
  transform: scaleX(1);
}

.navlinks a.active{
  color: var(--text);
  background: rgba(255,255,255,.06);
}

.navlinks a.active::after{
  transform: scaleX(1);
}

/* CTA button polish */
.nav .btn.primary{
  transition: transform .12s ease, filter .12s ease;
}
.nav .btn.primary:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
}
.nav .btn.primary:focus-visible,
.navlinks a:focus-visible,
.mobilemenu a:focus-visible{
  outline: 2px solid rgba(220,0,0,.55);
  outline-offset: 3px;
  border-radius: 12px;
}


/* ===============================
   CTS Remove Gap Between Topbar and Navbar
   =============================== */

/* Remove margin under top bar */
.topbar,
.top-bar,
.header-top{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove margin above navbar */
header.nav,
.nav{
  margin-top: 0 !important;
}

/* Ensure no unintended spacing wrapper */
.topbar + header.nav,
.header-top + header.nav{
  margin-top: 0 !important;
}


/* ===============================
   CTS Remove Middle Gray Bar
   =============================== */

/* Remove accidental middle bar */
.header + .header,
.topbar + .container{
  margin:0 !important;
  padding:0 !important;
}

/* Ensure no background strip remains */
.nav{
  margin-top:0 !important;
}



/* ===============================
   CTS Sticky Topbar + Navbar (No Gap)
   - Keeps top bar and main menu bar fixed
   - Uses CSS variables set by JS for accurate heights
   =============================== */
:root{
  --cts-topbar-h: 0px;
  --cts-nav-h: 0px;
}

body.cts-sticky-bars{
  /* push page content below the two fixed bars */
  padding-top: calc(var(--cts-topbar-h) + var(--cts-nav-h));
}

/* Top bar (gradient contact strip) */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
}

/* Main navigation bar */
header.nav{
  position: fixed;
  top: var(--cts-topbar-h);
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: box-shadow .2s ease;
}

/* Soft shadow on scroll (premium look) */
header.nav.scrolled{
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

/* Remove any accidental gap between stacked fixed bars */
.topbar + header.nav{
  margin-top: 0 !important;
}


/* ===============================
   CTS Reduce Main Navbar Height
   =============================== */

/* Reduce vertical padding of navbar */
header.nav .inner{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Reduce overall header padding */
header.nav{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Slightly reduce logo size if needed */
.brand img{
  height: 38px !important;
}

/* Reduce nav link vertical padding */
.navlinks a{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}



/* ===============================
   CTS Reduce Featured Projects Top Spacing
   =============================== */

/* Reduce section top padding */
section#featured,
.featured-projects,
section.featured{
  padding-top: 30px !important;
}

/* Reduce title margin */
section#featured h1,
.featured-projects h1{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}



/* ===============================
   CTS FORCE Featured Projects Gap Fix
   =============================== */

/* Remove bottom spacing from Industries section */
section#industries,
.industries-section{
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
}

/* Remove top spacing from Featured section */
section#featured,
.featured-section{
  margin-top: 0 !important;
  padding-top: 20px !important;
}

/* Remove any large margin on Featured title */
section#featured h1,
.featured-section h1{
  margin-top: 0 !important;
}



/* ===============================
   CTS ULTRA Reduce Industries-Featured Gap
   =============================== */

/* Reduce bottom padding of Industries section strongly */
section#industries,
.industries-section{
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
}

/* Reduce top padding of Featured Projects section strongly */
section#featured,
.featured-section{
  padding-top: 10px !important;
  margin-top: 0 !important;
}

/* Remove extra margin on Featured title */
section#featured h1,
.featured-section h1{
  margin-top: 0 !important;
}



/* ===============================
   CTS REAL Industries -> Featured Gap Fix
   (Overrides global section padding)
   =============================== */

/* Remove bottom padding from Industries */
#industries{
  padding-bottom: 0 !important;
}

/* Remove top padding from Featured when directly after Industries */
#industries + #featured{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* If sections use generic .section class */
#industries.section{
  padding-bottom: 0 !important;
}

#industries.section + #featured.section{
  padding-top: 0 !important;
}

/* Reduce Featured title margin */
#featured h1{
  margin-top: 0 !important;
}



/* ===============================
   CTS FIX Industries-served -> Featured-projects Gap
   =============================== */
section.section.industries-served{
  padding-bottom: 10px !important;
}
section.section.featured-projects{
  padding-top: 10px !important;
}

/* Even tighter when directly consecutive */
section.section.industries-served + section.section.featured-projects{
  padding-top: 6px !important;
}

/* Remove any extra top margin inside featured header */
section.section.featured-projects .section-header{
  margin-top: 0 !important;
}
section.section.featured-projects h1{
  margin-top: 0 !important;
}



/* === ABOUT PAGE: REMOVE EXTRA SPACE BETWEEN TITLE AND INTRO TEXT === */
.about-page .page-hero{ margin-bottom: 6px !important; }
.about-page .page-hero-title{ margin-bottom: 4px !important; }
.about-page .about-intro-full{ margin-top: 0 !important; }
.about-page .about-intro-block{ margin-top: 0 !important; padding-top: 0 !important; }



/* === ABOUT PAGE TABS: SHOW ONLY ACTIVE PANEL === */
.about-tabs-panels .about-panel { display: none; }
.about-tabs-panels .about-panel.is-active { display: block; }


/* === Certifications: Vendor Logos Marquee + Modal === */
.cert-vendors { margin-top: 14px; }
.cert-vendors-head { margin-bottom: 12px; }
.cert-vendors-title { font-weight: 800; color: #c40000; }
.cert-vendors-sub { color: rgba(0,0,0,0.65); font-size: 14px; margin-top: 4px; }

.vendor-marquee {
  overflow: hidden;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
  padding: 14px 0;
  border: 1px solid rgba(0,0,0,0.05);
}
.vendor-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: vendorScroll 44.55s linear infinite;
  padding: 0 18px;
}
.vendor-marquee:hover .vendor-track { animation-play-state: paused; }

@keyframes vendorScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.vendor-logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 150px;
  height: 64px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
  cursor: pointer;
}
.vendor-logo-btn img {
  max-height: 42px;
  max-width: 120px;
  object-fit: contain;
}
.vendor-fallback {
  font-weight: 800;
  font-size: 14px;
  color: #111;
  text-align: center;
}

/* Modal */
body.modal-open { overflow: hidden; }

.vendor-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.vendor-modal.is-open { display: block; }
.vendor-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.vendor-modal-dialog {
  position: relative;
  max-width: 820px;
  margin: 6vh auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.35);
  padding: 22px;
}
.vendor-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  color: #c00000; /* CTS Red */
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.vendor-modal-close:hover {
  color: #8a0000;
  border-color: rgba(192,0,0,0.35);
  background: rgba(192,0,0,0.06);
}
.vendor-modal-close:focus {
  outline: 2px solid rgba(192,0,0,0.35);
  outline-offset: 2px;
}
.vendor-modal-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-right: 54px;
}
.vendor-modal-logo {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vendor-modal-logo img {
  max-width: 72px;
  max-height: 72px;
  object-fit: contain;
}
.vendor-modal-logo-fallback {
  font-weight: 900;
  font-size: 12px;
  padding: 10px;
  text-align: center;
}
.vendor-modal-title { margin: 0; }
.vendor-modal-meta { color: rgba(0,0,0,0.6); font-size: 14px; margin-top: 2px; }

.vendor-modal-body { margin-top: 16px; display: grid; gap: 14px; }
.vendor-modal-section { background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 14px 16px; }
.vendor-modal-label { font-weight: 900; color: #c40000; margin-bottom: 8px; }
.vendor-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vendor-modal-card { background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 14px 16px; }
.vendor-modal-body ul { margin: 0; padding-left: 18px; }
.vendor-modal-body li { margin: 6px 0; }

@media (max-width: 720px) {
  .vendor-modal-dialog { margin: 4vh 14px; }
  .vendor-modal-grid { grid-template-columns: 1fr; }
  .vendor-logo-btn { min-width: 130px; }
}


/* === Vendor Modal Position Fix === */
.vendor-modal-dialog {
  margin: 10vh auto; /* move slightly down */
  max-height: 85vh;  /* ensure it fits viewport */
  overflow-y: auto;  /* allow scroll if content taller */
}

@media (max-width: 768px) {
  .vendor-modal-dialog {
    margin: 6vh 16px;
    max-height: 88vh;
  }
}



/* === Vendor Marquee: Visual Polish (CTS Enterprise) === */
.vendor-logo-btn {
  height: 80px;
  border-bottom: none;
  transition: all 0.3s ease;
}

.vendor-logo-btn img {
  max-height: 50px;
  max-width: 140px;
}

.vendor-logo-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.vendor-track {
  animation: vendorScroll 70.55s linear infinite;
}

.cert-vendors-title {
  font-size: 18px;
  letter-spacing: 0.5px;
}



/* === Certifications Cards Refinement === */

/* Remove thick red borders */
.cert-card,
.cert-card2,
.cert-block,
.cert-grid > div {
  border: 1px solid rgba(0,0,0,0.06) !important;
}

/* Align icon and title on same line */
.cert-card h3,
.cert-card2-title,
.cert-grid h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Icon alignment */
.cert-icon,
.cert-card .icon,
.cert-grid .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0 !important;
}

/* Adjust card sizing */
.cert-card,
.cert-card2,
.cert-grid > div {
  padding: 20px 22px;
  border-radius: 14px;
}

/* Reduce excessive spacing */
.cert-card ul,
.cert-card2 ul {
  margin-top: 8px;
}















/* === Vendor Marquee Final Small Spacing (Match Card Row Gap) === */
.cert-vendors,
.vendor-marquee {
  margin-bottom: 12px;
}



/* === Remove Red Border from Tender & Partnership Card === */
.tender-card,
.tender-support,
.cert-tender-card,
div:has(> h3:contains("Tender & Partnership Documentation Support")) {
  border: 1px solid rgba(0,0,0,0.06) !important;
}

/* Fallback override */
.tender-section,
.tender-support-card {
  border: 1px solid rgba(0,0,0,0.06) !important;
}



/* === FORCE Remove Red Border from Tender Support Card === */

/* Target last certification card block */
.cert-section .cert-card:last-child,
.cert-grid > div:last-child,
.cert-container > div:last-child {
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* Generic override for any remaining red border */
div[class*="tender"],
div:has(h3:contains("Tender & Partnership Documentation Support")) {
    border: none !important;
}



/* === Tender CTA: remove thick red border (TRUE FIX) === */
.cert-cta.cert-cta-clean {
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
}

.cert-cta.cert-cta-clean {
  outline: none !important;
}



/* === Tender CTA: neutral border override === */
#tab-certifications .cert-cta,
#tab-certifications .cert-cta.cert-cta-clean {
  border: 1px solid rgba(0,0,0,0.06) !important;
}



/* === Align Certification Card Icons & Titles on Same Line === */

.cert-card h3,
.cert-card2 h3,
.cert-grid h3 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cert-card h3 i,
.cert-card2 h3 i,
.cert-grid h3 i {
    margin: 0;
}

.cert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
}



/* === Certifications: Align card title with icon (stakeholders style) === */
#tab-certifications .cert-grid .cert-card{
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
}

#tab-certifications .cert-grid .cert-card .cert-icon{
  grid-column: 1;
  grid-row: 1;
  margin: 0 !important;
}

#tab-certifications .cert-grid .cert-card h3{
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  align-self: center;
}

#tab-certifications .cert-grid .cert-card ul{
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
  padding-left: 18px;
}



/* === Certifications: Match Stakeholders header alignment (icon + title in one row) === */
.cert-grid .cert-card{
  display: grid !important;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
  min-height: auto;
}
.cert-grid .cert-card .cert-icon{
  margin-bottom: 0 !important;
  grid-column: 1;
  grid-row: 1;
}
.cert-grid .cert-card h3{
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  align-self: center;
}
.cert-grid .cert-card ul{
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
}
@media (max-width: 768px){
  .cert-grid{
    grid-template-columns: 1fr;
  }
  .cert-grid .cert-card{
    grid-template-columns: 52px 1fr;
  }
}



/* === Force Certification List Items on Single Line === */
.cert-grid .cert-card ul li {
    white-space: nowrap;
}



/* === Adjust Certification Bullet Alignment (Move Left) === */
.cert-grid .cert-card ul {
    padding-left: 16px !important;   /* reduce indentation */
    margin-left: 0 !important;
}

.cert-grid .cert-card ul li {
    padding-left: 2px;
}



/* === TRUE Left Alignment for Certification Bullets === */
/* Make bullets span full card width instead of title column only */
.cert-grid .cert-card ul {
    grid-column: 1 / -1 !important;   /* span full width */
    padding-left: 18px !important;    /* normal bullet spacing */
    margin-top: 12px !important;
}

.cert-grid .cert-card ul li {
    white-space: normal !important;   /* allow wrapping again */
}



/* === Request Official Documents Button Styled Like Filter Pills === */
.tender-card a,
.tender-card .btn,
.request-doc-btn {
    display: inline-block !important;
    padding: 10px 18px !important;
    border-radius: 30px !important;
    border: 2px solid #e60000 !important;
    background: transparent !important;
    color: #111 !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

/* Hover effect */
.tender-card a:hover,
.tender-card .btn:hover,
.request-doc-btn:hover {
    background: #e60000 !important;
    color: #ffffff !important;
}



/* === Request Official Documents - Match Home CTA Buttons === */
.tender-card a,
.tender-card .btn,
.request-doc-btn {
    display: inline-block !important;
    padding: 12px 28px !important;
    border-radius: 40px !important;
    border: 2px solid #e60000 !important;
    background: transparent !important;
    color: #e60000 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.tender-card a:hover,
.tender-card .btn:hover,
.request-doc-btn:hover {
    background: #e60000 !important;
    color: #ffffff !important;
}



/* === FORCE Home CTA Style on Request Official Documents Button === */
.tender-card button,
.tender-card a,
.tender-card .btn {
    background: #ffffff !important;
    border: 2px solid #e60000 !important;
    color: #e60000 !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: none !important;
}

.tender-card button:hover,
.tender-card a:hover,
.tender-card .btn:hover {
    background: #e60000 !important;
    color: #ffffff !important;
}



/* === Industries cards: add icons before titles === */
.industries-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.industries-card-head h3{
  margin:0 !important;
}
.industries-card-head 
.industries-card-head .card-icon i{
  color:#e60000;
  font-size:18px;
}



/* === Leadership Modal (Previous About Style) === */
.eq-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}
.eq-modal.is-open{ display:flex; }
.eq-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.eq-modal-panel{
  position: relative;
  width: min(1040px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  padding: 28px;
}
.eq-modal-close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: #d60000;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.eq-modal-grid{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
  align-items: start;
}
.eq-modal-left{ display:flex; flex-direction:column; }
.eq-modal-photo{
  width: 100%;
  height: 390px;
  background: #e9e9e9;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}
.eq-modal-name{
  margin-top: 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #d60000;
}
.eq-modal-title{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  text-transform: none;
}
.eq-modal-section-title{
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 800;
  color:#111;
}
.eq-modal-appointedline{ margin: 14px 0; color:#666; }
.eq-modal-list{
  margin: 0;
  padding-left: 18px;
}
.eq-modal-list li{ margin: 6px 0; }
.eq-modal-paragraphs{
  margin: 0;
  text-align: justify;
}
.eq-modal-paragraphs p{
  margin: 0 0 12px 0;
  line-height: 1.8;
  text-align: justify;
}
.eq-modal-paragraphs p:last-child{
  margin-bottom: 0;
}

@media (max-width: 860px){
  .eq-modal-panel{ padding: 18px; }
  .eq-modal-grid{ grid-template-columns: 1fr; }
  .eq-modal-photo{ height: 300px; }
}
/* Lock scroll when modal open */
body.eq-modal-open{ overflow: hidden; }



/* === Leadership Modal: Fix photo placement/sizing === */
.eq-modal-photo{
  border-radius: 8px;
  overflow: hidden;
}
.eq-modal-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}




/* Industries card header alignment (match services style) */
.card-title-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.card-title-line h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.card-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(225, 6, 0, 0.08);
    color: #e10600;
    font-size: 18px;
    flex-shrink: 0;
}


.cert-governance-note p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}


/* Scoped: Certifications panel only */
#tab-certifications .cert-governance-note {
    margin: 14px auto 18px;
    max-width: 860px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.6;
    color: #333;
    padding: 14px 20px;
    background: #f6f7f9;
    border-radius: 8px;
    border-top: 2px solid #e30613;
}
#tab-certifications .cert-governance-note p { margin: 0; }

/* ESG Tab – Match underline style; only change underline color */
.about-page .about-tabs #tabbtn-esg {
  border-bottom-color: #2e7d32;
}


/* ESG Tab – Active: Light green background, dark green text, green border/underline */
.about-page .about-tabs #tabbtn-esg.is-active {
  background: #f1fbf3;
  color: #1b5e20;
  border-color: #2e7d32;
  border-bottom-color: #2e7d32;
}


/* ESG cards: remove red border */
#tab-esg .esg-card{ border: none !important; }



/* Services list aligned in two columns */
.wtd-bullets.two-col-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap:40px;
  row-gap:6px;
  padding-left:18px;
}

.wtd-bullets.two-col-grid li{
  margin-bottom:0;
}


/* Small Read More button under services list */
.services-readmore{
  list-style:none;
}

.services-more-btn{
  display:inline-block;
  margin-top:4px;
  padding:4px 10px;
  font-size:12px;
  border-radius:6px;
  background:#e60000;
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

.services-more-btn:hover{
  background:#c40000;
}


/* Move Read More button to right side of card */
/* Move Read More button to right side of card (tight spacing) */
.services-readmore-wrap{
  display:flex;
  justify-content:flex-end;
  margin-top:-8px;
}


/* place Read More button on same line as last service */
.services-readmore-grid{
  list-style:none;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}


/* ===============================
   CTS Final Mobile Menu Fix
   - Ensures hamburger shows on phones/tablets
   - Prevents hidden menu bug caused by earlier overrides
   =============================== */
.hamburger{ display:none !important; }

@media (max-width: 980px){
  header.nav .container,
  .nav .inner{ position:relative; }

  .navlinks{ display:none !important; }

  .hamburger{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:0 14px;
    border-radius:12px;
    font-size:22px;
    line-height:1;
  }

  .mobilemenu{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    display:block !important;
    background:#ffffff;
    border:1px solid rgba(15,23,42,.10);
    border-radius:18px;
    box-shadow:0 18px 40px rgba(2,6,23,.16);
    padding:8px 16px 14px;
    max-height:0;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    transition:max-height .22s ease, opacity .18s ease, transform .18s ease;
    z-index:1200;
  }

  .mobilemenu.open{
    max-height:520px;
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }

  .mobilemenu a{
    display:block;
    padding:14px 4px;
    border-bottom:1px solid rgba(15,23,42,.08);
    color:var(--text);
    font-weight:800;
  }

  .mobilemenu a:last-child{
    border-bottom:none;
    padding-bottom:6px;
  }

  .mobilemenu a.active{
    color:var(--red);
  }
}

@media (min-width: 981px){
  .mobilemenu{ display:none !important; }
}


/* ===============================
   CTS Image Performance Helpers
   =============================== */
img[loading="lazy"]{
  content-visibility:auto;
}


/* ===============================
   CTS Mobile Header Final Fix
   Forces clean switch from desktop nav to hamburger menu
   =============================== */
@media (max-width: 980px){
  .nav .inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    flex-wrap:nowrap !important;
  }

  .brand{
    min-width:0;
    flex:1 1 auto;
  }

  .brand img{
    max-height:44px;
    width:auto;
  }

  .brandstack{
    display:none !important;
  }

  .navlinks,
  nav.navlinks,
  .header .navlinks,
  .nav .navlinks{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  .nav .inner > div:last-child{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex:0 0 auto !important;
  }

  .nav .btn.small.primary{
    display:none !important;
  }

  .hamburger,
  button.hamburger,
  .btn.hamburger{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:46px !important;
    min-height:46px !important;
    padding:0 14px !important;
    border-radius:12px !important;
    font-size:24px !important;
    line-height:1 !important;
  }

  .mobilemenu,
  .nav .mobilemenu,
  .header .mobilemenu{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    left:12px !important;
    right:12px !important;
    display:block !important;
    background:#ffffff !important;
    border:1px solid rgba(15,23,42,.10) !important;
    border-radius:18px !important;
    box-shadow:0 18px 40px rgba(2,6,23,.16) !important;
    padding:8px 16px 14px !important;
    max-height:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
    transform:translateY(-6px) !important;
    transition:max-height .22s ease, opacity .18s ease, transform .18s ease !important;
    z-index:1300 !important;
  }

  .mobilemenu.open{
    max-height:520px !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .mobilemenu a{
    display:block !important;
    padding:14px 4px !important;
    border-bottom:1px solid rgba(15,23,42,.08) !important;
    color:var(--text) !important;
    font-weight:800 !important;
    text-decoration:none !important;
  }

  .mobilemenu a:last-child{
    border-bottom:none !important;
    padding-bottom:6px !important;
  }
}

@media (min-width: 981px){
  .mobilemenu{
    display:none !important;
    max-height:none !important;
    opacity:1 !important;
    pointer-events:none !important;
  }

  .hamburger{
    display:none !important;
  }

  .navlinks{
    display:flex !important;
  }

  .brandstack{
    display:inline-flex !important;
  }
}


/* ===============================
   CTS Mobile Header + Hero Repair
   =============================== */
@media (max-width: 768px){
  /* Top bar: keep phone and email on one line */
  .topbar .row{
    gap:10px !important;
  }
  .topbar .row > div:first-child{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .topbar .row > div:first-child::-webkit-scrollbar{
    display:none;
  }
  .topbar .row > div:first-child .badge{
    white-space:nowrap !important;
    flex:0 0 auto !important;
    padding:6px 10px !important;
    font-size:12px !important;
  }

  /* Header: show only logo + hamburger */
  .nav .inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }
  .navlinks,
  nav.navlinks,
  .header .navlinks,
  .nav .navlinks{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  .nav .inner > div:last-child{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
  }

  .nav .btn.primary,
  .nav .btn.small.primary{
    display:none !important;
  }

  .brand{
    min-width:0 !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
  }
  .brand img{
    width:42px !important;
    height:42px !important;
    flex:0 0 auto !important;
  }
  .brandstack{
    display:none !important;
  }

  .hamburger,
  button.hamburger,
  .btn.hamburger{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 !important;
    border-radius:12px !important;
    font-size:24px !important;
    line-height:1 !important;
    position:relative !important;
    z-index:1401 !important;
    pointer-events:auto !important;
  }

  .mobilemenu{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:12px !important;
    right:12px !important;
    display:block !important;
    max-height:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
    transform:translateY(-6px) !important;
    transition:max-height .22s ease, opacity .18s ease, transform .18s ease !important;
    background:#ffffff !important;
    border:1px solid rgba(15,23,42,.10) !important;
    border-radius:18px !important;
    box-shadow:0 18px 40px rgba(2,6,23,.16) !important;
    padding:0 16px !important;
    z-index:1400 !important;
  }
  .mobilemenu.open{
    max-height:520px !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
    padding:8px 16px 14px !important;
  }
  .mobilemenu a{
    display:block !important;
    padding:14px 4px !important;
    border-bottom:1px solid rgba(15,23,42,.08) !important;
    color:var(--text) !important;
    font-weight:800 !important;
  }
  .mobilemenu a:last-child{
    border-bottom:none !important;
  }

  /* Hero: force full-width single column */
  .hero .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;
  }
  .hero,
  .hero.home{
    overflow:hidden !important;
  }
  .herogrid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    width:100% !important;
  }
  .herogrid > *{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  .heroimg{
    width:100% !important;
    max-width:100% !important;
  }
  .lead{
    max-width:100% !important;
  }
  .ctas{
    gap:10px !important;
  }
  .ctas .btn{
    width:100% !important;
  }
}

@media (min-width: 769px){
  .mobilemenu{
    display:none !important;
  }
}


/* ===============================
   CTS Mobile Menu Visual Clarity Fix
   =============================== */
@media (max-width: 768px){
  .mobilemenu{
    left:16px !important;
    right:16px !important;
    top:calc(100% + 12px) !important;
    background:#ffffff !important;
    border:1px solid rgba(15,23,42,.10) !important;
    border-radius:22px !important;
    box-shadow:0 24px 60px rgba(2,6,23,.22) !important;
  }

  .mobilemenu.open{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
  }

  .mobilemenu a{
    display:block !important;
    padding:18px 10px !important;
    font-size:16px !important;
    line-height:1.35 !important;
    color:#111827 !important;
    font-weight:800 !important;
    background:transparent !important;
    border-bottom:1px solid rgba(15,23,42,.08) !important;
  }

  .mobilemenu a:last-child{
    border-bottom:none !important;
  }

  .mobilemenu a.active{
    color:#d71920 !important;
  }

  .nav{
    z-index:1500 !important;
  }

  .hero,
  .hero.home,
  .hero .container,
  .herogrid,
  .heroimg{
    position:relative !important;
    z-index:1 !important;
  }

  .nav .inner{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
}


/* ===============================
   CTS Mobile Right-Space + Topbar Fix
   =============================== */
@media (max-width: 768px){
  html, body{
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Use full mobile width cleanly across sections */
  .container{
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Top bar: align content to the left exactly */
  .topbar .row{
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .topbar .row > div{
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  .topbar .row > div:first-child .badge{
    white-space: nowrap !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  /* Header container stays full width */
  header.nav .container,
  .nav .container{
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  /* Hero and all key blocks fill width */
  .hero,
  .hero.home,
  .hero .container,
  .herogrid,
  .herogrid > *,
  .heroimg,
  .section,
  .footer,
  .footer .container{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .hero .container{
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .lead,
  .small,
  .footer p,
  .footer span,
  .footer a{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Footer: stack all columns to avoid clipping under grey space */
  .footergrid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .footergrid > div{
    min-width: 0 !important;
    width: 100% !important;
  }

  .footer-bottom-inner{
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
  }

  /* Mobile menu panel width aligned with viewport */
  .mobilemenu{
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
  }
}


/* ===============================
   CTS Mobile Brand Name Restore
   LOGO + COMPANY NAME + ☰
   =============================== */
@media (max-width: 768px){
  .brand{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .brand img{
    width:38px !important;
    height:38px !important;
    max-height:38px !important;
    flex:0 0 auto !important;
  }

  .brandstack{
    display:flex !important;
    flex-direction:column !important;
    line-height:1.02 !important;
    overflow:hidden !important;
    min-width:0 !important;
  }

  .brandstack .l1{
    font-size:13px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
  }

  .brandstack .l2{
    font-size:10px !important;
    letter-spacing:.05em !important;
    text-transform:uppercase !important;
    color:#555 !important;
    white-space:nowrap !important;
  }

  .nav .inner{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .hamburger,
  button.hamburger,
  .btn.hamburger{
    margin-left:10px !important;
    flex:0 0 auto !important;
  }
}


/* ===============================
   CTS What We Do side images
   =============================== */
.wwd-side-image{
  display:block;
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  border-radius:12px;
}


/* ===============================
   CTS Leadership Modal Center Fix
   =============================== */
.eq-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  padding:
    calc(var(--cts-topbar-h, 0px) + var(--cts-nav-h, 0px) + 16px)
    16px
    16px;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: center;
}

.eq-modal.is-open{
  display: flex !important;
}

.eq-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}

.eq-modal-panel{
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100dvh - (var(--cts-topbar-h, 0px) + var(--cts-nav-h, 0px) + 32px));
  overflow: auto;
  background: #fff;
  margin: 0 auto;
  border-radius: 14px;
  padding: 26px 30px 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  z-index: 1;
}

.eq-modal-close{
  position: sticky;
  top: 0;
  float: right;
  margin: -26px -30px 14px auto;
  width: 52px;
  height: 52px;
  border: 0;
  background: #b30000;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 3;
  border-bottom-left-radius: 12px;
  border-top-right-radius: 14px;
}

.eq-modal-grid{
  display: grid;
  grid-template-columns: 300px minmax(0,1fr);
  gap: 28px;
  align-items: start;
  clear: both;
}

.eq-modal-left,
.eq-modal-right{
  min-width: 0;
}

.eq-modal-photo img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 900px){
  .eq-modal{
    padding:
      calc(var(--cts-topbar-h, 0px) + var(--cts-nav-h, 0px) + 12px)
      12px
      12px;
  }

  .eq-modal-panel{
    width: 100%;
    max-height: calc(100dvh - (var(--cts-topbar-h, 0px) + var(--cts-nav-h, 0px) + 24px));
    padding: 18px 18px 22px;
    border-radius: 16px;
  }

  .eq-modal-close{
    margin: -18px -18px 12px auto;
    width: 46px;
    height: 46px;
    font-size: 24px;
    border-top-right-radius: 16px;
  }

  .eq-modal-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .eq-modal-left{
    max-width: none !important;
  }

  .eq-modal-name{
    font-size: 18px;
  }
}