/* ==========================================================================
   Mr Terry Health Insurance — main.css
   Palette + type per Master Build Prompt v1. Self-hosted fonts, no Google.
   ========================================================================== */

/* --- Fonts: self-hosted (npm @fontsource), font-display: swap ------------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Tokens ---------------------------------------------------------------
   BRAND: --blue #469CD5 and --green #52AC58 are the two primary colours.
   AA RULE: neither brand colour carries white text (both fail 4.5:1).
   Dark labels sit ON them instead — navy-on-green = 5.10:1, navy-on-blue = 4.81:1.
   Deeper variants exist for rules (3:1 floor) and for body text (4.5:1 floor).
   Do not swap a *-deep for a brand colour on text without re-running contrast.py.
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --blue:       #469CD5;  /* primary. Fills/bands. Text ONLY on navy (4.81:1). */
  --green:      #52AC58;  /* primary. CTA fills. Text ONLY on navy (5.10:1).   */

  /* Working variants — these are what carry text and rules on light ground */
  --blue-mid:   #2F86C2;  /* rules, ticks, borders on light. 3.74:1 (non-text)  */
  --blue-deep:  #23699B;  /* blue as TEXT on light. 5.57:1                      */
  --green-mid:  #3F9147;  /* green rules/borders on light. 3.71:1               */
  --green-deep: #2F7838;  /* green as TEXT / pressed CTA w/ white. 5.14:1       */

  /* Ground */
  --navy:       #102B44;  /* dark sections, footer, body text. 13.69:1 on paper */
  --paper:      #F6F9FB;
  --mist:       #E3EFF7;  /* light band */
  --error:      #B3261E;

  /* Semantic aliases — the rest of the sheet speaks in these. */
  --ink:       var(--navy);
  --sage:      var(--mist);
  --brass:     var(--blue-mid);   /* non-text: rules, ticks, borders */
  --brass-ink: var(--blue-deep);  /* blue used as text */
  --signal:    var(--green-deep); /* links, success, pressed states */

  --ink-70: rgba(16, 43, 68, .74);
  --ink-55: rgba(16, 43, 68, .67);
  --rule:   rgba(16, 43, 68, .18);

  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale: mobile -> desktop. Nothing below 14px, anywhere. */
  --t-h1:   34px;
  --t-h2:   26px;
  --t-h3:   21px;
  --t-body: 18px;
  --t-util: 15px;
  --t-fine: 14px;

  --wrap: 1180px;
  --gut:  20px;
  --bar:  60px; /* mobile sticky call bar */
}
@media (min-width: 860px) {
  :root {
    --t-h1: 44px; --t-h2: 32px; --t-h3: 24px; --t-body: 19px;
    --gut: 40px; --bar: 0px;
  }
}

/* --- Colour scheme lock --------------------------------------------------
   Without this, iOS/Android in-app browsers and Chrome's "force dark" will
   auto-invert the page background while leaving explicitly-styled elements and
   brand colours alone — producing navy text on a black ground. Declaring the
   page light-only disables that guessing entirely. Do not remove. */
:root { color-scheme: light; }
html, body { background-color: var(--paper); }

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
h1 { font-size: var(--t-h1); line-height: 1.10; letter-spacing: -.015em; }
h2 { font-size: var(--t-h2); line-height: 1.18; letter-spacing: -.01em; }
h3 { font-size: var(--t-h3); line-height: 1.25; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.eyebrow {
  font-size: var(--t-util); font-weight: 600; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-55); margin: 0 0 12px;
}
.lede { font-size: calc(var(--t-body) + 1px); color: var(--ink-70); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }

/* Focus: brass ring, always visible, never removed. */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Header / nav -------------------------------------------------------- */
.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: relative; z-index: 20;
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 56px;
}
@media (min-width: 860px) { .site-head__in { min-height: 84px; } }

/* Wordmark: two-line lockup, thin rule between, small-caps strap beneath. */
.mark { text-decoration: none; color: var(--ink); display: block; padding: 8px 0; }
.mark__l1, .mark__l2 {
  font-family: var(--display); font-weight: 700;
  font-size: 17px; line-height: 1.06;
  letter-spacing: .04em; text-transform: uppercase; display: block;
}
.mark__l2 { border-top: 1px solid var(--rule); padding-top: 2px; margin-top: 2px; }
.mark__strap {
  display: block;
  font-family: var(--sans); font-size: var(--t-fine); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-55); margin-top: 5px;
}

