/* ──────────────────────────────────────────
   TOI · The Oil Insurgency · Shared System
   ────────────────────────────────────────── */

/* ── Insurgency Type — the brand display face (letters) ── */
@font-face {
  font-family: 'Insurgency';
  src: url('../fonts/Theinsurgency-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ── Insurgent Numbers — companion font containing the 10 brand digits ── */
@font-face {
  font-family: 'InsurgentNumbers';
  src: url('../fonts/InsurgentNumbers-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039; /* digits only */
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --green:#3a6a36;
  --green-deep:#3a6a36;
  --green-darker:#2D5A27;
  --coral:#d65138;
  --orange:#edb33f;
  --red:#d12e2b;
  --lime:#84ad43;
  --beige:#f8edc4;
  --yellow:#f4e73c;
  --black:#1d1d1b;
  --ink:#181816;             /* v2: slightly cooler black for text */
  --white:#fafaf7;
  --cream:#f5efe2;           /* v2: warm cream — primary v2 background */
  --cream-soft:#faf6ec;      /* v2: lighter cream for sections */
  --paper:#fdfbf3;           /* v2: near-white paper */
  --line:rgba(24,24,22,.10); /* v2: subtle hairline rules */
  --line-strong:rgba(24,24,22,.18);
  --font-body:'Roboto',sans-serif;
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-body);color:var(--black);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--orange);color:var(--black)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ── LOADER ── */
.loader{position:fixed;inset:0;background:var(--green-deep);z-index:10000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;transition:opacity .8s ease,visibility .8s ease}
.loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{width:120px;opacity:0;animation:loaderPop .6s .2s forwards}
.loader-bar{width:180px;height:3px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden}
.loader-bar::after{content:'';display:block;width:100%;height:100%;background:var(--orange);transform-origin:left;animation:loadBar 1.4s .3s ease-in-out forwards;transform:scaleX(0)}
@keyframes loadBar{to{transform:scaleX(1)}}
@keyframes loaderPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 48px;display:flex;align-items:center;justify-content:space-between;transition:all .4s ease}
.nav.dark{background:rgba(29,29,27,.92);backdrop-filter:blur(16px)}
.nav.scrolled{background:rgba(29,29,27,.92);backdrop-filter:blur(16px);padding:14px 48px}
.nav-logo img{height:40px;width:auto;transition:height .3s}
.nav.scrolled .nav-logo img{height:34px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--white);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.7;transition:opacity .3s;position:relative}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;color:var(--orange)}
.nav-links a.active::after{content:'';position:absolute;bottom:-6px;left:0;right:0;height:2px;background:var(--orange)}
.nav-cta{background:var(--orange)!important;color:var(--black)!important;padding:10px 24px;font-weight:700;opacity:1!important;transition:background .3s,transform .3s}
.nav-cta:hover{background:var(--yellow)!important;transform:scale(1.03)}
.nav-cta.active{color:var(--black)!important}
.nav-cta.active::after{display:none}

/* Mobile nav toggle */
.nav-toggle{display:none;background:transparent;border:0;color:var(--white);font-size:24px;cursor:pointer;padding:8px}

/* ── BUTTONS ── */
.btn{font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:16px 36px;transition:all .35s ease;display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none}
.btn-primary{background:var(--orange);color:var(--black)}
.btn-primary:hover{background:var(--yellow);transform:translateY(-2px);box-shadow:0 12px 40px rgba(237,179,63,.25)}
.btn-outline{background:transparent;color:var(--white);border:1.5px solid rgba(250,250,247,.3)}
.btn-outline:hover{border-color:var(--white);background:rgba(250,250,247,.06)}
.btn-outline-dark{background:transparent;color:var(--black);border:1.5px solid rgba(29,29,27,.3)}
.btn-outline-dark:hover{border-color:var(--black);background:rgba(29,29,27,.06)}
.btn-green{background:var(--green-deep);color:var(--white)}
.btn-green:hover{background:var(--green);transform:translateY(-2px)}
.btn-coral{background:var(--coral);color:var(--white)}
.btn-coral:hover{background:var(--red);transform:translateY(-2px)}

/* ── MARQUEE ── */
.marquee{overflow:hidden;background:var(--orange);padding:14px 0;white-space:nowrap}
.marquee-track{display:inline-flex;animation:marquee 35s linear infinite}
.marquee-item{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--black);padding:0 32px;display:inline-flex;align-items:center;gap:32px}
.marquee-dot{width:6px;height:6px;background:var(--green-deep);border-radius:50%;flex-shrink:0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── REVEAL SYSTEM ── */
/* Subtle entrance: short distance, faster transition, capped stagger.
   Heavy motion / long stagger caused eye fatigue on copy-dense pages (sourcing). */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.reveal.vis{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.06s}
.reveal-d2{transition-delay:.12s}
.reveal-d3{transition-delay:.18s}
.reveal-d4{transition-delay:.22s}
.reveal-d5{transition-delay:.26s}
.reveal-d6{transition-delay:.3s}

/* ── TOI LOGO INTRO ── (homepage centerpiece → seated header logo)
   Spec: design_handoff_logo_intro/README.md. Sticker drifts in, anticipates,
   slaps with squash/stretch, secondary bounces, then idles. Letters stay still. */
.logo-stage{
  position:fixed;z-index:1100;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  /* `color` is in the transition list so the cartel can crossfade cream→ink
     as it seats into the nav. The cartel SVG paths use currentColor, so a
     CSS color change propagates to the strokes/fills. Same 700ms timing as
     the seating motion means the color and position animate together as one
     smooth transformation. */
  transition:
    top    700ms cubic-bezier(.7,.05,.2,1),
    left   700ms cubic-bezier(.7,.05,.2,1),
    width  700ms cubic-bezier(.7,.05,.2,1),
    transform 700ms cubic-bezier(.7,.05,.2,1),
    color  700ms cubic-bezier(.7,.05,.2,1);
  will-change:top,left,width,transform,color;
}
.logo-stage .logo-svg{width:100%;height:auto;display:block;color:inherit;overflow:visible}
.logo-stage .logo-svg #toi-cartel{transform-box:fill-box;transform-origin:50% 50%}
/* Centerpiece pose: huge, centered. Cap by BOTH viewport width AND height so the logo
   never bleeds out vertically on short windows (the aspect ratio of 1172/660 ≈ 1.78
   means height = width × 0.563 — without a height cap, a 820px-wide logo eats 462px
   of vertical space which is too much on viewports under ~750px tall). */
.logo-stage.centerpiece{
  top:50%;left:50%;
  /* Smaller centerpiece — was min(64vw, 820px, 60vh*aspect). Reduced to
     min(42vw, 540px, 40vh*aspect) so a less-massive logo travels less
     distance during the slap, which reads as snappier and less wobbly.
     Still big enough to feel cinematic on desktop, sized down on mobile. */
  width:min(42vw, 540px, calc(40vh * 1172 / 660));
  transform:translate(-50%,-50%);
}
/* Seated pose: lives where the nav logo socket is (top-left of nav) */
.logo-stage.seated{top:14px;left:48px;width:132px;transform:translate(0,0)}
.logo-stage.seated.compact{top:8px;width:118px}
/* Color override when the nav background is dark (green/ink). */
.logo-stage.on-dark{color:var(--cream)}
/* Cartel starts hidden until JS triggers its entrance keyframes. */
.logo-stage.intro-armed #toi-cartel{opacity:0}
/* Suppress the 700ms slide transition during initial boot on return visits,
   so the cartel snaps directly to the seated pose instead of animating from
   default (top:0,left:0) to seated. JS adds .no-anim before setPose, forces
   a reflow, then removes .no-anim. */
.logo-stage.no-anim{transition:none !important}
/* Idle nod: subtle "paper tacked to a wall" breath. */
.cartel-idle{animation:toi-cartel-idle 5.6s ease-in-out infinite;animation-delay:1.6s}
@keyframes toi-cartel-idle{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  50%   {transform:translate(0,-2px) rotate(-.5deg)}
}
/* Intro full-screen backdrop — fills with a muted/looped video. The video is
   an <video> element child (not a background-image) so it plays inline.
   Vignette is rendered as a ::after pseudo-element ABOVE the video so the
   cartel reads against any frame the video happens to be on at intro time.
   Solid green fallback color in case the video stalls or is blocked. */
.intro-veil{
  position:fixed;inset:0;z-index:1099;
  background:var(--green-deep);
  overflow:hidden;
  transition:opacity 700ms cubic-bezier(.7,.05,.2,1);
  will-change:opacity;
}
.intro-veil-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* Darker + slightly desaturated so the cream cartel really pops, and the
     video reads as cinematic backdrop, not bright distraction. Was
     brightness(.85) — too bright; cartel competed with the video subject.
     Now brightness(.5) gives a moody, premium feel. */
  filter:saturate(.85) brightness(.5);
}
.intro-veil::after{
  content:'';
  position:absolute;inset:0;
  /* Vignette: light tint in center where the logo lives, much darker at the
     corners. Was a soft 0→0.45 fade; now 0.15→0.7 so the framing feels
     cinematic and the dark corners frame the moment. Sits on top of the
     video so it dims the video further at the edges. */
  background:radial-gradient(ellipse at center,
              rgba(10,20,8,0.15) 0%,
              rgba(5,10,4,0.70) 95%);
  pointer-events:none;
}
/* During the intro moment the cartel must read as white-on-video.
   Switching color via CSS lets the .logo-stage's color transition (defined
   above) crossfade it smoothly back to ink as it seats into the nav. */
body.intro-armed .logo-stage.centerpiece{color:var(--cream)}
body.intro-done .intro-veil{opacity:0;pointer-events:none}
/* When intro is armed (homepage first visit) hide page content so the moment lands. */
body.intro-armed .nav-v25,body.intro-armed main,body.intro-armed section,
body.intro-armed footer{opacity:0;transition:opacity 600ms ease}
body.intro-armed .nav-v25 .nav-logo{visibility:hidden}
body.content-in .nav-v25,body.content-in main,body.content-in section,
body.content-in footer{opacity:1}
/* On the homepage the seated stage replaces the static nav-logo visually, so hide it. */
body.has-logo-stage .nav-v25 .nav-logo img{visibility:hidden}
body.has-logo-stage .nav-v25 .nav-logo{width:132px;height:44px;display:inline-block}

/* Respect OS-level reduced-motion preference: kill all entrance + parallax motion. */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.vis{opacity:1;transform:none;transition:none}
  .reveal-d1,.reveal-d2,.reveal-d3,.reveal-d4,.reveal-d5,.reveal-d6{transition-delay:0}
  [data-parallax] img,.photo-break img{transform:none !important}
  .sticker-float{animation:none !important}
  .logo-stage{transition:none !important}
  .cartel-idle{animation:none !important}
  body.intro-armed .nav-v25,body.intro-armed main,body.intro-armed section,
  body.intro-armed footer{opacity:1;transition:none}
  .marquee-track{animation:none !important}
}

/* ── SECTION LABELS ── */
.section-label{font-size:12px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;margin-bottom:20px}

/* ── PAGE HERO (sub-pages) ── */
.page-hero{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:flex-start;padding:140px clamp(24px,8vw,120px) 80px;overflow:hidden;background:var(--black)}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(29,29,27,.85) 0%,rgba(29,29,27,.55) 60%,rgba(29,29,27,.3) 100%)}
.page-hero-content{position:relative;z-index:2;max-width:780px}
.page-hero .eyebrow{color:var(--orange);font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;margin-bottom:24px;display:block}
.page-hero h1{color:var(--white);font-size:clamp(40px,7vw,96px);font-weight:900;line-height:1.02;margin-bottom:24px;letter-spacing:-.02em}
.page-hero h1 em{font-style:normal;color:var(--orange)}
.page-hero h1 .coral{color:var(--coral)}
.page-hero .lede{color:rgba(250,250,247,.75);font-size:clamp(16px,1.6vw,22px);line-height:1.55;max-width:600px}

