/* ==========================================================================
   Envision Solutions design system
   Loaded site wide by the Envision Design System plugin. Elementor widgets
   carry no styling of their own: every rule lives here, so one change moves
   the whole site rather than one page.

   Order: tokens, homepage sections, shared page furniture, page components,
   motion, responsive. Colours and type are the brand book values.
   ========================================================================== */
:root{
  --navy:#003057; --signal:#009ADE; --signal-t:#0070A3; --signal-d:#4CBBEB; --ink:#010C16; --ink2:#071420;
  --n0:#FFFFFF; --n50:#F4F6F8; --n100:#E8ECF0; --n200:#D4DCE3; --n300:#B6C1CB;
  --n400:#616F7B; --n500:#5A6874; --n600:#556370; --n800:#24303B;
  --warm:#F6F3EE; --warm-line:#E3DCD1;
  --sans:"Stolzl","Helvetica Neue",Arial,sans-serif;
  --display:"CorbertWide","Stolzl",Arial,sans-serif;
  --ar:"Noor","Stolzl",sans-serif;
  --serif:"Stolzl","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --page:1200px; --wide:1320px;
  --e:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--n0);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%}
a{text-decoration:none;color:inherit}
.c{max-width:var(--page);margin:0 auto;padding:0 80px;position:relative;z-index:2}
@media(max-width:1439px){.c{padding:0 64px}}
@media(max-width:1199px){.c{padding:0 48px}}
@media(max-width:1024px){.c{padding:0 40px}}
@media(max-width:880px){.c{padding:0 32px}}
@media(max-width:600px){.c{padding:0 20px}}
@media(max-width:360px){.c{padding:0 16px}}

.eb{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--signal-t);display:block}
.eb.dk{color:var(--navy)}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--n500)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.024em;text-wrap:balance}
h2{font-size:clamp(30px,4.2vw,50px);line-height:1.08}
p{margin:0}
.lede{font-size:clamp(16.5px,1.5vw,19px);line-height:1.64;color:var(--n600);max-width:34em}
.sec.ink .lede{color:rgba(255,255,255,.68)}

/* ---------- REVEALS ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}
.rv2{transition-delay:.08s}.rv3{transition-delay:.16s}.rv4{transition-delay:.24s}.rv5{transition-delay:.32s}
.mask{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.mask > span{display:block;transform:translateY(102%);transition:transform 1.05s var(--e)}
.mask.in > span{transform:none}
.ml2 > span{transition-delay:.08s}.ml3 > span{transition-delay:.16s}
.drawline{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e)}
.drawline.in{transform:scaleX(1)}

/* ---------- BUTTONS ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;padding:15px 26px;border-radius:2px;border:1px solid transparent;line-height:1;cursor:pointer;overflow:hidden;isolation:isolate}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleY(0);transform-origin:bottom;transition:transform .34s var(--e);z-index:1}
.btn:hover::before{transform:scaleY(1)}
.btn-p{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-w{background:#fff;color:var(--ink);border-color:#fff}
.btn-w:hover{color:#fff}
.btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-o::before{background:#fff}
.btn-o:hover{color:var(--ink);border-color:#fff}
.alink{display:inline-flex;align-items:center;gap:11px;font-size:14.5px;font-weight:500;color:var(--navy)}
.alink .r{width:20px;height:1px;background:currentColor;position:relative;transition:width .28s var(--e)}
.alink .r::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.alink:hover .r{width:40px}
.alink.lt{color:#fff}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ---------- SCROLL PROGRESS ---------- */
#prog{position:fixed;top:0;left:0;height:2px;background:var(--signal);width:0;z-index:100;transition:width .1s linear}

/* ---------- HEADER ---------- */
.util{background:var(--ink);color:rgba(255,255,255,.6);font-size:12px;position:relative;z-index:70}
.util .c{display:flex;justify-content:flex-end;gap:26px;height:38px;align-items:center}
.util a:hover{color:#fff}
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--n200);transition:height .3s var(--e)}
header .c{display:flex;align-items:center;justify-content:space-between;height:84px;gap:32px;transition:height .3s var(--e)}
header.small .c{height:66px}
.logo{display:block;flex-shrink:0;line-height:0}
.logo img{height:40px;width:auto;display:block;transition:opacity .25s}
.logo:hover img{opacity:.82}
header.small .logo img{height:34px}
.logo.footer img{height:46px}
@media(max-width:600px){.logo img{height:32px}}
nav.pri{display:flex;gap:32px;align-items:center;margin-left:auto}
nav.pri > a,.hasmenu > a{font-size:15px;font-weight:500;color:var(--n800);position:relative;padding:6px 0}
nav.pri > a::after,.hasmenu > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e)}
nav.pri > a:hover::after,.hasmenu:hover > a::after{transform:scaleX(1)}
.hasmenu{position:relative;padding:28px 0}
.drop{position:absolute;top:100%;left:-26px;background:#fff;border:1px solid var(--n200);border-top:2px solid var(--navy);min-width:352px;padding:10px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .28s var(--e),visibility .2s;box-shadow:0 16px 40px rgba(1,12,22,.09)}
.hasmenu:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:12px 26px;font-size:14.5px;color:var(--n800);transition:background .16s,color .16s,padding-left .22s var(--e)}
.drop a:hover{background:var(--n50);color:var(--navy);padding-left:32px}
.drop .sep{display:block;border-top:1px solid var(--n200);margin:8px 0}
.drop .all{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--n500)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{width:22px;height:1.5px;background:var(--ink);display:block}
@media(max-width:1120px){nav.pri{display:none}.burger{display:flex}.navcta{display:none}}

/* ---------- CANVAS BACKDROPS ---------- */
.bgc{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- HERO ---------- */
.hero{background:var(--ink);color:#fff;padding:clamp(72px,9vw,140px) 0 0;position:relative;overflow:hidden;min-height:auto}
.hero .glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(78% 68% at 74% 40%,rgba(0,154,222,.20) 0%,rgba(0,154,222,.05) 38%,rgba(1,12,22,0) 66%)}
.hero .c{z-index:4}
.orb{position:absolute;top:47%;right:-3%;z-index:2;pointer-events:none;
  width:clamp(360px,46vw,690px);aspect-ratio:1/1;
  transform:translateY(-50%) translate3d(var(--ox,0px),var(--oy,0px),0)}
.orbwrap{position:absolute;inset:0;will-change:transform;animation:orbfloat 16s ease-in-out infinite}
.orb img{width:100%;height:100%;display:block;object-fit:contain;
  filter:saturate(.68) contrast(1.05) brightness(1.04)}
.orb .sweep{position:absolute;inset:-6%;border-radius:50%;pointer-events:none;mix-blend-mode:overlay;
  background:conic-gradient(from 0deg,rgba(0,154,222,0) 0deg,rgba(0,154,222,.34) 62deg,rgba(255,255,255,.16) 96deg,rgba(0,154,222,0) 172deg,rgba(0,154,222,0) 360deg);
  animation:sweep 13s linear infinite}
.orb .halo{position:absolute;inset:-22%;border-radius:50%;pointer-events:none;will-change:opacity;
  background:radial-gradient(circle at 50% 50%,rgba(0,154,222,.26) 0%,rgba(0,154,222,.07) 42%,rgba(1,12,22,0) 68%)}
@keyframes orbfloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-16px,0) scale(1.022)}}
@keyframes sweep{to{transform:rotate(360deg)}}
.hero-inner{max-width:66%}
.hero h1{font-size:clamp(33px,4.7vw,60px);line-height:1.04;letter-spacing:-.028em;margin:30px 0 32px}
.hero h1 .mask > span{white-space:nowrap}
.hero .sub{font-size:clamp(16px,1.5vw,19px);line-height:1.62;color:rgba(255,255,255,.72);max-width:42ch;margin-bottom:42px}
.acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:clamp(52px,7vw,104px)}
.std-rail{display:flex;align-items:center;flex-wrap:wrap;gap:0 26px;border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);padding:18px 0;margin-bottom:0;position:relative;z-index:4}
.std-rail .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.std-rail span:not(.lbl){font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:rgba(255,255,255,.72);
  display:flex;align-items:center;gap:26px}
