/* ==========================================================================
   Estate Preservation Agency — site stylesheet
   Mobile first. No framework. Tokens follow STYLE-SPEC.md exactly.

   Contents
     1  Tokens
     2  Reset & base
     3  Typography
     4  Layout helpers
     5  Buttons & links
     6  Header / navigation
     7  Mobile call bar
     8  Hero & interior banners
     9  Trust strip
    10  Sections, cards, grids
    11  Carrier bar & carrier grid
    12  Testimonials
    13  Product-line pages (sidebar, collage)
    14  Contact page
    15  CTA block & lead-form skin
    16  Footer
    17  Utilities, motion, print
   ========================================================================== */

/* == 1. Tokens ============================================================ */

:root {
  /* Brand */
  --gold: #c7bd58;
  --gold-hover: #aea549;
  /* Gold is 1.9:1 on white — never used as text on light. This darkened
     olive is the gold-flavoured text colour (6.2:1 on white). */
  --gold-ink: #6b6224;
  --gold-wash: #faf8ec;

  /* Ink on gold. 5.7:1 — the label colour the current site already uses. */
  --on-gold: #463939;

  /* Neutrals, straight from the spec */
  --n-111: #111111;
  --n-222: #222222;
  --n-333: #333333;
  --n-464: #464343;
  --n-5c: #5c5c5c;
  --n-808: #808080;
  --n-999: #999999;
  --n-ccc: #cccccc;
  --n-d7: #d7d7d7;
  --n-eee: #eeeeee;
  --n-f4: #f4f4f4;
  --n-f7: #f7f7f7;
  --n-faf: #faf9f9;
  --white: #ffffff;

  --heading: var(--n-222);
  --body: var(--n-5c);
  --rule: var(--n-d7);
  --page-bg: var(--n-eee);

  /* Overlays, from the spec */
  --overlay-strong: rgba(0, 0, 0, 0.5);
  --overlay-soft: rgba(17, 17, 17, 0.2);

  /* Type */
  --display: "Cinzel", "Times New Roman", Georgia, serif;
  --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Measure */
  --wrap: 1180px;
  --wrap-narrow: 820px;
  --gutter: 20px;
  --header-h: 76px;
  --radius: 6px;

  /* Distance from the viewport edge to the wrap's content edge. A block can
     subtract this to run off the side of the screen while its opposite edge
     stays on the grid. */
  --bleed: calc((100vw - min(var(--wrap), 100vw)) / 2 + var(--gutter));

  --shadow-sm: 0 1px 3px rgba(17, 17, 17, 0.08);
  --shadow-md: 0 6px 22px rgba(17, 17, 17, 0.1);
  --shadow-lg: 0 14px 40px rgba(17, 17, 17, 0.14);
}

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
    --header-h: 104px;
  }
}

/* == 2. Reset & base ====================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header must not cover in-page anchor targets. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Room for the fixed mobile call bar. */
@media (max-width: 899px) {
  body {
    padding-bottom: 68px;
  }
}

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

/* The UA default is `margin: 1em 40px`. Left unreset it took 80px off the
   width of every <figure> — the testimonial cards were sitting 271px wide
   inside 351px grid cells, which read as a huge gap between them. */
figure {
  margin: 0;
}

main {
  background: var(--white);
  display: block;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 48px 0;
}

/* == 3. Typography ======================================================== */

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 0.5em;
  color: var(--heading);
  font-weight: 400;
  line-height: 1.2;
}

h1,
.h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.2vw, 3.75rem); /* tops out at the original 60px */
  line-height: 1.08;
  letter-spacing: 0.005em;
}

.section__title,
h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  line-height: 1.15;
}

h3 {
  font-family: var(--sans);
  font-size: clamp(1.2rem, 2.1vw, 1.5rem); /* 24px */
  font-weight: 700;
  color: var(--n-333);
}

h4 {
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--n-333);
}

p {
  margin: 0 0 1.15em;
}

p:last-child {
  margin-bottom: 0;
}

/* The 24px/700 intro paragraph the current site uses under every heading. */
.lede {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--body);
  margin-bottom: 1em;
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.75em;
}

ul,
ol {
  padding-left: 1.25em;
}

/* Vertical rhythm for PROSE lists only.
   This used to be unscoped, and it leaked into the horizontal header nav: the
   first <li> ("About") got no margin while items 2-4 got 7.2px, and
   `align-items: center` then split the difference — leaving "About" sitting
   3.6px above its neighbours and inflating the nav row by 7.2px. Component
   lists set their own spacing; keep this one out of them. */
main li + li {
  margin-top: 0.4em;
}

/* Gold-bulleted benefit list. */
.ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5em;
}

.ticks li {
  position: relative;
  padding-left: 34px;
  margin-top: 0.7em;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 16px;
  height: 9px;
  border-left: 3px solid var(--gold-ink);
  border-bottom: 3px solid var(--gold-ink);
  transform: rotate(-45deg);
}

blockquote {
  margin: 0;
}

address {
  font-style: normal;
}

/* == 4. Layout helpers ==================================================== */

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

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.section {
  padding: 56px 0;
}

@media (min-width: 900px) {
  .section {
    padding: 80px 0;
  }
}

.section--tight {
  padding: 40px 0;
}

.section--alt {
  background: var(--n-f4);
}

.section--wash {
  background: var(--gold-wash);
}

.section--dark {
  background: var(--n-222);
  color: var(--n-eee);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--white);
}

.section__head {
  max-width: 760px;
  margin-bottom: 40px;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.stack > * + * {
  margin-top: 1.15em;
}

/* == 5. Buttons & links =================================================== */

a {
  color: var(--gold-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--n-222);
}

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

.section--dark :focus-visible,
.hero :focus-visible,
.banner :focus-visible,
.callbar :focus-visible {
  outline-color: var(--white);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 13px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Gold always carries dark ink — 5.7:1. Never white on gold. */
.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--n-222);
}

.btn--outline {
  background: transparent;
  border-color: currentColor;
  color: var(--gold-ink);
}

.btn--outline:hover {
  background: var(--gold-wash);
  color: var(--n-222);
}

/* On dark backgrounds the outline button goes white. */
.hero .btn--outline,
.banner .btn--outline,
.section--dark .btn--outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.75);
}

.hero .btn--outline:hover,
.banner .btn--outline:hover,
.section--dark .btn--outline:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.btn--sm {
  min-height: 46px;
  padding: 10px 20px;
  font-size: 1rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

.arrow-link {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

.arrow-link:hover {
  border-bottom-color: var(--gold-hover);
}

/* == 6. Header / navigation =============================================== */

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  background: var(--n-222);
  color: var(--white);
  padding: 12px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 8px;
  color: var(--white);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.2s ease;
}

.site-header.is-stuck {
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  /* The nav is allowed to grow but never to overrun the logo, so this gap is
     a hard minimum, not a suggestion. */
  gap: 20px;
  min-height: var(--header-h);
}

@media (min-width: 1280px) {
  .site-header__inner {
    gap: 28px;
  }
}

.site-header__logo {
  flex: 0 0 auto;
  order: 0;
  line-height: 0;
  /* The wordmark PNG carries transparent margin; without this the first nav
     item reads as touching it. */
  padding-right: 4px;
}

.site-header__logo img {
  width: auto;
  height: 40px;
  transition: height 0.2s ease;
}

@media (min-width: 900px) {
  .site-header__logo img {
    height: 56px;
  }

  .site-header.is-stuck .site-header__logo img {
    height: 46px;
  }
}

/* -- hamburger -- */

.nav-toggle {
  display: inline-flex;
  order: 3;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--n-333);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--n-333);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -7px;
}

