/* ============================================================
   SAMYAK ENERGY — Design System
   Engineering-driven, blueprint-inspired, navy/green brand system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Brand */
  --navy-900:#071C3C;
  --navy-800:#0A2A54;
  --navy-700:#0E3D7B;
  --navy-600:#154E97;
  --navy-050:#EAF0FA;

  --green-700:#2B5A1E;
  --green-600:#3E7A2E;
  --green-500:#4F9639;
  --green-050:#EBF4E7;

  --amber-600:#C88826;
  --amber-500:#E2A63B;
  --amber-050:#FBF1DE;

  --ink-900:#0B1220;
  --ink-700:#2B3648;
  --ink-500:#5B677A;
  --ink-400:#7C8798;

  --paper-0:#FFFFFF;
  --paper-50:#F7F9FC;
  --paper-100:#EEF2F8;
  --line-200:#DFE6F0;
  --line-300:#C7D2E2;

  --danger:#C0392B;
  --success:#2B5A1E;

  /* Typography */
  --font-head:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;

  /* Spacing scale */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-8:3rem; --space-10:4rem;
  --space-12:5rem; --space-16:7rem;

  /* Layout */
  --container:1200px;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(11,18,32,.06), 0 1px 1px rgba(11,18,32,.04);
  --shadow-md:0 8px 24px rgba(11,18,32,.08), 0 2px 6px rgba(11,18,32,.05);
  --shadow-lg:0 24px 60px rgba(7,28,60,.16), 0 6px 16px rgba(7,28,60,.08);

  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur-1:150ms; --dur-2:250ms; --dur-3:400ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--ink-700);
  background:var(--paper-0);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul,ol{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4,p,figure{margin:0;}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit;}
input,textarea,select{font:inherit;}

h1,h2,h3,h4{font-family:var(--font-head); color:var(--navy-900); font-weight:600; line-height:1.15; letter-spacing:-.01em;}
h1{font-size:clamp(2.25rem,4.2vw,3.75rem); font-weight:700; letter-spacing:-.02em;}
h2{font-size:clamp(1.75rem,3vw,2.5rem);}
h3{font-size:clamp(1.25rem,1.8vw,1.5rem);}
h4{font-size:1.05rem;}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--ink-500); line-height:1.6;}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--amber-500); outline-offset:2px; border-radius:4px;
}

/* ---------- Layout helpers ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5);}
@media (min-width:768px){ .container{padding-inline:var(--space-8);} }
section{position:relative;}
.section{padding-block:var(--space-12);}
.section-tight{padding-block:var(--space-10);}
@media (max-width:767px){ .section{padding-block:var(--space-10);} .section-tight{padding-block:var(--space-8);} }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--green-600);
  margin-bottom:var(--space-4);
}
.eyebrow::before{content:''; width:26px; height:3px; background:var(--amber-500); display:inline-block; border-radius:2px;}

.section-head{max-width:720px; margin-bottom:var(--space-8);}
.section-head.center{margin-inline:auto; text-align:center;}

/* Blueprint grid background */
.blueprint-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
}

/* Corner registration marks — technical-drawing accent */
.corner-marks{position:absolute; inset:var(--space-5); z-index:0; pointer-events:none; opacity:.5; color:var(--line-300);}
.corner-marks::before,.corner-marks::after,.corner-marks i::before,.corner-marks i::after{content:''; position:absolute; width:22px; height:22px; border:1.5px solid currentColor;}
.corner-marks::before{top:0; left:0; border-right:none; border-bottom:none;}
.corner-marks::after{top:0; right:0; border-left:none; border-bottom:none;}
.corner-marks i::before{bottom:0; left:0; border-right:none; border-top:none;}
.corner-marks i::after{bottom:0; right:0; border-left:none; border-top:none;}
.page-hero-photo .corner-marks{z-index:2; color:rgba(255,255,255,.4);}

/* Spec grid — coverage / included items as bordered cards */
.spec-grid{display:grid; grid-template-columns:1fr; gap:.85rem;}
@media (min-width:560px){ .spec-grid{grid-template-columns:1fr 1fr;} }
.spec-item{
  position:relative; display:flex; gap:.75rem; align-items:center;
  padding:.9rem 1.1rem; background:var(--paper-0); border:1px solid var(--line-200); border-radius:var(--radius-md);
  font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--navy-800);
  transition:border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.spec-item:hover{border-color:var(--green-500); transform:translateY(-3px); box-shadow:var(--shadow-sm); background:var(--green-050);}
.spec-item .spec-check{
  width:26px; height:26px; border-radius:50%; background:var(--green-050); color:var(--green-600); flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--green-500);
}
.spec-item .spec-check svg{width:13px; height:13px;}

