/* ============================================================
   NEWATT ENGINEERING — design system
   Display + Body: Mulish (humanist sans)  Data labels: IBM Plex Mono
   Data/standards: IBM Plex Mono
   ============================================================ */

:root{
  --ink:#0A1A2F;
  --ink-2:#102A49;
  --ink-3:#1B4270;
  --paper:#FFFFFF;
  --paper-2:#F4F7FA;
  --paper-3:#EBF0F6;
  --rule:#D9E1EB;
  --rule-dk:#1E3A5C;
  --text:#16202E;
  --muted:#5C6B7E;
  --muted-lt:#93A3B5;
  --amber:#E08A1E;
  --amber-lt:#F6A93C;
  --amber-wash:#FFF6E9;

  --f-display:"Mulish","Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Mulish","Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"Mulish","Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1440px;
  --gut:clamp(20px,4vw,48px);
  --nav-h:92px;
  /* motion — Squarespace-style easing */
  --ease-inout:cubic-bezier(.645,.045,.355,1);
  --ease-out:cubic-bezier(.165,.84,.44,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--f-body); font-size:16.5px; line-height:1.66; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display); margin:0; line-height:1.06; letter-spacing:-.02em; font-weight:800}
p{margin:0 0 1em}
:focus-visible{outline:2.5px solid var(--amber); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber);color:#1b1200;padding:12px 20px;font-weight:700}
.skip:focus{left:12px;top:12px}