.nav-toggle__bars::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* -- the nav itself -- */

.nav {
  display: none;
}

.nav.is-open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  padding: 8px var(--gutter) 24px;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
  border-bottom: 1px solid var(--n-eee);
  margin: 0;
}

.nav__list li + li,
.nav__menu li + li {
  margin-top: 0;
}

.nav__menu li {
  margin: 0;
}

.nav__link {
  display: block;
  padding: 15px 44px 15px 0;
  color: var(--n-5c);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--n-222);
}

.nav__link.is-active {
  font-weight: 700;
}

.nav__caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  vertical-align: 2px;
}

/* On mobile the caret lives in its own button so the parent link still
   navigates and the submenu is still keyboard operable. */
.nav__toggle {
  position: absolute;
  right: 0;
  top: 3px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--n-5c);
  cursor: pointer;
}

.nav__toggle[aria-expanded="true"] .nav__caret {
  transform: rotate(-135deg);
  vertical-align: -2px;
}

.nav__item .nav__link .nav__caret {
  display: none;
}

.nav__menu {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 0 16px;
  display: none;
  border-left: 2px solid var(--gold);
}

.nav__menu.is-open {
  display: block;
}

.nav__sublink {
  display: block;
  padding: 11px 0;
  color: var(--n-5c);
  font-size: 0.875rem;
  letter-spacing: 0.42px;
  text-transform: uppercase;
  text-decoration: none;
}

.nav__sublink:hover {
  color: var(--n-222);
}

/* Outside .nav, so collapsing the nav never takes the conversion path with
   it. Hidden only below 900px, where the fixed call bar covers the same two
   actions with bigger targets. */
.nav__cta {
  display: none;
  align-items: center;
  gap: 14px;
  order: 2;
  margin-left: auto;
}

@media (min-width: 900px) {
  .nav__cta {
    display: flex;
  }
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--n-333);
  text-decoration: none;
  font-weight: 700;
}

.header-phone:hover {
  color: var(--gold-ink);
}

.header-phone__icon {
  font-size: 1.35rem;
  color: var(--gold-ink);
  line-height: 1;
}

.header-phone__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.header-phone__label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-808);
}

.header-phone__number {
  font-size: 1.0625rem;
}

@media (min-width: 1280px) {
  .nav-toggle {
    display: none;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 24px;
    /* min-width:0 lets the nav shrink inside the flex row instead of
       overflowing leftwards across the logo. */
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  .nav.is-open {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0;
    max-height: none;
    overflow: visible;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .nav__item {
    border-bottom: 0;
  }

  .nav__link {
    padding: 12px 10px;
    line-height: 1.4;
  }

  .nav__item .nav__link .nav__caret {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
  }

  .nav__toggle {
    display: none;
  }

  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    background: var(--white);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--gold);
    border-left: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
    padding: 8px 0;
    margin: 0;
    z-index: 20;
  }

  .nav__item--has-menu:hover .nav__menu,
  .nav__item--has-menu:focus-within .nav__menu,
  .nav__menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .nav__sublink {
    padding: 10px 18px;
    white-space: nowrap;
  }

  .nav__sublink:hover {
    background: var(--gold-wash);
  }

  .nav__cta {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-top: 0;
    flex: 0 0 auto;
  }
}

/* The header gets more room than the body measure so the full nav, the phone
   number and the CTA all fit on one line before the burger takes over. */
@media (min-width: 1280px) {
  .site-header .wrap {
    max-width: 1340px;
  }
}

/* Compact desktop nav sizing — permanent, not a squeeze band. With five
   top-level items plus the phone and CTA button, the full-size nav can no
   longer fit inside the 1340px wrap at ANY viewport, so the compact sizes
   are simply what the desktop nav is. Below 1280px the burger takes over. */
@media (min-width: 1280px) {
  .nav {
    gap: 14px;
  }

  .nav__link {
    font-size: 0.8125rem;
    padding: 12px 6px;
    letter-spacing: 0.3px;
  }

  .nav__cta {
    gap: 12px;
  }

  .header-phone__label {
    display: none;
  }

  .header-phone__number {
    font-size: 0.9375rem;
  }

  .site-header .btn--sm {
    font-size: 0.875rem;
    padding: 10px 14px;
  }
}

/* == 7. Mobile call bar =================================================== */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 1px;
  background: var(--n-222);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.25);
}

.callbar__btn {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 64px;
  padding: 10px 8px;
  border: 0;
  border-radius: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

/* Narrow phones: drop the word "Call" so the number itself never wraps. */
@media (max-width: 359px) {
  .callbar__btn {
    font-size: 0.875rem;
  }

  .callbar__word {
    display: none;
  }

  /* The full-size wordmark plus the labelled MENU button need ~348px; on a
     320px screen the logo steps down and the burger goes icon-only. */
  .site-header__logo img {
    height: 32px;
  }

  .nav-toggle__label {
    display: none;
  }

  .nav-toggle {
    padding: 12px;
  }
}

.callbar__btn--call {
  background: var(--n-222);
  color: var(--white);
}

/* The global a:hover turns links --n-222 — the exact background of this
   button, which made the label vanish on tap. Text stays white; the
   background darkens for tap feedback instead. */
.callbar__btn--call:hover,
.callbar__btn--call:active,
.callbar__btn--call:focus-visible {
  background: var(--n-111);
  color: var(--white);
}

.callbar__btn--quote {
  background: var(--gold);
  color: var(--on-gold);
}

.callbar__btn--quote:hover {
  background: var(--gold-hover);
}

@media (min-width: 900px) {
  .callbar {
    display: none;
  }
}

/* == 8. Hero & interior banners =========================================== */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--n-111);
  color: var(--white);
  display: flex;
  align-items: center;
  min-height: 520px;
  padding: 64px 0;
}

@media (min-width: 900px) {
  .hero {
    min-height: 640px;
    padding: 96px 0;
  }
}

.hero__media,
.banner__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero__media img,
.banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The hero still IS the video's poster frame, so the two must share a focal
   point — any mismatch shows up as the picture jumping sideways the instant
   the video fades in. Both sit at `center 22%`: on wide screens the frame is
   cropped top and bottom, and dead-centre cut the man's head off. (On narrow
   screens it crops left/right instead, so the vertical value does nothing.)
   Interior banners have no video, so they keep the off-centre framing that
   holds subjects clear of the heading. */
