/* Vodacom · The Next Generation — FH Strategy.
   Vanilla CSS. Same type system as the 179-page deck so the two read as one submission. */
@font-face{font-family:VF;src:url('../fonts/VodafoneRg.ttf')format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:VF;src:url('../fonts/VodafoneRg_Bd.ttf')format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:VF;src:url('../fonts/VodafoneLt.ttf')format('truetype');font-weight:300;font-display:swap}
:root{--red:#E60000;--ink:#25282B;--body:#4A4D4E;--rail:#B5B9BA;--line:#DCDEDF;--teal:#007C92;--aub:#5E2750}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:VF,system-ui,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
img,video{display:block;max-width:100%}

/* ── the door ───────────────────────────────────────────────────────────
   The work moves behind; the words sit on a solid red panel in front of it,
   so the type never fights the footage and the page still has a pulse. */
#gate{position:fixed;inset:0;z-index:999;background:#0A0A0C;color:#fff;
      display:flex;align-items:center;justify-content:center;padding:32px;text-align:center;
      overflow:hidden;transition:opacity .9s ease}
#gate.away{opacity:0;pointer-events:none}
#gateFilm{position:absolute;inset:0}
#gateFilm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
      opacity:0;transition:opacity 1.5s ease}
#gateFilm video.on{opacity:1}
#gateFilm::after{content:'';position:absolute;inset:0;background:rgba(10,10,12,.34)}

#gateBody{position:relative;z-index:2;background:var(--red);padding:74px 88px 78px;
      border-radius:4px;max-width:min(680px,92vw);
      box-shadow:0 40px 120px rgba(0,0,0,.42);
      display:flex;flex-direction:column;align-items:center}
#gate .mk{width:38px;margin-bottom:40px}
#typed{font-family:Georgia,serif;font-size:clamp(36px,5.4vw,68px);line-height:1.06;
      min-height:1.1em;letter-spacing:-.015em}
#gate .sub{font-size:14px;font-weight:300;color:rgba(255,255,255,.82);margin-top:24px}
#gateForm{margin-top:42px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#pass{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.55);color:#fff;
      font-family:inherit;font-size:17px;padding:12px 4px;min-width:230px;text-align:center}
#pass::placeholder{color:rgba(255,255,255,.62)}
#pass:focus{outline:none;border-bottom-color:#fff}
#gateForm button{background:#fff;color:var(--red);border:0;border-radius:2px;padding:13px 30px;
      font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.14em;
      text-transform:uppercase;cursor:pointer;transition:.2s}
#gateForm button:hover{background:#FFE9E9}
#gateErr{color:#fff;font-size:13px;margin-top:18px;min-height:1.2em;opacity:.92}
@media (prefers-reduced-motion:reduce){ #gateFilm{display:none} #gate{background:var(--red)} }
@media (max-width:640px){ #gateBody{padding:52px 32px 56px} }

/* ── nav ────────────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(255,255,255,.94);
     backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transform:translateY(-100%);
     transition:transform .4s ease}
#nav.on{transform:none}
#nav .in{max-width:1500px;margin:0 auto;padding:11px 26px;display:flex;align-items:center;gap:18px}
#nav .bug{width:22px}
#nav .ttl{font-size:11px;letter-spacing:.2em;color:var(--rail);white-space:nowrap}
#nav .lk{margin-left:auto;display:flex;gap:16px;overflow-x:auto;scrollbar-width:none}
#nav .lk::-webkit-scrollbar{display:none}
#nav a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--body);
       text-decoration:none;white-space:nowrap;padding:5px 0;border-bottom:2px solid transparent}
#nav a:hover,#nav a.here{color:var(--red);border-color:var(--red)}

/* ── sections ───────────────────────────────────────────────── */
section{position:relative}
.wrap{max-width:1180px;margin:0 auto;padding:0 34px}
.pad{padding:clamp(80px,11vw,170px) 0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:20px}
h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,6.4vw,86px);line-height:1.1;letter-spacing:-.01em}
h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,4.4vw,58px);line-height:1.14}
h3{font-size:clamp(19px,2vw,25px);font-weight:700;line-height:1.3}
.lede{font-family:Georgia,serif;font-style:italic;font-size:clamp(19px,2.2vw,28px);line-height:1.5;color:var(--body);margin-top:22px}
p{font-size:clamp(16px,1.5vw,19px);line-height:1.68;color:var(--body);font-weight:300;max-width:760px;margin-top:20px}
p b,strong{font-weight:700;color:var(--ink)}
.rr{width:190px;height:2px;background:var(--red);margin:26px 0}
.red{color:var(--red)}

