@charset "utf-8";

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

   Type      Instrument Serif (regular + italic) for headings, pull quotes,
             FAQ questions, people's names and the big calculator figure.
             Archivo (variable 400–700) for everything else, including every
             number that changes, set in tabular figures.
   Colour    The brand green #3e9751 is the ONLY green. #2b6938 is the same
             hue darkened for green type under ~19px (6.6:1 on white). Tints
             #f3f9f5 / #e9f2ec / #c5e0cb / #a8d0b1 are washes and hairlines.
             Green surface -> white text, and only at heading / button sizes.
             White surface -> black text; headings and sub-headings green.
             Buttons: white fill, green outline, black label.
   Layout    One 1280px grid with 40px gutters. Rules and aligned columns,
             not cards. Sections open with a rule and a numbered kicker.
   No inline <style> or <script> ships: the CSP is style-src 'self'.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */

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

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* The three alternatives the typeface switcher offers. Declaring a face costs
   nothing until something on the page is set in it, so all four pairings can
   sit here and only the chosen one is ever fetched. Weights follow what the
   design actually asks for: the serif slot is 400 roman and 400 italic and
   nothing else, the sans slot is 400-700 and never italic. */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 99%;
  descent-override: 31%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  ascent-override: 99%;
  descent-override: 31%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 87.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}

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

:root {
  --green: #3e9751;          /* the brand green: headings, panels, marks */
  --green-deep: #2b6938;     /* the same green darkened for small type   */
  --wash: #f3f9f5;           /* 6% wash: credential strip, form success  */
  --wash-2: #e9f2ec;         /* 12% wash: selected segment, hover fills  */
  --tint-line: #c5e0cb;      /* green hairline where one is wanted       */
  --tint-line-strong: #a8d0b1;

  --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, so the switcher
     is two overrides and nothing else. --serif is display only (headings,
     figures, the quote); --sans carries everything else. */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Archivo", 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(--green);
}

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

/* ------------------------------------------------- typeface switcher -- */
/* The four pairings the client can preview. No attribute on <html> means the
   design's own pairing, so the default costs nothing and a stored choice is
   one attribute. assets/js/font-init.js sets it before first paint. */

:root[data-font="elegant"] {
  --serif: "Playfair Display", var(--fallback-serif);
  --sans: "Source Sans 3", var(--fallback-sans);
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  color: var(--green);
}


h1 em,
h2 em,
h3 em,
.quote em {
  font-style: italic;
}

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(--green-deep);
}

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(--green);
  color: var(--white);
}

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

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

.on-green :focus-visible,
.cta-band :focus-visible,
.site-footer .footer-green :focus-visible,
.hero-r :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,
.eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
}

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

.on-green .kicker,
.on-green .eyebrow,
.on-green .counter {
  color: var(--white);
}

/* An arrow link: "Home and property finance →". 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(--green-deep);
  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(--green);
  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;
  /* Justified, as the client asked for the body copy. Hyphenation is not
     optional with it: at this measure, unhyphenated justification opens
     rivers between the words. */
}

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

/* 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. Lists keep their ragged
   edge: an item that runs a line and a half looks stretched, not set. */
.lede,
.prose p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

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

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

/* Long pull quote in green italic serif. */
.quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.22;
  color: var(--green);
  margin: 0;
  max-width: 22em;
}

.quote-ruled {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}

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

.callout p {
  margin: 0;
}

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

.callout strong,
.callout-title {
  font-weight: 600;
  color: var(--green-deep);
}

/* Bullet list with a short green 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: 15px;
  width: 10px;
  height: 1.5px;
  background: var(--green);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1.5px solid var(--green);
  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(--green-deep);
}

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

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

.btn-primary,
.btn-ghost {
  background: var(--white);
  border-color: var(--green);
  color: var(--ink);
}

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

/* Credential strip: registered name and FSP on a wash, black text (small
   white on green would fail AA). Cities hide on a phone. */
.credential-strip {
  background: var(--wash);
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.credential-strip .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  min-height: 34px;
  padding-block: 6px;
}

