:root {
  --green: #008c48;
  --green-deep: #006837;
  --green-soft: #e8f5ed;
  --ink: #263238;
  --muted: #61706c;
  --line: #d9e2dd;
  --surface: #ffffff;
  --canvas: #f5f7f5;
  --warning: #8a5d11;
  --shadow: 0 18px 45px rgba(24, 48, 37, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }
.shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }

.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.header-content { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; min-width: 0; }
.brand img { width: 57px; height: 57px; object-fit: contain; }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { font-size: 1rem; letter-spacing: -0.02em; color: var(--ink); }
.brand-copy small { color: var(--muted); font-size: .75rem; }
.header-nav { display: flex; align-items: center; gap: 22px; }
.header-link { color: var(--green-deep); text-decoration: none; font-weight: 750; font-size: .875rem; white-space: nowrap; }
.header-link:hover, .header-link:focus-visible { text-decoration: underline; }
.header-link span { padding-left: 5px; font-size: 1.1rem; }

.hero { padding: 72px 0 66px; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.hero-content { max-width: 770px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: var(--green-deep); font-size: .75rem; line-height: 1.25; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.road-line { width: 26px; height: 4px; background: var(--green); border-radius: 99px; position: relative; display: inline-block; }
.road-line::after { content: ""; width: 3px; height: 10px; border-radius: 2px; background: #fff; position: absolute; left: 12px; top: -3px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 18px; max-width: 720px; color: var(--ink); font-size: clamp(2.35rem, 5vw, 4.85rem); line-height: .98; letter-spacing: -.065em; }
h2 { margin-bottom: 0; font-size: clamp(1.7rem, 3vw, 2.65rem); letter-spacing: -.05em; line-height: 1.05; }
.hero-text { max-width: 630px; margin-bottom: 0; color: #50605b; font-size: 1.08rem; line-height: 1.65; }
.hero-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-radius: 8px; background: var(--green-deep); color: #fff; font-size: .84rem; font-weight: 800; text-decoration: none; }
.hero-link:hover, .hero-link:focus-visible { background: #00582f; }
.hero-stats { display: flex; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 8px 24px rgba(34, 53, 43, .04); flex-shrink: 0; }
.hero-stats div { min-width: 125px; padding: 19px 22px; display: grid; gap: 2px; }
.hero-stats div + div { border-left: 1px solid var(--line); }
.hero-stats strong { color: var(--green-deep); font-size: 1.75rem; line-height: 1; letter-spacing: -.05em; }
.hero-stats span { color: var(--muted); font-size: .78rem; font-weight: 700; }

.workspace { padding: 50px 0 64px; background: #eaf0ed; border-top: 1px solid #e0e8e3; }
.workspace-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 30px; }
.accuracy-note { margin: 0; padding: 9px 11px; max-width: 430px; display: flex; align-items: center; gap: 8px; color: #596861; font-size: .77rem; line-height: 1.4; background: rgba(255, 255, 255, .56); border: 1px solid rgba(183, 198, 189, .72); border-radius: 8px; }
.accuracy-dot { flex: 0 0 auto; width: 8px; height: 8px; border: 2px solid var(--green); border-radius: 50%; }
.controls { padding: 18px; display: grid; grid-template-columns: minmax(230px, 1fr) 210px max-content; align-items: end; gap: 14px; background: #fff; border: 1px solid #dbe4df; border-radius: 15px; box-shadow: 0 10px 30px rgba(32, 58, 45, .05); }
.field { display: grid; gap: 7px; }
.field label { color: #56645f; font-size: .77rem; font-weight: 760; }
.input-wrap { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #cfdad4; border-radius: 8px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.input-wrap:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 140, 72, .12); }
.input-wrap span { color: var(--green-deep); font-size: 1.45rem; line-height: 0; transform: rotate(-18deg); }
.input-wrap input, select { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
select { height: 44px; padding: 0 12px; border: 1px solid #cfdad4; border-radius: 8px; background: #fff; color: var(--ink); }
.clear-button { height: 44px; padding: 0 15px; border: 1px solid #bdd8c8; border-radius: 8px; color: var(--green-deep); background: var(--green-soft); font-size: .84rem; font-weight: 800; transition: background .18s, opacity .18s; }
.clear-button:hover:not(:disabled) { background: #d9efdf; }
.clear-button:disabled { opacity: .45; cursor: not-allowed; }
.results-bar { min-height: 21px; margin: 15px 2px; color: #53645c; font-size: .84rem; font-weight: 650; }

.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 20px; align-items: start; }
.map-column { min-width: 0; }
.map-card, .list-card, .detail-panel { background: #fff; border: 1px solid #dce5df; box-shadow: var(--shadow); }
.map-card { overflow: hidden; border-radius: 16px; }
.map-topline { min-height: 48px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #65716b; font-size: .75rem; font-weight: 700; border-bottom: 1px solid #e5ebe7; }
.map-topline span { display: inline-flex; align-items: center; gap: 7px; }
.marker-sample { width: 12px; height: 12px; display: inline-block; background: var(--green); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--green-deep); }
.highway-sample { width: 24px; height: 0; margin-left: 9px; border-top: 3px solid #087b50; border-radius: 99px; }
.map-layer-controls { min-height: 42px; padding: 7px 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; background: #f7faf8; border-bottom: 1px solid #e5ebe7; }
.map-layer-controls label { display: inline-flex; align-items: center; gap: 7px; color: #40534b; font-size: .76rem; font-weight: 750; cursor: pointer; }
.map-layer-controls input { width: 16px; height: 16px; margin: 0; accent-color: var(--green-deep); }
.map-road-search { padding: 12px 17px; background: #fff; border-bottom: 1px solid #e5ebe7; }
.map-road-search label { display: block; margin-bottom: 7px; color: #42594b; font-size: .78rem; font-weight: 800; }
.map-road-search-row { display: flex; gap: 8px; }
.map-road-search-row input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #cbd9d0; border-radius: 7px; background: #fff; color: var(--ink); font-size: .84rem; }
.map-road-search-row input:focus-visible { outline: 3px solid rgba(0, 140, 72, .25); border-color: var(--green); }
.map-road-search-row button { flex: 0 0 auto; min-height: 42px; padding: 0 13px; border: 1px solid var(--green-deep); border-radius: 7px; color: #fff; background: var(--green-deep); font-size: .8rem; font-weight: 800; }
.map-road-search-row button:hover, .map-road-search-row button:focus-visible { background: #00582f; }
.map-road-search small { display: block; margin-top: 6px; color: #60746a; font-size: .7rem; line-height: 1.4; }
#map { width: 100%; height: 575px; background: #d9e8e4; }
.selected-road-panel { padding: 15px 17px 16px; border-top: 4px solid #d89118; background: #fffdf8; }
.selected-road-panel[hidden], #selected-road-name[hidden] { display: none; }
.selected-road-heading > span { display: block; margin-bottom: 4px; color: #916017; font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.selected-road-heading h3 { margin: 0; color: #263238; font-size: clamp(1.05rem, 2vw, 1.45rem); letter-spacing: -.035em; }
#selected-road-name { margin: 5px 0 0; color: #4c5f53; font-size: .83rem; font-weight: 700; }
#selected-road-name a { color: var(--green-deep); font-size: .72rem; }
#selected-road-context { margin: 9px 0 11px; max-width: 680px; color: #586761; font-size: .77rem; line-height: 1.5; }
.selected-road-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.selected-road-actions button { min-height: 36px; padding: 0 11px; border: 1px solid #bfcebf; border-radius: 6px; color: #2b553e; background: #f1f8f3; font-size: .74rem; font-weight: 800; }
.selected-road-actions button:first-child { color: #fff; background: #805317; border-color: #805317; }
.selected-road-actions button:first-child:hover:not(:disabled) { background: #653f10; }
.selected-road-actions button:disabled { opacity: .52; cursor: not-allowed; }
.selected-road-actions button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.map-status { min-height: 46px; margin: 0; padding: 12px 17px; color: #40574b; background: #f6f9f7; border-top: 1px solid #e0e9e3; font-size: .76rem; line-height: 1.5; }
.map-reference { margin: 0; padding: 10px 17px 12px; background: #eff5f0; border-top: 1px solid #e0e9e3; color: #4a6252; font-size: .73rem; line-height: 1.5; }
.map-reference strong { color: #215e3e; }
.map-reference a { color: #006837; font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.map-legend-panel { border-top: 1px solid #e2eae4; }
.map-legend-panel summary { padding: 13px 17px; color: #344d3e; font-size: .78rem; font-weight: 830; cursor: pointer; }
.map-legend-panel summary:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.map-legend-grid { padding: 0 15px 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.legend-roc { min-width: 0; min-height: 31px; padding: 4px 5px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #354a3d; text-align: left; font-size: .68rem; }
.legend-roc:hover, .legend-roc:focus-visible { border-color: #cfdbd2; background: #f0f5f1; outline: 0; }
.legend-swatch { flex: 0 0 13px; width: 13px; height: 13px; border-radius: 3px; background: var(--roc-color); }
.legend-roc strong { flex: 0 0 auto; color: var(--roc-color); font-size: .73rem; }
.legend-roc > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.maplibregl-map { font-family: inherit; }
.maplibregl-ctrl button { color: var(--green-deep); }
.maplibregl-ctrl-attrib { font-size: 10px; }
.marker-hitbox { width: 35px; height: 35px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.marker-hitbox:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 5px; border-radius: 50%; }
.roc-marker { width: 33px; height: 33px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: var(--roc-color, var(--green)); color: #fff; font-size: .72rem; font-weight: 850; box-shadow: 0 3px 10px rgba(0, 48, 41, .38); transform: rotate(-45deg); transition: background .18s, transform .18s; }
.roc-marker b { transform: rotate(45deg); font-weight: 850; }
.roc-marker.is-active { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--roc-color, var(--green)), 0 4px 12px rgba(10, 35, 23, .35); }
.detail-panel { margin-top: 20px; min-height: 138px; border-radius: 15px; overflow: hidden; }
.detail-empty { min-height: 138px; padding: 26px; display: flex; align-items: center; gap: 17px; color: #4f5f58; }
.empty-icon { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 50%; font-size: 1.35rem; }
.detail-empty strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: .93rem; }
.detail-empty p { margin-bottom: 0; font-size: .84rem; line-height: 1.5; }
.detail-content { padding: 25px; }
.detail-kicker { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.roc-label { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; color: #fff; background: var(--roc-color, var(--green-deep)); font-size: .71rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.accuracy-label { display: inline-flex; align-items: center; gap: 5px; color: var(--warning); font-size: .71rem; font-weight: 720; }
.accuracy-label::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.detail-title { margin: 0 0 8px; color: var(--ink); font-size: 1.4rem; letter-spacing: -.04em; }
.detail-address { margin: 0 0 18px; color: #53625a; max-width: 700px; font-size: .9rem; line-height: 1.55; }
.detail-bottom { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.municipality-block { min-width: 0; }
.municipality-title { display: block; margin-bottom: 7px; color: #6c7972; font-size: .71rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.municipality-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.municipality-chip { padding: 5px 8px; color: #44564d; background: #f0f4f1; border: 1px solid #e0e8e3; border-radius: 99px; font-size: .72rem; line-height: 1.2; }
.route-link { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 0 13px; color: #fff; background: var(--green-deep); border-radius: 7px; text-decoration: none; font-size: .78rem; font-weight: 820; }
.route-link:hover { background: #00582f; }
.shared-address { margin: 14px 0 0; padding: 9px 10px; color: #76541a; background: #fff8e9; border-left: 3px solid #d49a26; font-size: .75rem; line-height: 1.45; }

.list-card { position: sticky; top: 18px; overflow: hidden; border-radius: 16px; }
.list-heading { min-height: 81px; padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5ebe7; }
.list-heading .eyebrow { margin-bottom: 3px; font-size: .64rem; }
.list-heading h3 { margin: 0; font-size: 1.06rem; letter-spacing: -.03em; }
.count-badge { min-width: 31px; height: 31px; padding: 0 7px; display: grid; place-items: center; border-radius: 50%; color: var(--green-deep); background: var(--green-soft); font-size: .75rem; font-weight: 850; }
.roc-list { max-height: 628px; overflow: auto; }
.roc-item { width: 100%; padding: 15px 17px; display: flex; align-items: flex-start; gap: 12px; border: 0; border-bottom: 1px solid #edf1ee; text-align: left; color: inherit; background: #fff; transition: background .16s, border-color .16s; }
.roc-item:last-child { border-bottom: 0; }
.roc-item:hover, .roc-item:focus-visible, .roc-item.is-active { outline: 0; background: #f0f8f3; }
.roc-item.is-active { box-shadow: inset 4px 0 0 var(--roc-color, var(--green)); }
.roc-number { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--roc-color, #cfe1d6); border-radius: 50%; color: var(--roc-color, var(--green-deep)); background: #fff; font-size: .71rem; font-weight: 850; }
.roc-item-copy { min-width: 0; display: grid; gap: 4px; }
.roc-item-copy strong { color: #2e3d36; font-size: .84rem; line-height: 1.25; }
.roc-item-copy span { overflow: hidden; color: #718078; font-size: .72rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.empty-results { padding: 30px 21px; color: #63736a; font-size: .84rem; line-height: 1.5; }

.highways { padding: 66px 0 72px; background: #fff; border-top: 1px solid #e1e9e4; scroll-margin-top: 12px; }
.highways-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.highways-heading h2 { max-width: 630px; }
.highways-intro { max-width: 680px; margin: 13px 0 0; color: #586961; font-size: .94rem; line-height: 1.6; }
.highways-stats { display: flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 13px; background: #f6faf7; overflow: hidden; }
.highways-stats div { display: grid; gap: 4px; min-width: 125px; padding: 15px 18px; }
.highways-stats div + div { border-left: 1px solid var(--line); }
.highways-stats strong { color: var(--green-deep); font-size: 1.55rem; letter-spacing: -.05em; line-height: 1; }
.highways-stats span { color: var(--muted); font-size: .73rem; font-weight: 720; }
.roads-source { margin-bottom: 24px; padding: 16px 19px; border-left: 4px solid var(--green); border-radius: 0 11px 11px 0; background: #eff7f1; }
.roads-source > strong { display: block; margin-bottom: 5px; font-size: .83rem; color: var(--green-deep); }
.roads-source p { max-width: 1000px; margin: 0; color: #4a6052; font-size: .81rem; line-height: 1.6; }
.roads-source a { color: var(--green-deep); font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.roads-controls { padding: 18px; display: grid; grid-template-columns: minmax(220px, 1fr) 145px 210px max-content; align-items: end; gap: 14px; background: #fff; border: 1px solid #dbe4df; border-radius: 15px; box-shadow: 0 10px 30px rgba(32, 58, 45, .05); }
.roc-columns-heading { margin: 31px 2px 15px; }
.roc-columns-heading h3 { margin-bottom: 6px; color: #2d4035; font-size: 1.16rem; letter-spacing: -.03em; }
.roc-columns-heading p { margin: 0; max-width: 760px; color: #64736a; font-size: .77rem; line-height: 1.5; }
.roc-columns { display: grid; gap: 19px; }
.doc-group { min-width: 0; padding: 14px; border: 1px solid #dce6de; border-radius: 13px; background: #f7faf8; }
.doc-group-heading { margin: 2px 2px 13px; display: flex; align-items: baseline; gap: 12px; color: #65766b; font-size: .76rem; }
.doc-group-heading strong { color: var(--green-deep); font-size: .92rem; }
.roc-columns-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); align-items: stretch; gap: 11px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 1px 2px 10px; scrollbar-color: #a9c9b5 transparent; }
.roc-column { min-width: 0; padding: 12px; border: 1px solid #dce7df; border-left: 4px solid var(--roc-color); border-radius: 9px; background: #fff; }
.roc-column-heading { width: 100%; min-height: 46px; padding: 0; display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: var(--ink); text-align: left; }
.roc-column-heading:hover strong, .roc-column-heading:focus-visible strong { text-decoration: underline; }
.roc-column-heading:focus-visible { outline: 2px solid var(--roc-color); outline-offset: 3px; border-radius: 3px; }
.roc-column-number { flex: 0 0 33px; width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: var(--roc-color); color: #fff; font-size: .75rem; font-weight: 850; }
.roc-column-heading strong { display: block; font-size: .78rem; line-height: 1.2; }
.roc-column-heading small { display: block; margin-top: 3px; color: #738078; font-size: .68rem; }
.roc-column-km { margin: 10px 0; padding: 8px 0; border-top: 1px solid #edf1ee; border-bottom: 1px solid #edf1ee; color: #65756b; font-size: .69rem; line-height: 1.35; }
.roc-code-grid { display: flex; flex-wrap: wrap; gap: 5px; align-content: start; }
.roc-road-chip { min-height: 28px; padding: 4px 7px; border: 1px solid #d3dfd7; border-radius: 5px; background: #f7faf8; color: #345140; font-size: .7rem; font-weight: 760; }
.roc-road-chip:hover, .roc-road-chip:focus-visible, .roc-road-chip.is-selected { border-color: var(--roc-color); background: #edf6f0; outline: 0; }
.roc-road-chip.is-unmapped { border-style: dashed; color: #765f38; background: #fffcf3; }
.roc-road-chip.is-unmapped span { color: #af7629; }
.road-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 17px 2px 14px; color: #53645c; font-size: .83rem; }
.road-results-heading p { margin: 0; font-weight: 760; }
.road-results-heading span { color: #77877d; font-size: .75rem; }
.road-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; }
.road-card { min-width: 0; border: 1px solid #dae5dd; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(22, 53, 36, .04); overflow: hidden; }
.road-card[open] { border-color: #9dc9ab; box-shadow: 0 8px 22px rgba(15, 73, 39, .09); }
.road-card.is-selected { border-color: #bf7f1e; box-shadow: 0 0 0 2px rgba(191, 127, 30, .11); }
.road-card summary { min-height: 83px; padding: 15px; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.road-card summary::-webkit-details-marker { display: none; }
.road-card summary:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; border-radius: 12px; }
.road-code { min-width: 85px; color: var(--green-deep); font-size: 1.13rem; font-weight: 850; letter-spacing: -.035em; }
.road-head-copy { min-width: 0; display: grid; gap: 4px; }
.road-head-copy strong { color: #34483c; font-size: .77rem; }
.road-head-copy small { color: #738278; font-size: .68rem; }
.road-head-copy .road-selection-indicator { color: #8a5d11; font-weight: 820; }
.road-head-copy .road-proper-name { color: #6b4c1c; font-size: .74rem; font-weight: 760; }
.road-caret { margin-left: auto; color: var(--green-deep); font-size: 1.1rem; transition: transform .18s; }
.road-card[open] .road-caret { transform: rotate(180deg); }
.road-assignees { max-height: 305px; padding: 3px 15px 11px; border-top: 1px solid #e9efeb; overflow-y: auto; }
.road-assign { padding: 11px 0; display: grid; gap: 4px; border-bottom: 1px solid #edf1ee; overflow-wrap: anywhere; }
.road-assign:last-child { border-bottom: 0; }
.road-assign strong { display: inline-flex; align-items: center; gap: 6px; font-size: .81rem; color: #30443a; }
.inline-roc-swatch { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 2px; background: var(--roc-color); }
.road-assign span { font-size: .73rem; color: #65756b; line-height: 1.45; }
.road-assign .road-alias { color: #80601d; }
.road-assign .road-warning { color: #8a5d11; font-weight: 760; }
.road-head-copy .geometry-indicator { color: var(--green-deep); font-weight: 770; }
.road-head-copy .geometry-indicator.is-unmapped { color: var(--warning); }
.road-map-button { margin: 12px 0 5px; min-height: 35px; padding: 0 10px; border: 1px solid #a5c8af; border-radius: 7px; background: #f1f8f3; color: var(--green-deep); font-size: .74rem; font-weight: 780; }
.road-map-button:hover, .road-map-button:focus-visible { background: #e2f1e7; }
.road-empty { grid-column: 1 / -1; padding: 30px 21px; border: 1px dashed #b7cabd; border-radius: 12px; color: #5b7062; font-size: .85rem; }
.road-show-more { display: block; margin: 22px auto 0; min-height: 42px; padding: 0 19px; border: 1px solid #a5c8af; border-radius: 8px; background: #f1f8f3; color: var(--green-deep); font-size: .82rem; font-weight: 800; }
.road-show-more[hidden] { display: none; }
.road-show-more:hover { background: #e2f1e7; }
.roads-caveats { margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.roads-caveats p { margin: 0; padding: 14px 17px; border-left: 3px solid #c9962c; background: #fff9ed; color: #6b542b; font-size: .76rem; line-height: 1.55; }

.information { padding: 66px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.information article { border-top: 2px solid #d3e6da; padding-top: 19px; }
.info-number { color: var(--green); font-size: .76rem; font-weight: 850; letter-spacing: .09em; }
.information h2 { margin: 7px 0 10px; color: #2e3f36; font-size: 1.14rem; letter-spacing: -.03em; }
.information p { margin: 0; max-width: 330px; color: #617069; font-size: .85rem; line-height: 1.65; }
.site-footer { padding: 27px 0; color: #dbe5df; background: #263238; }
.footer-content { display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.footer-content > div { display: grid; gap: 4px; }
.footer-content strong { font-size: .88rem; letter-spacing: .05em; }
.footer-content span, .footer-content small { color: #b7c6bd; font-size: .72rem; line-height: 1.4; }
.footer-content a { color: #e5f6ec; }

@media (max-width: 980px) {
  .hero { align-items: flex-start; flex-direction: column; gap: 28px; }
  .map-layout { grid-template-columns: 1fr; }
  .list-card { position: static; }
  .roc-list { max-height: 360px; }
  .list-heading { min-height: 70px; }
  .map-legend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .highways-heading { align-items: flex-start; flex-direction: column; }
  .roads-controls { grid-template-columns: minmax(220px, 1fr) 145px 185px; }
  .roads-controls .clear-button { grid-column: 1 / -1; }
  .road-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .information { gap: 24px; }
}
@media (max-width: 700px) {
  .shell { width: min(100% - 30px, 1240px); }
  .header-content { min-height: 68px; gap: 8px; }
  .brand img { width: 46px; height: 46px; }
  .brand-copy small, .header-nav .header-link:first-child { display: none; }
  .header-nav { gap: 0; }
  .header-link { font-size: .78rem; }
  .hero { padding: 47px 0 45px; }
  h1 { font-size: clamp(2.2rem, 13vw, 3.25rem); }
  .hero-text { font-size: .97rem; }
  .hero-stats { width: 100%; }
  .hero-stats div { width: 50%; min-width: 0; padding: 16px; }
  .workspace { padding: 37px 0 43px; }
  .workspace-heading { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 22px; }
  .accuracy-note { max-width: none; }
  .controls { grid-template-columns: 1fr; padding: 14px; gap: 12px; }
  .clear-button { width: 100%; }
  .map-topline { align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; min-height: 66px; }
  .map-road-search-row { flex-direction: column; }
  .map-road-search-row button { width: 100%; }
  #map { height: 440px; }
  .map-legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend-roc { min-height: 35px; }
  .roc-columns-track { grid-auto-columns: minmax(190px, 72vw); }
  .detail-content { padding: 19px; }
  .detail-kicker { align-items: flex-start; flex-direction: column; gap: 7px; }
  .detail-bottom { align-items: stretch; flex-direction: column; gap: 16px; }
  .route-link { width: 100%; }
  .highways { padding: 44px 0 48px; }
  .highways-stats { width: 100%; }
  .highways-stats div { width: 50%; min-width: 0; }
  .roads-controls { grid-template-columns: 1fr; padding: 14px; gap: 12px; }
  .roads-controls .clear-button { grid-column: auto; }
  .road-results-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .road-list, .roads-caveats { grid-template-columns: 1fr; }
  .information { padding: 48px 0; grid-template-columns: 1fr; gap: 25px; }
  .footer-content { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }