/*
  JETA Payee Services - design system
  Source of truth: docs/design/claude-design/Home.dc.html (Claude Design
  export). Hand-written CSS, no framework. Mobile-first.

  The production CSP is "default-src 'self'", so fonts are self-hosted in
  /assets/fonts and nothing here may rely on inline style attributes.

  WCAG 2.1 contrast, computed with the relative-luminance formula
  (scripted, not eyeballed). Text needs 4.5:1; UI borders and focus 3:1.

    bg = #faf7f1, white = #ffffff, sand = #f1ebe0

    ink (#1c2a38)          on bg / white / sand   13.66 / 14.61 / 12.31:1
    body (#3b4856)         on bg / white / sand    8.74 /  9.34 /  7.88:1
    muted (#4a5562)        on bg / white / sand    7.10 /  7.59 /  6.40:1
    link (#305573)         on bg / white / sand    7.35 /  7.86 /  6.62:1
    primary (#386080)      on bg / white / sand    6.23 /  6.66 /  5.61:1
    navy (#1d354b)         on bg / white / sand   11.81 / 12.63 / 10.64:1
    white                  on primary (#386080)    6.66:1  button text
    white                  on primary-dark         9.02:1  button hover
    white                  on navy (#1d354b)      12.63:1
    navy-tint (#d3dee8)    on navy                 9.25:1  top bar, dark band
    navy-border (#8fb0c9)  on navy                 5.54:1  band button border
    link (#305573)         on check-bg (#e3ebf2)   6.52:1  trust check mark
    focus: navy ring on light surfaces, white ring on navy (>10:1 each)
*/

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Color */
  --color-bg: #faf7f1;
  --color-white: #ffffff;
  --color-sand: #f1ebe0;
  --color-ink: #1c2a38;
  --color-body: #3b4856;
  --color-muted: #4a5562;
  --color-primary: #386080;
  --color-primary-dark: #2b4c66;
  --color-link: #305573;
  --color-navy: #1d354b;
  --color-navy-tint: #d3dee8;
  --color-navy-border: #8fb0c9;
  --color-check-bg: #e3ebf2;
  --color-line: #e4dccd;
  --color-line-soft: #ece5d8;
  --color-line-strong: #d9d0bf;
  --color-card-line: #e1d8c7;

  /* Type */
  --font-sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-size-base: 1.1875rem; /* 19px */
  --font-size-sm: 1.0625rem; /* 17px, small print only */
  --font-size-md: 1.125rem; /* 18px */
  --font-size-lede: clamp(1.1875rem, 1.6vw, 1.3125rem); /* 19-21px */
  --font-size-h1: clamp(2.375rem, 4.6vw, 3.75rem); /* 38-60px */
  --font-size-h2: clamp(1.875rem, 3.2vw, 2.625rem); /* 30-42px */
  --font-size-h3: clamp(1.4375rem, 2vw, 1.625rem); /* 23-26px */
  --line-height-base: 1.6;

  /* Space */
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(56px, 7vw, 112px);
  --container-width: 1240px;
  --measure: 78ch; /* longest line for running text; layouts use the container */

  /* Shape */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --tap-target: 44px;
  --call-bar-height: 84px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

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

a {
  color: var(--color-primary);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-navy);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-navy);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--font-size-h2);
  line-height: 1.18;
}

h3 {
  font-size: var(--font-size-h3);
  line-height: 1.25;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 3px;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: 12px;
  left: -9999px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Buttons */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 30px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.button--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.button--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.button--secondary {
  background: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.button--secondary:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* Top bar */
.top-bar {
  display: none;
  background: var(--color-navy);
  color: var(--color-navy-tint);
  font-size: var(--font-size-sm);
  line-height: 1.3;
}

.top-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.top-bar__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}

.top-bar a {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
}

.top-bar a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.top-bar :focus-visible {
  outline-color: var(--color-white);
}

@media (min-width: 768px) {
  .top-bar {
    display: block;
  }
}

/* Header */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.site-header__brand {
  display: flex;
  flex: none;
  align-items: center;
  border-radius: var(--radius-sm);
}

.site-header__logo {
  height: clamp(44px, 5vw, 60px);
  width: auto;
}

/* Menu toggle: shown only once JS can drive it, and only below 1180px */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-navy);
  font: 700 var(--font-size-md) / 1 var(--font-sans);
  cursor: pointer;
}

