/* =========================================================
   EVOLVE ENGINEERING & CONSULTANCY — design tokens
   Palette pulled from brand mark: deep navy field, flow-blue accent
   ========================================================= */
:root{
  --navy-950:#071726;
  --navy-900:#0B2540;
  --navy-800:#12314F;
  --navy-700:#1C4368;
  --blue-500:#2E7FD1;
  --blue-400:#4796DD;
  --blue-300:#74C1EE;
  --blue-100:#DCEEFB;
  --paper:#F5F7FA;
  --paper-2:#EAEFF4;
  --ink:#000000;
  --slate-600:#4A5B6C;
  --slate-400:#8093A6;
  --white:#FFFFFF;

  --font-display:'Overpass', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --maxw:1180px;
  --radius:14px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:300;letter-spacing:0.01em;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

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

:focus-visible{outline:2px solid var(--blue-300);outline-offset:3px;}

/* ---------- shared section chrome ---------- */
.section{padding:104px 0;}
.section-dark{background:var(--navy-900);color:var(--white);}
.section-light{background:var(--white);color:var(--ink);}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue-300);
  margin-bottom:14px;
}
.eyebrow-dark{color:var(--ink);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;font-size:15px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  border:1.5px solid transparent;
}
.btn-primary{background:var(--blue-500);color:var(--white);}
.btn-primary:hover{background:var(--blue-400);transform:translateY(-2px);}
.btn-ghost{border-color:rgba(255,255,255,.35);color:var(--white);}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08);transform:translateY(-2px);}
.btn-block{width:100%;}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:210;
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.site-header.is-scrolled{
  background:rgba(7,23,38,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{width:38px;height:38px;border-radius:9px;}
.brand-word{
  font-family:var(--font-display);
  color:var(--white);
  font-size:17px;font-weight:600;letter-spacing:.18em;
  line-height:1.1;
}
.brand-word small{
  display:block;font-family:var(--font-body);
  font-weight:400;letter-spacing:0;
  font-size:10.5px;color:var(--slate-400);
  text-transform:none;
}

.header-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;background:none;border:none;cursor:pointer;
  color:var(--white);border-radius:50%;
  transition:background .18s ease;
}
.icon-btn:hover{background:rgba(255,255,255,.1);}
.icon-btn svg{width:19px;height:19px;}

.main-nav{
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px,92vw);
  background:var(--navy-950);
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;
  padding:40px 52px;gap:24px;
  transform:translateX(100%);
  transition:transform .32s ease;
  z-index:200;
  box-shadow:-30px 0 70px -24px rgba(0,0,0,.55);
}
.main-nav.open{transform:translateX(0);}
.nav-scrim{
  position:fixed;inset:0;z-index:150;
  background:rgba(7,23,38,.45);
  opacity:0;pointer-events:none;
  transition:opacity .32s ease;
}
.nav-scrim.open{opacity:1;pointer-events:auto;}
body.nav-open{overflow:hidden;}
.main-nav a{
  font-size:20px;color:rgba(255,255,255,.82);
  position:relative;padding:6px 0;
  letter-spacing:.02em;
}
.main-nav a:hover{color:var(--white);}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--blue-300);transition:width .2s ease;
}
.main-nav a:hover::after{width:100%;}

.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;background:none;border:none;cursor:pointer;
  position:relative;z-index:100;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--white);transition:transform .2s ease, opacity .2s ease;}
.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);}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--navy-950) url('assets/hero-poster.jpg') center/cover no-repeat;
  color:var(--white);
  overflow:hidden;
  padding-top:76px;
}
.hero-video{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hero-clip{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-clip.is-active{opacity:1;}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,23,38,.55) 0%, rgba(7,23,38,0) 22%),
    linear-gradient(90deg, rgba(7,23,38,.70) 0%, rgba(7,23,38,.38) 45%, rgba(7,23,38,.12) 100%),
    linear-gradient(0deg, rgba(7,23,38,.50) 0%, rgba(7,23,38,0) 30%);
}
.hero-inner{
  position:relative;z-index:2;
  padding:80px 5vw 60px;
  max-width:640px;
  transform:translateY(-56px);
}
.hero h1{
  font-size:clamp(40px,6.8vw,80px);
  line-height:1;
  letter-spacing:0.015em;
  max-width:none;
  text-transform:uppercase;
  text-shadow:0 2px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
.hero h1 .line-bold{font-weight:600;}
.hero h1 .line-light{font-weight:200;}

.scroll-cue{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.4);
  border-radius:999px;z-index:2;
}
.scroll-cue span{
  position:absolute;top:8px;left:50%;width:4px;height:4px;
  background:var(--blue-300);border-radius:50%;
  transform:translateX(-50%);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%{opacity:1;top:8px;}
  70%{opacity:0;top:24px;}
  100%{opacity:0;top:24px;}
}

