/* Mortgage Guy, direction C: "Confident blue". Mobile first: wider screens add to the narrow layout. */

/* Segan comes in Light only, so it's only ever set at 300, and never synthesised bolder. */
@font-face {
  font-family: Segan;
  src: url(/fonts/segan-light.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* One variable file for every weight, Latin characters only. */
@font-face {
  font-family: 'Open Sans';
  src: url(/fonts/open-sans.woff2) format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #006ea8;
  --blue-dark: #004c75;
  /* Darker than the current site's green, which fails contrast as text or behind white text. */
  --green: #4a7300;
  --mist: #eef4f8;
  --navy: #0e2433;
  --ink: #1e2a33;
  --heading: #10202c;
  --muted: #34424d;
  --caption: #4a5864;
  --line: #dce6ee;
  --rail: #c9d8e3;
  --on-blue: #e6f0f6;
  --on-blue-line: rgb(255 255 255 / 35%);
  --on-navy: #d5dee5;
  --display: Segan, 'Open Sans', Helvetica, Arial, sans-serif;
  --text: 'Open Sans', Helvetica, Arial, sans-serif;
  --width: 1160px;
  --gutter: 24px;
  --band: 56px;
}

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

/* A column as tall as the window at least, so on a short page the footer grows to fill the rest, not a strip of white. */
body {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  margin: 0;
  font-family: var(--text);
  line-height: 1.7;
  color: var(--ink);
  background: #fff;
}

a {
  color: var(--blue);
}

a:hover {
  color: var(--blue-dark);
}

/* An email address is one long word, so it may break anywhere rather than push the page wider than a phone. */
a[href^='mailto:'] {
  overflow-wrap: anywhere;
}

h1,
h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-synthesis: none;
  line-height: 1.15;
  color: var(--heading);
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -1px;
}

h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
}

h3 {
  margin: 0;
  line-height: 1.35;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--heading);
}

/* Words for screen readers only, such as a link's "(opens in a new tab)". */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* --width is the content's width, with the gutters outside it, as in the mockups. */
.wrap {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Full-width sections, alternating white and the light band. */
.band {
  padding-block: var(--band);
}

.band-mist {
  background: var(--mist);
}

/* Header: blue, running straight into a page's blue hero. Set at the font's own line height, not the text's 1.7. */
.masthead {
  line-height: normal;
  color: #fff;
  background: var(--blue);
}

/* On a phone, the wordmark and the phone number share the top row, with the menu across the width below. The wordmark
   and the phone button shrink a little on narrow phones to fit side by side. From 880px, it's all one row. */
.masthead-inner {
  display: grid;
  grid-template-areas:
    'wordmark phone'
    'nav nav';
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding-block: 22px;
}

/* As wide as its words, and padded a little for the focus ring, with the padding taken back out of the layout. */
.wordmark,
.wordmark:hover {
  display: flex;
  grid-area: wordmark;
  flex-direction: column;
  justify-self: start;
  padding: 6px;
  margin: -6px;
  color: #fff;
  text-decoration: none;
}

/* White, as the browser's own focus ring would vanish on the blue, with the buttons' 6px corners. */
.wordmark:focus-visible {
  outline: 2px solid #fff;
  border-radius: 6px;
}

/* Segan sits higher in its line than Open Sans, so a tighter line keeps the tagline close under it. */
.wordmark-name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 7.5vw, 2rem);
  font-weight: 300;
  font-synthesis: none;
  line-height: 1;
}

.wordmark-tagline {
  font-size: clamp(0.8125rem, 3.6vw, 0.875rem);
  color: var(--on-blue);
}

/* Until the header goes to one row at 880px, a pale line sets the menu apart from the name and tagline above it. */
.masthead nav {
  display: flex;
  grid-area: nav;
  flex-wrap: wrap;
  gap: 24px 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--on-blue-line);
}

/* Padded to a 44px touch target, and a little either side for the focus ring, with the padding taken back out of the
   layout. */
.masthead nav a {
  padding: 11px 10px;
  margin: -11px -10px;
  color: #fff;
  text-decoration: none;
}

/* The page you're on, or the section it's in, underlined. */
.masthead nav a[aria-current] {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* White, as the wordmark's, and drawn in close round the word rather than round the whole touch target. Drawing it in
   takes the 5px off its corners, leaving the buttons' 6px. */
.masthead nav a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
  border-radius: 11px;
}

