@charset "utf-8";
/* CSS Document */


    h1{ font-size: clamp(1.8rem, 4vw, 2.6rem); }
    h2{ font-size: 1.8rem; margin-bottom: .6rem; }
    h3{ font-size: 1.25rem; }

    

   

    /* Banner */ 
    .banner{
      height:520px;
      background: url('../images/musiki-banner.webp') center/cover no-repeat;
      display:flex;
      align-items:center;
      justify-content:center;
      color:white;
      text-align:center;
      position:relative;
      overflow:hidden;
      padding-top:40px;
    }

    .banner::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.6));
    }

    .banner h1{
      position:relative;
      padding:.8rem 1.4rem;
      font-weight:600;
      animation: fadeSlide 1.2s ease forwards;
      opacity:0;
    }
      
    

    @keyframes fadeSlide{
      from{ opacity:0; transform: translateY(20px); }
      to{ opacity:1; transform: translateY(0); }
    }

    .intro{
      text-align:center;
      margin-bottom:3.5rem;
      max-width:700px;
      margin-left:auto;
      margin-right:auto;
      opacity:0;
      transform: translateY(20px);
      transition: all .8s ease;
    }

    .pull-quote{
      font-family:"Playfair Display", serif;
      font-style: italic;
      font-size: clamp(1.15rem, 2.1vw, 1.55rem);
      line-height: 1.85;
      max-width: 760px;
      margin: 2.75rem auto;
      padding: 1.8rem 1.8rem;
      position: relative;
      text-align: center;
    }

    .pull-quote::before,
    .pull-quote::after{
      position:absolute;
      font-size:5rem;
      color: rgba(0,0,0,0.08);
      font-family:"Playfair Display", serif;
      line-height:1;
      pointer-events:none;
    }

    .pull-quote::before{ content:"\201C"; top:-8px; left:6px; }
    .pull-quote::after{ content:"\201D"; bottom:-36px; right:6px; }

    .pull-quote span{
      display:block;
      margin-top:1.2rem;
      font-family: Inter, system-ui, sans-serif;
      font-style: normal;
      text-transform: uppercase;
      letter-spacing: .18em;
      color:#666;
      font-size:.85rem;
    }

 /* =============================
   INTRO SECTION
============================= */

.intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-bottom:3rem;
}

.card{
  background:#fff;
  padding: 2.25rem 2.25rem 2rem;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

.card h2, .card h3{
  margin: 0 0 var(--space-1);
  line-height: 1.2;
}

.card p{
  margin: 0;
  color: rgba(34,34,34,.82);
}


      
    /* MEDIA CARDS */
    .grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
      gap:2rem;
    }

   


/* =============================
      MOBILE BANNER
    ============================= */
    @media (max-width: 820px){
      .banner{ min-height:220px; height:auto; padding:3rem 1rem; }
}