/* Agent business cards (/card/<slug>) and the agent directory (/agents/).
   Rendered by src/worker.js; loaded after styles.css, whose tokens and fonts it reuses. */
.card-page,
.agents-page {
  background: var(--ground);
}
.card-page .site-header .text-link,
.agents-page .site-header .text-link {
  font-size: 15px;
}

/* Lake Monroe band behind the card and the directory heading. */
.card-band,
.agents-hero {
  background-color: var(--green);
  background-image: linear-gradient(180deg, #0038284d 0%, #003828e6 100%),
    url("/assets/v1/lake-monroe-960.webp");
  background-image: linear-gradient(180deg, #0038284d 0%, #003828e6 100%),
    image-set(url("/assets/v1/lake-monroe-960.avif") type("image/avif"), url("/assets/v1/lake-monroe-960.webp") type("image/webp"));
  background-size: cover;
  background-position: 57% 55%;
}
.card-band {
  height: 240px;
}

/* The card */
.agent-card {
  position: relative;
  display: grid;
  grid-template-areas: "portrait" "identity" "details" "security";
  width: calc(100% - 32px);
  max-width: 520px;
  margin: -164px auto 0;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px #0038280f, 0 28px 64px -18px #00382847;
}
.agent-portrait {
  grid-area: portrait;
  padding: 12px 12px 0;
}
.portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 120px 3px 3px 3px;
  background: #e6ebe2;
}
.portrait-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 70% 25%, #17523d 0%, var(--green) 70%);
  color: var(--ground);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 92px;
  letter-spacing: -0.04em;
}
.agent-portrait .portrait-initials {
  aspect-ratio: 16 / 10;
}
.agent-identity {
  grid-area: identity;
  padding: 28px 24px 8px;
}
.agent-identity .eyebrow {
  color: var(--green);
  font-size: 12px;
  margin-bottom: 12px;
}
.agent-identity h1 {
  font-size: 38px;
  line-height: 1.16;
  letter-spacing: -0.045em;
}
.agent-title {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.5;
}
.agent-actions {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}
.card-save {
  width: 100%;
  min-width: 0;
  gap: 16px;
}
.agent-reach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.card-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--green);
  border-radius: 3px;
  color: var(--green);
  background: #fff;
  font-size: 17px;
  transition: background 0.15s;
}
.card-button:hover {
  background: #e6ebe2;
}
.icon {
  flex-shrink: 0;
}
.agent-details {
  grid-area: details;
  padding: 18px 24px 28px;
}
.agent-facts {
  margin: 0;
  border-top: 1px solid var(--border);
}
.agent-facts > div {
  padding-block: 14px;
  border-bottom: 1px solid var(--border);
}
.agent-facts dt {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.agent-facts dd {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.agent-facts dd a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: #0038285c;
  text-underline-offset: 4px;
}
.agent-facts dd a:hover {
  text-decoration-color: var(--green);
}
.agent-verify {
  margin-top: 22px;
}
.agent-verify .text-link {
  font-size: 15px;
  line-height: 1.5;
}
.agent-security {
  grid-area: security;
  display: flex;
  gap: 14px;
  padding: 20px 24px 22px;
  background: #e6ebe2;
  color: var(--green);
}
.agent-security .icon {
  width: 24px;
  height: 24px;
  margin-top: 1px;
}
.agent-security p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.agent-security strong {
  font-weight: 500;
  color: var(--green);
  white-space: nowrap;
}
.card-footer {
  margin-top: 48px;
  border-top: 1px solid var(--border);
}

/* Directory */
.agents-hero {
  padding-block: 56px 112px;
  background-image: linear-gradient(180deg, #00382899 0%, #003828eb 100%),
    url("/assets/v1/lake-monroe-960.webp");
  background-image: linear-gradient(180deg, #00382899 0%, #003828eb 100%),
    image-set(url("/assets/v1/lake-monroe-960.avif") type("image/avif"), url("/assets/v1/lake-monroe-960.webp") type("image/webp"));
}
.agents-hero .eyebrow {
  color: #c9d8cd;
  font-size: 12px;
  margin-bottom: 16px;
}
.agents-hero h1 {
  color: var(--ground);
  font-size: 44px;
}
.agents-hero p:not(.eyebrow) {
  max-width: 560px;
  margin-top: 16px;
  font-size: 17px;
  color: #dfe8e1;
}
.agents-list {
  position: relative;
  margin-top: -72px;
}
.agents-grid {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-tile {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: start;
  gap: 18px;
  height: 100%;
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px #0038280f, 0 18px 40px -20px #00382840;
  transition: box-shadow 0.15s, transform 0.15s;
}
.agent-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px #0038280f, 0 24px 48px -18px #00382859;
}
.agent-tile:hover h2 {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.tile-portrait .portrait {
  aspect-ratio: 4 / 5;
  border-radius: 52px 3px 3px 3px;
}
.tile-portrait .portrait-initials {
  font-size: 34px;
}
.tile-body {
  padding-top: 4px;
}
.tile-body h2 {
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.tile-title {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
}
.state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.state-chips li {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--green);
}
.tile-link {
  display: inline-block;
  margin-top: 14px;
  border-bottom: 1px solid var(--green);
  font-size: 15px;
  color: var(--green);
}
.agents-empty {
  max-width: 680px;
  padding: 36px 28px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px #0038280f, 0 18px 40px -20px #00382840;
}
.agents-empty h2 {
  font-size: 30px;
}
.agents-empty p {
  margin-top: 12px;
  font-size: 17px;
}
.agents-empty-actions,
.card-unavailable-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 28px;
}
.agents-empty-actions .text-link {
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .agents-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .agent-tile {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 14px 14px 24px;
  }
  .tile-portrait .portrait {
    border-radius: 120px 3px 3px 3px;
  }
  .tile-portrait .portrait-initials {
    font-size: 72px;
  }
  .tile-body {
    padding: 0 10px;
  }
  .tile-body h2 {
    font-size: 27px;
  }
}

@media (min-width: 860px) {
  .card-band {
    height: 340px;
  }
  .card-band,
  .agents-hero {
    background-image: linear-gradient(180deg, #0038284d 0%, #003828e6 100%),
      url("/assets/v1/lake-monroe-1800.webp");
    background-image: linear-gradient(180deg, #0038284d 0%, #003828e6 100%),
      image-set(url("/assets/v1/lake-monroe-1800.avif") type("image/avif"), url("/assets/v1/lake-monroe-1800.webp") type("image/webp"));
  }
  .agent-card {
    grid-template-columns: minmax(300px, 400px) 1fr;
    grid-template-areas: "portrait identity" "portrait details" "security security";
    width: calc(100% - 80px);
    max-width: 1000px;
    margin-top: -240px;
  }
  .agent-portrait {
    padding: 16px 0 16px 16px;
  }
  .agent-portrait .portrait {
    height: 100%;
    min-height: 480px;
    aspect-ratio: auto;
    border-radius: 170px 3px 3px 3px;
  }
  .agent-portrait .portrait-initials {
    font-size: 128px;
  }
  .agent-identity {
    padding: 52px 52px 8px;
  }
  .agent-identity h1 {
    font-size: 52px;
  }
  .agent-title {
    font-size: 19px;
  }
  .agent-actions {
    grid-template-columns: 1.2fr 2fr;
    margin-top: 32px;
  }
  .agent-details {
    padding: 22px 52px 44px;
  }
  .agent-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }
  .agent-security {
    align-items: center;
    padding: 20px 52px;
  }
  .card-footer {
    margin-top: 72px;
  }
  .agents-hero {
    padding-block: 80px 140px;
    background-image: linear-gradient(180deg, #00382899 0%, #003828eb 100%),
      url("/assets/v1/lake-monroe-1800.webp");
    background-image: linear-gradient(180deg, #00382899 0%, #003828eb 100%),
      image-set(url("/assets/v1/lake-monroe-1800.avif") type("image/avif"), url("/assets/v1/lake-monroe-1800.webp") type("image/webp"));
  }
  .agents-hero h1 {
    font-size: 56px;
  }
  .agents-list {
    margin-top: -88px;
  }
}

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

@media (max-width: 360px) {
  .agent-card {
    width: calc(100% - 24px);
  }
  .agent-identity,
  .agent-details {
    padding-inline: 18px;
  }
  .agent-identity h1 {
    font-size: 33px;
  }
  .agent-security {
    padding-inline: 18px;
  }
  .agent-tile {
    grid-template-columns: 88px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-tile:hover {
    transform: none;
  }
}

/* Easier reading for older eyes: larger type, taller buttons, and a save action that says why. */
.card-page { font-size: 18px; }
.agent-identity h1 { font-size: 42px; line-height: 1.12; }
.agent-title { font-size: 19px; }
.agent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agent-actions .card-save { grid-column: 1 / -1; justify-content: space-between; min-height: 60px; font-size: 18px; }
.agent-actions .save-hint { grid-column: 1 / -1; margin: -2px 0 2px; font-size: 15px; color: var(--muted); text-align: center; }
.agent-actions .agent-reach { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-button { min-height: 54px; font-size: 18px; }
.agent-facts dt { font-size: 13px; }
.agent-facts dd { font-size: 19px; line-height: 1.5; }
.agent-security p { font-size: 17px; }

/* Office line under the title, and a box that lets the client check the license themselves. */
.agent-office { margin: 8px 0 0; font-size: 16px; color: var(--muted); }
.verify-box { margin: 22px 0 6px; padding: 20px; border: 1px solid #cfd9cc; border-radius: 6px; background: linear-gradient(180deg, #f4f8f1 0%, #eef4ea 100%); }
.verify-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.verify-kicker .icon { width: 18px; height: 18px; }
.verify-box h2 { margin: 0 0 6px; font-family: "Libre Baskerville", Georgia, serif; font-size: 22px; font-weight: 400; color: var(--green); }
.verify-copy { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.verify-npn { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; font-size: 30px; letter-spacing: 0.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.verify-npn span { font-size: 13px; letter-spacing: 0.14em; color: var(--muted); }
.verify-links { display: grid; gap: 10px; }
@media (min-width: 900px) { .verify-links { grid-template-columns: 1fr 1fr; } }

/* Agency brands on insurance-id.com (src/brands.js). Waterford is the default look above; these
   restyle every Waterford-green surface so another agency's card carries none of it. */
@font-face {
  font-family: "Caudex";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/brands/civitas-alliance/caudex-400.woff2") format("woff2");
}
@font-face {
  font-family: "Caudex";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/brands/civitas-alliance/caudex-700.woff2") format("woff2");
}
.brand-civitas {
  --green: #0a3665;
  --ground: #f5f7fb;
  --ink: #14233d;
  --muted: #546889;
  --border: #d6dde9;
  --tint: #e7ecf5;
  --shadow: #0a3665;
  --band: linear-gradient(160deg, #0a3665 0%, #0f4480 55%, #3560ad 100%);
}
.brand-neutral {
  --green: #1f2a37;
  --ground: #f6f7f9;
  --ink: #1c2530;
  --muted: #5b6573;
  --border: #dde1e6;
  --tint: #eceef1;
  --shadow: #1f2a37;
  --band: linear-gradient(160deg, #1f2a37 0%, #334155 100%);
}
:is(.brand-civitas, .brand-neutral) {
  background: var(--ground);
}
:is(.brand-civitas, .brand-neutral) .card-band {
  background: var(--band);
}
:is(.brand-civitas, .brand-neutral) .agent-card {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 6%, transparent), 0 28px 64px -18px color-mix(in srgb, var(--shadow) 28%, transparent);
}
:is(.brand-civitas, .brand-neutral) :is(.portrait, .card-button:hover, .agent-security) {
  background: var(--tint);
}
:is(.brand-civitas, .brand-neutral) .portrait-initials {
  background: var(--band);
}
:is(.brand-civitas, .brand-neutral) .verify-box {
  border-color: var(--border);
  background: linear-gradient(180deg, #fff 0%, var(--tint) 100%);
}
.brand-civitas :is(h1, h2, .portrait-initials) {
  font-family: "Caudex", Georgia, serif;
}
.brand-logo {
  display: block;
  flex-shrink: 0;
}
.brand-logo img {
  display: block;
  width: 200px;
  height: auto;
}
.brand-wordmark {
  font-family: Georgia, serif;
  font-size: 20px;
  color: var(--green);
}
.brand-neutral .site-header .brand-wordmark:only-child {
  padding-block: 8px;
}
:is(.brand-civitas, .brand-neutral) .agent-facts dd a {
  text-decoration-color: color-mix(in srgb, var(--green) 36%, transparent);
}

/* insurance-id.com's own pages (landing, 404): Waterford's palette, no photo, no agency. */
.brand-insurance-id .brand-wordmark {
  display: block;
  padding-block: 8px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--green);
}
.brand-insurance-id .card-footer .brand-wordmark {
  font-size: 18px;
}
.id-hero {
  background: radial-gradient(circle at 80% 0%, #17523d 0%, var(--green) 65%);
  padding-block: 64px 120px;
}
.id-body {
  position: relative;
  max-width: 760px;
  margin-top: -72px;
  padding: 32px 28px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px #0038280f, 0 28px 64px -18px #00382847;
}
.id-steps {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.id-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}
.id-step-number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e6ebe2;
  color: var(--green);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 18px;
}
.id-steps h2 {
  margin: 6px 0 6px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--green);
}
.id-steps p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.id-actions {
  display: flex;
  margin: 28px 0 24px;
}
.id-security {
  margin: 0 -28px -32px;
  border-radius: 0 0 4px 4px;
}