/* ==========================================================================
   EO Ignite 2025: Podcast Series — microsite
   Built entirely on the EO Design System tokens in tokens.css.
   No colour, type step, spacing step, radius or shadow is defined here that
   is not either a token or a layout value carried over from the approved design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset and globals
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);color:var(--eo-base-blue);background:var(--eo-white);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:var(--eo-blue);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--eo-blue-dark)}
[data-on-dark] a{color:var(--eo-blue-light)}
[data-on-dark] a:hover{color:var(--eo-white)}
:focus-visible{outline:3px solid var(--eo-yellow);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Skip link — first focusable element on the page */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--eo-base-blue);color:var(--eo-white);padding:12px 18px;font-size:14px;font-weight:700;text-decoration:none}
.skip:focus{left:12px;top:12px}
.skip:focus-visible{color:var(--eo-white)}

/* Visually hidden but available to assistive technology */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   2. Grids
   -------------------------------------------------------------------------- */
[data-grid="rail"]{display:grid;grid-template-columns:minmax(0,1fr)}
[data-rail]{position:relative;border-left:0;padding-left:0;padding-bottom:0}
[data-rail] .node{display:none}

[data-grid="hero"],[data-grid="two"],[data-grid="three"],[data-grid="split"]{display:grid;grid-template-columns:minmax(0,1fr)}
[data-grid="cards"]{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
[data-grid="stats"]{display:grid;grid-template-columns:minmax(0,1fr)}
[data-grid="steps"]{display:grid;grid-template-columns:minmax(0,1fr)}
[data-grid="chain"]{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
[data-grid="gallery"]{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr))}

/* Stat and step grids pin to column counts that divide their item count, so no
   empty cell ever exposes the hairline background. */
@media (min-width:430px){[data-grid="stats"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:560px){[data-grid="steps"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:720px){[data-grid="stats"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:820px){[data-grid="three"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){
  [data-grid="two"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-grid="split"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (min-width:1024px){[data-grid="steps"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1040px){[data-grid="hero"]{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center}}
@media (min-width:1120px){[data-grid="stats"]{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* The "from the room to the record" thread. Decorative, desktop only. */
@media (min-width:980px){
  [data-grid="rail"]{grid-template-columns:206px minmax(0,1fr)}
  [data-thread="on"] [data-rail]{border-left:2px solid var(--eo-blue);padding-left:26px}
  [data-thread="on"] [data-rail] .node{display:block}
}

/* --------------------------------------------------------------------------
   3. Design-system components
   Reimplemented in CSS from components/core/{Badge,Tag,Button,IconButton}.jsx
   and components/feedback/Dialog.jsx in the design-system bundle. Values match
   the source exactly — do not restyle these; extend the design system instead.
   -------------------------------------------------------------------------- */

/* Badge */
.eo-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-pill);line-height:1.4}
.eo-badge--blue{background:var(--eo-blue);color:var(--eo-white)}
.eo-badge--pink{background:var(--eo-pink);color:var(--eo-white)}
.eo-badge--orange{background:var(--eo-orange);color:var(--eo-white)}
.eo-badge--yellow{background:var(--eo-yellow);color:var(--eo-base-blue)}
.eo-badge--green{background:var(--eo-green);color:var(--eo-white)}
.eo-badge--gray{background:var(--eo-gray);color:var(--eo-white)}
.eo-badge--dark{background:var(--eo-base-blue);color:var(--eo-white)}

/* Tag — soft accent pair only */
.eo-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:13px;font-weight:500;padding:5px 12px;border-radius:var(--radius-pill);line-height:1.4}
.eo-tag--blue{background:var(--eo-blue-light);color:var(--eo-blue-dark)}
.eo-tag--pink{background:var(--eo-pink-light);color:var(--eo-pink-dark)}
.eo-tag--orange{background:var(--eo-orange-light);color:var(--eo-orange-dark)}
.eo-tag--yellow{background:var(--eo-yellow-light);color:var(--eo-yellow-dark)}
.eo-tag--green{background:var(--eo-green-light);color:var(--eo-green-dark)}
.eo-tag--gray{background:var(--eo-gray-light);color:var(--eo-gray-dark)}

/* Button */
.eo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;flex:none;font-family:var(--font-sans);font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,color .15s;text-decoration:none}
.eo-btn--sm{height:32px;padding:0 14px;font-size:11px}
.eo-btn--md{height:40px;padding:0 20px;font-size:12px}
.eo-btn--lg{height:48px;padding:0 26px;font-size:13px}
.eo-btn--primary{background:var(--eo-blue);color:var(--eo-white)}
.eo-btn--primary:hover{background:var(--eo-base-blue);color:var(--eo-white)}
.eo-btn--secondary{background:transparent;color:var(--eo-blue);border-color:var(--eo-blue)}
.eo-btn--secondary:hover{background:color-mix(in srgb,var(--eo-blue) 10%,var(--eo-white));color:var(--eo-blue)}
.eo-btn[disabled]{cursor:not-allowed;opacity:.45}

/* IconButton */
.eo-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;cursor:pointer;transition:background .15s;flex:none;padding:0}
.eo-iconbtn--sm{width:32px;height:32px}
.eo-iconbtn--ghost{background:transparent;color:var(--eo-blue)}
.eo-iconbtn--ghost:hover{background:color-mix(in srgb,var(--eo-blue) 10%,var(--eo-white))}

/* Dialog — the design system's overlay div rendered as a native <dialog>, so
   focus trapping, Escape and background inerting come from the platform. The
   visual result is identical: same surface, radius, shadow, width and scrim. */
.eo-dialog{background:var(--eo-white);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);width:980px;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);overflow-y:auto;padding:28px;box-sizing:border-box;font-family:var(--font-sans);color:var(--text-body)}
.eo-dialog::backdrop{background:rgba(12,12,49,.55)}
.eo-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.eo-dialog__eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eo-blue);margin-bottom:6px}
.eo-dialog__title{margin:0;font-size:22px;font-weight:700;color:var(--text-body);line-height:1.25}
.eo-dialog__body{margin-top:12px;font-size:14px;line-height:1.55;color:var(--eo-gray-dark)}
.eo-dialog__body img{width:100%;height:auto;border-radius:var(--radius-md)}
.eo-dialog__caption{margin-top:14px;font-size:14px;line-height:1.55;color:var(--eo-gray-dark)}