/* =========================================================
   FACTS
   ========================================================= */
.facts{
  background:var(--white);color:var(--ink);
  padding:72px 0;
  border-bottom:1px solid var(--paper-2);
}
.facts-grid{display:flex;flex-wrap:wrap;justify-content:center;}
.fact{flex:1 1 0;min-width:170px;text-align:center;padding:8px 20px;}
.fact + .fact{border-left:1px solid rgba(0,0,0,.14);}
.fact-icon{display:block;width:44px;height:44px;margin:0 auto 20px;color:var(--ink);}
.fact-icon svg{display:block;width:100%;height:100%;}
.fact-num{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(40px,4.6vw,60px);line-height:1;
  letter-spacing:.01em;color:var(--ink);
}
.fact-label{margin-top:14px;font-size:16px;color:var(--ink);}

/* =========================================================
   ABOUT
   ========================================================= */
.about{background:var(--white);color:var(--ink);padding:0 0 96px;}
.about-split{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:stretch;
}
.about-text{
  /* left edge lines up with the site's content column; right side gets breathing room */
  padding:96px 72px 88px max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
}
.about-text h2{
  font-size:clamp(38px,4.2vw,58px);line-height:1.05;
  margin-bottom:44px;
}
.about-lead{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(22px,2.1vw,29px);line-height:1.4;letter-spacing:.005em;
  max-width:34ch;
}
.about-body{
  margin-top:40px;padding-top:28px;max-width:56ch;
  border-top:1px solid rgba(0,0,0,.18);
  display:grid;gap:18px;
}
.about-body p{font-size:17px;line-height:1.7;}
.about-image{position:relative;margin:0;min-height:560px;overflow:hidden;}
.about-image img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 50%;
}
.about-values .competencies{margin-top:72px;}

.competencies{
  margin-top:72px;
  border-top:1px solid var(--paper-2);
  padding-top:36px;
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  justify-content:space-between;
}
.competencies-label{
  font-family:var(--font-mono);font-size:13px;color:var(--ink);
  max-width:280px;
}
.competencies-list{display:flex;flex-wrap:wrap;gap:14px;}
.competencies-list li{
  font-family:var(--font-display);font-weight:600;
  font-size:15px;
  padding:10px 22px;border-radius:999px;
  background:var(--navy-900);color:var(--white);
}

/* =========================================================
   GOVERNANCE
   ========================================================= */
.gov-tabs{
  display:flex;gap:36px;
  border-bottom:1px solid var(--paper-2);
  margin-bottom:48px;
}
.gov-tab{
  background:none;border:none;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:17px;
  color:var(--ink);opacity:.5;
  padding:0 0 16px;
  position:relative;
  transition:opacity .18s ease;
}
.gov-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--blue-500);
  transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.gov-tab:hover{opacity:1;}
.gov-tab.is-active{opacity:1;}
.gov-tab.is-active::after{transform:scaleX(1);}

.gov-panel{display:none;}
.gov-panel.is-active{display:block;}

