:root{
  --bg: #0b1410;
  --surface: #0f1a14;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --subtle: rgba(255,255,255,.12);
  --brand: #2fb34a;
  --brand2: #0b6a3a;
  --accent: #a7f3b5;
  --white: #ffffff;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 26px;
  --max: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(47,179,74,.18), transparent 60%),
    radial-gradient(800px 500px at 80% 0%, rgba(11,106,58,.20), transparent 55%),
    linear-gradient(180deg, #07110c 0%, #070d0a 45%, #061008 100%);
  color: var(--text);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:20px; top:20px; width:auto; height:auto; padding:10px 14px;
  background:#0b6a3a; border-radius:12px; z-index:10000;
}

.header{
  position:sticky; top:0; z-index:999;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}
.brand{
  display:flex; align-items:center; gap: 10px;
  min-width: 220px;
}

.brand .name{font-weight:800; letter-spacing:.3px}
.brand .tag{font-size:12px; color: var(--muted); margin-top:2px}

.nav-links{
  display:flex; align-items:center; gap: 18px;
}
.nav-links a{
  color: var(--muted);
  font-weight: 600;
  padding: 10px 10px;
  border-radius: 12px;
}
.nav-links a:hover{color:var(--text); background: rgba(255,255,255,.06)}
.nav-links a.active{color:var(--text); background: rgba(47,179,74,.14); border:1px solid rgba(47,179,74,.25)}

.actions{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 700;
  box-shadow: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  cursor:pointer;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18)}
.btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: rgba(47,179,74,.35);
}
.btn.primary:hover{border-color: rgba(167,243,181,.55)}
.btn.ghost{
  background: transparent;
  border-color: rgba(255,255,255,.14);
}

.hamburger{
  display:none;
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  align-items:center; justify-content:center;
}

.hero{
  padding: 62px 0 26px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: stretch;
}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 8px 12px;
  border:1px solid rgba(47,179,74,.25);
  background: rgba(47,179,74,.10);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  /* Subtle gold + green glow for cohesion across pages */
  box-shadow:
    0 0 0 1px rgba(47,179,74,.06),
    0 0 18px rgba(47,179,74,.10),
    0 0 14px rgba(212,175,55,.10);
}
.h1{
  margin: 14px 0 10px;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.lead{color: var(--muted); font-size: 16px; max-width: 60ch}
.hero-card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow:hidden;
  position:relative;
}
.hero-card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(450px 220px at 20% 0%, rgba(47,179,74,.25), transparent 60%),
              radial-gradient(420px 240px at 100% 30%, rgba(11,106,58,.24), transparent 55%);
  z-index:0;
}
.hero-card > *{position:relative; z-index:1}
.pill-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.pill{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  padding: 12px;
}
.pill b{display:block}
.pill span{color: var(--muted); font-size: 13px}

.section{padding: 36px 0}
.section h2{
  font-size: clamp(22px, 2.1vw, 30px);
  margin:0 0 8px;
}
.section p{color: var(--muted); margin: 0 0 18px}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  min-height: 220px;
  display:flex; flex-direction:column;
}
.card:hover{transform: translateY(-2px); background: rgba(255,255,255,.075); border-color: rgba(47,179,74,.22)}
.card .top{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom: 10px;
}
.icon{
  width:44px; height:44px; border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(47,179,74,.14);
  border: 1px solid rgba(47,179,74,.25);
  color: var(--accent);
}
.card h3{margin: 0 0 8px; font-size: 18px}
.card ul{margin:0; padding-left: 18px; color: var(--muted)}
.card li{margin: 6px 0}
.card .link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: var(--accent);
  font-weight: 800;
  padding-top: 14px;
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.panel{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 18px;
}
.panel h3{margin: 0 0 10px}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.badges{
  display:flex; flex-wrap:wrap; gap: 12px; align-items:center;
}
.badges img{height:56px; width:auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.25))}

.breadcrumb{
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  margin: 10px 0 0;
}
.breadcrumb a{color: var(--accent)}
.page-hero{
  padding: 42px 0 10px;
}
.page-hero h1{
  margin: 10px 0 10px;
  font-size: clamp(28px, 3vw, 44px);
}
.chips{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px}
.chip{
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 28px 0;
  color: var(--muted);
  margin-top: 36px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 18px;
}
.footer a{color: var(--muted)}
.footer a:hover{color: var(--text)}
.small{font-size: 12px; color: rgba(255,255,255,.55)}
hr.sep{border:0; border-top:1px solid rgba(255,255,255,.08); margin: 18px 0}

.notice{
  border-radius: 16px;
  border: 1px dashed rgba(167,243,181,.35);
  background: rgba(47,179,74,.08);
  padding: 14px;
  color: var(--muted);
}
.notice b{color: var(--text)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; }
  .cards{grid-template-columns: 1fr;}
  .split{grid-template-columns: 1fr;}
  .footer-grid{grid-template-columns: 1fr}
  .nav-links{
    display:none;
    position:absolute;
    top: 68px; right: 20px; left: 20px;
    background: rgba(7,17,12,.95);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    box-shadow: var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding: 12px 12px}
  .hamburger{display:flex}
  .brand{min-width: 0}
}

/* Cleaner homepage hero */
.hero-clean{
  padding: 56px 0 18px;
}
.hero-clean .hero-grid{
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.hero-clean .lead{max-width: 56ch}

.integration{
  background: rgba(255,255,255,.05);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  padding: 16px;
  overflow:hidden;
  position:relative;
  min-height: 320px;
}
.integration::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 240px at 20% 0%, rgba(47,179,74,.20), transparent 60%),
              radial-gradient(520px 260px at 100% 30%, rgba(11,106,58,.22), transparent 55%);
  z-index:0;
}
.integration > *{position:relative; z-index:1}

.brand-stack{
  display:flex; flex-direction:column; align-items:flex-start;
}
.brand-stack .name{font-weight:900; letter-spacing:.3px}
.brand-stack .tag{font-size:12px; color: var(--muted); margin-top:2px}

.brand{
  gap: 12px;
}


/* WhatsApp floating button */
.wa-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  z-index: 1000;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: 1px solid rgba(47,179,74,.35);
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
}
.wa-fab:hover{transform: translateY(-1px)}
.wa-fab svg{width:26px;height:26px}

/* RFQ form */
.form{
  display:grid;
  gap: 12px;
}
.field{
  display:grid;
  gap: 6px;
}
label{font-weight:800; font-size: 13px; color: rgba(255,255,255,.82)}
input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: var(--text);
  outline: none;
}
textarea{min-height: 110px; resize: vertical}
input:focus, select:focus, textarea:focus{
  border-color: rgba(167,243,181,.45);
  box-shadow: 0 0 0 4px rgba(47,179,74,.12);
}

@media (max-width: 980px){
  .hero-clean .hero-grid{grid-template-columns: 1fr;}
  .integration{
  background: rgba(255,255,255,.05);min-height: 280px}
}



/* Homepage background hero inspired by modern engineering sites */
.hero-clean{
  position: relative;
  background:
    linear-gradient(180deg, rgba(7,17,12,.88) 0%, rgba(7,17,12,.92) 35%, rgba(7,17,12,.96) 100%),
    url("assets/img/home-bg.jpg") center/cover no-repeat;
}
.hero-clean::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 500px at 20% 10%, rgba(47,179,74,.18), transparent 60%);
  pointer-events:none;
}
.hero-clean > .container{position:relative; z-index:1;}