.hero__media img {
  object-position: center 10%;
  /* The slow drift zoom scales from here too, or it crops the head back off. */
  transform-origin: center 10%;
}

.banner__media img {
  object-position: 72% center;
}

@media (max-width: 899px) {
  .banner__media img {
    object-position: 62% center;
  }
}

/* The dark-overlay hero treatment from the spec. */
.hero::before,
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.62) 0%,
    var(--overlay-strong) 45%,
    var(--overlay-soft) 100%
  );
}

.hero__logo {
  height: 46px;
  width: auto;
  margin-bottom: 26px;
}

@media (min-width: 900px) {
  .hero__logo {
    height: 62px;
    margin-bottom: 32px;
  }
}

.hero__inner {
  max-width: 760px;
}

.hero__title {
  color: var(--white);
  margin-bottom: 0.4em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero__value {
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
  max-width: 42em;
  margin-bottom: 1.6em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.hero__actions,
.banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.hero__tel,
.banner__tel {
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.hero__tel:hover,
.banner__tel:hover {
  color: var(--white);
  text-decoration-color: var(--white);
}

/* -- interior page banner -- */

.banner {
  position: relative;
  isolation: isolate;
  background: var(--n-464);
  color: var(--white);
  padding: 72px 0;
}

@media (min-width: 900px) {
  .banner {
    padding: 108px 0;
  }
}

.banner__title {
  color: var(--white);
  margin-bottom: 0.35em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.banner__sub {
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  color: var(--white);
  max-width: 46em;
  margin-bottom: 1.5em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* == 9. Trust strip ======================================================= */

.trust-strip {
  background: var(--n-222);
  color: var(--n-eee);
  padding: 14px 0;
}

/* Two columns on a phone with a gold tick each; one centred row with dot
   separators once there is room. */
.trust-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.trust-strip__list li {
  margin: 0;
  padding: 0 0 0 18px;
  position: relative;
}

.trust-strip__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

@media (min-width: 860px) {
  .trust-strip__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
    font-size: 0.9375rem;
  }

  .trust-strip__list li {
    padding: 2px 20px;
  }

  .trust-strip__list li::before {
    display: none;
  }

  .trust-strip__list li + li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
  }
}

/* == 10. Sections, cards, grids =========================================== */

.grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

@media (min-width: 940px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Split: copy beside an image. */
.split {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  .split--media-first .split__media {
    order: -1;
  }
}

.split__media img {
  width: 100%;
  border-radius: var(--radius);
}

/* Media that runs off the left edge of the screen. The right edge stays on
   the grid, so the layout still reads as a two-column split — the picture
   just breaks the frame. Below the split breakpoint it goes full width
   instead, edge to edge. */
.split--bleed-left .split__media {
  margin-left: calc(var(--bleed) * -1);
  width: calc(100% + var(--bleed));
  border-radius: 0 var(--radius) var(--radius) 0;
  overflow: hidden;
}

.split--bleed-left .split__media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: 60% center;
  border-radius: 0;
}

@media (min-width: 900px) {
  .split--bleed-left .split__media img {
    min-height: 460px;
  }
}

/* 100vw ignores the scrollbar in some engines; clip so the bleed can never
   introduce a horizontal scrollbar. */
.section--bleed {
  overflow-x: clip;
}

/* Card */
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--n-ccc);
}

.card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--n-eee);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
}

.card__title {
  margin: 0;
  font-size: 1.3125rem;
}

.card__title a {
  color: var(--n-222);
  text-decoration: none;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__text {
  font-size: 1rem;
  margin: 0;
}

.card__cta {
  margin-top: auto;
  padding-top: 10px;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.card--link {
  position: relative;
}

/* Concern tiles — the "Seniors Top Concerns" row. */
.concern {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 26px 24px;
  position: relative;
}

.concern__title {
  font-size: 1.25rem;
  margin-bottom: 0.35em;
}

.concern__title a {
  color: var(--n-222);
  text-decoration: none;
}

.concern__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.concern__text {
  font-size: 1rem;
  margin: 0;
}

.concern:hover {
  box-shadow: var(--shadow-md);
}

/* == 11. Carrier bar & carrier grid ======================================= */

.carrier-bar {
  background: var(--white);
  border-top: 1px solid var(--n-eee);
  border-bottom: 1px solid var(--n-eee);
  padding: 40px 0;
}

.carrier-bar__title {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--n-5c);
  text-align: center;
  margin-bottom: 26px;
}

.carrier-bar__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.carrier-bar__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 18px 24px;
}

@media (min-width: 640px) {
  .carrier-bar__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 940px) {
  .carrier-bar__list {
    grid-template-columns: repeat(6, 1fr);
  }
}

.carrier-bar__item {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
}

.carrier-bar__item img {
  max-height: 58px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.carrier-bar__link:hover .carrier-bar__item img,
.carrier-bar__link:focus-visible .carrier-bar__item img {
  filter: grayscale(0);
  opacity: 1;
}

.carrier-bar__more {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.carrier-bar__link:hover .carrier-bar__more {
  color: var(--n-222);
}

/* The full grid on /insurance-carriers */
.carriers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

@media (min-width: 640px) {
  .carriers {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 940px) {
  .carriers {
    grid-template-columns: repeat(4, 1fr);
  }
}

.carriers li {
  margin: 0;
}

.carrier {
  height: 100%;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  min-height: 150px;
}

.carrier__logo {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrier__logo img {
  max-height: 62px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.carrier__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--n-333);
  line-height: 1.3;
  margin: 0;
}

.carrier--nologo .carrier__name {
  font-size: 1.0625rem;
}

/* == 12. Testimonials ===================================================== */

.quotes {
  display: grid;
  gap: 24px;
}

@media (min-width: 860px) {
  .quotes--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -- carousel rail ---------------------------------------------------------
   A real scroll container, not a JS-only slider: with scripts off it is still
   a swipeable, keyboard-scrollable row containing every quote. */
.quotes-wrap {
  position: relative;
}

.quotes__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 26px;
  font-size: 1rem;
  color: var(--n-5c);
}

.quotes__rating strong {
  color: var(--n-222);
  font-size: 1.125rem;
}

.quotes__stars {
  color: var(--gold-ink);
  letter-spacing: 0.1em;
}

.quotes--rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  /* the rail is focusable, so it needs a visible ring of its own */
  scrollbar-width: none;
}

.quotes--rail::-webkit-scrollbar {
  display: none;
}

@media (min-width: 620px) {
  .quotes--rail {
    grid-auto-columns: calc((100% - 24px) / 2);
  }
}

@media (min-width: 940px) {
  .quotes--rail {
    grid-auto-columns: calc((100% - 48px) / 3);
  }
}

.quotes--rail > .quote {
  scroll-snap-align: start;
}

/* -- controls (added by site.js) -- */

.quotes__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}

.quotes__arrow {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--n-333);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.quotes__arrow:hover {
  border-color: var(--gold);
  color: var(--gold-ink);
  box-shadow: var(--shadow-sm);
}

.quotes__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
  border-color: var(--rule);
}

