<!-- components/home-hero-microsite/home-hero-microsite.twig -->
<header class="home-hero-microsite">

    
    <div class="home-hero-microsite-inner">

        <div class="home-hero-microsite-logo">
        <img src="/images/microsite/logo-conference-2027-white.svg" alt="Logo for Conference 2027">
        </div>

                <div class="home-hero-microsite-content">

                        <div class="home-hero-microsite-text wysiwyg-content">
                <p>For the first time, ASCE, its institutes, and the Center for Technical Advancement’s divisions will unite to address global challenges—from megatrends and extreme weather to resilience, leadership, and the future of the built environment.</p>
            </div>
            
                        <div class="home-hero-microsite-button">
                <a class="btn -white" href="#">Sign Up for Updates</a>
            </div>
            
        </div>
        
    </div>
</header>

<!-- components/interior-hero-microsite/interior-hero-microsite.twig -->
<header class="interior-hero-microsite">

    
    <div class="interior-hero-microsite-inner">
        <h1 class="h1">Lorem ipsum dolor sit</h1>
                <div class="interior-hero-microsite-text wysiwyg-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
        </div>
        
        <!-- components/breadcrumbs/breadcrumbs.twig -->
<nav class="breadcrumbs">
  <ul class="breadcrumbs-list">
    <li class="breadcrumbs-list-item"><a href="/" class="breadcrumbs-list-item-link icon-home"><span class="sr-text">Home</span></a></li>
          <li class="breadcrumbs-list-item">
        
        <a
          class="breadcrumbs-list-item-link -has-dropdown"
          href="#">
          Section Name
        </a>
                  <button class="breadcrumbs-list-item-arrow icon-chevron" tabindex="-1"><span class="sr-text">toggle dropdown</span></button>
          <ul class="breadcrumbs-list-item-dropdown">
                          <li>
                <a href="#">1:1</a>
              </li>
                          <li>
                <a href="#">1:2</a>
              </li>
                          <li>
                <a href="#">1:3</a>
              </li>
                      </ul>
              </li>
          <li class="breadcrumbs-list-item">
        
        <a
          class="breadcrumbs-list-item-link -has-dropdown"
          href="#">
          Section Name
        </a>
                  <button class="breadcrumbs-list-item-arrow icon-chevron" tabindex="-1"><span class="sr-text">toggle dropdown</span></button>
          <ul class="breadcrumbs-list-item-dropdown">
                          <li>
                <a href="#">2:1</a>
              </li>
                          <li>
                <a href="#">2:2</a>
              </li>
                          <li>
                <a href="#">2:3</a>
              </li>
                          <li>
                <a href="#">2:4</a>
              </li>
                      </ul>
              </li>
      </ul>
</nav>

    </div>

</header>

<!-- components/site-header-microsite/site-header-microsite.twig -->
<header class="site-header-microsite -logged-in">

  
  <nav class="site-header-microsite-nav" aria-label="Main Site Navigation">
    <div class="site-header-microsite-logo-meta">
      <a href="/" class="site-header-microsite-logo">
        <img src="/images/microsite/logo-conference-2027.svg" alt="Logo for Conference 2027" class="site-header-microsite-logo-img">
        <img src="/images/microsite/logo-conference-2027-white.svg" alt="Logo for Conference 2027" class="site-header-microsite-logo-img-white">
      </a>
      <div class="site-header-microsite-meta">
        <p>March 1–5, 2027</p>
        <p>Philadelphia</p>
      </div>
    </div>
    <div class="site-header-microsite-nav-wrapper">

      <ul class="site-header-microsite-utility-nav" aria-role="Navigation">

        
        <li class="site-header-microsite-utility-nav-item -main-site"><a href="https://www.asce.org"><span>ASCE.org</span></a></li>

        
                  <li class="site-header-microsite-utility-nav-item -submissions"><a href="#"><span>Call for Submissions</span></a></li>
        
        
          <li class="site-header-microsite-utility-nav-btn -left-btn">

            <button
              type="button"
              class="site-header-microsite-utility-nav-link js-site-header-dropdown-toggle"
              aria-expanded="false"
              aria-controls="site-header-dropdown-jane"
              data-dropdown="true"
            >Jane</button>

            <div
              id="site-header-microsite-dropdown-jane"
              class="site-header-microsite-dropdown js-site-header-dropdown"
              aria-hidden="true"
            >
              <ul class="site-header-microsite-dropdown-link-list">
                                  <li><a href="#" class="-underline">Manage my account</a></li>
                                  <li><a href="#" class="-underline">Logout</a></li>
                              </ul>
            </div>

          </li>
          <li class="site-header-microsite-utility-nav-btn -right-btn">
            <a
              href="#"
              class="site-header-microsite-utility-nav-link"
            >
              <span>Register</span>
            </a>
          </li>

        
      </ul>

      <ul class="site-header-microsite-main-nav">
                  <li class="site-header-microsite-main-nav-item">

            
              <button
                type="button"
                class="site-header-microsite-main-nav-item-link js-site-header-dropdown-toggle"
                aria-expanded="false"
                aria-controls="site-header-dropdown-program"
                data-dropdown="true"
              >Program</button>

              <div
                id="site-header-microsite-dropdown-program"
                class="site-header-microsite-dropdown js-site-header-dropdown"
                aria-hidden="true"
              >
                <ul class="site-header-microsite-dropdown-link-list">
                                      <li><a href="#" class="-underline">Call for content</a></li>
                                      <li><a href="#" class="-underline">Schedule</a></li>
                                      <li><a href="#" class="-underline">Speakers</a></li>
                                  </ul>
              </div>

            
          </li>
                  <li class="site-header-microsite-main-nav-item">

            
              <button
                type="button"
                class="site-header-microsite-main-nav-item-link js-site-header-dropdown-toggle"
                aria-expanded="false"
                aria-controls="site-header-dropdown-attend"
                data-dropdown="true"
              >Attend</button>

              <div
                id="site-header-microsite-dropdown-attend"
                class="site-header-microsite-dropdown js-site-header-dropdown"
                aria-hidden="true"
              >
                <ul class="site-header-microsite-dropdown-link-list">
                                      <li><a href="#" class="-underline">Why attend</a></li>
                                      <li><a href="#" class="-underline">Hotel & travel</a></li>
                                      <li><a href="#" class="-underline">Scholarships</a></li>
                                      <li><a href="#" class="-underline">Onsite services</a></li>
                                      <li><a href="#" class="-underline">Health, inclusion & safety</a></li>
                                  </ul>
              </div>

            
          </li>
                  <li class="site-header-microsite-main-nav-item">

                          <a class="site-header-microsite-main-nav-item-link" href="#">Sponsors</a>
            
          </li>
                  <li class="site-header-microsite-main-nav-item">

                          <a class="site-header-microsite-main-nav-item-link" href="#">Exhibitors</a>
            
          </li>
              </ul>
    </div>
  </nav>