/* ---------- eyebrow + section head ---------- */
.eyebrow{
  font-family:var(--f-body); font-size:16.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--amber);
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--rule)}
.on-ink .eyebrow::after{background:var(--rule-dk)}
.sec-title{
  font-size:clamp(29.0px,4.4vw,48.0px);
  font-weight:800;
  max-width:26ch;
}
.sec-lead{color:var(--muted); font-size:clamp(16.5px,1.6vw,18.5px); max-width:62ch; margin-top:16px}
.on-ink .sec-lead{color:#A9BCD1}

section{padding:clamp(22px,2.8vw,38px) 0}
.sec-paper{background:var(--paper-2); border-block:1px solid var(--rule)}
.on-ink{background:var(--ink); color:#E4ECF5}
.on-ink h1,.on-ink h2,.on-ink h3{color:#fff}

/* ---------- standards chip: the signature element ---------- */
.stds{display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0; padding:0; list-style:none}
.std{
  font-family:var(--f-mono); font-size:16.5px; font-weight:500; letter-spacing:.04em;
  color:var(--ink-3); background:var(--paper); border:1px solid var(--rule);
  padding:4px 9px; border-radius:2px; white-space:nowrap;
}
.std::before{content:"§ "; color:var(--amber); font-weight:600}
.on-ink .std{background:rgba(255,255,255,.05); border-color:var(--rule-dk); color:#B9CEE4}
.sec-paper .std{background:#fff}

/* ---------- top credential bar ---------- */
.topbar{background:var(--ink-2); color:#9fb3c8; overflow:hidden; border-bottom:1px solid var(--rule-dk)}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:34px; flex-wrap:wrap}
.topbar b{color:var(--amber-lt); font-weight:600}
.topbar a{text-decoration:none}
.topbar a:hover{color:#fff}
@media(max-width:760px){.topbar .tb-right{display:none}}
@media(max-width:430px){.topbar .tb-c{display:none}}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule);
}
.nav .wrap{display:flex; align-items:center; gap:28px; min-height:var(--nav-h); max-width:100%; padding-inline:clamp(14px,2vw,28px)}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; flex-shrink:0}
.brand .logo-img{height:76px; width:auto; display:block}
.brand-tag{
  font-family:var(--f-mono); font-size:16.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); border-left:1px solid var(--rule); padding-left:11px; line-height:1.35; max-width:96px;
}
@media(max-width:960px){.brand-tag{display:none}}

.menu{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.menu > li{position:relative}
.menu > li > a{
  display:block; padding:12px 16px; text-decoration:none; font-weight:600; font-size:16.5px;
  color:var(--text); border-radius:3px;
}
.menu > li > a{position:relative}
.menu > li > a:hover{color:var(--ink-3)}
.menu > li > a::before{content:""; position:absolute; left:16px; right:16px; bottom:7px; height:2px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease-inout)}
.menu > li > a:hover::before{transform:scaleX(1)}
.menu > li > a[aria-current="page"]{color:var(--amber)}
.menu > li > a[aria-current="page"]::after{
  content:""; display:block; height:2px; background:var(--amber); margin-top:5px; border-radius:2px;
}
.has-sub > a::after{content:"▾"; font-size:16.5px; margin-left:6px; opacity:.55; vertical-align:middle}
.sub{
  position:absolute; top:calc(100% + 6px); left:0; min-width:270px; background:#fff;
  border:1px solid var(--rule); border-radius:4px; box-shadow:0 18px 44px rgba(10,26,47,.13);
  list-style:none; margin:0; padding:7px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:.16s ease;
}
.has-sub:hover .sub, .has-sub:focus-within .sub{opacity:1; visibility:visible; transform:none}
.sub a{display:block; padding:10px 14px; text-decoration:none; font-size:16.5px; border-radius:3px; color:var(--text)}
.sub a:hover{background:var(--paper-2); color:var(--ink-3)}
.sub .s-note{display:block; font-family:var(--f-mono); font-size:16.5px; color:var(--muted); letter-spacing:.04em; margin-top:1px}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:3px;
  font-weight:700; font-size:16.5px; text-decoration:none; border:1.5px solid transparent;
  cursor:pointer; font-family:var(--f-body); white-space:nowrap; position:relative; overflow:hidden;
  transition:background .3s var(--ease-inout), border-color .3s var(--ease-inout),
             color .3s var(--ease-inout), transform .3s var(--ease-inout);
}
.btn::after{content:"→"; display:inline-block; margin-left:-4px; opacity:0; transform:translateX(-8px);
  transition:opacity .35s var(--ease-inout), transform .35s var(--ease-inout)}
.btn:hover::after{opacity:1; transform:translateX(0)}
.btn:hover{padding-right:26px}
.btn-primary{background:var(--amber); color:#241704; border-color:var(--amber)}
.btn-primary:hover{background:var(--amber-lt); border-color:var(--amber-lt); transform:translateY(-1px)}
.btn-ghost{border-color:var(--rule); color:var(--text); background:transparent}
.btn-ghost:hover{border-color:var(--ink-3); color:var(--ink-3)}
.on-ink .btn-ghost,.phead .btn-ghost,.band .btn-ghost{border-color:#3C6390; color:#DCE7F2}
.hero-cine .btn-ghost{border-color:rgba(255,255,255,.9); color:#fff; background:rgba(8,20,37,.5); backdrop-filter:blur(3px); text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hero-cine .btn-ghost:hover{background:rgba(8,20,37,.72); border-color:#fff; color:#fff}
.on-ink .btn-ghost:hover,.hero .btn-ghost:hover,.phead .btn-ghost:hover,.band .btn-ghost:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,.06)}
.nav .btn{padding:10px 18px; font-size:16.5px}
@media(max-width:1080px){.nav .btn{display:none}}

.burger{display:none; background:none; border:1px solid var(--rule); border-radius:3px; padding:9px 11px; cursor:pointer}
.burger span{display:block; width:19px; height:2px; background:var(--text); margin:4px 0; border-radius:2px; transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1080px){
  .burger{display:block}
  .menu{
    position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:10px var(--gut) 28px; border-bottom:1px solid var(--rule);
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto; display:none;
    box-shadow:0 20px 40px rgba(10,26,47,.12);
  }
  .menu.open{display:flex}
  .menu > li > a{padding:14px 4px; border-bottom:1px solid var(--rule); border-radius:0}
  .menu > li > a[aria-current="page"]::after{display:none}
  .sub{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:4px 0 10px 14px; min-width:0}
  .sub a{padding:8px 4px; color:var(--muted)}
  .has-sub > a::after{float:right}
}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--ink); color:#fff; overflow:hidden; padding:clamp(56px,7.5vw,92px) 0 0}
.hero h1, .hero h2, .hero .hero-lead, .hero .hero-cta, .hero .hero-note{animation:hero-rise .9s var(--ease-out) both}
.hero .hero-lead{animation-delay:.12s} .hero .hero-cta{animation-delay:.22s}
@keyframes hero-rise{from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero h1,.hero h2,.hero .hero-lead,.hero .hero-cta,.hero .hero-note{animation:none}}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--rule-dk) 1px,transparent 1px),linear-gradient(90deg,var(--rule-dk) 1px,transparent 1px);
  background-size:64px 64px; opacity:.2; pointer-events:none;
}
.hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(28px,5vw,64px); align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr; gap:34px}}
.hero h1, .hero h2{
  font-size:clamp(38.0px,6.4vw,74.0px); font-weight:800;
  letter-spacing:-.025em; margin-bottom:22px;
}
.hero h1 em, .hero h2 em{font-style:normal; color:var(--amber-lt); display:block}
.hero-lead{font-size:clamp(16.5px,1.85vw,20.0px); color:#A9BCD1; max-width:52ch; margin-bottom:30px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-note{
  font-family:var(--f-body); font-size:clamp(16.5px,1.5vw,18.0px); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--amber); margin-bottom:18px; display:flex; align-items:center; gap:12px;
}
.hero-note::before{content:""; width:34px; height:2px; background:var(--amber)}