/* --------------------------------------------------------------------------
   4. Layout primitives and type utilities
   -------------------------------------------------------------------------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,3vw,32px)}
.wrap--band{padding:clamp(36px,4vw,60px) clamp(20px,3vw,32px)}

.section{background:var(--eo-white);scroll-margin-top:56px}
.section--dark{background:var(--eo-base-blue);color:var(--eo-white)}
.section--ruled{border-top:1px solid var(--border-subtle)}

.rail-label{padding-top:clamp(52px,6vw,96px)}
.rail-body{padding:clamp(20px,2vw,28px) 0 clamp(52px,6vw,96px)}
.node{position:absolute;left:-7px;top:clamp(58px,6.4vw,104px);width:12px;height:12px;background:var(--eo-blue);border-radius:2px}

/* Caption / eyebrow steps — ALL CAPS is reserved for these and for button labels */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.eyebrow--sm{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.eyebrow--blue{color:var(--eo-blue)}
.eyebrow--blue-light{color:var(--eo-blue-light)}
.eyebrow--gray{color:var(--eo-gray)}

.h2{font-size:clamp(25px,2.9vw,38px);font-weight:700;line-height:1.14;letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5}
.body{font-size:16px;line-height:1.62}
.body--muted{color:var(--eo-gray-dark)}
.prose{display:flex;flex-direction:column;gap:16px;font-size:16px;line-height:1.62}
.note{font-size:14px;line-height:1.6}
.note--sm{font-size:13px;line-height:1.5;color:var(--eo-gray)}

.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-22{margin-bottom:22px}
.mb-24{margin-bottom:24px}
.mb-28{margin-bottom:28px}
.mb-32{margin-bottom:32px}
.mb-36{margin-bottom:36px}
.mb-40{margin-bottom:40px}
.mb-44{margin-bottom:44px}

.measure-52{max-width:52ch}
.measure-56{max-width:56ch}
.measure-60{max-width:60ch}
.measure-62{max-width:62ch}
.measure-64{max-width:64ch}
.measure-66{max-width:66ch}
.measure-70{max-width:70ch}
.measure-74{max-width:74ch}
.measure-76{max-width:76ch}
.measure-840{max-width:840px}

/* Accent rule — a short colour bar used to key panels and cards */
.rule{display:block;border-radius:2px;height:4px;width:34px}
.rule--44{width:44px}
.rule--blue{background:var(--eo-blue)}
.rule--pink{background:var(--eo-pink)}
.rule--orange{background:var(--eo-orange)}
.rule--yellow{background:var(--eo-yellow)}
.rule--green{background:var(--eo-green)}
.rule--gray{background:var(--eo-gray)}

/* Statement band */
.band{background:var(--eo-blue);color:var(--eo-white)}
.band__text{font-size:clamp(24px,3.2vw,42px);font-weight:700;line-height:1.14;letter-spacing:-.015em;max-width:20ch}
.band__text--wide{max-width:22ch}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.masthead{background:var(--eo-white);border-bottom:1px solid var(--border-subtle)}
.masthead__entry{background:var(--eo-base-blue);color:var(--eo-white)}
.masthead__entry-inner{max-width:1240px;margin:0 auto;padding:9px clamp(20px,3vw,32px);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.masthead__category{color:var(--eo-blue-light)}
.masthead__main{max-width:1240px;margin:0 auto;padding:18px clamp(20px,3vw,32px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.masthead__brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.masthead__logo{width:auto;height:38px}
.masthead__divider{width:1px;height:44px;background:var(--border-subtle)}
.masthead__event{display:flex;flex-direction:column;gap:2px}
.masthead__event-name{font-size:15px;font-weight:700;line-height:1.2}
.masthead__period{display:flex;flex-direction:column;gap:3px;text-align:right}
.masthead__period-value{font-size:14px;font-weight:700}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{background:var(--eo-base-blue);color:var(--eo-white)}
.hero__inner{max-width:1240px;margin:0 auto;padding:clamp(44px,6vw,84px) clamp(20px,3vw,32px) clamp(48px,6vw,88px)}
.hero__grid{gap:clamp(32px,3.5vw,56px)}
.hero__campaign{font-size:16px;font-weight:700;letter-spacing:.02em;color:var(--eo-white);margin-bottom:14px}
.hero__title{font-size:clamp(32px,4.2vw,56px);font-weight:700;line-height:1.06;letter-spacing:-.02em;margin-bottom:24px}
.hero__title span{color:var(--eo-blue-light)}
.hero__lead{font-weight:400;color:var(--eo-white);margin-bottom:18px}
.hero__sub{font-size:16px;line-height:1.55;color:var(--eo-blue-light)}
.hero__figure{margin:0}
.hero__frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:var(--shadow-raised)}
.hero__facade{all:unset;display:block;position:absolute;inset:0;cursor:pointer}
.hero__poster{width:100%;height:100%;object-fit:cover;opacity:.86}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,49,.10) 0%,rgba(12,12,49,.72) 100%)}
.hero__cue{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);display:flex;align-items:center;gap:16px}
.hero__play{flex:none;width:clamp(52px,5vw,64px);height:clamp(52px,5vw,64px);border-radius:50%;background:var(--eo-blue);display:flex;align-items:center;justify-content:center}
.hero__cue-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.hero__cue-title{font-size:clamp(15px,1.4vw,18px);font-weight:700;color:var(--eo-white);line-height:1.3}
.hero__embed{position:absolute;inset:0;width:100%;height:100%;border:0}
.hero__caption{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:13px;line-height:1.5;color:var(--eo-blue-light)}
.hero__evidence{display:inline-flex;flex-wrap:wrap;gap:8px}
.hero__evidence a{text-decoration:none}

