/* index.css — page-specific styles for index.html
   Extracted from inline <style> by tools/css-consolidate.py. */

body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;position:relative}

/* (removed 2026-05-20) — homepage hero used to overlay a cream furry-textile
   background via body::after, but the texture made the hero feel busy.
   Hero now sits on the theme's base background. */

.slab-md{font-family:var(--slab);font-weight:700;letter-spacing:-0.01em}

nav.topnav.scrolled .nav-links a,
nav.topnav.scrolled .nav-links .nav-item > a{color:#fbf6e7}

nav.topnav.scrolled .nav-links a:hover,
nav.topnav.scrolled .nav-links .nav-item:hover > a,
nav.topnav.scrolled .nav-links .nav-item.active > a,
nav.topnav.scrolled .nav-links .nav-item.current > a{color:var(--gold-l)}

nav.topnav.scrolled .nav-links a:hover::after,
nav.topnav.scrolled .nav-links .nav-item:hover > a::after,
nav.topnav.scrolled .nav-links .nav-item.active > a::after,
nav.topnav.scrolled .nav-links .nav-item.current > a::after{background:var(--gold-l)}

.brand{display:flex;align-items:center;gap:18px;transition:gap .3s ease}

.brand{flex-shrink:0}

/* Scrolled / sticky compact state */
nav.topnav.scrolled .nav-row{padding:14px var(--gutter);gap:32px}

.nav-links{display:flex;gap:28px;flex:1;margin-left:8px}

.nav-links a{font:600 16px/1 var(--sans);letter-spacing:0.10em;text-transform:uppercase;color:var(--green);padding:6px 0;position:relative;transition:font-size .3s ease,color .25s ease}

nav.topnav.scrolled .nav-links a{font-size:13px}

.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--gold);transition:right .22s ease,background .22s ease;border-radius:2px}

.nav-links a:hover::after{right:0}

/* Per-link text + underline hover — both light up in the link's own colour */
.nav-links a:nth-child(1):hover{color:var(--green-l)}

.nav-links a:nth-child(1):hover::after{background:var(--green-l)}

.nav-links a:nth-child(2):hover{color:var(--blue-l)}

.nav-links a:nth-child(2):hover::after{background:var(--blue-l)}

.nav-links a:nth-child(3):hover{color:var(--red)}

.nav-links a:nth-child(3):hover::after{background:var(--red)}

.nav-links a:nth-child(4):hover{color:var(--brown-d)}

.nav-links a:nth-child(4):hover::after{background:var(--brown-d)}

.nav-links a:nth-child(5):hover{color:var(--gold-d)}

.nav-links a:nth-child(5):hover::after{background:var(--gold-d)}

.nav-links a:nth-child(6):hover{color:var(--blue-d)}

.nav-links a:nth-child(6):hover::after{background:var(--blue-d)}

/* Nav items wrapping anchors (for mega menu hover) */
.nav-links .nav-item{position:relative;display:inline-flex;align-items:center;flex-shrink:0}

.nav-links{flex-wrap:nowrap}

/* Mega menu panel — full-width drop under the nav */
.mega-menu{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line-soft);box-shadow:0 18px 40px rgba(42,51,38,0.10);z-index:49;animation:megaIn .22s ease}

.mega-link{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:6px;font-family:var(--serif-body);font-size:15px;color:var(--ink);text-decoration:none;transition:background .15s ease,color .15s ease}

/* ============================================
   DEV PROGRESS PANEL — fixed bottom-right
   ============================================ */
.dev-panel{position:fixed;bottom:24px;right:24px;z-index:200;font-family:var(--sans);max-width:380px;width:calc(100% - 48px)}

.dev-panel-toggle{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper-w);border:0;border-radius:999px;padding:12px 18px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,0.20);font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:0.04em;transition:background .2s ease}

@media (max-width:980px){.mega-menu{display:none}.dev-panel{bottom:16px;right:16px}}

@media (max-width:980px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);padding:14px var(--gutter) 24px;border-bottom:1px solid var(--line-soft)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .hamburger{display:inline-flex;flex-direction:column;gap:5px;padding:8px}
  .hamburger span{width:24px;height:2px;background:var(--green-d);border-radius:2px}
}

/* HERO */
.hero{position:relative;height:clamp(620px,84vh,820px);overflow:hidden;background:#0e120c;margin:clamp(16px,2vw,28px);border-radius:var(--r-xl)}

.hero-slide{position:absolute;inset:0;opacity:0;pointer-events:none}

.hero-slide.active{opacity:1;pointer-events:auto}

/* Crossfade is enabled by site.js (adds .is-ready) only after first paint, so
   the initial slide paints instantly and does not delay the LCP by ~1.4s. */
.hero.is-ready .hero-slide{transition:opacity 1.4s ease}

.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(0.94) contrast(1.05)}

