/* ==========================================================================
   RSA School of Motoring Cork: design system v2

   Loaded INSTEAD of unified.css, never alongside it. A page is either fully
   on the old stylesheet or fully on this one, which is why there are no
   overrides here and no selector fights. See decisions-overnight.md.

   Pairs with tokens.css, which must load first.
   Vocabulary follows the locked Leinster system; the modules Leinster never
   mocked up follow Tallaght Pack v2.
   ========================================================================== */

/* ---------- 1. Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-body);
  font: var(--fw-regular) var(--fs-body-lg)/var(--lh-relaxed) var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[id] { scroll-margin-top: var(--scroll-offset); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--color-text);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}
h1 { font-size: var(--fs-hero-a); line-height: var(--lh-display); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.02em; }
h4 { font-size: var(--fs-h4); letter-spacing: -.01em; text-transform: none; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Headings carry an accent clause in green, as the pack does. */
.ck-accent { color: var(--color-accent); }

/* ---------- 2. Layout primitives ---------- */
.ck-wrap { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.ck-section { padding: var(--space-section) 0; position: relative; }
.ck-section--tight { padding: 64px 0; }
.ck-section--surface { background: var(--color-panel); }
.ck-section--deep { background: var(--color-bg-deep); }
.ck-section + .ck-section:not(.ck-section--surface):not(.ck-section--deep) { border-top: 1px solid var(--rsa-line-08); }

.ck-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--space-12);
  font: var(--fw-bold) var(--fs-eyebrow)/1.4 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}
.ck-eyebrow__marker {
  background: var(--color-accent); color: var(--color-on-accent);
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: 11px; padding: 6px 12px 5px 8px; height: 29px;
  display: inline-flex; align-items: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.ck-lede { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--color-text-lede); max-width: 54ch; }
.ck-prose { max-width: 62ch; }
.ck-prose a { color: var(--color-accent); text-underline-offset: 3px; }
.ck-prose a:hover { color: var(--color-text-strong); }

/* ---------- 3. Buttons ---------- */
.ck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: var(--pad-btn);
  border: 1px solid transparent; border-radius: var(--radius-xs);
  background: var(--color-action); color: var(--color-on-action);
  font: var(--fw-black) var(--fs-label)/1.4 var(--font-display);
  letter-spacing: var(--ls-button); text-transform: uppercase; text-decoration: none;
  transition: background var(--dur-fast);
}
.ck-btn:hover { background: var(--color-action-hover); color: var(--color-on-action); }
.ck-btn--ghost { background: transparent; border-color: var(--rsa-line-25); color: var(--color-text); }
.ck-btn--ghost:hover { background: var(--rsa-line-08); border-color: var(--color-text); }
.ck-btn--block { width: 100%; }
.ck-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--space-14) 0 var(--space-9); }

/* ---------- 4. Objects: the pack's physical vocabulary ---------- */

/* County road sign. Irish over English, as real signage does. Reserved for
   the county: districts and towns never appear on the green plate. */
.ck-sign {
  display: inline-block; background: var(--rsa-sign-green);
  padding: 7px; border-radius: var(--radius-sign);
  box-shadow: var(--shadow-sign); transform: var(--tilt-sign-l);
}
.ck-sign__inner {
  /* It is a span: without an explicit display it computes to inline, and
     min-width does not apply to inline elements. */
  display: block;
  border: 3px solid var(--rsa-white); border-radius: 5px;
  padding: 22px 40px; text-align: center; min-width: 190px;
  font-family: var(--font-body); color: var(--rsa-white);
}
.ck-sign__ga { display: block; font-style: italic; font-size: 21px; line-height: 1.2; color: var(--color-sign-text); }
.ck-sign__en { display: block; font: var(--fw-bold) 36px/1.15 var(--font-body); letter-spacing: -.015em; }
/* When the sign is the whole aside, the aside must not shrink below it. */
.ck-hero__aside--sign { justify-self: stretch; place-items: center; }
.ck-hero__aside--sign > .ck-sign { width: fit-content; }

/* Learner plate. */
.ck-plate {
  display: grid; place-items: center; flex: none;
  width: 50px; height: 50px; border-radius: var(--radius-lg);
  background: var(--rsa-chalk); color: var(--rsa-plate-red);
  font: 900 30px/1 var(--font-display);
  box-shadow: var(--inset-red);
}

/* Approval seal, the proof bar's first cell. */
.ck-seal {
  display: grid; place-items: center; flex: none;
  width: 50px; height: 50px; border-radius: var(--radius-xs);
  background: var(--color-accent); color: var(--color-on-accent);
  font: 900 26px/1 var(--font-display);
  box-shadow: inset 0 0 0 3px rgba(11,11,12,.15);
}

/* ---------- 5. Proof bar (P1) ---------- */
/* Cells lead with a numeral or an object, hairline dividers, no boxes. */
.ck-proof { display: flex; align-items: stretch; border-top: 1px solid var(--rsa-line-16); }
.ck-proof__cell {
  flex: 1; display: flex; align-items: center; gap: 18px;
  padding: 28px 32px; border-left: 1px solid var(--rsa-line-16);
}
.ck-proof__cell:first-child { border-left: 0; padding-left: 0; }
.ck-proof__num {
  font: var(--fw-black) clamp(34px, 3.6vw, 48px)/1 var(--font-display);
  letter-spacing: var(--ls-tighter); color: var(--color-eyebrow);
}
.ck-proof__num--green { color: var(--color-accent); }
.ck-proof__num--chalk { color: var(--color-text); }
.ck-proof__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-proof__label { font: var(--fw-bold) 15px/1.3 var(--font-body); color: var(--color-text); }
.ck-proof__sub { font-size: var(--fs-small); color: var(--color-text-muted); }
.ck-proof__stars { color: var(--color-star); letter-spacing: var(--ls-stars); font-size: 15px; }