/* Homepage hero background image (faded) */
.hero-bg{
  position: relative;
  overflow: hidden;
}
.hero-bg::before{
  content:"";
  position:absolute; inset:-20px;
  background-image:
    linear-gradient(180deg, rgba(7,17,12,.78) 0%, rgba(7,17,12,.62) 55%, rgba(7,17,12,.92) 100%),
    url("../img/hero-integration.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(.85) contrast(.95) blur(1.2px);
  opacity: .42; /* controls how faded it is */
  transform: translateY(var(--par, 0px)) scale(1.04);
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 380px at 20% 10%, rgba(47,179,74,.22), transparent 60%),
    radial-gradient(700px 380px at 85% 25%, rgba(11,106,58,.22), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.hero-bg > *{position:relative; z-index:1}

/* Scroll reveal */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}

/* Floating integration links (homepage) */
.orb-wrap{
  display:grid;
  place-items:center;
  min-height: 320px;
}
.orb-stage{
  position:relative;
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
}
.orb{
  position:absolute;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  text-align:center;
  padding: 14px;
  background: radial-gradient(circle at 30% 20%, rgba(47,179,74,.22), rgba(255,255,255,.06) 55%, rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.orb:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(167,243,181,.55);
}
.orb b{font-size: 14px; letter-spacing:.2px}
.orb span{font-size: 12px; color: var(--muted); margin-top: 6px; display:block}
.orb .mini{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:grid; place-items:center;
  margin: 0 auto 10px;
  background: rgba(47,179,74,.14);
  border: 1px solid rgba(47,179,74,.25);
  color: var(--accent);
}
.orb.center{
  width: 190px; height: 190px;
  left: 50%; top: 50%;
  transform: translate(-50%,-52%);
  background: radial-gradient(circle at 30% 20%, rgba(47,179,74,.28), rgba(11,106,58,.10) 60%, rgba(255,255,255,.04));
  border-color: rgba(47,179,74,.30);
}
.orb.a{left: 0%; top: 18%;}
.orb.b{right: 0%; top: 18%;}
.orb.c{left: 50%; bottom: 0%; transform: translateX(-50%);}

.orb-lines{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.75;
}
.orb-lines path{
  stroke: rgba(167,243,181,.35);
  stroke-width: 3;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray: 6 10;
  animation: dash 12s linear infinite;
}
@keyframes dash{
  to { stroke-dashoffset: -200; }
}

/* RFQ Modal (reduces homepage clutter) */
.modal{
  position:fixed; inset:0;
  background: rgba(0,0,0,.62);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 2000;
}
.modal.open{display:flex}
.modal-card{
  width: min(720px, 100%);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,17,12,.92);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-head b{font-size: 16px}
.icon-btn{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  display:grid; place-items:center;
}
.icon-btn:hover{background: rgba(255,255,255,.08)}
.modal-body{padding: 16px 18px}
.modal-note{color: var(--muted); font-size: 13px; margin-top: 8px}

.hero-clean.hero-bg{padding: 44px 0 10px;}
.hero-clean .hero-grid{
  grid-template-columns: 1.05fr .95fr;
}
.hero-actions{
  display:flex; gap: 10px; flex-wrap:wrap; margin-top: 16px;
}
.hero-actions .btn{padding: 12px 16px}

@media (max-width: 980px){
  .orb-stage{max-width: 420px}
  .orb{width: 150px; height: 150px}
  .orb.center{width: 170px; height: 170px}
}


/* Lighter top bar so logo stands out */
.header{
  background: rgba(7,17,12,.40); /* lighter than before */
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Make logo slightly darker and crisp */


/* Center and enlarge integration bubbles */
.orb-wrap{
  display:grid;
  place-items:center;
  min-height: 380px;
}

.orb-stage{
  transform: scale(1.08);
}

/* More visible background image */
.hero-bg::before{
  opacity: .42 !important; /* less faded than before */
}

/* Move established text above bubbles */
.established-banner{
  max-width: 64ch;
  margin: 0 auto 16px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

/* Better headline font feel (clean modern corporate) */
.h1{
  letter-spacing: -0.03em;
  font-weight: 800;
}

/* Center the hero text block above bubbles on mobile */
@media (max-width: 980px){
  .hero-clean .hero-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Homepage centered layout */
.hero-center .hero-grid{
  grid-template-columns: 1fr;
  text-align:center;
  justify-items:center;
  gap: 18px;
}
.hero-center .kicker{justify-content:center}
.hero-center .breadcrumb{justify-content:center}
.hero-center .hero-actions{justify-content:center}
.hero-center .lead{margin-left:auto;margin-right:auto}

/* Make the orb cluster sit in the middle of the screen and feel more 'blasted out' */
.hero-center .orb-wrap{min-height: 300px; margin-top: -24px;}
.hero-center .orb-stage{
  width: min(540px, 96vw);
  margin-top: -28px;
}
.hero-center .orb{
  width: 168px;
  height: 168px;
}
.hero-center .orb.center{
  width: 192px;
  height: 192px;
}
.hero-center .orb.a{left: 9%; top: 10%;}
.hero-center .orb.b{right: 9%; top: 10%;}
.hero-center .orb.c{left: 50%; top: 64%; transform: translate(-50%, -50%);}

/* Brand title styling (nicer looking type without external fonts) */
.brand-title{
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  letter-spacing: -0.02em;
  font-weight: 900;
}
.brand-sub{
  color: var(--muted);
  font-size: 14px;
  max-width: 70ch;
  margin: 0 auto;
}

/* Move bubbles higher and closer together */
.hero-center .orb-wrap{
  min-height: 360px;      /* was 420px */
  margin-top: -20px;      /* pulls cluster upward */
}

.hero-center .orb-stage{
  width: min(540px, 96vw);
  margin-top: -28px;
}

/* Reduce spacing between orbs */
.hero-center .orb{
  width: 168px;
  height: 168px;
}
.hero-center .orb.center{
  width: 192px;
  height: 192px;
}

/* Pull bottom orb up so all four are visible immediately */
.hero-center .orb.c{left: 50%; top: 64%; transform: translate(-50%, -50%);}

/* Nudge side orbs inward */
.hero-center .orb.a{left: 9%; top: 10%;}
.hero-center .orb.b{right: 9%; top: 10%;}

/* Bigger, more pronounced logo in header */
.brand img{
  height: 92px;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.45));
}

/* Subtle gradient halo behind the logo */
.brand{
  padding: 10px 12px;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 20%, rgba(47,179,74,.28), rgba(255,255,255,.02) 70%);
}


/* Header logo emphasis */
.brand{
  min-width: 0;
}
.brand img{
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.45));
}
.brand{
  padding: 10px 12px;
  border-radius: 20px;
  background: radial-gradient(110px 80px at 30% 20%, rgba(47,179,74,.35), rgba(255,255,255,.05) 60%, rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
}


/* Ensure logo never stretches */
.brand img{
  width: 92px;
  height: 92px;
  object-fit: contain;
  aspect-ratio: 1 / 1;
}


@media (max-width: 480px){
  .hero-center .orb-stage{width: min(420px, 96vw); margin-top: -18px;}
  .hero-center .orb{width: 146px; height: 146px;}
  .hero-center .orb.center{width: 168px; height: 168px;}
  .hero-center .orb.a{left: 6%; top: 8%;}
  .hero-center .orb.b{right: 6%; top: 8%;}
  .hero-center .orb.c{left: 50%; top: 66%; transform: translate(-50%, -50%);}
}


/* Compact header height */
.nav{padding: 10px 0;}


/* Lift hero text upward */
.hero-center .hero-grid > div:first-child{
  margin-top: -16px;
}
.hero-center .kicker{margin-bottom: 6px;}
.hero-center .h1{margin: 6px 0 6px;}
.hero-center .brand-sub{margin-top: 6px;}


/* Push action buttons to opposite ends */
.hero-center .hero-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 640px;
  margin: 10px auto 0;
}
.hero-center .hero-actions a:first-child{justify-self:start;}
.hero-center .hero-actions a:last-child{justify-self:end;}



  .hero-center .orb.a{left: 8%; top: 6%;}
  .hero-center .orb.b{right: 8%; top: 6%;}
  .hero-center .orb.c{top: 62%;}
}