@media (min-width: 860px) { .mark__l1, .mark__l2 { font-size: 21px; } }

.nav { display: none; align-items: center; gap: 28px; }
@media (min-width: 980px) { .nav { display: flex; } }
.nav a {
  color: var(--ink); text-decoration: none;
  font-size: var(--t-util); font-weight: 500;
  letter-spacing: .01em; padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] {
  border-bottom-color: var(--brass); color: var(--signal);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px;
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  letter-spacing: .01em; text-decoration: none;
  border: 0; border-radius: 6px; cursor: pointer;
  background: var(--green); color: var(--navy);
  transition: background-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--green-deep); color: #fff; }
.btn--full { width: 100%; font-size: 18px; min-height: 54px; }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); 
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.head-cta { display: none; }
@media (min-width: 980px) { .head-cta { display: inline-flex; } }

/* --- THE SIGNATURE: Fifty Years ledger rule ------------------------------
   A brass hairline carrying five decade ticks. It is a timeline, so the
   sequence is real information. Reappears as the section divider sitewide. */
.ledger { position: relative; margin: 0; }
.ledger__line {
  height: 1px; background: var(--brass); transform-origin: left center;
  animation: ledger-draw 1100ms cubic-bezier(.2,.7,.25,1) both;
}
.ledger__ticks {
  display: flex; justify-content: space-between;
  list-style: none; margin: 0; padding: 0;
}
.ledger__ticks li {
  position: relative; padding-top: 9px;
  font-family: var(--sans); font-size: var(--t-fine); font-weight: 500;
  letter-spacing: .1em; color: var(--ink-55);
  animation: tick-in 520ms ease both;
}
.ledger__ticks li::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 1px; height: 6px; background: var(--brass);
}
.ledger__ticks li:first-child::before { left: 0; }
.ledger__ticks li:last-child::before  { left: auto; right: 0; }
.ledger__ticks li:nth-child(1) { animation-delay: 260ms; }
.ledger__ticks li:nth-child(2) { animation-delay: 430ms; }
.ledger__ticks li:nth-child(3) { animation-delay: 600ms; }
.ledger__ticks li:nth-child(4) { animation-delay: 770ms; }
.ledger__ticks li:nth-child(5) { animation-delay: 940ms; }

@keyframes ledger-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tick-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Plain divider variant — the same rule, doing structural work. */
.ledger--divider .ledger__line { animation: none; }
.ledger--divider { margin-block: 8px; }

/* --- Sections ------------------------------------------------------------
   FORCE-DARK HARDENING: every section paints its OWN background rather than
   inheriting from <body>. Chrome/WebView "force dark" overrides the root canvas
   background even when color-scheme:light is declared, but it leaves elements
   with an explicit background-color alone. Relying on the body background is
   what produced navy-text-on-black in an in-app browser. Do not remove these. */
main, .hero, .phero, .trust { background-color: var(--paper); }
.sec { padding-block: 56px; background-color: var(--paper); }
@media (min-width: 860px) { .sec { padding-block: 88px; } }
.sec--sage { background: var(--sage); }
.sec--ink  { background: var(--ink); color: var(--paper); }
.sec__head { max-width: 30ch; margin-bottom: 28px; }
.sec--ink h2 { color: var(--paper); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-top: 6px; padding-bottom: 0; overflow-x: clip; }
@media (min-width: 860px) { .hero { padding-top: 40px; } }
.hero__grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 860px) {
  .hero__grid {
    grid-template-columns: 45fr 55fr;
    gap: 56px; align-items: center;
  }
}
.hero .eyebrow { display: none; }
@media (min-width: 860px) { .hero .eyebrow { display: block; } }
.hero__copy h1 { margin-bottom: 8px; line-height: 1.06; }
@media (min-width: 860px) { .hero__copy h1 { line-height: 1.10; margin-bottom: 10px; } }
.hero__sub { color: var(--ink-70); margin-bottom: 12px; font-size: var(--t-body); }
.hero__sub--long { display: none; }
@media (min-width: 860px) {
  .hero__sub--short { display: none; }
  .hero__sub--long  { display: block; }
}
.hero__figure { position: relative; margin: 0; }
.hero__figure img {
  width: 100%; height: auto; border-radius: 4px;
  background: var(--ink);
}
@media (min-width: 860px) {
  /* Portrait bleeds to the right edge of the viewport.
     min() picks the gutter on narrow desktops, the full offset on wide ones. */
  .hero__figure {
    margin-right: min(calc(-1 * var(--gut)),
                      calc((var(--wrap) - 100vw) / 2 - var(--gut)));
  }
  .hero__figure img {
    border-radius: 4px 0 0 4px;
    height: clamp(560px, 74vh, 700px);
    object-fit: cover;
    object-position: 46% 18%;
  }
}
.hero__ledger { margin-top: 34px; padding-bottom: 8px; }

