/* About Us, first block "Leadership" (variant A, chosen 2026-10-13): story and three numbers on the left in glass, facts as emblems in a glass panel,
   Nik's card on the right, brand light and lines behind. The numbers arrive with a soft odometer (/assets/about-lead.js). Scoped to #scan.lead. */
#scan.lead{position:relative;isolation:isolate;min-height:calc(100svh - 104px);display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,24vw,320px);
  gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(16px,3vh,40px) 0}
html.snap #scan.lead{min-height:calc(100svh - var(--snap-top,104px))}

/* brand background: drifting burgundy light and the brandbook lines, full bleed */
#scan.lead .bg{position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none}
#scan.lead .bg canvas{position:absolute;inset:0;width:100%;height:100%}
#scan.lead .haze{position:absolute;border-radius:50%;filter:blur(50px)}
#scan.lead .haze::before{content:"";position:absolute;inset:0;border-radius:inherit;animation:ldrift 16s ease-in-out infinite}
#scan.lead .hz1{width:40%;height:60%;left:6%;top:30%}#scan.lead .hz1::before{background:radial-gradient(circle,rgba(194,31,46,.45),rgba(94,10,26,0) 70%)}
#scan.lead .hz2{width:36%;height:72%;right:4%;top:12%}#scan.lead .hz2::before{background:radial-gradient(circle,rgba(163,21,42,.5),rgba(94,10,26,0) 70%);animation-delay:-6s}
#scan.lead .hz3{width:26%;height:40%;left:38%;top:58%}#scan.lead .hz3::before{background:radial-gradient(circle,rgba(242,84,91,.22),rgba(242,84,91,0) 70%);animation-delay:-11s}
@keyframes ldrift{50%{transform:translate(4%,-6%) scale(1.08)}}

#scan.lead h1{font-size:clamp(30px,min(4vw,6.2vh),60px);line-height:1.02;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
#scan.lead .sub{margin-top:clamp(10px,1.6vh,16px);font-size:clamp(15px,min(1.25vw,2vh),18px);line-height:1.55;color:#C9CDD4;max-width:600px}
#scan.lead .sub b{color:#fff;font-weight:600}

/* three numbers, each in its own glass tile */
#scan.lead .nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-top:clamp(22px,3.6vh,40px)}
#scan.lead .nt .in{padding:clamp(14px,2.2vh,22px) clamp(16px,1.6vw,22px)}
#scan.lead .num{font-size:clamp(38px,min(3.9vw,6.8vh),60px);font-weight:800;letter-spacing:-.045em;line-height:.95;white-space:nowrap;font-feature-settings:"tnum" 1}
#scan.lead .num .u{background:var(--flow) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 7s linear infinite}
#scan.lead .lbl{margin-top:clamp(6px,1vh,10px);font-size:clamp(13px,min(1.1vw,1.8vh),15px);line-height:1.4;color:#C9CDD4}

/* odometer: an overlay of digit columns over the real figure; the real text comes back when it lands */
#scan.lead .num .d{position:relative;display:inline-block}
#scan.lead .num .d.run{color:transparent}
#scan.lead .num .d .ov{position:absolute;inset:0;display:flex;justify-content:flex-end;color:#fff;white-space:nowrap;opacity:0;transition:opacity .6s ease}
#scan.lead .num .d .ov.go{opacity:1}
/* the column is taller than the figure (and starts above it), so its fade-out edges never touch the digit that lands:
   the rolling digit and the real text are pixel-identical, nothing shifts when the overlay is removed */
#scan.lead .num .d .col{display:block;overflow:hidden;height:calc(var(--h)*1.6);margin-top:calc(var(--h)*-.3);
  -webkit-mask:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
/* 2026-10-17: composited (moves on the GPU, never re-drawn per frame) and an even ease-in-out, so the landing is one smooth glide, not a long crawl that snaps pixel by pixel */
#scan.lead .num .d .strip{display:block;transform:translate3d(0,calc(var(--h)*.05),0);will-change:transform;backface-visibility:hidden;transition:transform var(--t,2.2s) cubic-bezier(.65,0,.35,1)}
#scan.lead .num .d .strip span{display:block;height:calc(var(--h)*1.5);line-height:calc(var(--h)*1.5)}

