/* =============================
       BASICS
    ============================== */
    body { font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

    /* =============================
       HERO (title + location)
    ============================== */
    .hero-banner { position: relative; }

    /* keep your slide sizing behavior, but let the content breathe */
    .slide.hero-banner { height: 50vh; }

    .hero-banner .background {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      z-index: 0;
    }

    /* overlay so text is readable regardless of the photo */
    .hero-banner::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        rgba(0,0,0,0.62) 0%,
        rgba(0,0,0,0.35) 55%,
        rgba(0,0,0,0.10) 100%
      );
      z-index: 1;
    }

    .hero-banner .content {
      position: relative;
      z-index: 2;
      padding: 3rem 1.25rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
.hero-banner .overlay {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;

  display: flex;
  flex-direction: column;
  gap: 1rem;              /* space between blocks */
}

.hero-banner .block {
  /* shared style for each block */
}

.hero-banner .block--panel {
  background: rgba(0,0,0,0.55);
  padding: 1% 0%;
  border-radius: 10px;
  width:60%;
  margin:2% auto;
}


    .hero-banner h1 {
      margin: 0;
      color: #fff;
      font-weight: 500;
      letter-spacing: 0.2px;
      font-size: clamp(2rem, 3.2vw, 3.4rem);
      line-height: 1.08;
      text-shadow: 0 2px 18px rgba(0,0,0,0.55);
      margin-top: 1rem;
    }

    .hero-banner h2 {
      margin: 0.75rem 0 0;
      color: rgba(255,255,255,0.92);
      font-weight: 300;
      font-size: clamp(1.1rem, 1.6vw, 1.6rem);
      text-shadow: 0 2px 14px rgba(0,0,0,0.55);
    }

    /* =============================
       ACTION BANNER (Explore buttons)
    ============================== */
    .action-banner {
      background: rgba(218, 250, 224, 0.85);
      padding: 1.25rem 0 1.75rem;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.25rem;
    }

    .section-title {
      color: #896900;
      margin: 0 0 1rem;
      font-weight: 1500;
      font-size: 1.9rem;
    }

    .action-row {
      display: flex;
      gap: 1.25rem;
      align-items: stretch;
      flex-wrap: wrap;
    }

    .action-btn {
      flex: 1 1 240px;
      text-align: center;
      padding: 1.15rem 1rem;
      background: #896900;
      text-decoration: none;
      border-radius: 6px;
      transition: background 0.2s ease;
      font-size:170%;
      font-family: baskerville, serif;
      font-weight: 200;
    }

    .action-btn:hover { background: #a88300; }

    /* =============================
       CAROUSEL BANNER (Activities)
       Key: NO overflow-x:auto, no scrollbar
    ============================== */
    .carousel-banner {
      background: rgba(218, 250, 224, 0.85);
      padding: 1.5rem 0 2.25rem;
    }

    .carousel-shell {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color:#896900;
    }

    /* viewport hides overflow (no scrollbar) */
    .carousel-viewport {
      width: 100%;
      overflow: hidden;
      position: relative;
      touch-action: pan-y; /* allow page vertical scroll; we handle horizontal dragging */
    
    }

    /* track moves via transform */
    .carousel-track {
      display: flex;
      gap: 1.25rem;
      will-change: transform;
      transition: transform 420ms ease;
      transform: translateX(0px);
    }

    .project-card {
      flex: 0 0 360px;
      padding: 1.75rem 1.5rem;
      background: rgba(234, 241, 236);
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 10px 18px rgba(0,0,0,0.12);
      font-size: 1.35rem;
      font-weight: 400;
      color:#896900;
    }

    .measured{ 
      max-width: 70%; 
    }
    .project-card .thumb {
      width: 100%;
      height: 180px;
      overflow:hidden;
      border-radius: 8px;
    }

    .project-card .thumb img{
      width: 100%;
      height: 100%;
      object-fit:contain;
      background:rgba(234, 241, 236);
    }

    /* Arrow buttons (no weird glyph boxes, real buttons) */
    .car-btn {
      appearance: none;
      -webkit-appearance: none;
      border: 0;
      background: rgba(0,0,0,0.55);
      color: #fff;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      line-height: 1;
      user-select: none;
    }

    .car-btn:hover { background: rgba(0,0,0,0.72); }
    .car-btn:active { transform: translateY(1px); }

    /* keep arrows from drifting into layout weirdness */
    .car-btn:focus { outline: 2px solid rgba(137,105,0,0.75); outline-offset: 2px; }

    /* Mobile: hide arrows, swipe only; cards become wider */
    @media (max-width: 800px) {
      .car-btn { display: none; }
      .project-card { flex-basis: 84vw; }
      .section-title { font-size: 1.6rem; }
    }

    /* Just in case slides.css sets scrollbars on everything */
    .carousel-viewport::-webkit-scrollbar { display: none; }