/* ==========================================================================
   Sukuma (Pvt) Ltd — design system
   Concept: the site plan / technical drawing — hairline grid, cross-hair
   registration marks, flat geometry, spec-sheet panels. No rounded cards,
   no soft shadows, no gradient washes-as-decoration.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Chakra+Petch:wght@500;600;700&family=DM+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* paper + ink */
  --paper: #F1F2ED;
  --paper-dim: #E7E9E1;
  --ink: #10161A;
  --ink-soft: #45505A;
  --line: #C7CCC3;
  --line-strong: #10161A;

  /* parent brand — teal to indigo */
  --p1: #18717B;
  --p2: #18407B;
  --p3: #22187B;
  --p-dark: #100C24;

  /* engineering — steel greys */
  --e1: #8E909A;
  --e2: #928E9A;
  --e3: #988E9A;
  --e-dark: #2B2C31;

  /* energy — heat gradient */
  --n1: #BD0F1B;
  --n2: #BD5A0F;
  --n3: #BDB10F;
  --n-dark: #200A08;

  --accent: var(--p1);
  --accent-2: var(--p3);
  --dark: var(--p-dark);

  --maxw: 1180px;
  --gutter: clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600;
  line-height:1.08;
  margin:0 0 .4em;
  letter-spacing:.005em;
}
h1{font-size:clamp(2.4rem,5vw,4.2rem); font-weight:700;}
h2{font-size:clamp(1.7rem,3vw,2.4rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1em; max-width:62ch; color:var(--ink-soft);}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono', monospace;}
img{max-width:100%; height:auto; display:block;}
button{font-family:inherit;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}

/* skip link / focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.6em 1em; z-index:100;}
.skip-link:focus{left:var(--gutter); top:var(--gutter);}

/* ---------- registration marks (blueprint corner ticks) ---------- */
.reg{position:relative;}
.reg::before,.reg::after{
  content:''; position:absolute; width:14px; height:14px;
  border-color:var(--line-strong); border-style:solid; opacity:.55;
}
.reg::before{top:0; left:var(--gutter); border-width:1px 0 0 1px;}
.reg::after{bottom:0; right:var(--gutter); border-width:0 1px 1px 0;}

/* ---------- header ---------- */
.site-header{
  border-bottom:1px solid var(--line-strong);
  position:sticky; top:0; background:var(--paper); z-index:50;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{
  font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:1.35rem;
  text-decoration:none; color:var(--ink); display:flex; align-items:baseline; gap:.5em;
  letter-spacing:-0.01em;
}
.brand, .nav a{white-space:nowrap;}
.brand small{font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:.6rem; color:var(--ink-soft); letter-spacing:.04em;}
.nav{display:flex; gap:2rem; align-items:center;}
.nav a{
  text-decoration:none; font-size:.94rem; color:var(--ink-soft); position:relative; padding:4px 0;
}
.nav a:hover, .nav a[aria-current="page"]{color:var(--ink);}
.nav a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent);
}
.nav-toggle{display:none; background:none; border:1px solid var(--line-strong); padding:8px 10px; cursor:pointer;}
.nav-toggle{min-width:48px; min-height:44px; align-items:center; justify-content:center;}

@media (max-width: 860px){
  .site-header .wrap{height:68px;}
  .nav{
    position:fixed; inset:68px 0 0 0; background:var(--paper); flex-direction:column;
    align-items:stretch; padding:1.25rem var(--gutter) 2rem; gap:0; transform:translateY(-110%);
    visibility:hidden; transition:transform .25s ease, visibility .25s; border-top:1px solid var(--line-strong);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav.open{transform:translateY(0); visibility:visible;}
  .nav-toggle{display:inline-flex;}
  .nav a{font-size:1.1rem; padding:.85rem 0; border-bottom:1px solid var(--line);}
  .nav a[aria-current="page"]::after{display:none;}
  body.menu-open{overflow:hidden;}
}

/* ---------- hero ---------- */
.hero{padding:64px 0 56px; border-bottom:1px solid var(--line-strong);}
.hero-grid{
  display:grid; grid-template-columns:1.5fr 1fr; gap:var(--gutter); align-items:end;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:.78rem; color:var(--accent);
  display:flex; align-items:center; gap:.6em; margin-bottom:1.2em;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--accent);}
