/* Commute from London — highway signage: sign green, asphalt, white */
:root {
  --sign: #00653a;
  --sign-d: #004d2c;
  --asphalt: #26292c;
  --asphalt-2: #3a3e42;
  --concrete: #f4f5f4;
  --line: #d5d9d6;
  --ink: #1d2022;
  --muted: #5a6066;
  --blue: #1d5fa8;
  --head: "Overpass", "Highway Gothic", "Arial Narrow", sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--concrete); color: var(--ink); font-family: var(--body); font-size: 1.06rem; line-height: 1.7; }
img { max-width: 100%; height: auto; }
a { color: var(--sign); font-weight: 600; text-underline-offset: 3px; }
a:hover { color: var(--blue); }
h1, h2, h3 { font-family: var(--head); line-height: 1.12; }
h1 { font-size: clamp(2.1rem, 6vw, 3.3rem); font-weight: 800; margin: .4rem 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 800; margin: 2.4rem 0 .7rem; }
h3 { font-size: 1.18rem; font-weight: 800; margin: 1.6rem 0 .4rem; }
p, ul, ol { margin: 0 0 1rem; }
.lane { width: min(900px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 10px; top: 10px; background: #fff; padding: 8px; z-index: 9; }

/* header: asphalt with dashed lane line */
.road { background: var(--asphalt); position: relative; }
.road::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(90deg, #fff 0 26px, transparent 26px 50px); opacity: .85; }
.road-in { padding: 16px 0 10px; }
.road-logo img { height: 40px; width: auto; display: block; }
.exits { overflow-x: auto; padding-bottom: 14px; }
.exits ul { list-style: none; display: flex; gap: 8px; margin-block: 0; padding: 0; white-space: nowrap; }
.exits a { display: inline-block; background: var(--sign); color: #fff; text-decoration: none; font-family: var(--head); font-weight: 600; font-size: .9rem; padding: 6px 12px; border-radius: 5px; border: 2px solid #fff; }
.exits a:hover { background: var(--sign-d); color: #fff; }
.exits a[aria-current] { background: #fff; color: var(--sign); }

.crumbs { font-size: .85rem; color: var(--muted); margin-top: 22px; }
.crumbs a { color: var(--muted); font-weight: 400; }
.crumbs .sep { margin: 0 5px; }

/* sign panels */
.sign { background: var(--sign); color: #fff; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--sign); padding: 26px 26px 22px; margin: 26px 3px; }
.sign h1, .sign h2 { color: #fff; margin-top: 0; }
.sign p { color: #e5f2ea; font-size: 1.12rem; }
.sign a { color: #fff; }
.distances { display: grid; gap: 0; background: var(--sign); color: #fff; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--sign); margin: 24px 3px; font-family: var(--head); font-weight: 600; }
.distances div { display: flex; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,.25); }
.distances div:last-child { border-bottom: 0; }
.distances span:last-child { font-variant-numeric: tabular-nums; }
.stamp { font-size: .85rem; color: var(--muted); }
.lead { font-size: 1.18rem; color: #2f3336; }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 18px 0; }
.card { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--sign); border-radius: 6px; padding: 18px; text-decoration: none; color: var(--ink); display: block; }
a.card:hover { border-top-color: var(--blue); color: var(--ink); }
.card b { font-family: var(--head); font-size: 1.1rem; display: block; margin-bottom: .2rem; }
.card span { color: var(--muted); font-weight: 400; }
.info { background: #fff; border-left: 6px solid var(--blue); padding: 14px 18px; margin: 20px 0; }
.info.caution { border-left-color: #c2410c; background: #fff7f2; }
.info p:last-child { margin: 0; }
.route { list-style: none; padding: 0; margin: 18px 0; border-left: 4px solid var(--asphalt-2); }
.route li { position: relative; padding: 0 0 14px 22px; }
.route li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--sign); }
.route b { font-family: var(--head); }
table { width: 100%; border-collapse: collapse; background: #fff; margin: 18px 0; font-size: .95rem; }
th, td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: var(--asphalt); color: #fff; font-family: var(--head); }
.tw { overflow-x: auto; }

details.faq { background: #fff; border: 1px solid var(--line); border-radius: 6px; margin: 10px 0; }
details.faq summary { cursor: pointer; padding: 14px 16px; font-family: var(--head); font-weight: 800; }
details.faq > div { padding: 0 16px 8px; }

.agent { background: var(--asphalt); color: #dfe3e6; border-radius: 10px; padding: 26px; margin: 44px 0 10px; }
.agent .tag { font-family: var(--head); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: #8fd3ad; }
.agent h2 { color: #fff; margin: .3rem 0 .6rem; }
.btn { display: inline-block; background: var(--sign); color: #fff; border: 2px solid #fff; text-decoration: none; font-family: var(--head); font-weight: 800; padding: 11px 18px; border-radius: 6px; }
.btn:hover { background: #fff; color: var(--sign); }

.shoulder { background: var(--asphalt); color: #c5cacd; margin-top: 50px; padding: 36px 0 26px; font-size: .93rem; }
.shoulder a { color: #fff; }
.shoulder ul { list-style: none; padding: 0; }
.sh-grid { display: grid; gap: 22px; }
@media (min-width: 760px) { .sh-grid { grid-template-columns: 2fr 1fr; } }
.sh-title { font-family: var(--head); font-weight: 800; color: #fff; margin-bottom: .3rem; }
.agent-credit { border-top: 1px solid rgba(255,255,255,.15); padding-top: 14px; }
.copy { font-size: .8rem; opacity: .75; }

.agent-line{display:block;font-size:.72rem;line-height:1.4;opacity:.85}