/* --- Form ---------------------------------------------------------------- */
.lead-form { margin: 0; }
.field { margin-bottom: 5px; }
.field label {
  display: block;
  font-size: var(--t-fine); font-weight: 600;
  letter-spacing: .02em; color: var(--ink);
  margin-bottom: 2px;
}
.field input {
  width: 100%; height: 52px; padding: 0 14px;
  font-family: var(--sans); font-size: 18px; color: var(--ink);
  background: #fff; border: 2px solid var(--rule); border-radius: 6px;
  transition: border-color .15s ease;
}
.field input:hover { border-color: var(--ink-55); }
.field input:focus { border-color: var(--signal); }
.field input[aria-invalid="true"] { border-color: var(--error); background: #FDF5F4; }
.field__err {
  display: none; margin-top: 4px;
  font-size: var(--t-fine); font-weight: 500; color: var(--error);
}
.field.is-bad .field__err { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { margin-top: 4px; }
.consent {
  margin: 6px 0 0;
  font-size: var(--t-fine); line-height: 1.45; color: var(--ink-70);
}
.reassure {
  margin: 8px 0 0;
  font-size: var(--t-util); font-weight: 500; color: var(--signal);
}
.form__status { margin: 8px 0 0; font-size: var(--t-util); font-weight: 600; }
.form__status:empty { display: none; }
.form__status[data-state="ok"]  { color: var(--signal); }
.form__status[data-state="bad"] { color: var(--error); }

/* --- Trust bar ----------------------------------------------------------- */
.trust { padding-block: 26px; }
.trust ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px 34px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .trust ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .trust ul { grid-template-columns: repeat(4, auto); justify-content: space-between; } }
.trust li {
  font-size: var(--t-util); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}

/* --- Service accordions -------------------------------------------------- */
.cards { display: grid; gap: 14px; }
.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  overflow: hidden;
}
.sec--sage .card { background: var(--paper); }
.card__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 22px; min-height: 48px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: var(--t-util); color: var(--ink);
}
.card__btn:hover { background: rgba(70, 156, 213, .08); }
.card__t { font-family: var(--display); font-size: var(--t-h3); font-weight: 600; display: block; }
.card__s { display: block; margin-top: 4px; font-size: var(--t-util); color: var(--ink-70); line-height: 1.5; }
.card__sign {
  flex: 0 0 auto; width: 26px; height: 26px; position: relative;
}
.card__sign::before, .card__sign::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 15px; height: 2px; background: var(--brass);
  transform: translate(-50%, -50%);
  transition: transform .22s ease;
}
.card__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.card__btn[aria-expanded="true"] .card__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.card__panel {
  height: 0; overflow: hidden;
  transition: height .28s cubic-bezier(.3,.7,.3,1);
}
.card__panel-in { padding: 0 22px 24px; }
.card__panel-in p { max-width: 62ch; }
.card__panel-in .card__link {
  display: inline-block; margin-top: 6px;
  color: var(--signal); font-weight: 600; font-size: var(--t-util);
  text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 1px;
}

/* --- Story block --------------------------------------------------------- */
.story__grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 860px) { .story__grid { grid-template-columns: 42fr 58fr; gap: 60px; } }
.story__grid img { width: 100%; height: auto; border-radius: 4px; background: var(--ink); }
.link-brass {
  color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--brass); padding-bottom: 1px;
}
.link-brass:hover { color: var(--signal); }

/* --- Booking ------------------------------------------------------------- */
.booking {
  margin-top: 24px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper); min-height: 520px;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
.booking__fallback { max-width: 40ch; color: var(--ink-70); font-size: var(--t-util); }
.booking__fallback strong { display: block; font-size: var(--t-h3); font-family: var(--display); color: var(--ink); margin-bottom: 8px; }

