/* J&P Eng Ltd, concept direction B "Bold, with movement". Midlands Code Lab concept, not for reuse. */

@font-face{font-family:"Big Shoulders Display";src:url("../fonts/big-shoulders-display.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --navy:#0004b6;          /* logo blue (2025 logo) */
  --navy2:#292974;         /* brand pattern navy */
  --teal:#91bcbb;          /* logo frame teal-grey */
  --deep:#060b4a;          /* base dark */
  --panel:#0a0f3d;         /* dark panels */
  --deepest:#04072e;       /* footer */
  --grey:#9aabb1;          /* logo frame grey-blue: secondary text on dark (7.6:1) */
  --grey-l:#c3cfd3;        /* lighter secondary on dark */
  --mist:#e6f0f0;
  --slate:#4b5b62;         /* small text on light and mist */
  --ink:#0d1220;
  --white:#fff;
  --y:#88c54b;             /* brand pattern green: CTAs, focus on dark, small rules (8.8:1 on navy) */
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1280px;
  --gut:clamp(20px,5vw,64px);
  --bleed:calc(var(--gut) + max(0px,(100vw - var(--wrap) - 2 * var(--gut)) / 2));
  --hdr:84px;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body:"Manrope",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;max-width:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--deep);color:var(--white);font-family:var(--body);font-size:17px;line-height:1.65;font-weight:450;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure,blockquote,p,ul,ol,dl,dd{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:.005em;text-wrap:balance}
a{color:inherit}
a,button,summary,label,select,input[type=checkbox]{touch-action:manipulation}
button{font:inherit;color:inherit}
[id]{scroll-margin-top:calc(var(--hdr) + 16px)}
::selection{background:var(--y);color:var(--deep)}

/* focus: explicit colours, never currentColor */
:focus-visible{outline:3px solid var(--y);outline-offset:3px;border-radius:2px}
.light :focus-visible,.mist :focus-visible{outline-color:var(--navy)}
.btn-y:focus-visible{outline-color:var(--y);outline-offset:4px}
.light .btn-n:focus-visible,.mist .btn-n:focus-visible{outline-color:var(--navy);outline-offset:4px}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--y);color:var(--deep);padding:10px 16px;font-weight:700;text-decoration:none;border-radius:4px}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.sec{position:relative;padding:clamp(72px,10vw,140px) 0;overflow-x:clip}
.dark{background:var(--deep);color:var(--white)}
.panel{background:var(--panel);color:var(--white)}
.light{background:var(--white);color:var(--ink)}
.mist{background:var(--mist);color:var(--ink)}
.muted{color:var(--grey)}
.light .muted,.mist .muted{color:var(--slate)}

