:root {
  --bg: #ffffff;
  --bg-muted: #f5f5f5;
  --card: #ffffff;
  --text-main: #000000;
  --text-muted: #666666;
  --accent: #000000;
  --accent-soft: #e5e5e5;
  --border-subtle: #d0d0d0;
  --radius-lg: 18px;
  --radius-full: 999px;
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.1);
  --font-main: "Cormorant Garamond", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  font-size: 22px;
  /* Base size increase */
}

body {
  font-family: var(--font-main);
  background: radial-gradient(circle at top left, #ffffff, #f5f5f5);
  color: var(--text-main);
  line-height: 1.6;
  font-weight: 400;
  width: 100%;
}

h1,
h2,
h3,
.hero-subtitle,
.eyebrow {
  font-family: var(--font-main);
  font-style: italic;
  font-weight: 400;
}

/* Layout */

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container.narrow {
  max-width: 680px;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.98),
      rgba(255, 255, 255, 0.9));
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0;
}

.logo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.logo img {
  height: 3.2rem;
  width: auto;
  display: block;
  margin-top: 4px;
  /* Visual correction */
}

.nav {
  display: flex;
  gap: 0.6rem;
}

.nav-link {
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--text-muted);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
}

.nav-link.active {
  background: var(--accent);
  color: #ffffff;
}

/* Hero */

.hero {
  position: relative;
  padding: 3.2rem 0 3rem;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.hero h1 {
  font-size: clamp(2.4rem, 4vw, 3rem);
  margin: 0 0 0.75rem;
}

.hero-logo {
  margin: 0 0 0.75rem;
}

.hero-logo img {
  height: clamp(8rem, 18vw, 14rem);
  width: auto;
  display: block;
}



.hero-subtitle {
  margin: 0 auto 1.6rem;
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

#three-container {
  width: 100%;
  height: 500px;
  position: relative;
  z-index: 10;
}

.hero-visuals {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* .meditation-card removed */

.hero-overlay-logo {
  position: relative;
  margin-top: -2rem;
  /* margin-left: -2rem; User added this, keeping it or removing? Better to let flexbox handle horizontal. Removing for clean slate, user can add back if needed. */
  z-index: 20;
  /* width: 100%;  Removed to allow parent flex-end to work */
  display: flex;
  /* justify-content: center; Removed so it doesn't force center */
  pointer-events: none;
}

.hero-overlay-logo img {
  width: 80%;
  max-width: 400px;
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

.mobile-only {
  display: none;
}

.desktop-only {
  display: flex;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0;
  /* Minimal padding */
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.2rem;
  /* Larger font */
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  /* Subtle underline */
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  letter-spacing: 0.02em;
  background: transparent;
  color: #333;
}

.btn:hover {
  border-bottom-color: #000;
  color: #000;
}

.btn-primary,
.btn-ghost {
  /* Reset specific button styles */
  background: transparent;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.btn-primary:hover,
.btn-ghost:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
  border-bottom-color: #000;
  color: #000;
}

/* Hero card */

.hero-card {
  background: linear-gradient(135deg, #ffffff, #f5f5f5);
  border-radius: 22px;
  padding: 1.5rem 1.4rem 1.4rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.15);
}

.hero-card-title {
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.hero-card-text {
  margin: 0 0 0.85rem;
  font-size: 0.94rem;
  color: var(--text-muted);
}

.hero-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.94rem;
}

/* Sections */

.section {
  padding: 3rem 0;
}

.section-muted {
  background: #ffffff;
  /* Unified white background */
}

.section-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 2.4rem;
  align-items: flex-start;
}

.section h2 {
  margin-top: 0;
  margin-bottom: 0.7rem;
}

/* Bullet grid */

.section-header-center {
  text-align: center;
  /* Kept left aligned as per screenshot usually, or center if requested. User said "title and under it description". Let's assume left aligned but stacked based on screenshot context usually, but "calmly and simply" screenshot shows left align. Wait, the screenshot provided earlier (Step 112) shows left aligned text. */
  max-width: 600px;
  margin: 0 auto 3rem;
}

.section-header-center h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.section-header-center p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* Bullet grid */

.bullet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* Responsive 3 columns */
  gap: 1.5rem;
}

.bullet {
  background: #ffffff;
  border-radius: 22px;
  /* Match other cards */
  padding: 1.75rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.95rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.bullet:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}

.bullet h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Footer */

.site-footer {
  padding: 1.6rem 0 2rem;
  background: #f5f5f5;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 2.5rem;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.87rem;
  color: var(--text-muted);
}

.footer-link {
  text-decoration: none;
  color: var(--text-main);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/* Simple page wrapper (for other pages later) */

.page {
  min-height: calc(100vh - 160px);
}

/* Responsive */

@media (max-width: 768px) {

  .hero-inner,
  .hero-inner-new,
  .section-split,
  .footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    padding: 2.5rem 0;
  }

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

  .hero-card {
    order: -1;
  }

  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 0;
  }

  .nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hero-text {
    text-align: center;
  }

  .hero-logo img {
    margin-left: auto;
    margin-right: auto;
    height: 12rem;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-inner-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    width: 100%;
  }

  .hero-text-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .hero-actions {
    width: 100%;
    justify-content: center;
  }

  .mobile-only {
    display: flex;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 1.5rem 0;
    width: 100%;
    justify-content: center;
  }

  .mobile-only img {
    width: 90%;
    max-width: 350px;
    opacity: 1;
  }

  .desktop-only {
    display: none !important;
  }
}