/* --- Final CTA ----------------------------------------------------------- */
.final__grid { display: grid; gap: 30px; }
@media (min-width: 860px) { .final__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }
.sec--ink .field label { color: var(--paper); }
.sec--ink .consent { color: rgba(251, 249, 244, .72); }
.sec--ink .reassure { color: var(--green); }
.sec--ink .field input { border-color: rgba(251,249,244,.22); }
.sec--ink .lede { color: rgba(251, 249, 244, .78); }

/* --- Footer -------------------------------------------------------------- */
.foot { background: var(--ink); color: var(--paper); padding-block: 44px 110px; }
@media (min-width: 860px) { .foot { padding-bottom: 52px; } }
.foot a { color: var(--paper); }
.foot__grid { display: grid; gap: 30px; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.foot .mark, .foot .mark__l1, .foot .mark__l2 { color: var(--paper); }
.foot .mark__l2 { border-top-color: rgba(251,249,244,.28); }
.foot .mark__strap { display: block; color: rgba(251,249,244,.60); }

.phone-block { margin-top: 22px; }
.phone-block a.tel {
  font-family: var(--display); font-size: var(--t-h3); font-weight: 600;
  color: var(--paper); text-decoration: none;
  border-bottom: 1px solid var(--brass);
}
/* Required next to EVERY phone number, sitewide. Never below 14px. */
.tel-note, .hours {
  margin: 8px 0 0; font-size: var(--t-fine); line-height: 1.5;
  color: rgba(251, 249, 244, .82);
}
.disclosures {
  margin: 0; padding: 0; list-style: none;
  font-size: var(--t-fine); line-height: 1.55;
  color: rgba(251, 249, 244, .82);
}
.disclosures li { margin-bottom: 12px; }
.disclosures li:last-child { margin-bottom: 0; }
.disclosures .license {
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--paper);
}
.var-pending {
  background: rgba(70, 156, 213, .20);
  border-bottom: 1px dashed var(--brass-ink);
  padding: 1px 4px; border-radius: 2px;
  color: var(--ink); font-weight: 600;
}
/* On the ink footer, invert to the light chip. */
.foot .var-pending {
  color: var(--blue);
  border-bottom-color: var(--brass);
  background: rgba(70, 156, 213, .26);
}
.foot__legal {
  margin-top: 30px; padding-top: 20px;
  border-top: 1px solid rgba(251, 249, 244, .18);
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: var(--t-fine); color: rgba(251, 249, 244, .70);
}

/* --- Sticky mobile call bar (two 48px+ targets, every page) --------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink);
  border-top: 1px solid rgba(251, 249, 244, .18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 860px) { .callbar { display: none; } }
.callbar a {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; text-decoration: none;
  font-size: 16px; font-weight: 600; letter-spacing: .02em;
  color: var(--paper);
}
.callbar a + a { background: var(--green); color: var(--navy); }

/* --- Page hero (interior pages) ------------------------------------------ */
.phero { padding-block: 44px 0; }
.phero h1 { max-width: 18ch; }
.phero .lede { max-width: 58ch; margin-top: 16px; }
.phero__ledger { margin-top: 30px; }

/* --- Timeline (About) ---------------------------------------------------- */
.tl { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.tl li { position: relative; padding: 0 0 26px 26px; }
.tl li::before {
  content: ""; position: absolute; left: -4px; top: 9px;
  width: 7px; height: 7px; background: var(--brass); border-radius: 50%;
}
.tl__yr {
  display: block; font-size: var(--t-fine); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink);
  margin-bottom: 2px;
}
.pullquote {
  font-family: var(--display); font-size: var(--t-h2); font-weight: 600;
  line-height: 1.32; margin: 0; padding: 26px 0;
  border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass);
  max-width: 24ch;
}

/* Editorial placeholder — visible in review, must be gone before launch. */

.prose { max-width: 66ch; }
.prose h2 { margin-top: 34px; margin-bottom: 12px; }
.prose h3 { margin-top: 26px; margin-bottom: 8px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }

/* --- Reduced motion: the ledger animation is the first thing to go -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ledger__line { transform: scaleX(1); }
  .card__panel { transition: none; }
}

/* Desktop has no fold pressure — restore comfortable rhythm. */
@media (min-width: 860px) {
  .field { margin-bottom: 10px; }
  .field label { margin-bottom: 4px; }
  .consent { margin-top: 10px; }
}

/* --- Referral network list ------------------------------------------------
   These are lines Terry does NOT write. Styled as a directory, deliberately
   NOT as service cards — the visual language shouldn't imply a product he sells. */
