:root {
  --brand-orange: #f58220;
  --brand-orange-hover: #c75d0a;
  --brand-orange-soft: #fff1e5;
  --surface: #fbfaf7;
  --surface-warm: #f3eee7;
  --surface-raised: #ffffff;
  --text-primary: #1f2326;
  --text-secondary: #6f7476;
  --border: #e6e5e1;
  --success: #2d7b59;
  --warning: #ad6a19;
  --orange: var(--brand-orange);
  --orange-dark: var(--brand-orange-hover);
  --orange-soft: var(--brand-orange-soft);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --paper: var(--surface);
  --white: var(--surface-raised);
  --green: var(--success);
  --shadow: 0 18px 50px rgba(39, 29, 19, 0.08);
  --radius-lg: 24px;
  --radius-md: 16px;
  --sidebar-width: 220px;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; }
a { color: inherit; }
p { line-height: 1.62; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong { letter-spacing: -0.035em; }
h1, h2, h3 { line-height: 1.08; }
h2 { font-size: clamp(1.65rem, 2.2vw, 2.55rem); margin-bottom: 0; }
h3 { font-size: 1.2rem; }

.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; transform: translateY(-150%); background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 26px 18px 20px; background: #f7f5f0; border-right: 1px solid var(--line); z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--white); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); flex: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand strong { display: block; font-size: .95rem; letter-spacing: -.04em; white-space: nowrap; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: .69rem; letter-spacing: .02em; }
.sidebar-nav { display: grid; gap: 4px; margin-top: 56px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; color: var(--muted); text-decoration: none; border-radius: 12px; font-size: .88rem; transition: background .2s ease, color .2s ease; }
.nav-item:hover, .nav-item:focus-visible, .nav-item.is-active { background: var(--white); color: var(--ink); box-shadow: 0 4px 12px rgba(41,32,23,.04); }
.nav-item.is-active { font-weight: 700; }
.nav-icon { width: 22px; color: var(--orange); font-size: 1.2rem; line-height: 1; text-align: center; }
.sidebar-note { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding: 13px 8px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; line-height: 1.45; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(45,123,89,.12); display: inline-block; flex: none; margin-top: 4px; }
.main-content { margin-left: var(--sidebar-width); min-width: 0; }
.mobile-header { display: none; }
.hero-section { position: relative; padding: clamp(52px, 8vw, 116px) clamp(22px, 7vw, 112px) 48px; background: #f3eee7; overflow: hidden; }
.hero-section::after { content: ""; position: absolute; width: 42vw; height: 42vw; max-width: 650px; max-height: 650px; border-radius: 50%; top: -30%; right: -12%; border: 1px solid rgba(245,130,32,.12); box-shadow: 0 0 0 42px rgba(245,130,32,.04), 0 0 0 84px rgba(245,130,32,.03); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; max-width: 830px; }
.eyebrow, .section-kicker { color: var(--orange-dark); text-transform: uppercase; font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.eyebrow-line { width: 26px; height: 2px; background: var(--orange); }
.hero-copy h1 { max-width: 800px; margin-bottom: 18px; font-size: clamp(2.45rem, 5.3vw, 5.8rem); line-height: .98; }
.hero-intro { max-width: 580px; margin-bottom: 0; color: #575b5a; font-size: clamp(1rem, 1.25vw, 1.18rem); }
.planner-card { position: relative; z-index: 2; max-width: 1140px; margin: 46px auto 0; padding: 24px; border: 1px solid rgba(31,35,38,.07); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.planner-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.planner-head h2 { margin-top: 6px; font-size: 1.5rem; }
.planner-badge, .data-note { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 99px; background: #f7f6f2; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.planner-fields { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) minmax(155px, .8fr) auto; gap: 12px; align-items: end; }
.field { min-width: 0; display: grid; gap: 8px; color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .03em; }
.field select, .field input { min-width: 0; width: 100%; height: 50px; padding: 0 14px; border: 1px solid #dcdcd7; border-radius: 12px; background: var(--white); color: var(--ink); outline: none; }
.field select:focus, .field input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(245,130,32,.14); }
.swap-button { width: 34px; height: 34px; border: 1px solid #deddd7; border-radius: 50%; background: var(--white); color: var(--orange-dark); cursor: pointer; transform: translateY(-8px); }
.swap-button:hover { background: var(--orange-soft); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 17px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; font-weight: 750; font-size: .83rem; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--orange); color: var(--white); }
.button-primary:hover, .button-primary:focus-visible { background: var(--orange-dark); }
.button-secondary { border-color: #d9d6ce; background: transparent; color: var(--ink); }
.button-secondary:hover, .button-secondary:focus-visible { border-color: var(--orange); background: var(--orange-soft); }
.planner-submit { min-height: 50px; white-space: nowrap; }
.planner-footnote { margin: 14px 0 0; color: var(--muted); font-size: .72rem; }
.planner-footnote span { color: var(--orange); font-size: 1rem; margin-right: 4px; }
.planner-result { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--orange-soft); color: #71401e; font-size: .82rem; line-height: 1.5; }
.planner-result strong { color: var(--ink); }
.planner-result a { color: var(--orange-dark); font-weight: 750; }
.content-wrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(22px, 6vw, 98px); }
.content-section { padding: clamp(62px, 8vw, 112px) 0 0; scroll-margin-top: 20px; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.section-heading-row h2 { margin-top: 9px; }
.section-side-note { max-width: 380px; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.text-link { color: var(--orange-dark); font-size: .78rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; }
.route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.route-card { min-width: 0; display: flex; flex-direction: column; min-height: 220px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.route-card:hover { transform: translateY(-2px); border-color: rgba(245,130,32,.5); box-shadow: 0 14px 30px rgba(47, 33, 19, .07); }
.route-card { padding: 0; overflow: hidden; }
.route-card-image { display: block; height: 142px; background: var(--surface-warm); overflow: hidden; }
.route-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.route-card:hover .route-card-image img { transform: scale(1.025); }
.route-ticket-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 17px 19px 18px; }
.route-corner { color: var(--orange); font-size: 1.15rem; }
.route-timetable { display: grid; gap: 4px; margin-top: 2px; }
.route-timetable strong { font-size: .78rem; letter-spacing: -.015em; }
.route-timetable span { color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.route-top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.verified-pill { color: var(--green); }
.route-card h3 { margin: 32px 0 10px; font-size: 1.3rem; }
.route-card h3 a { text-decoration: none; }
.route-card h3 a:hover { color: var(--orange-dark); }
.route-arrow { color: var(--orange); padding: 0 4px; }
.route-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .74rem; }
.route-meta span { overflow-wrap: anywhere; }
.route-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; color: var(--orange-dark); text-decoration: none; font-size: .78rem; font-weight: 800; }
.network-section { padding-top: clamp(74px, 9vw, 124px); }
.corridor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.corridor-card { min-width: 0; min-height: 238px; padding: 20px; border-radius: var(--radius-md); background: var(--ink); color: var(--white); overflow: hidden; }
.corridor-card:nth-child(2) { background: #513c2f; }
.corridor-card:nth-child(3) { background: #303b3a; }
.corridor-card:nth-child(4) { background: #394052; }
.corridor-card header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 28px; }
.corridor-card header span { color: #f8c095; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.corridor-card header strong { font-size: .76rem; color: rgba(255,255,255,.65); }
.corridor-list { margin: 0; padding: 0; list-style: none; }
.corridor-list li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 39px; font-size: .92rem; font-weight: 700; }
.corridor-list li:not(:last-child)::after { content: ""; position: absolute; top: 30px; left: 6px; width: 1px; height: 17px; background: rgba(255,255,255,.35); }
.corridor-node { width: 13px; height: 13px; border: 3px solid var(--orange); border-radius: 50%; background: var(--ink); flex: none; }
.corridor-list a { text-decoration: none; }
.corridor-list a:hover { color: #ffc28f; }
.corridor-note { margin: 17px 0 0; color: rgba(255,255,255,.58); font-size: .7rem; line-height: 1.45; }
.split-section { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(30px, 7vw, 110px); align-items: center; }
.split-copy { max-width: 660px; }
.split-copy h2 { margin: 10px 0 20px; }
.split-copy p { color: var(--muted); font-size: .94rem; }
.split-copy .direct-answer { color: var(--ink); font-size: 1.05rem; }
.split-copy .button { margin-top: 12px; }
.connection-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 14px 34px rgba(48,34,20,.05); }
.connection-label { margin-bottom: 20px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 800; }
.connection-step { display: flex; align-items: center; gap: 14px; }
.connection-step strong, .connection-step small { display: block; }
.connection-step strong { font-size: 1rem; }
.connection-step small { margin-top: 4px; color: var(--muted); font-size: .72rem; }
.connection-node { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-dark); font-size: .7rem; font-weight: 800; flex: none; }
.connection-node.train-node { background: #edf0ef; color: var(--green); }
.connection-line { width: 1px; height: 24px; margin: 3px 0 3px 18px; border-left: 1px dashed #c6c9c4; }
.card-note { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; line-height: 1.5; }
.schedule-panel { padding: 20px; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); }
.schedule-controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.schedule-controls .button { min-height: 50px; }
.schedule-output { margin-top: 20px; border-top: 1px solid var(--line); }
.empty-state { display: grid; place-items: center; padding: 34px 14px 25px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-dark); font-size: 1.3rem; }
.empty-state strong { font-size: .93rem; letter-spacing: -.02em; }
.empty-state p { max-width: 500px; margin: 8px 0 0; color: var(--muted); font-size: .75rem; }
.schedule-result { padding: 20px 0 4px; }
.schedule-result h3 { margin-bottom: 5px; }
.schedule-result p { margin-bottom: 0; color: var(--muted); font-size: .8rem; }
.schedule-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.schedule-placeholder { padding: 16px; border-radius: 12px; background: #f7f6f2; color: var(--muted); font-size: .75rem; }
.station-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.station-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.station-card.has-image { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 15px; align-items: center; }
.station-thumb { width: 94px; height: 94px; border-radius: 12px; object-fit: cover; }
.station-card h3 { margin: 0 0 6px; font-size: 1.04rem; }
.station-card h3 a { text-decoration: none; }
.station-card h3 a:hover { color: var(--orange-dark); }
.station-card p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.station-status { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; color: var(--orange-dark); font-size: .66rem; font-weight: 750; }
.station-status .status-dot { width: 6px; height: 6px; margin: 0; background: var(--orange); box-shadow: none; }
.station-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: .7rem; font-weight: 750; }
.station-links a { color: var(--orange-dark); text-decoration: none; }
.utility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.utility-card { min-width: 0; display: block; min-height: 145px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.utility-card:hover { border-color: rgba(245,130,32,.5); background: #fffdfb; }
.utility-card summary { list-style: none; cursor: pointer; }
.utility-card summary::-webkit-details-marker { display: none; }
.utility-card strong, .utility-card summary > span:not(.utility-icon), .utility-card > span:not(.utility-icon) { display: block; }
.utility-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 10px; background: var(--orange-soft); color: var(--orange-dark); font-size: 1.1rem; }
.utility-card strong { margin-bottom: 5px; font-size: .95rem; }
.utility-card summary > span:not(.utility-icon), .utility-card > span:not(.utility-icon) { color: var(--muted); font-size: .75rem; }
.utility-card em { display: block; margin-top: 17px; color: var(--orange-dark); font-size: .67rem; font-style: normal; font-weight: 750; }
.utility-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .74rem; line-height: 1.5; }
.utility-detail p { margin-bottom: 10px; }
.utility-detail a { color: var(--orange-dark); font-weight: 750; }
.choice-fieldset { min-width: 0; margin: 14px 0 10px; padding: 0; border: 0; }
.choice-fieldset legend { margin-bottom: 8px; color: var(--ink); font-size: .7rem; font-weight: 750; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.choice-grid button { min-width: 0; padding: 8px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); cursor: pointer; font-size: .67rem; text-align: left; overflow-wrap: anywhere; }
.choice-grid button:hover, .choice-grid button:focus-visible, .choice-grid button.is-selected { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-dark); }
.choice-grid-timing { grid-template-columns: 1fr; }
.utility-feedback { margin: 8px 0 11px !important; color: var(--orange-dark); font-size: .68rem; }
.featured-section { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.featured-image-wrap { position: relative; min-width: 0; }
.featured-image-wrap img { width: 100%; aspect-ratio: 1.12; object-fit: cover; border-radius: var(--radius-lg); }
.image-caption { position: absolute; left: 14px; bottom: 14px; padding: 7px 10px; border-radius: 8px; background: rgba(31,35,38,.78); color: var(--white); font-size: .64rem; }
.featured-copy h2 { margin: 10px 0 18px; }
.featured-copy h2 a { text-decoration: none; }
.featured-copy h2 a:hover { color: var(--orange-dark); }
.featured-copy h2 span { color: var(--orange); }
.featured-copy p { color: var(--muted); font-size: .9rem; }
.featured-copy .direct-answer { color: var(--ink); font-size: 1rem; }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 25px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); }
.fact-grid div { min-width: 0; padding: 13px; background: var(--white); }
.fact-grid span, .fact-grid strong { display: block; }
.fact-grid span { margin-bottom: 5px; color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.fact-grid strong { font-size: .76rem; line-height: 1.35; overflow-wrap: anywhere; }
.featured-copy h3 { margin: 28px 0 10px; }
.featured-copy .button { margin-top: 6px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; border-top: 1px solid var(--line); }
.faq-tools { display: grid; gap: 14px; margin: 6px 0 22px; }
.faq-search { display: grid; gap: 7px; max-width: 520px; }
.faq-search span { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.faq-search input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.faq-search input:focus-visible { outline: 3px solid rgba(245,130,32,.28); outline-offset: 2px; border-color: var(--orange); }
.faq-filters { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.faq-filters button { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: .68rem; font-weight: 750; cursor: pointer; }
.faq-filters button:hover, .faq-filters button:focus-visible, .faq-filters button.is-active { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-dark); }
.faq-category { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.faq-category h3 { grid-column: 1 / -1; margin: 26px 0 0; padding-top: 16px; color: var(--orange-dark); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.faq-no-results { margin: 20px 0 0; color: var(--muted); font-size: .8rem; }
.faq-grid details { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq-grid summary { position: relative; padding-right: 24px; cursor: pointer; list-style: none; font-size: .92rem; font-weight: 750; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: "+"; position: absolute; right: 0; color: var(--orange); font-size: 1.2rem; font-weight: 400; }
.faq-grid details[open] summary::after { content: "–"; }
.faq-grid p { margin: 11px 0 0; color: var(--muted); font-size: .78rem; }
.site-footer { margin-top: clamp(70px, 10vw, 140px); padding: 40px clamp(22px, 6vw, 98px) 30px; border-top: 1px solid var(--line); background: #f3eee7; }
.footer-main { display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.footer-main p { max-width: 430px; margin: 0; color: var(--muted); font-size: .72rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 34px 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); font-size: .72rem; font-weight: 750; }
.footer-links a { text-decoration: none; }
.footer-links a:hover, .footer-bottom a:hover { color: var(--orange-dark); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .65rem; }
.footer-bottom a { color: var(--ink); text-decoration: none; font-weight: 700; }
.bottom-nav { display: none; }

@media (max-width: 1120px) {
  :root { --sidebar-width: 190px; }
  .planner-fields { grid-template-columns: 1fr 34px 1fr 1fr; }
  .planner-submit { grid-column: 1 / -1; width: 100%; }
  .corridor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  :root { --sidebar-width: 0px; }
  .sidebar { display: none; }
  .main-content { margin-left: 0; padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .mobile-header .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .mobile-header .brand strong { font-size: .85rem; }
  .mobile-header .brand small { font-size: .63rem; }
  .header-link { color: var(--orange-dark); font-size: .76rem; font-weight: 750; text-decoration: none; }
  .hero-section { padding-top: 50px; }
  .split-section, .featured-section { grid-template-columns: 1fr; }
  .featured-image-wrap { max-width: 620px; }
  .schedule-controls { grid-template-columns: 1fr 1fr; }
  .schedule-controls .button { grid-column: 1 / -1; width: 100%; }
  .station-grid, .utility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-nav { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 7px 5px; border: 1px solid rgba(31,35,38,.08); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 15px 35px rgba(39,29,19,.16); backdrop-filter: blur(18px); }
  .bottom-nav-item { display: grid; place-items: center; min-height: 54px; gap: 2px; color: var(--muted); text-decoration: none; border-radius: 13px; }
  .bottom-nav-item span { color: var(--orange-dark); font-size: 1.2rem; line-height: 1; }
  .bottom-nav-item small { font-size: .62rem; font-weight: 750; }
  .bottom-nav-item.is-active { color: var(--ink); background: var(--orange-soft); }
}

@media (max-width: 560px) {
  .hero-section { padding: 40px 16px 26px; }
  .hero-copy h1 { font-size: clamp(2.25rem, 12vw, 3.7rem); }
  .planner-card { margin-top: 34px; padding: 16px; border-radius: 18px; }
  .planner-head { margin-bottom: 17px; }
  .planner-head h2 { font-size: 1.3rem; }
  .planner-badge { padding: 6px 8px; font-size: .64rem; }
  .planner-fields { grid-template-columns: 1fr; gap: 10px; }
  .swap-button { justify-self: end; transform: translateY(0) rotate(90deg); margin: -3px 13px -3px 0; }
  .planner-submit { grid-column: auto; }
  .content-wrap { padding: 0 16px; }
  .content-section { padding-top: 64px; }
  .section-heading-row { display: block; margin-bottom: 22px; }
  .section-heading-row h2 { font-size: 1.75rem; }
  .section-side-note { margin-top: 14px; }
  .text-link, .data-note { display: inline-flex; margin-top: 16px; }
  .route-grid, .corridor-grid, .station-grid, .utility-grid, .faq-grid, .faq-category { grid-template-columns: 1fr; }
  .route-card { min-height: 190px; }
  .corridor-card { min-height: 220px; }
  .split-section { gap: 30px; }
  .schedule-panel { padding: 14px; }
  .schedule-controls { grid-template-columns: 1fr; }
  .schedule-controls .button { grid-column: auto; }
  .featured-image-wrap img { aspect-ratio: 1.25; }
  .featured-copy h2 { font-size: 2rem; }
  .fact-grid { grid-template-columns: 1fr; }
  .site-footer { padding: 34px 16px 26px; }
  .footer-main, .footer-bottom { display: block; }
  .footer-main p { margin-top: 20px; }
  .footer-bottom span { display: block; margin-top: 7px; }
}

/* Homepage revision: editorial hero, route stories and station selector. */
.hero-section { padding-top: 14px; }
.hero-slider { position: relative; width: min(100%, 1540px); min-height: clamp(340px, 43vw, 630px); margin: 0 auto; overflow: hidden; border-radius: 24px; background: #25221f; box-shadow: 0 22px 54px rgba(39,29,19,.14); isolation: isolate; }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { visibility: hidden; opacity: 0; transition: opacity .6s ease, visibility .6s ease; }
.hero-slide.is-active { visibility: visible; opacity: 1; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(16,14,12,.82) 0%, rgba(16,14,12,.52) 35%, rgba(16,14,12,.08) 73%), linear-gradient(0deg, rgba(16,14,12,.48), transparent 45%); }
.hero-slide-copy { position: absolute; z-index: 2; left: clamp(24px, 7vw, 108px); bottom: clamp(34px, 8vw, 100px); width: min(560px, calc(100% - 48px)); color: #fff; }
.hero-slide-label { display: inline-block; margin-bottom: 13px; color: #ffc78e; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-slide-copy h1, .hero-slide-copy h2 { max-width: 610px; margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 5rem); line-height: .98; letter-spacing: -.045em; }
.hero-slide-copy p { max-width: 470px; margin: 19px 0 23px; color: rgba(255,255,255,.82); font-size: clamp(.85rem, 1.4vw, 1.08rem); line-height: 1.55; }
.hero-slide-copy .button { background: var(--orange); color: #271d14; border-color: var(--orange); }
.hero-control { position: absolute; z-index: 3; top: 50%; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: rgba(22,18,14,.35); color: #fff; font-size: 1.2rem; transform: translateY(-50%); cursor: pointer; backdrop-filter: blur(8px); }
.hero-control:hover, .hero-control:focus-visible { background: var(--orange); color: #241b14; outline: none; }
.hero-prev { left: 22px; }.hero-next { right: 22px; }
.hero-pagination { position: absolute; z-index: 3; right: clamp(24px, 7vw, 108px); bottom: 28px; display: flex; gap: 8px; }
.hero-pagination button { width: 26px; height: 4px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.48); cursor: pointer; }
.hero-pagination button.is-active { width: 46px; background: var(--orange); }
.planner-card { position: relative; z-index: 4; max-width: 1160px; margin: -48px auto 0; }
.planner-card .planner-divider { margin-bottom: 0; }
.route-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route-card { overflow: hidden; }
.route-card-image { display: block; height: 205px; }
.route-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.route-card:hover .route-card-image img { transform: scale(1.035); }
.route-story { min-height: 43px; margin: 10px 0 13px; color: var(--muted); font-size: .73rem; line-height: 1.48; }
.schedule-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.schedule-result-actions .schedule-disclaimer { margin: 0; }
.connection-output { min-width: 0; }
.connection-legs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 19px; }
.connection-leg { padding: 13px; background: var(--white); border: 1px solid var(--line); }
.connection-leg strong, .connection-leg small, .connection-mode { display: block; }
.connection-mode { margin-bottom: 6px; color: var(--orange-dark); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.connection-leg strong { font-size: .76rem; }.connection-leg small { margin-top: 5px; color: var(--muted); font-size: .68rem; }
.connection-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.connection-meta span { padding: 9px; background: rgba(255,255,255,.62); color: var(--muted); font-size: .68rem; }
.connection-meta strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; }
.connection-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.station-selector { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 14px; align-items: stretch; }
.station-featured-wrap, .featured-station { min-width: 0; }
.featured-station { display: grid; grid-template-columns: minmax(260px, .95fr) minmax(0, 1.05fr); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-warm); }
.featured-station > img, .featured-station > .station-image { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.featured-station > .station-image img { display: block; width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.station-image-note { display: block; padding: 9px 14px; color: var(--muted); background: var(--surface); font-size: .67rem; line-height: 1.4; }
.featured-station-copy { padding: clamp(18px, 3vw, 30px); }
.featured-station-copy h3 { margin: 7px 0 10px; font-size: 1.8rem; }.featured-station-copy p { color: var(--muted); font-size: .75rem; line-height: 1.55; }
.station-selector-list { display: grid; gap: 7px; align-content: start; padding: 9px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-warm); }
.station-selector-list button { display: block; width: 100%; padding: 14px 15px; border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: left; cursor: pointer; }
.station-selector-list button:hover, .station-selector-list button.is-active { border-color: rgba(221,108,31,.28); background: var(--white); }
.station-selector-list span, .station-selector-list small { display: block; }.station-selector-list span { color: var(--ink); font-size: .82rem; font-weight: 800; }.station-selector-list small { margin-top: 4px; color: var(--muted); font-size: .66rem; }
.featured-station .station-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px 0 22px; }.featured-station .station-links .button { min-height: 38px; padding: 0 12px; font-size: .67rem; }
.featured-station h4 { margin: 0 0 8px; font-size: .78rem; }.featured-route-list { display: grid; gap: 5px; }.featured-route-list a { display: flex; justify-content: space-between; gap: 9px; color: var(--orange-dark); font-size: .7rem; font-weight: 750; text-decoration: none; }.featured-route-list small { color: var(--muted); font-weight: 500; }
.station-grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.station-grid-all .station-card { min-height: 176px; }.station-grid-all .station-thumb { width: 112px; height: 112px; }.station-route-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }.station-route-tags a { color: var(--orange-dark); font-size: .62rem; text-decoration: none; }
.station-grid-all .station-links { display: flex; gap: 12px; }.station-grid-all .station-links a { font-size: .65rem; }
@media (min-width: 1500px) { .hero-slider { min-height: 650px; } }
@media (max-width: 1180px) { .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .hero-slider { min-height: 480px; }
  .planner-card { margin-top: 16px; }
  .station-selector { grid-template-columns: 1fr; }.station-selector-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .featured-station > img, .featured-station > .station-image, .featured-station > .station-image img { min-height: 300px; }
  .station-grid-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero-section { padding-top: 0; }.hero-slider { min-height: 410px; border-radius: 16px; }.hero-slide-shade { background: linear-gradient(0deg, rgba(16,14,12,.84) 0%, rgba(16,14,12,.2) 70%); }
  .hero-slide-copy { left: 20px; bottom: 64px; width: calc(100% - 40px); }.hero-slide-copy h1, .hero-slide-copy h2 { font-size: 2.25rem; }.hero-slide-copy p { margin: 12px 0 16px; font-size: .78rem; }.hero-control { top: 22px; transform: none; }.hero-prev { left: 18px; }.hero-next { right: 18px; }.hero-pagination { right: 20px; bottom: 29px; }
  .route-grid, .station-grid-all { grid-template-columns: 1fr; }.route-card-image { height: 190px; }.schedule-result-actions { display: grid; align-items: start; }.connection-legs { grid-template-columns: 1fr; }.connection-meta { grid-template-columns: 1fr 1fr; }.station-selector-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.featured-station { grid-template-columns: 1fr; }.featured-station > img, .featured-station > .station-image, .featured-station > .station-image img { min-height: 220px; max-height: 260px; }.featured-station-copy { padding: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }.route-card-image img { transition: none; }
}

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

/* Quality upgrade: keep the original booking widget's own typeahead in the page stacking flow. */
.hero-section { overflow: hidden; }
.planner-card { z-index: 30; }
.original-booking-shell { position: relative; z-index: 31; min-height: 150px; overflow: visible; }
.original-booking-shell #one2go { position: relative; z-index: 32; overflow: visible; }
.original-booking-shell #one2go .dropdown_12go-menu { z-index: 1100 !important; }
.content-wrap { position: relative; z-index: 1; }

.route-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 13px; margin-top: auto; padding-top: 18px; }
.route-actions .route-cta { margin-top: 0; padding-top: 0; }
.route-booking-link { color: var(--ink); font-size: .72rem; }

.flagship-section { padding-top: clamp(74px, 9vw, 124px); }
.flagship-list { display: grid; gap: 28px; }
.flagship-journey { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--white); }
.flagship-journey-reverse { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }
.flagship-journey-reverse .flagship-image-wrap { order: 2; }
.flagship-journey-reverse .flagship-copy { order: 1; }
.flagship-image-wrap { position: relative; min-width: 0; min-height: 390px; background: var(--surface-warm); }
.flagship-image-wrap img { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.flagship-copy { min-width: 0; padding: clamp(22px, 4vw, 44px); }
.flagship-copy h3 { margin: 10px 0 16px; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.flagship-copy h3 a { text-decoration: none; }
.flagship-copy h3 a:hover { color: var(--orange-dark); }
.flagship-copy p { color: var(--muted); font-size: .87rem; }
.flagship-copy .direct-answer { color: var(--ink); font-size: .98rem; }
.flagship-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 23px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); }
.flagship-facts div { min-width: 0; padding: 13px; background: var(--white); }
.flagship-facts span, .flagship-facts strong { display: block; }
.flagship-facts span { margin-bottom: 5px; color: var(--muted); font-size: .63rem; text-transform: uppercase; letter-spacing: .08em; }
.flagship-facts strong { font-size: .75rem; line-height: 1.35; overflow-wrap: anywhere; }
.flagship-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.flagship-actions .button { min-height: 42px; font-size: .72rem; }
.flagship-source-note { margin-top: 16px; color: var(--muted); font-size: .66rem !important; }

.departure-prep { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-bottom: 18px; }
.departure-prep article { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.departure-prep article > span { color: var(--orange-dark); font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.departure-prep h3 { margin: 25px 0 8px; font-size: .84rem; }
.departure-prep p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }

.station-finder-toolbar { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 18px; align-items: end; margin-bottom: 14px; }
.station-grid#station-cards { display: block; }
.station-finder-toolbar p { max-width: 650px; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.station-image-placeholder { display: grid; align-content: center; gap: 7px; min-height: 390px; padding: 28px; background: linear-gradient(135deg, #f2eee7, #e8e0d5); color: var(--orange-dark); }
.station-image-placeholder span { font-weight: 800; }
.station-image-placeholder small { color: var(--muted); line-height: 1.5; }
.station-guidance { padding-left: 12px; border-left: 2px solid var(--orange); }
.station-booking-link { display: inline-flex; margin-top: 20px; color: var(--orange-dark); font-size: .72rem; font-weight: 800; text-decoration: none; }
.station-selector-list button[hidden] { display: none; }

.external-recommendation { margin-top: 18px; padding: 15px 16px; border-left: 3px solid var(--orange); background: var(--orange-soft); }
.external-recommendation h4 { margin: 7px 0 5px; font-size: .84rem; }
.external-recommendation p { margin: 0 0 8px; font-size: .72rem; }
.external-recommendation .text-link { font-size: .7rem; }

@media (max-width: 1050px) {
  .departure-prep { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .flagship-journey, .flagship-journey-reverse { grid-template-columns: 1fr; }
  .flagship-journey-reverse .flagship-image-wrap, .flagship-journey-reverse .flagship-copy { order: initial; }
  .flagship-image-wrap, .flagship-image-wrap img { min-height: 300px; max-height: 360px; }
  .station-finder-toolbar { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
  .original-booking-shell { min-height: 190px; }
  .departure-prep { grid-template-columns: 1fr; }
  .departure-prep h3 { margin-top: 12px; }
  .flagship-copy { padding: 20px; }
  .flagship-facts { grid-template-columns: 1fr; }
  .flagship-image-wrap, .flagship-image-wrap img, .station-image-placeholder { min-height: 230px; max-height: 270px; }
  .station-image-placeholder { padding: 20px; }
}

/* Phase 2 app surfaces */
.hero-top { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: clamp(28px, 6vw, 86px); align-items: end; max-width: 1240px; margin: 0 auto; }
.hero-image-panel { position: relative; min-width: 0; margin: 0; }
.hero-image-panel img { width: 100%; aspect-ratio: 1.45; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 42px rgba(53, 38, 22, .15); }
.hero-image-panel figcaption { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; background: rgba(31,35,38,.8); color: var(--white); font-size: .68rem; }
.hero-image-panel figcaption .status-dot { margin: 0; background: #f9b167; box-shadow: 0 0 0 4px rgba(249,177,103,.15); }
.quick-trip-panel { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(210px, 1.15fr) minmax(280px, 1fr) auto; gap: 22px; align-items: center; max-width: 1140px; margin: 14px auto 0; padding: 18px 20px; border: 1px solid rgba(31,35,38,.08); border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 12px 28px rgba(39,29,19,.06); }
.quick-trip-route h2 { margin: 6px 0 4px; font-size: 1.35rem; }
.quick-trip-route h2 span { color: var(--orange); }
.quick-trip-route p { margin: 0; color: var(--muted); font-size: .72rem; }
.quick-trip-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quick-trip-facts div { min-width: 0; padding-left: 12px; border-left: 1px solid var(--line); }
.quick-trip-facts span, .quick-trip-facts strong { display: block; }
.quick-trip-facts span { color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
.quick-trip-facts strong { margin-top: 4px; font-size: .82rem; overflow-wrap: anywhere; }
.quick-trip-actions { display: flex; gap: 8px; }
.quick-trip-actions .button { min-height: 42px; padding: 0 12px; font-size: .71rem; }
.train-check-section { padding-top: clamp(74px, 9vw, 124px); }
.train-check-panel { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1fr); gap: 32px; padding: 22px; border-radius: var(--radius-lg); background: #edf0ee; }
.train-check-controls { display: grid; align-content: center; gap: 12px; }
.train-check-controls .button { width: 100%; }
.connection-output { min-width: 0; padding: 24px; border-radius: 18px; background: var(--white); }
.result-label { display: inline-flex; margin-bottom: 14px; color: var(--orange-dark); font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.connection-output h3 { margin-bottom: 10px; font-size: 1.3rem; }
.connection-output h3 span { color: var(--orange); }
.connection-output p { margin-bottom: 20px; color: var(--muted); font-size: .8rem; }
.connection-mini-line { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink); font-size: .72rem; font-weight: 750; }
.connection-mini-line span { overflow-wrap: anywhere; }
.connection-mini-line i { width: 22px; height: 1px; background: var(--orange); flex: none; }
.connection-builder-section { padding-top: clamp(58px, 7vw, 88px); }
.builder-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.builder-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 22px; }
.builder-steps > div { position: relative; min-width: 0; padding: 0 18px 0 47px; }
.builder-steps > div:not(:last-child)::after { content: "→"; position: absolute; right: -3px; top: 19px; color: var(--orange); font-size: 1.2rem; }
.builder-steps span { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-dark); font-size: .67rem; font-weight: 800; }
.builder-steps strong, .builder-steps em { display: block; }
.builder-steps strong { font-size: .84rem; }
.builder-steps em { margin-top: 6px; color: var(--muted); font-size: .68rem; font-style: normal; line-height: 1.4; }
.builder-card > p { max-width: 740px; margin-bottom: 15px; color: var(--muted); font-size: .8rem; }
.boarding-guide { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 20px; padding: 19px 20px; border-radius: 16px; background: var(--orange-soft); }
.boarding-guide h3 { margin: 7px 0 5px; }
.boarding-guide p { max-width: 700px; margin: 0; color: #71401e; font-size: .76rem; }
.boarding-guide .button { flex: none; }
.arrival-section { padding-top: clamp(62px, 8vw, 100px); }
.arrival-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.arrival-grid article { padding: 18px; border-left: 3px solid var(--orange); border-radius: 0 13px 13px 0; background: var(--white); }
.arrival-grid strong { font-size: .95rem; }
.arrival-grid p { margin: 8px 0 0; color: var(--muted); font-size: .75rem; }
.policy-feature-section { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: clamp(26px, 6vw, 90px); align-items: center; }
.policy-feature-copy h2, .ticket-answer h2 { margin: 10px 0 16px; }
.policy-feature-copy p, .ticket-answer p { max-width: 690px; color: var(--muted); font-size: .87rem; }
.policy-feature-copy .direct-answer, .ticket-answer .direct-answer { color: var(--ink); font-size: 1rem; }
.policy-stat { display: inline-flex; align-items: center; gap: 12px; margin: 9px 0 8px; }
.policy-stat strong { color: var(--orange-dark); font-size: 3.2rem; line-height: 1; }
.policy-stat span { max-width: 100px; color: var(--muted); font-size: .72rem; font-weight: 750; line-height: 1.35; }
.prohibited-card { padding: 24px; border-radius: var(--radius-lg); background: var(--ink); color: var(--white); }
.prohibited-card h3 { margin: 10px 0 16px; }
.prohibited-card ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: rgba(255,255,255,.8); font-size: .78rem; }
.prohibited-card li::before { content: "×"; display: inline-block; width: 20px; color: #f3a25e; font-weight: 800; }
.prohibited-card p { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.58); font-size: .69rem; }
.ticket-feature-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: clamp(26px, 6vw, 90px); align-items: center; }
.ticket-rule-list { display: grid; gap: 8px; }
.ticket-rule-list > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.rule-number { grid-row: span 2; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-dark); font-size: .62rem; font-weight: 800; }
.ticket-rule-list strong, .ticket-rule-list small { display: block; }
.ticket-rule-list strong { align-self: end; font-size: .8rem; }
.ticket-rule-list small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.policy-decision-panel { padding: 20px; border-radius: var(--radius-lg); background: #f0ece6; }
.policy-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #e5dfd5; }
.policy-tabs button, .comparison-options button, .policy-choice-row button { border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: .72rem; font-weight: 750; }
.policy-tabs button { padding: 9px 16px; }
.policy-tabs button.is-active, .comparison-options button.is-active { background: var(--white); color: var(--ink); box-shadow: 0 3px 9px rgba(40,32,23,.07); }
.policy-decision-output { margin-top: 20px; padding: 20px; border-radius: 15px; background: var(--white); }
.policy-decision-output h3 { margin-bottom: 14px; }
.policy-choice-row { display: flex; flex-wrap: wrap; gap: 7px; }
.policy-choice-row button { padding: 10px 12px; border: 1px solid var(--line); background: var(--white); text-align: left; }
.policy-choice-row button:hover, .policy-choice-row button:focus-visible { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-dark); }
.policy-answer { min-height: 22px; margin: 16px 0 0; color: var(--muted); font-size: .8rem; }
.comparison-panel { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); gap: 26px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.comparison-question > strong { font-size: .9rem; }
.comparison-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.comparison-options button { padding: 9px 10px; background: #f7f6f2; }
.comparison-answer { padding: 2px 0 2px 25px; border-left: 2px solid var(--orange); }
.comparison-answer h3 { margin-bottom: 8px; font-size: 1.06rem; }
.comparison-answer p { margin: 0; color: var(--muted); font-size: .8rem; }
.long-distance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.long-distance-grid article { min-width: 0; min-height: 200px; padding: 20px; border-radius: var(--radius-md); background: var(--ink); color: var(--white); }
.long-distance-grid article:nth-child(2) { background: #513c2f; }
.long-distance-grid article:nth-child(3) { background: #303b3a; }
.long-distance-grid article > span { color: #f8c095; font-size: .7rem; font-weight: 750; }
.long-distance-grid h3 { margin: 35px 0 10px; font-size: 1.08rem; }
.long-distance-grid p { margin: 0; color: rgba(255,255,255,.68); font-size: .75rem; }
.schedule-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.schedule-list { grid-template-columns: 1fr; }
.schedule-filters button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--muted); cursor: pointer; font-size: .7rem; font-weight: 750; }
.schedule-filters button.is-active, .schedule-filters button:hover, .schedule-filters button:focus-visible { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-dark); }
.schedule-result-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.schedule-result-heading h3 { margin-bottom: 5px; }
.schedule-result-heading p { margin: 0; color: var(--muted); font-size: .72rem; }
.fare-chip { flex: none; padding: 8px 10px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-dark); font-size: .7rem; font-weight: 800; }
.schedule-service { display: grid; grid-template-columns: minmax(72px, .8fr) 80px minmax(88px, .9fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.schedule-service:last-child { border-bottom: 0; }
.schedule-time strong, .schedule-time span { display: block; }
.schedule-time strong { font-size: 1.05rem; }
.schedule-time span { margin-top: 3px; color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
.schedule-arrival { text-align: right; }
.schedule-track { display: flex; align-items: center; gap: 5px; color: var(--orange); }
.schedule-track i { width: 7px; height: 7px; border: 2px solid var(--orange); border-radius: 50%; flex: none; }
.schedule-track span { height: 1px; background: var(--orange); flex: 1; }
.schedule-duration { color: var(--muted); font-size: .68rem; text-align: right; white-space: nowrap; }
.schedule-disclaimer { margin: 15px 0 0; color: var(--muted); font-size: .7rem; }
.station-phone { display: block; margin-top: 7px; color: var(--muted); font-size: .72rem; }
.policy-choice-row button.is-selected { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-dark); }
.not-found { min-height: 100vh; display: grid; place-content: center; gap: 15px; max-width: 620px; margin: 0 auto; padding: 32px 20px; }
.not-found h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 4.5rem); }
.not-found p { max-width: 480px; margin: 0 0 8px; color: var(--muted); }
.booking-heading { max-width: 620px; margin-bottom: 18px; }
.booking-heading h2 { margin: 8px 0 7px; font-size: clamp(2rem, 3.3vw, 3.2rem); }
.booking-heading p { margin: 0; color: var(--muted); font-size: .82rem; }
.original-booking-shell { min-height: 116px; display: grid; align-content: center; padding: 4px 0; }
.original-booking-shell > * { max-width: 100%; }
.original-booking-shell iframe, .original-booking-shell form, .original-booking-shell input, .original-booking-shell select, .original-booking-shell button { max-width: 100%; }
.original-booking-shell > script { display: block; }
.original-booking-shell #powered { display: none; }
.planner-divider { display: flex; align-items: center; gap: 12px; margin: 7px 0 2px; color: var(--muted); font-size: .67rem; }
.planner-divider::before, .planner-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.route-data-form { padding-top: 7px; }
.route-data-form .planner-head { margin-bottom: 16px; }
.route-data-form .planner-head h3 { margin: 7px 0 0; font-size: 1.05rem; }
.network-workspace { min-width: 0; padding: 22px; border: 1px solid var(--line); background: var(--white); }
.network-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.network-search { display: grid; gap: 8px; color: var(--muted); font-size: .7rem; font-weight: 750; }
.network-search input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #dcdcd7; border-radius: 10px; background: var(--surface); color: var(--ink); outline: none; }
.network-search input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(245,130,32,.14); }
.location-button { min-height: 48px; }
.network-search-results { display: flex; flex-wrap: wrap; gap: 7px; min-height: 0; margin-top: 8px; }
.network-search-results:empty { display: none; }
.network-search-results button { display: grid; gap: 3px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.network-search-results button:hover, .network-search-results button:focus-visible { border-color: var(--orange); background: var(--orange-soft); }
.network-search-results small { color: var(--muted); font-size: .65rem; }
.network-search-results > span { padding: 10px 0; color: var(--muted); font-size: .75rem; }
.map-filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 14px; }
.map-filter-row button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-size: .69rem; font-weight: 750; }
.map-filter-row button.is-active, .map-filter-row button:hover, .map-filter-row button:focus-visible { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-dark); }
.network-map-shell { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .65fr); gap: 18px; min-width: 0; }
.map-canvas-wrap { position: relative; min-width: 0; min-height: 420px; overflow: hidden; border: 1px solid #e1ddd4; background: #f2eee7; }
#network-map { width: 100%; height: 100%; min-height: 420px; overflow: hidden; }
.morocco-shape { fill: #e7dfd2; stroke: #d1c6b7; stroke-width: 2; }
.network-route-line { fill: none; stroke: #b6b4ae; stroke-width: 3; opacity: .7; transition: stroke .25s ease, opacity .25s ease, stroke-width .25s ease; }
.network-route-line.is-active { stroke: var(--orange); stroke-width: 6; opacity: 1; }
.network-station { cursor: pointer; outline: none; }
.network-station circle { fill: var(--ink); stroke: var(--surface); stroke-width: 3; transition: r .2s ease, fill .2s ease, stroke .2s ease; }
.network-station text { fill: var(--ink); font-size: 15px; font-weight: 750; paint-order: stroke; stroke: #f2eee7; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.network-station:hover circle, .network-station:focus circle { fill: var(--orange); stroke: var(--orange-soft); }
.network-station.is-selected circle { fill: var(--orange); stroke: var(--orange-soft); stroke-width: 6; }
.network-station.is-dimmed { opacity: .22; }
.map-controls { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; gap: 4px; }
.map-controls button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); background: rgba(255,255,255,.94); color: var(--ink); cursor: pointer; font-size: 1rem; }
.map-controls button:hover, .map-controls button:focus-visible { color: var(--orange-dark); border-color: var(--orange); }
.network-panel { min-width: 0; padding: 22px; border-left: 3px solid var(--orange); background: var(--surface); }
.network-panel h3 { margin: 9px 0 9px; font-size: 1.4rem; }
.network-panel h4 { margin: 22px 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.network-panel p { color: var(--muted); font-size: .77rem; }
.panel-hint { margin-top: 28px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; line-height: 1.55; }
.network-panel-image { width: calc(100% + 44px); height: 150px; margin: -22px -22px 19px; object-fit: cover; }
.panel-phone { color: var(--orange-dark) !important; font-weight: 750; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.panel-actions .button { min-height: 40px; padding: 0 11px; font-size: .69rem; }
.panel-route-list { display: grid; gap: 5px; }
.panel-route-list a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .73rem; }
.panel-route-list a:hover { color: var(--orange-dark); }
.panel-route-list small { color: var(--muted); }
.map-route-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.map-route-facts div { min-width: 0; padding: 9px 7px; background: var(--white); }
.map-route-facts span, .map-route-facts strong { display: block; }
.map-route-facts span { color: var(--muted); font-size: .6rem; text-transform: uppercase; }
.map-route-facts strong { margin-top: 4px; font-size: .69rem; overflow-wrap: anywhere; }
.location-result { padding: 10px; border-left: 2px solid var(--orange); background: var(--orange-soft); color: var(--orange-dark) !important; }
.departure-choice { margin: 24px 0 6px; padding: 18px; border-left: 3px solid var(--orange); background: var(--surface-warm); }
.departure-choice h3 { margin: 8px 0 15px; font-size: 1.08rem; }
.departure-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.departure-choice-grid div { min-width: 0; padding: 11px; background: var(--white); }
.departure-choice-grid strong, .departure-choice-grid span { display: block; }
.departure-choice-grid strong { font-size: .74rem; }
.departure-choice-grid span { margin-top: 5px; color: var(--muted); font-size: .67rem; line-height: 1.45; }
.network-fallback-heading { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin: 28px 0 14px; }
.network-fallback-heading h3 { margin: 0; font-size: 1.05rem; }
.network-fallback-heading p { max-width: 400px; margin: 0; color: var(--muted); font-size: .72rem; }
.network-fallback-list { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.network-fallback-list a { color: var(--orange-dark); font-size: .75rem; font-weight: 750; text-decoration: none; }
.network-fallback-list a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .hero-top { grid-template-columns: 1fr; align-items: start; }
  .hero-image-panel { max-width: 560px; }
  .quick-trip-panel { grid-template-columns: 1fr; gap: 15px; }
  .quick-trip-actions { justify-content: flex-start; }
  .train-check-panel, .policy-feature-section, .ticket-feature-section, .comparison-panel { grid-template-columns: 1fr; }
  .connection-output, .comparison-answer { padding-left: 0; border-left: 0; border-top: 2px solid var(--orange); padding-top: 20px; }
  .arrival-grid, .long-distance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network-map-shell { grid-template-columns: 1fr; }
  .network-panel { border-top: 3px solid var(--orange); border-left: 0; }
}

@media (max-width: 560px) {
  .hero-image-panel img { aspect-ratio: 1.45; }
  .quick-trip-facts { gap: 6px; }
  .quick-trip-facts div { padding-left: 7px; }
  .quick-trip-facts strong { font-size: .73rem; }
  .quick-trip-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .quick-trip-actions .button { width: 100%; }
  .network-workspace { padding: 14px; }
  .network-toolbar { grid-template-columns: 1fr; }
  .location-button { width: 100%; }
  .map-filter-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .map-filter-row button { flex: none; }
  .map-canvas-wrap, #network-map { min-height: 480px; }
  .network-panel { padding: 18px; }
  .network-panel-image { width: calc(100% + 36px); margin: -18px -18px 17px; }
  .network-fallback-heading { display: block; }
  .network-fallback-heading p { margin-top: 8px; }
  .departure-choice-grid { grid-template-columns: 1fr; }
  .train-check-panel { padding: 14px; }
  .connection-output { padding: 18px; }
  .connection-mini-line { gap: 5px; font-size: .65rem; }
  .connection-mini-line i { width: 12px; }
  .builder-card { padding: 18px; }
  .builder-steps { grid-template-columns: 1fr; gap: 18px; }
  .builder-steps > div { padding-left: 47px; }
  .builder-steps > div:not(:last-child)::after { content: "↓"; top: 29px; right: auto; left: 10px; }
  .boarding-guide { display: block; }
  .boarding-guide .button { margin-top: 15px; }
  .arrival-grid, .long-distance-grid { grid-template-columns: 1fr; }
  .policy-decision-panel { padding: 14px; }
  .policy-decision-output { padding: 16px; }
  .policy-choice-row { display: grid; }
  .policy-choice-row button { width: 100%; }
  .schedule-result-heading { display: block; }
  .fare-chip { display: inline-flex; margin-top: 12px; }
  .schedule-service { grid-template-columns: 1fr 38px 1fr; gap: 7px; }
  .schedule-duration { grid-column: 1 / -1; text-align: left; }
  .schedule-arrival { text-align: left; }
  .schedule-track { gap: 3px; }
}

/* Mobile app shell: persistent booking action, five-item navigation and More sheet. */
.mobile-book-cta, .mobile-more-sheet { display: none; }
.bottom-nav-item svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav-item button, button.bottom-nav-item { font: inherit; }

@media (max-width: 820px) {
  html, body, .app-shell, .main-content, .hero-section { max-width: 100%; min-width: 0; overflow-x: clip; }
  .main-content { padding-bottom: calc(154px + env(safe-area-inset-bottom)); }
  .content-section, #journey-planner, #stations, #schedule-explorer { scroll-margin-top: 76px; }
  .route-grid { grid-template-columns: 1fr; }
  .bottom-nav { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 5px 4px; border-radius: 17px; }
  .bottom-nav-item { min-width: 0; min-height: 52px; padding: 4px 2px; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
  .bottom-nav-item span { font-size: inherit; }
  .bottom-nav-item small { font-size: .59rem; line-height: 1.1; white-space: nowrap; }
  .bottom-nav-item.is-active { color: var(--ink); background: var(--orange-soft); }
  .mobile-book-cta { position: fixed; right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); left: 16px; z-index: 41; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 13px; background: var(--orange); color: #271d14; box-shadow: 0 10px 24px rgba(113, 64, 30, .2); font-size: .82rem; font-weight: 800; text-decoration: none; }
  .mobile-book-cta span { margin-left: 7px; font-size: 1rem; }
  .mobile-book-cta:focus-visible, .mobile-book-cta:hover { background: var(--orange-dark); color: var(--white); }
  .mobile-more-sheet { position: fixed; inset: 0; z-index: 60; display: block; }
  .mobile-more-sheet[hidden] { display: none; }
  .mobile-more-backdrop { position: absolute; inset: 0; background: rgba(31,35,38,.42); }
  .mobile-more-panel { position: absolute; right: 0; bottom: 0; left: 0; max-height: min(78vh, 620px); overflow-y: auto; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--white); box-shadow: 0 -18px 44px rgba(39,29,19,.18); }
  .mobile-more-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
  .mobile-more-heading h2 { margin-top: 7px; font-size: 1.55rem; }
  .mobile-more-close { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 1.5rem; cursor: pointer; }
  .mobile-more-links { display: grid; gap: 2px; margin-top: 16px; }
  .mobile-more-links a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .85rem; font-weight: 750; text-decoration: none; }
  .mobile-more-links a span { color: var(--orange-dark); font-size: 1.1rem; }
  .mobile-more-onward { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
  .mobile-more-onward > div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
  .mobile-more-onward a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--orange-dark); font-size: .72rem; font-weight: 800; text-decoration: none; }
  body.mobile-more-open { overflow: hidden; }
  body.mobile-more-open .mobile-book-cta, body.mobile-more-open .bottom-nav, body.mobile-keyboard-open .mobile-book-cta, body.mobile-keyboard-open .bottom-nav { visibility: hidden; pointer-events: none; }
  body.mobile-keyboard-open .mobile-book-cta, body.mobile-keyboard-open .bottom-nav { opacity: 0; transform: translateY(18px); }
  .hero-slider { min-height: clamp(360px, 112vw, 430px); }
  .hero-slide img { object-position: 58% center; }
  .hero-slide:nth-child(2) img { object-position: 50% center; }
  .hero-slide:nth-child(3) img { object-position: 56% center; }
  .hero-slide:nth-child(4) img { object-position: 54% center; }
  .hero-slide-copy { bottom: 60px; }
  .hero-slide-copy h1, .hero-slide-copy h2 { max-width: 275px; }
  .original-booking-shell { width: 100%; min-width: 0; }
  .original-booking-shell #one2go { max-width: 100%; }
  .schedule-controls, .train-check-controls { min-width: 0; }
  .schedule-service { min-width: 0; }
}

@media (max-width: 430px) {
  .mobile-book-cta { right: 12px; left: 12px; }
  .station-selector-list { grid-template-columns: 1fr; }
  .station-selector-list button { min-height: 48px; }
  .hero-slide-copy { left: 17px; width: calc(100% - 34px); }
  .hero-slide-copy h1, .hero-slide-copy h2 { font-size: 2.05rem; }
  .hero-control { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-book-cta, .mobile-more-panel { transition: none; }
}