@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 -- */

*,
*::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;
  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;
}

.photo-hero :focus-visible,
.cta-band :focus-visible {
  outline-color: var(--white);
}

.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 rule, a numbered kicker on the left, an optional
   counter-line or link on the right, then the heading (and lede). */
.section-head {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  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 {
    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,
.cta-band .btn-primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.photo-hero .btn-primary:hover,
.cta-band .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: 80px;
}

.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 -- */
/* Split panel. The hero is two halves: a solid purple panel on the left that
   carries the copy and the controls, and the photograph full-bleed on the
   right, dissolving out of the panel's purple rather than meeting it on a
   line. The panel is not a share of the screen. Its edge is worked out from the page grid -- the left column of
   the two-column block under it, plus the gap -- so the copy sits on the
   same line as the header logo and the photograph starts exactly where the
   calculator does. The white type therefore always has the same purple
   behind it, at any width; only the picture's near edge is shaded.

   It is a flex row, not a grid: a flex item's percentages resolve against
   the hero, so --lead can be the panel's own left padding and the copy lands
   on the grid line. (In a grid cell they would resolve against the cell.)

   Below 1100px the halves stack: the photograph on top at 16:10, dissolving
   down into the panel under it, the controls still at the panel's foot. */

.photo-hero {
  --lead: max(var(--gutter), 50% - var(--wrap) / 2 + var(--gutter));
  --panel: calc(var(--lead) + (min(100%, var(--wrap)) - 2 * var(--gutter) - 64px) / 2 + 64px);
  display: flex;
  min-height: clamp(480px, 36.5vw, 560px);
  background: var(--brand);
  color: var(--white);
  isolation: isolate;
}

.photo-hero-panel {
  display: flex;
  flex: 0 0 var(--panel);
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  padding: 56px 32px 24px var(--lead);
}

/* The copy sits in the middle of the room above the controls. */
.photo-hero-copy {
  margin: auto 0;
}

/* The three services on one line of the panel, a size under the page's
   kicker so they fit it; each is kept whole with its own separator, so a
   narrow panel breaks the line between them and never after a dot. */
.photo-hero .kicker {
  margin: 0 0 30px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--white);
}

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

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

/* Sized to break where the sentence does -- "Credibility behind / every
   Financial Move" -- inside the panel. Source Serif is a wide face. */
.photo-hero h1 {
  margin: 0;
  font-size: clamp(40px, 3.9vw, 56px);
  line-height: 1.08;
  color: var(--white);
}

/* One line per slide, swapped by site.js with a short cross-fade: what the
   photograph is about, then the way in to that service. */
.hero-caption {
  margin: 24px 0 0;
  max-width: 32rem;
  min-height: 3em;                                 /* two lines, so the controls stay put */
  font-size: 17px;
  line-height: 1.5;
  color: var(--tint-line);
  transition: opacity 0.22s var(--ease);
}

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

.hero-caption-link {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hero-caption-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--tint-line-strong);
  text-underline-offset: 4px;
}


/* The photograph's cell. Its own stacking context, so the slides' z-order
   never climbs over the panel. */
.carousel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

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

/* The dissolve. The panel's purple runs on over the near part of the
   picture and thins to nothing across --fade of its width, on an eased curve
   (nearly solid for the first tenth, half gone at four tenths, a trace at the
   end), so the two halves meet with no line between them. The picture is
   framed with its subject about two-thirds across, clear of the fade.
   --foot is how much of the picture is solid purple before the curve
   starts: nothing side by side, a little when stacked. */
.carousel::after {
  --fade: 48%;
  --foot: 0%;
  --fade-dir: 90deg;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(var(--fade-dir),
    rgb(var(--brand-rgb)) var(--foot),
    rgb(var(--brand-rgb) / 0.92) calc(var(--foot) + var(--fade) * 0.12),
    rgb(var(--brand-rgb) / 0.74) calc(var(--foot) + var(--fade) * 0.25),
    rgb(var(--brand-rgb) / 0.5) calc(var(--foot) + var(--fade) * 0.4),
    rgb(var(--brand-rgb) / 0.28) calc(var(--foot) + var(--fade) * 0.55),
    rgb(var(--brand-rgb) / 0.12) calc(var(--foot) + var(--fade) * 0.7),
    rgb(var(--brand-rgb) / 0.03) calc(var(--foot) + var(--fade) * 0.85),
    rgb(var(--brand-rgb) / 0) calc(var(--foot) + var(--fade)));
  pointer-events: none;
}

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

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

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

/* Each photograph was cropped with its subject about two-thirds across; the
   cell is squarer than the 2.2:1 frame, so this keeps the subject in view. */
.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  transform-origin: 68% 50%;
}

/* A slow push in on the photograph while it is showing. Paused whenever the
   carousel is, so stopping it never makes the picture jump. */
@keyframes slide-drift {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

.slide.is-current img,
.slide.is-leaving img {
  animation: slide-drift 9s linear both;
  animation-play-state: paused;
}

.carousel.is-rotating .slide img {
  animation-play-state: running;
}

/* The controls: one quiet row at the panel's foot. Previous, the three
   progress bars, next, and pause out at the right. The row is pulled out by
   the buttons' own inset so the first chevron's tip sits on the grid line. */
.carousel-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 -12px 0 -18px;
  padding-top: 40px;
}

.carousel-bar[hidden] {
  display: none;
}

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

.carousel-btn:hover {
  background: rgb(255 255 255 / 0.14);
}

/* Pause sits with the arrows, as an icon and a word, not a lone glyph. */
.carousel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-left: 6px;
  padding: 0 14px 0 10px;
  border-radius: 22px;
  gap: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Fixed icon boxes: the global svg rule's max-width would otherwise resolve
   against the auto-width button and collapse them. */