/* ---------- 6. Header ---------- */
.ck-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-bg-deep); border-bottom: var(--rule-header);
  box-shadow: var(--shadow-header);
}
.ck-header__inner { display: flex; align-items: center; gap: var(--space-16); height: 84px; }
.ck-header__logo { width: 124px; }
.ck-nav { display: flex; align-items: center; gap: var(--space-14); margin-left: auto; }
.ck-nav a {
  font: var(--fw-bold) var(--fs-label)/1 var(--font-body);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--color-text-body); text-decoration: none;
}
.ck-nav a:hover { color: var(--color-text); }
/* `.ck-nav a` is more specific than `.ck-nav__phone`, so the chip was taking
   the muted nav colour instead of its own: white-ish grey on red, 2.78:1, and
   the phone number is the one thing in the header that has to be readable.
   Matching the specificity fixes it. */
.ck-nav a.ck-nav__phone, .ck-nav__phone {
  background: var(--color-action); color: var(--color-on-action);
  padding: 14px 18px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.ck-nav a.ck-nav__phone:hover, .ck-nav__phone:hover { background: var(--color-action-hover); color: var(--color-on-action); }
.ck-menu-btn { display: none; background: var(--color-panel); border: 1px solid var(--rsa-line-16); color: var(--color-text); width: 46px; height: 46px; border-radius: var(--radius-xs); }

/* ---------- 7. Footer ---------- */
.ck-footer { background: var(--color-bg-deep); border-top: 1px solid var(--rsa-line-12); padding-top: 72px; }
.ck-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; }
.ck-footer h3 {
  font: var(--fw-bold) var(--fs-eyebrow)/1.4 var(--font-body);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-12);
}
.ck-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-body-sm); }
.ck-footer a { color: var(--color-text-muted); text-decoration: none; }
.ck-footer a:hover { color: var(--color-text); }
.ck-footer__bottom {
  margin-top: 64px; padding: 24px 0; border-top: 1px solid var(--rsa-line-08);
  display: flex; justify-content: space-between; gap: 16px;
  font-size: var(--fs-caption); color: var(--color-text-faint);
}

/* ---------- 8. Hero, skin A: signpost ---------- */
.ck-hero { position: relative; isolation: isolate; padding-top: 72px; overflow: hidden; }
.ck-hero__photo { position: absolute; inset: 0; z-index: -2; }
.ck-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.ck-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--overlay-hero-a); }
.ck-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr);
  gap: 64px; align-items: center; min-height: 540px; padding-bottom: 64px;
}
.ck-hero h1 { max-width: 15ch; }
.ck-hero .ck-lede { margin-top: var(--space-12); }
.ck-hero__aside { justify-self: end; align-self: center; display: grid; }
.ck-hero__hook { font-size: var(--fs-small); color: var(--color-text-muted); }
.ck-hero__hook a { color: var(--color-accent); }

/* ---------- 9. Split story (S1) ---------- */
.ck-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ck-story--flip > :first-child { order: 2; }
.ck-offset { position: relative; isolation: isolate; }
.ck-offset::before { content: ''; position: absolute; inset: 20px -18px -18px 20px; background: var(--color-accent); z-index: -1; }
.ck-offset img { width: 100%; height: 440px; object-fit: cover; box-shadow: var(--shadow-card-hover); }

/* ---------- 10. Road stops (S4) ---------- */
.ck-stops { display: grid; gap: 0; border-left: 3px dashed var(--rsa-line-22); margin: 32px 0 0 14px; }
.ck-stop { position: relative; padding: 10px 0 28px 38px; }
.ck-stop:last-child { padding-bottom: 0; }
.ck-stop__n {
  position: absolute; left: -17px; top: 8px;
  display: grid; place-items: center; width: 32px; height: 32px;
  background: var(--color-accent); color: var(--color-on-accent);
  border: 5px solid var(--color-bg);
  font: var(--fw-black) 10px/1 var(--font-display);
}
.ck-stop h3 { font-size: 21px; margin-bottom: 6px; text-transform: none; }
.ck-stop p { color: var(--color-text-muted); font-size: var(--fs-body); }

/* ---------- 11. Cards ---------- */
.ck-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.ck-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--color-panel); border: 1px solid var(--rsa-line-08);
  border-radius: var(--radius-xs); padding: var(--pad-card);
}
.ck-card h3 { text-transform: none; font-size: 19px; }
.ck-card p { color: var(--color-text-muted); font-size: var(--fs-body-sm); margin: 0; }

/* Sign-styled place links, for town and area walls. */
.ck-places { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ck-place {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 18px; background: var(--color-panel);
  border: 1px solid var(--rsa-line-16); border-radius: var(--radius-md);
  color: var(--color-text); text-decoration: none;
  font: var(--fw-bold) var(--fs-body-sm)/1 var(--font-body);
}
.ck-place::after { content: '→'; color: var(--color-accent); }
.ck-place:hover { background: var(--color-panel-raised); border-color: var(--color-accent); }

/* Plain pills, for served areas that have no page of their own. */
.ck-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
/* A tier chip is a control, so it looks and behaves like one. */
button.ck-pill { cursor: pointer; background: none; font: inherit; }
button.ck-pill:hover { border-color: var(--color-accent); color: var(--color-text); }
.ck-pill.active, .ck-pill[aria-pressed="true"] {
  border-color: var(--color-accent); background: rgba(142,219,79,.08); color: var(--color-text);
}
.calc-slider-labels { justify-content: space-between; max-width: 100%; }

.ck-pill {
  padding: 8px 14px; border: 1px solid var(--rsa-line-12); border-radius: 100px;
  font-size: var(--fs-small); color: var(--color-text-muted);
}

/* ---------- 12. Price tickets (F3) ---------- */
.ck-tickets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-top: 36px; }
.ck-ticket {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--rsa-chalk); color: var(--rsa-road-black);
  border-top: 10px solid var(--color-action); border-radius: var(--radius-md);
  padding: 26px; box-shadow: var(--shadow-card);
}
.ck-ticket--best { background: var(--color-accent); border-top-color: var(--rsa-road-black); }
.ck-ticket__name { font: var(--fw-black) 13px/1.3 var(--font-display); letter-spacing: var(--ls-label); text-transform: uppercase; }
.ck-ticket__price { font: var(--fw-black) 46px/1 var(--font-display); letter-spacing: var(--ls-tighter); }
.ck-ticket__per { font-size: var(--fs-small); opacity: .75; }
.ck-ticket__rule { border: 0; border-top: 2px dashed rgba(11,11,12,.25); margin: 4px 0; }
/* A ghost button inside a light card was chalk on chalk: invisible. The
   ticket is a pale object, so anything on it takes the ticket's own ink. */