.nav-toggle__icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-toggle__icon span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-navy);
  transform-origin: center;
}

/* Open state: the outer bars cross into an X (2px bar + 4px gap = 6px to
   the middle line) and the middle bar fades out */
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

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

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

@media (prefers-reduced-motion: no-preference) {
  .nav-toggle__icon span {
    transition: transform 220ms ease-out, opacity 160ms ease-out;
  }
}

/* Compact nav (below 1180px): a panel under the logo row that bleeds past
   the container gutter to the screen edges */
.site-nav {
  flex: 0 0 calc(100% + 2 * var(--gutter));
  margin: 0 calc(var(--gutter) * -1) -16px;
  padding: 8px var(--gutter) 24px;
  border-top: 1px solid var(--color-line);
  background: var(--color-white);
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.site-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--color-line-soft);
  color: var(--color-navy);
  font-size: 1.3125rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav__list a::after {
  content: "\203A";
  color: var(--color-primary);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--color-primary);
  text-decoration: underline;
}

.site-nav__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.site-nav__actions .button {
  min-height: 56px;
  padding: 0 20px;
  font-size: var(--font-size-md);
}

/* The design switches at 1120px, but seven links plus the button need about
   1100px of content width, so the inline nav waits for 1180px and runs
   tighter spacing until 1300px. */
@media (max-width: 1179px) {
  html.js .nav-toggle {
    display: flex;
  }

  /* nav.js drives two classes so closing can animate: is-open keeps the
     panel rendered, is-shown runs the slide and fade. While closed the panel
     is display: none, so its links are out of the tab order and the
     accessibility tree. */
  html.js .site-nav {
    display: none;
    opacity: 0;
    transform: translateY(-8px);
  }

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

  html.js .site-nav.is-shown {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1179px) and (prefers-reduced-motion: no-preference) {
  html.js .site-nav {
    transition: opacity 200ms ease-in, transform 200ms ease-in;
  }

  html.js .site-nav.is-shown {
    transition-duration: 240ms;
    transition-timing-function: ease-out;
  }
}

@media (min-width: 1180px) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-nav {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  .site-nav__list a {
    min-height: var(--tap-target);
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    white-space: nowrap;
  }

  .site-nav__list a::after {
    content: none;
  }

  .site-nav__actions {
    display: block;
    margin: 0;
  }

  .site-nav__actions .button {
    min-height: 52px;
    padding: 0 24px;
  }

  .site-nav__contact {
    display: none;
  }
}

@media (min-width: 1180px) and (max-width: 1299px) {
  .site-nav {
    gap: 16px;
  }

  .site-nav__list a {
    padding: 10px 8px;
  }

  .site-nav__actions .button {
    padding: 0 18px;
  }
}

/* Shared type helpers */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--color-link);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-primary);
}

.lede {
  color: var(--color-body);
  font-size: clamp(1.1875rem, 1.5vw, 1.25rem);
}

.strong-link,
.arrow-link {
  color: var(--color-link);
  font-weight: 700;
}

/* Hero */
.hero {
  padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 96px);
}

.hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

.hero__copy {
  flex: 1 1 460px;
  min-width: 0;
  max-width: 640px;
}

/* No photo: the copy spans the header's container instead of leaving an empty
   column; only the lede keeps a reading measure. */
.hero__inner--solo .hero__copy {
  flex-basis: 100%;
  max-width: none;
}

.hero__inner--solo .hero__lede {
  max-width: var(--measure);
}

.hero__lede {
  max-width: 560px;
  margin: 24px 0 36px;
  color: var(--color-body);
  font-size: var(--font-size-lede);
}

.hero__questions {
  margin: 24px 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-md);
}