.hero-slide:nth-child(4) img{object-position:center 28%}

.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.5) 70%,rgba(0,0,0,0.85) 100%),linear-gradient(90deg,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.1) 60%,rgba(0,0,0,0) 100%)}

.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--gutter);padding-bottom:clamp(80px,10vh,120px);color:#fff;z-index:2}

.hero-inner{max-width:var(--maxw);margin:0 auto;width:100%}

.hero-eyebrow{font:700 11px/1 var(--sans);letter-spacing:0.28em;text-transform:uppercase;color:#fff;margin-bottom:24px;display:inline-flex;align-items:center;gap:14px;background:rgba(255,255,255,0.10);backdrop-filter:blur(6px);padding:10px 16px 10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.20)}

.hero-eyebrow::before{content:"";width:8px;height:8px;background:var(--gold);border-radius:50%;box-shadow:0 0 12px rgba(244,211,94,0.6)}

.hero h1{font-family:var(--slab);font-weight:800;font-size:clamp(44px,7vw,98px);line-height:0.98;letter-spacing:-0.025em;margin:0 0 24px;max-width:18ch;text-wrap:balance}

.hero p.sub{font-size:19px;max-width:54ch;margin:0 0 36px;color:rgba(255,255,255,0.92);line-height:1.5}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.hero-controls{position:absolute;right:var(--gutter);bottom:clamp(80px,10vh,120px);display:flex;gap:8px;z-index:3}

.hero-controls button{width:48px;height:48px;color:#fff;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.10);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.25);border-radius:999px;transition:all .2s ease}

.hero-controls button:hover{background:rgba(255,255,255,0.22);transform:scale(1.05)}

.hero-dots{position:absolute;left:var(--gutter);bottom:30px;display:flex;gap:14px;align-items:center;z-index:3;color:rgba(255,255,255,0.95);font:700 11px/1 var(--sans);letter-spacing:0.24em;text-transform:uppercase}

.hero-dot{width:32px;height:4px;background:rgba(255,255,255,0.35);transition:all .25s ease;cursor:pointer;border:0;padding:0;border-radius:999px}

.hero-dot.active{background:#fff;width:56px}

@media (max-width:720px){.hero{height:80vh;min-height:600px}.hero-controls{display:none}}

/* DONATE BAND */
.donate-band{background:linear-gradient(160deg,var(--green-d) 0%,var(--green) 100%);color:var(--paper);padding:clamp(72px,9vw,110px) var(--gutter);position:relative;overflow:hidden}

.donate-band::before{content:"";position:absolute;top:-200px;right:-150px;width:600px;height:600px;background:radial-gradient(circle,rgba(178,135,96,0.18),transparent 60%);pointer-events:none}

.donate-band::after{content:"";position:absolute;top:-50px;right:-60px;width:280px;height:280px;background:var(--yellow);-webkit-mask:url('../images/paw-only.svg') no-repeat center/contain;mask:url('../images/paw-only.svg') no-repeat center/contain;opacity:0.25;pointer-events:none;z-index:0;transform:rotate(22deg)}

.donate-band .container{position:relative;z-index:1}

.donate-band .container{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(40px,6vw,80px);align-items:start;position:relative}

@media (max-width:920px){.donate-band .container{grid-template-columns:1fr}}

.donate-band .eyebrow{color:var(--gold-l)}

.donate-band .eyebrow::before{background:var(--gold)}

.donate-band h2{font-family:var(--slab);font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:1.05;letter-spacing:-0.025em;margin:18px 0 24px;color:#fbf6e7}

.donate-band h2 span{color:var(--gold-l);font-style:italic;font-weight:500}

.donate-band p.lede{font-size:19px;color:#dfd6bd;max-width:44ch;line-height:1.6}

.donate-band .impacts{margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.14);display:grid;gap:14px}

.donate-band .impact{display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:baseline;padding:8px 0}

.donate-band .impact .amt{font-family:var(--slab);font-weight:800;font-size:30px;color:var(--gold-l)}

.donate-band .impact .what{font-size:16px;color:#dfd6bd;line-height:1.4}

.zeffy-frame{background:var(--paper);color:var(--ink);min-height:720px;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line-soft)}

.zeffy-header{padding:18px 26px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;font:700 10px/1 var(--sans);letter-spacing:0.22em;text-transform:uppercase;background:var(--paper-2)}

.zeffy-header .lock{display:inline-flex;align-items:center;gap:8px;color:var(--green-d)}

.zeffy-header .fees{color:var(--brown-d)}

.zeffy-body{flex:1;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:22px}

.zeffy-body h3{font-family:var(--slab);font-weight:800;font-size:30px;margin:0;letter-spacing:-0.015em;color:var(--gold-d)}

.zeffy-toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--paper-2);border-radius:999px;padding:5px;gap:0}

.zeffy-toggle button{padding:13px 0;font:700 12px/1 var(--sans);letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);border-radius:999px;transition:all .2s ease}

.zeffy-toggle button.on{background:var(--yellow);color:var(--green-d);box-shadow:0 2px 8px rgba(244,211,94,0.40)}

.zeffy-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}

