/* fonts.css merged in 18.09.2026: one render-blocking stylesheet instead of two */

@font-face {
  font-family: 'Outfit fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Nimbus Sans');
  size-adjust: 96.31%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Public Sans fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Nimbus Sans');
  size-adjust: 103.29%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/outfit-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/public-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --ink:          #0B1024;
  --ink-raised:   #171E3B;
  --ink-panel:    #2B3160;
  --ink-line:     rgba(255, 255, 255, .16);
  --paper:        #F5F4FA;
  --card:         #FFFFFF;

  --violet:       #9986DB;
  --violet-deep:  #4E3A96;
  --violet-press: #3B2B75;
  --violet-wash:  #EFEBFB;

  --mint:         #65DEC4;
  --mint-deep:    #0B6E58;
  --mint-wash:    #E3F8F2;

  --amber:        #FDC308;
  --amber-press:  #DDA800;

  --text:         #24213A;
  --text-dim:     #55516E;
  --text-onink:   #D9D6EA;
  --line:         #E3E0EE;

  --shell:        1160px;
  --gutter:       20px;
  --rhythm:       clamp(44px, 6vw, 76px);

  --r-tile:       6px;
  --r-card:       14px;
  --r-panel:      28px;
  --r-act:        10px;

  --shadow-card:  0 1px 2px rgba(18, 12, 46, .05), 0 10px 26px rgba(18, 12, 46, .07);
  --shadow-lift:  0 2px 4px rgba(18, 12, 46, .06), 0 18px 40px rgba(18, 12, 46, .12);
  --ease:         cubic-bezier(.2, .7, .3, 1);

  --display: 'Outfit', 'Outfit fallback', 'Trebuchet MS', system-ui, sans-serif;
  --text-face: 'Public Sans', 'Public Sans fallback', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;

  scroll-padding-top: var(--header-h, 68px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 17px/1.65 var(--text-face);
  font-synthesis-weight: none;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.18; margin: 0; }
p { margin: 0 0 1.05em; }
a { color: var(--violet-deep); text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--violet-press); }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--violet-deep);
  outline-offset: 2px;
  border-radius: 3px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-tile) 0;
}
.skiplink:focus { left: 0; }

.site-top {
  position: sticky;
  top: 0;
  z-index: 12;
  background: rgba(11, 16, 36, .93);
  border-bottom: 1px solid var(--ink-line);
  backdrop-filter: blur(10px);
}

.site-top__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  flex-wrap: wrap;
}

.brandmark {
  margin-right: auto;
  display: flex;
  align-items: center;
  min-height: 68px;
  line-height: 0;
}
.brandmark__img { width: 208px; height: auto; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 14px/1 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-act);
  padding: 10px 14px;
  cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--mint);
  border-radius: 2px;
  content: '';
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before { position: absolute; top: -5px; }
.menu-toggle__bars::after { position: absolute; top: 5px; }
.menu-toggle[aria-expanded="true"] { border-color: var(--mint); }

@media (max-width: 479px) {
  .menu-toggle__text { display: none; }
  .menu-toggle { padding: 10px 11px; }
  /* <picture> swaps to the compact mark below this width */
  .brandmark__img { width: 44px; }
}

.primary-menu { display: none; width: 100%; }

.primary-menu.is-open {
  display: block;
  background: var(--ink-panel);
  border: 1px solid rgba(101, 222, 196, .38);
  border-radius: var(--r-card);
  box-shadow: 0 16px 40px rgba(4, 2, 14, .55);
  padding: 8px;
  margin-bottom: 14px;
}
.primary-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.primary-menu__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: var(--r-tile);
  font: 600 15px/1.3 var(--display);
  color: #fff;
  text-decoration: none;
}
.primary-menu__list a:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.primary-menu__list a[aria-current="page"] {
  background: rgba(255, 255, 255, .17);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--mint);
}