/* === Clean, truly symmetrical orb layout === */
.hero-center .orb-stage{
  width: min(520px, 96vw);
  margin-top: -28px; /* lifts cluster higher */
}

/* center hub */
.hero-center .orb.center{
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}

/* three service orbs placed evenly around the hub */
.hero-center .orb.a{ /* Facilities */
  left: 28%;
  top: 22%;
  transform: translate(-50%, -50%);
}

.hero-center .orb.b{ /* IT */
  left: 72%;
  top: 22%;
  transform: translate(-50%, -50%);
}

.hero-center .orb.c{ /* Mining */
  left: 50%;
  top: 74%;
  transform: translate(-50%, -50%);
}

/* keep sizes consistent and prevent overlap */
.hero-center .orb{
  width: 170px;
  height: 170px;
}
.hero-center .orb.center{
  width: 200px;
  height: 200px;
}

/* mobile-safe geometry */
@media (max-width: 640px){
  .hero-center .orb-stage{width: min(440px, 96vw); margin-top: -18px;}
  .hero-center .orb{width: 150px; height: 150px;}
  .hero-center .orb.center{width: 180px; height: 180px;}
  .hero-center .orb.a{left: 26%; top: 20%;}
  .hero-center .orb.b{left: 74%; top: 20%;}
  .hero-center .orb.c{left: 50%; top: 76%;}
}

/* v8: Force symmetric, non-overlapping orb layout */
.hero-center .orb-stage{
  position: relative;
  width: min(560px, 96vw);
  aspect-ratio: 1 / 1;
  margin-top: -22px;
}
.hero-center .orb{
  width: 160px;
  height: 160px;
  z-index: 2;
}
.hero-center .orb.center{
  width: 190px;
  height: 190px;
  z-index: 3;
}