.masthead-phone {
  grid-area: phone;
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  background: #fff;
  border-radius: 6px;
}

.masthead-phone:hover {
  color: var(--blue-dark);
}

/* White, as the wordmark's, and held clear of the white button so it shows against the blue. */
.masthead-phone:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Past a phone's width, the menu keeps to its left rather than spreading across a tablet. */
@media (min-width: 480px) {
  .masthead nav {
    column-gap: 36px;
    justify-content: flex-start;
  }
}

@media (min-width: 880px) {
  .masthead-inner {
    grid-template-areas: 'wordmark nav phone';
    grid-template-columns: 1fr auto auto;
    column-gap: 48px;
  }

  .masthead nav {
    padding-top: 0;
    border-top: 0;
  }

  .masthead-phone {
    padding: 10px 18px;
    font-size: 1rem;
  }
}

/* A blue band, for the hero and a featured quote. */
.band-blue {
  color: #fff;
  background: var(--blue);
}

/* A heading above a band's content. */
.stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* A link on to the page that tells more. */
.more {
  font-weight: 700;
}

/* A review's quote and its reviewer, from the quote partial. Each place it sits sets its size. */
.quote {
  margin: 0;
}

.quote blockquote {
  margin: 0;
}

.quote figcaption {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--caption);
}

/* Hero: carries on the header's blue, with a quote card beside the headline, or under it on a phone. */
.hero {
  padding-block: 40px 64px;
  color: #fff;
  background: var(--blue);
}

.hero-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-end;
}

.hero-text {
  display: flex;
  flex: 1 1 560px;
  flex-direction: column;
  gap: 24px;
}

.hero h1 {
  color: #fff;
}

/* A link in the hero's text is white, as the blue would vanish on the blue, and so is its keyboard focus ring. On hover
   the underline thickens. */
.hero-text a:not(.button) {
  color: #fff;
}

.hero-text a:not(.button):hover {
  text-decoration-thickness: 2px;
}

.hero-text a:not(.button):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lead {
  max-width: 640px;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--on-blue);
}

/* A short list in the hero, set like the lead paragraph beside it. */
.lead-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--on-blue);
  list-style: none;
}

/* On a phone, stacked and as wide as the text. Side by side at their own widths from 520px, where both fit. */
.buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.button {
  padding: 15px 28px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
}

@media (min-width: 520px) {
  .buttons {
    flex-flow: row wrap;
  }
}

.button-go,
.button-go:hover {
  color: #fff;
  background: var(--green);
}

.button-light {
  color: var(--blue);
  background: #fff;
}

.button:hover {
  text-decoration: underline;
}

.hero-quote {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  color: var(--ink);
  background: #fff;
  border-radius: 10px;
}

.hero-quote svg,
.card svg {
  color: var(--blue);
}

.hero-quote blockquote {
  font-size: 1.1875rem;
  line-height: 1.55;
}

/* White cards with a line icon beside the heading, on the home page each ending in a client's quote. Also a list's,
   without bullets. */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.card {
  display: grid;
  flex: 1 1 300px;
  grid-template-columns: auto 1fr;
  gap: 16px 14px;
  align-content: start;
  align-items: center;
  padding: 32px;
  background: #fff;
  border-radius: 10px;
}

/* Below the icon and heading, the card's parts take its full width. */
.card > :not(svg, h3) {
  grid-column: 1 / -1;
}

.card h3 {
  font-size: 1.5rem;
}

.card p {
  margin: 0;
}

/* Pushed to the foot of the card, so the quotes line up across a row: their row takes the card's spare height. */
.card:has(> .quote) {
  grid-template-rows: auto auto 1fr;
}

.card .quote {
  padding-top: 16px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}

.card blockquote {
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--muted);
}

.card figcaption {
  font-size: 0.875rem;
}

/* A photo beside a heading and text, or above them on a phone. */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.photo-wide {
  flex: 1 1 400px;
  min-width: 0;
  border-radius: 10px;
}

.photo-head {
  flex: 0 1 300px;
  min-width: 0;
  border-radius: 50%;
}