.credential-strip p {
  margin: 0;
}

.credential-strip a {
  display: inline-block;
  padding-block: 8px;
  margin-block: -8px;
  font-weight: 600;
  color: var(--green-deep);
  text-decoration: none;
}

.credential-strip a:hover {
  text-decoration: underline;
}

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

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

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

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

.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(--green);
}

.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(--green);
  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);
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 11fr 9fr;
  align-items: stretch;
}

.hero-l {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 56px 56px 40px 0;
}

.hero-l .kicker {
  margin-bottom: 34px;
}

.hero-l h1 {
  margin: 0 0 28px;
  max-width: 10em;
}

/* The margin below is what keeps the registrations clear of this paragraph
   once the hero stacks. On two columns it costs nothing: the auto margin on
   the registrations simply absorbs it and they stay pinned to the foot of
   the column either way. */
.hero-line {
  font-size: 19px;
  line-height: 1.5;
  max-width: 29em;
  margin: 0 0 36px;
}

/* A forced break in the headline that only applies on wide screens. */
.br-wide {
  display: inline;
}

/* Only the design's own pairing gets the forced break. Any other family sets
   wider, so the break would push a single word onto a line by itself; without
   it the browser wraps naturally and balances the result. */
:root[data-font] .br-wide {
  display: none;
}

:root[data-font] :is(h1, h2, h3, h4, .quote, .lede) {
  text-wrap: balance;
}

/* The quote and the registrations row sit together as the column's foot,
   level with the bottom of the calculator card. The auto margin takes up
   whatever the card leaves over; the padding is the minimum gap under the
   sentence when it leaves nothing. */

.hero-l .regs {
  margin-top: auto;
}

.regs {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  gap: 44px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

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

.regs dd {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.1;
  color: var(--green);
}

/* A registrations row that follows a heading rather than the hero quote
   (team page, accountability): give the hairline room above it. */
.regs-below {
  margin-top: 30px;
}

/* ------------------------------------------------ hero on a green field -- */
/* The whole hero as one green band, edge to edge, rather than a mat around
   the calculator. The card stays white, so it reads as the instrument on the
   field.

   White on #3e9751 is 3.65:1. That clears the 3:1 bar for large text and
   nothing else, so everything here is sized to sit above it: the headline is
   44-82px, the standfirst goes up to 24px (the threshold for regular weight),
   the quote is 32px and the registration values are 24px serif. The two
   12px labels -- the kicker and the registration terms -- cannot pass at any
   weight on this green; they are the known cost of the full band. */
.hero.on-green {
  background: var(--green);
  color: var(--white);
}

.hero.on-green h1,
.hero.on-green .hero-line,
.hero.on-green .regs dd {
  color: var(--white);
}

/* Full white, not a tint: at 85% these 12px terms drop from 3.65:1 to
   3.08:1, and white is the best this green allows. */
.hero.on-green .regs dt {
  color: var(--white);
}

.hero.on-green .regs {
  border-top-color: rgb(255 255 255 / 0.45);
}

/* 19px would be 3.65:1 as normal text. 24px is the large-text threshold. */
.hero.on-green .hero-line {
  font-size: 24px;
  line-height: 1.45;
  max-width: 24em;
}

/* The mat has nothing left to do once the field is the whole hero. */
.hero.on-green .hero-r::before {
  display: none;
}

/* The green is the calculator's mat and nothing more: one even margin on all
   four sides of the card. Earlier it was a slab with 56/40/24/24 around the
   card and an outer edge that answered to the viewport, which is what made it
   read as a background drawn too large. Now the padding IS the margin, the
   height comes from the card rather than from whichever column is taller, and
   the outer edge lands on the grid column -- level with the header's Contact
   us button. Below the two-column breakpoint it becomes a full-width band
   instead; see the --mat override further down. */
/* No padding on the right: the card's right edge belongs on the page grid,
   level with the header's Contact us button and with every section rule
   below it. The padding that used to sit there was the green mat from when
   the field was a frame around the card rather than the whole hero. */
.hero-r {
  --mat: 32px;
  position: relative;
  align-self: start;
  padding: var(--mat) 0 var(--mat) var(--mat);
}

.hero-r::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
}

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

