:root {
  --ink: #0e2329;
  --petrol: #16333b;
  --petrol-light: #214750;
  --stone: #f1eee6;
  --paper: #ffffff;
  --gold: #d7a54a;
  --slate: #4a5a5d;
  --line: #cbd3d3;
  --success: #17663a;
  --focus: #f4bd55;
  --shell: 1180px;
  --font-body: Optima, "Optima nova", Candara, "Gill Sans", "Gill Sans MT", "Segoe UI", system-ui, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
/* Two-tone, so the ring survives whatever it lands on. The outline carries the focus
   colour; the halo sits behind it in the opposite tone, and on a surface close to one of
   them the other still draws the boundary. Without it the reduce-colour mode - an
   accessibility setting - set --focus to black while leaving --petrol surfaces dark, and
   the ring came out at 1.4:1 against them: turning the accessibility feature on was what
   made keyboard focus impossible to see. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--focus-halo, rgba(255,255,255,.92)); }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 10px 14px; color: var(--paper); background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

body.quovia-public-home .site-header { position: sticky; top: 0; right: 0; left: 0; z-index: 100; width: 100%; max-width: none; margin: 0; color: var(--ink); background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(14,35,41,.04); }
/* Signed in, WordPress fixes its toolbar over the top 32px of the viewport (46px on phones). A
   sticky header at top: 0 slid under it on every scroll: half the logo and the top of every link
   hidden, on every marketing page, for everyone who administers the site. Offset by the toolbar. */
body.admin-bar.quovia-public-home .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar.quovia-public-home .site-header { top: 46px; } }
.header-inner { min-height: 72px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; text-decoration: none; white-space: nowrap; }
.brand img { width: 36px; height: 36px; }
.qv-nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid rgba(15, 35, 41, .18); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.qv-nav-toggle-bars { display: grid; gap: 4px; width: 18px; }
.qv-nav-toggle-bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.qv-nav-toggle[aria-expanded="true"] { background: rgba(15, 35, 41, .06); }
.primary-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(15px, 1.5vw, 26px); }
/* The account links live in .public-account-actions on desktop; .nav-account is the copy that folds
   into the mobile menu (shown again at <=940px). Without this it also renders inline on desktop, so a
   signed-in visitor saw "Sign out" twice. */