/* ── PHOTO BREAK ── */
.photo-break{position:relative;height:60vh;min-height:400px;overflow:hidden}
.photo-break img{width:100%;height:100%;object-fit:cover}
.photo-break-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(29,29,27,.7) 0%,rgba(29,29,27,.2) 60%,transparent 100%)}
.photo-break-text{position:absolute;bottom:60px;left:clamp(24px,8vw,120px);z-index:2;max-width:500px}
.photo-break-text h3{color:var(--white);font-size:clamp(28px,4vw,48px);font-weight:900;line-height:1.15;margin-bottom:12px}
.photo-break-text h3 em{color:var(--orange);font-style:normal}
.photo-break-text p{color:rgba(250,250,247,.6);font-size:15px;line-height:1.7}

/* ── GENERIC SECTIONS ── */
.section{padding:clamp(80px,14vh,160px) clamp(24px,8vw,120px)}
.section-inner{max-width:1200px;margin:0 auto}
.section-narrow{max-width:880px;margin:0 auto}
.section-wide{max-width:1400px;margin:0 auto}

.bg-black{background:var(--black);color:var(--white)}
.bg-green{background:var(--green-deep);color:var(--white)}
.bg-green-mid{background:var(--green);color:var(--white)}
.bg-orange{background:var(--orange);color:var(--black)}
.bg-coral{background:var(--coral);color:var(--white)}
.bg-beige{background:var(--beige);color:var(--black)}
.bg-white{background:var(--white);color:var(--black)}
.bg-yellow{background:var(--yellow);color:var(--black)}

.h-display{font-size:clamp(36px,5.5vw,68px);line-height:1.05;font-weight:900;letter-spacing:-.015em;margin-bottom:24px}
.h-display em{font-style:italic;color:var(--orange)}
.h-display .green{color:var(--green-deep)}
.h-display .coral{color:var(--coral)}
.h-section{font-size:clamp(32px,4.5vw,56px);line-height:1.1;font-weight:900;margin-bottom:24px}
.h-section em{font-style:normal;color:var(--orange)}
.lede-text{font-size:clamp(16px,1.5vw,19px);line-height:1.75;max-width:680px}
.bg-black .lede-text,.bg-green .lede-text,.bg-green-mid .lede-text,.bg-coral .lede-text{color:rgba(250,250,247,.7)}
.bg-orange .lede-text,.bg-beige .lede-text,.bg-white .lede-text,.bg-yellow .lede-text{color:rgba(29,29,27,.75)}

p.body-text{font-size:16px;line-height:1.8;margin-bottom:20px}
.bg-black p.body-text,.bg-green p.body-text,.bg-green-mid p.body-text,.bg-coral p.body-text{color:rgba(250,250,247,.7)}

/* ── CARD GRID ── */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.card-dark{background:rgba(250,250,247,.03);border:1px solid rgba(250,250,247,.08);padding:32px 28px;position:relative;overflow:hidden;transition:all .4s ease}
.card-dark:hover{border-color:var(--orange);background:rgba(237,179,63,.06);transform:translateY(-4px)}
.card-dark .num{font-size:48px;font-weight:900;color:var(--orange);opacity:.16;position:absolute;top:12px;right:16px;line-height:1}
.card-dark h4{color:var(--white);font-size:17px;font-weight:700;margin-bottom:10px}
.card-dark p{color:rgba(250,250,247,.5);font-size:14px;line-height:1.65}
.card-dark .ind-icon{font-size:28px;margin-bottom:16px;display:block}

.card-light{background:rgba(29,29,27,.04);border:1px solid rgba(29,29,27,.08);padding:32px 28px;position:relative;overflow:hidden;transition:all .4s ease}
.card-light:hover{border-color:var(--green-deep);background:rgba(58,106,54,.05);transform:translateY(-4px)}
.card-light .num{font-size:48px;font-weight:900;color:var(--green-deep);opacity:.18;position:absolute;top:12px;right:16px;line-height:1}
.card-light h4{color:var(--black);font-size:17px;font-weight:700;margin-bottom:10px}
.card-light p{color:rgba(29,29,27,.6);font-size:14px;line-height:1.65}

/* ── SPLIT (2-col image + text) ── */
.split{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split.flip{direction:rtl}
.split.flip>*{direction:ltr}
.split-img{position:relative;border-radius:0;overflow:hidden}
.split-img img{width:100%;height:100%;object-fit:cover;max-height:560px}
.split-sticker{position:absolute;bottom:-20px;right:-10px;width:160px;transform:rotate(8deg);transition:transform .4s ease;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))}
.split-sticker:hover{transform:rotate(-4deg) scale(1.08)}

/* ── STATS / NUMBERS ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.stat{padding:32px 0;border-top:3px solid var(--green-deep)}
.bg-black .stat,.bg-green .stat,.bg-coral .stat{border-top-color:var(--orange)}
.stat-val{font-size:clamp(40px,5.5vw,72px);font-weight:900;color:var(--green-deep);line-height:1}
.bg-black .stat-val,.bg-green .stat-val,.bg-coral .stat-val{color:var(--orange)}
.stat-val span{font-size:.35em;color:var(--orange);font-weight:700;vertical-align:super}
.bg-black .stat-val span,.bg-green .stat-val span,.bg-coral .stat-val span{color:var(--white)}
.stat-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-top:8px;color:var(--black)}
.bg-black .stat-name,.bg-green .stat-name,.bg-coral .stat-name{color:var(--white)}
.stat-desc{font-size:13px;color:rgba(29,29,27,.5);line-height:1.55;margin-top:8px}
.bg-black .stat-desc,.bg-green .stat-desc,.bg-coral .stat-desc{color:rgba(250,250,247,.5)}

/* ── COMPARISON BAR ── */
.comparison{margin-top:60px;background:var(--black);padding:40px;position:relative}
.comparison h3{color:var(--white);font-size:18px;font-weight:700;margin-bottom:28px}
.comp-row{margin-bottom:16px}
.comp-row:last-child{margin-bottom:0}
.comp-header{display:flex;justify-content:space-between;margin-bottom:5px}
.comp-header span{font-size:13px;color:rgba(250,250,247,.6);text-transform:uppercase;letter-spacing:.04em}
.comp-header strong{color:var(--white);font-weight:700;font-size:13px}
.comp-track{height:8px;background:rgba(250,250,247,.06);overflow:hidden}
.comp-fill{height:100%;width:0;transition:width 1.5s cubic-bezier(.16,1,.3,1)}
.comp-fill.clr-green{background:var(--lime)}
.comp-fill.clr-orange{background:var(--orange)}
.comp-fill.clr-yellow{background:var(--yellow)}
.comp-fill.clr-coral{background:var(--coral)}

/* ── CTA BLOCK ── */
.cta-block{position:relative;padding:clamp(100px,18vh,200px) clamp(24px,8vw,120px);text-align:center;overflow:hidden;background:var(--black)}
.cta-block-bg{position:absolute;inset:0}
.cta-block-bg img{width:100%;height:100%;object-fit:cover}
.cta-block-bg-overlay{position:absolute;inset:0;background:rgba(29,29,27,.82)}
.cta-block-content{position:relative;z-index:2;max-width:700px;margin:0 auto}
.cta-block .section-label{color:var(--orange)}
.cta-block h2{color:var(--white);font-size:clamp(40px,6.5vw,80px);font-weight:900;line-height:1.05;margin-bottom:24px}
.cta-block p{color:rgba(250,250,247,.65);font-size:clamp(15px,1.5vw,18px);line-height:1.75;margin-bottom:40px;max-width:500px;margin-left:auto;margin-right:auto}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
.footer{background:var(--black);border-top:1px solid rgba(250,250,247,.06);padding:64px clamp(24px,8vw,120px) 40px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand img{height:44px;margin-bottom:20px}
.footer-brand p{color:rgba(250,250,247,.4);font-size:14px;line-height:1.7;max-width:280px}
.footer-col h5{color:var(--white);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.footer-col a{display:block;color:rgba(250,250,247,.4);font-size:14px;margin-bottom:10px;transition:color .3s}
.footer-col a:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid rgba(250,250,247,.06);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{color:rgba(250,250,247,.2);font-size:12px;letter-spacing:.03em}

/* ── BULLETED LIST ── */
.bullets{list-style:none;padding:0;margin:24px 0}
.bullets li{position:relative;padding-left:32px;margin-bottom:14px;font-size:16px;line-height:1.65}
.bullets li::before{content:'';position:absolute;left:0;top:10px;width:18px;height:2px;background:var(--orange)}
.bg-orange .bullets li::before,.bg-beige .bullets li::before{background:var(--green-deep)}
.bg-black .bullets li,.bg-green .bullets li,.bg-coral .bullets li{color:rgba(250,250,247,.75)}

/* ── PROCESS STEPS ── */
.process-grid-h{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.process-step{position:relative;padding:32px 0}
.process-step::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--lime);opacity:.3}
.process-num{font-size:48px;font-weight:900;color:var(--lime);opacity:.3;line-height:1;margin-bottom:16px}
.process-step h4{color:var(--white);font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:.03em}
.process-step p{color:rgba(250,250,247,.5);font-size:13px;line-height:1.65}

/* ── STICKER FLOATS ── */
.sticker-float{position:absolute;z-index:2;transition:transform .4s ease;filter:drop-shadow(0 4px 16px rgba(0,0,0,.3))}
.sticker-float:hover{transform:rotate(-8deg) scale(1.1)!important}

/* ── TABLES ── */
.spec-table{width:100%;border-collapse:collapse;margin-top:32px}
.spec-table th,.spec-table td{padding:18px 20px;text-align:left;border-bottom:1px solid rgba(29,29,27,.1);font-size:15px}
.spec-table th{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:rgba(29,29,27,.55)}
.spec-table td:first-child{font-weight:700;color:var(--green-deep)}
.spec-table td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.bg-black .spec-table th,.bg-green .spec-table th{color:rgba(250,250,247,.5)}
.bg-black .spec-table td,.bg-green .spec-table td{border-bottom-color:rgba(250,250,247,.08);color:var(--white)}
.bg-black .spec-table td:first-child,.bg-green .spec-table td:first-child{color:var(--orange)}

/* ── QUOTE ── */
.pull-quote{font-size:clamp(28px,3.6vw,44px);line-height:1.2;font-weight:900;letter-spacing:-.01em;margin:48px 0;padding-left:24px;border-left:4px solid var(--orange);font-style:italic}
.pull-quote cite{display:block;font-size:14px;font-weight:600;font-style:normal;text-transform:uppercase;letter-spacing:.15em;margin-top:18px;opacity:.6;color:var(--orange)}

/* ── FORM ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.form-group label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(29,29,27,.7)}
.bg-black .form-group label,.bg-green .form-group label{color:rgba(250,250,247,.65)}
.form-group input,.form-group textarea,.form-group select{font-family:var(--font-body);font-size:15px;padding:14px 16px;border:1.5px solid rgba(29,29,27,.15);background:transparent;color:var(--black);transition:border-color .3s,background .3s}
.bg-black .form-group input,.bg-black .form-group textarea,.bg-black .form-group select,.bg-green .form-group input,.bg-green .form-group textarea,.bg-green .form-group select{border-color:rgba(250,250,247,.15);color:var(--white)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:0;border-color:var(--orange);background:rgba(237,179,63,.04)}
.form-group textarea{resize:vertical;min-height:120px}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .split,.split.flip{grid-template-columns:1fr;gap:48px;direction:ltr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .cards-3,.cards-4{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .process-grid-h{grid-template-columns:repeat(2,1fr)}
  .split-img img{max-height:400px}
}
@media(max-width:780px){
  .nav{padding:16px 20px}
  .nav.scrolled{padding:12px 20px}
  .nav-links a:not(.nav-cta){display:none}
  .nav-toggle{display:block}
  .nav-links.open{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--black);flex-direction:column;justify-content:center;padding:80px 32px;gap:24px;z-index:999}
  .nav-links.open a{display:block!important;font-size:20px;opacity:.85}
  .stats-grid,.cards-3,.cards-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .process-grid-h{grid-template-columns:1fr}
  .cta-buttons{flex-direction:column;align-items:center}
  .footer-bottom{flex-direction:column;text-align:center}
  .photo-break{height:50vh}
  .page-hero{min-height:60vh;padding:120px 24px 64px}
}

/* ──────────────────────────────────────────
   V2 — Editorial Premium System
   ────────────────────────────────────────── */

/* ── V2 surfaces ── */
.v2 body, body.v2 { background: var(--cream); color: var(--ink); }
.v2-cream { background: var(--cream); color: var(--ink); }
.v2-paper { background: var(--paper); color: var(--ink); }
.v2-soft  { background: var(--cream-soft); color: var(--ink); }
.v2-ink   { background: var(--ink); color: var(--paper); }
.v2-green { background: var(--green-deep); color: var(--paper); }

/* ── V2 nav (light editorial) ── */
.nav-v2 { position: fixed; top:0; left:0; right:0; z-index:1000; padding: 22px 48px; display:flex; align-items:center; justify-content:space-between; transition: background .35s ease, padding .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; }
.nav-v2.scrolled { background: rgba(245,239,226,.92); backdrop-filter: blur(14px); padding: 14px 48px; border-bottom-color: var(--line); }
.nav-v2 .nav-logo img { height: 38px; width:auto; transition: height .3s; }
.nav-v2.scrolled .nav-logo img { height: 32px; }
.nav-v2 .nav-links { display:flex; gap: 32px; align-items:center; }
.nav-v2 .nav-links a { color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: .02em; opacity: .72; transition: opacity .3s; position: relative; }
.nav-v2 .nav-links a:hover, .nav-v2 .nav-links a.active { opacity: 1; }
.nav-v2 .nav-links a.active::after { content:''; position:absolute; bottom:-6px; left:0; right:0; height:2px; background: var(--coral); }
.nav-v2 .nav-cta { background: var(--ink) !important; color: var(--paper) !important; padding: 12px 22px; font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; opacity: 1 !important; transition: background .25s ease, transform .25s ease; }
.nav-v2 .nav-cta:hover { background: var(--green-deep) !important; transform: translateY(-1px); }
.nav-v2 .nav-cta::after { display:none !important; }

/* ── V2 typography ── */
.eyebrow-v2 { display:inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--coral); margin-bottom: 22px; }
.eyebrow-v2.muted { color: rgba(24,24,22,.55); }
.eyebrow-v2.on-dark { color: var(--orange); }

