:root{
  /* Foundation */
  --navy:#1B2A4A; --gold:#c99a3a; --gold-hi:#e0b85c; --white:#FFFFFF;
  --cream:#f4f1ea; --navy-2:#2C3E5E; --navy-deep:#16223b; --gsd-black:#1C1814; --tan:#B8864E;
  --ink:#22324f;            /* body text on cream */
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;font-size:19px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---------- Type ---------- */
h1,h2,h3,h4,.cinzel{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.09em;line-height:1.12;margin:0}
.eyebrow{font-family:"Raleway",sans-serif;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  font-size:.74rem;color:var(--gold)}
.lede{font-size:1.18rem}
p{margin:0 0 1.15em}
.pullquote{font-family:"EB Garamond",serif;font-style:italic;font-weight:500;
  color:var(--gold);line-height:1.32;letter-spacing:.005em}
.h-gold{color:var(--gold-hi)!important}

/* ---------- Top accent stripe (non-negotiable brand element) ---------- */
.accent-stripe{position:fixed;top:0;left:0;right:0;height:4px;z-index:120;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-hi) 50%,var(--gold) 100%)}

/* ---------- Logo marks (embedded once, reused via class) ---------- */
.mark{background-repeat:no-repeat;background-position:center;background-size:contain;display:inline-block}
.mark--navy{background-image:var(--logo-navy)}
.mark--cream{background-image:var(--logo-cream)}

/* paw vector (gold, recolorable) for small UI accents */
.paw{width:1em;height:1em;display:inline-block;fill:currentColor;vertical-align:-.12em}

/* ---------- Gold dividers (signature) ---------- */
.rule{height:2px;width:84px;background:var(--gold);border:0;margin:0}
.rule--center{margin-inline:auto}
.rule--fade{height:2px;width:min(560px,80%);border:0;margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold-hi) 50%,var(--gold) 82%,transparent)}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55em;
  font-family:"Raleway",sans-serif;font-weight:600;letter-spacing:.06em;font-size:.82rem;
  text-transform:uppercase;padding:.92em 1.7em;border:2px solid transparent;border-radius:2px;
  cursor:pointer;transition:transform .25s var(--ease),background .25s var(--ease),
    color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.btn--primary{background:var(--gold);color:var(--navy);box-shadow:0 6px 0 rgba(27,42,74,.0)}
.btn--primary:hover{background:var(--gold-hi);transform:translateY(-3px);
  box-shadow:0 10px 26px -10px rgba(196,154,44,.7)}
.btn--ghost{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn--ghost:hover{background:var(--gold);color:var(--navy);transform:translateY(-3px)}
.btn--lg{padding:1.05em 2.1em;font-size:.86rem}
.btn:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}

/* ---------- Header / nav ---------- */
.nav{position:fixed;top:4px;left:0;right:0;z-index:110;
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease),
    padding .35s var(--ease),box-shadow .35s var(--ease)}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;transition:padding .35s var(--ease)}