.carousel-toggle svg {
  width: 20px;
  height: 20px;
  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;
}

/* Three bars, one per slide, each named for its service. The current one
   fills over the 6.5 s the slide shows for, holds where it is while a pointer
   rests on the hero, and stands full once the slides have been stopped. */
.carousel-dots {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 0 12px;
}

.carousel-dot {
  position: relative;
  min-width: 48px;
  height: 44px;
  padding: 0 0 8px;
  border: 0;
  background: transparent;
  color: var(--tint-line);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: left;
  transition: color var(--speed) var(--ease);
}

.carousel-dot[aria-current="true"],
.carousel-dot:hover {
  color: var(--white);
}

.carousel-dot::before,
.carousel-dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
}

.carousel-dot::before {
  background: var(--tint-line-strong);
  opacity: 0.6;
}

.carousel-dot::after {
  background: var(--white);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

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

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

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

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

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

  .slide.is-current img,
  .slide.is-leaving img {
    animation: none;
  }

  .hero-caption {
    transition: none;
  }
}

/* Stacked: the photograph on top at 16:10, the panel under it. */
@media (max-width: 1100px) {
  .photo-hero {
    flex-direction: column;
    min-height: 0;
  }

  .photo-hero-panel {
    flex: none;
    padding: 40px var(--gutter) 20px;
  }

  .carousel {
    order: -1;
    flex: none;
    aspect-ratio: 16 / 10;
  }

  /* Stacked, the same dissolve runs up from the panel below the picture,
     off a short solid foot so the hedge line in the first photograph does
     not print through the curve. */
  .carousel::after {
    --fade: 38%;
    --foot: 12%;
    --fade-dir: 0deg;
  }

  .photo-hero .kicker {
    margin-bottom: 22px;
  }

  .photo-hero h1 {
    font-size: clamp(34px, 5.2vw, 46px);
  }


  .carousel-bar {
    padding-top: 32px;
  }

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

@media (max-width: 560px) {
  .photo-hero-panel {
    padding-top: 32px;
  }

  .photo-hero h1 {
    font-size: clamp(32px, 9vw, 38px);
  }

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

  .carousel-dot {
    min-width: 36px;
  }

  .carousel-dot-name,
  .carousel-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .carousel-toggle {
    width: 44px;
    padding: 0;
    margin-left: auto;
  }

  .carousel-dots {
    flex: 1;
    gap: 8px;
  }

  /* With the names hidden the bar sits on the row's centre line. */
  .carousel-dot {
    flex: 1;
    min-width: 0;
    padding: 0;
  }

  .carousel-dot::before,
  .carousel-dot::after {
    bottom: 20px;
  }
}

/* ------------------------------------------- under the slider: two blocks -- */
/* The application block on the left and the calculator on the right, as the
   client drew them. Both open on an ink rule like every other block. */

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

.start {
  border-top: 1px solid var(--ink);
  padding-top: 22px;
}

.start .kicker {
  margin-bottom: 18px;
}

.start h2 {
  margin: 0 0 18px;
}

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

/* 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(--ink);
  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 -- */

/* The adviser's bio (About us). */

.bio {
  border-top: 1px solid var(--ink);
  padding-top: 22px;
}

.bio h2,
.bio h3 {
  font-size: 36px;
  line-height: 1.05;
  margin: 0 0 6px;
}

.bio-role {
  display: block;
  margin: 0 0 20px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

.bio p {
  max-width: 52ch;
}

/* The adviser's photograph: a 4:5 frame on the site's radius, as wide as its
   column. (A stand-in portrait until the client's arrives.) */
.bio-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0 0 24px;
}

/* A typographic monogram above a bio when there is no photograph. */
.bio-mono {
  display: block;
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand);
  margin: 0 0 28px;
}

.bio .more {
  margin-top: -7px; /* 6px once the hit-box padding is counted */
}

/* Beside the photograph: the name, then the client's points, then the link.
   Written to beat the .bio h3 size above. */
.bio h3.bio-sub {
  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;
}

.bio .bullets {
  margin: 0 0 24px;
}

.bio-more {
  margin: 0;
}

.bio-photo {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ 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. */
.cta-band {
  margin-top: calc(var(--section) + 8px);
  background: var(--brand);
  color: var(--white);
  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(--white);
  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(--white);
  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(--white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

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

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

/* The footer, as the client drew it: the logo and the regulatory lines with
   the social links under them; the legal links; the disclaimer. White, on an
   ink rule, so the purple is the slider's and the band's. */
.site-footer {
  border-top: 1px solid var(--ink);
  color: var(--ink);
}

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

.footer-mark {
  --mark-h: 72px;
  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(--muted);
}

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

/* Icon-only social links, 44px targets, the icon in purple. */
.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(--brand);
  text-decoration: none;
  transition: background-color var(--speed) var(--ease);
}

.social a:hover {
  background: var(--wash-2);
}

.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(--brand);
  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(--muted);
  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(--rule);
  font-size: 13.5px;
  color: var(--muted);
}

.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 {
  border-top: 1px solid var(--ink);
  padding-top: 16px;
}

.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-ruled {
  border-top: 1px solid var(--ink);
  padding-top: 16px;
}

.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 {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
  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 {
  border-top: 1px solid var(--ink);
  padding: 20px 0 56px;
  scroll-margin-top: 24px;
}

.service + .service {
  margin-top: 24px;
}

.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;
}

/* 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;
  border-top: 1px solid var(--ink);
}

.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-top: 1px solid var(--ink);
  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: 64px;
  }

  .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;
  }

  /* 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: 56px;
  }

  .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;
  }

  

  .bio-mono {
    font-size: 52px;
    margin-bottom: 20px;
  }

  .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: 60px;
  }

  .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: 48px;
  }

  .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;
  }
}