.calc {
  position: relative;
  background: var(--white);
  color: var(--ink);
  padding: 20px 28px 16px;
}

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

.calc-range:focus {
  outline: none;
}

.calc-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--green) 0,
    var(--green) 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(--green);
  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(--green);
}

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

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

.calc-range:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.calc-range:focus-visible::-moz-range-thumb {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

#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(--green);
  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(--green);
}

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

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

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

.calc-result {
  border-top: 2px solid var(--green);
  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(--green);
  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;
}

/* The accountant's double rule closes the ledger. */
.calc-tot > div:last-child {
  border-bottom: 3px double var(--green);
}

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

/* ---------------------------------------------------------- loan types -- */

.types {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* The rows are named here and borrowed by each column below, so a title
     that runs to three lines in a wider face moves every column's bullets
     together instead of dropping its own out of line. Row gap stays 0: the
     1px gap is the divider between columns and must not stripe the cards. */
  grid-template-rows: auto auto 1fr auto;
  gap: 0 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.types > li {
  background: var(--white);
  padding: 24px 28px 30px 0;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
}

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

.types-n {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  color: var(--green-deep); /* 20px: under the large-text line, so the deep green */
  font-variant-numeric: tabular-nums;
  margin-bottom: 26px;
}

.types h3 {
  font-size: 27px;
  line-height: 1.1;
  margin: 0 0 14px;
}

.types .bullets {
  margin-bottom: 22px;
}

.types .more {
  margin-top: auto;
  align-self: flex-start;
}

/* --------------------------------------------------------- why credible -- */

.why {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.why li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--rule);
}

.why-n {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--green);
  padding-top: 4px;
}

.why h3 {
  font-size: 27px;
  line-height: 1.1;
  margin: 0 0 10px;
}

.why p {
  margin: 0;
  max-width: 58ch;
}

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

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

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 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(--green);
  margin-bottom: 22px;
}

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

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

/* --------------------------------------------------------------- people -- */

/* Ruled two-name list: name in green serif, role on the right. */
.people {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.people li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.people-name {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.1;
  color: var(--green);
}

.people-name a {
  text-decoration: none;
  color: inherit;
}

.people-name a:hover {
  text-decoration: underline;
  text-decoration-color: var(--tint-line-strong);
}

.people-role {
  font-size: 14px;
  color: var(--muted);
}

/* Team page bios. */
.bios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
}

.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(--green-deep);
}

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

/* A typographic monogram above each bio: the adviser's initials set in the
   italic serif, the way the wordmark is. No photographs. */
.bio-mono {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--green);
  margin: 0 0 28px;
}

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

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

/* Four 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(4, 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(--green);
  margin-bottom: 10px;
}

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

/* ------------------------------------------------------------------ faq -- */

.faq {
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.2;
  color: var(--green);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--green);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq summary:hover {
  color: var(--green-deep);
}

.faq-body {
  padding-bottom: 24px;
}

.faq-body p {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.6;
}

.faq-body p + p {
  margin-top: 0.7em;
}

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

/* One closing green mass: the CTA band and the green part of the footer,
   separated by a white hairline; then a white legal strip. Everything on
   the green is at heading or button size. */
.cta-band {
  margin-top: calc(var(--section) + 8px);
  background: var(--green);
  color: var(--white);
  padding: 72px 0 0;
}

/* The band's bottom padding lives on the wrap so the hairline that separates
   it from the footer mark sits at its foot and runs the content column, not
   the padded box. Pages without a band get no line. */
.cta-band .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 64px;
}

.cta-band .wrap::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.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-band .btn {
  background: var(--white);
  border-color: var(--green);
  color: var(--ink);
}

.cta-band .btn:hover {
  background: var(--wash-2);
  border-color: var(--green-deep);
}

