@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#102b46;--blue:#1976d2;--gold:#f5b82e;--ink:#172b3d;--muted:#657585;--paper:#f7f9fc;--line:#e6ebf0;--white:#fff;--heading:"Manrope",sans-serif;--body:"DM Sans",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;color:var(--ink);font-family:var(--body);line-height:1.65;background:#fff}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.topline{background:var(--navy);color:#dbe6f0;font-size:11px;letter-spacing:.04em}.topline-inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:18px}.topline a{color:white;font-weight:700}.topline-contacts{display:flex;align-items:center;gap:22px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(16,43,70,.07)}.nav-wrap{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}.brand-copy{display:flex;flex-direction:column;line-height:1.15}.brand-copy strong{font:800 20px var(--heading);letter-spacing:.08em;color:var(--navy)}.brand-copy small{margin-top:4px;font-size:8px;letter-spacing:.12em;font-weight:700;color:#718091}
.main-nav{display:flex;align-items:center;gap:31px;font-size:12px;font-weight:600;color:#536273}.main-nav>a:not(.nav-cta):hover{color:var(--blue)}.nav-cta{background:var(--navy);color:white;padding:12px 17px;border-radius:4px}.nav-cta span{color:var(--gold);padding-left:8px}.menu-toggle{display:none;border:0;background:transparent;padding:8px}.menu-toggle span{width:23px;height:2px;display:block;margin:5px;background:var(--navy)}
.hero{min-height:650px;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--navy);color:white}.hero-photo{position:absolute;inset:-5%;background:url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=2200&q=85") center 48%/cover;transform:scale(1.08);animation:heroSolarPan 22s ease-in-out infinite alternate;will-change:transform,background-position}@keyframes heroSolarPan{
  0%{background-position:42% 48%;transform:scale(1.08) translate3d(-1.5%,0,0)}
  50%{background-position:54% 51%;transform:scale(1.15) translate3d(0,0,0)}
  100%{background-position:62% 48%;transform:scale(1.22) translate3d(1.5%,0,0)}
}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,29,49,.94),rgba(8,29,49,.78) 43%,rgba(8,29,49,.18)),linear-gradient(0deg,rgba(8,29,49,.25),transparent 45%)}.hero-content{position:relative;z-index:1;padding-block:105px 115px}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--blue);font-size:10px;letter-spacing:.16em;font-weight:700}.eyebrow>span{display:inline-block;width:23px;height:2px;background:var(--gold)}.eyebrow.light{color:#dce8f3}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--heading)}.hero h1{max-width:760px;margin:25px 0 20px;font-size:clamp(46px,6.4vw,78px);line-height:1.08;letter-spacing:-.055em;font-weight:700}h1 em,h2 em{font-style:normal;color:var(--gold)}.hero-content>p{max-width:510px;color:#d8e2ec;font-size:16px;line-height:1.8}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.button{min-height:49px;display:inline-flex;justify-content:center;align-items:center;gap:25px;padding:0 20px;border:1px solid transparent;border-radius:3px;font-size:12px;font-weight:700;cursor:pointer;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--gold);color:var(--navy)}.button-primary:hover{background:#ffd06a}.button-ghost{border-color:rgba(255,255,255,.45);color:white}.button-ghost:hover{background:rgba(255,255,255,.1)}.hero-note{display:flex;align-items:center;gap:12px;margin-top:65px;color:#c6d3df;font-size:10px;letter-spacing:.08em}.note-line{width:35px;height:1px;background:var(--gold)}.scroll-cue{position:absolute;right:max(24px,calc((100vw - 1160px)/2));bottom:35px;display:flex;align-items:center;gap:12px;color:#d9e2eb;font-size:9px;letter-spacing:.15em;writing-mode:vertical-rl}.scroll-cue span{height:38px;width:1px;background:var(--gold)}
.section-pad{padding-block:108px}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}h2{margin:19px 0 0;color:var(--navy);font-size:clamp(36px,4.4vw,54px);line-height:1.13;letter-spacing:-.05em}h2 em{color:var(--blue)}.intro-copy{max-width:500px;padding-top:26px}.intro-copy p{color:var(--muted);font-size:14px}.intro-copy .lead{color:var(--ink);font:600 18px/1.65 var(--heading)}.text-link{display:inline-flex;align-items:center;gap:20px;margin-top:14px;color:var(--blue);font-size:12px;font-weight:700}.text-link span{font-size:18px;transition:transform .2s}.text-link:hover span{transform:translateX(5px)}
.services{background:var(--paper)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:45px}.section-heading>p{max-width:280px;margin-bottom:5px;color:var(--muted);font-size:13px}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.service-card{background:white;border:1px solid var(--line)}.service-image{height:235px;background-size:cover;background-position:center}.solar-image{background-image:url("https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?auto=format&fit=crop&w=1000&q=80")}.electrical-image{background-image:url("https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1000&q=80")}.service-body{padding:31px 34px 35px}.service-number{color:var(--blue);font-size:9px;font-weight:700;letter-spacing:.15em}.service-body h3{max-width:390px;margin:14px 0 10px;color:var(--navy);font-size:25px;line-height:1.25;letter-spacing:-.035em}.service-body p{color:var(--muted);font-size:12px}.service-body ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:23px 0 18px;padding:0;list-style:none}.service-body li{position:relative;padding-left:15px;color:#45576a;font-size:11px}.service-body li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.values{background:var(--navy);color:white}.values-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}.values h2{color:white}.values h2 em{color:var(--gold)}.values-intro>p{max-width:400px;margin:22px 0 28px;color:#c3d0dc;font-size:13px}.button-light{background:white;color:var(--navy)}.value-list article{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.15)}.value-list article:first-child{border-top:1px solid rgba(255,255,255,.15)}.value-list article>span{color:var(--gold);font:700 12px var(--heading)}.value-list h3{margin:0 0 7px;color:white;font-size:18px}.value-list p{margin:0;color:#bdcbd8;font-size:12px}
.work-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px}.work-tile{min-height:285px;display:flex;align-items:end;padding:22px;background-size:cover;background-position:center;position:relative;overflow:hidden}.work-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,29,49,.82),transparent 65%)}.work-one{background-image:url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=900&q=80")}.work-two{background-image:url("https://images.unsplash.com/photo-1624397640148-949b1732bb0a?auto=format&fit=crop&w=900&q=80")}.work-three{background-image:url("https://images.unsplash.com/photo-1621905252507-b35492cc74b4?auto=format&fit=crop&w=900&q=80")}.work-tile div{position:relative;display:flex;flex-direction:column;gap:6px;color:white}.work-tile span{color:var(--gold);font-size:10px}.work-tile strong{font:600 17px var(--heading)}.gallery-note{margin:14px 0 0;color:#8995a2;font-size:10px}
.contact{background:#f1f5f9}.contact-grid{display:grid;grid-template-columns:1fr .85fr;gap:95px;align-items:center}.contact-copy{background:var(--navy);padding:52px}.contact-copy h2{color:white}.contact-copy h2 em{color:var(--gold)}.contact-copy>p{max-width:390px;margin:20px 0 35px;color:#c6d3df;font-size:13px}.contact-details{display:grid;gap:20px}.contact-details>a,.contact-details>div{display:flex;align-items:center;gap:14px;color:white}.detail-icon{width:35px;height:35px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);color:var(--gold)}.contact-details small{display:block;color:#aebdcb;font-size:8px;letter-spacing:.14em}.contact-details strong{display:block;font-size:13px;font-weight:600}.quote-form{padding:38px;background:white;box-shadow:0 15px 50px rgba(16,43,70,.06)}.quote-form h3{margin:0 0 6px;color:var(--navy);font-size:25px;letter-spacing:-.04em}.quote-form>p{margin-bottom:24px;color:var(--muted);font-size:11px}.quote-form label{display:block;margin:14px 0 6px;color:#35485b;font-size:10px;font-weight:700}.quote-form label span{color:#8b98a5;font-weight:400}.quote-form input,.quote-form select,.quote-form textarea{width:100%;border:1px solid #dfe6ed;border-radius:2px;padding:12px 13px;color:var(--ink);background:white;outline:none;font-size:11px}.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(25,118,210,.08)}.quote-form textarea{resize:vertical}.form-submit{width:100%;margin-top:20px;border:0}.form-privacy{display:block;margin-top:10px;color:#8492a0;text-align:center;font-size:9px}
.site-footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#0b2034;
  color:white;
}
.site-footer::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-12%;
  background-image:url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=2200&q=90");
  background-size:cover;
  background-position:0% 50%;
  background-repeat:no-repeat;
  opacity:.48;
  transform:scale(1.08);
  animation:footerSolarPan 18s linear infinite alternate;
  will-change:transform,background-position;
}
.site-footer::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(105deg,rgba(7,25,42,.82),rgba(11,32,52,.70) 55%,rgba(7,25,42,.84));
  pointer-events:none;
}
.site-footer > .container{position:relative;z-index:2}
@keyframes footerSolarPan{
  0%{
    background-position:0% 50%;
    transform:scale(1.12) translate3d(-4%,0,0);
  }
  50%{
    background-position:50% 48%;
    transform:scale(1.18) translate3d(0,0,0);
  }
  100%{
    background-position:100% 50%;
    transform:scale(1.24) translate3d(4%,0,0);
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-photo{animation:none;transform:scale(1.08);background-position:50% 50%}
  .site-footer::before{animation:none;transform:scale(1.08);background-position:50% 50%}
}.footer-main{min-height:150px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand-footer .brand-copy strong{color:white}.brand-footer .brand-copy small{color:#a8b6c4}.footer-main>p{margin:0;color:#b5c3d0;font-size:11px}.footer-top{color:var(--gold);font-size:9px;letter-spacing:.12em;font-weight:700}.footer-bottom{min-height:55px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.12);color:#91a1b0;font-size:9px}
@media(max-width:850px){.main-nav{gap:17px}.intro-grid,.values-grid{gap:55px}.contact-grid{gap:35px}.contact-copy{padding:38px 30px}.quote-form{padding:28px}}
@media(max-width:700px){.container{width:min(100% - 36px,560px)}.topline-inner{justify-content:center;min-height:34px}.topline-inner>span{display:none}.topline-contacts{gap:14px;font-size:10px}.nav-wrap{min-height:72px}.menu-toggle{display:block;cursor:pointer}.main-nav{position:absolute;top:72px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px 22px 22px;background:white;border-bottom:1px solid var(--line);box-shadow:0 15px 25px rgba(16,43,70,.08)}.main-nav.open{display:flex}.main-nav>a{padding:12px 4px}.main-nav .nav-cta{margin-top:8px;padding:13px 16px;text-align:center}.hero{min-height:620px}.hero-shade{background:linear-gradient(90deg,rgba(8,29,49,.91),rgba(8,29,49,.57)),linear-gradient(0deg,rgba(8,29,49,.35),transparent)}.hero-content{padding-block:85px 100px}.hero h1{font-size:clamp(43px,12vw,62px)}.hero-content>p{font-size:14px}.hero-note{margin-top:45px}.scroll-cue{display:none}.section-pad{padding-block:76px}.intro-grid,.values-grid,.contact-grid{grid-template-columns:1fr;gap:25px}.intro-copy{padding-top:0}.section-heading{display:block;margin-bottom:30px}.section-heading>p{margin-top:18px}.service-grid{grid-template-columns:1fr;gap:16px}.service-image{height:205px}.service-body{padding:25px 23px 28px}.service-body h3{font-size:22px}.values-grid{gap:40px}.work-grid{grid-template-columns:1fr 1fr}.work-one{grid-column:span 2}.work-tile{min-height:220px}.contact-grid{gap:22px}.contact-copy{padding:38px 27px}.quote-form{padding:27px 22px}.footer-main{align-items:flex-start;flex-direction:column;justify-content:center;padding-block:32px;gap:18px}.footer-bottom{align-items:flex-start;flex-direction:column;justify-content:center;padding-block:15px;gap:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}


/* ==========================================
   MOBILE REFINEMENTS — NC MAMBI
   ========================================== */
img, video, iframe { max-width: 100%; }

/* Keep photographic panels consistently framed */
.service-image,
.work-tile {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #dce4ec;
}
.solar-image { background-position: center 52%; }
.electrical-image { background-position: center 42%; }
.work-one { background-position: center 52%; }
.work-two { background-position: center 48%; }
.work-three { background-position: center 42%; }

@media (max-width: 700px) {
  html { scroll-padding-top: 76px; }
  .container { width: min(100% - 32px, 560px); }

  /* Compact, readable contact strip */
  .topline-inner { min-height: 36px; padding-block: 5px; }
  .topline-contacts { width: 100%; justify-content: center; gap: 12px; flex-wrap: wrap; line-height: 1.35; }
  .topline-contacts a { font-size: 10px; white-space: nowrap; }

  .nav-wrap { min-height: 74px; }
  .brand-copy strong { font-size: 19px; }
  .brand-copy small { font-size: 7px; letter-spacing: .11em; }
  .menu-toggle { padding: 10px 4px 10px 10px; }
  .menu-toggle span { width: 25px; }
  .main-nav { top: 74px; }

  /* Hero: reduce oversized type and keep actions easy to tap */
  .hero { min-height: 0; min-height: 660px; align-items: center; }
  .hero-photo { inset: -3%; background-position: center center; }
  .hero-content { padding-block: 76px 82px; }
  .eyebrow { font-size: 9px; letter-spacing: .13em; line-height: 1.5; }
  .hero h1 { max-width: 100%; margin: 22px 0 18px; font-size: clamp(39px, 10.2vw, 56px); line-height: 1.08; letter-spacing: -.055em; }
  .hero-content > p { max-width: 34rem; font-size: 14px; line-height: 1.7; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 11px; margin-top: 25px; max-width: 360px; }
  .hero-actions .button { width: 100%; min-height: 54px; padding-inline: 17px; font-size: 12px; }
  .hero-note { margin-top: 34px; font-size: 9px; }

  .section-pad { padding-block: 66px; }
  h2 { font-size: clamp(33px, 8.5vw, 43px); }
  .intro-grid, .values-grid, .contact-grid { gap: 28px; }
  .intro-copy { max-width: none; }
  .intro-copy .lead { font-size: 16px; }

  /* Service cards: full-width image with consistent crop */
  .service-grid { grid-template-columns: 1fr; gap: 18px; }
  .service-card { min-width: 0; }
  .service-image { height: auto; aspect-ratio: 16 / 9; min-height: 180px; max-height: 235px; }
  .service-body { padding: 23px 21px 25px; }
  .service-body h3 { font-size: 21px; }
  .service-body ul { grid-template-columns: 1fr; gap: 9px; }
  .service-body li { font-size: 12px; }

  .values-grid { gap: 32px; }
  .value-list article { grid-template-columns: 34px 1fr; gap: 13px; padding: 21px 0; }

  /* Portfolio: stack all images to avoid narrow, awkward crops */
  .work-grid { grid-template-columns: 1fr; gap: 14px; }
  .work-one { grid-column: auto; }
  .work-tile { width: 100%; min-height: 0; aspect-ratio: 16 / 10; padding: 19px; background-position: center; }
  .work-tile strong { font-size: 17px; }
  .gallery-note { font-size: 10px; line-height: 1.55; }

  /* Contact details and form: full-width, comfortable touch targets */
  .contact-grid { grid-template-columns: 1fr; gap: 18px; }
  .contact-copy { padding: 32px 23px; }
  .contact-copy > p { font-size: 13px; line-height: 1.7; }
  .contact-details { gap: 17px; }
  .contact-details > a, .contact-details > div { gap: 12px; min-width: 0; }
  .detail-icon { width: 38px; height: 38px; flex: 0 0 38px; }
  .contact-details small { font-size: 8px; }
  .contact-details strong { font-size: 13px; overflow-wrap: anywhere; }
  .quote-form { padding: 25px 20px; }
  .quote-form h3 { font-size: 23px; }
  .quote-form label { margin-top: 16px; font-size: 11px; }
  .quote-form input, .quote-form select, .quote-form textarea { min-height: 47px; padding: 12px; font-size: 14px; border-radius: 4px; }
  .quote-form textarea { min-height: 112px; }
  .form-submit { min-height: 54px; margin-top: 22px; font-size: 13px; }
  .form-privacy { font-size: 10px; line-height: 1.5; }

  .footer-main { padding-block: 30px; gap: 15px; }
  .footer-main > p { font-size: 12px; line-height: 1.6; }
  .footer-bottom { padding-block: 16px; font-size: 10px; line-height: 1.5; }
}

@media (max-width: 380px) {
  .container { width: calc(100% - 28px); }
  .topline-contacts { gap: 8px; }
  .topline-contacts a { font-size: 9px; }
  .hero { min-height: 620px; }
  .hero h1 { font-size: clamp(36px, 10vw, 43px); }
  .hero-content { padding-block: 65px 75px; }
  .contact-copy { padding-inline: 19px; }
  .quote-form { padding-inline: 17px; }
}


/* ABOUT PAGE — clean editorial layout */
.main-nav>a.active{color:var(--blue)}
.about-hero{position:relative;overflow:hidden;background:linear-gradient(105deg,rgba(8,29,49,.96),rgba(16,43,70,.78)),url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=2000&q=85") center/cover;color:white}
.about-hero-inner{padding-block:105px 112px}.about-hero h1{max-width:850px;margin:24px 0 18px;font-size:clamp(42px,6vw,72px);line-height:1.08;letter-spacing:-.055em}.about-hero h1 em{color:var(--gold);font-style:normal}.about-hero p{max-width:560px;margin-bottom:28px;color:#d4e0eb;font-size:16px;line-height:1.8}
.about-story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}.about-story-copy{max-width:620px;padding-top:20px}.about-story-copy p{color:var(--muted);font-size:14px}.about-story-copy .lead{color:var(--ink);font:600 19px/1.65 var(--heading)}
.products-section{background:var(--paper)}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.product-card{overflow:hidden;background:white;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}.product-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,43,70,.09)}.product-photo{height:250px;background-size:cover;background-position:center;background-color:#dce5ed}.product-megatron{background-image:url("https://images.unsplash.com/photo-1624397640148-949b1732bb0a?auto=format&fit=crop&w=1100&q=85")}.product-revov{background-image:url("https://images.unsplash.com/photo-1594818379496-da1e345b0ded?auto=format&fit=crop&w=1100&q=85")}.product-panels{background-image:url("https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?auto=format&fit=crop&w=1100&q=85")}.product-backup{background-image:url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=1100&q=85")}.product-content{padding:27px 29px 30px}.product-kicker{color:var(--blue);font-size:9px;font-weight:800;letter-spacing:.15em}.product-content h3{margin:9px 0;color:var(--navy);font-size:25px;letter-spacing:-.04em}.product-content p{min-height:78px;color:var(--muted);font-size:12px;line-height:1.8}.product-enquiry{display:inline-flex;gap:16px;align-items:center;margin-top:9px;color:var(--blue);font-size:12px;font-weight:700}.product-enquiry span{color:var(--gold);font-size:17px}.product-disclaimer{margin:18px 0 0;color:#7b8997;font-size:10px;line-height:1.7}
.nelson-section{background:var(--navy);color:white}.nelson-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;align-items:center}.nelson-photo-wrap{position:relative;min-height:470px;overflow:hidden;background:linear-gradient(145deg,#234766,#0b2034);border:1px solid rgba(255,255,255,.13)}.nelson-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}.nelson-photo-placeholder{display:none;position:absolute;inset:0;place-content:center;justify-items:center;gap:12px;color:#fff;background:linear-gradient(145deg,#234766,#0b2034)}.nelson-photo-placeholder span{display:grid;place-items:center;width:110px;height:110px;border:1px solid rgba(245,184,46,.7);border-radius:50%;color:var(--gold);font:700 34px var(--heading)}.nelson-photo-placeholder small{font-size:9px;letter-spacing:.18em;color:#d3dfeb}.nelson-copy h2{color:white;margin-bottom:20px}.nelson-copy h2 em{color:var(--gold)}.nelson-copy p{max-width:580px;color:#c6d3df;font-size:13px;line-height:1.9}.nelson-copy .nelson-lead{color:white;font:600 19px/1.6 var(--heading)}.nelson-copy .button{margin-top:12px}
.about-cta{background:#f1f5f9}.about-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:48px 54px;background:var(--navy);color:white}.about-cta h2{color:white}.about-cta h2 em{color:var(--gold)}.about-cta p{max-width:480px;margin:16px 0 0;color:#c6d3df;font-size:13px}
@media(max-width:700px){.about-hero-inner{padding-block:78px 82px}.about-hero h1{font-size:clamp(40px,11vw,58px)}.about-hero p{font-size:14px}.about-story-grid,.nelson-grid{grid-template-columns:1fr;gap:24px}.about-story-copy{padding-top:0}.product-grid{grid-template-columns:1fr;gap:16px}.product-photo{height:220px}.product-content{padding:23px 21px 25px}.product-content p{min-height:0}.nelson-photo-wrap{min-height:390px;max-height:480px}.about-cta-inner{align-items:flex-start;flex-direction:column;padding:34px 25px;gap:24px}.about-cta-inner .button{width:100%}}
@media(max-width:380px){.product-photo{height:190px}.nelson-photo-wrap{min-height:330px}.about-hero h1{font-size:39px}}

/* =====================================================
   QUALITY PASS — DESKTOP + MOBILE
   ===================================================== */
:root{--shadow-soft:0 18px 55px rgba(16,43,70,.09);--radius-card:12px;--radius-control:7px}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.container{width:min(1180px,calc(100% - 64px))}
.site-header{box-shadow:0 5px 24px rgba(16,43,70,.035)}
.nav-wrap{min-height:88px}
.brand-copy strong{font-size:22px;letter-spacing:.075em}
.brand-copy small{font-size:9px;letter-spacing:.14em}
.main-nav{gap:clamp(17px,2.2vw,31px);font-size:13px}
.main-nav a{transition:color .2s ease,background .2s ease}
.nav-cta{border-radius:6px;padding:13px 19px}
.button{border-radius:6px;min-height:52px;padding-inline:23px;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.button:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(8,29,49,.14)}
.button:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(245,184,46,.8);outline-offset:3px}
.section-pad{padding-block:clamp(78px,8vw,112px)}
.intro-grid{gap:clamp(48px,8vw,108px)}
.service-card,.product-card{border-radius:var(--radius-card);overflow:hidden;box-shadow:0 5px 24px rgba(16,43,70,.035)}
.service-card,.product-card,.work-tile{transition:transform .25s ease,box-shadow .25s ease}
.service-card:hover,.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
.service-image,.product-photo{position:relative;background-size:cover;background-repeat:no-repeat;background-color:#dce5ed}
.service-image{height:auto;aspect-ratio:16/9;min-height:220px;max-height:320px}
.service-body{padding:clamp(24px,3vw,36px)}
.service-body h3{font-size:clamp(21px,2.1vw,26px)}
.work-grid{gap:18px}
.work-tile{border-radius:var(--radius-card);min-height:310px;background-repeat:no-repeat}
.work-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.work-tile:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.16);border-radius:inherit;pointer-events:none}
.contact-copy{border-radius:var(--radius-card);padding:clamp(34px,4vw,54px)}
.quote-form{border:1px solid rgba(16,43,70,.06);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding:clamp(28px,3.4vw,42px)}
.quote-form input,.quote-form select,.quote-form textarea{border-radius:var(--radius-control);min-height:46px}
.quote-form textarea{min-height:112px}
.form-submit{border-radius:var(--radius-control)}
.site-footer{background-color:#0b2034}
.footer-main,.footer-bottom{position:relative;z-index:2}
.about-hero{background-position:center 48%;background-size:cover}
.about-hero-inner{padding-block:clamp(84px,9vw,120px)}
.about-story-grid{gap:clamp(48px,8vw,100px)}
.product-grid{gap:24px}
.product-photo{height:auto;aspect-ratio:16/10;min-height:210px;max-height:300px}
.product-content{padding:30px}
.product-content p{min-height:0}
.product-enquiry{padding-block:8px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.product-enquiry:hover{border-color:var(--gold);color:var(--navy)}
.nelson-grid{gap:clamp(42px,7vw,88px)}
.nelson-photo-wrap{min-height:0;height:auto;aspect-ratio:4/5;max-height:680px;border-radius:var(--radius-card);box-shadow:0 22px 55px rgba(0,0,0,.18)}
.nelson-photo{object-fit:cover;object-position:center 30%;transition:transform .7s ease}
.nelson-photo-wrap:hover .nelson-photo{transform:scale(1.035)}
.about-cta-inner{border-radius:var(--radius-card);padding:clamp(30px,5vw,58px)}

@media(max-width:900px){
 .container{width:min(100% - 44px,760px)}
 .main-nav{gap:14px;font-size:12px}
 .intro-grid,.values-grid{gap:44px}
 .contact-grid{gap:26px}
 .contact-copy{padding:32px 26px}
 .work-tile{min-height:260px}
 .nelson-grid{gap:38px}
}
@media(max-width:700px){
 html{scroll-padding-top:80px}
 .container{width:calc(100% - 36px);max-width:560px}
 .topline{font-size:10px}
 .topline-inner{min-height:38px}
 .topline-contacts{gap:10px}
 .topline-contacts a{font-size:10px}
 .site-header{position:sticky;top:0}
 .nav-wrap{min-height:76px}
 .brand-copy strong{font-size:19px}
 .brand-copy small{font-size:7px}
 .menu-toggle{display:block;min-width:46px;min-height:46px;border-radius:7px}
 .menu-toggle span{width:25px;height:2px}
 .main-nav{top:76px;left:0;right:0;max-height:calc(100vh - 114px);overflow-y:auto;padding:12px 22px 22px;gap:2px;box-shadow:0 18px 30px rgba(16,43,70,.12)}
 .main-nav>a{padding:14px 8px;font-size:14px}
 .main-nav .nav-cta{margin-top:8px;padding:15px;text-align:center}
 .hero{min-height:0;min-height:660px}
 .hero-photo{inset:-4%;background-position:center;background-size:cover;animation-duration:28s}
 .hero-shade{background:linear-gradient(90deg,rgba(8,29,49,.92),rgba(8,29,49,.68)),linear-gradient(0deg,rgba(8,29,49,.42),transparent 58%)}
 .hero-content{padding-block:76px 86px}
 .eyebrow{font-size:9px;letter-spacing:.12em;gap:9px}
 .hero h1{font-size:clamp(40px,10.5vw,56px);line-height:1.07;margin:20px 0 17px;max-width:12ch}
 .hero-content>p{font-size:14px;line-height:1.75;max-width:36ch}
 .hero-actions{display:grid;grid-template-columns:1fr;max-width:390px;gap:11px;margin-top:25px}
 .hero-actions .button{width:100%;min-height:54px;font-size:13px}
 .hero-note{margin-top:34px;font-size:9px;line-height:1.5}
 .section-pad{padding-block:66px}
 h2{font-size:clamp(33px,8.2vw,43px);line-height:1.12}
 .intro-grid,.values-grid,.contact-grid,.about-story-grid,.nelson-grid{grid-template-columns:1fr;gap:25px}
 .intro-copy{padding-top:0}
 .intro-copy .lead,.about-story-copy .lead{font-size:16px;line-height:1.65}
 .section-heading{display:block;margin-bottom:28px}
 .section-heading>p{margin-top:14px;font-size:13px;line-height:1.7}
 .service-grid,.product-grid{grid-template-columns:1fr;gap:17px}
 .service-image{aspect-ratio:16/9;min-height:0;max-height:none}
 .service-body{padding:23px 21px 25px}
 .service-body h3{font-size:21px}
 .service-body ul{grid-template-columns:1fr;gap:9px;margin-block:18px}
 .service-body li{font-size:12px}
 .values-grid{gap:30px}
 .value-list article{grid-template-columns:32px 1fr;gap:13px;padding:20px 0}
 .work-grid{grid-template-columns:1fr;gap:14px}
 .work-one{grid-column:auto}
 .work-tile{aspect-ratio:16/10;min-height:0;padding:20px;border-radius:9px;background-position:center}
 .work-tile strong{font-size:17px}
 .contact-grid{gap:16px}
 .contact-copy{padding:30px 22px;border-radius:10px}
 .contact-copy>p{font-size:13px;line-height:1.7;margin-bottom:27px}
 .contact-details{gap:17px}
 .contact-details>a,.contact-details>div{gap:12px;min-width:0}
 .detail-icon{width:38px;height:38px;flex:0 0 38px}
 .contact-details small{font-size:8px}
 .contact-details strong{font-size:13px;overflow-wrap:anywhere}
 .quote-form{padding:25px 20px;border-radius:10px}
 .quote-form h3{font-size:23px}
 .quote-form>p{font-size:12px;line-height:1.6}
 .quote-form label{margin-top:16px;font-size:11px}
 .quote-form input,.quote-form select,.quote-form textarea{min-height:49px;padding:12px;font-size:16px;border-radius:6px}
 .quote-form textarea{min-height:112px}
 .form-submit{min-height:54px;margin-top:20px;font-size:13px}
 .form-privacy{font-size:10px;line-height:1.55}
 .footer-main{align-items:flex-start;flex-direction:column;gap:15px;padding-block:30px}
 .footer-bottom{align-items:flex-start;flex-direction:column;gap:7px;padding-block:16px;font-size:10px}
 .about-hero-inner{padding-block:76px 82px}
 .about-hero h1{font-size:clamp(39px,10.5vw,55px);line-height:1.08}
 .about-hero p{font-size:14px;line-height:1.75}
 .product-photo{aspect-ratio:16/9;min-height:0;max-height:none}
 .product-content{padding:23px 21px 25px}
 .product-content h3{font-size:23px}
 .product-content p{font-size:13px;line-height:1.75}
 .nelson-grid{gap:27px}
 .nelson-photo-wrap{width:100%;aspect-ratio:4/5;min-height:0;max-height:560px;border-radius:10px}
 .nelson-photo{object-position:center 27%}
 .nelson-copy .nelson-lead{font-size:17px}
 .nelson-copy p{font-size:13px;line-height:1.8}
 .about-cta-inner{padding:30px 22px;border-radius:10px;gap:20px}
 .about-cta-inner .button{width:100%}
}
@media(max-width:390px){
 .container{width:calc(100% - 30px)}
 .topline-contacts{gap:7px}
 .topline-contacts a{font-size:9px}
 .nav-wrap{min-height:70px}
 .brand-copy strong{font-size:17px}
 .brand-copy small{font-size:6.5px}
 .main-nav{top:70px}
 .hero{min-height:620px}
 .hero h1{font-size:clamp(37px,10vw,43px)}
 .hero-content{padding-block:65px 74px}
 .contact-copy{padding-inline:19px}
 .quote-form{padding-inline:17px}
 .about-hero h1{font-size:38px}
 .product-content{padding-inline:18px}
}
@media(prefers-reduced-motion:reduce){.hero-photo,.site-footer:before,.nelson-photo{animation:none!important;transition:none!important}}



/* Completed project photographs on the About page */
.completed-work{background:#f1f5f9}
.completed-work-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:20px;align-items:stretch}
.completed-work-card{margin:0;min-width:0;overflow:hidden;background:#fff;border:1px solid rgba(16,43,70,.08);border-radius:12px;box-shadow:0 12px 34px rgba(16,43,70,.07);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.completed-work-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(16,43,70,.12)}
.completed-work-card img{display:block;width:100%;height:360px;object-fit:cover;object-position:center;background:#dce5ed}
.completed-work-card-wide img{object-position:center 45%}
.completed-work-card figcaption{padding:22px 22px 24px}
.completed-work-card figcaption span{display:block;margin-bottom:10px;color:#1976d2;font-size:9px;font-weight:800;letter-spacing:.16em}
.completed-work-card figcaption strong{display:block;color:#102b46;font:700 18px/1.3 var(--heading)}
.completed-work-card figcaption p{margin:9px 0 0;color:#667789;font-size:12px;line-height:1.7}
@media(max-width:900px){.completed-work-grid{grid-template-columns:1fr 1fr}.completed-work-card-wide{grid-column:span 2}.completed-work-card img{height:320px}}
@media(max-width:700px){.completed-work-grid{grid-template-columns:1fr;gap:16px}.completed-work-card-wide{grid-column:auto}.completed-work-card img{height:auto;aspect-ratio:4/3;object-fit:cover}.completed-work-card figcaption{padding:19px 19px 21px}.completed-work-card figcaption strong{font-size:17px}}


/* Service area map */
.service-areas{background:#f5f7fa}
.service-area-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.85fr);gap:24px;align-items:stretch}
.service-area-map-panel{overflow:hidden;background:#fff;border:1px solid rgba(16,43,70,.1);border-radius:14px;box-shadow:0 16px 42px rgba(16,43,70,.08)}
.map-topline{display:flex;align-items:center;gap:9px;padding:17px 20px;color:#102b46;font-size:10px;font-weight:800;letter-spacing:.14em}
.map-live-dot{width:8px;height:8px;border-radius:50%;background:#1dbb82;box-shadow:0 0 0 4px rgba(29,187,130,.12)}
.map-source{margin-left:auto;color:#7b8998;font-size:9px;letter-spacing:.04em;font-weight:600}
#mambi-service-map{width:100%;height:480px;background:#e5edf2;z-index:0}
#mambi-service-map .leaflet-popup-content{font-family:inherit;line-height:1.55}
#mambi-service-map .leaflet-popup-content a{color:#1268e8;font-weight:700}
.map-legend{display:flex;flex-wrap:wrap;gap:18px;padding:15px 20px;color:#526273;font-size:11px}
.map-legend span{display:flex;align-items:center;gap:8px}
.legend-pin{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend-sa{background:#1268e8;box-shadow:0 0 0 4px rgba(18,104,232,.13)}
.legend-zw{background:#e9a923;box-shadow:0 0 0 4px rgba(233,169,35,.16)}
.service-area-cards{display:flex;flex-direction:column;gap:14px}
.area-card{padding:24px;background:#fff;border:1px solid rgba(16,43,70,.09);border-radius:12px;box-shadow:0 10px 28px rgba(16,43,70,.045)}
.area-country{font-size:9px;font-weight:800;letter-spacing:.16em;color:#1268e8}
.area-card h3{margin:10px 0;color:#102b46;font:800 22px/1.2 var(--heading)}
.area-card p{margin:0 0 16px;color:#647487;font-size:12px;line-height:1.75}
.area-card>a{display:block;width:fit-content;margin-top:10px;color:#1268e8;font-size:11px;font-weight:800;text-decoration:none}
.area-card>a.area-phone{padding-top:11px;border-top:1px solid #e8edf2;color:#102b46}
.area-card-zw .area-country{color:#bd8614}
.area-note{margin:0;padding:0 5px;color:#718093;font-size:10px;line-height:1.65}
@media(max-width:900px){.service-area-layout{grid-template-columns:1fr}#mambi-service-map{height:390px}.service-area-cards{display:grid;grid-template-columns:1fr 1fr}.area-note{grid-column:1/-1}}
@media(max-width:600px){#mambi-service-map{height:330px}.map-topline{padding:15px;font-size:9px}.map-legend{padding:13px 15px;gap:12px;font-size:10px}.service-area-cards{grid-template-columns:1fr}.area-card{padding:20px}.area-note{grid-column:auto}}