.nav.scrolled{background:rgba(27,42,74,.82);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.nav.scrolled .nav__inner{padding:11px 28px}
.brand{display:flex;align-items:center;gap:13px}
.brand .mark{width:46px;height:46px;flex:0 0 auto;transition:width .35s var(--ease),height .35s var(--ease)}
.nav.scrolled .brand .mark{width:40px;height:40px}
.brand__txt{font-family:"Cinzel",serif;font-weight:700;color:var(--white);
  font-size:.96rem;letter-spacing:.12em;line-height:1.05}
.brand__txt span{display:block;font-size:.6rem;letter-spacing:.22em;color:var(--gold-hi);font-weight:600}
.nav__links{display:flex;align-items:center;gap:6px}
.nav__links a{font-family:"Raleway",sans-serif;font-weight:500;letter-spacing:.04em;
  font-size:.84rem;color:rgba(255,255,255,.86);padding:.5em .85em;border-radius:2px;position:relative}
.nav__links a::after{content:"";position:absolute;left:.85em;right:.85em;bottom:.28em;height:2px;
  background:var(--gold-hi);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__links a.active{color:#fff}
.nav__links a.active::after{transform:scaleX(1)}
.nav__cta{margin-left:0}
.nav__cta-group{display:flex;align-items:center;gap:10px;margin-left:6px}
.nav__cta-group .btn{white-space:nowrap;font-size:.74rem;padding:.82em 1.25em;letter-spacing:.05em}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:9px}
.nav__toggle span{display:block;height:2px;background:var(--white);margin:5px 0;transition:.3s var(--ease)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:115;background:linear-gradient(160deg,var(--navy),var(--gsd-black));
  transform:translateX(100%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.drawer.open{transform:translateX(0)}
.drawer a{font-family:"Cinzel",serif;color:#fff;font-size:1.35rem;letter-spacing:.12em;padding:.5em 1em}
.drawer a.active{color:var(--gold-hi)}
.drawer__close{position:absolute;top:22px;right:22px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer}
.drawer .btn{margin-top:14px;font-family:"Raleway",sans-serif;font-size:.82rem;
  letter-spacing:.06em;max-width:min(320px,84%);text-align:center;justify-content:center}

/* ---------- Page shells ---------- */
/* Each page is its own document now, so a .page is simply visible.
   The class is kept because the stylesheet scopes a few rules to it. */
.page{display:block;animation:pagein .5s var(--ease)}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section{padding:clamp(64px,9vw,128px) 0;position:relative;overflow:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}
.wrap--narrow{max-width:860px}

/* section colour themes */
.s-cream{background:var(--cream);color:var(--ink)}
.s-cream-tan{background:linear-gradient(180deg,var(--cream),#efe9dd);color:var(--ink)} /* subtle tan wash */
.s-navy{background:var(--navy);color:var(--cream)}
.s-navy .eyebrow{color:var(--gold-hi)}
.s-black{background:var(--gsd-black);color:var(--cream)}
.s-black .eyebrow,.s-navy-2 .eyebrow,.s-navy-deep .eyebrow{color:var(--gold-hi)}
.s-navy-2{background:var(--navy-2);color:var(--cream)}
.s-navy-deep{background:var(--navy-deep);color:var(--cream)}
.on-dark h1,.on-dark h2,.on-dark h3,.s-navy h1,.s-navy h2,.s-navy h3,
.s-black h1,.s-black h2,.s-black h3,.s-navy-deep h1,.s-navy-deep h2,.s-navy-deep h3{color:var(--white)}

/* texture/noise overlay on dark sections */
.s-navy::before,.s-black::before,.s-navy-2::before,.s-navy-deep::before{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ghost label behind headlines */
.ghost{position:absolute;font-family:"Cinzel",serif;font-weight:700;letter-spacing:.04em;
  line-height:.8;font-size:clamp(4.5rem,16vw,12rem);color:currentColor;opacity:.05;
  top:-.18em;left:-.02em;z-index:1;pointer-events:none;white-space:nowrap}
.headblock{position:relative;z-index:2}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;
  padding:118px 0 64px;
  background:radial-gradient(120% 120% at 70% 10%,#24365c 0%,var(--navy) 48%,#14203a 100%);
  color:var(--cream);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.2);animation:kenburns 26s ease-in-out infinite alternate}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,32,58,.96) 0%,rgba(20,32,58,.82) 42%,rgba(20,32,58,.55) 100%)}
@keyframes kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.18) translate(-2%,-2%)}}
.hero__grid{position:relative;z-index:3;display:grid;grid-template-columns:1.35fr .9fr;
  gap:40px;align-items:center;width:100%}
.hero__badge{justify-self:center}
.hero__badge{justify-self:center}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.7rem);letter-spacing:.02em;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal;color:var(--gold-hi);display:block}
.hero__sub{font-style:italic;font-size:clamp(1.25rem,2.4vw,1.7rem);color:var(--cream);margin:.5em 0 1.1em}
.hero__body{max-width:46ch;color:rgba(245,242,236,.9)}
.hero__cta-line{font-family:"Cinzel",serif;letter-spacing:.12em;color:var(--gold-hi);
  font-size:.95rem;margin:1.4em 0 .8em}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.8em}
.hero__foot{font-size:1.02rem;max-width:54ch;color:rgba(245,242,236,.86);
  border-top:1px solid rgba(196,154,44,.4);padding-top:1.1em}

/* southern-cross constellation accent (signature, echoes the logo stars) */
.constellation{position:absolute;z-index:2;pointer-events:none;opacity:.55}
.constellation .star{fill:var(--gold-hi)}
.hero .constellation{top:8%;right:6%;width:min(220px,26vw)}

