/* ================================================================
   SPILLEDWATER HOLDINGS — Corporate Identity Stylesheet
   Brand: Deep Teal (#1B4E4A) + Gold (#C89B3C) + Indigo-Purple logo
   Typography: Bebas Neue for headings, Inter for body
   CI Motif: Overlapping diamond/chevron shapes (teal + gold)
   ================================================================ */

/* ── Design Tokens ── */
:root, [data-theme='light'] {
  /* Type */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* Brand palette (light) */
  --color-bg:          #F5F4F0;
  --color-surface:     #FAFAF8;
  --color-surface-2:   #FFFFFF;
  --color-offset:      #EDEBE6;
  --color-divider:     #DDDAD4;
  --color-border:      #D0CCC5;

  --color-text:        #181816;
  --color-text-muted:  #5A574F;
  --color-text-faint:  #9B9790;
  --color-text-inv:    #F9F8F4;

  /* Primary — Deep Teal */
  --color-teal:        #1B4E4A;
  --color-teal-hover:  #143D3A;
  --color-teal-active: #0D2B29;
  --color-teal-light:  #E5EFEE;
  --color-teal-mid:    #C4DEDD;

  /* Accent — Gold */
  --color-gold:        #C89B3C;
  --color-gold-hover:  #A87C2A;
  --color-gold-light:  #FBF4E2;
  --color-gold-mid:    #EDD898;

  /* Division accents */
  --color-spm:   #C89B3C;    /* gold */
  --color-swa:   #2A6DA8;    /* steel blue (matches SW&A PDF) */
  --color-power: #1B8FA0;    /* teal-blue (matches Power PDF) */
  --color-recy:  #0277BD;    /* water blue */

  /* Logo */
  --color-logo:  #5B5EA6;    /* indigo-purple */

  /* Layout */
  --content-wide: 1200px;

  /* Spacing */
  --sp-1:  0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5:  1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* Radius */
  --r-sm: 0.375rem; --r-md: 0.5rem; --r-lg: 0.75rem;
  --r-xl: 1.25rem;  --r-2xl: 2rem;  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(20,25,20,0.07);
  --shadow-md: 0 4px 16px rgba(20,25,20,0.10);
  --shadow-lg: 0 12px 40px rgba(20,25,20,0.14);

  /* Transition */
  --t: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Fonts */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
}

[data-theme='dark'] {
  --color-bg:         #0F1210;
  --color-surface:    #161916;
  --color-surface-2:  #1C1F1C;
  --color-offset:     #191C19;
  --color-divider:    #232623;
  --color-border:     #2E322E;
  --color-text:       #D2D6D0;
  --color-text-muted: #787C76;
  --color-text-faint: #4C504B;
  --color-text-inv:   #1C1F1C;
  --color-teal:       #4AA09A;
  --color-teal-hover: #6BBAB5;
  --color-teal-light: #182B2A;
  --color-teal-mid:   #203534;
  --color-gold:       #D4A84A;
  --color-gold-hover: #E8C070;
  --color-gold-light: #272010;
  --color-gold-mid:   #3A3018;
  --color-spm:        #D4A84A;
  --color-swa:        #5A8FC5;
  --color-power:      #3EB5C8;
  --color-recy:       #4AA5D4;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#0F1210; --color-surface:#161916; --color-surface-2:#1C1F1C;
    --color-offset:#191C19; --color-divider:#232623; --color-border:#2E322E;
    --color-text:#D2D6D0; --color-text-muted:#787C76; --color-text-faint:#4C504B;
    --color-text-inv:#1C1F1C; --color-teal:#4AA09A; --color-teal-hover:#6BBAB5;
    --color-teal-light:#182B2A; --color-teal-mid:#203534;
    --color-gold:#D4A84A; --color-gold-hover:#E8C070; --color-gold-light:#272010;
    --color-gold-mid:#3A3018;
    --color-spm:#D4A84A; --color-swa:#5A8FC5; --color-power:#3EB5C8; --color-recy:#4AA5D4;
    --shadow-sm:0 1px 3px rgba(0,0,0,0.25); --shadow-md:0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg:0 12px 40px rgba(0,0,0,0.5);
  }
}

