/* Greenfield Bridging — /quotes, the quote landing page, and quotes-thank-you.html.

   Loaded after css/site.css and reuses its shared pieces: .btn, .eyebrow, .accent-bar,
   .field, .field__error, .honeypot, .form-status, .callback-risk, .plus, .use-body,
   .rv-stars and the footer. Radius 0, no shadows, no icons, one hue, body copy 300.

   Built from the client's mock (1.html, 14 September 2026): its section order, its layout
   and its white header, but in the house system rather than the mock's own styling. The
   mock used drop shadows, a pulsing dot, tick / star / arrow glyphs, 700 weights, a blurred
   translucent header and a teal-700 fill band. None of those survive. Each was swapped for
   the nearest thing the system already has — stars are the review ribbon's teal squares,
   ticks are the 5px teal square the event terms list uses, the teal-700 band is ink. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Smooth scrolling to #quote, and only for visitors who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* A solid button for white and paper grounds. The shared .btn--solid is teal-400 with ink
   text, drawn for ink bands; on white its fill barely separates from the page. Teal-700
   with white text is the same hue at a strength that reads as the action. */
.btn--teal { background: var(--gf-teal-700); color: #FFFFFF; padding: 16px 26px; border: 0; }
.btn--teal:hover { background: var(--gf-teal-900); color: #FFFFFF; }

/* ---------- Top strip — ink ---------- */
/* Scrolls away; only the bar below it sticks. It sits outside <header> on purpose: a
   sticky element can only stick within its parent, so a strip inside the header would
   pin the header to its own height and it would scroll off with it. */
.qt-strip { background: var(--gf-teal-900); }
.qt-strip .wrap {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  padding-top: 9px; padding-bottom: 9px;
  font-size: 13px; font-weight: 300; line-height: 1.45; text-align: center;
  color: rgba(255,255,255,0.86);
}
.qt-strip p { margin: 0; }
/* A figure, so it takes the serif, as every figure on the site does. */
.qt-strip strong { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; }
.qt-strip-sep { color: rgba(255,255,255,0.42); }

/* ---------- Header — white, sticky ---------- */
/* White, as in the mock, and not the site header: a landing page carries no navigation —
   every link out is a visitor leaving before the form — so this bar is the logo, the
   number and the one action. Sticky rather than fixed, so nothing below it has to be
   offset by its height. A hairline, not a shadow, separates it from the page. */
.qt-header {
  position: sticky; top: 0; z-index: 20;
  background: #FFFFFF;
  border-bottom: 1px solid var(--gf-line-200);
}
.qt-bar { display: flex; align-items: center; gap: 28px; min-height: 80px; }
.qt-logo { flex: 0 0 auto; margin-right: auto; }
.qt-logo img { width: 156px; height: auto; display: block; }
.qt-phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; color: var(--gf-teal-900); }
.qt-phone:hover { color: var(--gf-teal-700); }
.qt-phone-number { font-family: var(--font-serif); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; }
.qt-phone-note {
  margin-top: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gf-slate-500);
}
.qt-bar-cta { flex: 0 0 auto; padding: 15px 24px; }

/* ---------- 1. Hero — ink, with the form ---------- */
.qt-hero { position: relative; overflow: hidden; background: var(--gf-teal-900); }
.qt-hero-photo {
  position: absolute; inset: 0;
  background-image: url("../assets/quotes-new-build.jpg");
  background-size: cover; background-position: center 30%;
}
/* A photo scrim, like the homepage hero's. Heavier than that one, because here the
   photograph is only a ground: the copy and a form both sit on top of it. */
.qt-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #0A2626 0%, rgba(10,38,38,0.93) 46%, rgba(10,38,38,0.8) 100%);
}
/* Wider than the site's 1180px wrap, as the mock is: the form column is 540px and the
   headline still needs room beside it. */
.qt-hero .wrap { max-width: 1260px; }

/* Three areas. Above 900px the pitch runs down the left (top, then rest) with the form
   spanning both rows on the right. Below, they stack top / panel / rest, which puts the
   form directly under the headline on a phone — the first screen shows what the page is
   and where to start, rather than four selling points and a rating. */
.qt-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  grid-template-areas: "top panel" "rest panel" "risk risk";
  grid-template-rows: auto 1fr auto;
  column-gap: 60px; align-items: start;
  padding-top: 56px; padding-bottom: 56px;
}
.qt-pitch-top { grid-area: top; padding-top: 10px; }
.qt-pitch-rest { grid-area: rest; }
.qt-panel { grid-area: panel; }
/* .callback-risk is the shared rule; this only places it. */
.qt-hero .callback-risk { grid-area: risk; margin-top: 44px; }