.cta-link {
  font-weight: 700;
  font-size: 20px;
  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:hover {
  text-decoration-color: var(--white);
}

.site-footer {
  color: var(--ink);
}

.footer-green {
  background: var(--green);
  color: var(--white);
}

.footer-green .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px 48px;
  padding: 44px 40px 48px;
}

/* Logo preview. Both lockups of the one mark sit in the markup and the
   stylesheet shows one, so the choice costs no layout work and survives with
   scripting off. The stacked lockup is 1.6:1 against the horizontal one's
   4.3:1, so at an equal height its descriptor would fall to about 4px: it is
   set 1.45x taller wherever it appears. */
:is(.brand, .footer-mark) .mark-stack {
  display: none;
}

:root[data-logo="stacked"] :is(.brand, .footer-mark) .mark-wide {
  display: none;
}

:root[data-logo="stacked"] :is(.brand, .footer-mark) .mark-stack {
  display: block;
  height: calc(var(--mark-h) * 1.45);
}

/* The stacked lockup is nearly half as tall again, and the header's
   min-height leaves it only about 5px of air top and bottom. This gives it
   the same breathing room the horizontal one gets; the header does grow by
   roughly 20px, which is inherent to a mark of that shape. */
:root[data-logo="stacked"] .site-header .wrap {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* The horizontal mark, the same one the header carries: the client wants one
   lockup across the site. It is 4.3:1, so it is set by height and capped by
   width for the narrowest screens. */
.footer-mark {
  --mark-h: 68px;
}

.footer-mark img {
  height: var(--mark-h);
  width: auto;
  max-width: 100%;
}

.footer-line {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.2;
  color: var(--white);
  text-align: right;
  max-width: 24em;
}

.footer-line em {
  font-style: italic;
}

/* The white legal strip: link columns, disclaimer, copyright. */
.footer-legal {
  background: var(--white);
  border-top: 1px solid var(--rule);
}

.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 44px 0 40px;
  border-bottom: 1px solid var(--rule);
}

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

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

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

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

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

.footer-about p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  max-width: 34ch;
}

.footer-about .footer-address {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}

.footer-disclaimer {
  margin: 0;
  padding-top: 26px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 104ch;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 22px 0 32px;
  font-size: 13.5px;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

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

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

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

.page-head /* 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. Lists keep their ragged
   edge: an item that runs a line and a half looks stretched, not set. */
.lede,
.prose p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.lede-lg {
  margin-top: 22px;
}

/* 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(--green-deep);
  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(--green-deep);
}

.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: 1.5px;
  background: var(--green);
}

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

.prose dt {
  font-weight: 600;
  color: var(--green-deep);
  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 green-deep, 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(--green);
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.25;
  color: var(--green);
}

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

.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-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. */
.article {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
  font-size: 17px;
  max-width: 68ch;
}

.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 four green-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: the vehicle
   comparison (secured loan / hire purchase / lease). */
.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;
}

.spec {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}

.spec h3,
.spec-label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
  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;
}

/* A ruled comparison table (secured loan / hire purchase / lease). */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 28px;
}

.compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.compare th,
.compare td {
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.compare thead th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  border-bottom: 1px solid var(--ink);
  padding-top: 0;
}

.compare tbody th {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: var(--green);
  white-space: nowrap;
}

/* Contact page. */
.contact-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 72px;
  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: 27px;
  line-height: 1.1;
  color: var(--green);
  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);
}

/* Small ruled list of places ("Also working across"). */
.places {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
}

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

.places h3 {
  font-size: 24px;
  margin: 0 0 4px;
}

.places p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
}

/* The three places as a full-width row under a section head (About): equal
   thirds with a wider gap; one column on phones. */
.places-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

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

.contact-aside .kicker + .places {
  margin-top: 14px;
}

/* 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 /* 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. Lists keep their ragged
   edge: an item that runs a line and a half looks stretched, not set. */