.display-v2 { font-weight: 900; letter-spacing: -.025em; line-height: .95; font-size: clamp(48px, 8vw, 112px); }
.display-v2 em { font-style: normal; color: var(--coral); }
.display-v2 .accent { color: var(--coral); }
.display-v2 .light { font-weight: 300; }

.h-section-v2 { font-weight: 900; letter-spacing: -.018em; line-height: 1.02; font-size: clamp(34px, 4.8vw, 64px); margin-bottom: 24px; }
.h-section-v2 em { font-style: normal; color: var(--coral); }

.lead-v2 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; font-weight: 300; color: rgba(24,24,22,.78); max-width: 640px; }
.body-v2 { font-size: 16.5px; line-height: 1.75; font-weight: 400; color: rgba(24,24,22,.78); margin-bottom: 18px; }
.body-v2 strong { font-weight: 700; color: var(--ink); }

/* ── V2 layout ── */
.section-v2 { padding: clamp(96px, 14vh, 180px) clamp(28px, 8vw, 120px); position: relative; }
.section-v2-tight { padding: clamp(56px, 9vh, 96px) clamp(28px, 8vw, 120px); }
.wrap-v2 { max-width: 1240px; margin: 0 auto; }
.wrap-narrow-v2 { max-width: 880px; margin: 0 auto; }

/* ── V2 SVG icon system ── */
.icon-v2 { width: 28px; height: 28px; stroke: var(--green-deep); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; display:inline-block; }
.icon-v2.lg { width: 36px; height: 36px; }
.icon-v2.coral { stroke: var(--coral); }
.icon-v2.paper { stroke: var(--paper); }
.icon-v2.ink   { stroke: var(--ink); }

/* ── V2 buttons ── */
.btn-v2 { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 16px 28px; transition: all .3s ease; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; border: none; }
.btn-v2-primary { background: var(--ink); color: var(--paper); }
.btn-v2-primary:hover { background: var(--green-deep); transform: translateY(-1px); }
.btn-v2-coral { background: var(--coral); color: var(--paper); }
.btn-v2-coral:hover { background: #b8442f; transform: translateY(-1px); }
.btn-v2-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-v2-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-v2-ghost-light { background: transparent; color: var(--paper); border: 1.5px solid rgba(250,250,243,.4); }
.btn-v2-ghost-light:hover { border-color: var(--paper); background: rgba(250,250,243,.06); }
.btn-v2-arrow::after { content: '→'; font-size: 16px; line-height: 1; transition: transform .3s ease; }
.btn-v2:hover .btn-v2-arrow::after, .btn-v2-arrow:hover::after { transform: translateX(4px); }

/* ── V2 three-doors module (home) ── */
.doors-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-strong); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.door-v2 { background: var(--cream); padding: 56px 40px; display: flex; flex-direction: column; gap: 18px; transition: background .3s ease; cursor: pointer; text-decoration: none; color: inherit; min-height: 280px; }
.door-v2:hover { background: var(--paper); }
.door-v2 .door-num { font-size: 13px; font-weight: 600; letter-spacing: .2em; color: rgba(24,24,22,.45); text-transform: uppercase; }
.door-v2 .door-title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 900; line-height: 1.05; letter-spacing: -.015em; color: var(--ink); }
.door-v2 .door-desc { font-size: 15px; line-height: 1.6; color: rgba(24,24,22,.65); font-weight: 300; flex-grow: 1; }
.door-v2 .door-arrow { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); display: inline-flex; align-items: center; gap: 8px; }
.door-v2 .door-arrow::after { content: '→'; transition: transform .3s ease; }
.door-v2:hover .door-arrow::after { transform: translateX(6px); }

/* ── V2 comparison — verdict-driven (not a data dump) ── */
.cmp-v2 { max-width: 1240px; margin: 0 auto; }
.cmp-v2-head { display: grid; grid-template-columns: 260px repeat(5, 1fr); gap: 8px; align-items: end; padding: 0 0 24px; border-bottom: 1px solid var(--line-strong); margin-bottom: 0; }
.cmp-v2-head-cell { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(24,24,22,.55); padding: 0 12px; }
.cmp-v2-head-cell.is-toi { color: var(--coral); position: relative; }
.cmp-v2-head-cell.is-toi::after { content: 'OUR OIL'; position: absolute; top: -20px; left: 12px; font-size: 9.5px; letter-spacing: .25em; color: var(--coral); }
.cmp-v2-row { display: grid; grid-template-columns: 260px repeat(5, 1fr); gap: 8px; align-items: stretch; padding: 24px 0 8px; }
.cmp-v2-row:last-child { border-bottom: 0; }

/* Row label: small direction badge + title + sub */
.cmp-v2-label { padding: 0 12px; display: flex; flex-direction: column; justify-content: center; }
.cmp-v2-label .lbl-dir {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; margin-bottom: 8px;
  width: max-content;
}
.cmp-v2-label .lbl-dir.up   { background: rgba(132,173,67,.18); color: var(--green-deep); }
.cmp-v2-label .lbl-dir.down { background: rgba(214,81,56,.14);  color: var(--coral); }
.cmp-v2-label .lbl-dir.info { background: rgba(24,24,22,.07);   color: rgba(24,24,22,.65); }
.cmp-v2-label .lbl-dir .arr { font-size: 13px; line-height: 1; margin-right: 2px; }
.cmp-v2-label .lbl-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 4px; line-height: 1.2; letter-spacing: -.005em; }
.cmp-v2-label .lbl-sub { font-size: 12px; color: rgba(24,24,22,.55); font-weight: 400; line-height: 1.4; }

/* Cell */
.cmp-v2-cell { padding: 12px; position: relative; border-radius: 4px; }
.cmp-v2-cell.is-toi { background: rgba(214,81,56,.07); }.cmp-v2-cell .val { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; font-weight: 400; font-size: clamp(34px, 3.4vw, 52px); line-height: .95; color: var(--ink); letter-spacing: -.01em; }
.cmp-v2-cell .val .pct { font-size: .55em; vertical-align: 4px; opacity: .75; margin-left: 1px; }
.cmp-v2-cell.is-toi .val { color: var(--coral); }
.cmp-v2-cell .unit { font-size: 11px; font-weight: 700; color: rgba(24,24,22,.5); margin-top: 6px; letter-spacing: .08em; text-transform: uppercase; }
.cmp-v2-cell.is-toi .unit { color: var(--coral); opacity: .85; }

/* Winner pill: tiny badge floating top-right on the cell that wins the row */
.cmp-v2-cell .winner-pill {
  position: absolute; top: 6px; right: 6px;
  font-family: 'Roboto', sans-serif; font-size: 9px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 2px;
  background: var(--green-deep); color: var(--paper);
}
.cmp-v2-cell.is-toi .winner-pill { background: var(--coral); }

/* Bars: color reflects rank against the row's direction
   .rank-good (winner) → green / coral if TOI
   .rank-mid           → muted ink
   .rank-bad (loser)   → faint red */
.cmp-v2-bar-wrap { height: 7px; background: rgba(24,24,22,.07); margin-top: 14px; overflow: hidden; border-radius: 4px; }
.cmp-v2-bar { height: 100%; background: rgba(24,24,22,.32); width: 0; transition: width 1.4s cubic-bezier(.2,.85,.3,1); border-radius: 4px; }
.cmp-v2-cell.rank-good .cmp-v2-bar  { background: var(--lime); }
.cmp-v2-cell.rank-mid .cmp-v2-bar   { background: rgba(24,24,22,.32); }
.cmp-v2-cell.rank-bad .cmp-v2-bar   { background: rgba(214,81,56,.55); }
.cmp-v2-cell.is-toi .cmp-v2-bar     { background: var(--coral); }  /* TOI always coral, beats rank class */

/* Verdict line — spans full row width below the data; tells the procurement story */
.cmp-v2-verdict {
  grid-column: 1 / -1;
  padding: 14px 12px 24px 12px;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: 14.5px; line-height: 1.5;
  color: rgba(24,24,22,.72);
  border-bottom: 1px solid var(--line);
}
.cmp-v2-verdict strong { font-style: normal; font-weight: 700; color: var(--green-deep); }
.cmp-v2-verdict .vs { font-style: normal; font-weight: 700; color: var(--coral); }
.cmp-v2-row:last-of-type + .cmp-v2-verdict { border-bottom: 0; }

.cmp-v2-foot { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: rgba(24,24,22,.55); line-height: 1.6; }
.cmp-v2-foot sup { color: var(--coral); font-weight: 700; }