.qt-eyebrow { margin-top: 22px; }
.qt-title {
  margin: 18px 0 0; max-width: 14ch;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 66px); line-height: 1.03; letter-spacing: -0.02em;
  color: #FFFFFF; text-wrap: balance;
}
.qt-lead {
  margin: 22px 0 0; max-width: 46ch;
  font-weight: 300; font-size: 18.5px; line-height: 1.55; color: rgba(255,255,255,0.86);
}

/* The mock's tick chips. No glyphs, so each point takes the 5px teal square — the accent
   bar's shape at list scale — and a hairline above it. */
.qt-points {
  list-style: none; margin: 32px 0 0; padding: 0; max-width: 540px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px;
}
.qt-points li {
  position: relative; padding: 13px 0 13px 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 15.5px; font-weight: 400; line-height: 1.4; color: #FFFFFF;
}
.qt-points li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 5px; height: 5px; background: var(--gf-teal-400);
}

.qt-trust {
  display: flex; flex-wrap: wrap; gap: 20px 48px;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.42);
}
.qt-trust-figure {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: #FFFFFF;
}
.qt-trust-note { margin: 5px 0 0; font-size: 13px; font-weight: 300; line-height: 1.4; color: rgba(255,255,255,0.66); }

/* ---------- The form panel ---------- */
/* White on ink, no shadow: the contrast is the edge. Sized to the mock — a 540px column,
   32px of side padding and tall controls — because a quote form that looks cramped reads
   as more effort than it is. --form-negative is full-strength clay, as on the event panel:
   the lightened callback value exists only because the token fails on ink, and this panel
   is white. */
.qt-panel { background: #FFFFFF; scroll-margin-top: 100px; --form-negative: var(--gf-clay); }
.qt-panel-head { background: var(--gf-teal-700); padding: 24px 32px 22px; }
.qt-panel-title {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; color: #FFFFFF;
}
/* Full white, not 0.86: white at 0.86 on teal-700 falls under 4.5:1 at this size. */
.qt-panel-sub { margin: 7px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.45; color: #FFFFFF; }

.qt-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px;
  padding: 30px 32px 32px;
}
.qt-wide { grid-column: 1 / -1; }

/* site.css paints .field-label teal-400 for the ink callback band; on white it is far too
   pale. Teal-900 is the same hue at full strength. */
.qt-form .field-label { color: var(--gf-teal-900); margin-bottom: 8px; }

/* A white panel needs ruled inputs — the shared ones are borderless white boxes, drawn for
   an ink band. 16px at every width, not only below 900px: iOS zooms the page in on focus
   under 16px and does not zoom back out, and tablets sit above that breakpoint. */
.qt-form .field input:not([type="radio"]):not([type="checkbox"]),
.qt-form .field select {
  width: 100%; margin: 0; min-height: 54px;
  background: #FFFFFF; border: 1px solid var(--gf-line-300); border-radius: 0;
  padding: 15px 16px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 300; line-height: 1.3;
  color: var(--gf-slate-700);
  transition: border-color 120ms linear;
}
.qt-form .field input:not([type="radio"]):not([type="checkbox"]):hover,
.qt-form .field select:hover { border-color: var(--gf-slate-400); }
.qt-form input:focus, .qt-form select:focus { outline: 2px solid var(--gf-teal-700); outline-offset: 0; }
.qt-form select[aria-invalid="true"] { outline: 2px solid var(--form-negative); outline-offset: 0; }

/* appearance:none because Safari will not square off a native select any other way. That
   also removes the dropdown arrow, and the system has no icon to put back, so the closed
   control is identified by its "Please choose" wording — greyed while nothing is chosen. */
.qt-form .field select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.qt-form .field select:invalid { color: var(--gf-slate-500); }
.qt-form .field select option { color: var(--gf-slate-700); }

/* The amount choice. Real radio inputs, laid out as a row of squared buttons. The input is
   kept focusable and in the tab order; only its drawing is hidden, and the span beside it
   takes the checked and focus states. */
.qt-form fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; }
/* A legend ignores margin in some engines unless it is floated out of the fieldset border. */
.qt-form legend.field-label { float: left; width: 100%; padding: 0; }
.qt-choice-row { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qt-option { position: relative; display: block; cursor: pointer; }
.qt-form .qt-option input {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; opacity: 0;
}
.qt-option span {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 10px 8px;
  border: 1px solid var(--gf-line-300); background: #FFFFFF;
  font-size: 15px; font-weight: 400; line-height: 1.25; text-align: center;
  color: var(--gf-slate-700);
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
/* The amounts are figures, so they take the serif. */
.qt-option--figure span { font-family: var(--font-serif); font-size: 17px; letter-spacing: -0.02em; }
.qt-option:hover span { border-color: var(--gf-teal-700); color: var(--gf-teal-900); }
.qt-option input:checked + span { background: var(--gf-teal-700); border-color: var(--gf-teal-700); color: #FFFFFF; }
.qt-option input:focus-visible + span { outline: 2px solid var(--gf-teal-900); outline-offset: 2px; }
/* Keyed off the group's error slot rather than each radio's aria-invalid. form.js marks every
   radio in an unanswered group, but choosing one only clears the one chosen — so a per-radio
   rule would leave the other options outlined in clay after the question was answered. The
   shared slot is hidden the moment any option is picked. */
.qt-choice:has(> .field__error:not([hidden])) .qt-option span { border-color: var(--form-negative); }

/* Consent to be contacted about this quote. Required; not marketing consent; not pre-ticked. */
.qt-consent {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--gf-slate-600);
  cursor: pointer;
}
.qt-form .qt-consent input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; padding: 0;
  accent-color: var(--gf-teal-700);
}
.qt-form .qt-consent input[aria-invalid="true"] { outline: 2px solid var(--form-negative); outline-offset: 1px; }
.qt-consent-field .field__error { margin-left: 32px; }

.qt-submit { width: 100%; padding: 21px 20px; font-size: 17px; text-align: center; }
/* Social proof at the point of decision, where it does the most work. */
.qt-proof {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  margin: 14px 0 0; font-size: 13px; font-weight: 300; color: var(--gf-slate-600);
}
.qt-proof .rv-stars i { width: 10px; height: 10px; }

/* ---------- 2. Figures — paper ---------- */
/* Gap-rule grid: the 1px gap over line-200 IS the rule, and each cell paints its own paper
   so the container colour cannot wash the block. Pulled out by the cell padding so the
   figures line up with the page gutter above and below. */
.qt-facts { background: var(--gf-paper); border-bottom: 1px solid var(--gf-line-300); }
.qt-facts-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--gf-line-200); margin: 0 -24px;
}
.qt-fact { margin: 0; background: var(--gf-paper); padding: 30px 24px 28px; }
.qt-fact dt {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(28px, 2.8vw, 36px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--gf-teal-900);
}
.qt-fact:first-child dt { color: var(--gf-teal-700); }
.qt-fact dd { margin: 8px 0 0; font-size: 14px; font-weight: 300; line-height: 1.4; color: var(--gf-slate-600); }