/* John's circle, from a small photo: shown no wider than half the brokers' so it stays sharp on a sharp screen. */
.photo-small {
  flex-basis: 150px;
}

/* On the about page, it sits centred in the 300px a broker's circle takes, so its row wraps at the same width as
   theirs, the names and text line up beside it, and stacked on a phone it shares their circles' centre line. */
.people .photo-small {
  margin-inline: 75px;
}

/* The people on the about page, one split row after another. */
.people {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.split-text {
  display: flex;
  flex: 1 1 440px;
  flex-direction: column;
  gap: 18px;
}

.split-text p {
  margin: 0;
  font-size: 1.0625rem;
}

.split-text blockquote {
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--heading);
}

.split-text figcaption {
  margin-top: 10px;
}

/* How it works, as numbered steps under a blue rule. The list numbers them, so the labels come from a counter. */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: flex;
  flex: 1 1 230px;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 4px solid var(--blue);
  counter-increment: step;
}

.steps li::before {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 1px;
  content: 'Step ' counter(step);
}

.steps p {
  margin: 0;
  font-size: 0.9375rem;
}

.steps-after {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.steps-after p {
  flex: 1 1 520px;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* One full-width featured quote, centred on blue under a small heading. */
.feature {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  max-width: calc(900px + 2 * var(--gutter));
  text-align: center;
}

.feature h2 {
  font-family: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--on-blue);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.feature blockquote {
  font-family: var(--display);
  font-size: clamp(1.625rem, 3.4vw, 2.375rem);
  font-weight: 300;
  font-synthesis: none;
  line-height: 1.35;
}

.feature figcaption {
  margin-top: 14px;
  font-size: 1rem;
  color: var(--on-blue);
}

.feature p {
  max-width: 680px;
  margin: 0;
  font-size: 1.0625rem;
}

.feature a,
.feature a:hover {
  color: #fff;
}

/* A broker's page. On a phone or tablet, a small circle beside their headline, with the rest below: the hero text's
   own box steps aside so its parts sit in the grid. From 880px, as in the mockup, the full-size circle beside it all. */
.hero-broker {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px 24px;
  align-items: center;
}

.hero-broker .hero-text {
  display: contents;
}

.hero-broker .photo-head {
  grid-row: 1;
  grid-column: 1;
  width: 96px;
}

.hero-broker .photo-small {
  width: 72px;
}

.hero-broker h1 {
  grid-row: 1;
  grid-column: 2;
}

.hero-broker .lead {
  grid-row: 2;
  grid-column: 1 / -1;
}

.hero-broker .buttons {
  grid-row: 3;
  grid-column: 1 / -1;
}

@media (min-width: 880px) {
  .hero-broker {
    grid-template-columns: 1fr auto;
    column-gap: 48px;
  }

  .hero-broker .hero-text {
    display: flex;
    grid-row: 1;
    grid-column: 1;
  }

  .hero-broker .photo-head {
    grid-column: 2;
    width: 260px;
  }

  .hero-broker .photo-small {
    width: 150px;
  }
}

/* Then each part of their story with its heading beside it. */

/* A heading beside its text on a wide screen, above it on a phone. */
.columns {
  display: grid;
  gap: 20px 48px;
}

@media (min-width: 880px) {
  .columns {
    grid-template-columns: 1fr 1.8fr;
  }
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.prose p {
  margin: 0;
  font-size: 1.0625rem;
}

/* Text on its own, held to a readable line length. */
.narrow {
  max-width: 46rem;
}

/* A line set apart after a section's paragraphs, in the headings' face and the brand's blue. */
.prose .highlight {
  margin-top: 6px;
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 300;
  font-synthesis: none;
  line-height: 1.4;
  color: var(--blue);
}

/* Qualifications beside the FBAA's badge, or above it on a phone. The badge is shown as the FBAA drew it. */
.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
}

.credentials p {
  flex: 1 1 360px;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Centred on its own line on a phone. Beside the text, the text takes the room, so it stays at the end. */
.credentials img {
  width: 200px;
  margin-inline: auto;
}

/* How it works in full: each step numbered in a circle, with a line down to the next. The last, after settlement,
   is green, as it carries on. Its heading and any time it takes share a line, with its text below. */
.timeline {
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: step;
}

.timeline li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 8px 0 36px 70px;
  counter-increment: step;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
  content: counter(step);
}

.timeline li::after {
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 23px;
  width: 2px;
  background: var(--rail);
  content: '';
}

.timeline li:last-child::before {
  background: var(--green);
}

.timeline li:last-child::after {
  content: none;
}

/* A timeline whose first step is the one to take, so that one is green and the last is blue. The first comes second,
   so a one-step timeline stays green. */
.timeline-lead li:last-child::before {
  background: var(--blue);
}

.timeline-lead li:first-child::before {
  background: var(--green);
}

.timeline h3 {
  font-size: 1.375rem;
}

.timeline p {
  flex-basis: 100%;
  margin: 0;
}

.tag {
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--heading);
  background: var(--line);
  border-radius: 14px;
}

/* A point set apart among a section's paragraphs, in white with its line icon. */
.callout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 28px;
  background: #fff;
  border-radius: 10px;
}