/* Place all orbs using center-based transforms to guarantee symmetry */
.hero-center .orb.center{
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hero-center .orb.a{
  left: 22%;
  top: 22%;
  transform: translate(-50%, -50%);
}
.hero-center .orb.b{
  left: 78%;
  top: 22%;
  transform: translate(-50%, -50%);
}
.hero-center .orb.c{
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
}

/* Increase breathing room by shrinking text slightly inside orbs */
.orb b{font-size: 13px;}
.orb span{font-size: 11.5px; line-height:1.25}

/* Make lines match new geometry */
.orb-lines{opacity:.7}
.orb-lines path{stroke-width: 2.5}

/* Mobile: prevent overlap on small screens */
@media (max-width: 480px){
  .hero-center .orb-stage{width: min(420px, 96vw);}
  .hero-center .orb{width: 138px; height: 138px;}
  .hero-center .orb.center{width: 160px; height: 160px;}
  .hero-center .orb.a{left: 24%; top: 22%;}
  .hero-center .orb.b{left: 76%; top: 22%;}
  .hero-center .orb.c{left: 50%; top: 82%;}
}

/* v9: PERFECTLY SYMMETRIC ORB LAYOUT (no overlap) */
.hero-center .hero-grid{
  grid-template-columns: 1fr;
  text-align:center;
}

/* Pull everything higher so all 4 orbs are fully visible on load */
.hero-clean.hero-bg{padding: 36px 0 8px;}

.hero-center .orb-wrap{min-height: 270px;}

.hero-center .orb-stage{
  position: relative;
  width: min(520px, 96vw);
  aspect-ratio: 1 / 1;
  margin: -12px auto 0;
}

/* Uniform outer orbs */
.hero-center .orb{
  width: 160px;
  height: 160px;
}

/* Slightly larger center hub */
.hero-center .orb.center{
  width: 190px;
  height: 190px;
}

/* --- EXACTLY EQUAL SPACING FROM CENTER --- */
/* Center hub */
.hero-center .orb.center{
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Three surrounding orbs at equal distance from center */
.hero-center .orb.a{  /* top-left */
  left: 25%;
  top: 25%;
  transform: translate(-50%, -50%);
}

.hero-center .orb.b{  /* top-right */
  left: 75%;
  top: 25%;
  transform: translate(-50%, -50%);
}

.hero-center .orb.c{  /* bottom center */
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
}

/* Keep clean breathing room on small screens */
@media (max-width: 480px){
  .hero-center .orb-stage{width: min(400px, 96vw);}
  .hero-center .orb{width: 140px; height: 140px;}
  .hero-center .orb.center{width: 165px; height: 165px;}
}



/* Make hero more compact so orbs are visible immediately */
.hero-clean.hero-bg.hero-center{padding: 26px 0 6px;}
.hero-center .hero-grid{gap: 12px;}
.hero-center .hero-grid > div:first-child{margin-top: -18px;}

/* Orb cluster sits higher */
.hero-center .orb-wrap{min-height: 270px;}
.hero-center .orb-stage{
  width: min(520px, 92vw);
  margin-top: -60px;
}

/* Perfect equal-radius positions around center:
   Use a single radius so all 3 outer orbs are exactly the same distance from the center orb. */
.hero-center .orb{width: 156px; height: 156px;}
.hero-center .orb.center{width: 184px; height: 184px;}

.hero-center .orb.center{left:50%; top:50%; transform: translate(-50%,-50%);}

/* radius = 30% from center (computed as screen coords):
   x = 50 + cos(a)*30, y = 50 - sin(a)*30 (invert y for screen) */
.hero-center .orb.a{ /* Top */
  left: 50%;
  top: 20%;
  transform: translate(-50%,-50%);
}
.hero-center .orb.b{ /* Bottom-left (angle 210°) */
  left: 24%;
  top: 65%;
  transform: translate(-50%,-50%);
}
.hero-center .orb.c{ /* Bottom-right (angle 330°) */
  left: 76%;
  top: 65%;
  transform: translate(-50%,-50%);
}

/* Make sure nothing overlaps on small screens */
@media (max-width: 480px){
  .hero-clean.hero-bg.hero-center{padding: 28px 0 6px;}
  .hero-center .orb-stage{width: min(420px, 92vw); margin-top: -48px;}
  .hero-center .orb{width: 138px; height: 138px;}
  .hero-center .orb.center{width: 164px; height: 164px;}
  .hero-center .orb.a{top: 18%;}
  .hero-center .orb.b{left: 26%; top: 67%;}
  .hero-center .orb.c{left: 74%; top: 67%;}
}

/* v15: CLEAN, GUARANTEED ALIGNMENT (based on your screenshot) */

/* Keep title clear of bubbles */
.hero-center .hero-grid > div:first-child{
  margin-bottom: 40px;      /* fixed breathing room under Lavari Solutions */
}

/* Tighter but safer hero padding */
.hero-clean.hero-bg.hero-center{
  padding: 40px 0 14px;
}

/* Orb container sits lower so it never touches the title */
.hero-center .orb-wrap{
  min-height: 420px;        /* ensures full visibility above the fold */
}
.hero-center .orb-stage{
  width: min(560px, 90vw);
  aspect-ratio: 1 / 1;
  margin-top: 0;            /* neutral baseline */
}

/* Sizes */
.hero-center .orb{
  width: 160px;
  height: 160px;
}
.hero-center .orb.center{
  width: 190px;
  height: 190px;
}

/* === PERFECT SYMMETRIC COORDINATES (triangle around center) === */
.hero-center .orb.center{
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Outer orbs all on SAME radius from center */
.hero-center .orb.a{   /* TOP */
  left: 50%;
  top: 24%;
  transform: translate(-50%, -50%);
}
.hero-center .orb.b{   /* BOTTOM-LEFT */
  left: 30%;
  top: 76%;
  transform: translate(-50%, -50%);
}
.hero-center .orb.c{   /* BOTTOM-RIGHT */
  left: 70%;
  top: 76%;
  transform: translate(-50%, -50%);
}

/* Mobile safety (still visible, still symmetric) */
@media (max-width: 600px){
  .hero-center .orb-wrap{min-height: 360px;}
  .hero-center .orb-stage{width: min(420px, 92vw);}
  .hero-center .orb{width: 140px; height: 140px;}
  .hero-center .orb.center{width: 168px; height: 168px;}
  .hero-center .orb.a{top: 26%;}
  .hero-center .orb.b{left: 32%; top: 78%;}
  .hero-center .orb.c{left: 68%; top: 78%;}
}

/* v16: Homepage orb visibility fix
   - Move orb cluster upward so bottom orbs are fully visible without scrolling
   - Keep neat spacing under title (smaller gap)
   - Keep symmetric equal-radius layout
*/

.hero-clean.hero-bg.hero-center{
  padding: 20px 0 10px !important;
}

.hero-center .hero-grid{
  grid-template-columns: 1fr !important;
  text-align: center !important;
  justify-items: center !important;
  gap: 10px !important;
}
.hero-center .kicker{margin: 0 0 6px !important;}
.hero-center .h1{margin: 0 0 6px !important;}

.hero-center .brand-sub, .hero-center .lead{display:none !important;}

/* Orb cluster: slightly closer to the title and moved up within the viewport */
.hero-center .orb-wrap{
  min-height: 380px !important;
  display: grid !important;
  place-items: center !important;
}
.hero-center .orb-stage{
  width: min(540px, 92vw) !important;
  aspect-ratio: 1 / 1 !important;
  margin-top: 4px !important; /* smaller gap under title */
}

/* Orb sizes (a touch smaller to avoid clipping) */
.hero-center .orb{width: 152px !important; height: 152px !important;}
.hero-center .orb.center{width: 180px !important; height: 180px !important;}

/* Symmetric coordinates (lifted up):
   Center at (50,48). Outer at equal radius:
   Top (50,22), Bottom-left (28,66), Bottom-right (72,66)
*/
.hero-center .orb.center{left:50% !important; top:48% !important; transform: translate(-50%,-50%) !important;}
.hero-center .orb.a{left:50% !important; top:22% !important; transform: translate(-50%,-50%) !important;}
.hero-center .orb.b{left:28% !important; top:66% !important; transform: translate(-50%,-50%) !important;}
.hero-center .orb.c{left:72% !important; top:66% !important; transform: translate(-50%,-50%) !important;}

/* Lines: behind orbs and pointing to new coords */
.orb-lines{position:absolute; inset:0; pointer-events:none; opacity:.8 !important; z-index:1;}
.orb{z-index:2;}
.orb.center{z-index:3;}
.orb-lines path{
  stroke: rgba(167,243,181,.42) !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  fill: none !important;
  stroke-dasharray: 7 10 !important;
}

/* Mobile */
@media (max-width: 480px){
  .hero-clean.hero-bg.hero-center{padding: 16px 0 8px !important;}
  .hero-center .orb-wrap{min-height: 340px !important;}
  .hero-center .orb-stage{width: min(410px, 92vw) !important; margin-top: 4px !important;}
  .hero-center .orb{width: 136px !important; height: 136px !important;}
  .hero-center .orb.center{width: 160px !important; height: 160px !important;}
  .hero-center .orb.center{top: 48% !important;}
  .hero-center .orb.a{top: 24% !important;}
  .hero-center .orb.b{left: 30% !important; top: 68% !important;}
  .hero-center .orb.c{left: 70% !important; top: 68% !important;}
}

/* v17: Nudge orbs much higher (about ~1cm visual gap under title) */

/* Reduce space under title further */
.hero-center .hero-grid > div:first-child{
  margin-bottom: 6px !important;
}

/* Pull the orb cluster upward relative to the title */
.hero-center .orb-stage{
  margin-top: -22px !important; /* lifts entire cluster */
}

/* Also shrink the container height so bottom isn't pushed down */
.hero-center .orb-wrap{
  min-height: 300px !important;
}

/* Keep symmetry but lift center slightly */
.hero-center .orb.center{top: 46% !important;}
.hero-center .orb.a{top: 18% !important;}
.hero-center .orb.b{top: 62% !important;}
.hero-center .orb.c{top: 62% !important;}

/* v18: Make orbs larger + improve text fit while keeping current spacing */

.hero-center .orb{
  width: 180px !important;
  height: 180px !important;
  padding: 18px !important;
}

.hero-center .orb.center{
  width: 210px !important;
  height: 210px !important;
}

/* Slightly reduce text size so it sits comfortably inside */
.orb b{font-size: 13.5px !important; line-height: 1.2 !important;}
.orb span{font-size: 11.8px !important; line-height: 1.25 !important;}

/* Ensure text wraps neatly inside the circle */
.orb > div{
  max-width: 100% !important;
  text-align: center !important;
}

/* Keep cluster position but allow slightly more room */
.hero-center .orb-stage{
  width: min(600px, 94vw) !important;
}

/* Keep mobile safe */
@media (max-width: 480px){
  .hero-center .orb{width: 160px !important; height: 160px !important;}
  .hero-center .orb.center{width: 185px !important; height: 185px !important;}
}

/* v19: Clean logo integration + orb sizing (outer bigger, center smaller) */

/* Remove logo badge/box and let it blend into the header */
.brand{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Glow on the logo itself (not a box) */
.brand img{
  width: 92px !important;
  height: 92px !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.45))
    drop-shadow(0 0 14px rgba(47,179,74,.35)) !important;
}

/* Make outer orbs slightly bigger and center orb slightly smaller */
.hero-center .orb{
  width: 192px !important;
  height: 192px !important;
  padding: 18px !important;
}
.hero-center .orb.center{
  width: 196px !important;
  height: 196px !important;
}

/* Rebalance stage width so bigger outer orbs still fit */
.hero-center .orb-stage{
  width: min(640px, 96vw) !important;
}

/* Mobile sizing */
@media (max-width: 480px){
  .brand img{width: 78px !important; height: 78px !important;}
  .hero-center .orb{width: 166px !important; height: 166px !important;}
  .hero-center .orb.center{width: 170px !important; height: 170px !important;}
}

/* v20: Make leafy 'L' logo more pronounced + shrink center orb */

/* Let the cropped L fill more of the header panel */
.brand img{
  width: 90px !important;      /* header logo size */
  height: auto !important;
  max-height: 90px !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.45))
    drop-shadow(0 0 16px rgba(47,179,74,.38)) !important;
}

/* Keep header clean so the L stands out */
.brand{
  padding: 4px 0 !important;
}

/* --- Orb re-balance: make CENTER clearly smaller than outers --- */
.hero-center .orb{
  width: 190px !important;
  height: 190px !important;
}

/* Make center orb noticeably smaller than the three outer ones */
.hero-center .orb.center{
  width: 170px !important;
  height: 170px !important;
}

/* Slightly widen stage so larger outer orbs still fit neatly */
.hero-center .orb-stage{
  width: min(660px, 96vw) !important;
}

/* Mobile adjustments */
@media (max-width: 480px){
  .brand img{width: 80px !important; max-height: 80px !important;}
  .hero-center .orb{width: 168px !important; height: 168px !important;}
  .hero-center .orb.center{width: 150px !important; height: 150px !important;}
}