.std-rail span:not(.lbl)::before{content:"";width:3px;height:3px;background:rgba(255,255,255,.3);border-radius:50%;flex-shrink:0}
.hero-strip{border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:repeat(5,1fr);position:relative;z-index:4;margin-top:0}
.hero-strip > div{padding:clamp(26px,2.6vw,36px) clamp(14px,1.8vw,24px) clamp(24px,2.4vw,32px) 0;border-right:1px solid rgba(255,255,255,.09)}
.hero-strip > div + div{padding-left:clamp(16px,2vw,28px)}
.hero-strip > div:last-child{border-right:0}
.hero-strip .v{font-size:clamp(30px,3.4vw,42px);font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.hero-strip .k{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.48);margin-top:12px}
@media(max-width:1100px){.hero-inner{max-width:78%}.orb{right:-24%;opacity:.5}}
@media(max-width:860px){.hero{padding-top:92px}.hero-inner{max-width:100%}
  .hero h1 .mask > span{white-space:normal}
  .orb{top:14%;right:-36%;width:clamp(340px,96vw,540px);opacity:.28}
  .acts{margin-bottom:64px}
  .std-rail{gap:0 18px}.std-rail span:not(.lbl){gap:18px;font-size:11px}}
@media(max-width:760px){.hero-strip{grid-template-columns:repeat(2,1fr)}.hero-strip > div{border-bottom:1px solid rgba(255,255,255,.09)}.hero-strip > div + div{padding-left:0}.hero-strip > div:nth-child(even){padding-left:clamp(16px,2vw,28px)}}

.mapwrap{position:relative;width:min(1440px,calc(100vw - 40px));margin-left:calc((100% - min(1440px,100vw - 40px)) / 2);aspect-ratio:2/1;min-height:560px;margin-top:20px}
.mapwrap canvas{width:100%;height:100%;display:block}
.mtip{position:absolute;transform:translate(-50%,-100%);pointer-events:none;opacity:0;transition:opacity .18s;
  background:rgba(1,12,22,.94);border:1px solid rgba(0,154,222,.42);color:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 11px;white-space:nowrap;z-index:5}
.mtip.on{opacity:1}
.mkrail{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid rgba(255,255,255,.18);margin-top:56px}
.mkrail > div{padding:16px 14px 18px 0;border-right:1px solid rgba(255,255,255,.09)}
.mkrail > div:last-child{border-right:0}
.mkrail .p{display:block;font-size:15px;color:#fff;line-height:1.3}
.mkrail .q{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:8px;line-height:1.5}
.mkrail .hq .p{color:#009ADE;font-weight:500}
.mkrail .hq .q{color:rgba(0,154,222,.75)}
@media(max-width:1024px){.mkrail{grid-template-columns:repeat(4,1fr)}.mkrail > div{border-bottom:1px solid rgba(255,255,255,.09)}}
@media(max-width:600px){.mkrail{grid-template-columns:repeat(2,1fr)}}

.mlegend{position:absolute;left:0;bottom:-6px;display:flex;gap:26px;font-family:var(--mono);font-size:12px;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.mlegend span{display:flex;align-items:center;gap:8px}
.mlegend span::before{content:"";width:9px;height:9px;border-radius:50%;flex-shrink:0}
.mlegend .hq::before{background:#009ADE;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.mlegend .dl::before{background:rgba(255,255,255,.8)}
@media(max-width:900px){.mapwrap{aspect-ratio:2/1}}
/* ---------- MEDIA ---------- */
.fig{position:relative;overflow:hidden;background:#0A1621;margin:0}
.fig img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.08) translateY(var(--py,0px));transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.fig:hover img{transform:scale(1.12) translateY(var(--py,0px))}
.fig:hover img{transform:scale(1.06)}
.fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;
  background:linear-gradient(180deg,rgba(1,12,22,0) 0%,rgba(1,12,22,.86) 72%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.action{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:1px;background:var(--n200)}
.action .fig{min-height:320px}
@media(max-width:880px){.action{grid-template-columns:1fr 1fr}.action .fig:first-child{grid-column:1/-1}}
@media(max-width:560px){.action{grid-template-columns:1fr}}
/* ---------- PLACEHOLDER ---------- */

/* ---------- SECTIONS ---------- */
section{position:relative}
.sec{padding:clamp(64px,8.6vw,128px) 0;position:relative;overflow:hidden}
.sec.tight{padding:clamp(52px,6.6vw,96px) 0}
.sec.n50{background:var(--n50)}
.sec.ink{background:var(--ink);color:#fff}
.sec.warm{background:var(--warm)}
.shd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,4vw,60px);align-items:end;margin-bottom:clamp(36px,4.6vw,64px)}
.shd h2{max-width:17ch;margin-top:22px}
@media(max-width:880px){.shd{grid-template-columns:1fr;gap:24px;margin-bottom:44px}}

/* ---------- MODEL ---------- */
.modelwrap{position:relative}
.mrail{position:absolute;top:0;left:0;right:0;height:1px;background:var(--n200)}
.mrail::after{content:"";position:absolute;top:-4px;right:-1px;width:7px;height:7px;border-radius:50%;
  background:var(--n0);box-shadow:inset 0 0 0 1px var(--n300);transition:box-shadow .5s}
.modelwrap.done .mrail::after{box-shadow:inset 0 0 0 1.5px var(--signal)}
.mrail i{display:block;height:1px;background:var(--navy);width:0;transition:width .1s linear}
.model{display:grid;grid-template-columns:repeat(5,1fr);counter-reset:st}
.model > div{counter-increment:st;position:relative;border-left:1px solid var(--n200);
  padding:clamp(24px,2.6vw,32px) clamp(16px,1.8vw,24px) clamp(24px,2.8vw,34px) clamp(16px,1.8vw,24px);
  transition:background .34s var(--e)}
.model > div:first-child{border-left:0;padding-left:0}
.model > div:last-child{padding-right:0}
.model > div:hover{background:var(--n50)}
.model > div::after{content:"";position:absolute;top:-4px;left:-4px;width:7px;height:7px;background:var(--n300);border-radius:50%;transition:background .45s,transform .45s var(--e)}
.model > div:first-child::after{left:0}
.model > div.lit::after{background:var(--signal);transform:scale(1.5)}
.model .no{font-family:var(--mono);font-size:11px;letter-spacing:.11em;color:var(--n400);display:block;margin-bottom:18px;transition:color .4s}
.model h3,.model p{transition:transform .38s var(--e)}
.model > div:hover h4,.model > div:hover p{transform:translateX(4px)}
.model > div:hover .no{color:var(--signal)}
.model > div.lit .no{color:var(--signal)}
.model h3{font-size:18px;margin-bottom:10px}
.model p{font-size:14px;line-height:1.6;color:var(--n600)}
@media(max-width:980px){.model{grid-template-columns:repeat(2,1fr)}
  .model > div{border-bottom:1px solid var(--n200)}
  .model > div:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:560px){.model{grid-template-columns:1fr}
  .model > div{border-left:0;padding-left:0;padding-right:0}}

/* ---------- STATEMENT BAND ---------- */
.statement{background:var(--ink2);color:#fff;padding:clamp(68px,8vw,120px) 0;position:relative;overflow:hidden}
.statement blockquote{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(25px,3.9vw,48px);line-height:1.24;letter-spacing:-.018em;max-width:19ch;position:relative;z-index:3}
.statement .att{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:34px;position:relative;z-index:3}

/* ---------- CAPABILITIES ---------- */
.caps{border-top:1px solid var(--n300)}
.cap{display:grid;grid-template-columns:66px minmax(0,1fr) minmax(0,1.25fr) 36px;gap:clamp(16px,2.2vw,28px);align-items:start;padding:clamp(26px,3vw,38px) 0;border-bottom:1px solid var(--n200);position:relative;isolation:isolate}
.cap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--navy);transition:width .42s var(--e);z-index:-1}
.cap:hover::before{width:100%}
.cap > *{transition:color .32s var(--e)}
.cap:hover .t,.cap:hover .d,.cap:hover .i,.cap:hover .g{color:#fff}
.cap:hover .i{color:var(--signal)}
.cap{padding-left:0;padding-right:26px;transition:padding-left .42s var(--e)}
.cap:hover{padding-left:26px}
.cap .i{font-family:var(--mono);font-size:12px;color:var(--n400);padding-top:8px}
.cap .t{font-size:clamp(21px,2.3vw,27px);font-weight:600;letter-spacing:-.018em;line-height:1.18}
.cap .d{font-size:14.5px;line-height:1.62;color:var(--n600)}
.cap .g,.prj .g{font-size:0;line-height:0;color:var(--n400);justify-self:end;
  align-self:start;position:relative;width:24px;height:7px;margin-top:12px;
  transition:color .3s var(--e),transform .38s var(--e)}
.cap .g::before,.prj .g::before{content:"";position:absolute;left:0;top:3px;
  width:100%;height:1px;background:currentColor}
.cap .g::after,.prj .g::after{content:"";position:absolute;right:0;top:0;
  width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg)}
.cap:hover .g{transform:translateX(5px)}
@media(max-width:900px){.cap{grid-template-columns:48px minmax(0,1fr);gap:10px 16px}.cap .d{grid-column:2}.cap .g{display:none}}

/* ---------- ESG FEATURE ---------- */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;align-items:stretch;position:relative;z-index:3}
.feat .txt{padding:0 clamp(32px,4.6vw,70px) 0 0;display:flex;flex-direction:column;justify-content:center}
@media(max-width:960px){.feat{grid-template-columns:1fr}.feat .txt{padding:0 0 44px}.feat .ph{min-height:290px}}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 34px}
.tagm{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border:1px solid rgba(255,255,255,.26);color:rgba(255,255,255,.88)}
.tagm.d{border-color:var(--n300);color:var(--n600)}

/* ---------- SECTORS ---------- */
.sect{border-top:1px solid var(--n300)}
.sect > div{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,230px);gap:26px;align-items:center;padding:21px 0;border-bottom:1px solid var(--n200)}