/* ---------- Shared section furniture ---------- */
.qt-section .wrap { padding-top: 76px; }
.qt-h2 {
  margin: 14px 0 0; max-width: 22ch;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--gf-teal-900); text-wrap: balance;
}
.qt-sub { margin: 16px 0 0; max-width: 56ch; font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--gf-slate-700); }
.qt-inline-cta { margin: 28px 0 0; }

/* ---------- 3. Three steps — paper ---------- */
.qt-steps {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--gf-line-200);
}
.qt-step { background: #FFFFFF; padding: 30px 28px 32px; }
.qt-step-top { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
/* Teal-700, not the mock's teal-400: teal-400 on white is about 2:1, even at 44px. */
.qt-step-num { font-family: var(--font-serif); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--gf-teal-700); }
.qt-step-time { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gf-slate-500); }
.qt-step-title {
  margin: 18px 0 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 21px; line-height: 1.22; letter-spacing: -0.02em; color: var(--gf-teal-900);
}
.qt-step-body { margin: 10px 0 0; font-size: 15.5px; font-weight: 300; line-height: 1.55; color: var(--gf-slate-700); }

/* ---------- 4. What we lend on — paper ---------- */
.qt-uses-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.qt-textlink {
  flex: 0 0 auto; padding-bottom: 4px; border-bottom: 2px solid var(--gf-teal-400);
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gf-teal-700);
}
.qt-uses {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--gf-line-200);
}
.qt-use { background: #FFFFFF; padding: 28px 26px 28px; transition: background-color 120ms linear; }
.qt-use:hover { background: var(--gf-paper-sunk); }
.qt-use-kicker {
  margin: 0; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gf-teal-700);
}
.qt-use-body { margin: 12px 0 0; font-size: 15.5px; font-weight: 300; line-height: 1.55; color: var(--gf-slate-700); }

/* ---------- 5. Why us — ink split, photo left ---------- */
/* The mock puts the photograph on the left. The system's one gradient, --gf-photo-scrim,
   runs from ink on the LEFT, for a photo sitting right of its copy (the homepage split).
   Mirroring the scrim element keeps the token exactly as defined and puts the ink edge
   where this copy is. */