.h2{font-size:clamp(44px,6vw,88px);text-transform:uppercase}
.h3{font-size:clamp(28px,2.6vw,38px);text-transform:uppercase;line-height:1}
.h2 + *,.h3 + *{margin-top:20px}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.6}
.prose > * + *{margin-top:18px}
.prose a{text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:3px;font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:.01em;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-y{background:var(--y);color:var(--deep)}
.btn-y:hover{background:#a3d46e}
.btn-n{background:var(--navy);color:#fff}
.btn-n:hover{background:var(--deep)}

/* ---------- marker sweep (nav hover variant 9) ---------- */
.mk{text-decoration:none;background-image:linear-gradient(var(--y),var(--y));background-repeat:no-repeat;background-position:0 88%;background-size:0% 100%;padding:0 .14em;margin:0 -.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .55s var(--ease),color .3s var(--ease)}
.mk[aria-current="page"]{background-size:100% 12%}
.mk:hover,.mk:focus-visible{background-size:100% 100%;color:var(--deep)}
.mk:focus-visible{outline-offset:2px}
@media(hover:none){.mk[aria-current="page"]{background-size:100% 100%;color:var(--deep)}}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hdr);transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hdr.solid{background:var(--deep);box-shadow:0 1px 0 rgba(154,171,177,.18)}
.hdr.menu-open{background:transparent;box-shadow:none}
.brand{display:block;flex:none;line-height:0;border-radius:2px}
.brand img{width:56px;height:56px}
.hdr-r{display:flex;align-items:center;gap:12px}
.hdr-cta{min-height:44px;padding:0 18px;font-size:15px}
.menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 6px 0 14px;background:none;border:0;cursor:pointer;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.menu-btn .bars{position:relative;width:28px;height:14px}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;height:3px;background:currentColor;transition:transform .55s var(--ease),top .55s var(--ease)}
.menu-btn .bars::before{top:0}
.menu-btn .bars::after{top:11px}
.menu-btn[aria-expanded="true"] .bars::before{top:5.5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{top:5.5px;transform:rotate(-45deg)}
.menu-btn .lbl-close{display:none}
.menu-btn[aria-expanded="true"] .lbl-open{display:none}
.menu-btn[aria-expanded="true"] .lbl-close{display:inline}

/* ---------- full-screen index ---------- */
.idx{position:fixed;inset:0;z-index:50;background:var(--deep);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease),visibility 0s linear .8s}
.idx.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease),visibility 0s}
.idx-in{min-height:100%;padding-top:calc(var(--hdr) + 20px);padding-bottom:36px;display:flex;flex-direction:column}
.idx-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;flex:1}
.idx-label{display:block;font-family:var(--body);font-size:15px;font-weight:700;color:var(--grey);margin-bottom:14px}
.idx-pages li,.idx-svc li{overflow:hidden}
.idx-pages a{display:inline-block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(44px,min(5.4vw,8.4vh),80px);line-height:1;padding:.04em .14em}
.idx-svc{margin-top:28px}
.idx-svc a{display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,min(2.5vw,4.2vh),36px);line-height:1.08;padding:.04em .14em}
.idx-pages li > *,.idx-svc li > *{transform:translateY(105%);transition:transform .8s var(--ease)}
.idx.open .idx-pages li > *,.idx.open .idx-svc li > *{transform:none}
.idx-side{position:relative}
.idx-photo{position:absolute;right:0;top:0;width:min(100%,460px);aspect-ratio:4/3;border-radius:4px;overflow:hidden;opacity:0;transition:transform .7s var(--ease),opacity .5s var(--ease);pointer-events:none}
.idx-photo.on{opacity:1}
.idx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.idx-photo img.cur{opacity:1}
.idx-foot{display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center;margin-top:32px;padding-top:24px;border-top:1px solid rgba(154,171,177,.25);font-size:16px}
.idx-foot a{text-decoration:none}
.idx-foot .muted{font-size:14px}
@media (hover:none),(pointer:coarse),(max-width:999px){.idx-side{display:none}.idx-grid{grid-template-columns:1fr}}
@media(max-width:600px){.idx-pages a{font-size:46px}.idx-svc a{font-size:26px}}