.gov-member{
  display:grid;grid-template-columns:380px 1fr;gap:64px;
  align-items:start;
}
.gov-member[hidden]{display:none;}
.gov-member:not([hidden]){animation:govIn .5s cubic-bezier(.2,.7,.2,1);}
@keyframes govIn{from{opacity:0;transform:translateX(36px);}to{opacity:1;transform:none;}}
.gov-photo{
  position:relative;
  aspect-ratio:4/5;
  background:var(--paper);
  border:1px solid var(--paper-2);
  border-radius:var(--radius);
  box-shadow:0 24px 50px -26px rgba(11,37,64,.4);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.gov-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 15%;
  transform:scale(1.32);transform-origin:50% 12%;
}
.gov-photo svg{width:46%;height:46%;fill:none;stroke:var(--slate-400);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.gov-photo svg circle{fill:var(--slate-400);stroke:none;}
/* anonymous portrait: grey disc with a white head-and-shoulders silhouette */
.gov-photo--anon svg{display:block;width:100%;height:100%;stroke:none;}
.gov-photo--anon .anon-disc,.gov-thumb .anon-disc{fill:#999999;}
.gov-photo--anon .anon-person,.gov-thumb .anon-person{fill:#FFFFFF;}

/* thumbnail strip: pick who is featured above */
.gov-strip{background:var(--navy-800);padding:24px 0;}
.gov-thumbs{display:flex;justify-content:center;gap:20px;}
.gov-thumb{
  position:relative;width:78px;height:78px;padding:0;
  border-radius:50%;overflow:hidden;cursor:pointer;
  border:3px solid rgba(255,255,255,.85);background:#DDE3E9;
  opacity:.72;transition:opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.gov-thumb:hover{opacity:1;}
.gov-thumb.is-active{opacity:1;border-color:var(--blue-400);transform:scale(1.07);}
.gov-thumb img{
  width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  transform:scale(1.9);transform-origin:49% 44%;
}
.gov-thumb svg{display:block;width:100%;height:100%;}

.gov-info{padding-top:16px;}
.gov-info h3{font-size:clamp(26px,2.6vw,34px);font-weight:500;line-height:1.2;color:var(--ink);margin-bottom:10px;}
.gov-role{
  display:inline-block;
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-500);
  padding-bottom:20px;margin-bottom:24px;
  border-bottom:1px solid var(--paper-2);
}
.gov-bio{color:var(--ink);font-size:16.5px;line-height:1.75;max-width:56ch;}
.gov-more{
  display:inline-block;margin-top:16px;
  font-family:var(--font-mono);font-size:13.5px;
  color:var(--ink);border-bottom:1px solid transparent;
}
.gov-more:hover{border-bottom-color:var(--ink);}

@media (max-width:760px){
  .gov-member{grid-template-columns:1fr;gap:28px;}
  .gov-photo{max-width:300px;width:100%;}
  .gov-tabs{gap:24px;}
}

/* =========================================================
   SERVICES
   ========================================================= */
.section.svc{padding-bottom:0;}
.svc .section-head{margin-bottom:56px;}

/* one full-bleed row per service line; the photo alternates sides */
.svc-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  background:var(--navy-900);
}
.svc-row:nth-of-type(even){background:var(--navy-950);}
.svc-row:nth-of-type(even) .svc-image{order:2;}

.svc-image{position:relative;margin:0;min-height:560px;overflow:hidden;}
.svc-image img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s ease;
}
.svc-row:hover .svc-image img{transform:scale(1.045);}

.svc-text{
  align-self:center;
  padding:88px 72px 88px 72px;
}
.svc-row:nth-of-type(odd) .svc-text{padding-right:max(28px, calc((100vw - var(--maxw)) / 2 + 28px));}
.svc-row:nth-of-type(even) .svc-text{padding-left:max(28px, calc((100vw - var(--maxw)) / 2 + 28px));}

.svc-index{
  display:block;margin-bottom:18px;
  font-family:var(--font-mono);font-size:14px;letter-spacing:.16em;
  color:var(--blue-300);
}
.svc-text h3{
  font-size:clamp(38px,4.4vw,62px);line-height:1.02;
  color:var(--white);margin-bottom:36px;
}
.svc-list{max-width:520px;}
.svc-list li{
  display:flex;align-items:center;gap:16px;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:clamp(16px,1.35vw,19px);color:rgba(255,255,255,.94);
}
.svc-list li:last-child{border-bottom:1px solid rgba(255,255,255,.18);}
.svc-list li::before{
  content:"";flex:none;width:14px;height:1px;background:var(--blue-300);
  transition:width .25s ease;
}
.svc-list li:hover::before{width:32px;}

/* =========================================================
   EXPERTISE — the concept-to-commissioning journey
   ========================================================= */
.journey{position:relative;aspect-ratio:1200/460;margin:8px 0 0;}
.journey-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.journey-track{fill:none;stroke:#E6EBF0;stroke-width:6;stroke-linecap:round;}
.journey-progress{
  fill:none;stroke:url(#journeyGrad);stroke-width:6;stroke-linecap:round;
  transition:stroke-dashoffset 3.2s cubic-bezier(.45,.05,.25,1);
}
.journey-steps{position:absolute;inset:0;list-style:none;}
.step{position:absolute;left:var(--x);top:var(--y);width:0;height:0;}
.step-node{
  position:absolute;left:0;top:0;translate:-50% -50%;
  width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--white);color:var(--navy-900);
  border:2px solid var(--blue-500);
  box-shadow:0 0 0 9px rgba(46,127,209,.09), 0 16px 30px -16px rgba(11,37,64,.45);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.3), background .25s ease, color .25s ease;
}
.step-node svg{width:34px;height:34px;}
.step:hover .step-node{background:var(--blue-500);color:var(--white);transform:scale(1.1);}
.step--final .step-node{background:var(--navy-900);border-color:var(--navy-900);color:var(--white);}
.step--final:hover .step-node{background:var(--blue-500);border-color:var(--blue-500);}
.step-label{position:absolute;left:0;translate:-50% 0;width:210px;text-align:center;}
.step--down .step-label{top:56px;}
.step--up .step-label{bottom:56px;}
.step-num{
  display:block;margin-bottom:6px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;color:var(--ink);
}
.step-label h4{font-size:19px;font-weight:500;line-height:1.25;color:var(--ink);letter-spacing:.005em;}

/* draw-on-scroll: only armed when JavaScript is available, so the static page is never blank */
.journey.is-armed:not(.is-drawn) .step-node,
.journey.is-armed:not(.is-drawn) .step-label{opacity:0;}
.journey.is-drawn .step-node{animation:stepIn .7s cubic-bezier(.2,.9,.3,1.25) var(--d) backwards;}
.journey.is-drawn .step-label{animation:labelIn .7s ease var(--d) backwards;}
@keyframes stepIn{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}
@keyframes labelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* =========================================================
   SECTORS
   ========================================================= */
.section.sectors{padding-bottom:0;}
.sectors .section-head{margin-bottom:56px;}
.sector-showcase{
  display:flex;
  height:clamp(520px,46vw,680px);
  background:var(--navy-950);
}
.sector-panel{
  position:relative;flex:1 1 0;min-width:0;
  overflow:hidden;isolation:isolate;
  transition:flex-grow .7s cubic-bezier(.2,.7,.2,1);
}
.sector-panel + .sector-panel{border-left:1px solid rgba(255,255,255,.16);}
.sector-panel img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;
  transition:transform 1.3s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.sector-panel::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(4,14,28,.9) 0%, rgba(4,14,28,.5) 34%, rgba(4,14,28,.08) 62%, rgba(4,14,28,.28) 100%);
}
.sector-body{position:absolute;left:0;right:0;bottom:0;padding:0 32px 44px;}
.sector-index{
  display:block;margin-bottom:14px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;
  color:var(--blue-300);
}
.sector-panel h3{
  font-size:clamp(22px,2vw,30px);font-weight:400;line-height:1.15;color:var(--white);
}
.sector-panel h3::after{
  content:"";display:block;width:36px;height:2px;margin-top:18px;
  background:var(--blue-300);transition:width .5s ease;
}
.sector-panel p{
  max-width:34ch;font-size:15px;line-height:1.55;color:rgba(255,255,255,.86);
  max-height:0;margin-top:0;opacity:0;overflow:hidden;
  transition:max-height .6s ease, opacity .5s ease .1s, margin-top .5s ease;
}
.sector-panel:hover,
.sector-panel:focus-within,
.sector-panel:focus-visible{flex-grow:1.7;outline:none;}
.sector-panel:hover img,
.sector-panel:focus-visible img{transform:scale(1.06);}
.sector-panel:hover h3::after,
.sector-panel:focus-visible h3::after{width:72px;}
.sector-panel:hover p,
.sector-panel:focus-visible p{max-height:130px;margin-top:16px;opacity:1;}
.sector-showcase:hover .sector-panel:not(:hover) img{filter:brightness(.72) saturate(.85);}
.sector-panel:focus-visible{box-shadow:inset 0 0 0 3px var(--blue-300);}

