/* ============================= */
/* GOOGLE FONTS */
/* ============================= */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&family=Tinos:wght@400;700&display=swap');

/* ============================= */
/* ROOT VARIABLES */
/* ============================= */

:root {
  --primary: #D4B06A;
  --accent: #C7A892;
  --bg: #FDF9F2;
  --surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --text: #4A4038;
  --text-mid: #6B5A4C;
  --muted: #8A7A6C;
  --border: #EFE4D3;
  --dark-bg: #3E3226;
  --card-radius: 18px;
  --pill-radius: 999px;
}

/* ============================= */
/* RESET */
/* ============================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================= */
/* BODY */
/* ============================= */

body {
  font-family: 'Tinos', serif;
  color: var(--text);
  line-height: 1.7;
  background: var(--bg) url("../images/floral-lily-tile.png") repeat;
  background-size: 380px 380px;
  padding-top: 80px;
}

/* Desktop header renders ~103px tall, taller than the 80px mobile offset;
   bump clearance so the fixed header doesn't clip the top of the carousel. */
@media (min-width: 769px) {
  body {
    padding-top: 112px;
  }
}

/* ============================= */
/* TYPOGRAPHY */
/* ============================= */

h1, h2 {
  font-family: "Raleway", sans-serif;
}

h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 20px;
}

h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

p {
  font-size: 17px;
  margin-bottom: 18px;
}

strong {
  color: var(--primary);
}

/* ============================= */
/* GLOBAL SECTIONS */
/* ============================= */

section {
  padding: 20px 10%;
  max-width: 1200px;
  margin: auto;
}

/* ============================= */
/* NAVIGATION */
/* ============================= */

nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  padding: 10px;
  font-size: larger;
}

nav a:hover {
  color: var(--accent);
}

/* === CAROUSEL === */
.carousel {
  width: 100%;
  background: #faf6f0; /* warm cream background matching the screenshot */
  padding: 2rem;
  box-sizing: border-box;
}

.slides {
  width: 100%;
}

/* === SLIDE: image is the full container, card overlays on top === */
.slide {
  display: none;
  position: relative; /* card will be positioned relative to this */
  border-radius: 12px;
  overflow: hidden;
  max-width: 1140px;
  margin: 0 auto;
}

.slide.active {
  display: block;
}

/* === IMAGE fills the slide === */
.slide-image {
  width: 100%;
  height: 560px; /* desktop height */
}

.slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

/* === CARD overlays bottom-left of the image === */
.slide-card {
  position: absolute;
  bottom: 2.5rem;
  left: 2rem;
  width: 55%;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 2rem 2.5rem;
  box-sizing: border-box;
}

.slide-card h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #b8973a; /* gold color from the screenshot */
  margin: 0 0 1rem 0;
}

.slide-card p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #3a3530;
  margin: 0;
}

/* === MOBILE === */
@media (max-width: 768px) {
 .carousel {
  padding: 9rem 1rem 1rem 1rem; /* top right bottom left */
}

  .slide-image {
    height: 480px; /* slightly shorter on mobile */
  }

  .slide-card {
    width: calc(100% - 2rem); /* nearly full width */
    left: 1rem;
    right: 1rem;
    bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
  }

  .slide-card h2 {
    font-size: 1.25rem;
  }

  .slide-card p {
    font-size: 0.95rem;
  }
}

/* ============================= */
/* PAGE CONTAINER RHYTHM         */
/* ============================= */

.hero-banner,
.approach,
.cards-section,
.impact-section,
.two-col {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding-left: 24px;
  padding-right: 24px;
}

/* ============================= */
/* HERO BANNER                   */
/* ============================= */

.hero-banner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
  margin-top: 2.5rem;
  box-shadow: 0 10px 30px rgba(74, 64, 56, 0.06);
}

.hero-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.hero-banner h1 {
  font-family: 'Raleway', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.3;
  margin-bottom: 1.25rem;
}

.hero-banner p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

.hero-banner em {
  font-style: italic;
  color: var(--text);
  font-weight: 700;
}

.hero-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--pill-radius);
  border: 1.5px solid var(--primary);
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s;
}

.hero-cta:hover {
  background: rgba(212, 176, 106, 0.08);
}

/* ============================= */
/* APPROACH                      */
/* ============================= */

.approach {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem 2.5rem;
  box-shadow: 0 10px 30px rgba(74, 64, 56, 0.05);
}

.approach-intro {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.approach-intro h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0;
}

.approach-intro a {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  padding: 8px 16px;
  border-radius: var(--pill-radius);
  transition: background 0.2s, color 0.2s;
}

.approach-intro a:hover {
  background: var(--accent);
  color: #fff;
}

.approach-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  margin-bottom: 0.75rem;
}

.approach-item p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
  margin-bottom: 0;
}

.excutive-summary {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  text-decoration: none;
  border: 1px solid var(--accent);
  padding: 8px 16px;
  border-radius: var(--pill-radius);
  transition: background 0.2s, color 0.2s;
}

.excutive-summary:hover {
  background: var(--accent);
  color: #fff;
}

/* ============================= */
/* CARDS                         */
/* ============================= */

.cards-section {
  padding-top: 0.5rem;
}

.section-label {
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.25rem;
  text-align: center;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--card-radius);
  padding: 1.5rem 1.5rem 1.75rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(74, 64, 56, 0.09);
  border-color: var(--primary);
}

.card-icon {
  font-size: 24px;
  color: var(--primary);
  margin-bottom: 0.7rem;
}

.card h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 0;
}

/* ============================= */
/* IMPACT                        */
/* ============================= */

.impact-section {
  background: var(--dark-bg);
  border-radius: var(--card-radius);
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
  color: var(--bg);
}

.impact-section h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.stat-num {
  font-family: 'Raleway', sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-label {
  font-size: 16px;
  color: var(--accent);
  margin-bottom: 1.75rem;
}

.facility-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 176, 106, 0.35);
  border-radius: var(--pill-radius);
  padding: 6px 16px;
  font-size: 13px;
  color: var(--accent);
}

/* ============================= */
/* TWO-COLUMN                    */
/* ============================= */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.col-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 1.75rem 2rem;
  box-shadow: 0 10px 30px rgba(74, 64, 56, 0.05);
}

.col-card h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.col-card ul {
  list-style: none;
}

.col-card li {
  font-size: 15px;
  color: var(--text-mid);
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.6;
}

.col-card li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
  flex-shrink: 0;
}

.coming-soon {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  text-align: center;
  margin-top: 0.75rem;
}

/* ============================= */
/* RESPONSIVE                    */
/* ============================= */

@media (max-width: 768px) {
  .hero-banner,
  .approach,
  .cards-section,
  .impact-section,
  .two-col {
    padding-left: 18px;
    padding-right: 18px;
    margin-bottom: 1.75rem;
  }

  .hero-banner {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .hero-banner h1 {
    font-size: 26px;
  }

  .approach {
    grid-template-columns: 1fr;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .stat-num {
    font-size: 42px;
  }
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------
Desktop view
------------------------------- */

/* Botanical corner accents (decorative only) — anchored just below the
   carousel, subtle, behind the content. Absolute (not fixed) so they scroll
   with the page. The carousel is opaque and sits on top of anything placed
   higher than its own height, so these must clear it to be visible at all. */
.corner {
  position: absolute;
  top: 640px;
  width: 220px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
  padding: 5px;
}

.corner--tl { left: 0; }
.corner--tr { right: 0; }

@media (max-width: 768px) {
  .corner { width: 160px; top: 560px; }
}