/* ── Base Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:4rem}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg)}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
ul[role='list'],ol[role='list']{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.1}
p,li,figcaption{text-wrap:pretty;max-width:72ch}
::selection{background:color-mix(in srgb,var(--color-teal) 25%,transparent);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-teal);outline-offset:3px;border-radius:var(--r-sm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
a{color:inherit;text-decoration:none;transition:color var(--t)}
button{cursor:pointer;background:none;border:none}

/* ── Layout ── */
.container{width:min(var(--content-wide),100%);margin-inline:auto;padding-inline:clamp(var(--sp-6),4vw,var(--sp-16))}
.section{padding-block:clamp(var(--sp-16),8vw,var(--sp-24));position:relative;overflow:hidden}

/* ── Typography ── */
.section-heading{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  letter-spacing:0.04em;
  color:var(--color-text);
  margin-bottom:var(--sp-6);
}
.section-heading--light{color:#fff}
.section-label-wrap{margin-bottom:var(--sp-2)}
.section-label{
  display:inline-block;
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--color-gold);
}
.section-label--light{color:var(--color-gold-mid)}
.section-intro{
  font-size:var(--text-base);
  color:var(--color-text-muted);
  max-width:65ch;
  margin-bottom:var(--sp-10);
}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6);
  border-radius:var(--r-full);
  font-size:var(--text-sm);font-weight:600;
  letter-spacing:0.04em;text-transform:uppercase;
  transition:all var(--t);white-space:nowrap;
}
.btn--gold{background:var(--color-gold);color:#100800}
.btn--gold:hover{background:var(--color-gold-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--outline{border:2px solid rgba(255,255,255,0.55);color:#fff}
.btn--outline:hover{background:rgba(255,255,255,0.12)}

/* ═══════════════════════════════════════
   CI DIAMOND DECORATORS
   Replicate the corner-diamond motif from the PDF brand
   ═══════════════════════════════════════ */
.ci-diamonds{position:absolute;pointer-events:none;z-index:0}

/* Top-right corner group */
.ci-diamonds--hero-tr{top:-20px;right:-20px;width:280px;height:280px}
.ci-diamonds--hero-tr .ci-diamond--teal{
  position:absolute;top:0;right:0;
  width:180px;height:180px;
  background:var(--color-teal);
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  opacity:0.85;
}
.ci-diamonds--hero-tr .ci-diamond--gold{
  position:absolute;top:60px;right:60px;
  width:140px;height:140px;
  background:var(--color-gold);
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  opacity:0.75;
}

/* Bottom-left hero */
.ci-diamonds--hero-bl{bottom:-20px;left:-20px;width:220px;height:220px}
.ci-diamonds--hero-bl .ci-diamond--gold-sm{
  position:absolute;bottom:0;left:0;
  width:150px;height:150px;
  background:var(--color-gold);
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  opacity:0.75;
}
.ci-diamonds--hero-bl .ci-diamond--teal-sm{
  position:absolute;bottom:50px;left:50px;
  width:110px;height:110px;
  background:var(--color-teal);
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  opacity:0.6;
}

/* Section-level decorators */
.ci-diamonds--sec-tr{top:-10px;right:-10px;width:200px;height:200px}
.ci-diamonds--sec-tr .ci-diamond--teal-sm{
  position:absolute;top:0;right:0;
  width:130px;height:130px;
  background:var(--color-teal);
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  opacity:0.18;
}
.ci-diamonds--sec-tr .ci-diamond--gold-sm{
  position:absolute;top:40px;right:40px;
  width:100px;height:100px;
  background:var(--color-gold);
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  opacity:0.15;
}

.ci-diamonds--sec-bl{bottom:-10px;left:-10px;width:200px;height:200px}
.ci-diamonds--sec-bl .ci-diamond--gold-sm{
  position:absolute;bottom:0;left:0;
  width:130px;height:130px;
  background:var(--color-gold);
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  opacity:0.15;
}

/* Dots motif (matches the dotted pairs in the PDF) */
.ci-diamonds--hero-tr::after,
.ci-diamonds--hero-bl::before{
  content:'';display:block;
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:var(--color-teal);
  opacity:0.4;
  box-shadow:12px 0 0 var(--color-teal),0 12px 0 var(--color-teal),12px 12px 0 var(--color-teal),0 24px 0 var(--color-teal),12px 24px 0 var(--color-teal),0 36px 0 var(--color-teal);
}
.ci-diamonds--hero-tr::after{bottom:20px;left:20px}
.ci-diamonds--hero-bl::before{top:0;right:0}

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--color-bg) 93%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-divider);
  transition:box-shadow var(--t);
}
.site-header.scrolled{box-shadow:var(--shadow-md)}
.header-inner{
  display:flex;align-items:center;gap:var(--sp-8);
  padding-block:var(--sp-5);
  width:min(var(--content-wide),100%);
  margin-inline:auto;
  padding-inline:clamp(var(--sp-6),4vw,var(--sp-16));
}
.logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.logo-img{
  height:72px;
  width:auto;
  display:block;
  /* Keep dark logo readable on light header */
  filter:drop-shadow(0 1px 4px rgba(0,0,0,0.08));
  transition:opacity var(--t),transform var(--t);
}
.logo:hover .logo-img{opacity:0.85;transform:translateY(-1px)}
/* Footer: logo sits on dark teal bg — invert to white so it reads clearly */
.logo-img--footer{
  height:64px;
  filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,0.3));
}

