:root{
  --navy:#161B52; --bar:#1E2466; --ink:#0C0F2E; --overlay:#11163F;
  --soft:#4A5285; --faint:#9AA0BC; --paper:#FCFCFA; --shadow:#F2F2EE;
  --red:#DC2030; --rule:#C8CDDB; --rf:#E2E4EE;
  --d:'Big Shoulders Display',sans-serif; --s:'Inter Tight',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--s);background:var(--ink);color:var(--navy);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
img{display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(22px,5vw,58px);position:relative}
.lab{font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.lab.red{color:var(--red)}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:16px 30px;text-decoration:none;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff}
.btn-line{border:1px solid rgba(255,255,255,.35);color:#fff}

/* film grain over everything, very low */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* the dark flow: hero + exhibit share one continuous surface with data columns */
.darkflow{position:relative;background:var(--ink)}
.darkflow::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 86px,rgba(255,255,255,.028) 86px 87px)}
.darkflow::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 70% 0%,rgba(30,36,102,.5),transparent 60%)}
.darkflow > *{position:relative;z-index:2}

/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:26px clamp(22px,5vw,58px)}
.brand{text-decoration:none;line-height:1.1;display:flex;align-items:center;gap:14px}
.brand img{height:44px;width:auto;display:block}
.brand .who{font-family:var(--d);font-weight:700;font-size:19px;letter-spacing:.01em;color:#fff;white-space:nowrap}
@media(max-width:500px){.brand img{height:32px}.brand .who{display:none}}
.brand-plate{display:inline-flex;align-items:center;background:var(--paper);padding:9px 16px;border-radius:6px;text-decoration:none}
.brand-plate img{display:block;height:30px;width:auto}
.foot .brand-plate{padding:11px 18px;border-radius:7px}
.foot .brand-plate img{height:36px}
@media(max-width:520px){.brand-plate img{height:24px}.brand-plate{padding:7px 12px}}
.foot .brandmark img{height:38px;width:auto;display:block;margin-bottom:14px}
.nl{display:flex;gap:28px;align-items:center}
.nl a{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78);text-decoration:none}
.nl a:hover{color:#fff}
.nl .btn{padding:13px 24px;font-size:11px;color:#fff}
@media(max-width:860px){.nl a:not(.btn){display:none}}

/* HERO with scanner */
.hero{padding:104px 0 40px;overflow:visible}
.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(24px,3vw,50px);align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hmeta{display:flex;gap:clamp(14px,1.8vw,26px);flex-wrap:wrap;margin-bottom:30px}
.hmeta .k{font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:6px}
.hmeta .v{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.hmeta .v.r{color:var(--red)}
h1{font-family:var(--d);font-weight:800;font-size:clamp(40px,5.8vw,68px);line-height:.88;color:#fff;position:relative;z-index:3}
h1 .rw{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
h1 .rw span{display:block;transform:translateY(110%);animation:rise .85s cubic-bezier(.2,.75,.2,1) forwards}
h1 .rw:nth-child(2) span{animation-delay:.1s}
h1 .rw:nth-child(3) span{animation-delay:.2s}
@keyframes rise{to{transform:translateY(0)}}
.hsub{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.72);max-width:530px;margin-top:26px;opacity:0;animation:fd .9s ease .55s forwards}
.hcta{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap;opacity:0;animation:fd .9s ease .75s forwards}
@keyframes fd{to{opacity:1}}

/* scanner portrait: colour base, sweeping strip renders mono, settles right */
.scanwrap{position:relative;margin-left:0;margin-right:clamp(-70px,-4vw,-20px)}
@media(max-width:900px){.scanwrap{margin-right:0}}
.scanwrap .pw{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 96%,rgba(0,0,0,.6) 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 96%,rgba(0,0,0,.6) 100%)}
.scanwrap .base{width:100%;filter:saturate(1.26) contrast(1.05) brightness(1.0)}
.scanner{position:absolute;top:0;bottom:0;width:18%;left:0;z-index:3;
  animation:sweepBox 2.8s cubic-bezier(.55,.05,.35,1) .7s forwards}
.scanner .g{position:absolute;top:0;bottom:0;left:0;width:100%;overflow:hidden;
  animation:gFade .7s ease 3.7s forwards}
.scanner .g img{max-width:none;width:calc(100%/0.18);
  filter:grayscale(1) contrast(1.2) brightness(.8);
  animation:sweepImg 2.8s cubic-bezier(.55,.05,.35,1) .7s forwards}
.scanner::before,.scanner::after{content:"";position:absolute;top:0;bottom:0;width:1.5px;background:var(--red);z-index:4;
  box-shadow:0 0 14px rgba(220,32,48,.6)}
.scanner::before{left:0}.scanner::after{right:0}
@keyframes sweepBox{0%{left:0}100%{left:80%}}
@keyframes sweepImg{0%{transform:translateX(0)}100%{transform:translateX(-80%)}}
@keyframes gFade{to{opacity:0}}
.scanlab{position:absolute;right:-36px;top:4%;writing-mode:vertical-rl;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.38);z-index:4}
@media(max-width:1280px){.scanlab{display:none}}

/* EXHIBIT A: continues the dark flow, findings overlap upward */
.exa{padding:clamp(50px,6vw,90px) 0 clamp(90px,11vw,150px)}
.exa-solid{position:relative;background:var(--ink)}
.exa .ghost{position:absolute;right:-4vw;top:-16vw;font-family:var(--d);font-weight:900;line-height:.75;
  font-size:clamp(220px,36vw,500px);color:rgba(255,255,255,.03);pointer-events:none;z-index:0}
.vtag{position:absolute;left:clamp(8px,1.6vw,22px);top:0;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:9.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.3);z-index:3}
.exa .open{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(40px,5.5vw,72px)}
.exa .exno{font-family:var(--d);font-weight:900;font-size:clamp(15px,1.6vw,19px);letter-spacing:.14em;color:var(--red);text-transform:uppercase}
.finding{position:relative;z-index:2;max-width:1020px;margin-bottom:clamp(38px,5vw,64px)}
.finding .fk{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:12px;display:flex;align-items:center;gap:14px}
.finding .fk::after{content:"";height:1px;width:60px;background:var(--red)}
.finding .fv{font-family:var(--d);font-weight:800;font-size:clamp(30px,4.6vw,62px);line-height:.95;color:#fff}
.finding .fv b{color:var(--red);font-weight:800}
.finding.i2{margin-left:clamp(0px,8vw,120px)}
.finding.i3{margin-left:clamp(0px,16vw,240px)}
.exa .verdict{font-family:var(--d);font-weight:700;font-size:clamp(18px,2.2vw,28px);letter-spacing:.02em;color:rgba(255,255,255,.55);text-transform:uppercase;margin-top:10px}

/* WEDGE: paper, angled in, ghost 30 crossing the boundary */
.wedge{background:var(--paper);clip-path:polygon(0 4.5vw,100% 0,100% 100%,0 100%);margin-top:-4.5vw;
  padding:clamp(110px,14vw,190px) 0 clamp(90px,11vw,150px);position:relative;overflow:hidden}
.wedge .ghost{position:absolute;left:-1vw;top:-1vw;font-family:var(--d);font-weight:900;line-height:.75;
  font-size:clamp(200px,30vw,420px);color:rgba(22,27,82,.075);pointer-events:none}
.wq{font-family:var(--d);font-weight:800;font-size:clamp(40px,6.6vw,96px);line-height:.9;max-width:1050px;color:var(--navy);position:relative;z-index:2}
.wq .r{color:var(--red)}
.wroles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;margin-top:clamp(40px,5.5vw,64px);position:relative;z-index:2}
.wrole{background:#fff;border-top:2px solid var(--rf);padding:26px 26px 30px}
.wrole .no{font-family:var(--d);font-weight:800;font-size:22px;color:var(--red);margin-bottom:10px}
.wrole .t{font-size:17px;line-height:1.45;color:var(--soft)}

/* METHOD: same paper surface, no break, bands invert on hover */
.method{background:var(--paper);padding:0 0 clamp(80px,10vw,140px)}
.mhead h2{font-family:var(--d);font-weight:800;font-size:clamp(38px,5.6vw,76px);line-height:.9;color:var(--navy)}
.mband{display:grid;grid-template-columns:clamp(110px,16vw,230px) 1fr 1.2fr;gap:clamp(18px,3vw,44px);align-items:center;
  border-top:1px solid var(--rule);padding:clamp(26px,3.6vw,44px) 0;transition:background .35s,color .35s;position:relative}
.mband:last-of-type{border-bottom:1px solid var(--rule)}
.mband .mn{font-family:var(--d);font-weight:900;font-size:clamp(64px,9vw,140px);line-height:.8;color:var(--rf);transition:color .35s}
.mband .mt{font-family:var(--d);font-weight:800;font-size:clamp(30px,4vw,54px);line-height:.9;color:var(--navy);transition:color .35s}
.mband .md{font-family:var(--d);font-weight:600;font-size:clamp(21px,2.4vw,30px);
  line-height:1.15;color:var(--soft);max-width:560px;transition:color .35s}
.mband:hover{background:var(--navy)}
.mband:hover .mn{color:var(--red)}
.mband:hover .mt{color:#fff}
.mband:hover .md{color:rgba(255,255,255,.75)}

/* TALK: full-bleed, scanner strip parked, angled top */
.talk{position:relative;min-height:clamp(480px,62vh,660px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);clip-path:polygon(0 0,100% 3.5vw,100% 100%,0 100%);margin-top:-3.5vw}
.talk .ph{position:absolute;inset:0;background-size:cover;background-position:center 24%;filter:saturate(1.15) contrast(1.04) brightness(.52)}
.talk .tscan{position:absolute;top:0;bottom:0;left:0;width:13%;overflow:hidden;z-index:2}
.talk .tg{position:absolute;top:0;bottom:0;left:0;width:769%;
  background-size:cover;background-position:center 24%;
  filter:grayscale(1) contrast(1.18) brightness(.4)}
.talk .tscan::before,.talk .tscan::after{content:"";position:absolute;top:0;bottom:0;width:1.5px;
  background:var(--red);z-index:3;box-shadow:0 0 12px rgba(220,32,48,.55)}
.talk .tscan::before{left:0}.talk .tscan::after{right:0}
/* sweep fires when the band scrolls into view, not on page load */
.talk .tscan.scanning{animation:tSweepBox 2.8s cubic-bezier(.55,.05,.35,1) forwards}
.talk .tscan.scanning .tg{animation:tSweepImg 2.8s cubic-bezier(.55,.05,.35,1) forwards,
  tgFade .7s ease 2.9s forwards}
@keyframes tSweepBox{0%{left:0}100%{left:80%}}
@keyframes tSweepImg{0%{transform:translateX(0)}100%{transform:translateX(-80%)}}
@keyframes tgFade{to{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .talk .tscan{left:80%!important}.talk .tscan .tg{opacity:0!important}
}
.talk .sc{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(12,15,46,.88) 0%,rgba(12,15,46,.72) 38%,rgba(12,15,46,.28) 66%,rgba(12,15,46,.18) 100%),
  linear-gradient(0deg,rgba(12,15,46,.85) 6%,rgba(12,15,46,.30) 55%,rgba(12,15,46,.22))}
.talk .c{position:relative;z-index:2;padding:90px 0 64px;width:100%}
.talk h2{font-family:var(--d);font-weight:900;font-size:clamp(52px,8.5vw,128px);line-height:.86;color:#fff}
.talk .row2{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:22px}
.talk p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.78);max-width:560px}

/* FORMATS: paper, ghost 4 crossing up into the talk band edge */
.fmt{background:var(--paper);padding:clamp(84px,11vw,150px) 0;position:relative;overflow:hidden}
.fmt .ghost{position:absolute;right:-5vw;bottom:-6vw;font-family:var(--d);font-weight:900;line-height:.75;
  font-size:clamp(200px,30vw,420px);color:rgba(22,27,82,.04);pointer-events:none}
.fhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(34px,4.5vw,54px)}
.fhead h2{flex:0 1 auto}
.fhead .side{flex:0 1 420px;max-width:420px;text-align:left}
.fhead h2{font-family:var(--d);font-weight:800;font-size:clamp(38px,5.6vw,76px);line-height:.9;color:var(--navy)}
.fhead .side{font-size:13.5px;color:var(--soft);max-width:340px;line-height:1.6}
.frow{display:grid;grid-template-columns:clamp(46px,5vw,70px) 1fr auto;gap:clamp(14px,2.6vw,38px);align-items:center;
  text-decoration:none;border-top:1px solid var(--rule);padding:clamp(20px,3vw,32px) 0;position:relative;z-index:2;transition:padding-left .25s}
.frow:last-of-type{border-bottom:1px solid var(--rule)}
.frow:hover{padding-left:12px}
.frow .no{font-family:var(--d);font-weight:800;font-size:clamp(17px,2vw,24px);color:var(--faint)}
.frow .tt{font-family:var(--d);font-weight:800;font-size:clamp(30px,4.6vw,62px);line-height:.9;color:var(--navy)}
.frow .dd{font-size:14px;color:var(--soft);margin-top:8px;max-width:640px}
.frow .gauge{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.frow .g{display:flex;gap:5px}
.frow .g i{width:22px;height:5px;background:var(--rf)}
.frow .g i.on{background:var(--red)}
.frow .gl{font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
@media(max-width:760px){.frow{grid-template-columns:1fr}.frow .gauge{align-items:flex-start}.frow .no{display:none}}

/* RECOGNITION: dark, angled in, statements */
.rec{background:var(--ink);color:#fff;clip-path:polygon(0 3.5vw,100% 0,100% 100%,0 100%);margin-top:-3.5vw;
  padding:clamp(104px,13vw,180px) 0 clamp(84px,11vw,150px);position:relative;overflow:hidden}
.rec::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 86px,rgba(255,255,255,.028) 86px 87px)}
.rec .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center;position:relative;z-index:2}
@media(max-width:900px){.rec .grid{grid-template-columns:1fr}}
.rstat{border-top:1px solid rgba(255,255,255,.16);padding:clamp(20px,2.8vw,30px) 0}
.rstat:last-of-type{border-bottom:1px solid rgba(255,255,255,.16)}
.rstat .big{font-family:var(--d);font-weight:800;font-size:clamp(24px,3vw,40px);line-height:.95;color:#fff}
.rstat .sm{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:8px}
.rphoto{position:relative;overflow:hidden;aspect-ratio:4/3;background:#000}
.rphoto .who{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.9)}
/* the slide panel wipes across from the right, same red-edged scan
   language as the portrait and speaking band, revealing Sky News beneath */
.rphoto .rslide{position:absolute;inset:0;width:100%;overflow:hidden;z-index:2}
.rphoto .rslide{background:#0C0F2E}
.rphoto .rslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:saturate(1.05) contrast(1.02)}
.rphoto .rslide::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--red);
  box-shadow:0 0 12px rgba(220,32,48,.6);z-index:3}
