/* Option 2: The Mosaic. White ground, centred logo, black-and-white photos that interlock with gold and black squares. */
:root{--tx:#111;--mu:#5a5a5a;--ln:#dcdcdc;--g:#c9a227;--g2:#e0bb45}
body{background:#fff;color:var(--tx)}
.lab{font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.h2{font-weight:400;font-size:clamp(2rem,4.6vw,4.25rem);line-height:1.06;letter-spacing:-.012em}

.hd{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--ln)}
.nav{font-size:.98rem}
.nav.open{background:#fff;font-size:1.25rem}
.nav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--g)}
.nav a:hover{color:#8a6c10}
.nav .sub{color:var(--mu)}
.logo{width:120px}
@media (min-width:1024px){
  .hd-in{position:relative;display:block;min-height:96px}
  .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px}
  .nav,.nav.open{display:grid;grid-template-columns:1fr 230px 1fr;min-height:96px;gap:0}
  .nav-g{display:flex!important;align-items:center;gap:clamp(18px,2.4vw,36px)}
  .nav-l{grid-column:1;justify-content:flex-end}
  .nav-r{grid-column:3}
  .nav .sub{background:#fff;border:1px solid var(--ln);border-top:3px solid var(--g);z-index:5}
}

/* The grid */
.mosw{container-type:inline-size;width:100%}
.mos{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:50cqw}
@media (min-width:768px){.mos{grid-template-columns:repeat(6,1fr);grid-auto-rows:calc(100cqw/6)}}
.t{position:relative;display:block;overflow:hidden;min-width:0}
.t>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gold{background:var(--g);color:#111}
.blk{background:#0b0a09;color:#fff}
.t-tx{padding:clamp(14px,1.8cqw,28px);display:flex;flex-direction:column;justify-content:space-between}
.t-tx small{font-size:clamp(.7rem,.95cqw,.86rem);letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.t-tx b{font-weight:400;font-size:clamp(1.15rem,2.1cqw,2.1rem);line-height:1.14}
.t-big b{font-size:clamp(1.5rem,3.3cqw,3.4rem);line-height:1.08;letter-spacing:-.01em}
.t-mark{display:flex;align-items:center;justify-content:center}
.t-mark img{position:static;width:44%;height:auto;object-fit:contain}
.t-link{transition:background .2s}
a.gold.t-link:hover{background:var(--g2)}
a.blk.t-link:hover{background:#2a2622}

.mos-home{grid-template-areas:"h h" "h h" "c c" "a ." "e e" "m m" ". b" "l l" "x x" "t t"}
@media (min-width:768px){.mos-home{grid-template-areas:"h h h h c c" "h h h h c c" "a e e m m ." "b e e m m d" "l l t t x x" "l l t t x x"}}
.a-h{grid-area:h}.a-construction{grid-area:c}.a-energy{grid-area:e}.a-manufacturing{grid-area:m}.a-healthcare{grid-area:l}.a-technology{grid-area:t}
.a-a{grid-area:a}.a-b{grid-area:b}.a-d{grid-area:d}.a-x{grid-area:x}
@media (max-width:767.98px){.a-d{display:none}}

/* Hero tile: the harbour and gold headline from today's site */
.t-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 22%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.84) 100%)}
.t-hero h1{position:absolute;z-index:2;left:clamp(16px,2.6cqw,44px);right:clamp(16px,2.6cqw,44px);bottom:clamp(16px,2.4cqw,40px);color:var(--g2);font-weight:400;font-size:clamp(2rem,5.4cqw,6rem);line-height:1.04;letter-spacing:-.016em;max-width:12em}

/* Industry tile */
.ti>img{filter:grayscale(1) contrast(1.06);transition:filter .5s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ti:hover>img,.ti:focus-visible>img{filter:none;transform:scale(1.03)}
.ti::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%)}
.ti-b{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(14px,1.8cqw,28px);color:#fff;transition:background .3s,color .3s}
.ti-n{display:block;font-size:clamp(1.5rem,2.75cqw,2.9rem);line-height:1.06;letter-spacing:-.01em}
.ti-q{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.ti-q>span{overflow:hidden;font-size:clamp(.98rem,1.32cqw,1.3rem);line-height:1.26}
.ti:hover .ti-b,.ti:focus-visible .ti-b{background:var(--g);color:#111}
.ti:hover .ti-q,.ti:focus-visible .ti-q{grid-template-rows:1fr}
.ti:hover .ti-q>span,.ti:focus-visible .ti-q>span{padding-top:8px}
@media (hover:none),(max-width:767.98px){
  .ti-q{grid-template-rows:1fr}
  .ti-q>span{padding-top:4px;font-size:.98rem}
  .ti:hover .ti-b{background:none;color:#fff}
}

/* Who we are */
.sec{padding-block:clamp(64px,9vw,136px)}
.who{display:grid;gap:clamp(28px,5vw,72px)}
.who-big{font-size:clamp(1.55rem,3.15vw,3rem);line-height:1.22;letter-spacing:-.006em;margin-top:clamp(16px,2vw,28px)}
.who-small{color:var(--mu);margin-top:clamp(18px,2.4vw,32px);max-width:38em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);align-self:start}
.steps>*{aspect-ratio:1;position:relative;overflow:hidden}
.steps img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
@media (min-width:1024px){.who{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}

/* Three tiles of services */
.svc{display:grid}
.svc>*{padding:clamp(20px,3cqw,44px);min-height:clamp(300px,33cqw,480px);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.svc h3{font-weight:400;font-size:clamp(2.1rem,4.4cqw,4.5rem);line-height:1;letter-spacing:-.014em}
.svc li{padding-block:9px;border-top:1px solid currentColor;font-size:1.02rem}
.svc .wht{border:1px solid var(--ln)}
.svc .blk h3{color:var(--g2)}
.svc .blk li{border-color:rgba(255,255,255,.26)}
@media (min-width:768px){.svc{grid-template-columns:repeat(3,1fr)}}

/* Clients: stepped tiles */
.cln{grid-template-areas:"h h" "i i" "r r" "e e" "q q"}
.cln>*{min-height:0}
@media (min-width:768px){.cln{grid-template-areas:"h h i i r r" ". . e e q q"}}
.c-h{grid-area:h}.c-i{grid-area:i}.c-r{grid-area:r}.c-e{grid-area:e}.c-q{grid-area:q}
.c-logo{display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--ln);transition:box-shadow .2s}
.c-logo img{position:static;width:auto;max-width:62%;max-height:70%;height:auto;object-fit:contain}
.c-logo:hover{box-shadow:inset 0 0 0 3px var(--g)}
.c-logo span{position:absolute;left:14px;bottom:10px;font-size:.84rem;color:var(--mu);transition:color .2s}
.c-logo:hover span{color:#111}

/* Look-for band */
.look{display:grid;gap:clamp(24px,4vw,60px)}
.look ol{columns:1;border-top:1px solid var(--ln)}
.look li{break-inside:avoid;border-bottom:1px solid var(--ln)}
.look li a{display:flex;align-items:center;gap:14px;min-height:46px;transition:padding .2s}
.look li a:hover{padding-left:10px;color:#8a6c10}
.look li i{font-style:normal;font-size:.76rem;color:var(--mu);min-width:20px}
.look p{color:var(--mu);margin-top:14px;max-width:32em}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;margin-top:22px;background:#111;color:#fff;font-weight:500;transition:background .2s}
.btn:hover{background:#8a6c10}
@media (min-width:1024px){.look{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.look ol{columns:2;column-gap:32px;border-top:0}}

/* Pitch */
.pitch{background:var(--g);padding-block:clamp(56px,8vw,120px)}
.pitch .say-line{font-size:clamp(1.9rem,5vw,4.8rem);font-weight:400;letter-spacing:-.012em;margin-top:clamp(14px,2vw,24px);max-width:17em}
.say select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.4'/%3E%3C/svg%3E")}
.say-go{background:#111;color:#fff}
.say-go:hover{background:#333}
.pitch-or{margin-top:16px}
.pitch-or a{border-bottom:1px solid #111}

/* Tracker sits above the footer as a white band */
.track{background:#fff;border-block:1px solid var(--ln);min-height:88px}
.track-lab{color:#111;font-weight:500}
.t-ask{color:#111;font-weight:500}
.t-delta{height:28px}.t-col{height:38px}.t-lbm{height:24px}

/* Footer */
.ft{background:#0b0a09;color:#fff;padding-block:clamp(44px,6vw,80px) 28px}
.ft-grid{display:grid;gap:32px}
.ft img.ft-logo{width:150px}
.ft h4{font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--g2);margin-bottom:12px}
.ft li a,.ft address a{display:inline-flex;align-items:center;min-height:32px}
.ft a:hover{color:var(--g2)}
.ft address{font-style:normal}
.ft-fine{margin-top:clamp(32px,4vw,56px);padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:.84rem;color:#aaa}
@media (min-width:768px){.ft-grid{grid-template-columns:2fr 1fr 1fr 1.4fr}}

/* Inner page mosaics */
.mos-ind{grid-template-areas:"p p" "p p" "q q" "n n" "s b"}
@media (min-width:768px){.mos-ind{grid-template-areas:"p p p p q q" "p p p p q q" ". n n n b s"}}
.a-p{grid-area:p}.a-q{grid-area:q}.a-n{grid-area:n}.a-s{grid-area:s}
.a-q b{font-size:clamp(1.5rem,2.9cqw,3rem);line-height:1.1;letter-spacing:-.01em}
.a-n{display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,1.8cqw,28px)}
.a-n h1{font-weight:400;font-size:clamp(2.1rem,5cqw,5.2rem);line-height:1;letter-spacing:-.016em}
.a-n small{margin-top:10px;font-size:clamp(.72rem,.95cqw,.86rem);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#8a6c10}
.mono{filter:grayscale(1)}
.t>img.pos-r{object-position:90% 50%}

.tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-block:1px solid var(--ln)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:1 0 auto;display:flex;align-items:center;justify-content:center;min-height:54px;padding-inline:clamp(14px,2vw,28px);white-space:nowrap;border-left:1px solid var(--ln);font-size:.98rem}
.tabs a:first-child{border-left:0}
.tabs a:hover{background:#f4f4f4}
.tabs a[aria-current=page]{background:#111;color:#fff}

.asks{display:grid;margin-top:clamp(24px,3vw,40px)}
.asks li{padding:clamp(20px,2.6vw,36px);border:1px solid var(--ln);margin:-1px 0 0 0;font-size:clamp(1.3rem,2.15vw,2rem);line-height:1.2}
.asks i{display:block;font-style:normal;color:#8a6c10;font-size:.8rem;letter-spacing:.1em;margin-bottom:clamp(20px,5vw,72px)}
@media (min-width:768px){.asks{grid-template-columns:repeat(3,1fr)}.asks li{margin:0 0 0 -1px}}

.nxt{grid-template-areas:"o o" "o o"}
.nxrow{display:grid}
.nxrow a{position:relative;display:block;overflow:hidden;height:clamp(200px,24vw,340px)}
.nxrow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s}
.nxrow a:hover img{filter:none}
.nxrow a::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.nxrow div{position:absolute;z-index:2;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,24px);color:#fff}
.nxrow small{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.nxrow b{font-weight:400;font-size:clamp(1.7rem,3.3vw,3rem);line-height:1.08}
.nxrow .ask{background:var(--g);color:#111}
.nxrow .ask::after{display:none}
.nxrow .ask div{color:#111}
@media (min-width:768px){.nxrow{grid-template-columns:2fr 1fr}}

/* Head for About, What we look for, Portfolio, Contact */
.mos-pg{grid-template-areas:"t t" "t t" "p p" "a b"}
@media (min-width:768px){.mos-pg{grid-template-areas:"t t t t p p" "t t t t p p" ". . . a b p2"}}
.a-t{grid-area:t}
.a-t{padding:clamp(18px,2.6cqw,44px);display:flex;flex-direction:column;justify-content:flex-end}
.a-t h1{font-weight:400;color:var(--g2);font-size:clamp(2.5rem,6cqw,6.4rem);line-height:1;letter-spacing:-.018em}
.a-t p{margin-top:clamp(12px,1.4cqw,22px);max-width:36em;color:#d8d8d8}
.a-p2{grid-area:p2}
@media (max-width:767.98px){.a-p2{display:none}}

/* What we look for */
.crit{display:grid;margin-top:0}
.crit>*{margin:-1px 0 0 0;min-height:clamp(240px,23vw,340px)}
.cr{padding:clamp(20px,2.4vw,34px);border:1px solid var(--ln);scroll-margin-top:110px;transition:background .25s,color .25s}
.cr i{display:block;font-style:normal;color:#8a6c10;font-size:.8rem;letter-spacing:.1em;margin-bottom:clamp(18px,3vw,44px)}
.cr h2{font-weight:400;font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.12;margin-bottom:10px}
.cr p{color:var(--mu);font-size:1rem}
.cr-g{background:var(--g);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.4vw,34px)}
.cr-g b{font-weight:400;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.1}
.cr-g span{font-weight:500;border-bottom:1px solid #111;width:fit-content}
.cr-img{position:relative;overflow:hidden}
.cr-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
@media (min-width:768px){.crit{grid-template-columns:repeat(2,1fr)}.crit>*{margin:-1px 0 0 -1px}}
@media (min-width:1024px){.crit{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767.98px){.cr-img{min-height:180px}}

/* Contact */
.ct{display:grid}
.ct>*{padding:clamp(20px,3vw,44px);min-height:clamp(180px,22vw,300px);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.ct small{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.ct b{font-weight:400;font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.18}
.ct .wht{border:1px solid var(--ln)}
@media (min-width:768px){.ct{grid-template-columns:repeat(3,1fr)}}