/* services: interactive split */
.svc-split{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,80px)}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.svc-list a{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line-dark);transition:padding var(--dur-2) var(--ease),color var(--dur-1)}
.svc-list .n{font:700 13px var(--font-display);color:var(--blue)}
.svc-list h3{font-size:clamp(20px,2.3vw,32px)}
.svc-list p{grid-column:2;margin:6px 0 0;font-size:15px;color:#4a5666;max-width:48ch}
.svc-list .ar{transition:transform var(--dur-2) var(--ease)}
.svc-list a:hover,.svc-list a.on{padding-left:14px;color:var(--navy)}
.svc-list a:hover .ar,.svc-list a.on .ar{transform:translateX(6px)}
.svc-preview{position:sticky;top:96px;align-self:start;aspect-ratio:4/5;overflow:hidden;background:var(--navy)}
.svc-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity var(--dur-3) var(--ease),transform 1.4s var(--ease)}
.svc-preview img.on{opacity:1;transform:none}
/* technical publication layout */
.spec-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px)}
.spec-main{grid-column:1/8}.spec-side{grid-column:8/13}
.spec-table{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.spec-table li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.spec-table b{font:700 12px var(--font-display);color:var(--green);padding-top:3px}
.spec-table strong{display:block;font:700 17px/1.3 var(--font-display)}
.spec-table span{font-size:14px;color:var(--steel)}
.note{border-left:2px solid var(--green);padding:6px 0 6px 18px;font-size:14px;color:#c0cad6;margin-top:28px;max-width:60ch}
/* supplies */
.supply{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line-dark)}
.supply>div{padding:26px 22px 30px;border-right:1px solid var(--line-dark);transition:background var(--dur-2)}
.supply>div:last-child{border-right:0}
.supply>div:hover{background:#fff}
.supply svg{width:34px;height:34px;stroke:var(--navy);fill:none;stroke-width:1.6;margin-bottom:22px}
.supply h3{font-size:18px;margin-bottom:10px}
.supply p{font-size:14px;color:#4a5666;margin:0}
/* capability showcase (photo + markers) */
.showcase{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.sc-stage{position:relative;overflow:hidden;aspect-ratio:4/3;background:#1a2738}
.sc-stage img{width:100%;height:100%;object-fit:cover}
.sc-stage .mk{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--green);background:rgba(11,20,32,.55);color:var(--green);font:700 12px var(--font-display);cursor:pointer;display:grid;place-items:center;transition:transform var(--dur-2) var(--ease),background var(--dur-1)}
.sc-stage .mk::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--green);opacity:.5;animation:ping 2.4s var(--ease) infinite}
.sc-stage .mk[aria-selected=true]{background:var(--green);color:var(--ink);transform:scale(1.15)}
.sc-panel{border-top:2px solid var(--green);padding-top:22px;min-height:230px}
.sc-panel h3{margin-bottom:12px}
.sc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sc-tabs button{background:none;border:1px solid var(--line);color:var(--paper);padding:9px 13px;font:600 12px var(--font-display);cursor:pointer;transition:all var(--dur-1)}
.sc-tabs button[aria-selected=true]{background:var(--green);color:var(--ink);border-color:var(--green)}
/* project gallery */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filters button{background:none;border:1px solid var(--line);color:var(--paper);padding:10px 16px;font:600 13px var(--font-display);cursor:pointer;transition:all var(--dur-1)}
.light .filters button{color:var(--ink);border-color:var(--line-dark)}
.filters button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(120px,15vw,210px);gap:clamp(8px,1.2vw,16px)}
.g-item{position:relative;overflow:hidden;cursor:pointer;background:#1a2738;border:0;padding:0;color:inherit;text-align:left;grid-column:span 4;grid-row:span 2}
.g-item.w{grid-column:span 8;grid-row:span 3}
.g-item.t{grid-row:span 3}
.g-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.g-item:hover img{transform:scale(1.06)}
.g-item .cap-in{position:absolute;inset:auto 0 0 0;padding:44px 16px 16px;background:linear-gradient(0deg,rgba(11,20,32,.92),transparent);font:700 12px/1.35 var(--font-display);letter-spacing:.08em;text-transform:uppercase;transform:translateY(55%);transition:transform var(--dur-2) var(--ease)}
.g-item:hover .cap-in,.g-item:focus-visible .cap-in{transform:none}
.g-item[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(5,10,18,.94);display:none;place-items:center;padding:24px}
.lightbox.open{display:grid}
.lightbox figure{margin:0;max-width:min(1100px,100%);max-height:100%}
.lightbox img{max-height:76vh;width:auto;margin:auto}
.lightbox figcaption{margin-top:14px;text-align:center;font:600 13px var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.lb-x{position:absolute;top:18px;right:18px;background:none;border:1px solid var(--line);color:var(--paper);padding:11px 16px;font:700 13px var(--font-display);cursor:pointer}
/* process */
.proc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,90px)}
.proc-visual{position:sticky;top:90px;align-self:start;aspect-ratio:4/5;overflow:hidden;background:var(--ink-2)}
.proc-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-3) var(--ease)}
.proc-visual img.on{opacity:1}
.proc-steps{position:relative;padding-left:44px}
.proc-steps::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:1px;background:var(--line)}
.proc-bar{position:absolute;left:11px;top:0;width:1px;height:100%;background:var(--green);transform:scaleY(0);transform-origin:top}
.pstep{position:relative;padding-bottom:clamp(60px,10vw,140px);opacity:.38;transition:opacity var(--dur-2)}
.pstep.on{opacity:1}
.pstep::before{content:"";position:absolute;left:-39px;top:6px;width:11px;height:11px;border:1.5px solid var(--green);background:var(--ink);border-radius:50%}
.pstep.on::before{background:var(--green)}
.pstep .n{font:700 13px var(--font-display);color:var(--green);letter-spacing:.12em}
.pstep h3{font-size:clamp(26px,3.2vw,44px);margin:8px 0 12px}
.pstep p{color:#b9c4d2;max-width:46ch;margin:0}
/* safety */
.safety{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.safety-img{min-height:520px;position:relative}
.safety-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.safety-body{background:var(--navy);padding:clamp(36px,6vw,96px)}
.checks{list-style:none;margin:28px 0 0;padding:0}
.checks li{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line);font-size:16px}
.checks li::before{content:"";flex:none;width:9px;height:9px;margin-top:9px;background:var(--green)}
/* workforce */
.work{display:grid;grid-template-columns:5fr 4fr;gap:clamp(24px,4vw,64px);align-items:center}
.work .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.work .duo .frame:first-child{grid-row:span 2;aspect-ratio:3/4}.work .duo .frame{aspect-ratio:1}
/* procurement editorial */
.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:c;border-top:1px solid var(--line-dark)}
.cycle li{list-style:none;counter-increment:c;padding:28px 22px 8px 0}
.cycle li::before{content:"0" counter(c);display:block;font:800 clamp(34px,4vw,56px)/1 var(--font-display);color:var(--blue);margin-bottom:16px}
.cycle h3{font-size:19px;margin-bottom:8px}.cycle p{font-size:14px;color:#4a5666}
/* industries tiles */
.ind{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ind a{position:relative;min-height:clamp(300px,34vw,480px);overflow:hidden;display:flex;align-items:flex-end;padding:24px;isolation:isolate}
.ind a:nth-child(even){margin-top:clamp(0px,4vw,56px)}
.ind img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.ind a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,20,32,.92),rgba(11,20,32,.1) 70%)}
.ind a:hover img{transform:scale(1.07)}
.ind h3{font-size:22px;margin-bottom:6px}.ind p{font-size:14px;color:#c9d2de;margin:0}
/* testing */
.tc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tc figure{margin:0}.tc .frame{aspect-ratio:4/5}
.tc-points{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:44px}
.tc-points div{border-top:2px solid var(--green);padding-top:16px}
.tc-points h3{font-size:19px;margin-bottom:6px}.tc-points p{font-size:14px;color:var(--steel);margin:0}
/* client principles */
.princ{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-top:40px}
.princ div{background:var(--paper);padding:28px 24px}
.princ b{font:800 13px var(--font-display);color:var(--blue)}.princ h3{font-size:19px;margin:12px 0 8px}.princ p{font-size:14px;color:#4a5666;margin:0}
/* insights */
.ins{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.ins a{padding:28px 28px 34px 0;border-bottom:1px solid var(--line);transition:padding var(--dur-2) var(--ease)}
.ins a:hover{padding-left:12px}
.ins h3{font-size:21px;margin:14px 0 8px}.ins p{font-size:14px;color:var(--steel);margin:0}
/* faq */
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:20px;font:700 clamp(18px,2vw,24px)/1.3 var(--font-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:28px;line-height:1;transition:transform var(--dur-2) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{overflow:hidden}.faq .ans p{max-width:68ch;padding-bottom:24px;color:#3b4757;margin:0}
.dark .faq details{border-color:var(--line)}
/* CTA */
.cta{position:relative;isolation:isolate;text-align:left;overflow:hidden}
.cta .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,20,32,.94),rgba(11,20,32,.55))}
.cta h2{max-width:13ch;margin-bottom:24px}
/* inner page */
.page-hero{padding:calc(var(--header-h) + clamp(48px,8vw,110px)) 0 clamp(48px,7vw,90px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(36px,6vw,88px);max-width:18ch}
.page-hero p{max-width:60ch;color:#c0cad6;margin-top:22px}
.shell-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(28px,5vw,80px)}
.panel{border:1px solid var(--line);padding:28px;background:var(--ink-2)}
.panel h3{font-size:19px;margin-bottom:14px}
.panel ul{margin:0;padding:0;list-style:none}.panel li{padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.panel li a:hover{color:var(--green)}
.draft{display:inline-block;margin-bottom:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{border:1px solid var(--line);padding:24px;transition:border-color var(--dur-1),transform var(--dur-2) var(--ease)}
.card:hover{border-color:var(--green);transform:translateY(-3px)}
.card h3{font-size:19px;margin-bottom:8px}.card p{font-size:14px;color:var(--steel);margin:0}
/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form .full{grid-column:1/-1}
.field{display:grid;gap:8px;font:600 13px var(--font-display);letter-spacing:.04em}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);color:var(--paper);font:400 16px var(--font-body);padding:12px 0;border-radius:0;transition:border-color var(--dur-1)}
.field select option{background:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--green)}
.field [aria-invalid=true]{border-color:#ff7a59}
.err{color:#ff9d84;font:500 12px var(--font-body);min-height:1em}
.status{padding:16px 18px;border:1px solid var(--line);font-size:15px}
.status[hidden]{display:none}
.status.warn{border-color:#f0c36a;color:#f0c36a}
.status.ok{border-color:var(--green);color:var(--green)}
.contact-lines a{display:block;font:700 clamp(20px,2.4vw,30px)/1.5 var(--font-display)}
.contact-lines a:hover{color:var(--green)}
/* footer */
.footer{background:#070d15;border-top:1px solid var(--line);padding:clamp(56px,8vw,110px) 0 28px}
.f-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(24px,3vw,48px)}
.footer h4{font:700 12px var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:16px}
.footer ul{list-style:none;margin:0;padding:0}.footer li a{display:block;padding:5px 0;font-size:14px;color:#b9c4d2}
.footer li a:hover{color:var(--paper)}
.footer .brand{display:inline-flex;margin-bottom:20px}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--steel)}
.f-bottom a:hover{color:var(--paper)}
