/* ═══════════════════════════════════════════
   DISTRICT 11 — inner pages
   Same tokens, type and chrome as the homepage;
   this file only adds the page-level furniture.
   ═══════════════════════════════════════════ */

/* the split reveal, reused as a page entrance */
.page-veil{position:fixed;inset:0;z-index:400;pointer-events:none;}
.page-veil .slat,.page-veil .slat-fill{background:var(--dark);}

/* overflow-x:clip, NOT hidden — `hidden` would make this a scroll container and
   break position:sticky for every descendant, which is what the FAQ pin needs. */
.page{background:var(--dark);color:#f2f2f2;overflow-x:clip;}

/* ══════════════ PAGE HERO ══════════════ */
/* The hero holds the screen while the curtain is swiped away, then scrolls on.
   No overflow on the section itself — that would make it a scroll container and
   kill the sticky inside it. */
.phero{position:relative;height:180vh;background:var(--dark);}
.phero-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:150px clamp(18px,3.4vw,48px) clamp(28px,4vw,54px);
}
.phero-media{position:absolute;inset:0;z-index:0;}
.phero-media picture{display:block;width:100%;height:100%;}
.phero-media img{filter:grayscale(.28) contrast(1.08) brightness(.66);}
.phero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.74) 0%,rgba(8,8,10,.34) 34%,rgba(8,8,10,.62) 68%,rgba(8,8,10,.92) 100%);
}
.phero-stage > *:not(.phero-media){position:relative;z-index:2;}
.phero-kicker{color:rgba(255,255,255,.48);margin-bottom:clamp(18px,3vw,34px);}
.phero-title{
  font-size:clamp(2.5rem,9vw,7.6rem);font-weight:500;
  letter-spacing:-.045em;line-height:.9;
}
.phero-title span{display:block;overflow:hidden;}
.phero-title i{display:block;font-style:normal;}
.phero-lede{
  margin-top:clamp(22px,3vw,38px);max-width:46ch;
  font-size:clamp(.95rem,1.5vw,1.2rem);line-height:1.62;color:rgba(240,240,240,.66);
}
/* the hero always sits on photography, so its chips are the light variant */
.phero .tags span{
  border-color:rgba(255,255,255,.34);color:#f2f2f2;
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.phero-rail{
  margin-top:clamp(30px,4.4vw,58px);padding-top:18px;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  color:rgba(255,255,255,.5);
}

/* ══════════════ SECTION SHELL ══════════════ */
.sect{padding:clamp(64px,8.4vw,124px) clamp(18px,3.4vw,48px);position:relative;}
.sect-light{background:var(--light-c);color:var(--ink);}
.sect-pale{background:var(--reveal-bg);color:var(--ink);}
.sect-dark{background:var(--dark);color:#f2f2f2;}
.sect-tight{padding-top:clamp(34px,4vw,58px);}
.shell{max-width:1360px;margin:0 auto;}

.sect-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  margin-bottom:clamp(30px,4.4vw,60px);
}
.sect-light .sect-head,.sect-pale .sect-head{color:#7c7c7c;}
.sect-dark .sect-head{color:rgba(255,255,255,.42);}

.h2{font-size:clamp(2rem,5.2vw,4.4rem);font-weight:500;letter-spacing:-.038em;line-height:.98;}
.h3{font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;}
.lede{font-size:clamp(1rem,1.75vw,1.5rem);font-weight:400;line-height:1.5;letter-spacing:-.01em;}
.body-copy{font-size:.94rem;line-height:1.8;color:#5e5e5e;}
.sect-dark .body-copy{color:rgba(240,240,240,.62);}
.dim{color:#8b8b8b;}
.sect-dark .dim{color:rgba(255,255,255,.42);}

/* reveal hook, driven from page.js */
.rv{will-change:transform,opacity;}

/* ══════════════ SHARED PIECES ══════════════ */
.btn{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 26px;border-radius:100px;line-height:1;
  display:inline-flex;align-items:center;gap:12px;width:fit-content;
  border:1px solid currentColor;
  transition:background .4s var(--ease),color .4s var(--ease),gap .4s var(--ease);
}
.btn:hover{gap:20px;}
.btn-solid{background:var(--dark);color:#f2f2f2;border-color:var(--dark);}
.sect-dark .btn-solid{background:#f2f2f2;color:var(--dark);border-color:#f2f2f2;}
.btn-ghost:hover{background:var(--ink);color:#f4f4f4;}
.sect-dark .btn-ghost{border-color:rgba(255,255,255,.4);}
.sect-dark .btn-ghost:hover{background:#f2f2f2;color:var(--dark);}

.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tags span{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  padding:8px 15px;border-radius:100px;line-height:1;
  border:1px solid rgba(0,0,0,.2);color:#4a4a4a;
}
.sect-dark .tags span{border-color:rgba(255,255,255,.26);color:rgba(240,240,240,.78);}

/* big scrolling wordmark band */
.wordband{overflow:hidden;padding:clamp(24px,3.4vw,46px) 0;}
/* the about page uses it as a divider rather than a statement */
.wordband-sm{padding:clamp(14px,1.8vw,24px) 0;}
.wordband-sm .wordband-track span{font-size:clamp(1.15rem,2.6vw,2.1rem);letter-spacing:-.03em;}
.wordband-sm .wordband-track{animation-duration:22s;}
.wordband-track{
  display:flex;width:max-content;align-items:center;
  animation:slide 30s linear infinite;
}
.wordband-track span{
  font-size:clamp(3.4rem,10.5vw,9rem);font-weight:500;line-height:.9;
  letter-spacing:-.045em;white-space:nowrap;padding-right:.14em;user-select:none;
}
.wordband-track span:nth-child(even){
  color:transparent;-webkit-text-stroke:1.4px currentColor;
}

/* two-up split */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center;}
.split-even{grid-template-columns:1fr 1fr;}
.split-top{align-items:flex-start;}
.figure{border-radius:14px;overflow:hidden;background:#dcdcdc;}
.figure-4x3{aspect-ratio:4/3;}
.figure-16x7{aspect-ratio:16/7;}
.figure-1x1{aspect-ratio:1/1;}

/* three column rule grid */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(0,0,0,.14);}
.sect-dark .trio{border-top-color:rgba(255,255,255,.16);}
.trio > div{padding:clamp(26px,3vw,44px) clamp(20px,2.4vw,36px);border-right:1px solid rgba(0,0,0,.14);}
.sect-dark .trio > div{border-right-color:rgba(255,255,255,.16);}
.trio > div:last-child{border-right:none;}
.trio-letter{font-size:clamp(2.8rem,6vw,5.2rem);font-weight:500;letter-spacing:-.05em;line-height:1;margin-bottom:16px;}

/* label / value rows */
.rowlist{border-top:1px solid rgba(0,0,0,.14);}
.sect-dark .rowlist{border-top-color:rgba(255,255,255,.16);}
.rowlist > *{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid rgba(0,0,0,.14);
  /* No opacity transition on the row itself. GSAP reveals these rows with a
     from(opacity:0), and ScrollTrigger.refresh() re-reads the natural end
     value — with a transition running, that read lands on the from-state and
     the row is recorded as ending at 0, so it never appears. The hover dim is
     applied to the row's contents instead, where nothing else animates. */
  transition:padding-left .4s var(--ease);
}
.rowlist > * > *{transition:opacity .3s var(--ease);}
.sect-dark .rowlist > *{border-bottom-color:rgba(255,255,255,.16);}
.rowlist > *:hover{padding-left:10px;}
.rowlist > *:hover > *{opacity:.62;}
.row-lead{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);flex:1;min-width:0;}
.row-num{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;flex:none;opacity:.55;}
.row-title{font-size:clamp(1rem,1.7vw,1.35rem);font-weight:500;letter-spacing:-.015em;}
.row-desc{font-size:.86rem;line-height:1.6;max-width:38ch;text-align:right;color:#6f6f6f;}
.sect-dark .row-desc{color:rgba(240,240,240,.58);}
.row-go{flex:none;font-size:1.1rem;opacity:.7;}

/* card grids */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px);}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,28px);}
.card{
  border:1px solid rgba(0,0,0,.14);border-radius:14px;padding:clamp(26px,3vw,42px);
  display:flex;flex-direction:column;gap:16px;background:rgba(255,255,255,.5);
}
.sect-dark .card{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);}
.card-num{font-size:clamp(2rem,3.4vw,3rem);font-weight:500;letter-spacing:-.04em;color:rgba(0,0,0,.14);line-height:1;}
.sect-dark .card-num{color:rgba(255,255,255,.18);}

/* team */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);}
.person{border-radius:14px;overflow:hidden;background:#e2e2e2;}
.sect-dark .person{background:#17171a;}
.person-photo{aspect-ratio:1/1;overflow:hidden;}
.person-photo img{filter:grayscale(.2) contrast(1.05);transition:transform 1s var(--ease),filter .6s var(--ease);}
.person:hover .person-photo img{transform:scale(1.045);filter:grayscale(0) contrast(1.05);}
.person-meta{padding:20px 24px;border-top:1px solid rgba(0,0,0,.12);}
.sect-dark .person-meta{border-top-color:rgba(255,255,255,.12);}
.person-meta b{display:block;font-size:1rem;font-weight:500;letter-spacing:-.015em;}
.person-meta span{display:block;margin-top:6px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;opacity:.55;}

/* ══════════════ SERVICES PAGE ══════════════ */
/* ══════════════ SERVICES — the six disciplines ══════════════ */
.svc{position:relative;padding:clamp(44px,5.6vw,84px) 0;}
/* the hairline draws across as the block arrives, instead of a static border */
.svc-rule{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(0,0,0,.16);transform:scaleX(0);transform-origin:0 50%;
}
.svc:first-of-type .svc-rule{display:none;}

.svc-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,52px);
}
.svc-title{
  font-size:clamp(1.8rem,5.4vw,4.4rem);font-weight:500;
  letter-spacing:-.045em;line-height:.96;min-width:0;
  transition:color .4s var(--ease);
}
/* the line rises out of its own box on entry */
.svc-title span{display:block;overflow:hidden;}
.svc-title i{display:block;font-style:normal;}
.svc:hover .svc-title{color:var(--accent);}