/* =========================================================
   PROJECT REFERENCES
   ========================================================= */
.refs .section-head{margin-bottom:48px;}
.section-sub{
  margin-top:14px;
  font-size:clamp(16px,1.6vw,19px);
  font-weight:400;color:var(--slate-600);
}
.ref-grid{display:flex;flex-direction:column;gap:28px;}
.ref-card{
  display:grid;grid-template-columns:1.1fr 1fr;
  border-radius:var(--radius);overflow:hidden;
  background:var(--white);
  border:1px solid var(--paper-2);
  box-shadow:0 30px 60px -34px rgba(11,37,64,.3);
  transition:box-shadow .3s ease, transform .3s ease;
}
.ref-card:hover{box-shadow:0 36px 70px -30px rgba(11,37,64,.4);transform:translateY(-3px);}
.ref-card--flip{grid-template-columns:1fr 1.1fr;}
.ref-card--flip .ref-card-media{order:2;}
.ref-card-media{position:relative;overflow:hidden;min-height:340px;background:var(--navy-950);}
.ref-card-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.ref-card:hover .ref-card-media img{transform:scale(1.05);}
.ref-card-body{
  display:flex;flex-direction:column;justify-content:center;
  padding:48px;
}
.ref-card-meta{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-500);margin-bottom:16px;
}
.ref-card-body h3{font-size:clamp(24px,2.4vw,30px);font-weight:400;color:var(--ink);margin-bottom:18px;line-height:1.2;}
.ref-card-body p{font-size:15.5px;line-height:1.75;color:var(--slate-600);max-width:46ch;}
.ref-card-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:28px;
  font-family:var(--font-mono);font-size:13.5px;letter-spacing:.03em;
  color:var(--ink);font-weight:500;
}
.ref-card-link svg{width:16px;height:16px;transition:transform .25s ease;}
.ref-card:hover .ref-card-link svg{transform:translateX(5px);}