.sec--mist { background: var(--mist); }
.reflist {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--rule);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) { .reflist { grid-template-columns: 1fr 1fr; } }
.reflist li {
  background: var(--mist);
  padding: 20px 4px 20px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.reflist__t {
  font-family: var(--display); font-size: var(--t-h3); font-weight: 600;
  color: var(--navy);
}
.reflist__t::before {
  content: ""; display: inline-block;
  width: 16px; height: 1px; margin-right: 10px; vertical-align: middle;
  background: var(--blue-mid);
}
.reflist__s { font-size: var(--t-util); color: var(--ink-70); line-height: 1.55; }

/* ==========================================================================
   LAYOUT v2 — agent-profile structure.
   The hero sells the CONVERSATION, not the form. The form lives behind a
   "Get in touch" trigger (modal) and in one section near the foot of the page.
   Primary CTA is the modal, NOT click-to-call: a phone call creates no CRM
   record, so a call-first hero would starve the lead machine it's feeding.
   ========================================================================== */

/* Reserved for the Phase-2 floating chat widget. The sticky bar leaves this
   corner clear so the bubble has somewhere to live without collision. */
:root { --chat-gutter: 76px; }

/* --- Utility bar --------------------------------------------------------- */
.topbar { background: var(--blue); }        /* navy text on blue = 4.81:1 */
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 44px; flex-wrap: wrap;
}
.topbar p {
  margin: 0; font-size: var(--t-fine); font-weight: 500;
  color: var(--navy); line-height: 1.4;
}
.topbar a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--navy); font-weight: 600; font-size: var(--t-util);
  text-decoration: none; padding: 6px 0;
}
.topbar a:hover { text-decoration: underline; }
.topbar svg { width: 17px; height: 17px; flex: 0 0 auto; }
.topbar__note { display: none; }
@media (min-width: 760px) { .topbar__note { display: block; } }

/* --- Hero v2 ------------------------------------------------------------- */
.herov2 { background: var(--mist); padding-block: 40px 0; }
.herov2__grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) {
  .herov2__grid { grid-template-columns: auto 1fr 380px; gap: 40px; }
}
.avatar {
  width: 132px; height: 132px; border-radius: 50%;
  object-fit: cover; background: #080808;
  border: 4px solid #fff; box-shadow: 0 2px 14px rgba(16,43,68,.14);
  margin: 0;
}
@media (min-width: 900px) { .avatar { width: 208px; height: 208px; } }

.herov2__id h1 { font-size: clamp(38px, 9vw, 62px); line-height: 1.02; letter-spacing: -.02em; }
.herov2__role {
  margin: 8px 0 0; font-size: clamp(17px, 4.4vw, 22px); font-weight: 600;
  color: var(--navy); line-height: 1.3;
}
.herov2__tag {
  margin: 12px 0 0; font-size: var(--t-body); color: var(--ink-70);
  max-width: 42ch;
}

/* The action card — the page's primary conversion surface. */
.actioncard {
  background: #fff; border-radius: 10px; padding: 26px 24px;
  box-shadow: 0 4px 22px rgba(16, 43, 68, .12);
}
.actioncard h2 { font-size: var(--t-h3); line-height: 1.25; }
.actioncard__sub { margin: 6px 0 18px; font-size: var(--t-util); color: var(--ink-70); }
.actioncard .btn { width: 100%; }
.actioncard__or {
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: var(--t-util); color: var(--ink-70);
}
.actioncard__or a {
  display: block; margin-top: 2px;
  font-family: var(--display); font-size: var(--t-h3); font-weight: 600;
  color: var(--blue-deep); text-decoration: none;
}
.actioncard__or a:hover { text-decoration: underline; }
.actioncard .tel-note, .actioncard .hours {
  color: var(--ink-70); margin-top: 6px;
}