.svc-go{
  display:flex;align-items:center;gap:10px;flex:none;
  color:#8b8b8b;padding-bottom:.4em;
  transition:gap .4s var(--ease),color .35s var(--ease);
}
.svc-go i{font-style:normal;font-size:.85rem;}
.svc:hover .svc-go{gap:18px;color:var(--ink);}

.svc-body{
  margin-top:clamp(26px,3.4vw,50px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,56px);align-items:center;
}
.svc-copy{display:flex;flex-direction:column;gap:clamp(22px,2.8vw,36px);}
.svc-lede{
  font-size:clamp(.95rem,1.5vw,1.28rem);line-height:1.6;
  letter-spacing:-.012em;color:#4e4e4e;max-width:44ch;
}
/* chips lift a little under the pointer */
.svc-tags span{transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);}
.svc-tags span:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);}

.svc-visual{border-radius:14px;overflow:hidden;min-height:clamp(240px,26vw,380px);background:#dcdcdc;}
/* the mask is what wipes open; the image scales inside it on hover */
.svc-mask{display:block;width:100%;height:100%;overflow:hidden;}
.svc-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.svc:hover .svc-visual img{transform:scale(1.05);}
.svc:nth-of-type(even) .svc-copy{order:1;}
.svc:nth-of-type(even) .svc-visual{order:0;}

/* ══════════════ PORTFOLIO ══════════════ */

/* ── SELECTED WORKS — a stack seen edge-on ──
   Each slab is tipped back and overlaps the one below, so the set reads as a
   deck rather than a list. Hovering lifts one clear and squares it up. The
   resting tilt and the lift are both CSS, so the entry reveal in portfolio.js
   only touches clip-path and opacity — nothing fights over the transform. */
.works-stack{
  /* Flex, so the slabs' negative margins do NOT collapse. In normal flow the
     hover's margin-bottom would be swallowed by the next slab's larger
     negative margin-top, and the growth would shove the rest of the stack
     down instead of expanding over it. */
  display:flex;flex-direction:column;
  perspective:1600px;perspective-origin:50% 22%;
  padding-bottom:clamp(30px,5vw,70px);
}
.work-slab{
  position:relative;display:block;
  --slab-h:clamp(150px,20vw,250px);
  --slab-grow:clamp(34px,4.4vw,72px);
  height:var(--slab-h);
  border-radius:14px;overflow:hidden;
  transform-origin:50% 100%;
  transform:rotateX(7deg);
  /* the overlap is what makes it a stack rather than a list */
  margin-top:clamp(-96px,-11vw,-58px);
  box-shadow:0 -14px 40px rgba(0,0,0,.16), 0 26px 60px rgba(0,0,0,.2);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease),
             height .55s var(--ease), margin-bottom .55s var(--ease);
  will-change:transform,height;
}
.work-slab:first-child{margin-top:0;}
.work-slab img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease),filter .55s var(--ease);
  filter:grayscale(.42) brightness(.72);
}
.work-slab::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,.18) 46%,rgba(8,8,10,.82) 100%);
  transition:opacity .55s var(--ease);
}
.work-slab .slab-bar{
  /* sits in the visible band; no fixed height, so it never forces the slab */
  position:absolute;z-index:2;left:0;right:0;top:0;
  padding:clamp(16px,1.9vw,26px) clamp(20px,2.4vw,36px) 0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:start;gap:clamp(14px,2vw,30px);
}
.slab-num{color:rgba(255,255,255,.6);padding-top:.5em;}
.slab-title{
  font-size:clamp(1.15rem,2.5vw,2.1rem);font-weight:500;
  letter-spacing:-.035em;line-height:1.05;color:#fff;
  transition:transform .55s var(--ease);
}
.slab-tags{
  display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;padding-top:.35em;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.slab-tags span{
  font-family:var(--mono);font-size:.55rem;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;line-height:1;
  border:1px solid rgba(255,255,255,.34);color:#f2f2f2;
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.slab-go{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:#f2f2f2;color:var(--dark);
  display:grid;place-items:center;font-size:.95rem;
  opacity:0;transform:scale(.7);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}

/* the lift */
/* Lifts clear, squares up, and grows taller. The negative margin-bottom
   cancels the extra height, so the slabs below hold their place and the
   hovered one simply expands over them instead of shoving the stack down. */
.work-slab:hover{
  transform:translateY(clamp(-34px,-3.6vw,-22px)) rotateX(0deg) scale(1.012);
  height:calc(var(--slab-h) + var(--slab-grow));
  margin-bottom:calc(-1 * var(--slab-grow));
  box-shadow:0 -10px 30px rgba(0,0,0,.12), 0 44px 90px rgba(0,0,0,.32);
  z-index:20;
}
.work-slab:hover img{transform:scale(1.05);filter:grayscale(0) brightness(.86);}
.work-slab:hover::after{opacity:.72;}
.work-slab:hover .slab-title{transform:translateX(6px);}
.work-slab:hover .slab-tags{opacity:1;transform:translateY(0);}
.work-slab:hover .slab-go{opacity:1;transform:scale(1);}

.workcard{
  position:relative;display:block;border-radius:16px;overflow:hidden;
  height:clamp(340px,42vw,560px);
}
.workcard img{transition:transform 1.1s var(--ease);}
.workcard:hover img{transform:scale(1.05);}
.workcard::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,.05) 42%,rgba(8,8,10,.75) 100%);
}
.workcard > *:not(img){position:absolute;z-index:2;}
.workcard h3{top:24px;left:24px;font-size:clamp(1.05rem,1.7vw,1.45rem);font-weight:500;color:#fff;letter-spacing:-.015em;}
/* the corner button — its only users now are the workcards on services and
   the related projects on a project page */
.workcard .wv-go{
  position:absolute;top:24px;right:24px;z-index:3;
  width:40px;height:40px;border-radius:50%;
  background:#f2f2f2;color:var(--dark);
  display:grid;place-items:center;font-size:.95rem;
  transition:transform .45s var(--ease);
}
.workcard:hover .wv-go{transform:rotate(45deg);}
.workcard .tags{bottom:24px;left:24px;right:24px;}
.workcard .tags span{
  border-color:rgba(255,255,255,.34);color:#f2f2f2;
  background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* ══════════════ PROJECT PAGE ══════════════ */
/* Columns rather than a grid: each asset keeps its own proportions and the
   column packs them, so nothing is cropped to a shared ratio. Three across
   also keeps each one comfortably small. */
.gallery{columns:2;column-gap:clamp(14px,1.8vw,24px);}
.gallery figure{
  break-inside:avoid;margin:0 0 clamp(12px,1.5vw,20px);
  border-radius:12px;overflow:hidden;background:#dcdcdc;
}
.gallery img,.gallery video{width:100%;height:auto;display:block;}
.gallery video{background:#111;}

/* an all-film gallery plays side by side rather than stacking in columns */
.gallery-reel{
  columns:auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px);
}
.gallery-reel figure{margin:0;}
.factlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);}
.factlist div span{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin-bottom:10px;}
.factlist div b{font-size:1.02rem;font-weight:500;letter-spacing:-.015em;}

