@charset "utf-8";

/* ==========================================================================
   Credible Finance & Mortgages — site.css
   --------------------------------------------------------------------------
   One stylesheet for all ten pages. Editorial, ruled, calm.

   Type      Source Serif 4 (20pt, regular) -- the logo's own serif -- for
             headings, the adviser's name and the big calculator figure.
             Be Vietnam Pro 400-700 for everything else, including every
             number that changes, set in tabular figures. Nothing is italic.
   Colour    Purple, white and black: the client's scheme (18 Oct 2026).
             The brand purple #5b2c82 is the ONLY purple. It is 9.9:1 on
             white, so it carries type at any size and white type sits on it
             at any size. Tints #f5f2f8 / #ebe6f0 / #cec0d9 / #b5a0c7 are
             washes and hairlines. Headings purple; body black on white.
             Buttons: purple fill with a white label, or white with a purple
             outline and a black label.
   Layout    One 1280px grid with 40px gutters. Rules and aligned columns,
             not cards. Less is better: the homepage is the slider, one
             application block, one calculator and the footer.
   No inline <style> or <script> ships: the CSP is style-src 'self'.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
/* The client's logo sets CREDIBLE in Source Serif 4, Regular, at its 20pt
   optical size -- matched glyph for glyph against the artwork. That exact cut
   is the serif here. The descriptor under it is a Canva face that is not
   available to self-host; Be Vietnam Pro is the nearest match to it, measured
   across both lines, and carries everything that is not a heading. Latin
   subsets, upright only: the client wants no italics. */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-20pt-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/be-vietnam-pro-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/be-vietnam-pro-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/be-vietnam-pro-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/be-vietnam-pro-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  --brand: #5b2c82;          /* the brand purple: headings, panels, marks */
  --brand-rgb: 91 44 130;    /* the same purple, for a gradient with an alpha */
  --wash: #f5f2f8;           /* 6% wash: calculator panel, form success  */
  --wash-2: #ebe6f0;         /* 12% wash: hover fills                    */
  --tint-line: #cec0d9;      /* purple hairline where one is wanted      */
  --tint-line-strong: #b5a0c7;

  --ink: #161616;            /* 17.4:1 on white                          */
  --muted: #5b5f5b;          /*  6.0:1 on white — meta, hints, notes     */
  --rule: #dfe3df;           /* the hairline                             */
  --rule-strong: #b9beb9;
  --white: #ffffff;

  --error: #9d2f22;
  --error-lt: #f3b7ad;
  --error-wash: #fdf6f4;

  /* Every rule in this file reaches type through these two. --serif is
     display only (headings, the figure); --sans carries everything else. */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif;
  --fallback-serif: Georgia, "Times New Roman", serif;
  --fallback-sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif;

  --wrap: 1280px;
  --gutter: 40px;
  --section: 88px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 0.18s;
  --radius: 3px;
}

/* ---------------------------------------------------------------- reset -- */
main {
  flex: 1 0 auto;
}


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  accent-color: var(--brand);
}

body {
  margin: 0;
  /* A column as tall as the window, so the purple footer sits at the foot of
     a short page (thanks, 404) instead of floating above white. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-underline-offset: 0.16em;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tint-line-strong);
}

a:hover {
  text-decoration-color: var(--ink);
}

p {
  margin: 0 0 1em;
}

/* Balanced: Source Serif is a wide face, and balancing keeps the last line of
   a heading from being left with one word on it. */
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  color: var(--brand);
  text-wrap: balance;
}

/* No italics anywhere in the content: the client's rule. The browser sets
   these in italic by default, so any added later stays upright too. */
em,
i,
cite,
address,
dfn,
var {
  font-style: normal;
}

h1 {
  font-size: clamp(44px, 5.6vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.012em;
}

h2 {
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h3 {
  font-size: 26px;
  line-height: 1.12;
}

h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.2em;
}

strong,
b {
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}

::selection {
  background: var(--brand);
  color: var(--white);
}

/* ------------------------------------------------------- focus and a11y -- */

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 999;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 12px;
  color: var(--white);
}

/* The back-to-top control parks focus here so the next Tab starts at the
   top; that should not flash the chip at someone using a mouse. */
.skip-link:focus:not(:focus-visible) {
  top: -100px;
}

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

/* --------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  max-width: 840px;
}

/* Sections stack with space above; the closing CTA band supplies the last
   gap. A page whose <main> is itself the section (contact.php's error page)
   and any section marked .section-end get space below as well. */
.section {
  padding-top: var(--section);
}

main.section,
.section-end {
  padding-bottom: var(--section);
}

.section-tight {
  padding-top: 56px;
}

/* Section heads: a numbered kicker on the left, an optional counter-line or
   link on the right, then the heading (and lede). Since 19 Oct 2026 no block
   opens on an ink rule: sections are set apart by space and the kicker, and
   hairlines (--rule) are kept only for the rows of a list or table. */
.section-head {
  margin-bottom: 40px;
}

.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 36px;
}

.section-head-row:last-child {
  margin-bottom: 0;
}