@media(max-width:1024px){
  .cmp-v2-head, .cmp-v2-row { grid-template-columns: 180px repeat(5, 1fr); gap: 4px; }
  .cmp-v2-label .lbl-title { font-size: 14px; }
  .cmp-v2-cell .val { font-size: 22px; }
  .cmp-v2-verdict { font-size: 13.5px; }
}
@media(max-width:780px){
  .doors-v2 { grid-template-columns: 1fr; }
  .cmp-v2-head, .cmp-v2-row { grid-template-columns: 1fr; gap: 0; padding: 16px 0; }
  .cmp-v2-head { display: none; }
  .cmp-v2-row { padding: 24px 0; border-bottom: 1px solid var(--line-strong); }
  .cmp-v2-cell { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; }
  .cmp-v2-cell::before { content: attr(data-oil); font-size: 11px; font-weight: 700; color: rgba(24,24,22,.5); letter-spacing: .1em; text-transform: uppercase; }
  .cmp-v2-bar-wrap { display: none; }
}

/* ── FOCUSED PUFA COMPARISON ── (homepage: one metric, one story)
   Trim pass: header H2 was 56-124px → 36-72px (pro H2 cap).
   Sub was 17px → 16-19px clamp; bottom margin 64 → 44. Chart bars untouched. */
.cmp-focus-header { max-width: 840px; margin: 0 auto 44px; text-align: center; }
.cmp-focus-header .cmp-focus-h2 {
  font-family:'InsurgentNumbers','Insurgency','Bagel Fat One',sans-serif;
  font-size: clamp(36px, 4.5vw, 72px); line-height: .92; letter-spacing: -.005em;
  text-transform: uppercase; color: var(--green-deep); margin: 18px 0 22px;
}
.cmp-focus-header .cmp-focus-h2 em { font-style: normal; color: var(--coral); }
.cmp-focus-header .cmp-focus-sub {
  font-family: 'Roboto', sans-serif; font-size: clamp(16px,1.2vw,19px); line-height: 1.6;
  color: rgba(24,24,22,.75); max-width: 660px; margin: 0 auto; font-weight: 400;
}
.cmp-focus-header .cmp-focus-sub strong { color: var(--green-deep); font-weight: 700; }

.cmp-focus-chart {
  max-width: 980px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
  padding: 18px 24px; background: var(--paper); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(24,24,22,.05);
}
.cmp-focus-row {
  display: grid; grid-template-columns: 220px 1fr 96px; gap: 28px;
  align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line);
}
.cmp-focus-row:last-of-type { border-bottom: 0; }
.cmp-focus-row.is-toi {
  position: relative;
  background: rgba(214,81,56,.06);
  margin: 0 -16px; padding: 22px 16px; border-radius: 4px;
  border-bottom: 0;
}
.cmp-focus-row.is-toi + .cmp-focus-row { border-top: 1px solid var(--line); }

.cmp-focus-label {
  font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(24,24,22,.7);
  text-align: right;
}
.cmp-focus-row.is-toi .cmp-focus-label {
  color: var(--ink); font-weight: 800; font-size: 15px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.cmp-focus-label .toi-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .25em;
  color: var(--coral); padding: 2px 7px; background: rgba(214,81,56,.12);
  border-radius: 2px; line-height: 1.2;
}

.cmp-focus-track {
  height: 18px; background: rgba(24,24,22,.06); border-radius: 2px; overflow: hidden;
  position: relative;
}
.cmp-focus-bar {
  height: 100%; background: rgba(24,24,22,.32); border-radius: 2px;
  transition: width 1.6s cubic-bezier(.2,.85,.3,1);
}
.cmp-focus-row.is-toi .cmp-focus-bar { background: var(--coral); }
/* Reference line removed — it pointed at the wrong scale and looked like a stray tick.
   The bars themselves carry the comparison; no extra ornament needed. */

.cmp-focus-val {
  font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums;
  font-size: 34px; font-weight: 800; color: var(--ink); text-align: left;
  letter-spacing: -.02em; line-height: 1;
}
.cmp-focus-val .pct { font-size: 18px; font-weight: 500; opacity: .5; margin-left: 1px; }
/* TOI's number stays INK (not red) — red numbers read as "alarm/error".
   The coral signals come from the row tint, the label tag, and the bar. */
.cmp-focus-row.is-toi .cmp-focus-val { color: var(--ink); }

/* NYT-style axis/source caption: sentence case, italic serif, restrained weight. */
.cmp-focus-axis {
  grid-column: 1 / -1;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: 'Fraunces', 'Roboto', serif; font-style: italic; font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: rgba(24,24,22,.55); text-align: left;
}
.cmp-focus-axis sup { color: var(--coral); font-style: normal; font-weight: 700; font-size: 10px; vertical-align: super; }

/* Trial result band — anchors the chart with cited cycle outcome */
.cmp-focus-trial {
  max-width: 980px; margin: 36px auto 0;
  display: grid; grid-template-columns: 220px 1fr auto; gap: 32px;
  align-items: center; padding: 28px 32px;
  background: var(--green-deep); color: var(--paper);
  border-radius: 6px;
}.cmp-focus-trial .trial-num {
  font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-size: clamp(64px, 7.5vw, 104px); line-height: .9;
  color: var(--orange); letter-spacing: -.02em;
  white-space: nowrap;
}
.cmp-focus-trial .trial-num-fig { display: inline; }
.cmp-focus-trial .trial-num-plus { font-size: .5em; color: var(--orange); vertical-align: 0.42em; margin-left: 2px; font-weight: 400; }
.cmp-focus-trial .trial-kicker {
  font-family: 'Roboto', sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px;
}
.cmp-focus-trial .trial-claim {
  font-family: 'Roboto', sans-serif; font-size: 15.5px; line-height: 1.55;
  color: var(--paper); font-weight: 400; max-width: 540px;
}
.cmp-focus-trial .trial-claim strong { color: var(--cream); font-weight: 700; }
.cmp-focus-trial .trial-claim sup { color: var(--orange); font-weight: 700; }
.cmp-focus-trial .trial-link {
  font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; padding: 12px 18px;
  border: 1.5px solid rgba(245,239,226,.4); border-radius: 2px;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.cmp-focus-trial .trial-link:hover {
  background: var(--orange); color: var(--ink); border-color: var(--orange);
}

/* Verdict / CTA / footnote — trimmed: verdict 32→24 cap, top gaps 40/48/28 → 32/36/22. */
.cmp-focus-verdict {
  max-width: 780px; margin: 32px auto 0; text-align: center;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(18px, 1.9vw, 24px); line-height: 1.45; color: var(--green-deep);
}
.cmp-focus-verdict strong { font-style: normal; font-weight: 800; color: var(--green-deep); }
.cmp-focus-verdict em { font-style: italic; color: rgba(24,24,22,.6); font-size: .7em; display: block; margin-top: 10px; font-weight: 400; }

.cmp-focus-cta { text-align: center; margin-top: 36px; }
.cmp-focus-foot {
  margin: 22px auto 0; font-family: 'Roboto', sans-serif;
  font-size: 12px; color: rgba(24,24,22,.6); font-weight: 400;
  line-height: 1.6; max-width: 720px;
}
.cmp-focus-foot strong { color: var(--ink); font-weight: 700; }
.cmp-focus-foot em { font-style: italic; }

@media (max-width: 768px) {
  .cmp-focus-chart { padding: 14px 16px; }
  .cmp-focus-row { grid-template-columns: 100px 1fr 64px; gap: 14px; padding: 14px 0; }
  .cmp-focus-row.is-toi { margin: 0 -8px; padding: 18px 8px; }
  .cmp-focus-label { font-size: 11px; letter-spacing: .08em; }
  .cmp-focus-row.is-toi .cmp-focus-label { font-size: 12px; }
  .cmp-focus-val { font-size: 22px; }
  .cmp-focus-val .pct { font-size: 12px; }
  .cmp-focus-axis { font-size: 10px; }
  .cmp-focus-trial { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; text-align: center; }
  .cmp-focus-trial .trial-num { justify-content: center; font-size: 84px; }
  .cmp-focus-trial .trial-link { width: max-content; margin: 0 auto; }
}

/* ── V2 stat-figure (large number callouts) ── */
.fig-v2 { text-align: left; }
.fig-v2 .fig-num { font-size: clamp(64px, 9vw, 132px); font-weight: 900; line-height: .9; letter-spacing: -.03em; color: var(--coral); }
.fig-v2 .fig-num .small { font-size: .35em; vertical-align: super; color: var(--ink); font-weight: 700; letter-spacing: 0; opacity: .65; }
.fig-v2 .fig-label { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin-top: 14px; }
.fig-v2 .fig-desc { font-size: 14.5px; color: rgba(24,24,22,.65); margin-top: 10px; line-height: 1.55; max-width: 280px; font-weight: 300; }
.fig-v2.on-dark .fig-num { color: var(--orange); }
.fig-v2.on-dark .fig-num .small { color: var(--paper); }
.fig-v2.on-dark .fig-label { color: var(--paper); }
.fig-v2.on-dark .fig-desc { color: rgba(250,250,243,.7); }

/* ── V2 provenance module ── */
.prov-v2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; max-width: 1240px; margin: 0 auto; }
.prov-v2.flip { direction: rtl; }
.prov-v2.flip > * { direction: ltr; }
.prov-v2-img { position: relative; }
.prov-v2-img img { width:100%; height: clamp(380px, 56vh, 600px); object-fit: cover; }
.prov-v2-img .img-cap { position: absolute; bottom: 16px; left: 16px; background: var(--cream); color: var(--ink); padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.prov-v2-text .prov-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--coral); margin-bottom: 18px; }
.prov-v2-text h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing:0; margin-bottom: 22px; color: var(--ink); }
.prov-v2-text h2 em { font-style: normal; color: var(--coral); }
.prov-v2-text p { font-size: 16.5px; line-height: 1.75; color: rgba(24,24,22,.72); margin-bottom: 18px; font-weight: 400; }
.prov-v2-text .prov-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.prov-v2-text .prov-meta-item .label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(24,24,22,.5); margin-bottom: 6px; }
.prov-v2-text .prov-meta-item .value { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.2; }

@media(max-width:1024px){
  .prov-v2, .prov-v2.flip { grid-template-columns: 1fr; gap: 40px; direction: ltr; }
}

/* ── V2 certifications strip ── */
.certs-v2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; padding: 56px clamp(28px,8vw,120px); background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cert-v2 { display: flex; align-items: center; gap: 12px; }
.cert-v2 .icon-v2 { stroke: var(--green-deep); }
.cert-v2 .cert-label { font-size: 12.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); }

/* ── V2 footer notes ── */
.footnote-v2 { font-size: 12.5px; line-height: 1.65; color: rgba(24,24,22,.5); max-width: 880px; margin: 0 auto; }
.footnote-v2 sup { color: var(--coral); font-weight: 700; }
.footnote-v2 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; color: rgba(24,24,22,.7); }
.footnote-v2 a:hover { color: var(--coral); }

/* ──────────────────────────────────────────
   V2.5 — Brand Vibrant System
   The Insurgency Type + orange/green dominant
   ────────────────────────────────────────── */

/* ── Display type using Insurgency ── */
.font-insurgency { font-family: 'Insurgency', 'Roboto', sans-serif; font-weight: 400; }
.font-numbers { font-family:'InsurgentNumbers','Insurgency','Bagel Fat One',sans-serif; font-weight: 400; letter-spacing: 0; }

/* ── TOI brand numerals (rendered as inline SVG from spec-sheet glyphs) ── */
.tn { display: inline-block; height: 1em; line-height: 1; vertical-align: -.08em; }
.tn svg { height: 1em; width: .79em; display: block; }
.tn svg path { fill: currentColor; }
/* Narrow chars get tighter width */
.tn.tn-period svg, .tn.tn-comma svg, .tn.tn-colon svg, .tn.tn-semicolon svg, .tn.tn-tilde svg, .tn.tn-approx svg { width: .42em; }
/* When inside a heading/stat at huge sizes, allow svg to grow with font-size */
[data-num] { font-feature-settings: normal; }