.lede,
.prose p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.lede-lg {
  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(--green);
  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(--green);
  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(--green);
  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 green part of the footer the ring would vanish: swap to a white
   ring. site.js sets the class while the green panel is behind the button. */
.js-ready .to-top.is-on-panel {
  border-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, 760px);
    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;
  }

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

  .types > li,
  .types > li + li {
    padding: 24px 28px 30px 0;
  }

  .types > li:nth-child(even) {
    padding-left: 28px;
  }

  .types h3 {
    min-height: 0;
  }

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

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

  /* The hero stacks: text, then the calculator on a full-width green band.
     Two columns cannot balance below this width. */
  .hero .wrap {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .hero-l {
    padding: 48px var(--gutter) 40px;
  }

  .hero-l h1 {
    max-width: none;
  }

  .br-wide {
    display: none;
  }


  .hero-r {
    --mat: var(--gutter);
    padding: 28px var(--gutter) 32px;
  }

  /* Stacked, the green is the whole horizontal bar rather than a mat. */
  .hero-r::before {
    left: -50vw;
    right: -50vw;
  }
}

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

  .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(--green-deep);
  }

  .credential-strip .wrap {
    min-height: 32px;
  }

  .hero-l {
    padding: 44px var(--gutter) 36px;
  }

  .hero-l .kicker {
    margin-bottom: 26px;
  }

  .hero-line {
    font-size: 17px;
  }


  .hero-r {
    padding: 24px var(--gutter) 32px;
  }

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

  .two,
  .two-even,
  .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-green .wrap {
    padding: 36px var(--gutter) 40px;
  }

  .footer-mark {
    --mark-h: 52px;
  }

  .footer-line {
    text-align: left;
    font-size: 24px;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
  }

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

  .bios {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

/* The credential strip is one line: the cities go first, then the trading
   name, leaving company + FSP on a phone. */
@media (max-width: 52rem) {
  .credential-strip .cities {
    display: none;
  }

  .credential-strip .wrap {
    justify-content: flex-start;
  }
}

@media (max-width: 44rem) {
  .credential-strip .strip-trading {
    display: none;
  }
}

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

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


  .hero-l h1 {
    font-size: clamp(42px, 12vw, 52px);
  }


  .regs {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
    border-top: 0;
  }

  .regs > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
  }

  .regs > div:last-child {
    border-bottom: 1px solid var(--rule);
  }

  .regs dd {
    margin: 0;
  }

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

  .types {
    grid-template-columns: 1fr;
  }

  .types > li,
  .types > li + li,
  .types > li:nth-child(even) {
    padding: 22px 0 26px;
  }

  .types-n {
    margin-bottom: 18px;
  }

  .why li {
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }

  .why h3,
  .types h3,
  .people-name {
    font-size: 24px;
  }

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

  .people li {
    flex-direction: column;
    gap: 2px;
  }

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

  .faq summary {
    padding: 16px 0;
  }

  .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-cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }

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

  .compare th,
  .compare td {
    padding-right: 14px;
  }

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

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

  .places-wide {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 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. */
  .table-scroll .compare-stack {
    min-width: 0;
  }

  .table-scroll .compare-stack thead {
    display: none;
  }

  .table-scroll .compare-stack tbody,
  .table-scroll .compare-stack tr,
  .table-scroll .compare-stack th,
  .table-scroll .compare-stack td {
    display: block;
  }

  .table-scroll .compare-stack tr {
    padding: 18px 0 8px;
    border-bottom: 1px solid var(--rule);
  }

  .table-scroll .compare-stack tr:first-child {
    border-top: 1px solid var(--ink);
  }

  .table-scroll .compare-stack th,
  .table-scroll .compare-stack td {
    border: 0;
    padding: 0 0 12px;
  }

  .table-scroll .compare-stack tbody th {
    white-space: normal;
  }

  .table-scroll .compare-stack td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
  }
}

/* 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 159 + button ~108 + toggle 44 + two
   12px gaps fits the 350px a 390px phone leaves. */