.callout svg {
  flex: 0 0 32px;
  color: var(--blue);
}

.prose .callout p {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--heading);
}

/* The callout on a white band, in the light band's colour. */
.callout-mist {
  background: var(--mist);
}

/* A step's contact details, a label then its value, below the step's text. */
.timeline dl {
  display: grid;
  flex-basis: 100%;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
}

.timeline dt {
  font-weight: 700;
  color: var(--heading);
}

.timeline dd {
  margin: 0;
}

/* A card on white, drawn by its outline. */
.card-line {
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--line);
}

.card-line h3 {
  font-size: 1.25rem;
}

.card-line p {
  font-size: 0.9375rem;
}

/* The unconditional exchange page. A list that keeps its bullets, set in a little from the text. */
.bullets {
  padding-left: 22px;
  margin: 0;
  font-size: 1.0625rem;
}

.bullets li + li {
  margin-top: 10px;
}

/* A subheading groups with the list below it, and sits apart from the text above. Only one of the column's own, not
   a heading inside something else in it, such as a timeline's steps. */
.prose > h3 {
  margin: 12px 0 -6px;
  font-size: 1.25rem;
}

/* A comparison's rows: the question in bold, then its answer, with space before the next. */
.compare {
  margin: 0;
}

.compare dt {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--heading);
}

.compare dd {
  margin: 4px 0 0;
}

.compare dd + dt {
  margin-top: 18px;
}

/* A line of text after a band's other parts. */
.stack-text {
  margin: 0;
  font-size: 1.0625rem;
}

/* Reviews. Client stories are white cards on the light band: the pull quote, then the reviewer, then the full review
   folded behind a link. */
.stories {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.story {
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin: 0;
  background: #fff;
  border-radius: 10px;
}

.story svg {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  color: var(--blue);
}

/* On a phone, where the stories are folded to their pull quotes, a page of blue would be a lot, so a quote is in the
   headings' near-black until its story is opened. With the full reviews showing, from 720px, it's blue. */
.pull {
  margin: 0;
  padding-bottom: 12px;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 300;
  font-synthesis: none;
  line-height: 1.3;
  color: var(--heading);
}

.story:has(.full[open]) .pull {
  color: var(--blue);
}

.story figcaption,
.shorts figcaption {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--heading);
}

.story figcaption {
  order: 1;
}

.full {
  order: 2;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.full blockquote,
.shorts blockquote {
  margin: 0;
}

.full p,
.shorts p {
  margin: 0;
}

.full p + p,
.shorts p + p {
  margin-top: 1em;
}

/* The summary reads as a link, with a chevron that flips when it's open. */
.full summary {
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  list-style: none;
}

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

.full summary::after {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.6em;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-0.15em) rotate(45deg);
  content: '';
}

.full[open] summary {
  margin-bottom: 1em;
}

.full[open] summary::after {
  transform: translateY(0.1em) rotate(-135deg);
}

/* On a phone, the short reviews are a row to swipe, running to the screen's edges. The first lines up with the heading
   and the next peeks in from the edge. */
.shorts {
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
}

/* Inside its edges, as on a phone they're the screen's. */
.shorts:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}

/* Every card in the row is as tall as the tallest, so the row has an even lower edge. */
.shorts ul {
  display: flex;
  gap: 16px;
  padding: 0 var(--gutter) 12px;
  margin: 0;
  list-style: none;
}