.zeffy-amounts button{padding:22px 8px;font-family:var(--slab);font-weight:700;font-size:22px;color:var(--green-d);background:var(--paper-2);border-radius:var(--r-md);transition:all .2s ease;border:1.5px solid transparent}

.zeffy-amounts button:hover{border-color:var(--yellow)}

.zeffy-amounts button.on{background:var(--yellow);color:var(--green-d);border-color:var(--yellow)}

.zeffy-custom{display:flex;align-items:center;background:var(--paper-2);border-radius:var(--r-md);overflow:hidden}

.zeffy-custom span{padding:14px 18px;font-family:var(--slab);font-weight:700;font-size:18px;color:var(--green-d)}

.zeffy-custom input{flex:1;border:0;outline:0;background:transparent;padding:14px 18px 14px 0;font-family:var(--slab);font-size:18px;font-weight:600;color:var(--ink)}

.zeffy-impact{padding:16px 18px;font-size:15px;color:var(--ink-2);line-height:1.5;background:rgba(244,211,94,0.18);border-radius:var(--r-md);border-left:3px solid var(--yellow)}

.zeffy-impact strong{color:var(--gold-d);font-weight:700}

.zeffy-cta{margin-top:auto;display:grid;gap:12px}

.zeffy-cta .btn{justify-content:center;padding:20px 22px;font-size:13px}

.zeffy-foot{padding:14px 26px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;font:600 10px/1 var(--sans);letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);background:var(--paper-2)}
.zeffy-iframe{flex:1 1 auto;width:100%;min-height:720px;border:0;display:block;background:#fff}

/* MISSION — close-up of golden retriever fur as textural background */
.mission{text-align:center;background:var(--paper);padding:clamp(120px,14vw,180px) var(--gutter);position:relative;overflow:hidden;isolation:isolate}

.mission::before{content:"";position:absolute;inset:0;background:url('../images/mission-fur.jpg') center 35%/cover no-repeat;filter:saturate(0.94) contrast(1.04);z-index:-2}

.mission::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,236,214,0.88) 0%,rgba(244,236,214,0.76) 50%,rgba(244,236,214,0.88) 100%);z-index:-1}

.mission .container{max-width:1100px;position:relative}

.mission .ornament{width:54px;height:54px;margin:0 auto 32px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--green-d);font-family:var(--slab);font-weight:800;font-size:22px;box-shadow:0 4px 18px rgba(232,176,74,0.4)}

.mission .ornament svg{display:block}

.mission p{font-family:var(--slab);font-weight:600;font-size:clamp(32px,4.4vw,56px);line-height:1.2;letter-spacing:-0.02em;margin:0;text-wrap:balance;color:var(--green-d);text-shadow:0 1px 0 rgba(244,236,214,0.6)}

.mission p span{color:var(--green-l);font-style:italic;font-weight:500}

/* PILLARS */
.pillars{background:var(--paper-green)}

.pillars-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:56px}

@media (max-width:820px){.pillars-head{grid-template-columns:1fr;gap:24px}}

.pillars-head h2{font-family:var(--slab);font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:1.05;letter-spacing:-0.025em;margin:14px 0 0;color:var(--green-d)}

.pillars-head h2 span{color:var(--green-l);font-style:italic;font-weight:500}

/* Pillar number accents — system 4-colour sequence: red / gold-d / blue-d / green */
.pillar-grid .pillar:nth-child(1) .num{color:var(--red)}

.pillar-grid .pillar:nth-child(2) .num{color:var(--gold-d)}

.pillar-grid .pillar:nth-child(3) .num{color:var(--blue-d)}

.pillar-grid .pillar:nth-child(4) .num{color:var(--green)}

/* Match each pillar's icon to its number colour */
.pillar:nth-child(1) .pillar-icon{color:var(--red)}

.pillar:nth-child(2) .pillar-icon{color:var(--gold-d)}