/* ── V2.5 hero typography ── */
.hero-display { font-family: 'Insurgency', 'Roboto', sans-serif; font-weight: 400; font-size: clamp(80px, 13vw, 220px); line-height: .82; letter-spacing:0; text-transform: uppercase; }
.hero-display .ink { color: var(--green-deep); }
.hero-display .accent { color: var(--coral); }
.hero-display .orange { color: var(--orange); }
.hero-display .stroke { -webkit-text-stroke: 2px var(--green-deep); color: transparent; }

.section-display { font-family: 'Insurgency', 'Roboto', sans-serif; font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.section-display em { font-style: normal; color: var(--coral); }
.section-display .orange { color: var(--orange); }
.section-display .green { color: var(--green-deep); }

.editorial-display { font-family: 'Insurgency', 'Roboto', sans-serif; font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: .95; letter-spacing: -.005em; text-transform: uppercase; }

/* Subtitle / running text uses Roboto */
.kicker { font-family: 'Roboto', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }

/* ── V2.5 brand-vibrant surfaces — orange/green dominant ── */
.bg-v25-orange { background: var(--orange); color: var(--ink); }
.bg-v25-green { background: var(--green-deep); color: var(--paper); }
.bg-v25-coral { background: var(--coral); color: var(--paper); }
.bg-v25-beige { background: var(--beige); color: var(--ink); }
.bg-v25-lime { background: var(--lime); color: var(--ink); }
.bg-v25-yellow { background: var(--yellow); color: var(--ink); }
.bg-v25-cream { background: var(--cream); color: var(--ink); }
.bg-v25-ink { background: var(--ink); color: var(--paper); }

/* ── V2.5 hero — brand orange dominant ── */
/* Hero sized to fit a single viewport with ~8vh of the next section showing —
   pro pattern: full headline + visual visible without scroll, plus a tease of
   what's below to invite scroll. Was: min-height 100vh + 220px of padding +
   124px headline + 70vh image → section ran ~115vh, headline got cut off.
   Now: height capped at min(92vh, 880px), type/image tightened proportionally. */
.hero-v25 { position: relative; min-height: min(92vh, 880px); background: var(--orange); color: var(--ink); padding: 108px clamp(28px,8vw,120px) 56px; display: flex; align-items: center; overflow: hidden; }
.hero-v25-grid { width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; position: relative; z-index: 2; }
.hero-v25-copy .hero-kicker { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 14px; }
.hero-v25-copy .hero-kicker::before { content: ''; width: 28px; height: 1.5px; background: var(--green-deep); }
/* Headline: was clamp(56,7.5vw,124) — caps at 124px on a 1920 monitor was
   eating ~390px of vertical space across 3 lines. Now clamps at 88px which
   matches the Stripe/Notion/Linear desktop scale and saves ~110px vertically. */
.hero-v25-copy h1 { font-family: 'Insurgency', 'Roboto', sans-serif; font-weight: 400; font-size: clamp(48px, 5.6vw, 88px); line-height: .92; letter-spacing: -.005em; color: var(--green-deep); text-transform: uppercase; margin-bottom: 22px; }
.hero-v25-copy h1 .coral { color: var(--coral); }
.hero-v25-copy h1 .ink { color: var(--ink); }
.hero-v25-copy h1 .line { display: block; }
.hero-v25-copy .lead-roboto { font-family: 'Roboto', sans-serif; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; font-weight: 400; color: rgba(24,24,22,.82); max-width: 500px; margin-bottom: 26px; }
.hero-v25-copy .lead-roboto strong { font-weight: 700; color: var(--green-deep); }
.hero-v25-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-v25-visual { position: relative; }
/* Visual image: was clamp(480,70vh,720) — at 70vh on a 900px monitor that's
   630px which by itself blew past anything else. Now caps at 56vh / 560px so
   the visual is tall and serious without dominating the viewport. */
.hero-v25-visual img { width: 100%; height: clamp(380px, 56vh, 560px); object-fit: cover; }
.hero-v25-visual .v-cap { position: absolute; bottom: 0; left: 0; background: var(--green-deep); color: var(--paper); padding: 16px 22px; font-family: 'Roboto', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hero-v25-visual .v-cap .dot { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; display: inline-block; margin-right: 12px; vertical-align: 1px; }

/* Hero sticker — real brand asset */
.hero-v25-sticker { background: #fffdf3; padding: 12px; border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 1px 0 rgba(0,0,0,.08); position: absolute; top: 100px; right: 4vw; z-index: 3; width: clamp(140px, 16vw, 240px); transform: rotate(-8deg); filter: drop-shadow(0 12px 32px rgba(0,0,0,.18)); pointer-events: none; }

/* CTA stickers — squirrel + smiley + others */
.cta-sticker { background: #fffdf3; padding: 12px; border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 1px 0 rgba(0,0,0,.08); position: absolute; z-index: 1; filter: drop-shadow(0 8px 28px rgba(0,0,0,.18)); pointer-events: none; }
.cta-sticker-tl { top: 8%; left: 4%; width: clamp(110px, 12vw, 180px); transform: rotate(-12deg); }
.cta-sticker-tr { top: 12%; right: 5%; width: clamp(100px, 11vw, 160px); transform: rotate(14deg); }
.cta-sticker-bl { bottom: 10%; left: 6%; width: clamp(120px, 13vw, 200px); transform: rotate(8deg); }
.cta-sticker-br { bottom: 8%; right: 5%; width: clamp(110px, 12vw, 180px); transform: rotate(-10deg); }

/* Fruit cross-section watermark for figures section */
.figures-v25 { position: relative; overflow: hidden; }
.fig-bg-cross { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); width: clamp(380px, 38vw, 580px); opacity: .08; pointer-events: none; z-index: 0; }
.figures-v25 .fig { position: relative; z-index: 1; }

/* Manifesto secondary stamp (left side counter-balance) */
.manifesto-v25-stamp-2 { position: absolute; left: -30px; top: 60px; transform: rotate(-14deg); font-family:'InsurgentNumbers','Insurgency','Bagel Fat One',sans-serif; font-size: clamp(80px, 12vw, 180px); color: rgba(252,242,80,.18); letter-spacing: -.01em; line-height: .85; text-transform: uppercase; pointer-events: none; z-index: 1; }

/* Sticker-face photo break — uses the woman-with-stickers photo */
/* Sticker-break — height was 480-720, H3 to 76. Now 360-480, H3 cap 56 (matches chef-break). */
.sticker-break { position: relative; width: 100%; height: clamp(360px, 48vh, 480px); overflow: hidden; background: var(--coral); }
.sticker-break img.sb-photo { width: 100%; height: 100%; object-fit: cover; }
.sticker-break-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(214,81,56,.55) 0%, rgba(214,81,56,.15) 55%, transparent 100%); }
.sticker-break-text { position: absolute; right: clamp(28px,8vw,120px); top: 50%; transform: translateY(-50%); z-index: 2; max-width: 520px; text-align: right; }
.sticker-break-text .kicker { color: var(--yellow); margin-bottom: 18px; display: inline-block; }
.sticker-break-text h3 { font-family:'InsurgentNumbers','Insurgency','Bagel Fat One',sans-serif; color: var(--paper); font-size: clamp(28px,3.6vw,56px); line-height: .95; text-transform: uppercase; letter-spacing: -.005em; margin-bottom: 18px; }
.sticker-break-text h3 em { font-style: normal; color: var(--yellow); }
.sticker-break-text p { font-family: 'Roboto', sans-serif; color: rgba(250,250,243,.9); font-size: clamp(15px,1.1vw,17px); line-height: 1.6; font-weight: 300; }
@media(max-width:780px){
  .sticker-break-text { left: clamp(28px,8vw,60px); right: clamp(28px,8vw,60px); text-align: left; }
  .sticker-break-overlay { background: linear-gradient(180deg, rgba(214,81,56,.2) 0%, rgba(214,81,56,.75) 100%); }
}

/* V2.5 buttons */
.btn-v25 { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 18px 32px; transition: all .25s ease; display: inline-flex; align-items: center; gap: 14px; cursor: pointer; border: none; }
.btn-v25-green { background: var(--green-deep); color: var(--paper); }
.btn-v25-green:hover { background: var(--ink); transform: translateY(-2px); }
.btn-v25-coral { background: var(--coral); color: var(--paper); }
.btn-v25-coral:hover { background: var(--red); transform: translateY(-2px); }
.btn-v25-ghost-green { background: transparent; color: var(--green-deep); border: 2px solid var(--green-deep); }
.btn-v25-ghost-green:hover { background: var(--green-deep); color: var(--paper); }
.btn-v25-ghost-paper { background: transparent; color: var(--paper); border: 2px solid var(--paper); }
.btn-v25-ghost-paper:hover { background: var(--paper); color: var(--ink); }
.btn-v25 .arrow { font-size: 18px; font-weight: 900; line-height: 1; transition: transform .25s ease; }
.btn-v25:hover .arrow { transform: translateX(6px); }

/* ── V2.5 nav (variants for different page contexts) ── */
.nav-v25 { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 22px 48px; display: flex; align-items: center; justify-content: space-between; transition: background .35s ease, padding .35s ease; }
.nav-v25.on-orange { background: transparent; }
.nav-v25.on-orange.scrolled { background: var(--orange); }
.nav-v25.on-green { background: transparent; }
.nav-v25.on-green.scrolled { background: var(--green-deep); }
.nav-v25.on-cream { background: transparent; }
.nav-v25.on-cream.scrolled { background: var(--cream); border-bottom: 1px solid var(--line); }
.nav-v25.scrolled { padding: 14px 48px; }
.nav-v25 .nav-logo { display: inline-block; transition: padding .3s; }
.nav-v25 .nav-logo img { height: 44px; width: auto; transition: height .3s; display: block; }
.nav-v25.scrolled .nav-logo img { height: 38px; }
/* Pill treatment for dark backgrounds so colorful logo remains legible */
/* On dark navs, use the white-on-transparent logo variant — no pill needed.
   Pages with on-green/on-ink swap their <img src> to logo-white-hor.png. */
.nav-v25.on-green .nav-logo,
.nav-v25.on-ink .nav-logo { background: transparent; padding: 0; }
.nav-v25.on-green .nav-logo img,
.nav-v25.on-ink .nav-logo img { height: 40px; }
.nav-v25.on-green.scrolled .nav-logo img,
.nav-v25.on-ink.scrolled .nav-logo img { height: 34px; }
.nav-v25.on-green.scrolled .nav-logo img,
.nav-v25.on-ink.scrolled .nav-logo img { height: 28px; }
.nav-v25 .nav-links { display: flex; gap: 32px; align-items: center; }
.nav-v25 .nav-links a, .nav-v25 .nav-links .nav-dd-trigger { font-family: 'Roboto', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .82; transition: opacity .25s; position: relative; background: transparent; border: 0; cursor: pointer; padding: 0; line-height: 1; }
.nav-v25.on-orange .nav-links a, .nav-v25.on-orange .nav-links .nav-dd-trigger { color: var(--green-deep); }
.nav-v25.on-green .nav-links a, .nav-v25.on-green .nav-links .nav-dd-trigger { color: var(--paper); }
.nav-v25.on-cream .nav-links a, .nav-v25.on-cream .nav-links .nav-dd-trigger { color: var(--ink); }
.nav-v25 .nav-links a:hover, .nav-v25 .nav-links a.active,
.nav-v25 .nav-links .nav-dd-trigger:hover { opacity: 1; }
.nav-v25 .nav-links a.active::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 2.5px; background: var(--coral); }