.hero__questions a {
  color: var(--color-link);
  font-weight: 700;
}

.hero__media {
  flex: 1 1 420px;
  min-width: 0;
}

/* The source photo is 16:9; the frame crops it to the design's 5:4 without
   distorting it. The sand background shows only while the image loads. */
.hero__frame {
  display: block;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-sand);
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* Trust strip */
.trust-strip {
  background: var(--color-white);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.trust-strip > .container {
  padding-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(28px, 3vw, 40px);
}

.trust-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 32px;
}

.trust-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.trust-strip__check {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-check-bg);
  color: var(--color-link);
  font-size: 1.25rem;
  font-weight: 700;
}

.trust-strip__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-strip__text strong {
  color: var(--color-navy);
  font-size: var(--font-size-base);
  line-height: 1.35;
}

.trust-strip__text span {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

/* Sections */
.section {
  padding: var(--section-y) 0;
}

.section--sand {
  background: var(--color-sand);
}

.section--navy {
  background: var(--color-navy);
  color: var(--color-white);
  padding: clamp(56px, 6vw, 96px) 0;
}

.section__intro {
  margin-bottom: clamp(32px, 4vw, 52px);
}

.section__intro h2 {
  margin-bottom: 16px;
}

.section__intro .lede {
  max-width: var(--measure);
  margin: 0;
}

/* Heading on one side, body on the other; stacks on narrow screens */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 80px);
}

.split__heading {
  flex: 1 1 380px;
  min-width: 0;
}

.split__body {
  display: flex;
  flex: 1.3 1 460px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  max-width: 680px;
}

.split__body p {
  margin: 0;
}

.split--faq {
  gap: clamp(28px, 5vw, 80px);
}

.split__aside {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 420px;
}

.split__aside h2 {
  margin-bottom: 16px;
}

.split__aside p {
  color: var(--color-body);
}

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chips li {
  padding: 8px 16px;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.arrow-link {
  align-self: flex-start;
  margin-top: 4px;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 2.6vw, 36px);
  border: 1px solid var(--color-card-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(29, 53, 75, 0.05);
}

.card p {
  margin: 0;
  color: var(--color-body);
  font-size: var(--font-size-md);
}

.card .card__kicker {
  color: var(--color-link);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cards--compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 clamp(32px, 4vw, 52px);
}

.cards--compact .card {
  padding: 22px 24px;
  border-radius: 16px;
}

.cards--compact .card p {
  color: var(--color-navy);
  font-weight: 700;
}

/* FAQ disclosure list (native <details>, no JS) */
.faq-list {
  flex: 1.6 1 520px;
  min-width: 0;
  border-top: 2px solid var(--color-navy);
}

.faq-item {
  border-bottom: 1px solid var(--color-line-strong);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary h3 {
  font-size: clamp(1.3125rem, 1.8vw, 1.5rem);
  line-height: 1.3;
}

.faq-item summary:hover h3 {
  color: var(--color-link);
}

.faq-item__sign {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
}

/* Plus drawn from two bars so the vertical one can rotate flat into a
   minus. Borders, not backgrounds, so the bars survive forced-colors mode. */
.faq-item__sign::before,
.faq-item__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  margin: -1.5px 0 0 -7px;
  border-top: 3px solid currentColor;
  border-radius: 1px;
}

.faq-item__sign::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-item__sign::after {
  transform: rotate(0deg);
}

.faq-item p {
  margin: 0;
  padding: 0 64px 28px 4px;
  color: var(--color-body);
  line-height: 1.65;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item__sign::after {
    transition: transform 220ms ease-out;
  }

  /* Answer height animates only where auto sizes can interpolate (Chromium
     131+). Elsewhere the rule is skipped and <details> toggles instantly. */
  @supports (interpolate-size: allow-keywords) {
    .faq-item {
      interpolate-size: allow-keywords;
    }

    .faq-item::details-content {
      block-size: 0;
      overflow-y: clip;
      transition:
        block-size 200ms ease-in,
        content-visibility 200ms ease-in allow-discrete;
    }

    .faq-item[open]::details-content {
      block-size: auto;
      transition-duration: 240ms;
      transition-timing-function: ease-out;
    }
  }
}

/* Dark referral band */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 64px;
}