.sect .n{font-family:var(--mono);font-size:11px;color:var(--n400)}
.sect .l{font-size:16.5px;font-weight:500}
.sect .tr{height:6px;background:var(--n100);overflow:hidden}
.sect .fl{height:6px;background:var(--navy);width:0;transition:width 1.3s var(--e),background .3s}


@media(max-width:880px){.sect > div{grid-template-columns:32px minmax(0,1fr);gap:8px 14px}.sect .tr{grid-column:2}}

/* ---------- PROJECTS ---------- */
.projs{border-top:1px solid var(--n300)}
.prj{display:grid;grid-template-columns:minmax(0,1.5fr) 260px 36px;gap:clamp(20px,3.4vw,48px);padding:clamp(26px,3vw,38px) 0;border-bottom:1px solid var(--n200);align-items:start;position:relative;transition:padding-left .4s var(--e)}
.prj::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--navy);transition:width .55s var(--e)}
.prj:hover{padding-left:18px}
.prj:hover::after{width:100%}
.prj .h{font-size:21px;font-weight:600;letter-spacing:-.016em;line-height:1.26;margin-bottom:12px;max-width:26ch}
.prj .s{font-size:14.5px;line-height:1.6;color:var(--n600);max-width:50ch;margin-bottom:18px}
.prj dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0;font-size:13px;align-content:start}
.prj dt{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--n500);padding-top:2px}
.prj dd{margin:0}

.prj:hover .g{color:var(--navy);transform:translateX(6px)}
@media(max-width:900px){.prj{grid-template-columns:1fr;gap:20px}.prj .g{display:none}}

/* ---------- FOOTPRINT ---------- */
.fp{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(36px,4.5vw,70px);align-items:center;position:relative;z-index:3}
.mk{border-top:1px solid rgba(255,255,255,.18);margin-top:34px}
.mk div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.mk .p{font-size:15.5px}
.mk .q{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);text-align:right}
.mk div.hq .p{color:var(--signal);font-weight:500}
.mk div.hq .q{color:rgba(0,154,222,.75)}
@media(max-width:900px){.fp{grid-template-columns:1fr;gap:44px}}

/* ---------- CLIENTS ---------- */
.cgrp{margin-bottom:clamp(28px,3.4vw,46px)}
.cgrp .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--n500);padding-bottom:15px;border-bottom:1px solid var(--n300)}
.lg{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:0;background:transparent;
  border:1px solid var(--n200);border-right:0;border-bottom:0}
.lg span{background:var(--n0);height:156px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:16px 18px;font-size:13px;color:var(--n500);transition:background .28s var(--e);
  border-right:1px solid var(--n200);border-bottom:1px solid var(--n200)}
.lg img{width:190px;height:108px;max-width:100%;object-fit:contain;opacity:1;transition:transform .28s var(--e)}
.lg span:hover img{transform:scale(1.04)}
.lg span:hover{background:var(--n50)}
.lg span:hover img{opacity:1}
/* One row per client group, so no group ends in a run of empty cells. The
   logo box stays 120 by 56 everywhere, which is what makes the wall read as
   one set; only the cell around it changes width. */
.lg-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lg-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.lg-7{grid-template-columns:repeat(7,minmax(0,1fr));}
.lg-7 span{padding:22px 13px}
@media(max-width:1199px){
  .lg,.lg-5,.lg-6,.lg-7{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg-7 span{padding:22px 20px}
}
@media(max-width:780px){
  .lg,.lg-5,.lg-6,.lg-7{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg span,.lg-7 span{padding:18px 14px;height:92px}
}
@media(max-width:480px){
  .lg,.lg-5,.lg-6,.lg-7{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ---------- DIVISIONS DIAGRAM ----------
   Built from the service lines the firm actually publishes, four columns under
   one rail and over one method. Laid out in HTML rather than drawn in SVG so it
   reflows on a phone and can be read by a screen reader. */
.dgm{margin-top:clamp(38px,4.6vw,60px)}
.dgm-rail{position:relative;border-top:2px solid var(--signal);padding-top:12px;margin-bottom:0}
.dgm-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--n500)}
.dgm-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--warm-line);
  border:1px solid var(--warm-line);margin-top:18px}
.dgc{background:var(--warm);padding:clamp(20px,2.2vw,26px) clamp(16px,1.8vw,22px) clamp(22px,2.4vw,28px)}
.dgc .dgn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--signal-t);display:block;margin-bottom:12px}
.dgc h3{font-size:clamp(15.5px,1.5vw,18px);line-height:1.22;letter-spacing:-.02em;margin:0 0 8px}
.dgc .dgk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n500);display:block;padding-bottom:12px;border-bottom:1px solid var(--warm-line)}
.dgc ul{list-style:none;margin:0;padding:0}
.dgc li{font-size:12.5px;line-height:1.42;color:var(--n600);padding:8px 0;border-bottom:1px solid var(--warm-line)}
.dgc li:last-child{border-bottom:0;padding-bottom:0}
.dgm-method{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--warm-line);border:1px solid var(--warm-line);border-top:0;margin:0;padding:0}
.dgm-method li{background:var(--n0);padding:14px clamp(14px,1.6vw,20px);font-size:13px;font-weight:500;
  display:flex;align-items:baseline;gap:10px}
.dgm-method li span{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--n400);font-weight:400}
.dgm figcaption{margin-top:16px}
@media(max-width:900px){
  .dgm-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dgm-method{grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--warm-line);margin-top:1px}
}
@media(max-width:560px){
  .dgm-cols,.dgm-method{grid-template-columns:1fr}
}

/* ---------- PROJECT GRID ----------
   The listing carries the real covers from the media library, so the page reads
   as work rather than as a table of contents. Cards without their own page are
   articles, not links, so nothing promises a destination that does not exist. */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--n200);border:1px solid var(--n200);margin-top:clamp(26px,3vw,38px)}
.pgrid > *{background:var(--n0);padding:0 0 clamp(22px,2.4vw,28px);display:flex;flex-direction:column;
  transition:background .3s var(--e)}
.pgrid > *:hover{background:var(--n50)}
.pgrid .ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--n100);
  margin-bottom:clamp(18px,2vw,24px);padding:clamp(14px,1.6vw,20px)}
.pgrid .ph img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;
  transition:transform .6s var(--e)}
