/* Scoped mobile-first scene; desktop composition follows container data-layout. */
.journey *, .journey *::before, .journey *::after { box-sizing:border-box; }
.journey [hidden] { display:none !important; }
.journey button, .journey input, .journey summary { font:inherit; }
.journey button { cursor:pointer; }
.journey button:focus-visible, .journey input:focus-visible, .journey summary:focus-visible { outline:3px solid #327f78; outline-offset:4px; }
.journey:focus-visible { outline:3px solid #327f78; outline-offset:5px; }
.journey__landscapes { position:absolute; inset:-2%; transform:scale(1.04); transform-origin:center; will-change:transform; pointer-events:none; }
.journey__canvas, .journey__fallback { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.journey__axis span { position:absolute; top:.2rem; transform:translateX(-50%); }
.journey__axis span::before { content:''; position:absolute; height:5px; border-left:1px solid #648a96; top:-.4rem; left:50%; }
.journey__start::before { content:'▶'; display:inline-block; margin-right:.65rem; font-size:.7em; }
.journey__start:hover { background:#fff; box-shadow:0 8px 30px #315c6933; }
.journey__phase-label { font-size:.61rem; text-transform:uppercase; letter-spacing:.13em; color:var(--journey-muted); margin:0 0 .2rem; }
.journey .journey__phase-name { font-size:1.05rem; letter-spacing:-.015em; margin:0 0 .3rem; line-height:1.3; color:var(--journey-green); }
.journey__narration { font-size:.82rem; line-height:1.5; margin:0; color:var(--journey-muted); }
.journey__buttons { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.journey__buttons button { display:grid; place-items:center; flex-shrink:0; border:1px solid #d6e3dd; border-radius:50%; background:#fff; color:#254c5c; min-height:44px; min-width:44px; padding:.4rem; font-size:1.2rem; }
.journey__buttons .journey__next { border-radius:.6rem; font-size:.78rem; padding:.65rem; }
.journey__month { margin-left:auto; color:#345766; font-size:.74rem; font-variant-numeric:tabular-nums; max-width:100%; }
.journey__slider-label { display:block; margin:.35rem 0 .25rem; }
.journey__slider-title { display:block; font-size:.65rem; color:var(--journey-muted); }
.journey__phases { border-top:1px solid #dce7e0; }
.journey__phase { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:.1rem .4rem; text-align:left; border:1px solid #d8e5dc; border-radius:.6rem; padding:.6rem; min-height:58px; background:#ffffff90; color:#385a60; font-size:.7rem!important; line-height:1.3; }
.journey__phase[aria-current="true"] { border-color:#3c9278; background:#e1efdf; }
.journey__phase-number { font-variant-numeric:tabular-nums; color:#66827b; font-size:.65rem; grid-row:span 2; }
.journey__phase-title { font-weight:600; overflow-wrap:anywhere; }
.journey__disclaimer, .journey__noscript { font-size:.59rem; line-height:1.5; color:#657b81; margin:.8rem 0 0; }
.journey[data-layout="landscape"] .journey__landscapes img { object-position:center; }
.journey[data-layout="landscape"] .journey__chapter { min-height:6.5rem; }
.journey[data-layout="landscape"] .journey__controls { padding-top:.2rem; }
.journey[data-layout="landscape"] .journey__phases, .journey[data-layout="landscape"] .journey__legend, .journey[data-layout="landscape"] .journey__disclaimer { grid-column:1/-1; }
.journey[data-layout="landscape"] .journey__phase-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
.journey[data-layout="landscape"] .journey__axis { left:5.5%; right:5.5%; }
.journey[data-layout="landscape"] .journey__popup { max-width:45%; }
.journey[data-reduced="true"] .journey__start { display:none; }
.journey__title, .journey__intro, .journey__narration, .journey__month, .journey__disclaimer { overflow-wrap:anywhere; }
.journey { --journey-ink:#173b4c; --journey-muted:#526e7a; --journey-green:#2c775c; box-sizing:border-box; position:relative; min-width:0; width:100%; margin:0; color:var(--journey-ink); background:#e6f0f6; border:0; border-radius:1.5rem; box-shadow:0 25px 75px -35px #326a8b50; isolation:isolate; font-family:inherit; font-size:16px; line-height:1.5; }
.journey__header { padding:1.4rem 1.2rem 1rem; position:absolute; z-index:3; background:linear-gradient(180deg,#eaf5fcf5,#eff7fbe6 70%,#eff7fb00); border-radius:1.5rem 1.5rem 0 0; top:0; left:0; right:0; pointer-events:none; }
.journey .journey__title { font-size:clamp(1.45rem,2.3vw,2.45rem); line-height:1.12; letter-spacing:-.035em; max-width:30ch; margin:0 0 .55rem; color:#0c203d; font-weight:750; }
.journey__eyebrow { font-size:.62rem; letter-spacing:.14em; font-weight:700; color:#6187a7; margin:0 0 .5rem; }
.journey__intro { font-size:.82rem; line-height:1.5; max-width:48ch; margin:0; color:#426281; }
.journey__scene { position:relative; height:clamp(520px,125cqi,560px); overflow:hidden; background:#deedf0; border-radius:1.5rem 1.5rem 0 0; }
.journey__landscape { position:absolute; inset:0; }
.journey__landscapes img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:78% 50%; max-width:none; }
.journey__invitation { position:absolute; inset:1rem 1rem auto; z-index:4; display:flex; justify-content:center; top:auto; bottom:1.8rem; left:1rem; right:1rem; }
.journey__start { border:1px solid #ffffffdf; border-radius:1rem; padding:.8rem 1rem; min-height:48px; max-width:28rem; background:#f7fcfff0; backdrop-filter:blur(8px); box-shadow:0 5px 30px #163b5724; color:#14384f; font-weight:600!important; font-size:.88rem!important; line-height:1.45; text-align:center; }
.journey__axis { position:absolute; bottom:3%; left:7.5%; right:7.5%; height:1.2rem; border-top:1px solid #648a9690; color:#173956; font-size:.68rem; font-variant-numeric:tabular-nums; border-color:#709ab9; }
.journey__panel { padding:1rem 1.2rem; background:linear-gradient(145deg,#edf6fb,#e6f2f8); border-radius:0 0 1.5rem 1.5rem; }
.journey__chapter { min-height:5.5rem; padding:.2rem 0 .8rem; }
.journey__chapters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; padding:.3rem 1.2rem 1rem; background:linear-gradient(#e7f2f8,#edf6fb); }
.journey__chapter-overview { border-top:2px solid var(--chapter-color); padding-top:.65rem; min-width:0; }
.journey__chapter-overview strong { color:var(--chapter-color); font-size:.68rem; letter-spacing:.015em; display:block; overflow-wrap:anywhere; }
.journey__chapter-period { color:var(--chapter-color); display:block; font-size:.65rem; }
.journey__chapter-overview p { font-size:.66rem; color:#395a76; line-height:1.4; margin:.45rem 0 0; overflow-wrap:anywhere; }
.journey__popups { position:absolute; z-index:3; top:44%; left:.9rem; right:.9rem; display:flex; justify-content:center; gap:.6rem; pointer-events:none; }
.journey__popup { margin:0; padding:.65rem .9rem; max-width:100%; flex:0 1 auto; background:#f5fbfff0; backdrop-filter:blur(9px); border:1px solid #ffffffc0; border-radius:1rem; color:#142e4f; font-size:.8rem; font-weight:600; line-height:1.4; box-shadow:0 5px 28px #17365620,inset 0 1px #fff; overflow-wrap:anywhere; }
.journey__popup--milestone { color:#174b45; border-color:#ffefba; }
.journey__popup--milestone::before { content:'✦'; color:#dba33b; font-size:1.2em; margin-right:.45rem; }
.journey__buttons [data-action="play"] { background:#122c46; color:#fff; border-color:#122c46; }
.journey__slider { width:100%; min-height:44px; padding:0; margin:0; accent-color:#3c91ed; cursor:pointer; background:transparent; }
.journey__legend { display:flex; flex-wrap:wrap; gap:.4rem .85rem; list-style:none; margin:.7rem 0 0; padding:.7rem .75rem; border:1px solid #ffffffdd; border-radius:.9rem; background:#f7fcffb8; box-shadow:0 3px 15px #48768b06; }
.journey__swatch { width:1rem; height:4px; border-radius:3px; flex-shrink:0; box-shadow:0 0 8px currentColor; }
.journey[data-layout="landscape"] .journey__scene { height:clamp(500px,58cqi,620px); aspect-ratio:auto; min-height:0; }
.journey[data-layout="landscape"] .journey__chapters { position:relative; padding:1rem 1.75rem .75rem; gap:1.25rem; }
.journey[data-layout="landscape"] .journey__chapter-overview { background:linear-gradient(#edf6fb55,transparent); }
.journey[data-layout="landscape"] .journey__chapter-overview strong { font-size:.78rem; }
.journey[data-layout="landscape"] .journey__chapter-period { font-size:.72rem; }
.journey[data-layout="landscape"] .journey__chapter-overview p { font-size:.72rem; }
.journey[data-layout="landscape"] .journey__popups { top:58%; left:1.5rem; right:1.5rem; }
.journey[data-layout="landscape"] .journey__panel { padding:.65rem 1.75rem 1.25rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:1.75rem; background:linear-gradient(145deg,#edf6fb,#e6f2f8); }
.journey[data-layout="landscape"] .journey__legend { justify-content:flex-start; gap:.5rem 1.3rem; }
.journey[data-layout="portrait"] .journey__header { padding:1.3rem 1.1rem 2rem; }
.journey[data-layout="landscape"] .journey__header { padding:1.6rem 1.9rem; width:83%; background:none; }
.journey__veil { position:absolute; inset:0; background:linear-gradient(180deg,#e9f4ffcf, #eaf5fc80 25%, transparent 47%,#b2d0da08 75%,#e7f2f8f5 100%); pointer-events:none; }
.journey__legend li { display:flex; gap:.35rem; align-items:center; color:#163c5c; font-size:.7rem; line-height:1.4; max-width:100%; min-width:0; }
.journey__legend li span:last-child { min-width:0; overflow-wrap:anywhere; }
.journey__disclaimer { color:#5b7488; font-size:.64rem; }
.journey[data-layout="portrait"] .journey__chapters { grid-template-columns:repeat(auto-fit,minmax(min(100%,5rem),1fr)); }
.journey .journey__phase-name, .journey__phase-label { overflow-wrap:anywhere; }
.journey__phases summary { display:list-item; padding:.65rem .15rem; min-height:44px; color:#355c56; cursor:pointer; font-size:.76rem; font-weight:600; overflow-wrap:anywhere; }
.journey__phase-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr)); gap:.45rem; margin:0 0 .75rem; }
.journey__phase-range { font-size:.65rem; color:#597578; overflow-wrap:anywhere; }
.journey__popups, .journey[data-layout="landscape"] .journey__popups { inset:0; display:block; }
.journey__popup, .journey[data-layout="landscape"] .journey__popup { position:absolute; width:max-content; max-width:calc(100% - 2rem); font-size:.85rem; }
.journey[data-layout="portrait"] .journey__landscapes { inset:14% -2% -2%; }
.journey[data-layout="portrait"] .journey__landscapes img { object-position:78% center; }

@media (prefers-reduced-motion:reduce) { .journey *, .journey *::before, .journey *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Endpoint labels remain HTML so locale and browser text sizing work. */
.journey__curve-labels { position:absolute; inset:0; pointer-events:none; z-index:2; }
.journey__curve-label { position:absolute; width:max-content; padding:.3rem .55rem; border:1px solid var(--curve-color); border-left:3px solid var(--curve-color); border-radius:.55rem; background:color-mix(in srgb,var(--curve-color) 13%,#fff 87%); color:#17354b; box-shadow:0 3px 12px #17354b16; font-size:.72rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.journey__curve-connector { position:absolute; height:1px; opacity:.7; transform-origin:0 50%; }
.journey[data-layout="landscape"] .journey__curve-label { font-size:.82rem; padding:.35rem .65rem; }
.journey[data-layout="landscape"] .journey__phase-label, .journey[data-layout="landscape"] .journey__phase-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.journey[data-layout="landscape"] .journey__chapter { min-height:0; align-self:center; }

.journey__trail-captions { position:absolute; inset:0; pointer-events:none; z-index:2; }
.journey__trail-caption { position:absolute; width:max-content; padding:.12rem .4rem; border-radius:1rem; color:#246343; background:#f0fff0d9; border:1px solid #b3dfbe99; font-size:.62rem; line-height:1.3; font-weight:600; letter-spacing:.015em; }
.journey__trail-caption--gold { color:#12394f; background:linear-gradient(120deg,#f5fdfffa,#cceffcf5); border-color:#eafaff; box-shadow:0 0 12px #9bddff66,inset 0 1px #fff; font-weight:750; }

.journey__curve-label-title { display:block; font-size:.63rem; font-weight:500; line-height:1.2; opacity:.82; }
.journey__curve-label-value { display:block; margin-top:.12rem; font-size:.95rem; font-weight:750; line-height:1.15; font-variant-numeric:tabular-nums; }
.journey[data-layout="landscape"] .journey__curve-label-value { font-size:1.05rem; }

.journey__chapter-overview { transition:background-color .3s ease; padding:.65rem .5rem; border-radius:0 0 .6rem .6rem; }
.journey__chapter-overview[data-current="true"] { background:color-mix(in srgb,var(--chapter-color) 11%,transparent); box-shadow:inset 0 2px var(--chapter-color); }

.journey .journey__popup--breakthrough {
  color:#f1ffd5; background:#173824ed; border:1px solid #c0ff66;
  font-size:clamp(.95rem,1.4vw,1.2rem); font-weight:750; text-align:center;
  box-shadow:0 0 18px #b7ff3266,0 0 48px #b7ff3233,inset 0 1px #efffc480;
  text-shadow:0 0 12px #ccff8b55;
}
.journey__popup--breakthrough::before {color:#c0ff66;}

/* Stage boundaries share the same horizontal coordinates as the chart axis. */
.journey .journey__chapters { padding-left:7.5%; padding-right:7.5%; column-gap:0; }
.journey[data-layout="landscape"] .journey__chapters { padding-left:5.5%; padding-right:5.5%; column-gap:0; }
.journey[data-layout="portrait"] .journey__chapter-overview { padding-left:.25rem; padding-right:.25rem; }
.journey[data-layout="portrait"] .journey__chapter-overview strong { font-size:.6rem; letter-spacing:0; }

/* A stable award card: readable throughout the configurable hold, no flashing. */
.journey .journey__popup--breakthrough {
  padding:1rem 1.1rem; border:2px solid #f9dc85; border-radius:1.25rem;
  color:#fff9dd; background:linear-gradient(135deg,#183d32fa,#102a32fa);
  font-size:clamp(1.1rem,2vw,1.65rem); line-height:1.2; font-weight:800;
  box-shadow:0 0 0 4px #ffe6a21c,0 0 30px #baff4270,0 10px 35px #10291e55,inset 0 1px #fff8cb80;
  text-shadow:0 1px 2px #0008;
}
.journey__popup--breakthrough::before {
  content:'🏆'; display:block; margin:0 0 .35rem; font-size:2.4rem; line-height:1.1;
  filter:drop-shadow(0 0 10px #ffdd7390);
}

/* Frosted metric cards and matching medallions, inspired by the supplied artwork. */
.journey .journey__curve-label {
  display:flex; align-items:center; gap:0.455rem; padding:0.455rem 0.56rem;
  border:1px solid #ffffffec; border-left-width:1px; border-radius:0.77rem;
  background:linear-gradient(120deg,color-mix(in srgb,var(--curve-color) 24%,#ffffffdf),#ffffffba);
  backdrop-filter:blur(14px) saturate(1.25); -webkit-backdrop-filter:blur(14px) saturate(1.25);
  color:color-mix(in srgb,var(--curve-color) 48%,#092f22);
  box-shadow:0 0 17px color-mix(in srgb,var(--curve-color) 45%,transparent),0 5px 19px #1939501c,inset 0 1px 2px #fff;
}
.journey__metric-icon {
  display:grid; place-items:center; flex:0 0 1.82rem; width:1.82rem; height:1.82rem;
  border-radius:50%; border:1px solid #ffffffc9;
  background:linear-gradient(145deg,#ffffff77,color-mix(in srgb,var(--curve-color) 30%,transparent));
  color:color-mix(in srgb,var(--curve-color) 78%,#10342a);
  box-shadow:inset 0 1px 2px #fff9,0 1px 3px #13334a0c;
}
.journey__metric-icon svg {width:1.05rem; height:1.12rem;}
.journey__metric-copy {display:block; min-width:0;}
.journey .journey__curve-label-title {font-size:0.49rem; color:#36516a; opacity:1; font-weight:500; line-height:1.2;}
.journey .journey__curve-label-value {font-size:0.84rem; margin-top:0.14rem; font-weight:800; line-height:1.1;}
.journey[data-layout="landscape"] .journey__curve-label {gap:0.56rem; padding:0.56rem 0.7rem; border-radius:0.91rem;}
.journey[data-layout="landscape"] .journey__metric-icon {flex-basis:2.1rem;width:2.1rem;height:2.1rem;}
.journey[data-layout="landscape"] .journey__curve-label-title {font-size:0.595rem;}
.journey[data-layout="landscape"] .journey__curve-label-value {font-size:1.085rem;}
.journey .journey__curve-connector {position:absolute;inset:0;width:100%;height:100%;opacity:1;overflow:visible;}
.journey__curve-connector path {fill:none;stroke:var(--journey-connector-color,#ffffffe6);stroke-width:var(--journey-connector-width,1.3);filter:var(--journey-connector-filter,drop-shadow(0 0 3px var(--curve-color)));}
.journey__curve-label[data-curve-id="turnover"] {--metric-ink:#3e126e;--metric-icon:#7e21cb;}
.journey__curve-label[data-curve-id="savings"] {--metric-ink:#805005;--metric-icon:#ed9707;}
.journey__curve-label[data-curve-id="initiatives"] {--metric-ink:#075b3c;--metric-icon:#079b58;}
.journey__curve-label[data-curve-id="incentives"] {--metric-ink:#850a43;--metric-icon:#fa3984;}
.journey .journey__curve-label-value {color:var(--metric-ink,inherit);}
.journey .journey__metric-icon {color:var(--metric-icon,inherit);}

/* Breakthrough copy is the focal point and may cover the smaller metric cards. */
.journey .journey__popup--breakthrough {
  width:min(640px,calc(100% - 2rem)); padding:1.25rem 1.4rem;
  font-size:clamp(1.8rem,3.2vw,2.75rem); line-height:1.12;
  border-radius:1.5rem; text-wrap:balance;
}
.journey__popup--breakthrough::before {font-size:3.5rem; margin-bottom:.65rem;}
.journey[data-layout="portrait"] .journey__popup--breakthrough {
  padding:1rem .85rem; font-size:1.5rem; line-height:1.18;
}
.journey[data-layout="portrait"] .journey__popup--breakthrough::before {font-size:3rem;}
.journey[data-layout="landscape"] .journey__popup--breakthrough {
  width:min(640px,calc(100% - 2rem)); font-size:clamp(1.8rem,3.2vw,2.75rem);
}

/* Central cinematic award: trophy, pearl plaque and gold light, with live HTML text. */
.journey .journey__popup--breakthrough,
.journey[data-layout="landscape"] .journey__popup--breakthrough,
.journey[data-layout="portrait"] .journey__popup--breakthrough {
  width:min(640px,calc(100% - 2rem)); padding:150px 0 0; border:0;
  background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  overflow:visible; text-shadow:none; isolation:isolate; color:#945600;
}
.journey .journey__popup--breakthrough::before {content:none;}
.journey__award-plate {
  position:relative; display:block; z-index:2; padding:1.45rem 2rem 1.8rem;
  border:2px solid #fff9d3; border-radius:3rem 3rem 2.5rem 2.5rem;
  background:radial-gradient(ellipse at 50% 0,#fffef4f5,transparent 65%),linear-gradient(130deg,#fff7dbef,#fffef3e8 45%,#ffe5a9eb);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 5px #fff,0 0 25px #ffe38ad9,0 0 65px #ffbc4266,inset 0 0 18px #fff9df,inset 0 -8px 18px #ffcb6870;
}
.journey__award-month {display:block;font-size:.85em;line-height:1.15;color:#123f4a;font-weight:800;margin:0 0 .3em;}
.journey__award-title {display:block;font-weight:850;line-height:1.12;text-wrap:balance;color:#985900;text-shadow:0 1px #fff8;}
.journey__award-trophy {position:absolute;z-index:3;top:0;left:50%;transform:translateX(-50%);width:270px;height:180px;object-fit:contain;filter:drop-shadow(0 0 16px #ffcd4cb3);}
.journey__award-halo {position:absolute;z-index:0;inset:-30px -12% -20px;pointer-events:none;background:radial-gradient(ellipse at 50% 36%,#fff9c9 0,#ffdb6c8a 18%,#ffce4433 37%,transparent 65%);}
.journey__award-halo::before {content:'';position:absolute;inset:0;background:repeating-conic-gradient(from 4deg at 50% 36%,transparent 0deg 8deg,#fff6c05c 8.4deg 9deg,transparent 9.4deg 17deg);mask-image:radial-gradient(ellipse at 50% 36%,#000 4%,transparent 64%);}
.journey__award-orbit {position:absolute;z-index:3;pointer-events:none;left:-4%;right:-4%;top:46%;height:44%;border:2px solid #ffedaa;border-top-color:transparent;border-radius:50%;transform:rotate(-12deg);box-shadow:0 2px 5px #fff5b3,0 6px 18px #ffc4448c;}
.journey__award-orbit::after {content:'';position:absolute;right:8%;bottom:10%;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px #ffe8a3;}
.journey[data-layout="portrait"] .journey__popup--breakthrough {padding-top:110px;}
.journey[data-layout="portrait"] .journey__award-trophy {width:190px;height:130px;}
.journey[data-layout="portrait"] .journey__award-plate {padding:1.25rem .8rem 1.35rem;border-radius:2rem;}
.journey__award-halo::after {content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 42%,#fff 0 1px,#ffde79 2px,transparent 5px),radial-gradient(circle at 24% 16%,#fff 0 1px,#ffde79 2px,transparent 5px),radial-gradient(circle at 70% 20%,#fff 0 1px,#ffde79 2px,transparent 5px),radial-gradient(circle at 89% 48%,#fff 0 1px,#ffde79 2px,transparent 5px),radial-gradient(circle at 37% 7%,#fff 0 1px,#ffde79 2px,transparent 5px),radial-gradient(circle at 77% 83%,#fff 0 1px,#ffde79 2px,transparent 5px);filter:drop-shadow(0 0 5px #ffd16a);}
/* Keep the complete award below the heading on compact landscape cards. */
.journey {container-type:inline-size;}

/* The light orbit stays behind the plaque so it never washes out the title. */
.journey__award-orbit {z-index:1;}

/* Smooth pointer re-entry; leaving freezes the transform in Backgrounds. */
.journey__landscapes {transition:transform 850ms cubic-bezier(.16,1,.3,1);}
/* Softer award typography, sized by the component rather than the browser width. */
.journey[data-layout="landscape"] .journey__popup--breakthrough {
  font-size:clamp(1.65rem,3.1cqi,2.4rem);line-height:1.18;
}
.journey[data-layout="portrait"] .journey__popup--breakthrough {
  font-size:clamp(1.3rem,6.2cqi,1.45rem);line-height:1.22;
}
.journey__award-title {
  font-weight:750;line-height:1.18;letter-spacing:-.018em;color:#915713;
  text-shadow:0 1px 0 #fff9df,0 2px 3px #9b611b24,0 5px 12px #8c541314;
}
.journey__award-month {
  font-size:.8em;font-weight:700;letter-spacing:-.012em;
  text-shadow:0 1px 0 #fff9,0 2px 5px #173c4120;
}

/* The public presentation contains only scenery and the three stage summaries. */
.journey[data-header-visible="false"] .journey__landscapes {inset:-2%;}
.journey:has(> .journey__panel[hidden]) .journey__chapters {border-radius:0 0 1.5rem 1.5rem;padding-bottom:1rem;}

/* Zero chroma behind an achievement, while the award itself retains its gold. */
.journey__scene::after {
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  backdrop-filter:var(--journey-award-backdrop,grayscale(1)); -webkit-backdrop-filter:var(--journey-award-backdrop,grayscale(1));
  opacity:0; transition:opacity 220ms ease;
}
.journey__scene:has(.journey__popup--breakthrough:not([hidden]))::after {opacity:1;}
.journey .journey__popups {z-index:4;}

/* On-demand player, shared with the developer panel rather than duplicated. */
.journey .journey__controls--floating {
  position:absolute;z-index:6;left:50%;bottom:2.5rem;transform:translateX(-50%);
  width:min(440px,calc(100% - 2rem));padding:.7rem .85rem;
  border:1px solid #ffffffdc;border-radius:1.2rem;background:#f2faffed;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 35px #13344b33;pointer-events:auto;
}
.journey .journey__controls--floating[data-open="false"] {display:none!important;}
.journey__controls--floating [data-action="replay"],
.journey__controls--floating .journey__slider-title {display:none;}
.journey .journey__controls--floating .journey__buttons {gap:.65rem;}
.journey .journey__controls--floating .journey__slider-label {margin-top:.2rem;}
.journey .journey__controls--floating .journey__slider {margin:0;}
.journey .journey__controls--floating {
  background:#f8fcfffa;border:2px solid #ffffff;box-shadow:0 10px 40px #102c5066,0 0 0 1px #295d8840;
}
.journey__controls--floating .journey__slider {appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;}
.journey__controls--floating .journey__slider::-webkit-slider-runnable-track {height:9px;border-radius:8px;background:linear-gradient(to right,#087ac2 var(--journey-progress,0%),#b8ccdb var(--journey-progress,0%));}
.journey__controls--floating .journey__slider::-moz-range-track {height:9px;border-radius:8px;background:#b8ccdb;}
.journey__controls--floating .journey__slider::-moz-range-progress {height:9px;border-radius:8px;background:#087ac2;}
.journey__controls--floating .journey__slider::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:25px;height:25px;margin-top:-8px;border-radius:50%;border:3px solid #fff;background:#087ac2;box-shadow:0 2px 8px #163c5566;}
.journey__controls--floating .journey__slider::-moz-range-thumb {width:19px;height:19px;border-radius:50%;border:3px solid #fff;background:#087ac2;box-shadow:0 2px 8px #163c5566;}
/* One quiet row: a large touch target without a large visual footprint. */
.journey .journey__controls--floating {
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;
  gap:.65rem;padding:.4rem .65rem;width:min(440px,calc(100% - 2rem));border-radius:1rem;
}
.journey .journey__controls--floating .journey__buttons {display:contents;}
.journey__controls--floating [data-action="play"] {grid-column:1;grid-row:1;}
.journey__controls--floating .journey__slider-label {grid-column:2;grid-row:1;margin:0!important;min-width:0;}
.journey__controls--floating .journey__month {grid-column:3;grid-row:1;font-size:.65rem;max-width:5rem;line-height:1.25;}

/* Stage saturation affects photography only; milestone overlay remains separate. */
.journey__landscape .journey__artwork {filter:saturate(var(--journey-saturation,1));transition:filter 220ms ease;}

/* Compact stage strip, with breathing room inside each column. */
.journey .journey__chapters,
.journey[data-layout="landscape"] .journey__chapters,
.journey:has(> .journey__panel[hidden]) .journey__chapters {
  padding-top:.25rem;padding-bottom:.35rem;
}
.journey .journey__chapter-overview {padding:.65rem 1rem .55rem;}
.journey .journey__chapter-overview p {margin:.6rem 0 0;line-height:1.45;}
.journey[data-layout="portrait"] .journey__chapter-overview {padding:.55rem .45rem .45rem;}
.journey[data-layout="portrait"] .journey__chapter-overview p {font-size:.62rem;}

/* One concise heading contextualizes the research results. */
.journey__header .journey__eyebrow,
.journey__header .journey__intro {display:none;}
.journey__header {padding:1.1rem 1.4rem;background:linear-gradient(180deg,#edf7fff0,#edf7ffb3 65%,#edf7ff00);}
.journey .journey__title {font-size:clamp(1rem,1.6cqi,1.4rem);font-weight:650;line-height:1.3;letter-spacing:-.012em;max-width:none;margin:0;}

/* Heading floats on the photograph, below the top edge rather than on a strip. */
.journey .journey__landscapes,
.journey[data-layout="portrait"] .journey__landscapes {inset:-2%;}
.journey .journey__header,
.journey[data-layout="portrait"] .journey__header,
.journey[data-layout="landscape"] .journey__header {
  top:clamp(.6rem,1.2cqi,1rem);width:100%;padding:.5rem clamp(1.1rem,3cqi,2rem);
  background:none;border-radius:0;
}
.journey .journey__title {text-shadow:0 1px 2px #ffffffc9,0 0 12px #ffffff80;}

/* Final research outcomes: a compact hierarchy below the achievement title. */
.journey__award-results {display:grid;gap:.55rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid #bd8f4140;text-shadow:0 1px #fff9;}
.journey__award-result {display:block;color:#43514c;font-size:clamp(.9rem,1.5cqi,1.15rem);line-height:1.35;font-weight:500;}
.journey__award-result strong {font-size:1.12em;font-weight:800;color:#815010;white-space:nowrap;}
.journey[data-layout="portrait"] .journey__award-results {gap:.45rem;margin-top:.75rem;padding-top:.7rem;}
.journey[data-layout="portrait"] .journey__award-result {font-size:.9rem;}
/* Compact award composition keeps the final card inside narrow phone scenes. */
@container (max-width:360px) {
  .journey[data-layout="portrait"] .journey__popup--breakthrough {padding-top:80px;font-size:1.15rem;}
  .journey[data-layout="portrait"] .journey__award-trophy {width:155px;height:100px;}
  .journey[data-layout="portrait"] .journey__award-plate {padding:.9rem .7rem 1rem;}
  .journey[data-layout="portrait"] .journey__award-results {gap:.3rem;margin-top:.5rem;padding-top:.5rem;}
  .journey[data-layout="portrait"] .journey__award-result {font-size:.85rem;}
}

/* Green stage strip: quiet upcoming steps, focused current step, earned completion. */
.journey .journey__chapters { background:var(--journey-stage-surface,linear-gradient(135deg,#f1f8f2,#e8f3eb)); }
.journey .journey__chapter-overview { border-top-color:#b7cdbd; transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease; }
.journey .journey__chapter-overview strong,
.journey .journey__chapter-period { color:var(--journey-stage-color,#476650); }
.journey .journey__chapter-overview p { color:#405c4d; }
.journey .journey__chapter-overview[data-current="true"] { background:var(--journey-stage-surface,#dceee1); border-top-color:#23734e; box-shadow:inset 0 2px #23734e; }
.journey .journey__chapter-overview[data-current="true"] strong { color:var(--journey-stage-active-color,#185638); }
.journey .journey__chapter-overview[data-complete="true"] { background:var(--journey-stage-surface,#e5f1d6); border-top-color:#86b846; box-shadow:inset 0 2px #b5db74; }
.journey .journey__chapter-overview[data-complete="true"] strong { color:var(--journey-stage-active-color,#345619); }
.journey .journey__chapter-overview[data-complete="true"] strong::after { content:' ✓'; font-weight:800; }

/* Stage backgrounds fill the entire component, independent of the plot gutters. */
.journey .journey__chapters,
.journey[data-layout] .journey__chapters { padding-left:0; padding-right:0; }

.journey__landscape-blend { position:absolute; inset:0; pointer-events:none; }

.journey .journey__title { text-align:center; }

/* Desktop lets the chart lead; retain the stage descriptions on smaller screens. */
@media (min-width:70rem) {
  .journey .journey__chapters { display:none; }
}

/* A stable, readable time marker above the curves; updates only once per month. */
.journey .journey__clock {
  margin:.65rem 0 0; text-align:center; color:#175c40;
  font-size:clamp(1.3rem,3.8cqi,2rem); line-height:1.2; font-weight:750;
  font-variant-numeric:tabular-nums; letter-spacing:-.025em;
  text-shadow:0 1px 2px #fff,0 0 18px #ffffffed;
}

/* Embedding tokens: defaults preserve the standalone presentation. */
.journey {
 background:var(--journey-surface,#e6f0f6);
 border-radius:var(--journey-radius,1.5rem);
 box-shadow:var(--journey-shadow,0 25px 75px -35px #326a8b50);
}
.journey .journey__scene {
 background:var(--journey-scene-surface,#deedf0);
 border-radius:var(--journey-scene-radius,1.5rem 1.5rem 0 0);
}
.journey .journey__landscapes {
 mask-image:var(--journey-artwork-mask,none);
 -webkit-mask-image:var(--journey-artwork-mask,none);
}
.journey .journey__veil { opacity:var(--journey-veil-opacity,1); }
.journey .journey__title {
 color:var(--journey-title-color,var(--journey-ink));
 text-shadow:var(--journey-title-shadow,0 1px 2px #ffffffc9,0 0 12px #ffffff80);
}
.journey .journey__clock {
 color:var(--journey-clock-color,#175c40);
 text-shadow:var(--journey-clock-shadow,0 1px 2px #fff,0 0 18px #ffffffed);
}
.journey .journey__axis { color:var(--journey-axis-color,#173956); }