/* full-bleed video */
.film{position:relative;height:min(88vh,860px);overflow:hidden;background:#000}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 46%,rgba(0,0,0,.35) 100%)}
.film .cap{position:absolute;left:0;right:0;bottom:0;padding:0 34px 8vh}
.film .cap .in{max-width:1180px;margin:0 auto}
.film h2,.film h1{color:#fff}
.film p{color:rgba(255,255,255,.9)}
.film .eyebrow{color:#fff;opacity:.8}

/* red panel */
.solid{background:var(--red);color:#fff}
.solid h1,.solid h2,.solid h3{color:#fff}
.solid p{color:rgba(255,255,255,.92)}
.solid .eyebrow{color:rgba(255,255,255,.8)}
.solid .rr{background:#fff}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

/* stat */
.stat{font-family:VF,sans-serif;font-weight:700;font-size:clamp(40px,5.6vw,78px);line-height:1.05;
      color:var(--red);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
      white-space:nowrap;display:block;min-height:1.1em}
.stat.len7{font-size:clamp(32px,4.2vw,58px)}
.stat.len8{font-size:clamp(28px,3.6vw,50px)}
.stat.big{font-size:clamp(42px,6.2vw,86px)}
.stat.words{font-family:Georgia,serif;font-weight:400;white-space:normal;letter-spacing:-.01em}
.solid .stat{color:#fff}
.statl{font-size:16px;color:var(--body);margin-top:12px;font-weight:300;line-height:1.5}
.solid .statl{color:rgba(255,255,255,.85)}
.grid{display:grid;gap:44px;margin-top:52px;align-items:start}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* comments */
.cmt{border-left:3px solid var(--red);padding:14px 0 14px 20px;margin-bottom:16px;opacity:0;transform:translateX(-14px);
     transition:opacity .5s ease,transform .5s ease}
.cmt.in{opacity:1;transform:none}
.cmt .sw{font-family:Georgia,serif;font-size:clamp(19px,2.4vw,30px);color:var(--red);line-height:1.3}
.cmt .en{font-size:15px;color:var(--body);margin-top:7px;font-style:italic}
.cmt .mt{font-size:12px;color:var(--rail);margin-top:8px;letter-spacing:.05em}

/* cards */
.card{border:1px solid var(--line);border-radius:12px;padding:24px}
.card.hot{border:2px solid var(--red);background:#FDF2F2}
.tab{border-top:4px solid var(--red);padding-top:15px}
.tab .lab{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
figure{margin:0}
figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rail);margin-top:12px;text-align:center}
.shot{width:100%;border-radius:10px}
.rail{display:flex;gap:22px;overflow-x:auto;padding:6px 0 20px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:6px}.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rail>figure{flex:0 0 250px;scroll-snap-align:center}
.full{width:100%;border-radius:12px}
iframe.nipo{width:100%;max-width:430px;height:820px;border:0;border-radius:22px;box-shadow:0 22px 60px rgba(0,0,0,.22);margin:0 auto;display:block}
.dl{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--red);color:var(--red);
    text-decoration:none;padding:13px 22px;border-radius:10px;font-weight:700;font-size:15px;margin:8px 10px 0 0}
.dl:hover{background:var(--red);color:#fff}
.solid .dl{border-color:#fff;color:#fff}.solid .dl:hover{background:#fff;color:var(--red)}
footer{border-top:1px solid var(--line);padding:52px 0;font-size:13px;color:var(--rail);letter-spacing:.05em}
@media(max-width:700px){.film{height:76vh}.rail>figure{flex-basis:200px}iframe.nipo{height:700px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.cmt{opacity:1;transform:none}}

.tonewall{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:44px}
.tonewall figure{margin:0}
.tonewall video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#111}
.tonewall figcaption{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:9px;text-align:left}


/* ── the five-move board wall, one per route ────────────────────────────
   The artwork is the argument, so it is shown at size and in order rather
   than reduced to a single key visual. */
.boards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:26px}
.boards figure{margin:0}
.boards img{width:100%;aspect-ratio:4/5;object-fit:contain;object-position:center;
      border-radius:7px;background:#F4F4F4;box-shadow:0 10px 30px rgba(0,0,0,.10)}
/* the boards are portrait, landscape and square in the same row, so they are
   contained rather than cropped — a cropped board is a board with its number
   cut off, which is the one thing these layouts cannot survive. */
.boards figcaption{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
      color:var(--rail);margin-top:9px}
.boards-wide img{aspect-ratio:16/10}
@media (max-width:1000px){ .boards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .boards{grid-template-columns:repeat(2,1fr)} }

/* the tone band: red, never black */
.tone-red{background:var(--red)}
.tone-red .eyebrow{color:#fff!important;opacity:.8}
.tone-red h2,.tone-red h3{color:#fff}
.tonewall video{background:rgba(0,0,0,.25)}


/* ── the viewer ─────────────────────────────────────────────────────────
   The boards are the argument, and an argument you cannot read is not one.
   Anything with .zoom opens full size; arrows move through its own group. */
.zoom{cursor:zoom-in}
#lb{position:fixed;inset:0;z-index:2000;background:rgba(12,12,14,.93);
    display:flex;align-items:center;justify-content:center;padding:36px 84px;
    backdrop-filter:blur(6px)}
#lb[hidden]{display:none}
#lbImg{max-width:100%;max-height:calc(100vh - 130px);object-fit:contain;
    border-radius:4px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
#lbCap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#fff;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.72}
#lb button{position:absolute;background:transparent;border:0;color:#fff;cursor:pointer;
    font-size:44px;line-height:1;padding:14px 20px;opacity:.62;transition:.2s}
#lb button:hover{opacity:1}
#lbClose{top:14px;right:20px;font-size:38px}
#lbPrev{left:10px;top:50%;transform:translateY(-50%)}
#lbNext{right:10px;top:50%;transform:translateY(-50%)}
@media (max-width:700px){ #lb{padding:20px 12px} #lbPrev,#lbNext{font-size:34px} }

/* ── the digital activation boards ──────────────────────────────────── */
.board{width:100%;height:auto;border-radius:6px;border:1px solid var(--line);
    background:#fff;box-shadow:0 14px 44px rgba(0,0,0,.10)}
.panels{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:22px}
.panels img{width:100%;aspect-ratio:3/5;object-fit:contain;background:#F4F4F4;border-radius:4px}
@media (max-width:1000px){ .panels{grid-template-columns:repeat(4,1fr)} }
@media (max-width:620px){ .panels{grid-template-columns:repeat(3,1fr)} }
.hint{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rail);margin-top:12px}


/* ── radio ──────────────────────────────────────────────────────────────
   No audio yet, and that is the point: these spots live or die on timing,
   so the page plays the timing. The dead air in Hadi Mwisho is a real gap
   in the waveform and four real seconds of nothing. */
.radios{display:grid;gap:22px;margin-top:44px}
.radio{background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px 32px}
.rhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.rroute{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:700}
.rtitle{font-family:Georgia,serif;font-size:27px;margin-top:6px;color:var(--ink)}
.rlen{font-family:Georgia,serif;font-size:27px;color:var(--rail)}
.rnote{font-size:16px;font-weight:300;color:var(--body);margin-top:12px;max-width:78ch;line-height:1.6}
.rplayer{display:flex;align-items:center;gap:18px;margin-top:24px}
.rplay{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--red);color:#fff;
   font-size:17px;cursor:pointer;transition:.2s;padding-left:3px}
.rplay:hover{transform:scale(1.06)}
.rplay.on{padding-left:0}
.rwave{position:relative;flex:1;height:54px;overflow:hidden}
.rbars{position:absolute;inset:0;display:flex;align-items:center;gap:3px}
.rbars i{display:block;flex:1;background:#E3E4E5;border-radius:1px;transition:background .1s}
.rbars i.gap{background:transparent;border-top:1px solid #D6D7D8;height:1px!important}
.rbars i.lit{background:var(--red)}
.rhead-line{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);left:0;opacity:0;
   transition:opacity .2s}
.rhead-line.on{opacity:1}
.rtime{flex:none;font-size:14px;letter-spacing:.1em;color:var(--rail);min-width:52px;text-align:right;
   font-variant-numeric:tabular-nums}
.rscript{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;min-height:96px}
.rline{opacity:.25;transition:opacity .35s;margin-bottom:12px}
.rline.on{opacity:1}
.rline .sw{font-size:21px;color:var(--ink);line-height:1.4}
.rline .en{font-size:14px;font-weight:300;color:var(--rail);font-style:italic;margin-top:3px}
.rline.silent .sw{color:var(--red);font-weight:700;letter-spacing:.06em}
@media (max-width:620px){ .radio{padding:22px} .rtitle,.rlen{font-size:22px} }


/* ── the carousel ───────────────────────────────────────────────────────
   A wall of eighteen small panels is a wall, not a story. One frame holds
   the eye, its neighbours sit back, and you move through it in the order
   the thing actually happens. Scroll, drag, arrow keys or the buttons. */
.car{position:relative;margin-top:26px}
.car-vp{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
   scrollbar-width:none;-ms-overflow-style:none;padding:14px 0 6px}
.car-vp::-webkit-scrollbar{display:none}
.car-tr{display:flex;align-items:center;gap:26px}
.car-pad{flex:0 0 auto;display:block;height:1px}
.car figure{flex:none;width:var(--cw);margin:0;scroll-snap-align:center;
   transform:scale(.80);opacity:.34;transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .42s;
   transform-origin:center}
.car figure.near{transform:scale(.88);opacity:.6}
.car figure.on{transform:scale(1);opacity:1}
.car img{width:100%;height:auto;display:block;border-radius:6px;background:#F4F4F4;
   box-shadow:0 12px 40px rgba(0,0,0,.13);cursor:zoom-in}
.car figcaption{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rail);
   margin-top:12px;text-align:center;opacity:0;transition:opacity .3s}
.car figure.on figcaption{opacity:1}
.car-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:14px}
.car-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;
   color:var(--ink);font-size:17px;cursor:pointer;transition:.2s;line-height:1}
.car-btn:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.car-btn:disabled{opacity:.28;cursor:default}
.car-count{font-size:12px;letter-spacing:.18em;color:var(--rail);font-variant-numeric:tabular-nums;
   min-width:64px;text-align:center}
.car-dots{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.car-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s}
.car-dots i.on{background:var(--red);transform:scale(1.35)}
.car.tall{--cw:290px}
.car.wide{--cw:640px}
.car.board{--cw:min(1100px,86vw)}
@media (max-width:820px){ .car.tall{--cw:220px} .car.wide{--cw:82vw} }

/* the one spot that is actually recorded */
.radio.sound{border-color:var(--red);border-width:2px}
.radio.sound .rscript{display:none}


/* ── the film, embedded live ────────────────────────────────────────────
   Not a screen recording and not a rip. The real player, so in the room it
   is demonstrably the actual thing with the actual number under it. */
.tube{position:relative;width:100%;aspect-ratio:16/9;margin-top:34px;background:#000;
   border-radius:8px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.18)}
.tube iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tubecap{font-size:12px;letter-spacing:.02em;color:var(--rail);margin-top:12px}
.tubecap a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(230,0,0,.35)}


/* ── the VYB journey ────────────────────────────────────────────────────
   Both paths at true scale. The membership bar collapses to eight pixels
   because that is what 0.73 per cent looks like, and the collapse is the
   argument. It animates on scroll so you watch it happen. */
.jour{margin-top:34px}
.jt{margin-bottom:46px}
.jlab{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rail);
   font-weight:700;margin-bottom:16px}
.jlab.aqua{color:#00B0CA}
.jtrack{display:flex;flex-direction:column;gap:14px}
.jseg{position:relative;height:44px;background:#F2F3F3;border-radius:3px;overflow:visible}
.jseg::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;
   background:var(--rail);transition:width 1.5s cubic-bezier(.2,.7,.3,1)}
.k1::before,.k2::before,.k3::before{background:#00B0CA}
.j1::before,.k1::before{background:#C9CCCD}
.jour.go .jseg::before{width:var(--w)}
.jseg span{position:absolute;left:14px;top:11px;font-size:14px;font-weight:700;color:#fff;z-index:2}
.jseg span.out{left:auto;right:14px;color:var(--ink)}
.jgate{display:flex;align-items:baseline;gap:12px;padding:6px 0 2px}
.jgate b{font-size:12px;letter-spacing:.2em;color:var(--red)}
.jgate i{font-size:12px;letter-spacing:.06em;color:var(--rail);font-style:normal}
.jgate.open b{color:#00B0CA}
.jnote{font-size:12px;color:var(--rail);margin-top:8px}


/* ── the engine ─────────────────────────────────────────────────────────
   One story fans out into nine. The fan animates on scroll because the
   multiplication is the argument, and a static list of nine channels reads
   as a channel plan, which is precisely what this is not. */
.fan{margin-top:30px;display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:center}
.fan-in{background:var(--red);color:#fff;border-radius:6px;padding:26px 24px}
.fan-in b{display:block;font-size:26px;font-family:Georgia,serif}
.fan-in span{display:block;font-size:13px;opacity:.86;margin-top:8px}
.fan-out{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fan-out i{display:block;font-style:normal;border:1px solid var(--line);border-radius:5px;
   padding:14px 16px;background:#fff;opacity:0;transform:translateX(-14px);
   transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.fan.go .fan-out i{opacity:1;transform:none}
.fan-out i b{display:block;font-size:15px;color:var(--ink)}
.fan-out i span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
   color:var(--rail);margin-top:5px}
@media (max-width:860px){ .fan{grid-template-columns:1fr} .fan-out{grid-template-columns:repeat(2,1fr)} }

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.tier{border-top:3px solid var(--line);padding-top:16px}
.tier.red{border-top-color:var(--red)}
.tier b{display:block;font-size:19px;color:var(--ink)}
.tier span{display:block;font-size:14px;font-weight:300;color:var(--body);margin-top:8px;line-height:1.5}
.tier em{display:block;font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
   color:var(--red);font-weight:700;margin-top:12px}
@media (max-width:820px){ .tiers{grid-template-columns:repeat(2,1fr)} }

.proto{border:2px solid var(--red);border-radius:8px;padding:38px 40px}
.proto .btn{display:inline-block;margin-top:22px;background:var(--red);color:#fff;text-decoration:none;
   padding:14px 30px;border-radius:3px;font-size:14px;font-weight:700;letter-spacing:.12em;
   text-transform:uppercase;transition:.2s}
.proto .btn:hover{background:#B80000}

.proto .wt{width:100%;border-radius:6px;margin-top:24px;border:1px solid var(--line);display:block}
.wtcap{font-size:12px;letter-spacing:.02em;color:var(--rail);margin-top:10px}
.proto .btn.ghost{background:transparent;color:var(--red);border:1px solid var(--red);margin-left:10px}
.proto .btn.ghost:hover{background:var(--red);color:#fff}


/* ── the takeaway ───────────────────────────────────────────────────────
   The last thing on the site. It gets scanned off a shared screen on a
   video call, so the code is large, black on white, and given real space
   rather than tucked into a footer. */
.takeaway{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;margin-top:52px}
.qr{background:#fff;padding:20px;border-radius:8px;line-height:0}
.qr img{width:100%;height:auto;display:block;image-rendering:crisp-edges}
.qrsay h3{font-family:Georgia,serif;font-size:clamp(22px,2.3vw,30px);line-height:1.25;margin-bottom:14px}
.qrsay p{font-size:16px;font-weight:300;line-height:1.6;max-width:56ch}
.qrsay .dl{margin-top:18px}
@media (max-width:760px){ .takeaway{grid-template-columns:1fr;gap:26px} .qr{max-width:280px} }


/* ── the drop ───────────────────────────────────────────────────────────
   These sit outside a carousel, so nothing else was giving the image a
   width. Without one it collapsed to zero, the section had no height, and
   the reveal observer never fired on it. */
.drop{margin:26px 0 0}
.dropimg{width:100%;height:auto;display:block;border-radius:6px;
   box-shadow:0 14px 44px rgba(0,0,0,.12);cursor:zoom-in}
.drop figcaption{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
   color:var(--rail);margin-top:12px}


/* ── the one page, the first thing the site says ─────────────── */
#onepage{background:#fff}
.op-grid{display:grid;grid-template-columns:1.05fr 1.25fr;gap:44px;margin-top:26px;align-items:start}
.op-grid>div:last-child{border-left:1px solid var(--line);padding-left:34px}
.op-lab{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.op-q{font-family:Georgia,serif;font-size:clamp(20px,2.2vw,28px);line-height:1.32;margin-top:10px}
.op-grey{font-family:Georgia,serif;font-size:clamp(19px,2vw,26px);color:var(--rail);margin-top:10px}
.op-kill{font-family:Georgia,serif;font-size:clamp(22px,2.4vw,31px);color:var(--red);line-height:1.2;margin-top:10px}
.op-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.op-chip{border:1px solid var(--line);color:var(--rail);font-size:13.5px;padding:6px 13px}
.op-gaps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:16px}
.op-gap{border-top:4px solid var(--ink);background:#FAFAFA;padding:14px 18px 16px}
.op-gap.crit{border-top-color:var(--red);background:#FFF4F4}
.op-gap h4{font-family:Georgia,serif;font-weight:400;font-size:23px;line-height:1.1;margin:6px 0}
.op-gap .mv{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink);margin-top:8px}
.op-gap.crit .mv,.op-gap.crit .op-lab{color:var(--red)}
.op-lever{display:flex;flex-wrap:wrap;align-items:center;gap:20px;background:var(--red);color:#fff;padding:20px 26px;margin-top:26px}
.op-lever h3{font-family:Georgia,serif;font-weight:400;font-size:clamp(22px,2.3vw,30px);color:#fff}
.op-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:26px}
.op-route{display:flex;gap:16px;align-items:flex-start}
.op-route img{width:132px;height:174px;object-fit:cover;flex:0 0 132px;border:1px solid var(--line)}
.op-route h4{font-family:Georgia,serif;font-weight:400;font-size:26px;line-height:1}
@media(max-width:900px){.op-grid{grid-template-columns:1fr}.op-grid>div:last-child{border-left:0;padding-left:0}
  .op-gaps{grid-template-columns:1fr 1fr}.op-routes{grid-template-columns:1fr}}