@media (max-width:760px){
  .ref-card,.ref-card--flip{grid-template-columns:1fr;}
  .ref-card--flip .ref-card-media{order:0;}
  .ref-card-media{min-height:220px;}
  .ref-card-body{padding:32px 28px;}
}

/* =========================================================
   GLOBAL PRESENCE
   ========================================================= */
.gmap{
  background:radial-gradient(ellipse at 50% 42%, #EBF7FE 0%, #D3EAFA 52%, #B4D9F3 100%);
  overflow:hidden;
}
.gmap-stage{
  position:relative;
  max-width:1320px;margin:0 auto;
  aspect-ratio:1000/490.1;
}
.gmap-canvas{position:absolute;inset:0;}
.gmap-world{
  display:block;width:100%;height:100%;
  filter:drop-shadow(5px 8px 9px rgba(11,37,64,.2));
  user-select:none;pointer-events:none;
}
.gmap-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.gmap-lines line{
  stroke:var(--navy-800);stroke-width:1.4;stroke-dasharray:5 5;
  vector-effect:non-scaling-stroke;opacity:.7;
}

/* office markers */
.gmap-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;}
.gmap-pin i{
  position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;
  background:var(--navy-800);border:3px solid var(--white);
  box-shadow:0 2px 8px rgba(11,37,64,.4);
}
.gmap-pin i::before,.gmap-pin i::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--blue-500);opacity:0;
  animation:pinPulse 2.8s ease-out infinite;
}
.gmap-pin i::after{animation-delay:1.4s;}
@keyframes pinPulse{0%{transform:scale(1);opacity:.75;}100%{transform:scale(3.6);opacity:0;}}
.gmap-pin b{
  position:absolute;left:16px;top:-9px;white-space:nowrap;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy-900);
  text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 8px #fff;
}
.gmap-pin--west b{left:auto;right:16px;}

/* office cards float over the map on desktop */
.gmap-cards{display:contents;}
.office-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:22px 24px 24px;
  box-shadow:0 22px 44px -18px rgba(11,37,64,.4), 0 2px 6px rgba(11,37,64,.08);
}
.gmap .office-card{
  position:absolute;width:clamp(230px,20vw,290px);
  border-top:3px solid var(--blue-500);
}
.gmap .office-card--uae{left:71.5%;bottom:62%;width:clamp(260px,23vw,335px);}
.gmap .office-card--ke{left:64.2%;top:66%;width:clamp(230px,19vw,270px);}
.office-tag{
  display:inline-block;
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);
  background:var(--blue-100);
  padding:5px 11px;border-radius:999px;
  margin-bottom:12px;
}
.office-card h3{font-size:20px;margin-bottom:8px;}
.office-address{color:var(--ink);font-size:13.5px;line-height:1.5;margin-bottom:8px;}
.office-phone{font-family:var(--font-mono);font-size:13px;color:var(--ink);}
.registration-note{
  margin-top:36px;color:var(--ink);font-size:14px;
  font-family:var(--font-mono);
}

/* =========================================================
   CLIENTS
   ========================================================= */