/* Detail list — dot-marker cards for "title — description" style items */
.detail-list{display:grid; gap:var(--space-4); margin-top:var(--space-5);}
.detail-item{
  position:relative; padding:1rem 1.2rem 1rem 3rem; border:1px solid var(--line-200); border-radius:var(--radius-md); background:var(--paper-0);
  transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.detail-item:hover{border-color:var(--green-500); box-shadow:var(--shadow-sm); transform:translateX(3px);}
.detail-item::before{content:''; position:absolute; left:1.15rem; top:1.4rem; width:9px; height:9px; border-radius:50%; background:var(--green-500); box-shadow:0 0 0 4px var(--green-050);}
.detail-item h4{font-size:.98rem; margin-bottom:.3rem; color:var(--navy-900);}
.detail-item p{color:var(--ink-500); font-size:.92rem; margin:0;}

/* ---------- Service detail page — unified two-column layout ----------
   Every dedicated service page (energy-audits.html, etc.) shares this exact
   structure: a wide left column (Service Overview + Key Benefits cards) and
   a narrow right column (Get Started + Service Details + Related Services
   cards), followed by a full-width CTA band. Keep all 8 pages in lockstep
   with this component set rather than one-off markup per page. */
.svc-grid{display:grid; gap:var(--space-6);}
@media (min-width:900px){ .svc-grid{grid-template-columns:1.7fr 1fr; align-items:start; gap:var(--space-8);} }
.svc-col-main,.svc-col-side{display:grid; gap:var(--space-6);}

.svc-heading{
  display:inline-block; text-decoration:underline; text-decoration-color:var(--green-500);
  text-decoration-thickness:2px; text-underline-offset:7px;
}

.svc-card-cta .btn{margin-top:var(--space-5);}
.svc-card-cta .call-line{margin-top:var(--space-4); font-size:.88rem; color:var(--ink-500); text-align:center;}
.svc-card-cta .call-line a{color:var(--navy-800); font-weight:600;}

.detail-rows{display:grid; gap:var(--space-4);}
.detail-row{padding-top:var(--space-4); border-top:1px solid var(--line-200);}
.detail-row:first-child{padding-top:0; border-top:none;}
.detail-row .label{display:block; font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-400); margin-bottom:.3rem;}
.detail-row .value{display:block; font-family:var(--font-head); font-weight:600; color:var(--navy-900); font-size:1.02rem;}

.related-mini{display:grid; gap:.7rem;}
.related-mini a{
  display:block; padding:.9rem 1rem; border:1px solid var(--line-200); border-radius:var(--radius-md); background:var(--paper-50);
  transition:border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.related-mini a:hover{border-color:var(--green-500); background:var(--green-050); transform:translateX(3px);}
.related-mini h4{font-size:.92rem; margin-bottom:.25rem; color:var(--navy-900);}
.related-mini p{font-size:.82rem; color:var(--ink-500); margin:0; line-height:1.5;}

/* Service CTA band */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:linear-gradient(160deg, var(--navy-800), var(--navy-900) 75%);
  color:#fff; padding:var(--space-10) var(--space-8); text-align:center;
}
.cta-band .blueprint-bg{opacity:.8;}
.cta-band::after{
  content:''; position:absolute; z-index:0; right:-15%; bottom:-35%; width:55%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(79,150,57,.3), transparent 70%); filter:blur(20px);
}
.cta-band > *{position:relative; z-index:1;}
.cta-band .eyebrow{justify-content:center; color:var(--amber-500);}
.cta-band .eyebrow::before{background:var(--green-500);}
.cta-band h2{color:#fff; max-width:26ch; margin-inline:auto;}
.cta-band p{color:rgba(255,255,255,.72); max-width:52ch; margin:var(--space-3) auto 0;}
.cta-band-actions{display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; margin-top:var(--space-6);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.6rem; border-radius:var(--radius-pill);
  font-family:var(--font-head); font-weight:600; font-size:.95rem;
  min-height:48px; white-space:nowrap;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  border:2px solid transparent;
}
.btn svg{width:18px; height:18px; flex:none;}
.btn-primary{background:var(--green-600); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--green-700); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-primary:active{transform:translateY(0);}
.btn-outline-light{border-color:rgba(255,255,255,.55); color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px);}
.btn-outline-navy{border-color:var(--line-300); color:var(--navy-800);}
.btn-outline-navy:hover{border-color:var(--navy-700); background:var(--navy-050); transform:translateY(-2px);}
.btn-navy{background:var(--navy-700); color:#fff;}
.btn-navy:hover{background:var(--navy-800); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6; cursor:not-allowed; transform:none !important;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  padding-block:var(--space-4);
  transition:background var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), padding var(--dur-3) var(--ease-out), backdrop-filter var(--dur-3) var(--ease-out);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);}