.nav-group { display: grid; }
.nav-parent {

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--r-tile);
  background: none;
  cursor: pointer;
  font: 600 15px/1.3 var(--display);
  color: #fff;
  text-align: left;
}
.nav-parent:hover,
.nav-parent[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.nav-caret {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s var(--ease);
}
.nav-parent[aria-expanded="true"] .nav-caret { transform: rotate(-135deg); }
.nav-submenu {
  list-style: none;
  margin: 2px 0 4px 12px;
  padding: 0 0 0 10px;
  border-left: 1px solid rgba(255, 255, 255, .16);
  display: grid;
  gap: 2px;
}
.nav-submenu[hidden] { display: none; }
.nav-submenu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: var(--r-tile);
  font: 600 14.5px/1.3 var(--display);
  color: #fff;
  text-decoration: none;
}
.nav-submenu a:hover { background: rgba(255, 255, 255, .12); }
.nav-submenu a[aria-current="page"] {
  background: rgba(255, 255, 255, .17);
  box-shadow: inset 3px 0 0 var(--mint);
}

.nav-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 11px 12px;
  border-radius: var(--r-tile);
  text-align: center;
  font: 600 15px/1.3 var(--display);
  color: var(--mint);
  text-decoration: none;
  border: 1px solid rgba(101, 222, 196, .38);
}
.nav-contact:hover { background: rgba(255, 255, 255, .08); }
.nav-contact[aria-current="page"] { background: rgba(255, 255, 255, .17); color: #fff; }

/* The header opens the full menu at 960px, later than the rest of the page
   (880px): with Areas We Serve the centred menu clears the logo from ~950px. */
@media (min-width: 960px) {
  .menu-toggle { display: none; }

  .primary-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 18px;
    width: auto;
  }
  .primary-menu__list {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .primary-menu__list a {
    padding: 8px 12px;
  }

  .nav-group { position: relative; }
  .nav-parent { width: auto; padding: 8px 12px; }
  .nav-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: max-content;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    border-radius: var(--r-card);
    background: var(--ink-panel);
    border: 1px solid rgba(101, 222, 196, .38);
    box-shadow: 0 16px 40px rgba(4, 2, 14, .55);
  }

  .nav-contact {
    display: inline-flex;
    align-items: center;
    margin-top: 0;
    padding: 8px 12px;
    border: 0;
    color: #fff;
  }

  .primary-menu__list a,
  .nav-parent,
  .nav-contact {
    position: relative;
    border-radius: 8px;
    transition: background-color .16s var(--ease), color .16s var(--ease);
  }
  .primary-menu__list a:hover,
  .nav-parent:hover,
  .nav-contact:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
  }
  .primary-menu__list a[aria-current="page"],
  .nav-contact[aria-current="page"] {
    background: transparent;
    box-shadow: none;
    color: var(--mint);
  }
  .primary-menu__list a[aria-current="page"]::after,
  .nav-contact[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    background: var(--mint);
    border-radius: 2px;
  }
  .nav-parent.is-current,
  .nav-parent[aria-expanded="true"] { color: var(--mint); }

  .header-cta { position: static; transform: none; order: 3; margin-left: auto; }
}

.opening {
  background: var(--ink);
  color: #fff;
  background-image:
    radial-gradient(760px 420px at 84% -12%, rgba(153, 134, 219, .34), transparent 68%),
    radial-gradient(560px 380px at 4% 108%, rgba(101, 222, 196, .20), transparent 70%);
}

.opening__inner { padding-block: clamp(28px, 5vw, 56px) clamp(34px, 5vw, 60px); }

.opening__claim {
  font-size: clamp(30px, 5.4vw, 50px);
  font-weight: 800;
  letter-spacing: -.022em;
  margin-bottom: .5em;
  text-align: center;
  text-wrap: balance;
}

.opening__lede {
  color: var(--text-onink);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  text-wrap: pretty;
}