.main-nav{margin-left:auto}
.main-nav ul{display:flex;align-items:center;gap:var(--sp-6);list-style:none}
.main-nav a{
  font-size:var(--text-sm);font-weight:500;
  color:var(--color-text-muted);padding-block:var(--sp-2);
  position:relative;
}
.main-nav a::after{
  content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;
  background:var(--color-teal);transition:width var(--t);border-radius:2px;
}
.main-nav a:hover{color:var(--color-text)}
.main-nav a:hover::after{width:100%}
.nav-cta{
  background:var(--color-teal)!important;color:#fff!important;
  padding:var(--sp-2) var(--sp-5)!important;border-radius:var(--r-full);
}
.nav-cta:hover{background:var(--color-teal-hover)!important}
.nav-cta::after{display:none!important}

.header-actions{display:flex;align-items:center;gap:var(--sp-3)}
.theme-toggle{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text-muted);border:1px solid var(--color-border);
  transition:all var(--t);
}
.theme-toggle:hover{color:var(--color-text);background:var(--color-offset)}
.hamburger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center}
.hamburger span{display:block;width:22px;height:2px;background:var(--color-text);border-radius:2px;transition:all var(--t)}
.mobile-nav{display:none;border-top:1px solid var(--color-divider);background:var(--color-bg);padding:var(--sp-4) clamp(var(--sp-6),4vw,var(--sp-16))}
.mobile-nav ul{display:flex;flex-direction:column;gap:var(--sp-2)}
.mobile-link{display:block;padding:var(--sp-3) 0;font-size:var(--text-base);font-weight:500;color:var(--color-text);border-bottom:1px solid var(--color-divider)}

@media(max-width:768px){.main-nav{display:none}.hamburger{display:flex}.mobile-nav.open{display:block}}

/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
.hero{
  position:relative;min-height:88vh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0}
.hero-bg-img{width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(12,32,28,0.88) 0%,rgba(20,50,42,0.75) 55%,rgba(18,40,34,0.6) 100%);
}
.hero-content{
  position:relative;z-index:2;
  max-width:var(--content-wide);margin-inline:auto;
  padding:var(--sp-20) clamp(var(--sp-6),4vw,var(--sp-16)) var(--sp-12);
}
.hero-eyebrow{
  font-size:var(--text-xs);letter-spacing:0.2em;text-transform:uppercase;
  color:var(--color-gold);font-weight:600;margin-bottom:var(--sp-4);
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(3.5rem,2rem + 6vw,8rem);
  letter-spacing:0.04em;color:#fff;line-height:0.95;
  margin-bottom:var(--sp-6);
}
.hero-title-accent{color:var(--color-gold)}
.hero-lead{
  font-size:var(--text-lg);color:rgba(255,255,255,0.80);
  max-width:52ch;margin-bottom:var(--sp-8);line-height:1.6;
}
.hero-ctas{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.hero-stats-bar{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);
  border-top:2px solid var(--color-gold);
}
.hstat{
  padding:var(--sp-5) clamp(var(--sp-6),3vw,var(--sp-12));
  display:flex;flex-direction:column;gap:var(--sp-1);
  border-right:1px solid rgba(255,255,255,0.1);
}
.hstat:last-child{border-right:none}
.hstat-n{
  font-family:var(--font-display);
  font-size:var(--text-xl);letter-spacing:0.04em;
  color:var(--color-gold);
}
.hstat-l{font-size:var(--text-xs);color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.08em}
@media(max-width:768px){
  .hero-stats-bar{grid-template-columns:repeat(2,1fr)}
  .hstat:nth-child(2){border-right:none}
}