.kicker {
  margin: 0;
  text-wrap: balance;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

.counter {
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* An arrow link: "Home loans →". The arrow is drawn, not typed, so screen
   readers get the words only. */
.more {
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: var(--tint-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  /* A 44px hit box: the padding is cancelled by the margin, so the link sits
     exactly where the 18px line of text would. */
  padding-block: 13px;
  margin-block: -13px;
  white-space: nowrap;
}

.more::after {
  content: "\2192";
  margin-left: 0.35em;
}

.more:hover {
  text-decoration-color: var(--brand);
  color: var(--ink);
}

/* Two-column split: heading and lede on the left, the body on the right. */
.two {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}

.two-even {
  grid-template-columns: 1fr 1fr;
}

.lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 46ch;
  margin: 0;
  }

.lede + .lede {
  margin-top: 16px;
}

/* Inside .two the heading and the lede are two grid columns side by side,
   not a stacked pair, so the adjacent-sibling spacing below must not reach
   them: it was pushing the right column 22px down, which is why the heading
   and the paragraph beside it never lined up. When .two stacks on a narrow
   screen the grid's own gap does that spacing instead. */
.two > h2 + .lede,
.two > h1 + .lede {
  margin-top: 0;
}

h2 + .lede,
h1 + .lede {
  margin-top: 22px;
}

/* A forced break in a headline, set for the desktop measure; on narrower
   screens the line wraps on its own. The hero's break is the sentence's own
   and stays at every width. */
.br-wide {
  display: inline;
}

/* Justified black body copy, the client's preference, in one place: the
   section-head ledes and the reading-column paragraphs on the inner pages.
   Hyphenation is not optional with it -- at these measures unhyphenated
   justification opens rivers between the words. Below 48rem the measure is
   too short to justify at all, so phones get a ragged edge. Lists keep their
   ragged edge everywhere: an item that runs a line and a half looks
   stretched, not set. */
@media (min-width: 48rem) {
  .lede,
  .prose p,
  .about p,
  .adviser-line {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  /* The review notes are narrow; justified they open rivers. */
  .prose p.callout {
    text-align: start;
  }
}

.lede-lg {
  font-size: 19px;
  max-width: 36em;
}

.note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* Callout with a purple left bar ("Please don't email documents yet").
   Black text; the title may be purple. */
.callout {
  margin: 28px 0 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--brand);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 62ch;
}

.callout p {
  margin: 0;
}

.callout p + p {
  margin-top: 0.6em;
}

.callout strong {
  font-weight: 600;
  color: var(--brand);
}

/* A fact the client has to confirm before the site goes live. Drawn as a
   review note, not as content; verify.py lists every one and refuses a
   release while any remains. */
.callout[data-confirm] {
  margin-top: 20px;
  padding: 12px 16px;
  border-left-color: var(--error);
  background: var(--error-wash);
  font-size: 14.5px;
}

.callout[data-confirm] strong {
  color: var(--error);
}

/* Bullet list with a short purple dash. */
.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15.5px;
  line-height: 1.5;
}

.bullets li {
  position: relative;
  padding: 5px 0 5px 20px;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 10px;
  height: 2px;
  background: var(--brand);
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}

.btn:hover {
  background: var(--wash-2);
  border-color: var(--brand);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The one filled button: purple with a white label (9.9:1). */
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

/* On a purple field the filled button turns white; the label stays black. */
.photo-hero .btn-primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.photo-hero .btn-primary:hover {
  background: var(--wash-2);
  border-color: var(--wash-2);
}

.btn-lg {
  padding: 14px 26px;
  font-size: 16px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin: 28px 0 0;
}

.btn-row p {
  margin: 0;
}

/* -------------------------------------------------------------- header -- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 92px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: block;
  flex: none;
  line-height: 0;
  text-decoration: none;
}

/* The client's own logo artwork (18 Oct 2026), recoloured for a white
   ground: the roof, CREDIBLE and the bracket in the brand purple, nothing
   else changed. Set by height; the descriptor is part of the artwork. */
.brand {
  --mark-h: 96px;
}

.brand img {
  height: var(--mark-h);
  width: auto;
  display: block;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 8px 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--rule-strong);
}

.site-nav a[aria-current="page"] {
  font-weight: 600;
  border-bottom-color: var(--brand);
}

.head-cta {
  flex: none;
}

/* Inside the nav: only used on phones, where the header row is too narrow
   for the button. Hidden everywhere else. */
.nav-cta {
  display: none;
  margin: 0;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle-bars {
  position: relative;
  width: 16px;
  height: 10px;
  flex: none;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.nav-toggle-bars span:nth-child(1) {
  top: 0;
}

.nav-toggle-bars span:nth-child(2) {
  top: 4.25px;
}

.nav-toggle-bars span:nth-child(3) {
  top: 8.5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(4.25px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-4.25px) rotate(-45deg);
}

/* ----------------------------------------------------------- photo hero -- */
/* The tagline first, the photographs second. The hero sits on the page's
   white: the kicker, the headline in the brand purple and the caption line
   on the page grid; then the photograph, inset on the same grid with hard
   edges and the page's radius and nothing laid over it; then one quiet row
   under it -- the three services as the picker on the left, previous /
   next / pause on the right. Purple only in the type, the picker's line and
   the round outline buttons: the slider itself is the picture and nothing
   else.

   The hero is a four-column grid. The outer two are lead columns that put
   the inner two on the page grid -- the wrap's content edges, so the kicker
   sits on the header logo's line -- and are worked out from the viewport
   the way the wrap is centred. The head and the picture span both inner
   columns; the picker takes the second, the buttons the third.

   Below 900px the picker drops its names (the kicker above still names the
   three) and its lines share the row with the buttons, where a thumb
   reaches them; the picture is 3:2 on a tablet and 4:3 on a phone. */

.photo-hero {
  --lead: max(var(--gutter), 50% - var(--wrap) / 2 + var(--gutter));
  display: grid;
  grid-template-columns: var(--lead) minmax(0, 1fr) auto var(--lead);
  padding-bottom: 8px;
  background: var(--white);
  color: var(--ink);
}

/* The head: kicker, headline, the caption line, across the grid. */
.hero-head {
  grid-column: 2 / 4;
  grid-row: 1;
  padding: 48px 0 28px;
}

/* The three services on one line; each is kept whole with its own
   separator, so a narrow screen breaks the line between them and never
   after a dot. */
.photo-hero .kicker {
  margin: 0 0 16px;
}

.photo-hero .kicker span {
  display: inline-block;
}

.photo-hero .kicker span:not(:first-child)::before {
  content: "\00b7\00a0";
}

/* Set as the inner pages' h1, a size over it, on ONE line: as wide as the
   picture under it, so the two edges of the hero answer each other. The
   sizes are chosen so the line fits the grid at every width down to 640px
   (1077px at 60px; 718px at 40px); a phone breaks it where the sentence
   breaks. */
.photo-hero h1 {
  margin: 0;
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1.02;
  white-space: nowrap;
}

.photo-hero .br-wide {
  display: none;
}

/* One line per slide, swapped by site.js behind a short cross-fade: what the
   photograph is about, then the way in to that service. */
.hero-caption {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  transition: opacity 0.22s var(--ease);
}

.hero-caption.is-swapping {
  opacity: 0;
}

.hero-caption-link {
  color: var(--brand);
  font-weight: 600;
  text-decoration-color: var(--tint-line-strong);
  text-underline-offset: 4px;
  white-space: nowrap;
}

.hero-caption-link:hover {
  text-decoration-color: var(--brand);
}

/* The picture: inset on the grid at the photographs' own 2.2:1, capped so
   the whole hero stays inside a desktop's first screen (the cap crops a
   little off the top and bottom). The width is set outright: with it left
   auto the browser carries the height cap back through the ratio into a
   width cap, and the picture stops short of the grid's right edge while
   the buttons sit on it. Its own stacking context, so the slides' z-order
   never climbs over the controls. */
.carousel {
  grid-column: 2 / 4;
  grid-row: 2;
  position: relative;
  width: 100%;
  aspect-ratio: 2400 / 1091;
  max-height: 520px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--wash);
  isolation: isolate;
}

.carousel-track {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
}

/* The incoming slide fades in over the outgoing one, which stays opaque
   underneath until it is covered, so the frame never dips to the wash. */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.slide.is-current {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease);
}

.slide.is-leaving {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

/* Each photograph is 2.2:1. At a desk the frame is the picture's own
   shape, give or take the cap; on a tablet and a phone it is squarer and
   the crop is at the sides, so each is framed on its subject: the big
   white house under the moon; the townhouses' dormers; the model house. */
.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.slide:nth-child(1) img {
  object-position: 60% 50%;                /* the big house sits right of centre */
}

.slide:nth-child(3) img {
  object-position: 68% 50%;                /* the model house hangs two-thirds across */
}

/* Both control groups stay hidden until site.js has taken the slides. */
.hero-controls[hidden] {
  display: none;
}

/* The picker: the three names, each over a 2px line -- the light tint at
   rest and, on the current one, the brand purple filling along it over the
   5 s the slide shows for, holding while a pointer rests on the hero and
   standing full once the slides have been stopped. */
.hero-tabs {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  gap: 24px;
  padding-top: 12px;
}

.hero-tab {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: flex-start;
  min-width: 96px;
  min-height: 44px;
  padding: 10px 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  transition: color var(--speed) var(--ease);
}

.hero-tab:hover,
.hero-tab[aria-current="true"] {
  color: var(--brand);
}

.hero-tab::before,
.hero-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
}

.hero-tab::before {
  background: var(--tint-line);
}

.hero-tab::after {
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.hero-tab[aria-current="true"]::after {
  transform: scaleX(1);
}

@keyframes hero-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.photo-hero.is-playing .hero-tab[aria-current="true"]::after {
  animation: hero-fill 5s linear both;
  animation-play-state: paused;
}

.photo-hero.is-rotating .hero-tab[aria-current="true"]::after {
  animation-play-state: running;
}

/* Previous, next and pause at the row's right: round outline buttons. */
.hero-nav {
  grid-column: 3;
  grid-row: 3;
  display: flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  margin-left: 40px;
  padding-top: 12px;
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--brand);
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  cursor: pointer;
  transition: background-color var(--speed) var(--ease);
}

.carousel-btn:hover {
  background: var(--wash-2);
}

/* Fixed icon boxes: the global svg rule's max-width would otherwise resolve
   against the button and collapse them. */
.carousel-btn svg {
  max-width: none;
  flex: none;
}

.carousel-toggle .i-play,
.photo-hero.is-playing .carousel-toggle .i-pause {
  display: block;
}

.carousel-toggle .i-pause,
.photo-hero.is-playing .carousel-toggle .i-play {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .slide.is-current {
    transition: none;
  }

  .hero-caption {
    transition: none;
  }
}

/* Narrower: the head a size down, the headline still broken where the
   sentence breaks (the page drops the forced break here; the hero keeps
   it, or a narrow measure leaves "Move" on its own), the names a size down. */
@media (max-width: 1100px) {
  .hero-head {
    padding: 40px 0 24px;
  }

  .photo-hero h1 {
    font-size: clamp(30px, 4.4vw, 40px);
  }

  .hero-tab {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .hero-nav {
    margin-left: 32px;
  }
}

/* A tablet: the picture 3:2; the picker down to its lines, three equal
   segments sharing the row with the buttons (the kicker above still names
   the three); the caption keeps two lines' room, so the picture never
   moves when a longer caption arrives. */
@media (max-width: 900px) {
  .photo-hero h1 {
    font-size: clamp(28px, 4.2vw, 38px);
  }

  .carousel {
    aspect-ratio: 3 / 2;
    max-height: none;
  }

  .hero-tabs {
    gap: 12px;
  }

  .hero-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
  }

  .hero-tab-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .hero-nav {
    margin-left: 20px;
  }

  .hero-caption {
    min-height: 3em;
  }
}

/* Under 640px one line cannot hold at a readable size (the line is 574px
   at 32px): two lines, broken where the sentence breaks. */
@media (max-width: 640px) {
  .photo-hero h1 {
    font-size: clamp(28px, 8vw, 34px);
    white-space: normal;
  }

  .photo-hero .br-wide {
    display: inline;
  }
}

/* A phone: the head tight, the picture 4:3. */
@media (max-width: 560px) {
  .hero-head {
    padding: 28px 0 20px;
  }

  /* The services cannot fit one line here (360px of text at any legible
     size), so they run on as one line of text and wrap where it balances:
     two even lines, each dot tied to the word before it. */
  .photo-hero .kicker {
    letter-spacing: 0.12em;
    margin-bottom: 16px;
  }

  .photo-hero .kicker span {
    display: inline;
  }

  .photo-hero .kicker span:not(:first-child)::before {
    content: none;
  }

  .photo-hero .kicker span:not(:last-child)::after {
    content: "\00a0\00b7";
  }

  .hero-caption {
    margin-top: 16px;
    font-size: 16px;
  }

  .carousel {
    aspect-ratio: 4 / 3;
  }

  .hero-nav {
    gap: 8px;
    margin-left: 16px;
  }
}

/* ------------------------------------------- under the slider: two blocks -- */
/* The client's introduction on the left and the application block on the
   right (the calculator moved to the Tools page on 19 Oct 2026); they share
   one set of rules. */

.home-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
  padding-block: var(--section);
}

/* Neither block carries a label over its heading (the application block's
   "Start your application" went on 19 Oct 2026), so the two headings open
   level. */
.start h2,
.about h2 {
  margin: 0 0 18px;
}

.start .lede,
.about .lede {
  max-width: none;
}

/* The introduction: a lede, one paragraph, the client's three-part line in
   bold, then their five points as the dashed list. */
.about p {
  margin: 0;
}

.about .lede ~ p {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.6;
}

.about .about-line {
  font-weight: 600;
}

/* The link closes the block level with the buttons beside it: the block is a
   column as tall as the application block, and the link takes the slack. */
.about {
  display: flex;
  flex-direction: column;
}

.about-more {
  margin-top: auto;
  padding-top: 22px;
}

/* The client's five steps, as ruled rows, so the block stands as tall as the
   calculator beside it. */
.start-steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.start-steps li {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  gap: 12px;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.5;
}

.start-n {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--brand);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.start-steps strong {
  display: block;
  font-weight: 600;
}

.start-steps span:not(.start-n) {
  color: var(--muted);
}

.start .btn-row {
  margin-top: 28px;
}

/* ----------------------------------------------------------- calculator -- */

/* On a 6% purple wash, so it reads as the instrument beside the copy. */
.calc {
  position: relative;
  background: var(--wash);
  color: var(--ink);
  padding: 22px 28px 18px;
  border-radius: var(--radius);
}