/* first sweep plays once on scroll into view, then the two images keep
   cycling gently, never fast, so it reads as a slow rotation not a flicker */
.rphoto.scanning .rslide{animation:rSweep 2.6s cubic-bezier(.6,.05,.35,1) .3s forwards,
  rCycle 11s ease-in-out 4s infinite}
@keyframes rSweep{0%{width:0}100%{width:100%}}
@keyframes rCycle{0%,42%{width:100%}50%,92%{width:0}100%{width:100%}}
.rtag{position:absolute;left:14px;bottom:14px;z-index:4;background:rgba(12,15,46,.86);color:#fff;
  font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:7px 11px;
  transition:opacity .4s ease}
.rtag.on-air{opacity:0}
.rphoto.scanning .rtag:not(.on-air){opacity:0;transition-delay:.3s;
  animation:rTagWho 11s ease-in-out 4s infinite}
.rphoto.scanning .rtag.on-air{opacity:1;transition-delay:2.6s;
  animation:rTagSky 11s ease-in-out 4s infinite}
@keyframes rTagWho{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@keyframes rTagSky{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .rphoto .rslide{width:100%!important;animation:none!important;transition:none!important}
  .rphoto .rtag:not(.on-air){opacity:0!important}.rphoto .rtag.on-air{opacity:1!important}
}

/* CLOSE: red, angled in */
.close{background:var(--red);text-align:center;clip-path:polygon(0 0,100% 4.5vw,100% 100%,0 100%);margin-top:-4.5vw;
  padding:clamp(120px,15vw,200px) 0 clamp(90px,12vw,160px);position:relative;overflow:hidden}
.close .ghost{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-family:var(--d);font-weight:900;
  font-size:clamp(260px,40vw,560px);color:rgba(255,255,255,.06);pointer-events:none}
.close h2{font-family:var(--d);font-weight:900;font-size:clamp(46px,7.4vw,110px);line-height:.88;color:#fff;max-width:1000px;margin:0 auto 18px;position:relative;z-index:2}
.close p{color:rgba(255,255,255,.85);font-size:17px;margin-bottom:34px;position:relative;z-index:2}
.close .btn{background:#fff;color:var(--red);position:relative;z-index:2}

/* footer */
.foot{background:var(--ink);color:#fff;padding:60px 0 0}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;padding-bottom:44px}
@media(max-width:820px){.fg{grid-template-columns:1fr 1fr}}
.foot .n{font-family:var(--d);font-weight:800;font-size:22px}
.ftag{color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.6;max-width:300px;margin-top:10px}
.fcol h4{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.44);margin-bottom:13px}
.fcol a{display:block;color:rgba(255,255,255,.82);text-decoration:none;font-size:14.5px;padding:5px 0}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.fbot .lab{color:rgba(255,255,255,.38)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  h1 .rw span{transform:none}.hsub,.hcta,.reveal{opacity:1;transform:none}
  .scanner{left:80%!important}.scanner .g{opacity:0!important}
}

/* ---------- shared page furniture (added for inner pages) ---------- */

/* inner hero: dark flow, no portrait */
.ihero{padding:110px 0 clamp(60px,8vw,110px)}
.ihero h1{font-size:clamp(46px,7vw,104px)}
.ihero .isub{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.72);max-width:640px;margin-top:26px;
  opacity:0;animation:fd .9s ease .55s forwards}

/* paper prose block */
.prose{background:var(--paper);padding:clamp(84px,11vw,150px) 0;position:relative;overflow:hidden}
.prose .ghost{position:absolute;font-family:var(--d);font-weight:900;line-height:.75;pointer-events:none;
  color:rgba(22,27,82,.04);font-size:clamp(200px,32vw,440px)}
.prose h2{font-family:var(--d);font-weight:800;font-size:clamp(38px,5.6vw,76px);line-height:.9;color:var(--navy)}
.prose .big{font-family:var(--d);font-weight:800;font-size:clamp(30px,4.4vw,58px);line-height:.94;color:var(--navy);max-width:1000px}
.prose p{font-size:16.5px;line-height:1.7;color:var(--soft);max-width:760px;margin-top:20px}
.prose p.lede{font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--navy);max-width:820px}

/* dark prose block */
.dprose{background:var(--ink);color:#fff;padding:clamp(84px,11vw,150px) 0;position:relative;overflow:hidden}
.dprose::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 86px,rgba(255,255,255,.028) 86px 87px)}
.dprose > *{position:relative;z-index:2}
.dprose h2{font-family:var(--d);font-weight:800;font-size:clamp(38px,5.6vw,76px);line-height:.9;color:#fff}
.dprose .big{font-family:var(--d);font-weight:800;font-size:clamp(30px,4.4vw,58px);line-height:.94;color:#fff;max-width:1000px}
.dprose .big .r{color:var(--red)}
.dprose p{font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.72);max-width:760px;margin-top:20px}

/* angled joins for inner pages */
.cut-down{clip-path:polygon(0 4.5vw,100% 0,100% 100%,0 100%);margin-top:-4.5vw;padding-top:clamp(120px,15vw,200px)}
.cut-up{clip-path:polygon(0 0,100% 3.5vw,100% 100%,0 100%);margin-top:-3.5vw;padding-top:clamp(115px,14vw,190px)}

/* variant blocks */
.vb{border-left:3px solid var(--red);padding:6px 0 6px 26px;margin-top:clamp(28px,3.5vw,44px);max-width:900px}
.vb.alt{border-left-color:var(--bar)}
.vb h3{font-family:var(--d);font-weight:800;font-size:clamp(24px,3vw,38px);line-height:.95;color:var(--navy);margin-bottom:10px}
.vb p{margin-top:0}

/* two-column facts */
.facts{border-top:1px solid var(--rule);padding:clamp(20px,2.6vw,28px) 0}
.facts:last-of-type{border-bottom:1px solid var(--rule)}
.facts .k{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.facts .v{font-size:clamp(17px,1.9vw,21px);line-height:1.45;color:var(--navy);max-width:820px}

/* scheduler */
.schedwrap-full{background:var(--paper);position:relative}
.sched-full{width:100%;min-width:320px;height:100vh;border:0;display:block;background:transparent}
.sched-alt{display:none;text-align:center;padding:30px 0}
@media(max-width:760px){.schedwrap-full .sched-full{display:none}.sched-alt{display:block}}

/* cards used on call page */
.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;margin-top:clamp(30px,4vw,50px)}
.tri .c{background:#fff;border-top:2px solid var(--rf);padding:26px 26px 30px}
.tri .c .n{font-family:var(--d);font-weight:800;font-size:16px;color:var(--red);margin-bottom:10px}
.tri .c h3{font-family:var(--d);font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:.95;color:var(--navy);margin-bottom:10px}
.tri .c p{font-size:14.5px;line-height:1.6;color:var(--soft);margin:0}

/* ============================================================
   SECTION DIVIDERS
   Four signature breaks drawn from the reference boards.
   Each page carries one, so the pages read as a family
   without repeating the same transition.
   ============================================================ */

.brk{position:relative;width:100%;height:0;z-index:5;pointer-events:none;overflow:visible}
.brk svg{display:block;width:100%;position:absolute;left:0}

/* --- 1. RIDGE. Fingerprint ridges. Home page. --- */
.brk-ridge svg{height:clamp(90px,11vw,170px);top:calc(-1 * clamp(90px,11vw,170px) * 0.62)}
.brk-ridge .r1{stroke:var(--red);stroke-width:1.6;opacity:.9}
.brk-ridge .r2{stroke:var(--red);stroke-width:1;opacity:.35}
.brk-ridge .r3{stroke:currentColor;stroke-width:1.1;opacity:.24}
.brk-ridge .r4{stroke:currentColor;stroke-width:1.1;opacity:.16}
.brk-ridge .r5{stroke:currentColor;stroke-width:1.1;opacity:.10}

/* --- 2. SCALE. Measurement rule with a lit centre. Forensic Advantage. --- */
.brk-scale svg{height:clamp(46px,5vw,74px);top:calc(-1 * clamp(46px,5vw,74px) / 2)}
.brk-scale .base{stroke:currentColor;opacity:.18;stroke-width:1}
.brk-scale .tick{stroke:currentColor;opacity:.28;stroke-width:1}
.brk-scale .tickmaj{stroke:currentColor;opacity:.45;stroke-width:1.2}
.brk-scale .lit{stroke:var(--red);stroke-width:2;filter:drop-shadow(0 0 6px rgba(220,32,48,.75))}
.brk-scale .dot{fill:var(--red);filter:drop-shadow(0 0 7px rgba(220,32,48,.9))}

/* --- 3. RAIN. Data columns falling. About. --- */
.brk-rain svg{height:clamp(70px,8vw,120px);top:calc(-1 * clamp(70px,8vw,120px) + 2px)}
.brk-rain rect{fill:currentColor}
.brk-rain .hot{fill:var(--red)}

/* --- 4. IRIS. Concentric aperture. Call. --- */
.brk-iris svg{height:clamp(96px,11vw,164px);top:calc(-1 * clamp(96px,11vw,164px) / 2)}
.brk-iris circle{fill:none;stroke:currentColor}
.brk-iris .i1{stroke:var(--red);opacity:.9;stroke-width:1.5}
.brk-iris .i2{opacity:.42;stroke-width:1.2}
.brk-iris .i3{opacity:.28;stroke-width:1.1}
.brk-iris .i4{opacity:.18;stroke-width:1.1}
.brk-iris .pupil{fill:var(--red);stroke:none;filter:drop-shadow(0 0 8px rgba(220,32,48,.85))}

/* colour context: dividers inherit ink or navy depending on surface */
.brk.on-dark{color:#fff}
.brk.on-paper{color:var(--navy)}

/* --- spotlight wash for dark sections (single light source) --- */
.lightfall{position:relative}
.lightfall::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(90% 55% at 50% -8%,rgba(220,32,48,.10),transparent 62%)}
.lightfall > *{position:relative;z-index:1}

/* --- glow on key red elements --- */
.close .btn{box-shadow:0 0 0 rgba(255,255,255,0);transition:box-shadow .3s ease,transform .2s ease}
.close .btn:hover{box-shadow:0 0 34px rgba(255,255,255,.4)}

/* ============================================================
   ATMOSPHERE
   Depth, light and texture. The dark surfaces are lit rather
   than flat: a single source, a falloff, and a fine grain.
   ============================================================ */

/* --- lit angle: a glowing edge that follows the incline --- */
.lit-edge{position:relative}
.lit-edge::before{
  content:"";position:absolute;left:-2%;width:104%;height:2px;z-index:6;
  transform-origin:0 50%;
  background:linear-gradient(90deg,
    rgba(220,32,48,0) 0%,
    rgba(220,32,48,.85) 12%,
    rgba(240,50,66,1) 50%,
    rgba(220,32,48,.85) 88%,
    rgba(220,32,48,0) 100%);
  box-shadow:0 0 14px rgba(220,32,48,.55),0 0 40px rgba(220,32,48,.28);
}
/* cut runs 0 4.5vw -> 100% 0, so the edge rises 2.58deg to the right */
.lit-edge.down::before{top:calc(4.5vw + 2px);transform:rotate(-2.58deg);
  height:3px;background:var(--red);box-shadow:0 0 10px rgba(220,32,48,.35)}
/* cut runs 0 0 -> 100% 3.5vw, so the edge falls 2.0deg to the right */
.lit-edge.up::before{top:1px;transform:rotate(2.0deg)}

/* --- dark surfaces: layered light rather than flat fill --- */
.darkflow,.talk,.rec,.dprose,.foot{position:relative}
.darkflow::after,.dprose::after,.rec::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(115% 62% at 76% -10%, rgba(46,54,140,.55), transparent 58%),
    radial-gradient(85% 45% at 8% 108%, rgba(220,32,48,.13), transparent 62%),
    radial-gradient(60% 80% at 50% 50%, rgba(0,0,0,.28), transparent 70%);
}
.darkflow > *,.dprose > *,.rec > *{position:relative;z-index:2}

/* --- vertical light strips, the corridor reference --- */
.strips::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background:
    linear-gradient(90deg,transparent 0 13.5%,rgba(220,32,48,.16) 13.5% 13.7%,transparent 13.7%),
    linear-gradient(90deg,transparent 0 31%,rgba(255,255,255,.05) 31% 31.15%,transparent 31.15%),
    linear-gradient(90deg,transparent 0 62%,rgba(255,255,255,.045) 62% 62.15%,transparent 62.15%),
    linear-gradient(90deg,transparent 0 79%,rgba(220,32,48,.13) 79% 79.2%,transparent 79.2%),
    repeating-linear-gradient(90deg,transparent 0 92px,rgba(255,255,255,.022) 92px 93px);
}