.site-header.is-scrolled{
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-200), var(--shadow-sm); padding-block:.7rem;
}
.brand{display:flex; align-items:center; gap:.75rem; font-family:var(--font-head); font-weight:700; font-size:1.4rem; color:#fff; transition:color var(--dur-2);}
.brand img{width:38px; height:38px;}
.site-header.is-scrolled .brand{color:var(--navy-900);}

/* Logo mark: always the full-colour brand mark. While the header floats
   transparently over a dark hero, it sits on a small light chip so it keeps
   enough contrast; once the header gets its own light, scrolled background
   the chip is no longer needed and fades away. */
.brand-mark{
  position:relative; display:flex; align-items:center; justify-content:center; flex:none;
  width:52px; height:44px; padding:.3rem; border-radius:var(--radius-sm);
  background:var(--paper-0); box-shadow:var(--shadow-sm);
  transition:background var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), padding var(--dur-3) var(--ease-out);
}
.brand-mark img{width:100%; height:100%; object-fit:contain; display:block;}
.site-header.is-scrolled .brand-mark{background:transparent; box-shadow:none; padding:0;}

.nav-links{display:none; align-items:center; gap:var(--space-6);}
.nav-links a{
  font-weight:600; font-size:.92rem; color:rgba(255,255,255,.88);
  position:relative; padding-block:.3rem; transition:color var(--dur-2);
}
.nav-links a::after{content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--amber-500); transition:right var(--dur-2) var(--ease-out); border-radius:2px;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff;}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0;}
.site-header.is-scrolled .nav-links a{color:var(--ink-700);}
.site-header.is-scrolled .nav-links a:hover,.site-header.is-scrolled .nav-links a[aria-current="page"]{color:var(--navy-900);}

.nav-cta{display:none;}
.nav-actions{display:flex; align-items:center; gap:var(--space-4);}