/* ── CTA — high-contrast pill that pops on ANY background ── */
.nav-v25 .nav-cta {
  background: var(--coral) !important;
  color: var(--paper) !important;
  padding: 14px 28px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  font-size: 13.5px !important;
  line-height: 1 !important;
  text-transform: uppercase;
  border: 2px solid var(--paper);
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.06);
  opacity: 1 !important;
  display: inline-flex;
  align-items: center;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nav-v25 .nav-cta:hover {
  background: var(--ink) !important;
  border-color: var(--orange);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
}
.nav-v25 .nav-cta.active::after { display: none !important; }
/* Extra contrast on dark navs (green/ink): swap the border to a brighter ring. */
.nav-v25.on-green .nav-cta, .nav-v25.on-ink .nav-cta { border-color: var(--cream); }

/* ── DROPDOWN ── */
.nav-v25 .nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-v25 .nav-dd-trigger .chev {
  display: inline-block; width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px,-3px);
  margin-left: 6px; opacity: .7;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-v25 .nav-dd:hover .nav-dd-trigger .chev,
.nav-v25 .nav-dd.open .nav-dd-trigger .chev { opacity: 1; transform: rotate(-135deg) translate(-1px,-1px); }
.nav-v25 .nav-dd-panel {
  position: absolute; top: calc(100% + 18px); right: 0; min-width: 240px;
  background: var(--paper); color: var(--ink);
  padding: 10px 0; border-radius: 3px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 1200;
}
.nav-v25 .nav-dd:hover .nav-dd-panel,
.nav-v25 .nav-dd.open .nav-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-v25 .nav-dd-panel a {
  display: block !important; padding: 12px 22px; color: var(--ink) !important;
  font-family: 'Roboto', sans-serif; font-size: 12.5px !important; font-weight: 700 !important;
  letter-spacing: .1em; text-transform: uppercase; opacity: 1 !important;
  transition: background .15s, color .15s;
}
.nav-v25 .nav-dd-panel a:hover { background: var(--beige); color: var(--coral) !important; }
.nav-v25 .nav-dd-panel a small {
  display: block; font-size: 10.5px; letter-spacing: .03em; text-transform: none;
  color: rgba(24,24,22,.55); font-weight: 400; margin-top: 3px; line-height: 1.35;
}
.nav-v25 .nav-dd-panel a:hover small { color: rgba(24,24,22,.7); }

/* ── V2.5 stat figures (vibrant on brand color) ── */
/* Figures band — was 72px/48px padding. Trimmed to 56/40 for tighter band height.
   Big stat numbers preserved (chart-like data), kept at 144px cap. */
.figures-v25 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--green-deep); color: var(--paper); }
.figures-v25 .fig { padding: 56px 40px; border-right: 1px solid rgba(250,250,243,.12); }
.figures-v25 .fig:last-child { border-right: 0; }
/* Bloomberg/FT signature: thin numerals at large sizes carry weight without shouting.
   Was 168px display-font (read as cartoon/social-card); now Roboto 300 + tnum. */
.figures-v25 .fig-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; font-weight: 300; font-size: clamp(80px, 9.5vw, 144px); line-height: .9; letter-spacing: -.04em; color: var(--orange); }
.figures-v25 .fig-num .pct { font-size: .5em; vertical-align: 6px; margin-left: 4px; }
.figures-v25 .fig-num .small { font-size: .35em; vertical-align: super; color: var(--paper); opacity: .55; font-weight: 700; font-family: 'Roboto', sans-serif; }
.figures-v25 .fig-label { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-top: 28px; color: var(--paper); }
.figures-v25 .fig-desc { font-family: 'Roboto', sans-serif; font-size: 14.5px; line-height: 1.6; color: rgba(250,250,243,.72); margin-top: 14px; max-width: 300px; font-weight: 300; }

/* ── V2.5 comparison reskin: dark-on-cream with orange highlight ──
   Padding 80-140 → 80-120 per pro section rules. Header H2 wasn't used on homepage
   (cmp-focus-h2 is); kept the legacy rule with a tighter cap for any other page. */
.cmp-v25-section { padding: clamp(80px, 10vh, 120px) clamp(28px, 8vw, 120px); background: var(--beige); position: relative; }
.cmp-v25-header { max-width: 1240px; margin: 0 auto 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
.cmp-v25-header h2 { font-family:'InsurgentNumbers','Insurgency','Bagel Fat One',sans-serif; font-size: clamp(36px, 4.5vw, 72px); line-height: .92; letter-spacing: -.005em; text-transform: uppercase; color: var(--green-deep); }
.cmp-v25-header h2 em { font-style: normal; color: var(--coral); }
.cmp-v25-context { font-family: 'Roboto', sans-serif; font-size: clamp(15px,1.1vw,17px); line-height: 1.65; color: rgba(24,24,22,.72); font-weight: 400; max-width: 440px; }

/* ── V2.5 doors section with brand colors ──
   Padding 80-140 → 80-120; H2 76 → 56 cap (H2 sub-eyebrow scale); card padding 56/40 → 40/32. */
.doors-v25-section { padding: clamp(80px,10vh,120px) clamp(28px,8vw,120px); background: var(--green-deep); color: var(--paper); }
.doors-v25-header { max-width: 1240px; margin: 0 auto 44px; }
.doors-v25-header h2 { font-family:'InsurgentNumbers','Insurgency','Bagel Fat One',sans-serif; font-size: clamp(32px, 4vw, 56px); line-height: .95; text-transform: uppercase; max-width: 820px; color: var(--paper); }
.doors-v25-header h2 em { font-style: normal; color: var(--orange); }
.doors-v25-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(250,250,243,.15); border-top: 1px solid rgba(250,250,243,.2); border-bottom: 1px solid rgba(250,250,243,.2); }
.door-v25 { background: var(--green-deep); padding: 40px 32px; display: flex; flex-direction: column; gap: 14px; transition: background .3s ease; cursor: pointer; text-decoration: none; color: inherit; min-height: 240px; }
.door-v25:hover { background: #244a1f; }
.door-v25 .door-num { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--orange); text-transform: uppercase; }
.door-v25 .door-title { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.15; letter-spacing: -.01em; color: var(--paper); }
.door-v25 .door-desc { font-family: 'Roboto', sans-serif; font-size: 14.5px; line-height: 1.6; color: rgba(250,250,243,.72); font-weight: 300; flex-grow: 1; }
.door-v25 .door-arrow { font-family: 'Roboto', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 10px; }
.door-v25 .door-arrow::after { content: '→'; font-size: 16px; transition: transform .3s ease; }
.door-v25:hover .door-arrow::after { transform: translateX(6px); }

/* ── V2.5 manifesto (coral background, large Insurgency type) ──
   Was 120-200px padding + 44-104px H2. Now 80-120 / 36-72 cap. Bottom margins
   on kicker/h2/p tightened from 28/40/24 → 18/24/18. Lead 17-22 → 16-19. */
.manifesto-v25 { padding: clamp(80px,11vh,120px) clamp(28px,8vw,120px); background: var(--coral); color: var(--paper); position: relative; overflow: hidden; }
.manifesto-v25-inner { max-width: 1040px; margin: 0 auto; position: relative; z-index: 2; }
.manifesto-v25 .m-kicker { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--yellow); margin-bottom: 18px; }
.manifesto-v25 h2 { font-family:'InsurgentNumbers','Insurgency','Bagel Fat One',sans-serif; font-size: clamp(36px, 4.5vw, 72px); line-height: .95; letter-spacing: -.005em; text-transform: uppercase; margin-bottom: 24px; }
.manifesto-v25 h2 em { font-style: normal; color: var(--yellow); }
.manifesto-v25 p { font-family: 'Roboto', sans-serif; font-size: clamp(16px,1.2vw,19px); line-height: 1.65; color: rgba(250,250,243,.85); font-weight: 300; margin-bottom: 18px; max-width: 720px; }
.manifesto-v25 p strong { font-weight: 700; color: var(--paper); }
/* Background stamp scaled down so it doesn't dominate the trimmed section. */
.manifesto-v25-stamp { position: absolute; right: -32px; bottom: 60px; transform: rotate(-12deg); font-family:'InsurgentNumbers','Insurgency','Bagel Fat One',sans-serif; font-size: clamp(96px, 14vw, 200px); color: rgba(252,242,80,.15); letter-spacing:0; line-height: .85; text-transform: uppercase; pointer-events: none; z-index: 1; }

/* ── V2.5 sourcing (beige w. orange callouts) ──
   Padding 100-160 → 80-120; H2 48-88 → 36-72; meta value 19 → 17. */
.sourcing-v25 { padding: clamp(80px,11vh,120px) clamp(28px,8vw,120px); background: var(--beige); }
.sourcing-v25 .prov-v2-text .prov-tag { color: var(--coral); }
.sourcing-v25 .prov-v2-text h2 { font-family:'InsurgentNumbers','Insurgency','Bagel Fat One',sans-serif; font-size: clamp(36px,4.5vw,72px); line-height: .92; letter-spacing: -.005em; text-transform: uppercase; color: var(--green-deep); }
.sourcing-v25 .prov-v2-text h2 em { font-style: normal; color: var(--coral); }
.sourcing-v25 .prov-v2-img .img-cap { background: var(--orange); color: var(--green-deep); border: 0; }
.sourcing-v25 .prov-meta-item .label { color: var(--coral); }
.sourcing-v25 .prov-meta-item .value { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 17px; letter-spacing: -.005em; color: var(--green-deep); }

/* ── V2.5 certifications strip (green background) — vertical padding 56 → 40. */
.certs-v25 { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; padding: 40px clamp(28px,8vw,120px); background: var(--green-deep); color: var(--paper); }
.certs-v25 .cert-v25 { display: flex; align-items: center; gap: 12px; }
.certs-v25 .cert-v25 .icon-v2 { stroke: var(--orange); width: 24px; height: 24px; }
.certs-v25 .cert-v25 .cert-label { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); }

/* ── V2.5 final CTA (yellow band w large Insurgency type) ──
   Was 120-180px padding + 52-112px H2 + 48px button gap. Now 80-120 / 36-72 / 32. */
.cta-v25 { padding: clamp(80px,11vh,120px) clamp(28px,8vw,120px); background: var(--yellow); color: var(--ink); text-align: center; position: relative; overflow: hidden; }
.cta-v25-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; }
.cta-v25 .kicker { color: var(--coral); margin-bottom: 18px; display: inline-block; }
.cta-v25 h2 { font-family:'InsurgentNumbers','Insurgency','Bagel Fat One',sans-serif; font-size: clamp(36px,4.5vw,72px); line-height: .95; letter-spacing: -.005em; text-transform: uppercase; margin-bottom: 22px; color: var(--green-deep); }
.cta-v25 h2 em { font-style: normal; color: var(--coral); }
.cta-v25 p { font-family: 'Roboto', sans-serif; font-size: clamp(16px,1.2vw,19px); line-height: 1.6; color: rgba(24,24,22,.75); font-weight: 400; margin: 0 auto 32px; max-width: 520px; }