.quotes__arrow svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.quotes__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  /* More quotes = more dots; wrapping keeps the arrows on-screen at any
     count and any viewport instead of pushing past the page edge. */
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
}

@media (max-width: 379px) {
  .quotes__controls {
    gap: 10px;
  }

  .quotes__dot {
    width: 22px;
  }
}

/* 44px hit area around a small visual dot. */
.quotes__dot {
  width: 26px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quotes__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--n-ccc);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.quotes__dot[aria-current="true"]::before {
  background: var(--gold-ink);
  transform: scale(1.35);
}

/* The quote itself gains a rating row and a source line. */
.quote__stars {
  color: var(--gold);
  letter-spacing: 0.12em;
  font-size: 1rem;
  margin-bottom: 10px;
}

.quote__source {
  display: block;
  font-size: 0.8125rem;
  color: var(--n-808);
  margin-top: 2px;
}

.quote {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
}

.quote::before {
  content: "\201C";
  display: block;
  font-family: var(--display);
  font-size: 3.5rem;
  line-height: 0.7;
  color: var(--gold);
  margin-bottom: 12px;
}

.quote__text {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 0 20px;
  color: var(--n-333);
}

.quote__by {
  margin-top: auto;
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--n-5c);
}

.quote__name {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--n-222);
}

/* == 13. Product-line pages =============================================== */

.prodlayout {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .prodlayout {
    grid-template-columns: 260px 1fr;
    gap: 56px;
    align-items: start;
  }
}

.prodnav {
  background: var(--n-f4);
  border-radius: var(--radius);
  padding: 22px 22px 26px;
}

@media (min-width: 900px) {
  .prodnav {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

.prodnav__title {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-5c);
  margin-bottom: 14px;
}

.prodnav__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.prodnav__list li {
  margin: 0;
  border-top: 1px solid var(--n-d7);
}

.prodnav__link {
  display: block;
  padding: 12px 0;
  color: var(--n-5c);
  font-size: 0.9375rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
}

.prodnav__link:hover {
  color: var(--n-222);
}

.prodnav__link.is-active {
  color: var(--n-222);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--gold);
  padding-left: 12px;
}

.prodnav__carriers {
  display: inline-block;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

.prose {
  max-width: 68ch;
}

.prose h2 {
  margin-top: 1.4em;
}

.prose h2:first-child {
  margin-top: 0;
}

/* "Who this is for" trio */
.whofor {
  background: var(--gold-wash);
  border: 1px solid #e6dfae;
  border-radius: var(--radius);
  padding: 24px 26px;
  margin: 0 0 34px;
}

.whofor__title {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 12px;
}

.whofor .ticks {
  margin-bottom: 0;
}

.whofor .ticks li {
  color: var(--n-333);
  font-size: 1.0625rem;
}

/* -- the seven-photo collage -- */

.collage {
  background: var(--n-d7);
}

.collage__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 120px;
  gap: 4px;
}

@media (min-width: 760px) {
  .collage__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
  }
}

@media (min-width: 1200px) {
  .collage__grid {
    grid-auto-rows: 200px;
  }
}

.collage__tile {
  margin: 0;
  overflow: hidden;
  background: var(--n-ccc);
}

.collage__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage__tile--large {
  grid-column: span 2;
  grid-row: span 2;
}

@media (min-width: 760px) {
  .collage__tile--tall {
    grid-row: span 2;
  }

  .collage__tile--wide {
    grid-column: span 2;
  }
}

/* == 14. Contact page ===================================================== */

.contact-layout {
  display: grid;
  gap: 40px;
}

@media (min-width: 1000px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}

.office {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.office + .office {
  margin-top: 18px;
}

.office__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 8px;
}

.office__address {
  font-size: 1.0625rem;
  line-height: 1.5;
  margin-bottom: 10px;
  color: var(--n-333);
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--n-eee);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}

.contact-list__label {
  min-width: 84px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n-808);
}

.contact-list a {
  font-size: 1.125rem;
  font-weight: 700;
}

.scheduler-card {
  background: var(--n-222);
  color: var(--n-eee);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-top: 24px;
}

.scheduler-card h2 {
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: 0.5em;
}

.scheduler-card p {
  font-size: 1rem;
  margin-bottom: 1.2em;
}

/* == 15. CTA block & lead-form skin ======================================= */

.cta-block {
  background: var(--n-f4);
  border-top: 1px solid var(--rule);
  /* Deliberately tighter than a normal section: this always follows one, and
     two full section paddings back to back reads as a gap, not a break. */
  padding: 44px 0 52px;
}

@media (min-width: 900px) {
  .cta-block {
    padding: 56px 0 64px;
  }
}

.cta-block__inner {
  display: grid;
  gap: 32px;
}

@media (min-width: 940px) {
  .cta-block__inner {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    gap: 60px;
    align-items: start;
  }

  /* The wizard runs three or four times the height of the copy beside it.
     Pinning the copy keeps the promises and the phone number in view for the
     whole scroll instead of leaving ~900px of empty column. */
  .cta-block__copy {
    position: sticky;
    top: calc(var(--header-h) + 28px);
  }
}

/* If the copy is ever taller than the space under the header, unpin it —
   a sticky element taller than its viewport slot scrolls badly. */
@media (min-width: 940px) and (max-height: 620px) {
  .cta-block__copy {
    position: static;
  }
}

/* Smaller than a section title: this is a working header above a form, and at
   the full display size it wrapped to two lines in a half-width column. */
.cta-block__title {
  font-size: clamp(1.6rem, 2.6vw, 2.125rem);
  margin-bottom: 0.45em;
}

.cta-block__intro {
  font-size: 1.0625rem;
  max-width: 40em;
}

.cta-block__phone {
  font-size: 1.125rem;
  margin-bottom: 0.5em;
}

.cta-block__tel {
  font-weight: 700;
  font-size: 1.375rem;
  white-space: nowrap;
}

.cta-block__scheduler {
  font-size: 1rem;
}

.cta-block__form {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow-sm);
}

/* Contact page: the full wizard, above the fold. */
.form-panel {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow-md);
}

/* The lead form ships its own near-identical gold (#C4B454) and writes its
   tokens as inline custom properties on `.epa-form`, so pulling it onto the
   brand gold takes !important. Its contrast rules are untouched: gold still
   only ever carries dark ink, and --epa-gold-ink stays a dark olive (6.2:1
   on white) for gold-flavoured text. */
