/* About page: a scroll-driven "film". Layout: templates/about.php. Choreography: public/assets/js/about-fx.js (sets --p 0..1 on
   [data-r3d] and [data-pin] elements as they scroll; everything else is declarative CSS below).
   Progressive enhancement: without JS, with reduced motion, or before html.ab-live is set, every chapter is a plain readable section
   showing its final state (--p defaults to 1). Only transform and opacity are animated. */

/* small orange text needs a darker orange than --orange to reach AA contrast on the grey surface (large text may keep --orange) */
:root{--ab-accent:light-dark(#A8420A,#FF8A3D)}
[data-r3d],[data-pin],[data-horizon]{--p:1}
.ch{position:relative;padding-block:clamp(4rem,9vw,7rem)}
.ch h2{margin:.3rem 0 1.25rem;font:700 clamp(2rem,1rem + 3.6vw,3.8rem)/1.05 var(--f-h1);letter-spacing:-.01em;max-width:18ch}
.ch-kicker{margin:0;font:500 .8rem/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ch-kicker span{display:inline-block;margin-right:.6rem;padding:.12rem .7rem;border-radius:99px;box-shadow:var(--press);color:var(--ab-accent)}
.ch-copy p{max-width:38rem;font-size:1.08rem}
.ab-quote{margin:1.25rem 0;padding:1.1rem 1.4rem;border-radius:1.2rem;border-left:4px solid var(--deco);box-shadow:var(--raise);background:var(--surface)}
.ab-quote p{margin:0;font:600 1.15rem/1.5 var(--f-body);color:var(--ink)}

/* ---------- Pinned scenes + 3D scroll reveals (only when JS marks the page live) ---------- */
/* Pinned scenes only where the stage fits a viewport (wide screens); on phones they are ordinary sections whose progress follows the scroll pass. */
@media (min-width:60em){
html.ab-live [data-pin]{height:calc(var(--pin,200) * 1vh);padding-block:0}
html.ab-live [data-pin] .pin-stage{position:sticky;top:0;height:100svh;display:grid;align-content:center;padding-top:5.5rem;overflow:clip}
/* JS adds .no-pin when a scene's content is taller than the window (short laptop screens): it then scrolls as a normal section, nothing is ever clipped */
html.ab-live [data-pin].no-pin{height:auto;padding-block:clamp(3rem,7vw,5rem)}
html.ab-live [data-pin].no-pin .pin-stage{position:static;height:auto;overflow:visible;padding-top:0}
}
/* opacity never drops below .94, so text (including the small orange labels) always keeps AA contrast even before it scrolls into view; the drama is the 3D motion */
html.ab-live [data-r3d]{will-change:transform,opacity;opacity:calc(.94 + .06 * var(--p));
  transform:perspective(1200px) translate3d(0,calc((1 - var(--p)) * 60px),calc((1 - var(--p)) * -240px)) rotateX(calc((1 - var(--p)) * 14deg)) rotateY(calc(var(--d,1) * (1 - var(--p)) * -16deg))}
@media (max-width:48em){html.ab-live [data-r3d]{transform:perspective(900px) translate3d(0,calc((1 - var(--p)) * 40px),calc((1 - var(--p)) * -120px)) rotateX(calc((1 - var(--p)) * 8deg))}}

/* ---------- Title card (always dark: cinematic) ---------- */
.ab-hero{position:relative;isolation:isolate;overflow:clip;display:grid;align-items:center;min-height:min(100svh,58rem);padding-block:7.5rem 5.5rem;color-scheme:dark;color:var(--ink);
  background:radial-gradient(60% 70% at 78% 38%,#3b2314 0,transparent 70%),radial-gradient(50% 50% at 8% 95%,#2b190e 0,transparent 70%),#0e1014}
.ab-hero-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:60em){.ab-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.ab-hero h1{max-width:14ch;margin:.4rem 0 1.2rem;font-size:clamp(2.3rem,1.2rem + 3.8vw,4.3rem);line-height:1.04}
.ab-hero .lede{max-width:36rem;color:var(--muted)}
.ab-tag{margin:1.5rem 0 0;font:700 clamp(1.1rem,.9rem + 1vw,1.5rem) var(--f-h2);letter-spacing:.04em;text-transform:uppercase;color:var(--deco)}
.ab-cue{display:inline-flex;gap:.6rem;margin-top:1.75rem;font:500 .95rem var(--f-ui);text-decoration:none;color:var(--muted)}
.ab-cue span{display:inline-block}
.ab-stars{position:absolute;inset:-4%;z-index:-1;translate:calc(var(--mx,0) * -14px) calc(var(--my,0) * -10px);transition:translate .3s ease-out;
  background-image:radial-gradient(1.3px 1.3px at 12% 18%,#fffc,transparent),radial-gradient(1px 1px at 28% 72%,#fff9,transparent),radial-gradient(1.6px 1.6px at 44% 30%,#fff,transparent),radial-gradient(1px 1px at 61% 80%,#fff8,transparent),radial-gradient(1.4px 1.4px at 74% 16%,#fffb,transparent),radial-gradient(1px 1px at 88% 58%,#fff9,transparent),radial-gradient(1.2px 1.2px at 95% 90%,#fff8,transparent),radial-gradient(1px 1px at 6% 52%,#fff8,transparent);
  background-size:520px 520px}
.ab-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ab-photo{position:relative;justify-self:center;width:min(100%,23rem);margin:0;perspective:1100px}
.ab-card{position:relative;padding:.6rem;border-radius:1.5rem;background:linear-gradient(145deg,#fff,#e6e8ee);
  transform:rotateX(calc(var(--my,0) * -7deg)) rotateY(calc(var(--mx,0) * 9deg));transform-style:preserve-3d;transition:transform .18s ease-out;
  box-shadow:0 34px 70px -24px #000c,0 0 0 1px #ffffff55,0 0 70px -12px rgba(255,138,61,.5)}
.ab-card img{display:block;width:100%;height:auto;aspect-ratio:480/573;object-fit:cover;border-radius:1.05rem}
.ab-halo{position:absolute;inset:-16% -20% -6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,138,61,.5),transparent 72%);filter:blur(8px)}
.ab-ring{position:absolute;inset:-9%;z-index:-1;border:1.5px dashed rgba(255,138,61,.5);border-radius:50%}
.ab-ring i{position:absolute;left:50%;top:50%;width:.8rem;height:.8rem;margin:-.4rem;border-radius:50%;background:var(--deco);box-shadow:0 0 14px var(--deco)}
.ab-ring i:nth-child(1){transform:rotate(0deg) translateY(-11.5rem)}.ab-ring i:nth-child(2){transform:rotate(120deg) translateY(-11.5rem)}.ab-ring i:nth-child(3){transform:rotate(240deg) translateY(-11.5rem)}
.ab-photo figcaption{margin-top:1.4rem;display:grid;gap:.15rem;text-align:center;font:400 .95rem/1.4 var(--f-body);color:var(--muted)}
.ab-photo figcaption strong{font:700 1.1rem var(--f-h2);letter-spacing:.03em;color:var(--ink)}
.ab-photo figcaption small{font:400 .8rem var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--deco)}
@media (prefers-reduced-motion:no-preference){
  .ab-hero::after{content:"";position:absolute;inset:-25%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,138,61,.11) 50%,transparent 58%);animation:ab-sweep 11s linear infinite}
  @keyframes ab-sweep{from{translate:-40% 0}to{translate:40% 0}}
  .ab-ring{animation:spin 46s linear infinite}
  .ab-photo{animation:ab-float 7s ease-in-out infinite}
  @keyframes ab-float{50%{translate:0 -.6rem}}
  .ab-cue span{animation:ab-bob 1.6s ease-in-out infinite}
  @keyframes ab-bob{50%{translate:0 .35rem}}
  /* the title card pauses all its loops while it is off-screen (class set by about-fx.js) */
  .ab-hero.off *,.ab-hero.off::after{animation-play-state:paused!important}
}

/* ---------- The pledge band, right under the title card ---------- */
.ab-pledge{padding-block:clamp(3rem,7vw,5.5rem)}
.ab-pledge p{max-width:40rem;margin:0 auto;text-align:center;font:700 clamp(1.4rem,1rem + 1.8vw,2.3rem)/1.35 var(--f-h1);letter-spacing:-.005em;color:var(--ink)}

/* ---------- Chapter 1: the number counts up, chips fly in from depth ---------- */
.origin-grid,.gap-grid,.deck-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:60em){.origin-grid,.gap-grid,.deck-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.origin-field{position:relative;display:grid;place-items:center;min-height:22rem;text-align:center}
.big{margin:0;font:800 clamp(3.6rem,1.6rem + 9vw,9rem)/.9 var(--f-h1);letter-spacing:-.02em;color:var(--orange);font-variant-numeric:tabular-nums}
.big-cap{margin:.4rem 0 0;font:500 1rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.o-chip{position:absolute;left:50%;top:50%;margin:0;padding:.45rem 1.1rem;border-radius:99px;font:600 .95rem var(--f-ui);font-style:normal;color:var(--ink);background:var(--surface);box-shadow:var(--raise);
  translate:-50% -50%;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}
.o-chip.hot{color:var(--on-orange);background:var(--orange)}
html.ab-live .o-chip{--k:1;transform:translate3d(calc(var(--k) * var(--dx) * (1.5 - var(--p) * .5)),calc(var(--k) * var(--dy) * (1.5 - var(--p) * .5)),0) rotate(calc(var(--r) * (2 - var(--p)))) scale(calc(.55 + .45 * var(--p)));opacity:calc(var(--p) * 1.6 - .2)}

/* ---------- Chapter 2: the capsule turns as it arrives ---------- */
.pharma-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:60em){.pharma-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.capsule-wrap{display:grid;justify-items:center;gap:1.5rem}
.capsule{position:relative;width:min(17rem,70%);aspect-ratio:2.7/1;border-radius:99px;background:linear-gradient(90deg,var(--orange) 0 50%,#f4f4f1 50% 100%);
  box-shadow:inset 0 .7rem 1rem rgba(255,255,255,.4),inset 0 -.9rem 1.3rem rgba(0,0,0,.3),0 2rem 3rem -1rem rgba(0,0,0,.45);transform:rotateZ(-24deg)}
html.ab-live .capsule{transform:rotate3d(1,.4,0,calc((1 - var(--p)) * 420deg)) rotateZ(-24deg)}
.capsule i{position:absolute;inset:.3rem .5rem auto;height:28%;border-radius:99px;background:linear-gradient(rgba(255,255,255,.65),transparent)}
.capsule-cap{margin:0;font:500 .85rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.timeline-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.25rem;padding:0;list-style:none}
.timeline-chips li{padding:.45rem 1rem;border-radius:99px;background:var(--surface);box-shadow:var(--raise);font:500 .9rem var(--f-ui);color:var(--ink)}
.timeline-chips b{margin-right:.4rem;color:var(--ab-accent)}
.pull-lg{font:600 clamp(1.25rem,1rem + 1vw,1.7rem)/1.5 var(--f-body)!important;color:var(--ink)}

/* ---------- Chapter 3: two lines diverge; the gap lights up ---------- */
.gap-fig{margin:0}
.gap-svg{width:100%;height:auto;overflow:visible}
.gap-svg .axis{fill:none;stroke:color-mix(in srgb,var(--ink) 25%,transparent);stroke-width:2;stroke-linecap:round}
.gap-svg .line{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, (var(--p) - .05) / .45, 1))}
.gap-svg .traffic{stroke:var(--muted)}
.gap-svg .cac{stroke:var(--deco);stroke-dashoffset:calc(1 - clamp(0, (var(--p) - .12) / .5, 1));filter:drop-shadow(0 0 8px color-mix(in srgb,var(--deco) 55%,transparent))}
.gap-svg .gap-fill{fill:var(--deco);opacity:calc(clamp(0, (var(--p) - .6) / .3, 1) * .24)}
.gap-svg text{font:600 15px var(--f-ui);fill:var(--muted)}
.gap-svg .t-label.hot{fill:var(--deco)}
.gap-svg .gap-label{font:700 17px var(--f-h2);letter-spacing:.04em;fill:var(--ink);opacity:clamp(0, (var(--p) - .68) / .2, 1)}

/* ---------- Chapter 4: the M builds itself ---------- */
.m-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:60em){.m-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.m-fig{margin:0}
.m-fig svg{width:100%;height:auto;overflow:visible}
.m-bars rect{fill:color-mix(in srgb,var(--ink) 9%,transparent);transform-box:fill-box;transform-origin:50% 100%;scale:1 calc(.15 + .85 * var(--p))}
.m-line{fill:none;stroke:var(--deco);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, (var(--p) - .25) / .6, 1));filter:drop-shadow(0 0 8px color-mix(in srgb,var(--deco) 55%,transparent))}
.m-nodes circle{fill:var(--orange);opacity:clamp(0, (var(--p) - .4) / .3, 1)}
.m-fig text{font:600 15px var(--f-ui);fill:var(--muted)}

/* ---------- Chapter 5: the proof ---------- */
.ch-proof h2{max-width:22ch}
.stats3d{display:grid;gap:1.25rem;margin:2rem 0 0;padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.stats3d li{display:grid;gap:.5rem;padding:1.5rem;border-radius:var(--radius);background:var(--surface);box-shadow:var(--raise)}
.stats3d strong{font:800 clamp(2rem,1.3rem + 1.7vw,3.1rem)/1 var(--f-h1);color:var(--orange);font-variant-numeric:tabular-nums}
.stats3d li>span:last-child{color:var(--muted);font-size:.98rem}
.proof-para{max-width:46rem;margin:2rem 0 0}

/* ---------- Chapter 6: a deck of four principles ---------- */
.deck{margin:0;padding:0;list-style:none;display:grid;gap:1rem}
.deck-card{padding:1.4rem 1.6rem;border-radius:var(--radius);background:var(--surface);box-shadow:var(--raise)}
.deck-n{font:800 .9rem var(--f-ui);letter-spacing:.14em;color:var(--ab-accent)}
.deck-card h3{margin:.3rem 0 .4rem;font-size:1.35rem}
.deck-card p{margin:0;color:var(--muted)}
@media (min-width:60em){
html.ab-live .deck{position:relative;display:block;height:min(19rem,52svh);perspective:1400px}
html.ab-live .deck-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  --q:calc(var(--p) * 3 - var(--i) + 1);--in:clamp(0,var(--q),1);--out:clamp(0,calc(var(--q) - 1),1);
  transform:translate3d(0,calc((1 - var(--in)) * 115% - var(--out) * 14%),calc(var(--out) * -180px)) rotateX(calc((1 - var(--in)) * 20deg)) scale(calc(1 - var(--out) * .08));
  opacity:calc(clamp(0, var(--in) * 2.2, 1) - var(--out) * .7);z-index:calc(10 + var(--i));will-change:transform,opacity}
}

/* ---------- Chapter 7: perspective horizon (always dark) ---------- */
.ch-horizon{overflow:clip;isolation:isolate;min-height:min(80svh,46rem);display:grid;align-items:center;color-scheme:dark;color:var(--ink);background:linear-gradient(#0e1014,#1a110d 55%,#2c170b)}
.hz-sky{position:absolute;inset:0;z-index:-2}
.hz-sun{position:absolute;left:76%;bottom:24%;width:min(24rem,46vw);aspect-ratio:1;border-radius:50%;translate:-50% 0;background:radial-gradient(circle at 50% 40%,#ffb27a,#ff7a29 55%,rgba(255,122,41,0) 72%);opacity:.8;
  transform:translateY(calc((1 - var(--p)) * 30%))}
.hz-grid{position:absolute;left:-60%;right:-60%;bottom:0;height:46%;z-index:-1;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(255,138,61,.55) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,138,61,.55) 1.5px,transparent 1.5px);background-size:72px 72px;background-position:0 calc(var(--gy,0) * 1px);
  -webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
.hz-copy{position:relative;z-index:1;padding-block:5rem}
.hz-copy h2{max-width:14ch}
.hz-copy p{max-width:40rem}

/* ---------- End credits ---------- */
.ch-credits{text-align:center}
.ch-credits h2{margin-inline:auto;max-width:16ch}
.credits-line{max-width:42rem;margin:0 auto 1.5rem;font:600 clamp(1.25rem,1rem + 1.2vw,1.8rem)/1.5 var(--f-body);color:var(--ink)}
.credits-based{max-width:36rem;margin:0 auto;color:var(--muted)}
/* phones: chips sit in a tidy row under the number instead of floating around it */
@media (max-width:48em){
  .origin-field{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:.5rem;min-height:0}
  .origin-field .big,.origin-field .big-cap{flex-basis:100%}
  .origin-field .big-cap{margin-bottom:.8rem}
  html.ab-live .o-chip,.o-chip{position:static;translate:none;transform:none;opacity:1}
}

/* Page images: the closing "short version" is a two-column section (text left, share image right), so its centred text becomes left-aligned */
.credits.pg-split{text-align:left}
.credits.pg-split h2,.credits.pg-split .credits-line,.credits.pg-split .credits-based{margin-inline:0}