/* Touring Works shared typography and colour system.
   Loaded after page-specific styles to keep every page and dialog on one visual language. */
:root {
  --tw-black: #080a0a;
  --tw-graphite: #252729;
  --tw-steel: #737473;
  --tw-ivory: #f6f2ea;
  --tw-paper: #eeebe4;
  --tw-wine: #851322;
  --tw-wine-bright: #a31731;
  --tw-line: #c9c5bd;
  --tw-muted: #626260;

  /* Page-level aliases retained for the individual restoration templates. */
  --black: var(--tw-graphite);
  --ink: var(--tw-graphite);
  --dark: var(--tw-black);
  --night: var(--tw-black);
  --white: var(--tw-ivory);
  --cream: var(--tw-ivory);
  --cloud: var(--tw-ivory);
  --paper: var(--tw-paper);
  --soft: var(--tw-paper);
  --line: var(--tw-line);
  --muted: var(--tw-muted);
  --steel: var(--tw-steel);
  --forest: var(--tw-steel);
  --olive: var(--tw-steel);
  --water: var(--tw-steel);
  --cyan: var(--tw-steel);
  --red: var(--tw-wine);
  --orange: var(--tw-wine);
  --accent: var(--tw-wine);
  --acid: var(--tw-wine-bright);
  --accent-light: var(--tw-wine-bright);
}

/* A single sans-serif family for all page UI, form controls, dialogs and SVG labels. */
body,
body *,
body *::before,
body *::after,
svg text {
  font-family: Arial, Helvetica, sans-serif !important;
}

button,
input,
select,
textarea {
  color: var(--tw-graphite);
}

/* Shared page header — matches the Cleaning Plan header on every route. */
.site-header {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  height: auto !important;
  background: var(--tw-black) !important;
  color: var(--tw-ivory) !important;
  border-bottom: 1px solid #313335 !important;
  backdrop-filter: none !important;
}

.site-header .shell,
.site-header .tw-shell {
  width: min(1320px, calc(100% - 112px)) !important;
  margin-inline: auto !important;
}

.header-row {
  min-height: 92px !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}

.site-header .brand,
.site-header .tw-brand {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.site-header .brand img,
.site-header .tw-brand img {
  display: block !important;
  width: 218px !important;
  height: auto !important;
}

.site-header .site-nav,
.site-header .tw-site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
  margin-left: auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
}

.site-header .site-nav a,
.site-header .tw-site-nav a {
  display: block !important;
  padding: 12px 0 10px !important;
  white-space: nowrap !important;
  color: #d9d7d1 !important;
  border-bottom: 2px solid transparent !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
}

/* Keep the visible header sequence aligned with the home-page offer order. */
.site-header .site-nav a[href="index.html"],
.site-header .tw-site-nav a[href="index.html"] { order: 1 !important; }
.site-header .site-nav a[href="mx5-specialists.html"],
.site-header .tw-site-nav a[href="mx5-specialists.html"] { order: 2 !important; }
.site-header .site-nav a[href="component-finishing.html"],
.site-header .tw-site-nav a[href="component-finishing.html"] { order: 3 !important; }
.site-header .site-nav a[href="cad-3d-printing.html"],
.site-header .tw-site-nav a[href="cad-3d-printing.html"] { order: 4 !important; }
.site-header .site-nav a[href="cleaning-plan.html"],
.site-header .tw-site-nav a[href="cleaning-plan.html"] { order: 5 !important; }
.site-header .site-nav a[href="restorations.html"],
.site-header .tw-site-nav a[href="restorations.html"] { order: 6 !important; }
.site-header .site-nav a[href="racing-team.html"],
.site-header .tw-site-nav a[href="racing-team.html"] { order: 7 !important; }
.site-header .site-nav a[href="about.html"],
.site-header .tw-site-nav a[href="about.html"] { order: 8 !important; }

.site-header .site-nav a:hover,
.site-header .site-nav a[aria-current],
.site-header .tw-site-nav a:hover,
.site-header .tw-site-nav a[aria-current] {
  color: var(--tw-ivory) !important;
  border-color: var(--tw-wine-bright) !important;
}

.announcement,
.tw-announcement {
  background: var(--tw-graphite) !important;
  color: #d9d7d1 !important;
  border-bottom: 1px solid #3b3e40 !important;
}

.announcement .shell,
.tw-announcement .tw-shell {
  width: min(1320px, calc(100% - 112px)) !important;
  min-height: 38px !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 20px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
}

.announcement i,
.tw-announcement i {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border-radius: 50% !important;
  background: var(--tw-wine-bright) !important;
}