.section-light + .section-light{border-top:1px solid var(--paper-2);}
.client-wall{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--paper-2);border-left:1px solid var(--paper-2);
}
.client-wall li{
  display:flex;align-items:center;justify-content:center;
  height:128px;padding:0 22px;
  background:var(--white);
  border-right:1px solid var(--paper-2);border-bottom:1px solid var(--paper-2);
  transition:opacity .6s ease calc(var(--i) * 28ms), transform .6s ease calc(var(--i) * 28ms), background-color .3s ease;
}
.client-wall img{
  display:block;width:100%;max-width:150px;height:68px;object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .35s ease;
}
.client-wall li:hover{background:#F6F9FC;}
.client-wall li:hover img{transform:scale(1.07);}
/* draw-in on scroll: only armed when JavaScript is available */
.client-wall.is-armed li{opacity:0;transform:translateY(12px);}
.client-wall.is-armed.is-in li{opacity:1;transform:none;}
.client-more{
  display:flex;align-items:center;gap:24px;
  margin-top:48px;
}
.client-more-num{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(48px,6vw,76px);line-height:1;color:var(--ink);
}
.client-more p{max-width:380px;font-size:16px;line-height:1.5;color:var(--ink);}
.client-more strong{font-weight:600;}

/* =========================================================
   CAREERS
   ========================================================= */
.section.careers{padding-top:0;}
.career-hero{
  position:relative;overflow:hidden;
  color:var(--white);
  margin-bottom:88px;
}
.career-hero > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;
}
.career-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(7,23,38,.82) 0%, rgba(7,23,38,.6) 45%, rgba(7,23,38,.35) 100%),
    linear-gradient(0deg, rgba(7,23,38,.55) 0%, rgba(7,23,38,0) 45%);
}
.career-hero-inner{
  position:relative;z-index:1;
  min-height:clamp(340px,32vw,460px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:72px;padding-bottom:52px;
}
.career-hero h2{font-size:clamp(34px,4.4vw,56px);font-weight:300;line-height:1.05;color:var(--white);}
.career-hero h2::after{
  content:"";display:block;width:64px;height:2px;margin-top:20px;
  background:var(--blue-300);
}
.career-hero-sub{
  max-width:56ch;margin-top:20px;
  font-size:clamp(15px,1.4vw,17px);line-height:1.7;color:rgba(255,255,255,.88);
}
.career-sub{
  font-size:clamp(22px,2.2vw,28px);font-weight:400;color:var(--ink);
  margin-bottom:28px;line-height:1.2;
}
.career-why,.career-roles{margin-bottom:96px;}

.career-why-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px;
}
.career-why-grid li{border-top:1px solid var(--paper-2);padding:28px 0 8px;}
.career-why-num{
  display:block;margin-bottom:18px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;color:var(--blue-500);
}
.career-why-grid h4{font-size:19px;font-weight:500;color:var(--ink);margin-bottom:10px;line-height:1.25;}
.career-why-grid p{font-size:15px;line-height:1.7;color:var(--slate-600);}

.career-roles-intro{max-width:60ch;font-size:16px;line-height:1.7;color:var(--slate-600);margin:-8px 0 32px;}
.career-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.career-role{
  width:100%;height:100%;min-height:84px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;text-align:left;cursor:pointer;
  background:var(--white);border:1px solid var(--paper-2);border-radius:var(--radius);
  font-family:var(--font-display);font-size:17px;font-weight:400;line-height:1.3;color:var(--ink);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.career-role svg{flex:0 0 auto;width:18px;height:18px;color:var(--blue-500);transition:transform .25s ease;}
.career-role:hover,.career-role:focus-visible{
  border-color:var(--blue-400);transform:translateY(-2px);
  box-shadow:0 20px 40px -26px rgba(11,37,64,.4);
}
.career-role:hover svg{transform:translateX(4px);}

.career-apply{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;
  background:var(--paper);border-radius:var(--radius);padding:56px;
}
.career-apply-copy p{max-width:44ch;font-size:16px;line-height:1.75;color:var(--slate-600);}
.form-row select{
  width:100%;
  border:1.5px solid var(--paper-2);border-radius:9px;
  padding:12px 14px;
  font-family:var(--font-body);font-size:14.5px;color:var(--ink);
  background:var(--paper);
}
.form-row select:focus{outline:none;border-color:var(--blue-400);background:var(--white);}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;
}
.contact-row{margin-bottom:28px;}
.contact-label{
  display:block;font-family:var(--font-mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink);margin-bottom:8px;
}
.contact-row p{font-size:16px;color:var(--ink);}
.contact-row a:hover{color:var(--blue-500);}