/* animated single-line diagram */
.sld{width:100%; max-width:560px; height:auto; margin-inline:auto; display:block}
.sld .bus{stroke:#5E82AA; stroke-width:2.2}
.sld .ln{stroke:#33587F; stroke-width:1.4; fill:none}
.sld .eq{stroke:#7FA3C9; stroke-width:1.5; fill:none}
.sld .lbl{font-family:var(--f-mono); font-size:16.5px; fill:#7E9CBC; letter-spacing:.09em}
.sld .lbl-a{fill:var(--amber-lt)}
.sld .flow{stroke:var(--amber-lt); stroke-width:1.9; fill:none; stroke-dasharray:5 12; stroke-linecap:round;
  animation:flow 2.4s linear infinite; opacity:.95}
.sld .flow.d2{animation-delay:-.8s} .sld .flow.d3{animation-delay:-1.6s}
@keyframes flow{to{stroke-dashoffset:-34}}
.sld .node{fill:var(--amber-lt); animation:pulse 2.8s ease-in-out infinite}
.sld .node.p2{animation-delay:.6s} .sld .node.p3{animation-delay:1.2s}
@keyframes pulse{0%,100%{opacity:.35;r:2.6} 50%{opacity:1;r:3.6}}
@media (prefers-reduced-motion:reduce){.sld .flow,.sld .node{animation:none}}

/* metric strip */
.metrics{position:relative; border-top:1px solid var(--rule-dk); margin-top:clamp(40px,5.5vw,66px)}
.metrics ul{display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin:0; padding:0}
.metrics li{padding:26px 24px 30px; border-right:1px solid var(--rule-dk)}
.metrics li:last-child{border-right:0}
.metrics li:first-child{padding-left:0}
.metrics .m-num{font-family:var(--f-display); font-size:clamp(28.0px,3.6vw,40.0px); font-weight:700; color:#fff; line-height:1; display:block}
.metrics .m-num span{color:var(--amber-lt)}
.metrics .m-lbl{font-family:var(--f-mono); font-size:16.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#7E9CBC; margin-top:10px; display:block}
@media(max-width:820px){
  .metrics ul{grid-template-columns:repeat(2,1fr)}
  .metrics li{border-bottom:1px solid var(--rule-dk); padding-inline:18px}
  .metrics li:nth-child(2n){border-right:0}
  .metrics li:nth-child(odd){padding-left:0}
  .metrics li:nth-last-child(-n+2){border-bottom:0}
}

/* ---------- cards ---------- */
.grid{display:grid; gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:#fff; border:1px solid var(--rule); border-radius:5px; overflow:hidden;
  display:flex; flex-direction:column; transition:.2s ease; text-decoration:none; color:inherit;
}
a.card{transition:border-color .3s var(--ease-inout), box-shadow .4s var(--ease-out), transform .4s var(--ease-out)}
a.card:hover{border-color:var(--amber); box-shadow:0 18px 40px rgba(10,26,47,.12); transform:translateY(-5px)}
.card-media{aspect-ratio:16/10; overflow:hidden; background:var(--paper-3); position:relative}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out)}
a.card:hover .card-media img{transform:scale(1.05)}
.card-body{padding:22px 22px 24px; flex:1; display:flex; flex-direction:column}
.card h3{font-size:19px; margin-bottom:9px}
.card p{color:var(--muted); font-size:16.5px; margin:0}
.card-more{
  margin-top:auto; padding-top:16px; font-family:var(--f-mono); font-size:16.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--amber);
}
.card-more::after{content:" →"}

/* capability list (no photo) */
.cap{background:#fff; border:1px solid var(--rule); border-left:3px solid var(--amber); border-radius:4px; padding:22px 24px}
.cap h3{font-size:17.5px; margin-bottom:8px}
.cap p{color:var(--muted); font-size:16.5px; margin:0}

/* ---------- projects register ---------- */
.reg-tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:22px}
.chip{
  font-family:var(--f-mono); font-size:16.5px; letter-spacing:.06em; padding:7px 14px; border-radius:99px;
  border:1px solid var(--rule); background:#fff; cursor:pointer; color:var(--muted); transition:.15s;
}
.chip:hover{border-color:var(--ink-3); color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.reg-count{font-family:var(--f-mono); font-size:16.5px; color:var(--muted); margin-left:auto}

.reg{width:100%; border-collapse:collapse; font-size:16.5px; background:#fff;
  border:1px solid var(--rule); border-radius:5px; overflow:hidden}
.reg thead th{
  background:var(--ink); color:#B9CEE4; font-family:var(--f-mono); font-size:16.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; text-align:left; padding:13px 16px; white-space:nowrap;
}
.reg td{padding:14px 16px; border-top:1px solid var(--rule); vertical-align:top}
.reg tbody tr:hover{background:var(--amber-wash)}
.reg .p-name{font-weight:600; color:var(--ink)}
.reg .p-rating{font-family:var(--f-mono); font-size:16.5px; color:var(--amber); display:block; margin-top:2px; letter-spacing:.03em}
.reg .p-loc{font-family:var(--f-mono); font-size:16.5px; color:var(--muted); white-space:nowrap}
.reg .p-scope{color:var(--muted); font-size:16.5px}
@media(max-width:760px){
  .reg thead{display:none}
  .reg, .reg tbody, .reg tr, .reg td{display:block; width:100%}
  .reg tr{border-top:1px solid var(--rule); padding:14px 4px}
  .reg tr:first-child{border-top:0}
  .reg td{border:0; padding:2px 12px}
}

/* ---------- study article ---------- */
.study{border-top:1px solid var(--rule); padding-top:clamp(38px,5vw,58px); margin-top:clamp(38px,5vw,58px); scroll-margin-top:120px}
.study:first-of-type{border-top:0; padding-top:0; margin-top:0}
.study-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(26px,4vw,52px); align-items:start}
@media(max-width:900px){.study-grid{grid-template-columns:1fr}}
.study h2{font-size:clamp(24.0px,3.1vw,33.0px); margin-bottom:12px}
.study .kicker{font-size:17px; color:var(--ink-3); font-weight:500; margin-bottom:20px; line-height:1.5}
.study p{color:var(--muted); font-size:16.5px}
.study-aside{position:sticky; top:110px}
.study-aside img{border-radius:5px; border:1px solid var(--rule)}
.deliv{background:var(--paper-2); border:1px solid var(--rule); border-radius:5px; padding:20px 22px; margin-top:20px}
.deliv h4{font-family:var(--f-mono); font-size:16.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:11px}
.deliv p{font-size:16.5px; margin:0; color:var(--muted)}
.tools{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; list-style:none; padding:0}
.tools li{font-family:var(--f-mono); font-size:16.5px; background:var(--ink); color:#CFE0F0; padding:4px 10px; border-radius:2px}

/* jump nav */
.jump{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 8px; padding:0}
.jump a{font-family:var(--f-mono); font-size:16.5px; text-decoration:none; padding:7px 13px;
  border:1px solid var(--rule); border-radius:99px; color:var(--muted); background:#fff; transition:.15s}
.jump a:hover{border-color:var(--amber); color:var(--amber)}

/* ---------- logo wall ---------- */
.wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:5px; overflow:hidden}
.wall div{background:#fff; aspect-ratio:5/2.6; display:grid; place-items:center; padding:16px}
.wall img{max-height:100%; max-width:100%; object-fit:contain; filter:grayscale(1); opacity:.62; transition:.2s}
.wall div:hover img{filter:none; opacity:1}
.wall .ph{font-family:var(--f-mono); font-size:16.5px; color:var(--muted-lt); letter-spacing:.1em; text-align:center}

/* ---------- CTA band ---------- */
.band{background:var(--ink-2); color:#fff; position:relative; overflow:hidden}
.band::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(90deg,var(--rule-dk) 1px,transparent 1px); background-size:56px 56px; opacity:.25}
.band .wrap{position:relative; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap}
.band h2{font-size:clamp(24.0px,3.3vw,36.0px); max-width:22ch}
.band p{color:#A9BCD1; margin:12px 0 0; max-width:52ch}

/* ---------- contact ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--f-mono); font-size:16.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500}
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:16.5px; padding:12px 14px; border:1px solid var(--rule);
  border-radius:3px; background:#fff; color:var(--text); width:100%;
}
.field textarea{min-height:132px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber); outline:none; box-shadow:0 0 0 3px var(--amber-wash)}
.form-note{font-size:16.5px; color:var(--muted); margin-top:14px}

.office{background:#fff; border:1px solid var(--rule); border-radius:5px; padding:24px}
.office h3{font-size:17px; margin-bottom:4px}
.office .o-tag{font-family:var(--f-mono); font-size:16.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:12px}
.office address{font-style:normal; color:var(--muted); font-size:16.5px; line-height:1.7}
.office a{color:var(--ink-3); text-decoration:none; font-weight:500}
.office a:hover{text-decoration:underline}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:#94ADC7; font-size:16.5px; padding:clamp(48px,6vw,72px) 0 0}
.foot h4{font-family:var(--f-mono); font-size:16.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--amber); margin-bottom:16px; font-weight:600}
.foot-grid{display:grid; grid-template-columns:1.3fr .9fr .9fr 1.9fr; gap:clamp(24px,3.5vw,44px)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:9px}
.foot a{text-decoration:none; transition:.15s}
.foot a:hover{color:var(--amber-lt)}
.foot-offices{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin-bottom:18px}
@media(max-width:420px){.foot-offices{grid-template-columns:1fr}}
.foot address{font-style:normal; line-height:1.75; margin-bottom:0}
.foot .f-name{color:#fff; font-weight:600; display:block}
.foot-brand .logo-img{height:64px; width:auto; margin-bottom:4px}
.foot-tag{font-family:var(--f-mono); font-size:16.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin-bottom:20px}
.social{display:flex; gap:9px}
.social a{width:36px; height:36px; border:1px solid var(--rule-dk); border-radius:50%; display:grid; place-items:center}
.social a:hover{border-color:var(--amber); background:var(--amber); color:var(--ink)}
.social svg{width:15px; height:15px; fill:currentColor}
.foot-bar{border-top:1px solid var(--rule-dk); margin-top:clamp(36px,5vw,56px); padding:22px 0;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-family:var(--f-mono); font-size:16.5px; letter-spacing:.05em}
.foot-bar nav{display:flex; gap:20px; flex-wrap:wrap}

/* ---------- page header (inner pages) ---------- */
.phead{background:var(--ink); color:#fff; padding:clamp(30px,4vw,48px) 0 clamp(22px,3vw,34px); position:relative; overflow:hidden}
.phead::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--rule-dk) 1px,transparent 1px),linear-gradient(90deg,var(--rule-dk) 1px,transparent 1px);
  background-size:64px 64px; opacity:.18}
.phead .wrap{position:relative}
.phead h1{font-size:clamp(36px,6vw,64px); max-width:20ch}
.phead p{color:#A9BCD1; font-size:clamp(16.5px,1.7vw,19.0px); max-width:64ch; margin:18px 0 0}
.crumb{font-family:var(--f-mono); font-size:16.5px; letter-spacing:.14em; text-transform:uppercase; color:#7E9CBC; margin-bottom:18px}
.crumb a{text-decoration:none} .crumb a:hover{color:var(--amber-lt)}
.crumb span{color:var(--amber); margin:0 8px}

/* ---------- misc ---------- */
.prose h2{font-size:clamp(22.0px,2.9vw,30.0px); margin:38px 0 14px; margin:26px 0 10px}
.prose p,.prose li{color:var(--muted); font-size:16.5px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:7px}
.prose{max-width:78ch}
.ticks{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:11px 26px}
@media(max-width:900px){.ticks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ticks{grid-template-columns:1fr}}
.ticks li{padding-left:26px; position:relative; font-size:16.5px; color:var(--muted)}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--amber); font-weight:700}
.on-ink .ticks li{color:#B9CEE4}

.reveal{opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.06s} .reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s} .reveal.d4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ---------- 3D globe ---------- */
.globe-sec{overflow:hidden}
.globe-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,64px); align-items:center}
@media(max-width:920px){.globe-grid{grid-template-columns:1fr; gap:34px}}
.globe-wrap{position:relative; aspect-ratio:1/.82; width:100%; max-width:560px; margin-inline:auto;
  cursor:grab; touch-action:pan-y}
.globe-wrap.grabbing{cursor:grabbing}
#globe{position:absolute; inset:0}
#globe canvas{display:block; width:100%!important; height:100%!important}
#globe-tip{position:absolute; z-index:5; transform:translate(-50%,-140%); pointer-events:none;
  background:#fff; color:var(--ink); border:1px solid var(--rule); border-radius:4px; padding:8px 12px;
  box-shadow:0 10px 26px rgba(0,0,0,.28); white-space:nowrap; font-size:16.5px}
#globe-tip strong{display:block; font-family:var(--f-display); font-size:16.5px; font-size:16.5px; color:var(--amberD); letter-spacing:.03em}
.globe-hint{position:absolute; left:50%; bottom:4px; transform:translateX(-50%); font-family:var(--f-mono);
  font-size:16.5px; letter-spacing:.18em; text-transform:uppercase; color:#6f8fb4; pointer-events:none}
.globe-key{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:11px; max-width:360px}
.globe-key li{display:flex; align-items:center; gap:12px; font-size:16.5px; color:#cfe0f0;
  border-bottom:1px solid var(--rule-dk); padding-bottom:11px}
.globe-key b{margin-left:auto; font-family:var(--f-mono); font-size:16.5px; font-weight:500; color:var(--amber-lt)}
.globe-key .k-dot{width:11px; height:11px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(246,169,60,.18); flex:none}
.globe-key .k-dim{background:#6f8fb4; box-shadow:0 0 0 4px rgba(111,143,180,.18)}


/* ---------- concept-to-commissioning lifecycle ---------- */
.life{position:relative}
.life-track{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:40px; counter-reset:phase;
  border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:#fff}
.life-step{position:relative; padding:26px 22px 28px; border-right:1px solid var(--rule); counter-increment:phase;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left}
.life-step:last-child{border-right:0}
.life-step::before{content:"0" counter(phase); font-family:var(--f-mono); font-size:16.5px; font-weight:600;
  letter-spacing:.1em; color:var(--amberD); margin-bottom:14px}
.on-ink .life-step h3{font-size:16.5px; font-weight:800; margin:0 0 9px; color:var(--ink); line-height:1.25}
.on-ink .life-step p{font-size:16.5px; color:#33465c; margin:0}
.life-step .bar{position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--amber),var(--amber-lt))}
.life-step:not(:first-child) .bar{background:var(--rule)}
@media(max-width:920px){.life-track{grid-template-columns:1fr 1fr}
  .life-step{border-bottom:1px solid var(--rule)} .life-step:nth-child(2n){border-right:0}}
@media(max-width:560px){.life-track{grid-template-columns:1fr} .life-step{border-right:0}}

/* ---------- project photo cards (TCE-style) ---------- */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
.pcard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--rule);
  border-radius:6px; overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .3s var(--ease-inout), box-shadow .45s var(--ease-out), transform .45s var(--ease-out)}
.pcard:hover{border-color:var(--amber); box-shadow:0 22px 48px rgba(10,26,47,.15); transform:translateY(-6px)}
.pcard-media{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--paper-3)}
.pcard-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out)}
.pcard:hover .pcard-media img{transform:scale(1.06)}
.pcard-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,26,47,0) 55%,rgba(10,26,47,.55) 100%)}
.pcard-sector{position:absolute; top:12px; left:12px; z-index:2; font-family:var(--f-mono); font-size:16.5px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(10,26,47,.7);
  backdrop-filter:blur(4px); padding:5px 10px; border-radius:3px}