/* ══════════════ BLOG ══════════════ */
.postgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);}
.postcard{display:block;border-top:1px solid rgba(0,0,0,.16);padding-top:22px;}
.sect-dark .postcard{border-top-color:rgba(255,255,255,.16);}
.postcard-img{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#dcdcdc;}
.postcard-img img{transition:transform 1s var(--ease);}
.postcard:hover .postcard-img img{transform:scale(1.05);}
.postcard h3{margin-top:20px;font-size:1.05rem;font-weight:500;letter-spacing:-.015em;line-height:1.36;}
.postcard .mono{display:block;margin-top:12px;font-size:.6rem;opacity:.55;}

/* article body */
.prose{max-width:70ch;margin:0 auto;font-size:1.02rem;line-height:1.82;color:#3f3f3f;}
.prose > * + *{margin-top:1.25em;}
.prose h2{font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:500;letter-spacing:-.03em;line-height:1.16;margin-top:2em;color:var(--ink);}
.prose h3{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;letter-spacing:-.025em;margin-top:1.7em;color:var(--ink);}
.prose h4{font-size:1.05rem;font-weight:600;margin-top:1.6em;color:var(--ink);}
.prose ul,.prose ol{padding-left:1.3em;}
.prose li{margin-top:.5em;}
.prose li::marker{color:#a5a5a5;}
.prose blockquote{
  border-left:2px solid var(--accent);padding-left:1.2em;
  font-size:1.15rem;line-height:1.6;color:var(--ink);
}
.prose a{border-bottom:1px solid rgba(0,0,0,.35);}
.prose img{border-radius:12px;height:auto;}
.prose strong{font-weight:600;color:var(--ink);}

/* ══════════════ CONTACT PAGE ══════════════ */
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);align-items:start;}
.ccard{border-radius:18px;padding:clamp(30px,3.6vw,52px);background:var(--light-c);color:var(--ink);}
/* a light island inside a dark section — the dark section's text colours
   would otherwise bleach the copy straight off the card */
.sect-dark .ccard .body-copy{color:#5e5e5e;}
.sect-dark .ccard .mono,.sect-dark .ccard .dim{color:#9a9a9a;}
.sect-dark .ccard .tags span{border-color:rgba(0,0,0,.2);color:#4a4a4a;}
.ccard h3{font-size:clamp(1.6rem,3.2vw,2.8rem);font-weight:500;letter-spacing:-.035em;line-height:1.02;margin:16px 0 18px;}
.ccard-lines{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
.ccard-lines a{display:flex;align-items:center;gap:10px;font-size:.95rem;width:fit-content;border-bottom:1px solid transparent;transition:border-color .3s;}
.ccard-lines a:hover{border-color:currentColor;}
.cphoto{border-radius:18px;overflow:hidden;height:clamp(180px,22vw,260px);}
.enquiry{
  display:grid;grid-template-columns:1fr 1fr;gap:24px 22px;align-content:start;
}
.enquiry .full{grid-column:1/-1;}
.enquiry label{display:flex;flex-direction:column;gap:9px;}
.enquiry label span{color:#8d8d8d;}
.enquiry input,.enquiry select,.enquiry textarea{
  border-bottom:1px solid rgba(255,255,255,.28);padding:11px 2px;font-size:.98rem;
  transition:border-color .3s;
}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{outline:none;border-color:#f2f2f2;}
.enquiry select option{background:var(--dark-2);}
.enquiry .form-status{grid-column:1/-1;}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:900px){
  .phero{height:150vh;}
  .works-stack{perspective:900px;}
  .work-slab{--slab-h:clamp(140px,42vw,200px);--slab-grow:clamp(26px,8vw,48px);margin-top:clamp(-70px,-16vw,-44px);}
  .work-slab .slab-bar{grid-template-columns:auto minmax(0,1fr) auto;}
  .slab-tags{display:none;}
  .phero-stage{padding-top:128px;}
  /* the hero always sits on photography, so its chips are the light variant */
.phero .tags span{
  border-color:rgba(255,255,255,.34);color:#f2f2f2;
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.phero-rail{gap:10px;}
  .phero-rail span:nth-child(2){display:none;}
  .split,.split-even{grid-template-columns:1fr;}
  .trio{grid-template-columns:1fr;}
  .trio > div{border-right:none;border-bottom:1px solid rgba(0,0,0,.14);}
  .sect-dark .trio > div{border-bottom-color:rgba(255,255,255,.16);}
  .grid-3,.grid-2,.people,.postgrid{grid-template-columns:1fr;}
  .gallery{columns:1;}
  .gallery-reel{grid-template-columns:repeat(2,minmax(0,1fr));}
  .factlist{grid-template-columns:1fr 1fr;}
  .svc-body{grid-template-columns:1fr;}
  .svc-head{flex-direction:column;align-items:flex-start;gap:14px;}
  .svc-go{padding-bottom:0;}
  .svc:nth-of-type(even) .svc-copy{order:0;}
  .svc:nth-of-type(even) .svc-visual{order:1;}
  .rowlist > *{flex-wrap:wrap;}
  .row-desc{text-align:left;max-width:none;flex-basis:100%;}
  .contact-cards{grid-template-columns:1fr;}
  .enquiry{grid-template-columns:1fr;}
  .workcard{height:clamp(300px,72vw,440px);}
}

/* ══════════════════════════════════════════════════════════
   FAQ — a pinned stage holding all six answers at once.
   The heading reveals as the section scrolls in, the stage
   pins, and then the answers are uncovered one at a time by an
   unbroken rule running across each row. The plus markers sit
   on the column boundaries: each is an × until the rule reaches
   it, squares up as it arrives, and holds from then on.
   Type and spacing are clamped against vh as well as vw so the
   whole block stays on one screen at any window height.
   ══════════════════════════════════════════════════════════ */
.faq-stage{
  position:relative;height:430vh;
  background:linear-gradient(180deg,#fbfbfb 0%,#f2f2f2 55%,#ececec 100%);
  color:var(--ink);
}
.faq-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(76px,11vh,110px) clamp(18px,3.4vw,48px) clamp(34px,6vh,70px);
}
.faq-pin > .shell{width:100%;}

.faq-top{
  display:grid;grid-template-columns:clamp(0px,11vw,200px) 1fr;
  align-items:start;margin-bottom:clamp(26px,5vh,62px);
}
.faq-kicker{display:flex;flex-direction:column;gap:8px;color:#6f6f6f;padding-top:6px;}
.faq-title{
  font-size:clamp(1.7rem,min(4.6vw,5.6vh),3.7rem);font-weight:500;
  letter-spacing:-.042em;line-height:.96;color:#3e3e3e;
}
.faq-sub{margin-top:clamp(10px,1.6vh,18px);font-size:clamp(.76rem,1.5vh,.9rem);line-height:1.6;color:#8b8b8b;}

.rr-rows{display:flex;flex-direction:column;gap:clamp(22px,4.4vh,54px);}
/* no column gap — the boundaries are where the markers sit, so the rule has to
   run straight through them without a break */
.rr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.rr-col{
  display:flex;flex-direction:column;min-width:0;
  padding-right:clamp(22px,3vw,52px);
}
.rr-step{display:block;color:#7c7c7c;font-size:.62rem;}
.rr-head{
  margin-top:clamp(18px,2.6vw,34px);
  font-size:clamp(1.05rem,1.7vw,1.5rem);font-weight:500;
  letter-spacing:-.028em;line-height:1.18;color:#3a3a3a;
}
/* the approach trio leads with a letter rather than a label */
.rr-step-letter{
  font-family:var(--sans);font-size:clamp(2.4rem,4.6vw,4rem);font-weight:500;
  letter-spacing:-.05em;line-height:1;color:rgba(0,0,0,.2);text-transform:none;
}
.rr-copy{margin-top:clamp(14px,1.8vw,20px);font-size:.88rem;line-height:1.68;color:#8d8d8d;}

/* the rule: one line per row, markers pinned to the column boundaries */
.faq-pin .rr-step{font-size:clamp(.55rem,1.05vh,.62rem);}
.faq-pin .rr-head{
  margin-top:clamp(12px,2.2vh,26px);
  font-size:clamp(.92rem,min(1.5vw,2.15vh),1.35rem);
}
.faq-pin .rr-copy{
  margin-top:clamp(10px,1.6vh,18px);
  font-size:clamp(.7rem,min(.94vw,1.42vh),.84rem);
}

.rr-rail{position:relative;height:1px;margin-top:clamp(20px,2.6vw,40px);}
.faq-pin .rr-rail{margin-top:clamp(16px,3vh,38px);}
.rr-ln{
  position:absolute;inset:0;background:rgba(0,0,0,.17);
  transform:scaleX(0);transform-origin:0 50%;
}
.rr-mk{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;opacity:0;}
/* the one that rides the tip of the rule; the fixed markers are what it leaves
   behind each time it lands on a boundary */
.rr-mk-tip{left:0;}
.rr-mk::before,.rr-mk::after{content:'';position:absolute;background:rgba(0,0,0,.5);}
.rr-mk::before{left:0;right:0;top:6px;height:1px;}
.rr-mk::after{top:0;bottom:0;left:6px;width:1px;}

/* the per-column rule only comes out once the row has stacked */
.rr-crule{display:none;position:relative;height:1px;margin-top:auto;}

/* below the breakpoint there is no screen to pin to: the answers stack and
   each draws its own rule as it scrolls up */
@media (max-width:900px){
  .faq-stage{height:auto;}
  .faq-pin{
    position:static;height:auto;overflow:visible;display:block;
    padding:clamp(64px,10vw,110px) clamp(18px,3.4vw,48px);
  }
  .faq-top{grid-template-columns:1fr;}
  .faq-kicker{flex-direction:row;justify-content:space-between;margin-bottom:26px;padding-top:0;}
  .faq-title{font-size:clamp(2rem,8vw,2.8rem);}
  .faq-sub{font-size:.9rem;}
  .rr-rows{gap:0;}
  .rr-cols{grid-template-columns:1fr;}
  .rr-col{padding-right:0;padding-top:clamp(28px,6vw,44px);}
  .rr-head{font-size:1.1rem;}
  .rr-copy{font-size:.86rem;}
  .rr-rail{display:none;}
  .rr-crule{display:block;margin-top:clamp(26px,5vw,40px);}
}

/* ══════════════════════════════════════════════════════════
   ABOUT — LANDING CURTAIN
   The picture sits behind a row of panels. Each one can be
   dragged up or clicked away; anything still standing lifts
   by itself as the section scrolls past.
   ══════════════════════════════════════════════════════════ */
.curtain{position:relative;height:190vh;background:var(--dark);}
.curtain-sticky{position:sticky;top:0;height:100vh;overflow:hidden;}

.curtain-art{position:absolute;inset:0;z-index:0;}
.curtain-art img{filter:grayscale(.2) contrast(1.06) brightness(.72);}
.curtain-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.72) 0%,rgba(8,8,10,.24) 38%,rgba(8,8,10,.6) 72%,rgba(8,8,10,.92) 100%);
}

.curtain-panels{position:absolute;inset:0;z-index:2;display:flex;}
.curtain-strip{
  position:relative;flex:1 1 0;min-width:0;height:100%;
  background:linear-gradient(180deg,#151518 0%,#0d0d10 52%,#050506 100%);
  border-right:1px solid rgba(255,255,255,.07);
  touch-action:none;will-change:transform;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding:clamp(88px,13vh,140px) 0 clamp(28px,5vh,54px);
}
.curtain-strip:last-child{border-right:none;}
.curtain-strip.is-up{pointer-events:none;}
/* a faint sheen so the panels read as physical rather than as flat blocks */
.curtain-strip::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,rgba(255,255,255,.055),transparent 42%);
}
.curtain-grip{
  width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.3);
  transition:background .35s var(--ease),width .35s var(--ease);
}
.curtain-strip:hover .curtain-grip{background:rgba(255,255,255,.7);width:38px;}
.curtain-strip b{font-size:.56rem;color:rgba(255,255,255,.28);font-weight:400;}

/* the type sits above the whole curtain */
.curtain-face{
  position:absolute;left:clamp(18px,3.4vw,48px);right:clamp(18px,3.4vw,48px);
  bottom:clamp(122px,19vh,196px);z-index:4;pointer-events:none;
}
.curtain-kicker{color:rgba(255,255,255,.5);margin-bottom:clamp(16px,2.6vh,30px);}
.curtain-title{
  font-size:clamp(2.4rem,8.6vw,7.2rem);font-weight:500;
  letter-spacing:-.045em;line-height:.9;color:#f4f4f4;
}
.curtain-title span{display:block;overflow:hidden;}
.curtain-title i{display:block;font-style:normal;}
.curtain-lede{
  margin-top:clamp(18px,3vh,34px);max-width:44ch;
  font-size:clamp(.88rem,1.5vw,1.15rem);line-height:1.6;color:rgba(240,240,240,.66);
}

.curtain-hint{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(74px,12vh,124px);z-index:5;
  color:rgba(255,255,255,.55);pointer-events:none;
  transition:opacity .5s var(--ease);
}
.curtain-hint.is-done{opacity:0;}
.curtain-rail{
  position:absolute;left:clamp(18px,3.4vw,48px);right:clamp(18px,3.4vw,48px);
  bottom:clamp(26px,4.4vh,46px);z-index:5;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  color:rgba(255,255,255,.5);
}

/* ══════════════════════════════════════════════════════════
   ABOUT — THE FILM OPENS OUT
   A small pane in the middle of a dark screen that grows to a
   full-bleed 16:9 as you scroll, the heading handing over to
   the copy once it is open.
   ══════════════════════════════════════════════════════════ */
.film{position:relative;height:330vh;background:var(--dark);}
.film-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--dark);color:#f2f2f2;
}
.film-kicker{
  position:absolute;top:clamp(88px,13vh,132px);left:clamp(18px,3.4vw,48px);
  z-index:5;color:rgba(255,255,255,.45);
}
.film-title{
  /* centred on the pin, then offset by script — position it here rather than
     letting it fall wherever an absolutely positioned flex child lands */
  position:absolute;left:0;right:0;top:50%;z-index:4;text-align:center;
  font-size:clamp(2rem,6.4vw,5.4rem);font-weight:500;
  letter-spacing:-.042em;line-height:.96;color:#f4f4f4;
  will-change:transform,opacity;pointer-events:none;
}
.film-frame{
  position:relative;overflow:hidden;z-index:2;flex:none;
  aspect-ratio:16/9;border-radius:16px;
  will-change:width,border-radius;
}
.film-frame video{width:100%;height:100%;object-fit:cover;display:block;}
.film-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,.1) 40%,rgba(8,8,10,.82) 100%);
  opacity:0;
}
.film-copy{
  position:absolute;z-index:6;left:clamp(18px,3.4vw,48px);right:clamp(18px,3.4vw,48px);
  bottom:clamp(40px,8vh,88px);
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  opacity:0;will-change:transform,opacity;
}
.film-copy p{max-width:52ch;font-size:clamp(.86rem,1.25vw,1.02rem);line-height:1.75;color:rgba(240,240,240,.76);}
.film-copy b{font-size:clamp(1rem,1.5vw,1.25rem);font-weight:500;letter-spacing:-.02em;color:#f4f4f4;}
.film-copy .btn{border-color:rgba(255,255,255,.4);}
.film-copy .btn:hover{background:#f2f2f2;color:var(--dark);}

@media (max-width:900px){
  .curtain{height:150vh;}
  .curtain-strip{padding-top:clamp(72px,11vh,110px);}
  .curtain-strip b{display:none;}
  .curtain-face{bottom:clamp(104px,17vh,150px);}
  .curtain-lede{font-size:.86rem;}

  .film{height:260vh;}
  .film-frame{border-radius:14px;}
  .film-title{font-size:clamp(1.8rem,10vw,3rem);}
  .film-copy{bottom:clamp(28px,6vh,60px);gap:14px;}
}

/* ══════════════════════════════════════════════════════════
   ABOUT — WHAT SETS US APART
   A pinned stack. Each card folds down off the bottom of the
   one above it, hinged along its top edge, so the one still
   arriving is seen edge-on — foreshortened into a trapezoid
   below the stack — before it swings flat and settles white.
   ══════════════════════════════════════════════════════════ */
.vstack{
  --vcard-h:clamp(74px,10.4vh,106px);
  position:relative;height:440vh;
  background:linear-gradient(163deg,#fbfbfb 0%,#f4f4f4 46%,#ececec 100%);
  color:var(--ink);
}
.vstack-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;
  padding:clamp(80px,12vh,120px) clamp(18px,3.4vw,48px) clamp(40px,7vh,80px);
}
.vstack-grid{
  width:100%;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.7fr);
  gap:clamp(24px,4vw,72px);align-items:start;
}
.vstack-title{
  font-size:clamp(1.9rem,min(5vw,6vh),4.2rem);font-weight:500;
  letter-spacing:-.045em;line-height:.94;color:#3e3e3e;
}
.vstack-intro{
  max-width:38ch;font-size:clamp(.78rem,1.55vh,.94rem);
  line-height:1.6;color:#8b8b8b;
}

/* the stack itself — perspective lives here so the folds foreshorten */
.vstack-cards{
  margin-top:clamp(24px,5vh,60px);
  perspective:1500px;perspective-origin:50% 0%;
}
/* the slot is the space a card takes up in the column; it grows as the card
   swings down, and stays overflow-visible so the folding card can hang below */
.vcard-slot{height:0;will-change:height;}
.vcard{
  height:var(--vcard-h);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  align-items:center;gap:clamp(18px,3vw,52px);
  padding:0 clamp(20px,2.6vw,44px);
  background:#fff;
  border-top:1px solid rgba(0,0,0,.055);
  box-shadow:0 26px 54px rgba(0,0,0,.055);
  /* hinged along the top edge, like a page falling forward */
  transform-origin:50% 0%;
  backface-visibility:hidden;
  will-change:transform,filter;
}
.vcard-slot:first-child .vcard{border-top:none;}
.vcard h3{
  font-size:clamp(.98rem,min(1.6vw,2.3vh),1.5rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.15;color:#3a3a3a;
}
.vcard p{
  font-size:clamp(.72rem,min(.94vw,1.4vh),.86rem);
  line-height:1.6;color:#7f7f7f;
}

@media (max-width:900px){
  .vstack{--vcard-h:auto;height:auto;}
  .vstack-pin{
    position:static;height:auto;overflow:visible;display:block;
    padding:clamp(64px,10vw,110px) clamp(18px,3.4vw,48px);
  }
  .vstack-grid{grid-template-columns:1fr;gap:20px;}
  .vstack-title{font-size:clamp(2rem,8vw,2.8rem);}
  .vstack-intro{font-size:.9rem;max-width:none;}
  .vstack-cards{margin-top:30px;perspective:900px;}
  .vcard-slot{height:auto;}
  .vcard{
    grid-template-columns:1fr;align-items:start;gap:10px;
    padding:clamp(20px,5vw,28px);height:auto;
  }
  .vcard h3{font-size:1.05rem;}
  .vcard p{font-size:.85rem;}
}

/* ══════════════════════════════════════════════════════════
   ABOUT — APPROACH, pinned on the dark grid
   ══════════════════════════════════════════════════════════ */
.approach{position:relative;height:300vh;background:var(--dark);}
.approach-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,12vh,120px) clamp(18px,3.4vw,48px) clamp(40px,7vh,80px);
  background:radial-gradient(ellipse at 50% 6%,#191a1e 0%,var(--dark) 64%);
  color:#f2f2f2;
}
.approach-grain{
  position:absolute;inset:0;z-index:0;opacity:.55;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 74px);
}
.approach-pin > .shell{position:relative;z-index:1;width:100%;}
.approach-pin .sect-head{color:rgba(255,255,255,.42);margin-bottom:clamp(22px,4vh,50px);}
.approach-title{
  font-size:clamp(1.7rem,min(4.4vw,5.4vh),3.5rem);font-weight:500;
  letter-spacing:-.042em;line-height:1;color:#f4f4f4;
  margin-bottom:clamp(26px,5.4vh,66px);max-width:22ch;
}
/* the rule reveal, inverted for the dark plate */
.approach-pin .rr-step-letter{color:rgba(255,255,255,.22);}
.approach-pin .rr-head{color:#f2f2f2;font-size:clamp(1rem,min(1.6vw,2.3vh),1.45rem);}
.approach-pin .rr-copy{color:rgba(240,240,240,.58);font-size:clamp(.72rem,min(.94vw,1.4vh),.86rem);}
.approach-pin .rr-ln{background:rgba(255,255,255,.2);}
.approach-pin .rr-mk::before,
.approach-pin .rr-mk::after{background:rgba(255,255,255,.6);}
.approach-pin .rr-rail{margin-top:clamp(18px,3.4vh,44px);}

/* ══════════════════════════════════════════════════════════
   ABOUT — PURPOSE OVER PANIC
   A small rounded pane that zooms out into a full frame.
   ══════════════════════════════════════════════════════════ */
.zoom{
  position:relative;height:400vh;
  background:linear-gradient(180deg,#fbfbfb 0%,#f3f3f3 50%,#ececec 100%);
  color:var(--ink);
}
.zoom-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink);
}
.zoom-corner{position:absolute;z-index:6;color:#7a7a7a;line-height:1.8;}
.zoom-corner-tl{top:clamp(88px,13vh,132px);left:clamp(18px,3.4vw,48px);}
.zoom-corner-br{
  bottom:clamp(34px,6vh,70px);right:clamp(18px,3.4vw,48px);
  color:var(--ink);border-bottom-color:rgba(0,0,0,.35);
}
.zoom-frame{
  position:relative;overflow:hidden;z-index:2;flex:none;
  will-change:width,height,border-radius;
}
.zoom-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  will-change:transform;
}
.zoom-veil{
  position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,rgba(8,8,10,.3) 0%,rgba(8,8,10,.08) 34%,rgba(8,8,10,.72) 74%,rgba(8,8,10,.93) 100%);
}
.zoom-copy{
  position:absolute;z-index:7;left:clamp(18px,3.4vw,48px);right:clamp(18px,3.4vw,48px);
  bottom:clamp(78px,13vh,140px);
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  opacity:0;will-change:transform,opacity;
}
.zoom-copy h2{
  font-size:clamp(2rem,6.4vw,5.2rem);font-weight:500;
  letter-spacing:-.045em;line-height:.94;color:#fff;
}
.zoom-copy p{max-width:50ch;font-size:clamp(.84rem,1.2vw,1rem);line-height:1.72;color:rgba(240,240,240,.78);}
.zoom-copy b{font-size:clamp(.98rem,1.4vw,1.2rem);font-weight:500;letter-spacing:-.02em;color:#fff;}

/* ══════════════════════════════════════════════════════════
   ABOUT — CREATIVE LAB
   The frames fly in one at a time from whichever edge each was
   given, and settle scattered across the field.
   ══════════════════════════════════════════════════════════ */
.lab{
  position:relative;height:420vh;
  background:linear-gradient(180deg,#dcdcdc 0%,#d2d2d2 60%,#cbcbcb 100%);
  color:var(--ink);
}
.lab-pin{position:sticky;top:0;height:100vh;overflow:hidden;}
.lab-head{
  /* centred on the pin — the frames fly in over the top of it */
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:1;text-align:center;width:min(92vw,900px);
}
.lab-head .mono{color:#7a7a7a;}
.lab-head h2{
  margin-top:16px;font-size:clamp(2rem,6vw,4.8rem);font-weight:500;
  letter-spacing:-.045em;line-height:.94;color:#4a4a4a;
}
.lab-sub{
  margin:18px auto 0;max-width:46ch;
  font-size:clamp(.8rem,1.15vw,.95rem);line-height:1.65;color:#7a7a7a;
}
.lab-field{position:absolute;inset:0;z-index:3;pointer-events:none;}
.lab-card{
  position:absolute;left:50%;top:56%;
  width:clamp(124px,15vw,230px);height:auto;
  border-radius:7px;overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.2);
  will-change:transform,opacity;
}
.lab-card img{width:100%;height:auto;max-height:50vh;object-fit:contain;display:block;}

@media (max-width:900px){
  .approach{height:auto;}
  .approach-pin{
    position:static;height:auto;overflow:visible;display:block;
    padding:clamp(64px,10vw,110px) clamp(18px,3.4vw,48px);
  }
  .approach-title{font-size:clamp(1.7rem,7vw,2.5rem);max-width:none;}
  .approach-pin .rr-head{font-size:1.1rem;}
  .approach-pin .rr-copy{font-size:.86rem;}

  .zoom{height:320vh;}
  .zoom-corner-tl{top:clamp(76px,11vh,110px);}
  .zoom-copy{bottom:clamp(56px,10vh,96px);}

  .lab{height:340vh;}
  .lab-head{width:88vw;}
  .lab-card{width:clamp(96px,26vw,140px);}
}

/* ══════════════════════════════════════════════════════════
   THE CURTAIN INSIDE A PAGE HERO
   Same panels as the about landing, sitting over the hero
   picture — above it, but under the headline, which stays
   readable the whole way through.
   ══════════════════════════════════════════════════════════ */
/* `.phero-stage > *:not(.phero-media)` sets position:relative and outranks
   `.curtain-panels`, which would leave the panels in the flex flow — a couple of
   hundred pixels tall and pushed down by the stage's top padding. Restate it. */
.phero .curtain-panels{position:absolute;inset:0;z-index:1;}
.phero .curtain-strip{padding-top:clamp(96px,15vh,160px);}
/* the hero already has a rail along the bottom, so the prompt sits top-right */
.phero .curtain-hint{
  position:absolute;z-index:5;
  left:auto;right:clamp(18px,3.4vw,48px);
  top:clamp(96px,15vh,152px);bottom:auto;transform:none;
  text-align:right;
}
/* The headline sits above the panels so it stays readable through the reveal —
   but it must not swallow the drag. Links inside it stay clickable. */
.phero-kicker,.phero-title,.phero-lede,.phero-rail,.phero .tags{pointer-events:none;}
.phero a,.phero button{pointer-events:auto;}
/* the legal and 404 heroes carry no picture; the panels lift to the plain
   ground, which still reads as the page opening up */
.phero:not(:has(.phero-media)) .curtain-strip{
  background:linear-gradient(180deg,#121215 0%,#0c0c0f 54%,#08080a 100%);
}

@media (max-width:900px){
  .phero .curtain-hint{top:clamp(84px,13vh,120px);font-size:.58rem;}
  .phero .curtain-strip b{display:none;}
}

/* ══════════════════════════════════════════════════════════
   CONTACT — THE PUPPET DROPS IN
   The film is white-on-white, so the section ground is set to
   the same pure white. Nothing tints or gradients it: a single
   shade off and the frame edge would show as a rectangle.
   ══════════════════════════════════════════════════════════ */
/* Tall enough for the wipe to run: 160vh of actual scroll, of which the last
   100vh is exactly the time the form needs to climb one screen. The -100vh
   pull-up on .talk is tied to this height. */
.lion{position:relative;height:260vh;background:#fff;color:var(--ink);}
.lion-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
}
/* the bands wipe to the dark plate the form sits on */
.lion-slats{z-index:8;}
.lion-slats .slat,.lion-slats .slat-fill{background:var(--dark);}
.lion-film{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(96vw,112vh);aspect-ratio:16/9;height:auto;
  object-fit:cover;display:block;pointer-events:none;
}
/* Sits in whatever room is left under the film — the film's own height is
   width x 9/16, so that is where this starts — and centres itself there
   instead of leaving a hole above the scroll cue. */
.lion-face{
  position:absolute;left:0;right:0;
  top:min(54vw,63vh);bottom:clamp(84px,13vh,130px);
  z-index:2;text-align:center;padding:0 clamp(18px,3.4vw,48px);
  display:flex;flex-direction:column;justify-content:center;
}
.lion-title{
  font-size:clamp(1.9rem,6.2vw,5rem);font-weight:500;
  letter-spacing:-.045em;line-height:.98;color:#3e3e3e;
}
.lion-title span{display:block;overflow:hidden;}
.lion-title i{display:block;font-style:normal;}
.lion-sub{
  margin:clamp(14px,2.4vh,26px) auto 0;max-width:44ch;
  font-size:clamp(.82rem,1.2vw,1rem);line-height:1.65;color:#7f7f7f;
}
.lion-cue{
  position:absolute;left:50%;bottom:clamp(26px,5vh,54px);transform:translateX(-50%);
  z-index:3;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(0,0,0,.28);display:grid;place-items:center;
  transition:border-color .35s var(--ease);
}
.lion-cue:hover{border-color:var(--ink);}
.lion-cue i{
  width:5px;height:5px;border-right:1px solid #4a4a4a;border-bottom:1px solid #4a4a4a;
  transform:translateY(-1px) rotate(45deg);
  animation:lion-nudge 1.9s ease-in-out infinite;
}
@keyframes lion-nudge{0%,100%{transform:translateY(-2px) rotate(45deg);}50%{transform:translateY(2px) rotate(45deg);}}

/* ══════════════ LET'S WORK TOGETHER ══════════════ */
/* pulled up one screen so its leading edge enters as the bands start to close;
   flat --dark at the top so that edge is never visible against them */
.talk{
  margin-top:-100vh;position:relative;z-index:4;
  background:var(--dark);color:#f2f2f2;
  padding:clamp(76px,11vw,150px) clamp(18px,3.4vw,48px) clamp(70px,10vw,130px);
}
.talk-grain{
  position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 74px);
}
.talk-inner{position:relative;z-index:1;max-width:1120px;margin:0 auto;text-align:center;}
.talk-kicker{color:rgba(255,255,255,.6);line-height:1.75;}
.talk-title{
  margin-top:clamp(20px,3vw,38px);
  font-size:clamp(2.1rem,6.4vw,5.2rem);font-weight:500;
  letter-spacing:-.045em;line-height:.98;color:#f4f4f4;
}
.talk-sub{
  margin:clamp(14px,2vw,24px) auto 0;max-width:46ch;
  font-size:clamp(.86rem,1.2vw,1rem);line-height:1.7;color:rgba(240,240,240,.6);
}
.talk-form{
  margin-top:clamp(40px,6vw,80px);text-align:left;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);
}
.talk-form .full{grid-column:1/-1;}
.talk-form .form-status{grid-column:1/-1;text-align:center;}
.field{position:relative;display:block;}
.field input,.field select,.field textarea{
  width:100%;padding:19px 22px;border-radius:9px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.022);
  font-size:.96rem;color:#f2f2f2;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field textarea{resize:vertical;min-height:clamp(120px,15vw,170px);}
.field input::placeholder,.field textarea::placeholder{color:rgba(240,240,240,.42);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.045);
}
.field select{appearance:none;-webkit-appearance:none;color:rgba(240,240,240,.42);}
.field select:valid{color:#f2f2f2;}
.field select option{background:var(--dark-2);color:#f2f2f2;}
/* the chevron the native control no longer draws */
.field-select::after{
  content:'\2193';position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:.8rem;color:rgba(240,240,240,.45);pointer-events:none;
}
.talk-send{
  justify-self:end;align-self:center;width:fit-content;
  color:#f2f2f2;border-bottom-color:rgba(255,255,255,.45);
}

.talk-or{
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);
  margin:clamp(44px,6vw,84px) 0 clamp(34px,5vw,64px);
  color:rgba(255,255,255,.5);
}
.talk-or::before,.talk-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.16);}

