/* ==========================================================================
   MIDNIGHT GALA v2 — design system for the MEW Philippines proposal deck
   Canvas: 1920 x 1080 px per <section class="slide">.
   Linked from deck/index.html (after fonts.css). Asset URLs here are relative
   to deck/ (img/...). Read STYLEGUIDE.md before building a slide.

   01 Tokens                     11 Icons + icon badge
   02 Slide base + backgrounds   12 Process steps (numbered flow)
   03 Frame / flow layout, grids 13 Timeline (milestones, 2 rows)
   04 Typography                 14 Tables (.table, schedule, matrix)
   05 Chapter eyebrow + heads    15 Lists (numbered, checklist, spark)
   06 Slide chrome               16 Quote
   07 Stage lighting (hero only) 17 Budget meter
   08 Photography + people       18 Risk -> safeguard pairs
   09 Cards                      19 Misc (tags, ornament, meta, logos)
   10 Stats
   ========================================================================== */

/* 01 ─ TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* Night / aubergine ground */
  --night-950:#08050C;
  --night-900:#0E0814;
  --plum-850:#150C1D;
  --plum-800:#1C1127;
  --plum-700:#291937;
  --plum-600:#3A2550;

  /* Luminous violet (brand family) */
  --violet-600:#7C4DEB;
  --violet-500:#8B5CF6;
  --violet-400:#A78BFA;
  --violet-300:#C4B5FD;
  --violet-200:#E2D9FF;

  /* Champagne / rose gold */
  --champagne-100:#FCF3E4;
  --champagne-200:#F4E2C4;
  --gold-300:#E8C893;
  --gold-400:#D4AA6E;
  --gold-500:#B38549;
  --rose-300:#F0C8B8;
  --rose-400:#DDA38E;

  /* Neutrals on dark (contrast on #0E0814) */
  --ivory:#FAF4F6;      /* headlines, labels            ~18:1 */
  --mist:#E4DAEA;       /* ALL body copy                ~15:1 */
  --haze:#B9AAC6;       /* captions, footnotes, chrome  ~8.5:1 */
  --smoke:#7D6E8C;      /* decoration ONLY (never text) */

  /* Philippine flag — tiny accents only */
  --ph-blue:#0038A8; --ph-red:#CE1126; --ph-sun:#FCD116;

  /* Semantic */
  --text-strong:var(--ivory);
  --text:var(--mist);
  --text-muted:var(--haze);
  --accent:var(--gold-300);
  --accent-2:var(--violet-300);
  --hairline:rgba(232,200,147,.18);
  --hairline-strong:rgba(232,200,147,.38);
  --hairline-violet:rgba(167,139,250,.30);

  /* Gradients */
  --grad-gold:linear-gradient(172deg,#FFF3DC 0%,#F0D09C 30%,#D2A263 58%,#F3D9AB 78%,#B98647 100%);
  --grad-gold-flat:linear-gradient(100deg,#F7E3C0 0%,#E4BE85 50%,#F4DDB4 100%);
  --grad-gold-h:linear-gradient(90deg,#B98647 0%,#E4BE85 45%,#F8E6C4 80%,#E8C893 100%);
  --grad-rose-gold:linear-gradient(120deg,#F8DCCD 0%,#DDA38E 48%,#F3CDBB 100%);
  --grad-violet:linear-gradient(135deg,#C4B5FD 0%,#8B5CF6 100%);
  --grad-gold-border:linear-gradient(160deg,rgba(248,227,190,.95) 0%,rgba(212,170,110,.55) 35%,rgba(167,139,250,.35) 70%,rgba(240,208,156,.85) 100%);
  --grad-satin:linear-gradient(162deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.025) 42%,rgba(255,255,255,.012) 70%,rgba(255,255,255,.05) 100%);

  /* Type families */
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,'Segoe UI',Arial,sans-serif;

  /* Type scale (px on the 1920 canvas) */
  --fs-hero:168px;       /* cover wordmark                           */
  --fs-display:112px;    /* closing / section statement              */
  --fs-h1:76px;          /* standard slide title                     */
  --fs-h1-compact:60px;  /* dense slides (may wrap to 2 lines)       */
  --fs-h2:52px;
  --fs-h3:34px;
  --fs-h4:27px;          /* card / step / milestone titles           */
  --fs-quote:38px;
  --fs-lead:27px;        /* standfirst under a title                 */
  --fs-lead-compact:23px;/* lead text in the split (compact) head    */
  --fs-body:22px;        /* default body copy                        */
  --fs-body-sm:21px;     /* minimum body copy                        */
  --fs-table:19px;       /* table cells, schedule, timeline text     */
  --fs-small:18px;       /* secondary line INSIDE a table cell only  */
  --fs-label:16px;       /* small caps labels, row labels (caps)     */
  --fs-caption:16px;     /* captions, footnotes, sources             */
  --fs-chrome:15px;      /* chrome only — the absolute floor         */
  --fs-stat-xl:180px;
  --fs-stat-lg:132px;
  --fs-stat-md:92px;
  --fs-stat-sm:56px;
  --fs-stat-xs:32px;     /* inline numerals in tables                */

  --lh-tight:1.02;
  --lh-title:1.06;
  --lh-snug:1.3;
  --lh-body:1.5;

  --track-eyebrow:.28em;
  --track-caps:.16em;

  /* Spacing */
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px;
  --sp-6:48px; --sp-7:64px; --sp-8:96px; --sp-9:128px;

  /* Canvas + grid (live area = 1696 x 872, x 112→1808, y 84→956) */
  --slide-w:1920px;
  --slide-h:1080px;
  --margin-x:112px;
  --margin-top:84px;
  --margin-bottom:124px;   /* live area ends at y=956; chrome lives below */
  --chrome-bottom:40px;
  --gutter:32px;           /* 12 cols x 112px + 11 x 32px = 1696px */

  /* Radii + shadows */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --shadow-panel:0 40px 80px -40px rgba(0,0,0,.75),0 2px 0 rgba(0,0,0,.2);
  --shadow-cutout:drop-shadow(0 34px 50px rgba(0,0,0,.55));

  /* Masks */
  --sparkle-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.4 16.6 11.1 24 12C16.6 12.9 12.9 16.6 12 24C11.1 16.6 7.4 12.9 0 12C7.4 11.1 11.1 7.4 12 0Z'/%3E%3C/svg%3E");
  --check-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 02 ─ SLIDE BASE + BACKGROUNDS ─────────────────────────────────────────── */
@page{size:1920px 1080px;margin:0}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--night-950)}
body{-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
img{display:block;max-width:none}
p,h1,h2,h3,h4,h5,figure,blockquote,ol,ul{margin:0}

.slide{
  position:relative;overflow:hidden;isolation:isolate;
  width:var(--slide-w);height:var(--slide-h);
  break-after:page;page-break-after:always;
  color:var(--text);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  font-feature-settings:"kern","liga","lnum";
  text-align:left;
  background:var(--bg-velvet);
}
.slide:last-child{break-after:auto;page-break-after:auto}
/* Playfair defaults to old-style figures: force lining figures everywhere. */
.slide,.slide *,.slide *::before,.slide *::after{font-variant-numeric:lining-nums !important}

/* Film grain (automatic on every slide): dithers gradient banding, adds velvet. */
.slide::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:var(--grain);background-size:240px 240px}

:root{
  /* DENSE slides — flat velvet, no pools of light */
  --bg-velvet:
    radial-gradient(80% 55% at 50% -8%,rgba(72,42,104,.34) 0%,transparent 72%),
    radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(4,2,8,.45) 100%),
    linear-gradient(180deg,#130B1B 0%,#0E0814 58%,#0B0610 100%);
  --bg-velvet-plum:
    radial-gradient(90% 60% at 18% -10%,rgba(92,54,130,.36) 0%,transparent 70%),
    radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(4,2,8,.45) 100%),
    linear-gradient(180deg,#160C20 0%,#100915 60%,#0B0610 100%);
}
.bg-velvet{background:var(--bg-velvet)}
.bg-velvet-plum{background:var(--bg-velvet-plum)}

/* MEDIUM slides — one soft pool of light baked into the background (no beams).
   --pool-x / --pool-y move the pool (defaults: left 24%/34%, right 76%/34%). */
.bg-stage{--pool-x:50%;--pool-y:30%;background:
    radial-gradient(46% 66% at var(--pool-x) var(--pool-y),rgba(112,74,160,.40) 0%,rgba(58,31,88,.20) 46%,transparent 76%),
    radial-gradient(120% 90% at 50% 50%,transparent 58%,rgba(4,2,8,.40) 100%),
    linear-gradient(180deg,#150C1E 0%,var(--night-900) 60%,var(--night-950) 100%)}
.bg-stage--left{--pool-x:24%;--pool-y:34%}
.bg-stage--right{--pool-x:76%;--pool-y:34%}

/* HERO / PHOTO slides ONLY (1, 4, 11, 14, 21, 22) — richer ground that may carry
   .layer-light children: spotlights, beams, floor glow, sparkles. */
.bg-hero{--pool-x:50%;--pool-y:30%;background:
    radial-gradient(52% 74% at var(--pool-x) var(--pool-y),rgba(124,82,176,.46) 0%,rgba(62,33,94,.24) 45%,transparent 76%),
    radial-gradient(90% 70% at 50% -12%,rgba(88,52,120,.40) 0%,transparent 70%),
    linear-gradient(180deg,#150C1E 0%,var(--night-900) 60%,var(--night-950) 100%)}
.bg-hero--left{--pool-x:24%;--pool-y:34%}
.bg-hero--right{--pool-x:76%;--pool-y:34%}

/* Glow discipline (enforced): beams, spotlights and sparkles render ONLY on .bg-hero */
.slide:not(.bg-hero) .beam,
.slide:not(.bg-hero) .spotlight,
.slide:not(.bg-hero) .sparkle{display:none !important}

/* Stacking: light (0) · grain (1) · cutouts (1, later in DOM) · content (2) · nametags (3) · chrome (5) */
.layer-light{position:absolute;inset:0;z-index:0;pointer-events:none}
.layer-fx{position:absolute;inset:0;z-index:2;pointer-events:none}   /* sparkles in front of a cutout */

/* 03 ─ FRAME / FLOW LAYOUT ──────────────────────────────────────────────── */
/* .frame = the live area. Flex column: head → body (flex:1) → foot (pinned).
   Content can never reach the chrome because the frame ends at y=956.
   Leave room for a cutout with --frame-right / --frame-left (px from the edge). */
.frame{
  position:absolute;z-index:2;
  top:var(--margin-top);bottom:var(--margin-bottom);
  left:var(--frame-left,var(--margin-x));right:var(--frame-right,var(--margin-x));
  display:flex;flex-direction:column;gap:var(--frame-gap,48px);
}
.frame--full{bottom:var(--margin-x)}           /* slides without chrome (cover) */
.frame__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--body-gap,32px)}
.frame__body--center{justify-content:center}
.frame__body--end{justify-content:flex-end}
.frame__foot{flex:none;margin-top:auto}        /* footnotes / sources / takeaway strip */

/* 12-column grid: col 112px, gutter 32px on the 1696px live width */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--gutter)}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}
.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-9{grid-column:span 9}.span-12{grid-column:1/-1}

.cols-2,.cols-3,.cols-4{display:grid;column-gap:var(--col-gap,var(--gutter));row-gap:var(--row-gap,var(--gutter))}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols--wide-gap{--col-gap:64px}
.cols--rule > * + *{border-left:1px solid var(--hairline);padding-left:var(--col-gap,var(--gutter))}
.cols--rule{--col-gap:40px}

.stack{display:flex;flex-direction:column;gap:var(--stack-gap,var(--sp-4))}
.row{display:flex;align-items:center;gap:var(--row-gap,var(--sp-4))}
.grow{flex:1 1 auto;min-height:0}
.push-bottom{margin-top:auto}
.maxw-s{max-width:640px}.maxw-m{max-width:880px}.maxw-l{max-width:1100px}.measure{max-width:720px}

/* 04 ─ TYPOGRAPHY ───────────────────────────────────────────────────────── */
.t-hero,.t-display,.t-h1,.t-h2,.t-h3,.t-h4{font-family:var(--font-display);font-weight:500;color:var(--text-strong);margin:0;letter-spacing:-.012em;text-wrap:balance}
.t-hero{font-size:var(--fs-hero);line-height:.94;letter-spacing:-.02em}
.t-display{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.018em}
.t-h1{font-size:var(--fs-h1);line-height:var(--lh-title)}
.t-h1--compact{font-size:var(--fs-h1-compact);line-height:1.08}
.t-h2{font-size:var(--fs-h2);line-height:1.1}
.t-h3{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.005em}
.t-h4{font-size:var(--fs-h4);line-height:1.22;letter-spacing:0}
.t-hero em,.t-display em,.t-h1 em,.t-h2 em,.t-h3 em,.t-h4 em{font-style:italic;font-weight:500}

/* Gilded (metallic champagne) text — on <em>, numbers, key words.
   Every gradient-clipped text MUST carry a filter (the no-op drop-shadow below or .glow):
   it makes Chrome rasterise the glyphs; without it PDF viewers draw hairline boxes. */
.gild,.rose{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));padding-bottom:.06em;padding-right:.04em}
.gild{background-image:var(--grad-gold)}
.rose{background-image:var(--grad-rose-gold)}
/* luminous halo — hero words / hero numbers on hero slides only */
.glow{filter:drop-shadow(0 0 22px rgba(232,200,147,.26))}
.glow-violet{filter:drop-shadow(0 0 26px rgba(167,139,250,.45))}