.opening__lede a { color: var(--mint); }
.opening__lede a:hover { color: #fff; }

.opening__act { margin: 30px 0 0; text-align: center; }

.act {
  display: inline-block;
  text-align: center;
  font: 700 clamp(16px, 1.45vw, 19px)/1 var(--display);
  letter-spacing: -.005em;
  padding: clamp(15px, 1.5vw, 20px) clamp(26px, 3.2vw, 44px);
  border-radius: var(--r-act);
  text-decoration: none;
  transition: transform .16s var(--ease), background-color .16s var(--ease);
}
.act--lead { background: var(--amber); color: #23180B; }
.act--lead:hover { background: var(--amber-press); color: #23180B; transform: translateY(-2px); }
.act--lead:active { transform: translateY(0) scale(.985); }
.act--lg {
  padding: clamp(17px, 1.7vw, 22px) clamp(30px, 3.4vw, 46px);
  font-size: clamp(17px, 1.5vw, 20px);
}

.header-cta {
  font-size: 13px;
  line-height: 1.2;
  padding: 8px 14px;
  text-align: center;
}
@media (max-width: 479px) {
  .header-cta { font-size: 12px; padding: 8px 10px; }
}

@media (max-width: 959.98px) {
  .header-cta {
    position: absolute;
    left: 50%;

    top: 34px;
    transform: translate(-50%, -50%);
  }

  .header-cta:hover { transform: translate(-50%, -50%) translateY(-2px); }
  .header-cta:active { transform: translate(-50%, -50%) translateY(0) scale(.985); }
}

.factstrip {
  display: grid;
  gap: 1px;
  margin-top: 34px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.factstrip__item {
  background: var(--ink-raised);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.factstrip__value {
  display: block;
  font: 800 clamp(20px, 2.6vw, 26px)/1.15 var(--display);
  color: var(--mint);
  letter-spacing: -.01em;
}
.factstrip__note {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-onink);
}

.trailmarks { background: var(--ink); padding-top: 26px; }

.trailmarks ol {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px 12px;
  margin-block: 0;
  padding-block: 0;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .012em;
}
.trailmarks ol::-webkit-scrollbar { display: none; }

.trailmarks li { display: flex; align-items: center; gap: 12px; flex: none; }

.trailmarks li + li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--violet);
  transform: rotate(45deg);
}

.trailmarks a,
.trailmarks span {
  padding: 6px 14px;
  border-radius: var(--r-act);
  border: 1px solid var(--ink-line);
  white-space: nowrap;
}

.trailmarks a {
  color: var(--mint);
  text-decoration: none;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.trailmarks a:hover { background: var(--ink-raised); border-color: var(--mint); }

.trailmarks span { color: #fff; background: var(--ink-raised); }

.layout { padding-block: var(--rhythm); }

.legal-wrap { padding-block: var(--rhythm); }

.readout { min-width: 0; }
.readout > .passage + .passage { margin-top: clamp(30px, 4vw, 44px); }
.passage-cta { margin: 30px 0; text-align: center; }
.passage-cta .act { min-width: 240px; }

.passage > h2 {
  font-size: clamp(23px, 3vw, 31px);
  letter-spacing: -.018em;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--violet-wash);
  scroll-margin-top: 84px;
}
.passage h3 {
  font-size: clamp(18px, 2.1vw, 21px);
  font-weight: 600;
  color: var(--violet-press);
  margin: 30px 0 12px;
}
.passage ul, .passage ol, .query__body ul, .query__body ol { margin: 0 0 1.2em; }

.passage ul, .query__body ul { list-style: none; padding: 0; }
.passage ul li, .query__body ul li { position: relative; padding: 6px 0 6px 30px; }
.passage ul li::before, .query__body ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--mint);
  transform: rotate(45deg);
}

.passage ol, .query__body ol { counter-reset: step; list-style: none; padding: 0; }
.passage ol li, .query__body ol li {
  counter-increment: step;
  position: relative;
  padding: 10px 0 10px 46px;
  border-top: 1px solid var(--line);
}
.passage ol li:last-child, .query__body ol li:last-child { border-bottom: 1px solid var(--line); }
.passage ol li::before, .query__body ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-tile);
  background: var(--violet-wash);
  color: var(--violet-press);
  font: 700 14px/1 var(--display);
}

.sheet {
  overflow-x: auto;
  margin: 0 0 1.4em;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.sheet table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.sheet th, .sheet td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.sheet thead th {
  background: var(--ink);
  color: #fff;
  font: 600 13px/1.35 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sheet tbody th { font-weight: 600; color: var(--text); background: var(--violet-wash); }
.sheet tbody tr:last-child th, .sheet tbody tr:last-child td { border-bottom: 0; }

.plate { margin: 26px 0 30px; }
.plate img {
  width: 100%;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--card);
}
.readout .plate--right,
.readout .plate--left {
  width: min(42%, 400px);
  margin-block: 6px 8px;
}
.readout .plate--right { float: right; margin-left: 36px; }
.readout .plate--left { float: left; margin-right: 36px; }
.readout .plate--right img,
.readout .plate--left img {
  max-height: 320px;
  object-fit: cover;
}
.passage > h2 { clear: both; }
.passage .sheet,
.passage-cta,
.readout .plate:not(.plate--right):not(.plate--left) { clear: both; }
@media (max-width: 40rem) {
  .readout .plate--right,
  .readout .plate--left {
    float: none;
    width: 100%;
    margin: 22px 0;
  }
}

.queries { display: grid; gap: 10px; margin-top: 6px; }

.query {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.query summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 52px 16px 20px;
  position: relative;
  font: 600 17px/1.4 var(--display);
  color: var(--text);
}
.query summary::-webkit-details-marker { display: none; }
.query summary::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--violet-deep);
  border-bottom: 2px solid var(--violet-deep);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.query[open] summary { background: var(--violet-wash); }