.announcement .shell > span,
.tw-announcement .tw-shell > span {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.announcement .shell > span:nth-child(2),
.tw-announcement .tw-shell > span:nth-child(2) {
  justify-self: center !important;
}

.announcement a,
.tw-announcement a {
  justify-self: end !important;
  color: var(--tw-ivory) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  white-space: nowrap !important;
}

@media (max-width: 920px) {
  .site-header .shell,
  .site-header .tw-shell,
  .announcement .shell,
  .tw-announcement .tw-shell { width: calc(100% - 64px) !important; }

  .header-row {
    min-height: 0 !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding-block: 18px !important;
  }

  .site-header .brand img,
  .site-header .tw-brand img { width: 205px !important; }

  .site-header .site-nav,
  .site-header .tw-site-nav {
    order: 3 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-bottom: 1px !important;
  }

  .announcement .shell,
  .tw-announcement .tw-shell { min-height: 42px !important; font-size: 8px !important; }

  .announcement .shell > span:nth-child(2),
  .tw-announcement .tw-shell > span:nth-child(2) { display: none !important; }

  .announcement .shell,
  .tw-announcement .tw-shell { grid-template-columns: minmax(0, 1fr) auto !important; }

}

@media (max-width: 600px) {
  .site-header .shell,
  .site-header .tw-shell,
  .announcement .shell,
  .tw-announcement .tw-shell { width: calc(100% - 34px) !important; }

  .header-row { gap: 16px !important; padding-block: 15px !important; }
  .site-header .brand img,
  .site-header .tw-brand img { width: 183px !important; }
  .site-header .site-nav,
  .site-header .tw-site-nav { gap: 18px !important; }
  .site-header .site-nav a,
  .site-header .tw-site-nav a { font-size: 9px !important; }
  .announcement .shell,
  .tw-announcement .tw-shell { min-height: 38px !important; gap: 8px !important; }
  .announcement a,
  .tw-announcement a { font-size: 7px !important; letter-spacing: .06em !important; }

}

/* Page-specific status corrections. */
.restorations-page .hero {
  background: var(--tw-black) !important;
}

/* The red-dash marker is unique to the BTCC Resto hero. */
body:has(.red-dash) .hero-intro::after {
  content: "BTCC RESTO IS IN DEVELOPMENT — A future Touring Works programme. No BTCC restoration builds or bookings are currently available.";
  display: block;
  margin-top: 22px;
  padding: 12px 0 0 15px;
  border-top: 1px solid var(--tw-line);
  border-left: 3px solid var(--tw-wine);
  color: var(--tw-graphite);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .02em;
}

/* Rally and GT follow BTCC once its first completed builds establish the programme. */
body:has(.rally-shortcuts) .hero-lead::after,
body:has(.gt-shortcuts) .hero-lead::after {
  display: block;
  margin-top: 22px;
  padding: 12px 0 0 15px;
  border-top: 1px solid var(--tw-line);
  border-left: 3px solid var(--tw-wine);
  color: var(--tw-graphite);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .02em;
}

body:has(.rally-shortcuts) .hero-lead::after {
  content: "RALLY RESTO IS A FUTURE DEVELOPMENT PROGRAMME — It will begin only after BTCC Resto has launched and completed its first builds. No Rally restoration builds or bookings are currently available.";
}

body:has(.gt-shortcuts) .hero-lead::after {
  content: "GT RESTO IS A FUTURE DEVELOPMENT PROGRAMME — It will begin only after BTCC Resto has launched and completed its first builds. No GT restoration builds or bookings are currently available.";
}

/* Shared dialog surface and hierarchy. */
dialog:not(.touring-resto-modal),
.modal-box,
.tw-build-dialog {
  background: var(--tw-ivory) !important;
  color: var(--tw-graphite) !important;
  border-color: var(--tw-line) !important;
}

dialog:not(.touring-resto-modal)::backdrop,
.modal,
.tw-build-dialog::backdrop {
  background: rgba(8, 10, 10, .78) !important;
}

dialog h2,
.modal-box h2,
.tw-build-dialog__title {
  color: var(--tw-graphite) !important;
}

dialog h3,
.modal-box h3,
.tw-build-dialog h3 {
  color: var(--tw-graphite) !important;
}

dialog p,
dialog li,
.modal-box > p,
.tw-build-dialog__intro,
.tw-build-dialog__content {
  color: var(--tw-muted) !important;
}

.dialog-close,
.close-modal,
.tw-build-dialog__close {
  background: transparent !important;
  color: var(--tw-graphite) !important;
  border-color: var(--tw-line) !important;
}

.dialog-close:hover,
.close-modal:hover,
.tw-build-dialog__close:hover {
  background: var(--tw-graphite) !important;
  color: var(--tw-ivory) !important;
  border-color: var(--tw-graphite) !important;
}

.dialog-highlight,
.dialog-note,
.tw-build-dialog__note,
.comparison tr:nth-child(even) td,
.tw-build-dialog__table th,
.tw-build-dialog__table th:nth-child(3),
.tw-build-dialog__table td:nth-child(3) {
  background: var(--tw-paper) !important;
  color: var(--tw-graphite) !important;
}

.dialog-highlight,
.dialog-note,
.tw-build-dialog__note {
  border-color: var(--tw-wine) !important;
}

.comparison th {
  background: var(--tw-graphite) !important;
  color: var(--tw-ivory) !important;
}

/* Remove the remaining old Cleaning Plan olive treatments from page surfaces and forms. */
.protection-section,
.parts-section,
.faq-section {
  background: var(--tw-paper) !important;
}

.protection-card,
.parts-card,
.service-choices label > span,
.photo-upload > label,
.review-note,
.summary-ready > textarea {
  background: var(--tw-ivory) !important;
  border-color: var(--tw-line) !important;
  color: var(--tw-graphite) !important;
}

.parts-grid {
  background: var(--tw-line) !important;
  border-color: var(--tw-line) !important;
}

.choice-icon,
.photo-upload > label .icon,
.review-note .icon,
.success-icon {
  color: var(--tw-steel) !important;
  stroke: var(--tw-steel) !important;
}

.service-choices input:checked + span,
.protection-choices label:has(input:checked) {
  background: #ead0d3 !important;
  color: var(--tw-wine) !important;
  border-color: var(--tw-wine) !important;
}

.form-error,
.no-js-notice {
  background: #ead0d3 !important;
  color: var(--tw-wine) !important;
  border-color: var(--tw-wine) !important;
}