.violet{color:var(--violet-300)}
.gold{color:var(--gold-300)}
.ivory{color:var(--ivory)}
.muted{color:var(--text-muted)}
.serif{font-family:var(--font-display)}
.italic{font-style:italic}
.nowrap{white-space:nowrap}
.num{font-feature-settings:"kern","lnum","tnum"}   /* tabular figures for columns of numbers */
/* ₱ is NOT in Playfair — wrap it: <span class="peso">₱</span> (renders in Inter) */
.peso{font-family:var(--font-sans);font-style:normal;font-weight:400;font-size:.5em;letter-spacing:0;margin-right:.08em;vertical-align:.62em;line-height:0}

.lead{font:400 var(--fs-lead)/1.42 var(--font-sans);color:var(--mist);letter-spacing:-.003em;max-width:1100px;text-wrap:pretty}
.lead--serif{font:italic 500 30px/1.36 var(--font-display);color:var(--champagne-200)}
.body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text)}
.body-sm{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text)}
.label{font:600 var(--fs-body)/1.3 var(--font-sans);color:var(--text-strong);letter-spacing:-.005em}
.caps{font:600 var(--fs-label)/1.25 var(--font-sans);letter-spacing:var(--track-caps);text-transform:uppercase}
.caption{font-size:var(--fs-caption);line-height:1.45;color:var(--text-muted)}
.footnote{font-size:var(--fs-caption);line-height:1.5;color:var(--text-muted);max-width:1480px}
.footnote b{color:var(--mist);font-weight:600}
.footnote i,.footnote em{font-style:italic}
strong,b{font-weight:600;color:var(--ivory)}