.epa-form {
  /* Brand gold. The package ships #C4B454 as an inline custom property on its
     own root, so overriding it needs !important. Its contrast rules are
     preserved: gold only ever carries dark ink. */
  --epa-gold: #c7bd58 !important;
  --epa-gold-hover: #aea549 !important;
  --epa-gold-ink: #6b6224 !important;
  --epa-gold-wash: #faf8ec !important;
  --epa-gold-border: #8a7c2e !important;

  /* Our faces, not Georgia and system-ui. */
  --epa-serif: var(--display) !important;
  --epa-sans: var(--sans) !important;

  /* The shipped field border is 2px #6B6B6B, which reads as a heavy black box.
     #8E8E8E at 1px is 3.3:1 against white — still clear of the 3:1 WCAG
     minimum for a control boundary, but far quieter. */
  --epa-border: #8e8e8e !important;
  --epa-focus: #6b6224 !important;
  --epa-radius: 6px !important;
  --epa-ink: var(--n-222) !important;
  --epa-ink-muted: var(--n-5c) !important;
}

.epa-form input[type="text"],
.epa-form input[type="tel"],
.epa-form input[type="email"],
.epa-form input[type="date"],
.epa-form select,
.epa-form textarea {
  border-width: 1px;
  box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.epa-form input:hover,
.epa-form select:hover,
.epa-form textarea:hover {
  border-color: var(--n-5c);
}

.epa-form input:focus,
.epa-form select:focus,
.epa-form textarea:focus {
  border-color: var(--gold-ink);
  box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.04), 0 0 0 3px rgba(199, 189, 88, 0.28);
}

/* The headline is the one place Cinzel belongs in the form. */
.epa-form .epa-headline {
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* -- the card the form sits in -------------------------------------------
   The wrapper was 8px of padding, so the form's own text ran almost to the
   card edge. Give it a real margin and a gold top edge to tie it to the
   section headings. */
.cta-block__form,
.form-panel {
  padding: 26px 22px 28px;
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.09);
}

@media (min-width: 560px) {
  .cta-block__form,
  .form-panel {
    padding: 34px 32px 36px;
  }
}

/* == 16. Footer ===========================================================
   Dark, to close the page the way the trust strip and stat band open it, and
   so the black legal bar is the end of a gradient rather than a hard edge.
   Every colour here is checked against #1E1E1E: gold 7.9:1, #CFCFCF 10.4:1,
   #B9B9B9 7.8:1.
   ========================================================================= */

.site-footer {
  background: linear-gradient(180deg, #262626 0%, #1e1e1e 100%);
  color: #cfcfcf;
  font-size: 0.9375rem;
  border-top: 3px solid var(--gold);
}

/* -- closing CTA band -- */

.footer-cta {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.footer-cta__text {
  margin: 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  color: var(--white);
}

.footer-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.footer-cta__tel {
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.footer-cta__tel:hover {
  color: var(--white);
}

/* -- columns -- */

.site-footer__top {
  display: grid;
  gap: 34px;
  padding-top: 48px;
  padding-bottom: 44px;
}

@media (min-width: 640px) {
  .site-footer__top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .site-footer__top {
    grid-template-columns: 1.35fr 1fr 1fr 1.15fr 1.1fr;
    gap: 30px;
  }
}

.footer__logo {
  display: inline-block;
  line-height: 0;
}

.footer__logo img {
  width: auto;
  height: 46px;
  margin-bottom: 16px;
}

.footer__tagline {
  font-size: 0.9375rem;
  color: #b9b9b9;
  margin-bottom: 20px;
  max-width: 26em;
}

.footer__offices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.footer__offices li {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
}

.footer__office-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}

.footer__offices a {
  color: #cfcfcf;
  text-decoration: none;
  line-height: 1.45;
}

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

/* Gold rule under each column label, so the columns read as a set. */
.footer__heading {
  position: relative;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 18px;
  padding-bottom: 10px;
}

.footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--gold);
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__list li {
  margin: 0;
}

.footer__list a,
.footer__contact a {
  display: inline-block;
  padding: 5px 0;
  color: #cfcfcf;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.footer__list a:hover,
.footer__contact a:hover {
  color: var(--gold);
}

@media (hover: hover) {
  .footer__list a:hover {
    transform: translateX(3px);
  }
}

/* -- contact column -- */

.footer__phone {
  margin: 0 0 16px;
}

.footer__phone-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 2px;
}

.footer__phone a {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--gold);
  padding: 0;
}

.footer__phone a:hover {
  color: var(--white);
}

.footer__list--contact li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 3px 0;
}

.footer__list--contact li > span {
  min-width: 52px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.footer__hours {
  margin-top: 16px;
  font-size: 0.8125rem;
  color: #9a9a9a;
}

/* -- disclaimer + legal -- */

.site-footer__disclaimer {
  padding-top: 22px;
  padding-bottom: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.site-footer__disclaimer p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #b9b9b9;
  max-width: 92ch;
  margin: 0;
}

.site-footer__legal {
  background: var(--n-111);
  color: #9a9a9a;
  padding: 16px 0;
}

.site-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
}

.site-footer__legal p {
  margin: 0;
  font-size: 0.8125rem;
}

.site-footer__locations {
  color: var(--gold);
}

/* Focus rings must stay visible against the dark ground. */
.site-footer :focus-visible,
.footer-cta :focus-visible {
  outline-color: var(--white);
}

/* == 17. Breadcrumbs, utilities, motion, print ============================ */

.breadcrumbs {
  background: var(--n-f7);
  border-bottom: 1px solid var(--n-eee);
  padding: 12px 0;
  font-size: 0.875rem;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--n-5c);
}

.breadcrumbs li {
  margin: 0;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--n-999);
}

.breadcrumbs a {
  color: var(--n-5c);
}

.breadcrumbs a:hover {
  color: var(--n-222);
}

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

.center {
  text-align: center;
}

/* Optional line break — only above the small breakpoint. Used to hold the
   hero headline to the three lines the current site sets it in. */
.brk {
  display: none;
}

@media (min-width: 720px) {
  .brk {
    display: inline;
  }
}

.mt-0 {
  margin-top: 0;
}

.figure-caption {
  font-size: 0.8125rem;
  color: var(--n-808);
  margin-top: 8px;
}

/* == 18. Movement =========================================================
   Everything here is additive. `.reveal` elements are visible by default and
   only start hidden once site.js confirms IntersectionObserver is available
   and motion is not reduced (it sets .has-reveal on <html>), so a failed
   script or a reduced-motion preference can never hide content.
   ========================================================================= */

.has-reveal .reveal,
.has-reveal .reveal-group > * {
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.has-reveal .reveal:not(.is-in),
.has-reveal .reveal-group > *:not(.is-in) {
  opacity: 0;
  transform: translateY(20px);
}

/* Hero: a very slow drift across the photograph, plus a short entrance for
   the copy. The CTA is in place within half a second. */
@keyframes epa-drift {
  from {
    transform: scale(1.06) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.13) translate3d(-1.4%, -1%, 0);
  }
}

@keyframes epa-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes epa-nudge {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(7px);
    opacity: 1;
  }
}