.ck-ticket .ck-btn--ghost {
  border-color: rgba(11,11,12,.32); color: var(--rsa-road-black); background: transparent;
}
.ck-ticket .ck-btn--ghost:hover { background: rgba(11,11,12,.08); border-color: var(--rsa-road-black); color: var(--rsa-road-black); }
.ck-ticket--best .ck-btn--ghost { border-color: rgba(11,11,12,.4); }
.ck-ticket .ck-btn { margin-top: auto; }

/* ---------- 13. Review wall (C2) ---------- */
.ck-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 36px; }
.ck-review { display: flex; flex-direction: column; gap: 16px; }
.ck-review__body { background: var(--color-panel-raised); border-radius: var(--radius-xs); padding: 28px; }
.ck-review--feature .ck-review__body { background: var(--color-action); color: var(--color-on-action); }
.ck-review__quote { display: block; font: 900 72px/.6 var(--font-display); height: 34px; color: var(--color-bg-deep); }
.ck-review--feature .ck-review__quote { color: var(--color-bg-deep); }
.ck-review blockquote { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); }
.ck-review--feature blockquote { color: var(--color-on-action); }
.ck-review__who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.ck-review__avatar {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-avatar-blue); color: var(--rsa-white);
  font: var(--fw-black) 16px/1 var(--font-display);
}
.ck-review__name { font: var(--fw-bold) var(--fs-body-sm)/1.3 var(--font-body); color: var(--color-text); }
.ck-review__meta { font-size: var(--fs-caption); color: var(--color-text-muted); }
.ck-review--feature .ck-review__name, .ck-review--feature .ck-review__meta { color: var(--color-on-action); }
.ck-review__stars { color: var(--color-star); letter-spacing: var(--ls-stars); font-size: 14px; }
.ck-review--feature .ck-review__stars { color: var(--rsa-white); }

/* Rating headline, amber numeral. */
.ck-rating { display: flex; align-items: center; gap: 20px; }
.ck-rating__value { font: var(--fw-black) clamp(56px, 7vw, 104px)/.8 var(--font-display); letter-spacing: var(--ls-tighter); color: var(--color-star); }
.ck-rating__caption { font-size: var(--fs-body-sm); color: var(--color-text-muted); max-width: 18ch; }

/* ---------- 14. FAQ (X2) ---------- */
.ck-faq { margin-top: 32px; border-top: 1px solid var(--rsa-line-12); }
.ck-faq__item { border-bottom: 1px solid var(--rsa-line-12); }
.ck-faq__q {
  display: grid; grid-template-columns: 1fr 32px; align-items: center; gap: 16px;
  width: 100%; padding: 24px 0; background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--color-text);
  font: var(--fw-bold) 17px/1.4 var(--font-body);
}
.ck-faq__icon {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-panel); color: var(--color-accent);
  font: var(--fw-black) 18px/1 var(--font-display); transition: background var(--dur-fast);
}
.ck-faq__item[open] .ck-faq__icon { background: var(--color-accent); color: var(--color-on-accent); }
.ck-faq__a { padding: 0 48px 26px 0; color: var(--color-text-muted); font-size: var(--fs-body); }
.ck-faq__q::-webkit-details-marker { display: none; }

/* ---------- 15. Tracker and tabs (I1, I2) ---------- */
.ck-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; margin: 28px 0; }
.ck-rail button {
  padding: 14px 12px; min-height: 62px; cursor: pointer;
  background: var(--color-panel); border: 1px solid var(--rsa-line-08);
  border-radius: var(--radius-xs); color: var(--color-text-muted);
  font: var(--fw-bold) var(--fs-small)/1.35 var(--font-body); text-align: left;
}
.ck-rail button[aria-selected="true"] {
  border-color: var(--color-accent); background: rgba(142,219,79,.06); color: var(--color-text);
}
.ck-panel { background: var(--color-panel); border-top: 4px solid var(--color-accent); padding: 32px; }
.ck-panel h3 { text-transform: none; margin-bottom: 10px; }
.ck-panel p { color: var(--color-text-muted); }
.ck-panel[hidden] { display: none; }

/* EDT tile tracker. */
.ck-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.ck-tile {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-xs);
  background: var(--rsa-track); color: var(--color-track-text);
  font: var(--fw-black) 13px/1 var(--font-display);
}
.ck-tile--on { box-shadow: inset 0 0 0 2px var(--color-accent); color: var(--color-accent); }

/* ---------- 15b. Readiness quiz ---------- */
/* The quiz is built by the page's own script, which reaches for ck-panel and
   ck-pill. Those are a flat panel and a small muted chip: on a surface section
   the panel is the same colour as the ground, so no card appears, and a pill is
   the wrong object for a sentence you are being asked to choose. This gives the
   module its own treatment without touching the script's class names. */
.quiz-card {
  background: var(--color-bg-deep);
  border: 1px solid var(--rsa-line-12);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-xs);
  padding: 32px;
}
.quiz-question {
  font-size: clamp(19px, 2vw, 23px); text-transform: none;
  margin-bottom: 20px; color: var(--color-text);
}

/* Options are choices, not tags: full width, tall enough to tap, and each one
   carries its own state. */