/* ---------- Generic layout helpers ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.grid2--text{grid-template-columns:1.05fr .95fr}
.grid2--hero{grid-template-columns:1.1fr .9fr}
.stack>*+*{margin-top:1.1em}
.center{text-align:center}
.measure{max-width:64ch}
.measure--c{max-width:64ch;margin-inline:auto}

/* placeholder image frames */
.ph{position:relative;background:linear-gradient(135deg,#dfd8c8,#ccbfa6);
  border:1px solid rgba(27,42,74,.14);border-radius:2px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;min-height:280px;color:#6a5d44}
.ph::after{content:"";position:absolute;inset:0;background:var(--navy);opacity:.24;mix-blend-mode:multiply}
.ph span{position:relative;z-index:2;font-family:"Raleway",sans-serif;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;text-align:center;padding:1.4em;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ph--tall{min-height:440px}
.ph--kb img{transition:transform 9s ease}
.ph--hero-fig{aspect-ratio:4/5}

/* pull quote block (full design treatment) */
.quote{position:relative;padding:clamp(28px,5vw,56px) clamp(28px,6vw,72px);
  text-align:center;max-width:900px;margin-inline:auto}
.quote .paw{color:var(--gold);font-size:2.1rem;opacity:.9;margin-bottom:.2em}
.quote p{font-family:"EB Garamond",serif;font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.34;color:var(--gold);margin:0}
.s-cream .quote p{color:#a9821f}
.quote--dark p{color:var(--gold-hi)}
.quote::before,.quote::after{content:"";position:absolute;width:46px;height:2px;background:var(--gold);
  left:50%;transform:translateX(-50%)}
.quote::before{top:0}.quote::after{bottom:0}

/* impact / belief / icon cards */
.cards{display:grid;gap:22px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.icard{background:rgba(245,242,236,.04);border:1px solid rgba(196,154,44,.28);
  border-radius:2px;padding:30px 28px;position:relative}
.s-cream .icard{background:#fff;border-color:rgba(27,42,74,.12);box-shadow:0 14px 40px -28px rgba(27,42,74,.4)}
.icard .ic{width:46px;height:46px;color:var(--gold);margin-bottom:16px}
.icard h3{font-size:1.02rem;letter-spacing:.06em;margin-bottom:.5em}
.s-cream .icard h3{color:var(--navy)}
.icard p{font-size:1rem;margin:0;color:inherit;opacity:.92}
.icard .num{font-family:"Cinzel",serif;position:absolute;top:18px;right:20px;
  font-size:1rem;color:var(--gold);opacity:.55;letter-spacing:.05em}

/* impact list (sequential reveal) */
.impact{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.impact .row{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;
  border:1px solid rgba(196,154,44,.26);border-radius:2px;background:rgba(0,0,0,.16)}
.impact .ic{flex:0 0 auto;width:40px;height:40px;color:var(--gold)}
.impact .row p{margin:0;font-size:1.06rem;color:var(--cream)}

/* metric scaffolding (Phase 2/3 counters) */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
.metric{text-align:center;padding:26px 14px;border:1px solid rgba(196,154,44,.3);border-radius:2px}
.metric .n{font-family:"Cinzel",serif;font-size:2.6rem;color:var(--gold-hi);letter-spacing:.02em}
.metric .l{font-family:"Raleway",sans-serif;text-transform:uppercase;letter-spacing:.16em;
  font-size:.66rem;color:var(--cream);opacity:.8;margin-top:.5em}

/* adoption steps (interactive accordion) */
.steps{margin-top:8px;border-top:1px solid rgba(27,42,74,.16)}
.step{border-bottom:1px solid rgba(27,42,74,.16)}
.step__btn{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:22px;padding:22px 8px}
.step__num{font-family:"Cinzel",serif;font-size:1.5rem;color:var(--gold);letter-spacing:.04em;
  flex:0 0 auto;width:54px}
.step__title{font-family:"Cinzel",serif;font-size:1.08rem;letter-spacing:.06em;color:var(--navy);flex:1}
.step__plus{width:26px;height:26px;flex:0 0 auto;position:relative;transition:transform .3s var(--ease)}
.step__plus::before,.step__plus::after{content:"";position:absolute;background:var(--gold);inset:50% 0;
  height:2px;margin-top:-1px}
.step__plus::after{transform:rotate(90deg)}
.step.open .step__plus{transform:rotate(45deg)}
.step__panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.step__panel p{margin:0 0 22px 76px;max-width:60ch;color:var(--ink)}
.s-navy .step,.s-navy .steps{border-color:rgba(196,154,44,.26)}
.s-navy .step__title{color:#fff}.s-navy .step__panel p{color:var(--cream)}

/* topic grid (education) */
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.topic{display:flex;align-items:center;gap:14px;padding:18px 20px;background:#fff;
  border:1px solid rgba(27,42,74,.1);border-radius:2px;
  box-shadow:0 12px 34px -26px rgba(27,42,74,.45);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.topic:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(27,42,74,.5)}
.topic .ic{width:30px;height:30px;color:var(--gold);flex:0 0 auto}
.topic span{font-family:"Raleway",sans-serif;font-weight:600;font-size:.92rem;color:var(--navy);letter-spacing:.02em}

/* "what we provide" checklist */
.checklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 30px}
.checklist li{display:flex;gap:13px;align-items:flex-start;font-size:1.05rem}
.checklist .ic{width:22px;height:22px;color:var(--gold);flex:0 0 auto;margin-top:.28em}

/* GHL form embed placeholder (styled wrapper) */
.ghl-embed{border:2px dashed var(--gold);border-radius:3px;background:rgba(196,154,44,.06);
  padding:34px;max-width:680px;margin-inline:auto;position:relative}
.s-cream .ghl-embed{background:rgba(196,154,44,.08)}
.ghl-embed__tag{position:absolute;top:-13px;left:24px;background:var(--gold);color:var(--navy);
  font-family:"Raleway",sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.35em .9em;border-radius:2px}
.ghl-embed__title{font-family:"Cinzel",serif;letter-spacing:.06em;font-size:1.1rem;margin:0 0 6px}
.ghl-embed__note{font-family:"Raleway",sans-serif;font-size:.82rem;letter-spacing:.02em;
  opacity:.78;margin:0 0 22px}
/* preview fields so the client sees the intended styling */
.field{margin-bottom:16px}
.field label{display:block;font-family:"Raleway",sans-serif;font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
.s-navy .field label,.s-black .field label{color:var(--gold-hi)}
.field input,.field select,.field textarea{width:100%;padding:.8em .95em;border-radius:2px;
  border:1px solid rgba(27,42,74,.28);background:#fff;font-family:"EB Garamond",serif;font-size:1.02rem;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* donate amounts */
.amounts{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 4px}
.amount{font-family:"Cinzel",serif;letter-spacing:.04em;border:2px solid var(--gold);color:var(--gold);
  background:transparent;padding:.7em 1.25em;border-radius:2px;cursor:pointer;font-size:1rem;
  transition:.22s var(--ease)}
.amount:hover,.amount.sel{background:var(--gold);color:var(--navy)}

/* shepherds circle feature */
.circle-feature{border:1px solid rgba(196,154,44,.4);border-radius:3px;
  background:linear-gradient(150deg,rgba(196,154,44,.1),rgba(28,24,20,.0));
  padding:clamp(28px,5vw,52px);position:relative;overflow:hidden}
.circle-feature .paw{color:var(--gold);font-size:2.4rem}

/* available dogs placeholder grid */
.dogs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
.dogcard{border:1px solid rgba(27,42,74,.12);border-radius:2px;overflow:hidden;background:#fff}
.dogcard .ph{min-height:200px;border:0;border-radius:0}
.dogcard .body{padding:14px 16px}
.dogcard .body b{font-family:"Cinzel",serif;font-size:.95rem;color:var(--navy);letter-spacing:.05em}
.dogcard .body p{margin:.2em 0 0;font-size:.86rem;color:#6a6151}

/* footer */
.footer{background:var(--navy);color:var(--cream);position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.footer__top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;
  padding:clamp(52px,7vw,88px) 28px clamp(36px,5vw,56px);max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.footer__brand .mark{width:78px;height:78px;margin-bottom:18px}
.footer__brand p{max-width:42ch;color:rgba(245,242,236,.84);font-size:1.02rem}
.footer h4{font-family:"Cinzel",serif;font-size:.82rem;letter-spacing:.16em;color:var(--gold-hi);margin-bottom:18px}
.footer__col a,.footer__col p{display:block;font-family:"Raleway",sans-serif;font-size:.9rem;
  color:rgba(245,242,236,.82);margin-bottom:11px;letter-spacing:.02em;cursor:pointer}
.footer__col a:hover{color:var(--gold-hi)}
.social{display:flex;gap:12px;margin-top:6px}
.social a{width:38px;height:38px;border:1px solid rgba(196,154,44,.4);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold-hi)}
.social a:hover{background:var(--gold);color:var(--navy)}
.social .ic{width:18px;height:18px}
.footer__bar{border-top:1px solid rgba(196,154,44,.24);padding:22px 28px;text-align:center;
  font-family:"Raleway",sans-serif;font-size:.78rem;letter-spacing:.06em;color:rgba(245,242,236,.6);position:relative;z-index:2}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.seq>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.seq.in-view>*{opacity:1;transform:none}
.seq.in-view>*{transition-delay:calc(var(--i,0)*90ms)}

/* page intro band */
.pageintro{padding:clamp(120px,16vw,190px) 0 clamp(48px,7vw,80px);
  background:radial-gradient(120% 130% at 80% -10%,#26385e,var(--navy) 55%,#16233f);color:var(--cream);position:relative}
.pageintro h1{font-size:clamp(2.3rem,5.6vw,4rem);color:#fff;letter-spacing:.05em}
.pageintro .lede{max-width:60ch;color:rgba(245,242,236,.9);margin-top:1em}
.pageintro .constellation{top:14%;right:5%;width:min(170px,22vw);opacity:.5}

/* ---------- Donate: Fund nav strip ---------- */
.fund-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.fund-nav__card{background:#fff;border:1px solid #e4ddc8;border-top:4px solid var(--gold);
  border-radius:4px;padding:26px 24px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fund-nav__card:hover{transform:translateY(-3px);box-shadow:0 12px 32px -14px rgba(27,42,74,.25)}
.fund-nav__card .num{font-family:"Raleway",sans-serif;font-size:.72rem;color:var(--gold);
  letter-spacing:.24em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.fund-nav__card h4{font-family:"Cinzel",serif;font-size:1.18rem;letter-spacing:.06em;
  color:var(--navy);margin:0 0 10px;line-height:1.25}
.fund-nav__card p{font-size:.96rem;line-height:1.6;margin:0;color:#4a5568;font-family:"EB Garamond",serif}

/* ---------- Donate: Cost list (Fund 01) ---------- */
.cost-list{list-style:none;padding:0;margin:0}
.cost-list li{font-size:1.02rem;padding:14px 0;border-bottom:1px solid rgba(196,154,44,.25);
  display:flex;gap:14px;align-items:flex-start;line-height:1.55}
.cost-list li:last-child{border-bottom:0}
.cost-list li svg{flex:0 0 auto;width:22px;height:22px;color:var(--gold);margin-top:3px}

/* ---------- Donate: transparency callout ---------- */
.no-salary-note{background:rgba(255,255,255,.06);border-left:4px solid var(--gold-hi);
  border-radius:0 3px 3px 0;padding:18px 22px;margin-top:24px}
.no-salary-note p{font-size:.96rem;line-height:1.65;margin:0}
.no-salary-note strong{color:#fff}

/* ---------- Donate: Shepherds' Circle stat card (Fund 03) ---------- */
.circle-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:4px;padding:38px 32px;text-align:center}
.circle-stat .big{font-family:"Cinzel",serif;font-size:clamp(2.4rem,5vw,3rem);color:var(--gold-hi);
  font-weight:700;letter-spacing:.02em;line-height:1}
.circle-stat .small{font-family:"Raleway",sans-serif;font-size:.88rem;color:var(--cream);
  margin-top:14px;line-height:1.5;opacity:.9}

/* ---------- Donate: fund selector, amount grid, frequency toggle ---------- */
.fund-select{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 22px}
.fund-select__option{border:1px solid #ccc;border-radius:3px;padding:16px 14px;
  font-family:"Raleway",sans-serif;text-align:center;cursor:pointer;
  transition:border-color .2s ease,background .2s ease;background:#fff}
.fund-select__option:hover{border-color:var(--gold)}
.fund-select__option.selected{border-color:var(--gold);background:#fdf6e6}
.fund-select__option .name{font-size:.88rem;font-weight:700;color:var(--navy);letter-spacing:.04em}
.fund-select__option .desc{font-size:.74rem;color:#666;margin-top:5px;letter-spacing:.02em}

.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.amount-grid .amt{border:1px solid var(--gold);border-radius:3px;padding:14px 8px;
  text-align:center;font-family:"Raleway",sans-serif;font-weight:700;font-size:.94rem;
  color:var(--navy);cursor:pointer;background:#fff;transition:background .2s ease,color .2s ease}
.amount-grid .amt.selected,.amount-grid .amt:hover{background:var(--gold);color:#fff}

.freq-row{display:flex;gap:10px;margin-bottom:18px}
.freq-row .freq-btn{flex:1;border:1px solid #ccc;border-radius:3px;padding:14px;
  text-align:center;font-family:"Raleway",sans-serif;font-size:.86rem;color:var(--navy);
  cursor:pointer;background:#fff;transition:background .2s ease,border-color .2s ease}
.freq-row .freq-btn.selected,.freq-row .freq-btn:hover{border-color:var(--gold);background:#fdf6e6;font-weight:700}

/* ---------- Home: hero photo slot ---------- */
.hero__photo{aspect-ratio:4/5;max-width:min(420px,90%);margin-inline:auto;
  border-radius:3px;overflow:hidden;border:1px solid rgba(224,184,92,.3);
  box-shadow:0 22px 60px -22px rgba(0,0,0,.6)}
.hero__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* photograph sitting beside a column of text */
.section-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:3px;box-shadow:0 18px 48px -28px rgba(0,0,0,.6)}

/* photographs dropped into the triptych / gallery grids */
.community-triptych img,.community-gallery img{width:100%;aspect-ratio:4/3;
  object-fit:cover;display:block;border-radius:3px}

/* ---------- Foster: gold CTA bar under hero ---------- */
.cta-bar{
  background:var(--gold);padding:22px clamp(24px,3.5vw,48px);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;position:relative
}
.cta-bar__msg{
  color:var(--navy-deep);font-size:1.02rem;font-weight:600;
  font-family:"EB Garamond",serif;flex:1;min-width:280px;margin:0
}
.cta-bar .btn{
  background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);
  box-shadow:0 6px 0 rgba(0,0,0,0)
}
.cta-bar .btn:hover{
  background:var(--navy);border-color:var(--navy);color:#fff;
  transform:translateY(-3px);box-shadow:0 10px 26px -10px rgba(20,32,58,.5)
}

/* ---------- Foster: foster-to-adopt FAQ card ---------- */
.faq{
  background:#fff;border:1px solid #e4ddc8;border-radius:4px;
  padding:28px 32px;margin:36px auto 0;max-width:820px;
  box-shadow:0 8px 24px -14px rgba(27,42,74,.14)
}
.faq h4{
  font-family:"Cinzel",serif;font-size:1.15rem;letter-spacing:.06em;
  margin:0 0 12px;color:var(--navy);font-weight:700
}
.faq p{font-size:1.02rem;line-height:1.65;margin:0;color:var(--ink)}


/* ---------- Community photos ----------
   All six volunteer photos live inside one image (the "More Than 20 Years of
   Second Chances" collage), cropped in CSS rather than split into separate
   files. One request, cached once, and every crop stays responsive.
   Each class isolates one 4:3 region of the 1536x1024 source:
     background-size-x = 1536 / crop_width  * 100%
     background-position-x = crop_x / (1536 - crop_width) * 100%
     background-position-y = crop_y / (1024 - crop_height) * 100%          */
.photo{background-image:url("assets/about/more-than-20-years.jpg");
  background-repeat:no-repeat;background-color:#2a3c63;
  aspect-ratio:4/3;border-radius:3px;overflow:hidden}
.photo--porch{background-size:296.53% auto;background-position:0% 9.45%}
.photo--vet{background-size:307.20% auto;background-position:50.97% 20.03%}
.photo--training{background-size:310.93% auto;background-position:100% 14.55%}
.photo--play{background-size:435.13% auto;background-position:5.07% 67.85%}
.photo--fundraiser{background-size:621.86% auto;background-position:49.34% 61.38%}
.photo--agility{background-size:435.13% auto;background-position:92.14% 67.85%}
/* photo grids size themselves from the 4:3 crops, so the old min-heights go */
.community-triptych .photo,.community-gallery .photo{min-height:0}

/* ---------- About: community triptych (3-photo grid) ---------- */
.community-triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.community-triptych .ph{min-height:200px;padding:.8em;font-size:.68rem;
  letter-spacing:.14em;border-radius:3px}
@media(max-width:600px){
  .community-triptych{grid-template-columns:1fr;gap:14px}
  .community-triptych .ph{min-height:180px}
}

/* ---------- Home: community gallery (6-photo strip) ---------- */
.community-gallery{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:40px
}
.community-gallery .ph{min-height:140px;padding:.6em;font-size:.62rem;
  letter-spacing:.14em;border-radius:3px}
@media(max-width:980px){
  .community-gallery{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .community-gallery{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Home: impact cards (3-card block) ---------- */
.impact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}
.impact-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:4px;padding:30px 28px}
.impact-card svg.ic{width:36px;height:36px;color:var(--gold-hi);margin-bottom:14px;display:block}
.impact-card h3{font-family:"Cinzel",serif;font-size:1.15rem;letter-spacing:.06em;
  color:#fff;margin:0 0 10px;line-height:1.3}
.impact-card p{font-size:1rem;line-height:1.65;margin:0;color:var(--cream)}
@media(max-width:980px){
  .impact-cards{grid-template-columns:1fr;gap:16px}
}

/* ---------- Adopt: success stories slider ---------- */
/* Adopt front-loads the available dogs, so its hero sits tighter than the
   other page intros to bring the gallery closer to the fold. */
#page-adopt .pageintro{padding-top:clamp(96px,11vw,150px);padding-bottom:clamp(28px,3.4vw,44px)}
.stories{position:relative;margin-top:28px}
.stories__nav[hidden]{display:none}
.stories__viewport{overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;border-radius:3px}
.stories__viewport::-webkit-scrollbar{display:none}
.stories__track{display:flex}
.stories__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;padding:2px}
.stories__inner{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.5vw,52px);align-items:center}
.stories__media{border-radius:3px;overflow:hidden;background:#0f0e0c;
  aspect-ratio:16/10;max-height:330px;border:1px solid rgba(201,154,58,.28)}
.stories__media img{width:100%;height:100%;object-fit:cover;display:block}
.stories__media .ph{height:100%;min-height:0;border:0;border-radius:0}
.stories__badge{display:inline-block;background:var(--gold);color:var(--navy-deep);
  font-family:"Raleway",sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;padding:6px 13px;border-radius:2px;margin-bottom:14px}
.stories__name{font-family:"Cinzel",serif;font-size:clamp(1.9rem,4vw,2.7rem);
  letter-spacing:.06em;margin:0 0 8px;line-height:1.08}
.stories__quote{font-style:italic;color:var(--gold-hi);font-size:1.08rem;
  border-left:2px solid var(--gold);padding-left:1em;margin:16px 0 0;line-height:1.55}
.stories__nav{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:30px}
.stories__arrow{width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(201,154,58,.5);background:transparent;color:var(--gold-hi);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.stories__arrow svg{width:20px;height:20px}
.stories__arrow:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
.stories__arrow:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
.stories__dots{display:flex;gap:9px;align-items:center}
.stories__dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(201,154,58,.55);background:transparent;transition:background .2s ease}
.stories__dot.is-active{background:var(--gold)}
.stories__dot:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
@media(max-width:900px){
  .stories__inner{grid-template-columns:1fr;gap:24px}
}

/* ---------- Adopt: available dogs gallery ---------- */
.dog-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.dog-card{position:relative}
.dog-card__trigger{display:block;width:100%;padding:0;text-align:left;cursor:pointer;
  background:#fff;border:1px solid rgba(27,42,74,.12);border-radius:4px;overflow:hidden;
  box-shadow:0 14px 40px -30px rgba(27,42,74,.5);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.dog-card__trigger:hover{transform:translateY(-4px);border-color:rgba(201,154,58,.55);
  box-shadow:0 22px 48px -26px rgba(27,42,74,.45)}
.dog-card__trigger:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.dog-card__media{display:block;aspect-ratio:4/3;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#e9e4d9,#d8d2c4)}
.dog-card__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.dog-card__trigger:hover .dog-card__media img{transform:scale(1.05)}
.dog-card__media .ph{position:absolute;inset:0;min-height:0;border:0;border-radius:0}
.dog-card__info{display:block;padding:20px 22px 22px}
.dog-card__name{display:block;font-family:"Cinzel",serif;font-weight:700;
  font-size:1.42rem;letter-spacing:.05em;color:var(--navy);line-height:1.1}
.dog-card__meta{display:block;font-family:"Raleway",sans-serif;font-weight:600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:8px}
.dog-card__cue{display:inline-block;margin-top:14px;font-family:"Raleway",sans-serif;
  font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  border-bottom:1px solid rgba(201,154,58,.6);padding-bottom:3px}
.dog-card__trigger:hover .dog-card__cue{color:var(--gold)}

/* coming-soon state: greyed silhouette + watermark, not clickable */
.dog-card--soon .dog-card__frame{display:block;background:#fff;
  border:1px solid rgba(27,42,74,.1);border-radius:4px;overflow:hidden;opacity:.92}
.dog-card--soon .dog-card__media{display:flex;align-items:flex-end;justify-content:center;
  background:linear-gradient(150deg,#e6e2d8,#cfc9ba)}
.dog-card__silhouette{width:56%;height:auto;color:#a9a294;filter:grayscale(1);display:block}
.dog-card__watermark{position:absolute;inset:0;display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:11%;pointer-events:none}
.dog-card__watermark span{font-family:"Raleway",sans-serif;font-weight:700;
  font-size:clamp(.82rem,1.9vw,1.05rem);letter-spacing:.34em;text-transform:uppercase;
  color:rgba(27,42,74,.62);background:rgba(244,241,234,.82);
  padding:9px 18px;border:1px solid rgba(27,42,74,.18);border-radius:2px;
  transform:rotate(-8deg);white-space:nowrap}
.dog-card--soon .dog-card__name{color:#6d6a63}
.dog-card--soon .dog-card__meta{color:#9a9385}

@media(max-width:980px){ .dog-gallery{grid-template-columns:repeat(2,1fr);gap:20px} }
@media(max-width:600px){ .dog-gallery{grid-template-columns:1fr} }

/* ---------- Adopt: empty state when no dogs are listed ---------- */
.dog-empty{background:#fff;border:1px solid rgba(27,42,74,.12);border-radius:4px;
  padding:clamp(32px,5vw,52px);text-align:center;max-width:760px;margin:0 auto;
  box-shadow:0 14px 40px -30px rgba(27,42,74,.5)}
.dog-empty__mark{width:132px;height:132px;color:#c2bbab;display:block;margin:0 auto 22px}
.dog-empty p{font-size:1.06rem;line-height:1.7;margin:0 auto;max-width:52ch;color:var(--ink)}
.dog-empty__note{margin-top:1em!important;font-size:.95rem!important;color:#5d6675}

/* ---------- Adopt: dog detail modal ---------- */
.dog-modal{position:fixed;inset:0;z-index:400;display:none;
  align-items:flex-start;justify-content:center;padding:clamp(16px,4vw,48px)}
.dog-modal.is-open{display:flex}
.dog-modal__backdrop{position:absolute;inset:0;background:rgba(11,17,30,.74);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.dog-modal__dialog{position:relative;z-index:1;width:min(980px,100%);
  max-height:calc(100vh - clamp(32px,8vw,96px));overflow-y:auto;
  background:var(--cream);border-radius:4px;border:1px solid rgba(201,154,58,.35);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);animation:dogModalIn .32s var(--ease)}
@keyframes dogModalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dog-modal__close{position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:rgba(244,241,234,.92);border:1px solid rgba(27,42,74,.18);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease}
.dog-modal__close svg{width:19px;height:19px}
.dog-modal__close:hover{background:var(--navy);color:var(--cream)}
.dog-modal__close:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.dog-modal__grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch}
.dog-modal__media{background:#0f0e0c;min-height:340px;position:relative;overflow:hidden}
.dog-modal__media img{width:100%;height:100%;object-fit:cover;display:block}
.dog-modal__media .ph{position:absolute;inset:0;min-height:0;border:0;border-radius:0}
.dog-modal__body{padding:clamp(26px,3.2vw,42px)}
.dog-modal__name{font-family:"Cinzel",serif;font-size:clamp(2rem,4vw,2.7rem);
  letter-spacing:.05em;color:var(--navy);margin:0 0 6px;line-height:1.06}
.dog-modal__meta{font-family:"Raleway",sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.dog-modal__story p{margin:0 0 1em}
.dog-modal__story p:last-child{margin-bottom:0}
.dog-modal__note{font-size:.95rem;color:#555;margin:.6em 0 0}
@media(max-width:820px){
  .dog-modal__grid{grid-template-columns:1fr}
  .dog-modal__media{min-height:0;aspect-ratio:4/3}
}
body.modal-open{overflow:hidden}

/* ---------- Adopt: capacity banner ---------- */
.capacity-banner{background:#fff;border:1px solid var(--gold);border-left:5px solid var(--gold);
  border-radius:4px;padding:28px 32px;max-width:960px;margin:0 auto;
  box-shadow:0 8px 24px -14px rgba(27,42,74,.16)}
.capacity-banner p{font-size:1.02rem;line-height:1.65;margin:0 0 14px;color:var(--ink)}
.capacity-banner p:last-child{margin-bottom:0}
.capacity-banner strong{color:var(--navy)}
.capacity-banner__buttons{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap}
.btn--ghost-navy{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost-navy:hover{background:var(--navy);color:var(--cream);transform:translateY(-3px)}

/* ---------- Adopt: dog spotlight ---------- */
.dog-spotlight{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);
  align-items:start;margin-top:34px}
.dog-photo-main{background:linear-gradient(135deg,#3a4a68,#2a3c63);border-radius:3px;
  overflow:hidden;min-height:440px;display:flex;align-items:center;justify-content:center;
  color:var(--gold-hi);font-family:"Raleway",sans-serif;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:1.6em;
  border:1px dashed rgba(224,184,92,.4);line-height:1.6}
.dog-photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.dog-photo-strip .ph{min-height:96px;padding:.5em;font-size:.66rem;letter-spacing:.12em}
.dog-name{font-family:"Cinzel",serif;font-size:clamp(2.2rem,4.4vw,3rem);
  letter-spacing:.06em;color:var(--navy);margin:0 0 6px;line-height:1.05}
.dog-meta{font-family:"Raleway",sans-serif;font-size:.82rem;color:var(--gold);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:0 0 20px}
.foster-adopt-tag{display:inline-block;background:var(--gold);color:var(--navy-deep);
  font-family:"Raleway",sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.16em;padding:7px 14px;border-radius:2px;margin-bottom:12px;
  text-transform:uppercase}
.dog-cta{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}

@media(max-width:980px){
  .dog-spotlight{grid-template-columns:1fr;gap:28px}
  .dog-photo-main{min-height:360px}
}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .nav__links{display:none}
  .nav__toggle{display:block}
  .nav__cta-group{display:none}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__badge{order:-1}
  .grid2,.grid2--text,.grid2--hero{grid-template-columns:1fr;gap:34px}
  .cards--3,.topics{grid-template-columns:1fr 1fr}
  .impact,.metrics{grid-template-columns:1fr 1fr}
  .dogs{grid-template-columns:1fr 1fr}
  .checklist{grid-template-columns:1fr}
}
@media(max-width:980px){
  .fund-nav{grid-template-columns:1fr;gap:16px}
  .fund-select{grid-template-columns:1fr}
}
@media(max-width:600px){
  body{font-size:18px}
  .cards--3,.cards--2,.topics,.impact,.metrics,.dogs{grid-template-columns:1fr}
  .field--row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:34px}
  .step__title{font-size:.98rem}
  .step__panel p{margin-left:0}
  .ghost{font-size:22vw}
  .amount-grid{grid-template-columns:1fr 1fr}
  .freq-row{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto}
  .reveal,.seq>*{opacity:1!important;transform:none!important}
  .hero__media img{animation:none}
}