.qt-split { margin-top: 76px; }
.qt-split-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; min-height: 460px; background: var(--gf-teal-900); }
.qt-split-photo {
  position: relative; min-height: 340px;
  background-image: url("../assets/quotes-house-dusk.jpg");
  background-size: cover; background-position: center 40%;
}
.qt-split-scrim { position: absolute; inset: 0; background: var(--gf-photo-scrim); transform: scaleX(-1); }
.qt-split-copy {
  padding: 64px clamp(40px, 5vw, 96px); max-width: 720px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.qt-split-copy .eyebrow { margin-top: 26px; }
.qt-split-title {
  margin: 14px 0 0; max-width: 20ch;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: #FFFFFF;
}
.qt-reasons { list-style: none; margin: 28px 0 0; padding: 0; max-width: 52ch; }
.qt-reasons li { padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.18); }
.qt-reasons li:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }
.qt-reason-title {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; color: #FFFFFF;
}
.qt-reason-body { margin: 6px 0 0; font-size: 15.5px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,0.86); }
.qt-split-copy .btn { margin-top: 30px; }

/* ---------- 6. Reviews — tint ---------- */
/* Tint, so the ink split above steps down into it rather than into bare paper. */
.qt-reviews { background: var(--gf-teal-050); border-top: 2px solid var(--gf-teal-900); }
.qt-reviews .wrap { padding-top: 64px; padding-bottom: 60px; }
.qt-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.qt-rating-figure { font-family: var(--font-serif); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; color: var(--gf-teal-900); }
.qt-rating-note { font-size: 14px; font-weight: 300; color: var(--gf-slate-600); }
.qt-review-grid {
  margin: 34px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--gf-line-200);
}
.qt-review { margin: 0; background: #FFFFFF; padding: 28px 28px 26px; display: flex; flex-direction: column; }
.qt-review blockquote { margin: 16px 0 0; }
.qt-review blockquote p {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 18.5px; line-height: 1.45; letter-spacing: -0.01em; color: var(--gf-teal-900);
}
.qt-review figcaption { margin-top: auto; padding-top: 20px; font-size: 13px; font-weight: 500; color: var(--gf-slate-600); }

/* ---------- 7. FAQ — paper ---------- */
/* The homepage accordion, re-skinned. js/main.js binds to the [data-uses] container and its
   [data-row] / [data-head] children whatever they are called, and site.css already animates
   .use-body and the plus mark — so only the open state needs restating for this row class. */
.qt-faq-wrap { max-width: 860px; }
.qt-faq { margin: 30px 0 0; border-top: 2px solid var(--gf-teal-900); }
.qt-faq-item { border-bottom: 1px solid var(--gf-line-300); }
.qt-faq-item h3 { margin: 0; font: inherit; letter-spacing: normal; }
.qt-faq-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; margin: 0; padding: 22px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-serif); font-weight: 400; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--gf-teal-900);
  transition: color 120ms linear;
}
.qt-faq-head:hover { color: var(--gf-teal-700); }
.qt-faq-item[data-open="1"] .use-body { grid-template-rows: 1fr; opacity: 1; }
.qt-faq-item[data-open="1"] .plus::after { opacity: 0; }
.qt-faq .use-body p { max-width: 68ch; padding: 0 44px 24px 0; font-size: 16px; line-height: 1.6; }

/* ---------- 8. Closing call to action — ink ---------- */
/* The mock's teal-700 fill band, as ink: the system has three surfaces and a teal-700 band
   is not one of them. Paper FAQ above, paper footer below, so ink never meets ink. */
.qt-cta { background: var(--gf-teal-900); margin-top: 76px; }
.qt-cta .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px;
  padding-top: 60px; padding-bottom: 64px;
}
.qt-cta-copy { flex: 1 1 420px; min-width: 0; }
.qt-cta-title {
  margin: 22px 0 0; max-width: 22ch;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: #FFFFFF;
}
.qt-cta-lead { margin: 14px 0 0; max-width: 50ch; font-size: 17px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,0.86); }
.qt-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Thank-you page ---------- */
.qt-ty .wrap { padding-top: 64px; padding-bottom: 64px; }
.qt-ty .qt-title { max-width: 18ch; font-size: clamp(36px, 4.2vw, 56px); }
.qt-ty .qt-lead { max-width: 52ch; }
.qt-ty-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.qt-next .wrap { padding-bottom: 76px; }
/* Two steps, not three. Left in the three-column grid, the empty third track shows the
   line-200 container colour as a grey block — the gap-rule grid's one failure mode. */
