/* ==========================================================================
   BAHF — Bengaluru Arts & Health Festival
   Design tokens derived from the BAHF brand deck:
   Coral (energy/arts), Magenta (creativity), Yellow (joy),
   Teal/Mint (health/calm), Cream (paper/openness)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root{
  /* --- brand palette, pulled from the deck --- */
  --coral: #EA5C6A;
  --coral-deep: #D6414F;
  --magenta: #ED2B75;
  --yellow: #EDBF09;
  --teal: #00948C;
  --mint: #00DBA4;
  --peach: #FFCD98;
  --cream: #FFF8EF;
  --ink: #241522;
  --ink-soft: #5A4A56;
  --paper: #FFFDFA;

  /* --- type --- */
  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;

  /* --- rhythm --- */
  --radius: 22px;
  --radius-sm: 12px;
  --gap-section: clamp(1.6rem, 3vw, 3rem);
  --max-w: 1180px;
}

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

html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0 0 .5em; line-height:1.1; }
p{ margin:0 0 1em; color: var(--ink-soft); font-size: clamp(.85rem,1.05vw,.92rem); }

.wrap{ max-width: var(--max-w); margin:0 auto; padding: 0 1.5rem; }

/* justify only long-form prose blocks (intro text, bios, standalone paragraphs) —
   never inside compact cards/pills, where justify creates ugly gaps */