.primary-nav .nav-account { display: none; }
.primary-nav a, .site-footer nav a { text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: transparent; }
.primary-nav a:hover, .primary-nav a:focus-visible, .site-footer nav a:hover, .site-footer nav a:focus-visible { text-decoration-color: currentColor; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.public-account-actions { display: flex; align-items: center; gap: 10px; }
.account-signout { font-weight: 700; text-underline-offset: 5px; }
.language-switcher ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.language-switcher a { min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; font-size: .8125rem; font-weight: 750; text-decoration: none; }
.language-switcher a:hover, .language-switcher a:focus-visible { border-color: var(--ink); }
.language-switcher .current-lang a { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border: 2px solid transparent; border-radius: 5px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.button-quiet { color: var(--ink); background: transparent; border-color: var(--ink); }
.button-quiet:hover { color: var(--paper); background: var(--ink); }
.button-gold { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.button-gold:hover { background: #e3b765; border-color: #e3b765; }
.button-dark { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.button-dark:hover { color: var(--ink); background: transparent; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-underline-offset: 5px; }
.light-link { color: var(--paper); }

.accessibility-menu { position: fixed; bottom: 20px; left: 20px; z-index: 99990; color: var(--ink); }
.accessibility-menu summary { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; color: var(--paper); background: var(--petrol); border: 2px solid var(--petrol); border-radius: 5px; box-shadow: 0 4px 14px rgba(14,35,41,.16); cursor: pointer; font-weight: 700; list-style: none; }
.accessibility-menu summary::-webkit-details-marker { display: none; }
.accessibility-menu summary:hover { background: var(--petrol-light); border-color: var(--petrol-light); }
.accessibility-menu summary > span:first-child { font-family: var(--font-display); }
.accessibility-panel { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 220; width: 340px; max-width: calc(100vw - 28px); max-height: calc(100vh - 90px); overflow-y: auto; padding: 20px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 6px 6px 0 0; box-shadow: 0 18px 42px rgba(14,35,41,.2); }
.panel-title { margin: 0; font-size: 1.125rem; font-weight: 800; }
.panel-intro { margin: 4px 0 18px; color: var(--slate); font-size: .8125rem; }
.preference-group { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.preference-group > span { font-weight: 700; }
.text-size-control { display: inline-grid; grid-template-columns: repeat(3, 42px); gap: 4px; padding: 3px; background: var(--stone); border-radius: 5px; }
.accessibility-panel button { min-height: 38px; color: var(--ink); cursor: pointer; }
.text-size-control button { padding: 6px; background: transparent; border: 1px solid transparent; border-radius: 3px; }
.text-size-control button:hover { border-color: var(--petrol); }
.text-size-control button[aria-pressed="true"] { color: var(--paper); background: var(--petrol); border-color: var(--petrol); }
.preference-toggle { width: 100%; display: grid; grid-template-columns: 1fr 38px; gap: 12px; align-items: center; padding: 12px 0; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); }
.preference-toggle strong, .preference-toggle small { display: block; }
.preference-toggle small { margin-top: 2px; color: var(--slate); font-size: .75rem; line-height: 1.35; }
.toggle-indicator { position: relative; width: 38px; height: 22px; background: #d9dede; border: 1px solid #aeb9ba; border-radius: 999px; transition: background .16s ease; }
.toggle-indicator::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--paper); border-radius: 50%; box-shadow: 0 1px 3px rgba(14,35,41,.3); transition: transform .16s ease; }
.preference-toggle[aria-pressed="true"] .toggle-indicator { background: var(--petrol); border-color: var(--petrol); }
.preference-toggle[aria-pressed="true"] .toggle-indicator::after { transform: translateX(16px); }
.preference-reset { min-height: 36px; margin-top: 13px; padding: 4px 0; color: var(--ink); background: transparent; border: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.preference-reset:hover { text-decoration-thickness: 2px; }
.preference-status { min-height: 1.2em; margin: 9px 0 0; color: var(--slate); font-size: .75rem; }

.hero { min-height: calc(100vh - 72px); display: flex; flex-direction: column; color: var(--paper); background: var(--petrol); }
.hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); gap: 72px; align-items: center; padding-block: 78px 56px; }
.eyebrow { margin: 0 0 14px; color: var(--gold); font-size: .78em; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow.dark { color: #476166; }
h1, h2, h3, p { letter-spacing: 0; }
h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.05; }
h1 { font-size: 4.25rem; }
h2 { max-width: 820px; font-size: 2.75rem; }
h3 { font-size: 1.25rem; }
.hero-statement { max-width: 650px; margin: 20px 0 0; font-family: var(--font-display); font-size: 2.125rem; line-height: 1.2; }
.hero-detail { max-width: 610px; margin: 24px 0 0; color: #dce5e5; font-size: 1.125rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.hero-next { min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 12px 20px; color: var(--ink); background: var(--gold); font-weight: 750; text-align: center; }

.evidence-preview { border: 1px solid rgba(255,255,255,.3); border-top: 4px solid var(--gold); background: #102a31; box-shadow: 18px 18px 0 rgba(6,22,27,.25); }
.preview-heading, .proof-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.16); font-weight: 800; }
.status-pill { padding: 4px 9px; color: #d8f8e1; background: #154e30; border-radius: 999px; font-size: .76em; }
.evidence-list { margin: 0; padding: 8px 20px; list-style: none; }
.evidence-list li { display: grid; grid-template-columns: 14px 1fr auto; gap: 13px; align-items: start; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.evidence-list li::before { content: ""; width: 10px; height: 10px; margin-top: 6px; background: var(--gold); border-radius: 50%; }
.evidence-list li:last-child { border-bottom: 0; }
.evidence-list div { display: grid; gap: 2px; }
.evidence-list span, .evidence-list time { color: #b8c8cb; font-size: .83em; }
.evidence-list strong { color: var(--paper); }
.proof-line { border-top: 1px solid rgba(255,255,255,.16); border-bottom: 0; font-size: .85em; }
.proof-line code { color: var(--gold); }

.section { padding-block: 96px; }
.split-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: 80px; align-items: start; }
.lead-copy { color: var(--slate); font-size: 1.1875rem; }
.lead-copy p:first-child { margin-top: 0; }
.pull-quote { margin: 34px 0 0; padding-left: 20px; color: var(--ink); border-left: 4px solid var(--gold); font-family: var(--font-display); font-size: 1.6875rem; }
.proof-section { color: var(--paper); background: var(--ink); }
.section-intro { max-width: 760px; margin: 24px 0 0; color: #c9d5d6; font-size: 1.125rem; }
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 58px; border-top: 1px solid #567076; border-bottom: 1px solid #567076; }
.capability-grid article { min-width: 0; padding: 30px 24px 34px; border-right: 1px solid #567076; }
.capability-grid article:first-child { padding-left: 0; }
.capability-grid article:last-child { padding-right: 0; border-right: 0; }
.capability-number { color: var(--gold); font-family: var(--font-display); font-size: 1.75rem; }
.capability-grid h3 { margin: 24px 0 10px; }
.capability-grid p { margin: 0; color: #c9d5d6; }
.partner-section { color: var(--paper); background: var(--petrol); }
.partner-section .lead-copy, .partner-section .provider-note { color: #d4dfe0; }
.provider-note { padding-top: 20px; border-top: 1px solid #5d7479; font-size: .875rem; }
.light-grid { color: var(--ink); border-color: var(--line); }
.light-grid article { border-color: var(--line); }
.light-grid p { color: var(--slate); }
.light-grid .capability-number { color: #7a5200; }
.delivery-section { background: #fff; }
.delivery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 50px; padding: 1px; background: var(--line); }
.delivery-grid article { padding: 32px; background: var(--stone); }
.delivery-grid h3 { margin-top: 0; }
.delivery-grid p { margin-bottom: 0; color: var(--slate); }
/* The integrations grid: six items as a light 3x2, hairline-separated with the .delivery-grid gap
   technique, so CRM sync, SSO, SCIM, the API, webhooks and accountability read as one set. */
.integration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 54px; background: var(--line); border: 1px solid var(--line); }
.integration-grid article { min-width: 0; padding: 32px 26px 36px; background: var(--paper); }
.integration-grid .capability-number { color: #7a5200; }
.integration-grid h3 { margin: 22px 0 9px; color: var(--ink); }
.integration-grid p { margin: 0; color: var(--slate); }
/* A section intro on the light integrations section needs dark text, not the dark-background default. */
.interaction-section .section-intro { color: var(--slate); }
.journey-section { background: var(--stone); }
.section-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: 56px; align-items: end; }
.section-heading-row > p { margin: 0; max-width: 440px; color: var(--slate); font-size: 1.125rem; }
/* The four-step journey. Without this the <ol> fell back to browser list styling: the list
   marker and the number <span> doubled up ("1 1") and the steps stacked in a cramped column.
   A gold segment above each step reads as a progress track; the ink node carries the number. */
.journey-steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.journey-steps > li { min-width: 0; padding-top: 26px; border-top: 3px solid var(--gold); }
.journey-steps > li > span { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 1.3125rem; line-height: 1; }
.journey-steps strong { display: block; margin: 22px 0 8px; font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.journey-steps p { margin: 0; color: var(--slate); }
.trust-section { color: var(--paper); background: var(--petrol); }
.trust-intro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr); gap: 90px; align-items: end; }
.trust-intro > p { max-width: 620px; margin: 0; color: #d4dfe0; font-size: 1.125rem; }
/* Six controls as a balanced 3x2, hairline-separated with the same gap technique as
   .delivery-grid, so the row never breaks to an orphaned 4 + 2. */
.trust-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 58px; background: #5d7479; border: 1px solid #5d7479; }
.trust-facts article { min-width: 0; padding: 32px 26px 36px; background: var(--petrol); }
.trust-mark { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--gold); }
.trust-mark svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.trust-mark span { font-family: var(--font-display); font-size: 1.25rem; }
.trust-facts h3 { margin: 24px 0 10px; color: var(--paper); }
.trust-facts p { margin: 0; color: #d4dfe0; }
.contact-section { padding-block: 80px; background: var(--gold); }
.contact-section .eyebrow.dark { color: var(--ink); }
.contact-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); gap: 70px; align-items: start; }
.contact-inner p:last-child { max-width: 700px; margin-bottom: 0; font-size: 1.125rem; }
.contact-inner p.contact-secondary { margin-top: 24px; font-size: 1rem; }
.contact-secondary a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.quovia-contact-form-wrap { padding: 28px; color: var(--ink); background: var(--paper); border: 1px solid rgba(6, 22, 27, .24); border-radius: 6px; box-shadow: 10px 10px 0 rgba(6, 22, 27, .14); }
.quovia-contact-form { display: grid; gap: 18px; }
.quovia-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quovia-contact-form label { display: grid; gap: 7px; font-weight: 800; }
.quovia-contact-form input[type="text"], .quovia-contact-form input[type="email"], .quovia-contact-form textarea { width: 100%; min-height: 48px; padding: 11px 13px; color: var(--ink); background: #fff; border: 1px solid #7b898c; border-radius: 4px; font: inherit; }
.quovia-contact-form input::placeholder, .quovia-contact-form textarea::placeholder { color: #46575b; opacity: 1; }
.quovia-contact-form textarea { min-height: 130px; resize: vertical; }
.quovia-contact-form input:focus, .quovia-contact-form textarea:focus { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--ink); }
.quovia-contact-consent { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 400 !important; }
.quovia-contact-consent input { width: 20px; height: 20px; margin: 2px 0 0; }
.quovia-contact-submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.quovia-contact-submit p, .quovia-contact-follow-up { margin: 0; font-size: .9375rem !important; }
.quovia-contact-notice { margin-bottom: 20px; padding: 14px 16px; border-left: 4px solid var(--petrol); background: #eaf2f2; font-weight: 700; }
.quovia-contact-notice.is-error { border-color: #9b1c1c; background: #fff0f0; }
.quovia-contact-honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
body.quovia-public-home .site-footer { width: 100%; max-width: none; margin: 0; color: var(--paper); background: var(--ink); }
.footer-brand img { width: 32px; height: 32px; }
.site-footer p { color: #bbc9cb; font-size: .85em; }

/* Built to extend Synthesia */
.synthesia-extension { background: var(--stone); }
.synthesia-extension__copy { max-width: 820px; }
.synthesia-lead { max-width: 720px; margin: 22px 0 0; color: var(--slate); font-size: 1.1875rem; }
.synthesia-link { margin: 22px 0 0; }
.synthesia-link .text-link, .comparison-link .text-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.synthesia-workflow { margin-top: 46px; }
.synthesia-workflow__desktop { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.synthesia-compatibility { max-width: 780px; margin: 26px 0 0; color: var(--slate); font-size: .9375rem; }
.synthesia-compatibility strong { color: var(--ink); }
.wf-stage { position: relative; padding: 0 0 26px 30px; }
.wf-stage::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: -6px; width: 2px; background: var(--ink); }
.wf-stage:last-child::before { display: none; }
.wf-stage::after { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; background: var(--ink); border-radius: 50%; }
.wf-stage--gold::before, .wf-stage--gold::after { background: var(--gold); }
.wf-kicker { margin: 0 0 4px; color: var(--slate); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.wf-stage strong { display: block; font-size: 1.0625rem; }
.wf-stage > p:last-child { margin: 4px 0 0; color: var(--slate); }

/* Built for a different job */
.comparison-section { background: var(--paper); }
.comparison-table-wrap { margin-top: 44px; overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; text-align: left; }
.comparison-table caption { text-align: left; }
.comparison-table th, .comparison-table td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.comparison-table thead th { color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; border-bottom: 2px solid var(--ink); }
.comparison-table tbody th { width: 24%; color: var(--ink); font-weight: 800; }
.comparison-table td { color: var(--slate); }
.comparison-table .col-quovia { background: rgba(22,51,59,.055); color: var(--ink); }
.comparison-table thead .col-quovia { border-bottom-color: var(--gold); }
.comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-summary-row th, .comparison-summary-row td { border-top: 2px solid var(--ink); color: var(--ink); font-weight: 700; }
.comparison-summary-row .col-quovia { border-top-color: var(--gold); }
.comparison-note { margin: 18px 0 0; color: var(--slate); font-size: .8125rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
#compare, #providers { scroll-margin-top: 88px; }

@media (max-width: 640px) {
  .synthesia-workflow__desktop { display: none; }
}
@media (max-width: 900px) {
  .comparison-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .comparison-table, .comparison-table tbody, .comparison-table tr, .comparison-table th, .comparison-table td { display: block; width: auto; }
  .comparison-table tr { margin-top: 18px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .comparison-table tbody th { width: auto; padding: 14px 16px; background: var(--stone); border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
  .comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .comparison-table tr td:last-child { border-bottom: 0; }
  .comparison-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--slate); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
  .comparison-summary-row th, .comparison-summary-row td { border-top: 0; }
}

#platform, #evidence, #security, #contact { scroll-margin-top: 88px; }

html[data-text-size="large"] { font-size: 125%; }
html[data-text-size="largest"] { font-size: 150%; }
html[data-contrast="true"] { --ink: #000; --petrol: #001a20; --paper: #fff; --slate: #202020; --line: #000; --gold: #ffd24d; }
html[data-contrast="true"] .light-grid .capability-number,
html[data-contrast="true"] .integration-grid .capability-number,
html[data-contrast="true"] .eyebrow.dark { color: #000; }
/* Secondary text on dark surfaces is hardcoded light-grey; lift it to white. */
html[data-contrast="true"] :is(.hero-detail, .section-intro, .capability-grid p, .trust-intro > p, .trust-facts p, .landing-hero__lead, .evidence-list span, .evidence-list time, .site-footer p, .intro-band__copy > p, .intro-band__meta) { color: #fff; }
html[data-contrast="true"] .status-pill { color: #fff; background: #003316; }
html[data-contrast="true"] .comparison-table .col-quovia { background: #e6f0f3; }
html[data-contrast="true"] .quovia-contact-form input::placeholder,
html[data-contrast="true"] .quovia-contact-form textarea::placeholder { color: #202020; }
html[data-reduce-colour="true"] {
  --ink: #111111;
  --petrol: #252525;
  --petrol-light: #3a3a3a;
  --stone: #eeeeee;
  --paper: #ffffff;
  --gold: #d8d8d8;
  --slate: #444444;
  --line: #999999;
  --success: #333333;
  --focus: #000000;
}
html[data-reduce-colour="true"] body,
body.csl-a11y-reduce-colour { filter: none !important; }
/* Greyscale the whole page at the layout-block level (not on body, which would
   break position: fixed children such as the accessibility menu). This also
   desaturates hardcoded colours that the token overrides above cannot reach. */
html[data-reduce-colour="true"] body :is(.site-header, main > *, .site-footer) { filter: grayscale(1); }

/* Both settings at once. They carry the same weight and reduced colour is written second, so on its
   own it silently replaced high contrast: a reader who needs both was handed the weaker of the two.
   Answering the pair explicitly wins on specificity and gives what both settings ask for at once,
   which is monochrome at maximum separation. */
html[data-contrast="true"][data-reduce-colour="true"] {
  /* Taken from the high-contrast values above with the hue removed, rather than driven to black.
     On these pages petrol is a dark SECTION BACKGROUND and gold is the text sitting on it, so a
     black gold is black on black: the hero loses its eyebrow and its lead paragraph entirely. */
  --ink: #000; --petrol: #111; --paper: #fff; --stone: #fff; --slate: #202020; --line: #000; --gold: #f2f2f2;
}
html[data-reduce-colour="true"] body :is(img, picture, video, canvas, iframe, svg) { filter: grayscale(1); }
html[data-reduce-colour="true"] .accessibility-menu,
html[data-reduce-colour="true"] .accessibility-menu * { filter: none !important; }
html[data-reduce-colour="true"] .status-pill { color: #111; background: #ddd; }
html[data-reduce-colour="true"] .contact-section .eyebrow.dark,
html[data-reduce-colour="true"] .light-grid .capability-number,
html[data-reduce-colour="true"] .integration-grid .capability-number { color: #111; }
html[data-reduce-colour="true"] .trust-mark { color: #fff; }
html[data-reduce-motion="true"] { scroll-behavior: auto; }
html[data-reduce-motion="true"] *, html[data-reduce-motion="true"] *::before, html[data-reduce-motion="true"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

/* Landing pages (Synthesia integration, Compare) */
.landing-hero { padding-block: 84px 74px; color: var(--paper); background: var(--petrol); }
.landing-hero h1 { max-width: 20ch; margin: 16px 0 0; font-size: clamp(2.25rem, 5vw, 3.4rem); }
.landing-hero__lead { max-width: 660px; margin: 22px 0 0; color: #dce5e5; font-size: 1.1875rem; }
.landing-hero__lead + .landing-hero__lead { margin-top: 14px; }
.landing-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }

/* Compact workflow strip (homepage teaser for the full Synthesia workflow) */
.wf-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 760px; margin: 34px 0 0; padding: 0; list-style: none; }
.wf-strip li { display: grid; gap: 2px; padding-top: 12px; border-top: 3px solid var(--ink); }
.wf-strip__stage { color: var(--ink); font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; }
.wf-strip__note { color: var(--slate); font-size: .875rem; }
.wf-strip .wf-strip__gold { border-top-color: var(--gold); }

.wf-detail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 40px 0 0; padding: 0; list-style: none; }
.wf-detail .wf-stage { padding: 18px 0 0; border-top: 3px solid var(--ink); }
.wf-detail .wf-stage--gold { border-top-color: var(--gold); }
.wf-detail .wf-stage::before, .wf-detail .wf-stage::after { content: none; }

.complementary-section { background: var(--paper); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 50px; padding: 1px; background: var(--line); }
.two-col__card { padding: 30px 32px; background: var(--stone); }
.two-col__card--quovia { background: rgba(22,51,59,.06); }
.two-col__card h3 { margin: 0 0 6px; }
.two-col__card ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.two-col__card li { position: relative; padding-left: 24px; color: var(--slate); }
.two-col__card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; background: var(--petrol); border-radius: 50%; }
.two-col__card--quovia li::before { background: var(--gold); }

.demo-section { background: var(--stone); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 40px; margin-top: 46px; align-items: center; }
.demo-grid__shot { max-width: none; margin: 0; }

/* Homepage product demonstration */
.product-shot { max-width: 980px; margin: 44px 0 0; }
.product-shot--narrow { max-width: 640px; }
.product-shot + .product-shot { margin-top: 36px; }
.product-shot__frame { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 34px rgba(14,35,41,.08); }
.product-shot__frame img { display: block; width: 100%; height: auto; }
.product-shot figcaption { margin-top: 14px; color: var(--slate); font-size: .9375rem; }

/* Homepage platform-model summary lines */
.model-lines { max-width: 640px; margin-top: 44px; }
.model-lines p { margin: 0 0 10px; color: var(--slate); }
.model-lines p strong { color: var(--ink); }
.model-lines .comparison-link { margin-top: 18px; }

/* Contact section pilot scope list */
.pilot-scope { margin: 16px 0 0; padding: 0 0 0 20px; columns: 2; column-gap: 34px; }
.pilot-scope li { margin-bottom: 7px; break-inside: avoid; }
.demo-note { margin: 24px 0 0; color: var(--slate); font-size: .8125rem; }
.partnership-cta { margin-top: 26px; }
.partnership-email { margin: 14px 0 0; color: var(--slate); font-size: .9375rem; }
.partnership-email strong { color: var(--ink); }

.compare-cards-section { background: var(--paper); }
.compare-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 50px; padding: 1px; background: var(--line); }
.compare-cards article { padding: 30px 28px; background: var(--stone); }
.compare-cards article h3 { margin: 0 0 10px; }
.compare-cards article p { margin: 0; color: var(--slate); }
.compare-cards__quovia { background: rgba(22,51,59,.06); border-top: 3px solid var(--gold); }
.keep-lms-section { background: var(--stone); }

.faq-section { background: var(--paper); }
.faq { margin-top: 42px; border-top: 1px solid var(--line); }
.faq-item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0 0 8px; font-size: 1.375rem; }
.faq-item p { max-width: 820px; margin: 0; color: var(--slate); font-size: 1.0625rem; }

.landing-cta-section { background: var(--gold); }
.landing-cta-section .eyebrow.dark { color: var(--ink); }
.landing-cta__lead { max-width: 720px; margin: 20px 0 0; color: var(--ink); font-size: 1.1875rem; }
.landing-cta__action { margin-top: 28px; }

.landing-disclaimer { padding-block: 30px; color: var(--slate); background: var(--paper); border-top: 1px solid var(--line); }
.landing-disclaimer p { margin: 0; font-size: .875rem; }

/* Slim "download the introduction" band (homepage). Dark petrol so it separates
   cleanly from the light sections above and below and reads as a CTA moment. */
.intro-band { color: var(--paper); background: var(--petrol); border-block: 1px solid #2c4a52; }
.intro-band .shell { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 44px; flex-wrap: wrap; }
.intro-band__copy { flex: 1 1 460px; max-width: 640px; }
.intro-band__copy .eyebrow.dark { color: var(--gold); }
.intro-band__copy h2 { margin: 0; font-size: 1.75rem; color: var(--paper); }
.intro-band__copy > p { margin: 10px 0 0; color: #dce5e5; }
.intro-band__meta { margin-top: 12px !important; color: #c9d5d6; font-size: .85rem; }
.intro-band__action { flex: 0 0 auto; }
.intro-actions { margin-top: 6px; }
@media (max-width: 640px) {
  .intro-band .shell { padding-block: 34px; gap: 22px; }
  .intro-band__action .button { width: 100%; }
}

/* Legal pages (Privacy, Cookies, Accessibility, Terms) on the Landing template */
.legal-section { background: var(--paper); }
.legal-prose { max-width: 768px; }
.legal-prose > p, .legal-prose > ul, .legal-prose > ol { margin: 0 0 18px; color: var(--ink); line-height: 1.72; }
.legal-prose h2 { margin: 42px 0 12px; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; color: var(--ink); }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose ul, .legal-prose ol { padding-left: 22px; }
.legal-prose li { margin-bottom: 8px; line-height: 1.6; }
.legal-prose a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-prose strong { font-weight: 700; }
.legal-prose code { padding: 1px 5px; font-size: .9em; background: var(--stone); border-radius: 3px; }
.legal-prose .qv-legal-meta { margin: 0 0 30px; padding: 12px 16px; color: var(--slate); font-size: .95rem; background: var(--stone); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; }
.legal-prose .qv-legal-note { margin: 0 0 18px; padding: 14px 16px; background: #f6f4ee; border: 1px solid var(--line); border-radius: 5px; }
.legal-prose .qv-legal-contact { margin-top: 44px; padding: 22px 24px; background: var(--stone); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 6px; }
.legal-prose .qv-legal-contact h2 { margin: 0 0 8px; font-size: 1.25rem; }
.legal-prose .qv-legal-contact p { margin: 0; line-height: 1.65; }
.legal-table-wrap { margin: 8px 0 22px; overflow-x: auto; }
.legal-prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .95rem; }
.legal-prose thead th { text-align: left; padding: 10px 12px; color: var(--paper); background: var(--ink); font-weight: 700; }
.legal-prose tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.legal-prose tbody tr:nth-child(even) td { background: #faf9f5; }

@media (min-width: 901px) and (max-width: 1180px) {
  .compare-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .demo-grid { grid-template-columns: 1fr; gap: 30px; }
  .compare-cards { grid-template-columns: 1fr; }
  .wf-detail { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .two-col, .wf-detail { grid-template-columns: 1fr; }
  .wf-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pilot-scope { columns: 1; }
}

@media (max-width: 900px) {
  .primary-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 8px 20px 16px;
    border-bottom: 1px solid rgba(15, 35, 41, .12);
    background: var(--paper, #fff);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .1);
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: 13px 2px; border-top: 1px solid rgba(15, 35, 41, .1); }
  .primary-nav a:first-child { border-top: 0; }
  .qv-nav-toggle { display: inline-flex; margin-left: auto; }
  .header-inner { position: relative; gap: 10px; }
  .header-actions { margin-left: 0; }
  /* On a phone the account actions (Sign in, Dashboard, Sign out) fold into the menu,
     so the header bar keeps one clear action: Book a walkthrough. Two buttons overflow. */
  /* Sign in (the primary account action) stays a visible button in the bar; only the
     wide "Book a walkthrough" CTA folds into the menu. The sign-out link (logged-in,
     non-primary) also folds in, so the bar keeps one small account button. */
  .header-cta { display: none; }
  .header-actions .account-signout { display: none; }
  .primary-nav .nav-account { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(15, 35, 41, .1); }
  .primary-nav .nav-account .nav-cta { margin-bottom: 6px; padding: 13px 16px; text-align: center; color: var(--ink); background: var(--gold); border-top: 0; border-radius: 6px; font-weight: 800; text-decoration: none; }
  .primary-nav .nav-account .nav-cta:hover { background: #e3b765; }
  .primary-nav .nav-account a { display: block; padding: 11px 2px; border-top: 0; font-weight: 700; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-copy, .evidence-preview { min-width: 0; }
  .evidence-preview { width: 100%; max-width: 680px; }
  .split-copy, .trust-intro { grid-template-columns: 1fr; gap: 38px; }
  .trust-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading-row { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
  .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .capability-grid article:nth-child(2) { border-right: 0; }
  .capability-grid article:nth-child(3), .capability-grid article:nth-child(4) { border-top: 1px solid #567076; }
  .capability-grid article:nth-child(3) { padding-left: 0; }
  .contact-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner, .footer-disclosure { grid-template-columns: 1fr; gap: 14px; padding-block: 26px; }
  .footer-disclosure .footer-line { grid-column: auto; }
}

@media (max-width: 640px) {
  .shell { width: min(calc(100% - 28px), var(--shell)); }
  body.quovia-public-home .site-header { position: sticky; }
  .header-inner { min-height: 66px; gap: 8px; }
  /* The brand book is explicit: the wordmark is the logo, 140px minimum on screen. */
  .header-inner > .brand { flex: 0 0 auto; min-width: 140px; font-size: 19px; gap: 8px; }
  .header-inner > .brand img { width: 30px; height: 30px; }
  .header-actions { min-width: 0; }
  .language-switcher { display: none; }
  /* "LMS administration" wrapped to two lines and doubled the header height. One
     line always; the wordmark yields first, then the label itself. */
  .header-actions .button { min-height: 40px; padding: 8px 12px; white-space: nowrap; }
  .header-actions { flex: 0 1 auto; }
  .header-inner > .brand { flex: 0 1 auto; overflow: hidden; }
  .public-account-actions { gap: 7px; }
  body.logged-in .public-account-actions .button { font-size: 0; }
  body.logged-in .public-account-actions .button::after { content: "Dashboard"; font-size: 1rem; }
  .accessibility-menu { bottom: 14px; left: 14px; }
  .accessibility-label { display: none; }
  .accessibility-menu summary { width: 44px; justify-content: center; padding: 8px; }
  .accessibility-panel { position: fixed; top: 14px; right: 14px; bottom: auto; left: 14px; width: auto; max-width: none; max-height: calc(100vh - 28px); border-radius: 6px; }
  body.admin-bar .accessibility-panel { top: 60px; max-height: calc(100vh - 74px); }
  .hero { min-height: auto; }
  .hero-grid { padding-block: 58px 42px; }
  h1 { font-size: 3rem; }
  h2 { font-size: 2.125rem; }
  .hero-statement { max-width: 100%; font-size: 1.6875rem; overflow-wrap: anywhere; }
  .hero-detail { font-size: 1.0625rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .quovia-contact-form-wrap { padding: 20px; box-shadow: 6px 6px 0 rgba(6, 22, 27, .14); }
  .quovia-contact-grid { grid-template-columns: 1fr; }
  .evidence-preview { max-width: 100%; box-shadow: 8px 8px 0 rgba(6,22,27,.25); }
  .evidence-list li { grid-template-columns: 12px 1fr; }
  .evidence-list time { grid-column: 2; }
  .section { padding-block: 68px; }
  .split-copy { grid-template-columns: minmax(0, 1fr); }
  .capability-grid { grid-template-columns: 1fr; }
  .trust-facts { grid-template-columns: 1fr; }
  .journey-steps { grid-template-columns: 1fr; gap: 28px; }
  .integration-grid { grid-template-columns: 1fr; }
  .delivery-grid { grid-template-columns: 1fr; }
  .capability-grid article, .capability-grid article:first-child, .capability-grid article:last-child { padding: 26px 0; border-right: 0; border-top: 1px solid #567076; }
  .capability-grid article:first-child { border-top: 0; }
  .site-footer nav { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .accessibility-menu, .hero-actions, .contact-actions { display: none !important; }
  .hero, .proof-section, .trust-section, .site-footer { color: #000; background: #fff; }
  .section { padding-block: 36px; }
}

/* Scroll reveal. The .reveal class is only ever added by reveal.js, so
   content is fully visible without JavaScript. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }
html[data-reduce-motion="true"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   Guided answers widget (assets/chat.js). Self-contained; bottom-right so it
   never collides with the accessibility menu (bottom-left).
--------------------------------------------------------------------------- */
.qchat { position: fixed; right: 20px; bottom: 20px; z-index: 99980; font-family: var(--font-body); }
.qchat__launcher { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 18px; color: var(--paper); background: var(--petrol); border: 2px solid var(--petrol); border-radius: 999px; box-shadow: 0 6px 20px rgba(14,35,41,.24); cursor: pointer; font-weight: 700; }
.qchat__launcher:hover { background: var(--petrol-light); border-color: var(--petrol-light); }
.qchat__launcher svg { width: 20px; height: 20px; fill: var(--gold); }
.qchat[data-open="true"] .qchat__launcher { display: none; }

.qchat__panel { position: absolute; right: 0; bottom: 0; width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px rgba(14,35,41,.28); transform-origin: bottom right; }
.qchat__panel[hidden] { display: none; }
.qchat[data-open="true"] .qchat__panel { animation: qchat-in .18s ease; }
.qchat[data-reduce="true"] .qchat__panel { animation: none; }
@keyframes qchat-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.qchat__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: var(--paper); background: var(--petrol); }
.qchat__title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.qchat__close { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--paper); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.qchat__close:hover { background: rgba(255,255,255,.14); }

.qchat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.qchat__log:focus { outline: none; }
.qchat__msg { max-width: 88%; }
.qchat__msg p { margin: 0; padding: 11px 14px; border-radius: 12px; line-height: 1.5; font-size: .9375rem; }
.qchat__msg--bot { align-self: flex-start; }
.qchat__msg--bot p { color: var(--ink); background: var(--stone); border-bottom-left-radius: 4px; }
.qchat__msg--user { align-self: flex-end; }
.qchat__msg--user p { color: var(--paper); background: var(--petrol); border-bottom-right-radius: 4px; }

.qchat__opts { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.qchat__opt { max-width: 100%; text-align: left; padding: 9px 14px; color: var(--petrol); background: var(--paper); border: 1.5px solid var(--petrol); border-radius: 999px; cursor: pointer; font-weight: 650; font-size: .875rem; text-decoration: none; }
.qchat__opt:hover { color: var(--paper); background: var(--petrol); }
.qchat__opt--link { display: inline-block; }
.qchat__opts[data-done="true"] .qchat__opt { opacity: .45; pointer-events: none; }
.qchat__opt:disabled { opacity: .45; pointer-events: none; }

.qchat__freeform { align-self: stretch; }
.qchat__freeform-label { display: block; margin-bottom: 6px; font-size: .8125rem; font-weight: 700; color: var(--slate); }
.qchat__freeform-row { display: flex; gap: 8px; }
.qchat__freeform input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; }
.qchat__freeform input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--petrol); }

.qchat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fbfaf7; }
.qchat__foot-btn { padding: 0; color: var(--petrol); background: transparent; border: 0; cursor: pointer; font-weight: 700; font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }
.qchat__foot-btn:hover { color: var(--ink); }
.qchat__restart { margin-left: auto; padding: 0; color: var(--slate); background: transparent; border: 0; cursor: pointer; font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .qchat { right: 12px; bottom: 12px; }
  .qchat__panel { width: calc(100vw - 24px); height: calc(100vh - 90px); }
}

/* Below this width the wordmark cannot meet its minimum beside a menu button and an
   action, so the mark stands alone rather than being squeezed under it. */
@media (max-width: 359px) {
  .header-inner > .brand { min-width: 0; }
  .header-inner > .brand span { display: none; }
}

/* ============================================================
   Homepage v3.1 (frozen narrative). New components only; existing
   section classes (problem, proof, trust, contact) are reused as is.
   ============================================================ */
.hero-note { margin: 14px 0 0; color: rgba(255, 255, 255, .72); font-size: .95rem; }

/* Assurance strip, understated, directly beneath the hero */
.assurance-strip { padding: 18px 0; background: var(--stone); border-bottom: 1px solid var(--line); }
.assurance-strip__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.assurance-strip__label { margin: 0; color: var(--slate); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.assurance-strip__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.assurance-strip__items li { display: flex; align-items: center; }
.assurance-strip__items li:not(:first-child)::before { content: "\00B7"; margin: 0 8px 0 0; color: var(--gold); font-weight: 800; }
.assurance-strip__items a { color: var(--ink); font-size: .95rem; font-weight: 650; text-decoration: none; }
.assurance-strip__items a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* How, four pillars on a light ground, with a full width Connect layer beneath */
.how-section { background: var(--paper); }
.how-section .section-intro { color: var(--slate); }
.connect-bar { margin: 1px 0 0; padding: 26px 32px; color: var(--paper); background: var(--petrol); font-family: var(--font-display); font-size: 1.2rem; line-height: 1.4; }

/* Chain, the defining brand component, on a dark ground */
.chain-section { color: var(--paper); background: var(--petrol); }
.chain-section h2 { color: var(--paper); }
.governed-chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 30px; margin: 48px 0 0; padding: 0; list-style: none; }
.governed-chain li { position: relative; }
.governed-chain li a { display: flex; align-items: center; justify-content: center; min-height: 68px; padding: 14px 16px; color: var(--ink); background: var(--stone); border-top: 3px solid var(--gold); font-weight: 650; font-size: .96rem; line-height: 1.3; text-align: center; text-decoration: none; }
.governed-chain li a:hover { background: var(--paper); }
.governed-chain > li::after { content: "\2192"; position: absolute; top: 50%; right: -21px; transform: translateY(-50%); color: var(--gold); font-weight: 800; }
.governed-chain > li:nth-child(4n)::after,
.governed-chain > li:last-child::after { content: none; }
/* How it works has nine links: three even columns keep it balanced, with no orphan node.
   The homepage teaser has eight and keeps four columns. */
.governed-chain--wide { grid-template-columns: repeat(3, 1fr); }
.governed-chain.governed-chain--wide > li::after { content: "\2192"; position: absolute; top: 50%; right: -21px; transform: translateY(-50%); color: var(--gold); font-weight: 800; }
.governed-chain.governed-chain--wide > li:nth-child(3n)::after,
.governed-chain.governed-chain--wide > li:last-child::after { content: none; }
.chain-note { max-width: 820px; margin: 34px 0 0; color: #d4dfe0; font-size: 1.0625rem; }

/* Systems, compact architecture strip on a light ground */
.systems-section { background: var(--stone); }
.systems-section .eyebrow.dark { margin-bottom: 6px; }
.systems-section > .shell > h2 { margin-bottom: 40px; }
.architecture-strip { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--gold); }
.architecture-strip ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.architecture-strip__systems li { flex: 1 1 120px; padding: 12px 10px; background: var(--stone); border: 1px solid var(--line); text-align: center; }
.architecture-strip__systems li span { display: block; font-weight: 700; }
.architecture-strip__systems li small { display: block; margin-top: 2px; color: var(--slate); font-size: .78rem; }
.architecture-strip__core { margin: 0 0 12px; padding: 16px; color: var(--paper); background: var(--petrol); text-align: center; font-family: var(--font-display); font-size: 1.3rem; }
.architecture-strip__core small { display: block; margin-top: 3px; color: rgba(255, 255, 255, .78); font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.architecture-strip__content { margin-bottom: 0; }
.architecture-strip__content li { flex: 1 1 80px; padding: 9px 10px; background: var(--stone); border: 1px solid var(--line); text-align: center; color: var(--slate); font-size: .9rem; }

/* Pilot, a light closing statement before the gold CTA */
.pilot-section { background: var(--stone); }
.pilot-section .section-intro { color: var(--slate); }
.pilot-section > .shell > p:last-child { margin: 30px 0 0; }

/* Single column contact CTA (the form now lives on the Contact page) */
.contact-inner--single { display: block; }
.contact-inner--single > div { max-width: 720px; }
.contact-inner--single p { margin-top: 18px; }

/* Dark section text corrections for the reused split-copy component */
.proof-section .lead-copy, .proof-section .lead-copy p { color: #d4dfe0; }
.proof-section .pull-quote { color: var(--paper); }
.trust-section .lead-copy, .trust-section .lead-copy p { color: #d4dfe0; }
.chain-section .text-link, .proof-section .text-link, .trust-section .text-link { color: var(--gold); }

/* Justified body prose with hyphenation so it does not river. Headings, eyebrows,
   buttons and the centred CTAs are left out below. */
.hero-detail, .lead-copy p, .section-intro, .chain-note { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; }

/* Closing CTAs are centred columns matched to the belief-section measure (720) */
.pilot-section .shell { max-width: 760px; text-align: center; }
.pilot-section .section-intro { max-width: 720px; margin-inline: auto; text-align: center; text-align-last: center; }
.pilot-section > .shell > p:last-child { text-align: center; }
.contact-inner--single { display: block; max-width: 760px; margin-inline: auto; text-align: center; }
.contact-inner--single > div { max-width: none; }
.contact-inner--single p { max-width: 720px; margin-inline: auto; text-align: center; text-align-last: center; }

@media (max-width: 720px) {
  .governed-chain, .governed-chain--wide { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .governed-chain > li::after, .governed-chain.governed-chain--wide > li::after { content: none; }
  .connect-bar { font-size: 1.05rem; padding: 20px 22px; }
  .pilot-section .shell, .contact-inner--single { max-width: none; }
}

/* ============================================================
   v3.1 unified section rhythm: every section header is centred, and
   the belief sections are a centred reading column (heading above a
   justified body, no empty quadrant, no empty half).
   ============================================================ */
/* Tighter vertical rhythm so sections do not read as empty */
.section { padding-block: 78px; }

/* Centre the heading BOX (not just its text): a global heading max-width leaves a
   default left margin, which pinned every "centred" heading to the left. */
.prose-block { max-width: 760px; }
.prose-block > .eyebrow { text-align: center; }
.prose-block > h2 { text-align: center; text-wrap: balance; margin-inline: auto; max-width: none; }
.prose-block > .lead-copy { max-width: 720px; margin: 26px auto 0; }
.prose-block > .lead-copy p { text-align: justify; text-align-last: left; }
.prose-block > .lead-copy .pull-quote { text-align: left; text-align-last: left; }
.prose-block > .lead-copy p:has(> a.text-link) { text-align: center; }

.how-section > .shell > h2,
.chain-section > .shell > h2,
.systems-section > .shell > h2 { text-align: center; text-wrap: balance; margin-inline: auto; max-width: 780px; }
.how-section > .shell > .section-intro,
.chain-section > .shell > .section-intro { margin-inline: auto; text-align: center; text-align-last: center; }
.chain-section .chain-note { margin-inline: auto; text-align: center; text-align-last: center; }
.systems-section > .shell > .eyebrow { text-align: center; }
.systems-section > .shell > h2 { margin-bottom: 40px; }

/* ============================================================
   Motion polish: restrained hover micro-interactions. All transitions are
   neutralised under prefers-reduced-motion and the accessibility panel by the
   global reduced-motion rules, so this adds life without a vestibular cost.
   ============================================================ */
.button { transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
.button:hover { transform: translateY(-1px); }
.governed-chain li a { transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.governed-chain li a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(6, 22, 27, .22); }
.light-grid article { transition: background .2s ease; }
.light-grid article:hover { background: #faf8f2; }
.assurance-strip__items a { transition: color .16s ease; }
.text-link { transition: color .16s ease; }

/* Accessibility panel, High contrast: lift the new components' secondary text on dark
   surfaces to full white. (Text size follows the root font scale via rem, and Reduce
   colour is covered by the grayscale layer on main, so both already reach these parts.) */
html[data-contrast="true"] :is(
  .chain-note,
  .hero-note,
  .architecture-strip__core small,
  .trust-section .lead-copy, .trust-section .lead-copy p,
  .proof-section .lead-copy, .proof-section .lead-copy p
) { color: #fff; }

/* ============================================================
   v3.1 marketing footer (shared template part). Multi-column, left aligned
   within the centred shell. Header primary CTA.
   ============================================================ */
/* Light belief section, used across the homepage and inner pages. Was relying on the
   default body background; make it explicit so inner pages render it reliably white. */
.problem-section, .inclusion-section { background: var(--paper); }

.header-cta { padding-block: 9px; }
.footer-columns { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; padding-block: 54px 28px; }
.footer-brand-col .footer-brand { margin-bottom: 14px; }
.footer-brand-col p { max-width: 360px; margin: 0; color: #b7c6c8; font-size: .9rem; line-height: 1.6; }
.footer-col__label { margin: 0 0 14px; color: #8ea3a6; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.footer-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-col a { color: #dfe8e9; font-size: .95rem; text-decoration: none; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.footer-closing { padding-block: 26px 6px; border-top: 1px solid #365158; }
.footer-closing .footer-line { margin: 0; color: var(--paper); font-family: var(--font-display); font-size: 1.15rem; }
/* The two floating controls sit stacked in the bottom-left corner (consent, then accessibility)
   and the chat in the bottom-right, roughly 124px tall at their tallest. With 42px below the
   legal block, the last thing on every page - the trading disclosure and the manual link - was
   what they covered. 144px keeps the foot of the page clear of all three at every width. */
.footer-legal { padding-block: 12px 144px; }
.footer-util { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; }
.footer-util a { color: #8ea3a6; font-size: .8rem; text-decoration: none; }
.footer-util a:hover, .footer-util a:focus-visible { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal p { max-width: 940px; margin: 0; color: #8ea3a6; font-size: .8rem; line-height: 1.6; }
html[data-contrast="true"] :is(.footer-brand-col p, .footer-col a, .footer-legal p, .footer-col__label) { color: #fff; }

@media (max-width: 720px) {
  /* Brand tagline full width, then the two link columns side by side so the footer
     fills the phone screen rather than one tall single column. */
  .footer-columns { grid-template-columns: 1fr 1fr; gap: 30px 24px; padding-block: 40px 24px; }
  .footer-brand-col { grid-column: 1 / -1; }
}

/* The consent control sits in the footer list beside Privacy, Cookies and Terms. It is a button,
   because it opens the preference dialog rather than going anywhere, so it needs the browser's
   button styling removed before it can pass for one of the links around it. */
.quovia-cookie-preferences {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #dfe8e9;
  font-size: .95rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.quovia-cookie-preferences:hover,
.quovia-cookie-preferences:focus-visible { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }

/* Company details on the Contact page: a labelled card, one row per way of reaching us, in the
   same card vocabulary as the evidence preview on the home page (hairline rows, gold rule on
   top). <address> is the right element and browsers italicise it by default, which reads as an
   aside; this is the most concrete thing on the page. Light palette by default; the dark one
   applies where the card sits, on the petrol band. */
.qv-company-details { font-style: normal; margin: 24px 0 0; border: 1px solid var(--line); border-top: 4px solid var(--gold); background: var(--paper); color: var(--ink); }
.qv-company-details__list { margin: 0; }
.qv-company-details__row { display: grid; grid-template-columns: 8rem 1fr; gap: 4px 24px; align-items: baseline; padding: 16px 24px; border-top: 1px solid var(--line); }
.qv-company-details__row:first-child { border-top: 0; }
.qv-company-details dt { margin: 0; color: var(--gold); font-size: .78em; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.qv-company-details dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; text-align: left; }
.qv-company-details dd strong { display: block; font-family: var(--font-display); font-size: 1.125em; font-weight: 700; }
.qv-company-details a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.trust-section .qv-company-details { border-color: rgba(255,255,255,.3); border-top-color: var(--gold); background: #102a31; color: var(--paper); }
.trust-section .qv-company-details__row { border-top-color: rgba(255,255,255,.13); }
.trust-section .qv-company-details a { color: var(--paper); }
.trust-section .qv-company-details a:hover, .trust-section .qv-company-details a:focus-visible { color: var(--gold); }
@media (max-width: 600px) {
  .qv-company-details__row { grid-template-columns: 1fr; gap: 4px; padding: 16px; }
}
@media print {
  .qv-company-details, .trust-section .qv-company-details { border-color: #000; background: #fff; color: #000; }
  .trust-section .qv-company-details a { color: #000; }
}