/* Services nav dropdown (desktop) */
.nav-item{position:relative;}
.nav-item > a{display:inline-flex; align-items:center; gap:.35rem;}
.nav-item .nav-chev{width:13px; height:13px; transition:transform var(--dur-2) var(--ease-out);}
.nav-item:hover .nav-chev,.nav-item:focus-within .nav-chev{transform:rotate(180deg);}
.nav-dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:320px; background:var(--paper-0); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  border:1px solid var(--line-200); background-clip:padding-box;
  padding:calc(var(--space-3) + 16px) var(--space-3) var(--space-3); margin-top:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);
  z-index:10;
}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1; visibility:visible; pointer-events:auto;}
.nav-dropdown a,.site-header.is-scrolled .nav-dropdown a{position:static; color:var(--ink-700); font-weight:500; font-size:.88rem; display:block; padding:.6rem .85rem; border-radius:var(--radius-sm);}
.nav-dropdown a::after{content:none;}
.nav-dropdown a:hover,.site-header.is-scrolled .nav-dropdown a:hover{color:var(--navy-900); background:var(--paper-50);}
.nav-dropdown a[aria-current="page"],.site-header.is-scrolled .nav-dropdown a[aria-current="page"]{background:var(--green-050); color:var(--green-700); font-weight:700;}
.mobile-nav-panel a[aria-current="page"]{color:#fff;}
.nav-dropdown-viewall,.site-header.is-scrolled .nav-dropdown-viewall{margin-top:var(--space-2); padding-top:var(--space-3); border-top:1px solid var(--line-200); font-weight:700 !important; color:var(--green-600) !important;}

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; border-radius:var(--radius-sm); flex:none;
}
.nav-toggle span{width:22px; height:2px; background:#fff; border-radius:2px; transition:transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), background var(--dur-2);}
.site-header.is-scrolled .nav-toggle span{background:var(--navy-900);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  position:fixed; inset:0; top:0; z-index:99; background:var(--navy-900);
  display:flex; flex-direction:column; padding:6.5rem var(--space-6) var(--space-8);
  transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.mobile-nav.is-open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
.mobile-nav{overflow-y:auto;}
.mobile-nav a{display:block; font-family:var(--font-head); font-size:1.5rem; font-weight:600; color:#fff; padding-block:var(--space-3); border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-nav .btn{margin-top:var(--space-6);}

.mobile-nav-group{border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-nav-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  font-family:var(--font-head); font-size:1.5rem; font-weight:600; color:#fff; padding-block:var(--space-3);
}
.mobile-nav-trigger .chev{width:20px; height:20px; flex:none; transition:transform var(--dur-2) var(--ease-out);}
.mobile-nav-group.is-open .mobile-nav-trigger .chev{transform:rotate(180deg);}
.mobile-nav-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-3) var(--ease-out);}
.mobile-nav-group.is-open .mobile-nav-panel{grid-template-rows:1fr;}
.mobile-nav-panel-inner{overflow:hidden;}
.mobile-nav-panel a{font-family:var(--font-body); font-size:1.02rem; font-weight:500; color:rgba(255,255,255,.72); padding-block:var(--space-2); border-bottom:none;}
.mobile-nav-panel a:last-child{padding-bottom:var(--space-4);}

@media (min-width:1024px){
  .nav-links{display:flex;}
  .nav-cta{display:inline-flex;}
  .nav-toggle{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--navy-900);
  color:#fff; padding-top:9.5rem; padding-bottom:var(--space-12); overflow:hidden;
}
.hero-photo{position:absolute; inset:0; z-index:0;}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center 60%;}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(115deg, rgba(7,28,60,.94) 0%, rgba(7,28,60,.88) 32%, rgba(9,36,75,.72) 55%, rgba(14,61,123,.5) 78%, rgba(14,61,123,.38) 100%);
}
.hero::after{content:''; position:absolute; z-index:1; right:-10%; bottom:-30%; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(79,150,57,.3), transparent 70%); filter:blur(10px);}
.hero .blueprint-bg{z-index:2;}
.hero-grid{display:grid; gap:var(--space-10); position:relative; z-index:3;}
.hero-copy{max-width:800px;}
.hero-copy .eyebrow{color:var(--amber-500);}
.hero-copy .eyebrow::before{background:var(--green-500);}
.hero h1{color:#fff;}
.hero .lede{color:rgba(255,255,255,.78); max-width:56ch; margin-top:var(--space-4);}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-6);}
.hero-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); margin-top:var(--space-10); padding-top:var(--space-8); border-top:1px solid rgba(255,255,255,.16);}
.hero-stat b{display:block; font-family:var(--font-head); font-size:clamp(1.6rem,3vw,2.1rem); color:#fff;}
.hero-stat > span{font-size:.85rem; color:rgba(255,255,255,.65);}

.page-hero{
  position:relative; background:linear-gradient(160deg, var(--navy-800), var(--navy-900) 70%); color:#fff;
  padding:9.5rem 0 var(--space-10); overflow:hidden;
}
.page-hero .eyebrow{color:var(--amber-500);}
.page-hero .eyebrow::before{background:var(--green-500);}
.page-hero h1{color:#fff; max-width:16ch;}
.page-hero .lede{color:rgba(255,255,255,.78); max-width:60ch; margin-top:var(--space-4);}
.breadcrumb{display:flex; gap:.4rem; align-items:center; font-size:.82rem; color:rgba(255,255,255,.6); margin-bottom:var(--space-4);}
.breadcrumb a:hover{color:#fff;}

.page-hero-photo{background:var(--navy-900);}
.page-hero-photo .blueprint-bg{z-index:2;}
.page-hero-photo .container{position:relative; z-index:3;}

@media (min-width:640px){
  .hero-stats{grid-template-columns:repeat(3,1fr);}
}

/* ---------- Marquee ---------- */
.marquee-wrap{background:var(--navy-050); padding-block:var(--space-6); overflow:hidden; border-block:1px solid var(--line-200);}
.marquee-label{font-family:var(--font-head); font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); text-align:center; margin-bottom:var(--space-4);}
.marquee-track{display:flex; width:max-content; gap:var(--space-6); animation:marquee 32s linear infinite;}
.marquee-wrap:hover .marquee-track,.marquee-wrap:focus-within .marquee-track{animation-play-state:paused;}
.marquee-item{display:flex; align-items:center;}

/* Logo chip: uniform white tile so logos of wildly different source
   formats/aspect ratios/backgrounds still line up cleanly together. */
.logo-chip{
  background:var(--paper-0); border:1px solid var(--line-200); border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; flex:none;
  height:56px; padding:.6rem 1.2rem; box-shadow:var(--shadow-sm);
}
.logo-chip img,.logo-chip svg{max-height:100%; max-width:132px; width:auto; height:auto; object-fit:contain;}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none; flex-wrap:wrap;} }

/* ---------- Cards ---------- */
.card{
  background:var(--paper-0); border:1px solid var(--line-200); border-radius:var(--radius-lg);
  padding:var(--space-6); transition:transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3);
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent;}
.card-icon{
  width:52px; height:52px; border-radius:var(--radius-md); background:var(--green-050); color:var(--green-600);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-5); flex:none;
}
.card-icon svg{width:26px; height:26px;}
.avatar-photo{
  width:76px; height:76px; border-radius:50%; object-fit:cover; margin-bottom:var(--space-5);
  border:3px solid var(--paper-0); box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:var(--space-3);}
.card p{color:var(--ink-500);}

.grid{display:grid; gap:var(--space-6);}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
@media (min-width:640px){ .grid-2{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} }

/* Technical Leadership — profile card */
.leader-card{
  display:grid; grid-template-columns:1fr; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-200); box-shadow:var(--shadow-lg); background:var(--paper-0);
}
@media (min-width:900px){ .leader-card{grid-template-columns:.85fr 1.15fr;} }