.pcard-body{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1}
.pcard-loc{font-family:var(--f-mono); font-size:16.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--amber)}
.pcard-body h3{font-size:19px; margin:8px 0 4px; line-height:1.2}
.pcard-rating{font-family:var(--f-mono); font-size:16.5px; color:var(--muted); letter-spacing:.02em}
.pcard-body p{color:var(--muted); font-size:16.5px; margin:12px 0 0}
.pcard-more{margin-top:auto; padding-top:16px; font-family:var(--f-mono); font-size:16.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--amber)}
.pcard-more::after{content:" →"}

/* collapsible full register */
.reg-details{border:1px solid var(--rule); border-radius:6px; background:#fff; padding:22px 24px}
.reg-details summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px}
.reg-details summary::-webkit-details-marker{display:none}
.reg-toggle{font-family:var(--f-mono); font-size:16.5px; font-weight:600; letter-spacing:.06em; color:var(--amber);
  border:1px solid var(--rule); border-radius:99px; padding:8px 16px; transition:.15s; white-space:nowrap}
.reg-details[open] .reg-toggle::after{content:" ✕"}
.reg-details:not([open]) .reg-toggle::after{content:" +"}
.reg-details summary:hover .reg-toggle{border-color:var(--amber)}
.reg-details .reg{margin-top:0}
.reg-details[open] summary{margin-bottom:8px}