.quiz-options.ck-pills {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px; margin-top: 0;
}
.quiz-option.ck-pill {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  min-height: 56px; padding: 14px 18px;
  border: 1px solid var(--rsa-line-16); border-radius: var(--radius-xs);
  background: var(--color-panel); color: var(--color-text);
  font-size: var(--fs-body-sm); line-height: 1.35;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.quiz-option.ck-pill:hover { border-color: var(--color-accent); }
/* The native control becomes the indicator, so it stays focusable and
   keyboard-operable rather than being hidden and reinvented. */
.quiz-option input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--color-field-border); background: transparent;
  display: grid; place-content: center; cursor: pointer;
}
.quiz-option input[type="radio"]::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  transform: scale(0); transition: transform var(--dur-fast);
  background: var(--color-accent);
}
.quiz-option input[type="radio"]:checked { border-color: var(--color-accent); }
.quiz-option input[type="radio"]:checked::before { transform: scale(1); }
.quiz-option:has(input:checked) {
  border-color: var(--color-accent); background: rgba(142,219,79,.07);
}
.quiz-option:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* The footer row: where you are, and the way on. */
.quiz-nav.ck-btn-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 26px 0 0; padding-top: 22px;
  border-top: 1px solid var(--rsa-line-08);
}
.quiz-counter {
  font: var(--fw-bold) var(--fs-caption)/1 var(--font-body);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--color-text-muted); white-space: nowrap;
}
.quiz-progress {
  flex: 1 1 auto; height: 6px; min-width: 60px;
  background: var(--color-panel-raised); border-radius: 100px; overflow: hidden;
}
.quiz-progress span {
  display: block; height: 100%; background: var(--color-accent);
  border-radius: inherit; transition: width var(--dur-base, .25s) ease;
}
.quiz-next:disabled { opacity: .45; cursor: not-allowed; }
.quiz-next:disabled:hover { background: var(--color-action); }

/* The verdict. */
.quiz-result { display: grid; gap: 4px; }
.quiz-result .ck-rating { align-items: baseline; }
.quiz-verdict { font: var(--fw-black) clamp(21px, 2.4vw, 28px)/1.2 var(--font-display); color: var(--color-text); max-width: none; }
.quiz-advice { color: var(--color-text-muted); }

@media (max-width: 600px) {
  .quiz-card { padding: 22px; }
  .quiz-nav.ck-btn-row { flex-wrap: wrap; }
  .quiz-progress { order: 3; flex-basis: 100%; }
}

/* ---------- 16. Map ---------- */
.ck-map { border: 1px solid var(--rsa-line-16); border-radius: var(--radius-xs); overflow: hidden; background: var(--color-panel); }
.ck-map > div { min-height: 300px; }

/* ---------- 17. Call band (X3) ---------- */
.ck-band { background: var(--color-action); color: var(--color-on-action); padding: 56px 0; }
.ck-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ck-band h2 { color: var(--color-on-action); max-width: 20ch; }
.ck-band p { color: var(--color-on-action); opacity: .9; }
.ck-band .ck-btn { background: var(--color-bg-deep); color: var(--color-text); }
.ck-band .ck-btn:hover { background: var(--rsa-road-black); }

/* ---------- 18. Breadcrumb ---------- */
.ck-crumb { padding: 20px 0 0; font-size: var(--fs-caption); color: var(--color-text-faint); }
.ck-crumb a { color: var(--color-text-muted); text-decoration: none; }
.ck-crumb a:hover { color: var(--color-text); }
.ck-crumb span { margin: 0 8px; }

/* ---------- 19. Sidebar, skin A only ---------- */
.ck-dash { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.ck-aside { position: sticky; top: var(--scroll-offset); display: grid; gap: 16px; }
.ck-aside__card { background: var(--color-panel); border: 1px solid var(--rsa-line-08); border-left: 3px solid var(--color-accent); padding: 20px; }
.ck-aside__card h4 { color: var(--color-text); margin-bottom: 6px; }
.ck-aside__card p { color: var(--color-text-muted); font-size: var(--fs-body-sm); margin: 0; }
.ck-aside__card small { display: block; margin-top: 8px; color: var(--color-text-faint); font-size: var(--fs-caption); }

/* ---------- 20. Responsive ---------- */
@media (max-width: 1100px) {
  .ck-dash { grid-template-columns: 1fr; }
  .ck-aside { position: static; }
  .ck-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .ck-hero__aside { justify-self: start; }
  .ck-story { grid-template-columns: 1fr; gap: 40px; }
  .ck-story--flip > :first-child { order: 0; }
  .ck-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  :root { --gutter: var(--gutter-mobile); }
  body { font-size: var(--fs-body); }
  .ck-section { padding: 64px 0; }
  /* The display floor of 50px overflows at 375px: Castletownshend is 15
     characters. Scale to the viewport instead, with a floor that fits. */
  h1 { font-size: clamp(31px, 8.6vw, 52px); }
  .ck-header__inner { height: 72px; }
  .ck-nav { display: none; }
  .ck-menu-btn { display: block; margin-left: auto; }
  .ck-proof { display: grid; grid-template-columns: 1fr; }
  .ck-proof__cell { border-left: 0; border-top: 1px solid var(--rsa-line-16); padding: 20px 0; }
  .ck-proof__cell:first-child { border-top: 0; }
  .ck-offset img { height: 300px; }
  .ck-tickets, .ck-reviews, .ck-cards { grid-template-columns: 1fr; }
  .ck-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ck-band__inner { flex-direction: column; align-items: flex-start; }
  .ck-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .ck-footer__bottom { flex-direction: column; }
  .ck-rail { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ck-btn-row { display: grid; grid-template-columns: 1fr; }
  .ck-sign { transform: none; }
  .ck-rating__value { font-size: 64px; }
}

/* ---------- 21. Quick pricing card, the hero aside ---------- */
.ck-quick { width: 320px; max-width: 100%; gap: 10px; }
.ck-quick__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(11,11,12,.12);
  font-size: var(--fs-body-sm);
}
.ck-quick__row:last-of-type { border-bottom: 0; }
.ck-quick__row b { font: var(--fw-black) var(--fs-body)/1 var(--font-display); white-space: nowrap; }

/* Transmission toggle. Class names are kept because interactions.js binds to
   data-toggle, data-toggle-btn, data-toggle-slider and data-toggle-panel. */
.ck-quick__toggle {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: rgba(11,11,12,.08); border-radius: var(--radius-xs); padding: 3px;
}
.ck-quick__toggle .loc-tx-btn {
  position: relative; z-index: 1; cursor: pointer;
  background: none; border: 0; padding: 9px 10px;
  font: var(--fw-bold) var(--fs-small)/1 var(--font-body);
  color: rgba(11,11,12,.6);
}
.ck-quick__toggle .loc-tx-btn.active, .ck-quick__toggle .loc-tx-btn[aria-selected="true"] {
  background: var(--rsa-road-black); color: var(--rsa-chalk); border-radius: 2px;
}
.ck-quick__toggle .loc-tx-slider { display: none; }

/* The same toggle on a dark section. */
.ck-section .ck-quick__toggle { background: var(--color-panel); }
.ck-section .ck-quick__toggle .loc-tx-btn { color: var(--color-text-muted); }
.ck-section .ck-quick__toggle .loc-tx-btn.active,
.ck-section .ck-quick__toggle .loc-tx-btn[aria-selected="true"] { background: var(--color-accent); color: var(--color-on-accent); }

/* Hero skin variations. Content is identical; only the treatment differs. */
/* Route: no backdrop photo. The aside holds a framed photograph on a green
   offset block, with the quick pricing ticket beneath it. */
.ck-hero--route { background: var(--color-bg-deep); }
.ck-hero--route .ck-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: start; }
.ck-hero--route .ck-hero__aside { display: grid; gap: 34px; justify-self: stretch; align-self: center; }
/* The library's licence photographs are transparent cutouts, so the frame
   needs its own ground or the offset block fills the whole picture. */