/* --- Contact strip — straddles the hero band and the section below -------- */
.cstrip {
  background-color: var(--paper);                        /* fallback: never transparent */
  background-image: linear-gradient(to bottom, var(--mist) 50%, var(--paper) 50%);
}
.cstrip__in {
  display: grid; background: #fff; border-radius: 10px;
  box-shadow: 0 4px 18px rgba(16,43,68,.10); overflow: hidden;
}
@media (min-width: 720px) { .cstrip__in { grid-template-columns: 1fr 1fr; } }
.cstrip__cell {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px; min-height: 48px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .cstrip__cell { border-bottom: 0; }
  .cstrip__cell + .cstrip__cell { border-left: 1px solid var(--rule); }
}
.cstrip__cell:last-child { border-bottom: 0; }
.cstrip svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--green-deep); }
.cstrip__t { font-weight: 600; color: var(--navy); font-size: var(--t-body); }
button.cstrip__cell {
  width: 100%; background: #fff; border: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
button.cstrip__cell:hover { background: rgba(70,156,213,.07); }
button.cstrip__cell .cstrip__t { color: var(--blue-deep); }

/* --- Offer tiles --------------------------------------------------------- */
.band-blue { background: var(--blue); padding-block: 56px; }
.band-blue h2 { color: var(--navy); }        /* navy on blue = 4.81:1 */
.band-blue .lede { color: var(--navy); opacity: .88; }
.band-blue__head { text-align: center; max-width: 52ch; margin: 0 auto 30px; }

.tiles { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; min-height: 132px; padding: 20px 12px;
  background: #fff; border-radius: 10px; text-decoration: none;
  color: var(--navy); border: 2px solid #fff;
  transition: transform .16s ease, box-shadow .16s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,43,68,.18); }
.tile svg { width: 34px; height: 34px; color: var(--green-deep); }
.tile__t { font-family: var(--display); font-size: var(--t-h3); font-weight: 600; }

/* Referral tiles read as a directory, NOT as products he sells. */
.tile--ref {
  background: transparent; border: 2px dashed rgba(16,43,68,.34);
  color: var(--navy); cursor: default;
}
.tile--ref:hover { transform: none; box-shadow: none; background: rgba(255,255,255,.28); }
.tile--ref svg { color: var(--navy); opacity: .7; }
.tile--ref .tile__t { font-size: var(--t-body); }
.refnote {
  margin: 24px auto 0; max-width: 62ch; text-align: center;
  font-size: var(--t-util); color: var(--navy); line-height: 1.6;
}

/* --- FAQ ----------------------------------------------------------------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq .card__t { font-size: var(--t-body); }

/* --- Modal --------------------------------------------------------------- */
dialog.modal {
  width: min(560px, calc(100vw - 32px));
  padding: 0; border: 0; border-radius: 12px;
  background: var(--paper); color: var(--navy);
  box-shadow: 0 24px 60px rgba(16,43,68,.35);
}
dialog.modal::backdrop { background: rgba(16, 43, 68, .62); }
.modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px 24px 0;
}
.modal__head h2 { font-size: var(--t-h2); }
.modal__head p { margin: 6px 0 0; font-size: var(--t-util); color: var(--ink-70); }
.modal__x {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rule); background: #fff; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--navy);
}
.modal__x:hover { background: var(--mist); }
.modal__body { padding: 18px 24px 26px; }

/* --- Sticky bar: leave the bottom-right clear for the Phase-2 chat bubble -- */
@media (max-width: 859px) {
  .callbar { padding-right: var(--chat-gutter); }
}

/* --- Button font reset ---------------------------------------------------
   A bare <button> does NOT inherit font-family or font-size — the UA default
   is ~13.33px, which silently breaks the "no text below 14px" floor. Any
   button we introduce (modal triggers, contact strip, sticky bar) needs this.
   Caught by audit.py; keeping the fix global so it can't regress. */
button { font: inherit; color: inherit; }