.contact-form{
  background:var(--white);
  border:1px solid var(--paper-2);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:0 18px 40px -28px rgba(11,37,64,.35);
}
.form-row{margin-bottom:18px;}
.form-row label{
  display:block;font-size:13.5px;font-weight:600;margin-bottom:8px;
}
.form-row input,.form-row textarea{
  width:100%;
  border:1.5px solid var(--paper-2);
  border-radius:9px;
  padding:12px 14px;
  font-family:var(--font-body);font-size:14.5px;
  background:var(--paper);
  resize:vertical;
}
.form-row input:focus,.form-row textarea:focus{
  outline:none;border-color:var(--blue-400);background:var(--white);
}
.form-note{margin-top:14px;font-size:13.5px;color:var(--ink);text-align:center;}

/* =========================================================
   PROJECT DETAIL PAGE
   ========================================================= */
.proj-hero{
  position:relative;
  height:min(560px,72vh);
  min-height:420px;
  color:var(--white);
  overflow:hidden;
}
.proj-hero > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.proj-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(7,23,38,.72) 0%, rgba(7,23,38,.15) 30%, rgba(7,23,38,.2) 50%, rgba(7,23,38,.82) 100%);
}
.proj-hero-inner{
  position:relative;z-index:1;
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:56px;
}
.proj-back{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.03em;
  color:rgba(255,255,255,.85);margin-bottom:auto;margin-top:104px;
  transition:color .2s ease;
}
.proj-back:hover{color:var(--white);}
.proj-back svg{width:16px;height:16px;}
.proj-hero-meta{
  display:block;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:#BFE4FA;margin-bottom:16px;
  text-shadow:0 1px 14px rgba(0,0,0,.65);
}
.proj-hero-inner h1{
  font-size:clamp(32px,5vw,56px);font-weight:300;line-height:1.08;
  max-width:16ch;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}

.proj-body{padding-top:88px;}
.proj-grid{
  display:grid;grid-template-columns:280px 1fr;gap:72px;
  align-items:start;
}
.proj-facts dl{border-top:1px solid var(--paper-2);}
.proj-facts dl > div{padding:20px 0;border-bottom:1px solid var(--paper-2);}
.proj-facts dt{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate-400);margin-bottom:8px;
}
.proj-facts dd{font-size:15px;line-height:1.5;color:var(--ink);}
.proj-copy{max-width:66ch;}
.proj-lead{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,2vw,25px);line-height:1.5;color:var(--ink);margin-bottom:28px;}
.proj-copy > p{font-size:16.5px;line-height:1.8;color:var(--ink);margin-bottom:28px;}
.proj-inline-img{
  margin:40px 0;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(11,37,64,.4);
}
.proj-inline-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.proj-copy h2{font-size:clamp(22px,2.2vw,27px);font-weight:400;color:var(--ink);margin:12px 0 20px;}
.proj-disciplines{display:flex;flex-wrap:wrap;gap:12px;}
.proj-disciplines li{
  font-family:var(--font-mono);font-size:13.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--paper-2);
  padding:10px 18px;border-radius:999px;
}