.query[open] summary::after { transform: rotate(-135deg); top: 26px; }
.query__body { padding: 16px 20px 4px; border-top: 1px solid var(--line); }
.query__body p:last-child { margin-bottom: 1em; }

.reviews { background: var(--paper); padding-block: var(--rhythm); }
.reviews__title {
  font-size: clamp(21px, 2.6vw, 27px);
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 22px;
  letter-spacing: -.015em;
}
.reviews__carousel { display: flex; align-items: center; gap: 12px; }
.reviews__track {
  list-style: none;
  margin: 0;
  padding: 4px;
  /* matches the padding above: without it the browser scrolls the track by 4px
     to snap the first slide, and that scroll ends LCP recording (23.09.2026) */
  scroll-padding-inline: 4px;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.review-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  scroll-snap-align: start;
}
@media (min-width: 40rem) {
  .review-slide { flex: 0 0 calc(50% - 8px); }
}
@media (min-width: 64rem) {
  .review-slide { flex: 0 0 calc(33.333% - 11px); }
}
.review {
  width: 100%;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 24px 26px;
  display: grid;
  gap: 12px;
  align-content: start;
  text-align: left;
}
.review__stars { font-size: 18px; }
.review__quote { max-width: none; }
.review__who { flex-direction: row; gap: 10px; align-items: center; }
.reviews__arrow {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.reviews__arrow:hover { border-color: var(--violet-deep); color: var(--violet-deep); }
.reviews__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.reviews__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.reviews__dots button[aria-current="true"] { background: var(--violet-deep); }
.review__stars { margin: 0; color: var(--amber); letter-spacing: .1em; font-size: 15px; }

.cta-banner {
  background: linear-gradient(180deg, var(--mint-wash) 0%, #dcf3ec 100%);
  border-block: 1px solid #b7e6da;
}
.cta-banner__inner {
  padding-block: clamp(40px, 5vw, 56px);
  display: grid;
  gap: 26px 48px;
  align-items: center;
}
@media (min-width: 56rem) {
  .cta-banner__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-banner__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font: 700 12px/1 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint-deep);
}
.cta-banner__kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--mint-deep);
}
.cta-banner__title {
  margin: 0 0 18px;
  color: var(--text);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(23px, 3.4vw, 32px);
  letter-spacing: -.015em;
}
.cta-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cta-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-act);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  font: 600 13px/1.2 var(--text-face);
}
.cta-facts svg { width: 16px; height: 16px; flex: none; color: var(--mint-deep); }
.cta-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 30rem) {
  .cta-banner__actions .act { width: 100%; text-align: center; }
}
.review__quote { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.review__who { margin: 0; display: flex; align-items: center; gap: 10px; }
.review__who p { margin: 0; font: 700 14px/1 var(--display); color: var(--text); }
.review__who p span { font-weight: 400; color: var(--text-dim); }
.review__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--violet-wash);
  color: var(--violet-deep);
  font: 700 13px/1 var(--display);
}
.crosswalk {
  background: var(--ink-raised);
  color: #fff;
  padding-block: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--ink-line);
}
.crosscard { background: var(--ink); }
.crosswalk__title {
  font-size: clamp(21px, 2.6vw, 27px);
  font-family: var(--display);
  font-weight: 700;
  margin: 0 0 22px;
  letter-spacing: -.015em;
}
.crosswalk__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.crosscard {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-card);
  padding: 20px;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.crosscard:hover { transform: translateY(-2px); border-color: var(--mint); }
