/* ==========================================================================
   O'Neill Motorcycle Training: inner pages (2026 redesign, "Centrado")
   Built by build/pages-css/construir.py; do not edit this file by hand.
   Part 1 is copied from home.css (fonts, tokens, base, buttons, header,
   form, footer, WhatsApp, quick bar, reveals), so the pages look exactly
   like the home. Part 2 (build/pages-css/paginas.css) draws the inner pages'
   own pieces in the same style.
   ========================================================================== */

/* Parte 1: copia de las reglas comunes de home.css (extraer_comun.py). No editar a mano:
   si cambia la home, se vuelve a sacar. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/assets/fonts/noto-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: optional;
}

@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 500;
  size-adjust: 101.58%;
  ascent-override: 98.44%;
  descent-override: 29.83%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 900;
  size-adjust: 95.02%;
  ascent-override: 105.24%;
  descent-override: 31.89%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Noto Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 500;
  size-adjust: 105.48%;
  ascent-override: 101.35%;
  descent-override: 27.78%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Noto Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 900;
  size-adjust: 101.95%;
  ascent-override: 104.85%;
  descent-override: 28.74%;
  line-gap-override: 0%;
}

:root {
  --bg: #f9fafb;
  --bg-alt: #f2f4f7;
  --surface: #ffffff;
  --ink: #101828;
  --ink-soft: #475467;
  --ink-faint: #667085;
  --line: #e4e7ec;
  --accent: #ffaa00;
  --accent-hover: #f99c00;
  --accent-ink: #101828;
  --accent-tint: #fff4dc;
  --navy: #0c297e;
  --navy-tint: #eef2ff;
  --dark: #101828;
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.74);
  --dark-line: rgba(255, 255, 255, 0.14);

  --font-display: "Hanken Grotesk", "Hanken Fallback", system-ui, -apple-system, sans-serif;
  --font-body: "Noto Sans", "Noto Fallback", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --h1: clamp(2.8rem, 1.4rem + 4.6vw, 5.2rem);
  --h2: clamp(2.05rem, 1.3rem + 2.4vw, 3.4rem);
  --h3: clamp(1.2rem, 1.08rem + 0.4vw, 1.4rem);
  --display-weight: 700;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 74px;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -18px rgba(16, 24, 40, 0.18);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 90px;
  scroll-padding-bottom: 96px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;

  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

.lead {
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.65;
}

.section {
  padding-block: clamp(72px, 9vw, 128px);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 20px 56px;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}

.section-head h2 {
  max-width: 9.6em;
}

.section-head .lead {
  padding-bottom: 0.3rem;
}

.lead a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.lead a:hover {
  text-decoration-thickness: 3px;
}

.section-head--center {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.section-head--center .lead {
  margin-top: -4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0.8em 1.5em;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s;
}

.btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--primary::after {
  content: "";
  width: 16px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 42%, 64% 42%, 64% 0, 100% 50%, 64% 100%, 64% 58%, 0 58%);
  transition: transform 0.3s var(--ease);
}

.btn--primary:hover::after {
  transform: translateX(3px);
}

.btn--ghost {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
}

.btn--wa {
  background: #25d366;
  color: #06301a;
}

.btn--wa:hover {
  background: #36dd76;
}

.btn--sm {
  min-height: 44px;
  padding: 0.65em 1.2em;
  font-size: 0.93rem;
}

.btn--sm::after {
  display: none;
}

.btn--block {
  width: 100%;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  transition: box-shadow 0.3s;
}

.site-header.is-solid {
  box-shadow: 0 10px 30px -20px rgba(16, 24, 40, 0.35);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.brand {
  position: relative;
  z-index: 2;
  flex: none;
}

.brand img {
  width: auto;
  height: 44px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

.nav__list {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: block;
  padding: 8px 0;
  font-size: 0.96rem;
  font-weight: 500;
  text-decoration: none;
}

.nav__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__item--has-menu {
  position: relative;
}

.nav__menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0.2s;
}

.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.nav__menu a:hover {
  background: var(--bg-alt);
}

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nav__phone svg {
  width: 16px;
  height: 16px;
}

.header-call,
.nav-toggle {
  display: none;
}

.lead-form {
  grid-area: form;
  position: relative;
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.lead-form__title {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

.field label {
  font-size: 0.93rem;
  font-weight: 600;
}

.req {
  color: #d92d20;
}

.optional {
  color: var(--ink-faint);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: 44px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101828' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #98a2b3;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
  outline: none;
  background-color: var(--surface);
  box-shadow: 0 0 0 4px rgba(255, 170, 0, 0.28);
}

.field--error input {
  border-color: #d92d20;
}

.field__error {
  color: #b42318;
  font-size: 0.86rem;
}

.field__error:empty,
.form-status:empty {
  display: none;
}

.form-status {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
}

.form-status--ok {
  background: #ecfdf3;
  color: #027a48;
}

.form-status--err {
  background: #fef3f2;
  color: #b42318;
}

.lead-form .btn--primary {
  margin-top: 6px;
}

.lead-form .btn--wa {
  margin-top: 10px;
}

.form-note {
  margin-top: 14px;
  color: var(--ink-faint);
  font-size: 0.88rem;
  text-align: center;
}

.site-footer {
  padding: 76px 0 30px;
  background: var(--dark);
  color: var(--on-dark-soft);
  font-size: 0.96rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.35fr);
  gap: 40px;
}

.footer-brand .brand img {
  height: 48px;
}

.footer-brand p {
  max-width: 30ch;
  margin-top: 18px;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--dark-line);
  border-radius: 50%;
  color: var(--on-dark);
  transition: background-color 0.2s, color 0.2s;
}

.footer-social a:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-title {
  margin-bottom: 16px;
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.footer-group {
  margin-top: 28px;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col li + li {
  margin-top: 9px;
}

.footer-col li {
  overflow-wrap: anywhere;
}

.site-footer a {
  text-decoration: none;
}

.footer-col a:hover,
.footer-areas a:hover {
  color: var(--accent);
}

.footer-areas {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--dark-line);
}

.footer-areas ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--dark-line);
  font-size: 0.86rem;
}

.footer-legal button {
  margin: -2px 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.footer-legal a:hover,
.footer-legal button:hover {
  color: var(--accent);
}

.wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(16, 24, 40, 0.45);
  transition: transform 0.25s var(--ease);
}

.wa-fab:hover {
  transform: translateY(-3px) scale(1.04);
}

.wa-fab svg {
  width: 30px;
  height: 30px;
}

.quickbar {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal,
  .js [data-stagger] > * {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);

  }

  .js .reveal.is-in,
  .js [data-stagger].is-in > * {
    opacity: 1;
    translate: none;

  }

  .js [data-stagger].is-in > :nth-child(2) {
 transition-delay: 0.07s;
  }

  .js [data-stagger].is-in > :nth-child(3) {
 transition-delay: 0.14s;
  }

  .js [data-stagger].is-in > :nth-child(4) {
 transition-delay: 0.21s;
  }

  .js [data-stagger].is-in > :nth-child(5) {
 transition-delay: 0.28s;
  }

  .js [data-stagger].is-in > :nth-child(6) {
 transition-delay: 0.35s;
  }
}

@media (max-width: 1100px) {
  .nav__phone {
    display: none;

  }
}

@media (max-width: 1023px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);

  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

  .footer-brand {
    grid-column: 1 / -1;

  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 64px;

  }

  .site-header {
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

  }

  .site-header__inner {
    gap: 10px;

  }

  .brand img {
    height: 38px;

  }

  .header-call,
  .nav-toggle {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;

  }

  .header-call {
    margin-left: auto;

  }

  .header-call svg {
    width: 18px;
    height: 18px;

  }

  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.3s var(--ease), background-color 0.2s;

  }

  .nav-toggle span {
    position: relative;

  }

  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;

  }

  .nav-toggle span::before {
    top: -6px;

  }

  .nav-toggle span::after {
    top: 6px;

  }

  .nav-toggle[aria-expanded="true"] span {
    background: transparent;

  }

  .nav-toggle[aria-expanded="true"] span::before {
    transform: translateY(6px) rotate(45deg);

  }

  .nav-toggle[aria-expanded="true"] span::after {
    transform: translateY(-6px) rotate(-45deg);

  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: calc(var(--header-h) + 20px) var(--gutter) 120px;
    overflow-y: auto;
    background: var(--surface);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.25s;

  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;

  }

  .nav__list {
    flex-direction: column;
    gap: 0;

  }

  .nav__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;

  }

  .nav__link::after {
    display: none;

  }

  .nav__menu {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    min-width: 0;
    padding: 8px 0 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    /* Inherit from .nav, so the submenu can't take keyboard focus while the menu is closed */
    visibility: inherit;
    transform: none;

  }

  .nav__menu a {
    padding: 8px 0;
    color: var(--ink-soft);

  }

  .nav__item--has-menu > .nav__link {
    border-bottom: 0;

  }

  .nav__phone {
    display: inline-flex;
    margin-top: 26px;
    font-size: 1.05rem;

  }

  .nav .btn {
    margin-top: 20px;

  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .footer-col:last-child {
    grid-column: 1 / -1;

  }

  .footer-bottom {
    flex-direction: column;

  }

  .site-footer {
    padding-bottom: calc(30px + 84px + env(safe-area-inset-bottom));

  }

  .wa-fab {
    display: none;

  }

  .quickbar {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 16px 40px -14px rgba(16, 24, 40, 0.45);
    transition: transform 0.4s var(--ease), opacity 0.3s;

  }

  .js .quickbar:not(.is-shown) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(100% + 24px));

  }

  .quickbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;

  }

  .quickbar svg {
    width: 18px;
    height: 18px;

  }

  .quickbar__call {
    background: var(--accent);
    color: var(--accent-ink);

  }

  .quickbar__wa {
    background: #25d366;
    color: #06301a;

  }
}