/* ---------- client strip ---------- */
.clients{list-style:none; margin:30px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:6px; overflow:hidden}
@media(max-width:820px){.clients{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.clients{grid-template-columns:repeat(2,1fr)}}
.clients li{background:#fff; display:grid; place-items:center; text-align:center; padding:26px 16px;
  font-family:var(--f-display); font-size:16.5px; font-weight:600;
  color:var(--ink-3); letter-spacing:-.01em; min-height:96px; transition:.16s}
.clients li:hover{background:var(--amber-wash); color:var(--ink)}

/* ---------- moving marquee (tools + clients) ---------- */
.marquee{position:relative; overflow:hidden; margin-top:22px; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex; align-items:center; gap:14px; width:max-content;
  animation:mq-scroll 42s linear infinite; will-change:transform}
.marquee:hover .mq-track, .marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes mq-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none; flex-wrap:wrap; justify-content:center; width:auto}
  .marquee{-webkit-mask-image:none; mask-image:none}
}

/* tool chips */
.mq-chip{flex:none; font-family:var(--f-mono); font-size:16.5px; letter-spacing:.02em;
  color:#cfe0f0; background:var(--ink); border:1px solid var(--rule-dk); border-radius:4px;
  padding:11px 18px; white-space:nowrap}
.sec-paper .mq-chip{background:var(--ink)}