.card1 p,
.team-row-content p,
.wrap > p{
  text-align: justify; text-align-last: left;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: linear-gradient(120deg, var(--coral), var(--coral-deep));
  border-bottom: 1px solid rgba(0,0,0,.08);
  overflow-x: clip;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top: .9rem; padding-bottom:.9rem; flex-wrap:nowrap;
}
.header-right{ display:flex; align-items:center; gap:1rem; flex:1; min-width:0; }
.brand{ display:flex; align-items:center; gap:.7rem; font-family: var(--font-display); font-weight:700; font-size:1.15rem; flex-shrink:0; }
.logo-img{ height:100px; width:auto; display:block; }
.logo-img-footer{ height:74px; opacity:1; }
.footer-partner-logos{ display:flex; align-items:center; gap:1.1rem; margin-top:1rem; flex-wrap:wrap; }
.footer-partner-logos img{ height:50px; width:auto; max-width:150px; object-fit:contain; }
.brand-text small{ display:block; font-family: var(--font-body); font-weight:600; font-size:.68rem; letter-spacing:.03em; text-transform:none; color: #fff; max-width:15ch; line-height:1.3; }

/* tagline stacked under the logo, centred to it, on one line */
.brand-stacked{ flex-direction:column; align-items:center; gap:.25rem; flex-shrink:0; }
.brand-stacked .brand-text{ margin:0; text-align:center; }
.brand-stacked .brand-text small{ max-width:none; white-space:nowrap; font-size:clamp(.56rem,1.05vw,.66rem); line-height:1.4; opacity:.95; text-align:center; }

/* nav sits in line with the logo's wordmark, date/countdown cluster pinned to the right —
   everything on one row, no wrap (desktop) */
.home-header-right{ flex-wrap:nowrap; }
.header-top-row{ display:flex; align-items:center; gap:1.2rem; flex-wrap:nowrap; justify-content:flex-end; width:100%; margin-top:1.45rem; }
.header-date-cluster{ display:flex; flex-direction:column; align-items:center; gap:.4rem; flex-shrink:0; }
.header-date-stack{ display:flex; flex-direction:column; align-items:center; line-height:1.15; color:#fff; font-family: var(--font-body); }
.header-date-stack .hd-days{ font-size:1.05rem; font-weight:600; letter-spacing:.02em; }
.header-date-stack .hd-month{ font-family: var(--font-body); font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
.header-date-stack .hd-year{ font-family: var(--font-body); font-size:.68rem; font-weight:500; letter-spacing:.04em; }
.header-countdown{
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  background: #fff; border:none; color: var(--ink);
  font-weight:800; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.5rem .9rem; border-radius:4px;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.35);
}
.header-countdown .dot{ width:6px; height:6px; border-radius:50%; background:var(--coral-deep); flex-shrink:0; animation: pulse-dot 1.8s ease-in-out infinite; }
@media (max-width: 1080px){ .header-countdown{ font-size:.76rem; padding:.4rem .7rem; } }

nav.main-nav{ display:flex; align-items:center; flex:1; min-width:0; }
nav.main-nav ul{ display:flex; align-items:center; gap:1.1rem; flex-wrap:nowrap; }
nav.main-nav a{
  font-size:.88rem; font-weight:500; color: rgba(255,255,255,.85); position:relative; padding:.3rem 0;
  transition: color .2s ease; white-space:nowrap;
}
nav.main-nav a:hover, nav.main-nav a.active{ color: #fff; }
nav.main-nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: #fff;
  border-radius:2px;
}
.nav-toggle{ display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color: #fff; }
.nav-item-toggle{ display:none; }

/* dropdown submenus (desktop: floating white card on hover) */
.nav-item{ position:relative; }
.nav-item > a::after{
  content:'▾'; font-size:.65em; margin-left:.3em; opacity:.6; position:relative; top:-1px;
}
.nav-dropdown{
  position:absolute; top:100%; left:50%; transform:translate(-50%,2px);
  width:max-content; max-width:280px; background:#fff; border-radius:14px;
  box-shadow: 0 18px 40px -12px rgba(36,21,34,.25); border:1px solid rgba(36,21,34,.06);
  padding:.2rem; opacity:0; visibility:hidden; pointer-events:none;
  display:flex; flex-direction:column;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:150;
}
.nav-dropdown::before{
  content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:#fff; border-left:1px solid rgba(36,21,34,.06); border-top:1px solid rgba(36,21,34,.06);
}
/* desktop-only: hover/focus reveals the dropdown. Scoped to desktop so it can
   never conflict with the mobile accordion (focusing the mobile toggle button
   would otherwise trigger :focus-within here too) */
@media (min-width: 861px){
  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown{
    opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  }
}
.nav-dropdown li{ list-style:none; width:100%; }
.nav-dropdown li:not(:last-child){ border-bottom: 1px solid rgba(36,21,34,.08); }
nav.main-nav .nav-dropdown a{
  display:block; padding:.05rem .8rem; border-radius:7px; font-size:.86rem; font-weight:500;
  line-height:1.6; color:var(--ink-soft); white-space:nowrap; transition: background .15s ease, color .15s ease;
}
.nav-dropdown a::after{ content:none; }
nav.main-nav .nav-dropdown a:hover{ background: rgba(234,92,106,.08); color: var(--coral-deep); }

/* ==========================================================================
   Mobile header + nav (max-width: 860px)
   ========================================================================== */
@media (max-width: 860px){
  .site-header .wrap{ flex-wrap:wrap; row-gap:0; padding-top:.7rem; padding-bottom:.7rem; justify-content:flex-start; }

  /* logo left, hamburger right — nothing else in the header itself */
  .brand-stacked{ gap:.15rem; align-items:flex-start; text-align:left; margin-right:auto; }
  .brand-stacked .brand-text{ text-align:left; }
  .brand-stacked .brand-text small{ white-space:nowrap; font-size:.58rem; text-align:left; }
  .logo-img{ height:46px; }
  .header-right{ flex:none; width:0; min-width:0; overflow:hidden; }

  button.nav-toggle{
    position:absolute; top:.9rem; right:1.2rem; z-index:310;
    font-size:1.1rem; line-height:1; padding:.25rem .35rem;
  }
}

/* separate date + countdown bar under the header, mobile only */
.mobile-info-bar{ display:none; }
@media (max-width: 860px){
  .mobile-info-bar{
    display:flex; align-items:center; justify-content:center; gap:.8rem;
    background:#fff; padding:.55rem 1rem; border-bottom:1px solid rgba(36,21,34,.08);
    box-shadow: 0 4px 10px -6px rgba(36,21,34,.25);
  }
  .mib-date{ font-size:.78rem; font-weight:700; letter-spacing:.02em; color: var(--coral-deep); white-space:nowrap; }
  .mib-countdown{
    display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
    background: var(--ink); color:#fff; font-weight:800; font-size:.68rem;
    letter-spacing:.03em; text-transform:uppercase; padding:.32rem .6rem; border-radius:4px;
  }
  .mib-countdown .dot{ width:5px; height:5px; border-radius:50%; background: var(--mint); flex-shrink:0; animation: pulse-dot 1.8s ease-in-out infinite; }
}

/* dimmed backdrop behind the mobile menu — tap it to close */
.nav-backdrop{
  display:none; position:fixed; inset:0; background:rgba(20,10,18,.55);
  opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s; z-index:95;
}
.nav-backdrop.open{ opacity:1; visibility:visible; }
@media (max-width: 860px){ .nav-backdrop{ display:block; } }

/* mobile nav accordion — tap a section's arrow to expand/collapse its submenu */
@media (max-width: 860px){
  .nav-item{ display:flex; flex-direction:column; align-items:flex-start; width:100%; position:relative; }
  .nav-item > a{ display:inline-block; }
  .nav-item-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute; right:0; top:-.1rem;
    width:2.1rem; height:2.1rem; border:none; background:none; cursor:pointer;
    font-size:1rem; color: rgba(255,255,255,.7); transition: transform .2s ease;
  }
  .nav-item-toggle[aria-expanded="true"]{ transform: rotate(180deg); }
  nav.main-nav ul.nav-dropdown{
    position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none;
    box-shadow:none; border:none; width:100%; max-width:none; padding:0 0 0 1rem; margin-top:0;
    border-left: 2px solid rgba(255,255,255,.18);
    background:transparent; border-radius:0;
    max-height:0; overflow:hidden;
    display:block;
    transition: max-height .28s ease, margin-top .28s ease, padding .28s ease;
  }
  .nav-item.open ul.nav-dropdown{ max-height:400px; margin-top:.3rem; padding:.2rem 0 .2rem 1rem; }
  .nav-dropdown::before{ display:none; }
  .nav-item > a::after{ display:none; }
  .nav-dropdown li{ width:100%; }
  .nav-dropdown li:not(:last-child){ border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-dropdown a{ display:block; font-size:.92rem; padding:.55rem .6rem; white-space:normal; text-align:left; color: rgba(255,255,255,.72); }
}

/* mobile nav dropdown panel — compact, hugs its content, dark background,
   not a full-page takeover */
@media (max-width: 860px){
  .nav-toggle{ display:block; }
  nav.main-nav{
    position:fixed; top:var(--header-h, 118px); left:0; right:0; bottom:auto;
    max-height:calc(100vh - var(--header-h, 118px));
    background: rgba(26,15,24,.97); padding: .5rem 1.4rem 1.5rem;
    transform: translateY(-8px); opacity:0; visibility:hidden;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
    overflow-y:auto; z-index:300;
  }
  nav.main-nav.open{ transform: translateY(0); opacity:1; visibility:visible; }
  nav.main-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  nav.main-nav > ul > li > a{ text-align:left; }
  nav.main-nav ul > li{ border-bottom: 1px solid rgba(255,255,255,.12); }
  nav.main-nav ul > li:last-child{ border-bottom:none; }
  nav.main-nav a{ display:block; font-size:1.02rem; color: rgba(255,255,255,.92); padding:.85rem .1rem; }
  nav.main-nav a:hover, nav.main-nav a.active{ color:#fff; }
  nav.main-nav a.active::after{ display:none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .85rem 1.6rem; border-radius: 999px; font-weight:600; font-size:.95rem;
  border: 2px solid transparent; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease;
  font-family: var(--font-body);
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: linear-gradient(120deg, var(--coral), var(--coral-deep)); color:#fff; box-shadow: 0 10px 24px -8px rgba(234,92,106,.55); }
.btn-primary:hover{ box-shadow: 0 14px 28px -8px rgba(234,92,106,.65); }
.btn-teal{ background: linear-gradient(120deg, var(--teal), var(--mint)); color:#fff; box-shadow: 0 10px 24px -8px rgba(0,148,140,.5); }
.btn-outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--paper); }
.btn-ghost{ background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.6); color:#fff; }
.btn-ghost:hover{ background: rgba(255,255,255,.28); }
.btn-sm{ padding:.6rem 1.1rem; font-size:.85rem; }

.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ==========================================================================
   Hero (page-specific accent set via inline style / data attr)
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding: clamp(3rem,8vw,6rem) 0 clamp(3.5rem,9vw,7rem);
  background: radial-gradient(120% 140% at 15% -10%, rgba(237,43,117,.14), transparent 55%),
              radial-gradient(120% 140% at 100% 0%, rgba(0,219,164,.16), transparent 50%),
              var(--cream);
}
.hero::before, .hero::after{
  content:''; position:absolute; border-radius:50%; filter: blur(60px); z-index:0; opacity:.55;
}
.hero::before{ width:340px; height:340px; background: radial-gradient(circle, var(--peach), transparent 70%); top:-120px; right:-80px; }
.hero::after{ width:280px; height:280px; background: radial-gradient(circle, var(--mint), transparent 70%); bottom:-100px; left:-60px; opacity:.35; }
.hero .wrap, .hero-grid{ position:relative; z-index:1; }

/* highlighter-swipe accent for key phrases in headings */
.mark-highlight{ position:relative; white-space:nowrap; }
.mark-highlight::before{
  content:''; position:absolute; left:-.15em; right:-.15em; bottom:.05em; top:.42em; z-index:-1;
  background: linear-gradient(100deg, var(--peach), var(--yellow) 60%); opacity:.55; border-radius: 3px 12px 8px 14px;
  transform: rotate(-1deg);
}

/* big, artistic wave divider between major sections — replaces plain lines */
.wave-divider{ line-height:0; position:relative; z-index:3; margin-top: calc(-1 * clamp(2rem,6vw,4rem)); }
.wave-divider-mid{ margin-top: clamp(1rem,2.5vw,2rem); }
.wave-divider svg{ width:100%; height: clamp(50px,7vw,110px); display:block; }

/* floating Join Us badge */
.floating-join{
  position:fixed; right:1.3rem; bottom:1.3rem; z-index:200;
  display:flex; align-items:center; gap:.5rem;
  background: linear-gradient(120deg, var(--coral), var(--coral-deep)); color:#fff;
  padding:.85rem 1.3rem; border-radius:999px; font-weight:700; font-size:.9rem;
  box-shadow: 0 12px 28px -8px rgba(234,92,106,.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.floating-join:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 34px -8px rgba(234,92,106,.65); }
.floating-join .pulse-dot{
  width:9px; height:9px; border-radius:50%; background:#fff; flex-shrink:0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(1.5); } }
@media (max-width: 620px){ .floating-join{ padding:.7rem 1rem; font-size:.78rem; } }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--coral-deep); background: #fff; border:1px solid rgba(234,92,106,.3);
  padding:.4rem .9rem; border-radius:999px; margin-bottom:1.4rem;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--coral-deep); background: #fff; border:1px solid rgba(234,92,106,.3);
  padding:.4rem .9rem; border-radius:999px; margin-bottom:1.4rem;
}

/* countdown badge — homepage hero */
.countdown-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background: linear-gradient(120deg, var(--coral), var(--coral-deep)); color:#fff;
  font-weight:700; font-size:.8rem; letter-spacing:.03em;
  padding:.45rem .95rem; border-radius:999px; margin: 0 0 1rem;
  box-shadow: 0 8px 18px -8px rgba(234,92,106,.55);
}
.countdown-badge .dot{
  width:7px; height:7px; border-radius:50%; background:#fff; flex-shrink:0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
.hero h1{ font-size: clamp(2.3rem, 5.2vw, 4rem); max-width: 15ch; }
.hero .lede{ font-size: clamp(.92rem,1.2vw,1rem); max-width: 70ch; color: var(--ink-soft); text-align:justify; text-align-last:left; }

/* compact variant used for the homepage intro section */
.hero-compact h1{ font-size: clamp(1.6rem, 3.4vw, 2.5rem); max-width:17ch; }
.hero-compact .lede{ font-size: clamp(.92rem,1.2vw,1rem); max-width:70ch; text-align:justify; text-align-last:left; }
.hero-compact .eyebrow{ font-size:.7rem; padding:.32rem .75rem; margin-bottom:1rem; }
.hero-compact .card{ padding:1.1rem; }
.hero-compact .icon{ width:38px; height:38px; margin-bottom:.6rem !important; }
.hero-compact .icon svg{ width:19px; height:19px; }
.hero-compact .num{ font-size:1.4rem !important; }
.hero-compact .small{ font-size:.72rem; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }

/* pulse-wave signature: a heartbeat line that resolves into a brushstroke —
   representing the meeting point of health (EKG) and arts (gesture) */
.pulse-wave{ width:100%; height:auto; display:block; }
.pulse-wave path{
  fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}
.pulse-divider{ line-height:0; margin: calc(var(--gap-section) * -0.5) 0 0; position:relative; z-index:2; }
.pulse-divider svg{ width:100%; height:56px; display:block; }

@keyframes dash-flow{
  to{ stroke-dashoffset: -400; }
}
.pulse-animated path{
  stroke-dasharray: 6 10;
  animation: dash-flow 14s linear infinite;
}

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
section{ padding: var(--gap-section) 0; }
.section-head{ max-width: 60rem; margin-bottom: 1.1rem; }
.section-head .kicker{
  display:block; font-size:1.15rem; font-weight:700; font-family: var(--font-display);
  letter-spacing:normal; text-transform:none;
  color: var(--teal); margin-bottom:.4rem;
}
.section-head h2{ font-size:1.15rem; font-weight:700; font-family: var(--font-display); }
.section-alt{
  background: var(--paper);
  position:relative;
}
.section-dark{ background: radial-gradient(120% 100% at 85% 0%, rgba(0,219,164,.14), transparent 55%), var(--ink); color: var(--cream); position:relative; overflow:hidden; }
.section-dark .wrap{ position:relative; z-index:1; }
.section-dark p{ color: rgba(255,248,239,.78); }
.section-dark .section-head .kicker{ color: var(--mint); }
.section-dark .card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.section-dark .card h3{ color:#fff; }
.section-dark .card p{ color: rgba(255,248,239,.78); }
.section-coral{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.section-coral::before{
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  top:-160px; right:-100px; pointer-events:none;
}
.section-coral::after{
  content:''; position:absolute; width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,205,152,.22), transparent 70%);
  bottom:-140px; left:-60px; pointer-events:none;
}
.section-coral p{ color: rgba(255,255,255,.9); }
.section-coral .section-head .kicker{ color: #fff; opacity:.85; }
.section-coral .wrap{ position:relative; z-index:1; }

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid{ display:grid; gap: 1.1rem; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }
.card1{
  background:var(--cream); border-radius: var(--radius); padding: 1.0rem; width: 100%;
  border: 0px solid rgba(36,21,34,.07); transition: transform .25s ease, box-shadow .25s ease;
}
.card{
  background:#fff; border-radius: var(--radius); padding: 1.4rem;
  border: 1px solid rgba(36,21,34,.07); transition: transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(36,21,34,.28); }
.card > .btn{ margin-top:auto; align-self:flex-start; }
.card > .btn.btn-sm{ font-size:.72rem; padding:.5rem .95rem; }
.icon{
  width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  margin-bottom:.7rem; font-size:1.35rem; flex-shrink:0;
}
.icon svg{ width:22px; height:22px; }
.card h3{ font-size:1rem; margin-bottom:.4rem; }
.card p{ font-size: clamp(.85rem,1.05vw,.92rem); margin-bottom:0; }
.partner-logo-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--ink); border-radius: 12px; padding:.7rem 1rem; margin-bottom:1rem;
}
.partner-logo-badge img{ height:56px; width:auto; max-width:220px; object-fit:contain; display:block; }

/* "why it matters" infographic — bold solid-colour blocks */
.why-card{
  text-align:center; border:none; position:relative; overflow:hidden;
  background: var(--why-accent, var(--coral));
  padding: 1.8rem 1.2rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:150px;
}
.why-card .why-icon{
  width:48px; height:48px; margin:0 auto .8rem; border-radius:50%;
  background: rgba(255,255,255,.22); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.why-card .why-icon svg{ width:24px; height:24px; }
.why-card p{ font-weight:700; font-size:.9rem; color:#fff; line-height:1.35; text-align:center; }
.why-card:hover{ transform: translateY(-5px); box-shadow: 0 18px 34px -16px rgba(36,21,34,.35); }

.icon-coral{ background: rgba(234,92,106,.14); color: var(--coral-deep); }
.icon-teal{ background: rgba(0,148,140,.14); color: var(--teal); }
.icon-yellow{ background: rgba(237,191,9,.18); color: #9a7803; }
.icon-magenta{ background: rgba(237,43,117,.13); color: var(--magenta); }

/* stat blocks */
.stat{ text-align:center; }
.stat .num{ font-family: var(--font-display); font-size: clamp(2rem,4vw,2.8rem); font-weight:700;
  background: linear-gradient(120deg, var(--coral), var(--coral-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .label{ font-size:.85rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }

/* timeline (phases) — a real sequence, numbering is meaningful here */
.timeline{ position:relative; padding-left: 2.4rem; border-left: 3px solid rgba(0,148,140,.25); }
.timeline-item{ position:relative; padding-bottom: 2.2rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content: attr(data-n); position:absolute; left:-2.86rem; top:0;
  width:2.2rem; height:2.2rem; border-radius:50%;
  background: linear-gradient(135deg, var(--teal), var(--mint)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
  box-shadow: 0 4px 12px rgba(0,148,140,.35);
}
.timeline-item h4{ margin-bottom:.25rem; font-size:1.1rem; }
.timeline-item .when{ font-size:.8rem; color: var(--coral-deep); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }

/* pill list */
.pill-list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill{
  background:#fff; border:1px solid rgba(36,21,34,.12); border-radius:999px; padding:.5rem 1rem; font-size:.85rem; font-weight:500;
}

/* image placeholder blocks (for photos user will add) */
.img-placeholder{
  border-radius: var(--radius); aspect-ratio: 4/3; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; color:#fff; background-size:cover; background-position:center;
  background-color: var(--ink);
}
.img-placeholder::before{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(36,21,34,.75), rgba(36,21,34,0) 55%); }
.img-placeholder .cap{ position:relative; z-index:1; padding:1rem 1.2rem; font-size:.85rem; font-weight:600; }
.img-placeholder .tag{ position:absolute; top:.8rem; left:.8rem; z-index:1; background:rgba(255,255,255,.9); color:var(--ink); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.3rem .6rem; border-radius:999px; }

/* pre-activation event boxes (gallery-style tiles + know-more button) */
.event-box{
  border-radius: var(--radius); position:relative; overflow:hidden; min-height:190px;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
  background-color: var(--ink); background-size:cover; background-position:center;
}
.event-box::before{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(36,21,34,.82), rgba(36,21,34,.1) 65%); }
.event-box .event-box-content{ position:relative; z-index:1; padding:1.1rem 1.1rem 1.2rem; }
.event-box h3{ color:#fff; font-size:1rem; margin-bottom:.4rem; line-height:1.25; }
.event-box p{ color:rgba(255,255,255,.82); font-size:.8rem; margin-bottom:.7rem; }
.event-box .btn{ padding:.5rem .9rem; font-size:.76rem; }

/* featured / spotlight event (e.g. Sound Healing Experience) */
.featured-event{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: 2.2rem; align-items:stretch;
  background:#fff; border-radius: var(--radius); border:1px solid rgba(36,21,34,.07);
  overflow:hidden; margin-bottom: 2.2rem;
  box-shadow: 0 18px 40px -26px rgba(36,21,34,.35);
}
@media (max-width: 820px){ .featured-event{ grid-template-columns:1fr; } }
.featured-event-media{ position:relative; min-height:280px; background: var(--ink); display:flex; align-items:center; justify-content:center; }
.featured-event-media img{ width:100%; height:100%; object-fit:contain; display:block; }
.featured-event-badge{
  position:absolute; top:1rem; left:1rem; z-index:1;
  background: linear-gradient(120deg, var(--coral), var(--coral-deep)); color:#fff;
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.4rem .8rem; border-radius:999px; box-shadow: 0 8px 18px -8px rgba(234,92,106,.55);
}
.featured-event-body{ padding: 1.8rem 1.9rem; }
.featured-event-body h3{ font-size:1.4rem; margin-bottom:.2rem; }
.featured-event-body p{ font-size:.88rem; }
.featured-event-body p strong{ color: var(--ink); }
.event-meta-list{ display:flex; flex-direction:column; gap:.45rem; margin: .9rem 0 1.2rem; padding:0; list-style:none; }
.event-meta-list li{
  font-size:.85rem; font-weight:600; color: var(--ink);
  display:flex; align-items:flex-start; gap:.55rem;
}

/* embedded registration form card */
.event-register-card{
  background: var(--paper); border-radius: var(--radius); border:1px solid rgba(36,21,34,.07);
  padding: 1.8rem 1.9rem 1.5rem;
}
.form-embed-wrap{
  position:relative; width:100%; border-radius: var(--radius-sm); overflow:hidden;
  border:1px solid rgba(36,21,34,.1); background:#fff; margin: 1rem 0 .8rem;
}
.form-embed-wrap iframe{ width:100%; height:1250px; border:0; display:block; }
@media (max-width: 620px){ .form-embed-wrap iframe{ height:1500px; } }

/* homepage event teaser (small clickable square image) */
.event-teaser-compact{
  display:inline-block; width:180px; height:180px; border-radius: var(--radius);
  overflow:hidden; position:relative; box-shadow: 0 18px 40px -22px rgba(36,21,34,.4);
  border:1px solid rgba(36,21,34,.07); transition: transform .25s ease, box-shadow .25s ease;
}
.event-teaser-compact:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px -18px rgba(36,21,34,.5); }
.event-teaser-compact img{ width:100%; height:100%; object-fit:cover; display:block; }
.event-teaser-compact .event-teaser-badge{
  position:absolute; bottom:.6rem; left:.6rem; right:.6rem; z-index:1;
  background: rgba(36,21,34,.72); color:#fff; text-align:center;
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:.3rem .5rem; border-radius:8px;
}

/* team card */
.team-card{ background:#fff; border-radius: var(--radius); padding:1.8rem; text-align:left; border:1px solid rgba(36,21,34,.07); }
.team-card .photo{
  width:84px; height:84px; border-radius:50%; margin-bottom:1rem;
  background: linear-gradient(135deg, var(--peach), var(--coral));
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.5rem;
}
.team-card h3{ font-size:1.15rem; margin-bottom:.15rem; }
.team-card .role{ font-size:.82rem; color: var(--coral-deep); font-weight:600; margin-bottom:.9rem; display:block; }

/* advisor card — full-width square photo (not circular), image fills the square */
.advisor-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.advisor-card .photo-square{
  width:100%; aspect-ratio:1/1; border-radius:0; margin:0; overflow:hidden;
  background: var(--ink);
}
.advisor-card .photo-square img{ width:100%; height:100%; object-fit:cover; display:block; }
.advisor-card .advisor-card-body{ padding:1.3rem 1.5rem 1.6rem; }
.advisor-card h3{ font-size:1.1rem; margin-bottom:.15rem; }

/* accordion (used for engagement categories) */
details.acc{ background:#fff; border-radius: var(--radius-sm); border:1px solid rgba(36,21,34,.09); padding: 1rem 1.3rem; margin-bottom:.8rem; }
details.acc summary{ cursor:pointer; font-weight:600; font-family: var(--font-display); font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; }
details.acc summary::-webkit-details-marker{ display:none; }
details.acc summary::after{ content:'+'; font-size:1.4rem; color:var(--coral-deep); transition: transform .2s ease; }
details.acc[open] summary::after{ transform: rotate(45deg); }
details.acc .acc-body{ padding-top: .8rem; }
details.acc ul{ display:grid; gap:.4rem; }
details.acc li{ font-size:.92rem; color: var(--ink-soft); padding-left:1.1rem; position:relative; }
details.acc li::before{ content:'—'; position:absolute; left:0; color: var(--teal); }

/* table-ish support ladder */
.support-table{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.4rem; }
@media (max-width: 760px){ .support-table{ grid-template-columns:1fr; } }

/* form */
.form-grid{ display:grid; gap:1rem; max-width: 640px; }
.form-grid label{ font-size:.85rem; font-weight:600; margin-bottom:.35rem; display:block; }
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; padding:.8rem 1rem; border-radius: var(--radius-sm); border:1.5px solid rgba(36,21,34,.15);
  font-family: var(--font-body); font-size:.95rem; background:#fff; color:var(--ink);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{ border-color: var(--teal); outline:none; }

/* contact list */
.contact-list{ display:grid; gap:1rem; }
.contact-list a.contact-item{
  display:flex; gap:1rem; align-items:center; background:#fff; padding:1rem 1.3rem; border-radius: var(--radius-sm);
  border:1px solid rgba(36,21,34,.08); transition: border-color .2s ease, transform .2s ease;
}
.contact-list a.contact-item:hover{ border-color: var(--coral); transform: translateX(4px); }
.contact-list .ci-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(0,148,140,.14); color:var(--teal); flex-shrink:0; }
.contact-list .ci-icon svg{ width:19px; height:19px; }

/* footer */
footer.site-footer{ background: var(--ink); color: rgba(255,248,239,.85); padding: 3.5rem 0 2rem; }
footer.site-footer h4{ color:#fff; font-size:1rem; margin-bottom:1rem; }
footer.site-footer a{ color: rgba(255,248,239,.72); font-size:.9rem; }
footer.site-footer a:hover{ color: var(--mint); }
.festival-link{ transition: color .15s ease; }
.festival-link:hover{ color: var(--coral-deep); text-decoration: underline; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.5rem; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid ul{ display:grid; gap:.6rem; }
.footer-bottom{ border-top:1px solid rgba(255,248,239,.14); padding-top:1.5rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.82rem; color: rgba(255,248,239,.55); }

/* utility */
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-2{ margin-top:1.3rem; } .mb-0{ margin-bottom:0; }
.small{ font-size:.85rem; }
.badge-join{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
}

/* per-page heading accent — matches each page's wave-divider banner colour */
body.theme-pink .section-head .kicker{ color: var(--coral-deep); }
body.theme-green .section-head .kicker{ color: var(--teal); }
body.theme-magenta .section-head .kicker{ color: var(--magenta); }

.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* homepage banner hero image — full width, natural height, no cropping */
.banner-hero{ line-height:0; padding:0; width:100%; }
.banner-img{ width:100%; height:auto; display:block; }

/* hero image carousel */
.carousel{ position:relative; width:100%; overflow:hidden; background: var(--ink); }
.carousel-track{ position:relative; width:100%; aspect-ratio: 3415 / 1920; }
.carousel-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background: var(--ink);
  opacity:0; transform: scale(1.06); transition: opacity 1s ease, transform 1.4s ease; display:block;
}
.carousel-slide.active{ opacity:1; transform: scale(1); }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(36,21,34,.4); color:#fff; font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease;
}
.carousel-arrow:hover{ background: rgba(36,21,34,.65); transform:translateY(-50%) scale(1.08); }
.carousel-prev{ left:1rem; }
.carousel-next{ right:1rem; }
.carousel-dots{
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; gap:.5rem;
}
.carousel-dot{
  width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background: rgba(255,255,255,.5); transition: background .2s ease, transform .2s ease;
}
.carousel-dot.active{ background:#fff; transform:scale(1.25); }
@media (max-width: 700px){
  .carousel-arrow{ width:34px; height:34px; font-size:1.3rem; }
}

/* approach page — banner images slide in moving left, instead of fade/zoom */
#approachCarousel .carousel-slide{
  opacity:0; transform: translateX(7%) scale(1); transition: opacity 1s ease, transform 1.1s ease;
}
#approachCarousel .carousel-slide.active{
  opacity:1; transform: translateX(0) scale(1);
}

/* mandala / zentangle decorative watermarks */
.mandala-decor{
  position:absolute; pointer-events:none; z-index:0; opacity:.5;
  background-repeat:no-repeat; background-size:contain;
}
.hero .mandala-decor{ opacity:.35; }
.mandala-tl{ top:-60px; left:-60px; width:260px; height:260px; }
.mandala-br{ bottom:-70px; right:-70px; width:320px; height:320px; }
.mandala-center-fade{ top:50%; left:50%; width:520px; height:520px; transform:translate(-50%,-50%); opacity:.06; }
.mandala-coral{ background-image:url('../assets/decor/mandala-coral.svg'); }
.mandala-white{ background-image:url('../assets/decor/mandala-white.svg'); }
.mandala-teal{ background-image:url('../assets/decor/mandala-teal.svg'); }
.mandala-host{ position:relative; overflow:hidden; }
.mandala-host .wrap{ position:relative; z-index:1; }
@media (max-width: 700px){ .mandala-tl, .mandala-br{ width:150px; height:150px; } }

/* forms-of-art chip strip */
.art-strip{ background: var(--ink); padding: 1.8rem 0; overflow:hidden; }
.art-strip-label{ text-align:center; color: rgba(255,248,239,.6); font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:1rem; font-weight:600; }
.art-strip-row{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.art-chip{
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff;
  padding:.55rem 1.1rem; border-radius:999px; font-size:.9rem; font-weight:500;
  transition: background .2s ease, transform .2s ease;
}
.art-chip:hover{ background: linear-gradient(120deg, var(--coral), var(--coral-deep)); transform: translateY(-2px); border-color:transparent; }

/* themes rooted in the city — horizontal single-line row */
.theme-row-wrap{ position:relative; }
.theme-row{
  display:flex; flex-wrap:nowrap; gap:1rem; overflow-x:auto; padding-bottom:.5rem;
  scroll-snap-type: x proximity;
}
.theme-row::-webkit-scrollbar{ height:6px; }
.theme-row::-webkit-scrollbar-thumb{ background: rgba(36,21,34,.15); border-radius:3px; }
.theme-chip{
  flex: 0 0 auto; scroll-snap-align:start;
  min-width:200px; max-width:240px;
  color:#fff; font-weight:600; font-size:.92rem; line-height:1.35;
  padding:1.3rem 1.1rem; border-radius: var(--radius-sm);
  box-shadow: 0 10px 22px -10px rgba(36,21,34,.35);
  transition: transform .2s ease, box-shadow .2s ease;
  display:block; text-decoration:none; cursor:pointer;
}
.theme-chip:hover{ transform: translateY(-4px); box-shadow: 0 16px 30px -10px rgba(36,21,34,.4); }
@media (max-width: 700px){ .theme-chip{ min-width:170px; font-size:.85rem; } }
.theme-scroll-hint{
  position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; background:#fff;
  box-shadow: 0 6px 16px -4px rgba(36,21,34,.35);
  display:flex; align-items:center; justify-content:center;
  color:var(--coral-deep); font-size:1.3rem; line-height:1; pointer-events:none;
  animation: scroll-hint-nudge 1.6s ease-in-out infinite;
}
@keyframes scroll-hint-nudge{
  0%, 100% { transform: translateY(-50%) translateX(0); opacity:1; }
  50% { transform: translateY(-50%) translateX(6px); opacity:.6; }
}
@media (max-width: 700px){ .theme-scroll-hint{ display:flex; } }
@media (min-width: 1160px){ .theme-scroll-hint{ display:none; } }

/* theme colour system — first set (red/coral), second set (green/teal) */
.theme-chip-a{ background: linear-gradient(135deg,var(--coral),var(--coral-deep)); }
.theme-chip-b{ background: linear-gradient(135deg,var(--mint),var(--teal)); }

/* circular infographic — festival themes */
.theme-circle-wrap{ display:flex; justify-content:center; padding:1.5rem 0 1rem; }
.theme-circle{ position:relative; width:420px; height:420px; max-width:100%; }
.theme-donut{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:285px; height:285px; filter: drop-shadow(0 14px 26px rgba(36,21,34,.22));
}
.theme-seg{ transition: transform .2s ease, filter .2s ease; transform-box: fill-box; transform-origin: center; }
.theme-seg:hover{ transform: scale(1.035); filter: brightness(1.06); }
.theme-circle-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:112px; height:112px; border-radius:50%;
  background: #fff;
  color:var(--ink); display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:.92rem; line-height:1.2;
  box-shadow: 0 8px 18px -6px rgba(36,21,34,.25); z-index:2; padding:.4rem;
}
.theme-node{
  position:absolute; transform:translate(-50%,-50%); width:122px; text-align:center;
  font-size:.68rem; font-weight:600; line-height:1.25; color:#fff; padding:.6rem .6rem; border-radius:12px;
  box-shadow: 0 10px 22px -8px rgba(36,21,34,.32); z-index:1; transition: transform .2s ease;
}
.theme-node:hover{ transform: translate(-50%,-50%) scale(1.06); }
@media (max-width: 760px){ .theme-circle-wrap{ display:none; } }
.theme-list-mobile{ display:none; }
@media (max-width: 760px){ .theme-list-mobile{ display:flex; } }

/* stat cards (homepage projected numbers) — wide, short rectangles */
.stat-square{
  aspect-ratio: 2.2 / 1; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:.6rem;
}
.stat-square-pink{
  background: linear-gradient(135deg,var(--coral),var(--coral-deep)); color:#fff;
  border-color:transparent; padding:.7rem 1rem !important; max-width:none; width:100%; margin:0;
}
.stat-square-pink .num{ color:#fff !important; -webkit-text-fill-color:#fff; font-size:1.3rem !important; text-align:left; }
.stat-square-pink .small{ color:rgba(255,255,255,.9) !important; font-size:.6rem !important; text-align:left; }
.stat-square-pink .icon{ background:rgba(255,255,255,.22) !important; color:#fff !important; width:32px !important; height:32px !important; margin-bottom:0 !important; }
.stat-square-pink .icon svg{ width:16px; height:16px; }

/* smaller audience cards */
.audience-card{ padding:1.1rem; }
.audience-card .icon{ width:36px; height:36px; margin-bottom:.6rem; }
.audience-card .icon svg{ width:18px; height:18px; }
.audience-card h3{ font-size:.92rem; margin-bottom:.3rem; }
.audience-card p{ font-size:.8rem; }

/* homepage sections 1-3 flow together as one continuous block */
.section-flow{ padding: clamp(1rem,2vw,1.8rem) 0; background: var(--cream); }
.section-flow .section-head{ margin-bottom:1.4rem; }

/* values / guiding principles — horizontal chip row, same visual language as themes */
.value-row{
  display:flex; flex-wrap:wrap; gap:1rem;
}
.value-chip{
  flex: 1 1 220px;
  color:#fff; text-align:center; font-weight:600; font-size:.85rem;
  padding:1.3rem 1rem; border-radius: var(--radius-sm);
  box-shadow: 0 10px 22px -10px rgba(36,21,34,.35);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.value-chip:hover{ transform: translateY(-4px); box-shadow: 0 16px 30px -10px rgba(36,21,34,.4); }
.value-chip .icon{ background: rgba(255,255,255,.22); color:#fff; }
@media (max-width: 700px){ .value-chip{ flex-basis: 140px; font-size:.78rem; } }

/* plain (uncarded) bullet lists for mission / intention */
.plain-list{ display:grid; gap:.6rem; max-width:44rem; }
.plain-list li{ font-size: clamp(.92rem,1.2vw,1rem); color:var(--ink-soft); padding-left:1.3rem; position:relative; line-height:1.5; }
.plain-list li::before{ content:'●'; position:absolute; left:0; top:.05em; color:var(--coral-deep); font-size:.6rem; }

/* artistic, full-width bullet list — used for mission / intention */
.artistic-list{
  display:grid; grid-template-columns: 1fr; gap:.9rem; width:100%;
}
.artistic-list li{
  position:relative; list-style:none; font-size: clamp(.85rem,1.05vw,.92rem); line-height:1.6;
  color:var(--ink-soft); padding-left:1.9rem;
}
.artistic-list li::before{
  content:'◆'; position:absolute; left:0; top:.15em; color:var(--list-accent, var(--coral));
  font-size:.7em; transform:rotate(0deg);
}

/* pink vision banner */
.vision-banner{
  background: linear-gradient(120deg,var(--coral),var(--coral-deep)); color:#fff;
  border-radius: var(--radius); padding:1.6rem 1.8rem; text-align:center;
  font-family: var(--font-display); font-size:1.15rem; font-weight:600; line-height:1.4;
}

/* tighter section head variant (reduced gap under kicker/title) */
.section-head-tight{ margin-bottom:.9rem; }

/* About Us: tighter rhythm between Vision, Mission, Intention, Guiding Principles */
.about-tight{ padding-top: clamp(.5rem,1vw,.9rem); padding-bottom: clamp(.5rem,1vw,.9rem); }

/* team leadership — photo left, content right, stacked rows */
.team-row{
  display:flex; gap:1.6rem; align-items:stretch; background:#fff; border-radius: var(--radius);
  padding:1.8rem; border:1px solid rgba(36,21,34,.07); margin-bottom:1.4rem;
}
.team-row .photo{
  flex-shrink:0; font-size:1.7rem; border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--peach), var(--coral)); color:#fff;
  font-family:var(--font-display); font-weight:700;
}
.team-row .photo img{ height:100%; width:auto; max-width:260px; object-fit:contain; background:#fff; display:block; }
@media (max-width:680px){ .team-row .photo img{ height:220px; max-width:100%; } }
.team-row .team-row-content h3{ margin-bottom:.15rem; }
@media (max-width:680px){ .team-row{ flex-direction:column; align-items:center; text-align:center; } }

/* concise coral bottom CTA band, used on every page before the footer */
.cta-band{ padding: clamp(2rem,4vw,3rem) 0; }
.cta-band .section-head{ margin-bottom:1.6rem; }
.cta-band .card{ padding:1.2rem 1.3rem; }
.cta-band .card h3{ font-size:1rem; margin-bottom:.35rem; }
.cta-band .card p{ font-size:.82rem; margin-bottom:.9rem; }

/* triple floating action buttons */
.floating-actions{
  position:fixed; right:1.3rem; bottom:1.3rem; z-index:200;
  display:flex; flex-direction:row; gap:.6rem; align-items:center;
}
.floating-actions .floating-join{ position:static; padding:.7rem 1.15rem; font-size:.82rem; box-shadow: 0 10px 22px -8px rgba(36,21,34,.35); white-space:nowrap; }
.floating-actions .fa-join{ background: linear-gradient(120deg, var(--coral), var(--coral-deep)); }
.floating-actions .fa-support{ background: linear-gradient(120deg, var(--teal), var(--mint)); }
.floating-actions .fa-contact{ background: linear-gradient(120deg, var(--magenta), #B81E5C); }
@media (max-width: 780px){
  .floating-actions{ right:.6rem; bottom:.8rem; gap:.4rem; }
  .floating-actions .floating-join{ padding:.55rem .8rem; font-size:.68rem; }
}
@media (max-width: 400px){
  .floating-actions{ right:.4rem; gap:.3rem; }
  .floating-actions .floating-join{ padding:.5rem .6rem; font-size:.62rem; }
}

/* photo gallery grid + lightbox */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem;
}
@media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:.6rem; } }
.gallery-item{
  padding:0; border:none; background:none; cursor:zoom-in; border-radius:var(--radius);
  overflow:hidden; aspect-ratio:1/1; display:block; transition:transform .25s ease, box-shadow .25s ease;
}
.gallery-item:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(36,21,34,.35); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.lightbox{
  display:none; position:fixed; inset:0; z-index:200; background:rgba(20,10,18,.94);
  align-items:center; justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox-img{ max-width:88vw; max-height:86vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:1.2rem; right:1.4rem; background:none; border:none; color:#fff;
  font-size:2.2rem; line-height:1; cursor:pointer; opacity:.85;
}
.lightbox-close:hover{ opacity:1; }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12);
  border:none; color:#fff; font-size:2.4rem; line-height:1; width:52px; height:52px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.lightbox-nav:hover{ background:rgba(255,255,255,.24); }
.lightbox-prev{ left:1rem; }
.lightbox-next{ right:1rem; }
@media (max-width:620px){
  .lightbox-nav{ width:42px; height:42px; font-size:1.9rem; }
  .lightbox-close{ font-size:1.9rem; top:.8rem; right:1rem; }
}

/* generic content modal (e.g. facilitator bio popup) */
.info-modal{
  display:none; position:fixed; inset:0; z-index:210; background:rgba(20,10,18,.72);
  align-items:center; justify-content:center; padding:1.5rem;
}
.info-modal.is-open{ display:flex; }
.info-modal-panel{
  background:#fff; border-radius: var(--radius); max-width:560px; width:100%;
  max-height:84vh; overflow-y:auto; padding: 1.9rem 2rem; position:relative;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}
.info-modal-close{
  position:absolute; top:1rem; right:1.1rem; background:none; border:none; color:var(--ink-soft);
  font-size:1.7rem; line-height:1; cursor:pointer; opacity:.7;
}
.info-modal-close:hover{ opacity:1; color:var(--ink); }
.info-modal-panel h4{ font-size:1.15rem; margin-bottom:.2rem; padding-right:1.5rem; }
.info-modal-panel .role{ font-size:.8rem; color:var(--coral-deep); font-weight:600; display:block; margin-bottom:.9rem; }
.info-modal-panel p{ font-size:.88rem; }
.facilitator-name-trigger{
  background:none; border:none; padding:0; margin:0; font:inherit; cursor:pointer;
  color: var(--coral-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px;
}
.facilitator-name-trigger:hover{ color: var(--coral); }