/* The roadmap (/roadmap/). The road in the hero, today's figures, the audience
   filter, the year rail, the timeline with its progress line, and the promise.
   roadmap.js adds the motion; every part reads in full without it. Only
   transform, opacity, and colour animate, and none of it under reduced motion. */

/* ---------- the hero and its road ---------- */
.rm-hero{position:relative;overflow:hidden;background:var(--black);color:#fff;padding:54px 0 0;isolation:isolate}
.rm-hero::before{content:"";position:absolute;z-index:-1;inset:-30% -10% auto 35%;height:140%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(243,194,40,.22),rgba(243,194,40,.06) 55%,transparent);animation:rm-glow 18s ease-in-out infinite alternate}
.rm-hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 20%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 80% 20%,#000,transparent 75%)}
@keyframes rm-glow{to{transform:translate3d(-12%,8%,0) scale(1.08)}}
.rm-hero .eyebrow{color:var(--gold)}
.rm-hero h1{color:#fff;max-width:14ch}
.rm-hero .h1-sub{color:var(--gold)}
.rm-hero .lede{color:#C9C6BF;max-width:62ch}
.rm-hero .crumbs a,.rm-hero .crumbs{color:#9A9A9A}

.rm-map{position:relative;max-width:1240px;margin:30px auto 0;height:290px;padding:0 20px}
.rm-road{position:absolute;top:0;left:20px;width:calc(100% - 40px);height:calc(100% - 64px);overflow:visible}
.rm-road path{fill:none;stroke-linecap:round}
.rm-road-base{stroke:rgba(255,255,255,.14);stroke-width:2;stroke-dasharray:2 10}
.rm-road-done{stroke:var(--gold);stroke-width:3;filter:drop-shadow(0 0 8px rgba(243,194,40,.55))}
.rm-stops{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 0 18px}
.js-rm .rm-stops{display:block;padding:0}
.rm-stop{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#fff;text-align:center;min-width:90px}
.js-rm .rm-stop{position:absolute;transform:translate(-50%,-14px)}
.rm-stop-dot{width:18px;height:18px;border-radius:50%;background:var(--black);border:2px solid rgba(255,255,255,.5);
  transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.rm-st-live .rm-stop-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 0 rgba(243,194,40,.6);animation:rm-pulse 2.2s ease-out infinite}
@keyframes rm-pulse{0%{box-shadow:0 0 0 0 rgba(243,194,40,.6)}100%{box-shadow:0 0 0 16px rgba(243,194,40,0)}}
.rm-stop-y{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;letter-spacing:.02em;white-space:nowrap}
.rm-stop-l{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#9A9A9A;white-space:nowrap}
.rm-stop:hover .rm-stop-dot,.rm-stop:focus-visible .rm-stop-dot,.rm-stop.is-on .rm-stop-dot{transform:scale(1.35);border-color:var(--gold);box-shadow:0 0 0 6px rgba(243,194,40,.16)}
.rm-stop:hover .rm-stop-l,.rm-stop.is-on .rm-stop-l{color:var(--gold)}
.rm-stop:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.rm-st-tba .rm-stop-dot{border-style:dashed}

/* ---------- today ---------- */
.rm-today{background:#111113;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.rm-today-in{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr}
.rm-fig{padding:26px 22px 24px 0;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px}
.rm-fig+.rm-fig{padding-left:22px}
.rm-fig:last-child{border-right:0}
.rm-fig b{font-family:'Montserrat',sans-serif;font-weight:900;font-size:38px;line-height:1;color:var(--gold)}
.rm-fig span{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#C9C6BF}
.rm-year-bar{display:block;height:4px;background:rgba(255,255,255,.1);margin-top:8px;position:relative;overflow:hidden}
.rm-year-bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#B88F12,var(--gold));transition:width 1.4s cubic-bezier(.22,1,.36,1)}

/* ---------- controls ---------- */
.rm-wrap{padding-top:44px}
.rm-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding-bottom:22px;border-bottom:1px solid var(--grey-15)}
.rm-filter{display:inline-flex;border:1px solid var(--black)}
.rm-filter button{all:unset;cursor:pointer;padding:11px 18px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:background-color .2s ease,color .2s ease}
.rm-filter button+button{border-left:1px solid var(--black)}
.rm-filter button:hover{background:#FFF6D6}
.rm-filter button[aria-pressed="true"]{background:var(--black);color:var(--gold)}
.rm-filter button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-filter .rm-n{display:inline-block;margin-left:7px;opacity:.7;font-weight:600}
.rm-legend{display:flex;flex-wrap:wrap;gap:6px;margin:0}

.rm-pill{display:inline-block;font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:4px 8px;border:1px solid currentColor;line-height:1.2}
.rm-pill-live{background:var(--gold);border-color:var(--gold);color:var(--black)}
.rm-pill-building{background:var(--black);border-color:var(--black);color:var(--gold)}
.rm-pill-planned{color:var(--ink)}
.rm-pill-exploring{color:var(--gold-deep);border-style:dashed}
.rm-pill-tba{color:var(--grey-70);border-style:dotted}

/* ---------- the timeline ---------- */
.rm-body{display:grid;grid-template-columns:150px 1fr;gap:40px;padding:42px 0 30px}
.rm-rail{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;border-left:2px solid var(--grey-15)}
.rm-rail a{display:block;padding:9px 0 9px 16px;margin-left:-2px;border-left:2px solid transparent;font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--grey-70);text-decoration:none;transition:color .2s ease,border-color .2s ease,padding .25s ease}
.rm-rail a:hover{color:var(--ink)}
.rm-rail a.is-on{color:var(--ink);border-left-color:var(--gold);padding-left:22px}
.rm-line{position:relative;padding-left:46px;min-width:0}
.rm-line::before{content:"";position:absolute;left:11px;top:6px;bottom:0;width:2px;background:var(--grey-15)}
.rm-line-fill{position:absolute;left:11px;top:6px;width:2px;height:calc(var(--p,1) * (100% - 6px));background:linear-gradient(180deg,var(--gold),#B88F12);box-shadow:0 0 10px rgba(243,194,40,.5)}
.rm-stage{position:relative;padding:0 0 64px;scroll-margin-top:120px}
.rm-node{position:absolute;left:-46px;top:2px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--grey-40,#999);transition:background-color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.rm-stage.is-on .rm-node,.rm-stage-live .rm-node{background:var(--gold);border-color:var(--black);transform:scale(1.1)}
.rm-stage-tba .rm-node{border-style:dashed}
.rm-year{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.rm-stage h2{font-size:clamp(26px,3.2vw,38px);margin:0 0 12px;max-width:22ch}
.rm-lede{color:var(--grey-70);font-size:16px;max-width:66ch;margin:0 0 24px}
.rm-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:14px}
.rm-card{height:100%;display:flex;flex-direction:column;gap:8px;padding:20px 20px 16px;background:#fff;border:1px solid var(--grey-15);border-top:3px solid var(--black);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .2s ease,opacity .3s ease,filter .3s ease}
.rm-card:hover{transform:translateY(-4px);border-top-color:var(--gold);box-shadow:0 18px 36px -22px rgba(10,10,10,.5)}
.rm-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.rm-aud{font-size:11px;color:var(--grey-70)}
.rm-card h3{font-size:18px;margin:4px 0 0;line-height:1.25}
.rm-card>p:not(.rm-tags){font-size:14px;line-height:1.65;color:var(--grey-70);margin:0}
.rm-more{margin-top:auto;padding-top:8px;border-top:1px solid var(--grey-15)}
.rm-more summary{cursor:pointer;list-style:none;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:6px 0}
.rm-more summary::-webkit-details-marker{display:none}
.rm-more summary::after{content:"+";margin-left:8px;color:var(--gold-deep);display:inline-block;transition:transform .25s ease}
.rm-more[open] summary::after{transform:rotate(45deg)}
.rm-more dl{margin:4px 0 4px}
.rm-more dl div{padding:6px 0}
.rm-more dt{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.rm-more dd{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink)}
/* The audience filter: what is not for the chosen reader steps back, it does not disappear. */
.rm-wrap[data-aud="practices"] .rm-item[data-aud="clients"] .rm-card,
.rm-wrap[data-aud="clients"] .rm-item[data-aud="practices"] .rm-card{opacity:.28;filter:grayscale(1)}
.rm-wrap[data-aud="practices"] .rm-item:not([data-aud="clients"]) .rm-card,
.rm-wrap[data-aud="clients"] .rm-item:not([data-aud="practices"]) .rm-card{border-top-color:var(--gold)}

.rm-tba{position:relative;overflow:hidden;background:var(--black);color:#fff;padding:34px 30px}
.rm-tba::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(243,194,40,.16) 50%,transparent 70%);transform:translateX(-100%);animation:rm-shine 4.5s ease-in-out infinite}
@keyframes rm-shine{60%,100%{transform:translateX(100%)}}
.rm-tba-word{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(64px,10vw,120px);line-height:.9;margin:0 0 14px;color:rgba(255,255,255,.12);letter-spacing:-.03em}
.rm-tba-word span{color:var(--gold)}
.rm-tba p:not(.rm-tba-word){color:#C9C6BF;max-width:56ch;margin:0}
.rm-tba a{color:var(--gold)}

/* reveal */
.js-rm .rm-stage{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.js-rm .rm-stage.is-in{opacity:1;transform:none}
.js-rm .rm-stage .rm-item{opacity:0;transform:translateY(14px);transition:opacity .6s ease calc(var(--i,0) * 80ms + 150ms),transform .6s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 80ms + 150ms)}
.js-rm .rm-stage.is-in .rm-item{opacity:1;transform:none}

/* ---------- the promise ---------- */
.rm-promise{position:relative;overflow:hidden;background:var(--black);color:#fff;padding:78px 0;margin-top:20px;isolation:isolate}
.rm-promise::before{content:"";position:absolute;z-index:-1;inset:auto -10% -60% 30%;height:120%;background:radial-gradient(closest-side,rgba(243,194,40,.18),transparent);pointer-events:none}
.rm-promise .eyebrow{color:var(--gold)}
.rm-promise h2{color:#fff;font-size:clamp(34px,5vw,60px);margin:6px 0 16px}
.rm-promise-lede{color:#E6E3DC;font-size:18px;line-height:1.6;max-width:62ch}
.rm-promise-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.rm-promise-cols>div{border:1px solid rgba(255,255,255,.14);padding:24px 26px}
.rm-charge{border-color:var(--gold)!important;background:linear-gradient(160deg,rgba(243,194,40,.1),transparent 60%)}
.rm-promise h3{color:var(--gold);font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px}
.rm-promise ul{list-style:none;margin:0;padding:0}
.rm-promise li{position:relative;padding:10px 0 10px 30px;border-top:1px solid rgba(255,255,255,.1);color:#E6E3DC;font-size:15px;line-height:1.55}
.rm-promise li b{color:#fff}
.rm-never li::before{content:"";position:absolute;left:2px;top:20px;width:14px;height:2px;background:#E06A5A}
.rm-charge li::before{content:"";position:absolute;left:3px;top:15px;width:11px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}

.rm-charge-k{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:14px 0 4px}
.rm-charge-k:first-of-type{margin-top:0}
.rm-note{display:inline-flex;gap:8px;align-items:center;margin-top:18px;padding:8px 14px;border:1px solid rgba(243,194,40,.5);color:#E6E3DC;font-size:13.5px}
.rm-note b{color:var(--gold)}
.rm-close{padding:36px 0 70px}
.rm-disclaimer{border-left:3px solid var(--gold);padding:6px 0 6px 18px;margin-bottom:26px}
.rm-disclaimer p{color:var(--grey-70);font-size:14.5px;line-height:1.7;max-width:76ch;margin:0}
.rm-disclaimer b{color:var(--ink)}
.rm-fine{color:var(--grey-70);font-size:13.5px;max-width:70ch}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .rm-map{height:auto}
  .rm-road{display:none}
  .rm-stops,.js-rm .rm-stops{position:static;display:flex;gap:8px;overflow-x:auto;padding:0 0 26px;justify-content:flex-start;scroll-snap-type:x mandatory}
  .rm-stop,.js-rm .rm-stop{position:static;transform:none;flex:0 0 auto;scroll-snap-align:start;border:1px solid rgba(255,255,255,.18);padding:12px 14px}
  .rm-today-in{grid-template-columns:1fr 1fr}
  .rm-fig{padding:20px 14px!important;border-bottom:1px solid rgba(255,255,255,.08)}
  .rm-fig:nth-child(2n){border-right:0}
  .rm-body{grid-template-columns:1fr;gap:0}
  .rm-rail{display:none}
  .rm-promise-cols{grid-template-columns:1fr}
  .rm-line{padding-left:34px}
  .rm-node{left:-34px}
  .rm-tba{padding:26px 20px}
}
@media (prefers-reduced-motion:reduce){
  .rm-hero::before,.rm-st-live .rm-stop-dot,.rm-tba::after{animation:none}
  .js-rm .rm-stage,.js-rm .rm-stage .rm-item{opacity:1;transform:none;transition:none}
  .rm-card,.rm-stop-dot,.rm-year-bar i{transition:none}
}
@media print{.rm-hero::before,.rm-tba::after{display:none}}