/* 05 ─ CHAPTER EYEBROW + SLIDE HEADS ────────────────────────────────────── */
/* <div class="eyebrow"><span class="eyebrow__num">I</span><span class="eyebrow__sep"></span>Vision &amp; Market</div> */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font:600 var(--fs-label)/1 var(--font-sans);
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--accent);
}
.eyebrow__num{font:italic 500 26px/1 var(--font-display);letter-spacing:0;text-transform:none;color:var(--gold-300);min-width:.6em}
.eyebrow__sep{width:30px;height:1px;background:var(--hairline-strong);flex:none}
.eyebrow--violet{color:var(--violet-300)}
.eyebrow--spark::before{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:var(--sparkle-mask) center/contain no-repeat;mask:var(--sparkle-mask) center/contain no-repeat}

/* Standard head: eyebrow → title → lead, stacked */
.slide-head{flex:none;display:flex;flex-direction:column;gap:22px;max-width:var(--head-max,1360px)}
.slide-head .eyebrow{margin-bottom:2px}
.slide-head .lead{margin-top:4px}

/* Compact split head (dense slides): title left, lead right, bottoms aligned.
   Titles are .t-h1--compact (60px) and may wrap to 2 lines — never nowrap. */
.slide-head--split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--lead-w,700px));column-gap:72px;align-items:end}
.slide-head__title{display:flex;flex-direction:column;gap:20px;min-width:0}
.slide-head--split .lead{font-size:var(--fs-lead-compact);line-height:1.45;margin:0 0 6px;max-width:none}
.slide-head--split .lead--serif{font-size:27px;line-height:1.36;margin:0 0 4px}

/* 06 ─ SLIDE CHROME (identical on every content slide — copy verbatim) ──── */
/* <footer class="chrome"><div class="chrome__brand"><img class="chrome__mark" src="img/logo-mew.png" alt="">
     <span>Miss Equality World Philippines</span></div>
     <div class="chrome__meta"><span>National Director Proposal</span><span class="chrome__page">04</span></div></footer> */
.slide > .chrome{
  position:absolute;z-index:5;left:var(--margin-x);right:var(--margin-x);bottom:var(--chrome-bottom);height:32px;
  display:flex;align-items:center;justify-content:space-between;margin:0;padding:0;
  font:500 var(--fs-chrome)/1 var(--font-sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-muted);
}
.chrome__brand,.chrome__meta{display:flex;align-items:center;gap:16px}
.chrome__mark{width:40px;height:30px;object-fit:contain;object-view-box:inset(4.2% 5% 36% 5%)}
.chrome__meta{gap:22px}
.chrome__meta > span + span{padding-left:22px;border-left:1px solid var(--hairline-strong)}
.chrome__page{font:italic 500 24px/1 var(--font-display);letter-spacing:.02em;color:var(--gold-300);text-transform:none;width:1.6em;height:24px;display:inline-flex;align-items:center;justify-content:flex-end}
/* over a photo / cutout: brighter text + soft shadow so it stays legible */
.chrome--over-photo{color:rgba(250,244,246,.86) !important;text-shadow:0 1px 10px rgba(8,5,12,.95),0 0 2px rgba(8,5,12,.9)}