@media (max-width:900px){
  .proj-grid{grid-template-columns:1fr;gap:40px;}
  .proj-facts dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;}
  .proj-facts dl > div{border-bottom:1px solid var(--paper-2);}
}
@media (max-width:600px){
  .proj-facts dl{grid-template-columns:1fr;}
  .proj-hero-inner{padding-bottom:36px;}
  .proj-back{margin-top:88px;}
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,.75);padding-top:72px;}
.footer-inner{
  display:grid;grid-template-columns:1.2fr 1.6fr .9fr 1.2fr;gap:32px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand{display:flex;align-items:center;gap:12px;}
.footer-brand img{width:36px;height:36px;border-radius:8px;}
.footer-brand p{
  font-family:var(--font-display);color:var(--white);
  font-size:14px;font-weight:700;letter-spacing:.06em;line-height:1.3;
}
.footer-brand span{font-family:var(--font-body);font-weight:400;color:rgba(255,255,255,.5);font-size:11px;}
.footer-col h4{
  font-size:13px;color:var(--white);margin-bottom:16px;
  text-transform:uppercase;letter-spacing:.06em;
}
.footer-col a{display:block;font-size:14.5px;margin-bottom:10px;color:rgba(255,255,255,.65);}
.footer-col a:hover{color:var(--blue-300);}
/* longer link list runs in two columns */
.footer-col--nav{display:grid;grid-template-columns:repeat(2,max-content);column-gap:40px;align-content:start;}
.footer-col--nav h4{grid-column:1 / -1;}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 28px;font-size:13px;color:rgba(255,255,255,.45);
}
.footer-tagline{font-family:var(--font-mono);color:var(--blue-300);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .facts-grid{row-gap:36px;}
  .fact{flex:0 0 33.333%;}
  .fact + .fact{border-left:none;}
  .about-split{grid-template-columns:1fr;}
  .about-text{padding:72px 28px 48px;}
  .about-image{min-height:0;aspect-ratio:16/10;}
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .career-why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;}
  .career-role-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .career-apply{grid-template-columns:1fr;gap:32px;padding:40px 32px;}
  .career-why,.career-roles{margin-bottom:72px;}
  .sector-showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;}
  .sector-panel{min-height:440px;}
  .sector-panel + .sector-panel{border-left:none;}
  .sector-panel:nth-child(even){border-left:1px solid rgba(255,255,255,.16);}
  .sector-panel:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16);}
  .sector-panel p{max-height:none;margin-top:16px;opacity:1;}
  .sector-panel h3::after{width:56px;}
  .svc-row{grid-template-columns:1fr;}
  .svc-row:nth-of-type(even) .svc-image{order:0;}
  .svc-image{min-height:0;aspect-ratio:16/10;}
  .svc-row:nth-of-type(odd) .svc-text,
  .svc-row:nth-of-type(even) .svc-text{padding:56px 28px 64px;}
  .client-wall{grid-template-columns:repeat(5,minmax(0,1fr));}
  .client-wall li{height:112px;padding:0 16px;}
  .gmap-lines{display:none;}
  .gmap-stage{aspect-ratio:auto;padding:0 0 28px;}
  .gmap-canvas{position:relative;inset:auto;aspect-ratio:1000/490.1;}
  .gmap-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0 28px;}
  .gmap .office-card{position:static;width:auto;}
  .gov-member{grid-template-columns:300px 1fr;gap:44px;}
  .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:760px){
  .section{padding:72px 0;}
  .facts{padding:56px 0;}
  .fact{flex:0 0 50%;min-width:0;}
  .gov-member{grid-template-columns:1fr;gap:32px;}
  .client-wall{grid-template-columns:repeat(3,minmax(0,1fr));}
  .client-wall li{height:96px;padding:0 14px;}
  .client-wall img{height:48px;}
  .client-more{flex-direction:column;align-items:flex-start;gap:12px;margin-top:36px;}
  .career-why-grid,.career-role-grid{grid-template-columns:1fr;}
  .career-apply{padding:28px 20px;}
  .gmap-cards{grid-template-columns:1fr;padding:0 20px;}
  .gmap-pin b{display:none;}
  .sector-showcase{grid-template-columns:1fr;}
  .sector-panel{min-height:380px;}
  .sector-panel:nth-child(even){border-left:none;}
  .sector-panel + .sector-panel{border-top:1px solid rgba(255,255,255,.16);}
  .sector-body{padding:0 24px 32px;}
  .main-nav{padding:32px 32px;}
  .footer-inner{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;}
}

/* expertise journey: on narrower screens the wave becomes a vertical timeline */
@media (max-width:900px){
  .journey{aspect-ratio:auto;margin:0;}
  .journey-svg{display:none;}
  .journey-steps{position:relative;inset:auto;display:grid;}
  .step{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:64px;padding:0 0 44px 92px;}
  .step:last-child{padding-bottom:0;}
  .step-node{left:0;top:0;translate:none;width:64px;height:64px;}
  .step-node svg{width:30px;height:30px;}
  .step::before{
    content:"";position:absolute;left:31px;top:64px;bottom:-4px;width:2px;
    background:linear-gradient(var(--blue-300), var(--blue-500));
  }
  .step:last-child::before{display:none;}
  .step-label,.step--down .step-label,.step--up .step-label{
    position:static;translate:none;width:auto;text-align:left;padding-top:8px;
  }
  .journey.is-drawn .step-node,
  .journey.is-drawn .step-label{animation-delay:calc(var(--i) * .12s);}
}