/* --------------------------------------------------------------------------
   7. Sticky section navigation
   -------------------------------------------------------------------------- */
.subnav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle)}
.subnav__scroll{max-width:1240px;margin:0 auto;padding:0 clamp(12px,3vw,32px);overflow-x:auto;scrollbar-width:thin}
.subnav__list{display:flex;gap:2px;align-items:center;white-space:nowrap;min-width:max-content}
.subnav__link{display:block;padding:15px 14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--eo-gray);border-bottom:3px solid transparent;text-decoration:none}
.subnav__link:hover{color:var(--eo-blue)}
.subnav__link[aria-current="true"]{color:var(--eo-blue);border-bottom-color:var(--eo-blue)}

/* --------------------------------------------------------------------------
   8. Campaign at a glance
   -------------------------------------------------------------------------- */
.glance{background:var(--eo-white);border-bottom:1px solid var(--border-subtle)}
.glance__inner{max-width:1240px;margin:0 auto;padding:clamp(28px,3vw,44px) clamp(20px,3vw,32px)}
.glance__list{gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.glance__cell{background:var(--eo-white);padding:20px 18px}
.glance__term{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eo-gray);margin-bottom:8px}
.glance__value{font-size:clamp(26px,2.6vw,34px);font-weight:700;line-height:1;color:var(--eo-blue)}

/* --------------------------------------------------------------------------
   9. The idea
   -------------------------------------------------------------------------- */