.pillar:nth-child(3) .pillar-icon{color:var(--blue-d)}

.pillar:nth-child(4) .pillar-icon{color:var(--green)}

.pillars-head p{font-size:18px;color:var(--ink-2);max-width:46ch;margin:0;line-height:1.6}

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

@media (max-width:980px){.pillar-grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width:560px){.pillar-grid{grid-template-columns:1fr}}

.pillar{padding:36px 28px 32px;display:flex;flex-direction:column;min-height:340px;background:var(--paper);border-radius:var(--r-lg);box-shadow:0 1px 6px rgba(42,51,38,0.04);border:1px solid rgba(52,74,48,0.08);transition:all .25s ease}

.pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}

.pillar .pillar-icon{color:var(--green);margin-bottom:18px;display:inline-flex;width:62px;height:62px;align-items:center;justify-content:center;border:1.5px solid var(--gold);border-radius:50%;background:var(--paper-w)}

.pillar:hover .pillar-icon{background:var(--gold);border-color:var(--gold);color:var(--green-d)}

.pillar .num{font-family:var(--slab);font-weight:800;font-size:clamp(52px,6vw,80px);line-height:0.95;letter-spacing:-0.03em;color:var(--green)}

.pillar .num.placeholder{color:var(--green-ll);font-style:italic;font-weight:500}

.pillar .label{margin-top:10px;font-size:13px;color:var(--muted);letter-spacing:0.04em;line-height:1.4;max-width:22ch;text-transform:uppercase;font-weight:600}

.pillar h3{font-family:var(--slab);font-weight:800;font-size:24px;margin:24px 0 10px;letter-spacing:-0.015em;color:var(--green-d)}

.pillar p{font-size:15px;color:var(--ink-2);margin:0 0 18px;line-height:1.6}

.pillar .arrow-link{margin-top:auto;align-self:flex-start;font:700 11px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;color:var(--green-d);display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--paper-2);transition:all .2s ease}

.pillar .arrow-link:hover{background:var(--green);color:#fbf6e7}

/* DOGS */
.dogs-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:60px}

@media (max-width:820px){.dogs-head{grid-template-columns:1fr;gap:22px}}

.dogs-head h2{font-family:var(--slab);font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:1.05;letter-spacing:-0.025em;margin:14px 0 0;color:var(--green-d)}

.dogs-head h2 span{color:var(--green-l);font-style:italic;font-weight:500}

.dogs-head p{font-size:18px;color:var(--ink-2);max-width:46ch;margin:0;line-height:1.6}

.dog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.4vw,36px)}

@media (max-width:880px){.dog-grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width:540px){.dog-grid{grid-template-columns:1fr}}

.dog{cursor:pointer;display:flex;flex-direction:column;background:var(--paper-2);border-radius:var(--r-lg);padding:14px;transition:all .25s ease;border:1px solid transparent}

.dog:hover{transform:translateY(-3px);box-shadow:var(--shadow);background:var(--paper);border-color:var(--gold)}

.dog .photo{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3);position:relative;border-radius:var(--r-md)}

.dog .photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}

.dog:hover .photo img{transform:scale(1.05)}

