/* ══════════════════════════════════════════
   DESIGN TOKENS — LIGHT & DARK
══════════════════════════════════════════ */
:root {
  --bg:          #F5F4F0;
  --surface:     #ECEAE4;
  --surface-2:   #E2E0D8;
  --ink:         #111111;
  --ink-2:       #2C2C2C;
  --muted:       #6B6B6B;
  --gold:        #1B4D3E;
  --gold-2:      #2D7A5C;
  --gold-bg:     #EAF4EE;
  --border:      #D4D2CA;
  --dark:        #111111;
  --dark-surface:#1A1A1A;
  --white:       #F8F7F4;
  --shadow:      rgba(17,17,17,0.07);
  --shadow-lg:   rgba(17,17,17,0.14);
  --radius:      3px;
  --transition:  0.28s cubic-bezier(0.4,0,0.2,1);
}
[data-theme="dark"] {
  --bg:          #090909;
  --surface:     #131313;
  --surface-2:   #1C1C1C;
  --ink:         #F0EDE6;
  --ink-2:       #C5C0B8;
  --muted:       #7A7A7A;
  --gold:        #3DBE84;
  --gold-2:      #5ED09A;
  --gold-bg:     #0C201A;
  --border:      #282828;
  --dark:        #F0EDE6;
  --dark-surface:#1C1C1C;
  --white:       #F0EDE6;
  --shadow:      rgba(0,0,0,0.4);
  --shadow-lg:   rgba(0,0,0,0.65);
}

/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Crimson Pro',Georgia,serif;
  font-weight:300;line-height:1.75;
  overflow-x:hidden;
  transition:background var(--transition),color var(--transition);
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}

/* GRAIN OVERLAY */
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;opacity:0.4;
}
*{position:relative;z-index:1}

/* ══════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════ */
.display{font-family:'Playfair Display',serif;font-weight:400;line-height:1.05;letter-spacing:-0.02em}
.display em{font-style:italic;color:var(--gold)}
.label{font-family:'DM Sans',sans-serif;font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:500;color:var(--gold)}
.label::before{content:'';display:inline-block;width:20px;height:1px;background:var(--gold);margin-right:10px;vertical-align:middle}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;
  border-radius:var(--radius);cursor:pointer;border:none;
  transition:all var(--transition);padding:13px 28px;
}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--ink);transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow-lg)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--gold);padding:10px 20px;font-size:0.72rem}
.btn-ghost:hover{background:var(--gold);color:#fff}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-dark:hover{background:var(--gold);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:0.72rem}

/* ══════════════════════════════════════════
   NEWSLETTER RIBBON
══════════════════════════════════════════ */
#ribbon{
  background:var(--ink);color:var(--bg);
  padding:11px 5vw;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:0.82rem;
  border-bottom:1px solid var(--gold);
}
[data-theme="dark"] #ribbon{background:#0D2E22;border-bottom-color:rgba(61,190,132,0.3)}
.ribbon-msg{font-family:'Crimson Pro',serif;font-style:italic;color:var(--gold-2)}
.ribbon-msg strong{color:#fff;font-style:normal}
[data-theme="dark"] .ribbon-msg strong{color:var(--ink)}
.ribbon-form{display:flex;gap:6px;align-items:center}
.ribbon-input{
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);
  padding:7px 14px;font-family:'DM Sans',sans-serif;font-size:0.78rem;color:#fff;
  border-radius:var(--radius);outline:none;width:200px;
  transition:background var(--transition);
}
.ribbon-input::placeholder{color:rgba(255,255,255,0.45)}
.ribbon-input:focus{background:rgba(255,255,255,0.18);border-color:var(--gold)}
.ribbon-btn{
  background:var(--gold);color:#fff;border:none;padding:7px 14px;
  font-family:'DM Sans',sans-serif;font-size:0.72rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;
  border-radius:var(--radius);transition:background var(--transition);white-space:nowrap;
}
.ribbon-btn:hover{background:var(--gold-2)}
.ribbon-ok{font-size:0.82rem;color:var(--gold-2);display:none;font-style:italic}
.ribbon-close{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.4);font-size:1rem;padding:4px;transition:color var(--transition)}
.ribbon-close:hover{color:#fff}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
nav{
  position:sticky;top:0;z-index:200;
  background:rgba(250,247,242,0.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 5vw;height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:background var(--transition),border-color var(--transition);
}
[data-theme="dark"] nav{background:rgba(14,12,10,0.94)}
.nav-logo{
  font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:500;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.nav-logo em{color:var(--gold);font-style:italic}
.nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center}
.nav-links a{
  font-family:'DM Sans',sans-serif;font-size:0.76rem;letter-spacing:0.1em;text-transform:uppercase;
  font-weight:400;color:var(--muted);text-decoration:none;transition:color var(--transition);
}
.nav-links a:hover{color:var(--gold)}
.nav-controls{display:flex;align-items:center;gap:10px}
.theme-btn{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:4px;width:44px;height:24px;cursor:pointer;
  display:flex;align-items:center;transition:all var(--transition);
  position:relative;
}
.theme-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--gold);
  transition:transform var(--transition);transform:translateX(0);
  font-size:9px;display:flex;align-items:center;justify-content:center;
}
[data-theme="dark"] .theme-thumb{transform:translateX(20px)}
.ham{display:none;background:none;border:none;cursor:pointer;padding:4px;flex-direction:column;gap:5px}
.ham span{display:block;width:22px;height:1.5px;background:var(--ink);transition:all 0.3s}
.mobile-menu{
  display:none;position:fixed;inset:68px 0 0 0;
  background:var(--bg);z-index:199;padding:2rem 6vw;
  flex-direction:column;gap:1rem;border-top:1px solid var(--border);
  overflow-y:auto;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--ink);
  text-decoration:none;padding:0.5rem 0;border-bottom:1px solid var(--border);
  display:block;transition:color var(--transition);
}
.mobile-menu a:hover{color:var(--gold)}