.calc h2 {
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 4px;
}

.calc-sub {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--muted);
}

/* The label and its value have to sit centred between the hairline above the
   row and the slider track below it. The track is drawn at the middle of the
   range input, so the space under the text is half the input's height -- with
   a 44px input that was 22px against 4px of padding above, and the value
   hugged the hairline. Padding above now matches half the input's height. */
.calc-row {
  padding: 17px 0 10px;
  border-top: 1px solid var(--rule);
}

.calc-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.calc-label {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Values that the script rewrites: the sans, tabular, so nothing jitters. */
.calc-val {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.calc-ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 0;
}

/* Range inputs. --pct is set per control (defaults below for the initial
   values) and updated by the script for the WebKit track fill. The box is
   34px tall and the 3px track is centred in it, so the space it puts under
   the label line is 17px -- which is what .calc-row pads above to match.
   34px clears the 24px WCAG 2.2 target minimum with room to spare, and the
   thumb a visitor actually drags is larger again. */
.calc-range {
  --pct: 50%;
  display: block;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* The ring goes round the 34px box, which every browser paints; Safari
   ignores an outline on the thumb pseudo-element. */
.calc-range:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

.calc-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--brand) 0,
    var(--brand) var(--pct),
    var(--rule) var(--pct),
    var(--rule) 100%
  );
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7.5px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--brand);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.calc-range::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--rule);
}

