/* ===== ACP - Cinematic template =====
   Dark-first, glass surfaces, green glow. Built for a full-bleed video-led feel. */
:root{
  /* Deep sections are a deep brand green now, not near-black: the client
     asked for the black to be replaced with the ACP colour scheme. */
  --bg:#07231A;        /* deep brand green */
  --bg-2:#0A2C21;      /* deep band */
  --bg-3:#14422F;      /* raised panel, lifted so cards read off the band */
  --ink:#fff;          /* heading colour, flips per section theme */
  --on-media:#fff;     /* text sitting on a photo; never flips */
  --mint-media:#7FF0BB;/* accent on a photo; never flips */
  --hov:#1A5440;       /* card hover fill, lifts off --bg-3 */
  --glass:rgba(255,255,255,.055);
  --edge:rgba(255,255,255,.11);
  --edge-2:rgba(255,255,255,.2);
  --green:#0E9E5E;
  --green-rgb:14,158,94;
  --green-d:#085838;
  --mint:#7FF0BB;
  --tx:rgba(255,255,255,.82);
  --tx-2:rgba(255,255,255,.66);
  --dsp:'Sora',system-ui,sans-serif;
  --txt:'Inter',system-ui,sans-serif;
  --wrap:1280px;
  --pad:52px;
  --e:cubic-bezier(.16,1,.3,1);
}
@media(max-width:1100px){:root{--pad:32px}}
@media(max-width:680px){:root{--pad:20px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--txt);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body {
    background: var(--bg);
    color: #fff;
    font-family: var(--txt);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img{display:block;max-width:100%}

a{color:inherit;text-decoration:none}
.wrap{max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}

/* film grain + scanline veil keeps the flats from banding */
.veil{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* scroll progress hairline */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;background:rgba(255,255,255,.07)}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green-d),var(--green),var(--mint));box-shadow:0 0 12px rgba(var(--green-rgb),.8)}

/* type */
.big{font-family:var(--dsp);font-weight:700;font-size:clamp(28px,3.9vw,54px);line-height:1.06;letter-spacing:-.035em;max-width:20ch}
.say{font-size:clamp(15px,1.25vw,17.5px);line-height:1.65;color:var(--tx);max-width:56ch;margin-top:16px}
.tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--dsp);font-weight:600;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mint);margin-bottom:18px}
.tag::before{content:"";width:22px;height:1px;background:var(--green)}

/* CTAs */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--dsp);font-weight:600;font-size:14px;
  padding:15px 27px;border-radius:100px;border:1px solid transparent;white-space:nowrap;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .4s var(--e),box-shadow .4s var(--e),background .35s,border-color .35s,color .35s}
.cta--g{background:var(--green);color:#04120B;box-shadow:0 0 0 rgba(var(--green-rgb),0)}
.cta--g:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(var(--green-rgb),.42),0 0 0 1px rgba(var(--green-rgb),.5)}
.cta--o{background:var(--glass);color:var(--ink);border-color:var(--edge-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cta--o:hover{background:rgba(255,255,255,.13);border-color:#fff;transform:translateY(-2px)}
.cta:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:pp 1.8s var(--e) infinite}
@keyframes pp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--e),transform .85s var(--e)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}*{animation:none!important;transition:none!important}}

/* ===== BAR ===== */
.bar{position:fixed;inset:2px 0 auto;z-index:100;padding:15px 0;background:rgba(6,10,8,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border-bottom:1px solid var(--edge);
  transition:padding .45s var(--e),background .45s,border-color .45s,box-shadow .45s}
.bar.sc{padding:9px 0;background:rgba(6,10,8,.93);box-shadow:0 6px 30px rgba(0,0,0,.5)}
.bar.open{background:var(--bg)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.bar__b{flex:0 0 auto}
.bar__b img{height:44px;width:auto;filter:brightness(0) invert(1);transition:height .45s var(--e)}
.bar.sc .bar__b img{height:36px}
.bar__n{display:flex;gap:28px}
.bar__n a{font-family:var(--dsp);font-weight:500;font-size:13.5px;color:rgba(255,255,255,.86);position:relative;padding:6px 0;transition:color .3s}
.bar__n a:hover{color:var(--ink)}
.bar__n a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--mint);box-shadow:0 0 8px var(--mint);transition:width .38s var(--e)}
.bar__n a:hover::after{width:100%}
.bar__e{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.bar__t{font-family:var(--dsp);font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap;transition:color .3s}
.bar__t:hover{color:var(--mint)}
.bar__c{padding:11px 21px;font-size:13px}
@media(max-width:1240px){.bar__t{display:none}}
@media(max-width:680px){.bar__b img{height:34px}}

/* ===== STAGE / HERO ===== */
.stage{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.stage__m{position:absolute;inset:0;z-index:0;will-change:transform}
.stage__v{width:100%;height:100%;object-fit:cover}
.stage__vig{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 70% 32%,transparent 0%,rgba(6,10,8,.5) 55%,rgba(6,10,8,.94) 100%),
  linear-gradient(180deg,rgba(6,10,8,.86) 0%,rgba(6,10,8,.28) 34%,rgba(6,10,8,.82) 78%,var(--bg) 100%),
  linear-gradient(90deg,rgba(6,10,8,.8) 0%,transparent 58%)}
.stage__c{position:relative;z-index:2;width:100%;padding-top:126px;padding-bottom:120px}
.eyeless{display:inline-flex;align-items:center;gap:10px;font-family:var(--dsp);font-weight:500;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mint);margin-bottom:22px}
.eyeless i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint);animation:pp 2s var(--e) infinite}
.stage__h{font-family:var(--dsp);font-weight:800;line-height:1;letter-spacing:-.045em;font-size:clamp(38px,6.6vw,92px);max-width:16ch}
.stage__h .a{display:block;color:var(--ink)}
.stage__h .b{display:block;min-height:1.08em;
  background:linear-gradient(96deg,var(--mint),var(--green) 52%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage__p{margin-top:24px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.82);max-width:48ch}
.stage__a{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
/* glass stat orbs */
.orbs{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}
.orb{padding:13px 20px;border-radius:100px;background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:baseline;gap:9px;transition:border-color .35s,background .35s,transform .35s var(--e)}
.orb:hover{border-color:rgba(var(--green-rgb),.6);background:rgba(var(--green-rgb),.14);transform:translateY(-3px)}
.orb b{font-family:var(--dsp);font-weight:700;font-size:16px;color:var(--ink)}
.orb--new{background:rgba(var(--green-rgb),.2);border-color:rgba(var(--green-rgb),.65)}
.orb--new b{color:var(--mint)}
.orb--new span{color:var(--mint);opacity:.85}
.orb--new::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 10px var(--mint);margin-right:2px;animation:pp 1.9s var(--e) infinite}
.orb--new:hover{background:rgba(var(--green-rgb),.3);border-color:var(--mint)}
.orb span{font-size:12px;color:var(--tx-2);letter-spacing:.04em}
.mouse{position:absolute;left:50%;bottom:26px;z-index:2;translate:-50% 0;width:24px;height:38px;border:1.5px solid var(--edge-2);border-radius:14px}
.mouse span{position:absolute;left:50%;top:8px;translate:-50% 0;width:3px;height:7px;border-radius:2px;background:var(--mint);animation:mo 2s var(--e) infinite}
@keyframes mo{0%{opacity:0;transform:translateY(0)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(13px)}}
@media(max-width:680px){.stage__c{padding-top:104px;padding-bottom:96px}.stage__a{width:100%}.stage__a .cta{flex:1}.mouse{display:none}}

/* ===== SERVICES ===== */
.svc{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);padding:clamp(80px,9vw,124px) 0}
.svc::before{content:"";position:absolute;inset:-24px;z-index:0;background:url('assets/gallery/buildings/healthcare.webp') center/cover no-repeat;background-attachment:fixed;filter:saturate(.9);opacity:.62;transform:scale(1.02)}
.svc::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,10,8,.84) 0%,rgba(6,10,8,.44) 42%,rgba(6,10,8,.88) 100%)}
.svc > .wrap{position:relative;z-index:1}
.svc__h{margin-bottom:46px}
.svc__g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{position:relative;border-radius:18px;overflow:hidden;background:var(--bg-3);border:1px solid var(--edge);min-height:330px;display:flex;
  transition:transform .5s var(--e),border-color .45s,box-shadow .5s var(--e)}
