:root{--navy:#0A2A5E;--blue:#0B5CFF;--blue-d:#0947CC;--grey:#F4F6FA;--text:#0A2A5E;--muted:#5B6476;--line:#E3E6EE;--max:1200px;--hh:88px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max),100% - 48px);margin-inline:auto}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.025em}
h3{font-weight:600}
.rule{width:36px;height:2px;background:var(--blue);margin:14px 0 20px;border:0}
.center{text-align:center}.center .rule{margin-inline:auto}
section{padding:clamp(64px,8vw,112px) 0}
.bg-grey{background:var(--grey)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 26px;border-radius:6px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s;border:1.5px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(10,42,94,.12)}.btn-blue:hover{background:var(--blue-d);box-shadow:0 8px 20px rgba(11,92,255,.28)}
.btn-outline{border-color:rgba(255,255,255,.85);color:#fff;background:rgba(255,255,255,.04)}.btn-outline:hover{background:#fff;color:var(--navy)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--blue);box-shadow:0 8px 20px rgba(11,92,255,.24)}
.link{color:var(--blue);font-weight:600}.link:hover{text-decoration:underline}

/* Header buttons: undo the newer global .btn tweaks inside the header so it renders exactly as before.
   :where() keeps specificity at one class, so the original header rules below still take precedence. */
:where(.site-header){line-height:1.6;font-feature-settings:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;text-rendering:auto}
:where(.site-header) .btn{min-height:0;border-radius:5px;font-size:14px;letter-spacing:.1em;border-width:2px;white-space:normal;box-shadow:none;transition:background .2s,color .2s,border-color .2s}
:where(.site-header) .btn:hover{transform:none;box-shadow:none}
:where(.site-header) .btn-blue:hover{background:var(--navy)}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;height:var(--hh);z-index:50;background:transparent;transition:background .3s,box-shadow .3s,height .3s}
.site-header.solid,.site-header.always{background:var(--navy);box-shadow:0 2px 18px rgba(0,0,0,.18)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;width:min(1320px,100% - 48px);margin-inline:auto}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand img{height:44px;width:auto}
.brand span{border-left:1px solid rgba(255,255,255,.7);padding-left:10px;font-size:10.5px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.menu{display:flex;align-items:center;gap:36px;list-style:none}
.menu a{color:#fff;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.menu a:hover,.menu a[aria-current]{border-bottom-color:currentColor}
.menu a[aria-current]{border-bottom-color:var(--blue)}
.menu .btn{padding:13px 22px;min-height:44px;border-bottom:0}
.mbook{display:none}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative;z-index:60}
.burger i{position:absolute;left:11px;width:22px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:28px}
.open .burger i:nth-child(1){top:21px;transform:rotate(45deg)}.open .burger i:nth-child(2){opacity:0}.open .burger i:nth-child(3){top:21px;transform:rotate(-45deg)}
@media(max-width:960px){
  :root{--hh:68px}
  .brand img{height:34px}.brand span{font-size:9px}
  .burger{display:block}
  .mbook{display:inline-flex;justify-content:center;margin-left:auto;margin-right:6px;padding:12px 16px;min-height:44px;min-width:44px;font-size:13px;letter-spacing:.08em}
  .menu{position:fixed;inset:0;background:var(--navy);flex-direction:column;justify-content:center;gap:6px;transform:translateX(100%);transition:transform .35s ease;padding:24px}
  .open .menu{transform:none}
  .menu a{font-size:20px;line-height:1;padding:16px 0}
  .menu a[aria-current]{border-bottom-color:var(--blue)}
  .menu li.cta{margin-top:20px}.menu .btn{font-size:14px;line-height:1.2;padding:14px 26px;min-height:48px}
  .menu li.mcontact{margin-top:18px;text-align:center}.menu li.mcontact a{font-size:15px;line-height:28px;display:block;opacity:.85}
}
@media(min-width:961px){.menu li.mcontact{display:none}}
/* Header: no movement when it turns navy.
   1) The navy background + shadow live on a ::before layer that fades in (opacity), so the header element's own paint never
      changes between states and browsers do not re-rasterise/re-snap the text when the background appears.
   2) Every item in the bar sits on a whole-pixel position (no fractional tops from line-height maths). */
.site-header.solid,.site-header.always{background:transparent;box-shadow:none}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);box-shadow:0 2px 18px rgba(0,0,0,.18);opacity:0;transition:opacity .3s;pointer-events:none}
.site-header.solid::before,.site-header.always::before{opacity:1}
.brand span{line-height:14px}
@media(min-width:961px){
  .menu>li{display:flex;align-items:flex-start;height:30px}
  .menu>li>a:not(.btn){display:block;line-height:17px}
  .menu>li.cta{height:auto;align-items:center}
  .menu .btn{line-height:17px;padding:13px 22px 12px}
}
@media(max-width:960px){
  .brand span{line-height:12px}
  .mbook{line-height:16px}
}

