/* HERO: exact bottom alignment on desktop */
    .hero .wrap{ align-items:stretch; } /* keep your grid; just stretch rows */
    .hero .wrap > div{ display:flex; flex-direction:column; min-height:100%; }
    .hero .ctas{ margin-top:auto; } /* push CTAs to bottom of left column */
    .hero .card{ display:flex; flex-direction:column; justify-content:space-between; height:100%; }
    .hero .card .map{ margin-top:auto; }

    /* Mobile: restore natural flow so content doesn't stretch awkwardly */
    @media (max-width:980px){
      .hero .wrap{ align-items:start; }        /* your CSS already stacks columns */
      .hero .wrap > div{ display:block; }      /* normal flow on phones */
      .hero .ctas{ margin-top:14px; }          /* standard spacing on mobile */
      .hero .card{ height:auto; }              /* let the card size naturally */
    }

    /* Small FAQ brand touch */
    .faq h2{ color:var(--brand); }
    .faq details summary{ transition:color .2s ease; }
    .faq details[open] summary, .faq details summary:hover{ color:var(--brand); }