.calc-range::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--brand);
}

.calc-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--brand);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.calc-range:hover::-webkit-slider-thumb {
  background: var(--wash-2);
}

#calc-amount {
  --pct: 30.8%;
}

#calc-rate {
  --pct: 39.3%;
}

#calc-term {
  --pct: 82.8%;
}

/* Frequency: a segmented, outlined radio group with 44px targets. The
   selected state is carried by .is-selected (set by the script) and by
   :has() where supported, so it holds without JavaScript too. */
.calc-freq {
  margin: 0;
  padding: 8px 0 12px;
  border: 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}

.calc-freq legend {
  padding: 0;
  float: left;
  width: 100%;
  margin-bottom: 8px;
}

.seg {
  display: flex;
  clear: both;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg-item {
  position: relative;
  flex: 1;
  margin: 0;
  cursor: pointer;
}

.seg-item + .seg-item {
  border-left: 1.5px solid var(--brand);
}

.seg-item input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.seg-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink);
  background: var(--white);
  transition: background-color var(--speed) var(--ease);
}

.seg-item:hover span {
  background: var(--wash-2);
}

.seg-item.is-selected span,
.seg-item:has(input:checked) span,
.seg-item input:checked + span {
  background: var(--brand);
  font-weight: 600;
  color: var(--white);
}

.seg-item input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: -5px;
}

/* The checked segment is purple, so its ring is white. */
.seg-item input:checked:focus-visible + span {
  outline-color: var(--white);
}

.calc-result {
  border-top: 2px solid var(--brand);
  padding-top: 12px;
}

.calc-big {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 4px 0 8px;
}

.calc-figure {
  margin: 0;
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-unit {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.calc-tot {
  margin: 0;
}

.calc-tot > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
}

.calc-tot dt {
  margin: 0;
}

.calc-tot dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A double rule closes the ledger. */
.calc-tot > div:last-child {
  border-bottom: 3px double var(--brand);
}

.calc-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------------------------------------------------------------- steps -- */

/* As many across as fit at 200px each: the client's five steps in one row
   on a desktop, fewer on a tablet, one column on a phone (below). */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.steps li {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}

.steps-n {
  display: block;
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  color: var(--brand);
  margin-bottom: 22px;
}

.steps h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--brand);
  margin: 0 0 8px;
}

.steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------------------------------------------------------- the adviser -- */

/* About us: one column, no photograph (Humna Khan asked on 29 Oct 2026 not to
   have her picture on the site): the page heading, the client's three
   paragraphs, her line, their five points and the regulation link. */
.adviser-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "text";
  max-width: 760px;
}

.adviser-grid h1 {
  grid-area: head;
  margin: 0 0 22px;
}

.adviser-text {
  grid-area: text;
}

.adviser-text .lede {
  max-width: none;
}

.adviser-line {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.adviser-more {
  margin: 24px 0 0;
}

/* "Why choose us": the same small line on the homepage and the About page. */
.adviser-text h2,
.about h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 28px 0 10px;
}

/* ------------------------------------------------------------ regulatory -- */

/* Three columns on desktop; on a phone, full-width ruled label/value rows. */
.reg {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.reg > li {
  padding: 24px 28px 28px 0;
  border-right: 1px solid var(--rule);
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.reg > li + li {
  padding-left: 28px;
}

.reg > li:last-child {
  border-right: 0;
  padding-right: 0;
}

.reg .kicker {
  display: block;
  margin-bottom: 22px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.reg-value {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.05;
  color: var(--brand);
  margin-bottom: 10px;
}

.reg p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* --------------------------------------------------------- CTA + footer -- */

/* The inner pages close on one purple band: a line, a button. The homepage
   has none -- the slider, the application block and the calculator are the
   whole page. */
/* On the wash since 19 Oct 2026: the purple footer under it closes the
   page, the same on every page. */
.cta-band {
  margin-top: calc(var(--section) + 8px);
  background: var(--wash);
  color: var(--ink);
  padding: 72px 0 0;
}

.cta-band .wrap {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 72px;
}

.cta-band h2 {
  color: var(--brand);
  font-size: clamp(38px, 4vw, 58px);
  margin: 0;
}

.cta-band .cta-lede {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 22em;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.cta-link {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--tint-line);
}

.cta-link::after {
  content: "\2192";
  margin-left: 0.35em;
}

.cta-link:hover {
  text-decoration-color: var(--brand);
}

/* The footer, as the client drew it: the logo and the regulatory lines with
   the social links under them; the legal links; the disclaimer. Purple since
   19 Oct 2026 and the same on every page, so every page ends on the brand;
   the type is white, the secondary lines and headings the light tint. */
.site-footer {
  background: var(--brand);
  color: var(--white);
}

.site-footer a {
  color: var(--white);
  text-decoration-color: var(--tint-line-strong);
}

.site-footer a:hover {
  text-decoration-color: var(--white);
}

.site-footer :focus-visible {
  outline-color: var(--white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr 1.3fr;
  gap: 48px 56px;
  padding: 52px 0 44px;
}

.footer-mark {
  --mark-h: 84px;
  display: inline-block;
  line-height: 0;
  margin-bottom: 22px;
}

.footer-mark img {
  display: block;
  height: var(--mark-h);
  width: auto;
}

.footer-reg p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 40ch;
}

.footer-reg p + p {
  margin-top: 8px;
  color: var(--tint-line);
}

.footer-reg strong {
  font-weight: 600;
}

/* Icon-only social links, 44px targets, the icon in white. */
.social {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 18px 0 0 -10px;
  padding: 0;
}

.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
  text-decoration: none;
  transition: background-color var(--speed) var(--ease);
}

.social a:hover {
  background: var(--white);
  color: var(--brand);
}

.social svg {
  width: 22px;
  height: 22px;
}

.footer-h {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tint-line);
  margin: 0 0 14px;
}

.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-disclaimer p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tint-line);
  max-width: 56ch;
}