.pgrid > *:hover .ph img{transform:scale(1.03)}
.pgrid .no,.pgrid .cat,.pgrid h2,.pgrid p{padding:0 clamp(20px,2.2vw,26px)}
.pgrid .no{font-family:var(--mono);font-size:11px;color:var(--n400);display:block;margin-bottom:9px}
.pgrid .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--n500);display:block;margin-bottom:11px}
.pgrid h2.it{font-size:clamp(16px,1.5vw,18.5px);line-height:1.28;letter-spacing:-.018em;margin:0}
.pgrid p{font-size:13.5px;line-height:1.58;color:var(--n600);margin:11px 0 0}
.pgrid a{color:inherit}
.pgrid a h2.it{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--n300)}
.pgrid a:hover h2.it{text-decoration-color:var(--navy)}
.pgrid > *[hidden]{display:none}
@media(max-width:1024px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pgrid{grid-template-columns:1fr}}

/* ---------- INSIGHTS ---------- */
.ins{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,4vw,52px);align-items:start}
.ilead{border-top:2px solid var(--navy);padding-top:28px}
.ilead .t{font-family:var(--sans);font-size:clamp(24px,3vw,34px);line-height:1.24;letter-spacing:-.014em;font-weight:300;margin:16px 0 18px;max-width:20ch}
.ilead .x{font-size:15px;line-height:1.62;color:var(--n600);max-width:44ch;margin-bottom:24px}
.ilist{border-top:1px solid var(--n300)}
.ilist a{display:block;padding:22px 0;border-bottom:1px solid var(--warm-line);transition:padding-left .34s var(--e)}
.ilist a:hover{padding-left:12px}
.ilist .t{font-size:16px;font-weight:500;line-height:1.42;margin:10px 0 8px;max-width:34ch;transition:color .28s}
.ilist a:hover .t{color:var(--navy)}
@media(max-width:880px){.ins{grid-template-columns:1fr;gap:40px}}

/* ---------- GROUP ---------- */
.grp{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--n300)}
.grp > div{padding:clamp(26px,3vw,36px) clamp(22px,3vw,36px) clamp(28px,3.2vw,40px) 0;border-right:1px solid var(--n200);border-bottom:1px solid var(--n200);transition:background .3s}
/* Columns 2 and 3 had no left padding, so their text sat hard against the
   rule beside them. The first cell keeps zero so the copy still starts on the
   page grid, under the heading above it. */
.grp > div + div{padding-left:clamp(22px,3vw,36px)}
.grp > div:last-child{border-right:0}
.grp > div:hover{background:var(--n50)}
.grp h3{font-size:19px;margin-bottom:12px}
.grp p{font-size:14px;line-height:1.6;color:var(--n600);margin-bottom:20px}
@media(max-width:880px){.grp{grid-template-columns:1fr}.grp > div,.grp > div + div{border-right:0;padding-right:0;padding-left:0}}

/* ---------- CTA ---------- */
.cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:70px;align-items:end;position:relative;z-index:3}
.cta h2{max-width:14ch;font-size:clamp(34px,5.2vw,62px);line-height:1.02;letter-spacing:-.032em}
.cta .info{font-size:14.5px;line-height:1.85;color:rgba(255,255,255,.66)}
.cta .info b{color:#fff;font-weight:500;display:block;margin-bottom:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
@media(max-width:880px){.cta{grid-template-columns:1fr;gap:44px}}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.58);border-top:1px solid rgba(255,255,255,.1);padding:clamp(56px,6.5vw,80px) 0 0;position:relative}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:clamp(28px,3.4vw,46px);padding-bottom:clamp(40px,5vw,60px)}
.fgrid h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);margin:0 0 20px;font-weight:500}
.fgrid a{display:block;font-size:14px;padding:6px 0;overflow-wrap:anywhere;transition:color .18s,padding-left .28s var(--e)}
.fgrid a:hover{color:#fff;padding-left:6px}
.fgrid .pos{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.52);max-width:30ch;margin-top:22px}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:24px 0 34px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.36);text-transform:uppercase}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.fgrid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .mask > span{transform:none}
  .drawline{transform:scaleX(1)}
}

/* ---------- PAGE MASTHEAD ---------- */
.phero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:clamp(120px,14vw,190px) 0 clamp(56px,6vw,84px)}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 82% 20%,rgba(0,154,222,.20) 0%,rgba(0,154,222,.05) 40%,rgba(1,12,22,0) 70%)}
.phero .c{z-index:3}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:26px}
.crumb a:hover{color:var(--signal)}
.crumb span{margin:0 8px;color:rgba(255,255,255,.25)}
.phero h1{font-size:clamp(34px,5.2vw,66px);line-height:1.03;letter-spacing:-.03em;
  margin:22px 0 0;max-width:15ch}
.phero .lede{color:rgba(255,255,255,.72);margin-top:26px;max-width:46ch;
  font-size:clamp(16.5px,1.5vw,19.5px)}
.pmeta{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(38px,4.6vw,58px);
  border-top:1px solid rgba(255,255,255,.14)}
.pmeta div{padding:20px 28px 0 0;margin-right:28px;border-right:1px solid rgba(255,255,255,.10);
  padding-bottom:4px}
.pmeta div:last-child{border-right:0;margin-right:0}
.pmeta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--signal);margin:0 0 8px}
.pmeta dd{margin:0;font-size:15px;color:rgba(255,255,255,.86);max-width:24ch}

/* ---------- PROSE ---------- */
.prose{max-width:62ch}
.prose p{margin:0 0 20px;font-size:17px;line-height:1.7;color:var(--n800)}
.prose p:last-child{margin-bottom:0}
.prose h3,.prose h2{font-size:clamp(20px,2vw,25px);line-height:1.2;margin:44px 0 14px}
.prose blockquote{margin:34px 0;padding:0 0 0 26px;border-left:2px solid var(--signal);
  font-size:clamp(19px,2.1vw,24px);line-height:1.42;letter-spacing:-.02em;color:var(--navy)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,64px)}
@media(max-width:880px){.two{grid-template-columns:1fr}}
.splt{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:clamp(26px,4vw,72px);align-items:start}
@media(max-width:880px){.splt{grid-template-columns:1fr;gap:26px}}
.stick{position:sticky;top:104px}
.splt .stick h2{font-size:clamp(23px,2.7vw,33px);line-height:1.12}
@media(max-width:880px){.stick{position:static}}

/* ---------- CAPABILITY MARKS ----------
   One grammar across all twenty eight: straight rules, right angles, circles
   and arcs, plus a single accent dot. Nothing from an icon library. */
/* Generated Recraft vector marks, one per service, delivered as <img>. They
   sit only on the light service tiles and rows, so their fixed navy fill needs
   no recolor; on hover the tile lifts the mark very slightly. */
img.ic{display:block;width:34px;height:34px;flex:0 0 34px;object-fit:contain}
/* Service-index marks: presented larger and centered in a padded holder, so
   each reads as the lead of its tile rather than a small glyph in the corner. */
.sidx img.ic{box-sizing:border-box;width:clamp(72px,6vw,88px);height:clamp(72px,6vw,88px);
  flex:0 0 auto;padding:clamp(11px,1.05vw,14px);border:1px solid var(--n200);
  background:var(--n50);border-radius:4px;margin:0 auto;
  transition:transform .28s var(--e),background .28s var(--e),border-color .28s var(--e)}
.sidx a:hover img.ic{transform:translateY(-2px);background:var(--n0);border-color:var(--n300)}
/* Detail-row marks: the same padded holder, sized to lead each service row. */
.srv .sh img.ic{box-sizing:border-box;width:74px;height:74px;flex:0 0 74px;padding:8px;
  border:1px solid var(--n200);background:var(--n50);border-radius:4px;margin-top:0;
  transition:background .28s var(--e),border-color .28s var(--e)}
@media(max-width:620px){.srv .sh img.ic{width:64px;height:64px;flex:0 0 64px;padding:7px}}
.srv > article:hover .sh img.ic{background:var(--n0);border-color:var(--n300)}
/* legacy hand-drawn mark support, retained for any inline use */
svg.ic{display:block;width:34px;height:34px;flex:0 0 34px;fill:none;stroke:var(--navy);
  stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;overflow:visible}
