<section class="brand-new-hero-wrapper">
  <div class="brand-new-hero-inner">
    
    <!-- 1. EYEBROW -->
    <p class="custom-eyebrow">BOUTIQUE PROFESSIONAL FIRM</p>
    
    <!-- 2. DESCRIPTOR -->
    <p class="custom-desc">
      From brand to boardroom, we bring <br>
      <strong>BALANCE, BOUNDARIES, & BREVITY™</strong>,<br>
      to complex, cross-disciplinary work.
    </p>

    <!-- UPPER DIVIDER LINE -->
    <div class="custom-divider"></div>
    
    <!-- 3. THREE-COLUMN TAGLINE SECTION -->
    <div class="custom-tagline-grid">
      <div class="tagline-col">
        <h2 class="tag-title tag-title--mahogany">CONNECTION</h2>
        <p class="tag-sub">We understand your world.</p>
      </div>
      <div class="tagline-col">
        <h2 class="tag-title tag-title--jade">STRATEGY</h2>
        <p class="tag-sub">We architect the path.</p>
      </div>
      <div class="tagline-col">
        <h2 class="tag-title tag-title--cocoa">EXECUTION</h2>
        <p class="tag-sub">We deliver, flawlessly.</p>
      </div>
    </div>

    <!-- 4. METRICS SECTION -->
    {% if module.stats %}
      <div class="custom-stats-row" role="list">
        {% for stat in module.stats %}
          <div class="custom-stat-cell" role="listitem">
            <strong class="stat-num stat-num--"></strong>
            <span class="stat-txt"></span>
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <!-- 5. TEAM PHOTO -->
    <div class="custom-photo-container">
      {% if module.image.src %}
        <img src="" alt="" loading="eager">
      {% else %}
        <img src="" alt="MNF&amp;CO" loading="eager">
      {% endif %}
    </div>

  </div>
</section>