/* ── V2.5 footer (ink black, vibrant accents) — top pad 80 → 64, between rows 56 → 44. */
.footer-v25 { background: var(--ink); color: var(--paper); padding: 64px clamp(28px,8vw,120px) 28px; }
.footer-v25 .footer-v2-inner { max-width: 1240px; margin: 0 auto; }
.footer-v25 .footer-v2-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
/* Footer logo: use the white-on-transparent variant — no pill needed on dark bg */
.footer-v25 .footer-v2-brand .footer-logo-pill { display: inline-block; margin-bottom: 22px; }
.footer-v25 .footer-v2-brand img { height: 44px; display: block; }
.footer-v25 .footer-v2-brand p { font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 1.65; color: rgba(250,250,243,.55); max-width: 300px; font-weight: 300; }
.footer-v25 .footer-v2-col h5 { font-family: 'Roboto', sans-serif; font-size: 11.5px; letter-spacing: .25em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; font-weight: 700; }
.footer-v25 .footer-v2-col a { display: block; font-family: 'Roboto', sans-serif; font-size: 14.5px; color: rgba(250,250,243,.6); margin-bottom: 12px; transition: color .25s; }
.footer-v25 .footer-v2-col a:hover { color: var(--orange); }
.footer-v25 .footer-v2-bottom { border-top: 1px solid rgba(250,250,243,.1); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-family: 'Roboto', sans-serif; font-size: 12px; color: rgba(250,250,243,.35); }

@media(max-width:1024px) {
  .hero-v25-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-v25-visual img { height: 400px; }
  .figures-v25 { grid-template-columns: 1fr; }
  .figures-v25 .fig { border-right: 0; border-bottom: 1px solid rgba(250,250,243,.12); }
  .cmp-v25-header { grid-template-columns: 1fr; gap: 24px; }
  .doors-v25-grid { grid-template-columns: 1fr; }
  .footer-v25 .footer-v2-top { grid-template-columns: 1fr 1fr; }
}
@media(max-width:640px) {
  .footer-v25 .footer-v2-top { grid-template-columns: 1fr; }
}

/* ── BRAND STICKERS — corner-fold peel (scroll-in, click-to-despegar) ──
   Based on the design handoff at design_handoff_stickers/README.md.
   Each .toi-sticker is absolutely-positioned. Its content (paper + flap) is
   built by sticker.js using clip-path polygons that animate t∈[0,1]:
     t=0 → flat glued    t=0.7 → max corner fold    t=1 → fully faded
*/
.toi-sticker {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: rotate(var(--rot, 0deg));
  will-change: transform, opacity;
  /* Stickers are the TOP layer — like real stickers stuck to a page.
     Must sit above all section content + can extend past section boundaries. */
  z-index: 200;
  --rot: 0deg;
  --shadow-strength: 1;
}
/* Sticker host: a positioning wrapper around sections that have overflow:hidden.
   Lets stickers extend past the section's clipped edges (e.g. bleed onto the next
   section like a real piece of paper stuck across a fold). */
.sticker-host { position: relative; overflow: visible; }
.toi-sticker.ready, .toi-sticker.stuck, .toi-sticker.peeling { opacity: 1; }
/* Paper card carrying the artwork. The <img> is IN FLOW so the card takes
   the artwork's natural aspect ratio at the sticker's authored width. */
.toi-sticker .paper {
  position: relative; display: block; padding: 10px;
  background: #fffdf3; border-radius: 4px;
  box-shadow:
    0 calc(8px * var(--shadow-strength)) calc(18px * var(--shadow-strength)) rgba(0,0,0,calc(0.22 * var(--shadow-strength))),
    0 1px 0 rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.5);
  will-change: clip-path;
}
.toi-sticker .paper .art {
  display: block; width: 100%; height: auto;
  pointer-events: none; user-select: none;
}
/* Flap = folded-over corner showing the cream paper underside. */
.toi-sticker .flap {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.18) 100%),
    #e9ddb5;
  border-radius: 4px; opacity: 0;
  will-change: clip-path, opacity;
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.20));
}
.toi-sticker.show-flap .flap { opacity: 1; }
/* Once glued, sticker invites the click. */
.toi-sticker.stuck { pointer-events: auto; cursor: pointer; animation: toiStickerWiggle 6s ease-in-out infinite; animation-delay: var(--wiggle-delay, 0s); }
@keyframes toiStickerWiggle {
  0%, 100% { transform: rotate(var(--rot)) scale(1); }
  50%      { transform: rotate(calc(var(--rot) + 0.5deg)) scale(1.006); }
}
.toi-sticker.stuck:hover {
  animation: none;
  transform: rotate(calc(var(--rot) - 1.2deg)) scale(1.035);
  transition: transform 220ms cubic-bezier(.34, 1.56, .42, 1);
  z-index: 30;
}
.toi-sticker.peeling { pointer-events: none; }

/* Size classes (authored width — paper height derives from artwork ratio) */
.toi-sticker.s-xs { width: 90px; }
.toi-sticker.s-sm { width: 130px; }
.toi-sticker.s-md { width: 180px; }
.toi-sticker.s-lg { width: 240px; }
.toi-sticker.s-xl { width: 300px; }

/* Reduced motion: stickers appear instantly, no wiggle, click-to-hide only */
@media (prefers-reduced-motion: reduce){
  .toi-sticker { opacity: 1 !important; transition: none !important; }
  .toi-sticker.stuck { animation: none !important; }
  .toi-sticker .paper { clip-path: none !important; }
  .toi-sticker .flap  { display: none !important; }
}

/* Hide stickers on tiny viewports — they'd clutter mobile */
@media (max-width: 640px) {
  .toi-sticker { display: none !important; }
}

/* Anchor for absolutely-positioned brand stickers placed as top-level children.
   Without this, `bottom: X` on an absolute element resolves against the VIEWPORT
   (only a few hundred px tall) instead of the full document — putting stickers
   in the wrong place. With body relative, `bottom: 520px` reliably means "520px
   above the bottom of the entire page content." */
body { position: relative; }
main { position: relative; }

/* Hide all sticker-family decorative elements on mobile to prevent overlap. */
@media (max-width: 640px){
  .cta-sticker, .cta-sticker-2, .cta-sticker-3,
  .hero-v25-sticker, .page-hero-v25-sticker,
  .llanos-stamp, .manifesto-v25-stamp, .manifesto-v25-stamp-2,
  .pullquote-stamp { background: #fffdf3; padding: 12px; border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 1px 0 rgba(0,0,0,.08); background: #fffdf3; padding: 12px; border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 1px 0 rgba(0,0,0,.08); background: #fffdf3; padding: 12px; border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 1px 0 rgba(0,0,0,.08); display: none !important; }
}

/* ──────────────────────────────────────────
   MOBILE PASS v25 — Phone-grade overrides
   All rules below are scoped to ≤780px / ≤480px.
   Desktop styles are untouched.
   ────────────────────────────────────────── */

/* === Hamburger toggle button for .nav-v25 === */
/* Hidden on desktop; only shown on tablets/phones. */
.nav-v25 .nav-toggle {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 10px; font-size: 26px; line-height: 1;
  font-family: 'Roboto', sans-serif; font-weight: 400;
  color: var(--ink);
  z-index: 1002;
}
.nav-v25.on-orange .nav-toggle { color: var(--green-deep); }
.nav-v25.on-green  .nav-toggle { color: var(--paper); }
.nav-v25.on-ink    .nav-toggle { color: var(--paper); }
.nav-v25.on-cream  .nav-toggle { color: var(--ink); }

@media (max-width: 900px){
  /* Reduce horizontal padding so logo + cta + hamburger all fit on phones. */
  .nav-v25 { padding: 14px 18px; gap: 8px; }
  .nav-v25.scrolled { padding: 12px 18px; }
  .nav-v25 .nav-logo img { height: 36px; }
  .nav-v25.scrolled .nav-logo img { height: 32px; }

  /* Show hamburger, hide the inline link row by default. */
  .nav-v25 .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* Default-collapse the link row. Keep CTA visible OUTSIDE the collapsed panel
     by moving it next to the hamburger via order. */
  .nav-v25 .nav-links {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--green-deep);
    flex-direction: column; justify-content: center; align-items: stretch;
    gap: 0; padding: 96px 28px 40px;
    z-index: 1001;
    transform: translateX(100%); transition: transform .28s ease;
    overflow-y: auto;
  }
  .nav-v25 .nav-links.open { transform: translateX(0); }

  /* Each link becomes a big tappable row. */
  .nav-v25 .nav-links > a:not(.nav-cta),
  .nav-v25 .nav-links .nav-dd-trigger {
    color: var(--paper) !important;
    font-size: 20px !important; font-weight: 700 !important; letter-spacing: .04em !important;
    text-transform: uppercase;
    padding: 18px 4px !important;
    border-bottom: 1px solid rgba(250,250,243,.12);
    opacity: 1 !important;
    text-align: left;
    line-height: 1.1;
    display: block;
    width: 100%;
  }
  .nav-v25 .nav-links > a.active { color: var(--orange) !important; }
  .nav-v25 .nav-links > a.active::after { display: none; }

  /* Dropdown becomes a flat group on mobile. */
  .nav-v25 .nav-dd { display: block; width: 100%; }
  .nav-v25 .nav-dd-trigger .chev { display: none; }
  .nav-v25 .nav-dd-panel {
    position: static !important;
    background: transparent !important; box-shadow: none !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    padding: 0 0 0 14px !important; margin: 0 !important;
    min-width: 0 !important; width: 100% !important;
    border: 0 !important;
  }
  .nav-v25 .nav-dd-panel a {
    color: rgba(250,250,243,.78) !important;
    background: transparent !important;
    font-size: 15px !important; font-weight: 600 !important;
    padding: 12px 4px !important;
    border-bottom: 1px solid rgba(250,250,243,.08);
    text-transform: uppercase; letter-spacing: .06em;
  }
  .nav-v25 .nav-dd-panel a small {
    color: rgba(250,250,243,.5) !important;
    font-size: 11px !important; margin-top: 4px;
  }
  .nav-v25 .nav-dd-panel a:hover { background: transparent !important; color: var(--orange) !important; }

  /* CTA inside the panel becomes a prominent button at the bottom of the menu. */
  .nav-v25 .nav-cta {
    margin-top: 28px;
    width: 100%;
    text-align: center;
    padding: 16px 24px !important;
    font-size: 13px !important; letter-spacing: .1em !important;
    background: var(--orange) !important;
    color: var(--ink) !important;
    border: 0 !important;
    border-bottom: 0 !important;
  }
  /* When the menu is open, color the hamburger light (panel is dark). */
  .nav-v25.menu-open .nav-toggle { color: var(--paper) !important; }

  /* Hide active-underline on mobile to keep menu clean. */
  .nav-v25 .nav-links a.active::after { display: none; }
}

/* === HERO v25 mobile === */
@media (max-width: 780px){
  .hero-v25 {
    min-height: auto;
    padding: 96px 22px 56px;
  }
  .hero-v25-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-v25-copy h1 {
    font-size: clamp(38px, 9vw, 52px) !important;
    line-height: .96;
  }
  .hero-v25-copy .lead-roboto {
    font-size: 16px !important;
    max-width: 100%;
  }
  .hero-v25-visual img {
    height: clamp(280px, 50vh, 380px) !important;
  }
  .hero-v25-actions { flex-direction: column; align-items: stretch; }
  .hero-v25-actions a, .hero-v25-actions .btn { width: 100%; text-align: center; }

  /* Hide the homepage hero sticker on phones — it overlaps the H1. */
  .hero-v25-sticker { display: none !important; }
}

/* === PAGE HERO (subpages) mobile === */
@media (max-width: 780px){
  .page-hero, .page-hero-v25 {
    min-height: auto !important;
    padding: 96px 22px 56px !important;
  }
  .page-hero-v25-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .page-hero-v25-img img { height: clamp(240px, 44vh, 320px) !important; }
  .page-hero h1, .page-hero-v25 h1 {
    font-size: clamp(34px, 8.5vw, 44px) !important;
    line-height: .98 !important;
    overflow-wrap: break-word;
  }
  .page-hero .lede, .page-hero-v25 .lede {
    font-size: 16px !important;
    line-height: 1.55;
  }
}