/* Final override (prevents earlier rules from winning) */
.header .brand img{
  width: 90px !important;
  height: auto !important;
  max-height: 90px !important;
}
@media (max-width: 480px){
  .header .brand img{
    width: 80px !important;
    max-height: 80px !important;
  }
}

/* v21: Overlapping orb look + move cluster up slightly */
.hero-center .orb-stage{ margin-top: -12px !important; }

/* Pull the center up and outer orbs inward for slight overlaps */
.hero-center .orb.center{ top: 44% !important; z-index: 6 !important; }
.hero-center .orb.a{ top: 20% !important; }
.hero-center .orb.b{ left: 30% !important; top: 60% !important; }
.hero-center .orb.c{ left: 70% !important; top: 60% !important; }

/* Softer overlap shadows */
.hero-center .orb{ box-shadow: 0 18px 40px rgba(0,0,0,.35) !important; }

/* v24: Creative categorized service pages (shapes + animations) */
.service-hero{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 34px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
}
.service-hero h1{
  margin: 6px 0 10px;
  letter-spacing: -.02em;
}
.service-hero p{
  max-width: 70ch;
  opacity: .9;
  text-align: center;
  margin: 0 auto;
}
.service-hero .hero-badges{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
  justify-content: center;
}

/* Keep the intro sentence in a single clean line on large screens */
@media (min-width: 900px){
  .service-hero p{ white-space: nowrap; }
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(167,243,181,.22);
  color: rgba(224,255,235,.92);
  font-weight: 600;
  font-size: 12px;
}
.badge i{
  width: 18px; height: 18px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: rgba(16,185,129,.14);
  border: 1px solid rgba(167,243,181,.18);
}

.shape-bg{
  position:absolute; inset:-20%;
  pointer-events:none;
  opacity:.75;
  filter: blur(0px);
}
.shape-bg .blob{
  position:absolute;
  width: 360px; height: 360px;
  border-radius: 48% 52% 55% 45% / 48% 42% 58% 52%;
  background: radial-gradient(circle at 30% 30%, rgba(47,179,74,.30), rgba(16,185,129,.04) 65%);
  border: 1px solid rgba(167,243,181,.10);
  animation: floatSlow 10s ease-in-out infinite;
}
.shape-bg .blob.b1{ top: -40px; left: -40px; animation-delay: -2s; }
.shape-bg .blob.b2{ bottom: -80px; right: -50px; width: 420px; height: 420px; animation-delay: -5s; opacity:.65; }
.shape-bg .grid{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.14;
  mask-image: radial-gradient(circle at 35% 20%, black 0%, transparent 70%);
}

/* Category grid */
.category-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.cat-card{
  grid-column: span 4;
  position: relative;
  overflow:hidden;
  border-radius: 26px;
  padding: 18px 16px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  transform: translateY(8px);
  opacity: 0;
}
.cat-card.reveal-in{
  transform: translateY(0);
  opacity: 1;
  transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .65s ease;
}
.cat-card .cap{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 10px;
}
.cat-card h3{
  margin: 0;
  font-size: 15px;
  letter-spacing: -.01em;
}

/* Service card images (Building & Maintenance page) */
.cat-media{
  margin: -18px -16px 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(152, 220, 152, 0.35);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.cat-img{
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center;
}

/* Center the Building & Maintenance hero line */
.service-hero p{
  text-align: center;
  max-width: 980px;
  margin: 10px auto 0;
}
@media (min-width: 980px){
  .service-hero p{ white-space: nowrap; }
}
.cat-card .shape{
  width: 44px; height: 44px;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 30%, rgba(47,179,74,.38), rgba(16,185,129,.06) 70%);
  border: 1px solid rgba(167,243,181,.18);
  transform: rotate(8deg);
}
.cat-card .desc{ opacity:.9; font-size: 13px; line-height:1.4; margin: 0 0 10px; }
.cat-card details{
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 10px;
}
.cat-card summary{
  cursor:pointer;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(224,255,235,.86);
}
.cat-card summary::-webkit-details-marker{display:none;}
.cat-card summary .chev{
  width: 26px; height: 26px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  display:grid; place-items:center;
  transition: transform .25s ease;
}
.cat-card details[open] summary .chev{ transform: rotate(180deg); }
.cat-card ul{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(236,255,242,.88);
  font-size: 13px;
  line-height:1.45;
}
.cat-card li{ margin: 6px 0; }

/* Two-column callout strip */
.strip{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}
.strip .panel{
  border-radius: 26px;
  padding: 18px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.strip .panel h3{ margin: 0 0 8px; font-size: 15px;}
.strip .panel p{ margin:0; opacity:.9; font-size: 13px; line-height:1.45;}
.strip .panel .mini{
  margin-top: 10px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.mini-pill{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(167,243,181,.18);
  font-weight: 650;
  font-size: 12px;
  color: rgba(236,255,242,.92);
}

/* Responsive */
@media (max-width: 980px){
  .cat-card{ grid-column: span 6; }
  .strip{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .cat-card{ grid-column: span 12; }
  .service-hero{ padding: 26px 16px; border-radius: 22px; }
}

/* Floating */
@keyframes floatSlow{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(10px, -12px) scale(1.03); }
}

/* Partners strip at bottom of homepage */
.partners-strip{
  margin-top: 28px;
  padding: 22px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-top: 1px solid rgba(255,255,255,.10);
}
.partners-grid{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 32px;
  flex-wrap:wrap;
}
.partners-grid img{
  max-height: 64px;
  width:auto;
  opacity:.9;
  transition: transform .25s ease, opacity .25s ease;
}
.partners-grid img:hover{
  transform: translateY(-2px);
  opacity:1;
}
@media (max-width: 560px){
  .partners-grid{gap: 20px;}
  .partners-grid img{max-height: 52px;}
}

/* Light green background for partners strip */
.partners-strip{
  background: linear-gradient(180deg, #e9f6ed, #dff2e4) !important;
}
.partners-strip h2{ color: #0b3d1f !important; }
.partners-grid img{ filter: none !important; opacity: 1 !important; }

.service-illustration{
  text-align:center;
  margin-bottom: 12px;
}
.service-illustration img{
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.18));
}

/* Three-column IT cards */
.three-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items:flex-start;
}
.it-card{
  background: rgba(255,255,255,.98);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.it-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.it-card img{
  width:100%;
  border-radius: 14px;
  margin-bottom: 14px;
}
.it-card h3{ margin: 8px 0 6px; }
.it-card ul{ margin-top: 10px; }
@media (max-width: 900px){
  .three-grid{ grid-template-columns: 1fr; }
}

/* v29: IT three-panel cards (always visible) */
.it-cards{ margin-top: 18px; }
.three-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.it-card{
  background: rgba(255,255,255,.96);
  border-radius: 22px;
  padding: 16px 16px 14px;
  color: #0b1b12;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.it-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
}
.it-card-media{
  border-radius: 16px;
  overflow:hidden;
  background: #fff;
}
.it-card img{
  width:100%;
  height: 280px;
  object-fit: cover;
  display:block;
}
.it-card h3{
  margin: 14px 0 6px;
  font-size: 18px;
  text-transform: none;
}
.it-card p{ margin: 0 0 10px; opacity: .9; line-height: 1.45; }
.it-card ul{
  margin: 0;
  padding-left: 18px;
}
.it-card li{ margin: 6px 0; }

@media (max-width: 980px){
  .three-grid{ grid-template-columns: 1fr; }
  .it-card img{ height: 240px; }
}

/* Make partner logos easier to see */
.partners-grid img{
  max-height: 78px !important;
}

/* IEC logo slightly bigger than others */
.partners-grid img[src*="iec"]{ max-height: 92px !important; }

/* IT cards: light green base + green shade behind text */
.it-card{ background:#e9f6ed !important; border:1px solid rgba(11,61,31,.14) !important; position:relative; overflow:hidden; }
.it-card::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:10px;
  height: 44%;
  background: linear-gradient(180deg, rgba(12,96,43,.10), rgba(12,96,43,.18));
  border-radius: 16px;
  pointer-events:none;
}
.it-card h3, .it-card p, .it-card ul, .it-card details{ position:relative; z-index:1; }

/* IT card expanders */
.it-more{
  margin-top: 10px;
  border-top: 1px solid rgba(11,61,31,.18);
  padding-top: 10px;
}
.it-more summary{
  cursor:pointer;
  font-weight: 700;
  color: #0b3d1f;
  list-style: none;
}
.it-more summary::-webkit-details-marker{ display:none; }
.it-more-body{
  margin-top: 8px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,61,31,.12);
  border-radius: 14px;
  padding: 10px 12px;
}
.it-more-body p{ margin: 0 0 8px; }

/* v33: IT panels alignment + better contrast + limey green tint */
.it-cards .three-grid{
  align-items: stretch;
}
.it-cards .it-card{
  display:flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, #eaf9ee 0%, #dbf3e2 100%) !important; /* brighter limey green */
  border: 1px solid rgba(11,61,31,.18) !important;
}
.it-cards .it-card::after{
  left:12px; right:12px; bottom:12px;
  height: 42%;
  background: linear-gradient(180deg, rgba(34,139,74,.12), rgba(34,139,74,.22)) !important;
}
.it-cards .it-card-media{
  height: 260px;               /* same cube height across all */
  border-radius: 16px;
  overflow:hidden;
  background: #f4f6f7;
  border: 1px solid rgba(0,0,0,.06);
}
.it-cards .it-card img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
}
.it-cards .it-card h3{
  margin: 14px 0 8px;
  line-height: 1.1;
  min-height: 44px;            /* keeps headings aligned even if wrapping */
  display:flex;
  align-items:flex-end;
  color: #0b3d1f;
  letter-spacing: .2px;
}
.it-cards .it-card p{
  margin: 0 0 12px;
  color: #0b3d1f !important;   /* darker green for readability */
  font-weight: 600;
  opacity: 1;
}
.it-cards .it-card ul{
  margin-top: 0;
  color: #0b1b12;
}
.it-cards .it-card li{
  color: rgba(11,27,18,.92);
}
/* Make the expandable "more details" area consistent and not push cards unevenly */
.it-cards details.it-more{
  margin-top: 10px;
}
.it-cards .it-more-body{
  background: rgba(255,255,255,.70);
}
/* On smaller screens keep it tight */
@media (max-width: 980px){
  .it-cards .it-card-media{ height: 240px; }
  .it-cards .it-card h3{ min-height: 0; }
}