/* ══════════════════════════════════════════
   TICKER
══════════════════════════════════════════ */
#ticker{
  background:var(--gold);overflow:hidden;padding:0;height:36px;
  display:flex;align-items:center;
}
.ticker-track{
  display:flex;gap:0;white-space:nowrap;
  animation:ticker 28s linear infinite;
}
.ticker-track span{
  font-family:'DM Sans',sans-serif;font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;color:#fff;padding:0 2rem;
  opacity:0.9;
}
.ticker-dot{color:rgba(255,255,255,0.4);padding:0 0.3rem}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
#hero{min-height:calc(100vh - 68px);display:grid;grid-template-columns:1fr 1fr}
.hero-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem 4vw 5rem 10vw;
}
.hero-counter{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold-bg);border:1px solid var(--gold);
  border-radius:20px;padding:6px 16px;margin-bottom:2rem;width:fit-content;
}
.hero-counter .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}
.hero-counter span{font-family:'DM Sans',sans-serif;font-size:0.73rem;font-weight:500;letter-spacing:0.08em;color:var(--gold)}
.hero-h1{font-size:clamp(3rem,5.5vw,5.8rem);margin-bottom:1.6rem;color:var(--ink)}
.hero-sub{
  font-size:1.12rem;color:var(--muted);max-width:420px;
  line-height:1.8;margin-bottom:2.8rem;font-style:italic;
}
.hero-btns{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero-trust{
  display:flex;align-items:center;gap:8px;margin-top:2.4rem;
  font-family:'DM Sans',sans-serif;font-size:0.76rem;color:var(--muted);
}
.hero-trust-dot{width:4px;height:4px;border-radius:50%;background:var(--border)}
.hero-right{
  background:var(--surface);position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hero-bg-text{
  position:absolute;font-family:'Playfair Display',serif;font-size:22vw;
  font-weight:700;color:var(--border);line-height:1;
  bottom:-2vw;right:-3vw;user-select:none;pointer-events:none;
  opacity:0.35;letter-spacing:-0.05em;
}
[data-theme="dark"] .hero-bg-text{opacity:0.08}
.wash-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:6px;padding:2rem 2.4rem;
  box-shadow:0 24px 64px var(--shadow-lg);max-width:320px;z-index:2;
  transition:background var(--transition),border-color var(--transition);
}
.wash-card-tag{
  background:var(--gold);color:#fff;display:inline-block;
  font-family:'DM Sans',sans-serif;font-size:0.65rem;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;padding:4px 12px;
  border-radius:2px;margin-bottom:1rem;
}
.wash-card h3{
  font-family:'Playfair Display',serif;font-size:1.4rem;
  line-height:1.3;margin-bottom:1.2rem;color:var(--ink);
}
.hours-row{display:flex;justify-content:space-between;padding:0.6rem 0;border-bottom:1px solid var(--border);font-size:0.88rem}
.hours-row:last-child{border:none}
.hours-day{color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.78rem}
.hours-time{font-weight:400;color:var(--ink)}

/* ══════════════════════════════════════════
   IMPACT BAR
══════════════════════════════════════════ */
#impact{
  background:var(--ink);padding:3.5rem 10vw;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
}
[data-theme="dark"] #impact{background:var(--surface-2)}
.impact-stat{text-align:center;padding:1rem}
.impact-num{
  font-family:'Playfair Display',serif;font-size:3.4rem;
  color:var(--gold);line-height:1;margin-bottom:0.3rem;
}
.impact-label{
  font-family:'DM Sans',sans-serif;font-size:0.7rem;
  letter-spacing:0.14em;text-transform:uppercase;color:rgba(240,235,224,0.5);
}