.hero__media img,
.banner__media img {
  animation: epa-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

/* Interior banners are a shorter band, so the same drift reads as too much
   travel. Slower, and half the distance. */
.banner__media img {
  animation-name: epa-drift-soft;
  animation-duration: 34s;
}

@keyframes epa-drift-soft {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1.1) translate3d(-0.8%, -0.6%, 0);
  }
}

/* Background video, when one is supplied. Sits in the same layer as the
   poster image and simply covers it once it can play. */
.banner__media video,
.hero__media video {
  /* opacity alone is NOT enough: a promoted video layer still paints its own
     opaque black box over the poster in some compositors, so the hero shows
     black until playback starts — and stays black forever if autoplay is
     refused (Low Power Mode, data saver, our own slow-connection gate).
     visibility:hidden takes it out of the paint entirely while still allowing
     it to load and play. */
  opacity: 0;
  visibility: hidden;
  background: transparent;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%; /* must match .hero__media img — see section 8 */
}

.hero__logo,
.hero__title,
.hero__value,
.hero__actions {
  animation: epa-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero__logo {
  animation-delay: 0.02s;
}

.hero__title {
  animation-delay: 0.1s;
}

.hero__value {
  animation-delay: 0.18s;
}

.hero__actions {
  animation-delay: 0.26s;
}

/* Scroll cue — a quiet arrow pointing at the first section. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  z-index: 1;
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
}

@media (min-width: 900px) and (min-height: 640px) {
  .hero__cue {
    display: flex;
  }
}

.hero__cue::after {
  content: "";
  width: 15px;
  height: 15px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: epa-nudge 2.2s ease-in-out infinite;
}

/* Buttons lift slightly and brighten. Nothing moves more than 2px, so the
   target never slides out from under a tapping finger. */
.btn--gold,
.btn--outline {
  position: relative;
  will-change: transform;
}

@media (hover: hover) {
  .btn--gold:hover,
  .btn--outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.16);
  }

  .btn--gold:active,
  .btn--outline:active {
    transform: translateY(0);
    box-shadow: none;
  }

  .arrow-link span[aria-hidden],
  .card__cta span[aria-hidden],
  .carrier-bar__more span[aria-hidden] {
    display: inline-block;
    transition: transform 0.18s ease;
  }

  .arrow-link:hover span[aria-hidden],
  .card--link:hover .card__cta span[aria-hidden],
  .carrier-bar__link:hover .carrier-bar__more span[aria-hidden] {
    transform: translateX(5px);
  }
}

.card--link {
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .card--link:hover {
    transform: translateY(-4px);
  }

  /* The benefit tiles were the one card-like block with no pointer response. */
  .benefit {
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  }

  .benefit:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--n-ccc);
  }

  .quote {
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .quote:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--n-ccc);
  }
}

/* == 19. Stat band ======================================================== */

.stats {
  background: var(--n-222);
  color: var(--n-eee);
  padding: 44px 0;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
  text-align: center;
}

@media (min-width: 860px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat__value {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1;
  color: var(--gold);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--n-ccc);
  margin: 0;
}

/* == 20. Benefits row ===================================================== */

.benefit {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
}

.benefit__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold-wash);
  border: 1px solid #e4dcab;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.benefit__icon svg {
  width: 24px;
  height: 24px;
  fill: var(--gold-ink);
}

.benefit__title {
  font-size: 1.25rem;
  margin-bottom: 0.4em;
}

.benefit p {
  font-size: 1rem;
  margin: 0;
}

/* == 21. Touch targets ====================================================
   On a finger-driven device every standalone link that acts as a call to
   action gets a 44px tap area, and phone numbers get a little more room
   still — they are the highest-intent tap on the page.
   ========================================================================= */

@media (pointer: coarse) {
  .arrow-link,
  .hero__tel,
  .banner__tel,
  .cta-block__tel,
  .prodnav__carriers,
  .card__cta a,
  .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer__list a,
  .footer__contact a,
  .contact-list a {
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 44px;
  }

  .hero__tel,
  .banner__tel,
  .cta-block__tel {
    padding: 4px 2px;
  }

  /* Hover-only affordances would stick "on" after a tap. */
  .carrier-bar__item img {
    filter: none;
    opacity: 1;
  }
}

/* == 22. Team =============================================================
   Profile header, the team grid on /about/#OURTEAM, and the monogram that
   stands in until a headshot is dropped in.
   ========================================================================= */

.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--n-333), var(--n-111));
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 4rem);
  letter-spacing: 0.06em;
}

.profile {
  background: var(--n-f7);
  border-bottom: 1px solid var(--rule);
  padding: 40px 0 44px;
}

@media (min-width: 900px) {
  .profile {
    padding: 60px 0 64px;
  }
}

.profile__inner {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 760px) {
  .profile__inner {
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
    gap: 48px;
  }
}

.profile__media {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--n-eee);
  box-shadow: var(--shadow-md);
  max-width: 340px;
}

.profile__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.profile__name {
  margin-bottom: 0.15em;
}

.profile__title {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 700;
  color: var(--gold-ink);
  margin-bottom: 1em;
}

.profile__bio {
  max-width: 62ch;
  margin-bottom: 1.6em;
}

.profile__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-bottom: 18px;
}

.profile__tel {
  font-size: 1.0625rem;
  font-weight: 700;
}

.profile__note {
  font-size: 1rem;
  color: var(--n-5c);
  max-width: 52ch;
  margin: 0;
}

/* -- team grid on the About page -- */

.teamgrid {
  display: grid;
  gap: 24px;
  margin-top: 44px;
}

@media (min-width: 560px) {
  .teamgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .teamgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.teamcard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  /* Only when it is genuinely a link — a static card that lifts on hover
     invites a click that goes nowhere. */
  a.teamcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--n-ccc);
  }
}

.teamcard--static {
  cursor: default;
}

.teamcard__photo {
  display: block;
  background: var(--n-eee);
}

.teamcard__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.teamcard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 20px;
}

.teamcard__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--n-222);
  line-height: 1.25;
}

.teamcard__title {
  font-size: 0.9375rem;
  color: var(--n-5c);
}