/* client logos: badge on top, name below, both always visible */
.marquee-logos{margin-top:28px; border-block:1px solid var(--rule); background:#fff}
.marquee-logos .mq-track{gap:0}
.mq-logo{flex:none; width:200px; height:128px; margin:0; padding:16px 22px 14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border-right:1px solid var(--rule); background:#fff}
.mq-badge{height:52px; display:grid; place-items:center; width:100%}
.mq-badge img{max-width:100%; max-height:52px; object-fit:contain; opacity:1;
  transition:.2s ease}
.mq-logo:hover .mq-badge img{filter:none; opacity:1}
/* when the logo file is missing, .no-logo is added and the badge collapses so the name centres */
.mq-logo.no-logo .mq-badge{height:0}
.mq-logo figcaption{font-family:var(--f-display); font-weight:700; font-size:16.5px; color:var(--ink-3);
  text-align:center; line-height:1.2; letter-spacing:-.01em}


/* ---------- cinematic photo hero (Squarespace-style, using our own photos) ---------- */
.hero-cine{position:relative; min-height:clamp(560px,82vh,760px); display:flex; flex-direction:column;
  justify-content:center; padding-top:clamp(56px,7vw,90px); isolation:isolate}
.hero-cine::before{content:none}
.hero-bg{position:absolute; inset:0; overflow:hidden; z-index:-2}
.hero-slide{position:absolute; inset:0; opacity:0;
  animation:hero-cross 54s var(--ease-inout) infinite; will-change:opacity,transform}
.hero-slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 68%; display:block}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:6s}
.hero-slide:nth-child(3){animation-delay:12s}
.hero-slide:nth-child(4){animation-delay:18s}
.hero-slide:nth-child(5){animation-delay:24s}
.hero-slide:nth-child(6){animation-delay:30s}
.hero-slide:nth-child(7){animation-delay:36s}
.hero-slide:nth-child(8){animation-delay:42s}
.hero-slide:nth-child(9){animation-delay:48s}
@keyframes hero-cross{
  0%    {opacity:0; transform:scale(1.07)}
  2%    {opacity:1}
  11%   {opacity:1; transform:scale(1.13)}
  13%   {opacity:0}
  100%  {opacity:0}
}
/* scrim: deep navy wash so white text stays readable over any photo */
.hero-scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(8,20,37,.72) 0%, rgba(8,20,37,.5) 48%, rgba(8,20,37,.18) 100%),
             linear-gradient(0deg, rgba(8,20,37,.6) 0%, rgba(8,20,37,.05) 50%)}