.leader-photo-panel{
  position:relative; overflow:hidden; text-align:center;
  padding:var(--space-10) var(--space-6) var(--space-8);
  background:linear-gradient(160deg, var(--navy-900), var(--navy-800));
  display:flex; flex-direction:column; align-items:center;
}
.leader-photo-panel::after{
  content:''; position:absolute; z-index:0; right:-20%; bottom:-30%; width:70%; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle, rgba(79,150,57,.35), transparent 70%); filter:blur(18px);
}
.leader-photo-panel .blueprint-bg{opacity:.7;}

.leader-photo-frame{
  position:relative; z-index:1; width:164px; height:164px; border-radius:50%; padding:5px; flex:none;
  background:linear-gradient(135deg, var(--amber-500), var(--green-500));
  box-shadow:0 14px 32px rgba(0,0,0,.35); margin-bottom:var(--space-5);
  transition:transform var(--dur-3) var(--ease-out);
}
.leader-photo-frame:hover{transform:scale(1.04) rotate(-1deg);}
.leader-photo-frame picture,.leader-photo-frame img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; border:4px solid var(--navy-900);}

.leader-name{position:relative; z-index:1; color:#fff; font-size:1.45rem; margin-bottom:.2rem;}
.leader-role{position:relative; z-index:1; color:rgba(255,255,255,.62); font-size:.9rem; margin-bottom:var(--space-5);}
.leader-badges{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;}
.leader-badge{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .95rem; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff;
  font-size:.76rem; font-weight:600; letter-spacing:.01em; backdrop-filter:blur(6px);
}
.leader-badge::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--amber-500); flex:none;}

.leader-content{padding:var(--space-8) var(--space-6);}
@media (min-width:640px){ .leader-content{padding:var(--space-8);} }
.leader-bio{color:var(--ink-500); font-size:1.02rem; line-height:1.7;}

.leader-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3);
  margin:var(--space-6) 0; padding:var(--space-5) 0;
  border-top:1px solid var(--line-200); border-bottom:1px solid var(--line-200);
}
.leader-stat{text-align:center;}
.leader-stat b{display:block; font-family:var(--font-head); font-size:1.5rem; color:var(--navy-900);}
.leader-stat > span{font-size:.74rem; color:var(--ink-400); line-height:1.3;}

.leader-expertise-title{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-400); margin-bottom:var(--space-3);}
.leader-expertise{display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:var(--space-6);}
.expertise-chip{
  display:inline-flex; align-items:center; padding:.5rem 1rem; border-radius:var(--radius-pill);
  background:var(--green-050); color:var(--green-700); font-size:.85rem; font-weight:600;
  border:1px solid transparent; cursor:default;
  transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.expertise-chip:hover{background:var(--green-600); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm);}

.leader-credentials-logos{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-4);}
.leader-footnote{font-size:.82rem; color:var(--ink-400); line-height:1.6; padding-top:var(--space-4); border-top:1px solid var(--line-200);}

/* Services scroller (homepage "What We Do") */
.services-scroller-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--line-300) transparent;
  margin-inline:calc(var(--space-5) * -1); padding-inline:var(--space-5);
}
@media (min-width:768px){ .services-scroller-wrap{margin-inline:calc(var(--space-8) * -1); padding-inline:var(--space-8);} }
.services-scroller{display:flex; gap:var(--space-6); padding-block:.5rem var(--space-5); scroll-snap-type:x proximity;}
.service-card{
  flex:0 0 290px; scroll-snap-align:start; border-radius:var(--radius-lg); padding:var(--space-8) var(--space-6);
  color:#fff; position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:340px;
  background-size:cover; background-position:center; background-color:var(--navy-800);
  transition:transform var(--dur-3) var(--ease-out);
}
.service-card:hover{transform:translateY(-6px);}
.service-card::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(7,28,60,.62) 0%, rgba(7,28,60,.72) 45%, rgba(7,28,60,.94) 100%);
}
.service-card > *{position:relative; z-index:1;}
.service-card .num{font-family:var(--font-head); font-size:.8rem; letter-spacing:.1em; opacity:.85; text-transform:uppercase;}
.service-card h3{color:#fff; margin-block:var(--space-4) var(--space-3); font-size:1.2rem;}
.service-card p{color:rgba(255,255,255,.88); font-size:.92rem; flex:1;}
.service-card-link{display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--space-5); font-family:var(--font-head); font-weight:600; font-size:.88rem; color:#fff;}
.service-card-link svg{width:16px; height:16px; transition:transform var(--dur-2) var(--ease-out);}
.service-card:hover .service-card-link svg{transform:translateX(4px);}
.service-card-more{background:var(--paper-50); border:2px dashed var(--line-300); color:var(--navy-800); align-items:center; justify-content:center; text-align:center;}
.service-card-more::before{content:none;}
.service-card-more svg{width:32px; height:32px; color:var(--green-600); margin-bottom:var(--space-4);}
.service-card-more h3{color:var(--navy-900);}
.service-card-more p{color:var(--ink-500); flex:none;}

/* Service blocks (services.html image cards) */
.service-block{display:block; border-radius:var(--radius-lg); overflow:hidden; background:var(--paper-0); border:1px solid var(--line-200); box-shadow:var(--shadow-sm); transition:transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);}
.service-block:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.service-block-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--navy-050);}
.service-block-media img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-3) var(--ease-out);}
.service-block:hover .service-block-media img{transform:scale(1.06);}
.service-block-letter{
  position:absolute; top:var(--space-4); left:var(--space-4); width:36px; height:36px; border-radius:50%;
  background:rgba(7,28,60,.82); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:.88rem;
}
.service-block-body{padding:var(--space-6);}
.service-block-body h3{margin-bottom:var(--space-3); font-size:1.15rem;}
.service-block-body p{color:var(--ink-500); font-size:.92rem; margin-bottom:var(--space-4);}
.service-block-link{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-head); font-weight:600; font-size:.88rem; color:var(--green-600);}
.service-block-link svg{width:16px; height:16px; transition:transform var(--dur-2) var(--ease-out);}
.service-block:hover .service-block-link svg{transform:translateX(4px);}