.teamcard__cta {
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* -- compact cross-links at the foot of a profile -- */

.teamlinks {
  display: grid;
  gap: 12px;
}

@media (min-width: 560px) {
  .teamlinks {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.teamlink {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 12px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.teamlink:hover {
  border-color: var(--gold);
}

.teamlink__photo {
  flex: 0 0 auto;
  width: 64px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--n-eee);
}

.teamlink__photo img,
.teamlink__photo .monogram {
  width: 64px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  font-size: 1.25rem;
}

.teamlink__text {
  display: flex;
  flex-direction: column;
}

.teamlink__name {
  font-weight: 700;
  color: var(--n-222);
}

.teamlink__title {
  font-size: 0.9375rem;
  color: var(--n-5c);
}

/* == 23. Odds and ends ==================================================== */

.company-logo {
  margin: 0 0 6px;
  min-height: 56px;
  display: flex;
  align-items: center;
}

.company-logo img {
  max-height: 56px;
  width: auto;
}

.pullquote {
  border-left: 4px solid var(--gold);
  background: var(--gold-wash);
  padding: 18px 22px;
  margin: 0 0 1.15em;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.pullquote p {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--n-333);
}

.cta-block__promises,
.contact-promises {
  margin-bottom: 1.5em;
}

.cta-block__promises li,
.contact-promises li {
  font-size: 1.0625rem;
  color: var(--n-333);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero__media img,
  .banner__media img {
    animation: none;
    transform: none;
  }

  /* A looping background video is motion the visitor cannot stop; hide it and
     leave the poster frame. */
  .hero__media video,
  .banner__media video {
    display: none;
  }
}

@media print {
  .site-header,
  .callbar,
  .cta-block,
  .carrier-bar,
  .collage {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }
}

/* Rebrand note under a carrier name ("formerly Medico"). */
.carrier__formerly {
  display: block;
  margin-top: 3px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--n-808);
}


/* == 24. Primary-CTA motion ===============================================
   Three restrained pieces, no loops:

   1. Hover/press — a 2px lift with a shadow bloom, and a real press state so
      the button feels physical rather than decorative.
   2. First view — the primary CTA emits ONE soft gold ring, once, when it
      first scrolls into view. A repeating pulse on a financial-services page
      reads as an ad; a single one reads as focus.
   3. Handoff — when the hero CTA scrolls out of sight the header CTA settles
      in once, so the eye is handed to where the action now lives.

   All of it sits inside the existing reduced-motion guard.
   ========================================================================= */

@keyframes epa-cta-ring {
  from {
    box-shadow: 0 0 0 0 rgba(199, 189, 88, 0.5);
  }
  to {
    box-shadow: 0 0 0 20px rgba(199, 189, 88, 0);
  }
}

.btn--gold.is-noticed {
  animation: epa-cta-ring 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

@keyframes epa-cta-settle {
  from {
    opacity: 0.7;
    transform: translateY(-5px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.site-header .btn--gold.is-handoff {
  animation: epa-cta-settle 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

.btn--gold {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 0.15s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .btn--gold:hover {
    box-shadow: 0 8px 22px rgba(140, 130, 40, 0.32);
  }
}

.btn--gold:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.18);
  transition-duration: 0.06s;
}

/* OPTIONAL, off by default. Add `btn--sheen` to a gold button for a slow
   brushed-metal highlight every 7s. Suits the brass brand, but it is the one
   piece here that can tip into looking like an advert — enable deliberately. */
.btn--sheen {
  position: relative;
  overflow: hidden;
}

.btn--sheen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  animation: epa-sheen 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes epa-sheen {
  0%,
  82% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--gold.is-noticed,
  .site-header .btn--gold.is-handoff,
  .btn--sheen::after {
    animation: none;
  }
}

/* Only once frames are actually running does it become visible. */
.bg-video.is-playing {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s;
}

/* == 25. Lead form: step-1 card layout ====================================
   Three real choices in a row, with "Other" on its own line beneath them —
   it is the escape hatch, not a peer of the other three.

   Driven by a container query, not a media query: the same form renders in a
   736px modal AND in a half-width column on /contact, so viewport width is
   the wrong thing to measure. Browsers without container query support keep
   the package's 2x2, which is a fine fallback.
   ========================================================================= */

.epa-form {
  container-type: inline-size;
  container-name: epaform;
}

@container epaform (min-width: 560px) {
  .epa-form .epa-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* "Other" is always the last card. */
  .epa-form .epa-card-grid > :last-child {
    grid-column: 1 / -1;
    min-height: 0;
  }

  /* Stack the icon above the label in the three narrow cards so the titles
     get the full column width instead of sharing it with the icon. */
  .epa-form .epa-card-grid > :not(:last-child) .epa-card-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* The wizard modal needs a little more room for a three-across row. */
.epa-modal-dialog {
  max-width: 52rem;
}

/* == 26. Lead form: resume notice & option buttons ========================
   Audience is 65+, so the radio rows are treated as large, obviously
   pressable buttons with an unambiguous selected state — colour alone is
   never the only signal (border weight, weight of the label, and an explicit
   tick all change together).
   ========================================================================= */

/* -- "Welcome back" notice -- */
.epa-form .epa-resume {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 26px;
  border: 1px solid #e2d9a8;
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--gold-wash);
  color: var(--n-333);
  font-size: 1rem;
  line-height: 1.5;
}

.epa-form .epa-resume::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background-color: var(--gold-ink);
  -webkit-mask: var(--icon-clock) center / contain no-repeat;
  mask: var(--icon-clock) center / contain no-repeat;
}

/* -- option rows as buttons -- */
.epa-form .epa-form-option {
  gap: 14px;
  min-height: 68px;
  padding: 14px 18px;
  border-width: 2px;
  border-color: var(--n-ccc);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .epa-form .epa-form-option:hover {
    border-color: var(--gold);
    background: var(--white);
    box-shadow: 0 3px 10px rgba(17, 17, 17, 0.08);
  }
}

.epa-form .epa-form-option input[type="radio"] {
  order: 0;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  accent-color: var(--gold-ink);
}

.epa-form .epa-option-body {
  order: 2;
}

.epa-form .epa-option-label {
  font-size: 1.125rem;
  font-weight: 600;
}

/* Selected: heavier border, wash, bolder label, and an explicit tick. */
.epa-form .epa-form-option.is-selected,
.epa-form .epa-form-option:has(input:checked) {
  border-color: var(--gold-ink);
  background: var(--gold-wash);
  box-shadow: 0 0 0 1px var(--gold-ink) inset;
}

.epa-form .epa-form-option.is-selected .epa-option-label,
.epa-form .epa-form-option:has(input:checked) .epa-option-label {
  font-weight: 700;
  color: var(--n-111);
}

.epa-form .epa-form-option::after {
  content: "";
  order: 3;
  margin-left: auto;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%236b6224'/%3E%3Cpath d='M10.2 16.6 5.9 12.3l1.5-1.5 2.8 2.8 6.4-6.4 1.5 1.5-7.9 7.9Z' fill='%23fff'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.epa-form .epa-form-option.is-selected::after,
.epa-form .epa-form-option:has(input:checked)::after {
  opacity: 1;
  transform: none;
}

/* -- icons on the two questions every branch asks -------------------------
   The package's option renderer has no icon slot, so these are masks keyed
   off the input value. Anything without a mapping simply has no icon. */
:root {
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.58 3.6a1 1 0 0 1-.25 1l-2.23 2.2Z'/%3E%3C/svg%3E");
  --icon-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z'/%3E%3C/svg%3E");
  --icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4Z'/%3E%3C/svg%3E");
  --icon-morning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7a6 6 0 0 1 6 6H6a6 6 0 0 1 6-6Zm-1-5h2v3h-2V2ZM3.5 6.9 4.9 5.5 7 7.6 5.6 9 3.5 6.9Zm15.6-1.4 1.4 1.4L18.4 9 17 7.6l2.1-2.1ZM2 15h20v2H2v-2Zm2 4h16v2H4v-2Z'/%3E%3C/svg%3E");
  --icon-afternoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-1-6h2v3h-2V2Zm0 17h2v3h-2v-3ZM2 11h3v2H2v-2Zm17 0h3v2h-3v-2ZM4.2 5.6l1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1Zm12.1.7 2.1-2.1 1.4 1.4-2.1 2.1-1.4-1.4ZM4.2 18.4l2.1-2.1 1.4 1.4-2.1 2.1-1.4-1.4Zm13.5-.7 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1Z'/%3E%3C/svg%3E");
  --icon-evening: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.3 3a9 9 0 1 0 8.7 11.3A7 7 0 0 1 12.3 3Z'/%3E%3C/svg%3E");
  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 10.4V6h-2v7.4l4.7 2.8 1-1.7-3.7-2.1Z'/%3E%3C/svg%3E");
}

.epa-form .epa-form-option:has(input[value="phone"])::before,
.epa-form .epa-form-option:has(input[value="email"])::before,
.epa-form .epa-form-option:has(input[value="video"])::before,
.epa-form .epa-form-option:has(input[value="morning"])::before,
.epa-form .epa-form-option:has(input[value="afternoon"])::before,
.epa-form .epa-form-option:has(input[value="evening"])::before,
.epa-form .epa-form-option:has(input[value="anytime"])::before {
  content: "";
  order: 1;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  background-color: var(--n-5c);
  transition: background-color 0.15s ease;
}

.epa-form .epa-form-option.is-selected::before,
.epa-form .epa-form-option:has(input:checked)::before {
  background-color: var(--gold-ink);
}

.epa-form .epa-form-option:has(input[value="phone"])::before { -webkit-mask: var(--icon-phone) center / contain no-repeat; mask: var(--icon-phone) center / contain no-repeat; }
.epa-form .epa-form-option:has(input[value="email"])::before { -webkit-mask: var(--icon-email) center / contain no-repeat; mask: var(--icon-email) center / contain no-repeat; }
.epa-form .epa-form-option:has(input[value="video"])::before { -webkit-mask: var(--icon-video) center / contain no-repeat; mask: var(--icon-video) center / contain no-repeat; }
.epa-form .epa-form-option:has(input[value="morning"])::before { -webkit-mask: var(--icon-morning) center / contain no-repeat; mask: var(--icon-morning) center / contain no-repeat; }
.epa-form .epa-form-option:has(input[value="afternoon"])::before { -webkit-mask: var(--icon-afternoon) center / contain no-repeat; mask: var(--icon-afternoon) center / contain no-repeat; }
.epa-form .epa-form-option:has(input[value="evening"])::before { -webkit-mask: var(--icon-evening) center / contain no-repeat; mask: var(--icon-evening) center / contain no-repeat; }
.epa-form .epa-form-option:has(input[value="anytime"])::before { -webkit-mask: var(--icon-clock) center / contain no-repeat; mask: var(--icon-clock) center / contain no-repeat; }

/* == Recruiting cross-link band ========================================== */

.careers-band { text-align: center; }
.careers-band .lede { margin: 12px auto 24px; max-width: 620px; }

/* == 27. Become an Agent form =============================================
   Its own component, matched to the lead form's visual language so the two
   read as one system: 1px #8E8E8E field borders (3.3:1 on white), 6px radius,
   gold focus ring, and the same oversized pressable option rows.
   ========================================================================= */

.cf-heading {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.15;
  margin: 0 0 0.35em;
}

.cf-sub {
  font-size: 1rem;
  color: var(--n-5c);
  margin: 0 0 24px;
}

.cf-field {
  margin-bottom: 20px;
}

.cf-row {
  display: grid;
  gap: 0 18px;
}

@media (min-width: 520px) {
  .cf-row {
    grid-template-columns: 1fr 1fr;
  }
}

.cf-label {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--n-222);
  margin-bottom: 6px;
  padding: 0;
}

.cf-optional {
  font-weight: 400;
  color: var(--n-808);
}

.cf-help {
  font-size: 0.9375rem;
  color: var(--n-5c);
  margin: 0 0 6px;
}

.cf-input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--n-222);
  background: var(--white);
  border: 1px solid #8e8e8e;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.cf-input:hover {
  border-color: var(--n-5c);
}

.cf-input:focus {
  outline: none;
  border-color: var(--gold-ink);
  box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.04), 0 0 0 3px rgba(199, 189, 88, 0.28);
}

select.cf-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23222'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 26px 26px;
  padding-right: 48px;
}