.card:first-child,.card:nth-child(4){grid-column:span 2}
.card:nth-child(5){grid-column:span 3;min-height:250px}
.card:hover{transform:translateY(-6px);border-color:rgba(var(--green-rgb),.55);box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(var(--green-rgb),.25)}
.card__im{position:absolute;inset:0}
.card__im img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e);filter:saturate(.85)}
.card:hover .card__im img{transform:scale(1.07)}
.card__sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,8,.18) 0%,rgba(6,10,8,.68) 46%,rgba(6,10,8,.95) 100%)}
.card__b{position:relative;z-index:2;margin-top:auto;padding:26px 26px 28px;width:100%}
.card__n{display:inline-block;font-family:var(--dsp);font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--mint-media);margin-bottom:10px}
.card__b h3{color:var(--on-media);font-family:var(--dsp);font-weight:700;font-size:22px;line-height:1.14;letter-spacing:-.025em;margin-bottom:9px}
.card__b p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.8);max-width:52ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--e),opacity .45s var(--e)}
.card:hover .card__b p{max-height:200px;opacity:1}
@media(max-width:1000px){.svc__g{grid-template-columns:repeat(2,1fr)}.card:first-child,.card:nth-child(4),.card:nth-child(5){grid-column:span 2}}
@media(max-width:680px){.svc__g{grid-template-columns:1fr}.card{min-height:270px}.card:first-child,.card:nth-child(4),.card:nth-child(5){grid-column:span 1}
  .card__b p{max-height:200px;opacity:1}}

/* ===== NUMBERS ===== */
.nums{background:var(--bg-2);border-block:1px solid var(--edge);padding:clamp(48px,6vw,74px) 0}
.nums__g{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.num{display:flex;flex-direction:column;gap:8px;position:relative;padding-left:20px}
.num::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--green),transparent)}
.num__v{font-family:var(--dsp);font-weight:800;font-size:clamp(30px,3.7vw,52px);line-height:1;letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));-webkit-background-clip:text;background-clip:text;color:transparent}
.num__k{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2)}
@media(max-width:820px){.nums__g{grid-template-columns:repeat(2,1fr);gap:28px}}

/* ===== INDUSTRIES ===== */
.ind{position:relative;background:var(--bg);padding:clamp(80px,9vw,120px) 0;overflow:hidden}
/* Industries is a light section now; its tiles carry the photography,
   so the dark fleet backdrop and its scrim are no longer used. */
.ind__bg,.ind__scrim{display:none}
.ind>.wrap{position:relative;z-index:2}
.ind__g{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.ind__more{margin-top:34px;text-align:center}
.ind__g .tile:last-child:nth-child(4n+3){grid-column:span 2}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;padding:22px 20px 20px;border-radius:15px;
  background:var(--glass);border:1px solid var(--edge);overflow:hidden;transition:transform .45s var(--e),border-color .4s,background .4s}
/* ACP's own sector photography sits behind each tile */
.tile__im{position:absolute;inset:0;z-index:0}
.tile__im img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e);filter:saturate(.8)}
.tile:hover .tile__im img{transform:scale(1.07)}
.tile__im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,8,.3) 0%,rgba(6,10,8,.74) 58%,rgba(6,10,8,.94) 100%)}
.tile::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 0%,rgba(var(--green-rgb),.3),transparent 70%);opacity:0;transition:opacity .45s}
.tile:hover{transform:translateY(-5px);border-color:rgba(var(--green-rgb),.6);background:rgba(255,255,255,.09)}
.tile:hover::after{opacity:1}
.tile__n{position:relative;z-index:2;font-family:var(--dsp);font-weight:700;font-size:10.5px;letter-spacing:.2em;color:var(--mint-media)}
.tile__l{color:var(--on-media);position:relative;z-index:2;display:block;margin-top:8px;font-family:var(--dsp);font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.02em}
@media(max-width:1000px){.ind__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ind__g{grid-template-columns:1fr}}

/* ===== CREED ===== */
.creed{position:relative;overflow:hidden;text-align:center;background:var(--bg)}
.creed__bg{position:absolute;inset:0;background:url('assets/gallery/shoot1/tech-ppe-task.webp') center/cover no-repeat;opacity:.3}
.creed__c{position:relative;z-index:2;padding:clamp(80px,10vw,138px) 0;max-width:900px;margin:0 auto}
.creed__c h2{font-family:var(--dsp);font-weight:800;font-size:clamp(28px,4.4vw,58px);line-height:1.04;letter-spacing:-.04em;margin-bottom:18px}
.creed__c p{color:var(--tx);font-size:16.5px;margin-bottom:30px}

/* ===== STORY ===== */
.story{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-2);padding:clamp(80px,9vw,124px) 0}
.story::before{content:"";position:absolute;inset:-24px;z-index:0;background:url('assets/gallery/buildings/life-science.webp') center/cover no-repeat;background-attachment:fixed;filter:saturate(.9);opacity:.62;transform:scale(1.02)}
.story::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,10,8,.84) 0%,rgba(6,10,8,.44) 42%,rgba(6,10,8,.88) 100%)}
.story > .wrap{position:relative;z-index:1}
.story__g{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(34px,5vw,74px);align-items:center}
.story__m{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--edge)}
.story__m img{width:100%;aspect-ratio:4/3;object-fit:cover}
.story__badge{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;gap:2px;padding:16px 22px;border-radius:14px;
  background:rgba(6,10,8,.72);border:1px solid var(--edge-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.story__badge b{font-family:var(--dsp);font-weight:800;font-size:26px;letter-spacing:-.03em;color:var(--mint-media)}
.story__badge i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.76)}
.story__c .big{margin-bottom:22px}
.story__c p{font-size:16px;line-height:1.72;color:var(--tx);margin-bottom:15px}
.creedline{position:relative;font-family:var(--dsp);font-weight:700;font-size:clamp(18px,1.9vw,23px);line-height:1.3;letter-spacing:-.025em;
  color:var(--ink)!important;padding-left:20px;margin:24px 0 28px!important;border-left:2px solid var(--green)}
@media(max-width:900px){.story__g{grid-template-columns:1fr}}

/* ===== VALUES (photo cards) ===== */
.vals{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);padding:clamp(80px,9vw,120px) 0}
.vals::before{content:"";position:absolute;inset:-40px;z-index:0;background:url('assets/gallery/supplied/team-line.webp') center/cover no-repeat;background-attachment:fixed;filter:blur(2px) saturate(.62);opacity:.26;transform:scale(1.05)}
.vals::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,10,8,.88),rgba(6,10,8,.72) 42%,rgba(6,10,8,.9))}
.vals > .wrap{position:relative;z-index:1}
/* 7 cards over a 4-track grid: the first spans two so both rows close completely */
.vals__g{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.vals__g .val:first-child{grid-column:span 2}
.val{position:relative;display:flex;min-height:300px;border-radius:16px;overflow:hidden;border:1px solid var(--edge);
  transition:transform .45s var(--e),border-color .4s,box-shadow .45s var(--e)}
.val:hover{transform:translateY(-5px);border-color:rgba(var(--green-rgb),.55);box-shadow:0 24px 54px rgba(0,0,0,.55)}
.val__im{position:absolute;inset:0;z-index:0}
.val__im img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.9);transition:transform .9s var(--e),filter .6s var(--e)}
.val:hover .val__im img{transform:scale(1.06);filter:saturate(.9) brightness(1)}
.val__im::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,10,8,.32) 0%,rgba(6,10,8,.78) 52%,rgba(6,10,8,.95) 100%)}
.val__b{position:relative;z-index:2;margin-top:auto;padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;width:100%}
.val__i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(var(--green-rgb),.22);color:var(--mint-media);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .4s,color .4s,transform .4s var(--e)}
.val__i svg{width:16px;height:16px}
.val:hover .val__i{background:var(--green);color:#04120B;transform:scale(1.08)}
.val h3{font-family:var(--dsp);font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.02em;margin-top:2px;color:var(--on-media)}
.val p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.8)}
/* 7 cards need a different span at each column count for both rows to close */
@media(max-width:1000px){
  .vals__g{grid-template-columns:repeat(3,1fr)}
  .vals__g .val:first-child{grid-column:span 2}
  .vals__g .val:last-child{grid-column:span 2}
}
@media(max-width:760px){
  .vals__g{grid-template-columns:repeat(2,1fr)}
  .vals__g .val:first-child{grid-column:span 1}
  .vals__g .val:last-child{grid-column:span 2}
}
@media(max-width:560px){
  .vals__g{grid-template-columns:1fr}
  .vals__g .val:first-child,.vals__g .val:last-child{grid-column:span 1}
  .val{min-height:250px}
}

