/* ============================================================
   Quick Mortgages — homepage ("Warm" direction)
   Implemented from: Quick Mortgages Home - Warm.dc.html
   ============================================================ */

/* ---- Self-hosted typeface ----------------------------------
   Figtree, served from this origin instead of fonts.googleapis.com.

   Loading it from Google sent every visitor's IP address to Google on
   every page load, with no consent asked and nothing in the cookie policy
   covering it. Self-hosting removes that transfer, and is also faster: two
   DNS lookups, a TLS handshake and a render-blocking stylesheet request
   all disappear.

   Figtree is a variable font, so all five weights below are the same two
   files - one latin, one latin-ext - downloaded once. The blocks are kept
   separate per weight, exactly as Google served them, so rendering matches
   what the site had before.

   The unicode-range values are load-bearing: they let the browser skip
   latin-ext entirely on a page with no accented characters. Do not remove
   them to tidy up.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design tokens ---------------------------------------- */
:root {
  /* Brand */
  --navy:        #0A2540;
  --navy-deep:   #04202F;
  --cyan:        #00B2E3;
  --cyan-light:  #62D8F7;
  --teal:        #00637F;
  --teal-deep:   #04303F;

  /* Warm neutrals */
  --cream:       #FBFAF8;
  --sand:        #F2EEE6;
  --sand-soft:   #F1EDE5;
  --surface:     #FFFFFF;
  --img-bg:      #EBE6DD;
  --input-bg:    #FAF8F4;

  /* Lines */
  --line:        #E7E2DA;
  --line-header: #E9E4DC;
  --line-strong: #DED8CE;

  /* Text */
  --ink:         #2B2620;
  --ink-2:       #4A443C;
  --ink-3:       #67615A;

  --gold:        #F5A623;

  /* Layout */
  --wrap:        1240px;
  --gutter:      28px;
  --radius-card: 22px;

  --shadow-card: 0 18px 38px rgba(10, 37, 64, 0.10);
  --shadow-pop:  0 20px 44px rgba(10, 37, 64, 0.16);

  --ease:        cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-family: inherit; }
p { margin: 0; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

/* The UA stylesheet's [hidden] { display: none } is a *user-agent* rule, so
   ANY author `display` beats it — and most of the things we hide and show
   from script carry a class that sets one. It has caught us twice now: the
   consent options panel and Save button on first load, and the /events/
   confirmation message, which sat under the form it was supposed to replace.
   Both were invisible in review because they only show up on a cold load.
   Restore the intent once, globally, rather than per component. */
[hidden] { display: none !important; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--navy); }

input, select, button, textarea { font: inherit; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.qm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
}
.qm-skip:focus { left: 0; color: #fff; }

/* ---- Shared layout ---------------------------------------- */
.qm-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
}

.qm-section { padding: 104px var(--gutter) 0; }
.qm-section--news { padding-top: 84px; }

.qm-section__head {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.qm-grid { display: grid; gap: 20px; }
.qm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- Typography ------------------------------------------- */
.qm-h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--navy);
  text-wrap: balance;
}
.qm-h2--tight   { max-width: 620px; }
.qm-h2--narrow  { max-width: 560px; }
.qm-h2--on-navy { color: #fff; margin-top: 14px; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; }
.qm-h2--on-cyan { color: var(--navy-deep); font-size: clamp(30px, 3.6vw, 48px); line-height: 1; letter-spacing: -0.04em; }

.qm-h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 14px;
}
.qm-h3--lg { font-size: 22px; letter-spacing: -0.025em; margin-top: 12px; }

.qm-h4 {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.qm-lede {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.qm-lede--on-navy {
  margin-top: 12px;
  font-size: 17.5px;
  color: rgba(255, 255, 255, 0.74);
  max-width: 520px;
}

.qm-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.qm-eyebrow--loose   { letter-spacing: 0.06em; }
.qm-eyebrow--on-navy { letter-spacing: 0.14em; color: var(--cyan-light); }

.qm-morelink {
  font-size: 16px;
  font-weight: 700;
  color: var(--teal);
}
.qm-morelink:hover { color: var(--navy); }

.qm-stars {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 2px;
}
.qm-stars--sm { font-size: 12px; letter-spacing: 1px; }

/* ---- Buttons ----------------------------------------------- */
.qm-btn {
  display: inline-block;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.qm-btn--sm { padding: 12px 20px; font-size: 14.5px; font-weight: 700; }
.qm-btn--lg { padding: 18px 32px; font-size: 17px; letter-spacing: -0.01em; }

.qm-btn--navy { background: var(--navy); color: #fff; }
.qm-btn--navy:hover { background: var(--cyan); color: var(--navy-deep); }

.qm-btn--cyan { background: var(--cyan); color: var(--navy-deep); }
.qm-btn--cyan:hover { background: var(--navy); color: #fff; }

.qm-btn--outline {
  background: var(--surface);
  color: var(--navy);
  border-color: var(--line-strong);
  font-weight: 700;
}
.qm-btn--outline:hover { border-color: var(--navy); color: var(--navy); }

.qm-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* ---- Announcement bar --------------------------------------
   Sized on purpose. At ~44px this sits mid-band for a promo strip
   (36-48px is the usual range) and reads as a deliberate bar rather
   than a stripe, without crowding the hero: it is NOT sticky, so the
   height is paid once and scrolls away. Below 680px the sentence wraps
   to three lines and the bar overtakes the header, so the type tightens
   there instead. */
.qm-announce {
  background: var(--navy);
  padding: 13px var(--gutter);
}
.qm-announce__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}
.qm-announce__text {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.qm-announce__link {
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan-light);
}
.qm-announce__link:hover { color: #fff; }

/* ---- Header ------------------------------------------------ */
.qm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 248, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-header);
}
.qm-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.qm-logo {
  position: relative;
  display: block;
  width: 186px;
  height: 28.6px;   /* 760 × 117 artwork, scaled */
  flex: none;
}
.qm-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.qm-logo__word { animation: qmWord 0.7s var(--ease) 0.2s both; }
.qm-logo__chev { animation: qmChev 0.9s cubic-bezier(0.16, 0.9, 0.24, 1) both; }

.qm-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 10px;
}

.qm-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.qm-nav__link {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.qm-nav__link:hover { color: var(--navy); }
.qm-nav__link.is-current { color: var(--navy); font-weight: 700; }
.qm-nav__link.is-current:hover { color: var(--teal); }

.qm-header__tel {
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
.qm-header__tel:hover { color: var(--teal); }

/* Burger — hidden until the nav no longer fits */
.qm-burger {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 42px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  cursor: pointer;
}
.qm-burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.22s var(--ease), opacity 0.16s ease;
}
.qm-burger[aria-expanded="true"] .qm-burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.qm-burger[aria-expanded="true"] .qm-burger__bar:nth-child(2) { opacity: 0; }
.qm-burger[aria-expanded="true"] .qm-burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Hero -------------------------------------------------- */
.qm-hero { padding: 76px var(--gutter) 0; }
.qm-hero__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 56px;
  align-items: center;
}

.qm-hero__title {
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--navy);
  text-wrap: balance;
}
.qm-hero__title-light { font-weight: 400; }

.qm-hero__lede {
  margin-top: 26px;
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 540px;
  text-wrap: pretty;
}

.qm-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 38px;
}
.qm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
}

.qm-hero__media { position: relative; }

/* Signature asymmetric frames */
.qm-shape {
  overflow: hidden;
  background: var(--img-bg);
}
.qm-shape img { width: 100%; height: 100%; object-fit: cover; }

.qm-shape--a {
  border-radius: 140px 28px 140px 28px;
  aspect-ratio: 1 / 1;
}
.qm-shape--b {
  border-radius: 28px 140px 28px 140px;
  aspect-ratio: 5 / 4;
}
.qm-shape--b img { object-position: 50% 40%; }

.qm-quotecard {
  position: absolute;
  left: -18px;
  bottom: -18px;
  right: 32px;
  margin: 0;
  background: var(--surface);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: var(--shadow-pop);
}
.qm-quotecard__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--navy);
}

/* ---- Cards ------------------------------------------------- */
.qm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px;
}
.qm-card__text {
  margin-top: 9px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.qm-card--link {
  display: block;
  color: var(--navy);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.qm-card--link:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-card);
  color: var(--navy);
  transform: translateY(-2px);
}

/* ---- Fees -------------------------------------------------- */
.qm-fees {
  margin-top: 104px;
  background: var(--sand);
  padding: 88px var(--gutter) 92px;
}
.qm-fees .qm-wrap { max-width: var(--wrap); }
.qm-fees__head { max-width: 620px; }
.qm-fees__grid { margin-top: 36px; }

.qm-fee__price {
  font-size: clamp(40px, 4.4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--navy);
  line-height: 1;
}
.qm-fee .qm-card__text { margin-top: 7px; }

.qm-fee--accent {
  background: var(--cyan);
  border-color: var(--cyan);
}
.qm-fee--accent .qm-fee__price,
.qm-fee--accent .qm-h3 { color: var(--navy-deep); }
.qm-fee--accent .qm-card__text { color: var(--teal-deep); }

/* ---- Services ---------------------------------------------- */
.qm-services__grid { margin-top: 36px; }
.qm-service { padding: 28px; }
.qm-service .qm-card__text { line-height: 1.55; }

.qm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.qm-tag {
  background: var(--sand-soft);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

/* ---- Rates ------------------------------------------------- */
.qm-rates {
  margin-top: 104px;
  background: var(--navy);
  padding: 56px var(--gutter) 52px;
}
.qm-rates__panel {
  margin-top: 28px;
  background: var(--surface);
  border-radius: 18px;
  /* No padding of its own. This card IS the surface — the finder and the
     table sit flush inside it. It used to add 18px all round on top of the
     form's own 20px and the table panel's 18px, stacking three white cards
     inside one another for 112px of vertical padding and no visual gain. */
  padding: 0;
  overflow: hidden;
}

/* The head's call to action, plus the link through to the full table.
   That link lived in a footnote under the band until the footnote was
   removed; it stays because it is the only internal route to
   /best-buys/, and up here it costs no height. */
.qm-rates__cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.qm-rates__more {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cyan-light);
  white-space: nowrap;
}
.qm-rates__more:hover { color: #fff; }

/* ---- Team / how we work ------------------------------------ */
.qm-team {
  background: var(--sand);
  padding: 92px var(--gutter) 96px;
}
.qm-team__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}

