/* ============================================================
   IKAN × GRAEBEL — Brand-true deck system
   Built from the official IKAN Brand Guidelines (Nov 2023):
   Midnight Green #134550 · Sky Blue #ACD8D5 · Coral #F1593F · Cream #FCFBF5
   Space Grotesk (display) · Lexend Deca (body) · Fraunces≈Calluna (highlight)
   ============================================================ */

@font-face{font-family:'Grotesk';src:url('assets/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:'Body';src:url('assets/fonts/LexendDeca-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Serif';src:url('assets/fonts/Fraunces-Italic.woff2') format('woff2');font-style:italic;font-weight:400 500;font-display:swap}
@font-face{font-family:'Mono';src:url('assets/fonts/SpaceMono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Mono';src:url('assets/fonts/SpaceMono-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --midnight:#134550;          /* primary dark */
  --midnight-2:#0e3a44;        /* layering */
  --midnight-3:#0a2c34;        /* deepest wash */
  --sky:#ACD8D5;               /* primary light */
  --sky-bright:#c8e6e3;
  --cream:#FCFBF5;
  --coral:#F1593F;
  --slate:#b3c9d4;          /* lifted for 4.5:1 small-text ink on the teal surfaces */
  --slate-deep:#56727e;
  --coral-lift:#ffb4a3;     /* light warm coral: small-label ink that passes 4.5:1 on midnight/teal */
  /* secondary / data-viz */
  --amber:#FFC40B; --red:#E02B3D; --magenta:#910C48; --teal:#15AA98; --lime:#BCC906; --green:#109648;
  --line-sky:rgba(172,216,213,.22);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- reveal frame ---------- */
body,.reveal-viewport{background:var(--midnight-3)} /* midnight letterbox: deck chrome reads on-brand at any aspect */
.reveal{font-family:'Body',system-ui,sans-serif}
.reveal .slides{text-align:left}
.reveal section{width:1280px;height:720px;padding:0;overflow:hidden;color:var(--cream);
  background:var(--midnight);position:relative}
.reveal section:focus{outline:none}
*{box-sizing:border-box}

/* ---------- slide backgrounds ---------- */
/* SOLID: midnight + brand pattern (the "slide 14" token) */
.s-solid{background:radial-gradient(120% 90% at 88% -10%, var(--midnight-2), var(--midnight) 60%)}
.s-solid .pattern{position:absolute;top:-90px;right:-120px;width:760px;height:760px;
  background:url('assets/brand/pattern-sky.svg') center/contain no-repeat;opacity:.16;pointer-events:none}
.s-solid.pat-full .pattern{opacity:.14;width:900px;height:900px;top:-40px;right:-80px}

/* BLEED: full image + midnight wash (the "slide 1" token) */
.s-bleed .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;filter:brightness(.9) saturate(1.05)}
.s-bleed .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(13,44,52,.95) 0%, rgba(13,44,52,.85) 38%, rgba(13,44,52,.42) 66%, rgba(13,44,52,.06) 100%),
             linear-gradient(0deg, rgba(10,40,48,.72) 0%, transparent 46%),
             linear-gradient(180deg, rgba(10,40,48,.5) 0%, transparent 15%)}
.s-bleed.scrim-bottom .scrim{background:linear-gradient(0deg, rgba(9,36,44,.97) 8%, rgba(11,42,50,.82) 42%, rgba(13,44,52,.34) 72%, transparent 100%),
             linear-gradient(180deg, rgba(10,40,48,.6) 0%, rgba(10,40,48,.18) 14%, transparent 26%)}
.s-bleed .pattern{position:absolute;top:-70px;right:-90px;width:520px;height:520px;z-index:1;
  background:url('assets/brand/pattern-sky.svg') center/contain no-repeat;opacity:.16;pointer-events:none}

/* PAPER: cream for dense data (used sparingly) */
.reveal section.s-paper{background:linear-gradient(165deg,#e7e3d8,#ded9cc);color:var(--midnight)}
.s-paper .pattern{position:absolute;top:-80px;right:-110px;width:560px;height:560px;
  background:url('assets/brand/pattern-midnight.svg') center/contain no-repeat;opacity:.22;
  filter:none;pointer-events:none}

/* ---------- content stage ---------- */
.stage{position:relative;z-index:3;height:100%;padding:62px 70px 56px;display:flex;flex-direction:column}
.stage.center{justify-content:center}
.stage.end{justify-content:flex-end}

/* ---------- top + bottom chrome ---------- */
.topbar{position:absolute;top:30px;left:70px;right:70px;z-index:4;display:flex;justify-content:space-between;align-items:center;
  font-family:'Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky)}
.topbar .r{color:var(--slate)}
.s-paper .topbar{color:var(--midnight)} .s-paper .topbar .r{color:var(--slate-deep)}
.footbar{position:absolute;bottom:26px;left:70px;right:70px;z-index:4;display:flex;justify-content:space-between;align-items:center;
  font-family:'Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.footbar .who{color:var(--sky)}
.footbar .who b{color:var(--coral-lift);font-weight:700}
.s-paper .footbar{color:var(--slate-deep)} .s-paper .footbar .who{color:var(--midnight)}

/* logo lockup */
.lock{display:flex;align-items:center;gap:15px}
.lock img{height:34px;display:block}
.lock .x{font-family:'Grotesk';font-weight:500;color:var(--slate);font-size:15px;margin:0 3px}
.lock .gr{font-family:'Grotesk';font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--cream);text-transform:none}
.s-paper .lock .gr{color:var(--midnight)}

/* ---------- typography ---------- */
.kicker{font-family:'Mono',monospace;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:22px;display:inline-flex;align-items:center;gap:12px}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--coral)}
.d1{font-family:'Grotesk';font-weight:500;color:var(--sky);letter-spacing:-.02em;line-height:.98;font-size:84px}
.d2{font-family:'Grotesk';font-weight:500;color:var(--sky);letter-spacing:-.02em;line-height:1.0;font-size:64px}
.d3{font-family:'Grotesk';font-weight:600;color:var(--sky);letter-spacing:-.018em;line-height:1.04;font-size:46px}
.d4{font-family:'Grotesk';font-weight:600;color:var(--sky);letter-spacing:-.01em;line-height:1.08;font-size:34px}
.s-paper .d1,.s-paper .d2,.s-paper .d3,.s-paper .d4{color:var(--midnight)}
.ital{font-family:'Serif';font-style:italic;font-weight:500;color:var(--coral)}
em.ital{font-style:italic}
.cw{color:var(--cream)} .s-paper .cw{color:var(--midnight)}
.lead{font-family:'Body';font-weight:300;font-size:21px;line-height:1.5;color:rgba(252,251,245,.86);max-width:54ch}
.s-paper .lead{color:#36505a}
.lead b{font-weight:600;color:#fff} .s-paper .lead b{color:var(--midnight)}
.eyebrow{font-family:'Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);font-weight:700;margin-bottom:14px}
.s-paper .eyebrow{color:var(--teal)}

/* ---------- reusable bits ---------- */
/* big metric */
.metric{font-family:'Grotesk';font-weight:600;letter-spacing:-.03em;line-height:.86;color:var(--cream)}
.metric .u{color:var(--coral)}
.metric.sky{color:var(--sky)}

/* brand block (rounded-rect, like the colour-palette page) — NOT a flat card */
.blocks{display:grid;gap:14px}
.block{background:rgba(172,216,213,.07);border:1px solid var(--line-sky);border-radius:18px;padding:24px 26px;position:relative;overflow:hidden}
.block .n{font-family:'Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);font-weight:700}
.block h4{font-family:'Grotesk';font-weight:600;font-size:20px;color:var(--cream);margin:10px 0 7px;letter-spacing:-.01em;line-height:1.1}
.block p{font-family:'Body';font-weight:300;font-size:15px;line-height:1.45;color:rgba(252,251,245,.74)}
.block p b{font-weight:600;color:#fff}
.block.accent{background:var(--coral);border-color:var(--coral)}
.block.accent .n,.block.accent h4,.block.accent p{color:#2a0d06}
.block.accent p b{color:#2a0d06}
.block.sky{background:var(--sky)}
.block.sky .n{color:var(--coral)} .block.sky h4{color:var(--midnight)} .block.sky p{color:#1c4651}
.block.sky p b{color:var(--midnight)}

/* team accountability chain (one owner -> the team) */
.teamchain{position:relative;display:flex;flex-direction:column;gap:17px;margin-left:6px}
.teamchain::before{content:"";position:absolute;left:6px;top:11px;bottom:11px;width:2px;background:linear-gradient(180deg,var(--coral),var(--sky))}
.teamchain .role{position:relative;padding-left:30px}
.teamchain .role .d{position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;background:var(--midnight);border:2px solid var(--sky)}
.teamchain .role.lead .d{background:var(--coral);border-color:var(--coral);box-shadow:0 0 0 4px rgba(241,89,63,.2)}
.teamchain .role h4{font-family:'Grotesk';font-weight:600;font-size:18px;color:var(--cream);margin:0 0 3px;letter-spacing:-.01em;line-height:1.1}
.teamchain .role.lead h4{font-size:20px}
.teamchain .role p{font-family:'Body';font-weight:300;font-size:14px;color:rgba(252,251,245,.74);line-height:1.4;max-width:42ch}
.teamchain .role p b{color:#fff;font-weight:600}

/* enforced-controls row (consistency) — accent lanes, no boxes */
.ctrls{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:8px}
.ctrl{position:relative;padding:3px 0 3px 22px}
.ctrl::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:3px;background:var(--coral)}
.ctrl.peak::before{background:var(--sky)}
.ctrl .lab{font-family:'Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:9px}
.ctrl.peak .lab{color:var(--sky)}
.ctrl h4{font-family:'Grotesk';font-weight:600;font-size:21px;color:var(--cream);margin:0 0 9px;letter-spacing:-.01em;line-height:1.14}
.ctrl p{font-family:'Body';font-weight:300;font-size:15px;color:rgba(252,251,245,.76);line-height:1.5}
.ctrl p b{color:#fff;font-weight:600}

/* chip row */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:'Mono',monospace;font-size:12px;letter-spacing:.02em;color:var(--sky);
  border:1px solid var(--line-sky);border-radius:999px;padding:7px 14px;background:rgba(172,216,213,.05)}
.chip b{color:#fff;font-weight:700}
.s-paper .chip{color:var(--midnight);border-color:rgba(19,69,80,.2);background:rgba(19,69,80,.04)}

/* journey rail */
.rail{position:relative;margin-top:8px}
.rail .track{position:absolute;left:0;right:calc(100% / var(--legs,6) - 7px);top:7px;height:2px;background:linear-gradient(90deg,var(--sky),var(--teal) 55%,var(--coral))}
.rail .legs{display:grid;position:relative}
.rail .leg{padding-right:18px}
.rail .legs .leg:last-child{padding-right:0}
.rail .leg .dot{width:14px;height:14px;border-radius:50%;background:var(--midnight);border:2px solid var(--sky);margin-bottom:16px}
.rail .leg.on .dot{background:var(--coral);border-color:var(--coral);box-shadow:0 0 0 5px rgba(241,89,63,.18)}
.rail .leg .code{font-family:'Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--coral);font-weight:700;margin-bottom:6px}
.rail .leg .nm{font-family:'Grotesk';font-weight:600;font-size:17px;color:var(--cream);line-height:1.1;margin-bottom:4px}
.rail .leg .ds{font-family:'Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--sky)}

/* vertical flow (agenda journey / live-scenario play) — bold, fills the column */
.journey{position:relative;display:flex;flex-direction:column;gap:15px;margin-left:6px}
.journey::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px;background:linear-gradient(180deg,var(--sky),var(--teal) 55%,var(--coral))}
.jleg{position:relative;padding-left:34px}
.jleg .d{position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--midnight);border:2px solid var(--sky)}
.jleg.on .d{background:var(--coral);border-color:var(--coral);box-shadow:0 0 0 4px rgba(241,89,63,.18)}
.jleg .jc{font-family:'Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.jleg .jn{font-family:'Grotesk';font-weight:600;font-size:19px;color:var(--cream);line-height:1.12;margin:2px 0}
.jleg .jo{font-family:'Body';font-weight:300;font-size:13.5px;color:rgba(252,251,245,.7);line-height:1.4}
.jleg .jo b{color:var(--sky);font-weight:600}

/* framed photo (inset) */
.frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line-sky)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame .tag{position:absolute;left:0;bottom:0;background:rgba(10,40,48,.82);color:var(--sky);
  font-family:'Mono',monospace;font-size:11px;letter-spacing:.08em;padding:7px 13px;border-top-right-radius:10px}

/* stat strip */
.stats{display:flex;gap:0;border-top:1px solid var(--line-sky)}
.stats .s{flex:1;padding:18px 18px 0;border-right:1px solid var(--line-sky)}
.stats .s:last-child{border-right:none}
.stats .s .v{font-family:'Grotesk';font-weight:600;font-size:38px;color:var(--sky);letter-spacing:-.02em;line-height:1.04;min-height:2.08em;display:flex;align-items:flex-start}
.stats .s .l{font-family:'Body';font-weight:300;font-size:13px;color:rgba(252,251,245,.7);margin-top:8px;line-height:1.35}
.stats .s.peak .v{color:var(--coral)}

/* matrix (market) — dark, cohesive with the deck (one treatment, no white/cream clash) */
.mtx{display:grid;grid-template-columns:.58fr 1.04fr 1.18fr 1.04fr;gap:0;border:1px solid rgba(172,216,213,.16);border-radius:16px;overflow:hidden;margin-top:10px}
.mtx .h{font-family:'Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);background:var(--midnight-3);padding:13px 18px;font-weight:700;border-bottom:2px solid var(--coral)}
.mtx .h.sol-h{color:#fff;background:#0d4f47}
.mtx .c{padding:12px 18px;border-top:1px solid rgba(172,216,213,.1);font-family:'Body';font-size:12.5px;line-height:1.42;color:rgba(252,251,245,.82);background:rgba(172,216,213,.035)}
.mtx .c b{color:#fff;font-weight:700}
/* city lane — coral accent + presence */
.mtx .city{font-family:'Grotesk';font-weight:600;font-size:19px;color:var(--sky);background:rgba(241,89,63,.08);position:relative;padding:12px 16px 12px 24px}
.mtx .city::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:4px;border-radius:0 3px 3px 0;background:var(--coral)}
.mtx .city small{display:block;font-family:'Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--slate);margin-top:7px;text-transform:none;font-weight:400;line-height:1.35}
/* risks as severity-badged rows */
.mtx .risks{display:flex;flex-direction:column;gap:7px}
.mtx .rk{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:12px;color:rgba(252,251,245,.82);line-height:1.32}
.mtx .rk i{font-style:normal;font-family:'Mono',monospace;font-weight:700;font-size:10px;color:#fff;background:var(--coral);width:19px;height:19px;border-radius:6px;display:grid;place-items:center;margin-top:1px}
.mtx .rk b{color:#fff;font-weight:700}
/* solution = THE answer column */
.mtx .sol{background:rgba(21,170,152,.12);position:relative;padding-left:32px}
.mtx .sol::before{content:"→";position:absolute;left:14px;top:15px;color:var(--teal);font-family:'Mono',monospace;font-weight:700;font-size:15px}
.mtx .sol b{color:var(--sky)}

/* cue (demo / film) */
.cue{display:inline-flex;align-items:center;gap:14px;font-family:'Body';font-weight:300;font-size:15px;color:rgba(252,251,245,.8)}
.cue .btn{font-family:'Grotesk';font-weight:600;font-size:14px;color:#2a0d06;background:var(--coral);border-radius:999px;padding:10px 18px;letter-spacing:.01em}

/* partner logos lockup (text fallback for Tira/Relocate/Harmony) */
.partners{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.partners .p{font-family:'Grotesk';font-weight:600;font-size:17px;letter-spacing:.04em;color:var(--sky);opacity:.92}
.partners .p small{display:block;font-family:'Mono';font-size:9px;letter-spacing:.12em;color:var(--slate);font-weight:400;text-transform:uppercase;margin-top:2px}

/* ---------- readability: frost the text blocks, keep photos sharp ---------- */
.s-bleed .block{background:rgba(9,36,44,.64);border-color:rgba(172,216,213,.28);
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1)}
.s-bleed .block.sky{background:var(--sky);backdrop-filter:none;-webkit-backdrop-filter:none}
.s-bleed .panel{background:rgba(9,36,44,.6);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(172,216,213,.22);border-radius:18px;padding:22px 26px}

/* ---------- case-study vertical timeline ---------- */
.vtl{display:flex;flex-direction:column;position:relative;margin-left:5px}
.vtl::before{content:"";position:absolute;left:6px;top:8px;bottom:12px;width:2px;background:linear-gradient(180deg,var(--sky),var(--coral))}
.vtl .ev{position:relative;padding:0 0 19px 28px}
.vtl .ev:last-child{padding-bottom:0}
.vtl .ev .d{position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:var(--midnight);border:2px solid var(--sky)}
.vtl .ev.hot .d{background:var(--coral);border-color:var(--coral);box-shadow:0 0 0 4px rgba(241,89,63,.2)}
.vtl .ev .t{font-family:'Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:2px}
.vtl .ev .x{font-family:'Body';font-weight:300;font-size:14.5px;line-height:1.38;color:rgba(252,251,245,.82)}
.vtl .ev .x b{color:#fff;font-weight:600}

/* outcome card (sky, opaque) */
.outcome{background:var(--sky);border-radius:16px;padding:20px 22px}
.outcome .k{font-family:'Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:8px}
.outcome .big{font-family:'Grotesk';font-weight:600;font-size:34px;letter-spacing:-.02em;color:var(--midnight);line-height:1.02}
.outcome .big .u{color:var(--coral);font-size:.6em}
.outcome p{font-family:'Body';font-weight:300;font-size:14px;line-height:1.45;color:#1c4651;margin-top:8px}
.outcome p b{color:var(--midnight);font-weight:600}

/* preventive-measure strip */
.prevent .k{font-family:'Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:10px}
.prevent ul{list-style:none;display:grid;gap:13px}
.prevent li{font-family:'Body';font-weight:300;font-size:14.5px;color:rgba(252,251,245,.85);padding-left:18px;position:relative;line-height:1.38}
.prevent li::before{content:"→";position:absolute;left:0;color:var(--coral);font-family:'Mono',monospace;font-weight:700}
.prevent li b{color:#fff;font-weight:600}

/* bar viz (savings scaling) */
.barviz{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.barviz .row{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:14px}
.barviz .lab{font-family:'Mono',monospace;font-size:11.5px;letter-spacing:.04em;color:var(--sky);text-align:right;line-height:1.2}
.barviz .lab small{display:block;color:var(--slate);font-size:10px}
.barviz .track{height:46px;border-radius:9px;background:rgba(172,216,213,.09);position:relative;overflow:hidden}
.barviz .fill{position:absolute;left:0;top:0;bottom:0;border-radius:9px;display:flex;align-items:center;padding:0 16px;font-family:'Grotesk';font-weight:600;font-size:18px}
.barviz .fill.sec{width:34%;background:var(--sky);color:#06222a}
.barviz .fill.pref{width:92%;background:linear-gradient(90deg,var(--coral),#f4795f);color:#2a0d06}

/* clean kpi row */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-sky);margin-top:4px}
.kpis .k{padding:16px 18px 0;border-right:1px solid var(--line-sky)}
.kpis .k:last-child{border-right:none}
.kpis .k .v{font-family:'Grotesk';font-weight:600;font-size:30px;color:var(--sky);letter-spacing:-.02em;line-height:1}
.kpis .k .l{font-family:'Body';font-weight:300;font-size:12.5px;color:rgba(252,251,245,.7);margin-top:7px;line-height:1.3}

/* mirror big quote */
.mq{font-family:'Serif';font-style:italic;font-weight:500;color:var(--sky);font-size:33px;line-height:1.24;letter-spacing:-.005em;max-width:24ch}
.mq .hl{color:var(--coral)}
.mq-attr{font-family:'Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:16px}
.mq-attr b{color:var(--sky);font-weight:700}

/* roadmap (innovation progression) */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;margin-top:4px}
.road::before{content:"";position:absolute;left:14px;right:calc(100% / var(--stops,3) - 14px);top:13px;height:2px;background:linear-gradient(90deg,var(--teal),var(--sky))}
.road .stop{position:relative;padding:0 20px 0 0}
.road .stop .d{width:28px;height:28px;border-radius:50%;background:var(--midnight);border:2px solid var(--sky);display:grid;place-items:center;font-family:'Mono',monospace;font-size:11px;color:var(--sky);font-weight:700;margin-bottom:16px;position:relative;z-index:2}
.road .stop.now .d{background:var(--teal);border-color:var(--teal);color:#fff}
.road .stop.next .d{background:var(--coral);border-color:var(--coral);color:#2a0d06}
.road .stop .st{font-family:'Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.road .stop.now .st{color:var(--teal)} .road .stop .st{color:var(--slate)}
.road .stop h4{font-family:'Grotesk';font-weight:600;font-size:20px;color:var(--cream);margin-bottom:7px;letter-spacing:-.01em}
.road .stop p{font-family:'Body';font-weight:300;font-size:14px;line-height:1.42;color:rgba(252,251,245,.74)}
.road .stop p b{color:#fff;font-weight:600}

/* credentials / accreditation strip (real logos on a light panel) */
.creds{background:var(--cream);border-radius:14px;padding:9px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}
.creds img{height:27px;width:auto;display:block;object-fit:contain}
.creds .tm2{font-family:'Grotesk';font-weight:700;font-size:15px;color:var(--midnight);letter-spacing:.03em;opacity:.5;text-align:center;line-height:1}
.creds .tm2 small{display:block;font-family:'Mono',monospace;font-size:8px;letter-spacing:.1em;color:var(--slate-deep);font-weight:400;text-transform:uppercase;margin-top:3px;opacity:.8}
.creds-cap{font-family:'Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);text-align:center;margin-top:10px}

/* star rating */
.stars{display:inline-flex;align-items:center;gap:2px;color:var(--coral);font-size:20px;line-height:1}

/* page / slide number */
.reveal .slide-number{position:fixed;background:transparent;color:var(--slate);
  font-family:'Mono',monospace;font-size:11px;letter-spacing:.16em;font-weight:400;
  right:auto;left:50%;transform:translateX(-50%);bottom:24px;padding:0;z-index:6}
.reveal .slide-number a{color:var(--slate)}

/* presenter notes pad */
#notepad{position:fixed;right:0;bottom:0;width:38vw;max-height:46vh;overflow:auto;background:rgba(7,28,33,.97);color:#e7efed;border-top-left-radius:14px;padding:18px 22px;font-family:'Body',sans-serif;font-size:15px;line-height:1.5;z-index:9999;transform:translateY(110%);transition:transform .35s var(--ease);border:1px solid rgba(172,216,213,.2)}
#notepad.on{transform:none}
#notepad h5{font-family:'Mono',monospace;color:#f1593f;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px}
#notepad b{color:#fff}
#notehint{position:fixed;right:13px;bottom:11px;z-index:9998;font-family:'Mono',monospace;font-size:11px;letter-spacing:.08em;color:#809dac;opacity:.5}
@media print{#notepad,#notehint{display:none!important}}

/* ============================================================
   CRAFT PASS — rendering · depth · atmosphere · motion
   Grounded in: impeccable · make-interfaces-feel-better ·
   high-end-visual-design · design-motion-principles.
   Goal: same one-format deck, materially more expensive + alive.
   ============================================================ */

/* ---------- rendering & micro-typography ---------- */
.reveal{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.d1,.d2,.d3,.d4{text-wrap:balance}
.lead,.block p,.mq,.road .stop p,.prevent li,.vtl .ev .x,.outcome p,.kpis .k .l,.stats .s .l{text-wrap:pretty}
/* tabular figures so every number sits on a fixed grid — no optical jitter */
.metric,.outcome .big,.stats .s .v,.kpis .k .v,.mtx .c,.barviz .fill,.mq,
.rail .leg .code,.vtl .ev .t,.cw{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* ---------- film grain: one cheap fixed layer per slide for physical depth ---------- */
.reveal section::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;opacity:.04;mix-blend-mode:overlay}
.reveal section.s-paper::before{opacity:.022;mix-blend-mode:multiply}
.reveal section.s-bleed::before{opacity:.024}
/* chrome + rail labels stay legible over the brighter zones of photos */
.s-bleed .topbar,.s-bleed .footbar{text-shadow:0 1px 4px rgba(5,20,24,.85),0 1px 13px rgba(5,20,24,.7)}
.s-bleed .rail .leg .nm,.s-bleed .rail .leg .ds,.s-bleed .rail .leg .code{text-shadow:0 1px 9px rgba(5,20,24,.92)}
.s-bleed .lead,.s-bleed .stage .eyebrow{text-shadow:0 1px 10px rgba(5,20,24,.55)}
.s-bleed .d1,.s-bleed .d2,.s-bleed .d3{text-shadow:0 2px 20px rgba(5,20,24,.62),0 1px 4px rgba(5,20,24,.55)}

/* ---------- cinematic vignette on the solid token (focuses the centre) ---------- */
.s-solid{box-shadow:inset 0 0 240px 36px rgba(6,22,26,.42),inset 0 -160px 220px -120px rgba(5,18,22,.6)}
.s-solid.pat-full{box-shadow:inset 0 0 260px 30px rgba(6,22,26,.34),inset 0 -150px 220px -120px rgba(5,18,22,.5)}

/* ---------- machined surfaces: inset top highlight + soft, diffused ambient (never harsh) ---------- */
.block{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 38px -24px rgba(0,0,0,.7)}
.s-bleed .block{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 46px -26px rgba(0,0,0,.85)}
.block.sky,.block.accent{box-shadow:0 22px 40px -22px rgba(8,30,34,.55)}
.panel{background:rgba(172,216,213,.11);border:1px solid rgba(172,216,213,.3);border-radius:18px;padding:22px 26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 40px -26px rgba(0,0,0,.66)}
.outcome{box-shadow:0 24px 46px -24px rgba(8,30,34,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.frame{box-shadow:0 28px 56px -28px rgba(0,0,0,.78)}
.frame img{outline:1px solid rgba(255,255,255,.09);outline-offset:-1px}
.creds{box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.mtx{box-shadow:0 22px 46px -26px rgba(8,30,34,.5)}

/* ---------- motion choreography (enhances an already-visible default) ----------
   Content renders fully without JS/animation; the .present class only adds a
   one-shot confident entrance as each slide arrives. Reduced-motion = instant. */
@keyframes riseIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes growX{from{transform:scaleX(0);opacity:.35}to{transform:scaleX(1);opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes dotIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: no-preference){
  /* base beat: top-level stage blocks rise in sequence */
  .reveal section.present .stage>*{animation:riseIn .6s var(--ease) both}
  .reveal section.present .stage>*:nth-child(1){animation-delay:.05s}
  .reveal section.present .stage>*:nth-child(2){animation-delay:.12s}
  .reveal section.present .stage>*:nth-child(3){animation-delay:.19s}
  .reveal section.present .stage>*:nth-child(4){animation-delay:.26s}
  .reveal section.present .stage>*:nth-child(5){animation-delay:.33s}
  .reveal section.present .stage>*:nth-child(n+6){animation-delay:.4s}
  /* hero headline lands a touch grander */
  .reveal section.present .d1{animation-duration:.82s}
  /* chrome just fades — never moves */
  .reveal section.present .topbar,.reveal section.present .footbar{animation:fadeIn .9s var(--ease) both;animation-delay:.04s}

  /* RAIL: track draws left→right, then dots/legs cascade */
  .reveal section.present .stage>.rail{animation:fadeIn .4s var(--ease) both}
  .reveal section.present .rail .track{animation:growX .8s var(--ease) both;animation-delay:.22s;transform-origin:left center}
  .reveal section.present .rail .legs .leg{animation:riseIn .5s var(--ease) both}
  .reveal section.present .rail .legs .leg:nth-child(1){animation-delay:.30s}
  .reveal section.present .rail .legs .leg:nth-child(2){animation-delay:.38s}
  .reveal section.present .rail .legs .leg:nth-child(3){animation-delay:.46s}
  .reveal section.present .rail .legs .leg:nth-child(4){animation-delay:.54s}
  .reveal section.present .rail .legs .leg:nth-child(5){animation-delay:.62s}
  .reveal section.present .rail .legs .leg:nth-child(6){animation-delay:.70s}
  .reveal section.present .rail .legs .leg:nth-child(7){animation-delay:.78s}

  /* ROADMAP: stops cascade with their connector */
  .reveal section.present .stage>.road{animation:fadeIn .4s var(--ease) both}
  .reveal section.present .road .stop{animation:riseIn .55s var(--ease) both}
  .reveal section.present .road .stop:nth-child(1){animation-delay:.26s}
  .reveal section.present .road .stop:nth-child(2){animation-delay:.40s}
  .reveal section.present .road .stop:nth-child(3){animation-delay:.54s}

  /* BLOCK GRIDS: tiles cascade rather than appearing as one slab */
  .reveal section.present .stage>.blocks{animation:none}
  .reveal section.present .stage>.blocks .block{animation:riseIn .55s var(--ease) both}
  .reveal section.present .stage>.blocks .block:nth-child(1){animation-delay:.20s}
  .reveal section.present .stage>.blocks .block:nth-child(2){animation-delay:.29s}
  .reveal section.present .stage>.blocks .block:nth-child(3){animation-delay:.38s}
  .reveal section.present .stage>.blocks .block:nth-child(4){animation-delay:.47s}

  /* VERTICAL TIMELINES (cases): events cascade down the spine */
  .reveal section.present .vtl .ev{animation:riseIn .5s var(--ease) both}
  .reveal section.present .vtl .ev:nth-child(1){animation-delay:.34s}
  .reveal section.present .vtl .ev:nth-child(2){animation-delay:.44s}
  .reveal section.present .vtl .ev:nth-child(3){animation-delay:.54s}
  .reveal section.present .vtl .ev:nth-child(4){animation-delay:.64s}
  .reveal section.present .vtl .ev:nth-child(5){animation-delay:.74s}

  /* big metrics land with a confident, subtle pop */
  .reveal section.present .metric{animation:popIn .7s var(--ease) both;animation-delay:.3s}
}

/* ---------- luminous halo behind a single hero number (the commercial climax) ---------- */
.metric.lumen{position:relative;isolation:isolate}
.metric.lumen::before{content:"";position:absolute;z-index:-1;left:-6%;top:50%;transform:translateY(-50%);
  width:78%;height:150%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(241,89,63,.26),rgba(241,89,63,.05) 60%,transparent 78%);
  filter:blur(20px)}

/* ---------- brand the reveal chrome (progress · controls · slide-number) ---------- */
.reveal .progress{height:3px;color:var(--coral);background:rgba(172,216,213,.12)}
.reveal .progress span{background:linear-gradient(90deg,var(--sky),var(--coral))}
.reveal .controls{color:var(--sky)}
.reveal .controls .navigate-left,.reveal .controls .navigate-right,
.reveal .controls .navigate-up,.reveal .controls .navigate-down{
  opacity:.55;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.reveal .controls button:hover{opacity:1}

/* close slide — Graebel's words paired with IKAN proof */
.qcard{background:rgba(172,216,213,.06);border:1px solid var(--line-sky);border-radius:14px;padding:17px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 30px -22px rgba(0,0,0,.6)}
.qcard .gs{font-family:'Serif';font-style:italic;font-weight:500;font-size:18px;color:var(--coral);line-height:1.18}
.qcard .gl{font-family:'Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);font-weight:700;margin:12px 0 7px;padding-top:11px;border-top:1px solid var(--line-sky)}
.qcard p{font-family:'Body';font-weight:300;font-size:13px;line-height:1.45;color:rgba(252,251,245,.82)}
.qcard p b{color:#fff;font-weight:600}

/* close — four of Dunlap's points, each paired with IKAN's proof */
.mlist{display:flex;flex-direction:column;gap:0;margin:13px 0 4px;border-top:1px solid var(--line-sky)}
.mrow{display:grid;grid-template-columns:.47fr .53fr;gap:30px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-sky)}
.mrow .mq2{font-family:'Serif';font-style:italic;font-weight:500;font-size:20px;line-height:1.26;color:var(--sky)}
.mrow .mq2 .hl{color:var(--coral)}
.mrow .ans{font-family:'Body';font-weight:300;font-size:14.5px;line-height:1.42;color:rgba(252,251,245,.84);position:relative;padding-left:25px}
.mrow .ans::before{content:"→";position:absolute;left:0;top:1px;color:var(--coral);font-family:'Mono',monospace;font-weight:700}
.mrow .ans b{color:#fff;font-weight:700}

/* local influence — light "examples" under the hero brief (not boxes) */
.lx{padding-left:15px;border-left:2px solid var(--coral)}
.lx .n{font-family:'Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:5px}
.lx p{font-family:'Body';font-weight:300;font-size:13.5px;line-height:1.42;color:rgba(252,251,245,.86)}
.lx p b{color:#fff;font-weight:600}
.s-bleed .lx p,.s-bleed .lx .n{text-shadow:0 1px 10px rgba(5,20,24,.8)}

/* brand-values band (IDC slide) — the values we hire, train & empower for */
.vals{margin-top:22px;max-width:60ch}
.vals .vh{font-family:'Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:12px}
.vals .vrow{font-family:'Serif';font-style:italic;font-weight:500;font-size:26px;color:var(--sky);line-height:1.2;display:flex;flex-wrap:wrap;align-items:baseline}
.vals .vrow i{font-style:italic}
.vals .vrow .sep{color:var(--coral);font-family:'Mono',monospace;font-style:normal;font-size:14px;margin:0 13px;opacity:.85;transform:translateY(-3px)}
.vals .vsub{font-family:'Mono',monospace;font-size:11px;letter-spacing:.03em;color:rgba(252,251,245,.62);margin-top:13px;line-height:1.55;max-width:56ch}
.s-bleed .vals .vrow,.s-bleed .vals .vh,.s-bleed .vals .vsub{text-shadow:0 1px 10px rgba(5,20,24,.72)}