svg.ic .acc{fill:var(--signal);stroke:none}
.sec.ink svg.ic,.phero svg.ic{stroke:#fff}
.sec.ink svg.ic .acc,.phero svg.ic .acc{fill:var(--signal-d)}

/* ---------- SERVICE INDEX ----------
   The whole division in one screen, and a way into any part of it. */
.sidx{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;background:transparent;
  border-top:1px solid var(--n200);border-left:1px solid var(--n200);margin-bottom:clamp(30px,3.4vw,46px)}
/* Separators are borders on the tiles, so a division with eight or six
   services never shows a run of filled empty cells at the end. */
.sidx.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sidx.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sidx a{background:var(--n0);padding:clamp(22px,2.4vw,30px) clamp(14px,1.5vw,18px) clamp(22px,2.4vw,28px);
  border-right:1px solid var(--n200);border-bottom:1px solid var(--n200);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;min-height:0;
  transition:background .28s var(--e)}
.sidx a:hover{background:var(--n50)}
.sidx a:hover svg.ic{stroke:var(--signal-t)}
.sidx .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--n400)}
.sidx .t{font-size:13.5px;line-height:1.32;letter-spacing:-.012em;font-weight:500;margin-top:-8px}
@media(max-width:1100px){.sidx,.sidx.c4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.sidx,.sidx.c4,.sidx.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}

.info.depth{margin:0 0 clamp(30px,3.4vw,46px)}
.dp{border-top:1px solid var(--n300);padding-top:14px}
.dp-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--n500);display:block;margin-bottom:6px}
.dp ol{list-style:none;margin:0;padding:0}
.dp li{display:grid;grid-template-columns:34px minmax(0,300px) minmax(0,1fr) 46px;
  align-items:center;gap:16px;padding:9px 0;border-bottom:1px solid var(--n100)}
.dp li:last-child{border-bottom:0}
.dp .n{font-family:var(--mono);font-size:10.5px;color:var(--n400)}
.dp .t{font-size:13px;line-height:1.3}
.dp .b{display:block;height:10px;background:var(--n100)}
.dp .b i{display:block;height:10px;width:var(--w);background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e)}
.dp ol.in .b i,.dp ol.stag.in .b i{transform:none}
.dp .v{font-family:var(--mono);font-size:14px;color:var(--navy);text-align:right}
@media(max-width:760px){
  .dp li{grid-template-columns:28px minmax(0,1fr) 40px;gap:10px}
  .dp .b{grid-column:2;height:8px}
  .dp .b i{height:8px}
}
@media(prefers-reduced-motion:reduce){.dp .b i{transform:none;transition:none}}

/* ---------- SERVICE ROWS ---------- */
.srv{border-top:1px solid var(--n200)}
.srv > article{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(18px,3vw,44px);padding:clamp(26px,3vw,38px) 0;border-bottom:1px solid var(--n200);
  transition:background .3s var(--e)}
.srv > article:hover{background:var(--n50)}
.srv .no{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--n400);padding-top:5px}
.srv h3{font-size:clamp(18px,1.85vw,22px);line-height:1.24;letter-spacing:-.022em}
.srv p{font-size:15.5px;line-height:1.66;color:var(--n600)}
/* the service row now carries its mark and keeps its full list behind a
   disclosure, so the page reads as a page rather than a scroll */
.srv .sh{display:flex;align-items:center;gap:16px}
.srv .sh h3{padding-top:0}
.srv .sn{font-size:14px;line-height:1.6;color:var(--n600);margin-top:14px;
  padding-top:14px;border-top:1px solid var(--n200)}
.srv details{margin-top:18px;border-top:1px solid var(--n200)}
.srv summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:13px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);min-height:24px}
.srv summary::-webkit-details-marker{display:none}
.srv summary::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--e);margin-left:auto}
.srv details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.srv summary .c{font-size:10.5px;color:var(--n500);padding:0 7px;border:1px solid var(--n200)}
.srv summary:hover{color:var(--signal-t)}
.srv .sl{list-style:none;margin:6px 0 0;padding:0}
.srv .sl li{font-size:14px;line-height:1.55;color:var(--n600);padding:9px 0 9px 20px;
  border-bottom:1px solid var(--n100);position:relative}
.srv .sl li:last-child{border-bottom:0}
.srv .sl li b{font-weight:600;color:var(--n800)}
.srv .sl li::before{content:"";position:absolute;left:0;top:calc(.775em + 9px);
  width:9px;height:1px;background:var(--n300)}
.srv > article:hover .sl{border-top-color:var(--n300)}
@media(max-width:880px){.srv .sl li{font-size:13.5px}}
@media(max-width:880px){
  .srv > article{grid-template-columns:38px 1fr;gap:14px 16px}
  .srv > article p{grid-column:2}
}

/* ---------- CARD GRIDS ---------- */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--n200);
  border:1px solid var(--n200)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--n200);
  border:1px solid var(--n200)}
.g3 > *,.g2 > *{background:var(--n0);padding:clamp(24px,2.7vw,34px);
  transition:background .3s var(--e),transform .3s var(--e)}
.g3 > a:hover,.g2 > a:hover{background:var(--n50)}
@media(max-width:980px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g3,.g2{grid-template-columns:1fr}}

/* ---------- GAP NOTE ---------- */
.gap{margin:26px 0 0;padding:16px 20px;border:1px dashed var(--n300);background:var(--warm);
  font-family:var(--mono);font-size:11.5px;line-height:1.7;letter-spacing:.03em;color:var(--n600)}
.gap b{color:var(--navy);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  display:block;margin-bottom:6px;font-size:10.5px}

/* secondary button for light grounds; the homepage only needed dark ones */
.btn-d{background:transparent;color:var(--navy);border-color:var(--n300)}
.btn-d:hover{color:#fff;border-color:var(--signal)}


/* ================= MOTION =================
   The homepage carries the heavy WebGL work. Everything here is cheap:
   transforms and opacity only, all of it cancelled under reduced motion. */
.rv{opacity:0;transform:translateY(18px);transition:opacity .72s var(--e),transform .72s var(--e)}
.rv.in{opacity:1;transform:none}
.stag > *{opacity:0;transform:translateY(16px);
  transition:opacity .62s var(--e),transform .62s var(--e)}
.stag.in > *{opacity:1;transform:none}
.stag.in > *:nth-child(1){transition-delay:.02s}
.stag.in > *:nth-child(2){transition-delay:.07s}
.stag.in > *:nth-child(3){transition-delay:.12s}
.stag.in > *:nth-child(4){transition-delay:.17s}
.stag.in > *:nth-child(5){transition-delay:.22s}
.stag.in > *:nth-child(6){transition-delay:.27s}
.stag.in > *:nth-child(7){transition-delay:.32s}
.stag.in > *:nth-child(8){transition-delay:.37s}
.stag.in > *:nth-child(n+9){transition-delay:.42s}

/* headline wipe: the line rises out of its own mask */
.mask{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.mask > span{display:block;transform:translateY(102%);
  transition:transform .86s cubic-bezier(.16,.84,.28,1)}
.mask.in > span{transform:none}

/* a rule that draws itself in */
.drawline{height:1px;background:var(--n200);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--e)}
.drawline.in{transform:scaleX(1)}
.sec.ink .drawline,.phero .drawline{background:rgba(255,255,255,.18)}

/* the masthead ground drifts very slowly, so a static page never feels dead */
.phero::before{content:"";position:absolute;inset:-30%;pointer-events:none;
  background:radial-gradient(38% 42% at 30% 30%,rgba(0,154,222,.16),rgba(1,12,22,0) 70%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-4%,-2%,0) scale(1)}
                 to{transform:translate3d(6%,4%,0) scale(1.12)}}

/* ================= INFOGRAPHICS =================
   Drawn as inline SVG in brand colour, not icon sets. Each one carries the
   figure it illustrates in text too, so the meaning survives with images off
   and is readable to search and answer engines. */