/* Calendar styling */

.calendar-shell {
  margin: 1.75rem auto 2.25rem;
  max-width: 1000px;
  /* wider on desktop */
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: radial-gradient(circle at top,
      #ffffff,
      #f5f5f5);
  padding: 0.75rem;
}

.calendar-frame {
  width: 100%;
  height: 400px;
  /* a bit taller */
  border: 0;
  display: block;
}

/* Make sure it still looks good on small screens */
@media (max-width: 768px) {
  .calendar-shell {
    max-width: 100%;
    margin: 1.5rem 0 2rem;
    border-radius: 18px;
    padding: 0.5rem;
  }

  .calendar-frame {
    height: 400px;
  }
}

/* Info Card */

.info-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
}

.info-card h3 {
  margin-top: 0;
  font-size: 1.25rem;
}

.info-card ol {
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
}

.info-card li {
  margin-bottom: 0.5rem;
}

/* CTA Card */

.cta-card {
  background: var(--accent);
  color: white;
  border-radius: 22px;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.cta-card-circle {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 1;
}

.cta-title {
  color: white;
  margin-bottom: 1rem;
}

.cta-text {
  color: rgba(255, 255, 255, 0.9);
  max-width: 500px;
  margin: 0 auto 2rem;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-white,
.btn-outline-white {
  background: transparent;
  color: white;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

.btn-white:hover,
.btn-outline-white:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
  border-bottom-color: white;
  color: white;
}

/* Organizers / team layout */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.team-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.3rem 1.2rem 1.2rem;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  font-size: 0.95rem;
}

.avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 30% 20%, #e5e5e5, #cccccc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #000000;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.team-name {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.team-role {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.team-bio {
  margin: 0;
  color: var(--text-main);
  line-height: 1.5;
}

/* Lotus Section */

.lotus-section-wrapper {
  background-color: #ffffff;
  /* Unified white background */
  /* overflow: hidden; Removed to allow monk to extend down */
  padding: 4rem 0;
  display: flex;
  justify-content: center;
}

.lotus-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 auto;
}