/* ══════════════════════════════════════════
   DONATION MODULE
══════════════════════════════════════════ */
#donate-module{
  background:var(--gold);padding:4rem 10vw;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.dm-left h2{
  font-family:'Playfair Display',serif;font-size:clamp(2rem,3vw,3rem);
  color:#fff;line-height:1.1;margin-bottom:0.8rem;
}
.dm-left h2 em{font-style:italic;opacity:0.85}
.dm-left p{font-size:1rem;color:rgba(255,255,255,0.8);line-height:1.8;max-width:380px}
.dm-right{background:rgba(255,255,255,0.12);border-radius:6px;padding:2rem;border:1px solid rgba(255,255,255,0.2)}
.dm-tabs{display:flex;gap:4px;margin-bottom:1.4rem}
.dm-tab{
  flex:1;padding:8px;font-family:'DM Sans',sans-serif;font-size:0.72rem;
  font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  background:transparent;border:1px solid rgba(255,255,255,0.3);
  color:rgba(255,255,255,0.7);cursor:pointer;border-radius:var(--radius);
  transition:all var(--transition);
}
.dm-tab.active,.dm-tab:hover{background:#fff;color:var(--gold);border-color:#fff}
[data-theme="dark"] .dm-tab.active,[data-theme="dark"] .dm-tab:hover{background:rgba(255,255,255,0.15);color:#fff;border-color:rgba(255,255,255,0.5)}
.dm-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:1rem}
.dm-amount{
  padding:10px 4px;font-family:'DM Sans',sans-serif;font-size:0.82rem;font-weight:500;
  background:transparent;border:1px solid rgba(255,255,255,0.3);color:#fff;
  cursor:pointer;border-radius:var(--radius);text-align:center;
  transition:all var(--transition);
}
.dm-amount.active,.dm-amount:hover{background:#fff;color:var(--gold)}
[data-theme="dark"] .dm-amount.active,[data-theme="dark"] .dm-amount:hover{background:rgba(255,255,255,0.15);color:#fff}
.dm-custom{
  width:100%;background:transparent;border:1px solid rgba(255,255,255,0.3);
  padding:10px 12px;font-family:'DM Sans',sans-serif;font-size:0.9rem;
  color:#fff;border-radius:var(--radius);margin-bottom:1rem;outline:none;
  transition:border-color var(--transition);
}
.dm-custom::placeholder{color:rgba(255,255,255,0.45)}
.dm-custom:focus{border-color:#fff}
.dm-impact{
  font-family:'Playfair Display',serif;font-size:0.95rem;font-style:italic;
  color:rgba(255,255,255,0.8);margin-bottom:1.2rem;min-height:1.4rem;
  line-height:1.4;
}
.dm-impact strong{color:#fff;font-style:normal}
.dm-btn{
  width:100%;background:#fff;color:var(--gold);
  padding:14px;font-family:'DM Sans',sans-serif;font-size:0.82rem;
  font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  border:none;cursor:pointer;border-radius:var(--radius);
  transition:all var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;
}
.dm-btn:hover{background:var(--ink);color:#fff}
.dm-note{font-size:0.72rem;color:rgba(255,255,255,0.5);text-align:center;margin-top:0.7rem;font-family:'DM Sans',sans-serif}

/* ══════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════ */
.section{padding:6rem 10vw}
.section-sm{padding:5rem 10vw}
.section-alt{background:var(--surface)}
.section-dark{background:var(--ink)}
[data-theme="dark"] .section-alt{background:var(--surface-2)}
[data-theme="dark"] .section-dark{background:var(--surface)}
[data-theme="dark"] #donate-module{background:#0D2E22}
[data-theme="dark"] #ticker{background:#0D2E22}
.section-header{max-width:640px;margin-bottom:3.5rem}
.section-header h2{font-size:clamp(2.2rem,3.5vw,3.5rem);color:var(--ink);margin:0.6rem 0 1rem}
.section-header p{font-size:1.05rem;color:var(--muted);line-height:1.85}
hr.rule{border:none;border-top:1px solid var(--border);margin:0}

/* ══════════════════════════════════════════
   ABOUT
══════════════════════════════════════════ */
#about.section{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.about-quote-panel{
  background:var(--surface);border-radius:4px;
  padding:4rem 3rem;position:relative;overflow:hidden;
  min-height:480px;display:flex;flex-direction:column;justify-content:center;
}
.about-quote-panel::before{
  content:'"';position:absolute;top:-1rem;left:1.5rem;
  font-family:'Playfair Display',serif;font-size:16rem;
  color:var(--border);line-height:1;user-select:none;
}
[data-theme="dark"] .about-quote-panel::before{opacity:0.15}
.about-quote{
  font-family:'Playfair Display',serif;font-size:1.9rem;font-style:italic;
  font-weight:400;line-height:1.4;color:var(--ink);
  margin-bottom:1.5rem;position:relative;z-index:2;
}
.about-cite{font-family:'DM Sans',sans-serif;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold)}
.about-content h2{font-size:clamp(2rem,3vw,3rem);color:var(--ink);margin:0.6rem 0 1.6rem}
.about-content p{color:var(--muted);font-size:1.02rem;line-height:1.85;margin-bottom:1.2rem}
.about-note{
  border-left:2px solid var(--gold);padding:1rem 1.4rem;
  font-style:italic;font-size:0.9rem;color:var(--muted);
  background:var(--gold-bg);border-radius:0 var(--radius) var(--radius) 0;margin-top:1.5rem;
}

/* ══════════════════════════════════════════
   ANIMALS
══════════════════════════════════════════ */
.filter-bar{display:flex;gap:6px;margin-bottom:2.5rem;flex-wrap:wrap}
.filt{
  padding:8px 20px;font-family:'DM Sans',sans-serif;font-size:0.72rem;
  letter-spacing:0.1em;text-transform:uppercase;font-weight:400;
  border:1px solid var(--border);background:transparent;cursor:pointer;
  border-radius:20px;color:var(--muted);transition:all var(--transition);
}
.filt:hover,.filt.active{background:var(--ink);border-color:var(--ink);color:var(--white)}
[data-theme="dark"] .filt:hover,[data-theme="dark"] .filt.active{background:var(--gold);border-color:var(--gold);color:#fff}
.animals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.a-card{
  background:var(--bg);border:1px solid var(--border);border-radius:6px;
  overflow:hidden;cursor:pointer;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.a-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px var(--shadow-lg);border-color:var(--gold)}
.a-card.hidden{display:none}
.a-img-wrap{position:relative;overflow:hidden}
.a-img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform 0.6s ease;background:var(--surface)}
.a-card:hover .a-img{transform:scale(1.06)}
.a-tag{
  position:absolute;top:10px;left:10px;
  background:rgba(28,25,20,0.82);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:0.64rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border-radius:2px;
  backdrop-filter:blur(4px);
}
.a-body{padding:1.2rem 1.4rem 1.4rem}
.a-name{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--ink);margin-bottom:2px;line-height:1.2}
.a-meta{font-family:'DM Sans',sans-serif;font-size:0.74rem;color:var(--muted);margin-bottom:0.8rem;letter-spacing:0.03em;text-transform:capitalize}
.a-traits{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:0.9rem}
.trait{
  background:var(--surface-2);color:var(--muted);
  padding:3px 9px;font-family:'DM Sans',sans-serif;
  font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;border-radius:2px;
}
.a-bio{font-size:0.87rem;color:var(--muted);line-height:1.7;margin-bottom:1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.a-actions{display:flex;gap:6px}
.a-adopt{
  flex:1;background:var(--gold);color:#fff;padding:9px 12px;
  font-family:'DM Sans',sans-serif;font-size:0.7rem;letter-spacing:0.1em;
  text-transform:uppercase;font-weight:500;border:none;cursor:pointer;
  border-radius:var(--radius);transition:background var(--transition);
}
.a-adopt:hover{background:var(--ink)}
.a-sponsor{
  background:transparent;color:var(--muted);padding:9px 12px;
  font-family:'DM Sans',sans-serif;font-size:0.7rem;letter-spacing:0.1em;
  text-transform:uppercase;border:1px solid var(--border);cursor:pointer;
  border-radius:var(--radius);transition:all var(--transition);white-space:nowrap;
}
.a-sponsor:hover{border-color:var(--gold);color:var(--gold)}
.animals-cta{text-align:center;margin-top:2.5rem}
.animals-cta p{font-style:italic;color:var(--muted);margin-bottom:1.2rem;font-size:0.95rem}

/* ══════════════════════════════════════════
   PROGRAMS
══════════════════════════════════════════ */
.programs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
[data-theme="dark"] .programs-grid{background:var(--border)}
.prog-card{
  background:var(--bg);padding:2.6rem 2.2rem;
  transition:background var(--transition);position:relative;overflow:hidden;
}
.prog-card:hover{background:var(--surface)}
.prog-num{
  position:absolute;top:1.5rem;right:1.8rem;
  font-family:'Playfair Display',serif;font-size:4rem;font-weight:700;
  color:var(--border);line-height:1;user-select:none;
}
[data-theme="dark"] .prog-num{opacity:0.2}
.prog-icon{font-size:2rem;margin-bottom:1.2rem;display:block}
.prog-card h3{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--ink);margin-bottom:0.6rem}
.prog-card p{font-size:0.9rem;color:var(--muted);line-height:1.8}

/* ══════════════════════════════════════════
   ADOPTION FEES
══════════════════════════════════════════ */
.adoption-wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:5rem;align-items:start}
.fee-group{margin-bottom:2rem}
.fee-group-title{
  font-family:'DM Sans',sans-serif;font-size:0.7rem;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);
  padding-bottom:0.6rem;border-bottom:1px solid var(--gold);margin-bottom:0.8rem;
}
.fee-row{display:flex;justify-content:space-between;align-items:center;padding:0.65rem 0;border-bottom:1px solid var(--border)}
.fee-row:last-child{border:none}
.fee-row span{font-size:0.92rem;color:var(--ink)}
.fee-amt{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--ink)}
.pay-note{
  background:var(--surface-2);border-radius:var(--radius);padding:1rem 1.3rem;
  font-family:'DM Sans',sans-serif;font-size:0.8rem;color:var(--muted);
  line-height:1.7;margin-top:1.5rem;
}
.pay-note strong{color:var(--ink)}
.guarantees{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2rem 0}
.guar-item{background:var(--surface);border-radius:var(--radius);padding:1.1rem 1.2rem}
.guar-item .g-ic{font-size:1.3rem;margin-bottom:0.4rem;display:block}
.guar-item strong{display:block;font-family:'DM Sans',sans-serif;font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;font-weight:500;color:var(--ink);margin-bottom:0.25rem}
.guar-item span{font-size:0.82rem;color:var(--muted);line-height:1.5}
.app-btns{display:flex;gap:10px;margin-top:2rem;flex-wrap:wrap}