/* Certificate thumbnails (certificates.html) */
.cert-thumb{
  display:flex; align-items:center; justify-content:center; aspect-ratio:3/4; background:var(--paper-50);
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line-200); box-shadow:var(--shadow-sm);
  margin-bottom:var(--space-6); transition:box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.cert-thumb:hover{box-shadow:var(--shadow-lg); transform:translateY(-4px);}
.cert-thumb img{width:100%; height:100%; object-fit:contain; display:block;}

/* Related-service chips (service detail pages) */
.service-related{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--space-5);}
.service-related a{font-size:.85rem; font-weight:600; padding:.55rem 1.1rem; border-radius:var(--radius-pill); background:var(--navy-050); color:var(--navy-800); transition:background var(--dur-2), color var(--dur-2);}
.service-related a:hover{background:var(--green-600); color:#fff;}

/* Quote block */
.quote-block{
  border-radius:var(--radius-lg); background:var(--navy-900); color:#fff; padding:var(--space-10) var(--space-8);
  position:relative; overflow:hidden; text-align:center;
}
.quote-block::before{content:'\201C'; position:absolute; top:-1.2rem; left:1.5rem; font-family:var(--font-head); font-size:9rem; color:rgba(255,255,255,.06); line-height:1;}
.quote-block p{font-family:var(--font-head); font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:600; max-width:44ch; margin-inline:auto; position:relative;}
.quote-block cite{display:block; margin-top:var(--space-4); font-style:normal; color:var(--amber-500); font-weight:600; font-size:.9rem;}

/* Value / principle rows */
.principle{
  display:grid; gap:var(--space-4); padding:var(--space-6) 0; border-bottom:1px solid var(--line-200);
}
.principle:last-child{border-bottom:none;}
.principle-head{display:flex; align-items:center; gap:var(--space-4);}
.principle-head .idx{font-family:var(--font-head); font-weight:700; color:var(--line-300); font-size:1.6rem; flex:none; width:2.4ch;}
.principle p{color:var(--ink-500); margin-left:calc(2.4ch + var(--space-4));}
@media (min-width:768px){
  .principle{grid-template-columns:280px 1fr; align-items:start;}
  .principle p{margin-left:0;}
}

/* Table */
.table-scroll{overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--line-200); box-shadow:var(--shadow-sm);}
table{width:100%; border-collapse:collapse; min-width:640px;}
thead th{
  background:var(--navy-900); color:#fff; text-align:left; font-family:var(--font-head); font-weight:600;
  font-size:.85rem; letter-spacing:.02em; padding:var(--space-4) var(--space-5); position:sticky; top:0;
}
tbody td{padding:var(--space-4) var(--space-5); border-top:1px solid var(--line-200); color:var(--ink-500); vertical-align:top;}
tbody tr:nth-child(even){background:var(--paper-50);}
tbody td:first-child{font-weight:600; color:var(--navy-800); white-space:nowrap;}


/* Tick list */
.tick-item{position:relative; padding-left:1.9rem; color:var(--ink-500); font-size:.96rem;}
.tick-item::before{
  content:''; position:absolute; left:0; top:.15em; width:20px; height:20px; border-radius:50%;
  background:var(--green-050); box-shadow:inset 0 0 0 1px var(--green-500);
}
.tick-item::after{
  content:''; position:absolute; left:6px; top:.5em; width:8px; height:4px; border-left:2px solid var(--green-600); border-bottom:2px solid var(--green-600); transform:rotate(-45deg);
}