/* Standardized IT image cube sizes */
.it-card img {
    width: 320px !important;
    height: 280px !important;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}
.it-card {
    align-items: center;
}

/* v35: Ensure IT text area never clips */
.it-cards .it-card{
  padding-bottom: 24px !important;
}
.it-cards .it-card::after{
  height: 60% !important;
}
.it-cards .it-more-body{
  max-height: none !important;
}


.it-cards .it-card p, .it-cards .it-card li{
  color: #0b3d1f !important;
}


/* v36: equal height and alignment for IT green panels */
.it-cards{
  align-items: stretch !important;
}
.it-cards .it-card{
  display:flex;
  flex-direction:column;
}
.it-cards .it-card .it-body{
  flex:1 0 auto;
  min-height: 380px !important;
}
.it-cards .it-card h3{
  min-height: 64px !important;
  display:flex;
  align-items:center;
}


/* IT heading band under image */
.it-band{
  background:#e8f4e9;
  padding:12px 16px;
  text-align:left;
}
.it-band h3{
  margin:0;
  color:#0b3d1f;
}


/* v40: heading band under image */
.it-band{
  background:#e8f4e9;
  padding:14px 16px;
  text-align:left;
}
.it-band h3{
  margin:0;
  color:#0b3d1f;
  font-size:1.05rem;
}


/* v43: clear light band for headings under image */
.it-band{
  background:#e8f4e9;
  padding:14px 16px;
  text-align:left;
  border-radius: 6px;
  margin: 6px 0 10px 0;
}
.it-band h3{
  margin:0;
  color:#0b3d1f;
  font-weight:600;
}


/* v44: refined heading bands */
.it-band{
  background:#cfe5d5;           /* slightly darker green */
  padding:14px 16px;
  text-align:center;            /* center headings */
  border:1px solid #0b3d1f;     /* thin dark border */
  border-radius: 6px;
  margin: 6px 0 10px 0;
}

.it-band h3{
  margin:0;
  color:#0b3d1f;
  font-weight:700;              /* bolder headings */
  letter-spacing: 0.2px;
}

.it-body{
  background:#dfeee3;
  padding:14px 16px;
}


/* v46: IT cards with image + info cubes and overlap heading band */
.it-card{
  background: rgba(232, 244, 233, 0.95);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.it-imagebox{
  background: rgba(255,255,255,.98);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.it-imagebox img{
  width:100% !important;
  height:auto !important;
  border-radius: 14px;
  margin: 0 !important;
  object-fit: contain;
}
.it-overlap-band{
  margin-top: -18px; /* creates the overlap */
  margin-left: 14px;
  margin-right: 14px;
  background: linear-gradient(180deg, rgba(232,244,233,0.95), rgba(202,228,210,0.95));
  border: 1px solid rgba(12,78,40,0.18);
  border-radius: 14px;
  padding: 10px 14px;
  text-align: center;
  position: relative;
  z-index: 3;
}
.it-overlap-band h3{
  margin: 0;
  font-weight: 850;
  color: #0c4e28;
  letter-spacing: .2px;
}
.it-infobox{
  margin-top: -10px; /* tuck under the overlap band */
  background: rgba(202,228,210,0.95);
  border-radius: 18px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(12,78,40,0.10);
}
/* remove old band if present */
.it-band{ display:none !important; }

/* v46: footer */
.site-footer{
  margin-top: 70px;
  background: rgba(7, 25, 15, 0.92);
  border-top: 1px solid rgba(140,255,180,0.18);
  padding: 28px 18px;
}
.footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
}
.footer-title{
  font-size: 18px;
  font-weight: 800;
  color: rgba(234,255,239,.98);
}
.footer-sub, .footer-text{
  color: rgba(234,255,239,.72);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
}
.footer-label{
  color: rgba(234,255,239,.9);
  font-weight: 700;
  margin-bottom: 8px;
}
.footer-link{
  display:block;
  color: rgba(234,255,239,.78);
  text-decoration: none;
  margin-bottom: 8px;
}
.footer-link:hover{ color: rgba(234,255,239,.95); text-decoration: underline; }
@media (max-width: 820px){
  .footer-inner{ grid-template-columns: 1fr; }
}

/* v47: thinner overlap bands */
.it-overlap-band{
  padding: 6px 12px !important;
}

/* ensure footer email displays nicely if present */
.footer-link.email{
  font-weight:600;
}


/* v53: make header logo larger and keep proportions */
.site-header .logo img,
.header-logo img,
.navbar-brand img,
.logo img {
  max-height: 90px !important;   /* was smaller before */
  height: auto !important;
  width: auto !important;
}


/* v55: thinner top header band */
.site-header, header, .navbar, .top-bar {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  min-height: 52px !important;
}


/* v55: larger cropped logo display */
.site-header .logo img,
.header-logo img,
.navbar-brand img,
.logo img {
  max-height: 120px !important;
  height: auto !important;
  width: auto !important;
}


/* v65: partners logo marquee loop */
.partners-marquee{
  overflow:hidden;
  width:100%;
  position:relative;
}
.partners-track{
  display:flex;
  width:max-content;
  gap:0;
  animation: partnersScroll 28s linear infinite;
  will-change: transform;
}
.partners-group{
  display:flex;
  align-items:center;
  gap:48px;
  padding: 10px 24px;
}
.partners-group img{
  height: 46px;
  width: auto;
  display:block;
  opacity: .95;
  filter: none;
}
@keyframes partnersScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
/* pause on hover */
.partners-marquee:hover .partners-track{
  animation-play-state: paused;
}

/* responsive logo size */
@media (max-width: 640px){
  .partners-group{ gap: 26px; padding: 8px 16px; }
  .partners-group img{ height: 36px; }
}


@media (prefers-reduced-motion: reduce){
  .partners-track{ animation: none; }
}


/* v66: highlight integrated orb */
.orb.integrated,
.orb-integrated{
  box-shadow:
    0 0 0 3px rgba(120, 190, 140, 0.35),
    0 12px 28px rgba(0,0,0,0.25),
    0 0 40px rgba(120, 190, 140, 0.45);
  transform: scale(1.08);
  z-index: 5;
}

.orb.integrated::after,
.orb-integrated::after{
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(140, 210, 160, 0.35) 0%,
    rgba(140, 210, 160, 0.18) 40%,
    rgba(140, 210, 160, 0.0) 70%);
  z-index: -1;
}