.band__copy {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 720px;
}

.band h2 {
  color: var(--color-white);
}

.band p {
  margin: 16px 0 0;
  color: var(--color-navy-tint);
}

.band strong {
  color: var(--color-white);
}

.section--navy :focus-visible {
  outline-color: var(--color-white);
}

.section--navy .button--primary {
  border-color: var(--color-navy-border);
}

.section--navy .button--secondary {
  border-color: var(--color-white);
  color: var(--color-white);
}

.section--navy .button--secondary:hover {
  background: var(--color-white);
  color: var(--color-navy);
}

/* Inner pages: no image column, so the page spans the header's container.
   Headings and grids use the full width; running text keeps a reading
   measure so lines stay comfortable. */
.container--page {
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: var(--section-y);
}

.prose {
  margin: 0 0 clamp(32px, 4vw, 52px);
  color: var(--color-ink);
}

.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote {
  max-width: var(--measure);
}

.prose:last-child {
  margin-bottom: 0;
}

.prose h1 {
  margin-bottom: 28px;
}

.prose h2 {
  margin: clamp(40px, 5vw, 64px) 0 16px;
}

.prose h1 + h2,
.prose > h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 32px 0 12px;
}

.prose p,
.prose li {
  color: var(--color-body);
}

.prose a {
  color: var(--color-link);
  font-weight: 700;
}

.prose ul,
.prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-bottom: 10px;
  padding-left: 4px;
}

.prose ul li::marker {
  color: var(--color-primary);
}

.prose ol li::marker {
  color: var(--color-link);
  font-weight: 700;
}

.prose code {
  font-size: 0.9em;
}

/* Contact details on the Contact page */
.contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.contact-item {
  padding: 24px 26px;
  border: 1px solid var(--color-card-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(29, 53, 75, 0.05);
}

.prose .contact-item__label {
  margin: 0 0 8px;
  color: var(--color-link);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-item p {
  margin: 0;
  color: var(--color-navy);
  font-size: var(--font-size-md);
}

/* Footer */
.site-footer {
  background: var(--color-sand);
  border-top: 1px solid var(--color-card-line);
  color: var(--color-ink);
}

.site-footer > .container {
  padding-top: clamp(48px, 5vw, 80px);
  padding-bottom: 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px 48px;
}

.footer-about {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-about p {
  margin: 0;
  color: var(--color-body);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.footer-brand {
  align-self: flex-start;
  border-radius: var(--radius-sm);
}

.footer-brand__logo {
  height: 52px;
  width: auto;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-col__heading {
  margin: 0 0 4px;
  font-size: 1.375rem;
}

.footer-col p {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.55;
}

.footer-col__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-link);
  font-size: var(--font-size-base);
  font-weight: 700;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line-strong);
}

.footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.footer-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
}

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

.footer-bottom__copy {
  margin: 0;
  color: var(--color-muted);
  font-size: 1rem;
}

/* Phone-only Call / Email / Refer bar */
.call-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line-strong);
  background: var(--color-white);
  box-shadow: 0 -4px 16px rgba(29, 53, 75, 0.08);
}

.call-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
  color: var(--color-navy);
  font-size: var(--font-size-md);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.call-bar__link--primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

.call-bar__link--primary:hover {
  color: var(--color-white);
}

/* Keeps the footer's last line clear of the fixed bar, on the footer's own
   background */
.has-call-bar .site-footer {
  padding-bottom: var(--call-bar-height);
}

@media (min-width: 768px) {
  .call-bar {
    display: none;
  }

  .has-call-bar .site-footer {
    padding-bottom: 0;
  }
}

/* Styleguide-only helpers */
.styleguide-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.styleguide-swatch {
  padding: 16px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
}

.styleguide-type-sample {
  margin-bottom: 16px;
}