/* .ck-offset isolates, so its green ::before paints above this element's own
   background. The licence photographs are transparent cutouts, so the ground
   has to go on the picture itself or the green fills the whole frame. */
.ck-hero__frame { border: 8px solid var(--rsa-chalk); box-shadow: var(--shadow-card-hover); }
.ck-hero__frame picture { display: block; background: var(--color-panel); }
.ck-hero__frame img { width: 100%; height: 300px; object-fit: cover; object-position: 55% 35%; }
.ck-hero--route .ck-quick { width: 100%; }
.ck-hero--night .ck-hero__photo { left: 56%; width: 58%; transform: skew(-10deg); overflow: hidden; }
/* Keep the figure clear of the pricing ticket that overlays this corner. */
.ck-hero--night .ck-hero__photo img { transform: skew(10deg) scale(1.12); object-position: 32% center; }
.ck-hero--night::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 56%; width: 18px;
  background: var(--color-accent); transform: skew(-10deg); z-index: -1;
}
@media (max-width: 1100px) {
  /* Route collapses to one column. This needs the same specificity as the
     desktop rule above, which has no media query and would otherwise win. */
  .ck-hero--route .ck-hero__grid { grid-template-columns: 1fr; align-items: center; }
  .ck-hero--route .ck-hero__aside { justify-self: stretch; gap: 24px; }
  .ck-hero__frame img { height: 240px; }
  .ck-hero--night .ck-hero__photo { left: 0; width: 100%; top: 58%; transform: none; opacity: .5; }
  .ck-hero--night .ck-hero__photo img { transform: none; }
  .ck-hero--night::after { display: none; }
  .ck-quick { width: 100%; }
}
.ck-review__verify {
  display: inline-block; margin-top: 14px;
  color: var(--color-accent); text-decoration: none;
  font: var(--fw-bold) var(--fs-small)/1 var(--font-body);
}
.ck-review__verify:hover { color: var(--color-text); text-decoration: underline; }
.ck-review--feature .ck-review__verify { color: var(--rsa-white); }
.ck-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ck-header__place {
  font: var(--fw-black) 13px/1 var(--font-display); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--color-accent);
  padding: 5px 9px; border: 1px solid var(--color-accent); border-radius: var(--radius-xs);
}

/* ==========================================================================
   22. Shared furniture
   These components are injected or included by base.njk on every page, so the
   new stylesheet must carry its own copy for as long as both systems run.
   Every class name here already exists: the markup is NOT changed, because
   214 interactive hooks depend on it. Only the appearance is new.
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.c-breadcrumb { padding: 22px 0 0; }
.c-breadcrumb__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: var(--fs-caption); color: var(--color-text-faint);
}
.c-breadcrumb__link { color: var(--color-text-muted); text-decoration: none; }
.c-breadcrumb__link:hover { color: var(--color-text); }
.c-breadcrumb__separator { margin: 0 6px; color: var(--color-text-faint); }
.c-breadcrumb__current { color: var(--color-text); font-weight: var(--fw-bold); }

/* ---------- Mobile menu ---------- */
/* Hidden until the hamburger opens it. interactions.js toggles .active. */
.mobile-menu {
  display: none; flex-direction: column; gap: 2px;
  position: fixed; left: 0; right: 0; top: 72px; z-index: var(--z-overlay);
  background: var(--color-bg-deep); border-bottom: var(--rule-header);
  padding: 12px 20px 20px;
}
.mobile-menu.active { display: flex; }
.mobile-menu a {
  padding: 14px 4px; border-bottom: 1px solid var(--rsa-line-08);
  color: var(--color-text); text-decoration: none;
  font: var(--fw-bold) var(--fs-body-sm)/1 var(--font-body);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
}
.mobile-menu a:last-child { border-bottom: 0; color: var(--color-accent); }

/* ---------- AI search bar ---------- */
/* Universal component. Classes are fixed by hero-search.js; only looks change. */
.hero-search-bar {
  display: flex; align-items: center; gap: 10px;
  max-width: 560px; margin: var(--space-14) 0 0;
  background: rgba(0,0,0,.55); border: 1px solid var(--color-field-border);
  border-radius: var(--radius-xs); padding: 6px 6px 6px 16px;
}
.hero-search-icon { flex: none; width: 18px; height: 18px; color: var(--color-text-muted); }
.hero-search-input {
  flex: 1; min-width: 0; background: none; border: 0; outline-offset: 4px;
  padding: 12px 0; color: var(--color-text); font-size: var(--fs-body-sm);
}
.hero-search-input::placeholder { color: var(--color-placeholder); }
.hero-search-btn {
  flex: none; cursor: pointer; border: 0; border-radius: 2px;
  padding: 12px 18px; background: var(--color-action); color: var(--color-on-action);
  font: var(--fw-black) var(--fs-label)/1 var(--font-display); text-transform: uppercase;
}
.hero-search-btn:hover { background: var(--color-action-hover); }
.hero-search-results {
  margin-top: 10px; max-width: 560px;
  background: var(--color-panel); border: 1px solid var(--rsa-line-16); border-radius: var(--radius-xs);
}
.hero-search-results:empty { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Two-step lead form ---------- */
/* Field names, ids and data attributes are untouched. Stage visibility stays
   inline-style driven, as base.njk sets it, so the JS contract is unchanged. */
#contact-form-anchor { display: block; }
/* contact-form.njk wraps the injected form in .container, a unified.css class
   v2 does not define, so the card had no gutter of its own. Shared furniture,
   so the name stays and v2 gives it the same measure as .ck-wrap. */
.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.lead-form-card {
  background: var(--color-panel); border: 1px solid var(--rsa-line-08);
  border-top: 4px solid var(--color-action);
  border-radius: var(--radius-xs); padding: 36px;
  max-width: 980px; margin-inline: auto;
}
.lead-form-header { margin-bottom: 24px; }
.lead-form-header h2, .lead-form-card h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 10px; }
.lead-form-header p { color: var(--color-text-muted); font-size: var(--fs-body-sm); margin: 0; }