.qm-featgrid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 32px;
}
.qm-feat {
  border-top: 2px solid var(--line-strong);
  padding-top: 14px;
}
.qm-feat--lead { border-top-color: var(--navy); }
.qm-feat__text {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}
.qm-team__cta { margin-top: 34px; font-size: 16.5px; font-weight: 700; }

/* ---- Reviews ----------------------------------------------- */
.qm-reviews__grid { margin-top: 36px; }
.qm-review { margin: 0; }
.qm-review__quote {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.qm-review__by {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.qm-review__by span { font-weight: 500; color: var(--ink-3); }

/* ---- Rolling reviews ---------------------------------------
   The strip holds all 54 reviews twice over (site.js clones the track), and
   is moved with a transform rather than scrollLeft so the motion stays on
   the compositor.

   Why the container is scrollable rather than overflow:hidden by default:
   that is the no-JS and reduced-motion state, and a strip you cannot move
   is a strip whose reviews you can never read. site.js adds .is-rolling,
   which swaps it to hidden, only once it is actually driving the animation. */
.qm-marquee {
  margin-top: 36px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.qm-marquee::-webkit-scrollbar { display: none; }

.qm-marquee.is-rolling {
  overflow: hidden;
  /* Fade the cards into the gutters instead of guillotining them at the
     edge. Sized in px so it stays a hairline of fade on a phone. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.qm-marquee__track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

.qm-marquee .qm-review {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
}

/* Reviews run from 17 to 2057 characters. Clamping the quote is what keeps
   the strip a straight line rather than a skyline; the card grows to the
   clamp and stops, and .qm-review__by is pushed to the foot by margin-top
   auto so the names align across every card regardless of quote length. */
.qm-marquee .qm-review__quote {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
}
.qm-marquee .qm-review__by { margin-top: auto; padding-top: 20px; }

@media (max-width: 680px) {
  .qm-marquee .qm-review { flex-basis: 280px; }
  .qm-marquee.is-rolling {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}

/* ---- News -------------------------------------------------- */
.qm-news__grid { margin-top: 36px; }

.qm-article {
  padding: 0;
  overflow: hidden;
}
.qm-article__media {
  aspect-ratio: 16 / 10;
  background: var(--img-bg);
}
.qm-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qm-article__body { padding: 24px; }
.qm-article__title {
  margin-top: 10px;
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

/* ---- Lead article ------------------------------------------
   The newest piece, run once at full width above the grid, the way a front
   page carries its top story. It sits OUTSIDE .qm-news__grid rather than
   spanning it, so the grid below is a clean nine and the two do not have to
   agree about column counts at every breakpoint. */
.qm-article--lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  margin-top: 36px;
}
.qm-article--lead .qm-article__media {
  aspect-ratio: auto;          /* the row height comes from the copy instead */
  height: 100%;
  min-height: 300px;
}
.qm-article--lead .qm-article__body {
  align-self: center;
  padding: 40px;
}
.qm-article--lead .qm-article__title {
  margin-top: 12px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.12;
}
.qm-article--lead .qm-article__excerpt {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.65;
}

/* Marks the lead as the newest without a second heading level competing
   with the article title for attention. */
.qm-article__flag {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--navy-deep);
  font-weight: 800;
  letter-spacing: 0.08em;
}

@media (max-width: 860px) {
  .qm-article--lead { grid-template-columns: minmax(0, 1fr); }
  .qm-article--lead .qm-article__media { aspect-ratio: 16 / 10; min-height: 0; }
  .qm-article--lead .qm-article__body { padding: 26px 24px 28px; }
}

/* ---- Don't strand one card on its own row ------------------
   Ten cards in three columns leaves 3 + 3 + 3 + 1, and that last card alone
   against a two-column gap reads as a mistake. Handled here rather than by
   forcing the article count per page, because a count that divides neatly
   by three strands a card at two columns instead - the breakpoint moves, so
   the fix has to move with it.

   Only the single orphan is worth correcting. A last row of two is a row,
   not a loose end. */
.qm-news__grid > .qm-article:last-child:nth-child(3n + 1) { grid-column: 2; }

@media (max-width: 980px) {
  /* Two columns: there is no middle to move it to, so it takes the width of
     the row instead. */
  .qm-news__grid > .qm-article:last-child:nth-child(3n + 1) { grid-column: auto; }
  .qm-news__grid > .qm-article:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
  .qm-news__grid > .qm-article:last-child:nth-child(2n + 1) .qm-article__media {
    aspect-ratio: 21 / 9;
  }
}

@media (max-width: 680px) {
  /* One column: every row is full, nothing to correct. */
  .qm-news__grid > .qm-article:last-child { grid-column: auto; }
  .qm-news__grid > .qm-article:last-child .qm-article__media { aspect-ratio: 16 / 10; }
}

/* ---- Pencil-stroke dividers -------------------------------- */
.qm-strokes { position: relative; }
.qm-strokes i {
  position: absolute;
  left: var(--l);
  width: var(--w);
  top: var(--t);
  height: var(--h);
  border-radius: 999px;
  transform: rotate(var(--r));
  background: linear-gradient(90deg,
    rgba(10, 37, 64, 0) 0%,
    rgba(10, 37, 64, var(--o1)) 18%,
    rgba(10, 37, 64, var(--o2)) 74%,
    rgba(10, 37, 64, 0) 100%);
}
.qm-strokes--short { height: 13px; width: 190px; margin-top: 16px; }
.qm-strokes--full  { height: 17px; }

.qm-divider { padding: 100px var(--gutter) 0; }
.qm-section--news + .qm-divider { padding-top: 100px; }

/* ---- Contact ----------------------------------------------- */
/* ---- Call-back CTA band (homepage) ---------------------------- */
/* Named .qm-callback, NOT .qm-contact. It used to be .qm-contact, which
   collided with the named-adviser card of the same name further down this
   file: that card sets display:grid with a 128px first column, so it won a
   straight specificity tie on source order and squeezed this section's
   .qm-wrap to 144px on a 1280px viewport. The band still carries
   id="contact" — every #contact anchor on the site points at it. */
.qm-callback { padding: 88px var(--gutter) 0; }
.qm-callback__panel {
  background: var(--cyan);
  border-radius: 28px 28px 28px 140px;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}
.qm-callback__lede {
  margin-top: 18px;
  font-size: 18.5px;
  line-height: 1.5;
  color: var(--teal-deep);
  font-weight: 500;
  max-width: 460px;
  text-wrap: pretty;
}
.qm-callback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  align-items: center;
}
.qm-callback__actions .qm-btn--navy:hover { background: #fff; color: var(--navy); }
.qm-callback__email {
  color: var(--navy-deep);
  font-size: 17px;
  font-weight: 700;
  border-bottom: 2px solid rgba(4, 32, 47, 0.35);
  padding-bottom: 3px;
}
.qm-callback__email:hover {
  color: var(--navy-deep);
  border-bottom-color: var(--navy-deep);
}

/* ---- Form -------------------------------------------------- */
.qm-form {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 28px;
  display: grid;
  gap: 16px;
}
.qm-field { display: grid; gap: 7px; min-width: 0; }
.qm-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.qm-input {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 14px 15px;
  font-size: 16px;
  color: var(--navy);
  background: var(--input-bg);
  outline: none;
  width: 100%;
  min-width: 0;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.qm-input:focus {
  border-color: var(--cyan);
  background: var(--surface);
}
.qm-input:focus-visible { outline: none; }
.qm-select { appearance: none; cursor: pointer; }
/* Inherits .qm-input for border, focus ring and colours; only the things a
   single-line input cannot express belong here. Resize is vertical-only:
   a textarea dragged sideways breaks out of the form panel it sits in. */
.qm-textarea {
  display: block;
  resize: vertical;
  min-height: 96px;
  line-height: 1.55;
}
.qm-form__submit { border-radius: 999px; padding: 16px 24px; font-size: 16.5px; }
.qm-form__submit:hover { background: var(--navy-deep); color: #fff; }
.qm-form__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
/* First name / last name sit two-up on desktop, stacked on narrow screens. */
.qm-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: 0;
}

/* Spam trap. Positioned off-screen rather than display:none — some bots skip
   fields that are display:none, and this way it stays in the accessibility
   tree as an ordinary (if oddly placed) field. aria-hidden + tabindex="-1"
   on the markup keep real users away from it.

   Being laid out, even off-screen, is exactly why autofill can reach it —
   which is why the field's NAME has to be meaningless. Hiding it is not, on
   its own, protection against autofill. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Invalid field, marked by form.js after a submit attempt. Never colour
   alone — it is always paired with the message in .field__error. */
.qm-input[aria-invalid="true"] {
  border-color: #C0392B;
  background: #FDF4F3;
}

/* Per-field error message. */
.field__error {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #C0392B;
}

/* Form-level error message above the button. */
.form-error {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #C0392B;
}

/* ---- Footer ------------------------------------------------ */
.qm-footer {
  margin-top: 108px;
  background: var(--navy);
  padding: 68px var(--gutter) 40px;
  color: rgba(255, 255, 255, 0.7);
}
.qm-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 0.9fr);
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.qm-footer__logo { width: 230px; height: auto; }
.qm-footer__blurb {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 340px;
}
.qm-footer__h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.qm-footer__list {
  margin-top: 18px;
  display: grid;
  gap: 11px;
}
.qm-footer__list a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15.5px;
}
.qm-footer__list a:hover { color: var(--cyan-light); }
.qm-footer__tel {
  color: #fff !important;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.qm-footer__tel:hover { color: var(--cyan-light) !important; }
.qm-footer__addr {
  margin-top: 11px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.qm-riskbox {
  margin-top: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 20px 22px;
}
.qm-riskbox__warn {
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 700;
  color: #fff;
}
.qm-riskbox__note {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
}
.qm-riskbox__note strong { color: rgba(255, 255, 255, 0.85); }

.qm-legal {
  margin-top: 28px;
  display: grid;
  gap: 14px;
  max-width: 980px;
}
.qm-legal p {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
}
.qm-legal a {
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.qm-legal a:hover { color: #fff; }

.qm-footer__bottom {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.qm-copy { font-size: 13.5px; color: rgba(255, 255, 255, 0.5); }
.qm-award {
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
}
.qm-award img { width: 290px; max-width: 100%; height: auto; }

/* ---- Entrance animations ----------------------------------- */
@keyframes qmChev { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes qmWord { from { opacity: 0; transform: translateY(6px); }   to { opacity: 1; transform: translateY(0); } }
@keyframes qmRise { from { opacity: 0; transform: translateY(18px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes qmPop  { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.qm-anim-rise { animation: qmRise 0.8s var(--ease) var(--delay, 0s) both; }
.qm-anim-pop  { animation: qmPop  0.7s var(--ease) var(--delay, 0s) both; }

/* Scroll reveal (progressively enhanced — see site.js) */
.qm-reveal { opacity: 0; transform: translateY(18px); }
.qm-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* ============================================================
   Responsive
   ============================================================ */

/* Laptop — ease the outer rhythm in */
@media (max-width: 1100px) {
  .qm-hero__inner,
  .qm-team__inner { gap: 40px; }
  .qm-callback__panel { padding: 48px 36px; gap: 36px; }
}

/* Tablet — collapse the header, soften 3-up grids */
@media (max-width: 980px) {
  :root { --gutter: 22px; }

  .qm-burger { display: block; }

  /* Logo + burger share row one; the panel below takes a full row of its own,
     so .qm-header__inner must stay wrappable. */
  .qm-header__inner { flex-wrap: wrap; row-gap: 0; }

  .qm-header__actions {
    display: none;
    order: 3;
    width: 100%;
    flex: 0 0 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 14px 0 6px;
    border-top: 1px solid var(--line-header);
    margin-top: 14px;
    /* Never let a long menu push the page out of reach */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
  .qm-header__actions.is-open { display: flex; }

  .qm-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .qm-nav__link {
    padding: 13px 4px;
    font-size: 16.5px;
    border-bottom: 1px solid var(--line-header);
  }
  .qm-header__tel {
    padding: 14px 4px 6px;
    font-size: 19px;
    font-weight: 800;
  }
  .qm-header__actions .qm-btn { margin-top: 6px; }

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

  .qm-hero__inner,
  .qm-team__inner,
  .qm-callback__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .qm-hero { padding-top: 56px; }
  .qm-hero__media { max-width: 560px; }
  .qm-quotecard { right: 24px; }

  /* Image first reads better once stacked */
  .qm-team__inner .qm-shape--b { order: -1; max-width: 560px; }

  .qm-callback__panel { border-radius: 28px 28px 28px 100px; }

  .qm-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .qm-footer__brand { grid-column: 1 / -1; }
}

/* Phone — single column throughout */
@media (max-width: 680px) {
  :root { --gutter: 18px; }

  /* Three wrapped lines of 15px would make this taller than the header.
     Smaller type gets it to two, but only once the inner stops being a flex
     row: as flex items the sentence and the link can never share a line, so
     the link always claimed a third. Inline flow lets it sit on the end of
     the sentence and wrap like any other words. */
  .qm-announce { padding: 9px var(--gutter); }
  .qm-announce__inner { display: block; line-height: 1.45; }
  .qm-announce__text,
  .qm-announce__link { font-size: 13px; }
  .qm-announce__link { margin-left: 6px; white-space: nowrap; }

  .qm-section        { padding-top: 72px; }
  .qm-section--news  { padding-top: 64px; }
  .qm-fees           { margin-top: 72px; padding: 64px var(--gutter) 68px; }
  .qm-rates          { margin-top: 72px; padding: 48px var(--gutter) 52px; }
  .qm-team           { padding: 68px var(--gutter) 72px; }
  .qm-callback        { padding-top: 64px; }
  .qm-divider        { padding-top: 72px; }
  .qm-footer         { margin-top: 76px; padding-top: 56px; }

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

  .qm-featgrid { gap: 22px; }

  /* Full width once stacked. min-width:0 is the important half: a flex item
     defaults to min-width:auto, which floors it at its own min-content, and
     the widest of these buttons is an email address — one unbreakable word
     plus 64px of padding. Without this it refuses to shrink and spills out
     of the column on a 320px screen. */
  .qm-btn-row .qm-btn {
    flex: 1 1 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .qm-hero__lede { font-size: 18px; }

  /* The floating quote card overlaps awkwardly at this width */
  .qm-quotecard {
    position: static;
    margin-top: 16px;
    right: auto;
    left: auto;
    bottom: auto;
  }

  .qm-shape--a { border-radius: 90px 22px 90px 22px; }
  .qm-shape--b { border-radius: 22px 90px 22px 90px; }

  .qm-callback__panel {
    padding: 36px 24px;
    border-radius: 24px 24px 24px 72px;
  }
  .qm-form { padding: 22px; }
  .qm-field-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .qm-slot { min-height: 300px; padding: 32px 18px; }

  .qm-section__head { align-items: flex-start; }

  .qm-footer__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .qm-footer__bottom { justify-content: flex-start; }
}

/* Small phones — a 320px screen (SE, older Androids, a Fold's cover panel)
   has 284px of usable column once the gutter is off. The large pill's 32px
   of side padding eats a fifth of that, which is what tipped the email
   button over the edge on /about/. Trimming it to 20px is enough that the
   longest label the site uses still fits on one line. */
@media (max-width: 380px) {
  .qm-btn--lg { padding-left: 20px; padding-right: 20px; }
  .qm-btn { padding-left: 20px; padding-right: 20px; }
}

/* ---- Motion & print --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .qm-reveal { opacity: 1; transform: none; }
}

@media print {
  .qm-announce, .qm-header, .qm-slot, .qm-form { display: none; }
  body { background: #fff; }
  .qm-footer { background: #fff; color: #000; }
}

/* ---- Thank-you page ---------------------------------------- */
.qm-thanks { padding: 96px var(--gutter) 0; }
.qm-thanks__wrap { max-width: 760px; }
.qm-thanks__title {
  margin-top: 14px;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--navy);
  text-wrap: balance;
}
.qm-thanks__lede {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--navy);
  text-wrap: pretty;
}
.qm-thanks__body {
  margin-top: 26px;
  display: grid;
  gap: 18px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (max-width: 680px) {
  .qm-thanks { padding-top: 64px; }
  .qm-thanks__lede { font-size: 18px; }
  .qm-thanks__body { font-size: 16px; }
}

/* The thank-you page uses a cut-down header with no burger button, so the
   actions must stay visible at every width. Without this they inherit the
   main header's mobile rule, which hides them behind a menu button this page
   does not have — leaving the phone number unreachable on a phone. */
@media (max-width: 980px) {
  .qm-header--minimal .qm-header__actions {
    display: flex;
    order: 0;
    width: auto;
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
    margin-top: 0;
    padding: 0;
    border-top: 0;
    max-height: none;
    overflow: visible;
  }
  .qm-header--minimal .qm-header__tel { padding: 0; font-size: 16px; font-weight: 800; }
  .qm-header--minimal .qm-header__actions .qm-btn { margin-top: 0; }
}

@media (max-width: 680px) {
  /* Too narrow for both. The phone number is the useful half; "back to the
     site" is already offered as a button in the page body. */
  .qm-header--minimal .qm-header__actions .qm-btn { display: none; }
}

/* ---- Consent banner ---------------------------------------- */
/* The [hidden] guard this component used to carry is now global, in the reset
   at the top of this file. */

/* Bottom bar rather than a centre-screen modal: it stays out of the way of
   the hero and the callback form, which a modal would sit on top of. */
.qm-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: var(--navy);
  color: #fff;
  border-top: 3px solid var(--cyan);
  box-shadow: 0 -18px 44px rgba(4, 32, 47, 0.28);
  max-height: 88vh;
  overflow-y: auto;
}
.qm-consent__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}
.qm-consent__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.qm-consent__title:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.qm-consent__text {
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 70ch;
  text-wrap: pretty;
}

.qm-consent__options {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.qm-consent__opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 78ch;
  cursor: pointer;
}
.qm-consent__opt strong { color: #fff; font-weight: 700; }
.qm-consent__opt input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--cyan);
  cursor: pointer;
}
.qm-consent__opt input:disabled { cursor: default; opacity: 0.65; }

.qm-consent__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 190px;
}
.qm-consent__btn { padding: 13px 22px; font-size: 15px; white-space: nowrap; }
.qm-consent__btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  font-weight: 700;
}
.qm-consent__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

@media (max-width: 980px) {
  .qm-consent__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 20px var(--gutter);
  }
  .qm-consent__actions { min-width: 0; }
}

@media (max-width: 680px) {
  /* Full-width tap targets, and a cap so the bar can never swallow the whole
     screen on a short phone viewport — the options list is scrollable. */
  .qm-consent { max-height: 80vh; }
  .qm-consent__text { font-size: 14px; }
  .qm-consent__btn { width: 100%; }
}

/* ---- Inner pages (services, contact) ----------------------- */
.qm-page {
  padding: 72px var(--gutter) 0;
  background: var(--sand-soft);
  border-bottom: 1px solid var(--line);
}
.qm-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 72px;
}
.qm-page__inner--narrow { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.qm-page__title {
  margin-top: 12px;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--navy);
  text-wrap: balance;
}
.qm-page__lede {
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}
/* Do NOT add `height: auto` here. .qm-shape img is height:100% + object-fit:
   cover, and this rule comes later in the file, so overriding the height
   collapses the image away from the shape and leaves a block of empty
   background below it. A page hero also wants a wider crop than the square
   the homepage hero uses. */
.qm-page__media .qm-shape { margin: 0; }
.qm-page__media .qm-shape--a { aspect-ratio: 4 / 3; border-radius: 110px 24px 110px 24px; }

/* Content beside the enquiry form. */
.qm-split { padding: 76px var(--gutter) 0; }
.qm-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 52px;
  align-items: start;
}
.qm-split__copy p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 16px;
  text-wrap: pretty;
}
.qm-split__copy .qm-h3--lg { margin-top: 30px; }
/* Keeps the form in view while a long page scrolls past it. */
.qm-split__form { position: sticky; top: 96px; }

.qm-checklist { margin-top: 16px; display: grid; gap: 11px; }
.qm-checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.qm-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 9px;
  border-left: 2.5px solid var(--cyan);
  border-bottom: 2.5px solid var(--cyan);
  transform: rotate(-45deg);
}

/* Question-and-answer blocks. */
.qm-qa-section { padding-top: 84px; }
.qm-qa {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
}
.qm-qa__q {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--navy);
  text-wrap: balance;
}
.qm-qa__a p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.qm-qa__a p + p { margin-top: 14px; }

/* Related services. */
.qm-related { padding: 84px var(--gutter) 0; }

/* ---- 404 ---------------------------------------------------
   .qm-page__inner--narrow caps the box at 820px, but that box is also the
   .qm-wrap, which centres itself — so a narrow hero sits ~210px in from
   the wrap edge. Fine on a page that stays narrow all the way down; wrong
   on the 404, which puts a full-width grid underneath, leaving the two
   bands starting on different left edges.

   The fix has to cap the CONTENT, not the box. Releasing the box back to
   the normal wrap width keeps it centred and aligned with every other
   band, while the copy inside keeps a readable measure. Simply flushing
   the box left instead would align it to the section padding (x=28) and
   miss the wrap edge (x=92) by just as much, in the other direction.

   Scoped to a modifier so /contact/ and the service pages keep the
   centred hero they were signed off with. */
.qm-page__inner--flush { max-width: var(--wrap); }
.qm-page__inner--flush .qm-page__copy { max-width: 820px; }

/* The shared .qm-related rule has no bottom padding because on a service
   page the following section supplies the gap. On the 404 the grid is the
   last thing in its band, so without this the cards touch the sand band. */
.qm-related--end { padding-bottom: 84px; }
.qm-related__grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.qm-related__item {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.qm-related__item:hover { border-color: var(--navy); background: var(--sand); color: var(--navy); }

/* Contact page detail cards. */
.qm-contactcard { padding: 22px 0; border-top: 1px solid var(--line); }
.qm-contactcard:first-child { border-top: 0; padding-top: 0; }
.qm-contactcard__big { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin-top: 8px; }
.qm-contactcard__big a { color: var(--navy); }
.qm-contactcard__big a:hover { color: var(--teal); }
.qm-contactcard__alt { margin-top: 4px; font-size: 18px; font-weight: 700; }
.qm-contactcard__addr { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* Heading and lede rendered above the fields by enquiry-form.js. */
.qm-form__h {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--navy);
}
.qm-form__lede {
  margin-top: 8px;
  margin-bottom: 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

@media (max-width: 980px) {
  .qm-page__inner,
  .qm-split__inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* Sticky is wrong once the form is stacked below the copy. */
  .qm-split__form { position: static; }
  .qm-qa { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qm-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .qm-page { padding-top: 52px; }
  .qm-page__inner { padding-bottom: 52px; }
  .qm-page__lede { font-size: 17.5px; }
  .qm-split { padding-top: 56px; }
  .qm-qa-section { padding-top: 60px; }
  .qm-related { padding-top: 60px; }
  .qm-related__grid { grid-template-columns: minmax(0, 1fr); }
  .qm-qa__q { font-size: 20px; }
}

/* ============================================================
   News: article pages, the index, and the homepage strip
   ============================================================ */

/* Every band on an article shares one measure, so the masthead, hero, body,
   pager and CTA all line up. Capping .qm-wrap inside .qm-entry does that in
   one rule instead of a modifier on each. */
.qm-entry .qm-wrap { max-width: 860px; }

.qm-entry__head {
  background: var(--sand-soft);
  border-bottom: 1px solid var(--line);
  padding: 56px var(--gutter) 0;
}
.qm-entry__headinner { padding-bottom: 46px; }
.qm-entry__back { color: inherit; text-decoration: underline; }
.qm-entry__title {
  margin-top: 12px;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--navy);
  text-wrap: balance;
}
.qm-entry__lede {
  margin-top: 18px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.qm-entry__meta {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
}

.qm-entry__hero { padding: 34px var(--gutter) 0; }
.qm-entry__hero img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  display: block;
}

/* ---- Imported article body ---------------------------------
   These posts were pasted into WordPress over three years, so the markup is
   whatever the editor produced that day: h2/h3/h4 used interchangeably, <b>
   as often as <strong>, stray <div>s. Styling by element rather than class is
   the only thing that covers all 145.

   A handful were hand-built with inline styles and their own font. Those
   still win on specificity, which is intended - they are self-contained
   pieces and were designed to look the way they look. */
.qm-prose {
  padding: 40px var(--gutter) 0;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-2);
  /* Article bodies carry copy pasted in from the old WordPress site, and
     some of it contains strings the line breaker cannot split. The one
     that got through was a "divider" typed as ~54 em dashes: UAX #14
     forbids a break between two dashes, so that is a single 1000px word,
     and on a 339px phone column it dragged the whole page sideways. The
     run itself is now an <hr>, but this keeps the next one (a long bare
     URL, say) from doing the same. It changes nothing for text that
     already fits. */
  overflow-wrap: break-word;
}
.qm-prose > p,
.qm-prose > div > p { margin: 0 0 20px; }
.qm-prose p { text-wrap: pretty; }
.qm-prose h2 {
  margin: 42px 0 14px;
  font-size: clamp(24px, 3vw, 31px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--navy);
}
.qm-prose h3 {
  margin: 34px 0 10px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--navy);
}
.qm-prose h4 {
  margin: 28px 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
.qm-prose ul,
.qm-prose ol { margin: 0 0 22px; padding-left: 24px; }
.qm-prose li { margin-bottom: 9px; }
.qm-prose a { color: var(--teal); text-decoration: underline; }
.qm-prose a:hover { color: var(--navy); }
.qm-prose strong, .qm-prose b { color: var(--ink); font-weight: 700; }
.qm-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 10px 0 24px;
}
.qm-prose hr {
  margin: 34px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.qm-prose blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--cyan);
  color: var(--ink);
  font-size: 19px;
}
.qm-prose sup { font-size: 0.7em; }

/* Ten posts carry rate tables wider than a phone. The wrapper scrolls so the
   page does not: a table told to scroll itself has to abandon its own layout. */
.qm-tablewrap { overflow-x: auto; margin: 0 0 24px; -webkit-overflow-scrolling: touch; }
.qm-prose table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 16px; }
.qm-prose th,
.qm-prose td {
  border: 1px solid var(--line-strong);
  padding: 10px 13px;
  text-align: left;
  vertical-align: top;
}
.qm-prose th { background: var(--sand-soft); font-weight: 700; color: var(--navy); }

/* ---- Previous / next --------------------------------------- */
.qm-entrynav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 46px var(--gutter) 0;
}
.qm-entrynav__item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.qm-entrynav__item:hover { border-color: var(--navy); background: var(--sand); }
.qm-entrynav__item--next { text-align: right; align-items: flex-end; }
.qm-entrynav__dir {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.qm-entrynav__t { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.35; }

/* ---- Closing CTA ------------------------------------------- */
.qm-entrycta {
  margin: 52px auto 0;
  padding: 34px 32px;
  background: var(--sand);
  border-radius: 24px;
}
.qm-entrycta p { margin-top: 10px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.qm-entrycta .qm-btn-row { margin-top: 22px; }

/* ---- Index -------------------------------------------------- */
.qm-newsindex { padding-top: 56px; }
.qm-article__excerpt {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

.qm-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}
.qm-pager__n,
.qm-pager__step {
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  background: var(--surface);
}
.qm-pager__n:hover,
.qm-pager__step:hover { border-color: var(--navy); background: var(--sand); }
.qm-pager__n.is-current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.qm-pager__step.is-off { opacity: 0.38; }
.qm-pager__step.is-off:hover { border-color: var(--line-strong); background: var(--surface); }
.qm-pager__gap { padding: 0 2px; color: var(--ink-3); }

/* ---- Homepage strip ----------------------------------------- */
.qm-marquee--news .qm-article {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
}
.qm-marquee--news .qm-article__media img { width: 100%; }
.qm-marquee--news .qm-article__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 980px) {
  .qm-entrynav { grid-template-columns: minmax(0, 1fr); }
  .qm-entrynav__item--next { text-align: left; align-items: flex-start; }
}

@media (max-width: 680px) {
  .qm-entry__head { padding-top: 40px; }
  .qm-prose { font-size: 17px; padding-top: 32px; }
  .qm-entrycta { padding: 26px 22px; }
  .qm-marquee--news .qm-article { flex-basis: 268px; }
}

/* ---- Homepage news carousel ---------------------------------
   Reader-driven, unlike the reviews strip. The viewport is a genuine scroll
   container, so a thumb or trackpad works whether or not the JS runs; the
   buttons are an enhancement, and stay hidden until site.js reveals them. */
.qm-carousel { margin-top: 36px; }

.qm-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.qm-carousel__viewport::-webkit-scrollbar { display: none; }
/* Drawn INSIDE the box. Padding would have done the same job, but it also
   offsets the scroll origin, and the carousel then never reads as being at
   the start. */
.qm-carousel__viewport:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.qm-carousel__track {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

/* Three across, sharing the two 20px gaps. */
.qm-carousel .qm-article {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.qm-carousel .qm-article__media img { width: 100%; }
.qm-carousel .qm-article__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qm-article__date {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.qm-carousel__nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.qm-carousel__btn {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, opacity 0.16s ease;
}
.qm-carousel__btn:hover:not([disabled]) { border-color: var(--navy); background: var(--sand); }
.qm-carousel__btn[disabled] { opacity: 0.32; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .qm-carousel__viewport { scroll-behavior: auto; }
}

@media (max-width: 980px) {
  .qm-carousel .qm-article { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 680px) {
  /* A sliver of the next card is the clearest possible hint that the row
     scrolls - clearer than any arrow, and it costs nothing. */
  .qm-carousel .qm-article { flex-basis: 84%; }
}

/* ============================================================
   Team page
   ============================================================ */

/* ---- Facts strip (team, services) -------------------------------------------- */
.qm-facts {
  padding: 0 var(--gutter);
  margin-top: 56px;
}
.qm-facts__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.qm-fact {
  padding: 26px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
}
.qm-fact__big {
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--navy);
}
.qm-fact__small {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* ---- People ------------------------------------------------- */
.qm-people { padding: 84px var(--gutter) 0; }
.qm-people__head { max-width: 62ch; }
.qm-people__head .qm-lede { margin-top: 14px; }

/* Two columns of row cards rather than a three-up wall of faces. The
   portrait is a fixed pixel size, not a share of the column, so it looks the
   same on a laptop and on a 4K monitor, and the bio gets the width instead. */
.qm-people__grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Same card as .qm-fact above it — border, radius and surface all match,
   so the strip of numbers and the list of people read as one page. */
.qm-person {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.qm-person:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(11, 31, 59, 0.07);
}

/* The asymmetric corner is the site's signature shape, mirrored from the
   hero. Overflow hidden so the photo takes the same silhouette. */
.qm-person__photo {
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 16px 44px;
  background: var(--sand);
  aspect-ratio: 4 / 5;
}
.qm-person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.qm-person__body { padding: 2px 0 0; }
.qm-person__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.qm-person__role {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal);
}
.qm-person__line {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* ---- The Morale Officer ------------------------------------- */
/* Same card as everyone else, in navy — the joke works better at the same
   size as the people he does no work alongside. */
.qm-person--fun {
  background: var(--navy);
  border-color: var(--navy);
}
.qm-person--fun:hover {
  border-color: var(--cyan-light);
  box-shadow: 0 10px 26px rgba(11, 31, 59, 0.18);
}
.qm-person--fun .qm-person__photo { background: rgba(255, 255, 255, 0.1); }
.qm-person--fun .qm-person__name { color: #fff; }
.qm-person--fun .qm-person__role { color: var(--cyan-light); }
.qm-person--fun .qm-person__line { color: rgba(255, 255, 255, 0.82); }

.qm-page--cta { margin-top: 92px; }

@media (max-width: 980px) {
  .qm-facts__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qm-person { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; }
}

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

@media (max-width: 680px) {
  .qm-people { padding-top: 64px; }
  /* Give the text back the width the portrait was taking: at 375px a 104px
     photo left the role line wrapping across two lines. */
  .qm-person { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .qm-person__photo { border-radius: 14px 14px 14px 34px; }
  .qm-person__name { font-size: 18px; }
  .qm-person__role { font-size: 12px; letter-spacing: 0.05em; }
  .qm-person__line { font-size: 14.5px; }
  .qm-fact { padding: 20px 18px; }
  .qm-page--cta { margin-top: 68px; }
}

/* ============================================================
   Services directory
   ============================================================ */

.qm-svc { padding: 74px var(--gutter) 0; }
.qm-svc__head { max-width: 62ch; }
.qm-svc__head .qm-lede { margin-top: 14px; }

/* A labelled column beside the cards rather than a flat grid of eight tiles:
   the reader almost always knows their situation before they know the
   product name, so the situation is what gets the heading. */
.qm-svcgroup {
  margin-top: 30px;
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.qm-svcgroup + .qm-svcgroup { margin-top: 40px; }

.qm-svcgroup__label { position: sticky; top: 104px; padding-top: 4px; }
.qm-svcgroup__num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
}
.qm-svcgroup__h {
  margin-top: 12px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--navy);
  text-wrap: balance;
}
.qm-svcgroup__note {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* Flex column so the "Read more" line sits on the baseline in every card of
   a row, however uneven the checklists above it are. */
.qm-svccard {
  display: flex;
  flex-direction: column;
  padding: 26px;
  height: 100%;
}
.qm-svccard .qm-card__text { margin-top: 8px; }
.qm-svccard .qm-checklist { margin-top: 16px; gap: 8px; }
.qm-svccard .qm-checklist li { font-size: 15px; padding-left: 26px; }
.qm-svccard .qm-checklist li::before { top: 6px; width: 14px; height: 8px; }
.qm-svccard .qm-tags { margin-top: 16px; }
.qm-svccard__go {
  margin-top: auto;
  padding-top: 20px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--teal);
}
.qm-svccard:hover .qm-svccard__go { color: var(--navy); }

/* ---- Schemes and specialisms ------------------------------- */
.qm-svcspec { padding: 84px var(--gutter) 0; }
.qm-svcspec__grid { margin-top: 30px; }

.qm-svcspec .qm-svccard { border-color: var(--line-strong); }
.qm-svccard--navy {
  background: var(--navy);
  border-color: var(--navy);
}
.qm-svccard--navy .qm-eyebrow { color: var(--cyan-light); }
.qm-svccard--navy .qm-h3 { color: #fff; }
.qm-svccard--navy .qm-card__text { color: rgba(255, 255, 255, 0.82); }
.qm-svccard--navy .qm-checklist li { color: rgba(255, 255, 255, 0.82); }
.qm-svccard--navy .qm-tag { background: rgba(255, 255, 255, 0.12); color: #fff; }
.qm-svccard--navy .qm-svccard__go { color: var(--cyan-light); }
.qm-svccard--navy:hover { border-color: var(--cyan); }
.qm-svccard--navy:hover .qm-svccard__go { color: #fff; }

/* A quieter paragraph for the caveats that have to be on the page but are
   not the point of it: scheme rules set elsewhere, regulatory wording. */
.qm-note {
  margin-top: 18px;
  padding-left: 16px;
  border-left: 3px solid var(--line-strong);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}
.qm-note a { color: var(--teal); font-weight: 600; }

/* ---- What every one of them includes ----------------------- */
.qm-svcincl {
  margin-top: 92px;
  background: var(--sand);
  padding: 68px var(--gutter) 72px;
}
.qm-svcincl__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}
.qm-svcincl__inner .qm-checklist { margin-top: 0; }
/* The reset zeroes every p margin, so stacked prose needs it back. */
.qm-svcincl__inner p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.qm-svcincl__inner p + p { margin-top: 14px; }
.qm-svcincl__inner .qm-lede + .qm-award,
.qm-svcincl__inner .qm-h2 + .qm-award { margin-top: 22px; }
.qm-svcincl__inner a { color: var(--teal); font-weight: 600; }

@media (max-width: 980px) {
  .qm-svcgroup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qm-svcgroup__label { position: static; grid-column: 1 / -1; }
  .qm-svcincl__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 680px) {
  .qm-svc { padding-top: 56px; }
  .qm-svcgroup { grid-template-columns: minmax(0, 1fr); }
  .qm-svcspec { padding-top: 64px; }
  .qm-svcincl { margin-top: 68px; padding: 52px var(--gutter) 56px; }
}

/* ============================================================
   About page
   ============================================================ */
.qm-about { padding: 84px var(--gutter) 0; }
.qm-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 52px;
  align-items: start;
}
.qm-about__copy p {
  margin-top: 18px;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}
.qm-about__copy .qm-btn-row { margin-top: 26px; }

.qm-about__aside {
  padding: 30px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--sand-soft);
  /* Follows the reader down a long column on wide screens. */
  position: sticky;
  top: 108px;
}
.qm-about__addr,
.qm-about__contact {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  font-style: normal;
}
.qm-about__contact a { color: var(--navy); font-weight: 600; }
.qm-about__contact a:hover { color: var(--teal); }

.qm-about__grid { margin-top: 34px; }
.qm-about__card { display: flex; flex-direction: column; }
.qm-about__card .qm-card__text { margin-top: 10px; }

/* ---- Proud to support --------------------------------------- */
.qm-support { padding: 92px var(--gutter) 0; }
.qm-support__grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.qm-support__item {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: var(--surface);
}
/* The badges are 2.81:1 and 1:1. Sizing them by width squashes the wide one
   to a smear next to the square one, so both are capped by HEIGHT and left to
   find their own width - which is how each was drawn to be seen. */
.qm-support__logo {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 86px;
  margin-bottom: 22px;
}
.qm-support__logo img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}
.qm-support__body p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- Introducers -------------------------------------------- */
.qm-partner { margin-top: 92px; padding: 0 var(--gutter); }
.qm-partner__inner {
  padding: 54px 52px;
  border-radius: 32px 32px 32px 120px;
  background: var(--navy);
}
.qm-partner__copy { max-width: 62ch; }
.qm-partner__text {
  margin-top: 16px;
  font-size: 17.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}
.qm-partner .qm-btn-row { margin-top: 28px; }

/* Outline button that works on the navy panel, where the standard one
   would be a navy border on navy. */
.qm-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
}
.qm-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

@media (max-width: 980px) {
  .qm-about__inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .qm-about__aside { position: static; }
  .qm-support__grid { grid-template-columns: minmax(0, 1fr); }
  .qm-partner__inner { padding: 40px 32px; border-radius: 28px 28px 28px 90px; }
}

@media (max-width: 680px) {
  .qm-about { padding-top: 64px; }
  .qm-support { padding-top: 68px; }
  .qm-support__item { padding: 24px; }
  .qm-support__logo { height: 68px; margin-bottom: 18px; }
  .qm-partner { margin-top: 68px; }
  .qm-partner__inner { padding: 30px 24px; }
  .qm-about__copy p { font-size: 16.5px; }
}

/* ============================================================
   Paid-search landing pages
   ============================================================ */

/* No burger, because there is no nav to open. */
.qm-header--lp .qm-header__inner { justify-content: space-between; }
.qm-header--lp .qm-burger { display: none; }
.qm-lp__headright {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.qm-lp__headnote {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
}

/* ---- Hero: copy left, form right ---------------------------- */
.qm-lphero {
  padding: 48px var(--gutter) 64px;
  background: var(--sand-soft);
  border-bottom: 1px solid var(--line);
}
.qm-lphero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 52px;
  align-items: start;
}
.qm-lphero__title {
  margin-top: 12px;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.03;
  letter-spacing: -0.038em;
  font-weight: 800;
  color: var(--navy);
  text-wrap: balance;
}
.qm-lphero__lede {
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.qm-lphero__points { margin-top: 26px; }

.qm-lptrust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.qm-lptrust__item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
.qm-lptrust__item strong { color: var(--navy); }
.qm-lptrust__item img { width: 54px; height: 54px; display: block; }

/* The form is the page. It gets the shadow and the white so the eye lands
   on it before anything else on the screen. */
.qm-lpform {
  padding: 30px 30px 26px;
  background: var(--surface);
  border-radius: 26px;
  box-shadow: var(--shadow-pop);
  /* Follows the reader on a long page, so the ask is never off screen. */
  position: sticky;
  top: 96px;
}
.qm-lpform__note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}
.qm-lpform .qm-form__submit { width: 100%; }

/* ---- Sections ----------------------------------------------- */
.qm-lpsec { padding: 78px var(--gutter); }
.qm-lpsec--tint { background: var(--sand-soft); }

/* Same tint for the ordinary content sections. The landing pages had the
   only tinted band until /events/, which alternates bands down a long page
   so the roadshow list reads as separate from the booking form above it. */
.qm-section--tint {
  background: var(--sand-soft);
  padding-bottom: 78px;
}
.qm-lpsec__head { max-width: 66ch; }
.qm-lpsec__head .qm-lede { margin-top: 14px; }
.qm-lpsec__grid { margin-top: 32px; }
.qm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qm-lpcard .qm-card__text { margin-top: 10px; }

.qm-lpcta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* ---- Steps --------------------------------------------------- */
.qm-lpsteps {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  counter-reset: none;
}
.qm-lpstep {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
}
.qm-lpstep__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
}
.qm-lpstep p {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---- FAQ ----------------------------------------------------- */
.qm-lpfaq__list {
  margin-top: 28px;
  max-width: 82ch;
  border-top: 1px solid var(--line-strong);
}
.qm-lpfaq__item { border-bottom: 1px solid var(--line-strong); }
.qm-lpfaq__item summary {
  padding: 20px 40px 20px 0;
  position: relative;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.qm-lpfaq__item summary::-webkit-details-marker { display: none; }
.qm-lpfaq__item summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--teal);
}
.qm-lpfaq__item[open] summary::after { content: "−"; }
.qm-lpfaq__item p {
  padding: 0 40px 22px 0;
  margin-top: -4px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* =================================================================
   INTRODUCER PAGES  (/odyssey/, /macx/, /or/ ...)
   A different audience to every other landing page: the person filling
   the form is a professional referring a client, not the client. So no
   selling, no reviews, no reassurance about fees — just whose page this
   is, the form, and who to ring. Short on purpose.
   ================================================================= */

/* ---- Co-brand lockup ----------------------------------------- */
/* Our mark and the introducer's, side by side. This is the page saying
   "you are in the right place" to someone who was sent here by name, and
   it does more work than any headline could. */
.qm-cobrand {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.qm-cobrand__x {
  width: 1px;
  height: 40px;
  background: var(--line-strong);
}
.qm-cobrand__mine { height: 30px; width: auto; display: block; }

/* The introducer logos are whatever each firm supplied: a 200px square, a
   1451px banner, an SVG, and one that is white type on a dark tile. Height
   is what makes them sit as equals, so it is capped and the width follows.
   The cap is generous because the squarer marks need the room. */
.qm-cobrand__theirs {
  max-height: 62px;
  max-width: 210px;
  width: auto;
  height: auto;
  display: block;
}
/* Stowhill's mark is white on its own dark rectangle rather than
   transparent ink, so it needs the corners softened or it reads as a crop
   someone forgot to finish. Harmless on the others. */
.qm-cobrand__theirs { border-radius: 6px; }

/* Odyssey supplied white artwork with no background of its own — on cream it
   is very nearly invisible. A navy chip gives it the dark ground it was drawn
   for. Stowhill needs no chip: its dark tile is baked into the image. If a
   firm ever sends a dark-ink version, drop the flag rather than the chip. */
.qm-cobrand__chip {
  display: inline-flex;
  align-items: center;
  padding: 11px 17px;
  border-radius: 10px;
  background: var(--navy);
}
.qm-cobrand__chip .qm-cobrand__theirs { max-height: 44px; border-radius: 0; }

/* On a phone the two marks at full size do not fit on one row, and wrapping
   them leaves the divider dangling at the end of the first line looking like
   a mistake. Scaling both down keeps the pairing — which is the whole point
   of the lockup — on a single row instead. */
@media (max-width: 560px) {
  .qm-cobrand { gap: 13px; }
  .qm-cobrand__mine { height: 22px; }
  .qm-cobrand__x { height: 28px; }
  .qm-cobrand__theirs { max-height: 42px; max-width: 132px; }
  .qm-cobrand__chip { padding: 8px 12px; }
  .qm-cobrand__chip .qm-cobrand__theirs { max-height: 32px; }
}

/* ---- Named contact ------------------------------------------- */
/* A face and a direct line, not "contact us". An introducer chasing a
   referral wants the person, and this page is the one place they will
   look for them. */
.qm-contact {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 26px 30px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
}
.qm-contact__photo {
  width: 128px;
  aspect-ratio: 4 / 5;
  border-radius: 18px 18px 18px 54px;
  overflow: hidden;
  background: var(--sand);
}
.qm-contact__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.qm-contact__name {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.qm-contact__role {
  margin: 3px 0 0;
  font-size: 15.5px;
  color: var(--ink-3);
}
.qm-contact__lines {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.qm-contact__lines a {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
}
.qm-contact__lines a:hover { color: var(--teal); }
.qm-contact__note {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* In the hero column, beside a form that is a good deal taller than the copy
   next to it. Sitting there it fills what was dead space AND puts the name an
   introducer wants — when they are chasing a referral rather than making one
   — above the fold instead of a section below it. */
.qm-contact--inline {
  margin-top: 22px;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 22px;
}
.qm-contact--inline .qm-contact__photo { width: 104px; }
.qm-contact--inline .qm-contact__name { font-size: 19px; }
.qm-contact__label {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

@media (max-width: 560px) {
  .qm-contact { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .qm-contact__photo { width: 104px; }
  .qm-contact--inline { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Reward feature card ------------------------------------- */
/* The reward is the reason the visitor clicked, so it leads the section as
   one full-width card instead of sitting as one of five equal boxes — which
   is also what used to leave that grid with an orphan on its last row. */
.qm-lpfeature {
  margin-top: 32px;
  padding: 28px 32px;
  border-radius: 16px;
  background: var(--navy);
}
.qm-lpfeature__h {
  margin: 0;
  font-size: 20.5px;
  font-weight: 700;
  color: #fff;
}
.qm-lpfeature__p {
  margin: 10px 0 0;
  max-width: 72ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

/* Staff pages: the "we may also pay your employer" line, which sits directly
   under the reward panel. It is a disclosure about where money goes, so it is
   deliberately attached to the offer it qualifies rather than pushed down
   into the small print — but it is not the offer, so it does not compete
   with the panel above it either. */
.qm-lpdisclosure {
  margin: 14px 0 0;
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* Safety net for any odd-numbered two-up grid: let the lone card on the last
   row span the full width, so the row reads as deliberate rather than as a
   box someone forgot to pair up. MyPFEW is the one page this catches. */
.qm-lpsec__grid.qm-grid--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 680px) {
  .qm-lpfeature { padding: 24px 22px; }
}

/* ---- Full-bleed image band ----------------------------------- */
/* PREVIEW. A photograph directly under the hero, edge to edge. It sits
   BELOW the fold-critical row deliberately: on an affiliate landing page the
   form is the job, and an image placed beside it competes for the same
   attention rather than adding to it. */
.qm-lpband {
  position: relative;
  /* Capped, unlike a true full-bleed band. Left to run edge to edge it turns
     into a letterbox slice on a wide monitor — about 7:1 at 2560px and 10:1
     at 4K — and it upscales past the 1344px source at the same time, so it
     goes soft as well as stretched. 1440 keeps it a little wider than the
     1240 content column, so it still reads as a bleed, without either. */
  max-width: 1440px;
  margin: 0 auto;
  background: var(--img-bg);
}
.qm-lpband img {
  display: block;
  width: 100%;
  /* Height tracks width so the crop stays a band rather than a slot; the
     ceiling is what the cap above is sized against (1440 / 430 ≈ 3.3:1).
     The family spans about two thirds of the source image top to bottom, so
     a shallower band cannot hold all four of them however it is positioned —
     this is the depth at which the children stay in the picture. */
  height: clamp(215px, 30vw, 430px);
  object-fit: cover;
  object-position: center 42%;
}

/* Once the viewport is wider than the cap the band no longer touches the
   edges, so square corners would read as a stripe someone forgot to finish. */
@media (min-width: 1500px) {
  /* The image, not the section: the caption card hangs below the band on
     purpose, and clipping it to a rounded box would cut it in half. */
  .qm-lpband img { border-radius: 18px; }
}
/* Sits right, not centred: the family walks up the left of the frame and a
   centred card lands on top of the children. The right third is driveway and
   fence, which the card can cover without losing anything. Worth re-checking
   if the photograph is ever replaced with a differently composed one. */
.qm-lpband__card {
  position: absolute;
  right: 4%;
  bottom: -26px;
  width: min(480px, calc(100% - 2 * var(--gutter)));
  padding: 20px 26px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(10, 37, 64, 0.16);
  text-align: center;
}
.qm-lpband__card p {
  margin: 0;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
  text-wrap: balance;
}

/* ---- Copy beside a photograph -------------------------------- */
.qm-lpsplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.qm-lpsplit__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background: var(--img-bg);
}
.qm-lpsplit .qm-lpsec__head { max-width: none; }
.qm-lpsplit .qm-checklist { margin-top: 22px; }

@media (max-width: 980px) {
  .qm-lpsplit { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Copy first on a narrow screen: the picture is support, not the point. */
  .qm-lpsplit__media { order: 2; }
}

@media (max-width: 680px) {
  .qm-lpband__card {
    position: static;
    transform: none;
    width: auto;
    margin: 0 var(--gutter);
    margin-top: -22px;
  }
}

/* ---- Third-party widget fallback ----------------------------- */
/* Shown by assets/js/widget-fallback.js when a MortgageQuote widget does not
   render. Deliberately the same shape as .qm-frame-msg inside
   assets/rates-frame.html, so the four widget pages fail the same way. */
.qm-toolfail {
  margin: 0;
  padding: 30px 20px;
  text-align: center;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.qm-toolfail strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17.5px;
  color: var(--navy);
}
.qm-toolfail a { color: var(--teal); }

/* ---- Cashback tier table ------------------------------------- */
/* Two of the cashback pages (Parliament Hill, Perkbox) publish a banded
   payout table. The amounts are a consumer promise, so the table stays a
   real <table> — a grid of <div>s reads as one run-on line to a screen
   reader, which is exactly where "£650,000+ / £507" stops meaning anything.
   The wrapper scrolls rather than the page, matching .qm-tablewrap. */
.qm-lptiers {
  margin-top: 30px;
  max-width: 560px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
}
.qm-lptiers table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 16.5px;
}
.qm-lptiers th,
.qm-lptiers td {
  padding: 13px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.qm-lptiers thead th {
  background: var(--sand-soft);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
}
.qm-lptiers tbody th {
  font-weight: 500;
  color: var(--ink-2);
}
.qm-lptiers tbody td {
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.qm-lptiers tr:last-child th,
.qm-lptiers tr:last-child td { border-bottom: 0; }

.qm-lptiers__note {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---- Qualifying conditions ----------------------------------- */
/* The cashback terms. Deliberately not styled as fine print: these are the
   conditions the reward actually depends on, and a visitor who misses them
   is the one who complains later. */
.qm-lpterms {
  margin-top: 30px;
  max-width: 78ch;
  padding: 26px 28px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--cyan);
  border-radius: 14px;
  background: var(--surface);
}
.qm-lpterms__h {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.qm-lpterms__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.qm-lpterms__list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.qm-lpterms__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

@media (max-width: 680px) {
  .qm-lpterms { padding: 22px 20px; }
  .qm-lptiers th,
  .qm-lptiers td { padding: 12px 16px; }
}

/* ---- Close --------------------------------------------------- */
.qm-lpclose {
  padding: 78px var(--gutter);
  background: var(--navy);
}
.qm-lpclose__inner { text-align: center; }
.qm-lpclose__lede {
  margin: 16px auto 0;
  max-width: 60ch;
  font-size: 18.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.qm-lpclose .qm-lpcta { justify-content: center; }

/* ---- Roadshow dates (/events/) -------------------------------
   A long list that is really a schedule, so it is set as month blocks
   rather than one continuous run: at a glance you want "is my force in
   here, and roughly when", which a flat list of forty lines does not
   answer. Two columns on desktop keeps the whole year in one screen. */
/* Schedule on the left, booking form on the right. The dates are the reason
   the page exists, so they get the room and the form takes the sidebar. */
.qm-evmain {
  display: grid;
  /* A ratio put the sidebar at 351px, which is too narrow for a form with a
     police-force dropdown and a message box in it — the select truncated the
     longer constabulary names. Bounded instead, so it stays comfortable at
     any width without ever taking the room the schedule needs. */
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: 48px;
  align-items: start;
}
.qm-evform { margin-top: 8px; }

.qm-events {
  margin-top: 32px;
  columns: 1;
}
.qm-events__month {
  break-inside: avoid;
  margin-bottom: 30px;
}
.qm-events__h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.qm-events__list { margin-top: 12px; }
.qm-events__list li {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 7px 0;
  text-wrap: pretty;
}
.qm-events__date {
  display: block;
  font-weight: 700;
  color: var(--navy);
}

/* Past dates stay on the page on purpose — a year of visits is the point —
   but they step back so the eye lands on what is still to come. Faded, not
   hidden, and never so faint that the text stops being readable. */
.qm-events__item.is-past { opacity: 0.55; }
.qm-events__item.is-past .qm-events__date { color: var(--ink-2); }
.qm-events__past {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sand);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: 1px;
}
/* A month with nothing left in it needs no emphasis of its own. */
.qm-events__month.is-past .qm-events__h { color: var(--ink-3); }

@media (prefers-reduced-motion: no-preference) {
  .qm-events__item { transition: opacity 0.2s ease; }
}
.qm-events__item.is-past:hover,
.qm-events__item.is-past:focus-within { opacity: 1; }

@media (max-width: 980px) {
  /* Form below the schedule, and un-stick it: a sticky card that has become
     full width just covers the list it was meant to sit beside. */
  .qm-evmain { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .qm-evform { position: static; margin-top: 0; }
}

/* Copy beside a photograph. Its own class rather than qm-split, which
   carries section padding of its own and expects a form in the right-hand
   column. */
.qm-evsplit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: start;
}
.qm-evsplit .qm-lede + .qm-lede { margin-top: 14px; }
.qm-evsplit .qm-checklist { margin-top: 22px; }
.qm-evsplit .qm-lptrust { margin-top: 26px; }

.qm-evfigure { margin: 0; }
.qm-evfigure img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  background: var(--img-bg);
}
.qm-evfigure__cap {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* The tall stand photograph and the wide team one, side by side. Left to
   themselves these run 824px against 395px, and the short one ends up
   floating beside a column of whitespace twice its height. Capping the
   height evens them up; the portrait shot is anchored high because its
   bottom third is empty floor, and that is what should go. */
.qm-evgallery {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.qm-evgallery .qm-evfigure img {
  max-height: 520px;
  object-fit: cover;
  object-position: 50% 22%;
}

@media (max-width: 980px) {
  .qm-evsplit { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

@media (max-width: 860px) {
  .qm-evgallery { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .qm-evgallery .qm-evfigure img { max-height: 70vh; object-fit: cover; }
}

/* The inline confirmation that replaces the form once it has sent. Only
   /events/ uses it — every other form redirects to a thank-you page. */
/* It sits inside .qm-lpform, which is already a white card, so it carries no
   card of its own — just the accent that marks it as the reply. */
.qm-form--sent {
  border-left: 3px solid var(--cyan);
  padding: 4px 0 4px 16px;
}
.qm-form--sent .qm-form__lede { margin-top: 8px; }

/* ---- Stand page (/fed-c/) ------------------------------------
   Filled in standing up, on our iPad, by someone giving us thirty seconds
   between conversations. So: no navigation, one job on screen, and controls
   sized for a thumb rather than a mouse. It is the only page on the site
   with no way out of it, and that is deliberate. */
.qm-standpage { background: var(--sand-soft); }

.qm-stand__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px var(--gutter) 0;
}
.qm-stand__head .qm-logo { width: 200px; height: 30.8px; }
.qm-stand__pfew { width: 62px; height: auto; }

.qm-stand__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.qm-stand > .qm-stand__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 56px;
}
.qm-stand__title {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--navy);
  margin-top: 12px;
  text-wrap: balance;
}
.qm-stand__lede {
  margin-top: 18px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.qm-stand__points { margin-top: 26px; }

.qm-stand__form {
  background: var(--surface);
  border-radius: 26px;
  padding: 30px;
  box-shadow: var(--shadow-pop);
}

/* Bigger than the site default: this is a touch target on a tablet held at
   arm's length, not a field clicked with a cursor. */
.qm-form--stand .qm-input { padding: 16px 16px; font-size: 17px; }
.qm-stand__submit {
  width: 100%;
  padding: 20px 24px;
  font-size: 19px;
  margin-top: 4px;
}

/* The consent tick is required, so it has to be unmissable and easy to hit —
   the whole row is the label, not just the 20px box. */
.qm-consentfield { gap: 10px; }
.qm-checkline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--input-bg);
  cursor: pointer;
  font-size: 16px;
  line-height: 1.45;
  color: var(--navy);
}
.qm-checkline input {
  width: 24px;
  height: 24px;
  flex: none;
  margin: 0;
  accent-color: var(--cyan);
  cursor: pointer;
}
.qm-checkline:hover { border-color: var(--navy); }
.qm-consentfield__note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.qm-stand__terms {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 38px 0 44px;
}
.qm-stand__termsh {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.qm-stand__reg {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .qm-stand > .qm-stand__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-top: 28px;
  }
  .qm-stand__head { padding-top: 16px; }
  .qm-stand__head .qm-logo { width: 168px; height: 25.9px; }
}

@media (max-width: 560px) {
  .qm-stand__form { padding: 22px; border-radius: 20px; }
}

/* ---- Sticky mobile call bar ---------------------------------- */
.qm-lpbar { display: none; }

@media (max-width: 980px) {
  .qm-lphero__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .qm-lpform { position: static; }
  .qm-lpsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .qm-lphero { padding: 32px var(--gutter) 44px; }
  .qm-lpsec { padding: 56px var(--gutter); }
  .qm-grid--2,
  .qm-lpsteps { grid-template-columns: minmax(0, 1fr); }
  .qm-lp__headnote { display: none; }
  .qm-lpform { padding: 24px 20px 22px; }
  .qm-lpcta .qm-btn { width: 100%; text-align: center; }

  /* Both conversions, always within reach. The body padding stops the bar
     covering the last of the content or the risk warning. */
  .qm-lpbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line-strong);
  }
  .qm-lpbar a {
    display: block;
    padding: 14px 10px;
    border-radius: 12px;
    text-align: center;
    font-size: 15.5px;
    font-weight: 700;
  }
  .qm-lpbar__call { background: var(--navy); color: #fff; }
  .qm-lpbar__form { background: var(--cyan); color: var(--navy); }
  body.qm-lp { padding-bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .qm-lpform { position: static; }
}

/* ============================================================
   Contact page: ways to reach us
   ============================================================ */

/* One panel, four hairline rows - not four boxes. Boxed tiles in a narrow
   column clumped, and because the rows carry unequal prose the shorter ones
   were stretched to match the taller, leaving dead space inside them. As a
   single card the rail also mirrors the form beside it, so the band reads as
   a matched pair rather than a long side and a short one. */
.qm-crail {
  padding: 4px 30px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
}
.qm-crail__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.qm-crail__item:first-child { border-top: 0; }

.qm-crail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--teal);
}
.qm-crail__icon svg { width: 20px; height: 20px; display: block; }

.qm-crail__h {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.qm-crail__big {
  margin-top: 9px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.qm-crail__big--sm    { margin-top: 7px; font-size: 19px; }
.qm-crail__big--email { font-size: 19px; letter-spacing: -0.02em; }
.qm-crail__big a { color: var(--navy); }
.qm-crail__big a:hover { color: var(--teal); }

/* Inline, not stacked. A label on its own line under every number turned
   four rows into eight, which was most of what made the column feel busy. */
.qm-crail__tag {
  margin-left: 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.qm-crail__note {
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
}
.qm-crail__note strong { color: var(--navy); font-weight: 800; }
.qm-crail__addr {
  margin-top: 9px;
  font-size: 17.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--navy);
  font-style: normal;
}
.qm-crail__link {
  display: inline-block;
  margin-top: 11px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--teal);
}
.qm-crail__link:hover { color: var(--navy); }

/* Days and times sit next to each other rather than spanning the row: the
   rail is wide enough that pushing them apart just opened a gap. */
.qm-chours {
  margin: 9px 0 0;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 20px;
  row-gap: 5px;
}
.qm-chours dt { font-size: 15px; color: var(--ink-3); }
.qm-chours dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy); }

/* Sits under the form to close the gap left by a rail that runs longer, and
   because this is the point at which someone is deciding whether to fill it
   in. Deliberately quiet: it must not compete with the submit button. */
.qm-ftrust {
  margin-top: 18px;
  padding: 20px 24px 22px;
  background: var(--sand-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.qm-ftrust__rating {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.qm-ftrust__rating strong { color: var(--navy); font-weight: 800; }
.qm-ftrust__rating a { color: var(--teal); font-weight: 700; }
.qm-ftrust__rating a:hover { color: var(--navy); }
.qm-ftrust .qm-checklist { margin-top: 14px; gap: 9px; }
.qm-ftrust .qm-checklist li { font-size: 14.5px; padding-left: 27px; }

/* ---- What happens next: its own full-width band --------------- */
.qm-cnext {
  margin-top: 84px;
  padding: 76px var(--gutter);
  background: var(--sand-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.qm-cnext__grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.qm-cnext__step {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
}
.qm-cnext__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
}
.qm-cnext__h {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.qm-cnext__step p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

.qm-creviews { margin-top: 30px; }
.qm-creviews__link { display: inline-block; margin-top: 24px; }

@media (max-width: 1080px) {
  .qm-cnext__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .qm-crail { padding: 4px 26px; }
}
@media (max-width: 620px) {
  .qm-crail { padding: 2px 20px; }
  /* Icon above the text once the row is too narrow to sit beside it. */
  .qm-crail__item { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 22px 0; }
  .qm-crail__icon { margin-bottom: 13px; }
  .qm-crail__big { font-size: 21px; }
  .qm-cnext { margin-top: 56px; padding: 56px var(--gutter); }
  .qm-cnext__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Legal pages: complaints, privacy notice, cookie policy
   ============================================================ */

/* A single measure for the whole page, so the hero, the body and the
   footnote share one left edge. Legal text is read, not scanned - the
   narrower column is the point. */
.qm-legalpage .qm-wrap { max-width: 880px; }

.qm-legalmeta {
  margin-top: 22px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.qm-legalbody { padding: 56px var(--gutter) 88px; }
.qm-legalbody .qm-prose > h2:first-child,
.qm-legalbody .qm-prose > .qm-callout:first-child { margin-top: 0; }

/* Contact blocks and the FOS details: the source documents set these apart
   from the body, and they are the lines someone has actually come for. */
.qm-callout {
  margin: 0 0 26px;
  padding: 24px 26px;
  background: var(--sand-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.qm-callout__h {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.qm-callout__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px 24px;
  margin: 0;
}
.qm-callout__list dt {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
}
.qm-callout__list dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}
.qm-callout__list a { color: var(--teal); font-weight: 600; }
.qm-callout__list a:hover { color: var(--navy); }

.qm-legalfoot {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.qm-legalfoot p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-3);
}
.qm-legalfoot a { color: var(--teal); }

.qm-legalnav {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.qm-legalnav__link {
  display: inline-block;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.qm-legalnav__link:hover { border-color: var(--navy); background: var(--sand); }

/* Cookie names in the tables. */
.qm-prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--sand);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--teal-deep);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .qm-legalbody { padding: 40px var(--gutter) 64px; }
  .qm-callout { padding: 20px; }
  /* Label above value once the two columns stop fitting side by side. */
  .qm-callout__list { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .qm-callout__list dd { margin-bottom: 12px; }
  .qm-callout__list dd:last-child { margin-bottom: 0; }
}

.qm-consent__link { color: var(--cyan-light); text-decoration: underline; }
.qm-consent__link:hover { color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   RATE FINDER  (.qm-rf*)
   The selector in front of the Mortgage Quote best-buy table, plus the
   frame the table itself renders into. Used on the homepage rates band,
   /best-buys/ and /mortgage-bestbuys/.
   ══════════════════════════════════════════════════════════════════ */

.qm-rf { display: grid; gap: 22px; }

/* ── The form ──────────────────────────────────────────────────── */
.qm-rf__form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 14px 16px;
  align-items: end;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.qm-rf__field { display: grid; gap: 6px; min-width: 0; }

.qm-rf__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

.qm-rf__input,
.qm-rf__select {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.qm-rf__input:focus,
.qm-rf__select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 178, 227, 0.18);
}

/* Money fields carry a £ inside the box so the number lines up with it. */
.qm-rf__money { position: relative; }
.qm-rf__money .qm-rf__input { padding-left: 28px; }
.qm-rf__money::before {
  content: "£";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}

.qm-rf__submit { white-space: nowrap; }

/* Hint and error span the full row under the fields. */
.qm-rf__hint,
.qm-rf__error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.86rem;
  min-height: 1.2em;
}
.qm-rf__hint  { color: var(--ink-3); }
.qm-rf__error { color: #B3261E; font-weight: 600; }

/* ── The widget frame ──────────────────────────────────────────── */
.qm-rf__panel {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  padding: 18px;
  /* The table is wide; let it scroll inside the panel rather than pushing
     the page sideways. */
  overflow-x: auto;
}

.qm-rf__frame {
  display: block;
  width: 100%;
  /* Only the pre-measurement reservation, sized to a five-row table so the
     page does not lurch when the real height arrives. rates.js replaces it
     with the frame's own measured height, and sets that !important: this
     declaration otherwise wins over the inline style and clips the table.
     There is deliberately no transition here — height is content-driven,
     and animating it just delays the page settling. */
  height: 520px;
  border: 0;
}

.qm-rf.is-loading .qm-rf__panel { opacity: 0.45; transition: opacity 0.15s var(--ease); }

/* Screen-reader-only live region: announces "Rates updated" after a search,
   which is otherwise a silent change for anyone not looking at the table. */
.qm-rf__status {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* On the navy homepage band the form sits on white, so only the labels and
   surrounding furniture need lightening. */
/* Inside the homepage band the finder is part of the white card rather
   than a card of its own: no gap, no second border, no third radius. */
.qm-rates .qm-rf { gap: 0; }
.qm-rates .qm-rf__form {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.qm-rates .qm-rf__panel { background: var(--surface); padding: 10px 18px 0; }

@media (max-width: 900px) {
  .qm-rf__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qm-rf__submit { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 520px) {
  .qm-rf__form { grid-template-columns: 1fr; padding: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   FULL-WIDTH TOOL EMBEDS  (.qm-tool*)
   The mortgage filter and the search tool render themselves into the
   page directly — one instance per page, no re-injection — so they do
   not need the frame treatment the best-buy table gets.
   ══════════════════════════════════════════════════════════════════ */

.qm-tool {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}

.qm-tool__note {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--ink-3);
}

/* Lender carousel band. */
.qm-lenders { padding: 40px 0 8px; }
.qm-lenders__h {
  margin: 0 0 18px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}