:root {
  --green-950: #081f18;
  --green-900: #0b2b21;
  --green-800: #0f3529;
  --green-700: #174a3b;
  --green-100: #e3ece8;
  --background-green: #174638;
  --cream: #ffffff;
  --paper: #faf9f6;
  --red: #992c2c;
  --red-dark: #7f2323;
  --red-light: #f0b9b6;
  --yellow: #f6d365;
  --ink: #14221c;
  --muted: #667068;
  --line: #d6d0c3;
  --white: #fff;
  --shadow: 0 24px 70px rgba(4, 38, 26, 0.13);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-180%);
  padding: 0.7rem 1rem;
  border-radius: 99px;
  background: var(--red);
  color: var(--green-950);
  font-weight: 800;
}
.skip-link:focus { transform: none; }

.hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  padding: 0 clamp(1.25rem, 4vw, 5rem) 4rem;
  color: var(--cream);
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(circle at 84% 24%, rgba(153,44,44,.24), transparent 28%),
    var(--background-green);
}

.hero::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -180px;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(153,44,44,.4);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(153,44,44,.035), 0 0 0 108px rgba(153,44,44,.02);
}

.topbar {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  line-height: 1.05;
}

.brand-logo {
  width: 44px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}

.brand strong {
  display: block;
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.28rem;
  letter-spacing: .015em;
}