.footer-disclaimer p + p {
  margin-top: 10px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 20px 0 32px;
  border-top: 1px solid var(--tint-line-strong);
  font-size: 13.5px;
  color: var(--tint-line);
}

.footer-bottom p {
  margin: 0;
}

/* ------------------------------------------------------------ inner pages -- */

/* Page head: rule, kicker, h1, lede. */
.page-head {
  padding-top: 56px;
  margin-bottom: 8px;
}

.page-head .section-head {
  margin-bottom: 0;
}

.page-head h1 {
  font-size: clamp(40px, 5vw, 66px);
  max-width: 14em;
}

/* The on-page index sits under the lede in the page head's right column. */
.page-head .toc {
  margin-top: 36px;
}

/* Reading layout: a sticky on-page index on wide screens, prose beside it. */
.reading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

.toc h2,
.toc .kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 8px;
}

.toc ol,
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}

.toc a:hover {
  color: var(--brand);
}

.toc .meta {
  margin-top: 14px;
}

.meta {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Long-form copy: articles, the privacy statement, the about page. */
.prose {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.65;
}

/* In the 5/7 section grid a prose block is a section intro, and takes the
   same measure as the homepage ledes; 68ch is for the reading layout only. */
.two .prose {
  max-width: 56ch;
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  font-size: clamp(30px, 2.6vw, 38px);
  margin: 56px 0 14px;
  scroll-margin-top: 24px;
}

.prose h3 {
  font-size: 25px;
  margin: 30px 0 10px;
}

.prose p {
  margin: 0 0 1.05em;
}

.prose ul,
.prose ol {
  margin: 0 0 1.2em;
  padding-left: 1.2em;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose ul {
  list-style: none;
  padding-left: 0;
}

.prose ul li {
  position: relative;
  padding-left: 22px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 2px;
  background: var(--brand);
}

.prose dl {
  margin: 0 0 1.2em;
}

.prose dt {
  font-weight: 600;
  color: var(--brand);
  margin-top: 0.9em;
}

.prose dd {
  margin: 0.2em 0 0;
}

/* A definition run set as ruled label / definition rows (the four things a
   lender checks). Label left in purple, definition right, a hairline per
   row and one to close; the rows stack on phones. */
.prose .terms {
  margin: 1.5em 0 1.7em;
  border-bottom: 1px solid var(--rule);
}

.prose .terms > div {
  display: grid;
  grid-template-columns: 10em minmax(0, 1fr);
  gap: 4px 28px;
  padding: 15px 0;
  border-top: 1px solid var(--rule);
}

.prose .terms dt,
.prose .terms dd {
  margin: 0;
}

.prose blockquote {
  margin: 1.4em 0;
  padding-left: 22px;
  border-left: 3px solid var(--brand);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
  color: var(--brand);
}

.prose a {
  color: var(--ink);
  text-decoration-color: var(--brand);
}

.prose .callout {
  margin: 1.4em 0;
  font-size: 16px;
}

/* Long-form copy that opens level with the on-page index: an ink rule, the
   dateline, then the text (the privacy statement, whose thirteen h2s rule
   out wrapping it in .article). */
.prose.prose-ruled {
  max-width: none;
}

.prose-ruled > * {
  max-width: 68ch;
}

.prose-ruled .meta {
  margin-bottom: 24px;
}

/* An article, or a numbered legal section: a rule and a kicker above it.
   The article takes the prose measure so its rule ends where the text does. */
/* The rule runs the column; the text inside keeps the prose measure. */
.article {
  font-size: 17px;
}

.article + .article {
  margin-top: 72px;
}

.article .kicker {
  display: block;
  margin-bottom: 14px;
}

.article h2 {
  margin-top: 0;
}

.article .prose h2:first-child {
  margin-top: 0;
}

/* Jumping to an article from the index lands with its rule and kicker in
   view, not just the heading. */
.article .prose > h2:first-child {
  scroll-margin-top: 76px;
}

/* The general-information note that closes a run of articles. */
.article + .note {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  max-width: 89ch;
}

/* Loan type ("service") blocks: heading, one line, then purple-labelled
   bullet lists. */
.service {
  padding: 0 0 48px;
  scroll-margin-top: 24px;
}

/* A light purple line between one service and the next (not above the
   first), sitting midway in the gap. */
.service + .service {
  border-top: 1px solid var(--tint-line);
  padding-top: 48px;
}

.service-head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 36px;
}

.service-head .kicker {
  display: block;
  margin-bottom: 14px;
}

/* Since 19 Oct 2026 each service is the client's heading and paragraph, so
   the head is the whole block and carries no margin under it. */
.service-head:last-child {
  margin-bottom: 0;
}

/* The first-home buyer list, between its two sentences. */
.service-list {
  margin: 14px 0;
}

/* A second head inside a loan-type block, on a hairline. */
.spec + .service-head {
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.spec + .service-head h3 {
  font-size: clamp(28px, 2.4vw, 34px);
  line-height: 1.08;
}

/* Two lists per loan type, on the same 5/7 split as the head above them, so
   "Good for" sits under the heading and "We look at" under the lede. */
.spec {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}

.spec h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 12px;
}

.spec p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
}