/* 07 ─ STAGE LIGHTING (only renders on .bg-hero) ─────────────────────────── */
.spotlight{
  position:absolute;pointer-events:none;border-radius:50%;
  --spot:196,160,255;
  background:radial-gradient(closest-side,rgba(var(--spot),.55) 0%,rgba(var(--spot),.24) 38%,rgba(var(--spot),.08) 70%,rgba(var(--spot),0) 100%);
}
.spotlight--warm{--spot:255,222,178}
.spotlight--rose{--spot:240,176,170}
.spotlight--violet{--spot:150,110,250}
.beam{
  position:absolute;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,238,214,.34) 0%,rgba(236,214,255,.14) 45%,rgba(236,214,255,0) 92%);
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);
  filter:blur(22px);mix-blend-mode:screen;
}
.beam--violet{background:linear-gradient(180deg,rgba(214,196,255,.34) 0%,rgba(167,139,250,.14) 45%,rgba(167,139,250,0) 92%)}
.beam--angled{transform-origin:50% 0;opacity:.7}
.floor-glow{
  position:absolute;pointer-events:none;height:120px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,228,196,.42),rgba(196,160,255,.16) 55%,transparent 100%);
}
.sparkle{position:absolute;width:var(--s,18px);height:var(--s,18px);background:var(--gold-300);
  -webkit-mask:var(--sparkle-mask) center/contain no-repeat;mask:var(--sparkle-mask) center/contain no-repeat;
  filter:drop-shadow(0 0 6px rgba(255,226,180,.7))}
.sparkle--violet{background:var(--violet-200);filter:drop-shadow(0 0 6px rgba(196,181,253,.8))}
/* Double-rule invitation frame (cover / closing only) */
.gala-frame{position:absolute;inset:36px;z-index:3;pointer-events:none;border:1px solid rgba(232,200,147,.22)}
.gala-frame::after{content:"";position:absolute;inset:8px;border:1px solid rgba(232,200,147,.10)}

/* 08 ─ PHOTOGRAPHY + PEOPLE ─────────────────────────────────────────────── */
/* Transparent PNG cutouts: absolutely placed by the slide's scoped CSS */
.cutout{position:absolute;z-index:1;display:block;height:auto;filter:var(--shadow-cutout)}
.fade-bottom{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 var(--fade-start,72%),rgba(0,0,0,0) var(--fade-end,96%));
                     mask-image:linear-gradient(180deg,#000 0%,#000 var(--fade-start,72%),rgba(0,0,0,0) var(--fade-end,96%))}
.fade-left{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 var(--fade-end,30%));mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 var(--fade-end,30%))}

/* Opaque photos (venues, community, mockups): hairline frame + night vignette + caption */
.photo{position:relative;overflow:hidden;border-radius:var(--r-md);box-shadow:var(--shadow-panel);background:var(--plum-800)}
.photo > img{width:100%;height:100%;object-fit:cover;display:block}
.photo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(232,200,147,.22);
  background:linear-gradient(180deg,rgba(14,8,20,0) 58%,rgba(14,8,20,.78) 100%)}
.photo--clean::after{background:none}          /* mockups: keep the hairline, drop the vignette */
.photo__caption{position:absolute;left:24px;right:24px;bottom:20px;z-index:1;font:600 var(--fs-label)/1.25 var(--font-sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ivory);text-shadow:0 1px 8px rgba(8,5,12,.8)}
.figure{display:flex;flex-direction:column;gap:14px;min-width:0}
.figure__caption{font-size:var(--fs-caption);line-height:1.45;color:var(--text-muted)}

/* Round portrait with a gold hairline ring (director on cover / closing) */
.portrait{position:relative;flex:none;width:var(--size,84px);height:var(--size,84px);border-radius:50%;padding:2px;
  background:var(--grad-gold);box-shadow:0 0 0 6px rgba(232,200,147,.07),0 14px 30px -10px rgba(0,0,0,.7)}
.portrait > img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  background:radial-gradient(circle at 50% 30%,#5B3A82 0%,#2A1839 70%)}
.crop-director-face{object-view-box:inset(6.6% 40.6% 76.2% 35.4%)}

/* Name tag for a pictured person (absolutely placed next to the figure) */
.nametag{position:absolute;z-index:3;display:flex;flex-direction:column;gap:8px}
.nametag--right{text-align:right;align-items:flex-end}
.nametag__name{font:italic 500 30px/1.1 var(--font-display);color:var(--ivory);text-shadow:0 2px 14px rgba(8,5,12,.85)}
.nametag__role{font:600 var(--fs-label)/1.25 var(--font-sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--gold-300);text-shadow:0 1px 10px rgba(8,5,12,.9)}

/* 09 ─ CARDS ────────────────────────────────────────────────────────────── */
.card{
  position:relative;border-radius:var(--r-lg);padding:36px 38px 38px;min-width:0;
  background:var(--grad-satin),rgba(24,14,34,.62);
  border:1px solid var(--hairline);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--shadow-panel);
  display:flex;flex-direction:column;gap:16px;
}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,transparent 22%,rgba(255,240,225,.045) 38%,transparent 54%)}
.card > *{position:relative}
.card--tight{padding:26px 30px;gap:12px}
.card--flat{box-shadow:none;background:rgba(255,255,255,.035)}
.card--flat::before{display:none}
/* Featured card: champagne-gold hairline border + violet bloom. Use ONE per slide. */
.card--gilded{
  border:1px solid transparent;
  background:linear-gradient(162deg,rgba(62,38,86,.94) 0%,rgba(30,18,44,.95) 55%,rgba(22,13,32,.97) 100%) padding-box,
             var(--grad-gold-border) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 30px 90px -30px rgba(139,92,246,.45),var(--shadow-panel);
}
.card--violet{background:linear-gradient(160deg,rgba(139,92,246,.22),rgba(139,92,246,.06)),rgba(24,14,34,.72);border-color:var(--hairline-violet)}
.card__kicker{display:flex;align-items:center;gap:14px;color:var(--gold-300)}
.card__title{font:500 var(--fs-h4)/1.22 var(--font-display);color:var(--ivory);text-wrap:balance}
.card__text{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text)}