.hero-cine .hero-inner{max-width:820px; position:relative}
.hero-cine .hero-cta{margin-top:8px}
.hero-cine .hero-note{color:#FFB23E}
.hero-cine h1{font-size:clamp(30.0px,4.4vw,50.0px); line-height:1.04; font-weight:800; letter-spacing:-.025em; margin-bottom:22px}
.hero-cine h1 em{font-style:normal; color:#FFB23E; display:block}
.hero-cine .hero-lead{color:#FFFFFF; max-width:52ch; margin-top:16px;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.6)}
.hero-cine h1{text-shadow:0 2px 4px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.5)}
.hero-cine .hero-note{text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){
  .hero-slide{animation:none}
  .hero-slide:nth-child(1){opacity:1; transform:none}
  .hero-slide:not(:nth-child(1)){opacity:0}
}
/* metrics bar sits below the photo hero on its own dark band */
.hero-cine + .metrics, .hero-cine .metrics{background:var(--ink)}
.metrics.metrics-band{background:var(--ink); border-top:1px solid var(--rule-dk); margin-top:0}
.metrics.metrics-band .wrap{padding-block:0}

.metrics-strip{background:var(--ink); padding:0; border-bottom:1px solid var(--rule-dk)}
.metrics-strip .metrics{margin-top:0; border-top:0}
.metrics-strip .metrics li{padding-block:26px 30px}

/* client marquee: logos only (no names), taller badge */
.marquee-clients .mq-logo{height:110px; padding:12px 26px}
.marquee-clients .mq-track{animation-duration:100s}
.marquee-clients .mq-badge{height:80px}
.marquee-clients .mq-badge img{max-height:80px}

/* ---------- projects: grouped photo-card sections ---------- */
.pj-filter-wrap{padding-bottom:8px}
.chip .chip-n{font-family:var(--f-mono); font-size:16.5px; opacity:.7; margin-left:3px}
.pj-group{padding-block:clamp(30px,4vw,52px)}
.pj-group:nth-child(even of .pj-group){background:var(--paper-2)}
.pj-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--rule); padding-bottom:16px; margin-bottom:30px}
.pj-head .eyebrow{margin:0}
.pj-count{font-family:var(--f-mono); font-size:16.5px; color:var(--muted); white-space:nowrap}
.pj-group.pj-hide{display:none}
.pcard[data-sector].pj-dim{display:none}
/* card body: no CTA/rating now — cleaner */
.pcard-body h3{font-size:18px; margin:6px 0 8px}
.pcard-body p{font-size:16.5px; color:var(--muted); margin:0}