/* keep other orbs neutral */
.orb:not(.integrated):not(.orb-integrated){
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}


/* v67: stronger border for integrated orb */
.orb.integrated,
.orb-integrated{
  border: 4px solid #2f8f5b !important; /* bold green ring */
  box-shadow:
    0 0 0 6px rgba(120, 190, 140, 0.35),
    0 14px 30px rgba(0,0,0,0.28),
    0 0 50px rgba(120, 190, 140, 0.55);
}

.orb.integrated::before,
.orb-integrated::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px dashed rgba(47,143,91,0.6); /* “bringing together” ring */
  animation: rotateRing 14s linear infinite;
  pointer-events:none;
}

@keyframes rotateRing{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}


/* v70: normalize footer typography */
.site-footer .footer-text,
.site-footer .footer-link,
.site-footer .footer-sub,
.site-footer .footer-label {
  font-size: 14px !important;
  line-height: 1.5;
}


/* v73: extra slim dark green header band */
header.site-header,
.site-header,
.navbar,
.top-bar {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  min-height: 36px !important;
}


/* v75: even tighter nav button spacing (half of previous) */
.nav-links a,
.nav-links button,
.nav-links .btn,
.site-header a,
.site-header .btn {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* pull buttons slightly upward within the bar for a tighter feel */
.nav-links {
  align-items: center !important;
}


/* Make View Items dropdown hover over others instead of pushing them */
.view-items-container {
  position: relative;
}

.view-items-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #f6fbf6;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  border-radius: 10px;
  display: none;
}

.view-items-container:hover .view-items-panel {
  display: block;
}


/* View Items: fade in + slide down (no layout shift) */
.view-items-panel{
  display: block !important;          /* keep in flow for animation (still absolute) */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  will-change: opacity, transform;
}

.view-items-container:hover .view-items-panel,
.view-items-container:focus-within .view-items-panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* View items: overlay dropdown so cards don't shift */
.cat-card details{
  position: relative;
}

.cat-card details > ul{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  margin: 0;
  padding: 14px 14px 14px 34px;
  background: rgba(246, 251, 246, 0.98);
  border: 1px solid rgba(120, 190, 140, 0.45);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
  z-index: 50;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.cat-card details[open] > ul{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Make sure cards allow overlay to show */
.category-grid, .cat-card{
  overflow: visible;
}


/* Fix View items overlay: ensure it appears above other cards and text is visible */
.category-grid{ position: relative; z-index: 1; overflow: visible; }
.cat-card{ position: relative; z-index: 1; overflow: visible; }
.cat-card details[open]{ z-index: 9999; }
.cat-card details > ul{
  z-index: 9999;
  color: #0b2a16;
}
.cat-card details > ul li,
.cat-card details > ul a{
  color: #0b2a16;
}


/* Force first-row cards to sit above everything when opened */
.category-grid {
  position: relative;
  z-index: 1;
}

.cat-card {
  position: relative;
  z-index: 1;
}

.cat-card details[open] {
  z-index: 200;
}

/* Ensure overlay dropdown always sits on top of next row */
.cat-card details > ul {
  z-index: 300 !important;
}


/* FIX: View items dropdown must not be clipped on first row */
.cat-card{
  overflow: visible !important; /* allow dropdown to overlay next row */
}

.cat-card details{
  position: relative;
  z-index: 1;
}

.cat-card details[open]{
  z-index: 999;
}

.cat-card details > ul{
  z-index: 1000 !important;
  color: #0b3d1f;
}

.cat-card details > ul a,
.cat-card details > ul li{
  color: #0b3d1f !important;
}


/* FIX v3: ensure opened dropdown card is above other cards (top row included) */
.category-grid{
  position: relative;
}

.cat-card{
  position: relative;
  z-index: 1;
}

/* JS toggles this on the card when details opens */
.cat-card.dropdown-open{
  z-index: 1200;
}


/* Dropdown motion + aesthetic (smooth slide-down, matches main tab look) */
.cat-card details > ul{
  transform-origin: top center;
  opacity: 0;
  transform: translateY(-12px) scaleY(0.96);
  pointer-events: none;

  /* aesthetic */
  background: linear-gradient(135deg, rgba(11,61,31,0.96), rgba(16,102,53,0.96));
  border: 1px solid rgba(180, 235, 195, 0.55);
  box-shadow: 0 16px 34px rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.96);

  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 260ms ease;
}

/* readable links in dropdown */
.cat-card details > ul a,
.cat-card details > ul li{
  color: rgba(255,255,255,0.96) !important;
}

/* open state */
.cat-card details[open] > ul{
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}


/* Align service-hero width with bottom tabs */
.service-hero{
  max-width: 1100px;      /* matches main content grid */
  margin-left: auto;
  margin-right: auto;
}


/* Match spacing of Building/Mining pages: reduce gap after IT hero */



/* Fix: IT page cards section was inheriting .section padding, making the gap larger than other service pages */
.it-cards.section{
  padding: 0; /* match building/mining which don't add extra vertical padding before cards */
}

/* Contact page layout */
@media (max-width: 860px){
  }


/* Contact page grid */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.contact-grid .cat-card{ height: fit-content; }
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
}

.contact-grid .map-span{ grid-column: 1 / -1; }
@media (max-width: 900px){ .contact-grid .map-span{ grid-column: auto; } }

/* Force true two-column layout for contact */
.contact-top-row > .cat-card{
  flex: 1 1 50%;
  max-width: 50%;
}
@media (max-width: 900px){
  .contact-top-row{
    flex-direction: column;
  }
  .contact-top-row > .cat-card{
    max-width: 100%;
  }
}


/* Make Send Message box more spacious to match Company Details */
.contact-form-card .it-infobox{
  padding: 22px 20px; /* more air inside the box */
  min-height: 100%;  /* keeps height comparable to Company Details card */
}
.contact-form-card form{
  gap: 16px; /* more space between fields */
}


/* Make all form fields stretch to match Company Details width */
.contact-form-card .it-infobox{
  width: 100%;
}

.contact-form-card label{
  width: 100%;
}

.contact-form-card input,
.contact-form-card textarea{
  width: 100%;
  box-sizing: border-box;
}