/* 10 ─ STATS ────────────────────────────────────────────────────────────── */
/* Big gilded number: <div class="stat"><div class="stat__value">95.8<span class="stat__unit">M</span></div>
   <div class="stat__label">…</div><p class="stat__note">…</p></div> */
.stat{display:flex;flex-direction:column;gap:12px;min-width:0}
.stat__kicker{font:600 var(--fs-label)/1.25 var(--font-sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--gold-300)}
.stat__value{font:500 var(--fs-stat-lg)/.92 var(--font-display);letter-spacing:-.03em;white-space:nowrap;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));
  padding:.02em .05em .07em 0;margin-left:-.04em;align-self:flex-start}
.stat__value.glow{filter:drop-shadow(0 0 22px rgba(232,200,147,.26))}
.stat__value--xl{font-size:var(--fs-stat-xl)}
.stat__value--md{font-size:var(--fs-stat-md)}
.stat__value--sm{font-size:var(--fs-stat-sm)}
.stat__value--violet{background-image:linear-gradient(170deg,#EDE6FF 0%,#C4B5FD 45%,#9A7BF7 100%)}
.stat__unit{font-size:.5em;letter-spacing:-.01em;margin-left:.04em}
.stat__label{font:600 var(--fs-body)/1.3 var(--font-sans);color:var(--ivory);letter-spacing:-.005em;text-wrap:balance}
.stat__note{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text)}
/* Editorial variant: hairline-topped column, no box (alternative to glass cards) */
.stat--column{border-top:1px solid var(--hairline-strong);padding-top:24px;gap:14px}
.stat--column .stat__value{margin-top:10px}
.stat--column .stat__label{font:500 var(--fs-h4)/1.22 var(--font-display);color:var(--ivory);letter-spacing:0}
/* Inline numeral (tables, lists): Playfair lining figure in gold */
.numeral{font:500 var(--fs-stat-xs)/1 var(--font-display);color:var(--gold-300);letter-spacing:-.01em}

/* 11 ─ ICONS ────────────────────────────────────────────────────────────── */
/* <span class="ic ic--crown"></span> — colour = currentColor (default gold), size = --ic-size */
.ic{display:inline-block;flex:none;width:var(--ic-size,44px);height:var(--ic-size,44px);background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;color:var(--gold-300)}
.ic--beauty{--ic:url("img/ic-beauty.png")}
.ic--megaphone{--ic:url("img/ic-megaphone.png")}
.ic--stars-hand{--ic:url("img/ic-stars-hand.png")}
.ic--chat{--ic:url("img/ic-chat.png")}
.ic--growth{--ic:url("img/ic-growth.png")}
.ic--social{--ic:url("img/ic-social.png")}
.ic--target{--ic:url("img/ic-target.png")}
.ic--handshake{--ic:url("img/ic-handshake.png")}
.ic--handshake2{--ic:url("img/ic-handshake2.png")}
.ic--person-heart{--ic:url("img/ic-person-heart.png")}
.ic--wave{--ic:url("img/ic-wave.png")}
.ic--stage{--ic:url("img/ic-stage.png")}
.ic--crown{--ic:url("img/ic-crown.png")}
.ic--partner-cycle{--ic:url("img/ic-partner-cycle.png")}
.ic--deal-money{--ic:url("img/ic-deal-money.png")}
.ic--house-clock{--ic:url("img/ic-house-clock.png")}
.ic--hotel-key{--ic:url("img/ic-hotel-key.png")}
.ic--video{--ic:url("img/ic-video.png")}
.ic--runway{--ic:url("img/ic-runway.png")}
.ic--priorities{--ic:url("img/ic-priorities.png")}
.ic--cost{--ic:url("img/ic-cost.png")}
.ic--tickets{--ic:url("img/ic-tickets.png")}
.ic--funding{--ic:url("img/ic-funding.png")}
.ic--sparkle{--ic:var(--sparkle-mask)}
.ic--check{--ic:var(--check-mask)}

/* Round jewel badge holding an icon. --badge sets the diameter (default 76px). */
.ic-badge{position:relative;display:grid;place-items:center;flex:none;width:var(--badge,76px);height:var(--badge,76px);border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(167,139,250,.28),rgba(40,24,58,.4) 70%);
  border:1px solid var(--hairline-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 30px -6px rgba(167,139,250,.35)}
.ic-badge .ic{--ic-size:calc(var(--badge,76px) * .54)}
.ic-badge--gold{background:radial-gradient(circle at 50% 30%,rgba(232,200,147,.22),rgba(40,24,58,.45) 72%)}

/* 12 ─ PROCESS STEPS (numbered flow with connectors) ────────────────────── */
/* <ol class="steps" style="--n:4"><li class="step"><span class="step__node">01</span>
     <span class="step__kicker">Early March</span><h3 class="step__title">Launch</h3><p class="step__text">…</p></li>…</ol> */
.steps{--node:60px;--step-gap:48px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));column-gap:var(--step-gap)}
.step{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.step__node{position:relative;z-index:1;display:grid;place-items:center;width:var(--node);height:var(--node);border-radius:50%;margin-bottom:10px;
  font:500 24px/1 var(--font-display);color:var(--gold-300);
  background:radial-gradient(circle at 50% 30%,#3A2552 0%,#1C1127 75%);
  border:1px solid var(--hairline-strong);box-shadow:0 0 0 6px rgba(232,200,147,.05),0 0 34px -8px rgba(167,139,250,.5)}
.step__node .ic{--ic-size:34px}
/* connector: hairline from this node to the next, ending in a chevron */
.step:not(:last-child)::before{content:"";position:absolute;top:calc(var(--node) / 2);height:1px;
  left:calc(var(--node) + 18px);right:calc(-1 * var(--step-gap) + 18px);
  background:linear-gradient(90deg,rgba(232,200,147,.55),rgba(167,139,250,.35))}
.step:not(:last-child)::after{content:"";position:absolute;top:calc(var(--node) / 2 - 5px);right:calc(-1 * var(--step-gap) + 19px);
  width:10px;height:10px;border-top:1px solid var(--violet-300);border-right:1px solid var(--violet-300);transform:rotate(45deg);opacity:.8}
.step__kicker{font:600 var(--fs-label)/1.25 var(--font-sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--gold-300)}
.step__title{font:500 var(--fs-h4)/1.2 var(--font-display);color:var(--ivory);text-wrap:balance}
.step__text{font-size:var(--fs-body-sm);line-height:1.48;color:var(--text)}
/* Vertical variant: nodes in a left column, connector runs downward. Text sits right of the node. */
.steps--v{grid-template-columns:minmax(0,1fr);row-gap:var(--step-gap,32px)}
.steps--v .step{display:grid;grid-template-columns:var(--node) minmax(0,1fr);column-gap:24px;row-gap:4px;align-content:start}
.steps--v .step > :not(.step__node){grid-column:2}
.steps--v .step__node{grid-row:1 / span 3;margin:0}
.steps--v .step:not(:last-child)::before{left:calc(var(--node) / 2);right:auto;top:calc(var(--node) + 10px);bottom:calc(-1 * var(--step-gap,32px) + 10px);width:1px;height:auto;
  background:linear-gradient(180deg,rgba(232,200,147,.55),rgba(167,139,250,.35))}
.steps--v .step:not(:last-child)::after{display:none}
.step--key .step__node{background:var(--grad-gold);color:#1A0F22;border:none;box-shadow:0 0 0 6px rgba(232,200,147,.12),0 0 40px -6px rgba(232,200,147,.55)}

/* 13 ─ TIMELINE (horizontal rail, milestone dots, wraps to 2 rows) ──────── */
/* <ol class="timeline" style="--cols:4"><li class="milestone"><span class="milestone__when">Oct–Dec 2026</span>
     <h3 class="milestone__title">Franchise Agreement</h3><p class="milestone__text">…</p></li>…</ol>
   8 milestones + --cols:4 = two rows of four. Add .milestone--key to the event itself. */
.timeline{--tl-gap:36px;--dot:16px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));column-gap:var(--tl-gap);row-gap:var(--tl-row-gap,40px);counter-reset:ms}
.milestone{position:relative;padding-top:44px;min-width:0;display:flex;flex-direction:column;gap:8px;counter-increment:ms}
/* rail: from this dot to the next dot */
.milestone::before{content:"";position:absolute;top:calc(var(--dot) / 2 + 2px);left:0;right:calc(-1 * var(--tl-gap));height:1px;
  background:linear-gradient(90deg,rgba(232,200,147,.6),rgba(167,139,250,.38))}
.milestone:last-child::before{right:0;background:linear-gradient(90deg,rgba(232,200,147,.6),rgba(232,200,147,0))}
/* dot */
.milestone::after{content:"";position:absolute;top:2px;left:0;width:var(--dot);height:var(--dot);border-radius:50%;
  background:#1C1127;border:1.5px solid var(--gold-300);box-shadow:0 0 0 5px var(--night-900),0 0 18px rgba(232,200,147,.35)}
.milestone__when{font:600 var(--fs-label)/1.25 var(--font-sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--gold-300)}
.milestone__title{font:500 25px/1.2 var(--font-display);color:var(--ivory);text-wrap:balance}
.milestone__text{font-size:var(--fs-body-sm);line-height:1.45;color:var(--text)}
.milestone--key::after{background:var(--grad-gold);border:none;width:calc(var(--dot) + 6px);height:calc(var(--dot) + 6px);top:-1px;left:-3px;
  box-shadow:0 0 0 5px var(--night-900),0 0 26px rgba(232,200,147,.7)}
.milestone--key .milestone__title{color:var(--champagne-200)}
/* Row wrap: .timeline--4 = 4 per row (8 milestones → 2 rows), .timeline--3 = 3 per row.
   The rail fades out at the end of each row; the next row starts at its first dot. */
.timeline--4{--cols:4}
.timeline--3{--cols:3}
.timeline--4 > .milestone:nth-child(4n)::before,
.timeline--3 > .milestone:nth-child(3n)::before{right:0;background:linear-gradient(90deg,rgba(232,200,147,.6),rgba(232,200,147,0))}

/* 14 ─ TABLES ───────────────────────────────────────────────────────────── */
.table{width:100%;border-collapse:collapse;font:400 var(--fs-table)/1.42 var(--font-sans);color:var(--text)}
.table thead th{font:600 var(--fs-label)/1.2 var(--font-sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--gold-300);text-align:left;padding:0 18px 14px 0;vertical-align:bottom}
.table td,.table tbody th{padding:14px 18px 14px 0;border-top:1px solid var(--hairline);vertical-align:top;text-align:left}
.table tbody tr:last-child td,.table tbody tr:last-child th{border-bottom:1px solid var(--hairline)}
.table td.is-featured,.table th.is-featured{background:rgba(139,92,246,.14);color:var(--ivory)}

/* Compact schedule: date column in gold, ~19px text, one hairline per row */
.table--schedule{font-size:var(--fs-table);line-height:1.42}
.table--schedule tbody th{width:var(--date-w,184px);padding:11px 20px 11px 0;font:600 var(--fs-table)/1.42 var(--font-sans);color:var(--gold-300);white-space:nowrap;letter-spacing:0}
.table--schedule td{padding:11px 0}
.table--schedule tr.is-key th,.table--schedule tr.is-key td{color:var(--ivory)}
.table--schedule tr.is-key td strong{color:var(--champagne-200)}

/* Comparison matrix (CSS grid). The featured (our) column is LAST with fixed width --feature-w.
   The panel behind it is ONE absolutely positioned element (.matrix__feature, anchored right)
   that extends 20px above and below the table. Mark featured cells with .is-featured.
   <div class="matrix" style="--cols:270px repeat(4,minmax(0,1fr)) var(--feature-w)"> … </div> */
.matrix{--feature-w:330px;position:relative;display:grid;grid-template-columns:var(--cols);font:400 var(--fs-table)/1.38 var(--font-sans);color:var(--text)}
.matrix > *{position:relative;z-index:1}
.matrix__cell{padding:var(--cell-py,14px) var(--cell-px,18px);border-top:1px solid var(--hairline);display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.matrix__cell .sub{font-size:var(--fs-small);color:var(--text-muted)}
.matrix__cell .dim{color:var(--smoke);font-size:24px;line-height:1}
.matrix__cell strong{font-weight:600;color:var(--ivory)}
.matrix__head{padding:0 var(--cell-px,18px) 16px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-width:0}
.matrix__logo{height:76px;width:100%;object-fit:contain;object-position:left bottom}
.matrix__brand{font:600 var(--fs-label)/1.2 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--haze);white-space:nowrap}
/* row labels: Playfair sentence case, ivory, ONE line */
.matrix__rowhead{padding:var(--cell-py,14px) 16px var(--cell-py,14px) 0;border-top:1px solid var(--hairline);display:flex;align-items:center;gap:14px;
  font:500 21px/1.2 var(--font-display);color:var(--ivory);white-space:nowrap}
.matrix__rowhead .ic{--ic-size:26px;color:var(--gold-400)}
.matrix > .matrix__feature{position:absolute;z-index:0;top:-20px;bottom:-20px;right:0;width:var(--feature-w);border-radius:var(--r-lg);
  border:1.5px solid transparent;
  background:radial-gradient(120% 34% at 50% 0%,rgba(167,139,250,.42) 0%,transparent 100%) padding-box,
             linear-gradient(180deg,#3B2360 0%,#2B1947 40%,#221338 100%) padding-box,
             var(--grad-gold-border) border-box;
  box-shadow:0 0 90px -10px rgba(139,92,246,.6),0 40px 80px -40px rgba(0,0,0,.8)}
.matrix__cell.is-featured{color:var(--ivory);font-weight:500;border-top-color:rgba(240,208,156,.28);padding-left:28px;padding-right:24px}
.matrix__head.is-featured{padding-left:28px;padding-right:24px}
.matrix__cell.is-featured .sub{color:var(--violet-200)}

/* 15 ─ LISTS ────────────────────────────────────────────────────────────── */
/* Numbered list: gilded Playfair numerals in a left column, hairline between items */
.list-num{list-style:none;margin:0;padding:0;counter-reset:ln;display:flex;flex-direction:column}
.list-num > li{counter-increment:ln;position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px;padding:18px 0;border-top:1px solid var(--hairline);font-size:var(--fs-body);line-height:1.45;color:var(--text)}
.list-num > li:last-child{border-bottom:1px solid var(--hairline)}
.list-num > li::before{content:counter(ln,decimal-leading-zero);font:500 34px/1 var(--font-display);padding-top:2px;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
.list-num > li > *{grid-column:2}
.list-num__title{display:block;font:500 var(--fs-h4)/1.22 var(--font-display);color:var(--ivory);margin-bottom:6px}
.list-num--plain > li{border:none;padding:10px 0}
.list-num--plain > li:last-child{border:none}
/* Roman chapter numerals (agenda): I, II, III … in italic Playfair */
.list-num--roman > li::before{content:counter(ln,upper-roman);font-style:italic}

/* References: hanging indent, 18px, sources in italics where the brief italicises them */
.refs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;font-size:var(--fs-small);line-height:1.5;color:var(--text)}
.refs > li{padding-left:2.2em;text-indent:-2.2em;overflow-wrap:anywhere}
.refs i,.refs em{font-style:italic;color:var(--ivory)}

/* Checklist: gold check in a hairline ring */
.list-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--list-gap,18px)}
.list-check > li{position:relative;padding-left:52px;font-size:var(--fs-body);line-height:1.45;color:var(--text);min-height:34px}
.list-check > li::before{content:"";position:absolute;left:0;top:-1px;width:34px;height:34px;border-radius:50%;border:1px solid var(--hairline-strong);background:rgba(232,200,147,.07)}
.list-check > li::after{content:"";position:absolute;left:7px;top:6px;width:20px;height:20px;background:var(--gold-300);
  -webkit-mask:var(--check-mask) center/contain no-repeat;mask:var(--check-mask) center/contain no-repeat}
.list-check strong{color:var(--ivory)}

/* Sparkle bullet list */
.list-spark{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.list-spark > li{position:relative;padding-left:30px}
.list-spark > li::before{content:"";position:absolute;left:0;top:.45em;width:13px;height:13px;background:var(--gold-300);
  -webkit-mask:var(--sparkle-mask) center/contain no-repeat;mask:var(--sparkle-mask) center/contain no-repeat}

/* 16 ─ QUOTE (hanging gilded quotation mark) ────────────────────────────── */
/* <blockquote class="quote"><span class="quote__mark" aria-hidden="true">“</span>Text…</blockquote>
   The mark hangs in the LEFT margin — leave ≥ 90px of free space to the left of the block. */
.quote{position:relative;margin:0;font:italic 500 var(--fs-quote)/1.36 var(--font-display);color:var(--ivory);letter-spacing:-.005em;text-wrap:pretty}
.quote__mark{position:absolute;right:100%;top:-.08em;margin-right:.2em;font:500 3.4em/1 var(--font-display);font-style:normal;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));padding:0 .04em .1em 0}
.quote__cite{display:block;margin-top:22px;font:600 var(--fs-label)/1.25 var(--font-sans);font-style:normal;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--gold-300)}
.quote--sm{font-size:30px}