.qt-next .qt-steps { grid-template-columns: repeat(2, 1fr); }

/* ---------- The phone and tablet dock ---------- */
/* Call and quote, pinned to the foot of the screen below 900px. Hidden on desktop, where
   the sticky header already carries both. The body is padded by the dock's height so it
   can never cover the footer's last line — the regulatory copy is what sits there. */
.qt-dock { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1140px) {
  .qt-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); column-gap: 40px; }
  .qt-points { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .qt-bar { min-height: 64px; gap: 18px; }
  .qt-logo img { width: 124px; }
  .qt-phone-number { font-size: 20px; }
  .qt-bar-cta { padding: 12px 18px; }

  .qt-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "panel" "rest" "risk";
    grid-template-rows: auto;
    padding-top: 36px; padding-bottom: 44px;
  }
  .qt-pitch-top { padding-top: 0; }
  .qt-panel { margin-top: 30px; scroll-margin-top: 72px; }
  /* Stacked from here down: a wrapped row would strand the separator at a line end. */
  .qt-strip .wrap { flex-direction: column; gap: 2px; }
  .qt-strip-sep { display: none; }
  .qt-points { grid-template-columns: 1fr 1fr; margin-top: 36px; }
  .qt-hero .callback-risk { margin-top: 32px; }

  .qt-facts-grid { grid-template-columns: 1fr 1fr; margin-inline: calc(-1 * var(--wrap-pad)); }
  .qt-fact { padding-inline: var(--wrap-pad); }
  .qt-steps { grid-template-columns: 1fr; }
  .qt-uses { grid-template-columns: 1fr 1fr; }
  .qt-review-grid { grid-template-columns: 1fr; }
  .qt-split-grid { grid-template-columns: 1fr; }
  .qt-split-photo { min-height: 280px; }
  .qt-split-copy { max-width: none; padding: 52px var(--wrap-pad) 56px; }
  .qt-next .qt-steps { grid-template-columns: 1fr; }

  .qt-dock {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--gf-teal-900); border-top: 2px solid var(--gf-teal-400);
    padding: 10px var(--wrap-pad) calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .qt-dock .btn { flex: 1 1 0; text-align: center; }
  .qt-dock .btn--solid { padding: 15px 10px; }
  .qt-dock .btn--outline { padding: 14px 10px; }
  .qt-page { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 620px) {
  .qt-strip .wrap { font-size: 12.5px; }
  /* The dock carries the quote button at this width; the bar keeps the number. */
  .qt-bar-cta, .qt-phone-note { display: none; }
  .qt-logo img { width: 110px; }
  .qt-phone-number { font-size: 19px; }

  .qt-hero-grid { padding-top: 28px; }
  .qt-title { font-size: 36px; }
  .qt-lead { font-size: 16.5px; margin-top: 16px; }
  .qt-points { grid-template-columns: 1fr; }
  .qt-trust { gap: 18px 32px; }
  /* Edge to edge: on a phone the form is the page, and a 20px ink margin either side of
     it only narrows the fields. */
  .qt-panel { margin-inline: calc(-1 * var(--wrap-pad)); margin-top: 26px; }
  .qt-panel-head { padding: 20px var(--wrap-pad) 18px; }
  .qt-panel-title { font-size: 25px; }
  .qt-form { grid-template-columns: 1fr; gap: 18px; padding: 24px var(--wrap-pad) 26px; }

  .qt-section .wrap { padding-top: 52px; }
  .qt-fact { padding-top: 24px; padding-bottom: 22px; }
  .qt-fact dt { font-size: 26px; }
  .qt-uses { grid-template-columns: 1fr; }
  .qt-split, .qt-cta { margin-top: 52px; }
  .qt-reviews .wrap { padding-top: 48px; padding-bottom: 44px; }
  .qt-review { padding: 24px 22px 22px; }
  .qt-faq-head { padding: 18px 0; font-size: 18px; }
  .qt-faq .use-body p { padding-right: 0; font-size: 15.5px; }
  .qt-cta .wrap { padding-top: 44px; padding-bottom: 48px; }
  .qt-cta-actions, .qt-cta-actions .btn, .qt-ty-actions .btn, .qt-inline-cta .btn { width: 100%; text-align: center; }
  .qt-ty .wrap { padding-top: 44px; padding-bottom: 48px; }
  .qt-ty .qt-title { font-size: 34px; }
}
/* Three amounts on a 320px phone leave about 90px a button — too narrow for "£75k – £250k". */
@media (max-width: 420px) {
  .qt-choice-row { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .qt-logo img { width: 96px; }
  .qt-phone-number { font-size: 16px; }
}