.guide-main { padding: 35px 0 100px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin: 8px 0 45px; color: var(--muted); font-size: 14px; font-weight: 800; }
.breadcrumbs a { text-decoration: none; }
.guide-hero { min-height: 650px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .7fr); align-items: center; gap: clamp(35px, 7vw, 100px); padding: clamp(35px, 6vw, 75px); overflow: hidden; border-radius: 44px; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(199,239,243,.8) 62%, rgba(240,189,79,.36)); box-shadow: 0 30px 90px rgba(60,47,27,.12); }
.guide-hero h1 { max-width: 720px; font-size: clamp(54px, 7vw, 88px); }
.guide-hero .lede { max-width: 680px; margin-bottom: 32px; }
.guide-phone { width: min(320px, 100%); margin: 80px auto -190px; overflow: hidden; border: 9px solid var(--ink); border-radius: 45px 45px 0 0; box-shadow: 0 35px 70px rgba(24,24,21,.28); transform: rotate(3deg); }
.guide-phone img { width: 100%; }
.guide-intro { max-width: 850px; margin: 115px auto 58px; text-align: center; }
.guide-intro h2, .guide-explainer h2 { margin: 0; font-size: clamp(42px, 5vw, 67px); line-height: 1; letter-spacing: -.065em; }
.guide-intro > p:last-child { max-width: 720px; margin: 24px auto 0; color: var(--muted); font-size: 19px; line-height: 1.6; }
.stop-list { max-width: 920px; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.stop-list li { display: grid; grid-template-columns: 85px 1fr; gap: 25px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.stop-list li > span:first-child { color: var(--green); font-size: 13px; font-weight: 950; letter-spacing: .12em; }
.stop-list h3 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
.stop-list p { margin: 9px 0 0; color: var(--muted); line-height: 1.55; }
.local-tip { max-width: 920px; margin: 32px auto 100px; padding: 30px; border-radius: 24px; background: var(--green-dark); color: white; }
.local-tip .kicker { margin-bottom: 9px; color: var(--gold); }
.local-tip > p:last-child { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 700; }
.guide-explainer { padding: clamp(35px, 6vw, 75px); border-radius: 40px; background: var(--ink); color: white; }
.guide-explainer .kicker { color: var(--gold); }
.guide-explainer > div { max-width: 800px; }
.guide-explainer ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: steps; }
.guide-explainer li { display: grid; gap: 8px; padding: 24px; border-radius: 22px; background: rgba(255,255,255,.09); counter-increment: steps; }
.guide-explainer li::before { content: "0" counter(steps); color: var(--green); font-size: 12px; font-weight: 950; letter-spacing: .12em; }
.guide-explainer li strong { font-size: 17px; }
.guide-explainer li span { color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.5; }
.coverage-note { max-width: 850px; margin: 28px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.guide-explainer .coverage-note { color: rgba(255,255,255,.75); }
.city-hero { min-height: auto; grid-template-columns: minmax(0, 1fr) minmax(260px, .5fr); gap: 35px; padding: clamp(28px, 4vw, 55px); }
.city-hero h1 { font-size: clamp(2.5rem, 4.7vw, 4.5rem); line-height: 1.04; letter-spacing: -.055em; overflow-wrap: break-word; }
.city-hero .lede { font-size: 18px; line-height: 1.6; margin-bottom: 0; }
.catalogue-card { padding: 24px; background: rgba(255,255,255,.8); border-radius: 22px; text-align: left; }
.catalogue-card h2 { margin: 0; font-size: 22px; }
.catalogue-card ul { padding-left: 20px; }
.catalogue-card li { padding: 6px 0; line-height: 1.4; }
.catalogue-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.walk-options, .guide-stops, .visitor-notes { max-width: 920px; margin: 64px auto; }
.walk-options h2, .guide-stops > h2, .visitor-notes h2, .related-guides h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.04em; }
.walk-options > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.walk-options article { padding: 26px; background: rgba(255,255,255,.7); border-radius: 22px; }
.walk-options h3 { margin-top: 0; font-size: 20px; }
.walk-options article p, .visitor-notes p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.visitor-notes li { margin: 10px 0; line-height: 1.5; }
.local-tip { margin-bottom: 55px; }
.city-app-example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .4fr); gap: 45px; align-items: center; }
.city-app-example h2 { font-size: clamp(2.3rem, 4vw, 3.5rem); }
.city-app-example > div > p:not(.kicker) { line-height: 1.6; }
.city-app-example figure { margin: 0; }
.city-app-example img { border-radius: 24px; height: auto; }
.city-app-example figcaption { margin-top: 15px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.75); }
.city-app-example .button-primary { display: inline-block; margin-top: 15px; }
.related-guides { padding: 100px 0 0; }
.related-guides > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.related-guides a { display: flex; justify-content: space-between; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.62); text-decoration: none; font-size: 14px; font-weight: 900; }
.related-guides a:hover { border-color: rgba(53,184,111,.55); }
.related-guides a span { color: var(--green); }
.feature-points { display: grid; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.feature-points li { font-size: 14px; font-weight: 850; }
.feature-points li::before { content: "✓"; margin-right: 9px; color: var(--green); }
.feature-explainer { margin-top: 100px; }

@media (max-width: 900px) {
  .guide-hero { grid-template-columns: 1fr; text-align: center; }
  .guide-hero .lede { margin-inline: auto; }
  .guide-phone { margin-top: 20px; }
  .guide-explainer ol { grid-template-columns: 1fr; }
  .related-guides > div { grid-template-columns: repeat(2, 1fr); }
  .city-hero, .city-app-example { grid-template-columns: 1fr; }
  .city-app-example figure { width: min(260px, 100%); margin: 0 auto; }
}

@media (max-width: 620px) {
  .guide-main { padding-top: 20px; }
  .breadcrumbs { margin-bottom: 25px; }
  .guide-hero { min-height: auto; padding: 48px 22px; border-radius: 28px; }
  .guide-hero h1 { font-size: clamp(2.5rem, 10vw, 3.375rem); }
  .guide-phone { width: 250px; margin-bottom: -170px; }
  .guide-intro { margin-top: 105px; }
  .stop-list li { grid-template-columns: 50px 1fr; gap: 10px; }
  .local-tip { margin-bottom: 70px; }
  .guide-explainer { padding: 42px 24px; border-radius: 28px; }
  .related-guides { padding-top: 75px; }
  .related-guides > div { grid-template-columns: 1fr; }
  .walk-options > div { grid-template-columns: 1fr; }
}