/* ===== CREW ===== */
.crew{position:relative;isolation:isolate;background:var(--bg-2);padding:clamp(80px,9vw,120px) 0;overflow:hidden;border-top:1px solid var(--edge)}
.crew__h{margin-bottom:30px}
/* Split band: the team photo covers the whole right half of the viewport,
   edge to edge and full bleed, with the copy held in the left half. */
.crew__shot{position:absolute;top:0;right:0;bottom:0;width:50%;margin:0;z-index:0;line-height:0}
.crew__shot img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 45%}
/* Feathers the photo into the section so the split is not a hard seam. */
.crew__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg-2) 0%,rgba(0,0,0,0) 16%)}

.crew__g{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr}
.crew__c{grid-column:1;padding-right:clamp(24px,3vw,56px);
  display:flex;flex-direction:column;align-items:flex-start}
.crew__c .big{margin-bottom:14px}
.crew__c .say{margin-bottom:20px}
.crew__c p{color:var(--tx);font-size:15.5px;line-height:1.7;margin:0 0 13px}
.crew__c .cta{margin-top:14px}

@media(max-width:1280px){
  /* Stacked, it sits inside the same gutter as the copy rather than
     bleeding to the screen edge. */
  .crew__shot{position:static;width:auto;margin:0 var(--pad);
    border-radius:18px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.5)}
  .crew__shot img{height:auto;aspect-ratio:auto}
  .crew__shot::after{display:none}
  .crew__g{grid-template-columns:1fr;margin-top:26px}
  .crew__c{grid-column:1;padding-right:0}
}

/* ===== VOICE / reviews lane ===== */
.voice{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);padding:clamp(80px,9vw,120px) 0;overflow:hidden}
.voice::before{content:"";position:absolute;inset:-24px;z-index:0;background:url('assets/gallery/buildings/education.webp') center/cover no-repeat;background-attachment:fixed;filter:saturate(.9);opacity:.62;transform:scale(1.02)}
.voice::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,10,8,.84) 0%,rgba(6,10,8,.44) 42%,rgba(6,10,8,.88) 100%)}
.voice > .wrap{position:relative;z-index:1}
.voice .wrap{margin-bottom:42px}
.lane{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.lane__t{display:flex;gap:16px;width:max-content;animation:ln 76s linear infinite}
.lane:hover .lane__t{animation-play-state:paused}
@keyframes ln{to{transform:translateX(-50%)}}
.quote{flex:0 0 380px;padding:26px 26px 22px;border-radius:16px;background:var(--bg-3);border:1px solid var(--edge);display:flex;flex-direction:column;
  transition:border-color .4s,transform .45s var(--e),background .4s}
.quote:hover{border-color:rgba(var(--green-rgb),.55);transform:translateY(-4px);background:var(--hov)}
.quote__s{display:flex;gap:3px;margin-bottom:14px;color:var(--mint)}
.quote__s svg{width:14px;height:14px}
.quote__q{font-family:var(--dsp);font-weight:500;font-size:15.5px;line-height:1.5;letter-spacing:-.01em;color:var(--ink);flex:1}
.quote__w{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:15px;border-top:1px solid var(--edge)}
.quote__av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--green-rgb),.2);color:var(--mint);
  font-family:var(--dsp);font-weight:700;font-size:12px;flex:0 0 auto}
.quote__n{font-size:13px;color:var(--tx-2)}
@media(max-width:680px){.quote{flex:0 0 82vw}}

/* ===== FEED ===== */
.feed{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-2);padding:clamp(80px,9vw,120px) 0;border-top:1px solid var(--edge)}
.feed::before{content:"";position:absolute;inset:-24px;z-index:0;background:url('assets/gallery/buildings/aerospace.webp') center/cover no-repeat;background-attachment:fixed;filter:saturate(.9);opacity:.62;transform:scale(1.02)}
.feed::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,10,8,.84) 0%,rgba(6,10,8,.44) 42%,rgba(6,10,8,.88) 100%)}
.feed > .wrap{position:relative;z-index:1}
.feed__h{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:42px}
.feed__g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.post-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--bg-3);border:1px solid var(--edge);
  transition:transform .45s var(--e),border-color .4s,box-shadow .45s var(--e)}
.post-card:hover{transform:translateY(-6px);border-color:rgba(var(--green-rgb),.55);box-shadow:0 24px 54px rgba(0,0,0,.55)}
.post-card__im{aspect-ratio:16/10;overflow:hidden;position:relative}
.post-card__im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e);filter:saturate(.86)}
.post-card:hover .post-card__im img{transform:scale(1.07)}
.post-card__b{padding:18px 18px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card__d{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.post-card__t{font-family:var(--dsp);font-weight:700;font-size:15px;line-height:1.26;letter-spacing:-.02em}
.post-card__x{font-size:12.5px;line-height:1.55;color:var(--tx-2)}
.post-card__m{margin-top:auto;padding-top:10px;font-family:var(--dsp);font-weight:600;font-size:12.5px;color:var(--green)}
@media(max-width:1100px){.feed__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.feed__g{grid-template-columns:1fr}}

/* ===== LOCATIONS ===== */
.loc{position:relative;background:var(--bg);padding:clamp(80px,9vw,120px) 0;overflow:hidden}
.loc__bg{position:absolute;inset:0;background:url('assets/gallery/buildings/lifestyle.webp') center/cover no-repeat;opacity:.55;filter:saturate(.9)}
.loc__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,10,8,.84) 0%,rgba(6,10,8,.46) 42%,rgba(6,10,8,.88) 100%)}
.loc>.wrap{position:relative;z-index:2}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0 40px}
.pill{padding:9px 17px;border-radius:100px;background:var(--glass);border:1px solid var(--edge);font-size:12.5px;font-weight:500;color:var(--tx);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .35s,border-color .35s,color .35s,transform .35s var(--e)}
.pill:hover{background:rgba(var(--green-rgb),.2);border-color:rgba(var(--green-rgb),.6);color:var(--ink);transform:translateY(-2px)}
.loc__g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.loc-card{padding:22px 20px 24px;border-radius:16px;background:var(--bg-3);border:1px solid var(--edge);display:flex;flex-direction:column;gap:5px;
  transition:transform .45s var(--e),border-color .4s,background .4s}
.loc-card:hover{transform:translateY(-5px);border-color:rgba(var(--green-rgb),.55);background:var(--hov)}
.loc-card__r{font-family:var(--dsp);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.loc-card__c{font-family:var(--dsp);font-weight:700;font-size:19px;letter-spacing:-.025em;line-height:1.1;margin-top:2px}
.loc-card__a{font-size:12.5px;line-height:1.55;color:var(--tx-2)}
.loc-card__p{align-self:flex-start;margin-top:6px;font-family:var(--dsp);font-weight:700;font-size:15px;transition:color .3s}
.loc-card__p:hover{color:var(--mint)}
.loc-card__l{list-style:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--edge);display:flex;flex-direction:column;gap:6px}
.loc-card__l li{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.35}
.loc-card__l span{color:var(--tx)}
.loc-card__l a{color:var(--mint);white-space:nowrap}
.loc-card__l a:hover{color:var(--ink);text-decoration:underline}
.loc-card__fam{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--edge);
  font-size:10.5px;line-height:1.35;letter-spacing:.02em;color:var(--tx-2)}
