@charset "utf-8";
/* ============================================================================
   BookTheoryTests brand system — "Slate & Forest".
   Faithful CSS implementation of the design-system components (orange = action,
   forest green = trust). Namespaced .btt-* classes + :root tokens only, so it is
   inert until a page/chrome opts in by class. Pages opt in with a .btt-rebrand
   wrapper; the master chrome opts in with .btt-siteheader / .btt-sitefooter.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap");

:root {
  /* Brand + action (orange) */
  --btt-brand: #f39421;
  --btt-cta: #f59a23;
  --btt-cta-ink: #171717;
  --btt-cta-hover: #e9891a;
  --btt-brand-tint: #fdefdd;
  /* Trust anchor (forest green) */
  --btt-trust: #2f5d4a;
  --btt-trust-deep: #244a3b;
  --btt-trust-tint: #eaf3ee;
  --btt-trust-line: #d3e6da;
  /* Success + status */
  --btt-ok: #2f7d4f;
  --btt-err: #c0392b;
  /* Neutrals */
  --btt-ink: #14171d;
  --btt-muted: #59616e;
  --btt-line: #e3e7ec;
  --btt-card: #ffffff;
  --btt-page: #eceff3;
  --btt-footer: #101418;
  /* Radius */
  --btt-r-sm: 9px;
  --btt-r: 12px;
  --btt-r-md: 14px;
  --btt-r-lg: 18px;
  --btt-r-xl: 20px;
  --btt-r-pill: 999px;
  /* Shadow */
  --btt-shadow: 0 12px 30px -18px rgba(20,23,29,.40);
  --btt-shadow-lg: 0 24px 50px -28px rgba(20,23,29,.45);
  /* Type */
  --btt-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --btt-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Opt-in page base --------------------------------------------------- */
.btt-rebrand {
  font-family: var(--btt-font);
  color: var(--btt-ink);
  background: var(--btt-page);
  font-size: 16px;
  line-height: 1.6;
}
.btt-rebrand *, .btt-siteheader *, .btt-sitefooter * { box-sizing: border-box; }

.btt-rebrand h1, .btt-rebrand h2, .btt-rebrand h3, .btt-rebrand h4, .btt-rebrand h5, .btt-rebrand h6 {
  font-family: var(--btt-font);
  color: var(--btt-ink);
  margin: 0 0 14px;
}
.btt-rebrand h1 { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.028em; }
.btt-rebrand h2 { font-size: 30px; line-height: 1.14; font-weight: 800; letter-spacing: -.02em; }
.btt-rebrand h3 { font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.btt-rebrand h4 { font-size: 16px; line-height: 1.3; font-weight: 800; margin-bottom: 8px; }
.btt-rebrand p { font-size: 16px; line-height: 1.6; margin: 0 0 14px; color: var(--btt-ink); }
.btt-rebrand p:last-child { margin-bottom: 0; }
.btt-rebrand a { color: var(--btt-trust); }
.btt-rebrand a:hover { color: var(--btt-trust-deep); }
/* Buttons rendered as <a> must keep their button ink, not the link colour. */
.btt-rebrand a.btt-btn { text-decoration: none; }
.btt-rebrand a.btt-btn-primary, .btt-rebrand a.btt-btn-primary:hover { color: var(--btt-ink); }
.btt-rebrand a.btt-btn-trust, .btt-rebrand a.btt-btn-trust:hover { color: #fff; }
.btt-rebrand a.btt-btn-ghost, .btt-rebrand a.btt-btn-ghost:hover { color: var(--btt-ink); }
.btt-rebrand ul, .btt-rebrand ol { line-height: 1.6; }
.btt-rebrand strong { font-weight: 700; }
.btt-rebrand :focus-visible { outline: 3px solid var(--btt-cta); outline-offset: 2px; }

/* Larger hero H1 on wide screens */
@media (min-width: 992px) { .btt-rebrand h1 { font-size: 48px; line-height: 1.06; } }

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .btt-pad { padding-top: 32px; padding-bottom: 40px; }
  .btt-pad-sm { padding-top: 26px; padding-bottom: 30px; }
  .btt-rebrand h1 { font-size: 33px; }
  .btt-rebrand h2 { font-size: 26px; }
  /* Hero: pull the copy up so the CTA is in view sooner. */
  .btt-pad:has(.btt-hero), .btt-pad-hero { padding-top: 18px; padding-bottom: 40px; }
  /* Trust proof: a neat left-aligned stack under the CTA on mobile (centred read oddly). */
  .btt-rebrand .btt-rating { flex-direction: column; align-items: flex-start; gap: 9px; }
  .btt-rebrand .btt-rating-item { white-space: normal; }
}

/* ---- Layout ------------------------------------------------------------- */
.btt-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.btt-container-narrow { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.btt-container-read { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.btt-pad { padding-top: 64px; padding-bottom: 64px; }
.btt-pad-sm { padding-top: 44px; padding-bottom: 44px; }
/* Hero sections use the same 40px vertical rhythm as .btt-heroband so every page's hero matches. */
.btt-pad-hero { padding-top: 40px; padding-bottom: 40px; }
.btt-band-card { background: var(--btt-card); border-top: 1px solid var(--btt-line); border-bottom: 1px solid var(--btt-line); }
.btt-band-page { background: var(--btt-page); }
.btt-center { text-align: center; }
.btt-measure { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---- Eyebrow / kicker --------------------------------------------------- */
.btt-eyebrow { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--btt-muted); margin-bottom: 8px; }

/* ---- Buttons ------------------------------------------------------------ */
.btt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 8px 22px;
  font-family: var(--btt-font); font-size: 16px; font-weight: 800; line-height: 1.25;
  text-align: center;
  border: 1.5px solid transparent; border-radius: var(--btt-r);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .05s ease, border-color .15s ease;
}
.btt-btn:active { transform: translateY(1px); }
.btt-btn:hover, .btt-btn:focus { text-decoration: none; }
.btt-btn-primary { background: var(--btt-cta); color: var(--btt-ink); }
.btt-btn-primary:hover { background: var(--btt-cta-hover); color: var(--btt-ink); }
.btt-btn-trust { background: var(--btt-trust); color: #fff; }
.btt-btn-trust:hover { background: var(--btt-trust-deep); color: #fff; }
.btt-btn-ghost { background: #fff; color: var(--btt-ink); border-color: var(--btt-line); }
.btt-btn-ghost:hover { background: var(--btt-page); color: var(--btt-ink); }
.btt-btn-lg { min-height: 56px; padding: 0 32px; font-size: 17px; border-radius: 13px; }
.btt-btn-block { display: flex; width: 100%; }

/* ---- Pill --------------------------------------------------------------- */
.btt-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--btt-trust-tint); color: var(--btt-ok); border: 1px solid var(--btt-trust-line);
  font-size: 13px; font-weight: 700; padding: 6px 13px; border-radius: var(--btt-r-pill);
}
.btt-pill-brand { background: var(--btt-brand-tint); color: var(--btt-brand); border-color: #f6dcb4; }
.btt-pill-neutral { background: var(--btt-page); color: var(--btt-muted); border-color: var(--btt-line); }

/* ---- Check list (green square ticks) ------------------------------------ */
.btt-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
/* Absolute tick + normal inline text flow, so text + <em> stay on one run (no column split). */
.btt-checklist > li { position: relative; padding-left: 28px; font-size: 15.5px; font-weight: 500; color: var(--btt-ink); line-height: 1.45; }
.btt-checklist > li em { font-style: italic; color: var(--btt-muted); }
.tick { position: absolute; left: 0; top: 3px; color: var(--btt-ok); font-weight: 800; font-size: 16px; line-height: 1; }
/* Two-column checklist (full-width, e.g. Book-and-PASS benefits). CSS columns so
   uneven 1-line / 2-line items flow naturally instead of forcing ragged grid rows. */
.btt-checklist-2col { display: block; column-count: 2; column-gap: 48px; }
.btt-checklist-2col > li { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 14px; }
@media (max-width: 767px) { .btt-checklist-2col { column-count: 1; } }
/* Small muted note under the hero rating row */
.btt-rating-note { font-size: 13px; color: var(--btt-muted); font-weight: 600; margin-top: 8px; }
.tick::before { content: "\2713"; }

/* Bullets: render a check instead of a circle in gs-list bullet tables, site-wide. */
.gs-list .fa-circle::before { content: "\f00c"; }

/* Standard: button labels are centred (covers multi-line labels on gs-button and btt-btn). */
/* Button label alignment:
   - solitary button: centred label
   - button in a cluster (a d-flex flex-wrap button row): left-aligned label, so a stack of
     mixed-width buttons lines up on the left
   Plus top/bottom padding so wrapped labels are never cramped. */
.gs-button, .btt-btn { text-align: center; justify-content: center; padding-top: 11px; padding-bottom: 11px; }
.d-flex.flex-wrap > .btt-btn, .d-flex.flex-wrap > .gs-button { text-align: left; justify-content: flex-start; }
/* Header "Book Now" button: compact, centred label, and not tight against the logo. */
.gs-header-button { padding: 8px 14px !important; text-align: center; justify-content: center; }

/* Hub link cards: brand card frame with a forest title (replaces the plain bootstrap card + text-primary). */
.btt-linkcard { background: var(--btt-card); border: 1px solid var(--btt-line); border-radius: var(--btt-r-lg); box-shadow: var(--btt-shadow); }
.btt-linkcard .card-title a { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--btt-trust); }
.btt-linkcard .card-title a:hover { color: var(--btt-trust-deep); }
.btt-linkcard .card-title a::after { content: "\f054"; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-style: normal; flex: none; color: var(--btt-trust); font-size: 0.9em; line-height: 1; }
/* Inline tick (used in two-column benefit grids) */
.btt-tick { flex: none; color: var(--btt-ok); font-weight: 800; }
.btt-tick::before { content: "\2713"; }
.btt-benefits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.btt-benefits > li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; color: var(--btt-ink); line-height: 1.5; }
@media (max-width: 767px) { .btt-benefits { grid-template-columns: 1fr; } }

/* ---- Rating / trust inline row ------------------------------------------ */
.btt-rating { display: flex; align-items: center; justify-content: space-between; gap: 10px 22px; flex-wrap: wrap; }
.btt-rating-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--btt-ink); white-space: nowrap; }
.btt-stars { color: var(--btt-cta); letter-spacing: 1px; font-size: 16px; }
.btt-rating-sep { color: var(--btt-line); }
.btt-badge-tick { width: 22px; height: 22px; border-radius: 6px; background: var(--btt-trust); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }

/* ---- Trust row items ---------------------------------------------------- */
/* Trust bar: single line (desktop), 2x2 (tablet), centred single column (mobile). */
.btt-trustrow { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; align-items: center; gap: 20px 24px; }
@media (max-width: 991px) and (min-width: 576px) { .btt-trustrow { grid-template-columns: 1fr 1fr; justify-content: start; gap: 22px 32px; } }
@media (max-width: 575px) { .btt-trustrow { grid-template-columns: max-content; justify-content: center; justify-items: start; gap: 18px; } }
.btt-trustitem { display: flex; align-items: center; gap: 10px; }
.btt-trustitem-chip { width: 34px; height: 34px; border-radius: 9px; background: var(--btt-trust-tint); color: var(--btt-ok); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.btt-trustitem-chip.is-brand { background: var(--btt-brand-tint); color: var(--btt-brand); }
.btt-trustitem-label { font-size: 14px; font-weight: 700; color: var(--btt-ink); }
.btt-trustitem-sub { font-size: 12px; color: var(--btt-muted); }

/* ---- Step rows ---------------------------------------------------------- */
.btt-steps { display: flex; flex-direction: column; gap: 16px; }
.btt-steprow { display: grid; grid-template-columns: 300px 1fr; background: var(--btt-trust); border-radius: 18px; overflow: hidden; }
.btt-steprow-head { padding: 28px 32px; display: flex; align-items: center; gap: 18px; border-right: 1px solid rgba(255,255,255,.12); }
.btt-step-num { flex: none; width: 54px; height: 54px; border-radius: 14px; background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; font-family: var(--btt-mono); }
.btt-steprow.is-last .btt-step-num { background: var(--btt-cta); color: var(--btt-cta-ink); }
.btt-rebrand .btt-step-title { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.25; margin: 0; }
.btt-steprow-body { padding: 28px 32px; color: #d7e6df; font-size: 15px; line-height: 1.6; }
.btt-rebrand .btt-steprow-body p { color: #d7e6df; font-size: 15px; }
.btt-rebrand .btt-steprow-body strong, .btt-rebrand .btt-steprow-body em { color: #fff; }
.btt-rebrand .btt-steprow-body a:not(.btt-btn) { color: #fff; text-decoration: underline; }
@media (max-width: 767px) { .btt-steprow { grid-template-columns: 1fr; } .btt-steprow-head { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); } }

/* ---- Feature cards ------------------------------------------------------ */
.btt-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.btt-feature { background: var(--btt-card); border: 1px solid var(--btt-line); border-radius: 15px; padding: 24px; }
.btt-feature-chip { width: 44px; height: 44px; border-radius: 12px; background: var(--btt-trust-tint); color: var(--btt-trust); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; margin-bottom: 14px; }
.btt-feature-chip.is-brand { background: var(--btt-brand-tint); color: var(--btt-brand); }
.btt-feature-chip.is-ok { background: var(--btt-trust-tint); color: var(--btt-ok); }
.btt-rebrand .btt-feature h3 { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.btt-rebrand .btt-feature p { font-size: 14.5px; color: var(--btt-muted); margin: 0 0 8px; line-height: 1.5; }
@media (max-width: 767px) { .btt-features { grid-template-columns: 1fr; } }

/* ---- Price panel (forest, mono, orange total) --------------------------- */
.btt-price { background: var(--btt-trust); border-radius: var(--btt-r-lg); padding: 26px; color: #fff; }
.btt-price-row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.btt-price-row .btt-price-label { color: #c3d6cd; }
.btt-price-row .btt-price-val { font-weight: 700; font-family: var(--btt-mono); }
.btt-price-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; }
.btt-price-total .btt-price-total-label { font-weight: 800; font-size: 18px; }
.btt-price-total .btt-price-total-val { font-weight: 800; font-size: 32px; font-family: var(--btt-mono); color: var(--btt-cta); }
.btt-price-note { font-size: 12px; color: #a9c2b8; }
.btt-rebrand .btt-price p { color: #d7e6df; }
.btt-rebrand .btt-price strong { color: #fff; }
.btt-price .btt-mono { font-family: var(--btt-mono); }

/* ---- Info cards (forest / page) ----------------------------------------- */
.btt-infocards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.btt-card-forest, .btt-card-page { display: flex; flex-direction: column; }
/* push the CTA to the bottom so the two cards balance at equal height */
.btt-rebrand .btt-card-forest > div:last-child, .btt-rebrand .btt-card-page > div:last-child { margin-top: auto !important; padding-top: 8px; }
.btt-card-forest { background: var(--btt-trust); border-radius: 20px; padding: 34px; color: #fff; }
.btt-rebrand .btt-card-forest h2, .btt-rebrand .btt-card-forest h3 { color: #fff; }
.btt-rebrand .btt-card-forest p { color: #d7e6df; }
.btt-rebrand .btt-card-forest a:not(.btt-btn) { color: #fff; }
.btt-card-page { background: var(--btt-page); border: 1px solid var(--btt-line); border-radius: 20px; padding: 34px; }
@media (max-width: 767px) { .btt-infocards { grid-template-columns: 1fr; } }

/* ---- Guide blocks (h3 + muted paragraph) -------------------------------- */
.btt-guide { display: flex; flex-direction: column; gap: 16px; }
/* Each guide Q&A is a clean white card on the grey band. */
.btt-rebrand .btt-guide > div { background: var(--btt-card); border: 1px solid var(--btt-line); border-radius: 16px; padding: 26px 30px; }
.btt-rebrand .btt-guide h2, .btt-rebrand .btt-guide h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; }
.btt-rebrand .btt-guide p { color: var(--btt-muted); font-size: 15.5px; line-height: 1.65; }
.btt-rebrand .btt-guide ul { padding-left: 20px; margin: 0 0 12px; color: var(--btt-muted); font-size: 15.5px; }
.btt-rebrand .btt-guide li { margin-bottom: 4px; }
.btt-rebrand .btt-card-forest h2, .btt-rebrand .btt-card-page h2 { font-size: 22px; line-height: 1.25; }
.btt-rebrand .btt-card-page p { color: var(--btt-muted); }

/* ---- FAQ accordion ------------------------------------------------------ */
.btt-faq { display: flex; flex-direction: column; gap: 10px; }
.btt-faq-item { border: 1px solid var(--btt-line); border-radius: 13px; overflow: hidden; background: var(--btt-page); }
.btt-faq-head { width: 100%; background: none; border: none; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-family: inherit; text-align: left; }
.btt-rebrand .btt-faq-head h3, .btt-rebrand .btt-faq-head .btt-faq-q { font-size: 15.5px; font-weight: 700; color: var(--btt-ink); margin: 0; letter-spacing: normal; line-height: 1.4; }
.btt-faq-chip { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--btt-trust-tint); color: var(--btt-ok); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.btt-faq-body { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.65; color: var(--btt-muted); }
.btt-rebrand .btt-faq-body p { font-size: 14.5px; line-height: 1.65; color: var(--btt-muted); }
/* open state (Bootstrap toggles aria-expanded / .collapse.show on the target) */
.btt-faq-item.is-open .btt-faq-chip,
.btt-faq-head[aria-expanded="true"] .btt-faq-chip { background: var(--btt-cta); color: var(--btt-cta-ink); transform: rotate(45deg); }

/* ---- Disclosure / compliance fine print --------------------------------- */
.btt-disclosure { background: var(--btt-card); border: 1px solid var(--btt-line); border-radius: var(--btt-r-md); padding: 18px 20px; }
.btt-rebrand .btt-disclosure, .btt-rebrand .btt-fine { font-family: var(--btt-mono); font-size: 12px; line-height: 1.55; color: var(--btt-muted); }

/* ---- Hero video card ---------------------------------------------------- */
/* Wide copy column + a fixed slot for the video, pushed to the right. */
.btt-hero { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: center; }
/* Make the home find-nearest panel more prominent on desktop - stronger shadow and bigger
   head/label/input/button, rather than stealing width from the hero copy. */
@media (min-width: 992px) {
  .btt-hero .btt-searchpanel { box-shadow: var(--btt-shadow-lg); }
  .btt-hero .btt-searchpanel-head { padding: 22px 26px; }
  .btt-hero .btt-searchpanel-head i { font-size: 26px; }
  .btt-hero .btt-searchpanel-title { font-size: 22px; }
  .btt-hero .btt-searchpanel-sub { font-size: 14px; }
  .btt-hero .btt-searchpanel-body { padding: 26px 26px 28px; }
  .btt-hero .btt-searchpanel-body label { font-size: 15px; margin-bottom: 8px; }
  .btt-hero .btt-searchpanel-body .form-control { font-size: 17px; padding: 14px 16px; height: auto; }
  .btt-hero #homeFindCta { min-height: 60px; font-size: 18px; }
}
@media (max-width: 991px) { .btt-hero { grid-template-columns: 1fr; gap: 28px; } }
/* On mobile the home hero reads better centred (copy, CTA, rating); the checklist stays a left-aligned centred block. */
@media (max-width: 991px) {
  .btt-hero { text-align: center; }
  .btt-hero .btt-checklist { display: inline-flex; text-align: left; margin-bottom: 12px !important; }
  .btt-hero .btt-rating { align-items: center; }
  /* The find-nearest panel parks under the bullets - modest gap above, a little more below before the CTA. */
  #homeFindSlotMobile { margin: 0 0 18px; }
}

/* ============================================================================
   Site chrome — header + footer (used from the master page, outside .btt-rebrand)
   ========================================================================== */
.btt-siteheader { background: var(--btt-card); border-bottom: 1px solid var(--btt-line); font-family: var(--btt-font); }
.btt-siteheader__inner { max-width: 1120px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.btt-siteheader__logo a { display: inline-flex; align-items: center; }
.btt-siteheader__logo img { height: 30px; width: auto; display: block; max-width: none; }
.btt-sitenav { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.btt-sitenav a, .btt-sitenav .nav-link { font-size: 13.5px; font-weight: 600; color: var(--btt-ink); text-decoration: none; padding: 6px 0; white-space: nowrap; }
.btt-sitenav a:hover, .btt-sitenav .nav-link:hover { color: var(--btt-trust); background: transparent; }
.btt-sitenav .nav-link.active, .btt-sitenav a.active { color: var(--btt-trust); font-weight: 700; }
.btt-siteheader__actions { display: flex; align-items: center; gap: 14px; flex: none; }
.btt-siteheader__actions .btt-btn { min-height: 42px; padding: 0 18px; font-size: 14px; border-radius: 11px; }
/* Telephone number is hidden in the header for now — surface it on the Contact Us page
   (override with `.btt-siteheader__tel{display:inline-flex}` there once it's redesigned). */
.btt-siteheader__tel { display: none; font-size: 13px; font-weight: 700; color: var(--btt-trust); white-space: nowrap; text-decoration: none; }
.btt-siteheader__social { display: none; }
.btt-siteheader__social a { color: var(--btt-muted); text-decoration: none; font-size: 16px; line-height: 1; }
.btt-siteheader__social a:hover { color: var(--btt-trust); }

.btt-sitefooter { background: var(--btt-footer); font-family: var(--btt-font); }
.btt-sitefooter__inner { max-width: 1120px; margin: 0 auto; padding: 48px 24px 40px; }
.btt-sitefooter__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 36px; }
.btt-sitefooter__brand { max-width: 340px; }
.btt-sitefooter__brand img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .92; margin-bottom: 14px; }
.btt-sitefooter__brand p { font-size: 13px; line-height: 1.6; color: #8a93a2; margin: 0; }
.btt-sitefooter__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.btt-sitefooter__col h2, .btt-sitefooter__col-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #5f6875; font-weight: 800; margin: 0 0 14px; }
.btt-sitefooter__col a { display: block; color: #c3cad3; text-decoration: none; font-size: 14px; margin-bottom: 10px; }
.btt-sitefooter__col a:hover { color: #fff; }
.btt-sitefooter__bottom { padding-top: 24px; border-top: 1px solid #23272e; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.btt-sitefooter__bottom p { font-size: 12px; color: #7a828d; line-height: 1.6; max-width: 720px; margin: 0; font-family: var(--btt-mono); }
.btt-sitefooter__copy { font-size: 12px; color: #5f6875; }

/* ============================================================================
   Legacy component bridge — restyles gs-* / bootstrap markup that has NOT been
   restructured into brand components yet, but lives inside a .btt-rebrand page.
   Lets sections adopt the brand without risky markup surgery (FAQ accordion,
   Q&A panels, leftover buttons, disclosure card).
   ========================================================================== */
.btt-rebrand .gs-button { border-radius: var(--btt-r); font-weight: 800; font-size: 16px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; line-height: 1.25; padding: 8px 22px; text-align: center; }
/* Normalise the legacy size classes so every bridged button matches the DS
   button (.gs-button-large/-medium set 16pt/14pt fonts). Keep -small small. */
.btt-rebrand .gs-button-small { font-size: 13px !important; font-weight: 700; min-height: 38px; padding: 6px 14px !important; }
.btt-rebrand .gs-button-orange, .btt-rebrand .gs-button-orange:hover, .btt-rebrand .gs-button-orange:active { color: var(--btt-ink) !important; }
.btt-rebrand .gs-button-orange { background-color: var(--btt-cta) !important; border-color: var(--btt-cta) !important; }
.btt-rebrand .gs-button-orange:hover, .btt-rebrand .gs-button-orange:active { background-color: var(--btt-cta-hover) !important; border-color: var(--btt-cta-hover) !important; }
.btt-rebrand .gs-button-blue, .btt-rebrand .gs-button-green, .btt-rebrand .gs-button-blue:hover, .btt-rebrand .gs-button-green:hover { color: #fff !important; }
.btt-rebrand .gs-button-blue, .btt-rebrand .gs-button-green { background-color: var(--btt-trust) !important; border-color: var(--btt-trust) !important; }
.btt-rebrand .gs-button-blue:hover, .btt-rebrand .gs-button-green:hover { background-color: var(--btt-trust-deep) !important; border-color: var(--btt-trust-deep) !important; }
/* Legacy yellow (e.g. Live Chat) -> ghost, so the action cluster reads primary/trust/ghost. */
.btt-rebrand .gs-button-yellow, .btt-rebrand .gs-button-yellow:hover, .btt-rebrand .gs-button-yellow:active { color: var(--btt-ink) !important; }
.btt-rebrand .gs-button-yellow { background-color: #fff !important; border-color: var(--btt-line) !important; }
.btt-rebrand .gs-button-yellow:hover { background-color: var(--btt-page) !important; }
.btt-rebrand .gs-list i.fa-circle { color: var(--btt-ok) !important; }
.btt-rebrand table.gs-list.gs-color-theme-black { color: var(--btt-ink) !important; }

/* FAQ accordion -> design-system FAQ look (keeps Bootstrap collapse + ids intact) */
.btt-rebrand .gs-accordion .card,
.btt-rebrand .gs-accordion .card:nth-child(2n),
.btt-rebrand .gs-accordion .card:nth-child(odd) { background-color: var(--btt-page) !important; border: 1px solid var(--btt-line) !important; border-radius: 13px; margin-bottom: 10px !important; overflow: hidden; box-shadow: none !important; }
.btt-rebrand .gs-accordion .card-header { background-color: transparent !important; padding: 0 !important; border: none !important; margin: 0 !important; }
.btt-rebrand .gs-accordion .btn-link { color: var(--btt-ink) !important; padding: 18px 20px !important; text-decoration: none !important; }
.btt-rebrand .gs-accordion .btn-link h3 { font-size: 15.5px; font-weight: 700; letter-spacing: normal; line-height: 1.4; margin: 0; }
.btt-rebrand .gs-accordion .card-body { border: none !important; background-color: var(--btt-page) !important; color: var(--btt-muted) !important; padding: 0 20px 18px !important; }
.btt-rebrand .gs-accordion .card-body p { color: var(--btt-muted) !important; font-size: 14.5px; line-height: 1.65; }
.btt-rebrand .gs-accordion-header, .btt-rebrand .gs-accordion-footer { background-color: var(--btt-trust) !important; }
.btt-rebrand .gs-accordion-footer a, .btt-rebrand .gs-accordion-footer .gs-button-white { color: #fff !important; }
/* +/x chip: the FA circle-plus icon is restyled into the DS square chip. The "+" is drawn from two
   centred bars (::before = horizontal, ::after = vertical) rather than a text glyph, so it is always
   pixel-centred regardless of font metrics. Rotating the chip 45deg turns the "+" into an "x". */
.btt-rebrand .gs-accordion .card-header .btn-link i {
  position: relative; display: inline-block; flex: none;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--btt-trust-tint); color: var(--btt-ok);
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btt-rebrand .gs-accordion .card-header .btn-link i::before,
.btt-rebrand .gs-accordion .card-header .btn-link i::after {
  content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important;
  background: currentColor !important; opacity: 1 !important; border-radius: 1px; display: block !important;
}
.btt-rebrand .gs-accordion .card-header .btn-link i::before { width: 12px; height: 2.5px; transform: translate(-50%, -50%); }
.btt-rebrand .gs-accordion .card-header .btn-link i::after { width: 2.5px; height: 12px; transform: translate(-50%, -50%); }
.btt-rebrand .gs-accordion .card-header .btn-link[aria-expanded="true"] i { background: var(--btt-cta); color: var(--btt-ink); transform: rotate(45deg); }

/* ---- Hero video framed as a design-system media card (desktop) ---- */
@media (min-width: 992px) {
  /* Compact video card that hugs the portrait video and sits softly in the hero. */
  #homeHeaderVideoSlotDesktop.btt-hero-media {
    background: var(--btt-card); border: 1px solid var(--btt-line);
    border-radius: 18px; box-shadow: var(--btt-shadow);
    padding: 16px; align-self: center; width: fit-content; max-width: 300px; margin: 0 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  #homeHeaderVideoSlotDesktop.btt-hero-media .hh-video.hh-hero { width: 100%; max-width: 100%; }
  #homeHeaderVideoSlotDesktop.btt-hero-media .hh-video.hh-hero .hh-video-tile { width: 236px; max-width: 236px; margin: 0 auto; border-radius: 12px; }
  #homeHeaderVideoSlotDesktop.btt-hero-media .hh-video.hh-hero .hh-video-label { margin-top: 12px; }
  #homeHeaderVideoSlotDesktop.btt-hero-media .hh-video.hh-hero .hh-video-label-title { display: block !important; font-size: 14.5px; color: var(--btt-ink); }
  #homeHeaderVideoSlotDesktop.btt-hero-media .hh-video.hh-hero .hh-video-label-sub { display: block !important; font-size: 12px; color: var(--btt-muted); font-weight: 500; }
}

/* Disclosure card */
.btt-rebrand .gs-card-light-grey .card-body { background-color: var(--btt-card) !important; border: 1px solid var(--btt-line) !important; border-radius: var(--btt-r-md) !important; }

/* Big "speech bubble" Q&A sections: map the legacy inline palette onto the brand
   (coloured heading bars -> forest, pastel body panels -> white cards). */
.btt-rebrand div[style="background-color: #ff734d"] { background-color: var(--btt-page) !important; }
.btt-rebrand div[style="background-color: #077ca7"] { background-color: var(--btt-card) !important; }
.btt-rebrand [style*="background-color: #0093c9" i],
.btt-rebrand [style*="background-color: #3f51b5" i],
.btt-rebrand [style*="background-color: #10bc63" i],
.btt-rebrand [style*="background-color: #f99c2d" i] { background-color: var(--btt-trust) !important; }
.btt-rebrand [style*="background-color: #077ca7" i] { background-color: var(--btt-trust-deep) !important; }
.btt-rebrand [style*="background-color: #ccf1ff" i],
.btt-rebrand [style*="background-color: #b9f9d8" i],
.btt-rebrand [style*="background-color: #fde8ce" i],
.btt-rebrand [style*="background-color: #d9ddf2" i] { background-color: var(--btt-card) !important; border: 1px solid var(--btt-line) !important; }

/* ============================================================================
   Legacy chrome retheme — applied site-wide from the master page. Restyles the
   existing header/menu/footer markup onto the brand without restructuring it, so
   all nav links, buttons, JS toggles and content are preserved. Overrides win via
   specificity + !important over the legacy gs-* inline colours.
   ========================================================================== */
/* ---- Header bars: white with hairline dividers, brand type ---- */
#header-mobile.gs-header { background-color: var(--btt-card) !important; border-bottom: 1px solid var(--btt-line); font-family: var(--btt-font); }
#header-mobile .gs-color-theme-blue { color: var(--btt-trust) !important; }
/* Desktop header is now the single DS bar (.btt-siteheader) — keep its own border/sticky. */
#header-desktop.gs-header.btt-siteheader { background-color: var(--btt-card) !important; }

/* ---- Mobile header + dropdown menu: white, brand links ---- */
#menu-mobile.gs-menu-mobile, #menu-mobile.gs-menu-mobile nav { background-color: var(--btt-card) !important; }
#menu-mobile { border-bottom: 1px solid var(--btt-line); }
.gs-menu-mobile nav .nav-link { color: var(--btt-ink) !important; font-family: var(--btt-font); }
.gs-menu-mobile nav .nav-item.active, .gs-menu-mobile nav .nav-item:hover { background-color: var(--btt-trust-tint) !important; }
.gs-menu-mobile nav .nav-item.active .nav-link, .gs-menu-mobile nav .nav-item:hover .nav-link { color: var(--btt-trust) !important; }

/* ---- Header hamburger + action buttons on the brand palette ---- */
/* Hamburger: no background — just the icon (brand forest). */
#header-mobile .gs-header-button-menu,
#header-mobile .gs-header-button-menu.collapsed,
#header-mobile .gs-header-button-menu:not(.collapsed) { background-color: transparent !important; border-color: transparent !important; color: var(--btt-trust) !important; box-shadow: none !important; }
.gs-header .gs-button-light-blue, .gs-header-button.gs-button-light-blue { background-color: var(--btt-cta) !important; border-color: var(--btt-cta) !important; color: var(--btt-cta-ink) !important; border-radius: var(--btt-r); }
.gs-header .gs-button-light-blue:hover, .gs-header-button.gs-button-light-blue:hover { background-color: var(--btt-cta-hover) !important; border-color: var(--btt-cta-hover) !important; }
.gs-header .gs-button-dark-blue, .gs-header-button.gs-button-dark-blue { background-color: var(--btt-trust) !important; border-color: var(--btt-trust) !important; border-radius: var(--btt-r); }
.gs-header .gs-button-dark-blue:hover, .gs-header-button.gs-button-dark-blue:hover { background-color: var(--btt-trust-deep) !important; border-color: var(--btt-trust-deep) !important; }
.gs-header .gs-button-orange, .gs-header-button.gs-button-orange { background-color: var(--btt-cta) !important; border-color: var(--btt-cta) !important; color: var(--btt-cta-ink) !important; border-radius: var(--btt-r); }

/* ---- Footer: one cohesive dark-brand zone, all text white ---- */
#footer { font-family: var(--btt-font); }
#footer .gs-footer { background-color: var(--btt-footer) !important; color: #fff; padding: 44px 0 48px !important; }
/* Fully-white monochrome logo sits directly on the dark footer. */
#footer .gs-footer .gs-footer-logo { opacity: 1; }
/* Everything in the footer is white */
#footer .gs-footer, #footer .gs-footer p, #footer .gs-footer div, #footer .gs-footer span, #footer .gs-footer li,
#footer .gs-footer a, #footer .gs-footer .gs-color-theme-black, #footer .gs-footer a.gs-color-theme-black,
#footer .gs-footer .gs-color-theme-grey { color: #fff !important; }
#footer .gs-footer a:hover { color: #fff !important; text-decoration: underline; }
/* Column headings: white, uppercase, hairline underline */
.gs-footer-group-heading, .gs-footer-group-heading a,
.gs-footer-group--blue .gs-footer-group-heading, .gs-footer-group--green .gs-footer-group-heading,
.gs-footer-group--orange .gs-footer-group-heading, .gs-footer-group--purple .gs-footer-group-heading {
  color: #fff !important; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: 10px; margin: 0 0 12px;
}
/* Declutter link columns: plain compact white text links, no icon chips; equal-height columns */
.gs-footer-links .row { align-items: stretch; }
.gs-footer-group { height: 100%; }
.gs-footer-link-with-image { min-height: 0 !important; margin: 0 !important; border-radius: 0; overflow: visible; }
.gs-footer-link-with-image .gs-footer-link-with-image--icon { display: none !important; }
.gs-footer-link-with-image .gs-footer-link-with-image--text { background: transparent !important; color: #fff !important; padding: 6px 0 !important; font-weight: 500; font-size: 14px; }
.gs-footer-link-with-image:hover .gs-footer-link-with-image--text { color: #fff !important; text-decoration: underline; }
/* Trading Standards + Reviews accent bars -> forest, white text */
.gs-footer-trading-standards { background-color: var(--btt-trust) !important; }
.gs-footer-trading-standards, .gs-footer-trading-standards * { color: #fff !important; }
.gs-footer-reviews-rich-snippet { background-color: var(--btt-trust-deep) !important; }
.gs-footer-reviews-rich-snippet, .gs-footer-reviews-rich-snippet * { color: #fff !important; }
/* LLM SEO panel -> light brand "about" band matching the page: white cards with
   hairline + soft shadow, eyebrow-style section labels, muted body, forest links. */
.gs-footer-llm-panel { background-color: var(--btt-page) !important; border-color: var(--btt-line) !important; padding-top: 56px !important; padding-bottom: 56px !important; font-size: 0.95rem; }
.gs-footer-llm-panel, .gs-footer-llm-panel p, .gs-footer-llm-panel li, .gs-footer-llm-panel span { color: var(--btt-muted) !important; }
.gs-footer-llm-panel strong { color: var(--btt-ink) !important; }
.gs-footer-llm-panel .rounded { background-color: var(--btt-card) !important; border: 1px solid var(--btt-line) !important; box-shadow: var(--btt-shadow) !important; border-radius: 16px !important; }
.gs-footer-llm-panel h4 { color: var(--btt-ink) !important; font-weight: 800 !important; letter-spacing: -.01em; }
.gs-footer-llm-panel h4 a { color: var(--btt-ink) !important; }
.gs-footer-llm-panel h5 { color: var(--btt-muted) !important; font-size: 12px !important; letter-spacing: .08em !important; text-transform: uppercase; font-weight: 800 !important; border-bottom: 1px solid var(--btt-line) !important; padding-bottom: 10px !important; }
.gs-footer-llm-panel a { color: var(--btt-trust) !important; font-weight: 600; text-decoration: none; }
.gs-footer-llm-panel a:hover { text-decoration: underline; }

/* ---- Tweet / social panel -> flat brand band, brand chips, clean tweet card ---- */
.btt-tweetpanel { background-image: none !important; background-color: var(--btt-page) !important; font-family: var(--btt-font); padding-top: 56px !important; padding-bottom: 56px !important; }
.btt-tweetpanel .gs-color-theme-blue { color: var(--btt-ink) !important; }
.btt-tweetpanel h2 { font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-size: 30px; margin-top: 22px !important; margin-bottom: 26px !important; }
.btt-tweetpanel .gs-social-icon { background: var(--btt-trust) !important; border-color: var(--btt-trust) !important; color: #fff !important; border-radius: 12px !important; transition: background-color .15s ease, transform .05s ease; }
.btt-tweetpanel .gs-social-icon:hover { background: var(--btt-trust-deep) !important; border-color: var(--btt-trust-deep) !important; }
.btt-tweetpanel .gs-social-icon-twitter img { filter: brightness(0) invert(1); }
/* Clean white feed card, centred, with the scrollbar hidden. */
.btt-tweetpanel #twitterContainer { background: var(--btt-card) !important; border: 1px solid var(--btt-line); border-radius: 18px; box-shadow: var(--btt-shadow); max-width: 760px; margin: 0 auto; padding: 4px 24px; height: 300px; scrollbar-width: none; -ms-overflow-style: none; }
.btt-tweetpanel #twitterContainer::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.btt-tweetpanel #twitterContainer table { width: 100%; }
.btt-tweetpanel #twitterContainer .tweetText { color: var(--btt-ink) !important; font-size: 14.5px !important; line-height: 1.55; padding-top: 18px !important; }
.btt-tweetpanel #twitterContainer .when { color: var(--btt-muted) !important; font-size: 12px !important; border-bottom: 1px solid var(--btt-line) !important; padding-bottom: 18px !important; }
.btt-tweetpanel #twitterContainer a { color: var(--btt-trust) !important; text-decoration: none; font-weight: 600; }
.btt-tweetpanel #twitterContainer a:hover { text-decoration: underline; }

/* ---- Interior page hero (bridged .gs-page-header-full-width) ------------
   Keeps the legacy full-bleed photo header but retints it to the brand
   ink->forest gradient and gives the H1/CTA design-system type. Reused across
   the interior content pages (What we offer, Why use us, etc.). */
.btt-rebrand .gs-page-header-full-width { position: relative; background-size: cover !important; background-repeat: no-repeat; }
.btt-rebrand .gs-page-header-image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,23,29,.60) 0%, rgba(28,55,44,.80) 100%) !important; opacity: 1 !important; z-index: 0; }
.btt-rebrand .gs-page-header-full-width > .row { position: relative; z-index: 1; }
.btt-rebrand .gs-page-header-full-width h1 { color: #fff !important; font-size: 46px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; margin-bottom: 22px; }
.btt-rebrand .gs-page-header-full-width p { color: rgba(255,255,255,.92); }
@media (max-width: 767px) { .btt-rebrand .gs-page-header-full-width h1 { font-size: 32px; } }

/* ---- Feature / benefit table (bridged .gs-feature-table) ----------------
   White card table on the grey page band: forest header row, hairline row
   separators, forest icons, ink feature titles, muted benefit copy. */
.btt-rebrand .gs-feature-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--btt-card); border: 1px solid var(--btt-line); border-radius: var(--btt-r-md); overflow: hidden; box-shadow: var(--btt-shadow); }
/* Kill the legacy white 2px segmenting borders -> hairline row separators only. */
.btt-rebrand .gs-feature-table td, .btt-rebrand .gs-feature-table th { border: none !important; vertical-align: middle; }
.btt-rebrand .gs-feature-table tbody td { border-top: 1px solid var(--btt-line) !important; }
/* Header: one forest bar (legacy set Feature=blue, Benefit=orange on the th). */
.btt-rebrand .gs-feature-table thead th,
.btt-rebrand .gs-feature-table th.gs-feature-table-feature,
.btt-rebrand .gs-feature-table th.gs-feature-table-benefit { background-color: var(--btt-trust) !important; }
.btt-rebrand .gs-feature-table thead th { color: #fff !important; }
.btt-rebrand .gs-feature-table thead h3, .btt-rebrand .gs-feature-table thead h4 { color: #fff !important; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
/* Rows: neutralise the per-cell blue/orange (and their light-row variants) so the
   row colour shows through — white, alternating with the grey page tone. */
.btt-rebrand .gs-feature-table tbody tr { background: var(--btt-card) !important; }
.btt-rebrand .gs-feature-table tbody tr.gs-feature-table-feature-light { background: var(--btt-page) !important; }
.btt-rebrand .gs-feature-table-feature-icon,
.btt-rebrand .gs-feature-table-feature-text,
.btt-rebrand .gs-feature-table-benefit-text,
.btt-rebrand .gs-feature-table-feature-light .gs-feature-table-feature-icon,
.btt-rebrand .gs-feature-table-feature-light .gs-feature-table-feature-text,
.btt-rebrand .gs-feature-table-feature-light .gs-feature-table-benefit-text { background-color: transparent !important; }
.btt-rebrand .gs-feature-table-feature-icon { text-align: center; }
.btt-rebrand .gs-feature-table-feature-icon i,
.btt-rebrand .gs-feature-table-feature-light .gs-feature-table-feature-icon i { color: var(--btt-trust) !important; font-size: 30px; --fa-primary-opacity: 1; --fa-secondary-opacity: .26; }
.btt-rebrand .gs-feature-table-feature-text { font-weight: 700 !important; color: var(--btt-ink) !important; font-size: 15.5px !important; }
.btt-rebrand .gs-feature-table-benefit-text { color: var(--btt-muted) !important; font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.6; }
.btt-rebrand .gs-feature-table-feature-text a, .btt-rebrand .gs-feature-table-benefit-text a { color: var(--btt-trust) !important; text-decoration: underline; }

/* ---- Alternating text + image step panels (bridged .gs-text-and-image-panel)
   The legacy coloured text panels (white text on blue + a faint icon
   watermark) become clean white DS cards; the photo panels become rounded
   image tiles. Reused by How it works, etc. */
.btt-rebrand .gs-text-and-image-panel .row.btt-steppanel { margin-bottom: 22px; }
.btt-rebrand .gs-text-and-image-panel .row.btt-steppanel:last-child { margin-bottom: 0; }
/* Each step = ONE unified card: photo flush on one side, copy on the other,
   sharing a single border/radius/shadow (rather than two floating boxes). */
.btt-rebrand .btt-steppanel { background: var(--btt-card); border: 1px solid var(--btt-line); border-radius: var(--btt-r-lg); box-shadow: var(--btt-shadow); overflow: hidden; margin-left: 0 !important; margin-right: 0 !important; }
.btt-rebrand .btt-steppanel > [class*="col-"] { padding: 0; }
.btt-rebrand .gs-text-and-image-panel-text { background-image: none !important; background-color: var(--btt-card) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: var(--btt-ink) !important; padding: 34px 38px !important; display: flex; flex-direction: column; justify-content: center; }
.btt-rebrand .gs-text-and-image-panel-text h3, .btt-rebrand .gs-text-and-image-panel-text h4 { color: var(--btt-ink) !important; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.btt-rebrand .gs-text-and-image-panel-text h5 { color: var(--btt-trust) !important; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.btt-rebrand .gs-text-and-image-panel-text p { color: var(--btt-muted) !important; font-size: 15px; line-height: 1.62; }
.btt-rebrand .gs-text-and-image-panel-text a { color: var(--btt-trust) !important; text-decoration: underline; }
.btt-rebrand .gs-text-and-image-panel-image { background-size: cover !important; background-position: center !important; border-radius: 0 !important; min-height: 260px; }

/* ---- Action-button cluster (shared UserControls/GS/ActionButtonGroup) ----
   No panel/frame — the buttons sit directly under a per-page keyworded
   <h2>+<p> lead-in (added on each page). This wrapper just centres and caps
   the width. Scoped to .btt-rebrand, so legacy pages are unaffected. */
.btt-rebrand .btt-actionbtns { max-width: 560px; margin: 0 auto; }
.btt-rebrand .btt-actionbtns .row { margin-left: 0; margin-right: 0; }
.btt-rebrand .btt-actionbtns .row + .row { margin-top: 8px; }

/* ---- About-us welcome panel (bridged .gs-background-blue) ---------------
   The legacy blue welcome panel (white copy + white links) becomes an
   on-brand forest trust-card; text/links stay white so all copy is readable. */
.btt-rebrand .gs-background-blue { background: var(--btt-trust) !important; border-radius: var(--btt-r-lg); box-shadow: var(--btt-shadow); }
.btt-rebrand .gs-background-blue h1, .btt-rebrand .gs-background-blue h2, .btt-rebrand .gs-background-blue h3, .btt-rebrand .gs-background-blue h4 { color: #fff !important; }
.btt-rebrand .gs-about-us-text p { color: rgba(255,255,255,.93) !important; font-size: 15.5px; line-height: 1.65; }
.btt-rebrand .gs-background-blue a, .btt-rebrand .gs-background-blue .gs-color-theme-white { color: #fff !important; }
.btt-rebrand .gs-about-us-image img { border-radius: var(--btt-r-md); max-width: 100%; height: auto; }

/* ---- Generic content cards (bridged .gs-card + colour variants) ---------
   e.g. the Contact page help/form cards (gs-card-light-orange/blue-and-white)
   -> clean white DS cards with a hairline header. */
.btt-rebrand .gs-card { background: var(--btt-card) !important; border: 1px solid var(--btt-line) !important; border-radius: var(--btt-r-lg) !important; box-shadow: var(--btt-shadow); overflow: hidden; }
.btt-rebrand .gs-card .card-header { background: var(--btt-card) !important; border-bottom: 1px solid var(--btt-line) !important; }
.btt-rebrand .gs-card .card-header h5 { color: var(--btt-ink) !important; font-weight: 800; font-size: 17px; letter-spacing: -.01em; margin: 6px 0 !important; }
.btt-rebrand .gs-card .card-body { background: var(--btt-card) !important; color: var(--btt-ink) !important; }
/* Body lead sentence (h6) reads as emphasised body copy, subordinate to the h5 title. */
.btt-rebrand .gs-card .card-body h6 { color: var(--btt-ink) !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.6; letter-spacing: 0; margin-bottom: 10px !important; }
.btt-rebrand .gs-card .card-body p { color: var(--btt-muted) !important; font-size: 15px; }
.btt-rebrand .gs-card a:not(.btt-btn):not(.gs-button) { color: var(--btt-trust) !important; }

/* ---- Forms (bridged Bootstrap .form-control / .form-group) --------------- */
.btt-rebrand .form-group { margin-bottom: 18px; }
.btt-rebrand .form-group label { font-weight: 700; color: var(--btt-ink); margin-bottom: 6px; display: block; }
.btt-rebrand .form-control { border: 1px solid var(--btt-line); border-radius: var(--btt-r-sm); padding: 10px 14px; height: auto; font-family: var(--btt-font); font-size: 15px; color: var(--btt-ink); background: var(--btt-card); box-shadow: none; }
.btt-rebrand .form-control:focus { border-color: var(--btt-trust); box-shadow: 0 0 0 3px var(--btt-trust-tint); outline: none; }
.btt-rebrand textarea.form-control { min-height: 150px; }

/* ---- SEO / info pages (text-heavy template) ----------------------------
   These pages are wrapped in `.btt-rebrand.btt-rebrand-white`: a WHITE base
   so the default (no-bg) content sections read white while the inline `#eee`
   bands alternate to the grey page tone. Recolours the legacy blue/black
   theme classes to Slate & Forest and tidies the gs-list checklist. Buttons
   theme via the existing .gs-button bridge. */
.btt-rebrand-white { background: var(--btt-card) !important; }
/* Alternating band backgrounds (inline styles on the section wrappers) */
.btt-rebrand [style*="#eee"], .btt-rebrand [style*="#f7f7f7"] { background-color: var(--btt-page) !important; }
.btt-rebrand [style*="#f7e7d4"] { background-color: var(--btt-trust-tint) !important; border: 1px solid var(--btt-trust-line) !important; }
/* Band alignment: the white content sections wrap their .container in an extra .px-3
   (`.py-5.px-3 > .container`), which stacks with the container's own padding and pushes
   their content further in than the grey (#eee) bands (whose px-3 is on the container
   itself). Drop the redundant OUTER padding so every band lines up on the container.
   `:not(.container)` keeps this off the grey containers and off padded panels elsewhere. */
.btt-rebrand .py-5.px-3:not(.container) { padding-left: 0 !important; padding-right: 0 !important; }
/* Uniform vertical section rhythm: content sections use py-5 while the intro/header uses
   mt-3/mb-4 margins — give every band the same padding so they match across all pages. */
.btt-rebrand .py-5 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.btt-rebrand .container.mt-3.mt-lg-5 { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Legal-page clauses are wrapped one-per-<div> (div > single <p>), and p:last-child zeroes
   the only-child paragraph — give the clause blocks a little breathing room. Step-panel rows
   in the same column keep their own mb-4 (Bootstrap !important wins). */
.btt-rebrand .col-md-10.offset-md-1 > div { margin-bottom: 1rem; }
/* Headings: legacy blue/black -> ink. DS h1/h2/h3 sizes win over the
   Bootstrap .h1/.h4 sizing classes these pages tack on. */
.btt-rebrand h1.gs-color-theme-blue, .btt-rebrand h2.gs-color-theme-blue,
.btt-rebrand h3.gs-color-theme-blue, .btt-rebrand h4.gs-color-theme-blue,
.btt-rebrand .gs-color-theme-black { color: var(--btt-ink) !important; }
/* Body copy */
.btt-rebrand .text-dark { color: var(--btt-ink) !important; }
/* Inline text links (legacy blue) -> trust */
.btt-rebrand a.gs-color-theme-blue { color: var(--btt-trust) !important; }
.btt-rebrand a.gs-color-theme-blue:hover { color: var(--btt-trust-deep) !important; }
/* Checklist table (gs-list): neat rows + small forest dot. Baseline-align the
   cells (so the dot lines up with the first text line even when a row wraps)
   and nudge the small dot up to the text's optical centre. */
.btt-rebrand .gs-list td { padding: 5px 0; vertical-align: baseline; }
.btt-rebrand .gs-list td:first-child { width: 1%; white-space: nowrap; padding-right: 12px; }
.btt-rebrand .gs-list i.fa-circle { font-size: 8px; color: var(--btt-ok) !important; vertical-align: 0.2em; }

/* ---- Practice quiz UI (PracticeTests/PracticeTestQuestion* pages) --------
   Colour-variant cards -> clean white DS cards with a semantic left accent;
   answer options get a DS hover; result colours mapped to DS ok / err. */
.btt-rebrand .gs-card-light-blue, .btt-rebrand .gs-card-light-orange,
.btt-rebrand .gs-card-light-green, .btt-rebrand .gs-card-light-red,
.btt-rebrand .gs-card-light-yellow {
  background: var(--btt-card) !important; border: 1px solid var(--btt-line) !important;
  border-radius: var(--btt-r-lg) !important; box-shadow: var(--btt-shadow); }
.btt-rebrand strong.gs-color-theme-blue { color: var(--btt-ink) !important; }
.btt-rebrand .text-success { color: var(--btt-ok) !important; }
.btt-rebrand .text-danger { color: var(--btt-err) !important; }
.btt-rebrand .practice-theory-test-question-possible-answer { border: 1px solid var(--btt-line) !important; border-radius: var(--btt-r) !important; background: var(--btt-card) !important; color: var(--btt-ink) !important; transition: border-color .12s ease, background-color .12s ease; }
.btt-rebrand .practice-theory-test-question-possible-answer:hover { border-color: var(--btt-trust) !important; background: var(--btt-trust-tint) !important; }
.btt-rebrand .practice-theory-test-question-possible-answer .rounded-circle { border-color: var(--btt-line) !important; }
/* Static result answers (correct/incorrect pages) match the DS radius/border of the live answers,
   while keeping the green/red result state. */
.btt-rebrand .prt-answer { border-radius: var(--btt-r) !important; border: 1px solid var(--btt-line) !important; background: var(--btt-card) !important; color: var(--btt-ink) !important; }
.btt-rebrand .prt-answer.border-success { border-color: var(--btt-ok) !important; background: var(--btt-trust-tint) !important; }
.btt-rebrand .prt-answer.border-danger { border-color: var(--btt-err) !important; background: #fdecea !important; }
.btt-rebrand .practice-theory-test-question-possible-answer:hover .rounded-circle { border-color: var(--btt-trust) !important; }

/* ============================================================
   Theory test guide cards + article-page chrome (rebrand)
   ============================================================ */
.btt-rebrand .btt-guidecard {
  display: flex; flex-direction: column; width: 100%;
  background: var(--btt-card); border: 1px solid var(--btt-line);
  border-radius: 16px; padding: 26px 28px; color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btt-rebrand .btt-guidecard:hover {
  transform: translateY(-3px); border-color: var(--btt-trust);
  box-shadow: 0 18px 40px -22px rgba(20,23,29,.5); text-decoration: none; color: inherit;
}
.btt-rebrand .btt-guidecard-title { color: var(--btt-trust); font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.btt-rebrand .btt-guidecard:hover .btt-guidecard-title { color: var(--btt-trust-deep); }
.btt-rebrand .btt-guidecard-desc { color: var(--btt-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; flex: 1 1 auto; }
.btt-rebrand .btt-guidecard-tags { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.btt-rebrand .btt-tag { display: inline-block; background: var(--btt-trust-tint); color: var(--btt-trust-deep); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.btt-rebrand .btt-guidecard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--btt-line); padding-top: 14px; margin-top: auto; }
.btt-rebrand .btt-guidecard-date { color: var(--btt-muted); font-size: 12.5px; }
.btt-rebrand .btt-guidecard-more { color: var(--btt-trust); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.btt-rebrand .btt-guidecard:hover .btt-guidecard-more { color: var(--btt-trust-deep); }
.btt-rebrand .btt-guidecard-more::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 1px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .18s ease;
}
.btt-rebrand .btt-guidecard:hover .btt-guidecard-more::after { transform: rotate(45deg) translate(2px, -2px); }

/* Article page ---------------------------------------------------- */
.btt-rebrand .btt-backlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--btt-trust); text-decoration: none; }
.btt-rebrand .btt-backlink:hover { color: var(--btt-trust-deep); text-decoration: none; }
.btt-rebrand .btt-backlink::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.btt-rebrand .btt-article-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--btt-trust-tint); border: 1px solid var(--btt-line); border-radius: 16px; padding: 22px 26px;
}
.btt-rebrand .btt-sidecard { background: var(--btt-card); border: 1px solid var(--btt-line); border-radius: 16px; overflow: hidden; }
.btt-rebrand .btt-sidecard-head { background: var(--btt-trust); color: #fff; padding: 16px 20px; font-size: 16px; font-weight: 700; margin: 0; }
.btt-rebrand .btt-sidecard-item { display: block; padding: 14px 20px; border-top: 1px solid var(--btt-line); text-decoration: none; }
.btt-rebrand .btt-sidecard-item:first-of-type { border-top: 0; }
.btt-rebrand .btt-sidecard-item:hover { background: var(--btt-page); text-decoration: none; }
.btt-rebrand .btt-sidecard-item strong { display: block; color: var(--btt-ink); font-size: 14.5px; line-height: 1.35; }
.btt-rebrand .btt-sidecard-item small { color: var(--btt-muted); font-size: 12px; }

/* Small breathing gap above anchor/scroll targets. The site header is no longer sticky,
   so this only needs to be a little padding (not the full header height). */
.btt-rebrand [id] { scroll-margin-top: 20px; }

/* ============================================================================
   Conversion hero — two-column jumbo with a search OR booking panel, trust row,
   guide-card result cards and a sticky mobile CTA. Shared across the high-traffic
   centre / search pages (FindMyNearestTestCentre = reference). Search pages use
   .btt-searchpanel; single-centre "funnel" pages use .btt-bookpanel.
   ========================================================================== */
.btt-rebrand .btt-herojumbo { display: grid; grid-template-columns: 1fr 384px; gap: 14px 44px; align-items: start; grid-template-areas: "title panel" "copy panel"; }
.btt-rebrand .btt-herojumbo-title { grid-area: title; margin-bottom: 0 !important; }
.btt-rebrand .btt-herojumbo-copy { grid-area: copy; }
.btt-rebrand .btt-herojumbo-panel { grid-area: panel; align-self: start; }
/* Hero band = opposite of the page background, so the hero alternates with the section below it
   (box-shadow full-bleed, no markup change). Grey pages (.btt-rebrand) get a white hero band;
   white pages (.btt-rebrand-white) get a grey one. Add .btt-herojumbo-plain to a hero to opt out
   (when its first section already contrasts). .btt-heroband applies the same to a non-herojumbo hero. */
/* Consistent hero across all pages: a full-width GREY band (on the white page base), so the hero reads
   grey and the sections below alternate white/grey (first section after the hero is white). */
.btt-rebrand .btt-herojumbo, .btt-rebrand .btt-heroband { background: var(--btt-page); box-shadow: 0 0 0 100vw var(--btt-page); clip-path: inset(0 -100vw); padding-top: 40px; padding-bottom: 40px; }
/* Drop the hero wrapper's outer margins so the band butts up to the page (spacing lives in its padding). */
.btt-rebrand > .container.mt-3.mt-lg-5.mb-4 { margin-top: 0 !important; margin-bottom: 0 !important; }
@media (max-width: 991px) {
  /* Stack, leading with the panel so the search / book action is front and centre. */
  .btt-rebrand .btt-herojumbo { grid-template-columns: 1fr; gap: 16px; grid-template-areas: "title" "panel" "copy"; }
}

/* Panel shell (search + booking) */
.btt-rebrand .btt-searchpanel, .btt-rebrand .btt-bookpanel { background: var(--btt-card); border: 1px solid var(--btt-line); border-radius: var(--btt-r-lg); box-shadow: var(--btt-shadow); overflow: hidden; text-align: left; }
.btt-rebrand .btt-searchpanel-head, .btt-rebrand .btt-bookpanel-head { background: var(--btt-trust); color: #fff; padding: 18px 24px; display: flex; align-items: center; gap: 14px; }
.btt-rebrand .btt-searchpanel-head i, .btt-rebrand .btt-bookpanel-head i { font-size: 22px; color: #fff; flex: none; }
.btt-rebrand .btt-searchpanel-title, .btt-rebrand .btt-bookpanel-title { font-size: 18px; font-weight: 800; line-height: 1.2; }
.btt-rebrand .btt-searchpanel-sub, .btt-rebrand .btt-bookpanel-sub { font-size: 13px; color: #c3d6cd; margin-top: 2px; }
.btt-rebrand .btt-searchpanel-body, .btt-rebrand .btt-bookpanel-body { padding: 22px 24px 24px; }
.btt-rebrand .btt-searchpanel-body label { font-weight: 700; color: var(--btt-ink); margin-bottom: 6px; display: block; font-size: 14px; }

/* Search-panel booking nudge (replaces reassurance ticks on search pages) */
.btt-rebrand .btt-searchpanel-book { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--btt-line); font-size: 13.5px; line-height: 1.5; color: var(--btt-muted); text-align: center; }
.btt-rebrand .btt-searchpanel-book a { font-weight: 700; color: var(--btt-trust); text-decoration: underline; }
.btt-rebrand .btt-searchpanel-book a:hover { color: var(--btt-trust-deep); }

/* Booking-panel ticks + info link (kept on the funnel/detail pages — booking-intent) */
.btt-rebrand .btt-bookpanel-ticks { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 9px; }
.btt-rebrand .btt-bookpanel-ticks li { position: relative; padding-left: 27px; font-size: 14px; font-weight: 600; color: var(--btt-ink); line-height: 1.4; }
.btt-rebrand .btt-bookpanel-ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 5px; background: var(--btt-ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.btt-rebrand .btt-bookpanel-info { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--btt-trust); text-decoration: underline; }
.btt-rebrand .btt-bookpanel-info:hover { color: var(--btt-trust-deep); }

/* Result cards adopt the guide-card (article) look; actions = guide link above a hairline + book CTA */
.btt-rebrand .test-centres .card.card-with-body-only { background: var(--btt-card) !important; border: 1px solid var(--btt-line) !important; border-radius: 16px !important; box-shadow: none !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.btt-rebrand .test-centres .card.card-with-body-only:hover { transform: translateY(-3px); border-color: var(--btt-trust) !important; box-shadow: 0 18px 40px -22px rgba(20,23,29,.5) !important; }
.btt-rebrand .test-centres .card-body { padding: 24px 26px !important; }
.btt-rebrand .test-centres .test-centre-name { color: var(--btt-trust) !important; font-size: 18px; font-weight: 700; line-height: 1.3; }
.btt-rebrand .test-centres .card.card-with-body-only:hover .test-centre-name { color: var(--btt-trust-deep) !important; }
.btt-rebrand .test-centres .test-centre-address-and-postcode { color: var(--btt-muted) !important; font-size: 14px; line-height: 1.5; }
.btt-rebrand .test-centres .test-centre-address-and-postcode i { color: var(--btt-trust) !important; }
.btt-rebrand .test-centres .tc-distance { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--btt-trust); background: var(--btt-trust-tint); border: 1px solid var(--btt-trust-line); padding: 2px 10px; border-radius: 999px; }
.btt-rebrand .test-centres .tc-actions { margin-top: auto; }
.btt-rebrand .test-centres .tc-guidelink { display: flex; align-items: baseline; gap: 7px; font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--btt-trust); text-decoration: none; margin-bottom: 14px; }
.btt-rebrand .test-centres .tc-guidelink:hover { color: var(--btt-trust-deep); text-decoration: underline; }
.btt-rebrand .test-centres .tc-guidelink i { color: var(--btt-trust); }
.btt-rebrand .test-centres .tc-book { padding-top: 16px; border-top: 1px solid var(--btt-line); }

/* Sticky mobile CTA */
.btt-mobilecta { display: none; }
.btt-mobilecta-spacer { display: none; }
@media (max-width: 991px) {
  .btt-mobilecta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background: var(--btt-card); border-top: 1px solid var(--btt-line); padding: 10px 16px; box-shadow: 0 -8px 24px -16px rgba(20,23,29,.5); }
  .btt-mobilecta-spacer { display: block; height: 72px; }
}