.dog .tag{position:absolute;top:14px;left:14px;padding:7px 14px;background:rgba(42,51,38,0.85);backdrop-filter:blur(6px);color:#fbf6e7;font:700 10px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;border-radius:999px}

.dog .tag.romania{background:var(--gold);color:var(--green-d)}

.dog .tag.bulgaria{background:var(--leaf);color:#fbf6e7}

.dog .tag.sanctuary{background:var(--green);color:#fbf6e7}

.dog h3{font-family:var(--slab);font-weight:800;font-size:30px;margin:20px 4px 4px;letter-spacing:-0.015em;color:var(--green-d)}

.dog .meta{font-size:13px;color:var(--muted);letter-spacing:0.04em;margin:0 4px 10px;font-weight:500}

.dog .meta .sep{display:inline-block;margin:0 6px;color:var(--gold)}

.dog p{font-size:15px;color:var(--ink-2);line-height:1.55;margin:0 4px 16px}

.dog .meet{margin:0 4px 6px;font:700 11px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;color:var(--green-d);display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 14px;border-radius:999px;background:var(--paper);transition:all .2s ease}

.dog:hover .meet{background:var(--green);color:#fbf6e7}

.dog.more-tile{position:relative;overflow:hidden;align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,var(--green-d),var(--green));color:var(--paper);aspect-ratio:auto;padding:48px 28px;border-radius:var(--r-lg)}

.dog.more-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

.dog.more-tile .num{font-family:var(--slab);font-weight:800;font-size:80px;line-height:1;color:var(--gold-l)}

.dog.more-tile div{font:600 12px/1.4 var(--sans);letter-spacing:0.2em;text-transform:uppercase;margin-top:14px;color:#dfd6bd}

.dog.more-tile .more-paw{position:absolute;top:18px;right:18px}

.dog.more-tile .arrow-link{color:#fff;background:rgba(255,255,255,0.12);margin-top:24px;font:700 11px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,0.25)}

.dogs-cta{margin-top:60px;display:flex;justify-content:center}

/* STORY */
.story{background:linear-gradient(160deg,var(--green-d) 0%,var(--leaf) 100%);color:var(--paper);margin:clamp(20px,3vw,40px);border-radius:var(--r-xl);overflow:hidden;position:relative}

.story::before{content:"";position:absolute;bottom:-200px;left:-150px;width:600px;height:600px;background:radial-gradient(circle,rgba(178,135,96,0.16),transparent 60%);pointer-events:none}

.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:560px;position:relative}

@media (max-width:880px){.story-grid{grid-template-columns:1fr}}

.story-photo{overflow:hidden;background:transparent;padding:clamp(28px,3.5vw,44px) 0 clamp(28px,3.5vw,44px) clamp(28px,3.5vw,44px)}

@media (max-width:880px){.story-photo{padding:clamp(24px,3vw,36px) clamp(24px,3vw,36px) 0}}

.story-photo img{width:100%;height:100%;object-fit:cover;min-height:480px;border-radius:var(--r-lg)}

.story-text{padding:clamp(40px,6vw,80px);display:flex;flex-direction:column;justify-content:center}

.story-text .eyebrow{color:var(--gold-l)}

.story-text .eyebrow::before{background:var(--gold)}

.story h2{font-family:var(--slab);font-weight:800;font-size:clamp(36px,4.8vw,58px);line-height:1.1;letter-spacing:-0.02em;margin:18px 0 28px;max-width:18ch;color:#fbf6e7}

.story-body{font-size:18px;line-height:1.75;color:#dfd6bd;max-width:50ch}

.story-body p{margin:0 0 16px}

.story-body p:last-of-type{font-family:var(--slab);font-weight:600;font-style:italic;font-size:22px;color:#fbf6e7;margin-top:28px;padding:24px 0 0;border-top:1px solid rgba(178,135,96,0.4);max-width:32ch;line-height:1.5}

.story .btn{margin-top:32px;align-self:flex-start}

/* SANCTUARY */
/* Sanctuary section — dark green, mirrors the dark Story section */
#sanctuary{background:linear-gradient(160deg,var(--green-d) 0%,var(--green) 100%);color:var(--paper);padding-top:clamp(120px,14vw,200px);padding-bottom:clamp(80px,10vw,140px)}

.sanctuary-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:48px}

@media (max-width:820px){.sanctuary-head{grid-template-columns:1fr;gap:22px}}

.sanctuary-head .eyebrow{color:var(--gold-l)}

.sanctuary-head .eyebrow::before{background:var(--gold)}

.sanctuary-head h2{font-family:var(--slab);font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:1.05;letter-spacing:-0.025em;margin:14px 0 0;color:#fbf6e7}

.sanctuary-head h2 span{color:var(--gold);font-style:italic;font-weight:500}

.sanctuary-head p{font-size:18px;color:#dfd6bd;max-width:46ch;margin:0;line-height:1.6}

.sanctuary-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 var(--gutter)}

@media (max-width:720px){.sanctuary-strip{grid-template-columns:1fr}}

.sanctuary-strip > div{aspect-ratio:4/3;overflow:hidden;background:var(--green-d);border-radius:var(--r-lg);border:2px solid var(--gold)}

.sanctuary-strip img{width:100%;height:100%;object-fit:cover;filter:saturate(0.96) contrast(1.04)}

/* Penny-O-Meter — cream card on the dark green section, inverts the previous treatment */
.penny-meter{margin:32px var(--gutter) 0;background:var(--paper);color:var(--ink);padding:clamp(36px,5vw,56px);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;border-radius:var(--r-xl);position:relative;overflow:hidden;border:2px solid var(--gold);box-shadow:0 4px 28px rgba(0,0,0,0.18)}

.penny-meter::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(232,176,74,0.20),transparent 60%);pointer-events:none}

@media (max-width:760px){.penny-meter{grid-template-columns:1fr}}

.penny-meter .label-row{display:flex;justify-content:space-between;font:700 11px/1 var(--sans);letter-spacing:0.22em;text-transform:uppercase;color:var(--green);margin-bottom:14px;position:relative}

.penny-meter .raised{font-family:var(--slab);font-weight:800;font-size:clamp(36px,4.6vw,56px);letter-spacing:-0.02em;margin-bottom:18px;line-height:1;color:var(--green-d);position:relative}

.penny-meter .raised .of{color:var(--muted);font-weight:500;font-size:0.7em}

.penny-meter .bar{height:14px;background:var(--paper-2);position:relative;overflow:hidden;border-radius:999px}

.penny-meter .bar-fill{position:absolute;top:0;left:0;bottom:0;width:64%;background:linear-gradient(90deg,var(--gold),var(--yellow));transition:width 1.4s cubic-bezier(.4,.1,.2,1);border-radius:999px;box-shadow:0 0 14px rgba(244,211,94,0.4)}

.penny-meter .pct-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2);margin-top:14px;position:relative}

.penny-meter .pct-row strong{color:var(--green-d);font-weight:700}

.penny-meter .btn{position:relative}

/* HELP */
.help{background:#fff}

.help-head{margin-bottom:48px}

.help-head h2{font-family:var(--slab);font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:1.05;letter-spacing:-0.025em;margin:14px 0 0;max-width:14ch;color:var(--green-d)}

.help-head h2 span{color:var(--green-l);font-style:italic;font-weight:500}

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

@media (max-width:920px){.help-grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width:540px){.help-grid{grid-template-columns:1fr}}

.help-card{padding:36px 30px 30px;display:flex;flex-direction:column;min-height:280px;cursor:pointer;background:var(--paper);border-radius:var(--r-lg);border:1px solid rgba(52,74,48,0.08);transition:all .25s ease;position:relative}

.help-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}

.help-card .num{font-family:var(--slab);font-weight:800;font-size:13px;color:var(--green);margin-bottom:20px;letter-spacing:0.18em;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:var(--paper-2);padding:6px 12px;border-radius:999px}

.help-card h3{font-family:var(--slab);font-weight:800;font-size:26px;margin:0 0 12px;letter-spacing:-0.015em;color:var(--green-d)}

.help-card p{font-size:15px;color:var(--ink-2);margin:0 0 20px;line-height:1.6;max-width:32ch}

.help-card .arrow-link{margin-top:auto;align-self:flex-start;font:700 11px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;color:var(--green-d);display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--paper-2);transition:all .2s ease}

.help-card:hover .arrow-link{background:var(--green);color:#fbf6e7}

/* NEWS */
.news-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:56px}

@media (max-width:820px){.news-head{grid-template-columns:1fr;gap:22px}}

.news-head h2{font-family:var(--slab);font-weight:800;font-size:clamp(40px,5.4vw,72px);line-height:1.05;letter-spacing:-0.025em;margin:14px 0 0;color:var(--green-d)}

.news-head h2 span{color:var(--green-l);font-style:italic;font-weight:500}

.news-head p{font-size:18px;color:var(--ink-2);max-width:46ch;margin:0;line-height:1.6}

.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2vw,28px)}