/* Our Approach — 4-step scroll-driven rail */
.approach-rail{
  position:relative; display:flex; flex-direction:column; gap:var(--space-10);
  padding-left:60px;
}
.approach-line{
  position:absolute; left:19px; top:4px; bottom:4px; width:3px;
  background:var(--line-200); border-radius:2px; overflow:hidden;
}
.approach-line-fill{
  display:block; width:100%; height:0; background:linear-gradient(var(--green-600), var(--green-500));
  border-radius:2px;
}
.step{position:relative;}
.step-num{
  position:absolute; left:-60px; top:0; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-0); border:2px solid var(--line-300); color:var(--ink-400);
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  transition:background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.step-media{
  border-radius:var(--radius-md); overflow:hidden; margin-bottom:var(--space-4);
  aspect-ratio:16/10; box-shadow:var(--shadow-sm);
}
.step-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(65%) brightness(.92); transform:scale(1.04);
  transition:filter var(--dur-3) var(--ease-out), transform 600ms var(--ease-out);
}
.step-content h3{font-size:1.15rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem;}
.step-content .step-sub{color:var(--green-600); font-weight:700; font-size:.92rem; margin-bottom:var(--space-2);}
.step-content p:not(.step-sub){color:var(--ink-500);}
.step.is-active .step-num{background:var(--green-600); border-color:var(--green-600); color:#fff; transform:scale(1.12);}
.step.is-active .step-media img{filter:none; transform:scale(1);}
.step:hover .step-media img{transform:scale(1.06);}

@media (min-width:900px){
  .approach-rail{flex-direction:row; align-items:flex-start; gap:var(--space-6); padding-left:0; padding-top:40px;}
  .approach-line{left:12.5%; right:12.5%; top:20px; bottom:auto; width:auto; height:3px;}
  .approach-line-fill{width:0; height:100%;}
  .step{flex:1; display:flex; flex-direction:column; align-items:center; padding-left:0;}
  .step-num{position:static; margin-bottom:var(--space-4);}
  .step-media{align-self:stretch;}
  .step-content{align-self:stretch; text-align:left;}
}
@media (prefers-reduced-motion: reduce){
  .step-media img{filter:none; transform:none;}
}

/* Footer */
.site-footer{background:var(--navy-900); color:rgba(255,255,255,.72); padding-top:var(--space-12);}
.footer-grid{display:grid; gap:var(--space-8); padding-bottom:var(--space-10); border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand .brand{color:#fff;}
.footer-brand p{margin-top:var(--space-4); max-width:34ch; color:rgba(255,255,255,.6);}
/* Footer sits on a permanently dark background, so the full-colour logo
   mark always needs its light chip (unlike the header, it never gets a
   light background of its own to fall back on). */
.footer-logo-chip{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:32px; padding:.25rem; border-radius:var(--radius-sm);
  background:var(--paper-0); box-shadow:var(--shadow-sm);
}
.footer-logo-chip img{width:100%; height:100%; object-fit:contain; display:block;}
.footer-col h4{color:#fff; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--space-4);}
.footer-col li{margin-bottom:.65rem;}
.footer-col a{transition:color var(--dur-2);}
.footer-col a:hover{color:var(--amber-500);}
.footer-contact li{display:flex; gap:.6rem; align-items:flex-start;}
.footer-contact svg{width:18px; height:18px; flex:none; margin-top:2px; color:var(--green-500);}
.footer-bottom{display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between; align-items:center; padding-block:var(--space-6); font-size:.82rem; color:rgba(255,255,255,.45);}
.footer-certs{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-5);}
.cert-badge{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  background:#fff; border-radius:var(--radius-md); padding:.55rem .8rem; box-shadow:var(--shadow-sm);
}
.cert-badge img{display:block; height:36px; width:auto;}
.cert-badge--bee img{height:46px;}
@media (min-width:768px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;} }
@media (max-width:767px){ .footer-grid{grid-template-columns:1fr;} }

/* ---------- Forms ---------- */
.form-grid{display:grid; gap:var(--space-5);}
@media (min-width:640px){ .form-row-2{grid-template-columns:1fr 1fr; display:grid; gap:var(--space-5);} }
.field label{display:block; font-family:var(--font-head); font-weight:600; font-size:.88rem; color:var(--navy-800); margin-bottom:.5rem;}
.field .req{color:var(--danger);}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line-300); border-radius:var(--radius-sm);
  background:var(--paper-0); color:var(--ink-900); transition:border-color var(--dur-2), box-shadow var(--dur-2);
}
.field textarea{min-height:140px; resize:vertical;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-400);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green-600); box-shadow:0 0 0 4px var(--green-050);
}
.field .hint{font-size:.8rem; color:var(--ink-400); margin-top:.4rem;}
.field .error{font-size:.82rem; color:var(--danger); margin-top:.4rem; display:none;}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger);}
.field.has-error .error{display:block;}
.hp-field{position:absolute; left:-9999px; top:-9999px;}