.spec .bullets li {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Contact page. */
.contact-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: start;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--rule);
}

.contact-list .kicker {
  display: block;
  margin-bottom: 8px;
}

.contact-list .contact-value {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
  color: var(--brand);
  margin-bottom: 6px;
}

.contact-list .contact-value a {
  text-decoration: none;
  color: inherit;
}

.contact-list .contact-value a:hover {
  text-decoration: underline;
  text-decoration-color: var(--tint-line-strong);
}

.contact-list p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Contact page: the aside beside the form stacks its ruled contact list,
   the "also working across" places and the documents callout. */
.contact-aside > * + * {
  margin-top: 44px;
}

/* Centred short pages: thanks, 404. */
.centered {
  text-align: center;
}

.centered .section-head {
  border-top: 0;
  padding-top: 0;
}

.centered h1 {
  margin-inline: auto;
}

.centered .lede,
.centered .lede-lg {
  text-align: center;
  margin-inline: auto;
}

.centered .btn-row {
  justify-content: center;
}

/* The block is the whole page, so it takes the full section space above as
   well as below, and the kicker gets the hero's air above the heading. */
.centered.page-head {
  padding-top: var(--section);
}

.centered .kicker {
  margin-bottom: 32px;
}

.centered .lede,
.centered .note {
  text-wrap: balance;
}

.centered .btn-row + .note {
  max-width: 52ch;
  margin: 28px auto 0;
}

/* ----------------------------------------------------------------- form -- */

.form-panel {
  margin: 0;
}

.form-grid {
  display: grid;
  gap: 22px;
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.field-optional {
  font-weight: 400;
  color: var(--muted);
}

.field-hint {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23161616' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 40px;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--wash-2);
  outline: none;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.field [aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-wash);
}

.field-error {
  display: none;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--error);
}

.field-error.is-shown {
  display: block;
}

.form-honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-privacy {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 22px;
}

.form-actions p {
  margin: 0;
}

.form-summary {
  display: none;
  margin: 0 0 26px;
  padding: 16px 20px;
  border: 1px solid var(--error-lt);
  border-left: 3px solid var(--error);
  border-radius: var(--radius);
  background: var(--error-wash);
  font-size: 15px;
}

.form-summary.is-shown {
  display: block;
}

.form-summary:focus {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.form-summary h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--error);
  margin: 0 0 8px;
}

.form-summary ul {
  margin: 0;
  padding-left: 18px;
}

.form-summary li + li {
  margin-top: 4px;
}

.form-summary a {
  color: var(--error);
  text-decoration-color: var(--error);
}

.form-success {
  display: none;
  padding: 28px 32px;
  border-left: 3px solid var(--brand);
  background: var(--wash);
}

.form-success.is-shown {
  display: block;
}

.form-success:focus {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.form-success h2 {
  font-size: 32px;
  margin: 0 0 10px;
}

.form-success p {
  margin: 0;
  max-width: 52ch;
}

/* ---------------------------------------------------------- back to top -- */

.to-top {
  display: none;
}

.js-ready .to-top {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--brand);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--speed) var(--ease),
    transform var(--speed) var(--ease), visibility var(--speed) var(--ease),
    background-color var(--speed) var(--ease);
}

.js-ready .to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--wash-2);
}

/* Over the purple band the ring would vanish: swap to a white ring. site.js
   sets the class while the band is behind the button. */
.js-ready .to-top.is-on-panel {
  border-color: var(--white);
}

.js-ready .to-top.is-on-panel:focus-visible {
  outline-color: var(--white);
}

.to-top svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Keep the fixed control clear of the footer's last row. */
.js-ready .footer-bottom {
  padding-bottom: 80px;
}

/* --------------------------------------------------------------- motion -- */

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

  *,
*::before,
*::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .js-ready .to-top {
    transform: none;
  }
}

/* ----------------------------------------------------------- responsive -- */

@media (min-width: 60.0625rem) {
  .reading {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 80px;
  }

  .toc {
    position: sticky;
    top: 32px;
    align-self: start;
  }

  /* The desktop nav is always in flow, whatever the toggle says. */
  .site-nav {
    display: block !important;
  }
}

@media (max-width: 1100px) {
  .site-header .wrap {
    gap: 24px;
  }

  .site-nav ul {
    gap: 24px;
  }

  

  

  

  

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

  .reg > li:nth-child(odd) {
    padding-left: 0;
  }

  .reg > li:nth-child(even) {
    border-right: 0;
    padding-right: 0;
    padding-left: 28px;
  }

  .reg > li:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }

  .reg-value {
    min-height: 0;
  }

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

  .two {
    gap: 44px;
  }

  .home-split {
    gap: 44px;
  }

  .br-wide {
    display: none;
  }

}