.lead-form-steps { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.lead-form-step {
  display: flex; align-items: center; gap: 10px;
  font: var(--fw-bold) var(--fs-small)/1 var(--font-body);
  color: var(--color-text-faint);
}
.lead-form-step.active { color: var(--color-text); }
.lead-form-step-num {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 2px;
  background: var(--rsa-raised); color: var(--color-text-muted);
  font: var(--fw-black) 13px/1 var(--font-display);
}
.lead-form-step.active .lead-form-step-num { background: var(--color-accent); color: var(--color-on-accent); }
.lead-form-step-line { flex: 1; height: 2px; background: var(--rsa-line-12); }

.lead-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lead-form-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lead-form-field.full, .lead-form-field.cf-span-2 { grid-column: 1 / -1; }
.lead-form-label {
  font: var(--fw-bold) var(--fs-caption)/1.3 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted);
}
.lead-form-input, .lead-form-select, .lead-form-textarea, .captcha-input {
  width: 100%; padding: 13px 14px;
  background: var(--color-bg-deep); color: var(--color-text);
  border: 1px solid var(--color-field-border); border-radius: var(--radius-xs);
  font-size: var(--fs-body-sm);
}
.lead-form-input::placeholder, .lead-form-textarea::placeholder { color: var(--color-placeholder); }
.lead-form-input:focus, .lead-form-select:focus, .lead-form-textarea:focus { border-color: var(--color-accent); }
.lead-form-textarea { min-height: 110px; resize: vertical; }
.lead-form-select { appearance: none; background-image: none; }

.lead-form-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.lead-form-radio {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 16px; border: 1px solid var(--color-field-border);
  border-radius: var(--radius-xs); font-size: var(--fs-body-sm); color: var(--color-text);
}
.lead-form-radio:hover { border-color: var(--color-accent); }

.lead-form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.lead-form-submit {
  cursor: pointer; border: 0; border-radius: var(--radius-xs);
  padding: 16px 26px; min-height: 52px;
  background: var(--color-action); color: var(--color-on-action);
  font: var(--fw-black) var(--fs-label)/1 var(--font-display);
  letter-spacing: var(--ls-button); text-transform: uppercase;
}
.lead-form-submit:hover { background: var(--color-action-hover); }
.lead-form-back {
  cursor: pointer; background: none; border: 1px solid var(--rsa-line-25);
  border-radius: var(--radius-xs); padding: 15px 20px; color: var(--color-text);
  font: var(--fw-bold) var(--fs-label)/1 var(--font-display); text-transform: uppercase;
}
.lead-form-back:hover { background: var(--rsa-line-08); }

.lead-form-captcha { margin-top: 20px; }
.captcha-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--fs-body-sm); color: var(--color-text-muted); }
.captcha-input { max-width: 110px; }
.captcha-error { color: var(--color-text-red); font-size: var(--fs-small); }
.lead-form-status { margin-top: 16px; font-size: var(--fs-body-sm); color: var(--color-text-muted); }
.lead-form-status.error { color: var(--color-text-red); }
.lead-form-status.success { color: var(--color-accent); }

@media (max-width: 768px) {
  .lead-form-card { padding: 24px; }
  .lead-form-grid { grid-template-columns: 1fr; }
  /* Icon and input share the first row; the button takes the second. */
  .hero-search-bar { flex-wrap: wrap; padding: 10px; gap: 8px; }
  .hero-search-icon { order: 1; }
  .hero-search-input { order: 2; flex: 1 1 auto; min-width: 0; padding: 8px 0; }
  .hero-search-btn { order: 3; flex: 1 0 100%; }
  .ck-header__logo { width: 104px; }
}

/* Place cards: a town or test centre link in the district grid. */
.ck-card--place { text-decoration: none; transition: border-color var(--dur-fast), background var(--dur-fast); }
.ck-card--place:hover { border-color: var(--color-accent); background: var(--color-panel-raised); }
.ck-card__cue {
  margin-top: auto; padding-top: 12px;
  color: var(--color-accent); font: var(--fw-bold) var(--fs-small)/1 var(--font-body);
}

/* Ticket feature lists, used on pricing cards that enumerate what is included. */
.ck-ticket__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: var(--fs-small); }
.ck-ticket__list li { position: relative; padding-left: 18px; }
.ck-ticket__list li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; }
.ck-ticket--best .ck-ticket__list li::before { color: var(--rsa-road-black); }

/* Transmission panels on the homepage keep their hp- hooks; only looks change. */
.hp-tx-panel { display: none; }
.hp-tx-panel.active { display: block; margin-top: 28px; }

/* ==========================================================================
   23. Commerce compatibility
   pay-now and create-gift-voucher carry their own page-local stylesheets and
   214 interactive hooks. They are converted surgically: the class names stay,
   so every hook and every local rule still applies, and only the handful of
   classes that came from unified.css are re-provided here.
   ========================================================================== */