.form-status{
  display:none; align-items:center; gap:.6rem; padding:1rem 1.2rem; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem; margin-bottom:var(--space-5);
}
.form-status.is-visible{display:flex;}
.form-status.success{background:var(--green-050); color:var(--green-700);}
.form-status.error{background:#FBEAE8; color:var(--danger);}
.form-status svg{width:20px; height:20px; flex:none;}

/* ---------- Reveal animations (JS-controlled, progressively enhanced) ----------
   Content is visible by default. Only hidden pre-reveal when the `js` class
   (set synchronously in <head>) confirms JavaScript is running, so users/crawlers
   without JS — or a page where an unrelated script error occurs — always see
   full content instead of a permanently blank section. */
.js [data-reveal]{opacity:0; transform:translateY(24px);}
.js.reveal-ready [data-reveal]{transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important; transform:none !important;}
}

/* Utility */
.text-center{text-align:center;}
.mt-0{margin-top:0 !important;}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip-link{
  position:fixed; top:-60px; left:12px; z-index:200; background:var(--navy-900); color:#fff; padding:.8rem 1.2rem;
  border-radius:var(--radius-sm); transition:top var(--dur-2);
}
.skip-link:focus{top:12px;}

/* ---------- WhatsApp side tab ---------- */
.whatsapp-side{
  position:fixed; top:50%; right:0; z-index:95; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.1rem .7rem; border-radius:10px 0 0 10px;
  background:#25d366; color:#fff; font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:-3px 4px 16px rgba(0,0,0,.2);
  transition:padding var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.whatsapp-side svg{width:22px; height:22px; flex:none;}
.whatsapp-side:hover,.whatsapp-side:focus-visible{padding-right:1rem; box-shadow:-5px 6px 20px rgba(0,0,0,.3); background:#1fb956;}
@media (max-width:640px){
  .whatsapp-side{padding:.85rem .55rem; font-size:.72rem; gap:.45rem;}
  .whatsapp-side svg{width:18px; height:18px;}
}

/* ---------- Symptom list (degraded-performance indicators) ---------- */
.symptom-list{display:grid; gap:.7rem; margin-top:var(--space-5); list-style:none; padding:0;}
.symptom-list li{
  position:relative; padding:.75rem 1rem .75rem 2.6rem; border:1px solid var(--line-200); border-radius:var(--radius-md);
  background:var(--paper-0); font-size:.94rem; color:var(--ink-700);
}
.symptom-list li::before{
  content:''; position:absolute; left:1rem; top:1rem; width:9px; height:9px; border-radius:50%;
  background:var(--amber-500); box-shadow:0 0 0 4px var(--amber-050);
}

/* ---------- Findings list ---------- */
.findings-list{display:grid; gap:.6rem; margin-top:var(--space-4); list-style:none; padding:0;}
.findings-list li{position:relative; padding-left:1.3rem; font-size:.94rem; color:var(--ink-700); line-height:1.55;}
.findings-list li::before{content:'—'; position:absolute; left:0; color:var(--green-600); font-weight:700;}

/* ---------- FAQ accordion ---------- */
.faq-list{display:grid; gap:.7rem; margin-top:var(--space-5);}
.faq-item{border:1px solid var(--line-200); border-radius:var(--radius-md); background:var(--paper-0); overflow:hidden;}
.faq-item summary{
  cursor:pointer; list-style:none; padding:1rem 1.2rem; font-family:var(--font-head); font-weight:600;
  color:var(--navy-900); font-size:.98rem; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:''; flex:none; width:11px; height:11px; border-right:2px solid var(--ink-400); border-bottom:2px solid var(--ink-400);
  transform:rotate(45deg); transition:transform var(--dur-2) var(--ease-out);
}
.faq-item[open] summary::after{transform:rotate(-135deg);}
.faq-item p{padding:0 1.2rem 1.1rem; margin:0; color:var(--ink-500); font-size:.92rem; line-height:1.6;}

/* ---------- Benchmark / callout stat ---------- */
.callout-stat{
  padding:var(--space-5) var(--space-6); background:var(--navy-050); border:1px solid var(--line-200);
  border-radius:var(--radius-md); margin-top:var(--space-5);
}
.callout-stat h4{font-size:.86rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--navy-800); margin-bottom:.5rem;}
.callout-stat .stat-flow{font-family:var(--font-head); font-weight:600; color:var(--green-700); font-size:1rem; margin-bottom:.4rem;}
.callout-stat p{color:var(--ink-500); font-size:.88rem; margin:0; line-height:1.55;}

/* ---------- Sub-service block (utility performance studies) ---------- */
.subservice{padding-block:var(--space-10); border-top:1px solid var(--line-200);}
.subservice:first-child{border-top:none; padding-top:0;}
.subservice-head{max-width:820px; margin-bottom:var(--space-6);}
.subservice-head h3{font-size:clamp(1.3rem,2vw,1.7rem);}
.subservice-kicker{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--green-600); margin-bottom:.4rem;}