/* ══════════════════════════════════════════
   SPONSOR
══════════════════════════════════════════ */
.sponsor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.sp-card{background:var(--bg);overflow:hidden;transition:all var(--transition)}
.sp-card:hover{background:var(--surface)}
.sp-img-wrap{position:relative;overflow:hidden}
.sp-img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 0.6s;background:var(--surface)}
.sp-card:hover .sp-img{transform:scale(1.04)}
.sp-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(28,25,20,0.75));
  padding:2rem 1.5rem 1.2rem;
}
.sp-overlay .a-name{color:#fff;font-size:1.5rem}
.sp-overlay .a-meta{color:rgba(255,255,255,0.65)}
.sp-body{padding:1.5rem 1.8rem 2rem}
.sp-body p{font-size:0.88rem;color:var(--muted);line-height:1.8;margin-bottom:1.3rem}
.sp-prog-label{display:flex;justify-content:space-between;margin-bottom:5px}
.sp-prog-label span{font-family:'DM Sans',sans-serif;font-size:0.7rem;color:var(--muted);letter-spacing:0.06em}
.sp-prog-label strong{font-family:'Playfair Display',serif;font-size:1rem;color:var(--ink)}
.prog-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:1.4rem}
.prog-fill{height:100%;background:var(--gold);border-radius:2px;width:0;transition:width 1.4s cubic-bezier(0.4,0,0.2,1)}
.sp-btn{
  width:100%;background:transparent;color:var(--gold);
  padding:11px;font-family:'DM Sans',sans-serif;font-size:0.72rem;
  letter-spacing:0.12em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--gold);cursor:pointer;border-radius:var(--radius);
  transition:all var(--transition);
}
.sp-btn:hover{background:var(--gold);color:#fff}

/* ══════════════════════════════════════════
   VOLUNTEER
══════════════════════════════════════════ */
#volunteer.section{display:grid;grid-template-columns:1.1fr 1fr;gap:6rem;align-items:center}
.vol-content p{font-size:1rem;color:var(--muted);line-height:1.9;margin-bottom:1.2rem}
.vol-panel{
  background:var(--surface);border-radius:4px;
  padding:3rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:360px;position:relative;overflow:hidden;
}
.vol-big{
  position:absolute;font-size:11rem;opacity:0.07;
  user-select:none;pointer-events:none;
}
.vol-quote{
  font-family:'Playfair Display',serif;font-size:1.5rem;font-style:italic;
  line-height:1.4;color:var(--ink);position:relative;z-index:2;
}

/* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.c-item{display:flex;gap:1.2rem;padding:1.4rem 0;border-bottom:1px solid var(--border);align-items:flex-start}
.c-item:first-child{padding-top:0}
.c-ico{font-size:1.2rem;opacity:0.5;flex-shrink:0;margin-top:2px}
.c-lbl{font-family:'DM Sans',sans-serif;font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);font-weight:500;display:block;margin-bottom:2px}
.c-val{font-size:0.95rem;color:var(--ink);line-height:1.6}
.c-val a{color:inherit;text-decoration:none;transition:color var(--transition)}
.c-val a:hover{color:var(--gold)}
.form-area h3{font-family:'Playfair Display',serif;font-size:2rem;color:var(--ink);margin-bottom:0.5rem}
.form-area .sub{font-size:0.92rem;color:var(--muted);margin-bottom:1.8rem;font-style:italic}
.field{margin-bottom:12px}
.field input,.field textarea,.field select{
  width:100%;background:var(--surface);border:1px solid var(--border);
  padding:12px 14px;font-family:'Crimson Pro',serif;font-size:1rem;
  font-weight:300;color:var(--ink);border-radius:var(--radius);outline:none;
  transition:border-color var(--transition),background var(--transition);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold);background:var(--bg)}
.field textarea{height:110px;resize:vertical}
.field select option{background:var(--bg);color:var(--ink)}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer{
  background:var(--ink);color:rgba(240,235,224,0.45);
  padding:3.5rem 10vw;
}
[data-theme="dark"] footer{background:var(--surface-2)}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:3rem;margin-bottom:2.5rem;flex-wrap:wrap}
.footer-brand .f-logo{font-family:'Playfair Display',serif;font-size:1.2rem;color:#fff;font-style:italic;display:block;margin-bottom:0.5rem}
.footer-brand p{font-size:0.82rem;max-width:260px;line-height:1.7}
.footer-nav h4{font-family:'DM Sans',sans-serif;font-size:0.65rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.footer-nav a{display:block;font-size:0.84rem;color:rgba(240,235,224,0.45);text-decoration:none;padding:3px 0;transition:color var(--transition)}
.footer-nav a:hover{color:var(--gold)}
.footer-bot{border-top:1px solid rgba(255,255,255,0.08);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:0.75rem}

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;background:rgba(10,8,6,0.75);
  z-index:900;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;opacity:0;pointer-events:none;
  transition:opacity var(--transition);backdrop-filter:blur(8px);
}
.overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--bg);border-radius:6px;max-width:520px;width:100%;
  transform:translateY(16px) scale(0.98);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  max-height:92vh;overflow-y:auto;position:relative;
  border:1px solid var(--border);
}
.overlay.open .modal{transform:translateY(0) scale(1)}
.modal-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface)}
.modal-body{padding:2rem 2.4rem 2.4rem}
.modal-close{
  position:absolute;top:12px;right:12px;width:34px;height:34px;
  background:rgba(28,25,20,0.6);border:none;border-radius:50%;
  color:#fff;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--transition);z-index:5;backdrop-filter:blur(4px);
}
.modal-close:hover{background:var(--gold)}
.modal-name{font-family:'Playfair Display',serif;font-size:2rem;color:var(--ink);margin-bottom:2px}
.modal-meta{font-family:'DM Sans',sans-serif;font-size:0.78rem;color:var(--muted);margin-bottom:1rem;letter-spacing:0.04em;text-transform:capitalize}
.modal-bio{font-size:1rem;color:var(--muted);line-height:1.85;margin-bottom:1.8rem}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Sponsor modal */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:1.2rem}
.tier-btn{
  background:var(--surface);border:1px solid var(--border);
  padding:14px 8px;font-family:'DM Sans',sans-serif;font-size:0.8rem;
  color:var(--ink);cursor:pointer;border-radius:var(--radius);
  text-align:center;transition:all var(--transition);line-height:1.5;
}
.tier-btn small{display:block;font-size:0.68rem;color:var(--muted);margin-top:2px}
.tier-btn.active,.tier-btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.tier-btn.active small,.tier-btn:hover small{color:rgba(255,255,255,0.75)}
.sp-note{font-family:'DM Sans',sans-serif;font-size:0.74rem;color:var(--muted);text-align:center;margin-top:0.8rem;line-height:1.6}

