/* ============================================================
 * B.E.N.M.P — Healing Jesus Campaign Partners
 * Stylesheet (generated 2026-05-16)
 * ============================================================ */

/* ========================================================
   FOUNDATIONS
   ======================================================== */
:root{
  --ink: #1a1815;
  --ink-2: #2a2520;
  --cream: #f5ede0;
  --cream-2: #faf5ea;
  --paper: #fcfaf4;
  --emerald: #1f4034;
  --emerald-deep: #14291f;
  --emerald-bright: #2a6049;
  --gold: #c8a24c;
  --gold-deep: #a07f30;
  --terra: #c2624a;
  --rose: #d99989;
  --line: #d7c9b1;
  --line-2: #e8dcc3;
  --shadow: 0 1px 2px rgba(26,24,21,.04), 0 8px 24px rgba(26,24,21,.06);
  --shadow-lg: 0 4px 8px rgba(26,24,21,.06), 0 24px 60px rgba(26,24,21,.12);
  --radius: 14px;
  --radius-sm: 8px;
  --font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Manrope', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
a{color:inherit; text-decoration:none;}

/* Paper grain overlay */
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(200,162,76,.04) 0, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(31,64,52,.04) 0, transparent 50%);
  pointer-events:none;
  z-index:0;
}

/* ========================================================
   ADMIN BAR (WordPress-style — only visible when logged in)
   ======================================================== */
.admin-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 38px;
  background: #1a1815;
  color: rgba(245,237,224,.85);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  z-index: 9999;
  font-family: var(--font-sans);
  font-size: 13px;
  border-bottom: 1px solid rgba(245,237,224,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
body.is-admin .admin-bar{ display: flex; }

.admin-bar-section{
  display: flex;
  align-items: center;
  height: 100%;
}
.admin-bar a{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 100%;
  color: rgba(245,237,224,.78);
  font-size: 13px;
  transition: background .15s, color .15s;
  letter-spacing: .01em;
}
.admin-bar a:hover{
  background: rgba(245,237,224,.06);
  color: var(--cream);
}
.admin-bar a.notice{
  color: var(--gold);
}
.admin-bar-home{
  font-weight: 600;
}
.admin-bar-logo{
  width: 22px; height: 22px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14px;
  font-style: italic;
}
.admin-bar-divider{
  width: 1px; height: 18px;
  background: rgba(245,237,224,.12);
  margin: 0 2px;
}
.admin-bar-greeting{
  padding: 0 14px;
  color: rgba(245,237,224,.55);
  font-size: 12.5px;
}
.admin-bar-greeting strong{
  color: rgba(245,237,224,.85);
  font-weight: 600;
}

/* Body shift when admin is visible */
body.is-admin .site-header{ padding-top: 64px; }

/* Views */
.view{ display:none; }
.view.active{ display:block; animation: fadeIn .4s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

/* ========================================================
   LOGIN PAGE
   ======================================================== */
#view-login{ background: var(--paper); }
.login-page{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  background: var(--paper);
}
.login-aside{
  background: var(--emerald-deep);
  color: var(--cream);
  padding: 56px 48px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-height: 100vh;
}
.login-aside::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 75%, rgba(200,162,76,.22) 0%, transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(194,98,74,.14) 0%, transparent 55%);
  pointer-events: none;
}
.login-aside::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 49%, rgba(200,162,76,.04) 49%, rgba(200,162,76,.04) 51%, transparent 51%);
  background-size: 24px 24px;
  opacity: .5;
  pointer-events: none;
}
.login-aside > *{ position: relative; z-index: 1; }
.login-aside .brand-name{ color: var(--cream); }
.login-aside .brand-tag{ color: rgba(245,237,224,.6); }
.login-aside-quote{
  max-width: 440px;
}
.login-quote-text{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: 24px;
  color: var(--cream);
}
.login-quote-text::before{
  content: '"';
  font-family: var(--font-serif);
  color: var(--gold);
  opacity: .5;
}
.login-quote-attr{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .85;
  display: flex; align-items: center; gap: 14px;
}
.login-quote-attr::before{
  content: '';
  width: 36px; height: 1px;
  background: var(--gold);
}
.login-aside-footer{
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

.login-form-wrap{
  display: grid;
  place-items: center;
  padding: 56px 40px;
  position: relative;
}
.login-back{
  position: absolute;
  top: 32px; right: 40px;
  font-size: 12.5px;
  color: var(--ink-2);
  opacity: .6;
  display: flex; align-items: center; gap: 6px;
  transition: opacity .2s, color .2s;
}
.login-back:hover{ opacity: 1; color: var(--emerald); }

.login-form{
  width: 100%;
  max-width: 380px;
}
.login-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--emerald);
  background: rgba(245,237,224,.4);
  margin-bottom: 28px;
}
.login-eyebrow .lock{
  width: 7px; height: 7px;
  background: var(--emerald);
  border-radius: 50%;
}
.login-form h1{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 12px;
  color: var(--ink);
}
.login-form h1 em{
  font-style: italic;
  color: var(--emerald);
}
.login-sub{
  font-size: 14px;
  color: var(--ink-2);
  opacity: .75;
  margin-bottom: 36px;
  line-height: 1.5;
}
.login-field{
  margin-bottom: 16px;
}
.login-field label{
  display: block;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 7px;
  opacity: .75;
}
.login-input{
  width: 100%;
  padding: 13px 16px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  transition: all .2s;
}
.login-input:focus{
  outline: none;
  border-color: var(--emerald);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(31,64,52,.08);
}
.login-options{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 28px;
  font-size: 12.5px;
}
.login-remember{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  cursor: pointer;
}
.login-remember input{ accent-color: var(--emerald); }
.login-forgot{
  color: var(--emerald);
  font-weight: 600;
  transition: color .2s;
}
.login-forgot:hover{ color: var(--emerald-deep); }
.login-submit{
  width: 100%;
  padding: 15px;
  background: var(--emerald);
  color: var(--cream);
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: all .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.login-submit:hover{
  background: var(--emerald-deep);
  transform: translateY(-1px);
}
.login-demo-hint{
  margin-top: 26px;
  padding: 14px 16px;
  background: rgba(200,162,76,.08);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.6;
}
.login-demo-hint strong{
  color: var(--gold-deep);
}

/* Footer admin link */
.footer-admin-link{
  font-size: 12px;
  color: rgba(245,237,224,.4);
  transition: color .2s;
  letter-spacing: .04em;
}
.footer-admin-link:hover{
  color: var(--gold);
}

@media (max-width: 800px){
  .login-page{ grid-template-columns: 1fr; }
  .login-aside{ min-height: 240px; padding: 36px 28px; }
  .login-form-wrap{ padding: 36px 24px; }
  .login-back{ top: 16px; right: 20px; }
}

/* ========================================================
   PUBLIC WEBSITE
   ======================================================== */

/* HEADER */
.site-header{
  position: relative;
  z-index: 50;
  padding: 28px 48px 18px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid var(--line-2);
  background: var(--paper);
}
.brand{
  display:flex; align-items:center; gap:14px;
}
.brand-mark{
  width: 46px; height: 46px;
  background: var(--emerald-deep);
  background-image: url('data:image/png;base64,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');
  background-size: 78%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  display:grid; place-items:center;
  color: transparent;
  font-size: 0;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 1px 3px rgba(0,0,0,.15);
}
.brand-mark::after{
  content:''; position:absolute; inset:3px;
  border:1px solid rgba(245,237,224,.12);
  border-radius:6px;
  pointer-events: none;
}
.brand-text{
  display:flex; flex-direction:column; line-height:1;
}
.brand-name{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .12em;
}
.brand-tag{
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-2);
  opacity: .6;
  margin-top: 5px;
  text-transform: uppercase;
}

.site-nav{
  display:flex; align-items:center; gap: 38px;
}
.site-nav a{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--ink-2);
  transition: color .2s;
  position: relative;
}
.site-nav a:hover{ color: var(--emerald); }
.site-nav a.active::after{
  content:''; position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px; background: var(--gold);
}

.btn{
  padding: 11px 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 100px;
  transition: all .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary{
  background: var(--emerald);
  color: var(--cream);
}
.btn-primary:hover{
  background: var(--emerald-deep);
  transform: translateY(-1px);
}
.btn-gold{
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover{
  background: var(--gold-deep);
  color: var(--cream);
}
.btn-outline{
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.btn-outline:hover{
  background: var(--ink);
  color: var(--cream);
}
.btn-ghost{
  color: var(--ink-2);
}
.btn-ghost:hover{ color: var(--emerald); }

/* HERO */
.hero{
  position: relative;
  padding: 80px 48px 100px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
  overflow: hidden;
}

.hero::before{
  content: '';
  position: absolute;
  top: 50%; right: -200px;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(31,64,52,.06) 0%, transparent 60%);
  transform: translateY(-50%);
  pointer-events: none;
}

.hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 28px;
  background: rgba(245,237,224,.4);
}
.hero-eyebrow .pulse{
  width: 7px; height: 7px;
  background: var(--terra);
  border-radius: 50%;
  position: relative;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(194,98,74,.4); }
  50% { box-shadow: 0 0 0 8px rgba(194,98,74,0); }
}

.hero h1{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 96px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 28px;
}
.hero h1 em{
  font-style: italic;
  font-weight: 300;
  color: var(--emerald);
  position: relative;
}
.hero h1 em::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 8px;
  background: var(--gold);
  opacity: .35;
  z-index: -1;
}

.hero-lede{
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 480px;
  margin-bottom: 36px;
}

.hero-cta{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 56px;
}

.hero-meta{
  display: flex;
  gap: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
  max-width: 480px;
}
.hero-meta-item .num{
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--emerald);
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-meta-item .num sup{
  font-size: 16px;
  color: var(--gold);
  margin-left: 2px;
  top: -.6em;
}
.hero-meta-item .label{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .7;
  margin-top: 8px;
}

/* HERO VISUAL */
.hero-visual{
  position: relative;
  height: 560px;
}
.hero-card{
  position: absolute;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform .4s ease;
}
.hero-card-main{
  top: 0; right: 0;
  width: 75%; height: 75%;
  background: linear-gradient(135deg, var(--emerald-deep) 0%, var(--emerald) 100%);
  padding: 36px;
  color: var(--cream);
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-card-main::before{
  content: '';
  position: absolute;
  top: -50%; right: -50%;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(200,162,76,.2) 0%, transparent 70%);
}
.hero-card-quote{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.35;
  position: relative;
  z-index: 1;
}
.hero-card-quote::before{
  content: '"';
  font-family: var(--font-serif);
  font-size: 80px;
  position: absolute;
  top: -36px; left: -8px;
  color: var(--gold);
  opacity: .4;
  line-height: 1;
}
.hero-card-attr{
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .8;
  position: relative;
  z-index: 1;
  display: flex; align-items: center; gap: 12px;
}
.hero-card-attr::before{
  content: '';
  width: 30px; height: 1px;
  background: var(--gold);
}

