/* =========================================================
   canadianhs.org — journey-map hero (ported from cemsed.com)
   Loaded on the home page only, after site.css.
   ========================================================= */
:root{--navy:#02145E;--navy-deep:#010D3F;--green:#1AD086;--radius:18px}
.hero.map-ready .leaflet-container{background:var(--navy-deep);font-family:var(--sans);outline:none}
.leaflet-tile-pane{filter:brightness(.62) saturate(.6)}
.leaflet-control-attribution{background:rgba(1,13,63,.65)!important;color:rgba(255,255,255,.45)!important;font-size:10px!important;padding:2px 6px!important}
.leaflet-control-attribution a{color:var(--green)!important}
.cems-marker-wrap{background:transparent!important;border:0!important}
.cems-marker{width:13px;height:13px;background:var(--green);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 6px rgba(26,208,134,.3);animation:cems-pulse 2.6s ease-in-out infinite,cems-drop .8s cubic-bezier(.34,1.56,.64,1) forwards;transform:scale(0)}
@keyframes cems-drop{0%{transform:scale(0)}70%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes cems-pulse{0%,100%{box-shadow:0 0 0 6px rgba(26,208,134,.35)}50%{box-shadow:0 0 0 16px rgba(26,208,134,0)}}
.cems-label{background:rgba(1,13,63,.85)!important;color:#fff!important;border:1px solid rgba(26,208,134,.5)!important;font-family:var(--serif)!important;font-weight:700!important;font-size:.78rem!important;letter-spacing:.04em;padding:4px 11px!important;border-radius:6px!important;box-shadow:0 6px 22px rgba(0,0,0,.45)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;opacity:0;animation:cems-label-in .8s ease forwards}
@keyframes cems-label-in{to{opacity:1}}
.leaflet-tooltip-top.cems-label::before,.leaflet-tooltip-bottom.cems-label::before,.leaflet-tooltip-left.cems-label::before,.leaflet-tooltip-right.cems-label::before{display:none!important}
@media(max-width:920px){.cems-label{font-size:.68rem!important;padding:3px 8px!important}}
@media (prefers-reduced-motion:reduce){.cems-marker{animation:none;transform:scale(1)}.cems-label{animation:none;opacity:1}}
/* JOURNEY v5 — hero + journey share one continuous map */
.jr-track{position:relative;height:640vh;background:var(--navy-deep)}
.jr-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
#journeyMap{position:absolute;inset:0;z-index:0}
.jr-veil-light{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(1,13,63,.72) 0%,rgba(1,13,63,.35) 42%,rgba(1,13,63,.05) 68%)}
.jr-veil-heavy{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(135deg,rgba(1,13,63,.94) 0%,rgba(2,20,94,.86) 58%,rgba(10,42,140,.78) 100%);opacity:1;transition:opacity 1.1s ease}
.jr-veil-heavy.is-thin{opacity:0}
.jr-sticky .mhero{position:absolute;inset:0;z-index:3;display:flex;align-items:center;background:transparent;padding:96px 0 40px;overflow:hidden;transition:opacity .7s ease,transform .7s ease}
.jr-sticky .mhero.is-away{opacity:0;transform:translateY(-46px);pointer-events:none}
.jr-sticky .mhero .wrap{width:100%}
.jr-caption{position:absolute;z-index:3;left:6vw;top:50%;transform:translateY(-50%);max-width:440px;background:rgba(255,255,255,.97);border-radius:var(--radius);padding:28px 30px;box-shadow:0 24px 60px rgba(1,13,63,.5);transition:opacity .3s ease,transform .3s ease}
.jr-caption.is-swap,.jr-caption.is-hidden{opacity:0;transform:translateY(-50%) translateY(12px)}
.jr-caption.is-hidden{pointer-events:none}
.jr-caption .eyebrow{margin-bottom:12px;font-size:.7rem}
.jr-tag{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.jr-sq{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.jr-caption h3{font-size:1.3rem;margin:0 0 10px;color:var(--navy)}
.jr-caption p{font-size:.93rem;color:#4A5470;margin:0;line-height:1.6}
.jr-dots{position:absolute;z-index:3;display:flex;flex-direction:column;gap:10px;right:26px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .5s}
.jr-dots.show{opacity:1}
.jr-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);transition:background .3s,transform .3s}
.jr-dot.on{background:var(--green)}
.jr-dot.now{transform:scale(1.35)}
.jr-hint{position:absolute;z-index:3;bottom:24px;left:50%;transform:translateX(-50%);color:#AAB6E0;font-family:var(--serif);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;transition:opacity .4s,bottom .6s ease;animation:jr-bob 2s ease-in-out infinite;white-space:nowrap}
.jr-hint.at-hero{bottom:112px}
@keyframes jr-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
@media(max-width:920px){
  .jr-sticky .mhero{align-items:flex-start;padding:100px 0 40px;overflow-y:hidden}
  .jr-sticky .mhero .tiles{display:none}
  .jr-caption{left:16px;right:16px;top:auto;bottom:54px;transform:none;max-width:none;padding:20px 22px}
  .jr-caption.is-swap,.jr-caption.is-hidden{transform:translateY(12px)}
  .jr-caption h3{font-size:1.1rem}
  .jr-dots{flex-direction:row;right:auto;left:50%;top:20px;transform:translateX(-50%)}
  .jr-hint{bottom:16px}
  .jr-hint.at-hero{bottom:96px}
}
@media (prefers-reduced-motion:reduce){.jr-track{height:100vh}.jr-hint{display:none}}
/* ---- hero content inside the sticky map (CIS typography) ---- */
.jr-sticky .mhero{position:absolute;inset:0;z-index:3;display:flex;align-items:center;padding:100px 0 60px;overflow:hidden;transition:opacity .7s ease,transform .7s ease}
.jr-sticky .mhero.is-away{opacity:0;transform:translateY(-46px);pointer-events:none}
.mhero .container{width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:center}
.mhero .eyebrow{color:var(--yellow);padding-left:46px}
.mhero .eyebrow::before{background:var(--yellow)}
.mhero h1{color:#fff;font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1.04;margin:0 0 .45em}
.mhero h1 .paint{position:relative;display:inline-block;color:#fff}
.mhero h1 .paint::after{content:"";position:absolute;left:-6px;right:-6px;bottom:.04em;height:.32em;background:var(--yellow);opacity:.85;border-radius:.3em;z-index:-1;transform:rotate(-1deg)}
.mhero .lead{color:#C9D3F2;font-size:clamp(1.02rem,1.3vw,1.15rem);max-width:54ch;margin:0 0 30px}
.mhero .hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.mhero .btn-light{background:#fff;color:var(--ink)}
.mhero .btn-light:hover{background:var(--yellow)}
.mhero .btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.mhero .btn-outline:hover{background:#fff;color:var(--ink)}
.mhero .badge-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:.85rem;color:#C9D3F2;font-weight:500}
.mtiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mtile{border-radius:var(--radius);padding:24px 22px;min-height:140px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:0 18px 40px rgba(1,13,63,.35);transition:transform .25s var(--ease)}
.mtile:hover{transform:translateY(-4px)}
.mtile b{font-family:var(--serif);font-size:2rem;font-weight:800;line-height:1;display:block;margin-bottom:8px}
.mtile span{font-size:.85rem;opacity:.92;line-height:1.35}
.mt-blue{background:var(--blue)}.mt-yellow{background:var(--yellow);color:var(--ink)}.mt-pink{background:var(--pink)}.mt-teal{background:var(--teal)}
.jr-caption .eyebrow{padding-left:0;margin-bottom:6px;font-size:.7rem;color:var(--blue)}
.jr-caption .eyebrow::before{display:none}
.jr-caption h3{font-family:var(--serif);color:var(--ink);font-size:1.5rem;margin:6px 0 8px}
.jr-caption p{color:var(--text);font-size:.95rem;margin:0}
.jr-tag{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.jr-hint{font-family:var(--sans)}
@media(max-width:920px){
  .mhero{align-items:flex-start;padding:96px 0 40px}
  .mhero .container{grid-template-columns:1fr}
  .mtiles{display:none}
  .jr-track{height:400vh}
}
@media (prefers-reduced-motion:reduce){.jr-track{height:100vh}}