.idea__image{width:100%;height:auto;border-radius:var(--radius-md)}
.idea__pull{margin-top:24px;border-left:3px solid var(--eo-pink);padding-left:20px}
.idea__pull p{font-size:clamp(18px,1.8vw,23px);font-weight:700;line-height:1.3;letter-spacing:-.01em}
.idea__line{font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.25;color:var(--eo-blue)}

/* --------------------------------------------------------------------------
   10. Participation
   -------------------------------------------------------------------------- */
.format{background:var(--eo-white);color:var(--eo-base-blue);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column}
.format__image{width:100%;height:190px;object-fit:cover}
.format__body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.format__title{font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.format__text{font-size:16px;line-height:1.6;color:var(--eo-gray-dark)}

/* --------------------------------------------------------------------------
   11. Studio build
   -------------------------------------------------------------------------- */
.room{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:clamp(18px,2vw,26px)}
/* Indented so the rotated 2.7 m label sits inside the card padding */
.room__plan{position:relative;margin-left:42px;border:2px solid var(--eo-blue);border-radius:var(--radius-sm);aspect-ratio:5/2.7;background:color-mix(in srgb,var(--eo-blue) 5%,var(--eo-white));display:flex;align-items:center;justify-content:center}
.room__area{font-size:clamp(20px,2.4vw,30px);font-weight:700;color:var(--eo-blue);line-height:1.2;text-align:center}
.room__area sup{font-size:.55em}
.room__dim{position:absolute;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eo-gray)}
.room__dim--w{left:0;right:0;bottom:-26px;text-align:center}
.room__dim--h{top:50%;left:-38px;transform:translateY(-50%) rotate(-90deg)}
.room__facts{margin-top:44px;display:flex;flex-direction:column;gap:12px}
.room__fact{display:flex;gap:14px;align-items:baseline;font-size:16px;line-height:1.5}
.room__fact dt{flex:none;width:98px;font-weight:700;color:var(--eo-blue)}
.room__fact dd{margin:0}

.timelapse{margin:0;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.timelapse video{display:block;width:100%;height:auto;background:var(--eo-base-blue)}
.timelapse figcaption{padding:18px 20px}
.timelapse__title{display:block;font-size:16px;font-weight:700;line-height:1.35;margin-bottom:6px}
.timelapse__text{display:block;font-size:14px;line-height:1.5;color:var(--eo-gray-dark)}

.shot{all:unset;display:block;cursor:pointer;border-radius:var(--radius-sm);overflow:hidden;width:100%}
.shot:hover{opacity:.86}
.shot img{width:100%;height:104px;object-fit:cover;border-radius:var(--radius-sm)}

/* --------------------------------------------------------------------------
   12. Content system
   -------------------------------------------------------------------------- */
.steps{gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.step{background:var(--eo-white);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.step__num{font-size:13px;font-weight:700;color:var(--eo-blue);letter-spacing:.08em}
.step__title{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.step__text{font-size:16px;line-height:1.55;color:var(--eo-gray-dark)}

/* --------------------------------------------------------------------------
   13. Episodes
   -------------------------------------------------------------------------- */
.topics{display:flex;flex-wrap:wrap;gap:8px}

.episode{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:24px;display:flex;flex-direction:column;gap:12px}
.episode__meta{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eo-gray)}
.dot{width:8px;height:8px;border-radius:2px;flex:none}
.dot--blue{background:var(--eo-blue)}
.dot--pink{background:var(--eo-pink)}
.dot--orange{background:var(--eo-orange)}
.dot--yellow{background:var(--eo-yellow)}
.dot--green{background:var(--eo-green)}
.dot--gray{background:var(--eo-gray)}
.episode__title{font-size:17px;font-weight:700;line-height:1.32;letter-spacing:-.005em}
.episode__summary{font-size:16px;line-height:1.55;color:var(--eo-gray-dark);flex:1}
.link-caps{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

.index{margin-top:26px;border-top:1px solid var(--border-subtle);padding-top:26px}
.index[hidden]{display:none}
.index__list{gap:2px 40px}
.index__item{display:flex;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border-subtle)}
.index__num{flex:none;width:26px;font-size:12px;font-weight:700;color:var(--eo-blue)}
.index__title{font-size:15px;line-height:1.45;flex:1}
.index__duration{flex:none;font-size:12px;font-weight:700;color:var(--eo-gray)}

/* --------------------------------------------------------------------------
   14. Distribution
   -------------------------------------------------------------------------- */
.formats{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.14);border-radius:var(--radius-md);overflow:hidden}
.formats__row{background:var(--eo-base-blue);padding:15px 18px;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:16px;line-height:1.45}
/* Status is never colour-only: the word "Confirmed" carries the meaning. */
.formats__status{flex:none;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--eo-green-light)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;padding:9px 15px;border-radius:var(--radius-pill);font-size:14px;font-weight:700;line-height:1.4}
.chip--link{border:1px solid var(--eo-blue-light);text-decoration:none;color:var(--eo-white)}
.chip--link:hover{background:var(--eo-blue);border-color:var(--eo-blue);color:var(--eo-white)}
.chip--static{border:1px solid rgba(255,255,255,.28)}

/* --------------------------------------------------------------------------
   15. Impact
   -------------------------------------------------------------------------- */
.objective{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:18px}
.objective__title{font-size:clamp(19px,1.8vw,24px);font-weight:700;line-height:1.25}
.evidence-list{display:flex;flex-direction:column;gap:9px;font-size:16px;line-height:1.5}
.evidence-list li{display:flex;gap:12px}
.bullet{flex:none;width:6px;height:6px;border-radius:50%;margin-top:8px}
.bullet--blue{background:var(--eo-blue)}
.bullet--green{background:var(--eo-green)}

/* --------------------------------------------------------------------------
   16. Results
   -------------------------------------------------------------------------- */
.figure-card{border-radius:var(--radius-md);padding:clamp(24px,2.6vw,36px);color:var(--eo-white)}
.figure-card--blue{background:var(--eo-blue)}
.figure-card--dark{background:var(--eo-base-blue)}
.figure-card__label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eo-blue-light);margin-bottom:12px}
.figure-card__value{font-size:clamp(42px,5.6vw,72px);font-weight:700;line-height:1;letter-spacing:-.02em}