/* ═══════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════ */
.about-section{background:var(--color-surface)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--sp-10),5vw,var(--sp-20));align-items:center}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}}
.about-text{display:flex;flex-direction:column;gap:var(--sp-5)}
.about-text p{color:var(--color-text-muted);line-height:1.8}
.about-pillars{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-2)}
.pillar{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);font-weight:600;color:var(--color-teal)}
.pillar svg{stroke:var(--color-teal);flex-shrink:0}
.about-visual{position:relative}
.about-img-main{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.about-img-main img{width:100%;height:340px;object-fit:cover}
.about-img-inset{
  position:absolute;bottom:-1rem;right:-1rem;
  width:54%;border:4px solid var(--color-bg);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);
}
.about-img-inset img{width:100%;height:180px;object-fit:cover}
.about-badge{
  position:absolute;top:var(--sp-5);left:-var(--sp-4);
  background:var(--color-gold);color:#100800;
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.about-badge strong{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:0.05em;line-height:1}
.about-badge span{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.1em}

/* ═══════════════════════════════════════
   VISION & MISSION
   ═══════════════════════════════════════ */
.vm-section{background:var(--color-bg)}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
@media(max-width:640px){.vm-grid{grid-template-columns:1fr}}
.vm-card{
  padding:var(--sp-10);border-radius:var(--r-2xl);
  display:flex;flex-direction:column;gap:var(--sp-4);
  border:1px solid var(--color-border);
}
.vm-card--vision{background:var(--color-surface-2);box-shadow:var(--shadow-sm)}
.vm-card--mission{
  background:linear-gradient(135deg,var(--color-teal) 0%,#0A2E2B 100%);
  color:#fff;border-color:transparent;
}
.vm-card-icon{
  width:52px;height:52px;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
}
.vm-card--vision .vm-card-icon{background:var(--color-teal-light);color:var(--color-teal)}
.vm-card--mission .vm-card-icon{background:rgba(255,255,255,0.15);color:var(--color-gold)}
.vm-card h3{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:0.08em}
.vm-card--vision h3{color:var(--color-teal)}
.vm-card--mission h3{color:var(--color-gold-mid)}
.vm-card p{line-height:1.8;font-size:var(--text-sm)}
.vm-card--vision p{color:var(--color-text-muted)}
.vm-card--mission p{color:rgba(255,255,255,0.82)}

/* ═══════════════════════════════════════
   DIVISIONS / TABS
   ═══════════════════════════════════════ */
.divisions-section{background:var(--color-bg)}

/* Tab bar — styled like the division brand cards in PDF */
.tab-bar{
  display:flex;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-8);
}
.tab-btn{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-lg);
  border:2px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text-muted);
  transition:all var(--t);
  min-width:140px;flex:1;
}
.tab-btn:hover{border-color:var(--color-teal);color:var(--color-text);box-shadow:var(--shadow-sm)}
.tab-btn.active{
  border-color:var(--color-teal);
  background:var(--color-teal);
  color:#fff;
  box-shadow:var(--shadow-md);
}
.tab-logo{display:flex;align-items:center;justify-content:center;width:36px;height:36px}
/* Real PNG mark in tab cards */
.tab-logo-img{
  width:36px;height:36px;
  object-fit:contain;
  display:block;
  transition:filter var(--t);
}
/* On active (teal) card, invert the teal icon to white */
.tab-btn.active .tab-logo-img{
  filter:brightness(0) invert(1);
}
.tab-label{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.tab-name{font-family:var(--font-display);font-size:0.75rem;letter-spacing:0.15em}
.tab-sub{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;opacity:0.8}
@media(max-width:640px){
  .tab-bar{gap:var(--sp-2)}
  .tab-btn{min-width:calc(50% - var(--sp-2));padding:var(--sp-3) var(--sp-3)}
}

.tab-panel{display:none}
.tab-panel.active{display:block}

/* Division header with logo lockup */
.division-header{
  display:flex;flex-direction:column;gap:var(--sp-3);
  margin-bottom:var(--sp-8);
  padding-bottom:var(--sp-6);
  border-bottom:1px solid var(--color-divider);
}
.division-logo-lockup{display:flex;align-items:center;gap:var(--sp-4)}
.div-logo-icon{width:52px;height:52px;flex-shrink:0}
/* Real division logo PNGs (Power + Advisory) */
.div-logo-img{
  height:80px;
  width:auto;
  display:block;
  max-width:320px;
  object-fit:contain;
}
.div-wordmark-top{
  display:block;
  font-family:var(--font-display);font-size:1.4rem;
  letter-spacing:0.1em;color:var(--color-text);line-height:1;
}
.div-wordmark-sub{
  display:block;
  font-family:var(--font-display);font-size:0.95rem;
  letter-spacing:0.18em;color:var(--color-text-muted);
  margin-top:2px;
}
.division-tagline{
  font-size:var(--text-lg);font-weight:600;
  color:var(--color-teal);line-height:1.35;max-width:70ch;
}

/* Full-width division hero image */
.division-hero-img-wrap{
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-lg);margin-bottom:var(--sp-10);
  position:relative;
}
.division-hero-img-wrap img{width:100%;height:420px;object-fit:cover}
.div-img-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:var(--sp-3) var(--sp-5);
  background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 100%);
  color:rgba(255,255,255,0.8);font-size:var(--text-xs);
  letter-spacing:0.08em;text-transform:uppercase;
}

