:root{
  --navy:#062d50;
  --navy-deep:#08243b;
  --green:#06c85d;
  --green2:#008f48;
  --lime:#73f39a;
  --forest:#003d2d;
  --forest2:#006541;
  --ink:#0b2b46;
  --muted:#667b87;
  --paper:#f5fbf8;
  --white:#fff;
  --line:#dce9e3;
  --glow:0 0 17px rgba(0,225,96,.55),0 0 38px rgba(0,205,88,.22);
  --shadow:0 18px 48px rgba(0,54,38,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.container{width:min(1200px,calc(100% - 42px));margin:auto}
h1,h2,h3{font-family:Manrope,Inter,sans-serif;margin:0;line-height:1.06}
p{margin:0}

/* ===== Header ===== */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.965);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(221,235,228,.84);
}
.nav-inner{height:98px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center}
.brand img{width:250px;max-height:82px;object-fit:contain;object-position:left center}
.nav-links{display:flex;align-items:center;gap:31px;font-size:.94rem;font-weight:750}
.nav-links a{position:relative;color:#17384e}
.nav-links a:not(.quote)::after{
  content:"";position:absolute;left:0;bottom:-10px;width:0;height:2px;
  background:linear-gradient(90deg,var(--green),var(--lime));
  box-shadow:0 0 10px rgba(0,215,88,.72);transition:.25s
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.quote{
  padding:14px 23px;border-radius:15px;color:#fff!important;
  background:linear-gradient(135deg,#00a947,#00d868);
  box-shadow:var(--glow);transition:.25s
}
.quote:hover{transform:translateY(-2px)}
.menu-btn{display:none;border:0;background:none;padding:8px}
.menu-btn span{display:block;width:26px;height:2px;background:var(--navy);margin:5px}

/* ===== Home hero: live recreation ===== */
.hero{
  position:relative;min-height:555px;overflow:hidden;color:white;
  background-image:
    linear-gradient(90deg,rgba(0,45,33,.93) 0%,rgba(0,52,38,.78) 41%,rgba(0,44,34,.28) 73%,rgba(0,37,30,.45) 100%),
    url("https://upload.wikimedia.org/wikipedia/commons/7/7b/Table_Mountain_from_harbour.jpg");
  background-position:center 48%;background-size:cover;
}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 77% 12%,rgba(92,255,148,.17),transparent 33%);pointer-events:none}
.hero .container{position:relative;z-index:2;min-height:555px;display:flex;align-items:center}
.hero-copy{max-width:760px;padding:54px 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:#8bf3ae;text-transform:uppercase;letter-spacing:.25em;
  font-weight:800;font-size:.72rem
}
.eyebrow::before{content:"";width:30px;height:2px;background:currentColor;box-shadow:0 0 10px currentColor}
.hero h1{
  font-size:clamp(3.2rem,6vw,5.6rem);letter-spacing:-.05em;
  margin:15px 0 17px;text-shadow:0 3px 24px rgba(0,0,0,.38)
}
.hero h1 em{font-style:normal;color:#47ef7e;text-shadow:0 0 22px rgba(58,240,125,.40)}
.hero p{max-width:670px;font-size:1.12rem;color:#eef8f2;text-shadow:0 2px 12px rgba(0,0,0,.38)}
.hero-actions{display:flex;gap:17px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 25px;border-radius:14px;font-weight:800;border:1px solid transparent;transition:.25s}
.btn-primary{background:linear-gradient(135deg,#00ab48,#14dc6d);color:white;box-shadow:var(--glow)}
.btn-outline{color:white;border-color:rgba(255,255,255,.77);background:rgba(0,40,31,.34);backdrop-filter:blur(6px)}
.btn:hover{transform:translateY(-2px)}
.hero-benefits{position:absolute;right:0;top:78px;display:grid;gap:10px}
.hero-benefit{display:grid;grid-template-columns:46px 1fr;gap:11px;align-items:center;width:220px;padding:9px 12px;border-radius:17px;background:rgba(0,58,42,.62);border:1px solid rgba(94,245,140,.32);backdrop-filter:blur(7px)}
.hero-benefit i{font-style:normal;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid #59f18b;box-shadow:0 0 17px rgba(56,242,125,.30);font-size:1.2rem}
.hero-benefit b{display:block;font-size:.9rem}.hero-benefit small{display:block;color:#d1ead8;font-size:.77rem}
.hero-script{position:absolute;right:0;bottom:27px;font-family:"Segoe Script",cursive;font-size:1.25rem;line-height:1.08;transform:rotate(-4deg);text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero-script span{display:block;color:#8bf4aa;border-bottom:4px solid #32e76d;padding-bottom:3px}

/* ===== Home services ===== */
.services-home{margin-top:-18px;position:relative;z-index:4;border-radius:28px 28px 0 0;background:linear-gradient(180deg,#fbfefd,#edf8f3)}
.section{padding:72px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:26px}
.section-title{max-width:780px}
.section-title .eyebrow{color:#148b4c}
.section-title h2{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;margin-top:7px}
.section-title h2 span{color:#15894e}
.section-title p{color:var(--muted);margin-top:7px}
.view-btn{background:#fff;box-shadow:0 8px 28px rgba(0,53,39,.12);padding:13px 20px;border-radius:12px;font-weight:800;white-space:nowrap}

.service-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:11px;align-items:stretch}
.service-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #e0ebe5;border-radius:10px;overflow:hidden;box-shadow:0 8px 25px rgba(0,55,38,.055);transition:.28s}
.service-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(0,55,38,.12),0 0 22px rgba(0,210,88,.10)}
.service-img{width:100%;aspect-ratio:16/9;overflow:hidden;background:#e8f1ec}
.service-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.service-card:hover .service-img img{transform:scale(1.04)}
.service-body{padding:13px 13px 14px;display:flex;flex-direction:column;flex:1}
.service-name{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.89rem}
.service-name i{font-style:normal;font-size:1.02rem}
.service-body p{color:var(--muted);font-size:.82rem;margin-top:7px}
.learn{margin-top:auto;padding-top:11px;font-size:.8rem;font-weight:800;color:#0b3a2d}

/* ===== Rendition trust strip ===== */
.trust{background:linear-gradient(90deg,#003f2f,#007f46,#003f2f);color:#fff;box-shadow:inset 0 0 58px rgba(47,255,116,.13)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{display:flex;align-items:center;gap:14px;padding:22px 28px;border-left:1px solid rgba(255,255,255,.15)}
.trust-item:first-child{border-left:0}
.trust-icon{font-size:2rem;color:#72f096;filter:drop-shadow(0 0 9px rgba(93,240,140,.35))}
.trust-item b{display:block;font-size:1.16rem}.trust-item span{display:block;color:#d4ebdc;font-size:.81rem}

/* ===== Rendition about / mission ===== */
.about-home{background:#fff;border-radius:28px 28px 0 0}
.about-grid{display:grid;grid-template-columns:1fr .8fr 1fr;gap:36px;align-items:center}
.about-copy .eyebrow,.mission .eyebrow{color:#148b4c}
.about-copy h2{font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-.04em;margin:9px 0 13px}
.about-copy p{color:var(--muted);font-size:.94rem}
.round-visual{position:relative;width:min(360px,100%);aspect-ratio:1/1;margin:auto;border-radius:50%;padding:8px;background:linear-gradient(135deg,#2bea73,#00663f);box-shadow:0 18px 48px rgba(0,63,43,.15),0 0 28px rgba(0,210,88,.13)}
.round-visual img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:6px solid white}
.clean-badge{position:absolute;right:-9px;bottom:8px;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 30% 20%,#087c43,#00452f);color:white;font-size:.76rem;font-weight:800;box-shadow:var(--glow);border:2px solid #3bea78}
.mission-list{display:grid;gap:14px;margin-top:16px}
.mvv{display:grid;grid-template-columns:44px 1fr;gap:12px}
.mvv-icon{width:41px;height:41px;border-radius:50%;display:grid;place-items:center;color:#087743;background:#e8f7ec;font-size:1.15rem}
.mvv h3{font-size:1rem;margin-bottom:2px}.mvv p{color:var(--muted);font-size:.88rem}

/* ===== Internal hero - same rendition skin ===== */
.page-hero{position:relative;min-height:370px;color:#fff;background-size:cover;background-position:center;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,45,34,.92),rgba(0,61,42,.70),rgba(0,40,32,.37))}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 15%,rgba(73,250,130,.18),transparent 32%)}
.page-hero .container{position:relative;z-index:2;min-height:370px;display:flex;flex-direction:column;justify-content:center}
.page-hero h1{font-size:clamp(3rem,6vw,5rem);letter-spacing:-.045em;margin:10px 0 12px;text-shadow:0 3px 20px rgba(0,0,0,.3)}
.page-hero p{max-width:750px;color:#e5f3e9;font-size:1.08rem}
.about-hero{background-image:url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=1600&q=88")}
.services-hero{background-image:url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1600&q=88")}
.team-hero{background-image:url("https://thumb.wikimedia.org/wikipedia/commons/thumb/9/95/Johannesburg_skyline_2017.jpg/1280px-Johannesburg_skyline_2017.jpg")}
.contact-hero{background-image:url("https://upload.wikimedia.org/wikipedia/commons/f/f6/SandtonGP-skyline.jpg")}
.privacy-hero{background-image:url("https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?auto=format&fit=crop&w=1600&q=88")}
.disclaimer-hero{background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/9a/Container-Terminal_Durban.JPG")}

/* ===== Inner page containers ===== */
.section-soft{background:linear-gradient(180deg,#fbfefd,#eff8f3)}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 12px 30px rgba(0,55,38,.05)}
.panel h2{font-size:2rem;margin-bottom:10px}.panel p,.panel li{color:var(--muted)}
.values{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.value{padding:10px 14px;border-radius:999px;background:#e8f7ec;color:#0b7441;font-weight:750}

/* Services: same image height/length as Home */
.services-page-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.service-detail{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 30px rgba(0,55,38,.05);transition:.28s}
.service-detail:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(0,55,38,.12)}
.service-detail .service-img{aspect-ratio:16/9;flex:0 0 auto}
.service-detail-content{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.service-detail-icon{width:45px;height:45px;border-radius:12px;display:grid;place-items:center;background:#e9f8ed;color:#087844;font-size:1.2rem}
.service-detail h3{font-size:1.17rem;margin:9px 0}.service-detail p,.service-detail li{color:var(--muted);font-size:.92rem}

/* Team */
.team-list{display:grid;gap:20px}.team-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 12px 30px rgba(0,55,38,.05)}.team-card h3{font-size:1.5rem;margin-bottom:9px}.team-card p{color:var(--muted);margin-top:9px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px}
.contact-box{background:linear-gradient(155deg,#004333,#00834a);color:#fff;border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.contact-box p{color:#d3e9db;margin:12px 0 22px}
.contact-line{padding:16px 0;border-top:1px solid rgba(255,255,255,.15)}
.contact-line small{display:block;color:#97c2a8;text-transform:uppercase;letter-spacing:.1em}
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}
label{font-weight:800;font-size:.85rem}
input,select,textarea{width:100%;padding:13px;border:1px solid #d5e4dc;border-radius:10px;background:#fbfefc;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(0,200,90,.10)}
textarea{min-height:145px;resize:vertical}.hp{position:absolute!important;left:-9999px!important}

/* Legal */
.legal{max-width:920px}.legal-section{padding:25px 0;border-top:1px solid var(--line)}.legal-section:first-child{border-top:0}.legal-section h2{font-size:1.45rem;margin-bottom:9px}.legal-section p,.legal-section li{color:var(--muted)}

/* Footer */
footer{background:#003428;color:#a8c8b7;padding:50px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.2fr .7fr .8fr 1fr;gap:38px}
.footer-logo{width:240px;max-height:112px;object-fit:contain}
.footer-col h4{color:#fff;margin:0 0 14px}.footer-col a{display:block;margin:7px 0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:16px;display:flex;justify-content:space-between;gap:20px;font-size:.81rem}

.reveal{opacity:0;transform:translateY(15px);transition:.58s}.reveal.show{opacity:1;transform:none}

@media(max-width:1180px){.service-grid{grid-template-columns:repeat(4,1fr)}.about-grid{grid-template-columns:1fr 1fr}.mission{grid-column:1/-1}.hero-benefits{display:none}}
@media(max-width:900px){.services-page-grid{grid-template-columns:repeat(2,1fr)}.panel-grid,.contact-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:780px){
  .nav-inner{height:76px}.brand img{width:205px;max-height:64px}.menu-btn{display:block}
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;padding:22px;flex-direction:column;align-items:stretch;box-shadow:0 20px 40px rgba(0,0,0,.08)}
  .nav-links.open{display:flex}.hero,.hero .container{min-height:650px}.hero-copy{padding:58px 0}.hero h1{font-size:clamp(2.8rem,13vw,4.3rem)}.hero-script{display:none}
  .section{padding:58px 0}.section-head{align-items:flex-start;flex-direction:column}.service-grid{grid-template-columns:repeat(2,1fr)}.trust-grid{grid-template-columns:1fr 1fr}.about-grid{grid-template-columns:1fr}.mission{grid-column:auto}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}
}
@media(max-width:520px){.service-grid,.services-page-grid,.trust-grid,.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}