@media(max-width:1100px){.loc__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.loc__g{grid-template-columns:1fr}}

/* ===== QA ===== */
.qa{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-2);padding:clamp(80px,9vw,120px) 0;border-top:1px solid var(--edge)}
.qa::before{content:"";position:absolute;inset:-40px;z-index:0;background:url('assets/gallery/shoot1/meeting-room.webp') center/cover no-repeat;
  background-attachment:fixed;filter:blur(2px) saturate(.62);opacity:.27;transform:scale(1.05)}
.qa::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,16,13,.89),rgba(10,16,13,.72) 42%,rgba(10,16,13,.91))}
.qa > .wrap{position:relative;z-index:1}
@media(max-width:1100px){.qa::before{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){.qa::before{background-attachment:scroll}}
.qa__g{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4.5vw,70px);align-items:start}
.qa__l .say{margin:16px 0 26px}
.qa__r{display:flex;flex-direction:column;gap:10px}
.ask{border-radius:14px;background:var(--bg-3);border:1px solid var(--edge);overflow:hidden;transition:border-color .4s,background .4s}
.ask[open]{border-color:rgba(var(--green-rgb),.55);background:var(--hov)}
.ask__q{display:flex;align-items:center;justify-content:space-between;gap:18px;list-style:none;cursor:pointer;padding:17px 20px;
  font-family:var(--dsp);font-weight:600;font-size:15.5px;line-height:1.32;letter-spacing:-.015em;transition:color .3s}
.ask__q::-webkit-details-marker{display:none}
.ask__q:hover{color:var(--mint)}
.ask__i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--green-rgb),.18);
  position:relative;transition:transform .45s var(--e),background .35s}
.ask__i::before,.ask__i::after{content:"";position:absolute;background:var(--mint);border-radius:2px;transition:opacity .3s}
.ask__i::before{width:11px;height:1.6px}
.ask__i::after{width:1.6px;height:11px}
.ask[open] .ask__i{transform:rotate(135deg);background:var(--green)}
.ask[open] .ask__i::before,.ask[open] .ask__i::after{background:#04120B}
.ask__a{padding:0 20px 19px;animation:aq .4s var(--e) both}
.ask__a p{font-size:14px;line-height:1.7;color:var(--tx)}
@keyframes aq{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.ask__q:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
@media(max-width:900px){.qa__g{grid-template-columns:1fr}}

/* ===== TALK ===== */
.talk{position:relative;background:var(--bg);padding:clamp(80px,9vw,124px) 0;overflow:hidden}
.talk__bg{position:absolute;inset:0;background:url('assets/gallery/buildings/industrial.webp') center/cover no-repeat;opacity:.55;filter:saturate(.9)}
.talk__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,10,8,.84) 0%,rgba(6,10,8,.46) 42%,rgba(6,10,8,.88) 100%)}
.talk__g{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px);align-items:start}
.talk__a{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.panes{display:flex;flex-direction:column;gap:11px}
.pane{display:flex;gap:16px;align-items:flex-start;padding:19px 21px;border-radius:15px;background:var(--bg-3);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .4s,background .4s,transform .4s var(--e)}
.pane:hover{border-color:rgba(var(--green-rgb),.5);background:rgba(255,255,255,.08);transform:translateX(4px)}
.pane__i{flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--green-rgb),.18);color:var(--mint)}
.pane__i svg{width:18px;height:18px}
.pane__k{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-2);display:block;margin-bottom:5px}
.pane__v{font-size:15px;line-height:1.5;color:var(--ink)}
.pane__v a{display:block;transition:color .3s}
.pane__v a:hover{color:var(--mint)}
.pane__v .big-n{font-family:var(--dsp);font-weight:700;font-size:21px;letter-spacing:-.02em}
@media(max-width:900px){.talk__g{grid-template-columns:1fr}}

/* ===== END ===== */
.end{background:#030705;color:var(--tx-2);padding:62px 0 24px;border-top:1px solid var(--edge)}
.end__g{display:grid;grid-template-columns:1.4fr 1fr 1.15fr 1fr;gap:30px}
.end__b img{height:50px;width:auto;filter:brightness(0) invert(1);margin-bottom:16px}
.end__b p{font-size:14px;max-width:34ch}
.end__c h4{font-family:var(--dsp);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:15px}
.end__c a,.end__c span{display:block;font-size:14px;padding:5px 0;transition:color .3s}
.end__c a:hover{color:var(--mint)}
.end__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:42px;padding-top:21px;border-top:1px solid var(--edge);font-size:12.5px}
@media(max-width:1000px){.end__g{grid-template-columns:1fr 1fr}.end__b{grid-column:1/-1}}
@media(max-width:560px){.end__g{grid-template-columns:1fr}}

/* ===== DOCK ===== */
.dock{position:fixed;right:22px;bottom:22px;z-index:90;display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:100px;
  background:var(--green);color:#04120B;font-family:var(--dsp);font-weight:700;font-size:13.5px;box-shadow:0 16px 42px rgba(var(--green-rgb),.42);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .5s var(--e),transform .5s var(--e),box-shadow .35s}
.dock.on{opacity:1;transform:none;pointer-events:auto}
.dock:hover{box-shadow:0 20px 54px rgba(var(--green-rgb),.6)}
.dock i{width:7px;height:7px;border-radius:50%;background:#04120B;animation:pp 1.9s var(--e) infinite}
@media(max-width:680px){.dock{right:14px;bottom:14px;padding:14px 19px;font-size:12.5px}}

@media(max-width:1100px){.vals::before,.voice::before,.svc::before{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){.vals::before,.voice::before,.svc::before{background-attachment:scroll}}


/* ===== PRIMARY NAV: grouped menus + mobile drawer ===== */
.bar__n{display:flex;align-items:center;gap:14px}
.navi{position:relative}
.navi__t{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--dsp);font-weight:500;font-size:12.5px;color:rgba(255,255,255,.86);transition:color .3s;position:relative;white-space:nowrap}
.navi__t:hover,.navi.on .navi__t{color:var(--ink)}
.navi__t::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--mint);
  box-shadow:0 0 8px var(--mint);transition:width .38s var(--e)}
.navi__t:hover::after,.navi.on .navi__t::after{width:100%}
.navi__t svg{width:11px;height:11px;transition:transform .35s var(--e);opacity:.7}
.navi.on .navi__t svg{transform:rotate(180deg)}
.navi__m{position:absolute;top:calc(100% + 14px);left:-16px;min-width:264px;padding:8px;border-radius:14px;
  background:rgba(8,13,11,.97);border:1px solid var(--edge);box-shadow:0 22px 50px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .28s var(--e),transform .28s var(--e),visibility .28s;z-index:5}
.navi.on .navi__m{opacity:1;visibility:visible;transform:none}
.navi__m::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.navi__m a{display:block;padding:10px 13px;border-radius:9px;font-family:var(--txt);font-weight:500;font-size:13.5px;
  line-height:1.35;color:var(--tx);transition:background .25s,color .25s}
.navi__m a:hover,.navi__m a:focus-visible{background:rgba(var(--green-rgb),.18);color:var(--ink)}
.navi__m a.is-on{color:var(--mint)}
.navi__m a::after{display:none}
.navi__m hr{margin:6px 9px;border:0;border-top:1px solid var(--edge)}

/* Mega menus. The new sitemap puts 20+ entries under Commercial and 23 under
   Residential, so those two open as a multi-column panel instead of a list. */