/* Division body layout */
.division-body{display:flex;flex-direction:column;gap:var(--sp-8)}
.div-intro{display:flex;flex-direction:column;gap:var(--sp-4)}
.div-intro p{color:var(--color-text-muted);line-height:1.8}

/* KPI boxes */
.div-kpi-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--color-border);
  border:1px solid var(--color-border);border-radius:var(--r-xl);overflow:hidden;
}
.kpi-box{
  background:var(--color-surface);
  padding:var(--sp-6) var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.kpi-box span{
  font-family:var(--font-display);font-size:var(--text-xl);
  letter-spacing:0.05em;color:var(--color-teal);
}
.kpi-box small{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.07em}
@media(max-width:768px){.div-kpi-row{grid-template-columns:1fr 1fr}}

/* KPI strip (SPM) */
.kpi-strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--color-teal);border-radius:var(--r-xl);overflow:hidden;
}
.kpi-item{
  padding:var(--sp-6) var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-2);
  border-right:1px solid rgba(255,255,255,0.12);
}
.kpi-item:last-child{border-right:none}
.kpi-n{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:0.05em;color:var(--color-gold-mid)}
.kpi-l{font-size:var(--text-xs);color:rgba(255,255,255,0.65);text-transform:uppercase;letter-spacing:0.08em}
@media(max-width:640px){.kpi-strip{grid-template-columns:1fr}.kpi-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.12)}}

/* Block heading */
.block-heading{
  font-family:var(--font-display);font-size:var(--text-lg);
  letter-spacing:0.08em;color:var(--color-text);
  margin-bottom:var(--sp-5);
  padding-top:var(--sp-2);
}

/* Service/Capability cards */
.services-block{padding-top:var(--sp-4)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-4)}
.svc-card{
  padding:var(--sp-6);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--r-xl);
  display:flex;flex-direction:column;gap:var(--sp-3);
  transition:all var(--t);
}
.svc-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-teal);transform:translateY(-2px)}
.svc-card svg{stroke:var(--color-teal);flex-shrink:0}
.svc-card h5{font-size:var(--text-sm);font-weight:700;color:var(--color-text)}
.svc-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.65}

/* Two-column block */
.two-col-block{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);padding:var(--sp-4) 0}
@media(max-width:640px){.two-col-block{grid-template-columns:1fr}}
.two-col-block h4{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-gold);margin-bottom:var(--sp-4)}
.dash-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3)}
.dash-list li{
  padding-left:var(--sp-6);position:relative;
  font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.65;
}
.dash-list li::before{content:'—';position:absolute;left:0;color:var(--color-gold);font-weight:700}