figure.info{margin:clamp(30px,3.6vw,48px) 0 0;padding:0}
figure.info svg{display:block;width:100%;height:auto;overflow:visible}
figure.info figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--n500);margin-top:18px}
.sec.ink figure.info figcaption,.phero figure.info figcaption{color:rgba(255,255,255,.5)}
.info .ln{stroke:var(--n200);stroke-width:1;fill:none}
.info .sg{stroke:var(--signal);stroke-width:1.5;fill:none}
.info .fillnavy{fill:var(--navy)}
.info .fillsig{fill:var(--signal)}
.info text{font-family:var(--sans);fill:var(--ink)}
.info .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--n500)}
.info .val{font-family:var(--display);font-size:25px;fill:var(--navy)}
.sec.ink .info text{fill:#fff}
.sec.ink .info .lbl{fill:rgba(255,255,255,.55)}
.sec.ink .info .val{fill:#fff}
.sec.ink .info .ln{stroke:rgba(255,255,255,.2)}
/* bars and paths grow when the figure scrolls in */
.info .grow{transform:scaleX(0);transform-origin:left;transition:transform 1.05s var(--e)}
.info.in .grow{transform:scaleX(1)}
.info .dash{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.4s var(--e)}
.info.in .dash{stroke-dashoffset:0}
.info .pop{opacity:0;transition:opacity .5s var(--e) .5s}
.info.in .pop{opacity:1}

/* ================= RESPONSIVE PADDING =================
   One scale for section rhythm, so pages breathe consistently and the
   masthead never crushes its own headline on a phone. */
.sec{padding:clamp(56px,7.4vw,120px) 0}
.sec.tight{padding:clamp(44px,5.4vw,84px) 0}
.phero{padding:clamp(96px,12vw,180px) 0 clamp(48px,5.4vw,80px)}
@media(max-width:880px){
  .phero{padding:clamp(78px,15vw,110px) 0 clamp(40px,7vw,56px)}
  .phero h1{max-width:100%}
  .pmeta{flex-direction:column;gap:0}
  .pmeta div{border-right:0;margin-right:0;padding:16px 0 4px;
    border-bottom:1px solid rgba(255,255,255,.10);width:100%}
  .pmeta div:last-child{border-bottom:0}
  .pmeta dd{max-width:none}
  .closeband{padding:clamp(46px,8vw,68px) 0}
}
@media(max-width:600px){
  .prose p{font-size:16px}
  .lede{font-size:16.5px}
  .g3 > *,.g2 > *{padding:22px 20px}
}
@media(prefers-reduced-motion:reduce){
  .phero::before{animation:none}
  .stag > *,.rv,.mask > span,.drawline,.info .grow,.info .dash,.info .pop{
    transition:none;transform:none;opacity:1;stroke-dashoffset:0}
}

/* ---------- CLOSING BAND ---------- */
.closeband{background:var(--navy);color:#fff;padding:clamp(56px,6.5vw,92px) 0}
.closeband h2{font-size:clamp(26px,3.4vw,42px);max-width:20ch}
.closeband p{color:rgba(255,255,255,.72);margin-top:18px;max-width:44ch;font-size:17px}
.closeband .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---------- ABOUT ---------- */
.vals{border-top:1px solid var(--n200)}
.vals article{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(20px,3vw,54px);padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--n200);
  transition:background .3s var(--e)}
.vals article:hover{background:var(--n50)}
.vals h3{font-size:clamp(17px,1.7vw,20px);letter-spacing:-.02em}
.vals p{font-size:15.5px;line-height:1.66;color:var(--n600)}
@media(max-width:760px){.vals article{grid-template-columns:1fr;gap:8px}}

.steps{counter-reset:sp;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:clamp(34px,4vw,52px)}
.steps > div{counter-increment:sp;position:relative;border-left:1px solid var(--n200);
  padding:clamp(22px,2.4vw,30px) clamp(14px,1.6vw,22px) clamp(22px,2.6vw,32px);
  transition:background .34s var(--e)}
.steps > div:first-child{border-left:0;padding-left:0}
.steps > div:last-child{padding-right:0}
.steps > div:hover{background:var(--n50)}
.steps b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--signal);
  display:block;margin-bottom:14px}
.steps b::before{content:"0" counter(sp)}
.steps h3{font-size:16.5px;line-height:1.25;letter-spacing:-.02em;margin:0 0 10px}
.steps p{font-size:14px;line-height:1.6;color:var(--n600)}
@media(max-width:1024px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps > div{border-left:1px solid var(--n200);border-top:1px solid var(--n200);
    padding:24px 20px}
  .steps > div:first-child{padding-left:20px}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

.divs{margin-top:clamp(34px,4vw,52px)}
.divs a{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:clamp(20px,3vw,54px);align-items:start;
  padding:clamp(26px,3vw,38px) 0;border-top:1px solid var(--n200);
  transition:background .3s var(--e)}
.divs a:last-child{border-bottom:1px solid var(--n200)}
.divs a:hover{background:var(--n50)}
.divs a:hover h3{color:var(--signal)}
.divs h3{font-size:clamp(20px,2.2vw,27px);letter-spacing:-.024em;transition:color .3s var(--e)}
.divs p{font-size:15.5px;line-height:1.66;color:var(--n600)}
.divs .go{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);margin-top:16px;display:block}
@media(max-width:760px){.divs a{grid-template-columns:1fr;gap:10px}}

.mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--n200);
  border:1px solid var(--n200);margin-top:clamp(30px,3.6vw,46px)}
.mv > div{background:var(--n0);padding:clamp(28px,3.2vw,44px)}
.mv q{display:block;font-size:clamp(19px,2.1vw,25px);line-height:1.38;letter-spacing:-.022em;
  color:var(--navy);quotes:none;margin-top:16px}
@media(max-width:760px){.mv{grid-template-columns:1fr}}

/* ---------- CAPABILITY ---------- */
.capnav{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(255,255,255,.14);
  margin-top:clamp(34px,4vw,52px)}
.capnav a{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding:18px 26px 18px 0;margin-right:26px;
  border-right:1px solid rgba(255,255,255,.10);transition:color .3s var(--e)}
.capnav a:last-child{border-right:0;margin-right:0}
.capnav a:hover{color:#fff}
.capnav a.on{color:var(--signal)}

.capidx{margin-top:clamp(36px,4.4vw,56px)}
.capidx a{display:grid;grid-template-columns:56px minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(18px,3vw,48px);align-items:start;padding:clamp(30px,3.4vw,44px) 0;
  border-top:1px solid var(--n200);transition:background .3s var(--e)}
.capidx a:last-child{border-bottom:1px solid var(--n200)}
.capidx a:hover{background:var(--n50)}
.capidx a:hover h2{color:var(--signal)}
.capidx .no{font-family:var(--mono);font-size:11.5px;color:var(--n400);padding-top:8px}
.capidx h2{font-size:clamp(22px,2.6vw,33px);letter-spacing:-.026em;line-height:1.1;
  transition:color .3s var(--e)}
.capidx p{font-size:16px;line-height:1.65;color:var(--n600)}
.capidx ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.capidx li{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--n500);border:1px solid var(--n200);padding:6px 10px}
@media(max-width:820px){.capidx a{grid-template-columns:34px 1fr;gap:12px 14px}
  .capidx a > div:last-child{grid-column:2}}

.wl{list-style:none;margin:22px 0 0;padding:0}
.wl li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--n200);
  font-size:15.5px;color:var(--n800)}
.wl li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--signal)}
.sec.ink .wl li{border-bottom-color:rgba(255,255,255,.12);color:rgba(255,255,255,.82)}

.work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--n200);
  border:1px solid var(--n200);margin-top:clamp(28px,3.2vw,42px)}
.work > div{background:var(--n0);padding:clamp(20px,2.2vw,28px)}
.work h3{font-size:15.5px;letter-spacing:-.018em;margin:0 0 6px}
.work span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--n500)}
@media(max-width:900px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.work{grid-template-columns:1fr}}
.work.dk > div{background:var(--ink)}
.work.dk h4{color:#fff}
.work.dk span{color:rgba(255,255,255,.5)}
.sec.ink .wl li{border-bottom-color:rgba(255,255,255,.14);color:rgba(255,255,255,.86)}

/* ---------- FILTERS ---------- */
.filt{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--n200);
  border-bottom:1px solid var(--n200);margin-top:clamp(30px,3.6vw,46px)}
