.elementor-38067 .elementor-element.elementor-element-48fe1cb{--display:flex;--width:100%;}.elementor-38067 .elementor-element.elementor-element-48fe1cb.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-38067 .elementor-element.elementor-element-24983a5{width:100%;max-width:100%;}.elementor-38067 .elementor-element.elementor-element-51578d9{width:100%;max-width:100%;}.elementor-38067 .elementor-element.elementor-element-1fef02c{width:100%;max-width:100%;}.elementor-38067 .elementor-element.elementor-element-b86295d{width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-24983a5 *//* === Mobile layout fixes for the Hat Bar hero === */
@media (max-width: 767px){
  /* stack the two columns */
  .two-col{ grid-template-columns: 1fr !important; }

  /* tighter hero padding and gaps */
  .hero{ padding: 36px 16px !important; }
  .hero .container{ gap: 14px !important; }

  /* hide the right-side hero image on phones */
  .hero .hero-media{ display: none !important; }

  /* headline + text sizing so it never overlaps */
  .hero h1{
    font-size: 32px !important;
    line-height: 1.18 !important;
    margin: 6px 0 10px !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  .hero p{ font-size: 16px; line-height: 1.55; }

  /* eyebrow/pill spacing */
  .hero .eyebrow{
    display: inline-block;
    margin: 0 0 6px 0 !important;
  }

  /* buttons: full‑width, stacked with comfy taps */
  .hero .btn{ width: 100%; min-height: 44px; text-align: center; }
  .hero .btn + .btn{ margin-top: 10px; }

  /* tighten general spacing below the paragraph note */
  .hero .note{ margin-top: 10px !important; }
}/* End custom CSS */