.shorts li {
  display: flex;
  flex: 0 0 82%;
  scroll-snap-align: start;
}

/* The row's end gutter. The list's own padding sits at the screen's edge, not after the cards that overflow it, so the
   last card would end flush against the edge. With the gap before it, this makes up the gutter. It needs the row's
   height, like the cards, as an empty box with no height doesn't count towards how far the row scrolls. */
.shorts ul::after {
  flex: 0 0 calc(var(--gutter) - 16px);
  content: '';
}

/* The name at the card's foot, so the names line up along the row. */
.shorts figure {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.shorts figcaption {
  padding-top: 12px;
  margin-top: auto;
}

/* From 720px the stories take two columns and the short reviews are columns of their own, in four from 1000px. Where the
   browser can show a closed details' content, the full review is unfolded and its summary hidden. Without that, the
   summary stays at every width, as the only way to the full review. */
@media (min-width: 720px) {
  .stories {
    display: block;
    columns: 2;
    column-gap: 24px;
  }

  .stories li {
    margin-bottom: 24px;
    break-inside: avoid;
  }

  .story {
    padding: 32px;
  }

  .story svg {
    margin-bottom: 12px;
  }

  .pull {
    padding-bottom: 20px;
    font-size: 1.75rem;
    color: var(--blue);
    border-bottom: 1px solid var(--line);
  }

  .story figcaption,
  .full {
    order: 0;
  }

  .full {
    padding-block: 20px;
    margin-top: 0;
    border-top: 0;
  }

  .shorts {
    margin-inline: 0;
    overflow: visible;
  }

  .shorts:focus-visible {
    outline-offset: 4px;
  }

  .shorts ul {
    display: block;
    padding: 0;
    columns: 2;
    column-gap: 24px;
  }

  .shorts ul::after {
    content: none;
  }

  .shorts li {
    margin-bottom: 24px;
    break-inside: avoid;
  }

  .shorts figure {
    padding: 24px;
  }

  @supports selector(::details-content) {
    .full summary {
      display: none;
    }

    /* Both, as a browser may hide a closed details' content either way. */
    .full::details-content {
      display: block;
      content-visibility: visible;
    }
  }
}

@media (min-width: 1000px) {
  .shorts ul {
    columns: 4;
  }
}

/* Get in touch, above the footer on every page. */
.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.contact-text {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  gap: 16px;
}

.contact-text p {
  max-width: 46rem;
  margin: 0;
  font-size: 1.0625rem;
}

.contact-text a {
  font-weight: 700;
}

/* Small print after the main text, such as the contact block's hours or a page's general-information note. */
.contact-text .aside,
.prose .aside {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* The form: a white card beside the text, or under it on a phone. Text is 1rem or more, or iOS zooms in on a field. */
.contact-form {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: #fff;
  border-radius: 10px;
}

/* Hidden until /js/contact.js finds the widget; the form's own display would beat the browser's rule. */
.contact-form[hidden] {
  display: none;
}

/* A label over its field. Styled through .field, not the form, as the ALTCHA widget draws its own label and checkbox
   into the form. */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--heading);
}

/* The word "optional" is a hint, not a label. */
.optional {
  font-weight: 400;
  color: var(--caption);
}

.field input,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rail);
  border-radius: 6px;
}

.field textarea {
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

/* Phone and email share a row from 520px, where both fit; below it they stack. */
.field-pair {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 520px) {
  .field-pair {
    flex-direction: row;
  }

  .field-pair .field {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* The honeypot is for bots. It's off the screen rather than hidden, as some bots skip a hidden field. */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The button's styled as a link's, so a button needs its own border, font and cursor, and sits at its own width. */
.contact-form .button {
  align-self: flex-start;
  font-family: inherit;
  cursor: pointer;
  border: 0;
}

.contact-form .button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Footer: the credit representative disclosures, on navy. */
.site-footer {
  flex-grow: 1;
  padding-block: 36px;
  font-size: 0.875rem;
  color: var(--on-navy);
  background: var(--navy);
}

.site-footer p {
  margin: 0 0 10px;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: #fff;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

@media (min-width: 720px) {
  :root {
    --band: 80px;
  }

  .hero {
    padding-block: 56px 96px;
  }
}