.talk-book{
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:min(100%,520px);margin:0 auto;padding:22px 30px;
  border:1px solid rgba(255,255,255,.28);border-radius:10px;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.talk-book svg{
  width:19px;height:19px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;
}
.talk-book:hover{background:#f2f2f2;color:var(--dark);border-color:#f2f2f2;}
.talk-mail{margin-top:clamp(26px,4vw,46px);font-size:.92rem;color:rgba(240,240,240,.5);}
.talk-mail a{color:#f2f2f2;border-bottom:1px solid rgba(255,255,255,.34);}

@media (max-width:900px){
  .reach-top{grid-template-columns:1fr;gap:16px;align-items:start;}
  .reach-col{margin-right:0;padding:clamp(18px,5vw,26px) 0;}
  .reach-col:hover{background:none;}
  .reach-shot{aspect-ratio:4/5;}

  .lion-film{width:172vw;}
  .lion-face{top:97vw;bottom:clamp(70px,10vh,110px);}
  .talk-form{grid-template-columns:1fr;}
  .talk-send{justify-self:start;margin-top:6px;}
  .talk-book{padding:18px 22px;}
}

/* ══════════════════════════════════════════════════════════
   CONTACT — SUPPORT & LOCATION
   Same rule reveal as the services FAQ and the about approach;
   these columns are links, so they also answer to the pointer.
   ══════════════════════════════════════════════════════════ */
.reach-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:end;
  margin-bottom:clamp(40px,6vw,88px);
}
.reach-rows{margin-bottom:clamp(34px,4.6vw,64px);}
.reach-col{
  position:relative;
  padding:clamp(20px,2.2vw,30px) clamp(20px,2.2vw,32px) clamp(24px,2.6vw,36px);
  margin-right:clamp(10px,1.4vw,22px);
  border-radius:12px;
  transition:background .4s var(--ease);
}
.reach-col:hover{background:rgba(0,0,0,.035);}
.reach-col .rr-head{
  margin-top:clamp(14px,1.8vw,22px);
  font-size:clamp(1.05rem,1.75vw,1.5rem);color:var(--ink);
  transition:color .35s var(--ease);
}
.reach-col:hover .rr-head{color:var(--accent);}
.reach-act{
  display:flex;align-items:center;gap:9px;
  margin-top:clamp(16px,2vw,26px);color:#8b8b8b;
  transition:gap .4s var(--ease),color .35s var(--ease);
}
.reach-col:hover .reach-act{gap:16px;color:var(--ink);}
.reach-act i{font-style:normal;font-size:.85rem;}
/* the rule belongs to the row, so it must clear the padded column above it */
.reach-rows .rr-rail{margin-top:0;}

.reach-shot{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/7;}
.reach-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.reach-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(20px,2.6vw,38px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(180deg,transparent,rgba(6,6,8,.72));
  color:rgba(255,255,255,.82);
}

@media (max-width:900px){
  .reach-top{grid-template-columns:1fr;gap:16px;align-items:start;}
  .reach-col{margin-right:0;padding:clamp(18px,5vw,26px) 0;}
  .reach-col:hover{background:none;}
  .reach-shot{aspect-ratio:4/5;}

  .lion-film{width:172vw;}
  .lion-face{top:97vw;bottom:clamp(70px,10vh,110px);}
  .talk-form{grid-template-columns:1fr;}
  .talk-send{justify-self:start;margin-top:6px;}
  .talk-book{padding:18px 22px;}
}

/* ══════════════════════════════════════════════════════════
   CONTACT — SUPPORT & LOCATION
   ══════════════════════════════════════════════════════════ */
.reach-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4.4vw,84px);align-items:stretch;
}
.reach-shot{position:relative;border-radius:16px;overflow:hidden;min-height:clamp(320px,42vw,560px);}
.reach-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.reach-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(20px,2.4vw,32px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(180deg,transparent,rgba(6,6,8,.7));
  color:rgba(255,255,255,.82);
}
.reach-side{display:flex;flex-direction:column;justify-content:center;}
.reach-rows{margin-top:clamp(30px,4vw,56px);}
/* label above value, so the row carries both without a second column */
.reach-stack{display:flex;flex-direction:column;gap:7px;min-width:0;}
.reach-stack b{font-weight:400;color:#9a9a9a;font-size:.6rem;}

@media (max-width:900px){
  .reach-top{grid-template-columns:1fr;gap:16px;align-items:start;}
  .reach-col{margin-right:0;padding:clamp(18px,5vw,26px) 0;}
  .reach-col:hover{background:none;}
  .reach-shot{aspect-ratio:4/5;}

  .lion-film{width:172vw;}
  .lion-face{top:97vw;bottom:clamp(70px,10vh,110px);}
  .talk-form{grid-template-columns:1fr;}
  .talk-send{justify-self:start;margin-top:6px;}
  .talk-book{padding:18px 22px;}
}

@media (max-width:900px){
  .lion{height:220vh;}
}

/* Offices — Dubai & Egypt */
.offices{margin-bottom:clamp(34px,4.6vw,64px);}
.offices__label{color:#8b8b8b;margin-bottom:16px;}
.offices__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);}
.office{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2.4vw,34px);border:1px solid rgba(0,0,0,.12);border-radius:14px;transition:border-color .35s var(--ease),background .35s var(--ease);}
.office:hover{border-color:var(--accent);background:rgba(0,0,0,.02);}
.office__city{font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:600;letter-spacing:-.03em;margin-bottom:6px;color:var(--ink);}
.office__addr{color:#6d6d6d;margin-bottom:10px;}
.office a{color:var(--ink);font-size:clamp(.95rem,1.2vw,1.1rem);transition:color .3s ease;}
.office a:hover{color:var(--accent);}
@media (max-width:700px){.offices__grid{grid-template-columns:1fr;}}

@media (max-width:900px){ .lab-head{ top:15%; transform:translate(-50%,0); } .lab-card{ width:clamp(110px,34vw,160px); } }

@media (max-width:900px){ .lab-card img{ max-height:27vh; } .lab-sub{ font-size:.82rem; } }