:root {
  --bg: #ffffff;
  --bg-alt: #f5f7fc;
  --accent: #ffaa00;
  --accent-hover: #f59e0b;
  --accent-tint: #fff4dc;
  /* Amber for small text: brand #ffaa00 is only 2:1 on white, this one is
     4.9:1 on white and 4.6:1 on #f5f7fc (WCAG AA) */
  --amber-text: #a16207;
  --radius: 22px;
  --h1: clamp(2.7rem, 1.3rem + 4.2vw, 5rem);
}

mark {
  padding: 0 0.08em;
  background: linear-gradient(100deg, transparent 0.1em, #ffc94d 0.1em, #ffb319 calc(100% - 0.1em), transparent calc(100% - 0.1em)) 0 80% / 100% 42% no-repeat;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

h2 em {
  font-style: normal;
  color: var(--navy);
}

.section-head {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.section-head h2 {
  max-width: 11.2em;
}

.section-head .lead {
  margin-inline: auto;
  padding-bottom: 0;
}

.lead-form {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 24px 60px -30px rgba(16, 24, 40, 0.35);
}

/* ==========================================================================
   Part 2: the inner pages' own pieces, drawn in the home's "Centrado" style
   (design D-7, D-8 and D-9; addendum A-3 and A-4). No boxes on repeated
   items, no broken lines, no colour fades over photos.
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: clamp(20px, 3vw, 32px);
  color: #667085;
  font-size: 0.88rem;
  line-height: 1.4;
}

.crumb a {
  color: var(--ink-soft);
  text-decoration: none;
}

.crumb a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Page hero: centred text, then one wide Fairyhouse photo ---------- */
.page-hero {
  padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 96px);
}

.page-hero__copy {
  display: grid;
  justify-items: center;
  text-align: center;
}

.page-hero h1 {
  /* em, not ch: the width must not change when the web font arrives */
  max-width: 12em;
  font-size: var(--h1);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.page-hero .lead {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 2rem;
}

.page-hero__visual {
  margin-top: clamp(36px, 5vw, 56px);
}

.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__photo {
  width: 100%;
  aspect-ratio: 21 / 8;
  border-radius: 28px;
}

.page-hero__photo img {
  object-position: 50% 60%;
}

/* The helmet photo (theory test and eight towns): the whole bike, mirrors included, as on the
   home. A 21:8 box cuts the bike at the top or at the wheels, so on desktop it gets 2:1, the
   tablet box. Matched by the file name: the towns swap the photo in locations.json. */
.page-hero__photo img[src*="motorcycle-helmet-training-yard"] {
  object-position: 50% 3%;
}

@media (min-width: 1024px) {
  .page-hero__photo:has(img[src*="motorcycle-helmet-training-yard"]) {
    aspect-ratio: 2 / 1;
  }
}

/* Pre-test: one bike (PT-2). 21:8 would cut it, so 16:9 on desktop and tablet and the usual 4:3
   on phones */
.page-hero__photo.page-hero__photo--169 {
  aspect-ratio: 16 / 9;
}

@media (max-width: 760px) {
  .page-hero__photo.page-hero__photo--169 {
    aspect-ratio: 4 / 3;
  }
}

.caption {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 1.02rem;
  text-align: center;
}

.caption a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Sections and layout ---------- */
.section--tint {
  background: var(--bg-alt);
}

.grid {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
}

.grid--2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

/* photo column narrow, text column wide */
.grid--media {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 44px);
}

.stack {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.stack h2 {
  margin-bottom: 0.4rem;
}

.stack p {
  color: var(--ink-soft);
}

/* Buttons under left-aligned copy (instructor "Book your class now", pre-test,
   lessons ROSPA) line up with the text: the centring is the hero's */
.stack > .hero__actions {
  justify-content: flex-start;
  margin-top: 0.75rem;
}

.stack p a,
.card p a,
.faq__item a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.photo--portrait {
  aspect-ratio: 4 / 5;
}

/* An older photo kept further down the page (about: the team; lessons: the bikes), at its own
   proportions: the width and height attributes reserve the box before it loads */
.section-media {
  margin-top: clamp(40px, 6vw, 72px);
}

.photo--band {
  max-width: 1000px;
  margin-inline: auto;
}

.photo--band img {
  height: auto;
}

/* Theory test: screen recording of the booking steps (TT-3). No sound and its own controls; the
   width and height attributes reserve the box */
.video-demo video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--bg-alt);
}

/* ---------- Open lists: a hairline on top, no box ---------- */
.feat-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.card h3 {
  margin-bottom: 8px;
}

.card p {
  color: var(--ink-soft);
}

/* ---------- Steps (the IBT modules), as on the home ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.step {
  padding: 22px 0 0;
  border-top: 2px solid var(--line);
}

.step__num {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 1.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.step h3 {
  margin-bottom: 8px;
}

.step p {
  color: var(--ink-soft);
}

/* Two days, two modules each, with a solid rule between them */
.days {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.day + .day {
  padding-left: clamp(24px, 3vw, 40px);
  border-left: 1px solid var(--line);
}

.day__label {
  margin-bottom: 18px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.day .steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Licence categories (lessons), like the home's steps ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.cat {
  display: flex;
  flex-direction: column;
  padding: 22px 0 0;
  border-top: 2px solid var(--line);
}

.cat__code {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 1.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cat__code span {
  color: var(--navy);
}

.cat h3 {
  margin-bottom: 8px;
}

.cat p {
  margin-bottom: 18px;
  color: var(--ink-soft);
}

/* A small button under each licence (Manel, 02-10): it opens the form with
   that licence chosen (pages.js). It is the home's .btn--sm (the header's
   "Book a lesson"), but keeps the arrow of the primary buttons. margin-top:
   auto lines the four up at the foot of their cards; the paragraph's margin
   keeps them apart from the text. */
.cat__cta {
  align-self: flex-start;
  margin-top: auto;
}

.btn.cat__cta::after {
  display: block;
}

/* Linked cards (towns): the top rule turns amber on hover or focus and the
   arrow slides 4px. Six towns sit better in three columns. */
.cat-grid:has(> .card--link) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card--link {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px 0 6px;
  border-top: 2px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.card--link::before {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.card--link:hover::before,
.card--link:focus-visible::before {
  transform: scaleX(1);
}

.card--link h3 {
  margin: 0;
  color: var(--ink);
}

.card--link p {
  color: var(--ink-soft);
}

.link-arrow {
  margin-top: 6px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
}

.link-arrow span {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}

.card--link:hover .link-arrow span,
.card--link:focus-visible .link-arrow span {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .card--link::before,
  .link-arrow span {
    transition: none;
  }
}

/* ---------- A single button under a block, centred (lessons "Start now") ---------- */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}

/* ---------- Figures in a 2 x 2 grid between hairlines (about) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.stat {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px clamp(14px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
}

.stat:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid var(--line);
}

.stat__num {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat__label {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.45;
}

/* ---------- Pills: links to the towns (about), like the home's old hero tags ---------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

ul.cluster {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* About: the 26 towns grouped by county (advisor, 02-10). The county is a
   label, not a heading, so the page keeps its outline */
.areas {
  display: grid;
  gap: clamp(24px, 3vw, 32px);
  max-width: 980px;
  margin-inline: auto;
}

.areas__county {
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--navy-tint);
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

a.tag {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

a.tag:hover {
  background: #e0e7ff;
}

.tag__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Key facts between hairlines ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.facts > div {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 22px clamp(14px, 2vw, 24px);
}

.facts > div + div {
  border-left: 1px solid var(--line);
}

.facts dt {
  color: #667085;
  font-size: 0.88rem;
}

.facts dd {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
}

.facts__price,
.facts__big {
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  line-height: 1 !important;
}

/* ---------- Questions, open, in two columns ---------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(24px, 3vw, 48px);
}

.faq__item {
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.faq__item h3 {
  margin-bottom: 8px;
}

.faq__item p {
  color: var(--ink-soft);
}

/* Collapsible questions (theory test, TT-7): the same question and answer
   text, one click to open. A plus turns into a minus. */
.faq--open-close {
  grid-template-columns: minmax(0, 1fr);
  max-width: 52rem;
  margin-inline: auto;
}

details.faq__item {
  padding: 0;
}

details.faq__item summary {
  position: relative;
  display: block;
  padding: 22px 44px 22px 0;
  cursor: pointer;
  list-style: none;
}

details.faq__item summary::-webkit-details-marker {
  display: none;
}

details.faq__item summary h3 {
  margin: 0;
}

details.faq__item summary::before,
details.faq__item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

details.faq__item summary::after {
  transform: rotate(90deg);
  transition: transform 0.25s var(--ease);
}

details.faq__item[open] summary::after {
  transform: rotate(0deg);
}

details.faq__item summary:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

details.faq__item > p {
  padding: 0 44px 24px 0;
}

@media (prefers-reduced-motion: reduce) {
  details.faq__item summary::after {
    transition: none;
  }
}

/* ---------- Reading column (theory test guide) ---------- */
.prose {
  max-width: 44rem;
}

.prose > h2:first-child {
  text-align: center;
}

.prose h3 {
  margin-top: 1.2rem;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.prose ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2rem;
}

.prose a,
.source-note a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.source-note {
  color: var(--ink-soft) !important;
  font-size: 0.9rem;
}

.faq + .source-note {
  margin-top: 24px;
  text-align: center;
}

/* Steps named with words (theory test "after you pass") */
.steps--row .step__num {
  margin-bottom: 14px;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.steps--row h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.step__cta {
  display: inline-block;
  margin-top: 14px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.step__cta::after {
  content: " \2192";
}

.step__cta:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Call to action band: centred between two hairlines ---------- */
.cta-band {
  padding: clamp(40px, 6vw, 72px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.cta-band__inner {
  display: grid;
  justify-items: center;
  gap: 1.6rem;
}

.cta-band h2 {
  max-width: 14em;
}

.cta-band p {
  max-width: 36rem;
  margin: 0.8rem auto 0;
  color: var(--ink-soft);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* The lessons band sits on a photo of the yard (Manel, LE-4), under one even
   dark layer so the text reads: no colour fade, no stripes */
.cta-band--photo {
  padding: clamp(56px, 8vw, 104px) clamp(20px, 4vw, 48px);
  border: 0;
  border-radius: 28px;
  background:
    linear-gradient(rgba(16, 24, 40, 0.64), rgba(16, 24, 40, 0.64)),
    url("/assets/img/facility/instructor-motorcycles-group-training-yard-1280.webp") 50% 55% / cover no-repeat;
  color: #ffffff;
}

.cta-band--photo h2 {
  color: #ffffff;
}

.cta-band--photo p {
  color: rgba(255, 255, 255, 0.86);
}

.cta-band--photo p a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- Contact block and form, as the home's "book" section ---------- */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 0 clamp(32px, 5vw, 80px);
}

/* the home's form sits in a named grid area ("form") that this grid doesn't
   have; without this it lands in an extra column */
.contact-split .lead-form {
  grid-area: auto;
}

.contact-info h2 {
  max-width: 9em;
  margin-bottom: 1.2rem;
}

.contact-info .lead {
  color: var(--ink-soft);
}

.contact-rows {
  display: grid;
  gap: 16px;
  margin: 32px 0 36px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-row__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-tint);
  color: var(--ink);
}

.contact-row__icon svg {
  width: 22px;
  height: 22px;
}

/* min-width: 0 lets the email shrink inside the flex row instead of pushing it past the screen */
.contact-row dl {
  min-width: 0;
  margin: 0;
}

.contact-row dt {
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.contact-row dd {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* the email fits on one line down to 360 px; narrower than that it breaks */
@media (max-width: 400px) {
  .contact-row dd {
    font-size: 1rem;
  }
}

.contact-row dd a {
  text-decoration: none;
}

/* D-9: placeholders in #667085 (4.97:1 on white); the home keeps its #98a2b3 */
.field input::placeholder,
.field textarea::placeholder {
  color: #667085;
}

/* D-9: main.js never empties .field__error, so it shows only on a field
   marked as wrong (the home hides it only when empty) */
.field__error {
  display: none;
}

.field--error .field__error {
  display: block;
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1023px) {
  .grid--2,
  .grid--media,
  .contact-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid--3,
  .faq,
  .cat-grid,
  .cat-grid:has(> .card--link) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero__photo {
    aspect-ratio: 16 / 8;
  }

  .photo--portrait {
    aspect-ratio: 4 / 3;
  }

  .days {
    grid-template-columns: minmax(0, 1fr);
  }

  .day + .day {
    padding-top: 28px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .contact-split .lead-form {
    margin-top: 8px;
  }
}

@media (max-width: 760px) {
  .page-hero__photo {
    aspect-ratio: 4 / 3;
  }

  /* Photo shown from tablet up only (contact: Manel, 14-10). Its <picture> gives phones a
     1px blank source, so the photo is not downloaded there either. */
  .page-hero__visual--wide {
    display: none;
  }

  /* Without the photo, the next section's own top padding is space enough */
  .page-hero:has(> .page-hero__visual--wide) {
    padding-bottom: 0;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .grid--3,
  .faq,
  .steps,
  .day .steps,
  .cat-grid,
  .cat-grid:has(> .card--link) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-band--photo {
    background:
      linear-gradient(rgba(16, 24, 40, 0.64), rgba(16, 24, 40, 0.64)),
      url("/assets/img/facility/instructor-motorcycles-group-training-yard-800.webp") 50% 55% / cover no-repeat;
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts > div + div {
    border-left: 0;
  }

  .facts > div:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}

/* ---------- Privacy and cookies (/privacy): legal text in the reading column ---------- */
.page-hero__meta {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* eight sections in a row: smaller than the site's display h2, and all left-aligned */
.prose.legal > h2:first-child {
  text-align: start;
}

.legal h2 {
  margin-top: 1.6rem;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  line-height: 1.15;
}

.legal > h2:first-child {
  margin-top: 0;
}

/* cookie table: three short columns that wrap instead of scrolling sideways */
.legal table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
  font-size: 0.95rem;
  table-layout: fixed;
}

.legal th,
.legal td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.legal thead th {
  background: var(--bg-alt);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
}

.legal th:first-child {
  width: 32%;
}

.legal th:last-child {
  width: 22%;
}

.legal tbody td {
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.legal tbody td:first-child {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  /* breaks at the <wbr> after each underscore; mid-word only if a piece still doesn't fit */
  overflow-wrap: break-word;
}

/* "Cookie settings" inside the text: a button that reads like the links around it */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .legal th,
  .legal td {
    padding: 10px;
  }
}

/* Panel inside a white section: "Pre-test at the <centre> test centre" (locations) and
   "What comes after IBT" (/ibt-training), 20-10. Both sit next to another white section, so the
   tinted panel does the separating and the white gap on that side is dropped. Heading on the
   left and copy on the right from 1024px; one column below. */
.section--panel > .wrap > .stack {
  padding: clamp(28px, 4.5vw, 64px);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.section--panel .stack > p {
  max-width: 44rem;
}

.section:not(.section--tint) + .section--panel {
  padding-top: 0;
}

.section--panel + .section:not(.section--tint) {
  padding-top: 0;
}

@media (min-width: 1024px) {
  .section--panel .stack {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }

  .section--panel .stack > h2 {
    grid-column: 1;
    grid-row: 1 / span 4;
    font-size: clamp(2rem, 1.2rem + 1.5vw, 2.75rem);
  }

  .section--panel .stack > :not(h2) {
    grid-column: 2;
  }
}

/* "How to get to our training ground" (locations, 20-10): the address, a route form that opens
   Google Maps in a new tab (works without JS) and a map that only loads when asked for. The
   frame keeps its size before and after, so loading the map moves nothing. */
.route-form {
  display: grid;
  max-width: 30rem;
}

.route-form .field {
  margin-bottom: 14px;
}

.route-form .btn {
  justify-self: start;
}

.route-form__note,
.map-card__note {
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 0.88rem;
}

.map-card {
  display: grid;
  gap: 12px;
}

.map-card__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 4 / 3;
  padding: 20px;
  text-align: center;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--navy);
}

.map-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-card__address {
  max-width: 22rem;
  color: var(--ink);
  font-weight: 600;
}

.map-card__load {
  display: grid;
  justify-items: center;
}

.map-card__load[hidden] {
  display: none;
}

.map-card__note {
  max-width: 20rem;
}

.map-card__link {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.getting-here + .section:not(.section--tint) {
  padding-top: 0;
}

@media (max-width: 760px) {
  .route-form .btn {
    justify-self: stretch;
  }

  /* A 4:3 box is too short on a phone for the address, the button and the cookie note: a fixed
     height instead, the same before and after the map loads. */
  .map-card__frame {
    aspect-ratio: auto;
    height: 20rem;
  }
}

/* "IBT at Fairyhouse, pre-test in <town>" (locations, 20-10): the panel holds the heading across the
   top and two cards of the same weight below it. On a phone the cards carry the tint themselves, so
   the copy keeps its width instead of sitting inside two layers of padding. */
.panel-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: 0.5rem;
}

.panel-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(22px, 2.5vw, 32px);
  border-radius: calc(var(--radius) - 6px);
  background: var(--surface);
}

.panel-card p {
  color: var(--ink-soft);
}

/* A card that ends in a button («Come pass your IBT with us», 20-10): the button keeps its own width and
   sits at the foot of the card, level with the end of the taller card next to it. */
.panel-card:has(> .btn) {
  display: flex;
  flex-direction: column;
}

.panel-card > p:has(+ .btn) {
  margin-bottom: 12px;
}

.panel-card > .btn {
  align-self: flex-start;
  margin-top: auto;
}

@media (min-width: 1024px) {
  .section--panel .stack:has(> .panel-split) {
    grid-template-columns: minmax(0, 1fr);
  }

  .section--panel .stack:has(> .panel-split) > * {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .panel-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .section--panel > .wrap > .stack:has(> .panel-split) {
    padding: 0;
    background: none;
  }

  .stack:has(> .panel-split) .panel-card {
    background: var(--bg-alt);
  }

  .panel-card > .btn {
    align-self: stretch;
  }
}

/* The licence journey in five steps (locations "From theory test to test day", 20-10). Five columns
   from 1240px, three and two between 761 and 1239, one on a phone. Step 03 is the one done with us
   (accent rule on top); step 04 is optional (tinted box, softer number) and says so in its tag. */
.steps--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.step .step__tag {
  margin-bottom: 6px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.steps--five .step__cta {
  display: table;
}

.steps--five .step__cta + .step__cta {
  margin-top: 8px;
}

/* Keep the arrow with its last word instead of alone on a line */
.steps--five .step__cta::after {
  content: "\00a0\2192";
}

.step--us {
  border-top-color: var(--accent);
}

.step--optional {
  padding: 22px 16px;
  border-radius: calc(var(--radius) - 6px);
  background: var(--bg-alt);
}

.step--optional .step__num {
  color: var(--ink-faint);
}

@media (max-width: 1239px) {
  .steps--five {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .steps--five > .step {
    grid-column: span 2;
  }

  .steps--five > .step:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (max-width: 760px) {
  .steps--five {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps--five > .step,
  .steps--five > .step:nth-child(n + 4) {
    grid-column: auto;
  }
}

/* /pre-test "How the motorbike test works in Ireland." (20-10): an exam dossier in two columns from
   1024px. The rules (booking, length, what to bring) on the left as plain copy; the paragraph about
   the test itself (desk, bike, road) on the right as a navy card, which is the heart of the section.
   Only the layout changes: the copy and its order in the HTML stay as they were, and on smaller
   screens it reads top to bottom with the card in its place. */
.test-layout {
  max-width: none;
}

.test-layout > p:nth-child(3) {
  position: relative;
  padding: clamp(28px, 3.5vw, 44px);
  border-radius: var(--radius);
  background: var(--navy);
  color: #ffffff;
  font-size: 1.04rem;
  line-height: 1.7;
}

.test-layout > p:nth-child(3)::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-bottom: 18px;
  border-radius: 2px;
  background: var(--accent);
}

@media (min-width: 1024px) {
  .test-layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }

  .test-layout > p {
    grid-column: 1;
  }

  /* Left: booking (1) and what to bring (4). Right: what the test is (2), then the card (3).
     Balanced after the longer paragraph 4 (7d339c8, the school's bike for the test). */
  .test-layout > p:nth-child(1) {
    grid-row: 1 / span 2;
  }

  .test-layout > p:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .test-layout > p:nth-child(3) {
    grid-column: 2;
    grid-row: 2 / span 2;
  }

  .test-layout > p:nth-child(4) {
    grid-row: 3;
  }

  .test-layout > .source-note {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 12px;
  }
}

/* /motorbike-licence-ireland (21-10): the six steps as numbered cards, three across on a desktop, two on a
   tablet, one on a phone. The list stays an <ol> with each step's lead in <strong>; the number comes from a CSS
   counter. Step 3, the IBT done with us, carries the accent rule like the locations' "IBT, with us" step. */
.licence-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.licence-steps > li {
  position: relative;
  padding: 26px 24px 26px;
  border-top: 3px solid var(--line);
  border-radius: 0 0 calc(var(--radius) - 6px) calc(var(--radius) - 6px);
  background: var(--bg-alt);
  color: var(--ink-soft);
  counter-increment: paso;
}

.licence-steps > li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.8rem + 1.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.licence-steps > li strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.licence-steps > li a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.licence-steps > .licence-steps__us {
  border-top-color: var(--accent);
}

/* A short paragraph under a row of figures, centred under them instead of hugging the left edge */
.prose--centre {
  margin-inline: auto;
}

.cat-grid + .source-note {
  margin-top: 28px;
  text-align: center;
}

@media (max-width: 1023px) {
  .licence-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .licence-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Five licence categories (/motorcycle-lessons with AM, 21-10): three on the first row and two on the second,
   both rows filling the width, instead of four and one left on its own. One column on a phone. */
.cat-grid--five {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cat-grid--five > .cat {
  grid-column: span 2;
}

.cat-grid--five > .cat:nth-child(n + 4) {
  grid-column: span 3;
}

@media (max-width: 760px) {
  .cat-grid--five {
    grid-template-columns: minmax(0, 1fr);
  }

  .cat-grid--five > .cat,
  .cat-grid--five > .cat:nth-child(n + 4) {
    grid-column: auto;
  }
}

/* dublin-city «Which Dublin test centres we cover» (22-10): the seven RSA centres as small white cards with a
   pin on the tinted band. Four and three across on a desktop, three, two and two on a tablet (no card left on its
   own), one column on a phone. Each card keeps its text as written: the centre in bold, then the address. */
.centre-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0;
  list-style: none;
}

.centre-list > li {
  position: relative;
  grid-column: span 4;
  padding: 22px 22px 22px 54px;
  border-radius: calc(var(--radius) - 6px);
  background: var(--surface);
  color: var(--ink-soft);
  line-height: 1.55;
}

.centre-list > li:nth-child(-n + 4) {
  grid-column: span 3;
}

.centre-list > li::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 22px;
  width: 20px;
  height: 20px;
  background: var(--navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.centre-list strong {
  color: var(--ink);
  font-family: var(--font-display);
}

.centre-list a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* The FAQ comes straight after the five-step timeline (both white): the timeline's own padding is gap enough */
#licence-steps + #faq {
  padding-top: 0;
}

@media (max-width: 1023px) {
  .centre-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .centre-list > li,
  .centre-list > li:nth-child(-n + 4) {
    grid-column: span 3;
  }

  .centre-list > li:nth-child(-n + 3) {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .centre-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .centre-list > li,
  .centre-list > li:nth-child(-n + 4),
  .centre-list > li:nth-child(-n + 3) {
    grid-column: auto;
  }
}