/* Base styles from the design reference */
html { scroll-behavior: smooth; }
  body { margin: 0; background: #FFFFFF; color: #0A0A0A; font-family: 'Montserrat', sans-serif; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: #0A0A0A; text-decoration: none; }
  a:hover { color: #ED1217; }
  input, select, textarea, button { font-family: 'Montserrat', sans-serif; }
  ::placeholder { color: #9A9A9A; }

/* Button -> link conversions keep the <button> UA defaults they had in the prototype */
a.bt { display: inline-block; color: #000000; text-align: center; }
a.bt:hover { color: #000000; }

[hidden] { display: none !important; }

/* Hover / focus states (generated from style-hover / style-focus, same as the prototype runtime) */
.h0:hover{color:#ED1217 !important}
.h1:hover{background:#F4F4F4 !important;color:#ED1217 !important}
.h2:hover{background:#0A0A0A !important;color:#FFFFFF !important}
.h3:hover{background:#ED1217 !important}
.h4:hover{border-color:#FFFFFF !important}
.h5:hover{background:#FFFFFF !important}
.f6:focus{border-bottom-color:#ED1217 !important}
.h7:hover{color:#FFFFFF !important}
.h8:hover{background:#FFFFFF !important;color:#0A0A0A !important}

/* Spam protection: honeypot and Turnstile slot stay out of the form grid unless a challenge is shown */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ts-slot { position: absolute; width: 0; height: 0; overflow: hidden; }
.ts-slot.is-visible { position: static; width: auto; height: auto; overflow: visible; }
button[type="submit"][disabled] { cursor: wait !important; opacity: .6; }

/* Tile grids below their full-width column count: keep every row full so no empty grey cell shows.
   Thresholds are each grid's 3-column breakpoint, so desktop layouts are untouched. */
.cq { container-type: inline-size; }
@container (width < 786px) { .tiles-260 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@container (width < 726px) { .tiles-240 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* "Going further": 4 columns, then 2, then 1 (never 3, which strands the banner) */
@container (width < 808px) { .tiles-going-further { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@container (width < 404px) {
  .tiles-going-further { grid-template-columns: minmax(0, 1fr) !important; }
  .tiles-going-further > :last-child { grid-column: auto !important; }
}
/* Homepage neighborhoods: 4 tiles go 4 -> 2x2, including on phones (3 across would leave a lone tile).
   946px is the 4-across breakpoint (4 x 220px + gaps) with a few px of scrollbar allowance. */
@container (width < 946px) { .tiles-neighborhoods { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Four-item rows (stat bands, footer columns): 4 across where the design fits 4, otherwise 2 x 2,
   then 1. Never 3 + 1. --m is the design's own column minimum and --g its gap, so the 4-across
   breakpoint is exactly the design's and desktop is untouched. */
.bal4 { grid-template-columns: repeat(auto-fit, minmax(clamp(var(--m), (4 * var(--m) + 3 * var(--g) - 100%) * 9999, 34%), 1fr)) !important; }
/* Three-item rows (stats, team cards): 3 across or stacked, never 2 + 1 */
.bal3 { grid-template-columns: repeat(auto-fit, minmax(clamp(var(--m), (3 * var(--m) + 2 * var(--g) - 100%) * 9999, 51%), 1fr)) !important; }
/* Footer contact column: let the long email address wrap instead of pushing past the screen edge */
footer .bal4 > div { min-width: 0; overflow-wrap: anywhere; }

/* Very small phones (under 360px): two-column sections whose columns ask for 320px, and the header
   sub-line, would otherwise run off the right edge */
@media (max-width: 359px) {
  .fit320 { grid-template-columns: minmax(0, 1fr) !important; }
  header a.bt span { white-space: normal !important; }
}

/* Dropdowns: Safari draws its own glossy control unless told not to. Flat field with a small chevron instead. */
select { -webkit-appearance: none; appearance: none; border-radius: 0; padding-right: 22px !important;
  background-repeat: no-repeat !important; background-position: right 2px center !important; background-size: 10px 6px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230A0A0A' stroke-width='1.2'/%3E%3C/svg%3E") !important; }
#connect select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23FFFFFF' stroke-width='1.2'/%3E%3C/svg%3E") !important; }

/* Phone and email are real links (tap to call / email) that keep the surrounding text colour */
a.plain:not(:hover) { color: inherit; }

/* Red eyebrow labels: when one wraps on a narrower screen, give its two lines room to breathe */
@media (max-width: 1100px) {
  [style*="px/1 'Montserrat',sans-serif;letter-spacing:.2em"] { line-height: 1.6 !important; }
}

/* ---------- Phones (under 720px): tighter, more side-by-side layout. Desktop and tablet untouched. ---------- */
.nav-toggle { display: none; }
@media (max-width: 719px) {
  /* Header: brand + Menu button; the menu opens as a simple list */
  header > div { column-gap: 10px !important; row-gap: 0 !important; min-height: 62px !important; }
  header a.bt { gap: 10px !important; }
  header a.bt > img { height: 22px !important; }
  header a.bt > span { padding-left: 10px !important; }
  header a.bt > span > span:last-child { font-size: 7.5px !important; letter-spacing: .03em !important; }
  .nav-toggle { display: block; background: none; border: 1px solid #0A0A0A; padding: 10px 13px; cursor: pointer; color: #0A0A0A;
    font: 400 11px/1 'Montserrat', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
  #site-nav { display: none !important; }
  header.nav-open #site-nav { display: flex !important; flex-basis: 100%; flex-direction: column; align-items: stretch !important;
    row-gap: 0 !important; margin-top: 12px; padding: 6px 0 12px; border-top: 1px solid #E4E4E4; }
  #site-nav > a.bt, #site-nav > div > button { padding: 14px 0 !important; font-size: 12px !important; text-align: left; border-bottom: 1px solid #EFEFEF !important; }
  #site-nav > div > button { pointer-events: none; color: #6B6B6B !important; border-bottom: 0 !important; padding-bottom: 6px !important; }
  #site-nav > div > button > span { display: none; }
  #site-nav [id^="dd-"], #site-nav [id^="dd-"][hidden] { display: flex !important; position: static !important; box-shadow: none !important;
    border: 0 !important; border-bottom: 1px solid #EFEFEF !important; padding: 0 0 8px 14px !important; min-width: 0 !important; background: none !important; }
  #site-nav [id^="dd-"] > a { padding: 10px 0 !important; }
  #site-nav > a:last-child { margin-top: 16px; padding: 14px !important; text-align: center; }

  /* Homepage hero: eyebrow on one line, the two buttons side by side */
  .hero-eyebrow { font-size: 8.5px !important; letter-spacing: .06em !important; margin-bottom: 18px !important; }
  .hero-cta { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .hero-cta > a { display: flex !important; align-items: center; justify-content: center; text-align: center;
    padding: 13px 10px !important; font-size: 10px !important; letter-spacing: .12em !important; line-height: 1.5 !important; }

  /* Less vertical air between sections */
  section[style*="padding:clamp(72px,9vw,1"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  section[style*="padding:0 clamp(20px,5vw,64px) clamp(72px"] { padding-bottom: 48px !important; }
  section[style*="padding:clamp(64px,8vw,1"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  section[style*="padding:clamp(80px,10vw,150px)"] { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Stat rows: 2 x 2 (or 3 across) instead of a tall stack */
  main .bal4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 22px 16px !important; }
  .stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  .stats3 > div > div:first-child { font-size: 22px !important; }

  /* Homepage: compact link tiles, shorter photos */
  .tiles-260 > a { min-height: 0 !important; padding: 22px !important; gap: 10px !important; }
  .m-wide { aspect-ratio: 3 / 2 !important; }
  .m-square { aspect-ratio: 1 / 1 !important; }

  /* Team: photo beside the bio instead of above it */
  .team-cards > article { display: grid; grid-template-columns: 36% 1fr; column-gap: 16px; align-items: start; }
  .team-cards > article > div:first-child { grid-row: 1 / span 3; margin-bottom: 0 !important; }
  .team-cards > article > p { font-size: 14px !important; }

  /* Neighborhood guides: shorter photo, tighter card */
  main article[style*="padding:clamp(28px,3.4vw,52px)"] { padding: 22px !important; gap: 16px !important; }
  main article > div[style*="flex:1 1 240px"] { aspect-ratio: 16 / 9 !important; max-width: none !important; }

  /* Forms: short fields share a row */
  [data-lead-form] { grid-template-columns: minmax(0, 1fr); }
  [data-lead-form] input, [data-lead-form] select, [data-lead-form] textarea { min-width: 0; width: 100%; }
  .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 16px !important; }
  .search-criteria > label:nth-child(1), .search-criteria > label:nth-child(4),
  .search-contact > label:nth-child(3), .search-contact > button { grid-column: 1 / -1; }

  /* Footer: name on top, the two link lists side by side, contact below */
  footer .bal4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 28px 20px !important; }
  footer .bal4 a.bt { line-height: 1.3 !important; }
  footer .bal4 > div:first-child, footer .bal4 > div:last-child { grid-column: 1 / -1; }
}

/* ---------- Pages with a full-bleed photo/video header ----------
   The header floats over the image, clear at the very top and fading to white once the visitor scrolls.
   The image itself fills the whole screen on load. */
.has-hero header { position: fixed !important; left: 0; right: 0; transition: background-color .35s ease, border-color .35s ease; }
.has-hero header::before { content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.5), rgba(10,10,10,0)); transition: opacity .35s ease; }
.has-hero header > div > a.bt > img { transition: filter .35s ease; }
.has-hero header > div > a.bt span, .has-hero #site-nav > a, .has-hero #site-nav > div > button, .has-hero .nav-toggle { transition: color .35s ease, border-color .35s ease, background-color .2s ease; }
.has-hero header.at-top:not(.nav-open) { background: transparent !important; border-bottom-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.has-hero header.at-top:not(.nav-open)::before { opacity: 1; }
.has-hero header.at-top:not(.nav-open) > div > a.bt > img { filter: invert(1); }
.has-hero header.at-top:not(.nav-open) > div > a.bt > span { border-left-color: rgba(255,255,255,.35) !important; }
.has-hero header.at-top:not(.nav-open) > div > a.bt > span > span { color: #FFFFFF !important; }
.has-hero header.at-top:not(.nav-open) #site-nav > a, .has-hero header.at-top:not(.nav-open) #site-nav > div > button,
.has-hero header.at-top:not(.nav-open) .nav-toggle { color: #FFFFFF !important; border-color: #FFFFFF !important; }
.has-hero header.at-top:not(.nav-open) #site-nav > a.h0:hover, .has-hero header.at-top:not(.nav-open) #site-nav > div > button:hover { color: #ED1217 !important; }
.has-hero header.at-top:not(.nav-open) #site-nav > a.h2:hover { background: #FFFFFF !important; color: #0A0A0A !important; }
.hero { min-height: max(560px, 100vh) !important; min-height: max(560px, 100svh) !important; }
.hero-flow { display: flex; flex-direction: column; justify-content: flex-end; }
.hero-flow > div:last-child { width: 100%; }

/* Headshot beside the bio: photo column a little narrower than the text column on larger screens */
@media (min-width: 900px) {
  .portrait-left { grid-template-columns: 5fr 7fr !important; }
  .portrait-right { grid-template-columns: 7fr 5fr !important; }
}

/* Homepage hero on wide screens: one-line title bottom-left; intro and buttons as one block flush to the right edge */
@media (min-width: 1280px) {
  .hero-row { display: flex !important; justify-content: space-between; align-items: flex-end; gap: 48px !important; }
  .hero-row h1 { white-space: nowrap; font-size: clamp(60px, 5.2vw, 88px) !important; }
  .hero-br { display: none; }
  .hero-side { flex: none; width: clamp(460px, 34vw, 580px); }
  .hero-side > p { max-width: none !important; }
  .hero-cta { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px !important; }
  .hero-cta > a { text-align: center; white-space: nowrap; padding-left: 12px !important; padding-right: 12px !important; }
}

/* Homepage link tiles: less empty space above and below the row (phones already use tighter spacing) */
@media (min-width: 720px) {
  .tight-bottom { padding-bottom: clamp(48px, 5vw, 80px) !important; }
}

/* ---------- The Elrod Journal ---------- */
.topic-tab { cursor: pointer; padding: 11px 18px; font: 400 11px/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; background: #FFFFFF; color: #0A0A0A; border: 1px solid #E4E4E4; }
.topic-tab:hover { border-color: #0A0A0A; }
.topic-tab.is-active { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
.post-card:hover .post-btn { background: #0A0A0A !important; color: #FFFFFF !important; }
.post-ghost:hover { border-color: #0A0A0A !important; }
/* Jump links land below the sticky header */
.post-body [id] { scroll-margin-top: 110px; }
@media (min-width: 1000px) {
  /* Article header: text beside a square photo that stays a sensible size on wide screens */
  .post-head { grid-template-columns: minmax(0, 1fr) minmax(0, min(42%, 640px)) !important; }
  /* The "In this article" list follows the reader down the page */
  .post-toc { position: sticky; top: 110px; }
}
@media (max-width: 719px) {
  .post-toc { flex-basis: 100% !important; padding-top: 0 !important; padding-bottom: 12px; border-bottom: 1px solid #E4E4E4; }
  .sa-row { grid-template-columns: minmax(0, 1fr) !important; }
  /* Comparison table fits the screen instead of scrolling sideways */
  .post-body table { min-width: 0 !important; }
  .post-body th, .post-body td { padding-left: 8px !important; padding-right: 8px !important; line-height: 1.45 !important; }
  .post-body th:first-child, .post-body td:first-child { padding-left: 0 !important; }
  .post-body th:last-child, .post-body td:last-child { padding-right: 0 !important; }
  .post-body td { font-size: 14px !important; }
  .post-body td:first-child { font-size: 16px !important; }
}

/* Article reading column: larger type in a wider column, so the lines stay a comfortable length */
@media (min-width: 1000px) {
  .post-body { max-width: 800px !important; }
  .post-body > p[style*="300 17px"] { font-size: 18px !important; }
}
/* Wide screens: contents list on the left edge, article in the middle, a contact card on the right edge */
.post-rail { display: none; }
@media (min-width: 1600px) {
  .post-layout { justify-content: space-between !important; flex-wrap: nowrap !important; gap: 0 !important; }
  .post-rail { display: block; flex: 0 0 280px; position: sticky; top: 110px; padding-top: clamp(24px,3vw,40px); }
  .post-toc { flex: 0 0 220px !important; }
}