/* --- fine grain over the whole page --- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --- paper surfaces get a faint warm falloff, not flat white --- */
.wedge,.method,.fmt,.prose{position:relative}
.wedge::after,.method::after,.fmt::after,.prose::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 70% at 88% 0%, rgba(22,27,82,.045), transparent 60%);
}
.wedge > *,.method > *,.fmt > *,.prose > *{position:relative;z-index:1}

/* --- glow on the red close --- */
.close{box-shadow:inset 0 40px 90px rgba(0,0,0,.16)}
.close .ghost{filter:blur(1px)}

/* --- headline glow on dark --- */


/* --- evidence photographs: paired plates on the paper surface --- */
.plates{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(40px,5vw,64px)}
@media(max-width:820px){.plates{grid-template-columns:1fr}}
.plate{position:relative;overflow:hidden;background:var(--ink)}
.plate img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;
  filter:saturate(.9) contrast(1.03) brightness(.96)}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,15,46,0) 46%,rgba(12,15,46,.82) 100%)}
.plate .cap{position:absolute;left:18px;right:18px;bottom:14px;z-index:2}
.plate .cap .k{font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--red);margin-bottom:6px}
.plate .cap .t{font-family:var(--d);font-weight:700;font-size:clamp(17px,1.9vw,22px);
  line-height:1;color:#fff}
.plate .edge{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--red);z-index:2;
  box-shadow:0 0 14px rgba(220,32,48,.6)}
