/* ==========================================================================
   Excyan custom overrides
   Loaded after the vendored `css/style.css` (see app/landing/layout.tsx) so
   these rules win the cascade while the template stylesheet itself stays
   untouched and diffable against template updates.
   ========================================================================== */

/* ==========================================================================
   Main Banner 1 (landing hero) — mobile (≤767px)
   The template pins the giant "Excyan" .banner-title to the bottom of a
   fixed-height banner. Once the two banner columns stack on mobile, the
   banner-content (headline + Contact Us button) grows down into that pinned
   title and the two overlap.

   Fix: the markup renders a mobile-only copy of the title
   (.banner-title-inline) inside .banner-content between the headline and the
   CTA, and the banner grows with its content. Mobile reading order becomes
   rotating badge → headline → "Excyan" → Contact Us button, so the button
   always sits below the Excyan text. The desktop copy of the title is hidden
   below 768px (d-none d-md-block) and this copy above (d-md-none), so the
   ≥768px layout is pixel-identical to the template.
   ========================================================================== */
@media (max-width: 767px) {
  .main-banner-1 {
    /* Grow with the stacked content instead of the template's fixed
       650px height (which is what forces the overlap). */
    height: auto;
    /* The template's 150px bottom padding is dead space on mobile once the
       title is in flow. */
    padding-bottom: 60px;
  }

  .main-banner-1 .banner-title-inline {
    /* Undo the template's absolute pinning (bottom/left + translateX). */
    position: static;
    transform: none;
    text-align: center;
    /* Breathing room between the giant title and the CTA below it. */
    margin: 0 0 30px;
  }
}