.crosscard__name { font-size: 18px; font-weight: 700; font-family: var(--display); margin: 0 0 7px; }
.crosscard__name a { color: var(--mint); text-decoration: none; }
.crosscard__name a:hover { color: #fff; text-decoration: underline; }
.crosscard__note { color: var(--text-onink); font-size: 15px; margin: 0; }

.notfound-hero { padding-block: clamp(48px, 8vw, 88px); text-align: center; }
.notfound-code {
  margin: 0;
  font: 800 clamp(88px, 18vw, 150px)/0.9 var(--display);
  letter-spacing: -.03em;
  color: var(--amber);
}
.opening--notfound .opening__claim { margin: 6px 0 12px; text-align: center; }
.opening--notfound .opening__lede {
  margin: 0 auto 26px;
  max-width: 44ch;
}
.notfound-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.act--ghost {
  background: transparent;
  border: 2px solid var(--text);
  color: var(--text);
}
.act--ghost:hover {
  background: var(--text);
  color: #fff;
  transform: translateY(-2px);
}
.opening .act--ghost {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.opening .act--ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
@media (max-width: 30rem) {
  .notfound-actions .act { width: 100%; }
}

.contactpage { padding-block: var(--rhythm); display: grid; gap: 24px; }
.contactpage__main { display: grid; gap: 18px; align-content: start; }

.contact-tiles { display: grid; gap: 14px; }

.lead-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.lead-form__title {
  margin: 0 0 6px;
  font: 700 20px/1.2 var(--display);
  color: var(--text);
}
.lead-form__sub {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
@media (max-width: 30rem) {
  .lead-grid { grid-template-columns: 1fr; }
}
.lead-form .field { margin: 0; display: grid; gap: 5px; }
.lead-form .field label {
  font: 600 13.5px/1.2 var(--display);
  color: var(--text);
}
.lead-form .field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  font: 400 15px/1.4 var(--text-face);
  color: var(--text);
}
.lead-form .field input:focus-visible {
  outline: 2px solid var(--violet-deep);
  outline-offset: 1px;
  border-color: var(--violet-deep);
}
.lead-form .field--check {
  margin-top: 16px;
  gap: 4px;
}
.lead-form .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 13.5px/1.45 var(--text-face);
  color: var(--text);
  cursor: pointer;
}
.lead-form .check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
}
.lead-form .check a { color: var(--violet-deep); }
.lead-form__submit { width: 100%; margin-top: 16px; text-align: center; }
.contact-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.contact-tile__label {
  font: 700 12px/1 var(--display);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mint-deep);
  margin: 0 0 8px;
}
.contact-tile__value {
  display: block;
  margin: 0;
  font: 600 17px/1.4 var(--display);
  color: var(--text);
  text-decoration: none;
}
a.contact-tile__value:hover { color: var(--violet-press); }

.contact-map {
  height: 100%;
  min-height: 360px;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.contact-map iframe { width: 100%; height: 100%; min-height: 360px; display: block; }

@media (min-width: 640px) {
  .contact-tiles { grid-template-columns: repeat(3, 1fr); }
}

.calc-wrap { margin: 0; }
.calc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 22px;
  display: grid;
  gap: 16px;
}
.calc__title {
  margin: 0;
  font: 700 15px/1 var(--display);
  letter-spacing: .01em;
  color: var(--text);
}
.range-field { display: grid; gap: 9px; }
.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.range-head label { font: 600 14px/1.2 var(--display); color: var(--text-dim); }
.range-head output { font: 800 21px/1.1 var(--display); color: var(--text); white-space: nowrap; }
.cfl-range { width: 100%; height: 6px; border-radius: 999px; appearance: none; background: var(--line); }
.cfl-range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--violet-deep);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(18, 12, 46, .3);
  cursor: pointer;
}
.cfl-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--violet-deep);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(18, 12, 46, .3);
  cursor: pointer;
}
.range-ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-dim); }
.calc-summary {
  padding: 15px 16px;
  border-radius: 10px;
  background: var(--violet-wash);
  display: grid;
  gap: 10px;
}
.calc-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.calc-summary__label {
  font: 700 11px/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-deep);
}
.calc-total {
  margin: 0;
  font: 800 28px/1 var(--display);
  letter-spacing: -.01em;
  color: var(--text);
}
.calc-breakdown {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--violet);
  font-size: 13.5px;
}
.calc-breakdown > div { display: flex; justify-content: space-between; gap: 12px; color: var(--text-dim); }
.calc-breakdown .is-due { color: var(--text); font-weight: 700; }
.calc-cta { display: block; width: 100%; text-align: center; }