/* light rolling capabilities marquee (top bar) */
.tb-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tb-track{display:flex; align-items:center; gap:0; width:max-content; animation:tb-roll 60s linear infinite}
.tb-marquee:hover .tb-track{animation-play-state:paused}
@keyframes tb-roll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.tb-item{font-family:var(--f-body); font-size:16.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:#a9bccf; padding:9px 22px; white-space:nowrap}
.tb-sep{color:var(--amber); opacity:.55; font-size:16.5px}
@media(prefers-reduced-motion:reduce){.tb-track{animation:none}}

/* ---------- feedback: enlarged headings + who-links + values ---------- */
.sec-title-lg{font-size:clamp(32.0px,4.8vw,52.0px)}
.sec-title-xl{font-size:clamp(38.0px,6vw,72.0px); letter-spacing:-.03em}
.who-links{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:10px}
.who-links a{display:inline-block; padding:9px 16px; border:1px solid var(--rule); border-radius:100px;
  font-weight:600; font-size:16.5px; color:var(--ink); text-decoration:none;
  transition:background .3s var(--ease-inout), border-color .3s var(--ease-inout), color .3s var(--ease-inout)}
.who-links a:hover{background:var(--ink); color:#fff; border-color:var(--ink)}

/* enlarged, clickable, photo-backed lifecycle band */
.life-sec{position:relative; isolation:isolate}
.life-sec::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.16;
  background:url(../img/hv-substation.webp) center/cover; }
.life-track-lg{margin-top:34px; background:transparent; border-color:rgba(255,255,255,.14)}
.life-track-lg .life-step{border-right-color:rgba(255,255,255,.14)}
.life-track-lg .life-step{padding:32px 26px 34px; text-decoration:none; color:inherit; display:block;
  transition:background .3s var(--ease-inout), transform .35s var(--ease-out)}
.life-track-lg .life-step:hover{background:rgba(255,255,255,.06); transform:translateY(-3px)}
.on-ink .life-track-lg .life-step h3{font-size:22px; color:#fff; font-weight:800}
.on-ink .life-track-lg .life-step p{font-size:16.5px; color:#c4d3e2}
.life-track-lg .life-step::before{content:""; counter-increment:none}

/* enlarged About prose */
.prose-lg p{font-size:17.5px; line-height:1.72}
.prose-lg .eyebrow{font-size:16.5px}
.prose-lg h2{font-size:clamp(24.0px,3vw,32.0px); margin-top:36px}

/* tools: same white rectangular tile treatment as client logos, name centred */
.marquee-tools{margin-top:28px; border-block:1px solid var(--rule); background:#fff}
.marquee-tools .mq-track{gap:0}
.tool-chip{flex:none; width:200px; height:128px; display:flex; align-items:center; justify-content:center;
  text-align:center; white-space:normal; font-family:var(--f-display); font-weight:700; font-size:16.5px;
  letter-spacing:-.01em; color:var(--ink-3); background:#fff; border-right:1px solid var(--rule);
  padding:16px 18px; line-height:1.25}

/* ---------- hero: per-image rotating content ---------- */
.hero-rotator{display:grid; margin-bottom:14px}
.hero-text{grid-area:1 / 1 / 2 / 2; opacity:0;
  animation:hero-text-cross 54s var(--ease-inout) infinite; will-change:opacity,transform}
.hero-text:nth-child(1){animation-delay:0s}
.hero-text:nth-child(2){animation-delay:6s}
.hero-text:nth-child(3){animation-delay:12s}
.hero-text:nth-child(4){animation-delay:18s}
.hero-text:nth-child(5){animation-delay:24s}
.hero-text:nth-child(6){animation-delay:30s}
.hero-text:nth-child(7){animation-delay:36s}
.hero-text:nth-child(8){animation-delay:42s}
.hero-text:nth-child(9){animation-delay:48s}
@keyframes hero-text-cross{
  0%    {opacity:0; transform:translateY(14px)}
  2%    {opacity:1; transform:translateY(0)}
  9%    {opacity:1; transform:translateY(0)}
  12%   {opacity:0; transform:translateY(-10px)}
  100%  {opacity:0; transform:translateY(-10px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-text{animation:none}
  .hero-text:nth-child(1){opacity:1; position:relative}
  .hero-text:not(:nth-child(1)){display:none}
}
@media(max-width:760px){.hero-rotator{margin-bottom:12px}}

/* About: engagement model cards */
.engage{position:relative; padding-top:14px}
.engage-n{font-family:var(--f-body); font-weight:800; font-size:16.5px; letter-spacing:.1em; color:var(--amberD); display:block; margin-bottom:8px}
.engage h3{font-size:19px; margin:0 0 8px}
.engage::before{content:""; position:absolute; left:0; top:0; width:38px; height:3px; background:linear-gradient(90deg,var(--amber),var(--amber-lt)); border-radius:2px}

/* ---------- real world map (replaces 3D globe) ---------- */
.wmap-wrap{width:100%; display:flex; align-items:center; justify-content:center}
.wmap{width:100%; height:auto; overflow:visible}
.wmap .cty{fill:#cdd9e8; stroke:#aebccd; stroke-width:.3}
.wmap .hi{fill:var(--amber); stroke:#b9740f; stroke-width:.5}
.wmap-mk .mk{fill:#FFB23E}
.wmap-mk .mk-p{fill:none; stroke:#FFB23E; stroke-width:1.4; transform-box:fill-box; transform-origin:center;
  animation:wmap-pulse 2.4s ease-out infinite}
@keyframes wmap-pulse{0%{opacity:.9; transform:scale(.6)} 70%{opacity:0; transform:scale(3.4)} 100%{opacity:0; transform:scale(3.4)}}
@media(prefers-reduced-motion:reduce){.wmap-mk .mk-p{animation:none; opacity:0}}
@media(max-width:900px){.wmap-wrap{margin-top:20px}}

/* Concept-to-commissioning band: larger, more visible labels */
.life-sec .eyebrow{font-size:15.5px; color:#FFB23E}
.life-sec .sec-title-xl{color:#fff}

/* uniform landscape ratio for sector images */
.sec-img{width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:6px; display:block}
@media(max-width:900px){.sec-img{aspect-ratio:16 / 10}}

/* Service capability cards (photo + icon + heading + write-up) */
.cap-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.cap-item{background:#fff; border:1px solid var(--rule); border-radius:10px; padding:0; overflow:hidden; transition:box-shadow .2s ease, transform .2s ease}
.cap-item:hover{box-shadow:0 14px 34px rgba(10,26,47,.10); transform:translateY(-3px)}
.cap-media{position:relative; width:100%; aspect-ratio:4 / 3; overflow:hidden; background:#eef1f4}
.cap-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease}
.cap-item:hover .cap-media img{transform:scale(1.055)}
.cap-body{position:relative; padding:34px 22px 22px}
.cap-ico{position:absolute; top:-24px; left:22px; display:inline-grid; place-items:center; width:48px; height:48px; border-radius:12px;
  background:#fff; color:var(--amberD); box-shadow:0 6px 16px rgba(10,26,47,.16)}
.cap-ico svg{width:24px; height:24px}
.cap-item h3{font-size:18px; margin:0 0 8px; color:var(--ink)}
.cap-item p{font-size:16.5px; color:var(--muted); margin:0; line-height:1.5}

/* Core values — image + icon rows (not plain blocks) */
.vals-split{display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,48px); align-items:stretch}
.vals-media{border-radius:10px; overflow:hidden; min-height:340px}
.vals-media img{width:100%; height:100%; object-fit:cover; display:block}
.vals-list{display:flex; flex-direction:column; gap:8px}
.val-row{display:flex; gap:16px; align-items:flex-start; padding:16px 4px; border-bottom:1px solid var(--rule)}
.val-row:last-child{border-bottom:0}
.val-ico{flex:0 0 auto; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:11px;
  background:linear-gradient(140deg,rgba(224,138,30,.16),rgba(224,138,30,.06)); color:var(--amberD)}
.val-ico svg{width:24px; height:24px}
.val-row h3{font-size:18px; margin:2px 0 5px; color:var(--ink)}
.val-row p{font-size:16.5px; color:var(--muted); margin:0; line-height:1.5}
@media(max-width:900px){.vals-split{grid-template-columns:1fr}.vals-media{min-height:220px}}

/* clickable capability card -> deep sub-page */
a.cap-link{text-decoration:none; display:block}
a.cap-link .cap-more{display:inline-block; margin-top:12px; color:var(--amberD); font-weight:700; font-size:15.5px}
a.cap-link:hover .cap-more{text-decoration:underline}

/* Tighten vertical rhythm between stacked same-background sections */
section:not(.sec-paper):not(.band):not(.phead) + section:not(.sec-paper):not(.band):not(.phead){padding-top:0}
.band{padding:clamp(30px,3.5vw,48px) 0}

/* QA fix: prevent long email addresses overflowing on small screens */
address a, .office address, .foot address{overflow-wrap:anywhere}