/* Sectors grid */
.sectors-block{padding-top:var(--sp-4)}
.sectors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-4)}
.sectors-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.sector-item{padding:var(--sp-4) var(--sp-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.65}
.sector-item strong{color:var(--color-text)}
.sector-card{border-radius:var(--r-xl);overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);transition:all var(--t)}
.sector-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.sector-card img{width:100%;height:175px;object-fit:cover}
.sector-body{padding:var(--sp-5)}
.sector-body h5{font-size:var(--text-sm);font-weight:700;color:var(--color-text);margin-bottom:var(--sp-2)}
.sector-body p{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.65}

/* Power tech grid — 2x2 with images */
.power-tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-5)}
.power-tech-card{border-radius:var(--r-xl);overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);transition:all var(--t)}
.power-tech-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.ptc-img img{width:100%;height:200px;object-fit:cover}
.ptc-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.ptc-body h5{font-size:var(--text-base);font-weight:700;color:var(--color-text)}
.ptc-body>p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.65}
.dot-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.dot-list li{font-size:var(--text-xs);color:var(--color-text-muted);padding-left:var(--sp-4);position:relative}
.dot-list li::before{content:'·';position:absolute;left:0;color:var(--color-gold);font-size:1.2em;line-height:1.2}

/* Water imagery grid */
.water-img-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3);border-radius:var(--r-xl);overflow:hidden;
}
.water-img-grid img{width:100%;height:200px;object-fit:cover}
@media(max-width:640px){
  .water-img-grid{grid-template-columns:1fr}
  .water-img-grid img{height:200px}
}

/* Track record table */
.track-block{padding-top:var(--sp-4)}
.track-table{display:flex;flex-direction:column;gap:1px}
.tr-row{
  display:grid;grid-template-columns:200px 1fr;
  gap:var(--sp-4);align-items:start;
  padding:var(--sp-4) var(--sp-4);
  border-radius:var(--r-md);
  transition:background var(--t);
}
.tr-row:hover{background:var(--color-offset)}
.tr-prog{font-size:var(--text-xs);font-weight:700;color:var(--color-teal);text-transform:uppercase;letter-spacing:0.06em;padding-top:2px}
.tr-desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}
@media(max-width:640px){.tr-row{grid-template-columns:1fr;gap:var(--sp-1)}}

/* Project feature */
.project-feature{padding-top:var(--sp-4)}
.project-layout{
  display:grid;grid-template-columns:320px 1fr;gap:var(--sp-8);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--r-xl);overflow:hidden;
}
@media(max-width:768px){.project-layout{grid-template-columns:1fr}}
.project-img{width:100%;height:280px;object-fit:cover}
.project-info{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.project-sub{font-size:var(--text-xs);color:var(--color-gold);text-transform:uppercase;letter-spacing:0.1em;font-weight:600}
.project-info>p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.75}
.proj-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--sp-4);margin-top:var(--sp-4);
}
@media(max-width:640px){.proj-stats{grid-template-columns:repeat(2,1fr)}}
.proj-stats>div{display:flex;flex-direction:column;gap:2px}
.proj-stats strong{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:0.04em;color:var(--color-teal)}
.proj-stats span{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em}

/* Future banner (Recycling) */
.future-banner{
  background:linear-gradient(135deg,var(--color-teal) 0%,#0A2E2B 100%);
  border-radius:var(--r-2xl);padding:var(--sp-10) var(--sp-12);color:#fff;
}
.future-banner h4{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:0.06em;color:#fff;margin-bottom:var(--sp-3)}
.future-banner>p{color:rgba(255,255,255,0.78);margin-bottom:var(--sp-8);max-width:65ch}
.future-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
@media(max-width:640px){.future-cols{grid-template-columns:1fr}}
.future-cols>div{background:rgba(255,255,255,0.08);border-radius:var(--r-lg);padding:var(--sp-5)}
.future-cols strong{display:block;color:var(--color-gold-mid);margin-bottom:var(--sp-2);font-size:var(--text-sm)}
.future-cols p{color:rgba(255,255,255,0.72);font-size:var(--text-sm);line-height:1.65}

/* ═══════════════════════════════════════
   FOUNDER
   ═══════════════════════════════════════ */
.founder-section{background:var(--color-surface)}
.founder-layout{display:grid;grid-template-columns:380px 1fr;gap:clamp(var(--sp-10),5vw,var(--sp-16));align-items:start}
@media(max-width:900px){.founder-layout{grid-template-columns:1fr}}

.founder-photo-wrap{
  border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--shadow-lg);
  border:4px solid var(--color-gold);
}
.founder-photo-wrap img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top}