/* ---------- reveals (behind .js guard; noscript overrides) ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0ms)}
.js .rv.on{opacity:1;transform:none}
.js .sl,.js .sr{opacity:0;transition:opacity 1.05s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,200ms)}
.js .sl{transform:translateX(-80px)}
.js .sr{transform:translateX(80px)}
.js .sl.on,.js .sr.on{opacity:1;transform:none}
@media(max-width:700px){.js .sl{transform:translateX(-24px)}.js .sr{transform:translateX(24px)}}

/* ---------- photos ---------- */
.ph{position:relative;overflow:hidden;border-radius:4px;background:var(--panel)}
.ph img{width:100%;height:100%;object-fit:cover}
.light .ph,.mist .ph{background:#cfd8db}

/* ---------- home hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;transform-origin:62% 48%;animation:kb 26s var(--ease) infinite alternate}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.14) translate(-1.6%,-1%)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,11,74,.95) 0%,rgba(6,11,74,.72) 30%,rgba(6,11,74,.18) 62%,rgba(6,11,74,.42) 100%),linear-gradient(to right,rgba(6,11,74,.55),rgba(6,11,74,0) 60%)}
.hero-in{position:relative;z-index:2;width:100%;padding-top:calc(var(--hdr) + 40px);padding-bottom:clamp(28px,4vw,48px)}
.hero h1{font-size:clamp(50px,8.2vw,128px);text-transform:uppercase;line-height:.9;max-width:12.5em}
.hl{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.hl > span{display:block}
.js .hero .hl > span{transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:var(--d,0ms)}
.js .hero.ready .hl > span{transform:none}
.js .hero .hs{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js .hero.ready .hs{opacity:1;transform:none}
.strap{margin-top:26px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(20px,1.9vw,27px);letter-spacing:.08em;color:var(--grey-l)}
.strap i{font-style:normal;color:var(--y);padding:0 .1em}
.hero-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.hero-bar{margin-top:clamp(36px,6vw,72px);padding-top:20px;border-top:1px solid rgba(154,171,177,.32);display:flex;flex-wrap:wrap;gap:10px 44px;font-size:16px}
.hero-bar a{text-decoration:none;font-weight:600}
.hero-bar a:hover{color:var(--y)}
.hero-bar span{color:var(--grey);margin-right:10px;font-weight:500}

/* ---------- accreditation band ---------- */
.acc{background:#fff;color:var(--ink);padding:clamp(40px,5vw,60px) 0}
.acc .wrap{display:flex;align-items:center;gap:28px 56px}
.acc-t{flex:0 0 auto;max-width:300px}
.acc-t h2{font-size:30px;text-transform:uppercase;color:var(--navy)}
.acc-t p{margin-top:10px;font-weight:700;font-size:16px;line-height:1.45;color:var(--ink)}
.badges{flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 36px}
.badges li{flex:0 1 calc((100% - 144px)/5);display:flex;justify-content:center;align-items:center;height:84px;min-width:0}
.badges img{max-height:84px;width:auto;max-width:100%;object-fit:contain}
.badges .b-wide img{max-height:44px}
.badges .b-apm img{max-height:48px}
.badges .b-av img{max-height:62px}
@media(max-width:1060px){.acc .wrap{flex-direction:column;align-items:stretch;text-align:center}.acc-t{max-width:none}}
@media(max-width:700px){
  .badges{gap:22px 18px}
  .badges li{flex:0 1 calc((100% - 36px)/3);height:64px}
  .badges img{max-height:64px}
  .badges .b-wide,.badges .b-av{flex-basis:calc((100% - 18px)/2);order:2}
  .badges .b-wide img{max-height:30px}
  .badges .b-apm img{max-height:36px}
  .badges .b-av img{max-height:52px}
}

/* ---------- split + collage ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
.split.flip > :first-child{order:2}
.collage{position:relative;padding-bottom:12%}
.collage .c-main{aspect-ratio:16/10;margin-right:calc(-1 * var(--bleed))}
.collage .c-small{position:absolute;left:-6%;bottom:-16%;width:40%;aspect-ratio:3/4;z-index:3;box-shadow:0 0 0 8px var(--panel)}
.dark .collage .c-small{box-shadow:0 0 0 8px var(--deep)}
.split.flip .collage .c-main{margin-right:0;margin-left:calc(-1 * var(--bleed))}
.split.flip .collage .c-small{left:auto;right:-6%}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .split.flip > :first-child{order:0}
  .collage{padding-bottom:22%;margin-top:8px}
  .collage .c-main{margin-right:calc(-1 * var(--bleed));margin-left:0}
  .split.flip .collage .c-main{margin-left:calc(-1 * var(--bleed));margin-right:0}
  .collage .c-small{left:0;bottom:-10%;width:38%}
  .split.flip .collage .c-small{right:0}
}

/* ---------- services rows (home) ---------- */
.svc-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(48px,6vw,88px)}
.svc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.svc + .svc{margin-top:clamp(64px,9vw,128px)}
.svc .ph{aspect-ratio:4/3;margin-left:calc(-1 * var(--bleed))}
.svc:nth-child(even) .ph{order:2;margin-left:0;margin-right:calc(-1 * var(--bleed))}
.svc h3 a{display:inline-block;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:6px;transition:border-color .35s var(--ease)}
.svc h3 a:hover{border-bottom-color:var(--y)}
.svc p{margin-top:18px}
.go{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-weight:700;text-decoration:none;color:var(--navy)}
.go svg{width:20px;height:20px;transition:transform .5s var(--ease)}
.go:hover svg{transform:translateX(5px)}
.go:hover{text-decoration:underline;text-underline-offset:4px}
.dark .go,.panel .go{color:var(--y)}
@media(max-width:900px){
  .svc{grid-template-columns:1fr}
  .svc:nth-child(even) .ph{order:0;margin-right:0;margin-left:calc(-1 * var(--bleed))}
  .svc .ph{margin-right:0}
  .svc:nth-child(even) .ph{margin-left:0;margin-right:calc(-1 * var(--bleed))}
}

/* ---------- why list ---------- */
.why{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,110px);align-items:start}
.why-ph{margin-top:40px;aspect-ratio:3/4;max-width:420px;margin-left:calc(-1 * var(--bleed))}
.why-list li{padding:26px 0 26px;border-top:1px solid rgba(154,171,177,.28)}
.why-list li:last-child{border-bottom:1px solid rgba(154,171,177,.28)}
.why-list p{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.5vw,38px);line-height:1.08;letter-spacing:.01em}
@media(max-width:900px){.why{grid-template-columns:1fr}.why-ph{max-width:none;aspect-ratio:4/3;margin-right:0}}

