/* Bold Civic direction: Open Sans 800, navy and gold blocks, big numbers. Values from WebsiteBoldV3.dc.html. */
:root {
  --maxw: 1240px;
  --bg: #fff;
  --fg: #2b2f33;
  --ink: #003a63;
  --head-color: #003a63;
  --muted: #58595b;
  --rule: #e4e7e9;
  --surface-alt: #f1f4f6;
  --deep: #003a63;
  --eyebrow-color: #006bb6;
  --head-weight: 800;
  --head-case: none;
  --head-track: -.02em;
  --head-lh: .98;
  --h1: clamp(56px, 5.2vw, 76px);
  --h2: clamp(46px, 4.6vw, 64px);
  --h3: 24px;
  --radius: 4px;
  --radius-lg: 4px;
  --btn-radius: 2px;
  --btn-pad: 17px 32px;
  --card-border: 2px solid #e4e7e9;
  --shadow: none;
}

/* Helper classes used by the home port (from the prototype helmet). Buttons use the shared .btn system in base.css. */
@media (max-width: 900px) { .b2 { grid-template-columns: 1fr !important; } .b4 { grid-template-columns: 1fr 1fr !important; } .bhuge { font-size: 64px !important; } }
@media (max-width: 600px) { .b3, .b4 { grid-template-columns: 1fr !important; } .bhuge { font-size: 48px !important; } }
@media (min-width: 601px) and (max-width: 1199px) { .bh-why { grid-template-columns: 1fr 1fr !important; } }

/* Interior skin */
/* Section headings (H2): one scale for the home page and the interior pages, 64px wide, 46px at 900px and below, 36px on phones. */
@media (max-width: 900px) { :root { --h1: 56px; --h2: 46px; } }
@media (max-width: 600px) { :root { --h1: clamp(32px, 10vw, 40px); --h2: 36px; } .h2 { line-height: 1.08; } }
@media (max-width: 340px) { :root { --h2: 32px; } }
/* One H3 treatment on every page (NAA, Oct 2026: headings at the same level look the same): card, step, form
   thank-you and sub-section headings, and the home H3s (.bh-h3). 24px, 22px on phones. The FAQ questions keep the
   accordion style (.faq__q), which they share on the home page and the FAQ page. */