.filt button{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--n500);padding:17px 24px 17px 0;
  margin-right:24px;border-right:1px solid var(--n200);position:relative;
  transition:color .3s var(--e)}
.filt button:last-child{border-right:0;margin-right:0}
.filt button:hover{color:var(--navy)}
.filt button.on{color:var(--navy)}
.filt button.on::after{content:"";position:absolute;left:0;right:24px;bottom:-1px;height:2px;
  background:var(--signal)}
.filt button:last-child.on::after{right:0}
.filt .n{color:var(--n500);margin-left:7px}

/* ---------- PROJECT LIST ---------- */
.plist{border-top:1px solid var(--n200);margin-top:2px}
.plist a{display:grid;grid-template-columns:52px minmax(0,1fr) 150px 190px;
  gap:clamp(12px,2vw,26px);align-items:baseline;padding:clamp(19px,2.1vw,25px) 0;
  border-bottom:1px solid var(--n200);transition:background .3s var(--e),padding-left .3s var(--e)}
.plist a{padding-right:12px}
.plist a:hover{background:var(--n50);padding-left:12px}
.plist a:hover h3{color:var(--signal)}
.plist .no{font-family:var(--mono);font-size:11px;color:var(--n400)}
.plist h3,.plist h2.it{font-size:clamp(15.5px,1.5vw,18.5px);line-height:1.3;letter-spacing:-.018em;
  font-weight:500;transition:color .3s var(--e)}
.plist .cat,.plist .div{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--n500)}
.plist [hidden]{display:none}
@media(max-width:900px){
  .plist a{grid-template-columns:34px 1fr;gap:6px 12px}
  .plist .cat{grid-column:2}.plist .div{display:none}
}

/* ---------- PROJECT SINGLE ---------- */
.pcover{grid-column:1 / -1;margin:0 0 clamp(30px,3.4vw,44px);max-width:360px}
.pcover img{width:100%;height:auto;display:block;border:1px solid var(--n200)}
.pcover figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--n500);margin-top:10px}
.pbody{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);
  gap:clamp(32px,5vw,84px);align-items:start}
@media(max-width:900px){.pbody{grid-template-columns:1fr;gap:34px}}
.fact{border-top:1px solid var(--n200)}
.fact div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--n200)}
.fact dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n500);margin:0}
.fact dd{margin:0;font-size:14.5px;text-align:right;color:var(--ink);max-width:22ch}

/* ---------- INSIGHTS ---------- */
.ilist{margin-top:clamp(30px,3.6vw,46px);border-top:1px solid var(--n200)}
.ilist a{display:grid;grid-template-columns:150px minmax(0,1fr) 130px;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:clamp(24px,2.8vw,34px) 0;border-bottom:1px solid var(--n200);
  transition:background .3s var(--e),padding-left .3s var(--e)}
.ilist a{padding-right:12px}
.ilist a:hover{background:var(--n50);padding-left:12px}
.ilist a:hover h3{color:var(--signal)}
.ilist h3,.ilist h2.it{font-size:clamp(18px,2vw,24px);line-height:1.22;letter-spacing:-.024em;
  transition:color .3s var(--e)}
.ilist p{font-size:15px;line-height:1.62;color:var(--n600);margin-top:9px;max-width:56ch}
@media(max-width:820px){.ilist a{grid-template-columns:1fr;gap:8px}}

.art{max-width:66ch;margin:0 auto}
.art p{margin:0 0 22px;font-size:17.5px;line-height:1.72;color:var(--n800)}
.art h2{font-size:clamp(21px,2.3vw,28px);line-height:1.2;margin:46px 0 16px}
.toc{border-left:2px solid var(--n200);padding-left:22px}
.toc a{display:block;padding:7px 0;font-size:14.5px;color:var(--n600);transition:color .3s var(--e)}
.toc a:hover{color:var(--signal)}

/* ---------- TEAM ---------- */
/* Separators are drawn as borders on the cards themselves, not as a coloured
   grid background showing through a 1px gap. A trailing incomplete row then
   simply ends, instead of leaving a filled empty cell. */
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--n200);border-left:1px solid var(--n200);margin-top:clamp(30px,3.6vw,46px)}
.tgrid > div{background:var(--n0);padding:0 0 clamp(22px,2.4vw,28px);min-height:190px;
  border-right:1px solid var(--n200);border-bottom:1px solid var(--n200);
  display:flex;flex-direction:column;justify-content:flex-end;transition:background .3s var(--e)}
.tgrid > div:hover{background:var(--n50)}
.tgrid h3{font-size:17px;letter-spacing:-.02em;margin:0 0 6px}
.tgrid span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--n500)}
/* Real portraits from the media library, in place of the initials placeholder. */
.tgrid .tph{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--n100);
  margin-bottom:clamp(16px,1.8vw,22px)}
.tgrid .tph img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;
  filter:grayscale(1) contrast(1.02);transition:filter .5s var(--e),transform .6s var(--e)}
.tgrid > div:hover .tph img{filter:grayscale(0) contrast(1);transform:scale(1.03)}
.tgrid h3,.tgrid > div > span:not(.tph){padding:0 clamp(20px,2.2vw,26px)}
.tgrid > div{justify-content:flex-start}
@media(max-width:1000px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.tgrid{grid-template-columns:1fr}}

/* ---------- CONTACT ---------- */
.cgrid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:880px){.cgrid{grid-template-columns:1fr;gap:36px}}
.cblock{border-top:1px solid var(--n200);padding-top:20px;margin-top:26px}
.cblock dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--signal);margin-bottom:9px}
.cblock dd{margin:0;font-size:16px;line-height:1.6;color:var(--ink)}
.cblock dd a:hover{color:var(--signal)}
form.enq{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form.enq label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--n500);margin-bottom:8px}
form.enq input,form.enq select,form.enq textarea{width:100%;font:inherit;font-size:15px;
  padding:13px 14px;border:1px solid var(--n200);border-radius:2px;background:var(--n0);
  color:var(--ink);transition:border-color .25s var(--e)}
form.enq input:focus,form.enq select:focus,form.enq textarea:focus{outline:none;
  border-color:var(--signal)}
form.enq .full{grid-column:1/-1}
form.enq textarea{min-height:130px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--n600)}
.consent input{width:16px;height:16px;flex:0 0 16px;margin-top:2px;padding:0}
form.enq .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.enqmsg{font-size:14.5px;line-height:1.5}
.enqmsg:empty{display:none}
.enqmsg.ok{color:var(--signal-t)}
.enqmsg.err{color:#B02A37}
form.enq.sending button{opacity:.6;pointer-events:none}
@media(max-width:620px){form.enq{grid-template-columns:1fr}}

/* Build notes never ship. Belt and braces in case one survives an import. */
.cnote,.notetoggle,.gap{display:none!important}

/* The orb still is a fallback that only loads when the live orb cannot run.
   Until then it has no source, so it must not hold a box. */
.orb img[data-src]{display:none}

/* --- Elementor reset repair -------------------------------------------------
   Elementor prints its own frontend reset after this file on some installs,
   and ".elementor img{height:auto}" cancels every image height set above at
   equal specificity. These repeat the same intent one class deeper so the
   design wins wherever it is loaded. Nothing new is declared here. */
.elementor .logo img{height:40px;width:auto;display:block}
.elementor header.small .logo img{height:34px}
.elementor .logo.footer img{height:46px}
.elementor .fig img{width:100%;height:100%;object-fit:cover}
.elementor .lg img{width:190px;height:108px;max-width:100%;max-height:none;object-fit:contain}
@media (max-width:600px){.elementor .logo img{height:32px}}

/* The insights list is used full width on /insights/ and in a narrow column on
   the homepage. In the narrow one the three column row has nowhere to go, so
   it stacks instead of crushing the title to one word per line. */
.ins .ilist a{grid-template-columns:1fr;gap:5px;padding:clamp(18px,2vw,24px) 0}
.ins .ilist h3,.ins .ilist h2.it{font-size:clamp(17px,1.8vw,20px)}
.ins .ilist a:hover{padding-left:8px}

/* --- Accessibility pass -----------------------------------------------------
   Everything below was raised by the whole-site audit and is corrective, not
   decorative. Nothing here changes a layout; it changes contrast, hit area,
   and what a keyboard or reduced-motion visitor gets. */

/* The eyebrow is brand blue. On a light ground the brand value is 3.15:1 at
   11px and on navy it is 4.28:1, both short of AA for small text, so the
   eyebrow uses a darkened tint on light grounds and a lightened one on dark.
   The brand blue itself is untouched and still carries buttons and rules. */
.hero .eb,.phero .eb,.sec.ink .eb,.statement .eb,.closeband .eb,footer .eb,
.work.dk .eb,.dk .eb{color:var(--signal-d)}
.eb.dk{color:var(--navy)}

/* Definition labels on Contact were brand blue on white. */
.cblock dt{color:var(--signal-t)}

/* Standalone links were 15 to 23px tall. WCAG 2.2 asks for 24 by 24 on any
   target that is not inline inside a sentence. The text and the rule are
   unchanged; only the box around them grows. */
.util a,.alink,.crumb a,.cblock dd a,.toc a,.fgrid a,.fbot a{
  display:inline-flex;align-items:center;min-height:24px}
.fgrid a,.fbot a{align-items:center}
.consent{min-height:24px}
.consent input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;margin:1px 0}