/* Sticky donate button — mobile */
#sticky-donate{
  position:fixed;bottom:1.2rem;right:1.2rem;z-index:400;
  display:none;
}
#sticky-donate a{
  background:var(--gold);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:0.74rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;padding:12px 22px;
  border-radius:30px;text-decoration:none;
  box-shadow:0 8px 24px rgba(27,77,62,0.45);
  display:flex;align-items:center;gap:8px;transition:all var(--transition);
}
#sticky-donate a:hover{background:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,0.3)}

/* ══════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ══════════════════════════════════════════
   NOTION DYNAMIC STYLES & EXTRAS
══════════════════════════════════════════ */
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:#fff;
  padding:8px 16px;z-index:9999;font-family:'DM Sans',sans-serif;
  font-size:0.82rem;border-radius:0 0 4px 0;
}
.a-tag.status{
  background:var(--surface-2);color:var(--ink);border:1px solid var(--border);
}
.a-tag.urgent{
  background:var(--gold);color:#fff;border:none;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1200px){
  .animals-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  #hero{grid-template-columns:1fr}
  .hero-right{min-height:320px}
  #about.section,#volunteer.section{grid-template-columns:1fr;gap:3rem}
  .about-quote-panel{min-height:auto}
  .adoption-wrap,.contact-wrap{grid-template-columns:1fr;gap:3rem}
  .programs-grid,.sponsor-grid{grid-template-columns:1fr 1fr}
  #impact{grid-template-columns:repeat(2,1fr)}
  #donate-module{grid-template-columns:1fr;gap:2rem}
  .animals-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .nav-links{display:none}
  .ham{display:flex}
  .section,.section-sm{padding:4rem 6vw}
  .programs-grid,.sponsor-grid,.animals-grid{grid-template-columns:1fr}
  #impact{grid-template-columns:repeat(2,1fr);padding:2.5rem 6vw}
  .hero-left{padding:3.5rem 6vw}
  .guarantees{grid-template-columns:1fr}
  .app-btns{flex-direction:column}
  .modal-actions{flex-direction:column}
  .footer-top{flex-direction:column}
  #ribbon{flex-direction:column;text-align:center}
  .ribbon-form{flex-wrap:wrap;justify-content:center}
  .ribbon-input{width:100%;max-width:300px}
  #sticky-donate{display:block}
  .dm-amounts{grid-template-columns:repeat(2,1fr)}
  .hero-btns{flex-direction:column;align-items:flex-start}
  .tier-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:480px){
  .programs-grid{grid-template-columns:1fr}
  #impact{grid-template-columns:1fr 1fr}
  .impact-num{font-size:2.4rem}
}