/* Site toilets: the inside-the-unit tour */
/* ---------- site toilets: the tour ---------- */
.tour { position: relative; background: var(--ink); color: rgba(255, 255, 255, .86); overflow: clip; }
.motion .tour { height: 100svh; min-height: 640px; }
.tour__glow { position: absolute; inset: -10%; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(31, 107, 83, .75), transparent 70%) 90% 0% / 120% 120% no-repeat, radial-gradient(ellipse 60% 60% at 50% 50%, rgba(31, 107, 83, .45), transparent 70%) 0% 100% / 110% 110% no-repeat; }
.tour__grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 90px); align-items: center; height: 100%; padding: calc(var(--tb) + var(--hh) + 24px) 0 32px; }
html:not(.motion) .tour__grid { padding: clamp(80px, 9vw, 140px) 0; }
.tour__text { display: grid; gap: 22px; }
.tour__steps { display: grid; gap: 4px; }
.tour__step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); transition: opacity .4s; }
.motion .tour__step:not(.is-on) { opacity: .42; }
.tour__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); color: var(--white); transition: background .4s, color .4s; }
.tour__step.is-on .tour__n { background: var(--brand); color: var(--ink); box-shadow: none; }
.tour__step h3 { font: 800 clamp(1.25rem, 1.7vw, 1.65rem)/1.1 var(--display); font-stretch: 82%; color: var(--white); }
.tour__step p { margin-top: 6px; font-size: 1rem; }
.motion .tour__step p { display: none; }
.tour__detail { display: none; min-height: 3.2em; font-size: clamp(1.05rem, 1.25vw, 1.2rem); color: var(--white); }
.motion .tour__detail { display: block; }
.tour__bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.tour__bar span { display: block; height: 100%; background: var(--brand-hi); transform-origin: left; transform: scaleX(0); }
html:not(.motion) .tour__bar { display: none; }
.tour__stage { justify-self: center; width: min(100%, min(calc(100svh - var(--tb) - var(--hh) - 90px), 640px)); }
.tour__frame { position: relative; aspect-ratio: 1; border-radius: 60px 60px 12px 12px; overflow: clip; background: var(--ink-2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); }
.tour__pic { position: absolute; inset: 0; will-change: transform; }
.tour__pic img { width: 100%; height: 100%; object-fit: cover; }
.tour__spot { position: absolute; width: 0; height: 0; }
.tour__spot i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--brand-hi); box-shadow: 0 0 0 6px rgba(108, 196, 63, .25); transform: scale(.4); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
.tour__spot b { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--ink); font-size: .8rem; transform: scale(0); transition: transform .4s var(--ease); }
.tour__spot.is-on i { transform: scale(1); opacity: 1; animation: spot 1.8s ease-out infinite; }
html:not(.motion) .tour__spot b { transform: scale(1); }
@keyframes spot { 50% { box-shadow: 0 0 0 16px rgba(108, 196, 63, 0); } }
.tour__count { position: absolute; left: 20px; bottom: 20px; padding: 7px 13px; border-radius: 999px; background: rgba(12, 42, 32, .8); color: var(--white); font-weight: 800; font-variant-numeric: tabular-nums; }
html:not(.motion) .tour__count { display: none; }
@media (max-width: 960px) {
  .tour__grid { grid-template-columns: 1fr; gap: 16px; align-content: center; padding-top: calc(var(--tb) + var(--hh) + 6px); }
  .tour__stage { order: -1; width: min(100%, 40svh); }
  .tour .h2 { font-size: 1.7rem; }
  .tour__step { padding: 6px 0; }
  .tour__step h3 { font-size: 1.1rem; }
  .tour__n { width: 28px; height: 28px; font-size: .85rem; }
  .tour__stage { width: min(100%, 34svh); }
}

/* the pump truck photo: keep the cab and its stickers in the frame */
.acc__ph img { object-position: 80% 50%; }