/* facts: four emblems in one glass panel */
#scan.lead .fxp{margin-top:clamp(10px,1.2vw,16px)}
#scan.lead .fxp .in{padding:clamp(16px,2.4vh,22px) clamp(18px,1.8vw,26px)}
/* three facts side by side, the same shape each: emblem, red label, the fact, one quiet line */
#scan.lead .fx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#scan.lead .fx .fi+.fi{border-left:1px solid rgba(255,255,255,.1)}
#scan.lead .fx .fi{padding:0 clamp(12px,1.4vw,20px)}
#scan.lead .fx .fi:first-child{padding-left:0}#scan.lead .fx .fi:last-child{padding-right:0}
#scan.lead .fi .kk{display:block;margin-bottom:5px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#F2545B}
#scan.lead .fi{display:flex;flex-direction:column;align-items:flex-start;gap:12px;opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(1.1s + var(--k)*.12s)}
#scan.lead .fx.shown .fi{opacity:1;transform:none}
#scan.lead .em{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#8a1628,#4a0b16 55%,#2a060d);
  border:1px solid rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 18px rgba(226,50,62,.35)}
#scan.lead .em .ico{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#scan.lead .fi b{display:block;color:#fff;font-weight:600;font-size:clamp(14px,1.1vw,16px);line-height:1.3}
#scan.lead .fi small{display:block;margin-top:2px;color:#C9CDD4;font-size:13px;line-height:1.35}

/* Nik's card: photo placeholder until the real photo is ready */
#scan.lead .por{position:relative;overflow:hidden;aspect-ratio:4/5.4;border-radius:22px;background:linear-gradient(160deg,#1A0C10 0%,#0B0B0F 45%,#13060A 100%);
  box-shadow:var(--lg-shadow),0 0 0 1px rgba(242,84,91,.32)}
#scan.lead .por::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 45% at 50% 32%,rgba(214,48,58,.42),transparent 70%)}
#scan.lead .por .sil{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:82%;height:auto}
#scan.lead .por .ph{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:2;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);background:rgba(0,0,0,.45);padding:3px 8px;border-radius:999px}
#scan.lead .por .lg{position:absolute;left:18px;top:16px;width:96px;z-index:2}
#scan.lead .por .who{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;background:linear-gradient(180deg,transparent,rgba(5,5,5,.92) 55%)}
#scan.lead .por .who b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
#scan.lead .por .who span{display:block;margin-top:4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#A3A9B4}

@media (max-width:900px){
  #scan.lead{grid-template-columns:1fr;min-height:0}
  #scan.lead .por{max-width:330px}
  #scan.lead .fx{grid-template-columns:1fr;gap:16px}#scan.lead .fx .fi{padding:0!important;border:0!important}
  #scan.lead .num{font-size:clamp(28px,8vw,40px)}
}
@media (max-width:560px){#scan.lead .nums{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#scan.lead .haze::before,#scan.lead .num .u{animation:none}#scan.lead .fi{transition:none;opacity:1;transform:none}}
/* numbers centred in their tiles */
#scan.lead .nt .in{text-align:center}
/* the plus is smaller and hangs just outside the figure, so the figure itself sits exactly in the centre of its tile */
#scan.lead .num{display:inline-block;position:relative}
/* 2026-10-20 (Nik): the + is part of the figure, so the whole figure (£100M+, 9+, 50+) centres in its tile, and it sits level with the
   middle of the digits in every tile instead of floating above; the figures are a touch smaller so £100M+ keeps clear of the tile edge */
#scan.lead .num .pl{position:relative;display:inline-block;margin-left:.04em;font-size:.72em;line-height:1;vertical-align:baseline;top:-.15em}   /* measured: lifts the + ink centre onto the digits ink centre */
#scan.lead .num{font-size:clamp(34px,min(3.4vw,6vh),52px)}
/* facts: every line on one line, the same size in all three columns */
#scan.lead .fx .fi b,#scan.lead .fx .fi small,#scan.lead .fx .fi .kk{white-space:nowrap}
#scan.lead .fx .fi b{font-size:clamp(13px,1.05vw,15px)}
#scan.lead .fx .fi small{font-size:clamp(12px,.95vw,13px)}
/* fact labels (Experience, Education, Working languages): a touch larger, in the brand's flowing gradient instead of flat red */
#scan.lead .fx .fi .kk{font-size:12.5px;letter-spacing:.16em;margin-bottom:6px;color:transparent;
  background:var(--flow) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:flow 7s linear infinite}