</header>

<!-- components/mobile-header/microsite/mobile-header-microsite.twig -->
<header class="mobile-header-microsite">
  <div class="mobile-header-microsite-inner">
    <a href="/" class="mobile-header-microsite-logo">
      <img src="/images/microsite/logo-conference-2027.svg" alt="Microsite Logo" class="mobile-header-microsite-logo-img">
      <img src="/images/microsite/logo-conference-2027-white.svg" alt="Microsite Logo" class="mobile-header-microsite-logo-img-white">
    </a>
    <div class="mobile-header-microsite-nav">

              <a href="#" class="btn -small">Login</a>
      
      <button type="button" class="mobile-menu-microsite-trigger js-mobile-menu-microsite-toggle">
        <span class="sr-text">Mobile Menu</span>
      </button>

    </div>
  </div>
</header>

<!-- components/mobile-menu-microsite/mobile-menu-microsite.twig -->
<div class="mobile-menu-microsite" aria-hidden="true">

  <div class="mobile-menu-microsite-inner">

    <div class="mobile-menu-microsite-cta">
      <a href="#" class="btn -white">Register</a>
    </div>

    <div class="mobile-menu-microsite-text-cta">
      <a href="#" class="-arrow-link -white">Call for submissions</a>
    </div>

    <div class="accordion">

      <ul class="accordion-items">
        
          
            <li class="accordion-item" data-expanded="false">

              <button
                id="accordion--1"
                class="accordion-trigger"
                aria-expanded="false"
                aria-controls="accordion-item--1"
              >Program</button>

              <div
                id="accordion-item--1"
                class="accordion-content"
                role="region"
                aria-labelledby="accordion--1"
                aria-hidden="true"
              >
                <ul class="site-header-microsite-accordion-link-list">
                                      <li><a href="#">Call for content</a></li>
                                      <li><a href="#">Schedule</a></li>
                                      <li><a href="#">Speakers</a></li>
                                  </ul>
              </div>
            </li>

          
        
          
            <li class="accordion-item" data-expanded="false">

              <button
                id="accordion--2"
                class="accordion-trigger"
                aria-expanded="false"
                aria-controls="accordion-item--2"
              >Attend</button>

              <div
                id="accordion-item--2"
                class="accordion-content"
                role="region"
                aria-labelledby="accordion--2"
                aria-hidden="true"
              >
                <ul class="site-header-microsite-accordion-link-list">
                                      <li><a href="#">Why attend</a></li>
                                      <li><a href="#">Hotel & travel</a></li>
                                      <li><a href="#">Scholarships</a></li>
                                      <li><a href="#">Onsite services</a></li>
                                      <li><a href="#">Health, inclusion & safety</a></li>
                                  </ul>
              </div>
            </li>

          
        
                      <li class="accordion-item">
              <a class="accordion-link" href="#">Sponsors</a>
            </li>
          
        
                      <li class="accordion-item">
              <a class="accordion-link" href="#">Exhibitors</a>
            </li>
          
              </ul>

    </div>

    <div class="mobile-menu-microsite-footer">

      
      <div class="mobile-menu-microsite-back">
        <a href="#">Back to ASCE.org</a>
      </div>

    </div>

  </div>
</div>

<footer class="site-footer site-footer-microsite">
  <div class="site-footer-inner">

    
    <div class="site-footer-microsite-main">

      
      <div class="site-footer-microsite-logo-meta">
        <a href="/" class="site-footer-microsite-logo">
          <img src="/images/microsite/logo-conference-2027.svg" alt="Logo for Conference 2027">
        </a>
        <div class="site-footer-microsite-meta">
          <p>March 1–5, 2027</p>
          <p>Philadelphia</p>
        </div>
      </div>

      
      <div class="site-footer-microsite-main-nav">
        <ul>
                  <li><a href="#">Program</a></li>
                  <li><a href="#">Attend</a></li>
                  <li><a href="#">Sponsors</a></li>
                  <li><a href="#">Exhibitors</a></li>
                </ul>
      </div>

    </div>

    
    <div class="site-footer-microsite-secondary">

      
      <div class="site-footer-microsite-copyright">
        <p>&copy; 2026 Conference 2027 American Society of Civil Engineers</p>
      </div>

      
      <div class="site-footer-microsite-links">
        <ul>
                      <li><a href="#">Code of Conduct</a></li>
                      <li><a href="#">Privacy</a></li>
                      <li><a href="#">Terms & Conditions</a></li>
                      <li><a href="#">Do not share my personal data</a></li>
                  </ul>
      </div>

    </div>

  </div>
</footer>