/* ---------- projects strip ---------- */
.strip-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:40px}
.strip-ctl{display:flex;gap:10px}
.strip-ctl button{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:none;color:#fff;cursor:pointer;display:grid;place-items:center;transition:border-color .35s var(--ease),color .35s var(--ease),opacity .35s}
.strip-ctl button:hover{border-color:var(--y);color:var(--y)}
.strip-ctl button[disabled]{opacity:.35;cursor:default}
.strip-ctl svg{width:20px;height:20px}
.strip{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:max(var(--gut),calc((100vw - var(--wrap))/2));padding:0 max(var(--gut),calc((100vw - var(--wrap))/2)) 26px;scrollbar-width:thin;scrollbar-color:var(--grey) transparent;overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:rgba(154,171,177,.5);border-radius:3px}
.card-p{flex:0 0 clamp(270px,32vw,440px);scroll-snap-align:start;text-decoration:none;color:#fff;display:block}
.card-p .ph{aspect-ratio:4/5}
.card-p img{transition:transform .9s var(--ease)}
.card-p:hover img{transform:scale(1.03)}
.card-p h3{margin-top:16px;font-size:clamp(24px,2vw,30px);text-transform:uppercase;line-height:1.05}
.card-p:hover h3{color:var(--y)}

/* ---------- linkedin cards ---------- */
.li-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:44px}
.li-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.li-cards > li{flex:0 1 calc((100% - 72px)/4);min-width:0;display:flex}
.li-card{display:flex;flex-direction:column;width:100%;background:#fff;color:var(--ink);text-decoration:none;border-radius:4px;overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.li-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(6,11,74,.45)}
.li-card .ph{aspect-ratio:4/3;border-radius:0}
.li-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.li-body p{font-size:16px;line-height:1.55}
.li-meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:18px;font-size:14px;color:var(--slate);font-weight:600}
.li-meta svg{width:18px;height:18px;color:var(--navy)}
@media(max-width:1100px){.li-cards > li{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:620px){.li-cards > li{flex-basis:100%}}
.li-ico{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;color:var(--navy)}
.li-ico svg{width:22px;height:22px}
.li-ico:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- contact band ---------- */
.band{position:relative;overflow:hidden;padding:clamp(88px,11vw,160px) 0}
.band-bg{position:absolute;inset:0}
.band-bg img{width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(6,11,74,.96) 0%,rgba(6,11,74,.88) 45%,rgba(6,11,74,.6) 100%)}
.band .wrap{position:relative;z-index:2}
.band-in{max-width:720px}
.band-lines{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px 40px;font-size:clamp(19px,1.6vw,22px);font-weight:700}
.band-lines a{text-decoration:none}
.band-lines a:hover{color:var(--y)}
.band .btn{margin-top:34px}

/* ---------- footer ---------- */
.ftr{background:var(--deepest);color:var(--white);padding:clamp(64px,8vw,104px) 0 36px;font-size:16px}
.ftr-grid{display:grid;grid-template-columns:1.2fr 1fr 1.2fr 1.3fr;gap:40px}
.ftr-brand img{width:84px;height:84px}
.ftr-brand .strap{font-size:clamp(14px,1.25vw,18px);letter-spacing:.04em;white-space:nowrap;margin-top:20px}
.ftr h2{font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:0;color:var(--grey);margin-bottom:16px}
.ftr li + li{margin-top:8px}
.ftr .mk{color:#fff}
.ftr .mk:hover,.ftr .mk:focus-visible{color:var(--deep)}
.ftr address{font-style:normal;line-height:1.6;color:var(--grey-l)}
.ftr-c a{text-decoration:none}
.ftr-c a:hover{color:var(--y)}
.ftr-c p + p{margin-top:8px}
.social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-top:22px;border:1px solid rgba(154,171,177,.4);border-radius:50%;color:var(--grey-l);transition:color .35s var(--ease),border-color .35s var(--ease)}
.social:hover{color:var(--y);border-color:var(--y)}
.social svg{width:20px;height:20px}
.legal{margin-top:56px;padding-top:24px;border-top:1px solid rgba(154,171,177,.2);font-size:14px;line-height:1.6;color:var(--grey)}
.legal p + p{margin-top:8px}
@media(max-width:1000px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}

/* ---------- inner page hero ---------- */
.phero{position:relative;padding:calc(var(--hdr) + clamp(48px,7vw,96px)) 0 clamp(64px,8vw,120px);background:var(--deep);overflow-x:clip}
.phero .split{align-items:end}
.phero h1{font-size:clamp(52px,7.4vw,116px);text-transform:uppercase;line-height:.9}
.phero .sub{margin-top:24px;font-size:clamp(19px,1.6vw,23px);line-height:1.5;color:var(--grey-l);max-width:30em}
.phero .btn{margin-top:32px}
.phero-ph{aspect-ratio:4/3;margin-right:calc(-1 * var(--bleed))}
.phero-ph img{animation:kb2 24s var(--ease) infinite alternate}
@keyframes kb2{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.phero-ph.tall{aspect-ratio:4/5;max-width:560px;margin-left:auto}
@media(max-width:900px){.phero-ph{margin-right:calc(-1 * var(--bleed))}.phero-ph.tall{aspect-ratio:4/3;max-width:none}}

/* ---------- service detail blocks ---------- */
.intro-line{font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,44px);line-height:1.08;max-width:22em}
.blocks{margin-top:clamp(48px,6vw,80px)}
.blk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.blk + .blk{margin-top:clamp(64px,8vw,112px)}
.blk.flip .blk-ph{order:2}
.blk-ph{aspect-ratio:4/3}
.blk-ph.portrait{aspect-ratio:4/5;max-width:440px}
.blk.flip .blk-ph.portrait{margin-left:auto}
.blk h2,.blk h3{font-size:clamp(34px,3.4vw,52px);text-transform:uppercase}
.blk h2 + p,.blk h3 + p{margin-top:18px}
@media(max-width:900px){.blk{grid-template-columns:1fr}.blk.flip .blk-ph{order:0}.blk-ph.portrait{aspect-ratio:4/3;max-width:none}}

.note-line{margin-top:clamp(56px,7vw,96px);padding:28px 0;border-top:4px solid var(--y);font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1.12;max-width:26em}
.close-para{max-width:46em}

/* checklist (plain, no icons) */
.ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:0 40px}
.ticks li{flex:0 1 calc((100% - 40px)/2);padding:16px 0;border-top:1px solid rgba(154,171,177,.3);font-weight:600}
.light .ticks li,.mist .ticks li{border-top-color:#c9d3d6}
@media(max-width:700px){.ticks li{flex-basis:100%}}

/* other services */
.others{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.others > li{flex:0 1 calc((100% - 48px)/3);min-width:0}
.oth{display:block;text-decoration:none;color:inherit}
.oth .ph{aspect-ratio:4/3}
.oth img{transition:transform .9s var(--ease)}
.oth:hover img{transform:scale(1.03)}
.oth h3{margin-top:16px;font-size:clamp(24px,2vw,30px);text-transform:uppercase;line-height:1.05}
.oth:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media(max-width:700px){.others > li{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:560px){.others > li{flex-basis:100%}}

/* ---------- about ---------- */
.values{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,5.4vw,80px);line-height:.98;max-width:14em}
.values em{font-style:normal;color:var(--y)}
.list-plain li{padding:18px 0;border-top:1px solid rgba(154,171,177,.3);font-size:18px}
.light .list-plain li,.mist .list-plain li{border-top-color:#c9d3d6}
.phil-h{font-size:clamp(28px,2.6vw,38px);color:var(--grey);margin-bottom:24px}
.sc-r > p{margin-top:28px}
@media(min-width:901px){.sc-r{padding-top:calc(clamp(44px,6vw,88px) * .95 + 20px)}}
.pete{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.pete .ph{aspect-ratio:474/640;max-width:380px}
.pete-role{display:block;margin-top:10px;font-weight:700;color:var(--grey)}
@media(max-width:820px){.pete{grid-template-columns:1fr}.pete .ph{max-width:340px}}
.partner{display:flex;align-items:center;justify-content:center;gap:28px 56px;flex-wrap:wrap}
.partner h2{color:var(--navy);flex:none}
.partner img{width:190px;height:190px;border-radius:4px}

/* ---------- our work ---------- */
.feat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.feat .ph{aspect-ratio:4/3;margin-left:calc(-1 * var(--bleed))}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.story + .story{margin-top:clamp(72px,9vw,128px)}
.story.flip .story-m{order:2}
.story-m{position:relative;padding-bottom:10%}
.story-m .a{aspect-ratio:4/3}
.story-m .b{position:absolute;right:-4%;bottom:-6%;width:42%;aspect-ratio:3/4;box-shadow:0 0 0 8px var(--white);z-index:2}
.story.flip .story-m .b{right:auto;left:-4%}
.mist .story-m .b{box-shadow:0 0 0 8px var(--mist)}
.story-m .a.port{aspect-ratio:4/5;max-width:460px}
.date{display:inline-block;font-size:15px;font-weight:700;color:var(--slate)}
.dark .date,.panel .date{color:var(--grey)}
.story h3,.feat h3{margin-top:10px;font-size:clamp(32px,3.2vw,50px);text-transform:uppercase}
.story .prose,.feat .prose{margin-top:20px}
.cats{font-weight:700;color:var(--slate)}
.cats i{font-style:normal;color:var(--navy);padding:0 .1em}
@media(max-width:900px){.feat,.story{grid-template-columns:1fr}.story.flip .story-m{order:0}.feat .ph{margin-right:calc(-1 * var(--bleed))}.story-m .a.port{max-width:none;aspect-ratio:4/3}.story-m .b{right:0;width:38%}.story.flip .story-m .b{left:0}}
.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.gallery > li{flex:0 1 calc((100% - 48px)/4);min-width:0}
.gallery .ph{aspect-ratio:1/1}
@media(max-width:900px){.gallery > li{flex-basis:calc((100% - 16px)/2)}}

/* ---------- forms ---------- */
.form-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
@media(max-width:900px){.form-wrap{grid-template-columns:1fr}}
.form{background:#fff;color:var(--ink);border-radius:4px;padding:clamp(24px,3.4vw,44px)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.form .row{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.fld label{font-weight:700;font-size:15px}
.fld input,.fld select,.fld textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #64797f;border-radius:3px;padding:12px 14px;min-height:50px;width:100%}
.fld textarea{min-height:150px;resize:vertical}
.fld input[type=file]{padding:10px;min-height:auto}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.chk{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:15px;line-height:1.5}
.chk input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--navy)}
.chk input:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.form .btn{margin-top:26px}
.form :focus-visible{outline-color:var(--navy)}
.form .btn-n:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.thanks{display:none;padding:40px 0 20px}
.thanks h2{font-size:clamp(40px,4vw,60px);text-transform:uppercase;color:var(--navy)}
.form.sent .thanks{display:block}
.form.sent .form-body{display:none}
.c-lines{margin-top:30px}
.c-lines li{padding:18px 0;border-top:1px solid rgba(154,171,177,.3)}
.c-lines li:last-child{border-bottom:1px solid rgba(154,171,177,.3)}
.c-lines .k{display:block;font-size:15px;font-weight:700;color:var(--grey)}
.c-lines a,.c-lines address{font-size:20px;font-weight:700;text-decoration:none;font-style:normal;line-height:1.45}
.c-lines a:hover{color:var(--y)}
.map-wrap{position:relative;height:clamp(320px,40vw,480px);background:var(--deep);color:var(--white);display:grid;place-items:center;text-align:center}
.map-fb{font-style:normal;font-weight:700;font-size:clamp(19px,1.6vw,22px);line-height:1.5;padding:0 var(--gut)}
.map{position:absolute;inset:0;border:0;width:100%;height:100%;display:block;filter:grayscale(.2)}
.map[hidden]{display:none}

/* ---------- reduced motion: one global block ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;transition-delay:0ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .hero-media img,.phero-ph img{animation:none!important;transform:none!important}
  .js .rv,.js .sl,.js .sr,.js .hero .hl > span,.js .hero .hs{opacity:1!important;transform:none!important}
  .idx-pages li > *,.idx-svc li > *{transform:none!important}
  .idx{clip-path:none}
}
.phero-ph.r32{aspect-ratio:3/2;max-width:741px;margin-left:auto}
.idx .mk{margin:0}

/* ---------- 09/11 update: Stansted feature, brand pattern motif ---------- */
.feat > .ph{aspect-ratio:4/3;margin-left:calc(-1 * var(--bleed))}
.feat .ph{margin-left:0}
.feat-m .c-main{margin-right:0;margin-left:calc(-1 * var(--bleed));aspect-ratio:4/3}
.feat-m{padding-bottom:0}
.feat-m .c-small{left:auto;right:-10%;bottom:-16%;width:36%;box-shadow:0 0 0 8px var(--white)}
.st-wide{margin-top:clamp(96px,12vw,170px);aspect-ratio:21/9;margin-right:calc(-1 * var(--bleed))}
@media(max-width:900px){.feat-m .c-small{right:0}.st-wide{aspect-ratio:4/3;margin-top:80px}}

.motif{position:absolute;z-index:2;right:-6%;top:calc(var(--hdr) + 1vh);width:min(33vw,480px);pointer-events:none}
.motif svg{display:block;width:100%;height:auto;overflow:visible;animation:drift 16s var(--ease) infinite alternate}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.motif .dm{transform-box:fill-box;transform-origin:center}
.js .motif .dm{opacity:0;transform:translate(90px,-24px) rotate(0deg);transition:opacity 1.3s var(--ease),transform 1.6s var(--ease);transition-delay:calc(560ms + var(--i) * 70ms)}
.js .hero.ready .motif .dm{opacity:1;transform:none}
.hero-in{z-index:3}
@media(max-width:700px){.motif{width:58vw;right:-14%;top:calc(var(--hdr) + 4px)}}

.ftr{position:relative;overflow:hidden}
.ftr-pat{position:absolute;right:-90px;bottom:-70px;width:300px;height:auto;opacity:.45;pointer-events:none}
.ftr .wrap{position:relative;z-index:1}
@media(max-width:700px){.ftr-pat{width:170px;right:-64px;top:-36px;bottom:auto;opacity:.35}}

@media (prefers-reduced-motion:reduce){
  .js .motif .dm{opacity:1!important;transform:none!important}
  .motif svg{animation:none!important}
}
.legal p{max-width:min(62em,calc(100% - 230px))}
@media(max-width:700px){.legal p{max-width:none}}
@media(max-width:900px){.feat-m{padding-bottom:18%}.feat-m .c-small{bottom:0;right:0;width:38%}}

/* ===== Live-site changes 13/11/2026 ===== */
/* Bigger logo (client request) */
:root{--hdr:104px}
.hdr .brand img{width:84px;height:84px}
.ftr .brand img{width:84px;height:84px}
@media(max-width:700px){:root{--hdr:84px}.hdr .brand img{width:64px;height:64px}}
/* LEEA badge: text tile until their member logo arrives */
.badges .leea{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 18px;border:2px solid currentColor;border-radius:4px;font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:30px;letter-spacing:.04em;color:var(--navy)}
@media(max-width:700px){.badges .leea{height:44px;font-size:24px;padding:0 14px}}
/* Team photo replaced Peter's portrait */
.pete .ph{aspect-ratio:4/3;max-width:520px}
/* Photo row: their work, slides in from alternate sides */
.pics-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.pics-head .go{margin-top:0}
.pics{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;overflow-x:clip}
.pics > li{flex:0 1 calc((100% - 54px)/4);min-width:0;margin:0}
.pics .ph{aspect-ratio:3/4;margin:0}
.pics > li:nth-child(even){margin-top:40px}
@media(max-width:900px){.pics > li{flex-basis:calc((100% - 18px)/2)}.pics > li:nth-child(even){margin-top:24px}}
/* Forms: honeypot, Turnstile, errors */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin-top:22px;min-height:0}
.cf-turnstile:empty{display:none}
.form-err{margin-top:18px;padding:12px 14px;border:1px solid #b3261e;border-radius:4px;background:#fdecea;color:#5c0f0b;font-size:15px;line-height:1.5}
.fld-h{display:block;margin-top:6px;font-size:13px;color:#4a5560}
button[aria-busy="true"]{opacity:.7;cursor:progress}
.legal-text{max-width:760px}
.legal-text h2{margin-top:36px}
.legal-text ul{margin:14px 0 0 1.2em;list-style:disc}
.legal-text li{margin-top:8px}