/* Road safety: approved Route hero, learning cards, guide panels and reading columns. */
.road-safety-page section[id], .road-safety-page [id], .rs-prose h2 { scroll-margin-top: 110px; }
.road-safety-page .rs-h1 { font-size: clamp(35px,4.1vw,58px); line-height: 1.06; }
.rs-hero .tb-hero-in, .rs-article-hero .tb-hero-in { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); padding-top: 28px; padding-bottom: 48px; }
.road-safety-page .rs-hero-photo { min-height: 330px; }
.rs-hero-photo .tb-pin { top: auto; bottom: 52px; max-width: calc(100% - 40px); font-size: 11px; }
.road-safety-page .rs-deck { max-width: 49ch; font-size: 17px; }
.rs-hub-body, .rs-article-body { gap: 48px; }
.rs-hub-body .t-main, .rs-article-body .t-main { flex-basis: 650px; }
.rs-side { flex-basis: 280px; }
.rs-side .h3 { font-size: 26px; }
.rs-side .tb-guide, .rs-side .panel-line { padding: 28px; gap: 20px; }
.rs-article-list { display: grid; grid-template-columns: 1fr; gap: 24px; }
.rs-article-entry { min-width: 0; }
.rsa-site .rs-article-card { grid-template-columns: minmax(0,.95fr) minmax(0,1fr); padding: 16px; gap: 24px; }
.rs-article-card .lcard-media { aspect-ratio: 4 / 3; }
.rs-article-card .lcard-title { font-family: var(--font-display); font-size: clamp(20px,2vw,27px); font-weight: 700; line-height: 1.15; }
.rs-article-card .eyebrow { font-size: 10px; letter-spacing: .1em; }
.rs-article-card .body { font-size: 14px; line-height: 1.65; }
.rs-essentials { gap: 28px; }
.rs-essentials .step-g h3 { margin: 0; font: 700 16px/1.3 var(--font-body); }
.rs-essentials .step-g p { font-size: 14px; color: var(--rsa-mist); }
.rs-lesson-links a { color: var(--rsa-chalk); text-decoration: none; }
.rs-lesson-links a:hover { border-color: var(--rsa-green); }
.rs-lesson-links .centre-addr { display: block; margin-top: 5px; }
.rs-side-links { display: flex; flex-direction: column; }
.rsa-site .rs-side-links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-12); color: var(--rsa-chalk); font-size: 14px; text-decoration: none; }
.rsa-site .rs-side-links a:hover { color: var(--rsa-green); }
.rs-local { gap: 22px; }
.rs-book { padding-bottom: 80px; }
.road-safety-page .rs-book #contact-form-anchor { padding: 0; }
.rs-book #contact-form-anchor > .container { max-width: 940px; padding: 0; }
.road-safety-page .rs-article-h1 { font-size: clamp(34px,3.8vw,54px); line-height: 1.08; max-width: 18ch; }
.rs-date { margin: 0; font-size: 13px; color: var(--rsa-mist); }
.rs-prose { max-width: 70ch; color: var(--rsa-mist); font: 400 17px/1.8 var(--font-body); }
.rs-prose > :first-child { margin-top: 0; }
.rs-prose p { margin: 0 0 22px; }
.rs-prose h2 { margin: 52px 0 22px; color: var(--rsa-chalk); font: 700 clamp(25px,2.6vw,34px)/1.16 var(--font-display); letter-spacing: -.025em; text-transform: uppercase; }
.rs-prose strong { color: var(--rsa-chalk); font-weight: 700; }
.rs-prose a, .rs-source-list a { color: var(--rsa-green); text-decoration: underline; text-underline-offset: 4px; }
.rs-prose a:hover, .rs-source-list a:hover { color: var(--rsa-chalk); }
.rs-article-body .t-main { gap: 40px; }
.rs-inline-contents { display: none; }
.rs-inline-contents > div { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.rsa-site .rs-inline-contents a { color: var(--rsa-green); font-size: 14px; text-underline-offset: 4px; }
.rs-contents ol { list-style: none; counter-reset: guide; display: flex; flex-direction: column; margin: 0; padding: 0; }
.rs-contents li { counter-increment: guide; border-top: 1px solid var(--line-12); }
.rsa-site .rs-contents a { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; color: var(--rsa-chalk); font-size: 14px; text-decoration: none; }
.rs-contents a::before { content: counter(guide, decimal-leading-zero); font: 700 12px var(--font-display); color: var(--rsa-green); }
.rsa-site .rs-contents a:hover { color: var(--rsa-green); }
.rs-source-list ul { list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 24px; margin: 0; padding: 0; }
.rs-source-list li { font-size: 14px; line-height: 1.6; }
.road-safety-page a:focus-visible { outline: 3px solid var(--rsa-green); outline-offset: 5px; box-shadow: 0 0 0 7px var(--rsa-road-black); }
@media (max-width:1100px) {
  .rsa-site:has(.road-safety-page) .hdr-icon[href^="tel:"] { display: inline-flex; }
  .rs-hero .tb-hero-in, .rs-article-hero .tb-hero-in { gap: 32px; }
  .rs-hub-body .t-main, .rs-article-body .t-main { flex-basis: 520px; }
  .rs-side { flex-basis: 260px; position: static; }
  .rs-hub-body, .rs-article-body { gap: 32px; }
  .rsa-site .rs-article-card { grid-template-columns: 1fr; }
  .rs-article-card .lcard-media { aspect-ratio: 16 / 9; }
  .rs-essentials { grid-template-columns: 1fr; }
}
@media (max-width:900px) {
  .rs-hero .tb-hero-in, .rs-article-hero .tb-hero-in { grid-template-columns: 1fr; }
  .road-safety-page .rs-hero-photo { min-height: 270px; width: min(100%,520px); }
  .rs-hero-photo .tb-pin { bottom: 34px; }
  .rs-hub-body .t-main, .rs-article-body .t-main { flex-basis: 100%; }
  .rs-side { flex-basis: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .rs-guide-page .rs-contents { display: none; }
  .rs-inline-contents { display: flex; }
  .rs-guide-page .rs-side { grid-template-columns: 1fr; }
}
@media (max-width:768px) {
  .rs-hero .tb-hero-in, .rs-article-hero .tb-hero-in { padding-top: 22px; padding-bottom: 36px; }
  .road-safety-page .rs-h1 { font-size: clamp(34px,8.4vw,48px); }
  .road-safety-page .rs-article-h1 { font-size: clamp(31px,8vw,44px); }
  .road-safety-page .rs-hero-photo { min-height: 235px; }
  .rs-side { grid-template-columns: 1fr; }
  .rs-article-card .lcard-body { padding: 2px 6px 8px; }
  .rs-article-card .lcard-title { font-size: 24px; }
  .rs-source-list ul { grid-template-columns: 1fr; }
  .rs-prose { font-size: 16px; line-height: 1.8; }
  .rs-prose h2 { margin-top: 40px; }
  .rs-book { padding-bottom: 56px; }
  .rs-lesson-links .centre > span:last-child { display: none; }
}
@media (prefers-reduced-motion:reduce) { .road-safety-page *, .road-safety-page *::before, .road-safety-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