/* === Global mobile typography hardening — applies to ANY giant headline === */
@media (max-width: 780px){
  /* Any H1/H2 using Insurgency/InsurgentNumbers font family is decorative-display
     and at desktop sizes can blow out a 390px viewport. Cap them.
     Use overflow-wrap (not word-break) so words only break when they truly don't fit. */
  h1, h2 { overflow-wrap: break-word; }
  h1 { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1 !important; }
  /* Section H2s (not used inside articles): cap at ~36px */
  section h2:not(.art-body-inner h2) { font-size: clamp(26px, 8vw, 38px) !important; line-height: 1.02 !important; }
  /* H3s common cap */
  section h3 { font-size: clamp(20px, 5.5vw, 28px) !important; }
  section h4 { font-size: clamp(16px, 4.5vw, 20px) !important; }
}

/* === Section padding tightening on mobile === */
@media (max-width: 780px){
  .cmp-v25-section,
  .doors-v25-section,
  .manifesto-v25,
  .figures-v25,
  .story-hero, .movement-hero,
  .grove-section, .sourcing-v25, .press-detail, .certs-v25, .cta-v25,
  .three-pillars, .oxg-deep, .fedepalma-trial, .oxg-section, .heat-section,
  .studies-section,
  section[class*="-section"] {
    padding-top: clamp(56px, 9vh, 80px) !important;
    padding-bottom: clamp(56px, 9vh, 80px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Headlines in section banners scale down */
  .cmp-v25-header h2,
  .doors-v25-header h2,
  .manifesto-v25 h2 {
    font-size: clamp(30px, 8.5vw, 44px) !important;
    line-height: .98;
  }
  .cmp-v25-context, .manifesto-v25 p {
    font-size: 15.5px !important;
    line-height: 1.6;
  }
}

/* === Photo features / break sections mobile === */
@media (max-width: 780px){
  .photo-feature {
    height: auto !important;
    min-height: 460px;
  }
  .photo-feature img { height: 100%; }
  .photo-feature-overlay {
    background: linear-gradient(180deg, rgba(29,29,27,.15) 0%, rgba(29,29,27,.55) 50%, rgba(29,29,27,.92) 100%) !important;
  }
  .photo-feature-caption {
    left: 20px !important; right: 20px !important;
    bottom: 28px !important;
    max-width: 100%;
  }
  .photo-feature-caption h3 {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: .96;
  }
  .photo-feature-caption .pf-deck { font-size: 15px !important; }
  .photo-feature-caption .pf-meta { gap: 14px !important; font-size: 10.5px !important; }

  .sticker-break, .chef-break {
    height: auto !important;
    min-height: 360px;
  }
  .sticker-break-text, .chef-break-text {
    position: absolute; left: 20px !important; right: 20px !important;
    top: auto !important; bottom: 28px !important; transform: none !important;
    max-width: 100% !important; text-align: left !important;
  }
  .sticker-break-overlay {
    background: linear-gradient(180deg, rgba(214,81,56,.1) 0%, rgba(214,81,56,.75) 60%, rgba(214,81,56,.92) 100%) !important;
  }
  .chef-break-overlay {
    background: linear-gradient(180deg, rgba(45,90,39,.15) 0%, rgba(45,90,39,.65) 50%, rgba(45,90,39,.92) 100%) !important;
  }
  .sticker-break-text h3, .chef-break-text h3 {
    font-size: clamp(26px, 7vw, 36px) !important;
  }
  .sticker-break-text p, .chef-break-text p { font-size: 14.5px !important; }
}

/* === Figures band mobile === */
@media (max-width: 780px){
  .figures-v25 { grid-template-columns: 1fr; }
  .figures-v25 .fig {
    padding: 36px 22px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(250,250,243,.12) !important;
  }
  .figures-v25 .fig:last-child { border-bottom: 0 !important; }
  .figures-v25 .fig-num { font-size: clamp(64px, 18vw, 96px) !important; }
  .figures-v25 .fig-label { font-size: 11.5px !important; margin-top: 18px; }
  .figures-v25 .fig-desc { font-size: 13.5px !important; }
}

/* === Doors section mobile === */
@media (max-width: 780px){
  .doors-v25-grid { grid-template-columns: 1fr !important; }
  .door-v25 { min-height: 180px; padding: 28px 22px !important; }
}

/* === Comparison chart (PUFA) mobile === */
@media (max-width: 780px){
  .cmp-focus-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 14px 0 !important;
  }
  .cmp-focus-label { font-size: 13px !important; }
  .cmp-focus-track { width: 100% !important; }
  .cmp-focus-val { font-size: 22px !important; }
  .cmp-focus-axis { font-size: 11px !important; }
  .cmp-focus-trial { padding: 22px !important; }
  .cmp-focus-trial .trial-num { font-size: 56px !important; }
  .cmp-focus-trial .trial-claim { font-size: 14px !important; }
}

/* === Research article charts + masthead mobile === */
@media (max-width: 780px){
  /* Article hero — keep on phones */
  .art-hero { padding: 96px 22px 28px !important; }
  .art-hero-img { padding: 0 22px !important; margin-top: 0 !important; }
  .art-issue { font-size: clamp(56px, 14vw, 76px) !important; line-height: .9; }
  .art-headline { font-size: clamp(28px, 7.5vw, 40px) !important; }
  .art-deck { font-size: 16px !important; }
  .art-meta { font-size: 10.5px !important; gap: 10px !important; }

  /* Article body */
  .art-body { padding: 32px 22px 56px !important; }
  .art-body-inner { font-size: 16px !important; line-height: 1.65; }
  .art-body-inner h2 { font-size: clamp(24px, 6.5vw, 32px) !important; margin: 36px 0 14px !important; }
  .art-body-inner h3 { font-size: 17px !important; margin: 24px 0 10px !important; }
  .art-body-inner p.dropcap::first-letter { font-size: 54px !important; }

  /* Charts: single column */
  .art-chart {
    margin: 36px -8px !important;
    padding: 22px 18px !important;
  }
  .art-chart-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px 0 !important;
  }
  .art-chart-row .label,
  .art-chart-row .lbl {
    font-size: 13px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .art-chart-row .val,
  .art-chart-row .num {
    font-size: 17px !important;
    text-align: right;
  }
  .art-chart-row .bar-wrap { height: 18px !important; }
  .art-chart-foot { font-size: 11px !important; }

  /* Big number callouts — already collapse at 1024 to 1fr, but tighten padding */
  .art-bignum {
    grid-template-columns: 1fr !important;
    margin: 36px 0 !important; padding: 22px 0 !important;
    gap: 18px !important;
  }
  .art-bignum-cell .n {
    font-size: clamp(48px, 13vw, 68px) !important;
    line-height: .9;
  }
  .art-bignum-cell .lbl { font-size: 11px !important; }
  .art-bignum-cell .desc { font-size: 12.5px !important; }

  /* Pullquote */
  .art-pull {
    margin: 28px 0 !important;
    padding: 18px 0 18px 18px !important;
    font-size: clamp(18px, 5vw, 22px) !important;
  }

  /* Figure: kill negative margin overflow */
  .art-figure { margin: 28px 0 !important; }
  .art-figure figcaption { padding: 0 4px !important; }

  /* Honest box */
  .art-honest { padding: 20px 22px !important; margin: 32px 0 !important; }
  .art-honest h4 { font-size: 20px !important; }
  .art-honest p { font-size: 14.5px !important; }

  /* CTA strip */
  .art-cta-strip { padding: 48px 22px !important; }
  .art-cta-strip h3 { font-size: clamp(24px, 7vw, 32px) !important; }
  .art-cta-strip p { font-size: 14.5px !important; }
}

/* === Logo intro on mobile — animation PLAYS, but over the poster image,
   NOT the video. Reason: mobile data + autoplay restrictions + 13MB MP4 on
   3G is hostile. We keep the visual moment (cartel slap on a beautiful
   aerial backdrop) without the bandwidth/UX cost of the video. ===

   Implementation:
   1. Hide the <video> element only — leave .logo-stage and .intro-veil intact.
   2. Paint the aerial drone shot as a background-image directly on .intro-veil
      (the video element's `poster` attribute only renders when the video does,
      so we can't rely on it once display:none).
   3. The existing CSS rules for vignette overlay, cartel cream-color during
      centerpiece, and cream→ink color transition during seating all keep
      working as-is.
   4. Do NOT override body.intro-armed visibility — the intro must play on
      mobile too, which means hiding page content briefly during the slap. */
@media (max-width: 780px){
  .intro-veil-video { display: none !important; }
  .intro-veil{
    background:
      radial-gradient(ellipse at center, rgba(20,40,18,0) 0%, rgba(10,20,8,0.45) 95%),
      url('../img/aerial-plantation.jpg') center/cover no-repeat,
      var(--green-deep);
  }
  /* The vignette ::after isn't needed when the gradient is already in the
     background stack above — collapse it to avoid stacking two vignettes. */
  .intro-veil::after { display: none; }
  /* Cartel size on mobile — was min(42vw, 540px, …) which gave only ~160px
     on a 390px phone. Bump up so the slap reads as a real moment, not a tiny
     icon. */
  .logo-stage.centerpiece{
    width: min(78vw, 360px) !important;
  }
}

/* === Footer mobile === */
@media (max-width: 640px){
  .footer-v25 { padding: 56px 22px 32px !important; }
  .footer-v25 .footer-v2-top { grid-template-columns: 1fr !important; gap: 32px; }
  .footer-v25 .footer-v2-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
}

/* === Catch-all: prevent horizontal overflow on tiny screens === */
@media (max-width: 780px){
  html, body { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; height: auto; }
}

/* === Smallest screens (≤ 380px) — extra tightening === */
@media (max-width: 380px){
  .nav-v25 .nav-cta { right: 56px; padding: 9px 12px !important; font-size: 10.5px !important; }
  .nav-v25 .nav-logo img { height: 32px; }
}

/* === Footer newsletter signup === */
.footer-v2-brand .footer-nl { margin-top: 28px; position: relative; }
.footer-nl-label { font-family: 'Roboto', sans-serif; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; font-weight: 700; display: block; }
.footer-nl-row { display: flex; gap: 8px; max-width: 380px; }
.footer-nl-row input[type="email"] { flex: 1; font-family: 'Roboto', sans-serif; font-size: 13px; padding: 11px 14px; background: rgba(250,250,243,.05); border: 1px solid rgba(250,250,243,.18); color: var(--paper); transition: border-color .25s, background .25s; min-width: 0; }
.footer-nl-row input[type="email"]:focus { outline: 0; border-color: var(--orange); background: rgba(250,250,243,.08); }
.footer-nl-row input[type="email"]::placeholder { color: rgba(250,250,243,.4); }
.footer-nl-row button { font-family: 'Roboto', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 11px 18px; background: var(--coral); color: var(--paper); border: 0; cursor: pointer; white-space: nowrap; transition: background .25s, transform .15s; }
.footer-nl-row button:hover { background: var(--red); }
.footer-nl-row button:disabled { opacity: .5; cursor: wait; }
.footer-nl-msg { font-family: 'Roboto', sans-serif; font-size: 11.5px; color: rgba(250,250,243,.45); margin-top: 10px; font-weight: 300; font-style: italic; max-width: 380px; }
.footer-nl-msg.success { color: var(--lime); font-style: normal; font-weight: 700; }
.footer-nl-msg.error { color: var(--coral); font-style: normal; font-weight: 700; }
@media (max-width: 640px){
  .footer-nl-row { flex-direction: column; max-width: 100%; }
  .footer-nl-row button { width: 100%; }
}