@media (max-width:540px){.news-grid{grid-template-columns:1fr}}

.news-card{display:flex;flex-direction:column;cursor:pointer;text-decoration:none;color:inherit}
a.news-card,a.news-card:hover,a.news-card:visited,a.news-card:focus{color:inherit;text-decoration:none}

.news-card .photo{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);margin-bottom:18px;border-radius:var(--r-lg)}

.news-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}

.news-card .news-tag{font:700 10px/1 var(--sans);letter-spacing:0.20em;text-transform:uppercase;color:var(--green);margin-bottom:10px;display:flex;justify-content:space-between;padding:0 4px}

.news-card .news-tag .date{color:var(--muted);font-weight:500}

/* Sparing accent colors per news category — uses the new red / blue palette */
.news-card.latest-rescue .news-tag span:first-child{color:var(--red)}

.news-card.sanctuary .news-tag span:first-child{color:var(--brown-d)}

.news-card.education .news-tag span:first-child{color:var(--blue-l)}

.news-card.in-memoriam .news-tag span:first-child{color:var(--blue-d)}

.news-card h3{font-family:var(--slab);font-weight:800;font-size:23px;margin:0 0 10px;line-height:1.2;letter-spacing:-0.015em;color:var(--green-d);padding:0 4px}

.news-card p{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0 0 14px;padding:0 4px}

.news-card .read{margin-top:auto;font:700 11px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;color:var(--green-d);display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:0 4px}

.news-card:hover .read{color:var(--green-l)}

.news-cta{margin-top:56px}