.navi--w{position:static}
.bar__in{position:relative}
.navi--w .navi__m{left:0;right:0;width:auto;max-width:980px;margin-inline:auto;padding:16px}
.navi__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 12px}
.navi__k{margin:4px 13px 8px;font-family:var(--dsp);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.navi__m .navi__col + .navi__col{border-left:1px solid var(--edge);padding-left:10px}
/* Sitemap entries with no source copy: shown, but plainly not yet a page. */
.navi__x{display:block;padding:10px 13px;border-radius:9px;font-family:var(--txt);font-weight:500;
  font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.3);cursor:default;user-select:none}

.burger{display:none;width:42px;height:42px;border-radius:11px;background:var(--glass);border:1px solid var(--edge);
  cursor:pointer;padding:0;place-items:center;transition:background .3s,border-color .3s}
.burger:hover{background:rgba(255,255,255,.12)}
.burger span{display:block;width:17px;height:1.7px;background:#fff;border-radius:2px;position:relative;transition:background .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.7px;background:#fff;border-radius:2px;
  transition:transform .35s var(--e),top .35s var(--e)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.bar.open .burger span{background:transparent}
.bar.open .burger span::before{top:0;transform:rotate(45deg)}
.bar.open .burger span::after{top:0;transform:rotate(-45deg)}

@media(max-width:1080px){
  .burger{display:grid}
  /* solid, not translucent: hero copy was bleeding through the open drawer */
  .bar__n{position:fixed;inset:0 0 auto;top:0;padding:92px 22px 30px;flex-direction:column;align-items:stretch;gap:2px;
    max-height:100svh;overflow-y:auto;background:var(--bg);
    border-bottom:1px solid var(--edge);box-shadow:0 26px 60px rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .32s var(--e),transform .32s var(--e),visibility .32s;z-index:1}
  /* the drawer is a sibling of the logo and button row inside .bar__in,
     so those need to out-stack it rather than the parent */
  .bar__in{position:relative}
  .bar__b,.bar__e{position:relative;z-index:2}
  .bar.open .bar__n{opacity:1;visibility:visible;transform:none}
  .bar__n > a,.navi__t{font-size:16px;padding:13px 4px;width:100%;justify-content:space-between;border-bottom:1px solid var(--edge)}
  .bar__n > a{color:var(--ink)}
  .navi__t::after,.bar__n > a::after{display:none}
  .navi__m{position:static;opacity:1;visibility:visible;transform:none;min-width:0;left:auto;
    background:none;border:0;box-shadow:none;padding:2px 0 8px;display:none}
  .navi.on .navi__m{display:block}
  .navi__m a{padding:13px 14px;font-size:14.5px;color:var(--tx)}
  .navi__m a::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);
    margin-right:10px;vertical-align:1px}
  .navi--w .navi__m{width:auto}
  .navi__cols{display:block}
  .navi__m .navi__col + .navi__col{border-left:0;padding-left:0;margin-top:10px}
  .navi__k{margin:12px 14px 4px}
  .navi__x{padding:13px 14px;font-size:14.5px;color:rgba(255,255,255,.34)}
  .navi__x::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
    background:rgba(255,255,255,.22);margin-right:10px;vertical-align:1px}
}
@media(max-width:680px){.bar__n{padding-top:84px}}
/* On a phone a long button wraps rather than running off the screen. */
@media(max-width:520px){
  .cta{white-space:normal;text-align:center;max-width:100%;padding-inline:22px}
}
/* On the narrowest phones the logo, CTA and menu button cannot share the bar:
   the button was being pushed off-screen. The CTA moves into the drawer, and
   the sticky dock still offers it everywhere else. */
@media(max-width:480px){
  .bar__c{display:none}
  .bar__n .drawer-cta{display:flex;margin-top:18px;width:100%;justify-content:center}
}
.bar__n .drawer-cta{display:none}

@media(max-width:1100px){.svc::before,.voice::before,.story::before,.feed::before{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){.svc::before,.voice::before,.story::before,.feed::before{background-attachment:scroll}}

/* Buildings now read at full strength, so the copy columns that sit on top of
   them carry their own soft floor rather than relying on the section scrim. */
.story__c,.voice .wrap > .tag,.voice .wrap > .big{position:relative}
.story__c::before{content:"";position:absolute;inset:-26px -30px;z-index:-1;border-radius:20px;
  background:radial-gradient(120% 100% at 30% 50%,rgba(6,10,8,.9),rgba(6,10,8,.55) 70%,transparent)}
.svc__h,.feed__h,.loc > .wrap > .tag,.loc > .wrap > .big{position:relative;z-index:2}

/* copy columns on the Offices and Contact buildings get their own floor */
.talk__g > div:first-child,.loc > .wrap > .tag,.loc > .wrap > .big{position:relative}
.talk__g > div:first-child::before{content:"";position:absolute;inset:-24px -28px;z-index:-1;border-radius:20px;
  background:radial-gradient(120% 100% at 25% 50%,rgba(6,10,8,.88),rgba(6,10,8,.5) 72%,transparent)}

/* ===== CEO MESSAGE ===== */
.ceo{scroll-margin-top:96px;position:relative;isolation:isolate;overflow:hidden;background:var(--bg-2);padding:clamp(76px,9vw,116px) 0;border-block:1px solid var(--edge)}
.ceo__bg{position:absolute;inset:-24px;z-index:0;background:url('assets/gallery/buildings/life-science.webp') center/cover no-repeat;
  background-attachment:fixed;filter:saturate(.7);opacity:.3;transform:scale(1.02)}
.ceo__scrim{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(10,16,13,.9) 0%,rgba(10,16,13,.7) 42%,rgba(10,16,13,.93) 100%)}
.ceo__g{position:relative;z-index:1;display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(34px,4.5vw,72px);align-items:start}

.ceo__m{position:relative;margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--edge);
  box-shadow:0 28px 64px rgba(0,0,0,.5);position:sticky;top:110px}
.ceo__m img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 12%;display:block}
.ceo__plate{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 20px;display:flex;flex-direction:column;gap:3px;
  background:linear-gradient(180deg,transparent,rgba(6,10,8,.88) 55%)}
.ceo__plate b{font-family:var(--dsp);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--on-media)}
.ceo__plate i{font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-media)}