/* Ensure form container matches height footprint of Company Details */
.contact-form-card .it-infobox{
  min-height: 100%;
}


/* Harmonize typography between Send Message and Company Details columns */
.contact-form-card,
.contact-form-card label,
.contact-form-card input,
.contact-form-card textarea,
.it-card ul li,
.it-card ul li strong{
  font-size: 0.95rem; /* unified comfortable size */
  line-height: 1.55;
}

/* Make field labels slightly clearer but still matched to list text */
.contact-form-card label{
  font-weight: 600;
}

/* Keep headings consistent across all three columns */
.it-overlap-band h3{
  font-size: 1.05rem;
}

/* RFQ action buttons side-by-side */
.rfq-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.rfq-actions .btn{ flex: 1 1 auto; }



/* --- Mobile responsiveness fixes (Feb 2026) --- */
@media (max-width: 980px){
  /* Homepage hero: the more specific .hero-clean .hero-grid rule was overriding the base .hero-grid mobile stack */
  .hero-clean .hero-grid{ grid-template-columns: 1fr; }
  .hero-clean.hero-center .kicker,
  .hero-clean.hero-center .h1{ text-align: center; }
  .orb-wrap{ margin-top: 12px; }
  .orb-stage{ width: min(360px, 100%); }

  /* Prevent long nav items / buttons from forcing horizontal scroll */
  .nav, .nav-links, .actions{ min-width: 0; }
  .nav-links a{ white-space: normal; }
  .btn{ max-width: 100%; }

  /* Make any wide tables/code blocks/images behave */
  img, svg, video, canvas{ max-width: 100%; height: auto; }
  pre, code{ max-width: 100%; overflow-x: auto; }
}

@media (max-width: 560px){
  /* Slightly tighter paddings on small phones */
  .container{ padding-left: 16px; padding-right: 16px; }
  .hero-clean{ padding-top: 44px; }
}



/* --- Header layout overrides (logo left + keep menu one-line) --- */
.header .container{ padding-left: 12px; padding-right: 20px; }

/* Let the logo take only the space it needs (the old min-width was squeezing the menu) */
.header .brand{ min-width: 0 !important; flex: 0 0 auto; margin-right: 14px !important; }

/* Keep tabs on a single line on desktop/tablet widths */
.header .nav{ flex-wrap: nowrap; }
.header .nav-links{ flex-wrap: nowrap; white-space: nowrap; gap: 14px; }
.header .nav-links a{ white-space: nowrap; }

/* Tighten spacing a bit on medium screens so links don’t wrap */
@media (max-width: 1200px){
  .header .container{ padding-left: 10px; padding-right: 14px; }
  .header .nav{ gap: 10px; }
  .header .nav-links{ gap: 10px; }
  .header .nav-links a{ padding: 8px 8px; font-size: 0.92rem; }
  .header .actions .btn{ padding: 10px 12px; font-size: 0.92rem; }
}

/* Mobile: menu becomes hamburger, so we don't force nowrap here */
@media (max-width: 980px){
  .header .container{ padding-left: 16px; padding-right: 16px; }
  .header .brand{ margin-right: 10px !important; }
}

/* --- Contact form fix: ensure inputs are clickable/typable (stacking context) --- */
.contact-form-card{ position: relative; }
.contact-form-card::after{ z-index: 0 !important; }
.contact-form-card .it-overlap-band,
.contact-form-card .it-infobox{ position: relative; z-index: 2; }
.contact-form-card form,
.contact-form-card label,
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card button{ position: relative; z-index: 3; }

/* --- Contact form fix: ensure inputs are clickable/typable (stacking context) --- */
.contact-form-card{ position: relative; }
/* the decorative gradient pseudo-element on .it-card can sit above form elements in some browsers */
.contact-form-card::after{ z-index: 0 !important; }
.contact-form-card .it-overlap-band,
.contact-form-card .it-infobox,
.contact-form-card form{ position: relative; z-index: 2; }
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card button{ position: relative; z-index: 3; }

/* --- Forms click/typing fix (global) --- */
/* Some decorative ::after layers on cards can sit above inputs on certain browsers.
   Use isolation + explicit stacking so form fields always receive clicks/focus. */
.it-card{ isolation:isolate; }
.it-card::after{ z-index:0; }
.it-card .it-overlap-band,
.it-card .it-infobox,
.it-card .it-imagebox,
.it-card form,
.it-card label,
.it-card input,
.it-card select,
.it-card textarea,
.it-card button{
  position: relative;
  z-index: 2;
}

/* Ensure RFQ modal is always interactive (defensive) */
.modal{ pointer-events:auto; }
.modal-card{ position: relative; pointer-events:auto; }
.modal-card *{ pointer-events:auto; }

/* Services dropdown (site) */
.header{ overflow: visible !important; }
.services-dd{ position: relative; display: inline-flex; align-items: center; }
.services-dd-toggle{
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.services-dd-toggle:hover{ color: var(--text); background: rgba(255,255,255,.06); }
.services-dd-menu{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  min-width: 240px;
  padding: 8px;
  border-radius: 14px;
  background: #0b1411;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  z-index: 20004;
  pointer-events: auto;
}
.services-dd-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.92);
}
.services-dd-menu a:hover{ background: rgba(255,255,255,.08); }
.services-dd:hover .services-dd-menu{ display:block; }
.services-dd-menu:hover{ display:block; }
.services-dd.open .services-dd-menu{ display:block; }
.services-dd:focus-within .services-dd-menu{ display:block; }
/* hover bridge to prevent cursor gap */
.services-dd::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  height: 10px;
  width: 100%;
}

@media (max-width: 900px){
  .services-dd{ width: 100%; }
  .services-dd-toggle{ width: 100%; text-align: left; }
  .services-dd-menu{ position: static; min-width: 100%; box-shadow:none; margin-top: 6px; }
  .services-dd::after{ display:none; }
}

/* About page polish */
.about-hero{ padding: 64px 0 18px; }
.about-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px; }
.about-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }

.about-hero-card{ padding: 16px; }
.about-image-wrap{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.about-image-wrap img{ width:100%; height:auto; display:block; }

.about-metrics{ margin-top: 14px; display:grid; gap:10px; }
.metric{ display:flex; gap:12px; align-items:flex-start; padding: 10px 12px; border-radius: 16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
.metric-icon{ width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; border-radius: 12px; background: rgba(47,179,74,.12); }
.metric-title{ font-weight: 800; }
.metric-sub{ color: var(--muted); font-size: 13px; margin-top: 2px; }

.about-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.about-card{ padding: 16px; }
.about-card h3{ margin: 10px 0 6px; }
.about-card p{ color: var(--muted); margin: 0 0 10px; }
.about-card-icon{
  width: 44px; height: 44px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 16px;
  background: rgba(212,175,55,.10);
  border: 1px solid rgba(212,175,55,.22);
}
.about-card-icon svg{ width: 22px; height: 22px; color: rgba(255,255,255,.92); }
.about-link{ display:inline-flex; gap:8px; color: rgba(167,243,181,.92); font-weight: 800; }
.about-link:hover{ text-decoration: underline; }

.values-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.value{ display:flex; gap:12px; align-items:flex-start; padding: 14px 14px; border-radius: 18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
.value-icon{ width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; border-radius: 12px; background: rgba(47,179,74,.12); }
.value h3{ margin: 0 0 6px; }
.value p{ margin: 0; color: var(--muted); }

.about-cta-panel{ display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 18px; }
.about-cta-actions{ display:flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 980px){
  .about-cards{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: 1fr; }
  .about-cta-panel{ flex-direction: column; align-items:flex-start; }
}