/* ================= Round 5: calmer scale, new heroes, motion sections ================= */
:root{--mist:#F3F5F4;--h2:clamp(28px,2.55vw,48px);--rad:999px}

/* ---------- Less zoomed: smaller type and gentler hover ---------- */
.si{padding:clamp(18px,1.7vw,28px) 0}
.si h3{font-size:clamp(22px,1.95vw,36px)}
.si:hover h3{transform:translateX(12px)}
.si .go{width:44px;height:44px;border-radius:50%}
.sprev,.sprev.on{width:clamp(170px,12.5vw,230px)}
.oc:hover img,.gstrip figure:hover img,.post:hover .im img,.feat:hover .im img,.card:hover .im img,.row figure:hover img,.ecard:hover .im img{transform:scale(1.025)}
.oc h3{font-size:clamp(20px,1.45vw,27px)}
.ocards{gap:12px}
.oc .go{border-radius:50%}
.frow h3{font-size:clamp(30px,2.8vw,52px)}
.pk h3{font-size:clamp(28px,2.4vw,44px)}
.ecard h3{font-size:clamp(24px,1.9vw,36px)}
.stp h3{font-size:clamp(24px,2.1vw,40px)}
.feat h2{font-size:clamp(24px,2vw,38px)}
.art-head h1{font-size:clamp(30px,3vw,54px)}
.ov .tx p.first{font-size:clamp(20px,1.5vw,28px)}
.statement .big{font-size:clamp(21px,1.75vw,33px)}
.qa button{font-size:clamp(16px,1.1vw,20px);padding:22px 0}
.btn{border-radius:var(--rad)}
.chip,.stp li{border-radius:var(--rad)}

/* ---------- Events we staff: compact moving pills ---------- */
.mrows{gap:10px}
.mrow{gap:10px}
.mc{gap:12px;padding:8px 22px 8px 8px;border-radius:var(--rad);font-size:clamp(14px,.95vw,17px);letter-spacing:.04em}
.mc img{width:36px;height:36px}

/* ---------- Page hero: one frame, many compositions ---------- */
.phero{height:clamp(540px,calc(90svh - var(--hh)),760px);min-height:0;display:block}
.phero .content{bottom:0;z-index:5}
.phero .content .in{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:clamp(36px,5vh,56px)}
.phero h1{margin:16px 0 0;font-size:clamp(30px,3.1vw,58px);line-height:1.04;max-width:13em}
.phero .hsub{margin-top:16px;max-width:440px;font-size:clamp(15px,.95vw,17px);line-height:1.6;letter-spacing:.01em;color:rgba(255,255,255,.82)}
.phero .crumb{font-size:12px;letter-spacing:.12em}
.phero .shade{background:linear-gradient(90deg,rgba(17,17,17,.92) 0%,rgba(17,17,17,.6) 34%,rgba(17,17,17,0) 58%),linear-gradient(0deg,rgba(17,17,17,.75) 0%,rgba(17,17,17,0) 38%)}
.hv{position:absolute;inset:0;z-index:1;overflow:hidden}
.hv figure{margin:0;position:absolute;overflow:hidden;background:#1b1b1b}
.hv img{width:100%;height:100%;object-fit:cover;display:block}
.hv .ol{position:absolute;border:1px solid rgba(3,116,59,.75);pointer-events:none}
.hv-area{--t:clamp(36px,6vh,60px);--b:clamp(36px,6vh,60px)}

/* Full: a landscape photo, gently moving */
.hv-full .hv img{height:108%;margin-top:-4%;object-position:50% 45%}
.hv-full .shade{background:linear-gradient(90deg,rgba(17,17,17,.78) 0%,rgba(17,17,17,.35) 45%,rgba(17,17,17,.05) 75%),linear-gradient(0deg,rgba(17,17,17,.8) 0%,rgba(17,17,17,0) 45%)}
/* Panel: one tall portrait with an offset outline */
.hv-panel .pn{right:var(--padr);top:clamp(40px,7vh,64px);bottom:clamp(40px,7vh,64px);aspect-ratio:3/4}
.hv-panel .pn img{height:112%;margin-top:-6%}
.hv-panel .ol{right:calc(var(--padr) + 22px);top:calc(clamp(40px,7vh,64px) + 22px);bottom:calc(clamp(40px,7vh,64px) - 22px);aspect-ratio:3/4}
/* Duo: two portraits drifting apart */
.hv-duo .d1{right:calc(var(--padr) + clamp(150px,14vw,260px));top:clamp(34px,6vh,56px);height:64%;aspect-ratio:3/4;z-index:1}
.hv-duo .d2{right:var(--padr);bottom:clamp(34px,6vh,56px);height:58%;aspect-ratio:3/4;z-index:2;outline:8px solid #111}
/* Trio: three portraits stepping down in size */
.hv-trio .tr{position:absolute;right:var(--padr);top:clamp(36px,6vh,60px);bottom:clamp(36px,6vh,60px);display:flex;align-items:flex-start;justify-content:flex-end;gap:12px;width:60%}
.hv-trio .tr figure{position:relative;flex:none;aspect-ratio:3/4}
.hv-trio .tr figure:nth-child(1){height:46%;margin-top:4%}
.hv-trio .tr figure:nth-child(2){height:62%;margin-top:9%}
.hv-trio .tr figure:nth-child(3){height:80%}
.hv-trio .tr figure img{height:112%;margin-top:-6%}
/* Mosaic: a tall photo beside two landscapes */
.hv-mosaic .mo{position:absolute;right:var(--padr);top:clamp(36px,6vh,60px);bottom:clamp(36px,6vh,60px);display:grid;grid-template-columns:auto auto;grid-template-rows:1fr 1fr;gap:10px}
.hv-mosaic .mo figure{position:relative;height:100%}
.hv-mosaic .mo figure:first-child{grid-row:1/3;aspect-ratio:3/4}
.hv-mosaic .mo figure:not(:first-child){aspect-ratio:4/3}
/* Strip: a moving film strip across the top */
.hv-strip .hv{bottom:auto;top:clamp(28px,5vh,48px);height:56%}
.hv-strip .strk{display:flex;gap:10px;height:100%;width:max-content;animation:hvstrip 60s linear infinite}
.hv-strip .strk figure{position:relative;height:100%;aspect-ratio:3/4;flex:none}
.hv-strip .shade{background:linear-gradient(0deg,#111 0%,#111 30%,rgba(17,17,17,.4) 46%,rgba(17,17,17,0) 62%),linear-gradient(90deg,rgba(17,17,17,.6),rgba(17,17,17,0) 30%,rgba(17,17,17,0) 70%,rgba(17,17,17,.6))}
@keyframes hvstrip{to{transform:translateX(-50%)}}
/* Blinds: one photo split into vertical slats */
.hv-blinds .bl{position:absolute;right:var(--padr);top:clamp(36px,6vh,60px);bottom:clamp(36px,6vh,60px);aspect-ratio:4/5;display:flex;gap:6px}
.hv-blinds .bl.land{aspect-ratio:auto;width:min(50%,760px)}
.hv-blinds .sl{position:relative;flex:1;overflow:hidden;background:#1b1b1b}
.hv-blinds .sl img{position:absolute;top:0;height:100%;width:calc(600% + 30px);max-width:none;left:calc(var(--i) * (-100% - 6px));object-fit:cover}
/* Reveal: a slit that opens into a portrait */
.hv-reveal .rf{right:calc(var(--padr) + 3%);top:clamp(36px,6vh,60px);bottom:clamp(36px,6vh,60px);aspect-ratio:4/5}
.hv-reveal .rf img{height:110%;margin-top:-5%}
.hv-reveal .vl{position:absolute;right:calc(var(--padr) - 4px);top:clamp(36px,6vh,60px);bottom:clamp(36px,6vh,60px);width:1px;background:rgba(255,255,255,.18)}
.hv-reveal .vl i{position:absolute;inset:0;background:var(--red);transform-origin:top;transform:scaleY(0)}
.hv-reveal .cap{position:absolute;right:calc(var(--padr) - 20px);bottom:clamp(36px,6vh,60px);writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55)}
/* Arch: a portrait framed as an arch */
.hv-arch .ar{right:calc(var(--padr) + 4%);top:clamp(30px,5vh,48px);bottom:0;aspect-ratio:3/4.1;border-radius:999px 999px 0 0}
.hv-arch .ar img{height:110%;margin-top:-5%}
.hv-arch .ol{right:calc(var(--padr) + 4% - 20px);top:calc(clamp(30px,5vh,48px) + 18px);bottom:-20px;aspect-ratio:3/4.1;border-radius:999px 999px 0 0;border-color:rgba(255,255,255,.22)}
/* Curve: services in a curved 3D gallery */
.hv-curve .hv{perspective:1100px;perspective-origin:64% 42%}
.hv-curve .cv{position:absolute;left:64%;top:42%;width:0;height:0;transform-style:preserve-3d}
.hv-curve .cv figure{left:0;top:0;width:clamp(190px,15.5vw,290px);aspect-ratio:3/4;margin:0;transform-origin:50% 50%;backface-visibility:hidden;will-change:transform,opacity}
.hv-curve .cv figure span{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hv-curve .shade{background:linear-gradient(90deg,rgba(17,17,17,.95) 0%,rgba(17,17,17,.7) 26%,rgba(17,17,17,0) 46%),linear-gradient(0deg,rgba(17,17,17,.9) 0%,rgba(17,17,17,0) 34%)}
/* Depth: acts flying towards you */
.hv-depth .hv{perspective:900px;perspective-origin:64% 46%}
.hv-depth .dp{position:absolute;left:64%;top:46%;width:0;height:0;transform-style:preserve-3d}
.hv-depth .dp figure{left:0;top:0;width:clamp(180px,14vw,260px);aspect-ratio:4/5;margin:0;will-change:transform,opacity}
.hv-depth .shade{background:linear-gradient(90deg,rgba(17,17,17,.95) 0%,rgba(17,17,17,.7) 28%,rgba(17,17,17,0) 50%),linear-gradient(0deg,rgba(17,17,17,.9) 0%,rgba(17,17,17,0) 34%)}
/* Columns (previous events) keep their own photo wall */
.phero.cols .shade{background:linear-gradient(0deg,rgba(17,17,17,.92) 0%,rgba(17,17,17,.5) 40%,rgba(17,17,17,.2) 100%)}
.phero .cols{grid-template-columns:repeat(6,1fr)}

@media (max-width:900px){
  .phero{height:auto;min-height:0;display:flex;flex-direction:column}
  .phero .content{position:relative;order:2}
  .phero .content .in{padding-block:20px 44px}
  .phero .hv{position:relative;inset:auto;height:min(108vw,520px);order:1;flex:none}
  .phero .shade{background:linear-gradient(0deg,#111 0%,rgba(17,17,17,0) 30%)!important;bottom:auto;height:min(108vw,520px)}
  .hv-panel .pn,.hv-arch .ar,.hv-reveal .rf{right:50%;transform:translateX(50%);top:20px;bottom:0}
  .hv-panel .ol,.hv-arch .ol,.hv-reveal .vl,.hv-reveal .cap{display:none}
  .hv-duo .d1{right:42%;top:20px;height:70%}.hv-duo .d2{right:var(--padr);bottom:0;height:62%}
  .hv-trio .tr{left:var(--pad);right:var(--padr);width:auto;top:20px;bottom:0;justify-content:center}.hv-mosaic .mo,.hv-blinds .bl,.hv-blinds .bl.land{left:var(--pad);right:var(--padr);width:auto;aspect-ratio:auto;top:20px;bottom:0}.hv-mosaic .mo{grid-template-columns:1.1fr 1fr}.hv-mosaic .mo figure,.hv-mosaic .mo figure:first-child,.hv-mosaic .mo figure:not(:first-child){aspect-ratio:auto}
  .hv-strip .hv{top:auto;height:min(80vw,380px);margin-top:20px}
  .hv-full .hv{height:min(90vw,460px)}
  .phero.cols .hv,.phero.cols .cols{position:absolute}
  .phero.cols{min-height:620px;justify-content:flex-end}
  .phero.cols .shade{height:auto;bottom:0}
  .hv-curve .hv{perspective-origin:50% 50%}.hv-curve .cv{left:50%;top:50%}
  .hv-depth .hv{perspective-origin:50% 50%}.hv-depth .dp{left:50%;top:50%}
}

/* ---------- How it works: horizontal story ---------- */
.flow{position:relative;background:var(--mist);color:var(--black);overflow:hidden}
.flow-pin{min-height:calc(100svh - var(--hh));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(48px,6vh,80px)}
.flow-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.flow-head .l{display:flex;flex-direction:column;gap:20px}
.flow-head .r{display:flex;flex-direction:column;align-items:flex-end;gap:18px;max-width:420px;text-align:right}
.flow-head .r p{color:var(--muted);line-height:1.6}
.flow-count{font-size:13px;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--muted)}
.flow-count b{font-weight:500;color:var(--black)}
.flow-vp{margin-top:clamp(28px,4.5vh,56px);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.flow-vp::-webkit-scrollbar{display:none}
.flow.pinned .flow-vp{overflow:visible}
.flow-track{display:flex;gap:clamp(20px,2.4vw,44px);width:max-content;padding-left:var(--pad);padding-right:var(--padr)}
.fs{flex:none;scroll-snap-align:start;width:clamp(520px,46vw,780px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,2.2vw,40px);align-items:end;background:#fff;padding:clamp(14px,1.2vw,20px);transition:box-shadow .8s var(--out)}
.fs-img{position:relative;height:min(48vh,460px);aspect-ratio:4/5;overflow:hidden;background:var(--grey)}
.fs-img img{position:absolute;top:0;left:-8%;width:116%;height:100%;object-fit:cover;will-change:transform}
.fs-tx{display:flex;flex-direction:column;gap:16px;padding:0 clamp(6px,1vw,16px) clamp(6px,1vw,14px) 0}
.fs-n{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.16em;color:var(--red)}
.fs-n i{width:36px;height:1px;background:var(--red)}
.fs h3{font-weight:300;font-size:clamp(22px,1.8vw,32px);line-height:1.1;text-transform:uppercase}
.fs p{color:var(--muted);line-height:1.65;font-size:15px}
.fs ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fs li{font-size:12px;letter-spacing:.02em;padding:7px 14px;border:1px solid rgba(17,17,17,.16);border-radius:var(--rad)}
.fs.end{width:clamp(360px,30vw,480px);background:var(--black);color:#fff;grid-template-columns:1fr;align-content:end;align-items:start;padding:clamp(28px,2.6vw,44px);min-height:calc(min(48vh,460px) + 2 * clamp(14px,1.2vw,20px))}
.fs.end h3{font-size:clamp(24px,2vw,36px)}
.fs.end p{color:var(--on-dark)}
.fs.end .btn{margin-top:12px;justify-self:start}
.flow-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(24px,4vh,48px)}
.flow-bar span{display:flex;flex-direction:column;gap:12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);transition:color .5s}
.flow-bar span i{height:2px;background:rgba(17,17,17,.12);position:relative;overflow:hidden}
.flow-bar span i b{position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left}
.flow-bar span.on{color:var(--black)}
@media (max-width:900px){
  .flow-pin{min-height:0}
  .flow-head .r{align-items:flex-start;text-align:left}
  .fs{width:84vw;grid-template-columns:1fr;align-items:start}
  .fs-img{height:auto;width:100%}
  .fs.end{width:70vw;min-height:0}
  .flow-bar{display:none}
}

/* ---------- Roles: sticky photo, scrolling list ---------- */
.roles-sec{background:var(--black);color:#fff;padding-block:var(--sec);position:relative}
.roles-sec .h2,.roles-sec .eyebrow{color:#fff}
.roles-sec .shead>p{color:var(--on-dark)}
.roles{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,120px);align-items:start}
.roles .vis{position:sticky;top:calc(var(--hh) + 40px);aspect-ratio:4/5;max-height:calc(100svh - var(--hh) - 80px);overflow:hidden;background:#1b1b1b}
.roles .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease)}
.roles .vis img.on{clip-path:inset(0 0 0 0);z-index:2}
.roles .vis img.past{clip-path:inset(0 0 0 0);z-index:1}
.roles .vis .cnt{position:absolute;z-index:3;left:0;bottom:0;background:var(--black);padding:12px 18px;font-size:12px;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.roles .vis .cnt b{font-weight:500;color:#fff}
.rl{border-bottom:1px solid rgba(255,255,255,.14)}
.ri{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:clamp(28px,3.2vw,52px) 0;border-top:1px solid rgba(255,255,255,.14);opacity:.32;transition:opacity .7s var(--out)}
.ri::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.ri.on{opacity:1}
.ri.on::before{transform:scaleX(1)}
.ri .n{font-size:12px;letter-spacing:.16em;color:var(--red);padding-top:8px}
.ri h3{font-weight:300;font-size:clamp(22px,1.9vw,34px);line-height:1.12;text-transform:uppercase}
.ri p{margin-top:12px;color:var(--on-dark);line-height:1.65;max-width:460px}
.ri .th{display:none}
@media (max-width:900px){
  .roles{grid-template-columns:1fr}
  .roles .vis{display:none}
  .ri{opacity:1;grid-template-columns:40px minmax(0,1fr)}
  .ri .th{display:block;grid-column:2;width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:18px}
}

/* ---------- Horizontal gallery ---------- */
.hgal{margin-top:clamp(40px,4.5vw,72px);overflow:hidden}
.hg-track{display:flex;align-items:center;gap:14px;width:max-content;padding-left:var(--pad);will-change:transform}
.hg-track figure{margin:0;flex:none;height:clamp(280px,32vw,480px);overflow:hidden;background:var(--grey);position:relative}
.hg-track figure:nth-child(3n+2){height:clamp(220px,25vw,380px)}
.hg-track figure:nth-child(3n){height:clamp(250px,28vw,420px)}
.hg-track img{height:100%;width:auto;max-width:none;transition:transform 1.2s var(--out)}
.hg-track figure:hover img{transform:scale(1.025)}
@media (max-width:900px){.hgal{overflow-x:auto;scrollbar-width:none}.hgal::-webkit-scrollbar{display:none}.hg-track figure,.hg-track figure:nth-child(n){height:300px}}

/* ---------- Quote with floating portraits ---------- */
.qx{position:relative;background:#fff;padding-block:clamp(100px,10vw,180px);overflow:hidden}
.qx .in{position:relative;z-index:2}
.qx .qband blockquote{font-size:clamp(20px,1.65vw,30px);max-width:860px}
.qx .pp{position:absolute;z-index:1;margin:0;overflow:hidden;aspect-ratio:3/4;width:clamp(120px,11vw,200px);background:var(--grey)}
.qx .pp img{width:100%;height:116%;object-fit:cover;margin-top:-8%}
.qx .p1{left:clamp(16px,5vw,96px);top:14%}
.qx .p2{right:clamp(16px,5vw,96px);bottom:12%;width:clamp(110px,9.5vw,170px)}
@media (max-width:1100px){.qx .pp{display:none}}

/* ---------- Overview: facts with drawn lines ---------- */
.ov .facts{border-top:0;position:relative}
.ov .facts::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--green);transform-origin:left;transform:scaleX(var(--fl,1))}

/* ---------- Entertainment: stacked category cards ---------- */
.cstack{display:flex;flex-direction:column;gap:clamp(28px,4vh,56px)}
.ccard{position:sticky;top:calc(var(--hh) + 28px + var(--i) * 16px);display:grid;grid-template-columns:auto minmax(0,1fr);height:min(calc(100svh - var(--hh) - 120px),600px);background:#fff;color:var(--black);border:1px solid rgba(17,17,17,.08);overflow:hidden;transform-origin:50% 0;will-change:transform}
.ccard.dk{background:var(--black);color:#fff;border-color:var(--black)}
.ccard .im{display:block;height:100%;aspect-ratio:4/5;overflow:hidden;position:relative}
.ccard .im img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform}
.ccard .tx{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(28px,4vw,72px)}
.ccard .n{font-size:12px;letter-spacing:.16em;color:var(--red)}
.ccard h3{font-weight:300;font-size:clamp(30px,2.8vw,52px);line-height:1;text-transform:uppercase}
.ccard p{color:var(--muted);line-height:1.65;max-width:460px}
.ccard.dk p{color:var(--on-dark)}
.ccard ul{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:520px}
.ccard li{font-size:13px;padding:7px 14px;border:1px solid rgba(17,17,17,.16);border-radius:var(--rad)}
.ccard.dk li{border-color:rgba(255,255,255,.22)}
.ccard .btn{align-self:flex-start}
.ccard.dk .btn{color:#fff;border-color:rgba(255,255,255,.75)}
@media (max-width:900px){.ccard{position:relative;top:auto;height:auto;grid-template-columns:1fr}.ccard .im{height:auto;width:100%;aspect-ratio:4/3}}

/* ---------- Tilt cards ---------- */
.ocards{perspective:1200px}
.oc{transform-style:preserve-3d;transition:transform .7s var(--out)}

/* ---------- About: intro ---------- */
.intro{display:grid;grid-template-columns:1fr 2.4fr;gap:clamp(32px,5vw,96px)}
.intro .big{font-weight:300;font-size:clamp(21px,1.75vw,33px);line-height:1.42;letter-spacing:-.003em}
.intro .big em{font-style:normal;color:var(--green)}
.intro .more{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px);color:var(--muted);line-height:1.75}
.intro .more b{font-weight:500;color:var(--black)}
.intro .since{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.intro .since i{width:28px;height:1px;background:var(--green)}
@media (max-width:900px){.intro,.intro .more{grid-template-columns:1fr}}

/* ---------- About: our standard ---------- */
.stdc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,32px)}
.sc3{display:flex;flex-direction:column;gap:20px}
.sc3 .im{aspect-ratio:4/5;overflow:hidden;background:var(--grey);position:relative}
.sc3 .im img{width:100%;height:112%;object-fit:cover;margin-top:-6%;will-change:transform}
.sc3 .tx{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--green);padding-top:20px}
.sc3 .n{font-size:12px;letter-spacing:.16em;color:var(--red)}
.sc3 h3{font-weight:300;font-size:clamp(20px,1.6vw,28px);line-height:1.15;text-transform:uppercase}
.sc3 p{color:var(--muted);line-height:1.65}
.kband{background:var(--mist);padding-block:clamp(56px,5vw,88px)}
.kband .kfacts{gap:0}
.kband .kf{border-top:0;padding:0 clamp(20px,2.4vw,40px);border-left:1px solid rgba(17,17,17,.12)}
.kband .kf:first-child{border-left:0;padding-left:0}
.kband .kf h3{font-size:clamp(20px,1.5vw,28px)}
@media (max-width:1000px){.stdc{grid-template-columns:1fr}.sc3{display:grid;grid-template-columns:120px 1fr;align-items:start}.sc3 .im{aspect-ratio:3/4}.kband .kf{border-left:0;padding:0}}

/* ---------- About: our people ---------- */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,120px);align-items:center}
.pcol{position:relative;aspect-ratio:1/1.08}
.pcol figure{position:absolute;margin:0;overflow:hidden;background:var(--grey)}
.pcol figure img{width:100%;height:112%;object-fit:cover;margin-top:-6%}
.pcol .a{left:0;top:4%;width:56%;aspect-ratio:3/4;z-index:2}
.pcol .b{right:0;top:0;width:38%;aspect-ratio:3/4;z-index:1}
.pcol .c{right:6%;bottom:0;width:46%;aspect-ratio:4/3.4;z-index:3;outline:10px solid #fff}
.people .tx{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.people .tx>p{color:var(--muted);font-size:clamp(16px,1.04vw,18px);line-height:1.75}
.preq{width:100%;counter-reset:pr}
.preq div{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);counter-increment:pr;transition:padding .6s var(--out)}
.preq div:first-child{border-top:1px solid var(--green)}
.preq div::before{content:"0" counter(pr);font-size:12px;letter-spacing:.14em;color:var(--red)}
.preq span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.preq b{font-weight:400;text-align:right}
.preq div:hover{padding-left:8px}
.faces{margin-top:clamp(64px,7vw,120px);overflow:hidden}
.faces .ftrack{display:flex;gap:12px;width:max-content;animation:hvstrip 70s linear infinite}
.faces figure{margin:0;flex:none;height:clamp(180px,16vw,260px);aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 0 0;background:var(--grey)}
.faces figure:nth-child(even){border-radius:0 0 999px 999px}
.faces img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.people{grid-template-columns:1fr}}

/* ---------- CTA: silk ribbon (three.js) ---------- */
.ctab canvas.silk{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.ctab .collage .badge{display:none}

@media (prefers-reduced-motion:reduce){.hv-strip .strk,.faces .ftrack{animation:none}}

/* ================= Round 6 ================= */
:root{--h2:clamp(26px,2.3vw,44px)}
.phero h1{font-size:clamp(28px,2.85vw,52px)}
.intro .big,.statement .big{font-size:clamp(20px,1.55vw,29px)}
.ov .tx p.first{font-size:clamp(19px,1.35vw,24px)}
.qx .qband blockquote{font-size:clamp(18px,1.45vw,26px)}
.ri h3{font-size:clamp(20px,1.65vw,30px)}
.ccard h3{font-size:clamp(26px,2.3vw,42px)}
.si h3{font-size:clamp(20px,1.75vw,32px)}
.pk h3{font-size:clamp(26px,2.1vw,38px)}
.mc{font-size:clamp(13px,.9vw,16px)}
.sec.tight{padding-top:calc(var(--sec) * .8)}
/* Faces stay in frame: no over-scaled crops, crops favour the top of the photo */
.hv figure img,.pcol figure img,.sc3 .im img,.qx .pp img,.ccard .im img,.fnd .pic figure img{height:100%;margin-top:0;top:0}
.hv figure img,.roles .vis img,.fs-img img,.oc img,.sc3 .im img,.pcol img,.ccard .im img,.qx .pp img,.tc .ph img,.post .im img,.ovf img,.faces img,.ri .th{object-position:50% 22%}
.faces figure,.faces figure:nth-child(even){border-radius:0}
/* Edge: portrait runs to the right edge */
.hv-edge .eg{right:0;top:0;bottom:0;width:min(44%,640px)}
.hv-edge .shade{background:linear-gradient(90deg,#111 0%,#111 52%,rgba(17,17,17,.6) 60%,rgba(17,17,17,0) 74%),linear-gradient(0deg,rgba(17,17,17,.6) 0%,rgba(17,17,17,0) 30%)}
@media (max-width:900px){.hv-edge .eg{width:100%}}
/* Previous events hero: five columns fill the width */
.phero .cols{grid-template-columns:repeat(5,1fr)}
/* Services hero: bigger, lower, no labels */
.hv-curve .hv{perspective:1600px;perspective-origin:58% 50%}
.hv-curve .cv{left:58%;top:50%}
.hv-curve .cv figure{width:clamp(210px,16.5vw,310px)}
.hv-curve .cv figure span{display:none}
.hv-curve .shade{background:linear-gradient(90deg,rgba(17,17,17,.96) 0%,rgba(17,17,17,.75) 24%,rgba(17,17,17,0) 44%),linear-gradient(0deg,rgba(17,17,17,.92) 0%,rgba(17,17,17,.35) 24%,rgba(17,17,17,0) 40%)}
/* How it works cards: photo fills the card edge to edge */
.fs{padding:0;gap:0;align-items:stretch;grid-template-columns:auto minmax(0,1fr)}
.fs-img{height:min(50vh,470px)}
.fs-img img{left:0;width:100%;height:100%}
.fs-tx{justify-content:center;padding:clamp(24px,2.4vw,44px)}
.fs-n{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.fs h3{font-size:clamp(20px,1.6vw,28px)}
.fs.end{min-height:min(50vh,470px)}
.flow-head .r{justify-content:flex-end}
/* Recent bookings: pinned, unhurried */
.hgs{overflow:hidden}
.hgs .hgal{margin-top:clamp(32px,4vh,56px)}
.hgs .hg-track figure{height:clamp(260px,44vh,440px)}
.hgs .hg-track figure:nth-child(3n+2){height:clamp(220px,36vh,360px)}
.hgs .hg-track figure:nth-child(3n){height:clamp(240px,40vh,400px)}
/* Image band between sections */
.iband{position:relative;height:clamp(320px,58vh,600px);overflow:hidden;background:#111;color:#fff;display:flex;align-items:flex-end}
.ib-img{position:absolute;inset:0}
.ib-img img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;object-position:50% 35%;will-change:transform}
.iband::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,17,17,.75) 0%,rgba(17,17,17,.1) 50%,rgba(17,17,17,.2) 100%)}
.iband .wrap{position:relative;z-index:2;width:100%}
.ib-t{padding-bottom:clamp(32px,5vh,56px);font-weight:300;font-size:clamp(20px,2vw,34px);line-height:1.15;text-transform:uppercase;max-width:14em}
/* Overview: two floating photos */
.ovs{position:relative;overflow:hidden}
.ovf{position:absolute;margin:0;overflow:hidden;aspect-ratio:3/4;width:clamp(80px,7vw,120px);z-index:0}
.ovf img{width:100%;height:100%;object-fit:cover}
.ovf.f1{left:clamp(12px,1.6vw,28px);top:16%}
.ovf.f2{right:clamp(12px,1.6vw,28px);bottom:14%;width:clamp(70px,6vw,104px)}
.ovs .in{position:relative;z-index:1}
@media (max-width:1240px){.ovf{display:none}}
/* About: facts on white with hairlines; founder portrait slot */
.kband{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(48px,4.5vw,76px)}
.fnd .pic.kb figure{background:#1c1c1c}
.kbph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;color:var(--on-dark)}
.kbph span{width:120px;height:120px;border-radius:50%;border:1px solid var(--green);display:grid;place-items:center;font-weight:300;font-size:36px;letter-spacing:.06em;color:#fff}
.kbph small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.7}
/* Contact page: compact */
.contactp .phero{height:clamp(400px,calc(58svh - var(--hh)),540px)}
.contactp .cgrid{gap:clamp(32px,4vw,72px)}
.contactp .cdet div{padding:14px 0;gap:4px}
.contactp .cdet b{font-size:clamp(17px,1.2vw,21px)}
.contactp .fcard{padding:clamp(22px,2vw,36px);gap:18px}
.contactp form.f{gap:18px 28px}
.contactp .sec{padding-block:clamp(56px,5.5vw,96px)}

/* ================= Round 7 ================= */
/* Events we staff: green spotlight follows the cursor; pills stay quiet */
.marq .spot{z-index:1}
.marq.lit .spot{opacity:1}
.mc:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.6);color:#fff}
/* Full-width hero image with a gradient on the left (packages, contact) */
.hv-full .hv img{height:100%;margin-top:0;object-position:50% 30%}
.hv-full .shade{background:linear-gradient(90deg,rgba(17,17,17,.92) 0%,rgba(17,17,17,.7) 30%,rgba(17,17,17,.15) 62%,rgba(17,17,17,0) 80%),linear-gradient(0deg,rgba(17,17,17,.6) 0%,rgba(17,17,17,0) 35%)}
/* Strip: photos run the full height behind the title */
.hv-strip .hv{top:0;height:100%}
.hv-strip .shade{background:linear-gradient(90deg,rgba(17,17,17,.95) 0%,rgba(17,17,17,.75) 32%,rgba(17,17,17,.1) 62%,rgba(17,17,17,0) 80%),linear-gradient(0deg,rgba(17,17,17,.7) 0%,rgba(17,17,17,0) 35%)!important}
@media (max-width:900px){.hv-strip .hv{height:min(80vw,380px);margin-top:0}}
/* Entertainment: bigger acts, spread across the right */
.hv-depth .hv{perspective:1000px;perspective-origin:62% 48%}
.hv-depth .dp{left:62%;top:48%}
.hv-depth .dp figure{width:clamp(190px,15vw,280px)}
/* Recent bookings: drag or use the arrows */
.hgs .hgal{overflow-x:auto;scrollbar-width:none;cursor:grab;scroll-behavior:smooth;overscroll-behavior-x:contain}
.hgs .hgal::-webkit-scrollbar{display:none}
.hgs .hgal.drag{cursor:grabbing;scroll-behavior:auto}
.hgs .hgal.drag img{pointer-events:none}
.hgs .hg-track{padding-right:var(--padr)}
.hg-ctl{display:flex;align-items:center;gap:20px;margin-top:clamp(24px,3vw,40px)}
.hg-b{all:unset;cursor:pointer;width:46px;height:46px;border-radius:50%;border:1px solid rgba(17,17,17,.25);display:grid;place-items:center;font-size:16px;transition:background .4s,border-color .4s,color .4s}
.hg-b:hover{background:var(--green);border-color:var(--green);color:#fff}
.hg-b:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.hg-bar{flex:1;max-width:320px;height:2px;background:rgba(17,17,17,.12);position:relative;overflow:hidden}
.hg-bar i{position:absolute;left:0;top:0;bottom:0;width:30%;background:var(--green);transition:transform .3s var(--out)}
/* Call-to-action banner */
.iband.cta{height:auto;min-height:clamp(320px,46vh,460px)}
.iband.cta::after{background:linear-gradient(90deg,rgba(17,17,17,.88) 0%,rgba(17,17,17,.6) 45%,rgba(17,17,17,.25) 100%)}
.ib-in{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-block:clamp(56px,7vh,88px)}
.iband.cta .eyebrow,.iband.cta .h2{color:#fff}
.iband.cta .h2{margin-top:18px}
/* About: intro with photos */
.aint-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,120px);align-items:center}
.aint .tx{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.aint .big{font-weight:300;font-size:clamp(22px,1.9vw,34px);line-height:1.35}
.aint .big em{font-style:normal;color:var(--green)}
.aint .sm{color:var(--muted);line-height:1.75;max-width:520px}
.aint .sm b{font-weight:500;color:var(--black)}
.aint-k{display:flex;gap:clamp(24px,3vw,56px);padding-top:22px;border-top:1px solid var(--green);width:100%}
.aint-k span{display:flex;flex-direction:column;font-weight:300;font-size:clamp(24px,2vw,36px);line-height:1}
.aint-k b{font-weight:300;display:inline}
.aint-k span{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 2px;color:var(--black)}
.aint-k i{flex-basis:100%;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.aint-pics{position:relative;aspect-ratio:1/1.05}
.aint-pics figure{position:absolute;margin:0;overflow:hidden;background:var(--grey)}
.aint-pics img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.aint-pics .p1{right:0;top:0;width:72%;aspect-ratio:3/4}
.aint-pics .p2{left:0;bottom:0;width:42%;aspect-ratio:3/4;outline:10px solid #fff;z-index:2}
.aint-pics .tag{position:absolute;z-index:3;right:0;bottom:6%;background:var(--black);color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px 18px}
@media (max-width:900px){.aint-g{grid-template-columns:1fr}}
/* About: our standard as expanding panels */
.stdp{background:var(--black);color:#fff;padding-block:var(--sec)}
.stdp .eyebrow,.stdp .h2{color:#fff}
.stdp .shead>p{color:var(--on-dark)}
.panels{display:flex;gap:12px;height:clamp(420px,66vh,620px)}
.pnl{position:relative;flex:1;min-width:0;overflow:hidden;cursor:pointer;transition:flex 1s var(--ease)}
.pnl.on{flex:2.3}
.pnl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(.35) brightness(.75);transition:filter 1s var(--out),transform 1.6s var(--out)}
.pnl.on img{filter:none}
.pnl::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,17,17,.85) 0%,rgba(17,17,17,0) 55%)}
.pt2{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(20px,2.2vw,36px);display:flex;flex-direction:column;gap:10px}
.pt2 .n{font-size:12px;letter-spacing:.16em;color:var(--red)}
.pt2 h3{font-weight:300;font-size:clamp(18px,1.5vw,26px);line-height:1.15;text-transform:uppercase;white-space:nowrap}
.pt2 p{color:rgba(255,255,255,.8);line-height:1.6;max-width:380px;max-height:0;opacity:0;overflow:hidden;transition:max-height .9s var(--out),opacity .6s}
.pnl.on .pt2 p{max-height:120px;opacity:1}
@media (max-width:900px){.panels{flex-direction:column;height:auto}.pnl,.pnl.on{flex:none;height:360px}.pt2 p{max-height:none;opacity:1}.pt2 h3{white-space:normal}}
/* About: moving facts line */
.ticker{background:var(--mist);overflow:hidden;padding-block:clamp(22px,2.6vw,36px);border-block:1px solid rgba(17,17,17,.06)}
.tk-track{display:flex;align-items:center;gap:clamp(28px,3vw,56px);width:max-content;animation:hvstrip 40s linear infinite}
.tk-track span{font-weight:300;font-size:clamp(17px,1.4vw,24px);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.tk-track i{width:8px;height:8px;background:var(--green);transform:rotate(45deg);flex:none}
/* About: our people with moving photo columns */
.ppl{overflow:hidden}
.ppl-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px);align-items:center}
.ppl .tx{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.ppl .tx>p{color:var(--muted);line-height:1.75}
.ppl-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:clamp(520px,80vh,760px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%)}
.pc{display:flex;flex-direction:column;gap:14px;will-change:transform}
.pc figure{margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--grey)}
.pc img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
@media (max-width:900px){.ppl-g{grid-template-columns:1fr}.ppl-cols{height:480px}}
/* Entertainment hero: floating acts at different depths */
.hv-float .fl{position:absolute;margin:0;overflow:hidden;background:#1b1b1b;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);will-change:transform}
.hv-float .fl img{object-position:50% 25%}
.hv-float .f1{right:calc(var(--padr) + 20vw);top:8%;width:15vw;aspect-ratio:4/5}
.hv-float .f2{right:var(--padr);top:5%;width:18.5vw;aspect-ratio:3/4}
.hv-float .f3{right:calc(var(--padr) + 35.5vw);top:40%;width:11vw;aspect-ratio:4/5}
.hv-float .f4{right:calc(var(--padr) + 8vw);top:56%;width:12.5vw;aspect-ratio:4/5}
.hv-float .f5{right:calc(var(--padr) + 22vw);top:54%;width:10vw;aspect-ratio:4/5}
.hv-float .shade{background:linear-gradient(90deg,rgba(17,17,17,.95) 0%,rgba(17,17,17,.6) 30%,rgba(17,17,17,0) 48%),linear-gradient(0deg,rgba(17,17,17,.85) 0%,rgba(17,17,17,0) 30%)}
@media (max-width:900px){.hv-float .f1{right:46%;top:6%;width:34vw}.hv-float .f2{right:var(--padr);top:2%;width:40vw}.hv-float .f3{display:none}.hv-float .f4{right:12%;top:52%;width:30vw}.hv-float .f5{right:52%;top:50%;width:28vw}}

/* ================= Round 8 ================= */
/* Section headings match the hero heading size */
:root{--h2:clamp(28px,2.85vw,52px)}
/* Grey bands always visible, whatever the section type */
.qx.grey,.brands.grey,.sec.grey,.ppl.grey{background:var(--grey)}
.brands.grey{padding-block:var(--sec)}
/* Events we staff: keeps moving under the spotlight, photo comes into colour */
.mrows:hover .mrow{animation-play-state:running}
.mc img{filter:grayscale(1);transition:filter .5s}
.mc:hover img{filter:none}
/* Packages: three columns as in the reference */
.pk2s{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.2vw,22px);align-items:stretch}
.pk2{position:relative;display:flex;flex-direction:column;gap:16px;padding:clamp(26px,2.4vw,44px);background:#fff;border:1px solid rgba(17,17,17,.14);transition:transform .8s var(--out),box-shadow .8s var(--out)}
.pk2:hover{transform:translateY(-6px);box-shadow:0 40px 70px -44px rgba(0,0,0,.35)}
.pk2 .n{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.pk2 .pop{position:absolute;top:clamp(26px,2.4vw,44px);right:clamp(26px,2.4vw,44px);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.pk2 h3{font-weight:300;font-size:clamp(22px,1.75vw,32px);line-height:1.15;margin-top:6px}
.pk2 .d{color:var(--muted);line-height:1.6;font-size:15px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pk2 ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;flex:1}
.pk2 li{position:relative;padding-left:26px;font-size:15px;line-height:1.45}
.pk2 li::before{content:"";position:absolute;left:2px;top:.3em;width:6px;height:11px;border:solid var(--red);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.pk2 .pr{display:flex;flex-direction:column;gap:6px;margin-top:28px}
.pk2 .pr span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pk2 .pr b{font-weight:300;font-size:clamp(28px,2.3vw,42px);line-height:1}
.pk2 .pr small{font-size:13px;color:var(--soft)}
.pk2 .btn{align-self:flex-start;margin-top:10px}
.pk2.hl{background:var(--black);color:#fff;border-color:var(--black)}
.pk2.hl .n,.pk2.hl .pr span,.pk2.hl .pr small{color:var(--on-dark)}
.pk2.hl .d{color:var(--on-dark);border-color:rgba(255,255,255,.16)}
.pk2-note{margin-top:clamp(28px,3vw,44px);padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
@media (max-width:1000px){.pk2s{grid-template-columns:1fr}}
/* Service and entertainment heroes: photo on the right melting into the black */
.hv-edge .eg{width:min(58%,860px);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 14%,rgba(0,0,0,.8) 30%,#000 46%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 14%,rgba(0,0,0,.8) 30%,#000 46%)}
.hv-edge .shade{background:linear-gradient(90deg,#111 0%,#111 38%,rgba(17,17,17,0) 60%),linear-gradient(0deg,rgba(17,17,17,.7) 0%,rgba(17,17,17,0) 30%)}
@media (max-width:900px){.hv-edge .eg{width:100%;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 35%);mask-image:linear-gradient(0deg,transparent 0%,#000 35%)}}
/* Contact page */
.cgrid2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,1.6vw,28px);align-items:stretch}
.cinfo{position:relative;overflow:hidden;background:var(--black);color:#fff;display:flex}
.ci-bg{position:absolute;inset:0}
.ci-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:.28}
.cinfo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.55),rgba(17,17,17,.92))}
.ci-tx{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;padding:clamp(28px,3vw,52px);width:100%}
.ci-tx .eyebrow,.ci-tx .h2{color:#fff}
.ci-tx>p{color:var(--on-dark);line-height:1.65;max-width:440px}
.cdet2{display:flex;flex-direction:column;margin-top:auto;border-top:1px solid rgba(255,255,255,.2)}
.cdet2>*{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.cdet2 span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.cdet2 b{font-weight:300;font-size:clamp(16px,1.15vw,20px)}
.cdet2 a:hover b{color:#fff;text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:5px}
.cgrid2 .fcard{width:auto;background:#fff;padding:clamp(26px,2.6vw,48px);margin:0}
.cn3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,32px)}
.cn{display:flex;flex-direction:column;gap:12px}
.cn .im{aspect-ratio:4/3;overflow:hidden;background:var(--grey);margin-bottom:8px}
.cn .im img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform 1.2s var(--out)}
.cn:hover .im img{transform:scale(1.03)}
.cn .n{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.cn h3{font-weight:300;font-size:clamp(19px,1.45vw,26px);text-transform:uppercase;line-height:1.15}
.cn p{color:var(--muted);line-height:1.65}
@media (max-width:900px){.cgrid2,.cn3{grid-template-columns:1fr}}

/* ================= Round 9: photos shown in full ================= */
/* Hero figures take each photo's own shape */
.hv figure[style*="--ar"]{aspect-ratio:var(--ar)!important}
.hv figure img{object-fit:cover}
.phero .col img{aspect-ratio:auto;height:auto}
/* Wide hero / CTA: soft full-width fill of the same photo, the photo itself shown whole on the right */
.wb{position:absolute;inset:-60px;overflow:hidden}
.wb img{width:100%;height:100%;object-fit:cover;filter:blur(34px) brightness(.5) saturate(1.1);transform:scale(1.1)}
.wf{position:absolute!important;right:0;top:0;bottom:0;height:100%;margin:0;overflow:hidden;background:none!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%)}
.wf img{width:100%;height:100%;object-fit:contain!important}
.hv-wide .shade{background:linear-gradient(90deg,rgba(17,17,17,.92) 0%,rgba(17,17,17,.7) 32%,rgba(17,17,17,.2) 56%,rgba(17,17,17,0) 72%),linear-gradient(0deg,rgba(17,17,17,.6) 0%,rgba(17,17,17,0) 32%)}
.contactp .hv-wide .wf,.packages .hv-wide .wf{right:var(--padr)}
@media (max-width:900px){.hv-wide .wf{right:50%;transform:translateX(50%);-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 25%);mask-image:linear-gradient(0deg,transparent 0%,#000 25%)}}
.ib-img .wf{right:0}
.iband.cta::after{background:linear-gradient(90deg,rgba(17,17,17,.9) 0%,rgba(17,17,17,.65) 40%,rgba(17,17,17,.1) 75%)}
/* Cards and galleries: natural photo height */
.oc{aspect-ratio:auto;display:block}
.oc img{position:relative;height:auto}
.oc .t{position:absolute;left:0;right:0;bottom:0}
.post .im,.feat .im,.art-img,.cn .im{aspect-ratio:auto}
.post .im img,.feat .im img,.art-img img,.cn .im img{height:auto}
.pc figure{aspect-ratio:auto}
.pc img{height:auto}
.qx .pp{aspect-ratio:auto}
.qx .pp img{height:auto;margin-top:0}
.roles .vis{background:transparent}
.roles .vis img{object-fit:contain;object-position:50% 50%}
.fs-img{aspect-ratio:var(--ar,3/4)}
.ri .th{aspect-ratio:auto;height:auto}
.tc{grid-template-columns:auto minmax(0,1fr)}
.tc .ph{height:100%;aspect-ratio:3/4}
.tc .ph img{object-fit:cover}
.ccard .im img{top:0;height:100%}
.aint-pics figure{aspect-ratio:auto!important}
.aint-pics img{height:auto}
.aint-pics .p1{width:60%}
.aint-pics .p2{width:40%}
@media (max-width:900px){.tc{grid-template-columns:1fr}.tc .ph{height:auto;aspect-ratio:auto}.tc .ph img{position:relative;height:auto}}
/* About: our standard as three full photos */
.std3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,32px);align-items:start}
.s3{margin:0;display:flex;flex-direction:column;gap:20px}
.s3 .im{overflow:hidden;background:#1b1b1b}
.s3 .im img{width:100%;height:auto;transition:transform 1.4s var(--out)}
.s3:hover .im img{transform:scale(1.02)}
.s3 figcaption{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--green);padding-top:18px}
.s3 .n{font-size:12px;letter-spacing:.16em;color:var(--red)}
.s3 h3{font-weight:300;font-size:clamp(18px,1.45vw,26px);text-transform:uppercase}
.s3 p{color:var(--on-dark);line-height:1.65}
@media (max-width:900px){.std3{grid-template-columns:1fr}}
/* Add-on label above the heading */
.ri.lab{grid-template-columns:1fr}
.ri .lbl{display:block;margin-bottom:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
/* Packages: price on request */
.pk2 .pr b{font-size:clamp(20px,1.6vw,28px)}
/* Contact: one joined card, equal heights */
.cgrid2{gap:0;box-shadow:0 40px 80px -50px rgba(0,0,0,.35)}
.cgrid2 .cinfo,.cgrid2 .fcard{height:100%}
.cgrid2 .fcard{border:0}

/* ================= Round 10 ================= */
/* About: our people photos drift continuously, two columns */
.ppl-cols{height:clamp(560px,82vh,780px);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 6%,#000 94%,transparent 100%)}
.pc{animation:pcUp 55s linear infinite}
.pc.c2{animation:pcDown 55s linear infinite}
.ppl-cols:hover .pc{animation-play-state:paused}
@keyframes pcUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}
@keyframes pcDown{from{transform:translateY(calc(-50% - 7px))}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.pc{animation:none}}
/* How it works cards: text column never squeezed */
.fs{grid-template-columns:auto minmax(260px,1fr)}
/* CTA band: contact details match the body text */
.ctab .quick b{font-size:16px;font-weight:400;line-height:1.6}
.ctab .quick span{font-size:11px}
/* Service banners: relevant photos edge to edge, each shown whole */
.hv-pano .hv{display:flex;justify-content:flex-end;gap:4px;background:#111}
.hv-pano .hv figure{position:relative;flex:none;height:100%;margin:0}
.hv-pano .shade{background:linear-gradient(90deg,rgba(17,17,17,.95) 0%,rgba(17,17,17,.78) 30%,rgba(17,17,17,.2) 55%,rgba(17,17,17,0) 70%),linear-gradient(0deg,rgba(17,17,17,.65) 0%,rgba(17,17,17,0) 32%)}
.hv-full .hv img{object-position:50% 35%}
@media (max-width:900px){.hv-pano .hv{justify-content:flex-start;overflow:hidden}}

/* Recent bookings: continuous carousel, centred slim controls */
.hgs .hgal.auto{overflow:hidden;cursor:grab;touch-action:pan-y}
.hgs .hgal.auto .hg-track{padding-left:0;padding-right:0;will-change:transform}
.hgs .hgal.drag{cursor:grabbing}
.hg-ctl{justify-content:center;gap:18px;margin-top:clamp(28px,3vw,44px)}
.hg-b{width:38px;height:38px;font-size:13px;border-color:rgba(17,17,17,.18);color:var(--black)}
.hg-bar{flex:0 0 clamp(140px,14vw,220px);height:1px;background:rgba(17,17,17,.14)}
.hg-bar i{width:30%;height:1px;background:var(--black)}
/* CTA banner: a real full-width photo, sized to the panorama so people are not cut */
.wf{aspect-ratio:var(--ar)}
.iband.cta{min-height:0;height:clamp(380px,41.6vw,640px)}
.iband.cta .ib-img img{top:-4%;height:108%;object-position:50% 30%}
.iband.cta::after{background:linear-gradient(90deg,rgba(17,17,17,.88) 0%,rgba(17,17,17,.6) 38%,rgba(17,17,17,.1) 70%),linear-gradient(0deg,rgba(17,17,17,.55) 0%,rgba(17,17,17,0) 45%)}
.iband.cta .ib-img img{top:0;height:100%;object-position:50% 12%}
/* Packages: cards line up row by row (title, intro, list, price, button) */
.pk2s{grid-template-rows:auto auto auto 1fr auto auto;row-gap:0}
.pk2{grid-row:span 6;display:grid;grid-template-rows:subgrid;gap:0;align-content:start}
.pk2 .n{margin-bottom:14px}
.pk2 h3{margin:0 0 14px}
.pk2 .d{margin-bottom:22px}
.pk2 ul{margin:0 0 28px}
.pk2 .pr{margin:0 0 20px;align-self:end}
.pk2 .btn{margin:0;align-self:end;justify-self:start}
.pk2:hover{transform:none}
@media (max-width:1000px){.pk2s{grid-template-rows:none}.pk2{grid-row:auto;display:flex}}
/* Sticky role photos: only the current photo shows, a simple fade instead of the wipe */
.roles .vis img,.roles .vis img.past{clip-path:none!important;opacity:0;transition:opacity .6s var(--out)}
.roles .vis img.on{opacity:1}

/* ================= Article template (from Figma) ================= */
.art-hero .hv img{object-position:50% 25%}
.art-hero h1{max-width:16em}
.abody{padding-block:clamp(56px,6vw,120px)}
.art2{display:grid;grid-template-columns:300px minmax(0,820px);justify-content:center;gap:clamp(48px,8vw,160px);align-items:start}
.aside2{position:sticky;top:calc(var(--hh) + 40px);display:flex;flex-direction:column;gap:40px}
.aside2 .lbl{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--black);margin-bottom:14px}
.toc2{display:flex;flex-direction:column}
.toc2 a{position:relative;padding:12px 0 12px 22px;font-size:14px;line-height:1.5;color:var(--muted);border-left:1px solid var(--line);transition:color .3s}
.toc2 a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(0);transition:transform .4s var(--out)}
.toc2 a:hover{color:var(--black)}
.toc2 a.on{color:var(--red)}
.toc2 a.on::before{transform:scaleY(1)}
.share2{display:flex;flex-direction:column;gap:12px;font-size:14px}
.share2 a,.share2 button{all:unset;cursor:pointer;color:var(--black);transition:color .3s}
.share2 a:hover,.share2 button:hover{color:var(--green)}
.aside2 .card{background:var(--black);color:#fff;padding:32px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.aside2 .card h3{font-weight:300;font-size:24px;line-height:1.15;text-transform:uppercase}
.aside2 .card p{color:var(--on-dark);font-size:15px;line-height:1.6}
.prose2{font-size:16px;line-height:1.85;color:#555}
.prose2 p{margin:0 0 24px}
.prose2 .lede{font-size:clamp(18px,1.3vw,22px);line-height:1.6;color:var(--black);margin-bottom:36px}
.prose2 h2{font-weight:300;font-size:clamp(24px,1.8vw,32px);line-height:1.25;color:var(--black);margin:48px 0 20px;text-transform:none;scroll-margin-top:calc(var(--hh) + 32px)}
.prose2 ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:12px}
.prose2 li{position:relative;padding-left:22px;line-height:1.6}
.prose2 li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;background:var(--red)}
.prose2 blockquote{margin:40px 0;padding:4px 0 4px 36px;border-left:2px solid var(--red);font-weight:300;font-size:clamp(22px,1.75vw,32px);line-height:1.4;color:var(--black)}
.art-fig{margin:40px 0}
.art-fig img{width:100%;height:auto;display:block}
.art-fig figcaption{margin-top:12px;font-size:13px;color:var(--soft)}
.tags2{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.tags2 .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-right:4px}
.tags2 span:not(.lbl){font-size:13px;padding:7px 16px;border:1px solid var(--line);color:var(--black)}
.nstep{padding-block:0 clamp(56px,6vw,100px)}
.nbox{background:var(--grey);padding:clamp(40px,5vw,100px);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.nbox .r{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.nbox .r p{color:var(--muted);line-height:1.7}
.related{border-top:1px solid var(--line)}
@media (max-width:1000px){.art2{grid-template-columns:1fr}.aside2{position:static;order:2}.nbox{grid-template-columns:1fr}}
/* About: our standard on grey, so it no longer sits black-on-black next to the founder */
.stdp{background:var(--grey);color:var(--black)}
.stdp .eyebrow,.stdp .h2{color:var(--black)}
.stdp .shead>p,.s3 p{color:var(--muted)}
.s3 .im{background:#e8e8e8}

/* ================= Round 11: Figma sections ================= */
.also{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.also .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-right:8px}
.also span:not(.lbl){font-size:13px;padding:8px 16px;border:1px solid rgba(17,17,17,.16);border-radius:var(--rad)}
.mks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,28px);align-items:start}
.mk{background:#fff;display:flex;flex-direction:column}
.mk .im img{width:100%;height:auto;display:block}
.mk .tx{padding:clamp(24px,2.2vw,40px);display:flex;flex-direction:column;gap:12px}
.mk .n,.pkt1 .n,.uc .n{font-size:12px;letter-spacing:.16em;color:var(--red)}
.mk h3{font-weight:300;font-size:clamp(20px,1.5vw,26px);text-transform:uppercase}
.mk p{color:var(--muted);line-height:1.6}
.mk ul{list-style:none;margin:6px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mk li{font-size:12px;padding:6px 12px;border:1px solid rgba(17,17,17,.14);border-radius:var(--rad)}
.pkts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.2vw,22px)}
.pkt1{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(26px,2.4vw,40px);border:1px solid rgba(17,17,17,.14);transition:border-color .5s,background .5s}
.pkt1:hover{border-color:var(--green)}
.pkt1 h3{font-weight:300;font-size:clamp(20px,1.6vw,28px)}
.pkt1 p{color:var(--muted);line-height:1.6;flex:1}
.pkt1 .pop{position:absolute;top:clamp(26px,2.4vw,40px);right:clamp(26px,2.4vw,40px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.pkt1.hl{background:var(--black);color:#fff;border-color:var(--black)}
.pkt1.hl p{color:var(--on-dark)}
.ucs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,28px)}
.uc{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:start;padding-bottom:24px;border-bottom:1px solid var(--line)}
.uc .im{overflow:hidden}
.uc .im img{width:100%;height:auto;display:block;transition:transform 1.2s var(--out)}
.uc:hover .im img{transform:scale(1.03)}
.uc .tx{display:flex;flex-direction:column;gap:8px}
.uc h3{font-weight:300;font-size:clamp(17px,1.25vw,21px);text-transform:uppercase;line-height:1.2;transition:color .3s}
.uc:hover h3{color:var(--green)}
.uc p{color:var(--muted);line-height:1.6;font-size:15px}
.isec{background:var(--black);color:#fff}
.isec .eyebrow,.isec .h2{color:#fff}
.isec .shead>p{color:var(--on-dark)}
.ics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.14)}
.ic{position:relative;padding:28px 24px 32px 0;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid rgba(255,255,255,.1)}
.ic i{width:18px;height:10px;border:solid var(--green);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg);margin:4px 0 8px 2px}
.ic h3{font-weight:300;font-size:clamp(17px,1.25vw,21px);text-transform:uppercase}
.ic p{color:var(--on-dark);line-height:1.6;font-size:15px;max-width:280px}
.bes .nbox{background:var(--black);color:#fff}
.bes .nbox .eyebrow,.bes .nbox .h2{color:#fff}
.bes .nbox .r p{color:var(--on-dark)}
.bes .nbox .btn{color:#fff;border-color:rgba(255,255,255,.75)}
.bes{padding-top:clamp(56px,6vw,100px)}
.itabs{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(48px,5vw,80px) 0 clamp(28px,3vw,44px)}
.itabs button{all:unset;cursor:pointer;padding:10px 20px;border:1px solid rgba(17,17,17,.18);border-radius:var(--rad);font-size:14px;transition:background .4s,color .4s,border-color .4s}
.itabs button:hover{border-color:var(--black)}
.itabs button.on{background:var(--black);border-color:var(--black);color:#fff}
.itabs button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.ilh{margin-bottom:clamp(28px,3vw,44px)}
.post.hide{display:none}
.nl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:center}
.nlf p{color:var(--muted);line-height:1.6;margin-bottom:18px}
.nlr{display:flex;gap:12px;align-items:center;border-bottom:1px solid rgba(17,17,17,.25);padding-bottom:10px}
.nlr input{flex:1;border:0;background:transparent;font-family:var(--font);font-size:16px;outline:0;padding:8px 0}
.nlm{margin-top:12px;font-size:14px;color:var(--green)}
@media (max-width:1100px){.mks,.pkts,.ucs{grid-template-columns:1fr 1fr}.ics{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.mks,.pkts,.ucs,.ics,.nl{grid-template-columns:1fr}}
@media (max-width:900px){.ri.lab .th{grid-column:1}.ri.lab{grid-template-columns:1fr}}

/* ================= Round 12 ================= */
/* Tighter, consistent spacing everywhere */
:root{--sec:clamp(56px,6vw,104px)}
.shead{margin-bottom:clamp(28px,3vw,52px)}
.roles-sec,.stdp,.qx{padding-block:var(--sec)}
.qx{padding-block:clamp(72px,7vw,120px)}
.flow-pin{padding-block:clamp(36px,5vh,64px)}
.nstep{padding-bottom:var(--sec)}
@media (max-width:900px){:root{--sec:clamp(48px,11vw,72px)}}
/* Card sections: equal cards, whole section fits one screen */
.std3,.mks,.cards3,.pkts,.ucs{align-items:stretch}
.s3 .im,.mk .im{aspect-ratio:5/4;overflow:hidden}
.s3 .im img,.mk .im img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.s3 .im{max-height:calc(100svh - var(--hh) - 330px)}
.mk .im{aspect-ratio:16/10;max-height:calc(100svh - var(--hh) - 430px)}
.mk{height:100%}
.mk .tx{flex:1}
.mk .arrow{margin-top:auto}
.post{height:100%}
.post .im,.ins .post .im{aspect-ratio:4/3!important;overflow:hidden;display:block}
.post .im img{width:100%;height:100%!important;object-fit:cover;object-position:50% 22%}
.post .meta{flex:1}
.feat .im{aspect-ratio:4/3!important;max-height:calc(100svh - var(--hh) - 120px);overflow:hidden}
.feat .im img{width:100%;height:100%!important;object-fit:cover;object-position:50% 25%}
.feat{grid-template-columns:1fr 1fr}
.uc .im{aspect-ratio:3/4}
.uc .im img{height:100%;object-fit:cover;object-position:50% 22%}
/* Contact: form card and details card start level and stay level */
.cgrid2 .fcard,.cgrid2 .cinfo{transform:none!important;opacity:1!important;translate:none}
.cgrid2{align-items:stretch}
/* About intro: photos stay put */
.aint-pics figure{transform:none!important}
/* Closing call to action: photo behind a glass panel */
.ctab.glass{padding-block:clamp(72px,8vw,140px)}
.ctbg{position:absolute;inset:0;z-index:0}
.ctbg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ctab.glass::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(17,17,17,.78),rgba(17,17,17,.45))}
.ctab.glass .in{display:block;position:relative;z-index:2}
.ctab.glass .in>div{max-width:680px;padding:clamp(32px,3.4vw,60px);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.ctab.glass .spot,.ctab.glass canvas{display:none}
/* Roles: photo holds still while the list scrolls past; the last role gets time on screen */
.roles{align-items:start}
.roles .vis{position:sticky;top:calc(var(--hh) + 5vh);height:min(78svh,720px);max-height:none;aspect-ratio:auto}
.rl{padding-bottom:22vh}
.ri{opacity:.4}
.ri.on{opacity:1}
@media (max-width:900px){.rl{padding-bottom:0}}
.s3 .im{max-height:calc(100svh - var(--hh) - 380px)}
/* Contact banners: soft green and red light streaks drifting behind the glass */
.glow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.glow i{position:absolute;left:-10%;width:120%;height:clamp(60px,7vw,120px);border-radius:50%;filter:blur(clamp(40px,4.5vw,80px));opacity:.55;mix-blend-mode:screen;will-change:transform}
.glow .g1{top:30%;background:linear-gradient(90deg,transparent 0%,#03743B 30%,#1fa463 55%,transparent 90%);transform:rotate(-8deg);animation:glowA 18s ease-in-out infinite alternate}
.glow .g2{top:58%;background:linear-gradient(90deg,transparent 10%,#ED1E24 45%,#a3141a 70%,transparent 100%);opacity:.35;transform:rotate(6deg);animation:glowB 22s ease-in-out infinite alternate}
@keyframes glowA{from{transform:translateX(-8%) rotate(-8deg)}to{transform:translateX(8%) rotate(-4deg)}}
@keyframes glowB{from{transform:translateX(6%) rotate(6deg)}to{transform:translateX(-6%) rotate(2deg)}}
.ctab.glass .glow{z-index:2}
.ctab.glass .in{z-index:3}
.enq .glow{z-index:1}
.enq .in{z-index:2}
@media (prefers-reduced-motion:reduce){.glow i{animation:none}}
/* Roles: no empty space after the last role */
.rl{padding-bottom:0}
.rl .ri:last-child{border-bottom:0}
/* Glow streaks: stronger, so the green and red read clearly */
.glow i{opacity:.9;height:clamp(80px,9vw,150px);filter:blur(clamp(36px,3.6vw,64px))}
.glow .g2{opacity:.7}
.ctab.glass::before{background:linear-gradient(90deg,rgba(17,17,17,.82),rgba(17,17,17,.55))}
/* Full-width hero photos: one clean dark gradient from the left */
.hv-full .shade{background:linear-gradient(90deg,rgba(17,17,17,.9) 0%,rgba(17,17,17,.72) 28%,rgba(17,17,17,.25) 55%,rgba(17,17,17,0) 75%),linear-gradient(0deg,rgba(17,17,17,.5) 0%,rgba(17,17,17,0) 30%)}
.contactp .hv-full .hv img{object-position:70% 40%}
.packages .hv-full .hv img{object-position:50% 40%}
.glow i{opacity:.55;height:clamp(50px,5.5vw,90px);filter:blur(clamp(40px,4vw,72px))}
.glow .g2{opacity:.4}
.contactp .phero{height:clamp(440px,calc(64svh - var(--hh)),600px)}
/* Closing banner: same look as the enquiry section, without the form */
.ctab.glass .ctbg img{filter:none;transform:scaleX(-1)}
.ctab.glass::before{background:rgba(17,17,17,.84)}
.ctab.glass .in>div{max-width:720px;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.ctab.glass .glow i{opacity:.6}
.ctab.glass{padding-block:clamp(72px,7vw,120px)}
/* Banners: green glow only, no red */
.glow .g2{display:none}
/* Green: one quiet glow in the corner, slowly breathing */
.glow .g1{top:auto;bottom:-20%;left:-15%;width:70%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(3,116,59,.55),rgba(3,116,59,0));filter:blur(60px);opacity:.7;mix-blend-mode:normal;animation:glowS 14s ease-in-out infinite alternate}
@keyframes glowS{from{transform:translate(0,0) scale(1);opacity:.55}to{transform:translate(6%,-4%) scale(1.08);opacity:.8}}
/* Closing banner: shorter */
.ctab.glass{padding-block:clamp(48px,4.5vw,80px)}
.ctab.glass .h2{margin-top:16px!important}
.ctab.glass p{margin-top:16px}
.ctab.glass .ctas{margin-top:24px}
.ctab.glass .quick{margin-top:28px;padding-top:20px}
.svint{padding-bottom:0}
/* Event marketing cards: ticked lists in two columns, rows line up across cards, pill button */
.mks{grid-template-rows:auto auto auto auto 1fr auto}
.mk{display:grid;grid-row:span 1;grid-template-rows:subgrid}
.mks{grid-template-rows:auto}
.mk{display:flex;flex-direction:column}
.mk .tx{display:grid;grid-template-rows:auto auto 4.8em 1fr auto;gap:12px;flex:1}
.mk h3{min-height:1.2em}
.mk p{margin:0}
.mk ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:8px 0 16px;padding:0;align-content:start}
.mk li{position:relative;padding:0 0 0 22px;border:0;border-radius:0;font-size:14px;line-height:1.45}
.mk li::before{content:"";position:absolute;left:2px;top:.25em;width:5px;height:10px;border:solid var(--red);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.mk .btn{justify-self:start;align-self:end}
@media (max-width:1300px){.mk ul{grid-template-columns:1fr}}
@media (max-width:700px){.mk .tx{grid-template-rows:none;display:flex;flex-direction:column}}
.mks .mk{border:1px solid rgba(17,17,17,.1)}
.mksec:not(.grey) .mks .mk{background:var(--grey);border-color:transparent}
/* Packages teaser: three matching cards; the popular one marked with a green line and pill, not a black box */
.pkts{align-items:stretch}
.pkt1{display:grid;grid-template-rows:auto 2.4em auto 1fr auto;gap:14px;background:#fff;border:1px solid rgba(17,17,17,.12);transition:border-color .5s,box-shadow .6s var(--out),transform .6s var(--out)}
.pkt1 h3{align-self:start;line-height:1.2}
.pkt1 .btn{justify-self:start;margin-top:12px}
.pkt1:hover{box-shadow:0 30px 60px -40px rgba(0,0,0,.3);transform:translateY(-4px);border-color:rgba(17,17,17,.2)}
.pkt1.hl{background:#fff;color:var(--black);border-color:rgba(3,116,59,.45);box-shadow:0 30px 60px -44px rgba(3,116,59,.45)}
.pkt1.hl::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--green)}
.pkt1.hl p{color:var(--muted)}
.pkt1 .pop{top:clamp(22px,2.1vw,36px);padding:5px 12px;border-radius:var(--rad);background:rgba(3,116,59,.08);color:var(--green);font-weight:500}
.pkt.grey .pkt1{background:#fff}
@media (max-width:700px){.pkt1{grid-template-rows:none;display:flex}}
.pkt1{display:flex;flex-direction:column;gap:14px}
.pkt1 h3{min-height:2.4em}
.pkt1 p{flex:0 0 auto;min-height:4.8em}
.pkt1 .btn{align-self:flex-start;margin-top:auto}

/* Services: How it works on black so it stands apart from the packages above */
.flow.dk{background:var(--black);color:#fff}
.flow.dk .eyebrow,.flow.dk .h2{color:#fff}
.flow.dk .flow-head .r p{color:var(--on-dark)}
.flow.dk .flow-bar span{color:rgba(255,255,255,.45)}
.flow.dk .flow-bar span.on{color:#fff}
.flow.dk .flow-bar span i{background:rgba(255,255,255,.15)}
/* Services packages teaser on black, white cards */
.pdk{background:var(--black);color:#fff}
.pdk .eyebrow,.pdk .h2{color:#fff}
.pdk .shead .btn{color:#fff;border-color:rgba(255,255,255,.75)}
.pdk .pkt1{border-color:transparent}
.pdk .pkt1.hl{border-color:var(--green);box-shadow:0 30px 70px -30px rgba(3,116,59,.55)}
/* About intro stats: bigger numbers, green plus, a little more presence */
.aint-k{gap:clamp(32px,4vw,72px);padding-top:28px}
.aint-k span{font-size:clamp(34px,3vw,54px);color:var(--black)}
.aint-k span::after{content:"";}
.aint-k b{font-weight:300}
.aint-k span{position:relative}
.aint-k i{font-size:12px;margin-top:12px;color:var(--muted)}
.aint-k span{--plus:var(--green)}
.aint-k .pl{font-style:normal;color:var(--green);font-size:.6em;margin-left:2px;align-self:flex-start;margin-top:.15em}
.pdk .pkt1,.pdk .pkt1 h3{color:var(--black)}
/* Moving photo columns and strips never pause on hover */
.ppl-cols:hover .pc,.faces:hover .ftrack,.hv-strip:hover .strk{animation-play-state:running}
/* About: Our standard as editorial photo cards */
.std3{gap:clamp(14px,1.4vw,24px);align-items:start;counter-reset:s3}
.s3{position:relative;overflow:hidden;background:#111;gap:0;isolation:isolate}
.s3:nth-child(2){margin-top:clamp(32px,4vw,64px)}
.s3 .im{aspect-ratio:4/5;max-height:calc(100svh - var(--hh) - 220px);width:100%}
.s3 .im img{object-position:50% 20%;transition:transform 1.6s var(--out),filter 1s var(--out);filter:saturate(.9)}
.s3::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,0) 35%,rgba(17,17,17,.88) 100%);z-index:1;pointer-events:none}
.s3 figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;border:0;padding:clamp(22px,2vw,34px);gap:8px;color:#fff}
.s3 figcaption::before{content:"";display:block;width:40px;height:1px;background:var(--green);margin-bottom:10px;transition:width .8s var(--out)}
.s3 .n{position:absolute;top:auto;bottom:calc(100% + 4px);left:clamp(22px,2vw,34px);font-weight:300;font-size:13px;letter-spacing:.2em;color:#fff;opacity:.8}
.s3 h3{color:#fff;font-size:clamp(18px,1.4vw,24px)}
.s3 p{color:rgba(255,255,255,.78);font-size:15px;line-height:1.55;max-width:320px}
.s3:hover .im img{transform:scale(1.04);filter:saturate(1.05)}
.s3:hover figcaption::before{width:84px}
@media (max-width:900px){.s3:nth-child(2){margin-top:0}.s3 .im{max-height:none}}
.s3 .n{position:absolute;bottom:auto;top:calc(-1 * (100svh));display:none}
.s3{counter-increment:s3}
.s3::before{content:"0" counter(s3);position:absolute;z-index:2;top:clamp(18px,1.6vw,26px);left:clamp(22px,2vw,34px);font-size:12px;letter-spacing:.22em;color:#fff;padding:6px 12px;border:1px solid rgba(255,255,255,.4);border-radius:var(--rad);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(17,17,17,.2)}
.svint{padding-bottom:var(--sec)}
/* Services: How it works on white with grey cards, so it reads apart from the grey packages section */
.flow.wt{background:#fff;border-top:1px solid var(--line)}
.flow.wt .fs{background:var(--grey)}
/* Founder signature: name and role only */
.fnd .sig{padding-top:20px;border-top:1px solid rgba(255,255,255,.16);margin-top:16px}
.fnd .sig b{font-size:20px}
/* About: Our standard as an interactive showcase */
.sx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,120px);align-items:center}
.sx-list{display:flex;flex-direction:column;border-top:1px solid rgba(17,17,17,.12)}
.sx-i{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:clamp(22px,2.4vw,34px) 0;border-bottom:1px solid rgba(17,17,17,.12)}
.sx-i:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.sx-n{font-size:12px;letter-spacing:.18em;color:var(--soft);padding-top:10px;transition:color .5s}
.sx-t h3{font-weight:300;font-size:clamp(22px,2.1vw,38px);line-height:1.1;text-transform:uppercase;color:rgba(17,17,17,.32);transition:color .6s var(--out),transform .8s var(--out)}
.sx-t p{max-height:0;opacity:0;overflow:hidden;color:var(--muted);line-height:1.65;max-width:440px;transition:max-height .8s var(--out),opacity .6s,margin .6s}
.sx-i.on .sx-n{color:var(--red)}
.sx-i.on .sx-t h3{color:var(--black);transform:translateX(6px)}
.sx-i.on .sx-t p{max-height:120px;opacity:1;margin-top:12px}
.sx-i:hover .sx-t h3{color:var(--black)}
.sx-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden}
.sx-bar b{position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left}
.sx-i.on .sx-bar b{animation:sxbar 6s linear forwards}
@keyframes sxbar{to{transform:scaleX(1)}}
.sx-vis{position:relative}
.sx-frame{position:relative;aspect-ratio:4/5;max-height:calc(100svh - var(--hh) - 120px);margin-left:auto;overflow:hidden;background:#ddd;box-shadow:0 60px 90px -60px rgba(0,0,0,.45)}
.sx-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:0;transform:scale(1.06);transition:opacity 1s var(--out),transform 2.4s var(--out)}
.sx-frame img.on{opacity:1;transform:scale(1)}
.sx-frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.25);margin:14px;pointer-events:none}
.sx-big{position:absolute;left:clamp(-56px,-3vw,-24px);bottom:clamp(20px,3vw,48px);font-weight:300;font-size:clamp(64px,7vw,120px);line-height:1;color:var(--green);pointer-events:none}
.sx-big span{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(30px);transition:opacity .8s var(--out),transform 1s var(--out);background:var(--grey);padding:6px 14px 0 0}
.sx-big span.on{opacity:1;transform:none}
@media (max-width:900px){.sx{grid-template-columns:1fr}.sx-vis{order:-1}.sx-big{left:0}.sx-t p{max-height:none;opacity:1;margin-top:10px}.sx-t h3{color:var(--black)}}
.sx-frame{max-height:calc(100svh - var(--hh) - 220px);width:auto}
.sx-big{font-size:clamp(52px,5vw,88px)}
/* Every page hero title: one size, a little larger */
.phero h1,.phero.art-hero h1{font-size:clamp(36px,4vw,76px);line-height:1.02;max-width:14em}
/* Our standard showcase: no big numbers, wider photo, room for longer copy */
.sx-big{display:none}
.sx{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(36px,4.5vw,88px)}
.sx-frame{aspect-ratio:4/3.4;width:100%;max-height:calc(100svh - var(--hh) - 200px)}
.sx-i.on .sx-t p{max-height:200px}
.sx-t p{max-width:520px;font-size:15px}
.stdp .shead>p{max-width:520px}
.sx-t h3{font-size:clamp(18px,1.55vw,28px)}

/* Every call-to-action button is a rounded pill */
.btn,.btn.sm,.btn.light,.btn.ghost,header .btn,form .btn{border-radius:999px!important;overflow:hidden}
.btn::after,.btn::before{border-radius:999px}
.filters button,.itabs button,.chip{border-radius:999px}

/* Round 11: event marketing photos shown whole (portrait originals) */
.mksec .mk .im{aspect-ratio:auto!important;height:clamp(170px,27svh,260px)!important;max-height:none!important}
.mksec .mk .im img{object-fit:cover}
/* Round 11: services packages teaser on black */
.pdark{background:var(--black);color:#fff}
.pdark .eyebrow,.pdark .h2{color:#fff}
.pdark .pkt1{background:#1a1a1a;color:#fff;border-color:rgba(255,255,255,.14)}
.pdark .pkt1 p{color:var(--on-dark)}
.pdark .pkt1:hover{border-color:rgba(255,255,255,.4);box-shadow:none}
.pdark .pkt1.hl{background:#1a1a1a;color:#fff;border-color:rgba(255,255,255,.22);box-shadow:none}
.pdark .pkt1.hl p{color:var(--on-dark)}
.pdark .pkt1 .pop{background:rgba(255,255,255,.1);color:#fff}
.pdark .pkt1 .btn{color:#fff;border-color:rgba(255,255,255,.75)}
.pdark .pkt1 .btn:hover{border-color:var(--green)}
/* Round 11: intro titles replace the Overview label */
.ovt{font-weight:300;text-transform:uppercase;font-size:clamp(26px,2.3vw,38px);line-height:1.15;letter-spacing:.01em;color:var(--black);max-width:18ch;margin:0 0 28px}
.ov .tx .ovt{margin:0}.ov .tx .ovt+p.first{margin-top:22px!important}
/* Round 11: CTA banner, message left, contact details right; own photo per page */
.ctab.glass .ctbg img{transform:none}
.ctab.glass::before{background:linear-gradient(90deg,rgba(17,17,17,.88) 0%,rgba(17,17,17,.74) 55%,rgba(17,17,17,.82) 100%)}
.ctab.glass .in.ctgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:clamp(40px,7vw,140px);align-items:center}
.ctab.glass .in.ctgrid>.ctl{max-width:640px}
.ctab.glass .ctgrid>.quick{margin:0;padding:8px 0 8px clamp(32px,3vw,56px);border-top:0;border-left:1px solid rgba(255,255,255,.24);flex-direction:column;flex-wrap:nowrap;gap:30px}
.ctab.glass .ctgrid>.quick b{font-size:18px}
@media (max-width:900px){
.ctab.glass .in.ctgrid{grid-template-columns:1fr;gap:36px}
.ctab.glass .ctgrid>.quick{padding:24px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.2);gap:22px}
}

/* Round 28: 17 client logos, 6 per row */
.bgrid{grid-template-columns:repeat(6,1fr)!important}
@media (max-width:1100px){.bgrid{grid-template-columns:repeat(3,1fr)!important}}
@media (max-width:600px){.bgrid{grid-template-columns:repeat(2,1fr)!important}}
.bc img.gs{filter:grayscale(1) brightness(.45) contrast(1.2)}

/* Round 28: event marketing cards on black, compact so heading + cards fit one screen */
.mksec{padding-block:clamp(48px,4.5vw,72px)}
.mksec .shead{margin-bottom:0}
.mksec .mks{margin-top:clamp(28px,2.6vw,40px)}
.mksec .mk{background:#111!important;color:#fff;border:0}
.mksec .mk h3{color:#fff}
.mksec .mk p{color:var(--on-dark)}
.mksec .mk li{color:rgba(255,255,255,.88);font-size:13px}
.mksec .mk ul{gap:8px 16px;margin:4px 0 12px}
.mksec .mk .tx{padding:clamp(20px,1.8vw,30px);gap:10px;grid-template-rows:auto auto auto 1fr auto}
.mksec .mk .btn{color:#fff;border-color:rgba(255,255,255,.75)}
.mksec .mk .btn:hover{border-color:var(--green)}
/* Round 28: packages teaser intro line beside the heading */
.pkt .shead .pnote{max-width:420px;color:var(--muted);line-height:1.6;margin:0}
.pkt .shead .pr{display:flex;align-items:flex-end;gap:clamp(24px,3vw,48px)}
@media (max-width:900px){.pkt .shead .pr{flex-direction:column;align-items:flex-start;gap:20px}}
.mksec{padding-top:clamp(36px,3.4vw,56px)!important;padding-bottom:clamp(48px,4.5vw,72px)!important}
.mksec .mk .im{height:clamp(150px,21svh,230px)!important}
.mksec .mk p{font-size:15px;line-height:1.55}
.mksec .mk h3{font-size:clamp(18px,1.35vw,23px)}
.mksec .mk li{line-height:1.35}
.mksec .mk ul{gap:6px 14px}
/* Round 28: packages page, heading and all three cards fit one screen */
.pkg2{padding-top:clamp(32px,3vw,48px)!important;padding-bottom:clamp(48px,4.5vw,72px)!important}
.pkg2 .pk2s{margin-top:clamp(24px,2.4vw,36px)!important}
.pkg2 .pk2{padding:clamp(22px,2vw,32px)!important;gap:10px!important;grid-template-rows:none!important;display:flex!important;flex-direction:column}
.pkg2 .pk2 h3{min-height:0!important;margin:0}
.pkg2 .pk2 .d{min-height:3.2em;margin:0!important;padding-bottom:16px!important}
.pkg2 .pk2 ul{margin:4px 0 0!important;padding-top:16px!important;gap:8px!important}
.pkg2 .pk2 li{font-size:15px}
.pkg2 .pk2 .pr{margin-top:auto!important;padding-top:20px!important}
.pkg2 .pk2 .btn{margin-top:14px!important}
.pkg2 .pk2-note{margin-top:20px!important}
.pkg2 .pk2{align-items:flex-start!important}
.pkg2 .pk2>*{align-self:stretch}
.pkg2 .pk2 .btn{align-self:flex-start!important;margin-top:16px!important}
.pkg2 .pk2 .pr{text-align:left!important;align-items:flex-start!important}
.pkg2 .pk2 h3{min-height:2.3em!important;line-height:1.15}
.pkg2 .pk2 .d{min-height:4.3em}
.pkg2 .pk2 .d{min-height:calc(3 * 1.6em + 16px)!important;line-height:1.6}
.pkg2 .pk2 .pr small{margin:0!important}
.pkg2 .pk2 .btn{margin-top:12px!important}
.bc.more span{font-weight:300;font-size:clamp(22px,1.8vw,30px);letter-spacing:.04em;text-transform:uppercase;color:var(--black)}
.mksec .mk .im{height:clamp(170px,25svh,260px)!important}
.mksec .mk .im{height:clamp(170px,23.5svh,250px)!important}
/* Round 29: logos grey at rest, brand colour on hover */
.bc img,.bc img.mono,.bc img.gs{filter:grayscale(1) brightness(0);opacity:.55;transition:filter .45s ease,opacity .45s ease,transform .7s var(--out)}
.bc:hover img{filter:none;opacity:1}
.bc:hover img.mono{filter:grayscale(1) brightness(0);opacity:1}
/* Round 30: active filter tabs in green */
.filters button.on,.itabs button.on,.itabs button[aria-selected="true"]{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important}
.filters button:hover{border-color:var(--green)}
/* Round 30: no sideways shift on the active Our standard title */
.sx-i.on .sx-t h3{transform:none}
/* Round 30: About "Our standard" as wide team photo with overlapping cards */
.stdx{background:var(--grey);padding-bottom:clamp(64px,6vw,104px)}
.stdx .qh{padding-top:clamp(64px,6vw,104px);padding-bottom:clamp(36px,3.4vw,56px)}
.qph{height:min(60svh,540px);overflow:hidden}.qph img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.qg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,24px);margin-top:calc(-1 * clamp(110px,11vw,170px));position:relative;z-index:2}
.qg article{background:#111;color:#fff;padding:clamp(26px,2.4vw,38px)}
.qg .n{font-size:12px;letter-spacing:.18em;color:var(--red)}
.qg h3{margin-top:14px;font-weight:300;font-size:clamp(20px,1.7vw,28px);text-transform:uppercase}
.qg p{margin-top:14px;color:var(--on-dark);line-height:1.65;font-size:15px}
@media (max-width:900px){.qg{grid-template-columns:1fr;margin-top:-60px}.qph{height:46svh}}
/* Round 31: logos black at rest */
.bc img,.bc img.mono,.bc img.gs{filter:grayscale(1) brightness(0);opacity:1}
.bc:hover img{filter:none}
.bc:hover img.mono{filter:grayscale(1) brightness(0)}
/* Round 31: client logos on two rows moving in opposite directions */
.mq{margin-top:clamp(40px,4vw,64px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;position:relative;margin-inline:calc(50% - 50vw);display:block!important}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:12vw;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}.mq::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.mq-r{display:flex;overflow:hidden}.mq-r+.mq-r{border-top:1px solid var(--line)}
.mq-t{display:flex;flex:none;width:max-content;animation:mqL 48s linear infinite}
.mq-rt .mq-t{animation-name:mqR}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq .bc{flex:none;width:clamp(170px,15vw,240px);height:clamp(100px,9vw,140px);border:0!important;padding:0 28px}
.mq .bc img{max-height:70px}
.mq .bc img[alt="Rolls-Royce"]{max-height:86px;height:86px!important}
.mq .bc img[alt="Lipsy London"]{width:150px!important}
@media (prefers-reduced-motion:reduce){.mq-t{animation:none}}
.mq::before,.mq::after{display:none!important}
.mq-r{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
/* Round 32 */
.mq:hover .mq-t{animation-play-state:running!important}
.fnd .tx p{font-weight:300!important}
.fnd .pic.kb{max-width:400px;width:100%;justify-self:end;align-self:center}

/* Round 34: Our standard cards, all-white text */
.qg article,.qg h3,.qg p{color:#fff}