.hero-card-stat{
  bottom: 0; left: 0;
  width: 50%; height: 45%;
  background: var(--cream);
  padding: 24px;
  border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-card-stat .label{
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .7;
}
.hero-card-stat .number{
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.hero-card-stat .desc{
  font-size: 12px;
  color: var(--ink-2);
}

.hero-badge{
  position: absolute;
  top: 60%; left: 35%;
  width: 110px; height: 110px;
  background: var(--gold);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: var(--shadow);
  animation: rotate 30s linear infinite;
}
.hero-badge svg{
  width: 100%; height: 100%;
}
.hero-badge span{
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  animation: rotate 30s linear infinite reverse;
}
@keyframes rotate{ to{ transform: rotate(360deg) } }

/* IMPACT BAR */
.impact-bar{
  background: var(--emerald-deep);
  color: var(--cream);
  padding: 60px 48px;
  position: relative;
  overflow: hidden;
}
.impact-bar::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 49%, rgba(200,162,76,.04) 49%, rgba(200,162,76,.04) 51%, transparent 51%);
  background-size: 24px 24px;
}
.impact-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  z-index: 1;
}
.impact-item{
  padding: 0 24px;
  border-left: 1px solid rgba(245,237,224,.15);
}
.impact-item:first-child{ padding-left:0; border-left:0; }
.impact-num{
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--gold);
}
.impact-num sup{
  font-size: 28px;
  color: var(--cream);
  opacity: .7;
}
.impact-label{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 14px;
  opacity: .85;
}

/* SECTION HEADERS */
.section-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--emerald);
  font-weight: 600;
  margin-bottom: 18px;
}
.section-eyebrow::before{
  content: '';
  width: 24px; height: 1px;
  background: var(--gold);
}
.section-title{
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.section-title em{
  font-style: italic;
  color: var(--emerald);
}

/* ABOUT BENMP */
.about-section{
  padding: 120px 48px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 100px;
  align-items: start;
}
.about-visual{
  position: sticky;
  top: 100px;
}
.about-image{
  aspect-ratio: 3/4;
  background: linear-gradient(180deg, var(--cream) 0%, var(--emerald) 100%);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.about-image::before{
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(200,162,76,.25) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(194,98,74,.15) 0%, transparent 50%);
}
.about-image-content{
  position: relative;
  text-align: center;
  color: var(--cream);
  padding: 48px;
}
.about-image-content .verse{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 24px;
}
.about-image-content .verse-ref{
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .9;
}
.about-decor{
  position: absolute;
  bottom: -30px; right: -30px;
  width: 200px; height: 200px;
  background: var(--gold);
  border-radius: var(--radius);
  z-index: -1;
  opacity: .4;
}

.about-content h2{
  margin-bottom: 36px;
}
.about-content p{
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 22px;
}
.about-content p:first-of-type{
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}
.about-pillars{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--line-2);
}
.pillar{
  text-align: center;
}
.pillar-letter{
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 300;
  color: var(--emerald);
  line-height: 1;
}
.pillar-word{
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 10px;
}