/* NEWSLETTER — white outer, yellow inner box, glow heading */
.newsletter{background:#3a2516 url('../images/mission-fur-new.jpg') center center/cover no-repeat;position:relative;isolation:isolate}

.newsletter h2 span{color:#fff;font-style:italic;font-weight:600;text-shadow:0 0 24px rgba(255,255,255,0.65),0 0 48px rgba(255,255,255,0.35),0 2px 4px rgba(176,122,20,0.20)}

/* Decorative big paws on key sections — large, partly off-screen, low opacity */
.pillars{overflow:hidden}

.pillars::before{content:"";position:absolute;top:-30px;left:-80px;width:240px;height:240px;background:var(--green-l);-webkit-mask:url('../images/paw-only.svg') no-repeat center/contain;mask:url('../images/paw-only.svg') no-repeat center/contain;opacity:0.28;pointer-events:none;z-index:0;transform:rotate(15deg)}

.pillars .container{position:relative;z-index:1}

.help{overflow:hidden;position:relative}

.help::before{content:"";position:absolute;top:-40px;right:-60px;width:300px;height:300px;background:var(--gold);-webkit-mask:url('../images/paw-only.svg') no-repeat center/contain;mask:url('../images/paw-only.svg') no-repeat center/contain;opacity:0.40;pointer-events:none;z-index:0;transform:rotate(18deg)}

.help .container{position:relative;z-index:1}

.story::after{content:"";position:absolute;top:30px;right:36px;width:100px;height:100px;background:var(--gold);-webkit-mask:url('../images/paw-only.svg') no-repeat center/contain;mask:url('../images/paw-only.svg') no-repeat center/contain;opacity:0.42;pointer-events:none;transform:rotate(14deg);z-index:1}

/* Walking paw trail — rendered behind all sections, animates step-in on scroll */
#page{position:relative}

.paw-step.in{opacity:0.34;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)}

/* Sections sit above the trail */
#page > section,#page > footer{position:relative;z-index:1}

/* Hero uses inset margin + border-radius — already z-index:auto, force above */
.hero{z-index:1}

/* Story is dark — make the paws less visible there with a darker overlay variant */
.story{z-index:1}

/* Trust band already has its own background — sits above */
.trust{position:relative;z-index:1}

/* Accent font override — applies to every accent span across the page.
   Switches from Roboto Slab (heading font) to Fraunces italic for the
   distinctive accent style Matt asked for. Bold weight (700). */
.mission p span,
.pillars-head h2 span,
.dogs-head h2 span,
.sanctuary-head h2 span,
.help-head h2 span,
.news-head h2 span,
.donate-band h2 span,
.newsletter h2 span {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.newsletter button[type="submit"]{background:var(--green);color:#fbf6e7;padding:14px 28px;font-family:var(--slab);font-weight:700;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;border-radius:999px;display:inline-flex;align-items:center;gap:10px;justify-content:center;transition:all .2s ease}

/* TRUST */
.trust{background:var(--gold);color:var(--green-d);padding:28px var(--gutter);text-align:center;font-size:16px;line-height:1.5;font-family:var(--slab);font-weight:500}

.trust .trust-paw{vertical-align:middle;margin:0 14px;opacity:0.55}

.trust .container{max-width:1100px}

.trust strong{font-weight:800;color:var(--green-d)}

.trust .sep{display:inline-block;margin:0 16px;opacity:0.45;color:var(--green-d)}

/* ============================================
   ANIMATIONS — reveal on scroll, hero polish
   ============================================ */
html{scroll-behavior:smooth}

/* Slow zoom on the active hero slide so the carousel feels alive */
@keyframes kb-hero{from{transform:scale(1.0)}to{transform:scale(1.05)}}

/* Ken Burns zoom, gated behind .is-ready (added by site.js after first paint)
   so it never runs during the initial LCP paint of the hero image. */
.hero.is-ready .hero-slide.active img{animation:kb-hero 12s ease-out forwards;will-change:transform}

.hero-actions .btn-primary{animation:cta-pulse 2.6s ease-in-out infinite}

.hero-actions .btn-primary:hover{animation:none}

/* Penny-O-Meter bar — subtle shimmer on the gold fill */
@keyframes pom-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

.penny-meter .bar-fill{background:linear-gradient(90deg,var(--gold) 0%,var(--yellow) 35%,var(--gold-l) 50%,var(--yellow) 65%,var(--gold) 100%);background-size:200% 100%;animation:pom-shimmer 4.5s linear infinite}

@media (prefers-reduced-motion:reduce){
  .r-up{transition:opacity 0.3s ease;transform:none !important}
  .r-up.in{transform:none !important}
  .hero-slide.active img{animation:none !important}
  .hero-actions .btn-primary{animation:none !important}
  .penny-meter .bar-fill{animation:none !important}
  html{scroll-behavior:auto}
}

/* FOOTER */
footer{background:var(--green-d);color:#cfc8b3;padding:80px var(--gutter) 32px}


/* ===== HOMEPAGE REFRESH 2026-05-27 (overrides earlier rules) ===== */
.hero{ margin:0; border-radius:0; }
.hero-inner h1 .hl{ font-family:var(--serif-accent); font-style:italic; font-weight:600; color:var(--gold); font-size:1.12em; }
.pillars{ background:var(--paper-3); }
.pillars-head{ display:block; text-align:center; max-width:none; margin:0 auto 48px; }
.pillars-head .eyebrow{ justify-content:center; color:var(--green); }
.pillars-head .eyebrow::before{ background:var(--green); }
.pillars-head h2{ margin:10px 0 0; color:var(--green-d); }
.pillars-head h2 .rgold{ color:var(--gold); font-family:var(--serif-accent); font-style:italic; }
.pillar-grid{ grid-template-columns:repeat(2,1fr); gap:24px; align-items:stretch; max-width:none; }
@media (max-width:640px){ .pillar-grid{ grid-template-columns:1fr; } }
.pillar{ position:relative; overflow:hidden; border-radius:28px; padding:44px 42px 34px; min-height:600px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; background:transparent; border:0; box-shadow:0 12px 38px rgba(31,43,29,0.18); color:#fff; transition:transform .28s ease, box-shadow .28s ease; }
.pillar:hover{ transform:translateY(-7px); box-shadow:0 28px 62px rgba(31,43,29,0.36); border-color:transparent; }
.pillar .pillar-icon,.pillar .num,.pillar .label{ display:none; }
.pillar h3{ font-family:var(--slab); font-weight:800; font-size:clamp(38px,3.4vw,56px); line-height:1.02; margin:0 0 14px; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,0.6); }
.pillar h3 .rcap{ font-family:var(--serif-accent); font-style:italic; font-weight:600; font-size:1.55em; line-height:0.7; }
.pillar p{ font-size:16px; line-height:1.6; margin:0 0 20px; color:#fff; max-width:44ch; text-shadow:0 1px 12px rgba(0,0,0,0.6); }
.pillar .arrow-link{ align-self:flex-end; margin-top:0; background:var(--gold); color:var(--green-d); font-family:var(--slab); font-weight:700; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; padding:14px 24px; border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,0.30); }
.pillar .arrow-link:hover{ background:var(--gold); color:var(--green-d); }
.pillar::before{ content:""; position:absolute; inset:0; z-index:-2; background-position:center 28%; background-size:cover; transition:transform .5s ease; }
.pillar:hover::before{ transform:scale(1.06); }
.pillar::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(30,58,42,0) 0%,rgba(30,58,42,0) 42%,rgba(30,58,42,0.5) 66%,rgba(30,58,42,0.95) 100%); }
.pillar:nth-child(1)::before{ background-image:url('../images/card-rescue.jpg'); }
.pillar:nth-child(2)::before{ background-image:url('../images/card-rehab.jpg'); }
.pillar:nth-child(3)::before{ background-image:url('../images/card-rehome.jpg'); }
.pillar:nth-child(4)::before{ background-image:url('../images/card-remember.jpg'); }
.pillar:nth-child(1) h3 .rcap{ color:var(--gold); }
.pillar:nth-child(2) h3 .rcap{ color:var(--leaf); }
.pillar:nth-child(3) h3 .rcap{ color:var(--gold-bright); }
.pillar:nth-child(4) h3 .rcap{ color:var(--green-ll); }
.zeffy-frame{ background:var(--paper-w); border:1px solid rgba(31,43,29,0.10); border-top:4px solid var(--gold); border-radius:18px; box-shadow:0 18px 46px rgba(0,0,0,0.26); min-height:780px; }
.zeffy-header{ background:var(--paper-w); border-bottom:1px solid var(--line-soft); padding:15px 22px; }
.zeffy-header .lock{ color:var(--green); font-size:11px; letter-spacing:0.14em; }
.zeffy-header .fees{ background:var(--gold); color:var(--green-d); padding:5px 12px; border-radius:999px; font-size:10px; letter-spacing:0.12em; }
.zeffy-foot{ background:var(--paper-w); border-top:1px solid var(--line-soft); color:var(--green); padding:13px 22px; }
.zeffy-iframe{ background:var(--paper-w); min-height:780px; }
@media (max-width:920px){ .zeffy-frame, .zeffy-iframe{ min-height:960px; } }