.hero-section { padding: 96px 0 32px; }
.lead-form-section { padding: 32px 0; }
.breadcrumb { padding: 10px 0; font-size: var(--fs-caption); color: var(--color-text-faint); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb-sep { margin: 0 7px; color: var(--color-text-faint); }

/* These carry no rules in unified.css either; they are structural hooks. The
   page-local stylesheets own their appearance. Listed so the next person knows
   the omission is deliberate: pn-checkout-main, pn-select-btn, gv-details-form,
   gv-personalise-form, gv-voucher-logo, gv-voucher-package, gv-voucher-value. */

/* ==========================================================================
   24. Gift vouchers
   This page keeps all its gv- class names because its JavaScript binds to
   them: the occasion selector, the live voucher preview and the FAQ. Its
   styling lived entirely in unified.css, so it is re-provided here rather
   than the markup being rewritten.
   ========================================================================== */
.gv-hero .ck-wrap { position: relative; z-index: 1; padding-block: 72px 56px; }
.gv-gift-icon { font-size: .85em; }

/* Occasion selector */
.gv-occasion-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.gv-occasion-pill {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 18px; border-radius: 100px;
  background: rgba(0,0,0,.45); border: 1px solid var(--rsa-line-25); color: var(--color-text);
  font: var(--fw-bold) var(--fs-small)/1 var(--font-body);
}
.gv-occasion-pill:hover { border-color: var(--color-accent); }
.gv-occasion-pill.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.gv-occasion-message {
  margin-top: 18px; max-width: 60ch; transition: opacity .2s;
  color: var(--color-text-lede); font-size: var(--fs-body);
}

/* Three steps */
.gv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px; margin-top: 36px; }
.gv-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: start; }
.gv-step-line { display: grid; justify-items: center; gap: 8px; }
.gv-step-dot {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-on-accent);
  font: var(--fw-black) 19px/1 var(--font-display);
}
.gv-step-connector { width: 2px; min-height: 28px; background: var(--rsa-line-16); }
.gv-step-content h3 { text-transform: none; margin-bottom: 8px; }
.gv-step-content p { color: var(--color-text-muted); font-size: var(--fs-body-sm); margin: 0; }
.gv-step-content a { color: var(--color-accent); }

/* Builder */
.gv-builder-subtitle { color: var(--color-text-muted); margin-top: 10px; }
.gv-builder-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: start; margin-top: 36px; }
.gv-controls { display: grid; gap: 26px; }
.gv-control-group { display: grid; gap: 10px; }
.gv-control-group label {
  font: var(--fw-bold) var(--fs-caption)/1.3 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted);
}
.gv-toggle-row { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-bg-deep); border: 1px solid var(--rsa-line-16); border-radius: var(--radius-xs); padding: 4px; }
.gv-toggle-btn {
  cursor: pointer; border: 0; background: none; padding: 11px;
  border-radius: 2px; color: var(--color-text-muted);
  font: var(--fw-bold) var(--fs-body-sm)/1 var(--font-body);
}
.gv-toggle-btn.active { background: var(--color-accent); color: var(--color-on-accent); }

.gv-package-list { display: grid; gap: 10px; }
.gv-package-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  cursor: pointer; padding: 15px 18px;
  background: var(--color-panel); border: 1px solid var(--rsa-line-12); border-radius: var(--radius-xs);
}
.gv-package-option:hover { border-color: var(--color-accent); }
.gv-package-option.active { border-color: var(--color-accent); background: rgba(142,219,79,.07); }
.gv-pkg-name { font: var(--fw-bold) var(--fs-body-sm)/1.3 var(--font-body); color: var(--color-text); }
.gv-pkg-price { font: var(--fw-black) 19px/1 var(--font-display); color: var(--color-text); }
.gv-most-gifted {
  grid-column: 1 / -1; justify-self: start;
  background: var(--color-eyebrow); color: var(--color-on-accent);
  padding: 4px 9px; border-radius: 2px;
  font: var(--fw-black) 10px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
}
.gv-recipient-input {
  width: 100%; padding: 13px 14px;
  background: var(--color-bg-deep); color: var(--color-text);
  border: 1px solid var(--color-field-border); border-radius: var(--radius-xs);
}
.gv-recipient-input::placeholder { color: var(--color-placeholder); }

/* The voucher itself: a physical object, in the pack's manner. */
.gv-voucher-preview { display: grid; gap: 20px; }
.gv-voucher-card {
  position: relative; overflow: hidden;
  background: var(--rsa-chalk); color: var(--rsa-road-black);
  border-radius: var(--radius-md); padding: 30px;
  box-shadow: var(--shadow-card-hover);
  display: grid; gap: 22px;
}
.gv-voucher-ribbon { position: absolute; inset: 0 0 auto 0; height: 10px; background: var(--color-action); }
.gv-voucher-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 8px; }
.gv-voucher-brand { font: var(--fw-black) 15px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; }
.gv-voucher-gift-tag {
  background: var(--rsa-road-black); color: var(--rsa-chalk);
  padding: 5px 11px; border-radius: 2px;
  font: var(--fw-black) 10px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}
.gv-voucher-middle { text-align: center; display: grid; gap: 4px; }
.gv-voucher-recipient-label { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.gv-voucher-recipient-name { font: var(--fw-black) 26px/1.2 var(--font-display); }
.gv-voucher-amount { font: var(--fw-black) clamp(44px, 6vw, 64px)/1 var(--font-display); letter-spacing: var(--ls-tighter); color: var(--color-action); }
.gv-voucher-desc { font-size: var(--fs-body-sm); opacity: .75; }
.gv-voucher-bottom { display: flex; justify-content: space-between; gap: 16px; border-top: 2px dashed rgba(11,11,12,.25); padding-top: 16px; }
.gv-voucher-detail { display: grid; gap: 3px; font-size: var(--fs-caption); opacity: .7; }
.gv-voucher-cta { display: grid; gap: 10px; }
.gv-btn-gold, .gv-btn-outline-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: var(--pad-btn); border-radius: var(--radius-xs);
  font: var(--fw-black) var(--fs-label)/1 var(--font-display);
  letter-spacing: var(--ls-button); text-transform: uppercase; text-decoration: none;
}
.gv-btn-gold { background: var(--color-action); color: var(--color-on-action); border: 1px solid transparent; }
.gv-btn-gold:hover { background: var(--color-action-hover); color: var(--color-on-action); }
.gv-btn-outline-gold { background: transparent; border: 1px solid var(--rsa-line-25); color: var(--color-text); }
.gv-btn-outline-gold:hover { background: var(--rsa-line-08); }