/* Home hero: full viewport on every device (hop.group-style statement) */
/* Flex column: content block is centred in the space between the header and the scroll cue,
   and the scroll cue sits in normal flow at the bottom, so the two can never overlap. */
.hero{position:relative;height:100vh;min-height:0;display:flex;flex-direction:column;align-items:stretch;text-align:center;color:#fff;overflow:hidden;padding:var(--hh) 0 0}
@supports(height:100svh){.hero{height:100svh}}
.hero-bg{position:absolute;inset:0;background:url(img/home-hero.jpg) center/cover no-repeat;transform:scale(1.04);animation:heroZoom 12s ease-out forwards}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,42,94,.55) 0%,rgba(10,42,94,.62) 55%,rgba(10,42,94,.85) 100%)}
.hero .container{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:clamp(12px,3vh,32px)}
.hero h1{font-size:clamp(42px,min(9.6vw,13.5vh),148px);font-weight:900;letter-spacing:-.035em;line-height:.95;text-transform:uppercase;animation:fadeUp 1s ease both}
.hero h1 span{display:block}
.hero h1 .o{color:transparent;-webkit-text-stroke:2px #fff}
@supports not (-webkit-text-stroke:2px #fff){.hero h1 .o{color:#fff}}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:clamp(24px,min(4vw,5vh),48px);animation:fadeUp 1s .25s ease both}
@keyframes heroZoom{to{transform:scale(1)}}
.scroll-down{position:relative;flex:none;align-self:center;width:26px;height:42px;margin:0 auto calc(clamp(16px,3vh,28px) + env(safe-area-inset-bottom,0px));border:1.5px solid rgba(255,255,255,.6);border-radius:16px;transition:border-color .2s}
.scroll-down:hover{border-color:#fff}
.scroll-down::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;background:#fff;border-radius:2px;animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(14px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:600px){.hero h1 .o{-webkit-text-stroke:1.5px #fff}.hero .ctas{flex-direction:column;align-items:stretch;width:min(320px,100%);margin-inline:auto}.hero .ctas .btn{justify-content:center}}
/* Short or small screens: drop the scroll cue so the headline and CTAs get the room */
@media(max-height:560px),(max-width:600px) and (max-height:700px){.scroll-down{display:none}}

/* Page hero (inner pages) */
.page-hero{position:relative;height:clamp(300px,52vh,480px);display:flex;align-items:flex-end;color:#fff;padding:0 0 clamp(40px,6vw,72px);background:#0A2A5E center/cover no-repeat}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,42,94,.9),rgba(10,42,94,.45) 60%,rgba(10,42,94,.2))}
.page-hero .container{position:relative}
.page-hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:800}
.page-hero p{max-width:640px;margin-top:12px;font-size:clamp(16px,1.4vw,18px);opacity:.92}

/* Feature cards */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px 28px;box-shadow:0 1px 2px rgba(10,42,94,.04);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.feature:hover{transform:translateY(-4px);border-color:#D3DCEC;box-shadow:0 16px 36px rgba(10,42,94,.09)}
.feature .link{margin-top:auto!important;padding-top:14px}
.feature img{width:56px;height:56px;object-fit:contain;margin-bottom:24px;mix-blend-mode:multiply}
.feature h3{font-size:14px;letter-spacing:.08em;font-weight:700;line-height:1.35;margin-bottom:10px}
.feature p{color:var(--muted);font-size:15px;line-height:1.6}
@media(max-width:960px){.features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.features{grid-template-columns:1fr}}

/* Clients */
.clients h2{font-size:clamp(15px,1.5vw,17px);letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.clients p{color:var(--muted);max-width:620px;margin:12px auto 0}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 56px;margin-top:40px}
.logos img{height:64px;width:auto;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.logos img:hover{filter:none;opacity:1}
@media(max-width:560px){.logos{gap:12px 18px}.logos img{height:52px}}

/* Carousel */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.carousel{position:relative}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;color:#fff;background:#dfe3ea;box-shadow:0 1px 2px rgba(10,42,94,.06);transition:box-shadow .3s}
.slide:hover{box-shadow:0 16px 36px rgba(10,42,94,.14)}
.slide img,.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease-out}
.slide:hover img,.pcard:hover img{transform:scale(1.03)}
.slide .cap,.pcard .cap{position:absolute;inset:auto 0 0 0;padding:60px 22px 20px;background:linear-gradient(0deg,rgba(10,42,94,.88),rgba(10,42,94,0))}
.cap h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
.cap p{font-size:14px;opacity:.88;margin-top:2px}
.arrows{display:flex;gap:10px}
.arrow{width:44px;height:44px;border-radius:50%;border:1px solid #C9D2E2;background:#fff;color:var(--navy);font-size:18px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.arrow:hover{background:var(--navy);border-color:var(--navy);color:#fff}
@media(max-width:960px){.slide{flex-basis:calc((100% - 20px)/2)}}
@media(max-width:600px){.slide{flex-basis:85%}}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split p{color:var(--muted);margin-bottom:16px}
.split .photo{border-radius:10px;overflow:hidden}
.split .photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* CTA band */
.cta-band{background:var(--navy) radial-gradient(120% 140% at 50% 0%,rgba(11,92,255,.18),rgba(11,92,255,0) 60%);color:#fff;text-align:center}
.cta-band p{opacity:.85;margin:14px auto 30px;max-width:560px}
.cta-band .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* About */
.intro-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:0}
.intro-grid>div:first-child{padding-right:clamp(24px,4vw,56px);border-right:2px solid var(--blue)}
.intro-grid>div:last-child{padding-left:clamp(24px,4vw,56px)}
.intro-grid p{color:var(--muted);margin-bottom:18px}
.whatwedo{display:grid;grid-template-columns:1fr 1fr;margin-top:12px}
.whatwedo li{list-style:none;display:flex;align-items:center;gap:16px;padding:16px 8px 16px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:500;line-height:1.35}
.whatwedo img{width:48px;height:42px;object-fit:contain;flex:none}
.why{display:grid;grid-template-columns:1fr 1fr;gap:0}
.why>div:first-child{padding-right:clamp(24px,4vw,56px);border-right:1px solid #cfd5e0}
.why>div:last-child{padding-left:clamp(24px,4vw,56px)}
.why h2{font-size:clamp(24px,2.6vw,32px);margin-top:10px}
.why p{color:var(--muted)}
.ticks{list-style:none;margin-top:16px}
.ticks li{display:flex;gap:14px;align-items:center;padding:9px 0}
.ticks img{width:22px;height:22px}
.mission{margin-top:28px}.mission strong{display:block;color:var(--navy)}
@media(max-width:860px){.intro-grid,.why{grid-template-columns:1fr}.intro-grid>div:first-child,.why>div:first-child{border-right:0;padding-right:0;padding-bottom:32px;border-bottom:2px solid var(--blue);margin-bottom:32px}.why>div:first-child{border-bottom-color:#cfd5e0}.intro-grid>div:last-child,.why>div:last-child{padding-left:0}}
@media(max-width:480px){.whatwedo{grid-template-columns:1fr}}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.svc{background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.svc:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(10,42,94,.1)}
.svc .card-img{aspect-ratio:408/300;overflow:hidden}
.svc:hover img{transform:scale(1.03)}
.svc-body{padding:24px;display:flex;flex-direction:column;flex:1}
.svc h3{font-size:20px;font-weight:700;margin-bottom:10px}
.svc p{color:var(--muted);font-size:15px;flex:1;margin-bottom:20px}
@media(max-width:1060px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* Projects */
.intro-line{font-size:clamp(18px,2vw,23px);max-width:860px;margin:0 auto;text-align:center;color:var(--navy);line-height:1.5}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:36px 0 40px;padding-top:28px;border-top:1px solid var(--line)}
.chip{border:0;background:var(--grey);color:var(--navy);padding:15px 20px;min-height:44px;border-radius:999px;font:600 13px/1 inherit;font-family:inherit;letter-spacing:.12em;cursor:pointer;transition:.2s}
.chip:hover{background:#e3e8f2}.chip.active{background:var(--blue);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pcard{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:10px;color:#fff;transition:opacity .3s,transform .3s}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease-out}
.pcard .cap h3{font-size:clamp(20px,2.2vw,26px)}
.pcard.hide{display:none}
.tag{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-bottom:6px}
@media(max-width:700px){.pgrid{grid-template-columns:1fr}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px)}
.contact-grid h2{font-size:clamp(28px,3vw,38px)}
.contact-grid p{color:var(--muted);margin:14px 0 26px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
form .f{margin-bottom:16px}
input,textarea{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1px solid #9aa4b6;border-radius:4px;background:#fff;color:var(--navy)}
input:focus,textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0}
.form-note{font-size:14px;color:var(--muted);margin-top:12px}
.enq{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}
.enq h3{font-size:22px;margin-bottom:10px}
.enq a{display:block;font-size:15px;margin-bottom:4px}.enq a:hover{color:var(--blue)}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{width:44px;height:44px;border-radius:50%;background:var(--blue);display:grid;place-items:center;transition:.2s}
.socials a:hover{background:var(--navy)}
.socials svg{width:20px;height:20px;fill:#fff}
.map{border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/11}
.map iframe{width:100%;height:100%;border:0}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:420px){form .row,.enq{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:var(--navy);color:#fff;padding:72px 0 28px;font-size:14px;line-height:1.6;border-top:1px solid rgba(255,255,255,.08)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px 48px}
.fgrid img{height:38px;width:auto;margin-bottom:20px}
.fgrid h4{font-size:11px;letter-spacing:.18em;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:18px}
.fgrid ul{list-style:none}.fgrid li{margin-bottom:10px;color:rgba(255,255,255,.78)}
.fgrid a:not(.btn){color:rgba(255,255,255,.78);transition:color .2s}.fgrid a:not(.btn):hover{color:#fff}
.fgrid p{color:rgba(255,255,255,.72);max-width:280px}
.fbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:56px;padding-top:24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:rgba(255,255,255,.6);font-size:13px}
.fgrid .socials{margin-top:18px}.fgrid .socials a{width:36px;height:36px;background:rgba(255,255,255,.12)}.fgrid .socials a:hover{background:var(--blue)}.fgrid .socials svg{width:16px;height:16px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}

.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in,.no-js .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

@media(max-width:380px){.brand span{display:none}}
/* Placeholders */
/* How we work */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px;counter-reset:s}
.step{position:relative;border-top:1px solid #D3DAE6;padding-top:24px}
.step::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:2px;background:var(--blue)}
.step b{display:block;font-size:34px;font-weight:800;color:var(--blue);line-height:1;margin-bottom:14px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.step h3{font-size:19px;font-weight:700;margin-bottom:8px}.step p{color:var(--muted);font-size:15px}
@media(max-width:960px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:520px){.steps{grid-template-columns:1fr}}
/* services rows */
.srow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(40px,6vw,72px) 0;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow:nth-child(even) .simg{order:2}
.simg{border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--grey)}
.simg img{width:100%;height:100%;object-fit:cover}
.sicon{width:56px;height:56px;object-fit:contain;mix-blend-mode:multiply;margin-bottom:16px}
.srow h2{font-size:clamp(26px,3vw,36px)}
.srow p{color:var(--muted);margin:14px 0}
.bul{list-style:none;margin:18px 0 22px}
.bul li{position:relative;padding:7px 0 7px 30px;border-bottom:1px solid var(--line);font-size:15px}
.bul li::before{content:"";position:absolute;left:0;top:12px;width:18px;height:18px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.related{font-size:14px;margin-bottom:22px}.related strong{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.related a{display:inline-block;background:var(--grey);border-radius:999px;padding:6px 12px;margin:0 6px 6px 0;font-weight:600;font-size:13px}.related a:hover{background:var(--blue);color:#fff}
.snav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.snav a{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px 8px 8px;font-weight:600;font-size:14px}
.snav a:hover{border-color:var(--blue)}.snav img{width:32px;height:32px;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:860px){.srow{grid-template-columns:1fr}.srow:nth-child(even) .simg{order:0}}
/* project cards */
.pcard{display:block}
.pcard .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.8;display:block;margin-bottom:6px}
.pcard .go{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:.4s}
.pcard:hover .go,.pcard:focus .go{opacity:1;transform:none}
@media(hover:none){.pcard .go{opacity:1;transform:none}}
.pgrid.three{grid-template-columns:repeat(6,1fr)}.pgrid.three>.pcard{grid-column:span 2}.pgrid.three>.pcard.pfeature{grid-column:1/-1}
/* last row of the projects grid: no empty cells (classes set by site.js / build.py for the visible cards) */
@media(min-width:961px){.pgrid.three>.pcard.r3-2{grid-column:span 3;aspect-ratio:16/10}.pgrid.three>.pcard.r3-1{grid-column:1/-1;aspect-ratio:21/9}}
@media(max-width:960px){.pgrid.three{grid-template-columns:1fr 1fr}.pgrid.three>.pcard{grid-column:auto}.pgrid.three>.pcard.pfeature,.pgrid.three>.pcard.r2-1{grid-column:1/-1;aspect-ratio:21/9}}@media(max-width:700px){.pgrid.three>.pcard.r2-1{aspect-ratio:4/3}}@media(max-width:600px){.pgrid.three{grid-template-columns:1fr}}
.pfeature{grid-column:1/-1;aspect-ratio:21/9}
@media(max-width:700px){.pfeature{aspect-ratio:4/3}}
.count{font-size:14px;color:var(--muted);text-align:center;margin-top:-20px;margin-bottom:24px}
/* project page */
.proj-hero{position:relative;height:100vh;min-height:480px;display:flex;align-items:flex-end;color:#fff;padding:0 0 clamp(48px,8vw,96px)}
@supports(height:100svh){.proj-hero{height:100svh}}
.proj-hero>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,42,94,.92),rgba(10,42,94,.25) 55%,rgba(10,42,94,.35))}
.proj-hero .container{position:relative;z-index:1}
.proj-hero h1{font-size:clamp(40px,7vw,96px);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95}
.crumbs{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:14px}.crumbs a:hover{text-decoration:underline}
.facts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px clamp(40px,6vw,96px);padding:44px 0;border-bottom:1px solid var(--line)}
.facts>div{min-width:0;max-width:100%}
.facts dt{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#808a9c;margin-bottom:6px}
.facts dd{font-size:clamp(18px,1.8vw,23px);font-weight:700;line-height:1.35}
.facts .logo img{height:64px;width:auto}
@media(max-width:760px){.facts .loc{flex-basis:100%}}
.story{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
@media(min-width:861px){.story.n2{grid-template-columns:repeat(2,1fr)}}.story.n1{grid-template-columns:1fr}.story.n1>div{max-width:760px}.story.n1 p{font-size:clamp(17px,1.5vw,19px)}
.story h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.story p{color:var(--muted)}
@media(max-width:860px){.story{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gallery figure{overflow:hidden;border-radius:6px;aspect-ratio:4/3;background:var(--grey)}
.gallery figure.wide{grid-column:1/-1;aspect-ratio:1208/450}
.gallery figure.tall{aspect-ratio:3/4}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease-out;cursor:zoom-in}
.gallery figure:hover img{transform:scale(1.03)}
/* gap-free gallery rows (see gallery_plan in build.py) */
.gallery figure.stack{grid-row:span 2;aspect-ratio:auto}
.gallery figure.sq{aspect-ratio:1/1}
.gallery figure.solo{grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
@media(max-width:600px){.gallery{grid-template-columns:1fr}.gallery figure.wide{aspect-ratio:4/3}.gallery figure.stack{grid-row:auto;aspect-ratio:3/4}.gallery figure.sq{aspect-ratio:4/3}.gallery figure.sq.tall{aspect-ratio:3/4}.gallery figure.solo{width:100%}}
.quote{max-width:900px;margin:0 auto;text-align:center}
.quote blockquote{font-size:clamp(20px,2.4vw,30px);line-height:1.45;font-weight:500;color:var(--navy)}
.quote blockquote::before{content:"“";display:block;font-size:80px;line-height:.6;color:var(--blue);margin-bottom:10px}
.quote cite{display:block;margin-top:20px;font-style:normal;color:var(--muted);font-size:15px}
.nextp{position:relative;display:block;height:clamp(240px,40vw,420px);overflow:hidden;color:#fff}
.nextp img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease-out}
.nextp:hover img{transform:scale(1.03)}
.nextp div{position:absolute;inset:0;background:rgba(10,42,94,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.nextp span{font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.nextp strong{font-size:clamp(28px,4vw,56px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.lightbox{position:fixed;inset:0;background:rgba(6,20,48,.94);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.lightbox.on{display:flex}.lightbox img{max-width:100%;max-height:90vh;border-radius:4px}
.lightbox button{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:22px;cursor:pointer}
/* About extras */
.pull{font-size:clamp(22px,2.8vw,34px);line-height:1.35;font-weight:600;max-width:900px;margin:0 auto;text-align:center}
.pull strong{color:var(--blue)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px;display:flex;flex-direction:column}
.qcard p{flex:1;font-size:15.5px;color:var(--navy)}
.qcard p::before{content:"“";display:block;font-size:48px;line-height:.7;color:var(--blue);margin-bottom:6px}
.qcard cite{font-style:normal;font-size:13.5px;color:var(--muted);margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.qcard cite b{display:block;color:var(--navy)}
@media(max-width:960px){.quotes{grid-template-columns:1fr 1fr}}@media(max-width:600px){.quotes{grid-template-columns:1fr}}
/* legal */
.legal{max-width:820px}.legal h2{font-size:24px;margin:36px 0 12px}.legal p,.legal li{color:#33415c;margin-bottom:10px}.legal ul{padding-left:22px}
.sticky-cta{display:none}
@media(max-width:600px){.site-footer{padding-bottom:calc(28px + 76px + env(safe-area-inset-bottom,0px))}.sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;gap:8px;transform:translateY(calc(100% + 48px));transition:transform .3s}.sticky-cta.on{transform:none}.sticky-cta a{flex:1;justify-content:center;text-align:center;padding:13px 10px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25)}}
.form-err{color:#0947CC;font-weight:600}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#fff;color:var(--navy);padding:8px 12px;border-radius:4px}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.menu li.mcontact a:not(.btn){text-transform:none;letter-spacing:.02em;border:0;padding:4px 0}
/* Project gallery: photos coming soon (intentional empty state) */
/* ===== Neutral palette (the site's only theme): overrides the base rules above. Palette: restrained, mostly neutral. Navy stays only on header-on-scroll, mobile menu and footer;
   bright blue only on primary buttons, text links and focus rings. (Header rules above are untouched.) ===== */
:root{--ink:#111827;--text:#111827;--muted:#4B5563;--grey:#F5F6F8;--line:#E5E7EB;--line-2:#D1D5DB}
.eyebrow{color:#6B7280}
.rule{background:var(--ink)}
.btn-blue{box-shadow:0 1px 2px rgba(17,24,39,.12)}.btn-blue:hover{box-shadow:0 6px 16px rgba(17,24,39,.16)}
/* secondary buttons: charcoal outline */
.btn-navy{background:#fff;color:var(--ink);border-color:var(--ink)}.btn-navy:hover{background:var(--ink);color:#fff;box-shadow:none}
/* hero + overlays: dark but neutral, not blue-tinted */
.hero-bg::after{background:linear-gradient(180deg,rgba(12,14,18,.5) 0%,rgba(12,14,18,.58) 55%,rgba(12,14,18,.8) 100%)}
.page-hero{background-color:#1F2937}
.page-hero::before{background:linear-gradient(90deg,rgba(12,14,18,.82),rgba(12,14,18,.42) 60%,rgba(12,14,18,.18))}
.proj-hero::after{background:linear-gradient(0deg,rgba(12,14,18,.88),rgba(12,14,18,.22) 55%,rgba(12,14,18,.32))}
.slide .cap,.pcard .cap{background:linear-gradient(0deg,rgba(12,14,18,.82),rgba(12,14,18,0))}
.nextp div{background:rgba(12,14,18,.55)}
.lightbox{background:rgba(10,11,14,.94)}.lightbox button{color:var(--ink)}
/* cards, shadows, controls */
.feature{box-shadow:0 1px 2px rgba(17,24,39,.04)}.feature:hover{border-color:var(--line-2);box-shadow:0 16px 36px rgba(17,24,39,.08)}
.slide{background:#E5E7EB;box-shadow:0 1px 2px rgba(17,24,39,.06)}.slide:hover{box-shadow:0 16px 36px rgba(17,24,39,.14)}
.svc:hover{box-shadow:0 14px 34px rgba(17,24,39,.08)}
.arrow{border-color:var(--line-2);color:var(--ink)}.arrow:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.feature img,.sicon,.whatwedo img,.snav img,.ticks img{filter:grayscale(1) brightness(.75) contrast(2.1)}
/* CTA band: light card instead of a navy block, so it no longer merges into the footer */
.cta-band{background:#fff;color:var(--ink)}
.cta-band>.container{background:var(--grey);border:1px solid var(--line);border-radius:16px;padding:clamp(40px,6vw,72px) clamp(20px,4vw,48px)}
.cta-band p{color:var(--muted);opacity:1}
.cta-band .btn-outline{border-color:var(--ink);color:var(--ink);background:#fff}.cta-band .btn-outline:hover{background:var(--ink);color:#fff}
/* How we work: neutral lines and numbers */
.step{border-top-color:var(--line-2)}.step::before{background:#9CA3AF}
.step b{color:#9CA3AF}
/* about / services / projects / contact accents */
.intro-grid>div:first-child{border-right-color:var(--line-2)}
.why>div:first-child{border-right-color:var(--line)}
@media(max-width:860px){.intro-grid>div:first-child{border-bottom-color:var(--line-2)}.why>div:first-child{border-bottom-color:var(--line)}}
.mission strong,.intro-line,.quote blockquote,.qcard p,.qcard cite b,.pull strong{color:var(--ink)}
.quote blockquote::before,.qcard p::before{color:var(--line-2)}
.chip{color:var(--ink)}.chip:hover{background:var(--line)}.chip.active{background:var(--ink);color:#fff}
input,textarea{border-color:#9CA3AF;color:var(--ink)}
.socials a{background:var(--ink)}.socials a:hover{background:var(--blue)}
.fgrid .socials a{background:rgba(255,255,255,.12)}.fgrid .socials a:hover{background:var(--blue)}
.bul li::before{background-color:var(--ink)}
.related a:hover{background:var(--ink);color:#fff}
.snav a:hover{border-color:var(--ink)}
.facts dt{color:#6B7280}
.story h3{color:#6B7280}
.legal p,.legal li{color:#374151}
.form-err{color:var(--ink)}
.skip{color:var(--ink)}