<!-- ============================================================
     BLOCK 00 — SHARED CSS
     Add this ONCE to your page — either in a Quix "Custom HTML"
     block at the very top, or paste into your Joomla template's
     custom CSS area / User Defined Styles field in Quix settings.
     All other blocks depend on these variables and base styles.
     ============================================================ -->

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>

<style>
  /* ── COLOR & FONT VARIABLES ── */
  :root {
    --gold:       #c9a84c;
    --gold-light: #e8cb7a;
    --gold-pale:  #f7eed8;
    --teal:       #274647;
    --teal-mid:   #2f5657;
    --slate:      #4a5568;
    --white:      #ffffff;
    --off-white:  #fafaf7;
    --border:     #e2d9c5;
  }

  /* ── SHARED LAYOUT ── */
  .ans-section { padding: 72px 24px; }
  .ans-container { max-width: 1080px; margin: 0 auto; }

  .ans-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
  }
  .ans-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--teal);
    margin-bottom: 16px;
  }
  .ans-sub {
    color: var(--slate);
    max-width: 620px;
    font-size: .97rem;
    font-family: 'Montserrat', sans-serif;
  }
</style>