/* Testimonial */
.gv-testimonial { max-width: 70ch; margin-inline: auto; text-align: center; display: grid; gap: 16px; }
.gv-testimonial-stars { color: var(--color-star); letter-spacing: var(--ls-stars); font-size: 20px; }
.gv-testimonial blockquote { margin: 0; font: var(--fw-regular) clamp(19px, 2.2vw, 25px)/1.5 var(--font-body); color: var(--color-text); }
.gv-testimonial cite { font-style: normal; font-size: var(--fs-body-sm); color: var(--color-text-muted); }

/* Coverage badges */
.gv-coverage-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.gv-coverage-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 18px; background: var(--color-panel);
  border: 1px solid var(--rsa-line-08); border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-xs); font-size: var(--fs-body-sm); color: var(--color-text-muted);
}
.gv-coverage-badge strong { color: var(--color-text); }
.gv-coverage-badge svg { flex: none; color: var(--color-accent); }

/* FAQ. Divs with role=button, driven by the page's own script. */
.gv-faq-list { margin-top: 28px; border-top: 1px solid var(--rsa-line-12); }
.gv-faq-item { border-bottom: 1px solid var(--rsa-line-12); }
.gv-faq-q {
  position: relative; cursor: pointer; padding: 22px 44px 22px 0;
  color: var(--color-text); font: var(--fw-bold) 17px/1.4 var(--font-body);
}
.gv-faq-q::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-panel); color: var(--color-accent);
  font: var(--fw-black) 18px/1 var(--font-display);
}
.gv-faq-q[aria-expanded="true"]::after { content: "\2013"; background: var(--color-accent); color: var(--color-on-accent); }
.gv-faq-a { display: none; padding: 0 44px 24px 0; color: var(--color-text-muted); font-size: var(--fs-body); }
.gv-faq-item.open .gv-faq-a { display: block; }
.gv-faq-q[aria-expanded="true"] + .gv-faq-a { display: block; }
.gv-faq-a a { color: var(--color-accent); }

.gv-final-cta .ck-wrap { text-align: center; }
.gv-final-cta h2 { color: var(--color-on-action); }
.gv-final-cta p { color: var(--color-on-action); opacity: .9; max-width: 60ch; margin-inline: auto; }
.gv-final-cta .ck-btn-row { justify-content: center; }

@media (max-width: 900px) {
  .gv-builder-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   25. Legacy variable shim
   pay-now and create-gift-voucher carry roughly 1,150 lines of page-local CSS
   that reference unified.css's custom properties. Those properties do not
   exist in v2, so without this every one of those rules silently falls back
   to nothing: transparent cards, invisible borders, unstyled buttons. The
   browser shows it; the source does not.
   Mapping the ten old names onto v2 tokens is far safer than rewriting 1,150
   lines of working checkout CSS, and it keeps the interactive hooks untouched.
   Remove this block only when those two pages are rebuilt properly.
   ========================================================================== */
:root {
  --bg-base:        var(--color-bg);
  --bg-deep:        var(--color-bg-deep);
  --bg-surface:     var(--color-panel);
  --bg-card:        var(--color-panel);
  --bg-default:     var(--color-bg);
  --border-subtle:  var(--rsa-line-12);
  --border-medium:  var(--rsa-line-25);
  --text-primary:   var(--color-text);
  --text-secondary: var(--color-text-body);
  --text-muted:     var(--color-text-muted);
  --accent-red:     var(--color-action);
  --accent-red-bright: var(--color-text-red);
  --accent-green:   var(--color-accent);
  --accent-amber:   var(--color-eyebrow);
  --accent-gold:    var(--color-eyebrow);
  --accent-teal:    var(--color-accent);
  --font-display:   Poppins, sans-serif;
}

/* The select button on a product card has no rule in either stylesheet, and
   the page-local .pn-product-btn rule paints it green. In this system green is
   payoff and red is action, and selecting a package is an action. Two classes
   so this wins over the page-local rule regardless of order. */
.pn-product-card .pn-select-btn, .pn-select-btn {
  cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-xs);
  background: var(--color-action); color: var(--color-on-action);
  font: var(--fw-black) var(--fs-label)/1 var(--font-display);
  letter-spacing: var(--ls-button); text-transform: uppercase;
}
.pn-select-btn:hover { background: var(--color-action-hover); }

/* ==========================================================================
   26. Sticky mobile call bar
   base.njk renders this on every page. It had no v2 rule, so on every rebuilt
   page two raw links sat loose under the footer. Found by looking at a page,
   not by reading the template: the markup is correct and the source gives no
   hint that the styling is missing.
   The Page Quality Rules want it visible by default on mobile.
   ========================================================================== */
.sticky-mobile-cta { display: none; }

@media (max-width: 768px) {
  .sticky-mobile-cta {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--z-sticky-cta);
    background: var(--color-bg-deep);
    border-top: 1px solid var(--rsa-line-16);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(0,0,0,.45);
  }
  .sticky-mobile-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .sticky-cta-call, .sticky-cta-book {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 10px; border-radius: var(--radius-xs);
    font: var(--fw-black) var(--fs-label)/1 var(--font-display);
    letter-spacing: var(--ls-button); text-transform: uppercase; text-decoration: none;
  }
  .sticky-cta-call { background: transparent; border: 1px solid var(--rsa-line-25); color: var(--color-text); }
  .sticky-cta-book { background: var(--color-action); color: var(--color-on-action); }
  .sticky-cta-book:hover { background: var(--color-action-hover); }
  .sticky-cta-call svg, .sticky-cta-book svg { flex: none; }

  /* The bar covers the end of the page, so give the footer room beneath it. */
  .ck-footer { padding-bottom: 86px; }
}

/* It must not cover a focused field, which is the fault the Tallaght work hit:
   a sticky bar sitting over the Stripe card input while someone typed. */
body:has(input:focus, select:focus, textarea:focus) .sticky-mobile-cta { display: none; }

/* Range inputs. The pricing calculator's slider was browser-default blue,
   which is the one colour this palette does not contain. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 10px 0;
  background: var(--rsa-track); border-radius: 100px; outline-offset: 6px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  background: var(--color-accent); border: 3px solid var(--color-bg-deep);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  background: var(--color-accent); border: 3px solid var(--color-bg-deep);
}
input[type="range"]::-moz-range-track { height: 6px; background: var(--rsa-track); border-radius: 100px; }