.founder-cred-box{
  margin-top:var(--sp-6);background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:var(--r-xl);overflow:hidden;
}
.fc-row{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-divider);display:flex;flex-direction:column;gap:2px}
.fc-row:last-child{border-bottom:none}
.fc-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.1em;color:var(--color-gold);font-weight:600}
.fc-val{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.55}

.founder-bio{display:flex;flex-direction:column;gap:var(--sp-5)}
.founder-name{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:0.04em;color:var(--color-text)}
.founder-title{font-size:var(--text-sm);color:var(--color-gold);font-weight:700;text-transform:uppercase;letter-spacing:0.1em}
.founder-lead{font-size:var(--text-lg);color:var(--color-teal);font-weight:600;line-height:1.5}
.founder-bio p{color:var(--color-text-muted);line-height:1.8}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.chip{
  padding:var(--sp-2) var(--sp-4);background:var(--color-teal-light);
  color:var(--color-teal);border-radius:var(--r-full);
  font-size:var(--text-xs);font-weight:600;
}

/* ═══════════════════════════════════════
   CLIENTS
   ═══════════════════════════════════════ */
.clients-section{background:var(--color-bg)}
.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-4)}
.client-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--sp-5) var(--sp-4);gap:var(--sp-3);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--r-xl);text-align:center;
  min-height:110px;
  transition:all var(--t);
}
.client-tile img{
  max-width:140px;max-height:60px;width:auto;height:auto;
  object-fit:contain;filter:grayscale(30%);opacity:0.85;
  transition:all var(--t);
}
.client-tile:hover img{filter:grayscale(0%);opacity:1;}
.client-tile span{
  font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);
  line-height:1.2;text-align:center;
}
.client-tile:hover{border-color:var(--color-teal);background:var(--color-teal-light);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.client-tile:hover span{color:var(--color-teal)}

/* ═══════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════ */
.contact-section{background:var(--color-teal);color:var(--color-text-inv)}
[data-theme='dark'] .contact-section{background:#0A2019}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--sp-10),6vw,var(--sp-20));align-items:start}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}
.contact-text-col p{color:rgba(255,255,255,0.78);line-height:1.8;margin-top:var(--sp-5);max-width:45ch}
.contact-details-col{display:flex;flex-direction:column;gap:var(--sp-6)}
.c-item{display:flex;gap:var(--sp-4);align-items:flex-start}
.c-item svg{flex-shrink:0;stroke:var(--color-gold);margin-top:2px}
.c-item>div{display:flex;flex-direction:column;gap:2px}
.c-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.5);font-weight:600}
.c-val{font-size:var(--text-sm);color:#fff;line-height:1.6}
.c-val a{color:#fff}
.c-val a:hover{color:var(--color-gold)}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.site-footer{background:#0D1310;color:rgba(255,255,255,0.55);padding-block:var(--sp-16)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:var(--sp-10);margin-bottom:var(--sp-10)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-brand p{font-size:var(--text-sm);margin-top:var(--sp-4);max-width:30ch}
.footer-col h4,.footer-contact-col h4{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:#fff;margin-bottom:var(--sp-5)}
.footer-col ul{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer-col a{font-size:var(--text-sm);color:rgba(255,255,255,0.5);transition:color var(--t)}
.footer-col a:hover{color:var(--color-gold)}
.footer-contact-col p{font-size:var(--text-sm);line-height:1.7;margin-bottom:var(--sp-3)}
.footer-contact-col a{display:block;font-size:var(--text-sm);color:rgba(255,255,255,0.5);margin-top:var(--sp-2)}
.footer-contact-col a:hover{color:var(--color-gold)}
.footer-bottom{padding-top:var(--sp-8);border-top:1px solid rgba(255,255,255,0.08);font-size:var(--text-xs);color:rgba(255,255,255,0.3)}