/* Il percorso del cliente — la mappa (D106). */

.jr-hero { position: relative; overflow: hidden; padding: 72px 0 110px; background: var(--ink); }
.jr-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.jr-hero h1 { margin: 0 0 28px; font-size: clamp(48px, 5.4vw, 86px) !important; line-height: 1.02 !important; }
.jr-hero .jr-hero__lead { margin: 0; max-width: 580px; font-size: 20px !important; line-height: 1.6 !important; color: var(--mist); }

/* Floor plan of a salon with a client walking from the door to the till. */
.jr-hero__plan { opacity: 0; transform: translateY(50px) rotate(-2deg); transition: opacity .8s ease .2s, transform 1.2s cubic-bezier(.16, 1, .3, 1) .2s; }
.is-ready .jr-hero__plan { opacity: 1; transform: rotate(-1deg); }
.jr-floor { display: block; width: 100%; height: auto; padding: 16px; border-radius: 28px; background: var(--ink-2); }
.jr-floor__room { fill: #FFFFFF; stroke: var(--cream); stroke-width: 3; }
.jr-floor__door { stroke: #FFFFFF; stroke-width: 6; }
.jr-floor__item { fill: var(--ink-2); stroke: var(--hair-strong); stroke-width: 1.5; }
.jr-floor__tablet { fill: var(--cream); }
.jr-floor__mirror { fill: #DCE3E6; stroke: var(--hair-strong); }
.jr-floor__path { fill: none; stroke: var(--gold-line); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.jr-floor__walker { fill: var(--cream); stroke: #FFFFFF; stroke-width: 3; }
.jr-floor__label { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--mist); }

/* What it is, then benefits as map pins. */
.jr-what { padding: 120px 0; background: var(--ink-2); }
.jr-what__inner { max-width: 820px !important; text-align: center; }
.jr-what h2 { margin: 0 0 26px; font-size: clamp(36px, 3.8vw, 56px) !important; line-height: 1.06 !important; }
.jr-what .jr-what__text { margin: 0 auto 16px; color: var(--mist); }
.jr-pins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 60px 0 0; padding: 0; list-style: none; }
.jr-pins li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.jr-pin { width: 34px; height: 46px; }
.jr-pin path { fill: var(--cream); }
.jr-pin circle { fill: var(--gold-light); }
.jr-pins li:nth-child(2) .jr-pin path { fill: var(--gold); }
.fx-fade.is-in .jr-pin { animation: jr-drop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes jr-drop { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.jr-pins__t { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.jr-pins__d { max-width: 320px; font-size: 16px; line-height: 1.6; color: var(--mist); }

/* The map: a path that draws itself with a dot at its tip. */
.jr-map-section { padding: 120px 0 80px; background: var(--ink); }
.jr-map__title { text-align: center; }
.jr-map-section h2 { margin: 0 0 60px; font-size: clamp(38px, 4.2vw, 64px) !important; line-height: 1.04 !important; }
.jr-map { position: relative; }
.jr-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jr-map__ghost { fill: none; stroke: var(--hair-strong); stroke-width: 2; stroke-dasharray: 3 10; stroke-linecap: round; }
.jr-map__path { fill: none; stroke: var(--cream); stroke-width: 4; stroke-linecap: round; }
.jr-map__dot {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 999px;
  background: var(--gold-line);
  box-shadow: 0 0 0 6px rgba(184, 153, 104, .25), 0 0 0 14px rgba(184, 153, 104, .1);
}
.jr-map__line { display: none; }
.jr-map__stops { margin: 0; padding: 0; list-style: none; }
.jr-stop { position: absolute; left: 0; right: 0; height: 0; }
.jr-stop__marker {
  position: absolute;
  left: var(--x);
  top: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 2px solid var(--hair-strong);
  transition: background-color .45s ease, border-color .45s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.jr-stop__marker svg { width: 28px; height: 28px; fill: none; stroke: var(--mist); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s ease; }
.jr-stop.is-reached .jr-stop__marker { background: var(--cream); border-color: var(--cream); transform: scale(1.1); }
.jr-stop.is-reached .jr-stop__marker svg { stroke: #FFFFFF; }
.jr-stop__card {
  position: absolute;
  top: 0;
  width: min(400px, calc(var(--x) - 70px));
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--ink-2);
  transform: translateY(-50%) translateX(var(--shift, 0));
  opacity: .25;
  transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1), background-color .6s ease;
}
.jr-stop--left .jr-stop__card { right: calc(100% - var(--x) + 60px); --shift: -30px; }
.jr-stop--right .jr-stop__card { left: calc(var(--x) + 60px); width: min(400px, calc(100% - var(--x) - 70px)); --shift: 30px; }
.jr-stop.is-reached .jr-stop__card { opacity: 1; --shift: 0px; background: #FFFFFF; box-shadow: 0 30px 60px -40px rgba(23, 25, 26, .4); }
.jr-stop__n { font-family: var(--serif); font-size: 18px; color: var(--gold); }
.jr-stop h3 { margin: 4px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.12; color: var(--cream); }
.jr-stop p { margin: 0; font-size: 15px !important; line-height: 1.55 !important; color: var(--mist); }

/* The plan as the map legend. */
.jr-legend-section { padding: 120px 0; background: var(--ink-2); }
.jr-legend__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.jr-legend-section h2 { margin: 0 0 22px; font-size: clamp(36px, 3.8vw, 56px) !important; line-height: 1.06 !important; }
.jr-legend-section .jr-legend__text { margin: 0 0 14px; max-width: 540px; color: var(--mist); }
.jr-legend { padding: 28px 30px; border: 2px solid var(--cream); border-radius: 8px; background: #FFFFFF; box-shadow: 8px 8px 0 var(--cream); }
.jr-legend__title { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--hair-strong); font-family: var(--serif); font-style: italic; font-size: 30px; }
.jr-legend__row { display: grid; grid-template-columns: 26px 110px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; font-size: 15px; }
.jr-legend__row b { font-family: var(--serif); font-weight: 400; font-size: 24px; }
.jr-legend__row span:last-child { color: var(--mist); }
.jr-legend__mark { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--cream); }
.jr-legend__mark.is-full { background: var(--cream); }
.jr-legend__mark.is-half { background: linear-gradient(90deg, var(--cream) 50%, transparent 50%); }
.jr-legend__mark.is-none { border-style: dashed; border-color: var(--hair-strong); }

/* Questions as signposts on a pole. */
.jr-signs-section { padding: 120px 0; background: var(--ink); }
.jr-signs-section h2 { margin: 0 0 50px; text-align: center; font-size: clamp(36px, 3.8vw, 56px) !important; line-height: 1.06 !important; }
.jr-signs { position: relative; display: grid; gap: 34px; max-width: 980px; margin: 0 auto; }
.jr-signs__pole { position: absolute; left: 50%; top: -20px; bottom: -20px; width: 10px; margin-left: -5px; border-radius: 4px; background: linear-gradient(90deg, #3A3D3B, #17191A); }
.jr-sign { position: relative; width: calc(50% + 40px); }
.jr-sign--right { margin-left: calc(50% - 40px); }
.jr-sign__board {
  position: relative;
  padding: 18px 46px 18px 26px;
  background: var(--night);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}
.jr-sign--left .jr-sign__board { padding: 18px 26px 18px 46px; text-align: right; clip-path: polygon(26px 0, 100% 0, 100% 100%, 26px 100%, 0 50%); }
.jr-sign:nth-child(odd) .jr-sign__board { background: var(--gold); }
.jr-signs .jr-sign__a { margin: 12px 0 0; padding: 0 30px; font-size: 16px !important; color: var(--mist); }
.jr-sign--right .jr-sign__a { padding-left: 70px; }
.jr-sign--left .jr-sign__a { padding-right: 70px; text-align: right; }
.fx-fade.is-in.jr-sign--right .jr-sign__board { animation: jr-swing-r .9s cubic-bezier(.34, 1.4, .64, 1) both; }
.fx-fade.is-in.jr-sign--left .jr-sign__board { animation: jr-swing-l .9s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes jr-swing-r { from { transform: rotate(-6deg) translateX(-20px); transform-origin: left center; } to { transform: none; } }
@keyframes jr-swing-l { from { transform: rotate(6deg) translateX(20px); transform-origin: right center; } to { transform: none; } }

@media (max-width: 900px) {
  .jr-hero__grid,
  .jr-legend__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .jr-hero h1 { font-size: clamp(38px, 8.6vw, 58px) !important; }
  .jr-hero .jr-hero__lead { font-size: 17px !important; }
  .jr-pins { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .jr-map { height: auto !important; }
  .jr-map__svg,
  .jr-map__dot { display: none; }
  .jr-map__line { display: block; position: absolute; left: 31px; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--hair); }
  .jr-map__line i { display: block; width: 100%; height: 100%; background: var(--cream); transform-origin: center top; transform: scaleY(var(--p, 0)); }
  .jr-stop { position: relative; top: auto !important; height: auto; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; margin-bottom: 26px; }
  .jr-stop__marker { position: relative; left: 0; margin: 0; }
  .jr-stop__card,
  .jr-stop--left .jr-stop__card,
  .jr-stop--right .jr-stop__card { position: relative; left: auto; right: auto; width: auto; transform: none; }
  .jr-signs__pole { left: 14px; }
  .jr-sign,
  .jr-sign--right { width: auto; margin-left: 30px; }
  .jr-sign--left .jr-sign__board { padding: 18px 46px 18px 26px; text-align: left; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
  .jr-sign--left .jr-sign__a,
  .jr-sign--right .jr-sign__a { padding: 0 10px; text-align: left; }
  .jr-legend__row { grid-template-columns: 22px 90px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .jr-hero__plan { transition: none; opacity: 1; transform: none; }
  .jr-stop__card { transition: none; }
}