.calc .calc-disclaimer { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }

.opening__split { display: grid; gap: 28px; margin-top: 30px; }
.opening__aside { min-width: 0; }
.opening__aside .opening__lede { margin: 0 0 18px; }
.opening__aside .factstrip { margin-top: 32px; }
@media (min-width: 60rem) {
  .opening__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 40px;
    align-items: start;
  }
  /* Pages with a short lede leave the calc card visibly taller than the
     text column. Stack the fact strip into one column instead of three so
     it grows to close the gap, rather than a blank rectangle beside it. */
  /* Values differ in width, so centring each row on its own leaves the notes
     starting at a different x on every line. A shared value column (subgrid)
     lines them up, and the outer 1fr tracks keep the block centred. */
  .opening__split--roomy .factstrip {
    grid-template-columns: 1fr max-content minmax(0, max-content) 1fr;
  }
  .opening__split--roomy .factstrip__item {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    column-gap: 16px;
    padding-block: 22px;
  }
  .opening__split--roomy .factstrip__value { grid-column: 2; }
  .opening__split--roomy .factstrip__note { grid-column: 3; margin-top: 0; }
}
@media (min-width: 880px) {
  .contactpage { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  .contact-tiles { grid-template-columns: 1fr; }
}

.site-foot { background: var(--ink); color: var(--text-onink); padding-top: clamp(36px, 4.5vw, 52px); }
.foot-grid { display: grid; gap: 22px 36px; padding-bottom: 22px; }
.foot-brand img { width: 60px; height: auto; margin-bottom: 12px; }
.disclosure { font-size: 14px; line-height: 1.55; margin: 0; }
.foot-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-onink);
}
.foot-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
}
.foot-contact-list li span { display: block; }
.foot-contact-list a { color: #fff; text-decoration: none; }
.foot-contact-list a:hover { color: #fff; text-decoration: underline; }
.foot-ic { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--mint); }

.foot-nav__label {
  font: 700 12px/1 var(--display);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mint);
  margin: 0 0 12px;
}
.foot-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-menu a { color: #fff; text-decoration: none; font-size: 15.5px; }
.foot-menu a:hover { color: var(--mint); text-decoration: underline; }
/* Loan pages and Areas We Serve share one footer column */
.foot-stack { display: grid; gap: 22px; align-content: start; }

.foot-base {
  border-top: 1px solid var(--ink-line);
  padding-block: 18px 26px;
  display: grid;
  gap: 4px;
  font-size: 13.5px;
  color: #9F9BBA;
}
.foot-base p { margin: 0; }

@media (min-width: 560px) {
  .factstrip { grid-template-columns: repeat(3, 1fr); }
  .foot-base { grid-template-columns: 1fr auto; align-items: baseline; }
  .foot-base p:last-child { text-align: right; }
}

@media (min-width: 880px) {

  .crosswalk__grid { grid-template-columns: repeat(2, 1fr); }

  .foot-grid { grid-template-columns: 1.3fr 0.9fr 0.9fr 1.25fr; gap: 22px 40px; }
  .foot-grid > .foot-brand { grid-column: auto; }
  .brandmark__img { width: 232px; }
}

@media (min-width: 1160px) {
  .crosswalk__grid { grid-template-columns: repeat(5, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-top, .outline, .crosswalk, .opening__act { display: none; }
  body { background: #fff; }
  .query[open] summary, .query { border: 0; }
}

.apply-dialog {
  border: 0;
  padding: 0;
  margin: auto;
  width: min(94vw, 560px);
  background: transparent;
  overflow: visible;
}
.apply-dialog::backdrop { background: rgba(16, 14, 34, .55); }
.apply-dialog .lead-form {
  margin: 0;
  /* 100vh ignores the mobile URL bar, so the foot of the form (consent +
     submit) can sit under browser chrome. dvh tracks the real visible
     height; the vh line stays as the fallback. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.apply-dialog__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.apply-dialog__close:hover { background: var(--line); }

/* Lead form wired to the Central Lead Gateway. The honeypot is moved
   off-screen rather than display:none, which some bots know to skip. */
.hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.form-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-fields:disabled { opacity: 0.75; }
.form-fields:disabled .check { cursor: not-allowed; }
.lead-form__submit:disabled { cursor: not-allowed; pointer-events: none; }
.form-status {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--mint-wash);
  color: var(--text);
  font: 600 13.5px/1.45 var(--text-face);
}
.form-status:empty { display: none; }
.form-result {
  margin: 0 0 16px;
  padding: 16px 18px;
  border-radius: var(--r-card);
  color: var(--text);
  font-weight: 600;
}
.form-result[hidden] { display: none; }
.form-result--success { background: var(--mint-wash); }
.form-result--error { background: #FDECEC; border-left: 4px solid #c62828; }
.notfound-hero .form-result { max-width: 36rem; margin: 24px auto 0; }

/* Review form under the carousel in .reviews. Stage 1 is the look only: nothing
   is sent or stored yet. Values follow .lead-form, the site's application form. */
.review-form {
  max-width: 44rem;
  margin: 28px auto 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
  display: grid;
  gap: 14px;
}
.review-form__title { margin: 0; font: 700 20px/1.2 var(--display); color: var(--text); }
.review-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 30rem) {
  .review-form__grid { grid-template-columns: 1fr; }
}
.review-form .field { margin: 0; display: grid; gap: 5px; }
.review-form .field label { font: 600 13.5px/1.2 var(--display); color: var(--text); }
.review-form .field input,
.review-form .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  background: var(--card);
  font: 400 15px/1.4 var(--text-face);
  color: var(--text);
}
.review-form .field textarea { resize: vertical; min-height: 110px; }
.review-form .field input:focus-visible,
.review-form .field textarea:focus-visible {
  outline: 2px solid var(--violet-deep);
  outline-offset: 1px;
  border-color: var(--violet-deep);
}
.review-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.review-form__foot .form-status { margin: 0; }
.review-form__submit { border: 0; cursor: pointer; }
.review-form__submit:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* The review form lives in a dialog since 23.09.2026: the page keeps only a
   centred button, and the dialog reuses the application window styles. */
.review-cta { display: flex; justify-content: center; margin-top: 24px; }
.review-dialog .review-form { margin: 0; max-width: none; }
/* star rating in the review dialog (01.10): required, nothing chosen by default.
   Five radios; every star up to the chosen (or hovered) one is filled. */
.rate-pick { min-width: 0; margin: 0; padding: 0; border: 0; }
.rate-pick__legend { padding: 0; margin: 0 0 5px; font: 600 13.5px/1.2 var(--display); color: var(--text); }
.rate-pick__row { display: flex; }
.rate-pick__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.rate-pick__star { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; border-radius: 8px; color: var(--text-dim); cursor: pointer; }
.rate-pick__star svg { width: 2.1rem; height: 2.1rem; fill: transparent; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; transition: fill 0.12s ease, color 0.12s ease; }
.rate-pick__row:has(.rate-pick__input:checked) .rate-pick__star { color: #8A6A00; }
.rate-pick__row:has(.rate-pick__input:checked) .rate-pick__star svg { fill: var(--amber); }
.rate-pick__input:checked + .rate-pick__star ~ .rate-pick__star { color: var(--text-dim); }
.rate-pick__input:checked + .rate-pick__star ~ .rate-pick__star svg { fill: transparent; }
@media (hover: hover) {
  .rate-pick__row.rate-pick__row:hover .rate-pick__star.rate-pick__star { color: #8A6A00; }
  .rate-pick__row.rate-pick__row:hover .rate-pick__star.rate-pick__star svg { fill: var(--amber); }
  .rate-pick__row.rate-pick__row:hover .rate-pick__star:hover ~ .rate-pick__star.rate-pick__star { color: var(--text-dim); }
  .rate-pick__row.rate-pick__row:hover .rate-pick__star:hover ~ .rate-pick__star.rate-pick__star svg { fill: transparent; }
}
.rate-pick__input:focus-visible + .rate-pick__star { outline: 2px solid var(--violet-deep); outline-offset: 1px; }
.rate-pick.is-missing .rate-pick__legend,
.rate-pick.is-missing .rate-pick__star { color: #B3261E; }