<style>
  /* Import Playfair Display from Google Fonts */
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

  /* Base Reset & Background */
  .brand-new-hero-wrapper {
      background: linear-gradient(135deg, #ffffff 0%, #f7f3ed 56%, #efeae2 100%) !important;
      overflow: hidden !important;
      width: 100% !important;
      display: block !important;
  }

  .brand-new-hero-inner {
      display: block !important; 
      text-align: center !important;
      max-width: 1200px !important;
      margin: 0 auto !important;
      padding: 60px 20px 0 20px !important;
  }

  /* 1. Eyebrow */
  .custom-eyebrow {
      display: block !important;
      margin: 0 auto 12px auto !important;
      color: #8aa69b !important;
      font-size: 18px !important;
      text-transform: uppercase !important;
      letter-spacing: 3px !important; 
      font-family: 'Playfair Display', Georgia, serif !important; 
      font-weight: 600 !important;
  }

  /* 2. Descriptor */
  .custom-desc {
      display: block !important;
      color: #505050 !important; 
      font-size: 1.15rem !important;
      line-height: 1.6 !important;
      letter-spacing: 0.02em !important;
      margin: 0 auto 40px auto !important; 
      max-width: 600px !important;
      font-family: sans-serif !important;
  }
  
  /* Bold Brand Phrase (Playfair Display) */
  .custom-desc strong {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-weight: 700 !important;
      color: #4b2a24 !important;
      letter-spacing: 0.5px !important;
  }

  /* Upper Divider Line */
  .custom-divider {
      width: 100% !important;
      max-width: 750px !important;
      margin: 0 auto 40px auto !important; 
      border-top: 1px solid rgba(181, 154, 139, 0.3) !important;
  }

  /* 3. Tagline Columns */
  .custom-tagline-grid {
      display: flex !important;
      flex-direction: row !important;
      justify-content: center !important;
      align-items: flex-start !important;
      gap: 40px !important;
      max-width: 1000px !important;
      margin: 0 auto 40px auto !important; 
  }

  .tagline-col {
      flex: 1 !important;
      text-align: center !important;
      min-width: 200px !important;
  }

  .tag-title {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-size: 1.85rem !important; 
      font-weight: 700 !important;
      margin: 0 0 10px 0 !important;
      letter-spacing: 1.5px !important;
      white-space: nowrap !important;
  }

  .tag-title--mahogany { color: #4b2a24 !important; }
  .tag-title--jade { color: #8aa69b !important; }
  .tag-title--cocoa { color: #b59a8b !important; }

  /* Tagline Descriptors (Explicitly Playfair Display Italic) */
  .tag-sub {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-style: italic !important;
      color: #505050 !important;
      font-size: 0.95rem !important;
      margin: 0 !important;
  }

  /* 4. Metrics Rows */
  .custom-stats-row {
      display: flex !important; 
      flex-direction: row !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 80px !important;
      width: 100% !important;
      max-width: 750px !important;
      padding: 24px 0 !important; 
      margin: 0 auto !important; 
      border-top: 1px solid rgba(181, 154, 139, 0.3) !important;
      border-bottom: 1px solid rgba(181, 154, 139, 0.3) !important;
  }

  .custom-stat-cell {
      display: flex !important; 
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 1 !important;
  }

  .stat-num {
      margin: 0 0 4px 0 !important;
      line-height: 1 !important;
      display: block !important;
      font-family: serif !important;
      font-size: 2.2rem !important;
  }
  .stat-num--1 { color: #4b2a24 !important; }
  .stat-num--2 { color: #8aa69b !important; }
  .stat-num--3 { color: #b59a8b !important; }

  /* Metric Labels */
  .stat-txt {
      margin: 0 !important;
      line-height: 1.2 !important;
      display: block !important;
      font-size: 0.68rem !important;
      text-transform: uppercase !important;
      letter-spacing: 1.5px !important;
      color: #3D3D3D !important; 
      font-family: sans-serif !important;
      font-weight: 400 !important; 
  }

  /* 5. Team Photo */
  .custom-photo-container {
      display: block !important;
      width: 100% !important; 
      max-width: 1050px !important;
      margin: 40px auto 0 auto !important; 
      border-radius: 8px !important; 
      overflow: hidden !important;
  }

  .custom-photo-container img {
      width: 100% !important;
      height: auto !important;       
      display: block !important;
  }

  /* Smart Mobile Reconciliation (Max-width 768px) */
  @media (max-width: 768px) {
      .brand-new-hero-inner {
          padding: 40px 15px 0 15px !important;
      }
      
      /* Scale down eyebrow size for mobile */
      .custom-eyebrow {
          font-size: 15px !important;
          margin-bottom: 8px !important;
      }

      /* Scale down descriptor and core brand phrase so it wraps elegantly */
      .custom-desc {
          font-size: 1rem !important;
          margin-bottom: 30px !important;
      }

      .custom-divider {
          margin-bottom: 30px !important;
      }

      /* Stack tagline columns vertically on phone screens */
      .custom-tagline-grid {
          flex-direction: column !important;
          gap: 30px !important;
          margin-bottom: 30px !important;
          align-items: center !important; 
          justify-content: center !important;
          width: 100% !important;
      }

      /* Force centered flex container behavior on tagline wrapper */
      .tagline-col {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          text-align: center !important;
          width: 100% !important;
      }

      /* Force children to center physically and typographically */
      .tag-title {
          font-size: 1.5rem !important;
          white-space: normal !important; 
          text-align: center !important;
          width: 100% !important;
          margin: 0 0 8px 0 !important;
      }

      .tag-sub {
          text-align: center !important;
          width: 100% !important;
          margin: 0 !important;
      }

      /* Vertical stack layout for the metrics row */
      .custom-stats-row {
          flex-direction: column !important;
          gap: 25px !important;
          padding: 20px 0 !important;
      }
      
      .custom-photo-container {
          margin-top: 30px !important;
      }
  }

  /* --- GLOBAL LOGO OVERRIDES --- */
  /* Target the desktop logo to boost clarity of the tagline */
  .header__logo img,
  .logo-container img,
  .hs-logo-img,
  .logo img,
  .header-logo img,
  a.logo img,
  .custom-logo img {
      max-height: 70px !important; 
      width: auto !important;      
      transition: max-height 0.2s ease-in-out !important;
  }

  /* Target the mobile logo to scale up elegantly without breaking layout */
  @media (max-width: 768px) {
      .header__logo img,
      .logo-container img,
      .hs-logo-img,
      .logo img,
      .header-logo img,
      a.logo img,
      .custom-logo img {
          max-height: 52px !important; 
      }
  }
</style>