/* DONATION TIERS */
.donate-section{
  padding: 120px 48px;
  background: var(--cream-2);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.donate-header{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 72px;
}
.donate-header h2{
  margin-bottom: 20px;
}
.donate-header p{
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
}

.donate-toggle{
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px;
  margin: 36px auto 0;
}
.donate-toggle button{
  padding: 10px 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 100px;
  color: var(--ink-2);
  transition: all .25s;
}
.donate-toggle button.active{
  background: var(--emerald);
  color: var(--cream);
}

.tier-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.tier-card{
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 36px 28px;
  position: relative;
  transition: all .3s ease;
  display: flex;
  flex-direction: column;
}
.tier-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.tier-card.featured{
  background: var(--emerald);
  color: var(--cream);
  border-color: var(--emerald);
  transform: translateY(-12px);
}
.tier-card.featured:hover{ transform: translateY(-16px); }
.tier-badge{
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
}
.tier-name{
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  margin-bottom: 6px;
}
.tier-tagline{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 28px;
}
.tier-price{
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.tier-price .currency{
  font-size: 22px;
  vertical-align: top;
  margin-right: 4px;
}
.tier-price .period{
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 400;
  opacity: .65;
  letter-spacing: 0;
}
.tier-divider{
  margin: 28px 0;
  height: 1px;
  background: currentColor;
  opacity: .15;
}
.tier-features{
  list-style: none;
  margin-bottom: 32px;
  flex: 1;
}
.tier-features li{
  font-size: 13.5px;
  padding: 7px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: .9;
}
.tier-features li::before{
  content: '';
  width: 5px; height: 5px;
  margin-top: 7px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}
.tier-card.featured .tier-features li::before{ background: var(--gold); }
.tier-cta{
  width: 100%;
  padding: 14px;
  border: 1.5px solid currentColor;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: all .25s;
}
.tier-card:not(.featured) .tier-cta:hover{
  background: var(--emerald);
  color: var(--cream);
  border-color: var(--emerald);
}
.tier-card.featured .tier-cta{
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.tier-card.featured .tier-cta:hover{
  background: var(--cream);
  border-color: var(--cream);
}

/* TESTIMONY/QUOTE */
.quote-section{
  padding: 140px 48px;
  text-align: center;
  position: relative;
}
.quote-section::before{
  content: '"';
  position: absolute;
  top: 40px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 280px;
  color: var(--gold);
  opacity: .1;
  line-height: 1;
}
.quote-content{
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}
.quote-text{
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 48px;
}
.quote-text strong{
  font-style: normal;
  font-weight: 500;
  color: var(--emerald);
}
.quote-author{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.quote-author-name{
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
}
.quote-author-title{
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .7;
}
.quote-author::before{
  content: '';
  width: 40px; height: 1px;
  background: var(--gold);
  margin-bottom: 16px;
}

/* CAMPAIGN GALLERY */
.gallery-section{
  padding: 0 48px 120px;
}
.gallery-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
}
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.gallery-item{
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .4s ease;
}
.gallery-item:hover{ transform: scale(1.01); }
.gallery-item-1{ grid-column: span 7; aspect-ratio: 7/5; }
.gallery-item-2{ grid-column: span 5; aspect-ratio: 5/5; }
.gallery-item-3{ grid-column: span 4; aspect-ratio: 4/5; }
.gallery-item-4{ grid-column: span 4; aspect-ratio: 4/5; }
.gallery-item-5{ grid-column: span 4; aspect-ratio: 4/5; }

.gallery-placeholder{
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.gallery-placeholder::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,41,31,.85) 0%, transparent 60%);
  z-index: 1;
}
.gp-1{ background: linear-gradient(135deg, #2a5d40 0%, #14291f 100%); }
.gp-2{ background: linear-gradient(135deg, #8b3a26 0%, #c2624a 100%); }
.gp-3{ background: linear-gradient(135deg, #c8a24c 0%, #a07f30 100%); }
.gp-4{ background: linear-gradient(135deg, #1f4034 0%, #2a6049 100%); }
.gp-5{ background: linear-gradient(135deg, #5c4023 0%, #8b6539 100%); }

.gallery-placeholder svg{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: .15;
}

.gallery-info{
  position: relative;
  z-index: 2;
}
.gallery-location{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 8px;
}
.gallery-title{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.gallery-item-1 .gallery-title{ font-size: 30px; }

/* NEWSLETTER */
.cta-section{
  background: var(--ink);
  color: var(--cream);
  padding: 120px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(31,64,52,.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(200,162,76,.15) 0%, transparent 50%);
}
.cta-content{
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.cta-content h2{
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
.cta-content h2 em{
  font-style: italic;
  color: var(--gold);
}
.cta-content p{
  font-size: 17px;
  opacity: .85;
  margin-bottom: 40px;
}
.cta-form{
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.cta-form input{
  flex: 1;
  background: rgba(245,237,224,.08);
  border: 1px solid rgba(245,237,224,.15);
  color: var(--cream);
  padding: 16px 22px;
  border-radius: 100px;
  font-size: 14px;
  font-family: inherit;
}
.cta-form input::placeholder{ color: rgba(245,237,224,.4); }
.cta-form input:focus{ outline: 1px solid var(--gold); }

/* FOOTER */
.site-footer{
  background: var(--ink);
  color: var(--cream);
  padding: 60px 48px 40px;
  border-top: 1px solid rgba(245,237,224,.08);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 56px;
}
.footer-brand{ max-width: 320px; }
.footer-brand p{
  font-size: 14px;
  opacity: .65;
  margin-top: 16px;
  line-height: 1.6;
}
.footer-col h4{
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: var(--gold);
}
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom: 12px; }
.footer-col a{
  font-size: 14px;
  opacity: .75;
  transition: opacity .2s;
}
.footer-col a:hover{ opacity: 1; }

.footer-bottom{
  padding-top: 32px;
  border-top: 1px solid rgba(245,237,224,.08);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: .55;
}

/* ========================================================
   DRAG-DROP EDITOR
   ======================================================== */
.editor-wrapper{
  padding-top: 38px;
  height: 100vh;
  background: #f2ece0;
  display: flex;
  flex-direction: column;
}

.editor-topbar{
  background: var(--ink);
  color: var(--cream);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(245,237,224,.08);
}
.editor-topbar-left, .editor-topbar-center, .editor-topbar-right{
  display: flex;
  align-items: center;
  gap: 12px;
}
.editor-page-selector{
  background: rgba(245,237,224,.06);
  border: 1px solid rgba(245,237,224,.12);
  color: var(--cream);
  padding: 7px 14px 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}
.editor-page-selector svg{ opacity: .6; }
.editor-icon-btn{
  width: 32px; height: 32px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: rgba(245,237,224,.7);
  transition: all .2s;
}
.editor-icon-btn:hover{
  background: rgba(245,237,224,.08);
  color: var(--cream);
}
.editor-icon-btn.active{
  background: var(--cream);
  color: var(--ink);
}
.editor-divider{
  width: 1px; height: 22px;
  background: rgba(245,237,224,.1);
  margin: 0 4px;
}
.editor-btn{
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
}
.editor-btn-save{
  background: rgba(245,237,224,.08);
  color: var(--cream);
  border: 1px solid rgba(245,237,224,.12);
}
.editor-btn-save:hover{ background: rgba(245,237,224,.14); }
.editor-btn-publish{
  background: var(--gold);
  color: var(--ink);
}
.editor-btn-publish:hover{ background: var(--cream); }

.editor-body{
  flex: 1;
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  overflow: hidden;
}

/* COMPONENT LIBRARY (LEFT SIDEBAR) */
.editor-sidebar{
  background: var(--paper);
  border-right: 1px solid var(--line-2);
  overflow-y: auto;
  padding: 20px 0;
}
.editor-sidebar-header{
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--line-2);
}
.editor-sidebar-search{
  width: 100%;
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 9px 12px 9px 32px;
  font-size: 13px;
  font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1815' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px 50%;
}
.editor-sidebar-search:focus{ outline: 1px solid var(--emerald); }

.editor-category{
  padding: 18px 20px 4px;
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .6;
  font-weight: 600;
}

.component-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 14px;
}
.component-item{
  background: var(--cream-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 16px 8px 10px;
  cursor: grab;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.component-item:hover{
  background: var(--emerald);
  color: var(--cream);
  border-color: var(--emerald);
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.component-item:active{ cursor: grabbing; }
.component-item.dragging{ opacity: .4; }
.component-item svg{
  width: 26px; height: 26px;
  stroke-width: 1.4;
}
.component-item-name{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
}

/* CANVAS (CENTER) */
.editor-canvas-wrap{
  background: linear-gradient(0deg, #ece4d4 1px, transparent 1px), linear-gradient(90deg, #ece4d4 1px, transparent 1px);
  background-size: 24px 24px;
  background-color: #f6f0e3;
  overflow: auto;
  padding: 40px;
  position: relative;
}
.editor-canvas{
  max-width: 1100px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  min-height: 1200px;
  overflow: hidden;
  transition: max-width .3s ease;
}
.editor-canvas[data-device="tablet"]{ max-width: 768px; }
.editor-canvas[data-device="mobile"]{ max-width: 400px; }








.drop-indicator{
  height: 4px;
  background: var(--gold);
  border-radius: 100px;
  margin: 6px 24px;
  opacity: 0;
  transition: opacity .2s;
}
.drop-indicator.show{ opacity: 1; }
.drop-zone-empty{
  border: 2px dashed var(--line);
  border-radius: 12px;
  padding: 80px 40px;
  text-align: center;
  color: var(--ink-2);
  margin: 40px;
  transition: all .2s;
}
.drop-zone-empty.drag-over{
  border-color: var(--emerald);
  background: rgba(31,64,52,.05);
}
.drop-zone-empty svg{
  width: 48px; height: 48px;
  stroke: var(--emerald);
  margin: 0 auto 16px;
  opacity: .6;
}
.drop-zone-empty .title{
  font-family: var(--font-serif);
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--ink);
}
.drop-zone-empty .sub{
  font-size: 13px;
  opacity: .7;
}

/* Mini versions of website sections for canvas */
.canvas-hero{
  padding: 60px 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.canvas-hero h1{
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.canvas-hero h1 em{ font-style: italic; color: var(--emerald); }
.canvas-hero p{
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.canvas-hero-buttons{ display: flex; gap: 10px; }
.canvas-mini-btn{
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.canvas-mini-btn-p{ background: var(--emerald); color: var(--cream); }
.canvas-mini-btn-o{ border: 1.5px solid var(--ink); }
.canvas-hero-img{
  aspect-ratio: 4/3;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--emerald-deep), var(--emerald));
  position: relative;
  overflow: hidden;
}
.canvas-hero-img::after{
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(200,162,76,.3);
  border-radius: 6px;
}

.canvas-stats{
  background: var(--emerald-deep);
  padding: 32px 40px;
  color: var(--cream);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.canvas-stats-item .n{
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--gold);
  line-height: 1;
}
.canvas-stats-item .l{
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: 8px;
}

.canvas-text{
  padding: 50px 60px;
}
.canvas-text-eyebrow{
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 12px;
}
.canvas-text h2{
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 1.1;
}
.canvas-text h2 em{ font-style: italic; color: var(--emerald); }
.canvas-text p{
  font-size: 14px;
  color: var(--ink-2);
  max-width: 640px;
}

.canvas-tiers{
  padding: 50px 40px;
  background: var(--cream-2);
}
.canvas-tiers-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}
.canvas-tier{
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 20px 16px;
}
.canvas-tier.f{ background: var(--emerald); color: var(--cream); }
.canvas-tier .tn{ font-family: var(--font-serif); font-style: italic; font-size: 18px; }
.canvas-tier .tp{ font-family: var(--font-serif); font-size: 32px; margin: 10px 0; }
.canvas-tier .tb{
  margin-top: 10px;
  padding: 8px;
  border: 1px solid currentColor;
  border-radius: 100px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.canvas-tier.f .tb{ background: var(--gold); color: var(--ink); border-color: var(--gold); }

.canvas-quote{
  padding: 60px 60px;
  text-align: center;
}
.canvas-quote p{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 20px;
}
.canvas-quote .a{ font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }

/* PROPERTIES PANEL (RIGHT SIDEBAR) */
.editor-properties{
  background: var(--paper);
  border-left: 1px solid var(--line-2);
  overflow-y: auto;
  padding: 20px;
}
.properties-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 20px;
}
.properties-title{
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
}
.properties-tabs{
  display: flex;
  background: var(--cream-2);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 20px;
}
.properties-tabs button{
  flex: 1;
  padding: 6px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: all .2s;
}
.properties-tabs button.active{
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.prop-group{
  margin-bottom: 24px;
}
.prop-group-label{
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .7;
  margin-bottom: 10px;
  font-weight: 600;
}
.prop-field{
  margin-bottom: 12px;
}
.prop-field label{
  font-size: 11.5px;
  color: var(--ink-2);
  margin-bottom: 5px;
  display: block;
}
.prop-input{
  width: 100%;
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
}
.prop-input:focus{ outline: 1px solid var(--emerald); }
textarea.prop-input{ resize: vertical; min-height: 60px; font-family: inherit; }

.prop-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prop-row-3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

.color-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.color-swatch{
  aspect-ratio: 1;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .15s;
}
.color-swatch.active{ border-color: var(--ink); transform: scale(1.1); }

.spacing-control{
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 16px;
  position: relative;
  display: grid;
  place-items: center;
  height: 100px;
}
.spacing-box{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 60px; height: 40px;
}
.spacing-label{
  position: absolute;
  font-size: 11px;
  color: var(--ink-2);
}
.spacing-label.top{ top: 5px; }
.spacing-label.bottom{ bottom: 5px; }
.spacing-label.left{ left: 8px; top: 50%; transform: translateY(-50%); }
.spacing-label.right{ right: 8px; top: 50%; transform: translateY(-50%); }

/* ========================================================
   ADMIN DASHBOARD
   ======================================================== */
.dashboard-wrap{
  padding-top: 38px;
  min-height: 100vh;
  background: #f1ecdf;
  display: grid;
  grid-template-columns: 240px 1fr;
}
.dash-sidebar{
  background: var(--ink);
  color: var(--cream);
  padding: 24px 0;
  position: sticky;
  top: 38px;
  height: calc(100vh - 38px);
  overflow-y: auto;
}
.dash-sidebar-header{
  padding: 0 24px 24px;
  border-bottom: 1px solid rgba(245,237,224,.08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-sidebar-logo{
  width: 32px; height: 32px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
}
.dash-sidebar-title{
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: .1em;
}

.dash-nav{
  padding: 16px 12px;
}
.dash-nav-group{
  padding: 12px 12px 6px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .45;
  font-weight: 600;
}
.dash-nav-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  color: rgba(245,237,224,.7);
  margin-bottom: 2px;
  cursor: pointer;
  transition: all .2s;
}
.dash-nav-item:hover{
  background: rgba(245,237,224,.06);
  color: var(--cream);
}
.dash-nav-item.active{
  background: rgba(200,162,76,.15);
  color: var(--gold);
}
.dash-nav-item svg{ width: 18px; height: 18px; flex-shrink: 0; }
.dash-nav-item .badge{
  margin-left: auto;
  background: var(--terra);
  color: var(--cream);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 100px;
  font-weight: 600;
}

.dash-profile{
  position: absolute;
  bottom: 24px;
  left: 12px; right: 12px;
  background: rgba(245,237,224,.06);
  border: 1px solid rgba(245,237,224,.08);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-avatar{
  width: 36px; height: 36px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.dash-profile-info{ flex: 1; min-width: 0; }
.dash-profile-name{ font-size: 13px; font-weight: 600; }
.dash-profile-role{ font-size: 11px; opacity: .65; }

.dash-main{
  padding: 32px 40px;
  overflow-x: hidden;
}
.dash-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.dash-greeting h1{
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.dash-greeting h1 em{ font-style: italic; color: var(--emerald); }
.dash-greeting p{
  font-size: 13px;
  color: var(--ink-2);
  opacity: .7;
}

.dash-header-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}
.dash-period{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-btn{
  background: var(--emerald);
  color: var(--cream);
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.dash-btn:hover{ background: var(--emerald-deep); }

/* KPI CARDS */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card{
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.kpi-card.feature{
  background: var(--emerald);
  color: var(--cream);
  border-color: var(--emerald);
}
.kpi-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.kpi-label{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
  font-weight: 600;
}
.kpi-icon{
  width: 36px; height: 36px;
  background: var(--cream-2);
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--emerald);
}
.kpi-card.feature .kpi-icon{
  background: rgba(245,237,224,.12);
  color: var(--gold);
}
.kpi-value{
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 10px;
}
.kpi-value .pre{ font-size: 22px; opacity: .7; }
.kpi-delta{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
}
.kpi-delta.up{ color: #2a6049; background: rgba(42,96,73,.1); }
.kpi-card.feature .kpi-delta.up{ color: var(--gold); background: rgba(200,162,76,.15); }
.kpi-delta.down{ color: var(--terra); background: rgba(194,98,74,.1); }
.kpi-sub{
  font-size: 11.5px;
  opacity: .65;
  margin-left: 6px;
}

/* CHART CARDS */
.dash-row{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.dash-card{
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 24px;
}
.dash-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.dash-card-title{
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
}
.dash-card-sub{
  font-size: 12px;
  color: var(--ink-2);
  opacity: .65;
  margin-top: 2px;
}
.dash-card-actions{
  display: flex;
  gap: 4px;
  background: var(--cream-2);
  border-radius: 8px;
  padding: 3px;
}
.dash-card-actions button{
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 5px;
  color: var(--ink-2);
}
.dash-card-actions button.active{
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.chart-area{
  height: 280px;
  width: 100%;
  position: relative;
}
.chart-svg{
  width: 100%;
  height: 100%;
}

.legend{
  display: flex;
  gap: 20px;
  margin-top: 16px;
  font-size: 12px;
}
.legend-item{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
}
.legend-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
}

/* DONUT */
.donut-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}
.donut{
  position: relative;
  width: 200px; height: 200px;
}
.donut-center{
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  text-align: center;
}
.donut-center .val{
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
}
.donut-center .lbl{
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
.donut-legend{
  width: 100%;
  margin-top: 24px;
}
.donut-legend-row{
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}
.donut-legend-row:last-child{ border-bottom: none; }
.donut-legend-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 10px;
}
.donut-legend-name{ flex: 1; }
.donut-legend-val{ font-family: var(--font-serif); font-weight: 500; }

/* TABLE */
.dash-table{
  width: 100%;
  border-collapse: collapse;
}
.dash-table th{
  text-align: left;
  padding: 12px 14px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  border-bottom: 1px solid var(--line-2);
  opacity: .75;
}
.dash-table td{
  padding: 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line-2);
}
.dash-table tr:last-child td{ border-bottom: none; }
.dash-table tr:hover td{ background: var(--cream-2); }

.donor-cell{
  display: flex;
  align-items: center;
  gap: 12px;
}
.donor-avatar{
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--cream);
}
.donor-name{ font-weight: 600; }
.donor-email{ font-size: 11.5px; color: var(--ink-2); opacity: .7; }

.pill{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.pill-success{ background: rgba(42,96,73,.1); color: #2a6049; }
.pill-pending{ background: rgba(200,162,76,.15); color: var(--gold-deep); }
.pill-monthly{ background: rgba(31,64,52,.08); color: var(--emerald); }
.pill-once{ background: rgba(194,98,74,.1); color: var(--terra); }

.amount{
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
}

/* WORLD MAP CARD */
.geo-card .countries{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.geo-row{
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.geo-bar{
  height: 6px;
  background: var(--cream-2);
  border-radius: 100px;
  overflow: hidden;
}
.geo-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
  border-radius: 100px;
}
.geo-val{
  font-family: var(--font-serif);
  font-weight: 500;
  text-align: right;
}

/* CAMPAIGN PROGRESS */
.camp-card{
  margin-top: 16px;
}
.camp-row{
  padding: 16px 0;
  border-bottom: 1px solid var(--line-2);
}
.camp-row:last-child{ border-bottom: none; }
.camp-row-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.camp-name{ font-weight: 600; font-size: 14px; }
.camp-loc{ font-size: 11px; color: var(--ink-2); opacity: .7; }
.camp-prog{
  height: 8px;
  background: var(--cream-2);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.camp-prog-fill{
  height: 100%;
  background: var(--emerald);
  border-radius: 100px;
}
.camp-row.gold .camp-prog-fill{ background: var(--gold); }
.camp-row.terra .camp-prog-fill{ background: var(--terra); }
.camp-meta{
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.camp-meta .raised{ font-family: var(--font-serif); font-weight: 500; color: var(--ink); font-size: 13px; }

/* ========================================================
   UPCOMING CAMPAIGNS
   ======================================================== */
.upcoming-section{
  padding: 120px 48px;
  background: var(--paper);
  position: relative;
}
.upcoming-header{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: end;
  gap: 40px;
  margin-bottom: 56px;
}
.upcoming-header h2{ margin: 14px 0 20px; }
.upcoming-lede{
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 580px;
}
.upcoming-header .schedule-link{
  justify-self: end;
  text-align: right;
}

.upcoming-grid{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
}

/* FEATURED CARD */
.upcoming-featured{
  background: var(--emerald-deep);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 48px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.upcoming-featured::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(200,162,76,.22) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(194,98,74,.12) 0%, transparent 55%);
  pointer-events: none;
}
.upcoming-featured::after{
  content: '';
  position: absolute;
  bottom: -120px;
  right: -120px;
  width: 300px; height: 300px;
  border: 1px solid rgba(200,162,76,.15);
  border-radius: 50%;
  pointer-events: none;
}
.upcoming-featured > *{ position: relative; z-index: 1; }

.upcoming-featured-badge{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  background: rgba(200,162,76,.16);
  border: 1px solid rgba(200,162,76,.4);
  border-radius: 100px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  align-self: flex-start;
  margin-bottom: 32px;
}
.upcoming-featured-badge .pulse-dot{
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.upcoming-featured-date{
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 36px;
  font-family: var(--font-serif);
  flex-wrap: wrap;
}
.upcoming-featured-date .month{
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--gold);
  font-family: var(--font-sans);
}
.upcoming-featured-date .day{
  font-size: clamp(72px, 8.5vw, 124px);
  font-weight: 300;
  line-height: .85;
  letter-spacing: -.04em;
  color: var(--cream);
}
.upcoming-featured-date .day .dash{
  font-size: .45em;
  vertical-align: middle;
  margin: 0 .12em;
  font-weight: 200;
  opacity: .55;
  color: var(--gold);
}
.upcoming-featured-date .year{
  font-size: 22px;
  font-weight: 400;
  opacity: .45;
  letter-spacing: .18em;
  font-family: var(--font-sans);
}

.upcoming-featured-loc{
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,237,224,.7);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.upcoming-title{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  color: var(--cream);
}
.upcoming-title em{ font-style: italic; color: var(--gold); }
.upcoming-desc{
  font-size: 15px;
  line-height: 1.65;
  color: rgba(245,237,224,.78);
  margin-bottom: 32px;
  max-width: 460px;
}

.upcoming-stats{
  display: flex;
  gap: 40px;
  padding: 24px 0;
  border-top: 1px solid rgba(245,237,224,.13);
  border-bottom: 1px solid rgba(245,237,224,.13);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.upcoming-stats > div{ flex: 0 0 auto; }
.upcoming-stats .num{
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--gold);
  line-height: 1;
}
.upcoming-stats .num sup{ font-size: .55em; opacity: .8; margin-left: 2px; }
.upcoming-stats .lbl{
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,237,224,.6);
  margin-top: 7px;
}

.upcoming-progress{ margin-bottom: 32px; }
.upcoming-progress .progress-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: rgba(245,237,224,.78);
  letter-spacing: .02em;
}
.upcoming-progress .progress-head strong{
  color: var(--cream);
  font-weight: 600;
}
.upcoming-progress .percent{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -.01em;
}
.upcoming-progress .bar{
  height: 8px;
  background: rgba(245,237,224,.1);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.upcoming-progress .bar .fill{
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, #e8c878 100%);
  border-radius: 100px;
  position: relative;
}
.upcoming-progress .bar .fill::after{
  content: '';
  position: absolute;
  right: -2px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(200,162,76,.2);
}

.upcoming-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: all .25s ease;
}
.upcoming-cta:hover{
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* AGENDA LIST */
.upcoming-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upcoming-item{
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 70px 1fr 38px;
  gap: 22px;
  align-items: center;
  transition: all .25s ease;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.upcoming-item:hover{
  background: var(--paper);
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.upcoming-item-date{
  text-align: center;
  padding-right: 20px;
  border-right: 1px solid var(--line-2);
}
.upcoming-item-date .month{
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 700;
}
.upcoming-item-date .day{
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: 4px;
  line-height: 1;
}
.upcoming-item-info{ min-width: 0; }
.upcoming-item-loc{
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .7;
  margin-bottom: 4px;
  font-weight: 600;
}
.upcoming-item-info h4{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: 12px;
  color: var(--ink);
}
.upcoming-item-prog{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--ink-2);
}
.upcoming-item-prog .bar{
  flex: 1;
  height: 4px;
  background: var(--cream);
  border-radius: 100px;
  overflow: hidden;
}
.upcoming-item-prog .bar .fill{
  height: 100%;
  background: var(--emerald);
  border-radius: 100px;
}
.upcoming-item-prog .percent{
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--emerald);
}
.upcoming-item-cta{
  width: 36px; height: 36px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: all .3s ease;
}
.upcoming-item:hover .upcoming-item-cta{
  background: var(--gold);
  color: var(--ink);
  transform: rotate(-45deg);
}

/* ========================================================
   CROWD BANNER (auto-scrolling marquee of recent campaigns)
   ======================================================== */
.crowd-banner{
  background: var(--ink);
  padding: 80px 0 90px;
  overflow: hidden;
  position: relative;
}
.crowd-banner::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(31,64,52,.35) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(200,162,76,.1) 0%, transparent 55%);
  pointer-events: none;
}
.crowd-banner > *{ position: relative; z-index: 1; }

.crowd-banner-header{
  padding: 0 48px 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: var(--cream);
  gap: 40px;
  flex-wrap: wrap;
}
.crowd-banner-header h2{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 14px 0 0;
  color: var(--cream);
  max-width: 720px;
}
.crowd-banner-header h2 em{
  font-style: italic;
  color: var(--gold);
}
.crowd-banner-header .section-eyebrow{
  color: var(--gold);
}
.crowd-banner-header .section-eyebrow::before{
  background: var(--gold);
}
.crowd-banner-note{
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(245,237,224,.5);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.crowd-banner-note .live-dot{
  width: 7px; height: 7px;
  background: var(--terra);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.crowd-track-wrap{
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.crowd-track{
  display: flex;
  width: max-content;
  animation: scrollCrowd 60s linear infinite;
}
.crowd-banner:hover .crowd-track{
  animation-play-state: paused;
}
@keyframes scrollCrowd{
  from{ transform: translateX(0); }
  to{ transform: translateX(-1980px); } /* 5 panels × 396px (380 + 16) */
}

.crowd-panel{
  flex: 0 0 auto;
  width: 380px;
  height: 280px;
  margin-right: 16px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: transform .4s ease, box-shadow .4s ease;
  cursor: pointer;
  background: #0a1830;
}
.crowd-panel:hover{
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}
.crowd-panel-art{
  width: 100%;
  height: 100%;
  display: block;
}

.crowd-panel-overlay{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 24px 22px;
  background: linear-gradient(to top, rgba(0,0,0,.92) 30%, rgba(0,0,0,.4) 65%, transparent);
  color: var(--cream);
  z-index: 2;
}
.crowd-panel-loc{
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.crowd-panel-title{
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -.01em;
  margin-bottom: 14px;
  line-height: 1.15;
  color: var(--cream);
}
.crowd-panel-meta{
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.crowd-panel-meta .num{
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--cream);
  line-height: 1;
}
.crowd-panel-meta .sub{
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
}

/* ========================================================
   IMPACT STATS — Souls, Cities, Countries, Nights
   ======================================================== */
.impact-stats-section{
  padding: 120px 48px;
  background: var(--paper);
  position: relative;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.impact-stats-section::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(200,162,76,.05) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(31,64,52,.04) 0%, transparent 45%);
  pointer-events: none;
}
.impact-stats-section > *{ position: relative; }

.impact-stats-header{
  max-width: 760px;
  margin: 0 auto 80px;
  text-align: center;
}
.impact-stats-header .section-eyebrow{
  display: inline-flex;
  justify-content: center;
}
.impact-stats-header h2{
  margin-top: 16px;
}
.impact-stats-lede{
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-top: 24px;
}

.impact-stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 32px;
  max-width: 1280px;
  margin: 0 auto;
}

.impact-stat{
  text-align: left;
  position: relative;
  padding-top: 28px;
}
.impact-stat-rule{
  position: absolute;
  top: 0; left: 0;
  width: 42px;
  height: 2px;
  background: var(--gold);
}

.impact-stat-num{
  font-family: var(--font-serif);
  font-size: clamp(56px, 6.8vw, 104px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: .95;
  color: var(--emerald);
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
}
.impact-stat-num-value{
  display: inline-block;
  min-width: 1ch;
  font-variant-numeric: tabular-nums;
}
.impact-stat-num sup{
  font-size: .3em;
  color: var(--gold);
  font-weight: 600;
  margin-left: 6px;
  margin-top: .35em;
  letter-spacing: .04em;
  font-family: var(--font-sans);
}

.impact-stat-label{
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 8px;
}

.impact-stat-desc{
  font-size: 13.5px;
  color: var(--ink-2);
  opacity: .72;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.005em;
  line-height: 1.4;
}

.impact-stats-footer{
  margin-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .7;
  font-weight: 600;
  flex-wrap: wrap;
}
.impact-stats-footer .since-line{
  width: 60px;
  height: 1px;
  background: var(--ink-2);
  opacity: .3;
  flex-shrink: 0;
}
.impact-stats-footer .since-dot{
  color: var(--gold);
  opacity: .9;
  font-family: var(--font-serif);
  font-size: 14px;
  opacity: 1;
}

/* ========================================================
   REGISTRATION PAGE
   ======================================================== */
.reg-hero{
  padding: 80px 48px 60px;
  background: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.reg-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(31,64,52,.05) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(200,162,76,.05) 0%, transparent 45%);
  pointer-events: none;
}
.reg-hero-content{
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.reg-hero h1{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 96px);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 22px 0 14px;
  color: var(--ink);
}
.reg-hero h1 em{
  font-style: italic;
  color: var(--emerald);
}
.reg-hero-tagline{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--emerald);
  margin-bottom: 24px;
  letter-spacing: -.01em;
}
.reg-hero-lede{
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

.reg-body{
  padding: 0 48px 120px;
  background: var(--paper);
}
.reg-grid{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* ── LEFT supporting column ── */
.reg-aside{
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 90px;
}
.reg-aside-card{
  background: var(--emerald-deep);
  color: var(--cream);
  padding: 36px 32px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.reg-aside-card::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(200,162,76,.22) 0%, transparent 55%);
  pointer-events: none;
}
.reg-aside-card > *{ position: relative; }
.reg-aside-eyebrow{
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 18px;
}
.reg-aside-quote{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--cream);
  margin-bottom: 0;
}

.reg-benefits{
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: 32px 28px;
  border-radius: var(--radius);
}
.reg-benefits-header{
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--emerald);
  font-weight: 600;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.reg-benefits-header::before{
  content: '';
  width: 24px; height: 1px;
  background: var(--gold);
}
.reg-benefits ul{
  list-style: none;
  margin: 0; padding: 0;
}
.reg-benefits li{
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 11px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line-2);
}
.reg-benefits li:last-child{ border-bottom: none; }
.reg-benefits li::before{
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}

.reg-verse-card{
  background: linear-gradient(135deg, var(--cream-2) 0%, var(--cream) 100%);
  border: 1px solid var(--line-2);
  padding: 28px;
  border-radius: var(--radius);
  text-align: center;
  position: relative;
}
.reg-verse-card .verse{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 12px;
}
.reg-verse-card .verse-attr{
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .75;
  font-weight: 600;
}

/* ── RIGHT form column ── */
.reg-form{
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 48px 44px;
  box-shadow: var(--shadow);
}

.reg-section{
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line-2);
}
.reg-section:last-of-type{
  border-bottom: none;
  padding-bottom: 0;
}

.reg-section-header{
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
}
.reg-section-num{
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: -.02em;
  line-height: 1;
}
.reg-section-title{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -.01em;
}

.reg-field{
  margin-bottom: 22px;
}
.reg-field:last-child{ margin-bottom: 0; }
.reg-field label{
  display: block;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 8px;
  opacity: .85;
}
.reg-field .req{
  color: var(--gold);
  margin-left: 2px;
  font-weight: 700;
}

.reg-input,
.reg-select{
  width: 100%;
  padding: 13px 16px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ink);
  transition: all .2s;
}
.reg-input:focus,
.reg-select:focus{
  outline: none;
  border-color: var(--emerald);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(31,64,52,.08);
}
.reg-input::placeholder{ color: var(--ink-2); opacity: .4; }

.reg-select-wrap{
  position: relative;
}
.reg-select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.reg-select-wrap::after{
  content: '';
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  opacity: .55;
}

.reg-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.reg-row .reg-field{ margin-bottom: 22px; }

/* ── Payment mode pills ── */
.payment-mode-group{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.payment-mode-option{
  cursor: pointer;
  position: relative;
}
.payment-mode-option input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.payment-mode-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: all .2s;
  text-align: center;
}
.payment-mode-pill svg{
  width: 18px; height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  flex-shrink: 0;
}
.payment-mode-option:hover .payment-mode-pill{
  border-color: var(--emerald);
  color: var(--ink);
}
.payment-mode-option input:checked + .payment-mode-pill{
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--cream);
  box-shadow: 0 4px 12px rgba(31,64,52,.18);
}
.payment-mode-option input:focus-visible + .payment-mode-pill{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.reg-helper{
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
  opacity: .8;
  margin-bottom: 24px;
  padding: 12px 14px;
  background: rgba(200,162,76,.08);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.reg-helper strong{ color: var(--emerald); font-weight: 700; }

/* ── Amount chips ── */
.amount-selector{
  display: none;
}
.amount-selector.active{
  display: block;
  animation: fadeIn .35s ease;
}
.amount-selector-label{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.amount-selector-label > span:first-child{
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}
.amount-currency{
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--emerald);
}

.amount-chips{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 8px;
}
.amount-chip{
  position: relative;
  cursor: pointer;
}
.amount-chip input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.amount-chip span{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition: all .2s;
  text-align: center;
}
.amount-chip:hover span{
  border-color: var(--emerald);
  transform: translateY(-1px);
}
.amount-chip input:checked + span{
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--cream);
}
.amount-chip input:focus-visible + span{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Submit ── */
.reg-submit-wrap{
  margin-top: 36px;
}
.reg-submit{
  width: 100%;
  padding: 18px 28px;
  background: var(--emerald);
  color: var(--cream);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: inherit;
  transition: all .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: none;
  cursor: pointer;
}
.reg-submit:hover{
  background: var(--emerald-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(31,64,52,.25);
}
.reg-submit svg{
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}
.reg-small-print{
  font-size: 12px;
  color: var(--ink-2);
  opacity: .7;
  line-height: 1.5;
  margin-top: 16px;
  text-align: center;
}
.reg-small-print a{
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========================================================
   DONATION PAGE — extends registration form styles
   ======================================================== */
/* The donation page reuses .reg-form, .reg-section, .reg-field,
   .reg-input, .reg-select, .amount-chip, .payment-mode-pill etc.
   These are donation-only additions. */

.donation-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 700;
}
.donation-eyebrow::before{
  content: '';
  width: 28px; height: 1px;
  background: var(--terra);
}

.donation-where-card{
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: 28px;
  border-radius: var(--radius);
}
.donation-where-card .reg-benefits-header{
  color: var(--terra);
}
.donation-where-card .reg-benefits-header::before{
  background: var(--terra);
}
.donation-where-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line-2);
  gap: 14px;
}
.donation-where-row:last-child{ border-bottom: none; }
.donation-where-label{
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.donation-where-pct{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--emerald);
  letter-spacing: -.02em;
  line-height: 1;
}
.donation-where-pct .pct-sign{
  font-size: .6em;
  color: var(--gold);
  margin-left: 2px;
  font-style: italic;
}

/* Custom amount input (for "Any Amount" / "Enter Amount") */
.custom-amount-field{
  margin-top: 18px;
  display: none;
}
.custom-amount-field.active{
  display: block;
  animation: fadeIn .35s ease;
}
.custom-amount-label{
  display: block;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 8px;
}
.custom-amount-input-wrap{
  position: relative;
}
.custom-amount-input-wrap .currency-sign{
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--emerald);
  pointer-events: none;
}
.custom-amount-input{
  width: 100%;
  padding: 14px 18px 14px 42px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  transition: all .2s;
}
.custom-amount-input:focus{
  outline: none;
  border-color: var(--emerald);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(31,64,52,.08);
}
.amount-min-note{
  font-size: 12px;
  color: var(--ink-2);
  opacity: .7;
  margin-top: 8px;
}

/* PayPal sub-options — only visible when PayPal is selected */
.paypal-sub-section{
  display: none;
  margin-top: 24px;
  padding: 20px;
  background: rgba(31,64,52,.04);
  border: 1px dashed var(--emerald);
  border-radius: var(--radius);
}
.paypal-sub-section.active{
  display: block;
  animation: fadeIn .35s ease;
}
.paypal-sub-toggle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.paypal-sub-option{
  cursor: pointer;
  position: relative;
}
.paypal-sub-option input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.paypal-sub-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: all .2s;
}
.paypal-sub-option input:checked + .paypal-sub-pill{
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--cream);
}

/* Credit card fields panel — shown when "Credit Card" PayPal sub-option chosen */
.cc-fields{
  display: none;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  margin-top: 18px;
}
.cc-fields.active{
  display: block;
  animation: fadeIn .35s ease;
}
.cc-fields-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.cc-fields-row:last-child{ margin-bottom: 0; }

/* ========================================================
   DASHBOARD SECTION SWITCHING (sidebar nav response)
   ======================================================== */

.dash-nav-item{
  cursor: pointer;
  user-select: none;
}

/* Section header pattern */



/* Generic placeholder card for coming-soon views */







/* Donations list table */
.donations-list-table{
  width: 100%;
  border-collapse: collapse;
}
.donations-list-table th{
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
  background: var(--cream-2);
}
.donations-list-table td{
  padding: 16px 20px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line-2);
}
.donations-list-table tr:last-child td{ border-bottom: none; }
.donations-list-table tr:hover td{ background: rgba(31,64,52,.02); }
.don-amount{
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--emerald);
  letter-spacing: -.01em;
}
.don-method{
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.don-method-card{ background: rgba(31,64,52,.1); color: var(--emerald); }
.don-method-momo{ background: rgba(194,98,74,.1); color: var(--terra); }
.don-method-paypal{ background: rgba(200,162,76,.15); color: #8a6a1f; }
.don-status{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.don-status.completed{ color: var(--emerald); }
.don-status.pending{ color: var(--gold); }
.don-status .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Settings panels */
.settings-panel{
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 28px;
}
.settings-panel-title{
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.005em;
  margin-bottom: 6px;
}
.settings-panel-desc{
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 22px;
  opacity: .85;
}
.settings-field{
  margin-bottom: 18px;
}
.settings-field:last-child{ margin-bottom: 0; }
.settings-field label{
  display: block;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
  margin-bottom: 7px;
}
.settings-field input,
.settings-field select{
  width: 100%;
  padding: 10px 14px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
}
.settings-field input:focus{
  outline: none;
  border-color: var(--emerald);
  background: var(--paper);
}

/* ========================================================
   LIVE EDIT MODE — universal frontend editing (Avada-style)
   ======================================================== */




@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(26,24,21,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(26,24,21,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,24,21,0); }
}

/* Show "Live Edit ON" banner when active */
/* Editable element styling — applied when



/* Edit-mode floating toolbar for live-edit page elements */




.le-divider{
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.15);
  margin: 0 2px;
}

/* Save indicator (fixed at bottom-right when live-edit is on) */
.pages-mgmt-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 24px;
  flex-wrap: wrap;
}
.pages-mgmt-title{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
}
.pages-mgmt-title em{
  font-style: italic;
  color: var(--emerald);
}
.pages-mgmt-meta{
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .7;
  font-weight: 600;
}

.pages-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
























/* Recent edits timeline */
.recent-edits-list{
  list-style: none;
  margin: 0; padding: 0;
}
.recent-edit{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.recent-edit:last-child{ border-bottom: none; }
.recent-edit-dot{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cream-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--emerald);
  flex-shrink: 0;
}
.recent-edit-dot svg{ width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.recent-edit-text{
  flex: 1;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
}
.recent-edit-text strong{
  font-weight: 600;
  color: var(--emerald);
}
.recent-edit-time{
  font-size: 11px;
  color: var(--ink-2);
  opacity: .6;
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* ========================================================
   AVADA-STYLE EDITOR — visual selection + floating toolbar
   ======================================================== */

/* Canvas blocks: hover and selection states */



/* Inline-editable text — subtle indicator on hover */
[contenteditable="true"]{
  outline: none;
  position: relative;
  transition: background .15s;
}
[contenteditable="true"]:hover{
  background: rgba(200,162,76,.06);
  cursor: text;
}
[contenteditable="true"]:focus{
  background: rgba(200,162,76,.1);
  box-shadow: inset 0 0 0 1px rgba(200,162,76,.5);
  border-radius: 3px;
}

/* Floating toolbar — appears above selected element */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ft-btn{
  width: 32px; height: 32px;
  background: transparent;
  color: var(--cream);
  border: none;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.ft-btn svg{
  width: 14px; height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.ft-btn:hover{
  background: rgba(255,255,255,.1);
}
.ft-btn.ft-danger:hover{
  background: var(--terra);
  color: white;
}
.ft-divider{
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.15);
  align-self: center;
  margin: 0 3px;
}
.ft-label{
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  border-right: 1px solid rgba(255,255,255,.15);
  margin-right: 4px;
}

/* "+" buttons between blocks to insert new sections */




/* Right-panel slide-out for selected element properties */









.editor-prop-group{
  margin-bottom: 24px;
}
.editor-prop-group-label{
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
  margin-bottom: 12px;
  opacity: .8;
}
.editor-prop-row{
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.editor-prop-input{
  width: 100%;
  padding: 9px 12px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
}
.editor-prop-input:focus{
  outline: none;
  border-color: var(--emerald);
  background: var(--paper);
}
.editor-prop-toggle-group{
  display: flex;
  gap: 4px;
  background: var(--cream-2);
  padding: 3px;
  border-radius: 8px;
}
.editor-prop-toggle{
  flex: 1;
  padding: 7px;
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 5px;
  transition: all .15s;
}
.editor-prop-toggle.active{
  background: var(--emerald);
  color: var(--cream);
}
.color-swatches{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.color-swatch{
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .15s;
  position: relative;
}
.color-swatch:hover{
  transform: scale(1.1);
}
.color-swatch.active{
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--paper) inset;
}

/* Status bar at bottom of editor */

.editor-breadcrumb{
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .8;
}
.editor-breadcrumb-sep{
  opacity: .4;
}
.editor-breadcrumb-current{
  color: var(--gold);
  font-weight: 600;
}
.editor-status-item{
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .7;
}
.editor-status-saved{
  color: #6bd896;
}
.editor-status-saved::before{
  content: '●';
  font-size: 8px;
}

/* Adjust editor body to leave room for statusbar */
.editor-body{
  padding-bottom: 32px;
}

/* ========================================================
   MOBILE MENU (hamburger overlay)
   ======================================================== */
.mobile-nav-toggle{
  display: none;
  width: 44px; height: 44px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  flex-shrink: 0;
}
.mobile-nav-toggle:hover{ background: var(--emerald); }
.mobile-nav-toggle svg{
  width: 22px; height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.mobile-menu{
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--cream);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 32px;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto;
  visibility: hidden;
}
.mobile-menu.open{
  transform: translateY(0);
  visibility: visible;
}
.mobile-menu::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 0%, rgba(200,162,76,.15) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(31,64,52,.4) 0%, transparent 50%);
  pointer-events: none;
}
.mobile-menu > *{ position: relative; z-index: 1; }
.mobile-menu-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.mobile-menu-header .brand-name{ color: var(--cream); }
.mobile-menu-header .brand-tag{ color: rgba(245,237,224,.55); }
.mobile-menu-close{
  width: 44px; height: 44px;
  background: rgba(245,237,224,.08);
  color: var(--cream);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: background .2s;
  border: 1px solid rgba(245,237,224,.06);
}
.mobile-menu-close:hover{ background: rgba(245,237,224,.15); }
.mobile-menu-eyebrow{
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.mobile-menu-eyebrow::before{
  content: '';
  width: 20px; height: 1px;
  background: var(--gold);
}
.mobile-menu-nav{
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}
.mobile-menu-nav a{
  padding: 18px 0;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--cream);
  border-bottom: 1px solid rgba(245,237,224,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color .2s;
  letter-spacing: -.01em;
}
.mobile-menu-nav a:last-child{ border-bottom: none; }
.mobile-menu-nav a:hover, .mobile-menu-nav a:active{ color: var(--gold); }
.mobile-menu-nav a .arrow{
  font-family: var(--font-sans);
  font-size: 16px;
  opacity: .35;
  font-weight: 400;
}
.mobile-menu-cta{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
}
.mobile-menu-cta a{
  padding: 17px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 100px;
  transition: all .25s;
}
.mobile-menu-cta .primary{
  background: var(--gold);
  color: var(--ink);
}
.mobile-menu-cta .primary:active{ background: var(--cream); }
.mobile-menu-cta .secondary{
  border: 1.5px solid rgba(245,237,224,.4);
  color: var(--cream);
}
.mobile-menu-cta .secondary:active{
  background: rgba(245,237,224,.06);
  border-color: var(--cream);
}
.mobile-menu-meta{
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245,237,224,.4);
  text-align: center;
}
.mobile-menu-meta a{
  color: var(--gold);
  margin-left: 8px;
}
body.menu-open{ overflow: hidden; }

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

/* Tablet & below (≤ 1100px) — main layout breakpoint */
@media (max-width: 1100px){
  /* Site header collapses */
  .site-nav, .site-header > a.btn-primary{ display: none; }
  .mobile-nav-toggle{ display: flex; }
  .site-header{ padding: 22px 36px; }

  /* Hero */
  .hero{ padding: 60px 48px 80px; grid-template-columns: 1fr; gap: 60px; }
  .hero-visual{ height: 440px; max-width: 560px; width: 100%; }

  /* About */
  .about-section{ padding: 96px 48px; grid-template-columns: 1fr; gap: 60px; }
  .about-visual{ position: relative; top: 0; max-width: 520px; }

  /* Donate */
  .tier-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }

  /* Impact */
  .impact-grid{ grid-template-columns: repeat(2, 1fr); gap: 36px; }

  /* Footer */
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Dashboard */
  .dash-row{ grid-template-columns: 1fr; }
  .kpi-grid{ grid-template-columns: repeat(2, 1fr); }
  .dashboard-wrap{ grid-template-columns: 1fr; }
  .dash-sidebar{ display: none; }
  .dash-main{ padding: 28px 32px; }

  /* Editor */
  .editor-body{ grid-template-columns: 1fr; }
  .editor-sidebar, .editor-properties{ display: none; }
  .editor-topbar{ flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .editor-topbar-center{ order: 3; flex-basis: 100%; justify-content: center; padding-top: 8px; border-top: 1px solid rgba(245,237,224,.06); }
  .editor-topbar-right span{ font-size: 11px; }

  /* Upcoming */
  .upcoming-grid{ grid-template-columns: 1fr; }
  .upcoming-header{ grid-template-columns: 1fr; gap: 20px; }
  .upcoming-header .schedule-link{ justify-self: start; text-align: left; }

  /* Gallery CTA */
  .gallery-section{ padding: 0 36px 96px; }
  .gallery-section a > div{ aspect-ratio: 16/9 !important; }

  /* Admin bar (hide secondary items) */
  .admin-bar a[data-view="editor"],
  .admin-bar a[data-view="website"]:not(.admin-bar-home){ display: none; }
  .admin-bar-greeting{ display: none; }
  body.is-admin .site-header{ padding-top: 60px; }

  /* Login */
  .login-page{ grid-template-columns: 1fr; }
  .login-aside{ min-height: 220px; padding: 32px 28px; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .login-aside-quote{ display: none; }
  .login-aside-footer{ display: none; }
  .login-form-wrap{ padding: 48px 32px; }
  .login-back{ top: 20px; right: 24px; }

  /* Impact stats */
  .impact-stats-section{ padding: 96px 48px; }
  .impact-stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 60px 40px; }
  .impact-stats-header{ margin-bottom: 64px; }

  /* Registration */
  .reg-grid{ grid-template-columns: 1fr; gap: 40px; }
  .reg-aside{ position: relative; top: 0; }
  .reg-aside-card{ padding: 32px 28px; }
  .reg-form{ padding: 40px 32px; }
}

/* Phone (≤ 700px) */
@media (max-width: 700px){
  /* Section horizontal padding */
  .hero, .about-section, .donate-section, .quote-section, .cta-section, .impact-bar, .upcoming-section{
    padding-left: 24px; padding-right: 24px;
  }

  /* HEADER */
  .site-header{ padding: 16px 24px; }

  /* HERO */
  .hero{ padding: 36px 24px 56px; gap: 36px; }
  .hero h1{ font-size: clamp(48px, 14vw, 84px) !important; letter-spacing: -.03em; }
  .hero h1 + p{ font-size: clamp(20px, 5.6vw, 28px) !important; }
  .hero-lede{ font-size: 16px; }
  .hero-eyebrow{ font-size: 10.5px; padding: 6px 12px; }
  .hero-cta{ flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
  .hero-cta .btn{ padding: 12px 20px; font-size: 11.5px; }
  .hero-visual{ height: 380px; }
  .hero-card-main{ padding: 24px; }
  .hero-card-quote{ font-size: 17px; }
  .hero-card-stat{ padding: 18px; }
  .hero-card-stat .number{ font-size: 26px !important; }
  .hero-badge{ width: 84px; height: 84px; left: 38%; top: 62%; }
  .hero-badge span{ font-size: 18px; }
  .hero-meta{ flex-wrap: wrap; gap: 0 !important; }
  .hero-meta-item{ flex: 1 1 30%; padding: 0 12px !important; border-right: 1px solid var(--line-2) !important; }
  .hero-meta-item:first-child{ padding-left: 0 !important; }
  .hero-meta-item:last-child{ border-right: 0 !important; padding-right: 0 !important; }
  .hero-meta-item > div:first-child{ font-size: 15px !important; }

  /* TITLES */
  .section-title{ font-size: clamp(32px, 8.5vw, 48px); }
  .section-eyebrow{ font-size: 10px; }

  /* IMPACT BAR (BENMP acronym) */
  .impact-bar{ padding: 56px 24px; }
  .impact-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .impact-num{ font-size: 64px !important; }
  .impact-item{ padding: 0 12px; }
  .impact-item:nth-child(odd){ border-left: 0; }
  .impact-item:nth-child(even){ border-left: 1px solid rgba(245,237,224,.15); }

  /* ABOUT */
  .about-section{ padding-top: 72px; padding-bottom: 72px; gap: 40px; }
  .about-visual{ max-width: 100%; }
  .about-image{ aspect-ratio: 4/5; }
  .about-image-content{ padding: 28px; }
  .about-image-content .verse{ font-size: 22px; }
  .about-pillars{ grid-template-columns: repeat(2, 1fr); gap: 28px 16px; margin-top: 36px; padding-top: 28px; }
  .pillar-letter{ font-size: 48px; }

  /* CROWD BANNER */
  .crowd-banner{ padding: 56px 0 64px; }
  .crowd-banner-header{ padding: 0 24px 32px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .crowd-banner-header h2{ font-size: clamp(28px, 8vw, 42px); }
  .crowd-panel{ width: 280px; height: 220px; margin-right: 14px; }
  .crowd-panel-overlay{ padding: 22px 20px 18px; }
  .crowd-panel-title{ font-size: 18px; }
  .crowd-panel-meta .num{ font-size: 22px; }
  @keyframes scrollCrowd{
    from{ transform: translateX(0); }
    to{ transform: translateX(-1470px); } /* 5 × (280+14) */
  }

  /* DONATE */
  .donate-section{ padding-top: 72px; padding-bottom: 72px; }
  .donate-header{ margin-bottom: 40px; }
  .tier-grid{ grid-template-columns: 1fr !important; gap: 16px; }
  .tier-card{ padding: 28px 24px; }
  .tier-card.featured{ transform: translateY(0); }
  .tier-card.featured:hover{ transform: translateY(-4px); }
  .tier-card div[style*="font-size: 56px"]{ font-size: 38px !important; }

  /* UPCOMING */
  .upcoming-section{ padding-top: 72px; padding-bottom: 72px; }
  .upcoming-header{ margin-bottom: 36px; }
  .upcoming-featured{ padding: 32px 24px; }
  .upcoming-featured-date{ gap: 14px; margin-bottom: 24px; align-items: center; }
  .upcoming-featured-date .day{ font-size: clamp(60px, 18vw, 100px); }
  .upcoming-featured-date > div:not(.day){ flex-direction: row !important; gap: 8px !important; align-items: baseline !important; }
  .upcoming-title{ font-size: 26px; }
  .upcoming-stats{ gap: 20px; flex-wrap: wrap; padding: 18px 0; }
  .upcoming-stats .num{ font-size: 26px; }
  .upcoming-progress .progress-head{ font-size: 11.5px; }
  .upcoming-progress .percent{ font-size: 20px; }
  .upcoming-cta{ padding: 14px 24px; width: 100%; }
  .upcoming-item{ grid-template-columns: 60px 1fr 32px; gap: 14px; padding: 16px; }
  .upcoming-item-info h4{ font-size: 15px; }

  /* QUOTE */
  .quote-section{ padding: 80px 24px; }
  .quote-text{ font-size: clamp(22px, 5.6vw, 32px); }
  .quote-section::before{ font-size: 160px; top: 24px; }

  /* GALLERY CTA */
  .gallery-section{ padding: 0 24px 64px; }
  .gallery-header{ flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .gallery-section a > div{ grid-template-columns: 1fr !important; aspect-ratio: auto !important; }
  .gallery-section a > div > div:last-child{ display: none; }
  .gallery-section a > div > div:first-child{ padding: 40px 28px !important; min-height: 280px; }
  .gallery-section a > div > div:first-child > div:nth-child(2) > div:first-child{ font-size: clamp(34px, 9vw, 48px) !important; }

  /* FINAL CTA */
  .cta-section{ padding: 72px 24px; }
  .cta-content h2{ font-size: clamp(32px, 8vw, 44px); }
  .cta-form{ flex-direction: column; gap: 10px; }
  .cta-form input{ text-align: center; }

  /* FOOTER */
  .site-footer{ padding: 48px 24px 28px; }
  .footer-grid{ grid-template-columns: 1fr !important; gap: 32px; margin-bottom: 32px; }
  .footer-bottom{ flex-direction: column; gap: 12px; text-align: center; padding-top: 24px; font-size: 11.5px; }
  .footer-bottom > div:last-child{ flex-direction: column; gap: 8px; }

  /* DASHBOARD */
  .dashboard-wrap{ padding-top: 60px; }
  .dash-main{ padding: 24px 20px; }
  .dash-header{ flex-direction: column; align-items: flex-start; gap: 18px; }
  .dash-greeting h1{ font-size: 26px; }
  .dash-header-actions{ width: 100%; flex-wrap: wrap; }
  .kpi-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi-card{ padding: 18px; }
  .kpi-value{ font-size: 30px; }
  .dash-card{ padding: 20px; }
  .dash-card-head{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .dash-card-title{ font-size: 17px; }
  .chart-area{ height: 220px; }
  .dash-table{ font-size: 12px; min-width: 540px; }
  .dash-table th, .dash-table td{ padding: 10px 8px; }
  .dash-card .dash-table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-card .dash-table thead, .dash-card .dash-table tbody, .dash-card .dash-table tr{ display: table; width: 100%; table-layout: fixed; }
  .geo-row{ grid-template-columns: 90px 1fr 56px; gap: 8px; font-size: 12px; }
  .donor-email{ display: none; }

  /* EDITOR */
  .editor-canvas-wrap{ padding: 14px; }
  .editor-canvas{ min-height: 600px; }
  .canvas-hero{ grid-template-columns: 1fr !important; padding: 32px 24px !important; gap: 24px !important; }
  .canvas-hero h1{ font-size: 36px !important; }
  .canvas-hero-img{ aspect-ratio: 4/3 !important; }
  .canvas-stats{ grid-template-columns: 1fr 1fr !important; padding: 24px !important; gap: 18px !important; }
  .canvas-text{ padding: 32px 24px !important; }
  .canvas-text h2{ font-size: 28px !important; }
  .canvas-tiers{ padding: 32px 24px !important; }
  .canvas-tiers-grid{ grid-template-columns: 1fr !important; }
  .canvas-quote{ padding: 40px 28px !important; }
  .canvas-quote p{ font-size: 22px !important; }

  /* LOGIN */
  .login-aside{ min-height: 140px; padding: 24px 24px; }
  .login-form-wrap{ padding: 40px 24px 32px; }
  .login-form h1{ font-size: 34px; }
  .login-sub{ font-size: 13px; margin-bottom: 28px; }
  .login-eyebrow{ font-size: 10px; }

  /* ADMIN BAR */
  .admin-bar{ padding: 0 4px; height: 42px; }
  .admin-bar a{ padding: 0 10px; font-size: 12.5px; gap: 6px; }
  .admin-bar a[data-view="dashboard"] svg{ display: none; }
  body.is-admin .site-header{ padding-top: 60px; }

  /* IMPACT STATS */
  .impact-stats-section{ padding: 72px 24px; }
  .impact-stats-header{ margin-bottom: 56px; }
  .impact-stats-grid{ gap: 48px 24px; }
  .impact-stat-num{ font-size: clamp(48px, 14vw, 84px); }
  .impact-stat-label{ font-size: 11px; letter-spacing: .18em; }
  .impact-stats-footer{ flex-direction: column; gap: 10px; margin-top: 56px; font-size: 10px; }
  .impact-stats-footer .since-line{ width: 36px; }

  /* REGISTRATION */
  .reg-hero{ padding: 56px 24px 48px; }
  .reg-hero h1{ font-size: clamp(40px, 11vw, 64px); }
  .reg-hero-tagline{ font-size: 18px; }
  .reg-hero-lede{ font-size: 15px; }
  .reg-body{ padding: 0 24px 80px; }
  .reg-form{ padding: 32px 24px; }
  .reg-section{ padding-bottom: 28px; margin-bottom: 28px; }
  .reg-section-header{ margin-bottom: 22px; }
  .reg-section-num{ font-size: 26px; }
  .reg-section-title{ font-size: 18px; }
  .reg-row{ grid-template-columns: 1fr; gap: 0; }
  .payment-mode-group{ grid-template-columns: 1fr; }
  .amount-chips{ grid-template-columns: repeat(3, 1fr); }
  .reg-submit{ font-size: 12px; padding: 16px 20px; }
  .reg-aside-card{ padding: 28px 24px; }
  .reg-aside-quote{ font-size: 19px; }
}

/* Small phone (≤ 480px) */
@media (max-width: 480px){
  /* HERO */
  .hero h1{ font-size: clamp(40px, 16vw, 64px) !important; }
  .hero h1 + p{ font-size: clamp(18px, 5.6vw, 22px) !important; }
  .hero-visual{ height: 320px; }
  .hero-badge{ display: none; }
  .hero-card-main{ padding: 20px; width: 82%; }
  .hero-card-quote{ font-size: 16px; }
  .hero-card-stat{ width: 56%; padding: 14px; }
  .hero-card-stat .number{ font-size: 18px !important; line-height: 1.15 !important; }
  .hero-card-stat .label{ font-size: 9px; }
  .hero-meta-item > div:first-child{ font-size: 14px !important; }
  .hero-meta-item .label{ font-size: 9.5px; letter-spacing: .1em; }

  /* IMPACT */
  .impact-grid{ grid-template-columns: 1fr; gap: 28px; }
  .impact-num{ font-size: 80px !important; }
  .impact-item{ border-left: 0 !important; padding: 0; text-align: center; }

  /* ABOUT */
  .about-pillars{ grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .pillar-letter{ font-size: 42px; }
  .about-content p:first-of-type{ font-size: 18px; }

  /* DASHBOARD */
  .kpi-grid{ grid-template-columns: 1fr; }
  .donut{ width: 170px; height: 170px; }
  .donut svg{ width: 170px; height: 170px; }

  /* CROWD BANNER */
  .crowd-panel{ width: 260px; height: 210px; margin-right: 12px; }
  @keyframes scrollCrowd{
    from{ transform: translateX(0); }
    to{ transform: translateX(-1360px); } /* 5 × (260+12) */
  }

  /* UPCOMING */
  .upcoming-stats .num{ font-size: 22px; }
  .upcoming-stats{ gap: 16px; }

  /* MOBILE MENU */
  .mobile-menu{ padding: 20px 24px 28px; }
  .mobile-menu-nav a{ font-size: 24px; padding: 16px 0; }

  /* QUOTE */
  .quote-text{ font-size: clamp(20px, 6vw, 28px); }

  /* IMPACT STATS */
  .impact-stats-grid{ grid-template-columns: 1fr; gap: 40px; }
  .impact-stat-num{ font-size: clamp(56px, 18vw, 96px); }
}

/* ───── BENMP CMS admin bar (replaces old admin-bar) ───── */
.cms-bar{position:sticky;top:0;z-index:9999;background:var(--ink);color:var(--cream);padding:0 24px;height:42px;display:flex;align-items:center;justify-content:space-between;font-family:'Manrope',system-ui,sans-serif}
.cms-bar-brand{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--gold);letter-spacing:.01em;text-decoration:none}
.cms-bar-logo{width:22px;height:22px;background:var(--gold);color:var(--ink);border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:14px}
.cms-bar-actions{display:flex;gap:18px;font-size:12px;align-items:center;flex-wrap:wrap}
.cms-bar-actions a{color:rgba(245,237,224,.78);font-weight:500;letter-spacing:.02em;text-decoration:none;transition:color .15s}
.cms-bar-actions a:hover{color:var(--gold)}
.cms-bar-actions .cms-bar-cta{color:var(--gold);font-weight:700}
.cms-bar-actions .cms-bar-logout{opacity:.55;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
body.is-admin{}
@media (max-width:760px){
  .cms-bar{height:auto;padding:10px 14px;flex-wrap:wrap;gap:10px}
  .cms-bar-actions{font-size:11px;gap:12px}
  .cms-bar-actions a:not(.cms-bar-cta):not(.cms-bar-logout){display:none}
}

/* ───── Language switcher (custom UI on top of Google Translate) ───── */
.lang-switcher{position:relative;margin-right:14px;font-family:'Manrope',sans-serif;flex-shrink:0}
.lang-toggle{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:transparent;border:1px solid var(--line);border-radius:100px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit;transition:all .2s;line-height:1}
.lang-toggle:hover{border-color:var(--emerald);color:var(--emerald)}
.lang-toggle svg{stroke:currentColor;flex-shrink:0}
.lang-toggle .lang-current{font-weight:700;letter-spacing:.08em}
.lang-toggle .lang-caret{transition:transform .2s}
.lang-toggle[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}
.lang-toggle[aria-expanded="true"]{border-color:var(--emerald);color:var(--emerald);background:var(--cream-2)}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;max-height:380px;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(26,24,21,.15);padding:6px;z-index:1000;display:none;font-family:'Manrope',sans-serif}
.lang-dropdown.open{display:block;animation:lang-fade-in .15s ease-out}
@keyframes lang-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.lang-dropdown .lang-option{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13.5px;color:var(--ink-2);border-radius:6px;text-decoration:none;transition:all .12s;font-weight:500;letter-spacing:0;text-transform:none}
.lang-dropdown .lang-option:hover{background:var(--cream-2);color:var(--emerald)}
.lang-dropdown .lang-option.active{background:var(--emerald);color:var(--cream);font-weight:600}
.lang-dropdown .lang-option.active:hover{background:var(--emerald-deep)}
.lang-dropdown .lang-flag{font-size:18px;line-height:1;flex-shrink:0;display:inline-block;width:22px;text-align:center}
.lang-dropdown .lang-name{flex:1;white-space:nowrap}
.lang-dropdown::-webkit-scrollbar{width:6px}
.lang-dropdown::-webkit-scrollbar-track{background:transparent}
.lang-dropdown::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* ───── Hide Google Translate's default UI clutter ───── */
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate{display:none !important;visibility:hidden !important}
body{top:0 !important;position:static !important}
.skiptranslate iframe{display:none !important}
.goog-te-gadget{display:none !important}
.goog-te-gadget-simple{display:none !important}
#google_translate_element{display:none !important}
.goog-te-balloon-frame{display:none !important}
.goog-tooltip, .goog-tooltip:hover{display:none !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}
font[style*="background-color"]{background-color:transparent !important;box-shadow:none !important}
iframe.skiptranslate{display:none !important;height:0 !important}

/* Mobile: smaller switcher */
@media (max-width:760px){
  .lang-switcher{margin-right:8px}
  .lang-toggle{padding:6px 11px;font-size:10.5px}
  .lang-toggle .lang-caret{display:none}
  .lang-dropdown{right:auto;left:0}
}
@media (max-width:480px){
  .site-header .lang-switcher{display:none}
}

/* ───── Crowd panels: photo support + colored fallback tones ───── */
.crowd-panel{position:relative;overflow:hidden}
.crowd-panel-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.crowd-panel .crowd-panel-overlay{z-index:3;position:absolute;left:0;right:0;bottom:0;padding:18px 20px 20px;background:linear-gradient(180deg,transparent 0%,rgba(10,7,4,.55) 35%,rgba(10,7,4,.92) 100%);color:#fff}
.crowd-panel-flag{font-size:14px;margin-right:4px}
.crowd-panel-loc{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.95;margin-bottom:6px;color:#fff}
.crowd-panel-title{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:18px;line-height:1.25;letter-spacing:-.005em;color:#fff;margin-bottom:14px}
.crowd-panel-title::before{content:'';display:block;width:64px;height:1px;background:var(--gold);opacity:.85;margin-bottom:10px}
.crowd-panel-meta{display:flex;align-items:baseline;gap:8px}
.crowd-panel-meta .num{font-family:'Fraunces',serif;font-size:30px;font-weight:400;line-height:1;letter-spacing:-.01em;color:#fff}
.crowd-panel-meta .sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;font-weight:600}

/* Default art layers (when no photo) — colored gradient backdrop + glow + horizon line */
.crowd-panel-art-default{position:absolute;inset:0;z-index:1}
.crowd-panel-art-glow{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);width:75%;height:65%;border-radius:50%;filter:blur(40px);z-index:2;opacity:.7}
.crowd-panel-art-horizon{position:absolute;left:18%;right:18%;top:54%;height:2px;background:var(--gold);opacity:.75;z-index:2;box-shadow:0 0 16px rgba(200,162,76,.5)}
.crowd-panel-art-stars{position:absolute;inset:0;z-index:2;opacity:.85;pointer-events:none}

/* Tones — color palettes used when no photo is uploaded */
.crowd-panel-tone-purple .crowd-panel-art-default{background:linear-gradient(180deg,#1a0f30 0%,#2a1f4d 60%,#1e1838 100%)}
.crowd-panel-tone-purple .crowd-panel-art-glow{background:radial-gradient(circle,#dfd4ff 0%,#a190ff 30%,transparent 65%)}
.crowd-panel-tone-navy .crowd-panel-art-default{background:linear-gradient(180deg,#06122a 0%,#1a2854 55%,#0d1a3a 100%)}
.crowd-panel-tone-navy .crowd-panel-art-glow{background:radial-gradient(circle,#fff5d8 0%,#c8a24c 28%,transparent 65%)}
.crowd-panel-tone-sunset .crowd-panel-art-default{background:linear-gradient(180deg,#3d1208 0%,#a8392a 55%,#5f1c10 100%)}
.crowd-panel-tone-sunset .crowd-panel-art-glow{background:radial-gradient(circle,#ffeacc 0%,#f29846 32%,transparent 70%)}
.crowd-panel-tone-amber .crowd-panel-art-default{background:linear-gradient(180deg,#2a1d05 0%,#5a3f12 55%,#2a1d05 100%)}
.crowd-panel-tone-amber .crowd-panel-art-glow{background:radial-gradient(circle,#fff5d8 0%,#c8a24c 30%,transparent 68%)}
.crowd-panel-tone-emerald .crowd-panel-art-default{background:linear-gradient(180deg,#06160f 0%,#16403a 55%,#0a2018 100%)}
.crowd-panel-tone-emerald .crowd-panel-art-glow{background:radial-gradient(circle,#e6fff5 0%,#5dcba0 30%,transparent 65%)}
.crowd-panel-tone-wine .crowd-panel-art-default{background:linear-gradient(180deg,#1c0814 0%,#4a1230 55%,#260a18 100%)}
.crowd-panel-tone-wine .crowd-panel-art-glow{background:radial-gradient(circle,#ffe0e8 0%,#d4607a 30%,transparent 68%)}

.crowd-panel-tone-amber.crowd-panel .crowd-panel-overlay,
.crowd-panel-tone-sunset.crowd-panel .crowd-panel-overlay{background:linear-gradient(180deg,transparent 0%,rgba(28,8,4,.45) 35%,rgba(28,8,4,.92) 100%)}

/* ───── Background image layers for Featured Quote + About Verse Box ───── */
/* Quote section: full-bleed photo behind text with mix-blend-mode */
.quote-section{overflow:hidden}
.quote-section .quote-section-bg{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;z-index:0}
.quote-section .quote-content{position:relative;z-index:2}
.quote-section::before{z-index:1}
/* When a background photo exists, the giant decorative " character sits over it; that's fine */

/* About verse box: photo layer between gradient backdrop and text */
.about-image{isolation:isolate}
.about-image-photo{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1;pointer-events:none;border-radius:inherit}
.about-image-content{position:relative;z-index:2}
.about-image::before{z-index:1}
/* Soft readability vignette over the photo so the verse text stays readable */
.about-image-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,41,31,.15) 0%,rgba(20,41,31,.55) 100%);pointer-events:none}

/* When a photo is present, give the section a subtle inner border so it reads as a contained card */
.about-image:has(.about-image-photo){box-shadow:inset 0 0 0 1px rgba(245,237,224,.08)}

/* ───── Inline Edit Mode (frontend live editing for admins) ───── */
/* Default: editable spans are invisible markers (no styling) */
[data-cms-edit]{position:relative;border-radius:3px;transition:background .15s,box-shadow .15s,outline-color .15s}

/* Edit mode toggle is in cms-bar */
.cms-bar-edit-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:transparent;border:1px solid rgba(245,237,224,.18);color:rgba(245,237,224,.85);border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:all .15s;line-height:1}
.cms-bar-edit-toggle:hover{border-color:var(--gold);color:var(--gold)}
.cms-bar-edit-toggle.active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}
.cms-bar-edit-toggle svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none}
.cms-bar-edit-toggle .dot{width:7px;height:7px;border-radius:50%;background:#5dcaa5;display:inline-block}
.cms-bar-edit-toggle:not(.active) .dot{display:none}

/* When edit mode is ON, mark every editable span */
body.cms-editing [data-cms-edit]{outline:1px dashed rgba(200,162,76,.35);outline-offset:2px;cursor:text}
body.cms-editing [data-cms-edit]:hover{outline-color:var(--gold);outline-style:solid;outline-width:1.5px;background:rgba(200,162,76,.08)}
body.cms-editing [data-cms-edit]:focus{outline:2px solid var(--emerald)!important;outline-offset:2px;background:rgba(255,255,255,.95);box-shadow:0 4px 14px rgba(31,64,52,.18);color:var(--ink);min-width:40px;cursor:text}

/* For block-content spans inside dark sections, invert the editing background */
.crowd-panel-overlay [data-cms-edit]:focus,
.cta-section [data-cms-edit]:focus,
.upcoming-featured [data-cms-edit]:focus,
.site-header [data-cms-edit]:focus,
.site-footer [data-cms-edit]:focus{background:rgba(245,237,224,.96)}

/* Hide the editable outlines on the giant ::before quote mark, hero badge text */
body.cms-editing .quote-section::before{pointer-events:none}

/* Save status toast (top center while editing) */
.cms-edit-toast{position:fixed;top:60px;left:50%;transform:translateX(-50%) translateY(-20px);background:var(--ink);color:var(--cream);padding:10px 18px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.05em;z-index:99999;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;display:inline-flex;align-items:center;gap:8px}
.cms-edit-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.cms-edit-toast.saving{background:var(--emerald-deep);color:var(--cream)}
.cms-edit-toast.success{background:#1c5b34;color:#e6f5ec}
.cms-edit-toast.error{background:#8a1f1f;color:#ffe6e6}
.cms-edit-toast svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;fill:none}

/* Editing-mode hint bar */
.cms-edit-hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(26,24,21,.94);color:rgba(245,237,224,.85);padding:9px 16px;border-radius:100px;font-size:11px;font-weight:500;letter-spacing:.05em;z-index:99998;backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.18);font-family:'Manrope',system-ui,sans-serif;display:none;align-items:center;gap:12px}
body.cms-editing .cms-edit-hint{display:inline-flex}
.cms-edit-hint kbd{background:rgba(245,237,224,.15);color:var(--cream);padding:2px 6px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:0}
.cms-edit-hint .sep{opacity:.4}

/* ───── Background image layer for Gallery CTA section ───── */
.gallery-section{position:relative;overflow:hidden}
.gallery-section .gallery-section-bg{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;z-index:0;border-radius:var(--radius)}
.gallery-section .gallery-header,
.gallery-section > a{position:relative;z-index:2}

/* ───── Hero Cards background image layer (Home / Hero Cards) ───── */
.hero-card-main .hero-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1;pointer-events:none;border-radius:inherit}
.hero-card-main .hero-card-quote,
.hero-card-main .hero-card-attr{position:relative;z-index:2}