.cf-textarea {
  min-height: 110px;
  resize: vertical;
}

.cf-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}

.cf-options {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

@media (min-width: 560px) {
  .cf-options {
    grid-template-columns: 1fr 1fr;
  }
}

.cf-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 16px;
  background: var(--white);
  border: 2px solid var(--n-ccc);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .cf-option:hover {
    border-color: var(--gold);
    box-shadow: 0 3px 10px rgba(17, 17, 17, 0.08);
  }
}

.cf-option input[type="radio"] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  accent-color: var(--gold-ink);
}

.cf-option-label {
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Selected state changes four things at once, never colour alone. */
.cf-option:has(input:checked) {
  border-color: var(--gold-ink);
  background: var(--gold-wash);
  box-shadow: 0 0 0 1px var(--gold-ink) inset;
}

.cf-option:has(input:checked) .cf-option-label {
  font-weight: 700;
  color: var(--n-111);
}

.cf-consent {
  margin: 4px 0 22px;
}

.cf-consent-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--n-f7);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--n-333);
  cursor: pointer;
}

.cf-consent-box input {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--gold-ink);
}

/* `display:flex` outranks the UA's `[hidden]{display:none}`, so hidden error
   slots were still painting their marker on every field. */
.cf-error[hidden],
.cf-status[hidden] {
  display: none !important;
}

.cf-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 7px 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #b3261e;
}

.cf-error::before {
  content: "!";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #b3261e;
  color: var(--white);
  font-size: 0.75rem;
  line-height: 18px;
  text-align: center;
}

.cf-field.has-error .cf-input,
.cf-input[aria-invalid="true"] {
  border-color: #b3261e;
  background: #fdf3f2;
}

.cf-fineprint {
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--n-5c);
  text-align: center;
}

.cf-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Status panel — success and failure share the box, not the colour. */
.cf-status {
  padding: 16px 18px;
  margin-bottom: 22px;
  border-radius: var(--radius);
  border-left: 4px solid var(--gold);
  background: var(--gold-wash);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--n-222);
}

.cf-status--error {
  border-left-color: #b3261e;
  background: #fdf3f2;
}

.cf-status strong {
  display: block;
  margin-bottom: 4px;
}

/* Honeypot: off-screen, unfocusable, never announced. Not display:none —
   some bots specifically skip hidden fields. */
.cf-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}