.theme-bold .h3, .theme-bold .card__title, .theme-bold .step__title, .theme-bold .thanks__title, .bh-h3 { font-family: 'Open Sans', Arial, sans-serif; font-weight: 800; font-size: var(--h3); line-height: 1.25; letter-spacing: -.01em; }
@media (max-width: 600px) { :root { --h3: 22px; } }
.theme-bold .step { border-top-color: #ffb300; }
.theme-bold .step__num { font-size: 64px; color: #003a63; }
.theme-bold .cat { border-radius: 4px; border-top: 0; background: var(--cat-a); color: #fff; box-shadow: none; }
.theme-bold .cat .cat__name, .theme-bold .cat .cat__pct, .theme-bold .cat .cat__need, .theme-bold .cat .cat__size { color: #fff; }
.theme-bold .cat[data-cat="large"], .theme-bold .cat[data-cat="large"] * { color: #fff; }
.theme-bold .quote__text { font-weight: 800; }
.theme-bold .faq__q { color: #003a63; font-size: 19px; }
.theme-bold .tab.is-on { background: #003a63; border-color: #003a63; }

/* ---------- Home (Bold Civic) ---------- */
/* Port of WebsiteBoldV3.dc.html. Inline styles carry the desktop design; this block holds states and breakpoints. */
/* Element defaults the prototype gets from the design system's tokens/base.css (its helmet sets none of these):
   body line-height 1.65, balanced h1/h2, pretty paragraphs, links without underline until hover. Buttons keep the UA "normal". */
.bh-home { line-height: 1.65; }
.bh-home button { line-height: normal; }
.bh-home h1, .bh-home h2 { text-wrap: balance; }
.bh-home p { text-wrap: pretty; }
.bh-years a { text-decoration: none; }
.bh-years a:hover { text-decoration: underline; }

/* Expanding benefit cards (the handoff's ExpandingCard, as HTML + CSS; site.js adds .is-open on tap) */
.bh-xcard { position: relative; height: 380px; border-radius: 6px; overflow: hidden; color: #fff; background-color: #00548f; background-position: center; background-size: cover; background-repeat: no-repeat; cursor: default; }
.bh-xcard__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 107, 182, 0) 30%, rgba(5, 58, 99, .88) 100%); }
.bh-xcard__shade::after { content: ''; position: absolute; inset: 0; background: rgba(0, 84, 143, .94); opacity: 0; transition: opacity 220ms cubic-bezier(.4, 0, .2, 1); }
.bh-xcard__panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
.bh-xcard__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms cubic-bezier(.16, 1, .3, 1); }
/* The padding (taken back by the negative margin) leaves room for the focus ring on "See the survey" inside the clipped area. */
.bh-xcard__more > div { overflow: hidden; padding: 8px; margin: -8px; }
.bh-xcard:hover .bh-xcard__shade::after, .bh-xcard:focus-within .bh-xcard__shade::after, .bh-xcard.is-open .bh-xcard__shade::after { opacity: 1; }
.bh-xcard:hover .bh-xcard__more, .bh-xcard:focus-within .bh-xcard__more, .bh-xcard.is-open .bh-xcard__more { grid-template-rows: 1fr; }
.bh-xcard__title { min-height: 28px; margin: 0; color: #fff; }
/* Home hero: the H1 is the program name, set like the label line it sits in. */
.bh-hero__h1 { display: inline; font: inherit; letter-spacing: inherit; color: inherit; margin: 0; }
.bh-xcard__body { font-size:16px; line-height: 1.55; margin: 14px 0 18px; color: #fff; }
/* The card link is a small secondary button (.btn .btn--light .btn--sm): white outline, white fill on hover. */
.bh-xcard__cta { padding: 8px 16px; }

/* Winner logo wall: #1 tile(s) lead the grid, then the rest three to a row */
.bh-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.bh-logo { grid-column: span 2; min-width: 0; }
.bh-logo--top { grid-column: 1 / -1; }
.bh-logos--tie .bh-logo--top { grid-column: span 3; }

/* NPS tiles: the selected tile's white inner ring, kept alongside the focus ring when the tile has focus. */
.bh-nps__btn[aria-pressed="true"] { box-shadow: 0 0 0 4px #fff inset; }
.bh-nps__btn[aria-pressed="true"]:focus-visible { box-shadow: 0 0 0 4px #fff inset, var(--focus-bands); }

/* Home FAQ: the shared accordion (base.css) on the white home section. */
.bh-faq { max-width: none; }

@media (max-width: 900px) {
  .bh-hero__shade { background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .82) 100%) !important; }
  /* Here the hero photo is fitted to the hero's height, so shift it to keep her face beside the headline (wide crop: src/_data/photoPosition.js; phones: the 600px block). */
  .bh-hero__img { object-position: 20% 0% !important; }
  .bh-h2 { font-size: 46px !important; }
  .bh-h2--52 { font-size: 42px !important; }
  .bh-quote { font-size: 30px !important; }
  .bh-calc__need { font-size: 96px !important; }
  .bh-steps .bh-step { padding: 26px 22px 12px 0 !important; }
  .bh-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-logo, .bh-logos--tie .bh-logo--top { grid-column: auto; }
  .bh-logo--top { grid-column: 1 / -1; }
  .bh-quote__img { height: 280px !important; }
  /* NPS tiles: detractors on one row, passives and promoters side by side below (the legends no longer fit three across) */
  .bh-nps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; row-gap: 20px !important; }
  .bh-nps__grp--detractor { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .bh-sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  .bh-hero__grid { padding-top: 56px !important; padding-bottom: 48px !important; gap: 28px !important; }
  .bh-hero__img { object-position: 25% 0% !important; } /* the photo is larger here, so her face needs a little more shift to clear the headline */
  .bh-hero__lead { font-size: 18px !important; margin: 20px 0 26px !important; }
  .bh-hero__stat { font-size: 44px !important; }
  .bh-hero__word { font-size: 22px !important; }
  .bh-h2, .bh-h2--52 { font-size: 36px !important; line-height: 1.08 !important; margin-bottom: 28px !important; }
  .bh-eyebrow { font-size: 18px !important; }
  .theme-bold .faq__q { font-size: 17px; }
  #nps .bh-h2, #winners .bh-h2 { margin-bottom: 0 !important; }
  .bh-band.b4 { grid-template-columns: 1fr 1fr !important; }
  .bh-band__num { font-size: 36px !important; }
  .bh-big { font-size: 52px !important; }
  .bh-pad { padding: 24px !important; }
  .bh-calc__need { font-size: 72px !important; }
  .bh-list2 { grid-template-columns: 1fr !important; }
  .bh-list2, .bh-pad ul { font-size: 16px !important; }
  .bh-steps .bh-step { padding: 22px 0 10px !important; }
  .bh-xcard { height: 320px; }
  /* NPS tiles */
  .bh-nps__btn { height: 64px !important; font-size: 26px !important; }
  .bh-nps__name { font-size: 17px !important; }
  .bh-nps__out { font-size: 18px !important; padding: 18px 20px !important; }
  .bh-quote { font-size: 24px !important; }
  .bh-quote__img { height: 220px !important; }
  .bh-logo { height: 110px !important; padding: 16px !important; }
}

/* Header logo 40% larger than the shared size (52px, 42px on phones). */
.theme-bold .masthead__logo { flex-shrink: 0; }
.theme-bold .masthead__logo img { height: 99px; }
@media (max-width: 600px) { .theme-bold .masthead__logo img { height: 80px; } }
@media (max-width: 480px) { .theme-bold .masthead__guide .hide-xs { display: none; } }
@media (max-width: 359px) { .theme-bold .masthead__guide { display: none; } }