@media (max-width: 32rem) {
  .site-header .wrap {
    gap: 12px;
  }

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

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

  .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 {
  .credential-strip,
  .site-header,
  .cta-band,
  .footer-green,
  .skip-link,
  .nav-toggle,
  .to-top,
  .fontbar {
    display: none !important;
  }

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

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

  .hero-r::before {
    display: none;
  }

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

/* ------------------------------------------------------- typeface bar -- */
/* The client-facing preview control. It sits opposite the back-to-top
   button, is drawn in the site's own language -- white surface, hairline,
   green for the chosen state -- and is inert without JavaScript, so it never
   appears as a control that cannot work. */

.fontbar {
  display: none;
}

.js-ready .fontbar {
  position: fixed;
  left: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: block;
  font-family: var(--sans);
}

.fontbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px 0 14px;
  border: 1.5px solid var(--green);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.fontbar-toggle:hover {
  background: var(--wash);
}

.fontbar-aa {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  color: var(--green);
}

.fontbar-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: min(21rem, calc(100vw - 48px));
  max-height: min(34rem, calc(100vh - 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--white);
  box-shadow: 0 24px 56px -28px rgba(0, 0, 0, 0.55);
}

.fontbar-panel fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.fontbar-panel legend {
  padding: 0;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
}

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

.fontopt {
  display: block;
  position: relative;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.fontopt + .fontopt {
  margin-top: 8px;
}

.fontopt:hover {
  border-color: var(--rule-strong);
}

/* The radio stays a real radio -- arrow keys, form semantics, screen-reader
   state all come free -- and is placed under the tick rather than hidden, so
   it keeps its focus ring. */
.fontopt input {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--green);
}

.fontopt-name {
  display: block;
  padding-right: 26px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.fontopt-note {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The second group in the panel needs a rule above it: without one the two
   legends read as one list. Scoped past `.fontbar-panel fieldset`, which
   zeroes every border in here and would otherwise win on specificity. */
.fontbar-panel .fontbar-group {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* The logo options show the mark itself rather than a name. Both are drawn
   for light ground, so they sit on white inside the panel whichever ground
   they take on the page. */
.logoopt-sample {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
  margin-top: 10px;
}

.logoopt:has(input[value="stacked"]) .logoopt-sample {
  height: 50px;
}

.fontopt-sample {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--green);
}

.fontopt:has(input:checked) {
  border-color: var(--green);
  background: var(--wash);
}


/* Each row previews its own pairing whichever one is live: the name in that
   pairing's sans, the sample line in its serif. */
.fontopt[data-pair="editorial"] .fontopt-name { font-family: "Archivo", var(--fallback-sans); }
.fontopt[data-pair="editorial"] /* The second group in the panel needs a rule above it: without one the two
   legends read as one list. Scoped past `.fontbar-panel fieldset`, which
   zeroes every border in here and would otherwise win on specificity. */
.fontbar-panel .fontbar-group {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* The logo options show the mark itself rather than a name. Both are drawn
   for light ground, so they sit on white inside the panel whichever ground
   they take on the page. */
.logoopt-sample {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
  margin-top: 10px;
}

.logoopt:has(input[value="stacked"]) .logoopt-sample {
  height: 50px;
}

.fontopt-sample { font-family: "Instrument Serif", var(--fallback-serif); }
.fontopt[data-pair="elegant"] .fontopt-name { font-family: "Source Sans 3", var(--fallback-sans); }
.fontopt[data-pair="elegant"] /* The second group in the panel needs a rule above it: without one the two
   legends read as one list. Scoped past `.fontbar-panel fieldset`, which
   zeroes every border in here and would otherwise win on specificity. */
.fontbar-panel .fontbar-group {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* The logo options show the mark itself rather than a name. Both are drawn
   for light ground, so they sit on white inside the panel whichever ground
   they take on the page. */
.logoopt-sample {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
  margin-top: 10px;
}

.logoopt:has(input[value="stacked"]) .logoopt-sample {
  height: 50px;
}

.fontopt-sample { font-family: "Playfair Display", var(--fallback-serif); }

@media (max-width: 30rem) {
  .js-ready .fontbar {
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .fontbar-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fontbar-toggle {
    padding: 0;
    width: 46px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fontbar-toggle,
  .fontopt {
    transition: none;
  }
}

/* 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) {
  .types h3 {
    min-height: 2.2em;
  }

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