@media (prefers-reduced-motion:reduce){#scan.lead .fx .fi .kk{animation:none}}
/* the line under the headline stays on one line on desktop */
@media (min-width:1024px){#scan.lead .sub{max-width:none;white-space:nowrap}}
/* Nik's photo in the card (temporary studio shot on white): it fills the card, a soft shade at the top keeps the logo readable
   and the existing shade at the bottom carries the name */
#scan.lead .por .me{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
#scan.lead .por::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,5,.55),transparent 22%,transparent 58%,rgba(5,5,5,.2))}
/* the photo melts into the dark card on every side, so the white studio background never shows a hard edge */
#scan.lead .por .me{
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 62%,transparent 92%);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 62%,transparent 92%);
  mask-composite:intersect}

/* 2026-10-16, launch polish: the first screen assembles at once. The counters show their columns from the first frame (resting on 0)
   and start turning straight away; the facts follow a moment later instead of after a second of empty panel. */
#scan.lead .num .d .ov{opacity:1;transition:none}
#scan.lead .fi{transition-delay:calc(.35s + var(--k)*.1s)}

/* 2026-10-20 number study (?num=a|b|c, set by about-lead.js). Only opacity and transform animate. */
html[data-num] #scan.lead .num{will-change:auto}
/* A · calm: each tile's figure fades up 10px, one after another */
html[data-num="a"] #scan.lead .num{opacity:0;transform:translate3d(0,10px,0);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1.2s cubic-bezier(.22,.61,.36,1)}
html[data-num="a"] #scan.lead .nt:nth-child(2) .num{transition-delay:.12s}html[data-num="a"] #scan.lead .nt:nth-child(3) .num{transition-delay:.24s}
html[data-num="a"] #scan.lead.num-go .num{opacity:1;transform:none}
/* B · count-up: the figure keeps its final width (set in JS) and counts with a soft landing; the tiles fade in with it */
html[data-num="b"] #scan.lead .num .cb{display:inline-block;text-align:right}
html[data-num="b"] #scan.lead .num{opacity:0;transition:opacity .7s ease}
html[data-num="b"] #scan.lead.num-go .num{opacity:1}
/* C · rise: each figure slides up from under the tile's edge, like the Sponsorship headings */
html[data-num="c"] #scan.lead .num{overflow:hidden;padding:.35em 0 .08em;margin:-.35em 0 -.08em}
html[data-num="c"] #scan.lead .num .mr{display:inline-block;transform:translate3d(0,105%,0);transition:transform 1.1s cubic-bezier(.16,1,.3,1);will-change:transform;backface-visibility:hidden}
/* while the figures rise, the gradient on M and + holds still (it repaints every frame) and the glass behind is not re-blurred */
html[data-num="c"] #scan.lead:not(.num-done) .num .u{animation-play-state:paused}
html[data-num="c"] #scan.lead .nt:nth-child(2) .mr{transition-delay:.1s}html[data-num="c"] #scan.lead .nt:nth-child(3) .mr{transition-delay:.2s}
html[data-num="c"] #scan.lead.num-go .num .mr{transform:none}
@media (prefers-reduced-motion:reduce){html[data-num] #scan.lead .num,html[data-num] #scan.lead .num .mr{transition:none!important;opacity:1!important;transform:none!important}}

/* 2026-10-20 (Nik): figure and label sit in the vertical middle of each tile (the tiles share one height; a two-line label no longer pulls the others up) */
#scan.lead .nums>.nt{display:flex}
#scan.lead .nt .in{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box}

/* 2026-10-27 (Nik): "9 years+" and "50 deals+" like "£100M+": the figure white, the unit and + in brand red, a little smaller than the figure.
   Every label holds two lines of room, so the three blocks are the same height and the figures sit on one line across the tiles. */
#scan.lead .num .uw{font-size:.52em;letter-spacing:-.01em;margin-left:.12em}
#scan.lead .nt .lbl{min-height:2.8em;display:flex;align-items:flex-start;justify-content:center}