/* Sticky-bar buttons must match the sticky-bar links they sit beside. */
.callbar button {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 0; min-height: 48px; padding: 12px 16px;
  border: 0; border-radius: 6px; cursor: pointer;
  background: var(--green); color: var(--navy);   /* navy on green = 5.10:1 */
  font-weight: 600; font-size: var(--t-util); text-decoration: none;
}
.callbar button:hover { background: var(--green-deep); color: #fff; }

/* Sticky bar reveal. Only applied when JS opts in (.callbar--auto), so with JS
   off the bar stays permanently visible — degrades to the old behaviour. */
.callbar--auto {
  transform: translateY(105%);
  transition: transform .22s ease;
}
.callbar--auto.is-on { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .callbar--auto { transition: none; }
}

/* ==========================================================================
   CAREER TIMELINE (About). The decorative decade ticks are gone — they
   asserted a 1976 start the record doesn't support. This is the real thing:
   dates, employers, roles, tenure.

   .tl--anon is the compliance kill-switch. Add it to the <ol> and every
   carrier name vanishes while the dates, roles and tenure stay put. One class,
   no copy rewrite, no broken layout.
   ========================================================================== */
.tl--career li { padding-bottom: 30px; }
.tl--career li::before { background: var(--blue-mid); }
.tl--career .tl__now::before { background: var(--green-deep); width: 11px; height: 11px; }

.tl__org, .tl__org-anon {
  display: block;
  font-family: var(--display); font-size: var(--t-h3); font-weight: 600;
  color: var(--navy); line-height: 1.25; margin-top: 2px;
}
.tl__org-anon { display: none; }              /* revealed only by .tl--anon */
.tl--anon .tl__org      { display: none; }
.tl--anon .tl__org-anon { display: block; }

.tl__unit {
  display: block; font-family: var(--sans); font-size: var(--t-fine);
  font-weight: 500; color: var(--ink-70); letter-spacing: .02em;
  text-transform: uppercase; margin-top: 3px;
}
.tl__role { display: block; font-size: var(--t-body); color: var(--ink-70); margin-top: 6px; }
.tl__len {
  display: inline-block; margin-top: 8px; padding: 2px 9px;
  border-radius: 999px; background: var(--mist);
  font-size: var(--t-fine); font-weight: 600; color: var(--blue-deep);
}
.tl__sum {
  margin-top: 6px; padding: 16px 18px;
  border-left: 3px solid var(--green-deep); background: var(--paper);
  font-size: var(--t-body); color: var(--ink-70); line-height: 1.62;
}
.tl__sum strong { color: var(--navy); }

/* ==========================================================================
   GATED CLAIM. Not a fill-in-the-blank placeholder like {{FL_LICENSE_NUMBER}}
   — that's copy we're waiting on. This is copy that may be PROHIBITED. It
   renders so Mark can see it in position, and it is impossible to ship by
   accident. Deleting the .gated-claim__flag span is a deliberate act.
   ========================================================================== */
.gated-claim {
  margin: 14px 0 0; padding: 12px 14px;
  border: 2px dashed var(--error); border-radius: 8px;
  background: #fff;
  font-family: var(--display); font-size: var(--t-h3); font-weight: 600;
  color: var(--navy); line-height: 1.3;
}
.gated-claim__flag {
  display: block; margin-bottom: 6px;
  font-family: var(--sans); font-size: var(--t-fine); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--error);
}

/* Credential line. green-deep carries white at 5.14:1 — the only brand colour
   that does. (--green and --blue both fail with white; that trap is documented
   at the top of this file.) */
.cred {
  display: inline-block; margin: 14px 0 0; padding: 8px 15px;
  border-radius: 999px; background: var(--green-deep); color: #fff;
  font-size: var(--t-util); font-weight: 600; letter-spacing: .01em;
}

/* ==========================================================================
   CHP LOCKUP. Carrier logo + "Licensed Agent" caption + the approved
   specialist line. This is the site's niche positioning, so it gets real
   estate — it is NOT a small badge any more.

   The logo is a rights-holder asset. Note it carries BLUE CROSS BLUE SHIELD
   marks as well as CHP's own (CHP is a BCBSA independent licensee), so the
   approved agent lockup + clear-space spec must come from CHP. Clear space is
   respected below via padding; do not tighten it without checking their spec.

   "Licensed Agent" is deliberate and load-bearing: it states the relationship
   (appointed agent) and rules out the reading we must never allow — that Terry
   is a CHP employee.
   ========================================================================== */
.chp {
  margin: 18px 0 0; padding: 16px 18px;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(16,43,68,.07);
  display: inline-block;
}
.chp__lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.chp__logo { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 1121 / 577; }
.chp__sub {
  font-family: var(--sans); font-size: var(--t-fine); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70);
}
.chp__line {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  font-family: var(--display); font-size: var(--t-h3); font-weight: 600;
  color: var(--green-deep); line-height: 1.25;
}
@media (min-width: 900px) { .chp__logo { max-width: 440px; aspect-ratio: 1888 / 340; } }

/* --- Bio copy (homepage teaser + About page full bio) --------------------- */
.story-copy p, .prose-copy p {
  font-size: var(--t-body); color: var(--ink-70); line-height: 1.65;
  margin: 0 0 16px;
}
.story-copy p:last-child, .prose-copy p:last-child { margin-bottom: 0; }
.prose-copy p { max-width: 66ch; }