/* Smooth scrolling is a preference, not a default. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn::before,.alink .r,.lg span:hover img{transition:none}
}

/* Reveals are an enhancement. Without JavaScript the class that hides them
   never gets removed, so the content has to start visible and only hide once
   the script has announced itself. */
html:not(.js) .rv,html:not(.js) .mask > span,html:not(.js) .stag > *{
  opacity:1;transform:none}

/* Skip link. Off screen until it takes focus, then it sits over the header. */
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:0;top:0;width:auto;height:auto;padding:14px 22px;background:var(--navy);
  color:#fff;font-size:14.5px;font-weight:500;outline:2px solid var(--signal);outline-offset:-2px}

/* ---------- SEARCH, 404 ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
form.srch{display:flex;gap:10px;margin-top:clamp(26px,3vw,36px);max-width:640px}
form.srch input{flex:1;min-width:0;font:inherit;font-size:16px;padding:13px 16px;border:1px solid rgba(255,255,255,.28);
  border-radius:2px;background:rgba(255,255,255,.06);color:#fff;transition:border-color .25s var(--e)}
form.srch input::placeholder{color:rgba(255,255,255,.45)}
form.srch input:focus{outline:none;border-color:var(--signal)}
form.srch .btn{flex:0 0 auto}
@media(max-width:520px){form.srch{flex-direction:column}form.srch .btn{align-self:flex-start}}
.sres{border-top:1px solid var(--n200)}
.sres a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 18px;padding:clamp(20px,2.2vw,26px) 0;
  border-bottom:1px solid var(--n200);color:inherit;transition:background .3s var(--e)}
.sres a:hover{background:var(--n50)}
.sres a:hover h3{color:var(--signal)}
.sres .no{font-family:var(--mono);font-size:11px;color:var(--n400);padding-top:6px}
.sres h3{font-size:clamp(17px,1.7vw,20px);letter-spacing:-.02em;line-height:1.25;transition:color .3s var(--e)}
.sres .cat{grid-column:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--n500)}
.sres p{grid-column:2;font-size:14.5px;line-height:1.62;color:var(--n600);margin:4px 0 0;max-width:72ch}
.sres mark{background:transparent;color:var(--navy);font-weight:500;box-shadow:inset 0 -2px 0 var(--signal)}
.slinks{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:clamp(30px,3.4vw,44px)}
@media(max-width:520px){.sres a{grid-template-columns:1fr}.sres .no{display:none}.sres .cat,.sres p{grid-column:1}}

/* ---------- FIGURES ON LIGHT GROUNDS ---------- */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--n200);margin-top:clamp(34px,4vw,52px)}
.figs > div{padding:clamp(22px,2.4vw,32px) clamp(14px,1.8vw,24px) clamp(20px,2.2vw,28px) 0;border-right:1px solid var(--n200)}
.figs > div + div{padding-left:clamp(16px,2vw,28px)}
.figs > div:last-child{border-right:0}
.figs .v{font-size:clamp(30px,3.4vw,42px);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.figs .k{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--n500);margin-top:12px}
.figs.f2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
@media(max-width:700px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}.figs > div{border-right:0;padding-left:0}.figs > div + div{padding-left:0}}

/* ---------- LEADERSHIP CARDS (About) ---------- */
.tgrid.lead > div{justify-content:flex-start}
.tgrid .dv{display:block;margin-top:6px;font-family:var(--sans);font-size:13.5px;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--navy)}
.tgrid .dt{margin:18px clamp(20px,2.2vw,26px) 0;border-top:1px solid var(--n200)}
.tgrid .dt .lbl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--n500);padding:14px 0 6px}
.tgrid .dt ul{list-style:none;margin:0;padding:0}
.tgrid .dt li{font-size:14px;line-height:1.5;color:var(--n700);padding:3px 0 3px 14px;position:relative}
.tgrid .dt li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;background:var(--signal)}

/* ---------- PHOTO ROW ---------- */
.photos{display:grid;grid-template-columns:1.65fr 1fr;gap:1px;background:var(--n200);border:1px solid var(--n200);margin-top:clamp(30px,3.6vw,46px)}
.photos figure{margin:0;position:relative;background:var(--n0);overflow:hidden;min-height:280px}
.photos img{width:100%;height:100%;object-fit:cover;display:block;min-height:280px;max-height:520px}
.photos figcaption{position:absolute;left:0;bottom:0;padding:12px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:#fff;background:rgba(1,12,22,.66)}
@media(max-width:700px){.photos{grid-template-columns:1fr}}

/* ---------- DIVISION CLIENT STRIPS ---------- */
.lgs{margin-top:clamp(36px,4.2vw,56px)}
.lgs .lg + .lg{border-top:0}
@media(max-width:1199px){.lgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--n200);border-right:0;border-bottom:0}.lgs .lg{display:contents}}
@media(max-width:780px){.lgs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.lgs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- LINKED PROJECT CARDS (capability pages) ---------- */
.pcard{display:block;color:inherit}
.pcard h3{transition:color .3s var(--e)}
.pcard:hover h3{color:var(--signal)}
.pcard .go{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-top:14px;display:block}

/* ---------- COMMITMENTS ---------- */
.cmt{border-top:1px solid var(--n200)}
.cmt article{display:grid;grid-template-columns:56px minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(16px,2.4vw,44px);padding:clamp(24px,2.8vw,34px) 0;border-bottom:1px solid var(--n200)}
.cmt .no{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--signal);padding-top:6px}
.cmt h3{font-size:clamp(18px,1.8vw,22px);letter-spacing:-.02em;line-height:1.25}
.cmt p{font-size:15.5px;line-height:1.7;color:var(--n700);margin:0 0 12px}
.cmt p:last-child{margin-bottom:0}
.cmt ul{margin:8px 0 0;padding:0;list-style:none}
.cmt li{font-size:15.5px;line-height:1.66;color:var(--n700);padding:4px 0 4px 16px;position:relative}
.cmt li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;background:var(--signal)}
@media(max-width:760px){.cmt article{grid-template-columns:40px 1fr}.cmt article > div{grid-column:2}}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--n200);
  border:1px solid var(--n200);margin-top:clamp(30px,3.6vw,46px)}
.tools a{display:block;background:var(--n0);padding:clamp(26px,3vw,38px);color:inherit;transition:background .3s var(--e)}
.tools a:hover{background:var(--n50)}
.tools a:hover h3{color:var(--signal)}
.tools h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.024em;transition:color .3s var(--e)}
.tools p{font-size:15px;line-height:1.6;color:var(--n600);margin-top:10px}
.tools .go{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-top:18px;display:block}
@media(max-width:700px){.tools{grid-template-columns:1fr}}
.toolframe{display:block;width:100%;min-height:720px;border:1px solid var(--n200);background:#0a1520;margin-top:clamp(26px,3vw,38px)}