.lotus-monk {
  position: absolute;
  z-index: 50;
  height: 350px;
  width: auto;
  bottom: -70px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

.lotus-petal {
  position: absolute;
  bottom: 40px;
  transform-origin: 50% 100%;
  transition: all 0.3s ease;
  filter: hue-rotate(210deg) saturate(0.8) brightness(1.2);
  /* Shift to blue */
}

/* Center - Darkest */
.petal-center {
  z-index: 10;
  height: 450px;
}

/* Middle - Light */
.petal-middle {
  z-index: 9;
  height: 420px;
}

/* Outer - Lightest */
.petal-outer {
  z-index: 8;
  height: 380px;
}

/* Rotations */
.rot-0 {
  transform: rotate(0deg);
}

.rot-pos-1 {
  transform: rotate(calc(var(--lotus-progress, 1) * 35deg)) translateX(calc(var(--lotus-progress, 1) * 15px));
}

.rot-neg-1 {
  transform: rotate(calc(var(--lotus-progress, 1) * -35deg)) translateX(calc(var(--lotus-progress, 1) * -15px));
}

.rot-pos-2 {
  transform: rotate(calc(var(--lotus-progress, 1) * 75deg)) translateX(calc(var(--lotus-progress, 1) * 30px)) translateY(calc(var(--lotus-progress, 1) * 15px));
}

.rot-neg-2 {
  transform: rotate(calc(var(--lotus-progress, 1) * -75deg)) translateX(calc(var(--lotus-progress, 1) * -30px)) translateY(calc(var(--lotus-progress, 1) * 15px));
}

/* =========================================
   New Layout Styles (Replication)
   ========================================= */

.hero-new {
  position: relative;
  min-height: 100vh;
  background-image: url('images/alessio-soggetti-KQXeabDx7dI-unsplash.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  color: #333;
  /* Default text color, adjust based on bg */
  /* justify-content: center; Removed to fix alignment */
  text-align: center;
  /* Center text */
}

.hero-content-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2 columns */
  gap: 2rem;
  align-items: center;
  max-width: 1200px;
  /* Increased max-width for 2 columns */
  margin: 0 auto;
  padding: 0 2rem;
  text-align: left;
  /* Align text to left */
}

.hero-text-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Align items to start (left) */
}

.hero-logo-column {
  display: flex;
  justify-content: flex-end;
  /* Move logo to the right */
  align-items: center;
  padding-right: 2rem;
  /* Add some padding from the edge */
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.eyebrow,
.hero-subtitle {
  /* text-shadow removed */
  color: #333;
  /* Ensure dark text */
}

.hero-subtitle {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  font-weight: 400;
  /* Unbolden text */
}

/* Gradient Fade at bottom */
.hero-new::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  /* Increased height for smoother blend */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  backdrop-filter: blur(2px);
  /* Slight blur for the "blur and blend" effect */
  pointer-events: none;
}

.hero-inner-new {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  position: relative;
  z-index: 10;
  padding-top: 2rem;
}

.hero-text-new {
  position: relative;
  z-index: 20;
}

/* New Header */
.site-header-new {
  padding: 1.5rem 0;
  width: 100%;
  z-index: 100;
}