.plate.raw::after{background:none}
.plate.raw{background:#0C0F2E;display:flex;align-items:center}
.plate.raw img{aspect-ratio:auto;height:auto;object-fit:contain;filter:saturate(.95) contrast(1.02)}
.plate .stamp{position:absolute;right:14px;top:14px;z-index:3;font-size:9px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:#fff;background:rgba(12,15,46,.72);
  padding:6px 10px;backdrop-filter:blur(3px)}

/* bespoke row: separated visually from the four depths, since it isn't a
   fifth depth, it's a different track (large organisations, scoped by enquiry) */
.frow.bespoke{border-top:2px solid var(--navy);margin-top:6px;padding-top:calc(clamp(20px,3vw,32px) + 6px)}
.frow.bespoke .no{color:var(--red);font-size:clamp(22px,2.6vw,30px)}
.frow.bespoke .tt{color:var(--navy)}

/* footer signature: the master line as a standing motto under the mark,
   set quietly so it reads as attribution rather than another headline */
.foot .motto{font-family:var(--d);font-weight:600;font-size:clamp(15px,1.5vw,18px);
  line-height:1.15;color:rgba(255,255,255,.55);margin-top:16px;max-width:280px}

/* talk numerals: mark each variant without competing with the title */
.vb{position:relative}
.vnum{display:block;font-family:var(--d);font-weight:800;font-size:20px;
  color:var(--red);letter-spacing:.06em;margin-bottom:8px}

/* the prose-section ghost numeral was as faint as the home page one was */
.prose .ghost{color:rgba(22,27,82,.075)}

/* method on the talk page: three columns rather than the home page's stacked
   bands, so the same content reads as a different section */
.mcols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  border-top:2px solid var(--navy);padding-top:clamp(28px,3.5vw,44px)}
@media(max-width:820px){.mcols{grid-template-columns:1fr;gap:34px}}
.mcol{position:relative}
.mcol + .mcol{border-left:1px solid var(--rule);padding-left:clamp(20px,3vw,40px)}
@media(max-width:820px){.mcol + .mcol{border-left:0;padding-left:0;
  border-top:1px solid var(--rule);padding-top:30px}}
