/* ============================================================
   CITY EXPERIENCE v2.0  —  Presentation-layer enhancement
   ------------------------------------------------------------
   Brings the shared City Authority Template into the Viera Design
   System (Homepage v2 / Article v2 / Guide v2 / Authority Hub v2 /
   County v2). Purely ADDITIVE and presentation only.

   REUSE FIRST — every city page now loads, in this order:
     /article-v2.css  → the shared reading rhythm, the Quick Answer
                        component, .callout, the mid-page .county-cta,
                        the .cta-box buttons and the .twr "Talk With
                        Ray" trust module.
     /county-v2.css   → the shared county-family polish these pages
                        already use by class name: the cream desktop
                        reading surface + white .article card, the
                        .county-situations / .county-scenarios blocks,
                        the .related / .related-card grids, the nested
                        .article .cta-box correction and .twr spacing.
     /city-v2.css     → THIS FILE. Only the city-unique surface that
                        neither of the above covers: the two-column
                        city hero (identity + embedded lead form),
                        the in-hero Quick Answer (.hero-qa) and the
                        hero lead-form card (.hero-form-card).

   No CSS or JS is duplicated: shared components are reused as-is and
   this file adds ONLY the city hero layer on top.

   It also declares the shared Viera Design System tokens (--border,
   --border-gold, --radius*, --shadow-*, --navy-light) that
   article-v2 / county-v2 expect. City pages did not previously set
   them, so this is additive and lets the reused stylesheets resolve
   exactly as they do on county and article pages.

   Scope of change: NONE of the following are touched — DOM, content,
   headings (incl. H1), internal / authority links, JSON-LD schema,
   breadcrumbs, search, sitemap, navigation, footer, NAP, URLs,
   slugs, SEO metadata, or CTA / Formspree destinations. This file
   only changes how existing markup looks.

   Load order: linked immediately before </head>, AFTER the page's
   inline <style>, /search.css, /article-v2.css and /county-v2.css,
   so these rules win at equal specificity without needing !important.

   Design language: unchanged tokens (navy / gold / cream,
   Cormorant Garamond + DM Sans). Calm, premium, family-friendly.
   ============================================================ */

:root{
  /* Shared Viera Design System tokens — mirrors the county / article
     inline :root so the reused article-v2.css & county-v2.css resolve
     identically here. Additive: city pages did not declare these. */
  --navy-light:#162847;
  --border:rgba(0,0,0,.08);
  --border-gold:rgba(184,156,106,.2);
  --radius:8px;
  --radius-lg:12px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 6px 24px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --shadow-card:0 16px 48px rgba(15,31,56,.16),0 4px 16px rgba(0,0,0,.08);
  /* Motion + elevation (mirrors article-v2 / county-v2; self-sufficient). */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --shadow-hover:0 18px 50px rgba(15,31,56,.14),0 6px 18px rgba(0,0,0,.08);
}

/* ============================================================
   1 · CITY HERO  —  two-column: identity + embedded lead form
   county-v2 styles a single-column .hero (glow, eyebrow, breadcrumb
   rule); the city hero is a grid (.hero-grid = .hero-main +
   .hero-form-card). The shared hero polish is welcome, but the
   county rule adds overflow:hidden which would break the existing
   sticky lead form — restore overflow so the form can still stick.
   Body already has overflow-x:hidden, so the soft gold glow stays
   clipped horizontally and cannot cause horizontal scrolling.
   ============================================================ */
.hero{overflow:visible}
.hero-grid{align-items:start}
.hero-main{min-width:0}
.hero-desc{line-height:1.75}

/* ============================================================
   2 · IN-HERO QUICK ANSWER  (.hero-qa)
   The city's Quick Answer is a lighter, in-hero card (h2 + lead
   paragraph + "learn more" link) — not the .article-nested Quick
   Answer county-v2 corrects. Re-assert it as an intentional glass
   card on the navy hero so it reads as the premium, orienting
   first answer. Wording and links are untouched.
   ============================================================ */
.hero-qa{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(184,156,106,.32);
  border-left:3px solid var(--gold);
  border-radius:12px;
  padding:1.45rem 1.6rem;
  margin:1.5rem 0;
  box-shadow:0 12px 40px rgba(6,13,26,.28);
}
.hero-qa h2{
  font-family:'Cormorant Garamond',serif;
  font-size:1.32rem;font-weight:400;color:var(--goldl);
  margin:0 0 .55rem;line-height:1.3;letter-spacing:.005em;
}
.hero-qa p{
  font-size:.92rem;line-height:1.78;color:rgba(255,255,255,.84);
  margin:0;max-width:none;
}
.hero-qa .qa-more{
  display:inline-block;margin-top:.9rem;
  font-size:.82rem;font-weight:600;letter-spacing:.01em;
  color:var(--gold);text-decoration:none;
  transition:color .2s var(--ease-soft),transform .2s var(--ease-out);
}
.hero-qa .qa-more:hover{color:var(--goldl);transform:translateX(3px)}

/* ============================================================
   3 · HERO LEAD FORM CARD  (.hero-form-card)
   The single Formspree form on the page. Bring its elevation,
   header and field / submit motion into line with the shared
   blog-form-card / lcf treatment. Destinations, the Formspree
   action and hidden tracking fields are untouched.
   ============================================================ */
.hero-form-card{
  box-shadow:var(--shadow-card);
  border:1px solid rgba(184,156,106,.2);
}
.hero-form-card .lcf-head{
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
}
.hero-form-card .lcf-field input,
.hero-form-card .lcf-field select{
  transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft),background .2s;
}
.hero-form-card .lcf-field input:focus,
.hero-form-card .lcf-field select:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,156,106,.16);
  background:#fffdf9;
}
.hero-form-card .lcf-submit{
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s,border-color .25s;
}
.hero-form-card .lcf-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(184,156,106,.32);
}

/* ============================================================
   4 · SITUATION NAVIGATOR  ("which situation sounds like mine?")
   The navigator reuses .related-card, so its hover-lift and focus
   already come from county-v2. Only give the section heading a
   touch of the shared reading rhythm.
   ============================================================ */
.lcf-section .related-card{height:100%}

/* ============================================================
   5 · ACCESSIBILITY  —  visible keyboard focus + reduced motion
   (Broader focus / reduced-motion rules are inherited from
   article-v2 / county-v2; these cover the city-only elements.)
   ============================================================ */
.hero-qa .qa-more:focus-visible,
.hero-form-card .lcf-submit:focus-visible,
.hero-form-card a:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;
}
@media(prefers-reduced-motion:reduce){
  .hero-qa .qa-more,.hero-form-card .lcf-submit{transition-duration:.01ms}
  .hero-qa .qa-more:hover{transform:none}
  .hero-form-card .lcf-submit:hover{transform:none}
}

/* ============================================================
   6 · RESPONSIVE  —  preserve the inline city breakpoints; keep
   the hero readable when the grid collapses to one column.
   ============================================================ */
@media(max-width:900px){
  .hero-form-card{position:static}
}
@media(max-width:768px){
  .hero::after{display:none}
  .hero-qa{padding:1.2rem 1.25rem;margin:1.25rem 0}
}