.header-inner-new {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.logo-new img {
  height: 3.5rem;
  /* Adjust to match screenshot */
  width: auto;
  display: block;
}

.nav-new {
  display: flex;
  gap: 2.5rem;
}

.nav-link-new {
  text-decoration: none;
  color: #555;
  /* Softer dark text */
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: italic;
  /* Italic for a more organic feel */
  font-size: 1.1rem;
  /* Slightly larger for readability */
  letter-spacing: 0.02em;
  padding: 0.2rem 0;
  /* Minimal padding */
  border-bottom: 1px solid transparent;
  /* Prepare for border transition */
  transition: all 0.3s ease;
}

.nav-link-new:hover {
  color: #000;
  border-bottom-color: #000;
}

.nav-link-new.active {
  color: #000;
  border-bottom-color: #000;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.btn-donate {
  border: 1px solid #333;
  background: transparent;
  color: #333;
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  /* Rectangular with slight radius as per screenshot */
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-donate:hover {
  background: #333;
  color: #fff;
}

.search-icon {
  color: #333;
  font-size: 1.2rem;
}

/* Hero Content */
.hero-content-new {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-bottom: 4rem;
  /* Space at bottom */
  z-index: 1;
  /* Ensure content is above gradient if needed, though gradient is at bottom */
}

.hero-text-new {
  max-width: 500px;
  padding-right: 2rem;
}

.hero-text-new h1 {
  font-size: 3.5rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  font-weight: 400;
  color: #555;
  /* Dark grey */
}

.hero-text-new p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 2rem;
}

.btn-learn-more {
  border: 1px solid #333;
  background: transparent;
  color: #333;
  padding: 0.8rem 2rem;
  border-radius: 0;
  /* Square buttons in screenshot? Or slight radius. Let's go with square-ish */
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.btn-learn-more:hover {
  background: #333;
  color: #fff;
}

.hero-overlay-logo {
  position: absolute;
  right: -10%;
  /* Moved further right to avoid text overlap */
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.9;
  pointer-events: none;
  /* Let clicks pass through if needed */
}

.hero-overlay-logo img {
  max-width: 500px;
  /* Large overlay */
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  /* Make it white if it's black, or adjust blending */
  /* The screenshot shows white text "Wake Up London". 
  /* The screenshot shows white text "Wake Up London".
     If the logo image is black, we need to invert it.
     If it's colored, we might need to adjust.
     Let's assume we need it White for now based on the "Wake Up London" text in screenshot. */
}

/* =========================================
   Mobile Responsiveness
   ========================================= */

@media (max-width: 768px) {

  /* Header */
  .header-inner-new {
    flex-direction: column;
    gap: 1rem;
  }

  .info-card .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 0.5rem;
  }

  .header-left {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-new {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.0rem;
  }

  /* Hero */
  .hero-new {
    min-height: auto;
    /* Allow natural height on mobile */
  }

  .hero-content-new {
    padding-top: 2rem;
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .hero-content-inner {
    display: flex;
    flex-direction: column;
    /* Standard column direction */
    text-align: center;
    gap: 1rem;
    /* Reduced gap for tighter layout */
    width: 100%;
  }

  .hero-text-column {
    display: contents;
    /* Unwrap the column to allow reordering children */
  }

  /* Reordering */
  .eyebrow {
    order: 1;
    width: 100%;
    text-align: center;
    text-indent: 0.16em;
    /* Counteract letter-spacing for visual center */
  }

  .hero-logo-column {
    order: 2;
    width: 100%;
    justify-content: center;
    /* Center logo on mobile */
    padding-right: 0;
    /* Reset desktop padding */
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    order: 3;
    width: 100%;
    text-align: center;
  }

  .hero-actions {
    order: 4;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hero-actions .btn {
    width: fit-content;
    max-width: 300px;
    white-space: normal;
    text-align: center;
    height: auto;
    /* Allow height to grow with text */
    padding: 0.8rem 1.5rem;
  }

  .hero-text-new h1 {
    font-size: 3rem;
    /* Increased mobile font size */
  }

  .hero-overlay-logo {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin: 0 auto 0.5rem;
    /* Reduced top margin to move logo up */
    /* Center the container with spacing */
    opacity: 0.9;
    /* Increased opacity */
    width: 95%;
    /* Increased width percentage */
    max-width: 550px;
    /* Increased max-width */
    min-width: 350px;
    /* Prevent shrinking too much */
    display: block;
  }

  .hero-overlay-logo img {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .eyebrow {
    font-size: 0.9rem;
  }

  /* Lotus */
  .lotus-container {
    transform: scale(0.6);
    /* Scale down */
    transform-origin: bottom center;
    height: 350px;
    /* Reduce container height to match scale */
    margin-bottom: -50px;
    /* Adjust spacing */
  }

  .lotus-section-wrapper {
    padding: 2rem 0 6rem;
    /* Increased bottom padding */
    overflow: visible;
    /* Allow monk to stick out */
  }

  .events-intro h1 {
    font-size: 2.5rem;
    /* Keep mobile title reasonable */
  }
}

/* Events Page Intro */
.events-intro {
  background-image: url('images/groundcircle.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  padding: 3rem 0;
  /* Reduced padding */
  /* Mask removed as requested */
}

.events-intro h1 {
  font-size: 3rem;
  /* Reduced title size */
}