.mcol .mnum{display:block;font-family:var(--d);font-weight:800;font-size:clamp(38px,4.4vw,58px);
  line-height:1;color:var(--rf);margin-bottom:10px}
.mcol h3{font-family:var(--d);font-weight:800;font-size:clamp(24px,2.8vw,34px);
  line-height:1;color:var(--navy);margin-bottom:12px}
.mcol p{font-size:15.5px;line-height:1.6;color:var(--soft)}

/* home page formats: named only, with the detail living on the talk page */
.fstrip{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3.5vw,42px);position:relative;z-index:2}
.fchip{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;
  font-family:var(--d);font-weight:700;font-size:clamp(19px,2.1vw,26px);line-height:1;
  color:var(--navy);background:#fff;border:1px solid var(--rule);
  padding:16px 22px;transition:border-color .2s ease,transform .2s ease}
.fchip:hover{border-color:var(--navy);transform:translateY(-2px)}
.fchip .n{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--faint)}
.fchip.bespoke{border-color:var(--navy)}
.fchip.bespoke .n{color:var(--red);font-size:16px}
.fnote{font-size:16px;line-height:1.6;color:var(--soft);max-width:760px;
  margin-top:clamp(24px,3vw,34px);position:relative;z-index:2}
.fnote a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   THE DIAGNOSTIC
   Twelve questions, scored in the browser. Value is given before
   anything is asked for, so there is no gate on the result.
   ============================================================ */