/* 17 ─ BUDGET METER (₱ progress bar) ────────────────────────────────────── */
/* <div class="meter" style="--value:10%"> head · track(fill) · scale </div> */
.meter{display:flex;flex-direction:column;gap:14px;min-width:0}
.meter__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.meter__label{font:600 var(--fs-body)/1.3 var(--font-sans);color:var(--ivory)}
.meter__value{font:500 30px/1 var(--font-display);color:var(--gold-300);white-space:nowrap}
.meter__value .peso{font-size:.62em;vertical-align:.16em}
.meter__note{font:500 var(--fs-caption)/1.3 var(--font-sans);color:var(--text-muted);margin-left:10px;letter-spacing:0}
.meter__track{position:relative;height:16px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--hairline)}
.meter__fill{position:absolute;left:0;top:0;bottom:0;width:var(--value,0%);min-width:16px;border-radius:inherit;background:var(--grad-gold-h);
  box-shadow:0 0 22px -2px rgba(232,200,147,.55)}
.meter__fill--violet{background:linear-gradient(90deg,#7C4DEB,#C4B5FD);box-shadow:0 0 22px -2px rgba(167,139,250,.6)}
.meter__tick{position:absolute;top:-6px;bottom:-6px;left:var(--at);width:1px;background:var(--hairline-strong)}
.meter__scale{display:flex;justify-content:space-between;font:500 var(--fs-caption)/1.3 var(--font-sans);color:var(--text-muted)}
.meter--lg .meter__track{height:24px}

/* 18 ─ RISK → SAFEGUARD PAIRS ───────────────────────────────────────────── */
/* <div class="pairs"><div class="pairs__head"><span>Risk</span><span></span><span>Safeguard</span></div>
     <div class="pair"><div class="pair__risk"><span class="ic ic--cost"></span>Cost overruns</div>
     <span class="pair__arrow"></span><p class="pair__safe">…</p></div>…</div> */
.pairs{--risk-w:440px;display:flex;flex-direction:column}
.pairs__head,.pair{display:grid;grid-template-columns:var(--risk-w) 88px minmax(0,1fr);align-items:center}
.pairs__head{padding-bottom:14px;font:600 var(--fs-label)/1.2 var(--font-sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--gold-300)}
.pairs__head > :last-child{color:var(--violet-300)}
.pair{padding:var(--pair-py,18px) 0;border-top:1px solid var(--hairline)}
.pair:last-child{border-bottom:1px solid var(--hairline)}
.pair__risk{display:flex;align-items:center;gap:18px;font:500 25px/1.22 var(--font-display);color:var(--ivory)}
.pair__risk .ic{--ic-size:34px;color:var(--gold-300)}
.pair__arrow{position:relative;height:1px;margin:0 22px 0 6px;background:linear-gradient(90deg,rgba(232,200,147,.25),var(--gold-300))}
.pair__arrow::after{content:"";position:absolute;right:0;top:-5px;width:10px;height:10px;border-top:1px solid var(--gold-300);border-right:1px solid var(--gold-300);transform:rotate(45deg)}
.pair__safe{font-size:var(--fs-body-sm);line-height:1.45;color:var(--text)}

/* 19 ─ MISC ─────────────────────────────────────────────────────────────── */
/* Pill / tag */
.tag{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 18px;border-radius:var(--r-pill);align-self:flex-start;
  font:600 15px/1 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300);
  border:1px solid var(--hairline-strong);background:rgba(232,200,147,.07);white-space:nowrap}
.tag--violet{color:var(--violet-200);border-color:var(--hairline-violet);background:rgba(139,92,246,.16)}
.tag--solid{color:#1A0F22;border:none;background:var(--grad-gold-flat);box-shadow:0 6px 20px -6px rgba(232,200,147,.5)}

/* Ornamental divider: hairline — sparkle — hairline (between blocks, NEVER under a title) */
.ornament{display:flex;align-items:center;gap:14px;color:var(--gold-300)}
.ornament::before,.ornament::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hairline-strong))}
.ornament::after{background:linear-gradient(90deg,var(--hairline-strong),transparent)}
.ornament > i{width:12px;height:12px;background:currentColor;-webkit-mask:var(--sparkle-mask) center/contain no-repeat;mask:var(--sparkle-mask) center/contain no-repeat}