/* Phone and small tablet: the menu folds behind the toggle. */
@media (max-width: 60rem) {
  :root {
    --gutter: 24px;
    --section: 64px;
  }

  .site-header .wrap {
    flex-wrap: wrap;
    gap: 12px 16px;
    min-height: 0;
    padding-block: 14px;
  }

  .brand {
    --mark-h: 76px;
  }

  .head-cta {
    margin-left: auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    order: 5;
    width: 100%;
    margin: 4px 0 0;
    padding: 4px 0 10px;
    border-top: 1px solid var(--rule);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav li {
    border-bottom: 1px solid var(--rule);
  }

  .site-nav a {
    display: block;
    padding: 14px 0;
    font-size: 17px;
    border-bottom: 0;
  }

  .site-nav a[aria-current="page"] {
    color: var(--brand);
  }

  .home-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .section-tight .two-even {
    gap: 48px;
  }

  .footer-links li {
    margin-bottom: 12px;
  }

  .calc {
    padding: 24px 22px 20px;
  }

  .two,
.service-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .adviser-grid h1 {
    margin-bottom: 28px;
  }

  /* Stacked, the form and the aside are two separate blocks, so they get
     more than the heading/lede split does. */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .centered .kicker {
    margin-bottom: 24px;
  }

  .section-head {
    margin-bottom: 32px;
  }

  .section-head-row {
    margin-bottom: 28px;
  }

  .cta-band {
    padding: 52px 0 0;
  }

  .cta-band .wrap {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 52px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
    padding: 44px 0 36px;
  }

  .footer-disclaimer {
    grid-column: 1 / -1;
  }

  

  .page-head {
    padding-top: 40px;
  }

  .prose h2 {
    margin-top: 44px;
  }

  .article + .article {
    margin-top: 56px;
  }
}

/* Without JavaScript the toggle cannot open anything, so the nav stays in
   the flow and the dead button is never drawn. */
@media (max-width: 60rem) and (scripting: none) {
  .site-nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 20px;
  }

  .brand {
    --mark-h: 66px;
  }

  .seg-item span {
    font-size: 13px;
  }

  

  

  

  

  

  .steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .steps li {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    padding: 20px 0 22px;
    border-top: 1px solid var(--rule);
  }

  .steps li:first-child {
    border-top-color: var(--ink);
  }

  .steps-n {
    grid-row: 1 / 3;
    font-size: 44px;
    margin: 0;
  }

  

  /* Regulatory: full-width ruled rows, label above the value. */
  .reg {
    grid-template-columns: 1fr;
  }

  .reg > li,
.reg > li + li,
.reg > li:nth-child(2n) {
    padding: 18px 0 20px;
    border-right: 0;
  }

  .reg > li + li {
    border-top: 1px solid var(--rule);
  }

  .reg .kicker {
    margin-bottom: 8px;
  }

  .reg-value {
    font-size: 27px;
    margin-bottom: 6px;
  }

  

  .section-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .counter {
    text-align: left;
  }

  .cta-band h2 {
    font-size: 38px;
  }

  .cta-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .cta-band .btn {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 14px;
  }

  .spec {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .btn-row .btn {
    width: 100%;
  }

  .form-actions .btn {
    width: 100%;
  }

  .calc-freq legend {
    margin-bottom: 8px;
  }

  

  .prose .terms > div {
    grid-template-columns: minmax(0, 1fr);
  }

  

  /* The comparison table stacks into ruled label/value rows, the way the
     regulatory values do, instead of scrolling sideways. Each cell carries
     its column heading in data-label. */
  

  

  

  

  

  

  

  
}

/* Below ~32rem the header row keeps the Contact button -- the one control a
   phone visitor needs most -- and the toggle goes icon-only. The copy inside
   the menu stays as a second route. Logo 52 + button ~108 + toggle 44 + two
   12px gaps fits comfortably in the 350px a 390px phone leaves. */
@media (max-width: 32rem) {
  .site-header .wrap {
    gap: 12px;
  }

  .brand {
    --mark-h: 70px;
  }

  .head-cta {
    padding-inline: 14px;
    font-size: 14px;
  }

  .nav-toggle {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .nav-toggle-label {
    display: none;
  }

  .nav-cta {
    display: block;
    margin: 14px 0 4px;
  }

  .nav-cta .btn {
    width: 100%;
  }
}

@media (max-width: 23.5rem) {
  .brand {
    --mark-h: 56px;
  }

  .head-cta {
    padding-inline: 12px;
  }
}

/* A 320px phone cannot hold all three; the button falls back into the menu. */
@media (max-width: 21rem) {
  .head-cta {
    display: none;
  }
}

/* ---------------------------------------------------------------- print -- */

@media print {
  .site-header,
.cta-band,
.skip-link,
.nav-toggle,
.to-top {
    display: none !important;
  }

  body {
    font-size: 11pt;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .js-ready .footer-bottom {
    padding-bottom: 0;
  }
}

/* Browsers without subgrid keep the old fixed allowance: the columns are not
   guaranteed to line up in a wide face, but nothing overlaps. */
@supports not (grid-template-rows: subgrid) {
  

  .reg-value {
    min-height: 2.1em;
  }
}