.diag{background:var(--paper);padding:clamp(90px,11vw,150px) 0;position:relative;overflow:hidden}
.dintro{margin-bottom:clamp(34px,4.5vw,54px)}
.dintro h2{font-family:var(--d);font-weight:800;font-size:clamp(38px,5.6vw,76px);
  line-height:.9;color:var(--navy);margin-top:12px}
.dintro p{font-size:16.5px;line-height:1.65;color:var(--soft);max-width:640px;margin-top:16px}

.qlist{border-top:2px solid var(--navy)}
.qrow{display:grid;grid-template-columns:clamp(40px,4vw,60px) 1fr auto;gap:clamp(14px,2.4vw,32px);
  align-items:center;border-bottom:1px solid var(--rf);padding:clamp(18px,2.4vw,26px) 0;
  transition:background .25s ease}
.qrow.done{background:rgba(22,27,82,.025)}
.qn{font-family:var(--d);font-weight:800;font-size:clamp(15px,1.7vw,20px);color:var(--faint)}
.qt{font-size:clamp(16px,1.75vw,19px);line-height:1.45;color:var(--navy);max-width:720px}
.qa{display:flex;gap:8px}
.qb{font-family:var(--s);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 20px;border:1px solid var(--rule);background:#fff;color:var(--soft);
  cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.qb:hover{border-color:var(--navy);color:var(--navy)}
.qb.on{background:var(--navy);border-color:var(--navy);color:#fff}
.qb.on.no{background:var(--red);border-color:var(--red)}
@media(max-width:760px){
  .qrow{grid-template-columns:clamp(34px,8vw,44px) 1fr;row-gap:14px}
  .qa{grid-column:2}
}

.drun{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(28px,3.5vw,42px)}
.drun .btn[disabled]{opacity:.4;pointer-events:none}
.dprog{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

.dresult{margin-top:clamp(40px,5vw,64px);border-top:2px solid var(--navy);padding-top:clamp(30px,4vw,46px)}
.dscore{display:flex;align-items:baseline;gap:12px}
.dscore #num{font-family:var(--d);font-weight:900;font-size:clamp(70px,11vw,150px);
  line-height:.8;color:var(--red)}
.dscore .of{font-family:var(--d);font-weight:700;font-size:clamp(18px,2vw,26px);color:var(--faint)}
.dresult h3{font-family:var(--d);font-weight:800;font-size:clamp(28px,3.6vw,48px);
  line-height:.95;color:var(--navy);margin-top:18px}
.dresult > p{font-size:16.5px;line-height:1.65;color:var(--soft);max-width:720px;margin-top:14px}
.dgaps{margin-top:clamp(28px,3.5vw,42px)}
.dgaps ul{list-style:none;margin-top:14px;border-top:1px solid var(--rf)}
.dgaps li{font-size:16px;line-height:1.5;color:var(--navy);padding:14px 0 14px 22px;
  border-bottom:1px solid var(--rf);position:relative}
.dgaps li::before{content:"";position:absolute;left:0;top:22px;width:9px;height:2px;background:var(--red)}
.dcta{margin-top:clamp(30px,4vw,46px);display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.dcta p{font-size:16.5px;line-height:1.6;color:var(--soft);max-width:600px;width:100%}

/* seller line reads as a statement, sized just under the buyer statement above */
.prose .wseller{font-family:var(--d);font-weight:600;font-size:clamp(28px,4.3vw,55px);
  line-height:1.25;color:var(--navy);max-width:820px;margin-top:clamp(24px,3vw,36px)}

/* Forensic Advantage hero: stage photograph, scan treatment reused from
   the speaking band, sitting beside the copy rather than full width */
.ihgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,60px);align-items:start}
@media(max-width:900px){.ihgrid{grid-template-columns:1fr;gap:36px}}
.ihphoto{position:relative;overflow:hidden;aspect-ratio:4/3.1;background:var(--ink)}
.ihphoto .base{width:100%;height:100%;object-fit:cover;object-position:center 31%;
  filter:saturate(1.1) contrast(1.03) brightness(.86)}
.ihphoto .tscan{position:absolute;top:0;bottom:0;left:0;width:16%;overflow:hidden;z-index:2}
.ihphoto .tg{position:absolute;top:0;bottom:0;left:0;width:625%;
  background-size:cover;background-position:center 31%;filter:grayscale(1) contrast(1.16) brightness(.5)}
.ihphoto .tscan::before,.ihphoto .tscan::after{content:"";position:absolute;top:0;bottom:0;width:1.5px;
  background:var(--red);z-index:3;box-shadow:0 0 12px rgba(220,32,48,.55)}
.ihphoto .tscan::before{left:0}.ihphoto .tscan::after{right:0}
.ihphoto .tscan.scanning{animation:tSweepBox 2.6s cubic-bezier(.55,.05,.35,1) .5s forwards}
.ihphoto .tscan.scanning .tg{animation:tSweepImg 2.6s cubic-bezier(.55,.05,.35,1) .5s forwards,
  tgFade .7s ease 3s forwards}
@media(prefers-reduced-motion:reduce){
  .ihphoto .tscan{left:80%!important}.ihphoto .tscan .tg{opacity:0!important}
}

/* the about-page gallery: a slow, stylised rotation through three images,
   ready for a fourth (the Amazon Prime still) as one more slide and one
   more set of keyframe percentages when it exists */
.gallery{position:relative;overflow:hidden;aspect-ratio:16/9;max-width:620px;margin-top:clamp(40px,5vw,64px);background:#000}
.gallery .edge{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--red);
  z-index:3;box-shadow:0 0 14px rgba(220,32,48,.6)}

/* each slide is a container: a permanent mono base, revealed to colour by
   a red-edged wipe, the same device used on the portrait and speaking band.
   crossfade between slides is unchanged, just the content within each. */
.gslide{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  animation-duration:30s;animation-iteration-count:infinite}
.gslide.g1{animation-name:gSlide1}
.gslide.g2{animation-name:gSlide2}
.gslide.g3{animation-name:gSlide3}
.gslide.g4{animation-name:gSlide4}
.gslide.g5{animation-name:gSlide5}
@keyframes gSlide1{0%,16%{opacity:1}20%,100%{opacity:0}}
@keyframes gSlide2{0%,20%{opacity:0}24%,36%{opacity:1}40%,100%{opacity:0}}
@keyframes gSlide3{0%,40%{opacity:0}44%,56%{opacity:1}60%,100%{opacity:0}}
@keyframes gSlide4{0%,60%{opacity:0}64%,76%{opacity:1}80%,100%{opacity:0}}
@keyframes gSlide5{0%,80%{opacity:0}84%,96%{opacity:1}99%,100%{opacity:0}}

.gmono,.gcolor{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gmono{filter:grayscale(1) contrast(1.05) saturate(.92) brightness(.9)}
.gcolor{filter:saturate(1.02) brightness(.96)}
.gslide.g5 .gmono,.gslide.g5 .gcolor{object-fit:contain;background:#0C0F2E}

.gwipe{position:absolute;inset:0;width:0%;overflow:hidden;z-index:2;
  animation-duration:30s;animation-iteration-count:infinite}
.gwipe::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1.5px;
  background:var(--red);box-shadow:0 0 10px rgba(220,32,48,.6)}
.g1 .gwipe{animation-name:gWipe1}
.g2 .gwipe{animation-name:gWipe2}
.g3 .gwipe{animation-name:gWipe3}
.g4 .gwipe{animation-name:gWipe4}
.g5 .gwipe{animation-name:gWipe5}
@keyframes gWipe1{0%,0.1%{width:0%}5%,100%{width:100%}}
@keyframes gWipe2{0%,20%{width:0%}25%,100%{width:100%}}
@keyframes gWipe3{0%,40%{width:0%}45%,100%{width:100%}}
@keyframes gWipe4{0%,60%{width:0%}65%,100%{width:100%}}
@keyframes gWipe5{0%,80%{width:0%}85%,100%{width:100%}}

.gcap{font-size:12.5px;letter-spacing:.04em;color:var(--faint);margin-top:12px;max-width:620px}
@media(prefers-reduced-motion:reduce){
  .gslide{animation:none!important}
  .gslide.g1{opacity:1}.gslide.g2{opacity:0}.gslide.g3{opacity:0}
  .gslide.g4{opacity:0}.gslide.g5{opacity:0}
  .gwipe{animation:none!important;width:100%!important}
}

/* the 30 sits beside the background heading rather than floating as a
   decorative ghost in the section corner */
.bghead{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-top:14px;margin-bottom:clamp(34px,4.5vw,54px)}
.bghead h2{margin:0}
.bg30{font-family:var(--d);font-weight:900;font-size:clamp(64px,8vw,120px);
  line-height:.8;color:var(--navy);opacity:.12}


/* ---------------------------------------------------------------
   MOBILE MENU
   Below 860px the desktop nav links are hidden (see .nl rule above).
   This replaces them with a toggle and a full-screen panel, so
   Home, Speaking and About are reachable on a phone. The red
   "Book a call" button stays visible in the bar at all widths.
   --------------------------------------------------------------- */

/* toggle: hidden on desktop, shown below the same 860px breakpoint
   that hides the inline links, so the two never appear together */
.navtoggle{display:none;background:none;border:0;padding:10px;margin-left:4px;
  cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent}
.navtoggle span{display:block;width:24px;height:2px;background:#fff;
  transition:transform .25s ease,opacity .2s ease}
.navtoggle span + span{margin-top:6px}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* panel: sits under the bar, covers the viewport, dismisses on link tap */
.navpanel{position:fixed;inset:0;z-index:39;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(22px,5vw,58px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.navpanel[data-open="true"]{opacity:1;visibility:visible}
.navpanel a{font-family:var(--d);font-weight:700;font-size:clamp(30px,9vw,44px);
  line-height:1.1;color:#fff;text-decoration:none;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.navpanel a:last-of-type{border-bottom:0}
.navpanel a .nsub{display:block;font-family:var(--s);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:4px}

/* lock background scroll while the panel is open */
body.navopen{overflow:hidden}

@media(max-width:860px){
  .navtoggle{display:block}
  .nl{gap:8px}
}
@media(min-width:861px){
  .navpanel{display:none}
}
@media(prefers-reduced-motion:reduce){
  .navtoggle span,.navpanel{transition:none}
}

/* hmeta call to action: reads as a link without breaking the metadata row */
.hmeta .v a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:2px;transition:opacity .2s}
.hmeta .v a:hover{opacity:.72}

/* all-caps hero headline: Big Shoulders caps run wider than mixed case,
   so the floor is lowered to keep the longest word clear of the margins
   on a 360px phone */
.h1cap{font-size:clamp(46px,8.6vw,104px);line-height:.86;letter-spacing:.005em}
/* the shared .rw wrapper clips with overflow:hidden and pads only at the
   bottom. All-caps glyph tops sit outside a line box this tight, so the
   caps headline needs matching headroom. Scoped to .h1cap so the mixed
   case headlines on the other pages are untouched. */
.h1cap .rw{padding-top:.16em;margin-top:-.16em}

/* ---------------------------------------------------------------
   TALK DETAIL: outcome statement, learning objectives, booking CTA
   Sits inside the existing .vb blocks on the dark talks band.
   --------------------------------------------------------------- */

/* the outcome line: what the room leaves with, set a step above body copy */
.tout{font-size:clamp(16px,1.5vw,18.5px);line-height:1.6;
  color:rgba(255,255,255,.88);margin-top:18px;max-width:760px}

/* learning objectives */
.tlo{margin-top:clamp(22px,2.6vw,30px)}
.tlo .lab{display:block;margin-bottom:14px;color:rgba(255,255,255,.5)}
.tlo ol{list-style:none;counter-reset:lo}
.tlo li{counter-increment:lo;position:relative;padding:12px 0 12px 46px;
  font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.72);
  border-top:1px solid rgba(255,255,255,.12)}
.tlo li:first-child{border-top:0;padding-top:0}
.tlo li::before{content:"0" counter(lo);position:absolute;left:0;top:12px;
  font-family:var(--d);font-weight:800;font-size:17px;color:var(--red);letter-spacing:.02em}
.tlo li:first-child::before{top:0}

/* per-talk booking button */
.tbook{margin-top:clamp(24px,3vw,32px)}

@media(max-width:600px){
  .tlo li{padding-left:38px;font-size:15px}
  .tbook .btn{width:100%;justify-content:center}
}

/* footer email: addresses have no natural break points, so force a safe
   wrap rather than letting it overflow the narrow two-column footer */
.fcol a.fmail{overflow-wrap:anywhere;word-break:break-word}

/* subordinate line under the caps headline: carries the ownership the
   three-word statement cannot, without competing with it for size */
.h1cap .way{font-size:clamp(16px,3.1vw,36px);letter-spacing:.02em;color:var(--red);
  text-transform:none;line-height:1.1;margin-top:.22em}
h1 .rw:nth-child(4) span{animation-delay:.3s}

/* the brand logo drops to 32px below 500px, so the nav is 84px rather than
   96px and the heroes can sit correspondingly tighter */
@media(max-width:500px){
  .hero{padding-top:92px}
  .ihero{padding-top:96px}
}