.vsep{width:1px;align-self:stretch;background:var(--hairline-strong);flex:none}
.hr{height:1px;border:0;margin:0;background:var(--hairline)}

/* Meta block: caps label over a serif value (cover, closing, venue) */
.meta{display:flex;flex-direction:column;gap:10px}
.meta__label{font:600 var(--fs-label)/1 var(--font-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}
.meta__value{font:500 30px/1.15 var(--font-display);color:var(--ivory)}
.meta-row{display:flex;align-items:flex-end;gap:40px}

/* Logo crops — the supplied logo PNGs carry large transparent margins */
.logo-fit{object-fit:contain}
.crop-miq{object-view-box:inset(24% 9.9% 25.2% 8.3%)}
.crop-mandirigma{object-view-box:inset(26% 6.2% 26.4% 5.8%)}
.crop-queenuniverse{object-view-box:inset(25.6% 27.5% 27.9% 24.9%)}
.crop-masskareyna{object-view-box:inset(8.1% 27.4% 10.3% 27.7%)}
.crop-mew{object-view-box:inset(4.2% 5% 5.8% 5%)}
.crop-mew-emblem{object-view-box:inset(4.2% 5% 36% 5%)}  /* emblem only, no wordmark */

/* Speaker notes never render on the slide */
.slide .notes{display:none !important}

/* Print/PDF: undo the viewer's screen-fit transform (index.html scales slides with JS
   before print is triggered; without this every PDF page shows a shrunken slide). */
@media print{
  html,body{height:auto !important;overflow:visible !important;background:var(--night-950) !important}
  .slide{transform:none !important;position:relative !important;left:auto !important;top:auto !important;
    display:block !important;box-shadow:none !important;margin:0 !important}
}