.hero-copy p{font-size:1.08rem; max-width:46ch;}
.cta-row{display:flex; gap:.9rem; margin-top:1.6rem; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:.5em; padding:.85em 1.4em;
  font-size:.92rem; font-weight:500; text-decoration:none; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink); cursor:pointer; transition:background .15s, color .15s;
}
.btn-primary{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-primary:hover{background:var(--accent); border-color:var(--accent);}
.btn:not(.btn-primary):hover{background:var(--ink); color:var(--paper);}

.spec-panel{
  border:1px solid var(--line-strong); padding:1.4rem; font-family:'IBM Plex Mono', monospace; font-size:.82rem;
  background:var(--paper-dim);
}
.spec-panel dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.5em 1em;}
.spec-panel dt{color:var(--ink-soft);}
.spec-panel dd{margin:0; text-align:right;}
.spec-panel dd{min-width:0; overflow-wrap:anywhere;}
.spec-panel .divider{grid-column:1/-1; border-top:1px solid var(--line); margin:.3em 0;}

@media (max-width:800px){ .hero-grid{grid-template-columns:1fr;} }

/* ---------- divisions strip ---------- */
.divisions{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line-strong);}
@media (max-width:800px){ .divisions{grid-template-columns:1fr;} }
.division{
  padding:3rem var(--gutter); color:#fff; position:relative; overflow:hidden;
  min-height:280px; display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none;
}
.division + .division{border-left:1px solid rgba(255,255,255,.15);}
@media (max-width:800px){ .division + .division{border-left:none; border-top:1px solid var(--line-strong);} }
.division.eng{background:linear-gradient(135deg, var(--e-dark), var(--e1) 160%);}
.division.energy{background:linear-gradient(135deg, var(--n-dark), var(--n1) 55%, var(--n2) 100%);}
.division .tag{font-family:'IBM Plex Mono', monospace; font-size:.75rem; opacity:.8; margin-bottom:.8em;}
.division h3{color:#fff; font-size:1.7rem; margin-bottom:.4em;}
.division p{color:rgba(255,255,255,.82); max-width:38ch;}
.division .go{margin-top:1.2em; font-size:.85rem; font-family:'IBM Plex Mono', monospace;}
.division:hover{outline:2px solid rgba(255,255,255,.5); outline-offset:-2px;}

/* ---------- section scaffolding ---------- */
.section{padding:64px 0; border-bottom:1px solid var(--line-strong);}
.section.tight{padding:48px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.2rem; flex-wrap:wrap;}
.section-head .idx{font-family:'IBM Plex Mono', monospace; font-size:.8rem; color:var(--accent);}
.section.dark{background:var(--dark); color:#fff;}
.section.dark p{color:rgba(255,255,255,.72);}
.section.dark h2, .section.dark h3{color:#fff;}

/* ---------- project cards ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong);}
@media (max-width:900px){ .card-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .card-grid{grid-template-columns:1fr;} }
.card{background:var(--paper); padding:1.6rem;}
.card .ref{font-family:'IBM Plex Mono', monospace; font-size:.72rem; color:var(--ink-soft); display:block; margin-bottom:1rem;}
.card h4{font-family:'Barlow Condensed',sans-serif; font-size:1.3rem; margin-bottom:.3em;}
.card .meta{font-size:.82rem; color:var(--ink-soft); margin-bottom:.6em;}
.card .sector{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:.68rem; padding:.25em .6em;
  border:1px solid var(--line-strong); margin-top:.6em;
}

/* ---------- capability list ---------- */
.cap-list{border-top:1px solid var(--line-strong);}
.cap-row{
  display:grid; grid-template-columns:90px 1fr 1.3fr; gap:2rem; padding:1.8rem 0;
  border-bottom:1px solid var(--line); align-items:start;
}
@media (max-width:760px){ .cap-row{grid-template-columns:60px 1fr; } .cap-row .cap-desc{grid-column:1/-1;} }
.cap-row .num{font-family:'IBM Plex Mono', monospace; color:var(--accent); font-size:.95rem;}
.cap-row h3{margin-bottom:.3em;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:#fff; padding:56px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.site-footer h4{color:#fff; font-size:.85rem; font-family:'IBM Plex Mono', monospace; font-weight:400; letter-spacing:.02em; margin-bottom:1em; color:rgba(255,255,255,.55);}
.site-footer ul{list-style:none; margin:0; padding:0;}
.site-footer li{margin-bottom:.6em;}
.site-footer a{text-decoration:none; color:rgba(255,255,255,.85); font-size:.92rem;}
.site-footer a:hover{color:var(--p1);}
.footer-bottom{
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.15);
  display:flex; justify-content:space-between; font-size:.78rem; color:rgba(255,255,255,.5);
  font-family:'IBM Plex Mono', monospace; flex-wrap:wrap; gap:.6em;
}

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
@media (max-width:700px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:.4em;}
.field.full{grid-column:1/-1;}
label{font-size:.82rem; color:var(--ink-soft);}
input, select, textarea{
  border:1px solid var(--line-strong); background:var(--paper); padding:.75em .8em;
  font-family:'DM Sans', sans-serif; font-size:.95rem; color:var(--ink);
}
input, select, textarea, .btn, .tag-filter button{min-height:44px;}
textarea{resize:vertical; min-height:110px;}

/* ---------- misc ---------- */
.tag-filter{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2rem;}
.tag-filter button{
  border:1px solid var(--line-strong); background:transparent; padding:.5em 1em; font-size:.82rem; cursor:pointer;
}
.tag-filter button.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.hide{display:none !important;}

.value-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;}
@media (max-width:800px){ .value-row{grid-template-columns:1fr 1fr;} }
.value-row .stat{border-top:2px solid var(--accent); padding-top:.8rem;}
.value-row .stat b{display:block; font-family:'Barlow Condensed',sans-serif; font-size:2.2rem;}
.value-row .stat span{font-size:.85rem; color:var(--ink-soft);}

.cta-band{
  background:linear-gradient(120deg, var(--p3), var(--p2) 60%, var(--p1));
  color:#fff; padding:64px 0; text-align:left;
}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.85);}
.cta-band .btn-primary{background:#fff; color:var(--p3); border-color:#fff;}
.cta-band .btn-primary:hover{background:var(--n3); color:var(--n-dark); border-color:var(--n3);}
.cta-band .contact-cta{background:var(--p3); border-color:#fff; color:#fff;}
.cta-band .contact-cta:hover{background:var(--p-dark); border-color:#fff; color:#fff;}

/* ---------- home: Sukuma parent palette ---------- */
.home-page .site-header{
  background:rgba(241,242,237,.94);
  box-shadow:inset 0 3px 0 var(--p1);
  backdrop-filter:blur(10px);
}
.home-page .hero{
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(24,113,123,.10), transparent 38%),
    linear-gradient(145deg, transparent 58%, rgba(34,24,123,.09));
}
.home-page .hero::after{
  width:clamp(150px,22vw,310px); height:clamp(150px,22vw,310px);
  right:-6%; bottom:-42%; border:0;
  background:var(--p2); opacity:.08; transform:rotate(45deg);
}
.home-page .hero h1{color:var(--p3); max-width:14ch;}
.home-page .hero h1::after{
  content:''; display:block; width:92px; height:6px; margin-top:.32em;
  background:linear-gradient(90deg,var(--p1) 0 34%,var(--p2) 34% 67%,var(--p3) 67%);
}
.home-page .spec-panel{
  border-top:5px solid var(--p1);
  background:linear-gradient(145deg,rgba(24,113,123,.08),rgba(34,24,123,.06)),var(--paper-dim);
}
.home-page .btn-primary{background:var(--p3); border-color:var(--p3);}
.home-page .btn-primary:hover{background:var(--p1); border-color:var(--p1);}
.home-page .divisions{background:var(--p2);}
.home-page .division.eng{background:linear-gradient(135deg,var(--e-dark),var(--e2) 120%);}
.home-page .division.energy{background:linear-gradient(135deg,var(--n1),var(--n2) 64%,var(--n3) 145%);}
.home-page .division::before{
  content:''; position:absolute; width:180px; height:180px; right:-65px; top:-65px;
  border:1px solid rgba(255,255,255,.25); transform:rotate(45deg);
  transition:transform .35s ease;
}
.home-page .division:hover::before{transform:rotate(55deg) scale(1.08);}
.home-page .section:nth-of-type(4){background:rgba(24,64,123,.045);}
.home-page .card{border-top:4px solid var(--p1);}
.home-page .card:nth-child(2){border-top-color:var(--p2);}
.home-page .card:nth-child(3){border-top-color:var(--p3);}
.home-page .cap-row h3{color:var(--p2);}
.home-page .site-footer{
  background:linear-gradient(115deg,var(--p-dark),var(--p3) 72%,var(--p2));
}
.home-page .site-footer a:hover{color:#74c4ca;}

@media (prefers-reduced-motion:reduce){
  .home-page .division::before{transition:none;}
}

/* ---------- about, integrated into home ---------- */
.home-about{background:var(--p-dark); color:#fff;}
.home-about p{color:rgba(255,255,255,.72);}
.about-intro{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,7vw,7rem); align-items:end;}
.about-intro .idx{color:#74c4ca;}
.about-intro h2{font-size:clamp(2.5rem,5vw,4.5rem); margin:.2em 0 0; color:#fff;}
.about-intro > p{font-size:1.12rem; margin:0; padding-bottom:.35rem;}
.purpose-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.2); margin-top:3.5rem;}
.purpose-grid article{background:var(--p3); padding:clamp(1.5rem,4vw,3rem);}
.purpose-grid article:last-child{background:var(--p2);}
.purpose-grid span{font-size:.72rem; color:rgba(255,255,255,.68); text-transform:uppercase; letter-spacing:.08em;}
.purpose-grid h3{font-size:clamp(1.35rem,2.5vw,2rem); margin-top:.8rem; color:#fff; max-width:25ch;}
.about-principles{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem;}
.about-principles b{font-family:'IBM Plex Mono',monospace; color:#74c4ca; font-size:.76rem;}
.about-principles h3{color:#fff; font-size:1.45rem; margin-top:.5rem;}
.about-principles p{font-size:.9rem;}

/* ---------- division identities ---------- */
.engineering-page h1,.engineering-page h2,.engineering-page h3,.engineering-page h4,.engineering-page .brand{font-family:'Chakra Petch',sans-serif;}
.engineering-page .site-header{box-shadow:inset 0 4px 0 var(--e2);}
.engineering-page .hero{background:linear-gradient(135deg,var(--paper-dim),rgba(142,144,154,.28));}
.engineering-page .hero h1{color:var(--e-dark);}
.engineering-page .spec-panel{border-top:5px solid var(--e1); background:linear-gradient(135deg,rgba(142,144,154,.18),rgba(152,142,154,.12)),var(--paper);}
.engineering-page .card{border-top:4px solid var(--e1);}
.engineering-page .card:nth-child(2){border-top-color:var(--e2);}
.engineering-page .card:nth-child(3){border-top-color:var(--e3);}
.engineering-page .site-footer{background:linear-gradient(120deg,var(--e-dark),#45454d);}

.energy-page h1,.energy-page h2,.energy-page h3,.energy-page h4{font-family:'Bricolage Grotesque',sans-serif;}
.energy-page .brand{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.48rem;
  font-weight:700;
  letter-spacing:.055em;
}
.energy-page .brand small{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--n1);
}
.home-page .home-brand{align-items:center; gap:.65rem;}
.home-page .home-brand img{
  width:46px;
  height:36px;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.home-page .home-brand span{display:flex; align-items:baseline; gap:.45em;}
.energy-page .energy-hero-title{
  font-family:'Chakra Petch',sans-serif;
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.03;
}
.energy-page .site-header{box-shadow:inset 0 4px 0 var(--n1);}
.energy-page .hero{background:linear-gradient(145deg,#fbf6ec 40%,rgba(189,90,15,.17));}
.energy-page .hero h1{color:var(--n1);}
.energy-page .spec-panel{border-top:5px solid var(--n2); background:linear-gradient(135deg,rgba(189,177,15,.18),rgba(189,90,15,.1)),#fbf6ec !important;}
.energy-page .cap-row:nth-child(3n+1){border-left:4px solid var(--n1); padding-left:1.2rem;}
.energy-page .cap-row:nth-child(3n+2){border-left:4px solid var(--n2); padding-left:1.2rem;}
.energy-page .cap-row:nth-child(3n){border-left:4px solid var(--n3); padding-left:1.2rem;}
.energy-page .site-footer{background:linear-gradient(120deg,var(--n-dark),#57130d 70%,#614f09);}

@media (max-width:700px){
  .about-intro,.purpose-grid,.about-principles{grid-template-columns:1fr;}
}

/* ---------- site-wide mobile refinement ---------- */
@media (max-width:760px){
  :root{--gutter:20px;}
  body{font-size:15.5px;}
  h1{font-size:clamp(2.25rem,11vw,3.35rem); overflow-wrap:break-word;}
  h2{font-size:clamp(1.75rem,8vw,2.3rem);}
  .hero{padding:44px 0 40px;}
  .section,.cta-band{padding:48px 0;}
  .section.tight{padding:40px 0;}
  .hero-grid{gap:2rem;}
  .hero-copy p{font-size:1rem;}
  .section-head{align-items:flex-start; flex-direction:column; gap:.45rem; margin-bottom:1.5rem;}
  .cta-row{align-items:stretch; flex-direction:column;}
  .cta-row .btn{justify-content:center; width:100%;}
  .cap-row{gap:.75rem 1rem; padding:1.35rem 0;}
  .cap-row .cap-desc{margin-bottom:0;}
  .value-row{gap:1.4rem 1rem;}
  .footer-grid{gap:2rem 1.25rem;}
  .footer-bottom{flex-direction:column;}
  .contact-layout{grid-template-columns:1fr !important; gap:2rem !important;}
  .spec-panel{padding:1.1rem; font-size:.76rem;}
  .form-grid{gap:1rem;}
}

@media (max-width:480px){
  :root{--gutter:16px;}
  .brand{font-size:1.2rem; gap:.35em;}
  .energy-page .brand{font-size:1.32rem; letter-spacing:.035em;}
  .home-page .home-brand{gap:.4rem;}
  .home-page .home-brand img{width:36px; height:30px;}
  .home-page .home-brand small{display:none;}
  .brand small{font-size:.55rem;}
  .value-row,.footer-grid{grid-template-columns:1fr;}
  .card{padding:1.25rem;}
  .division{min-height:250px; padding:2.25rem var(--gutter);}
  .tag-filter{display:grid; grid-template-columns:1fr 1fr;}
  .tag-filter button:last-child{grid-column:1/-1;}
  .spec-panel dl{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:.65em .75em;}
  .reg::before{left:var(--gutter);}
  .reg::after{right:var(--gutter);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important;}
}