/* --------------------------------------------------------------------------
   17. Participant voices
   -------------------------------------------------------------------------- */
.voice{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:24px;display:flex;flex-direction:column;gap:12px}
.voice__name{font-size:16px;font-weight:700;letter-spacing:.02em}
.voice__text{font-size:16px;line-height:1.55;color:var(--eo-gray-dark);flex:1}

.panel-dark{background:var(--eo-base-blue);color:var(--eo-white);border-radius:var(--radius-md);padding:clamp(24px,2.6vw,36px)}
.panel-dark__title{font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.2;letter-spacing:-.01em;max-width:26ch;margin-bottom:24px}
.recommend{border-top:2px solid var(--eo-blue);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.recommend p:first-child{font-size:16px;line-height:1.55}
.recommend__by{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--eo-blue-light)}

/* --------------------------------------------------------------------------
   18. Event to library
   -------------------------------------------------------------------------- */
.stage{border-top:3px solid var(--eo-blue);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.stage__title{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--eo-blue-light)}
.stage__text{font-size:16px;line-height:1.55}
.stage--future{border-top-color:var(--eo-yellow)}
.stage--future .stage__title{color:var(--eo-yellow)}

/* --------------------------------------------------------------------------
   19. Supporting evidence
   -------------------------------------------------------------------------- */
.evidence{display:flex;flex-direction:column;gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.evidence li{background:var(--eo-white)}
.evidence__link{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:clamp(18px,2vw,24px);text-decoration:none;color:inherit}
.evidence__link:hover{background:color-mix(in srgb,var(--eo-blue) 5%,var(--eo-white));color:inherit}
.evidence__text{display:flex;flex-direction:column;gap:6px;min-width:0}
.evidence__title{font-size:clamp(17px,1.7vw,21px);font-weight:700;line-height:1.3}
.evidence__desc{font-size:14px;line-height:1.5;color:var(--eo-gray-dark)}
.evidence__icon{flex:none;color:var(--eo-blue)}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.footer{background:var(--eo-base-blue);color:var(--eo-white)}
.footer__inner{max-width:1240px;margin:0 auto;padding:clamp(40px,4.5vw,64px) clamp(20px,3vw,32px)}
/* The supplied logo has no reversed artwork, so it sits on a white plate
   rather than being recoloured. */
.footer__plate{display:inline-flex;background:var(--eo-white);border-radius:var(--radius-md);padding:16px 22px;margin-bottom:18px}
.footer__logo{width:auto;height:40px}
.footer__meta{display:flex;flex-direction:column;gap:18px}
.footer__label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eo-blue-light);margin-bottom:6px}
.footer__value{font-size:16px;line-height:1.4}
.footer__value--strong{font-weight:700}
.footer__legal{margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;line-height:1.6;color:var(--eo-blue-light)}