.ceo__c{position:relative}
.ceo__q{font-family:var(--dsp);font-weight:800;font-size:96px;line-height:.6;color:var(--green);opacity:.5;margin:6px 0 10px}
.ceo__c p{font-size:15.5px;line-height:1.78;color:var(--tx);margin-bottom:15px;max-width:68ch}
.ceo__c p.ceo__lead{font-size:18px;line-height:1.7;color:var(--ink)}
.ceo__sig{margin-top:26px;padding-top:20px;border-top:1px solid var(--edge);display:flex;flex-direction:column;gap:2px}
.ceo__sigName{font-family:var(--dsp);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.ceo__sigRole{font-size:13.5px;color:var(--mint)}
.ceo__sigOrg{font-size:13px;color:var(--tx-2)}

@media(max-width:1100px){.ceo__bg{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){.ceo__bg{background-attachment:scroll}}
@media(max-width:900px){
  .ceo__g{grid-template-columns:1fr;gap:30px}
  /* Stays positioned so the absolutely placed name plate still anchors
     to the photo, but top: must be reset: the desktop rule is
     sticky/top:110px, and relative + top:110px shifts the photo down
     into the message instead of pinning it. */
  .ceo__m{position:relative;top:auto;max-width:340px}
  .ceo__q{font-size:72px}
}
@media(max-width:680px){
  /* At phone width a 340px portrait fills the screen on its own and
     pushes the message a full swipe below the fold. Shrinking it lets
     the opening lines land alongside the photo. */
  .ceo__m{max-width:236px}
  .ceo__m img{aspect-ratio:4/5}
  .ceo__plate{padding:20px 16px 14px}
  .ceo__plate b{font-size:16px}
  .ceo__q{font-size:56px;margin:0 0 4px}
  .ceo__c p.ceo__lead{font-size:16.5px}
}

section[id]{scroll-margin-top:96px}

/* ============================================================
   MOBILE POLISH
   Phones are where clients open these links, so the rules below
   protect what breaks first on a small screen: tap targets, CTA
   labels, and text that shrinks below the legible floor.

   Selectors use [class~=x] (whole class name) rather than
   [class*=x] (substring). Substring matching is a trap here:
   [class*=tag] also matches "stage__h", which silently shrank
   the hero headline to 12px.
   ============================================================ */

/* Stop iOS inflating type in landscape, and kill the gray flash on tap. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,[role=button]{-webkit-tap-highlight-color:rgba(0,0,0,.12)}

/* Long strings (phone numbers, addresses, URLs) must never force a sideways scroll. */
body{overflow-wrap:break-word}

@media(max-width:680px){

  /* --- Tap targets ---------------------------------------------------
     Apple and Google both put the comfortable minimum near 44px.
     Inline links inside a sentence are deliberately left alone, since
     padding them out would wreck the surrounding line spacing. */
  nav a,footer a,[class~=nav] a,[class~=footer] a,[class~=menu] a,
  [class~=drawer] a,[class~=end__c] a{min-height:44px;display:flex;align-items:center}

  p a,li a,span a{min-height:0;display:inline}

  /* Calling is the primary action on these sites, so tel: and mailto:
     keep the full target even inside a list or paragraph. Declared
     after the prose rule so it cannot be shrunk back. */
  a[href^="tel:"],a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}

  button,[role=button],input[type=submit],input[type=button]{min-height:44px}

  /* Short breadcrumb words ("Home") miss the width minimum on their own. */
  [class~=crumb] a,[class*=crumb] a{padding-inline:5px}

  /* The logo doubles as a link and sits in a bar with room to spare. */
  .bar__b,[class~=logo]{min-height:44px;display:inline-flex;align-items:center}

  /* --- Buttons and CTAs ----------------------------------------------
     A CTA that clips its own label is worse than one that wraps. */
  [class~=cta],[class*=cta--],[class~=btn],[class~=button]{overflow:visible;min-height:48px}

  /* --- Legibility floor ----------------------------------------------
     Uppercase letterspaced micro-labels drift to 10-11px, which is hard
     to read at arm's length. Whole-word matches only, plus the specific
     ACP label classes. */
  [class~=tag],[class~=eyebrow],[class~=kicker],[class~=label],
  [class~=badge],[class~=chip],[class~=pill],[class~=meta],
  small,figcaption,time,
  .card__n,.scard__n,.pane__k,.post-card__d,.loc-card__r,.loc-card__fam,
  .tile__n,.sv__n{
    font-size:12px!important}
}

@media(max-width:560px){
  /* Two buttons cannot share a 360px row without clipping "Schedule
     Service", so each takes its own full-width row. */
  .stage__a [class~=cta],.phero__a [class~=cta],[class~=actions] [class~=cta]{
    flex:1 1 100%!important;width:100%}
}

/* ============================================================
   LEAD FORM
   The client asked for the request to be fillable in place
   rather than behind a chain of buttons, so the contact section
   carries the form itself and the portal link is gone.
   ============================================================ */
.lform{position:relative;z-index:2;background:rgba(10,16,13,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--edge);border-radius:20px;
  padding:clamp(22px,2.4vw,32px);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.lform__h{font-family:var(--dsp);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.lform__s{font-size:14px;color:var(--tx-2);margin-bottom:20px}

.lform__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lfield{margin:0 0 14px;display:flex;flex-direction:column;gap:7px}
.lfield label{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.lfield label b{color:var(--mint);font-weight:700}
.lfield input,.lfield textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--edge-2);border-radius:10px;
  padding:13px 14px;transition:border-color .25s,background .25s,box-shadow .25s}
.lfield textarea{resize:vertical;min-height:112px;line-height:1.6}
.lfield input::placeholder,.lfield textarea::placeholder{color:rgba(255,255,255,.34)}
.lfield input:focus,.lfield textarea:focus{outline:none;border-color:rgba(var(--green-rgb),.85);
  background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(var(--green-rgb),.22)}

/* Errors speak in words, not just color, and are announced to the field. */
.lfield__e{font-size:12.5px;color:#ff9a9a;min-height:0}
.lfield.is-bad input,.lfield.is-bad textarea{border-color:#d9534f}

.lfield--c{gap:9px}
.lform__opt{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-size:12.5px;line-height:1.6;color:var(--tx-2);font-weight:400;letter-spacing:0}
.lform__opt input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--green);cursor:pointer}
.lform__opt a{color:var(--mint);text-decoration:underline;text-underline-offset:2px}
.lform__opt a:hover{color:var(--ink)}

.lform__send{margin-top:4px;width:100%}
.lform__status{margin-top:12px;font-size:13px;min-height:1em;color:var(--tx-2)}
.lform__status.is-bad{color:#ff9a9a}

.lform__done{text-align:center;padding:22px 6px}
.lform__tick{width:54px;height:54px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  color:#04120B;background:var(--green);box-shadow:0 0 0 8px rgba(var(--green-rgb),.16)}
.lform__done h3{font-family:var(--dsp);font-weight:700;font-size:22px;color:var(--ink);margin-bottom:9px}
.lform__done p{font-size:14.5px;line-height:1.7;color:var(--tx);max-width:42ch;margin:0 auto}
.lform__done a{color:var(--mint)}

@media(max-width:560px){
  .lform__row{grid-template-columns:1fr;gap:0}
}

/* ============================================================
   LEGAL PAGES
   Long-form prose for the privacy policy and terms of use.
   ============================================================ */
.legal{background:var(--bg);padding:clamp(118px,11vw,160px) 0 clamp(70px,8vw,110px)}
.legal__w{max-width:820px;margin:0 auto}
.legal__t{font-family:var(--dsp);font-weight:800;font-size:clamp(32px,4.4vw,52px);
  letter-spacing:-.03em;line-height:1.05;color:var(--ink);margin-bottom:12px}
.legal__d{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:34px}
.legal__w h2{font-family:var(--dsp);font-weight:700;font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.02em;color:var(--ink);margin:38px 0 12px}
.legal__w h3{font-family:var(--dsp);font-weight:600;font-size:17px;color:var(--ink);margin:26px 0 9px}
.legal__w p{font-size:15.5px;line-height:1.78;color:var(--tx);margin-bottom:14px}
.legal__w ul{margin:0 0 16px;padding-left:20px}
.legal__w li{font-size:15.5px;line-height:1.78;color:var(--tx);margin-bottom:8px}
.legal__w a{color:var(--mint);text-decoration:underline;text-underline-offset:2px}
.legal__w a:hover{color:var(--ink)}
.legal__w strong{color:var(--ink);font-weight:600}
.legal__note{border:1px solid rgba(var(--green-rgb),.45);background:rgba(var(--green-rgb),.08);
  border-radius:12px;padding:14px 16px;font-size:14px!important;margin-bottom:26px!important}
.end__legal{display:flex;gap:18px;flex-wrap:wrap}
.end__legal a{color:var(--tx-2);transition:color .3s}
.end__legal a:hover{color:var(--mint)}
/* the two policy links were the last controls under a 44px tap target */
@media(max-width:1280px){.end__legal{gap:10px}.end__legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}}

/* Tap targets inside the consent block. The checkbox is small by nature,
   so the whole label is the hit area; the box itself is still enlarged so
   aiming at it works. The two policy links sit inline in a sentence, so
   they gain hit area through vertical padding, which grows the clickable
   box without disturbing the line spacing around them. */
.lform__opt{padding:4px 0;min-height:44px}
/* A checkbox ignores padding, so the wrapper carries the 44px tap area
   while the box itself stays 24px. The label toggles it as well. */
.lform__box{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;margin-left:-10px}
.lform__opt input{width:24px;height:24px;margin:0}
.lform__opt a{padding-block:10px}


/* ============================================================
   SECTION THEMES
   The client's note before launch: the page was too dark and the
   sections ran together because the two background values were
   nearly the same black. Sections now carry a theme class that
   redefines the colour tokens, so every existing var() rule
   follows without being rewritten.
   ============================================================ */
.t-light,.t-tint{
  --bg:#ffffff;
  --bg-2:#F2F7F4;
  --bg-3:#EFF5F1;   /* card fill on a white band */
  --hov:#E2EFE8;    /* hover fill, a shade down from the card */
  --glass:rgba(7,35,26,.035);
  --edge:rgba(7,35,26,.13);
  --edge-2:rgba(7,35,26,.22);
  --ink:#0A2318;
  --tx:rgba(10,35,24,.84);
  --tx-2:rgba(10,35,24,.7);
  /* Mint is an accent for dark ground only; on white it vanishes. */
  --mint:#0A6E42;
  background:var(--bg);
  color:var(--tx);
}
.t-tint{--bg:#F2F7F4;--bg-2:#ffffff;--bg-3:#ffffff;background:var(--bg)}  /* white cards on the tint */
/* Explicit deep, for blocks that carry their own photography. */
.t-deep{background:var(--bg);color:var(--tx)}

/* A light section must not keep a dark full-bleed backdrop behind it. */
.t-light::before,.t-light::after,.t-tint::before,.t-tint::after{display:none}
.t-light [class$=__bg],.t-light [class$=__scrim],
.t-tint [class$=__bg],.t-tint [class$=__scrim]{display:none}

/* The stats band sits between two light sections as solid brand green. */
.t-green{
  --bg:var(--green-d);
  --bg-2:#074a2f;
  --hov:#0A5B3A;
  --glass:rgba(255,255,255,.1);
  --edge:rgba(255,255,255,.2);
  --edge-2:rgba(255,255,255,.32);
  --ink:#fff;
  --tx:rgba(255,255,255,.86);
  --tx-2:rgba(255,255,255,.66);
  --mint:#9CF5CC;
  background:var(--green-d);
  color:var(--tx);
}

/* ============================================================
   FULL-BLEED IMAGE BAND
   The composition approved on Kliemann: the picture holds one
   whole half of the band, edge to edge and floor to ceiling,
   never a framed box inside a container. The copy column centres
   itself against it, and a brand hairline marks the seam.
   Picture sits left on every band so the page reads consistently,
   and stacks picture-first on a phone.
   ============================================================ */
.iband{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.iband__pic{position:relative;overflow:hidden;min-height:clamp(360px,30vw,460px)}
.iband__pic img{width:100%;height:100%;display:block;object-fit:cover}
/* Seam hairline, on the inside edge of the picture. */
.iband__pic::after{content:"";position:absolute;top:0;bottom:0;right:0;width:4px;background:var(--green);z-index:2}

/* Bands alternate which side the picture takes: image/copy, then
   copy/image. The client asked for this explicitly, which reverses the
   Kliemann rule of keeping the picture on one side throughout. */
.iband__pic{grid-column:1;grid-row:1}
.iband__c{grid-column:2;grid-row:1}
.iband--rev .iband__pic{grid-column:2}
.iband--rev .iband__c{grid-column:1}
.iband--rev .iband__pic::after{right:auto;left:0}
.iband__c{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(44px,5vw,78px) clamp(26px,4.4vw,70px)}
.iband__c > *{max-width:54ch}
.iband__c > .scards,.iband__c > .steps,.iband__c > .chips{max-width:none}
.iband__c .big{margin-bottom:16px}
.iband__c p{color:var(--tx);font-size:15.5px;line-height:1.78;margin-bottom:14px}
.iband__c .cta{margin-top:12px;align-self:flex-start}

@media(max-width:860px){
  .iband{grid-template-columns:1fr}
  .iband__pic,.iband--rev .iband__pic{min-height:clamp(240px,58vw,330px);grid-column:1;grid-row:1}
  .iband__c,.iband--rev .iband__c{grid-column:1;grid-row:2;padding:clamp(32px,7vw,48px) var(--pad)}
  .iband__pic::after,.iband--rev .iband__pic::after{top:auto;left:0;right:0;bottom:0;width:auto;height:4px}
}

/* An image band runs floor to ceiling, so the section's own padding goes. */
section.iband{padding:0}
/* The glass panels behind copy existed to lift it off a photographic
   backdrop. On a light band there is no backdrop, and the panel just
   greys the copy out. */
.t-light .story__c::before,.t-tint .story__c::before,
.iband .story__c::before{display:none}

/* A subpage image band holds its copy in the same column the rest of the
   page uses, so the text still lines up with the sections above and below. */
.sec.iband{padding:0}
.sec.iband .iband__c .sec__h{margin-bottom:18px}
/* The card grid is built on 6 tracks with span rules so any count closes.
   Inside a band it only has half the width, so it drops to two tracks and
   every span rule has to be reset or the cards run off the edge. */
.sec.iband .iband__c .scards{grid-template-columns:repeat(2,1fr)}
.sec.iband .iband__c .scard,
.sec.iband .iband__c .scards .scard:last-child:nth-child(3n+1),
.sec.iband .iband__c .scards .scard:nth-last-child(2):nth-child(3n+1),
.sec.iband .iband__c .scards .scard:last-child:nth-child(3n+2){grid-column:auto}
.sec.iband .iband__c .scards .scard:last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:860px){.sec.iband .iband__c .scards{grid-template-columns:1fr}
  .sec.iband .iband__c .scards .scard:last-child:nth-child(odd){grid-column:auto}}

/* ============================================================
   PHOTOGRAPHIC GROUND ON THE LIGHT BANDS
   The client found the brightened page plain. A washed photo is
   blended into the band's own colour with multiply, which keeps
   the picture's structure instead of fading it to a flat tint.
   Blending on the element itself rather than a pseudo-element
   avoids colliding with the ::before/::after these sections
   already use for their scrims.
   ============================================================ */
.t-light,.t-tint{
  --ground:none;
  background-color:var(--bg);
  background-image:var(--ground);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-blend-mode:multiply;
}
/* A fixed ground judders on touch devices, so it scrolls there. */
@media(hover:none){.t-light,.t-tint{background-attachment:scroll}}

.svc  {--ground:url('assets/texture/wash-building.webp')}
.ind  {--ground:url('assets/texture/wash-fleet.webp')}
.vals {--ground:url('assets/texture/wash-yard.webp')}
.ceo  {--ground:url('assets/texture/wash-room.webp')}
.crew {--ground:url('assets/texture/wash-fleet.webp')}
.voice{--ground:url('assets/texture/wash-room.webp')}
.feed {--ground:url('assets/texture/wash-building.webp')}
.loc  {--ground:url('assets/texture/wash-yard.webp')}
.qa   {--ground:url('assets/texture/wash-room.webp')}
/* Subpage bands share the set, keyed off their theme. */
.sec.t-light{--ground:url('assets/texture/wash-building.webp')}
.sec.t-tint {--ground:url('assets/texture/wash-yard.webp')}

/* ============================================================
   REQUEST FORM MODAL
   Schedule Service opens the form in place instead of sending
   people to another page.
   ============================================================ */
/* display:grid overrides the hidden attribute, which left this invisibly
   covering every page and swallowing every click. */
.fmodal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.fmodal[hidden]{display:none}
.fmodal__scrim{position:absolute;inset:0;background:rgba(4,14,10,.62);opacity:0;
  transition:opacity .28s var(--e);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.fmodal.on .fmodal__scrim{opacity:1}
.fmodal__box{position:relative;z-index:1;width:min(560px,100%);max-height:calc(100vh - 40px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:20px;
  opacity:0;transform:translateY(14px) scale(.985);transition:opacity .28s var(--e),transform .28s var(--e)}
.fmodal.on .fmodal__box{opacity:1;transform:none}
/* Above the form, which is position:relative z-index:2. At the same z the
   form painted over this and the button could not be tapped at all, which
   on a phone left no way out of the modal: there is no Escape key. */
.fmodal__x{position:absolute;top:12px;right:12px;z-index:6;width:44px;height:44px;border:0;
  border-radius:50%;cursor:pointer;font-size:26px;line-height:1;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff}
/* Keep the heading clear of the close button. */
.fmodal__body .lform__h{padding-right:48px}
.fmodal__x:hover{background:rgba(255,255,255,.2)}
/* The modal always uses the deep treatment, whatever band it opened over. */
.fmodal__body .lform{background:#0A2C21;border-color:rgba(255,255,255,.14)}
.fmodal__body .lform__h,.fmodal__body .lfield label{color:#fff}
.fmodal__body .lfield input,.fmodal__body .lfield textarea{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.fmodal__body .lfield input::placeholder,.fmodal__body .lfield textarea::placeholder{color:rgba(255,255,255,.4)}
.fmodal__body .lform__s,.fmodal__body .lform__opt{color:rgba(255,255,255,.78)}
.fmodal__body .lform__opt a{color:#7FF0BB}
.fmodal__body .lform__done h3{color:#fff}
.fmodal__body .lform__done p{color:rgba(255,255,255,.82)}
@media(prefers-reduced-motion:reduce){.fmodal__scrim,.fmodal__box{transition:none}}

/* ============================================================
   FORM AT THE FOOT OF EVERY PAGE
   ============================================================ */
.fend{background:var(--bg);padding:clamp(64px,7vw,96px) 0;border-top:1px solid var(--edge)}
.fend__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.fend__c .big{margin-bottom:14px}
.fend__c p{color:var(--tx);font-size:15.5px;line-height:1.75;max-width:52ch}
.fend__a{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
@media(max-width:900px){.fend__g{grid-template-columns:1fr}}

/* ============================================================
   BLOG
   ============================================================ */
.bhero{background:var(--bg);padding:clamp(118px,11vw,156px) 0 clamp(40px,5vw,62px)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.bcard{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:var(--bg-3);border:1px solid var(--edge);text-decoration:none;
  transition:transform .4s var(--e),border-color .35s,box-shadow .35s}
.bcard:hover{transform:translateY(-5px);border-color:rgba(var(--green-rgb),.5);box-shadow:0 22px 50px rgba(0,0,0,.2)}
.bcard__im{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.bcard__im img{width:100%;height:100%;object-fit:cover;display:block}
.bcard__b{padding:18px 19px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.bcard__d{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.bcard__t{font-family:var(--dsp);font-weight:700;font-size:16.5px;line-height:1.28;letter-spacing:-.02em;color:var(--ink)}
.bcard__x{font-size:13px;line-height:1.6;color:var(--tx-2)}
@media(max-width:1000px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.bgrid{grid-template-columns:1fr}}

/* Individual post */
.post{background:var(--bg);padding:clamp(112px,11vw,150px) 0 clamp(60px,7vw,92px)}
.post__w{max-width:760px;margin:0 auto}
.post__d{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
.post__t{font-family:var(--dsp);font-weight:800;font-size:clamp(30px,4.2vw,50px);line-height:1.06;
  letter-spacing:-.03em;color:var(--ink);margin-bottom:26px}
.post__hero{border-radius:18px;overflow:hidden;margin-bottom:34px;border:1px solid var(--edge)}
.post__hero img{width:100%;height:auto;display:block}
.post__w h2{font-family:var(--dsp);font-weight:700;font-size:clamp(20px,2.2vw,27px);color:var(--ink);margin:34px 0 12px;letter-spacing:-.02em}
.post__w h3{font-family:var(--dsp);font-weight:600;font-size:18px;color:var(--ink);margin:26px 0 9px}
.post__w p{font-size:16px;line-height:1.78;color:var(--tx);margin-bottom:15px}
.post__w ul,.post__w ol{margin:0 0 17px;padding-left:22px}
.post__w li{font-size:16px;line-height:1.75;color:var(--tx);margin-bottom:8px}
.post__w a{color:var(--mint);text-decoration:underline;text-underline-offset:2px}
.post__w a:hover{color:var(--ink)}
.post__w img{max-width:100%;height:auto;border-radius:12px;margin:12px 0}
.post__w strong{color:var(--ink);font-weight:600}
.post__back{display:inline-flex;align-items:center;gap:8px;margin-top:34px;font-size:14px;font-weight:600;color:var(--mint)}

/* ============================================================
   CAREERS
   ============================================================ */
.chero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);
  padding:clamp(126px,12vw,170px) 0 clamp(58px,7vw,88px)}
.chero__bg{position:absolute;inset:0;z-index:0;background:url('assets/gallery/supplied/team-fleet-b.webp') center/cover no-repeat;opacity:.42}
.chero__scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,var(--bg) 24%,rgba(7,35,26,.55) 72%,rgba(7,35,26,.3) 100%)}
.chero__g{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,4vw,60px);align-items:center}
.chero__h{font-family:var(--dsp);font-weight:800;font-size:clamp(34px,5vw,62px);line-height:1.04;letter-spacing:-.035em;color:#fff}
.chero__h em{font-style:normal;color:var(--mint);display:block}
.chero__p{margin-top:18px;font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.84);max-width:58ch}
.chero__a{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.cperks{display:flex;flex-direction:column;gap:14px}
.cperk{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border-radius:13px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.cperk b{display:block;font-family:var(--dsp);font-size:14.5px;color:#fff;margin-bottom:2px}
.cperk span{font-size:13px;color:rgba(255,255,255,.72);line-height:1.5}

.cfilter{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 4px}
.cfilter button{font:inherit;font-size:13.5px;font-weight:600;padding:10px 18px;min-height:44px;
  border-radius:100px;cursor:pointer;background:var(--bg-3);color:var(--tx);
  border:1px solid var(--edge);transition:background .25s,color .25s,border-color .25s}
.cfilter button:hover{border-color:rgba(var(--green-rgb),.5)}
.cfilter button[aria-pressed=true]{background:var(--green);color:#04120B;border-color:var(--green)}

.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.cbrand{display:flex;flex-direction:column;gap:11px;padding:20px 20px 22px;border-radius:16px;
  background:var(--bg-3);border:1px solid var(--edge);transition:transform .35s var(--e),border-color .3s,box-shadow .3s}
.cbrand:hover{transform:translateY(-4px);border-color:rgba(var(--green-rgb),.5);box-shadow:0 20px 44px rgba(0,0,0,.16)}
.cbrand__n{font-family:var(--dsp);font-weight:700;font-size:15.5px;line-height:1.25;color:var(--ink)}
.cbrand__k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.cbrand__m{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--tx-2)}
.cbrand__m svg{width:14px;height:14px;flex:0 0 auto;margin-top:3px;stroke:var(--mint)}
.cbrand__f{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:14px}
.cbrand__cta{flex:1 1 100%;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:100px;background:var(--green);color:#04120B;font-weight:700;font-size:13.5px;text-decoration:none}
.cbrand__cta:hover{background:var(--green-d);color:#fff}
.cbrand__qr{width:56px;height:56px;flex:0 0 auto;border-radius:8px;background:#fff;
  display:grid;place-items:center;border:1px solid var(--edge)}
.cbrand__qr img{width:100%;height:100%;display:block;border-radius:8px}
.cbrand[hidden]{display:none}
@media(max-width:1100px){.cgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.chero__g{grid-template-columns:1fr}.cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cgrid{grid-template-columns:1fr}}

/* Tap sizes on the blog and careers pages. */
.post__back{min-height:44px;padding:8px 2px}
.cbrand__k{font-size:12px}

/* Brand logo on each careers card. Lifted from the client's reference
   screenshot, so they are raster and soft; swap for the brands' own
   files when they are available. */
.cbrand__logo{height:54px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:2px}
.cbrand__logo img{max-height:54px;max-width:100%;width:auto;object-fit:contain;display:block}

/* ============================================================
   ONE LIST MARKER EVERYWHERE
   Lists were using green dots at two sizes, numbered counters and
   tick badges depending on the block. They all read as the same
   green check now. Steps keep their number, because the order is
   the point, but the badge matches the check badge in size and
   colour so the page still reads as one system.
   ============================================================ */
.vals .val__i,.step::before{--marker:19px}