.brand small {
  color: rgba(255,255,255,.65);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-action {
  color: var(--cream);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid var(--red-light);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(520px, 1.25fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  max-width: 1320px;
  min-height: 610px;
  margin: 0 auto;
  padding-top: 2rem;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--green-700);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero .eyebrow { color: var(--yellow); }
.hero .eyebrow span { margin-right: .35rem; font-size: .62rem; }

h1, h2, h3, h4, p { margin-top: 0; }

h1 {
  max-width: 700px;
  margin-bottom: 1.4rem;
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(3.5rem, 6.7vw, 6.6rem);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: .88;
}

h1 em, h2 em {
  color: var(--yellow);
  font-weight: 500;
}

.hero-lede {
  max-width: 610px;
  margin-bottom: 2rem;
  color: rgba(255,255,255,.74);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  min-height: 48px;
  padding: .78rem 1.15rem;
  border: 0;
  border-radius: 7px;
  font-weight: 850;
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.button:hover { transform: translateY(-2px); }
.button:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--red-light); outline-offset: 3px; }
.button-primary { color: var(--white); background: var(--red); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.button-primary:hover, .button-accent:hover { background: var(--red-dark); }
.button-accent { width: 100%; color: var(--white); background: var(--red); }
.button-cream { color: var(--green-950); background: var(--cream); }
.button-yellow { color: var(--green-950); background: var(--yellow); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.button-yellow:hover { background: #ffe590; }
.button:disabled { opacity: .42; cursor: not-allowed; transform: none; }

.journey-note {
  max-width: 170px;
  color: rgba(255,255,255,.55);
  font-size: .75rem;
  line-height: 1.35;
}

.streetcar-scene {
  position: relative;
  align-self: stretch;
  min-height: 530px;
}

.sun {
  position: absolute;
  right: 7%;
  top: 9%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 80px rgba(153,44,44,.18);
}

.wire { position: absolute; top: 21%; height: 1px; background: rgba(255,255,255,.35); transform-origin: left center; }
.wire-one { left: -5%; width: 115%; transform: rotate(-8deg); }
.wire-two { left: 5%; width: 100%; transform: rotate(9deg); }

.streetcar {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 49%;
  width: min(760px, 112%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.24));
  animation: arrive 1s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes arrive { from { opacity: 0; transform: translate(-42%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }

.car-shadow ellipse { fill: rgba(0,0,0,.24); }
.car-roof { fill: #0f3529; stroke: #ffffff; stroke-width: 5; }
.car-main { fill: #0f3529; stroke: #ffffff; stroke-width: 5; }
.car-trim { fill: #992c2c; }
.car-base, .car-cowcatcher { fill: #081f18; }
.sign, .number { fill: #992c2c; stroke: #ffffff; stroke-width: 3; }
.sign-text, .number-text { fill: #ffffff; font-family: var(--sans); font-size: 17px; font-weight: 900; letter-spacing: 2px; }
.number-text { font-size: 18px; letter-spacing: 0; }
.windows path { fill: #ffffff; stroke: #992c2c; stroke-width: 4; }
.window-glow path { fill: #f5f5f2; opacity: .9; }
.car-label { fill: #ffffff; font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: 1.4px; }
.wheels circle:nth-child(odd) { fill: #081f18; stroke: #ffffff; stroke-width: 5; }
.wheels circle:nth-child(even) { fill: #ffffff; }
.trolley-pole, .trolley-hook { fill: none; stroke: #ffffff; stroke-width: 7; stroke-linecap: round; }
.headlight { fill: #ffffff; stroke: #992c2c; stroke-width: 4; filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }

.rails {
  position: absolute;
  left: -3%;
  right: -5%;
  bottom: 13%;
  height: 18px;
  transform: perspective(200px) rotateX(55deg);
}
.rails span { display: block; height: 3px; margin-bottom: 10px; background: rgba(255,255,255,.36); }

.route-tag {
  position: absolute;
  right: 3%;
  bottom: 8%;
  margin: 0;
  color: rgba(255,255,255,.58);
  font-family: var(--serif);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section { padding: 7rem clamp(1.25rem, 5vw, 5rem); }
.journey { background: var(--paper); }

.section-heading { max-width: 760px; margin: 0 auto 4.5rem; text-align: center; }
.section-heading h2, .finder h2 {
  margin-bottom: .85rem;
  color: var(--green-950);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}
.section-heading > p:last-child { max-width: 590px; margin: 0 auto; color: var(--muted); }

.route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 1120px;
  margin: 0 auto 3rem;
}

.route-rail {
  position: absolute;
  z-index: 0;
  left: 10%;
  right: 10%;
  top: 25px;
  height: 4px;
  overflow: hidden;
  background: #d9ddd7;
}
.route-rail span { display: block; width: 0; height: 100%; background: var(--red); transition: width .45s ease; }

.route-stop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.stop-dot {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: .8rem;
  border: 3px solid #d9ddd7;
  border-radius: 50%;
  background: var(--paper);
  transition: border .2s ease, background .2s ease, transform .2s ease;
}
.stop-dot span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e6e8e3; font-weight: 850; }
.route-stop strong { color: var(--ink); font-family: var(--serif); font-size: 1.08rem; }
.route-stop small { font-size: .68rem; letter-spacing: .04em; }
.route-stop:hover .stop-dot { transform: translateY(-3px); border-color: var(--red); }
.route-stop.is-active .stop-dot { border-color: var(--red); background: #f5e6e5; transform: scale(1.07); }
.route-stop.is-active .stop-dot span { color: var(--white); background: var(--red); }
.route-stop.is-active strong { color: var(--red); }

.stage-panel {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr 56px;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  max-width: 1120px;
  min-height: 340px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.4rem);
  border: 1px solid #ded7c9;
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.stage-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--red);
}

.stage-ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 150px;
  height: 220px;
  padding: 1.15rem;
  border: 1px solid #d6b75b;
  border-radius: 8px;
  color: var(--cream);
  background: var(--green-800);
  box-shadow: 8px 9px 0 #c66e6e;
  transform: rotate(-2deg);
}
.stage-ticket::after { content: ""; position: absolute; left: 14px; right: 14px; top: 42px; border-top: 1px dashed rgba(255,255,255,.32); }
.stage-ticket span, .stage-ticket small { font-size: .62rem; font-weight: 800; letter-spacing: .13em; }
.stage-ticket strong { color: var(--white); font-family: var(--serif); font-size: 5rem; font-weight: 500; line-height: 1; }

.stage-kicker { margin-bottom: .3rem; color: var(--green-700); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.stage-copy h3 { margin-bottom: .7rem; color: var(--green-950); font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.7rem); font-weight: 500; line-height: 1; }
.stage-description { max-width: 730px; color: #45514a; font-size: 1.06rem; }
.stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 1.7rem; padding-top: 1.35rem; border-top: 1px solid #e6dfd2; }
.stage-grid h4 { margin-bottom: .4rem; color: var(--green-800); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }
.stage-grid h4 span { color: var(--red); margin-right: .3rem; }
.stage-grid p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }

.panel-controls { display: flex; flex-direction: column; align-items: center; gap: .65rem; color: var(--muted); font-size: .75rem; }
.icon-button { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #dad4c7; border-radius: 50%; color: var(--green-800); background: transparent; cursor: pointer; transition: background .2s ease, color .2s ease; }
.icon-button:hover { color: var(--cream); background: var(--green-800); }

.finder {
  padding-bottom: 2.4rem;
  color: var(--cream);
  background:
    radial-gradient(circle at 8% 10%, rgba(153,44,44,.22), transparent 26%),
    var(--background-green);
}
.finder-shell { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.5rem, 7vw, 7rem); max-width: 1120px; margin: 0 auto 6rem; }
.finder .eyebrow { color: var(--yellow); }
.finder h2 { max-width: 480px; color: var(--cream); }
.finder-intro > p:last-child { max-width: 450px; color: rgba(255,255,255,.66); }
.stage-form fieldset { display: grid; gap: .75rem; margin: 0 0 1rem; padding: 0; border: 0; }

.choice {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: .9rem;
  min-height: 62px;
  padding: .7rem 1rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.045);
  cursor: pointer;
  transition: border .2s ease, background .2s ease, transform .2s ease;
}
.choice:hover { transform: translateX(4px); border-color: rgba(240,185,182,.85); }
.choice:has(input:checked) { border-color: var(--red-light); color: var(--white); background: rgba(153,44,44,.28); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-marker { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; font-family: var(--serif); }
.choice:has(input:checked) .choice-marker { border-color: var(--red-light); color: var(--white); background: var(--red); }
.choice:has(input:focus-visible) { outline: 3px solid var(--red-light); outline-offset: 2px; }

.result { align-self: center; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(240,185,182,.7); border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: 0 25px 80px rgba(0,0,0,.2); }
.result-label { color: var(--yellow); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.result h3 { margin-bottom: 1rem; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 500; line-height: 1.08; }
.result h3 span { color: var(--yellow); }
.result > p:not(.result-label) { color: rgba(255,255,255,.72); }
.result-step { display: grid; grid-template-columns: 26px 1fr; gap: .7rem; margin: 1.5rem 0; padding: 1.1rem; border-radius: 8px; color: var(--white); background: var(--red); }
.result-step small { display: block; font-size: .65rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.result-step p { margin: .15rem 0 0; font-weight: 700; line-height: 1.45; }
.result-contact { margin: 1.5rem 0; padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,.16); }
.result-contact p { max-width: 620px; margin-bottom: 1rem; color: rgba(255,255,255,.78); }
.result-contact strong { color: var(--white); }
.result-contact small { display: block; margin-top: .55rem; color: rgba(255,255,255,.56); font-size: .76rem; }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.text-button { padding: .7rem; border: 0; color: var(--cream); background: transparent; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.footer { display: flex; justify-content: space-between; align-items: end; max-width: 1120px; margin: 0 auto; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.55); font-size: .74rem; }
.footer strong { color: rgba(255,255,255,.82); font-family: var(--serif); font-size: 1.05rem; }
.footer-mark { display: flex; align-items: baseline; gap: .4rem; margin: 0; color: var(--yellow); font-family: var(--serif); font-size: 2rem; font-weight: 700; }
.footer-mark span { font-family: var(--sans); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 5rem; }
  .hero-copy { position: relative; z-index: 3; }
  .streetcar-scene { min-height: 480px; }
  .streetcar { width: min(760px, 98vw); }
  .stage-panel { grid-template-columns: 120px 1fr; }
  .stage-ticket { width: 115px; height: 185px; }
  .stage-ticket strong { font-size: 4rem; }
  .panel-controls { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
  .finder-shell { grid-template-columns: 1fr; }
  .finder-intro { text-align: center; }
  .finder h2, .finder-intro > p:last-child { margin-left: auto; margin-right: auto; }
}

@media (max-width: 700px) {
  .topbar { padding: 1rem 0; }
  .brand small { display: none; }
  .brand-logo { width: 38px; height: 54px; }
  .nav-action { font-size: .7rem; }
  .hero-grid { min-height: 640px; gap: 0; padding-top: 3.5rem; }
  h1 { font-size: clamp(3.3rem, 16vw, 5rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .journey-note { max-width: none; }
  .streetcar-scene { min-height: 330px; margin: 0 -2rem; }
  .sun { right: 13%; top: 5%; width: 145px; height: 145px; }
  .route-tag { display: none; }
  .section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
  .section-heading { margin-bottom: 3rem; }
  .route { grid-template-columns: repeat(5, minmax(74px, 1fr)); gap: .2rem; margin-left: -.85rem; margin-right: -.85rem; overflow-x: auto; padding: .25rem .85rem .8rem; scrollbar-width: none; }
  .route::-webkit-scrollbar { display: none; }
  .route-rail { left: 48px; right: 48px; }
  .route-stop { min-width: 74px; }
  .route-stop small { display: none; }
  .route-stop strong { font-size: .84rem; }
  .stop-dot { width: 48px; height: 48px; }
  .stop-dot span { width: 30px; height: 30px; }
  .stage-panel { grid-template-columns: 1fr; padding: 2rem 1.4rem; }
  .stage-ticket { display: none; }
  .stage-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .panel-controls { grid-column: auto; }
  .finder { padding-left: 1rem; padding-right: 1rem; }
  .choice { font-size: .9rem; }
  .footer { align-items: flex-start; flex-direction: column; gap: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}